You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by le...@apache.org on 2022/06/29 07:24:58 UTC
[inlong] branch master updated: [INLONG-4809][Dashboard] Remove and optimize some old logic
This is an automated email from the ASF dual-hosted git repository.
leezng 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 f77dcabc8 [INLONG-4809][Dashboard] Remove and optimize some old logic
f77dcabc8 is described below
commit f77dcabc894e8b7bf988e52e766e489aa7de9cb0
Author: Daniel <le...@outlook.com>
AuthorDate: Wed Jun 29 15:24:51 2022 +0800
[INLONG-4809][Dashboard] Remove and optimize some old logic
---
.../AccessHelper/FieldsConfig/dataFields.tsx | 93 +++-------------------
.../AccessDetail/DataStream/index.module.less | 7 +-
.../src/pages/AccessDetail/DataStream/index.tsx | 31 ++++----
inlong-dashboard/src/pages/AccessDetail/index.tsx | 4 +-
4 files changed, 30 insertions(+), 105 deletions(-)
diff --git a/inlong-dashboard/src/components/AccessHelper/FieldsConfig/dataFields.tsx b/inlong-dashboard/src/components/AccessHelper/FieldsConfig/dataFields.tsx
index f9ff4fb04..b91d13892 100644
--- a/inlong-dashboard/src/components/AccessHelper/FieldsConfig/dataFields.tsx
+++ b/inlong-dashboard/src/components/AccessHelper/FieldsConfig/dataFields.tsx
@@ -20,12 +20,9 @@
import React from 'react';
import { FormItemProps } from '@/components/FormGenerator';
import { pickObjectArray } from '@/utils';
-import DataSourcesEditor from '../DataSourcesEditor';
-import DataStorageEditor from '../DataStorageEditor/Editor';
import EditableTable from '@/components/EditableTable';
import i18n from '@/i18n';
import { fieldTypes as sourceFieldsTypes } from '@/components/MetaData/SourceDataFields';
-import { Storages } from '@/components/MetaData';
type RestParams = {
inlongGroupId?: string;
@@ -49,10 +46,10 @@ export default (
readonly = false,
}: RestParams = {},
): FormItemProps[] => {
- const basicProps = {
- inlongGroupId: inlongGroupId,
- inlongStreamId: currentValues.inlongStreamId,
- };
+ // const basicProps = {
+ // inlongGroupId: inlongGroupId,
+ // inlongStreamId: currentValues.inlongStreamId,
+ // };
const fields: FormItemProps[] = [
{
@@ -87,44 +84,6 @@ export default (
},
initialValue: currentValues.desc,
},
- {
- type: 'radio',
- label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Source'),
- name: 'dataSourceType',
- initialValue: currentValues.dataSourceType ?? 'AUTO_PUSH',
- props: {
- options: [
- {
- label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.File'),
- value: 'FILE',
- },
- {
- label: 'BINLOG',
- value: 'BINLOG',
- },
- {
- label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Autonomous'),
- value: 'AUTO_PUSH',
- },
- ],
- },
- rules: [{ required: true }],
- },
- {
- type: currentValues.dataSourceType ? (
- <DataSourcesEditor
- readonly={readonly}
- type={currentValues.dataSourceType}
- useActionRequest={useDataSourcesActionRequest}
- {...basicProps}
- />
- ) : (
- <div />
- ),
- preserve: false,
- name: 'dataSourcesConfig',
- visible: values => values.dataSourceType === 'BINLOG' || values.dataSourceType === 'FILE',
- },
{
type: 'radio',
label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataType'),
@@ -152,7 +111,7 @@ export default (
],
},
rules: [{ required: true }],
- visible: values => values.dataSourceType !== 'BINLOG',
+ // visible: values => values.dataSourceType !== 'BINLOG',
},
{
type: 'radio',
@@ -172,7 +131,7 @@ export default (
],
},
rules: [{ required: true }],
- visible: values => values.dataSourceType === 'FILE' || values.dataSourceType === 'AUTO_PUSH',
+ // visible: values => values.dataSourceType === 'FILE' || values.dataSourceType === 'AUTO_PUSH',
},
{
type: 'select',
@@ -222,9 +181,9 @@ export default (
max: 127,
},
],
- visible: values =>
- (values.dataSourceType === 'FILE' || values.dataSourceType === 'AUTO_PUSH') &&
- values.dataType === 'CSV',
+ // visible: values =>
+ // (values.dataSourceType === 'FILE' || values.dataSourceType === 'AUTO_PUSH') &&
+ // values.dataType === 'CSV',
},
{
type: (
@@ -268,40 +227,6 @@ export default (
name: 'rowTypeFields',
visible: () => !(currentValues.dataType as string[])?.includes('PB'),
},
- {
- type: 'checkboxgroup',
- label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataFlowDirection'),
- name: 'streamSink',
- props: {
- options: Storages.map(item => {
- return {
- label: item.label,
- value: item.value,
- };
- }).concat({
- label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.AutoConsumption'),
- value: 'AUTO_CONSUMPTION',
- }),
- },
- },
- ...Storages.map(item => item.value).reduce(
- (acc, item) =>
- acc.concat({
- type: (
- <DataStorageEditor
- readonly={readonly}
- defaultRowTypeFields={currentValues.rowTypeFields}
- type={item}
- dataType={currentValues.dataType}
- useActionRequest={useDataStorageActionRequest}
- {...basicProps}
- />
- ),
- name: `streamSink${item}`,
- visible: values => (values.streamSink as string[])?.includes(item),
- }),
- [],
- ),
];
return pickObjectArray(names, fields);
diff --git a/inlong-dashboard/src/pages/AccessDetail/DataStream/index.module.less b/inlong-dashboard/src/pages/AccessDetail/DataStream/index.module.less
index 0d432ced8..06660a476 100644
--- a/inlong-dashboard/src/pages/AccessDetail/DataStream/index.module.less
+++ b/inlong-dashboard/src/pages/AccessDetail/DataStream/index.module.less
@@ -25,10 +25,7 @@
}
.collapseHeader {
- display: flex;
+ display: inline-flex;
justify-content: space-between;
+ width: calc(100% - 200px);
}
-
-.collapseHeaderItem {
- flex: 1;
-}
\ No newline at end of file
diff --git a/inlong-dashboard/src/pages/AccessDetail/DataStream/index.tsx b/inlong-dashboard/src/pages/AccessDetail/DataStream/index.tsx
index 8bcc7ea0d..993af0d16 100644
--- a/inlong-dashboard/src/pages/AccessDetail/DataStream/index.tsx
+++ b/inlong-dashboard/src/pages/AccessDetail/DataStream/index.tsx
@@ -22,7 +22,7 @@ import ReactDom from 'react-dom';
import { Form, Collapse, Button, Empty, Modal, Space, message } from 'antd';
import FormGenerator, { FormItemContent } from '@/components/FormGenerator';
import { defaultSize } from '@/configs/pagination';
-import { useRequest } from '@/hooks';
+import { useRequest, useEventEmitter } from '@/hooks';
import request from '@/utils/request';
import { useTranslation } from 'react-i18next';
import { dataToValues, valuesToData } from './helper';
@@ -179,7 +179,7 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props, ref) => {
});
};
- const genExtra = (record, index) => {
+ const genExtra = (record = {}, index) => {
const list = genExtraContent({
editingId,
record,
@@ -214,20 +214,23 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props, ref) => {
<div className={styles.collapseHeader}>
{(record as any).inlongStreamId ? (
['inlongStreamId', 'name', 'modifier', 'createTime', 'status'].map(key => (
- <div key={key} className={styles.collapseHeaderItem}>
- {key === 'status' ? genStatusTag(record?.[key]) : record?.[key]}
- </div>
+ <div key={key}>{key === 'status' ? genStatusTag(record?.[key]) : record?.[key]}</div>
))
) : (
- <div className={styles.collapseHeaderItem}>
- {t('pages.AccessDetail.DataStream.NewDataStream')}
- </div>
+ <div>{t('pages.AccessDetail.DataStream.NewDataStream')}</div>
)}
- {!readonly && genExtra(record, index)}
</div>
);
};
+ const event$ = useEventEmitter();
+
+ event$.useSubscription(() => {
+ setTimeout(() => {
+ setRealTimeValues(form.getFieldsValue());
+ }, 0);
+ });
+
return (
<>
<div className={styles.topFilterContainer}>
@@ -255,11 +258,8 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props, ref) => {
onClick={async () => {
setEditingId(true);
await add({}, 0);
- setTimeout(() => {
- setRealTimeValues(form.getFieldsValue());
- const newActiveKey = Math.max(...fields.map(item => item.key)) + 1 + '';
- setActiveKey(newActiveKey);
- }, 0);
+ event$.emit();
+ setActiveKey('isAdd');
mutate({ list: [{}].concat(data.list), total: data.list.length + 1 });
}}
>
@@ -279,7 +279,8 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props, ref) => {
{fields.map((field, index) => (
<Collapse.Panel
header={genHeader(data?.list?.[index], index)}
- key={field.key.toString()}
+ extra={!readonly && genExtra(data?.list?.[index], index)}
+ key={editingId === true && index === 0 ? 'isAdd' : field.key.toString()}
style={{
marginBottom: 10,
border: '1px solid #e5e5e5',
diff --git a/inlong-dashboard/src/pages/AccessDetail/index.tsx b/inlong-dashboard/src/pages/AccessDetail/index.tsx
index c098151ec..90282281a 100644
--- a/inlong-dashboard/src/pages/AccessDetail/index.tsx
+++ b/inlong-dashboard/src/pages/AccessDetail/index.tsx
@@ -135,7 +135,9 @@ const Comp: React.FC = () => {
onClick={async () => {
await onOk(current).catch(err => {
if (err?.errorFields?.length) {
- message.error(t('pages.AccessCreate.CheckFormIntegrity'));
+ message.error(t('pages.AccessCreate.CheckMsg'));
+ } else if (typeof err === 'string') {
+ message.error(err);
}
return Promise.reject(err);
});