Update insight cards

src/components/Insights/InsightsPage/index.tsx

@@ -13,33 +13,41 @@ import { EmptyState } from "../../common/EmptyState";
 import { CardsIcon } from "../../common/icons/CardsIcon";
 import { DurationBreakdownInsight } from "../DurationBreakdownInsight";
 import { EndpointQueryOptimizationInsight } from "../EndpointQueryOptimizationInsight";
-import { NPlusOneInsight } from "../NPlusOneInsight";
 import { QueryOptimizationInsight } from "../QueryOptimizationInsight";
-import { RequestBreakdownInsight } from "../RequestBreakdownInsight";
 import { ScalingIssueInsight } from "../ScalingIssueInsight";
-import { SessionInViewInsight } from "../SessionInViewInsight";
 import { TopUsageInsight } from "../TopUsageInsight";
 import { actions } from "../actions";
 import { DurationInsight } from "../common/insights/DurationInsight";
+import { EndpointBottleneckInsight } from "../common/insights/EndpointBottleneckInsight";
+import { EndpointNPlusOneInsight } from "../common/insights/EndpointNPlusOneInsight";
+import { EndpointSlowdownSourceInsight } from "../common/insights/EndpointSlowdownSourceInsight";
 import { ExcessiveAPICallsInsight } from "../common/insights/ExcessiveAPICallsInsight";
 import { HighNumberOfQueriesInsight } from "../common/insights/HighNumberOfQueriesInsight";
+import { RequestBreakdownInsight } from "../common/insights/RequestBreakdownInsight";
+import { SessionInViewInsight } from "../common/insights/SessionInViewInsight";
 import { SlowEndpointInsight } from "../common/insights/SlowEndpointInsight";
+import { SpanEndpointBottleneckInsight } from "../common/insights/SpanEndpointBottleneckInsight";
+import { SpanNPlusOneInsight } from "../common/insights/SpanNPlusOneInsight";
 import { SpanNexusInsight } from "../common/insights/SpanNexusInsight";
 import { TrafficInsight } from "../common/insights/TrafficInsight";
 import { Description } from "../styles";
 import { trackingEvents } from "../tracking";
 import {
   isChattyApiEndpointInsight,
+  isEndpointBottleneckInsight,
   isEndpointBreakdownInsight,
   isEndpointHighNumberOfQueriesInsight,
   isEndpointHighUsageInsight,
   isEndpointLowUsageInsight,
   isEndpointNormalUsageInsight,
   isEndpointQueryOptimizationInsight,
+  isEndpointSlowdownSourceInsight,
+  isEndpointSpanNPlusOneInsight,
   isSessionInViewEndpointInsight,
   isSlowEndpointInsight,
   isSpanDurationBreakdownInsight,
   isSpanDurationsInsight,
+  isSpanEndpointBottleneckInsight,
   isSpanNPlusOneInsight,
   isSpanNexusInsight,
   isSpanQueryOptimizationInsight,
@@ -220,33 +228,33 @@ const renderInsightCard = (
     );
   }
 
-  // if (isSpanEndpointBottleneckInsight(insight)) {
-  //   return (
-  //     <BottleneckInsight
-  //       key={insight.id}
-  //       insight={insight}
-  //       onAssetLinkClick={handleAssetLinkClick}
-  //       onRecalculate={handleRecalculate}
-  //       onRefresh={onRefresh}
-  //       onJiraTicketCreate={onJiraTicketCreate}
-  //       isJiraHintEnabled={isJiraHintEnabled}
-  //     />
-  //   );
-  // }
-
-  // if (isEndpointSlowestSpansInsight(insight)) {
-  //   return (
-  //     <SpanBottleneckInsight
-  //       key={insight.id}
-  //       insight={insight}
-  //       onAssetLinkClick={handleAssetLinkClick}
-  //       onRecalculate={handleRecalculate}
-  //       onRefresh={onRefresh}
-  //       onJiraTicketCreate={onJiraTicketCreate}
-  //       isJiraHintEnabled={isJiraHintEnabled}
-  //     />
-  //   );
-  // }
+  if (isEndpointBottleneckInsight(insight)) {
+    return (
+      <EndpointBottleneckInsight
+        key={insight.id}
+        insight={insight}
+        onAssetLinkClick={handleAssetLinkClick}
+        onRecalculate={handleRecalculate}
+        onRefresh={onRefresh}
+        onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
+      />
+    );
+  }
+
+  if (isSpanEndpointBottleneckInsight(insight)) {
+    return (
+      <SpanEndpointBottleneckInsight
+        key={insight.id}
+        insight={insight}
+        onAssetLinkClick={handleAssetLinkClick}
+        onRecalculate={handleRecalculate}
+        onRefresh={onRefresh}
+        onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
+      />
+    );
+  }
 
   if (isSlowEndpointInsight(insight)) {
     return (
@@ -274,24 +282,24 @@ const renderInsightCard = (
     );
   }
 
-  // if (isEndpointSuspectedNPlusOneInsight(insight)) {
-  //   return (
-  //     <EndpointNPlusOneInsight
-  //       key={insight.id}
-  //       insight={insight}
-  //       onAssetLinkClick={handleAssetLinkClick}
-  //       onTraceButtonClick={handleTraceButtonClick}
-  //       onRecalculate={handleRecalculate}
-  //       onRefresh={onRefresh}
-  //       onJiraTicketCreate={onJiraTicketCreate}
-  //       isJiraHintEnabled={isJiraHintEnabled}
-  //     />
-  //   );
-  // }
+  if (isEndpointSpanNPlusOneInsight(insight)) {
+    return (
+      <EndpointNPlusOneInsight
+        key={insight.id}
+        insight={insight}
+        onAssetLinkClick={handleAssetLinkClick}
+        onTraceButtonClick={handleTraceButtonClick}
+        onRecalculate={handleRecalculate}
+        onRefresh={onRefresh}
+        onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
+      />
+    );
+  }
 
   if (isSpanNPlusOneInsight(insight)) {
     return (
-      <NPlusOneInsight
+      <SpanNPlusOneInsight
         key={insight.id}
         insight={insight}
         onAssetLinkClick={handleAssetLinkClick}
@@ -320,17 +328,17 @@ const renderInsightCard = (
     );
   }
 
-  // if (isEndpointDurationSlowdownInsight(insight)) {
-  //   return (
-  //     <DurationSlowdownSourceInsight
-  //       key={insight.id}
-  //       insight={insight}
-  //       onAssetLinkClick={handleAssetLinkClick}
-  //       onRecalculate={handleRecalculate}
-  //       onRefresh={onRefresh}
-  //     />
-  //   );
-  // }
+  if (isEndpointSlowdownSourceInsight(insight)) {
+    return (
+      <EndpointSlowdownSourceInsight
+        key={insight.id}
+        insight={insight}
+        onAssetLinkClick={handleAssetLinkClick}
+        onRecalculate={handleRecalculate}
+        onRefresh={onRefresh}
+      />
+    );
+  }
 
   if (isEndpointBreakdownInsight(insight)) {
     return (

src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { SpanBottleneckEndpoints } from ".";
+import { SpanEndpointBottleneckInsight } from ".";
 import { mockedBottleneckInsight } from "../../../BottleneckInsight/mockData";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta: Meta<typeof SpanBottleneckEndpoints> = {
-  title: "Insights/common/insights/SpanBottleneckEndpoints",
-  component: SpanBottleneckEndpoints,
+const meta: Meta<typeof SpanEndpointBottleneckInsight> = {
+  title: "Insights/common/insights/SpanEndpointBottleneckInsight",
+  component: SpanEndpointBottleneckInsight,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen"

src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx

@@ -13,7 +13,7 @@ import { ListItem } from "../../InsightCard/ListItem";
 import { Select } from "../../InsightCard/Select";
 import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
-import { SpanEndpointBottleneckEndpointsProps } from "./types";
+import { SpanEndpointBottleneckInsightProps } from "./types";
 
 const renderOptions = (
   endpoints: BottleneckEndpointInfo[],
@@ -38,8 +38,8 @@ const renderOptions = (
   });
 };
 
-export const SpanBottleneckEndpoints = (
-  props: SpanEndpointBottleneckEndpointsProps
+export const SpanEndpointBottleneckInsight = (
+  props: SpanEndpointBottleneckInsightProps
 ) => {
   const [selectedEndpoint, setSelectedEndpoint] = useState(
     props.insight?.slowEndpoints.length ? props.insight.slowEndpoints[0] : null

src/components/Insights/common/insights/SpanEndpointBottleneckInsight/types.ts

@@ -4,7 +4,7 @@ import {
   SpanEndpointBottleneckInsight
 } from "../../../types";
 
-export interface SpanEndpointBottleneckEndpointsProps extends InsightProps {
+export interface SpanEndpointBottleneckInsightProps extends InsightProps {
   insight: SpanEndpointBottleneckInsight;
 
   onAssetLinkClick: (