Display transmitted messages in MQTT debug info dialog

src/data/mqtt.ts

@@ -22,6 +22,7 @@ export interface MQTTEntityDebugInfo {
   entity_id: string;
   discovery_data: MQTTDiscoveryDebugInfo;
   subscriptions: MQTTTopicDebugInfo[];
+  transmitted: MQTTTopicDebugInfo[];
 }
 
 export interface MQTTTriggerDebugInfo {

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -15,7 +15,8 @@ import {
 import { haStyleDialog } from "../../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../../types";
 import "./mqtt-discovery-payload";
-import "./mqtt-messages";
+import "./mqtt-rx-messages";
+import "./mqtt-tx-messages";
 import { MQTTDeviceDebugInfoDialogParams } from "./show-dialog-mqtt-device-debug-info";
 
 @customElement("dialog-mqtt-device-debug-info")
@@ -162,19 +163,42 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
                 (topic) => html`
                   <li>
                     <code>${topic.topic}</code>
-                    <mqtt-messages
+                    <mqtt-rx-messages
                       .hass=${this.hass}
                       .messages=${topic.messages}
                       .showDeserialized=${this._showDeserialized}
                       .showAsYaml=${this._showAsYaml}
                       .subscribedTopic=${topic.topic}
                       .summary=${this.hass!.localize(
-                        "ui.dialogs.mqtt_device_debug_info.recent_messages",
+                        "ui.dialogs.mqtt_device_debug_info.recent_rx_messages",
                         "n",
                         topic.messages.length
                       )}
                     >
-                    </mqtt-messages>
+                    </mqtt-rx-messages>
+                  </li>
+                `
+              )}
+            </ul>
+            Transmitted messages:
+            <ul>
+              ${entity.transmitted.map(
+                (topic) => html`
+                  <li>
+                    <code>${topic.topic}</code>
+                    <mqtt-tx-messages
+                      .hass=${this.hass}
+                      .messages=${topic.messages}
+                      .showDeserialized=${this._showDeserialized}
+                      .showAsYaml=${this._showAsYaml}
+                      .subscribedTopic=${topic.topic}
+                      .summary=${this.hass!.localize(
+                        "ui.dialogs.mqtt_device_debug_info.recent_tx_messages",
+                        "n",
+                        topic.messages.length
+                      )}
+                    >
+                    </mqtt-tx-messages>
                   </li>
                 `
               )}

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts

@@ -1,13 +1,12 @@
 import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { formatTimeWithSeconds } from "../../../../../../common/datetime/format_time";
 import { MQTTMessage } from "../../../../../../data/mqtt";
 import { HomeAssistant } from "../../../../../../types";
 
-@customElement("mqtt-messages")
-class MQTTMessages extends LitElement {
+export abstract class MQTTMessages extends LitElement {
   public hass!: HomeAssistant;
 
   @property() public messages!: MQTTMessage[];
@@ -26,6 +25,8 @@ class MQTTMessages extends LitElement {
 
   @state() private _showTopic = false;
 
+  abstract readonly direction: string;
+
   protected firstUpdated(): void {
     this.messages.forEach((message) => {
       // If any message's topic differs from the subscribed topic, show topics + payload
@@ -50,7 +51,7 @@ class MQTTMessages extends LitElement {
                 (message) => html`
                   <li class="message">
                     <div class="time">
-                      Received
+                      ${this.direction}
                       ${formatTimeWithSeconds(
                         new Date(message.time),
                         this.hass.locale
@@ -169,9 +170,3 @@ class MQTTMessages extends LitElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "mqtt-messages": MQTTMessages;
-  }
-}

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-rx-messages.ts

@@ -0,0 +1,13 @@
+import { customElement } from "lit/decorators";
+import { MQTTMessages } from "./mqtt-messages";
+
+@customElement("mqtt-rx-messages")
+class MQTTRxMessages extends MQTTMessages {
+  direction = "Received";
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mqtt-rx-messages": MQTTRxMessages;
+  }
+}

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-tx-messages.ts

@@ -0,0 +1,13 @@
+import { customElement } from "lit/decorators";
+import { MQTTMessages } from "./mqtt-messages";
+
+@customElement("mqtt-tx-messages")
+class MQTTTxMessages extends MQTTMessages {
+  direction = "Transmitted";
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mqtt-tx-messages": MQTTTxMessages;
+  }
+}

src/translations/en.json

@@ -885,7 +885,8 @@
         "no_entities": "No entities",
         "no_triggers": "No triggers",
         "payload_display": "Payload display",
-        "recent_messages": "{n} most recently received message(s)",
+        "recent_rx_messages": "{n} most recently received message(s)",
+        "recent_tx_messages": "{n} most recently transmitted message(s)",
         "show_as_yaml": "Show as YAML",
         "triggers": "Triggers"
       }