open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhancement: statusStyle improvements (#2119)

Browse Source
pull/2129/head
shamoon 1 year ago 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
Show Stats Download Patch File Download Diff File

9
docs/configs/services.md
Unescape View File

@ -123,14 +123,7 @@ Services may have an optional `ping` property that allows you to monitor the ava
<img width="1038" alt="Ping" src="https://github.com/benphelps/homepage/assets/88257202/7bc13bd3-0d0b-44e3-888c-a20e069a3233"> <img width="1038" alt="Ping" src="https://github.com/benphelps/homepage/assets/88257202/7bc13bd3-0d0b-44e3-888c-a20e069a3233">
You can also apply different styles to the ping indicator by using the `statusStyle` property. The default is no value, and displays the response time in ms, but you can also use `dot` or `basic`. `dot` shows a green dot for a successful ping, and `basic` shows either ONLINE or OFFLINE to match the status style of Docker containers. For example: You can also apply different styles to the ping indicator by using the `statusStyle` property, see [settings](settings.md#status-style).
```yaml
- Sonarr:
...
ping: http://sonarr.host/
statusStyle: dot
```
## Docker Integration ## Docker Integration

24
docs/configs/settings.md
Unescape View File

@ -380,6 +380,30 @@ or per-service (`services.yaml`) with:
If you have both set the per-service settings take precedence. If you have both set the per-service settings take precedence.
## Status Style
You can choose from the following styles for docker or k8s status and ping: `dot` or `basic`
- The default is no value, and displays the ping response time in ms and the docker / k8s container status
- `dot` shows a green dot for a successful ping or healthy status.
- `basic` shows either UP or DOWN for ping
For example:
```yaml
statusStyle: 'dot'
```
or per-service (`services.yaml`) with:
```yaml
- Example Service:
...
statusStyle: 'dot'
```
If you have both set, the per-service settings take precedence.
## Hide Widget Error Messages ## Hide Widget Error Messages
Hide the visible API error messages either globally in `settings.yaml`: Hide the visible API error messages either globally in `settings.yaml`:

4
public/locales/en/common.json
Unescape View File

@ -80,7 +80,9 @@
}, },
"ping": { "ping": {
"error": "Error", "error": "Error",
"ping": "Ping" "ping": "Ping",
"down": "Down",
"up": "Up"
}, },
"emby": { "emby": {
"playing": "Playing", "playing": "Playing",

9
src/components/services/item.jsx
Unescape View File

@ -15,6 +15,7 @@ export default function Item({ service, group }) {
const hasLink = service.href && service.href !== "#"; const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
const showStats = (service.showStats === false) ? false : settings.showStats; const showStats = (service.showStats === false) ? false : settings.showStats;
const statusStyle = (service.statusStyle !== undefined) ? service.statusStyle : settings.statusStyle;
const [statsOpen, setStatsOpen] = useState(service.showStats); const [statsOpen, setStatsOpen] = useState(service.showStats);
const [statsClosing, setStatsClosing] = useState(false); const [statsClosing, setStatsClosing] = useState(false);
@ -76,10 +77,10 @@ export default function Item({ service, group }) {
</div> </div>
)} )}
<div className="absolute top-0 right-0 flex flex-row justify-end gap-2 mr-2 z-30 service-tags"> <div className={`absolute top-0 right-0 flex flex-row justify-end ${statusStyle === 'dot' ? 'gap-0' : 'gap-2'} mr-2 z-30 service-tags`}>
{service.ping && ( {service.ping && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-ping"> <div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
<Ping group={group} service={service.name} style={service.statusStyle} /> <Ping group={group} service={service.name} style={statusStyle} />
<span className="sr-only">Ping status</span> <span className="sr-only">Ping status</span>
</div> </div>
)} )}
@ -90,7 +91,7 @@ export default function Item({ service, group }) {
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))} onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats" className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
> >
<Status service={service} /> <Status service={service} style={statusStyle} />
<span className="sr-only">View container stats</span> <span className="sr-only">View container stats</span>
</button> </button>
)} )}
@ -100,7 +101,7 @@ export default function Item({ service, group }) {
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))} onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app" className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
> >
<KubernetesStatus service={service} /> <KubernetesStatus service={service} style={statusStyle} />
<span className="sr-only">View container stats</span> <span className="sr-only">View container stats</span>
</button> </button>
)} )}

45
src/components/services/kubernetes-status.jsx
Unescape View File

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

25
src/components/services/ping.jsx
Unescape View File

@ -7,9 +7,8 @@ export default function Ping({ group, service, style }) {
refreshInterval: 30000 refreshInterval: 30000
}); });
let textSize = "text-[8px]";
let colorClass = "" let colorClass = ""
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50"; let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
let statusTitle = "HTTP status"; let statusTitle = "HTTP status";
let statusText; let statusText;
@ -26,11 +25,7 @@ export default function Ping({ group, service, style }) {
statusTitle += ` ${data.status}` statusTitle += ` ${data.status}`
if (style === "basic") { if (style === "basic") {
statusText = t("docker.offline") statusText = t("ping.down")
} else if (style === "dot") {
statusText = "◉"
textSize = "text-[14px]"
backgroundClass = ""
} else { } else {
statusText = data.status statusText = data.status
} }
@ -40,19 +35,21 @@ export default function Ping({ group, service, style }) {
colorClass = "text-emerald-500/80" colorClass = "text-emerald-500/80"
if (style === "basic") { if (style === "basic") {
statusText = t("docker.running") statusText = t("ping.up")
} else if (style === "dot") {
statusText = "◉"
textSize = "text-[14px]"
backgroundClass = ""
} else { } else {
statusText = ping statusText = ping
} }
} }
if (style === "dot") {
backgroundClass = 'p-3';
colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
}
return ( return (
<div className={`w-auto px-1.5 py-0.5 text-center rounded-b-[3px] overflow-hidden ping-status-invalid ${backgroundClass}`} title={statusTitle}> <div className={`w-auto text-center rounded-b-[3px] overflow-hidden ping-status ${backgroundClass}`} title={statusTitle}>
<div className={`font-bold uppercase ${textSize} ${colorClass}`}>{statusText}</div> {style !== 'dot' && <div className={`font-bold uppercase text-[8px] ${colorClass}`}>{statusText}</div>}
{style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
</div> </div>
); );
} }

59
src/components/services/status.jsx
Unescape View File

@ -1,65 +1,58 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import useSWR from "swr"; import useSWR from "swr";
export default function Status({ service }) { export default function Status({ service, style }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { data, error } = useSWR(`/api/docker/status/${service.container}/${service.server || ""}`); const { data, error } = useSWR(`/api/docker/status/${service.container}/${service.server || ""}`);
if (error) { let statusLabel = t("docker.unknown");
<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 docker-error" title={t("docker.error")}> let statusTitle = "";
<div className="text-[8px] font-bold text-rose-500/80 uppercase">{t("docker.error")}</div> let backgroundClass = "px-1.5 py-0.5 bg-theme-500/10 dark:bg-theme-900/50";
</div> let colorClass = "text-black/20 dark:text-white/40 ";
}
if (data) {
let statusLabel = "";
if (error) {
statusTitle = t("docker.error");
colorClass = "text-rose-500/80";
} else if (data) {
if (data.status?.includes("running")) { if (data.status?.includes("running")) {
if (data.health === "starting") { if (data.health === "starting") {
return ( statusTitle = t("docker.starting");
<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 docker-starting" title={t("docker.starting")}> colorClass = "text-blue-500/80";
<div className="text-[8px] font-bold text-blue-500/80 uppercase">{t("docker.starting")}</div>
</div>
);
} }
if (data.health === "unhealthy") { if (data.health === "unhealthy") {
return ( statusTitle = t("docker.unhealthy");
<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 docker-unhealthy" title={t("docker.unhealthy")}> colorClass = "text-orange-400/50 dark:text-orange-400/80";
<div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{t("docker.unhealthy")}</div>
</div>
);
} }
if (!data.health) { if (!data.health) {
statusLabel = data.status.replace("running", t("docker.running")) statusLabel = data.status.replace("running", t("docker.running"));
} else { } else {
statusLabel = data.health === "healthy" ? t("docker.healthy") : data.health statusLabel = data.health === "healthy" ? t("docker.healthy") : data.health;
} }
return ( statusTitle = statusLabel;
<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 docker-status" title={statusLabel}> colorClass = "text-emerald-500/80";
<div className="text-[8px] font-bold text-emerald-500/80 uppercase">{statusLabel}</div>
</div>
);
} }
if (data.status === "not found" || data.status === "exited" || data.status?.startsWith("partial")) { if (data.status === "not found" || data.status === "exited" || data.status?.startsWith("partial")) {
if (data.status === "not found") statusLabel = t("docker.not_found") if (data.status === "not found") statusLabel = t("docker.not_found")
else if (data.status === "exited") statusLabel = t("docker.exited") else if (data.status === "exited") statusLabel = t("docker.exited")
else statusLabel = data.status.replace("partial", t("docker.partial")) else statusLabel = data.status.replace("partial", t("docker.partial"))
return ( colorClass = "text-orange-400/50 dark:text-orange-400/80";
<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 docker-status-warning" title={statusLabel}>
<div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{statusLabel}</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 ( 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 docker-status-unknown"> <div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] docker-status`} title={statusTitle}>
<div className="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("docker.unknown")}</div> {style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
{style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
</div> </div>
); );
} }

3
src/utils/config/service-helpers.js
Unescape View File

@ -259,6 +259,9 @@ export async function servicesFromKubernetes() {
if (ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]) { if (ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]) {
constructedService.ping = ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]; constructedService.ping = ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`];
} }
if (ingress.metadata.annotations[`${ANNOTATION_BASE}/statusStyle`]) {
constructedService.statusStyle = ingress.metadata.annotations[`${ANNOTATION_BASE}/statusStyle`];
}
Object.keys(ingress.metadata.annotations).forEach((annotation) => { Object.keys(ingress.metadata.annotations).forEach((annotation) => {
if (annotation.startsWith(ANNOTATION_WIDGET_BASE)) { if (annotation.startsWith(ANNOTATION_WIDGET_BASE)) {
shvl.set( shvl.set(

Write Preview
Loading…
Cancel
Save