ui: Improve timezone handling in DateTimePicker

ui/packages/shared/components/src/DateTimePicker/index.tsx

@@ -11,15 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 import {Popover} from '@headlessui/react';
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
+import moment from 'moment-timezone';
 import ReactDatePicker from 'react-datepicker';
 import {usePopper} from 'react-popper';
 
-import {convertLocalToUTCDate, convertUTCToLocalDate} from '@parca/utilities';
+import {convertLocalToUTCDate, shiftTimeAcrossTimezones} from '@parca/utilities';
 
 import {AbsoluteDate} from '../DateTimeRangePicker/utils';
 import Input from '../Input';
@@ -67,7 +68,8 @@ export const DateTimePicker = ({selected, onChange}: Props): JSX.Element => {
       onChange(new AbsoluteDate(textInput));
       return;
     }
-    const date = new Date(textInput);
+    const date =
+      timezone !== undefined ? moment.tz(textInput, timezone).toDate() : new Date(textInput);
     if (isNaN(date.getTime())) {
       setTextInput(selected.getUIString(timezone));
       return;
@@ -83,6 +85,10 @@ export const DateTimePicker = ({selected, onChange}: Props): JSX.Element => {
     };
   }, []);
 
+  const browserTimezone = useMemo(() => {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }, []);
+
   return (
     <Popover>
       {({open}) => (
@@ -118,18 +124,20 @@ export const DateTimePicker = ({selected, onChange}: Props): JSX.Element => {
             className="z-10"
           >
             <ReactDatePicker
-              selected={
-                timezone !== undefined
-                  ? selected.getTime()
-                  : convertUTCToLocalDate(selected.getTime())
-              }
+              selected={shiftTimeAcrossTimezones(
+                selected.getTime(),
+                timezone ?? 'UTC',
+                browserTimezone
+              )}
               onChange={date => {
                 if (date == null) {
                   return;
                 }
-                onChange(
-                  new AbsoluteDate(timezone !== undefined ? date : convertLocalToUTCDate(date))
-                );
+                const utcDate = shiftTimeAcrossTimezones(date, browserTimezone, timezone ?? 'UTC');
+
+                onChange(new AbsoluteDate(utcDate));
+
+                onChange(new AbsoluteDate(utcDate));
                 setIsTextInputDirty(false);
               }}
               showTimeInput

ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx

@@ -224,7 +224,7 @@ export function MetricsGraphSection({
         <button
           onClick={() => setDisplayHideMetricsGraphButton(!showMetricsGraph)}
           className={cx(
-            'hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900 z-10',
+            'hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900 z-[5]',
             showMetricsGraph && 'absolute right-0 bottom-3 !flex',
             !showMetricsGraph && 'relative !flex ml-auto'
           )}

ui/packages/shared/utilities/src/time.spec.ts

@@ -0,0 +1,36 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {describe, expect, it} from 'vitest';
+
+import {shiftTimeAcrossTimezones} from './time';
+
+describe('shiftTimeAcrossTimezones', () => {
+  it('shifts time correctly when converting between timezones shifting backwards', () => {
+    const dateInIST = new Date('2024-06-10T00:00:00Z'); // 12:00 AM IST (UTC+5:30)
+    const utcDate = shiftTimeAcrossTimezones(dateInIST, 'Asia/Kolkata', 'UTC');
+    expect(utcDate.toISOString()).toBe('2024-06-10T05:30:00.000Z'); // 5:30 AM UTC
+  });
+
+  it('shifts time correctly when converting between timezones shifting forwards', () => {
+    const dateInUTC = new Date('2024-06-10T05:30:00.000Z'); // 5:30 AM UTC
+    const istDate = shiftTimeAcrossTimezones(dateInUTC, 'UTC', 'Asia/Kolkata');
+    expect(istDate.toISOString()).toBe('2024-06-10T00:00:00.000Z'); // 12:00 AM IST (UTC+5:30)
+  });
+
+  it('returns the same date if both timezones are the same', () => {
+    const dateInIST = new Date('2024-06-10T05:30:00Z');
+    const sameDate = shiftTimeAcrossTimezones(dateInIST, 'Asia/Kolkata', 'Asia/Kolkata');
+    expect(sameDate.toISOString()).toBe('2024-06-10T05:30:00.000Z');
+  });
+});

ui/packages/shared/utilities/src/time.ts

@@ -203,3 +203,40 @@ export const millisToProtoTimestamp = (millis: number): Timestamp => {
     nanos: Math.floor((millis % 1000) * 1e6),
   };
 };
+
+function timezoneToOffset(timezone: string): string {
+  const formatter = new Intl.DateTimeFormat('en', {
+    timeZone: timezone,
+    timeZoneName: 'longOffset',
+  });
+
+  const offset =
+    formatter
+      .formatToParts(new Date())
+      .find(part => part.type === 'timeZoneName')
+      ?.value?.replace('GMT', '') ?? '+00:00';
+
+  if (offset === '') {
+    return '+00:00';
+  }
+
+  return offset;
+}
+
+export function shiftTimeAcrossTimezones(
+  date: Date,
+  fromTimezone: string,
+  toTimezone: string
+): Date {
+  if (date === null) {
+    return date;
+  }
+
+  const fromOffset = timezoneToOffset(fromTimezone);
+  const toOffset = timezoneToOffset(toTimezone);
+  const [fromHours, fromMinutes] = fromOffset.split(':').map(Number);
+  const [toHours, toMinutes] = toOffset.split(':').map(Number);
+  const [diffHours, diffMinutes] = [fromHours - toHours, fromMinutes - toMinutes];
+  const shiftedDate = new Date(date.getTime() + (diffHours * 60 + diffMinutes) * 60000);
+  return shiftedDate;
+}