parent
1124f55361
commit
b61ec9836e
@ -0,0 +1,45 @@
|
|||||||
|
import useSWR from "swr";
|
||||||
|
import { FiCpu } from "react-icons/fi";
|
||||||
|
import { BiError } from "react-icons/bi";
|
||||||
|
|
||||||
|
export default function Cpu() {
|
||||||
|
const { data, error } = useSWR(`/api/widgets/resources?type=cpu`, {
|
||||||
|
refreshInterval: 1500,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error || data?.error) {
|
||||||
|
return (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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 (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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).toFixed(1)} Load
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,48 @@
|
|||||||
|
import useSWR from "swr";
|
||||||
|
import { FiHardDrive } from "react-icons/fi";
|
||||||
|
import { BiError } from "react-icons/bi";
|
||||||
|
import { formatBytes } from "utils/stats-helpers";
|
||||||
|
|
||||||
|
export default function Disk({ options }) {
|
||||||
|
const { data, error } = useSWR(`/api/widgets/resources?type=disk&target=${options.disk}`, {
|
||||||
|
refreshInterval: 1500,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error || data?.error) {
|
||||||
|
return (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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 (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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">- Free</span>
|
||||||
|
<span className="text-theme-800 dark:text-theme-200 text-xs">- Used</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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">
|
||||||
|
{formatBytes(data.drive.freeGb * 1024 * 1024 * 1024)} Free
|
||||||
|
</span>
|
||||||
|
<span className="text-theme-800 dark:text-theme-200 text-xs">
|
||||||
|
{formatBytes(data.drive.usedGb * 1024 * 1024 * 1024)} Used
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,48 @@
|
|||||||
|
import useSWR from "swr";
|
||||||
|
import { FaMemory } from "react-icons/fa";
|
||||||
|
import { BiError } from "react-icons/bi";
|
||||||
|
import { formatBytes } from "utils/stats-helpers";
|
||||||
|
|
||||||
|
export default function Memory() {
|
||||||
|
const { data, error } = useSWR(`/api/widgets/resources?type=memory`, {
|
||||||
|
refreshInterval: 1500,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error || data?.error) {
|
||||||
|
return (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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 (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-none flex flex-row items-center justify-center">
|
||||||
|
<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">
|
||||||
|
{formatBytes(data.memory.usedMemMb * 1024 * 1024)} Used
|
||||||
|
</span>
|
||||||
|
<span className="text-theme-800 dark:text-theme-200 text-xs">
|
||||||
|
{formatBytes(data.memory.freeMemMb * 1024 * 1024)} Free
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,102 +1,22 @@
|
|||||||
import useSWR from "swr";
|
import Disk from "./disk";
|
||||||
import { FiHardDrive, FiCpu } from "react-icons/fi";
|
import Cpu from "./cpu";
|
||||||
import { FaMemory } from "react-icons/fa";
|
import Memory from "./memory";
|
||||||
import { BiError } from "react-icons/bi";
|
|
||||||
|
|
||||||
export default function Resources({ options }) {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
{options.disk && (
|
<div className="pr-2 flex flex-col mr-2">
|
||||||
<div className="flex-none flex flex-row items-center justify-center mr-5">
|
<div className="flex flex-row space-x-4">
|
||||||
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
|
{options.disk && <Disk options={options} />}
|
||||||
<div className="flex flex-col ml-3 text-left font-mono">
|
{options.cpu && <Cpu />}
|
||||||
<span className="text-theme-800 dark:text-theme-200 text-xs">- GB free</span>
|
{options.memory && <Memory />}
|
||||||
<span className="text-theme-800 dark:text-theme-200 text-xs">- GB used</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
{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.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>
|
</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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,26 @@
|
|||||||
import { cpu, drive, mem, netstat } from "node-os-utils";
|
import { cpu, drive, mem, netstat } from "node-os-utils";
|
||||||
|
|
||||||
export default async function handler(req, res) {
|
export default async function handler(req, res) {
|
||||||
const { disk } = req.query;
|
const { type, target } = req.query;
|
||||||
|
|
||||||
res.send({
|
if (type == "cpu") {
|
||||||
|
return res.status(200).json({
|
||||||
cpu: {
|
cpu: {
|
||||||
usage: await cpu.usage(),
|
usage: await cpu.usage(1000),
|
||||||
load: cpu.loadavgTime(5),
|
load: cpu.loadavgTime(5),
|
||||||
},
|
},
|
||||||
drive: await drive.info(disk || "/"),
|
});
|
||||||
|
} else if (type == "disk") {
|
||||||
|
return res.status(200).json({
|
||||||
|
drive: await drive.info(target || "/"),
|
||||||
|
});
|
||||||
|
} else if (type == "memory") {
|
||||||
|
return res.status(200).json({
|
||||||
memory: await mem.info(),
|
memory: await mem.info(),
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
return res.status(400).json({
|
||||||
|
error: "invalid type",
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in new issue