diff --git a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TimeZonePreview/TimeZonePreview.tsx b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TimeZonePreview/TimeZonePreview.tsx new file mode 100644 index 0000000000..a27ee5cbe6 --- /dev/null +++ b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TimeZonePreview/TimeZonePreview.tsx @@ -0,0 +1,52 @@ +import { FC } from "preact/compat"; +import Button from "../../../Main/Button/Button"; +import { useTimeState } from "../../../../state/time/TimeStateContext"; +import useDeviceDetect from "../../../../hooks/useDeviceDetect"; +import { getUTCByTimezone } from "../../../../utils/time"; +import { useMemo } from "react"; +import { ArrowDownIcon, PlanetIcon } from "../../../Main/Icons"; + +type Props = { + onOpenSettings?: () => void; +} + +const TimeZonePreview: FC = ({ onOpenSettings }) => { + const { isMobile } = useDeviceDetect(); + + const { timezone } = useTimeState(); + const utcOffset = useMemo(() => getUTCByTimezone(timezone), [timezone]); + + const handleOpenSettings = () => { + onOpenSettings && onOpenSettings(); + }; + + + if (isMobile) { + return ( + + ); + } + + return ( + + ); +}; + + +export default TimeZonePreview; diff --git a/app/vmui/packages/vmui/src/components/Main/Icons/index.tsx b/app/vmui/packages/vmui/src/components/Main/Icons/index.tsx index bb6db3d37c..d57cbe619f 100644 --- a/app/vmui/packages/vmui/src/components/Main/Icons/index.tsx +++ b/app/vmui/packages/vmui/src/components/Main/Icons/index.tsx @@ -659,3 +659,14 @@ export const SidebarCloseIcon = () => ( /> ); + +export const PlanetIcon = () => ( + + + +); diff --git a/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/style.scss b/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/style.scss index 3e71f78420..52a06b74c0 100644 --- a/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/style.scss +++ b/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/style.scss @@ -10,6 +10,7 @@ &_mobile { display: grid; grid-template-columns: 1fr; + gap: 0; padding: 0; .vm-header-button { diff --git a/app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx b/app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx index 330b1fb488..cfac69ae17 100644 --- a/app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx +++ b/app/vmui/packages/vmui/src/layouts/LogsLayout/ControlsLogsLayout.tsx @@ -9,6 +9,7 @@ import ShortcutKeys from "../../components/Main/ShortcutKeys/ShortcutKeys"; import { getAppModeEnable } from "../../utils/app-mode"; import Button from "../../components/Main/Button/Button"; import { KeyboardIcon } from "../../components/Main/Icons"; +import TimeZonePreview from "../../components/Configurators/GlobalSettings/TimeZonePreview/TimeZonePreview"; const ControlsLogsLayout: FC = ({ isMobile, headerSetup }) => { const appModeEnable = getAppModeEnable(); @@ -24,6 +25,7 @@ const ControlsLogsLayout: FC = ({ isMobile, headerSetup }) => { {headerSetup?.tenant && } {headerSetup?.timeSelector && } + settingsRef.current?.open()}/> {headerSetup?.executionControls && } {!isMobile && ( diff --git a/app/vmui/packages/vmui/src/styles/components/mobile-option.scss b/app/vmui/packages/vmui/src/styles/components/mobile-option.scss index 427eddc465..f4b5529206 100644 --- a/app/vmui/packages/vmui/src/styles/components/mobile-option.scss +++ b/app/vmui/packages/vmui/src/styles/components/mobile-option.scss @@ -1,11 +1,12 @@ @use "src/styles/variables" as *; .vm-mobile-option { - display: flex; + display: grid; + grid-template-columns: auto 1fr auto; align-items: center; justify-content: flex-start; - gap: $padding-small; - padding: calc($padding-medium/2) 0; + gap: $padding-global; + padding: $padding-global $padding-small; width: 100%; user-select: none; @@ -17,14 +18,33 @@ } &__icon { - width: 22px; - height: 22px; + position: relative; + display: flex; + width: 40px; + height: 40px; color: $color-primary; + + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.1; + background-color: currentColor; + border-radius: $border-radius-medium; + } + + svg { + width: 21px; + height: auto; + } } &__arrow { - width: 14px; - height: 14px; + width: 20px; + height: 20px; transform: rotate(-90deg); color: $color-primary; } @@ -32,11 +52,13 @@ &-text { display: grid; align-items: center; - gap: 2px; + height: 100%; + gap: calc($padding-small / 2); flex-grow: 1; + text-align: left; &__label { - font-weight: bold; + font-weight: 600; } &__value { diff --git a/docs/victorialogs/CHANGELOG.md b/docs/victorialogs/CHANGELOG.md index 0f40ed1eae..ea84fc3784 100644 --- a/docs/victorialogs/CHANGELOG.md +++ b/docs/victorialogs/CHANGELOG.md @@ -22,6 +22,8 @@ according to the following docs: ## tip +* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): show the selected time zone UTC offset next to the date/time controls and allow opening time zone settings from it. + * BUGFIX: [cluster version](https://docs.victoriametrics.com/victorialogs/cluster/): evenly spread rerouted data across available `vlstorage` nodes. Previously, healthy nodes adjacent to unavailable nodes in the `-storageNode` list could receive much more data, resulting in uneven resource usage. See [#1548](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1548). * BUGFIX: [data ingestion](https://docs.victoriametrics.com/victorialogs/data-ingestion/) and [querying](https://docs.victoriametrics.com/victorialogs/querying/): properly handle logs containing duplicate [stream field](https://docs.victoriametrics.com/victorialogs/keyconcepts/#stream-fields) names. Previously, [v1.52.0](https://github.com/VictoriaMetrics/VictoriaLogs/releases/tag/v1.52.0) could panic when ingesting such logs in single-node VictoriaLogs, drop them during ingestion in VictoriaLogs cluster, or panic when querying such data written by earlier releases. See [#1603](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1603) and [#1604](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1604). * BUGFIX: [LogsQL](https://docs.victoriametrics.com/victorialogs/logsql/): fix [`week_range[Sun,Sun]` filter](https://docs.victoriametrics.com/victorialogs/logsql/#week-range-filter) when it is used inside the [`filter` pipe](https://docs.victoriametrics.com/victorialogs/logsql/#filter-pipe). Previously, it could fail to match rows on Sunday. See [#1335](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1335).