diff --git a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryAutocompleteCache.ts b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryAutocompleteCache.ts index d50bc81959..73529571b9 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryAutocompleteCache.ts +++ b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryAutocompleteCache.ts @@ -24,7 +24,7 @@ export class QueryAutocompleteCache { const equalRange = cacheItem.start === key.start && cacheItem.end === key.end; const equalType = cacheItem.type === key.type; const isIncluded = key.value && cacheItem.value && key.value.includes(cacheItem.value); - const isSimilar = cacheItem.match === key.match || isIncluded; + const isSimilar = (cacheItem.match === key.match) || isIncluded; const isUnderLimit = cacheValue.length < AUTOCOMPLETE_LIMITS.queryLimit; if (isSimilar && equalRange && equalType && isUnderLimit) { return cacheValue; diff --git a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx index 87fdd62346..4aa2fb5be6 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx +++ b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx @@ -1,5 +1,5 @@ import React, { FC, useRef, useState } from "preact/compat"; -import { KeyboardEvent, useEffect } from "react"; +import { KeyboardEvent } from "react"; import { ErrorTypes } from "../../../types"; import TextField from "../../Main/TextField/TextField"; import QueryEditorAutocomplete from "./QueryEditorAutocomplete"; @@ -41,7 +41,6 @@ const QueryEditor: FC<QueryEditorProps> = ({ const [openAutocomplete, setOpenAutocomplete] = useState(false); const [caretPosition, setCaretPosition] = useState([0, 0]); const autocompleteAnchorEl = useRef<HTMLInputElement>(null); - const queryDispatch = useQueryDispatch(); const warning = [ { @@ -104,10 +103,6 @@ const QueryEditor: FC<QueryEditorProps> = ({ setCaretPosition(val); }; - useEffect(() => { - queryDispatch({ type: "SET_AUTOCOMPLETE_QUICK", payload: false }); - }, [value]); - return ( <div className="vm-query-editor" diff --git a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditorAutocomplete.tsx b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditorAutocomplete.tsx index 55b32ca833..2a4f0a3a4d 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditorAutocomplete.tsx +++ b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditorAutocomplete.tsx @@ -88,13 +88,6 @@ const QueryEditorAutocomplete: FC<QueryEditorAutocompleteProps> = ({ const beforeValueByContext = value.substring(0, startIndexOfValueByContext); const afterValueByContext = value.substring(endIndexOfValueByContext); - // Add quotes around the value if the context is labelValue - if (context === QueryContextType.labelValue) { - const quote = "\""; - const needsQuote = !beforeValueByContext.endsWith(quote); - insert = `${needsQuote ? quote : ""}${insert}${quote}`; - } - // Assemble the new value with the inserted text const newVal = `${beforeValueByContext}${insert}${afterValueByContext}`; onSelect(newVal); diff --git a/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx b/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx index d76f454a5d..50d364670b 100644 --- a/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx +++ b/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx @@ -52,18 +52,16 @@ const Popper: FC<PopperProps> = ({ useEffect(() => { setIsOpen(open); - }, [open]); - useEffect(() => { - if (!isOpen && onClose) onClose(); - if (isOpen && isMobile && !disabledFullScreen) { + if (!open && onClose) onClose(); + if (open && isMobile && !disabledFullScreen) { document.body.style.overflow = "hidden"; } return () => { document.body.style.overflow = "auto"; }; - }, [isOpen]); + }, [open]); useEffect(() => { setPopperSize({ diff --git a/app/vmui/packages/vmui/src/hooks/useFetchQueryOptions.tsx b/app/vmui/packages/vmui/src/hooks/useFetchQueryOptions.tsx index 98d537c30e..7e3bef121e 100644 --- a/app/vmui/packages/vmui/src/hooks/useFetchQueryOptions.tsx +++ b/app/vmui/packages/vmui/src/hooks/useFetchQueryOptions.tsx @@ -10,6 +10,7 @@ import { useQueryDispatch, useQueryState } from "../state/query/QueryStateContex import { QueryContextType } from "../types"; import { AUTOCOMPLETE_LIMITS } from "../constants/queryAutocomplete"; import { escapeDoubleQuotes, escapeRegexp } from "../utils/regexp"; +import dayjs from "dayjs"; enum TypeData { metric = "metric", @@ -59,11 +60,14 @@ export const useFetchQueryOptions = ({ valueByContext, metric, label, context }: const abortControllerRef = useRef(new AbortController()); const getQueryParams = useCallback((params?: Record<string, string>) => { + const startDay = dayjs(start * 1000).startOf("day").valueOf() / 1000; + const endDay = dayjs(end * 1000).endOf("day").valueOf() / 1000; + return new URLSearchParams({ ...(params || {}), limit: `${AUTOCOMPLETE_LIMITS.queryLimit}`, - start: `${start}`, - end: `${end}` + start: `${startDay}`, + end: `${endDay}` }); }, [start, end]); @@ -76,6 +80,7 @@ export const useFetchQueryOptions = ({ valueByContext, metric, label, context }: }; const fetchData = async ({ value, urlSuffix, setter, type, params }: FetchDataArgs) => { + if (!value) return; abortControllerRef.current.abort(); abortControllerRef.current = new AbortController(); const { signal } = abortControllerRef.current; diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx index 0b01334994..f491779503 100644 --- a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx +++ b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx @@ -128,6 +128,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({ const createHandlerChangeQuery = (i: number) => (value: string) => { handleChangeQuery(value, i); + queryDispatch({ type: "SET_AUTOCOMPLETE_QUICK", payload: false }); }; const createHandlerRemoveQuery = (i: number) => () => { diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 59babec408..0ddfbbeac5 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -70,6 +70,7 @@ The sandbox cluster installation is running under the constant load generated by * BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): exit if there is config syntax error in [`scrape_config_files`](https://docs.victoriametrics.com/vmagent.html#loading-scrape-configs-from-multiple-files) when `-promscrape.config.strictParse=true`. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5508). * BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): properly discover targets for `role: endpoints` and `role: endpointslice` in [kubernetes_sd_configs](https://docs.victoriametrics.com/sd_configs.html#kubernetes_sd_configs). Previously some `endpoints` and `endpointslice` targets could be left undiscovered or some targets could have missing `__meta_*` labels when performing service discovery in busy Kubernetes clusters with large number of pods. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/5557). * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix a link for the statistic inaccuracy explanation in the cardinality explorer tool. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5460). +* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the display of autocomplete results and cache the results. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5472) and [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5470). * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): send `step` param for instant queries. The change reverts [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3896) due to reasons explained in [this comment](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3896#issuecomment-1896704401). * BUGFIX: all: fix potential panic during components shutdown when [metrics push](https://docs.victoriametrics.com/#push-metrics) is configured. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5548). Thanks to @zhdd99 for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/5549). * BUGFIX: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): properly process queries with too big lookbehind window such as `foo[100y]`. Previously, such queries could return empty responses even if `foo` is present in database. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5553).