FE: Topics: Add more retain options (#1264)

Signed-off-by: Bob Du <[email protected]>

Author: BobDu

e2e-tests/src/main/java/io/kafbat/ui/screens/topics/enums/TimeToRetain.java

@@ -5,6 +5,9 @@
 @Getter
 public enum TimeToRetain {
 
+  BTN_1_HOUR("1 hour", "3600000"),
+  BTN_3_HOURS("3 hours", "10800000"),
+  BTN_6_HOURS("6 hours", "21600000"),
   BTN_12_HOURS("12 hours", "43200000"),
   BTN_1_DAY("1 day", "86400000"),
   BTN_2_DAYS("2 days", "172800000"),

frontend/src/components/Topics/shared/Form/TimeToRetainBtns.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MILLISECONDS_IN_DAY } from 'lib/constants';
+import { MILLISECONDS_IN_DAY, MILLISECONDS_IN_HOUR } from 'lib/constants';
 import styled from 'styled-components';
 
 import TimeToRetainBtn from './TimeToRetainBtn';
@@ -17,10 +17,25 @@ const TimeToRetainBtnsWrapper = styled.div`
 
 const TimeToRetainBtns: React.FC<Props> = ({ name }) => (
   <TimeToRetainBtnsWrapper>
+    <TimeToRetainBtn
+      text="1 hour"
+      inputName={name}
+      value={MILLISECONDS_IN_HOUR}
+    />
+    <TimeToRetainBtn
+      text="3 hours"
+      inputName={name}
+      value={MILLISECONDS_IN_HOUR * 3}
+    />
+    <TimeToRetainBtn
+      text="6 hours"
+      inputName={name}
+      value={MILLISECONDS_IN_HOUR * 6}
+    />
     <TimeToRetainBtn
       text="12 hours"
       inputName={name}
-      value={MILLISECONDS_IN_DAY / 2}
+      value={MILLISECONDS_IN_HOUR * 12}
     />
     <TimeToRetainBtn
       text="1 day"

frontend/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx

@@ -27,6 +27,6 @@ describe('TimeToRetainBtns', () => {
 
   it('should test the normal view rendering of the component', () => {
     SetUpComponent();
-    expect(screen.getAllByRole('button')).toHaveLength(5);
+    expect(screen.getAllByRole('button')).toHaveLength(8);
   });
 });

frontend/src/components/Topics/shared/Form/__tests__/TopicForm.spec.tsx

@@ -47,7 +47,11 @@ describe('TopicForm', () => {
       'spinbutton',
       'Time to retain data (in ms)'
     );
+    expectByRoleAndNameToBeInDocument('button', '1 hour');
+    expectByRoleAndNameToBeInDocument('button', '3 hours');
+    expectByRoleAndNameToBeInDocument('button', '6 hours');
     expectByRoleAndNameToBeInDocument('button', '12 hours');
+    expectByRoleAndNameToBeInDocument('button', '1 day');
     expectByRoleAndNameToBeInDocument('button', '2 days');
     expectByRoleAndNameToBeInDocument('button', '7 days');
     expectByRoleAndNameToBeInDocument('button', '4 weeks');

frontend/src/lib/constants.ts

@@ -49,6 +49,7 @@ export const TOPIC_CUSTOM_PARAMS: Record<string, string> = {
 
 export const MILLISECONDS_IN_WEEK = 604_800_000;
 export const MILLISECONDS_IN_DAY = 86_400_000;
+export const MILLISECONDS_IN_HOUR = 3_600_000;
 export const MILLISECONDS_IN_SECOND = 1_000;
 
 export const NOT_SET = -1;