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 2023/04/07 09:28:46 UTC
[inlong] branch master updated: [INLONG-7796][Dashboard] Add icon to menu (#7797)
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 4fb105ca6 [INLONG-7796][Dashboard] Add icon to menu (#7797)
4fb105ca6 is described below
commit 4fb105ca6779ae1f29f39b93cf38c105d9a525da
Author: Daniel <le...@apache.org>
AuthorDate: Fri Apr 7 17:28:40 2023 +0800
[INLONG-7796][Dashboard] Add icon to menu (#7797)
---
.../src/configs/menus/{conf.ts => conf.tsx} | 15 ++++++++++++
.../components/Layout/NavWidget/LocaleSelect.tsx | 4 ++--
.../src/ui/components/Layout/index.tsx | 24 +++++++++----------
.../ui/components/PageContainer/index.module.less | 4 ++++
.../src/ui/components/UserSelect/index.tsx | 1 -
.../src/ui/pages/ClusterTags/index.tsx | 4 ++--
.../src/ui/pages/GroupDetail/DataSources/index.tsx | 28 ++++++++++++----------
.../src/ui/pages/GroupDetail/DataStorage/index.tsx | 27 +++++++++++----------
8 files changed, 66 insertions(+), 41 deletions(-)
diff --git a/inlong-dashboard/src/configs/menus/conf.ts b/inlong-dashboard/src/configs/menus/conf.tsx
similarity index 83%
rename from inlong-dashboard/src/configs/menus/conf.ts
rename to inlong-dashboard/src/configs/menus/conf.tsx
index 390a6ed01..e9af6f3b6 100644
--- a/inlong-dashboard/src/configs/menus/conf.ts
+++ b/inlong-dashboard/src/configs/menus/conf.tsx
@@ -17,20 +17,32 @@
* under the License.
*/
+import React from 'react';
import i18n from '@/i18n';
+import {
+ ApiOutlined,
+ SettingOutlined,
+ DatabaseOutlined,
+ DeploymentUnitOutlined,
+ SafetyOutlined,
+ ShopOutlined,
+} from '@ant-design/icons';
import type { MenuItemType } from '.';
const conf: MenuItemType[] = [
{
path: '/group',
name: i18n.t('configs.menus.Groups'),
+ icon: <ApiOutlined />,
},
{
path: '/consume',
name: i18n.t('configs.menus.Subscribe'),
+ icon: <ShopOutlined />,
},
{
name: i18n.t('configs.menus.Clusters'),
+ icon: <DeploymentUnitOutlined />,
children: [
{
path: '/clusters',
@@ -45,13 +57,16 @@ const conf: MenuItemType[] = [
{
path: '/node',
name: i18n.t('configs.menus.Nodes'),
+ icon: <DatabaseOutlined />,
},
{
path: '/process',
name: i18n.t('configs.menus.Process'),
+ icon: <SafetyOutlined />,
},
{
name: i18n.t('configs.menus.SystemManagement'),
+ icon: <SettingOutlined />,
isAdmin: true,
children: [
{
diff --git a/inlong-dashboard/src/ui/components/Layout/NavWidget/LocaleSelect.tsx b/inlong-dashboard/src/ui/components/Layout/NavWidget/LocaleSelect.tsx
index 9e9cb1657..30d09b389 100644
--- a/inlong-dashboard/src/ui/components/Layout/NavWidget/LocaleSelect.tsx
+++ b/inlong-dashboard/src/ui/components/Layout/NavWidget/LocaleSelect.tsx
@@ -19,7 +19,7 @@
import React from 'react';
import { Dropdown, Menu } from 'antd';
-import { GlobalOutlined } from '@ant-design/icons';
+import { TranslationOutlined } from '@ant-design/icons';
import { useSelector, useLocation } from '@/ui/hooks';
import { State } from '@/core/stores';
import { localesConfig } from '@/configs/locales';
@@ -51,7 +51,7 @@ const SelectLang = () => {
return (
<Dropdown dropdownRender={() => langMenu} placement="bottomRight">
- <GlobalOutlined />
+ <TranslationOutlined />
</Dropdown>
);
};
diff --git a/inlong-dashboard/src/ui/components/Layout/index.tsx b/inlong-dashboard/src/ui/components/Layout/index.tsx
index 1216e604e..63c238229 100644
--- a/inlong-dashboard/src/ui/components/Layout/index.tsx
+++ b/inlong-dashboard/src/ui/components/Layout/index.tsx
@@ -17,7 +17,8 @@
* under the License.
*/
-import { SmileOutlined, SmileTwoTone } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import { StarOutlined, BulbOutlined } from '@ant-design/icons';
import { config } from '@/configs/default';
import menusTree from '@/configs/menus';
import defaultSettings from './defaultSettings';
@@ -36,12 +37,6 @@ import { State } from '@/core/stores';
import NavWidget from './NavWidget';
import LocaleSelect from './NavWidget/LocaleSelect';
-const renderMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
- menus.map(({ icon, children, ...item }) => ({
- ...item,
- children: children && renderMenuItem(children),
- }));
-
const BasicLayout: React.FC = props => {
const location = useLocation();
const [settings, setSetting] = useState(defaultSettings as SettingDrawerProps['settings']);
@@ -66,8 +61,6 @@ const BasicLayout: React.FC = props => {
}
}, [breadcrumbMap, pathname]);
- const menuDataRender = useCallback(() => renderMenuItem(menuData), [menuData]);
-
const menuItemRender = useCallback((menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || !menuItemProps.path) {
return defaultDom;
@@ -101,15 +94,22 @@ const BasicLayout: React.FC = props => {
{...settings}
title={config.title}
logo={<img src={config.logo} style={{ height: 50 }} alt="Logo" />}
- menuDataRender={menuDataRender}
menuItemRender={menuItemRender}
+ route={{
+ path: '/',
+ routes: menuData,
+ }}
navTheme={navTheme}
menuProps={menuProps}
actionsRender={() => [
navTheme === 'realDark' ? (
- <SmileOutlined onClick={() => setNavTheme(settings.navTheme)} />
+ <Tooltip title="Dark">
+ <StarOutlined onClick={() => setNavTheme(settings.navTheme)} />
+ </Tooltip>
) : (
- <SmileTwoTone onClick={() => setNavTheme('realDark')} />
+ <Tooltip title="Light">
+ <BulbOutlined onClick={() => setNavTheme('realDark')} />
+ </Tooltip>
),
<LocaleSelect />,
<NavWidget />,
diff --git a/inlong-dashboard/src/ui/components/PageContainer/index.module.less b/inlong-dashboard/src/ui/components/PageContainer/index.module.less
index 5131c3edf..9c302e125 100644
--- a/inlong-dashboard/src/ui/components/PageContainer/index.module.less
+++ b/inlong-dashboard/src/ui/components/PageContainer/index.module.less
@@ -22,4 +22,8 @@
.layoutContainer {
margin: @layoutCommonSpan 0;
+
+ &:first-child {
+ margin-top: 0;
+ }
}
diff --git a/inlong-dashboard/src/ui/components/UserSelect/index.tsx b/inlong-dashboard/src/ui/components/UserSelect/index.tsx
index aa2af2085..20c753ab0 100644
--- a/inlong-dashboard/src/ui/components/UserSelect/index.tsx
+++ b/inlong-dashboard/src/ui/components/UserSelect/index.tsx
@@ -18,7 +18,6 @@
*/
import React, { useState, useEffect } from 'react';
-import { Tag } from 'antd';
import type { DefaultOptionType } from 'antd/es/select';
import { State } from '@/core/stores';
import { useSelector } from '@/ui/hooks';
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx b/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
index 4121ac2f0..785b78ded 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
@@ -19,7 +19,7 @@
import React, { useState, useCallback, useMemo } from 'react';
import { Button, Card, List, Col, Row, Descriptions, Input, Modal, message } from 'antd';
-import { CheckOutlined } from '@ant-design/icons';
+import { RightOutlined } from '@ant-design/icons';
import { PageContainer } from '@/ui/components/PageContainer';
import { useRequest } from '@/ui/hooks';
import i18n from '@/i18n';
@@ -159,7 +159,7 @@ const Comp: React.FC = () => {
onClick={() => setTagId(item.id)}
>
{tagId === item.id && (
- <CheckOutlined style={{ position: 'absolute', left: 0, top: '35%' }} />
+ <RightOutlined style={{ position: 'absolute', left: 0, top: '35%' }} />
)}
{item.clusterTag}
</List.Item>
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx
index 14f03ce66..527eb6943 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx
@@ -18,7 +18,7 @@
*/
import React, { useState, forwardRef, useMemo, useCallback } from 'react';
-import { Badge, Button, Card, Modal, List, Tag, Radio, message } from 'antd';
+import { Badge, Button, Card, Modal, List, Tag, Segmented, message } from 'antd';
import { PaginationConfig } from 'antd/lib/pagination';
import {
UnorderedListOutlined,
@@ -247,22 +247,26 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
{i18n.t('pages.GroupDetail.Sources.Create')}
</Button>
),
- <Radio.Group
+
+ <Segmented
key="mode"
- onChange={e => {
- setMode(e.target.value);
+ onChange={(value: string) => {
+ setMode(value);
setOptions(defaultOptions);
}}
+ options={[
+ {
+ value: 'list',
+ icon: <UnorderedListOutlined />,
+ },
+ {
+ value: 'table',
+ icon: <TableOutlined />,
+ },
+ ]}
defaultValue={mode}
size="small"
- >
- <Radio.Button value="list">
- <UnorderedListOutlined />
- </Radio.Button>
- <Radio.Button value="table">
- <TableOutlined />
- </Radio.Button>
- </Radio.Group>,
+ />,
]}
>
{mode === 'list' ? (
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx
index 7383155e4..010d66788 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx
@@ -18,7 +18,7 @@
*/
import React, { useState, useMemo, forwardRef, useCallback } from 'react';
-import { Badge, Button, Card, Modal, List, Tag, Radio, message } from 'antd';
+import { Badge, Button, Card, Modal, List, Tag, Segmented, message } from 'antd';
import { PaginationConfig } from 'antd/lib/pagination';
import {
UnorderedListOutlined,
@@ -190,22 +190,25 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
{i18n.t('pages.GroupDetail.Sink.New')}
</Button>
),
- <Radio.Group
+ <Segmented
key="mode"
- onChange={e => {
- setMode(e.target.value);
+ onChange={(value: string) => {
+ setMode(value);
setOptions(defaultOptions);
}}
+ options={[
+ {
+ value: 'list',
+ icon: <UnorderedListOutlined />,
+ },
+ {
+ value: 'table',
+ icon: <TableOutlined />,
+ },
+ ]}
defaultValue={mode}
size="small"
- >
- <Radio.Button value="list">
- <UnorderedListOutlined />
- </Radio.Button>
- <Radio.Button value="table">
- <TableOutlined />
- </Radio.Button>
- </Radio.Group>,
+ />,
]}
>
{mode === 'list' ? (