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

apps/web/src/locales/en/messages.json

@@ -3870,6 +3870,9 @@
   "updateBrowserDesc": {
     "message": "You are using an unsupported web browser. The web vault may not function properly."
   },
+  "generatingRiskInsights": {
+    "message": "Generating your risk insights..."
+  },
   "freeTrialEndPrompt": {
     "message": "Your free trial ends in $COUNT$ days. To maintain your subscription,",
     "placeholders": {

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>
@@ -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,13 +4,18 @@ import { FormControl } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import { debounceTime, firstValueFrom, map } from "rxjs";
 
+import {
+  ApplicationHealthReportDetail,
+  ApplicationHealthReportSummary,
+  MemberCipherDetailsApiService,
+  RiskInsightsReportService,
+} from "@bitwarden/bit-common/tools/reports/risk-insights";
 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 {
@@ -25,31 +30,35 @@ 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;
+  isCritialAppsFeatureEnabled = false;
 
   async ngOnInit() {
     this.activatedRoute.paramMap
@@ -58,7 +67,12 @@ export class AllApplicationsComponent implements OnInit {
         map(async (params) => {
           const organizationId = params.get("organizationId");
           this.organization = await firstValueFrom(this.organizationService.get$(organizationId));
-          // TODO: use organizationId to fetch data
+          const applicationsReport =
+            await this.riskInsightsReportService.generateApplicationsReport(organizationId);
+          this.dataSource.data = applicationsReport;
+          this.applicationSummary =
+            this.riskInsightsReportService.generateApplicationsSummary(applicationsReport);
+          this.loading = false;
         }),
       )
       .subscribe();
@@ -70,7 +84,7 @@ export class AllApplicationsComponent implements OnInit {
 
   constructor(
     protected cipherService: CipherService,
-    protected passwordStrengthService: PasswordStrengthServiceAbstraction,
+    protected riskInsightsReportService: RiskInsightsReportService,
     protected auditService: AuditService,
     protected i18nService: I18nService,
     protected activatedRoute: ActivatedRoute,
@@ -78,7 +92,6 @@ export class AllApplicationsComponent implements OnInit {
     protected organizationService: OrganizationService,
     protected configService: ConfigService,
   ) {
-    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() {}
+}