Refactor and improve the format of vulnerability scan report

Signed-off-by: Cheng <fangyuanc@vmware.com>
2024-11-26 12:15:20 +01:00 · 2018-09-28 14:28:28 +08:00 · 2018-09-28 14:28:28 +08:00 · 033523d223
commit 033523d223
parent 8e438d81d1
10 changed files with 90 additions and 37 deletions
--- a/src/portal/lib/src/_mixin.scss
+++ b/src/portal/lib/src/_mixin.scss
@ -28,4 +28,10 @@
    margin: auto;
    width: $width !important;
    height: $width !important;
+}
+
+@mixin flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
--- a/src/portal/lib/src/tag/tag-detail.component.html
+++ b/src/portal/lib/src/tag/tag-detail.component.html
@ -41,18 +41,18 @@
                </div>
                <div class="flex-block vulnerabilities-info">
                    <div class="second-column">
-                        <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 class="row-flex">
+                            <div class="icon-position"><clr-icon shape="error" size="24" class="is-error"></clr-icon></div> 
+                            <span class="detail-count">{{highCount}}</span> {{packageText(highCount) | translate}} {{haveText(highCount) | translate}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{suffixForHigh | translate }}</div>
+                        <div class="second-row row-flex">
+                            <div class="icon-position"><clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon></div>
+                            <span class="detail-count">{{mediumCount}}</span> {{packageText(mediumCount) | translate}} {{haveText(mediumCount) | translate}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{suffixForMedium | translate }}</div>
+                        <div class="second-row row-flex">
+                            <div class="icon-position"><clr-icon shape="play" size="22" class="tip-icon-low rotate-90"></clr-icon></div>
+                            <span class="detail-count">{{lowCount}}</span> {{packageText(lowCount) | translate}} {{haveText(lowCount) | translate}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{suffixForLow | translate }}</div>
+                        <div class="second-row row-flex">
+                            <div class="icon-position"><clr-icon shape="help" size="20"></clr-icon></div>
+                            <span class="detail-count">{{unknownCount}}</span> {{packageText(unknownCount) | translate}} {{haveText(unknownCount) | translate}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{suffixForUnknown | translate }}</div>
                    </div>
                </div>

--- a/src/portal/lib/src/tag/tag-detail.component.scss
+++ b/src/portal/lib/src/tag/tag-detail.component.scss
@ -1,4 +1,6 @@
@import "../mixin";
+$size24:24px;
+
 .overview-section {
    padding-bottom: 36px;
 }
@ -6,7 +8,7 @@
 .detail-section {
    background-color: #fafafa;
    padding-left: 12px;
-    padding-right: 24px;
+    padding-right: $size24;
 }

 .title-block {
@ -58,7 +60,7 @@
 }

 .summary-block {
-    margin-top: 24px;
+    margin-top: $size24;
    display: flex;
    flex-wrap: row wrap;
 }
@ -69,29 +71,45 @@
    justify-content: space-around;
 }

-.vulnerabilities-info {
-    padding-left: 24px;
-}
-
 .third-column {
    margin-left: 36px;
 }
 .vulnerability{
-margin-left: 50px;
+    margin-left: 50px;
    margin-top: -12px;
    margin-bottom: 20px;}

-.vulnerabilities-info .second-column {
-    text-align: left;
-    margin-left: 6px;
+.vulnerabilities-info {
+    padding-left: $size24;
+    .second-column{
+        text-align: left;
+        margin-left: 6px;
+        .second-row {
+            margin-top: 6px;
+        }
+        .row-flex {
+            display: flex;
+            align-items: center;
+            .icon-position {
+                width: $size24;
+                height: $size24;
+                @include flex-center;
+            }
+            .detail-count {
+                height: 20px;
+                width: 30px;
+                @include flex-center;
+            }
+        }
+    }   
 }

 .fourth-column{
-float: left;
-margin-left:20px;}
-
-.vulnerabilities-info .second-row {
-    margin-top: 6px;
+    float: left;
+    margin-left:20px;
+    div {
+        height: $size24;
+    }
 }

 .detail-title {
@ -119,6 +137,9 @@ margin-left:20px;}
    text-align: left;
    margin-left: 6px;
    font-weight: 500;
+    div {
+        height: $size24;
+    }
 }
 .tip-icon-medium {
    color: orange;
@ -126,8 +147,6 @@ margin-left:20px;}
 .tip-icon-low{
    color:yellow;
 }
-.fourth-column div, .image-detail-value div{
-height: 24px;
-}
-.second-column div {padding-left: 30px;}
-.second-column div clr-icon{margin-right: 10px;  margin-left: -35px;}
+
+
+
--- a/src/portal/lib/src/tag/tag-detail.component.ts
+++ b/src/portal/lib/src/tag/tag-detail.component.ts
@ -82,6 +82,14 @@ export class TagDetailComponent implements OnInit {
        return count > 1 ? "VULNERABILITY.PACKAGES" : "VULNERABILITY.PACKAGE";
    }

+    packageText(count: number): string {
+        return count > 1 ? "VULNERABILITY.GRID.COLUMN_PACKAGES" : "VULNERABILITY.GRID.COLUMN_PACKAGE";
+    }
+
+    haveText(count: number): string {
+        return count > 1 ? "TAG.HAVE" : "TAG.HAS";
+    }
+
    public get author(): string {
        return this.tagDetails && this.tagDetails.author ? this.tagDetails.author : 'TAG.ANONYMITY';
    }
--- a/src/portal/lib/src/vulnerability-scanning/result-tip.component.ts
+++ b/src/portal/lib/src/vulnerability-scanning/result-tip.component.ts
@ -160,6 +160,14 @@ export class ResultTipComponent implements OnInit {
        return count > 1 ? "VULNERABILITY.PACKAGES" : "VULNERABILITY.PACKAGE";
    }

+    getPackageText(count: number): string {
+        return count > 1 ? "VULNERABILITY.GRID.COLUMN_PACKAGES" : "VULNERABILITY.GRID.COLUMN_PACKAGE";
+    }
+
+    haveText(count: number): string {
+        return count > 1 ? "TAG.HAVE" : "TAG.HAS";
+    }
+
    public get completeTimestamp(): Date {
        return this.summary && this.summary.update_time ? this.summary.update_time : new Date();
    }
--- a/src/portal/lib/src/vulnerability-scanning/result-tip.componnent.html
+++ b/src/portal/lib/src/vulnerability-scanning/result-tip.componnent.html
@ -7,7 +7,7 @@
        <div class="tip-wrapper tip-block bar-block-unknown" [style.width]='tipWidth(2)'></div>
        <div class="tip-wrapper tip-block bar-block-none" [style.width]='tipWidth(1)'></div>
        </div>
-        <clr-tooltip-content [clrPosition]="'top-right'" [clrSize]="'lg'" *clrIfOpen>
+        <clr-tooltip-content [clrPosition]="'right'" [clrSize]="'lg'" *clrIfOpen>
            <div [ngSwitch]="scanLevel" class="bar-tooltip-font-larger">
                <ng-template [ngSwitchCase]="5">
                    <clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon>
@ -37,19 +37,19 @@
            <div class="bar-summary bar-tooltip-fon">
                <div *ngIf="hasHigh" class="bar-summary-item">
                    <span><clr-icon shape="exclamation-circle" class="is-error" size="24"></clr-icon></span>
-                    <span>{{highCount}}</span><span>{{'VULNERABILITY.SEVERITY.HIGH' | translate }}</span>
+                    <span>{{highCount}}</span><span>{{getPackageText(highCount) | translate}} {{haveText(highCount) | translate}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{unitText(highCount) | translate }}</span>
                </div>
                <div *ngIf="hasMedium" class="bar-summary-item">
                    <span><clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="tip-icon-medium" size="22"></clr-icon></span>
-                    <span>{{mediumCount}}</span><span>{{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}</span>
+                    <span>{{mediumCount}}</span><span>{{getPackageText(mediumCount) | translate}} {{haveText(mediumCount) | translate}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{unitText(mediumCount) | translate }}</span>
                </div>
                <div *ngIf="hasLow" class="bar-summary-item">
                    <span><clr-icon shape="play" class="tip-icon-low rotate-90" size="20"></clr-icon></span>
-                    <span>{{lowCount}}</span><span>{{'VULNERABILITY.SEVERITY.LOW' | translate }}</span>
+                    <span>{{lowCount}}</span><span>{{getPackageText(lowCount) | translate}} {{haveText(lowCount) | translate}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{unitText(lowCount) | translate }}</span>
                </div>
                <div *ngIf="hasUnknown" class="bar-summary-item">
                    <span><clr-icon shape="help" size="18"></clr-icon></span>
-                    <span>{{unknownCount}}</span><span>{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}</span>
+                    <span>{{unknownCount}}</span><span>{{getPackageText(unknownCount) | translate}} {{haveText(unknownCount) | translate}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{unitText(unknownCount) | translate }}</span>
                </div>
                <div *ngIf="hasNone" class="bar-summary-item">
                    <span><clr-icon shape="check-circle" class="is-success" size="24"></clr-icon></span>
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@ -695,6 +695,7 @@
            "COLUMN_ID": "Vulnerability",
            "COLUMN_SEVERITY": "Severity",
            "COLUMN_PACKAGE": "Package",
+            "COLUMN_PACKAGES": "Packages",
            "COLUMN_VERSION": "Current version",
            "COLUMN_FIXED": "Fixed in version",
            "COLUMN_DESCRIPTION": "Description",
@ -740,6 +741,8 @@
        "DOCKER_VERSION": "Docker Version",
        "ARCHITECTURE": "Architecture",
        "OS": "OS",
+        "HAVE": "have",
+        "HAS": "has",
        "SCAN_COMPLETION_TIME": "Scan Completed",
        "IMAGE_VULNERABILITIES": "Image Vulnerabilities",
        "LEVEL_VULNERABILITIES": "Level Vulnerabilities",
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@ -694,6 +694,7 @@
            "COLUMN_ID": "Vulnerability",
            "COLUMN_SEVERITY": "Severity",
            "COLUMN_PACKAGE": "Package",
+            "COLUMN_PACKAGES": "Packages",
            "COLUMN_VERSION": "Current version",
            "COLUMN_FIXED": "Fixed in version",
            "COLUMN_DESCRIPTION": "Description",
@ -739,6 +740,8 @@
        "DOCKER_VERSION": "Docker Version",
        "ARCHITECTURE": "Architecture",
        "OS": "OS",
+        "HAVE": "have",
+        "HAS": "has",
        "SCAN_COMPLETION_TIME": "Scan Completed",
        "IMAGE_VULNERABILITIES": "Image Vulnerabilities",
        "LEVEL_VULNERABILITIES": "Level Vulnerabilities",
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@ -658,6 +658,7 @@
            "COLUMN_ID": "Vulnérabilitée",
            "COLUMN_SEVERITY": "Severitée",
            "COLUMN_PACKAGE": "Paquet",
+            "COLUMN_PACKAGES": "Paquets",
            "COLUMN_VERSION": "Version Actuelle",
            "COLUMN_FIXED": "Fixé dans le version",
            "COLUMN_DESCRIPTION": "Description",
@ -703,6 +704,8 @@
        "DOCKER_VERSION": "Version de Docker",
        "ARCHITECTURE": "Architecture",
        "OS": "OS",
+        "HAVE": "have",
+        "HAS": "has",
        "SCAN_COMPLETION_TIME": "Analyse Terminée",
        "IMAGE_VULNERABILITIES": "Vulnérabilitées de l'Image",
        "PLACEHOLDER": "Nous ne trouvons aucun tag !",
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@ -693,6 +693,7 @@
            "COLUMN_ID": "缺陷码",
            "COLUMN_SEVERITY": "严重度",
            "COLUMN_PACKAGE": "组件",
+            "COLUMN_PACKAGES": "组件",
            "COLUMN_VERSION": "当前版本",
            "COLUMN_FIXED": "修复版本",
            "COLUMN_DESCRIPTION": "简介",
@ -738,6 +739,8 @@
        "DOCKER_VERSION": "Docker版本",
        "ARCHITECTURE": "架构",
        "OS": "操作系统",
+        "HAVE": "存在",
+        "HAS": "存在",
        "SCAN_COMPLETION_TIME": "扫描完成时间",
        "IMAGE_VULNERABILITIES": "镜像缺陷",
        "LEVEL_VULNERABILITIES": "缺陷等级",