Skip to content

Add controller statistics to zwave_js config dashboard #12668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 6 commits into from
May 25, 2022
Merged

Add controller statistics to zwave_js config dashboard #12668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b2e6d50
Add controller statistics to zwave_js config dashboard
raman325 May 12, 2022
8f72d99
Add space
raman325 May 17, 2022
3519c3b
review comments
raman325 May 19, 2022
2e8a62d
Switch import order
raman325 May 19, 2022
75a5cb5
Use twoline mwc-list
raman325 May 20, 2022
2c5c6c3
Drop list item height
raman325 May 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/data/zwave_js.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,20 @@ export interface ZWaveJSHealNetworkStatusMessage {
heal_node_status: { [key: number]: string };
}

export interface ZWaveJSControllerStatisticsUpdatedMessage {
event: "statistics updated";
source: "controller";
messages_tx: number;
messages_rx: number;
messages_dropped_tx: number;
messages_dropped_rx: number;
nak: number;
can: number;
timeout_ack: number;
timeout_response: number;
timeout_callback: number;
}

export interface ZWaveJSRemovedNode {
node_id: number;
manufacturer: string;
Expand Down Expand Up @@ -547,6 +561,19 @@ export const subscribeHealZwaveNetworkProgress = (
}
);

export const subscribeZwaveControllerStatistics = (
hass: HomeAssistant,
entry_id: string,
callbackFunction: (message: ZWaveJSControllerStatisticsUpdatedMessage) => void
): Promise<UnsubscribeFunc> =>
hass.connection.subscribeMessage(
(message: any) => callbackFunction(message),
{
type: "zwave_js/subscribe_controller_statistics",
entry_id,
}
);

export const getZwaveJsIdentifiersFromDevice = (
device: DeviceRegistryEntry
): ZWaveJSNodeIdentifiers | undefined => {
Expand Down
236 changes: 210 additions & 26 deletions src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import {
mdiAlertCircle,
mdiCheckCircle,
Expand All @@ -11,9 +12,12 @@ import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-expansion-panel";
import "../../../../../components/ha-fab";
import "../../../../../components/ha-help-tooltip";
import "../../../../../components/ha-icon-next";
import "../../../../../components/ha-svg-icon";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
fetchZwaveDataCollectionStatus,
fetchZwaveNetworkStatus,
Expand All @@ -22,7 +26,9 @@ import {
setZwaveDataCollectionPreference,
stopZwaveExclusion,
stopZwaveInclusion,
subscribeZwaveControllerStatistics,
ZWaveJSClient,
ZWaveJSControllerStatisticsUpdatedMessage,
ZWaveJSNetwork,
ZwaveJSProvisioningEntry,
} from "../../../../../data/zwave_js";
Expand All @@ -41,9 +47,10 @@ import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node"
import { configTabs } from "./zwave_js-config-router";
import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
import { computeRTL } from "../../../../../common/util/compute_rtl";
import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";

@customElement("zwave_js-config-dashboard")
class ZWaveJSConfigDashboard extends LitElement {
class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
@property({ type: Object }) public hass!: HomeAssistant;

@property({ type: Object }) public route!: Route;
Expand All @@ -52,7 +59,7 @@ class ZWaveJSConfigDashboard extends LitElement {

@property({ type: Boolean }) public isWide!: boolean;

@property() public configEntryId?: string;
@property() public configEntryId!: string;

@state() private _configEntry?: ConfigEntry;

Expand All @@ -66,12 +73,30 @@ class ZWaveJSConfigDashboard extends LitElement {

@state() private _dataCollectionOptIn?: boolean;

@state()
private _statistics?: ZWaveJSControllerStatisticsUpdatedMessage;

protected firstUpdated() {
if (this.hass) {
this._fetchData();
}
}

public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
return [
subscribeZwaveControllerStatistics(
this.hass,
this.configEntryId,
(message) => {
if (!this.hasUpdated) {
return;
}
Comment thread
raman325 marked this conversation as resolved.
this._statistics = message;
}
),
];
}

protected render(): TemplateResult {
if (!this._configEntry) {
return html``;
Expand Down Expand Up @@ -211,22 +236,178 @@ class ZWaveJSConfigDashboard extends LitElement {
</ha-card>
<ha-card header="Diagnostics">
<div class="card-content">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.driver_version"
)}:
${this._network.client.driver_version}<br />
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.server_version"
)}:
${this._network.client.server_version}<br />
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.home_id"
)}:
${this._network.controller.home_id}<br />
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.server_url"
)}:
${this._network.client.ws_server_url}<br />
<div class="row">
Comment thread
raman325 marked this conversation as resolved.
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.driver_version"
)}:
</span>
<span>${this._network.client.driver_version}</span>
</div>
Comment on lines +240 to +246
Copy link
Copy Markdown
Member

@bramkragten bramkragten May 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use the list items for the top part too?

Copy link
Copy Markdown
Contributor Author

@raman325 raman325 May 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the reason I didn't make that change is because the mwc-list makes it harder to copy and paste the information out of there. Maybe this isn't an issue now that we have diagnostics

Copy link
Copy Markdown
Contributor Author

@raman325 raman325 May 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it looks good. There's probably some CSS that can be done to make this look better, but that's a bit above my pay grade 🙂

image

Copy link
Copy Markdown
Member

@bramkragten bramkragten May 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, let's keep it as you have it for now then 😄

<div class="row">
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.server_version"
)}:
</span>
<span>${this._network.client.server_version}</span>
</div>
<div class="row">
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.home_id"
)}:
</span>
<span>${this._network.controller.home_id}</span>
</div>
<div class="row">
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.server_url"
)}:
</span>
<span>${this._network.client.ws_server_url}</span>
</div>
<br />
<ha-expansion-panel
.header=${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.title"
)}
>
<mwc-list noninteractive>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_tx.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_tx.tooltip"
)}
</span>
<span slot="meta"
>${this._statistics?.messages_tx ?? 0}</span
>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_rx.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_rx.tooltip"
)}
</span>
<span slot="meta"
>${this._statistics?.messages_rx ?? 0}</span
>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.tooltip"
)}
</span>
<span slot="meta"
>${this._statistics?.messages_dropped_tx ?? 0}</span
>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.tooltip"
)}
</span>
<span slot="meta"
>${this._statistics?.messages_dropped_rx ?? 0}</span
>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.nak.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.nak.tooltip"
)}
</span>
<span slot="meta">${this._statistics?.nak ?? 0}</span>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.can.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.can.tooltip"
)}
</span>
<span slot="meta">${this._statistics?.can ?? 0}</span>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.tooltip"
)}
</span>
<span slot="meta"
>${this._statistics?.timeout_ack ?? 0}</span
>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.timeout_response.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.timeout_response.tooltip"
)}
</span>
<span slot="meta"
>${this._statistics?.timeout_response ?? 0}</span
>
</mwc-list-item>
<mwc-list-item twoline hasmeta>
<span>
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.label"
)}
</span>
<span slot="secondary">
${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.tooltip"
)}
</span>
<span slot="meta"
>${this._statistics?.timeout_callback ?? 0}</span
>
</mwc-list-item>
</mwc-list>
</ha-expansion-panel>
</div>
<div class="card-actions">
<mwc-button
Expand Down Expand Up @@ -383,7 +564,7 @@ class ZWaveJSConfigDashboard extends LitElement {
domain: "zwave_js",
});
this._configEntry = configEntries.find(
(entry) => entry.entry_id === this.configEntryId!
(entry) => entry.entry_id === this.configEntryId
);

if (ERROR_STATES.includes(this._configEntry!.state)) {
Expand Down Expand Up @@ -508,6 +689,11 @@ class ZWaveJSConfigDashboard extends LitElement {
padding-right: 40px;
}

.row {
display: flex;
justify-content: space-between;
}

.network-status div.heading {
display: flex;
align-items: center;
Expand All @@ -530,6 +716,10 @@ class ZWaveJSConfigDashboard extends LitElement {
font-size: 1rem;
}

mwc-list-item {
height: 60px;
}

.card-header {
display: flex;
}
Expand All @@ -546,12 +736,6 @@ class ZWaveJSConfigDashboard extends LitElement {
max-width: 600px;
}

button.dump {
width: 100%;
text-align: center;
color: var(--secondary-text-color);
}

[hidden] {
display: none;
}
Expand Down
Loading