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 bdc1200ce3 [INLONG-8608][Dashboard] Cluster management and tag
management request optimization (#8609)
bdc1200ce3 is described below
commit bdc1200ce383e3f955d5b1ea587ab48396b7dcee
Author: Lizhen <[email protected]>
AuthorDate: Mon Jul 31 12:56:52 2023 +0800
[INLONG-8608][Dashboard] Cluster management and tag management request
optimization (#8609)
---
inlong-dashboard/src/ui/locales/cn.json | 3 +
inlong-dashboard/src/ui/locales/en.json | 3 +
.../src/ui/pages/ClusterTags/TagDetailModal.tsx | 32 ++++++
.../src/ui/pages/ClusterTags/index.module.less | 7 ++
.../src/ui/pages/ClusterTags/index.tsx | 113 +++++++++++++++++----
inlong-dashboard/src/ui/pages/Clusters/index.tsx | 2 +-
6 files changed, 141 insertions(+), 19 deletions(-)
diff --git a/inlong-dashboard/src/ui/locales/cn.json
b/inlong-dashboard/src/ui/locales/cn.json
index a99c7705fb..120420fd61 100644
--- a/inlong-dashboard/src/ui/locales/cn.json
+++ b/inlong-dashboard/src/ui/locales/cn.json
@@ -751,6 +751,9 @@
"pages.ClusterTags.DelClusterSuccess": "解绑成功",
"pages.ClusterTags.DelConfirm": "删除集群标签，会将其从绑定了此标签的所有集群中解绑，且需确保此标签没有被
InlongGroup 所使用",
"pages.ClusterTags.NameEditHelp": "修改集群标签名称，会同时修改所有绑定了此标签的集群中的标签名，且需确保此标签没有被
InlongGroup 所使用",
+ "pages.ClusterTags.Tenant": "租户",
+ "pages.ClusterTags.TagPlaceholder": "请输入标签",
+ "pages.ClusterTags.TenantPlaceholder": "请选择租户",
"pages.Login.PleaseEnterUserName": "请输入用户名",
"pages.Login.PasswordRules": "只能包含小写字母、数字、中划线、下划线",
"pages.Login.Login": "登录",
diff --git a/inlong-dashboard/src/ui/locales/en.json
b/inlong-dashboard/src/ui/locales/en.json
index 3700bac566..6f7b2445ed 100644
--- a/inlong-dashboard/src/ui/locales/en.json
+++ b/inlong-dashboard/src/ui/locales/en.json
@@ -751,6 +751,9 @@
"pages.ClusterTags.DelClusterSuccess": "Unbind successfully",
"pages.ClusterTags.DelConfirm": "Deleting a cluster tag will unbind it from
all clusters bound to this tag, and make sure this tag is not used by
InlongGroup",
"pages.ClusterTags.NameEditHelp": "Modifying a cluster tag will also modify
the tag name in all clusters bound to this tag, and make sure that this label
is not used by InlongGroup",
+ "pages.ClusterTags.Tenant": "Tenant",
+ "pages.ClusterTags.TagPlaceholder": "Please enter a tag",
+ "pages.ClusterTags.TenantPlaceholder": "Please select a tenant",
"pages.Login.PleaseEnterUserName": "Please enter user name",
"pages.Login.PasswordRules": "Only lowercase letters, numbers, minus, and
underscores",
"pages.Login.Login": "Login",
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
b/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
index 0a601ad35f..ef9f3534d3 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
@@ -94,6 +94,38 @@ const TagDetailModal: React.FC<TagDetailModalProps> = ({ id,
...modalProps }) =>
name: 'inCharges',
rules: [{ required: true }],
},
+ {
+ type: 'select',
+ label: i18n.t('pages.ClusterTags.Tenant'),
+ name: 'tenantList',
+ rules: [{ required: true }],
+ props: {
+ filterOption: false,
+ showSearch: true,
+ allowClear: true,
+ mode: 'multiple',
+ options: {
+ requestTrigger: ['onOpen', 'onSearch'],
+ requestService: keyword => ({
+ url: '/tenant/list',
+ method: 'POST',
+ data: {
+ keyword,
+ pageNum: 1,
+ pageSize: 9999,
+ listByLoginUser: true,
+ },
+ }),
+ requestParams: {
+ formatResult: result =>
+ result?.list?.map(item => ({
+ label: item.name,
+ value: item.name,
+ })),
+ },
+ },
+ },
+ },
{
type: 'textarea',
label: i18n.t('pages.ClusterTags.Description'),
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less
b/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less
index 5d36179923..0f432ea81c 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less
@@ -21,4 +21,11 @@
.listItem {
position: relative;
cursor: pointer;
+ width: 370px;
+}
+.item {
+ width: 310px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
b/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
index 785b78ded9..b91c40d12c 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
@@ -17,16 +17,29 @@
* under the License.
*/
-import React, { useState, useCallback, useMemo } from 'react';
-import { Button, Card, List, Col, Row, Descriptions, Input, Modal, message }
from 'antd';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import {
+ Button,
+ Card,
+ List,
+ Col,
+ Row,
+ Descriptions,
+ Input,
+ Modal,
+ message,
+ Space,
+ Select,
+} from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { PageContainer } from '@/ui/components/PageContainer';
-import { useRequest } from '@/ui/hooks';
+import { useRequest, useSelector } from '@/ui/hooks';
import i18n from '@/i18n';
import request from '@/core/utils/request';
import ClusterList from './ClusterList';
import TagDetailModal from './TagDetailModal';
import styles from './index.module.less';
+import { State } from '@/core/stores';
const Comp: React.FC = () => {
const [options, setOptions] = useState({
@@ -36,18 +49,21 @@ const Comp: React.FC = () => {
});
const [tagId, setTagId] = useState<number>();
+ const [tenantData, setTenantData] = useState([]);
const [tagDetailModal, setTagDetailModal] = useState<Record<string,
unknown>>({
open: false,
});
+ const roles = useSelector<State, State['roles']>(state => state.roles);
+
const {
data,
loading,
run: getList,
} = useRequest(
{
- url: '/cluster/tag/list',
+ url: '/cluster/tag/listTagByTenantRole',
method: 'POST',
data: {
...options,
@@ -64,6 +80,32 @@ const Comp: React.FC = () => {
},
);
+ const { run: getTenantData } = useRequest(
+ {
+ url: '/tenant/list',
+ method: 'POST',
+ data: {
+ pageNum: 1,
+ pageSize: 9999,
+ listByLoginUser: true,
+ },
+ },
+ {
+ manual: true,
+ onSuccess: result => {
+ const list = result?.list?.map(item => ({
+ label: item.name,
+ value: item.name,
+ }));
+ setTenantData(list);
+ },
+ },
+ );
+
+ useEffect(() => {
+ getTenantData();
+ }, []);
+
const currentTag = useMemo(() => {
return data?.list.find(item => item.id === tagId) || {};
}, [tagId, data]);
@@ -101,7 +143,7 @@ const Comp: React.FC = () => {
return (
<PageContainer useDefaultBreadcrumb={false} useDefaultContainer={false}>
<Row gutter={20}>
- <Col style={{ flex: '0 0 350px' }}>
+ <Col style={{ flex: '0 0 430px' }}>
<Card style={{ height: '100%' }}>
<List
size="small"
@@ -116,18 +158,53 @@ const Comp: React.FC = () => {
dataSource={data?.list}
header={
<div style={{ display: 'flex', justifyContent: 'space-between'
}}>
- <Input.Search
- style={{ flex: '0 1 150px' }}
- onSearch={keyword =>
- setOptions(prev => ({
- ...prev,
- keyword,
- }))
- }
- />
- <Button type="primary" onClick={() => setTagDetailModal({
open: true })}>
- {i18n.t('basic.Create')}
- </Button>
+ <Space size={[4, 16]} wrap>
+ <Input.Search
+ style={{
+ width:
+ roles?.includes('INLONG_ADMIN') ||
roles?.includes('INLONG_OPERATOR')
+ ? 150
+ : 180,
+ }}
+ placeholder={i18n.t('pages.ClusterTags.TagPlaceholder')}
+ onSearch={keyword =>
+ setOptions(prev => ({
+ ...prev,
+ keyword,
+ }))
+ }
+ />
+ <Select
+ showSearch
+ allowClear
+ style={{
+ width:
+ roles?.includes('INLONG_ADMIN') ||
roles?.includes('INLONG_OPERATOR')
+ ? 120
+ : 150,
+ }}
+
placeholder={i18n.t('pages.ClusterTags.TenantPlaceholder')}
+ onChange={keyword =>
+ setOptions(prev => ({
+ ...prev,
+ tenant: keyword,
+ }))
+ }
+ options={tenantData}
+ />
+ <Button
+ type="primary"
+ style={{
+ display:
+ roles?.includes('INLONG_ADMIN') ||
roles?.includes('INLONG_OPERATOR')
+ ? 'block'
+ : 'none',
+ }}
+ onClick={() => setTagDetailModal({ open: true })}
+ >
+ {i18n.t('basic.Create')}
+ </Button>
+ </Space>
</div>
}
renderItem={(item: Record<string, any>) => (
@@ -161,7 +238,7 @@ const Comp: React.FC = () => {
{tagId === item.id && (
<RightOutlined style={{ position: 'absolute', left: 0,
top: '35%' }} />
)}
- {item.clusterTag}
+ <span className={styles.item}>{item.clusterTag}</span>
</List.Item>
)}
/>
diff --git a/inlong-dashboard/src/ui/pages/Clusters/index.tsx
b/inlong-dashboard/src/ui/pages/Clusters/index.tsx
index e44b4a1636..61c1920cb0 100644
--- a/inlong-dashboard/src/ui/pages/Clusters/index.tsx
+++ b/inlong-dashboard/src/ui/pages/Clusters/index.tsx
@@ -50,7 +50,7 @@ const Comp: React.FC = () => {
run: getList,
} = useRequest(
{
- url: '/cluster/list',
+ url: '/cluster/listByTenantRole',
method: 'POST',
data: {
...options,
