Add initial Thread panel (#15126)

* Add initial Thread panel

* Add link to Matter panel

src/data/thread.ts

@@ -0,0 +1,11 @@
+import { HomeAssistant } from "../types";
+
+export interface ThreadInfo {
+  url: string;
+  active_dataset_tlvs: string;
+}
+
+export const threadGetInfo = (hass: HomeAssistant): Promise<ThreadInfo> =>
+  hass.callWS({
+    type: "otbr/info",
+  });

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

@@ -485,6 +485,13 @@ class HaPanelConfig extends HassRouterPage {
             "./integrations/integration-panels/matter/matter-config-panel"
           ),
       },
+      thread: {
+        tag: "thread-config-panel",
+        load: () =>
+          import(
+            "./integrations/integration-panels/thread/thread-config-panel"
+          ),
+      },
       application_credentials: {
         tag: "ha-config-application-credentials",
         load: () =>

src/panels/config/integrations/ha-integration-card.ts

@@ -79,6 +79,7 @@ const integrationsWithPanel = {
   zha: "/config/zha/dashboard",
   zwave_js: "/config/zwave_js/dashboard",
   matter: "/config/matter",
+  otbr: "/config/thread",
 };
 
 @customElement("ha-integration-card")

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

@@ -14,6 +14,7 @@ import { HomeAssistant } from "../../../../../types";
 import "../../../../../components/ha-alert";
 import { showPromptDialog } from "../../../../../dialogs/generic/show-dialog-box";
 import { navigate } from "../../../../../common/navigate";
+import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 
 @customElement("matter-config-panel")
 export class MatterConfigPanel extends LitElement {
@@ -32,18 +33,24 @@ export class MatterConfigPanel extends LitElement {
   protected render(): TemplateResult {
     return html`
       <hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Matter">
+        ${isComponentLoaded(this.hass, "otbr")
+          ? html`
+              <a href="/config/thread" slot="toolbar-icon">
+                <mwc-button>Visit Thread Panel</mwc-button>
+              </a>
+            `
+          : ""}
         <div class="content">
           <ha-card header="Matter">
+            <ha-alert alert-type="warning"
+              >Matter is still in the early phase of development, it is not
+              meant to be used in production. This panel is for development
+              only.</ha-alert
+            >
             <div class="card-content">
               ${this._error
                 ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
                 : ""}
-              <ha-alert alert-type="warning"
-                >Matter is still in the early phase of development, it is not
-                meant to be used in production. This panel is for development
-                only.</ha-alert
-              >
-
               You can add Matter devices by commissing them if they are not
               setup yet, or share them from another controller and enter the
               share code.
@@ -199,6 +206,10 @@ export class MatterConfigPanel extends LitElement {
   static styles = [
     haStyle,
     css`
+      ha-alert[alert-type="warning"] {
+        position: relative;
+        top: -16px;
+      }
       .content {
         padding: 24px 0 32px;
         max-width: 600px;
@@ -208,6 +219,9 @@ export class MatterConfigPanel extends LitElement {
       ha-card:first-child {
         margin-bottom: 16px;
       }
+      a[slot="toolbar-icon"] {
+        text-decoration: none;
+      }
     `,
   ];
 }

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

@@ -0,0 +1,73 @@
+import "@material/mwc-button";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../../../components/ha-card";
+import "../../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../types";
+import { threadGetInfo, ThreadInfo } from "../../../../../data/thread";
+
+@customElement("thread-config-panel")
+export class ThreadConfigPanel extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @state() private _info?: ThreadInfo;
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Thread">
+        <div class="content">
+          <ha-card header="Thread Border Router">
+            <div class="card-content">
+              ${!this._info
+                ? html`<ha-circular-progress active></ha-circular-progress>`
+                : html`
+                    <table>
+                      <tr>
+                        <td>URL</td>
+                        <td>${this._info.url}</td>
+                      </tr>
+                      <tr>
+                        <td>Active Dataset TLVs</td>
+                        <td>${this._info.active_dataset_tlvs || "-"}</td>
+                      </tr>
+                    </table>
+                  `}
+            </div>
+          </ha-card>
+        </div>
+      </hass-subpage>
+    `;
+  }
+
+  protected override firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    threadGetInfo(this.hass).then((info) => {
+      this._info = info;
+    });
+  }
+
+  static styles = [
+    haStyle,
+    css`
+      .content {
+        padding: 24px 0 32px;
+        max-width: 600px;
+        margin: 0 auto;
+        direction: ltr;
+      }
+      ha-card:first-child {
+        margin-bottom: 16px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "thread-config-panel": ThreadConfigPanel;
+  }
+}