feat: dashboard container collapse

webapp/src/app/pacman-features/modules/compliance/compliance-dashboard/compliance-dashboard.component.css

@@ -80,5 +80,49 @@ mat-grid-tile {
 }
 
 .cdk-drop-list-dragging .cdk-drag {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.container {
+    transition: height 250ms cubic-bezier(0, 0, 0.2, 1);
+    position: relative;
+}
+
+.container.collapsed {
+    background: var(--background-white);
+    height: 52px;
+    border-radius: 16px;
+    border: 1px solid var(--border-200);
+    transition: height 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.container.collapsed .mat-grid-list {
+    display: none;
+}
+
+.container-title-collapsed {
+    font: var(--text-body-2);
+    padding: 16px 24px;
+}
+
+.collapse-btn {
+    position: absolute;
+    right: 0;
+    top: -1;
+    z-index: 1;
+    padding: 0;
+    height: 24px;
+    width: 24px;
+    border: none;
+    font-size: 24px;
+    background: transparent;
+    color: var(--text-low-emphasis);
+}
+
+.collapse-btn:hover {
+    cursor: pointer;
+}
+
+.container.collapsed .collapse-btn {
+    right: 50%;
 }

webapp/src/app/pacman-features/modules/compliance/compliance-dashboard/compliance-dashboard.component.html

@@ -4,7 +4,19 @@
     [cdkDropListData]="dashboardContainers"
     (cdkDropListDropped)="dropDashboardItem($event)"
 >
-    <div [class]="'container-' + (item + 1)" *ngFor="let item of dashboardContainers" cdkDrag>
+    <div
+        [class]="'container container-' + (item + 1)"
+        [class.collapsed]="isCollapsedContainer(item)"
+        *ngFor="let item of dashboardContainers"
+        cdkDrag
+    >
+        <button class="collapse-btn" type="button" (click)="toggleContainer(item)">
+            <mat-icon>{{ isCollapsedContainer(item) ? 'expand_less' : 'expand_more' }}</mat-icon>
+        </button>
+
+        <div class="container-title-collapsed" *ngIf="isCollapsedContainer(item)">
+            {{ collapsedContainerTitle(item) }}
+        </div>
         <!-- Violation Tiles -->
         <mat-grid-list
             *ngIf="item === 0"

webapp/src/app/pacman-features/modules/compliance/compliance-dashboard/compliance-dashboard.component.ts

@@ -21,9 +21,12 @@ import { Subscription } from 'rxjs';
 import { AssetGroupObservableService } from 'src/app/core/services/asset-group-observable.service';
 import { DomainTypeObservableService } from 'src/app/core/services/domain-type-observable.service';
 import { TableStateService } from 'src/app/core/services/table-state.service';
+import { WindowExpansionService } from 'src/app/core/services/window-expansion.service';
 import { WorkflowService } from 'src/app/core/services/workflow.service';
+import { IssueFilterService } from 'src/app/pacman-features/services/issue-filter.service';
 import { MultilineChartService } from 'src/app/pacman-features/services/multilinechart.service';
 import { OverallComplianceService } from 'src/app/pacman-features/services/overall-compliance.service';
+import { PacmanIssuesService } from 'src/app/pacman-features/services/pacman-issues.service';
 import { DATA_MAPPING } from 'src/app/shared/constants/data-mapping';
 import { CommonResponseService } from 'src/app/shared/services/common-response.service';
 import { DownloadService } from 'src/app/shared/services/download.service';
@@ -33,11 +36,11 @@ import { RefactorFieldsService } from 'src/app/shared/services/refactor-fields.s
 import { RouterUtilityService } from 'src/app/shared/services/router-utility.service';
 import { UtilsService } from 'src/app/shared/services/utils.service';
 import { environment } from 'src/environments/environment';
-import { IssueFilterService } from '../../../services/issue-filter.service';
-import { PacmanIssuesService } from '../../../services/pacman-issues.service';
 import {
+    DasbhoardCollapsedDict,
     DashboardArrangementItems,
     DashboardArrangementService,
+    DashboardContainerIndex,
 } from '../services/dashboard-arrangement.service';
 
 @Component({
@@ -246,6 +249,15 @@ export class ComplianceDashboardComponent implements OnInit, OnDestroy {
     graphToDate: Date = new Date();
 
     dashboardContainers: DashboardArrangementItems;
+    dashcobardCollapsedContainers: DasbhoardCollapsedDict;
+
+    readonly dashcobardCollapsedContainersTitles: { [key: number]: string } = {
+        [DashboardContainerIndex.VIOLATION_SEVERITY]: 'Violations by Severity',
+        [DashboardContainerIndex.CATEGORY_COMPLIANCE]:
+            'Category Compliance & Violations by Severity',
+        [DashboardContainerIndex.ASSET_GRAPH]: 'Asset Graph',
+        [DashboardContainerIndex.POLICY_OVERVIEW]: 'Policy Compliance Overview',
+    };
 
     constructor(
         private activatedRoute: ActivatedRoute,
@@ -266,6 +278,7 @@ export class ComplianceDashboardComponent implements OnInit, OnDestroy {
         private routerUtilityService: RouterUtilityService,
         private tableStateService: TableStateService,
         private utils: UtilsService,
+        private windowExpansionService: WindowExpansionService,
         private workflowService: WorkflowService,
     ) {}
 
@@ -323,7 +336,8 @@ export class ComplianceDashboardComponent implements OnInit, OnDestroy {
         this.breakpoint2 = window.innerWidth <= 800 ? 1 : 2;
         this.breakpoint3 = window.innerWidth <= 400 ? 1 : 1;
         this.breakpoint4 = window.innerWidth <= 400 ? 1 : 1;
-        this.dashboardContainers = this.dashboardArrangementService.get();
+        this.dashboardContainers = this.dashboardArrangementService.getArrangement();
+        this.dashcobardCollapsedContainers = this.dashboardArrangementService.getCollapsed();
     }
 
     massageAssetTrendGraphData(graphData) {
@@ -1251,7 +1265,27 @@ export class ComplianceDashboardComponent implements OnInit, OnDestroy {
         currentIndex,
     }: CdkDragDrop<DashboardArrangementItems>) {
         moveItemInArray(container.data, previousIndex, currentIndex);
-        this.dashboardArrangementService.save(this.dashboardContainers);
+        this.dashboardArrangementService.saveArrangement(this.dashboardContainers);
+    }
+
+    toggleContainer(index: number) {
+        if (index === DashboardContainerIndex.ASSET_GRAPH && this.isCollapsedContainer(index)) {
+            this.windowExpansionService.status.next(true);
+        }
+
+        this.dashcobardCollapsedContainers = {
+            ...this.dashcobardCollapsedContainers,
+            ...{ [index]: !this.isCollapsedContainer(index) },
+        };
+        this.dashboardArrangementService.saveCollapsed(this.dashcobardCollapsedContainers);
+    }
+
+    isCollapsedContainer(index: number) {
+        return this.dashcobardCollapsedContainers[index];
+    }
+
+    collapsedContainerTitle(index: number) {
+        return this.dashcobardCollapsedContainersTitles[index];
     }
 
     ngOnDestroy() {

webapp/src/app/pacman-features/modules/compliance/services/dashboard-arrangement.service.ts

@@ -1,15 +1,35 @@
 import { Injectable } from '@angular/core';
 
 export type DashboardArrangementItems = [number, number, number, number];
+export type DasbhoardCollapsedDict = { [key in DashboardContainerIndex]: boolean };
+
+export enum DashboardContainerIndex {
+    VIOLATION_SEVERITY = 0,
+    CATEGORY_COMPLIANCE = 1,
+    ASSET_GRAPH = 2,
+    POLICY_OVERVIEW = 3,
+}
 
 @Injectable()
 export class DashboardArrangementService {
     private readonly DASHBOARD_ARRANGEMENT_LS_KEY = 'dashboard-arrangement';
-    private readonly DEFAULT_DASHBOARD_ARRANGEMENT: DashboardArrangementItems = [0, 1, 2, 3];
+    private readonly DEFAULT_DASHBOARD_ARRANGEMENT: DashboardArrangementItems = [
+        DashboardContainerIndex.VIOLATION_SEVERITY,
+        DashboardContainerIndex.CATEGORY_COMPLIANCE,
+        DashboardContainerIndex.ASSET_GRAPH,
+        DashboardContainerIndex.POLICY_OVERVIEW,
+    ];
+    private readonly DASHBOARD_COLLAPSED_LS_KEY = 'dashboard-collapsed';
+    private readonly DEFAULT_DASHBOARD_COLLAPSED = {
+        [DashboardContainerIndex.VIOLATION_SEVERITY]: false,
+        [DashboardContainerIndex.CATEGORY_COMPLIANCE]: false,
+        [DashboardContainerIndex.ASSET_GRAPH]: false,
+        [DashboardContainerIndex.POLICY_OVERVIEW]: false,
+    };
 
     constructor() {}
 
-    get() {
+    getArrangement() {
         const item = localStorage.getItem(this.DASHBOARD_ARRANGEMENT_LS_KEY);
 
         if (item) {
@@ -18,7 +38,20 @@ export class DashboardArrangementService {
         return this.DEFAULT_DASHBOARD_ARRANGEMENT;
     }
 
-    save(list: DashboardArrangementItems) {
+    saveArrangement(list: DashboardArrangementItems) {
         localStorage.setItem(this.DASHBOARD_ARRANGEMENT_LS_KEY, JSON.stringify(list));
     }
+
+    getCollapsed() {
+        const item = localStorage.getItem(this.DASHBOARD_COLLAPSED_LS_KEY);
+
+        if (item) {
+            return JSON.parse(item) as DasbhoardCollapsedDict;
+        }
+        return this.DEFAULT_DASHBOARD_COLLAPSED;
+    }
+
+    saveCollapsed(dict: DasbhoardCollapsedDict) {
+        localStorage.setItem(this.DASHBOARD_COLLAPSED_LS_KEY, JSON.stringify(dict));
+    }
 }