Add initial DHCP discovery panel

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -8,6 +8,7 @@ import type { DeviceRegistryEntry } from "../../../../data/device_registry";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { createSearchParam } from "../../../../common/url/search-params";
+import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 
 @customElement("ha-device-info-card")
 export class HaDeviceCard extends LitElement {
@@ -103,7 +104,8 @@ export class HaDeviceCard extends LitElement {
           ${this._getAddresses().map(
             ([type, value]) => html`
               <div class="extra-info">
-                ${type === "bluetooth"
+                ${type === "bluetooth" &&
+                isComponentLoaded(this.hass, "bluetooth")
                   ? html`${titleCase(type)}
                       <a
                         href="/config/bluetooth/advertisement-monitor?${createSearchParam(
@@ -111,8 +113,16 @@ export class HaDeviceCard extends LitElement {
                         )}"
                         >${value.toUpperCase()}</a
                       >`
-                  : html`${type === "mac" ? "MAC" : titleCase(type)}:
+                  : type === "mac" && isComponentLoaded(this.hass, "dhcp")
-                    ${value.toUpperCase()}`}
+                    ? html`${titleCase(type)}
+                        <a
+                          href="/config/dhcp?${createSearchParam({
+                            mac_address: value,
+                          })}"
+                          >${value.toUpperCase()}</a
+                        >`
+                    : html`${type === "mac" ? "MAC" : titleCase(type)}:
+                      ${value.toUpperCase()}`}
               </div>
             `
           )}

src/panels/config/integrations/integration-panels/dhcp/dhcp-config-panel.ts

@@ -1,10 +1,11 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult, PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type { DataTableColumnContainer } from "../../../../../components/data-table/ha-data-table";
+import { extractSearchParamsObject } from "../../../../../common/url/search-params";
 import "../../../../../components/ha-fab";
 import "../../../../../components/ha-icon-button";
 import "../../../../../layouts/hass-tabs-subpage-data-table";
@@ -20,6 +21,8 @@ export class DHCPConfigPanel extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
+  @property({ attribute: false }) public mac_address?: string;
+
   @property({ type: Boolean }) public narrow = false;
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
@@ -82,6 +85,20 @@ export class DHCPConfigPanel extends LitElement {
     }))
   );
 
+  protected willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (this.hasUpdated) {
+      return;
+    }
+
+    const searchParams = extractSearchParamsObject();
+    const mac_address = searchParams.mac_address;
+    if (mac_address) {
+      this.mac_address = mac_address;
+    }
+  }
+
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage-data-table
@@ -90,7 +107,7 @@ export class DHCPConfigPanel extends LitElement {
         .route=${this.route}
         .columns=${this._columns(this.hass.localize)}
         .data=${this._dataWithIds(this._data)}
-        clickable
+        filter=${this.mac_address || ""}
       ></hass-tabs-subpage-data-table>
     `;
   }