vmui: minor fixes (#3361)

* fix: reset the value of the switches trace and cache

* fix: add cursor text for inputs

* fix: solve the Infinite loop of useFetchQuery.ts

* fix: change condition for show/hide autocomplete

* fix: add limit error length for input

app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx

@@ -41,7 +41,6 @@ const QueryEditor: FC<QueryEditorProps> = ({
   const wrapperEl = useRef<HTMLDivElement>(null);
 
   const foundOptions = useMemo(() => {
-    setFocusOption(0);
     if (!openAutocomplete) return [];
     try {
       const regexp = new RegExp(String(value), "i");
@@ -50,7 +49,11 @@ const QueryEditor: FC<QueryEditorProps> = ({
     } 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<QueryEditorProps> = ({
     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<QueryEditorProps> = ({
     }
 
     // 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<QueryEditorProps> = ({
   };
 
   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<QueryEditorProps> = ({
     if (target?.scrollIntoView) target.scrollIntoView({ block: "center" });
   }, [focusOption]);
 
-  useClickOutside(autocompleteAnchorEl, () => setOpenAutocomplete(false), wrapperEl);
+  useClickOutside(autocompleteAnchorEl, handleCloseAutocomplete, wrapperEl);
 
   return <div
     className="vm-query-editor"

app/vmui/packages/vmui/src/components/Main/TextField/style.scss

@@ -29,6 +29,7 @@
   &__helper-text, {
     position: absolute;
     left: calc($padding-global/2);
+    max-width: calc(100% - $padding-global);
     padding: 0 3px;
     font-size: $font-size-small;
     line-height: $font-size-small;
@@ -36,6 +37,12 @@
     user-select: none;
     background-color: $color-background-block;
     z-index: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
   }
 
   &__label {
@@ -44,7 +51,7 @@
   }
 
   &__error {
-    bottom: calc($font-size-small/-2);
+    top: calc(100% - ($font-size-small/2));
     color: $color-error;
   }
 

app/vmui/packages/vmui/src/hooks/useFetchQuery.ts

@@ -20,7 +20,7 @@ interface FetchQueryParams {
   hideQuery?: number[]
 }
 
-export const useFetchQuery = ({ predefinedQuery, visible, display, customStep, hideQuery = [] }: FetchQueryParams): {
+export const useFetchQuery = ({ predefinedQuery, visible, display, customStep, hideQuery }: FetchQueryParams): {
   fetchUrl?: string[],
   isLoading: boolean,
   graphData?: MetricResult[],
@@ -101,6 +101,12 @@ export const useFetchQuery = ({ predefinedQuery, visible, display, customStep, h
 
   const throttledFetchData = useCallback(debounce(fetchData, 800), []);
 
+  const filterExpr = (q: string, i: number) => {
+    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 {

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

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;