Add ability to see Zigbee information for a device (#5445)

* add ability to see zigbee information for a device

* cleanup

* handle resize correctly

* cleanup

* convert to ha-dialog

* Simplify

* Add close button

* Add readonly to code editor

* add class

* eslint fixes

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

src/components/ha-code-editor.ts

@@ -20,7 +20,9 @@ export class HaCodeEditor extends UpdatingElement {
 
   @property() public mode?: string;
 
-  @property() public autofocus = false;
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public readOnly = false;
 
   @property() public rtl = false;
 
@@ -128,6 +130,7 @@ export class HaCodeEditor extends UpdatingElement {
       mode: this.mode,
       autofocus: this.autofocus !== false,
       viewportMargin: Infinity,
+      readOnly: this.readOnly,
       extraKeys: {
         Tab: "indentMore",
         "Shift-Tab": "indentLess",

src/data/zha.ts

@@ -23,6 +23,7 @@ export interface ZHADevice {
   power_source?: string;
   area_id?: string;
   device_type: string;
+  signature: any;
 }
 
 export interface Attribute {

src/dialogs/zha-device-zigbee-signature-dialog/dialog-zha-device-zigbee-info.ts

@@ -0,0 +1,70 @@
+import {
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../components/ha-code-editor";
+import { createCloseHeading } from "../../components/ha-dialog";
+import { haStyleDialog } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee-info";
+
+@customElement("dialog-zha-device-zigbee-info")
+class DialogZHADeviceZigbeeInfo extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() private _signature: any;
+
+  public async showDialog(
+    params: ZHADeviceZigbeeInfoDialogParams
+  ): Promise<void> {
+    this._signature = JSON.stringify(
+      {
+        ...params.device.signature,
+        manufacturer: params.device.manufacturer,
+        model: params.device.model,
+        class: params.device.quirk_class,
+      },
+      null,
+      2
+    );
+  }
+
+  protected render(): TemplateResult {
+    if (!this._signature) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        hideActions
+        @closing="${this._close}"
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)
+        )}
+      >
+        <ha-code-editor mode="yaml" readonly .value=${this._signature}>
+        </ha-code-editor>
+      </ha-dialog>
+    `;
+  }
+
+  private _close(): void {
+    this._signature = undefined;
+  }
+
+  static get styles(): CSSResult {
+    return haStyleDialog;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-zha-device-zigbee-info": DialogZHADeviceZigbeeInfo;
+  }
+}

src/dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../common/dom/fire_event";
+import { ZHADevice } from "../../data/zha";
+
+export interface ZHADeviceZigbeeInfoDialogParams {
+  device: ZHADevice;
+}
+
+export const loadZHADeviceZigbeeInfoDialog = () =>
+  import(
+    /* webpackChunkName: "dialog-zha-device-zigbee-info" */ "./dialog-zha-device-zigbee-info"
+  );
+
+export const showZHADeviceZigbeeInfoDialog = (
+  element: HTMLElement,
+  zhaDeviceZigbeeInfoParams: ZHADeviceZigbeeInfoDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-zha-device-zigbee-info",
+    dialogImport: loadZHADeviceZigbeeInfoDialog,
+    dialogParams: zhaDeviceZigbeeInfoParams,
+  });
+};

src/panels/config/zha/zha-device-card.ts

@@ -41,6 +41,7 @@ import { HomeAssistant } from "../../../types";
 import { addEntitiesToLovelaceView } from "../../lovelace/editor/add-entities-to-view";
 import { formatAsPaddedHex } from "./functions";
 import { ItemSelectedEvent, NodeServiceData } from "./types";
+import { showZHADeviceZigbeeInfoDialog } from "../../../dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info";
 
 declare global {
   // for fire event
@@ -367,6 +368,24 @@ class ZHADeviceCard extends LitElement {
                           : ""}
                       `
                     : ""}
+                  ${this.device!.device_type !== "Coordinator"
+                    ? html`
+                        <mwc-button @click=${this._handleZigbeeInfoClicked}>
+                          ${this.hass!.localize(
+                            "ui.dialogs.zha_device_info.buttons.zigbee_information"
+                          )}
+                        </mwc-button>
+                        ${this.showHelp
+                          ? html`
+                              <div class="help-text">
+                                ${this.hass!.localize(
+                                  "ui.dialogs.zha_device_info.services.zigbee_information"
+                                )}
+                              </div>
+                            `
+                          : ""}
+                      `
+                    : ""}
                 </div>
               `
             : ""
@@ -437,6 +456,10 @@ class ZHADeviceCard extends LitElement {
     navigate(this, "/config/zha/add/" + this.device!.ieee);
   }
 
+  private async _handleZigbeeInfoClicked() {
+    showZHADeviceZigbeeInfoDialog(this, { device: this.device! });
+  }
+
   private _addToLovelaceView(): void {
     addEntitiesToLovelaceView(
       this,
@@ -528,6 +551,9 @@ class ZHADeviceCard extends LitElement {
           padding-right: 28px;
           padding-bottom: 10px;
         }
+        .buttons .icon {
+          margin-right: 16px;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -719,15 +719,18 @@
       "zha_device_info": {
         "manuf": "by {manufacturer}",
         "no_area": "No Area",
+        "device_signature": "Zigbee device signature",
         "buttons": {
           "add": "Add Devices",
           "remove": "Remove Device",
-          "reconfigure": "Reconfigure Device"
+          "reconfigure": "Reconfigure Device",
+          "zigbee_information": "Zigbee Information"
         },
         "services": {
           "reconfigure": "Reconfigure ZHA device (heal device). Use this if you are having issues with the device. If the device in question is a battery powered device please ensure it is awake and accepting commands when you use this service.",
           "updateDeviceName": "Set a custom name for this device in the device registry.",
-          "remove": "Remove a device from the Zigbee network."
+          "remove": "Remove a device from the Zigbee network.",
+          "zigbee_information": "View the Zigbee information for the device."
         },
         "confirmations": {
           "remove": "Are you sure that you want to remove the device?"