diff --git a/packages/main/plugins/Cardinality/DayPicker.tsx b/packages/main/plugins/Cardinality/DayPicker.tsx index 10b09a07..a0d00483 100644 --- 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 index 848c6577..a0363d45 100644 --- 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 index 35bab628..b8c31845 100644 --- 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 new file mode 100644 index 00000000..e9094313 --- /dev/null +++ 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 ( +
+ +
+ ); +}; + +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 index 5b92cd2e..dcff3d7f 100644 --- 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 index 5202aa61..b86b94cd 100644 --- 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 ; } diff --git a/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts b/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts index f3b2e046..9365cbb1 100644 --- 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 index f6d152d5..2e054b14 100644 --- 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 index c80369db..8b69ceda 100644 --- 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} /> { { {...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 ( { labelValuesLength, id, dataSourceId, + start, + stop, } = props; - const optRef = useRef(null); const operatorRef = useRef(null); const valueRef = useRef(null); - const mainTheme = useTheme() + const mainTheme = useTheme(); - const [localKeyVal, setLocalKeyVal] = useState(keyVal); const [labelValue, setLabelValue] = useState( labelOpts[0] || { label: "Select Option", value: "" } ); - - const {logsResponse:valueSelectOpts} = useLogLabelValues(dataSourceId,labelValue.value) + + const { logsResponse: valueSelectOpts } = useLogLabelValues( + dataSourceId, + labelValue.value, + start, + stop + ); const [operatorValue, setOperatorValue] = useState({ label: "=", @@ -105,9 +110,8 @@ export const LogLabelValueForm = (props: any) => { return false; }, [operatorValue.value]); - - if(labelValuesLength > 0) { - return ( + if (labelValuesLength > 0) { + return (
{ />
@@ -165,7 +169,5 @@ export const LogLabelValueForm = (props: any) => { ); } - return null + return null; }; - - diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx index 18c74c85..f33a1284 100644 --- a/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx +++ b/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx @@ -1,3 +1,4 @@ +import { useMemo } from "react"; import { cx } from "@emotion/css"; import { ThemeProvider, useTheme } from "@emotion/react"; import { useCallback, useEffect, useState } from "react"; @@ -59,8 +60,14 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) { } = props; const dataSources = useSelector((store: any) => store.dataSources); - const start = useSelector((store: any) => store.start); - const stop = useSelector((store: any) => store.stop); + const start = useMemo(() => { + return new Date(props.data?.start); + }, [props?.data?.start]); + + const stop = useMemo(() => { + return new Date(props.data?.stop); + }, [props?.data?.stop]); + const [editorValue, setEditorValue] = useState(queryInit("")); const { logsResponse } = useLogLabels( dataSourceId, @@ -149,6 +156,8 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) { setBuilders={setBuilders} builders={builders} finalQuery={finalQuery} + start={start} + stop={stop} />
diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx index f3753604..c8f43a6a 100644 --- a/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx +++ b/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx @@ -13,12 +13,13 @@ import { initialMetricsBuilder, binaryOperatorOpts } from "./consts"; import queryInit from "@ui/main/components/LabelBrowser/helpers/queryInit"; export function MetricsFormBuilder(props: MetricsFormBuilderProps) { - const { dataSourceId, labelValueChange, searchButton, logsRateButton } = + const { dataSourceId, labelValueChange, searchButton, logsRateButton,data } = props; const dataSources = useSelector((store: any) => store.dataSources); - const start = useSelector((store: any) => store.start); - const stop = useSelector((store: any) => store.stop); + + const start = new Date(data?.start) + const stop = new Date(data?.stop) const [editorValue, setEditorValue] = useState(queryInit("")); @@ -99,6 +100,8 @@ export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
( // here should add the initial metric props.labelValuesState || [{ ...InitialLabelValueState, metric: value }] @@ -105,7 +107,7 @@ export function MetricsLabelValueSelectors(props: any) { * Resets the labels value state into initial value. */ const resetLabelsState = () => { - setLabelValuesState((prev) => [ + setLabelValuesState(() => [ { ...InitialLabelValueState, metric: value }, ]); }; @@ -117,7 +119,7 @@ export function MetricsLabelValueSelectors(props: any) { metricValueChange(metricString); setFinalQuery(metricString); - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [labelValueString, value]); useEffect(() => { @@ -134,7 +136,7 @@ export function MetricsLabelValueSelectors(props: any) { return builder; }); }); - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [labelValuesState]); /** @@ -159,9 +161,12 @@ export function MetricsLabelValueSelectors(props: any) { {labelValuesState?.length > 0 && labelValuesState?.map((keyval, key) => ( store.start) - const stop = useSelector ((store:any)=> store.stop) +export default function useLogLabelValues( + id: string, + label: string, + start, + stop +) { const dataSources = useSelector((store: any) => store.dataSources); const [loading, setLoading] = useState(false); const [response, setResponse] = useState([]); @@ -19,24 +21,20 @@ export default function useLogLabelValues(id: string, label: string) { const url = useMemo(() => { return getValuesUrl(currentDataSource.url, label, timeStart, timeEnd); - }, [currentDataSource.url, timeStart, timeEnd, label]); - const logsResponse = useLogsResponse(response) + const logsResponse = useLogsResponse(response); useEffect(() => { - if(label && label !== '') { + if (label && label !== "") { getApiRequest(currentDataSource, url, setLoading, setResponse); } - - return()=> { - setResponse([]) - setLoading(false) - - } - // eslint-disable-next-line react-hooks/exhaustive-deps + + return () => { + setResponse([]); + setLoading(false); + }; }, [url, currentDataSource]); - return { logsResponse, loading, diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx index f2ff7470..33b9ffee 100644 --- a/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx +++ b/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx @@ -4,10 +4,8 @@ import { useSelector } from "react-redux"; import moment from "moment"; import { getHeaders } from "../helpers"; -export function useMetricsList(id: string, value: string) { +export function useMetricsList(id: string, value: string, 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 { @@ -19,7 +17,7 @@ export function useMetricsList(id: string, value: string) { const [metricNames, setMetricNames] = useState([]); const dataSource = useMemo(() => { - return dataSources.find((f:any) => f.id === id); + return dataSources.find((f: any) => f.id === id); }, [dataSources, id]); const valueFormatter = useMemo(() => { @@ -56,7 +54,6 @@ export function useMetricsList(id: string, value: string) { apiRequest(); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [dataSource, timeParams.end, timeParams.start, valueFormatter]); return useMemo(() => { @@ -68,7 +65,7 @@ export function useMetricsList(id: string, value: string) { metricKeys.forEach((metricKey) => { if ( !metricSelect[metricKey]?.some( - (s:any) => s === metric[metricKey] + (s: any) => s === metric[metricKey] ) ) { metricSelect[metricKey] = [ diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/renderers/index.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/renderers/index.tsx index c583b462..dad83dc9 100644 --- a/packages/main/src/components/DataViews/components/QueryBuilder/renderers/index.tsx +++ b/packages/main/src/components/DataViews/components/QueryBuilder/renderers/index.tsx @@ -19,8 +19,8 @@ import { OperationsManager } from "../builders/OperationsManager"; /// it renders the label = value selectors /** * Sets a default Logs Volume operation - * @param query - * @returns + * @param query + * @returns */ const setOperationForLogsVolume = (query: string) => { @@ -38,6 +38,8 @@ export interface LabelValuesSelectorsProps { setLabelValueString: any; setBuilders: any; index: number; + start: any; + stop: any; } export type LabelValuesSelectorsFn = ( @@ -60,10 +62,12 @@ export const LabelValuesSelectors: LabelValuesSelectorsFn = (props) => { setLabelValueString, setBuilders, index, + start, + stop, } = props; const [labelValuesState, setLabelValuesState] = useState( - props.labelValuesState ||[ {...InitialLabelValueState}] + props.labelValuesState || [{ ...InitialLabelValueState }] ); // manage the labelValuesState at builder scope @@ -85,7 +89,7 @@ export const LabelValuesSelectors: LabelValuesSelectorsFn = (props) => { }; // adds a new labelValue to list, should be at labelValue side - const onAdd = (e: any) => { + const onAdd = () => { setLabelValuesState((prev: Label[]) => { return [...prev, { ...NewLabel, id: nanoid() }]; }); @@ -96,7 +100,7 @@ export const LabelValuesSelectors: LabelValuesSelectorsFn = (props) => { const labelFound = labelValuesState?.some((f) => f.id === e.id); if (labelValuesState?.length === 1 && !labelFound) { setLabelValuesState(() => [e]); - setLabelValueString(() => JSON.stringify([e])); + setLabelValueString(() => JSON.stringify([e])); } const prevState = [...labelValuesState]; @@ -117,9 +121,8 @@ export const LabelValuesSelectors: LabelValuesSelectorsFn = (props) => { useEffect(() => { const labValue = labelValueString || JSON.stringify(""); const logsString = logsToString(JSON.parse(labValue)); - setLabelsString(logsString) + setLabelsString(logsString); setFinalQuery(logsString); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [labelValueString]); // update builder state at label values change @@ -140,16 +143,14 @@ export const LabelValuesSelectors: LabelValuesSelectorsFn = (props) => { return builder; }); }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [labelValuesState]); - /** * * resets the label values state to it's initial value */ const resetLabelsState = () => { - setLabelValuesState(() => [{...InitialLabelValueState}]); + setLabelValuesState(() => [{ ...InitialLabelValueState }]); }; if (Array.isArray(labelValuesState)) { @@ -158,6 +159,8 @@ export const LabelValuesSelectors: LabelValuesSelectorsFn = (props) => { {labelValuesState?.length > 0 && labelValuesState?.map((keyval: any, key: number) => ( { addBinary, setBuilders, index, + start, + stop, } = props; - const { labelSeries } = useLabelSeries(dataSourceId, labelsString); + const { labelSeries } = useLabelSeries( + dataSourceId, + labelsString, + start, + stop + ); const [operations, setOperations] = useState(props.operations || []); useEffect(() => { if (labelValueString !== "") { - let res = OperationsManager(labelValueString, operations); + let res = OperationsManager(labelValueString, operations); setFinalQuery(res); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [operations, labelValueString]); // add new operation function @@ -225,7 +234,7 @@ export const OperationFunctions = (props: any) => { setOperatorByType(opType, initialOperator, prev) ); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + [operations, labelSeries, labelsString] ); @@ -240,7 +249,6 @@ export const OperationFunctions = (props: any) => { return builder; }); }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [operations]); return ( diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/styles/index.ts b/packages/main/src/components/DataViews/components/QueryBuilder/styles/index.ts index d16fe77e..3f1b3dcb 100644 --- a/packages/main/src/components/DataViews/components/QueryBuilder/styles/index.ts +++ b/packages/main/src/components/DataViews/components/QueryBuilder/styles/index.ts @@ -27,17 +27,17 @@ export const cStyles = (theme: any, minWidth: number, flexOne?: boolean) => ({ fontSize: "12px", color: theme.contrast, }), - indicatorSeparator: (base: any) => ({ + indicatorSeparator: () => ({ display: "none", }), - dropdownIndicator: (base: any) => ({ + dropdownIndicator: () => ({ padding: 0, svg: { height: 12, }, color: theme.contrast, }), - clearIndicator: (base: any) => ({ + clearIndicator: () => ({ padding: 0, svg: { height: 12, @@ -93,7 +93,7 @@ export const InitialAddStyle = (theme: any) => css` color: ${theme.contrast}; padding: 0px 12px; border-radius: 3px; - height: 28px; + height: 26px; small { font-size: 12px; margin: 0; @@ -111,12 +111,14 @@ export const FlexWrap = css` flex-wrap: wrap; gap: 4px; margin: 0px 0px; + transition: 0.5s all; `; export const FlexColumn = css` display: flex; flex-direction: column; flex: 1; + transition: 0.5s all; `; export const MetricsContStyle = css` display: flex; diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/types/index.ts b/packages/main/src/components/DataViews/components/QueryBuilder/types/index.ts index 77c04214..0a69f3ac 100644 --- a/packages/main/src/components/DataViews/components/QueryBuilder/types/index.ts +++ b/packages/main/src/components/DataViews/components/QueryBuilder/types/index.ts @@ -28,8 +28,8 @@ export type operator = export interface Operation { id: number; - after_args:string; - prev_args:string; + after_args: string; + prev_args: string; name: string; header: any; range: string; @@ -55,19 +55,21 @@ export interface BinaryValue { export interface Builder { operations: any[]; labelsState: any[]; - labelValuesState?: Label[]; + labelValuesState?: Label[]; binaryValue: BinaryValue; logsVolumeQuery: string; builderResult: string; isBinary: boolean; - isMetrics?:boolean; + isMetrics?: boolean; } export interface FormBuilderProps { - type: 'metrics_search' | 'logs_search'; + start: Date; + stop: Date; + type: "metrics_search" | "logs_search"; builders: Builder[]; finalQuery: string; - setBuilders: Function; + setBuilders: any; dataSourceId: string; logsResponse: any; addBinary(idx: number): void; @@ -75,7 +77,7 @@ export interface FormBuilderProps { export interface Label { id: string; - metric?:string; + metric?: string; label: string; operator: operator; values: string[]; @@ -112,8 +114,8 @@ export interface ApiDataSource { export interface GetApiRequestArgs { dataSource: ApiDataSource; url: string; - setLoading: Function; - setResponse: Function; + setLoading: any; + setResponse: any; } export type InitialOperationFn = ( @@ -141,19 +143,20 @@ export interface BinaryOperator { } export interface LogsFormBuilderProps { + data: any; dataSourceId: string; labelValueChange(labelValue: string): void; handleLogsVolumeChange(logsVolumeQuery: string): void; - searchButton:any; - queryInput?:any; + searchButton: any; + queryInput?: any; } export interface MetricsFormBuilderProps { + data: any; dataSourceId: string; - labelValueChange(labelValue:string):void - handleMetricsChange(metric:string):void - searchButton:any; - logsRateButton:any; - queryInput?:any; - -} \ No newline at end of file + labelValueChange(labelValue: string): void; + handleMetricsChange(metric: string): void; + searchButton: any; + logsRateButton: any; + queryInput?: any; +} diff --git a/packages/main/src/components/DataViews/styled.ts b/packages/main/src/components/DataViews/styled.ts index 36fae40e..0b0a4a90 100644 --- a/packages/main/src/components/DataViews/styled.ts +++ b/packages/main/src/components/DataViews/styled.ts @@ -113,6 +113,8 @@ export const ViewHeaderStyled = styled.div` display: flex; flex: 1; align-items: center; + padding:4px; + padding-bottom:8px; span { margin: 0px 3px; .exp { diff --git a/packages/main/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx index 03d8f541..cf3f728b 100644 --- a/packages/main/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx +++ b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx @@ -8,7 +8,7 @@ import { setLeftPanel } from "@ui/store/actions/setLeftPanel"; import { setRightPanel } from "@ui/store/actions/setRightPanel"; import { css, cx } from "@emotion/css"; import { Tooltip } from "@mui/material"; -import useTheme from "@ui/theme/useTheme"; +import useTheme from "@ui/theme/useTheme"; export function panelAction(name: string, value: any) { if (name === "left") { @@ -28,7 +28,6 @@ export default function ShowLabelsButton(props: any) { const { id, browserOpen } = props.data; const open = useMemo(() => browserOpen, [browserOpen]); const theme = useTheme(); - const labels = useSelector((store: any) => store.labels); const panelQuery = useSelector((store: any) => store[name]); const [isBrowserOpen, setIsBrowserOpen] = useState(open); @@ -48,7 +47,7 @@ export default function ShowLabelsButton(props: any) { setIsBrowserOpen(open); } - const labelsTitle = (labels: any) => { + const labelsTitle = () => { if (props.labels?.length > 0) { return "Show / Hide Labels"; } @@ -63,7 +62,7 @@ export default function ShowLabelsButton(props: any) { return ( - + = (props) => { const { getLocalQueryItem, getLocalDataSources, setLocalQueryData } = QueryLocalService; - + const { hash } = useLocation(); const dispatch: any = useDispatch(); const saveUrl = localUrl(); @@ -665,8 +665,10 @@ const QueryBar: React.FC = (props) => { if (queryExpr.includes("$__interval")) { isMatrix = true; - const timeDiff = - (data.stop.getTime() - data.start.getTime()) / 1000; + + const timeStart = new Date(data?.start); + const timeStop = new Date(data?.stop); + const timeDiff = (timeStop.getTime() - timeStart.getTime()) / 1000; const timeProportion = timeDiff / 30; const screenProportion = Number( (width / window.innerWidth).toFixed(1) diff --git a/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBarCont.tsx b/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBarCont.tsx index fd0b25ab..025cc999 100644 --- a/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBarCont.tsx +++ b/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBarCont.tsx @@ -3,13 +3,11 @@ import { useSelector } from "react-redux"; import { QueryBarContainer } from "../styled"; import ShowLabelsButton from "../Buttons/ShowLabelsButton"; import QueryEditor from "@ui/plugins/queryeditor"; -import DOMPurify from "isomorphic-dompurify"; import HistoryButton from "../Buttons/HistoryButton"; import ShowLogsRateButton from "../Buttons/ShowLogsRateButton"; import ShowLogsButton from "../Buttons/ShowLogsButton"; type QueryBarContProps = { - //booleans isTabletOrMobile: boolean; isBuilder: boolean; @@ -22,16 +20,16 @@ type QueryBarContProps = { expr: string; queryValue: any; queryHistory: any; - labels:any; + labels: any; //handlers - handleQueryChange: (e:any) => void; - handleInputKeyDown: (e:any) => void; - handleHistoryClick: (e:any) => void; + handleQueryChange: (e: any) => void; + handleInputKeyDown: (e: any) => void; + handleHistoryClick: (e: any) => void; //events - onSubmit: (e:any) => void; - onSubmitRate: (e:any) => void; + onSubmit: (e: any) => void; + onSubmitRate: (e: any) => void; }; const QueryBarCont: React.FC = (props) => { @@ -52,7 +50,7 @@ const QueryBarCont: React.FC = (props) => { } = props; const isSplit = useSelector((store: any) => store.isSplit); const dType = (type: string) => dataSourceType === type; - + const buttonsHidden = () => !isSplit && dataSourceType !== "flux" && dataSourceType !== "traces"; diff --git a/packages/main/src/components/LabelBrowser/components/QuerySetting.tsx b/packages/main/src/components/LabelBrowser/components/QuerySetting.tsx index ff9e4c63..76a4ab6d 100644 --- a/packages/main/src/components/LabelBrowser/components/QuerySetting.tsx +++ b/packages/main/src/components/LabelBrowser/components/QuerySetting.tsx @@ -1,4 +1,4 @@ -import { Dialog, Switch } from "@mui/material"; +import { Dialog } from "@mui/material"; import { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useLocation } from "react-router-dom"; @@ -20,6 +20,7 @@ import { import CloseIcon from "@mui/icons-material/Close"; import QueryLimit from "../../QueryTypeBar/components/QueryLimit"; import { DialogStyles } from "@ui/plugins/settingsdialog/SettingsDialog"; +import CustomSwitch from "@ui/qrynui/CustomSwitch/CustomSwitch"; // Query setting dialog menu type QuerySettingProps = { @@ -120,7 +121,7 @@ const QuerySetting: React.FC = (props) => { query.traceQueryType = e; dispatch(panelAction(name, panel)); } - setQueryTraceSwitch((prev: any) => e); + setQueryTraceSwitch(() => e); } function onDirectionSwitchChange(e: any) { // modify query type switch value @@ -198,6 +199,7 @@ const QuerySetting: React.FC = (props) => {
{traceOptions()}
+ {/* Query type switch */} = (props) => { />
+ {/* Direction switch */} = (props) => { />
+ {/* Query Limit input */}
{dataSourceType === "flux" && (
Chart View -
)} @@ -231,24 +234,18 @@ const QuerySetting: React.FC = (props) => {
Timestamp - Query Builder -
diff --git a/packages/main/src/components/LabelBrowser/components/styled.ts b/packages/main/src/components/LabelBrowser/components/styled.ts index 7260119b..946e9388 100644 --- a/packages/main/src/components/LabelBrowser/components/styled.ts +++ b/packages/main/src/components/LabelBrowser/components/styled.ts @@ -13,10 +13,11 @@ export const HistoryIconStyled: any = styled(HistoryIcon)` export const HistoryButtonStyled: any = styled(BtnSmall)` background: none; margin-left: 5px; + padding: 0px 8px; color: ${(props) => props.theme.contrast}; background: ${(props) => props.theme.neutral}; border: 1px solid ${(props) => props.theme.accentNeutral}; - height: 28px; + height: 26px; span { margin-left: 5px; } @@ -31,10 +32,12 @@ export const ShowLabelsBtn: any = styled(BtnSmall)` border: 1px solid ${(props) => props.theme.accentNeutral}; text-overflow: ellipsis; transition: 0.25s all; - padding-left: 6px; + padding: 0px 2px; + padding-right: 8px; + margin-left: 4px; justify-content: flex-start; color: ${({ theme }: any) => theme.contrast}; - height: 28px; + height: 26px; &:hover { background: ${({ theme }: any) => theme.lightNeutral}; } @@ -55,13 +58,12 @@ export const QueryBarContainer: any = styled.div` export const ShowLogsBtn: any = styled(BtnSmall, { shouldForwardProp: (prop) => isPropValid(prop) && prop !== "loading", })` - background: ${(props) => - props.loading ? "#44bcd8" : props.theme.primary}; + background: ${(props) => (props.loading ? "#44bcd8" : props.theme.primary)}; border: 1px solid ${(props) => props.theme.primaryAccent}; color: ${(props) => props.theme.maxContrast}; transition: 0.25s all; justify-content: center; - height: 28px; + height: 26px; margin: 0px 4px; &:hover { background: ${(props) => props.theme.primaryLight}; @@ -85,7 +87,7 @@ export const ShowSettingsBtn: any = styled(BtnSmall)` color: ${(props) => props.theme.contrast}; background: ${(props) => props.theme.neutral}; border: 1px solid ${(props) => props.theme.accentNeutral}; - height: 28px; + height: 26px; span { margin-left: 5px; } diff --git a/packages/main/src/components/LabelsSelector/ValuesList.tsx b/packages/main/src/components/LabelsSelector/ValuesList.tsx index d9e8e90a..7cd3da58 100644 --- a/packages/main/src/components/LabelsSelector/ValuesList.tsx +++ b/packages/main/src/components/LabelsSelector/ValuesList.tsx @@ -6,8 +6,6 @@ import { Loader, LoaderCont, SmallInput } from "./styled"; import { panelAction } from "../QueryTypeBar"; import { decodeQuery } from "../LabelBrowser/helpers/querybuilder"; - - export const selectedStyle = { borderColor: "#11abab", color: "#11abab", @@ -24,8 +22,7 @@ export const LabelValue = (props: any) => { if (isValueSelected || data?.metric === value.name) { return selectedStyle; } else return {}; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isValueSelected, value.selected, data.metric, value.name]); + }, [isValueSelected, value.selected, data.metric, value.name]); useEffect(() => { setIsValueSelected(value.selected); @@ -36,7 +33,7 @@ export const LabelValue = (props: any) => { setIsValueSelected((prev: any) => { isSelected = !prev; - return !prev + return !prev; }); const valueUpdated = { ...value, selected: isSelected }; @@ -56,12 +53,9 @@ export const LabelValue = (props: any) => { export default function ValuesList(props: any) { const dispatch: any = useDispatch(); - const { name, data } = props; - + const { name, data, start, stop } = props; const { dataSourceId } = data; - const start = useSelector ((store:any)=> store.start) - const stop = useSelector ((store:any)=> store.stop) const panelQuery = useSelector((store: any) => store[name]); const [filterState, setFilterState] = useState(""); @@ -89,38 +83,42 @@ export default function ValuesList(props: any) { useEffect(() => { const panel = panelQuery.find((panel: any) => panel.id === data.id); - const label = panel?.labels?.find((label: any)=>label.name === props.label) - const values = label?.values - if (typeof values !== 'undefined') { - setValsSelection(values) + const label = panel?.labels?.find( + (label: any) => label.name === props.label + ); + const values = label?.values; + if (typeof values !== "undefined") { + setValsSelection(values); } - // eslint-disable-next-line react-hooks/exhaustive-deps - },[panelQuery]) + }, [panelQuery]); const valuesFromProps = useMemo(() => { if (props?.data?.labels?.length < 1) { return []; } - const actLabel = props.data.labels.find((f: any) => f.name === props.label); + const actLabel = props.data.labels.find( + (f: any) => f.name === props.label + ); if (!actLabel) { return []; } return actLabel?.values; - // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.data.labels]); const resp = useMemo(() => { if (response?.data?.data?.length > 0) { const panel = panelQuery.find((panel: any) => panel.id === data.id); - const label = panel?.labels?.find((label: any) => label.name === props.label) + const label = panel?.labels?.find( + (label: any) => label.name === props.label + ); const values = label?.values; const valuesMap = new Map(); - values?.forEach((value: any)=>{ + values?.forEach((value: any) => { valuesMap.set(value.name, value); - }) + }); return response?.data?.data?.map((val: any) => ({ label: props.label, name: val, @@ -132,7 +130,6 @@ export default function ValuesList(props: any) { } else { return []; } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [response]); const [valuesState, setValuesState] = useState(resp); @@ -174,7 +171,7 @@ export default function ValuesList(props: any) { label || props.label, null, "=", - 'value' + "value" ); const panel = [...panelQuery]; @@ -201,7 +198,7 @@ export default function ValuesList(props: any) { const onValueClick = (val: any, isAll = false) => { let initialValues: any = []; - if(isAll) { + if (isAll) { setValsSelection([]); } if (valsSelection.length > 0) { @@ -219,9 +216,7 @@ export default function ValuesList(props: any) { }); } }); - } - } else if (!isAll) { initialValues = [...initialValues, { ...val }]; } @@ -286,19 +281,19 @@ export default function ValuesList(props: any) { const onFilterChange = useCallback( (e) => { const value = e.target.value; - setFilterState((prev) => value); + setFilterState(() => value); if (e !== "") { - setFilterValuesState((prev: any) => + setFilterValuesState(() => valuesState.filter((f: any) => f.name.toLowerCase().includes(value.toLowerCase()) ) ); } else { - setFilterValuesState((prev: any) => valuesState); + setFilterValuesState(() => valuesState); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps + [filterState] ); @@ -341,8 +336,7 @@ export function LabelHeader({ filterState, onFilterChange, }: any) { - -// Add here a replace for label with a custom name + // Add here a replace for label with a custom name return ( <> @@ -356,10 +350,7 @@ export function LabelHeader({ onChange={onFilterChange} /> - onClear(label)} - > + onClear(label)}> clear diff --git a/packages/main/src/components/LabelsSelector/index.tsx b/packages/main/src/components/LabelsSelector/index.tsx index bf4c5e6c..d77d3e4c 100644 --- a/packages/main/src/components/LabelsSelector/index.tsx +++ b/packages/main/src/components/LabelsSelector/index.tsx @@ -17,7 +17,12 @@ export default function LabelsSelector(props: any) { const theme = useTheme(); - const { response, loading }: any = useLabels(dataSourceId); + const { response, loading }: any = useLabels( + dataSourceId, + "", + data?.start, + data?.stop + ); const labelsFromProps = useMemo(() => { if (data?.labels?.length > 0) { diff --git a/packages/main/src/components/LabelsSelector/useLabels.ts b/packages/main/src/components/LabelsSelector/useLabels.ts index 8689179e..399e6dc4 100644 --- a/packages/main/src/components/LabelsSelector/useLabels.ts +++ b/packages/main/src/components/LabelsSelector/useLabels.ts @@ -29,10 +29,13 @@ const getTimestamp = (time: any, type: any): any => { )[type]; }; -export default function useLabels(id: any, dataSourceURL = "") { +export default function useLabels( + id: any, + dataSourceURL = "", + start: any, + stop: any +) { const dispatch: any = useDispatch(); - const start = useSelector ((store:any)=> store.start) - const stop = useSelector ((store:any)=> store.stop) const dataSources = useSelector((store: any) => store.dataSources); const currentDataSource = useMemo(() => { @@ -42,7 +45,6 @@ export default function useLabels(id: any, dataSourceURL = "") { } return current; - // eslint-disable-next-line react-hooks/exhaustive-deps }, [id, dataSources]); const [type, setType] = useState(currentDataSource.type || ""); @@ -63,7 +65,6 @@ export default function useLabels(id: any, dataSourceURL = "") { useEffect(() => { setUrl(getUrlFromType(currentDataSource.url, type, timeStart, timeEnd)); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [setUrl, type, currentDataSource]); const [response, setResponse] = useState([]); @@ -142,7 +143,6 @@ export default function useLabels(id: any, dataSourceURL = "") { }; apiRequest(); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [url, currentDataSource]); return { diff --git a/packages/main/src/components/QueryBuilder/Operations/DragAndDropContainer.tsx b/packages/main/src/components/QueryBuilder/Operations/DragAndDropContainer.tsx index 4b26339b..98598964 100644 --- a/packages/main/src/components/QueryBuilder/Operations/DragAndDropContainer.tsx +++ b/packages/main/src/components/QueryBuilder/Operations/DragAndDropContainer.tsx @@ -12,34 +12,34 @@ import { css, cx } from "@emotion/css"; export const OperationsContainerStyles = css` width: 100%; display: flex; - flex-wrap:wrap; + flex-wrap: wrap; `; export interface LabelFilter { - label:string; - operator:string; - value:string; + label: string; + operator: string; + value: string; } export interface BinaryOperation { value: string | number; - bool:boolean; + bool: boolean; } export interface Item { id: number; header: any; body: any; expressions: any[]; - filterText:string; - conversion_function: string, - labelValue: string, + filterText: string; + conversion_function: string; + labelValue: string; labelFilter: LabelFilter; binaryOperation: BinaryOperation; - lineFilter:string; - quantile:string|number - kValue:number; + lineFilter: string; + quantile: string | number; + kValue: number; labels: any[]; - labelOpts:string[]; + labelOpts: string[]; opType: string; } @@ -48,14 +48,16 @@ export interface ContainerState { } export type OperationsContainerProps = { - addBinary(index:number):void + addBinary(index: number): void; operations: any[]; setOperations: (operations: any) => void; }; // OPERATIONS CONTAINER -export const OperationsContainer: FC = (props: any) => { +export const OperationsContainer: FC = ( + props: any +) => { const { operations, setOperations } = props; const moveItem = useCallback((dragIndex: number, hoverIndex: number) => { setOperations((prevCards: Item[]) => @@ -66,14 +68,12 @@ export const OperationsContainer: FC = (props: any) => ], }) ); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const removeItem = useCallback((dragIndex: number) => { setOperations((prevCards: Item[]) => update(prevCards, { $splice: [[dragIndex, 1]] }) ); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const renderCard = useCallback((operation: Item, index: number) => { @@ -97,19 +97,17 @@ export const OperationsContainer: FC = (props: any) => removeItem={removeItem} /> ); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( -
- {operations.map((operation: any, i: number) => - renderCard(operation, i) - )} -
+
+ {operations.map((operation: any, i: number) => + renderCard(operation, i) + )} +
); }; // Drag and drop base provider - diff --git a/packages/main/src/components/QueryBuilder/Operations/OperationStyles.tsx b/packages/main/src/components/QueryBuilder/Operations/OperationStyles.tsx index 747bc9d4..7691f00b 100644 --- a/packages/main/src/components/QueryBuilder/Operations/OperationStyles.tsx +++ b/packages/main/src/components/QueryBuilder/Operations/OperationStyles.tsx @@ -11,7 +11,7 @@ export const OperationContainerStyles = (theme: any) => css` display: flex; justify-content: space-between; align-items: center; - height: 28px; + height: 26px; span { // font-weight: bold; font-size: 12px; diff --git a/packages/main/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx b/packages/main/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx index a61b3acb..e08176a5 100644 --- a/packages/main/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx +++ b/packages/main/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx @@ -8,14 +8,15 @@ import { } from "../hooks"; import { UseLabelSeriesFn } from "../types"; import { getApiRequest } from "../helpers"; + // gets labels from current label selection, matching series export const useLabelSeries: UseLabelSeriesFn = ( dataSourceId: string, - label: string + label: string, + start, + stop ) => { - const start = useSelector ((store:any)=> store.start) - const stop = useSelector ((store:any)=> store.stop) const dataSources = useSelector((store: any) => store.dataSources); const [res, setRes] = useState({}); const [loading, setLoading] = useState(false); diff --git a/packages/main/src/components/QueryBuilder/Operations/types/index.tsx b/packages/main/src/components/QueryBuilder/Operations/types/index.tsx index 58615756..f029b810 100644 --- a/packages/main/src/components/QueryBuilder/Operations/types/index.tsx +++ b/packages/main/src/components/QueryBuilder/Operations/types/index.tsx @@ -7,12 +7,14 @@ export interface LabelSeries { export type UseLabelSeriesFn = ( dataSourceId: string, - label: string + label: string, + start: any, + stop: any ) => LabelSeries; export interface SeriesResponse { status: string; - data: Object[]; + data: any[]; } // Operator Builders diff --git a/packages/main/src/components/QueryItem/QueryItemContainer.tsx b/packages/main/src/components/QueryItem/QueryItemContainer.tsx index f0c3a9fe..230a75e2 100644 --- a/packages/main/src/components/QueryItem/QueryItemContainer.tsx +++ b/packages/main/src/components/QueryItem/QueryItemContainer.tsx @@ -34,10 +34,8 @@ export const StyledTabsCont = (theme: any) => css` `; const iconButtonStyle = { - fontSize: "15px", + fontSize: "18px", cursor: "pointer", - padding: "3px", - marginLeft: "10px", }; export function QueryItemContainer(props: any) { @@ -166,7 +164,7 @@ export function QueryItemContainer(props: any) { ]; } localStorage.setItem("dsSelected", JSON.stringify(newDsLocal)); - + setDataSourceValue(() => optSelected); panelCP.forEach((panelCP: any) => { @@ -272,7 +270,7 @@ export function QueryItemContainer(props: any) { )}
- {(!isEmbed && !isCardinality) && ( + {!isEmbed && !isCardinality && (
- + - + void; + onIdRefUpdate: (e: any) => void; expr: string; isQueryOpen: any; idRef: string; diff --git a/packages/main/src/components/QueryItem/style.tsx b/packages/main/src/components/QueryItem/style.tsx index 659872b5..e5b1b66b 100644 --- a/packages/main/src/components/QueryItem/style.tsx +++ b/packages/main/src/components/QueryItem/style.tsx @@ -2,34 +2,33 @@ import KeyboardArrowRightOutlinedIcon from "@mui/icons-material/KeyboardArrowRig import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined"; import styled from "@emotion/styled"; - export const QueryItemContainerStyled = styled.div` background: ${({ theme }: any) => `${theme.background}`}; color: ${({ theme }: any) => `${theme.contrast}`}; display: flex; - flex-direction:column; + flex-direction: column; border-radius: 3px; margin-bottom: 3px; - padding:5px; + padding: 5px; .query-title { display: flex; align-items: center; } .query-tools-cont { - display:flex; - align-items:center; - justify-content:space-between; - flex-wrap:wrap; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + padding-bottom: 4px; } .query-tools { display: flex; align-items: center; - flex-wrap:wrap; - justify-content:space-between; - flex:1; - gap:2px; - margin-top:4px; - + flex-wrap: wrap; + justify-content: space-between; + flex: 1; + gap: 2px; + margin-top: 4px; } .query-id { font-size: 13px; @@ -37,8 +36,49 @@ export const QueryItemContainerStyled = styled.div` margin-left: 5px; } .query-title-tabs { - display:flex; - align-items:center; + display: flex; + align-items: center; + } + // query sync timestamp button + .sync-btn { + margin: 0px 4px; + margin-right: 10px; + background: ${({ theme }: any) => theme.neutral}; + outline: none; + border: none; + color: ${({ theme }: any) => theme.contrast}; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + cursor: pointer; + transition: 0.2s all; + &:hover { + background: ${({ theme }: any) => theme.lightNeutral}; + } + } + .add-btn { + margin-left: 10px; + background: none; + outline: none; + border: none; + + color: ${({ theme }: any) => theme.contrast}; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + cursor: pointer; + transition: 0.2s all; + &:hover { + background: ${({ theme }: any) => theme.lightNeutral}; + } + &.trash { + margin: 0px; + margin-right: 5px; + } } `; @@ -67,11 +107,11 @@ export const InputGroup = styled.div` align-items: center; select { background: ${(props: any) => props.theme.deep}; - color: ${(props: any) => props.theme.contrast}; + color: ${(props: any) => props.theme.contrast}; border: 1px solid ${(props: any) => props.theme.accentNeutral}; - border-radius:3px; - font-size:12px; - height:26px; + border-radius: 3px; + font-size: 12px; + height: 26px; } `; @@ -85,4 +125,4 @@ export const Label = styled.div` white-space: nowrap; border-radius: 3px 0px 0px 3px; -`; \ No newline at end of file +`; diff --git a/packages/main/src/components/QueryTypeBar/index.tsx b/packages/main/src/components/QueryTypeBar/index.tsx index 169ee521..d3a288a6 100644 --- a/packages/main/src/components/QueryTypeBar/index.tsx +++ b/packages/main/src/components/QueryTypeBar/index.tsx @@ -11,10 +11,12 @@ import { setLeftPanel } from "@ui/store/actions/setLeftPanel"; import { setRightPanel } from "@ui/store/actions/setRightPanel"; import useTheme from "@ui/theme/useTheme"; import PluginRenderer from "@ui/plugins/PluginsRenderer"; +import CustomSwitch from "@ui/qrynui/CustomSwitch/CustomSwitch"; const QueryTypeCont = styled.div` display: flex; padding: 4px; + margin-top: 4px; // background: ${(props: any) => props.theme.shadow}; color: ${(props: any) => props.color}; height: 26px; @@ -204,6 +206,7 @@ export default function QueryTypeBar(props: any) { + Timestamp - Query Builder - Logs Volume - {hasStats && ( Stats Info - )} diff --git a/packages/main/src/components/StatusBar/components/SplitViewButton/index.tsx b/packages/main/src/components/StatusBar/components/SplitViewButton/index.tsx index af60d23d..245377fb 100644 --- a/packages/main/src/components/StatusBar/components/SplitViewButton/index.tsx +++ b/packages/main/src/components/StatusBar/components/SplitViewButton/index.tsx @@ -58,7 +58,7 @@ export default function SplitViewButton({ const left = useSelector((store: any) => store.left); const right = useSelector((store: any) => store.right); const usedSide = useSelector((store: any) => store[side]); - const dispatch:any = useDispatch(); + const dispatch: any = useDispatch(); const isSplitView = useSelector((store: any) => store.isSplit); const splitView = (e: any) => { @@ -93,14 +93,15 @@ export default function SplitViewButton({ ) : ( - + )} ); diff --git a/packages/main/src/components/StatusBar/components/SplitViewButton/styled.ts b/packages/main/src/components/StatusBar/components/SplitViewButton/styled.ts index 46d77efa..d5fc4564 100644 --- a/packages/main/src/components/StatusBar/components/SplitViewButton/styled.ts +++ b/packages/main/src/components/StatusBar/components/SplitViewButton/styled.ts @@ -1,35 +1,35 @@ - -import styled from '@emotion/styled' - +import styled from "@emotion/styled"; export const BtnSmall = styled.button` -padding:3px 12px; -font-size: 12px; -line-height:20px; -cursor:pointer; -user-select: none; -border:none; -border-radius: 3px; -font-weight: 500; -white-space: nowrap; -display:flex; -align-items: center; -` + //padding:0px 12px; + font-size: 12px; + line-height: 20px; + cursor: pointer; + user-select: none; + border: none; + border-radius: 6px; + font-weight: 500; + white-space: nowrap; + display: flex; + align-items: center; +`; export const SplitButton = styled(BtnSmall)` - background: ${(props:any) => props.theme.neutral}; - border:1px solid ${(props:any)=>props.theme.accentNeutral}; - color: ${({ theme }:{ theme:any }) => theme.contrast}; + background: ${(props: any) => props.theme.neutral}; + border: 1px solid ${(props: any) => props.theme.deep}; + color: ${({ theme }: { theme: any }) => theme.contrast}; cursor: pointer; + text-overflow: ellipsis; transition: 0.2s all; - height:26px; + height: 26px; margin: 0px 6px; + padding: 0px 8px; span { margin-left: 4px; - color: ${(props:any) => props.theme.contrast}; + color: ${(props: any) => props.theme.contrast}; } &:hover { - background: ${(props:any) => props.theme.lightNeutral}; + background: ${(props: any) => props.theme.lightNeutral}; } -` \ No newline at end of file +`; diff --git a/packages/main/src/components/StatusBar/components/daterangepicker/index.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/index.tsx index f4340fb2..8a288fc6 100644 --- a/packages/main/src/components/StatusBar/components/daterangepicker/index.tsx +++ b/packages/main/src/components/StatusBar/components/daterangepicker/index.tsx @@ -149,6 +149,12 @@ export function DateRangePickerMain(props: DateRangePickerProps) { } = props; const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1013px)" }); const isSplit = useSelector((store:any)=> store.isSplit); + + const isFullWidth = useMemo(() => { + return !isTabletOrMobile && !isSplit + },[isTabletOrMobile, isSplit]); + + const theme = useTheme(); const defaultRange = { label: 'Last 5 minutes', @@ -374,12 +380,13 @@ export function DateRangePickerMain(props: DateRangePickerProps) { return (
- {(!isTabletOrMobile && !isSplit) && ( + {(isFullWidth) && ( <> { adjustTimeRange("backward"); }} + side={'left'} attachedside={"r"} emptySide={"l"} className={cx(DTStyles)} @@ -389,6 +396,7 @@ export function DateRangePickerMain(props: DateRangePickerProps) { @@ -449,12 +458,13 @@ export function DateRangePickerMain(props: DateRangePickerProps) { - {(!isTabletOrMobile && !isSplit) && ( + {(isFullWidth) && ( <> { adjustTimeRange("forward"); }} + side={'right'} attachedside={"l"} className={cx(DTStyles)} > diff --git a/packages/main/src/components/StatusBar/styled.ts b/packages/main/src/components/StatusBar/styled.ts index 4c37fd1c..b1babf04 100644 --- a/packages/main/src/components/StatusBar/styled.ts +++ b/packages/main/src/components/StatusBar/styled.ts @@ -93,17 +93,17 @@ export const ApiSelectorButton = styled(BtnSmall)` color: ${(props: any) => props.theme.contrast}; text-overflow: ellipsis; transition: 0.2s all; - display:flex; - align-items:center; + display: flex; + align-items: center; height: 26px; &:hover { background: ${(props: any) => props.theme.lightNeutral}; } span { - margin:0; - padding:0; + margin: 0; + padding: 0; @media screen and (max-width: 565px) { - display: none; + display: none; } } `; @@ -118,15 +118,33 @@ export const ApiSelectorInput = styled(InputSmall)` } `; +// we should use central , lef and right properties in here -export const DatePickerButton: any = styled(BtnSmall)` +export const DatePickerButton: any = styled.button` + display: flex; + align-items: center; + font-size: 12px; + cursor: pointer; + user-select: none; + border: none; + border-radius: ${(props: any) => { + switch (props.side) { + case "central": + return "0px"; + case "left": + return "10px 0px 0px 10px"; + case "right": + return "0px 10px 10px 0px"; + case "individual": + return "10px"; + } + }}; + padding: 0px 6px; + white-space: nowrap; background: ${(props: any) => props.theme.neutral}; - border: 1px solid ${(props: any) => props.theme.accentNeutral}; + border: 1px solid ${(props: any) => props.theme.deep}; color: ${(props: any) => props.theme.contrast}; - border-radius: 3px; height: 26px; - margin:0px 1px; - padding: ${(props: any) => props.size === 'small' ? '3px 5px' : ''}; span { margin-left: 5px; } @@ -140,7 +158,8 @@ export const DatePickerButton: any = styled(BtnSmall)` `; export const UrlCopyButton: any = styled(DatePickerButton)` background: ${(props: any) => props.theme.neutral}; - color: ${({ isActive, theme }: any) => (isActive ? "orange" : theme.contrast)}; + color: ${({ isActive, theme }: any) => + isActive ? "orange" : theme.contrast}; cursor: ${({ isActive }: any) => (isActive ? "pointer" : "not-allowed")}; text-overflow: ellipsis; transition: 0.2s all; @@ -149,11 +168,10 @@ export const UrlCopyButton: any = styled(DatePickerButton)` margin-left: 4px; color: ${(props: any) => props.theme.contrast}; @media screen and (max-width: 565px) { - display: none; - } + display: none; + } } &:hover { background: ${(props: any) => props.theme.lightNeutral}; } - -`; \ No newline at end of file +`; diff --git a/packages/main/theme/light.tsx b/packages/main/theme/light.tsx index 8fb44f2e..60f20f36 100644 --- a/packages/main/theme/light.tsx +++ b/packages/main/theme/light.tsx @@ -1,5 +1,5 @@ import { colors } from "./colors"; -import {type QrynTheme, type QrynColors } from "./types"; +import { type QrynTheme, type QrynColors } from "./types"; import { createTheme } from "@mui/material"; const defaultTheme = createTheme(); @@ -18,14 +18,14 @@ export const light: QrynColors = { // text accent: colors.orange.or100, // hsl(39, 100%, 50%) accent // input bg, negative space - deep: colors.white.w100, // hsl(0, 0%, 7%) deep + deep: colors.white.w300, // hsl(0, 0%, 7%) deep ultraDeep: "#fff", // #111111 ultraDeep // primary (colored) primary: colors.turquoise.tq200, // hsl(180, 62%, 28%) primary primary primaryLight: colors.turquoise.tq300, //hsl(180, 62%, 44%) primaryLight primaryAccent: colors.turquoise.tq1, // hsl(181, 98%, 21%) primaryAccent // neutral colors (button default colors) - neutral: colors.white.w100, // hsl(0, 0%, 28%) neutral + neutral: colors.white.w200, // hsl(0, 0%, 28%) neutral lightNeutral: colors.white.w700, // hsla(0, 0%, 48%, 0.333) lightNeutral accentNeutral: colors.lightgrey.lg100, //hsl(0, 0%, 36%) accentNeutral contrastNeutral: colors.lightgrey.lg400, //hsl(0, 0%, 68%) alphaNeutral, diff --git a/packages/main/theme/styles/Button.ts b/packages/main/theme/styles/Button.ts index 0788d972..9e9ebb67 100644 --- a/packages/main/theme/styles/Button.ts +++ b/packages/main/theme/styles/Button.ts @@ -1,7 +1,7 @@ import styled from "@emotion/styled"; export const BtnSmall = styled.button` - padding: 3px 12px; + padding: 0px 8px; font-size: 12px; line-height: 20px; cursor: pointer; diff --git a/packages/main/views/DataSources/styles.ts b/packages/main/views/DataSources/styles.ts index 3fdb6d9f..c2dd228a 100644 --- a/packages/main/views/DataSources/styles.ts +++ b/packages/main/views/DataSources/styles.ts @@ -89,7 +89,7 @@ export const PageContainer: any = styled.div` padding: 10px 20px; border: 1px solid ${({ theme }: any) => theme.accentNeutral}; border-radius: 3px; - height:fit-content; + height: fit-content; .title { font-size: 14px; padding: 10px 0px; @@ -109,7 +109,7 @@ export const Label: any = styled.div` border-radius: 3px 0px 0px 3px; display: flex; align-items: center; - height: 28px; + height: 26px; `; export const Input: any = styled.input` @@ -226,7 +226,7 @@ export const DsButtonStyled: any = styled(BtnSmall)` transition: 0.25s all; justify-content: center; padding: 3px 12px; - height: 28px; + height: 26px; display: flex; &:hover { background: ${({ theme }: any) => theme.primaryLight}; diff --git a/packages/main/views/DataSources/ui/Icon.tsx b/packages/main/views/DataSources/ui/Icon.tsx index 2e2ed5ce..8cf5dbbc 100644 --- a/packages/main/views/DataSources/ui/Icon.tsx +++ b/packages/main/views/DataSources/ui/Icon.tsx @@ -11,7 +11,7 @@ const Icons: any = { export const Icon = ({ icon, style }: any) => { return ( props.primary ? props.theme.primary : props.theme.neutral}; - border: 1px solid ${({theme}: any) => theme.accentNeutral}; - color: ${({theme}: any) => theme.maxContrast}; + border: 1px solid ${({ theme }: any) => theme.accentNeutral}; + color: ${({ theme }: any) => theme.maxContrast}; margin-left: 5px; transition: 0.25s all; justify-content: center; padding: 3px 12px; - height: 28px; + height: 26px; display: ${({ editing }: any) => (editing ? "flex" : "none")}; &:hover { - background: ${({theme}: any) => theme.primaryLight}; + background: ${({ theme }: any) => theme.primaryLight}; } &:disabled { - background: ${({theme}: any) => theme.neutral}; - border: 1px solid ${({theme}: any) => theme.accentNeutral}; + background: ${({ theme }: any) => theme.neutral}; + border: 1px solid ${({ theme }: any) => theme.accentNeutral}; cursor: not-allowed; - color: ${({theme}: any) => theme.contrast}; + color: ${({ theme }: any) => theme.contrast}; } @media screen and (max-width: 1070px) { - display: ${(props: any) => props.isMobile ? "flex" : "none"}; + display: ${(props: any) => (props.isMobile ? "flex" : "none")}; margin: 0; } diff --git a/packages/main/views/Main/MainStatusBar.tsx b/packages/main/views/Main/MainStatusBar.tsx index 7b3a7652..d0293346 100644 --- a/packages/main/views/Main/MainStatusBar.tsx +++ b/packages/main/views/Main/MainStatusBar.tsx @@ -1,6 +1,5 @@ import { css, cx } from "@emotion/css"; - import PluginRenderer from "@ui/plugins/PluginsRenderer"; import MainMenu from "@ui/plugins/settingsmenu/MainMenu"; import useTheme from "@ui/theme/useTheme"; @@ -16,31 +15,34 @@ const StatusBarStyles = (theme: QrynTheme) => css` align-items: center; border-bottom: 1px solid ${theme.accentNeutral}; .logo-section { + padding-top: 4px; margin: 0; .version { color: ${theme.contrast}; font-size: 10px; margin-left: 5px; + margin-top: 4px; } .path { color: ${theme.contrast}; + + margin-top: 4px; margin-left: 20px; flex: 1; font-weight: bold; text-transform: uppercase; - font-size: 11px; + font-size: 10px; letter-spacing: 1px; .bread-link { cursor: pointer; &:hover { - color: ${theme.primary} + color: ${theme.primary}; } } } } `; - const MainStatusBar = () => { const theme = useTheme(); @@ -49,8 +51,9 @@ const MainStatusBar = () => {
Qryn View

{import.meta.env.VITE_APP_VERSION}

diff --git a/packages/main/views/ScreenLoader.tsx b/packages/main/views/ScreenLoader.tsx index a020d646..dba69fa8 100644 --- a/packages/main/views/ScreenLoader.tsx +++ b/packages/main/views/ScreenLoader.tsx @@ -1,6 +1,7 @@ -import useTheme from "@ui/theme/useTheme" +import useTheme from "@ui/theme/useTheme"; import { cx } from "@emotion/css"; import { QrynLogo } from "./DataSources/ui"; + import { LoaderCont, LogoCont, diff --git a/packages/main/views/User/UserRoles.tsx b/packages/main/views/User/UserRoles.tsx index 476b1249..fa68f483 100644 --- a/packages/main/views/User/UserRoles.tsx +++ b/packages/main/views/User/UserRoles.tsx @@ -2,7 +2,7 @@ import { useMemo, useState } from "react"; import { cx, css } from "@emotion/css"; import useTheme from "@ui/theme/useTheme"; import { nanoid } from "nanoid"; -import Avatar from '@mui/material/Avatar'; +import Avatar from "@mui/material/Avatar"; import CookieIcon from "@mui/icons-material/Cookie"; import { useCookies } from "react-cookie"; import { Switch } from "@mui/material"; @@ -140,7 +140,7 @@ const UserRolesStyles = (theme: any) => css` border-radius: 3px; background: ${theme.deep}; color: ${theme.contrast}; - height: 28px; + height: 26px; font-size: 12px; } @@ -197,9 +197,9 @@ const UserSelected = (theme: any, selected: boolean) => css` } `; -const QrynAvatar = ({name}:{name:string}) => ( - {sliceAvatar(name)} -) +const QrynAvatar = ({ name }: { name: string }) => ( + {sliceAvatar(name)} +); type UserRowProps = { user: User; @@ -254,7 +254,6 @@ const UserRow: React.FC = (props) => { const onUserConfirm = (e: any) => { if (e.key === "Enter") { - setUserEdit(() => false); } }; @@ -269,9 +268,8 @@ const UserRow: React.FC = (props) => {
{!userEdit ? (
- - - + + {name}
) : ( @@ -360,11 +358,9 @@ const UserRows: React.FC = () => { }, ] ); -// eslint-disable-next-line + // eslint-disable-next-line const [cookie, setCookie] = useCookies(["user-cookie"]); - - const onUserAdd = () => { setUsers((prev: User[]) => { let usersUpdated: User[] = [ @@ -384,8 +380,8 @@ const UserRows: React.FC = () => { }); }; - const onUserSelect = (e:any, data: User) => { - e.preventDefault() + const onUserSelect = (e: any, data: User) => { + e.preventDefault(); setUsers((prev: User[]) => { let newUs = [...prev]; @@ -406,7 +402,7 @@ const UserRows: React.FC = () => { }; const onUserRemove = (e: any, id: string) => { - e.preventDefault() + e.preventDefault(); const prev = [...users]?.filter((f: User) => f.id !== id); // if user removed is currentuser, go back to admin @@ -420,7 +416,7 @@ const UserRows: React.FC = () => { }; const onUserChange = (e: any, data: User) => { - e.preventDefault() + e.preventDefault(); let prev = [...users]; let newUsers = prev?.map((user: User) => { @@ -439,7 +435,7 @@ const UserRows: React.FC = () => { }; const onUserCookie = (e: any, data: User) => { - e.preventDefault() + e.preventDefault(); try { setCookie("user-cookie", btoa(JSON.stringify(data))); } catch (e) {