hook up all applications to risk insights report service. add loading state

bitwarden_license/bit-web/src/app/tools/access-intelligence/all-applications.component.html

@@ -1,12 +1,7 @@
 <div *ngIf="loading">
-  <i
-    class="bwi bwi-spinner bwi-spin tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  <tools-risk-insights-loading></tools-risk-insights-loading>
 </div>
-<div class="tw-mt-4" *ngIf="!dataSource.data.length">
+<div class="tw-mt-4" *ngIf="!loading && !dataSource.data.length">
   <bit-no-items [icon]="noItemsIcon" class="tw-text-main">
     <ng-container slot="title">
       <h2 class="tw-font-semibold mt-4">
@@ -34,15 +29,15 @@
     <tools-card
       class="tw-flex-1"
       [title]="'atRiskMembers' | i18n"
-      [value]="mockAtRiskMembersCount"
-      [maxValue]="mockTotalMembersCount"
+      [value]="applicationSummary.totalAtRiskMemberCount"
+      [maxValue]="applicationSummary.totalMemberCount"
     >
     </tools-card>
     <tools-card
       class="tw-flex-1"
       [title]="'atRiskApplications' | i18n"
-      [value]="mockAtRiskAppsCount"
-      [maxValue]="mockTotalAppsCount"
+      [value]="applicationSummary.totalAtRiskApplicationCount"
+      [maxValue]="applicationSummary.totalApplicationCount"
     >
     </tools-card>
   </div>
@@ -57,7 +52,7 @@
       type="button"
       buttonType="secondary"
       bitButton
-      *ngIf="isCritialAppsFeatureEnabled"
+      *ngIf="isCriticalAppsFeatureEnabled"
       [disabled]="!selectedIds.size"
       [loading]="markingAsCritical"
       (click)="markAppsAsCritical()"
@@ -69,7 +64,7 @@
   <bit-table [dataSource]="dataSource">
     <ng-container header>
       <tr>
-        <th *ngIf="isCritialAppsFeatureEnabled"></th>
+        <th *ngIf="isCriticalAppsFeatureEnabled"></th>
         <th bitSortable="name" bitCell>{{ "application" | i18n }}</th>
         <th bitSortable="atRiskPasswords" bitCell>{{ "atRiskPasswords" | i18n }}</th>
         <th bitSortable="totalPasswords" bitCell>{{ "totalPasswords" | i18n }}</th>
@@ -79,7 +74,7 @@
     </ng-container>
     <ng-template body let-rows$>
       <tr bitRow *ngFor="let r of rows$ | async; trackBy: trackByFunction">
-        <td *ngIf="isCritialAppsFeatureEnabled">
+        <td *ngIf="isCriticalAppsFeatureEnabled">
           <input
             bitCheckbox
             type="checkbox"
@@ -88,25 +83,26 @@
           />
         </td>
         <td bitCell>
-          <span>{{ r.name }}</span>
+          <span>{{ r.applicationName }}</span>
         </td>
         <td bitCell>
           <span>
-            {{ r.atRiskPasswords }}
+            {{ r.atRiskPasswordCount }}
           </span>
         </td>
         <td bitCell>
           <span>
-            {{ r.totalPasswords }}
+            {{ r.passwordCount }}
           </span>
         </td>
         <td bitCell>
           <span>
-            {{ r.atRiskMembers }}
+            {{ r.atRiskMemberCount }}
           </span>
         </td>
+        w
         <td bitCell data-testid="total-membership">
-          {{ r.totalMembers }}
+          {{ r.memberCount }}
         </td>
       </tr>
     </ng-template>

bitwarden_license/bit-web/src/app/tools/access-intelligence/all-applications.component.ts

@@ -4,15 +4,23 @@ import { Component, DestroyRef, inject, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormControl } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
-import { debounceTime, firstValueFrom, map } from "rxjs";
+import { debounceTime, map, switchMap } from "rxjs";
 
+import {
+  MemberCipherDetailsApiService,
+  RiskInsightsDataService,
+  RiskInsightsReportService,
+} from "@bitwarden/bit-common/tools/reports/risk-insights";
+import {
+  ApplicationHealthReportDetail,
+  ApplicationHealthReportSummary,
+} from "@bitwarden/bit-common/tools/reports/risk-insights/models/password-health";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
@@ -27,60 +35,70 @@ import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.mod
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
 
-import { applicationTableMockData } from "./application-table.mock";
+import { ApplicationsLoadingComponent } from "./risk-insights-loading.component";
 
 @Component({
   standalone: true,
   selector: "tools-all-applications",
   templateUrl: "./all-applications.component.html",
-  imports: [HeaderModule, CardComponent, SearchModule, PipesModule, NoItemsModule, SharedModule],
+  imports: [
+    ApplicationsLoadingComponent,
+    HeaderModule,
+    CardComponent,
+    SearchModule,
+    PipesModule,
+    NoItemsModule,
+    SharedModule,
+  ],
+  providers: [MemberCipherDetailsApiService, RiskInsightsReportService],
 })
 export class AllApplicationsComponent implements OnInit {
-  protected dataSource = new TableDataSource<any>();
+  protected dataSource = new TableDataSource<ApplicationHealthReportDetail>();
   protected selectedIds: Set<number> = new Set<number>();
   protected searchControl = new FormControl("", { nonNullable: true });
   private destroyRef = inject(DestroyRef);
-  protected loading = false;
+  protected loading = true;
   protected organization: Organization;
   noItemsIcon = Icons.Security;
   protected markingAsCritical = false;
-  isCritialAppsFeatureEnabled = false;
+  protected applicationSummary: ApplicationHealthReportSummary;
 
-  // MOCK DATA
-  protected mockData = applicationTableMockData;
-  protected mockAtRiskMembersCount = 0;
-  protected mockAtRiskAppsCount = 0;
-  protected mockTotalMembersCount = 0;
-  protected mockTotalAppsCount = 0;
+  isCriticalAppsFeatureEnabled = false;
 
   async ngOnInit() {
+    this.isCriticalAppsFeatureEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.CriticalApps,
+    );
+
     this.activatedRoute.paramMap
       .pipe(
         takeUntilDestroyed(this.destroyRef),
-        map(async (params) => {
-          const organizationId = params.get("organizationId");
-          this.organization = await firstValueFrom(this.organizationService.get$(organizationId));
-          // TODO: use organizationId to fetch data
+        map((params) => params.get("organizationId")),
+        switchMap((orgId) => {
+          return this.dataService.getApplicationsReport$(orgId);
         }),
       )
-      .subscribe();
-
-    this.isCritialAppsFeatureEnabled = await this.configService.getFeatureFlag(
-      FeatureFlag.CriticalApps,
-    );
+      .subscribe({
+        next: (applications: ApplicationHealthReportDetail[]) => {
+          if (applications) {
+            this.dataSource.data = applications;
+            this.loading = false;
+          }
+        },
+      });
   }
 
   constructor(
     protected cipherService: CipherService,
-    protected passwordStrengthService: PasswordStrengthServiceAbstraction,
+    protected riskInsightsReportService: RiskInsightsReportService,
     protected auditService: AuditService,
     protected i18nService: I18nService,
     protected activatedRoute: ActivatedRoute,
     protected toastService: ToastService,
     protected organizationService: OrganizationService,
     protected configService: ConfigService,
+    protected dataService: RiskInsightsDataService,
   ) {
-    this.dataSource.data = applicationTableMockData;
     this.searchControl.valueChanges
       .pipe(debounceTime(200), takeUntilDestroyed())
       .subscribe((v) => (this.dataSource.filter = v));

bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.html

@@ -0,0 +1,8 @@
+<div class="tw-flex-col tw-flex tw-justify-center tw-items-center tw-gap-5 tw-mt-4">
+  <i
+    class="bwi bwi-2x bwi-spinner bwi-spin text-primary"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <h2 bitTypography="h1">{{ "generatingRiskInsights" | i18n }}</h2>
+</div>

bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+
+@Component({
+  selector: "tools-risk-insights-loading",
+  standalone: true,
+  imports: [CommonModule, JslibModule],
+  templateUrl: "./risk-insights-loading.component.html",
+})
+export class ApplicationsLoadingComponent {
+  constructor() {}
+}