Refactor and improve the format of vulnerability scan report

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

View File

@ -28,4 +28,10 @@
margin: auto;
width: $width !important;
height: $width !important;
}
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}

View File

@ -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>

View File

@ -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;}

View File

@ -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';
}

View File

@ -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();
}

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-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>

View File

@ -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",

View File

@ -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",

View File

@ -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 !",

View File

@ -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": "缺陷等级",