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 0fb1b13d98..6dec9e180d 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx +++ b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx @@ -41,7 +41,6 @@ const QueryEditor: FC = ({ const wrapperEl = useRef(null); const foundOptions = useMemo(() => { - setFocusOption(0); if (!openAutocomplete) return []; try { const regexp = new RegExp(String(value), "i"); @@ -50,7 +49,11 @@ const QueryEditor: FC = ({ } catch (e) { return []; } - }, [openAutocomplete, options]); + }, [openAutocomplete, options, value]); + + const handleCloseAutocomplete = () => { + setOpenAutocomplete(false); + }; const handleKeyDown = (e: KeyboardEvent) => { const { key, ctrlKey, metaKey, shiftKey } = e; @@ -59,8 +62,10 @@ const QueryEditor: FC = ({ const arrowUp = key === "ArrowUp"; const arrowDown = key === "ArrowDown"; const enter = key === "Enter"; + const escape = key === "Escape"; const hasAutocomplete = openAutocomplete && foundOptions.length; + const valueAutocomplete = foundOptions[focusOption]; const isArrows = arrowUp || arrowDown; const arrowsByOptions = isArrows && hasAutocomplete; @@ -86,17 +91,19 @@ const QueryEditor: FC = ({ } // Enter - if (enter && hasAutocomplete && !shiftKey && !ctrlMetaKey) { + if (valueAutocomplete && enter && hasAutocomplete && !shiftKey && !ctrlMetaKey) { if (disabled) return; - onChange(foundOptions[focusOption]); - setOpenAutocomplete(false); + onChange(valueAutocomplete); + handleCloseAutocomplete(); } else if (enter && !shiftKey) { onEnter(); + handleCloseAutocomplete(); } - }; - const handleCloseAutocomplete = () => { - setOpenAutocomplete(false); + // Escape + if (escape && openAutocomplete) { + handleCloseAutocomplete(); + } }; const createHandlerOnChangeAutocomplete = (item: string) => () => { @@ -106,9 +113,11 @@ const QueryEditor: FC = ({ }; useEffect(() => { + if (!autocomplete || !foundOptions.length) return; + setFocusOption(-1); const words = (value.match(/[a-zA-Z_:.][a-zA-Z0-9_:.]*/gm) || []).length; setOpenAutocomplete(autocomplete && value.length > 2 && words <= 1); - }, [autocomplete, value]); + }, [autocomplete, value, foundOptions]); useEffect(() => { if (!wrapperEl.current) return; @@ -116,7 +125,7 @@ const QueryEditor: FC = ({ if (target?.scrollIntoView) target.scrollIntoView({ block: "center" }); }, [focusOption]); - useClickOutside(autocompleteAnchorEl, () => setOpenAutocomplete(false), wrapperEl); + useClickOutside(autocompleteAnchorEl, handleCloseAutocomplete, wrapperEl); return
{ + const byQuery = q.trim(); + const byHideQuery = hideQuery ? !hideQuery.includes(i) : true; + return byQuery && byHideQuery; + }; + const fetchUrl = useMemo(() => { const expr = predefinedQuery ?? query; const displayChart = (display || displayType) === "chart"; @@ -112,7 +118,7 @@ export const useFetchQuery = ({ predefinedQuery, visible, display, customStep, h } else if (isValidHttpUrl(serverUrl)) { const updatedPeriod = { ...period }; updatedPeriod.step = customStep; - return expr.filter((q, i) => q.trim() && !hideQuery.includes(i)).map(q => displayChart + return expr.filter(filterExpr).map(q => displayChart ? getQueryRangeUrl(serverUrl, q, updatedPeriod, nocache, isTracingEnabled) : getQueryUrl(serverUrl, q, updatedPeriod, isTracingEnabled)); } else { diff --git a/app/vmui/packages/vmui/src/state/customPanel/reducer.ts b/app/vmui/packages/vmui/src/state/customPanel/reducer.ts index cc28d05dca..55b12528c7 100644 --- a/app/vmui/packages/vmui/src/state/customPanel/reducer.ts +++ b/app/vmui/packages/vmui/src/state/customPanel/reducer.ts @@ -1,5 +1,4 @@ import { DisplayType, displayTypeTabs } from "../../pages/CustomPanel/DisplayTypeSwitch"; -import { getFromStorage, saveToStorage } from "../../utils/storage"; import { getQueryStringValue } from "../../utils/query-string"; export interface CustomPanelState { @@ -18,8 +17,8 @@ const displayType = displayTypeTabs.find(t => t.prometheusCode === +queryTab || export const initialCustomPanelState: CustomPanelState = { displayType: (displayType?.value || "chart") as DisplayType, - nocache: getFromStorage("NO_CACHE") as boolean || false, - isTracingEnabled: getFromStorage("QUERY_TRACING") as boolean || false, + nocache: false, + isTracingEnabled: false, }; export function reducer(state: CustomPanelState, action: CustomPanelAction): CustomPanelState { @@ -30,14 +29,12 @@ export function reducer(state: CustomPanelState, action: CustomPanelAction): Cus displayType: action.payload }; case "TOGGLE_QUERY_TRACING": - saveToStorage("QUERY_TRACING", !state.isTracingEnabled); return { ...state, isTracingEnabled: !state.isTracingEnabled, }; case "TOGGLE_NO_CACHE": - saveToStorage("NO_CACHE", !state.nocache); return { ...state, nocache: !state.nocache diff --git a/app/vmui/packages/vmui/src/styles/core.scss b/app/vmui/packages/vmui/src/styles/core.scss index a7a7fd91f0..1fc75cd732 100644 --- a/app/vmui/packages/vmui/src/styles/core.scss +++ b/app/vmui/packages/vmui/src/styles/core.scss @@ -28,6 +28,11 @@ b { font-weight: bold; } +textarea, +input { + cursor: text; +} + input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;