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

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

@ -15,6 +15,7 @@ import { ErrorTip } from '../ErrorTip';
import { ColorTag } from '../ColorTag';
import { useNavigate } from 'react-router';
import { MonitorStatsBlock } from './MonitorStatsBlock';
import { MonitorEventList } from './MonitorEventList';
interface MonitorInfoProps {
monitorId: string;
@ -43,8 +44,9 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
}
return (
<div className="w-full h-full overflow-auto">
<Spin spinning={isLoading}>
<Space className="w-full" direction="vertical">
<Space direction="vertical">
<div className="flex justify-between">
<Space direction="vertical">
<div className="text-2xl">{monitorInfo.name}</div>
@ -97,8 +99,11 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
<Card>
<MonitorDataChart monitorId={monitorId} />
</Card>
<MonitorEventList monitorId={monitorId} />
</Space>
</Spin>
</div>
);
});
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 className="flex-1 w-full px-4">
<div className="max-w-7xl m-auto h-full">
<div className="flex-1 w-full px-4 overflow-hidden">
<div className="max-w-7xl m-auto h-full overflow-auto">
<Outlet />
</div>
</div>

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

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

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

@ -11,7 +11,7 @@ export const MonitorPage: React.FC = React.memo(() => {
return (
<div className="h-full flex flex-col">
<div className="flex-1">
<div>
<div className="px-4 pt-4">
<div
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 className="py-5 flex h-full">
<div className="py-5 flex flex-1 overflow-hidden">
<div className="w-5/12 bg-gray-50">
<MonitorList />
</div>

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

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