mirror of
				https://github.com/karl0ss/homepage.git
				synced 2025-11-04 00:10:57 +00:00 
			
		
		
		
	Enhancement: support different bytes multipliers for disk space for resources / glances and metrics widgets (#2966)
This commit is contained in:
		
							parent
							
								
									3fae59c2bd
								
							
						
					
					
						commit
						291bf422f9
					
				@ -17,6 +17,7 @@ The Glances widget allows you to monitor the resources (CPU, memory, storage, te
 | 
			
		||||
    cputemp: true # disabled by default
 | 
			
		||||
    uptime: true # disabled by default
 | 
			
		||||
    disk: / # disabled by default, use mount point of disk(s) in glances. Can also be a list (see below)
 | 
			
		||||
    diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
 | 
			
		||||
    expanded: true # show the expanded view
 | 
			
		||||
    label: MyMachine # optional
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@ -22,6 +22,7 @@ _Note: unfortunately, the package used for getting CPU temp ([systeminformation]
 | 
			
		||||
    uptime: true
 | 
			
		||||
    units: imperial # only used by cpu temp
 | 
			
		||||
    refresh: 3000 # optional, in ms
 | 
			
		||||
    diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
You can also pass a `label` option, which allows you to group resources under named sections,
 | 
			
		||||
 | 
			
		||||
@ -18,6 +18,7 @@ widget:
 | 
			
		||||
  username: user # optional if auth enabled in Glances
 | 
			
		||||
  password: pass # optional if auth enabled in Glances
 | 
			
		||||
  metric: cpu
 | 
			
		||||
  diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
_Please note, this widget does not need an `href`, `icon` or `description` on its parent service. To achieve the same effect as the examples above, see as an example:_
 | 
			
		||||
 | 
			
		||||
@ -21,6 +21,7 @@ function convertToFahrenheit(t) {
 | 
			
		||||
export default function Widget({ options }) {
 | 
			
		||||
  const { t, i18n } = useTranslation();
 | 
			
		||||
  const { settings } = useContext(SettingsContext);
 | 
			
		||||
  const diskUnits = options.diskUnits === "bbytes" ? "common.bbytes" : "common.bytes";
 | 
			
		||||
 | 
			
		||||
  const { data, error } = useSWR(
 | 
			
		||||
    `/api/widgets/glances?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`,
 | 
			
		||||
@ -132,9 +133,9 @@ export default function Widget({ options }) {
 | 
			
		||||
        <Resource
 | 
			
		||||
          key={`disk_${disk.mnt_point ?? disk.device_name}`}
 | 
			
		||||
          icon={FiHardDrive}
 | 
			
		||||
          value={t("common.bytes", { value: disk.free })}
 | 
			
		||||
          value={t(diskUnits, { value: disk.free })}
 | 
			
		||||
          label={t("glances.free")}
 | 
			
		||||
          expandedValue={t("common.bytes", { value: disk.size })}
 | 
			
		||||
          expandedValue={t(diskUnits, { value: disk.size })}
 | 
			
		||||
          expandedLabel={t("glances.total")}
 | 
			
		||||
          percentage={disk.percent}
 | 
			
		||||
          expanded={options.expanded}
 | 
			
		||||
 | 
			
		||||
@ -5,8 +5,9 @@ import { useTranslation } from "next-i18next";
 | 
			
		||||
import Resource from "../widget/resource";
 | 
			
		||||
import Error from "../widget/error";
 | 
			
		||||
 | 
			
		||||
export default function Disk({ options, expanded, refresh = 1500 }) {
 | 
			
		||||
export default function Disk({ options, expanded, diskUnits, refresh = 1500 }) {
 | 
			
		||||
  const { t } = useTranslation();
 | 
			
		||||
  const diskUnitsName = diskUnits === "bbytes" ? "common.bbytes" : "common.bytes";
 | 
			
		||||
 | 
			
		||||
  const { data, error } = useSWR(`/api/widgets/resources?type=disk&target=${options.disk}`, {
 | 
			
		||||
    refreshInterval: refresh,
 | 
			
		||||
@ -36,9 +37,9 @@ export default function Disk({ options, expanded, refresh = 1500 }) {
 | 
			
		||||
  return (
 | 
			
		||||
    <Resource
 | 
			
		||||
      icon={FiHardDrive}
 | 
			
		||||
      value={t("common.bytes", { value: data.drive.available })}
 | 
			
		||||
      value={t(diskUnitsName, { value: data.drive.available })}
 | 
			
		||||
      label={t("resources.free")}
 | 
			
		||||
      expandedValue={t("common.bytes", { value: data.drive.size })}
 | 
			
		||||
      expandedValue={t(diskUnitsName, { value: data.drive.size })}
 | 
			
		||||
      expandedLabel={t("resources.total")}
 | 
			
		||||
      percentage={percent}
 | 
			
		||||
      expanded={expanded}
 | 
			
		||||
 | 
			
		||||
@ -8,7 +8,7 @@ import CpuTemp from "./cputemp";
 | 
			
		||||
import Uptime from "./uptime";
 | 
			
		||||
 | 
			
		||||
export default function Resources({ options }) {
 | 
			
		||||
  const { expanded, units } = options;
 | 
			
		||||
  const { expanded, units, diskUnits } = options;
 | 
			
		||||
  let { refresh } = options;
 | 
			
		||||
  if (!refresh) refresh = 1500;
 | 
			
		||||
  refresh = Math.max(refresh, 1000);
 | 
			
		||||
@ -19,8 +19,10 @@ export default function Resources({ options }) {
 | 
			
		||||
          {options.cpu && <Cpu expanded={expanded} refresh={refresh} />}
 | 
			
		||||
          {options.memory && <Memory expanded={expanded} refresh={refresh} />}
 | 
			
		||||
          {Array.isArray(options.disk)
 | 
			
		||||
            ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} refresh={refresh} />)
 | 
			
		||||
            : options.disk && <Disk options={options} expanded={expanded} refresh={refresh} />}
 | 
			
		||||
            ? options.disk.map((disk) => (
 | 
			
		||||
                <Disk key={disk} options={{ disk }} expanded={expanded} diskUnits={diskUnits} refresh={refresh} />
 | 
			
		||||
              ))
 | 
			
		||||
            : options.disk && <Disk options={options} expanded={expanded} diskUnits={diskUnits} refresh={refresh} />}
 | 
			
		||||
          {options.cputemp && <CpuTemp expanded={expanded} units={units} refresh={refresh} />}
 | 
			
		||||
          {options.uptime && <Uptime refresh={refresh} />}
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
@ -395,6 +395,7 @@ export function cleanServiceGroups(groups) {
 | 
			
		||||
          chart,
 | 
			
		||||
          metric,
 | 
			
		||||
          pointsLimit,
 | 
			
		||||
          diskUnits,
 | 
			
		||||
 | 
			
		||||
          // glances, customapi, iframe
 | 
			
		||||
          refreshInterval,
 | 
			
		||||
@ -533,6 +534,7 @@ export function cleanServiceGroups(groups) {
 | 
			
		||||
          }
 | 
			
		||||
          if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval;
 | 
			
		||||
          if (pointsLimit) cleanedService.widget.pointsLimit = pointsLimit;
 | 
			
		||||
          if (diskUnits) cleanedService.widget.diskUnits = diskUnits;
 | 
			
		||||
        }
 | 
			
		||||
        if (type === "mjpeg") {
 | 
			
		||||
          if (stream) cleanedService.widget.stream = stream;
 | 
			
		||||
 | 
			
		||||
@ -13,6 +13,7 @@ export default function Component({ service }) {
 | 
			
		||||
  const { widget } = service;
 | 
			
		||||
  const { chart, refreshInterval = defaultInterval } = widget;
 | 
			
		||||
  const [, fsName] = widget.metric.split("fs:");
 | 
			
		||||
  const diskUnits = widget.diskUnits === "bbytes" ? "common.bbytes" : "common.bytes";
 | 
			
		||||
 | 
			
		||||
  const { data, error } = useWidgetAPI(widget, "fs", {
 | 
			
		||||
    refreshInterval: Math.max(defaultInterval, refreshInterval),
 | 
			
		||||
@ -60,7 +61,7 @@ export default function Component({ service }) {
 | 
			
		||||
      <Block position="bottom-3 left-3">
 | 
			
		||||
        {fsData.used && chart && (
 | 
			
		||||
          <div className="text-xs opacity-50">
 | 
			
		||||
            {t("common.bbytes", {
 | 
			
		||||
            {t(diskUnits, {
 | 
			
		||||
              value: fsData.used,
 | 
			
		||||
              maximumFractionDigits: 0,
 | 
			
		||||
            })}{" "}
 | 
			
		||||
@ -69,7 +70,7 @@ export default function Component({ service }) {
 | 
			
		||||
        )}
 | 
			
		||||
 | 
			
		||||
        <div className="text-xs opacity-75">
 | 
			
		||||
          {t("common.bbytes", {
 | 
			
		||||
          {t(diskUnits, {
 | 
			
		||||
            value: fsData.free,
 | 
			
		||||
            maximumFractionDigits: 1,
 | 
			
		||||
          })}{" "}
 | 
			
		||||
@ -81,7 +82,7 @@ export default function Component({ service }) {
 | 
			
		||||
        <Block position="top-3 right-3">
 | 
			
		||||
          {fsData.used && (
 | 
			
		||||
            <div className="text-xs opacity-50">
 | 
			
		||||
              {t("common.bbytes", {
 | 
			
		||||
              {t(diskUnits, {
 | 
			
		||||
                value: fsData.used,
 | 
			
		||||
                maximumFractionDigits: 0,
 | 
			
		||||
              })}{" "}
 | 
			
		||||
@ -93,7 +94,7 @@ export default function Component({ service }) {
 | 
			
		||||
 | 
			
		||||
      <Block position="bottom-3 right-3">
 | 
			
		||||
        <div className="text-xs opacity-75">
 | 
			
		||||
          {t("common.bbytes", {
 | 
			
		||||
          {t(diskUnits, {
 | 
			
		||||
            value: fsData.size,
 | 
			
		||||
            maximumFractionDigits: 1,
 | 
			
		||||
          })}{" "}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user