Display transmitted messages in MQTT debug info dialog (#11531)

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

@@ -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>
                 `
               )}

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

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"
       }