You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.0 KiB
71 lines
2.0 KiB
import useSWR from "swr";
|
|
import { calculateCPUPercent, formatBytes } from "utils/stats-helpers";
|
|
import Stat from "./stat";
|
|
|
|
export default function Stats({ service }) {
|
|
// fast
|
|
const { data: statusData, error: statusError } = useSWR(
|
|
`/api/docker/status/${service.container}/${service.server || ""}`,
|
|
{
|
|
refreshInterval: 1500,
|
|
}
|
|
);
|
|
|
|
// takes a full second to collect stats
|
|
const { data: statsData, error: statsError } = useSWR(
|
|
`/api/docker/stats/${service.container}/${service.server || ""}`,
|
|
{
|
|
refreshInterval: 1500,
|
|
}
|
|
);
|
|
|
|
// handle errors first
|
|
if (statsError || statusError) {
|
|
return (
|
|
<div className="flex flex-row w-full">
|
|
<Stat label="STATUS" value="Error Fetching Data" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// handle the case where we get a docker error
|
|
if (statusData.status !== "running") {
|
|
return (
|
|
<div className="flex flex-row w-full">
|
|
<Stat label="STATUS" value="Error Fetching Data" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// handle the case where the container is offline
|
|
if (statusData.status !== "running") {
|
|
return (
|
|
<div className="flex flex-row w-full">
|
|
<Stat label="STATUS" value="Offline" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// handle the case where we don't have anything yet
|
|
if (!statsData || !statusData) {
|
|
return (
|
|
<div className="flex flex-row w-full">
|
|
<Stat label="CPU" value="-" />
|
|
<Stat label="MEM" value="-" />
|
|
<Stat label="RX" value="-" />
|
|
<Stat label="TX" value="-" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// we have stats and the container is running
|
|
return (
|
|
<div className="flex flex-row w-full">
|
|
<Stat label="CPU" value={calculateCPUPercent(statsData.stats) + "%"} />
|
|
<Stat label="MEM" value={formatBytes(statsData.stats.memory_stats.usage, 0)} />
|
|
<Stat label="RX" value={formatBytes(statsData.stats.networks.eth0.rx_bytes, 0)} />
|
|
<Stat label="TX" value={formatBytes(statsData.stats.networks.eth0.tx_bytes, 0)} />
|
|
</div>
|
|
);
|
|
}
|