Compliance Frameworks and Reports primefaces#304

src/organization/compliance/compliance-framework-control-issue.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { AccountService } from '../../account/account.service';
+import { SpinnerService } from '../../common/spinner/spinner.service';
+import { BaseListService } from 'common/service/base-list-service';
+
+
+@Injectable()
+export class ComplianceFrameworkControlIssueService extends BaseListService {
+    private controlId: number;
+    constructor(protected accountService: AccountService, protected spinnerService: SpinnerService) {
+        super(accountService, spinnerService);
+
+        this.path = `/organization/${this.accountService.getOrganizationId()}/compliance_framework_control_issue_list`;
+    }
+
+    public setControlId(controlId: number) {
+        this.controlId = controlId;
+    }
+
+    getRequest(requestPage: number = 1) {
+        let request = {
+            control_id: this.controlId,
+            filters: this.getFilters(),
+            limit: this.requestLimit,
+            sort: this.listSorting,
+            page: requestPage,
+        };
+        return request;
+    }
+}
+

src/organization/compliance/compliance-framework-control.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { AccountService } from '../../account/account.service';
+import { TableCache } from 'common/cache/table-cache';
+import { share } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { FrameworkControlListResponse } from './compliance_response';
+
+
+@Injectable()
+export class ComplianceFrameworkControlService extends TableCache {
+    public complianceControlResponse$: Observable<FrameworkControlListResponse>;
+    private complianceControlObserver: any;
+
+    constructor(
+        protected accountService: AccountService
+    ) {
+        super(TableCache.PAGE_ROWS, TableCache.REQUEST_LIMIT);
+        this.complianceControlResponse$ = new Observable<FrameworkControlListResponse>(observer => this.complianceControlObserver = observer).pipe(share());
+    }
+
+    getComplianceControl(frameworkId: number) {
+        let data = this.getRequest(frameworkId);
+        this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/compliance_framework_control_list`, data).subscribe((data) => {
+            this.complianceControlObserver.next(data);
+        });
+    }
+
+    getRequest(frameworkId: number) {
+        let request = {
+            org_framework_id: frameworkId
+        };
+        return request;
+    }
+}

src/organization/compliance/compliance-framework.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { AccountService } from '../../account/account.service';
+import { TableCache } from 'common/cache/table-cache';
+import { share } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { FrameworkListResponse } from './compliance_response';
+
+
+@Injectable()
+export class ComplianceFrameworkService extends TableCache {
+    public complianceFrameworkResponse$: Observable<FrameworkListResponse>;
+    private complianceFrameworkObserver: any;
+
+    constructor(
+        protected accountService: AccountService
+    ) {
+        super(TableCache.PAGE_ROWS, TableCache.REQUEST_LIMIT);
+        this.complianceFrameworkResponse$ = new Observable<FrameworkListResponse>(observer => this.complianceFrameworkObserver = observer).pipe(share());
+    }
+
+    getComplianceFramework() {
+        let data = this.getRequest();
+        this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/compliance_framework_list`, data).subscribe((data) => {
+            this.complianceFrameworkObserver.next(data);
+        });
+    }
+
+    getRequest() {
+        let request = {};
+        return request;
+    }
+}

src/organization/compliance/compliance_framework_control.component.html

@@ -0,0 +1,49 @@
+<org-navigator [mainNavbarEnabled]="false"></org-navigator>
+
+<div class="flex-container">
+
+    <div class="container-fluid">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h1 class="panel-title">Compliance Frameworks Control
+                    <button class="btn btn-sm btn-primary pull-right" (click)="refresh()" id="refresh-button" title="Refresh"><i class="fa fa-refresh"></i></button>
+                    <span class="label label-black pull-right m-r-15" style="color:white; width: auto;">Total: {{ totalRecords }}</span>
+                </h1>
+            </div>
+            <div class="panel-body">
+                <div class="no-data" *ngIf="emptyResponse">
+                    <p>There is currently nothing to display.</p>
+                </div>
+                <div *ngIf="!emptyResponse">
+                    <p-table #ptable class="p-table" [columns]="cols" [value]="items" [lazy]="true" [paginator]="true" [scrollHeight]="window.innerHeight - HEADER_HEIGHT + 'px'"
+                            [rows]="ROWS" [totalRecords]="totalRecords" scrollable="true" [customSort]="true" sortMode="multiple" (onPage)="onPage()">
+                        <ng-template pTemplate="colgroup" let-columns>
+                            <colgroup>
+                                <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
+                            </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" [ngStyle]="{'width': col.width}">
+                                    <div>{{col.header}}</div>
+                                </th> 
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-rowData let-columns="columns">
+                            <tr class="table-row">
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('control_tid')}">
+                                    <a href="#" (click)="itemSelected($event, rowData)">{{ rowData.control_tid }}</a>
+                                </td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('rules_count')}">{{ rowData.num_rules }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('checks_compliant')}">{{ rowData.num_passes }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('checks_incompliant')}">{{ rowData.num_checks - rowData.num_passes }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('devices_compliant')}">{{ rowData.num_devices - rowData.num_incompliant_devices }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('devices_incompliant')}">{{ rowData.num_incompliant_devices }}</td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/organization/compliance/compliance_framework_control.component.ts

@@ -0,0 +1,111 @@
+import { Component, OnInit } from '@angular/core';
+import { TableCache } from 'common/cache/table-cache';
+import { ColumnWithSort } from 'common/object';
+import { SpinnerService } from 'common/spinner/spinner.service';
+import { AccountService } from 'account/account.service';
+import { Location } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ComplianceFrameworkControlService } from './compliance-framework-control.service';
+import { FrameworkControlListResponse, FrameworkControlListItems } from './compliance_response';
+import { Breadcrumb } from 'common/breadcrumb/breadcrumb.model';
+import { BreadcrumbService } from 'common/breadcrumb/breadcrumb.service';
+
+
+@Component({
+    templateUrl: 'compliance_framework_control.component.html',
+    providers: [ComplianceFrameworkControlService],
+    host: {
+        '(window:resize)': 'onResize($event)'
+    }
+})
+
+export class ComplianceFrameworkControlComponent implements OnInit {
+    public items: Array<FrameworkControlListItems>;
+    public totalRecords: number;
+    public ROWS: number = TableCache.PAGE_ROWS;
+    public emptyResponse: boolean;
+    public window = window;
+    public HEADER_HEIGHT: number = 310;
+    private frameworkId: number;
+    public cols: Array<ColumnWithSort> = [
+        { field: 'control_tid', header: 'Control ID', order: 0, width: '100px', disabled: false },
+        { field: 'rules_count', header: 'Rules Count', order: 0, width: '100px', disabled: false },
+        { field: 'checks_compliant', header: 'Checks Compliant', order: 0, width: '100px', disabled: false },
+        { field: 'checks_incompliant', header: 'Checks Incompliant', order: 0, width: '100px', disabled: false },
+        { field: 'devices_compliant', header: 'Devices Compliant', order: 0, width: '100px', disabled: false },
+        { field: 'devices_incompliant', header: 'Devices Incompliant', order: 0, width: '100px', disabled: false }
+    ];
+
+    constructor(
+        private service: ComplianceFrameworkControlService,
+        private spinnerService: SpinnerService,
+        private accountService: AccountService,
+        private route: ActivatedRoute,
+        private breadcrumbService: BreadcrumbService,
+        private location: Location,
+        private router: Router
+    ) {
+        this.frameworkId =  parseInt(route.snapshot.params['framework_id']);
+        this.items = [];
+        this.totalRecords = 0;
+        this.emptyResponse = true;
+    }
+
+    ngOnInit() {
+        this.service.complianceControlResponse$.subscribe(
+            (data: FrameworkControlListResponse) => {
+                this.spinnerService.setState(false);
+                if (data.items && data.items.length) {
+                    this.items = data.items;
+                    this.totalRecords = this.items.length;
+                    this.emptyResponse = false;
+                }
+            },
+            err => {
+                this.emptyResponse = true;
+                this.spinnerService.setState(false);
+                this.accountService.handleError(err);
+            }
+        );
+        this.refresh();
+    }
+
+    refresh() {
+        this.spinnerService.setState(true);
+        this.service.getComplianceControl(this.frameworkId);
+        this.setBreadcrumb();
+    }
+
+    setBreadcrumb() {
+        let breadcrumbs = new Array<Breadcrumb>();
+        breadcrumbs.push(new Breadcrumb('Compliance', this.getRoutePath('/compliance_framework')));
+        breadcrumbs.push(new Breadcrumb(this.frameworkId.toString(), null));
+        this.breadcrumbService.setBreadcrumbs(breadcrumbs);
+    }
+
+    getColumnWidth(fieldName) {
+        let field = this.cols.filter(function (item) {
+            return item.field === fieldName;
+        })[0];
+        return field.width;
+    }
+
+    itemSelected(event, item: FrameworkControlListItems) {
+        event.preventDefault();
+        new Promise((resolve) => {
+            this.location.replaceState(this.location.path().split('?')[0] + '?id=' + item.control_id);
+            resolve();
+        }).then(() => {
+            let subPath = `/compliance_framework_control_issue/${this.frameworkId}/${item.control_id}`;
+            let url = this.accountService.navigateOrganization(subPath);
+            this.router.navigateByUrl(url);
+        });
+    }
+
+    getRoutePath(subPath) {
+        return this.accountService.navigateOrganization(subPath);
+    }
+
+    onResize(event) {}
+}
+

src/organization/compliance/compliance_framework_control_issue.component.html

@@ -0,0 +1,48 @@
+<org-navigator [mainNavbarEnabled]="false"></org-navigator>
+
+<div class="flex-container">
+
+    <div class="container-fluid">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h1 class="panel-title">Compliance Frameworks Issues and Subcontrols
+                    <button class="btn btn-sm btn-primary pull-right" (click)="refresh()" id="refresh-button" title="Refresh"><i class="fa fa-refresh"></i></button>
+                    <span class="label label-black pull-right m-r-15" style="color:white; width: auto;">Total: {{ totalRecords }}</span>
+                </h1>
+            </div>
+            <div class="panel-body">
+                <div class="no-data" *ngIf="emptyResponse">
+                    <p>There is currently nothing to display.</p>
+                </div>
+                <div *ngIf="!emptyResponse">
+                    <p-table #ptable class="p-table" [columns]="cols" [value]="items" [lazy]="true" (onLazyLoad)="sortingChanged($event)" [paginator]="true" 
+                            [rows]="ROWS" [totalRecords]="totalRecords" scrollable="true" [scrollHeight]="window.innerHeight - HEADER_HEIGHT + 'px'" [customSort]="true" 
+                            sortMode="multiple" (sortFunction)="sortingChanged($event)" (onPage)="onPage()">
+                        <ng-template pTemplate="colgroup" let-columns>
+                            <colgroup>
+                                <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
+                            </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" [ngStyle]="{'width': col.width}">
+                                    <div>{{col.header}}</div>
+                                </th> 
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-rowData let-columns="columns">
+                            <tr class="table-row">
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('sub_control_id')}">{{ rowData.sub_control_id }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('rule_title')}">{{ rowData.rule_title }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('devices_compliant')}">{{ rowData.num_devices - rowData.num_devices_incompliant }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('devices_incompliant')}">{{ rowData.num_devices_incompliant }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('checks_compliant')}">{{ rowData.num_checks - rowData.num_checks_passed }}</td>
+                                <td class="table-cell" [ngStyle]="{'width': getColumnWidth('checks_incompliant')}">{{ rowData.num_checks_passed }}</td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/organization/compliance/compliance_framework_control_issue.component.ts

@@ -0,0 +1,57 @@
+import { Component, Injector } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ComplianceFrameworkControlIssueService } from './compliance-framework-control-issue.service';
+import { Breadcrumb } from 'common/breadcrumb/breadcrumb.model';
+import { BaseList } from 'common/list/base-list';
+
+
+@Component({
+    templateUrl: 'compliance_framework_control_issue.component.html',
+    providers: [ComplianceFrameworkControlIssueService],
+    host: {
+        '(window:resize)': 'onResize($event)'
+    }
+})
+
+export class ComplianceFrameworkControlIssueComponent extends BaseList {
+    private controlId: number;
+    private frameworkId: string;
+
+    constructor(
+        service: ComplianceFrameworkControlIssueService,
+        protected route: ActivatedRoute,
+        injector: Injector
+    ) {
+        super(service, injector);
+
+        this.HEADER_HEIGHT = 320;
+        this.frameworkId = route.snapshot.params['framework_id'];
+        this.controlId = parseInt(route.snapshot.params['id']);
+        this.service.setControlId(this.controlId);
+    }
+
+    ngOnInit() {
+        super.ngOnInit();
+        this.cols = [
+            { field: 'sub_control_id', header: 'Subcontrol ID', order: 0, width: '100px', disabled: false },
+            { field: 'rule_title', header: 'Rule Title', order: 0, width: '300px', disabled: false },
+            { field: 'devices_compliant', header: 'Devices Compliant', order: 0, width: '100px', disabled: false },
+            { field: 'devices_incompliant', header: 'Devices Incompliant', order: 0, width: '100px', disabled: false },
+            { field: 'checks_compliant', header: 'Checks Compliant', order: 0, width: '100px', disabled: false },
+            { field: 'checks_incompliant', header: 'Checks Incompliant', order: 0, width: '100px', disabled: false }
+        ];
+    }
+
+    setBreadcrumb() {
+        super.setBreadcrumb();
+        let breadcrumbs = new Array<Breadcrumb>();
+        breadcrumbs.push(new Breadcrumb('Compliance', this.getRoutePath('/compliance_framework')));
+        breadcrumbs.push(new Breadcrumb(this.frameworkId, this.getRoutePath(`/compliance_framework_control/${this.frameworkId}`)));
+        breadcrumbs.push(new Breadcrumb(this.controlId.toString(), null));
+        this.breadcrumbService.setBreadcrumbs(breadcrumbs);
+    }
+
+    onResize(event) {
+        super.onResize(event);
+    }
+}