diff --git a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.component.scss b/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.component.scss index 781b07802b..fb1c6f1274 100644 --- a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.component.scss +++ b/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; +} diff --git a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.interface.ts b/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.interface.ts index fc677aea79..ae768bc66c 100644 --- a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/security-hub.interface.ts +++ b/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', +} diff --git a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/single-bar/single-bar.component.ts b/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/single-bar/single-bar.component.ts index 12571c3cc3..e85ea3270c 100644 --- a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/single-bar/single-bar.component.ts +++ b/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, + tooltip: { + formatter: '{b}: {c}', + textStyle: { + fontSize: '12px', + whiteSpace: 'nowrap', }, - labelLine: { - show: false, - }, - 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, + }, + { + 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, }, }, - label: { - show: false, - }, - }, - ], - }, - ], + ], + }, + ], + }); }); } } diff --git a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss b/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss index c1ab3e578d..1641295b78 100644 --- a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss +++ b/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; +} diff --git a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.ts b/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.ts index 154f8ecff8..19b3b947f1 100644 --- a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.ts +++ b/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: '', }, diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.scss index bac4993913..2ae65b8654 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.scss +++ b/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; +} diff --git a/src/portal/src/app/base/project/repository/artifact/artifact.module.ts b/src/portal/src/app/base/project/repository/artifact/artifact.module.ts index 528fb0e9f7..bd4f49961b 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact.module.ts +++ b/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, diff --git a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-bar-chart.component.spec.ts b/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-bar-chart.component.spec.ts index c0eb04b054..1325491865 100644 --- a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-bar-chart.component.spec.ts +++ b/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, ], diff --git a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss b/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss index 0c54c7ad34..036339899b 100644 --- a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss +++ b/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 { diff --git a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.ts b/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.ts index f3657c33d0..d349168e58 100644 --- a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.ts +++ b/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, }, ]; } diff --git a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip.component.html b/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip.component.html deleted file mode 100644 index 9bea41ba40..0000000000 --- a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip.component.html +++ /dev/null @@ -1,176 +0,0 @@ -