From 140aaafad0459f84532886c8725aa105f15b1504 Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Fri, 23 Feb 2024 00:38:30 +0100 Subject: [PATCH] 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 --- .../layouts/LogsLayout/ControlsLogsLayout.tsx | 3 ++- .../src/pages/ExploreLogs/ExploreLogs.tsx | 16 ++++++++++------ .../pages/ExploreLogs/hooks/useFetchLogs.ts | 19 +++++++++++++++++-- docs/CHANGELOG.md | 1 + 4 files changed, 30 insertions(+), 9 deletions(-) diff --git a/app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx b/app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx index 646767084..75ebea04e 100644 --- a/app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx +++ b/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 = ({ isMobile }) => { @@ -13,6 +13,7 @@ const ControlsLogsLayout: FC = ({ isMobile }) => { "vm-header-controls_mobile": isMobile, })} > + ); diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx index e177a1217..872031391 100644 --- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx +++ b/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(""); const [loaded, isLoaded] = useState(false); @@ -31,14 +31,18 @@ const ExploreLogs: FC = () => { fetchLogs().then(() => { isLoaded(true); }); - const changedQuery = prevQuery && query !== prevQuery; - const params: Record = 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(""); diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts b/app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts index 109171ffd..e5674955e 100644 --- a/app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts +++ b/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([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(); 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); diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 3e9802474..2b4edc5c7 100644 --- a/docs/CHANGELOG.md +++ b/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).