From 1db79a4f5e0ad6cad81ced036bad46def78d7061 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 29 Feb 2024 13:47:13 +0200 Subject: [PATCH 1/4] Init nplus one --- .../Insights/common/InsightCard/index.tsx | 1 + .../Insights/common/InsightCard/types.ts | 3 +- .../EndpointNPlusOneInsight.stories.tsx | 23 +++++ .../EndpointNPlusOneInsight/index.tsx | 91 +++++++++++++++++++ .../EndpointNPlusOneInsight/mockData.ts | 90 ++++++++++++++++++ .../EndpointNPlusOneInsight/styles.ts | 66 ++++++++++++++ .../insights/EndpointNPlusOneInsight/types.ts | 19 ++++ .../HighNumberOfQueriesInsight/index.tsx | 3 +- src/components/Insights/types.ts | 1 + src/components/common/v3/JiraButton/index.tsx | 5 +- src/components/common/v3/JiraButton/types.ts | 6 +- 11 files changed, 303 insertions(+), 5 deletions(-) create mode 100644 src/components/Insights/common/insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx create mode 100644 src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx create mode 100644 src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts create mode 100644 src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts create mode 100644 src/components/Insights/common/insights/EndpointNPlusOneInsight/types.ts diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx index 060671e2f..1a8033724 100644 --- a/src/components/Insights/common/InsightCard/index.tsx +++ b/src/components/Insights/common/InsightCard/index.tsx @@ -138,6 +138,7 @@ export const InsightCard = (props: InsightCardProps) => { onTicketInfoButtonClick={props.onJiraButtonClick} ticketLink={props.jiraTicketInfo?.ticketLink} isHintEnabled={props.jiraTicketInfo?.isHintEnabled} + spanCodeObjectId={props.jiraTicketInfo?.spanCodeObjectId} /> )} {props.onPin && } diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts index 928cb56dc..58eb94a14 100644 --- a/src/components/Insights/common/InsightCard/types.ts +++ b/src/components/Insights/common/InsightCard/types.ts @@ -25,6 +25,7 @@ export interface InsightCardProps { jiraTicketInfo?: { ticketLink?: string | null; isHintEnabled?: boolean; + spanCodeObjectId?: string; }; - onJiraButtonClick?: (event: string) => void; + onJiraButtonClick?: (spanCodeObjectId: string, event: string) => void; } diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx b/src/components/Insights/common/insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx new file mode 100644 index 000000000..201adf1b1 --- /dev/null +++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx @@ -0,0 +1,23 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointNPlusOneInsight } from "."; +import { mockedEndpointNPlusOneInsight } from "./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/EndpointNPlusOneInsight", + component: EndpointNPlusOneInsight, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout + layout: "fullscreen" + } +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + insight: mockedEndpointNPlusOneInsight + } +}; diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx new file mode 100644 index 000000000..99957fe17 --- /dev/null +++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx @@ -0,0 +1,91 @@ +import { useContext } from "react"; +import { getDurationString } from "../../../../../utils/getDurationString"; +import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent"; +import { ConfigContext } from "../../../../common/App/ConfigContext"; +import { trackingEvents } from "../../../tracking"; +import { InsightType, Trace } from "../../../types"; +import { InsightCard } from "../../InsightCard"; +import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; +import { KeyValue } from "../../InsightCard/KeyValue"; +import { ListItem } from "../../InsightCard/ListItem"; +import * as s from "./styles"; +import { EndpointNPlusOneInsightProps } from "./types"; + +export const EndpointNPlusOneInsight = ( + props: EndpointNPlusOneInsightProps +) => { + const config = useContext(ConfigContext); + const { span } = props.insight; + + const handleSpanLinkClick = (spanCodeObjectId: string) => { + props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + }; + + const handleTicketInfoButtonClick = ( + spanCodeObjectId: string, + event: string + ) => { + sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, { + insightType: props.insight.type + }); + props.onJiraTicketCreate && + props.onJiraTicketCreate(props.insight, spanCodeObjectId, event); + }; + + const handleTraceButtonClick = ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => { + props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + }; + + const spanInfo = span.internalSpan || span.clientSpan; + const spanName = spanInfo.displayName; + + return ( + + handleTraceButtonClick( + { + name: spanName, + id: span.traceId + }, + props.insight.type, + spanInfo.spanCodeObjectId + ) + : undefined + } + jiraTicketInfo={{ + ticketLink: span.ticketLink, + isHintEnabled: props.isJiraHintEnabled, + spanCodeObjectId: spanInfo.spanCodeObjectId + }} + content={ + + + Assets + handleSpanLinkClick(spanInfo.spanCodeObjectId)} + /> + + + {span.occurrences} + {span.requestPercentage} + + {getDurationString(span.duration)} + + + + } + onRecalculate={props.onRecalculate} + onRefresh={props.onRefresh} + /> + ); +}; diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts b/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts new file mode 100644 index 000000000..8b5cce804 --- /dev/null +++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts @@ -0,0 +1,90 @@ +import { + EndpointSpanNPlusOneInsight, + InsightCategory, + InsightScope, + InsightType +} from "../../../types"; + +export const mockedEndpointNPlusOneInsight: EndpointSpanNPlusOneInsight = { + id: "60b55792-8262-4c5d-9628-7cce7919ad6d", + firstDetected: "2023-12-05T17:25:47.010Z", + lastDetected: "2024-01-05T13:14:47.010Z", + criticality: 0, + firstCommitId: "b3f7b3f", + lastCommitId: "a1b2c3d", + deactivatedCommitId: null, + reopenCount: 0, + ticketLink: null, + impact: 0, + name: "Suspected N+1 Query", + type: InsightType.EndpointSpanNPlusOneV2, + category: InsightCategory.Performance, + specifity: 2, + importance: 3, + span: { + occurrences: 200, + internalSpan: null, + clientSpan: { + name: "1D138649EB4FFA92C0E3C8103404F2", + displayName: "select * from users where id = :id", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: + "span:SampleInsightsController$_$1D138649EB4FFA92C0E3C8103404F2", + methodCodeObjectId: null, + kind: "Client", + codeObjectId: null + }, + traceId: "9C510BC1E1CD59DD7E820BC3E8DFD4C4", + duration: { + value: 70.08, + unit: "μs", + raw: 70081 + }, + fraction: 0.08985711281727758, + criticality: 0.3, + impact: 0, + severity: 0, + ticketLink: "https://digma.ai/1", + requestPercentage: 98 + }, + scope: InsightScope.EntrySpan, + endpointSpan: "HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", + route: "epHTTP:HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", + serviceName: "PetClinic", + spanInfo: { + name: "HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", + displayName: "HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", + instrumentationLibrary: "io.opentelemetry.tomcat-10.0", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", + methodCodeObjectId: + "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan", + kind: "Server", + codeObjectId: + "org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan", + decorators: [ + { + title: "N+1 Suspected", + description: "Supected NPlus One" + } + ], + environment: "SAMPLE_ENV", + severity: 0, + isRecalculateEnabled: true, + prefixedCodeObjectId: + "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan", + customStartTime: null, + actualStartTime: "2023-06-16T10:30:33.027Z", + sourceSpanCodeObjectInsight: "" +}; diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts b/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts new file mode 100644 index 000000000..56f895ca1 --- /dev/null +++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts @@ -0,0 +1,66 @@ +import styled from "styled-components"; +import { caption1RegularTypography } from "../../../../common/App/typographies"; + +export const SpanList = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`; + +export const Span = styled.div` + margin-top: 4px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 4px; +`; + +export const SpanDetails = styled.div` + display: flex; + flex-direction: column; + gap: 4px; + margin-top: 4px; + overflow: hidden; +`; + +export const SpanName = styled.span` + font-weight: 500; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +`; + +export const Stats = styled.span` + display: flex; + flex-wrap: wrap; + gap: 8px 24px; +`; + +export const Stat = styled.span` + display: flex; + gap: 4px; +`; + +export const CriticalityValue = styled.span` + display: flex; + gap: 4px; +`; + +export const ContentContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const ButtonsContainer = styled.div` + display: flex; + gap: 8px; +`; + +export const Description = styled.div` + display: flex; + gap: 8px; + color: ${({ theme }) => theme.colors.v3.text.secondary}; + + ${caption1RegularTypography} +`; diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/types.ts b/src/components/Insights/common/insights/EndpointNPlusOneInsight/types.ts new file mode 100644 index 000000000..4362c2b9d --- /dev/null +++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/types.ts @@ -0,0 +1,19 @@ +import { + EndpointSpanNPlusOneInsight, + InsightProps, + InsightType, + Trace +} from "../../../types"; + +export interface EndpointNPlusOneInsightProps extends InsightProps { + insight: EndpointSpanNPlusOneInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => void; +} diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx index 49d6e1806..185d0bd30 100644 --- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx +++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx @@ -71,7 +71,8 @@ export const HighNumberOfQueriesInsight = ( onJiraButtonClick={handleCreateJiraTicketButtonClick} jiraTicketInfo={{ ticketLink: insight.ticketLink, - isHintEnabled: props.isJiraHintEnabled + isHintEnabled: props.isJiraHintEnabled, + spanCodeObjectId: props.insight.spanInfo?.spanCodeObjectId }} onGoToTrace={ traceId diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index 43d0079ca..247f9e21c 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -615,6 +615,7 @@ export interface EndpointSpanNPlusOneInsight extends EndpointInsight { impact: number; severity: number; ticketLink: string | null; + requestPercentage: number; }; } diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx index 154b15403..9a1f1e454 100644 --- a/src/components/common/v3/JiraButton/index.tsx +++ b/src/components/common/v3/JiraButton/index.tsx @@ -28,7 +28,7 @@ export const JiraButton = (props: JiraButtonProps) => { const openTicketInfo = (event: string) => { handleJiraButtonClick(); - props.onTicketInfoButtonClick(event); + props.onTicketInfoButtonClick(props.spanCodeObjectId, event); }; const renderButton = () => ( @@ -48,7 +48,7 @@ export const JiraButton = (props: JiraButtonProps) => { { icon: , label: "Edit", - id: "edit", + id: props.spanCodeObjectId ?? "", onClick: () => openTicketInfo("edit menu item click") } ]} @@ -64,6 +64,7 @@ export const JiraButton = (props: JiraButtonProps) => { component: () => ( ) diff --git a/src/components/common/v3/JiraButton/types.ts b/src/components/common/v3/JiraButton/types.ts index 0569ff726..4e65fe787 100644 --- a/src/components/common/v3/JiraButton/types.ts +++ b/src/components/common/v3/JiraButton/types.ts @@ -1,5 +1,9 @@ export interface JiraButtonProps { - onTicketInfoButtonClick(event: string): void; + onTicketInfoButtonClick( + spanCodeObjectId: string | undefined, + event: string + ): void; ticketLink?: string | null; isHintEnabled?: boolean; + spanCodeObjectId?: string; } From 4a8084c10c91afcd61febf182eaa89bbcf8d2fce Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 29 Feb 2024 14:06:31 +0200 Subject: [PATCH 2/4] clean-up --- .../EndpointNPlusOneInsight/index.tsx | 24 ++++++-- .../EndpointNPlusOneInsight/styles.ts | 55 ++++--------------- 2 files changed, 30 insertions(+), 49 deletions(-) diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx index 99957fe17..02bc049d6 100644 --- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx +++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx @@ -2,12 +2,13 @@ import { useContext } from "react"; import { getDurationString } from "../../../../../utils/getDurationString"; import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent"; import { ConfigContext } from "../../../../common/App/ConfigContext"; +import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon"; +import { Tooltip } from "../../../../common/v3/Tooltip"; import { trackingEvents } from "../../../tracking"; import { InsightType, Trace } from "../../../types"; import { InsightCard } from "../../InsightCard"; import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; import { KeyValue } from "../../InsightCard/KeyValue"; -import { ListItem } from "../../InsightCard/ListItem"; import * as s from "./styles"; import { EndpointNPlusOneInsightProps } from "./types"; @@ -67,17 +68,30 @@ export const EndpointNPlusOneInsight = ( }} content={ - + Assets - handleSpanLinkClick(spanInfo.spanCodeObjectId)} /> - + {span.occurrences} - {span.requestPercentage} + + +
Requests
+ + + + } + > + {span.requestPercentage}% + {getDurationString(span.duration)} diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts b/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts index 56f895ca1..2e2282d5f 100644 --- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts +++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts @@ -1,49 +1,11 @@ import styled from "styled-components"; import { caption1RegularTypography } from "../../../../common/App/typographies"; - -export const SpanList = styled.div` - display: flex; - flex-direction: column; - gap: 4px; -`; - -export const Span = styled.div` - margin-top: 4px; - display: flex; - justify-content: space-between; - align-items: center; - gap: 4px; -`; +import { ListItem } from "../../InsightCard/ListItem"; export const SpanDetails = styled.div` display: flex; flex-direction: column; gap: 4px; - margin-top: 4px; - overflow: hidden; -`; - -export const SpanName = styled.span` - font-weight: 500; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -`; - -export const Stats = styled.span` - display: flex; - flex-wrap: wrap; - gap: 8px 24px; -`; - -export const Stat = styled.span` - display: flex; - gap: 4px; -`; - -export const CriticalityValue = styled.span` - display: flex; - gap: 4px; `; export const ContentContainer = styled.div` @@ -52,11 +14,6 @@ export const ContentContainer = styled.div` gap: 8px; `; -export const ButtonsContainer = styled.div` - display: flex; - gap: 8px; -`; - export const Description = styled.div` display: flex; gap: 8px; @@ -64,3 +21,13 @@ export const Description = styled.div` ${caption1RegularTypography} `; + +export const InfoContainer = styled.div` + display: flex; + gap: 4px; + align-items: center; +`; + +export const SpanListItem = styled(ListItem)` + padding: 4px; +`; From 6e846903613cb9b598dc47c1d59c5550e2690214 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 29 Feb 2024 15:11:48 +0200 Subject: [PATCH 3/4] Endpoint Side --- .../SpanNPlusOneInsight.stories.tsx | 29 ++++ .../insights/SpanNPlusOneInsight/index.tsx | 138 ++++++++++++++++++ .../insights/SpanNPlusOneInsight/mockData.ts | 131 +++++++++++++++++ .../insights/SpanNPlusOneInsight/styles.ts | 84 +++++++++++ .../insights/SpanNPlusOneInsight/types.ts | 19 +++ 5 files changed, 401 insertions(+) create mode 100644 src/components/Insights/common/insights/SpanNPlusOneInsight/SpanNPlusOneInsight.stories.tsx create mode 100644 src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx create mode 100644 src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts create mode 100644 src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts create mode 100644 src/components/Insights/common/insights/SpanNPlusOneInsight/types.ts diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/SpanNPlusOneInsight.stories.tsx b/src/components/Insights/common/insights/SpanNPlusOneInsight/SpanNPlusOneInsight.stories.tsx new file mode 100644 index 000000000..1f88ebf90 --- /dev/null +++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/SpanNPlusOneInsight.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { SpanNPlusOneInsight } from "."; +import { mockedNPlusOneInsight } from "./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/SpanNPlusOneInsight", + component: SpanNPlusOneInsight, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout + layout: "fullscreen" + } +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + insight: mockedNPlusOneInsight + } +}; + +export const LinkedJira: Story = { + args: { + insight: { ...mockedNPlusOneInsight, ticketLink: "https://digma.ai/1" } + } +}; diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx new file mode 100644 index 000000000..b9d9a1896 --- /dev/null +++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx @@ -0,0 +1,138 @@ +import { useContext, useState } from "react"; +import { getDurationString } from "../../../../../utils/getDurationString"; +import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent"; +import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; +import { ConfigContext } from "../../../../common/App/ConfigContext"; +import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon"; +import { Tooltip } from "../../../../common/v3/Tooltip"; +import { trackingEvents } from "../../../tracking"; +import { InsightType, Trace } from "../../../types"; +import { InsightCard } from "../../InsightCard"; +import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; +import { KeyValue } from "../../InsightCard/KeyValue"; +import { ListItem } from "../../InsightCard/ListItem"; +import { Select } from "../../InsightCard/Select"; +import * as s from "./styles"; +import { SpanNPlusOneInsightProps } from "./types"; + +export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => { + const { + insight: { type, endpoints, ticketLink } + } = props; + + const config = useContext(ConfigContext); + const [selectedEndpoint, setSelectedEndpoint] = useState( + props.insight.endpoints.length ? props.insight.endpoints[0] : null + ); + + const handleSpanLinkClick = (spanCodeObjectId?: string) => { + spanCodeObjectId && props.onAssetLinkClick(spanCodeObjectId, type); + }; + + const handleTraceButtonClick = ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => { + props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + }; + + const handleCreateJiraTicketButtonClick = (event: string) => { + sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, { + insightType: type + }); + props.onJiraTicketCreate && + props.onJiraTicketCreate(props.insight, undefined, event); + }; + + const spanName = props.insight.clientSpanName || undefined; + const spanCodeObjectId = props.insight.clientSpanCodeObjectId || undefined; + const traceId = props.insight.traceId; + + return ( + + handleTraceButtonClick( + { + name: spanName, + id: traceId + }, + props.insight.type, + spanCodeObjectId + ) + : undefined + } + content={ + + + Effected Endpoints ({endpoints.length}) + { @@ -98,7 +99,8 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => { }; })} /> - + + {selectedEndpoint && ( @@ -123,7 +125,7 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => { )} - + } onRecalculate={props.onRecalculate} onRefresh={props.onRefresh} diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts b/src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts index 7e59fdf06..4a449a8e6 100644 --- a/src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts +++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts @@ -1,75 +1,5 @@ import styled from "styled-components"; -import { - caption1RegularTypography, - footnoteRegularTypography -} from "../../../../common/App/typographies"; - -export const Stats = styled.span` - display: flex; - flex-wrap: wrap; - gap: 8px 24px; -`; - -export const Stat = styled.span` - display: flex; - gap: 4px; -`; - -export const ContentContainer = styled.div` - display: flex; - flex-direction: column; - gap: 8px; - color: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#49494d"; - case "dark": - case "dark-jetbrains": - return "#dadada"; - } - }}; -`; - -export const SpanContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - gap: 4px; -`; - -export const EndpointList = styled.div` - display: flex; - flex-direction: column; - gap: 8px; -`; - -export const Endpoint = styled.div` - display: flex; - flex-direction: column; - gap: 8px; -`; - -export const Name = styled.span` - font-weight: 500; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: fit-content; -`; - -export const CriticalityValue = styled.span` - display: flex; - gap: 4px; -`; - -export const Description = styled.div` - display: flex; - flex-direction: column; - gap: 8px; - color: ${({ theme }) => theme.colors.v3.text.secondary}; - - ${caption1RegularTypography} -`; +import { footnoteRegularTypography } from "../../../../common/App/typographies"; export const InfoContainer = styled.div` display: flex; diff --git a/src/components/Insights/common/insights/SpanNexusInsight/index.tsx b/src/components/Insights/common/insights/SpanNexusInsight/index.tsx index 75df09bab..b11267705 100644 --- a/src/components/Insights/common/insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/common/insights/SpanNexusInsight/index.tsx @@ -2,6 +2,7 @@ import { Tag } from "../../../../common/v3/Tag"; import { InsightCard } from "../../InsightCard"; import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; import { KeyValue } from "../../InsightCard/KeyValue"; +import { ContentContainer } from "../styles"; import * as s from "./styles"; import { SpanNexusInsightProps } from "./types"; @@ -24,7 +25,7 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => { + Multiple code flows depend on this location @@ -44,7 +45,7 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => { )} - + } onRecalculate={props.onRecalculate} onRefresh={props.onRefresh} diff --git a/src/components/Insights/common/insights/SpanNexusInsight/styles.ts b/src/components/Insights/common/insights/SpanNexusInsight/styles.ts index 4fccda7c7..72891baa0 100644 --- a/src/components/Insights/common/insights/SpanNexusInsight/styles.ts +++ b/src/components/Insights/common/insights/SpanNexusInsight/styles.ts @@ -1,11 +1,5 @@ import styled from "styled-components"; -export const ContentContainer = styled.div` - gap: 8px; - display: flex; - flex-direction: column; -`; - export const Description = styled.div` display: flex; gap: 8px; diff --git a/src/components/Insights/common/insights/styles.ts b/src/components/Insights/common/insights/styles.ts new file mode 100644 index 000000000..1547269cb --- /dev/null +++ b/src/components/Insights/common/insights/styles.ts @@ -0,0 +1,26 @@ +import styled from "styled-components"; +import { caption1RegularTypography } from "../../../common/App/typographies"; + +export const Description = styled.div` + color: ${({ theme }) => theme.colors.v3.text.secondary}; + + ${caption1RegularTypography} +`; + +export const Details = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`; + +export const ContentContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const ListContainer = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`;