From dd2a2a7976f0a402bfcc5db3f11638a99d220317 Mon Sep 17 00:00:00 2001 From: akageun Date: Mon, 22 Jul 2024 21:21:00 +0900 Subject: [PATCH] UI Refactoring (#57) --- cassdio-web/src/main/webapp/src/App.js | 11 +++-- cassdio-web/src/main/webapp/src/index.js | 4 +- .../webapp/src/pages/cluster/cluster-list.js | 21 +++++--- .../src/pages/cluster/cluster-main-view.js | 19 ++++--- .../src/pages/cluster/cluster-manage-modal.js | 22 +++++---- .../pages/cluster/components/cluster-home.js | 4 +- .../pages/cluster/components/data-row-item.js | 13 ++--- .../components/keyspace/keyspace-home.js | 6 +-- .../table-detail-modal-column-list.js | 2 +- .../detail-modal/table-detail-modal-info.js | 2 +- .../keyspace/table/table-data-manage-modal.js | 3 +- .../keyspace/table/table-detail-modal.js | 3 +- .../components/keyspace/table/table-home.js | 5 +- .../pages/cluster/components/nodes-home.js | 7 +-- .../pages/cluster/components/query-home.js | 13 +++-- .../cluster/components/query/query-editor.js | 6 +-- .../cluster/components/query/query-result.js | 2 +- .../src/pages/cluster/hooks/useCluster.js | 10 ++-- .../main/webapp/src/pages/home-main-view.js | 4 +- .../main/webapp/src/utils/cassdioHelper.js | 4 +- cassdio-web/src/main/webapp/tsconfig.json | 49 ++++++++++--------- 21 files changed, 116 insertions(+), 94 deletions(-) diff --git a/cassdio-web/src/main/webapp/src/App.js b/cassdio-web/src/main/webapp/src/App.js index da40d429..1b1ac830 100644 --- 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 index f4379c77..792d7399 100644 --- 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 index 1f3c1809..5898618e 100644 --- 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 = () => { - + {info.clusterId} - + {info.clusterName} @@ -128,7 +135,7 @@ const ClusterList = () => { ) }) : - No Data + No Data } 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 index 83c98461..ccf10bbe 100644 --- 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) => {
  • + to={`/cluster/${clusterId}`}> Cluster Home
  • + to={`/cluster/${clusterId}/nodes`}> Node List
  • + to={`/cluster/${clusterId}/query`}> Query Editor
    • {/*
  • */} {/* */} + {/* to={`/cluster/${clusterId}/metrics`}>*/} {/* Metrics*/} {/* */} {/*
    • */} @@ -78,7 +81,7 @@ const ClusterMainView = (props) => { return (
  • {info.keyspaceName} @@ -106,7 +109,7 @@ const ClusterMainView = (props) => { return (
  • {info.keyspaceName} 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 index 0ed4792b..58202cff 100644 --- 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) => { })} /> + Enable AuthCredentials + 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 index 4f8d7bd7..cc828d51 100644 --- 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 index deafabba..6ac6276b 100644 --- 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 index 4e81439f..5e35bd9a 100644 --- 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/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-column-list.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-column-list.js index 3b320210..85829799 100644 --- a/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-column-list.js +++ b/cassdio-web/src/main/webapp/src/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/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-info.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-info.js index ed14b91b..ad243a79 100644 --- a/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/detail-modal/table-detail-modal-info.js +++ b/cassdio-web/src/main/webapp/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/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js index b8ea59bb..c984850e 100644 --- a/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js +++ b/cassdio-web/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/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js index 2bed5b46..e60201dd 100644 --- a/cassdio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js +++ b/cassdio-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 index af53914b..423a7fce 100644 --- 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 index c614efa8..185de7f4 100644 --- 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 index 8f956e25..484cd420 100644 --- 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 }, []); diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js index 6e67eec5..607f6ef6 100644 --- a/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js +++ b/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js @@ -4,6 +4,7 @@ import AceEditor from "react-ace"; import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/src-noconflict/mode-sql"; import "ace-builds/src-noconflict/theme-sqlserver" + import {OverlayTrigger, Tooltip} from "react-bootstrap"; import {toast} from "react-toastify"; @@ -48,17 +49,16 @@ const QueryEditor = (props) => { }]; function onSelectionChange(value, event) { - const content = editorRef.current.editor.getSelectedText(); // use content setSelectedQuery(editorRef.current.editor.getSelectedText()); } function onLoad(newValue) { - console.log("load", newValue); + //console.log("load", newValue); } function onChange(newValue) { - console.log("change", newValue); + //console.log("change", newValue); setQuery(newValue) } diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-result.js b/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-result.js index 9047623b..91014d1b 100644 --- a/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-result.js +++ b/cassdio-web/src/main/webapp/src/pages/cluster/components/query/query-result.js @@ -3,7 +3,7 @@ import DataRowItem from "../data-row-item"; import {OverlayTrigger, Tooltip} from "react-bootstrap"; const QueryResult = (props) => { - const queryOptions = props.queryOptions; + //const queryOptions = props.queryOptions; const queryExecute = props.queryExecute; const result = props.result; diff --git a/cassdio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js b/cassdio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js index fc8ec210..ddcc0f5e 100644 --- a/cassdio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js +++ b/cassdio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js @@ -1,16 +1,16 @@ import axios from "axios"; -import {useClusterDispatch, useClusterState} from "../context/clusterContext"; import {useParams} from "react-router-dom"; -import useCassdio from "../../../commons/hooks/useCassdio"; + +import {useClusterDispatch} from "../context/clusterContext"; + +import useCassdio from "commons/hooks/useCassdio"; export default function useCluster() { const routeParams = useParams(); const {errorCatch} = useCassdio(); const clusterDispatcher = useClusterDispatch(); - const {} = useClusterState(); function doGetKeyspaceNames() { - //console.log("keyspace : ", routeParams.clusterId); clusterDispatcher({ type: "SET_KEYSPACE_NAMES_LOADING", loading: true, @@ -21,8 +21,6 @@ export default function useCluster() { url: `/api/cassandra/cluster/${routeParams.clusterId}/keyspace-name`, params: {} }).then((response) => { - console.log("doGetKeyspaceNames", response); - const userCreatedList = []; const systemCreatedList = []; diff --git a/cassdio-web/src/main/webapp/src/pages/home-main-view.js b/cassdio-web/src/main/webapp/src/pages/home-main-view.js index 599cd828..a3a848b9 100644 --- a/cassdio-web/src/main/webapp/src/pages/home-main-view.js +++ b/cassdio-web/src/main/webapp/src/pages/home-main-view.js @@ -1,6 +1,6 @@ -import {Link} from "react-router-dom"; import {useEffect} from "react"; -import CassdioSidebar from "../components/layout/cassdio-sidebar"; +import {Link} from "react-router-dom"; +import CassdioSidebar from "components/layout/cassdio-sidebar"; import ClusterList from "./cluster/cluster-list"; const HomeMainView = () => { diff --git a/cassdio-web/src/main/webapp/src/utils/cassdioHelper.js b/cassdio-web/src/main/webapp/src/utils/cassdioHelper.js index 1dfaff83..e40988ed 100644 --- a/cassdio-web/src/main/webapp/src/utils/cassdioHelper.js +++ b/cassdio-web/src/main/webapp/src/utils/cassdioHelper.js @@ -1,3 +1,5 @@ -export default { +const value = { CASSDIO_SIDEBAR_ID: "cassdioSidebar", } + +export default value; diff --git a/cassdio-web/src/main/webapp/tsconfig.json b/cassdio-web/src/main/webapp/tsconfig.json index a273b0cf..411c9187 100644 --- a/cassdio-web/src/main/webapp/tsconfig.json +++ b/cassdio-web/src/main/webapp/tsconfig.json @@ -1,26 +1,27 @@ { - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] + "compilerOptions": { + "baseUrl": "src", + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] }