Add query live plan flow page to Preview Web UI

core/trino-web-ui/src/main/resources/webapp-preview/package.json

@@ -16,12 +16,14 @@
     "check:clean": "npm clean-install && npm run lint && npm run prettier:check"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^1.1.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.2.5",
     "@mui/icons-material": "^6.4.7",
     "@mui/material": "^6.4.7",
     "@mui/x-charts": "^7.27.1",
+    "@xyflow/react": "^12.8.2",
     "axios": "^1.8.2",
     "lodash": "^4.17.21",
     "react": "^18.3.1",

core/trino-web-ui/src/main/resources/webapp-preview/src/api/webapp/api.ts

@@ -217,6 +217,46 @@ export interface QueryRoutine {
     authorization: string
 }
 
+export interface QueryStagePlan {
+    id: string
+    jsonRepresentation: string
+    root: {
+        id: string
+    }
+}
+
+export interface QueryStageStats {
+    completedDrivers: number
+    fullyBlocked: boolean
+    totalCpuTime: string
+    totalScheduledTime: string
+    userMemoryReservation: string
+    queuedDrivers: number
+    runningDrivers: number
+    blockedDrivers: number
+    runningTasks: number
+    completedTasks: number
+    totalTasks: number
+    processedInputDataSize: string
+    processedInputPositions: number
+    bufferedDataSize: string
+    outputDataSize: string
+    outputPositions: number
+}
+
+export interface QueryStage {
+    coordinatorOnly: boolean
+    plan: QueryStagePlan
+    stageId: string
+    state: string
+    stageStats: QueryStageStats
+}
+
+export interface QueryStages {
+    outputStageId: string
+    stages: QueryStage[]
+}
+
 export interface QueryStatusInfo extends QueryInfoBase {
     session: Session
     query: string
@@ -227,6 +267,7 @@ export interface QueryStatusInfo extends QueryInfoBase {
     finalQueryInfo: boolean
     referencedTables: QueryTable[]
     routines: QueryRoutine[]
+    stages: QueryStages
 }
 
 export async function statsApi(): Promise<ApiResponse<Stats>> {