diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index b4208a6f8f..8c91d8b98b 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/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,249 +258,281 @@ class HassioAddonInfo extends LitElement { > for details. - ${this.addon.logo - ? html` - - ` - : ""} -
- ${this.addon.stage !== "stable" - ? html` +
+ ${this.addon.logo + ? html` + + ` + : ""} +
+ ${this.addon.stage !== "stable" + ? html` + + ` + : ""} + + - - ` - : ""} + > + ${this.addon.host_network + ? html` + + + + ` + : ""} + ${this.addon.full_access + ? html` + + + + ` + : ""} + ${this.addon.homeassistant_api + ? html` + + + + ` + : ""} + ${this._computeHassioApi + ? html` + + + + ` + : ""} + ${this.addon.docker_api + ? html` + + + + ` + : ""} + ${this.addon.host_pid + ? html` + + + + ` + : ""} + ${this.addon.apparmor + ? html` + + + + ` + : ""} + ${this.addon.auth_api + ? html` + + + + ` + : ""} + ${this.addon.ingress + ? html` + + + + ` + : ""} +
- - ${this.addon.host_network - ? html` - - - - ` - : ""} - ${this.addon.full_access - ? html` - - - - ` - : ""} - ${this.addon.homeassistant_api - ? html` - - - - ` - : ""} - ${this._computeHassioApi - ? html` - - - - ` - : ""} - ${this.addon.docker_api - ? html` - - - - ` - : ""} - ${this.addon.host_pid - ? html` - - - - ` - : ""} - ${this.addon.apparmor - ? html` - - - - ` - : ""} - ${this.addon.auth_api - ? html` - - - - ` - : ""} - ${this.addon.ingress - ? html` - - - - ` - : ""} + ${this.addon.version + ? html` +
+ + + Start on boot + + + Make the add-on start during a system boot + + + + + ${this.addon.startup !== "once" + ? html` + + + Watchdog + + + This will start the add-on if it crashes + + + + ` + : ""} + ${this.addon.auto_update || + this.hass.userData?.showAdvanced + ? html` + + + Auto update + + + Auto update the add-on when there is a new + version available + + + + ` + : ""} + ${this.addon.ingress + ? html` + + + Show in sidebar + + + ${this._computeCannotIngressSidebar + ? "This option requires Home Assistant 0.92 or later." + : "Add this add-on to your sidebar"} + + + + ` + : ""} + ${this._computeUsesProtectedOptions + ? html` + + + Protection mode + + + Blocks elevated system access from the add-on + + + + ` + : ""} +
+ ` + : ""} +
+
+ ${this.addon.state === "started" + ? html` + + Hostname + + + ${this.addon.hostname} + + + ${metrics.map( + (metric) => + html` + + ` + )}` + : ""} +
- - ${this.addon.version - ? html` -
- - - Start on boot - - - Make the add-on start during a system boot - - - - - ${this.addon.startup !== "once" - ? html` - - - Watchdog - - - This will start the add-on if it crashes - - - - ` - : ""} - ${this.addon.auto_update || this.hass.userData?.showAdvanced - ? html` - - - Auto update - - - Auto update the add-on when there is a new version - available - - - - ` - : ""} - ${this.addon.ingress - ? html` - - - Show in sidebar - - - ${this._computeCannotIngressSidebar - ? "This option requires Home Assistant 0.92 or later." - : "Add this add-on to your sidebar"} - - - - ` - : ""} - ${this._computeUsesProtectedOptions - ? html` - - - Protection mode - - - Blocks elevated system access from the add-on - - - - ` - : ""} -
- ` - : ""} ${this._error ? html`
${this._error}
` : ""}
@@ -579,6 +632,22 @@ class HassioAddonInfo extends LitElement { `; } + protected updated(changedProps) { + super.updated(changedProps); + if (changedProps.has("addon")) { + this._loadData(); + } + } + + private async _loadData(): Promise { + 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; + } } `, ]; diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts index 5e05ae05bc..963af90aa6 100644 --- a/src/data/hassio/addon.ts +++ b/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;