You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by do...@apache.org on 2023/01/09 11:56:00 UTC
[inlong] 07/07: [INLONG-7190][Dashboard] New data subscription optimization (#7196)
This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch branch-1.5
in repository https://gitbox.apache.org/repos/asf/inlong.git
commit b5f562144652509512fd6bfef95006ae1c417364
Author: Lizhen <88...@users.noreply.github.com>
AuthorDate: Mon Jan 9 19:42:34 2023 +0800
[INLONG-7190][Dashboard] New data subscription optimization (#7196)
---
.../metas/consumes/common/ConsumeDefaultInfo.ts | 43 +++++++---------------
.../src/pages/ConsumeDetail/Info/config.tsx | 28 --------------
.../src/pages/ConsumeDetail/Info/index.tsx | 27 ++++++++++----
3 files changed, 32 insertions(+), 66 deletions(-)
diff --git a/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts b/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts
index 3accd2810..700b1bfe2 100644
--- a/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts
+++ b/inlong-dashboard/src/metas/consumes/common/ConsumeDefaultInfo.ts
@@ -70,37 +70,11 @@ 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: values => ({
+ props: {
showSearch: true,
filterOption: false,
options: {
@@ -110,7 +84,6 @@ export class ConsumeDefaultInfo implements DataWithBackend, RenderRow, RenderLis
method: 'POST',
data: {
keyword,
- mqType: values.mqType,
pageNum: 1,
pageSize: 20,
status: 130,
@@ -120,7 +93,7 @@ export class ConsumeDefaultInfo implements DataWithBackend, RenderRow, RenderLis
formatResult: result =>
result?.list?.map(item => ({
...item,
- label: item.inlongGroupId,
+ label: `${item.inlongGroupId} (${item.mqType})`,
value: item.inlongGroupId,
})),
},
@@ -129,7 +102,7 @@ export class ConsumeDefaultInfo implements DataWithBackend, RenderRow, RenderLis
topic: undefined,
mqType: option.mqType,
}),
- }),
+ },
})
@ColumnDecorator()
@I18n('meta.Consume.TargetInlongGroupID')
@@ -172,6 +145,16 @@ export class ConsumeDefaultInfo implements DataWithBackend, RenderRow, RenderLis
@I18n('meta.Consume.TopicName')
topic: string;
+ @FieldDecorator({
+ type: 'text',
+ visible: values => values.id,
+ })
+ @ColumnDecorator({
+ render: text => consumes.find(c => c.value === text)?.label || text,
+ })
+ @I18n('meta.Consume.MQType')
+ mqType: string;
+
@FieldDecorator({
type: 'select',
props: {
diff --git a/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx b/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx
index e327ebc5f..858689352 100644
--- a/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx
+++ b/inlong-dashboard/src/pages/ConsumeDetail/Info/config.tsx
@@ -20,9 +20,6 @@
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);
@@ -50,31 +47,6 @@ 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 9f631c272..bb40a4e5c 100644
--- a/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
+++ b/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
@@ -18,14 +18,14 @@
*/
import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
-import { Button, message, Space } from 'antd';
+import { Button, message, Space, Table } from 'antd';
import FormGenerator, { useForm } from '@/components/FormGenerator';
import { useBoolean, useRequest } from '@/hooks';
import request from '@/utils/request';
import { useTranslation } from 'react-i18next';
import { useDefaultMeta } from '@/metas';
import { CommonInterface } from '../common';
-import { getFormContent, useFormContent } from './config';
+import { useFormContent } from './config';
type Props = CommonInterface;
@@ -37,7 +37,7 @@ const Comp = ({ id, readonly, isCreate }: Props, ref) => {
const [mqType, setMqType] = useState(defaultValue);
- const [clusterInfos, setClusterInfos] = useState(defaultValue);
+ const [clusterInfos, setClusterInfos] = useState([]);
const [form] = useForm();
@@ -107,15 +107,26 @@ const Comp = ({ id, readonly, isCreate }: Props, ref) => {
<div style={{ position: 'relative' }}>
<FormGenerator
form={form}
- content={getFormContent({
- clusterInfos,
- isCreate,
- formContent,
- })}
+ content={formContent}
initialValues={data}
onValuesChange={(c, values) => setMqType(values.mqType)}
useMaxWidth={800}
/>
+ {!isCreate && <label>{t('pages.ConsumeDetail.ClusterInfo')}</label>}
+ {!isCreate && (
+ <Table
+ size="small"
+ columns={[
+ { title: 'name', dataIndex: 'name' },
+ { title: 'type', dataIndex: 'type' },
+ { title: 'serviceUrl', dataIndex: 'url' },
+ { title: 'adminUrl', dataIndex: 'adminUrl' },
+ ]}
+ style={{ marginTop: 20 }}
+ dataSource={clusterInfos}
+ rowKey="name"
+ ></Table>
+ )}
{!isCreate && !readonly && (
<div style={{ position: 'absolute', top: 0, right: 0 }}>