mirror of https://github.com/goharbor/harbor.git
56 lines
4.1 KiB
HTML
56 lines
4.1 KiB
HTML
<div class="tip-wrapper tip-position width-210">
|
|
<clr-tooltip>
|
|
<div clrTooltipTrigger class="tip-block">
|
|
<ng-container *ngIf="!isNone">
|
|
<div *ngIf="criticalCount > 0" class="tip-wrapper bar-block-critical shadow-critical width-30">{{criticalCount}}</div>
|
|
<div *ngIf="highCount > 0" class="margin-left-5 tip-wrapper bar-block-high shadow-high width-30">{{highCount}}</div>
|
|
<div *ngIf="mediumCount > 0" class="margin-left-5 tip-wrapper bar-block-medium shadow-medium width-30">{{mediumCount}}</div>
|
|
<div *ngIf="lowCount > 0" class="margin-left-5 tip-wrapper bar-block-low shadow-low width-30">{{lowCount}}</div>
|
|
<div *ngIf="negligibleCount > 0" class="margin-left-5 tip-wrapper bar-block-none shadow-none width-30">{{negligibleCount}}</div>
|
|
<div *ngIf="unknownCount > 0" class="margin-left-5 tip-wrapper bar-block-unknown shadow-unknown width-30">{{unknownCount}}</div>
|
|
</ng-container>
|
|
<div *ngIf="isNone" class="margin-left-5 tip-wrapper bar-block-none shadow-none width-150">{{'VULNERABILITY.NO_VULNERABILITY' | translate }}</div>
|
|
</div>
|
|
<clr-tooltip-content class="w-800" [clrPosition]="'right'" [clrSize]="'lg'" *clrIfOpen>
|
|
<div class="bar-tooltip-font-larger">
|
|
<ng-container *ngIf="isCritical">
|
|
<clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon>
|
|
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.CRITICAL' | translate | titlecase }}</span></span>
|
|
</ng-container>
|
|
<ng-container *ngIf="isHigh">
|
|
<clr-icon shape="exclamation-triangle" class="is-error" size="32"></clr-icon>
|
|
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.HIGH' | translate | titlecase }}</span></span>
|
|
</ng-container>
|
|
<ng-container *ngIf="isMedium">
|
|
<clr-icon shape="minus-circle" class="tip-icon-medium" size="30"></clr-icon>
|
|
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.MEDIUM' | translate | titlecase}}</span></span>
|
|
</ng-container>
|
|
<ng-container *ngIf="isLow">
|
|
<clr-icon shape="info-circle" class="tip-icon-low" size="32"></clr-icon>
|
|
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }}</span></span>
|
|
</ng-container>
|
|
<ng-container *ngIf="isUnknown">
|
|
<clr-icon shape="help" size="24" class="help-icon"></clr-icon>
|
|
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate | titlecase }}</span></span>
|
|
</ng-container>
|
|
<ng-container *ngIf="isNegligible">
|
|
<clr-icon shape="circle" class="is-success" size="32"></clr-icon>
|
|
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.NEGLIGIBLE' | translate | titlecase }}</span></span>
|
|
</ng-container>
|
|
<ng-container *ngIf="isNone">
|
|
<clr-icon shape="check-circle" class="is-success" size="32"></clr-icon>
|
|
<span>{{'VULNERABILITY.NO_VULNERABILITY' | translate }}</span>
|
|
</ng-container>
|
|
</div>
|
|
<hr>
|
|
<div class="bar-summary bar-tooltip-fon" *ngIf="!isNone">
|
|
<histogram-chart [isWhiteBackground]="false" [metadata]="passMetadataToChart()"></histogram-chart>
|
|
</div>
|
|
<div>
|
|
<span class="bar-scanning-time">{{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} </span>
|
|
<span>{{completeTimestamp | date:'short'}}</span>
|
|
</div>
|
|
</clr-tooltip-content>
|
|
</clr-tooltip>
|
|
</div>
|