2023-10-17 20:26:28 +08:00
|
|
|
import React from 'react';
|
|
|
|
import { trpc } from '../../api/trpc';
|
|
|
|
import { useCurrentWorkspaceId } from '../../store/user';
|
|
|
|
import clsx from 'clsx';
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
import { Card, Empty } from 'antd';
|
|
|
|
import { useNavigate } from 'react-router';
|
|
|
|
|
|
|
|
interface MonitorEventListProps {
|
|
|
|
monitorId?: string;
|
|
|
|
}
|
|
|
|
export const MonitorEventList: React.FC<MonitorEventListProps> = React.memo(
|
|
|
|
(props) => {
|
|
|
|
const workspaceId = useCurrentWorkspaceId();
|
|
|
|
const { data = [], isLoading } = trpc.monitor.events.useQuery({
|
|
|
|
workspaceId,
|
|
|
|
monitorId: props.monitorId,
|
|
|
|
});
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
|
|
|
if (isLoading === false && data.length === 0) {
|
|
|
|
return <Empty />;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2023-10-21 14:54:33 +08:00
|
|
|
<div className="space-y-4">
|
2023-10-17 20:26:28 +08:00
|
|
|
{data.map((item) => (
|
|
|
|
<Card
|
|
|
|
key={item.id}
|
|
|
|
className="min-h-[60px]"
|
|
|
|
hoverable={true}
|
|
|
|
onClick={() => {
|
|
|
|
navigate(`/monitor/${item.monitorId}`);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className="flex items-center w-full gap-2">
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
'min-w-[62px] py-1 px-2 rounded-full text-white inline-block text-center',
|
|
|
|
item.type === 'UP'
|
|
|
|
? 'bg-green-400'
|
|
|
|
: item.type === 'DOWN'
|
|
|
|
? 'bg-red-500'
|
|
|
|
: 'bg-amber-400'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{item.type}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="text-black text-opacity-60">
|
|
|
|
{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>{item.message}</div>
|
|
|
|
</div>
|
|
|
|
</Card>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
MonitorEventList.displayName = 'MonitorEventList';
|