Dashboard QA and Table filter icon on hover text expands FIxed

src/app/app.component.scss

@@ -6,12 +6,11 @@
   & .main-container {
     display: flex;
     flex-direction: row;
-    flex: 1; // Take remaining space after header
 
     & .content-container {
       display: flex;
       flex-direction: column;
-      width: 100%;
+
     }
   }
 
@@ -29,157 +28,5 @@
 
 
 
-// .main-container {
-//   display: flex;
-//   height: 100%;
-//   width: 100%;
-// }
-
-// .content-container {
-//   height: 100%;
-// }
-
-// .footer-container {
-//   display: flex;
-//   flex-direction: column;
-
-//   & .footer-text {
-//     display: flex;
-//     justify-content: center;
-//   }
-// }
-
-
-// .content-body {
-//   min-height: 100%;
-//   display: flex;
-//   justify-content: center;
-//   padding-right: 3rem;
-
-//   @media (max-width: 1920px) {
-//     padding-right: 5rem;
-//   }
-// }
-
-// .footer {
-//   color: #9d9d9d;
-//   text-align: center;
-//   background-color: #222;
-//   display: flex;
-//   flex-direction: column;
-// }
-
-// .vertical-center {
-//   z-index: 100;
-//   padding: 10px;
-//   margin: 0;
-//   position: fixed;
-//   top: 50%;
-//   right: -3%;
-//   border: none;
-//   transform: rotate(270deg) translateY(-50%);
-//   cursor: pointer;
-//   background: rgb(35, 120, 195);
-//   font-size: 15px;
-//   font-weight: bold;
-//   color: rgb(255, 255, 255);
-//   border-top-right-radius: 4px;
-//   border-top-left-radius: 4px;
-// }
-
-// .identifier {
-//   position: fixed;
-//   right: 0;
-//   left: 0;
-//   bottom: 0;
-// }
-
-// .sidebar-icon-container {
-//   min-height: 100%;
-//   padding-right: 4.1rem;
-
-//   & .icon-break {
-//     padding: .78rem;
-//   }
-// }
-
-// .sidebar-content-wrapper {
-//   display: flex;
-// }
-
-// .sidebar-icon-wrap {
-//   position: fixed;
-//   top: 67px;
-
-//   @media (max-width: 1121px) {
-//     top: 95px;
-//   }
-// }
-
-// .sidebar-icon {
-//   padding: 1.32rem;
-//   font-size: .875rem;
-//     font-weight: 200;
-//     letter-spacing: 1px;
-//     line-height: 1.5;
-//   color: white;
-//   display: flex;
-//   flex-direction: column;
-
-//   &.it-strategy {
-//     background-color: #14883c;
-//     &:hover {
-//         background-color: #389f5c;
-//     }
-//   }
-//   &.gsa-enterprise {
-//     background-color: #2b60de;
-//     &:hover {
-//         background-color: #214599;
-//     }
-//   }
-
-//   &.business-systems {
-//       background-color: #ce4844;
-//       &:hover {
-//           background-color: #c9302c;
-//       }
-//   }
-
-//   &.security {
-//       background-color: #aa6708;
-//       &:hover {
-//           background-color: #ffbe2e;
-//       }
-//   }
-
-//   &.technologies {
-//       background-color: #008080;
-//       &:hover {
-//           background-color: #076464;
-//       }
-//   }
-
-//   &.enterprise-architecture {
-//       background-color: #800080;
-//       &:hover {
-//           background-color: #4d024d;
-//       }
-//   }
-
-//   &.additional-info {
-//       background-color: #027eb2;
-//       &:hover {
-//           background-color: #00bde3;
-//       }
-//   }
-// }
-
-// .page-wrap {
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: space-between;
-//   height: 100%;
-// }
 
 

src/app/components/sidebar-button/sidebar-button.component.scss

@@ -22,13 +22,17 @@
 }
 
 .sidebar-children-container {
-    display: none;
-    transition: 150ms cubic-bezier(0, 0, 0, 1);
+    display: flex;
+    flex-direction: column;
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 
     &.expanded {
-        display: flex;
-        flex-direction: column;
-        transition: 150ms cubic-bezier(0, 0, 0, 1);
+        max-height: 1000px;
+        opacity: 1;
+        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     & .sidebar-button-child {

src/app/services/shared/shared.service.ts

@@ -460,4 +460,54 @@ export class SharedService {
   public disableStickyHeader(tableComponentId: string) {
     $('#'+tableComponentId).floatThead('destroy');
   }
+
+  public normalizePlatformName(platform: string): string {
+    if (!platform) return platform;
+
+    const normalized = platform.trim();
+    const lower = normalized.toLowerCase();
+
+    // Handle chart labels that come from the dashboard
+    if (lower === 'gsa') {
+      return 'GSA';
+    } else if (lower === 'gsa saleforce' || lower === 'gsa salesforce') {
+      return 'GSA Salesforce';
+    } else if (lower === 'fcs') {
+      return 'FCS';
+    } else if (lower === 'aws') {
+      return 'AWS';
+    } else if (lower === 'cloud.gov') {
+      return 'Cloud.gov';
+    } else if (lower === '~fedramp aws east/west') {
+      return '~FedRAMP AWS East/West';
+    } else if (lower === 'usda disc') {
+      return 'USDA DISC';
+    } else if (lower === 'google apps premier') {
+      return 'Google Apps Premier';
+    } else if (lower === 'other') {
+      return 'Other';
+    }
+
+    // Handle database CSP values that need to be matched to chart labels
+    if (lower.includes('gsa') && (lower.includes('salesforce') || lower.includes('sf'))) {
+      return 'GSA Salesforce';
+    } else if (lower.includes('gsa')) {
+      return 'GSA';
+    } else if (lower.includes('fcs')) {
+      return 'FCS';
+    } else if (lower.includes('aws') || lower.includes('amazon')) {
+      return 'AWS';
+    } else if (lower.includes('cloud.gov') || lower.includes('cloud gov')) {
+      return 'Cloud.gov';
+    } else if (lower.includes('fedramp') || lower.includes('fedramp aws')) {
+      return '~FedRAMP AWS East/West';
+    } else if (lower.includes('usda') || lower.includes('disc')) {
+      return 'USDA DISC';
+    } else if (lower.includes('google apps') || lower.includes('google apps premier')) {
+      return 'Google Apps Premier';
+    }
+
+    // Everything else should be "Other" - be very inclusive
+    return 'Other';
+  }
 }

src/app/views/dashboard/dashboard.component.html

@@ -118,14 +118,15 @@ <h3 class="dashboard-card-title-text">Hosting Platforms</h3>
                         [rotateXAxisTicks]="shouldRotateLabels"
                         [animations]="true"
                         [barPadding]="15"
-                        [xAxisTickFormatting]="xAxisTickFormatting">
+                        [xAxisTickFormatting]="xAxisTickFormatting"
+                        (select)="onBarChartSelect($event)">
                     </ngx-charts-bar-vertical>
                 </div>
             </div>
 
             <div class="dashboard-chart-card pie-chart-card">
                 <div class="dashboard-chart-header">
-                    <h3 class="dashboard-card-title-text">Business Systems</h3>
+                    <h3 class="dashboard-card-title-text">Cloud Adoption</h3>
                     <a (click)="viewAllSystems()" class="dashboard-view-all-link" style="cursor: pointer;">View All</a>
                 </div>
                 <div class="dashboard-chart-content pie-chart-content">
@@ -143,7 +144,7 @@ <h3 class="dashboard-card-title-text">Business Systems</h3>
                         (select)="onPieChartSelect($event)">
                     </ngx-charts-pie-chart>
                     <div class="dashboard-chart-center-text">
-                        <div class="center-title">Business Systems</div>
+                        <div class="center-title">Cloud Adoption</div>
                         <div class="center-number">{{ totalBusinessSystems || 0 }}</div>
                     </div>
                 </div>
@@ -169,4 +170,4 @@ <h3 class="dashboard-card-title-text">Business Systems</h3>
         <app-table *ngIf="showTable" [tableCols]="tableCols" [showToolbar]="false" [showPagination]="false" reportStyle="neutral" (rowClickEvent)="onTableRowClick($event)">
         </app-table>
     </div>
-</div>
+</div>

src/app/views/dashboard/dashboard.component.scss

@@ -170,9 +170,10 @@
 
     & .dashboard-charts-grid {
       display: grid;
-      grid-template-columns: 74% 25%;
+      grid-template-columns: calc(75% - 15px) 25%;
       gap: 15px;
 
+
       @media (max-width: 1200px) and (min-width: 992px) {
         grid-template-columns: 60% 40%;
         gap: 10px;

src/app/views/dashboard/dashboard.component.ts

@@ -367,8 +367,8 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   public navigateToNonCloudBasedSystems(): void {
-    this.analyticsService.logClickEvent('/systems?tab=Inactive', 'Dashboard business systems graph');
-    this.router.navigate(['/systems'], { queryParams: { tab: 'Inactive' } });
+    this.analyticsService.logClickEvent('/systems?tab=NotCloudBased', 'Dashboard cloud adoption graph');
+    this.router.navigate(['/systems'], { queryParams: { tab: 'Not Cloud Based' } });
   }
 
   public onPieChartSelect(event: any): void {
@@ -381,6 +381,13 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  public onBarChartSelect(event: any): void {
+    if (event && event.name) {
+      this.analyticsService.logClickEvent('/systems', `Dashboard hosting platforms chart - ${event.name}`);
+      this.router.navigate(['/systems'], { queryParams: { hostingPlatform: event.name } });
+    }
+  }
+
   public viewAllFisma(): void {
     this.analyticsService.logClickEvent('/FISMA', 'Dashboard view all FISMA');
     this.router.navigate(['/FISMA']);

src/app/views/systems/systems/systems.component.html

@@ -52,9 +52,17 @@ <h2>Business Systems & Subsystems</h2>
           <span class="filter-tab-text">Cloud Enabled</span>
           <span class="filter-tab-number second">{{filterTotals?.CloudEnabledTotal}}</span>
         </div>
+        <div class="filter-tab" [ngClass]="{'selected': isTabSelected('Not Cloud Based')}" (click)="onSelectTab('Not Cloud Based')">
+          <span class="filter-tab-text">Not Cloud Based</span>
+          <span class="filter-tab-number third">{{filterTotals?.NotCloudBasedTotal}}</span>
+        </div>
         <div class="filter-tab" [ngClass]="{'selected': isTabSelected('Inactive')}" (click)="onSelectTab('Inactive')">
           <span class="filter-tab-text">Inactive</span>
-          <span class="filter-tab-number third">{{filterTotals?.InactiveTotal}}</span>
+          <span class="filter-tab-number fourth">{{filterTotals?.InactiveTotal}}</span>
+        </div>
+        <div class="filter-tab" *ngIf="selectedHostingPlatform" [ngClass]="{'selected': isTabSelected('Hosting Platform: ' + selectedHostingPlatform)}" (click)="onSelectTab('Hosting Platform: ' + selectedHostingPlatform)">
+          <span class="filter-tab-text">Hosting Platform: {{selectedHostingPlatform}}</span>
+          <span class="filter-tab-number fifth">{{getHostingPlatformCount()}}</span>
         </div>
       </div>
     </app-table>