Allow changing channel from the thread configuration panel (#17285)

src/data/otbr.ts

@@ -3,6 +3,7 @@ import { HomeAssistant } from "../types";
 export interface OTBRInfo {
   url: string;
   active_dataset_tlvs: string;
+  channel: number;
 }
 
 export const getOTBRInfo = (hass: HomeAssistant): Promise<OTBRInfo> =>
@@ -30,3 +31,12 @@ export const OTBRGetExtendedAddress = (
   hass.callWS({
     type: "otbr/get_extended_address",
   });
+
+export const OTBRSetChannel = (
+  hass: HomeAssistant,
+  channel: number
+): Promise<{ delay: number }> =>
+  hass.callWS({
+    type: "otbr/set_channel",
+    channel,
+  });

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -20,6 +20,7 @@ import {
   OTBRCreateNetwork,
   OTBRGetExtendedAddress,
   OTBRInfo,
+  OTBRSetChannel,
   OTBRSetNetwork,
 } from "../../../../../data/otbr";
 import {
@@ -200,6 +201,10 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
                           >${this.hass.localize(
                             "ui.panel.config.thread.reset_border_router"
                           )}</ha-list-item
+                        ><ha-list-item
+                          >${this.hass.localize(
+                            "ui.panel.config.thread.change_channel"
+                          )}</ha-list-item
                         >${network.dataset?.preferred
                           ? ""
                           : html`<ha-list-item
@@ -384,6 +389,9 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
         this._resetBorderRouter();
         break;
       case 1:
+        this._changeChannel();
+        break;
+      case 2:
         this._setDataset();
         break;
     }
@@ -497,6 +505,64 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
     this._refresh();
   }
 
+  private async _changeChannel() {
+    const currentChannel = this._otbrInfo?.channel;
+    const channelStr = await showPromptDialog(this, {
+      title: this.hass.localize("ui.panel.config.thread.change_channel"),
+      text: this.hass.localize("ui.panel.config.thread.change_channel_text"),
+      inputLabel: this.hass.localize(
+        "ui.panel.config.thread.change_channel_label"
+      ),
+      confirmText: this.hass.localize("ui.panel.config.thread.change_channel"),
+      inputType: "number",
+      inputMin: "11",
+      inputMax: "26",
+      defaultValue: currentChannel ? currentChannel.toString() : undefined,
+    });
+    if (!channelStr) {
+      return;
+    }
+    const channel = parseInt(channelStr);
+    if (channel < 11 || channel > 26) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.thread.change_channel_invalid"
+        ),
+        text: this.hass.localize("ui.panel.config.thread.change_channel_range"),
+      });
+      return;
+    }
+    try {
+      const result = await OTBRSetChannel(this.hass, channel);
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.thread.change_channel_initiated_title"
+        ),
+        text: this.hass.localize(
+          "ui.panel.config.thread.change_channel_initiated_text",
+          { delay: Math.floor(result.delay / 60) }
+        ),
+      });
+    } catch (err: any) {
+      if (err.code === "multiprotocol_enabled") {
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.thread.change_channel_multiprotocol_enabled_title"
+          ),
+          text: this.hass.localize(
+            "ui.panel.config.thread.change_channel_multiprotocol_enabled_text"
+          ),
+        });
+        return;
+      }
+      showAlertDialog(this, {
+        title: "Error",
+        text: err.message || err,
+      });
+    }
+    this._refresh();
+  }
+
   static styles = [
     haStyle,
     css`

src/translations/en.json

@@ -3684,7 +3684,16 @@
           "no_border_routers": "No border routers found",
           "border_routers": "{count} border {count, plural,\n  one {router}\n  other {routers}\n}",
           "managed_by_home_assistant": "Managed by Home Assistant",
-          "operational_dataset": "Operational dataset"
+          "operational_dataset": "Operational dataset",
+          "change_channel": "Change channel",
+          "change_channel_initiated_title": "Channel change in progress",
+          "change_channel_initiated_text": "The channel change has been initiated and will complete in {delay} minutes.",
+          "change_channel_invalid": "Invalid channel",
+          "change_channel_label": "Channel",
+          "change_channel_multiprotocol_enabled_title": "The Thread radio has multiprotocol enabled",
+          "change_channel_multiprotocol_enabled_text": "To change channel when the Thread radio has multiprotocol enabled, please use the hardware settings menu.",
+          "change_channel_range": "Channel must be in the range 11 to 26",
+          "change_channel_text": "Initiate a channel change for your Thread networks. This is an advanced operation and can leave your Thread networks inoperable if the new channel is congested. Depending on existing network conditions, many of your devices may not migrate to the new channel and will require re-joining before they start working again. Use with caution."
         },
         "zha": {
           "common": {