From 1533284073290efae6cd2279310a5f346988bc0d Mon Sep 17 00:00:00 2001
From: Andriy Tretyak <atretyak1985@gmail.com>
Date: Wed, 1 Apr 2020 10:11:41 +0300
Subject: [PATCH 1/4] Switch framework UI

---
 .../confirm_dialog.component.html             |  0
 .../confirm_dialog.component.ts               |  0
 .../export_csv_dialog.component.html}         |  6 +-
 .../export_csv_dialog.component.ts            | 46 ++++++++++++
 src/common/nancommon.module.ts                | 33 +++++----
 .../software_tab/software.component.ts        |  2 +-
 .../device/device_detail.component.ts         | 10 +--
 .../device/device_list.component.html         | 12 ++-
 .../device/device_list.component.ts           | 32 ++++++--
 src/organization/device/device_response.ts    |  4 -
 .../device_export_dialog.component.ts         | 60 ---------------
 ...ce_exclude_exception_dialog.component.html |  0
 ...vice_exclude_exception_dialog.component.ts |  0
 .../device_label_dialog.component.html        |  0
 .../device_label_dialog.component.ts          |  0
 ...ice_remove_exception_dialog.component.html |  0
 ...evice_remove_exception_dialog.component.ts |  0
 .../pdf_report_dialog.component.html          |  0
 .../pdf_report_dialog.component.ts            |  0
 .../request_rechecks_dialog.component.html    |  0
 .../request_rechecks_dialog.component.ts      |  0
 .../apply_label_dialog.component.html         |  0
 .../apply_label_dialog.component.ts           |  0
 .../device_columns_dialog.component.html      |  0
 .../device_columns_dialog.component.ts        |  0
 .../device_upgrade_dialog.component.html      |  0
 .../device_upgrade_dialog.component.ts        |  5 +-
 .../issue/issue-compliance.service.ts         | 22 ++++++
 .../issue/issue_compliance.component.html     | 52 +++++++------
 .../issue/issue_compliance.component.ts       | 65 ++++++++++++++--
 .../issue/issue_filter.service.ts             |  4 -
 .../issue/issue_filter_list.component.html    | 34 ++++-----
 .../issue/issue_filter_list.component.ts      | 74 +++++++------------
 .../issue/issue_list.component.html           | 27 ++-----
 .../issue/issue_list.component.ts             | 27 ++-----
 src/organization/issue/issue_response.ts      |  7 ++
 .../switching_framework_dialog.component.html | 20 +++++
 .../switching_framework_dialog.component.ts   | 35 +++++++++
 src/organization/orgnavigator.component.html  |  8 +-
 src/organization/orgnavigator.component.ts    | 16 ++++
 .../whitelisting_state_dialog.component.html  |  0
 .../whitelisting_state_dialog.component.ts    |  0
 .../software/software_detail.component.ts     |  4 +-
 .../software_title_detail.component.ts        |  4 +-
 .../software_vendor_detail.component.ts       |  4 +-
 45 files changed, 364 insertions(+), 249 deletions(-)
 rename src/common/{modal-dialog => modal_dialog}/confirm_dialog.component.html (100%)
 rename src/common/{modal-dialog => modal_dialog}/confirm_dialog.component.ts (100%)
 rename src/{organization/device/modal/device_list/device_export_dialog.component.html => common/modal_dialog/export_csv_dialog.component.html} (78%)
 create mode 100644 src/common/modal_dialog/export_csv_dialog.component.ts
 delete mode 100644 src/organization/device/modal/device_list/device_export_dialog.component.ts
 rename src/organization/device/{modal => modal_dialog}/device_detail/device_exclude_exception_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/device_exclude_exception_dialog.component.ts (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/device_label_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/device_label_dialog.component.ts (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/device_remove_exception_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/device_remove_exception_dialog.component.ts (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/pdf_report_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/pdf_report_dialog.component.ts (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/request_rechecks_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_detail/request_rechecks_dialog.component.ts (100%)
 rename src/organization/device/{modal => modal_dialog}/device_list/apply_label_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_list/apply_label_dialog.component.ts (100%)
 rename src/organization/device/{modal => modal_dialog}/device_list/device_columns_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_list/device_columns_dialog.component.ts (100%)
 rename src/organization/device/{modal => modal_dialog}/device_list/device_upgrade_dialog.component.html (100%)
 rename src/organization/device/{modal => modal_dialog}/device_list/device_upgrade_dialog.component.ts (96%)
 create mode 100644 src/organization/issue/modal_dialog/switching_framework_dialog.component.html
 create mode 100644 src/organization/issue/modal_dialog/switching_framework_dialog.component.ts
 rename src/organization/software/{table/dialog => modal_dialog}/whitelisting_state_dialog.component.html (100%)
 rename src/organization/software/{table/dialog => modal_dialog}/whitelisting_state_dialog.component.ts (100%)

diff --git a/src/common/modal-dialog/confirm_dialog.component.html b/src/common/modal_dialog/confirm_dialog.component.html
similarity index 100%
rename from src/common/modal-dialog/confirm_dialog.component.html
rename to src/common/modal_dialog/confirm_dialog.component.html
diff --git a/src/common/modal-dialog/confirm_dialog.component.ts b/src/common/modal_dialog/confirm_dialog.component.ts
similarity index 100%
rename from src/common/modal-dialog/confirm_dialog.component.ts
rename to src/common/modal_dialog/confirm_dialog.component.ts
diff --git a/src/organization/device/modal/device_list/device_export_dialog.component.html b/src/common/modal_dialog/export_csv_dialog.component.html
similarity index 78%
rename from src/organization/device/modal/device_list/device_export_dialog.component.html
rename to src/common/modal_dialog/export_csv_dialog.component.html
index 1c2aee43bd2..a7c6dd17123 100644
--- a/src/organization/device/modal/device_list/device_export_dialog.component.html
+++ b/src/common/modal_dialog/export_csv_dialog.component.html
@@ -1,8 +1,8 @@
-<div id="device-export-dialog" class="modal fade" role="dialog" tabindex="-1">
+<div id="export-csv-dialog" class="modal fade" role="dialog" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">Export assets list</h2>
+                <h2 class="modal-title">{{ headerText }}</h2>
             </div>
             <div class="modal-body" style="padding:40px; background-color: #ffffff">
                 <div class="customize-column-dropdown">
@@ -12,7 +12,7 @@ <h2 class="modal-title">Export assets list</h2>
             </div>
             <div class="modal-footer">
                 <button type="button" 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>
+                <button type="button" class="btn btn-lg btn-success btn-lg-width" (click)="exportCSVConfirm()">Export CSV</button>
             </div>
         </div>
     </div>
diff --git a/src/common/modal_dialog/export_csv_dialog.component.ts b/src/common/modal_dialog/export_csv_dialog.component.ts
new file mode 100644
index 00000000000..672cb5453ba
--- /dev/null
+++ b/src/common/modal_dialog/export_csv_dialog.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+
+
+@Component({
+    selector: 'export-csv-dialog',
+    templateUrl: 'export_csv_dialog.component.html'
+})
+
+export class ExportCSVDialogComponent implements OnInit {
+    @Input() headerText: string = 'Dialog';
+    @Input() limit: number = 200;
+    @Output() onExportCSV = new EventEmitter<number>();
+    public itemExportForm: RequestExportForm;
+    public exportLimitOptions: any = [
+        { label: '50', value: 50 },
+        { label: '200', value: 200 },
+        { label: '1000', value: 1000 },
+        { label: '5000', value: 5000 },
+        { label: '10000', value: 10000 }
+    ];
+
+    constructor() { }
+
+    ngOnInit() {
+        this.itemExportForm = {
+            limit: this.limit
+        } as RequestExportForm;
+    }
+
+    show() {
+        this.itemExportForm['limit'] = this.limit;
+        jQuery('#export-csv-dialog').modal('show');
+    }
+
+    hide() {
+        jQuery('#export-csv-dialog').modal('hide');
+    }
+
+    exportCSVConfirm() {
+        this.onExportCSV.emit(this.itemExportForm.limit);
+    }
+}
+
+export interface RequestExportForm {
+    limit: number;
+}
diff --git a/src/common/nancommon.module.ts b/src/common/nancommon.module.ts
index dd118b01df1..900c72259b3 100755
--- a/src/common/nancommon.module.ts
+++ b/src/common/nancommon.module.ts
@@ -30,20 +30,21 @@ import { RatingFilterSectionComponent } from './side_filter/side_filter_section/
 import { SelectButtonModule } from 'primeng/primeng';
 import { TableModule } from 'primeng/table';
 import { AssetTypeFilterComponent } from './filter_pane/asset-type-filter.component';
-import { DeviceLabelDialogComponent } from 'organization/device/modal/device_detail/device_label_dialog.component';
-import { RequestRechecksDialogComponent } from 'organization/device/modal/device_detail/request_rechecks_dialog.component';
-import { PdfReportDialogComponent } from 'organization/device/modal/device_detail/pdf_report_dialog.component';
-import { DeviceExcludeExceptionDialogComponent } from 'organization/device/modal/device_detail/device_exclude_exception_dialog.component';
-import { DeviceRemoveExceptionDialogComponent } from 'organization/device/modal/device_detail/device_remove_exception_dialog.component';
-import { DeviceColumnsDialogComponent } from 'organization/device/modal/device_list/device_columns_dialog.component';
+import { DeviceLabelDialogComponent } from 'organization/device/modal_dialog/device_detail/device_label_dialog.component';
+import { RequestRechecksDialogComponent } from 'organization/device/modal_dialog/device_detail/request_rechecks_dialog.component';
+import { PdfReportDialogComponent } from 'organization/device/modal_dialog/device_detail/pdf_report_dialog.component';
+import { DeviceExcludeExceptionDialogComponent } from 'organization/device/modal_dialog/device_detail/device_exclude_exception_dialog.component';
+import { DeviceRemoveExceptionDialogComponent } from 'organization/device/modal_dialog/device_detail/device_remove_exception_dialog.component';
+import { DeviceColumnsDialogComponent } from 'organization/device/modal_dialog/device_list/device_columns_dialog.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { DeviceUpgradeDialogComponent } from 'organization/device/modal/device_list/device_upgrade_dialog.component';
-import { DeviceExportDialogComponent } from 'organization/device/modal/device_list/device_export_dialog.component';
-import { ApplyLabelDialogComponent } from 'organization/device/modal/device_list/apply_label_dialog.component';
-import { WhitelistingStateDialogComponent } from 'organization/software/table/dialog/whitelisting_state_dialog.component';
-import { ConfirmDialogComponent } from './modal-dialog/confirm_dialog.component';
+import { DeviceUpgradeDialogComponent } from 'organization/device/modal_dialog/device_list/device_upgrade_dialog.component';
+import { ExportCSVDialogComponent } from 'common/modal_dialog/export_csv_dialog.component';
+import { ApplyLabelDialogComponent } from 'organization/device/modal_dialog/device_list/apply_label_dialog.component';
+import { WhitelistingStateDialogComponent } from 'organization/software/modal_dialog/whitelisting_state_dialog.component';
+import { ConfirmDialogComponent } from './modal_dialog/confirm_dialog.component';
 import { WhitelistingFilterComponent } from './filter_pane/whitelisting-filter.component';
 import { RiscFilterSectionComponent } from './side_filter/side_filter_section/risc-filter-section.component';
+import { SwitchingFrameworkDialogComponent } from 'organization/issue/modal_dialog/switching_framework_dialog.component';
 
 
 @NgModule({
@@ -67,7 +68,7 @@ import { RiscFilterSectionComponent } from './side_filter/side_filter_section/ri
         LabelCreateDialogComponent,
         DeviceColumnsDialogComponent,
         DeviceUpgradeDialogComponent,
-        DeviceExportDialogComponent,
+        ExportCSVDialogComponent,
         ApplyLabelDialogComponent,
         OSFilterSectionComponent,
         RatingFilterSectionComponent,
@@ -82,7 +83,8 @@ import { RiscFilterSectionComponent } from './side_filter/side_filter_section/ri
         WhitelistingStateDialogComponent,
         ConfirmDialogComponent,
         WhitelistingFilterComponent,
-        RiscFilterSectionComponent
+        RiscFilterSectionComponent,
+        SwitchingFrameworkDialogComponent
     ],
     imports: [
         // Angular modules
@@ -124,7 +126,7 @@ import { RiscFilterSectionComponent } from './side_filter/side_filter_section/ri
         LabelCreateDialogComponent,
         DeviceColumnsDialogComponent,
         DeviceUpgradeDialogComponent,
-        DeviceExportDialogComponent,
+        ExportCSVDialogComponent,
         ApplyLabelDialogComponent,
         OSFilterSectionComponent,
         RatingFilterSectionComponent,
@@ -139,7 +141,8 @@ import { RiscFilterSectionComponent } from './side_filter/side_filter_section/ri
         WhitelistingStateDialogComponent,
         ConfirmDialogComponent,
         WhitelistingFilterComponent,
-        RiscFilterSectionComponent
+        RiscFilterSectionComponent,
+        SwitchingFrameworkDialogComponent
     ]
 })
 
diff --git a/src/organization/admin/settings/settings_tabs/software_tab/software.component.ts b/src/organization/admin/settings/settings_tabs/software_tab/software.component.ts
index 0817fc3f780..7f17a1eb07c 100644
--- a/src/organization/admin/settings/settings_tabs/software_tab/software.component.ts
+++ b/src/organization/admin/settings/settings_tabs/software_tab/software.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { SettingTabSoftwareService } from './software.service';
 import { BasicResponse } from 'account/basic_response';
-import { ConfirmDialogComponent } from 'common/modal-dialog/confirm_dialog.component';
+import { ConfirmDialogComponent } from 'common/modal_dialog/confirm_dialog.component';
 
 
 @Component({
diff --git a/src/organization/device/device_detail.component.ts b/src/organization/device/device_detail.component.ts
index 3f89241ff5b..559434c7fb2 100755
--- a/src/organization/device/device_detail.component.ts
+++ b/src/organization/device/device_detail.component.ts
@@ -23,11 +23,11 @@ import { DeviceSubnetService } from './detail/subnet/device-subnet.service';
 import { DeviceIssueService } from './detail/issue/device-issue.service';
 import { DeviceIssueComponent } from './detail/issue/device-issue.component';
 import { DeviceActivityLogComponent } from './detail/activity_log/device-activity_log.component';
-import { DeviceLabelDialogComponent } from './modal/device_detail/device_label_dialog.component';
-import { RequestRechecksDialogComponent } from './modal/device_detail/request_rechecks_dialog.component';
-import { PdfReportDialogComponent } from './modal/device_detail/pdf_report_dialog.component';
-import { DeviceExcludeExceptionDialogComponent } from './modal/device_detail/device_exclude_exception_dialog.component';
-import { DeviceRemoveExceptionDialogComponent } from './modal/device_detail/device_remove_exception_dialog.component';
+import { DeviceLabelDialogComponent } from './modal_dialog/device_detail/device_label_dialog.component';
+import { RequestRechecksDialogComponent } from './modal_dialog/device_detail/request_rechecks_dialog.component';
+import { PdfReportDialogComponent } from './modal_dialog/device_detail/pdf_report_dialog.component';
+import { DeviceExcludeExceptionDialogComponent } from './modal_dialog/device_detail/device_exclude_exception_dialog.component';
+import { DeviceRemoveExceptionDialogComponent } from './modal_dialog/device_detail/device_remove_exception_dialog.component';
 
 
 @Component({
diff --git a/src/organization/device/device_list.component.html b/src/organization/device/device_list.component.html
index 32e6345a8c4..d3411d4a908 100755
--- a/src/organization/device/device_list.component.html
+++ b/src/organization/device/device_list.component.html
@@ -179,6 +179,14 @@ <h1 class="panel-title">
     (emitCustomizedColumns)='emitCustomizedColumns($event)'>
 </device-columns-dialog>
 
-<device-export-dialog [selectedItems]='selectedItems' [limit]='200'></device-export-dialog>
+<export-csv-dialog 
+    [headerText]="'Export assets list'"
+    [limit]='200'
+    (onExportCSV)="exportCSV($event)">
+</export-csv-dialog>
 
-<device-upgrade-dialog [selectedItems]='selectedItems' [limit]='10000' (refresh)='refresh()'></device-upgrade-dialog>
+<device-upgrade-dialog 
+    [selectedItems]='selectedItems' 
+    [limit]='10000' 
+    (refresh)='refresh()'>
+</device-upgrade-dialog>
diff --git a/src/organization/device/device_list.component.ts b/src/organization/device/device_list.component.ts
index 52521c1c322..ee3e990b92e 100755
--- a/src/organization/device/device_list.component.ts
+++ b/src/organization/device/device_list.component.ts
@@ -5,10 +5,11 @@ import { DeviceListItem, DeviceListResponse, ApplyLabelListItem } from './device
 import { ColumnWithSort } from 'common/object';
 import { LabelCreateDialogComponent } from 'organization/admin/label/label_create_dialog.component';
 import { BaseDevice } from './base/base_device';
-import { DeviceColumnsDialogComponent } from './modal/device_list/device_columns_dialog.component';
-import { DeviceExportDialogComponent } from './modal/device_list/device_export_dialog.component';
-import { DeviceUpgradeDialogComponent } from './modal/device_list/device_upgrade_dialog.component';
-import { ApplyLabelDialogComponent } from './modal/device_list/apply_label_dialog.component';
+import { DeviceColumnsDialogComponent } from './modal_dialog/device_list/device_columns_dialog.component';
+import { ExportCSVDialogComponent } from '../../common/modal_dialog/export_csv_dialog.component';
+import { DeviceUpgradeDialogComponent } from './modal_dialog/device_list/device_upgrade_dialog.component';
+import { ApplyLabelDialogComponent } from './modal_dialog/device_list/apply_label_dialog.component';
+import * as FileSaver from 'file-saver';
 
 
 @Component({
@@ -22,7 +23,7 @@ import { ApplyLabelDialogComponent } from './modal/device_list/apply_label_dialo
 export class DeviceListComponent extends BaseDevice {
     @ViewChild(LabelCreateDialogComponent, { static: true }) labelCreateDialog: LabelCreateDialogComponent;
     @ViewChild(DeviceColumnsDialogComponent, { static: true }) deviceColumnsDialog: DeviceColumnsDialogComponent;
-    @ViewChild(DeviceExportDialogComponent, { static: true }) deviceExportDialog: DeviceExportDialogComponent;
+    @ViewChild(ExportCSVDialogComponent, { static: true }) exportCSVDialog: ExportCSVDialogComponent;
     @ViewChild(DeviceUpgradeDialogComponent, { static: true }) deviceUpgradeDialog: DeviceUpgradeDialogComponent;
     @ViewChild(ApplyLabelDialogComponent, { static: true }) applyLabelDialog: ApplyLabelDialogComponent;
     public disabledColumns: Object;
@@ -146,7 +147,26 @@ export class DeviceListComponent extends BaseDevice {
     }
 
     clickOpenExportDialog() {
-        this.deviceExportDialog.show();
+        this.exportCSVDialog.show();
+    }
+
+    exportCSV(limit: number) {
+        const selectedItemIds = this.selectedItems.map((item) => {
+            return item.id;
+        });
+        const filename = 'nanitor_device_list.csv';
+        this.service.spinnerService.setState(true);
+        this.service.getDevicesInCsv(selectedItemIds, limit).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);
+            }
+        );
+        this.exportCSVDialog.hide();
     }
 
     emitCustomizedColumns(event) {
diff --git a/src/organization/device/device_response.ts b/src/organization/device/device_response.ts
index e4231e5f9ae..2e6ca9e1c01 100755
--- a/src/organization/device/device_response.ts
+++ b/src/organization/device/device_response.ts
@@ -162,10 +162,6 @@ export interface RequestCheckinForm {
     patches_recheck: boolean;
 }
 
-export interface RequestExportForm {
-    limit: number;
-}
-
 export interface ApplyLabelListItem extends LabelListItem {
     state: any;
 }
diff --git a/src/organization/device/modal/device_list/device_export_dialog.component.ts b/src/organization/device/modal/device_list/device_export_dialog.component.ts
deleted file mode 100644
index 74c5db1c20a..00000000000
--- a/src/organization/device/modal/device_list/device_export_dialog.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { RequestExportForm } from '../../device_response';
-import { DeviceService } from '../../device.service';
-import { SpinnerService } from 'common/spinner/spinner.service';
-import { FlashService } from 'common/flash/flash.service';
-import * as FileSaver from 'file-saver';
-
-
-@Component({
-    selector: 'device-export-dialog',
-    templateUrl: 'device_export_dialog.component.html'
-})
-
-export class DeviceExportDialogComponent implements OnInit {
-    @Input() selectedItems: Array<any>;
-    @Input() limit: number;
-    public itemExportForm: RequestExportForm;
-    public exportLimitOptions: any = [
-        { label: '50', value: 50 },
-        { label: '200', value: 200 },
-        { label: '1000', value: 1000 },
-        { label: '5000', value: 5000 },
-        { label: '10000', value: 10000 }
-    ];
-
-    constructor(
-        private deviceService: DeviceService,
-        private flashService: FlashService,
-        private spinnerService: SpinnerService
-    ) { }
-
-    ngOnInit() {
-        this.itemExportForm = {
-            limit: this.limit
-        } as RequestExportForm;
-    }
-
-    show() {
-        jQuery('#device-export-dialog').modal('show');
-    }
-
-    exportCSV() {
-        const selectedItemIds = this.selectedItems.map((item) => {
-            return item.id;
-        });
-        const filename = 'nanitor_device_list.csv';
-        this.spinnerService.setState(true);
-        this.deviceService.getDevicesInCsv(selectedItemIds, this.itemExportForm.limit).subscribe(
-            (blob: Blob) => {
-                jQuery('#device-export-dialog').modal('hide');
-                FileSaver.saveAs(blob, filename);
-                this.spinnerService.setState(false);
-            },
-            err => {
-                this.spinnerService.setState(false);
-                this.flashService.addItemFromStatus(400, 'Failed to export CSV', true);
-            }
-        );
-    }
-}
diff --git a/src/organization/device/modal/device_detail/device_exclude_exception_dialog.component.html b/src/organization/device/modal_dialog/device_detail/device_exclude_exception_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_detail/device_exclude_exception_dialog.component.html
rename to src/organization/device/modal_dialog/device_detail/device_exclude_exception_dialog.component.html
diff --git a/src/organization/device/modal/device_detail/device_exclude_exception_dialog.component.ts b/src/organization/device/modal_dialog/device_detail/device_exclude_exception_dialog.component.ts
similarity index 100%
rename from src/organization/device/modal/device_detail/device_exclude_exception_dialog.component.ts
rename to src/organization/device/modal_dialog/device_detail/device_exclude_exception_dialog.component.ts
diff --git a/src/organization/device/modal/device_detail/device_label_dialog.component.html b/src/organization/device/modal_dialog/device_detail/device_label_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_detail/device_label_dialog.component.html
rename to src/organization/device/modal_dialog/device_detail/device_label_dialog.component.html
diff --git a/src/organization/device/modal/device_detail/device_label_dialog.component.ts b/src/organization/device/modal_dialog/device_detail/device_label_dialog.component.ts
similarity index 100%
rename from src/organization/device/modal/device_detail/device_label_dialog.component.ts
rename to src/organization/device/modal_dialog/device_detail/device_label_dialog.component.ts
diff --git a/src/organization/device/modal/device_detail/device_remove_exception_dialog.component.html b/src/organization/device/modal_dialog/device_detail/device_remove_exception_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_detail/device_remove_exception_dialog.component.html
rename to src/organization/device/modal_dialog/device_detail/device_remove_exception_dialog.component.html
diff --git a/src/organization/device/modal/device_detail/device_remove_exception_dialog.component.ts b/src/organization/device/modal_dialog/device_detail/device_remove_exception_dialog.component.ts
similarity index 100%
rename from src/organization/device/modal/device_detail/device_remove_exception_dialog.component.ts
rename to src/organization/device/modal_dialog/device_detail/device_remove_exception_dialog.component.ts
diff --git a/src/organization/device/modal/device_detail/pdf_report_dialog.component.html b/src/organization/device/modal_dialog/device_detail/pdf_report_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_detail/pdf_report_dialog.component.html
rename to src/organization/device/modal_dialog/device_detail/pdf_report_dialog.component.html
diff --git a/src/organization/device/modal/device_detail/pdf_report_dialog.component.ts b/src/organization/device/modal_dialog/device_detail/pdf_report_dialog.component.ts
similarity index 100%
rename from src/organization/device/modal/device_detail/pdf_report_dialog.component.ts
rename to src/organization/device/modal_dialog/device_detail/pdf_report_dialog.component.ts
diff --git a/src/organization/device/modal/device_detail/request_rechecks_dialog.component.html b/src/organization/device/modal_dialog/device_detail/request_rechecks_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_detail/request_rechecks_dialog.component.html
rename to src/organization/device/modal_dialog/device_detail/request_rechecks_dialog.component.html
diff --git a/src/organization/device/modal/device_detail/request_rechecks_dialog.component.ts b/src/organization/device/modal_dialog/device_detail/request_rechecks_dialog.component.ts
similarity index 100%
rename from src/organization/device/modal/device_detail/request_rechecks_dialog.component.ts
rename to src/organization/device/modal_dialog/device_detail/request_rechecks_dialog.component.ts
diff --git a/src/organization/device/modal/device_list/apply_label_dialog.component.html b/src/organization/device/modal_dialog/device_list/apply_label_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_list/apply_label_dialog.component.html
rename to src/organization/device/modal_dialog/device_list/apply_label_dialog.component.html
diff --git a/src/organization/device/modal/device_list/apply_label_dialog.component.ts b/src/organization/device/modal_dialog/device_list/apply_label_dialog.component.ts
similarity index 100%
rename from src/organization/device/modal/device_list/apply_label_dialog.component.ts
rename to src/organization/device/modal_dialog/device_list/apply_label_dialog.component.ts
diff --git a/src/organization/device/modal/device_list/device_columns_dialog.component.html b/src/organization/device/modal_dialog/device_list/device_columns_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_list/device_columns_dialog.component.html
rename to src/organization/device/modal_dialog/device_list/device_columns_dialog.component.html
diff --git a/src/organization/device/modal/device_list/device_columns_dialog.component.ts b/src/organization/device/modal_dialog/device_list/device_columns_dialog.component.ts
similarity index 100%
rename from src/organization/device/modal/device_list/device_columns_dialog.component.ts
rename to src/organization/device/modal_dialog/device_list/device_columns_dialog.component.ts
diff --git a/src/organization/device/modal/device_list/device_upgrade_dialog.component.html b/src/organization/device/modal_dialog/device_list/device_upgrade_dialog.component.html
similarity index 100%
rename from src/organization/device/modal/device_list/device_upgrade_dialog.component.html
rename to src/organization/device/modal_dialog/device_list/device_upgrade_dialog.component.html
diff --git a/src/organization/device/modal/device_list/device_upgrade_dialog.component.ts b/src/organization/device/modal_dialog/device_list/device_upgrade_dialog.component.ts
similarity index 96%
rename from src/organization/device/modal/device_list/device_upgrade_dialog.component.ts
rename to src/organization/device/modal_dialog/device_list/device_upgrade_dialog.component.ts
index 34a83307ca8..d7dcd1203c9 100644
--- a/src/organization/device/modal/device_list/device_upgrade_dialog.component.ts
+++ b/src/organization/device/modal_dialog/device_list/device_upgrade_dialog.component.ts
@@ -1,5 +1,4 @@
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { RequestExportForm } from '../../device_response';
 import { BasicResponse } from 'common/response';
 import { DeviceService } from '../../device.service';
 import { AccountService } from 'account/account.service';
@@ -54,3 +53,7 @@ export class DeviceUpgradeDialogComponent implements OnInit {
         );
     }
 }
+
+export interface RequestExportForm {
+    limit: number;
+}
diff --git a/src/organization/issue/issue-compliance.service.ts b/src/organization/issue/issue-compliance.service.ts
index 27e04dea3c7..26ad149603b 100644
--- a/src/organization/issue/issue-compliance.service.ts
+++ b/src/organization/issue/issue-compliance.service.ts
@@ -6,9 +6,18 @@ import { SpinnerService } from 'common/spinner/spinner.service';
 
 @Injectable()
 export class IssueComplianceService extends BaseListService {
+    private _frameworkId: number;
+    public get frameworkId(): number {
+        return this._frameworkId;
+    }
+    public set frameworkId(value: number) {
+        this._frameworkId = value;
+    }
+
     constructor(protected accountService: AccountService, protected spinnerService: SpinnerService) {
         super(accountService, spinnerService);
 
+        this.frameworkId = null;
         this.path = `/organization/${this.accountService.getOrganizationId()}/issue/compliance_list`;
     }
 
@@ -17,4 +26,17 @@ export class IssueComplianceService extends BaseListService {
         data['parent_control_id'] = controlId;
         return this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/issue/compliance_list`, data);
     }
+
+    getRequest(requestPage) {
+        let request = {
+            filters: this.getFilters(),
+            limit: this.requestLimit,
+            sort: this.listSorting,
+            page: requestPage,
+        };
+        if (this.frameworkId !== null) {
+            request['org_framework_id'] = this.frameworkId;
+        }
+        return request;
+    }
 }
diff --git a/src/organization/issue/issue_compliance.component.html b/src/organization/issue/issue_compliance.component.html
index 2cdda5db50a..4e8d41585fc 100644
--- a/src/organization/issue/issue_compliance.component.html
+++ b/src/organization/issue/issue_compliance.component.html
@@ -1,6 +1,7 @@
 <org-navigator></org-navigator>
 
 <div class="flex-container">
+    
     <side-filter #filterPanel (onFilterChange)="updateProfileFilters($event)">
         <context-filter-section #section (clearSectionEvent)="clearFilterAndRefresh()">
             <text-filter (filterChanged)="filterChanged($event)" [model]="service.userFiltersState" key="title" label="Search" placeholder="All Issues"></text-filter>
@@ -13,7 +14,10 @@
         <div class="panel panel-default">
             <div class="panel-heading">
                 <h1 class="panel-title">
-                    Compliance Issue Report
+                    Compliance Issue Report {{ selectedFramework.display_name }}
+                    <button class="btn btn-sm btn-primary" (click)="clickSwitchingFramework()" id="change-framework-button" title="Change Framework">
+                        <i class="fa fa-cogs" aria-hidden="true"></i>
+                    </button>
                     <button class="btn btn-sm btn-primary pull-right" (click)="refresh()" id="refresh-button" title="Refresh">
                         <i class="fa fa-refresh"></i>
                     </button>
@@ -37,12 +41,12 @@ <h1 class="panel-title">
                             (sortFunction)="sortingChanged($event)" (onNodeExpand)="onNodeExpand($event)">
                         <ng-template pTemplate="header" let-columns>
                             <tr class="defence">
-                                <th class="table-header-colspan" [ngStyle]="{'width': getColumnWidth('control_requirement')}" colspan="1"></th>
+                                <th class="table-header-colspan" [ngStyle]="{'width': getColumnWidth('control_name')}" colspan="1"></th>
                                 <th class="table-header-colspan" [ngStyle]="{'width': '240px'}"colspan="3">Issues</th>
                             </tr>
                             <tr class="defence">
                                 <ng-container *ngFor="let col of columns">
-                                    <th *ngIf="col.field === 'control_requirement'" 
+                                    <th *ngIf="col.field === 'control_name'" 
                                         class="table-header-cell"
                                         [ttSortableColumn]="col.field"
                                         [ttSortableColumnDisabled]="col.disabled"
@@ -50,13 +54,13 @@ <h1 class="panel-title">
                                         {{col.header}}
                                         <p-treeTableSortIcon *ngIf="!col.disabled" [field]="col.field"></p-treeTableSortIcon>
                                     </th>
-                                    <th *ngIf="col.field !== 'control_requirement'" 
+                                    <th *ngIf="col.field !== 'control_name'" 
                                         class="table-header-cell" 
                                         [ttSortableColumn]="col.field"
                                         [ttSortableColumnDisabled]="col.disabled"
                                         [ngStyle]="{'width': col.width}">
                                         <div class="text-center">
-                                            <span class="badge" [ngStyle]="{'background': stringUtils.getRISCColor(priorityProps[col.field].score)}">
+                                            <span class="badge" style="padding: 5px 20px;" [ngStyle]="{'background': stringUtils.getRISCColor(priorityProps[col.field].score)}">
                                                 {{col.header}}
                                                 <p-treeTableSortIcon *ngIf="!col.disabled" [field]="col.field"></p-treeTableSortIcon>
                                             </span>
@@ -67,23 +71,23 @@ <h1 class="panel-title">
                         </ng-template>
                         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                             <tr class="table-row">
-                            <ng-container *ngFor="let col of columns; let i = index">
-                                <td *ngIf="col.field === 'control_requirement'" 
-                                    class="table-cell"
-                                    [ngStyle]="{'width': getColumnWidth(col.field)}">
-                                    <div style="display: inline-flex;">
+                                <ng-container *ngFor="let col of columns; let i = index">
+                                    <td *ngIf="col.field === 'control_name'" 
+                                        class="table-cell"
+                                        [ngStyle]="{'width': getColumnWidth(col.field)}">
+                                        <div style="display: inline-flex;">
+                                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
+                                            <span>{{ rowData.control_tid }}.&nbsp;</span>
+                                            <span>{{ rowData[col.field] !== '' ? rowData[col.field] : rowData.control_requirement }}</span>
+                                        </div>
+                                    </td>
+                                    <td *ngIf="col.field !== 'control_name'" 
+                                        class="table-cell text-center"
+                                        [ngStyle]="{'width': getColumnWidth(col.field)}">
                                         <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
-                                        <span>{{ rowData.control_tid }}.&nbsp;</span>
-                                        <span>{{ rowData[col.field] }}</span>
-                                    </div>
-                                </td>
-                                <td *ngIf="col.field !== 'control_requirement'" 
-                                    class="table-cell text-center"
-                                    [ngStyle]="{'width': getColumnWidth(col.field)}">
-                                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
-                                    {{ rowData[col.field] }}
-                                </td>
-                            </ng-container>
+                                        {{ rowData[col.field] }}
+                                    </td>
+                                </ng-container>
                             </tr>
                         </ng-template>
                     </p-treeTable>
@@ -92,3 +96,9 @@ <h1 class="panel-title">
         </div>
     </div>
 </div>
+
+<switching-framework-dialog 
+    [frameworkItems]="frameworkItems"
+    [selectedFramework]="selectedFramework" 
+    (onSwitchingFramework)="onSwitchingFrameworkConfirm($event)">
+</switching-framework-dialog>
diff --git a/src/organization/issue/issue_compliance.component.ts b/src/organization/issue/issue_compliance.component.ts
index 3f02e167d82..450d4b9f185 100644
--- a/src/organization/issue/issue_compliance.component.ts
+++ b/src/organization/issue/issue_compliance.component.ts
@@ -1,7 +1,9 @@
-import { Component, Injector } from '@angular/core';
-import { EventTreeNode, ComplianceIssueListResponse, ComplianceIssueListItem, TreeNode } from './issue_response';
+import { Component, Injector, ViewChild } from '@angular/core';
+import { EventTreeNode, ComplianceIssueListResponse, ComplianceIssueListItem, TreeNode, ComplianceFrameworkItem } from './issue_response';
 import { IssueComplianceService } from './issue-compliance.service';
 import { BaseList } from 'common/list/base-list';
+import { SwitchingFrameworkDialogComponent } from './modal_dialog/switching_framework_dialog.component';
+import { isEqual } from 'lodash';
 
 
 @Component({
@@ -13,12 +15,15 @@ import { BaseList } from 'common/list/base-list';
 })
 
 export class IssueComplianceComponent extends BaseList {
+    @ViewChild(SwitchingFrameworkDialogComponent, { static: true }) switchingFrameworkDialog: SwitchingFrameworkDialogComponent;
     public treeNodeItems: TreeNode[];
+    public frameworkItems: Array<ComplianceFrameworkItem>;
     public priorityProps = {
         num_issues_p0: { score: 100 },
         num_issues_p1: { score: 65 },
         num_issues_p2: { score: 50 }
     };
+    public selectedFramework: ComplianceFrameworkItem;
 
     constructor(
         service: IssueComplianceService,
@@ -30,22 +35,54 @@ export class IssueComplianceComponent extends BaseList {
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
         this.treeNodeItems = [];
+        this.frameworkItems = [];
+        this.selectedFramework = {} as ComplianceFrameworkItem;
     }
 
     ngOnInit() {
         super.ngOnInit();
 
         this.cols = [
-            { field: 'control_requirement', header: 'Requirement/Control', order: 0, width: '480px', disabled: true },
-            { field: 'num_issues_p0', header: 'P0', order: 0, width: '80px', disabled: false },
-            { field: 'num_issues_p1', header: 'P1', order: 0, width: '80px', disabled: false },
-            { field: 'num_issues_p2', header: 'P2', order: 0, width: '80px', disabled: false }
+            { field: 'control_name', header: 'Requirement/Control', order: 0, width: '480px', disabled: true },
+            { field: 'num_issues_p0', header: 'P0', order: 0, width: '80px', disabled: true },
+            { field: 'num_issues_p1', header: 'P1', order: 0, width: '80px', disabled: true },
+            { field: 'num_issues_p2', header: 'P2', order: 0, width: '80px', disabled: true }
         ];
     }
 
     listResponseHandler(response: ComplianceIssueListResponse) {
+        if (response.items && response.items.length > 0) {
+            this.setTreeNodeItems(response.items);
+            this.emptyResponse = false;
+            this.cols[0].header = this.requirementOrControl(response.items);
+        } else {
+            this.treeNodeItems = [];
+            this.emptyResponse = true;
+            this.cols[0].header = 'Requirement/Control';
+        }
+
+        if (response.available_frameworks && response.available_frameworks.length > 0) {
+            this.frameworkItems = response.available_frameworks;
+        } else {
+            this.frameworkItems = [];
+        }
+
+        if (isEqual(this.selectedFramework, {})) {
+            this.selectedFramework = this.getPrimaryFramework(this.frameworkItems) || {} as ComplianceFrameworkItem;
+        }
+    }
+
+    getPrimaryFramework(items: Array<ComplianceFrameworkItem>): ComplianceFrameworkItem {
+        return items.find((item: ComplianceFrameworkItem) => item.is_primary === true);
+    }
+
+    requirementOrControl(items: Array<ComplianceIssueListItem>): string {
+        return items[0].control_uid.indexOf('PCIDSS') === -1 ? 'Control' : 'Requirement';
+    }
+
+    setTreeNodeItems(items: Array<ComplianceIssueListItem>) {
         this.treeNodeItems = [];
-        response.items.forEach((item: ComplianceIssueListItem) => {
+        items.forEach((item: ComplianceIssueListItem) => {
             this.treeNodeItems.push({
                 data: item,
                 children: [],
@@ -63,7 +100,8 @@ export class IssueComplianceComponent extends BaseList {
         this.service.spinnerService.setState(true);
         this.service.getIssueComplianceDetail(controlId).subscribe(
             (data: ComplianceIssueListResponse) => {
-                data.items.forEach((item: ComplianceIssueListItem) => {
+                let items = data.items ? data.items : [];
+                items.forEach((item: ComplianceIssueListItem) => {
                     childNode.push({
                         data: item
                     });
@@ -78,4 +116,15 @@ export class IssueComplianceComponent extends BaseList {
             }
         );
     }
+
+    clickSwitchingFramework() {
+        this.switchingFrameworkDialog.show();
+    }
+
+    onSwitchingFrameworkConfirm(item: ComplianceFrameworkItem) {
+        this.service.frameworkId = item.id;
+        this.selectedFramework = item;
+        this.switchingFrameworkDialog.hide();
+        this.refresh();
+    }
 }
diff --git a/src/organization/issue/issue_filter.service.ts b/src/organization/issue/issue_filter.service.ts
index 144b7034288..26a7c70b09c 100644
--- a/src/organization/issue/issue_filter.service.ts
+++ b/src/organization/issue/issue_filter.service.ts
@@ -13,10 +13,6 @@ export class IssueFilterService extends BaseListService {
         this.path = `/organization/${this.accountService.getOrganizationId()}/issue_filter/list`;
     }
 
-    removeFilter(filterId: number) {
-        return this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/issue_filter_remove`, { filter_id: filterId });
-    }
-
     removeFilters(filterIds: Array<number>) {
         return this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/issue_filter_remove`, { filter_ids: filterIds });
     }
diff --git a/src/organization/issue/issue_filter_list.component.html b/src/organization/issue/issue_filter_list.component.html
index 86bfec0b3ac..50b109cd018 100644
--- a/src/organization/issue/issue_filter_list.component.html
+++ b/src/organization/issue/issue_filter_list.component.html
@@ -15,14 +15,14 @@
             <div class="panel-heading">
                 <h1 class="panel-title">Issue Exclusions
                     <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" (click)="chooseLimitParams()" id="export-button" title="Export as CSV">
+                    <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>
                     <button class="btn btn-sm btn-primary pull-right" (click)="savePdfReport()" id="createPdfReport"
                         title="Create PDF Report"><i class="fa fa-file-pdf-o icon-pdf"></i></button>
                     <button class="btn btn-sm btn-primary pull-right"
                             [class.nanitor-disable]="!selectedItems || selectedItems.length < 1"
-                            (click)="removeFilters($event)"
+                            (click)="clickRemoveFilters($event)"
                             id="remove-exception-button" title="Remove Exclusions">
                         <i class="fa fa-ban"></i>
                     </button>
@@ -102,22 +102,14 @@ <h1 class="panel-title">Issue Exclusions
     </div>
 </div>
 
-<div id="export-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 issue list</h2>
-            </div>
-            <div class="modal-body" style="padding:40px; background-color: #ffffff">
-                <div class="customize-column-dropdown">
-                    <label for="limit">Limit</label>
-                    <p-dropdown [options]="exportLimitOptions" [(ngModel)]="itemExportForm.limit"></p-dropdown>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" 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>
+<confirm-dialog 
+    [headerText]="'Remove Filters'"
+    [bodyText]="'Are you sure you wish to remove these exclusions?'"
+    (onConfirm)="removeFiltersConfirm()">
+</confirm-dialog>
+
+<export-csv-dialog 
+    [headerText]="'Export issue list'"
+    [limit]='200'
+    (onExportCSV)="exportCSV($event)">
+</export-csv-dialog>
diff --git a/src/organization/issue/issue_filter_list.component.ts b/src/organization/issue/issue_filter_list.component.ts
index 858bcbd8cf3..84c7aef8c53 100644
--- a/src/organization/issue/issue_filter_list.component.ts
+++ b/src/organization/issue/issue_filter_list.component.ts
@@ -1,8 +1,9 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, ViewChild } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
 import { IssueFilterService } from './issue_filter.service';
 import * as FileSaver from "file-saver";
-import { RequestExportForm } from "../device/device_response";
+import { ConfirmDialogComponent } from 'common/modal_dialog/confirm_dialog.component';
+import { ExportCSVDialogComponent } from 'common/modal_dialog/export_csv_dialog.component';
 
 
 @Component({
@@ -14,14 +15,8 @@ import { RequestExportForm } from "../device/device_response";
 })
 
 export class IssueFilterListComponent extends BaseList {
-    public itemExportForm: RequestExportForm;
-    public exportLimitOptions: any = [
-        { label: '50', value: 50 },
-        { label: '200', value: 200 },
-        { label: '1000', value: 1000 },
-        { label: '5000', value: 5000 },
-        { label: '10000', value: 10000 }
-    ];
+    @ViewChild(ConfirmDialogComponent, { static: true }) confirmDialog: ConfirmDialogComponent;
+    @ViewChild(ExportCSVDialogComponent, { static: true }) exportCSVDialog: ExportCSVDialogComponent;
     public datepickerMaxDate: Date;
 
     constructor(
@@ -33,7 +28,6 @@ export class IssueFilterListComponent extends BaseList {
         this.HEADER_HEIGHT = 310;
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
-        this.itemExportForm = {} as RequestExportForm;
         this.datepickerMaxDate = new Date();
     }
 
@@ -109,38 +103,25 @@ export class IssueFilterListComponent extends BaseList {
         });
     }
 
-    removeFilter(event, filterId) {
+    clickRemoveFilters(event) {
         event.preventDefault();
-        if (window.confirm("Are you sure you wish to remove this exclusion?")) {
-            this.service.spinnerService.setState(true);
-            this.service.removeFilter(filterId).subscribe(
-                (p: any) => {
-                    this.service.spinnerService.setState(false);
-                    this.refresh();
-                },
-                err => {
-                    this.service.spinnerService.setState(false);
-                    this.service.accountService.handleError(err);
-                }
-            );
-        }
+        this.confirmDialog.show();
     }
 
-    removeFilters(event) {
-        event.preventDefault();
-        if (window.confirm("Are you sure you wish to remove these exclusions?")) {
-            this.service.spinnerService.setState(true);
-            this.service.removeFilters(this.selectedItems.map(item => item.id)).subscribe(
-                (p: any) => {
-                    this.service.spinnerService.setState(false);
-                    this.refresh();
-                },
-                err => {
-                    this.service.spinnerService.setState(false);
-                    this.service.accountService.handleError(err);
-                }
-            );
-        }
+    removeFiltersConfirm() {
+        this.service.spinnerService.setState(true);
+        this.service.removeFilters(this.selectedItems.map(item => item.id)).subscribe(
+            (p: any) => {
+                this.service.spinnerService.setState(false);
+                this.selectedItems = [];
+                this.refresh();
+            },
+            err => {
+                this.service.spinnerService.setState(false);
+                this.service.accountService.handleError(err);
+            }
+        );
+        this.confirmDialog.hide();
     }
 
     markAllItemsSelected(event) {
@@ -157,19 +138,15 @@ export class IssueFilterListComponent extends BaseList {
         }
     }
 
-    chooseLimitParams(isUpgrade: boolean = false) {
-        this.itemExportForm = {
-            limit: 200
-        } as RequestExportForm;
-        jQuery('#export-modal').modal('show');
+    clickOpenExportDialog() {
+        this.exportCSVDialog.show();
     }
 
-    exportCSV() {
+    exportCSV(limit: number) {
         const filename = 'nanitor_issue_exclusion_list.csv';
         this.service.spinnerService.setState(true);
-        this.service.getCsv(this.itemExportForm.limit).subscribe(
+        this.service.getCsv(limit).subscribe(
             (blob: Blob) => {
-                jQuery('#export-modal').modal('hide');
                 FileSaver.saveAs(blob, filename);
                 this.service.spinnerService.setState(false);
             },
@@ -178,6 +155,7 @@ export class IssueFilterListComponent extends BaseList {
                 this.flashService.addItemFromStatus(400, 'Failed to export CSV', true);
             }
         );
+        this.exportCSVDialog.hide();
     }
 
     savePdfReport() {
diff --git a/src/organization/issue/issue_list.component.html b/src/organization/issue/issue_list.component.html
index 24801541349..f2cf87a44a3 100644
--- a/src/organization/issue/issue_list.component.html
+++ b/src/organization/issue/issue_list.component.html
@@ -20,7 +20,7 @@ <h1 class="panel-title">Issues
                     <button class="btn btn-sm btn-primary pull-right" (click)="clickNavigateOnPage('/issue/compliance')" title="Compliance Issue Report">
                         <i class="fa fa-clipboard" aria-hidden="true"></i>
                     </button>
-                    <button class="btn btn-sm btn-primary pull-right" (click)="chooseLimitParams()" id="export-button" title="Export as CSV">
+                    <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>
                     <span class="label label-black pull-right m-r-15" style="color:white; width: auto;">Total: {{ totalRecords }}</span>
@@ -91,23 +91,8 @@ <h1 class="panel-title">Issues
     </div>
 </div>
 
-<div id="export-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 issue list</h2>
-            </div>
-            <div class="modal-body" style="padding:40px; background-color: #ffffff">
-                <div class="customize-column-dropdown">
-                    <label for="limit">Limit</label>
-                    <p-dropdown [options]="exportLimitOptions" [(ngModel)]="itemExportForm.limit"></p-dropdown>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" 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 issue list'"
+    [limit]='200'
+    (onExportCSV)="exportCSV($event)">
+</export-csv-dialog>
diff --git a/src/organization/issue/issue_list.component.ts b/src/organization/issue/issue_list.component.ts
index 3867d2ccb41..cba1b80bd1b 100644
--- a/src/organization/issue/issue_list.component.ts
+++ b/src/organization/issue/issue_list.component.ts
@@ -1,9 +1,9 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, ViewChild } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
 import { IssueService } from './issue.service';
 import * as FileSaver from "file-saver";
-import { RequestExportForm } from "../device/device_response";
 import { ColumnWithSort } from 'common/object';
+import { ExportCSVDialogComponent } from 'common/modal_dialog/export_csv_dialog.component';
 
 
 @Component({
@@ -15,15 +15,8 @@ import { ColumnWithSort } from 'common/object';
 })
 
 export class IssueListComponent extends BaseList {
+    @ViewChild(ExportCSVDialogComponent, { static: true }) exportCSVDialog: ExportCSVDialogComponent;
     public riscSummary: any;
-    public itemExportForm: RequestExportForm;
-    public exportLimitOptions: any = [
-        { label: '50', value: 50 },
-        { label: '200', value: 200 },
-        { label: '1000', value: 1000 },
-        { label: '5000', value: 5000 },
-        { label: '10000', value: 10000 }
-    ];
     public issueRiscColumn: Array<ColumnWithSort> = [
         { field: 'risc_rating_c', header: 'C', tooltip: 'Confidentiality', order: 0, width: '50px', disabled: false },
         { field: 'risc_rating_i', header: 'I', tooltip: 'Integrity', order: 0, width: '50px', disabled: false },
@@ -40,7 +33,6 @@ export class IssueListComponent extends BaseList {
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
         this.isAlwaysUpdated = false;
-        this.itemExportForm = {} as RequestExportForm;
     }
 
     ngOnInit() {
@@ -115,19 +107,15 @@ export class IssueListComponent extends BaseList {
         });
     }
 
-    chooseLimitParams(isUpgrade: boolean = false) {
-        this.itemExportForm = {
-            limit: 200
-        } as RequestExportForm;
-        jQuery('#export-modal').modal('show');
+    clickOpenExportDialog() {
+        this.exportCSVDialog.show();
     }
 
-    exportCSV() {
+    exportCSV(limit: number) {
         const filename = 'nanitor_issue_list.csv';
         this.service.spinnerService.setState(true);
-        this.service.getIssuesInCsv(this.itemExportForm.limit).subscribe(
+        this.service.getIssuesInCsv(limit).subscribe(
             (blob: Blob) => {
-                jQuery('#export-modal').modal('hide');
                 FileSaver.saveAs(blob, filename);
                 this.service.spinnerService.setState(false);
             },
@@ -136,5 +124,6 @@ export class IssueListComponent extends BaseList {
                 this.flashService.addItemFromStatus(400, 'Failed to export CSV', true);
             }
         );
+        this.exportCSVDialog.hide();
     }
 }
diff --git a/src/organization/issue/issue_response.ts b/src/organization/issue/issue_response.ts
index 0a4e287de9a..2b8513d6473 100644
--- a/src/organization/issue/issue_response.ts
+++ b/src/organization/issue/issue_response.ts
@@ -47,6 +47,7 @@ export interface IssueDetailItem {
 
 export interface ComplianceIssueListResponse extends BasicListResponse {
     items: Array<ComplianceIssueListItem>;
+    available_frameworks: Array<ComplianceFrameworkItem>;
 }
 
 export interface ComplianceIssueListItem {
@@ -112,3 +113,9 @@ export interface IssueBenchmarkListItem {
     effort: number;
     num_devices: number;
 }
+
+export interface ComplianceFrameworkItem {
+    id: number;
+    display_name: string;
+    is_primary: boolean;
+}
diff --git a/src/organization/issue/modal_dialog/switching_framework_dialog.component.html b/src/organization/issue/modal_dialog/switching_framework_dialog.component.html
new file mode 100644
index 00000000000..a192af4e0d0
--- /dev/null
+++ b/src/organization/issue/modal_dialog/switching_framework_dialog.component.html
@@ -0,0 +1,20 @@
+<div id="switching-framework-dialog" class="modal fade" role="dialog" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Change Framework</h2>
+            </div>
+            <div class="modal-body" style="padding:40px; background-color: #ffffff">
+                <div class="customize-column-dropdown">
+                    <label for="limit">Frameworks</label>
+                    <p-dropdown [options]="frameworkItems" [(ngModel)]="selectedFramework" optionLabel="display_name" placeholder="Choose"></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" [disabled]="!isValidated()" (click)="switchingFrameworkConfirm()">Confirm</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/organization/issue/modal_dialog/switching_framework_dialog.component.ts b/src/organization/issue/modal_dialog/switching_framework_dialog.component.ts
new file mode 100644
index 00000000000..8233bdbef99
--- /dev/null
+++ b/src/organization/issue/modal_dialog/switching_framework_dialog.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ComplianceFrameworkItem } from '../issue_response';
+import { isEqual } from 'lodash';
+
+
+@Component({
+    selector: 'switching-framework-dialog',
+    templateUrl: 'switching_framework_dialog.component.html'
+})
+
+export class SwitchingFrameworkDialogComponent {
+    @Input() frameworkItems: Array<ComplianceFrameworkItem> = [];
+    @Input() selectedFramework: ComplianceFrameworkItem = {} as ComplianceFrameworkItem;
+    @Output() onSwitchingFramework = new EventEmitter<ComplianceFrameworkItem>();
+    private currentFramework: ComplianceFrameworkItem;
+
+    constructor() {}
+
+    show() {
+        this.currentFramework = this.selectedFramework;
+        jQuery('#switching-framework-dialog').modal('show');
+    }
+
+    hide() {
+        jQuery('#switching-framework-dialog').modal('hide');
+    }
+
+    switchingFrameworkConfirm() {
+        this.onSwitchingFramework.emit(this.selectedFramework);
+    }
+
+    isValidated(): boolean {
+        return !isEqual(this.currentFramework, this.selectedFramework);
+    }
+}
diff --git a/src/organization/orgnavigator.component.html b/src/organization/orgnavigator.component.html
index c586d8520d6..39a14163fca 100644
--- a/src/organization/orgnavigator.component.html
+++ b/src/organization/orgnavigator.component.html
@@ -35,15 +35,15 @@
                 </ul>
                 <nav *ngIf="!expiredLicense && mainNavbarEnabled" id="mobile-nav" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav navbar-left main-nav">
-                        <li [class.active]="isRouteActive('/compliance_report') || isRouteActive('/dashboard') || isRouteActive('/change')">
+                        <li [class.active]="isRoutesActive(CONFIGURATIONS_ROUTE_PATHS)">
                             <a href="" [routerLink]='[getRoutePath("/compliance_report")]'>CONFIGURATIONS</a><span class="runner"></span>
                         </li>
-                        <li [class.active]="isRouteActive('/issue/compliance') || isRouteActive('/issue/dashboard') || isRouteActive('/issue')">
+                        <li [class.active]="isRoutesActive(ISSUES_ROUTE_PATHS)">
                             <a href="" [routerLink]='[getRoutePath("/issue/dashboard")]'>ISSUES</a><span class="runner"></span>
                         </li>
                         <ng-container>
                                <ng-container *ngIf="isScreenWidthMore(1120)">
-                                    <li class="dropdown" [class.active]="isRouteActive('/loggedinusers') || isRouteActive('/device') || isRouteActive('/software') || isRouteActive('/grouppolicy')">
+                                    <li class="dropdown" [class.active]="isRoutesActive(INVENTORY_ROUTE_PATHS)">
                                         <a class="dropdown-toggle" data-toggle="dropdown" href="">INVENTORY<span class="caret"></span></a>
                                         <span class="runner"></span>
                                         <ul class="dropdown-menu" style="margin-top: -20px;">
@@ -75,7 +75,7 @@
                         </ng-container>
                         <ng-container>
                             <ng-container *ngIf="isScreenWidthMore(1240)">
-                                <li class="dropdown" [class.active]="isRouteActive('/intelligence') || isRouteActive('/compliance_framework')">
+                                <li class="dropdown" [class.active]="isRoutesActive(REPORTS_ROUTE_PATHS)">
                                     <a class="dropdown-toggle" data-toggle="dropdown" href="">REPORTS<span class="caret"></span></a>
                                     <span class="runner"></span>
                                     <ul class="dropdown-menu" style="margin-top: -20px;">
diff --git a/src/organization/orgnavigator.component.ts b/src/organization/orgnavigator.component.ts
index a9170b6b2e1..7ce19e5e468 100755
--- a/src/organization/orgnavigator.component.ts
+++ b/src/organization/orgnavigator.component.ts
@@ -41,6 +41,10 @@ export class OrgNavigatorComponent {
         { path: '/intelligence', width: 1240 },
         { path: '/activity_log', width: 1320 }
     ];
+    public INVENTORY_ROUTE_PATHS: string[] = ['/loggedinusers', '/device', '/software', '/grouppolicy', '/subnet'];
+    public REPORTS_ROUTE_PATHS: string[] = ['/intelligence', '/compliance_framework', '/issue_filter'];
+    public ISSUES_ROUTE_PATHS: string[] = ['/issue/compliance', '/issue/dashboard', '/issue'];
+    public CONFIGURATIONS_ROUTE_PATHS: string[] = ['/compliance_report', '/dashboard', '/change'];
 
     constructor(
         private accountService: AccountService,
@@ -154,6 +158,18 @@ export class OrgNavigatorComponent {
         return currentUrl === startUrl;
     }
 
+    isRoutesActive(subPaths: string[]): boolean {
+        let value: boolean = false;
+        let currentUrl = this.location.path().split('?')[0];
+        subPaths.forEach((path: string) => {
+            let startUrl = this.accountService.navigateOrganization(path);
+            if (currentUrl === startUrl) {
+                value = true;
+            }
+        });
+        return value;
+    }
+
     showProfile(e) {
         e.preventDefault();
         this.profileUpdateDialog.refresh();
diff --git a/src/organization/software/table/dialog/whitelisting_state_dialog.component.html b/src/organization/software/modal_dialog/whitelisting_state_dialog.component.html
similarity index 100%
rename from src/organization/software/table/dialog/whitelisting_state_dialog.component.html
rename to src/organization/software/modal_dialog/whitelisting_state_dialog.component.html
diff --git a/src/organization/software/table/dialog/whitelisting_state_dialog.component.ts b/src/organization/software/modal_dialog/whitelisting_state_dialog.component.ts
similarity index 100%
rename from src/organization/software/table/dialog/whitelisting_state_dialog.component.ts
rename to src/organization/software/modal_dialog/whitelisting_state_dialog.component.ts
diff --git a/src/organization/software/software_detail.component.ts b/src/organization/software/software_detail.component.ts
index 2b44c1d5e1e..078899287f3 100755
--- a/src/organization/software/software_detail.component.ts
+++ b/src/organization/software/software_detail.component.ts
@@ -10,9 +10,9 @@ import { Breadcrumb } from '../../common/breadcrumb/breadcrumb.model';
 import { BaseList } from 'common/list/base-list';
 import { SoftwareDetailService } from './software-detail.service';
 import { ColumnWithSort } from 'common/object';
-import { ConfirmDialogComponent } from 'common/modal-dialog/confirm_dialog.component';
+import { ConfirmDialogComponent } from 'common/modal_dialog/confirm_dialog.component';
 import { BasicResponse } from 'common/response';
-import { WhitelistingStateDialogComponent } from './table/dialog/whitelisting_state_dialog.component';
+import { WhitelistingStateDialogComponent } from './modal_dialog/whitelisting_state_dialog.component';
 
 
 @Component({
diff --git a/src/organization/software/software_title_detail.component.ts b/src/organization/software/software_title_detail.component.ts
index d54a1daa78f..d9f007554bc 100644
--- a/src/organization/software/software_title_detail.component.ts
+++ b/src/organization/software/software_title_detail.component.ts
@@ -8,10 +8,10 @@ import {
 } from './software_response';
 import { Breadcrumb } from '../../common/breadcrumb/breadcrumb.model';
 import { BaseList } from 'common/list/base-list';
-import { WhitelistingStateDialogComponent } from './table/dialog/whitelisting_state_dialog.component';
+import { WhitelistingStateDialogComponent } from './modal_dialog/whitelisting_state_dialog.component';
 import { BasicResponse } from 'common/response';
 import { SoftwareTitleDetailService } from './software-title-detail.service';
-import { ConfirmDialogComponent } from 'common/modal-dialog/confirm_dialog.component';
+import { ConfirmDialogComponent } from 'common/modal_dialog/confirm_dialog.component';
 import { TableSoftwareListComponent } from './table/table_software_list.component';
 
 
diff --git a/src/organization/software/software_vendor_detail.component.ts b/src/organization/software/software_vendor_detail.component.ts
index cc71e63ee3e..939134cc863 100644
--- a/src/organization/software/software_vendor_detail.component.ts
+++ b/src/organization/software/software_vendor_detail.component.ts
@@ -9,9 +9,9 @@ import {
 import { Breadcrumb } from '../../common/breadcrumb/breadcrumb.model';
 import { BaseList } from 'common/list/base-list';
 import { SoftwareVendorDetailService } from './software-vendor-detail.service';
-import { WhitelistingStateDialogComponent } from './table/dialog/whitelisting_state_dialog.component';
+import { WhitelistingStateDialogComponent } from './modal_dialog/whitelisting_state_dialog.component';
 import { BasicResponse } from 'common/response';
-import { ConfirmDialogComponent } from 'common/modal-dialog/confirm_dialog.component';
+import { ConfirmDialogComponent } from 'common/modal_dialog/confirm_dialog.component';
 import { TableSoftwareTitleComponent } from './table/table_software_title.component';
 
 

From 61c443bad41f6f4551a83bf8e02140e80ffd1a01 Mon Sep 17 00:00:00 2001
From: Andriy Tretyak <atretyak1985@gmail.com>
Date: Wed, 1 Apr 2020 10:36:07 +0300
Subject: [PATCH 2/4] Switch framework UI

---
 .../issue/issue_compliance.component.ts            | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/organization/issue/issue_compliance.component.ts b/src/organization/issue/issue_compliance.component.ts
index 450d4b9f185..c42381a3dd1 100644
--- a/src/organization/issue/issue_compliance.component.ts
+++ b/src/organization/issue/issue_compliance.component.ts
@@ -4,6 +4,7 @@ import { IssueComplianceService } from './issue-compliance.service';
 import { BaseList } from 'common/list/base-list';
 import { SwitchingFrameworkDialogComponent } from './modal_dialog/switching_framework_dialog.component';
 import { isEqual } from 'lodash';
+import { ColumnWithSort } from 'common/object';
 
 
 @Component({
@@ -51,14 +52,19 @@ export class IssueComplianceComponent extends BaseList {
     }
 
     listResponseHandler(response: ComplianceIssueListResponse) {
+        let index = this.findIndexColumn('control_name');
         if (response.items && response.items.length > 0) {
             this.setTreeNodeItems(response.items);
             this.emptyResponse = false;
-            this.cols[0].header = this.requirementOrControl(response.items);
+            if (index !== -1) {
+                this.cols[index].header = this.requirementOrControl(response.items);
+            }
         } else {
             this.treeNodeItems = [];
             this.emptyResponse = true;
-            this.cols[0].header = 'Requirement/Control';
+            if (index !== -1) {
+                this.cols[index].header = 'Requirement/Control';
+            }
         }
 
         if (response.available_frameworks && response.available_frameworks.length > 0) {
@@ -72,6 +78,10 @@ export class IssueComplianceComponent extends BaseList {
         }
     }
 
+    findIndexColumn(field: string): number {
+        return this.cols.findIndex((col: ColumnWithSort) => col.field === field);
+    }
+
     getPrimaryFramework(items: Array<ComplianceFrameworkItem>): ComplianceFrameworkItem {
         return items.find((item: ComplianceFrameworkItem) => item.is_primary === true);
     }

From 55b85623686fc4deb77ac618dcbb6cfb45fb4feb Mon Sep 17 00:00:00 2001
From: Andriy Tretyak <atretyak1985@gmail.com>
Date: Wed, 1 Apr 2020 13:09:44 +0300
Subject: [PATCH 3/4] Switch framework UI

---
 .../issue/issue_compliance.component.html     |  2 +-
 .../issue/issue_compliance.component.ts       | 55 ++++++++-----------
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/src/organization/issue/issue_compliance.component.html b/src/organization/issue/issue_compliance.component.html
index 4e8d41585fc..cf230d24899 100644
--- a/src/organization/issue/issue_compliance.component.html
+++ b/src/organization/issue/issue_compliance.component.html
@@ -51,7 +51,7 @@ <h1 class="panel-title">
                                         [ttSortableColumn]="col.field"
                                         [ttSortableColumnDisabled]="col.disabled"
                                         [ngStyle]="{'width': getColumnWidth(col.field)}">
-                                        {{col.header}}
+                                        {{ requirementOrControl() }}
                                         <p-treeTableSortIcon *ngIf="!col.disabled" [field]="col.field"></p-treeTableSortIcon>
                                     </th>
                                     <th *ngIf="col.field !== 'control_name'" 
diff --git a/src/organization/issue/issue_compliance.component.ts b/src/organization/issue/issue_compliance.component.ts
index c42381a3dd1..c7535c782d6 100644
--- a/src/organization/issue/issue_compliance.component.ts
+++ b/src/organization/issue/issue_compliance.component.ts
@@ -52,53 +52,42 @@ export class IssueComplianceComponent extends BaseList {
     }
 
     listResponseHandler(response: ComplianceIssueListResponse) {
-        let index = this.findIndexColumn('control_name');
-        if (response.items && response.items.length > 0) {
-            this.setTreeNodeItems(response.items);
-            this.emptyResponse = false;
-            if (index !== -1) {
-                this.cols[index].header = this.requirementOrControl(response.items);
-            }
-        } else {
-            this.treeNodeItems = [];
-            this.emptyResponse = true;
-            if (index !== -1) {
-                this.cols[index].header = 'Requirement/Control';
-            }
-        }
-
-        if (response.available_frameworks && response.available_frameworks.length > 0) {
-            this.frameworkItems = response.available_frameworks;
-        } else {
-            this.frameworkItems = [];
-        }
-
+        this.response = response || {} as ComplianceIssueListResponse;
+        this.emptyResponse = this.response.items && this.response.items.length > 0 ? false : true;
+        this.setTreeNodeItems(this.response.items || []);
+        this.setFrameworkItems(this.response.available_frameworks || []);
         if (isEqual(this.selectedFramework, {})) {
             this.selectedFramework = this.getPrimaryFramework(this.frameworkItems) || {} as ComplianceFrameworkItem;
         }
     }
 
-    findIndexColumn(field: string): number {
-        return this.cols.findIndex((col: ColumnWithSort) => col.field === field);
-    }
-
     getPrimaryFramework(items: Array<ComplianceFrameworkItem>): ComplianceFrameworkItem {
         return items.find((item: ComplianceFrameworkItem) => item.is_primary === true);
     }
 
-    requirementOrControl(items: Array<ComplianceIssueListItem>): string {
-        return items[0].control_uid.indexOf('PCIDSS') === -1 ? 'Control' : 'Requirement';
+    requirementOrControl(): string {
+        if (this.treeNodeItems && this.treeNodeItems.length > 0) {
+            return this.treeNodeItems[0].data.control_uid.indexOf('PCIDSS') === -1 ? 'Control' : 'Requirement';
+        } else {
+            return 'Requirement/Control';
+        }
+    }
+
+    setFrameworkItems(frameworks: Array<ComplianceFrameworkItem>) {
+        this.frameworkItems = frameworks;
     }
 
     setTreeNodeItems(items: Array<ComplianceIssueListItem>) {
         this.treeNodeItems = [];
-        items.forEach((item: ComplianceIssueListItem) => {
-            this.treeNodeItems.push({
-                data: item,
-                children: [],
-                leaf: false
+        if (items && items.length) {
+            items.forEach((item: ComplianceIssueListItem) => {
+                this.treeNodeItems.push({
+                    data: item,
+                    children: [],
+                    leaf: false
+                });
             });
-        });
+        }
     }
 
     onNodeExpand(event: EventTreeNode) {

From 0af38a85c64d59f7b97b1b15956ca250c32fd7c1 Mon Sep 17 00:00:00 2001
From: Andriy Tretyak <atretyak1985@gmail.com>
Date: Wed, 1 Apr 2020 13:42:13 +0300
Subject: [PATCH 4/4] Switch framework UI

---
 .../issue/issue_compliance.component.ts         | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/organization/issue/issue_compliance.component.ts b/src/organization/issue/issue_compliance.component.ts
index c7535c782d6..6beb8d1d2fe 100644
--- a/src/organization/issue/issue_compliance.component.ts
+++ b/src/organization/issue/issue_compliance.component.ts
@@ -4,7 +4,6 @@ import { IssueComplianceService } from './issue-compliance.service';
 import { BaseList } from 'common/list/base-list';
 import { SwitchingFrameworkDialogComponent } from './modal_dialog/switching_framework_dialog.component';
 import { isEqual } from 'lodash';
-import { ColumnWithSort } from 'common/object';
 
 
 @Component({
@@ -44,7 +43,7 @@ export class IssueComplianceComponent extends BaseList {
         super.ngOnInit();
 
         this.cols = [
-            { field: 'control_name', header: 'Requirement/Control', order: 0, width: '480px', disabled: true },
+            { field: 'control_name', header: 'Requirement', order: 0, width: '480px', disabled: true },
             { field: 'num_issues_p0', header: 'P0', order: 0, width: '80px', disabled: true },
             { field: 'num_issues_p1', header: 'P1', order: 0, width: '80px', disabled: true },
             { field: 'num_issues_p2', header: 'P2', order: 0, width: '80px', disabled: true }
@@ -54,29 +53,25 @@ export class IssueComplianceComponent extends BaseList {
     listResponseHandler(response: ComplianceIssueListResponse) {
         this.response = response || {} as ComplianceIssueListResponse;
         this.emptyResponse = this.response.items && this.response.items.length > 0 ? false : true;
-        this.setTreeNodeItems(this.response.items || []);
-        this.setFrameworkItems(this.response.available_frameworks || []);
+        this.setTreeNodeItems(this.response.items);
+        this.frameworkItems = this.response.available_frameworks || [];
         if (isEqual(this.selectedFramework, {})) {
-            this.selectedFramework = this.getPrimaryFramework(this.frameworkItems) || {} as ComplianceFrameworkItem;
+            this.selectedFramework = this.getPrimaryFramework(this.frameworkItems);
         }
     }
 
     getPrimaryFramework(items: Array<ComplianceFrameworkItem>): ComplianceFrameworkItem {
-        return items.find((item: ComplianceFrameworkItem) => item.is_primary === true);
+        return items && items.length > 0 ? items.find((item: ComplianceFrameworkItem) => item.is_primary === true) : {} as ComplianceFrameworkItem;
     }
 
     requirementOrControl(): string {
         if (this.treeNodeItems && this.treeNodeItems.length > 0) {
             return this.treeNodeItems[0].data.control_uid.indexOf('PCIDSS') === -1 ? 'Control' : 'Requirement';
         } else {
-            return 'Requirement/Control';
+            return 'Requirement';
         }
     }
 
-    setFrameworkItems(frameworks: Array<ComplianceFrameworkItem>) {
-        this.frameworkItems = frameworks;
-    }
-
     setTreeNodeItems(items: Array<ComplianceIssueListItem>) {
         this.treeNodeItems = [];
         if (items && items.length) {