console: add tooltip to db latency badge

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9525
GitOrigin-RevId: e4bd2629946ccb24d609d2643e8032e5d8a1992c

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/LatencyBadge.tsx

@@ -1,38 +1,72 @@
+import { useMemo } from 'react';
 import { FaCheck, FaExclamationTriangle, FaMinusCircle } from 'react-icons/fa';
+import ToolTip from '../../../../../../lib/components/Common/Tooltip/Tooltip';
+import { Badge, BadgeColor } from '../../../../../new-components/Badge';
 import { Latency } from '../../../types';
-import { Badge } from '../../../../../new-components/Badge';
-import React from 'react';
 
-export const LatencyBadge = ({
-  latencies,
-  dataSourceName,
-}: {
+type AvgLatency = Latency['avgLatency'];
+
+type GetBadgeProps = {
+  color: BadgeColor;
+  icon: React.ReactNode;
+  label: string;
+};
+
+type LatencyBadgeProps = {
   latencies: Latency[];
   dataSourceName: string;
-}) => {
-  const currentDataSourceLatencyInfo = latencies.find(
-    latencyInfo => latencyInfo.dataSourceName === dataSourceName
+};
+
+const getMessage = (avgLatency: AvgLatency) =>
+  `Latency: ${Math.ceil(avgLatency)} ms`;
+
+const getBadgeProps = (avgLatency: AvgLatency): GetBadgeProps => {
+  if (avgLatency < 100) {
+    return {
+      color: 'green',
+      icon: <FaCheck className="mr-xs" />,
+      label: 'Connection',
+    };
+  } else if (avgLatency < 200) {
+    return {
+      color: 'yellow',
+      icon: <FaMinusCircle className="mr-xs" />,
+      label: 'Acceptable',
+    };
+  } else {
+    return {
+      color: 'red',
+      icon: <FaExclamationTriangle className="mr-xs" />,
+      label: 'Elevated Latency',
+    };
+  }
+};
+
+export const LatencyBadge = ({
+  latencies = [],
+  dataSourceName,
+}: LatencyBadgeProps) => {
+  const currentDataSourceLatencyInfo = useMemo(
+    () =>
+      latencies.find(
+        latencyInfo => latencyInfo.dataSourceName === dataSourceName
+      ),
+    [latencies, dataSourceName]
   );
 
-  if (!currentDataSourceLatencyInfo) return null;
+  if (!currentDataSourceLatencyInfo) {
+    return null;
+  }
 
-  if (currentDataSourceLatencyInfo.avgLatency < 100)
-    return (
-      <Badge color="green">
-        <FaCheck className="mr-xs" /> Connection
-      </Badge>
-    );
-
-  if (currentDataSourceLatencyInfo.avgLatency < 200)
-    return (
-      <Badge color="yellow">
-        <FaMinusCircle className="mr-xs" /> Acceptable
-      </Badge>
-    );
+  const { avgLatency } = currentDataSourceLatencyInfo || {};
+  const message = getMessage(avgLatency);
+  const badgeProps = getBadgeProps(avgLatency);
 
   return (
-    <Badge color="red">
-      <FaExclamationTriangle className="mr-xs" /> Elevated Latency
-    </Badge>
+    <ToolTip message={message} placement="top">
+      <Badge color={badgeProps.color}>
+        {badgeProps.icon} {badgeProps.label}
+      </Badge>
+    </ToolTip>
   );
 };