130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
import React from "react";
|
|
import {Panel} from "../../components/panel";
|
|
import {AppList} from "../../components/AppList";
|
|
import {AppModel, EventDataModel, EventModel} from "../../../model";
|
|
import {appList, appEventList, appEventDataList} from "../../service/api.app";
|
|
import './style.scss'
|
|
import {Space, Table} from "@douyinfe/semi-ui";
|
|
import {formatDate} from "../../../utils/date";
|
|
import {useInterval} from "ahooks";
|
|
|
|
export const DashboardIndex: React.FC = () => {
|
|
// 数据
|
|
const [apps, setApps] = React.useState<AppModel[]>([]);
|
|
const [currentAppID, setCurrentAppID] = React.useState<number>(0);
|
|
const [events, setEvents] = React.useState<EventModel[]>([]);
|
|
const [eventDataList, setEventDataList] = React.useState<EventDataModel[]>([]);
|
|
const [page, setPage] = React.useState<number>(1);
|
|
const [dataTotal, setDataTotal] = React.useState<number>(0);
|
|
|
|
const eventDataColumns = [
|
|
{
|
|
title: '编号',
|
|
dataIndex: 'id',
|
|
width: 60
|
|
},
|
|
{
|
|
title: '事件',
|
|
dataIndex: 'title',
|
|
width: 80
|
|
},
|
|
{
|
|
title: '路径',
|
|
dataIndex: 'path',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '访问者浏览器',
|
|
ellipsis: true,
|
|
dataIndex: 'browser'
|
|
},
|
|
{
|
|
title: '来源',
|
|
dataIndex: 'ip',
|
|
width: 80
|
|
},
|
|
{
|
|
title: '分辨率',
|
|
dataIndex: 'resolution',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '日期',
|
|
dataIndex: 'create_time',
|
|
render: (text: string) => formatDate(text),
|
|
width: 180
|
|
},
|
|
]
|
|
// 加载应用所有的事件
|
|
const getAppEvents = () => {
|
|
appEventList(currentAppID).then(list => setEvents(list))
|
|
}
|
|
|
|
// 加载引用所有事件上报的数据
|
|
const loadAppEventsAndDataList = (page = 1) => {
|
|
if (currentAppID < 1) return;
|
|
appEventDataList({
|
|
appId: currentAppID,
|
|
pageSize: 10,
|
|
page
|
|
}).then(list => {
|
|
setEventDataList(list)
|
|
setPage(page)
|
|
})
|
|
}
|
|
|
|
const getAppEventAndData = () => {
|
|
if (currentAppID > 0) {
|
|
getAppEvents()
|
|
loadAppEventsAndDataList()
|
|
}
|
|
}
|
|
// 10s 自动刷新
|
|
useInterval(loadAppEventsAndDataList, 10000)
|
|
|
|
React.useEffect(() => {
|
|
appList().then(list => setApps(list))
|
|
}, [])
|
|
React.useEffect(getAppEventAndData, [currentAppID])
|
|
|
|
|
|
return (
|
|
<div className="dashboard container">
|
|
<div>
|
|
<h1 className="page-title">Dashboard</h1>
|
|
</div>
|
|
|
|
<Panel title="我的应用" noPadding>
|
|
<AppList
|
|
list={apps}
|
|
onItemClick={(it) => setCurrentAppID(it.id)}
|
|
/>
|
|
</Panel>
|
|
{currentAppID > 0 && <>
|
|
<Panel title="事件列表" noPadding>
|
|
<div className="app-list-wrapper">
|
|
{events.map(it => (
|
|
<div key={it.id} className="list-link-item flex space-between">
|
|
<Space className="space">
|
|
<span>{it.id}</span>
|
|
<span>{it.title}</span>
|
|
</Space>
|
|
<span>查看</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
<Panel title="事件数据" noPadding>
|
|
<Table columns={eventDataColumns} dataSource={eventDataList} pagination={{
|
|
currentPage: page,
|
|
pageSize: 10,
|
|
total: dataTotal,
|
|
onPageChange: loadAppEventsAndDataList,
|
|
hideOnSinglePage: true
|
|
}}/>
|
|
</Panel>
|
|
</>}
|
|
</div>
|
|
);
|
|
};
|