From d534b18bcef87a3fad4900bdc55e14dbd2d6143e Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 29 Feb 2024 18:13:23 +0100 Subject: [PATCH 1/2] Update insight cards --- .../Insights/InsightsPage/index.tsx | 118 ++++++++++-------- .../SpanEndpointBottleneckInsight.stories.tsx | 8 +- .../SpanEndpointBottleneckInsight/index.tsx | 6 +- .../SpanEndpointBottleneckInsight/types.ts | 2 +- 4 files changed, 71 insertions(+), 63 deletions(-) diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx index ca7dd2439..6708f733a 100644 --- a/src/components/Insights/InsightsPage/index.tsx +++ b/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 { 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 ( - // - // ); - // } - - // if (isEndpointSlowestSpansInsight(insight)) { - // return ( - // - // ); - // } + if (isEndpointBottleneckInsight(insight)) { + return ( + + ); + } + + if (isSpanEndpointBottleneckInsight(insight)) { + return ( + + ); + } if (isSlowEndpointInsight(insight)) { return ( @@ -274,24 +282,24 @@ const renderInsightCard = ( ); } - // if (isEndpointSuspectedNPlusOneInsight(insight)) { - // return ( - // - // ); - // } + if (isEndpointSpanNPlusOneInsight(insight)) { + return ( + + ); + } if (isSpanNPlusOneInsight(insight)) { return ( - - // ); - // } + if (isEndpointSlowdownSourceInsight(insight)) { + return ( + + ); + } if (isEndpointBreakdownInsight(insight)) { return ( diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx index 33f8aab16..e8f572581 100644 --- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx +++ b/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 = { - title: "Insights/common/insights/SpanBottleneckEndpoints", - component: SpanBottleneckEndpoints, +const meta: Meta = { + 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" diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx index d413dd5ab..eeed278f1 100644 --- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx +++ b/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 diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/types.ts b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/types.ts index c227559b4..40a334563 100644 --- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/types.ts +++ b/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: ( From 3cd5ed00f5f207bb6ebf7a0dc3be293749059e8f Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 29 Feb 2024 18:18:43 +0100 Subject: [PATCH 2/2] Update Session in View --- src/components/Insights/InsightsPage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx index 6708f733a..945794e73 100644 --- a/src/components/Insights/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsPage/index.tsx @@ -15,7 +15,6 @@ import { DurationBreakdownInsight } from "../DurationBreakdownInsight"; import { EndpointQueryOptimizationInsight } from "../EndpointQueryOptimizationInsight"; import { QueryOptimizationInsight } from "../QueryOptimizationInsight"; import { ScalingIssueInsight } from "../ScalingIssueInsight"; -import { SessionInViewInsight } from "../SessionInViewInsight"; import { TopUsageInsight } from "../TopUsageInsight"; import { actions } from "../actions"; import { DurationInsight } from "../common/insights/DurationInsight"; @@ -25,6 +24,7 @@ import { EndpointSlowdownSourceInsight } from "../common/insights/EndpointSlowdo 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";