UI Refactoring (#57)

hakdang · Jul 22, 2024 · dd2a2a7 · dd2a2a7
1 parent 67aea30
commit dd2a2a7
Show file tree

Hide file tree

Showing 21 changed files with 116 additions and 94 deletions.
diff --git a/cassdio-web/src/main/webapp/src/App.js b/cassdio-web/src/main/webapp/src/App.js
@@ -1,3 +1,4 @@
+import {useEffect} from "react";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 import './App.css';
@@ -12,7 +13,7 @@ import ClusterHome from "./pages/cluster/components/cluster-home";
 import TableHome from "./pages/cluster/components/keyspace/table/table-home";
 import QueryHome from "./pages/cluster/components/query-home";
 import MetricsHome from "./pages/cluster/components/metrics-home";
-import {useEffect} from "react";
+
 import useCassdio from "./commons/hooks/useCassdio";
 import {useCassdioState} from "./commons/context/cassdioContext";
 import NodesHome from "./pages/cluster/components/nodes-home";
@@ -27,10 +28,10 @@ function App() {
 
         doBootstrap();
 
-        return () => {
-            //hide component
-
-        };
+        // return () => {
+        //     //hide component
+        //
+        // };
     }, []);
 
     return (

diff --git a/cassdio-web/src/main/webapp/src/index.js b/cassdio-web/src/main/webapp/src/index.js
@@ -6,8 +6,8 @@ import "bootstrap"
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.css'
 
-import {ClusterProvider} from "./pages/cluster/context/clusterContext";
-import {CassdioProvider} from "./commons/context/cassdioContext";
+import {ClusterProvider} from "pages/cluster/context/clusterContext";
+import {CassdioProvider} from "commons/context/cassdioContext";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/cluster-list.js b/cassdio-web/src/main/webapp/src/pages/cluster/cluster-list.js
@@ -1,10 +1,13 @@
-import Spinner from "../../components/spinner";
-import {Link} from "react-router-dom";
-import useCassdio from "../../commons/hooks/useCassdio";
 import {useEffect, useState} from "react";
+import {Link} from "react-router-dom";
+import {toast} from "react-toastify";
+
 import axios from "axios";
+
+import Spinner from "components/spinner";
+import useCassdio from "commons/hooks/useCassdio";
+
 import ClusterManageModal from "./cluster-manage-modal";
-import {toast} from "react-toastify";
 
 const ClusterList = () => {
 
@@ -113,12 +116,16 @@ const ClusterList = () => {
                                             </a>
                                         </td>
                                         <td className={"text-center"}>
-                                            <Link to={`/cluster/${info.clusterId}`}>
+                                            <Link
+                                                className={"text-decoration-none"}
+                                                to={`/cluster/${info.clusterId}`}>
                                                 {info.clusterId}
                                             </Link>
                                         </td>
                                         <td className={"text-center"}>
-                                            <Link to={`/cluster/${info.clusterId}`}>
+                                            <Link
+                                                className={"text-decoration-none"}
+                                                to={`/cluster/${info.clusterId}`}>
                                                 {info.clusterName}
                                             </Link>
                                         </td>
@@ -128,7 +135,7 @@ const ClusterList = () => {
                                     </tr>
                                 )
                             }) : <tr>
-                                <td className={"text-center"} scope="col" colSpan={6}>No Data</td>
+                                <td className={"text-center"} colSpan={6}>No Data</td>
                             </tr>
                         }
                         </tbody>

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/cluster-main-view.js b/cassdio-web/src/main/webapp/src/pages/cluster/cluster-main-view.js
@@ -1,12 +1,15 @@
-import {Link, useParams} from "react-router-dom";
 import {useEffect, useState} from "react";
+import {Link, useParams} from "react-router-dom";
+
 import useCluster from "./hooks/useCluster";
 import {useClusterState} from "./context/clusterContext";
-import CassdioSidebar from "../../components/layout/cassdio-sidebar";
+import CassdioSidebar from "components/layout/cassdio-sidebar";
 
 const ClusterMainView = (props) => {
     const routeParams = useParams();
 
+    const clusterId = useState(routeParams.clusterId);
+
     const {doGetKeyspaceNames} = useCluster();
     const {
         keyspaceGeneralNames,
@@ -34,28 +37,28 @@ const ClusterMainView = (props) => {
                         <li className="nav-item">
                             <Link
                                 className={`nav-link d-flex align-items-center gap-2 link-body-emphasis text-decoration-none`}
-                                to={`/cluster/${routeParams.clusterId}`}>
+                                to={`/cluster/${clusterId}`}>
                                 <i className="bi bi-house"></i> Cluster Home
                             </Link>
                         </li>
                         <li className="nav-item">
                             <Link
                                 className={`nav-link d-flex align-items-center gap-2 link-body-emphasis text-decoration-none`}
-                                to={`/cluster/${routeParams.clusterId}/nodes`}>
+                                to={`/cluster/${clusterId}/nodes`}>
                                 <i className="bi bi-server"></i> Node List
                             </Link>
                         </li>
                         <li className="nav-item">
                             <Link
                                 className={`nav-link d-flex align-items-center gap-2 link-body-emphasis text-decoration-none`}
-                                to={`/cluster/${routeParams.clusterId}/query`}>
+                                to={`/cluster/${clusterId}/query`}>
                                 <i className="bi bi-journal-code"></i> Query Editor
                             </Link>
                         </li>
                         {/*<li className="nav-item">*/}
                         {/*    <Link*/}
                         {/*        className={`nav-link d-flex align-items-center gap-2 link-body-emphasis text-decoration-none`}*/}
-                        {/*        to={`/cluster/${routeParams.clusterId}/metrics`}>*/}
+                        {/*        to={`/cluster/${clusterId}/metrics`}>*/}
                         {/*        <i className="bi bi-laptop"></i> Metrics*/}
                         {/*    </Link>*/}
                         {/*</li>*/}
@@ -78,7 +81,7 @@ const ClusterMainView = (props) => {
                                     return (
                                         <li className="nav-item" key={`sidebarKeyspace${infoIndex}`}>
                                             <Link
-                                                to={`/cluster/${routeParams.clusterId}/keyspace/${info.keyspaceName}`}
+                                                to={`/cluster/${clusterId}/keyspace/${info.keyspaceName}`}
                                                 className={`nav-link d-flex align-items-center link-body-emphasis text-decoration-none gap-2`}>
                                                 <i className="bi bi-database"></i> {info.keyspaceName}
                                             </Link>
@@ -106,7 +109,7 @@ const ClusterMainView = (props) => {
                                     return (
                                         <li className="nav-item" key={`sidebarKeyspace${infoIndex}`}>
                                             <Link
-                                                to={`/cluster/${routeParams.clusterId}/keyspace/${info.keyspaceName}`}
+                                                to={`/cluster/${clusterId}/keyspace/${info.keyspaceName}`}
                                                 className={`nav-link d-flex align-items-center link-body-emphasis text-decoration-none gap-2`}>
                                                 <i className="bi bi-database"></i> {info.keyspaceName}
                                             </Link>

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/cluster-manage-modal.js b/cassdio-web/src/main/webapp/src/pages/cluster/cluster-manage-modal.js
@@ -1,10 +1,13 @@
-import {Modal} from "react-bootstrap";
 import {useEffect, useState} from "react";
-import axios from "axios";
-import useCassdio from "../../commons/hooks/useCassdio";
-import Spinner from "../../components/spinner";
+
+import {Modal} from "react-bootstrap";
+
 import {toast} from "react-toastify";
 
+import axios from "axios";
+import useCassdio from "commons/hooks/useCassdio";
+import Spinner from "components/spinner";
+
 const ClusterManageModal = (props) => {
     const {errorCatch} = useCassdio();
 
@@ -17,9 +20,9 @@ const ClusterManageModal = (props) => {
     const [clusterInfo, setClusterInfo] = useState(
         {
             clusterId: null,
-            contactPoints: "127.0.0.1",
-            port: 29042,
-            localDatacenter: "dc1",
+            contactPoints: "",
+            port: 9042,
+            localDatacenter: "",
             clusterAuthCredentials: false,
             username: "",
             password: "",
@@ -116,7 +119,6 @@ const ClusterManageModal = (props) => {
             getCluster();
         }
 
-
         return () => {
             //hide component
         };
@@ -173,8 +175,8 @@ const ClusterManageModal = (props) => {
                                        })}
                                 />
                                 <label className="form-check-label" htmlFor="clusterAuthCredentials">
-                                    Enable
-                                    AuthCredentials</label>
+                                    Enable AuthCredentials
+                                </label>
                             </div>
                         </div>
 

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/cluster-home.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/cluster-home.js
@@ -1,8 +1,8 @@
 import {Link, useParams} from "react-router-dom";
 import {useEffect, useState} from "react";
 import axios from "axios";
-import useCassdio from "../../../commons/hooks/useCassdio";
-import Spinner from "../../../components/spinner";
+import useCassdio from "commons/hooks/useCassdio";
+import Spinner from "components/spinner";
 
 const ClusterHome = () => {
     const {errorCatch} = useCassdio();

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/data-row-item.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/data-row-item.js
@@ -1,5 +1,6 @@
 import {useEffect, useState} from "react";
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
+import {toast} from "react-toastify";
 
 export default function DataRowItem(props) {
     const data = props.data;
@@ -21,18 +22,18 @@ export default function DataRowItem(props) {
         try {
             await navigator.clipboard.writeText(data);
         } catch (e) {
-            alert('복사에 실패하였습니다');
+            toast.error('복사에 실패하였습니다');
         }
     };
 
     useEffect(() => {
         //show component
 
-        if (isJson(data)) {
-            console.log("JSON Viewer : ", typeof data, data)
-        } else {
-            console.log("Default Viewer : ", typeof data, data)
-        }
+        // if (isJson(data)) {
+        //     console.log("JSON Viewer : ", typeof data, data)
+        // } else {
+        //     console.log("Default Viewer : ", typeof data, data)
+        // }
 
         if (data && typeof data === 'string' && data.length >= 25) {
             setRenderData(data.substring(0, 24) + "...")

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js
@@ -1,10 +1,10 @@
 import {Link, useParams} from "react-router-dom";
 import {useEffect, useState} from "react";
 import axios from "axios";
-import Spinner from "../../../../components/spinner";
+import Spinner from "components/spinner";
 import KeyspaceTableList from "./keyspace-table-list";
-import useCassdio from "../../../../commons/hooks/useCassdio";
-import {CassdioUtils} from "../../../../utils/cassdioUtils";
+import useCassdio from "commons/hooks/useCassdio";
+import {CassdioUtils} from "utils/cassdioUtils";
 
 const KeyspaceHome = () => {
 

diff --git a/...rc/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-column-list.js b/...rc/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-column-list.js
@@ -1,4 +1,4 @@
-import {CassdioUtils} from "../../../../../../utils/cassdioUtils";
+import {CassdioUtils} from "utils/cassdioUtils";
 
 const TableDetailModalColumnList = (props) => {
     const columnList = props.columnList;

diff --git a/...ebapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-info.js b/...ebapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-info.js
@@ -1,4 +1,4 @@
-import {CassdioUtils} from "../../../../../../utils/cassdioUtils";
+import {CassdioUtils} from "utils/cassdioUtils";
 
 const TableDetailModalInfo = (props) => {
 

diff --git a/...eb/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js b/...eb/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js
@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 import {Modal} from "react-bootstrap";
-import useCassdio from "../../../../../commons/hooks/useCassdio";
+import useCassdio from "commons/hooks/useCassdio";
 import axios from "axios";
 
 const TableDataManageModal = (props) => {
@@ -122,6 +122,7 @@ const TableDataManageModal = (props) => {
             //hide component
 
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (

diff --git a/...dio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js b/...dio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js
@@ -1,7 +1,7 @@
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {Modal} from "react-bootstrap";
-import useCassdio from "../../../../../commons/hooks/useCassdio";
+import useCassdio from "commons/hooks/useCassdio";
 import TableDetailModalInfo from "./detail-modal/table-detail-modal-info";
 import TableDetailModalDescribe from "./detail-modal/table-detail-modal-describe";
 import TableDetailModalColumnList from "./detail-modal/table-detail-modal-column-list";
@@ -59,6 +59,7 @@ const TableDetailModal = (props) => {
             //hide component
 
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tableName]);
 
     return (

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js
@@ -5,10 +5,10 @@ import axios from "axios";
 import TableDataManageModal from "./table-data-manage-modal";
 import TableExportModal from "./table-export-modal";
 import TableImportModal from "./table-import-modal";
-import useCassdio from "../../../../../commons/hooks/useCassdio";
+import useCassdio from "commons/hooks/useCassdio";
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
-import DataRowItem from "../../data-row-item";
 import {toast} from "react-toastify";
+import DataRowItem from "../../data-row-item";
 
 const TableHome = (props) => {
     const routeParams = useParams();
@@ -69,6 +69,7 @@ const TableHome = (props) => {
             //hide component
             setTableName('');
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tableName]);
 
     return (

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js
@@ -1,9 +1,9 @@
 import {useParams} from "react-router-dom";
 import {useEffect, useState} from "react";
 import axios from "axios";
-import {DateUtils} from "../../../utils/timeUtils";
-import Spinner from "../../../components/spinner";
-import useCassdio from "../../../commons/hooks/useCassdio";
+import {DateUtils} from "utils/timeUtils";
+import Spinner from "components/spinner";
+import useCassdio from "commons/hooks/useCassdio";
 
 const NodesHome = () => {
 
@@ -23,6 +23,7 @@ const NodesHome = () => {
             //hide component
 
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [routeParams.clusterId, routeParams.keyspaceName]);
 
     const nodesByDcAndRack = nodeList.reduce((acc, node) => {

diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/query-home.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/query-home.js
@@ -1,9 +1,12 @@
-import QueryEditor from "./query/query-editor";
-import axios from "axios";
 import {useEffect, useState} from "react";
 import {useParams} from "react-router-dom";
+
+import axios from "axios";
+
+import QueryEditor from "./query/query-editor";
 import QueryResult from "./query/query-result";
-import useCassdio from "../../../commons/hooks/useCassdio";
+import useCassdio from "commons/hooks/useCassdio";
+import {toast} from "react-toastify";
 
 const QueryHome = () => {
     const routeParams = useParams();
@@ -32,7 +35,7 @@ const QueryHome = () => {
 
     const queryExecute = (query, cursor, setLoading) => {
         if (!query) {
-            alert("쿼리를 입력해 주세요.")
+            toast.warn("쿼리를 입력해 주세요.")
             return;
         }
 
@@ -57,7 +60,6 @@ const QueryHome = () => {
                 cursor: cursor,
             },
         }).then((response) => {
-            console.log("response query execute ", response.data.result.nextCursor)
             setQueryParam({
                 query: query,
                 nextCursor: response.data.result.nextCursor
@@ -83,6 +85,7 @@ const QueryHome = () => {
             //hide component
 
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);