DBZ-6757: Fixes to the connector metrics (#821)

src/app/apis/connector/connector.service.ts

@@ -215,6 +215,18 @@ export class ConnectorService extends BaseService {
     );
     return this.httpGet<any>(endpoint);
   }
+
+  public getConnectorMetrics(baseHref: string, connectorType: string, connectorName: string): Promise<any> {
+    this.logger?.info(
+      "[ConnectorService] Getting the Connector metrics:" + connectorName ,
+    );
+    const endpoint: string = this.endpoint(
+      "debezium/:connectorType/connectors/:connectorName/metrics",
+      baseHref,
+      { connectorType, connectorName },
+    );
+    return this.httpGet<any>(endpoint);
+  }
 
 
   /**
@@ -385,19 +397,19 @@ export class ConnectorService extends BaseService {
   /**
    * Get the available connector metrics for the supplied clusterId and connector name
    */
-  public getConnectorMetrics(
-    clusterId: number,
-    connectorName: string
-  ): Promise<any[]> {
-    this.logger?.info("[ConnectorService] Getting the connector metrics.");
+  // public getConnectorMetrics(
+  //   clusterId: number,
+  //   connectorName: string
+  // ): Promise<any[]> {
+  //   this.logger?.info("[ConnectorService] Getting the connector metrics.");
 
-    const endpoint: string = this.endpoint(
-      "/connectors/:clusterId/:connectorName/metrics",
-      "",
-      { clusterId, connectorName }
-    );
-    return this.httpGet<any[]>(endpoint);
-  }
+  //   const endpoint: string = this.endpoint(
+  //     "/connectors/:clusterId/:connectorName/metrics",
+  //     "",
+  //     { clusterId, connectorName }
+  //   );
+  //   return this.httpGet<any[]>(endpoint);
+  // }
 
   /**
    * Get the Connector config

src/app/components/ConnectorStatusComponent.css

@@ -0,0 +1,4 @@
+.connector-status_task-status-text .pf-v5-c-helper-text__item{
+    /* text-align: center; */
+    display: grid !important;
+}

src/app/components/ConnectorStatusComponent.tsx

@@ -1,45 +1,70 @@
-import { Label } from "@patternfly/react-core";
+import { getTaskStatus } from "@app/utils";
+import { HelperText, HelperTextItem, Label } from "@patternfly/react-core";
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
   ExclamationTriangleIcon,
   PauseCircleIcon,
 } from "@patternfly/react-icons";
 import React from "react";
+import './ConnectorStatusComponent.css'
 
 interface ConnectorStatusComponentProps {
   status: string;
+  task?: boolean;
 }
 
+type variantType =
+  | "success"
+  | "warning"
+  | "error"
+  | "default"
+  | "indeterminate"
+  | undefined;
+
 export const ConnectorStatusComponent: React.FC<
   ConnectorStatusComponentProps
-> = ({ status }) => {
+> = ({ status, task }) => {
   let labelColor = undefined;
+  let variant = undefined as variantType;
   let icon: React.ReactNode;
 
   switch (status) {
     case "RUNNING":
       labelColor = "green";
+      variant = "success";
       icon = <CheckCircleIcon />;
       break;
     case "STOPPED":
       labelColor = "orange";
+      variant = "warning";
       icon = <ExclamationTriangleIcon />;
       break;
     case "PAUSED":
+      variant = "warning";
       labelColor = "blue";
       icon = <PauseCircleIcon />;
       break;
     case "FAILED":
     case "DESTROYED":
       labelColor = "red";
+      variant = "error";
       icon = <ExclamationCircleIcon />;
       break;
     default:
       labelColor = "blue";
+      variant = "success";
       break;
   }
 
+  if (task)
+    return (
+      <HelperText className="connector-status_task-status-text">
+        <HelperTextItem variant={variant} hasIcon>
+          {status}
+        </HelperTextItem>
+      </HelperText>
+    );
   return (
     <Label
       color={

src/app/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './usePostWithReturnApi';
 export * from './useFetchApi';
-export * from './usePostWithReturnApi';
+export * from './usePostWithReturnApi';
+export * from './useFetchApiMultiVariableApi';

src/app/hooks/useFetchApiMultiVariableApi.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { FetchApiResult } from "./useFetchApi";
+
+function useFetchApiMultiVariableApi<T>(
+  url: string | null,
+  api: any,
+  serviceRef: any,
+  multiVariable: any,
+  pollingInterval?: number
+): FetchApiResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let ignore = false;
+
+    const fetchData = async () => {
+      try {
+        const apiCall = api.bind(serviceRef);
+        const response = await apiCall(url, ...multiVariable);
+        setData(response);
+        setIsLoading(false);
+      } catch (error) {
+        setIsLoading(false);
+        setError(error as Error);
+
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    if (url) {
+      fetchData();
+    }
+
+    if (pollingInterval) {
+      const intervalId = setInterval(() => {
+          if (!ignore) {
+              fetchData();
+          }
+      }, pollingInterval);
+
+      return () => {
+          clearInterval(intervalId);
+          ignore = true;
+      };
+  }
+
+  return () => {
+      ignore = true;
+  };
+
+  }, [api, serviceRef, url, pollingInterval]);
+
+  return { data, isLoading, error };
+}
+
+export default useFetchApiMultiVariableApi;