Show usage stats in System Health (#12424)

src/common/util/subscribe-polling.ts

@@ -0,0 +1,18 @@
+import { HomeAssistant } from "../../types";
+
+export const subscribePollingCollection = (
+  hass: HomeAssistant,
+  updateData: (hass: HomeAssistant) => void,
+  interval: number
+) => {
+  let timeout;
+  const fetchData = async () => {
+    try {
+      await updateData(hass);
+    } finally {
+      timeout = setTimeout(() => fetchData(), interval);
+    }
+  };
+  fetchData();
+  return () => clearTimeout(timeout);
+};

src/panels/config/ha-panel-config.ts

@@ -322,7 +322,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "ui.panel.config.system_health.caption",
       iconPath: mdiHeart,
       iconColor: "#507FfE",
-      component: "system_health",
+      components: ["system_health", "hassio"],
     },
   ],
   about: [

src/panels/config/system-health/ha-config-system-health.ts

@@ -1,13 +1,19 @@
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiContentCopy } from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket/dist/types";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
+import { subscribePollingCollection } from "../../../common/util/subscribe-polling";
+import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
+import "../../../components/ha-metric";
+import { fetchHassioStats, HassioStats } from "../../../data/hassio/common";
 import { domainToName } from "../../../data/integration";
 import {
   subscribeSystemHealthInfo,
@@ -15,6 +21,7 @@ import {
   SystemHealthInfo,
 } from "../../../data/system_health";
 import "../../../layouts/hass-subpage";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
 import { showToast } from "../../../util/toast";
 
@@ -35,21 +42,52 @@ const sortKeys = (a: string, b: string) => {
 };
 
 @customElement("ha-config-system-health")
-class HaConfigSystemHealth extends LitElement {
+class HaConfigSystemHealth extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
   @state() private _info?: SystemHealthInfo;
 
+  @state() private _supervisorStats?: HassioStats;
+
+  @state() private _coreStats?: HassioStats;
+
+  @state() private _error?: { code: string; message: string };
+
+  public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
+    const subs: Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> = [];
+    if (isComponentLoaded(this.hass, "system_health")) {
+      subs.push(
+        subscribeSystemHealthInfo(this.hass!, (info) => {
+          this._info = info;
+        })
+      );
+    }
+
+    if (isComponentLoaded(this.hass, "hassio")) {
+      subs.push(
+        subscribePollingCollection(
+          this.hass,
+          async () => {
+            this._supervisorStats = await fetchHassioStats(
+              this.hass,
+              "supervisor"
+            );
+            this._coreStats = await fetchHassioStats(this.hass, "core");
+          },
+          10000
+        )
+      );
+    }
+
+    return subs;
+  }
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
     this.hass!.loadBackendTranslation("system_health");
-
-    subscribeSystemHealthInfo(this.hass!, (info) => {
-      this._info = info;
-    });
   }
 
   protected render(): TemplateResult {
@@ -152,6 +190,15 @@ class HaConfigSystemHealth extends LitElement {
         back-path="/config/system"
         .header=${this.hass.localize("ui.panel.config.system_health.caption")}
       >
+        ${this._error
+          ? html`
+              <ha-alert alert-type="error"
+                >${this._error.message || this._error.code}</ha-alert
+              >
+            `
+          : ""}
+        ${this._info
+          ? html`
               <ha-button-menu
                 corner="BOTTOM_START"
                 slot="toolbar-icon"
@@ -169,10 +216,62 @@ class HaConfigSystemHealth extends LitElement {
                   ${this.hass.localize("ui.panel.config.info.copy_github")}
                 </mwc-list-item>
               </ha-button-menu>
+            `
+          : ""}
         <div class="content">
           <ha-card outlined>
             <div class="card-content">${sections}</div>
           </ha-card>
+          ${!this._coreStats && !this._supervisorStats
+            ? ""
+            : html`
+                <ha-card outlined>
+                  <div class="card-content">
+                    ${this._coreStats
+                      ? html`
+                          <h3>
+                            ${this.hass.localize(
+                              "ui.panel.config.system_health.core_stats"
+                            )}
+                          </h3>
+                          <ha-metric
+                            .heading=${this.hass.localize(
+                              "ui.panel.config.system_health.cpu_usage"
+                            )}
+                            .value=${this._coreStats.cpu_percent}
+                          ></ha-metric>
+                          <ha-metric
+                            .heading=${this.hass.localize(
+                              "ui.panel.config.system_health.ram_usage"
+                            )}
+                            .value=${this._coreStats.memory_percent}
+                          ></ha-metric>
+                        `
+                      : ""}
+                    ${this._supervisorStats
+                      ? html`
+                          <h3>
+                            ${this.hass.localize(
+                              "ui.panel.config.system_health.supervisor_stats"
+                            )}
+                          </h3>
+                          <ha-metric
+                            .heading=${this.hass.localize(
+                              "ui.panel.config.system_health.cpu_usage"
+                            )}
+                            .value=${this._supervisorStats.cpu_percent}
+                          ></ha-metric>
+                          <ha-metric
+                            .heading=${this.hass.localize(
+                              "ui.panel.config.system_health.ram_usage"
+                            )}
+                            .value=${this._supervisorStats.memory_percent}
+                          ></ha-metric>
+                        `
+                      : ""}
+                  </div>
+                </ha-card>
+              `}
         </div>
       </hass-subpage>
     `;

src/translations/en.json

@@ -1677,7 +1677,6 @@
             }
           }
         },
-
         "automation": {
           "caption": "Automations",
           "description": "Create custom behavior rules for your home",
@@ -3167,7 +3166,11 @@
           }
         },
         "system_health": {
-          "caption": "System Health"
+          "caption": "System Health",
+          "cpu_usage": "CPU Usage",
+          "ram_usage": "RAM Usage",
+          "core_stats": "Core Stats",
+          "supervisor_stats": "Supervisor Stats"
         }
       },
       "lovelace": {