issue/21-topic-form-make-time-to-retain-customizable

kafka-ui-react-app/package-lock.json

@@ -10478,6 +10478,11 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "parse-ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz",
+      "integrity": "sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA=="
+    },
     "parse5": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
@@ -11686,6 +11691,14 @@
         "react-is": "^16.8.4"
       }
     },
+    "pretty-ms": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-6.0.1.tgz",
+      "integrity": "sha512-ke4njoVmlotekHlHyCZ3wI/c5AMT8peuHs8rKJqekj/oR5G8lND2dVpicFlUz5cbZgE290vvkMuDwfj/OcW1kw==",
+      "requires": {
+        "parse-ms": "^2.1.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",

kafka-ui-react-app/package.json

@@ -22,6 +22,7 @@
     "json-server": "^0.15.1",
     "lodash": "^4.17.15",
     "node-sass": "^4.13.1",
+    "pretty-ms": "^6.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-hook-form": "^4.5.5",

kafka-ui-react-app/src/components/Topics/New/New.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 import { ClusterName, CleanupPolicy, TopicFormData, TopicName } from 'redux/interfaces';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { clusterTopicsPath } from 'lib/paths';
-import { useForm, ErrorMessage } from 'react-hook-form';
+import { useForm, FormContext, ErrorMessage } from 'react-hook-form';
+
 import {
   TOPIC_NAME_VALIDATION_PATTERN,
-  MILLISECONDS_IN_DAY,
   BYTES_IN_GB,
 } from 'lib/constants';
+import TimeToRetain from './TimeToRetain';
 
 interface Props {
   clusterName: ClusterName;
@@ -24,17 +25,17 @@ const New: React.FC<Props> = ({
                                 redirectToTopicPath,
                                 resetUploadedState
                               }) => {
-  const {register, handleSubmit, errors, getValues} = useForm<TopicFormData>();
+  const methods = useForm<TopicFormData>();
   const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);
 
   React.useEffect(
     () => {
       if (isSubmitting && isTopicCreated) {
-        const {name} = getValues();
+        const {name} = methods.getValues();
         redirectToTopicPath(clusterName, name);
       }
     },
-    [isSubmitting, isTopicCreated, redirectToTopicPath, clusterName, getValues],
+    [isSubmitting, isTopicCreated, redirectToTopicPath, clusterName, methods.getValues],
   );
 
   const onSubmit = async (data: TopicFormData) => {
@@ -59,7 +60,8 @@ const New: React.FC<Props> = ({
       </div>
 
       <div className="box">
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <FormContext {...methods}>
+          <form onSubmit={methods.handleSubmit(onSubmit)}>
             <div className="columns">
               <div className="column is-three-quarters">
                 <label className="label">
@@ -68,7 +70,7 @@ const New: React.FC<Props> = ({
                 <input
                   className="input"
                   placeholder="Topic Name"
-                ref={register({
+                  ref={methods.register({
                     required: 'Topic Name is required.',
                     pattern: {
                       value: TOPIC_NAME_VALIDATION_PATTERN,
@@ -80,7 +82,7 @@ const New: React.FC<Props> = ({
                   disabled={isSubmitting}
                 />
                 <p className="help is-danger">
-                <ErrorMessage errors={errors} name="name"/>
+                  <ErrorMessage errors={methods.errors} name="name"/>
                 </p>
               </div>
 
@@ -93,12 +95,12 @@ const New: React.FC<Props> = ({
                   type="number"
                   placeholder="Number of partitions"
                   defaultValue="1"
-                ref={register({required: 'Number of partitions is required.'})}
+                  ref={methods.register({required: 'Number of partitions is required.'})}
                   name="partitions"
                   disabled={isSubmitting}
                 />
                 <p className="help is-danger">
-                <ErrorMessage errors={errors} name="partitions"/>
+                  <ErrorMessage errors={methods.errors} name="partitions"/>
                 </p>
               </div>
             </div>
@@ -113,12 +115,12 @@ const New: React.FC<Props> = ({
                   type="number"
                   placeholder="Replication Factor"
                   defaultValue="1"
-                ref={register({required: 'Replication Factor is required.'})}
+                  ref={methods.register({required: 'Replication Factor is required.'})}
                   name="replicationFactor"
                   disabled={isSubmitting}
                 />
                 <p className="help is-danger">
-                <ErrorMessage errors={errors} name="replicationFactor"/>
+                  <ErrorMessage errors={methods.errors} name="replicationFactor"/>
                 </p>
               </div>
 
@@ -131,12 +133,12 @@ const New: React.FC<Props> = ({
                   type="number"
                   placeholder="Replication Factor"
                   defaultValue="1"
-                ref={register({required: 'Min In Sync Replicas is required.'})}
+                  ref={methods.register({required: 'Min In Sync Replicas is required.'})}
                   name="minInSyncReplicas"
                   disabled={isSubmitting}
                 />
                 <p className="help is-danger">
-                <ErrorMessage errors={errors} name="minInSyncReplicas"/>
+                  <ErrorMessage errors={methods.errors} name="minInSyncReplicas"/>
                 </p>
               </div>
             </div>
@@ -150,7 +152,7 @@ const New: React.FC<Props> = ({
                   <select
                     defaultValue={CleanupPolicy.Delete}
                     name="cleanupPolicy"
-                  ref={register}
+                    ref={methods.register}
                     disabled={isSubmitting}
                   >
                     <option value={CleanupPolicy.Delete}>
@@ -164,33 +166,7 @@ const New: React.FC<Props> = ({
               </div>
 
               <div className="column is-one-third">
-              <label className="label">
+                <TimeToRetain isSubmitting={isSubmitting} />
-                Time to retain data
-              </label>
-              <div className="select is-block">
-                <select
-                  defaultValue={MILLISECONDS_IN_DAY * 7}
-                  name="retentionMs"
-                  ref={register}
-                  disabled={isSubmitting}
-                >
-                  <option value={MILLISECONDS_IN_DAY / 2}>
-                    12 hours
-                  </option>
-                  <option value={MILLISECONDS_IN_DAY}>
-                    1 day
-                  </option>
-                  <option value={MILLISECONDS_IN_DAY * 2}>
-                    2 days
-                  </option>
-                  <option value={MILLISECONDS_IN_DAY * 7}>
-                    1 week
-                  </option>
-                  <option value={MILLISECONDS_IN_DAY * 7 * 4}>
-                    4 weeks
-                  </option>
-                </select>
-              </div>
               </div>
 
               <div className="column is-one-third">
@@ -201,7 +177,7 @@ const New: React.FC<Props> = ({
                   <select
                     defaultValue={-1}
                     name="retentionBytes"
-                  ref={register}
+                    ref={methods.register}
                     disabled={isSubmitting}
                   >
                     <option value={-1}>
@@ -233,18 +209,19 @@ const New: React.FC<Props> = ({
                   className="input"
                   type="number"
                   defaultValue="1000012"
-                ref={register({required: 'Maximum message size in bytes is required'})}
+                  ref={methods.register({required: 'Maximum message size in bytes is required'})}
                   name="maxMessageBytes"
                   disabled={isSubmitting}
                 />
                 <p className="help is-danger">
-                <ErrorMessage errors={errors} name="maxMessageBytes"/>
+                  <ErrorMessage errors={methods.errors} name="maxMessageBytes"/>
                 </p>
               </div>
             </div>
 
             <input type="submit" className="button is-primary" disabled={isSubmitting}/>
           </form>
+        </FormContext>
       </div>
     </div>
   );

kafka-ui-react-app/src/components/Topics/New/TimeToRetain.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import prettyMilliseconds from 'pretty-ms';
+import { useFormContext, ErrorMessage } from 'react-hook-form';
+import { MILLISECONDS_IN_WEEK } from 'lib/constants';
+
+const MILLISECONDS_IN_SECOND = 1000;
+
+interface Props {
+  isSubmitting: boolean;
+}
+
+const TimeToRetain: React.FC<Props> = ({
+  isSubmitting,
+}) => {
+  const { register, errors, watch } = useFormContext();
+  const defaultValue = MILLISECONDS_IN_WEEK;
+  const name: string = 'retentionMs';
+  const watchedValue: any = watch(name, defaultValue.toString());
+
+  const valueHint = React.useMemo(() => {
+    const value = parseInt(watchedValue, 10);
+    return value >= MILLISECONDS_IN_SECOND ? prettyMilliseconds(value) : false;
+  }, [watchedValue])
+
+  return (
+    <>
+      <label className="label">
+        Time to retain data (in ms)
+      </label>
+      <input
+        className="input"
+        type="number"
+        defaultValue={defaultValue}
+        name={name}
+        ref={register(
+          { min: { value: -1, message: 'must be greater than or equal to -1' }}
+        )}
+        disabled={isSubmitting}
+      />
+      <p className="help is-danger">
+        <ErrorMessage errors={errors} name={name}/>
+      </p>
+      {
+        valueHint &&
+        <p className="help is-info">
+          {valueHint}
+        </p>
+      }
+    </>
+  );
+}
+
+export default TimeToRetain;

kafka-ui-react-app/src/lib/constants.ts

@@ -10,6 +10,6 @@ export const BASE_URL = process.env.REACT_APP_API_URL;
 
 export const TOPIC_NAME_VALIDATION_PATTERN = RegExp(/^[.,A-Za-z0-9_-]+$/);
 
-export const MILLISECONDS_IN_DAY = 86_400_000;
+export const MILLISECONDS_IN_WEEK = 604_800_000;
 
 export const BYTES_IN_GB = 1_073_741_824;