schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add monitor event list into monitor info page

Browse Source
This commit is contained in:
moonrailgun 2023-10-25 00:29:47 +08:00
parent 111cf2f0eb
commit 7f014b539e
5 changed files with 61 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/client/components/monitor/MonitorInfo.tsx
View File

@ -15,6 +15,7 @@ import { ErrorTip } from '../ErrorTip';
import { ColorTag } from '../ColorTag'; import { ColorTag } from '../ColorTag';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import { MonitorStatsBlock } from './MonitorStatsBlock'; import { MonitorStatsBlock } from './MonitorStatsBlock';
import { MonitorEventList } from './MonitorEventList';
interface MonitorInfoProps { interface MonitorInfoProps {
monitorId: string; monitorId: string;
@ -43,62 +44,66 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
} }
return ( return (
<Spin spinning={isLoading}> <div className="w-full h-full overflow-auto">
<Space className="w-full" direction="vertical"> <Spin spinning={isLoading}>
<div className="flex justify-between"> <Space direction="vertical">
<Space direction="vertical"> <div className="flex justify-between">
<div className="text-2xl">{monitorInfo.name}</div> <Space direction="vertical">
<div className="text-2xl">{monitorInfo.name}</div>
<div> <div>
<ColorTag label={monitorInfo.type} /> <ColorTag label={monitorInfo.type} />
<span> <span>
{getMonitorLink(monitorInfo as any as MonitorInfoType)} {getMonitorLink(monitorInfo as any as MonitorInfoType)}
</span> </span>
</div>
</Space>
<div className="text-black text-opacity-75">
Monitored for {dayjs().diff(dayjs(monitorInfo.createdAt), 'days')}{' '}
days
</div> </div>
</Space>
<div className="text-black text-opacity-75">
Monitored for {dayjs().diff(dayjs(monitorInfo.createdAt), 'days')}{' '}
days
</div> </div>
</div>
<div> <div>
<Button <Button
type="primary" type="primary"
onClick={() => { onClick={() => {
navigate(`/monitor/${monitorInfo.id}/edit`); navigate(`/monitor/${monitorInfo.id}/edit`);
}} }}
> >
Edit Edit
</Button> </Button>
</div> </div>
<Card> <Card>
<MonitorHealthBar <MonitorHealthBar
monitorId={monitorId} monitorId={monitorId}
count={40} count={40}
size="large" size="large"
showCurrentStatus={true} showCurrentStatus={true}
onBeatsItemUpdate={(items) => { onBeatsItemUpdate={(items) => {
setCurrentResponse(last(items)?.value ?? 0); setCurrentResponse(last(items)?.value ?? 0);
}} }}
/> />
</Card> </Card>
<Card> <Card>
<MonitorDataMetrics <MonitorDataMetrics
monitorId={monitorId} monitorId={monitorId}
monitorType={monitorInfo.type} monitorType={monitorInfo.type}
currectResponse={currectResponse} currectResponse={currectResponse}
/> />
</Card> </Card>
<Card> <Card>
<MonitorDataChart monitorId={monitorId} /> <MonitorDataChart monitorId={monitorId} />
</Card> </Card>
</Space>
</Spin> <MonitorEventList monitorId={monitorId} />
</Space>
</Spin>
</div>
); );
}); });
MonitorInfo.displayName = 'MonitorInfo'; MonitorInfo.displayName = 'MonitorInfo';

4
src/client/pages/Layout.tsx
View File

@ -71,8 +71,8 @@ export const Layout: React.FC = React.memo(() => {
</div> </div>
</div> </div>
)} )}
<div className="flex-1 w-full px-4"> <div className="flex-1 w-full px-4 overflow-hidden">
<div className="max-w-7xl m-auto h-full"> <div className="max-w-7xl m-auto h-full overflow-auto">
<Outlet /> <Outlet />
</div> </div>
</div> </div>

2
src/client/pages/Monitor/Detail.tsx
View File

@ -11,7 +11,7 @@ export const MonitorDetail: React.FC = React.memo(() => {
} }
return ( return (
<div className="px-2"> <div className="px-2 h-full">
<MonitorInfo monitorId={monitorId} /> <MonitorInfo monitorId={monitorId} />
</div> </div>
); );

4
src/client/pages/Monitor/index.tsx
View File

@ -11,7 +11,7 @@ export const MonitorPage: React.FC = React.memo(() => {
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="flex-1"> <div>
<div className="px-4 pt-4"> <div className="px-4 pt-4">
<div <div
className="px-3 py-2 rounded-full bg-green-400 hover:bg-green-500 text-white inline-block cursor-pointer" className="px-3 py-2 rounded-full bg-green-400 hover:bg-green-500 text-white inline-block cursor-pointer"
@ -21,7 +21,7 @@ export const MonitorPage: React.FC = React.memo(() => {
</div> </div>
</div> </div>
</div> </div>
<div className="py-5 flex h-full"> <div className="py-5 flex flex-1 overflow-hidden">
<div className="w-5/12 bg-gray-50"> <div className="w-5/12 bg-gray-50">
<MonitorList /> <MonitorList />
</div> </div>

4
src/server/model/monitor/index.ts
View File

@ -156,7 +156,7 @@ class MonitorRunner {
if (value < 0 && currentStatus === 'UP') { if (value < 0 && currentStatus === 'UP') {
await prisma.monitorEvent.create({ await prisma.monitorEvent.create({
data: { data: {
message: `Monitor ${monitor.name} has been down`, message: `Monitor [${monitor.name}] has been down`,
monitorId: monitor.id, monitorId: monitor.id,
type: 'DOWN', type: 'DOWN',
}, },
@ -170,7 +170,7 @@ class MonitorRunner {
} else if (value > 0 && currentStatus === 'DOWN') { } else if (value > 0 && currentStatus === 'DOWN') {
await prisma.monitorEvent.create({ await prisma.monitorEvent.create({
data: { data: {
message: `Monitor ${monitor.name} has been up`, message: `Monitor [${monitor.name}] has been up`,
monitorId: monitor.id, monitorId: monitor.id,
type: 'UP', type: 'UP',
}, },