refactor gauge component using angular way,remove jquery

Signed-off-by: Meina Zhou <meinaz@vmware.com>

src/portal/package-lock.json

@@ -7728,12 +7728,6 @@
             "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
             "dev": true
         },
-        "jquery": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
-            "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
-            "dev": true
-        },
         "js-base64": {
             "version": "2.4.8",
             "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.8.tgz",

src/portal/package.json

@@ -15,7 +15,8 @@
         "build_lib": "ng build --prod lib",
         "npm_pack": "cd lib/dist && npm pack",
         "package": "npm run build_lib && npm run npm_pack",
-        "link_lib": "cd lib/dist && npm link && cd ../../ && npm link @harbor/ui"
+        "link_lib": "cd lib/dist && npm link && cd ../../ && npm link @harbor/ui",
+        "build_all":"npm run build_lib && npm run link_lib && npm run build"
     },
     "private": true,
     "dependencies": {
@@ -63,7 +64,6 @@
         "enhanced-resolve": "^3.0.0",
         "jasmine-core": "~2.99.1",
         "jasmine-spec-reporter": "~4.2.1",
-        "jquery": "^3.3.1",
         "karma": "~1.7.1",
         "karma-chrome-launcher": "~2.2.0",
         "karma-cli": "^1.0.1",

src/portal/src/app/shared/gauge/gauge.component.html

@@ -1,8 +1,8 @@
 <div class="{{sizeClass}}">
     <div class="esxc-gauge-container esxc-gauge">
         <div class="esxc-gauge-circle-bg"></div>
-        <div #barOne class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
+        <div #barOne [style.transform]="'rotate(' + posOne + 'deg)'" [style.background-color]="_colorOne" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
-        <div #barTwo class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
+        <div #barTwo [style.transform]="'rotate(' + posTwo + 'deg)'" [style.background-color]="_colorTwo" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
         <div class="esxc-gauge-circle-inner" [ngStyle]="{'background-color': backgroundColor}">
             <div class="esxc-gauge-circle-caption">
                 <span class="esxc-value">{{used}}</span>

src/portal/src/app/shared/gauge/gauge.component.scss

@@ -52,109 +52,52 @@
  * Small size gauge sizing
  */
 
-.esxc-gauge-small .esxc-gauge-container {
+.esxc-gauge-small  {
+    .esxc-gauge-container {
         width: 60px;
         height: 30px;
         top: -8px;
         left: 4px;
     }
 
-.esxc-gauge-small .esxc-gauge-circle-fill {
+    .esxc-gauge-circle-fill {
         height: 60px;
         border-radius: 30px;
         clip: rect(30px, 60px, 60px, 0);
     }
 
-.esxc-gauge-small .esxc-gauge-circle-bg {
+    .esxc-gauge-circle-bg {
         height: 60px;
         border-radius: 30px;
     }
     
-.esxc-gauge-small .esxc-gauge-circle-inner {
+    .esxc-gauge-circle-inner {
         width: 50px;
         height: 50px;
         border-radius: 25px;
         margin: 5px;
     }
     
-.esxc-gauge-small .esxc-gauge-circle-caption {
+    .esxc-gauge-circle-caption {
         margin-top: 6px;
     }
 
-/*
+    /*Small size*/
- * Medium size gauge sizing
- */
 
-.esxc-gauge-medium .esxc-gauge-container {
+    .esxc-gauge-circle-caption .esxc-value {
-    width: 130px;
-    height: 65px;
-}
-
-.esxc-gauge-medium .esxc-gauge-circle-fill {
-    height: 130px;
-    border-radius: 130px;
-    clip: rect(65px, 130px, 130px, 0);
-}
-
-.esxc-gauge-medium .esxc-gauge-circle-bg {
-    height: 130px;
-    border-radius: 65px;
-}
-
-.esxc-gauge-medium .esxc-gauge-circle-inner {
-    height: 120px;
-    width: 120px;
-    border-radius: 60px;
-    margin: 5px;
-}
-
-/*
- * Large size gauge sizing
- */
-
-.esxc-gauge-large .esxc-gauge-container {
-    width: 260px;
-    height: 130px;
-}
-
-.esxc-gauge-large .esxc-gauge-circle-fill {
-    height: 260px;
-    border-radius: 130px;
-    clip: rect(130px, 260px, 260px, 0);
-}
-
-.esxc-gauge-large .esxc-gauge-circle-bg {
-    height: 260px;
-    border-radius: 130px;
-}
-
-.esxc-gauge-large .esxc-gauge-circle-inner {
-    width: 240px;
-    height: 240px;
-    border-radius: 120px;
-    margin: 10px;
-}
-
-.esxc-gauge-large .esxc-gauge-circle-caption {
-    margin-top: 95px;
-}
-
-/*Sall size*/
-
-.esxc-gauge-small .esxc-gauge-circle-caption .esxc-value {
         font-size: 16px;
         font-weight: 600;
     }
 
-.esxc-gauge-small .esxc-gauge-circle-caption .esxc-unit {
+    .esxc-gauge-circle-caption .esxc-unit {
         font-size: 10px;
     }
 
-.esxc-gauge-small .esxc-gauge-circle-caption .esxc-loading {
+    .esxc-gauge-circle-caption .esxc-loading {
         font-size: 10px;
     }
 
-.esxc-gauge-small .esxc-title {
+    .esxc-title {
         font-size: 10px;
         text-align: center;
         margin-top: 3px;
@@ -162,129 +105,192 @@
         bottom: 12px;
     }
 
-.esxc-gauge-small .esxc-title .esxc-bar-title {
+    .esxc-title .esxc-bar-title {
         float: left;
         text-align: right;
         width: 70px;
         margin-top: 0;
     }
 
-.esxc-gauge-small .esxc-limit {
+    .esxc-limit {
         text-align: center;
         position: relative;
         top: -8px;
         width: 70px;
     }
 
-.esxc-gauge-small .esxc-limit .esxc-value {
+    .esxc-limit .esxc-value {
         font-size: 8px;
     }
 
-.esxc-gauge-small .esxc-limit .esxc-unit {
+    .esxc-limit .esxc-unit {
         font-size: 8px;
     }
 
-.esxc-gauge-small .esxc-limit .esxc-label {
+    .esxc-limit .esxc-label {
         font-size: 8px;
     }
 
-.esxc-gauge-small .esxc-limit .esxc-bar-limit {
+    .esxc-limit .esxc-bar-limit {
         text-align: right;
     }
+}
+
+
+/*
+ * Medium size gauge sizing
+ */
+ .esxc-gauge-medium {
+    .esxc-gauge-container {
+        width: 130px;
+        height: 65px;
+    }
+    
+     .esxc-gauge-circle-fill {
+        height: 130px;
+        border-radius: 130px;
+        clip: rect(65px, 130px, 130px, 0);
+    }
+    
+     .esxc-gauge-circle-bg {
+        height: 130px;
+        border-radius: 65px;
+    }
+    
+    .esxc-gauge-circle-inner {
+        height: 120px;
+        width: 120px;
+        border-radius: 60px;
+        margin: 5px;
+    }
 
     /*medium size*/
 
-.esxc-gauge-medium .esxc-gauge-circle-caption {
+    .esxc-gauge-circle-caption {
         margin-top: 40px;
         color: #000;
     }
 
-.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-value {
+    .esxc-gauge-circle-caption .esxc-value {
         font-size: 22px;
     }
 
-.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-unit {
+    .esxc-gauge-circle-caption .esxc-unit {
         font-size: 14px;
     }
 
-.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-loading {
+    .esxc-gauge-circle-caption .esxc-loading {
         font-size: 25px;
     }
 
-.esxc-gauge-medium .esxc-limit {
+    .esxc-limit {
         text-align: center;
         color: #565656;
     }
 
-.esxc-gauge-medium .esxc-limit .esxc-value {
+    .esxc-limit .esxc-value {
         font-size: 12px;
     }
 
-.esxc-gauge-medium .esxc-limit .esxc-unit {
+    .esxc-limit .esxc-unit {
         font-size: 12px;
     }
 
-.esxc-gauge-medium .esxc-limit .esxc-label {
+    .esxc-limit .esxc-label {
         font-size: 12px;
     }
 
-.esxc-gauge-medium .esxc-title {
+    .esxc-title {
         font-size: 13px;
         font-weight: 600;
         color: #565656;
         text-align: center;
         margin-top: -8px;
     }
+ }
+
+
+/*
+ * Large size gauge sizing
+ */
+
+ .esxc-gauge-large {
+    .esxc-gauge-container {
+        width: 260px;
+        height: 130px;
+    }
+    
+    .esxc-gauge-circle-fill {
+        height: 260px;
+        border-radius: 130px;
+        clip: rect(130px, 260px, 260px, 0);
+    }
+    
+    .esxc-gauge-circle-bg {
+        height: 260px;
+        border-radius: 130px;
+    }
+    
+    .esxc-gauge-circle-inner {
+        width: 240px;
+        height: 240px;
+        border-radius: 120px;
+        margin: 10px;
+    }
+    
+     .esxc-gauge-circle-caption {
+        margin-top: 95px;
+    }
 
     /*large size*/
 
-.esxc-gauge-large .esxc-gauge-circle-caption .esxc-value {
+    .esxc-gauge-circle-caption .esxc-value {
         font-size: 40px;
     }
 
-.esxc-gauge-large .esxc-gauge-circle-caption .esxc-unit {
+    .esxc-gauge-circle-caption .esxc-unit {
         font-size: 18px;
     }
 
-.esxc-gauge-large .esxc-gauge-circle-caption .esxc-loading {
+    .esxc-gauge-circle-caption .esxc-loading {
         font-size: 30px;
     }
 
-.esxc-gauge-large .esxc-limit {
+    .esxc-limit {
         text-align: center;
         margin-top: 4px;
     }
 
-.esxc-gauge-large .esxc-limit .esxc-value {
+    .esxc-limit .esxc-value {
         font-size: 14px;
         color: #565656;
         line-height: 18px;
     }
 
-.esxc-gauge-large .esxc-limit .esxc-unit {
+    .esxc-limit .esxc-unit {
         font-size: 14px;
     }
 
-.esxc-gauge-large .esxc-limit .esxc-label {
+    .esxc-limit .esxc-label {
         font-size: 14px;
     }
 
-.esxc-gauge-large .esxc-limit .esxc-bar-limit {
+    .esxc-limit .esxc-bar-limit {
         text-align: right;
     }
 
-.esxc-gauge-large .esxc-title {
+    .esxc-title {
         font-size: 18px;
         font-weight: 600;
         color: #565656;
         line-height: 18px;
         text-align: center;
         margin-top: -2px;
-}
+        .esxc-bar-title {
-
-.esxc-gauge-large .esxc-title .esxc-bar-title {
             float: left;
             text-align: right;
             width: 70px;
             margin-top: 0;
         }
+    }
+ }

src/portal/src/app/shared/gauge/gauge.component.ts

@@ -19,8 +19,6 @@ import {
       ElementRef
 } from '@angular/core';
 
-import * as $ from 'jquery';
-
 const RESOURCE_COLOR_GREEN_NORMAL: string = '#5DB700';
 const RESOURCE_COLOR_ORANGE_NORMAL: string = '#FBBF00';
 const RESOURCE_COLOR_RED_NORMAL: string = '#EA400D';
@@ -43,6 +41,9 @@ export class GaugeComponent implements AfterViewInit {
       _title: string = "UNKNOWN"; // Lang key
       _free: number = 0;
       _threasHold: number = 0;
+      posOne = 0;
+      posTwo = 0;
+      transition = '';
 
       /**
        * Background color of the component. Default is white.
@@ -195,7 +196,6 @@ export class GaugeComponent implements AfterViewInit {
 
             this._positionOne = percent;
             this.setBars();
-            this.setColors();
             this.setAnimate();
       }
 
@@ -204,58 +204,12 @@ export class GaugeComponent implements AfterViewInit {
                   return;
             }
 
-            let barOne = $(this.barOne.nativeElement);
-            let barTwo = $(this.barTwo.nativeElement);
-
-            if (!barOne || !barTwo) {
-                  return;
-            }
-
-            let posOne, posTwo;
-
             if (isNaN(this.positionOne)) {
-                  posOne = posTwo = 0;
+                  this.posOne = this.posTwo = 0;
             } else {
-                  posOne = (this.positionOne / 100) * 180;
+                  this.posOne = (this.positionOne / 100) * 180;
-                  posTwo = (this.positionTwo / 100) * 180;
+                  this.posTwo = (this.positionTwo / 100) * 180;
             }
-
-            barOne.css({
-                  '-webkit-transform': 'rotate(' + posOne + 'deg)',
-                  '-moz-transform': 'rotate(' + posOne + 'deg)',
-                  '-ms-transform': 'rotate(' + posOne + 'deg)',
-                  '-o-transform': 'rotate(' + posOne + 'deg)',
-                  'transform': 'rotate(' + posOne + 'deg)'
-            });
-
-            barTwo.css({
-                  '-webkit-transform': 'rotate(' + posTwo + 'deg)',
-                  '-moz-transform': 'rotate(' + posTwo + 'deg)',
-                  '-ms-transform': 'rotate(' + posTwo + 'deg)',
-                  '-o-transform': 'rotate(' + posTwo + 'deg)',
-                  'transform': 'rotate(' + posTwo + 'deg)'
-            });
-      }
-
-      setColors() {
-            if (!this.barOne || !this.barTwo) {
-                  return;
-            }
-
-            let barOne = $(this.barOne.nativeElement);
-            let barTwo = $(this.barTwo.nativeElement);
-
-            if (!barOne || !barTwo) {
-                  return;
-            }
-
-            barOne.css({
-                  'background-color': this._colorOne
-            });
-
-            barTwo.css({
-                  'background-color': this._colorTwo
-            });
       }
 
       setAnimate() {
@@ -263,29 +217,11 @@ export class GaugeComponent implements AfterViewInit {
                   return;
             }
 
-            let barOne = $(this.barOne.nativeElement);
-            let barTwo = $(this.barTwo.nativeElement);
-
-            if (!barOne || !barTwo) {
-                  return;
-            }
-
-            let transition = 'transform 1s ease';
-            let prefixes = ['webkit', 'moz', 'ms', 'o'];
-            let css = {
-                  'transition': transition
-            };
-
             if (!this._animate) {
-                  transition = 'none';
+              this.transition = 'none';
+            } else {
+              this.transition = 'transform 1s ease';
             }
-
-            for (let prefix of prefixes) {
-                  css['-' + prefix + '-transition'] = transition;
-            }
-
-            barOne.css(css);
-            barTwo.css(css);
       }
 
 }