Fix ticket open

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(

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

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} />;
   }
 

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
     }

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 {

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
     }

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,