FIx: glances containers header position (#4496)

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

docs/widgets/authoring/getting-started.md

@@ -48,7 +48,7 @@ self-hosted / open-source alternative, we ask that any widgets, etc. are develop
 
 ## New Feature Guidelines
 
-- New features should usually be linked to an existing feature request. The purpose of this requirement is to avoid the addition (and maintenance) of features that might only benefit a small number of users.
+- New features should be linked to an existing feature request. The purpose of this requirement is to avoid the addition (and maintenance) of features that might only benefit a small number of users.
 - If you have ideas for a larger feature you may want to open a discussion first.
 
 ## Service Widget Guidelines

docs/widgets/services/beszel.md

@@ -7,7 +7,7 @@ Learn more about [Beszel](https://github.com/henrygd/beszel)
 
 The widget has two modes, a single system with detailed info if `systemId` is provided, or an overview of all systems if `systemId` is not provided.
 
-The `systemID` in the `id` field on the collections page of Beszel.
+The `systemID` is the `id` field on the collections page of Beszel under the PocketBase admin panel. You can also use the 'nice name' from the Beszel UI.
 
 Allowed fields for 'overview' mode: `["systems", "up"]`
 Allowed fields for a single system: `["name", "status", "updated", "cpu", "memory", "disk", "network"]`

public/locales/it/common.json

@@ -335,7 +335,7 @@
     },
     "technitium": {
         "totalQueries": "Richieste",
-        "totalNoError": "Success",
+        "totalNoError": "Successo",
         "totalServerFailure": "Failures",
         "totalNxDomain": "NX Domains",
         "totalRefused": "Refused",
@@ -590,7 +590,7 @@
         "total": "Totale"
     },
     "peanut": {
-        "battery_charge": "Battery Charge",
+        "battery_charge": "Carica Batteria",
         "ups_load": "Carico UPS",
         "ups_status": "Stato UPS",
         "online": "Online",
@@ -854,7 +854,7 @@
     },
     "romm": {
         "platforms": "Piattaforme",
-        "totalRoms": "Games",
+        "totalRoms": "Giochi",
         "saves": "Saves",
         "states": "States",
         "screenshots": "Screenshots",
@@ -890,7 +890,7 @@
         "sceneDuration": "Durata Delle Scene",
         "images": "Immagini",
         "imageSize": "Dimensioni immagine",
-        "galleries": "Galleries",
+        "galleries": "Gallerie",
         "performers": "Esecutori",
         "studios": "Studi",
         "movies": "Film",
@@ -933,7 +933,7 @@
     },
     "stocks": {
         "stocks": "Stocks",
-        "loading": "Loading",
+        "loading": "Caricamento",
         "open": "Open - US Market",
         "closed": "Closed - US Market",
         "invalidConfiguration": "Invalid Configuration"
@@ -944,8 +944,8 @@
         "version": "Versione"
     },
     "linkwarden": {
-        "links": "Links",
-        "collections": "Collections",
+        "links": "Collegamenti",
+        "collections": "Raccolte",
         "tags": "Tag"
     },
     "zabbix": {
@@ -957,12 +957,12 @@
         "disaster": "Disaster"
     },
     "lubelogger": {
-        "vehicle": "Vehicle",
-        "vehicles": "Vehicles",
+        "vehicle": "Veicolo",
+        "vehicles": "Veicoli",
         "serviceRecords": "Service Records",
-        "reminders": "Reminders",
-        "nextReminder": "Next Reminder",
-        "none": "None"
+        "reminders": "Promemoria",
+        "nextReminder": "Promemoria Seguente",
+        "none": "Nessuno"
     },
     "vikunja": {
         "projects": "Active Projects",
@@ -1000,7 +1000,7 @@
         "suspended": "Suspended"
     },
     "spoolman": {
-        "loading": "Loading"
+        "loading": "Caricamento"
     },
     "gitlab": {
         "groups": "Groups",

public/locales/nl/common.json

@@ -311,13 +311,13 @@
     },
     "suwayomi": {
         "download": "Gedownload",
-        "nondownload": "Non-Downloaded",
+        "nondownload": "Niet gedownload",
         "read": "Gelezen",
         "unread": "Ongelezen",
-        "downloadedread": "Downloaded & Read",
-        "downloadedunread": "Downloaded & Unread",
-        "nondownloadedread": "Non-Downloaded & Read",
-        "nondownloadedunread": "Non-Downloaded & Unread"
+        "downloadedread": "Gedownload & gelezen",
+        "downloadedunread": "Gedownload & ongelezen",
+        "nondownloadedread": "Niet-gedownload & gelezen",
+        "nondownloadedunread": "Niet-gedownload & ongelezen"
     },
     "tailscale": {
         "address": "Adres",
@@ -980,32 +980,32 @@
     },
     "beszel": {
         "name": "Naam",
-        "systems": "Systems",
+        "systems": "Systemen",
         "up": "Online",
         "status": "Status",
         "updated": "Bijgewerkt",
         "cpu": "CPU",
         "memory": "GEH",
-        "disk": "Disk",
+        "disk": "Schijf",
         "network": "NET"
     },
     "argocd": {
         "apps": "Apps",
-        "synced": "Synced",
-        "outOfSync": "Out Of Sync",
+        "synced": "Gesynchroniseerd",
+        "outOfSync": "Niet gesynchroniseerd",
         "healthy": "Gezond",
-        "degraded": "Degraded",
-        "progressing": "Progressing",
+        "degraded": "Gedegradeerd",
+        "progressing": "Doorvoeren",
         "missing": "Ontbreekt",
-        "suspended": "Suspended"
+        "suspended": "Onderbroken"
     },
     "spoolman": {
         "loading": "Laden"
     },
     "gitlab": {
-        "groups": "Groups",
+        "groups": "Groepen",
         "issues": "Problemen",
-        "merges": "Merge Requests",
-        "projects": "Projects"
+        "merges": "Merge Verzoeken",
+        "projects": "Projecten"
     }
 }

src/components/services/group.jsx

@@ -15,6 +15,7 @@ export default function ServicesGroup({
   disableCollapse,
   useEqualHeights,
   groupsInitiallyCollapsed,
+  isSubgroup,
 }) {
   const panel = useRef();
 
@@ -22,14 +23,18 @@ export default function ServicesGroup({
     if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
   }, [layout, groupsInitiallyCollapsed]);
 
+  let groupPadding = layout?.header === false ? "px-1" : "p-1 pb-0";
+  if (isSubgroup) groupPadding = "";
+
   return (
     <div
       key={group.name}
       className={classNames(
-        "services-group",
+        "services-group flex-1",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
         layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
-        layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
+        groupPadding,
+        isSubgroup ? "subgroup" : "",
       )}
     >
       <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>
@@ -80,6 +85,7 @@ export default function ServicesGroup({
                   services={group.services}
                   layout={layout}
                   useEqualHeights={useEqualHeights}
+                  header={layout?.header !== false}
                 />
                 {group.groups?.length > 0 && (
                   <div
@@ -96,6 +102,7 @@ export default function ServicesGroup({
                         disableCollapse={disableCollapse}
                         useEqualHeights={useEqualHeights}
                         groupsInitiallyCollapsed={groupsInitiallyCollapsed}
+                        isSubgroup
                       />
                     ))}
                   </div>

src/components/services/item.jsx

@@ -86,7 +86,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
           <div
             className={`absolute top-0 right-0 flex flex-row justify-end ${
               statusStyle === "dot" ? "gap-0" : "gap-2 mr-2"
-            } z-30 service-tags`}
+            } z-10 service-tags`}
           >
             {service.ping && (
               <div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">

src/components/services/list.jsx

@@ -4,12 +4,13 @@ import { columnMap } from "../../utils/layout/columns";
 
 import Item from "components/services/item";
 
-export default function List({ groupName, services, layout, useEqualHeights }) {
+export default function List({ groupName, services, layout, useEqualHeights, header }) {
   return (
     <ul
       className={classNames(
         layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
-        "mt-3 services-list",
+        header ? "mt-3" : "",
+        "services-list",
       )}
     >
       {services.map((service) => (

src/pages/index.jsx

@@ -297,7 +297,6 @@ function Home({ initialSettings }) {
                   disableCollapse={settings.disableCollapse}
                   useEqualHeights={settings.useEqualHeights}
                   groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
-                  bookmarksStyle={settings.bookmarksStyle}
                 />
               ) : (
                 <BookmarksGroup

src/styles/globals.css

@@ -63,3 +63,7 @@ dialog ::-webkit-scrollbar {
 ::-webkit-details-marker {
   display: none;
 }
+
+.chart + .chart {
+  margin-top: 2em;
+}

src/widgets/beszel/component.jsx

@@ -20,8 +20,20 @@ export default function Component({ service }) {
     widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
   }
 
-  if (systemsError) {
-    return <Container service={service} error={systemsError} />;
+  let system = null;
+  let finalError = systemsError;
+
+  if (systems && !systems.items) {
+    finalError = { message: "No items returned from beszel API" };
+  } else if (systems && systems.items && systemId) {
+    system = systems.items.find((item) => item.id === systemId || item.name === systemId);
+    if (!system) {
+      finalError = { message: `System with id ${systemId} not found` };
+    }
+  }
+
+  if (finalError) {
+    return <Container service={service} error={finalError} />;
   }
 
   if (!systems) {
@@ -33,9 +45,7 @@ export default function Component({ service }) {
     );
   }
 
-  if (systemId) {
-    const system = systems.items.find((item) => item.id === systemId);
-
+  if (system) {
     return (
       <Container service={service}>
         <Block label="beszel.name" value={system.name} />

src/widgets/beszel/proxy.js

@@ -59,7 +59,7 @@ export default async function beszelProxyHandler(req, res) {
       if (!token) {
         [status, token] = await login(loginUrl, widget.username, widget.password, service);
         if (status !== 200) {
-          logger.debug(`HTTP ${status} logging into Beszel: ${token}`);
+          logger.debug(`HTTP ${status} logging into Beszel: ${JSON.stringify(token)}`);
           return res.status(status).send(token);
         }
       }
@@ -72,13 +72,13 @@ export default async function beszelProxyHandler(req, res) {
         },
       });
 
-      if (status === 403) {
+      if ([400, 403].includes(status)) {
         logger.debug(`HTTP ${status} retrieving data from Beszel, logging in and trying again.`);
         cache.del(`${tokenCacheKey}.${service}`);
         [status, token] = await login(loginUrl, widget.username, widget.password, service);
 
         if (status !== 200) {
-          logger.debug(`HTTP ${status} logging into Beszel: ${data}`);
+          logger.debug(`HTTP ${status} logging into Beszel: ${JSON.stringify(data)}`);
           return res.status(status).send(data);
         }
 

src/widgets/glances/components/chart.jsx

@@ -8,7 +8,7 @@ class Chart extends PureComponent {
     const { dataPoints, formatter, label } = this.props;
 
     return (
-      <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
+      <div className="absolute -top-10 -left-2 h-[calc(100%+3em)] w-[calc(100%+1em)] z-0">
         <div className="overflow-clip z-10 w-full h-full">
           <ResponsiveContainer width="100%" height="100%">
             <AreaChart data={dataPoints}>

src/widgets/glances/components/chart_dual.jsx

@@ -8,7 +8,7 @@ class ChartDual extends PureComponent {
     const { dataPoints, formatter, stack, label, stackOffset } = this.props;
 
     return (
-      <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
+      <div className="absolute -top-10 -left-2 h-[calc(100%+3em)] w-[calc(100%+1em)] z-0">
         <div className="overflow-clip z-10 w-full h-full">
           <ResponsiveContainer width="100%" height="100%">
             <AreaChart data={dataPoints} stackOffset={stackOffset ?? "none"}>

src/widgets/glances/components/container.jsx

@@ -18,9 +18,9 @@ export default function Container({ children, widget, error = null, chart = true
   }
 
   return (
-    <div className={classNames("service-container", chart ? "chart relative h-[120px]" : "")}>
+    <div className={classNames("service-container", chart ? "chart relative h-[68px]" : "")}>
       {children}
-      <div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
+      <div className={`absolute -top-10 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
       {chart && <div className="h-[68px] overflow-clip" />}
       {!chart && <div className="h-[16px] overflow-clip" />}
     </div>

src/widgets/glances/metrics/containers.jsx

@@ -38,10 +38,16 @@ export default function Component({ service }) {
   }
 
   data.splice(chart ? 5 : 1);
+  let headerYPosition = "top-4";
+  let listYPosition = "bottom-4";
+  if (chart) {
+    headerYPosition = "-top-6";
+    listYPosition = "-top-3";
+  }
 
   return (
     <Container chart={chart}>
-      <Block position="top-4 right-3 left-3">
+      <Block position={`${headerYPosition} right-3 left-3`}>
         <div className="flex items-center text-xs">
           <div className="grow" />
           <div className="w-14 text-right italic">{t("resources.cpu")}</div>
@@ -49,7 +55,7 @@ export default function Component({ service }) {
         </div>
       </Block>
 
-      <Block position="bottom-4 right-3 left-3">
+      <Block position={`${listYPosition} right-3 left-3`}>
         <div className="pointer-events-none text-theme-900 dark:text-theme-200">
           {data.map((item) => (
             <div key={item[idKey]} className="text-[0.75rem] h-[0.8rem]">

src/widgets/glances/metrics/fs.jsx

@@ -43,7 +43,7 @@ export default function Component({ service }) {
   return (
     <Container chart={chart}>
       {chart && (
-        <div className="absolute top-0 left-0 right-0 bottom-0">
+        <div className="absolute -top-2 -left-2 -right-2 -bottom-2">
           <div
             style={{
               height: `${Math.max(20, fsData.size / fsData.free)}%`,

src/widgets/glances/metrics/info.jsx

@@ -107,8 +107,12 @@ export default function Component({ service }) {
   }
 
   return (
-    <Container chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
-      <Block position="top-3 right-3">
+    <Container chart={chart}>
+      {chart && (
+        <div className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10 absolute -top-10 -left-2 -right-2 -bottom-2 h-[calc(100%+3em)] w-[calc(100%+1em)]" />
+      )}
+
+      <Block position="-top-6 right-2">
         {quicklookData && quicklookData.cpu_name && chart && (
           <div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name}</div>
         )}
@@ -124,7 +128,7 @@ export default function Component({ service }) {
       </Block>
 
       {chart && (
-        <Block position="bottom-3 left-3">
+        <Block position="bottom-3 left-2">
           {systemData && systemData.linux_distro && <div className="text-xs opacity-50">{systemData.linux_distro}</div>}
           {systemData && systemData.os_version && <div className="text-xs opacity-50">{systemData.os_version}</div>}
           {systemData && systemData.hostname && <div className="text-xs opacity-75">{systemData.hostname}</div>}
@@ -137,7 +141,7 @@ export default function Component({ service }) {
         </Block>
       )}
 
-      <Block position="bottom-3 right-3 w-[4rem]">
+      <Block position="bottom-3 right-2 w-[4rem]">
         {chart && <CPU quicklookData={quicklookData} className="opacity-50" />}
 
         {chart && <Mem quicklookData={quicklookData} className="opacity-50" />}

src/widgets/glances/metrics/process.jsx

@@ -42,10 +42,16 @@ export default function Component({ service }) {
   }
 
   data.splice(chart ? 5 : 1);
+  let headerYPosition = "top-4";
+  let listYPosition = "bottom-4";
+  if (chart) {
+    headerYPosition = "-top-6";
+    listYPosition = "-top-3";
+  }
 
   return (
     <Container chart={chart}>
-      <Block position="top-4 right-3 left-3">
+      <Block position={`${headerYPosition} right-3 left-3`}>
         <div className="flex items-center text-xs">
           <div className="grow" />
           <div className="w-14 text-right italic">{t("resources.cpu")}</div>
@@ -53,7 +59,7 @@ export default function Component({ service }) {
         </div>
       </Block>
 
-      <Block position="bottom-4 right-3 left-3">
+      <Block position={`${listYPosition} right-3 left-3`}>
         <div className="pointer-events-none text-theme-900 dark:text-theme-200">
           {data.map((item) => (
             <div key={item.pid} className="text-[0.75rem] h-[0.8rem]">