From bfca8768c4c003d305739d750f2cdc3812e34e94 Mon Sep 17 00:00:00 2001 From: akageun Date: Sat, 6 Jul 2024 16:52:51 +0900 Subject: [PATCH 1/3] =?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 수정 --- cadio-web/src/main/webapp/src/App.js | 29 +- .../commons/context/cadioContext.tsx | 37 +++ .../src/{pages => }/commons/hooks/useCadio.js | 19 +- .../main/webapp/src/components/cadio-toast.js | 62 ++++ cadio-web/src/main/webapp/src/index.js | 2 +- .../keyspace/keyspace-table-list.js | 15 +- .../keyspace/table/table-data-manage-modal.js | 37 +++ .../keyspace/table/table-detail-modal.js | 4 +- .../keyspace/table/table-export-modal.js | 37 +++ .../components/keyspace/table/table-export.js | 10 - .../components/keyspace/table/table-home.js | 278 +++++++++++++----- .../keyspace/table/table-import-modal.js | 37 +++ .../components/keyspace/table/table-import.js | 10 - .../keyspace/table/table-information.js | 79 ----- .../components/keyspace/table/table-row.js | 167 ----------- .../src/main/webapp/src/pages/home-view.js | 11 +- .../main/webapp/src/pages/initialize-view.js | 2 +- 17 files changed, 461 insertions(+), 375 deletions(-) rename cadio-web/src/main/webapp/src/{pages => }/commons/context/cadioContext.tsx (63%) rename cadio-web/src/main/webapp/src/{pages => }/commons/hooks/useCadio.js (74%) create mode 100644 cadio-web/src/main/webapp/src/components/cadio-toast.js create mode 100644 cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js create mode 100644 cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export-modal.js delete mode 100644 cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export.js create mode 100644 cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import-modal.js delete mode 100644 cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import.js delete mode 100644 cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-information.js delete mode 100644 cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-row.js diff --git a/cadio-web/src/main/webapp/src/App.js b/cadio-web/src/main/webapp/src/App.js index 1e122c5e..fa5413e0 100644 --- a/cadio-web/src/main/webapp/src/App.js +++ b/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={}> }> - }> - }> - }> + }> - + }> - + }> {/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */} }> + ) diff --git a/cadio-web/src/main/webapp/src/pages/commons/context/cadioContext.tsx b/cadio-web/src/main/webapp/src/commons/context/cadioContext.tsx similarity index 63% rename from cadio-web/src/main/webapp/src/pages/commons/context/cadioContext.tsx rename to cadio-web/src/main/webapp/src/commons/context/cadioContext.tsx index a63d757a..6872bc5b 100644 --- a/cadio-web/src/main/webapp/src/pages/commons/context/cadioContext.tsx +++ b/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"; toastIndex: number } + type CadioDispatch = Dispatch; const CadioStateContext = createContext(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({ + //TODO : 아이디 추가 + message: action.message, + delay: action.delay, + }); + return { + ...state, + toasts: arr + }; + case "REMOVE_TOAST_ITEM": + const arr2 = state.toasts; + //ID 추가 해서 그거 지울 수 있게 해야함 + + if (!arr2) { + return { + ...state, + }; + } + + arr2.splice(action.toastIndex, 1) + return { + ...state, + toasts: arr2 + }; + default: throw new Error("Unhandled action"); } diff --git a/cadio-web/src/main/webapp/src/pages/commons/hooks/useCadio.js b/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js similarity index 74% rename from cadio-web/src/main/webapp/src/pages/commons/hooks/useCadio.js rename to cadio-web/src/main/webapp/src/commons/hooks/useCadio.js index 52e0654a..33390a14 100644 --- a/cadio-web/src/main/webapp/src/pages/commons/hooks/useCadio.js +++ b/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js @@ -1,6 +1,6 @@ import axios from "axios"; import {useCadioDispatch, useCadioState} from "../context/cadioContext"; -import {axiosCatch} from "../../../utils/axiosUtils"; +import {axiosCatch} from "../../utils/axiosUtils"; export default function useCadio() { @@ -18,9 +18,7 @@ export default function useCadio() { axios({ method: "GET", url: `/api/bootstrap`, - params: { - - } + params: {} }).then((response) => { cadioDispatcher({ type: "SET_SYSTEM_AVAILABLE", @@ -39,7 +37,20 @@ export default function useCadio() { }); } + function openToast(message) { + console.log("message : ", message) + if (!message) { + return; + } + cadioDispatcher({ + type: "SET_TOAST", + message: message, + delay: 3000, + }) + } + return { doBootstrap, + openToast } } diff --git a/cadio-web/src/main/webapp/src/components/cadio-toast.js b/cadio-web/src/main/webapp/src/components/cadio-toast.js new file mode 100644 index 00000000..a46d5afe --- /dev/null +++ b/cadio-web/src/main/webapp/src/components/cadio-toast.js @@ -0,0 +1,62 @@ +import {Toast, ToastContainer} from "react-bootstrap"; +import useCadio from "../commons/hooks/useCadio"; +import {useCadioDispatch, useCadioState} from "../commons/context/cadioContext"; +import {useEffect} from "react"; + +export default function CadioToast(props) { + const cadioDispatcher = useCadioDispatch(); + const { + openToast + } = useCadio(); + const { + toasts, + } = useCadioState(); + + const setToast = (toastIndex) => { + cadioDispatcher({ + type: "REMOVE_TOAST_ITEM", + toastIndex : toastIndex + }) + } + + useEffect(() => { + //show component + + return () => { + //hide component + + }; + }, []); + + return ( + + { + toasts && toasts.map((toast, toastIndex) => { + if (!toast) { + return (<>) + } + + return ( + { + setToast(); + }} + > + + Bootstrap + just now + + {toast.message || 'tempty'} + + ) + }) + } + + ) +} diff --git a/cadio-web/src/main/webapp/src/index.js b/cadio-web/src/main/webapp/src/index.js index 85ebbb34..cf5fb905 100644 --- a/cadio-web/src/main/webapp/src/index.js +++ b/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( diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-table-list.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-table-list.js index ce242956..8cd2bc99 100644 --- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-table-list.js +++ b/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) => (
  • -
    {info.table_name}
    +
    { + setTableName(info.table_name); + setShowDetail(true); + }}> + {info.table_name} +
    {info.comment}
    - Rows diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-data-manage-modal.js new file mode 100644 index 00000000..ba74e17d --- /dev/null +++ b/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 ( + <> + + + Table Data Manage(New or Modify) + + + 데이터 신규 추가 및 수정 + + + + + + + ) +} + +export default TableDataManageModal; 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 cab89318..54d7b1e3 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 @@ -37,7 +37,7 @@ const TableDetailModal = (props) => { if (!tableName) { return; } - + setTableLoading(true); axios({ method: "GET", url: `/api/cassandra/cluster/${clusterId}/keyspace/${keyspaceName}/table/${tableName}`, @@ -199,7 +199,7 @@ const TableDetailModal = (props) => { diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export-modal.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export-modal.js new file mode 100644 index 00000000..5cd82466 --- /dev/null +++ b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export-modal.js @@ -0,0 +1,37 @@ +import {useEffect} from "react"; +import {Modal} from "react-bootstrap"; + +const TableExportModal = (props) => { + + const show = props.show; + const handleClose = props.handleClose; + + useEffect(() => { + //show component + + return () => { + //hide component + + }; + }, []); + + return ( + <> + + + 데이터 추출 + + + Export 기능 + + + + + + + ) +} + +export default TableExportModal; diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export.js deleted file mode 100644 index 5d9f259a..00000000 --- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-export.js +++ /dev/null @@ -1,10 +0,0 @@ -const TableExport = () => { - - return ( - <> - Export - - ) -} - -export default TableExport; 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 5a120752..c449203b 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 @@ -1,22 +1,78 @@ import {Link, useParams} from "react-router-dom"; -import {useClusterState} from "../../../context/clusterContext"; -import {useEffect} from "react"; +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"; const TableHome = (props) => { const routeParams = useParams(); + const [showDetail, setShowDetail] = useState(false); + const [showExport, setShowExport] = useState(false); + const [showImport, setShowImport] = useState(false); + const [showDataManage, setShowDataManage] = useState(false); + const [tableName, setTableName] = useState(''); + + const initQueryResult = { + wasApplied: null, + rows: [], + columnNames: [], + }; + + const [queryLoading, setQueryLoading] = useState(false) + const [queryResult, setQueryResult] = useState(initQueryResult) + const [nextCursor, setNextCursor] = useState('') + + const getList = (cursor) => { + if (cursor === null) { + setQueryResult({ + wasApplied: null, + rows: [], + columnNames: [], + }) + } + + setQueryLoading(true); + + axios({ + method: "POST", + url: `/api/cassandra/cluster/${routeParams.clusterId}/keyspace/${routeParams.keyspaceName}/table/${routeParams.tableName}/row`, + data: { + pageSize: 50, + timeoutSeconds: 3, + cursor: cursor, + }, + }).then((response) => { + setNextCursor(response.data.result.nextCursor) + + setQueryResult({ + wasApplied: response.data.result.wasApplied, + rows: [...queryResult.rows, ...response.data.result.rows], + columnNames: response.data.result.columnNames, + }) + }).catch((error) => { + axiosCatch(error); + }).finally(() => { + setQueryLoading(false); + }) + } + + const renderData = (data) => { + if (typeof data === "object") { + return JSON.stringify(data); + } + + return data; + } - //const {doGetKeyspaceList} = useCluster(); - const { - keyspaceList, - keyspaceListLoading, - } = useClusterState(); useEffect(() => { //show component - console.log("routeParams ", routeParams.clusterId) - console.log("routeParams ", routeParams.keyspaceName) - console.log("routeParams ", routeParams.tableName) + setQueryResult(initQueryResult); + getList(null) return () => { //hide component @@ -50,68 +106,150 @@ const TableHome = (props) => {
    -

    Table

    - {/*
    */} - {/*
    */} - {/* */} - {/* */} - {/*
    */} - {/* */} - {/*
    */} +

    + Table { + queryLoading && +
    + Loading... +
    + } +

    +
    + + +
    + + +
    + + +
    -
      -
    • - - Home - -
      • -
    • - - Rows - -
      • -
    • - -
        -
      • - - Export - -
        • -
      • - - Import - -
        • - {/*
      • */} - {/*
        */} - {/*
        • */} - {/*
      • Separated link
        • */} -
      -
      • - {/*
    • */} - {/* Link*/} - {/*
      • */} - {/*
    • */} - {/* Disabled*/} - {/*
      • */} -
    - - {props.children} + {/*TODO : 위치 변경*/} + + +
    + + + + + { + queryResult.columnNames.map((info, infoIndex) => { + return ( + + ) + }) + } + + + + { + queryResult.rows.length <= 0 ? <> + + + + : + queryResult.rows.map((row, rowIndex) => { + return ( + + + { + queryResult.columnNames.map((info, infoIndex) => { + return ( + + ) + }) + } + + ) + }) + } + + +
    # + {info}
    + 데이터가 없습니다. +
    +
    + + + +
    +     		+ { + renderData(row[info]) + } +
    +
    + + { + nextCursor && +
    + +
    + } + + setShowDetail(false)} + /> + + setShowDataManage(false)} + /> + + setShowExport(false)} + /> + + setShowImport(false)} + /> + ) } diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import-modal.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import-modal.js new file mode 100644 index 00000000..4cfac267 --- /dev/null +++ b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import-modal.js @@ -0,0 +1,37 @@ +import {useEffect} from "react"; +import {Modal} from "react-bootstrap"; + +const TableImportModal = (props) => { + + const show = props.show; + const handleClose = props.handleClose; + + useEffect(() => { + //show component + + return () => { + //hide component + + }; + }, []); + + return ( + <> + + + 데이터 추가 + + + Import 기능 + + + + + + + ) +} + +export default TableImportModal; diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import.js deleted file mode 100644 index 31716a49..00000000 --- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-import.js +++ /dev/null @@ -1,10 +0,0 @@ -const TableImport = () => { - - return ( - <> - Infomation - - ) -} - -export default TableImport; diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-information.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-information.js deleted file mode 100644 index 21ecb726..00000000 --- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-information.js +++ /dev/null @@ -1,79 +0,0 @@ -import {useEffect, useState} from "react"; -import {useParams} from "react-router-dom"; -import axios from "axios"; -import {axiosCatch} from "../../../../../utils/axiosUtils"; - -const TableInformation = () => { - - const routeParams = useParams(); - - const [tableLoading, setTableLoading] = useState(false); - - const [tableInfo, setTableInfo] = useState({ - table: {}, - describe: {}, - columns: [], - }) - - const splitTableOptionList = (options) => { - if (!options || options.length <= 0) { - return []; - } - const allOptionKeys = Object.keys(options); - const half = Math.ceil(allOptionKeys.length / 2); - const result = []; - result.push(allOptionKeys.splice(0, half)) - result.push(allOptionKeys.splice(-half)); - - return result; - } - - - useEffect(() => { - //show component - - console.log("routeParams ", routeParams.clusterId) - console.log("routeParams ", routeParams.keyspaceName) - console.log("routeParams ", routeParams.tableName) - setTableLoading(true); - - axios({ - method: "GET", - url: `/api/cassandra/cluster/${routeParams.clusterId}/keyspace/${routeParams.keyspaceName}/table/${routeParams.tableName}`, - params: { - withTableDescribe: true, - } - }).then((response) => { - - setTableInfo({ - table: response.data.result.table, - describe: response.data.result.describe, - columns: response.data.result.columns, - }) - - }).catch((error) => { - console.log(error) - //TODO : error catch - axiosCatch(error) - }).finally(() => { - setTableLoading(false) - }); - - return () => { - //hide component - - }; - }, []); - - return ( -
    -
    - - - -
    -
    - ) -} - -export default TableInformation; diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-row.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-row.js deleted file mode 100644 index dcf36478..00000000 --- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-row.js +++ /dev/null @@ -1,167 +0,0 @@ -import axios from "axios"; -import {useEffect, useState} from "react"; -import {axiosCatch} from "../../../../../utils/axiosUtils"; -import {useParams} from "react-router-dom"; - -const TableRow = () => { - const routeParams = useParams(); - - const initQueryResult = { - wasApplied: null, - rows: [], - columnNames: [], - }; - - const [queryLoading, setQueryLoading] = useState(false) - const [queryResult, setQueryResult] = useState(initQueryResult) - const [nextCursor, setNextCursor] = useState('') - - const getList = (cursor) => { - if (cursor === null) { - setQueryResult({ - wasApplied: null, - rows: [], - columnNames: [], - }) - } - - setQueryLoading(true); - - axios({ - method: "POST", - url: `/api/cassandra/cluster/${routeParams.clusterId}/keyspace/${routeParams.keyspaceName}/table/${routeParams.tableName}/row`, - data: { - pageSize: 50, - timeoutSeconds: 3, - cursor: cursor, - }, - }).then((response) => { - setNextCursor(response.data.result.nextCursor) - - setQueryResult({ - wasApplied: response.data.result.wasApplied, - rows: [...queryResult.rows, ...response.data.result.rows], - columnNames: response.data.result.columnNames, - }) - }).catch((error) => { - axiosCatch(error); - }).finally(() => { - setQueryLoading(false); - }) - } - - const renderData = (data) => { - if (typeof data === "object") { - return JSON.stringify(data); - } - - return data; - } - - useEffect(() => { - //show component - setQueryResult(initQueryResult); - getList(null) - - return () => { - //hide component - - }; - }, []); - - return ( -
    -
    -
    - Rows - - { - queryLoading && -
    - Loading... -
    - } -
    - -
    - - - - - { - queryResult.columnNames.map((info, infoIndex) => { - return ( - - ) - }) - } - - - - { - queryResult.rows.length <= 0 ? <> - - - - : - queryResult.rows.map((row, rowIndex) => { - return ( - - - { - queryResult.columnNames.map((info, infoIndex) => { - return ( - - ) - }) - } - - ) - }) - } - - -
    # - {info}
    - 데이터가 없습니다. -
    -
    - - - -
    -     		- { - renderData(row[info]) - } -
    -
    - - { - nextCursor && -
    - -
    - } -
    - -
    - ) -} - -export default TableRow; 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 84d609f0..62da93b3 100644 --- a/cadio-web/src/main/webapp/src/pages/home-view.js +++ b/cadio-web/src/main/webapp/src/pages/home-view.js @@ -1,11 +1,13 @@ import {Link} from "react-router-dom"; import {useEffect, useState} from "react"; import axios from "axios"; -import CadioHeader from "../components/layout/cadio-header"; import CadioSidebar from "../components/layout/cadio-sidebar"; +import useCadio from "../commons/hooks/useCadio"; const HomeView = () => { + const {openToast} = useCadio(); + const [clustersLoading, setClustersLoading] = useState(false); const [clusters, setClusters] = useState([]); @@ -118,7 +120,14 @@ const HomeView = () => {
    + + + + ) 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 b603c257..4d7f39a2 100644 --- a/cadio-web/src/main/webapp/src/pages/initialize-view.js +++ b/cadio-web/src/main/webapp/src/pages/initialize-view.js @@ -1,6 +1,6 @@ import {useEffect, useState} from "react"; import axios from "axios"; -import useCadio from "./commons/hooks/useCadio"; +import useCadio from "../commons/hooks/useCadio"; const InitializeView = (props) => { const {doBootstrap} = useCadio(); From 475f88974001fac9156492baaa0dd33ca7e7c23f Mon Sep 17 00:00:00 2001 From: akageun Date: Sat, 6 Jul 2024 23:04:51 +0900 Subject: [PATCH 2/3] =?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 수정 --- .../src/commons/context/cadioContext.tsx | 8 ++--- .../main/webapp/src/commons/hooks/useCadio.js | 6 +--- .../main/webapp/src/components/cadio-toast.js | 33 ++++++++++++------- .../src/main/webapp/src/pages/home-view.js | 7 +++- 4 files changed, 32 insertions(+), 22 deletions(-) diff --git a/cadio-web/src/main/webapp/src/commons/context/cadioContext.tsx b/cadio-web/src/main/webapp/src/commons/context/cadioContext.tsx index 6872bc5b..99d054df 100644 --- a/cadio-web/src/main/webapp/src/commons/context/cadioContext.tsx +++ b/cadio-web/src/main/webapp/src/commons/context/cadioContext.tsx @@ -11,7 +11,7 @@ type Action = | { type: "SET_SYSTEM_AVAILABLE"; systemAvailable: boolean; } | { type: "SET_TOAST"; message: string, delay: number } - | { type: "REMOVE_TOAST_ITEM"; toastIndex: number } + | { type: "REMOVE_TOAST_ITEM"; id: number } type CadioDispatch = Dispatch; @@ -54,7 +54,7 @@ function reducer(state: CadioState, action: Action): CadioState { case "SET_TOAST": const arr = state.toasts ? [...state.toasts] : []; arr.push({ - //TODO : 아이디 추가 + id : new Date().getTime(), message: action.message, delay: action.delay, }); @@ -72,10 +72,10 @@ function reducer(state: CadioState, action: Action): CadioState { }; } - arr2.splice(action.toastIndex, 1) return { ...state, - toasts: arr2 + //양이 많을 경우 누락됨. + toasts: arr2.filter(info => info.id !== action.id) }; default: 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 33390a14..aab5e2db 100644 --- a/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js +++ b/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js @@ -1,14 +1,10 @@ import axios from "axios"; -import {useCadioDispatch, useCadioState} from "../context/cadioContext"; +import {useCadioDispatch} from "../context/cadioContext"; import {axiosCatch} from "../../utils/axiosUtils"; export default function useCadio() { const cadioDispatcher = useCadioDispatch(); - const { - bootstrapLoading, - systemAvailable - } = useCadioState(); function doBootstrap() { cadioDispatcher({ diff --git a/cadio-web/src/main/webapp/src/components/cadio-toast.js b/cadio-web/src/main/webapp/src/components/cadio-toast.js index a46d5afe..2913c5f6 100644 --- a/cadio-web/src/main/webapp/src/components/cadio-toast.js +++ b/cadio-web/src/main/webapp/src/components/cadio-toast.js @@ -1,21 +1,21 @@ import {Toast, ToastContainer} from "react-bootstrap"; -import useCadio from "../commons/hooks/useCadio"; 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 { + // openToast + // } = useCadio(); const { toasts, } = useCadioState(); - const setToast = (toastIndex) => { + const removeToast = (id) => { cadioDispatcher({ type: "REMOVE_TOAST_ITEM", - toastIndex : toastIndex + id: id }) } @@ -31,6 +31,7 @@ export default function CadioToast(props) { return ( { @@ -41,18 +42,26 @@ export default function CadioToast(props) { return ( { - setToast(); + removeToast(toast.id); }} > - - Bootstrap - just now - - {toast.message || 'tempty'} +
    + + {/**/} + {/* Cadio*/} + {/* test*/} + {/**/} + {toast.message || '내용이 비어 있습니다.'} + +
    ) }) 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 62da93b3..96f7b1b7 100644 --- a/cadio-web/src/main/webapp/src/pages/home-view.js +++ b/cadio-web/src/main/webapp/src/pages/home-view.js @@ -11,6 +11,8 @@ const HomeView = () => { const [clustersLoading, setClustersLoading] = useState(false); const [clusters, setClusters] = useState([]); + const [test, setTest] = useState(0); + useEffect(() => { //show component @@ -122,7 +124,10 @@ const HomeView = () => { From e9aa651bfc746f77f513d300b7fdf596d97dedca Mon Sep 17 00:00:00 2001 From: akageun Date: Sat, 6 Jul 2024 23:27:39 +0900 Subject: [PATCH 3/3] =?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 { } }