update glances widget

public/locales/en/common.json

@@ -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",

src/components/widgets/glances/glances.jsx

@@ -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>

src/pages/api/widgets/glances.js

@@ -4,19 +4,16 @@ import { getPrivateWidgetOptions } from "utils/config/widget-helpers";
 
 const logger = createLogger("glances");
 
-export default async function handler(req, res) {
+async function retrieveFromGlancesAPI(privateWidgetOptions, endpoint) {
-  const { index } = req.query;
+  let errorMessage;
-
-  const privateWidgetOptions = await getPrivateWidgetOptions("glances", index);
-  
   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 JSON.parse(Buffer.from(data).toString());
-  return res.status(status).send(data);
+}
+
+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 });
+  }
 }