From cfffa2acedd23396db4ff435c23d47462ac62e7b Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 25 Jan 2024 12:45:53 +0200 Subject: [PATCH 1/8] Extracted criticality component --- .../Insights/common/Criticality/index.tsx | 17 +++++++++++++++++ .../Insights/common/Criticality/styles.ts | 6 ++++++ 2 files changed, 23 insertions(+) create mode 100644 src/components/Insights/common/Criticality/index.tsx create mode 100644 src/components/Insights/common/Criticality/styles.ts diff --git a/src/components/Insights/common/Criticality/index.tsx b/src/components/Insights/common/Criticality/index.tsx new file mode 100644 index 000000000..90bb1637a --- /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 = (criticality: number) => ( + <> + Criticality + + + {criticality > 0 && } + {getCriticalityLabel(criticality)} + + + +); diff --git a/src/components/Insights/common/Criticality/styles.ts b/src/components/Insights/common/Criticality/styles.ts new file mode 100644 index 000000000..40ba338bf --- /dev/null +++ b/src/components/Insights/common/Criticality/styles.ts @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const CriticalityValue = styled.span` + display: flex; + gap: 4px; +`; From 7afccd72c885851cd2e73e20ceac943fb761a075 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 26 Jan 2024 10:21:29 +0200 Subject: [PATCH 2/8] Added criticality to the fields --- .../Insights/BottleneckInsight/index.tsx | 96 ++++++++++--------- .../Insights/BottleneckInsight/styles.ts | 13 +++ .../EndpointNPlusOneInsight/index.tsx | 13 +-- .../ExcessiveAPICallsInsight/index.tsx | 1 + .../HighNumberOfQueriesInsight/index.tsx | 6 ++ .../HighNumberOfQueriesInsight/mockData.ts | 2 +- .../HighNumberOfQueriesInsight/styles.ts | 4 + src/components/Insights/InsightCard/index.tsx | 6 ++ src/components/Insights/InsightCard/styles.ts | 8 ++ src/components/Insights/InsightCard/types.ts | 1 + .../Insights/SpanBottleneckInsight/index.tsx | 1 + .../Insights/common/Criticality/index.tsx | 8 +- 12 files changed, 100 insertions(+), 59 deletions(-) diff --git a/src/components/Insights/BottleneckInsight/index.tsx b/src/components/Insights/BottleneckInsight/index.tsx index 85cbe602f..3642303df 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,62 @@ 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/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/index.tsx b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx index 75da7bbeb..fd16302c9 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx +++ b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx @@ -90,6 +90,7 @@ export const ExcessiveAPICallsInsight = ( } onRecalculate={props.onRecalculate} onRefresh={props.onRefresh} + showCriticality /> ); }; diff --git a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx index 5de559fc6..6ae50782b 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,11 @@ 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/HighNumberOfQueriesInsight/styles.ts b/src/components/Insights/HighNumberOfQueriesInsight/styles.ts index bee00ac53..661e5bfaf 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/styles.ts +++ b/src/components/Insights/HighNumberOfQueriesInsight/styles.ts @@ -37,3 +37,7 @@ export const Key = styled.span` export const IconContainer = styled.span` display: flex; `; + +export const RowStat = styled(Stat)` + flex-direction: row; +`; diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index 1c60ca1b9..87cee4729 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -18,6 +18,7 @@ import { ToggleValue } from "../../common/Toggle/types"; import { Tooltip } from "../../common/Tooltip"; import { ChevronIcon } from "../../common/icons/ChevronIcon"; import { Direction } from "../../common/icons/types"; +import { Criticality } from "../common/Criticality"; import { Description, Link } from "../styles"; import * as s from "./styles"; import { InsightCardProps } from "./types"; @@ -206,6 +207,11 @@ export const InsightCard = (props: InsightCardProps) => { {isExpanded && props.expandableContent && ( {props.expandableContent} )} + {props.showCriticality && ( + + + + )} } buttons={props.buttons} diff --git a/src/components/Insights/InsightCard/styles.ts b/src/components/Insights/InsightCard/styles.ts index 79f6e3582..d2b0e5726 100644 --- a/src/components/Insights/InsightCard/styles.ts +++ b/src/components/Insights/InsightCard/styles.ts @@ -102,3 +102,11 @@ export const AsyncBadge = styled.div` } }}; `; + +export const RowStat = styled.div` + display: flex; + font-size: 14px; + flex-direction: row; + gap: 8px; + overflow: hidden; +`; diff --git a/src/components/Insights/InsightCard/types.ts b/src/components/Insights/InsightCard/types.ts index b5a5b44f3..ff9f81607 100644 --- a/src/components/Insights/InsightCard/types.ts +++ b/src/components/Insights/InsightCard/types.ts @@ -17,6 +17,7 @@ export interface InsightCardProps { isRecent?: boolean; onRefresh: (insightType: InsightType) => void; isAsync?: boolean; + showCriticality?: boolean; } export interface PercentileViewModeOptionProps { diff --git a/src/components/Insights/SpanBottleneckInsight/index.tsx b/src/components/Insights/SpanBottleneckInsight/index.tsx index 213d6f041..8db7652c0 100644 --- a/src/components/Insights/SpanBottleneckInsight/index.tsx +++ b/src/components/Insights/SpanBottleneckInsight/index.tsx @@ -72,6 +72,7 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => { } onRecalculate={props.onRecalculate} onRefresh={props.onRefresh} + showCriticality /> ); }; diff --git a/src/components/Insights/common/Criticality/index.tsx b/src/components/Insights/common/Criticality/index.tsx index 90bb1637a..15cbeeeeb 100644 --- a/src/components/Insights/common/Criticality/index.tsx +++ b/src/components/Insights/common/Criticality/index.tsx @@ -4,13 +4,13 @@ import { Tooltip } from "../../../common/Tooltip"; import { Description } from "../../styles"; import * as s from "./styles"; -export const Criticality = (criticality: number) => ( +export const Criticality = (props: { value: number }) => ( <> Criticality - + - {criticality > 0 && } - {getCriticalityLabel(criticality)} + {props.value > 0 && } + {getCriticalityLabel(props.value)} From 9ad8e70190344cd7aa432ceafab7c4b80141c77b Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 26 Jan 2024 15:05:51 +0200 Subject: [PATCH 3/8] Remove from insight card criticality --- .../Insights/BottleneckInsight/index.tsx | 4 +- .../Insights/BottleneckInsight/mockData.ts | 2 +- .../ExcessiveAPICallsInsight.stories.tsx | 2 +- .../ExcessiveAPICallsInsight/index.tsx | 3 +- .../ExcessiveAPICallsInsight/styles.ts | 9 +++ .../HighNumberOfQueriesInsight/index.tsx | 4 +- src/components/Insights/InsightCard/index.tsx | 6 -- src/components/Insights/InsightCard/types.ts | 1 - .../Insights/SpanBottleneckInsight/index.tsx | 81 ++++++++++--------- .../SpanBottleneckInsight/mockData.ts | 2 +- .../Insights/SpanBottleneckInsight/styles.ts | 14 ++++ .../Insights/common/Criticality/index.tsx | 4 +- .../Insights/common/Criticality/styles.ts | 8 ++ 13 files changed, 83 insertions(+), 57 deletions(-) diff --git a/src/components/Insights/BottleneckInsight/index.tsx b/src/components/Insights/BottleneckInsight/index.tsx index 3642303df..912ba9c33 100644 --- a/src/components/Insights/BottleneckInsight/index.tsx +++ b/src/components/Insights/BottleneckInsight/index.tsx @@ -66,9 +66,7 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => { })} - - - + + } onRecalculate={props.onRecalculate} onRefresh={props.onRefresh} - showCriticality /> ); }; diff --git a/src/components/Insights/ExcessiveAPICallsInsight/styles.ts b/src/components/Insights/ExcessiveAPICallsInsight/styles.ts index 7cde7aba9..82e689038 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/styles.ts +++ b/src/components/Insights/ExcessiveAPICallsInsight/styles.ts @@ -30,3 +30,12 @@ export const SpanName = styled.span` export const Button = styled(CommonButton)` height: fit-content; `; + +export const RowStat = styled.div` + display: flex; + font-size: 14px; + flex-direction: row; + gap: 8px; + overflow: hidden; + padding-top: 12px; +`; diff --git a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx index 6ae50782b..88e71d5a3 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx +++ b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx @@ -37,9 +37,7 @@ export const HighNumberOfQueriesInsight = ( trips - - - + diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index 87cee4729..1c60ca1b9 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -18,7 +18,6 @@ import { ToggleValue } from "../../common/Toggle/types"; import { Tooltip } from "../../common/Tooltip"; import { ChevronIcon } from "../../common/icons/ChevronIcon"; import { Direction } from "../../common/icons/types"; -import { Criticality } from "../common/Criticality"; import { Description, Link } from "../styles"; import * as s from "./styles"; import { InsightCardProps } from "./types"; @@ -207,11 +206,6 @@ export const InsightCard = (props: InsightCardProps) => { {isExpanded && props.expandableContent && ( {props.expandableContent} )} - {props.showCriticality && ( - - - - )} } buttons={props.buttons} diff --git a/src/components/Insights/InsightCard/types.ts b/src/components/Insights/InsightCard/types.ts index ff9f81607..b5a5b44f3 100644 --- a/src/components/Insights/InsightCard/types.ts +++ b/src/components/Insights/InsightCard/types.ts @@ -17,7 +17,6 @@ export interface InsightCardProps { isRecent?: boolean; onRefresh: (insightType: InsightType) => void; isAsync?: boolean; - showCriticality?: boolean; } export interface PercentileViewModeOptionProps { diff --git a/src/components/Insights/SpanBottleneckInsight/index.tsx b/src/components/Insights/SpanBottleneckInsight/index.tsx index 8db7652c0..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,49 +31,53 @@ 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} onRefresh={props.onRefresh} - showCriticality /> ); }; 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..58a92aaae 100644 --- a/src/components/Insights/SpanBottleneckInsight/styles.ts +++ b/src/components/Insights/SpanBottleneckInsight/styles.ts @@ -33,3 +33,17 @@ export const ButtonsContainer = styled.div` display: flex; gap: 8px; `; + +export const RowStat = styled.div` + display: flex; + font-size: 14px; + flex-direction: row; + gap: 8px; + overflow: hidden; +`; + +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 index 15cbeeeeb..343ecad9c 100644 --- a/src/components/Insights/common/Criticality/index.tsx +++ b/src/components/Insights/common/Criticality/index.tsx @@ -5,7 +5,7 @@ import { Description } from "../../styles"; import * as s from "./styles"; export const Criticality = (props: { value: number }) => ( - <> + Criticality @@ -13,5 +13,5 @@ export const Criticality = (props: { value: number }) => ( {getCriticalityLabel(props.value)} - + ); diff --git a/src/components/Insights/common/Criticality/styles.ts b/src/components/Insights/common/Criticality/styles.ts index 40ba338bf..8839956ce 100644 --- a/src/components/Insights/common/Criticality/styles.ts +++ b/src/components/Insights/common/Criticality/styles.ts @@ -4,3 +4,11 @@ export const CriticalityValue = styled.span` display: flex; gap: 4px; `; + +export const Container = styled.div` + display: flex; + font-size: 14px; + flex-direction: row; + gap: 8px; + overflow: hidden; +`; From 5514e2566da4a71faf76bc857bb476dfc4c78fc6 Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:23:26 +0200 Subject: [PATCH 4/8] Update src/components/Insights/ExcessiveAPICallsInsight/styles.ts Co-authored-by: Kyrylo Shmidt --- .../Insights/ExcessiveAPICallsInsight/styles.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/Insights/ExcessiveAPICallsInsight/styles.ts b/src/components/Insights/ExcessiveAPICallsInsight/styles.ts index 82e689038..7cde7aba9 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/styles.ts +++ b/src/components/Insights/ExcessiveAPICallsInsight/styles.ts @@ -30,12 +30,3 @@ export const SpanName = styled.span` export const Button = styled(CommonButton)` height: fit-content; `; - -export const RowStat = styled.div` - display: flex; - font-size: 14px; - flex-direction: row; - gap: 8px; - overflow: hidden; - padding-top: 12px; -`; From 18c78466e2322e55492efd12489bd371a06332dc Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:23:34 +0200 Subject: [PATCH 5/8] Update src/components/Insights/HighNumberOfQueriesInsight/styles.ts Co-authored-by: Kyrylo Shmidt --- src/components/Insights/HighNumberOfQueriesInsight/styles.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Insights/HighNumberOfQueriesInsight/styles.ts b/src/components/Insights/HighNumberOfQueriesInsight/styles.ts index 661e5bfaf..bee00ac53 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/styles.ts +++ b/src/components/Insights/HighNumberOfQueriesInsight/styles.ts @@ -37,7 +37,3 @@ export const Key = styled.span` export const IconContainer = styled.span` display: flex; `; - -export const RowStat = styled(Stat)` - flex-direction: row; -`; From b9ea546c13e5ae474f6b5eca5eda4e959616d764 Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:23:40 +0200 Subject: [PATCH 6/8] Update src/components/Insights/SpanBottleneckInsight/styles.ts Co-authored-by: Kyrylo Shmidt --- src/components/Insights/SpanBottleneckInsight/styles.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/Insights/SpanBottleneckInsight/styles.ts b/src/components/Insights/SpanBottleneckInsight/styles.ts index 58a92aaae..a2944805d 100644 --- a/src/components/Insights/SpanBottleneckInsight/styles.ts +++ b/src/components/Insights/SpanBottleneckInsight/styles.ts @@ -34,14 +34,6 @@ export const ButtonsContainer = styled.div` gap: 8px; `; -export const RowStat = styled.div` - display: flex; - font-size: 14px; - flex-direction: row; - gap: 8px; - overflow: hidden; -`; - export const Container = styled.div` gap: 12px; display: flex; From c325d2d067ae277f5706760daed5abbb8388153b Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:24:17 +0200 Subject: [PATCH 7/8] Update src/components/Insights/InsightCard/styles.ts Co-authored-by: Kyrylo Shmidt --- src/components/Insights/InsightCard/styles.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/Insights/InsightCard/styles.ts b/src/components/Insights/InsightCard/styles.ts index d2b0e5726..79f6e3582 100644 --- a/src/components/Insights/InsightCard/styles.ts +++ b/src/components/Insights/InsightCard/styles.ts @@ -102,11 +102,3 @@ export const AsyncBadge = styled.div` } }}; `; - -export const RowStat = styled.div` - display: flex; - font-size: 14px; - flex-direction: row; - gap: 8px; - overflow: hidden; -`; From f05c20a4b90b69f62f0c11f5c447a40e7509bb9b Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 26 Jan 2024 15:40:01 +0200 Subject: [PATCH 8/8] fix styles --- src/components/Insights/common/Criticality/styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Insights/common/Criticality/styles.ts b/src/components/Insights/common/Criticality/styles.ts index 8839956ce..f9b634e06 100644 --- a/src/components/Insights/common/Criticality/styles.ts +++ b/src/components/Insights/common/Criticality/styles.ts @@ -2,13 +2,14 @@ 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; - flex-direction: row; gap: 8px; - overflow: hidden; + line-height: 18px; + align-items: center; `;