vmui: add a time picker to the "Logs Explorer" page (#5808)

* vmui: add a time picker to the "Logs Explorer" page #5673

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

---------

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>

app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "preact/compat";
 import classNames from "classnames";
 import GlobalSettings from "../../components/Configurators/GlobalSettings/GlobalSettings";
 import { ControlsProps } from "../Header/HeaderControls/HeaderControls";
-
+import { TimeSelector } from "../../components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector";
 
 const ControlsLogsLayout: FC<ControlsProps> = ({ isMobile }) => {
 
@@ -13,6 +13,7 @@ const ControlsLogsLayout: FC<ControlsProps> = ({ isMobile }) => {
         "vm-header-controls_mobile": isMobile,
       })}
     >
+      <TimeSelector/>
       <GlobalSettings/>
     </div>
   );

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

@@ -8,16 +8,16 @@ import Spinner from "../../components/Main/Spinner/Spinner";
 import Alert from "../../components/Main/Alert/Alert";
 import ExploreLogsHeader from "./ExploreLogsHeader/ExploreLogsHeader";
 import "./style.scss";
-import usePrevious from "../../hooks/usePrevious";
 import { ErrorTypes } from "../../types";
 import { useState } from "react";
+import { useTimeState } from "../../state/time/TimeStateContext";
 
 const ExploreLogs: FC = () => {
   const { serverUrl } = useAppState();
+  const { duration, relativeTime, period } = useTimeState();
   const { setSearchParamsFromKeys } = useSearchParamsFromObject();
 
   const [query, setQuery] = useStateSearchParams("", "query");
-  const prevQuery = usePrevious(query);
   const { logs, isLoading, error, fetchLogs } = useFetchLogs(serverUrl, query);
   const [queryError, setQueryError] = useState<ErrorTypes | string>("");
   const [loaded, isLoaded] = useState(false);
@@ -31,14 +31,18 @@ const ExploreLogs: FC = () => {
     fetchLogs().then(() => {
       isLoaded(true);
     });
-    const changedQuery = prevQuery && query !== prevQuery;
-    const params: Record<string, string | number> = changedQuery ? { query, page: 1 } : { query };
-    setSearchParamsFromKeys(params);
+
+    setSearchParamsFromKeys( {
+      query,
+      "g0.range_input": duration,
+      "g0.end_input": period.date,
+      "g0.relative_time": relativeTime || "none",
+    });
   };
 
   useEffect(() => {
     if (query) handleRunQuery();
-  }, []);
+  }, [period]);
 
   useEffect(() => {
     setQueryError("");

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

@@ -2,24 +2,39 @@ import { useCallback, useMemo, useState } from "preact/compat";
 import { getLogsUrl } from "../../../api/logs";
 import { ErrorTypes } from "../../../types";
 import { Logs } from "../../../api/types";
+import { useTimeState } from "../../../state/time/TimeStateContext";
+import dayjs from "dayjs";
 
 const MAX_LINES = 1000;
 
 export const useFetchLogs = (server: string, query: string) => {
+  const { period } = useTimeState();
+
   const [logs, setLogs] = useState<Logs[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<ErrorTypes | string>();
 
   const url = useMemo(() => getLogsUrl(server), [server]);
 
+  // include time range in query if not already present
+  const queryWithTime = useMemo(() => {
+    if (!/_time/.test(query)) {
+      const start = dayjs(period.start * 1000).tz().toISOString();
+      const end = dayjs(period.end * 1000).tz().toISOString();
+      const timerange = `_time:[${start}, ${end}]`;
+      return `${timerange} AND (${query})`;
+    }
+    return query;
+  }, [query, period]);
+
   const options = useMemo(() => ({
     method: "POST",
     headers: {
       "Accept": "application/stream+json; charset=utf-8",
       "Content-Type": "application/x-www-form-urlencoded",
     },
-    body: `query=${encodeURIComponent(query.trim())}`
-  }), [query]);
+    body: `query=${encodeURIComponent(queryWithTime.trim())}`
+  }), [queryWithTime]);
 
   const fetchLogs = useCallback(async () => {
     setIsLoading(true);

docs/CHANGELOG.md

@@ -70,6 +70,7 @@ Released at 2024-02-14
 * FEATURE: [dashboards/all](https://grafana.com/orgs/victoriametrics): add new panel `CPU spent on GC`. It should help identifying cases when too much CPU is spent on garbage collection, and advice users on how this can be addressed.
 * FEATURE: [vmalert](https://docs.victoriametrics.com/#vmalert): support [filtering](https://prometheus.io/docs/prometheus/2.49/querying/api/#rules) for `/api/v1/rules` API. See [the pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/5749) by @victoramsantos.
 * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): support client-side TLS configuration for creating and deleting snapshots via `-snapshot.tls*` cmd-line flags. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5724). Thanks to @khushijain21 for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/5738).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add a time picker to the "Logs Explorer" page. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5673).
 
 * BUGFIX: all VictoriaMetrics components: do not close connections to `-httpListenAddr` every 2 minutes. This behavior didn't help spreading load among multiple backend servers behind load-balancing TCP proxy. Instead, it could lead to hard-to-debug issues like [this one](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/1304#issuecomment-1636997037). If you still need periodically closing client connections because of some reason, then pass the desired timeout to `-http.connTimeout` command-line flag.
 * BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent.html): reduce CPU usage when `-promscrape.dropOriginalLabels` command-line flag is set. This issue has been introduced in [v1.96.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.96.0) when addressing [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5389).