Feat: Move the grafana navigation to the extension workspace (#774)

Signed-off-by: barnettZQG <barnett.zqg@gmail.com>
kubevela · Apr 16, 2023 · dabefee · dabefee
1 parent ac9493f
commit dabefee
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<Props, State> {
     });
   };
 
-  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<Props, State> {
     this.props.dispatch({
       type: 'user/getLoginUserInfo',
       callback: () => {
-        this.loadGrafanaIntegration();
         this.loadWorkspaces();
       },
     });
@@ -215,7 +200,7 @@ class Header extends Component<Props, State> {
   render() {
     const { Row } = Grid;
     const { show, userInfo, mode, currentWorkspace } = this.props;
-    const { grafanaConfigs, workspaces } = this.state;
+    const { workspaces } = this.state;
 
     return (
       <div className="layout-top-bar" id="layout-top-bar">
@@ -240,19 +225,6 @@ class Header extends Component<Props, State> {
           </div>
           <div style={{ flex: '1 1 0%' }}>
             <div className="workspace-items">
-              {grafanaConfigs?.map((config) => {
-                if (config.properties && config.properties.endpoint) {
-                  return (
-                    <div key={'config' + config.name} className="item" title={config.description}>
-                      <a target="_blank" href={config.properties.endpoint} rel="noopener noreferrer">
-                        <img src={grafanaImg} />
-                        <span>{config.alias || config.name}</span>
-                      </a>
-                    </div>
-                  );
-                }
-                return null;
-              })}
               {workspaces.map((ws) => {
                 return (
                   <Link

diff --git a/packages/velaux-ui/src/layout/LeftMenu/index.tsx b/packages/velaux-ui/src/layout/LeftMenu/index.tsx
@@ -9,6 +9,12 @@ import type { LoginUserInfo } from '../../interface/user';
 import { menuService, LeftMenu } from '../../services/MenuService';
 
 import './index.less';
+import { checkPermission } from '../../types';
+import { getConfigs } from '../../api/config';
+import { Config } from '../../interface/configs';
+import { MenuTypes } from '@velaux/data';
+import { MdOutlineMonitorHeart } from 'react-icons/md';
+import { If } from '../../components/If';
 interface Props {
   userInfo?: LoginUserInfo;
   systemInfo?: SystemInfo;
@@ -17,13 +23,42 @@ interface Props {
 const LeftMenuModule = (props: Props) => {
   const path = locationService.getPathName();
   const [menus, setMenus] = useState<LeftMenu[]>();
+  const [grafanaConfigs, setGrafanaConfigs] = useState<Config[]>();
+  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: <MdOutlineMonitorHeart></MdOutlineMonitorHeart>,
+            });
+          }
+        });
+        menus.push(grafanaLeftMenu);
+      }
       setMenus(menus);
     });
-  }, [props.userInfo, path]);
+  }, [props.userInfo, path, grafanaConfigs]);
 
   if (!props.userInfo) {
     return <div />;
@@ -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 = (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            {childrenItem.icon}
+            <span className={'menu-item-text'}>
+              <Translation>{childrenItem.label}</Translation>
+            </span>
+          </div>
+        );
         const childrenArr = (
           <li className="nav-item" key={childrenItem.name}>
-            <Link to={childrenItem.to} className={childrenItem.active ? 'menu-item-active' : 'menu-item'}>
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
+            <If condition={childrenItem.href}>
+              <a
+                rel="noopener noreferrer"
+                target="_blank"
+                className={childrenItem.active ? 'menu-item-active' : 'menu-item'}
+                href={childrenItem.href}
               >
-                {childrenItem.icon}
-                <span className={'menu-item-text'}>
-                  <Translation>{childrenItem.label}</Translation>
-                </span>
-              </div>
-            </Link>
+                {item}
+              </a>
+            </If>
+            <If condition={childrenItem.to && !childrenItem.href}>
+              <Link to={childrenItem.to} className={childrenItem.active ? 'menu-item-active' : 'menu-item'}>
+                {item}
+              </Link>
+            </If>
           </li>
         );
         ele.push(childrenArr);