fix: logs volume time range

metrico · Jan 9, 2024 · 10a7b1d · 10a7b1d
1 parent b10380f
commit 10a7b1d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx b/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx
@@ -119,8 +119,6 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
     const historyOpen = useSelector((store: any) => store.historyOpen);
     const isEmbed = useSelector((store: any) => store.isEmbed);
     const queryHistory = useSelector((store: any) => store.queryHistory);
-    const start = useSelector((store: any) => store.start);
-    const stop = useSelector((store: any) => store.stop);
     const isSplit = useSelector((store: any) => store.isSplit);
     const panelQuery = useSelector((store: any) => store[name]);
     const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1070px)" });
@@ -142,7 +140,7 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
         return defaultDataSources.find((f) => f.id === dataSourceId);
     }, [dataSourceId]);
 
-    const findCurrentDataSource = (dataSources: any, id: string) => {
+    const findCurrentDataSource = (dataSources: any) => {
         return dataSources?.find((f: any) => f.id === dataSourceId);
     };
 
@@ -155,7 +153,7 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
 
         setLogsLevel(expr, isLogsVolume);
 
-        const dataSource: any = findCurrentDataSource(dataSources, id);
+        const dataSource: any = findCurrentDataSource(dataSources);
 
         let currentDataSource: any = {};
 
@@ -416,11 +414,12 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
         const { query, customStep } = setQueryTimeInterval(
             queryString,
             width,
-            start,
-            stop
+            data.start,
+            data.stop
         );
         saveLogsVolumeQuery({ query, customStep });
     };
+
     const onSubmit = (e: any) => {
         e.preventDefault();
         const ds: any = dataSources.find((f: any) => f.id === dataSourceId);
@@ -662,7 +661,7 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
 
         if (queryExpr.includes("$__interval")) {
             isMatrix = true;
-            const timeDiff = (stop.getTime() - start.getTime()) / 1000;
+            const timeDiff = (data.stop.getTime() - data.start.getTime()) / 1000;
             const timeProportion = timeDiff / 30;
             const screenProportion = Number(
                 (width / window.innerWidth).toFixed(1)
@@ -951,6 +950,7 @@ const QueryBar: React.FC<QueryBarProps> = (props) => {
                         handleLogValueChange={onLogChange}
                         handleLogsVolumeChange={onLogVolumeChange}
                     />,
+
                     <ShowLogsButton
                         disabled={!queryValid}
                         onClick={onSubmit}

diff --git a/packages/main/src/components/QueryTypeBar/index.tsx b/packages/main/src/components/QueryTypeBar/index.tsx
@@ -9,13 +9,13 @@ import { Switch } from "@mui/material";
 import { useLocation } from "react-router-dom";
 import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
 import { setRightPanel } from "@ui/store/actions/setRightPanel";
-import useTheme from "@ui/theme/useTheme"
+import useTheme from "@ui/theme/useTheme";
 import PluginRenderer from "@ui/plugins/PluginsRenderer";
 
 const QueryTypeCont = styled.div`
     display: flex;
     padding: 4px;
-   // background: ${(props: any) => props.theme.shadow};
+    // background: ${(props: any) => props.theme.shadow};
     color: ${(props: any) => props.color};
     height: 26px;
 `;
@@ -36,8 +36,7 @@ export const DIRECTION_SWITCH_OPTIONS = [
     { value: "backwards", label: "Backwards" },
 ];
 
-
-// Bar with switches: 
+// Bar with switches:
 // query type
 // timestamp
 // query builder
@@ -101,7 +100,6 @@ export default function QueryTypeBar(props: any) {
                 dispatch(panelAction(name, panel));
             }
         }
-
     }, []);
 
     useEffect(() => {
@@ -187,7 +185,6 @@ export default function QueryTypeBar(props: any) {
             }
         });
 
-        console.log(name, panel)
         dispatch(panelAction(name, panel));
     }
 
@@ -206,7 +203,7 @@ export default function QueryTypeBar(props: any) {
     return (
         <ThemeProvider theme={theme}>
             <QueryTypeCont>
-                <PluginRenderer section={"Query Options"} localProps={props}/>
+                <PluginRenderer section={"Query Options"} localProps={props} />
                 <QueryTypeSwitch
                     label={"Query Type"}
                     options={SWITCH_OPTIONS}