Fix Slow endpoint insight metric, update insight icons

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}

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);

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