Merge pull request #3761 from RedisInsight/fe/bugfix/RI-5934-bugfixes-for-formating-timestamps

Fe/bugfix/ri 5934 bugfixes for formating timestamps

Author: mariasergeenko

redisinsight/ui/src/components/formated-date/FormatedDate.tsx

@@ -15,6 +15,8 @@ const FormatedDate = ({ date }: Props) => {
   const dateFormat = config?.dateFormat || DATETIME_FORMATTER_DEFAULT
   const timezone = config?.timezone || TimezoneOption.Local
 
+  if (!date) return null
+
   const formatedDate = formatTimestamp(date, dateFormat, timezone)
 
   return (

redisinsight/ui/src/components/range-filter/RangeFilter.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useState, useEffect, useRef } from 'react'
 import cx from 'classnames'
 
-import { getFormatTime } from 'uiSrc/utils/streamUtils'
-
+import { FormatedDate } from '../formated-date'
 import styles from './styles.module.scss'
 
 const buttonString = 'Reset Filter'
@@ -138,8 +137,8 @@ const RangeFilter = (props: Props) => {
     return (
       <div data-testid="mock-fill-range" className={styles.rangeWrapper}>
         <div className={cx(styles.sliderRange, styles.mockRange)}>
-          <div className={styles.sliderLeftValue} data-testid="range-left-timestamp">{getFormatTime(start?.toString())}</div>
-          <div className={styles.sliderRightValue} data-testid="range-right-timestamp">{getFormatTime(end?.toString())}</div>
+          <div className={styles.sliderLeftValue} data-testid="range-left-timestamp"><FormatedDate date={start?.toString()} /></div>
+          <div className={styles.sliderRightValue} data-testid="range-right-timestamp"><FormatedDate date={end?.toString()} /></div>
         </div>
       </div>
     )
@@ -192,7 +191,7 @@ const RangeFilter = (props: Props) => {
                 })
               }
             >
-              {getFormatTime(startVal?.toString())}
+              <FormatedDate date={startVal?.toString()} />
             </div>
             <div className={
               cx(styles.sliderRightValue,
@@ -202,7 +201,7 @@ const RangeFilter = (props: Props) => {
                 })
               }
             >
-              {getFormatTime(endVal?.toString())}
+              <FormatedDate date={endVal?.toString()} />
             </div>
           </div>
         </div>

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx

@@ -21,13 +21,13 @@ import {
 import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
 import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
 import { bufferToString, consumerGroupIdRegex, formatLongName, isEqualBuffers, validateConsumerGroupId } from 'uiSrc/utils'
-import { getFormatTime } from 'uiSrc/utils/streamUtils'
 import { TableCellTextAlignment } from 'uiSrc/constants'
 import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import EditablePopover from 'uiSrc/pages/browser/modules/key-details/shared/editable-popover'
 
+import { FormatedDate } from 'uiSrc/components'
 import { ConsumerDto, ConsumerGroupDto, UpdateConsumerGroupDto } from 'apiSrc/modules/browser/stream/dto'
 
 import GroupsView from './GroupsView'
@@ -240,7 +240,14 @@ const GroupsViewWrapper = (props: Props) => {
         const smallestTimestamp = smallestPendingId?.viewValue?.split('-')?.[0]
         const greatestTimestamp = greatestPendingId?.viewValue?.split('-')?.[0]
 
-        const tooltipContent = `${getFormatTime(smallestTimestamp)} – ${getFormatTime(greatestTimestamp)}`
+        const tooltipContent = (
+          <>
+            <FormatedDate date={smallestTimestamp} />
+            <span>&nbsp;–&nbsp;</span>
+            <FormatedDate date={greatestTimestamp} />
+          </>
+        )
+
         return (
           <EuiText size="s" style={{ maxWidth: '100%' }}>
             <div style={{ display: 'flex' }} className="truncateText" data-testid={`group-pending-${viewName}`}>
@@ -282,10 +289,10 @@ const GroupsViewWrapper = (props: Props) => {
                 <EuiText color="subdued" size="s" style={{ maxWidth: '100%' }}>
                   <div
                     className="truncateText streamItem"
-                    style={{ display: 'flex' }}
+                    style={{ display: 'flex', maxWidth: '190px' }}
                     data-testid={`stream-group-date-${id}`}
                   >
-                    {getFormatTime(timestamp)}
+                    <FormatedDate date={timestamp} />
                   </div>
                 </EuiText>
                 <EuiText size="s" style={{ maxWidth: '100%' }}>

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx

@@ -9,21 +9,20 @@ import {
   createDeleteFieldHeader,
   createDeleteFieldMessage,
   createTooltipContent,
-  formatTimestamp,
   formattingBuffer,
   stringToBuffer
 } from 'uiSrc/utils'
 import { streamDataSelector, deleteStreamEntry } from 'uiSrc/slices/browser/stream'
 import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
 import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
-import { DATETIME_FORMATTER_DEFAULT, KeyTypes, TableCellTextAlignment, TEXT_FAILED_CONVENT_FORMATTER, TimezoneOption } from 'uiSrc/constants'
+import { KeyTypes, TableCellTextAlignment, TEXT_FAILED_CONVENT_FORMATTER } from 'uiSrc/constants'
 import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { keysSelector, selectedKeySelector, updateSelectedKeyRefreshTime } from 'uiSrc/slices/browser/keys'
 import { decompressingBuffer } from 'uiSrc/utils/decompressors'
 
-import { userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import { FormattedValue } from 'uiSrc/pages/browser/modules/key-details/shared'
+import { FormatedDate } from 'uiSrc/components'
 import { StreamEntryDto } from 'apiSrc/modules/browser/stream/dto'
 import StreamDataView from './StreamDataView'
 import styles from './StreamDataView/styles.module.scss'
@@ -48,7 +47,6 @@ const StreamDataViewWrapper = (props: Props) => {
   const { id: instanceId, compressor = null } = useSelector(connectedInstanceSelector)
   const { viewType: browserViewType } = useSelector(keysSelector)
   const { viewFormat: viewFormatProp } = useSelector(selectedKeySelector)
-  const config = useSelector(userSettingsConfigSelector)
 
   const dispatch = useDispatch()
 
@@ -249,18 +247,15 @@ const StreamDataViewWrapper = (props: Props) => {
     render: function Id({ id }: StreamEntryDto) {
       const idStr = bufferToString(id, viewFormat)
       const timestamp = idStr.split('-')?.[0]
-      const formattedTimestamp = timestamp.length > MAX_FORMAT_LENGTH_STREAM_TIMESTAMP ? '-' : formatTimestamp(
-        timestamp,
-        config?.dateFormat || DATETIME_FORMATTER_DEFAULT,
-        config?.timezone || TimezoneOption.Local
-      )
 
       return (
         <div>
           {id.length < MAX_VISIBLE_LENGTH_STREAM_TIMESTAMP && (
             <EuiText color="subdued" size="s" style={{ maxWidth: '100%' }}>
               <div className="streamItem truncateText" style={{ display: 'flex' }} data-testid={`stream-entry-${id}-date`}>
-                {formattedTimestamp}
+                {timestamp.length > MAX_FORMAT_LENGTH_STREAM_TIMESTAMP ? '-' : (
+                  <FormatedDate date={timestamp} />
+                )}
               </div>
             </EuiText>
           )}