mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 07:18:47 +00:00
Kubernetes support
* Total CPU and Memory usage for the entire cluster * Total CPU and Memory usage for kubernetes pods * Service discovery via annotations on ingress * No storage stats yet * No network stats yet
This commit is contained in:
parent
b25ba09e18
commit
c4333fd2dc
18 changed files with 479 additions and 19 deletions
|
@ -3,8 +3,10 @@ import { useContext, useState } from "react";
|
|||
|
||||
import Status from "./status";
|
||||
import Widget from "./widget";
|
||||
import KubernetesStatus from "./kubernetes-status";
|
||||
|
||||
import Docker from "widgets/docker/component";
|
||||
import Kubernetes from "widgets/kubernetes/component";
|
||||
import { SettingsContext } from "utils/contexts/settings";
|
||||
import ResolvedIcon from "components/resolvedicon";
|
||||
|
||||
|
@ -80,6 +82,16 @@ export default function Item({ service }) {
|
|||
<span className="sr-only">View container stats</span>
|
||||
</button>
|
||||
)}
|
||||
{service.app && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
|
||||
className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
|
||||
>
|
||||
<KubernetesStatus service={service} />
|
||||
<span className="sr-only">View container stats</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{service.container && service.server && (
|
||||
|
@ -92,6 +104,16 @@ export default function Item({ service }) {
|
|||
{statsOpen && <Docker service={{ widget: { container: service.container, server: service.server } }} />}
|
||||
</div>
|
||||
)}
|
||||
{service.app && (
|
||||
<div
|
||||
className={classNames(
|
||||
statsOpen && !statsClosing ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
|
||||
"w-full overflow-hidden transition-all duration-300 ease-in-out"
|
||||
)}
|
||||
>
|
||||
{statsOpen && <Kubernetes service={{ widget: { namespace: service.namespace, app: service.app } }} />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{service.widget && <Widget service={service} />}
|
||||
</div>
|
||||
|
|
19
src/components/services/kubernetes-status.jsx
Normal file
19
src/components/services/kubernetes-status.jsx
Normal file
|
@ -0,0 +1,19 @@
|
|||
import useSWR from "swr";
|
||||
|
||||
export default function KubernetesStatus({ service }) {
|
||||
const { data, error } = useSWR(`/api/kubernetes/status/${service.namespace}/${service.app}`);
|
||||
|
||||
if (error) {
|
||||
return <div className="w-3 h-3 bg-rose-300 dark:bg-rose-500 rounded-full" />;
|
||||
}
|
||||
|
||||
if (data && data.status === "running") {
|
||||
return <div className="w-3 h-3 bg-emerald-300 dark:bg-emerald-500 rounded-full" />;
|
||||
}
|
||||
|
||||
if (data && data.status === "not found") {
|
||||
return <div className="h-2.5 w-2.5 bg-orange-400/50 dark:bg-yellow-200/40 -rotate-45" />;
|
||||
}
|
||||
|
||||
return <div className="w-3 h-3 bg-black/20 dark:bg-white/40 rounded-full" />;
|
||||
}
|
|
@ -5,10 +5,10 @@ import { useTranslation } from "next-i18next";
|
|||
|
||||
import UsageBar from "./usage-bar";
|
||||
|
||||
export default function Cpu({ expanded }) {
|
||||
export default function Cpu({ expanded, backend }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data, error } = useSWR(`/api/widgets/resources?type=cpu`, {
|
||||
const { data, error } = useSWR(`/api/widgets/${backend || 'resources'}?type=cpu`, {
|
||||
refreshInterval: 1500,
|
||||
});
|
||||
|
||||
|
|
|
@ -5,10 +5,10 @@ import { useTranslation } from "next-i18next";
|
|||
|
||||
import UsageBar from "./usage-bar";
|
||||
|
||||
export default function Disk({ options, expanded }) {
|
||||
export default function Disk({ options, expanded, backend }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data, error } = useSWR(`/api/widgets/resources?type=disk&target=${options.disk}`, {
|
||||
const { data, error } = useSWR(`/api/widgets/${backend || 'resources'}?type=disk&target=${options.disk}`, {
|
||||
refreshInterval: 1500,
|
||||
});
|
||||
|
||||
|
|
|
@ -5,10 +5,10 @@ import { useTranslation } from "next-i18next";
|
|||
|
||||
import UsageBar from "./usage-bar";
|
||||
|
||||
export default function Memory({ expanded }) {
|
||||
export default function Memory({ expanded, backend }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data, error } = useSWR(`/api/widgets/resources?type=memory`, {
|
||||
const { data, error } = useSWR(`/api/widgets/${backend || 'resources'}?type=memory`, {
|
||||
refreshInterval: 1500,
|
||||
});
|
||||
|
||||
|
|
|
@ -3,15 +3,15 @@ import Cpu from "./cpu";
|
|||
import Memory from "./memory";
|
||||
|
||||
export default function Resources({ options }) {
|
||||
const { expanded } = options;
|
||||
const { expanded, backend } = options;
|
||||
return (
|
||||
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
|
||||
<div className="flex flex-row self-center flex-wrap justify-between">
|
||||
{options.cpu && <Cpu expanded={expanded} />}
|
||||
{options.memory && <Memory expanded={expanded} />}
|
||||
{options.cpu && <Cpu expanded={expanded} backend={backend} />}
|
||||
{options.memory && <Memory expanded={expanded} backend={backend} />}
|
||||
{Array.isArray(options.disk)
|
||||
? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} />)
|
||||
: options.disk && <Disk options={options} expanded={expanded} />}
|
||||
? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} backend={backend} />)
|
||||
: options.disk && <Disk options={options} expanded={expanded} backend={backend} />}
|
||||
</div>
|
||||
{options.label && (
|
||||
<div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue