From 30b82d1888d16ec1211ba3c496f30a9a53dc389a Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 29 Jan 2025 11:02:27 +0100
Subject: [PATCH] Fix Slow endpoint insight metric, update insight icons

---
 .../SlowEndpointInsightCard/index.tsx         | 14 +++++++---
 .../common/icons/16px/SoundWaveIcon.tsx       | 26 +++++++++++++++++++
 .../icons/16px/TwoHorizontalEndpointsIcon.tsx | 26 -------------------
 src/utils/getInsightTypeInfo.ts               |  4 +--
 4 files changed, 38 insertions(+), 32 deletions(-)
 create mode 100644 src/components/common/icons/16px/SoundWaveIcon.tsx
 delete mode 100644 src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SlowEndpointInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SlowEndpointInsightCard/index.tsx
index c8ee7945e..27bc8bd3e 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SlowEndpointInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SlowEndpointInsightCard/index.tsx
@@ -1,3 +1,4 @@
+import { convertToDuration } from "../../../../../../../utils/convertToDuration";
 import { getDurationString } from "../../../../../../../utils/getDurationString";
 import { roundTo } from "../../../../../../../utils/roundTo";
 import { Tag } from "../../../../../../common/v3/Tag";
@@ -21,7 +22,9 @@ export const SlowEndpointInsightCard = ({
   const diff =
     (insight.median.raw / insight.endpointsMedianOfMedians.raw - 1) * 100;
 
-  const durationString = getDurationString(insight.median);
+  const slowerByDurationString = getDurationString(
+    convertToDuration(insight.median.raw - insight.endpointsMedianOfMedians.raw)
+  );
 
   return (
     <InsightCard
@@ -34,7 +37,10 @@ export const SlowEndpointInsightCard = ({
               {roundTo(diff, 2)}%
             </s.DescriptionColumn>
             <KeyValue label={"Slower by"}>
-              <Tag content={durationString} title={durationString} />
+              <Tag
+                content={slowerByDurationString}
+                title={slowerByDurationString}
+              />
             </KeyValue>
           </ColumnsContainer>
         </s.ContentContainer>
@@ -45,8 +51,8 @@ export const SlowEndpointInsightCard = ({
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       viewMode={viewMode}
       mainMetric={
-        <Tooltip title={durationString}>
-          <span>{durationString}</span>
+        <Tooltip title={slowerByDurationString}>
+          <span>{slowerByDurationString}</span>
         </Tooltip>
       }
       onDismissalChange={onDismissalChange}
diff --git a/src/components/common/icons/16px/SoundWaveIcon.tsx b/src/components/common/icons/16px/SoundWaveIcon.tsx
new file mode 100644
index 000000000..a7bc24cc3
--- /dev/null
+++ b/src/components/common/icons/16px/SoundWaveIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import type { IconProps } from "../types";
+
+const SoundWaveIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 16 16"
+    >
+      <path
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M1 6.67v2M3.8 4v7.33M6.6 2v12m2.8-8.67V10m2.8-6.67V12M15 6.67v2"
+      />
+    </svg>
+  );
+};
+
+export const SoundWaveIcon = React.memo(SoundWaveIconComponent);
diff --git a/src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx b/src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx
deleted file mode 100644
index 8be9b845e..000000000
--- a/src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { useIconProps } from "../hooks";
-import type { IconProps } from "../types";
-
-const TwoHorizontalEndpointsIconComponent = (props: IconProps) => {
-  const { size, color } = useIconProps(props);
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      fill="none"
-      viewBox="0 0 16 16"
-    >
-      <path
-        fill={color}
-        d="M13 9c-.929 0-1.705.64-1.929 1.5H1v1h10.071c.2235.86 1 1.5 1.929 1.5 1.103 0 2-.897 2-2s-.897-2-2-2Zm0 3c-.5515 0-1-.4485-1-1s.4485-1 1-1 1 .4485 1 1-.4485 1-1 1Zm0-9c-.929 0-1.705.64-1.929 1.5H1v1h10.071c.2235.86 1 1.5 1.929 1.5 1.103 0 2-.897 2-2s-.897-2-2-2Zm0 3c-.5515 0-1-.4485-1-1s.4485-1 1-1 1 .4485 1 1-.4485 1-1 1Z"
-      />
-    </svg>
-  );
-};
-
-export const TwoHorizontalEndpointsIcon = React.memo(
-  TwoHorizontalEndpointsIconComponent
-);
diff --git a/src/utils/getInsightTypeInfo.ts b/src/utils/getInsightTypeInfo.ts
index 3c92f71a9..ad5bdb346 100644
--- a/src/utils/getInsightTypeInfo.ts
+++ b/src/utils/getInsightTypeInfo.ts
@@ -1,7 +1,7 @@
 import type { MemoExoticComponent } from "react";
 import * as descriptionProvider from "../components/common/InsightsDescription";
 import { PulseIcon } from "../components/common/icons/16px/PulseIcon";
-import { TwoHorizontalEndpointsIcon } from "../components/common/icons/16px/TwoHorizontalEndpointsIcon";
+import { SoundWaveIcon } from "../components/common/icons/16px/SoundWaveIcon";
 import { AlarmClockIcon } from "../components/common/icons/AlarmClockIcon";
 import { BottleneckIcon } from "../components/common/icons/BottleneckIcon";
 import { ClockWithTicksIcon } from "../components/common/icons/ClockWithTicksIcon";
@@ -153,7 +153,7 @@ export const getInsightTypeInfo = (
       documentationLink: SESSION_IN_VIEW_DOCUMENTATION_URL
     },
     [InsightType.EndpointChattyApiV2]: {
-      icon: TwoHorizontalEndpointsIcon,
+      icon: SoundWaveIcon,
       label: "Excessive API Calls Detected",
       description: descriptionProvider.ChattyApiDescription,
       documentationLink: CHATTY_API_ISSUE_DOCUMENTATION_URL