add /integration

Author: robberphex

opensergo-dashboard-ui/package-lock.json

@@ -28,6 +28,7 @@
     "@alicloud/console-components-app-layout": "^1.1.4",
     "@alicloud/console-components-console-menu": "^1.2.12",
     "@alicloud/console-components-page": "^1.0.18",
+    "@alicloud/console-components-slide-panel": "^2.2.14",
     "@alicloud/console-components-table": "^1.0.21",
     "@alicloudfe/components-console-menu": "^1.1.0",
     "@types/node": "^16.11.25",
@@ -62,6 +63,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "^4.0.3",
+    "sass": "^1.51.0",
     "selectize": "^0.12.1",
     "styled-components": "^4.3.2"
   },

opensergo-dashboard-ui/package.json

@@ -1,4 +1,3 @@
-import React from 'react';
 import './App.css';
 import { IRoutableItemDescriptor } from "@alicloud/console-components-console-menu";
 import RoutableMenu from "@alicloud/console-components-console-menu/lib/RoutableMenu";
@@ -9,11 +8,13 @@ import "@alicloud/console-components/dist/wind.css";
 import { Redirect, Route, Switch } from "dva/router";
 import AppList from "./AppList";
 import AppDetail from "./page/AppDetail";
+import Integration from './page/Integration';
 
 
 const items: IRoutableItemDescriptor[] = [
     // {key: '/home', to: '/', label: '概览'},
     { key: '/application', to: '/application', label: '应用列表' },
+    { key: '/integration', to: '/integration', label: '接入中心' },
 ];
 
 const Nav = () => (
@@ -30,17 +31,20 @@ function App() {
         >
             <Switch>
                 <Route path="/application/detail">
-                    <AppDetail  />
+                    <AppDetail />
                 </Route>
                 <Route path="/application/service">
-                    <AppDetail  />
+                    <AppDetail />
                 </Route>
                 <Route exact path="/application">
                     <AppList />
                 </Route>
                 <Route exact path="/application">
                     <AppList />
                 </Route>
+                <Route exact path="/integration">
+                    <Integration />
+                </Route>
                 <Route path="/">
                     <Redirect to={'/application'} />
                 </Route>

opensergo-dashboard-ui/src/App.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Badge, Button, Icon, Select } from '@alicloud/console-components';
-import Actions, { LinkButton } from "@alicloud/console-components-actions";
+import { Button } from '@alicloud/console-components';
+import { LinkButton } from "@alicloud/console-components-actions";
 import Page from '@alicloud/console-components-page';
 import Table from '@alicloud/console-components-table';
 import type { TableProps } from '@alicloud/console-components/types/table';
 import axios from 'axios';
-import { Link } from 'dva/router'
+import { Link, useHistory } from 'dva/router'
 
 
 const rowSelection: TableProps['rowSelection'] & {
@@ -17,25 +17,33 @@ const rowSelection: TableProps['rowSelection'] & {
 }
 
 const AppList: React.FC<{}> = () => {
+    const history = useHistory();
+
+    const [loading, setLoading] = useState(true);
+
     const [appList, setAppList] = useState([]);
     useEffect(() => {
         fetchAppList();
     }, []);
     // TODO need to support paging
     const fetchAppList = async () => {
+        setLoading(true);
         const data = await axios.get('/api/application/getApplicationList')
             .then(function (response) {
                 return response?.data?.data;
             });
         setAppList(data);
+        setLoading(false);
     };
 
     const Operation = () => (
         <>
             <Button
-            //  type="primary"
-             >
-                应用接入🚧
+                onClick={() => {
+                    history.push("/integration");
+                }}
+            >
+                应用接入
             </Button>
             <Button onClick={fetchAppList}>刷新</Button>
         </>
@@ -46,6 +54,7 @@ const AppList: React.FC<{}> = () => {
             <Page.Header title="应用列表" />
             <Page.Content>
                 <Table
+                    loading={loading}
                     exact
                     fixedBarExpandWidth={[24]}
                     affixActionBar

opensergo-dashboard-ui/src/AppList.tsx

@@ -0,0 +1,47 @@
+.integration-card {
+    width: 120px;
+    height: 120px;
+    padding: 4px 8px;
+    padding-top: 10px;
+    background-color: #FAFAFA;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 12px;
+    margin-left: 0px;
+    // box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .13);
+    // border: 1px solid transparent;
+    background-color: #fff;
+    border: 1px solid #DEDEDE;
+    .integration-icon {
+        width: 56px;
+        height: 56px;
+    }
+
+    &__name {
+        font-size: 12px;
+        text-align: center;
+        flex: 1;
+        display: flex;
+        align-items: center;
+    }
+
+    &:hover {
+        text-decoration: none !important;
+        cursor: pointer;
+        border: 1px solid #0070CC;
+        box-shadow: 0 2px 8px 0 rgba(0,112,204,0.08);
+        background-color: #FFFFFF;
+    }
+    
+    &--disabled {
+        &:hover {
+            cursor: not-allowed;
+            background-color: #FAFAFA;
+        }
+        cursor: not-allowed;
+        & > * {
+            opacity: 0.2;
+        }
+    }
+}

opensergo-dashboard-ui/src/component/integration/IntegrationCard.scss

@@ -0,0 +1,30 @@
+import React from 'react';
+import cx from 'classnames';
+import './IntegrationCard.scss';
+
+
+const BLOCK = 'integration-card';
+
+const IntegrationIcon: React.FC<{ imgUrl: string }> = ({ imgUrl }) => {
+    return (
+        <img className="integration-icon" src={imgUrl} alt='logo' />
+    )
+}
+
+const IntegrationCard: React.FC<{ name: string, imgUrl: string, disabled?: boolean }> = ({ name, imgUrl, disabled }) => {
+
+    return (
+        <div
+            className={cx(`${BLOCK}`, { [`${BLOCK}--disabled`]: disabled })}
+            title={disabled ? '正在接入中...' : undefined}
+            onClick={() => { }}
+        >
+            <div>
+                <IntegrationIcon imgUrl={imgUrl} />
+            </div>
+            <div className={`${BLOCK}__name`}>{name}</div>
+        </div>
+    )
+};
+
+export default IntegrationCard;