[ITEP-1648] Alert Configuration: Fix Name to alertDefTemplate/annotation.display_name (#87)

Co-authored-by: Matteo <matteo.scandolo@intel.com>
Co-authored-by: Matteo <teone@users.noreply.github.com>

Author: RPG-coder-intc

apps/admin/src/components/atoms/AlertDisplayName/AlertDisplayName.cy.tsx

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: (C) 2023 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { alertDefinitionOne } from "@orch-ui/utils";
+import AlertDisplayName from "./AlertDisplayName";
+import AlertDisplayNamePom from "./AlertDisplayName.pom";
+
+const pom = new AlertDisplayNamePom();
+describe("<AlertDisplayName/>", () => {
+  it("should render component with display_name", () => {
+    pom.interceptApis([pom.api.getAlertTemplate]);
+    cy.mount(<AlertDisplayName alertDefinition={alertDefinitionOne} />);
+    pom.waitForApis();
+
+    pom.root.should("not.contain.text", alertDefinitionOne.name);
+    pom.root.should("contain.text", "Host - Connection Lost");
+  });
+  it("should render component with name", () => {
+    pom.interceptApis([pom.api.getAlertTemplateError]);
+    cy.mount(<AlertDisplayName alertDefinition={alertDefinitionOne} />);
+    pom.waitForApis();
+
+    pom.root.should("contain.text", alertDefinitionOne.name);
+    pom.root.should("not.contain.text", "Host - Connection Lost");
+  });
+});

apps/admin/src/components/atoms/AlertDisplayName/AlertDisplayName.pom.ts

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: (C) 2023 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { omApi } from "@orch-ui/apis";
+import { CyApiDetails, CyPom } from "@orch-ui/tests";
+import { alertDefinitionTemplateOne } from "@orch-ui/utils";
+
+const dataCySelectors = [] as const;
+type Selectors = (typeof dataCySelectors)[number];
+
+type ApiAliases = "getAlertTemplate" | "getAlertTemplateError";
+
+const mockAlert = {
+  ...alertDefinitionTemplateOne,
+  alert: "alert-name",
+  annotations: {
+    ...alertDefinitionTemplateOne.annotations,
+    description: "Host $labels.host_uuid connection lost.",
+    display_name: "Host - Connection Lost",
+    summary: "Host has lost connection.",
+  },
+};
+
+const alertTemplateUrl = "**/alerts/definitions/**/template**";
+const alertTemplateEndpoints: CyApiDetails<
+  ApiAliases,
+  omApi.GetProjectAlertDefinitionRuleApiResponse
+> = {
+  getAlertTemplate: {
+    route: alertTemplateUrl,
+    statusCode: 200,
+    response: mockAlert,
+  },
+  getAlertTemplateError: {
+    route: alertTemplateUrl,
+    statusCode: 500,
+    networkError: true,
+  },
+};
+
+class AlertDisplayNamePom extends CyPom<Selectors, ApiAliases> {
+  constructor(public rootCy: string = "alertDisplayName") {
+    super(rootCy, [...dataCySelectors], alertTemplateEndpoints);
+  }
+}
+export default AlertDisplayNamePom;

apps/admin/src/components/atoms/AlertDisplayName/AlertDisplayName.tsx

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: (C) 2023 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { omApi } from "@orch-ui/apis";
+import { SquareSpinner } from "@orch-ui/components";
+import { SharedStorage } from "@orch-ui/utils";
+import { Text } from "@spark-design/react";
+
+const dataCy = "alertDisplayName";
+interface AlertDisplayNameProps {
+  alertDefinition: omApi.AlertDefinition;
+}
+const AlertDisplayName = ({ alertDefinition }: AlertDisplayNameProps) => {
+  const cy = { "data-cy": dataCy };
+  const {
+    data: alertDefinitionTemplate,
+    isSuccess,
+    isLoading,
+  } = omApi.useGetProjectAlertDefinitionRuleQuery(
+    {
+      alertDefinitionId: alertDefinition.id!,
+      projectName: SharedStorage.project?.name ?? "",
+    },
+    {
+      skip: !alertDefinition.id || !SharedStorage.project?.name,
+    },
+  );
+
+  return (
+    <div {...cy} className="alert-display-name">
+      <Text size="m">
+        {isSuccess &&
+        alertDefinitionTemplate.annotations &&
+        alertDefinitionTemplate.annotations["display_name"]
+          ? alertDefinitionTemplate.annotations["display_name"]
+          : alertDefinition.name}
+      </Text>
+      {isLoading && <SquareSpinner />}
+    </div>
+  );
+};
+
+export default AlertDisplayName;

apps/admin/src/components/organisms/AlertDefinitionsList/AlertDefinitionsList.cy.tsx

@@ -15,4 +15,13 @@ describe("<AlertDefinitionsList/>", () => {
     pom.root.should("exist");
     pom.table.getRows().should("have.length", multipleAlertDefinitions.length);
   });
+  it("should show alert definition name", () => {
+    pom.interceptApis([pom.api.alertDefinitionSingle]);
+    cy.mount(<AlertDefinitionsList />);
+    pom.waitForApis();
+    pom.alertDisplayNamePom.root.should(
+      "contain.text",
+      "Host - Connection Lost",
+    );
+  });
 });

apps/admin/src/components/organisms/AlertDefinitionsList/AlertDefinitionsList.pom.ts

@@ -6,12 +6,13 @@
 import { omApi } from "@orch-ui/apis";
 import { SiTablePom } from "@orch-ui/poms";
 import { CyApiDetails, CyPom } from "@orch-ui/tests";
-import { multipleAlertDefinitions } from "@orch-ui/utils";
+import { alertDefinitionOne, multipleAlertDefinitions } from "@orch-ui/utils";
+import AlertDisplayNamePom from "../../atoms/AlertDisplayName/AlertDisplayName.pom";
 
 const dataCySelectors = [] as const;
 type Selectors = (typeof dataCySelectors)[number];
 
-type ApiAliases = "alertDefinitionList";
+type ApiAliases = "alertDefinitionList" | "alertDefinitionSingle";
 
 const endpoints: CyApiDetails<
   ApiAliases,
@@ -23,13 +24,26 @@ const endpoints: CyApiDetails<
       alertDefinitions: multipleAlertDefinitions,
     },
   },
+  alertDefinitionSingle: {
+    route: "**/alerts/definitions",
+    response: {
+      alertDefinitions: [
+        {
+          ...alertDefinitionOne,
+          name: "Host - Connection Lost",
+        },
+      ],
+    },
+  },
 };
 
 class AlertDefinitionsListPom extends CyPom<Selectors, ApiAliases> {
   table: SiTablePom;
+  alertDisplayNamePom: AlertDisplayNamePom;
   constructor(public rootCy: string = "alertDefinitionsList") {
     super(rootCy, [...dataCySelectors], endpoints);
     this.table = new SiTablePom();
+    this.alertDisplayNamePom = new AlertDisplayNamePom();
   }
 }
 export default AlertDefinitionsListPom;

apps/admin/src/components/organisms/AlertDefinitionsList/AlertDefinitionsList.scss

@@ -16,18 +16,22 @@ import AlertDefinitionDuration, {
 } from "../../atoms/AlertDefinitionDuration/AlertDefinitionDuration";
 import AlertDefinitionEnable from "../../atoms/AlertDefinitionEnable/AlertDefinitionEnable";
 import AlertDefinitionThreshold from "../../atoms/AlertDefinitionThreshold/AlertDefinitionThreshold";
-import "./AlertDefinitionsList.scss";
+import AlertDisplayName from "../../atoms/AlertDisplayName/AlertDisplayName";
 
 const dataCy = "alertDefinitionsList";
 
 const AlertDefinitionsList = () => {
   const cy = { "data-cy": dataCy };
+
+  const dispatch = useAppDispatch();
+
   const [alertDefinitionsTableData, setAlertDefinitionsTableData] = useState<
     omApi.AlertDefinition[]
   >([]);
   const [actions, setActions] = useState<
     omApi.PatchProjectAlertDefinitionApiArg[]
   >([]);
+
   const [patchAlertDefinition] = omApi.usePatchProjectAlertDefinitionMutation();
   const {
     data: alertDefinitions,
@@ -38,10 +42,11 @@ const AlertDefinitionsList = () => {
   } = omApi.useGetProjectAlertDefinitionsQuery({
     projectName: SharedStorage.project?.name ?? "",
   });
+
   useEffect(() => {
     setAlertDefinitionsTableData(alertDefinitions?.alertDefinitions ?? []);
   }, [alertDefinitions, isSuccess]);
-  const dispatch = useAppDispatch();
+
   const updateAlertDefinitions = async () => {
     const requests: Promise<unknown>[] = [];
     if (actions && actions.length > 0) {
@@ -157,6 +162,7 @@ const AlertDefinitionsList = () => {
     newTableData.splice(index, 1, targetRow);
     setAlertDefinitionsTableData(newTableData);
   };
+
   const columns = [
     {
       Header: "Enabled",
@@ -173,6 +179,9 @@ const AlertDefinitionsList = () => {
     {
       Header: "Name",
       accessor: "name",
+      Cell: (table: { row: { original: omApi.AlertDefinition } }) => (
+        <AlertDisplayName alertDefinition={table.row.original} />
+      ),
     },
     {
       Header: "Threshold",

apps/admin/src/components/organisms/AlertDefinitionsList/AlertDefinitionsList.tsx

@@ -11,6 +11,7 @@ import { API_INTERVAL, SharedStorage } from "@orch-ui/utils";
 import { Button } from "@spark-design/react";
 import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
+import AlertDisplayName from "../../atoms/AlertDisplayName/AlertDisplayName";
 import AlertSource from "../../atoms/AlertSource/AlertSource";
 import AlertDrawer from "../AlertDrawer/AlertDrawer";
 import "./AlertsList.scss";
@@ -44,7 +45,7 @@ const AlertsList = () => {
       Header: "Alert",
       accessor: "alertDefinitionId",
       Cell: (table: { row: { original: omApi.Alert } }) => {
-        const filteredADs = alertDefinitions?.alertDefinitions?.filter(
+        const alertDefinition = alertDefinitions?.alertDefinitions?.find(
           (ad) => ad.id === table.row.original.alertDefinitionId,
         );
         return (
@@ -56,9 +57,11 @@ const AlertsList = () => {
               setIsOpen(true);
             }}
           >
-            {filteredADs && filteredADs.length > 0
-              ? filteredADs[0].name
-              : table.row.original.alertDefinitionId}
+            {alertDefinition ? (
+              <AlertDisplayName alertDefinition={alertDefinition} />
+            ) : (
+              table.row.original.alertDefinitionId
+            )}
           </Button>
         );
       },

apps/admin/src/components/organisms/AlertsList/AlertsList.tsx

@@ -6,6 +6,7 @@
 import "./src/components/atoms/AlertDefinitionDuration/AlertDefinitionDuration.cy.tsx";
 import "./src/components/atoms/AlertDefinitionEnable/AlertDefinitionEnable.cy.tsx";
 import "./src/components/atoms/AlertDefinitionThreshold/AlertDefinitionThreshold.cy.tsx";
+import "./src/components/atoms/AlertDisplayName/AlertDisplayName.cy.tsx";
 import "./src/components/atoms/AlertSource/AlertSource.cy.tsx";
 import "./src/components/atoms/SshHostsTable/SshHostsTable.cy.tsx";
 import "./src/components/atoms/SshKeyInUseByHostsCell/SshKeyInUseByHostsCell.cy.tsx";

apps/admin/unit-tests.cy.ts

@@ -6,7 +6,7 @@
 // SPDX-FileCopyrightText: (C) 2022 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-const fqdn = "kind.internal"
+const fqdn = "kind.internal";
 
 window.__RUNTIME_CONFIG__ = {
   AUTH: "true",
@@ -73,7 +73,7 @@ window.__RUNTIME_CONFIG__ = {
     CO: `https://api.${fqdn}`,
     INFRA: `https://api.${fqdn}`,
     MB: `https://api.${fqdn}`,
-    ALERT: `https://web-ui.${fqdn}/api`,
+    ALERT: `https://api.${fqdn}/`,
     TM: `https://api.${fqdn}/`,
   },
   VERSIONS: {