app/vmui: add back action for hits chart time range (#1535)

Author: Loori-R

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

@@ -1,4 +1,4 @@
-import { FC, useMemo, useState } from "preact/compat";
+import { FC, useEffect, useMemo, useRef, useState } from "preact/compat";
 import "./style.scss";
 import "uplot/dist/uPlot.min.css";
 import { AlignedData } from "uplot";
@@ -11,6 +11,7 @@ import { calculateTotalHits } from "../../../utils/logs";
 import BarHitsStats from "./BarHitsStats/BarHitsStats";
 import { HitsChartAlert } from "../../../pages/QueryPage/HitsPanel/hooks/useHitsChartAlert";
 import Alert from "../../Main/Alert/Alert";
+import { timeParamsToDateRange } from "../../../utils/time";
 
 interface Props {
   logHits: LogHits[];
@@ -45,6 +46,58 @@ const BarHitsChart: FC<Props> = ({
   const isHitsMode = graphOptions.queryMode === GRAPH_QUERY_MODE.hits;
   const totalHits = useMemo(() => calculateTotalHits(logHits), [logHits]);
 
+  const currentPeriodRef = useRef(period);
+  const chartPeriodChangeRef = useRef(false);
+  const periodChangeTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const periodBeforeInteractionRef = useRef<TimeParams>();
+  const [prevPeriod, setPrevPeriod] = useState<TimeParams>();
+
+  const handleChangePeriod = (nextPeriod: TimePeriod) => {
+    chartPeriodChangeRef.current = true;
+
+    if (periodChangeTimeoutRef.current === undefined) {
+      periodBeforeInteractionRef.current = currentPeriodRef.current;
+    }
+
+    clearTimeout(periodChangeTimeoutRef.current);
+
+    periodChangeTimeoutRef.current = setTimeout(() => {
+      setPrevPeriod(periodBeforeInteractionRef.current);
+      periodBeforeInteractionRef.current = undefined;
+      periodChangeTimeoutRef.current = undefined;
+      chartPeriodChangeRef.current = false;
+    }, 500);
+
+    setPeriod(nextPeriod);
+  };
+
+
+  const resetPeriodInteraction = () => {
+    clearTimeout(periodChangeTimeoutRef.current);
+    periodChangeTimeoutRef.current = undefined;
+    periodBeforeInteractionRef.current = undefined;
+    setPrevPeriod(undefined);
+  };
+
+  const handleRevertPeriod = () => {
+    if (!prevPeriod) return;
+
+    setPeriod(timeParamsToDateRange(prevPeriod));
+    resetPeriodInteraction();
+  };
+
+  useEffect(() => {
+    currentPeriodRef.current = period;
+
+    if (chartPeriodChangeRef.current) {
+      return;
+    }
+
+    resetPeriodInteraction();
+  }, [period]);
+
+  useEffect(() => resetPeriodInteraction, []);
+
   return (
     <div className="vm-bar-hits-chart__wrapper">
       <div className="vm-bar-hits-chart-header">
@@ -60,6 +113,8 @@ const BarHitsChart: FC<Props> = ({
           query={query}
           isHitsMode={isHitsMode}
           isOverview={isOverview}
+          prevPeriod={prevPeriod}
+          onRevertPeriod={handleRevertPeriod}
           onChange={setGraphOptions}
         />
       </div>
@@ -76,7 +131,7 @@ const BarHitsChart: FC<Props> = ({
           totalHits={totalHits}
           data={_data}
           period={period}
-          setPeriod={setPeriod}
+          setPeriod={handleChangePeriod}
           graphOptions={graphOptions}
         />
       )}

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

@@ -5,7 +5,13 @@ import "./style.scss";
 import useStateSearchParams from "../../../../hooks/useStateSearchParams";
 import { useSearchParams } from "react-router-dom";
 import Button from "../../../Main/Button/Button";
-import { KeyboardIcon, MoreIcon, VisibilityIcon, VisibilityOffIcon } from "../../../Main/Icons";
+import {
+  ArrowBackIcon,
+  KeyboardIcon,
+  MoreIcon,
+  VisibilityIcon,
+  VisibilityOffIcon
+} from "../../../Main/Icons";
 import Tooltip from "../../../Main/Tooltip/Tooltip";
 import ShortcutKeys from "../../../Main/ShortcutKeys/ShortcutKeys";
 import { useCallback } from "react";
@@ -18,18 +24,27 @@ import { WITHOUT_GROUPING } from "../../../../constants/logs";
 import { useHitsChartConfig } from "../../../../pages/QueryPage/HitsPanel/hooks/useHitsChartConfig";
 import { useExtraFilters } from "../../../ExtraFilters/hooks/useExtraFilters";
 import { useFetchFieldNames } from "../../../../pages/OverviewPage/hooks/useFetchFieldNames";
-import { getDurationFromMilliseconds } from "../../../../utils/time";
+import {
+  getDurationFromMilliseconds,
+  nanosToIsoString,
+  vmDate
+} from "../../../../utils/time";
 import { generateIntervalsMs } from "../../../../utils/intervals";
 import { useTimePeriod } from "../../../../pages/QueryPage/hooks/useTimePeriod";
+import { TimeParams } from "../../../../types";
+import { DATE_TIME_FORMAT } from "../../../../constants/date";
+import { useTimeState } from "../../../../state/time/TimeStateContext";
 
 interface Props {
   query?: string;
   isHitsMode?: boolean;
   isOverview?: boolean;
+  prevPeriod?: TimeParams;
+  onRevertPeriod: () => void
   onChange: (options: GraphOptions) => void;
 }
 
-const BarHitsOptions: FC<Props> = ({ query, isHitsMode, isOverview, onChange }) => {
+const BarHitsOptions: FC<Props> = ({ query, isHitsMode, isOverview, prevPeriod, onRevertPeriod, onChange }) => {
   const { isMobile } = useDeviceDetect();
   const {
     value: openList,
@@ -40,6 +55,7 @@ const BarHitsOptions: FC<Props> = ({ query, isHitsMode, isOverview, onChange })
   const [searchParams, setSearchParams] = useSearchParams();
 
   const { topHits, groupFieldHits, step } = useHitsChartConfig();
+  const { timezone } = useTimeState();
 
   const { extraParams } = useExtraFilters();
   const { period: { start, end } } = useTimePeriod();
@@ -55,6 +71,14 @@ const BarHitsOptions: FC<Props> = ({ query, isHitsMode, isOverview, onChange })
   const [cumulative, setCumulative] = useStateSearchParams(false, "cumulative");
   const [hideChart, setHideChart] = useStateSearchParams(false, "hide_chart");
 
+  const prevPeriodFormatted = useMemo(() => {
+    if (!prevPeriod) return;
+
+    const startIso = nanosToIsoString(prevPeriod.start);
+    const endIso = nanosToIsoString(prevPeriod.end);
+    return `${vmDate(startIso).tz().format(DATE_TIME_FORMAT)} - ${vmDate(endIso).tz().format(DATE_TIME_FORMAT)}`;
+  }, [prevPeriod, timezone]);
+
   const options: GraphOptions = useMemo(() => ({
     graphStyle: GRAPH_STYLES.BAR,
     queryMode,
@@ -168,6 +192,18 @@ const BarHitsOptions: FC<Props> = ({ query, isHitsMode, isOverview, onChange })
             />
           </div>
         )}
+
+        {prevPeriod && (
+        <div
+          className="vm-bar-hits-options-item"
+          onClick={onRevertPeriod}
+        >
+          <button className="vm-select-limits-button vm-bar-hits-options-item_timerange">
+            <ArrowBackIcon/>
+            Back to {prevPeriodFormatted}
+          </button>
+        </div>
+        )}
       </div>
 
       <div className="vm-bar-hits-options-item vm-bar-hits-options-item_switch">

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsOptions/style.scss

@@ -29,6 +29,13 @@
     &_switch {
       padding-right: $padding-global;
     }
+
+    &_timerange {
+      gap: calc($padding-small / 4);
+      padding-inline: calc($padding-small / 2) $padding-small;
+      grid-template-columns: 16px 1fr;
+      min-height: 24px;
+    }
   }
 
   &_mobile {

app/vmui/packages/vmui/src/components/Main/Icons/index.tsx

@@ -114,6 +114,15 @@ export const ArrowDropDownIcon = () => (
   </svg>
 );
 
+export const ArrowBackIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"></path>
+  </svg>
+);
+
 export const ClockIcon = () => (
   <svg
     viewBox="0 0 24 24"

docs/victorialogs/CHANGELOG.md

@@ -33,6 +33,7 @@ according to the following docs:
 * FEATURE: [LogsQL](https://docs.victoriametrics.com/victorialogs/logsql/): add [`json_array_concat` pipe](https://docs.victoriametrics.com/victorialogs/logsql/#json_array_concat-pipe) for joining JSON array items stored in the given [log field](https://docs.victoriametrics.com/victorialogs/keyconcepts/#data-model) into a string with the given delimiter. See [#712](https://github.com/VictoriaMetrics/VictoriaLogs/issues/712).
 * FEATURE: [data ingestion](https://docs.victoriametrics.com/victorialogs/data-ingestion/): adjust [`_stream` field](https://docs.victoriametrics.com/victorialogs/keyconcepts/#stream-fields) value according to the actual log fields. This simplifies importing of previously modified VictoriaLogs-exported data. See [#1122](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1122).
 * FEATURE: [vlagent](https://docs.victoriametrics.com/victorialogs/vlagent/): add `-remoteWrite.basicAuth.usernameFile` command-line flag for dynamically reloading basic auth username for the corresponding `-remoteWrite.url` from the given file.
+* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): add a `Back` action to the Hits chart for restoring the previous time range after zooming or panning the chart. See [#1535](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1535).
 
 * BUGFIX: [syslog data ingestion](https://docs.victoriametrics.com/victorialogs/data-ingestion/syslog/): avoid stamping [RFC3164](https://datatracker.ietf.org/doc/html/rfc3164) messages received right after the new year with the previous year (which could drop them under a short `-retentionPeriod`), and compute the year in `-syslog.timezone` instead of the server local timezone. See [#1556](https://github.com/VictoriaMetrics/VictoriaLogs/pull/1556).
 * BUGFIX: [LogsQL](https://docs.victoriametrics.com/victorialogs/logsql/): fix [`field_names` pipe](https://docs.victoriametrics.com/victorialogs/logsql/#field_names-pipe) not respecting [`hidden_fields_filters`](https://docs.victoriametrics.com/victorialogs/querying/#hidden-fields). Fields listed in `hidden_fields_filters` still appeared in `field_names` output, leaking their existence to the caller. See [#1574](https://github.com/VictoriaMetrics/VictoriaLogs/pull/1574/).