[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](https://github.com/elastic/elasticsearch/pull/119115) is merged, the
new aggregations show up.
This commit is contained in:
Tim Rühsen 2025-01-08 10:24:43 +01:00 committed by GitHub
parent 7363f03d81
commit bc5d8db237
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 0 deletions

View file

@ -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 {

View file

@ -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 {