vmui: display errors for each query individually (#3987) (#3994)

app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/LegendItem.tsx

@@ -15,6 +15,7 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange }) => {
   const [copiedValue, setCopiedValue] = useState("");
   const freeFormFields = useMemo(() => getFreeFields(legend), [legend]);
   const calculations = legend.calculations;
+  const showCalculations = Object.values(calculations).some(v => v);
 
   const handleClickFreeField = async (val: string, id: string) => {
     await navigator.clipboard.writeText(val);
@@ -68,9 +69,11 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange }) => {
           &#125;
         </span>
       </div>
-      <div className="vm-legend-item-values">
+      {showCalculations && (
-        median:{calculations.median}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last}
+        <div className="vm-legend-item-values">
-      </div>
+          median:{calculations.median}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last}
+        </div>
+      )}
     </div>
   );
 };

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

@@ -58,6 +58,8 @@
   &__error {
     top: calc((100% - ($font-size-small/2)) - 2px);
     color: $color-error;
+    pointer-events: auto;
+    user-select: text;
   }
 
   &__helper-text {

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

@@ -26,6 +26,7 @@ interface FetchQueryReturn {
   graphData?: MetricResult[],
   liveData?: InstantMetricResult[],
   error?: ErrorTypes | string,
+  queryErrors: (ErrorTypes | string)[],
   warning?: string,
   traces?: Trace[],
 }
@@ -58,17 +59,10 @@ export const useFetchQuery = ({
   const [liveData, setLiveData] = useState<InstantMetricResult[]>();
   const [traces, setTraces] = useState<Trace[]>();
   const [error, setError] = useState<ErrorTypes | string>();
+  const [queryErrors, setQueryErrors] = useState<(ErrorTypes | string)[]>([]);
   const [warning, setWarning] = useState<string>();
   const [fetchQueue, setFetchQueue] = useState<AbortController[]>([]);
 
-  useEffect(() => {
-    if (error) {
-      setGraphData(undefined);
-      setLiveData(undefined);
-      setTraces(undefined);
-    }
-  }, [error]);
-
   const fetchData = async ({
     fetchUrl,
     fetchQueue,
@@ -100,7 +94,7 @@ export const useFetchQuery = ({
         const resp = await response.json();
 
         if (response.ok) {
-          setError(undefined);
+          setQueryErrors(prev => [...prev, ""]);
 
           if (resp.trace) {
             const trace = new Trace(resp.trace, query[counter - 1]);
@@ -114,10 +108,11 @@ export const useFetchQuery = ({
           });
 
           totalLength += resp.data.result.length;
-          counter++;
         } else {
-          setError(`${resp.errorType}\r\n${resp?.error}`);
+          tempData.push({ metric: {}, values: [], group: counter } as MetricBase);
+          setQueryErrors(prev => [...prev, `${resp.errorType}\r\n${resp?.error}`]);
         }
+        counter++;
       }
 
       const limitText = `Showing ${seriesLimit} series out of ${totalLength} series due to performance reasons. Please narrow down the query, so it returns less series`;
@@ -136,13 +131,15 @@ export const useFetchQuery = ({
   const throttledFetchData = useCallback(debounce(fetchData, 300), []);
 
   const fetchUrl = useMemo(() => {
+    setError("");
+    setQueryErrors([]);
     const expr = predefinedQuery ?? query;
     const displayChart = (display || displayType) === "chart";
     if (!period) return;
     if (!serverUrl) {
       setError(ErrorTypes.emptyServer);
     } else if (expr.every(q => !q.trim())) {
-      setError(ErrorTypes.validQuery);
+      setQueryErrors(expr.map(() => ErrorTypes.validQuery));
     } else if (isValidHttpUrl(serverUrl)) {
       const updatedPeriod = { ...period };
       updatedPeriod.step = customStep;
@@ -181,5 +178,5 @@ export const useFetchQuery = ({
     setFetchQueue(fetchQueue.filter(f => !f.signal.aborted));
   }, [fetchQueue]);
 
-  return { fetchUrl, isLoading, graphData, liveData, error, warning, traces };
+  return { fetchUrl, isLoading, graphData, liveData, error, queryErrors, warning, traces };
 };

app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx

@@ -16,14 +16,14 @@ import { arrayEquals } from "../../../utils/array";
 import useDeviceDetect from "../../../hooks/useDeviceDetect";
 
 export interface QueryConfiguratorProps {
-  error?: ErrorTypes | string;
+  errors: (ErrorTypes | string)[];
   queryOptions: string[]
   onHideQuery: (queries: number[]) => void
   onRunQuery: () => void
 }
 
 const QueryConfigurator: FC<QueryConfiguratorProps> = ({
-  error,
+  errors,
   queryOptions,
   onHideQuery,
   onRunQuery
@@ -141,7 +141,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({
             value={stateQuery[i]}
             autocomplete={autocomplete}
             options={queryOptions}
-            error={error}
+            error={errors[i]}
             onArrowUp={createHandlerArrow(-1, i)}
             onArrowDown={createHandlerArrow(1, i)}
             onEnter={handleRunQuery}

app/vmui/packages/vmui/src/pages/CustomPanel/index.tsx

@@ -41,7 +41,9 @@ const CustomPanel: FC = () => {
   const graphDispatch = useGraphDispatch();
 
   const { queryOptions } = useFetchQueryOptions();
-  const { isLoading, liveData, graphData, error, warning, traces } = useFetchQuery({
+  const {
+    isLoading, liveData, graphData, error, queryErrors, warning, traces
+  } = useFetchQuery({
     visible: true,
     customStep,
     hideQuery,
@@ -99,7 +101,7 @@ const CustomPanel: FC = () => {
       })}
     >
       <QueryConfigurator
-        error={!hideError ? error : ""}
+        errors={!hideError ? queryErrors : []}
         queryOptions={queryOptions}
         onHideQuery={handleHideQuery}
         onRunQuery={handleRunQuery}

docs/CHANGELOG.md

@@ -33,6 +33,7 @@ created by v1.90.0 or newer versions. The solution is to upgrade to v1.90.0 or n
 
 * BUGFIX: prevent from slow [snapshot creating](https://docs.victoriametrics.com/#how-to-work-with-snapshots) under high data ingestion rate. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3551).
 * BUGFIX: [vmauth](https://docs.victoriametrics.com/vmauth.html):  suppress [proxy protocol](https://www.haproxy.org/download/2.3/doc/proxy-protocol.txt) parsing errors in case of `EOF`. Usually, the error is caused by health checks and is not a sign of an actual error.
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix displaying errors for each query. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3987).
 
 ## [v1.89.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.89.1)