Merge branch 'feature/RI-5934-format-timestamps-across-entire-application' into e2e/feature/RI-5934-format-timestamps-across-entire-application

Author: mariasergeenko

redisinsight/ui/src/constants/datetime.ts

@@ -1,6 +1,6 @@
 export const dateTimeOptions = [
   { inputDisplay: 'HH:mm:ss.SSS d MMM yyyy', value: 'HH:mm:ss.SSS d MMM yyyy' },
-  { inputDisplay: 'yyyy-MM-ddHH:mm:ss.sss', value: 'yyyy-MM-ddHH:mm:ss.sss' },
+  { inputDisplay: 'yyyy-MM-dd HH:mm:ss.sss', value: 'yyyy-MM-dd HH:mm:ss.sss' },
   { inputDisplay: 'dd-MMM-yyyy HH:mm:ss.SSS', value: 'dd-MMM-yyyy HH:mm:ss.SSS' },
   { inputDisplay: 'dd.MM.yyyy HH:mm:ss', value: 'dd.MM.yyyy HH:mm:ss' }
 ]

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

@@ -16,7 +16,7 @@ import {
 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 { KeyTypes, TableCellTextAlignment, TEXT_FAILED_CONVENT_FORMATTER } from 'uiSrc/constants'
+import { DATETIME_FORMATTER_DEFAULT, KeyTypes, TableCellTextAlignment, TEXT_FAILED_CONVENT_FORMATTER, TimezoneOption } 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'
@@ -249,7 +249,11 @@ 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, config?.timezone)
+      const formattedTimestamp = timestamp.length > MAX_FORMAT_LENGTH_STREAM_TIMESTAMP ? '-' : formatTimestamp(
+        timestamp,
+        config?.dateFormat || DATETIME_FORMATTER_DEFAULT,
+        config?.timezone || TimezoneOption.Local
+      )
 
       return (
         <div>

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx

@@ -240,7 +240,7 @@ const DateTimeFormatter = () => {
         onChange={(id) => onRadioOptionChange(id)}
       />
       <EuiSpacer size="m" />
-      <EuiText className={styles.dateTimeSubtitle} color="subdued">Timezone</EuiText>
+      <EuiText className={styles.dateTimeSubtitle} color="subdued">Specifies the time zone to be used in Redis Insight:</EuiText>
       <EuiSpacer size="s" />
       <div>
         <EuiFlexGroup alignItems="center">

redisinsight/ui/src/utils/formatters/valueFormatters.tsx

@@ -9,7 +9,7 @@ import JSONBigInt from 'json-bigint'
 import { store } from 'uiSrc/slices/store'
 
 import JSONViewer from 'uiSrc/components/json-viewer/JSONViewer'
-import { KeyValueFormat } from 'uiSrc/constants'
+import { DATETIME_FORMATTER_DEFAULT, KeyValueFormat, TimezoneOption } from 'uiSrc/constants'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import {
   anyToBuffer,
@@ -177,7 +177,12 @@ const formattingBuffer = (
           // if seconds - add milliseconds (since JS Date works only with milliseconds)
           const timestamp = convertTimestampToMilliseconds(value)
           const config = get(store.getState(), 'user.settings.config', null)
-          return { value: formatTimestamp(timestamp, config?.dateFormat, config?.timezone), isValid: true }
+          return { value: formatTimestamp(
+            timestamp,
+            config?.dateFormat || DATETIME_FORMATTER_DEFAULT,
+            config?.timezone || TimezoneOption.Local,
+          ),
+          isValid: true }
         }
       } catch (e) {
         // if error return default