Skip to content

Commit

Permalink
feat (ui): add vulnerabilities list (#3111)
Browse files Browse the repository at this point in the history
  • Loading branch information
sguiheux authored and yesnault committed Jul 31, 2018
1 parent 76ca217 commit c4fc6b4
Show file tree
Hide file tree
Showing 9 changed files with 169 additions and 5 deletions.
3 changes: 3 additions & 0 deletions ui/src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -135,6 +136,7 @@ import {ZoneComponent} from './zone/zone.component';
VariableFormComponent,
VariableValueComponent,
VulnerabilitiesComponent,
VulnerabilitiesListComponent,
WarningModalComponent,
DeleteModalComponent,
WarningTabComponent,
Expand Down Expand Up @@ -229,6 +231,7 @@ import {ZoneComponent} from './zone/zone.component';
VariableFormComponent,
VariableValueComponent,
VulnerabilitiesComponent,
VulnerabilitiesListComponent,
WarningTabComponent,
WarningMarkComponent,
WarningMarkListComponent,
Expand Down
23 changes: 23 additions & 0 deletions ui/src/app/shared/vulnerability/list/vulnerabilities.list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div class="ui segment">
<div class="filter">
<div class="ui right floated mini icon input">
<input type="text" [(ngModel)]="filter" placeholder="{{'common_filter' | translate}}">
<i class="search icon"></i>
</div>
</div>
<ul>
<li *ngFor="let v of filteredVulnerabilities">
<div class="header">
<div class="dot {{v.severity}}"></div>
<div class="text">
<span class="component">{{ ' ' + v.component}}</span>
<span>{{ ' ' + v.version}}</span>
<span class="title">{{ v.title + ' '}}<a [href]="v.link" target="_blank">{{v.cve}}<i class="external alternate icon"></i></a></span>
</div>
</div>
<div class="resume">
<div class="description"><markdown [data]="v.description"></markdown></div>
</div>
</li>
</ul>
</div>
73 changes: 73 additions & 0 deletions ui/src/app/shared/vulnerability/list/vulnerabilities.list.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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<Vulnerability>) {
if (data) {
this.allVulnerabilities = data;
this.updateVulns();
}
};
allVulnerabilities: Array<Vulnerability>;
filteredVulnerabilities: Array<Vulnerability>;

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)
}
}
}
}
6 changes: 6 additions & 0 deletions ui/src/app/shared/vulnerability/vulnerabilities.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,10 @@ export class VulnerabilitiesComponent {
get vulnerabilities() {
return this._vulnerabilities;
}

filter = '';

updateFilter(v: Vulnerability): void {
this.filter = v.component + ' ' + v.version;
}
}
13 changes: 10 additions & 3 deletions ui/src/app/shared/vulnerability/vulnerabilities.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<div class="Vulnerability">

<div class="Vulnerability" *ngIf="vulnerabilities && vulnerabilities.length > 0">
<div class="summary-labels">
<div class="label unknown" [ngStyle]="{ 'width': (100*summary.unknown/summary.total)+'%'}"
*ngIf="summary.unknown > 0;">{{summary.unknown + ' Unknown'}}
Expand Down Expand Up @@ -42,8 +41,16 @@

<div class="dot-container">
<ng-container *ngFor="let v of vulnerabilities">
<div class="vuln {{v.severity}}" suiPopup popupHeader="{{v.cve}}" popupText="{{v.component + ' ' + v.version}}"></div>
<div class="vuln {{v.severity}}" suiPopup popupHeader="{{v.cve}}" popupText="{{v.component + ' ' + v.version}}"
(click)="updateFilter(v)"></div>
</ng-container>
</div>

<div class="list">
<app-vulnerabilities-list [filter]="filter" [vulnerabilities]="vulnerabilities"></app-vulnerabilities-list>
</div>

</div>
<div class="ui info message" *ngIf="!vulnerabilities || vulnerabilities.length === 0">
{{ 'vulnerability_no' | translate }}
</div>
8 changes: 6 additions & 2 deletions ui/src/app/shared/vulnerability/vulnerabilities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -120,4 +120,8 @@ $unknown_color: lightgrey;
}
}

.list {
max-width: 1000px;
margin: 80px auto 0 auto;
}
}
4 changes: 4 additions & 0 deletions ui/src/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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...",
Expand Down Expand Up @@ -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: ",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions ui/src/assets/i18n/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -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...",
Expand Down Expand Up @@ -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 : ",
Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit c4fc6b4

Please sign in to comment.