Add a dialog to SSDP to show raw data (#25362)

* Add a dialog to SSDP to show raw data

* tweaks

* Add a dialog to SSDP to show raw data

* reduce

* tweaks

* Update src/panels/config/integrations/integration-panels/ssdp/dialog-ssdp-raw-data.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Update src/panels/config/integrations/integration-panels/ssdp/dialog-ssdp-discovery-info.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Update src/panels/config/integrations/integration-panels/ssdp/dialog-ssdp-discovery-info.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* add dump

* preen

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

src/panels/config/integrations/integration-panels/ssdp/dialog-ssdp-discovery-info.ts

@@ -9,6 +9,7 @@ import type { SSDPDiscoveryInfoDialogParams } from "./show-dialog-ssdp-discovery
 import "../../../../../components/ha-button";
 import { showToast } from "../../../../../util/toast";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
+import { showSSDPRawDataDialog } from "./show-dialog-ssdp-raw-data";
 
 @customElement("dialog-ssdp-device-info")
 class DialogSSDPDiscoveryInfo extends LitElement implements HassDialog {
@@ -39,6 +40,16 @@ class DialogSSDPDiscoveryInfo extends LitElement implements HassDialog {
     });
   }
 
+  private _showRawData(key: string, data: Record<string, unknown>) {
+    return (e: Event) => {
+      e.preventDefault();
+      showSSDPRawDataDialog(this, {
+        key,
+        data,
+      });
+    };
+  }
+
   protected render(): TemplateResult | typeof nothing {
     if (!this._params) {
       return nothing;
@@ -83,7 +94,20 @@ class DialogSSDPDiscoveryInfo extends LitElement implements HassDialog {
               ([key, value]) => html`
                 <tr>
                   <td><b>${key}</b></td>
-                  <td>${value}</td>
+                  <td>
+                    ${typeof value === "object" && value !== null
+                      ? html`<a
+                          href="#"
+                          @click=${this._showRawData(
+                            key,
+                            value as Record<string, unknown>
+                          )}
+                          >${this.hass.localize(
+                            "ui.panel.config.ssdp.show_raw_data"
+                          )}</a
+                        >`
+                      : value}
+                  </td>
                 </tr>
               `
             )}

src/panels/config/integrations/integration-panels/ssdp/dialog-ssdp-raw-data.ts

@@ -0,0 +1,68 @@
+import { LitElement, html, nothing, css } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import type { TemplateResult } from "lit";
+import { dump } from "js-yaml";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
+import type { HomeAssistant } from "../../../../../types";
+import "../../../../../components/ha-code-editor";
+
+export interface SSDPRawDataDialogParams {
+  key: string;
+  data: Record<string, unknown>;
+}
+
+@customElement("dialog-ssdp-raw-data")
+class DialogSSDPRawData extends LitElement implements HassDialog {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: SSDPRawDataDialogParams;
+
+  public async showDialog(params: SSDPRawDataDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  public closeDialog(): boolean {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    return true;
+  }
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          `${this.hass.localize("ui.panel.config.ssdp.raw_data_title")}: ${this._params.key}`
+        )}
+      >
+        <ha-code-editor
+          mode="yaml"
+          .value=${dump(this._params.data)}
+          readonly
+          autofocus
+        ></ha-code-editor>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = css`
+    ha-code-editor {
+      --code-mirror-max-height: 60vh;
+      --code-mirror-height: auto;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-ssdp-raw-data": DialogSSDPRawData;
+  }
+}

src/panels/config/integrations/integration-panels/ssdp/show-dialog-ssdp-raw-data.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../../../common/dom/fire_event";
+
+export interface SSDPRawDataDialogParams {
+  key: string;
+  data: Record<string, unknown>;
+}
+
+export const loadSSDPRawDataDialog = () => import("./dialog-ssdp-raw-data");
+
+export const showSSDPRawDataDialog = (
+  element: HTMLElement,
+  ssdpRawDataDialogParams: SSDPRawDataDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-ssdp-raw-data",
+    dialogImport: loadSSDPRawDataDialog,
+    dialogParams: ssdpRawDataDialogParams,
+  });
+};

src/translations/en.json

@@ -5587,7 +5587,9 @@
           "upnp": "Universal Plug and Play (UPnP)",
           "discovery_information": "Discovery information",
           "copy_to_clipboard": "Copy to clipboard",
-          "no_devices_found": "No matching SSDP/UPnP discoveries found"
+          "no_devices_found": "No matching SSDP/UPnP discoveries found",
+          "show_raw_data": "Show raw data",
+          "raw_data_title": "Raw data"
         },
         "zeroconf": {
           "name": "Name",