From be99bb5dd3e4ca27dda189996f0cb0083763638e Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Mon, 4 Mar 2024 23:05:00 +0200
Subject: [PATCH 1/2] fix types

---
 src/components/Insights/index.tsx             | 20 ++++++++-----------
 .../EndpointNPlusOneTicket.stories.tsx        | 10 +++++++++-
 .../EndpointNPlusOneInsightTicket/index.tsx   | 14 +++----------
 .../SpanBottleneckInsightTicket.stories.tsx   | 11 +++++++++-
 .../SpanBottleneckInsightTicket/index.tsx     |  8 +++-----
 5 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx
index 733f7cd92..a826d5435 100644
--- a/src/components/Insights/index.tsx
+++ b/src/components/Insights/index.tsx
@@ -33,20 +33,20 @@ import { ScalingIssueInsightTicket } from "./tickets/ScalingIssueInsightTicket";
 import { ScalingIssueInsightTicketByRootCause } from "./tickets/ScalingIssueInsightTicketByRootCause";
 import { SpanBottleneckInsightTicket } from "./tickets/SpanBottleneckInsightTicket";
 import {
+  isEndpointBottleneckInsight,
   isEndpointHighNumberOfQueriesInsight,
   isEndpointQueryOptimizationInsight,
-  isEndpointSlowestSpansInsight,
-  isEndpointSuspectedNPlusOneInsight,
+  isEndpointSpanNPlusOneInsight,
   isSpanEndpointBottleneckInsight,
   isSpanNPlusOneInsight,
   isSpanQueryOptimizationInsight,
   isSpanScalingBadlyInsight
 } from "./typeGuards";
 import {
+  EndpointBottleneckInsight,
   EndpointHighNumberOfQueriesInsight,
   EndpointQueryOptimizationInsight,
-  EndpointSlowestSpansInsight,
-  EndpointSuspectedNPlusOneInsight,
+  EndpointSpanNPlusOneInsight,
   GenericCodeObjectInsight,
   InsightTicketInfo,
   InsightsData,
@@ -81,12 +81,8 @@ const renderInsightTicket = (
     return <NPlusOneInsightTicket data={ticketData} onClose={onClose} />;
   }
 
-  if (
-    isEndpointSuspectedNPlusOneInsight(data.insight) &&
-    data.spanCodeObjectId
-  ) {
-    const ticketData =
-      data as InsightTicketInfo<EndpointSuspectedNPlusOneInsight>;
+  if (isEndpointSpanNPlusOneInsight(data.insight) && data.spanCodeObjectId) {
+    const ticketData = data as InsightTicketInfo<EndpointSpanNPlusOneInsight>;
     return (
       <EndpointNPlusOneInsightTicket data={ticketData} onClose={onClose} />
     );
@@ -97,8 +93,8 @@ const renderInsightTicket = (
     return <BottleneckInsightTicket data={ticketData} onClose={onClose} />;
   }
 
-  if (isEndpointSlowestSpansInsight(data.insight) && data.spanCodeObjectId) {
-    const ticketData = data as InsightTicketInfo<EndpointSlowestSpansInsight>;
+  if (isEndpointBottleneckInsight(data.insight) && data.spanCodeObjectId) {
+    const ticketData = data as InsightTicketInfo<EndpointBottleneckInsight>;
     return <SpanBottleneckInsightTicket data={ticketData} onClose={onClose} />;
   }
 
diff --git a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/EndpointNPlusOneTicket.stories.tsx b/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/EndpointNPlusOneTicket.stories.tsx
index b96238cf4..3df9e3a86 100644
--- a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/EndpointNPlusOneTicket.stories.tsx
+++ b/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/EndpointNPlusOneTicket.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { EndpointNPlusOneInsightTicket } from ".";
 import { mockedEndpointNPlusOneInsight } from "../../EndpointNPlusOneInsight/mockData";
+import { InsightType } from "../../types";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof EndpointNPlusOneInsightTicket> = {
@@ -19,7 +20,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     data: {
-      insight: mockedEndpointNPlusOneInsight,
+      insight: {
+        ...mockedEndpointNPlusOneInsight,
+        type: InsightType.EndpointSpanNPlusOneV2,
+        span: {
+          ...mockedEndpointNPlusOneInsight.spans[0],
+          requestPercentage: 0.5
+        }
+      },
       spanCodeObjectId:
         mockedEndpointNPlusOneInsight.spans[0].clientSpan.spanCodeObjectId
     }
diff --git a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx b/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx
index 8c0be4913..83ecd9fdf 100644
--- a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx
+++ b/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx
@@ -4,10 +4,7 @@ import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel";
 import { intersperse } from "../../../../utils/intersperse";
 import { ConfigContext } from "../../../common/App/ConfigContext";
 import { InsightJiraTicket } from "../../InsightJiraTicket";
-import {
-  EndpointSuspectedNPlusOneInsight,
-  SpanNPlusOneInsight
-} from "../../types";
+import { EndpointSpanNPlusOneInsight, SpanNPlusOneInsight } from "../../types";
 import { useEndpointDataSource } from "../common";
 import { CodeLocations } from "../common/CodeLocations";
 import { CommitInfos } from "../common/CommitInfos";
@@ -16,15 +13,10 @@ import { NPlusOneAffectedEndpoints } from "../common/NPlusOneAffectedEndpoints";
 import { InsightTicketProps } from "../types";
 
 export const EndpointNPlusOneInsightTicket = (
-  props: InsightTicketProps<EndpointSuspectedNPlusOneInsight>
+  props: InsightTicketProps<EndpointSpanNPlusOneInsight>
 ) => {
   const config = useContext(ConfigContext);
-  const span = props.data.insight.spans.find(
-    (x) =>
-      (x.internalSpan?.spanCodeObjectId &&
-        x.internalSpan.spanCodeObjectId === props.data.spanCodeObjectId) ||
-      x.clientSpan.spanCodeObjectId === props.data.spanCodeObjectId
-  );
+  const span = props.data.insight.span;
   const spanInfo = span?.internalSpan || span?.clientSpan || null;
 
   const {
diff --git a/src/components/Insights/tickets/SpanBottleneckInsightTicket/SpanBottleneckInsightTicket.stories.tsx b/src/components/Insights/tickets/SpanBottleneckInsightTicket/SpanBottleneckInsightTicket.stories.tsx
index b40414aec..ebecf8069 100644
--- a/src/components/Insights/tickets/SpanBottleneckInsightTicket/SpanBottleneckInsightTicket.stories.tsx
+++ b/src/components/Insights/tickets/SpanBottleneckInsightTicket/SpanBottleneckInsightTicket.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { SpanBottleneckInsightTicket } from ".";
 import { mockedSpanBottleneckInsight } from "../../SpanBottleneckInsight/mockData";
+import { InsightType } from "../../types";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof SpanBottleneckInsightTicket> = {
@@ -19,7 +20,15 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     data: {
-      insight: mockedSpanBottleneckInsight,
+      insight: {
+        ...mockedSpanBottleneckInsight,
+        type: InsightType.EndpointBottleneck,
+        span: {
+          ...mockedSpanBottleneckInsight.spans[0],
+          requestPercentage: 0.4,
+          avgFractionWhenBeingBottleneck: 0.3
+        }
+      },
       spanCodeObjectId:
         mockedSpanBottleneckInsight.spans[0].spanInfo.spanCodeObjectId
     }
diff --git a/src/components/Insights/tickets/SpanBottleneckInsightTicket/index.tsx b/src/components/Insights/tickets/SpanBottleneckInsightTicket/index.tsx
index 8764f2022..aecbd4bfc 100644
--- a/src/components/Insights/tickets/SpanBottleneckInsightTicket/index.tsx
+++ b/src/components/Insights/tickets/SpanBottleneckInsightTicket/index.tsx
@@ -4,7 +4,7 @@ import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel";
 import { intersperse } from "../../../../utils/intersperse";
 import { InsightJiraTicket } from "../../InsightJiraTicket";
 import {
-  EndpointSlowestSpansInsight,
+  EndpointBottleneckInsight,
   SpanEndpointBottleneckInsight
 } from "../../types";
 import { BottleneckEndpoints } from "../common/BottleneckEndpoints";
@@ -15,11 +15,9 @@ import { useEndpointDataSource } from "../common/useEndpointDataSource";
 import { InsightTicketProps } from "../types";
 
 export const SpanBottleneckInsightTicket = (
-  props: InsightTicketProps<EndpointSlowestSpansInsight>
+  props: InsightTicketProps<EndpointBottleneckInsight>
 ) => {
-  const span = props.data.insight.spans.find(
-    (x) => x.spanInfo.spanCodeObjectId === props.data.spanCodeObjectId
-  );
+  const span = props.data.insight.span;
 
   const {
     commitInfos,

From cfafbc6d0b8c9932bd4eeb5086230796f63055f3 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 4 Mar 2024 22:48:01 +0100
Subject: [PATCH 2/2] Fix Top usage table

---
 .../ExcessiveAPICallsInsight/index.tsx        |  3 +--
 .../common/insights/TopUsageInsight/index.tsx | 22 ++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
index 10345d218..2e4b2fc40 100644
--- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
+++ b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
@@ -57,9 +57,8 @@ export const ExcessiveAPICallsInsight = (
                   onClick={() => handleLinkClick(spanCodeObjectId)}
                   buttons={[
                     config.isJaegerEnabled && traceId && (
-                      <Tooltip title={"Open trace"}>
+                      <Tooltip title={"Open trace"} key={"open-trace"}>
                         <Button
-                          key={"trace"}
                           icon={TargetIcon}
                           onClick={() =>
                             handleTraceButtonClick(
diff --git a/src/components/Insights/common/insights/TopUsageInsight/index.tsx b/src/components/Insights/common/insights/TopUsageInsight/index.tsx
index 79fd68c56..70cfc11ac 100644
--- a/src/components/Insights/common/insights/TopUsageInsight/index.tsx
+++ b/src/components/Insights/common/insights/TopUsageInsight/index.tsx
@@ -4,8 +4,10 @@ import {
   getCoreRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { usePagination } from "../../../../../hooks/usePagination";
+import { usePrevious } from "../../../../../hooks/usePrevious";
+import { isNumber } from "../../../../../typeGuards/isNumber";
 import { InsightType } from "../../../../../types";
 import { roundTo } from "../../../../../utils/roundTo";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
@@ -25,12 +27,26 @@ const PAGE_SIZE = 3;
 
 export const TopUsageInsight = (props: TopUsageInsightProps) => {
   const config = useContext(ConfigContext);
-
+  const [data, setData] = useState({
+    pageItems: props.insight.flows.slice(0, PAGE_SIZE)
+  });
   const [pageItems, page, setPage] = usePagination(
     props.insight.flows,
     PAGE_SIZE,
     props.insight.codeObjectId
   );
+  const previousPage = usePrevious(page);
+  const previousCodeObjectId = usePrevious(props.insight.codeObjectId);
+
+  useEffect(() => {
+    if (
+      (previousCodeObjectId &&
+        previousCodeObjectId !== props.insight.codeObjectId) ||
+      (isNumber(previousPage) && previousPage !== page)
+    ) {
+      setData({ pageItems });
+    }
+  }, [previousCodeObjectId, props.insight, previousPage, page, pageItems]);
 
   const handleServiceLinkClick = (spanCodeObjectId?: string) => {
     spanCodeObjectId &&
@@ -177,7 +193,7 @@ export const TopUsageInsight = (props: TopUsageInsightProps) => {
   ];
 
   const table = useReactTable({
-    data: pageItems,
+    data: data.pageItems,
     columns,
     getCoreRowModel: getCoreRowModel()
   });