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 163fb5e8ab [INLONG-10500][Dashboard] Change the visible range to a
drop-down box (#10502)
163fb5e8ab is described below
commit 163fb5e8ab840bdccb4b05cd366db4f48410119c
Author: kamianlaida <[email protected]>
AuthorDate: Fri Jun 28 14:03:28 2024 +0800
[INLONG-10500][Dashboard] Change the visible range to a drop-down box
(#10502)
Co-authored-by: Charles Zhang <[email protected]>
---
.../plugins/groups/common/GroupDataTemplateInfo.ts | 35 ++++++++++++++++------
inlong-dashboard/src/ui/locales/cn.json | 7 ++++-
inlong-dashboard/src/ui/locales/en.json | 7 ++++-
.../src/ui/pages/GroupDataTemplate/CreateModal.tsx | 32 +++++++++++++++++---
.../src/ui/pages/GroupDataTemplate/index.tsx | 32 +++++++++++++++-----
5 files changed, 91 insertions(+), 22 deletions(-)
diff --git
a/inlong-dashboard/src/plugins/groups/common/GroupDataTemplateInfo.ts
b/inlong-dashboard/src/plugins/groups/common/GroupDataTemplateInfo.ts
index 7699b31d27..8a99a48bee 100644
--- a/inlong-dashboard/src/plugins/groups/common/GroupDataTemplateInfo.ts
+++ b/inlong-dashboard/src/plugins/groups/common/GroupDataTemplateInfo.ts
@@ -53,11 +53,36 @@ export class GroupDataTemplateInfo implements
DataWithBackend, RenderRow, Render
},
})
@ColumnDecorator()
- @I18n('pages.GroupDataTemplate.InChargers')
+ @I18n('pages.GroupDataTemplate.InCharges')
inCharges: string;
@FieldDecorator({
type: 'select',
+ initialValue: 'ALL',
+ props: values => ({
+ options: [
+ {
+ label: i18n.t('pages.GroupDataTemplate.VisibleRange.All'),
+ value: 'ALL',
+ },
+ {
+ label: i18n.t('pages.GroupDataTemplate.VisibleRange.InCharges'),
+ value: 'IN_CHARGE',
+ },
+ {
+ label: i18n.t('pages.GroupDataTemplate.VisibleRange.Tenant'),
+ value: 'TENANT',
+ },
+ ],
+ }),
+ rules: [{ required: true }],
+ })
+ @I18n('pages.GroupDataTemplate.VisibleRange')
+ visibleRange: String;
+
+ @FieldDecorator({
+ type: 'select',
+ hidden: true,
props: {
mode: 'multiple',
filterOption: true,
@@ -102,14 +127,6 @@ export class GroupDataTemplateInfo implements
DataWithBackend, RenderRow, Render
@I18n('pages.GroupDataTemplate.Version')
version: number;
- @FieldDecorator({
- type: 'input',
- initialValue: '',
- rules: [{ required: true }],
- })
- @I18n('pages.GroupDataTemplate.VisibleRange')
- visibleRange: String;
-
@FieldDecorator({
type: EditableTable,
props: values => ({
diff --git a/inlong-dashboard/src/ui/locales/cn.json
b/inlong-dashboard/src/ui/locales/cn.json
index 39e0b01db5..caf2cc4812 100644
--- a/inlong-dashboard/src/ui/locales/cn.json
+++ b/inlong-dashboard/src/ui/locales/cn.json
@@ -915,5 +915,10 @@
"pages.GroupDataTemplate.TenantList":"租户",
"pages.GroupDataTemplate.Version":"版本",
"pages.GroupDataTemplate.VisibleRange":"可视范围",
- "pages.GroupDataTemplate.InChargers":"负责人"
+ "pages.GroupDataTemplate.InCharges":"责任人",
+ "pages.GroupDataTemplate.Creator":"创建人",
+ "pages.GroupDataTemplate.Modifier":"修改人",
+ "pages.GroupDataTemplate.VisibleRange.All":"全局",
+ "pages.GroupDataTemplate.VisibleRange.InCharges":"责任人",
+ "pages.GroupDataTemplate.VisibleRange.Tenant":"租户"
}
diff --git a/inlong-dashboard/src/ui/locales/en.json
b/inlong-dashboard/src/ui/locales/en.json
index 1403297c64..93054818b8 100644
--- a/inlong-dashboard/src/ui/locales/en.json
+++ b/inlong-dashboard/src/ui/locales/en.json
@@ -915,5 +915,10 @@
"pages.GroupDataTemplate.TenantList":"Tenant",
"pages.GroupDataTemplate.Version":"Version",
"pages.GroupDataTemplate.VisibleRange":"Visible Range",
- "pages.GroupDataTemplate.InChargers":"InChargers"
+ "pages.GroupDataTemplate.InCharges":"Owner",
+ "pages.GroupDataTemplate.Creator":"Creator",
+ "pages.GroupDataTemplate.Modifier":"Modifier",
+ "pages.GroupDataTemplate.VisibleRange.All":"Global",
+ "pages.GroupDataTemplate.VisibleRange.InCharges":"Owner",
+ "pages.GroupDataTemplate.VisibleRange.Tenant":"Tenant"
}
diff --git a/inlong-dashboard/src/ui/pages/GroupDataTemplate/CreateModal.tsx
b/inlong-dashboard/src/ui/pages/GroupDataTemplate/CreateModal.tsx
index 81a060a7f3..12b84c01bb 100644
--- a/inlong-dashboard/src/ui/pages/GroupDataTemplate/CreateModal.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDataTemplate/CreateModal.tsx
@@ -35,7 +35,7 @@ export interface Props extends ModalProps {
const Comp: React.FC<Props> = ({ id, templateName, ...modalProps }) => {
const [form] = useForm();
-
+ const [hidden, setHidden] = useState(true);
const { data: savedData, run: getData } = useRequest(
() => ({
url: `/template/get`,
@@ -51,6 +51,11 @@ const Comp: React.FC<Props> = ({ id, templateName,
...modalProps }) => {
inCharges: result.inCharges?.split(','),
}),
onSuccess: result => {
+ if (result.visibleRange === 'TENANT') {
+ setHidden(false);
+ } else {
+ setHidden(true);
+ }
form.setFieldsValue(dataToValues(result));
},
},
@@ -84,12 +89,18 @@ const Comp: React.FC<Props> = ({ id, templateName,
...modalProps }) => {
}
} else {
form.resetFields();
+ setHidden(true);
}
}, [modalProps.open]);
const content = useMemo(() => {
- return new GroupDataTemplateInfo().renderRow();
- }, []);
+ return new GroupDataTemplateInfo().renderRow().map(item => {
+ if (item.name === 'tenantList') {
+ item = { ...item, hidden: hidden };
+ }
+ return item;
+ });
+ }, [hidden]);
return (
<Modal
width={1000}
@@ -104,7 +115,20 @@ const Comp: React.FC<Props> = ({ id, templateName,
...modalProps }) => {
</Button>,
]}
>
- <FormGenerator content={content} form={form} onValuesChange={(c, values)
=> {}} useMaxWidth />
+ <FormGenerator
+ content={content}
+ form={form}
+ onValuesChange={(c, values) => {
+ if (Object.keys(c)[0] === 'visibleRange') {
+ if (Object.values(c)[0] === 'TENANT') {
+ setHidden(false);
+ } else {
+ setHidden(true);
+ }
+ }
+ }}
+ useMaxWidth
+ />
</Modal>
);
};
diff --git a/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx
b/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx
index b53dddd83f..5e1928e43e 100644
--- a/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx
@@ -113,13 +113,13 @@ const Comp: React.FC = () => {
title: i18n.t('pages.GroupDataTemplate.Name'),
dataIndex: 'name',
key: 'name',
- width: 100,
+ width: 200,
},
{
- title: i18n.t('pages.GroupDataTemplate.InChargers'),
+ title: i18n.t('pages.GroupDataTemplate.InCharges'),
dataIndex: 'inCharges',
key: 'inCharges',
- width: 100,
+ width: 200,
},
{
title: i18n.t('pages.GroupDataTemplate.TenantList'),
@@ -133,10 +133,28 @@ const Comp: React.FC = () => {
),
},
{
- title: i18n.t('pages.GroupDataTemplate.Version'),
- dataIndex: 'version',
- key: 'version',
+ title: i18n.t('pages.GroupDataTemplate.Creator'),
+ dataIndex: 'creator',
+ key: 'creator',
width: 200,
+ render: (text, record: any) => (
+ <>
+ <div>{text}</div>
+ <div>{record.createTime &&
timestampFormat(record.createTime)}</div>
+ </>
+ ),
+ },
+ {
+ title: i18n.t('pages.GroupDataTemplate.Modifier'),
+ dataIndex: 'modifier',
+ key: 'modifier',
+ width: 200,
+ render: (text, record: any) => (
+ <>
+ <div>{text}</div>
+ <div>{record.modifyTime &&
timestampFormat(record.modifyTime)}</div>
+ </>
+ ),
},
];
}, []);
@@ -145,7 +163,7 @@ const Comp: React.FC = () => {
{
title: i18n.t('basic.Operating'),
dataIndex: 'action',
- width: 200,
+ width: 100,
render: (text, record) => (
<>
<Button type="link" onClick={() => onEdit(record)}>
