Merge pull request #3665 from RedisInsight/fe/feature/RI-5965-add-a-timestamp-formatter

RI-5965 Added a new timestamp formatter

Author: mariasergeenko

redisinsight/ui/src/constants/keys.ts

@@ -148,8 +148,11 @@ export enum KeyValueFormat {
   Pickle = 'Pickle',
   Vector32Bit = 'Vector 32-bit',
   Vector64Bit = 'Vector 64-bit',
+  DateTime = 'DateTime',
 }
 
+export const DATETIME_FORMATTER_DEFAULT = 'HH:mm:ss.SSS d MMM yyyy'
+
 export enum KeyValueCompressor {
   GZIP = 'GZIP',
   ZSTD = 'ZSTD',

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/constants.ts

@@ -49,6 +49,10 @@ export const KEY_VALUE_FORMATTER_OPTIONS = [
     text: 'Vector 64-bit',
     value: KeyValueFormat.Vector64Bit,
   },
+  {
+    text: 'Timestamp to DateTime',
+    value: KeyValueFormat.DateTime,
+  }
 ]
 
 export const KEY_VALUE_JSON_FORMATTER_OPTIONS = []

redisinsight/ui/src/utils/formatters/utils.ts

@@ -11,3 +11,17 @@ export const bufferFormatRangeItems = (
 
   return newItems
 }
+
+export const convertTimestampToMilliseconds = (value: string): number => {
+  // seconds, microseconds, nanoseconds to milliseconds
+  switch (parseInt(value, 10).toString().length) {
+    case 10:
+      return +value * 1000
+    case 16:
+      return +value / 1000
+    case 19:
+      return +value / 1000000
+    default:
+      return +value
+  }
+}

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

@@ -6,9 +6,10 @@ import { serialize, unserialize } from 'php-serialize'
 import { getData } from 'rawproto'
 import { Parser } from 'pickleparser'
 import JSONBigInt from 'json-bigint'
+import { format as formatDateFns } from 'date-fns'
 
 import JSONViewer from 'uiSrc/components/json-viewer/JSONViewer'
-import { KeyValueFormat } from 'uiSrc/constants'
+import { DATETIME_FORMATTER_DEFAULT, KeyValueFormat } from 'uiSrc/constants'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import {
   anyToBuffer,
@@ -23,6 +24,8 @@ import {
   Maybe,
   bufferToFloat64Array,
   bufferToFloat32Array,
+  checkTimestamp,
+  convertTimestampToMilliseconds,
 } from 'uiSrc/utils'
 import { reSerializeJSON } from 'uiSrc/utils/formatters/json'
 
@@ -149,6 +152,20 @@ const formattingBuffer = (
         return { value: bufferToUTF8(reply), isValid: false }
       }
     }
+    case KeyValueFormat.DateTime: {
+      const value = bufferToUnicode(reply)?.trim()
+      try {
+        if (checkTimestamp(value)) {
+          // formatting to DateTime only from timestamp(the number of milliseconds since January 1, 1970, UTC).
+          // if seconds - add milliseconds (since JS Date works only with milliseconds)
+          const timestamp = convertTimestampToMilliseconds(value)
+          return { value: formatDateFns(timestamp, DATETIME_FORMATTER_DEFAULT), isValid: true }
+        }
+      } catch (e) {
+        // if error return default
+      }
+      return { value, isValid: false }
+    }
     default: return { value: bufferToUnicode(reply), isValid: true }
   }
 }

redisinsight/ui/src/utils/tests/formatters/valueFormatters.spec.ts

@@ -1,7 +1,8 @@
+import { format } from 'date-fns'
 import { encode } from 'msgpackr'
 import { serialize } from 'php-serialize'
-import { KeyValueFormat } from 'uiSrc/constants'
-import { anyToBuffer, bufferToSerializedFormat, stringToBuffer, stringToSerializedBufferFormat } from 'uiSrc/utils'
+import { DATETIME_FORMATTER_DEFAULT, KeyValueFormat } from 'uiSrc/constants'
+import { anyToBuffer, bufferToSerializedFormat, formattingBuffer, stringToBuffer, stringToSerializedBufferFormat } from 'uiSrc/utils'
 
 describe('bufferToSerializedFormat', () => {
   describe(KeyValueFormat.JSON, () => {
@@ -174,3 +175,43 @@ describe('stringToSerializedBufferFormat', () => {
     })
   })
 })
+
+describe('formattingBuffer', () => {
+  describe(KeyValueFormat.DateTime, () => {
+    describe('should properly format timestamp number', () => {
+      // Since we formatting with local timezome, we cannot hardcode the expected string result
+      const expected = new Date(1722593319805)
+      const testValues = [new Uint8Array([49, 55, 50, 50, 53, 57, 51, 51, 49, 57, 56, 48, 53])].map((v) => ({
+        input: anyToBuffer(v),
+        expected: { value: format(expected, DATETIME_FORMATTER_DEFAULT), isValid: true },
+      }))
+
+      test.each(testValues)('test %j', ({ input, expected }) => {
+        expect(formattingBuffer(input, KeyValueFormat.DateTime)).toEqual(expected)
+      })
+    })
+
+    describe('should left iso strings and other strings as they are', () => {
+      const testValues = [
+        {
+          input: anyToBuffer(new Uint8Array(
+            [65, 110, 121, 32, 83, 116, 114, 105, 110, 103]
+          )),
+          expected: { value: 'Any String', isValid: false },
+        },
+        {
+          input: anyToBuffer(new Uint8Array([
+            50, 48, 50, 52, 45, 48, 56, 45,
+            48, 50, 84, 48, 48, 58, 48, 48,
+            58, 48, 48, 46, 48, 48, 48, 90
+          ])),
+          expected: { value: '2024-08-02T00:00:00.000Z', isValid: false }
+        }
+      ]
+
+      test.each(testValues)('test %j', ({ input, expected }) => {
+        expect(formattingBuffer(input, KeyValueFormat.DateTime)).toEqual(expected)
+      })
+    })
+  })
+})

redisinsight/ui/src/utils/tests/validations.spec.ts

@@ -16,6 +16,8 @@ import {
   validateConsumerGroupId,
   validateNumber,
   validateTimeoutNumber,
+  checkTimestamp,
+  checkConvertToDate,
 } from 'uiSrc/utils'
 
 const text1 = '123 123 123'
@@ -32,6 +34,39 @@ const text11 = '3.3.1'
 const text12 = '-3-2'
 const text13 = '5'
 
+const checkTimestampTests = [
+  { input: '1234567891', expected: true },
+  { input: '1234567891234', expected: true },
+  { input: '1234567891234567', expected: true },
+  { input: '1234567891234567891', expected: true },
+  { input: '1234567891.2', expected: true },
+  // it should be valid timestamp (for date < 1970)
+  { input: '-123456789', expected: true },
+  { input: '', expected: false },
+  { input: '-', expected: false },
+  { input: '0', expected: false },
+  { input: '1', expected: false },
+  { input: '123', expected: false },
+  { input: '12345678911', expected: false },
+  { input: '12345678912345', expected: false },
+  { input: '12345678912345678', expected: false },
+  { input: '1234567891.2.2', expected: false },
+  { input: '1234567891asd', expected: false },
+  { input: 'inf', expected: false },
+  { input: '-inf', expected: false },
+  { input: '1234567891:12', expected: false },
+  { input: '1234567891a12', expected: false },
+]
+
+const checkConvertToDateTests = [
+  ...checkTimestampTests,
+  { input: '2024-08-02T00:00:00.000Z', expected: true },
+  { input: '10-10-2020', expected: true },
+  { input: '10/10/2020', expected: true },
+  { input: '10/10/2020invalid', expected: false },
+  { input: 'invalid', expected: false },
+]
+
 describe('Validations utils', () => {
   describe('validateField', () => {
     it('validateField should return text without empty spaces', () => {
@@ -275,4 +310,16 @@ describe('Validations utils', () => {
         expect(result).toBe(expected)
       })
   })
+
+  describe('checkTimestamp', () => {
+    test.each(checkTimestampTests)('%j', ({ input, expected }) => {
+      expect(checkTimestamp(input)).toEqual(expected)
+    })
+  })
+
+  describe('checkConvertToDate', () => {
+    test.each(checkConvertToDateTests)('%j', ({ input, expected }) => {
+      expect(checkConvertToDate(input)).toEqual(expected)
+    })
+  })
 })

redisinsight/ui/src/utils/validations.ts

@@ -1,4 +1,5 @@
 import { floor } from 'lodash'
+import { isValid } from 'date-fns'
 
 export const MAX_TTL_NUMBER = 2_147_483_647
 export const MAX_PORT_NUMBER = 65_535
@@ -126,3 +127,41 @@ export const getApproximatePercentage = (total?: number, part: number = 0): stri
   const percent = (total ? part / total : 1) * 100
   return `${getApproximateNumber(percent)}%`
 }
+
+export const IS_NUMBER_REGEX = /^-?\d*(\.\d+)?$/
+export const IS_TIMESTAMP = /^(\d{10}|\d{13}|\d{16}|\d{19})$/
+export const IS_NEGATIVE_TIMESTAMP = /^-(\d{9}|\d{12}|\d{15}|\d{18})$/
+export const IS_INTEGER_NUMBER_REGEX = /^\d+$/
+
+const detailedTimestampCheck = (value: string) => {
+  try {
+    // test integer to be of 10, 13, 16 or 19 digits
+    const integerPart = parseInt(value, 10).toString()
+
+    if (IS_TIMESTAMP.test(integerPart) || IS_NEGATIVE_TIMESTAMP.test(integerPart)) {
+      if (integerPart.length === value.length) {
+        return true
+      }
+      // check part after dot separator (checking floating numbers)
+      const subPart = value.replace(integerPart, '')
+      return IS_INTEGER_NUMBER_REGEX.test(subPart.substring(1, subPart.length))
+    }
+    return false
+  } catch (err) {
+    // ignore errors
+    return false
+  }
+}
+
+// checks stringified number to may be a timestamp
+export const checkTimestamp = (value: string): boolean => IS_NUMBER_REGEX.test(value) && detailedTimestampCheck(value)
+
+// checks any string to may be converted to date
+export const checkConvertToDate = (value: string): boolean => {
+  // if string is not number-like, try to convert it to date
+  if (!IS_NUMBER_REGEX.test(value)) {
+    return isValid(new Date(value))
+  }
+
+  return checkTimestamp(value)
+}

tests/e2e/test-data/formatters-data.ts

@@ -11,6 +11,7 @@ import {
     Vector32BitFormatter,
     Vector64BitFormatter
 } from './formatters';
+import { DataTimeFormatter } from './formatters/DataTime';
 
 interface IFormatter {
     format: string,
@@ -36,7 +37,8 @@ export const formatters: IFormatter[] = [
     BinaryFormatter,
     PickleFormatter,
     Vector32BitFormatter,
-    Vector64BitFormatter
+    Vector64BitFormatter,
+    DataTimeFormatter
 ];
 
 export const binaryFormattersSet: IFormatter[] = [

tests/e2e/test-data/formatters/DataTime.ts

@@ -0,0 +1,7 @@
+export const DataTimeFormatter = {
+    format: 'Timestamp to DateTime',
+    fromText: '1633072800',
+    fromTextEdit: '-179064000000',
+    formattedText: '09:20:00.000 1 Oct 2021',
+    formattedTextEdit: '13:00:00.000 29 Apr 1964'
+};

tests/e2e/tests/web/critical-path/browser/formatters.e2e.ts

@@ -11,7 +11,8 @@ import {
     formattersHighlightedSet,
     formattersWithTooltipSet,
     fromBinaryFormattersSet,
-    notEditableFormattersSet
+    notEditableFormattersSet,
+    formatters
 } from '../../../../test-data/formatters-data';
 import { phpData } from '../../../../test-data/formatters';
 
@@ -233,3 +234,48 @@ notEditableFormattersSet.forEach(formatter => {
         }
     });
 });
+test('Verify that user can format timestamp value', async t => {
+    const formatterName = 'Timestamp to DateTime';
+    await browserPage.openKeyDetailsByKeyName(keysData[0].keyName);
+    //Add fields to the hash key
+    await browserPage.selectFormatter('Unicode');
+    const formatter = formatters.find(f => f.format === formatterName);
+    if (!formatter) {
+        throw new Error('Formatter  not found');
+    }
+    // add key in sec
+    const hashSec = {
+        field: 'fromTextSec',
+        value: formatter.fromText!
+    };
+    // add key in msec
+    const hashMsec = {
+        field: 'fromTextMsec',
+        value: `${formatter.fromText!}000`
+    };
+    // add key with minus
+    const hashMinusSec = {
+        field: 'fromTextEdit',
+        value: formatter.fromTextEdit!
+    };
+    //Search the added field
+    await browserPage.addFieldToHash(
+        hashSec.field, hashSec.value
+    );
+    await browserPage.addFieldToHash(
+        hashMsec.field, hashMsec.value
+    );
+    await browserPage.addFieldToHash(
+        hashMinusSec.field, hashMinusSec.value
+    );
+
+    await browserPage.searchByTheValueInKeyDetails(hashSec.field);
+    await browserPage.selectFormatter('DateTime');
+    await t.expect(await browserPage.getHashKeyValue()).eql(formatter.formattedText!, `Value is not formatted as DateTime ${formatter.fromText}`);
+
+    await browserPage.searchByTheValueInKeyDetails(hashMsec.field);
+    await t.expect(await browserPage.getHashKeyValue()).eql(formatter.formattedText!, `Value is not formatted as DateTime ${formatter.fromTextEdit}`);
+
+    await browserPage.searchByTheValueInKeyDetails(hashMinusSec.field);
+    await t.expect(await browserPage.getHashKeyValue()).eql(formatter.formattedTextEdit!, `Value is not formatted as DateTime ${formatter.fromTextEdit}`);
+});