PM-17065 Display critical apps (#12867)

2025-12-12 14:23:32 +00:00 · 2025-01-17 16:05:37 -06:00
parent ce2ec07f74
commit 8674fb51db
5 changed files with 101 additions and 99 deletions
--- a/bitwarden_license/bit-web/src/app/tools/access-intelligence/all-applications.component.ts
+++ b/bitwarden_license/bit-web/src/app/tools/access-intelligence/all-applications.component.ts
@@ -57,10 +57,15 @@ export class AllApplicationsComponent implements OnInit {
  protected selectedUrls: Set<string> = new Set<string>();
  protected searchControl = new FormControl("", { nonNullable: true });
  protected loading = true;
-  protected organization = {} as Organization;
+  protected organization = new Organization();
  noItemsIcon = Icons.Security;
  protected markingAsCritical = false;
-  protected applicationSummary = {} as ApplicationHealthReportSummary;
+  protected applicationSummary: ApplicationHealthReportSummary = {
+    totalMemberCount: 0,
+    totalAtRiskMemberCount: 0,
+    totalApplicationCount: 0,
+    totalAtRiskApplicationCount: 0,
+  };

  destroyRef = inject(DestroyRef);
  isLoading$: Observable<boolean> = of(false);
@@ -90,8 +95,10 @@ export class AllApplicationsComponent implements OnInit {
        }),
      )
      .subscribe(({ data, organization }) => {
-        this.dataSource.data = data ?? [];
-        this.applicationSummary = this.reportService.generateApplicationsSummary(data ?? []);
+        if (data) {
+          this.dataSource.data = data;
+          this.applicationSummary = this.reportService.generateApplicationsSummary(data);
+        }
        if (organization) {
          this.organization = organization;
        }
--- a/bitwarden_license/bit-web/src/app/tools/access-intelligence/app-at-risk-members-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/tools/access-intelligence/app-at-risk-members-dialog.component.html
@@ -3,9 +3,7 @@
  <ng-container bitDialogContent>
    <div class="tw-flex tw-flex-col tw-gap-2">
      <span bitDialogTitle>{{ "atRiskMembersWithCount" | i18n: members.length }} </span>
-      <span class="tw-text-muted">{{
-        "atRiskMembersDescriptionWithApp" | i18n: applicationName
-      }}</span>
+      <span>{{ "atRiskMembersDescriptionWithApp" | i18n: applicationName }}</span>
      <div class="tw-mt-1">
        <ng-container *ngFor="let member of members">
          <div>{{ member.email }}</div>
--- a/bitwarden_license/bit-web/src/app/tools/access-intelligence/application-table.mock.ts
+++ b/bitwarden_license/bit-web/src/app/tools/access-intelligence/application-table.mock.ts
@@ -1,56 +0,0 @@
-export const applicationTableMockData = [
-  {
-    id: 1,
-    name: "google.com",
-    atRiskPasswords: 4,
-    totalPasswords: 10,
-    atRiskMembers: 2,
-    totalMembers: 5,
-    isMarkedAsCritical: false,
-  },
-  {
-    id: 2,
-    name: "facebook.com",
-    atRiskPasswords: 3,
-    totalPasswords: 8,
-    atRiskMembers: 1,
-    totalMembers: 3,
-    isMarkedAsCritical: false,
-  },
-  {
-    id: 3,
-    name: "twitter.com",
-    atRiskPasswords: 2,
-    totalPasswords: 6,
-    atRiskMembers: 0,
-    totalMembers: 2,
-    isMarkedAsCritical: false,
-  },
-  {
-    id: 4,
-    name: "linkedin.com",
-    atRiskPasswords: 1,
-    totalPasswords: 4,
-    atRiskMembers: 0,
-    totalMembers: 1,
-    isMarkedAsCritical: false,
-  },
-  {
-    id: 5,
-    name: "instagram.com",
-    atRiskPasswords: 0,
-    totalPasswords: 2,
-    atRiskMembers: 0,
-    totalMembers: 0,
-    isMarkedAsCritical: false,
-  },
-  {
-    id: 6,
-    name: "tiktok.com",
-    atRiskPasswords: 0,
-    totalPasswords: 1,
-    atRiskMembers: 0,
-    totalMembers: 0,
-    isMarkedAsCritical: false,
-  },
-];
--- a/bitwarden_license/bit-web/src/app/tools/access-intelligence/critical-applications.component.html
+++ b/bitwarden_license/bit-web/src/app/tools/access-intelligence/critical-applications.component.html
@@ -35,17 +35,19 @@
  </div>
  <div class="tw-flex tw-gap-6">
    <tools-card
-      class="tw-flex-1"
+      class="tw-flex-1 tw-cursor-pointer"
      [title]="'atRiskMembers' | i18n"
-      [value]="mockAtRiskMembersCount"
-      [maxValue]="mockTotalMembersCount"
+      [value]="applicationSummary.totalAtRiskMemberCount"
+      [maxValue]="applicationSummary.totalMemberCount"
+      (click)="showOrgAtRiskMembers()"
    >
    </tools-card>
    <tools-card
      class="tw-flex-1"
      [title]="'atRiskApplications' | i18n"
-      [value]="mockAtRiskAppsCount"
-      [maxValue]="mockTotalAppsCount"
+      [value]="applicationSummary.totalAtRiskApplicationCount"
+      [maxValue]="applicationSummary.totalApplicationCount"
+      (click)="showOrgAtRiskApps()"
    >
    </tools-card>
  </div>
@@ -60,38 +62,38 @@
    <ng-container header>
      <tr>
        <th></th>
-        <th bitSortable="name" bitCell>{{ "application" | i18n }}</th>
-        <th bitSortable="atRiskPasswords" bitCell>{{ "atRiskPasswords" | i18n }}</th>
-        <th bitSortable="totalPasswords" bitCell>{{ "totalPasswords" | i18n }}</th>
-        <th bitSortable="atRiskMembers" bitCell>{{ "atRiskMembers" | i18n }}</th>
-        <th bitSortable="totalMembers" bitCell>{{ "totalMembers" | i18n }}</th>
+        <th bitSortable="applicationName" bitCell>{{ "application" | i18n }}</th>
+        <th bitSortable="atRiskPasswordCount" bitCell>{{ "atRiskPasswords" | i18n }}</th>
+        <th bitSortable="passwordCount" bitCell>{{ "totalPasswords" | i18n }}</th>
+        <th bitSortable="atRiskMemberCount" bitCell>{{ "atRiskMembers" | i18n }}</th>
+        <th bitSortable="memberCount" bitCell>{{ "totalMembers" | i18n }}</th>
      </tr>
    </ng-container>
    <ng-template body let-rows$>
-      <tr bitRow *ngFor="let r of rows$ | async">
+      <tr bitRow *ngFor="let r of rows$ | async; trackBy: trackByFunction">
        <td>
-          <i class="bwi bwi-star-f"></i>
+          <i class="bwi bwi-star-f" *ngIf="r.isMarkedAsCritical"></i>
        </td>
-        <td bitCell>
-          <span>{{ r.name }}</span>
+        <td class="tw-cursor-pointer" (click)="showAppAtRiskMembers(r.applicationName)" bitCell>
+          <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>
        <td bitCell data-testid="total-membership">
-          {{ r.totalMembers }}
+          {{ r.memberCount }}
        </td>
      </tr>
    </ng-template>
--- a/bitwarden_license/bit-web/src/app/tools/access-intelligence/critical-applications.component.ts
+++ b/bitwarden_license/bit-web/src/app/tools/access-intelligence/critical-applications.component.ts
@@ -4,16 +4,32 @@ import { Component, DestroyRef, inject, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormControl } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
-import { debounceTime, map } from "rxjs";
+import { combineLatest, debounceTime, map } from "rxjs";

-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { SearchModule, TableDataSource, NoItemsModule, Icons } from "@bitwarden/components";
+import {
+  CriticalAppsService,
+  RiskInsightsDataService,
+  RiskInsightsReportService,
+} from "@bitwarden/bit-common/tools/reports/risk-insights";
+import {
+  ApplicationHealthReportDetailWithCriticalFlag,
+  ApplicationHealthReportSummary,
+} from "@bitwarden/bit-common/tools/reports/risk-insights/models/password-health";
+import {
+  DialogService,
+  Icons,
+  NoItemsModule,
+  SearchModule,
+  TableDataSource,
+} from "@bitwarden/components";
 import { CardComponent } from "@bitwarden/tools-card";
 import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module";
 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 { openAppAtRiskMembersDialog } from "./app-at-risk-members-dialog.component";
+import { OrgAtRiskAppsDialogComponent } from "./org-at-risk-apps-dialog.component";
+import { OrgAtRiskMembersDialogComponent } from "./org-at-risk-members-dialog.component";
 import { RiskInsightsTabType } from "./risk-insights.component";

@Component({
@@ -23,30 +39,38 @@ import { RiskInsightsTabType } from "./risk-insights.component";
  imports: [CardComponent, HeaderModule, SearchModule, NoItemsModule, PipesModule, SharedModule],
 })
 export class CriticalApplicationsComponent implements OnInit {
-  protected dataSource = new TableDataSource<any>();
+  protected dataSource = new TableDataSource<ApplicationHealthReportDetailWithCriticalFlag>();
  protected selectedIds: Set<number> = new Set<number>();
  protected searchControl = new FormControl("", { nonNullable: true });
  private destroyRef = inject(DestroyRef);
  protected loading = false;
  protected organizationId: string;
+  protected applicationSummary = {} as ApplicationHealthReportSummary;
  noItemsIcon = Icons.Security;
-  // MOCK DATA
-  protected mockData = applicationTableMockData;
-  protected mockAtRiskMembersCount = 0;
-  protected mockAtRiskAppsCount = 0;
-  protected mockTotalMembersCount = 0;
-  protected mockTotalAppsCount = 0;

  ngOnInit() {
-    this.activatedRoute.paramMap
+    this.organizationId = this.activatedRoute.snapshot.paramMap.get("organizationId") ?? "";
+    combineLatest([
+      this.dataService.applications$,
+      this.criticalAppsService.getAppsListForOrg(this.organizationId),
+    ])
      .pipe(
        takeUntilDestroyed(this.destroyRef),
-        map(async (params) => {
-          this.organizationId = params.get("organizationId");
-          // TODO: use organizationId to fetch data
+        map(([applications, criticalApps]) => {
+          const criticalUrls = criticalApps.map((ca) => ca.uri);
+          const data = applications?.map((app) => ({
+            ...app,
+            isMarkedAsCritical: criticalUrls.includes(app.applicationName),
+          })) as ApplicationHealthReportDetailWithCriticalFlag[];
+          return data?.filter((app) => app.isMarkedAsCritical);
        }),
      )
-      .subscribe();
+      .subscribe((applications) => {
+        if (applications) {
+          this.dataSource.data = applications;
+          this.applicationSummary = this.reportService.generateApplicationsSummary(applications);
+        }
+      });
  }

  goToAllAppsTab = async () => {
@@ -57,13 +81,40 @@ export class CriticalApplicationsComponent implements OnInit {
  };

  constructor(
-    protected i18nService: I18nService,
    protected activatedRoute: ActivatedRoute,
    protected router: Router,
+    protected dataService: RiskInsightsDataService,
+    protected criticalAppsService: CriticalAppsService,
+    protected reportService: RiskInsightsReportService,
+    protected dialogService: DialogService,
  ) {
-    this.dataSource.data = []; //applicationTableMockData;
    this.searchControl.valueChanges
      .pipe(debounceTime(200), takeUntilDestroyed())
      .subscribe((v) => (this.dataSource.filter = v));
  }
+
+  showAppAtRiskMembers = async (applicationName: string) => {
+    openAppAtRiskMembersDialog(this.dialogService, {
+      members:
+        this.dataSource.data.find((app) => app.applicationName === applicationName)
+          ?.atRiskMemberDetails ?? [],
+      applicationName,
+    });
+  };
+
+  showOrgAtRiskMembers = async () => {
+    this.dialogService.open(OrgAtRiskMembersDialogComponent, {
+      data: this.reportService.generateAtRiskMemberList(this.dataSource.data),
+    });
+  };
+
+  showOrgAtRiskApps = async () => {
+    this.dialogService.open(OrgAtRiskAppsDialogComponent, {
+      data: this.reportService.generateAtRiskApplicationList(this.dataSource.data),
+    });
+  };
+
+  trackByFunction(_: number, item: ApplicationHealthReportDetailWithCriticalFlag) {
+    return item.applicationName;
+  }
 }