Add hassio supervisor and os update notice

hassio/src/dashboard/hassio-dashboard.ts

@@ -8,26 +8,31 @@ import {
   customElement,
 } from "lit-element";
 import "./hassio-addons";
-import "./hassio-hass-update";
+import "./hassio-update";
 import { HomeAssistant } from "../../../src/types";
 import {
   HassioSupervisorInfo,
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
 } from "../../../src/data/hassio";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
   @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult | void {
     return html`
       <div class="content">
-        <hassio-hass-update
+        <hassio-update
           .hass=${this.hass}
           .hassInfo=${this.hassInfo}
-        ></hassio-hass-update>
+          .supervisorInfo=${this.supervisorInfo}
+          .hassOsInfo=${this.hassOsInfo}
+        ></hassio-update>
         <hassio-addons
           .hass=${this.hass}
           .addons=${this.supervisorInfo.addons}

hassio/src/dashboard/hassio-update.ts

@@ -0,0 +1,153 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+
+import { HomeAssistant } from "../../../src/types";
+import {
+  HassioHomeAssistantInfo,
+  HassioHassOSInfo,
+  HassioSupervisorInfo,
+} from "../../../src/data/hassio";
+
+import { hassioStyle } from "../resources/hassio-style";
+
+import "@material/mwc-button";
+import "@polymer/paper-card/paper-card";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../components/hassio-card-content";
+
+@customElement("hassio-update")
+export class HassioUpdate extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public hassInfo: HassioHomeAssistantInfo;
+  @property() public hassOsInfo?: HassioHassOSInfo;
+  @property() public supervisorInfo: HassioSupervisorInfo;
+
+  @property() public error?: string;
+
+  protected render(): TemplateResult | void {
+    if (
+      this.hassInfo.version === this.hassInfo.last_version &&
+      this.supervisorInfo.version === this.supervisorInfo.last_version &&
+      (!this.hassOsInfo ||
+        this.hassOsInfo.version === this.hassOsInfo.version_latest)
+    ) {
+      return html``;
+    }
+
+    return html`
+      <div class="content">
+        ${this.error
+          ? html`
+              <div class="error">Error: ${this.error}</div>
+            `
+          : ""}
+        <div class="card-group">
+          ${this._renderUpdateCard(
+            "Home Assistant",
+            this.hassInfo.version,
+            this.hassInfo.last_version,
+            "hassio/homeassistant/update",
+            `https://${
+              this.hassInfo.last_version.includes("b") ? "rc" : "www"
+            }.home-assistant.io/latest-release-notes/`
+          )}
+          ${this._renderUpdateCard(
+            "Hass.io Supervisor",
+            this.supervisorInfo.version,
+            this.supervisorInfo.last_version,
+            "hassio/supervisor/update",
+            `https://github.com//home-assistant/hassio/releases/tag/${
+              this.supervisorInfo.last_version
+            }`
+          )}
+          ${this.hassOsInfo
+            ? this._renderUpdateCard(
+                "HassOS",
+                this.hassOsInfo.version,
+                this.hassOsInfo.version_latest,
+                "hassio/hassos/update",
+                `https://github.com//home-assistant/hassos/releases/tag/${
+                  this.hassOsInfo.version_latest
+                }`
+              )
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderUpdateCard(
+    name: string,
+    curVersion: string,
+    lastVersion: string,
+    apiPath: string,
+    releaseNotesUrl: string
+  ): TemplateResult {
+    if (lastVersion === curVersion) {
+      return html``;
+    }
+    return html`
+      <paper-card heading="${name} update available! 🎉">
+        <div class="card-content">
+          ${name} ${lastVersion} is available and you are currently running
+          ${name} ${curVersion}.
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            .hass=${this.hass}
+            .path=${apiPath}
+            @hass-api-called=${this._apiCalled}
+          >
+            Update
+          </ha-call-api-button>
+          <a href="${releaseNotesUrl}" target="_blank">
+            <mwc-button>Release notes</mwc-button>
+          </a>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  private _apiCalled(ev) {
+    if (ev.detail.success) {
+      this.error = "";
+      return;
+    }
+
+    const response = ev.detail.response;
+
+    typeof response.body === "object"
+      ? (this.error = response.body.message || "Unknown error")
+      : (this.error = response.body);
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      hassioStyle,
+      css`
+        :host {
+          width: 33%;
+        }
+        paper-card {
+          display: inline-block;
+          margin-bottom: 32px;
+        }
+        .errors {
+          color: var(--google-red-500);
+          padding: 16px;
+        }
+        a {
+          text-decoration: none;
+        }
+      `,
+    ];
+  }
+}

hassio/src/hassio-main.ts

@@ -13,9 +13,11 @@ import { HomeAssistant } from "../../src/types";
 import {
   fetchHassioSupervisorInfo,
   fetchHassioHostInfo,
+  fetchHassioHassOsInfo,
   fetchHassioHomeAssistantInfo,
   HassioSupervisorInfo,
   HassioHostInfo,
+  HassioHassOSInfo,
   HassioHomeAssistantInfo,
   fetchHassioAddonInfo,
   createHassioSession,
@@ -66,6 +68,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
 
   @property() private _supervisorInfo: HassioSupervisorInfo;
   @property() private _hostInfo: HassioHostInfo;
+  @property() private _hassOsInfo?: HassioHassOSInfo;
   @property() private _hassInfo: HassioHomeAssistantInfo;
 
   protected firstUpdated(changedProps: PropertyValues) {
@@ -113,6 +116,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
         supervisorInfo: this._supervisorInfo,
         hostInfo: this._hostInfo,
         hassInfo: this._hassInfo,
+        hassOsInfo: this._hassOsInfo,
         route,
       });
     } else {
@@ -121,6 +125,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       el.supervisorInfo = this._supervisorInfo;
       el.hostInfo = this._hostInfo;
       el.hassInfo = this._hassInfo;
+      el.hassOsInfo = this._hassOsInfo;
       el.route = route;
     }
   }
@@ -139,6 +144,10 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
     this._supervisorInfo = supervisorInfo;
     this._hostInfo = hostInfo;
     this._hassInfo = hassInfo;
+
+    if (this._hostInfo.features && this._hostInfo.features.includes("hassos")) {
+      this._hassOsInfo = await fetchHassioHassOsInfo(this.hass);
+    }
   }
 
   private async _redirectIngress(addonSlug: string) {

hassio/src/hassio-pages-with-tabs.ts

@@ -27,6 +27,7 @@ import {
   HassioSupervisorInfo,
   HassioHostInfo,
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
 } from "../../src/data/hassio";
 
 const HAS_REFRESH_BUTTON = ["store", "snapshots"];
@@ -39,6 +40,7 @@ class HassioPagesWithTabs extends LitElement {
   @property() public supervisorInfo!: HassioSupervisorInfo;
   @property() public hostInfo!: HassioHostInfo;
   @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult | void {
     const page = this._page;
@@ -79,6 +81,7 @@ class HassioPagesWithTabs extends LitElement {
           .supervisorInfo=${this.supervisorInfo}
           .hostInfo=${this.hostInfo}
           .hassInfo=${this.hassInfo}
+          .hassOsInfo=${this.hassOsInfo}
         ></hassio-tabs-router>
       </app-header-layout>
     `;

hassio/src/hassio-tabs-router.ts

@@ -15,6 +15,7 @@ import {
   HassioSupervisorInfo,
   HassioHostInfo,
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
 } from "../../src/data/hassio";
 
 @customElement("hassio-tabs-router")
@@ -23,6 +24,7 @@ class HassioTabsRouter extends HassRouterPage {
   @property() public supervisorInfo: HassioSupervisorInfo;
   @property() public hostInfo: HassioHostInfo;
   @property() public hassInfo: HassioHomeAssistantInfo;
+  @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected routerOptions: RouterOptions = {
     routes: {
@@ -49,12 +51,14 @@ class HassioTabsRouter extends HassRouterPage {
         supervisorInfo: this.supervisorInfo,
         hostInfo: this.hostInfo,
         hassInfo: this.hassInfo,
+        hassOsInfo: this.hassOsInfo,
       });
     } else {
       el.hass = this.hass;
       el.supervisorInfo = this.supervisorInfo;
       el.hostInfo = this.hostInfo;
       el.hassInfo = this.hassInfo;
+      el.hassOsInfo = this.hassOsInfo;
     }
   }
 }