[Profiling] Add colors for new frame types (exe name, thread name, root)

Author: rockdaboot

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 {

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 {

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)}`,