feat: Show diagnostics in yaml instead of json (#1550)

* feat: Show diagnostics in YAML instead of JSON

* Adding missing semicolon

src/components/diagnostics.ts

@@ -22,11 +22,15 @@ export class FrigateCardDiagnostics extends LitElement {
     this._diagnostics = await getDiagnostics(this.hass, this.rawConfig);
   }
 
-  protected render(): TemplateResult | void {
+  protected shouldUpdate(): boolean {
     if (!this._diagnostics) {
       this._fetchDiagnostics().then(() => this.requestUpdate());
-      return;
+      return false;
     }
+    return true;
+  }
+
+  protected render(): TemplateResult | void {
     return renderMessage({
       message: localize('error.diagnostics'),
       type: 'diagnostics',

src/components/message.ts

@@ -1,3 +1,4 @@
+import yaml from 'js-yaml';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
@@ -42,8 +43,8 @@ export class FrigateCardMessage extends LitElement {
                   : ''}`
               : ''}
           </span>
-          ${this.context && typeof this.context !== 'string'
-            ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>`
+          ${this.context && typeof this.context === 'object'
+            ? html`<pre>${yaml.dump(this.context)}</pre>`
             : ''}
         </div>
       </div>