From dabefee0f7cca08268f0070ac11701d68d84931f Mon Sep 17 00:00:00 2001 From: barnettZQG Date: Sun, 16 Apr 2023 09:04:33 +0800 Subject: [PATCH] Feat: Move the grafana navigation to the extension workspace (#774) Signed-off-by: barnettZQG --- addon/metadata.yaml | 2 +- addon/resources/server.cue | 2 +- packages/velaux-data/src/types/menus.ts | 1 + .../velaux-ui/src/layout/Header/index.tsx | 30 +------- .../velaux-ui/src/layout/LeftMenu/index.tsx | 76 +++++++++++++++---- 5 files changed, 67 insertions(+), 44 deletions(-) diff --git a/addon/metadata.yaml b/addon/metadata.yaml index 928239ee1..28e1c5bb3 100644 --- a/addon/metadata.yaml +++ b/addon/metadata.yaml @@ -1,5 +1,5 @@ name: velaux -version: v1.8.0-beta.1 +version: v1.8.0-rc.1 description: KubeVela User Experience (UX). An extensible, application-oriented delivery and management Platform. icon: https://static.kubevela.net/images/logos/KubeVela%20-03.png url: https://kubevela.io diff --git a/addon/resources/server.cue b/addon/resources/server.cue index 2a6323044..630874de0 100644 --- a/addon/resources/server.cue +++ b/addon/resources/server.cue @@ -45,7 +45,7 @@ _httpsTrait: *[ if parameter["secretName"] != _|_ && parameter["domain"] != _|_ type: "https-route" properties: { domains: [ parameter["domain"]] - rules: [{port: 80}] + rules: [{port: 8000}] secrets: [{ name: parameter["secretName"] }] diff --git a/packages/velaux-data/src/types/menus.ts b/packages/velaux-data/src/types/menus.ts index 09b3379fc..6d6900988 100644 --- a/packages/velaux-data/src/types/menus.ts +++ b/packages/velaux-data/src/types/menus.ts @@ -24,6 +24,7 @@ export interface Menu { name: string; label: string; to: string; + href?: string; relatedRoute: Route[]; icon?: string | React.ReactNode; permission?: ResourceAction; diff --git a/packages/velaux-ui/src/layout/Header/index.tsx b/packages/velaux-ui/src/layout/Header/index.tsx index 0994e97c9..68e21c15a 100644 --- a/packages/velaux-ui/src/layout/Header/index.tsx +++ b/packages/velaux-ui/src/layout/Header/index.tsx @@ -12,8 +12,6 @@ import { AiOutlineQuestionCircle, } from 'react-icons/ai'; -import { getConfigs } from '../../api/config'; -import grafanaImg from '../../assets/grafana.svg'; import logo from '../../assets/kubevela-logo-white.png'; import { If } from '../../components/If'; import Permission from '../../components/Permission'; @@ -26,7 +24,6 @@ import type { SystemInfo } from '../../interface/system'; import type { LoginUserInfo } from '../../interface/user'; import { getData, setData } from '../../utils/cache'; import { locale } from '../../utils/locale'; -import { checkPermission } from '../../utils/permission'; import { getBrowserNameAndVersion } from '../../utils/utils'; import CloudShell from '../CloudShell'; import { locationService } from '../../services/LocationService'; @@ -97,17 +94,6 @@ class Header 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) { @@ -154,7 +140,6 @@ class Header extends Component { this.props.dispatch({ type: 'user/getLoginUserInfo', callback: () => { - this.loadGrafanaIntegration(); this.loadWorkspaces(); }, }); @@ -215,7 +200,7 @@ class Header extends Component { render() { const { Row } = Grid; const { show, userInfo, mode, currentWorkspace } = this.props; - const { grafanaConfigs, workspaces } = this.state; + const { workspaces } = this.state; return (
@@ -240,19 +225,6 @@ class Header extends Component {
- {grafanaConfigs?.map((config) => { - if (config.properties && config.properties.endpoint) { - return ( - - ); - } - return null; - })} {workspaces.map((ws) => { return ( { const path = locationService.getPathName(); const [menus, setMenus] = useState(); + const [grafanaConfigs, setGrafanaConfigs] = useState(); + useEffect(() => { + if (checkPermission({ resource: 'config', action: 'list' }, '', props.userInfo)) { + getConfigs('grafana').then((res) => { + if (res) { + setGrafanaConfigs(res.configs || []); + } + }); + } + }, [props.userInfo]); + useEffect(() => { menuService.loadPluginMenus().then(() => { const workspace = menuService.loadCurrentWorkspace(); const menus = workspace && props.userInfo ? menuService.loadMenus(workspace, props.userInfo) : []; + if (grafanaConfigs) { + const grafanaLeftMenu: LeftMenu = { catalog: 'Grafana', menus: [] }; + grafanaConfigs.map((g) => { + if (g.properties && g.properties['endpoint']) { + grafanaLeftMenu.menus.push({ + name: g.name, + workspace: 'extension', + label: g.alias || g.name, + to: '', + href: g.properties['endpoint'], + relatedRoute: [], + type: MenuTypes.Workspace, + icon: , + }); + } + }); + menus.push(grafanaLeftMenu); + } setMenus(menus); }); - }, [props.userInfo, path]); + }, [props.userInfo, path, grafanaConfigs]); if (!props.userInfo) { return
; @@ -33,21 +68,36 @@ const LeftMenuModule = (props: Props) => { const ele: JSX.Element[] = []; if (item.menus && item.menus.length > 0) { item.menus.map((childrenItem) => { + const item = ( +
+ {childrenItem.icon} + + {childrenItem.label} + +
+ ); const childrenArr = (
  • - - - + {item} + + + + + {item} + +
    • ); ele.push(childrenArr);