Action Center: View discovered System Aggregate Results (#5653)

clients/admin-ui/cypress/e2e/action-center.cy.ts

@@ -46,7 +46,7 @@ describe("Action center", () => {
     });
   });
 
-  describe("Action center monitor results", () => {
+  describe("Action center monitor aggregate results", () => {
     const webMonitorKey = "my_web_monitor_2";
     const integrationMonitorKey = "My_New_BQ_Monitor";
     beforeEach(() => {
@@ -116,4 +116,60 @@ describe("Action center", () => {
       // TODO: mock pagination and also test skeleton loading state
     });
   });
+
+  describe("Action center system aggregate results", () => {
+    const webMonitorKey = "my_web_monitor_1";
+    beforeEach(() => {
+      cy.visit(`${ACTION_CENTER_ROUTE}/${webMonitorKey}`);
+    });
+    it("should display a breadcrumb", () => {
+      cy.getByTestId("page-breadcrumb").within(() => {
+        cy.get("a.ant-breadcrumb-link")
+          .should("contain", "All activity")
+          .should("have.attr", "href", ACTION_CENTER_ROUTE);
+        cy.contains("my_web_monitor_1").should("exist");
+      });
+    });
+    it("should render the aggregated system results in a table", () => {
+      cy.wait("@getSystemAggregateResults");
+      cy.getByTestId("column-system_name").should("exist");
+      cy.getByTestId("column-total_updates").should("exist");
+      cy.getByTestId("column-data_use").should("exist");
+      cy.getByTestId("column-locations").should("exist");
+      cy.getByTestId("column-domains").should("exist");
+      cy.getByTestId("column-actions").should("exist");
+      cy.getByTestId("search-bar").should("exist");
+      cy.getByTestId("pagination-btn").should("exist");
+      cy.getByTestId("row-0-col-system_name").within(() => {
+        cy.getByTestId("change-icon").should("exist"); // new result
+        cy.contains("Uncategorized assets").should("exist");
+      });
+      // data use column should be empty for uncategorized assets
+      cy.getByTestId("row-0-col-data_use").children().should("have.length", 0);
+      cy.getByTestId("row-1-col-system_name").within(() => {
+        cy.getByTestId("change-icon").should("not.exist"); // existing result
+        cy.contains("Google Tag Manager").should("exist");
+      });
+      // TODO: data use column should not be empty for other assets
+      // cy.getByTestId("row-1-col-data_use").children().should("not.have.length", 0);
+
+      // multiple locations
+      cy.getByTestId("row-2-col-locations").should("contain", "2 locations");
+      // single location
+      cy.getByTestId("row-3-col-locations").should("contain", "USA");
+
+      // multiple domains
+      cy.getByTestId("row-0-col-domains").should("contain", "29 domains");
+      // single domain
+      cy.getByTestId("row-3-col-domains").should(
+        "contain",
+        "analytics.google.com",
+      );
+    });
+    // it("should navigate to table view on row click", () => {
+    //   cy.getByTestId("row-1").click();
+    //   cy.url().should("contain", "fds.1046");
+    //   cy.getByTestId("page-breadcrumb").should("contain", "fds.1046");
+    // });
+  });
 });

clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-aggregate-results.json

@@ -0,0 +1,84 @@
+{
+  "items": [
+    {
+      "id": null,
+      "name": null,
+      "system_key": null,
+      "vendor_id": null,
+      "total_updates": 108,
+      "locations": ["USA"],
+      "domains": [
+        "alb.reddit.com",
+        "api.hubapi.com",
+        "app.revenuehero.io",
+        ".ethyca.com",
+        "ethyca.com",
+        "ethyca.fides-cdn.ethyca.com",
+        "forms.hscollectedforms.net",
+        "forms.hubspot.com",
+        "forms-na1.hsforms.com",
+        "googleads.g.doubleclick.net",
+        ".hsadspixel.net",
+        ".hsforms.com",
+        ".hs-scripts.com",
+        ".hubspot.com",
+        "js.hsadspixel.net",
+        "js.hs-analytics.net",
+        "js.hs-banner.com",
+        "js.hscollectedforms.net",
+        "js.hs-scripts.com",
+        "kit.fontawesome.com",
+        ".linkedin.com",
+        "pixel-config.reddit.com",
+        "px.ads.linkedin.com",
+        "snap.licdn.com",
+        "stats.g.doubleclick.net",
+        "track.hubspot.com",
+        "www.clickcease.com",
+        ".www.linkedin.com",
+        "www.redditstatic.com"
+      ]
+    },
+    {
+      "id": "system_key-72649f03-7a30-4758-9772-e74fca3b6788",
+      "name": "Google Tag Manager",
+      "system_key": "system_key-72649f03-7a30-4758-9772-e74fca3b6788",
+      "vendor_id": "fds.1046",
+      "total_updates": 10,
+      "locations": ["USA"],
+      "domains": [
+        "td.doubleclick.net",
+        "www.google.com",
+        "www.googletagmanager.com"
+      ]
+    },
+    {
+      "id": "system_key-652c8984-ade7-470b-bce4-7e184621be9d",
+      "name": "Hubspot",
+      "system_key": "system_key-652c8984-ade7-470b-bce4-7e184621be9d",
+      "vendor_id": "fds.1053",
+      "total_updates": 6,
+      "locations": ["USA", "Canada"],
+      "domains": [
+        "forms.hsforms.com",
+        ".hs-analytics.net",
+        ".hs-banner.com",
+        ".hsforms.net",
+        "js.hsforms.net"
+      ]
+    },
+    {
+      "id": "fds.1047",
+      "name": "Google Analytics",
+      "system_key": null,
+      "vendor_id": "fds.1047",
+      "total_updates": 1,
+      "locations": ["USA"],
+      "domains": ["analytics.google.com"]
+    }
+  ],
+  "total": 4,
+  "page": 1,
+  "size": 25,
+  "pages": 1
+}

clients/admin-ui/cypress/support/stubs.ts

@@ -512,6 +512,13 @@ export const stubActionCenter = () => {
     },
   }).as("getTranslationConfig");
   cy.intercept("GET", "/api/v1/plus/discovery-monitor/aggregate-results*", {
-    fixture: "detection-discovery/results/aggregate-results",
+    fixture: "detection-discovery/activity-center/aggregate-results",
   }).as("getMonitorResults");
+  cy.intercept(
+    "GET",
+    "/api/v1//plus/discovery-monitor/system-aggregate-results*",
+    {
+      fixture: "detection-discovery/activity-center/system-aggregate-results",
+    },
+  ).as("getSystemAggregateResults");
 };

clients/admin-ui/src/features/common/api.slice.ts

@@ -41,7 +41,6 @@ export const baseApi = createApi({
     "Languages",
     "Locations",
     "Messaging Templates",
-    "Monitor Summary",
     "Dictionary",
     "System Vendors",
     "Latest Scan",

clients/admin-ui/src/features/common/custom-fields/index.ts

@@ -2,5 +2,4 @@ export * from "./constants";
 export * from "./CustomFieldsList";
 export * from "./helpers";
 export * from "./hooks";
-export * from "./Layout";
 export * from "./types";

clients/admin-ui/src/features/data-discovery-and-detection/action-center/DisabledMonitorPage.tsx → clients/admin-ui/src/features/data-discovery-and-detection/action-center/DisabledMonitorsPage.tsx

@@ -2,23 +2,23 @@ import { AntAlert as Alert, AntFlex as Flex, Spinner } from "fidesui";
 
 import Layout from "~/features/common/Layout";
 
-interface DisabledMonitorPageProps {
+interface DisabledMonitorsPageProps {
   isConfigLoading: boolean;
 }
 
-const DISABLED_MONITOR_MESSAGE = "Action center is currently disabled.";
+const DISABLED_MONITORS_MESSAGE = "Action center is currently disabled.";
 
-export const DisabledMonitorPage = ({
+export const DisabledMonitorsPage = ({
   isConfigLoading,
-}: DisabledMonitorPageProps) => (
+}: DisabledMonitorsPageProps) => (
   <Layout title="Action center" mainProps={{ className: "h-full" }}>
     <Flex justify="center" align="center" className="h-full">
       {isConfigLoading ? (
         <Spinner color="minos.500" />
       ) : (
         <Alert
           message="Coming soon..."
-          description={DISABLED_MONITOR_MESSAGE}
+          description={DISABLED_MONITORS_MESSAGE}
           type="info"
           showIcon
         />

clients/admin-ui/src/features/data-discovery-and-detection/action-center/EmptyMonitorResult.tsx → clients/admin-ui/src/features/data-discovery-and-detection/action-center/EmptyMonitorsResult.tsx

@@ -3,7 +3,7 @@ import NextLink from "next/link";
 
 import { INTEGRATION_MANAGEMENT_ROUTE } from "~/features/common/nav/v2/routes";
 
-export const EmptyMonitorResult = () => (
+export const EmptyMonitorsResult = () => (
   <Empty
     image={Empty.PRESENTED_IMAGE_SIMPLE}
     description="All caught up! Set up an integration monitor to track your infrastructure in greater detail."

clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx

@@ -10,16 +10,17 @@ import {
   Icons,
 } from "fidesui";
 import NextLink from "next/link";
+import { useEffect, useState } from "react";
 
 import { ACTION_CENTER_ROUTE } from "~/features/common/nav/v2/routes";
 import { formatDate, getWebsiteIconUrl } from "~/features/common/utils";
 
-import { MonitorSummary } from "./types";
+import { MonitorAggregatedResults } from "./types";
 
 const { Text } = Typography;
 
 interface MonitorResultProps extends ListItemProps {
-  monitorSummary: MonitorSummary;
+  monitorSummary: MonitorAggregatedResults;
   showSkeleton?: boolean;
 }
 
@@ -28,9 +29,7 @@ export const MonitorResult = ({
   showSkeleton,
   ...props
 }: MonitorResultProps) => {
-  if (!monitorSummary) {
-    return null;
-  }
+  const [iconUrl, setIconUrl] = useState<string | undefined>(undefined);
 
   const {
     name,
@@ -54,7 +53,11 @@ export const MonitorResult = ({
       })
     : undefined;
 
-  const iconUrl = property ? getWebsiteIconUrl(property) : undefined;
+  useEffect(() => {
+    if (property) {
+      setIconUrl(getWebsiteIconUrl(property));
+    }
+  }, [property]);
 
   return (
     <List.Item data-testid={`monitor-result-${key}`} {...props}>

clients/admin-ui/src/features/data-discovery-and-detection/action-center/action-center.slice.ts

@@ -0,0 +1,48 @@
+import { baseApi } from "~/features/common/api.slice";
+import { PaginationQueryParams } from "~/types/common/PaginationQueryParams";
+
+import {
+  MonitorSummaryPaginatedResponse,
+  MonitorSystemAggregatePaginatedResponse,
+} from "./types";
+
+const actionCenterApi = baseApi.injectEndpoints({
+  endpoints: (build) => ({
+    getAggregateMonitorResults: build.query<
+      MonitorSummaryPaginatedResponse,
+      {
+        search?: string;
+      } & PaginationQueryParams
+    >({
+      query: ({ page = 1, size = 20, search }) => ({
+        url: `/plus/discovery-monitor/aggregate-results`,
+        params: { page, size, search, diff_status: "addition" },
+      }),
+      providesTags: ["Discovery Monitor Results"],
+    }),
+    getDiscoveredSystemAggregate: build.query<
+      MonitorSystemAggregatePaginatedResponse,
+      {
+        key: string;
+        search?: string;
+      } & PaginationQueryParams
+    >({
+      query: ({ key, page = 1, size = 20, search }) => ({
+        url: `/plus/discovery-monitor/system-aggregate-results`,
+        params: {
+          monitor_config_id: key,
+          page,
+          size,
+          search,
+          diff_status: "addition",
+        },
+      }),
+      providesTags: ["Discovery Monitor Results"],
+    }),
+  }),
+});
+
+export const {
+  useGetAggregateMonitorResultsQuery,
+  useGetDiscoveredSystemAggregateQuery,
+} = actionCenterApi;