From e9aa651bfc746f77f513d300b7fdf596d97dedca Mon Sep 17 00:00:00 2001 From: akageun Date: Sat, 6 Jul 2024 23:27:39 +0900 Subject: [PATCH] =?UTF-8?q?renewal=203=EC=B0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - toast 적용 - table page 수정 --- .../main/webapp/src/commons/hooks/useCadio.js | 51 +++++++++++++-- .../components/keyspace/keyspace-home.js | 6 +- .../keyspace/table/table-detail-modal.js | 7 +- .../components/keyspace/table/table-home.js | 6 +- .../pages/cluster/components/nodes-home.js | 5 +- .../pages/cluster/components/query-home.js | 16 ++++- .../cluster/components/query/query-editor.js | 65 ++++++++++++------- .../src/pages/cluster/hooks/useCluster.js | 8 +-- .../src/main/webapp/src/pages/home-view.js | 4 +- .../main/webapp/src/pages/initialize-view.js | 4 +- .../src/main/webapp/src/utils/axiosUtils.ts | 44 +------------ 11 files changed, 124 insertions(+), 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 index aab5e2db..3aade76b 100644 --- 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 index 0c04e69f..c4b658af 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 @@ -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 index 54d7b1e3..a42105dc 100644 --- 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 index c449203b..cd8e68e3 100644 --- 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 index d8291013..bb23d7fe 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,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 index cadbda2a..1f65e8e2 100644 --- 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,11 +3,13 @@ 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: "", @@ -15,6 +17,11 @@ const QueryHome = () => { } ); + 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 = () => { { 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) => {
- { + setQueryOptions(t => { + return {...t, limit: parseInt(e.target.value)} + }) + } + } value={queryOptions.limit || "10"}> + + + - +
-
- - -
+ {/*
*/} + {/* */} + {/* */} + {/*
*/}
-
- - -
+ {/*
*/} + {/* */} + {/* */} + {/*
*/}
-
+
-
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 index 78fb17cf..5f82372e 100644 --- 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 index 96f7b1b7..603e0c0b 100644 --- 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) }); diff --git a/cadio-web/src/main/webapp/src/pages/initialize-view.js b/cadio-web/src/main/webapp/src/pages/initialize-view.js index 4d7f39a2..91856108 100644 --- a/cadio-web/src/main/webapp/src/pages/initialize-view.js +++ b/cadio-web/src/main/webapp/src/pages/initialize-view.js @@ -3,7 +3,7 @@ import axios from "axios"; import useCadio from "../commons/hooks/useCadio"; const InitializeView = (props) => { - const {doBootstrap} = useCadio(); + const {doBootstrap, errorCatch} = useCadio(); const [clusterInfo, setClusterInfo] = useState( { @@ -70,7 +70,7 @@ const InitializeView = (props) => { alert("등록되었습니다."); doBootstrap(); }).catch((error) => { - + errorCatch(error); }).finally(() => { setSaveLoading(false); }) diff --git a/cadio-web/src/main/webapp/src/utils/axiosUtils.ts b/cadio-web/src/main/webapp/src/utils/axiosUtils.ts index 0f9c91fd..5b99d9fd 100644 --- a/cadio-web/src/main/webapp/src/utils/axiosUtils.ts +++ b/cadio-web/src/main/webapp/src/utils/axiosUtils.ts @@ -1,46 +1,8 @@ -import axios, {AxiosRequestConfig, AxiosResponse} from "axios"; +export function useAxios() { -export function axiosCatch(error: any) { - console.log(error); + // const {openToast} = useCadio(); - if (axios.isAxiosError(error)) { - const {message} = error; - const {method, url} = error.config as AxiosRequestConfig; - const {status, statusText} = error.response as AxiosResponse; - 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: { - alert(`${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 { } }