(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,
-
- )}
-
-
- 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 (
-
- );
-};
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/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));
}
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
@@ -180,6 +178,7 @@ export default function QueryTypeBar(props: any) {
function handleLogsVolumeSwitch() {
const panel = [...panelQuery];
+
panel.forEach((query) => {
if (query.id === id) {
query.isLogsVolume = isLogsVolumeSet ? false : true;
@@ -204,7 +203,7 @@ export default function QueryTypeBar(props: any) {
return (
-
+