From 26d4599ef42e540d99c0e765327c68b343c708e9 Mon Sep 17 00:00:00 2001
From: Erik Montnemery <erik@montnemery.com>
Date: Tue, 15 Feb 2022 12:18:05 +0100
Subject: [PATCH] Display transmitted messages in MQTT debug info dialog
 (#11531)

---
 src/data/mqtt.ts                              |  1 +
 .../mqtt/dialog-mqtt-device-debug-info.ts     | 27 ++++++++++++++++++-
 .../mqtt/mqtt-messages.ts                     |  4 ++-
 src/translations/en.json                      |  1 +
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/data/mqtt.ts b/src/data/mqtt.ts
index 9c744085fd..7d66e062f5 100644
--- a/src/data/mqtt.ts
+++ b/src/data/mqtt.ts
@@ -22,6 +22,7 @@ export interface MQTTEntityDebugInfo {
   entity_id: string;
   discovery_data: MQTTDiscoveryDebugInfo;
   subscriptions: MQTTTopicDebugInfo[];
+  transmitted: MQTTTopicDebugInfo[];
 }
 
 export interface MQTTTriggerDebugInfo {
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
index 4b0bd660a7..93c3d6a5a9 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
@@ -165,6 +165,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
                     <code>${topic.topic}</code>
                     <mqtt-messages
                       .hass=${this.hass}
+                      direction="Received"
                       .messages=${topic.messages}
                       .showDeserialized=${this._showDeserialized}
                       .showAsYaml=${this._showAsYaml}
@@ -175,7 +176,31 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
                         topic.messages.length
                       )}
                     >
-                    </mqtt-messages>
+                    </mqtt-rx-messages>
+                  </li>
+                `
+              )}
+            </ul>
+            Transmitted messages:
+            <ul>
+              ${entity.transmitted.map(
+                (topic) => html`
+                  <li>
+                    <code>${topic.topic}</code>
+                    <mqtt-messages
+                      .hass=${this.hass}
+                      direction="Transmitted"
+                      .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>
                 `
               )}
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
index ff26193762..90bfb086c0 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
@@ -12,6 +12,8 @@ class MQTTMessages extends LitElement {
 
   @property() public messages!: MQTTMessage[];
 
+  @property() public direction!: string;
+
   @property() public showAsYaml = false;
 
   @property() public showDeserialized = false;
@@ -50,7 +52,7 @@ class MQTTMessages extends LitElement {
                 (message) => html`
                   <li class="message">
                     <div class="time">
-                      Received
+                      ${this.direction}
                       ${formatTimeWithSeconds(
                         new Date(message.time),
                         this.hass.locale
diff --git a/src/translations/en.json b/src/translations/en.json
index 69ad6d04c8..d422b9df16 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -894,6 +894,7 @@
         "no_triggers": "No triggers",
         "payload_display": "Payload display",
         "recent_messages": "{n} most recently received message(s)",
+        "recent_tx_messages": "{n} most recently transmitted message(s)",
         "show_as_yaml": "Show as YAML",
         "triggers": "Triggers"
       }