Incidents list and detail pages need an overhaul primefaces#158

Nanitor · Mar 19, 2019 · 1231fc9 · 1231fc9
1 parent 75d8e3d
commit 1231fc9
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 3 deletions.
diff --git a/src/organization/device/detail/incident/device-incident.component.html b/src/organization/device/detail/incident/device-incident.component.html
@@ -17,7 +17,9 @@
     </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(columns, 'incident_id')}"><a href="#" (click)="ruleIncidentSelected($event, item.incident_id)">{{ rowData.incident_id }}</a></td>
+            <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'incident_id')}">
+                <a href="#" (click)="itemSelected($event, rowData)">{{ rowData.incident_id }}</a>
+            </td>
             <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'item_section')}">{{ rowData.item_section }}</td>
             <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'item_title')}">{{ rowData.item_title }}</td>
             <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'created_at')}">{{ rowData.created_at*1000 | moment:'MMM Do YYYY HH:mm' }}</td>

diff --git a/src/organization/device/detail/incident/device-incident.component.ts b/src/organization/device/detail/incident/device-incident.component.ts
@@ -4,6 +4,7 @@ import { Table } from 'primeng/table';
 import { DeviceIncidentService } from './device-incident.service';
 import { DeviceIncidentItem, DeviceIncidentResponse } from './device-incident.response';
 import { Severity } from 'common/enum';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'device-incident',
@@ -26,7 +27,8 @@ export class DeviceIncidentComponent implements OnInit {
 
     constructor(
         private service: DeviceIncidentService,
-        private renderer: Renderer2
+        private renderer: Renderer2,
+        private router: Router
     ) {
         this.response = null;
         this.totalRecords = 0;
@@ -103,4 +105,12 @@ export class DeviceIncidentComponent implements OnInit {
         return this.service.accountService.severityToString(severity);
     }
 
+    itemSelected(event, item: DeviceIncidentItem) {
+        event.preventDefault();
+
+        let subPath = `/incident/${item.incident_id}`;
+        let url = this.service.accountService.navigateOrganization(subPath);
+        this.router.navigateByUrl(url);
+    }
+
 }
diff --git a/src/organization/device/detail/incident/device-incident.response.ts b/src/organization/device/detail/incident/device-incident.response.ts
@@ -23,6 +23,7 @@ export interface DeviceIncidentItem {
     severity: number;
     effort: number;
     num_devices: number;
+    incident_id: number;
 }
 
 export interface DeviceIncidentResponse extends BasicListResponse {

diff --git a/src/organization/incident/incident_devices.component.html b/src/organization/incident/incident_devices.component.html
@@ -36,7 +36,7 @@ <h1 class="panel-title">
                         <ng-template pTemplate="body" let-rowData let-columns="columns">
                             <tr id="item-{{ rowData.id }}" class="table-row" [ngClass]="{'disabled': rowData.archived}">
                                 <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('device')}"><a href="#" (click)="itemSelectedDevice($event, rowData)">{{rowData.device_hostname}}</a></td>
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('profile')}">{{rowData.profile_title}}</td>
                             </tr>
                         </ng-template>

diff --git a/src/organization/incident/incident_devices.component.ts b/src/organization/incident/incident_devices.component.ts
@@ -168,6 +168,20 @@ export class IncidentDevicesComponent implements OnInit {
         });
     }
 
+    itemSelectedDevice(event, item: IncidentListItem) {
+        event.preventDefault();
+        this.highlightOffStream.emit();
+        this.selectedScrollPos = this.ptable.getScrollPosition();
+        new Promise((resolve) => {
+            this.location.replaceState(this.location.path().split('?')[0] + '?id=' + item.device_id);
+            resolve();
+        }).then(() => {
+            let subPath = `/device/${item.device_id}`;
+            let url = this.service.accountService.navigateOrganization(subPath);
+            this.router.navigateByUrl(url);
+        });
+    }
+
     sortingChanged(event) {
         if (event.multiSortMeta != null && event.multiSortMeta.length > 0 && !isEqual(this.multiSortMeta, event.multiSortMeta)) {
             var sortItems: Array<ColumnWithSort> = event.multiSortMeta;

diff --git a/src/organization/incident/incident_response.ts b/src/organization/incident/incident_response.ts
@@ -20,6 +20,7 @@ export interface IncidentListItem {
     severity: number;
     effort: number;
     num_devices: number;
+    device_id: number;
 }
 
 export interface IncidentDetailResponse {