Handle nullable endpoint list

src/components/Insights/BottleneckInsight/index.tsx

@@ -24,14 +24,16 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
       props.onJiraTicketCreate(props.insight, undefined, event);
   };
 
+  const slowEndpoints = props.insight.slowEndpoints || [];
+
   return (
     <InsightCard
       spanInfo={props.insight.spanInfo}
       data={props.insight}
       content={
         <>
           <s.EndpointList>
-            {props.insight.slowEndpoints.map((endpoint, i) => {
+            {slowEndpoints.map((endpoint, i) => {
               const endpointName = `${
                 endpoint.endpointInfo.serviceName
               }:${trimEndpointScheme(endpoint.endpointInfo.route)}`;

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

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

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 (

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}

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

@@ -16,28 +16,28 @@ 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`
           }
         }
       ]
     }
   }
 };
 
-export const WithoutInsight: Story = {};
-
 export const WithNoSlowEndpoints: Story = {
   args: {
     insight: {

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 && (

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

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}

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(", ") : "";
 

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(", ") : "";
 

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`
           }
         }
       ]

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;

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`
           }
         }
       ]