102 lines
3.8 KiB
HTML
102 lines
3.8 KiB
HTML
<div class="finding-table">
|
|
<table [nbTreeGrid]="dataSource">
|
|
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="columns"></tr>
|
|
<tr nbTreeGridRow *nbTreeGridRowDef="let finding; columns: columns"
|
|
class="finding-cell"
|
|
fragment="{{finding.data['findingId']}}">
|
|
</tr>
|
|
<!-- Title -->
|
|
<ng-container [nbTreeGridColumnDef]="columns[0]">
|
|
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
|
|
{{ 'finding.title' | translate }}
|
|
</th>
|
|
<td nbTreeGridCell *nbTreeGridCellDef="let finding">
|
|
<span *ngIf=" finding.data['title'].length < 200; else cutTitle">
|
|
{{ finding.data['title'] }}
|
|
</span>
|
|
<ng-template #cutTitle>
|
|
{{ finding.data['title'].slice(0, 200) + '...' }}
|
|
</ng-template>
|
|
</td>
|
|
</ng-container>
|
|
<!-- Severity -->
|
|
<ng-container [nbTreeGridColumnDef]="columns[1]">
|
|
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef class="cell-severity">
|
|
{{ 'finding.severity' | translate }}
|
|
</th>
|
|
<td nbTreeGridCell *nbTreeGridCellDef="let finding" class="cell-severity border-style">
|
|
<div fxLayoutAlign="center center">
|
|
<app-severity-tag [currentSeverity]="finding.data['severity']"></app-severity-tag>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
<!-- Description -->
|
|
<ng-container [nbTreeGridColumnDef]="columns[2]">
|
|
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
|
|
{{ 'finding.description' | translate }}
|
|
</th>
|
|
<td nbTreeGridCell *nbTreeGridCellDef="let finding">
|
|
<span *ngIf=" finding.data['description'].length < 200; else cutDescription">
|
|
{{ finding.data['description'] }}
|
|
</span>
|
|
<ng-template #cutDescription>
|
|
{{ finding.data['description'].slice(0, 200) + '...' }}
|
|
</ng-template>
|
|
</td>
|
|
</ng-container>
|
|
<!-- Impact -->
|
|
<ng-container [nbTreeGridColumnDef]="columns[3]">
|
|
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
|
|
{{ 'finding.impact' | translate }}
|
|
</th>
|
|
<td nbTreeGridCell *nbTreeGridCellDef="let finding">
|
|
<span *ngIf=" finding.data['impact'].length < 200; else cutImpact">
|
|
{{ finding.data['impact'] }}
|
|
</span>
|
|
<ng-template #cutImpact>
|
|
{{ finding.data['impact'].slice(0, 200) + '...' }}
|
|
</ng-template>
|
|
</td>
|
|
</ng-container>
|
|
<!-- Actions -->
|
|
<ng-container [nbTreeGridColumnDef]="columns[4]">
|
|
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef class="cell-actions">
|
|
<button nbButton hero
|
|
status="info"
|
|
size="small"
|
|
shape="round"
|
|
class="add-finding-button"
|
|
[disabled]="pentestInfo$.getValue().status !== inProgressStatus"
|
|
(click)="onClickAddFinding()">
|
|
<fa-icon [icon]="fa.faPlus" class="new-finding-icon"></fa-icon>
|
|
{{'finding.add' | translate}}
|
|
</button>
|
|
</th>
|
|
<td nbTreeGridCell *nbTreeGridCellDef="let finding" class="cell-actions">
|
|
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="1rem">
|
|
<button nbButton
|
|
status="primary"
|
|
size="small"
|
|
(click)="onClickEditFinding(finding)">
|
|
<fa-icon [icon]="fa.faPencilAlt"></fa-icon>
|
|
</button>
|
|
<button nbButton
|
|
status="danger"
|
|
size="small"
|
|
(click)="onClickDeleteFinding(finding)">
|
|
<fa-icon [icon]="fa.faTrash"></fa-icon>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
</table>
|
|
</div>
|
|
|
|
<div *ngIf="data.length === 0 && loading$.getValue() === false" fxLayout="row" fxLayoutAlign="center center">
|
|
<p class="error-text">
|
|
{{'finding.no.findings' | translate}}
|
|
</p>
|
|
</div>
|
|
|
|
<app-loading-spinner [isLoading$]="isLoading()" *ngIf="isLoading() | async"></app-loading-spinner>
|