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 89321d5201..16d47f8b05 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
@@ -17,8 +17,9 @@ import {
reconfigureNode,
} from "../../../../../../data/zha";
import { navigate } from "../../../../../../common/navigate";
-import { showZHADeviceZigbeeInfoDialog } from "../../../../../../dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info";
+import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info";
import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
+import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster";
@customElement("ha-device-actions-zha")
export class HaDeviceActionsZha extends LitElement {
@@ -72,6 +73,11 @@ export class HaDeviceActionsZha extends LitElement {
"ui.dialogs.zha_device_info.buttons.zigbee_information"
)}
+
+ ${this.hass!.localize(
+ "ui.dialogs.zha_device_info.buttons.clusters"
+ )}
+
${this.hass!.localize(
"ui.dialogs.zha_device_info.buttons.remove"
@@ -82,6 +88,10 @@ export class HaDeviceActionsZha extends LitElement {
`;
}
+ private async _showClustersDialog(): Promise {
+ await showZHAClusterDialog(this, { device: this._zhaDevice! });
+ }
+
private async _onReconfigureNodeClick(): Promise {
if (!this.hass) {
return;
diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts
new file mode 100644
index 0000000000..52898f33f7
--- /dev/null
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts
@@ -0,0 +1,143 @@
+import {
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+ PropertyValues,
+} 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";
+import {
+ ZHADevice,
+ Cluster,
+ ZHAGroup,
+ fetchBindableDevices,
+ fetchGroups,
+} from "../../../../../data/zha";
+import { ZHAClusterSelectedParams } from "./types";
+import "./zha-cluster-attributes";
+import "./zha-cluster-commands";
+import "./zha-clusters";
+import "./zha-device-binding";
+import "./zha-group-binding";
+import { HASSDomEvent } from "../../../../../common/dom/fire_event";
+import { sortZHADevices, sortZHAGroups } from "./functions";
+
+@customElement("dialog-zha-cluster")
+class DialogZHACluster extends LitElement {
+ @property() public hass!: HomeAssistant;
+
+ @property() private _device?: ZHADevice;
+
+ @property() private _selectedCluster?: Cluster;
+
+ @property() private _bindableDevices: ZHADevice[] = [];
+
+ @property() private _groups: ZHAGroup[] = [];
+
+ public async showDialog(
+ params: ZHADeviceZigbeeInfoDialogParams
+ ): Promise {
+ this._device = params.device;
+ }
+
+ protected updated(changedProperties: PropertyValues): void {
+ super.update(changedProperties);
+ if (changedProperties.has("_device")) {
+ this._fetchData();
+ }
+ }
+
+ protected render(): TemplateResult {
+ if (!this._device) {
+ return html``;
+ }
+
+ return html`
+
+
+ ${this._selectedCluster
+ ? html`
+
+
+ `
+ : ""}
+ ${this._bindableDevices.length > 0
+ ? html`
+
+ `
+ : ""}
+ ${this._device && this._groups.length > 0
+ ? html`
+
+ `
+ : ""}
+
+ `;
+ }
+
+ private _onClusterSelected(
+ selectedClusterEvent: HASSDomEvent
+ ): void {
+ this._selectedCluster = selectedClusterEvent.detail.cluster;
+ }
+
+ private _close(): void {
+ this._device = undefined;
+ }
+
+ private async _fetchData(): Promise {
+ if (this._device && this.hass) {
+ this._bindableDevices =
+ this._device && this._device.device_type !== "Coordinator"
+ ? (await fetchBindableDevices(this.hass, this._device.ieee)).sort(
+ sortZHADevices
+ )
+ : [];
+ this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups);
+ }
+ }
+
+ static get styles(): CSSResult {
+ return haStyleDialog;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "dialog-zha-cluster": DialogZHACluster;
+ }
+}
diff --git a/src/dialogs/zha-device-zigbee-signature-dialog/dialog-zha-device-zigbee-info.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts
similarity index 85%
rename from src/dialogs/zha-device-zigbee-signature-dialog/dialog-zha-device-zigbee-info.ts
rename to src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts
index 0ba57e4c40..f1a921ddd5 100644
--- a/src/dialogs/zha-device-zigbee-signature-dialog/dialog-zha-device-zigbee-info.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts
@@ -6,10 +6,10 @@ import {
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 "../../../../../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")
diff --git a/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts
new file mode 100644
index 0000000000..ae3549dc01
--- /dev/null
+++ b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts
@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { ZHADevice } from "../../../../../data/zha";
+
+export interface ZHAClusterDialogParams {
+ device: ZHADevice;
+}
+
+export const loadZHAClusterDialog = () =>
+ import(
+ /* webpackChunkName: "dialog-zha-device-zigbee-info" */ "./dialog-zha-cluster"
+ );
+
+export const showZHAClusterDialog = (
+ element: HTMLElement,
+ params: ZHAClusterDialogParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-zha-cluster",
+ dialogImport: loadZHAClusterDialog,
+ dialogParams: params,
+ });
+};
diff --git a/src/dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info.ts b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info.ts
similarity index 82%
rename from src/dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info.ts
rename to src/panels/config/integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info.ts
index 26df394b7a..ff96e2ea70 100644
--- a/src/dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info.ts
+++ b/src/panels/config/integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info.ts
@@ -1,5 +1,5 @@
-import { fireEvent } from "../../common/dom/fire_event";
-import { ZHADevice } from "../../data/zha";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { ZHADevice } from "../../../../../data/zha";
export interface ZHADeviceZigbeeInfoDialogParams {
device: ZHADevice;
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
index c47232bf71..80789264ea 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
@@ -64,9 +64,6 @@ export class ZHAClusters extends LitElement {
return html`