diff --git a/src/data/zha.ts b/src/data/zha.ts index f2e1d6363f..3cd291e22d 100644 --- a/src/data/zha.ts +++ b/src/data/zha.ts @@ -36,6 +36,8 @@ export interface Neighbor { ieee: string; nwk: string; lqi: string; + depth: string; + relationship: string; } export interface ZHADeviceEndpoint { diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts index 4104f9edda..1be029cfe9 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts +++ b/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 { > ` : html` - + .narrow=${!this.large} + > ` )} @@ -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; diff --git a/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-manage-zigbee-device.ts index a2854748ff..259e41dbdb 100644 --- a/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-manage-zigbee-device.ts +++ b/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; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-children.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts similarity index 53% rename from src/panels/config/integrations/integration-panels/zha/zha-device-children.ts rename to src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts index 52a1bdf1b3..e292f403f5 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-children.ts +++ b/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 | undefined; @@ -33,20 +37,22 @@ class ZHADeviceChildren extends LitElement { } } - private _deviceChildren = memoizeOne( + private _deviceNeighbors = memoizeOne( ( device: ZHADevice | undefined, devices: Map | 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 { >` : html`