fix: query builder with editable input

metrico · Dec 4, 2023 · 9a61a3d · 9a61a3d
1 parent 3aa832c
commit 9a61a3d
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 35 deletions.
diff --git a/packages/main/plugins/QueryPreview.tsx b/packages/main/plugins/QueryPreview.tsx
@@ -14,7 +14,7 @@ interface Props {
     queryInput?: any;
 }
 
-const QueryPreviewContainer = (theme: any) => css`
+export const QueryPreviewContainer = (theme: any) => css`
     padding: 8px;
     display: flex;
     flex: 1;

diff --git a/packages/main/sections/Browser/helpers.tsx b/packages/main/sections/Browser/helpers.tsx
@@ -14,7 +14,7 @@ export default function queryInit(query: any) {
             type: "paragraph",
             children: [
                 {
-                    text: DOMPurify.sanitize("Enter a cLoki Query"),
+                    text: DOMPurify.sanitize("Enter a Query"),
                 },
             ],
         },

diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx
@@ -6,8 +6,10 @@ import { FlexColumn } from "./styles";
 
 import { LogsFormBuilderProps, Builder } from "./types";
 import { FormBuilders } from "./FormBuilders";
-import QueryPreview from "@ui/plugins/QueryPreview";
+import { QueryPreviewContainer } from "@ui/plugins/QueryPreview";
 import { useSelector } from "react-redux";
+import queryInit from "@ui/main/components/LabelBrowser/helpers/queryInit";
+import QueryEditor from "@ui/plugins/queryeditor";
 
 const initialBuilder: Builder = {
     operations: [],
@@ -44,24 +46,22 @@ const binaryOperatorOpts: any = {
 };
 
 /**
- * 
- * @param props 
+ *
+ * @param props
  * @returns The Logs Form Builder
  */
 export function LogsFormBuilder(props: LogsFormBuilderProps) {
-
     const {
         dataSourceId,
         labelValueChange,
         handleLogsVolumeChange,
         searchButton,
-        queryInput
     } = props;
 
     const dataSources = useSelector((store: any) => store.dataSources);
-    const start = useSelector ((store:any)=> store.start)
-    const stop = useSelector ((store:any)=> store.stop)
-
+    const start = useSelector((store: any) => store.start);
+    const stop = useSelector((store: any) => store.stop);
+    const [editorValue, setEditorValue] = useState(queryInit(""));
     const { logsResponse } = useLogLabels(
         dataSourceId,
         start,
@@ -78,20 +78,19 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
         (idx: number) => {
             setBuilders((prev) => [...prev, { ...prev[idx], isBinary: true }]);
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+
         [builders]
     );
 
     useEffect(() => {
         if (builders[0].logsVolumeQuery !== "") {
             handleLogsVolumeChange(builders[0].logsVolumeQuery);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [builders]);
 
     useEffect(() => {
         labelValueChange(finalQuery);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        setEditorValue(queryInit(finalQuery));
     }, [finalQuery]);
 
     useEffect(() => {
@@ -115,7 +114,7 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
         }
         return ` ${binaryOperatorOpts[binaryOpt]} ${vectString}`;
     };
-   
+
     const finalQueryOperator = (builders: Builder[]) => {
         let finalQuery = "";
 
@@ -133,9 +132,12 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
 
     useEffect(() => {
         setFinalQuery(finalQueryOperator(builders));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [builders]);
 
+    const onEditorChange = (e) => {
+        labelValueChange(e[0]?.children[0]?.text);
+    };
+
     return (
         <ThemeProvider theme={mainTheme}>
             <div className={cx(FlexColumn)}>
@@ -148,12 +150,16 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
                     builders={builders}
                     finalQuery={finalQuery}
                 />
-                <QueryPreview
-                    queryText={finalQuery}
-                    searchButton={searchButton}
-                    queryInput={queryInput}
-
-                />
+
+                <div className={cx(QueryPreviewContainer(mainTheme))}>
+                    <label>Raw Query</label>
+                    <QueryEditor
+                        onQueryChange={onEditorChange}
+                        defaultValue={editorValue}
+                        value={editorValue}
+                    />
+                    <div className="action-buttons">{searchButton}</div>
+                </div>
             </div>
         </ThemeProvider>
     );

diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx
@@ -6,16 +6,21 @@ import { FlexColumn } from "./styles";
 
 import { MetricsFormBuilderProps, Builder } from "./types";
 import { FormBuilders } from "./FormBuilders";
-import QueryPreview from "@ui/plugins/QueryPreview";
+import { QueryPreviewContainer } from "@ui/plugins/QueryPreview";
+import QueryEditor from "@ui/plugins/queryeditor";
 import { useSelector } from "react-redux";
 import { initialMetricsBuilder, binaryOperatorOpts } from "./consts";
+import queryInit from "@ui/main/components/LabelBrowser/helpers/queryInit";
 
 export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
-    const { dataSourceId, labelValueChange, searchButton, logsRateButton, queryInput } = props;
-
+    const { dataSourceId, labelValueChange, searchButton, logsRateButton } =
+        props;
+
     const dataSources = useSelector((store: any) => store.dataSources);
-    const start = useSelector ((store:any)=> store.start)
-    const stop = useSelector ((store:any)=> store.stop)
+    const start = useSelector((store: any) => store.start);
+    const stop = useSelector((store: any) => store.stop);
+
+    const [editorValue, setEditorValue] = useState(queryInit(""));
 
     // this one should be comming form selected metric
 
@@ -37,13 +42,13 @@ export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
         (idx: number) => {
             setBuilders((prev) => [...prev, { ...prev[idx], isBinary: true }]);
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+
         [builders]
     );
 
     useEffect(() => {
         labelValueChange(finalQuery);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        setEditorValue(queryInit(finalQuery));
     }, [finalQuery]);
 
     useEffect(() => {
@@ -82,9 +87,12 @@ export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
 
     // send a 'logs query' to the builders
 
+    const onEditorChange = (e) => {
+        labelValueChange(e[0]?.children[0]?.text);
+    };
+
     useEffect(() => {
         setFinalQuery(finalQueryOperator(builders));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [builders]);
 
     return (
@@ -99,13 +107,21 @@ export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
                     builders={builders}
                     finalQuery={finalQuery}
                 />
-                <QueryPreview
-                    queryText={finalQuery}
-                    searchButton={searchButton}
-                    logsRateButton={logsRateButton}
-                    queryInput={queryInput}
-                />
+
+                <div className={cx(QueryPreviewContainer(mainTheme))}>
+                    <label>Raw Query</label>
+                    <QueryEditor
+                        onQueryChange={onEditorChange}
+                        defaultValue={editorValue}
+                        value={editorValue}
+                    />
+                    <div className="action-buttons">
+                        {logsRateButton}
+                        {searchButton}
+                    </div>
+                </div>
             </div>
         </ThemeProvider>
     );
 }
+// the queryPreview should be switched to a query editor with a button