#RI-2956,2954,2955 fix (#675)

* #RI-2956,2954,2955 fix

Author: AmirAllayarovSofteq

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

@@ -157,8 +157,24 @@ const RangeFilter = (props: Props) => {
         <div className={styles.slider}>
           <div className={styles.sliderTrack} />
           <div ref={range} className={styles.sliderRange}>
-            <div className={styles.sliderLeftValue}>{getFormatTime(start?.toString())}</div>
-            <div className={styles.sliderRightValue}>{getFormatTime(end?.toString())}</div>
+            <div className={
+              cx(styles.sliderLeftValue,
+                {
+                  [styles.leftPosition]: max - startVal < (max - min) / 2
+                })
+              }
+            >
+              {getFormatTime(startVal?.toString())}
+            </div>
+            <div className={
+              cx(styles.sliderRightValue,
+                {
+                  [styles.rightPosition]: max - endVal > (max - min) / 2
+                })
+              }
+            >
+              {getFormatTime(endVal?.toString())}
+            </div>
           </div>
         </div>
       </div>

redisinsight/ui/src/components/range-filter/styles.module.scss

@@ -56,6 +56,14 @@
   margin-top: -30px;
 }
 
+.sliderLeftValue.leftPosition {
+  transform: translateX(-100%);
+}
+
+.sliderRightValue.rightPosition {
+  transform: translateX(100%);
+}
+
 .sliderRightValue {
   right: -4px;
 }

redisinsight/ui/src/pages/browser/components/stream-details/StreamDetails/StreamDetails.tsx

@@ -150,12 +150,18 @@ const StreamDetails = (props: Props) => {
   )
 
   useEffect(() => {
+    if (isNull(firstEntry)) {
+      dispatch(updateStart(''))
+    }
     if (start === '' && firstEntry?.id !== '') {
       dispatch(updateStart(firstEntryTimeStamp.toString()))
     }
   }, [firstEntryTimeStamp])
 
   useEffect(() => {
+    if (isNull(lastEntry)) {
+      dispatch(updateEnd(''))
+    }
     if (end === '' && lastEntry?.id !== '') {
       dispatch(updateEnd(lastEntryTimeStamp.toString()))
     }

redisinsight/ui/src/slices/tests/browser/stream.spec.ts

@@ -318,37 +318,6 @@ describe('stream slice', () => {
     })
   })
 
-  describe('removeEntriesFromList', () => {
-    it('should properly remove entries from list', () => {
-      // Arrange
-      const startState = {
-        ...initialState,
-        data: {
-          ...mockedData
-        }
-      }
-
-      const endState = {
-        ...initialState,
-        loading: false,
-        data: {
-          ...mockedData,
-          entries: [],
-          total: 0
-        }
-      }
-
-      // Act
-      const nextState = reducer(startState, removeEntriesFromList([mockedData.entries[0].id]))
-
-      // Assert
-      const rootState = Object.assign(initialStateDefault, {
-        browser: { stream: nextState },
-      })
-      expect(streamSelector(rootState)).toEqual(endState)
-    })
-  })
-
   describe('updateStart', () => {
     it('should properly set the state', () => {
       // Arrange

redisinsight/ui/src/utils/streamUtils.ts

@@ -8,14 +8,14 @@ export const getTimestampFromId = (id: string = ''): number =>
   parseInt(id.split('-')[0], 10)
 
 export const getStreamRangeStart = (start: string, firstEntryId: string) => {
-  if (start === '' || firstEntryId === '' || start === getTimestampFromId(firstEntryId).toString()) {
+  if (start === '' || !firstEntryId || start === getTimestampFromId(firstEntryId).toString()) {
     return SCAN_STREAM_START_DEFAULT
   }
   return start
 }
 
 export const getStreamRangeEnd = (end: string, endEtryId: string) => {
-  if (end === '' || endEtryId === '' || end === getTimestampFromId(endEtryId).toString()) {
+  if (end === '' || !endEtryId || end === getTimestampFromId(endEtryId).toString()) {
     return SCAN_STREAM_END_DEFAULT
   }
   return end