Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-02 07:03:35 +01:00
Code Issues Projects Releases Wiki Activity

Refactor and improve the format of vulnerability scan report

Browse Source 
Signed-off-by: Cheng <fangyuanc@vmware.com>
This commit is contained in:
Cheng 2018-09-28 14:28:28 +08:00
parent 8e438d81d1
commit 033523d223
10 changed files with 90 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/portal/lib/src/_mixin.scss
View File

@ -29,3 +29,9 @@
width: $width !important; width: $width !important;
height: $width !important; height: $width !important;
} }
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}

24
src/portal/lib/src/tag/tag-detail.component.html
View File

@ -41,18 +41,18 @@
</div> </div>
<div class="flex-block vulnerabilities-info"> <div class="flex-block vulnerabilities-info">
<div class="second-column"> <div class="second-column">
<div> <div class="row-flex">
<clr-icon shape="error" size="24" class="is-error"></clr-icon> {{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' <div class="icon-position"><clr-icon shape="error" size="24" class="is-error"></clr-icon></div>
| translate }}</div> <span class="detail-count">{{highCount}}</span> {{packageText(highCount) | translate}} {{haveText(highCount) | translate}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{suffixForHigh | translate }}</div>
<div class="second-row"> <div class="second-row row-flex">
<clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' <div class="icon-position"><clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon></div>
| translate }}</div> <span class="detail-count">{{mediumCount}}</span> {{packageText(mediumCount) | translate}} {{haveText(mediumCount) | translate}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{suffixForMedium | translate }}</div>
<div> <div class="second-row row-flex">
<clr-icon shape="play" size="20" class="tip-icon-low rotate-90"></clr-icon>{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' <div class="icon-position"><clr-icon shape="play" size="22" class="tip-icon-low rotate-90"></clr-icon></div>
| translate }}</div> <span class="detail-count">{{lowCount}}</span> {{packageText(lowCount) | translate}} {{haveText(lowCount) | translate}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{suffixForLow | translate }}</div>
<div class="second-row"> <div class="second-row row-flex">
<clr-icon shape="help" size="18"></clr-icon>{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' <div class="icon-position"><clr-icon shape="help" size="20"></clr-icon></div>
| translate }}</div> <span class="detail-count">{{unknownCount}}</span> {{packageText(unknownCount) | translate}} {{haveText(unknownCount) | translate}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{suffixForUnknown | translate }}</div>
</div> </div>
</div> </div>

55
src/portal/lib/src/tag/tag-detail.component.scss
View File

@ -1,4 +1,6 @@
@import "../mixin"; @import "../mixin";
$size24:24px;
.overview-section { .overview-section {
padding-bottom: 36px; padding-bottom: 36px;
} }
@ -6,7 +8,7 @@
.detail-section { .detail-section {
background-color: #fafafa; background-color: #fafafa;
padding-left: 12px; padding-left: 12px;
padding-right: 24px; padding-right: $size24;
} }
.title-block { .title-block {
@ -58,7 +60,7 @@
} }
.summary-block { .summary-block {
margin-top: 24px; margin-top: $size24;
display: flex; display: flex;
flex-wrap: row wrap; flex-wrap: row wrap;
} }
@ -69,29 +71,45 @@
justify-content: space-around; justify-content: space-around;
} }
.vulnerabilities-info {
padding-left: 24px;
}
.third-column { .third-column {
margin-left: 36px; margin-left: 36px;
} }
.vulnerability{ .vulnerability{
margin-left: 50px; margin-left: 50px;
margin-top: -12px; margin-top: -12px;
margin-bottom: 20px;} margin-bottom: 20px;}
.vulnerabilities-info .second-column { .vulnerabilities-info {
padding-left: $size24;
.second-column{
text-align: left; text-align: left;
margin-left: 6px; 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{ .fourth-column{
float: left; float: left;
margin-left:20px;} margin-left:20px;
div {
.vulnerabilities-info .second-row { height: $size24;
margin-top: 6px; }
} }
.detail-title { .detail-title {
@ -119,6 +137,9 @@ margin-left:20px;}
text-align: left; text-align: left;
margin-left: 6px; margin-left: 6px;
font-weight: 500; font-weight: 500;
div {
height: $size24;
}
} }
.tip-icon-medium { .tip-icon-medium {
color: orange; color: orange;
@ -126,8 +147,6 @@ margin-left:20px;}
.tip-icon-low{ .tip-icon-low{
color:yellow; 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;}

8
src/portal/lib/src/tag/tag-detail.component.ts
View File

@ -82,6 +82,14 @@ export class TagDetailComponent implements OnInit {
return count > 1 ? "VULNERABILITY.PACKAGES" : "VULNERABILITY.PACKAGE"; 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 { public get author(): string {
return this.tagDetails && this.tagDetails.author ? this.tagDetails.author : 'TAG.ANONYMITY'; return this.tagDetails && this.tagDetails.author ? this.tagDetails.author : 'TAG.ANONYMITY';
} }

8
src/portal/lib/src/vulnerability-scanning/result-tip.component.ts
View File

@ -160,6 +160,14 @@ export class ResultTipComponent implements OnInit {
return count > 1 ? "VULNERABILITY.PACKAGES" : "VULNERABILITY.PACKAGE"; 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 { public get completeTimestamp(): Date {
return this.summary && this.summary.update_time ? this.summary.update_time : new Date(); return this.summary && this.summary.update_time ? this.summary.update_time : new Date();
} }

10
src/portal/lib/src/vulnerability-scanning/result-tip.componnent.html
View File

@ -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-unknown" [style.width]='tipWidth(2)'></div>
<div class="tip-wrapper tip-block bar-block-none" [style.width]='tipWidth(1)'></div> <div class="tip-wrapper tip-block bar-block-none" [style.width]='tipWidth(1)'></div>
</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"> <div [ngSwitch]="scanLevel" class="bar-tooltip-font-larger">
<ng-template [ngSwitchCase]="5"> <ng-template [ngSwitchCase]="5">
<clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon> <clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon>
@ -37,19 +37,19 @@
<div class="bar-summary bar-tooltip-fon"> <div class="bar-summary bar-tooltip-fon">
<div *ngIf="hasHigh" class="bar-summary-item"> <div *ngIf="hasHigh" class="bar-summary-item">
<span><clr-icon shape="exclamation-circle" class="is-error" size="24"></clr-icon></span> <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>
<div *ngIf="hasMedium" class="bar-summary-item"> <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><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>
<div *ngIf="hasLow" class="bar-summary-item"> <div *ngIf="hasLow" class="bar-summary-item">
<span><clr-icon shape="play" class="tip-icon-low rotate-90" size="20"></clr-icon></span> <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>
<div *ngIf="hasUnknown" class="bar-summary-item"> <div *ngIf="hasUnknown" class="bar-summary-item">
<span><clr-icon shape="help" size="18"></clr-icon></span> <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>
<div *ngIf="hasNone" class="bar-summary-item"> <div *ngIf="hasNone" class="bar-summary-item">
<span><clr-icon shape="check-circle" class="is-success" size="24"></clr-icon></span> <span><clr-icon shape="check-circle" class="is-success" size="24"></clr-icon></span>

3
src/portal/src/i18n/lang/en-us-lang.json
View File

@ -695,6 +695,7 @@
"COLUMN_ID": "Vulnerability", "COLUMN_ID": "Vulnerability",
"COLUMN_SEVERITY": "Severity", "COLUMN_SEVERITY": "Severity",
"COLUMN_PACKAGE": "Package", "COLUMN_PACKAGE": "Package",
"COLUMN_PACKAGES": "Packages",
"COLUMN_VERSION": "Current version", "COLUMN_VERSION": "Current version",
"COLUMN_FIXED": "Fixed in version", "COLUMN_FIXED": "Fixed in version",
"COLUMN_DESCRIPTION": "Description", "COLUMN_DESCRIPTION": "Description",
@ -740,6 +741,8 @@
"DOCKER_VERSION": "Docker Version", "DOCKER_VERSION": "Docker Version",
"ARCHITECTURE": "Architecture", "ARCHITECTURE": "Architecture",
"OS": "OS", "OS": "OS",
"HAVE": "have",
"HAS": "has",
"SCAN_COMPLETION_TIME": "Scan Completed", "SCAN_COMPLETION_TIME": "Scan Completed",
"IMAGE_VULNERABILITIES": "Image Vulnerabilities", "IMAGE_VULNERABILITIES": "Image Vulnerabilities",
"LEVEL_VULNERABILITIES": "Level Vulnerabilities", "LEVEL_VULNERABILITIES": "Level Vulnerabilities",

3
src/portal/src/i18n/lang/es-es-lang.json
View File

@ -694,6 +694,7 @@
"COLUMN_ID": "Vulnerability", "COLUMN_ID": "Vulnerability",
"COLUMN_SEVERITY": "Severity", "COLUMN_SEVERITY": "Severity",
"COLUMN_PACKAGE": "Package", "COLUMN_PACKAGE": "Package",
"COLUMN_PACKAGES": "Packages",
"COLUMN_VERSION": "Current version", "COLUMN_VERSION": "Current version",
"COLUMN_FIXED": "Fixed in version", "COLUMN_FIXED": "Fixed in version",
"COLUMN_DESCRIPTION": "Description", "COLUMN_DESCRIPTION": "Description",
@ -739,6 +740,8 @@
"DOCKER_VERSION": "Docker Version", "DOCKER_VERSION": "Docker Version",
"ARCHITECTURE": "Architecture", "ARCHITECTURE": "Architecture",
"OS": "OS", "OS": "OS",
"HAVE": "have",
"HAS": "has",
"SCAN_COMPLETION_TIME": "Scan Completed", "SCAN_COMPLETION_TIME": "Scan Completed",
"IMAGE_VULNERABILITIES": "Image Vulnerabilities", "IMAGE_VULNERABILITIES": "Image Vulnerabilities",
"LEVEL_VULNERABILITIES": "Level Vulnerabilities", "LEVEL_VULNERABILITIES": "Level Vulnerabilities",

3
src/portal/src/i18n/lang/fr-fr-lang.json
View File

@ -658,6 +658,7 @@
"COLUMN_ID": "Vulnérabilitée", "COLUMN_ID": "Vulnérabilitée",
"COLUMN_SEVERITY": "Severitée", "COLUMN_SEVERITY": "Severitée",
"COLUMN_PACKAGE": "Paquet", "COLUMN_PACKAGE": "Paquet",
"COLUMN_PACKAGES": "Paquets",
"COLUMN_VERSION": "Version Actuelle", "COLUMN_VERSION": "Version Actuelle",
"COLUMN_FIXED": "Fixé dans le version", "COLUMN_FIXED": "Fixé dans le version",
"COLUMN_DESCRIPTION": "Description", "COLUMN_DESCRIPTION": "Description",
@ -703,6 +704,8 @@
"DOCKER_VERSION": "Version de Docker", "DOCKER_VERSION": "Version de Docker",
"ARCHITECTURE": "Architecture", "ARCHITECTURE": "Architecture",
"OS": "OS", "OS": "OS",
"HAVE": "have",
"HAS": "has",
"SCAN_COMPLETION_TIME": "Analyse Terminée", "SCAN_COMPLETION_TIME": "Analyse Terminée",
"IMAGE_VULNERABILITIES": "Vulnérabilitées de l'Image", "IMAGE_VULNERABILITIES": "Vulnérabilitées de l'Image",
"PLACEHOLDER": "Nous ne trouvons aucun tag !", "PLACEHOLDER": "Nous ne trouvons aucun tag !",

3
src/portal/src/i18n/lang/zh-cn-lang.json
View File

@ -693,6 +693,7 @@
"COLUMN_ID": "缺陷码", "COLUMN_ID": "缺陷码",
"COLUMN_SEVERITY": "严重度", "COLUMN_SEVERITY": "严重度",
"COLUMN_PACKAGE": "组件", "COLUMN_PACKAGE": "组件",
"COLUMN_PACKAGES": "组件",
"COLUMN_VERSION": "当前版本", "COLUMN_VERSION": "当前版本",
"COLUMN_FIXED": "修复版本", "COLUMN_FIXED": "修复版本",
"COLUMN_DESCRIPTION": "简介", "COLUMN_DESCRIPTION": "简介",
@ -738,6 +739,8 @@
"DOCKER_VERSION": "Docker版本", "DOCKER_VERSION": "Docker版本",
"ARCHITECTURE": "架构", "ARCHITECTURE": "架构",
"OS": "操作系统", "OS": "操作系统",
"HAVE": "存在",
"HAS": "存在",
"SCAN_COMPLETION_TIME": "扫描完成时间", "SCAN_COMPLETION_TIME": "扫描完成时间",
"IMAGE_VULNERABILITIES": "镜像缺陷", "IMAGE_VULNERABILITIES": "镜像缺陷",
"LEVEL_VULNERABILITIES": "缺陷等级", "LEVEL_VULNERABILITIES": "缺陷等级",