From 76cbe3b5d229601c5796d57ff69a6880d12c2c2c Mon Sep 17 00:00:00 2001
From: pfh <pengf@vmware.com>
Date: Thu, 31 May 2018 14:30:57 +0800
Subject: [PATCH] Modify tag detail alert when without clarity

---
 .../lib/src/tag/tag-detail.component.html     | 26 +++++--------------
 .../lib/src/tag/tag-detail.component.scss     | 11 +++-----
 src/ui_ng/lib/src/tag/tag.component.html      |  3 ++-
 src/ui_ng/package.json                        |  2 +-
 4 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.html b/src/ui_ng/lib/src/tag/tag-detail.component.html
index 1ae3782c3..2ce7f05c1 100644
--- a/src/ui_ng/lib/src/tag/tag-detail.component.html
+++ b/src/ui_ng/lib/src/tag/tag-detail.component.html
@@ -9,7 +9,7 @@
             </div>
         </div>
         <div class="summary-block row">
-            <div class="image-summary col-md-4 col-lg-3">
+            <div class="image-summary col-md-4 col-sm-6">
                 <div class="flex-block">
                     <div class="image-detail-label">
                         <div>{{'TAG.AUTHOR' | translate }}</div>
@@ -27,30 +27,16 @@
                     </div>
                 </div>
             </div>
-            <div *ngIf="withClair" class="col-md-4 col-lg-3">
+            <div *ngIf="withClair" class="col-md-4 col-sm-6">
                 <div class="vulnerability">
                     <hbr-vulnerability-bar [repoName]="repositoryId" [tagId]="tagDetails.name" [summary]="tagDetails.scan_overview"></hbr-vulnerability-bar>
                 </div>
                 <div class="flex-block vulnerabilities-info">
-                    <div>
-                        <div>
-                            <clr-icon shape="error" size="24" class="is-error"></clr-icon>
-                        </div>
-                        <div class="second-row">
-                            <clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>
-                        </div>
-                        <div>
-                            <clr-icon shape="play" size="20" class="tip-icon-low rotate-90"></clr-icon>
-                        </div>
-                        <div class="second-row">
-                            <clr-icon shape="help" size="18" style="margin-left: 2px;"></clr-icon>
-                        </div>
-                    </div>
                     <div class="second-column">
-                        <div>{{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
-                        <div class="second-row">{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
-                        <div>{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }}{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
-                        <div class="second-row">{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
+                        <div><clr-icon shape="error" size="24" class="is-error"></clr-icon> {{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
+                        <div class="second-row"><clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
+                        <div><clr-icon shape="play" size="20" class="tip-icon-low rotate-90"></clr-icon>{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
+                        <div class="second-row"><clr-icon shape="help" size="18"></clr-icon>{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
                     </div>
                 </div>
 
diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.scss b/src/ui_ng/lib/src/tag/tag-detail.component.scss
index 1d6e71751..b1894a310 100644
--- a/src/ui_ng/lib/src/tag/tag-detail.component.scss
+++ b/src/ui_ng/lib/src/tag/tag-detail.component.scss
@@ -62,11 +62,6 @@
     flex-wrap: row wrap;
 }
 
-.image-summary {
-    margin-right: 36px;
-    margin-left: 18px;
-}
-
 .flex-block {
     display: inline-flex;
     flex-wrap: row wrap;
@@ -121,6 +116,8 @@ margin-left:20px;}
 .tip-icon-low{
     color:yellow;
 }
-.second-column div, .fourth-column div, .image-detail-value div{
+.fourth-column div, .image-detail-value div{
 height: 24px;
-}
\ No newline at end of file
+}
+.second-column div {padding-left: 30px;}
+.second-column div clr-icon{margin-right: 10px;  margin-left: -35px;}
diff --git a/src/ui_ng/lib/src/tag/tag.component.html b/src/ui_ng/lib/src/tag/tag.component.html
index d588ee365..e54e00cde 100644
--- a/src/ui_ng/lib/src/tag/tag.component.html
+++ b/src/ui_ng/lib/src/tag/tag.component.html
@@ -72,7 +72,8 @@
         <clr-dg-placeholder>{{'TAG.PLACEHOLDER' | translate }}</clr-dg-placeholder>
         <clr-dg-row *clrDgItems="let t of tags" [clrDgItem]='t'>
           <clr-dg-cell  class="truncated"  style="width: 120px;">
-            <a href="javascript:void(0)" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a>
+            <a *ngIf="withClair" href="javascript:void(0)" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a>
+            <span *ngIf="!withClair">{{t.name}}</span>
           </clr-dg-cell>
           <clr-dg-cell style="width: 90px;">{{sizeTransform(t.size)}}</clr-dg-cell>
           <clr-dg-cell style="min-width: 100px; max-width:220px;" class="truncated" title="docker pull {{registryUrl}}/{{repoName}}:{{t.name}}">
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 1d9bd43bf..373e286a6 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -49,7 +49,7 @@
         "bootstrap": "4.0.0-alpha.5",
         "codelyzer": "~2.0.0-beta.4",
         "enhanced-resolve": "^3.0.0",
-        "harbor-ui": "0.7.19-test-5",
+        "harbor-ui": "0.7.19-test-7",
         "jasmine-core": "2.4.1",
         "jasmine-spec-reporter": "2.5.0",
         "karma": "~1.7.0",