vmui: fix Enter key in query field (#5667) (#5681)

This commit is contained in:
Yury Molodov 2024-01-26 22:38:32 +01:00 committed by Aliaksandr Valialkin
parent d42908133c
commit 551f48466c
No known key found for this signature in database
GPG key ID: 52C003EE2BCDB9EB
3 changed files with 17 additions and 7 deletions

View file

@ -1,4 +1,4 @@
import React, { FC, useRef, useState } from "preact/compat";
import React, { FC, useCallback, useEffect, useRef, useState } from "preact/compat";
import { KeyboardEvent } from "react";
import { ErrorTypes } from "../../../types";
import TextField from "../../Main/TextField/TextField";
@ -7,8 +7,8 @@ import "./style.scss";
import { QueryStats } from "../../../api/types";
import { partialWarning, seriesFetchedWarning } from "./warningText";
import { AutocompleteOptions } from "../../Main/Autocomplete/Autocomplete";
import { useQueryDispatch } from "../../../state/query/QueryStateContext";
import useDeviceDetect from "../../../hooks/useDeviceDetect";
import { useQueryState } from "../../../state/query/QueryStateContext";
export interface QueryEditorProps {
onChange: (query: string) => void;
@ -36,6 +36,7 @@ const QueryEditor: FC<QueryEditorProps> = ({
label,
disabled = false
}) => {
const { autocompleteQuick } = useQueryState();
const { isMobile } = useDeviceDetect();
const [openAutocomplete, setOpenAutocomplete] = useState(false);
@ -61,7 +62,7 @@ const QueryEditor: FC<QueryEditorProps> = ({
onChange(val);
};
const handleKeyDown = (e: KeyboardEvent) => {
const handleKeyDown = useCallback((e: KeyboardEvent) => {
const { key, ctrlKey, metaKey, shiftKey } = e;
const value = (e.target as HTMLTextAreaElement).value || "";
@ -93,7 +94,7 @@ const QueryEditor: FC<QueryEditorProps> = ({
e.preventDefault();
onEnter();
}
};
}, [openAutocomplete]);
const handleChangeFoundOptions = (val: AutocompleteOptions[]) => {
setOpenAutocomplete(!!val.length);
@ -103,6 +104,10 @@ const QueryEditor: FC<QueryEditorProps> = ({
setCaretPosition(val);
};
useEffect(() => {
setOpenAutocomplete(autocomplete);
}, [autocompleteQuick]);
return (
<div
className="vm-query-editor"

View file

@ -85,6 +85,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
}
}, [openAutocomplete, options, value]);
const hideFoundedOptions = useMemo(() => {
return foundOptions.length === 1 && foundOptions[0]?.value === value;
}, [foundOptions]);
const displayNoOptionsText = useMemo(() => {
return noOptionsText && !foundOptions.length;
}, [noOptionsText,foundOptions]);
@ -159,8 +163,8 @@ const Autocomplete: FC<AutocompleteProps> = ({
}, [openAutocomplete]);
useEffect(() => {
onFoundOptions && onFoundOptions(foundOptions);
}, [foundOptions]);
onFoundOptions && onFoundOptions(hideFoundedOptions ? [] : foundOptions);
}, [foundOptions, hideFoundedOptions]);
return (
<Popper
@ -181,7 +185,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
ref={wrapperEl}
>
{displayNoOptionsText && <div className="vm-autocomplete__no-options">{noOptionsText}</div>}
{!(foundOptions.length === 1 && foundOptions[0]?.value === value) && foundOptions.map((option, i) =>
{!hideFoundedOptions && foundOptions.map((option, i) =>
<div
className={classNames({
"vm-list-item": true,

View file

@ -84,6 +84,7 @@ The sandbox cluster installation is running under the constant load generated by
* 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: [vmui](https://docs.victoriametrics.com/#vmui): fix the `Enter` key press issue in the `Query` field when using autocomplete. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5667).
* 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).
* BUGFIX: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): properly handle possible negative results caused by float operations precision error in rollup functions like rate() or increase(). See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5571).