From cd550aba80ef77f31f3bcf3bbcfdac519d6e2e4d Mon Sep 17 00:00:00 2001 From: barnettZQG Date: Mon, 24 Oct 2022 10:18:02 +0800 Subject: [PATCH] Feat: enhance the top bar and show the grafana link (#622) * Feat: enhance the top bar and show the grafana link Signed-off-by: barnettZQG * Fix: mark the experimental addon Signed-off-by: barnettZQG Signed-off-by: barnettZQG --- package.json | 3 +- src/components/SwitchButton/index.jsx | 39 --------- src/components/SwitchButton/index.tsx | 38 +++++++++ src/layout/LeftMenu/menu.js | 2 +- src/layout/TopBar/index.less | 27 ++++++ src/layout/TopBar/index.tsx | 82 +++++++++++++------ src/lib.less | 1 + .../Addons/components/card-conten/index.tsx | 8 +- yarn.lock | 5 -- 9 files changed, 130 insertions(+), 75 deletions(-) delete mode 100644 src/components/SwitchButton/index.jsx create mode 100644 src/components/SwitchButton/index.tsx diff --git a/package.json b/package.json index 0bda81cfa..e64c2ce0d 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,6 @@ "react-refresh": "^0.10.0", "redux": "4.1.2", "remark-gfm": "3.0.1", - "tiny-pubsub": "^1.1.0", "tsx-control-statements": "4.1.1", "uuid": "^8.3.2" }, @@ -149,4 +148,4 @@ "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "5.1.4" } -} +} \ No newline at end of file diff --git a/src/components/SwitchButton/index.jsx b/src/components/SwitchButton/index.jsx deleted file mode 100644 index fe35cba7c..000000000 --- a/src/components/SwitchButton/index.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useState } from 'react'; -import './index.less'; -import { Button } from '@alifd/next'; -import { useTranslation } from 'react-i18next'; -import { publish } from 'tiny-pubsub'; -import { getLanguage } from '../../utils/common'; - -const SwitchLanguage = () => { - let { i18n } = useTranslation(); - const _isEnglish = getLanguage() === 'en'; - const [isEnglish, setIsEnglish] = useState(_isEnglish); - return ( -
- - -
- ); -}; -export default SwitchLanguage; diff --git a/src/components/SwitchButton/index.tsx b/src/components/SwitchButton/index.tsx new file mode 100644 index 000000000..7ae911879 --- /dev/null +++ b/src/components/SwitchButton/index.tsx @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; +import './index.less'; +import { Dropdown, Menu } from '@alifd/next'; +import { useTranslation } from 'react-i18next'; +import { getLanguage } from '../../utils/common'; + +import { TbLanguage } from 'react-icons/tb'; + +const SwitchLanguage = () => { + const { i18n } = useTranslation(); + const _isEnglish = getLanguage() === 'en'; + const [isEnglish, setIsEnglish] = useState(_isEnglish); + return ( + }> + + { + i18n.changeLanguage('en'); + localStorage.setItem('lang', 'en'); + setIsEnglish(true); + }} + > + English {isEnglish ? '(Now)' : ''} + + { + i18n.changeLanguage('zh'); + localStorage.setItem('lang', 'zh'); + setIsEnglish(false); + }} + > + 中文{!isEnglish ? '(当前)' : ''} + + + + ); +}; +export default SwitchLanguage; diff --git a/src/layout/LeftMenu/menu.js b/src/layout/LeftMenu/menu.js index 1cf0f9f25..4beb441a1 100644 --- a/src/layout/LeftMenu/menu.js +++ b/src/layout/LeftMenu/menu.js @@ -108,7 +108,7 @@ export function getLeftSlider(pathname) { link: '/configs', iconType: 'indent', navName: 'Configs', - permission: { resource: 'configTemplate:*', action: 'list' }, + permission: { resource: 'config:*', action: 'list' }, }, ], }, diff --git a/src/layout/TopBar/index.less b/src/layout/TopBar/index.less index 0977ec12c..84aa9cd3c 100644 --- a/src/layout/TopBar/index.less +++ b/src/layout/TopBar/index.less @@ -2,6 +2,10 @@ width: 100%; padding: 0 16px; box-shadow: 5px 0 8px #888; + cursor: auto !important; + .logo { + width: 224px; + } .nav-wrapper { position: relative; width: 100%; @@ -43,6 +47,29 @@ } } } + .integration-items { + display: flex; + flex-wrap: nowrap; + height: 100%; + .item { + a { + display: flex; + justify-content: center; + height: 100%; + color: #fff; + img { + width: 30px; + } + span { + margin-left: 4px; + line-height: 48px; + } + &:hover { + color: var(--hover-color); + } + } + } + } } .margin-left-10 { margin-left: 10px; diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx index 05b3b887f..57ce4d011 100644 --- a/src/layout/TopBar/index.tsx +++ b/src/layout/TopBar/index.tsx @@ -22,6 +22,11 @@ import locale from '../../utils/locale'; import type { AddonBaseStatus } from '../../interface/addon'; import i18n from '../../i18n'; import type { Project } from '../../interface/project'; +import { getConfigs } from '../../api/config'; +import type { Config } from '../../interface/configs'; +import { AiFillSetting } from 'react-icons/ai'; +import grafanaImg from '../../assets/grafana.svg'; +import { checkPermission } from '../../utils/permission'; type Props = { dispatch: ({}) => {}; @@ -34,8 +39,8 @@ type Props = { type State = { platformSetting: boolean; isEditAdminUser: boolean; - userInfo?: LoginUserInfo; showMysqlProjectList: boolean; + grafanaConfigs?: Config[]; }; const TelemetryDataCollectionKey = 'telemetryDataCollection'; @@ -77,6 +82,17 @@ class TopBar extends Component { }); }; + loadGrafanaIntegration = () => { + const { userInfo } = this.props; + if (checkPermission({ resource: 'config', action: 'list' }, '', userInfo)) { + getConfigs('grafana').then((res) => { + if (res && res.configs) { + this.setState({ grafanaConfigs: res.configs }); + } + }); + } + }; + telemetryDataCollection = async () => { const { systemInfo } = this.props; if (!getData(TelemetryDataCollectionKey) && systemInfo?.enableCollection) { @@ -125,10 +141,9 @@ class TopBar extends Component { loadUserInfo = () => { this.props.dispatch({ type: 'user/getLoginUserInfo', - callback: (res: LoginUserInfo) => { - this.setState({ userInfo: res }, () => { - this.isEditPlatForm(); - }); + callback: () => { + this.isEditPlatForm(); + this.loadGrafanaIntegration(); }, }); }; @@ -190,7 +205,7 @@ class TopBar extends Component { }; isEditPlatForm = () => { - const { userInfo } = this.state; + const { userInfo } = this.props; const isAdminUser = isAdminUserCheck(userInfo); if (isAdminUser && userInfo && !userInfo.email) { this.setState({ @@ -208,39 +223,53 @@ class TopBar extends Component { }; render() { - const { Row, Col } = Grid; - const { systemInfo, dispatch, show } = this.props; - const { platformSetting, isEditAdminUser, userInfo, showMysqlProjectList } = this.state; + const { Row } = Grid; + const { systemInfo, dispatch, show, userInfo } = this.props; + const { platformSetting, isEditAdminUser, showMysqlProjectList, grafanaConfigs } = this.state; + return (
- +
- -
+
+
+
+ {grafanaConfigs?.map((config) => { + if (config.properties && config.properties.endpoint) { + return ( + + ); + } + })} +
+
- -
- Platform Setting -
- -
+
+ +
+ +
+ + -
- -
{ +
+ +
diff --git a/src/lib.less b/src/lib.less index 86cb1aa60..cb0e9151b 100644 --- a/src/lib.less +++ b/src/lib.less @@ -1,6 +1,7 @@ :root { --primary-color: #1b58f4; --warning-color: var(--message-warning-color-icon-inline, #fac800); + --hover-color: #f7bca9; } @border-radius-8: 8px; @F7F7F7: #f7f7f7; diff --git a/src/pages/Addons/components/card-conten/index.tsx b/src/pages/Addons/components/card-conten/index.tsx index a6e773cf2..9e81f273d 100644 --- a/src/pages/Addons/components/card-conten/index.tsx +++ b/src/pages/Addons/components/card-conten/index.tsx @@ -2,7 +2,7 @@ import type { MouseEvent } from 'react'; import React from 'react'; import './index.less'; -import { Grid, Card, Tag } from '@b-design/ui'; +import { Grid, Card, Tag, Balloon } from '@b-design/ui'; import type { Addon, AddonBaseStatus } from '../../../../interface/addon'; import { If } from 'tsx-control-statements/components'; import Empty from '../../../../components/Empty'; @@ -132,9 +132,11 @@ class CardContent extends React.Component { clickAddon(name)}>{name} - + - {registryName} + Experimental}> + This addon is experimental, please don't use it in production + diff --git a/yarn.lock b/yarn.lock index 9a33a6b22..37fbfbb3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11161,11 +11161,6 @@ tiny-invariant@^1.0.2: resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz" integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== -tiny-pubsub@^1.1.0: - version "1.1.0" - resolved "https://registry.npmmirror.com/tiny-pubsub/download/tiny-pubsub-1.1.0.tgz" - integrity sha1-0y9kKtti5Jkm/+rU23vkzLh9E1k= - tiny-warning@^1.0.0, tiny-warning@^1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"