From b10380f1626ae698c1672ad646e2c99ff2297a9d Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 9 Jan 2024 15:45:19 +0100 Subject: [PATCH 1/2] fix: rm unused files --- .../Browser/MobileTopQueryMenuCont.tsx | 119 -- packages/main/sections/Browser/QueryBar.tsx | 1024 ----------------- .../main/sections/Browser/QueryBarCont.tsx | 86 -- packages/main/sections/Browser/QueryLimit.tsx | 47 - .../main/sections/Browser/QueryOptions.tsx | 251 ---- .../main/sections/Browser/QueryResolution.tsx | 28 - .../main/sections/Browser/QuerySetting.tsx | 239 ---- .../main/sections/Browser/QueryTypeSwitch.tsx | 93 -- packages/main/sections/Browser/actions.tsx | 21 - packages/main/sections/Browser/consts.tsx | 24 - packages/main/sections/Browser/helpers.tsx | 40 - packages/main/sections/Browser/index.tsx | 25 - packages/main/sections/Browser/styles.tsx | 259 ----- .../src/components/QueryTypeBar/index.tsx | 4 +- 14 files changed, 3 insertions(+), 2257 deletions(-) delete mode 100644 packages/main/sections/Browser/MobileTopQueryMenuCont.tsx delete mode 100644 packages/main/sections/Browser/QueryBar.tsx delete mode 100644 packages/main/sections/Browser/QueryBarCont.tsx delete mode 100644 packages/main/sections/Browser/QueryLimit.tsx delete mode 100644 packages/main/sections/Browser/QueryOptions.tsx delete mode 100644 packages/main/sections/Browser/QueryResolution.tsx delete mode 100644 packages/main/sections/Browser/QuerySetting.tsx delete mode 100644 packages/main/sections/Browser/QueryTypeSwitch.tsx delete mode 100644 packages/main/sections/Browser/actions.tsx delete mode 100644 packages/main/sections/Browser/consts.tsx delete mode 100644 packages/main/sections/Browser/helpers.tsx delete mode 100644 packages/main/sections/Browser/index.tsx delete mode 100644 packages/main/sections/Browser/styles.tsx diff --git a/packages/main/sections/Browser/MobileTopQueryMenuCont.tsx b/packages/main/sections/Browser/MobileTopQueryMenuCont.tsx deleted file mode 100644 index 5f2c4fd7..00000000 --- a/packages/main/sections/Browser/MobileTopQueryMenuCont.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { Switch } from "@mui/material"; -import { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import HistoryButton from "../../qryn-ui/Buttons/HistoryButton"; -import ShowLabelsButton from "../../qryn-ui/Buttons/ShowLabelsButton"; -import ShowLogsButton from "../../qryn-ui/Buttons/ShowLogsButton"; -import ShowLogsRateButton from "../../qryn-ui/Buttons/ShowLogsRateButton"; -import ShowQuerySettingsButton from "../../qryn-ui/Buttons/ShowQuerySettingsButton"; -import { panelAction } from "./helpers"; -import { MobileTopQueryMenu, SettingLabel } from "./styles"; - -// mobile top query view (mobile view or splitted view) -export const MobileTopQueryMenuCont = (props: any) => { - const dispatch: any = useDispatch(); - const { - isSplit, - showQuerySettings, - queryHistory, - handleHistoryClick, - queryValid, - onSubmit, - onSubmitRate, - data, - name, - loading, - hasStats, - showStatsOpen, - handleStatsOpen, - } = props; - const { id, dataSourceType } = data; - const [isChartViewSet, setIsChartViewSet] = useState(props.data.chartView); - - useEffect(() => { - setIsChartViewSet(props.data.chartView); - }, [setIsChartViewSet, props.data.chartView]); - - const panelQuery = useSelector((store: any) => store[name]); - - const withLabels = (type: any) => { - if (type !== "flux" && type !== "metrics" && type !== "traces") { - return ( - <> - - - - ); - } - return null; - }; - const getPanelQueryByID = (panel: any, queryId: any) => { - return panel.find((query: any) => { - return query.id === queryId; - }); - }; - const handleChartViewSwitch = () => { - // modify table view switch value - const panel = [...panelQuery]; - - const query = getPanelQueryByID(panel, id); - if (typeof query !== "undefined") { - query.chartView = !isChartViewSet; - - dispatch(panelAction(name, panel)); - } - }; - return ( - - {withLabels(dataSourceType)} - - {dataSourceType === "logs" && ( - - )} - - {dataSourceType === "logs" && hasStats && isSplit && ( -
- Show Stats - -
- )} - - - - {dataSourceType === "flux" && ( -
- Chart View - -
- )} - - ); -}; diff --git a/packages/main/sections/Browser/QueryBar.tsx b/packages/main/sections/Browser/QueryBar.tsx deleted file mode 100644 index d2cf6572..00000000 --- a/packages/main/sections/Browser/QueryBar.tsx +++ /dev/null @@ -1,1024 +0,0 @@ -/**React */ -import React, { useState, useEffect, useMemo } from "react"; -import { useLocation } from "react-router-dom"; -import { useSelector, useDispatch } from "react-redux"; -/**npm */ -import { cx } from "@emotion/css"; -import { ThemeProvider } from "@emotion/react"; -import { useMediaQuery } from "react-responsive"; -import { Switch } from "@mui/material"; -import { MobileTopQueryMenuCont } from "./MobileTopQueryMenuCont"; -import { QueryBarCont } from "./QueryBarCont"; -import getData from "@ui/store/actions/getData"; -import setQueryHistory from "@ui/store/actions/setQueryHistory"; -import setHistoryOpen from "@ui/store/actions/setHistoryOpen"; -import setLinksHistory from "@ui/store/actions/setLinksHistory"; -import setIsEmptyView from "@ui/store/actions/setIsEmptyView"; -import { setDataSources, setSplitView } from "@ui/store/actions"; -import localService from "../../services/localService"; -import localUrl from "../../services/localUrl"; -import ShowLogsButton from "../../qryn-ui/Buttons/ShowLogsButton"; -import ShowLogsRateButton from "../../qryn-ui/Buttons/ShowLogsRateButton"; -import queryInit, { onQueryValid, panelAction } from "./helpers"; -import QueryOptions from "./QueryOptions"; -import { QuerySetting } from "./QuerySetting"; -import { defaultDataSources } from "../../views/DataSources/store/defaults"; -import TracesSearch from "@ui/main/components/TraceSearch/TraceSearch"; -import TracesSwitch from "@ui/main/components/TraceSearch/TracesSwitch"; -import { maxWidth, SettingLabel } from "./styles"; -import MetricsSearch from "@ui/main/components/DataViews/components/Metrics/MetricsSearch"; -import useTheme from "@ui/theme/useTheme"; -import LogsSearch from "@ui/main/components/DataViews/components/Logs/LogsSearch/LogsSearch"; -import sanitizeWithSigns from "../../helpers/sanitizeWithSigns"; - -/** - * - * @param props - * @returns The Main Query bar component - */ -export const QueryBar = (props: any) => { - const { data, name, width } = props; - const { - queryType, - limit, - id, - dataSourceType, - direction, - dataSourceId, - splitted, - // dataSourceURL, - } = data; - const { - data: { - loading, - hasStats, - isShowStats, - isBuilder, - isLogsVolume, - logsVolumeQuery, - }, - } = props; - - const { hash } = useLocation(); - const dispatch: any = useDispatch(); - const saveUrl = localUrl(); - const historyService = localService().historyStore(); - const theme = useTheme(); - const { historyOpen, isEmbed, queryHistory, start, stop } = useSelector( - (store: any) => store - ); - const isSplit = useSelector((store: any) => store.isSplit); - const panelQuery = useSelector((store: any) => store[name]); - const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1070px)" }); - const [queryInput, setQueryInput] = useState(data.expr); - const [queryValid, setQueryValid] = useState(false); - const [queryValue, setQueryValue] = useState(queryInit(data.expr)); - const [traceQueryType, setTraceQueryType] = useState("traceId"); - const [labels] = useState([]); - // eslint-disable-next-line - const [traceSearch, setTraceSearch] = useState({}); - const [showStatsOpen, setShowStatsOpen] = useState( - isShowStats || false - ); - const [open, setOpen] = useState(false); - // const [currentDataSource,setCurrentDatasource] = useState({}) - const dataSources = useSelector((store: any) => store.dataSources); - const panelData = useSelector((store: any) => store[name]); - const actLocalQuery = useMemo(() => { - let exprQuery = { expr: "", dataSourceId, queryId: id }; - try { - const localData = - JSON.parse(localStorage.getItem("queryData") || "[]") || []; - if (localData && localData?.length > 0) { - const fromLocal = localData?.find( - (f: any) => - f.dataSourceId === dataSourceId && f.queryId === id - ); - if (fromLocal) { - exprQuery = { ...fromLocal }; - } - return exprQuery; - } else { - return exprQuery; - } - } catch (e) { - console.error(e); - return exprQuery; - } - - }, [dataSourceId]); - - const actLocalDs = useMemo(() => { - try { - const localData = JSON.parse( - localStorage.getItem("dataSources") || "[]" - ); - return localData?.find((f: any) => f.id === dataSourceId); - } catch (e) { - return {}; - } - }, [dataSourceId]); - - const expr = useMemo(() => { - return data.expr; - }, [data.expr]); - - const initialDefault = useMemo(() => { - return defaultDataSources.find((f: any) => f.id === dataSourceId); - }, [dataSourceId]); - - // on init - - const findCurrentDataSource = (dataSources: any, id: string) => { - return dataSources?.find((f: any) => f.id === dataSourceId); - }; - - - - useEffect(() => { - setQueryInput(actLocalQuery.expr); - setQueryValue([ - { children: [{ text: sanitizeWithSigns(actLocalQuery.expr) }] }, - ]); - - setLogsLevel(actLocalQuery.expr, isLogsVolume); - - const dataSource: any = findCurrentDataSource(dataSources, id); - - 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 }; - } - - if (isEmbed) - dispatch( - getData( - dataSourceType, - queryInput, - queryType, - limit, - name, - id, - direction, - dataSourceId, - currentDataSource?.url - ) - ); - - }, []); - - // force single view from small width - - useEffect(() => { - if (isTabletOrMobile && isSplit) { - dispatch(setSplitView(false)); - } - if(!isTabletOrMobile && isSplit) { - dispatch(setSplitView(true)) - } - - }, [isTabletOrMobile]); - - // changes on changin dataSource Id - - useEffect(() => { - setQueryInput(actLocalQuery.expr); - setQueryValue([ - { children: [{ text: sanitizeWithSigns(actLocalQuery.expr) }] }, - ]); - if (isLogsVolume && logsVolumeQuery) { - setLogsLevel(actLocalQuery.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(actLocalQuery?.expr); - if (actLocalQuery.expr !== "" && actLocalQuery.expr?.length > 6) { - dispatch( - getData( - dataSourceType, - actLocalQuery?.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]); - - // changes on changing exp - - useEffect(() => { - if (typeof expr === "string") { - setQueryInput(expr); - setQueryValue([{ children: [{ text: sanitizeWithSigns(expr) }] }]); - saveQuery(); - if (isLogsVolume) { - setLogsLevel(expr, true); - } - } - - }, [expr]); - - useEffect(()=>{ - if(typeof props.launchQuery === "string") { - setQueryInput(props.launchQuery); - setQueryValue([ - { children: [{ text: sanitizeWithSigns(props.launchQuery) }] }, - ]); - saveQuery(); - if (isLogsVolume) { - setLogsLevel(props.launchQuery, true); - } - - } - - // setLogsLevel(launchQuery, isLogsVolume); - - - },[props.launchQuery]) - - useEffect(() => { - setLogsLevel(queryInput, isLogsVolume); - - }, [queryInput]); - - // handlers - - function setLogsLevel(queryInput: string, isLogsVolume: boolean) { - if (isLogsVolume && queryInput !== "") { - // eslint-disable-next-line - let pureLabels = queryInput.match(/[^{\}]+(?=})/g); - if (Array.isArray(pureLabels) && pureLabels?.length > 0) { - let pureLabelsString = `{${pureLabels?.join(",")}}`; - let logsVolumeQuery = `sum by(level) (count_over_time(${pureLabelsString}[$__interval]))`; - onLogVolumeChange(logsVolumeQuery); - } - } - } - - function handleQueryChange(e: any) { - setQueryValue(e); - saveQuery(e); - } - - const handleInputKeyDown = (e: any) => { - if (e.code === "Enter" && e.ctrlKey) { - onSubmit(e); - } - }; - - const onMetricChange = (e: any) => { - const query = [{ children: [{ text: sanitizeWithSigns(e) }] }]; - handleQueryChange(query); - }; - - const onLogChange = (e: any) => { - const query = [{ children: [{ text: sanitizeWithSigns(e) }] }]; - - // at this scope we should do the query change from the - // 'use query' button - - handleQueryChange(query); - }; - - const setQueryTimeInterval = ( - query: string, - width: number, - start: Date | any, - stop: Date | any - ) => { - let querySubmit = ""; - - let customStep = 0; - - if (query.includes(`$__interval`)) { - const timeDiff = (stop.getTime() - start.getTime()) / 1000; - - const timeProportion = timeDiff / 30; - - const screenProportion = Number( - (width / window.innerWidth).toFixed(1) - ); - - const intval = timeProportion / screenProportion; - - const ratiointval = Math.round( - intval * Number(window.devicePixelRatio.toFixed(2)) - ); - - querySubmit = query.replace( - /\[\$__interval\]/, - `[${ratiointval}s]` - ); - customStep = ratiointval; - } else { - querySubmit = query; - } - return { query: querySubmit, customStep }; - }; - - const onLogVolumeChange = (queryString: string) => { - const { query, customStep } = setQueryTimeInterval( - queryString, - width, - start, - stop - ); - saveLogsVolumeQuery({ query, customStep }); - }; - - const onSubmit = (e: any) => { - e.preventDefault(); - const ds: any = dataSources.find((f: any) => f.id === dataSourceId); - if (onQueryValid(queryInput) && ds) { - try { - updateHistory( - ds.type, - queryInput, - queryType, - limit, - id, - direction, - ds.id, - ds.url - ); - - if (isLogsVolume && !logsVolumeQuery) { - setLogsLevel(queryInput, isLogsVolume); - } - - // Decode query to translate into labels selection - decodeQueryAndUpdatePanel(queryInput, true); - - updateLinksHistory(); - - setLocalStorage(); - } catch (e) { - console.error(e); - } - } else { - dispatch(setIsEmptyView(true)); - - console.log("Please make a log query", expr); - } - }; - - const getLocalStorage = () => { - try { - const prevQuery = JSON.parse( - localStorage.getItem("queryData") || "[]" - ); - return prevQuery; - } catch (e) { - return []; - } - }; - - const setLocalStorage = () => { - const queryData = { - expr, - queryId: id, - dataSourceId: dataSourceId, - }; - - const prevData = getLocalStorage(); - let newData = []; - - if ( - prevData && - prevData.length > 0 && - Array.isArray(prevData) && - prevData.some( - (s) => s.dataSourceId === dataSourceId && s.queryId === id - ) - ) { - newData = prevData.map((m) => { - if (m.queryId === id && m.dataSourceId === dataSourceId) { - return { ...queryData }; - } else { - return m; - } - }); - } else { - newData = [...prevData, queryData]; - } - localStorage.setItem("queryData", JSON.stringify(newData)); - }; - - const saveQuery = (e = []) => { - if (e?.length > 0) { - const queryParams = new URLSearchParams(hash.replace(/#/, "")); - const multiline = e - ?.map((text: any) => text.children[0].text) - .join("\n"); - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - if (multiline) { - - query.expr = multiline; - } - } - }); - dispatch(panelAction(name, panel)); - queryParams.set(name, JSON.stringify(panel)); - setLocalStorage(); - } - }; - - const saveLogsVolumeQuery = (logsVolume: { - query: string; - customStep: any; - }) => { - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - if (logsVolume && logsVolume.query !== "") { - query.logsVolumeQuery = { - query: logsVolume.query, - customStep: logsVolume.customStep, - }; - } - } - }); - dispatch(panelAction(name, panel)); - }; - - function addQueryInterval(queryInput: string) { - const isEmptyQuery = queryInput.length === 0; - let query = ""; - if (!isEmptyQuery) { - const isRate = queryInput.startsWith("rate("); - - if (dataSourceType === "metrics") { - if (isRate) { - query = queryInput.replace(/{([^}]+)}/g, "{}"); - query = query.replace(/\[\d+ms\]/, "[$__interval]"); - } else { - query = `rate(${queryInput.replace( - /{([^}]+)}/g, - "{}" - )}[$__interval])`; - } - } else { - if (!isRate) { - query = `rate(${queryInput}[$__interval])`; - } else { - query = queryInput.replace(/\[\d+ms\]/, "[$__interval]"); - } - } - } - return query; - } - - const onSubmitRate = (e: any) => { - e.preventDefault(); - const isEmptyQuery = queryInput.length === 0; - let query = ""; - // check how to update back the query preview - if (!isEmptyQuery) { - query = addQueryInterval(queryInput); - setQueryInput(query); - setQueryValue([ - { children: [{ text: sanitizeWithSigns(query) }] }, - ]); - setQueryValid(onQueryValid(query)); - } - - if (onQueryValid(query)) { - tryUpdateHistory(query); - } - }; - - function tryUpdateHistory(query: string) { - const ds = dataSources.find((f: any) => f.id === dataSourceId); - try { - updateHistory( - ds.type, - query, - queryType, - limit, - id, - direction, - ds.id, - ds.url - ); - updateLinksHistory(); - } catch (e) { - console.error(e); - } - } - - const updateHistory = ( - type: any, - queryInput: any, - queryType: any, - limit: any, - id: any, - direction: any, - dataSourceId: any, - url: any - ) => { - const historyUpdated = historyService.add( - { - data: JSON.stringify({ - type, - queryInput, - queryType, - limit, - direction, - dataSourceId: dataSourceId, - url, - panel: name, - id, - }), - url: window.location.hash, - }, - 10 - ); - - dispatch(setQueryHistory(historyUpdated)); - }; - - const decodeQueryAndUpdatePanel = (queryExpr: any, isSearch: any) => { - const currentDataSource = dataSources.find( - (f: any) => f.id === dataSourceId - ); - const panel = [...panelQuery]; - - dispatch(panelAction(name, panel)); - - let { querySubmit, customStep, isMatrix } = getIntvalData(queryExpr); - - if (isSearch && querySubmit !== "" && querySubmit?.length > 6) { - dispatch( - getData( - dataSourceType, - querySubmit, - queryType, - limit, - name, - id, - direction, - dataSourceId, - currentDataSource.url, - customStep, - isLogsVolume && !isMatrix - ) - ); - } - - // get here if the previous is a matrix type response - if ( - isLogsVolume && - logsVolumeQuery?.query && - logsVolumeQuery?.query !== "" && - !isMatrix - ) { - dispatch( - getData( - dataSourceType, - logsVolumeQuery.query, - queryType, - limit, - name, - id, - direction, - dataSourceId, - currentDataSource.url, - logsVolumeQuery.customStep, - true // isLogsVolume - ) - ); - } - }; - - function getIntvalData(queryExpr: string): { - customStep: number; - querySubmit: string; - isMatrix: boolean; - } { - let querySubmit = ""; - let customStep = 0; - let isMatrix = false; - let matrixType = queryExpr.match(/\((.*?)\)/); - if (matrixType !== null) { - isMatrix = true; - } - - if (queryExpr.includes("$__interval")) { - isMatrix = true; - const timeDiff = (stop.getTime() - start.getTime()) / 1000; - const timeProportion = timeDiff / 30; - const screenProportion = Number( - (width / window.innerWidth).toFixed(1) - ); - const intval = timeProportion / screenProportion; - - const ratiointval = Math.round( - intval * Number(window.devicePixelRatio.toFixed(2)) - ); - querySubmit = queryExpr.replace( - /\[\$__interval\]/, - `[${ratiointval}s]` - ); - customStep = ratiointval; - } else { - querySubmit = queryExpr; - } - - return { customStep, querySubmit, isMatrix }; - } - - const updateLinksHistory = () => { - const ds = dataSources.find((f: any) => f.id === dataSourceId); - const storedUrl = saveUrl.add( - { - data: { - href: window.location.href, - url: ds.url, - type: dataSourceType, - queryInput, - queryType, - limit, - panel: name, - id, - }, - description: "From Query Submit", - }, - 10 - ); - - dispatch(setLinksHistory(storedUrl)); - }; - - function handleHistoryClick(e: any) { - dispatch(setHistoryOpen(!historyOpen)); - } - - function showQuerySettings() { - setOpen(open ? false : true); - } - - function onClose() { - showQuerySettings(); - } - - function onTraceSearchChange(e: any) { - setTraceSearch(() => e); - } - - function handleStatsOpen(e: any) { - const value = e.target.checked; - setShowStatsOpen(() => value); - const prevPanel = JSON.parse(JSON.stringify(panelData)); - - const newPanel = prevPanel?.map((m: any) => { - if (m.id === id) { - return { ...m, isShowStats: value }; - } - return m; - }); - - dispatch(panelAction(name, newPanel)); - } - - const switchTraceQueryType = (e: any) => { - setTraceQueryType(() => e); - }; - - // renderers - - const inlineQueryOptionsRenderer = ( - type: any, - isSplit: any, - isMobile: any, - typeBar: any - ) => { - const isFullView = !isMobile && !isSplit; - const isMetrics = type === "metrics" || type === "logs"; - - if (isFullView && isMetrics && !isSplit) { - return typeBar; - } - return null; - }; - - const querySettingRenderer = ( - isMobile: any, - isSplit: any, - dataSourceType: any, - settingComp: any - ) => { - if ( - isMobile || - isSplit || - dataSourceType !== "flux" || - dataSourceType !== "traces" - ) { - return settingComp; - } - return null; - }; - - if (isEmbed) { - return null; - } - - const queryTypeRenderer = ( - type: any, - traceSearch: any, - querySearch: any, - metricsSearch: any, - logsSearch: any, - showResultButton: any - ) => { - if (type === "traces") { - return ( - <> -
- - {traceQueryType === "traceId" && showResultButton} -
- {traceQueryType === "traceId" && querySearch} - {traceQueryType === "search" && traceSearch} - - ); - } - - if (type === "metrics") { - return ( - <> - {metricsSearch} - {querySearch} - - ); - } - - if (type === "logs") { - return ( - <> - {isBuilder && logsSearch} - {querySearch} - - ); - } - - return querySearch; - }; - - // render - if (isEmbed) { - return null; - } - - return ( -
- - { (dataSourceType !== "metrics" && - dataSourceType !== "traces") && ( - - )} - - {queryTypeRenderer( - dataSourceType, - , - , - - } - logsRateButton={ - - } - statsSwitch={ -
- Show Stats - -
- } - handleMetricValueChange={onMetricChange} - />, - - } - logsRateButton={ - - } - statsSwitch={ -
- Show Stats - -
- } - handleLogValueChange={onLogChange} - handleLogsVolumeChange={onLogVolumeChange} - />, - - )} - - {inlineQueryOptionsRenderer( - dataSourceType, - splitted, - isTabletOrMobile, - - )} - - {querySettingRenderer( - isTabletOrMobile, - splitted, - dataSourceType, - - )} - -
- ); -}; diff --git a/packages/main/sections/Browser/QueryBarCont.tsx b/packages/main/sections/Browser/QueryBarCont.tsx deleted file mode 100644 index b3e69da1..00000000 --- a/packages/main/sections/Browser/QueryBarCont.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react' -import QueryEditor from "@ui/plugins/queryeditor"; -import HistoryButton from "../../qryn-ui/Buttons/HistoryButton"; -import ShowLabelsButton from "../../qryn-ui/Buttons/ShowLabelsButton"; -import ShowLogsButton from "../../qryn-ui/Buttons/ShowLogsButton"; -import ShowLogsRateButton from "../../qryn-ui/Buttons/ShowLogsRateButton"; -import { QueryBarContainer } from "./styles"; -import sanitizeWithSigns from "../../helpers/sanitizeWithSigns" -// query bar container (full view) - - -export const QueryBarCont = (props: any) => { - const { - isSplit, - isTabletOrMobile, - isBuilder, - dataSourceType, - handleQueryChange, - expr, - queryValue, - handleInputKeyDown, - queryHistory, - handleHistoryClick, - queryValid, - onSubmit, - onSubmitRate, - loading, - } = props; - - const buttonsHidden = () => - !isSplit && - !isTabletOrMobile && - dataSourceType !== "flux" && - dataSourceType !== "traces"; - return ( - - {buttonsHidden() && dataSourceType === "logs" && !isBuilder && ( - - )} - {(dataSourceType !== "logs" || !isBuilder) && - dataSourceType !== "metrics" && ( - - )} - - {buttonsHidden() && dataSourceType === "logs" && !isBuilder && ( - <> - - {dataSourceType === "logs" && !isBuilder && ( - - )} - - - )} - {dataSourceType === "traces" && - dataSourceType === "metrics" && - isSplit && ( - <> - - - )} - - ); -}; diff --git a/packages/main/sections/Browser/QueryLimit.tsx b/packages/main/sections/Browser/QueryLimit.tsx deleted file mode 100644 index a32cf552..00000000 --- a/packages/main/sections/Browser/QueryLimit.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useEffect, useState, useMemo } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { Tooltip } from "@mui/material"; -import { panelAction } from "./helpers"; -import { QLInputGroup, QLLabel, Input } from "./styles"; - -export default function QueryLimit(props: any) { - const dispatch: any = useDispatch(); - const { id }: any = props.data; - const { name }: any = props; - const panelQuery = useSelector((store: any) => store[name]); - const [editedValue, setEditedValue] = useState(props.data.limit); - const limitFromProps = useMemo(() => props.data.limit, [props.data.limit]); - - useEffect(() => { - setEditedValue(limitFromProps); - }, [limitFromProps, setEditedValue]); - - function onLimitChange(e: any) { - let limitTxt = e.target.value; - if (limitTxt > 20000) { - limitTxt = 20000; - } - const panel = [...panelQuery]; - - panel.forEach((query) => { - if (query.id === id) { - query.limit = limitTxt; - } - }); - - dispatch(panelAction(name, panel)); - } - - return ( - - Query Limit - - - - - ); -} diff --git a/packages/main/sections/Browser/QueryOptions.tsx b/packages/main/sections/Browser/QueryOptions.tsx deleted file mode 100644 index 5ee838e7..00000000 --- a/packages/main/sections/Browser/QueryOptions.tsx +++ /dev/null @@ -1,251 +0,0 @@ -import { ThemeProvider } from "@emotion/react"; -import { useState, useEffect } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { InputGroup, QueryTypeCont, SettingLabel } from "./styles"; -import { Switch } from "@mui/material"; -import { useLocation } from "react-router-dom"; -import QueryLimit from "./QueryLimit"; -import QueryTypeSwitch from "./QueryTypeSwitch"; -import useTheme from "@ui/theme/useTheme"; -import { panelAction } from "./helpers"; -import { SWITCH_OPTIONS, DIRECTION_SWITCH_OPTIONS, } from "./consts"; - -// Bar with switches: -// query type -// timestamp -// query builder -// direction -// query limit -// logs volume - -export default function QueryOptions(props: any) { - const dispatch: any = useDispatch(); - const { name, data } = props; - - const theme = useTheme(); - const panelQuery = useSelector((store: any) => store[name]); - - const responseType = useSelector((store: any) => store.responseType); - - const { hash } = useLocation(); - const { - id, - queryType, - tableView, - idRef, - isShowTs, - isBuilder, - isLogsVolume, - direction, - dataSourceType, - isShowStats, - hasStats, - } = data; - - const [isTableViewSet, setIsTableViewSet] = useState(tableView); - const [isShowTsSet, setIsShowTsSet] = useState(isShowTs || false); - const [isBuilderSet, setIsBuilderSet] = useState(isBuilder || false); - const [isLogsVolumeSet, setIsLogsVolumeSet] = useState( - isLogsVolume || false - ); - const [isShowStatsSet, setIsShowStatsSet] = useState(isShowStats || false); - const [queryTypeSwitch, setQueryTypeSwitch] = useState(queryType); - const [directionSwitch, setDirectionSwitch] = useState( - direction || "forward" - ); - - useEffect(() => { - const urlParams = new URLSearchParams(hash.replace(/#/, "")); - const urlPanel: any = urlParams.get(name); - - const parsedPanel = JSON.parse(decodeURIComponent(urlPanel) || "[]"); - - if (parsedPanel?.length > 0) { - const queryMD = parsedPanel.find((f: any) => f.idRef === idRef); - - if (queryMD) { - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.idRef === idRef) { - query.queryType = queryMD.queryType; - query.direction = queryMD.direction; - } - }); - dispatch(panelAction(name, panel)); - } - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - useEffect(() => { - setIsTableViewSet(props.data.tableView); - }, [setIsTableViewSet, props.data.tableView]); - useEffect(() => { - setIsShowTsSet(props.data.isShowTs); - }, [setIsShowTsSet, props.data.isShowTs]); - - useEffect(() => { - setIsBuilderSet(props.data.isBuilder); - }, [setIsBuilderSet, props.data.isBuilder]); - - useEffect(() => { - setIsLogsVolumeSet(props.data.isLogsVolume); - }, [setIsLogsVolumeSet, props.data.isLogsVolume]); - - function onSwitchChange(e: any) { - // modify query type switch value - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - query.queryType = e; - } - }); - dispatch(panelAction(name, panel)); - setQueryTypeSwitch(e); - } - - function onDirectionSwitchChange(e: any) { - // modify query type switch value - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - query.direction = e; - } - }); - dispatch(panelAction(name, panel)); - setDirectionSwitch(e); - } - - function handleTableViewSwitch() { - // modify table view switch value - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - query.tableView = isTableViewSet ? false : true; - } - }); - dispatch(panelAction(name, panel)); - } - - function handleShowTsSwitch() { - // modify table view switch value - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - query.isShowTs = isShowTsSet ? false : true; - } - }); - - dispatch(panelAction(name, panel)); - } - - function handleBuilderSwitch() { - // modify table view switch value - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - query.isBuilder = isBuilderSet ? false : true; - } - }); - - dispatch(panelAction(name, panel)); - } - - function handleLogsVolumeSwitch() { - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - query.isLogsVolume = isLogsVolumeSet ? false : true; - } - }); - - dispatch(panelAction(name, panel)); - } - - function handleStatsInfoSwitch(e: any) { - const value = e.target.checked; - setIsShowStatsSet(() => value); - const panel = [...panelQuery]; - panel.forEach((query) => { - if (query.id === id) { - query.isShowStats = isShowStatsSet ? false : true; - } - }); - dispatch(panelAction(name, panel)); - } - - return ( - - - - - - {dataSourceType === "flux" && ( -
- Chart View - -
- )} - {responseType !== "vector" && ( - <> - - Timestamp - - - - Query Builder - - - - Logs Volume - - - {hasStats && ( - - Stats Info - - - )} - - )} - - - ); -} diff --git a/packages/main/sections/Browser/QueryResolution.tsx b/packages/main/sections/Browser/QueryResolution.tsx deleted file mode 100644 index 3c4369c6..00000000 --- a/packages/main/sections/Browser/QueryResolution.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { useState } from "react"; -import { useDispatch } from "react-redux"; -import { DEFAULT_RESOLUTION, RESOLUTION_OPTIONS } from "./consts"; -import { setQueryResolution } from "./actions"; -import { Label, ResSelect } from "./styles"; - -export default function QueryResolution() { - const dispatch: any = useDispatch(); - const [resValue, setResValue]: any = useState(DEFAULT_RESOLUTION.value); - - function handleResChange(e: any): void { - setResValue(parseInt(e.target.value)); - dispatch(setQueryResolution(parseInt(e.target.value))); - } - - return ( - <> - - - {RESOLUTION_OPTIONS.map((res: any, idx: number) => ( - - ))} - - - ); -} diff --git a/packages/main/sections/Browser/QuerySetting.tsx b/packages/main/sections/Browser/QuerySetting.tsx deleted file mode 100644 index 4b47a3fa..00000000 --- a/packages/main/sections/Browser/QuerySetting.tsx +++ /dev/null @@ -1,239 +0,0 @@ -import { Dialog, Switch } from "@mui/material"; -import { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { useLocation } from "react-router-dom"; -import { - InputGroup, - SettingCloseBtn, - SettingCont, - SettingHeader, - SettingLabel, - SettingsInputContainer, -} from "./styles"; -import CloseIcon from "@mui/icons-material/Close"; -import QueryLimit from "./QueryLimit"; -import QueryTypeSwitch from "./QueryTypeSwitch"; -import { DialogStyles } from "@ui/plugins/settingsdialog/SettingsDialog"; -import { - DIRECTION_SWITCH_OPTIONS, - SWITCH_OPTIONS, - TRACE_OPTIONS, -} from "./consts"; -import { panelAction } from "./helpers"; - -// Query setting dialog menu -export const QuerySetting = (props: any) => { - const dispatch: any = useDispatch(); - const responseType = useSelector((store: any) => store.responseType); - const { hash } = useLocation(); - const { id, idRef, dataSourceType, isBuilder } = props.data; - const { open, handleClose, actPanel, name } = props; - const [isTableViewSet, setIsTableViewSet] = useState(props.data.tableView); - const [isShowTsSet, setIsShowTsSet] = useState(props.data.isShowTs); - const [isBuilderSet, setIsBuilderSet] = useState(isBuilder || false); - const [queryTypeSwitch, setQueryTypeSwitch] = useState( - props.data.queryType - ); - const [queryTraceSwitch, setQueryTraceSwitch] = useState( - props.data.traceQueryType || "traceId" - ); - const [directionSwitch, setDirectionSwitch] = useState( - props.data.direction - ); - useEffect(() => { - const urlParams = new URLSearchParams(hash.replace(/#/, "")); - const urlPanel: any = urlParams.get(name); - const parsedPanel = JSON.parse(decodeURIComponent(urlPanel)); - if (parsedPanel?.length > 0) { - const queryMD = parsedPanel.find((f: any) => f.idRef === idRef); - if (queryMD) { - const panel = [...actPanel]; - const query = getPanelQueryByIDRef(panel, idRef); - if (typeof query !== "undefined") { - query.queryType = queryMD.queryType; - query.direction = queryMD.direction; - dispatch(panelAction(name, panel)); - } - } - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - const getPanelQueryByID = (panel: any, queryId: any) => { - return panel.find((query: any) => { - return query.id === queryId; - }); - }; - const getPanelQueryByIDRef = (panel: any, idRef: any) => { - return panel.find((query: any) => { - return query.id === idRef; - }); - }; - useEffect(() => { - setIsTableViewSet(props.data.tableView); - }, [setIsTableViewSet, props.data.tableView]); - - useEffect(() => { - setIsShowTsSet(props.data.isShowTs); - }, [setIsShowTsSet, props.data.isShowTs]); - - useEffect(() => { - setIsBuilderSet(props.data.isBuilder); - }, [setIsBuilderSet, props.data.isBuilder]); - - function onSwitchChange(e: any) { - // modify query type switch value - const panel = [...actPanel]; - const query = getPanelQueryByID(panel, id); - if (typeof query !== "undefined") { - query.queryType = e; - dispatch(panelAction(name, panel)); - } - setQueryTypeSwitch(e); - } - - function onTraceQueryChange(e: any) { - const panel = [...actPanel]; - - const query = getPanelQueryByID(panel, id); - if (typeof query !== "undefined") { - query.traceQueryType = e; - dispatch(panelAction(name, panel)); - } - setQueryTraceSwitch((prev: any) => e); - } - function onDirectionSwitchChange(e: any) { - // modify query type switch value - const panel = [...actPanel]; - const query = getPanelQueryByID(panel, id); - if (typeof query !== "undefined") { - query.direction = e; - dispatch(panelAction(name, panel)); - } - setDirectionSwitch(e); - } - - function handleTableViewSwitch() { - // modify table view switch value - const panel = [...actPanel]; - - const query = getPanelQueryByID(panel, id); - if (typeof query !== "undefined") { - query.tableView = isTableViewSet ? false : true; - - dispatch(panelAction(name, panel)); - } - } - - const traceOptions = () => ( - - ); - - function handleTsSwitch() { - const panel = [...actPanel]; - panel.forEach((query) => { - if (query.id === id) { - query.isShowTs = isShowTsSet ? false : true; - } - }); - - dispatch(panelAction(name, panel)); - } - - function handleBuilderSwitch() { - const panel = [...actPanel]; - panel.forEach((query) => { - if (query.id === id) { - query.isBuilder = isBuilderSet ? false : true; - } - }); - - dispatch(panelAction(name, panel)); - } - - return ( - - - -

Query Options

- - {" "} - {" "} - - - - -
{traceOptions()}
-
- -
-
- -
-
- -
- {dataSourceType === "flux" && ( -
- Chart View - -
- )} - {responseType !== "vector" && ( -
- - Timestamp - - - - Query Builder - - -
- )} - - - - ); -}; diff --git a/packages/main/sections/Browser/QueryTypeSwitch.tsx b/packages/main/sections/Browser/QueryTypeSwitch.tsx deleted file mode 100644 index bc635976..00000000 --- a/packages/main/sections/Browser/QueryTypeSwitch.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import styled from "@emotion/styled"; -import { useEffect, useMemo, useState } from "react"; -const Label: any = styled.div` - color: ${(props: any) => props.theme.contrast}; - background: ${(props: any) => props.theme.shadow}; - display: flex; - align-items: center; - justify-content: center; - font-size: 11px; - white-space: nowrap; - padding: 0px 10px; -`; -const QuerySwitchCont: any = styled.div` - display: flex; - align-items: center; - font-size: 12px; - background-color: ${(props: any) => props.theme.shadow}; - - border: 1px solid ${(props: any) => props.theme.accentNeutral}; - color: ${(props: any) => props.theme.contrast}; - border-radius: 3px; - margin-right: 10px; -`; - -const QuerySwitchBtn: any = styled.div` - cursor: pointer; - display: flex; - align-items: center; - background: ${(props: any) => - props.selected - ? props.theme.neutral - : props.theme.shadow}; - border-left: ${(props: any) => - props.position === "last" - ? `1px solid ${props.theme.accentNeutral}` - : "none"}; - border-right: ${(props: any) => - props.position === "first" - ? `1px solid ${props.theme.accentNeutral}` - : "none"}; - border-radius: ${({ position }: any) => - position === "first" - ? "3px 0px 0px 3px" - : position === "last" - ? "0px 3px 3px 0px" - : "0px"}; - flex: 1; - height: 90%; - - padding: 0px 12px; - font-size: 12px; - line-height: 20px; -`; -const getBtnPos = (key: any, arr: any) => { - const arrLen = arr.length; - return key === 0 ? "first" : key === arrLen - 1 ? "last" : "center"; -}; - -export default function QueryTypeSwitch(props: any) { - const { options, defaultActive, label, onChange }: any = props; - - const defaultact = useMemo(() => defaultActive, [defaultActive]); - - const [activeBtn, setActiveBtn] = useState(defaultact); - useEffect(() => { - setActiveBtn(defaultActive); - }, [defaultActive]); - - function setButtonValue(value: any) { - setActiveBtn(value); - onChange(value); - } - - return ( - <> - - - {options && - options.map((value: any, key: any, arr: any) => ( - setButtonValue(value.value)} - > - {value.label} - - ))} - - - ); -} diff --git a/packages/main/sections/Browser/actions.tsx b/packages/main/sections/Browser/actions.tsx deleted file mode 100644 index cd84ed48..00000000 --- a/packages/main/sections/Browser/actions.tsx +++ /dev/null @@ -1,21 +0,0 @@ -export const setQueryResolution = (queryResolution: any) => (dispatch: Function) => { - dispatch({ - type: "SET_QUERY_RESOLUTION", - queryResolution, - }); -}; - -export const setLeftPanel = ( left : any) => (dispatch: Function) => { - dispatch({ - type: 'SET_LEFT_PANEL', - left - }) -} - -export const setRightPanel = ( right : any) => (dispatch: Function) => { - dispatch({ - type: 'SET_RIGHT_PANEL', - right - }) -} - diff --git a/packages/main/sections/Browser/consts.tsx b/packages/main/sections/Browser/consts.tsx deleted file mode 100644 index ece9ca4c..00000000 --- a/packages/main/sections/Browser/consts.tsx +++ /dev/null @@ -1,24 +0,0 @@ -export const DEFAULT_RESOLUTION = { - value: 1, - label: "1/1", -}; -let resMap = [2, 3, 4, 5, 10].map((value: any) => ({ - value, - label: "1/" + value, -})); -export const RESOLUTION_OPTIONS = [DEFAULT_RESOLUTION]?.concat(resMap); - -export const SWITCH_OPTIONS = [ - { value: "range", label: "Range" }, - { value: "instant", label: "Instant" }, -]; - -export const DIRECTION_SWITCH_OPTIONS = [ - { value: "forward", label: "Forward" }, - { value: "backwards", label: "Backwards" }, -]; - -export const TRACE_OPTIONS = [ - { value: "traceId", label: "TraceId" }, - { value: "search", label: "Search" }, -]; \ No newline at end of file diff --git a/packages/main/sections/Browser/helpers.tsx b/packages/main/sections/Browser/helpers.tsx deleted file mode 100644 index ae51b29f..00000000 --- a/packages/main/sections/Browser/helpers.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import DOMPurify from "isomorphic-dompurify"; -import { setLeftPanel, setRightPanel } from "./actions"; -import sanitizeWithSigns from '../../helpers/sanitizeWithSigns' -export default function queryInit(query: any) { - return query.split(/[ ]+/).map((m: any) => ({ - type: "paragraph", - children: [ - { - text: sanitizeWithSigns(m), - }, - ], - })) || [ - { - type: "paragraph", - children: [ - { - text: DOMPurify.sanitize("Enter a Query"), - }, - ], - }, - ]; -} - -export function onQueryValid(query: any) { - return ( - query && - query !== "{" && - query !== "}" && - query !== "{}" && - query !== "" && - query?.length >= 7 - ); // TODO: make a proper query validation -} - -export function panelAction(name: any, value: any) { - if (name === "left") { - return setLeftPanel(value); - } - return setRightPanel(value); -} \ No newline at end of file diff --git a/packages/main/sections/Browser/index.tsx b/packages/main/sections/Browser/index.tsx deleted file mode 100644 index ceaf5f2e..00000000 --- a/packages/main/sections/Browser/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useSelector } from "react-redux"; -import ValuesList from "@ui/main/components/LabelsSelector/ValuesList"; -import { Stats } from "@ui/main/components/Stats/Stats"; -import { QueryBar } from "./QueryBar"; - -const Browser = (props: any) => { - const { - data: { dataSourceType, isShowStats, isBuilder }, - } = props; - - const isEmbed = useSelector((store: any) => store.isEmbed); - - return ( -
- - - {!isEmbed && dataSourceType === "logs" && !isBuilder && ( - - )} - {isShowStats && !isBuilder && } -
- ); -}; - -export default Browser; diff --git a/packages/main/sections/Browser/styles.tsx b/packages/main/sections/Browser/styles.tsx deleted file mode 100644 index 07466d1f..00000000 --- a/packages/main/sections/Browser/styles.tsx +++ /dev/null @@ -1,259 +0,0 @@ -import styled from "@emotion/styled"; -import isPropValid from "@emotion/is-prop-valid"; -import HistoryIcon from "@mui/icons-material/History"; -import { BtnSmall } from "@ui/theme/styles/Button"; -import { InputSmall } from "@ui/theme/styles/Input"; -import { css } from "@emotion/css"; - -export const HistoryIconStyled: any = styled(HistoryIcon)` - height: 18px; - color: ${({ color }) => color}; - width: 18px; -`; -export const HistoryButtonStyled: any = styled(BtnSmall)` - background: none; - margin-left: 5px; - color: ${(props: any) => props.theme.contrast}; - background: ${(props: any) => props.theme.neutral}; - border: 1px solid ${(props: any) => props.theme.accentNeutral}; - height: 28px; - span { - margin-left: 5px; - } - @media screen and (max-width: 1070px) { - display: flex; - } -`; - -export const ShowLabelsBtn: any = styled(BtnSmall)` - background: ${(props: any) => props.theme.neutral}; - border: 1px solid ${(props: any) => props.theme.accentNeutral}; - text-overflow: ellipsis; - transition: 0.25s all; - padding-left: 6px; - justify-content: flex-start; - color: ${({ theme }: any) => theme.contrast}; - height: 28px; - &:hover { - background: ${({ theme }: any) => theme.lightNeutral}; - } - @media screen and (max-width: 1070px) { - display: ${({ isMobile }: { isMobile: boolean }) => - isMobile ? "flex" : "none"}; - - margin: 0; - } -`; - -export const QueryBarContainer: any = styled.div` - display: flex; - padding: 0px 4px; - margin-left: 0px; - flex-wrap: wrap; - border-radius: 3px; -`; -export const ShowLogsBtn: any = styled(BtnSmall, { - shouldForwardProp: (prop) => isPropValid(prop) && prop !== "loading", -})` - background: ${(props: any) => - props.loading ? "#44bcd8" : props.theme.primary}; - border: 1px solid ${(props: any) => props.theme.accentNeutral}; - color: ${(props: any) => props.theme.maxContrast}; - margin-left: 5px; - transition: 0.25s all; - justify-content: center; - padding: 3px 12px; - - height: 28px; - &:hover { - background: ${(props: any) => props.theme.primaryLight}; - } - &:disabled { - background: ${(props: any) => props.theme.neutral}; - border: 1px solid ${(props: any) => props.theme.accentNeutral}; - cursor: not-allowed; - color: ${(props: any) => props.theme.contrast}; - } - @media screen and (max-width: 1070px) { - display: flex; - - margin: 0; - margin-left: 5px; - } -`; - -export const ShowSettingsBtn: any = styled(BtnSmall)` - background: none; - margin-left: 5px; - color: ${(props: any) => props.theme.contrast}; - background: ${(props: any) => props.theme.neutral}; - border: 1px solid ${(props: any) => props.theme.accentNeutral}; - height: 28px; - span { - margin-left: 5px; - } - display: ${(props: any) => - props.isMobile || props.isSplit ? "flex" : "none"}; -`; - -export const MobileTopQueryMenu: any = styled.div` - display: flex; - flex-wrap: wrap; - - @media screen and (max-width: 1070px) { - display: flex; - } -`; - -export const InputGroup: any = styled.div` - display: flex; - flex: 1; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - margin-right: 10px; -`; -export const InlineGroup: any = styled.div` - display: flex; - align-items: center; -`; - -export const SettingCont: any = styled.div<{ theme: any }>` - display: flex; - flex: 1; - flex-direction: column; - - background: ${({ theme }) => theme.shadow}; -`; - -export const SettingsInputContainer: any = styled.div` - margin: 20px; - display: flex; - flex-direction: column; - flex: 1; - .options-input { - margin: 10px; - display: flex; - justify-content: space-between; - } -`; - -export const SettingInput: any = styled(InputSmall)` - background: ${({ theme }: any) => theme.deep}; - margin: 5px; - flex: 1; - padding: 5px 12px; - border: 1px solid ${({ theme }: any) => theme.accentNeutral}; - color: ${({ theme }: any) => theme.contrast}; - &:focus { - border: 1px solid ${({ theme }: any) => theme.lightNeutral}; - } -`; -export const SettingButton: any = styled(BtnSmall)` - background: ${({ theme }: any) => theme.primary}; - color: ${({ theme }: any) => theme.maxContrast}; - height: 30px; - &:hover { - background: ${({ theme }: any) => theme.primaryLight}; - } -`; - -export const SettingLabel = styled.label` - font-size: 11px; - white-space: nowrap; - color: ${({ theme }: any) => theme.contrast}; - margin-left: 10px; -`; - -export const SettingHeader: any = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin: 10px; - h3 { - margin-left: 10px; - font-size: 1em; - color: ${({ theme }: any) => theme.contrast}; - } -`; -export const SettingCloseBtn: any = styled(BtnSmall)` - background: none; - padding: 0; - color: ${({ theme }: any) => theme.contrast}; -`; - -export const Label = styled.div` - color: ${({theme}: any) => theme.contrast}; - background: ${({theme}: any) => theme.shadow}; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - padding: 0px 8px; -`; - -export const ResSelect = styled.select` - cursor: pointer; - position: relative; - font-size: 14px; - color: ${({theme}: any) => theme.contrast}; - background: ${({theme}: any) => theme.deep}; - border: 1px solid ${({theme}: any) => theme.accentNeutral}; - border-radius: 3px; - padding: 4px 8px; - line-height: 20px; - flex: 1; - max-width: 70px; - &::-webkit-scrollbar { - width: 5px; - background: ${({theme}: any) => theme.deep}; - } - &::-webkit-scrollbar-corner { - background: transparent; - } - &::-webkit-scrollbar-thumb { - border-radius: 5px; - background: ${({theme}: any) => theme.alphaPlusNeutral}; - } -`; - - -export const QLInputGroup = styled.div` - display: flex; - margin-right: 10px; -`; - -export const QLLabel = styled.div` - color: ${(props: any) => props.theme.contrast}; - background: ${(props: any) => props.theme.shadow}; - display: flex; - align-items: center; - justify-content: center; - font-size: 11px; - white-space: nowrap; - padding: 0px 10px; -`; - -export const Input = styled.input` - flex: 1; - background: ${(props: any) => props.theme.deep}; - color: ${(props: any) => props.theme.contrast}; - border: 1px solid ${(props: any) => props.theme.accentNeutral}; - border-radius: 3px; - max-width: 60px; - padding-left: 8px; -`; - -export const QueryTypeCont = styled.div` - display: flex; - padding: 4px 0px; - color: ${(props: any) => props.color}; - height: 26px; -`; - - -export const maxWidth = css` - max-width: 100%; -`; - - diff --git a/packages/main/src/components/QueryTypeBar/index.tsx b/packages/main/src/components/QueryTypeBar/index.tsx index e6443608..5beee9a3 100644 --- a/packages/main/src/components/QueryTypeBar/index.tsx +++ b/packages/main/src/components/QueryTypeBar/index.tsx @@ -101,7 +101,7 @@ export default function QueryTypeBar(props: any) { dispatch(panelAction(name, panel)); } } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); useEffect(() => { @@ -180,12 +180,14 @@ export default function QueryTypeBar(props: any) { function handleLogsVolumeSwitch() { const panel = [...panelQuery]; + panel.forEach((query) => { if (query.id === id) { query.isLogsVolume = isLogsVolumeSet ? false : true; } }); + console.log(name, panel) dispatch(panelAction(name, panel)); } From 10a7b1d91f84dd9205aa130c02f9fdc7c98120ee Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 9 Jan 2024 16:58:09 +0100 Subject: [PATCH 2/2] fix: logs volume time range --- .../LabelBrowser/components/QueryBar/QueryBar.tsx | 14 +++++++------- .../main/src/components/QueryTypeBar/index.tsx | 11 ++++------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx b/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx index 711fac63..e6bbd881 100644 --- 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 = (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 = (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 = (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 = (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 = (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 = (props) => { handleLogValueChange={onLogChange} handleLogsVolumeChange={onLogVolumeChange} />, + 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 ( - +