AppDetail

Author: robberphex

opensergo-dashboard-ui/src/App.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import './App.css';
-import {IRoutableItemDescriptor} from "@alicloud/console-components-console-menu";
+import { IRoutableItemDescriptor } from "@alicloud/console-components-console-menu";
 import RoutableMenu from "@alicloud/console-components-console-menu/lib/RoutableMenu";
 import AppLayout from "@alicloud/console-components-app-layout";
 
 
 import "@alicloud/console-components/dist/wind.css";
-import {Redirect, Route, Switch} from "dva/router";
+import { Redirect, Route, Switch } from "dva/router";
 import AppList from "./AppList";
 import AppDetail from "./page/AppDetail";
 
 
 const items: IRoutableItemDescriptor[] = [
     // {key: '/home', to: '/', label: '概览'},
-    {key: '/application', to: '/application', label: '应用列表'},
+    { key: '/application', to: '/application', label: '应用列表' },
 ];
 
 const Nav = () => (
@@ -25,26 +25,21 @@ const Nav = () => (
 
 function App() {
     return (
-        <Switch>
-            <Route path="/application/:appName">
-                <AppDetail />
-            </Route>
-            <Route path="/">
-                <AppLayout
-                    nav={<Nav/>}
-                >
-                    <Switch>
-                        <Route path="/application">
-                            <AppList/>
-                        </Route>
-                        <Route path="/">
-                            <Redirect to={'/application'}/>
-                        </Route>
-                    </Switch>
-                </AppLayout>
-
-            </Route>
-        </Switch>
+        <AppLayout
+            nav={<Nav />}
+        >
+            <Switch>
+                <Route path="/application/:appName">
+                    <AppDetail  />
+                </Route>
+                <Route path="/application">
+                    <AppList />
+                </Route>
+                <Route path="/">
+                    <Redirect to={'/application'} />
+                </Route>
+            </Switch>
+        </AppLayout>
     );
 }
 

opensergo-dashboard-ui/src/page/AppDetail.tsx

@@ -1,74 +1,50 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import axios from "axios";
+import { useParams } from 'dva/router'
+
 import Page from "@alicloud/console-components-page";
 import Table from "@alicloud/console-components-table";
-import {Badge, Button} from "@alicloud/console-components";
-import {LinkButton} from "@alicloud/console-components-actions";
+import { Badge, Button } from "@alicloud/console-components";
+import { LinkButton } from "@alicloud/console-components-actions";
+
 
 const AppDetail: React.FC<{}> = () => {
-    const [appList, setAppList] = useState([]);
+    console.log("useParams", useParams);
+    const params = useParams();
+    console.log("params", params);
+
+    const [appItem, setAppItem] = useState("");
     useEffect(() => {
         fetchAppList();
     }, []);
     // 这个是分页接口，但是需要拿到全部数据
     const fetchAppList = async () => {
-        const data = await axios.get('/api/application/getApplicationList')
+        const data = await axios.get('/api/application/describeApplication', { params: { appName: 'example-spring-cloud' } })
             .then(function (response) {
-                return response?.data?.data;
+                return response?.data;
             });
-        setAppList(data);
+        setAppItem(data.appName);
     };
 
     return (
         <Page>
-            <Page.Header title="应用列表"/>
+            <Page.Header title="应用详情" />
             <Page.Content>
-                <Table
-                    exact
-                    fixedBarExpandWidth={[24]}
-                    affixActionBar
-                    dataSource={appList}
-                    primaryKey="appName"
-                    search={{
-                        filter: [
-                            {
-                                value: 'AppName',
-                                label: '应用名称',
-                            },
-                        ],
-                        defaultValue: 'AppName',
-                    }}
-                    pagination={{
-                        current: 1,
-                        total: 80,
-                        pageSize: 20,
-                    }}
-                    selection={({selectedRowKeys}: any) => (
-                        <>
-                            <Badge count={selectedRowKeys.length}>
-                                <Button disabled={selectedRowKeys.length === 0}>
-                                    Delete
-                                </Button>
-                            </Badge>
-                        </>
-                    )}
-                >
-                    <Table.Column title="应用名" cell={render} width={200}/>
-                </Table>
+                {appItem}
             </Page.Content>
         </Page>
     )
 }
 
 
-const render = (value :any, index:any, record:any) => {
+const render = (value: any, index: any, record: any) => {
     console.log(value, index, record);
     return (
         <LinkButton
             href={`https://baidu.com`}
-            // onClick={() => {
-            //     alert("on click");
-            // }}
+        // onClick={() => {
+        //     alert("on click");
+        // }}
         >
             {record.appName}
         </LinkButton>