This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push:
new 7859e036c [INLONG-7163][Dashboard] Data subscription addition and
details page optimization (#7179)
7859e036c is described below
commit 7859e036c12b91abf1897746a78424a94af6d17a
Author: Lizhen <88174078+bluew...@users.noreply.github.com>
AuthorDate: Fri Jan 6 21:49:25 2023 +0800
[INLONG-7163][Dashboard] Data subscription addition and details page
optimization (#7179)
---
inlong-dashboard/src/locales/cn.json | 2 +
inlong-dashboard/src/locales/en.json | 2 +
.../metas/consumes/common/ConsumeDefaultInfo.ts | 45 ++++++++++++++--------
.../src/metas/consumes/defaults/Pulsar.ts | 4 +-
.../src/pages/ConsumeDetail/Info/config.tsx | 28 ++++++++++++++
.../src/pages/ConsumeDetail/Info/index.tsx | 11 +++++-
inlong-dashboard/src/pages/ConsumeDetail/index.tsx | 4 +-
7 files changed, 76 insertions(+), 20 deletions(-)
diff --git a/inlong-dashboard/src/locales/cn.json
b/inlong-dashboard/src/locales/cn.json
index 7b56eb441..e9ca2b47e 100644
--- a/inlong-dashboard/src/locales/cn.json
+++ b/inlong-dashboard/src/locales/cn.json
@@ -387,6 +387,7 @@
"meta.Consume.No": "否",
"meta.Consume.Owner": "订阅责任人",
"meta.Consume.OwnersExtra": "可查看、修改订阅信息",
+ "meta.Consume.Pulsar.isDiq": "配置死信队列",
"meta.Nodes.Name": "节点名称",
"meta.Nodes.Type": "类型",
"meta.Nodes.Owners": "责任人",
@@ -585,6 +586,7 @@
"pages.ConsumeDashboard.status.Cancelled": "已取消",
"pages.ConsumeDashboard.NewSubscribe": "新建订阅",
"pages.ConsumeDetail.SubscribeDetails": "订阅详情",
+ "pages.ConsumeDetail.ClusterInfo": "集群信息:",
"pages.Clusters.Type": "类型",
"pages.Clusters.TypeAll": "全部",
"pages.Clusters.Create": "新建集群",
diff --git a/inlong-dashboard/src/locales/en.json
b/inlong-dashboard/src/locales/en.json
index d243632c9..ff0bd4de7 100644
--- a/inlong-dashboard/src/locales/en.json
+++ b/inlong-dashboard/src/locales/en.json
@@ -387,6 +387,7 @@
"meta.Consume.No": "No",
"meta.Consume.Owner": "Subscription Owners",
"meta.Consume.OwnersExtra": "Can view, modify subscription info",
+ "meta.Consume.Pulsar.isDiq": "Configure dead letter queue",
"meta.Nodes.Name": "Name",
"meta.Nodes.Type": "Type",
"meta.Nodes.Owners": "Owners",
@@ -585,6 +586,7 @@
"pages.ConsumeDashboard.status.Cancelled": "Cancelled",
"pages.ConsumeDashboard.NewSubscribe": "Create",
"pages.ConsumeDetail.SubscribeDetails": "Subscription Detail",
+ "pages.ConsumeDetail.ClusterInfo": "ClusterInfo:",
"pages.Clusters.Type": "Type",
"pages.Clusters.TypeAll": "All",
"pages.Clusters.Create": "Create",
diff --git a/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts
b/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts
index a49c86d34..3accd2810 100644
--- a/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts
+++ b/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts
@@ -70,11 +70,37 @@ export class ConsumeDefaultInfo implements DataWithBackend,
RenderRow, RenderLis
@I18n('meta.Consume.Owner')
inCharges: string;
+ @FieldDecorator({
+ type: 'radio',
+ rules: [{ required: true }],
+ props: {
+ options: [
+ {
+ label: 'Kafka',
+ value: 'KAFKA',
+ },
+ {
+ label: 'Pulsar',
+ value: 'PULSAR',
+ },
+ {
+ label: 'TubeMQ',
+ value: 'TUBEMQ',
+ },
+ ],
+ },
+ })
+ @ColumnDecorator({
+ render: text => consumes.find(c => c.value === text)?.label || text,
+ })
+ @I18n('meta.Consume.MQType')
+ mqType: string;
+
@FieldDecorator({
type: 'select',
extraNames: ['mqType'],
rules: [{ required: true }],
- props: {
+ props: values => ({
showSearch: true,
filterOption: false,
options: {
@@ -84,6 +110,7 @@ export class ConsumeDefaultInfo implements DataWithBackend,
RenderRow, RenderLis
method: 'POST',
data: {
keyword,
+ mqType: values.mqType,
pageNum: 1,
pageSize: 20,
status: 130,
@@ -93,7 +120,7 @@ export class ConsumeDefaultInfo implements DataWithBackend,
RenderRow, RenderLis
formatResult: result =>
result?.list?.map(item => ({
...item,
- label: `${item.inlongGroupId} (${item.mqType})`,
+ label: item.inlongGroupId,
value: item.inlongGroupId,
})),
},
@@ -102,18 +129,12 @@ export class ConsumeDefaultInfo implements
DataWithBackend, RenderRow, RenderLis
topic: undefined,
mqType: option.mqType,
}),
- },
+ }),
})
@ColumnDecorator()
@I18n('meta.Consume.TargetInlongGroupID')
inlongGroupId: string;
- @ColumnDecorator({
- render: text => consumes.find(c => c.value === text)?.label || text,
- })
- @I18n('meta.Consume.MQType')
- mqType: string;
-
@FieldDecorator({
type: 'select',
rules: [{ required: true }],
@@ -187,12 +208,6 @@ export class ConsumeDefaultInfo implements
DataWithBackend, RenderRow, RenderLis
@I18n('pages.ConsumeDashboard.config.OperatingStatus')
readonly lastConsumeStatus: string;
- @FieldDecorator({
- type: 'text',
- })
- @I18n('meta.Consume.MQAddress')
- readonly masterUrl: string;
-
parse(data) {
return data;
}
diff --git a/inlong-dashboard/src/metas/consumes/defaults/Pulsar.ts
b/inlong-dashboard/src/metas/consumes/defaults/Pulsar.ts
index 04e0ac284..af13a3042 100644
--- a/inlong-dashboard/src/metas/consumes/defaults/Pulsar.ts
+++ b/inlong-dashboard/src/metas/consumes/defaults/Pulsar.ts
@@ -47,7 +47,7 @@ export default class PulsarConsume
],
},
})
- @I18n('isDlq')
+ @I18n('meta.Consume.Pulsar.isDiq')
isDlq: 0 | 1;
@FieldDecorator({
@@ -76,7 +76,7 @@ export default class PulsarConsume
},
visible: values => values?.isDlq,
})
- @I18n('isRlq')
+ @I18n('meta.Consume.Pulsar.isDiq')
isRlq: 0 | 1;
@FieldDecorator({
diff --git a/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx
b/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx
index 858689352..e327ebc5f 100644
--- a/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx
+++ b/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx
@@ -20,6 +20,9 @@
import { useMemo } from 'react';
import { useLoadMeta, ConsumeMetaType } from '@/metas';
import { excludeObjectArray } from '@/utils';
+import React from 'react';
+import { Table } from 'antd';
+import i18n from '@/i18n';
export const useFormContent = ({ mqType, editing, isCreate }) => {
const { Entity } = useLoadMeta<ConsumeMetaType>('consume', mqType);
@@ -47,6 +50,31 @@ export const useFormContent = ({ mqType, editing, isCreate
}) => {
}));
};
+export const getFormContent = ({ clusterInfos, isCreate, formContent }) => {
+ const array = [
+ ...formContent,
+ {
+ type: <label>{i18n.t('pages.ConsumeDetail.ClusterInfo')}</label>,
+ },
+ {
+ type: (
+ <Table
+ size="small"
+ columns={[
+ { title: 'name', dataIndex: 'name' },
+ { title: 'type', dataIndex: 'type' },
+ { title: 'serviceUrl', dataIndex: 'url' },
+ { title: 'adminUrl', dataIndex: 'adminUrl' },
+ ]}
+ dataSource={clusterInfos}
+ rowKey="name"
+ />
+ ),
+ },
+ ];
+ return isCreate ? formContent : array;
+};
+
function transType(editing: boolean, conf) {
const arr = [
{
diff --git a/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
b/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
index 61d7b6a2f..9f631c272 100644
--- a/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
+++ b/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
@@ -25,7 +25,7 @@ import request from '@/utils/request';
import { useTranslation } from 'react-i18next';
import { useDefaultMeta } from '@/metas';
import { CommonInterface } from '../common';
-import { useFormContent } from './config';
+import { getFormContent, useFormContent } from './config';
type Props = CommonInterface;
@@ -37,6 +37,8 @@ const Comp = ({ id, readonly, isCreate }: Props, ref) => {
const [mqType, setMqType] = useState(defaultValue);
+ const [clusterInfos, setClusterInfos] = useState(defaultValue);
+
const [form] = useForm();
const isUpdate = useMemo(() => {
@@ -54,6 +56,7 @@ const Comp = ({ id, readonly, isCreate }: Props, ref) => {
onSuccess: data => {
form.setFieldsValue(data);
setMqType(data.mqType);
+ setClusterInfos(data.clusterInfos);
},
});
@@ -104,7 +107,11 @@ const Comp = ({ id, readonly, isCreate }: Props, ref) => {
<div style={{ position: 'relative' }}>
<FormGenerator
form={form}
- content={formContent}
+ content={getFormContent({
+ clusterInfos,
+ isCreate,
+ formContent,
+ })}
initialValues={data}
onValuesChange={(c, values) => setMqType(values.mqType)}
useMaxWidth={800}
diff --git a/inlong-dashboard/src/pages/ConsumeDetail/index.tsx
b/inlong-dashboard/src/pages/ConsumeDetail/index.tsx
index dcadd70fd..4b6917b64 100644
--- a/inlong-dashboard/src/pages/ConsumeDetail/index.tsx
+++ b/inlong-dashboard/src/pages/ConsumeDetail/index.tsx
@@ -55,7 +55,9 @@ const Comp: React.FC = () => {
const list = useMemo(
() => [
{
- label: t('pages.ConsumeDetail.SubscribeDetails'),
+ label: isCreate
+ ? t('pages.ConsumeCreate.NewSubscribe')
+ : t('pages.ConsumeDetail.SubscribeDetails'),
value: 'consumeDetail',
content: Info,
},
