renewal 3차

- toast 적용 - table page 수정
hakdang · Jul 6, 2024 · e9aa651 · e9aa651
1 parent 475f889
commit e9aa651
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 92 deletions.
diff --git a/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js b/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js
@@ -1,6 +1,5 @@
 import axios from "axios";
 import {useCadioDispatch} from "../context/cadioContext";
-import {axiosCatch} from "../../utils/axiosUtils";
 
 
 export default function useCadio() {
@@ -23,8 +22,7 @@ export default function useCadio() {
             })
 
         }).catch((error) => {
-            //TODO : error catch
-            axiosCatch(error);
+            errorCatch(error);
         }).finally(() => {
             cadioDispatcher({
                 type: "SET_BOOTSTRAP_LOADING",
@@ -34,7 +32,6 @@ export default function useCadio() {
     }
 
     function openToast(message) {
-        console.log("message : ", message)
         if (!message) {
             return;
         }
@@ -45,8 +42,52 @@ export default function useCadio() {
         })
     }
 
+    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
+        openToast,
+        errorCatch,
     }
 }
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
@@ -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)
         });

diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js b/cadio-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 {axiosCatch} from "../../../../../utils/axiosUtils";
 import {Modal} from "react-bootstrap";
+import useCadio from "../../../../../commons/hooks/useCadio";
 
 const TableDetailModal = (props) => {
 
@@ -11,7 +11,7 @@ const TableDetailModal = (props) => {
     const clusterId = props.clusterId;
     const keyspaceName = props.keyspaceName;
     const tableName = props.tableName;
-
+    const {errorCatch} = useCadio();
     const [tableLoading, setTableLoading] = useState(false);
     const [tableInfo, setTableInfo] = useState({
         table: {},
@@ -53,8 +53,7 @@ const TableDetailModal = (props) => {
             })
 
         }).catch((error) => {
-            console.log(error)
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             setTableLoading(false)
         });

diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js
@@ -2,10 +2,10 @@ import {Link, useParams} from "react-router-dom";
 import {useEffect, useState} from "react";
 import TableDetailModal from "./table-detail-modal";
 import axios from "axios";
-import {axiosCatch} from "../../../../../utils/axiosUtils";
 import TableDataManageModal from "./table-data-manage-modal";
 import TableExportModal from "./table-export-modal";
 import TableImportModal from "./table-import-modal";
+import useCadio from "../../../../../commons/hooks/useCadio";
 
 const TableHome = (props) => {
     const routeParams = useParams();
@@ -14,7 +14,7 @@ const TableHome = (props) => {
     const [showImport, setShowImport] = useState(false);
     const [showDataManage, setShowDataManage] = useState(false);
     const [tableName, setTableName] = useState('');
-
+    const {errorCatch} = useCadio();
     const initQueryResult = {
         wasApplied: null,
         rows: [],
@@ -53,7 +53,7 @@ const TableHome = (props) => {
                 columnNames: response.data.result.columnNames,
             })
         }).catch((error) => {
-            axiosCatch(error);
+            errorCatch(error);
         }).finally(() => {
             setQueryLoading(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
@@ -3,11 +3,12 @@ import {useEffect, useState} from "react";
 import axios from "axios";
 import {DateUtils} from "../../../utils/timeUtils";
 import Spinner from "../../../components/spinner";
-import {axiosCatch} from "../../../utils/axiosUtils";
+import useCadio from "../../../commons/hooks/useCadio";
 
 const NodesHome = () => {
 
     const routeParams = useParams();
+    const {errorCatch} = useCadio();
 
     const [nodeLoading, setNodeLoading] = useState(false);
     const [nodeList, setNodeList] = useState([]);
@@ -48,7 +49,7 @@ const NodesHome = () => {
             setTotalNodeSize(nodes.length)
             setAvailableNodeSize(nodes.filter(node => node.nodeState === 'UP').length)
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error);
         }).finally(() => {
             setNodeLoading(false)
         });

diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/query-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/query-home.js
@@ -3,18 +3,25 @@ import axios from "axios";
 import {useEffect, useState} from "react";
 import {useParams} from "react-router-dom";
 import QueryResult from "./query/query-result";
-import {axiosCatch} from "../../../utils/axiosUtils";
+import useCadio from "../../../commons/hooks/useCadio";
 
 const QueryHome = () => {
     const routeParams = useParams();
 
+    const {errorCatch} = useCadio();
+
     const [queryParam, setQueryParam] = useState(
         {
             query: "",
             nextCursor: "",
         }
     );
 
+    const [queryOptions, setQueryOptions] = useState({
+        limit: 10,
+        trace: false,
+    });
+
     const initQueryResult = {
         wasApplied: null,
         rows: [],
@@ -44,7 +51,8 @@ const QueryHome = () => {
             url: `/api/cassandra/cluster/${routeParams.clusterId}/query`,
             data: {
                 query: query,
-                pageSize: 50,
+                pageSize: queryOptions.limit,
+                trace: queryOptions.trace,
                 timeoutSeconds: 3,
                 cursor: cursor,
             },
@@ -61,7 +69,7 @@ const QueryHome = () => {
                 columnNames: response.data.result.columnNames,
             })
         }).catch((error) => {
-            axiosCatch(error);
+            errorCatch(error);
         }).finally(() => {
             setLoading(false);
         })
@@ -97,6 +105,8 @@ const QueryHome = () => {
 
             <QueryEditor
                 queryExecute={queryExecute}
+                queryOptions={queryOptions}
+                setQueryOptions={setQueryOptions}
             />
             <QueryResult
                 queryExecute={queryExecute}

diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js b/cadio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js
@@ -1,4 +1,4 @@
-import {useRef,useState} from "react";
+import {useRef, useState} from "react";
 
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
@@ -10,17 +10,30 @@ const QueryEditor = (props) => {
     const [queryLoading, setQueryLoading] = useState(false)
     const [query, setQuery] = useState("SELECT * FROM testdb.test_table_1;")
 
+    const queryOptions = props.queryOptions;
+    const setQueryOptions = props.setQueryOptions;
+
+    const [selectedQuery, setSelectedQuery] = useState('');
+
     const editorRef = useRef();
 
     const queryExecute = (cursor) => {
-        props.queryExecute(query, cursor, setQueryLoading);
+        if (selectedQuery) {
+            props.queryExecute(selectedQuery, cursor, setQueryLoading);
+        } else {
+            props.queryExecute(query, cursor, setQueryLoading);
+        }
+
+
     }
 
     function onSelectionChange(value, event) {
         const content = editorRef.current.editor.getSelectedText();
         console.log("content : ", content)
         // use content
+        setSelectedQuery(editorRef.current.editor.getSelectedText());
     }
+
     function onLoad(newValue) {
         console.log("load", newValue);
     }
@@ -84,39 +97,45 @@ const QueryEditor = (props) => {
                     <div className="row">
                         <div className="col">
                             <div className="form-floating">
-                                <select className="form-select form-select-sm" id="floatingSelect">
-                                    <option value="1">One</option>
-                                    <option value="2">Two</option>
-                                    <option value="3">Three</option>
+                                <select className="form-select form-select-sm" id="queryLimitSelect"
+                                        onChange={e => {
+                                            setQueryOptions(t => {
+                                                return {...t, limit: parseInt(e.target.value)}
+                                            })
+                                        }
+                                        } value={queryOptions.limit || "10"}>
+                                    <option value="10">10</option>
+                                    <option value="50">50</option>
+                                    <option value="100">100</option>
                                 </select>
-                                <label htmlFor="floatingSelect">Limit</label>
+                                <label htmlFor="queryLimitSelect">Limit</label>
                             </div>
                         </div>
                         <div className="col">
-                            <div className="form-floating">
-                                <select className="form-select form-select-sm" id="floatingSelect">
-                                    <option value="1">One</option>
-                                    <option value="2">Two</option>
-                                    <option value="3">Three</option>
-                                </select>
-                                <label htmlFor="floatingSelect">ConsistencyLevel</label>
-                            </div>
+                            {/*<div className="form-floating">*/}
+                            {/*    <select className="form-select form-select-sm" id="floatingSelect">*/}
+                            {/*        <option value="1">One</option>*/}
+                            {/*        <option value="2">Two</option>*/}
+                            {/*        <option value="3">Three</option>*/}
+                            {/*    </select>*/}
+                            {/*    <label htmlFor="floatingSelect">ConsistencyLevel</label>*/}
+                            {/*</div>*/}
                         </div>
                         <div className="col">
-                            <div className="form-floating mb-3">
-                                <input type="email" className="form-control form-control-sm" id="floatingInput"
-                                       placeholder="[email protected]"/>
-                                <label htmlFor="floatingInput">Query Timeout</label>
-                            </div>
+                            {/*<div className="form-floating mb-3">*/}
+                            {/*    <input type="number" className="form-control form-control-sm" id="floatingInput"*/}
+                            {/*           placeholder="[email protected]"/>*/}
+                            {/*    <label htmlFor="floatingInput">Query Timeout</label>*/}
+                            {/*</div>*/}
                         </div>
                     </div>
 
-                    <div className="row g-3">
+                    <div className="row g-3 mt-1">
                         <div className="col">
                             <div className="form-check form-switch">
                                 <input className="form-check-input" type="checkbox" role="switch"
-                                       id="flexSwitchCheckDefault"/>
-                                <label className="form-check-label" htmlFor="flexSwitchCheckDefault">
+                                       id="tracingOnSwitch"/>
+                                <label className="form-check-label" htmlFor="tracingOnSwitch">
                                     Tracing On
                                 </label>
                             </div>

diff --git a/cadio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js b/cadio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js
@@ -1,11 +1,11 @@
 import axios from "axios";
 import {useClusterDispatch, useClusterState} from "../context/clusterContext";
 import {useParams} from "react-router-dom";
-import {axiosCatch} from "../../../utils/axiosUtils";
+import {useAxios} from "../../../utils/axiosUtils";
 
 export default function useCluster() {
     const routeParams = useParams();
-
+    const {errorCatch} = useAxios();
     const clusterDispatcher = useClusterDispatch();
     const {} = useClusterState();
 
@@ -31,7 +31,7 @@ export default function useCluster() {
                 keyspaceNames: response.data.result.keyspaceNameMap.SYSTEM,
             })
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             clusterDispatcher({
                 type: "SET_KEYSPACE_NAMES_LOADING",
@@ -58,7 +58,7 @@ export default function useCluster() {
                 keyspaceList: response.data.result.keyspaceList,
             })
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             clusterDispatcher({
                 type: "SET_KEYSPACE_LIST_LOADING",

diff --git a/cadio-web/src/main/webapp/src/pages/home-view.js b/cadio-web/src/main/webapp/src/pages/home-view.js
@@ -6,7 +6,7 @@ import useCadio from "../commons/hooks/useCadio";
 
 const HomeView = () => {
 
-    const {openToast} = useCadio();
+    const {openToast, errorCatch} = useCadio();
 
     const [clustersLoading, setClustersLoading] = useState(false);
     const [clusters, setClusters] = useState([]);
@@ -25,7 +25,7 @@ const HomeView = () => {
         }).then((response) => {
             setClusters(response.data.result.clusters)
         }).catch((error) => {
-            //TODO : error catch
+            errorCatch(error)
         }).finally(() => {
             setClustersLoading(false)
         });