FE: Customize user timezone (#1173)

Co-authored-by: Leshe4ka <[email protected]>
Co-authored-by: German Osin <[email protected]>
Co-authored-by: Roman Zabaluev <[email protected]>

Author: 4 people

frontend/src/components/ConsumerGroups/Details/ResetOffsets/Form.tsx

@@ -23,6 +23,7 @@ import useAppParams from 'lib/hooks/useAppParams';
 import { useResetConsumerGroupOffsetsMutation } from 'lib/hooks/api/consumers';
 import { FlexFieldset, StyledForm } from 'components/common/Form/Form.styled';
 import ControlledSelect from 'components/common/Select/ControlledSelect';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 import * as S from './ResetOffsets.styled';
 
@@ -38,6 +39,7 @@ const resetTypeOptions = Object.values(ConsumerGroupOffsetsResetType).map(
 
 const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
   const navigate = useNavigate();
+  const { getDateInCurrentTimezone } = useTimezone();
   const routerParams = useAppParams<ClusterGroupParam>();
   const reset = useResetConsumerGroupOffsetsMutation(routerParams);
   const topicOptions = React.useMemo(
@@ -142,8 +144,12 @@ const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
                   render={({ field: { onChange, onBlur, value, ref } }) => (
                     <S.DatePickerInput
                       ref={ref}
-                      selected={new Date(value as number)}
-                      onChange={(e: Date | null) => onChange(e?.getTime())}
+                      selected={getDateInCurrentTimezone(
+                        new Date(value as number)
+                      )}
+                      onChange={(selectedDate: Date | null) => {
+                        onChange(selectedDate?.getTime());
+                      }}
                       onBlur={onBlur}
                     />
                   )}

frontend/src/components/NavBar/NavBar.tsx

@@ -12,6 +12,7 @@ import ProductHuntIcon from 'components/common/Icons/ProductHuntIcon';
 import { Button } from 'components/common/Button/Button';
 import MenuIcon from 'components/common/Icons/MenuIcon';
 
+import { UserTimezone } from './UserTimezone/UserTimezone';
 import UserInfo from './UserInfo/UserInfo';
 import * as S from './NavBar.styled';
 
@@ -73,6 +74,8 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
         </S.NavbarBrand>
       </S.NavbarBrand>
       <S.NavbarSocial>
+        <UserTimezone />
+
         <Select
           options={options}
           value={themeMode}

frontend/src/components/NavBar/UserTimezone/UserTimezone.styled.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const SelectedTimezoneContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  width: 320px;
+  flex-direction: column;
+  max-height: 640px;
+  gap: 8px;
+`;
+
+export const InputContainer = styled.div`
+  position: sticky;
+  top: 0;
+  background-color: white;
+  z-index: 1;
+`;
+
+export const ItemsContainer = styled.div`
+  overflow-y: auto;
+`;

frontend/src/components/NavBar/UserTimezone/UserTimezone.tsx

@@ -0,0 +1,75 @@
+import { Button } from 'components/common/Button/Button';
+import ChevronDownIcon from 'components/common/Icons/ChevronDownIcon';
+import { Dropdown, DropdownItem } from 'components/common/Dropdown';
+import React, { useMemo, useState } from 'react';
+import Input from 'components/common/Input/Input';
+import { TIMEZONES, useTimezone } from 'lib/hooks/useTimezones';
+
+import * as S from './UserTimezone.styled';
+
+export const UserTimezone = () => {
+  const { currentTimezone, availableTimezones, setTimezone } = useTimezone();
+
+  const [searchValue, setSearchValue] = useState('');
+
+  const filteredTimezones = useMemo(() => {
+    if (!searchValue.trim()) return availableTimezones;
+
+    const searchLower = searchValue.toLowerCase();
+    return TIMEZONES.filter(
+      (timezone) =>
+        timezone.value.toLowerCase().includes(searchLower) ||
+        timezone.offset.toLowerCase().includes(searchLower)
+    );
+  }, [searchValue]);
+
+  const handleTimezoneSelect = (timezone: typeof currentTimezone) => {
+    setTimezone(timezone);
+    setSearchValue('');
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
+  return (
+    <Dropdown
+      onClose={() => setSearchValue('')}
+      align="center"
+      aria-label="user-timezone-dropdown"
+      openBtnEl={
+        <Button buttonType="text" buttonSize="L">
+          <S.SelectedTimezoneContainer>
+            <p>{currentTimezone.UTCOffset}</p>
+            <ChevronDownIcon fill="currentColor" width="16" height="16" />
+          </S.SelectedTimezoneContainer>
+        </Button>
+      }
+    >
+      <S.ContentContainer>
+        <S.InputContainer>
+          <Input
+            id="user-timezone-search"
+            type="text"
+            placeholder="Search timezone..."
+            value={searchValue}
+            onChange={handleSearchChange}
+            inputSize="M"
+            search
+          />
+        </S.InputContainer>
+
+        <S.ItemsContainer>
+          {filteredTimezones.map((timezone) => (
+            <DropdownItem
+              key={timezone.value}
+              onClick={() => handleTimezoneSelect(timezone)}
+            >
+              {timezone.label}
+            </DropdownItem>
+          ))}
+        </S.ItemsContainer>
+      </S.ContentContainer>
+    </Dropdown>
+  );
+};

frontend/src/components/Topics/Topic/Messages/Message.tsx

@@ -9,6 +9,7 @@ import { JSONPath } from 'jsonpath-plus';
 import Ellipsis from 'components/common/Ellipsis/Ellipsis';
 import WarningRedIcon from 'components/common/Icons/WarningRedIcon';
 import Tooltip from 'components/common/Tooltip/Tooltip';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 import MessageContent from './MessageContent/MessageContent';
 import * as S from './MessageContent/MessageContent.styled';
@@ -41,6 +42,7 @@ const Message: React.FC<Props> = ({
   keyFilters,
   contentFilters,
 }) => {
+  const { currentTimezone } = useTimezone();
   const [isOpen, setIsOpen] = React.useState(false);
   const savedMessageJson = {
     Value: value,
@@ -107,7 +109,9 @@ const Message: React.FC<Props> = ({
         <td>{offset}</td>
         <td>{partition}</td>
         <td>
-          <div>{formatTimestamp(timestamp)}</div>
+          <div>
+            {formatTimestamp({ timestamp, timezone: currentTimezone.value })}
+          </div>
         </td>
         <S.DataCell title={key}>
           <Ellipsis text={renderFilteredJson(key, keyFilters)}>

frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx

@@ -3,6 +3,7 @@ import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 import * as S from './MessageContent.styled';
 
@@ -31,6 +32,8 @@ const MessageContent: React.FC<MessageContentProps> = ({
   keySerde,
   valueSerde,
 }) => {
+  const { currentTimezone } = useTimezone();
+
   const [activeTab, setActiveTab] = React.useState<Tab>('content');
   const activeTabContent = () => {
     switch (activeTab) {
@@ -103,7 +106,12 @@ const MessageContent: React.FC<MessageContentProps> = ({
             <S.Metadata>
               <S.MetadataLabel>Timestamp</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{formatTimestamp(timestamp)}</S.MetadataValue>
+                <S.MetadataValue>
+                  {formatTimestamp({
+                    timestamp,
+                    timezone: currentTimezone.value,
+                  })}
+                </S.MetadataValue>
                 <S.MetadataMeta>Timestamp type: {timestampType}</S.MetadataMeta>
               </span>
             </S.Metadata>

frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx

@@ -65,7 +65,7 @@ describe('Message component', () => {
     expect(screen.getByText(mockMessage.value as string)).toBeInTheDocument();
     expect(screen.getByText(mockMessage.key as string)).toBeInTheDocument();
     expect(
-      screen.getByText(formatTimestamp(mockMessage.timestamp))
+      screen.getByText(formatTimestamp({ timestamp: mockMessage.timestamp }))
     ).toBeInTheDocument();
     expect(screen.getByText(mockMessage.offset.toString())).toBeInTheDocument();
     expect(

frontend/src/components/Topics/Topic/Statistics/Indicators/Total.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import * as Metrics from 'components/common/Metrics';
 import { TopicAnalysisStats } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 const Total: React.FC<TopicAnalysisStats> = ({
   totalMsgs,
@@ -14,14 +15,16 @@ const Total: React.FC<TopicAnalysisStats> = ({
   approxUniqKeys,
   approxUniqValues,
 }) => {
+  const { currentTimezone } = useTimezone();
+
   return (
     <Metrics.Section title="Messages">
       <Metrics.Indicator label="Total number">{totalMsgs}</Metrics.Indicator>
       <Metrics.Indicator label="Offsets min-max">
         {`${minOffset} - ${maxOffset}`}
       </Metrics.Indicator>
       <Metrics.Indicator label="Timestamp min-max">
-        {`${formatTimestamp(minTimestamp)} - ${formatTimestamp(maxTimestamp)}`}
+        {`${formatTimestamp({ timestamp: minTimestamp, timezone: currentTimezone.value })} - ${formatTimestamp({ timestamp: maxTimestamp, timezone: currentTimezone.value })}`}
       </Metrics.Indicator>
       <Metrics.Indicator label="Null keys">{nullKeys}</Metrics.Indicator>
       <Metrics.Indicator

frontend/src/components/Topics/Topic/Statistics/Metrics.tsx

@@ -16,6 +16,7 @@ import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { calculateTimer, formatTimestamp } from 'lib/dateTimeHelpers';
 import { Action, ResourceType } from 'generated-sources';
 import { ActionButton } from 'components/common/ActionComponent';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 import * as S from './Statistics.styles';
 import Total from './Indicators/Total';
@@ -25,6 +26,7 @@ import { LabelValue } from './Statistics.styles';
 
 const Metrics: React.FC = () => {
   const params = useAppParams<RouteParamsClusterTopic>();
+  const { currentTimezone } = useTimezone();
 
   const [isAnalyzing, setIsAnalyzing] = useState(true);
   const analyzeTopic = useAnalyzeTopic(params);
@@ -69,10 +71,14 @@ const Metrics: React.FC = () => {
         <List>
           <Label>Started at</Label>
           <LabelValue>
-            {formatTimestamp(data.progress.startedAt, {
-              hour: 'numeric',
-              minute: 'numeric',
-              second: 'numeric',
+            {formatTimestamp({
+              timestamp: data.progress.startedAt,
+              format: {
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric',
+              },
+              timezone: currentTimezone.value,
             })}
           </LabelValue>
           <Label>Passed since start</Label>
@@ -100,7 +106,12 @@ const Metrics: React.FC = () => {
   return (
     <>
       <S.ActionsBar>
-        <S.CreatedAt>{formatTimestamp(data?.result?.finishedAt)}</S.CreatedAt>
+        <S.CreatedAt>
+          {formatTimestamp({
+            timezone: currentTimezone.value,
+            timestamp: data?.result?.finishedAt,
+          })}
+        </S.CreatedAt>
         <ActionButton
           onClick={async () => {
             await analyzeTopic.mutateAsync();

frontend/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx

@@ -8,6 +8,7 @@ import {
 } from 'components/common/PropertiesList/PropertiesList.styled';
 import { TopicAnalysisStats } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 import * as S from './Statistics.styles';
 
@@ -25,6 +26,9 @@ const PartitionInfoRow: React.FC<{ row: Row<TopicAnalysisStats> }> = ({
     keySize,
     valueSize,
   } = row.original;
+
+  const { currentTimezone } = useTimezone();
+
   return (
     <S.PartitionInfo>
       <div>
@@ -35,9 +39,19 @@ const PartitionInfoRow: React.FC<{ row: Row<TopicAnalysisStats> }> = ({
           <Label>Total size</Label>
           <BytesFormatted value={(keySize?.sum || 0) + (valueSize?.sum || 0)} />
           <Label>Min. timestamp</Label>
-          <span>{formatTimestamp(minTimestamp)}</span>
+          <span>
+            {formatTimestamp({
+              timestamp: minTimestamp,
+              timezone: currentTimezone.value,
+            })}
+          </span>
           <Label>Max. timestamp</Label>
-          <span>{formatTimestamp(maxTimestamp)}</span>
+          <span>
+            {formatTimestamp({
+              timestamp: maxTimestamp,
+              timezone: currentTimezone.value,
+            })}
+          </span>
           <Label>Null keys amount</Label>
           <span>{nullKeys}</span>
           <Label>Null values amount</Label>