feat(dev): Show in-progress queries in query debug modal (#21160)

* feat(dev): Show in-progress queries in query debug modal

* Remove needless block

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

ee/api/debug_ch_queries.py

@@ -15,7 +15,7 @@
 
 class DebugCHQueries(viewsets.ViewSet):
     """
-    Show recent queries for this user
+    List recent CH queries initiated by this user.
     """
 
     def _get_path(self, query: str) -> Optional[str]:
@@ -30,16 +30,21 @@ def list(self, request):
 
         response = sync_execute(
             """
-            select
-                query, query_start_time, exception, toInt8(type), query_duration_ms
-            from clusterAllReplicas(%(cluster)s, system, query_log)
-            where
-                query LIKE %(query)s and
-                query_start_time > %(start_time)s and
-                type != 1 and
-                query not like %(not_query)s
-            order by query_start_time desc
-            limit 100""",
+            SELECT
+                query_id, argMax(query, type), argMax(query_start_time, type), argMax(exception, type),
+                argMax(query_duration_ms, type), max(type) AS status
+            FROM (
+                SELECT
+                    query_id, query, query_start_time, exception, query_duration_ms, toInt8(type) AS type
+                FROM clusterAllReplicas(%(cluster)s, system, query_log)
+                WHERE
+                    query LIKE %(query)s AND
+                    query NOT LIKE %(not_query)s AND
+                    query_start_time > %(start_time)s
+                ORDER BY query_start_time desc
+                LIMIT 100
+            )
+            GROUP BY query_id""",
             {
                 "query": f"/* user_id:{request.user.pk} %",
                 "start_time": (now() - relativedelta(minutes=10)).timestamp(),
@@ -50,12 +55,13 @@ def list(self, request):
         return Response(
             [
                 {
-                    "query": resp[0],
-                    "timestamp": resp[1],
-                    "exception": resp[2],
-                    "type": resp[3],
+                    "query_id": resp[0],
+                    "query": resp[1],
+                    "timestamp": resp[2],
+                    "exception": resp[3],
                     "execution_time": resp[4],
-                    "path": self._get_path(resp[0]),
+                    "status": resp[5],
+                    "path": self._get_path(resp[1]),
                 }
                 for resp in response
             ]

frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx

@@ -25,7 +25,11 @@ export interface Query {
     timestamp: string
     query: string
     exception: string
-    type: number
+    /**
+     * 1 means running, 2 means finished, 3 means errored before execution, 4 means errored during execution.
+     *
+     * @see `type` column in https://clickhouse.com/docs/en/operations/system-tables/query_log */
+    status: 1 | 2 | 3 | 4
     execution_time: number
     path: string
 }
@@ -146,9 +150,13 @@ function DebugCHQueries(): JSX.Element {
                             )
                         },
                     },
+
                     {
                         title: 'Duration',
                         render: function exec(_, item) {
+                            if (item.status === 1) {
+                                return 'In progress…'
+                            }
                             return <>{Math.round((item.execution_time + Number.EPSILON) * 100) / 100} ms</>
                         },
                         align: 'right',