vmui: fix calendar display (#6255)

Fix the calendar display issue occurring with the `UTC+00:00` timezone #6239
VictoriaMetrics · May 17, 2024 · 4ad577c · 4ad577c
1 parent f153f54
commit 4ad577c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/app/vmui/packages/vmui/src/components/Main/DatePicker/Calendar/Calendar.tsx b/app/vmui/packages/vmui/src/components/Main/DatePicker/Calendar/Calendar.tsx
@@ -3,7 +3,7 @@ import dayjs, { Dayjs } from "dayjs";
 import CalendarHeader from "./CalendarHeader/CalendarHeader";
 import CalendarBody from "./CalendarBody/CalendarBody";
 import YearsList from "./YearsList/YearsList";
-import { DATE_TIME_FORMAT } from "../../../../constants/date";
+import { DATE_FORMAT, DATE_TIME_FORMAT } from "../../../../constants/date";
 import "./style.scss";
 import useDeviceDetect from "../../../../hooks/useDeviceDetect";
 import classNames from "classnames";
@@ -31,8 +31,8 @@ const Calendar: FC<DatePickerProps> = ({
   const [viewDate, setViewDate] = useState(dayjs.tz(date));
   const [selectDate, setSelectDate] = useState(dayjs.tz(date));
 
-  const today = dayjs().startOf("day").tz();
-  const viewDateIsToday = today.format() === viewDate.format();
+  const today = dayjs.tz();
+  const viewDateIsToday = today.format(DATE_FORMAT) === viewDate.format(DATE_FORMAT);
   const { isMobile } = useDeviceDetect();
 
   const toggleDisplayYears = () => {

diff --git a/app/vmui/packages/vmui/src/components/Main/DatePicker/Calendar/CalendarBody/CalendarBody.tsx b/app/vmui/packages/vmui/src/components/Main/DatePicker/Calendar/CalendarBody/CalendarBody.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useMemo } from "preact/compat";
 import dayjs, { Dayjs } from "dayjs";
 import classNames from "classnames";
+import Tooltip from "../../../Tooltip/Tooltip";
 
 interface CalendarBodyProps {
   viewDate: Dayjs
@@ -10,9 +11,10 @@ interface CalendarBodyProps {
 
 const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
-const CalendarBody: FC<CalendarBodyProps> = ({ viewDate, selectDate, onChangeSelectDate }) => {
+const CalendarBody: FC<CalendarBodyProps> = ({ viewDate: date, selectDate, onChangeSelectDate }) => {
   const format = "YYYY-MM-DD";
-  const today = dayjs().tz().startOf("day");
+  const today = dayjs.tz();
+  const viewDate = dayjs(date.format(format));
 
   const days: (Dayjs|null)[] = useMemo(() => {
     const result = new Array(42).fill(null);
@@ -32,12 +34,14 @@ const CalendarBody: FC<CalendarBodyProps> = ({ viewDate, selectDate, onChangeSel
   return (
     <div className="vm-calendar-body">
       {weekday.map(w => (
-        <div
-          className="vm-calendar-body-cell vm-calendar-body-cell_weekday"
+        <Tooltip
+          title={w}
           key={w}
         >
-          {w[0]}
-        </div>
+          <div className="vm-calendar-body-cell vm-calendar-body-cell_weekday">
+            {w[0]}
+          </div>
+        </Tooltip>
       ))}
 
       {days.map((d, i) => (

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -48,6 +48,7 @@ See also [LTS releases](https://docs.victoriametrics.com/lts-releases/).
 * FEATURE: [vmalert](https://docs.victoriametrics.com/vmalert/): reduce CPU usage when evaluating high number of alerting and recording rules.
 
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix bug that prevents the first query trace from expanding on click event. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6186). The issue was introduced in [v1.100.0](https://docs.victoriametrics.com/changelog/#v11000) release.
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix calendar display when `UTC+00:00` timezone is set. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6239).
 * BUGFIX: [vmagent](https://docs.victoriametrics.com/vmagent/): prevent potential panic during [stream aggregation](https://docs.victoriametrics.com/stream-aggregation.html) if more than one `--remoteWrite.streamAggr.dedupInterval` is configured. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6205).
 * BUGFIX: [stream aggregation](https://docs.victoriametrics.com/stream-aggregation/): set correct suffix `<output>_prometheus` for aggregation outputs [increase_prometheus](https://docs.victoriametrics.com/stream-aggregation/#increase_prometheus) and [total_prometheus](https://docs.victoriametrics.com/stream-aggregation/#total_prometheus). Before, outputs `total` and `total_prometheus` or `increase` and `increase_prometheus` had the same suffix.
 * BUGFIX: properly estimate the needed memory for query execution if it has the format [`aggr_func`](https://docs.victoriametrics.com/metricsql/#aggregate-functions)([`rollup_func[d]`](https://docs.victoriametrics.com/metricsql/#rollup-functions) (for example, `sum(rate(request_duration_seconds_bucket[5m]))`). This should allow performing aggregations over bigger number of time series when VictoriaMetrics runs in environments with small amounts of available memory. The issue has been introduced in [this commit](https://github.com/VictoriaMetrics/VictoriaMetrics/commit/5138eaeea0791caa34bcfab410e0ca9cd253cd8f) in [v1.83.0](https://docs.victoriametrics.com/changelog_2022/#v1830).