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/09/08 10:44:09 UTC
[inlong] branch master updated: [INLONG-5832][Dashboard] Unified sources type definition (#5833)
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 fbf1eceef [INLONG-5832][Dashboard] Unified sources type definition (#5833)
fbf1eceef is described below
commit fbf1eceefb54651a4dbb15f1e1959cb622e683af
Author: Daniel <le...@apache.org>
AuthorDate: Thu Sep 8 18:44:03 2022 +0800
[INLONG-5832][Dashboard] Unified sources type definition (#5833)
---
.../src/components/FormGenerator/FormGenerator.tsx | 24 +-
inlong-dashboard/src/metas/common.ts | 6 +
inlong-dashboard/src/metas/sources/autoPush.ts | 16 +-
inlong-dashboard/src/metas/sources/binLog.ts | 255 ++++++++++-----------
.../sources/common}/status.tsx | 0
inlong-dashboard/src/metas/sources/file.ts | 74 +++---
inlong-dashboard/src/metas/sources/index.ts | 83 +++++--
.../src/pages/ConsumeDetail/Info/index.tsx | 2 +-
.../pages/GroupDetail/DataSources/DetailModal.tsx | 48 +---
.../src/pages/GroupDetail/DataSources/index.tsx | 68 +++---
.../pages/GroupDetail/DataStorage/DetailModal.tsx | 2 +-
.../src/pages/GroupDetail/Info/index.tsx | 2 +-
12 files changed, 281 insertions(+), 299 deletions(-)
diff --git a/inlong-dashboard/src/components/FormGenerator/FormGenerator.tsx b/inlong-dashboard/src/components/FormGenerator/FormGenerator.tsx
index 55be75372..ba120a6b0 100644
--- a/inlong-dashboard/src/components/FormGenerator/FormGenerator.tsx
+++ b/inlong-dashboard/src/components/FormGenerator/FormGenerator.tsx
@@ -37,13 +37,12 @@ export interface FormGeneratorProps extends FormProps {
// Whether to use the default maximum width
useMaxWidth?: boolean | number;
style?: React.CSSProperties;
- // The current form value, under normal circumstances there is no need to pass in
- // When externally using methods such as setFieldsValue to change the value, the internal state refresh can be triggered by changing the prop
- allValues?: Record<string, unknown>;
// onFilter is similar to onValuesChange, with custom trigger conditions added, for example, when the search box is entered
// At the same time, the return value executes trim, if you need noTrim, you need to pay attention (such as password)
// Currently holding input, inputsearch
onFilter?: Function;
+ // default: true
+ viewOnly?: boolean;
}
export interface ContentsItemProps {
@@ -68,10 +67,12 @@ const FormGenerator: React.FC<FormGeneratorProps> = props => {
// Record real-time values
const [realTimeValues, setRealTimeValues] = useState<Record<string, unknown>>(
- props.allValues || {},
+ props.initialValues || {},
);
const [contents, setContents] = useState<ContentsItemProps[]>([]);
+ const viewOnly = props.viewOnly ?? false;
+
const combineContentWithProps = useCallback(
(initialContent: Record<string, any>[], props: FormGeneratorProps) => {
return initialContent.map((v: any) => {
@@ -120,6 +121,10 @@ const FormGenerator: React.FC<FormGeneratorProps> = props => {
return {
...v,
name,
+ type: viewOnly ? 'text' : v.type,
+ suffix:
+ typeof v.suffix === 'object' && viewOnly ? { ...v.suffix, type: 'text' } : v.suffix,
+ extra: viewOnly ? null : v.extra,
props: {
...initialProps,
...holdProps,
@@ -127,13 +132,13 @@ const FormGenerator: React.FC<FormGeneratorProps> = props => {
};
});
},
- [realTimeValues, form],
+ [realTimeValues, form, viewOnly],
);
// A real-time value is generated when it is first mounted, because the initialValue may be defined on the FormItem
useEffect(() => {
- if (props.allValues) {
- setRealTimeValues(props.allValues);
+ if (props.initialValues) {
+ setRealTimeValues(props.initialValues);
} else if (form) {
const timmer = setTimeout(() => {
const { getFieldsValue } = form;
@@ -142,7 +147,7 @@ const FormGenerator: React.FC<FormGeneratorProps> = props => {
}, 0);
return () => clearTimeout(timmer);
}
- }, [form, props.allValues]);
+ }, [form, props.initialValues]);
useEffect(() => {
if (!props.contents) {
@@ -203,11 +208,12 @@ const FormGenerator: React.FC<FormGeneratorProps> = props => {
delete formProps.content;
delete formProps.contents;
delete formProps.onFilter;
- delete formProps.allValues;
+ delete formProps.initialValues;
return (
<Form
{...formProps}
+ requiredMark={!viewOnly}
form={form}
layout={layout}
labelCol={labelCol}
diff --git a/inlong-dashboard/src/metas/common.ts b/inlong-dashboard/src/metas/common.ts
index 0c32bbd37..d67ae935b 100644
--- a/inlong-dashboard/src/metas/common.ts
+++ b/inlong-dashboard/src/metas/common.ts
@@ -21,6 +21,12 @@ import type { FormItemProps } from '@/components/FormGenerator';
import { ColumnType } from 'antd/es/table';
import { excludeObject } from '@/utils';
+export interface MetaType {
+ fields: ReturnType<typeof genFields>;
+ form: ReturnType<typeof genForm>;
+ table: ReturnType<typeof genTable>;
+}
+
export interface FieldItemType extends FormItemProps {
position?: string[];
_renderTable?: boolean | ColumnType<Record<string, any>>;
diff --git a/inlong-dashboard/src/metas/sources/autoPush.ts b/inlong-dashboard/src/metas/sources/autoPush.ts
index c2580da12..6fe579a35 100644
--- a/inlong-dashboard/src/metas/sources/autoPush.ts
+++ b/inlong-dashboard/src/metas/sources/autoPush.ts
@@ -17,18 +17,6 @@
* under the License.
*/
-import { getColsFromFields } from '@/utils/metaData';
-import { ColumnsType } from 'antd/es/table';
+import type { FieldItemType } from '@/metas/common';
-const getForm = (type: 'form' | 'col' = 'form', { currentValues } = {} as any) => {
- const fileds = [];
-
- return type === 'col' ? getColsFromFields(fileds) : fileds;
-};
-
-const tableColumns = getForm('col') as ColumnsType;
-
-export const autoPush = {
- getForm,
- tableColumns,
-};
+export const autoPush: FieldItemType[] = [];
diff --git a/inlong-dashboard/src/metas/sources/binLog.ts b/inlong-dashboard/src/metas/sources/binLog.ts
index caa7275e7..065d9ad01 100644
--- a/inlong-dashboard/src/metas/sources/binLog.ts
+++ b/inlong-dashboard/src/metas/sources/binLog.ts
@@ -17,139 +17,126 @@
* under the License.
*/
-// import request from '@/utils/request';
-import { getColsFromFields } from '@/utils/metaData';
-import { ColumnsType } from 'antd/es/table';
import i18n from '@/i18n';
+import type { FieldItemType } from '@/metas/common';
-const getForm = (type: 'form' | 'col' = 'form', { currentValues } = {} as any) => {
- const fileds = [
- {
- name: 'hostname',
- type: 'input',
- label: i18n.t('meta.Sources.Db.Server'),
- rules: [{ required: true }],
- props: {
- disabled: currentValues?.status === 101,
- },
- _inTable: true,
- },
- {
- name: 'port',
- type: 'inputnumber',
- label: i18n.t('meta.Sources.Db.Port'),
- initialValue: 3306,
- rules: [{ required: true }],
- props: {
- disabled: currentValues?.status === 101,
- min: 0,
- max: 65535,
- },
- _inTable: true,
- },
- {
- name: 'user',
- type: 'input',
- label: i18n.t('meta.Sources.Db.User'),
- rules: [{ required: true }],
- props: {
- disabled: currentValues?.status === 101,
- },
- },
- {
- name: 'password',
- type: 'password',
- label: i18n.t('meta.Sources.Db.Password'),
- rules: [{ required: true }],
- props: {
- disabled: currentValues?.status === 101,
- },
- },
- {
- name: 'historyFilename',
- type: 'input',
- label: i18n.t('meta.Sources.Db.HistoryFilename'),
- rules: [{ required: true }],
- initialValue: '/data/inlong-agent/.history',
- props: {
- disabled: currentValues?.status === 101,
- },
- _inTable: true,
- },
- {
- name: 'serverTimezone',
- type: 'input',
- label: i18n.t('meta.Sources.Db.ServerTimezone'),
- tooltip: 'UTC, UTC+8, Asia/Shanghai, ...',
- initialValue: 'UTC',
- rules: [{ required: true }],
- props: {
- disabled: currentValues?.status === 101,
- },
- },
- {
- name: 'intervalMs',
- type: 'inputnumber',
- label: i18n.t('meta.Sources.Db.IntervalMs'),
- initialValue: 1000,
- rules: [{ required: true }],
- suffix: 'ms',
- props: {
- min: 1000,
- max: 3600000,
- disabled: currentValues?.status === 101,
- },
- },
- {
- name: 'allMigration',
- type: 'radio',
- label: i18n.t('meta.Sources.Db.AllMigration'),
- rules: [{ required: true }],
- initialValue: false,
- props: {
- options: [
- {
- label: i18n.t('basic.Yes'),
- value: true,
- },
- {
- label: i18n.t('basic.No'),
- value: false,
- },
- ],
- disabled: currentValues?.status === 101,
- },
- },
- {
- name: 'databaseWhiteList',
- type: 'input',
- label: i18n.t('meta.Sources.Db.DatabaseWhiteList'),
- tooltip: i18n.t('meta.Sources.Db.WhiteListHelp'),
- rules: [{ required: true }],
- props: {
- disabled: currentValues?.status === 101,
- },
- visible: values => !values?.allMigration,
- },
- {
- name: 'tableWhiteList',
- type: 'input',
- label: i18n.t('meta.Sources.Db.TableWhiteList'),
- tooltip: i18n.t('meta.Sources.Db.WhiteListHelp'),
- rules: [{ required: true }],
- props: {
- disabled: currentValues?.status === 101,
- },
- visible: values => !values?.allMigration,
- },
- ];
-
- return type === 'col' ? getColsFromFields(fileds) : fileds;
-};
-
-const tableColumns = getForm('col') as ColumnsType;
-
-export const binLog = {
- getForm,
- tableColumns,
-};
+export const binLog: FieldItemType[] = [
+ {
+ name: 'hostname',
+ type: 'input',
+ label: i18n.t('meta.Sources.Db.Server'),
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: values?.status === 101,
+ }),
+ _renderTable: true,
+ },
+ {
+ name: 'port',
+ type: 'inputnumber',
+ label: i18n.t('meta.Sources.Db.Port'),
+ initialValue: 3306,
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: values?.status === 101,
+ min: 0,
+ max: 65535,
+ }),
+ _renderTable: true,
+ },
+ {
+ name: 'user',
+ type: 'input',
+ label: i18n.t('meta.Sources.Db.User'),
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: values?.status === 101,
+ }),
+ },
+ {
+ name: 'password',
+ type: 'password',
+ label: i18n.t('meta.Sources.Db.Password'),
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: values?.status === 101,
+ }),
+ },
+ {
+ name: 'historyFilename',
+ type: 'input',
+ label: i18n.t('meta.Sources.Db.HistoryFilename'),
+ rules: [{ required: true }],
+ initialValue: '/data/inlong-agent/.history',
+ props: values => ({
+ disabled: values?.status === 101,
+ }),
+ _renderTable: true,
+ },
+ {
+ name: 'serverTimezone',
+ type: 'input',
+ label: i18n.t('meta.Sources.Db.ServerTimezone'),
+ tooltip: 'UTC, UTC+8, Asia/Shanghai, ...',
+ initialValue: 'UTC',
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: values?.status === 101,
+ }),
+ },
+ {
+ name: 'intervalMs',
+ type: 'inputnumber',
+ label: i18n.t('meta.Sources.Db.IntervalMs'),
+ initialValue: 1000,
+ rules: [{ required: true }],
+ suffix: 'ms',
+ props: values => ({
+ disabled: values?.status === 101,
+ min: 1000,
+ max: 3600000,
+ }),
+ },
+ {
+ name: 'allMigration',
+ type: 'radio',
+ label: i18n.t('meta.Sources.Db.AllMigration'),
+ rules: [{ required: true }],
+ initialValue: false,
+ props: values => ({
+ disabled: values?.status === 101,
+ options: [
+ {
+ label: i18n.t('basic.Yes'),
+ value: true,
+ },
+ {
+ label: i18n.t('basic.No'),
+ value: false,
+ },
+ ],
+ }),
+ },
+ {
+ name: 'databaseWhiteList',
+ type: 'input',
+ label: i18n.t('meta.Sources.Db.DatabaseWhiteList'),
+ tooltip: i18n.t('meta.Sources.Db.WhiteListHelp'),
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: values?.status === 101,
+ }),
+ visible: values => !values?.allMigration,
+ },
+ {
+ name: 'tableWhiteList',
+ type: 'input',
+ label: i18n.t('meta.Sources.Db.TableWhiteList'),
+ tooltip: i18n.t('meta.Sources.Db.WhiteListHelp'),
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: values?.status === 101,
+ }),
+ visible: values => !values?.allMigration,
+ },
+];
diff --git a/inlong-dashboard/src/pages/GroupDetail/DataSources/status.tsx b/inlong-dashboard/src/metas/sources/common/status.tsx
similarity index 100%
rename from inlong-dashboard/src/pages/GroupDetail/DataSources/status.tsx
rename to inlong-dashboard/src/metas/sources/common/status.tsx
diff --git a/inlong-dashboard/src/metas/sources/file.ts b/inlong-dashboard/src/metas/sources/file.ts
index 3e3286f26..f1143fdfc 100644
--- a/inlong-dashboard/src/metas/sources/file.ts
+++ b/inlong-dashboard/src/metas/sources/file.ts
@@ -17,48 +17,36 @@
* under the License.
*/
-import { getColsFromFields } from '@/utils/metaData';
-import { ColumnsType } from 'antd/es/table';
-import rulesPattern from '@/utils/pattern';
import i18n from '@/i18n';
+import rulesPattern from '@/utils/pattern';
+import type { FieldItemType } from '@/metas/common';
-const getForm = (type: 'form' | 'col' = 'form', { currentValues } = {} as any) => {
- const fileds = [
- {
- type: 'input',
- label: i18n.t('meta.Sources.File.DataSourceIP'),
- name: 'agentIp',
- rules: [
- {
- pattern: rulesPattern.ip,
- message: i18n.t('meta.Sources.File.IpRule'),
- required: true,
- },
- ],
- _inTable: true,
- },
- {
- type: 'input',
- label: i18n.t('meta.Sources.File.FilePath'),
- name: 'pattern',
- tooltip: i18n.t('meta.Sources.File.FilePathHelp'),
- rules: [{ required: true }],
- _inTable: true,
- },
- {
- type: 'input',
- label: i18n.t('meta.Sources.File.TimeOffset'),
- name: 'timeOffset',
- tooltip: i18n.t('meta.Sources.File.TimeOffsetHelp'),
- },
- ];
-
- return type === 'col' ? getColsFromFields(fileds) : fileds;
-};
-
-const tableColumns = getForm('col') as ColumnsType;
-
-export const file = {
- getForm,
- tableColumns,
-};
+export const file: FieldItemType[] = [
+ {
+ type: 'input',
+ label: i18n.t('meta.Sources.File.DataSourceIP'),
+ name: 'agentIp',
+ rules: [
+ {
+ pattern: rulesPattern.ip,
+ message: i18n.t('meta.Sources.File.IpRule'),
+ required: true,
+ },
+ ],
+ _renderTable: true,
+ },
+ {
+ type: 'input',
+ label: i18n.t('meta.Sources.File.FilePath'),
+ name: 'pattern',
+ tooltip: i18n.t('meta.Sources.File.FilePathHelp'),
+ rules: [{ required: true }],
+ _renderTable: true,
+ },
+ {
+ type: 'input',
+ label: i18n.t('meta.Sources.File.TimeOffset'),
+ name: 'timeOffset',
+ tooltip: i18n.t('meta.Sources.File.TimeOffsetHelp'),
+ },
+];
diff --git a/inlong-dashboard/src/metas/sources/index.ts b/inlong-dashboard/src/metas/sources/index.ts
index 6ad92715f..de0563cf5 100644
--- a/inlong-dashboard/src/metas/sources/index.ts
+++ b/inlong-dashboard/src/metas/sources/index.ts
@@ -17,39 +17,84 @@
* under the License.
*/
-import type { GetStorageFormFieldsType } from '@/utils/metaData';
-import type { ColumnsType } from 'antd/es/table';
+import i18n from '@/i18n';
+import type { FieldItemType } from '@/metas/common';
+import { genFields, genForm, genTable } from '@/metas/common';
+import { statusList, genStatusTag } from './common/status';
import { autoPush } from './autoPush';
import { binLog } from './binLog';
import { file } from './file';
-export interface SourceType {
- label: string;
- value: string;
- // Generate form configuration for single data
- getForm: GetStorageFormFieldsType;
- // Generate table display configuration
- tableColumns: ColumnsType;
- // Custom convert interface data to front-end data format
- toFormValues?: (values: unknown) => unknown;
- // Custom convert front-end data to interface data format
- toSubmitValues?: (values: unknown) => unknown;
-}
-
-export const sources: SourceType[] = [
+const allSources = [
{
label: 'MySQL BinLog',
value: 'MYSQL_BINLOG',
- ...binLog,
+ fields: binLog,
},
{
label: 'File',
value: 'FILE',
- ...file,
+ fields: file,
},
{
label: 'Auto Push',
value: 'AUTO_PUSH',
- ...autoPush,
+ fields: autoPush,
},
];
+
+const defaultCommonFields: FieldItemType[] = [
+ {
+ name: 'sourceName',
+ type: 'input',
+ label: i18n.t('meta.Sources.Name'),
+ rules: [{ required: true }],
+ props: values => ({
+ disabled: !!values.id,
+ maxLength: 128,
+ }),
+ _renderTable: true,
+ },
+ {
+ name: 'sourceType',
+ type: 'radio',
+ label: i18n.t('meta.Sources.Type'),
+ rules: [{ required: true }],
+ initialValue: allSources[0].value,
+ props: values => ({
+ disabled: !!values.id,
+ options: allSources.map(item => ({
+ label: item.label,
+ value: item.value,
+ })),
+ }),
+ },
+ {
+ name: 'status',
+ type: 'select',
+ label: i18n.t('basic.Status'),
+ props: {
+ allowClear: true,
+ options: statusList,
+ dropdownMatchSelectWidth: false,
+ },
+ visible: false,
+ _renderTable: {
+ render: text => genStatusTag(text),
+ },
+ },
+];
+
+export const sources = allSources.map(item => {
+ const itemFields = defaultCommonFields.concat(item.fields);
+ const fields = genFields(itemFields);
+
+ return {
+ ...item,
+ fields,
+ form: genForm(fields),
+ table: genTable(fields),
+ toFormValues: null,
+ toSubmitValues: null,
+ };
+});
diff --git a/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx b/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
index db59ef1ce..77ead049d 100644
--- a/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
+++ b/inlong-dashboard/src/pages/ConsumeDetail/Info/index.tsx
@@ -101,7 +101,7 @@ const Comp = ({ id, readonly, isCreate }: Props, ref) => {
editing,
isCreate,
})}
- allValues={data}
+ initialValues={data}
useMaxWidth={800}
/>
diff --git a/inlong-dashboard/src/pages/GroupDetail/DataSources/DetailModal.tsx b/inlong-dashboard/src/pages/GroupDetail/DataSources/DetailModal.tsx
index 3b090d3c4..22fad1916 100644
--- a/inlong-dashboard/src/pages/GroupDetail/DataSources/DetailModal.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/DataSources/DetailModal.tsx
@@ -24,7 +24,7 @@ import FormGenerator, { useForm } from '@/components/FormGenerator';
import { useRequest, useUpdateEffect } from '@/hooks';
import { useTranslation } from 'react-i18next';
import { FormItemProps } from '@/components/FormGenerator';
-import { sources, SourceType } from '@/metas/sources';
+import { sources } from '@/metas/sources';
import request from '@/utils/request';
export interface Props extends ModalProps {
@@ -33,7 +33,7 @@ export interface Props extends ModalProps {
inlongGroupId?: string;
}
-const sourcesMap: Record<string, SourceType> = sources.reduce(
+const sourcesMap: Record<string, typeof sources[0]> = sources.reduce(
(acc, cur) => ({
...acc,
[cur.value]: cur,
@@ -45,8 +45,6 @@ const Comp: React.FC<Props> = ({ id, inlongGroupId, ...modalProps }) => {
const [form] = useForm();
const { t } = useTranslation();
- const [currentValues, setCurrentValues] = useState({});
-
const [type, setType] = useState(sources[0].value);
const toFormVals = useCallback(
@@ -77,7 +75,6 @@ const Comp: React.FC<Props> = ({ id, inlongGroupId, ...modalProps }) => {
formatResult: result => toFormVals(result),
onSuccess: result => {
form.setFieldsValue(result);
- setCurrentValues(result);
setType(result.sourceType);
},
},
@@ -108,21 +105,15 @@ const Comp: React.FC<Props> = ({ id, inlongGroupId, ...modalProps }) => {
// open
if (id) {
getData(id);
- } else {
- form.resetFields(); // Note that it will cause the form to remount to initiate a select request
- setType(sources[0].value);
}
} else {
- setCurrentValues({});
+ form.resetFields();
+ setType(sources[0].value);
}
}, [modalProps.visible]);
const formContent = useMemo(() => {
- const getForm = sourcesMap[type].getForm;
- const config = getForm('form', {
- currentValues,
- form,
- }) as FormItemProps[];
+ const currentForm = sourcesMap[type]?.form;
return [
{
type: 'select',
@@ -150,38 +141,17 @@ const Comp: React.FC<Props> = ({ id, inlongGroupId, ...modalProps }) => {
},
},
rules: [{ required: true }],
- },
- {
- name: 'sourceName',
- type: 'input',
- label: t('meta.Sources.Name'),
- rules: [{ required: true }],
- props: {
- disabled: !!id,
- },
- },
- {
- name: 'sourceType',
- type: 'radio',
- label: t('meta.Sources.Type'),
- rules: [{ required: true }],
- initialValue: sources[0].value,
- props: {
- disabled: !!id,
- options: sources,
- onChange: e => setType(e.target.value),
- },
} as FormItemProps,
- ].concat(config);
- }, [type, id, currentValues, form, t, inlongGroupId]);
+ ].concat(currentForm);
+ }, [type, id, t, inlongGroupId]);
return (
<>
<Modal {...modalProps} title={sourcesMap[type]?.label} width={666} onOk={onOk}>
<FormGenerator
content={formContent}
- onValuesChange={vals => setCurrentValues(prev => ({ ...prev, ...vals }))}
- allValues={currentValues}
+ onValuesChange={(c, values) => setType(values.sourceType)}
+ initialValues={id ? data : {}}
form={form}
useMaxWidth
/>
diff --git a/inlong-dashboard/src/pages/GroupDetail/DataSources/index.tsx b/inlong-dashboard/src/pages/GroupDetail/DataSources/index.tsx
index cd01613a6..7b4c0f830 100644
--- a/inlong-dashboard/src/pages/GroupDetail/DataSources/index.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/DataSources/index.tsx
@@ -26,40 +26,41 @@ import DetailModal from './DetailModal';
import { sources } from '@/metas/sources';
import i18n from '@/i18n';
import request from '@/utils/request';
+import { pickObjectArray } from '@/utils';
import { CommonInterface } from '../common';
-import { statusList, genStatusTag } from './status';
type Props = CommonInterface;
-const getFilterFormContent = defaultValues => [
- {
- type: 'inputsearch',
- name: 'keyword',
- },
- {
- type: 'radiobutton',
- name: 'sourceType',
- label: i18n.t('pages.GroupDetail.Sources.Type'),
- initialValue: defaultValues.sourceType,
- props: {
- buttonStyle: 'solid',
- options: sources.map(item => ({
- label: item.label,
- value: item.value,
- })),
+const getFilterFormContent = defaultValues =>
+ [
+ {
+ type: 'inputsearch',
+ name: 'keyword',
+ initialValue: defaultValues.keyword,
+ props: {
+ allowClear: true,
+ },
},
- },
- {
- type: 'select',
- name: 'status',
- label: i18n.t('basic.Status'),
- props: {
- allowClear: true,
- dropdownMatchSelectWidth: false,
- options: statusList,
+ {
+ type: 'radiobutton',
+ name: 'sourceType',
+ label: i18n.t('meta.Sources.Type'),
+ initialValue: defaultValues.sourceType,
+ props: {
+ buttonStyle: 'solid',
+ options: sources.map(item => ({
+ label: item.label,
+ value: item.value,
+ })),
+ },
},
- },
-];
+ ].concat(
+ pickObjectArray(['status'], sources[0].form).map(item => ({
+ ...item,
+ visible: true,
+ initialValue: defaultValues[item.name],
+ })),
+ );
const Comp = ({ inlongGroupId, readonly }: Props, ref) => {
const [options, setOptions] = useState({
@@ -138,7 +139,7 @@ const Comp = ({ inlongGroupId, readonly }: Props, ref) => {
sources.reduce(
(acc, cur) => ({
...acc,
- [cur.value]: cur.tableColumns,
+ [cur.value]: cur.table,
}),
{},
),
@@ -150,18 +151,9 @@ const Comp = ({ inlongGroupId, readonly }: Props, ref) => {
title: i18n.t('pages.GroupDetail.Sources.DataStreams'),
dataIndex: 'inlongStreamId',
},
- {
- title: i18n.t('meta.Sources.Name'),
- dataIndex: 'sourceName',
- },
]
.concat(columnsMap[options.sourceType])
.concat([
- {
- title: i18n.t('basic.Status'),
- dataIndex: 'status',
- render: text => genStatusTag(text),
- },
{
title: i18n.t('basic.Operating'),
dataIndex: 'action',
diff --git a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
index 376eb3881..dc6d440a0 100644
--- a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
@@ -206,7 +206,7 @@ const Comp: React.FC<DetailModalProps> = ({ inlongGroupId, id, ...modalProps })
wrapperCol={{ span: 20 }}
content={formContent}
form={form}
- allValues={data}
+ initialValues={data}
onValuesChange={onValuesChangeHandler}
/>
</Modal>
diff --git a/inlong-dashboard/src/pages/GroupDetail/Info/index.tsx b/inlong-dashboard/src/pages/GroupDetail/Info/index.tsx
index f0c112640..78c9f81fe 100644
--- a/inlong-dashboard/src/pages/GroupDetail/Info/index.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/Info/index.tsx
@@ -109,7 +109,7 @@ const Comp = ({ inlongGroupId, readonly, isCreate }: Props, ref) => {
isCreate,
isUpdate,
})}
- allValues={data}
+ initialValues={data}
useMaxWidth={600}
/>