fix: Better handle multiple simultaneous requests for diagnostics (#1852)

- Closes #1851


[skip ci]

src/components/diagnostics.ts

@@ -1,16 +1,17 @@
 import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
-import { CSSResultGroup, LitElement, TemplateResult, unsafeCSS } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
 import { RawFrigateCardConfig } from '../config/types';
 import { localize } from '../localize/localize';
 import basicBlockStyle from '../scss/basic-block.scss';
-import { Diagnostics, getDiagnostics } from '../utils/diagnostics';
-import { renderMessage } from './message';
+import { getDiagnostics } from '../utils/diagnostics';
 import { DeviceRegistryManager } from '../utils/ha/registry/device';
+import { renderMessage } from './message';
 
 @customElement('frigate-card-diagnostics')
 export class FrigateCardDiagnostics extends LitElement {
-  @property({ attribute: false })
+  // Not a reactive property to avoid multiple diagnostics fetches.
   public hass?: HomeAssistant;
 
   @property({ attribute: false })
@@ -19,33 +20,31 @@ export class FrigateCardDiagnostics extends LitElement {
   @property({ attribute: false })
   public rawConfig?: RawFrigateCardConfig;
 
-  @state()
-  protected _diagnostics: Diagnostics | null = null;
-
-  protected async _fetchDiagnostics(): Promise<void> {
-    this._diagnostics = await getDiagnostics(
+  protected async _renderDiagnostics(): Promise<TemplateResult> {
+    const diagnostics = await getDiagnostics(
       this.hass,
       this.deviceRegistryManager,
       this.rawConfig,
     );
-  }
 
-  protected shouldUpdate(): boolean {
-    if (!this._diagnostics) {
-      this._fetchDiagnostics().then(() => this.requestUpdate());
-      return false;
-    }
-    return true;
-  }
-
-  protected render(): TemplateResult | void {
     return renderMessage({
       message: localize('error.diagnostics'),
       icon: 'mdi:cogs',
-      context: this._diagnostics,
+      context: diagnostics,
     });
   }
 
+  protected render(): TemplateResult | void {
+    return html`${until(
+      this._renderDiagnostics(),
+      renderMessage({
+        message: localize('error.fetching_diagnostics'),
+        dotdotdot: true,
+        icon: 'mdi:cogs',
+      }),
+    )}`;
+  }
+
   static get styles(): CSSResultGroup {
     return unsafeCSS(basicBlockStyle);
   }

src/components/message.ts

@@ -34,11 +34,12 @@ export class FrigateCardMessage extends LitElement {
     }
 
     const messageTemplate = html`
-      ${this._controller.getMessageString(this.message)}.
+      ${this._controller.getMessageString(this.message)}
       ${this._controller.shouldShowTroubleshootingURL(this.message)
-        ? html`<a href="${this._controller.getTroubleshootingURL(this.message)}"
-            >${localize('error.troubleshooting')}</a
-          >`
+        ? html`.
+            <a href="${this._controller.getTroubleshootingURL(this.message)}"
+              >${localize('error.troubleshooting')}</a
+            >`
         : ''}
     `;
 

src/localize/languages/ca.json

@@ -626,6 +626,7 @@
     "failed_response": "No s'ha pogut rebre la resposta de Home Assistant per a la sol·licitud",
     "failed_retain": "No s'ha pogut retenir l'esdeveniment",
     "failed_sign": "No s'ha pogut signar l'URL de Home Assistant",
+    "fetching_diagnostics": "",
     "image_load_error": "No s'ha pogut carregar la imatge",
     "invalid_configuration": "Configuració no vàlida",
     "invalid_configuration_no_hint": "No hi ha cap indicació d'ubicació disponible (tipus dolent o faltant?)",
@@ -646,6 +647,7 @@
     "no_supported_camera": "",
     "no_supported_cameras": "",
     "reconnecting": "Reconnectant",
+    "stream_not_loading": "",
     "too_many_automations": "Hi ha massa trucades d'automatització imbricades, comproveu la vostra configuració per veure si hi ha bucles",
     "troubleshooting": "Comproveu la resolució de problemes",
     "unknown": "Error desconegut",

src/localize/languages/en.json

@@ -626,6 +626,7 @@
     "failed_response": "Failed to receive response from Home Assistant for request",
     "failed_retain": "Could not retain event",
     "failed_sign": "Could not sign Home Assistant URL",
+    "fetching_diagnostics": "Fetching diagnostics",
     "image_load_error": "The image could not be loaded",
     "invalid_configuration": "Invalid configuration",
     "invalid_configuration_no_hint": "No location hint available (bad or missing type?)",

src/localize/languages/fr.json

@@ -626,6 +626,7 @@
     "failed_response": "Échec de la réponse de Home Assistant à la demande",
     "failed_retain": "Impossible de conserver l'événement",
     "failed_sign": "Impossible de signer l'URL de Home Assistant",
+    "fetching_diagnostics": "",
     "image_load_error": "L'image n'a pas pu être chargée",
     "invalid_configuration": "Configuration invalide",
     "invalid_configuration_no_hint": "Aucune indication de localisation disponible (type incorrect ou manquant ?)",
@@ -646,6 +647,7 @@
     "no_supported_camera": "La caméra sélectionnée ne prend pas en charge cette vue",
     "no_supported_cameras": "Aucune caméra ne prend en charge cette vue",
     "reconnecting": "Reconnexion",
+    "stream_not_loading": "",
     "too_many_automations": "Trop d'appels d'automatisation imbriqués, veuillez vérifier votre configuration pour les boucles",
     "troubleshooting": "Vérifier le dépannage",
     "unknown": "Erreur inconnue",

src/localize/languages/it.json

@@ -626,6 +626,7 @@
     "failed_response": "Impossibile ricevere risposta da Home Assistant per la richiesta",
     "failed_retain": "Impossibile conservare l'evento",
     "failed_sign": "Impossibile firmare l'URL ad Home Assistant",
+    "fetching_diagnostics": "",
     "image_load_error": "L'immagine non può essere caricata",
     "invalid_configuration": "Configurazione non valida",
     "invalid_configuration_no_hint": "Nessun suggerimento di posizione disponibile (tipo difettoso o mancante?)",
@@ -646,6 +647,7 @@
     "no_supported_camera": "",
     "no_supported_cameras": "",
     "reconnecting": "Riconnessione",
+    "stream_not_loading": "",
     "too_many_automations": "",
     "troubleshooting": "Controllare la risoluzione dei problemi",
     "unknown": "Errore sconosciuto",

src/localize/languages/pt-BR.json

@@ -626,6 +626,7 @@
     "failed_response": "Falha ao receber resposta do Home Assistant para solicitação",
     "failed_retain": "Não foi possível reter o evento",
     "failed_sign": "Não foi possível assinar a URL do Home Assistant",
+    "fetching_diagnostics": "",
     "image_load_error": "A imagem não pôde ser carregada",
     "invalid_configuration": "Configuração inválida",
     "invalid_configuration_no_hint": "Nenhuma dica de local disponível (tipo incorreto ou ausente?)",
@@ -646,6 +647,7 @@
     "no_supported_camera": "",
     "no_supported_cameras": "",
     "reconnecting": "Reconectando",
+    "stream_not_loading": "",
     "too_many_automations": "",
     "troubleshooting": "Verifique a solução de problemas",
     "unknown": "Erro desconhecido",

src/localize/languages/pt-PT.json

@@ -626,6 +626,7 @@
     "failed_response": "Falha ao receber resposta do Home Assistant para solicitação",
     "failed_retain": "Não foi possível reter o evento",
     "failed_sign": "Não foi possível assinar a URL do Home Assistant",
+    "fetching_diagnostics": "",
     "image_load_error": "A imagem não pôde ser carregada",
     "invalid_configuration": "Configuração inválida",
     "invalid_configuration_no_hint": "Nenhuma dica de local disponível (tipo incorreto ou ausente?)",
@@ -646,6 +647,7 @@
     "no_supported_camera": "",
     "no_supported_cameras": "",
     "reconnecting": "A voltar a ligar",
+    "stream_not_loading": "",
     "too_many_automations": "",
     "troubleshooting": "Verifique a solução de problemas",
     "unknown": "Erro desconhecido",