From 3feb3b2e778b5c41526d829f22a9001755fd776e Mon Sep 17 00:00:00 2001
From: Duyet Le <5009534+duyet@users.noreply.github.com>
Date: Sun, 3 Dec 2023 05:59:41 +0700
Subject: [PATCH] chore(frontend): better UX for running queries page (#59)

* chore(frontend): change the way render of reloading running queries

* chore: format reable row count for running queries table
---
 .../pages/RunningQueries/RunningQueries.tsx   | 20 ++++++++++++++-----
 housewatch/clickhouse/queries/sql.py          | 11 +++++++++-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/RunningQueries/RunningQueries.tsx b/frontend/src/pages/RunningQueries/RunningQueries.tsx
index ef42a3a..f60ae87 100644
--- a/frontend/src/pages/RunningQueries/RunningQueries.tsx
+++ b/frontend/src/pages/RunningQueries/RunningQueries.tsx
@@ -1,4 +1,4 @@
-import { Table, Button, notification, Typography } from 'antd'
+import { Table, Button, notification, Typography, Tooltip, Spin } from 'antd'
 import { usePollingEffect } from '../../utils/usePollingEffect'
 import React, { useState } from 'react'
 import { ColumnType } from 'antd/es/table'
@@ -8,8 +8,10 @@ const { Paragraph } = Typography
 interface RunningQueryData {
     query: string
     read_rows: number
+    read_rows_readable: string
     query_id: string
     total_rows_approx: number
+    total_rows_approx_readable: string
     elapsed: number
     memory_usage: string
 }
@@ -80,11 +82,16 @@ export default function RunningQueries() {
                 )
             },
         },
+        { title: 'User', dataIndex: 'user' },
         { title: 'Elapsed time', dataIndex: 'elapsed' },
         {
             title: 'Rows read',
             dataIndex: 'read_rows',
-            render: (_: any, item) => `~${item.read_rows}/${item.total_rows_approx}`,
+            render: (_: any, item) => (
+                <Tooltip title={`~${item.read_rows}/${item.total_rows_approx}`}>
+                    ~{item.read_rows_readable}/{item.total_rows_approx_readable}
+                </Tooltip>
+            ),
         },
         { title: 'Memory Usage', dataIndex: 'memory_usage' },
         {
@@ -95,7 +102,6 @@ export default function RunningQueries() {
 
     usePollingEffect(
         async () => {
-            setRunningQueries([])
             setLoadingRunningQueries(true)
             const res = await fetch('/api/analyze/running_queries')
             const resJson = await res.json()
@@ -108,9 +114,13 @@ export default function RunningQueries() {
 
     return (
         <>
-            <h1 style={{ textAlign: 'left' }}>Running queries</h1>
+            <h1 style={{ textAlign: 'left' }}>Running queries {loadingRunningQueries ? <Spin /> : null}</h1>
             <br />
-            <Table columns={columns} dataSource={runningQueries} loading={loadingRunningQueries} />
+            <Table
+                columns={columns}
+                dataSource={runningQueries}
+                loading={runningQueries.length == 0 && loadingRunningQueries}
+            />
         </>
     )
 }
diff --git a/housewatch/clickhouse/queries/sql.py b/housewatch/clickhouse/queries/sql.py
index 2f8052d..4e1f251 100644
--- a/housewatch/clickhouse/queries/sql.py
+++ b/housewatch/clickhouse/queries/sql.py
@@ -176,7 +176,16 @@
 """
 
 RUNNING_QUERIES_SQL = """
-SELECT query, elapsed, read_rows, total_rows_approx, formatReadableSize(memory_usage) AS memory_usage, query_id
+SELECT
+    query,
+    user,
+    elapsed,
+    read_rows,
+    formatReadableQuantity(read_rows) AS read_rows_readable,
+    total_rows_approx,
+    formatReadableQuantity(total_rows_approx) AS total_rows_approx_readable,
+    formatReadableSize(memory_usage) AS memory_usage,
+    query_id
 FROM system.processes
 WHERE Settings['log_comment'] != 'running_queries_lookup'
 ORDER BY elapsed DESC