Merge pull request primefaces#521 from atretyak1985/issue_#NNTR-530

Fix the error that appears in the console log on the page "Activity l…
Nanitor · May 5, 2020 · 69f39c4 · 69f39c4
2 parents c39147f + 0140d94
commit 69f39c4
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 52 deletions.
diff --git a/src/organization/activity_log/activity_log_list.component.html b/src/organization/activity_log/activity_log_list.component.html
@@ -56,15 +56,15 @@
             <div class="panel-heading">
                 <h1 class="panel-title">Activity log
                     <button class="btn btn-sm btn-primary pull-right" (click)="refresh(false)" id="refresh-button" title="Refresh"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-sm btn-primary pull-right" (click)="chooseExportCSVParams()" id="export-button" title="Export as CSV"><i class="fa fa-upload"></i></button>
+                    <button class="btn btn-sm btn-primary pull-right" (click)="clickOpenExportDialog()" id="export-button" title="Export as CSV"><i class="fa fa-upload"></i></button>
                 </h1>
             </div>
             <div class="panel-body">
-                <div class="no-data" *ngIf="totalRecords === 0">
+                <div class="no-data" *ngIf="emptyResponse">
                     <p>There is currently nothing to display.</p>
                 </div>
 
-                <div *ngIf="totalRecords > 0">
+                <div *ngIf="!emptyResponse">
                     <p-table #ptable class="p-table" [columns]="cols" [value]="items" [lazy]="true" (onLazyLoad)="sortingChanged($event)" [paginator]="true" 
                         [rows]="ROWS" [totalRecords]="totalRecords" scrollable="true" [scrollHeight]="window.innerHeight - HEADER_HEIGHT + 'px'" [customSort]="true" sortMode="multiple"
                         [style]="{width: window.innerWidth - (filterPanel.isCollapsed ? LIST_BASE_PADDING : LIST_BASE_PADDING + FILTER_WIDTH) + 'px'}"
@@ -84,7 +84,7 @@ <h1 class="panel-title">Activity log
                             </tr>
                         </ng-template>
                         <ng-template pTemplate="body" let-rowData let-columns="columns">
-                            <tr #row id="item-{{ rowData.id }}" class="table-row" [ngClass]="{'flash-row': flashRow && row.id === 'item-' + selectedId }">
+                            <tr #row id="item-{{ rowData.id }}" class="table-row" [ngClass]="{'flash-row': flashRow && row.id === 'item-' + selectedItemId }">
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('time')}">
                                     {{ rowData.time*1000 | moment:"MMM Do YYYY HH:mm" }}
                                 </td>
@@ -121,22 +121,8 @@ <h2>{{ rowData.event_name }}</h2>
     </div>
 </div>
 
-<div id="export-csv-modal" class="modal fade" role="dialog" tabindex="-1">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2 class="modal-title">Export activity log</h2>
-            </div>
-            <div class="modal-body" style="padding:40px 0; background-color: #ffffff">
-                <div class="customize-column-dropdown">
-                    <label for="limit" style="margin-left: 0;">Limit</label>
-                    <p-dropdown [options]="exportLimitOptions" [(ngModel)]="itemExportForm.limit"></p-dropdown>             
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" href="#" data-dismiss="modal" class="btn btn-default btn-lg btn-lg-width">Cancel</button>
-                <button type="button" class="btn btn-lg btn-success btn-lg-width" (click)="exportCSV()">Export CSV</button>
-            </div>
-        </div>
-    </div>
-</div>
+<export-csv-dialog 
+    [headerText]="'Export activity log'"
+    [limit]='200'
+    (onExportCSV)="exportCSV($event)">
+</export-csv-dialog>
diff --git a/src/organization/activity_log/activity_log_list.component.ts b/src/organization/activity_log/activity_log_list.component.ts
@@ -1,9 +1,10 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, ViewChild } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
 import { ActivityLogService } from './activity_log.service';
-import { RequestExportForm } from './activity_log_response';
+import { ActivityLogItem } from './activity_log_response';
 import * as FileSaver from 'file-saver';
 import { MomentPipe } from 'pipes/moment.pipe';
+import { ExportCSVDialogComponent } from 'common/modal_dialog/export_csv_dialog.component';
 
 
 @Component({
@@ -15,10 +16,10 @@ import { MomentPipe } from 'pipes/moment.pipe';
 })
 
 export class ActivityLogListComponent extends BaseList {
-    public itemExportForm: RequestExportForm;
-    public exportLimitOptions: any;
+    @ViewChild(ExportCSVDialogComponent, { static: true }) exportCSVDialog: ExportCSVDialogComponent;
     public datepickerMaxDate: Date;
     private itemsDateLog = ['last_updated', 'last_activity_at', 'created_at'];
+    public selectedItemId: number;
 
     constructor(
         service: ActivityLogService,
@@ -29,8 +30,8 @@ export class ActivityLogListComponent extends BaseList {
         this.HEADER_HEIGHT = 310;
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
-        this.itemExportForm = {} as RequestExportForm;
         this.datepickerMaxDate = new Date();
+        this.selectedItemId = null;
     }
 
     ngOnInit() {
@@ -40,26 +41,31 @@ export class ActivityLogListComponent extends BaseList {
             { field: 'time', header: 'Time', order: 0, width: '180px', disabled: false },
             { field: 'event_type', header: 'Event type', order: 0, width: '140px', disabled: false },
             { field: 'event_trigger', header: 'Triggered by', order: 0, width: '140px', disabled: false },
-            { field: 'event_name', header: 'Event details', order: 0 , width: '370px', disabled: false },
-            { field: 'severity', header: 'Severity', order: 0 , width: '140px', disabled: false },
-            { field: 'hostname', header: 'Hostname', order: 0 , width: '140px', disabled: false },
-            { field: 'address', header: 'IP', order: 0 , width: '140px', disabled: false },
+            { field: 'event_name', header: 'Event details', order: 0, width: '370px', disabled: false },
+            { field: 'severity', header: 'Severity', order: 0, width: '140px', disabled: false },
+            { field: 'hostname', header: 'Hostname', order: 0, width: '140px', disabled: false },
+            { field: 'address', header: 'IP', order: 0, width: '140px', disabled: false },
         ];
+    }
 
-        this.exportLimitOptions = [
-            { label: '50', value: 50 },
-            { label: '200', value: 200 },
-            { label: '1000', value: 1000 },
-            { label: '5000', value: 5000 },
-            { label: '10000', value: 10000 }
-        ];
+    refresh(clearTotalRecords: boolean) {
+        this.selectedItemId = null;
+        super.refresh(clearTotalRecords);
     }
 
-    itemSelected(event, item) {
+    itemSelected(event, item: ActivityLogItem) {
         event.preventDefault();
-        let subPath = `/device/${item.device_id}`;
-        let url = this.service.accountService.navigateOrganization(subPath);
-        this.router.navigateByUrl(url);
+        this.highlightOffStream.emit();
+        this.selectedScrollPos = this.ptable.getScrollPosition();
+        this.selectedItemId = item.id;
+        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);
+        });
     }
 
     clearContextFilter() {
@@ -103,17 +109,14 @@ export class ActivityLogListComponent extends BaseList {
         return 'other';
     }
 
-    chooseExportCSVParams() {
-        this.itemExportForm = {
-            limit: 200
-        } as RequestExportForm;
-        jQuery('#export-csv-modal').modal('show');
+    clickOpenExportDialog() {
+        this.exportCSVDialog.show();
     }
 
-    exportCSV() {
+    exportCSV(limit: number) {
         const filename = 'nanitor_activity_log.csv';
         this.service.spinnerService.setState(true);
-        this.service.getLogInCsv(this.itemExportForm.limit).subscribe(
+        this.service.getLogInCsv(limit).subscribe(
             (blob: Blob) => {
                 FileSaver.saveAs(blob, filename);
                 this.service.spinnerService.setState(false);
@@ -123,5 +126,6 @@ export class ActivityLogListComponent extends BaseList {
                 this.flashService.addItemFromStatus(400, 'Failed to export CSV', true);
             }
         );
+        this.exportCSVDialog.hide();
     }
 }
diff --git a/src/organization/activity_log/activity_log_response.ts b/src/organization/activity_log/activity_log_response.ts
@@ -1,3 +1,21 @@
-export interface RequestExportForm {
-    limit: number;
+import { BasicListResponse } from 'common/response';
+
+
+export interface ActivityLogListResponse extends BasicListResponse {
+    items: Array<ActivityLogItem>;
+}
+
+export interface ActivityLogItem {
+    id: number;
+    time: number;
+    event_type: string;
+    event_trigger: string;
+    event_name: string;
+    event_data: Object;
+    severity: number;
+    hostname: string;
+    address: string;
+    message: string;
+    device_id: number;
+    user_id: number;
 }