-
-
Notifications
You must be signed in to change notification settings - Fork 990
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Separated kubernetes widgets from resources widgets
- Loading branch information
Showing
9 changed files
with
200 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import useSWR from "swr"; | ||
import { BiError } from "react-icons/bi"; | ||
import { useTranslation } from "next-i18next"; | ||
import Node from "./node"; | ||
|
||
export default function Widget({ options }) { | ||
const { cluster, nodes } = options; | ||
const { t, i18n } = useTranslation(); | ||
|
||
const defaultData = { | ||
cpu: { | ||
load: 0, | ||
total: 0, | ||
percent: 0 | ||
}, | ||
memory: { | ||
used: 0, | ||
total: 0, | ||
free: 0, | ||
precent: 0 | ||
} | ||
}; | ||
|
||
const { data, error } = useSWR( | ||
`/api/widgets/kubernetes?${new URLSearchParams({ lang: i18n.language }).toString()}`, { | ||
refreshInterval: 1500 | ||
} | ||
); | ||
|
||
if (error || data?.error) { | ||
return ( | ||
<div className="flex flex-col justify-center first:ml-0 ml-4"> | ||
<div className="flex flex-row items-center justify-end"> | ||
<div className="flex flex-row items-center"> | ||
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" /> | ||
<div className="flex flex-col ml-3 text-left"> | ||
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
if (!data) { | ||
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"> | ||
{cluster.show && | ||
<Node type="cluster" options={options.cluster} data={defaultData} /> | ||
} | ||
{nodes.show && | ||
<Node type="node" options={options.nodes} data={defaultData} /> | ||
} | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
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"> | ||
{cluster.show && | ||
<Node type="cluster" options={options.cluster} data={data.cluster} /> | ||
} | ||
{nodes.show && data.nodes && | ||
data.nodes.map((node) => | ||
<Node key={node} type="node" options={options.nodes} data={node} />) | ||
} | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { FaMemory } from "react-icons/fa"; | ||
import { FiAlertTriangle, FiCpu, FiServer } from "react-icons/fi"; | ||
import { SiKubernetes } from "react-icons/si"; | ||
import { useTranslation } from "next-i18next"; | ||
|
||
import UsageBar from "./usage-bar"; | ||
|
||
|
||
export default function Node({ type, options, data }) { | ||
const { t } = useTranslation(); | ||
|
||
console.log("Node", type, options, data); | ||
|
||
function icon() { | ||
if (type === "cluster") { | ||
return <SiKubernetes className="text-theme-800 dark:text-theme-200 w-5 h-5" />; | ||
} | ||
if (data.ready) { | ||
return <FiServer className="text-theme-800 dark:text-theme-200 w-5 h-5" />; | ||
} | ||
return <FiAlertTriangle className="text-theme-800 dark:text-theme-200 w-5 h-5" />; | ||
} | ||
|
||
return ( | ||
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap ml-4"> | ||
<div className="flex flex-row self-center flex-wrap justify-between"> | ||
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> | ||
{icon()} | ||
<div className="flex flex-col ml-3 text-left min-w-[85px]"> | ||
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> | ||
<div className="pl-0.5"> | ||
{t("common.number", { | ||
value: data.cpu.percent, | ||
style: "unit", | ||
unit: "percent", | ||
maximumFractionDigits: 0 | ||
})} | ||
</div> | ||
<FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" /> | ||
</div> | ||
<UsageBar percent={data.cpu.percent} /> | ||
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> | ||
<div className="pl-0.5"> | ||
{t("common.bytes", { | ||
value: data.memory.free, | ||
maximumFractionDigits: 0, | ||
binary: true | ||
})} | ||
</div> | ||
<FaMemory className="text-theme-800 dark:text-theme-200 w-3 h-3" /> | ||
</div> | ||
<UsageBar percent={data.memory.percent} /> | ||
{options.showLabel && ( | ||
<div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{type === "cluster" ? options.label : data.name}</div> | ||
)} | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
export default function UsageBar({ percent }) { | ||
return ( | ||
<div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-theme-200/20"> | ||
<div | ||
className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000" | ||
style={{ | ||
width: `${percent}%`, | ||
}} | ||
/> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters