[Profiling] Add colors for new frame types (process name, thread name…

…, root) (#204977)

## Summary
This PR is a pre-requisite for adding aggregation by process name and by
thread name to the Universal Profiling flamegraph view.

It adds three artificial node types to the flamegraph including color
codes.

As a side-effect, the root node now has its own color code. Previously,
it (accidentally) used the color code of "unknown" type frames.

The PR is backwards compatible, so it doesn't change anything in the UI
when connecting with current Elasticsearch.
As soon as [the PR for
ES](elastic/elasticsearch#119115) is merged, the
new aggregations show up.

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 {