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

refactor information widgets

Browse source
This commit is contained in:
Ben Phelps 2022-08-27 00:55:13 +03:00
parent 1124f55361
commit b61ec9836e
10 changed files with 208 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/components/widgets/resources/resources.jsx
View file

@ -1,102 +1,22 @@
import useSWR from "swr";
import { FiHardDrive, FiCpu } from "react-icons/fi";
import { FaMemory } from "react-icons/fa";
import { BiError } from "react-icons/bi";
import Disk from "./disk";
import Cpu from "./cpu";
import Memory from "./memory";
export default function Resources({ options }) {
const { data, error } = useSWR(`/api/widgets/resources?disk=${options.disk}`, {
refreshInterval: 1500,
});
if (error) {
return (
<div className="flex-none flex flex-row items-center justify-center mr-5">
<BiError 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">Resources</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
</div>
</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.usedGb)} GB used</span>
</div>
<div className="pr-2 flex flex-col mr-2">
<div className="flex flex-row space-x-4">
{options.disk && <Disk options={options} />}
{options.cpu && <Cpu />}
{options.memory && <Memory />}
</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>
{options.label && (
<div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">
{options.label}
</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>
)}
)}
</div>
</>
);
}