[8.19] [Profiling] Add colors for new frame types (process name, thread name, root) (#204977) (#219979)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Profiling] Add colors for new frame types (process name, thread
name, root) (#204977)](#204977)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Tim
Rühsen","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-08T09:24:43Z","message":"[Profiling]
Add colors for new frame types (process name, thread name, root)
(#204977)\n\n## Summary\r\nThis PR is a pre-requisite for adding
aggregation by process name and by\r\nthread name to the Universal
Profiling flamegraph view.\r\n\r\nIt adds three artificial node types to
the flamegraph including color\r\ncodes.\r\n\r\nAs a side-effect, the
root node now has its own color code. Previously,\r\nit (accidentally)
used the color code of \"unknown\" type frames.\r\n\r\nThe PR is
backwards compatible, so it doesn't change anything in the UI\r\nwhen
connecting with current Elasticsearch.\r\nAs soon as [the PR
for\r\nES](elastic/elasticsearch#119115) is
merged, the\r\nnew aggregations show
up.","sha":"bc5d8db237bdef481de9e4ce37d9e460755ae418","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","release_note:skip","backport:skip","v9.0.0","ci:project-deploy-observability","Team:obs-ux-infra_services"],"title":"[Profiling]
Add colors for new frame types (process name, thread name,
root)","number":204977,"url":"https://github.com/elastic/kibana/pull/204977","mergeCommit":{"message":"[Profiling]
Add colors for new frame types (process name, thread name, root)
(#204977)\n\n## Summary\r\nThis PR is a pre-requisite for adding
aggregation by process name and by\r\nthread name to the Universal
Profiling flamegraph view.\r\n\r\nIt adds three artificial node types to
the flamegraph including color\r\ncodes.\r\n\r\nAs a side-effect, the
root node now has its own color code. Previously,\r\nit (accidentally)
used the color code of \"unknown\" type frames.\r\n\r\nThe PR is
backwards compatible, so it doesn't change anything in the UI\r\nwhen
connecting with current Elasticsearch.\r\nAs soon as [the PR
for\r\nES](elastic/elasticsearch#119115) is
merged, the\r\nnew aggregations show
up.","sha":"bc5d8db237bdef481de9e4ce37d9e460755ae418"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204977","number":204977,"mergeCommit":{"message":"[Profiling]
Add colors for new frame types (process name, thread name, root)
(#204977)\n\n## Summary\r\nThis PR is a pre-requisite for adding
aggregation by process name and by\r\nthread name to the Universal
Profiling flamegraph view.\r\n\r\nIt adds three artificial node types to
the flamegraph including color\r\ncodes.\r\n\r\nAs a side-effect, the
root node now has its own color code. Previously,\r\nit (accidentally)
used the color code of \"unknown\" type frames.\r\n\r\nThe PR is
backwards compatible, so it doesn't change anything in the UI\r\nwhen
connecting with current Elasticsearch.\r\nAs soon as [the PR
for\r\nES](elastic/elasticsearch#119115) is
merged, the\r\nnew aggregations show
up.","sha":"bc5d8db237bdef481de9e4ce37d9e460755ae418"}}]}] BACKPORT-->

Co-authored-by: Tim Rühsen <[email protected]>

Author: cauemarcondes

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,
+  ProcessName = 0x101,
+  ThreadName = 0x102,
 }
 
 const frameTypeDescriptions = {
@@ -53,6 +58,9 @@ const frameTypeDescriptions = {
   [FrameType.DotNET]: '.NET',
   [FrameType.ErrorFlag]: 'ErrorFlag',
   [FrameType.Error]: 'Error',
+  [FrameType.Root]: 'Root',
+  [FrameType.ProcessName]: '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.ProcessName]: [ORANGE, ORANGE, ORANGE, ORANGE],
+  [FrameType.ThreadName]: [YELLOW, YELLOW, YELLOW, YELLOW],
 };
 
 export function frameTypeToRGB(frameType: FrameType, x: number): number {