48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { Card, List, Tag, Typography } from "antd";
|
|
import { getAdminDiagnostics } from "../api/adminApi";
|
|
|
|
export function AdminDiagnosticsPanel(): JSX.Element {
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ["admin-diagnostics"],
|
|
queryFn: getAdminDiagnostics
|
|
});
|
|
|
|
if (isLoading || !data) {
|
|
return <p className="wesp-admin-block">Loading diagnostics...</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="wesp-admin-grid">
|
|
<Typography.Title level={4} style={{ margin: 0 }}>
|
|
Diagnostics
|
|
</Typography.Title>
|
|
<Card>
|
|
<List
|
|
dataSource={data.checks}
|
|
renderItem={(check) => (
|
|
<List.Item key={check.id}>
|
|
<List.Item.Meta
|
|
title={check.message}
|
|
description={
|
|
<Tag
|
|
className={
|
|
check.status === "ok"
|
|
? "wesp-tag wesp-tag--ok"
|
|
: check.status === "warn"
|
|
? "wesp-tag wesp-tag--warn"
|
|
: "wesp-tag wesp-tag--error"
|
|
}
|
|
>
|
|
{check.status}
|
|
</Tag>
|
|
}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|