Make zwave_js config panel inclusion state aware (#11556)

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

src/data/zwave_js.ts

@@ -2,6 +2,19 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 import { DeviceRegistryEntry } from "./device_registry";
 
+export enum InclusionState {
+  /** The controller isn't doing anything regarding inclusion. */
+  Idle,
+  /** The controller is waiting for a node to be included. */
+  Including,
+  /** The controller is waiting for a node to be excluded. */
+  Excluding,
+  /** The controller is busy including or excluding a node. */
+  Busy,
+  /** The controller listening for SmartStart nodes to announce themselves. */
+  SmartStart,
+}
+
 export const enum InclusionStrategy {
   /**
    * Always uses Security S2 if supported, otherwise uses Security S0 for certain devices which don't work without encryption and uses no encryption otherwise.
@@ -106,16 +119,33 @@ export interface ZWaveJSNetwork {
 }
 
 export interface ZWaveJSClient {
-  state: string;
+  state: "connected" | "disconnected";
   ws_server_url: string;
   server_version: string;
   driver_version: string;
 }
 
 export interface ZWaveJSController {
-  home_id: string;
+  home_id: number;
-  nodes: number[];
+  library_version: string;
+  type: number;
+  own_node_id: number;
+  is_secondary: boolean;
+  is_using_home_id_from_other_network: boolean;
+  is_sis_present: boolean;
+  was_real_primary: boolean;
+  is_static_update_controller: boolean;
+  is_slave: boolean;
+  serial_api_version: string;
+  manufacturer_id: number;
+  product_id: number;
+  product_type: number;
+  supported_function_types: number[];
+  suc_node_id: number;
+  supports_timers: boolean;
   is_heal_network_active: boolean;
+  inclusion_state: InclusionState;
+  nodes: number[];
 }
 
 export interface ZWaveJSNodeStatus {
@@ -309,6 +339,12 @@ export const stopZwaveInclusion = (hass: HomeAssistant, entry_id: string) =>
     entry_id,
   });
 
+export const stopZwaveExclusion = (hass: HomeAssistant, entry_id: string) =>
+  hass.callWS({
+    type: "zwave_js/stop_exclusion",
+    entry_id,
+  });
+
 export const zwaveGrantSecurityClasses = (
   hass: HomeAssistant,
   entry_id: string,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -19,7 +19,11 @@ import {
   fetchZwaveNetworkStatus,
   fetchZwaveNodeStatus,
   fetchZwaveProvisioningEntries,
+  InclusionState,
   setZwaveDataCollectionPreference,
+  stopZwaveExclusion,
+  stopZwaveInclusion,
+  ZWaveJSClient,
   ZWaveJSNetwork,
   ZWaveJSNodeStatus,
   ZwaveJSProvisioningEntry,
@@ -60,7 +64,7 @@ class ZWaveJSConfigDashboard extends LitElement {
 
   @state() private _provisioningEntries?: ZwaveJSProvisioningEntry[];
 
-  @state() private _status = "unknown";
+  @state() private _status?: ZWaveJSClient["state"];
 
   @state() private _icon = mdiCircle;
 
@@ -107,13 +111,38 @@ class ZWaveJSConfigDashboard extends LitElement {
               "ui.panel.config.zwave_js.dashboard.introduction"
             )}
           </div>
+          ${this._network &&
+          this._status === "connected" &&
+          (this._network?.controller.inclusion_state ===
+            InclusionState.Including ||
+            this._network?.controller.inclusion_state ===
+              InclusionState.Excluding)
+            ? html`
+                <ha-alert alert-type="info">
+                  ${this.hass.localize(
+                    `ui.panel.config.zwave_js.common.in_progress_inclusion_exclusion`
+                  )}
+                  <mwc-button
+                    slot="action"
+                    .label=${this.hass.localize(
+                      `ui.panel.config.zwave_js.common.cancel_inclusion_exclusion`
+                    )}
+                    @click=${this._network?.controller.inclusion_state ===
+                    InclusionState.Including
+                      ? this._cancelInclusion
+                      : this._cancelExclusion}
+                  >
+                  </mwc-button>
+                </ha-alert>
+              `
+            : ""}
           ${this._network
             ? html`
                 <ha-card class="content network-status">
                   <div class="card-content">
                     <div class="heading">
                       <div class="icon">
-                        ${this._status === "connecting"
+                        ${this._status === "disconnected"
                           ? html`<ha-circular-progress
                               active
                             ></ha-circular-progress>`
@@ -121,13 +150,13 @@ class ZWaveJSConfigDashboard extends LitElement {
                               <ha-svg-icon
                                 .path=${this._icon}
                                 class="network-status-icon ${classMap({
-                                  [this._status]: true,
+                                  [this._status!]: true,
                                 })}"
                                 slot="item-icon"
                               ></ha-svg-icon>
                             `}
                       </div>
-                      ${this._status !== "connecting"
+                      ${this._status !== "disconnected"
                         ? html`
                             <div class="details">
                               ${this.hass.localize(
@@ -207,7 +236,9 @@ class ZWaveJSConfigDashboard extends LitElement {
                   <div class="card-actions">
                     <mwc-button
                       @click=${this._removeNodeClicked}
-                      .disabled=${this._status === "connecting"}
+                      .disabled=${this._status !== "connected" ||
+                      this._network?.controller.inclusion_state !==
+                        InclusionState.Idle}
                     >
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.common.remove_node"
@@ -215,16 +246,13 @@ class ZWaveJSConfigDashboard extends LitElement {
                     </mwc-button>
                     <mwc-button
                       @click=${this._healNetworkClicked}
-                      .disabled=${this._status === "connecting"}
+                      .disabled=${this._status === "disconnected"}
                     >
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.common.heal_network"
                       )}
                     </mwc-button>
-                    <mwc-button
+                    <mwc-button @click=${this._openOptionFlow}>
-                      @click=${this._openOptionFlow}
-                      .disabled=${this._status === "connecting"}
-                    >
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.common.reconfigure_server"
                       )}
@@ -272,10 +300,11 @@ class ZWaveJSConfigDashboard extends LitElement {
           .label=${this.hass.localize(
             "ui.panel.config.zwave_js.common.add_node"
           )}
-          .disabled=${this._status === "connecting"}
           extended
           ?rtl=${computeRTL(this.hass)}
           @click=${this._addNodeClicked}
+          .disabled=${this._status !== "connected" ||
+          this._network?.controller.inclusion_state !== InclusionState.Idle}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
@@ -412,6 +441,16 @@ class ZWaveJSConfigDashboard extends LitElement {
     });
   }
 
+  private async _cancelInclusion() {
+    stopZwaveInclusion(this.hass!, this.configEntryId!);
+    await this._fetchData();
+  }
+
+  private async _cancelExclusion() {
+    stopZwaveExclusion(this.hass!, this.configEntryId!);
+    await this._fetchData();
+  }
+
   private _dataCollectionToggled(ev) {
     setZwaveDataCollectionPreference(
       this.hass!,

src/translations/en.json

@@ -2956,7 +2956,9 @@
             "add_node": "Add device",
             "remove_node": "Remove device",
             "reconfigure_server": "Re-configure Server",
-            "heal_network": "Heal Network"
+            "heal_network": "Heal Network",
+            "in_progress_inclusion_exclusion": "Z-Wave JS is searching for devices",
+            "cancel_inclusion_exclusion": "Stop Searching"
           },
           "dashboard": {
             "header": "Manage your Z-Wave Network",