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

Feature: true ping, rename old ping to siteMonitor (#2215)

Browse source
This commit is contained in:
shamoon 2023-10-20 00:09:33 -07:00 • committed by GitHub
parent 0c8c759f8a
commit 792f768a7f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 206 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/services/item.jsx
View file

@ -4,6 +4,7 @@ import { useContext, useState } from "react";
import Status from "./status";
import Widget from "./widget";
import Ping from "./ping";
import SiteMonitor from "./site-monitor";
import KubernetesStatus from "./kubernetes-status";
import Docker from "widgets/docker/component";
@ -93,6 +94,13 @@ export default function Item({ service, group }) {
</div>
)}
{service.siteMonitor && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-site-monitor">
<SiteMonitor group={group} service={service.name} style={statusStyle} />
<span className="sr-only">Site monitor status</span>
</div>
)}
{service.container && (
<button
type="button"

19
src/components/services/ping.jsx
View file

@ -9,7 +9,7 @@ export default function Ping({ group, service, style }) {
let colorClass = "text-black/20 dark:text-white/40 opacity-20";
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
let statusTitle = t("ping.http_status");
let statusTitle = t("ping.ping");
let statusText = "";
if (error) {
@ -19,18 +19,13 @@ export default function Ping({ group, service, style }) {
} else if (!data) {
statusText = t("ping.ping");
statusTitle += ` ${t("ping.not_available")}`;
} else if (data.status > 403) {
} else if (!data.alive) {
colorClass = "text-rose-500/80";
statusTitle += ` ${data.status}`;
if (style === "basic") {
statusText = t("ping.down");
} else {
statusText = data.status;
}
} else if (data) {
const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 });
statusTitle += ` ${data.status} (${ping})`;
statusTitle += ` ${t("ping.down")}`;
statusText = t("ping.down");
} else if (data.alive) {
const ping = t("common.ms", { value: data.time, style: "unit", unit: "millisecond", maximumFractionDigits: 0 });
statusTitle += ` ${t("ping.up")} (${ping})`;
colorClass = "text-emerald-500/80";
if (style === "basic") {

63
src/components/services/site-monitor.jsx Normal file
View file

@ -0,0 +1,63 @@
import { useTranslation } from "react-i18next";
import useSWR from "swr";
export default function SiteMonitor({ group, service, style }) {
const { t } = useTranslation();
const { data, error } = useSWR(`/api/siteMonitor?${new URLSearchParams({ group, service }).toString()}`, {
refreshInterval: 30000,
});
let colorClass = "text-black/20 dark:text-white/40 opacity-20";
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
let statusTitle = t("siteMonitor.http_status");
let statusText = "";
if (error) {
colorClass = "text-rose-500";
statusText = t("siteMonitor.error");
statusTitle += ` ${t("siteMonitor.error")}`;
} else if (!data) {
statusText = t("siteMonitor.response");
statusTitle += ` ${t("siteMonitor.not_available")}`;
} else if (data.status > 403) {
colorClass = "text-rose-500/80";
statusTitle += ` ${data.status}`;
if (style === "basic") {
statusText = t("siteMonitor.down");
} else {
statusText = data.status;
}
} else if (data) {
const responseTime = t("common.ms", {
value: data.latency,
style: "unit",
unit: "millisecond",
maximumFractionDigits: 0,
});
statusTitle += ` ${data.status} (${responseTime})`;
colorClass = "text-emerald-500/80";
if (style === "basic") {
statusText = t("siteMonitor.up");
} else {
statusText = responseTime;
colorClass += " lowercase";
}
}
if (style === "dot") {
backgroundClass = "p-4";
colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, "");
}
return (
<div
className={`w-auto text-center rounded-b-[3px] overflow-hidden site-monitor-status ${backgroundClass}`}
title={statusTitle}
>
{style !== "dot" && <div className={`font-bold uppercase text-[8px] ${colorClass}`}>{statusText}</div>}
{style === "dot" && <div className={`rounded-full h-3 w-3 ${colorClass}`} />}
</div>
);
}