Update hassio/src/ingress-view/hassio-ingress-view.ts

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

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -27,20 +27,26 @@ import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
 
+const STATUS_BAD_GATEWAY = 502;
+const TIMEOUT = 60000;
+
 @customElement("hassio-ingress-view")
 class HassioIngressView extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property() public route!: Route;
+  @property({ attribute: false }) public route!: Route;
 
-  @property() public ingressPanel = false;
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean }) public ingressPanel = false;
 
   @state() private _addon?: HassioAddonDetails;
 
-  @property({ type: Boolean })
-  public narrow = false;
+  @state() private _resolveIngressStatus?: number;
+
+  private _resolveIngressTime?: number;
 
   private _sessionKeepAlive?: number;
 
@@ -51,11 +57,76 @@ class HassioIngressView extends LitElement {
       clearInterval(this._sessionKeepAlive);
       this._sessionKeepAlive = undefined;
     }
+
+    this._resolveIngressStatus = undefined;
+    this._resolveIngressTime = undefined;
+  }
+
+
+  private async _resolveURL(addonSlug: string): Promise<void> {
+    await this._fetchData(addonSlug);
+    if (!this._addon) {
+      window.setTimeout(async () => {
+        this._resolveURL(addonSlug);
+      }, 1000);
+      return;
+    }
+
+    if (!this._resolveIngressTime) {
+      this._resolveIngressTime = new Date().getTime();
+    }
+
+    if (
+      this._resolveIngressStatus &&
+      this._resolveIngressStatus !== STATUS_BAD_GATEWAY
+    ) {
+      return;
+    }
+
+    if (
+      this._resolveIngressTime &&
+      new Date().getTime() > this._resolveIngressTime + TIMEOUT
+    ) {
+      await showAlertDialog(this, {
+        text:
+          this.hass.localize("ingress.timeout") ||
+          "Timeout while waiting for add-on to start, check the add-on logs",
+        title: this._addon.name,
+        confirmText:
+          this.hass.localize("ingress.go_to_logs") || "Go to add-on logs",
+      });
+      await nextRender();
+      navigate(`/hassio/addon/${this._addon.slug}/logs`, { replace: true });
+      return;
+    }
+
+    try {
+      const response = await fetch(this._addon.ingress_url!);
+      this._resolveIngressStatus = response.status;
+    } catch (err) {
+      // eslint-disable-next-line
+      console.error(err);
+    }
+    window.setTimeout(async () => {
+      await this._resolveURL(this._addon!.slug);
+    }, 1000);
   }
 
   protected render(): TemplateResult {
-    if (!this._addon) {
-      return html` <hass-loading-screen></hass-loading-screen> `;
+    if (!this._addon || this._resolveIngressStatus === STATUS_BAD_GATEWAY) {
+      return html`
+        <hass-loading-screen
+          .narrow=${this.narrow}
+          .header=${this._addon?.name}
+        >
+          ${this._resolveIngressStatus === STATUS_BAD_GATEWAY
+            ? html`<p>
+                ${this.hass.localize("ingress.waiting") ||
+                "Waiting for add-on to start"}
+              </p>`
+            : ""}
+        </hass-loading-screen>
+      `;
     }
 
     const iframe = html`<iframe src=${this._addon.ingress_url!}></iframe>`;
@@ -134,20 +205,22 @@ class HassioIngressView extends LitElement {
     const oldAddon = oldRoute ? oldRoute.path.substr(1) : undefined;
 
     if (addon && addon !== oldAddon) {
-      this._fetchData(addon);
+      this._resolveURL(addon);
     }
   }
 
   private async _fetchData(addonSlug: string) {
     const createSessionPromise = createHassioSession(this.hass);
 
-    let addon;
+    let addon: HassioAddonDetails;
 
     try {
       addon = await fetchHassioAddonInfo(this.hass, addonSlug);
     } catch (err) {
       await showAlertDialog(this, {
-        text: "Unable to fetch add-on info to start Ingress",
+        text:
+          this.hass.localize("ingress.unable_to_fetch") ||
+          "Unable to fetch add-on info to start Ingress",
         title: "Supervisor",
       });
       await nextRender();
@@ -157,7 +230,9 @@ class HassioIngressView extends LitElement {
 
     if (!addon.ingress_url) {
       await showAlertDialog(this, {
-        text: "Add-on does not support Ingress",
+        text:
+          this.hass.localize("ingress.no_ingress") ||
+          "Add-on does not support Ingress",
         title: addon.name,
       });
       await nextRender();
@@ -167,7 +242,9 @@ class HassioIngressView extends LitElement {
 
     if (addon.state !== "started") {
       await showAlertDialog(this, {
-        text: "Add-on is not running. Please start it first",
+        text:
+          this.hass.localize("ingress.not_running") ||
+          "The add-on is not running, please start it.",
         title: addon.name,
       });
       await nextRender();
@@ -181,7 +258,9 @@ class HassioIngressView extends LitElement {
       session = await createSessionPromise;
     } catch (err) {
       await showAlertDialog(this, {
-        text: "Unable to create an Ingress session",
+        text:
+          this.hass.localize("ingress.unable_to_create") ||
+          "Unable to create an Ingress session",
         title: addon.name,
       });
       await nextRender();
@@ -189,16 +268,15 @@ class HassioIngressView extends LitElement {
       return;
     }
 
-    if (this._sessionKeepAlive) {
-      clearInterval(this._sessionKeepAlive);
+    if (!this._sessionKeepAlive) {
+      this._sessionKeepAlive = window.setInterval(async () => {
+        try {
+          await validateHassioSession(this.hass, session);
+        } catch (err) {
+          session = await createHassioSession(this.hass);
+        }
+      }, 60000);
     }
-    this._sessionKeepAlive = window.setInterval(async () => {
-      try {
-        await validateHassioSession(this.hass, session);
-      } catch (err) {
-        session = await createHassioSession(this.hass);
-      }
-    }, 60000);
 
     this._addon = addon;
   }

src/layouts/hass-loading-screen.ts

@@ -16,6 +16,8 @@ class HassLoadingScreen extends LitElement {
 
   @property({ type: Boolean }) public rootnav = false;
 
+  @property() public header?: string;
+
   @property() public narrow?: boolean;
 
   protected render(): TemplateResult {
@@ -36,9 +38,13 @@ class HassLoadingScreen extends LitElement {
                     @click=${this._handleBack}
                   ></ha-icon-button-arrow-prev>
                 `}
+            ${this.header
+              ? html`<div class="main-title">${this.header}</div>`
+              : ""}
           </div>`}
       <div class="content">
         <ha-circular-progress active></ha-circular-progress>
+        <slot class="description"></slot>
       </div>
     `;
   }
@@ -76,9 +82,14 @@ class HassLoadingScreen extends LitElement {
         .content {
           height: calc(100% - var(--header-height));
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
         }
+        .description {
+          margin-top: 12px;
+          display: block;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -4016,5 +4016,15 @@
         "device_path": "Device path"
       }
     }
+  },
+  "ingress": {
+    "not_running": "[%key:supervisor::my::error_addon_not_started%]",
+    "waiting": "Waiting for add-on to start",
+    "unable_to_create": "Unable to create an Ingress session",
+    "no_ingress": "[%key:supervisor::my::error_addon_no_ingress%]",
+    "unable_to_fetch": "Unable to fetch add-on info to start Ingress",
+    "timeout": "Timeout while waiting for add-on to start, check the add-on logs",
+    "go_to_dashboard": "Go to add-on dashboard",
+    "go_to_logs": "Go to add-on logs"
   }
 }