Merge pull request #696 from metrico/fix/date_time_range_690

## Fixes: - Close time picker on clicking outside - Timepicker button label / date range - Daily date range ## Improvements / Features - Requests query from current search at time range change Ref: #690
metrico · Feb 12, 2025 · 6f314a0 · 6f314a0
2 parents 060982a + 37a081a
commit 6f314a0
Show file tree

Hide file tree

Showing 7 changed files with 271 additions and 208 deletions.
diff --git a/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx b/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx
@@ -205,140 +205,6 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
 
     // force single view from small width
 
-    useEffect(() => {
-        setQueryInput(data.expr);
-        setQueryValue([{ children: [{ text: sanitizeWithSigns(data.expr) }] }]);
-    }, [data.expr]);
-
-    useEffect(() => {
-        let queryText = queryValue[0].children[0].text;
-        setQueryInput(queryText);
-    }, [queryValue]);
-
-    useEffect(() => {
-        if (isTabletOrMobile && isSplit) {
-            dispatch(setSplitView(false));
-        }
-    }, [isTabletOrMobile]);
-
-    useEffect(() => {
-        let { expr } = getLocalQueryItem(dataSourceId, id);
-        let actLocalDs = getLocalDataSources(dataSourceId);
-        setQueryInput(expr);
-        setQueryValue([{ children: [{ text: sanitizeWithSigns(expr) }] }]);
-
-        if (isLogsVolume && logsVolumeQuery) {
-            setLogsLevel(expr, isLogsVolume);
-        }
-        const dataSource: any = dataSources?.find(
-            (f: any) => f.id === dataSourceId
-        );
-
-        let currentDataSource: any = {};
-
-        if (
-            actLocalDs &&
-            actLocalDs?.url !== initialDefault &&
-            actLocalDs?.url !== ""
-        ) {
-            currentDataSource = { ...actLocalDs };
-
-            const panelCP = [...panelData];
-
-            panelCP.forEach((query) => {
-                if (query.id === id) {
-                    query.dataSourceId = currentDataSource.id;
-                    query.dataSourceType = currentDataSource.type;
-                    query.dataSourceURL = currentDataSource.url;
-                }
-            });
-
-            dispatch(panelAction(name, panelCP));
-
-            const dsCopy = [...dataSources];
-            dsCopy.forEach((ds) => {
-                if (ds.id === dataSourceId) {
-                    ds = currentDataSource;
-                }
-            });
-
-            dispatch(setDataSources(dsCopy));
-        } else if (dataSource && dataSource.url !== "") {
-            currentDataSource = { ...dataSource };
-        }
-
-        let { isMatrix } = getIntvalData(expr);
-        if (expr !== "" && expr?.length > 6) {
-            dispatch(
-                getData(
-                    dataSourceType,
-                    expr,
-                    queryType,
-                    limit,
-                    name,
-                    id,
-                    direction,
-                    dataSourceId,
-                    currentDataSource?.url
-                )
-            );
-        }
-
-        // setLogsLevel(queryInput, isLogsVolume);
-        if (
-            isLogsVolume &&
-            logsVolumeQuery?.query &&
-            logsVolumeQuery?.query !== "" &&
-            dataSourceType === "logs" &&
-            !isMatrix
-        ) {
-            dispatch(
-                getData(
-                    dataSourceType,
-                    logsVolumeQuery.query,
-                    queryType,
-                    limit,
-                    name,
-                    id,
-                    direction,
-                    dataSourceId,
-                    currentDataSource.url,
-                    logsVolumeQuery.customStep,
-                    true // isLogsVolume
-                )
-            );
-        }
-    }, [dataSourceId, id]);
-
-    useEffect(() => {
-        if (typeof queryInput === "string") {
-            setQueryInput(queryInput);
-            setQueryValue([
-                { children: [{ text: sanitizeWithSigns(queryInput) }] },
-            ]);
-            saveQuery();
-            if (isLogsVolume) {
-                setLogsLevel(queryInput, true);
-            }
-        }
-    }, [queryInput]);
-
-    useEffect(() => {
-        if (typeof launchQuery === "string" && launchQuery !== "") {
-            setQueryInput(launchQuery);
-            setQueryValue([
-                { children: [{ text: sanitizeWithSigns(launchQuery) }] },
-            ]);
-            saveQuery();
-            if (isLogsVolume) {
-                setLogsLevel(launchQuery, true);
-            }
-        }
-    }, [launchQuery]);
-
-    useEffect(() => {
-        setLogsLevel(queryInput, isLogsVolume);
-    }, [queryInput]);
 
     function setLogsLevel(queryInput: string, isLogsVolume: boolean) {
         if (isLogsVolume && queryInput !== "") {
@@ -423,8 +289,8 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
         saveLogsVolumeQuery({ query, customStep });
     };
 
-    const onSubmit = (e: any) => {
-        e.preventDefault();
+    const onSubmit = (e?: any) => {
+        e?.preventDefault();
         const ds: any = dataSources.find((f: any) => f.id === dataSourceId);
         if (onQueryValid(queryInput) && ds) {
             try {
@@ -778,10 +644,6 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
         return null;
     };
 
-    if (isEmbed) {
-        return null;
-    }
-
     const queryTypeRenderer = (
         type: any,
         traceSearch: any,
@@ -834,6 +696,150 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
         return querySearch;
     };
 
+
+    useEffect(() => {
+        setQueryInput(data.expr);
+        setQueryValue([{ children: [{ text: sanitizeWithSigns(data.expr) }] }]);
+    }, [data.expr]);
+
+    useEffect(() => {
+        let queryText = queryValue[0].children[0].text;
+        setQueryInput(queryText);
+    }, [queryValue]);
+
+    useEffect(() => {
+        if (isTabletOrMobile && isSplit) {
+            dispatch(setSplitView(false));
+        }
+    }, [isTabletOrMobile]);
+
+    useEffect(() => {
+        let { expr } = getLocalQueryItem(dataSourceId, id);
+        let actLocalDs = getLocalDataSources(dataSourceId);
+        setQueryInput(expr);
+        setQueryValue([{ children: [{ text: sanitizeWithSigns(expr) }] }]);
+
+        if (isLogsVolume && logsVolumeQuery) {
+            setLogsLevel(expr, isLogsVolume);
+        }
+        const dataSource: any = dataSources?.find(
+            (f: any) => f.id === dataSourceId
+        );
+
+        let currentDataSource: any = {};
+
+        if (
+            actLocalDs &&
+            actLocalDs?.url !== initialDefault &&
+            actLocalDs?.url !== ""
+        ) {
+            currentDataSource = { ...actLocalDs };
+
+            const panelCP = [...panelData];
+
+            panelCP.forEach((query) => {
+                if (query.id === id) {
+                    query.dataSourceId = currentDataSource.id;
+                    query.dataSourceType = currentDataSource.type;
+                    query.dataSourceURL = currentDataSource.url;
+                }
+            });
+
+            dispatch(panelAction(name, panelCP));
+
+            const dsCopy = [...dataSources];
+            dsCopy.forEach((ds) => {
+                if (ds.id === dataSourceId) {
+                    ds = currentDataSource;
+                }
+            });
+
+            dispatch(setDataSources(dsCopy));
+        } else if (dataSource && dataSource.url !== "") {
+            currentDataSource = { ...dataSource };
+        }
+
+        let { isMatrix } = getIntvalData(expr);
+        if (expr !== "" && expr?.length > 6) {
+            dispatch(
+                getData(
+                    dataSourceType,
+                    expr,
+                    queryType,
+                    limit,
+                    name,
+                    id,
+                    direction,
+                    dataSourceId,
+                    currentDataSource?.url
+                )
+            );
+        }
+
+        // setLogsLevel(queryInput, isLogsVolume);
+        if (
+            isLogsVolume &&
+            logsVolumeQuery?.query &&
+            logsVolumeQuery?.query !== "" &&
+            dataSourceType === "logs" &&
+            !isMatrix
+        ) {
+            dispatch(
+                getData(
+                    dataSourceType,
+                    logsVolumeQuery.query,
+                    queryType,
+                    limit,
+                    name,
+                    id,
+                    direction,
+                    dataSourceId,
+                    currentDataSource.url,
+                    logsVolumeQuery.customStep,
+                    true // isLogsVolume
+                )
+            );
+        }
+    }, [dataSourceId, id]);
+
+    useEffect(() => {
+        if (typeof queryInput === "string") {
+            setQueryInput(queryInput);
+            setQueryValue([
+                { children: [{ text: sanitizeWithSigns(queryInput) }] },
+            ]);
+            saveQuery();
+            if (isLogsVolume) {
+                setLogsLevel(queryInput, true);
+            }
+        }
+    }, [queryInput]);
+
+    useEffect(() => {
+        if (typeof launchQuery === "string" && launchQuery !== "") {
+            setQueryInput(launchQuery);
+            setQueryValue([
+                { children: [{ text: sanitizeWithSigns(launchQuery) }] },
+            ]);
+            saveQuery();
+            if (isLogsVolume) {
+                setLogsLevel(launchQuery, true);
+            }
+        }
+    }, [launchQuery]);
+
+    useEffect(() => {
+        setLogsLevel(queryInput, isLogsVolume);
+    }, [queryInput]);
+
+    useEffect(()=>{
+        if(data?.start && data?.stop){
+            onSubmit()
+        }
+
+    },[data.start, data.stop])
+
+
     // render
 
     if (isEmbed) {

diff --git a/packages/main/src/components/StatusBar/components/daterangepicker/components/Nav.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/Nav.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, forwardRef } from "react";
 
 import Paper from "@mui/material/Paper";
 import Grid from "@mui/material/Grid";
@@ -26,7 +26,6 @@ import { findRangeByLabel } from "../utils";
 import AbsoluteSelector from "./AbsoluteSelector";
 import { useMediaQuery } from "react-responsive";
 import styled from "@emotion/styled";
-import { ThemeProvider } from "@emotion/react";
 import useTheme from "@ui/theme/useTheme";
 import { QrynTheme } from "@ui/theme/types";
 
@@ -82,7 +81,7 @@ const StyledNav = styled.div<{theme:QrynTheme}>`
 `;
 
 // open month only at
-export const PickerNav = (props: any) => {
+export const PickerNav = forwardRef((props: any, ref:any) => {
     const {
         ranges,
         dateRange,
@@ -197,9 +196,8 @@ export const PickerNav = (props: any) => {
     };
 
     return (
-        <ThemeProvider theme={theme}>
             <StyledNav theme={theme}>
-                <Paper className={"container"} elevation={5}>
+                <Paper className={"container"} ref={ref} elevation={5}>
                     <Grid display={"flex"} style={{ flex: "1" }}>
                         {calendarOpen && isBigScreen && (
                             <Grid container direction={"row"} wrap={"nowrap"}>
@@ -394,6 +392,6 @@ export const PickerNav = (props: any) => {
                     </Grid>
                 </Paper>
             </StyledNav>
-        </ThemeProvider>
+
     );
-};
+});
diff --git a/packages/main/src/components/StatusBar/components/daterangepicker/consts.ts b/packages/main/src/components/StatusBar/components/daterangepicker/consts.ts
@@ -16,8 +16,8 @@ export const MONTHS = [
 export const WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 
 export const MARKERS = {
-    FIRST_MONTH: Symbol("firstMonth"),
-    SECOND_MONTH: Symbol("secondMonth"),
+    FIRST_MONTH: "firstMonth",
+    SECOND_MONTH: "secondMonth",
 };
 
 export const DATE_TIME_RANGE = "dateTimeRange";
diff --git a/packages/main/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.tsx
@@ -1,19 +1,16 @@
-import { useEffect, useRef } from "react";
-import { setRangeOpen } from '@ui/store/actions/setRangeOpen';
-import { useDispatch } from 'react-redux';
+import React, { useEffect } from "react";
 
-export default function useOutsideRef() {
- const dispatch: any = useDispatch()
-    const ref = useRef<any>(null);
+export default function useOutsideRef(onOpen: (value: boolean) => void) {
+    const ref = React.createRef<HTMLDivElement>();
 
-    const handleHideDateRange = (event:any) => {
+    const handleHideDateRange = (event: any) => {
         if (event.key === "Escape") {
-            dispatch(setRangeOpen(false));
+            onOpen(false);
         }
     };
-    const handleClickOutside = (event:any) => {
+    const handleClickOutside = (event: any) => {
         if (ref.current && !ref.current.contains(event.target)) {
-            dispatch(setRangeOpen(false));
+            onOpen(false);
         }
     };
     useEffect(() => {