dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-17 10:19:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Run pre-commit hooks over existing codebase

Browse source 
Co-Authored-By: Ben Phelps <ben@phelps.io>
This commit is contained in:
shamoon 2023-10-17 23:26:55 -07:00
parent fa50bbad9c
commit 19c25713c4
387 changed files with 4785 additions and 4109 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/services/dropdown.jsx
View file

@ -33,7 +33,7 @@ export default function Dropdown({ options, value, setValue }) {
type="button"
className={classNames(
value === option.value ? "bg-theme-300/40 dark:bg-theme-900/40" : "",
"w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 hover:dark:bg-theme-900/70 text-left"
"w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 hover:dark:bg-theme-900/70 text-left",
)}
>
{option.label}

75
src/components/services/group.jsx
View file

@ -1,13 +1,12 @@
import { useRef } from "react";
import classNames from "classnames";
import { Disclosure, Transition } from '@headlessui/react';
import { Disclosure, Transition } from "@headlessui/react";
import { MdKeyboardArrowDown } from "react-icons/md";
import List from "components/services/list";
import ResolvedIcon from "components/resolvedicon";
export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse }) {
const panel = useRef();
return (
@ -20,45 +19,55 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
)}
>
<Disclosure defaultOpen>
<Disclosure defaultOpen>
{({ open }) => (
<>
{ layout?.header !== false &&
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon &&
<div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon">
<ResolvedIcon icon={layout.icon} />
</div>
}
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium service-group-name">{services.name}</h2>
<MdKeyboardArrowDown className={classNames(
disableCollapse ? 'hidden' : '',
'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
open ? '' : 'rotate-180'
)} />
</Disclosure.Button>
}
<Transition
// Otherwise the transition group does display: none and cancels animation
className="!block"
unmount={false}
beforeLeave={() => {
panel.current.style.height = `${panel.current.scrollHeight}px`;
setTimeout(() => {panel.current.style.height = `0`}, 1);
}}
beforeEnter={() => {
panel.current.style.height = `0px`;
setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
setTimeout(() => {panel.current.style.height = 'auto'}, 150); // animation is 150ms
}}
{layout?.header !== false && (
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon && (
<div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon">
<ResolvedIcon icon={layout.icon} />
</div>
)}
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium service-group-name">
{services.name}
</h2>
<MdKeyboardArrowDown
className={classNames(
disableCollapse ? "hidden" : "",
"transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl",
open ? "" : "rotate-180",
)}
/>
</Disclosure.Button>
)}
<Transition
// Otherwise the transition group does display: none and cancels animation
className="!block"
unmount={false}
beforeLeave={() => {
panel.current.style.height = `${panel.current.scrollHeight}px`;
setTimeout(() => {
panel.current.style.height = `0`;
}, 1);
}}
beforeEnter={() => {
panel.current.style.height = `0px`;
setTimeout(() => {
panel.current.style.height = `${panel.current.scrollHeight}px`;
}, 1);
setTimeout(() => {
panel.current.style.height = "auto";
}, 150); // animation is 150ms
}}
>
<Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
<List group={group} services={services.services} layout={layout} />
</Disclosure.Panel>
</Transition>
</Transition>
</>
)}
</Disclosure>
</Disclosure>
</div>
);
}

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

@ -14,8 +14,8 @@ import ResolvedIcon from "components/resolvedicon";
export default function Item({ service, group }) {
const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext);
const showStats = (service.showStats === false) ? false : settings.showStats;
const statusStyle = (service.statusStyle !== undefined) ? service.statusStyle : settings.statusStyle;
const showStats = service.showStats === false ? false : settings.showStats;
const statusStyle = service.statusStyle !== undefined ? service.statusStyle : settings.statusStyle;
const [statsOpen, setStatsOpen] = useState(service.showStats);
const [statsClosing, setStatsClosing] = useState(false);
@ -34,9 +34,9 @@ export default function Item({ service, group }) {
<li key={service.name} id={service.id} className="service" data-name={service.name || ""}>
<div
className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? '-' : ""}${settings.cardBlur}`,
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
hasLink && "cursor-pointer",
"transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card"
"transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
)}
>
<div className="flex select-none z-0 service-title">
@ -65,46 +65,54 @@ export default function Item({ service, group }) {
>
<div className="flex-1 px-2 py-2 text-sm text-left z-10 service-name">
{service.name}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light service-description">{service.description}</p>
<p className="text-theme-500 dark:text-theme-300 text-xs font-light service-description">
{service.description}
</p>
</div>
</a>
) : (
<div className="flex-1 flex items-center justify-between rounded-r-md service-title-text">
<div className="flex-1 px-2 py-2 text-sm text-left z-10 service-name">
{service.name}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light service-description">{service.description}</p>
<p className="text-theme-500 dark:text-theme-300 text-xs font-light service-description">
{service.description}
</p>
</div>
</div>
)}
<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 && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
<Ping group={group} service={service.name} style={statusStyle} />
<span className="sr-only">Ping status</span>
</div>
)}
<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 && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
<Ping group={group} service={service.name} style={statusStyle} />
<span className="sr-only">Ping status</span>
</div>
)}
{service.container && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
>
<Status service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
</button>
)}
{(service.app && !service.external) && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
>
<KubernetesStatus service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
</button>
)}
{service.container && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
>
<Status service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
</button>
)}
{service.app && !service.external && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
>
<KubernetesStatus service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
</button>
)}
</div>
</div>
@ -112,20 +120,28 @@ export default function Item({ service, group }) {
<div
className={classNames(
showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-[0] opacity-0",
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats"
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
)}
>
{(showStats || statsOpen) && <Docker service={{ widget: { container: service.container, server: service.server } }} />}
{(showStats || statsOpen) && (
<Docker service={{ widget: { container: service.container, server: service.server } }} />
)}
</div>
)}
{service.app && (
<div
className={classNames(
showStats || (statsOpen && !statsClosing) ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats"
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
)}
>
{(showStats || statsOpen) && <Kubernetes service={{ widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector } }} />}
{(showStats || statsOpen) && (
<Kubernetes
service={{
widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector },
}}
/>
)}
</div>
)}

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

@ -20,7 +20,7 @@ export default function KubernetesStatus({ service, style }) {
statusLabel = statusTitle;
colorClass = "text-emerald-500/80";
}
if (data.status === "not found" || data.status === "down" || data.status === "partial") {
statusTitle = data.status;
statusLabel = statusTitle;
@ -28,17 +28,21 @@ export default function KubernetesStatus({ service, style }) {
}
}
if (style === 'dot') {
colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, '');
if (style === "dot") {
colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, "");
backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
}
return (
<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> :
<div className={`rounded-full h-3 w-3 ${colorClass}`}/>
}
<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>
) : (
<div className={`rounded-full h-3 w-3 ${colorClass}`} />
)}
</div>
);
}

2
src/components/services/list.jsx
View file

@ -9,7 +9,7 @@ export default function List({ group, services, layout }) {
<ul
className={classNames(
layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
"mt-3 services-list"
"mt-3 services-list",
)}
>
{services.map((service) => (

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

@ -4,7 +4,7 @@ import useSWR from "swr";
export default function Ping({ group, service, style }) {
const { t } = useTranslation();
const { data, error } = useSWR(`api/ping?${new URLSearchParams({ group, service }).toString()}`, {
refreshInterval: 30000
refreshInterval: 30000,
});
let colorClass = "text-black/20 dark:text-white/40 opacity-20";
@ -29,7 +29,7 @@ export default function Ping({ group, service, style }) {
statusText = data.status;
}
} else if (data) {
const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 })
const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 });
statusTitle += ` ${data.status} (${ping})`;
colorClass = "text-emerald-500/80";
@ -42,14 +42,17 @@ export default function Ping({ group, service, style }) {
}
if (style === "dot") {
backgroundClass = 'p-4';
colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, '');
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 ping-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
className={`w-auto text-center rounded-b-[3px] overflow-hidden ping-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>
);
}

34
src/components/services/status.jsx
View file

@ -17,13 +17,13 @@ export default function Status({ service, style }) {
} else if (data) {
if (data.status?.includes("running")) {
if (data.health === "starting") {
statusTitle = t("docker.starting");
colorClass = "text-blue-500/80";
statusTitle = t("docker.starting");
colorClass = "text-blue-500/80";
}
if (data.health === "unhealthy") {
statusTitle = t("docker.unhealthy");
colorClass = "text-orange-400/50 dark:text-orange-400/80";
statusTitle = t("docker.unhealthy");
colorClass = "text-orange-400/50 dark:text-orange-400/80";
}
if (!data.health) {
@ -35,27 +35,31 @@ export default function Status({ service, style }) {
statusTitle = statusLabel;
colorClass = "text-emerald-500/80";
}
if (data.status === "not found" || data.status === "exited" || data.status?.startsWith("partial")) {
if (data.status === "not found") statusLabel = t("docker.not_found")
else if (data.status === "exited") statusLabel = t("docker.exited")
else statusLabel = data.status.replace("partial", t("docker.partial"))
if (data.status === "not found") statusLabel = t("docker.not_found");
else if (data.status === "exited") statusLabel = t("docker.exited");
else statusLabel = data.status.replace("partial", t("docker.partial"));
colorClass = "text-orange-400/50 dark:text-orange-400/80";
}
}
if (style === 'dot') {
colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, '');
if (style === "dot") {
colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, "");
backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
statusTitle = statusLabel;
}
return (
<div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] docker-status`} title={statusTitle}>
{style !== 'dot' ?
<div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div> :
<div className={`rounded-full h-3 w-3 ${colorClass}`}/>
}
<div
className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] docker-status`}
title={statusTitle}
>
{style !== "dot" ? (
<div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>
) : (
<div className={`rounded-full h-3 w-3 ${colorClass}`} />
)}
</div>
);
}

2
src/components/services/widget/block.jsx
View file

@ -9,7 +9,7 @@ export default function Block({ value, label }) {
className={classNames(
"bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
value === undefined ? "animate-pulse" : "",
"service-block"
"service-block",
)}
>
<div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>

20
src/components/services/widget/container.jsx
View file

@ -12,14 +12,14 @@ export default function Container({ error = false, children, service }) {
return null;
}
return <Error service={service} error={error} />
return <Error service={service} error={error} />;
}
const childrenArray = Array.isArray(children) ? children : [children];
let visibleChildren = childrenArray;
let fields = service?.widget?.fields;
if (typeof fields === 'string') fields = JSON.parse(service.widget.fields);
if (typeof fields === "string") fields = JSON.parse(service.widget.fields);
const type = service?.widget?.type;
if (fields && type) {
// if the field contains a "." then it most likely contains a common loc value
@ -27,13 +27,15 @@ export default function Container({ error = false, children, service }) {
// fields: [ "resources.cpu", "resources.mem", "field"]
// or even
// fields: [ "resources.cpu", "widget_type.field" ]
visibleChildren = childrenArray?.filter(child => fields.some(field => {
let fullField = field;
if (!field.includes(".")) {
fullField = `${type}.${field}`;
}
return fullField === child?.props?.label;
}));
visibleChildren = childrenArray?.filter((child) =>
fields.some((field) => {
let fullField = field;
if (!field.includes(".")) {
fullField = `${type}.${field}`;
}
return fullField === child?.props?.label;
}),
);
}
return <div className="relative flex flex-row w-full service-container">{visibleChildren}</div>;

45
src/components/services/widget/error.jsx
View file

@ -6,7 +6,7 @@ function displayError(error) {
}
function displayData(data) {
return (data.type === 'Buffer') ? Buffer.from(data).toString() : JSON.stringify(data, 4);
return data.type === "Buffer" ? Buffer.from(data).toString() : JSON.stringify(data, 4);
}
export default function Error({ error }) {
@ -20,29 +20,34 @@ export default function Error({ error }) {
<details className="px-1 pb-1">
<summary className="block text-center mt-1 mb-0 mx-auto p-3 rounded bg-rose-900/80 hover:bg-rose-900/95 text-theme-900 cursor-pointer">
<div className="flex items-center justify-center text-xs font-bold">
<IoAlertCircle className="mr-1 w-5 h-5"/>{t("widget.api_error")} {error.message && t("widget.information")}
<IoAlertCircle className="mr-1 w-5 h-5" />
{t("widget.api_error")} {error.message && t("widget.information")}
</div>
</summary>
<div className="bg-white dark:bg-theme-200/50 mt-2 rounded text-rose-900 text-xs font-mono whitespace-pre-wrap break-all">
<ul className="p-4">
{error.message && <li>
<span className="text-black">{t("widget.api_error")}:</span> {error.message}
</li>}
{error.url && <li className="mt-2">
<span className="text-black">{t("widget.url")}:</span> {error.url}
</li>}
{error.rawError && <li className="mt-2">
<span className="text-black">{t("widget.raw_error")}:</span>
<div className="ml-2">
{displayError(error.rawError)}
</div>
</li>}
{error.data && <li className="mt-2">
<span className="text-black">{t("widget.response_data")}:</span>
<div className="ml-2">
{displayData(error.data)}
</div>
</li>}
{error.message && (
<li>
<span className="text-black">{t("widget.api_error")}:</span> {error.message}
</li>
)}
{error.url && (
<li className="mt-2">
<span className="text-black">{t("widget.url")}:</span> {error.url}
</li>
)}
{error.rawError && (
<li className="mt-2">
<span className="text-black">{t("widget.raw_error")}:</span>
<div className="ml-2">{displayError(error.rawError)}</div>
</li>
)}
{error.data && (
<li className="mt-2">
<span className="text-black">{t("widget.response_data")}:</span>
<div className="ml-2">{displayData(error.data)}</div>
</li>
)}
</ul>
</div>
</details>