feat(coral): View environments - Add time of last update of environme…

…nt status (#1847) - Update Environment type - Add last update time data to EnvironmentStatus - Fix unknown state for time of last update --------- Signed-off-by: Mathieu Anderson <[email protected]>
Aiven-Open · Oct 5, 2023 · 79e8144 · 79e8144
1 parent 7e13033
commit 79e8144
Show file tree

Hide file tree

Showing 17 changed files with 200 additions and 40 deletions.
diff --git a/.../app/features/configuration/environments/Kafka/components/KafkaEnvironmentsTable.test.tsx b/.../app/features/configuration/environments/Kafka/components/KafkaEnvironmentsTable.test.tsx
@@ -5,6 +5,8 @@ import { Environment } from "src/domain/environment/environment-types";
 import { mockIntersectionObserver } from "src/services/test-utils/mock-intersection-observer";
 import { customRender } from "src/services/test-utils/render-with-wrappers";
 
+const TEST_UPDATE_TIME = "${TEST_UPDATE_TIME}";
+
 const mockedUseToast = jest.fn();
 jest.mock("@aivenio/aquarium", () => ({
   ...jest.requireActual("@aivenio/aquarium"),
@@ -23,6 +25,7 @@ const mockEnvironments: Environment[] = [
       maxPartitions: 3,
       maxRepFactor: 4,
     },
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
   createEnvironment({
     name: "TST",
@@ -35,6 +38,7 @@ const mockEnvironments: Environment[] = [
       maxPartitions: 3,
       maxRepFactor: 5,
     },
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
   createEnvironment({
     name: "PROD",
@@ -47,6 +51,7 @@ const mockEnvironments: Environment[] = [
       maxPartitions: 6,
       maxRepFactor: 8,
     },
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
 ];
 
@@ -198,7 +203,7 @@ describe("KafkaEnvironmentsTable.tsx", () => {
             : "Unknown";
 
         const status = within(row).getByRole("cell", {
-          name: statusText,
+          name: `${statusText} Last update: ${TEST_UPDATE_TIME} UTC`,
         });
 
         expect(status).toBeVisible();

diff --git a/...l/src/app/features/configuration/environments/Kafka/components/KafkaEnvironmentsTable.tsx b/...l/src/app/features/configuration/environments/Kafka/components/KafkaEnvironmentsTable.tsx
@@ -21,6 +21,7 @@ interface KafkaEnvironmentsTableRow {
   replicationFactor: { default: number; max: number };
   partition: { default: number; max: number };
   status: Environment["envStatus"];
+  envStatusTimeString: Environment["envStatusTimeString"];
 }
 
 const KafkaEnvironmentsTable = (props: KafkaEnvironmentsTableProps) => {
@@ -93,9 +94,19 @@ const KafkaEnvironmentsTable = (props: KafkaEnvironmentsTableProps) => {
     {
       type: "custom",
       headerName: "Status",
-      width: 150,
-      UNSAFE_render: ({ status, id }: KafkaEnvironmentsTableRow) => {
-        return <EnvironmentStatus envId={id} initialEnvStatus={status} />;
+      width: 450,
+      UNSAFE_render: ({
+        status,
+        id,
+        envStatusTimeString,
+      }: KafkaEnvironmentsTableRow) => {
+        return (
+          <EnvironmentStatus
+            envId={id}
+            initialEnvStatus={status}
+            initialUpdateTime={envStatusTimeString}
+          />
+        );
       },
     },
   ];
@@ -115,6 +126,7 @@ const KafkaEnvironmentsTable = (props: KafkaEnvironmentsTableProps) => {
         max: env.params?.maxPartitions || 0,
       },
       status: env.envStatus,
+      envStatusTimeString: env.envStatusTimeString,
     };
   });
 

diff --git a/...configuration/environments/KafkaConnect/components/KafkaConnectEnvironmentsTable.test.tsx b/...configuration/environments/KafkaConnect/components/KafkaConnectEnvironmentsTable.test.tsx
@@ -5,6 +5,8 @@ import { Environment } from "src/domain/environment/environment-types";
 import { mockIntersectionObserver } from "src/services/test-utils/mock-intersection-observer";
 import { customRender } from "src/services/test-utils/render-with-wrappers";
 
+const TEST_UPDATE_TIME = "14-Sep-2023 12:30:38 UTC";
+
 const mockedUseToast = jest.fn();
 jest.mock("@aivenio/aquarium", () => ({
   ...jest.requireActual("@aivenio/aquarium"),
@@ -18,20 +20,23 @@ const mockEnvironments: Environment[] = [
     id: "1",
     clusterName: "DEV_CL",
     envStatus: "ONLINE",
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
   createEnvironment({
     type: "kafkaconnect",
     name: "TST",
     id: "2",
     clusterName: "TST_CL",
     envStatus: "OFFLINE",
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
   createEnvironment({
     type: "kafkaconnect",
     name: "PROD",
     id: "3",
     clusterName: "PROD_CL",
     envStatus: "NOT_KNOWN",
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
 ];
 
@@ -149,7 +154,7 @@ describe("KafkaConnectEnvironmentsTable.tsx", () => {
             : "Unknown";
 
         const status = within(row).getByRole("cell", {
-          name: statusText,
+          name: `${statusText} Last update: ${TEST_UPDATE_TIME} UTC`,
         });
 
         expect(status).toBeVisible();

diff --git a/...ures/configuration/environments/KafkaConnect/components/KafkaConnectEnvironmentsTable.tsx b/...ures/configuration/environments/KafkaConnect/components/KafkaConnectEnvironmentsTable.tsx
@@ -13,6 +13,7 @@ interface KafkaConnectEnvironmentsTableRow {
   clusterName: Environment["clusterName"];
   tenantName: Environment["tenantName"];
   status: Environment["envStatus"];
+  envStatusTimeString: Environment["envStatusTimeString"];
 }
 
 const KafkaConnectEnvironmentsTable = (
@@ -39,9 +40,19 @@ const KafkaConnectEnvironmentsTable = (
     {
       type: "custom",
       headerName: "Status",
-      width: 150,
-      UNSAFE_render: ({ status, id }: KafkaConnectEnvironmentsTableRow) => {
-        return <EnvironmentStatus envId={id} initialEnvStatus={status} />;
+      width: 450,
+      UNSAFE_render: ({
+        status,
+        id,
+        envStatusTimeString,
+      }: KafkaConnectEnvironmentsTableRow) => {
+        return (
+          <EnvironmentStatus
+            envId={id}
+            initialEnvStatus={status}
+            initialUpdateTime={envStatusTimeString}
+          />
+        );
       },
     },
   ];
@@ -53,6 +64,7 @@ const KafkaConnectEnvironmentsTable = (
       clusterName: env.clusterName,
       tenantName: env.tenantName,
       status: env.envStatus,
+      envStatusTimeString: env.envStatusTimeString,
     };
   });
 

diff --git a/...iguration/environments/SchemaRegistry/components/SchemaRegistryEnvironmentsTable.test.tsx b/...iguration/environments/SchemaRegistry/components/SchemaRegistryEnvironmentsTable.test.tsx
@@ -5,6 +5,8 @@ import { Environment } from "src/domain/environment/environment-types";
 import { mockIntersectionObserver } from "src/services/test-utils/mock-intersection-observer";
 import { customRender } from "src/services/test-utils/render-with-wrappers";
 
+const TEST_UPDATE_TIME = "14-Sep-2023 12:30:38 UTC";
+
 const mockedUseToast = jest.fn();
 jest.mock("@aivenio/aquarium", () => ({
   ...jest.requireActual("@aivenio/aquarium"),
@@ -19,6 +21,7 @@ const mockEnvironments: Environment[] = [
     clusterName: "DEV_CL",
     envStatus: "ONLINE",
     associatedEnv: { id: "1", name: "DEV" },
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
   createEnvironment({
     type: "schemaregistry",
@@ -27,6 +30,7 @@ const mockEnvironments: Environment[] = [
     clusterName: "TST_CL",
     envStatus: "OFFLINE",
     associatedEnv: { id: "2", name: "TST" },
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
   createEnvironment({
     type: "schemaregistry",
@@ -35,6 +39,7 @@ const mockEnvironments: Environment[] = [
     clusterName: "PROD_CL",
     envStatus: "NOT_KNOWN",
     associatedEnv: { id: "3", name: "PROD" },
+    envStatusTimeString: TEST_UPDATE_TIME,
   }),
 ];
 
@@ -172,7 +177,7 @@ describe("SchemaRegistryEnvironmentsTable.tsx", () => {
             : "Unknown";
 
         const status = within(row).getByRole("cell", {
-          name: statusText,
+          name: `${statusText} Last update: ${TEST_UPDATE_TIME} UTC`,
         });
 
         expect(status).toBeVisible();

diff --git a/.../configuration/environments/SchemaRegistry/components/SchemaRegistryEnvironmentsTable.tsx b/.../configuration/environments/SchemaRegistry/components/SchemaRegistryEnvironmentsTable.tsx
@@ -14,6 +14,7 @@ interface SchemaRegistryEnvironmentsTableRow {
   tenantName: Environment["tenantName"];
   associatedEnv: Environment["associatedEnv"];
   status: Environment["envStatus"];
+  envStatusTimeString: Environment["envStatusTimeString"];
 }
 
 const SchemaRegistryEnvironmentsTable = (
@@ -53,9 +54,19 @@ const SchemaRegistryEnvironmentsTable = (
     {
       type: "custom",
       headerName: "Status",
-      width: 150,
-      UNSAFE_render: ({ status, id }: SchemaRegistryEnvironmentsTableRow) => {
-        return <EnvironmentStatus envId={id} initialEnvStatus={status} />;
+      width: 450,
+      UNSAFE_render: ({
+        status,
+        id,
+        envStatusTimeString,
+      }: SchemaRegistryEnvironmentsTableRow) => {
+        return (
+          <EnvironmentStatus
+            envId={id}
+            initialEnvStatus={status}
+            initialUpdateTime={envStatusTimeString}
+          />
+        );
       },
     },
   ];
@@ -68,6 +79,7 @@ const SchemaRegistryEnvironmentsTable = (
       tenantName: env.tenantName,
       associatedEnv: env.associatedEnv,
       status: env.envStatus,
+      envStatusTimeString: env.envStatusTimeString,
     };
   });
 

diff --git a/coral/src/app/features/configuration/environments/components/EnvironmentStatus.test.tsx b/coral/src/app/features/configuration/environments/components/EnvironmentStatus.test.tsx
@@ -24,9 +24,16 @@ describe("EnvironmentStatus", () => {
     });
 
     it("renders correct Status chip for ONLINE and refresh button", () => {
-      customRender(<EnvironmentStatus envId="1" initialEnvStatus="ONLINE" />, {
-        queryClient: true,
-      });
+      customRender(
+        <EnvironmentStatus
+          envId="1"
+          initialUpdateTime={""}
+          initialEnvStatus="ONLINE"
+        />,
+        {
+          queryClient: true,
+        }
+      );
       const text = screen.getByText("Working");
       const button = screen.getByRole("button", {
         name: "Refresh Environment status",
@@ -37,9 +44,16 @@ describe("EnvironmentStatus", () => {
     });
 
     it("renders correct Status chip for OFFLINE and refresh button", () => {
-      customRender(<EnvironmentStatus envId="1" initialEnvStatus="OFFLINE" />, {
-        queryClient: true,
-      });
+      customRender(
+        <EnvironmentStatus
+          envId="1"
+          initialUpdateTime={""}
+          initialEnvStatus="OFFLINE"
+        />,
+        {
+          queryClient: true,
+        }
+      );
       const text = screen.getByText("Not working");
       const button = screen.getByRole("button", {
         name: "Refresh Environment status",
@@ -51,7 +65,11 @@ describe("EnvironmentStatus", () => {
 
     it("renders correct Status chip for NOT_KNOWN and refresh button", () => {
       customRender(
-        <EnvironmentStatus envId="1" initialEnvStatus="NOT_KNOWN" />,
+        <EnvironmentStatus
+          envId="1"
+          initialUpdateTime={""}
+          initialEnvStatus="NOT_KNOWN"
+        />,
         {
           queryClient: true,
         }
@@ -73,9 +91,16 @@ describe("EnvironmentStatus", () => {
     beforeEach(() => {
       console.error = jest.fn();
 
-      customRender(<EnvironmentStatus envId="1" initialEnvStatus="ONLINE" />, {
-        queryClient: true,
-      });
+      customRender(
+        <EnvironmentStatus
+          envId="1"
+          initialUpdateTime={""}
+          initialEnvStatus="ONLINE"
+        />,
+        {
+          queryClient: true,
+        }
+      );
     });
 
     afterEach(() => {