You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by he...@apache.org on 2021/11/27 08:57:50 UTC
[incubator-inlong] branch master updated: [INLONG-1835] Consume support pulsar (#1844)
This is an automated email from the ASF dual-hosted git repository.
healchow pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-inlong.git
The following commit(s) were added to refs/heads/master by this push:
new 7713711 [INLONG-1835] Consume support pulsar (#1844)
7713711 is described below
commit 7713711605ac0a27710f7fd1dd1a63113c397e6d
Author: Daniel <le...@outlook.com>
AuthorDate: Sat Nov 27 16:57:47 2021 +0800
[INLONG-1835] Consume support pulsar (#1844)
---
.../BusinessSelect/MyBusinessModal.tsx | 40 +++++----
.../ConsumeHelper/BusinessSelect/index.tsx | 23 ++++--
.../ConsumeHelper/FieldsConfig/basicFields.tsx | 96 +++++++++++++++++++---
.../src/pages/ConsumeCreate/Info/config.tsx | 39 ++++++---
.../src/pages/ConsumeCreate/Info/index.tsx | 19 +++--
.../src/pages/ConsumeDetail/Info/config.tsx | 50 ++++++-----
.../src/pages/ConsumeDetail/Info/index.tsx | 25 ++----
7 files changed, 197 insertions(+), 95 deletions(-)
diff --git a/inlong-website/src/components/ConsumeHelper/BusinessSelect/MyBusinessModal.tsx b/inlong-website/src/components/ConsumeHelper/BusinessSelect/MyBusinessModal.tsx
index b2f1980..b918197 100644
--- a/inlong-website/src/components/ConsumeHelper/BusinessSelect/MyBusinessModal.tsx
+++ b/inlong-website/src/components/ConsumeHelper/BusinessSelect/MyBusinessModal.tsx
@@ -22,11 +22,9 @@ import { Button, Modal } from 'antd';
import { ModalProps } from 'antd/es/modal';
import { useTranslation } from 'react-i18next';
import HighTable from '@/components/HighTable';
-import { defaultSize } from '@/configs/pagination';
import { useRequest, useUpdateEffect } from '@/hooks';
export interface MyAccessModalProps extends Omit<ModalProps, 'onOk'> {
- id?: string;
onOk?: (value: string, record: Record<string, unknown>) => void;
}
@@ -34,25 +32,25 @@ const getFilterFormContent = () => [
{
type: 'inputsearch',
name: 'keyWord',
- props: {
- placeholder: '请输入关键词',
- },
},
];
-const Comp: React.FC<MyAccessModalProps> = ({ id, ...modalProps }) => {
+const Comp: React.FC<MyAccessModalProps> = ({ ...modalProps }) => {
const { t } = useTranslation();
const [options, setOptions] = useState({
keyWord: '',
- pageSize: defaultSize,
- pageIndex: 1,
+ pageSize: 10,
+ pageNum: 1,
});
const { run: getData, data, loading } = useRequest(
{
url: '/business/list',
- params: options,
+ params: {
+ ...options,
+ status: 130,
+ },
},
{
manual: true,
@@ -61,23 +59,31 @@ const Comp: React.FC<MyAccessModalProps> = ({ id, ...modalProps }) => {
useUpdateEffect(() => {
if (modalProps.visible) {
- getData(id);
+ getData();
}
- }, [modalProps.visible, id]);
+ }, [modalProps.visible, options]);
- const onChange = ({ current: pageIndex, pageSize }) => {
+ const onChange = ({ current: pageNum, pageSize }) => {
setOptions(prev => ({
...prev,
- pageIndex,
+ pageNum,
pageSize,
}));
};
+ const closeAll = () => {
+ setOptions({
+ keyWord: '',
+ pageSize: 10,
+ pageNum: 1,
+ });
+ };
+
const onFilter = allValues => {
setOptions(prev => ({
...prev,
...allValues,
- pageIndex: 1,
+ pageNum: 1,
}));
};
@@ -115,8 +121,8 @@ const Comp: React.FC<MyAccessModalProps> = ({ id, ...modalProps }) => {
];
const pagination = {
- pageSize: options.pageSize,
- current: options.pageIndex,
+ pageSize: 10,
+ current: options.pageNum,
total: data?.totalSize,
};
@@ -127,6 +133,8 @@ const Comp: React.FC<MyAccessModalProps> = ({ id, ...modalProps }) => {
width={1024}
footer={null}
onOk={onOk}
+ afterClose={closeAll}
+ destroyOnClose
>
<HighTable
filterForm={{
diff --git a/inlong-website/src/components/ConsumeHelper/BusinessSelect/index.tsx b/inlong-website/src/components/ConsumeHelper/BusinessSelect/index.tsx
index a69107b..bff4425 100644
--- a/inlong-website/src/components/ConsumeHelper/BusinessSelect/index.tsx
+++ b/inlong-website/src/components/ConsumeHelper/BusinessSelect/index.tsx
@@ -20,12 +20,13 @@
import React, { useState, useEffect } from 'react';
import { Button, Input, Space } from 'antd';
import type { InputProps } from 'antd/es/input';
+import request from '@/utils/request';
import { useTranslation } from 'react-i18next';
import MyBusinessModal from './MyBusinessModal';
export interface Props extends Omit<InputProps, 'onChange'> {
value?: string;
- onChange?: (value: string) => void;
+ onChange?: (value: string, record: Record<string, unknown>) => void;
onSelect?: (value: Record<string, any>) => void;
}
@@ -45,20 +46,24 @@ const Comp: React.FC<Props> = ({ value, onChange, onSelect, ...rest }) => {
// eslint-disable-next-line
}, [value]);
- const triggerChange = newData => {
+ const triggerChange = (newData, record) => {
if (onChange) {
- onChange(newData);
+ onChange(newData, record);
}
};
- const onSelectRow = rowValues => {
- setData(rowValues);
- triggerChange(rowValues);
+ const onSelectRow = (rowValue, record) => {
+ setData(rowValue);
+ triggerChange(rowValue, record);
};
- const onTextChange = value => {
+ const onTextChange = async value => {
setData(value);
- triggerChange(value);
+
+ const bussinessData = await request(`/business/get/${value}`);
+ if (bussinessData) {
+ triggerChange(value, bussinessData);
+ }
};
return (
@@ -74,7 +79,7 @@ const Comp: React.FC<Props> = ({ value, onChange, onSelect, ...rest }) => {
{...myBusinessModal}
visible={myBusinessModal.visible}
onOk={(value, record) => {
- onSelectRow(value);
+ onSelectRow(value, record);
if (onSelect) {
onSelect(record);
}
diff --git a/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx b/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx
index bcf2289..e62c551 100644
--- a/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx
+++ b/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx
@@ -25,8 +25,7 @@ import i18n from '@/i18n';
import BusinessSelect from '../BusinessSelect';
export default (
- names: string[],
- businessDetail: Record<'middlewareType', string> = { middlewareType: '' },
+ names: (string | FormItemProps)[],
currentValues: Record<string, any> = {},
): FormItemProps[] => {
const fields: FormItemProps[] = [
@@ -62,12 +61,14 @@ export default (
type: BusinessSelect,
label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.ConsumerTargetBusinessID'),
name: 'inlongGroupId',
+ extraNames: ['middlewareType'],
initialValue: currentValues.inlongGroupId,
rules: [{ required: true }],
props: {
style: { width: 500 },
- onChange: () => ({
- topic: '',
+ onChange: (inlongGroupId, record) => ({
+ topic: undefined,
+ middlewareType: record.middlewareType,
}),
},
},
@@ -78,15 +79,23 @@ export default (
initialValue: currentValues.topic,
rules: [{ required: true }],
props: {
+ mode: currentValues.middlewareType === 'PULSAR' ? 'multiple' : '',
options: {
requestService: `/business/getTopic/${currentValues.inlongGroupId}`,
requestParams: {
- formatResult: result => [
- {
- label: result.topicName,
- value: result.topicName,
- },
- ],
+ formatResult: result =>
+ result.middlewareType === 'TUBE'
+ ? [
+ {
+ label: result.mqResourceObj,
+ value: result.mqResourceObj,
+ },
+ ]
+ : result.dsTopicList?.map(item => ({
+ ...item,
+ label: item.mqResourceObj,
+ value: item.mqResourceObj,
+ })) || [],
},
},
},
@@ -110,7 +119,7 @@ export default (
],
},
rules: [{ required: true }],
- visible: !!businessDetail.middlewareType,
+ visible: values => !!values.middlewareType && values.middlewareType !== 'PULSAR',
},
{
type: 'input',
@@ -119,7 +128,13 @@ export default (
initialValue: currentValues.inlongStreamId,
extra: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.DataStreamIDsHelp'),
rules: [{ required: true }],
- visible: values => businessDetail.middlewareType && values.filterEnabled,
+ style:
+ currentValues.middlewareType === 'PULSAR'
+ ? {
+ display: 'none',
+ }
+ : {},
+ visible: values => values.middlewareType === 'PULSAR' || values.filterEnabled,
},
{
type: 'text',
@@ -127,6 +142,63 @@ export default (
name: 'masterUrl',
initialValue: currentValues.masterUrl,
},
+ {
+ type: 'radio',
+ label: 'isDlq',
+ name: 'mqExtInfo.isDlq',
+ initialValue: currentValues.mqExtInfo?.isDlq ?? 0,
+ rules: [{ required: true }],
+ props: {
+ options: [
+ {
+ label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.Yes'),
+ value: 1,
+ },
+ {
+ label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.No'),
+ value: 0,
+ },
+ ],
+ },
+ visible: values => values.middlewareType === 'PULSAR',
+ },
+ {
+ type: 'input',
+ label: 'deadLetterTopic',
+ name: 'mqExtInfo.deadLetterTopic',
+ initialValue: currentValues.mqExtInfo?.deadLetterTopic,
+ rules: [{ required: true }],
+ visible: values => values.mqExtInfo?.isDlq && values.middlewareType === 'PULSAR',
+ },
+ {
+ type: 'radio',
+ label: 'isRlq',
+ name: 'mqExtInfo.isRlq',
+ initialValue: currentValues.mqExtInfo?.isRlq ?? 0,
+ rules: [{ required: true }],
+ props: {
+ options: [
+ {
+ label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.Yes'),
+ value: 1,
+ },
+ {
+ label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.No'),
+ value: 0,
+ },
+ ],
+ },
+ visible: values => values.mqExtInfo?.isDlq && values.middlewareType === 'PULSAR',
+ },
+ {
+ type: 'input',
+ label: 'retryLetterTopic',
+ name: 'mqExtInfo.retryLetterTopic',
+ initialValue: currentValues.mqExtInfo?.retryLetterTopic,
+ rules: [{ required: true }],
+ visible: values =>
+ values.mqExtInfo?.isDlq && values.mqExtInfo?.isRlq && values.middlewareType === 'PULSAR',
+ },
] as FormItemProps[];
return pickObjectArray(names, fields);
diff --git a/inlong-website/src/pages/ConsumeCreate/Info/config.tsx b/inlong-website/src/pages/ConsumeCreate/Info/config.tsx
index 5b96790..ee05b71 100644
--- a/inlong-website/src/pages/ConsumeCreate/Info/config.tsx
+++ b/inlong-website/src/pages/ConsumeCreate/Info/config.tsx
@@ -22,16 +22,31 @@ import { Divider } from 'antd';
import i18n from '@/i18n';
import { genBasicFields } from '@/components/ConsumeHelper';
-export const getFormContent = ({
- businessData,
- changedValues,
-}): ReturnType<typeof genBasicFields> => [
- {
- type: <Divider orientation="left">{i18n.t('pages.ConsumeCreate.ConsumerInformation')}</Divider>,
- },
- ...genBasicFields(
- ['consumerGroupName', 'inCharges', 'inlongGroupId', 'topic', 'filterEnabled', 'inlongGroupId'],
- businessData,
+export const getFormContent = ({ changedValues }): ReturnType<typeof genBasicFields> =>
+ genBasicFields(
+ [
+ {
+ type: (
+ <Divider orientation="left">{i18n.t('pages.ConsumeCreate.ConsumerInformation')}</Divider>
+ ),
+ },
+ 'consumerGroupName',
+ 'inCharges',
+ 'inlongGroupId',
+ 'topic',
+ 'filterEnabled',
+ {
+ type: <Divider orientation="left">DLQ</Divider>,
+ visible: values => values.middlewareType === 'PULSAR',
+ },
+ 'mqExtInfo.isDlq',
+ 'mqExtInfo.deadLetterTopic',
+ {
+ type: <Divider orientation="left">RLQ</Divider>,
+ visible: values => values.mqExtInfo?.isDlq && values.middlewareType === 'PULSAR',
+ },
+ 'mqExtInfo.isRlq',
+ 'mqExtInfo.retryLetterTopic',
+ ],
changedValues,
- ),
-];
+ );
diff --git a/inlong-website/src/pages/ConsumeCreate/Info/index.tsx b/inlong-website/src/pages/ConsumeCreate/Info/index.tsx
index 6dceebe..87cb897 100644
--- a/inlong-website/src/pages/ConsumeCreate/Info/index.tsx
+++ b/inlong-website/src/pages/ConsumeCreate/Info/index.tsx
@@ -46,6 +46,10 @@ const Comp = ({ id }: Props, ref) => {
{
ready: !!id && !Object.keys(changedValues).length,
refreshDeps: [id],
+ formatResult: data => ({
+ ...data,
+ topic: data.topic.split(','),
+ }),
onSuccess: data => {
form.setFieldsValue(data);
setChangedValues(data);
@@ -53,18 +57,17 @@ const Comp = ({ id }: Props, ref) => {
},
);
- const { data: businessData } = useRequest(`/business/get/${changedValues.inlongGroupId}`, {
- refreshDeps: [changedValues.inlongGroupId],
- ready: !!changedValues.inlongGroupId,
- });
-
const onOk = async () => {
const values = await form.validateFields();
const data = {
...values,
inCharges: values.inCharges.join(','),
consumerGroupId: values.consumerGroupName || savedData.consumerGroupId,
- middlewareType: businessData.middlewareType,
+ topic: Array.isArray(values.topic) ? values.topic.join(',') : values.topic,
+ mqExtInfo: {
+ ...values.mqExtInfo,
+ middlewareType: values.middlewareType,
+ },
};
if (id) data.id = id;
@@ -99,9 +102,9 @@ const Comp = ({ id }: Props, ref) => {
<>
<FormGenerator
form={form}
- content={getFormContent({ businessData, changedValues })}
+ content={getFormContent({ changedValues })}
useMaxWidth={800}
- onValuesChange={(c, v) => setChangedValues(v)}
+ onValuesChange={(c, v) => setChangedValues(prev => ({ ...prev, ...v }))}
allValues={savedData}
/>
</>
diff --git a/inlong-website/src/pages/ConsumeDetail/Info/config.tsx b/inlong-website/src/pages/ConsumeDetail/Info/config.tsx
index db10e3a..6132b64 100644
--- a/inlong-website/src/pages/ConsumeDetail/Info/config.tsx
+++ b/inlong-website/src/pages/ConsumeDetail/Info/config.tsx
@@ -21,26 +21,42 @@ import React from 'react';
import { genBasicFields } from '@/components/ConsumeHelper';
import i18n from '@/i18n';
-export const getFormContent = ({ editing, initialValues, businessData }) =>
- [
- {
- type: 'text',
- label: i18n.t('pages.ConsumeDetail.Info.config.ConsumerGroupID'),
- name: 'consumerGroupId',
- rules: [{ required: true }],
- },
- ...genBasicFields(
- ['consumerGroupName', 'inCharges', 'masterUrl', 'inlongGroupId'],
- businessData,
- initialValues,
- ),
- ...genBasicFields(['topic', 'filterEnabled', 'inlongStreamId'], businessData, initialValues),
- ].map(item => {
+export const getFormContent = ({ editing, initialValues }) =>
+ genBasicFields(
+ [
+ {
+ type: 'text',
+ label: i18n.t('pages.ConsumeDetail.Info.config.ConsumerGroupID'),
+ name: 'consumerGroupId',
+ rules: [{ required: true }],
+ },
+ 'consumerGroupName',
+ 'inCharges',
+ 'masterUrl',
+ 'inlongGroupId',
+ 'topic',
+ 'filterEnabled',
+ 'inlongStreamId',
+ 'mqExtInfo.isDlq',
+ 'mqExtInfo.deadLetterTopic',
+ 'mqExtInfo.isRlq',
+ 'mqExtInfo.retryLetterTopic',
+ ],
+ initialValues,
+ ).map(item => {
const obj = { ...item };
if (typeof obj.suffix !== 'string') {
delete obj.suffix;
}
delete obj.extra;
+ if (!editing) {
+ if (typeof obj.type === 'string') {
+ obj.type = 'text';
+ }
+ if (obj.name === 'inCharges') {
+ obj.type = <span>{initialValues?.inCharges?.join(', ')}</span>;
+ }
+ }
if (
[
@@ -55,9 +71,5 @@ export const getFormContent = ({ editing, initialValues, businessData }) =>
obj.type = 'text';
}
- if (!editing && obj.name === 'inCharges') {
- obj.type = <span>{initialValues?.inCharges?.join(', ')}</span>;
- }
-
return obj;
});
diff --git a/inlong-website/src/pages/ConsumeDetail/Info/index.tsx b/inlong-website/src/pages/ConsumeDetail/Info/index.tsx
index dde1ed8..ad33508 100644
--- a/inlong-website/src/pages/ConsumeDetail/Info/index.tsx
+++ b/inlong-website/src/pages/ConsumeDetail/Info/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import React, { useState } from 'react';
+import React from 'react';
import ReactDom from 'react-dom';
import { Button, Space, message } from 'antd';
import FormGenerator, { useForm } from '@/components/FormGenerator';
@@ -33,8 +33,6 @@ const Comp: React.FC<Props> = ({ id, isActive, readonly, extraRef }) => {
const { t } = useTranslation();
const [editing, { setTrue, setFalse }] = useBoolean(false);
- const [changedValues, setChangedValues] = useState<Record<string, unknown>>({});
-
const [form] = useForm();
const { data, run: getDetail } = useRequest(
@@ -52,26 +50,17 @@ const Comp: React.FC<Props> = ({ id, isActive, readonly, extraRef }) => {
},
);
- const { data: newBusinessData } = useRequest(`/business/get/${changedValues.inlongGroupId}`, {
- refreshDeps: [changedValues.inlongGroupId],
- ready: !!changedValues.inlongGroupId,
- debounceInterval: 500,
- });
-
- const businessData =
- editing && newBusinessData
- ? newBusinessData
- : {
- middlewareType: data?.middlewareType,
- };
-
const onSave = async () => {
const values = await form.validateFields();
const submitData = {
...values,
inCharges: values.inCharges.join(','),
consumerGroupId: values.consumerGroupName,
- middlewareType: businessData?.middlewareType || data?.middlewareType,
+ middlewareType: values?.middlewareType || data?.middlewareType,
+ mqExtInfo: {
+ ...values.mqExtInfo,
+ middlewareType: values.middlewareType,
+ },
};
await request({
url: `/consumption/update/${id}`,
@@ -110,10 +99,8 @@ const Comp: React.FC<Props> = ({ id, isActive, readonly, extraRef }) => {
content={getFormContent({
editing,
initialValues: data,
- businessData,
})}
allValues={data}
- onValuesChange={(c, v) => setChangedValues(v)}
useMaxWidth={800}
/>