Periodically refresh alerts on the device page (#25385)

* Periodically refresh alerts on the device page

* Update src/panels/config/devices/ha-config-device-page.ts

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

* revert type change

* Apply suggestions from code review

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

---------

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

src/panels/config/devices/ha-config-device-page.ts

@@ -107,6 +107,8 @@ export interface DeviceAlert {
   text: string;
 }
 
+const DEVICE_ALERTS_INTERVAL = 30000;
+
 @customElement("ha-config-device-page")
 export class HaConfigDevicePage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -134,6 +136,8 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _deviceAlerts?: DeviceAlert[];
 
+  private _deviceAlertsTimeout?: number;
+
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
@@ -280,6 +284,7 @@ export class HaConfigDevicePage extends LitElement {
     this._getDiagnosticButtons(this._diagnosticDownloadLinks);
     this._getDeleteActions();
     this._getDeviceActions();
+    clearTimeout(this._deviceAlertsTimeout);
     this._getDeviceAlerts();
   }
 
@@ -295,6 +300,11 @@ export class HaConfigDevicePage extends LitElement {
     }
   }
 
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._deviceAlertsTimeout);
+  }
+
   protected render() {
     if (!this.hass || !this.deviceId) {
       return nothing;
@@ -1153,6 +1163,10 @@ export class HaConfigDevicePage extends LitElement {
 
     if (deviceAlerts.length) {
       this._deviceAlerts = deviceAlerts;
+      this._deviceAlertsTimeout = window.setTimeout(
+        () => this._getDeviceAlerts(),
+        DEVICE_ALERTS_INTERVAL
+      );
     }
   }