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 2211ab59e9 [INLONG-8575][Dashboard] Tenant management query
optimization (#8585)
2211ab59e9 is described below
commit 2211ab59e9161a3bf4d8ac9f384e69ca8013f813
Author: Lizhen <[email protected]>
AuthorDate: Wed Jul 26 09:39:27 2023 +0800
[INLONG-8575][Dashboard] Tenant management query optimization (#8585)
Co-authored-by: Daniel <[email protected]>
---
inlong-dashboard/src/core/stores/index.ts | 9 -----
.../src/ui/components/Layout/Tenant/index.tsx | 33 +++++++----------
.../src/ui/pages/TenantManagement/DetailModal.tsx | 2 +-
.../src/ui/pages/TenantManagement/index.tsx | 41 ++++++++++++++++++----
4 files changed, 48 insertions(+), 37 deletions(-)
diff --git a/inlong-dashboard/src/core/stores/index.ts
b/inlong-dashboard/src/core/stores/index.ts
index 1ea9effc01..fdde60e645 100644
--- a/inlong-dashboard/src/core/stores/index.ts
+++ b/inlong-dashboard/src/core/stores/index.ts
@@ -29,7 +29,6 @@ export interface State {
userId: number;
roles: string[];
tenant: string;
- tenantList: string[];
currentMenu: null | Omit<MenuItemType, 'children'>;
}
@@ -39,7 +38,6 @@ const state: State = {
userId: 0,
roles: [],
tenant: '',
- tenantList: [],
currentMenu: null,
};
@@ -61,13 +59,6 @@ const reducers = {
};
},
- setTenantInfo(state, payload) {
- return {
- ...state,
- tenantList: payload.tenantList,
- };
- },
-
setCurrentMenu(state, payload) {
const pathname = payload && payload.pathname;
if (!pathname) return state;
diff --git a/inlong-dashboard/src/ui/components/Layout/Tenant/index.tsx
b/inlong-dashboard/src/ui/components/Layout/Tenant/index.tsx
index f800fc57ce..d3fddf4b03 100644
--- a/inlong-dashboard/src/ui/components/Layout/Tenant/index.tsx
+++ b/inlong-dashboard/src/ui/components/Layout/Tenant/index.tsx
@@ -19,7 +19,7 @@
import React, { useEffect, useState } from 'react';
import { Divider, Dropdown, Input, MenuProps, message, Space, theme } from
'antd';
-import { useDispatch, useRequest, useSelector } from '@/ui/hooks';
+import { useRequest, useSelector } from '@/ui/hooks';
import { State } from '@/core/stores';
import { useTranslation } from 'react-i18next';
import { useLocalStorage } from '@/core/utils/localStorage';
@@ -30,7 +30,6 @@ const Comp: React.FC = () => {
const { t } = useTranslation();
const tenant = useSelector<State, State['tenant']>(state => state.tenant);
const userName = useSelector<State, State['userName']>(state =>
state.userName);
- const roles = useSelector<State, State['roles']>(state => state.roles);
const [getLocalStorage, setLocalStorage, removeLocalStorage] =
useLocalStorage('tenant');
const { token } = useToken();
@@ -39,20 +38,17 @@ const Comp: React.FC = () => {
borderRadius: token.borderRadiusLG,
boxShadow: token.boxShadowSecondary,
};
- const [filter, setFilter] = useState(true);
- const [filterData, setFilterData] = useState([]);
const [data, setData] = useState([]);
const defaultOptions = {
keyword: '',
- pageSize: 10,
+ pageSize: 9999,
pageNum: 1,
};
- const dispatch = useDispatch();
const [options, setOptions] = useState(defaultOptions);
- const { run: getStreamData } = useRequest(
+ const { run: getTenantData } = useRequest(
{
url: '/tenant/list',
method: 'POST',
@@ -66,20 +62,12 @@ const Comp: React.FC = () => {
manual: userName !== undefined ? false : true,
onSuccess: result => {
const tenant = [];
- const tenantList = [];
result.list.map(item => {
- tenantList.push(item.name);
tenant.push({
label: item.name,
key: item.name,
});
});
- dispatch({
- type: 'setTenantInfo',
- payload: {
- tenantList: tenantList,
- },
- });
setData(tenant);
},
},
@@ -106,24 +94,29 @@ const Comp: React.FC = () => {
};
const onFilter = allValues => {
- setFilterData(data.filter(item => item.key === allValues));
- setFilter(false);
+ setOptions(prev => ({
+ ...prev,
+ keyword: allValues,
+ }));
+ getTenantData();
};
useEffect(() => {
if (userName !== undefined) {
- getStreamData();
+ getTenantData();
}
}, [userName]);
return (
<>
<Dropdown
- menu={{ items: filter ? data : filterData, onClick }}
+ menu={{ items: data, onClick }}
placement="bottomLeft"
dropdownRender={menu => (
<div style={contentStyle}>
- {React.cloneElement(menu as React.ReactElement, { style: {
boxShadow: 'none' } })}
+ {React.cloneElement(menu as React.ReactElement, {
+ style: { boxShadow: 'none', maxHeight: 200, overflow: 'auto' },
+ })}
<Divider style={{ margin: 0 }} />
<Space style={{ padding: 8 }}>
<Input.Search allowClear onSearch={onFilter} style={{ width: 130
}} />
diff --git a/inlong-dashboard/src/ui/pages/TenantManagement/DetailModal.tsx
b/inlong-dashboard/src/ui/pages/TenantManagement/DetailModal.tsx
index 97d779a8f8..7204f5bc46 100644
--- a/inlong-dashboard/src/ui/pages/TenantManagement/DetailModal.tsx
+++ b/inlong-dashboard/src/ui/pages/TenantManagement/DetailModal.tsx
@@ -63,7 +63,7 @@ const Comp: React.FC<Props> = ({ id, ...modalProps }) => {
data: {
keyword,
pageNum: 1,
- pageSize: 10,
+ pageSize: 9999,
listByLoginUser: true,
},
}),
diff --git a/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx
b/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx
index 7796cc9d1c..8dae39e1f4 100644
--- a/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx
+++ b/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx
@@ -17,22 +17,20 @@
* under the License.
*/
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { Button, Card } from 'antd';
import { PageContainer, Container } from '@/ui/components/PageContainer';
import HighTable from '@/ui/components/HighTable';
-import { useRequest, useSelector } from '@/ui/hooks';
+import { useRequest } from '@/ui/hooks';
import { useTranslation } from 'react-i18next';
import { defaultSize } from '@/configs/pagination';
import DetailModal from './DetailModal';
import { getFilterFormContent, getColumns } from './config';
-import { State } from '@/core/stores';
const Comp: React.FC = () => {
const { t } = useTranslation();
- const tenantList = useSelector<State, State['tenantList']>(state =>
state.tenantList);
-
+ const [tenantList, setTenantList] = useState([]);
const [options, setOptions] = useState({
keyword: '',
pageSize: defaultSize,
@@ -44,6 +42,30 @@ const Comp: React.FC = () => {
open: false,
});
+ 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 => item.name);
+ setOptions(prev => ({
+ ...prev,
+ tenantList: list,
+ }));
+ setTenantList(list);
+ getList();
+ },
+ },
+ );
+
const {
data,
loading,
@@ -56,6 +78,7 @@ const Comp: React.FC = () => {
},
{
refreshDeps: [options],
+ manual: tenantList.length > 0 ? false : true,
},
);
@@ -74,14 +97,18 @@ const Comp: React.FC = () => {
}));
};
- const onFilter = allValues => {
+ const onFilter = keyword => {
setOptions(prev => ({
...prev,
- ...allValues,
+ keyword,
pageNum: 1,
}));
};
+ useEffect(() => {
+ getTenantData();
+ }, []);
+
const pagination = {
pageSize: options.pageSize,
current: options.pageNum,
