Add dialog and links for unsupported supervisor installation (#7332)

hassio/src/system/hassio-supervisor-info.ts

@@ -11,14 +11,16 @@ import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { HassioHostInfo as HassioHostInfoType } from "../../../src/data/hassio/host";
+import { fetchHassioResolution } from "../../../src/data/hassio/resolution";
 import {
+  fetchHassioSupervisorInfo,
   HassioSupervisorInfo as HassioSupervisorInfoType,
   reloadSupervisor,
   setSupervisorOption,
   SupervisorOptions,
   updateSupervisor,
-  fetchHassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import {
   showAlertDialog,
@@ -26,8 +28,35 @@ import {
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import { documentationUrl } from "../../../src/util/documentation-url";
 import { hassioStyle } from "../resources/hassio-style";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+
+const ISSUES = {
+  container: {
+    title: "Containers known to cause issues",
+    url: "/more-info/unsupported/container",
+  },
+  dbus: { title: "DBUS", url: "/more-info/unsupported/dbus" },
+  docker_configuration: {
+    title: "Docker Configuration",
+    url: "/more-info/unsupported/docker_configuration",
+  },
+  docker_version: {
+    title: "Docker Version",
+    url: "/more-info/unsupported/docker_version",
+  },
+  lxc: { title: "LXC", url: "/more-info/unsupported/lxc" },
+  network_manager: {
+    title: "Network Manager",
+    url: "/more-info/unsupported/network_manager",
+  },
+  os: { title: "Operating System", url: "/more-info/unsupported/os" },
+  privileged: {
+    title: "Supervisor is not privileged",
+    url: "/more-info/unsupported/privileged",
+  },
+  systemd: { title: "Systemd", url: "/more-info/unsupported/systemd" },
+};
 
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
@@ -118,18 +147,13 @@ class HassioSupervisorInfo extends LitElement {
               </ha-settings-row>`
             : html`<div class="error">
                 You are running an unsupported installation.
-                <a
+                <button
-                  href="https://github.com/home-assistant/architecture/blob/master/adr/${this.hostInfo.features.includes(
+                  class="link"
-                    "hassos"
-                  )
-                    ? "0015-home-assistant-os.md"
-                    : "0014-home-assistant-supervised.md"}"
-                  target="_blank"
-                  rel="noreferrer"
                   title="Learn more about how you can make your system compliant"
+                  @click=${this._unsupportedDialog}
                 >
-                  Learn More
+                  Learn more
-                </a>
+                </button>
               </div>`}
         </div>
         <div class="card-actions">
@@ -249,6 +273,32 @@ class HassioSupervisorInfo extends LitElement {
     });
   }
 
+  private async _unsupportedDialog(): Promise<void> {
+    const resolution = await fetchHassioResolution(this.hass);
+    await showAlertDialog(this, {
+      title: "You are running an unsupported installation",
+      text: html`Below is a list of issues found with your installation, click
+        on the links to learn how you can resolve the issues. <br /><br />
+        <ul>
+          ${resolution.unsupported.map(
+            (issue) => html`
+              <li>
+                ${ISSUES[issue]
+                  ? html`<a
+                      href="${documentationUrl(this.hass, ISSUES[issue].url)}"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      ${ISSUES[issue].title}
+                    </a>`
+                  : issue}
+              </li>
+            `
+          )}
+        </ul>`,
+    });
+  }
+
   private async _toggleDiagnostics(): Promise<void> {
     try {
       const data: SupervisorOptions = {

src/data/hassio/resolution.ts

@@ -0,0 +1,15 @@
+import { HomeAssistant } from "../../types";
+import { hassioApiResultExtractor, HassioResponse } from "./common";
+
+export interface HassioResolution {
+  unsupported: string[];
+}
+
+export const fetchHassioResolution = async (hass: HomeAssistant) => {
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioResolution>>(
+      "GET",
+      "hassio/resolution/info"
+    )
+  );
+};