From 14391a0f96de89c051141cbe3ae012b671df4691 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20R=C3=BChsen?= Date: Wed, 18 Dec 2024 13:36:59 +0100 Subject: [PATCH 1/3] [Profiling] Add colors for new frame types (exe name, thread name, root) --- .../shared/kbn-profiling-utils/common/profiling.ts | 8 ++++++++ .../plugins/profiling/common/frame_type_colors.ts | 7 +++++++ .../profiling/public/utils/get_flamegraph_model/index.ts | 8 ++++++-- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts b/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts index 84c674cdc843c..d331181350a0f 100644 --- a/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts +++ b/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts @@ -37,6 +37,11 @@ export enum FrameType { DotNET, ErrorFlag = 0x80, Error = 0xff, + + // Artificial frame types for grouping, set by the ES profiling plugin + Root = 0x100, + ExecutableName = 0x101, + ThreadName = 0x102, } const frameTypeDescriptions = { @@ -53,6 +58,9 @@ const frameTypeDescriptions = { [FrameType.DotNET]: '.NET', [FrameType.ErrorFlag]: 'ErrorFlag', [FrameType.Error]: 'Error', + [FrameType.Root]: 'Root', + [FrameType.ExecutableName]: 'Process', // Due to OTEL semconv issues, "process name" is currently more correct than "executable name" + [FrameType.ThreadName]: 'Thread', }; export function isErrorFrame(ft: FrameType): boolean { diff --git a/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts b/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts index 162b87a87319e..0ebaec9f033b3 100644 --- a/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts +++ b/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts @@ -28,6 +28,10 @@ import { FrameType, normalizeFrameType } from '@kbn/profiling-utils'; * * Taken originally from prodfiler_ui/src/helpers/Pixi/frameTypeToColors.tsx */ +const RED = 0xfd8484; +const ORANGE = 0xffaa00; +const YELLOW = 0xe1e100; + export const FRAME_TYPE_COLOR_MAP = { [FrameType.Unsymbolized]: [0xfd8484, 0xfd9d9d, 0xfeb5b5, 0xfecece], [FrameType.Python]: [0xfcae6b, 0xfdbe89, 0xfdcea6, 0xfedfc4], @@ -42,6 +46,9 @@ export const FRAME_TYPE_COLOR_MAP = { [FrameType.DotNET]: [0x6c60e1, 0x8075e5, 0x948be9, 0xa8a0ed], [FrameType.ErrorFlag]: [0x0, 0x0, 0x0, 0x0], // This is a special case, it's not a real frame type [FrameType.Error]: [0xfd8484, 0xfd9d9d, 0xfeb5b5, 0xfecece], + [FrameType.Root]: [RED, RED, RED, RED], + [FrameType.ExecutableName]: [ORANGE, ORANGE, ORANGE, ORANGE], + [FrameType.ThreadName]: [YELLOW, YELLOW, YELLOW, YELLOW], }; export function frameTypeToRGB(frameType: FrameType, x: number): number { diff --git a/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts b/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts index 80f05ec04b2b8..dfa00062a3ac2 100644 --- a/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts +++ b/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts @@ -8,8 +8,8 @@ import type { ColumnarViewModel } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import d3 from 'd3'; import { compact, range, sum, uniqueId } from 'lodash'; -import { describeFrameType } from '@kbn/profiling-utils'; -import type { ElasticFlameGraph, FrameType } from '@kbn/profiling-utils'; +import { describeFrameType, FrameType } from '@kbn/profiling-utils'; +import type { ElasticFlameGraph } from '@kbn/profiling-utils'; import { createColumnarViewModel } from '../../../common/columnar_view_model'; import { FRAME_TYPE_COLOR_MAP, rgbToRGBA } from '../../../common/frame_type_colors'; import { ComparisonMode } from '../../components/normalization_menu'; @@ -180,6 +180,10 @@ export function getFlamegraphModel({ Object.entries(FRAME_TYPE_COLOR_MAP).map(([frameTypeKey, colors]) => { const frameType = Number(frameTypeKey) as FrameType; + if (frameType === FrameType.Root) { + return undefined; + } + return usedFrameTypes.has(frameType) ? { color: `#${colors[0].toString(16)}`, From 1b47745f0d6fd70527de3f3145570dcdfc236acd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20R=C3=BChsen?= Date: Wed, 8 Jan 2025 08:30:52 +0100 Subject: [PATCH 2/3] Rename Executable to Process --- .../packages/shared/kbn-profiling-utils/common/profiling.ts | 4 ++-- .../plugins/profiling/common/frame_type_colors.ts | 2 +- .../profiling/public/utils/get_flamegraph_model/index.ts | 4 ---- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts b/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts index d331181350a0f..b818f89606b9b 100644 --- a/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts +++ b/src/platform/packages/shared/kbn-profiling-utils/common/profiling.ts @@ -40,7 +40,7 @@ export enum FrameType { // Artificial frame types for grouping, set by the ES profiling plugin Root = 0x100, - ExecutableName = 0x101, + ProcessName = 0x101, ThreadName = 0x102, } @@ -59,7 +59,7 @@ const frameTypeDescriptions = { [FrameType.ErrorFlag]: 'ErrorFlag', [FrameType.Error]: 'Error', [FrameType.Root]: 'Root', - [FrameType.ExecutableName]: 'Process', // Due to OTEL semconv issues, "process name" is currently more correct than "executable name" + [FrameType.ProcessName]: 'Process', // Due to OTEL semconv issues, "process name" is currently more correct than "executable name" [FrameType.ThreadName]: 'Thread', }; diff --git a/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts b/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts index 0ebaec9f033b3..4d02980f7fc8c 100644 --- a/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts +++ b/x-pack/solutions/observability/plugins/profiling/common/frame_type_colors.ts @@ -47,7 +47,7 @@ export const FRAME_TYPE_COLOR_MAP = { [FrameType.ErrorFlag]: [0x0, 0x0, 0x0, 0x0], // This is a special case, it's not a real frame type [FrameType.Error]: [0xfd8484, 0xfd9d9d, 0xfeb5b5, 0xfecece], [FrameType.Root]: [RED, RED, RED, RED], - [FrameType.ExecutableName]: [ORANGE, ORANGE, ORANGE, ORANGE], + [FrameType.ProcessName]: [ORANGE, ORANGE, ORANGE, ORANGE], [FrameType.ThreadName]: [YELLOW, YELLOW, YELLOW, YELLOW], }; diff --git a/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts b/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts index dfa00062a3ac2..fa62ef615a72c 100644 --- a/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts +++ b/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts @@ -180,10 +180,6 @@ export function getFlamegraphModel({ Object.entries(FRAME_TYPE_COLOR_MAP).map(([frameTypeKey, colors]) => { const frameType = Number(frameTypeKey) as FrameType; - if (frameType === FrameType.Root) { - return undefined; - } - return usedFrameTypes.has(frameType) ? { color: `#${colors[0].toString(16)}`, From 875cd8460b6fa8e7c1800bb48fd844c7e9eac3b7 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 8 Jan 2025 07:55:06 +0000 Subject: [PATCH 3/3] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../profiling/public/utils/get_flamegraph_model/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts b/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts index fa62ef615a72c..80f05ec04b2b8 100644 --- a/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts +++ b/x-pack/solutions/observability/plugins/profiling/public/utils/get_flamegraph_model/index.ts @@ -8,8 +8,8 @@ import type { ColumnarViewModel } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import d3 from 'd3'; import { compact, range, sum, uniqueId } from 'lodash'; -import { describeFrameType, FrameType } from '@kbn/profiling-utils'; -import type { ElasticFlameGraph } from '@kbn/profiling-utils'; +import { describeFrameType } from '@kbn/profiling-utils'; +import type { ElasticFlameGraph, FrameType } from '@kbn/profiling-utils'; import { createColumnarViewModel } from '../../../common/columnar_view_model'; import { FRAME_TYPE_COLOR_MAP, rgbToRGBA } from '../../../common/frame_type_colors'; import { ComparisonMode } from '../../components/normalization_menu';