Merge pull request primefaces#342 from atretyak1985/issue_#NNTR-266

[NNTR-266]UI updates
Nanitor · Dec 10, 2019 · 99c23d0 · 99c23d0
2 parents 4de3815 + aac25fe
commit 99c23d0
Show file tree

Hide file tree

Showing 52 changed files with 373 additions and 943 deletions.
diff --git a/src/assets/less/navigator.less b/src/assets/less/navigator.less
@@ -276,5 +276,12 @@ body {
 	button {
 		font-size: 18px;
 		margin-left: 10px;
+		background-color: #363738;
+		border: none;
+		color: #9b9b9c
+	}
+
+	button:hover {
+		background: #ffa800;
 	}
 }
diff --git a/src/assets/less/tables.less b/src/assets/less/tables.less
@@ -333,6 +333,7 @@
 }
 
 .risc-table {
+	display: block;
 	border-spacing: 3px;
 	border-collapse: separate;
 	transform: rotate(-45deg);
@@ -405,6 +406,12 @@
 	}
 }
 
+@media (max-width: 1480px) {
+	.risc-table {
+		display: none;
+	}
+}
+
 .priority-list {
 	border: 1px solid #000;
 	margin-bottom: 20px;

diff --git a/src/organization/activity_log/activity_log_list.component.ts b/src/organization/activity_log/activity_log_list.component.ts
@@ -1,11 +1,5 @@
-import { Component, OnInit, ChangeDetectorRef, AfterViewInit, Injector } from '@angular/core';
-import { Location } from '@angular/common';
-import { Router, ActivatedRoute } from '@angular/router';
-import { CustomReuseStrategyService } from '../../custom-reuse-strategy.service';
-import { Filter } from 'common/object';
+import { Component, Injector } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
-import { AccountService } from 'account/account.service';
-import { BreadcrumbService } from '../../common/breadcrumb/breadcrumb.service';
 import { ActivityLogService } from './activity_log.service';
 import { RequestExportForm } from './activity_log_response';
 import * as FileSaver from 'file-saver';
@@ -19,28 +13,20 @@ import * as FileSaver from 'file-saver';
     }
 })
 
-export class ActivityLogListComponent extends BaseList implements OnInit, AfterViewInit {
+export class ActivityLogListComponent extends BaseList {
     public itemExportForm: RequestExportForm;
     public exportLimitOptions: any;
     public datepickerMaxDate: Date;
 
     constructor(
         service: ActivityLogService,
-        protected route: ActivatedRoute,
-        protected router: Router,
-        protected customReuseStrategyService: CustomReuseStrategyService,
-        protected cdr: ChangeDetectorRef,
-        protected breadcrumbService: BreadcrumbService,
-        protected location: Location,
-        protected accountService: AccountService,
         injector: Injector
     ) {
         super(service, injector);
 
-        this.HEADER_HEIGHT = 280;
+        this.HEADER_HEIGHT = 310;
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
-
         this.itemExportForm = {} as RequestExportForm;
         this.datepickerMaxDate = new Date();
     }
@@ -49,13 +35,13 @@ export class ActivityLogListComponent extends BaseList implements OnInit, AfterV
         super.ngOnInit();
 
         this.cols = [
-            { field: 'time', header: 'Time', order: 0, width: '140px', disabled: false },
-            { field: 'event_type', header: 'Event type', order: 0, width: '80px', disabled: false },
-            { field: 'event_trigger', header: 'Triggered by', order: 0, width: '80px', disabled: false },
-            { field: 'event_name', header: 'Event details', order: 0 , width: '300px', disabled: false },
-            { field: 'severity', header: 'Severity', order: 0 , width: '80px', disabled: false },
-            { field: 'hostname', header: 'Hostname', order: 0 , width: '180px', disabled: false },
-            { field: 'address', header: 'IP', order: 0 , width: '100px', disabled: false },
+            { field: 'time', header: 'Time', order: 0, width: '180px', disabled: false },
+            { field: 'event_type', header: 'Event type', order: 0, width: '140px', disabled: false },
+            { field: 'event_trigger', header: 'Triggered by', order: 0, width: '140px', disabled: false },
+            { field: 'event_name', header: 'Event details', order: 0 , width: '370px', disabled: false },
+            { field: 'severity', header: 'Severity', order: 0 , width: '140px', disabled: false },
+            { field: 'hostname', header: 'Hostname', order: 0 , width: '140px', disabled: false },
+            { field: 'address', header: 'IP', order: 0 , width: '140px', disabled: false },
         ];
 
         this.exportLimitOptions = [

diff --git a/src/organization/admin/subnets/subnet_detail.component.ts b/src/organization/admin/subnets/subnet_detail.component.ts
@@ -1,11 +1,6 @@
-import { Component, OnInit, ChangeDetectorRef, Injector } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Location } from '@angular/common';
-import { AccountService } from 'account/account.service';
+import { Component, Injector } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
 import { SubnetDetailService } from './subnet-detail.service';
-import { BreadcrumbService } from 'common/breadcrumb/breadcrumb.service';
-import { CustomReuseStrategyService } from 'custom-reuse-strategy.service';
 import { isEqual } from 'lodash';
 
 
@@ -17,26 +12,18 @@ import { isEqual } from 'lodash';
     }
 })
 
-export class SubnetDetailComponent extends BaseList implements OnInit {
-
+export class SubnetDetailComponent extends BaseList {
     private subnetId: string;
 
     constructor(
         service: SubnetDetailService,
-        protected route: ActivatedRoute,
-        protected router: Router,
-        protected customReuseStrategyService: CustomReuseStrategyService,
-        protected cdr: ChangeDetectorRef,
-        protected breadcrumbService: BreadcrumbService,
-        protected location: Location,
-        protected accountService: AccountService,
         injector: Injector
     ) {
         super(service, injector);
 
-        this.HEADER_HEIGHT = 280;
+        this.HEADER_HEIGHT = 310;
         this.LIST_BASE_PADDING = 120;
-        this.subnetId = route.snapshot.params['id'];
+        this.subnetId = this.route.snapshot.params['id'];
         this.service.setId(this.subnetId);
         this.response = null;
         this.items = [];
@@ -46,11 +33,11 @@ export class SubnetDetailComponent extends BaseList implements OnInit {
         super.ngOnInit();
 
         this.cols = [
-            { field: 'hostname', header: 'Host Name', order: 0, width: '140px', disabled: false },
-            { field: 'ip_address', header: 'IP Address', order: 0, width: '140px', disabled: false },
-            { field: 'hw_address', header: 'HW Address', order: 0, width: '140px', disabled: false },
-            { field: 'created_at', header: 'Created At', order: 0, width: '140px', disabled: false },
-            { field: 'last_activity_at', header: 'Last Activity At', order: 0, width: '140px', disabled: false }
+            { field: 'hostname', header: 'Host Name', order: 0, width: '180px', disabled: false },
+            { field: 'ip_address', header: 'IP Address', order: 0, width: '180px', disabled: false },
+            { field: 'hw_address', header: 'HW Address', order: 0, width: '180px', disabled: false },
+            { field: 'created_at', header: 'Created At', order: 0, width: '180px', disabled: false },
+            { field: 'last_activity_at', header: 'Last Activity At', order: 0, width: '180px', disabled: false }
         ];
     }
 

diff --git a/src/organization/admin/subnets/subnet_list.component.html b/src/organization/admin/subnets/subnet_list.component.html
@@ -39,13 +39,13 @@ <h1 class="panel-title">
                         </ng-template>
                         <ng-template pTemplate="header" let-columns>
                             <tr valign="top" class="defence" width="100%">
-                                <th *ngIf="isCurrentOrgAdmin()" class="table-header-cell" style="width: 50px; text-align: center;">
+                                <th *ngIf="isCurrentOrgAdmin()" class="table-header-cell" style="text-align: center;">
                                     <div>
                                         <input #selectAllCheckbox type="checkbox" (click)="markAllItemsSelected($event)" />
                                     </div>
                                 </th>
                                 <ng-container *ngFor="let col of cols">
-                                    <th class="table-header-cell" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.disabled" [ngStyle]="{'width': col.width}">
+                                    <th *ngIf="col.header !== 'checkbox'" 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>
                                 </ng-container>
@@ -56,22 +56,20 @@ <h1 class="panel-title">
                                 <td *ngIf="isCurrentOrgAdmin()" class="table-cell text-center">
                                     <input *ngIf="!rowData.archived" type="checkbox" [id]="'check'+rowData.id" (click)="markItemSelected($event, rowData)" [checked]="checkIfSelected(rowData)"/>
                                 </td>
-                                <ng-container *ngFor="let col of cols">
-                                    <td *ngIf="col.field === 'net_address'" class="table-cell" [ngStyle]="{'width': getColumnWidth('net_address')}">
-                                        <a href="#" (click)="itemSelected($event, rowData)">{{ rowData.net_address }}</a>
-                                    </td>
-                                    <td *ngIf="col.field === 'label'" class="table-cell" [ngStyle]="{'width': getColumnWidth('label')}">
-                                        <div class="badge-container" *ngFor="let label of getDeviceLabels(rowData)" >
-                                            <span class="badge badge-info">{{ label }}</span>
-                                        </div>
-                                    </td>
-                                    <td *ngIf="col.field === 'description'" class="table-cell" [ngStyle]="{'width': getColumnWidth('description')}">
-                                        <div class="maindiv">
-                                            <inline-editable [canEdit]="isCurrentOrgAdmin()" name="description" [value]="rowData.description" (onChange)="clickUpdateDescription($event, rowData.id)">{{ rowData.description }}</inline-editable>
-                                        </div>
-                                    </td>
-                                    <td *ngIf="col.field === 'num_devices'" class="table-cell text-center" [ngStyle]="{'width': getColumnWidth('num_devices')}">{{ rowData.num_devices }}</td>
-                                </ng-container>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('net_address')}">
+                                    <a href="#" (click)="itemSelected($event, rowData)">{{ rowData.net_address }}</a>
+                                </td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('label')}">
+                                    <div class="badge-container" *ngFor="let label of getDeviceLabels(rowData)" >
+                                        <span class="badge badge-info">{{ label }}</span>
+                                    </div>
+                                </td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('description')}">
+                                    <div class="maindiv">
+                                        <inline-editable [canEdit]="isCurrentOrgAdmin()" name="description" [value]="rowData.description" (onChange)="clickUpdateDescription($event, rowData.id)">{{ rowData.description }}</inline-editable>
+                                    </div>
+                                </td>
+                                <td class="table-cell text-center" [ngStyle]="{'width': getColumnWidth('num_devices')}">{{ rowData.num_devices }}</td>
                             </tr>
                         </ng-template>
                     </p-table>

diff --git a/src/organization/admin/subnets/subnet_list.component.ts b/src/organization/admin/subnets/subnet_list.component.ts
@@ -30,7 +30,7 @@ export class SubnetListComponent extends BaseList {
         this.labels = [];
         this.labelApplyForm = new FormGroup({});
         this.initialLabelStates = [];
-        this.HEADER_HEIGHT = 280;
+        this.HEADER_HEIGHT = 310;
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
     }
@@ -39,10 +39,11 @@ export class SubnetListComponent extends BaseList {
         super.ngOnInit();
 
         this.cols = [
-            { field: 'net_address', header: 'Name', order: 0, width: '80px', disabled: false },
-            { field: 'label', header: 'Labels', order: 0, width: '240px', disabled: true },
-            { field: 'description', header: 'Comment', order: 0, width: '240px', disabled: true },
-            { field: 'num_devices', header: '#Devices', order: 0, width: '240px', disabled: false }
+            { field: '', header: 'checkbox', order: 0, width: '40px', disabled: true },
+            { field: 'net_address', header: 'Name', order: 0, width: '180px', disabled: false },
+            { field: 'label', header: 'Labels', order: 0, width: '180px', disabled: true },
+            { field: 'description', header: 'Comment', order: 0, width: '420px', disabled: true },
+            { field: 'num_devices', header: '#Devices', order: 0, width: '140px', disabled: false }
         ];
     }
 

diff --git a/src/organization/change/change_list.component.ts b/src/organization/change/change_list.component.ts
@@ -1,12 +1,7 @@
-import { Component, OnInit, ChangeDetectorRef, AfterViewInit, Injector } from '@angular/core';
-import { Location } from '@angular/common';
-import { Router, ActivatedRoute } from '@angular/router';
-import { CustomReuseStrategyService } from '../../custom-reuse-strategy.service';
+import { Component, Injector } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
-import { AccountService } from 'account/account.service';
-import { BreadcrumbService } from '../../common/breadcrumb/breadcrumb.service';
 import { ChangeService } from './change.service';
-import { ChangeListItem, ChangeListResponse } from './change_response';
+import { ChangeListItem } from './change_response';
 import { MomentPipe } from 'pipes/moment.pipe';
 import { cloneDeep } from 'lodash';
 
@@ -19,26 +14,16 @@ import { cloneDeep } from 'lodash';
     }
 })
 
-export class ChangeListComponent extends BaseList implements OnInit, AfterViewInit {
-    public response: ChangeListResponse;
-    public totalRecords: number;
-    public items: Array<ChangeListItem>;
+export class ChangeListComponent extends BaseList {
     public selectedRow: string;
 
     constructor(
         service: ChangeService,
-        protected route: ActivatedRoute,
-        protected router: Router,
-        protected customReuseStrategyService: CustomReuseStrategyService,
-        protected cdr: ChangeDetectorRef,
-        protected breadcrumbService: BreadcrumbService,
-        protected location: Location,
-        protected accountService: AccountService,
         injector: Injector
     ) {
         super(service, injector);
 
-        this.HEADER_HEIGHT = 280;
+        this.HEADER_HEIGHT = 310;
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
         this.items = [];
@@ -49,12 +34,12 @@ export class ChangeListComponent extends BaseList implements OnInit, AfterViewIn
         super.ngOnInit();
 
         this.cols = [
-            { field: 'created_at', header: 'Created', order: 0, width: '70px', disabled: false },
-            { field: 'device_hostname', header: 'Hostname', order: 0 , width: '120px', disabled: false },
-            { field: 'item_id', header: 'Rule', order: 0 , width: '200px', disabled: false },
-            { field: 'benchmark_display_name', header: 'Benchmark', order: 0 , width: '120px', disabled: false },
-            { field: 'severity', header: 'Severity', order: 0 , width: '60px', disabled: false },
-            { field: 'transition', header: 'State', order: 0 , width: '60px', disabled: false }
+            { field: 'created_at', header: 'Created', order: 0, width: '180px', disabled: false },
+            { field: 'device_hostname', header: 'Hostname', order: 0 , width: '180px', disabled: false },
+            { field: 'item_id', header: 'Rule', order: 0 , width: '320px', disabled: false },
+            { field: 'benchmark_display_name', header: 'Benchmark', order: 0 , width: '240px', disabled: false },
+            { field: 'severity', header: 'Severity', order: 0 , width: '120px', disabled: false },
+            { field: 'transition', header: 'State', order: 0 , width: '120px', disabled: false }
         ];
     }
 

diff --git a/src/organization/collector/collector_list.component.ts b/src/organization/collector/collector_list.component.ts
@@ -1,10 +1,5 @@
-import { Component, OnInit, ChangeDetectorRef, AfterViewInit, Injector } from '@angular/core';
-import { Location } from '@angular/common';
-import { Router, ActivatedRoute } from '@angular/router';
-import { CustomReuseStrategyService } from '../../custom-reuse-strategy.service';
+import { Component, Injector } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
-import { AccountService } from 'account/account.service';
-import { BreadcrumbService } from '../../common/breadcrumb/breadcrumb.service';
 import { CollectorService } from './collector.service';
 
 
@@ -16,22 +11,15 @@ import { CollectorService } from './collector.service';
     }
 })
 
-export class CollectorListComponent extends BaseList implements OnInit, AfterViewInit {
+export class CollectorListComponent extends BaseList {
 
     constructor(
         service: CollectorService,
-        protected route: ActivatedRoute,
-        protected router: Router,
-        protected customReuseStrategyService: CustomReuseStrategyService,
-        protected cdr: ChangeDetectorRef,
-        protected breadcrumbService: BreadcrumbService,
-        protected location: Location,
-        protected accountService: AccountService,
         injector: Injector
     ) {
         super(service, injector);
 
-        this.HEADER_HEIGHT = 280;
+        this.HEADER_HEIGHT = 310;
         this.FILTER_WIDTH = 300;
         this.LIST_BASE_PADDING = 120;
     }

diff --git a/src/organization/compliance/compliance_framework_control.component.ts b/src/organization/compliance/compliance_framework_control.component.ts
@@ -23,7 +23,7 @@ export class ComplianceFrameworkControlComponent extends BaseList {
     ) {
         super(service, injector);
 
-        this.HEADER_HEIGHT = 280;
+        this.HEADER_HEIGHT = 310;
         this.frameworkId = parseInt(this.route.snapshot.params['framework_id']);
         this.service.setFrameworkId(this.frameworkId);
     }

diff --git a/src/organization/compliance/compliance_framework_list.component.ts b/src/organization/compliance/compliance_framework_list.component.ts
@@ -19,7 +19,7 @@ export class ComplianceFrameworkComponent extends BaseList {
     ) {
         super(service, injector);
 
-        this.HEADER_HEIGHT = 280;
+        this.HEADER_HEIGHT = 310;
     }
 
     ngOnInit() {

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
@@ -1,10 +1,5 @@
-import { Component, OnInit, ChangeDetectorRef, Injector, Input, Output, EventEmitter } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Location } from '@angular/common';
-import { AccountService } from 'account/account.service';
+import { Component, Injector, Input, Output, EventEmitter } from '@angular/core';
 import { BaseList } from 'common/list/base-list';
-import { CustomReuseStrategyService } from 'custom-reuse-strategy.service';
-import { BreadcrumbService } from 'common/breadcrumb/breadcrumb.service';
 import { DeviceGroupPolicyService } from './device-group-policy.service';
 
 
@@ -13,26 +8,19 @@ import { DeviceGroupPolicyService } from './device-group-policy.service';
     templateUrl: 'device-group-policy.component.html'
 })
 
-export class DeviceGroupPolicyComponent extends BaseList implements OnInit {
+export class DeviceGroupPolicyComponent extends BaseList {
     @Input() deviceId;
     @Input() listHeight;
     @Output() countChanged = new EventEmitter<number>();
     public selectedItem: number;
 
     constructor(
         service: DeviceGroupPolicyService,
-        protected route: ActivatedRoute,
-        protected router: Router,
-        protected customReuseStrategyService: CustomReuseStrategyService,
-        protected cdr: ChangeDetectorRef,
-        protected breadcrumbService: BreadcrumbService,
-        protected location: Location,
-        protected accountService: AccountService,
         injector: Injector
     ) {
         super(service, injector);
 
-        this.deviceId = route.snapshot.params['id'];
+        this.deviceId = this.route.snapshot.params['id'];
         this.service.setDeviceId(this.deviceId);
         this.response = null;
         this.items = [];