From d5d44084ae98b89a77f982139cf3bfca6db03e31 Mon Sep 17 00:00:00 2001
From: Vedant Gupta <49195734+veds-g@users.noreply.github.com>
Date: Wed, 19 Feb 2025 11:11:30 +0530
Subject: [PATCH] fix: sorting metrics chart tooltip values (#2401)

Signed-off-by: veds-g <guptavedant2312@gmail.com>
---
 .../common/MetricsModalWrapper/index.tsx      |  23 +++-
 .../Metrics/partials/LineChart/index.tsx      | 103 ++++++++++++------
 2 files changed, 85 insertions(+), 41 deletions(-)

diff --git a/ui/src/components/common/MetricsModalWrapper/index.tsx b/ui/src/components/common/MetricsModalWrapper/index.tsx
index bbf296f209..72ddec0b85 100644
--- a/ui/src/components/common/MetricsModalWrapper/index.tsx
+++ b/ui/src/components/common/MetricsModalWrapper/index.tsx
@@ -49,12 +49,25 @@ export function MetricsModalWrapper({
   });
 
   const isClickable = useMemo(() => {
-    return (
+    if (
+      discoveredMetrics &&
       !discoveredMetricsError &&
-      !discoveredMetricsLoading &&
-      !disableMetricsCharts
-    );
-  }, [discoveredMetricsError, discoveredMetricsLoading, disableMetricsCharts]);
+      !discoveredMetricsLoading
+    ) {
+      return (
+        !disableMetricsCharts &&
+        discoveredMetrics?.data?.some(
+          (metric: any) => metric?.display_name === metricDisplayName
+        )
+      );
+    }
+    return false;
+  }, [
+    discoveredMetrics,
+    discoveredMetricsError,
+    discoveredMetricsLoading,
+    disableMetricsCharts,
+  ]);
 
   return (
     <Box>
diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx
index 829818ecfe..ed0c0b7cb1 100644
--- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx
+++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx
@@ -82,8 +82,14 @@ const CustomTooltip = ({
 }: TooltipProps & { displayName: string }) => {
   if (!active || !payload || !payload.length) return null;
 
-  const maxWidth =
-    Math.max(...payload.map((entry) => entry?.name?.length)) * 9.5;
+  // sorting tooltip based on values in descending order
+  payload?.sort((a, b) => {
+    const period1 = a?.value;
+    const period2 = b?.value;
+    return period2 - period1;
+  });
+
+  const maxWidth = Math.max(...payload.map((entry) => entry?.name?.length));
   const timestamp = payload[0]?.payload?.timestamp;
 
   return (
@@ -102,7 +108,7 @@ const CustomTooltip = ({
           <Box key={`item-${index}`} sx={{ display: "flex" }}>
             <Box
               sx={{
-                width: `${maxWidth / 9}rem`,
+                width: `${maxWidth + 1}rem`,
                 display: "inline-block",
                 paddingRight: "1rem",
                 color: entry?.color,
@@ -369,6 +375,12 @@ const LineChartComponent = ({
     [labelVal]: parseFloat(value),
   });
 
+  const periodOrder = {
+    "1m": 1,
+    "5m": 2,
+    "15m": 3,
+  };
+
   const updateChartData = useCallback(() => {
     if (!chartData) return;
 
@@ -377,15 +389,34 @@ const LineChartComponent = ({
     let filteredChartData = chartData;
     const label = groupByLabel(metricsReq?.dimension, metricsReq?.display_name);
 
-    if (Array.isArray(label) && label.length === 1 && label[0] === "container"){
-      filteredChartData = chartData?.filter((item) => {
-        return pod?.containers?.includes(item?.metric?.["container"])
-      })
+    if (
+      [VERTEX_PENDING_MESSAGES, MONO_VERTEX_PENDING_MESSAGES]?.includes(
+        metricsReq?.display_name
+      )
+    )
+      filteredChartData = filteredChartData
+        // Filter out default period for pending messages
+        ?.filter((item) => item?.metric?.["period"] !== "default")
+        ?.sort((a, b) => {
+          const period1: "1m" | "5m" | "15m" = a?.metric?.["period"];
+          const period2: "1m" | "5m" | "15m" = b?.metric?.["period"];
+          return (periodOrder[period1] || 0) - (periodOrder[period2] || 0);
+        });
+
+    if (
+      Array.isArray(label) &&
+      label.length === 1 &&
+      label[0] === "container"
+    ) {
+      filteredChartData = filteredChartData?.filter((item) => {
+        return pod?.containers?.includes(item?.metric?.["container"]);
+      });
     }
-    if (Array.isArray(label) && label.length === 1 && label[0] === "pod"){
-      filteredChartData = chartData?.filter((item) => {
-        return !item?.metric?.["pod"]?.includes("daemon")
-      })
+
+    if (Array.isArray(label) && label.length === 1 && label[0] === "pod") {
+      filteredChartData = filteredChartData?.filter((item) => {
+        return !item?.metric?.["pod"]?.includes("daemon");
+      });
     }
 
     filteredChartData?.forEach((item) => {
@@ -486,31 +517,31 @@ const LineChartComponent = ({
 
       {filtersList?.filter((filterEle: any) => !filterEle?.required)?.length >
         0 && (
-          <Box
-            sx={{
-              display: fromModal ? "none" : "flex",
-              alignItems: "center",
-              justifyContent: "space-around",
-              mt: "1rem",
-              mb: "2rem",
-              px: "6rem",
-            }}
-          >
-            <Box sx={{ mr: "1rem" }}>Filters</Box>
-            <FiltersDropdown
-              items={filtersList?.filter(
-                (filterEle: any) => !filterEle?.required
-              )}
-              namespaceId={namespaceId}
-              pipelineId={pipelineId}
-              type={type}
-              vertexId={vertexId}
-              setFilters={setFilters}
-              selectedPodName={pod?.name}
-              metric={metric}
-            />
-          </Box>
-        )}
+        <Box
+          sx={{
+            display: fromModal ? "none" : "flex",
+            alignItems: "center",
+            justifyContent: "space-around",
+            mt: "1rem",
+            mb: "2rem",
+            px: "6rem",
+          }}
+        >
+          <Box sx={{ mr: "1rem" }}>Filters</Box>
+          <FiltersDropdown
+            items={filtersList?.filter(
+              (filterEle: any) => !filterEle?.required
+            )}
+            namespaceId={namespaceId}
+            pipelineId={pipelineId}
+            type={type}
+            vertexId={vertexId}
+            setFilters={setFilters}
+            selectedPodName={pod?.name}
+            metric={metric}
+          />
+        </Box>
+      )}
 
       {isLoading && (
         <Box