diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index 60fe74a6c..1c60ca1b9 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -72,37 +72,45 @@ export const InsightCard = (props: InsightCardProps) => { const renderRecalculationBlock = ( actualStartTime: string, - customStartTime: string | null + customStartTime: string | null, + isRecalculatingStarted: boolean ) => { + if (!props.data.customStartTime && !isRecalculatingStarted) return; + + if ( + isRecalculatingStarted || + (customStartTime && customStartTime > actualStartTime) + ) + return ( + + + Applying the new time filter. Wait a few minutes and then refresh. + + + Refresh + + + ); + const areStartTimesEqual = customStartTime && new Date(actualStartTime).valueOf() - new Date(customStartTime).valueOf() === 0; - const title = new Date(actualStartTime).toString(); + if (areStartTimesEqual) { + const title = new Date(actualStartTime).toString(); + return ( + + Data from:{" "} + + {formatTimeDistance(actualStartTime)} + + + ); + } - return ( - <> - {areStartTimesEqual ? ( - - Data from:{" "} - - {formatTimeDistance(actualStartTime)} - - - ) : ( - - - Applying the new time filter. Wait a few minutes and then refresh. - - - Refresh - - - )} - - ); + return; }; const isNew = isString(props.data.firstDetected) @@ -180,10 +188,10 @@ export const InsightCard = (props: InsightCardProps) => { /> )} {props.data.actualStartTime && - (props.data.customStartTime || isRecalculatingStarted) && renderRecalculationBlock( props.data.actualStartTime, - props.data.customStartTime + props.data.customStartTime, + isRecalculatingStarted )} {props.content && ( {props.content} diff --git a/src/components/Insights/SpanNexusInsight/index.tsx b/src/components/Insights/SpanNexusInsight/index.tsx index 5ae7045f0..e05c97887 100644 --- a/src/components/Insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/SpanNexusInsight/index.tsx @@ -4,9 +4,21 @@ import { Description } from "../styles"; import * as s from "./styles"; import { SpanNexusInsightProps } from "./types"; +const getTagType = (isHigh: boolean) => { + return isHigh ? "mediumSeverity" : "default"; +}; + export const SpanNexusInsight = (props: SpanNexusInsightProps) => { const { insight } = props; - const { entries, flows, usage, services } = insight; + const { + entries, + flows, + usage, + services, + isEntriesHigh, + isFlowsHigh, + isServicesHigh + } = insight; return ( { Services - + Endpoints - + Flows - - - - Usage - + + {usage && ( + + Usage + + + )} } diff --git a/src/components/Insights/SpanNexusInsight/mockData.ts b/src/components/Insights/SpanNexusInsight/mockData.ts index 5ce567c55..ecc559cbe 100644 --- a/src/components/Insights/SpanNexusInsight/mockData.ts +++ b/src/components/Insights/SpanNexusInsight/mockData.ts @@ -53,5 +53,8 @@ export const mockedSpanNexusInsight: SpanNexusInsight = { flows: 4, services: 3, usage: "High", - entries: 5 + entries: 5, + isEntriesHigh: false, + isFlowsHigh: true, + isServicesHigh: false }; diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index e3cafe43f..d0018bf29 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -688,5 +688,8 @@ export interface SpanNexusInsight extends SpanInsight { services: number; entries: number; flows: number; - usage: string | null; + usage?: string | null; + isEntriesHigh: boolean; + isFlowsHigh: boolean; + isServicesHigh: boolean; } diff --git a/src/components/common/Tag/types.ts b/src/components/common/Tag/types.ts index fb1d77412..10941c2f4 100644 --- a/src/components/common/Tag/types.ts +++ b/src/components/common/Tag/types.ts @@ -5,7 +5,8 @@ export type TagType = | "highSeverity" | "mediumSeverity" | "lowSeverity" - | "success"; + | "success" + | "default"; export interface TagThemeColors { default: {