OU-1264: use TimZoneProvider with default UTC timezone

Author: tremes

web/cypress/component/mocks/OlsToolUIPersesWrapper.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
-export const OlsToolUIPersesWrapper = ({ children, initialTimeRange }) => (
-  <div data-testid="perses-wrapper" data-time-range={JSON.stringify(initialTimeRange)}>
+export const OlsToolUIPersesWrapper = ({ children, initialTimeRange, initialTimeZone = 'local' }) => (
+  <div
+    data-testid="perses-wrapper"
+    data-time-range={JSON.stringify(initialTimeRange)}
+    data-timezone={initialTimeZone}
+  >
     {children}
   </div>
 );

web/cypress/component/ols-tool-ui/ShowTimeseries.cy.tsx

@@ -108,4 +108,10 @@ describe('ShowTimeseries', () => {
         });
     });
   });
+
+  it('timezone support: defaults to UTC when not specified', () => {
+    cy.mount(<ShowTimeseries tool={tool} />);
+    cy.get('[data-testid="perses-wrapper"]')
+      .should('have.attr', 'data-timezone', 'UTC');
+  });
 });

web/src/components/ols-tool-ui/ShowTimeseries.tsx

@@ -22,6 +22,7 @@ export const ShowTimeseries: React.FC<{ tool: ShowTimeseriesTool }> = ({ tool })
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { query, title, description, start, end, duration } = tool.args;
   const timeRange = useTimeRange(start, end, duration);
+
   const queryDescription = t('Query: {{query}}', { query: query });
   const definitions = [
     {
@@ -34,7 +35,7 @@ export const ShowTimeseries: React.FC<{ tool: ShowTimeseriesTool }> = ({ tool })
 
   return (
     <>
-      <OlsToolUIPersesWrapper initialTimeRange={timeRange}>
+      <OlsToolUIPersesWrapper initialTimeRange={timeRange} initialTimeZone="UTC">
         <DataQueriesProvider
           definitions={definitions}
           options={{ suggestedStepMs: 15000, mode: 'range' }}

web/src/components/ols-tool-ui/helpers/OlsToolUIPersesWrapper.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { VariableProvider } from '@perses-dev/dashboards';
 import { TimeRangeProviderBasic } from '@perses-dev/plugin-system';
+import { TimeZoneProvider } from '@perses-dev/components';
 import type { DurationString, TimeRangeValue } from '@perses-dev/core';
 
 import {
@@ -32,13 +33,15 @@ export const OlsToolUIPersesWrapper: React.FC<OlsToolUIPersesWrapperProps> = ({
   return (
     <QueryClientProvider client={queryClient}>
       <PersesWrapper project={null}>
-        <TimeRangeProviderBasic initialTimeRange={initialTimeRange}>
-          <VariableProvider>
-            <PersesPrometheusDatasourceWrapper queries={[]}>
-              <div style={{ width: '100%', height: height }}>{children}</div>
-            </PersesPrometheusDatasourceWrapper>
-          </VariableProvider>
-        </TimeRangeProviderBasic>
+        <TimeZoneProvider timeZone="UTC">
+          <TimeRangeProviderBasic initialTimeRange={initialTimeRange}>
+            <VariableProvider>
+              <PersesPrometheusDatasourceWrapper queries={[]}>
+                <div style={{ width: '100%', height: height }}>{children}</div>
+              </PersesPrometheusDatasourceWrapper>
+            </VariableProvider>
+          </TimeRangeProviderBasic>
+        </TimeZoneProvider>
       </PersesWrapper>
     </QueryClientProvider>
   );