mirror of
https://github.com/gethomepage/homepage.git
synced 2026-01-03 05:32:11 +08:00
ff27b1ef51
If data.health is an empty string, ?? will accept it and not use the right side value; instead, we should use || which treats empty string as false and returns the right side value. This will show "RUNNING" in the status box if health is "".
53 lines
2.2 KiB
JavaScript
53 lines
2.2 KiB
JavaScript
import { useTranslation } from "react-i18next";
|
|
import useSWR from "swr";
|
|
|
|
export default function Status({ service }) {
|
|
const { t } = useTranslation();
|
|
|
|
const { data, error } = useSWR(`/api/docker/status/${service.container}/${service.server || ""}`);
|
|
|
|
if (error) {
|
|
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.status}>
|
|
<div className="text-[8px] font-bold text-rose-500/80 uppercase">{t("docker.error")}</div>
|
|
</div>
|
|
}
|
|
|
|
if (data && data.status === "running") {
|
|
if (data.health === "starting") {
|
|
return (
|
|
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.health}>
|
|
<div className="text-[8px] font-bold text-blue-500/80 uppercase">{data.health}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (data.health === "unhealthy") {
|
|
return (
|
|
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.health}>
|
|
<div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{data.health}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.health || data.status}>
|
|
<div className="text-[8px] font-bold text-emerald-500/80 uppercase">{data.health || data.status}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (data && (data.status === "not found" || data.status === "exited")) {
|
|
return (
|
|
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.status}>
|
|
<div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{data.status}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden">
|
|
<div className="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("docker.unknown")}</div>
|
|
</div>
|
|
);
|
|
}
|