Merge "[ui]: Make crticial path slices clickable" into main

google · Aug 27, 2023 · 08377bc · 08377bc
2 parents 49e44b0 + 51b77c0
commit 08377bc
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 10 deletions.
diff --git a/ui/src/frontend/thread_state_tab.ts b/ui/src/frontend/thread_state_tab.ts
@@ -230,6 +230,43 @@ export class ThreadStateTab extends BottomTab<ThreadStateTabConfig> {
       name,
     });
     const sliceColumns = {ts: 'ts', dur: 'dur', name: 'thread_name'};
+    const sliceSliceColumns = {ts: 'ts', dur: 'dur', name: 'slice_name'};
+    const sliceColumnNames = [
+      'ts',
+      'dur',
+      'id',
+      'utid',
+      'thread_name',
+      'process_name',
+      'height',
+      'table_name',
+    ];
+
+    const sliceColumnThreadStateNames = [
+      'ts',
+      'dur',
+      'id',
+      'utid',
+      'thread_name',
+      'process_name',
+      'state',
+      'blocked_function',
+      'height',
+      'table_name'
+    ];
+
+    const sliceColumnSliceNames = [
+      'ts',
+      'dur',
+      'id',
+      'utid',
+      'thread_name',
+      'process_name',
+      'slice_name',
+      'slice_depth',
+      'height',
+      'table_name',
+    ];
 
     const nameForNextOrPrev = (state: ThreadState) =>
         `${state.state} for ${Duration.humanise(state.dur)}`;
@@ -277,15 +314,54 @@ export class ThreadStateTab extends BottomTab<ThreadStateTabConfig> {
                   {
                     sqlSource:
                   `
-                     SELECT ts, dur, thread_name, process_name, height
+                   SELECT ts, dur, id, utid, thread_name, process_name, height,
+                   "thread_state" AS table_name
                      FROM experimental_thread_executing_span_critical_path(
                        NULL, ${this.state?.thread?.utid})
                   `,
-                  columns: ['ts', 'dur', 'thread_name', 'process_name', 'height'],
+                  columns: sliceColumnNames,
                   },
                `${this.state?.thread?.name}`,
                   sliceColumns,
-                  ['ts', 'dur', 'thread_name', 'process_name', 'height'])),
+                  sliceColumnNames)),
+      },
+      ), m(Button,
+           {
+          label: 'Critical path thread states',
+          onclick: () => runQuery(`SELECT IMPORT('experimental.thread_executing_span');`, this.engine)
+              .then(() => addDebugTrack(
+              this.engine,
+                  {
+                    sqlSource:
+                  `
+                   SELECT ts, dur, thread_state_id AS id, utid, thread_name, process_name, state, blocked_function, height,
+                   "thread_state" AS table_name
+                     FROM experimental_thread_executing_span_critical_path_thread_states(${this.state?.thread?.utid})
+                  `,
+                  columns: sliceColumnThreadStateNames,
+                  },
+               `${this.state?.thread?.name}`,
+                  sliceColumns,
+                  sliceColumnThreadStateNames)),
+      },
+      ), m(Button,
+           {
+          label: 'Critical path slices',
+          onclick: () => runQuery(`SELECT IMPORT('experimental.thread_executing_span');`, this.engine)
+              .then(() => addDebugTrack(
+              this.engine,
+                  {
+                    sqlSource:
+                  `
+                   SELECT ts, dur, slice_id AS id, utid, thread_name, process_name, slice_name, slice_depth, height,
+                   "slice" AS table_name
+                     FROM experimental_thread_executing_span_critical_path_slices(${this.state?.thread?.utid})
+                  `,
+                  columns: sliceColumnSliceNames,
+                  },
+               `${this.state?.thread?.name}`,
+                  sliceSliceColumns,
+                  sliceColumnSliceNames)),
       },
       )];
   }

diff --git a/ui/src/tracks/debug/details_tab.ts b/ui/src/tracks/debug/details_tab.ts
@@ -101,15 +101,16 @@ export class DebugSliceDetailsTab extends
   }
 
   private async maybeLoadThreadState(
-      id: number|undefined, ts: time, dur: duration,
+      id: number|undefined, ts: time, dur: duration, table: string|undefined,
       utid?: Utid): Promise<ThreadState|undefined> {
     if (id === undefined) return undefined;
     if (utid === undefined) return undefined;
 
     const threadState = await getThreadState(this.engine, id);
     if (threadState === undefined) return undefined;
-    if (threadState.ts === ts && threadState.dur === dur &&
-        threadState.thread?.utid === utid) {
+    if ((table === 'thread_state') ||
+        (threadState.ts === ts && threadState.dur === dur &&
+         threadState.thread?.utid === utid)) {
       return threadState;
     } else {
       return undefined;
@@ -132,15 +133,16 @@ export class DebugSliceDetailsTab extends
   }
 
   private async maybeLoadSlice(
-      id: number|undefined, ts: time, dur: duration,
+      id: number|undefined, ts: time, dur: duration, table: string|undefined,
       sqlTrackId?: number): Promise<SliceDetails|undefined> {
     if (id === undefined) return undefined;
-    if (sqlTrackId === undefined) return undefined;
+    if ((table !== 'slice') && sqlTrackId === undefined) return undefined;
 
     const slice = await getSlice(this.engine, asSliceSqlId(id));
     if (slice === undefined) return undefined;
-    if (slice.ts === ts && slice.dur === dur &&
-        slice.sqlTrackId === sqlTrackId) {
+    if ((table === 'slice') ||
+        (slice.ts === ts && slice.dur === dur &&
+         slice.sqlTrackId === sqlTrackId)) {
       return slice;
     } else {
       return undefined;
@@ -189,13 +191,15 @@ export class DebugSliceDetailsTab extends
         sqlValueToNumber(this.data.args['id']),
         this.data.ts,
         this.data.dur,
+        sqlValueToString(this.data.args['table_name']),
         sqlValueToUtid(this.data.args['utid']));
 
     this.slice = await this.maybeLoadSlice(
         sqlValueToNumber(this.data.args['id']) ??
             sqlValueToNumber(this.data.args['slice_id']),
         this.data.ts,
         this.data.dur,
+        sqlValueToString(this.data.args['table_name']),
         sqlValueToNumber(this.data.args['track_id']));
 
     raf.scheduleRedraw();