From a9b40fa003b6d68e210acc851373042fd40572ce Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 1 Mar 2024 19:47:55 +0100 Subject: [PATCH] Update Endpoint Query Optimization insight card --- .../InsightJiraTicket.stories.tsx | 11 +++--- src/components/Insights/InsightList/index.tsx | 11 +++--- src/components/Insights/Insights.stories.tsx | 9 +++-- .../Insights/InsightsPage/index.tsx | 2 +- src/components/Insights/typeGuards.ts | 5 +++ src/components/Insights/types.ts | 37 ++++++++++++------- src/types.ts | 10 ++--- 7 files changed, 52 insertions(+), 33 deletions(-) diff --git a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx b/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx index f09be3595..2a2d447d9 100644 --- a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx +++ b/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 = { @@ -17,7 +17,7 @@ export default meta; type Story = StoryObj; -const insight = { +const insight: SpanUsagesInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "60b55792-8262-4d5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", @@ -59,7 +59,8 @@ 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 = { @@ -67,7 +68,7 @@ export const Linked: Story = { 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 } }; diff --git a/src/components/Insights/InsightList/index.tsx b/src/components/Insights/InsightList/index.tsx index 30e08ee34..771f412c5 100644 --- a/src/components/Insights/InsightList/index.tsx +++ b/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; } diff --git a/src/components/Insights/Insights.stories.tsx b/src/components/Insights/Insights.stories.tsx index 2da03a953..a34b50a6a 100644 --- a/src/components/Insights/Insights.stories.tsx +++ b/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", diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx index 1c211c3dd..b658551fa 100644 --- a/src/components/Insights/InsightsPage/index.tsx +++ b/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"; diff --git a/src/components/Insights/typeGuards.ts b/src/components/Insights/typeGuards.ts index 78c28f495..7b9e3eb1c 100644 --- a/src/components/Insights/typeGuards.ts +++ b/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; diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index 30742485e..7bf9cd35b 100644 --- a/src/components/Insights/types.ts +++ b/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 */ diff --git a/src/types.ts b/src/types.ts index 3fb02276e..ac852f2fd 100644 --- a/src/types.ts +++ b/src/types.ts @@ -16,9 +16,9 @@ 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", @@ -26,10 +26,10 @@ export enum InsightType { 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",