Add IP Information Dialog (#13283)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/config/network/dialog-ip-detail.ts

@@ -0,0 +1,91 @@
+import "@material/mwc-button/mwc-button";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { createCloseHeading } from "../../../components/ha-dialog";
+import type { NetworkInterface } from "../../../data/hassio/network";
+import { haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import type { IPDetailDialogParams } from "./show-ip-detail-dialog";
+
+@customElement("dialog-ip-detail")
+class DialogIPDetail extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: IPDetailDialogParams;
+
+  @state() private _interface?: NetworkInterface;
+
+  public showDialog(params: IPDetailDialogParams): void {
+    this._params = params;
+    this._interface = this._params.interface;
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    this._interface = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._interface) {
+      return html``;
+    }
+
+    const ipv4 = this._interface.ipv4;
+    const ipv6 = this._interface.ipv6;
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(this.hass, "IP Information")}
+      >
+        ${ipv4
+          ? html`
+              <div>
+                <h3>IPv4</h3>
+                ${ipv4.address
+                  ? html`<div>IP Address: ${ipv4.address?.join(", ")}</div>`
+                  : ""}
+                ${ipv4.gateway ? html`<div>Gateway: ${ipv4.gateway}</div>` : ""}
+                ${ipv4.method ? html`<div>Method: ${ipv4.method}</div>` : ""}
+                ${ipv4.nameservers?.length
+                  ? html`
+                      <div>Name Servers: ${ipv4.nameservers?.join(", ")}</div>
+                    `
+                  : ""}
+              </div>
+            `
+          : ""}
+        ${ipv6
+          ? html`
+              <div>
+                <h3>IPv6</h3>
+                ${ipv6.address
+                  ? html`<div>IP Address: ${ipv6.address?.join(", ")}</div>`
+                  : ""}
+                ${ipv6.gateway ? html`<div>Gateway: ${ipv6.gateway}</div>` : ""}
+                ${ipv6.method ? html`<div>Method: ${ipv6.method}</div>` : ""}
+                ${ipv6.nameservers?.length
+                  ? html`
+                      <div>Name Servers: ${ipv6.nameservers?.join(", ")}</div>
+                    `
+                  : ""}
+              </div>
+            `
+          : ""}
+      </ha-dialog>
+    `;
+  }
+
+  static styles: CSSResultGroup = haStyleDialog;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-ip-detail": DialogIPDetail;
+  }
+}

src/panels/config/network/show-ip-detail-dialog.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { NetworkInterface } from "../../../data/hassio/network";
+
+export interface IPDetailDialogParams {
+  interface?: NetworkInterface;
+}
+
+export const loadIPDetailDialog = () => import("./dialog-ip-detail");
+
+export const showIPDetailDialog = (
+  element: HTMLElement,
+  dialogParams: IPDetailDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-ip-detail",
+    dialogImport: loadIPDetailDialog,
+    dialogParams,
+  });
+};

src/panels/config/network/supervisor-network.ts

@@ -1,13 +1,16 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list";
+import { ActionDetail } from "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
+import { mdiDotsVertical } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import "../../../components/ha-alert";
+import "../../../components/ha-button-menu";
+import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-formfield";
@@ -29,7 +32,7 @@ import {
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-card";
+import { showIPDetailDialog } from "./show-ip-detail-dialog";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -236,9 +239,25 @@ export class HassioNetwork extends LitElement {
               </ha-circular-progress>`
             : this.hass.localize("ui.common.save")}
         </mwc-button>
+        <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
+          <ha-icon-button
+            slot="trigger"
+            .label=${"ui.common.menu"}
+            .path=${mdiDotsVertical}
+          ></ha-icon-button>
+          <mwc-list-item>IP Information</mwc-list-item>
+        </ha-button-menu>
       </div>`;
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        showIPDetailDialog(this, { interface: this._interface });
+        break;
+    }
+  }
+
   private _selectAP(event) {
     this._wifiConfiguration = event.currentTarget.ap;
     this._dirty = true;