localize

hassio/src/addon-store/hassio-addon-store.ts

@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
@@ -133,6 +134,8 @@ class HassioAddonStore extends LitElement {
               </div>
             `
           : ""}
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }

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

@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import {
   mdiCogs,
   mdiFileDocument,
@@ -129,6 +130,8 @@ class HassioAddonDashboard extends LitElement {
           .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-router>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }
@@ -177,8 +180,9 @@ class HassioAddonDashboard extends LitElement {
       const requestedAddon = extractSearchParam("addon");
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        const validAddon = addonsInfo.addons
-          .some((addon) => addon.slug === requestedAddon);
+        const validAddon = addonsInfo.addons.some(
+          (addon) => addon.slug === requestedAddon
+        );
         if (!validAddon) {
           this._error = this.supervisor.localize("my.error_addon_not_found");
         } else {

hassio/src/components/supervisor-connectivity.ts

@@ -0,0 +1,54 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { haStyle } from "../../../src/resources/styles";
+
+@customElement("supervisor-connectivity")
+class SupervisorConnectivity extends LitElement {
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  protected render(): TemplateResult {
+    if (this.supervisor.network.supervisor_internet) {
+      return html``;
+    }
+
+    return html`<div class="connectivity">
+      <span>${this.supervisor.localize("common.error.lost_connectivity")}</span>
+    </div>`;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .connectivity {
+          position: fixed;
+          bottom: 0;
+          height: 32px;
+          width: 100vw;
+          background-color: var(--error-color);
+          color: var(--primary-text-color);
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+        }
+        span {
+          padding-left: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-connectivity": SupervisorConnectivity;
+  }
+}

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import {
   css,
   CSSResult,
@@ -49,6 +50,8 @@ class HassioDashboard extends LitElement {
             .supervisor=${this.supervisor}
           ></hassio-addons>
         </div>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }

hassio/src/snapshots/hassio-snapshots.ts

@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
@@ -269,6 +270,8 @@ class HassioSnapshots extends LitElement {
                 )}
           </div>
         </div>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }

hassio/src/system/hassio-system.ts

@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import {
   css,
   CSSResult,
@@ -62,6 +63,8 @@ class HassioSystem extends LitElement {
             .supervisor=${this.supervisor}
           ></hassio-supervisor-log>
         </div>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }

src/data/hassio/network.ts

@@ -50,6 +50,8 @@ export interface WifiConfiguration {
 export interface NetworkInfo {
   interfaces: NetworkInterface[];
   docker: DockerNetwork;
+  supervisor_internet: boolean;
+  host_internet: boolean | null;
 }
 
 export const fetchNetworkInfo = async (

src/translations/en.json

@@ -3618,7 +3618,8 @@
 
       "error": {
         "unknown": "Unknown error",
-        "update_failed": "Update failed"
+        "update_failed": "Update failed",
+        "lost_connectivity": "The Supervisor has lost connectivity, check the Supervisor logs and your network settings."
       }
     },
     "confirm": {