Show the reason why an add-on is not available (#8312)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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

@@ -19,6 +19,7 @@ import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -35,6 +36,8 @@ import "./log/hassio-addon-logs";
 class HassioAddonDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public route!: Route;
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
@@ -106,6 +109,7 @@ class HassioAddonDashboard extends LitElement {
           .route=${route}
           .narrow=${this.narrow}
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-router>
       </hass-tabs-subpage>

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

@@ -1,5 +1,6 @@
 import { customElement, property } from "lit-element";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,
   RouterOptions,
@@ -17,6 +18,8 @@ class HassioAddonRouter extends HassRouterPage {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   protected routerOptions: RouterOptions = {
@@ -41,6 +44,7 @@ class HassioAddonRouter extends HassRouterPage {
   protected updatePageEl(el) {
     el.route = this.routeTail;
     el.hass = this.hass;
+    el.supervisor = this.supervisor;
     el.addon = this.addon;
     el.narrow = this.narrow;
   }

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

@@ -9,6 +9,7 @@ import {
 } from "lit-element";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -20,6 +21,8 @@ class HassioAddonInfoDashboard extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
@@ -32,6 +35,7 @@ class HassioAddonInfoDashboard extends LitElement {
         <hassio-addon-info
           .narrow=${this.narrow}
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-info>
       </div>

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

@@ -54,6 +54,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -65,6 +66,7 @@ import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
 import { hassioStyle } from "../../resources/hassio-style";
+import { addonArchIsSupported } from "../../util/addon";
 
 const STAGE_ICON = {
   stable: mdiCheckCircle,
@@ -137,6 +139,8 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @internalProperty() private _metrics?: HassioStats;
 
   @internalProperty() private _error?: string;
@@ -170,11 +174,25 @@ class HassioAddonInfo extends LitElement {
                   iconClass="update"
                 ></hassio-card-content>
                 ${!this.addon.available
-                  ? html`
-                      <p>
-                        This update is no longer compatible with your system.
-                      </p>
-                    `
+                  ? !addonArchIsSupported(
+                      this.supervisor.info.supported_arch,
+                      this.addon.arch
+                    )
+                    ? html`
+                        <p>
+                          This add-on is not compatible with the processor of
+                          your device or the operating system you have installed
+                          on your device.
+                        </p>
+                      `
+                    : html`
+                        <p>
+                          You are running Home Assistant
+                          ${this.supervisor.core.version}, to update to this
+                          version of the add-on you need at least version
+                          ${this.addon.homeassistant} of Home Assistant
+                        </p>
+                      `
                   : ""}
               </div>
               <div class="card-actions">
@@ -534,6 +552,27 @@ class HassioAddonInfo extends LitElement {
             </div>
           </div>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${!this.addon.available
+            ? !addonArchIsSupported(
+                this.supervisor.info.supported_arch,
+                this.addon.arch
+              )
+              ? html`
+                  <p class="warning">
+                    This add-on is not compatible with the processor of your
+                    device or the operating system you have installed on your
+                    device.
+                  </p>
+                `
+              : html`
+                  <p class="warning">
+                    You are running Home Assistant
+                    ${this.supervisor.core.version}, to install this add-on you
+                    need at least version ${this.addon.homeassistant} of Home
+                    Assistant
+                  </p>
+                `
+            : ""}
         </div>
         <div class="card-actions">
           <div>
@@ -561,13 +600,6 @@ class HassioAddonInfo extends LitElement {
                     </ha-progress-button>
                   `
               : html`
-                  ${!this.addon.available
-                    ? html`
-                        <p class="warning">
-                          This add-on is not available on your system.
-                        </p>
-                      `
-                    : ""}
                   <ha-progress-button
                     .disabled=${!this.addon.available}
                     @click=${this._installClicked}

hassio/src/util/addon.ts

@@ -0,0 +1,7 @@
+import memoizeOne from "memoize-one";
+import { SupervisorArch } from "../../../src/data/supervisor/supervisor";
+
+export const addonArchIsSupported = memoizeOne(
+  (supported_archs: SupervisorArch[], addon_archs: SupervisorArch[]) =>
+    addon_archs.some((arch) => supported_archs.includes(arch))
+);

src/data/hassio/addon.ts

@@ -1,5 +1,6 @@
 import { HaFormSchema } from "../../components/ha-form/ha-form";
 import { HomeAssistant } from "../../types";
+import { SupervisorArch } from "../supervisor/supervisor";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export interface HassioAddonInfo {
@@ -24,7 +25,7 @@ export interface HassioAddonInfo {
 
 export interface HassioAddonDetails extends HassioAddonInfo {
   apparmor: "disable" | "default" | "profile";
-  arch: "armhf" | "aarch64" | "i386" | "amd64";
+  arch: SupervisorArch[];
   audio_input: null | string;
   audio_output: null | string;
   audio: boolean;

src/data/hassio/supervisor.ts

@@ -1,9 +1,10 @@
 import { HomeAssistant, PanelInfo } from "../../types";
+import { SupervisorArch } from "../supervisor/supervisor";
 import { HassioAddonInfo, HassioAddonRepository } from "./addon";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export type HassioHomeAssistantInfo = {
-  arch: string;
+  arch: SupervisorArch;
   audio_input: string | null;
   audio_output: string | null;
   boot: boolean;
@@ -22,7 +23,7 @@ export type HassioHomeAssistantInfo = {
 export type HassioSupervisorInfo = {
   addons: HassioAddonInfo[];
   addons_repositories: HassioAddonRepository[];
-  arch: string;
+  arch: SupervisorArch;
   channel: string;
   debug: boolean;
   debug_block: boolean;
@@ -39,7 +40,7 @@ export type HassioSupervisorInfo = {
 };
 
 export type HassioInfo = {
-  arch: string;
+  arch: SupervisorArch;
   channel: string;
   docker: string;
   features: string[];
@@ -51,7 +52,7 @@ export type HassioInfo = {
   operating_system: string;
   supervisor: string;
   supported: boolean;
-  supported_arch: string[];
+  supported_arch: SupervisorArch[];
   timezone: string;
 };
 

src/data/supervisor/supervisor.ts

@@ -7,6 +7,8 @@ import {
   HassioSupervisorInfo,
 } from "../hassio/supervisor";
 
+export type SupervisorArch = "armhf" | "armv7" | "aarch64" | "i386" | "amd64";
+
 export interface Supervisor {
   host: HassioHostInfo;
   supervisor: HassioSupervisorInfo;