From c4fc6b486f604e9bb1088149e45d05562204c1e0 Mon Sep 17 00:00:00 2001 From: Guiheux Steven Date: Tue, 31 Jul 2018 17:18:47 +0200 Subject: [PATCH] feat (ui): add vulnerabilities list (#3111) --- ui/src/app/shared/shared.module.ts | 3 + .../list/vulnerabilities.list.html | 23 ++++++ .../list/vulnerabilities.list.scss | 73 +++++++++++++++++++ .../list/vulnerability.list.component.ts | 40 ++++++++++ .../vulnerabilities.component.ts | 6 ++ .../shared/vulnerability/vulnerabilities.html | 13 +++- .../shared/vulnerability/vulnerabilities.scss | 8 +- ui/src/assets/i18n/en.json | 4 + ui/src/assets/i18n/fr.json | 4 + 9 files changed, 169 insertions(+), 5 deletions(-) create mode 100644 ui/src/app/shared/vulnerability/list/vulnerabilities.list.html create mode 100644 ui/src/app/shared/vulnerability/list/vulnerabilities.list.scss create mode 100644 ui/src/app/shared/vulnerability/list/vulnerability.list.component.ts diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts index 65a85194be..857c4f7b38 100644 --- a/ui/src/app/shared/shared.module.ts +++ b/ui/src/app/shared/shared.module.ts @@ -67,6 +67,7 @@ import {VariableFormComponent} from './variable/form/variable.form'; import {VariableComponent} from './variable/list/variable.component'; import {VariableValueComponent} from './variable/value/variable.value.component'; import {VCSStrategyComponent} from './vcs/vcs.strategy.component'; +import {VulnerabilitiesListComponent} from './vulnerability/list/vulnerability.list.component'; import {VulnerabilitiesComponent} from './vulnerability/vulnerabilities.component'; import {WarningMarkListComponent} from './warning/mark-list/warning.mark.list.component'; import {WarningMarkComponent} from './warning/mark-single/warning.mark.component'; @@ -135,6 +136,7 @@ import {ZoneComponent} from './zone/zone.component'; VariableFormComponent, VariableValueComponent, VulnerabilitiesComponent, + VulnerabilitiesListComponent, WarningModalComponent, DeleteModalComponent, WarningTabComponent, @@ -229,6 +231,7 @@ import {ZoneComponent} from './zone/zone.component'; VariableFormComponent, VariableValueComponent, VulnerabilitiesComponent, + VulnerabilitiesListComponent, WarningTabComponent, WarningMarkComponent, WarningMarkListComponent, diff --git a/ui/src/app/shared/vulnerability/list/vulnerabilities.list.html b/ui/src/app/shared/vulnerability/list/vulnerabilities.list.html new file mode 100644 index 0000000000..4dec09558b --- /dev/null +++ b/ui/src/app/shared/vulnerability/list/vulnerabilities.list.html @@ -0,0 +1,23 @@ +
+
+
+ + +
+
+ +
\ No newline at end of file diff --git a/ui/src/app/shared/vulnerability/list/vulnerabilities.list.scss b/ui/src/app/shared/vulnerability/list/vulnerabilities.list.scss new file mode 100644 index 0000000000..c2b7572afc --- /dev/null +++ b/ui/src/app/shared/vulnerability/list/vulnerabilities.list.scss @@ -0,0 +1,73 @@ +@import '../vulnerabilities.scss'; + +.filter { + height: 30px; +} +ul { + list-style: none; + margin-left: 0; + padding: 0; + + li { + border-bottom: 1px solid lightgrey; + padding-top: 10px; + padding-bottom: 10px; + + .dot { + width: 13px; + height: 13px; + border-radius: 13px; + display: inline-flex; + margin-right: 5px; + } + .dot.defcon1 { + background-color: $defcon_color; + } + .dot.critical { + background-color: $critical_color; + } + .dot.high { + background-color: $high_color; + } + .dot.medium { + background-color: $medium_color; + } + .dot.low { + background-color: $low_color; + } + .dot.negligible { + background-color: $negligible_color; + } + .dot.unknown { + background-color: $unknown_color; + } + + .text { + display: inline-flex; + + .component { + padding-left: 10px; + padding-right: 10px; + font-weight: 600; + } + + .title { + padding-left: 20px; + } + } + + + .resume { + padding-top: 10px; + } + } + li:first-child { + padding-top: 0px; + margin-top: -10px; + } + li:last-child { + padding-bottom: 0px; + border-bottom: 0px; + margin-bottom: -10px; + } +} \ No newline at end of file diff --git a/ui/src/app/shared/vulnerability/list/vulnerability.list.component.ts b/ui/src/app/shared/vulnerability/list/vulnerability.list.component.ts new file mode 100644 index 0000000000..f3123f177f --- /dev/null +++ b/ui/src/app/shared/vulnerability/list/vulnerability.list.component.ts @@ -0,0 +1,40 @@ +import {Component, Input} from '@angular/core'; +import {Vulnerability} from '../../../model/application.model'; + +@Component({ + selector: 'app-vulnerabilities-list', + templateUrl: './vulnerabilities.list.html', + styleUrls: ['./vulnerabilities.list.scss'] +}) +export class VulnerabilitiesListComponent { + + _filter: string; + @Input('filter') + set filter(data: string) { + this._filter = data; + this.updateVulns(); + } + get filter() { + return this._filter; + } + @Input('vulnerabilities') + set vulnerabilities(data: Array) { + if (data) { + this.allVulnerabilities = data; + this.updateVulns(); + } + }; + allVulnerabilities: Array; + filteredVulnerabilities: Array; + + updateVulns(): void { + if (this.allVulnerabilities) { + if (!this.filter) { + this.filteredVulnerabilities = this.allVulnerabilities; + } else { + this.filteredVulnerabilities = this.allVulnerabilities + .filter(v => (v.component + ' ' + v.version).indexOf(this.filter) >= 0) + } + } + } +} diff --git a/ui/src/app/shared/vulnerability/vulnerabilities.component.ts b/ui/src/app/shared/vulnerability/vulnerabilities.component.ts index b58ceeb3e8..9d297a99c7 100644 --- a/ui/src/app/shared/vulnerability/vulnerabilities.component.ts +++ b/ui/src/app/shared/vulnerability/vulnerabilities.component.ts @@ -70,4 +70,10 @@ export class VulnerabilitiesComponent { get vulnerabilities() { return this._vulnerabilities; } + + filter = ''; + + updateFilter(v: Vulnerability): void { + this.filter = v.component + ' ' + v.version; + } } diff --git a/ui/src/app/shared/vulnerability/vulnerabilities.html b/ui/src/app/shared/vulnerability/vulnerabilities.html index 6ae52369a8..9615436dcc 100644 --- a/ui/src/app/shared/vulnerability/vulnerabilities.html +++ b/ui/src/app/shared/vulnerability/vulnerabilities.html @@ -1,5 +1,4 @@ -
- +
{{summary.unknown + ' Unknown'}} @@ -42,8 +41,16 @@
-
+
+
+ +
+ +
+
+ {{ 'vulnerability_no' | translate }}
\ No newline at end of file diff --git a/ui/src/app/shared/vulnerability/vulnerabilities.scss b/ui/src/app/shared/vulnerability/vulnerabilities.scss index 57a4acc387..331fe3e534 100644 --- a/ui/src/app/shared/vulnerability/vulnerabilities.scss +++ b/ui/src/app/shared/vulnerability/vulnerabilities.scss @@ -88,8 +88,8 @@ $unknown_color: lightgrey; margin: 20px auto 0 auto; .vuln { - width: 26px; - height: 26px; + width: 20px; + height: 20px; border-radius: 13px; position: relative; display: inline-block; @@ -120,4 +120,8 @@ $unknown_color: lightgrey; } } + .list { + max-width: 1000px; + margin: 80px auto 0 auto; + } } \ No newline at end of file diff --git a/ui/src/assets/i18n/en.json b/ui/src/assets/i18n/en.json index 75cecce42c..4cb8419eb4 100644 --- a/ui/src/assets/i18n/en.json +++ b/ui/src/assets/i18n/en.json @@ -189,6 +189,7 @@ "common_environment": "Environment", "common_environment_title": "Environment: ", "common_environments": "Environments", + "common_filter": "Search...", "common_keys": "Keys", "common_history": "History", "common_loading": "Loading...", @@ -250,6 +251,7 @@ "common_no_favorites": "You didn't add projects or workflows in your bookmarks yet.", "common_favorites_all": "All bookmarks", "common_file_too_large": "Your file is too large (max 100Ko)", + "common_vulnerabilities": "Vulnerabilities", "coverage_branches_title": "Covered branches: ", "coverage_functions_title": "Covered functions: ", @@ -714,6 +716,8 @@ "vcs_ssh_key" : "SSH key", "vcs_pgp_key" : "PGP key", + "vulnerability_no" : "No vulnerabilities detected", + "warning_context": "Context", "warning_element": "Element", "warning_goto_application_variables": "application variables", diff --git a/ui/src/assets/i18n/fr.json b/ui/src/assets/i18n/fr.json index f9d516e443..5fdb1db2fb 100644 --- a/ui/src/assets/i18n/fr.json +++ b/ui/src/assets/i18n/fr.json @@ -189,6 +189,7 @@ "common_environment": "Environnement", "common_environment_title": "Environnement : ", "common_environments": "Environnements", + "common_filter": "Rechercher...", "common_keys": "Clés", "common_history": "Historique", "common_loading": "Chargement...", @@ -250,6 +251,7 @@ "common_no_favorites": "Vous n'avez pas encore ajouté de projets ou de workflows dans vos favoris.", "common_favorites_all": "Tous les favoris", "common_file_too_large": "Votre fichier est trop volumineux (max 100Ko)", + "common_vulnerabilities": "Vulnérabilités", "coverage_branches_title": "Branches couvertes : ", "coverage_functions_title": "Fonctions couvertes : ", @@ -714,6 +716,8 @@ "vcs_ssh_key" : "Clé SSH", "vcs_pgp_key" : "Clé PGP", + "vulnerability_no" : "Aucune vulnérabilité détectée", + "warning_context": "Contexte", "warning_element": "Element", "warning_goto_application_variables": "variables de l'application",