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:
James Wynn 2022-10-24 17:03:35 -05:00
parent b25ba09e18
commit c4333fd2dc
18 changed files with 479 additions and 19 deletions

View file

@ -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>

View 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" />;
}

View file

@ -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,
});

View file

@ -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,
});

View file

@ -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,
});

View file

@ -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>