diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 4a9a6caa1..425189f7a 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -12,5 +12,4 @@ "https://github.com/digma-ai/digma-vscode-plugin#%EF%B8%8F-extension-settings"; window.wizardSkipInstallationStep; window.assetsRefreshInterval; - window.insightsRefreshInterval; diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 02055a5f3..bba38d661 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -5,7 +5,7 @@ import { Popover } from "../../common/Popover"; import { PopoverContent } from "../../common/Popover/PopoverContent"; import { PopoverTrigger } from "../../common/Popover/PopoverTrigger"; import { ChevronIcon } from "../../common/icons/ChevronIcon"; -import { DIRECTION } from "../../common/icons/types"; +import { Direction } from "../../common/icons/types"; import { getAssetTypeInfo } from "../utils"; import * as s from "./styles"; import { @@ -159,7 +159,7 @@ export const AssetList = (props: AssetListProps) => { - + {assetTypeInfo?.icon && } {assetTypeInfo?.label || props.assetTypeId} @@ -178,7 +178,7 @@ export const AssetList = (props: AssetListProps) => { Sort by {sorting.criterion} diff --git a/src/components/Assets/types.ts b/src/components/Assets/types.ts index 0fd1aa0c1..5917075bc 100644 --- a/src/components/Assets/types.ts +++ b/src/components/Assets/types.ts @@ -1,27 +1,5 @@ import { Duration } from "../../globals"; -export enum INSIGHT_TYPES { - SpanUsageStatus = "SpanUsageStatus", - TopErrorFlows = "TopErrorFlows", - SpanDurationChange = "SpanDurationChange", - HotSpot = "HotSpot", - Errors = "Errors", - SlowEndpoint = "SlowEndpoint", - LowUsage = "LowUsage", - NormalUsage = "NormalUsage", - HighUsage = "HighUsage", - SlowestSpans = "SlowestSpans", - EndpointSpaNPlusOne = "EndpointSpaNPlusOne", - SpanUsages = "SpanUsages", - SpaNPlusOne = "SpaNPlusOne", - SpanEndpointBottleneck = "SpanEndpointBottleneck", - SpanHighUsage = "SpanHighUsage", - SpanDurations = "SpanDurations", - SpanScaling = "SpanScaling", - SpanScalingRootCause = "SpanScalingRootCause", - SpanDurationBreakdown = "SpanDurationBreakdown" -} - export interface AssetsProps { data?: AssetsData; } diff --git a/src/components/Assets/utils.tsx b/src/components/Assets/utils.tsx index 6bfbce76f..27a59b256 100644 --- a/src/components/Assets/utils.tsx +++ b/src/components/Assets/utils.tsx @@ -1,112 +1,10 @@ import { MemoExoticComponent } from "react"; -import { DefaultTheme } from "styled-components"; -import { BottleneckIcon } from "../common/icons/BottleneckIcon"; import { CodeMarkerPinIcon } from "../common/icons/CodeMarkerPinIcon"; import { DatabaseIcon } from "../common/icons/DatabaseIcon"; import { EndpointIcon } from "../common/icons/EndpointIcon"; import { HTTPClientIcon } from "../common/icons/HTTPClientIcon"; -import { MeterHighIcon } from "../common/icons/MeterHighIcon"; -import { MeterLowIcon } from "../common/icons/MeterLowIcon"; -import { ScalesIcon } from "../common/icons/ScalesIcon"; -import { SnailIcon } from "../common/icons/SnailIcon"; -import { SpotIcon } from "../common/icons/SpotIcon"; -import { SQLDatabaseIcon } from "../common/icons/SQLDatabaseIcon"; -import { IconProps } from "../common/icons/types"; import { UserIcon } from "../common/icons/UserIcon"; -import { WarningCircleIcon } from "../common/icons/WarningCircleIcon"; -import { Insight, INSIGHT_TYPES } from "./types"; - -export const getInsightInfo = ( - type: string -): - | { - icon: MemoExoticComponent<(props: IconProps) => JSX.Element>; - label: string; - } - | undefined => { - const insightInfoMap: Record< - string, - { - icon: MemoExoticComponent<(props: IconProps) => JSX.Element>; - label: string; - } - > = { - [INSIGHT_TYPES.Errors]: { - icon: WarningCircleIcon, - label: "Errors" - }, - [INSIGHT_TYPES.HotSpot]: { - icon: SpotIcon, - label: "Error Hotspot" - }, - [INSIGHT_TYPES.SlowEndpoint]: { - icon: SnailIcon, - label: "Slow Endpoint" - }, - [INSIGHT_TYPES.LowUsage]: { - icon: MeterLowIcon, - label: "Endpoint Low Traffic" - }, - [INSIGHT_TYPES.HighUsage]: { - icon: MeterHighIcon, - - label: "Endpoint High Traffic" - }, - [INSIGHT_TYPES.SlowestSpans]: { - icon: BottleneckIcon, - label: "Span Bottleneck" - }, - [INSIGHT_TYPES.EndpointSpaNPlusOne]: { - icon: SQLDatabaseIcon, - label: "Suspected N-Plus-1" - }, - [INSIGHT_TYPES.SpaNPlusOne]: { - icon: SQLDatabaseIcon, - label: "Suspected N-Plus-1" - }, - [INSIGHT_TYPES.SpanEndpointBottleneck]: { - icon: BottleneckIcon, - label: "Bottleneck" - }, - [INSIGHT_TYPES.SpanScaling]: { - icon: ScalesIcon, - label: "Scaling Issue Found" - }, - [INSIGHT_TYPES.SpanScalingRootCause]: { - icon: ScalesIcon, - label: "Scaling Issue Root Cause Found" - } - }; - - return insightInfoMap[type]; -}; - -const getImportanceColor = ( - importance: number, - theme: DefaultTheme -): string => { - if (importance < 3) { - return theme.mode === "light" ? "#f93967" : "#e00036"; - } - if (importance < 5) { - return theme.mode === "light" ? "#e06c00" : "#ff810d"; - } - if (importance > 7) { - return theme.mode === "light" ? "#e8b500" : "#ffcb14"; - } - - return theme.mode === "light" ? "#1dc693" : "#67d28b"; -}; - -export const getInsightIcon = ( - insight: Insight, - theme: DefaultTheme, - size?: number -): JSX.Element => { - const insightInfo = getInsightInfo(insight.type); - const color = getImportanceColor(insight.importance, theme); - return insightInfo ? : <>; -}; +import { IconProps } from "../common/icons/types"; export const getAssetTypeInfo = ( assetTypeId: string diff --git a/src/components/RecentActivity/EnvironmentPanel/index.tsx b/src/components/RecentActivity/EnvironmentPanel/index.tsx index 4e03a641f..9aa056561 100644 --- a/src/components/RecentActivity/EnvironmentPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/index.tsx @@ -6,7 +6,7 @@ import { ChevronIcon } from "../../common/icons/ChevronIcon"; import { DigmaLogoFlatIcon } from "../../common/icons/DigmaLogoFlatIcon"; import { ListIcon } from "../../common/icons/ListIcon"; import { TableIcon } from "../../common/icons/TableIcon"; -import { DIRECTION } from "../../common/icons/types"; +import { Direction } from "../../common/icons/types"; import { EnvironmentTab } from "./EnvironmentTab"; import * as s from "./styles"; import { EnvironmentPanelProps, ScrollDirection } from "./types"; @@ -124,7 +124,7 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => { disabled={isLeftCarouselButtonDisabled} > { disabled={isRightCarouselButtonDisabled} > { - const insightInfoMap: Record = { - [INSIGHT_TYPES.HotSpot]: { - icon: , - label: "Error Hotspot" - }, - [INSIGHT_TYPES.SlowEndpoint]: { - icon: , - label: "Slow Endpoint" - }, - [INSIGHT_TYPES.HighUsage]: { - icon: ( - - ), - label: "Endpoint High Traffic" - }, - [INSIGHT_TYPES.SlowestSpans]: { - icon: , - label: "Span Bottleneck" - }, - [INSIGHT_TYPES.EndpointSpaNPlusOne]: { - icon: , - label: "Suspected N-Plus-1" - }, - [INSIGHT_TYPES.SpaNPlusOne]: { - icon: , - label: "Suspected N-Plus-1" - }, - [INSIGHT_TYPES.SpanEndpointBottleneck]: { - icon: , - label: "Bottleneck" - }, - [INSIGHT_TYPES.SpanScaling]: { - icon: , - label: "Scaling Issue Found" - }, - [INSIGHT_TYPES.SpanScalingRootCause]: { - icon: , - label: "Scaling Issue Root Cause Found" - } - }; - - return insightInfoMap[type]; -}; +import { RecentActivityTableProps } from "./types"; const columnHelper = createColumnHelper(); @@ -147,11 +92,13 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => { {insights .map((x) => { - const insightInfo = getInsightInfo(x.type, theme); - return insightInfo ? ( - - {insightInfo.icon} - + const insightTypeInfo = getInsightTypeInfo(x.type); + const iconColor = getInsightImportanceColor(x.importance, theme); + + return insightTypeInfo ? ( + + + ) : null; }) .filter(Boolean)} diff --git a/src/components/RecentActivity/RecentActivityTable/styles.ts b/src/components/RecentActivity/RecentActivityTable/styles.ts index c55d269bb..8466cff05 100644 --- a/src/components/RecentActivity/RecentActivityTable/styles.ts +++ b/src/components/RecentActivity/RecentActivityTable/styles.ts @@ -7,6 +7,7 @@ export const Table = styled.table` border-spacing: 0 3px; font-weight: 400; font-size: 14px; + color: ${({ theme }) => { switch (theme.mode) { case "light": @@ -22,6 +23,7 @@ export const Table = styled.table` export const TableHead = styled.thead` font-size: 10px; height: 26px; + color: ${({ theme }) => { switch (theme.mode) { case "light": @@ -105,7 +107,27 @@ export const DurationContainer = styled.span` export const InsightsContainer = styled.span` display: flex; - gap: 8px; + gap: 4px; +`; + +export const InsightIconContainer = styled.span` + display: flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + flex-shrink: 0; + border-radius: 4px; + + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#e9eef4"; + case "dark": + case "dark-jetbrains": + return "#2e2e2e"; + } + }}; `; export const TraceButtonContainer = styled.div` @@ -117,6 +139,7 @@ export const TraceButtonContainer = styled.div` export const Suffix = styled.span` margin-left: 2px; font-size: 10px; + color: ${({ theme }) => { switch (theme.mode) { case "light": @@ -140,6 +163,7 @@ export const ListHeader = styled.div` line-height: 16px; font-weight: 400; font-size: 10px; + color: ${({ theme }) => { switch (theme.mode) { case "light": @@ -161,6 +185,7 @@ export const List = styled.ul` flex-direction: column; gap: 22px; font-weight: 400; + color: ${({ theme }) => { switch (theme.mode) { case "light": diff --git a/src/components/RecentActivity/RecentActivityTable/types.ts b/src/components/RecentActivity/RecentActivityTable/types.ts index 4e1f21bdd..e75bbbeff 100644 --- a/src/components/RecentActivity/RecentActivityTable/types.ts +++ b/src/components/RecentActivity/RecentActivityTable/types.ts @@ -8,25 +8,3 @@ export interface RecentActivityTableProps { viewMode: ViewMode; isTraceButtonVisible: boolean; } - -export enum INSIGHT_TYPES { - SpanUsageStatus = "SpanUsageStatus", - TopErrorFlows = "TopErrorFlows", - SpanDurationChange = "SpanDurationChange", - HotSpot = "HotSpot", - Errors = "Errors", - SlowEndpoint = "SlowEndpoint", - LowUsage = "LowUsage", - NormalUsage = "NormalUsage", - HighUsage = "HighUsage", - SlowestSpans = "SlowestSpans", - EndpointSpaNPlusOne = "EndpointSpaNPlusOne", - SpanUsages = "SpanUsages", - SpaNPlusOne = "SpaNPlusOne", - SpanEndpointBottleneck = "SpanEndpointBottleneck", - SpanHighUsage = "SpanHighUsage", - SpanDurations = "SpanDurations", - SpanScaling = "SpanScaling", - SpanScalingRootCause = "SpanScalingRootCause", - SpanDurationBreakdown = "SpanDurationBreakdown" -} diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts index 516173a73..1c3fb1b88 100644 --- a/src/components/RecentActivity/types.ts +++ b/src/components/RecentActivity/types.ts @@ -11,6 +11,7 @@ export interface EntrySpan { export interface SlimInsight { type: string; codeObjectIds: string[]; + importance: number; } export interface ActivityEntry { diff --git a/src/components/common/AssetEntry/index.tsx b/src/components/common/AssetEntry/index.tsx index 9ea68ecbd..209863461 100644 --- a/src/components/common/AssetEntry/index.tsx +++ b/src/components/common/AssetEntry/index.tsx @@ -1,6 +1,7 @@ import { useTheme } from "styled-components"; +import { getInsightImportanceColor } from "../../../utils/getInsightImportanceColor"; +import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo"; import { timeAgo } from "../../../utils/timeAgo"; -import { getInsightIcon, getInsightInfo } from "../../Assets/utils"; import { OpenTelemetryLogoIcon } from "../icons/OpenTelemetryLogoIcon"; import * as s from "./styles"; import { AssetEntryProps } from "./types"; @@ -32,14 +33,24 @@ export const AssetEntry = (props: AssetEntryProps) => { {name} - {props.entry.insights.map((insight) => ( - - {getInsightIcon(insight, theme, 20)} - - ))} + {props.entry.insights.map((insight) => { + const insightTypeInfo = getInsightTypeInfo(insight.type); + const insightIconColor = getInsightImportanceColor( + insight.importance, + theme + ); + + return ( + + {insightTypeInfo && ( + + )} + + ); + })} diff --git a/src/components/common/icons/ArrowIcon.tsx b/src/components/common/icons/ArrowIcon.tsx index 16fa68e9d..78766c429 100644 --- a/src/components/common/icons/ArrowIcon.tsx +++ b/src/components/common/icons/ArrowIcon.tsx @@ -1,18 +1,18 @@ import React from "react"; import { useIconProps } from "./hooks"; -import { DIRECTION, RotatableIconProps } from "./types"; +import { Direction, RotatableIconProps } from "./types"; -const directionRotateMap: { [key in DIRECTION]: string } = { - [DIRECTION.UP]: "0", - [DIRECTION.LEFT]: "0", - [DIRECTION.RIGHT]: "0", - [DIRECTION.DOWN]: "90" +const directionRotateMap: { [key in Direction]: string } = { + [Direction.UP]: "0", + [Direction.LEFT]: "0", + [Direction.RIGHT]: "0", + [Direction.DOWN]: "90" }; const ArrowIconComponent = (props: RotatableIconProps) => { const { size, color } = useIconProps(props); const transform = { - transform: `rotate(${directionRotateMap[props.direction || DIRECTION.UP]})` + transform: `rotate(${directionRotateMap[props.direction || Direction.UP]})` }; return ( diff --git a/src/components/common/icons/ChevronIcon.tsx b/src/components/common/icons/ChevronIcon.tsx index d837fb844..c450b94d0 100644 --- a/src/components/common/icons/ChevronIcon.tsx +++ b/src/components/common/icons/ChevronIcon.tsx @@ -1,12 +1,12 @@ import React from "react"; import { useIconProps } from "./hooks"; -import { DIRECTION, RotatableIconProps } from "./types"; +import { Direction, RotatableIconProps } from "./types"; -const directionRotateMap: { [key in DIRECTION]: string } = { - [DIRECTION.DOWN]: "0", - [DIRECTION.LEFT]: "90", - [DIRECTION.UP]: "180", - [DIRECTION.RIGHT]: "270" +const directionRotateMap: { [key in Direction]: string } = { + [Direction.DOWN]: "0", + [Direction.LEFT]: "90", + [Direction.UP]: "180", + [Direction.RIGHT]: "270" }; const ChevronIconComponent = (props: RotatableIconProps) => { @@ -14,7 +14,7 @@ const ChevronIconComponent = (props: RotatableIconProps) => { const transform = { transform: `rotate(${ - directionRotateMap[props.direction || DIRECTION.DOWN] + directionRotateMap[props.direction || Direction.DOWN] })` }; diff --git a/src/components/common/icons/types.ts b/src/components/common/icons/types.ts index e31e510f0..515e0a072 100644 --- a/src/components/common/icons/types.ts +++ b/src/components/common/icons/types.ts @@ -1,4 +1,4 @@ -export enum DIRECTION { +export enum Direction { LEFT = "LEFT", UP = "UP", RIGHT = "RIGHT", @@ -12,7 +12,7 @@ export interface IconProps { } export interface RotatableIconProps extends IconProps { - direction?: DIRECTION; + direction?: Direction; } export interface ThemeableIconProps { diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 000000000..d974f042c --- /dev/null +++ b/src/types.ts @@ -0,0 +1,20 @@ +export enum InsightType { + TopErrorFlows = "TopErrorFlows", + SpanDurationChange = "SpanDurationChange", + SpanUsageStatus = "SpanUsageStatus", + HotSpot = "HotSpot", + Errors = "Errors", + SlowEndpoint = "SlowEndpoint", + LowUsage = "LowUsage", + NormalUsage = "NormalUsage", + HighUsage = "HighUsage", + SlowestSpans = "SlowestSpans", + EndpointSpanNPlusOne = "EndpointSpaNPlusOne", + SpanUsages = "SpanUsages", + SpanNPlusOne = "SpaNPlusOne", + SpanEndpointBottleneck = "SpanEndpointBottleneck", + SpanDurations = "SpanDurations", + SpanScaling = "SpanScaling", + SpanScalingRootCause = "SpanScalingRootCause", + SpanDurationBreakdown = "SpanDurationBreakdown" +} diff --git a/src/utils/getInsightImportanceColor.ts b/src/utils/getInsightImportanceColor.ts new file mode 100644 index 000000000..ad99f37fe --- /dev/null +++ b/src/utils/getInsightImportanceColor.ts @@ -0,0 +1,46 @@ +import { DefaultTheme } from "styled-components"; + +export const getInsightImportanceColor = ( + importance: number, + theme: DefaultTheme +): string | undefined => { + if (importance === 0) { + return undefined; + } + + if (importance < 3) { + switch (theme.mode) { + case "light": + return "#f93967"; + case "dark": + case "dark-jetbrains": + return "#e00036"; + } + } + if (importance < 5) { + switch (theme.mode) { + case "light": + return "#e06c00"; + case "dark": + case "dark-jetbrains": + return "#ff810d"; + } + } + if (importance < 7) { + switch (theme.mode) { + case "light": + return "#e8b500"; + case "dark": + case "dark-jetbrains": + return "#ffcb14"; + } + } + + switch (theme.mode) { + case "light": + return "#1dc693"; + case "dark": + case "dark-jetbrains": + return "#67d28b"; + } +}; diff --git a/src/utils/getInsightTypeInfo.ts b/src/utils/getInsightTypeInfo.ts new file mode 100644 index 000000000..7e277100a --- /dev/null +++ b/src/utils/getInsightTypeInfo.ts @@ -0,0 +1,89 @@ +import { MemoExoticComponent } from "react"; +import { AlarmClockIcon } from "../components/common/icons/AlarmClockIcon"; +import { BottleneckIcon } from "../components/common/icons/BottleneckIcon"; +import { MeterHighIcon } from "../components/common/icons/MeterHighIcon"; +import { MeterLowIcon } from "../components/common/icons/MeterLowIcon"; +import { SQLDatabaseIcon } from "../components/common/icons/SQLDatabaseIcon"; +import { ScalesIcon } from "../components/common/icons/ScalesIcon"; +import { SineIcon } from "../components/common/icons/SineIcon"; +import { SnailIcon } from "../components/common/icons/SnailIcon"; +import { SpotIcon } from "../components/common/icons/SpotIcon"; +import { WarningCircleIcon } from "../components/common/icons/WarningCircleIcon"; +import { IconProps } from "../components/common/icons/types"; +import { InsightType } from "../types"; + +export const getInsightTypeInfo = ( + type: string +): + | { + icon: MemoExoticComponent<(props: IconProps) => JSX.Element>; + label: string; + } + | undefined => { + const insightTypeInfoMap: Record< + string, + { + icon: MemoExoticComponent<(props: IconProps) => JSX.Element>; + label: string; + } + > = { + [InsightType.Errors]: { + icon: WarningCircleIcon, + label: "Errors" + }, + [InsightType.HotSpot]: { + icon: SpotIcon, + label: "Error Hotspot" + }, + [InsightType.SlowEndpoint]: { + icon: SnailIcon, + label: "Slow Endpoint" + }, + [InsightType.LowUsage]: { + icon: MeterLowIcon, + label: "Endpoint Low Traffic" + }, + [InsightType.HighUsage]: { + icon: MeterHighIcon, + label: "Endpoint High Traffic" + }, + [InsightType.SlowestSpans]: { + icon: BottleneckIcon, + label: "Span Bottleneck" + }, + [InsightType.EndpointSpanNPlusOne]: { + icon: SQLDatabaseIcon, + label: "Suspected N-Plus-1" + }, + [InsightType.SpanNPlusOne]: { + icon: SQLDatabaseIcon, + label: "Suspected N-Plus-1" + }, + [InsightType.SpanEndpointBottleneck]: { + icon: BottleneckIcon, + label: "Bottleneck" + }, + [InsightType.SpanScaling]: { + icon: ScalesIcon, + label: "Scaling Issue Found" + }, + [InsightType.SpanScalingRootCause]: { + icon: ScalesIcon, + label: "Scaling Issue Root Cause Found" + }, + [InsightType.SpanUsages]: { + icon: SineIcon, + label: "Top Usage" + }, + [InsightType.SpanDurations]: { + icon: AlarmClockIcon, + label: "Duration" + }, + [InsightType.SpanDurationBreakdown]: { + icon: AlarmClockIcon, + label: "Duration Breakdown" + } + }; + + return insightTypeInfoMap[type]; +};