Merge pull request primefaces#276 from atretyak1985/issue_#273

Change incident list CSV export to use backend only
Nanitor · Aug 1, 2019 · ef0eab9 · ef0eab9
2 parents e80a5e7 + e286a63
commit ef0eab9
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 4 deletions.
diff --git a/src/assets/less/forms.less b/src/assets/less/forms.less
@@ -1,4 +1,20 @@
 .form-control{
 	height: 48px;
 	border-color: #e4e3e2;
-}
+}
+
+#export-csv-modal .ui-dropdown.ui-widget {
+    height: 20px;
+    margin: 0 0 0 10px;
+    width: auto;
+}
+
+#export-csv-modal .ui-dropdown.ui-widget .ui-inputtext {
+    height: auto;
+    width: auto;
+    font-size: inherit;
+    margin-top: auto;
+	margin-bottom: auto;
+	padding: 0;
+	padding: 0 2.5em 0 0;
+}
diff --git a/src/organization/incident/incident.service.ts b/src/organization/incident/incident.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 import { AccountService } from '../../account/account.service';
 import { SpinnerService } from '../../common/spinner/spinner.service';
 import { BaseListService } from 'common/service/base-list-service';
+import { RequestExportForm } from './incident_response';
+
 
 @Injectable()
 export class IncidentService extends BaseListService {
@@ -11,4 +13,8 @@ export class IncidentService extends BaseListService {
 
         this.path = `/organization/${this.accountService.getOrganizationId()}/incident/list`;
     }
+
+    requestExportCSV(item: RequestExportForm) {
+        return this.accountService.executePostBlob(`/organization/${this.accountService.getOrganizationId()}/incident/export_list`, item);
+    }
 }
diff --git a/src/organization/incident/incident_list.component.html b/src/organization/incident/incident_list.component.html
@@ -26,7 +26,7 @@
             <div class="panel-heading">
                 <h1 class="panel-title">Incidents
                     <button class="btn btn-sm btn-primary pull-right" (click)="refresh()" id="refresh-button" title="Refresh"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-sm btn-primary pull-right" [class.nanitor-disable]="emptyResponse" (click)="clickExportCSV()" id="export-button" title="Export as CSV"><i class="fa fa-upload"></i></button>
+                    <button class="btn btn-sm btn-primary pull-right" [class.nanitor-disable]="emptyResponse" (click)="chooseExportCSVParams()" id="export-button" title="Export as CSV"><i class="fa fa-upload"></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>
@@ -74,4 +74,44 @@ <h1 class="panel-title">Incidents
             </div>
         </div>
     </div>
-</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 Incident list</h2>
+            </div>
+            <div class="modal-body" style="padding:40px 0; background-color: #ffffff">
+                <div style="display: inline-block; text-align: left;">
+                    <ng-container>
+                        <div class="customize-column-item">
+                            <input type="checkbox" [(ngModel)]="itemExportForm.show_description" id="id_show_description" name="show_description"/>
+                            <label for="show_description">Description</label>
+                        </div>
+                        <div class="customize-column-item">
+                            <input type="checkbox" [(ngModel)]="itemExportForm.show_rationale" id="id_show_rationale" name="show_rationale"/>
+                            <label for="show_rationale">Rationale</label>
+                        </div>
+                        <div class="customize-column-item">
+                            <input type="checkbox" [(ngModel)]="itemExportForm.show_remediation" id="id_show_remediation" name="show_remediation"/>
+                            <label for="show_remediation">Remediation</label>
+                        </div>
+                        <div class="customize-column-item">
+                            <input type="checkbox" [(ngModel)]="itemExportForm.show_devices" id="id_show_devices" name="show_devices"/>
+                            <label for="show_devices">Devices</label>
+                        </div>
+                        <div class="customize-column-item">
+                            <label for="limit" style="margin-left: 0;">Limit</label>
+                            <p-dropdown [options]="exportLimitOptions" [(ngModel)]="itemExportForm.limit"></p-dropdown>             
+                        </div>
+                    </ng-container>
+                </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>
diff --git a/src/organization/incident/incident_list.component.ts b/src/organization/incident/incident_list.component.ts
@@ -6,6 +6,8 @@ import { BaseList } from 'common/list/base-list';
 import { AccountService } from 'account/account.service';
 import { BreadcrumbService } from '../../common/breadcrumb/breadcrumb.service';
 import { IncidentService } from './incident.service';
+import { RequestExportForm } from './incident_response';
+import * as FileSaver from 'file-saver';
 
 
 @Component({
@@ -17,6 +19,8 @@ import { IncidentService } from './incident.service';
 })
 
 export class IncidentListComponent extends BaseList implements OnInit, AfterViewInit {
+    public itemExportForm: RequestExportForm;
+    public exportLimitOptions: any;
 
     constructor(
         service: IncidentService,
@@ -34,6 +38,7 @@ export class IncidentListComponent extends BaseList implements OnInit, AfterView
         this.HEADER_HEIGHT = 310;
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
+        this.itemExportForm = {} as RequestExportForm;
     }
 
     ngOnInit() {
@@ -50,6 +55,12 @@ export class IncidentListComponent extends BaseList implements OnInit, AfterView
             { field: 'severity', header: 'Severity', order: 0 , width: '80px', disabled: false },
             { field: 'num_devices', header: 'Devices', order: 0 , width: '80px', disabled: false }
         ];
+
+        this.exportLimitOptions = [
+            { label: '50', value: 50 },
+            { label: '200', value: 200 },
+            { label: '1000', value: 1000 }
+        ];
     }
 
     itemSelected(event, item, isDevices: boolean = false) {
@@ -76,4 +87,26 @@ export class IncidentListComponent extends BaseList implements OnInit, AfterView
         }
         this.refresh();
     }
+
+    chooseExportCSVParams() {
+        this.itemExportForm = {} as RequestExportForm;
+        this.itemExportForm.limit = 200;
+        jQuery('#export-csv-modal').modal('show');
+    }
+
+    exportCSV() {
+        jQuery('#export-csv-modal').modal('hide');
+        const filename = 'nanitor_incident_list.csv';
+        this.service.spinnerService.setState(true);
+        this.service.requestExportCSV(this.itemExportForm).subscribe(
+            (blob: Blob) => {
+                FileSaver.saveAs(blob, filename);
+                this.service.spinnerService.setState(false);
+            },
+            err => {
+                this.service.spinnerService.setState(false);
+                this.flashService.addItemFromStatus(400, 'Failed to export CSV', true);
+            }
+        );
+    }
 }
diff --git a/src/organization/incident/incident_response.ts b/src/organization/incident/incident_response.ts
@@ -63,4 +63,10 @@ export interface IncidentDeviceListItem {
     items: Array<IncidentItemListItem>;
 }
 
-
+export interface RequestExportForm {
+    show_description: boolean;
+    show_rationale: boolean;
+    show_remediation: boolean;
+    show_devices: boolean;
+    limit: number;
+}