Fix css bugs with label target 2.1.0

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/project/robot-account/robot.ts

@@ -16,11 +16,10 @@ export class Robot {
 
   constructor () {
     this.access = <any>{};
-    // this.access[0].action = true;
     this.access.isPullImage = false;
     this.access.isPushOrPullImage = true;
-    this.access.isPushChart = false;
+    this.access.isPushChart = true;
-    this.access.isPullChart = false;
+    this.access.isPullChart = true;
   }
 }
 

src/portal/src/i18n/lang/en-us-lang.json

@@ -1164,7 +1164,7 @@
         "DAY_AGO": " day(s) ago",
         "HOUR_AGO": " hour(s) ago",
         "MINUTE_AGO": " minute(s) ago",
-        "SECOND_AGO": "less 1 minute",
+        "SECOND_AGO": "less than 1 minute",
         "EVENT_LOG": "EVENT LOG"
     },
     "UNKNOWN_ERROR": "Unknown errors have occurred. Please try again later.",

src/portal/src/i18n/lang/es-es-lang.json

@@ -1158,7 +1158,7 @@
         "DAY_AGO": " day(s) ago",
         "HOUR_AGO": " hour(s) ago",
         "MINUTE_AGO": " minute(s) ago",
-        "SECOND_AGO": "less 1 minute",
+        "SECOND_AGO": "less than 1 minute",
         "EVENT_LOG": "EVENT LOG"
     },
     "UNKNOWN_ERROR": "Ha ocurrido un error desconocido. Por favor, inténtelo de nuevo más tarde.",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -1129,7 +1129,7 @@
         "DAY_AGO": " day(s) ago",
         "HOUR_AGO": " hour(s) ago",
         "MINUTE_AGO": " minute(s) ago",
-        "SECOND_AGO": "less 1 minute",
+        "SECOND_AGO": "less than 1 minute",
         "EVENT_LOG": "EVENT LOG"
     },
     "UNKNOWN_ERROR": "Des erreurs inconnues sont survenues. Veuillez réessayer plus tard.",

src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.html

@@ -35,8 +35,12 @@
         </div>
         <div class="state-container" [style.width]="totalWidth+'px'">
             <div class="clr-row m-0" *ngFor="let item of scanningMetrics?.metrics | keyvalue">
-                <div class="state">{{getI18nKey(item?.key)|translate}}</div>
+                <div class="state">
-                <div class="value">{{item?.value}}</div>
+                    <span class="badge" [ngClass]="{ error: isError(item?.key),
+                                                    finished: isFinished(item?.key),
+                                                   'in-progress': isInProgress(item?.key)}">{{item?.value}}</span>
+                </div>
+                <div class="value">{{getI18nKey(item?.key)|translate}}</div>
             </div>
         </div>
     </div>

src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss

@@ -80,18 +80,9 @@
     height: 18px;
     display: flex;
     background-color:#eee;
-    .error {
-        background-color: #e62700;
-    }
-    .finished {
-        background-color: #62a420;
-    }
-    .in-progress {
-        background-color: #0079b8;
-    }
 }
 .state {
-    flex: 2;
+    flex: 1;
     padding-left: 3px;
 }
 .value {
@@ -103,3 +94,15 @@
 .display-flex {
     display: flex;
 }
+.error {
+    background-color: #e62700;
+}
+.finished {
+    background-color: #62a420;
+}
+.in-progress {
+    background-color: #0079b8;
+}
+.badge {
+    min-width: 30px;
+}

src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.ts

@@ -332,4 +332,13 @@ export class VulnerabilityConfigComponent implements OnInit, OnDestroy {
           );
         }
     }
+  isError(status: string): boolean {
+      return status === VULNERABILITY_SCAN_STATUS.ERROR;
+  }
+  isFinished(status: string): boolean {
+    return status === VULNERABILITY_SCAN_STATUS.SUCCESS;
+  }
+  isInProgress(status: string): boolean {
+    return status === VULNERABILITY_SCAN_STATUS.RUNNING;
+  }
 }

src/portal/src/lib/components/operation/operate.ts

@@ -9,7 +9,7 @@ export class OperateInfo {
         this.state = '';
         this.data = {id: -1, name: '', errorInf: ''};
         this.timeStamp = new Date().getTime();
-        this.timeDiff = 'less 1 minute';
+        this.timeDiff = 'OPERATION.SECOND_AGO';
     }
 }
 

src/portal/src/lib/components/operation/operation.component.css

@@ -13,7 +13,7 @@
 .infoArea{ margin-left: 10px; width: 270px;}
 .eventName{display: block; margin-bottom: -5px;font-size: 16px; }
 .eventErrorInf {display:block; font-size: 12px;color:red;line-height: .6rem;}
-.eventTarget{display: inline-flex; width: 172px; font-size: 12px; flex-shrink:1; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
+.eventTarget{display: inline-flex; width: 160px; font-size: 12px; flex-shrink:1; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
 .eventTime{ float: right; font-size: 12px;}
 :host >>> .nav{padding-left: 38px;}
 

src/portal/src/lib/components/operation/operation.component.ts

@@ -130,6 +130,8 @@ export class OperationComponent implements OnInit, OnDestroy {
     this.animationState = this.animationState === 'out' ? 'in' : 'out';
     if (this.animationState === 'in') {
       this.resetNewMessageCount();
+      // refresh when open
+      this.TabEvent();
     }
   }
 

src/portal/src/lib/components/operation/operation.service.spec.ts

@@ -18,6 +18,6 @@ describe('OperationService', () => {
             operateInfo = res;
         });
         operationService.publishInfo(new OperateInfo());
-        expect(operateInfo.timeDiff).toEqual("less 1 minute");
+        expect(operateInfo.timeDiff).toEqual("OPERATION.SECOND_AGO");
     });
 });