Feature/query editor (#25)

* Add Query Editor

* Add Query Editor

cadio-web/src/main/webapp/package.json

@@ -21,6 +21,8 @@
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.11.0",
  "react-scripts": "5.0.1",
+ "react-ace": "^12.0.0",
+ "ace-builds": "^1.35.2",
  "typescript": "^4.9.5",
  "web-vitals": "^2.1.4"
  },

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

@@ -1,6 +1,81 @@
 import QueryEditor from "./query/query-editor";
+import axios from "axios";
+import {useEffect, useState} from "react";
+import {useParams} from "react-router-dom";
+import QueryResult from "./query/query-result";
 
 const QueryHome = () => {
+ const routeParams = useParams();
+
+ const [queryParam, setQueryParam] = useState(
+ {
+ query: "",
+ nextCursor: "",
+ }
+ );
+
+ const initQueryResult = {
+ wasApplied: null,
+ rows: [],
+ columnNames: [],
+ };
+
+ const [queryResult, setQueryResult] = useState(initQueryResult)
+
+ const queryExecute = (query, cursor, setLoading) => {
+ if (!query) {
+ alert("쿼리를 입력해 주세요.")
+ return;
+ }
+
+ if (cursor === null) {
+ setQueryResult({
+ wasApplied: null,
+ rows: [],
+ columnNames: [],
+ })
+ }
+
+ setLoading(true);
+
+ axios({
+ method: "POST",
+ url: `/api/cassandra/cluster/${routeParams.clusterId}/query`,
+ data: {
+ query: query,
+ pageSize: 2,
+ timeoutSeconds: 3,
+ cursor: cursor,
+ },
+ }).then((response) => {
+ console.log("response query execute ", response.data.result.nextCursor)
+ setQueryParam({
+ query: query,
+ nextCursor: response.data.result.nextCursor
+ })
+
+ setQueryResult({
+ wasApplied: response.data.result.wasApplied,
+ rows: [...queryResult.rows, ...response.data.result.rows],
+ columnNames: response.data.result.columnNames,
+ })
+ }).catch((error) => {
+
+ }).finally(() => {
+ setLoading(false);
+ })
+ }
+
+ useEffect(() => {
+ //show component
+ setQueryResult(initQueryResult);
+
+ return () => {
+ //hide component
+
+ };
+ }, []);
+
 
  return (
  <>
@@ -19,8 +94,15 @@ const QueryHome = () => {
  </div>
  </div>
 
- <QueryEditor/>
-
+ <QueryEditor
+ queryExecute={queryExecute}
+ />
+ <QueryResult
+ queryExecute={queryExecute}
+ result={queryResult}
+ query={queryParam.query}
+ nextCursor={queryParam.nextCursor}
+ />
  </>
  )
 }