Add hostname and metrics to Add-ons (#8253)

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -49,14 +49,20 @@ import {
   uninstallHassioAddon,
   validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  extractApiErrorMessage,
+  fetchHassioStats,
+  HassioStats,
+} from "../../../../src/data/hassio/common";
 import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
+import "../../components/supervisor-metric";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
 import { hassioStyle } from "../../resources/hassio-style";
 
@@ -131,9 +137,24 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
+  @internalProperty() private _metrics?: HassioStats;
+
   @internalProperty() private _error?: string;
 
   protected render(): TemplateResult {
+    const metrics = [
+      {
+        description: "Add-on CPU Usage",
+        value: this._metrics?.cpu_percent,
+      },
+      {
+        description: "Add-on RAM Usage",
+        value: this._metrics?.memory_percent,
+        tooltip: `${bytesToString(this._metrics?.memory_usage)}/${bytesToString(
+          this._metrics?.memory_limit
+        )}`,
+      },
+    ];
     return html`
       ${this.addon.update_available
         ? html`
@@ -237,6 +258,8 @@ class HassioAddonInfo extends LitElement {
             >
             for details.
           </div>
+          <div class="addon-container">
+            <div>
               ${this.addon.logo
                 ? html`
                     <img
@@ -390,7 +413,12 @@ class HassioAddonInfo extends LitElement {
 
               ${this.addon.version
                 ? html`
-                <div class="addon-options">
+                    <div
+                      class="${classMap({
+                        "addon-options": true,
+                        started: this.addon.state === "started",
+                      })}"
+                    >
                       <ha-settings-row ?three-line=${this.narrow}>
                         <span slot="heading">
                           Start on boot
@@ -422,15 +450,16 @@ class HassioAddonInfo extends LitElement {
                             </ha-settings-row>
                           `
                         : ""}
-                  ${this.addon.auto_update || this.hass.userData?.showAdvanced
+                      ${this.addon.auto_update ||
+                      this.hass.userData?.showAdvanced
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
                                 Auto update
                               </span>
                               <span slot="description">
-                            Auto update the add-on when there is a new version
+                                Auto update the add-on when there is a new
-                            available
+                                version available
                               </span>
                               <ha-switch
                                 @change=${this._autoUpdateToggled}
@@ -480,6 +509,30 @@ class HassioAddonInfo extends LitElement {
                     </div>
                   `
                 : ""}
+            </div>
+            <div>
+              ${this.addon.state === "started"
+                ? html`<ha-settings-row ?three-line=${this.narrow}>
+                      <span slot="heading">
+                        Hostname
+                      </span>
+                      <code slot="description">
+                        ${this.addon.hostname}
+                      </code>
+                    </ha-settings-row>
+                    ${metrics.map(
+                      (metric) =>
+                        html`
+                          <supervisor-metric
+                            .description=${metric.description}
+                            .value=${metric.value ?? 0}
+                            .tooltip=${metric.tooltip}
+                          ></supervisor-metric>
+                        `
+                    )}`
+                : ""}
+            </div>
+          </div>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
         </div>
         <div class="card-actions">
@@ -579,6 +632,22 @@ class HassioAddonInfo extends LitElement {
     `;
   }
 
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("addon")) {
+      this._loadData();
+    }
+  }
+
+  private async _loadData(): Promise<void> {
+    if (this.addon.state === "started") {
+      this._metrics = await fetchHassioStats(
+        this.hass,
+        `addons/${this.addon.slug}`
+      );
+    }
+  }
+
   private get _computeHassioApi(): boolean {
     return (
       this.addon.hassio_api &&
@@ -988,10 +1057,26 @@ class HassioAddonInfo extends LitElement {
         .addon-options {
           max-width: 50%;
         }
+        .addon-options.started {
+          max-width: 90%;
+        }
+
+        .addon-container {
+          display: grid;
+          grid-auto-flow: column;
+          grid-template-columns: 1fr auto;
+        }
+        .addon-container div:last-of-type {
+          align-self: end;
+        }
+
         @media (max-width: 720px) {
           .addon-options {
             max-width: 100%;
           }
+          .addon-container {
+            display: block;
+          }
         }
       `,
     ];

src/data/hassio/addon.ts

@@ -41,6 +41,7 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   gpio: boolean;
   hassio_api: boolean;
   hassio_role: "default" | "homeassistant" | "manager" | "admin";
+  hostname: string;
   homeassistant_api: boolean;
   homeassistant: string;
   host_dbus: boolean;