|
@@ -6,79 +6,45 @@ import { useMount } from 'ahooks'
|
|
|
import api from '../api/api'
|
|
|
import { useEffect, useState } from 'react';
|
|
|
import timestampToTime from '@/utils';
|
|
|
+import { useHistory, useLocation, useParams, useRouteMatch, withRouter } from 'umi';
|
|
|
const { TabPane } = Tabs;
|
|
|
const { SubMenu } = Menu;
|
|
|
const { Column, ColumnGroup } = Table;
|
|
|
const { Header, Content, Sider } = Layout;
|
|
|
type Detail = {
|
|
|
- Detail:string
|
|
|
- Env:string
|
|
|
- Host:string
|
|
|
- Port:number
|
|
|
- ServiceName:string
|
|
|
- UpTime:number
|
|
|
- Version?:string
|
|
|
+ Detail: string
|
|
|
+ Env: string
|
|
|
+ Host: string
|
|
|
+ Port: number
|
|
|
+ ServiceName: string
|
|
|
+ UpTime: number
|
|
|
+ Version?: string
|
|
|
}
|
|
|
const data: Detail[] = [
|
|
|
- {
|
|
|
- Detail: "",
|
|
|
- Env: "qa",
|
|
|
- Host: "127.0.0.1",
|
|
|
- Port: 6910,
|
|
|
- ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
|
|
|
- UpTime: 1649995051,
|
|
|
- Version: "",
|
|
|
- },{
|
|
|
- Detail: "",
|
|
|
- Env: "qa",
|
|
|
- Host: "127.0.0.1",
|
|
|
- Port: 6910,
|
|
|
- ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
|
|
|
- UpTime: 1649995051,
|
|
|
- Version: ""
|
|
|
- },{
|
|
|
- Detail: "",
|
|
|
- Env: "qa",
|
|
|
- Host: "127.0.0.1",
|
|
|
- Port: 6910,
|
|
|
- ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
|
|
|
- UpTime: 1649995051,
|
|
|
- Version: ""
|
|
|
- },
|
|
|
-];
|
|
|
-const data2: Detail[] = data.map(item => {return {...item,Env:'dev'}})
|
|
|
-const data3: Detail[] = data.map(item => {return {...item,Env:'qa1'}})
|
|
|
-const data4: Detail[] = data.map(item => {return {...item,Env:'prod'}})
|
|
|
-const tabsList = [
|
|
|
- {
|
|
|
- name: 'qa',
|
|
|
- key: 'qa',
|
|
|
- list: data
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'dev',
|
|
|
- key: 'dev',
|
|
|
- list: data2
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'qa1',
|
|
|
- key: 'qa1',
|
|
|
- list: data3
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'prod',
|
|
|
- key: 'prod',
|
|
|
- list: data4
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // Detail: "",
|
|
|
+ // Env: "qa",
|
|
|
+ // Host: "127.0.0.1",
|
|
|
+ // Port: 6910,
|
|
|
+ // ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
|
|
|
+ // UpTime: 1649995051,
|
|
|
+ // Version: "",
|
|
|
+ // },
|
|
|
];
|
|
|
+const data2: Detail[] = data.map(item => { return { ...item, Env: 'dev' } })
|
|
|
+const data3: Detail[] = data.map(item => { return { ...item, Env: 'qa1' } })
|
|
|
+const data4: Detail[] = data.map(item => { return { ...item, Env: 'prod' } })
|
|
|
export default function IndexPage() {
|
|
|
- const [key,setKey] = useState('qa')
|
|
|
- const [list,setList] = useState(data)
|
|
|
- const [label,setLabel] = useUrlState({ count: tabsList[0].name })
|
|
|
- useMount(()=>{
|
|
|
- setLabel({ count: label.count ? label.count : tabsList[0].name })
|
|
|
- setKey(label.count ? label.count : tabsList[0].key)
|
|
|
+ const [key, setKey] = useState('qa')
|
|
|
+ const [list, setList] = useState(data)
|
|
|
+ const [tabsList, setTabsList] = useState([])
|
|
|
+ const [label, setLabel] = useUrlState()
|
|
|
+ useMount(() => {
|
|
|
+ initData()
|
|
|
})
|
|
|
+ const params = useRouteMatch();
|
|
|
+ const location = useLocation();
|
|
|
+
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '服务名称',
|
|
@@ -99,26 +65,33 @@ export default function IndexPage() {
|
|
|
{
|
|
|
title: '上线时间',
|
|
|
dataIndex: 'UpTime',
|
|
|
- render: (text:number) => <a>{timestampToTime(text)}</a>
|
|
|
+ render: (text: number) => <a>{timestampToTime(text)}</a>
|
|
|
},
|
|
|
{
|
|
|
title: '备注',
|
|
|
dataIndex: 'Detail',
|
|
|
},
|
|
|
];
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- api.testApi().then((res) => {
|
|
|
- console.log(res);
|
|
|
- })
|
|
|
- })
|
|
|
|
|
|
- const tabChange = (index:string) => {
|
|
|
+
|
|
|
+ const initData = async () => {
|
|
|
+ const tabs = await api.getenvsApi()
|
|
|
+ const env = location.search.slice(5)
|
|
|
+ const grpcList = await api.getGrpclist(env ? env : tabs[0])
|
|
|
+ setTabsList(tabs)
|
|
|
+ setList(grpcList)
|
|
|
+ env && setLabel({ env })
|
|
|
+ setKey(env ? env : tabs[0])
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const tabChange = async (index: string) => {
|
|
|
setKey(index)
|
|
|
- const instance = tabsList.find(item=>item.key === index)
|
|
|
- if(instance){
|
|
|
- setList(instance.list)
|
|
|
- setLabel({ count: instance.name})
|
|
|
+ const instance = tabsList.find(item => item === index)
|
|
|
+ if (instance) {
|
|
|
+ const grpcList = await api.getGrpclist(instance)
|
|
|
+ setList(grpcList)
|
|
|
+ setLabel({ env: instance })
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -129,8 +102,8 @@ export default function IndexPage() {
|
|
|
<Tabs defaultActiveKey={key} activeKey={key} onChange={tabChange}>
|
|
|
{tabsList.map((item) => {
|
|
|
return (
|
|
|
- <TabPane tab={item.name} key={item.key} >
|
|
|
-
|
|
|
+ <TabPane tab={item} key={item} >
|
|
|
+
|
|
|
</TabPane>
|
|
|
)
|
|
|
})}
|
|
@@ -139,6 +112,7 @@ export default function IndexPage() {
|
|
|
columns={columns}
|
|
|
dataSource={list}
|
|
|
key="tablekey11"
|
|
|
+ pagination={{pageSize: 100}}
|
|
|
>
|
|
|
</Table>
|
|
|
</div>
|