harbor/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { VulnerabilitySummary, VulnerabilitySeverity } from '../service/index';
import { TranslateService } from '@ngx-translate/core';

import { SCANNING_STYLES } from './scanning.css';
import { TIP_COMPONENT_HTML } from './scanning.html';
import { VULNERABILITY_SCAN_STATUS } from '../utils';

export const MIN_TIP_WIDTH = 5;
export const MAX_TIP_WIDTH = 100;

@Component({
    selector: 'hbr-vulnerability-summary-chart',
    template: TIP_COMPONENT_HTML,
    styles: [SCANNING_STYLES]
})
export class ResultTipComponent implements OnInit {
    _tipTitle: string = "";
    _highCount: number = 0;
    _mediumCount: number = 0;
    _lowCount: number = 0;
    _unknownCount: number = 0;
    _noneCount: number = 0;

    totalPackages: number = 0;
    packagesWithVul: number = 0;

    @Input() summary: VulnerabilitySummary = {
        scan_status: VULNERABILITY_SCAN_STATUS.unknown,
        severity: VulnerabilitySeverity.UNKNOWN,
        update_time: new Date(),
        components: {
            total: 0,
            summary: []
        }
    };

    constructor(private translate: TranslateService) { }

    ngOnInit(): void {
        this.totalPackages = this.summary && this.summary.components ? this.summary.components.total : 0;
        if (this.summary && this.summary.components && this.summary.components.summary) {
            this.summary.components.summary.forEach(item => {
                if (item.severity != VulnerabilitySeverity.NONE) {
                    this.packagesWithVul += item.count
                }

                switch (item.severity) {
                    case VulnerabilitySeverity.UNKNOWN:
                        this._unknownCount += item.count;
                        break;
                    case VulnerabilitySeverity.NONE:
                        this._noneCount += item.count;
                        break;
                    case VulnerabilitySeverity.LOW:
                        this._lowCount += item.count;
                        break;
                    case VulnerabilitySeverity.MEDIUM:
                        this._mediumCount += item.count;
                        break;
                    case VulnerabilitySeverity.HIGH:
                        this._highCount += item.count;
                        break;
                    default:
                        break;
                }
            });
        }
        this.translate.get('VULNERABILITY.CHART.TOOLTIPS_TITLE',
            { totalVulnerability: this.packagesWithVul, totalPackages: this.totalPackages })
            .subscribe((res: string) => this._tipTitle = res);
    }

    tipWidth(severity: VulnerabilitySeverity): string {
        let n: number = 0;
        let m: number = this.totalPackages;

        if (m === 0) {
            return 0 + 'px';
        }

        switch (severity) {
            case VulnerabilitySeverity.HIGH:
                n = this.highCount;
                break;
            case VulnerabilitySeverity.MEDIUM:
                n = this.mediumCount;
                break;
            case VulnerabilitySeverity.LOW:
                n = this.lowCount;
                break;
            case VulnerabilitySeverity.UNKNOWN:
                n = this.unknownCount;
                break;
            case VulnerabilitySeverity.NONE:
                n = this.noneCount;
                break;
            default:
                n = 0;
                break;
        }

        let width: number = Math.round((n / m) * MAX_TIP_WIDTH);
        if (width < MIN_TIP_WIDTH) {
            width = MIN_TIP_WIDTH;
        }

        return width + 'px';
    }


    unitText(count: number): string {
        if (count > 1) {
            return "VULNERABILITY.PLURAL";
        }

        return "VULNERABILITY.SINGULAR";
    }

    public get completeTimestamp(): Date {
        return this.summary && this.summary.update_time ? this.summary.update_time : new Date();
    }

    public get hasHigh(): boolean {
        return this.highCount > 0;
    }

    public get hasMedium(): boolean {
        return this.mediumCount > 0;
    }

    public get hasLow(): boolean {
        return this.lowCount > 0;
    }

    public get hasUnknown(): boolean {
        return this.unknownCount > 0;
    }

    public get hasNone(): boolean {
        return this.noneCount > 0;
    }

    public get tipTitle(): string {
        return this._tipTitle;
    }

    public get highCount(): number {
        return this._highCount;
    }

    public get mediumCount(): number {
        return this._mediumCount;
    }

    public get lowCount(): number {
        return this._lowCount;
    }

    public get unknownCount(): number {
        return this._unknownCount;
    }
    public get noneCount(): number {
        return this._noneCount;
    }

    public get highSuffix(): string {
        return this.unitText(this.highCount);
    }

    public get mediumSuffix(): string {
        return this.unitText(this.mediumCount);
    }

    public get lowSuffix(): string {
        return this.unitText(this.lowCount);
    }

    public get unknownSuffix(): string {
        return this.unitText(this.unknownCount);
    }

    public get noneSuffix(): string {
        return this.unitText(this.noneCount);
    }

    public get maxWidth(): string {
        return (MAX_TIP_WIDTH + 20) + "px";
    }
}