diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index 585330ed0..e129beb5d 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -11,7 +11,8 @@ import { AssetsData, AssetsProps, ExtendedAssetEntry, - GroupedAssetEntries + GroupedAssetEntries, + ServiceAssetsEntry } from "./types"; const REFRESH_INTERVAL = isNumber(window.assetsRefreshInterval) @@ -26,8 +27,8 @@ const actions = addPrefix(ACTION_PREFIX, { GO_TO_ASSET: "GO_TO_ASSET" }); -const groupEntries = (data: AssetsData): GroupedAssetEntries => { - const assetEntries: ExtendedAssetEntry[] = data.serviceAssetsEntries +const groupEntries = (data: ServiceAssetsEntry[]): GroupedAssetEntries => { + const assetEntries: ExtendedAssetEntry[] = data .flat() .map((entry) => entry.assetEntries.map((entry) => ({ @@ -70,7 +71,8 @@ export const Assets = (props: AssetsProps) => { }, REFRESH_INTERVAL); const handleAssetsData = (data: unknown) => { - setData(groupEntries(data as AssetsData)); + const entries = (data as AssetsData).serviceAssetsEntries; + setData(groupEntries(entries)); }; dispatcher.addActionListener(actions.SET_DATA, handleAssetsData); @@ -87,7 +89,7 @@ export const Assets = (props: AssetsProps) => { return; } - const groupedAssetEntries = groupEntries(props.data); + const groupedAssetEntries = groupEntries(props.data.serviceAssetsEntries); setData(groupedAssetEntries); }, [props.data]); diff --git a/src/components/Assets/mockData.ts b/src/components/Assets/mockData.ts index ff6bf5c8c..a08779148 100644 --- a/src/components/Assets/mockData.ts +++ b/src/components/Assets/mockData.ts @@ -1,6 +1,8 @@ import { AssetsData } from "./types"; export const data: AssetsData = { + accountId: "00000000-0000-0000-0000-000000000000", + environment: "BOB-LAPTOP[LOCAL]", serviceAssetsEntries: [ { itemType: "SpanAssets", @@ -4422,7 +4424,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "Digma.Analytics" }, { @@ -4969,7 +4971,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "Digma.Collector" }, { @@ -9375,7 +9377,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "Digma.Insight.Analysis" }, { @@ -11408,7 +11410,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "Digma.Measurement.Analysis" }, { @@ -11953,7 +11955,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "Digma.PluginBackend" }, { @@ -19634,7 +19636,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "Digma.Scheduler" }, { @@ -20016,7 +20018,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "KafkaSample01WIthAgent" }, { @@ -26007,7 +26009,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "PetClinicWithAgent" }, { @@ -28337,7 +28339,7 @@ export const data: AssetsData = { } ], accountId: "00000000-0000-0000-0000-000000000000", - environment: "ARIK-LAPTOP[LOCAL]", + environment: "BOB-LAPTOP[LOCAL]", serviceName: "Sample.MoneyTransfer.API" } ] diff --git a/src/components/Assets/types.ts b/src/components/Assets/types.ts index fffa5a3f7..60775289d 100644 --- a/src/components/Assets/types.ts +++ b/src/components/Assets/types.ts @@ -46,11 +46,15 @@ export interface AssetEntry { } export interface AssetsData { - serviceAssetsEntries: { - itemType: string; - assetEntries: AssetEntry[]; - accountId: string; - environment: string; - serviceName: string; - }[]; + accountId: string; + environment: string; + serviceAssetsEntries: ServiceAssetsEntry[]; +} + +export interface ServiceAssetsEntry { + itemType: string; + assetEntries: AssetEntry[]; + accountId: string; + environment: string; + serviceName: string; } diff --git a/src/components/common/Button/styles.ts b/src/components/common/Button/styles.ts index 76d011a91..1939dea10 100644 --- a/src/components/common/Button/styles.ts +++ b/src/components/common/Button/styles.ts @@ -4,9 +4,9 @@ import { ButtonElementProps } from "./types"; export const Button = styled.button` font-family: inherit; font-weight: 500; - font-size: 10px; - line-height: 12px; - padding: 2px 4px; + font-size: 12px; + line-height: 14px; + padding: 4px 8px; border-radius: 2px; cursor: pointer; display: flex; diff --git a/src/components/common/icons/PieChartIcon.tsx b/src/components/common/icons/PieChartIcon.tsx new file mode 100644 index 000000000..b8c8a7d1d --- /dev/null +++ b/src/components/common/icons/PieChartIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { useIconProps } from "./hooks"; +import { IconProps } from "./types"; + +const PieChartIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + ); +}; + +export const PieChartIcon = React.memo(PieChartIconComponent); diff --git a/src/types.ts b/src/types.ts index 3070fa3fe..28ef51026 100644 --- a/src/types.ts +++ b/src/types.ts @@ -19,7 +19,8 @@ export enum InsightType { SpanScaling = "SpanScaling", SpanScalingRootCause = "SpanScalingRootCause", SpanDurationBreakdown = "SpanDurationBreakdown", - EndpointDurationSlowdown = "EndpointDurationSlowdown" + EndpointDurationSlowdown = "EndpointDurationSlowdown", + EndpointBreakdown = "EndpointBreakdown" } export enum InsightImportance { diff --git a/src/utils/getInsightTypeInfo.ts b/src/utils/getInsightTypeInfo.ts index 1f9b051cf..ba589a2ff 100644 --- a/src/utils/getInsightTypeInfo.ts +++ b/src/utils/getInsightTypeInfo.ts @@ -4,6 +4,7 @@ import { BottleneckIcon } from "../components/common/icons/BottleneckIcon"; import { ClockWithTicksIcon } from "../components/common/icons/ClockWithTicksIcon"; import { MeterHighIcon } from "../components/common/icons/MeterHighIcon"; import { MeterLowIcon } from "../components/common/icons/MeterLowIcon"; +import { PieChartIcon } from "../components/common/icons/PieChartIcon"; import { SQLDatabaseIcon } from "../components/common/icons/SQLDatabaseIcon"; import { ScalesIcon } from "../components/common/icons/ScalesIcon"; import { SineIcon } from "../components/common/icons/SineIcon"; @@ -87,6 +88,10 @@ export const getInsightTypeInfo = ( [InsightType.EndpointDurationSlowdown]: { icon: SnailIcon, label: "Duration Slowdown Source Detected" + }, + [InsightType.EndpointBreakdown]: { + icon: PieChartIcon, + label: "Request Breakdown" } }; diff --git a/src/utils/getInsightTypeOrderPriority.ts b/src/utils/getInsightTypeOrderPriority.ts index 8a8f7a213..f8a03cfa8 100644 --- a/src/utils/getInsightTypeOrderPriority.ts +++ b/src/utils/getInsightTypeOrderPriority.ts @@ -20,7 +20,8 @@ export const getInsightTypeOrderPriority = (type: string): number => { [InsightType.NormalUsage]: 50, [InsightType.HighUsage]: 10, [InsightType.SlowEndpoint]: 20, - [InsightType.EndpointDurationSlowdown]: 25 + [InsightType.EndpointDurationSlowdown]: 25, + [InsightType.EndpointBreakdown]: 5 }; return insightOrderPriorityMap[type] || Infinity;