Incidents list and detail pages need an overhaul primefaces#158

Nanitor · Mar 9, 2019 · 4d3f553 · 4d3f553
1 parent 44f176d
commit 4d3f553
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 3 deletions.
diff --git a/src/organization/incident/incident_devices.component.html b/src/organization/incident/incident_devices.component.html
@@ -0,0 +1,54 @@
+<org-navigator [mainNavbarEnabled]="false"></org-navigator>
+
+<div class="flex-container">
+    <side-filter #filterPanel (onFilterChange)="updateProfileFilters($event)">
+        <context-filter-section #section (clearSectionEvent)="clearContextFilter($event)">
+            <text-filter (filterChanged)="filterChanged($event)" [model]="service.userFiltersState" key="hostname" label="Search" placeholder="Hostname"></text-filter>
+        </context-filter-section>
+        <os-filter-section #section></os-filter-section>
+        <label-filter-section #section></label-filter-section>
+    </side-filter>
+
+    <div class="container-fluid" [class.nanitor-fade-in]="response" [class.nanitor-hide]="!response">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h1 class="panel-title">
+                    Incident devices
+                    <button class="btn btn-sm btn-primary pull-right" (click)="refresh()" id="refresh-button" title="Refresh"><i class="fa fa-refresh"></i></button>
+                    <span class="label label-black pull-right m-r-15" style="color:white; width: auto;" *ngIf="response">Total: {{ response.total }}</span>
+                </h1>
+            </div>
+            <div class="panel-body">
+                <div class="no-data" *ngIf="emptyResponse">
+                    <p>There is currently nothing to display.</p>
+                </div>
+                <div>
+                    <p-table #ptable class="p-table" [columns]="cols" [value]="items" [paginator]="true" 
+                            [rows]="ROWS" [totalRecords]="totalRecords" scrollable="true" [scrollHeight]="window.innerHeight - HEADER_HEIGHT + 'px'" [customSort]="true" sortMode="multiple"
+                            (onPage)="onPage($event)">
+                            <!-- [style]="{width: window.innerWidth - (filterPanel.isCollapsed ? LIST_BASE_PADDING : LIST_BASE_PADDING + FILTER_WIDTH) + 'px'}" -->
+                            <ng-template pTemplate="colgroup" let-columns>
+                                <colgroup>
+                                    <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
+                                </colgroup>
+                            </ng-template>
+                            <ng-template pTemplate="header" let-columns>
+                                <tr valign="top" class="defence" width="100%">
+                                    <th *ngFor="let col of columns" class="table-header-cell" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.disabled" [ngStyle]="{'width': col.width}">
+                                        <div>{{col.header}}<p-sortIcon *ngIf="!col.disabled" [field]="col.field"></p-sortIcon></div>
+                                    </th>
+                                </tr>
+                            </ng-template>
+                            <ng-template pTemplate="body" let-rowData let-columns="columns">
+                                    <tr id="item-{{ rowData.id }}" class="table-row">
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth('created')}">{{rowData.created_at*1000 | moment:'MMM Do YYYY HH:mm'}}</td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth('device')}">{{rowData.device_hostname}}</td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth('profile')}">{{rowData.profile_title}}</td>
+                                    </tr>
+                                </ng-template>
+                    </p-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/organization/incident/incident_devices.component.ts b/src/organization/incident/incident_devices.component.ts
@@ -0,0 +1,115 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {ColumnWithSort} from '../../common/object'
+import { IncidentService } from './incident.service';
+import { Table } from 'primeng/table';
+import { SideFilterComponent } from 'common/side_filter/side-filter.component';
+import { SortableTableComponent } from '../../common/sortable_table/sortable-table.component';
+import { TextFilterComponent } from '../../common/filter_pane/text-filter.component';
+import { IncidentDeviceListItem, IncidentItemListItem } from './incident_response';
+import { BasicListRequest } from 'common/request';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    templateUrl: 'incident_devices.component.html',
+    providers: [IncidentService]
+})
+
+export class IncidentDevicesComponent implements OnInit {
+    @ViewChild(SortableTableComponent) table: SortableTableComponent;
+    @ViewChild(TextFilterComponent) textFilter: TextFilterComponent;
+    @ViewChild('ptable') ptable: Table;
+    @ViewChild('filterPanel') filterPanel: SideFilterComponent;
+
+    public HEADER_HEIGHT: number = 310;
+    public FILTER_WIDTH: number = 300;
+    public LIST_BASE_PADDING: number = 120;
+    public ROWS: number = 20;
+    public window = window;
+    private savedScrollPos: number = 0;
+    public emptyResponse: boolean = false;
+    private cols: Array<ColumnWithSort>;
+    public response: IncidentDeviceListItem;
+    public items: Array<IncidentItemListItem>;
+    public totalRecords: number;
+    private itemListRequest: BasicListRequest;
+    private incidentId: string;
+
+    constructor(public service: IncidentService, private router: Router, private route: ActivatedRoute) {
+        this.incidentId = route.snapshot.params['id'];
+        this.itemListRequest = new BasicListRequest();
+        this.response = null;
+        this.items = [];
+    }
+
+    ngOnInit() {
+        this.cols = [
+            { field: 'created', header: 'Created', order: 0, width: '160px', disabled: true },
+            { field: 'device', header: 'Device', order: 0, width: '200px', disabled: true },
+            { field: 'profile', header: 'Profile', order: 0, width: '120px', disabled: true }
+        ];
+
+        this.clearContextFilter(() => {});
+
+        this.service.getItemList(this.incidentId, this.itemListRequest).subscribe((data: any) => {
+            this.response = data;
+            this.items = this.response.items;
+            this.totalRecords = this.response.total;
+
+            console.log(this.response);
+        });
+    }
+
+    refresh() {
+        let currentPage = this.ptable.first / this.ROWS + 1;
+        this.emptyResponse = false;
+        this.ptable.setScrollPosition(0);
+        this.savedScrollPos = 0;
+        this.service.reset();
+        jQuery('#refresh-button').blur();
+    }
+
+    filterChanged(e) {
+        setTimeout(() => {
+            if (this.ptable) {
+                this.ptable.first = 0;
+            }
+            this.refresh();
+        });
+    }
+
+    onPage(event) {
+        this.setFocusToList();
+        this.ptable.setScrollPosition(0);
+        this.savedScrollPos = 0;
+    }
+
+    setFocusToList() {
+        this.ptable.setFocusToList();
+    }
+
+    getColumnWidth(field) {
+        let fieldd = this.cols.filter(function (item) {
+            return item.field === field;
+        })[0];
+        return fieldd.width;
+    }
+
+    updateProfileFilters(event) {
+        if (this.ptable) {
+            this.ptable.first = 0;
+        }
+        this.refresh();
+    }
+
+    clearContextFilter(callback: Function) {
+        // Clear UI
+        this.textFilter.clear();
+        this.service.profileFilters = [];
+
+
+        if (this.ptable) {
+            this.ptable.first = 0;
+        }
+        callback();
+    }
+}
diff --git a/src/organization/incident/incident_list.component.html b/src/organization/incident/incident_list.component.html
@@ -65,7 +65,7 @@ <h1 class="panel-title">Incidents
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('item_title')}">{{ rowData.item_title }}</td>
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('benchmark_display_name')}">{{ rowData.benchmark_display_name }}</td>
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('severity')}">{{ severityToString(rowData.severity)}}</td>
-                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('num_devices')}">{{ rowData.num_devices|mynumber }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('num_devices')}"><a href="#" (click)="itemSelected($event, rowData, true)">{{ rowData.num_devices|mynumber }}</a></td>
                             </tr>
                         </ng-template>
                     </p-table>

diff --git a/src/organization/incident/incident_list.component.ts b/src/organization/incident/incident_list.component.ts
@@ -160,7 +160,7 @@ export class IncidentListComponent implements OnInit {
         this.ptable.setFocusToList();
     }
 
-    itemSelected(event, item: IncidentListItem) {
+    itemSelected(event, item: IncidentListItem, isDevices: boolean = false) {
         event.preventDefault();
 
         this.selectedScrollPos = this.ptable.getScrollPosition();
@@ -171,9 +171,11 @@ export class IncidentListComponent implements OnInit {
                 resolve();
             }
         }).then(() => {
-            let subPath = `/incident/${item.id}`;
+            let subPath = `/incident/${isDevices ? 'devices/' : ''}${item.id}`;
             let url = this.service.accountService.navigateOrganization(subPath);
             this.router.navigateByUrl(url);
+
+            console.log(url);
         });
     }
 

diff --git a/src/organization/incident/incident_response.ts b/src/organization/incident/incident_response.ts
@@ -56,3 +56,10 @@ export interface IncidentItemListItem {
     profile_title: string;
     device_hostname: string;
 }
+
+export interface IncidentDeviceListItem {
+    total: number;
+    items: Array<IncidentItemListItem>;
+}
+
+
diff --git a/src/organization/organization.routes.ts b/src/organization/organization.routes.ts
@@ -7,6 +7,7 @@ import {DeviceDetailComponent} from './device/device_detail.component';
 import {DeviceListByBenchmarkComponent} from './device/device_list_by_benchmark.component';
 import {IncidentListComponent} from './incident/incident_list.component';
 import {IncidentDetailComponent} from './incident/incident_detail.component';
+import {IncidentDevicesComponent} from './incident/incident_devices.component'
 import {IncidentListByBenchmarkComponent} from './incident/incident_list_by_benchmark.component';
 import {DefenceComponent} from './defence/defence.component';
 import {LoggedInUserDetailComponent} from './loggedin_user/loggedin_user_detail.component';
@@ -184,6 +185,17 @@ export const OrganizationRoutes:Routes = [
                     defaultParentPath: 'incident'
                 }
             },
+            {
+                path: 'incident/devices/:id',
+                component: IncidentDevicesComponent,
+                canActivate: [OrganizationGuard],
+                data: {
+                    breadcrumb: 'Incident',
+                    isTopLevel: false,
+                    defaultParent: 'Incidents',
+                    defaultParentPath: 'incident'
+                }
+            },
             {
                 path: 'incident/benchmark/:id',
                 component: IncidentListByBenchmarkComponent,
@@ -613,6 +625,7 @@ export const OrganizationComponents = [
     CollectorListComponent,
     IncidentListComponent,
     IncidentDetailComponent,
+    IncidentDevicesComponent,
     IncidentListByBenchmarkComponent,
     LoggedInUserDetailComponent,
     GroupPolicyListComponent,