From b2c2843c1ac2a7155816fa8ba53566816a535d91 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sat, 5 Dec 2020 13:44:35 -0500 Subject: [PATCH 1/6] add refresh topology button --- .../zha/zha-network-visualization-page.ts | 38 ++++++++++++++++++- src/translations/en.json | 3 +- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index 898924a1ab2a..4067027f7a34 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -12,6 +12,8 @@ import { import { Edge, EdgeOptions, Network, Node } from "vis-network"; import { navigate } from "../../../../../common/navigate"; import "../../../../../common/search/search-input"; +import "../../../../../components/ha-button-menu"; +import "../../../../../components/buttons/ha-call-api-button"; import "../../../../../components/device/ha-device-picker"; import "../../../../../components/ha-button-menu"; import "../../../../../components/ha-svg-icon"; @@ -25,7 +27,7 @@ import { formatAsPaddedHex } from "./functions"; export class ZHANetworkVisualizationPage extends LitElement { @property({ type: Object }) public hass!: HomeAssistant; - @property({ type: Boolean }) public narrow!: boolean; + @property({ type: Boolean, reflect: true }) public narrow = false; @query("#visualization", true) private _visualization?: HTMLElement; @@ -128,6 +130,11 @@ export class ZHANetworkVisualizationPage extends LitElement { .includeDomains="['zha']" @value-changed=${this._zoomToDevice} > + + ${this.hass!.localize( + "ui.panel.config.zha.visualization.refresh_topology" + )} +
@@ -299,30 +306,59 @@ export class ZHANetworkVisualizationPage extends LitElement { line-height: var(--paper-font-display1_-_line-height); opacity: var(--dark-primary-opacity); } + .table-header { border-bottom: 1px solid --divider-color; padding: 0 16px; display: flex; align-items: center; + flex-direction: row; height: var(--header-height); } + + :host([narrow]) .table-header { + flex-direction: column; + align-items: stretch; + height: var(--header-height) * 3; + } + .search-toolbar { display: flex; align-items: center; color: var(--secondary-text-color); padding: 0 16px; } + search-input { position: relative; top: 2px; flex: 1; } + + :host(:not([narrow])) search-input { + margin: 5px; + } + search-input.header { left: -8px; } + ha-device-picker { flex: 1; } + + :host(:not([narrow])) ha-device-picker { + margin: 5px; + } + + ha-call-api-button { + font-weight: 500; + color: var(--primary-color); + } + + :host(:not([narrow])) ha-call-api-button { + margin: 5px; + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index f2234c775ed6..46e6080ce1d9 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2363,7 +2363,8 @@ "header": "Network Visualization", "caption": "Visualization", "highlight_label": "Highlight Devices", - "zoom_label": "Zoom To Device" + "zoom_label": "Zoom To Device", + "refresh_topology": "Refresh Topology" }, "group_binding": { "header": "Group Binding", From 84e40dbc8e59f700ea54ba3334b15da8b4433bf1 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sat, 5 Dec 2020 14:33:19 -0500 Subject: [PATCH 2/6] use the right button --- src/data/zha.ts | 5 ++++ .../zha/zha-network-visualization-page.ts | 28 +++++++++++++------ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/data/zha.ts b/src/data/zha.ts index 96c8166a2450..f9897082570e 100644 --- a/src/data/zha.ts +++ b/src/data/zha.ts @@ -89,6 +89,11 @@ export const reconfigureNode = ( ieee: ieeeAddress, }); +export const refreshTopology = (hass: HomeAssistant): Promise => + hass.callWS({ + type: "zha/topology/update", + }); + export const fetchAttributesForCluster = ( hass: HomeAssistant, ieeeAddress: string, diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index 4067027f7a34..a0e31284fd58 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -9,11 +9,19 @@ import { PropertyValues, query, } from "lit-element"; -import { Edge, EdgeOptions, Network, Node } from "vis-network"; + +import "@material/mwc-button"; import { navigate } from "../../../../../common/navigate"; +import { + fetchDevices, + refreshTopology, + ZHADevice, +} from "../../../../../data/zha"; +import "../../../../../layouts/hass-subpage"; +import type { HomeAssistant } from "../../../../../types"; +import { Network, Edge, Node, EdgeOptions } from "vis-network"; import "../../../../../common/search/search-input"; import "../../../../../components/ha-button-menu"; -import "../../../../../components/buttons/ha-call-api-button"; import "../../../../../components/device/ha-device-picker"; import "../../../../../components/ha-button-menu"; import "../../../../../components/ha-svg-icon"; @@ -130,11 +138,11 @@ export class ZHANetworkVisualizationPage extends LitElement { .includeDomains="['zha']" @value-changed=${this._zoomToDevice} > - - ${this.hass!.localize( + ${this.hass!.localize( "ui.panel.config.zha.visualization.refresh_topology" - )} - + )}
@@ -292,6 +300,10 @@ export class ZHANetworkVisualizationPage extends LitElement { }); } + private async _refreshTopology(): Promise { + await refreshTopology(this.hass); + } + static get styles(): CSSResult[] { return [ css` @@ -351,12 +363,12 @@ export class ZHANetworkVisualizationPage extends LitElement { margin: 5px; } - ha-call-api-button { + mwc-button { font-weight: 500; color: var(--primary-color); } - :host(:not([narrow])) ha-call-api-button { + :host(:not([narrow])) mwc-button { margin: 5px; } `, From c8bc6bae5613767c4b5dda73f29764a62073fac5 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sat, 12 Dec 2020 15:26:02 -0500 Subject: [PATCH 3/6] view in visualization --- .../zha/ha-device-actions-zha.ts | 12 +++++++ .../zha/zha-config-dashboard-router.ts | 2 ++ .../zha/zha-network-visualization-page.ts | 32 ++++++++++++------- src/translations/en.json | 3 +- 4 files changed, 37 insertions(+), 12 deletions(-) diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts index 40e6c7e79c84..c1dd302ce9f2 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts @@ -86,6 +86,11 @@ export class HaDeviceActionsZha extends LitElement { ` : ""} + + ${this.hass!.localize( + "ui.dialogs.zha_device_info.buttons.view_in_visualization" + )} + `; } @@ -104,6 +109,13 @@ export class HaDeviceActionsZha extends LitElement { navigate(this, "/config/zha/add/" + this._zhaDevice!.ieee); } + private _onViewInVisualizationClick() { + navigate( + this, + "/config/zha/visualization/" + this._zhaDevice!.device_reg_id + ); + } + private async _handleZigbeeInfoClicked() { showZHADeviceZigbeeInfoDialog(this, { device: this._zhaDevice! }); } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts index 5a52b8d5a2eb..4fcef9343cd9 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts @@ -59,6 +59,8 @@ class ZHAConfigDashboardRouter extends HassRouterPage { el.groupId = this.routeTail.path.substr(1); } else if (this._currentPage === "device") { el.ieee = this.routeTail.path.substr(1); + } else if (this._currentPage === "visualization") { + el.zoomedDeviceId = this.routeTail.path.substr(1); } const searchParams = new URLSearchParams(window.location.search); diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index a0e31284fd58..7ef00cff2cb2 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -37,6 +37,9 @@ export class ZHANetworkVisualizationPage extends LitElement { @property({ type: Boolean, reflect: true }) public narrow = false; + @property() + public zoomedDeviceId?: string; + @query("#visualization", true) private _visualization?: HTMLElement; @@ -55,9 +58,6 @@ export class ZHANetworkVisualizationPage extends LitElement { @internalProperty() private _filter?: string; - @internalProperty() - private _zoomedDeviceId?: string; - protected firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); if (this.hass) { @@ -108,6 +108,12 @@ export class ZHANetworkVisualizationPage extends LitElement { } } }); + + this._network.on("stabilized", () => { + if (this.zoomedDeviceId) { + this._zoomToDevice(); + } + }); } protected render() { @@ -131,12 +137,12 @@ export class ZHANetworkVisualizationPage extends LitElement { ${this.hass!.localize( @@ -263,7 +269,7 @@ export class ZHANetworkVisualizationPage extends LitElement { filteredNodeIds.push(node.id!); } }); - this._zoomedDeviceId = ""; + this.zoomedDeviceId = ""; this._zoomOut(); this._network.selectNodes(filteredNodeIds, true); } else { @@ -271,21 +277,25 @@ export class ZHANetworkVisualizationPage extends LitElement { } } - private _zoomToDevice(event: PolymerChangedEvent) { + private _onZoomToDevice(event: PolymerChangedEvent) { event.stopPropagation(); - this._zoomedDeviceId = event.detail.value; + this.zoomedDeviceId = event.detail.value; if (!this._network) { return; } + this._zoomToDevice(); + } + + private _zoomToDevice() { this._filter = ""; - if (!this._zoomedDeviceId) { + if (!this.zoomedDeviceId) { this._zoomOut(); } else { const device: ZHADevice | undefined = this._devicesByDeviceId.get( - this._zoomedDeviceId + this.zoomedDeviceId ); if (device) { - this._network.fit({ + this._network!.fit({ nodes: [device.ieee], animation: { duration: 500, easingFunction: "easeInQuad" }, }); diff --git a/src/translations/en.json b/src/translations/en.json index 46e6080ce1d9..badfa4120fa3 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -743,7 +743,8 @@ "remove": "Remove Device", "clusters": "Manage Clusters", "reconfigure": "Reconfigure Device", - "zigbee_information": "Zigbee device signature" + "zigbee_information": "Zigbee device signature", + "view_in_visualization": "View in Visualization" }, "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.", From cb514aedc44ae5c3c2d0f06ab3e56245c153b17c Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Tue, 5 Jan 2021 07:34:04 -0500 Subject: [PATCH 4/6] reorder buttons --- .../integration-elements/zha/ha-device-actions-zha.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts index c1dd302ce9f2..b8a179e542df 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts @@ -79,6 +79,11 @@ export class HaDeviceActionsZha extends LitElement { "ui.dialogs.zha_device_info.buttons.clusters" )} + + ${this.hass!.localize( + "ui.dialogs.zha_device_info.buttons.view_in_visualization" + )} + ${this.hass!.localize( "ui.dialogs.zha_device_info.buttons.remove" @@ -86,11 +91,6 @@ export class HaDeviceActionsZha extends LitElement { ` : ""} - - ${this.hass!.localize( - "ui.dialogs.zha_device_info.buttons.view_in_visualization" - )} - `; } From 6baa3e2357ccb7d698150ae83739a628486864e3 Mon Sep 17 00:00:00 2001 From: David Mulcahey Date: Sun, 28 Feb 2021 14:21:44 -0500 Subject: [PATCH 5/6] fix rebase and device filter --- .../zha/zha-network-visualization-page.ts | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index 7ef00cff2cb2..1da86aaf8b04 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -25,11 +25,9 @@ import "../../../../../components/ha-button-menu"; import "../../../../../components/device/ha-device-picker"; import "../../../../../components/ha-button-menu"; import "../../../../../components/ha-svg-icon"; -import { fetchDevices, ZHADevice } from "../../../../../data/zha"; -import "../../../../../layouts/hass-subpage"; import { PolymerChangedEvent } from "../../../../../polymer-types"; -import type { HomeAssistant } from "../../../../../types"; import { formatAsPaddedHex } from "./functions"; +import { DeviceRegistryEntry } from "../../../../../data/device_registry"; @customElement("zha-network-visualization-page") export class ZHANetworkVisualizationPage extends LitElement { @@ -141,7 +139,7 @@ export class ZHANetworkVisualizationPage extends LitElement { .label=${this.hass.localize( "ui.panel.config.zha.visualization.zoom_label" )} - .includeDomains="['zha']" + .deviceFilter=${(device) => this._filterDevices(device)} @value-changed=${this._onZoomToDevice} > Date: Sun, 28 Feb 2021 15:34:31 -0500 Subject: [PATCH 6/6] Remove duplicate import --- .../integration-panels/zha/zha-network-visualization-page.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index 1da86aaf8b04..190c7dd3c255 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -21,7 +21,6 @@ import "../../../../../layouts/hass-subpage"; import type { HomeAssistant } from "../../../../../types"; import { Network, Edge, Node, EdgeOptions } from "vis-network"; import "../../../../../common/search/search-input"; -import "../../../../../components/ha-button-menu"; import "../../../../../components/device/ha-device-picker"; import "../../../../../components/ha-button-menu"; import "../../../../../components/ha-svg-icon";