Update Endpoint Query Optimization insight card

src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { InsightJiraTicket } from ".";
 import { InsightType } from "../../../types";
-import { InsightCategory, InsightScope } from "../types";
+import { InsightCategory, InsightScope, SpanUsagesInsight } from "../types";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof InsightJiraTicket> = {
@@ -17,7 +17,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const insight = {
+const insight: SpanUsagesInsight = {
   sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
   id: "60b55792-8262-4d5d-9628-7cce7979ad6d",
   firstDetected: "2023-12-05T17:25:47.010Z",
@@ -59,15 +59,16 @@ const insight = {
   severity: 0,
   prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
   customStartTime: null,
-  actualStartTime: "2023-06-17T00:00:00.000Z"
+  actualStartTime: "2023-06-17T00:00:00.000Z",
+  ticketLink: null
 };
 
 export const Linked: Story = {
   args: {
     summary: "Summary text",
     description: { content: "Multiline\ndescription text", isLoading: false },
     attachment: { url: "https://www.example.com", fileName: "attachment.ext" },
-    insight: { ticketLink: "https://digma.ai/ticket/1", ...insight }
+    insight: { ...insight, ticketLink: "https://digma.ai/ticket/1" }
   }
 };
 
@@ -76,6 +77,6 @@ export const Unlinked: Story = {
     summary: "",
     description: { content: "Multiline\ndescription text", isLoading: false },
     attachment: { url: "https://www.example.com", fileName: "attachment.ext" },
-    insight: { ticketLink: null, ...insight }
+    insight
   }
 };

src/components/Insights/InsightList/index.tsx

@@ -51,6 +51,7 @@ import {
   isEndpointQueryOptimizationInsight,
   isEndpointSlowestSpansInsight,
   isEndpointSuspectedNPlusOneInsight,
+  isFunctionInsight,
   isSessionInViewEndpointInsight,
   isSlowEndpointInsight,
   isSpanDurationBreakdownInsight,
@@ -66,11 +67,11 @@ import {
   isSpanUsagesInsight
 } from "../typeGuards";
 import {
-  EndpointInsight,
   GenericCodeObjectInsight,
+  GenericEndpointInsight,
+  GenericSpanInsight,
   InsightGroup,
   MethodSpan,
-  SpanInsight,
   Trace
 } from "../types";
 import * as s from "./styles";
@@ -126,9 +127,9 @@ const groupInsights = (
   };
 
   const ungroupedInsights: GenericCodeObjectInsight[] = [];
-  const spanInsightGroups: { [key: string]: SpanInsight[] } = {};
+  const spanInsightGroups: { [key: string]: GenericSpanInsight[] } = {};
   const endpointInsightGroups: {
-    [key: string]: (EndpointInsight | SpanInsight)[];
+    [key: string]: (GenericEndpointInsight | GenericSpanInsight)[];
   } = {};
 
   for (const insight of sortedInsights) {
@@ -145,7 +146,7 @@ const groupInsights = (
 
     const displayName = insight.spanInfo?.displayName;
 
-    if (!displayName) {
+    if (isFunctionInsight(insight) || !displayName) {
       ungroupedInsights.push(insight);
       continue;
     }

src/components/Insights/Insights.stories.tsx

@@ -8,6 +8,7 @@ import { mockedSpanNexusInsight } from "./SpanNexusInsight/mockData";
 import {
   CodeObjectErrorsInsight,
   ComponentType,
+  EndpointSlowestSpansInsight,
   InsightCategory,
   InsightScope,
   InsightsStatus,
@@ -162,6 +163,7 @@ export const Default: Story = {
           actualStartTime: "2023-07-27T08:23:56.500827Z"
         } as SpanNPlusOneInsight,
         {
+          hasAsyncSpans: false,
           sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
           id: "62b55792-8262-4c5d-9628-7cce7979ad6d",
           firstDetected: "2023-12-05T17:25:47.010Z",
@@ -481,12 +483,12 @@ export const Default: Story = {
           decorators: null,
           environment: "BOB-LAPTOP[LOCAL]",
           severity: 0,
-          isRecalculateEnabled: false,
+          isRecalculateEnabled: true,
           prefixedCodeObjectId:
             "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
           customStartTime: null,
           actualStartTime: "2023-06-12T13:49:08.186Z"
-        },
+        } as EndpointSlowestSpansInsight,
         {
           sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
           id: "60b55792-8262-4c5d-9628-6cce7979ad6d",
@@ -659,7 +661,8 @@ export const Default: Story = {
           prefixedCodeObjectId:
             "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
           customStartTime: null,
-          actualStartTime: "2023-06-13T00:00:00.000Z"
+          actualStartTime: "2023-06-13T00:00:00.000Z",
+          isAsync: false
         },
         {
           sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",

src/components/Insights/InsightsPage/index.tsx

@@ -11,12 +11,12 @@ import { ConfigContext } from "../../common/App/ConfigContext";
 import { Card } from "../../common/Card";
 import { EmptyState } from "../../common/EmptyState";
 import { CardsIcon } from "../../common/icons/CardsIcon";
-import { EndpointQueryOptimizationInsight } from "../EndpointQueryOptimizationInsight";
 import { actions } from "../actions";
 import { DurationBreakdownInsight } from "../common/insights/DurationBreakdownInsight";
 import { DurationInsight } from "../common/insights/DurationInsight";
 import { EndpointBottleneckInsight } from "../common/insights/EndpointBottleneckInsight";
 import { EndpointNPlusOneInsight } from "../common/insights/EndpointNPlusOneInsight";
+import { EndpointQueryOptimizationInsight } from "../common/insights/EndpointQueryOptimizationInsight";
 import { EndpointSlowdownSourceInsight } from "../common/insights/EndpointSlowdownSourceInsight";
 import { ExcessiveAPICallsInsight } from "../common/insights/ExcessiveAPICallsInsight";
 import { HighNumberOfQueriesInsight } from "../common/insights/HighNumberOfQueriesInsight";

src/components/Insights/typeGuards.ts

@@ -17,6 +17,7 @@ import {
   EndpointSlowestSpansInsight,
   EndpointSpanNPlusOneInsight,
   EndpointSuspectedNPlusOneInsight,
+  GenericFunctionInsight,
   InsightScope,
   QueryOptimizationInsight,
   SessionInViewEndpointInsight,
@@ -33,6 +34,10 @@ import {
   SpanUsagesInsight
 } from "./types";
 
+export const isFunctionInsight = (
+  insight: CodeObjectInsight
+): insight is GenericFunctionInsight => insight.scope === InsightScope.Function;
+
 export const isSpanInsight = (
   insight: CodeObjectInsight
 ): insight is SpanInsight => insight.scope === InsightScope.Span;

src/components/Insights/types.ts

@@ -20,31 +20,42 @@ export enum InsightsStatus {
 }
 
 export type GenericCodeObjectInsight =
-  | SpanUsageStatusInsight
-  | SpanDurationsInsight
-  | SpanUsagesInsight
-  | SpanEndpointBottleneckInsight
-  | SpanDurationBreakdownInsight
+  | GenericFunctionInsight
+  | GenericEndpointInsight
+  | GenericSpanInsight;
+
+export type GenericFunctionInsight =
+  | CodeObjectHotSpotInsight
+  | CodeObjectErrorsInsight;
+
+export type GenericEndpointInsight =
   | EndpointLowUsageInsight
   | EndpointNormalUsageInsight
   | EndpointHighUsageInsight
   | EndpointSlowestSpansInsight
   | EndpointBottleneckInsight
   | SlowEndpointInsight
-  | SpanScalingBadlyInsight
-  | SpanNPlusOneInsight
   | EndpointSuspectedNPlusOneInsight
   | EndpointSpanNPlusOneInsight
-  | CodeObjectHotSpotInsight
-  | CodeObjectErrorsInsight
   | EndpointDurationSlowdownInsight
   | EndpointSlowdownSourceInsight
   | EndpointBreakdownInsight
-  | SpanScalingWellInsight
-  | SpanScalingInsufficientDataInsight
   | SessionInViewEndpointInsight
   | ChattyApiEndpointInsight
-  | EndpointHighNumberOfQueriesInsight;
+  | EndpointHighNumberOfQueriesInsight
+  | EndpointQueryOptimizationInsight;
+
+export type GenericSpanInsight =
+  | SpanDurationsInsight
+  | SpanUsagesInsight
+  | SpanEndpointBottleneckInsight
+  | SpanDurationBreakdownInsight
+  | SpanScalingBadlyInsight
+  | SpanNPlusOneInsight
+  | SpanScalingWellInsight
+  | SpanScalingInsufficientDataInsight
+  | SpanNexusInsight
+  | QueryOptimizationInsight;
 
 export interface MethodSpan {
   spanCodeObjectId: string;
@@ -717,8 +728,6 @@ export interface EndpointBreakdownInsight extends EndpointInsight {
   hasAsyncSpans: boolean;
 }
 
-export type SpanUsageStatusInsight = SpanInsight;
-
 /**
  * @deprecated
  */

src/types.ts

@@ -16,20 +16,20 @@ export enum InsightType {
   LowUsage = "LowUsage",
   NormalUsage = "NormalUsage",
   HighUsage = "HighUsage",
-  SlowestSpans = "SlowestSpans",
+  SlowestSpans = "SlowestSpans", // deprecated
   EndpointBottleneck = "EndpointBottleneck",
-  EndpointSpanNPlusOne = "EndpointSpaNPlusOne",
+  EndpointSpanNPlusOne = "EndpointSpaNPlusOne", // deprecated
   EndpointSpanNPlusOneV2 = "EndpointSpanNPlusOne",
   SpanUsages = "SpanUsages",
   SpanNPlusOne = "SpaNPlusOne",
   SpanEndpointBottleneck = "SpanEndpointBottleneck",
   SpanDurations = "SpanDurations",
   SpanScalingBadly = "SpanScaling",
   SpanDurationBreakdown = "SpanDurationBreakdown",
-  EndpointDurationSlowdown = "EndpointDurationSlowdown",
+  EndpointDurationSlowdown = "EndpointDurationSlowdown", // deprecated
   EndpointBreakdown = "EndpointBreakdown",
-  SpanScalingWell = "SpanScalingWell",
-  SpanScalingInsufficientData = "SpanScalingInsufficientData",
+  SpanScalingWell = "SpanScalingWell", // deprecated
+  SpanScalingInsufficientData = "SpanScalingInsufficientData", // deprecated
   EndpointSessionInView = "EndpointSessionInView",
   EndpointChattyApi = "EndpointChattyApi",
   EndpointHighNumberOfQueries = "EndpointHighNumberOfQueries",