Update the style for severity (#19525)

1.Related issue #19249

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.component.scss

@@ -63,3 +63,7 @@
 .min-width {
   min-width: 9rem !important;
 }
+
+.label {
+  min-width: 3rem;
+}

src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.interface.ts

@@ -93,3 +93,12 @@ export function getRepoLink(proId: number | string, repoName: string): any {
 }
 
 export const CVSS3_REG = /^([0-9]|10)(\.\d)?$/;
+
+export enum SeverityColors {
+    CRITICAL = '#FF4D2E',
+    HIGH = '#FF8F3D',
+    MEDIUM = '#FFCE66',
+    LOW = '#FFF1AD',
+    NONE = '#2EC0FF',
+    NA = 'gray',
+}

src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/single-bar/single-bar.component.ts

@@ -9,6 +9,8 @@ import {
 } from '@angular/core';
 import { DangerousArtifact } from '../../../../../../../ng-swagger-gen/models/dangerous-artifact';
 import * as echarts from 'echarts/core';
+import { SeverityColors } from '../security-hub.interface';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-single-bar',
@@ -23,6 +25,8 @@ export class SingleBarComponent implements OnChanges {
     @ViewChild('container', { static: true })
     container: ElementRef;
 
+    constructor(private translate: TranslateService) {}
+
     ngOnChanges(changes: SimpleChanges) {
         if (changes && changes['dangerousArtifact']) {
             this.initChart();
@@ -31,74 +35,87 @@ export class SingleBarComponent implements OnChanges {
 
     initChart() {
         const chart = echarts.init(this.container.nativeElement);
-        chart.setOption({
-            color: ['red', '#e64524', 'orange'],
-            title: {
-                text: '',
-            },
-            tooltip: {
-                formatter: '{b}: {c}',
-                textStyle: {
-                    fontSize: '12px',
-                    whiteSpace: 'nowrap',
+        const [severity, c, h, m] = [
+            'VULNERABILITY.GRID.COLUMN_SEVERITY',
+            'VULNERABILITY.SEVERITY.CRITICAL',
+            'VULNERABILITY.SEVERITY.HIGH',
+            'VULNERABILITY.SEVERITY.MEDIUM',
+        ];
+        this.translate.get([severity, c, h, m]).subscribe(res => {
+            chart.setOption({
+                color: [
+                    SeverityColors.CRITICAL,
+                    SeverityColors.HIGH,
+                    SeverityColors.MEDIUM,
+                ],
+                title: {
+                    text: '',
                 },
-            },
-            legend: {
-                show: false,
-            },
-            series: [
-                {
-                    type: 'pie',
-                    radius: '65%',
-                    name: 'Severity',
-                    // adjust the start angle
-                    startAngle: 180,
-                    itemStyle: {
-                        borderRadius: 2,
-                        borderWidth: 1,
-                    },
-                    labelLine: {
-                        show: false,
+                tooltip: {
+                    formatter: '{b}: {c}',
+                    textStyle: {
+                        fontSize: '12px',
+                        whiteSpace: 'nowrap',
                     },
-                    label: {
-                        show: true,
-                        position: 'inside',
-                        formatter: '{c}',
-                        fontSize: '9px',
-                    },
-                    data: [
-                        {
-                            name: 'Critical',
-                            value: this.dangerousArtifact?.critical_cnt || 0,
+                },
+                legend: {
+                    show: false,
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: '65%',
+                        name: res[severity],
+                        // adjust the start angle
+                        startAngle: 180,
+                        itemStyle: {
+                            borderRadius: 2,
+                            borderWidth: 1,
                         },
-                        {
-                            name: 'High',
-                            value: this.dangerousArtifact?.high_cnt || 0,
+                        labelLine: {
+                            show: false,
                         },
-                        {
-                            name: 'Medium',
-                            value: this.dangerousArtifact?.medium_cnt || 0,
+                        label: {
+                            show: true,
+                            position: 'inside',
+                            formatter: '{c}',
+                            fontSize: '9px',
                         },
-                        {
-                            // make a record to fill the bottom 50%
-                            value:
-                                this.dangerousArtifact?.critical_cnt +
-                                    this.dangerousArtifact?.high_cnt +
-                                    this.dangerousArtifact?.medium_cnt || 0,
-                            itemStyle: {
-                                // stop the chart from rendering this piece
-                                color: 'none',
-                                decal: {
-                                    symbol: 'none',
-                                },
+                        data: [
+                            {
+                                name: res[c],
+                                value:
+                                    this.dangerousArtifact?.critical_cnt || 0,
                             },
-                            label: {
-                                show: false,
+                            {
+                                name: res[h],
+                                value: this.dangerousArtifact?.high_cnt || 0,
                             },
-                        },
-                    ],
-                },
-            ],
+                            {
+                                name: res[m],
+                                value: this.dangerousArtifact?.medium_cnt || 0,
+                            },
+                            {
+                                // make a record to fill the bottom 50%
+                                value:
+                                    this.dangerousArtifact?.critical_cnt +
+                                        this.dangerousArtifact?.high_cnt +
+                                        this.dangerousArtifact?.medium_cnt || 0,
+                                itemStyle: {
+                                    // stop the chart from rendering this piece
+                                    color: 'none',
+                                    decal: {
+                                        symbol: 'none',
+                                    },
+                                },
+                                label: {
+                                    show: false,
+                                },
+                            },
+                        ],
+                    },
+                ],
+            });
         });
     }
 }

src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss

@@ -106,3 +106,7 @@ $row-height: 48px;
   display: flex;
   align-items: center;
 }
+
+.label {
+  min-width: 3rem;
+}

src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.ts

@@ -11,7 +11,12 @@ import {
 import { SecurityhubService } from '../../../../../../../ng-swagger-gen/services/securityhub.service';
 import { SecuritySummary } from '../../../../../../../ng-swagger-gen/models/security-summary';
 import { MessageHandlerService } from '../../../../../shared/services/message-handler.service';
-import { getDigestLink, severityText, VUL_ID } from '../security-hub.interface';
+import {
+    getDigestLink,
+    SeverityColors,
+    severityText,
+    VUL_ID,
+} from '../security-hub.interface';
 import { HAS_STYLE_MODE, StyleMode } from '../../../../../services/theme';
 import { Subscription } from 'rxjs';
 import {
@@ -97,7 +102,14 @@ export class VulnerabilitySummaryComponent implements OnInit, OnDestroy {
         ];
         this.translate.get([severity, c, h, m, l, n, u]).subscribe(res => {
             this.chart.setOption({
-                color: ['red', '#e64524', 'orange', '#007CBB', 'grey', 'green'],
+                color: [
+                    SeverityColors.CRITICAL,
+                    SeverityColors.HIGH,
+                    SeverityColors.MEDIUM,
+                    SeverityColors.LOW,
+                    SeverityColors.NA,
+                    SeverityColors.NONE,
+                ],
                 title: {
                     text: '',
                 },

src/portal/src/app/base/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.scss

@@ -58,3 +58,7 @@
 .mt-5px {
   margin-top: 5px;
 }
+
+.label {
+  min-width: 3rem;
+}

src/portal/src/app/base/project/repository/artifact/artifact.module.ts

@@ -14,7 +14,6 @@ import { BuildHistoryComponent } from './artifact-additions/build-history/build-
 import { ArtifactVulnerabilitiesComponent } from './artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component';
 import { ArtifactDefaultService, ArtifactService } from './artifact.service';
 import { ArtifactDetailRoutingResolverService } from '../../../../services/routing-resolvers/artifact-detail-routing-resolver.service';
-import { ResultTipComponent } from './vulnerability-scanning/result-tip.component';
 import { ResultBarChartComponent } from './vulnerability-scanning/result-bar-chart.component';
 import { ResultTipHistogramComponent } from './vulnerability-scanning/result-tip-histogram/result-tip-histogram.component';
 import { HistogramChartComponent } from './vulnerability-scanning/histogram-chart/histogram-chart.component';
@@ -80,7 +79,6 @@ const routes: Routes = [
         DependenciesComponent,
         BuildHistoryComponent,
         ArtifactVulnerabilitiesComponent,
-        ResultTipComponent,
         ResultBarChartComponent,
         ResultTipHistogramComponent,
         HistogramChartComponent,

src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-bar-chart.component.spec.ts

@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ResultBarChartComponent } from './result-bar-chart.component';
-import { ResultTipComponent } from './result-tip.component';
 import { ResultTipHistogramComponent } from './result-tip-histogram/result-tip-histogram.component';
 import { HistogramChartComponent } from './histogram-chart/histogram-chart.component';
 import {
@@ -35,7 +34,6 @@ describe('ResultBarChartComponent (inline template)', () => {
             imports: [SharedTestingModule],
             declarations: [
                 ResultBarChartComponent,
-                ResultTipComponent,
                 ResultTipHistogramComponent,
                 HistogramChartComponent,
             ],

src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss

@@ -125,21 +125,10 @@ $twenty-two-pixel: 18px;
     }
 }
 
-.label.label-medium {
-    background-color: #ffe4a9;
-    border: 1px solid orange;
-    color: orange;
-}
-
 .tip-icon-medium {
     color: orange;
 }
 
-.label.label-low {
-    background: rgb(251 255 0 / 38%);
-    color: #c5c50b;
-    border: 1px solid #e6e63f;
-}
 
 .tip-icon-low {
     color: #007CBB;
@@ -178,30 +167,6 @@ hr {
     margin-left: 3px;
 }
 
-.shadow-critical {
-    box-shadow: 1px -1px 1px red;
-}
-
-.shadow-high {
-    box-shadow: 1px -1px 1px #e64524;
-}
-
-.shadow-medium {
-    box-shadow: 1px -1px 1px orange;
-}
-
-.shadow-low {
-    box-shadow: 1px -1px 1px #007CBB;
-}
-
-.shadow-none {
-    box-shadow: 1px -1px 1px green;
-}
-
-.shadow-unknown {
-    box-shadow: 1px -1px 1px gray;
-}
-
 .w-360 {
     width: 360px !important;
 }
@@ -248,23 +213,23 @@ hr {
 }
 
 .level-critical {
-    background:red;
-    color:red;
+    background:#FF4D2E;
+    color:#FF4D2E;
 }
 
 .level-high {
-    background:#e64524;
-    color:#e64524;
+    background:#FF8F3D;
+    color:#FF8F3D;
 }
 
 .level-medium {
-    background-color: orange;
-    color:orange;
+    background-color: #FFCE66;
+    color:#FFCE66;
 }
 
 .level-low {
-    background: #007CBB;
-    color:#007CBB;
+    background: #FFF1AD;
+    color:#FFF1AD;
 }
 
 .level-none {

src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.ts

@@ -9,6 +9,7 @@ import {
     VULNERABILITY_SEVERITY,
 } from '../../../../../../shared/units/utils';
 import { HAS_STYLE_MODE, StyleMode } from '../../../../../../services/theme';
+import { SeverityColors } from '../../../../../left-side-nav/interrogation-services/vulnerability-database/security-hub.interface';
 
 const MIN = 60;
 const MIN_STR = 'min ';
@@ -229,27 +230,27 @@ export class ResultTipHistogramComponent implements OnInit {
             {
                 text: 'VULNERABILITY.SEVERITY.CRITICAL',
                 value: this.criticalCount ? this.criticalCount : 0,
-                color: 'red',
+                color: SeverityColors.CRITICAL,
             },
             {
                 text: 'VULNERABILITY.SEVERITY.HIGH',
                 value: this.highCount ? this.highCount : 0,
-                color: '#e64524',
+                color: SeverityColors.HIGH,
             },
             {
                 text: 'VULNERABILITY.SEVERITY.MEDIUM',
                 value: this.mediumCount ? this.mediumCount : 0,
-                color: 'orange',
+                color: SeverityColors.MEDIUM,
             },
             {
                 text: 'VULNERABILITY.SEVERITY.LOW',
                 value: this.lowCount ? this.lowCount : 0,
-                color: '#007CBB',
+                color: SeverityColors.LOW,
             },
             {
                 text: 'VULNERABILITY.SEVERITY.NONE',
                 value: this.noneCount ? this.noneCount : 0,
-                color: 'grey',
+                color: SeverityColors.NA,
             },
         ];
     }