app/vmui: fix groups auto-expand on list update (#499)

Co-authored-by: Aliaksandr Valialkin <[email protected]>

Author: Loori-R

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsOptions/BarHitsOptions.tsx

@@ -61,15 +61,6 @@ const BarHitsOptions: FC<Props> = ({ onChange }) => {
 
   return (
     <div className="vm-bar-hits-options">
-      <Tooltip title={hideChart ? "Show chart and resume hits updates" : "Hide chart and pause hits updates"}>
-        <Button
-          variant="text"
-          color="primary"
-          startIcon={hideChart ? <VisibilityOffIcon/> : <VisibilityIcon/>}
-          onClick={toggleHideChart}
-          ariaLabel="settings"
-        />
-      </Tooltip>
       <div ref={optionsButtonRef}>
         <Tooltip title="Graph settings">
           <Button
@@ -81,6 +72,15 @@ const BarHitsOptions: FC<Props> = ({ onChange }) => {
           />
         </Tooltip>
       </div>
+      <Tooltip title={hideChart ? "Show chart and resume hits updates" : "Hide chart and pause hits updates"}>
+        <Button
+          variant="text"
+          color="primary"
+          startIcon={hideChart ? <VisibilityOffIcon/> : <VisibilityIcon/>}
+          onClick={toggleHideChart}
+          ariaLabel="settings"
+        />
+      </Tooltip>
       <Popper
         open={openOptions}
         placement="bottom-right"

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx

@@ -23,16 +23,22 @@ import usePrevious from "../../hooks/usePrevious";
 const storageLimit = Number(getFromStorage("LOGS_LIMIT"));
 const defaultLimit = isNaN(storageLimit) ? LOGS_ENTRIES_LIMIT : storageLimit;
 
+type FetchFlags = { logs: boolean; hits: boolean };
+
 const ExploreLogs: FC = () => {
   const { serverUrl } = useAppState();
   const { queryHistory } = useQueryState();
   const queryDispatch = useQueryDispatch();
   const { duration, relativeTime, period: periodState } = useTimeState();
   const { setSearchParamsFromKeys } = useSearchParamsFromObject();
   const [searchParams] = useSearchParams();
+
   const hideChart = useMemo(() => searchParams.get("hide_chart"), [searchParams]);
   const prevHideChart = usePrevious(hideChart);
 
+  const hideLogs = useMemo(() => searchParams.get("hide_logs"), [searchParams]);
+  const prevHideLogs = usePrevious(hideLogs);
+
   const [limit, setLimit] = useStateSearchParams(defaultLimit, "limit");
   const [query, setQuery] = useStateSearchParams("*", "query");
 
@@ -54,10 +60,15 @@ const ExploreLogs: FC = () => {
   const { logs, isLoading, error, fetchLogs, abortController } = useFetchLogs(serverUrl, query, limit);
   const { fetchLogHits, ...dataLogHits } = useFetchLogHits(serverUrl, query);
 
-  const fetchData = (p: TimeParams, hits: boolean) => {
-    fetchLogs(p).then((isSuccess) => {
-      if (isSuccess && hits) fetchLogHits(p);
-    }).catch(() => {/* error handled elsewhere */});
+  const fetchData = async (p: TimeParams, flags: FetchFlags) => {
+    if (flags.logs) {
+      const isSuccess = await fetchLogs(p);
+      if (!isSuccess) return;
+    }
+
+    if (flags.hits) {
+      await fetchLogHits(p);
+    }
   };
 
   const debouncedFetchLogs = useDebounceCallback(fetchData, 300);
@@ -78,7 +89,7 @@ const ExploreLogs: FC = () => {
 
     const newPeriod = getPeriod();
     setPeriod(newPeriod);
-    debouncedFetchLogs(newPeriod, !hideChart);
+    debouncedFetchLogs(newPeriod, { logs: !hideLogs, hits: !hideChart });
     setSearchParamsFromKeys({
       query,
       "g0.range_input": duration,
@@ -125,6 +136,12 @@ const ExploreLogs: FC = () => {
     }
   }, [hideChart, prevHideChart, period]);
 
+  useEffect(() => {
+    if (!hideLogs && prevHideLogs) {
+      fetchLogs(period);
+    }
+  }, [hideLogs, prevHideLogs, period]);
+
   return (
     <div className="vm-explore-logs">
       <ExploreLogsHeader

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBarChart/ExploreLogsBarChart.tsx

@@ -69,6 +69,8 @@ const ExploreLogsBarChart: FC<Props> = ({ logHits, period, error, isLoading, onA
   }, [logHits]);
 
   const noDataMessage: string = useMemo(() => {
+    if (isLoading) return "";
+
     const noData = data.every(d => d.length === 0);
     const noTimestamps = data[0].length === 0;
     const noValues = data[1].length === 0;
@@ -81,7 +83,7 @@ const ExploreLogsBarChart: FC<Props> = ({ logHits, period, error, isLoading, onA
     } else if (noValues) {
       return "No value information available for the current queries and time range.";
     } return "";
-  }, [data, hideChart]);
+  }, [data, hideChart, isLoading]);
 
   const setPeriod = ({ from, to }: {from: Date, to: Date}) => {
     timeDispatch({ type: "SET_PERIOD", payload: { from, to } });

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/ExploreLogsBody.tsx

@@ -1,5 +1,12 @@
 import { FC, useRef } from "preact/compat";
-import { CodeIcon, ListIcon, TableIcon, PlayIcon } from "../../../components/Main/Icons";
+import {
+  CodeIcon,
+  ListIcon,
+  TableIcon,
+  PlayIcon,
+  VisibilityOffIcon,
+  VisibilityIcon
+} from "../../../components/Main/Icons";
 import Tabs from "../../../components/Main/Tabs/Tabs";
 import "./style.scss";
 import classNames from "classnames";
@@ -12,6 +19,10 @@ import GroupView from "./views/GroupView/GroupView";
 import TableView from "./views/TableView/TableView";
 import JsonView from "./views/JsonView/JsonView";
 import LiveTailingView from "./views/LiveTailingView/LiveTailingView";
+import Tooltip from "../../../components/Main/Tooltip/Tooltip";
+import Button from "../../../components/Main/Button/Button";
+import { useSearchParams } from "react-router-dom";
+import Alert from "../../../components/Main/Alert/Alert";
 
 export interface ExploreLogBodyProps {
   data: Logs[];
@@ -38,6 +49,18 @@ const ExploreLogsBody: FC<ExploreLogBodyProps> = ({ data, isLoading }) => {
   const [activeTab, setActiveTab] = useStateSearchParams(DisplayType.group, "view");
   const settingsRef = useRef<HTMLDivElement>(null);
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [hideLogs, setHideLogs] = useStateSearchParams(false, "hide_logs");
+
+  const toggleHideLogs = () => {
+    setHideLogs(prev => {
+      const newVal = !prev;
+      newVal ? searchParams.set("hide_logs", "true") : searchParams.delete("hide_logs");
+      setSearchParams(searchParams);
+      return newVal;
+    });
+  };
+
   const handleChangeTab = (view: string) => {
     setActiveTab(view as DisplayType);
     setSearchParamsFromKeys({ view });
@@ -82,19 +105,33 @@ const ExploreLogsBody: FC<ExploreLogBodyProps> = ({ data, isLoading }) => {
           className="vm-explore-logs-body-header__settings"
           ref={settingsRef}
         />
+        <Tooltip title={hideLogs ? "Show Logs" : "Hide Logs"}>
+          <Button
+            variant="text"
+            color="primary"
+            startIcon={hideLogs ? <VisibilityOffIcon/> : <VisibilityIcon/>}
+            onClick={toggleHideLogs}
+            ariaLabel="settings"
+          />
+        </Tooltip>
       </div>
 
       <div
         className={classNames({
           "vm-explore-logs-body__table": true,
+          "vm-explore-logs-body__table_hide": hideLogs,
           "vm-explore-logs-body__table_mobile": isMobile,
         })}
       >
-        {ActiveTabComponent &&
-            <ActiveTabComponent
-              data={data}
-              settingsRef={settingsRef}
-            />
+        {hideLogs && (
+          <Alert variant="info">Logs are hidden. Updates paused.</Alert>
+        )}
+
+        {!hideLogs && ActiveTabComponent &&
+          <ActiveTabComponent
+            data={data}
+            settingsRef={settingsRef}
+          />
         }
       </div>
     </div>

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/style.scss

@@ -4,11 +4,12 @@
   position: relative;
 
   &-header {
-    background-color: $color-background-block;
-    z-index: 3;
-    margin: -$padding-medium 0-$padding-medium 0;
     position: sticky;
     top: 0;
+    margin: -$padding-medium 0-$padding-medium 0;
+    grid-template-columns: 1fr auto auto;
+    background-color: $color-background-block;
+    z-index: 3;
 
     @media (max-width:1000px) {
       top: 51px;

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/views/TableView/style.scss

@@ -5,6 +5,5 @@
   &__settings-buttons {
     display: flex;
     align-items: center;
-    gap: $padding-small;
   }
-}
+}

app/vmui/packages/vmui/src/pages/ExploreLogs/GroupLogs/GroupLogs.tsx

@@ -68,7 +68,10 @@ const GroupLogs: FC<Props> = ({ logs, settingsRef }) => {
   const paginatedGroups = usePaginateGroups(groupData, page, rowsPerPage);
 
   const handleToggleExpandAll = useCallback(() => {
-    setExpandGroups(new Array(groupData.length).fill(!expandAll));
+    setExpandGroups(prev => {
+      const keepClosed = (prev.every(v => !v) && prev.length) || isMobile;
+      return new Array(groupData.length).fill(!keepClosed);
+    });
   }, [expandAll, groupData.length]);
 
   const handleChangeExpand = useCallback((i: number) => (value: boolean) => {

app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogHits.ts

@@ -6,14 +6,19 @@ import { getHitsTimeParams } from "../../../utils/logs";
 import { LOGS_GROUP_BY, LOGS_LIMIT_HITS } from "../../../constants/logs";
 import { isEmptyObject } from "../../../utils/object";
 import { useTenant } from "../../../hooks/useTenant";
+import { useSearchParams } from "react-router-dom";
 
 export const useFetchLogHits = (server: string, query: string) => {
   const tenant = useTenant();
+  const [searchParams] = useSearchParams();
+
   const [logHits, setLogHits] = useState<LogHits[]>([]);
   const [isLoading, setIsLoading] = useState<{[key: number]: boolean;}>([]);
   const [error, setError] = useState<ErrorTypes | string>();
   const abortControllerRef = useRef(new AbortController());
 
+  const hideChart = useMemo(() => searchParams.get("hide_chart"), [searchParams]);
+
   const url = useMemo(() => getLogHitsUrl(server), [server]);
 
   const getOptions = (query: string, period: TimeParams, signal: AbortSignal) => {
@@ -81,6 +86,13 @@ export const useFetchLogHits = (server: string, query: string) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (hideChart) {
+      setLogHits([]);
+      setError(undefined);
+    }
+  }, [hideChart]);
+
   return {
     logHits,
     isLoading: Object.values(isLoading).some(s => s),

app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts

@@ -4,15 +4,19 @@ import { ErrorTypes, TimeParams } from "../../../types";
 import { Logs } from "../../../api/types";
 import dayjs from "dayjs";
 import { useTenant } from "../../../hooks/useTenant";
+import { useSearchParams } from "react-router-dom";
 
 export const useFetchLogs = (server: string, query: string, limit: number) => {
   const tenant = useTenant();
+  const [searchParams] = useSearchParams();
 
   const [logs, setLogs] = useState<Logs[]>([]);
   const [isLoading, setIsLoading] = useState<{ [key: number]: boolean }>({});
   const [error, setError] = useState<ErrorTypes | string>();
   const abortControllerRef = useRef(new AbortController());
 
+  const hideLogs = useMemo(() => searchParams.get("hide_logs"), [searchParams]);
+
   const url = useMemo(() => getLogsUrl(server), [server]);
 
   const getOptions = (query: string, period: TimeParams, limit: number, signal: AbortSignal) => ({
@@ -75,6 +79,13 @@ export const useFetchLogs = (server: string, query: string, limit: number) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (hideLogs) {
+      setLogs([]);
+      setError(undefined);
+    }
+  }, [hideLogs]);
+
   return {
     logs,
     isLoading: Object.values(isLoading).some(s => s),

docs/victorialogs/CHANGELOG.md

@@ -19,7 +19,10 @@ according to [these docs](https://docs.victoriametrics.com/victorialogs/quicksta
 ## tip
 
 * FEATURE: [vlogscli](https://docs.victoriametrics.com/victorialogs/querying/vlogscli/): add ability to configure auth options and TLS options for connections to the `-datasource.url`. See [auth options docs](https://docs.victoriametrics.com/victorialogs/querying/vlogscli/#auth-options) and [TLS options docs](https://docs.victoriametrics.com/victorialogs/querying/vlogscli/#tls-options). See [this feature request](https://github.com/VictoriaMetrics/VictoriaLogs/issues/54). Thanks to @thom-vend for [the initial pull request](https://github.com/VictoriaMetrics/VictoriaLogs/pull/457).
+* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): add the ability to hide the logs panel to view only the graph. When the logs panel is hidden, the `/query` request is not executed.
 * FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): improve autocomplete functionality with enhanced quick autocomplete via hotkey support and removed special characters from autocomplete suggestions. See [this comment](https://github.com/VictoriaMetrics/VictoriaLogs/issues/70#issuecomment-3043591443) for details.
+* 
+* BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): prevent groups from automatically expanding on list updates if all groups were previously collapsed. See [#92](https://github.com/VictoriaMetrics/VictoriaLogs/issues/92).
 
 ## [v1.25.1](https://github.com/VictoriaMetrics/VictoriaLogs/releases/tag/v1.25.1)