0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update glances widget

Browse source
This commit is contained in:
shamoon 2023-03-05 20:53:30 -08:00
parent b51af4377f
commit f830faf8af
3 changed files with 78 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/locales/en/common.json
View file

@ -305,7 +305,11 @@
"glances": {
"cpu": "CPU",
"mem": "MEM",
"wait": "Please wait"
"wait": "Please wait",
"temp": "TEMP",
"uptime": "UP",
"days": "d",
"hours": "h"
},
"quicklaunch": {
"bookmark": "Bookmark",

42
src/components/widgets/glances/glances.jsx
View file

@ -1,6 +1,6 @@
import useSWR from "swr";
import { BiError } from "react-icons/bi";
import { FaMemory } from "react-icons/fa";
import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa";
import { FiCpu } from "react-icons/fi";
import { useTranslation } from "next-i18next";
@ -64,6 +64,9 @@ export default function Widget({ options }) {
);
}
const unit = options.units === "imperial" ? "fahrenheit" : "celsius";
const mainTemp = (options.cputemp && data.sensors && unit === "celsius") ? data.sensors.find(s => s.label.includes("cpu_thermal")).value : data.sensors.find(s => s.label.includes("cpu_thermal")).value * 5/9 + 32;
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">
@ -73,7 +76,7 @@ export default function Widget({ options }) {
<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,
value: data.quicklook.cpu,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
@ -81,7 +84,7 @@ export default function Widget({ options }) {
</div>
<div className="pr-1">{t("glances.cpu")}</div>
</div>
<UsageBar percent={data.cpu} />
<UsageBar percent={data.quicklook.cpu} />
</div>
</div>
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
@ -90,7 +93,7 @@ export default function Widget({ options }) {
<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.mem,
value: data.quicklook.mem,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
@ -98,9 +101,38 @@ export default function Widget({ options }) {
</div>
<div className="pr-1">{t("glances.mem")}</div>
</div>
<UsageBar percent={data.mem} />
<UsageBar percent={data.quicklook.mem} />
</div>
</div>
{options.cputemp &&
(<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">
{t("common.number", {
value: mainTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}
</div>
<div className="pr-1">{t("glances.temp")}</div>
</span>
</div>
</div>)}
{options.uptime && data.uptime &&
(<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">
{data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
</div>
<div className="pr-1">{t("glances.uptime")}</div>
</span>
</div>
</div>)}
</div>
{options.label && (
<div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>

50
src/pages/api/widgets/glances.js
View file

@ -4,19 +4,16 @@ import { getPrivateWidgetOptions } from "utils/config/widget-helpers";
const logger = createLogger("glances");
export default async function handler(req, res) {
const { index } = req.query;
const privateWidgetOptions = await getPrivateWidgetOptions("glances", index);
async function retrieveFromGlancesAPI(privateWidgetOptions, endpoint) {
let errorMessage;
const url = privateWidgetOptions?.url;
if (!url) {
const errorMessage = "Missing Glances URL";
errorMessage = "Missing Glances URL";
logger.error(errorMessage);
return res.status(400).json({ error: errorMessage });
throw new Error(errorMessage);
}
const apiUrl = `${url}/api/3/quicklook`;
const apiUrl = `${url}/api/3/${endpoint}`;
const headers = {
"Accept-Encoding": "application/json"
};
@ -25,16 +22,41 @@ export default async function handler(req, res) {
}
const params = { method: "GET", headers };
const [status, contentType, data] = await httpProxy(apiUrl, params);
const [status, , data] = await httpProxy(apiUrl, params);
if (status === 401) {
logger.error("Authorization failure getting data from glances API. Data: %s", data);
errorMessage = `Authorization failure getting data from glances API. Data: ${data.toString()}`
logger.error(errorMessage);
throw new Error(errorMessage);
}
if (status !== 200) {
logger.error("HTTP %d getting data from glances API. Data: %s", status, data);
errorMessage = `HTTP ${status} getting data from glances API. Data: ${data.toString()}`
logger.error(errorMessage);
throw new Error(errorMessage);
}
if (contentType) res.setHeader("Content-Type", contentType);
return res.status(status).send(data);
return JSON.parse(Buffer.from(data).toString());
}
export default async function handler(req, res) {
const { index } = req.query;
const privateWidgetOptions = await getPrivateWidgetOptions("glances", index);
try {
const quicklookData = await retrieveFromGlancesAPI(privateWidgetOptions, "quicklook");
const data = {
quicklook: quicklookData
}
data.uptime = await retrieveFromGlancesAPI(privateWidgetOptions, "uptime");
data.sensors = await retrieveFromGlancesAPI(privateWidgetOptions, "sensors");
return res.status(200).send(data);
} catch (e) {
return res.status(400).json({ error: e.message });
}
}