Add query live plan flow to Preview Web UI

Author: koszti

core/trino-web-ui/src/main/resources/webapp-preview/package-lock.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/package.json

@@ -206,6 +206,42 @@ export interface Session {
     catalogProperties: { [key: string]: string | number | boolean }
 }
 
+export interface QueryStagePlan {
+    id: string
+    jsonRepresentation: string
+    root: {
+        id: string
+    }
+}
+
+export interface QueryStageStats {
+    completedDrivers: number
+    fullyBlocked: boolean
+    totalCpuTime: string
+    userMemoryReservation: string
+    queuedDrivers: number
+    runningDrivers: number
+    rawInputDataSize: string
+    rawInputPositions: number
+    bufferedDataSize: string
+    totalBlockedTime: 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
@@ -214,6 +250,7 @@ export interface QueryStatusInfo extends QueryInfoBase {
     retryPolicy: string
     pruned: boolean
     finalQueryInfo: boolean
+    stages: QueryStages
 }
 
 export async function statsApi(): Promise<ApiResponse<Stats>> {