You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
homepage/src/components/widgets/resources/resources.jsx

115 lines
4.0 KiB

import useSWR from "swr";
import { FiHardDrive, FiCpu } from "react-icons/fi";
import { FaMemory } from "react-icons/fa";
export default function Resources({ options }) {
const { data, error } = useSWR(
`/api/widgets/resources?disk=${options.disk}`,
{
refreshInterval: 1500,
}
);
if (error) {
return <div>failed to load</div>;
}
if (!data) {
return (
<>
{options.disk && (
<div className="flex-none flex flex-row items-center justify-center mr-5">
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left font-mono">
<span className="text-theme-800 dark:text-theme-200 text-xs">
- GB free
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">
- GB used
</span>
</div>
</div>
)}
{options.cpu && (
<div className="flex-none flex flex-row items-center justify-center mr-5">
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left font-mono">
<span className="text-theme-800 dark:text-theme-200 text-xs">
- Usage
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">
- Load
</span>
</div>
</div>
)}
{options.memory && (
<div className="flex-none flex flex-row items-center justify-center mr-5">
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left font-mono">
<span className="text-theme-800 dark:text-theme-200 text-xs">
- GB Used
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">
- GB Free
</span>
</div>
</div>
)}
</>
);
}
if (data.error) {
return <div className="flex flex-col items-center justify-center"></div>;
}
return (
<>
{options.disk && (
<div className="flex-none flex flex-row items-center justify-center mr-5">
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left font-mono">
<span className="text-theme-800 dark:text-theme-200 text-xs">
{Math.round(data.drive.freeGb)} GB free
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">
{Math.round(data.drive.totalGb)} GB used
</span>
</div>
</div>
)}
{options.cpu && (
<div className="flex-none flex flex-row items-center justify-center mr-5">
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left font-mono">
<span className="text-theme-800 dark:text-theme-200 text-xs">
{Math.round(data.cpu.usage)}% Usage
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">
{Math.round(data.cpu.load * 100) / 100} Load
</span>
</div>
</div>
)}
{options.memory && (
<div className="flex-none flex flex-row items-center justify-center mr-5">
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left font-mono">
<span className="text-theme-800 dark:text-theme-200 text-xs">
{Math.round((data.memory.usedMemMb / 1024) * 100) / 100} GB Used
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">
{Math.round((data.memory.freeMemMb / 1024) * 100) / 100} GB Free
</span>
</div>
</div>
)}
</>
);
}