dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-09 14:58:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Enhancement: statusStyle improvements (#2119)

Browse source
This commit is contained in:
shamoon 2023-10-04 22:12:57 -07:00 • committed by GitHub
parent 861ab32ca3
commit 571f627b3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/components/services/kubernetes-status.jsx
View file

@ -1,35 +1,42 @@
import useSWR from "swr";
import { t } from "i18next";
export default function KubernetesStatus({ service }) {
export default function KubernetesStatus({ service, style }) {
const podSelectorString = service.podSelector !== undefined ? `podSelector=${service.podSelector}` : "";
const { data, error } = useSWR(`/api/kubernetes/status/${service.namespace}/${service.app}?${podSelectorString}`);
let statusLabel = t("docker.unknown");
let statusTitle = "";
let backgroundClass = "px-1.5 py-0.5 bg-theme-500/10 dark:bg-theme-900/50";
let colorClass = "text-black/20 dark:text-white/40 ";
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 k8s-status-error" title={t("docker.error")}>
<div className="text-[8px] font-bold text-rose-500/80 uppercase">{t("docker.error")}</div>
</div>
statusTitle = t("docker.error");
statusLabel = statusTitle;
colorClass = "text-rose-500/80";
} else if (data) {
if (data.status === "running") {
statusTitle = data.health ?? data.status;
statusLabel = statusTitle;
colorClass = "text-emerald-500/80";
}
if (data.status === "not found" || data.status === "down" || data.status === "partial") {
statusTitle = data.status;
statusLabel = statusTitle;
colorClass = "text-orange-400/50 dark:text-orange-400/80";
}
}
if (data && data.status === "running") {
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 k8s-status" 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 === "down" || data.status === "partial")) {
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 k8s-status-warning" title={data.status}>
<div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{data.status}</div>
</div>
);
if (style === 'dot') {
colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
backgroundClass = "p-3 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
}
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 k8s-status-unknown">
<div className="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("docker.unknown")}</div>
<div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] k8s-status`} title={statusTitle}>
{style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
{style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
</div>
);
}