From d1c901a33c9d9cfe2356499db3e3b20862461089 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 4 Mar 2024 19:20:23 +0100
Subject: [PATCH 1/2] Handle nullable endpoint list

---
 .../Insights/BottleneckInsight/index.tsx      |  4 ++-
 .../Insights/NPlusOneInsight/index.tsx        |  4 ++-
 .../QueryOptimizationInsight/index.tsx        |  3 +-
 .../Insights/ScalingIssueInsight/index.tsx    | 13 +++++----
 .../insights/ScalingIssueInsight/index.tsx    | 28 +++++++++----------
 .../SpanEndpointBottleneckInsight.stories.tsx | 12 ++++----
 .../SpanEndpointBottleneckInsight/index.tsx   | 18 ++++++------
 .../insights/SpanNPlusOneInsight/index.tsx    | 19 +++++--------
 .../SpanQueryOptimizationInsight/index.tsx    |  7 +++--
 .../tickets/BottleneckInsightTicket/index.tsx |  5 ++--
 .../tickets/NPlusOneInsightTicket/index.tsx   |  6 ++--
 .../BottleneckEndpoints.stories.tsx           | 10 ++++---
 .../common/BottleneckEndpoints/index.tsx      |  2 +-
 .../NPlusOneAffectedEndpoints.stories.tsx     | 10 ++++---
 .../NPlusOneAffectedEndpoints/index.tsx       |  2 +-
 .../QueryOptimizationEndpoints.stories.tsx    | 10 ++++---
 .../QueryOptimizationEndpoints/index.tsx      |  2 +-
 .../ScalingIssueAffectedEndpoints/index.tsx   |  4 +--
 src/components/Insights/types.ts              | 24 ++++++++--------
 19 files changed, 96 insertions(+), 87 deletions(-)

diff --git a/src/components/Insights/BottleneckInsight/index.tsx b/src/components/Insights/BottleneckInsight/index.tsx
index 34c8d41b3..dca3e6e1a 100644
--- a/src/components/Insights/BottleneckInsight/index.tsx
+++ b/src/components/Insights/BottleneckInsight/index.tsx
@@ -24,6 +24,8 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
       props.onJiraTicketCreate(props.insight, undefined, event);
   };
 
+  const slowEndpoints = props.insight.slowEndpoints || [];
+
   return (
     <InsightCard
       spanInfo={props.insight.spanInfo}
@@ -31,7 +33,7 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
       content={
         <>
           <s.EndpointList>
-            {props.insight.slowEndpoints.map((endpoint, i) => {
+            {slowEndpoints.map((endpoint, i) => {
               const endpointName = `${
                 endpoint.endpointInfo.serviceName
               }:${trimEndpointScheme(endpoint.endpointInfo.route)}`;
diff --git a/src/components/Insights/NPlusOneInsight/index.tsx b/src/components/Insights/NPlusOneInsight/index.tsx
index d85fe011b..bb7fa678a 100644
--- a/src/components/Insights/NPlusOneInsight/index.tsx
+++ b/src/components/Insights/NPlusOneInsight/index.tsx
@@ -44,6 +44,8 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => {
   const spanCodeObjectId = props.insight.clientSpanCodeObjectId || undefined;
   const traceId = props.insight.traceId;
 
+  const endpoints = props.insight.endpoints || [];
+
   return (
     <InsightCard
       data={props.insight}
@@ -93,7 +95,7 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => {
           </s.Stats>
           <Description>Affected endpoints:</Description>
           <s.EndpointList>
-            {props.insight.endpoints.map((x) => {
+            {endpoints.map((x) => {
               const spanCodeObjectId = x.endpointInfo.entrySpanCodeObjectId;
               const route = trimEndpointScheme(x.endpointInfo.route);
 
diff --git a/src/components/Insights/QueryOptimizationInsight/index.tsx b/src/components/Insights/QueryOptimizationInsight/index.tsx
index 9b34c906b..f2a14505d 100644
--- a/src/components/Insights/QueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/QueryOptimizationInsight/index.tsx
@@ -49,6 +49,7 @@ export const QueryOptimizationInsight = (
   const spanCodeObjectId =
     props.insight.spanInfo?.spanCodeObjectId || undefined;
   const traceId = props.insight.traceId;
+  const endpoints = props.insight.endpoints || [];
 
   return (
     <InsightCard
@@ -102,7 +103,7 @@ export const QueryOptimizationInsight = (
           </s.Stats>
           <Description>Affected endpoints:</Description>
           <s.EndpointList>
-            {props.insight.endpoints.map((x) => {
+            {endpoints.map((x) => {
               const spanCodeObjectId = x.endpointInfo.spanCodeObjectId;
               const route = trimEndpointScheme(x.endpointInfo.route);
 
diff --git a/src/components/Insights/ScalingIssueInsight/index.tsx b/src/components/Insights/ScalingIssueInsight/index.tsx
index 6e98ffda2..78f94f607 100644
--- a/src/components/Insights/ScalingIssueInsight/index.tsx
+++ b/src/components/Insights/ScalingIssueInsight/index.tsx
@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { InsightType } from "../../../types";
 import { getDurationString } from "../../../utils/getDurationString";
+import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../utils/trimEndpointScheme";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { Button } from "../../common/Button";
@@ -9,14 +10,12 @@ import { ChartIcon } from "../../common/icons/ChartIcon";
 import { CrosshairIcon } from "../../common/icons/CrosshairIcon";
 import { InsightCard } from "../InsightCard";
 import { Criticality } from "../common/Criticality";
+import { JiraButton } from "../common/JiraButton";
 import { Description, Link } from "../styles";
+import { trackingEvents } from "../tracking";
 import { Trace } from "../types";
 import * as s from "./styles";
 import { ScalingIssueInsightProps } from "./types";
-import { JiraButton } from "../common/JiraButton";
-import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
-import { trackingEvents } from "../tracking";
-import { ButtonsContainer } from "./styles";
 
 export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
   const config = useContext(ConfigContext);
@@ -55,6 +54,8 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
       props.onJiraTicketCreate(props.insight, spanCodeObjectId, event);
   };
 
+  const affectedEndpoints = props.insight.affectedEndpoints || [];
+
   return (
     <InsightCard
       data={props.insight}
@@ -131,10 +132,10 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
               })}
             </s.List>
           )}
-          {props.insight.affectedEndpoints.length > 0 && (
+          {affectedEndpoints.length > 0 && (
             <s.List>
               <Description>Affected endpoints:</Description>
-              {props.insight.affectedEndpoints.map((endpoint) => {
+              {affectedEndpoints.map((endpoint) => {
                 const endpointRoute = trimEndpointScheme(endpoint.route);
 
                 return (
diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
index 0d2c2eaeb..3119f6d44 100644
--- a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
+++ b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
@@ -20,8 +20,9 @@ import { ScalingIssueInsightProps } from "./types";
 const PAGE_SIZE = 3;
 export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
   const config = useContext(ConfigContext);
+  const affectedEndpoints = props.insight.affectedEndpoints || [];
   const [pageItems, page, setPage] = usePagination(
-    props.insight.affectedEndpoints,
+    affectedEndpoints,
     PAGE_SIZE,
     props.insight.codeObjectId
   );
@@ -120,22 +121,21 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
             </KeyValue>
           </ColumnsContainer>
           {renderRootCause(props.insight.rootCauseSpans)}
-          {props.insight.affectedEndpoints.length > 0 && (
+          {affectedEndpoints.length > 0 && (
             <s.List>
               <Description>Affected endpoints:</Description>
-              {props.insight.affectedEndpoints.length > 0 &&
-                pageItems.map((endpoint) => {
-                  const endpointRoute = trimEndpointScheme(endpoint.route);
-                  return (
-                    <s.EndpointListItem
-                      key={endpoint.route}
-                      onClick={() => handleLinkClick(endpoint.spanCodeObjectId)}
-                      name={endpointRoute}
-                    />
-                  );
-                })}
+              {pageItems.map((endpoint) => {
+                const endpointRoute = trimEndpointScheme(endpoint.route);
+                return (
+                  <s.EndpointListItem
+                    key={endpoint.route}
+                    onClick={() => handleLinkClick(endpoint.spanCodeObjectId)}
+                    name={endpointRoute}
+                  />
+                );
+              })}
               <Pagination
-                itemsCount={props.insight.affectedEndpoints.length}
+                itemsCount={affectedEndpoints.length}
                 page={page}
                 pageSize={PAGE_SIZE}
                 onPageChange={setPage}
diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx
index e8f572581..9b784d56c 100644
--- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx
+++ b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx
@@ -16,19 +16,21 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const mockedSlowEndpoints = mockedBottleneckInsight.slowEndpoints || [];
+
 export const Default: Story = {
   args: {
     insight: {
       ...mockedBottleneckInsight,
       slowEndpoints: [
-        ...mockedBottleneckInsight.slowEndpoints,
+        ...mockedSlowEndpoints,
         {
-          ...mockedBottleneckInsight.slowEndpoints[0],
+          ...mockedSlowEndpoints[0],
           requestPercentage: 100,
           endpointInfo: {
-            ...mockedBottleneckInsight.slowEndpoints[0].endpointInfo,
-            route: `${mockedBottleneckInsight.slowEndpoints[0].endpointInfo.route}1`,
-            spanCodeObjectId: `${mockedBottleneckInsight.slowEndpoints[0].endpointInfo.spanCodeObjectId}1`
+            ...mockedSlowEndpoints[0].endpointInfo,
+            route: `${mockedSlowEndpoints[0].endpointInfo.route}1`,
+            spanCodeObjectId: `${mockedSlowEndpoints[0].endpointInfo.spanCodeObjectId}1`
           }
         }
       ]
diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
index f9bd93a2c..63eed93d4 100644
--- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
@@ -40,8 +40,9 @@ const renderOptions = (
 export const SpanEndpointBottleneckInsight = (
   props: SpanEndpointBottleneckInsightProps
 ) => {
+  const slowEndpoints = props.insight.slowEndpoints || [];
   const [selectedEndpoint, setSelectedEndpoint] = useState(
-    props.insight?.slowEndpoints.length ? props.insight.slowEndpoints[0] : null
+    slowEndpoints.length > 0 ? slowEndpoints[0] : null
   );
 
   const handleSpanLinkClick = (spanCodeObjectId?: string) => {
@@ -57,9 +58,7 @@ export const SpanEndpointBottleneckInsight = (
       props.onJiraTicketCreate(props.insight, undefined, event);
   };
 
-  const endpoints = props.insight.slowEndpoints;
-
-  if (endpoints.length === 0) {
+  if (slowEndpoints.length === 0) {
     return null;
   }
 
@@ -75,21 +74,20 @@ export const SpanEndpointBottleneckInsight = (
       content={
         <ContentContainer>
           <Details>
-            <Description>Affected Endpoints ({endpoints.length})</Description>
+            <Description>
+              Affected Endpoints ({slowEndpoints.length})
+            </Description>
             <Select
               value={selectedEndpoint?.endpointInfo.spanCodeObjectId}
               onChange={(selectedOption) => {
                 const selected =
-                  endpoints.find(
+                  slowEndpoints.find(
                     (x) => x.endpointInfo.spanCodeObjectId === selectedOption
                   ) || null;
 
                 setSelectedEndpoint(selected);
               }}
-              options={renderOptions(
-                props.insight.slowEndpoints,
-                handleSpanLinkClick
-              )}
+              options={renderOptions(slowEndpoints, handleSpanLinkClick)}
             />
           </Details>
           {selectedEndpoint && (
diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
index 8aece59cb..f6528920c 100644
--- a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
@@ -40,17 +40,15 @@ const renderOptions = (
   });
 
 export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
-  const {
-    insight: { type, endpoints, ticketLink }
-  } = props;
-
+  const endpoints = props.insight.endpoints || [];
   const config = useContext(ConfigContext);
   const [selectedEndpoint, setSelectedEndpoint] = useState(
-    props.insight.endpoints.length ? props.insight.endpoints[0] : null
+    endpoints.length ? endpoints[0] : null
   );
 
   const handleSpanLinkClick = (spanCodeObjectId?: string) => {
-    spanCodeObjectId && props.onAssetLinkClick(spanCodeObjectId, type);
+    spanCodeObjectId &&
+      props.onAssetLinkClick(spanCodeObjectId, props.insight.type);
   };
 
   const handleTraceButtonClick = (
@@ -63,7 +61,7 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
 
   const handleCreateJiraTicketButtonClick = (event: string) => {
     sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: type
+      insightType: props.insight.type
     });
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(props.insight, undefined, event);
@@ -104,10 +102,7 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
 
                 setSelectedEndpoint(selected);
               }}
-              options={renderOptions(
-                props.insight.endpoints,
-                handleSpanLinkClick
-              )}
+              options={renderOptions(endpoints, handleSpanLinkClick)}
             />
           </Details>
 
@@ -137,7 +132,7 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
       onRefresh={props.onRefresh}
       onJiraButtonClick={handleCreateJiraTicketButtonClick}
       jiraTicketInfo={{
-        ticketLink,
+        ticketLink: props.insight.ticketLink,
         isHintEnabled: props.isJiraHintEnabled,
         spanCodeObjectId: props.insight.spanInfo?.spanCodeObjectId
       }}
diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
index c3ea11ab2..6287a8f53 100644
--- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
@@ -20,8 +20,9 @@ export const SpanQueryOptimizationInsight = (
   props: QueryOptimizationInsightProps
 ) => {
   const config = useContext(ConfigContext);
+  const endpoints = props.insight.endpoints || [];
   const [pageItems, page, setPage] = usePagination(
-    props.insight.endpoints,
+    endpoints,
     PAGE_SIZE,
     props.insight.codeObjectId
   );
@@ -83,7 +84,7 @@ export const SpanQueryOptimizationInsight = (
             </KeyValue>
             <KeyValue label={"Database"}>{props.insight.dbName}</KeyValue>
           </ColumnsContainer>
-          {props.insight.endpoints.length > 0 && (
+          {endpoints.length > 0 && (
             <>
               <Description>Affected endpoints:</Description>
               <s.EndpointList>
@@ -99,7 +100,7 @@ export const SpanQueryOptimizationInsight = (
                   );
                 })}
                 <Pagination
-                  itemsCount={props.insight.endpoints.length}
+                  itemsCount={endpoints.length}
                   page={page}
                   pageSize={PAGE_SIZE}
                   onPageChange={setPage}
diff --git a/src/components/Insights/tickets/BottleneckInsightTicket/index.tsx b/src/components/Insights/tickets/BottleneckInsightTicket/index.tsx
index 4e684034c..5db1b0693 100644
--- a/src/components/Insights/tickets/BottleneckInsightTicket/index.tsx
+++ b/src/components/Insights/tickets/BottleneckInsightTicket/index.tsx
@@ -19,10 +19,9 @@ export const BottleneckInsightTicket = (
       props.data.insight
     );
 
+  const slowEndpoints = props.data.insight.slowEndpoints || [];
   const services = [
-    ...new Set(
-      props.data.insight.slowEndpoints.map((x) => x.endpointInfo.serviceName)
-    )
+    ...new Set(slowEndpoints.map((x) => x.endpointInfo.serviceName))
   ];
   const serviceString = services.length > 0 ? services.join(", ") : "";
 
diff --git a/src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx b/src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx
index cf5ccdaa9..f026c76c8 100644
--- a/src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx
+++ b/src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx
@@ -22,10 +22,10 @@ export const NPlusOneInsightTicket = (
     );
   const config = useContext(ConfigContext);
 
+  const endpoints = props.data.insight.endpoints || [];
+
   const services = [
-    ...new Set(
-      props.data.insight.endpoints.map((x) => x.endpointInfo.serviceName)
-    )
+    ...new Set(endpoints.map((x) => x.endpointInfo.serviceName))
   ];
   const serviceString = services.length > 0 ? services.join(", ") : "";
 
diff --git a/src/components/Insights/tickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx b/src/components/Insights/tickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx
index b961ed0a1..a134de993 100644
--- a/src/components/Insights/tickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx
+++ b/src/components/Insights/tickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx
@@ -16,17 +16,19 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const mockedSlowEndpoints = mockedBottleneckInsight.slowEndpoints || [];
+
 export const Default: Story = {
   args: {
     insight: {
       ...mockedBottleneckInsight,
       slowEndpoints: [
-        ...mockedBottleneckInsight.slowEndpoints,
+        ...mockedSlowEndpoints,
         {
-          ...mockedBottleneckInsight.slowEndpoints[0],
+          ...mockedSlowEndpoints[0],
           endpointInfo: {
-            ...mockedBottleneckInsight.slowEndpoints[0].endpointInfo,
-            route: `${mockedBottleneckInsight.slowEndpoints[0].endpointInfo.route}1`
+            ...mockedSlowEndpoints[0].endpointInfo,
+            route: `${mockedSlowEndpoints[0].endpointInfo.route}1`
           }
         }
       ]
diff --git a/src/components/Insights/tickets/common/BottleneckEndpoints/index.tsx b/src/components/Insights/tickets/common/BottleneckEndpoints/index.tsx
index 6b53fbb2e..af575ee54 100644
--- a/src/components/Insights/tickets/common/BottleneckEndpoints/index.tsx
+++ b/src/components/Insights/tickets/common/BottleneckEndpoints/index.tsx
@@ -9,7 +9,7 @@ export const BottleneckEndpoints = (props: BottleneckEndpointsProps) => {
     return null;
   }
 
-  const endpoints = props.insight.slowEndpoints;
+  const endpoints = props.insight.slowEndpoints || [];
 
   if (endpoints.length === 0) {
     return null;
diff --git a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/NPlusOneAffectedEndpoints.stories.tsx b/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/NPlusOneAffectedEndpoints.stories.tsx
index e540eef54..f0632124c 100644
--- a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/NPlusOneAffectedEndpoints.stories.tsx
+++ b/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/NPlusOneAffectedEndpoints.stories.tsx
@@ -16,17 +16,19 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const mockedEndpoints = mockedNPlusOneInsight.endpoints || [];
+
 export const Default: Story = {
   args: {
     insight: {
       ...mockedNPlusOneInsight,
       endpoints: [
-        ...mockedNPlusOneInsight.endpoints,
+        ...mockedEndpoints,
         {
-          ...mockedNPlusOneInsight.endpoints[0],
+          ...mockedEndpoints[0],
           endpointInfo: {
-            ...mockedNPlusOneInsight.endpoints[0].endpointInfo,
-            route: `${mockedNPlusOneInsight.endpoints[0].endpointInfo.route}1`
+            ...mockedEndpoints[0].endpointInfo,
+            route: `${mockedEndpoints[0].endpointInfo.route}1`
           }
         }
       ]
diff --git a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/index.tsx b/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/index.tsx
index 1a74464c3..d7f9573b9 100644
--- a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/index.tsx
+++ b/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/index.tsx
@@ -10,7 +10,7 @@ export const NPlusOneAffectedEndpoints = (
     return null;
   }
 
-  const endpoints = props.insight.endpoints;
+  const endpoints = props.insight.endpoints || [];
 
   if (endpoints.length === 0) {
     return null;
diff --git a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx b/src/components/Insights/tickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx
index 55ff343e8..efa3bd6f9 100644
--- a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx
+++ b/src/components/Insights/tickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx
@@ -16,17 +16,19 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const mockedEndpoints = mockedQueryOptimizationInsight.endpoints || [];
+
 export const Default: Story = {
   args: {
     insight: {
       ...mockedQueryOptimizationInsight,
       endpoints: [
-        ...mockedQueryOptimizationInsight.endpoints,
+        ...mockedEndpoints,
         {
-          ...mockedQueryOptimizationInsight.endpoints[0],
+          ...mockedEndpoints[0],
           endpointInfo: {
-            ...mockedQueryOptimizationInsight.endpoints[0].endpointInfo,
-            route: `${mockedQueryOptimizationInsight.endpoints[0].endpointInfo.route}1`
+            ...mockedEndpoints[0].endpointInfo,
+            route: `${mockedEndpoints[0].endpointInfo.route}1`
           }
         }
       ]
diff --git a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/index.tsx b/src/components/Insights/tickets/common/QueryOptimizationEndpoints/index.tsx
index eb96aa15d..76ced561a 100644
--- a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/index.tsx
+++ b/src/components/Insights/tickets/common/QueryOptimizationEndpoints/index.tsx
@@ -9,7 +9,7 @@ export const QueryOptimizationEndpoints = (
     return null;
   }
 
-  const endpoints = props.insight.endpoints;
+  const endpoints = props.insight.endpoints || [];
 
   if (endpoints.length === 0) {
     return null;
diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueAffectedEndpoints/index.tsx b/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueAffectedEndpoints/index.tsx
index fc383d52d..e2cad8dab 100644
--- a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueAffectedEndpoints/index.tsx
+++ b/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueAffectedEndpoints/index.tsx
@@ -1,6 +1,6 @@
+import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme";
 import * as s from "../styles";
 import { ScalingIssueCommonProps } from "../types";
-import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme";
 
 export const ScalingIssueAffectedEndpoints = (
   props: ScalingIssueCommonProps
@@ -9,7 +9,7 @@ export const ScalingIssueAffectedEndpoints = (
     return null;
   }
 
-  const endpoints = props.insight.affectedEndpoints;
+  const endpoints = props.insight.affectedEndpoints || [];
 
   if (endpoints.length === 0) {
     return null;
diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts
index 211e8432f..ede9b1ec7 100644
--- a/src/components/Insights/types.ts
+++ b/src/components/Insights/types.ts
@@ -314,7 +314,7 @@ export interface SpanEndpointBottleneckInsight extends SpanInsight {
   category: InsightCategory.Performance;
   specifity: InsightSpecificity.TargetFound;
   importance: InsightImportance.Critical;
-  slowEndpoints: BottleneckEndpointInfo[];
+  slowEndpoints: BottleneckEndpointInfo[] | null;
 
   /**
    * @deprecated
@@ -539,7 +539,7 @@ export interface SpanScalingBadlyInsight extends SpanInsight {
   minDuration: Duration;
   maxDuration: Duration;
   rootCauseSpans: RootCauseSpanInfo[];
-  affectedEndpoints: AffectedEndpoint[];
+  affectedEndpoints: AffectedEndpoint[] | null;
   flowHash: string | null;
 
   /**
@@ -581,7 +581,7 @@ export interface SpanNPlusOneInsight extends SpanInsight {
   clientSpanName: string | null;
   clientSpanCodeObjectId: string | null;
   duration: Duration;
-  endpoints: NPlusOneEndpointInfo[];
+  endpoints: NPlusOneEndpointInfo[] | null;
 
   /**
    * @deprecated
@@ -817,14 +817,16 @@ export interface QueryOptimizationInsight extends SpanInsight {
   span: SpanInfo;
   serviceName: string;
   dbName: string;
-  endpoints: {
-    endpointInfo: {
-      route: string;
-      instrumentationLibrary: string;
-      spanCodeObjectId: string;
-      serviceName: string;
-    };
-  }[];
+  endpoints:
+    | {
+        endpointInfo: {
+          route: string;
+          instrumentationLibrary: string;
+          spanCodeObjectId: string;
+          serviceName: string;
+        };
+      }[]
+    | null;
 }
 
 export interface EndpointQueryOptimizationSpan {

From bb96b2e381a17b2ab5e1b52387102a9d225da83f Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 4 Mar 2024 19:27:44 +0100
Subject: [PATCH 2/2] Fix story

---
 .../SpanEndpointBottleneckInsight.stories.tsx                   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx
index 9b784d56c..2c5195e45 100644
--- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx
+++ b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx
@@ -38,8 +38,6 @@ export const Default: Story = {
   }
 };
 
-export const WithoutInsight: Story = {};
-
 export const WithNoSlowEndpoints: Story = {
   args: {
     insight: {