#RI-2174 - change ttl format

Author: Roman.Sergeenko

redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx

@@ -16,7 +16,7 @@ import {
   formatLongName,
   replaceSpaces,
   truncateTTLToDuration,
-  truncateTTLToRange,
+  truncateTTLToFirstUnit,
   truncateTTLToSeconds,
 } from 'uiSrc/utils'
 import {
@@ -192,7 +192,7 @@ const KeyList = (props: Props) => {
     },
     {
       id: 'ttl',
-      label: 'TTL(s)',
+      label: 'TTL',
       absoluteWidth: 65,
       minWidth: 65,
       truncateText: true,
@@ -221,7 +221,7 @@ const KeyList = (props: Props) => {
                   </>
                 )}
               >
-                <>{truncateTTLToRange(cellData)}</>
+                <>{truncateTTLToFirstUnit(cellData)}</>
               </EuiToolTip>
             </div>
           </EuiText>

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

@@ -1,5 +1,6 @@
 import {
   truncateTTLToDuration,
+  truncateTTLToFirstUnit,
   truncateTTLToRange,
   truncateTTLToSeconds,
 } from '../truncateTTL'
@@ -101,16 +102,15 @@ describe('Truncate TTL util tests', () => {
       const expectedResponse2 = '25 min, 34 s'
       const expectedResponse3 = '15 h, 5 min, 34 s'
       const expectedResponse4 = '1 mo, 19 d, 1 h, 33 min, 54 s'
-      // TODO started failing
-      // const expectedResponse5 = '3 yr, 6 mo, 19 d, 10 h, 32 min, 10 s';
-      // const expectedResponse6 = '67 yr, 2 mo, 6 d, 12 h, 38 min, 20 s';
+      const expectedResponse5 = '3 yr, 6 mo, 19 d, 10 h, 32 min, 10 s'
+      const expectedResponse6 = '67 yr, 2 mo, 6 d, 12 h, 38 min, 20 s'
 
       expect(truncateTTLToDuration(ttl1)).toEqual(expectedResponse1)
       expect(truncateTTLToDuration(ttl2)).toEqual(expectedResponse2)
       expect(truncateTTLToDuration(ttl3)).toEqual(expectedResponse3)
       expect(truncateTTLToDuration(ttl4)).toEqual(expectedResponse4)
-      // expect(truncateTTLToDuration(ttl5)).toEqual(expectedResponse5);
-      // expect(truncateTTLToDuration(ttl6)).toEqual(expectedResponse6);
+      expect(truncateTTLToDuration(ttl5)).toEqual(expectedResponse5)
+      expect(truncateTTLToDuration(ttl6)).toEqual(expectedResponse6)
     })
   })
 
@@ -132,4 +132,29 @@ describe('Truncate TTL util tests', () => {
       expect(truncateTTLToSeconds(ttl4)).toEqual(expectedResponse4)
     })
   })
+
+  describe('truncateTTLToFirstUnit', () => {
+    it('truncateTTLToFirstUnit should return appropriate value', () => {
+      const ttl1 = 100
+      const ttl2 = 1_534
+      const ttl3 = 54_334
+      const ttl4 = 4_325_634
+      const ttl5 = 112_012_330
+      const ttl6 = 2_120_042_300
+
+      const expectedResponse1 = '1 min' // '1 min, 40 s'
+      const expectedResponse2 = '25 min' // '25 min, 34 s'
+      const expectedResponse3 = '15 h' // '15 h, 5 min, 34 s'
+      const expectedResponse4 = '1 mo' // '1 mo, 19 d, 1 h, 33 min, 54 s'
+      const expectedResponse5 = '3 yr' // '3 yr, 6 mo, 19 d, 10 h, 32 min, 10 s'
+      const expectedResponse6 = '67 yr' // '67 yr, 2 mo, 6 d, 12 h, 38 min, 20 s'
+
+      expect(truncateTTLToFirstUnit(ttl1)).toEqual(expectedResponse1)
+      expect(truncateTTLToFirstUnit(ttl2)).toEqual(expectedResponse2)
+      expect(truncateTTLToFirstUnit(ttl3)).toEqual(expectedResponse3)
+      expect(truncateTTLToFirstUnit(ttl4)).toEqual(expectedResponse4)
+      expect(truncateTTLToFirstUnit(ttl5)).toEqual(expectedResponse5)
+      expect(truncateTTLToFirstUnit(ttl6)).toEqual(expectedResponse6)
+    })
+  })
 })

redisinsight/ui/src/utils/truncateTTL.ts

@@ -3,6 +3,7 @@ import { isNumber } from 'lodash'
 
 import { MAX_TTL_NUMBER } from './validations'
 
+const TRUNCATE_DELIMITER = ', '
 // Replace default strings of duration to cutted
 // 94 years, 9 month, 3 minutes => 94 yr, 9mo, 3min
 const cutDurationText = (text = '') => text
@@ -60,11 +61,11 @@ export const truncateTTLToDuration = (ttl: number): string => {
       end: ttl * 1_000,
     })
 
-    const formatedDuration = formatDuration(duration, {
-      delimiter: ', ',
+    const formattedDuration = formatDuration(duration, {
+      delimiter: TRUNCATE_DELIMITER,
     })
 
-    return cutDurationText(formatedDuration)
+    return cutDurationText(formattedDuration)
   } catch (e) {
     return ''
   }
@@ -74,4 +75,8 @@ export const truncateTTLToDuration = (ttl: number): string => {
 // 500 => 500
 // 1500 => 1 500
 // 2500000 => 2 500 000
-export const truncateTTLToSeconds = (ttl: number) => ttl?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') ?? ''
+export const truncateTTLToSeconds = (ttl: number) =>
+  ttl?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') ?? ''
+
+export const truncateTTLToFirstUnit = (ttl: number): string =>
+  truncateTTLToDuration(ttl).split(TRUNCATE_DELIMITER)[0]