From da57178c9802c8bdf8077e8b6774b2ec37228e76 Mon Sep 17 00:00:00 2001
From: James Greenhill <fuziontech@gmail.com>
Date: Tue, 15 Aug 2023 14:24:26 -0700
Subject: [PATCH] Fancy clusters page (#21)

---
 frontend/src/pages/Clusters/Clusters.tsx | 47 ++++++++++++++++++++----
 housewatch/clickhouse/clusters.py        | 12 +++++-
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/Clusters/Clusters.tsx b/frontend/src/pages/Clusters/Clusters.tsx
index 580b27f..502df0a 100644
--- a/frontend/src/pages/Clusters/Clusters.tsx
+++ b/frontend/src/pages/Clusters/Clusters.tsx
@@ -1,10 +1,26 @@
 import React, { useEffect, useState } from 'react'
-import { Line } from '@ant-design/charts'
-import { Card, Col, Row, Tooltip, notification } from 'antd'
-import { InfoCircleOutlined } from '@ant-design/icons'
+import { ColumnType } from 'antd/es/table'
+import { Table, Col, Row, Tooltip, notification } from 'antd'
+
+interface ClusterNode {
+    cluster: string
+    shard_num: number
+    shard_weight: number
+    replica_num: number
+    host_name: string
+    host_address: string
+    port: number
+    is_local: boolean
+    user: string
+    default_database: string
+    errors_count: number
+    slowdowns_count: number
+    estimated_recovery_time: number
+}
 
 interface Cluster {
     cluster: string
+    nodes: ClusterNode[]
 }
 
 interface Clusters {
@@ -15,6 +31,7 @@ export default function Clusters() {
     const [clusters, setClusters] = useState<Clusters>({
         clusters: [],
     })
+    const [loadingClusters, setLoadingClusters] = useState(false)
 
     const loadData = async () => {
         try {
@@ -31,10 +48,21 @@ export default function Clusters() {
         loadData()
     }, [])
 
-    const now = new Date()
-    const dayOfTheYear = Math.floor(
-        (now.getTime() - new Date(now.getFullYear(), 0, 0).getTime()) / (1000 * 60 * 60 * 24)
-    )
+    const columns: ColumnType<ClusterNode>[] = [
+        { title: 'Cluster', dataIndex: 'cluster' },
+        { title: 'Shard Number', dataIndex: 'shard_num' },
+        { title: 'Shard Weight', dataIndex: 'shard_weight' },
+        { title: 'Replica Number', dataIndex: 'replica_num' },
+        { title: 'Host Name', dataIndex: 'host_name' },
+        { title: 'Host Address', dataIndex: 'host_address' },
+        { title: 'Port', dataIndex: 'port' },
+        { title: 'Is Local', dataIndex: 'is_local' },
+        { title: 'User', dataIndex: 'user' },
+        { title: 'Default Database', dataIndex: 'default_database' },
+        { title: 'Errors Count', dataIndex: 'errors_count' },
+        { title: 'Slowdowns Count', dataIndex: 'slowdowns_count' },
+        { title: 'Recovery Time', dataIndex: 'estimated_recovery_time' },
+    ]
 
     return (
         <div>
@@ -43,7 +71,10 @@ export default function Clusters() {
             <Row gutter={8} style={{ paddingBottom: 8 }}>
                 <ul>
                     {clusters.clusters.map((cluster) => (
-                        <li key={cluster.cluster}>{cluster.cluster}</li>
+                        <>
+                            <h1 key={cluster.cluster}>{cluster.cluster}</h1>
+                            <Table columns={columns} dataSource={cluster.nodes} loading={loadingClusters} />
+                        </>
                     ))}
                 </ul>
             </Row>
diff --git a/housewatch/clickhouse/clusters.py b/housewatch/clickhouse/clusters.py
index a044c09..ca082c4 100644
--- a/housewatch/clickhouse/clusters.py
+++ b/housewatch/clickhouse/clusters.py
@@ -1,9 +1,17 @@
+from collections import defaultdict
 from housewatch.clickhouse.client import run_query
 
 
 def get_clusters():
-    QUERY = """Select cluster FROM system.clusters GROUP BY cluster"""
-    return run_query(QUERY)
+    QUERY = """Select * FROM system.clusters"""
+    res = run_query(QUERY)
+    clusters = defaultdict(list)
+    for c_node in res:
+        clusters[c_node["cluster"]].append(c_node)
+    accumulator = []
+    for cluster, nodes in clusters.items():
+        accumulator.append({"cluster": cluster, "nodes": nodes})
+    return accumulator
 
 
 def get_cluster(cluster):