From 7d310a5e82a8ff60e3d16be95588d1af1158be5f Mon Sep 17 00:00:00 2001
From: Andriy Tretyak <atretyak1985@gmail.com>
Date: Tue, 12 Mar 2019 18:16:17 +0200
Subject: [PATCH] Filters required in Device Detail -> Vulnerabilities tab #154
 and Filters required in Device Detail -> Software tab #155 and Filters
 required in Device Detail -> Users tab #156 and Filters required in Device
 Detail -> Group Policy Objects tab #157

---
 .../device-group-policy.component.ts          |   6 +-
 .../device-group-policy.service.ts            |  23 +-
 .../incident/device-incident.component.ts     |   3 +-
 .../detail/patch/device-patch.component.ts    |   3 +-
 .../software/device-software.component.ts     |   9 +-
 .../software/device-software.service.ts       |  31 +-
 .../detail/user/device-user.component.ts      |   6 +-
 .../device/detail/user/device-user.service.ts |  23 +-
 .../device-vulnerability.component.ts         |   7 +-
 .../device-vulnerability.service.ts           |  23 +-
 .../device/device_detail.component.html       | 506 ++++++++++--------
 .../device/device_detail.component.ts         | 135 +++--
 .../device/device_list.component.ts           |   4 +-
 .../incident/incident_devices.service.ts      | 160 ++++++
 src/organization/organization.module.ts       |  10 +-
 .../vulnerability_list.component.ts           |   1 +
 16 files changed, 662 insertions(+), 288 deletions(-)
 create mode 100644 src/organization/incident/incident_devices.service.ts

diff --git a/src/organization/device/detail/group-policy/device-group-policy.component.ts b/src/organization/device/detail/group-policy/device-group-policy.component.ts
index 08f1daf249d..2b981db0c72 100755
--- a/src/organization/device/detail/group-policy/device-group-policy.component.ts
+++ b/src/organization/device/detail/group-policy/device-group-policy.component.ts
@@ -7,15 +7,13 @@ import { Router } from '@angular/router';
 
 @Component({
     selector: 'device-group-policy',
-    templateUrl: 'device-group-policy.component.html',
-    providers: [DeviceGroupPolicyService]
+    templateUrl: 'device-group-policy.component.html'
 })
 
 export class DeviceGroupPolicyComponent implements OnInit {
 
     @Input() deviceId;
-    @Input() listHeight;
-
+    @Input() listHeight: string;
     @ViewChild('table') table: Table;
 
     public ROWS: number = 20;
diff --git a/src/organization/device/detail/group-policy/device-group-policy.service.ts b/src/organization/device/detail/group-policy/device-group-policy.service.ts
index 9fdc12eb690..7b29e20ae20 100755
--- a/src/organization/device/detail/group-policy/device-group-policy.service.ts
+++ b/src/organization/device/detail/group-policy/device-group-policy.service.ts
@@ -4,7 +4,8 @@ import { Observable } from 'rxjs';
 import { AccountService } from 'account/account.service';
 import { SpinnerService } from 'common/spinner/spinner.service';
 import { DeviceGroupPolicyRequest, DeviceGroupPolicyResponse, DeviceGroupPolicyItem } from './device-group-policy.response';
-import { map, debounceTime, share } from 'rxjs/operators'; 
+import { share } from 'rxjs/operators'; 
+import { FilterBuilder } from 'common/filter_builder/filter-builder';
 
 @Injectable()
 export class DeviceGroupPolicyService {
@@ -18,6 +19,8 @@ export class DeviceGroupPolicyService {
     private detailSorting: Array<ColumnSort>;
     private detailObserver: any;
     private detailPage: number;
+    public profileFilters: Filter[];
+    public userFiltersState: Object;
 
     constructor(
         public accountService: AccountService,
@@ -28,6 +31,7 @@ export class DeviceGroupPolicyService {
         this.detailRequest = new DeviceGroupPolicyRequest();
         this.detailUserFilters = [];
         this.detailPage = 0;
+        this.userFiltersState = {};
     }
 
     getGroupPolisies(deviceId: number, page: number, limit: number, force: boolean) {
@@ -41,6 +45,7 @@ export class DeviceGroupPolicyService {
         this.detailRequest.page = page;
         this.detailRequest.limit = limit;
         this.detailRequest.device_id = deviceId;
+        this.detailRequest.filters = this.getFilters();
 
         this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/device/group_policy_list`, this.detailRequest)
             
@@ -62,4 +67,20 @@ export class DeviceGroupPolicyService {
                 });
 
     }
+
+    setProfileFilters(filters: Filter[]) {
+        this.profileFilters = filters;
+    }
+
+    getFilters() {
+        let filters = new Array<Filter>();
+        if (this.userFiltersState) {
+            filters = FilterBuilder.getConstructedFilters(this.userFiltersState);
+        }
+        if (this.profileFilters != null) {
+            filters = filters.concat(this.profileFilters);
+        }
+        
+        return filters;
+    }
 }
diff --git a/src/organization/device/detail/incident/device-incident.component.ts b/src/organization/device/detail/incident/device-incident.component.ts
index a12dd1d0ae3..4ad0dfd4a62 100755
--- a/src/organization/device/detail/incident/device-incident.component.ts
+++ b/src/organization/device/detail/incident/device-incident.component.ts
@@ -7,8 +7,7 @@ import { Severity } from 'common/enum';
 
 @Component({
     selector: 'device-incident',
-    templateUrl: 'device-incident.component.html',
-    providers: [DeviceIncidentService]
+    templateUrl: 'device-incident.component.html'
 })
 
 export class DeviceIncidentComponent implements OnInit {
diff --git a/src/organization/device/detail/patch/device-patch.component.ts b/src/organization/device/detail/patch/device-patch.component.ts
index 690c06dbd77..f68e6d26314 100755
--- a/src/organization/device/detail/patch/device-patch.component.ts
+++ b/src/organization/device/detail/patch/device-patch.component.ts
@@ -7,8 +7,7 @@ import { Router } from '@angular/router';
 
 @Component({
     selector: 'device-patch',
-    templateUrl: 'device-patch.component.html',
-    providers: [DevicePatchService]
+    templateUrl: 'device-patch.component.html'
 })
 
 export class DevicePatchComponent implements OnInit {
diff --git a/src/organization/device/detail/software/device-software.component.ts b/src/organization/device/detail/software/device-software.component.ts
index 43f8d68c830..e2e119a0d32 100755
--- a/src/organization/device/detail/software/device-software.component.ts
+++ b/src/organization/device/detail/software/device-software.component.ts
@@ -4,18 +4,17 @@ import { Table } from 'primeng/table';
 import { DeviceSoftwareService } from './device-software.service';
 import { DeviceSoftwareItem, DeviceSoftwareResponse } from './device-software.response';
 
+
 @Component({
     selector: 'device-software',
-    templateUrl: 'device-software.component.html',
-    providers: [DeviceSoftwareService]
+    templateUrl: 'device-software.component.html'
 })
 
 export class DeviceSoftwareComponent implements OnInit {
 
     @Input() deviceId;
-    @Input() listHeight;
-
     @ViewChild('table') table: Table;
+    @Input() listHeight: string;
 
     public ROWS: number = 20;
 
@@ -25,7 +24,7 @@ export class DeviceSoftwareComponent implements OnInit {
     private response: DeviceSoftwareResponse;
 
     constructor(
-        private service: DeviceSoftwareService,
+        public service: DeviceSoftwareService,
         private renderer: Renderer2
     ) {
         this.response = null;
diff --git a/src/organization/device/detail/software/device-software.service.ts b/src/organization/device/detail/software/device-software.service.ts
index edbcf2150e3..ff91cadd484 100755
--- a/src/organization/device/detail/software/device-software.service.ts
+++ b/src/organization/device/detail/software/device-software.service.ts
@@ -4,7 +4,8 @@ import { Observable } from 'rxjs';
 import { AccountService } from 'account/account.service';
 import { SpinnerService } from 'common/spinner/spinner.service';
 import { DeviceSoftwareRequest, DeviceSoftwareResponse, DeviceSoftwareItem } from './device-software.response';
-import { map, debounceTime, share } from 'rxjs/operators'; 
+import { share } from 'rxjs/operators'; 
+import { FilterBuilder } from 'common/filter_builder/filter-builder';
 
 @Injectable()
 export class DeviceSoftwareService {
@@ -18,6 +19,8 @@ export class DeviceSoftwareService {
     private detailSorting: Array<ColumnSort>;
     private detailObserver: any;
     private detailPage: number;
+    public profileFilters: Filter[];
+    public userFiltersState: Object;
 
     constructor(
         public accountService: AccountService,
@@ -28,6 +31,7 @@ export class DeviceSoftwareService {
         this.detailRequest = new DeviceSoftwareRequest();
         this.detailUserFilters = [];
         this.detailPage = 0;
+        this.userFiltersState = {};
     }
 
     getSoftware(deviceId: number, page: number, limit: number, force: boolean) {
@@ -41,6 +45,8 @@ export class DeviceSoftwareService {
         this.detailRequest.page = page;
         this.detailRequest.limit = limit;
         this.detailRequest.device_id = deviceId;
+        this.detailRequest.filters = this.getFilters();
+        
 
         this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/device/software_list`, this.detailRequest)
             
@@ -52,7 +58,12 @@ export class DeviceSoftwareService {
                 }
                 this.detailPage = page;
                 this.detailItems = this.detailResponse.items;
-                this.detailObserver.next(this.detailResponse);
+
+                if(this.detailObserver)
+                {
+                    this.detailObserver.next(this.detailResponse);
+                }
+                
                 this.spinnerService.setState(false);
             },
                 error => {
@@ -62,4 +73,20 @@ export class DeviceSoftwareService {
                 });
 
     }
+
+    setProfileFilters(filters: Filter[]) {
+        this.profileFilters = filters;
+    }
+
+    getFilters() {
+        let filters = new Array<Filter>();
+        if (this.userFiltersState) {
+            filters = FilterBuilder.getConstructedFilters(this.userFiltersState);
+        }
+        if (this.profileFilters != null) {
+            filters = filters.concat(this.profileFilters);
+        }
+        
+        return filters;
+    }
 }
diff --git a/src/organization/device/detail/user/device-user.component.ts b/src/organization/device/detail/user/device-user.component.ts
index 51aeda927dc..b736acf59b0 100755
--- a/src/organization/device/detail/user/device-user.component.ts
+++ b/src/organization/device/detail/user/device-user.component.ts
@@ -7,15 +7,13 @@ import { Router } from '@angular/router';
 
 @Component({
     selector: 'device-user',
-    templateUrl: 'device-user.component.html',
-    providers: [DeviceUserService]
+    templateUrl: 'device-user.component.html'
 })
 
 export class DeviceUserComponent implements OnInit {
 
     @Input() deviceId;
-    @Input() listHeight;
-
+    @Input() listHeight: string;
     @ViewChild('table') table: Table;
 
     public ROWS: number = 20;
diff --git a/src/organization/device/detail/user/device-user.service.ts b/src/organization/device/detail/user/device-user.service.ts
index ea2979df9f0..4b2f068b8a3 100755
--- a/src/organization/device/detail/user/device-user.service.ts
+++ b/src/organization/device/detail/user/device-user.service.ts
@@ -4,7 +4,8 @@ import { Observable } from 'rxjs';
 import { AccountService } from 'account/account.service';
 import { SpinnerService } from 'common/spinner/spinner.service';
 import { DeviceUserRequest, DeviceUserResponse, DeviceUserItem } from './device-user.response';
-import { map, debounceTime, share } from 'rxjs/operators'; 
+import { share } from 'rxjs/operators'; 
+import { FilterBuilder } from 'common/filter_builder/filter-builder';
 
 @Injectable()
 export class DeviceUserService {
@@ -18,6 +19,8 @@ export class DeviceUserService {
     private detailSorting: Array<ColumnSort>;
     private detailObserver: any;
     private detailPage: number;
+    public profileFilters: Filter[];
+    public userFiltersState: Object;
 
     constructor(
         public accountService: AccountService,
@@ -28,6 +31,7 @@ export class DeviceUserService {
         this.detailRequest = new DeviceUserRequest();
         this.detailUserFilters = [];
         this.detailPage = 0;
+        this.userFiltersState = {};
     }
 
     getUsers(deviceId: number, page: number, limit: number, force: boolean) {
@@ -41,6 +45,7 @@ export class DeviceUserService {
         this.detailRequest.page = page;
         this.detailRequest.limit = limit;
         this.detailRequest.device_id = deviceId;
+        this.detailRequest.filters = this.getFilters();
 
         this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/device/loggedinuser_list`, this.detailRequest)
             
@@ -62,4 +67,20 @@ export class DeviceUserService {
                 });
 
     }
+
+    setProfileFilters(filters: Filter[]) {
+        this.profileFilters = filters;
+    }
+
+    getFilters() {
+        let filters = new Array<Filter>();
+        if (this.userFiltersState) {
+            filters = FilterBuilder.getConstructedFilters(this.userFiltersState);
+        }
+        if (this.profileFilters != null) {
+            filters = filters.concat(this.profileFilters);
+        }
+        
+        return filters;
+    }
 }
diff --git a/src/organization/device/detail/vulnerability/device-vulnerability.component.ts b/src/organization/device/detail/vulnerability/device-vulnerability.component.ts
index 38901077418..2a5a478b92f 100755
--- a/src/organization/device/detail/vulnerability/device-vulnerability.component.ts
+++ b/src/organization/device/detail/vulnerability/device-vulnerability.component.ts
@@ -7,19 +7,16 @@ import { Router } from '@angular/router';
 
 @Component({
     selector: 'device-vulnerability',
-    templateUrl: 'device-vulnerability.component.html',
-    providers: [DeviceVulnerabilityService]
+    templateUrl: 'device-vulnerability.component.html'
 })
 
 export class DeviceVulnerabilityComponent implements OnInit {
 
     @Input() deviceId;
-    @Input() listHeight;
-
     @ViewChild('table') table: Table;
+    @Input() listHeight: string;
 
     public ROWS: number = 20;
-
     public cols: Array<ColumnWithSort>;
     public totalRecords: number;
     public items: Array<DeviceVulnerabilityItem>;
diff --git a/src/organization/device/detail/vulnerability/device-vulnerability.service.ts b/src/organization/device/detail/vulnerability/device-vulnerability.service.ts
index 34c47f8ba1a..ad916e76eba 100755
--- a/src/organization/device/detail/vulnerability/device-vulnerability.service.ts
+++ b/src/organization/device/detail/vulnerability/device-vulnerability.service.ts
@@ -4,7 +4,8 @@ import { Filter, ColumnSort } from 'common/object';
 import { Observable } from 'rxjs';
 import { AccountService } from 'account/account.service';
 import { SpinnerService } from 'common/spinner/spinner.service';
-import { map, debounceTime, share } from 'rxjs/operators'; 
+import { share } from 'rxjs/operators'; 
+import { FilterBuilder } from 'common/filter_builder/filter-builder';
 
 @Injectable()
 export class DeviceVulnerabilityService {
@@ -18,6 +19,8 @@ export class DeviceVulnerabilityService {
     private detailSorting: Array<ColumnSort>;
     private detailObserver: any;
     private detailPage: number;
+    public profileFilters: Filter[];
+    public userFiltersState: Object;
 
     constructor(
         public accountService: AccountService,
@@ -28,6 +31,7 @@ export class DeviceVulnerabilityService {
         this.detailRequest = new DeviceVulnerabilityRequest();
         this.detailUserFilters = [];
         this.detailPage = 0;
+        this.userFiltersState = {};
     }
 
     getVulnerabilities(deviceId: number, page: number, limit: number, force: boolean) {
@@ -41,6 +45,7 @@ export class DeviceVulnerabilityService {
         this.detailRequest.page = page;
         this.detailRequest.limit = limit;
         this.detailRequest.device_id = deviceId;
+        this.detailRequest.filters = this.getFilters();
 
         this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/device/vulnerability/list`, this.detailRequest)
             
@@ -62,4 +67,20 @@ export class DeviceVulnerabilityService {
                 });
 
     }
+
+    setProfileFilters(filters: Filter[]) {
+        this.profileFilters = filters;
+    }
+
+    getFilters() {
+        let filters = new Array<Filter>();
+        if (this.userFiltersState) {
+            filters = FilterBuilder.getConstructedFilters(this.userFiltersState);
+        }
+        if (this.profileFilters != null) {
+            filters = filters.concat(this.profileFilters);
+        }
+        
+        return filters;
+    }
 }
diff --git a/src/organization/device/device_detail.component.html b/src/organization/device/device_detail.component.html
index 19e046225f6..0e8a9ff5527 100644
--- a/src/organization/device/device_detail.component.html
+++ b/src/organization/device/device_detail.component.html
@@ -1,253 +1,303 @@
 <org-navigator [mainNavbarEnabled]="false"></org-navigator>
 
 <div class="flex-container">
-    <div *ngIf="response" class="container-fluid-details">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h1 class="panel-title">
-                    Details for {{ response.item.hostname }}
-                    <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)="toggleInfoSection()">
-                        <i *ngIf="infoCollapsed" class="fa fa-chevron-up"></i>
-                        <i *ngIf="!infoCollapsed" class="fa fa-chevron-down"></i>
-                    </button>
-                </h1>
+
+    <!-- device-vulnerability -->
+    <side-filter #filterPanel *ngIf="isTabSelected(2)" (onFilterChange)="updateProfileFilters($event)">
+        <context-filter-section #section (clearSectionEvent)="clearContextFilter($event)">
+            <text-filter (filterChanged)="filterChanged($event)" [model]="serviceDeviceVulnerability.userFiltersState" key="summary" label="Search" placeholder="Summary"></text-filter>
+        </context-filter-section>
+        <rating-filter-section #section [selectedRating]="defaultRating"></rating-filter-section>
+    </side-filter>
+    <!-- device-user -->
+    <side-filter #filterPanel *ngIf="isTabSelected(5)" (onFilterChange)="updateProfileFilters($event)">
+        <context-filter-section #section (clearSectionEvent)="clearContextFilter($event)">
+            <text-filter (filterChanged)="filterChanged($event)" [model]="serviceDeviceUser.userFiltersState" key="search_fields" label="Search" placeholder="All fields"></text-filter>
+            <div class="input-container flex-container-column">
+                <label class="input-container-heading">Only Show:</label>
+                <input  type="checkbox" class="checkbox" id="localadmins" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['localadmins']"/><label for="localadmins" class="label-filter-pane">Local Admins</label>
+                <input  type="checkbox" class="checkbox" id="remoteusers" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['remoteusers']"/><label for="remoteusers" class="label-filter-pane">Remote Users</label>
+                <input  type="checkbox" class="checkbox" id="domainadmins" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['domainadmins']"/><label for="domainadmins" class="label-filter-pane">Domain Admins</label>
+                <input  type="checkbox" class="checkbox" id="loggedonusers" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['loggedonusers']"/><label for="loggedonusers" class="label-filter-pane">Logged On Now</label>
+                <input  type="checkbox" class="checkbox" id="domainusers" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['domainusers']"/><label for="domainusers" class="label-filter-pane">Domain Users</label>
+                <input  type="checkbox" class="checkbox" id="localusers" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['localusers']"/><label for="localusers" class="label-filter-pane">Local Users</label>
+                <input  type="checkbox" class="checkbox" id="disabledusers" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['disabledusers']"/><label for="disabledusers" class="label-filter-pane">Disabled/Locked Out</label>
+                <input  type="checkbox" class="checkbox" id="activeusers" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['activeusers']"/><label for="activeusers" class="label-filter-pane">Active Users</label>
+                <input  type="checkbox" class="checkbox" id="expiredpasswords" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['expiredpasswords']"/><label for="expiredpasswords" class="label-filter-pane">Password Expired</label>
+                <input  type="checkbox" class="checkbox" id="passneverexpires" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['passneverexpires']"/><label for="passneverexpires" class="label-filter-pane">Password Never Expires</label>
+                <input  type="checkbox" class="checkbox" id="passnotrequired" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['passnotrequired']"/><label for="passnotrequired" class="label-filter-pane">Password Not Required</label>
+                <input  type="checkbox" class="checkbox" id="staleaccounts" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceUser.userFiltersState['staleaccounts']"/><label for="staleaccounts" class="label-filter-pane">Stale Accounts (&gt;90 days)</label>
             </div>
-        </div>
-        <div #headerInfo class="container-fluid single-page no-logo" style="color: white;">
-            <div class="row">
-                <div class="col-md-6 benchmark-heading">
-                    <div class="row" *ngIf="response.item.last_remote_address">
-                        <div class="semi-bold">IP:</div>
-                        <div class="">{{ response.item.last_remote_address }}</div>
-                    </div>
-                    <div class="row">
-                        <div class="semi-bold">OS:</div>
-                        <div class="">{{ response.item.os_description }} {{ response.item.distribution }} ({{ response.item.arch_name }})</div>
-                    </div>
-                    <div class="row" *ngIf="!infoCollapsed">
-                        <div class="semi-bold">Created:</div>
-                        <div class="">{{ response.item.created_at*1000 | moment:'MMM Do YYYY HH:mm' }}</div>
-                    </div>
-                    <div class="row" *ngIf="!infoCollapsed">
-                        <div class="semi-bold">Last activity:</div>
-                        <div class="">{{ response.item.last_activity_at*1000 | moment:'MMM Do YYYY HH:mm' }}</div>
-                    </div>
-                    <div class="row" *ngIf="!infoCollapsed">
-                        <div class="semi-bold">Licensed:</div>
-                        <div class="">{{ deviceLicensedText(response.item) }}</div>
-                    </div>
-                    <div class="row" *ngIf="!infoCollapsed">
-                        <div class="semi-bold">Agent version:</div>
-                        <div class="">{{ response.item.agent_version }}<div style="display: inline-block;" *ngIf="agentOutdated()" pTooltip="This agent version is outdated!" tooltipPosition="bottom" showDelay="500"><i class="fa fa-exclamation-triangle nanitor-cursor-help m-l-5"></i></div></div>
-                    </div>
-                    <div class="row" *ngIf="response.item.dn && !infoCollapsed">
-                        <div class="semi-bold">Location:</div>
-                        <div class="">{{ response.item.dn }}</div>
-                    </div>
+        </context-filter-section>
+        <label-filter-section #section></label-filter-section>
+    </side-filter>
+    <!-- device-group-polic -->
+    <side-filter #filterPanel *ngIf="isTabSelected(6)" (onFilterChange)="updateProfileFilters($event)">
+        <context-filter-section #section (clearSectionEvent)="clearContextFilter($event)">
+            <text-filter (filterChanged)="filterChanged($event)" [model]="serviceDeviceGroupPolicy.userFiltersState" key="name" label="Search" placeholder="Names"></text-filter>
+            <div class="input-container flex-container-column">
+                <label class="input-container-heading">Include:</label>
+                <input  type="checkbox" class="checkbox" id="disabled" (click)="filterChanged($event)" [(ngModel)]="serviceDeviceGroupPolicy.userFiltersState['disabled']"/><label for="disabled" class="label-filter-pane">Disabled GPOs</label>
+            </div>
+        </context-filter-section>
+    </side-filter>
+    <!-- device-software -->
+    <side-filter #filterPanel *ngIf="isTabSelected(7)" (onFilterChange)="updateProfileFilters($event)">
+        <context-filter-section #section (clearSectionEvent)="clearContextFilter($event)">
+            <text-filter (filterChanged)="filterChanged($event)" [model]="serviceDeviceSoftware.userFiltersState" key="name" label="Search" placeholder="Names"></text-filter>
+        </context-filter-section>
+        <label-filter-section #section></label-filter-section>
+    </side-filter>
+        
+    <div class="container-fluid">
+        <div *ngIf="response">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h1 class="panel-title">
+                        Details for {{ response.item.hostname }}
+                        <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)="toggleInfoSection()">
+                            <i *ngIf="infoCollapsed" class="fa fa-chevron-up"></i>
+                            <i *ngIf="!infoCollapsed" class="fa fa-chevron-down"></i>
+                        </button>
+                    </h1>
                 </div>
-                <div class="col-md-6 benchmark-heading">
-                    <div class="row">
-                        <div class="semi-bold">Device type:</div>
-                        <div class="">{{ typeToString(response.item.type, response.item.system_type) }}</div>
-                    </div>
-                    <div class="row" *ngIf="response.item.device_labels.length > 0 && response.item.last_remote_address">
-                        <div class="semi-bold">Device labels:</div>
-                        <span class="badge badge-info" *ngFor="let label of response.item.device_labels">{{ label }}</span>
-                    </div>
-                    <div class="row" *ngIf="response.item.av_status !== 0 && !infoCollapsed">
-                        <div class="semi-bold">AV status:</div>
-                        <div class="">{{ avStatusToString(response.item.av_status) }}</div>
-                    </div>
-                    <div class="row" *ngIf="response.item.firewall_status !== 0 && !infoCollapsed">
-                        <div class="semi-bold">Firewall status:</div>
-                        <div class="">{{ firewallStatusToString(response.item.firewall_status) }}</div>
+            </div>
+            <div #headerInfo class="container-fluid single-page no-logo" style="color: white;">
+                <div class="row">
+                    <div class="col-md-6 benchmark-heading">
+                        <div class="row" *ngIf="response.item.last_remote_address">
+                            <div class="semi-bold">IP:</div>
+                            <div class="">{{ response.item.last_remote_address }}</div>
+                        </div>
+                        <div class="row">
+                            <div class="semi-bold">OS:</div>
+                            <div class="">{{ response.item.os_description }} {{ response.item.distribution }} ({{ response.item.arch_name }})</div>
+                        </div>
+                        <div class="row" *ngIf="!infoCollapsed">
+                            <div class="semi-bold">Created:</div>
+                            <div class="">{{ response.item.created_at*1000 | moment:'MMM Do YYYY HH:mm' }}</div>
+                        </div>
+                        <div class="row" *ngIf="!infoCollapsed">
+                            <div class="semi-bold">Last activity:</div>
+                            <div class="">{{ response.item.last_activity_at*1000 | moment:'MMM Do YYYY HH:mm' }}</div>
+                        </div>
+                        <div class="row" *ngIf="!infoCollapsed">
+                            <div class="semi-bold">Licensed:</div>
+                            <div class="">{{ deviceLicensedText(response.item) }}</div>
+                        </div>
+                        <div class="row" *ngIf="!infoCollapsed">
+                            <div class="semi-bold">Agent version:</div>
+                            <div class="">{{ response.item.agent_version }}<div style="display: inline-block;" *ngIf="agentOutdated()" pTooltip="This agent version is outdated!" tooltipPosition="bottom" showDelay="500"><i class="fa fa-exclamation-triangle nanitor-cursor-help m-l-5"></i></div></div>
+                        </div>
+                        <div class="row" *ngIf="response.item.dn && !infoCollapsed">
+                            <div class="semi-bold">Location:</div>
+                            <div class="">{{ response.item.dn }}</div>
+                        </div>
                     </div>
-                    <div class="row" *ngIf="response.item.sysdrive_encryption_status !== 0 && !infoCollapsed">
-                        <div class="semi-bold">Disk encryption status:</div>
-                        <div class="">{{ diskEncryptionStatusToString(response.item.sysdrive_encryption_status) }}</div>
+                    <div class="col-md-6 benchmark-heading">
+                        <div class="row">
+                            <div class="semi-bold">Device type:</div>
+                            <div class="">{{ typeToString(response.item.type, response.item.system_type) }}</div>
+                        </div>
+                        <div class="row" *ngIf="response.item.device_labels.length > 0 && response.item.last_remote_address">
+                            <div class="semi-bold">Device labels:</div>
+                            <span class="badge badge-info" *ngFor="let label of response.item.device_labels">{{ label }}</span>
+                        </div>
+                        <div class="row" *ngIf="response.item.av_status !== 0 && !infoCollapsed">
+                            <div class="semi-bold">AV status:</div>
+                            <div class="">{{ avStatusToString(response.item.av_status) }}</div>
+                        </div>
+                        <div class="row" *ngIf="response.item.firewall_status !== 0 && !infoCollapsed">
+                            <div class="semi-bold">Firewall status:</div>
+                            <div class="">{{ firewallStatusToString(response.item.firewall_status) }}</div>
+                        </div>
+                        <div class="row" *ngIf="response.item.sysdrive_encryption_status !== 0 && !infoCollapsed">
+                            <div class="semi-bold">Disk encryption status:</div>
+                            <div class="">{{ diskEncryptionStatusToString(response.item.sysdrive_encryption_status) }}</div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="container-fluid" *ngIf="response&&isCurrentOrgAdmin()" style="color: white; clear:both; margin-top:1em;">
-
-            <div *ngIf="needsConnectionString" class="credentials well" style="margin-top:2em;">
-                <h2>Credentials2</h2>
-                <div class="row">
-                    <div class="col-md-6">
-                        <label for="username">Username</label>
-                        <input [(ngModel)]="assignModel.username" type="text" name="username" class="form-control" autocomplete="off" value=''>
+    
+            <div class="container-fluid" *ngIf="response&&isCurrentOrgAdmin()" style="color: white; clear:both; margin-top:1em;">
+    
+                <div *ngIf="needsConnectionString" class="credentials well" style="margin-top:2em;">
+                    <h2>Credentials2</h2>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label for="username">Username</label>
+                            <input [(ngModel)]="assignModel.username" type="text" name="username" class="form-control" autocomplete="off" value=''>
+                        </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-6">
-                        <label for="password">Password</label>
-                        <input type='password' style='display: none'>
-                        <input [(ngModel)]="assignModel.password" type="password" name="password" class="form-control" autocomplete="off" value=''>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label for="password">Password</label>
+                            <input type='password' style='display: none'>
+                            <input [(ngModel)]="assignModel.password" type="password" name="password" class="form-control" autocomplete="off" value=''>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="white-wrapper" *ngIf="response" style="margin-top: 25px; padding-bottom: 10px; min-height: 0">
-            <div class="container-fluid">
-                <div>
-                    <ul class="nav-tabs-nanitor list-inline">
-                    <li id="tab1" class="active"><a (click)="setTabSelected(1)">Configurations</a></li>
-                    <li id="tab2" *ngIf="vulnerabilityEnabled && response.num_vulnerabilities > 0"><a (click)="setTabSelected(2)">Vulnerabilities ({{ response.num_vulnerabilities }})</a></li>
-                    <li id="tab3" *ngIf="response.num_incidents > 0"><a (click)="setTabSelected(3)">Incidents ({{ response.num_incidents }})</a></li>
-                    <li id="tab4" *ngIf="response.num_patches > 0"><a (click)="setTabSelected(4)">Patches ({{ response.num_patches }})</a></li>
-                    <li id="tab5" *ngIf="response.num_loggedinusers > 0"><a (click)="setTabSelected(5)">Users ({{ response.num_loggedinusers }})</a></li>
-                    <li id="tab6" *ngIf="response.num_gpos > 0"><a (click)="setTabSelected(6)">Group Policies ({{ response.num_gpos }})</a></li>
-                    <li id="tab7" *ngIf="response.num_software > 0"><a (click)="setTabSelected(7)">Software ({{ response.num_software }})</a></li>
-                    </ul>
-                </div>
-                <div class="table-responsive" style="overflow: hidden; margin-top: 10px;" *ngIf="isTabSelected(1)">
-                    <div class="no-data" *ngIf="response.assignments.length == 0">
-                        <p>This device has no configurations.</p>
+    
+            <div class="white-wrapper" *ngIf="response" style="margin-top: 25px; padding-bottom: 10px; min-height: 0">
+                <div class="container-fluid">
+                    <div>
+                        <ul class="nav-tabs-nanitor list-inline">
+                        <li id="tab1" class="active"><a (click)="setTabSelected(1)">Configurations</a></li>
+                        <li id="tab2" *ngIf="vulnerabilityEnabled && response.num_vulnerabilities > 0"><a (click)="setTabSelected(2)">Vulnerabilities ({{ response.num_vulnerabilities }})</a></li>
+                        <li id="tab3" *ngIf="response.num_incidents > 0"><a (click)="setTabSelected(3)">Incidents ({{ response.num_incidents }})</a></li>
+                        <li id="tab4" *ngIf="response.num_patches > 0"><a (click)="setTabSelected(4)">Patches ({{ response.num_patches }})</a></li>
+                        <li id="tab5" *ngIf="response.num_loggedinusers > 0"><a (click)="setTabSelected(5)">Users ({{ response.num_loggedinusers }})</a></li>
+                        <li id="tab6" *ngIf="response.num_gpos > 0"><a (click)="setTabSelected(6)">Group Policies ({{ response.num_gpos }})</a></li>
+                        <li id="tab7" *ngIf="response.num_software > 0"><a (click)="setTabSelected(7)">Software ({{ response.num_software }})</a></li>
+                        </ul>
                     </div>
-                    <div *ngIf="response.assignments.length > 0">
-                        <p-table #table class="p-table" [columns]="cols" [value]="response.assignments"
-                            [totalRecords]="response.assignments.length" scrollable="true" sortMode="multiple">
-                            <ng-template pTemplate="colgroup" let-columns>
-                                <colgroup>
-                                    <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
-                                    <col *ngIf="isCurrentOrgAdmin()" style="width: 140px">
-                                </colgroup>
-                            </ng-template>
-                            <ng-template pTemplate="header" let-columns>
-                                <tr valign="top" class="defence" width="100%">
-                                    <th *ngFor="let col of columns" class="table-header-cell" [pSortableColumn]="col.field"
-                                        [pSortableColumnDisabled]="col.disabled" [ngStyle]="{'width': col.width}">
-                                        <div>{{col.header}}<p-sortIcon *ngIf="!col.disabled" [field]="col.field"></p-sortIcon>
-                                        </div>
-                                    </th>
-                                    <th *ngIf="isCurrentOrgAdmin()" class="table-header-cell" style="width: 140px"></th>
-                                </tr>
-                            </ng-template>
-                            <ng-template pTemplate="body" let-rowData let-columns="columns">
-                                <tr id="item-{{ rowData.id }}" class="table-row">
-                                    <td *ngIf="assignmentCheckedIn(rowData)" class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'display_name')}">
-                                        <a href="#" *ngIf="rowData.cis > 0" (click)="benchmarkSelected($event, rowData.profile_id)">{{ rowData.display_name }}</a>
-                                        <span *ngIf="rowData.cis == 0">{{ rowData.display_name }}</span>
-                                    </td>
-                                    <td *ngIf="!assignmentCheckedIn(rowData)" class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'display_name')}">
-                                        {{ rowData.display_name }}
-                                    </td>
-                                    <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'version')}">
-                                        {{ rowData.version }}
-                                    </td>
-                                    <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'profile_title')}">
-                                        <div class="maindiv">
-                                            <div class="with-editbtn" style="display: block;">
-                                                {{ rowData.profile_title }}
-                                                <a *ngIf="getAvailableProfiles(rowData.id).length > 0 && isCurrentOrgAdmin()"
-                                                (click)="clickEditProfiles($event)"
-                                                class="btn-edit-description"
-                                                style="float:right;"
-                                                title="Edit"><i class="fa fa-edit"></i></a>
+                    <div class="table-responsive" style="overflow: hidden; margin-top: 10px;" *ngIf="isTabSelected(1)">
+                        <div class="no-data" *ngIf="response.assignments.length == 0">
+                            <p>This device has no configurations.</p>
+                        </div>
+                        <div *ngIf="response.assignments.length > 0">
+                            <p-table #table class="p-table" [columns]="cols" [value]="response.assignments"
+                                [totalRecords]="response.assignments.length" scrollable="true" sortMode="multiple">
+                                <ng-template pTemplate="colgroup" let-columns>
+                                    <colgroup>
+                                        <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
+                                        <col *ngIf="isCurrentOrgAdmin()" style="width: 140px">
+                                    </colgroup>
+                                </ng-template>
+                                <ng-template pTemplate="header" let-columns>
+                                    <tr valign="top" class="defence" width="100%">
+                                        <th *ngFor="let col of columns" class="table-header-cell" [pSortableColumn]="col.field"
+                                            [pSortableColumnDisabled]="col.disabled" [ngStyle]="{'width': col.width}">
+                                            <div>{{col.header}}<p-sortIcon *ngIf="!col.disabled" [field]="col.field"></p-sortIcon>
                                             </div>
-                                            <div class="without-editbtn edit-wrapper" style="display: none;">
-                                                <div class="flex-container flex-row-centered">
-                                                Switch to:
-                                                <div class="flex-container flex-row-centered">
-                                                    <a (click)="clickConfirmEditProfiles($event)" class="btn-save-types btn btn-lg" title="Confirm" style="padding: 0; margin-right: 10px">
-                                                        <i class="fa fa-check" style="color:green;"></i>
-                                                    </a>
-                                                    <a (click)="clickCancelEditProfiles($event)" class="btn-discard-types btn btn-lg" title="Cancel" style="padding: 0">
-                                                        <i class="fa fa-close" style="color:red;"></i>
-                                                    </a>
+                                        </th>
+                                        <th *ngIf="isCurrentOrgAdmin()" class="table-header-cell" style="width: 140px"></th>
+                                    </tr>
+                                </ng-template>
+                                <ng-template pTemplate="body" let-rowData let-columns="columns">
+                                    <tr id="item-{{ rowData.id }}" class="table-row">
+                                        <td *ngIf="assignmentCheckedIn(rowData)" class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'display_name')}">
+                                            <a href="#" *ngIf="rowData.cis > 0" (click)="benchmarkSelected($event, rowData.profile_id)">{{ rowData.display_name }}</a>
+                                            <span *ngIf="rowData.cis == 0">{{ rowData.display_name }}</span>
+                                        </td>
+                                        <td *ngIf="!assignmentCheckedIn(rowData)" class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'display_name')}">
+                                            {{ rowData.display_name }}
+                                        </td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'version')}">
+                                            {{ rowData.version }}
+                                        </td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'profile_title')}">
+                                            <div class="maindiv">
+                                                <div class="with-editbtn" style="display: block;">
+                                                    {{ rowData.profile_title }}
+                                                    <a *ngIf="getAvailableProfiles(rowData.id).length > 0 && isCurrentOrgAdmin()"
+                                                    (click)="clickEditProfiles($event)"
+                                                    class="btn-edit-description"
+                                                    style="float:right;"
+                                                    title="Edit"><i class="fa fa-edit"></i></a>
                                                 </div>
+                                                <div class="without-editbtn edit-wrapper" style="display: none;">
+                                                    <div class="flex-container flex-row-centered">
+                                                    Switch to:
+                                                    <div class="flex-container flex-row-centered">
+                                                        <a (click)="clickConfirmEditProfiles($event)" class="btn-save-types btn btn-lg" title="Confirm" style="padding: 0; margin-right: 10px">
+                                                            <i class="fa fa-check" style="color:green;"></i>
+                                                        </a>
+                                                        <a (click)="clickCancelEditProfiles($event)" class="btn-discard-types btn btn-lg" title="Cancel" style="padding: 0">
+                                                            <i class="fa fa-close" style="color:red;"></i>
+                                                        </a>
+                                                    </div>
+                                                    </div>
+                                                    <p-listbox class="full-width-selectbox" [options]="getAvailableProfiles(rowData.id)" (onChange)="onChange(rowData.profile_id, $event)"></p-listbox>
                                                 </div>
-                                                <p-listbox class="full-width-selectbox" [options]="getAvailableProfiles(rowData.id)" (onChange)="onChange(rowData.profile_id, $event)"></p-listbox>
                                             </div>
-                                        </div>
-                                    </td>
-                                    <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'last_checkin_at')}">
-                                        {{ assignmentStatus(rowData) }}
-                                    </td>
-                                    <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'baseline')}">
-                                        <span class="">{{ getBaselineScore(rowData) }}</span>
-
-                                        <div *ngIf="rowData.excluded_info && rowData.excluded_info.length > 0" pTooltip="{{ rowData.excluded_info }}" tooltipPosition="bottom" showDelay="500" style="display: inline;">
-                                            <i class="fa fa-exclamation-triangle nanitor-cursor-help m-l-5"></i>
-                                        </div>
-                                    </td>
-                                    <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'cis')}">
-                                        <span class="">{{ getCisScore(rowData) }}</span>
-                                    </td>
-                                    <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'last_checkin_at')}">
-                                        {{ rowData.last_checkin_at*1000 | moment:'MMM Do YYYY HH:mm' }}
-                                    </td>
-                                    <td *ngIf="isCurrentOrgAdmin()" class="table-cell" style="width: 140px">
+                                        </td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'last_checkin_at')}">
+                                            {{ assignmentStatus(rowData) }}
+                                        </td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'baseline')}">
+                                            <span class="">{{ getBaselineScore(rowData) }}</span>
+    
+                                            <div *ngIf="rowData.excluded_info && rowData.excluded_info.length > 0" pTooltip="{{ rowData.excluded_info }}" tooltipPosition="bottom" showDelay="500" style="display: inline;">
+                                                <i class="fa fa-exclamation-triangle nanitor-cursor-help m-l-5"></i>
+                                            </div>
+                                        </td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'cis')}">
+                                            <span class="">{{ getCisScore(rowData) }}</span>
+                                        </td>
+                                        <td class="table-cell" [ngStyle]="{'width': getColumnWidth(columns, 'last_checkin_at')}">
+                                            {{ rowData.last_checkin_at*1000 | moment:'MMM Do YYYY HH:mm' }}
+                                        </td>
+                                        <td *ngIf="isCurrentOrgAdmin()" class="table-cell" style="width: 140px">
+                                                <a href="#"
+                                                [class.nanitor-disable]="rowData.scap_checkin_requested"
+                                                [attr.item-id]="rowData.id"
+                                                (click)="clickRequestCheckin($event)"
+                                                title="Request update">
+                                                <i class="fa fa-refresh" style="margin-right: 0.5em;"></i>
+                                            </a>
+        
                                             <a href="#"
-                                            [class.nanitor-disable]="rowData.scap_checkin_requested"
-                                            [attr.item-id]="rowData.id"
-                                            (click)="clickRequestCheckin($event)"
-                                            title="Request update">
-                                            <i class="fa fa-refresh" style="margin-right: 0.5em;"></i>
-                                        </a>
+                                                [class.nanitor-disable]="!rowData.can_exclude"
+                                                [attr.item-id]="rowData.id"
+                                                [hidden]="rowData.is_excluded"
+                                                (click)="clickExcludeBaselineDevice($event, rowData.profile_id)"
+                                                title="Exclude">
+                                                <i class="fa fa-ban" style="font-size: 23px;"></i>
+                                            </a>
+        
+                                            <a href="#"
+                                                [class.nanitor-disable]="!rowData.can_exclude"
+                                                [attr.item-id]="rowData.id"
+                                                [hidden]="!rowData.is_excluded"
+                                                (click)="clickRemoveBaselineDeviceExclusion($event, rowData.profile_id)"
+                                                title="Remove Exclusion">
+                                                    <i class="fa fa-ban" style="font-size: 23px;"></i>
+                                            </a>
+                                        </td>
+                                    </tr>
+                                </ng-template>
+                            </p-table>
+                        </div>
+                    </div>
     
-                                        <a href="#"
-                                            [class.nanitor-disable]="!rowData.can_exclude"
-                                            [attr.item-id]="rowData.id"
-                                            [hidden]="rowData.is_excluded"
-                                            (click)="clickExcludeBaselineDevice($event, rowData.profile_id)"
-                                            title="Exclude">
-                                            <i class="fa fa-ban" style="font-size: 23px;"></i>
-                                        </a>
+                    <div class="container-fluid white-wrapper"
+                        style="padding: 0; margin: 10px 0 0 0; min-height: 0"
+                            *ngIf="isTabSelected(2)">
+                        <device-vulnerability #vulnerabilityId [deviceId]="deviceId" [listHeight]="listHeight"></device-vulnerability>
+                    </div>
     
-                                        <a href="#"
-                                            [class.nanitor-disable]="!rowData.can_exclude"
-                                            [attr.item-id]="rowData.id"
-                                            [hidden]="!rowData.is_excluded"
-                                            (click)="clickRemoveBaselineDeviceExclusion($event, rowData.profile_id)"
-                                            title="Remove Exclusion">
-                                                <i class="fa fa-ban" style="font-size: 23px;"></i>
-                                        </a>
-                                    </td>
-                                </tr>
-                            </ng-template>
-                        </p-table>
+                    <div class="container-fluid white-wrapper"
+                        style="padding: 0; margin: 10px 0 0 0; min-height: 0"
+                        *ngIf="isTabSelected(3)">
+                        <device-incident #incidentId [deviceId]="deviceId" [listHeight]="listHeight"></device-incident>
+                    </div>
+    
+                    <div class="container-fluid white-wrapper"
+                        style="padding: 0; margin: 10px 0 0 0; min-height: 0"
+                        *ngIf="isTabSelected(4)">
+                        <device-patch #patchId [deviceId]="deviceId" [listHeight]="listHeight"></device-patch>
+                    </div>
+    
+                    <div class="container-fluid white-wrapper"
+                        style="padding: 0; margin: 10px 0 0 0; min-height: 0"
+                        *ngIf="isTabSelected(5)">
+                        <device-user #userId [deviceId]="deviceId" [listHeight]="listHeight"></device-user>
+                    </div>
+    
+                    <div class="container-fluid white-wrapper"
+                        style="padding: 0; margin: 10px 0 0 0; min-height: 0"
+                        *ngIf="isTabSelected(6)">
+                        <device-group-policy #groupPolicyId [deviceId]="deviceId" [listHeight]="listHeight"></device-group-policy>
+                    </div>
+    
+                    <div class="container-fluid white-wrapper"
+                        style="padding: 0; margin: 10px 0 0 0; min-height: 0"
+                        *ngIf="isTabSelected(7)">
+                        <device-software #softwareId [deviceId]="deviceId" [listHeight]="listHeight"></device-software>
                     </div>
-                </div>
-
-                <div class="container-fluid white-wrapper"
-                    style="padding: 0; margin: 10px 0 0 0; min-height: 0"
-                     *ngIf="isTabSelected(2)">
-                    <device-vulnerability [deviceId]="deviceId" [listHeight]="getListHeight()"></device-vulnerability>
-                </div>
-
-                <div class="container-fluid white-wrapper"
-                    style="padding: 0; margin: 10px 0 0 0; min-height: 0"
-                    *ngIf="isTabSelected(3)">
-                   <device-incident [deviceId]="deviceId" [listHeight]="getListHeight()"></device-incident>
-                </div>
-
-                <div class="container-fluid white-wrapper"
-                    style="padding: 0; margin: 10px 0 0 0; min-height: 0"
-                    *ngIf="isTabSelected(4)">
-                   <device-patch [deviceId]="deviceId" [listHeight]="getListHeight()"></device-patch>
-                </div>
-
-                <div class="container-fluid white-wrapper"
-                    style="padding: 0; margin: 10px 0 0 0; min-height: 0"
-                    *ngIf="isTabSelected(5)">
-                    <device-user [deviceId]="deviceId" [listHeight]="getListHeight()"></device-user>
-                </div>
-
-                <div class="container-fluid white-wrapper"
-                    style="padding: 0; margin: 10px 0 0 0; min-height: 0"
-                    *ngIf="isTabSelected(6)">
-                    <device-group-policy [deviceId]="deviceId" [listHeight]="getListHeight()"></device-group-policy>
-                </div>
-
-                <div class="container-fluid white-wrapper"
-                    style="padding: 0; margin: 10px 0 0 0; min-height: 0"
-                    *ngIf="isTabSelected(7)">
-                   <device-software [deviceId]="deviceId" [listHeight]="getListHeight()"></device-software>
                 </div>
             </div>
         </div>
diff --git a/src/organization/device/device_detail.component.ts b/src/organization/device/device_detail.component.ts
index 6320914aeb6..664cc1ed6dd 100755
--- a/src/organization/device/device_detail.component.ts
+++ b/src/organization/device/device_detail.component.ts
@@ -2,11 +2,7 @@
 /// <reference path="../../../custom_typings/clipboard.d.ts" />
 /// <reference path="../../../custom_typings/custom.d.ts" />
 import { Component, OnInit, Renderer2, ViewChild, ViewChildren, ElementRef } from '@angular/core';
-import {
-    DeviceDetailResponse,
-    DeviceDetailItem,
-    DeviceAssigmentItem
-} from './device_response';
+import { DeviceDetailResponse, DeviceDetailItem, DeviceAssigmentItem } from './device_response';
 import { BasicResponse } from '../../common/response';
 import { DeviceService } from './device.service';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -17,28 +13,41 @@ import { BreadcrumbService } from '../../common/breadcrumb/breadcrumb.service';
 import { Breadcrumb } from '../../common/breadcrumb/breadcrumb.model';
 import { Table } from 'primeng/table';
 import { ColumnWithSort } from '../../common/object';
+import { SideFilterComponent } from 'common/side_filter/side-filter.component';
+import { DeviceGroupPolicyService } from '../device/detail/group-policy/device-group-policy.service';
+import { DeviceSoftwareService } from '../device/detail/software/device-software.service';
+import { DeviceUserService } from '../device/detail/user/device-user.service';
+import { DeviceVulnerabilityService } from '../device/detail/vulnerability/device-vulnerability.service';
+import { TextFilterComponent } from 'common/filter_pane/text-filter.component';
+import { DeviceSoftwareComponent } from './detail/software/device-software.component';
+import { RatingFilterSectionComponent } from 'common/side_filter/side_filter_section/rating-filter-section.component';
 
-declare var jQuery: JQueryStatic;
 
+declare var jQuery: JQueryStatic;
 
 @Component({
     templateUrl: 'device_detail.component.html',
-    providers: [DeviceService]
+    providers: [DeviceService],
+    host: {
+        '(window:resize)': 'onResize($event)'
+        }
 })
 
 export class DeviceDetailComponent implements OnInit {
 
-    @ViewChild('headerInfo') set content(content: ElementRef) {
-        this.headerInfoEl = content;
-    }
+    @ViewChild('headerInfo') set content(content: ElementRef) { this.headerInfoEl = content; }
+    @ViewChild('filterPanel') filterPanel: SideFilterComponent;
+    @ViewChild(TextFilterComponent) textFilter: TextFilterComponent;
+    @ViewChild('vulnerabilityId') vulnerabilityId: DeviceSoftwareComponent;
+    @ViewChild('userId') userId: DeviceSoftwareComponent;
+    @ViewChild('groupPolicyId') groupPolicyId: DeviceSoftwareComponent;
+    @ViewChild('softwareId') softwareId: DeviceSoftwareComponent;
+
     public isRequesting: boolean;
     private headerInfoEl: ElementRef;
-
     private ROWS: number = 20;
     private OTHER_CONTENT_HEIGHT: number = 420;
-
     private window = window;
-
     public response: DeviceDetailResponse;
     private deviceId: string;
     private assignModel: DeviceAssignModel;
@@ -52,12 +61,15 @@ export class DeviceDetailComponent implements OnInit {
     private exclusionProfileId: number;
     public exclusionComment: string;
     private cols: Array<ColumnWithSort>;
-
     private vulnerabilityEnabled: boolean;
     public infoCollapsed: boolean;
+    public defaultRating: number = RatingFilterSectionComponent.MEDIUM;
+    public listHeight: string;
 
-    constructor(private service: DeviceService, private route: ActivatedRoute, private router: Router, private spinnerService: SpinnerService, private breadcrumbService: BreadcrumbService,
-        private renderer: Renderer2) {
+
+    constructor(private serviceDeviceGroupPolicy: DeviceGroupPolicyService,private serviceDeviceSoftware: DeviceSoftwareService, private serviceDeviceUser : DeviceUserService, 
+        private serviceDeviceVulnerability: DeviceVulnerabilityService, private service: DeviceService, private route: ActivatedRoute, private router: Router, 
+        private spinnerService: SpinnerService, private breadcrumbService: BreadcrumbService, private renderer: Renderer2) {
         this.deviceId = route.snapshot.params['id'];
         this.response = null;
         this.needsConnectionString = false;
@@ -150,7 +162,6 @@ export class DeviceDetailComponent implements OnInit {
 
         let r = this.service.requestCheckin(parseInt(this.deviceId), this.currentAssignment.profile_id);
         let self = this;
-
         r.subscribe(
             (data: any)  => {
                 let obj: BasicResponse = data;
@@ -169,22 +180,18 @@ export class DeviceDetailComponent implements OnInit {
         event.preventDefault();
         this.exclusionProfileId = profileId;
         this.exclusionComment = '';
-
         jQuery('#create-exception-confirm').modal('show');
     }
 
     clickRemoveBaselineDeviceExclusion(event, profileId) {
         event.preventDefault();
-
         this.exclusionComment = '';
         this.exclusionProfileId = profileId;
-
         jQuery('#remove-exception-confirm').modal('show');
     }
 
     clickRemoveBaselineExceptionConfirm(event) {
         event.preventDefault();
-
         let req = this.service.removeDeviceBaselineException(parseInt(this.deviceId), this.exclusionProfileId);
         req.subscribe(
             (data: any)  => {
@@ -203,7 +210,6 @@ export class DeviceDetailComponent implements OnInit {
 
     clickCreateBaselineExceptionConfirm(event) {
         event.preventDefault();
-
         let req = this.service.createDeviceBaselineException(parseInt(this.deviceId), this.exclusionProfileId, this.exclusionComment);
         req.subscribe(
             (data: any)  => {
@@ -222,7 +228,6 @@ export class DeviceDetailComponent implements OnInit {
 
     clickEditProfiles(event) {
         event.preventDefault();
-
         let $mainDiv= jQuery(event.target).parents('.maindiv');
         $mainDiv.find('.with-editbtn').hide();
         $mainDiv.find('.without-editbtn').show();
@@ -230,7 +235,6 @@ export class DeviceDetailComponent implements OnInit {
 
     clickCancelEditProfiles(event) {
         event.preventDefault();
-
         let $mainDiv= jQuery(event.target).parents('.maindiv');
         $mainDiv.find('.without-editbtn').hide();
         $mainDiv.find('.with-editbtn').show();
@@ -239,7 +243,6 @@ export class DeviceDetailComponent implements OnInit {
     clickConfirmEditProfiles(evene) {
         let r = this.service.switchDeviceProfiles(this.switchModel);
         let self = this;
-
         r.subscribe(
             (data: any)  => {
                 let obj: BasicResponse = data;
@@ -275,7 +278,6 @@ export class DeviceDetailComponent implements OnInit {
                 }
 
                 newBenchmark.needsConnectionString = item.needs_connection_string;
-
                 this.benchmarks.push(newBenchmark);
             }
         }
@@ -310,6 +312,10 @@ export class DeviceDetailComponent implements OnInit {
         jQuery('#tab' + this.tabSelected).removeClass('active');
         this.tabSelected = index;
         jQuery('#tab' + this.tabSelected).addClass('active');
+        setTimeout(() => {
+            this.listHeight = this.getListHeight();
+        })
+        
     }
 
     isTabSelected(index: number) {
@@ -326,7 +332,6 @@ export class DeviceDetailComponent implements OnInit {
 
     benchmarkSelected(event, profile_id: number) {
         event.preventDefault();
-
         let subPath = `/benchmark/${profile_id}/rule_list/${this.deviceId}`;
         let url = this.service.accountService.navigateOrganization(subPath);
         return this.router.navigateByUrl(url);
@@ -334,7 +339,6 @@ export class DeviceDetailComponent implements OnInit {
 
     ruleIncidentSelected(event, item_id: number) {
         event.preventDefault();
-
         let subPath = `/incident/${item_id}`;
         let url = this.service.accountService.navigateOrganization(subPath);
         return this.router.navigateByUrl(url);
@@ -349,7 +353,6 @@ export class DeviceDetailComponent implements OnInit {
         if (!this.assignmentCheckedIn(item)) {
             ret = 'Waiting for result';
         }
-
         return ret;
     }
 
@@ -376,7 +379,6 @@ export class DeviceDetailComponent implements OnInit {
 
     openAssignModal(event) {
         event.preventDefault();
-
         jQuery('#assign-button').blur();
         jQuery('#assign-benchmark-modal').modal('show');
     }
@@ -400,6 +402,75 @@ export class DeviceDetailComponent implements OnInit {
         this.switchModel.device_id = parseInt(this.deviceId);
     }
 
+    filterChanged(event) {
+        
+        // <!-- device-vulnerability -->
+        if(this.isTabSelected(2))
+        {
+            this.vulnerabilityId.refresh();
+        }
+        //<!-- device-user -->
+        else if(this.isTabSelected(5))
+        {
+            this.userId.refresh();
+        }
+        //<!-- device-group-polic -->
+        else if(this.isTabSelected(6))
+        {
+            this.groupPolicyId.refresh();
+        }
+        //<!-- device-software -->
+        else if(this.isTabSelected(7))
+        {
+            this.softwareId.refresh();
+        }
+    }
+
+    updateProfileFilters(event) {
+
+        // <!-- device-vulnerability -->
+        if(this.isTabSelected(2))
+        {
+            this.serviceDeviceVulnerability.setProfileFilters(event);
+            if (this.vulnerabilityId) {
+                this.vulnerabilityId.refresh();
+            }
+        }
+        //<!-- device-user -->
+        else if(this.isTabSelected(5))
+        {
+            this.serviceDeviceUser.setProfileFilters(event);
+            if (this.userId) {
+                this.userId.refresh();
+            }
+        }
+        //<!-- device-group-polic -->
+        else if(this.isTabSelected(6))
+        {
+            this.serviceDeviceGroupPolicy.setProfileFilters(event);
+            if (this.groupPolicyId) {
+                this.groupPolicyId.refresh();
+            }
+        }
+        //<!-- device-software -->
+        else if(this.isTabSelected(7))
+        {
+            this.serviceDeviceSoftware.setProfileFilters(event);
+            if (this.softwareId) {
+                this.softwareId.refresh();
+            }
+        }
+    }
+
+    clearContextFilter(callback: Function) {
+        this.textFilter.clear();
+        if (this.isTabSelected(2)){ this.serviceDeviceVulnerability.userFiltersState = {}; }
+        if (this.isTabSelected(5)){ this.serviceDeviceUser.userFiltersState = {}; }
+        if (this.isTabSelected(6)){ this.serviceDeviceGroupPolicy.userFiltersState = {}; }
+        if (this.isTabSelected(7)){ this.serviceDeviceSoftware.userFiltersState = {}; }
+        callback();
+    }
+
     toggleInfoSection() {
         this.infoCollapsed = !this.infoCollapsed;
     }
@@ -452,6 +523,10 @@ export class DeviceDetailComponent implements OnInit {
 
         }
     }
+
+    onResize($event) {
+        this.listHeight = this.getListHeight();
+    }
 }
 
 class Profile {
diff --git a/src/organization/device/device_list.component.ts b/src/organization/device/device_list.component.ts
index 3134233d97f..43b13550eb7 100755
--- a/src/organization/device/device_list.component.ts
+++ b/src/organization/device/device_list.component.ts
@@ -162,7 +162,7 @@ export class DeviceListComponent implements OnInit {
         this.labelService.getLabels();
     }
 
-    ngAfterViewChecked() {
+    ngAfterContentInit() {
         this.cdr.detectChanges();
     }
 
@@ -426,7 +426,6 @@ export class DeviceListComponent implements OnInit {
             if (this.ptable) {
                 this.ptable.first = 0;
             }
-    
             this.refresh();
         });
     }
@@ -508,6 +507,7 @@ export class DeviceListComponent implements OnInit {
     }
 
     updateProfileFilters(event) {
+
         if (this.ptable) {
             this.ptable.first = 0;
         }
diff --git a/src/organization/incident/incident_devices.service.ts b/src/organization/incident/incident_devices.service.ts
new file mode 100644
index 00000000000..4792f37dedf
--- /dev/null
+++ b/src/organization/incident/incident_devices.service.ts
@@ -0,0 +1,160 @@
+import { Injectable } from '@angular/core';
+import { AccountService } from '../../account/account.service';
+import { Observable } from 'rxjs';
+import { IncidentListItem, IncidentListResponse } from './incident_response';
+import { SideFilterService } from '../../common/side_filter/side-filter.service';
+import { Filter, ColumnSort } from '../../common/object';
+import { BasicListRequest } from '../../common/request';
+import { FlashService } from '../../common/flash/flash.service';
+import { SpinnerService } from '../../common/spinner/spinner.service';
+import { TableCache } from 'common/cache/table-cache';
+import { share } from 'rxjs/operators'; 
+import { FilterBuilder } from 'common/filter_builder/filter-builder';
+import { ActivatedRoute } from '@angular/router';
+
+@Injectable()
+export class IncidentDevicesService extends TableCache {
+    public listResponse$: Observable<IncidentListResponse>;
+
+    public sorting$: Observable<Array<ColumnSort>>;
+    public isListRequesting: boolean;
+    private listObserver: any;
+    private sortingObserver: any;
+    public profileFilters: Filter[];
+    public userFiltersState: Object;
+    private request: BasicListRequest;
+    private sorting: Array<ColumnSort>;
+    private response: IncidentListResponse;
+    private items: Array<IncidentListItem>;
+
+    constructor(public accountService: AccountService, private route: ActivatedRoute, private sideFilterService: SideFilterService, public flashService: FlashService, private spinnerService: SpinnerService) {
+        super(TableCache.PAGE_ROWS, TableCache.REQUEST_LIMIT);
+        this.listResponse$ = new Observable<IncidentListResponse>(observer => this.listObserver = observer).pipe(share());
+        this.sorting$ = new Observable<Array<ColumnSort>>(observer => this.sortingObserver = observer).pipe(share());
+        this.response = null;
+        this.items = [];
+        this.request = new BasicListRequest();
+        this.sorting = null;
+        this.userFiltersState = {};
+    }
+
+    getList(incidentId: number, page: number = 1) {
+        this.reset();
+        this.loadPage(page, incidentId);
+    }
+
+    getPageItems(startPage: number, pagesCount: number, incidentId: number): void {
+        if (this.pages) {
+            if (this.isPagesLoaded(startPage, pagesCount)) {
+                this.sendResponse(startPage, pagesCount);
+            } else {
+                if (startPage % this.requestPages === 1 || Math.ceil(startPage / this.requestPages) === this.response.pages) {
+                    this.loadPage(startPage, incidentId);
+                } else {
+                    this.loadPage(startPage + 1, incidentId, false).then((requestId) => {
+                        if (this.isPagesLoaded(startPage, pagesCount)) {
+                            if (this.requestId === requestId) {
+                                this.sendResponse(startPage, pagesCount);
+                            }
+                        } else {
+                            if (this.requestId === requestId) {
+                                this.loadPage(startPage, incidentId);
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    }
+
+    loadPage(page, incidentId: number, update = true) {
+        return new Promise((resolve, reject) => {
+            let requestId = this.requestId;
+            let requestPage = Math.ceil(page / this.requestPages);
+            let request = this.getRequest(requestPage);
+
+            if (!this.isPagesRequested(requestPage * this.requestPages - (this.requestPages - 1), this.requestPages)) {
+                this.requestId++;
+                requestId = this.requestId;
+                this.spinnerService.setState(true);
+                this.isListRequesting = true;
+
+                if (update) {
+                    this.setPagesLoadingState(requestPage * this.requestPages - (this.requestPages - 1), this.requestPages);
+                }
+                
+                return this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/incident/${incidentId}/items/list`, request)
+                    
+                    .subscribe((d: any) => {
+                        this.isListRequesting = false;
+                        this.response = d;
+                        if (!this.response.items) {
+                            this.response.items = [];
+                        }
+                        if (!this.pages) {
+                            this.initPages(this.response.total);
+                        }
+                        this.cacheResponseItems(this.response);
+                        this.response.items = this.pagesToArray(page, Math.ceil(this.response.items.length / 50));
+                        if (update && requestId === this.requestId) {
+                            this.listObserver.next(this.response);
+                        }
+                        this.spinnerService.setState(false);
+                        resolve(requestId);
+                    },
+                    err => {
+                        this.isListRequesting = false;
+                        this.accountService.handleError(err);
+                        this.spinnerService.setState(false);
+                        resolve(requestId);
+                    });
+                } else {
+                    resolve(requestId);
+                }
+            });
+    }
+
+    getRequest(requestPage) {
+        let request = new BasicListRequest();
+        request.filters = this.getFilters();
+        request.limit = this.requestLimit;
+        request.sort = this.sorting;
+        request.page = requestPage;
+        return request;
+    }
+
+    sendResponse(startPage, pagesCount) {
+        this.requestId++;
+        this.response.items = this.pagesToArray(startPage, pagesCount);
+        this.response.page = Math.ceil(startPage / this.requestPages);
+        this.listObserver.next(this.response);
+    }
+
+    setResponse(response: any) {
+        this.items = response.items;
+        this.response = response;
+    }
+
+    setSorting(sorting: Array<ColumnSort>) {
+        this.sorting = sorting;
+    }
+
+    getFilters() {
+        let filters = [];
+
+        if (this.userFiltersState) {
+            filters = FilterBuilder.getConstructedFilters(this.userFiltersState);
+        }
+
+        if (this.profileFilters != null) {
+            filters = filters.concat(this.profileFilters);
+        }
+        
+        return filters;
+    }
+
+    setProfileFilters(filters: Filter[]) {
+        this.profileFilters = filters;
+    }
+
+}
diff --git a/src/organization/organization.module.ts b/src/organization/organization.module.ts
index d797617fb7a..1ca8413a763 100755
--- a/src/organization/organization.module.ts
+++ b/src/organization/organization.module.ts
@@ -20,6 +20,10 @@ import {LoggedInUserService} from './loggedin_user/loggedin_user.service';
 import { TableModule } from 'primeng/table';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {MatButtonModule} from '@angular/material/button';
+import { DeviceSoftwareService } from './device/detail/software/device-software.service';
+import { DeviceGroupPolicyService } from './device/detail/group-policy/device-group-policy.service';
+import { DeviceUserService } from './device/detail/user/device-user.service';
+import { DeviceVulnerabilityService } from './device/detail/vulnerability/device-vulnerability.service';
 
 
 
@@ -59,7 +63,11 @@ import {MatButtonModule} from '@angular/material/button';
     providers: [
         OrganizationGuard,
         IntelligenceService,
-        LoggedInUserService
+        LoggedInUserService,
+        DeviceSoftwareService,
+        DeviceGroupPolicyService,
+        DeviceUserService,
+        DeviceVulnerabilityService
     ]
 })
 
diff --git a/src/organization/vulnerability/vulnerability_list.component.ts b/src/organization/vulnerability/vulnerability_list.component.ts
index 011b72b95e9..87b0449f425 100755
--- a/src/organization/vulnerability/vulnerability_list.component.ts
+++ b/src/organization/vulnerability/vulnerability_list.component.ts
@@ -22,6 +22,7 @@ import { RatingFilterSectionComponent } from 'common/side_filter/side_filter_sec
 @Component({
     templateUrl: 'vulnerability_list.component.html',
     providers: [VulnerabilityService]
+
 })
 
 export class VulnerabilityListComponent implements OnInit {