Integrate create topic

src/Routes.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import {
-  CreateTopicPage,
   UpdateTopicPage,
   TopicDetailPage,
   DashboardConnected,
   SettingsConnected,
+  CreateTopic,
 } from '@app/modules/Topics/pages';
 import { TopicsConnected } from '@app/modules/Topics';
 import { ConsumerGroupsConnected } from '@app/modules/ConsumerGroups';
@@ -26,7 +26,7 @@ const Routes: React.FC = () => {
         <Route path='/acls' component={PermissionsConnected} exact />
         <Route path='/settings' component={SettingsConnected} exact />
         <Route path='/topics/:topicName' component={TopicDetailPage} exact />
-        <Route path='/topic/create' component={CreateTopicPage} />
+        <Route path='/topic/create' component={CreateTopic} />
         <Route
           path='/topic/update/:topicName'
           component={UpdateTopicPage}

src/modules/Topics/pages/CreateTopic/CreateTopic.tsx

@@ -0,0 +1,99 @@
+import React, { useContext, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  AlertVariant,
+  useAlert,
+  useBasename,
+} from '@rhoas/app-services-ui-shared';
+import { ConfigContext, useFederated } from '@app/contexts';
+import { getTopic } from '@app/services';
+import { CreateTopicPage, NewTopic } from '@rhoas/app-services-ui-components';
+import { NewTopicInput } from '@rhoas/kafka-instance-sdk';
+import {
+  constantValues,
+  formatTopic,
+  initialValues,
+  saveTopicData,
+} from './utils';
+
+type CreateTopicProps = {
+  partitionsLimit?: () => Promise<number | undefined>;
+};
+
+export const CreateTopic: React.FC<CreateTopicProps> = () => {
+  const [isSwitchChecked, setIsSwitchChecked] = useState<boolean>(false);
+  const { t } = useTranslation(['kafkaTemporaryFixMe']);
+  const { kafkaName, kafkaPageLink, kafkaInstanceLink } = useFederated() || {};
+  const history = useHistory();
+  const { getBasename } = useBasename() || { getBasename: () => '' };
+  const basename = getBasename();
+  const {
+    replicationFactor = 0,
+    minInSyncReplicas = 0,
+    isMultiAZ,
+  } = useFederated() || {};
+
+  const config = useContext(ConfigContext);
+
+  const onCloseCreateTopic = () => {
+    history.push(`${basename}/topics`);
+  };
+  const saveTopic = (topicData: NewTopic) => {
+    const topic: NewTopicInput = formatTopic(topicData, isSwitchChecked);
+    saveTopicData(config?.basePath, config?.getToken, topic)
+      .then(() => {
+        addAlert({
+          variant: AlertVariant.success,
+          title: t('topic.topic_successfully_created'),
+        });
+        onCloseCreateTopic();
+      })
+      .catch((err) => {
+        addAlert({
+          variant: AlertVariant.danger,
+          title: err.response.data.error_message,
+        });
+        onCloseCreateTopic();
+      });
+  };
+  const { addAlert } = useAlert() || {
+    addAlert: () => {
+      // No-op
+    },
+  };
+
+  const initialTopicValues: NewTopic = initialValues(
+    isSwitchChecked,
+    replicationFactor,
+    minInSyncReplicas,
+    isMultiAZ
+  );
+
+  const fetchTopic = async (topicName: string) => {
+    try {
+      const topicRes = await getTopic(topicName, config);
+      if (topicRes) {
+        return false;
+      } else return true;
+    } catch (error) {
+      return true;
+    }
+  };
+
+  return (
+    <CreateTopicPage
+      kafkaName={kafkaName || ''}
+      kafkaPageLink={kafkaPageLink || ''}
+      kafkaInstanceLink={kafkaInstanceLink || ''}
+      onSave={saveTopic}
+      initialTopicValues={initialTopicValues}
+      onCloseCreateTopic={onCloseCreateTopic}
+      checkTopicName={fetchTopic}
+      availablePartitionLimit={100}
+      constantValues={constantValues}
+      isSwitchChecked={isSwitchChecked}
+      setIsSwitchChecked={setIsSwitchChecked}
+    />
+  );
+};

src/modules/Topics/pages/CreateTopic/CreateTopicFederated.tsx

@@ -1,12 +1,12 @@
 import { FunctionComponent } from 'react';
-import { CreateTopicPage } from '@app/modules/Topics/pages/CreateTopic/CreateTopicPage';
 import {
   FederatedContext,
   FederatedProps,
   ConfigContext,
   IConfiguration,
 } from '@app/contexts';
 import { ModalProvider } from '@rhoas/app-services-ui-components';
+import { CreateTopic } from './CreateTopic';
 
 export type CreateTopicFederatedProps = FederatedProps &
   IConfiguration & {
@@ -37,7 +37,7 @@ const CreateTopicFederated: FunctionComponent<CreateTopicFederatedProps> = ({
         }}
       >
         <ModalProvider>
-          <CreateTopicPage />
+          <CreateTopic />
         </ModalProvider>
       </FederatedContext.Provider>
     </ConfigContext.Provider>

src/modules/Topics/pages/CreateTopic/index.ts

@@ -1,2 +1,2 @@
-export * from './CreateTopicPage';
+export * from './CreateTopic';
 export * from './CreateTopicFederated';

src/modules/Topics/pages/CreateTopic/utils.ts

@@ -0,0 +1,83 @@
+import { NewTopic } from '@rhoas/app-services-ui-components';
+import {
+  Configuration,
+  NewTopicInput,
+  TopicsApi,
+} from '@rhoas/kafka-instance-sdk';
+import { IAdvancedTopic, serializeTopic } from '../../utils';
+
+export const formatTopic = (topicData: NewTopic, isSwitchChecked: boolean) => {
+  const convertedTopicData: IAdvancedTopic = {
+    name: topicData.name,
+    numPartitions: String(topicData.numPartitions),
+    'retention.ms': String(topicData.retentionTime),
+    'retention.bytes': String(topicData.retentionBytes),
+    'retention.bytes.unit':
+      topicData.retentionBytesUnit === 'custom'
+        ? String(topicData.customRetentionSizeUnit)
+        : String(topicData.retentionBytesUnit),
+    'retention.ms.unit':
+      topicData.retentionTimeUnit === 'custom'
+        ? String(topicData.customRetentionTimeUnit)
+        : String(topicData.retentionTimeUnit),
+    'cleanup.policy': String(topicData.cleanupPolicy),
+  };
+  const topic: NewTopicInput = serializeTopic(
+    convertedTopicData,
+    isSwitchChecked ? ['cleanup.policy'] : []
+  );
+  return topic;
+};
+export const initialValues = (
+  isSwitchChecked: boolean,
+  replicationFactor?: number,
+  minInSyncReplicas?: number,
+  isMultiAZ?: boolean
+) => {
+  const defaultValus: NewTopic = {
+    name: '',
+    numPartitions: 1,
+    replicationFactor: replicationFactor || 1,
+    retentionTime: 1,
+    retentionTimeUnit: isSwitchChecked ? 'custom' : 'weeks',
+    retentionBytes: 1,
+    retentionBytesUnit: isSwitchChecked ? 'custom' : 'unlimited',
+    cleanupPolicy: 'delete',
+    customRetentionTimeUnit: 'days',
+    customRetentionSizeUnit: 'bytes',
+    minInSyncReplica: minInSyncReplicas || 1,
+    isMultiAZ: isMultiAZ || false,
+  };
+  return defaultValus;
+};
+export const saveTopicData = (
+  basePath: string | undefined,
+  accessToken: (() => Promise<string>) | undefined,
+  topic: NewTopicInput
+) => {
+  return new TopicsApi(
+    new Configuration({
+      basePath,
+      accessToken,
+    })
+  ).createTopic(topic);
+};
+
+export const constantValues = {
+  DEFAULT_REPLICAS: 3,
+  DEFAULT_MIN_CLEANBLE_RATIO: 0.5,
+  DEFAULT_MIN_INSYNC_REPLICAS: 2,
+  DEFAULT_SEGMENT_TIME_MILLISECONDS: 604800000,
+  DEFAULT_MAX_MESSAGE_TIMESTAMP_DIFF_MILLISECONDS: '9223372036854775807',
+  DEFAULT_SEGMENT_INDEX_SIZE_BYTES: 10485760,
+  DEFAULT_INDEX_INTERVAL_SIZE_BYTES: 4096,
+  DEFAULT_LOG_SEGMENT_SIZE_BYTES: 1073741824,
+  DEFAULT_DELETE_RETENTION_TIME_MILLISECONDS: 86400000,
+  DEFAULT_SEGMENT_JITTER_TIME_MILLISECONDS: 0,
+  DEFAULT_FILE_DELETE_DELAY_MILLISECONDS: 60000,
+  DEFAULT_MAXIMUM_MESSAGE_BYTES: 1048588,
+  DEFAULT_MESSAGE_TIMESTAMP_TYPE: 'CreateTime',
+  DEFAULT_MINIMUM_COMPACTION_LAG_TIME_MILLISECONDS: 0,
+  DEFAULT_FLUSH_INTERVAL_MESSAGES: '9223372036854775807',
+  DEFAULT_FLUSH_INTERVAL_TIME_MILLISECONDS: '9223372036854775807',
+};

src/modules/Topics/utils/utils.ts

@@ -181,7 +181,11 @@ export const serializeTopic = (
         (topic.selectedRetentionTimeOption === RetentionTimeUnits.UNLIMITED &&
           key === 'retention.ms') ||
         (topic.selectedRetentionSizeOption === RetentionSizeUnits.UNLIMITED &&
-          key === 'retention.bytes')
+          key === 'retention.bytes') ||
+        (topic['retention.bytes.unit'] === RetentionSizeUnits.UNLIMITED &&
+          key === 'retention.bytes') ||
+        (topic['retention.ms.unit'] === RetentionTimeUnits.UNLIMITED &&
+          key === 'retention.ms')
       ) {
         value = '-1';
       } else if (key === 'retention.ms' || key === 'retention.bytes') {