vmui: fix cache autocomplete (#5591)

* vmui: fix the logic of closing the popper #5470

* vmui: fix the logic of caching autocomplete results #5472

---------

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>

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;

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"

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);

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({

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;

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) => () => {

docs/CHANGELOG.md

@@ -72,6 +72,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).