Fix ZHA neighbor table in the manage device dialog (#14236)

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

src/data/zha.ts

@@ -36,6 +36,8 @@ export interface Neighbor {
   ieee: string;
   nwk: string;
   lqi: string;
+  depth: string;
+  relationship: string;
 }
 
 export interface ZHADeviceEndpoint {

src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts

@@ -27,7 +27,7 @@ import "./zha-cluster-commands";
 import "./zha-manage-clusters";
 import "./zha-device-binding";
 import "./zha-group-binding";
-import "./zha-device-children";
+import "./zha-device-neighbors";
 import "./zha-device-signature";
 import {
   Tab,
@@ -179,10 +179,11 @@ class DialogZHAManageZigbeeDevice extends LitElement {
                   ></zha-device-zigbee-info>
                 `
               : html`
-                  <zha-device-children
+                  <zha-device-neighbors
                     .hass=${this.hass}
                     .device=${this._device}
-                  ></zha-device-children>
+                    .narrow=${!this.large}
+                  ></zha-device-neighbors>
                 `
           )}
         </div>
@@ -221,7 +222,7 @@ class DialogZHAManageZigbeeDevice extends LitElement {
       device &&
       (device.device_type === "Router" || device.device_type === "Coordinator")
     ) {
-      tabs.push("children");
+      tabs.push("neighbors");
     }
 
     return tabs;

src/panels/config/integrations/integration-panels/zha/show-dialog-zha-manage-zigbee-device.ts

@@ -1,7 +1,7 @@
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ZHADevice } from "../../../../../data/zha";
 
-export type Tab = "clusters" | "bindings" | "signature" | "children";
+export type Tab = "clusters" | "bindings" | "signature" | "neighbors";
 
 export interface ZHAManageZigbeeDeviceDialogParams {
   device: ZHADevice;

src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts

@@ -16,12 +16,16 @@ export interface DeviceRowData extends DataTableRowData {
   id: string;
   name: string;
   lqi: number;
+  depth: number;
+  relationship: string;
 }
 
-@customElement("zha-device-children")
-class ZHADeviceChildren extends LitElement {
+@customElement("zha-device-neighbors")
+class ZHADeviceNeighbors extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @property() public device: ZHADevice | undefined;
 
   @state() private _devices: Map<string, ZHADevice> | undefined;
@@ -33,20 +37,22 @@ class ZHADeviceChildren extends LitElement {
     }
   }
 
-  private _deviceChildren = memoizeOne(
+  private _deviceNeighbors = memoizeOne(
     (
       device: ZHADevice | undefined,
       devices: Map<string, ZHADevice> | undefined
     ) => {
       const outputDevices: DeviceRowData[] = [];
       if (device && devices) {
-        device.neighbors.forEach((child) => {
-          const zhaDevice: ZHADevice | undefined = devices.get(child.ieee);
+        device.neighbors.forEach((neighbor) => {
+          const zhaDevice: ZHADevice | undefined = devices.get(neighbor.ieee);
           if (zhaDevice) {
             outputDevices.push({
               name: zhaDevice.user_given_name || zhaDevice.name,
               id: zhaDevice.device_reg_id,
-              lqi: parseInt(child.lqi),
+              lqi: parseInt(neighbor.lqi),
+              depth: parseInt(neighbor.depth),
+              relationship: neighbor.relationship,
             });
           }
         });
@@ -55,22 +61,57 @@ class ZHADeviceChildren extends LitElement {
     }
   );
 
-  private _columns: DataTableColumnContainer = {
-    name: {
-      title: "Name",
-      sortable: true,
-      filterable: true,
-      direction: "asc",
-      grows: true,
-    },
-    lqi: {
-      title: "LQI",
-      sortable: true,
-      filterable: true,
-      type: "numeric",
-      width: "75px",
-    },
-  };
+  private _columns = memoizeOne(
+    (narrow: boolean): DataTableColumnContainer =>
+      narrow
+        ? {
+            name: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.name"),
+              sortable: true,
+              filterable: true,
+              direction: "asc",
+              grows: true,
+            },
+            lqi: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.lqi"),
+              sortable: true,
+              filterable: true,
+              type: "numeric",
+              width: "75px",
+            },
+          }
+        : {
+            name: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.name"),
+              sortable: true,
+              filterable: true,
+              direction: "asc",
+              grows: true,
+            },
+            lqi: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.lqi"),
+              sortable: true,
+              filterable: true,
+              type: "numeric",
+              width: "75px",
+            },
+            relationship: {
+              title: this.hass.localize(
+                "ui.panel.config.zha.neighbors.relationship"
+              ),
+              sortable: true,
+              filterable: true,
+              width: "150px",
+            },
+            depth: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.depth"),
+              sortable: true,
+              filterable: true,
+              type: "numeric",
+              width: "75px",
+            },
+          }
+  );
 
   protected render(): TemplateResult {
     if (!this.device) {
@@ -85,8 +126,8 @@ class ZHADeviceChildren extends LitElement {
           ></ha-circular-progress>`
         : html`<ha-data-table
             .hass=${this.hass}
-            .columns=${this._columns}
-            .data=${this._deviceChildren(this.device, this._devices)}
+            .columns=${this._columns(this.narrow)}
+            .data=${this._deviceNeighbors(this.device, this._devices)}
             auto-height
             .dir=${computeRTLDirection(this.hass)}
             .searchLabel=${this.hass.localize(
@@ -111,6 +152,6 @@ class ZHADeviceChildren extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "zha-device-children": ZHADeviceChildren;
+    "zha-device-neighbors": ZHADeviceNeighbors;
   }
 }

src/translations/en.json

@@ -1024,7 +1024,7 @@
           "clusters": "Clusters",
           "bindings": "Bindings",
           "signature": "Signature",
-          "children": "Children"
+          "neighbors": "Neighbors"
         }
       },
       "zha_device_info": {
@@ -3247,6 +3247,12 @@
             "unbind_button_label": "Unbind Group",
             "bind_button_help": "Bind the selected group to the selected device clusters.",
             "unbind_button_help": "Unbind the selected group from the selected device clusters."
+          },
+          "neighbors": {
+            "name": "Name",
+            "lqi": "LQI",
+            "relationship": "Relationship",
+            "depth": "Depth"
           }
         },
         "zwave_js": {