[PLAT-18701] Convert timestamps to user selected timezone

Summary: This diff adds a custom hook for pulling the user's selected timezone and converting user facing timestamps to that timezone prior to displaying them.

Test Plan:
Verify the timestamp strings under different timezone choices.
{F402421}
{F402422}
{F402423}
{F402424}

Reviewers: rmadhavan, kkannan

Reviewed By: rmadhavan

Differential Revision: https://phorge.dev.yugabyte.com/D47310

Author: Jethro-M

managed/ui/src/components/JWTToken/JWTToken.tsx

@@ -6,7 +6,7 @@ import { YBLabel, YBTextarea } from '../../redesign/components';
 import { YBCopyButton } from '../common/descriptors';
 import YBLogoWithText from '../common/YBLogo/images/yb_yblogo_text.svg';
 import { isEmptyString, isNonEmptyString } from '../../utils/ObjectUtils';
-import { formatDatetime } from '../../redesign/helpers/DateUtils';
+import { useFormatDatetime } from '../../redesign/helpers/DateUtils';
 
 const useStyles = makeStyles((theme: Theme) => ({
   oidcJWTInfo: {
@@ -48,6 +48,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export const JWTToken: FC<any> = () => {
   const { t } = useTranslation();
+  const formatDatetime = useFormatDatetime();
   const helperClasses = useStyles();
   const oidcJWTToken = Cookies.get('jwt_token');
   const expiryDate = Cookies.get('expiration');

managed/ui/src/components/queries/QueryInfoSidePanel.tsx

@@ -31,9 +31,9 @@ import { adaptHistogramData } from './helpers/utils';
 import { parseFloatIfDefined } from '../xcluster/ReplicationUtils';
 import { QueryApi } from '../../redesign/helpers/constants';
 import {
-  formatDatetime,
   YB_LIVE_QUERY_TIMESTAMP_FORMAT,
-  YBTimeFormats
+  YBTimeFormats,
+  useFormatDatetime
 } from '../../redesign/helpers/DateUtils';
 
 interface QueryInfoSidePanelBaseProps {
@@ -182,10 +182,10 @@ export const QueryInfoSidePanel = ({
   isConnectionPoolEnabled
 }: QueryInfoSidePanelProps) => {
   const [currentTab, setCurrentTab] = useState<QueryInfoTab>(DEFAULT_TAB);
-  const currentUserTimezone = useSelector((state: any) => state.customer.currentUser.data.timezone);
   const { t, i18n } = useTranslation('translation', {
     keyPrefix: TRANSLATION_KEY_PREFIX
   });
+  const formatDatetime = useFormatDatetime();
   const classes = useStyles();
   const theme = useTheme();
   const handleTabChange = (_event: React.ChangeEvent<{}>, newTab: QueryInfoTab) => {
@@ -195,12 +195,12 @@ export const QueryInfoSidePanel = ({
     i18n.exists(`${TRANSLATION_KEY_PREFIX}.${key}`) ? t(key) : fallback;
 
   const formatQueryData = (
-    ysqlSlowQueryKey:
+    ysqlQueryKey:
       | YsqlLiveQueryPrimitiveFields
       | YcqlLiveQueryPrimitiveFields
       | YsqlSlowQueryPrimitiveFields
   ): string => {
-    const queryDataEntry = queryData?.[ysqlSlowQueryKey];
+    const queryDataEntry = queryData?.[ysqlQueryKey];
 
     // The following formatters expect only string or finite number types.
     // This guard is used to catch undefined values or unhandled types.
@@ -214,18 +214,17 @@ export const QueryInfoSidePanel = ({
       return NO_DATA_PLACEHOLDER_TEXT;
     }
 
-    if ((DURATION_FIELDS as readonly string[]).includes(ysqlSlowQueryKey)) {
+    if ((DURATION_FIELDS as readonly string[]).includes(ysqlQueryKey)) {
       const duration = parseFloatIfDefined(queryDataEntry);
       return duration === undefined || isNaN(duration)
         ? NO_DATA_PLACEHOLDER_TEXT
         : `${duration?.toFixed(DURATION_FIELD_DECIMALS)} ms`;
     }
 
-    if ((TIMESTAMP_FIELDS as readonly string[]).includes(ysqlSlowQueryKey)) {
+    if ((TIMESTAMP_FIELDS as readonly string[]).includes(ysqlQueryKey)) {
       return formatDatetime(
         queryDataEntry,
         YBTimeFormats.YB_DEFAULT_TIMESTAMP,
-        currentUserTimezone,
         YB_LIVE_QUERY_TIMESTAMP_FORMAT
       );
     }

managed/ui/src/components/queries/SlowQueries.js

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { Alert } from 'react-bootstrap';
 import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 import { toast } from 'react-toastify';
-import { Box, Typography, useTheme } from '@material-ui/core';
+import { Box, Typography } from '@material-ui/core';
 
 import { useSlowQueriesApi, filterBySearchTokens } from './helpers/queriesHelper';
 import { resetSlowQueries } from '../../actions/universe';
@@ -20,7 +20,7 @@ import {
   PG_15_VERSION_THRESHOLD_STABLE,
   QueryType
 } from './helpers/constants';
-import { formatDatetime } from '../../redesign/helpers/DateUtils';
+import { useFormatDatetime } from '../../redesign/helpers/DateUtils';
 import {
   compareYBSoftwareVersionsWithReleaseTrack,
   getPrimaryCluster
@@ -97,7 +97,7 @@ const SlowQueriesComponent = () => {
   const [selectedRow, setSelectedRow] = useState([]);
   const [panelState, setPanelState] = useState(PANEL_STATE.INITIAL);
   const [searchTokens, setSearchTokens] = useState([]);
-  const theme = useTheme();
+  const formatDatetime = useFormatDatetime();
   let initialColumns = initialQueryColumns;
   try {
     const cachedColumns = localStorage.getItem('__yb_slow_query_columns__');

managed/ui/src/redesign/components/YBMetrics/YBMetricGraph.tsx

@@ -14,7 +14,7 @@ import {
 
 import { CHART_RESIZE_DEBOUNCE } from '../../helpers/constants';
 import { YBMetricGraphTitle } from './YBMetricGraphTitle';
-import { formatDatetime, YBTimeFormats } from '../../helpers/DateUtils';
+import { useFormatDatetime, YBTimeFormats } from '../../helpers/DateUtils';
 import { YBMetricGraphData } from './types';
 import { getUniqueTraceId, getUniqueTraceName } from './utils';
 
@@ -50,6 +50,7 @@ type YBMetricGraphProps =
 export const YBMetricGraph = (props: YBMetricGraphProps) => {
   const { graphHeaderAccessor, metric, metricSettings, referenceLines, title, unit } = props;
   const theme = useTheme();
+  const formatDatetime = useFormatDatetime();
   const traceStrokes = Object.values(theme.palette.chart.stroke);
   const unitSuffix = unit ? ` ${unit}` : '';
 

managed/ui/src/redesign/features/continuous-backup/ContinuousBackupCard.tsx

@@ -14,7 +14,7 @@ import {
   ConfigureContinuousBackupModal,
   ConfigureContinuousBackupOperation
 } from './ConfigureContinuousBackupModal';
-import { formatDatetime } from '../../helpers/DateUtils';
+import { useFormatDatetime } from '../../helpers/DateUtils';
 import { DeleteContinuousBackupConfigModal } from './DeleteContinuousBackupConfigModal';
 
 interface ContinuousBackupCardProps {
@@ -106,6 +106,7 @@ export const ContinuousBackupCard = ({ continuousBackupConfig }: ContinuousBacku
   );
   const [isDeleteContinuousBackupModalOpen, setIsDeleteContinuousBackupModalOpen] = useState(false);
   const { t } = useTranslation('translation', { keyPrefix: TRANSLATION_KEY_PREFIX });
+  const formatDatetime = useFormatDatetime();
   const classes = useStyles();
 
   const openConfigureContinuousBackupModal = () => setIsConfigureContinuousBackupModalOpen(true);

managed/ui/src/redesign/helpers/DateUtils.tsx

@@ -69,6 +69,21 @@ export const formatDatetime = (
   return timezone ? momentObj.tz(timezone).format(timeFormat) : momentObj.format(timeFormat);
 };
 
+/**
+ * Custom hook that returns a function to format datetime with user timezone from Redux
+ */
+export const useFormatDatetime = () => {
+  const userTimezone = useSelector((state: any) => state.customer?.currentUser?.data?.timezone);
+
+  return (
+    date: moment.MomentInput,
+    timeFormat: YBTimeFormats = YBTimeFormats.YB_DEFAULT_TIMESTAMP,
+    inputTimeFormat?: string
+  ): string => {
+    return formatDatetime(date, timeFormat, userTimezone, inputTimeFormat);
+  };
+};
+
 type FormatDateProps = {
   date: Date | string | number;
   timeFormat: YBTimeFormats;