Merge pull request #2925 from pengpengshui/master

fix bugs

src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.template.ts

@@ -6,9 +6,7 @@ export const JOB_LOG_VIEWER_TEMPLATE: string = `
         <span class="spinner spinner-md"></span>
       </div>
       <pre [hidden]="onGoing">
-        <code>
+<code>{{log}}</code>
-          {{log}}
-        </code>
       </pre>
     </div>
     <div class="modal-footer">

src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.ts

@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
 
 import { JOB_LOG_VIEWER_TEMPLATE, JOB_LOG_VIEWER_STYLES } from './job-log-viewer.component.template';
 import { JobLogService } from '../service/index';
@@ -23,7 +23,8 @@ const supportSet: string[] = ["replication", "scan"];
 @Component({
     selector: 'job-log-viewer',
     template: JOB_LOG_VIEWER_TEMPLATE,
-    styles: [JOB_LOG_VIEWER_STYLES]
+    styles: [JOB_LOG_VIEWER_STYLES],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 
 export class JobLogViewerComponent {
@@ -53,7 +54,8 @@ export class JobLogViewerComponent {
 
     constructor(
         private jobLogService: JobLogService,
-        private errorHandler: ErrorHandler
+        private errorHandler: ErrorHandler,
+        private ref: ChangeDetectorRef
     ) { }
 
     open(jobId: number | string): void {
@@ -78,5 +80,8 @@ export class JobLogViewerComponent {
                 this.onGoing = false;
                 this.errorHandler.error(error);
             });
+
+        let hnd = setInterval(()=>this.ref.markForCheck(), 100);
+        setTimeout(()=>clearInterval(hnd), 2000);
     }
 }

src/ui_ng/lib/src/tag/tag-detail.component.css.ts

@@ -106,4 +106,10 @@ export const TAG_DETAIL_STYLES: string = `
     margin-left: 6px;
     font-weight: 500;
 }
+.tip-icon-medium {
+    color: orange;
+}
+.tip-icon-low{
+    color:yellow;
+}
 `;

src/ui_ng/lib/src/tag/tag-detail.component.html.ts

@@ -44,7 +44,7 @@ export const TAG_DETAIL_HTML: string = `
                             <clr-icon shape="error" size="24" class="is-error"></clr-icon>
                         </div>
                         <div class="second-row">
-                            <clr-icon shape="exclamation-triangle" size="24" class="is-warning"></clr-icon>
+                            <clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>
                         </div>
                     </div>
                     <div class="second-column">
@@ -53,10 +53,10 @@ export const TAG_DETAIL_HTML: string = `
                     </div>
                     <div class="third-column">
                         <div>
-                            <clr-icon shape="play" size="20" class="is-warning rotate-90"></clr-icon>
+                            <clr-icon shape="play" size="20" class="tip-icon-low rotate-90"></clr-icon>
                         </div>
                         <div class="second-row">
-                            <clr-icon shape="help" size="20"></clr-icon>
+                            <clr-icon shape="help" size="18" style="margin-left: 2px;"></clr-icon>
                         </div>
                     </div>
                     <div class="fourth-column">

src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts

@@ -43,13 +43,13 @@ export const SCANNING_STYLES: string = `
     margin-left: -4px;
 }
 .bar-block-high {
-    background-color: red;
+    background-color: #e62700;
 }
 .bar-block-medium {
-    background-color: yellow;
+    background-color: orange;
 }
 .bar-block-low {
-    background-color: orange;
+    background-color: yellow;
 }
 .bar-block-none {
     background-color: green;
@@ -84,7 +84,24 @@ export const SCANNING_STYLES: string = `
 .refresh-btn:hover {
     color: #007CBB;
 }
-.tip-icon-low {
+
+.label.label-medium{
+      background-color: #ffe4a9;
+    border: 1px solid orange;
     color: orange;
 }
+.tip-icon-medium {
+    color: orange;
+}
+.label.label-low{
+    background: rgba(251, 255, 0, 0.38);
+    color: #c5c50b;
+    border: 1px solid #e6e63f;
+}
+.tip-icon-low {
+    color: yellow;
+}
+.font-color-green{
+    color:green;
+}
 `; 

src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts

@@ -16,15 +16,15 @@ export const TIP_COMPONENT_HTML: string = `
                     <span>{{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}</span>
                 </div>
                 <div *ngIf="hasMedium" class="bar-summary-item">
-                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="is-warning" size="22"></clr-icon>
+                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="tip-icon-medium" size="22"></clr-icon>
                     <span>{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}</span>
                 </div>
                 <div *ngIf="hasLow" class="bar-summary-item">
-                    <clr-icon shape="info-circle" class="tip-icon-low" size="24"></clr-icon>
+                    <clr-icon shape="play" class="tip-icon-low rotate-90" size="20"></clr-icon>
                     <span>{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }}</span>
                 </div>
                 <div *ngIf="hasUnknown" class="bar-summary-item">
-                    <clr-icon shape="help" size="20"></clr-icon>
+                    <clr-icon shape="help" size="18" style="margin-left: 3px;"></clr-icon>
                     <span>{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}</span>
                 </div>
                 <div *ngIf="hasNone" class="bar-summary-item">
@@ -64,14 +64,19 @@ export const GRID_COMPONENT_HTML: string = `
             <clr-dg-cell>{{res.id}}</clr-dg-cell>
             <clr-dg-cell [ngSwitch]="res.severity">
               <span *ngSwitchCase="5" class="label label-danger">{{severityText(res.severity) | translate}}</span>
-              <span *ngSwitchCase="4" class="label label-warning">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="4" class="label label-medium">{{severityText(res.severity) | translate}}</span>
-              <span *ngSwitchCase="3" class="label label-success">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="3" class="label label-low">{{severityText(res.severity) | translate}}</span>
-              <span *ngSwitchCase="1" class="label label-info">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="1" class="label">{{severityText(res.severity) | translate}}</span>
               <span *ngSwitchDefault>{{severityText(res.severity) | translate}}</span>
             </clr-dg-cell>
             <clr-dg-cell>{{res.package}}</clr-dg-cell>
             <clr-dg-cell>{{res.version}}</clr-dg-cell>
-            <clr-dg-cell>{{res.fixedVersion}}</clr-dg-cell>
+            <clr-dg-cell>
+                 <div *ngIf="res.fixedVersion; else elseBlock">
+                    <clr-icon shape="wrench" class="is-success" size="20"></clr-icon>&nbsp;<span class="font-color-green">{{res.fixedVersion}}</span>
+                 </div>
+                <ng-template #elseBlock>{{res.fixedVersion}}</ng-template>
+            </clr-dg-cell>
             <clr-dg-row-detail *clrIfExpanded>
             {{'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate}}: {{res.description}}
             </clr-dg-row-detail>

src/ui_ng/src/app/shared/gauge/gauge.component.css

@@ -167,7 +167,7 @@
     text-align: center;
     margin-top: 3px;
     position: relative;
-    bottom: -2px;
+    bottom: 12px;
 }
 
 .esxc-gauge-small .esxc-title .esxc-bar-title {

src/ui_ng/src/app/shared/statictics/statistics.component.css

@@ -44,8 +44,8 @@
 .statistic-item-divider {
     height: 54px;
     display: inline-block;
-    width: 1px;
+    width: 2px;
-    background-color: #ccc;
+    background-color: #bdbdbd;
     opacity: 0.55;
     margin-left: 4px;
     margin-right: 12px;

src/ui_ng/src/styles.css

@@ -39,4 +39,11 @@
 }
  .modal-header{
      padding: 0;
- }
+ }
+.rotate-90 {
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}