Skip to content
Permalink
Browse files
[INLONG-4218][Dashboard] Unified group page (#4219)
  • Loading branch information
leezng committed May 16, 2022
1 parent b8bec82 commit ff35db420cc6c032693f057d6dc66e4414dbf24a
Showing 15 changed files with 315 additions and 172 deletions.
@@ -129,11 +129,12 @@ const FormGenerator: React.FC<FormGeneratorProps> = props => {
if (props.allValues) {
setRealTimeValues(props.allValues);
} else if (form) {
setTimeout(() => {
const timmer = setTimeout(() => {
const { getFieldsValue } = form;
const values = getFieldsValue(true);
setRealTimeValues(prev => ({ ...prev, ...values }));
}, 0);
return () => clearTimeout(timmer);
}
}, [form, props.allValues]);

@@ -42,8 +42,8 @@ const routes: RouteProps[] = [
exact: true,
childRoutes: [
{
path: '/create',
component: () => import('@/pages/AccessCreate'),
path: '/create/:id?',
component: () => import('@/pages/AccessDetail'),
exact: true,
},
{
@@ -178,13 +178,11 @@
"pages.AccessCreate.Business.config.AccessRequirements": "接入要求",
"pages.AccessCreate.Business.config.AccessScale": "接入规模",
"pages.AccessCreate.DataStream.config.Basic": "基础信息",
"pages.AccessCreate.DataStream.config.DataSources": "数据来源",
"pages.AccessCreate.DataStream.config.DataInfo": "数据信息",
"pages.AccessCreate.DataStream.config.DataStorages": "数据流向",
"pages.AccessCreate.Back": "返回",
"pages.AccessCreate.NextStep": "下一步",
"pages.AccessCreate.DataStreams": "数据流",
"pages.AccessCreate.CheckFormIntegrity": "请检查表单完整性",
"pages.AccessCreate.Submit": "提交审批",
"pages.AccessCreate.SubmittedSuccessfully": "提交成功",
"pages.AccessCreate.BusinessInfo": "分组信息",
@@ -178,13 +178,11 @@
"pages.AccessCreate.Business.config.AccessRequirements": "Access requirements",
"pages.AccessCreate.Business.config.AccessScale": "Access scale",
"pages.AccessCreate.DataStream.config.Basic": "Basic Info",
"pages.AccessCreate.DataStream.config.DataSources": "Data Sources",
"pages.AccessCreate.DataStream.config.DataInfo": "Data Info",
"pages.AccessCreate.DataStream.config.DataStorages": "Data Storages",
"pages.AccessCreate.Back": "Back",
"pages.AccessCreate.NextStep": "Next",
"pages.AccessCreate.DataStreams": "Data streams",
"pages.AccessCreate.CheckFormIntegrity": "Check form integrity",
"pages.AccessCreate.Submit": "Submit",
"pages.AccessCreate.SubmittedSuccessfully": "Submitted successfully",
"pages.AccessCreate.BusinessInfo": "Group information",
@@ -41,14 +41,14 @@ export const genFormContent = (currentValues, inlongGroupId, middlewareType) =>
'inlongStreamId',
'name',
'description',
{
type: (
<Divider orientation="left">
{i18n.t('pages.AccessCreate.DataStream.config.DataSources')}
</Divider>
),
},
'dataSourceType',
// {
// type: (
// <Divider orientation="left">
// {i18n.t('pages.AccessCreate.DataStream.config.DataSources')}
// </Divider>
// ),
// },
// 'dataSourceType',
// 'hasHigher',
// 'isHybridSource',
// 'isTableMapping',
@@ -70,7 +70,7 @@ export const getFilterFormContent = defaultValues => [
];

export const getColumns = ({ onDelete, openModal }) => {
const genCreateUrl = record => `/access/create?inlongGroupId=${record.inlongGroupId}`;
const genCreateUrl = record => `/access/create/${record.inlongGroupId}`;
const genDetailUrl = record =>
[0, 100].includes(record.status)
? genCreateUrl(record)
@@ -17,7 +17,7 @@
* under the License.
*/

import React, { useState } from 'react';
import React, { useState, forwardRef } from 'react';
import { Button, Modal, message } from 'antd';
import HighTable from '@/components/HighTable';
import { defaultSize } from '@/configs/pagination';
@@ -58,7 +58,7 @@ const getFilterFormContent = defaultValues => [
},
];

const Comp: React.FC<Props> = ({ inlongGroupId }) => {
const Comp = ({ inlongGroupId }: Props, ref) => {
const [options, setOptions] = useState({
// keyword: '',
pageSize: defaultSize,
@@ -245,4 +245,4 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
);
};

export default Comp;
export default forwardRef(Comp);
@@ -17,7 +17,7 @@
* under the License.
*/

import React, { useState, useMemo } from 'react';
import React, { useState, useMemo, forwardRef } from 'react';
import { Button, Modal, message } from 'antd';
import HighTable from '@/components/HighTable';
import { defaultSize } from '@/configs/pagination';
@@ -51,7 +51,7 @@ const getFilterFormContent = defaultValues => [
},
];

const Comp: React.FC<Props> = ({ inlongGroupId }) => {
const Comp = ({ inlongGroupId }: Props, ref) => {
const [options, setOptions] = useState({
keyword: '',
pageSize: defaultSize,
@@ -261,4 +261,4 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
);
};

export default Comp;
export default forwardRef(Comp);
@@ -52,14 +52,6 @@ export const genFormContent = (currentValues, inlongGroupId, middlewareType) =>
'inlongStreamId',
'name',
'description',
{
type: (
<Divider orientation="left">
{i18n.t('pages.AccessCreate.DataStream.config.DataSources')}
</Divider>
),
},
'dataSourceType',
{
type: (
<Divider orientation="left">
@@ -21,7 +21,6 @@ import React from 'react';
import { Divider } from 'antd';
import i18n from '@/i18n';
import { genBusinessFields, genDataFields } from '@/components/AccessHelper';
import { Storages } from '@/components/MetaData';

export const getFilterFormContent = (defaultValues = {} as any) => [
{
@@ -101,15 +100,6 @@ export const genFormContent = (
},
'name',
'description',
{
type: (
<Divider orientation="left">
{i18n.t('pages.AccessCreate.DataStream.config.DataSources')}
</Divider>
),
},
'dataSourceType',
'dataSourcesConfig',
{
type: (
<Divider orientation="left">
@@ -139,21 +129,21 @@ export const genFormContent = (
visible: middlewareType === 'PULSAR',
}),
),
...genDataFields(
[
{
type: (
<Divider orientation="left">
{i18n.t('pages.AccessCreate.DataStream.config.DataStorages')}
</Divider>
),
},
'streamSink',
...Storages.map(item => `streamSink${item.value}`),
],
currentValues,
extraParams,
),
// ...genDataFields(
// [
// {
// type: (
// <Divider orientation="left">
// {i18n.t('pages.AccessCreate.DataStream.config.DataStorages')}
// </Divider>
// ),
// },
// 'streamSink',
// ...Storages.map(item => `streamSink${item.value}`),
// ],
// currentValues,
// extraParams,
// ),
].map(item => {
if (
(editingId === true && currentValues?.id === undefined) ||
@@ -17,7 +17,7 @@
* under the License.
*/

import React, { useState, useRef } from 'react';
import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react';
import ReactDom from 'react-dom';
import { Form, Collapse, Button, Empty, Modal, Space, message } from 'antd';
import FormGenerator, { FormItemContent } from '@/components/FormGenerator';
@@ -26,7 +26,6 @@ import { useRequest } from '@/hooks';
import request from '@/utils/request';
import { useTranslation } from 'react-i18next';
import { dataToValues, valuesToData } from '@/pages/AccessCreate/DataStream/helper';
import { pickObject } from '@/utils';
import { CommonInterface } from '../common';
import StreamItemModal from './StreamItemModal';
import { getFilterFormContent, genExtraContent, genFormContent } from './config';
@@ -35,7 +34,7 @@ import styles from './index.module.less';

type Props = CommonInterface;

const Comp: React.FC<Props> = ({ inlongGroupId, readonly, middlewareType }) => {
const Comp = ({ inlongGroupId, readonly, middlewareType }: Props, ref) => {
const { t } = useTranslation();

const [form] = Form.useForm();
@@ -118,37 +117,47 @@ const Comp: React.FC<Props> = ({ inlongGroupId, readonly, middlewareType }) => {
const { list } = await getTouchedValues();
const values = list.find(item => item.id === record.id);
const data = valuesToData(values ? [values] : [], inlongGroupId);
const submitData = data.map(item =>
pickObject(['dbBasicInfo', 'fileBasicInfo', 'streamInfo'], item),
);
await request({
url: '/stream/update',
method: 'POST',
data: submitData?.[0]?.streamInfo,
data: data?.[0]?.streamInfo,
});
} else {
// create
const { list } = await form.validateFields();
const values = list?.[0];
const data = valuesToData(values ? [values] : [], inlongGroupId);
await request({
url: '/stream/saveAll',
url: '/stream/save',
method: 'POST',
data: data?.[0],
data: data?.[0]?.streamInfo,
});
}
await getList();
setEditingId(false);
message.success(t('basic.OperatingSuccess'));
};

const onOk = () => {
if (editingId) {
return Promise.reject('Please save the data');
} else {
return Promise.resolve();
}
};

useImperativeHandle(ref, () => ({
onOk,
}));

const onEdit = record => {
// setEditingId(record.id);
// setActiveKey(index.toString());
setStreamItemModal(prev => ({ ...prev, visible: true, record }));
};

const onCancel = async () => {
setEditingId(false);
await getList();
};

@@ -324,4 +333,4 @@ const Comp: React.FC<Props> = ({ inlongGroupId, readonly, middlewareType }) => {
);
};

export default Comp;
export default forwardRef(Comp);
@@ -20,42 +20,55 @@
// import React from 'react';
import { genBusinessFields } from '@/components/AccessHelper';

export const getFormContent = ({ editing, initialValues }) =>
genBusinessFields(
[
'middlewareType',
'inlongGroupId',
'mqResourceObj',
'name',
'cnName',
'inCharges',
'description',
'queueModule',
'topicPartitionNum',
'dailyRecords',
'dailyStorage',
'peakRecords',
'maxLength',
// 'mqExtInfo.ensemble',
'mqExtInfo.writeQuorum',
'mqExtInfo.ackQuorum',
'mqExtInfo.retentionTime',
'mqExtInfo.ttl',
'mqExtInfo.retentionSize',
],
initialValues,
).map(item => ({
...item,
type: transType(editing, item, initialValues),
suffix:
typeof item.suffix === 'object' && !editing
? {
...item.suffix,
type: 'text',
}
: item.suffix,
extra: null,
}));
export const getFormContent = ({ editing, initialValues, isCreate, isUpdate }) => {
const keys = [
'middlewareType',
!isCreate && 'inlongGroupId',
!isCreate && 'mqResourceObj',
'name',
'cnName',
'inCharges',
'description',
'queueModule',
'topicPartitionNum',
'dailyRecords',
'dailyStorage',
'peakRecords',
'maxLength',
// 'mqExtInfo.ensemble',
'mqExtInfo.writeQuorum',
'mqExtInfo.ackQuorum',
'mqExtInfo.retentionTime',
'mqExtInfo.ttl',
'mqExtInfo.retentionSize',
].filter(Boolean);

return isCreate
? genBusinessFields(keys, initialValues).map(item => {
if (item.name === 'name' && isUpdate) {
return {
...item,
props: {
...item.props,
disabled: true,
},
};
}
return item;
})
: genBusinessFields(keys, initialValues).map(item => ({
...item,
type: transType(editing, item, initialValues),
suffix:
typeof item.suffix === 'object' && !editing
? {
...item.suffix,
type: 'text',
}
: item.suffix,
extra: null,
}));
};

function transType(editing: boolean, conf, initialValues) {
const arr = [

0 comments on commit ff35db4

Please sign in to comment.