From 34c91c38101b81cfe06fd0368c0f58a5f37df35a Mon Sep 17 00:00:00 2001
From: Seyed Mahmoud SHAHROKNI <seyedmahmoud.shahrokni@amadeus.com>
Date: Wed, 17 Jun 2026 17:23:22 +0200
Subject: [PATCH] [FEATURE]: add timezone logic to the dashbaord toolbar

Signed-off-by: Seyed Mahmoud SHAHROKNI <seyedmahmoud.shahrokni@amadeus.com>
---
 .../DashboardToolbar/DashboardToolbar.tsx          | 12 +++++++++++-
 .../src/views/ViewDashboard/DashboardApp.tsx       | 14 +++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/dashboards/src/components/DashboardToolbar/DashboardToolbar.tsx b/dashboards/src/components/DashboardToolbar/DashboardToolbar.tsx
index 46c59a8b..7d0718d5 100644
--- a/dashboards/src/components/DashboardToolbar/DashboardToolbar.tsx
+++ b/dashboards/src/components/DashboardToolbar/DashboardToolbar.tsx
@@ -15,6 +15,7 @@ import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';
 import { ReactElement, ReactNode } from 'react';
+import { DashboardSpec } from '@perses-dev/spec';
 import { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
@@ -29,6 +30,11 @@ import { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';
 import { EditDashboardLinksButton } from '../DashboardLinks';
 import { LinksDisplay } from '../LinksDisplay';
 
+export type DashboardTimezone = {
+  specTimezone?: DashboardSpec['timezone'];
+  userPreferenceTimezone?: DashboardSpec['timezone'];
+};
+
 export interface DashboardToolbarProps {
   dashboardName: string;
   dashboardTitleComponent?: ReactNode;
@@ -38,6 +44,7 @@ export interface DashboardToolbarProps {
   isAnnotationEnabled: boolean;
   isDatasourceEnabled: boolean;
   isLinksEnabled?: boolean;
+  dashboardTimezone: DashboardTimezone;
   onEditButtonClick: () => void;
   onCancelButtonClick: () => void;
   onSave?: OnSaveDashboard;
@@ -53,13 +60,16 @@ export const DashboardToolbar = (props: DashboardToolbarProps): ReactElement =>
     isAnnotationEnabled,
     isDatasourceEnabled,
     isLinksEnabled = true,
+    dashboardTimezone,
     onEditButtonClick,
     onCancelButtonClick,
     onSave,
   } = props;
 
   const { isEditMode } = useEditMode();
-  const { timeZone, setTimeZone } = useTimeZoneParams('local');
+  const { timeZone, setTimeZone } = useTimeZoneParams(
+    dashboardTimezone.specTimezone || dashboardTimezone.userPreferenceTimezone || 'local'
+  );
   const dashboardLinks = useDashboardLinks();
 
   const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
diff --git a/dashboards/src/views/ViewDashboard/DashboardApp.tsx b/dashboards/src/views/ViewDashboard/DashboardApp.tsx
index c5ac2136..ce3623e7 100644
--- a/dashboards/src/views/ViewDashboard/DashboardApp.tsx
+++ b/dashboards/src/views/ViewDashboard/DashboardApp.tsx
@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ReactElement, ReactNode, useState } from 'react';
+import { ReactElement, ReactNode, useMemo, useState } from 'react';
 import { Box } from '@mui/material';
 import { ChartsProvider, ErrorAlert, ErrorBoundary, useChartsTheme } from '@perses-dev/components';
 import { useDatasourceStore } from '@perses-dev/plugin-system';
@@ -30,6 +30,7 @@ import {
   EditJsonDialog,
   SaveChangesConfirmationDialog,
   LeaveDialog,
+  DashboardTimezone,
 } from '../../components';
 import { OnSaveDashboard, useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';
 import { PanelFocusProvider } from '../../keyboard-shortcuts';
@@ -47,6 +48,7 @@ export interface DashboardAppProps {
   // If true, browser confirmation dialog will be shown when navigating away with unsaved changes (closing tab, ...).
   isLeavingConfirmDialogEnabled?: boolean;
   dashboardTitleComponent?: ReactNode;
+  userPreferenceTimezone?: DashboardSpec['timezone'];
   onSave?: OnSaveDashboard;
   onDiscard?: (name: string, spec: DashboardSpec) => void;
 }
@@ -72,6 +74,7 @@ const DashboardAppContent = (props: DashboardAppProps): ReactElement => {
     isInitialVariableSticky,
     isLeavingConfirmDialogEnabled,
     dashboardTitleComponent,
+    userPreferenceTimezone,
     onSave,
     onDiscard,
   } = props;
@@ -130,6 +133,14 @@ const DashboardAppContent = (props: DashboardAppProps): ReactElement => {
     disabled: disableShortcuts,
   });
 
+  const dashboardTimezone = useMemo(
+    (): DashboardTimezone => ({
+      specTimezone: dashboardResource.spec.timezone,
+      userPreferenceTimezone,
+    }),
+    [dashboardResource.spec, userPreferenceTimezone]
+  );
+
   return (
     <Box
       sx={{
@@ -142,6 +153,7 @@ const DashboardAppContent = (props: DashboardAppProps): ReactElement => {
     >
       <DashboardToolbar
         dashboardName={dashboardResource.metadata.name}
+        dashboardTimezone={dashboardTimezone}
         dashboardTitleComponent={dashboardTitleComponent}
         initialVariableIsSticky={isInitialVariableSticky}
         onSave={onSave}