58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
|
import { Button, Empty } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
import { trpc } from '../../../api/trpc';
|
||
|
|
import { MonitorHealthBar } from '../MonitorHealthBar';
|
||
|
|
import { useAllowEdit } from './useAllowEdit';
|
||
|
|
|
||
|
|
interface MonitorStatusPageProps {
|
||
|
|
slug: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
|
||
|
|
(props) => {
|
||
|
|
const { slug } = props;
|
||
|
|
|
||
|
|
const { data: info } = trpc.monitor.getPageInfo.useQuery({
|
||
|
|
slug,
|
||
|
|
});
|
||
|
|
|
||
|
|
const allowEdit = useAllowEdit(info?.workspaceId);
|
||
|
|
|
||
|
|
const monitorList = info?.monitorList ?? [];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-4/5 mx-auto py-8 ">
|
||
|
|
<div className="text-2xl mb-4">{info?.title}</div>
|
||
|
|
|
||
|
|
<div>{allowEdit && <Button type="primary">Edit</Button>}</div>
|
||
|
|
|
||
|
|
<div className="text-lg mb-2">Services</div>
|
||
|
|
|
||
|
|
{info && (
|
||
|
|
<div className="shadow-2xl p-2.5">
|
||
|
|
{monitorList.length > 0 ? (
|
||
|
|
monitorList.map((item) => (
|
||
|
|
<div
|
||
|
|
key={item.id}
|
||
|
|
className="hover:bg-black hover:bg-opacity-20"
|
||
|
|
>
|
||
|
|
<MonitorHealthBar
|
||
|
|
workspaceId={info.workspaceId}
|
||
|
|
monitorId={item.id}
|
||
|
|
count={40}
|
||
|
|
size="large"
|
||
|
|
showCurrentStatus={true}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
) : (
|
||
|
|
<Empty description="No any monitor has been set" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
MonitorStatusPage.displayName = 'MonitorStatusPage';
|