Supervisor disk usage more info

hassio/src/system/hassio-system-metrics.ts

@@ -24,6 +24,7 @@ import { HomeAssistant } from "../../../src/types";
 import {
   getValueInPercentage,
   roundWithOneDecimal,
+  bytesToString,
 } from "../../../src/util/calculate";
 import { hassioStyle } from "../resources/hassio-style";
 
@@ -38,35 +39,49 @@ class HassioSystemMetrics extends LitElement {
   @internalProperty() private _coreMetrics?: HassioStats;
 
   protected render(): TemplateResult | void {
-    const usedSpace = this._getUsedSpace(this.hostInfo);
+    const host = this.hostInfo
+    const usedSpace = this._getUsedSpace(host);
+    const usedSpaceTitle =
+      bytesToString(host.disk_used * 1e6) +
+      "/" +
+      bytesToString(host.disk_total * 1e6);
     const metrics = [
       {
         description: "Core CPU Usage",
         value: this._coreMetrics?.cpu_percent,
+        title: "",
       },
       {
         description: "Core RAM Usage",
         value: this._coreMetrics?.memory_percent,
+        title: "",
       },
       {
         description: "Supervisor CPU Usage",
         value: this._supervisorMetrics?.cpu_percent,
+        title: "",
       },
       {
         description: "Supervisor RAM Usage",
         value: this._supervisorMetrics?.memory_percent,
+        title: "",
       },
       {
         description: "Used Space",
         value: usedSpace,
+        title: usedSpaceTitle,
       },
     ];
 
     return html`
       <ha-card header="System Metrics">
         <div class="card-content">
           ${metrics.map((metric) =>
-            this._renderMetric(metric.description, metric.value ?? 0)
+            this._renderMetric(
+              metric.description,
+              metric.value ?? 0,
+              metric.title
+            )
           )}
         </div>
       </ha-card>
@@ -77,7 +92,11 @@ class HassioSystemMetrics extends LitElement {
     this._loadData();
   }
 
-  private _renderMetric(description: string, value: number): TemplateResult {
+  private _renderMetric(
+    description: string,
+    value: number,
+    title: string
+  ): TemplateResult {
     const roundedValue = roundWithOneDecimal(value);
     return html`<ha-settings-row>
       <span slot="heading">
@@ -88,6 +107,7 @@ class HassioSystemMetrics extends LitElement {
           ${roundedValue}%
         </span>
         <ha-bar
+          title="${title}"
           class="${classMap({
             "target-warning": roundedValue > 50,
             "target-critical": roundedValue > 85,
@@ -155,6 +175,7 @@ class HassioSystemMetrics extends LitElement {
         }
         .value {
           width: 42px;
+          padding-right: 4px;
         }
       `,
     ];

src/util/calculate.ts

@@ -21,3 +21,12 @@ export const getValueInPercentage = (
 export const roundWithOneDecimal = (value: number): number => {
   return Math.round(value * 10) / 10;
 };
+
+export const bytesToString = (value: number, decimals = 3): string => {
+    if (value === 0) return '0 Bytes';
+    const k = 1024;
+    decimals = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(value) / Math.log(k));
+    return parseFloat((value / k ** i).toFixed(decimals)) + ' ' + sizes[i];
+}