Merge pull request #400 from metrico/fix/rm_logs

hotfix: date range at form builders
metrico · Feb 5, 2024 · b8ff3b6 · b8ff3b6
2 parents 1978f16 + 212924b
commit b8ff3b6
Show file tree

Hide file tree

Showing 47 changed files with 549 additions and 361 deletions.
diff --git a/packages/main/plugins/Cardinality/DayPicker.tsx b/packages/main/plugins/Cardinality/DayPicker.tsx
@@ -18,7 +18,6 @@ export const MenuButton = styled.button`
     background: ${(props: any) => props.theme.neutral};
     border: 1px solid ${(props: any) => props.theme.accentNeutral};
     color: ${(props: any) => props.theme.contrast};
-    padding: 3px 12px;
     border-radius: 3px;
     font-size: 12px;
     cursor: pointer;

diff --git a/packages/main/plugins/Raggix/LogsCounter.tsx b/packages/main/plugins/Raggix/LogsCounter.tsx
@@ -11,7 +11,7 @@ type Props = {
     loading: boolean;
     logs: any[];
     theme: any;
-    openLog: Function;
+    openLog: any;
     showLabels: (e: any) => void;
 };
 

diff --git a/packages/main/qrynui/Buttons/styled.tsx b/packages/main/qrynui/Buttons/styled.tsx
@@ -13,7 +13,7 @@ export const HistoryButtonStyled: any = styled(BtnSmall)`
     color: ${(props: any) => props.theme.contrast};
     background: ${(props: any) => props.theme.neutral};
     border: 1px solid ${(props: any) => props.theme.accentNeutral};
-    height: 28px;
+    height: 26px;
     span {
         margin-left: 5px;
     }
@@ -30,7 +30,7 @@ export const ShowLabelsBtn: any = styled(BtnSmall)`
     padding-left: 6px;
     justify-content: flex-start;
     color: ${({ theme }: any) => theme.contrast};
-    height: 28px;
+    height: 26px;
     &:hover {
         background: ${({ theme }: any) => theme.lightNeutral};
     }
@@ -48,6 +48,7 @@ export const QueryBarContainer: any = styled.div`
     margin-left: 0px;
     flex-wrap: wrap;
     border-radius: 3px;
+    margin-right:2px;
 `;
 export const ShowLogsBtn: any = styled(BtnSmall, {
     shouldForwardProp: (prop) => isPropValid(prop) && prop !== "loading",
@@ -61,7 +62,7 @@ export const ShowLogsBtn: any = styled(BtnSmall, {
     justify-content: center;
     padding: 3px 12px;
 
-    height: 28px;
+    height: 26px;
     &:hover {
         background: ${(props: any) => props.theme.primaryLight};
     }
@@ -85,7 +86,7 @@ export const ShowSettingsBtn: any = styled(BtnSmall)`
     color: ${(props: any) => props.theme.contrast};
     background: ${(props: any) => props.theme.neutral};
     border: 1px solid ${(props: any) => props.theme.accentNeutral};
-    height: 28px;
+    height: 26px;
     span {
         margin-left: 5px;
     }

diff --git a/packages/main/qrynui/CustomSwitch/CustomSwitch.tsx b/packages/main/qrynui/CustomSwitch/CustomSwitch.tsx
@@ -0,0 +1,95 @@
+import { css, cx } from "@emotion/css";
+import useTheme from "@ui/theme/useTheme";
+import { useState } from "react";
+
+const CustomSwitchStyles = (theme: any) => {
+    return css`
+        .switch {
+            position: relative;
+            display: inline-block;
+            margin-right: 8px;
+            margin-left: 8px;
+            width: 28px;
+            height: 12px;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+        }
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 12px;
+            width: 28px;
+            display: flex;
+            aligin-items: center;
+            background-color: ${theme.shadow};
+            border: 1px solid ${theme.neutral};
+            -webkit-transition: 0.25s;
+            transition: 0.25s;
+            border-radius: 6px;
+            &.active {
+                background-color: ${theme.primaryAccent};
+                border: 1px solid ${theme.primary};
+                &:before {
+                    background-color: ${theme.primaryLight};
+                    border-left: 4px solid ${theme.primary};
+                    left: 12px;
+                    border-right: 0px;
+                }
+            }
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 12px;
+            width: 12px;
+            left: 0px;
+            bottom: 0;
+            background-color: ${theme.contrastNeutral};
+            -webkit-transition: 0.25s;
+            transition: 0.25s;
+            border-radius: 6px;
+            border-right: 4px solid ${theme.accentNeutral};
+        }
+    `;
+};
+
+type CustomSwitchProps = {
+    defaultActive?: boolean;
+    onChange?: (e: any) => void;
+};
+
+const CustomSwitch = ({ defaultActive, onChange }: CustomSwitchProps) => {
+    const theme = useTheme();
+    const classes = CustomSwitchStyles(theme);
+    const [active, setActive] = useState(defaultActive ?? false);
+    const onSwitchChange = (e: any) => {
+        if (onChange) onChange(e);
+        setActive((active) => !active);
+    };
+    return (
+        <div className={cx(classes)}>
+            <label className={`switch ${active ? "active" : ""}`}>
+                <input
+                    checked={active}
+                    onChange={onSwitchChange}
+                    type="checkbox"
+                />
+                <span
+                    className={`slider round ${active ? "active" : ""}`}
+                ></span>
+            </label>
+        </div>
+    );
+};
+
+export default CustomSwitch;
diff --git a/packages/main/src/components/DataViews/components/Charts/FlotChart.tsx b/packages/main/src/components/DataViews/components/Charts/FlotChart.tsx
@@ -28,6 +28,7 @@ export function FlotChart(props: any) {
                             justifyContent: "center",
                             fontSize: "12px",
                             color: theme.contrast,
+                            paddingTop:"8px"
                         }}
                     >
                         Logs Volume

diff --git a/packages/main/src/components/DataViews/components/Charts/index.tsx b/packages/main/src/components/DataViews/components/Charts/index.tsx
@@ -9,7 +9,7 @@ import "react-flot/flot-override/jquery.flot.resize";
 import "react-flot/flot/jquery.flot.stack.min.js";
 //React
 import { useState, useEffect, useRef, useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch} from "react-redux";
 //Packages
 import moment from "moment";
 import { format } from "date-fns";
@@ -88,7 +88,7 @@ export default function QrynChart(props: any): any {
                 return "line";
             }
         }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
+
     }, [isLogsVolume]);
 
     const [chartType, setChartType] = useState(getInitialChartType);
@@ -331,14 +331,14 @@ export default function QrynChart(props: any): any {
         //setChartData(getDataParsed(isSpliced));
         setChartData(matrix);
         localStorage.setItem("labelsSelected", JSON.stringify([]));
-          // eslint-disable-next-line react-hooks/exhaustive-deps
+
     }, []);
 
     useEffect(() => {
         setChartOptions(chartOptions);
         setElement(chartRef.current);
         drawChartFromData();
-          // eslint-disable-next-line react-hooks/exhaustive-deps
+
     }, [matrixData, isSpliced]);
 
     function drawChartFromData() {
@@ -377,11 +377,11 @@ export default function QrynChart(props: any): any {
         }
     }
 
-    const handleNoLimitData = (e: any) => {
+    const handleNoLimitData = () => {
         setIsSpliced(false);
     };
 
-    const handleLimitData = (e: any) => {
+    const handleLimitData = () => {
         setIsSpliced(true);
     };
 
@@ -409,7 +409,7 @@ export default function QrynChart(props: any): any {
         if (pointSet.size === 1 && chartType !== "bar") {
             onSetChartType("bar");
         }
-
+       
         return <FlotChart {...flotChartProps} />;
     }
 

diff --git a/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts b/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts
@@ -3,10 +3,8 @@ import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { getHeaders } from "./helpers";
 import moment from "moment";
-export function useMetricsList(id: any, value: any) {
+export function useMetricsList(id: any, value: any, start, stop) {
     const dataSources = useSelector((store: any) => store.dataSources);
-    const start = useSelector((store: any) => store.start);
-    const stop = useSelector((store: any) => store.stop);
 
     const timeParams = useMemo(() => {
         return {

diff --git a/packages/main/src/components/DataViews/components/Metrics/useValuesFromMetrics.ts b/packages/main/src/components/DataViews/components/Metrics/useValuesFromMetrics.ts
@@ -3,10 +3,8 @@ import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { getHeaders } from "./helpers";
 import moment from "moment";
-export function useValuesFromMetrics(id: any) {
+export function useValuesFromMetrics(id: any, start, stop) {
     const dataSources = useSelector((store: any) => store.dataSources);
-    const start = useSelector((store: any) => store.start);
-    const stop = useSelector((store: any) => store.stop);
 
     const timeParams = useMemo(() => {
         return {
@@ -47,7 +45,6 @@ export function useValuesFromMetrics(id: any) {
 
             apiRequest();
         }
-          // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return useMemo(() => {

diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/FormBuilders.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/FormBuilders.tsx
@@ -106,7 +106,7 @@ export const BinaryOperationBar = (props: any) => {
 };
 
 export const FormBuilder = (props: any) => {
-    const { builder, theme, idx, setBuilders, logsResponse, dataSourceId } =
+    const { builder, theme, idx, setBuilders, logsResponse, dataSourceId, start, stop } =
         props;
 
     // const [logsVolumeQuery, setLogsVolumeQuery] = useState(builder.logsVolumeQuery)
@@ -122,7 +122,7 @@ export const FormBuilder = (props: any) => {
         }
         return {};
     }, [builder.labelValuesState]);
-    const metricsOpts = useValuesFromMetrics(dataSourceId);
+    const metricsOpts = useValuesFromMetrics(dataSourceId, start, stop);
     const [metricValue, setMetricValue] = useState(
         metricsOpts[0] || { label: "", value: "" }
     );
@@ -218,10 +218,14 @@ export const FormBuilder = (props: any) => {
                             theme={theme}
                             onMetricChange={onMetricChange}
                             dataSourceId={dataSourceId}
+                            start={props.start}
+                            stop={props.stop}
                         />
                         <MetricsLabelValueSelectors
                             // label value selectors for metrics
                             index={idx}
+                            start={props.start}
+                            stop={props.stop}
                             onChange={onLabelValueChange} // this will be set
                             dataSourceId={dataSourceId}
                             value={sanitizeWithSigns(metricValue.value)}
@@ -238,6 +242,8 @@ export const FormBuilder = (props: any) => {
                     <LabelValuesSelectors
                         //  Label value selector for logs
                         {...builder}
+                        start={props.start}
+                        stop={props.stop}
                         dataSourceId={dataSourceId}
                         logsResponse={logsResponse}
                         setLabelsString={setLabelsString}
@@ -257,6 +263,8 @@ export const FormBuilder = (props: any) => {
                 {...builder}
                 setBuilders={setBuilders}
                 dataSourceId={dataSourceId}
+                start={props.start}
+                stop={props.stop}
                 labelsString={handleMetricType(
                     builder,
                     labelsString,
@@ -271,13 +279,15 @@ export const FormBuilder = (props: any) => {
     );
 };
 export interface MetricSelectorProps {
+    start: Date;
+    stop: Date;
     theme: any;
     dataSourceId: string;
     onMetricChange(e: any): void;
 }
 export const MetricsSelector = (props: MetricSelectorProps) => {
-    const { dataSourceId, theme, onMetricChange } = props;
-    const metricsOpts = useValuesFromMetrics(dataSourceId);
+    const { dataSourceId, theme, onMetricChange, start, stop } = props;
+    const metricsOpts = useValuesFromMetrics(dataSourceId, start, stop);
     return (
         <InputSelect
             isMulti={false}

diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/LabelValueForm.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/LabelValueForm.tsx
@@ -4,8 +4,8 @@ import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
 import { OPERATOR_OPTIONS } from "./consts";
 import { LabelValueContStyles, FlexCenter, IconStyle } from "./styles";
 import { cx } from "@emotion/css";
-import {  useValueSelectOpts } from "./hooks";
-import useTheme from '@ui/theme/useTheme';
+import { useValueSelectOpts } from "./hooks";
+import useTheme from "@ui/theme/useTheme";
 import { InputSelect } from "./InputSelect";
 import sanitizeWithSigns from "@ui/helpers/sanitizeWithSigns";