UI Renewal

cadio-web/src/main/webapp/src/App.js

@@ -14,17 +14,14 @@ 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 useCadio from "./pages/commons/hooks/useCadio";
-import {useCadioState} from "./pages/commons/context/cadioContext";
+import useCadio from "./commons/hooks/useCadio";
+import {useCadioState} from "./commons/context/cadioContext";
 import NodesHome from "./pages/cluster/components/nodes-home";
 import SystemView from "./pages/system/system-view";
-import TableRow from "./pages/cluster/components/keyspace/table/table-row";
-import TableInformation from "./pages/cluster/components/keyspace/table/table-information";
-import TableImport from "./pages/cluster/components/keyspace/table/table-import";
-import TableExport from "./pages/cluster/components/keyspace/table/table-export";
 import LoadingView from "./pages/loading-view";
 import SystemHome from "./pages/system/components/system-home";
 import SystemClusterManageHome from "./pages/system/components/cluster/system-cluster-manage-home";
+import CadioToast from "./components/cadio-toast";
 
 function App() {
     const {doBootstrap} = useCadio();
@@ -69,32 +66,20 @@ function App() {
                                element={<ClusterView><KeyspaceHome/></ClusterView>}></Route>
                         <Route path="/cluster/:clusterId/keyspace/:keyspaceName/table/:tableName"
                                element={
-                                   <ClusterView><TableHome
-                                       submenu={"HOME"}><TableInformation/></TableHome></ClusterView>}></Route>
-                        <Route path="/cluster/:clusterId/keyspace/:keyspaceName/table/:tableName/row"
-                               element={
-                                   <ClusterView><TableHome
-                                       submenu={"ROW"}><TableRow/></TableHome></ClusterView>}></Route>
-                        <Route path="/cluster/:clusterId/keyspace/:keyspaceName/table/:tableName/import"
-                               element={
-                                   <ClusterView><TableHome
-                                       submenu={"IMPORT"}><TableImport/></TableHome></ClusterView>}></Route>
-                        <Route path="/cluster/:clusterId/keyspace/:keyspaceName/table/:tableName/export"
-                               element={
-                                   <ClusterView><TableHome
-                                       submenu={"EXPORT"}><TableExport/></TableHome></ClusterView>}></Route>
+                                   <ClusterView><TableHome/></ClusterView>}></Route>
                         <Route path="/system"
                                element={<SystemView>
-                                    <SystemHome/>
+                                   <SystemHome/>
                                </SystemView>}></Route>
                         <Route path="/system/cluster"
                                element={<SystemView>
-                                    <SystemClusterManageHome/>
+                                   <SystemClusterManageHome/>
                                </SystemView>}></Route>
                         {/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */}
                         <Route path="*" element={<NotFound/>}></Route>
                     </Routes>
                 </LoadingView>
+                <CadioToast/>
             </BrowserRouter>
         </div>
     )

cadio-web/src/main/webapp/src/pages/commons/context/cadioContext.tsx → cadio-web/src/main/webapp/src/commons/context/cadioContext.tsx

@@ -3,12 +3,16 @@ import React, {createContext, Dispatch, useContext, useReducer} from "react";
 type CadioState = {
     bootstrapLoading: boolean,
     systemAvailable: boolean,
+    toasts?: any[],
 };
 
 type Action =
     | { type: "SET_BOOTSTRAP_LOADING"; bootstrapLoading: boolean; }
     | { type: "SET_SYSTEM_AVAILABLE"; systemAvailable: boolean; }
 
+    | { type: "SET_TOAST"; message: string, delay: number }
+    | { type: "REMOVE_TOAST_ITEM"; id: number }
+
 type CadioDispatch = Dispatch<Action>;
 
 const CadioStateContext = createContext<CadioState | null>(null);
@@ -18,6 +22,7 @@ export function CadioProvider({children}: { children: React.ReactNode }) {
     const [state, dispatch] = useReducer(reducer, {
         bootstrapLoading: false,
         systemAvailable: false,
+        toasts: undefined,
     });
 
     return (
@@ -41,6 +46,38 @@ function reducer(state: CadioState, action: Action): CadioState {
                 ...state,
                 systemAvailable: action.systemAvailable
             };
+        // case "SET_TOASTS":
+        //     return {
+        //         ...state,
+        //         toasts: action.toasts
+        //     };
+        case "SET_TOAST":
+            const arr = state.toasts ? [...state.toasts] : [];
+            arr.push({
+                id : new Date().getTime(),
+                message: action.message,
+                delay: action.delay,
+            });
+            return {
+                ...state,
+                toasts: arr
+            };
+        case "REMOVE_TOAST_ITEM":
+            const arr2 = state.toasts;
+            //ID 추가 해서 그거 지울 수 있게 해야함
+
+            if (!arr2) {
+                return {
+                    ...state,
+                };
+            }
+
+            return {
+                ...state,
+                //양이 많을 경우 누락됨.
+                toasts: arr2.filter(info => info.id !== action.id)
+            };
+
         default:
             throw new Error("Unhandled action");
     }

cadio-web/src/main/webapp/src/commons/hooks/useCadio.js

@@ -0,0 +1,93 @@
+import axios from "axios";
+import {useCadioDispatch} from "../context/cadioContext";
+
+
+export default function useCadio() {
+    const cadioDispatcher = useCadioDispatch();
+
+    function doBootstrap() {
+        cadioDispatcher({
+            type: "SET_BOOTSTRAP_LOADING",
+            bootstrapLoading: true,
+        })
+        axios({
+            method: "GET",
+            url: `/api/bootstrap`,
+            params: {}
+        }).then((response) => {
+            cadioDispatcher({
+                type: "SET_SYSTEM_AVAILABLE",
+                systemAvailable: response.data.result.systemAvailable,
+                //systemAvailable: false,
+            })
+
+        }).catch((error) => {
+            errorCatch(error);
+        }).finally(() => {
+            cadioDispatcher({
+                type: "SET_BOOTSTRAP_LOADING",
+                bootstrapLoading: false,
+            })
+        });
+    }
+
+    function openToast(message) {
+        if (!message) {
+            return;
+        }
+        cadioDispatcher({
+            type: "SET_TOAST",
+            message: message,
+            delay: 3000,
+        })
+    }
+
+    function errorCatch(error) {
+        if (axios.isAxiosError(error)) {
+            const {message} = error;
+            const {method, url} = error.config;
+            const {status, statusText} = error.response;
+
+            console.error(
+                `[API] ${method?.toUpperCase()} ${url} | Error ${status} ${statusText} | ${message}`
+            );
+
+            switch (status) {
+                case 400:
+                    alert(`${status} 잘못된 요청입니다.`);
+                    break;
+                case 401: {
+                    alert(`${status} 인증 실패입니다.`);
+                    break;
+                }
+                case 403: {
+                    alert(`${status} 권한이 없습니다.`);
+                    break;
+                }
+                case 404: {
+                    alert(`${status} 찾을 수 없는 페이지입니다.`);
+                    break;
+                }
+                case 500: {
+                    openToast(`${status} 서버 오류입니다.`);
+                    break;
+                }
+                default: {
+                    alert(`${status} 에러가 발생했습니다. ${error.message}`);
+                }
+            }
+        } else if (error instanceof Error && error.name === "TimeoutError") {
+            console.error(`[API] | TimeError ${error.toString()}`);
+            alert(`${0} 요청 시간이 초과되었습니다.`);
+        } else {
+            console.error(`[API] | Error ${error.toString()}`);
+            alert(`${0} 에러가 발생했습니다. ${error.toString()}`);
+        }
+    }
+
+    return {
+        doBootstrap,
+        openToast,
+        errorCatch,
+    }
+}

cadio-web/src/main/webapp/src/components/cadio-toast.js

@@ -0,0 +1,71 @@
+import {Toast, ToastContainer} from "react-bootstrap";
+import {useCadioDispatch, useCadioState} from "../commons/context/cadioContext";
+import {useEffect} from "react";
+import dayjs from "dayjs";
+
+export default function CadioToast(props) {
+    const cadioDispatcher = useCadioDispatch();
+    // const {
+    //     openToast
+    // } = useCadio();
+    const {
+        toasts,
+    } = useCadioState();
+
+    const removeToast = (id) => {
+        cadioDispatcher({
+            type: "REMOVE_TOAST_ITEM",
+            id: id
+        })
+    }
+
+    useEffect(() => {
+        //show component
+
+        return () => {
+            //hide component
+
+        };
+    }, []);
+
+    return (
+        <ToastContainer
+            className={"p-3"}
+            style={{ zIndex: 99999 }}
+            position={"top-end"}
+        >
+            {
+                toasts && toasts.map((toast, toastIndex) => {
+                    if (!toast) {
+                        return (<></>)
+                    }
+
+                    return (
+                        <Toast
+                            className={"text-bg-primary align-items-center "}
+                            key={toastIndex}
+                            autohide={true}
+                            delay={toast.delay || 3000}
+                            onClose={() => {
+                                removeToast(toast.id);
+                            }}
+                        >
+                            <div className="d-flex">
+
+                                {/*<Toast.Header>*/}
+                                {/*    <strong className="me-auto">Cadio</strong>*/}
+                                {/*    <small className="text-muted">test</small>*/}
+                                {/*</Toast.Header>*/}
+                                <Toast.Body>{toast.message || '내용이 비어 있습니다.'}</Toast.Body>
+                                <button type="button" className="btn-close btn-close-white me-2 m-auto"
+                                        data-bs-dismiss="toast" aria-label="Close" onClose={() => {
+                                    removeToast(toast.id);
+                                }}></button>
+                            </div>
+                        </Toast>
+                    )
+                })
+            }
+        </ToastContainer>
+    )
+}

cadio-web/src/main/webapp/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import {ClusterProvider} from "./pages/cluster/context/clusterContext";
-import {CadioProvider} from "./pages/commons/context/cadioContext";
+import {CadioProvider} from "./commons/context/cadioContext";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js

@@ -4,12 +4,12 @@ import {useEffect, useState} from "react";
 import axios from "axios";
 import Spinner from "../../../../components/spinner";
 import KeyspaceTableList from "./keyspace-table-list";
-import {axiosCatch} from "../../../../utils/axiosUtils";
+import useCadio from "../../../../commons/hooks/useCadio";
 
 const KeyspaceHome = () => {
 
     const routeParams = useParams();
-
+    const {errorCatch} = useCadio();
     //const {doGetKeyspaceList} = useCluster();
     const {
         keyspaceList,
@@ -47,7 +47,7 @@ const KeyspaceHome = () => {
             }
 
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             setDetailLoading(false)
         });

cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-table-list.js

@@ -21,17 +21,16 @@ const KeyspaceTableList = ({clusterId, keyspaceName, tableList}) => {
                 {tableList.map((info, infoIndex) => (
                     <li key={infoIndex} className="list-group-item d-flex justify-content-between align-items-start">
                         <div className="ms-2 me-auto">
-                            <div className="fw-bold">{info.table_name}</div>
+                            <div className="fw-bold" role={"button"}
+                               onClick={() => {
+                                   setTableName(info.table_name);
+                                   setShowDetail(true);
+                               }}>
+                                {info.table_name}
+                            </div>
                             {info.comment}
                         </div>
                         <div className={"btn-group btn-group-sm"}>
-                            <button className={"btn btn-sm btn-outline-primary"}
-                            onClick={() => {
-                                setTableName(info.table_name);
-                                setShowDetail(true);
-                            }}>
-                                Detail
-                            </button>
                             <Link
                                 className={"btn btn-sm btn-outline-primary"}
                                 to={`/cluster/${clusterId}/keyspace/${keyspaceName}/table/${info.table_name}`}>Rows</Link>

cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js

@@ -0,0 +1,37 @@
+import {useEffect} from "react";
+import {Modal} from "react-bootstrap";
+
+const TableDataManageModal = (props) => {
+
+    const show = props.show;
+    const handleClose = props.handleClose;
+
+    useEffect(() => {
+        //show component
+
+        return () => {
+            //hide component
+
+        };
+    }, []);
+
+    return (
+        <>
+            <Modal show={show} size={"xl"} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Table Data Manage(New or Modify)</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    데이터 신규 추가 및 수정
+                </Modal.Body>
+                <Modal.Footer>
+                    <button className={"btn btn-sm btn-outline-secondary"} onClick={handleClose}>
+                        Close
+                    </button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    )
+}
+
+export default TableDataManageModal;