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 <[email protected]> * Fix: mark the experimental addon Signed-off-by: barnettZQG <[email protected]> Signed-off-by: barnettZQG <[email protected]>
kubevela · Oct 24, 2022 · cd550ab · cd550ab
1 parent 348d9ac
commit cd550ab
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 75 deletions.
diff --git 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"
   }
-}
+}
diff --git a/src/components/SwitchButton/index.jsx b/src/components/SwitchButton/index.jsx
diff --git a/src/components/SwitchButton/index.tsx 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 (
+    <Dropdown trigger={<TbLanguage size="18" />}>
+      <Menu>
+        <Menu.Item
+          onClick={() => {
+            i18n.changeLanguage('en');
+            localStorage.setItem('lang', 'en');
+            setIsEnglish(true);
+          }}
+        >
+          English {isEnglish ? '(Now)' : ''}
+        </Menu.Item>
+        <Menu.Item
+          onClick={() => {
+            i18n.changeLanguage('zh');
+            localStorage.setItem('lang', 'zh');
+            setIsEnglish(false);
+          }}
+        >
+          中文{!isEnglish ? '(当前)' : ''}
+        </Menu.Item>
+      </Menu>
+    </Dropdown>
+  );
+};
+export default SwitchLanguage;
diff --git 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
@@ -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
@@ -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<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) {
@@ -125,10 +141,9 @@ class TopBar extends Component<Props, State> {
   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<Props, State> {
   };
 
   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<Props, State> {
   };
 
   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 (
       <div className="layout-topbar" id="layout-topbar">
         <Row className="nav-wrapper">
-          <Col span="4" className="logo">
+          <div className="logo">
             <img src={logo} title={'Make shipping applications more enjoyable.'} />
-          </Col>
-          <div style={{ flex: '1 1 0%' }} />
+          </div>
+          <div style={{ flex: '1 1 0%' }}>
+            <div className="integration-items">
+              {grafanaConfigs?.map((config) => {
+                if (config.properties && config.properties.endpoint) {
+                  return (
+                    <div 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>
+                  );
+                }
+              })}
+            </div>
+          </div>
           <div className="right">
-            <Permission request={{ resource: 'systemSetting', action: 'update' }}>
-              <div className="vela-item" onClick={this.showPlatformSetting}>
-                <Translation>Platform Setting</Translation>
-              </div>
-            </Permission>
             <Permission request={{ resource: 'cloudshell', action: 'create' }}>
-              <div
-                className="vela-item"
-                title="Open the cloud shell"
-                onClick={this.onOpenCloudShell}
-              >
+              <div className="vela-item" title="Open Cloud Shell" onClick={this.onOpenCloudShell}>
                 <AiOutlineCode size={18} />
               </div>
             </Permission>
+            <Permission request={{ resource: 'systemSetting', action: 'update' }}>
+              <div className="vela-item" onClick={this.showPlatformSetting}>
+                <AiFillSetting size={18} title={'Platform Setting'} />
+              </div>
+            </Permission>
+
             <div className="vela-item">
               <a title="KubeVela Documents" href="https://kubevela.io" target="_blank">
                 <Icon size={14} type="help1" />
               </a>
             </div>
-            <div className="vela-item">
-              <SwitchLanguage />
-            </div>
 
             <If condition={userInfo}>
               <Dropdown
@@ -332,6 +361,9 @@ class TopBar extends Component<Props, State> {
                 </Menu>
               </Dropdown>
             </If>
+            <div className="vela-item">
+              <SwitchLanguage />
+            </div>
           </div>
         </Row>
         <If condition={platformSetting}>

diff --git 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
@@ -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<Props, State> {
                         <Col span="16" className="font-size-16">
                           <a onClick={() => clickAddon(name)}>{name}</a>
                         </Col>
-                        <If condition={registryName}>
+                        <If condition={registryName && registryName == 'experimental'}>
                           <Col span="8" className="flexright">
-                            <Tag color="blue">{registryName}</Tag>
+                            <Balloon trigger={<Tag color="yellow">Experimental</Tag>}>
+                              This addon is experimental, please don't use it in production
+                            </Balloon>
                           </Col>
                         </If>
                       </Row>

diff --git 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"