File size: 1,346 Bytes
b4fbe2e d9ce58c b4fbe2e d9ce58c b4fbe2e d9ce58c b4fbe2e d9ce58c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import React from "react";
import { Box, Typography } from "@mui/material";
import { styled } from "@mui/system";
import { useServiceStatus } from "../contexts/ServiceStatusContext";
const StatusDot = styled("div")(({ status }) => ({
width: 8,
height: 8,
borderRadius: "50%",
backgroundColor:
status === "healthy"
? "#4caf50"
: status === "unhealthy"
? "#f44336"
: "#9e9e9e",
marginRight: 8,
}));
const ServiceLabel = styled(Box)({
display: "flex",
alignItems: "center",
marginRight: 16,
"& .MuiTypography-root": {
fontSize: "0.75rem",
color: "rgba(255, 255, 255, 0.7)",
},
});
export function ServiceStatus() {
const { services } = useServiceStatus();
return (
<Box
sx={{
position: "absolute",
top: 16,
left: 16,
display: "flex",
alignItems: "center",
zIndex: 1000,
}}
>
{Object.entries(services).map(([service, { status, latency, error }]) => (
<ServiceLabel key={service}>
<StatusDot status={status} />
<Typography>
{service.charAt(0).toUpperCase() + service.slice(1)}
{/* {status === "healthy" && latency && ` (${latency}ms)`} */}
{/* {error && ` - ${error}`} */}
</Typography>
</ServiceLabel>
))}
</Box>
);
}
|