diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 0f15b007c..ae16e8518 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -1,6 +1,7 @@ import { useContext } from "react"; import { DefaultTheme, useTheme } from "styled-components"; import { getFeatureFlagValue } from "../../../../featureFlags"; +import { isString } from "../../../../typeGuards/isString"; import { FeatureFlag, InsightType } from "../../../../types"; import { formatTimeDistance } from "../../../../utils/formatTimeDistance"; import { getInsightImportanceColor } from "../../../../utils/getInsightImportanceColor"; @@ -8,6 +9,7 @@ import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; import { getInsightTypeOrderPriority } from "../../../../utils/getInsightTypeOrderPriority"; import { ConfigContext } from "../../../common/App/ConfigContext"; import { ImpactScore } from "../../../common/ImpactScore"; +import { Tag } from "../../../common/Tag"; import { Tooltip } from "../../../common/Tooltip"; import { GlobeIcon } from "../../../common/icons/GlobeIcon"; import { getAssetTypeInfo } from "../../utils"; @@ -15,6 +17,8 @@ import { SORTING_CRITERION } from "../types"; import * as s from "./styles"; import { AssetEntryProps } from "./types"; +const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds + const getServiceIconColor = (theme: DefaultTheme) => { switch (theme.mode) { case "light": @@ -69,6 +73,11 @@ export const AssetEntry = (props: AssetEntryProps) => { }).replace(" ", ""); const timeDistanceTitle = new Date(lastSeenDateTime).toString(); + const isNew = isString(props.entry.firstDetected) + ? Date.now() - new Date(props.entry.firstDetected).valueOf() < + IS_NEW_TIME_LIMIT + : false; + return ( @@ -80,7 +89,8 @@ export const AssetEntry = (props: AssetEntryProps) => { handleLinkClick()}>{name} - + + {isNew && } {sortedInsights.map((insight) => { const insightTypeInfo = getInsightTypeInfo(insight.type); const insightIconColor = getInsightImportanceColor( @@ -101,7 +111,7 @@ export const AssetEntry = (props: AssetEntryProps) => { ) ); })} - + diff --git a/src/components/Assets/AssetList/AssetEntry/styles.ts b/src/components/Assets/AssetList/AssetEntry/styles.ts index 0c55bc8eb..e52acbff1 100644 --- a/src/components/Assets/AssetList/AssetEntry/styles.ts +++ b/src/components/Assets/AssetList/AssetEntry/styles.ts @@ -53,7 +53,8 @@ export const Link = styled.a` overflow: hidden; `; -export const InsightIconsContainer = styled.div` +export const IndicatorsContainer = styled.div` + align-items: center; display: flex; gap: 2px; margin-left: auto; diff --git a/src/components/Assets/AssetList/types.ts b/src/components/Assets/AssetList/types.ts index 0d1ca8dc9..2d4f9475b 100644 --- a/src/components/Assets/AssetList/types.ts +++ b/src/components/Assets/AssetList/types.ts @@ -60,6 +60,7 @@ export interface AssetEntry { service: string; services: string[]; spanCodeObjectId: string; + firstDetected?: string; } export type AssetsData = { diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index 568b5495c..60fe74a6c 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import { useTheme } from "styled-components"; import { PERCENTILES } from "../../../constants"; +import { isString } from "../../../typeGuards/isString"; import { formatTimeDistance } from "../../../utils/formatTimeDistance"; import { getInsightImportanceColor } from "../../../utils/getInsightImportanceColor"; import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo"; @@ -11,6 +12,7 @@ import { Menu } from "../../common/Menu"; import { Popover } from "../../common/Popover"; import { PopoverContent } from "../../common/Popover/PopoverContent"; import { PopoverTrigger } from "../../common/Popover/PopoverTrigger"; +import { Tag } from "../../common/Tag"; import { Toggle } from "../../common/Toggle"; import { ToggleValue } from "../../common/Toggle/types"; import { Tooltip } from "../../common/Tooltip"; @@ -22,6 +24,7 @@ import { InsightCardProps } from "./types"; const RECALCULATE = "recalculate"; const DEFAULT_PERCENTILE = 0.5; +const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds export const InsightCard = (props: InsightCardProps) => { const [isExpanded, setIsExpanded] = useState(false); @@ -102,6 +105,11 @@ export const InsightCard = (props: InsightCardProps) => { ); }; + const isNew = isString(props.data.firstDetected) + ? Date.now() - new Date(props.data.firstDetected).valueOf() < + IS_NEW_TIME_LIMIT + : false; + return ( { {insightTypeInfo?.label || props.data.type} + {isNew && } {props.isAsync && Async} {props.stats && {props.stats}} {(props.menuItems || props.data.isRecalculateEnabled) && (