diff --git a/src/components/Insights/BottleneckInsight/index.tsx b/src/components/Insights/BottleneckInsight/index.tsx index 85cbe602f..912ba9c33 100644 --- a/src/components/Insights/BottleneckInsight/index.tsx +++ b/src/components/Insights/BottleneckInsight/index.tsx @@ -4,6 +4,7 @@ import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; import { trimEndpointScheme } from "../../../utils/trimEndpointScheme"; import { Tooltip } from "../../common/Tooltip"; import { InsightCard } from "../InsightCard"; +import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; import { Link } from "../styles"; import { trackingEvents } from "../tracking"; @@ -26,53 +27,60 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => { - {props.insight.slowEndpoints.map((endpoint, i) => { - const endpointName = `${ - endpoint.endpointInfo.serviceName - }:${trimEndpointScheme(endpoint.endpointInfo.route)}`; + <> + + {props.insight.slowEndpoints.map((endpoint, i) => { + const endpointName = `${ + endpoint.endpointInfo.serviceName + }:${trimEndpointScheme(endpoint.endpointInfo.route)}`; - return ( - - - - - - handleEndpointLinkClick( - endpoint.endpointInfo.spanCodeObjectId - ) - } - > - {endpointName} - - - - - {getDurationString(endpoint.avgDurationWhenBeingBottleneck)} - - - - Slowing{" "} - {roundTo(endpoint.probabilityOfBeingBottleneck * 100, 2)}% of - the requests - - - ); - })} - + return ( + + + + + + handleEndpointLinkClick( + endpoint.endpointInfo.spanCodeObjectId + ) + } + > + {endpointName} + + + + + {getDurationString( + endpoint.avgDurationWhenBeingBottleneck + )} + + + + Slowing{" "} + {roundTo(endpoint.probabilityOfBeingBottleneck * 100, 2)}% + of the requests + + + ); + })} + + + + + + + + } onRecalculate={props.onRecalculate} onRefresh={props.onRefresh} - buttons={[ - - ]} /> ); }; diff --git a/src/components/Insights/BottleneckInsight/mockData.ts b/src/components/Insights/BottleneckInsight/mockData.ts index b0e212f73..524841f4e 100644 --- a/src/components/Insights/BottleneckInsight/mockData.ts +++ b/src/components/Insights/BottleneckInsight/mockData.ts @@ -8,7 +8,7 @@ import { export const mockedBottleneckInsight: SpanEndpointBottleneckInsight = { firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0, + criticality: 0.7, firstCommitId: "b3f7b3f", lastCommitId: "a1b2c3d", deactivatedCommitId: null, diff --git a/src/components/Insights/BottleneckInsight/styles.ts b/src/components/Insights/BottleneckInsight/styles.ts index a291e53e5..0159c73ee 100644 --- a/src/components/Insights/BottleneckInsight/styles.ts +++ b/src/components/Insights/BottleneckInsight/styles.ts @@ -36,3 +36,16 @@ export const Duration = styled.span` display: flex; flex-shrink: 0; `; + +export const Container = styled.div` + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: space-between; + padding-top: 12px; +`; + +export const Box = styled.div` + display: flex; + gap: 8px; +`; diff --git a/src/components/Insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/EndpointNPlusOneInsight/index.tsx index 2a1986391..814321158 100644 --- a/src/components/Insights/EndpointNPlusOneInsight/index.tsx +++ b/src/components/Insights/EndpointNPlusOneInsight/index.tsx @@ -1,17 +1,16 @@ import { useContext } from "react"; import { usePagination } from "../../../hooks/usePagination"; import { InsightType } from "../../../types"; -import { getCriticalityLabel } from "../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../utils/getDurationString"; import { roundTo } from "../../../utils/roundTo"; import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; import { ConfigContext } from "../../common/App/ConfigContext"; import { Button } from "../../common/Button"; import { Pagination } from "../../common/Pagination"; -import { ScoreIndicator } from "../../common/ScoreIndicator"; import { Tooltip } from "../../common/Tooltip"; 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"; @@ -84,15 +83,7 @@ export const EndpointNPlusOneInsight = ( - Criticality - - - {span.criticality > 0 && ( - - )} - {getCriticalityLabel(span.criticality)} - - + Impact diff --git a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx index d5af8444d..ee34f7f23 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx +++ b/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx @@ -22,7 +22,7 @@ export const Default: Story = { insight: { firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0, + criticality: 0.5, firstCommitId: "b3f7b3f", lastCommitId: "a1b2c3d", deactivatedCommitId: null, diff --git a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx index 75da7bbeb..f33e0ab3c 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx +++ b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx @@ -6,6 +6,7 @@ import { Pagination } from "../../common/Pagination"; import { Tooltip } from "../../common/Tooltip"; import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; import { InsightCard } from "../InsightCard"; +import { Criticality } from "../common/Criticality"; import { Description, Link } from "../styles"; import { Trace } from "../types"; import * as s from "./styles"; @@ -86,6 +87,7 @@ export const ExcessiveAPICallsInsight = ( onPageChange={setPage} /> + } onRecalculate={props.onRecalculate} diff --git a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx index 5de559fc6..88e71d5a3 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx +++ b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx @@ -5,6 +5,7 @@ import { Tooltip } from "../../common/Tooltip"; import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; import { InfoCircleIcon } from "../../common/icons/InfoCircleIcon"; import { InsightCard } from "../InsightCard"; +import { Criticality } from "../common/Criticality"; import { Description } from "../styles"; import { Trace } from "../types"; import * as s from "./styles"; @@ -35,6 +36,9 @@ export const HighNumberOfQueriesInsight = ( Consider using joins or caching responses to reduce database round trips + + + # of Queries diff --git a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts index c30fe9e9a..9349efb3a 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts +++ b/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts @@ -9,7 +9,7 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh { firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0, + criticality: 0.5, impact: 0, firstCommitId: "b3f7b3f", lastCommitId: "a1b2c3d", diff --git a/src/components/Insights/SpanBottleneckInsight/index.tsx b/src/components/Insights/SpanBottleneckInsight/index.tsx index 213d6f041..516a3fc0c 100644 --- a/src/components/Insights/SpanBottleneckInsight/index.tsx +++ b/src/components/Insights/SpanBottleneckInsight/index.tsx @@ -3,6 +3,7 @@ import { roundTo } from "../../../utils/roundTo"; import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; import { Tooltip } from "../../common/Tooltip"; import { InsightCard } from "../InsightCard"; +import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; import { Description, Link } from "../styles"; import { trackingEvents } from "../tracking"; @@ -30,44 +31,49 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => { The following spans are slowing request handling - - {props.insight.spans.map((span) => { - const spanName = span.spanInfo.displayName; - const spanCodeObjectId = span.spanInfo.spanCodeObjectId; + + + {props.insight.spans.map((span) => { + const spanName = span.spanInfo.displayName; + const spanCodeObjectId = span.spanInfo.spanCodeObjectId; - return ( - - - - - handleSpanLinkClick(spanCodeObjectId)} - > - {spanName} - - - - - {`Slowing ${roundTo( - span.probabilityOfBeingBottleneck * 100, - 2 - )}% of the requests (~${getDurationString( - span.avgDurationWhenBeingBottleneck - )})`} - - - - - - - ); - })} - + return ( + + + + + + handleSpanLinkClick(spanCodeObjectId) + } + > + {spanName} + + + + + {`Slowing ${roundTo( + span.probabilityOfBeingBottleneck * 100, + 2 + )}% of the requests (~${getDurationString( + span.avgDurationWhenBeingBottleneck + )})`} + + + + + + + ); + })} + + + } onRecalculate={props.onRecalculate} diff --git a/src/components/Insights/SpanBottleneckInsight/mockData.ts b/src/components/Insights/SpanBottleneckInsight/mockData.ts index d4ee2c88b..3a462c3d5 100644 --- a/src/components/Insights/SpanBottleneckInsight/mockData.ts +++ b/src/components/Insights/SpanBottleneckInsight/mockData.ts @@ -8,7 +8,7 @@ import { export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0, + criticality: 0.7, firstCommitId: "b3f7b3f", lastCommitId: "a1b2c3d", deactivatedCommitId: null, diff --git a/src/components/Insights/SpanBottleneckInsight/styles.ts b/src/components/Insights/SpanBottleneckInsight/styles.ts index 67d64abf3..a2944805d 100644 --- a/src/components/Insights/SpanBottleneckInsight/styles.ts +++ b/src/components/Insights/SpanBottleneckInsight/styles.ts @@ -33,3 +33,9 @@ export const ButtonsContainer = styled.div` display: flex; gap: 8px; `; + +export const Container = styled.div` + gap: 12px; + display: flex; + flex-direction: column; +`; diff --git a/src/components/Insights/common/Criticality/index.tsx b/src/components/Insights/common/Criticality/index.tsx new file mode 100644 index 000000000..343ecad9c --- /dev/null +++ b/src/components/Insights/common/Criticality/index.tsx @@ -0,0 +1,17 @@ +import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; +import { ScoreIndicator } from "../../../common/ScoreIndicator"; +import { Tooltip } from "../../../common/Tooltip"; +import { Description } from "../../styles"; +import * as s from "./styles"; + +export const Criticality = (props: { value: number }) => ( + + Criticality + + + {props.value > 0 && } + {getCriticalityLabel(props.value)} + + + +); diff --git a/src/components/Insights/common/Criticality/styles.ts b/src/components/Insights/common/Criticality/styles.ts new file mode 100644 index 000000000..f9b634e06 --- /dev/null +++ b/src/components/Insights/common/Criticality/styles.ts @@ -0,0 +1,15 @@ +import styled from "styled-components"; + +export const CriticalityValue = styled.span` + display: flex; + align-items: center; + gap: 4px; +`; + +export const Container = styled.div` + display: flex; + font-size: 14px; + gap: 8px; + line-height: 18px; + align-items: center; +`;