Use update entities for showing updates on configuration panel

hassio/src/update-available/update-available-card.ts

@@ -45,7 +45,6 @@ import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 import "../../../src/layouts/hass-tabs-subpage";
-import { SUPERVISOR_UPDATE_NAMES } from "../../../src/panels/config/dashboard/ha-config-updates";
 import { HomeAssistant, Route } from "../../../src/types";
 import { addonArchIsSupported, extractChangelog } from "../util/addon";
 
@@ -55,6 +54,12 @@ declare global {
   }
 }
 
+const SUPERVISOR_UPDATE_NAMES = {
+  core: "Home Assistant Core",
+  os: "Home Assistant Operating System",
+  supervisor: "Home Assistant Supervisor",
+};
+
 type updateType = "os" | "supervisor" | "core" | "addon";
 
 const changelogUrl = (

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -1,14 +1,15 @@
+import type { ActionDetail } from "@material/mwc-list";
+import "@material/mwc-list/mwc-list-item";
 import {
   mdiCloudLock,
   mdiDotsVertical,
   mdiLightbulbOutline,
   mdiMagnify,
   mdiNewBox,
 } from "@mdi/js";
-import "@material/mwc-list/mwc-list-item";
-import type { ActionDetail } from "@material/mwc-list";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import type { HassEntities } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -18,30 +19,29 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import { caseInsensitiveStringCompare } from "../../../common/string/compare";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
-import "../../../components/ha-icon-next";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-icon-next";
 import "../../../components/ha-menu-button";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-svg-icon";
 import { CloudStatus } from "../../../data/cloud";
-import {
-  refreshSupervisorAvailableUpdates,
-  SupervisorAvailableUpdates,
-} from "../../../data/supervisor/root";
+import { updateCanInstall, UpdateEntity } from "../../../data/update";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
+import { showToast } from "../../../util/toast";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-navigation";
 import "./ha-config-updates";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import { showToast } from "../../../util/toast";
-import { documentationUrl } from "../../../util/documentation-url";
 
 const randomTip = (hass: HomeAssistant) => {
   const weighted: string[] = [];
@@ -113,16 +113,16 @@ class HaConfigDashboard extends LitElement {
 
   @property() public cloudStatus?: CloudStatus;
 
-  // null means not available
-  @property() public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
-
   @property() public showAdvanced!: boolean;
 
   @state() private _tip?: string;
 
   private _notifyUpdates = false;
 
   protected render(): TemplateResult {
+    const canInstallUpdates = this._filterUpdateEntitiesWithInstall(
+      this.hass.states
+    );
     return html`
       <ha-app-layout>
         <app-header fixed slot="header">
@@ -160,50 +160,47 @@ class HaConfigDashboard extends LitElement {
           .isWide=${this.isWide}
           full-width
         >
-          ${this.supervisorUpdates === undefined
-            ? // Hide everything until updates loaded
-              html``
-            : html`${this.supervisorUpdates?.length
-                  ? html`<ha-card>
-                      <ha-config-updates
-                        .hass=${this.hass}
-                        .narrow=${this.narrow}
-                        .supervisorUpdates=${this.supervisorUpdates}
-                      ></ha-config-updates>
-                    </ha-card>`
-                  : ""}
-                <ha-card>
-                  ${this.narrow && this.supervisorUpdates?.length
-                    ? html`<div class="title">
-                        ${this.hass.localize("panel.config")}
-                      </div>`
-                    : ""}
-                  ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
-                    ? html`
-                        <ha-config-navigation
-                          .hass=${this.hass}
-                          .narrow=${this.narrow}
-                          .showAdvanced=${this.showAdvanced}
-                          .pages=${[
-                            {
-                              component: "cloud",
-                              path: "/config/cloud",
-                              name: "Home Assistant Cloud",
-                              info: this.cloudStatus,
-                              iconPath: mdiCloudLock,
-                              iconColor: "#3B808E",
-                            },
-                          ]}
-                        ></ha-config-navigation>
-                      `
-                    : ""}
+          ${canInstallUpdates.length
+            ? html`<ha-card>
+                <ha-config-updates
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                  .updateEntities=${canInstallUpdates}
+                ></ha-config-updates>
+              </ha-card>`
+            : ""}
+          <ha-card>
+            ${this.narrow && canInstallUpdates.length
+              ? html`<div class="title">
+                  ${this.hass.localize("panel.config")}
+                </div>`
+              : ""}
+            ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
+              ? html`
                   <ha-config-navigation
                     .hass=${this.hass}
                     .narrow=${this.narrow}
                     .showAdvanced=${this.showAdvanced}
-                    .pages=${configSections.dashboard}
+                    .pages=${[
+                      {
+                        component: "cloud",
+                        path: "/config/cloud",
+                        name: "Home Assistant Cloud",
+                        info: this.cloudStatus,
+                        iconPath: mdiCloudLock,
+                        iconColor: "#3B808E",
+                      },
+                    ]}
                   ></ha-config-navigation>
-                </ha-card>`}
+                `
+              : ""}
+            <ha-config-navigation
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+              .showAdvanced=${this.showAdvanced}
+              .pages=${configSections.dashboard}
+            ></ha-config-navigation>
+          </ha-card>
           <div class="tips">
             <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
             <span class="tip-word">Tip!</span>
@@ -221,11 +218,11 @@ class HaConfigDashboard extends LitElement {
       this._tip = randomTip(this.hass);
     }
 
-    if (!changedProps.has("supervisorUpdates") || !this._notifyUpdates) {
+    if (!changedProps.has("hass") || !this._notifyUpdates) {
       return;
     }
     this._notifyUpdates = false;
-    if (this.supervisorUpdates?.length) {
+    if (this._filterUpdateEntitiesWithInstall(this.hass.states).length) {
       showToast(this, {
         message: this.hass.localize(
           "ui.panel.config.updates.updates_refreshed"
@@ -238,6 +235,44 @@ class HaConfigDashboard extends LitElement {
     }
   }
 
+  private _filterUpdateEntities = memoizeOne((entities: HassEntities) =>
+    (
+      Object.values(entities).filter(
+        (entity) => computeStateDomain(entity) === "update"
+      ) as UpdateEntity[]
+    ).sort((a, b) => {
+      if (a.attributes.title === "Home Assistant Core") {
+        return -3;
+      }
+      if (b.attributes.title === "Home Assistant Core") {
+        return 3;
+      }
+      if (a.attributes.title === "Home Assistant Operating System") {
+        return -2;
+      }
+      if (b.attributes.title === "Home Assistant Operating System") {
+        return 2;
+      }
+      if (a.attributes.title === "Home Assistant Supervisor") {
+        return -1;
+      }
+      if (b.attributes.title === "Home Assistant Supervisor") {
+        return 1;
+      }
+      return caseInsensitiveStringCompare(
+        a.attributes.title || a.attributes.friendly_name || "",
+        b.attributes.title || b.attributes.friendly_name || ""
+      );
+    })
+  );
+
+  private _filterUpdateEntitiesWithInstall = memoizeOne(
+    (entities: HassEntities) =>
+      this._filterUpdateEntities(entities).filter((entity) =>
+        updateCanInstall(entity)
+      )
+  );
+
   private _showQuickBar(): void {
     showQuickBar(this, {
       commandMode: true,
@@ -246,20 +281,24 @@ class HaConfigDashboard extends LitElement {
   }
 
   private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    const _entities = this._filterUpdateEntities(this.hass.states).map(
+      (entity) => entity.entity_id
+    );
     switch (ev.detail.index) {
       case 0:
-        if (isComponentLoaded(this.hass, "hassio")) {
+        if (_entities.length) {
           this._notifyUpdates = true;
-          await refreshSupervisorAvailableUpdates(this.hass);
-          fireEvent(this, "ha-refresh-supervisor");
+          await this.hass.callService("homeassistant", "update_entity", {
+            entity_id: _entities,
+          });
           return;
         }
         showAlertDialog(this, {
           title: this.hass.localize(
-            "ui.panel.config.updates.check_unavailable.title"
+            "ui.panel.config.updates.no_update_entities.title"
           ),
           text: this.hass.localize(
-            "ui.panel.config.updates.check_unavailable.description"
+            "ui.panel.config.updates.no_update_entities.description"
           ),
           warning: true,
         });