From 7dd1aa2b6e1d0f7c4f2a78e15eab0da1ddb5346b Mon Sep 17 00:00:00 2001
From: Seungho Kang <will.seungho@gmail.com>
Date: Thu, 4 Jul 2024 23:15:19 +0900
Subject: [PATCH] =?UTF-8?q?Node=20List=20Refresh=20=EC=B6=94=EA=B0=80=20(#?=
 =?UTF-8?q?24)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/keyspace/keyspace-home.js      |  4 +-
 .../pages/cluster/components/nodes-home.js    | 60 ++++++++++---------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js
index 16d22e7d..ead71d73 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js
@@ -37,7 +37,7 @@ const KeyspaceHome = () => {
             console.log("res ", response);
             setDescribe(response.data.describe)
         }).catch((error) => {
-            //TODO : error catch
+            console.error(error)
         }).finally(() => {
             setDetailLoading(false)
         });
@@ -56,8 +56,6 @@ const KeyspaceHome = () => {
                 setTableCursor(response.data.result.cursor.next)
             }
         }).catch((error) => {
-            console.log(error)
-            //TODO : error catch
             axiosCatch(error)
         }).finally(() => {
             setTableLoading(false)
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js
index f603ad17..d8291013 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js
@@ -3,6 +3,7 @@ import {useEffect, useState} from "react";
 import axios from "axios";
 import {DateUtils} from "../../../utils/timeUtils";
 import Spinner from "../../../components/spinner";
+import {axiosCatch} from "../../../utils/axiosUtils";
 
 const NodesHome = () => {
 
@@ -16,24 +17,7 @@ const NodesHome = () => {
     useEffect(() => {
         //show component
         setNodeList([])
-
-        setNodeLoading(true)
-        axios({
-            method: "GET",
-            url: `/api/cassandra/cluster/${routeParams.clusterId}/node`,
-        }).then((response) => {
-            console.log("res ", response);
-            const nodes = response.data.result.items
-            setNodeList(nodes)
-            setTotalNodeSize(nodes.length)
-            setAvailableNodeSize(nodes.filter(node => node.nodeState === 'UP').length)
-        }).catch((error) => {
-            console.log(error)
-            //TODO : error catch
-        }).finally(() => {
-            setNodeLoading(false)
-        });
-
+        getNodes(routeParams.clusterId)
         return () => {
             //hide component
 
@@ -41,7 +25,7 @@ const NodesHome = () => {
     }, [routeParams.clusterId, routeParams.keyspaceName]);
 
     const nodesByDcAndRack = nodeList.reduce((acc, node) => {
-        const { datacenter, rack } = node;
+        const {datacenter, rack} = node;
         if (!acc[datacenter]) {
             acc[datacenter] = {};
         }
@@ -52,11 +36,34 @@ const NodesHome = () => {
         return acc;
     }, {});
 
+    function getNodes(clusterId) {
+        setNodeLoading(true)
+
+        axios({
+            method: "GET",
+            url: `/api/cassandra/cluster/${clusterId}/node`,
+        }).then((response) => {
+            const nodes = response.data.result.items
+            setNodeList(nodes)
+            setTotalNodeSize(nodes.length)
+            setAvailableNodeSize(nodes.filter(node => node.nodeState === 'UP').length)
+        }).catch((error) => {
+            axiosCatch(error)
+        }).finally(() => {
+            setNodeLoading(false)
+        });
+    }
+
     return (
         <>
             <div
                 className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                 <h2 className="h2">Node List</h2>
+                <div className="btn-group me-2">
+                    <button type="button" className="btn btn-sm btn-outline-secondary"
+                            onClick={() => getNodes(routeParams.clusterId)}>Refresh
+                    </button>
+                </div>
             </div>
 
             <div
@@ -75,23 +82,20 @@ const NodesHome = () => {
                                     <table className="table table-striped table-sm">
                                         <thead>
                                         <tr>
-                                            <th className="text-center" scope="col">ID</th>
+                                            <th className="text-center" scope="col">Node ID</th>
                                             <th className="text-center" scope="col">Node State</th>
-                                            <th className="text-center" scope="col">Host IP</th>
-                                            <th className="text-center" scope="col">DC</th>
-                                            <th className="text-center" scope="col">Rack</th>
+                                            <th className="text-center" scope="col">Host</th>
                                             <th className="text-center" scope="col">Cassandra Version</th>
-                                            <th className="text-center" scope="col">Up-Time</th>
+                                            <th className="text-center" scope="col">UpTime</th>
                                         </tr>
                                         </thead>
                                         <tbody>
                                         {nodesByDcAndRack[datacenter][rack].map((node) => (
-                                            <tr key={node.nodeId} className={node.nodeState !== 'UP' ? 'table-danger' : ''}>
+                                            <tr key={node.nodeId}
+                                                className={node.nodeState !== 'UP' ? 'table-danger' : ''}>
                                                 <td className="text-center">{node.nodeId}</td>
                                                 <td className="text-center">{node.nodeState}</td>
-                                                <td className="text-center">{node.hostIp}</td>
-                                                <td className="text-center">{node.datacenter}</td>
-                                                <td className="text-center">{node.rack}</td>
+                                                <td className="text-center">{node.hostIp.replace('/', '')}</td>
                                                 <td className="text-center">{node.cassandraVersion}</td>
                                                 <td className="text-center">{DateUtils.yyyyMMDDHHmmss(node.upSinceMillis)}</td>
                                             </tr>