open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor information widgets

Browse Source
pull/25/head
Ben Phelps 2 years ago
parent 1124f55361
commit b61ec9836e
10 changed files with 208 additions and 120 deletions
Show Stats Download Patch File Download Diff File

45
src/components/widgets/resources/cpu.jsx
Unescape View File

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

48
src/components/widgets/resources/disk.jsx
Unescape View File

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

48
src/components/widgets/resources/memory.jsx
Unescape View File

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

106
src/components/widgets/resources/resources.jsx
Unescape 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>
</>
);
}

23
src/components/widgets/weather/weather.jsx
Unescape View File

@ -10,7 +10,7 @@ export default function Weather({ options }) {
if (error) {
return (
<div className="order-last grow flex-none 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">API</span>
@ -21,22 +21,25 @@ export default function Weather({ options }) {
}
if (!data) {
return <div className="order-last grow flex-none flex flex-row items-center justify-end"></div>;
return <div className="flex flex-row items-center"></div>;
}
if (data.error) {
return <div className="order-last grow flex-none flex flex-row items-center justify-end"></div>;
return <div className="flex flex-row items-center"></div>;
}
return (
<div className="order-last grow flex-none flex flex-row items-center justify-end">
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">
{options.units === "metric" ? data.current.temp_c : data.current.temp_f}&deg;
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{data.current.condition.text}</span>
<div className=" flex flex-col">
<div className="flex flex-row items-center justify-end">
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">
{options.units === "metric" ? data.current.temp_c : data.current.temp_f}&deg;
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{data.current.condition.text}</span>
</div>
</div>
{options.label && <div className="text-right text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>}
</div>
);
}

6
src/pages/api/docker/stats/[...service].js
Unescape View File

@ -14,7 +14,9 @@ export default async function handler(req, res) {
try {
const docker = new Docker(await getDockerArguments(containerServer));
const containers = await docker.listContainers();
const containers = await docker.listContainers({
all: true,
});
// bad docker connections can result in a <Buffer ...> object?
// in any case, this ensures the result is the expected array
@ -30,7 +32,7 @@ export default async function handler(req, res) {
const containerExists = containerNames.includes(containerName);
if (!containerExists) {
return res.status(404).send({
return res.status(200).send({
error: "not found",
});
}

6
src/pages/api/docker/status/[...service].js
Unescape View File

@ -13,7 +13,9 @@ export default async function handler(req, res) {
try {
const docker = new Docker(await getDockerArguments(containerServer));
const containers = await docker.listContainers();
const containers = await docker.listContainers({
all: true,
});
// bad docker connections can result in a <Buffer ...> object?
// in any case, this ensures the result is the expected array
@ -29,7 +31,7 @@ export default async function handler(req, res) {
const containerExists = containerNames.includes(containerName);
if (!containerExists) {
return res.status(404).send({
return res.status(200).send({
error: "not found",
});
}

30
src/pages/api/widgets/resources.js
Unescape View File

@ -1,14 +1,26 @@
import { cpu, drive, mem, netstat } from "node-os-utils";
export default async function handler(req, res) {
const { disk } = req.query;
const { type, target } = req.query;
res.send({
cpu: {
usage: await cpu.usage(),
load: cpu.loadavgTime(5),
},
drive: await drive.info(disk || "/"),
memory: await mem.info(),
});
if (type == "cpu") {
return res.status(200).json({
cpu: {
usage: await cpu.usage(1000),
load: cpu.loadavgTime(5),
},
});
} 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(),
});
} else {
return res.status(400).json({
error: "invalid type",
});
}
}

14
src/pages/index.js
Unescape View File

@ -32,9 +32,17 @@ export default function Home() {
<div className="flex flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200">
{widgets && (
<>
{widgets.map((widget) => (
<Widget key={widget.type} widget={widget} />
))}
{widgets
.filter((widget) => widget.type !== "weather")
.map((widget, i) => (
<Widget key={i} widget={widget} />
))}
<div className="grow"></div>
{widgets
.filter((widget) => widget.type === "weather")
.map((widget, i) => (
<Widget key={i} widget={widget} />
))}
</>
)}
</div>

2
src/utils/stats-helpers.js
Unescape View File

@ -19,5 +19,5 @@ export function formatBytes(bytes, decimals = 2) {
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
return parseFloat(bytes / Math.pow(k, i)).toFixed(dm) + " " + sizes[i];
}

Write Preview
Loading…
Cancel
Save