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

* feat: Show diagnostics in YAML instead of JSON

* Adding missing semicolon

.github/ISSUE_TEMPLATE/bug_report.md

@@ -39,7 +39,7 @@ Explain what the issue is, and how things should look/behave. If possible provid
 On the card, hold down the Frigate menu button for a few seconds then paste the diagnostics below:
 -->
 
-```json
+```yaml
 
 ```
 

package.json

@@ -30,6 +30,7 @@
     "embla-carousel": "^8.1.4",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "home-assistant-js-websocket": "^9.4.0",
+    "js-yaml": "^4.1.0",
     "keycharm": "^0.4.0",
     "lit": "^3.1.4",
     "lodash-es": "^4.17.21",
@@ -61,6 +62,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@semantic-release/github": "^10.3.3",
+    "@types/js-yaml": "^4",
     "@types/lodash-es": "^4.17.12",
     "@types/masonry-layout": "^4.2.8",
     "@typescript-eslint/eslint-plugin": "^7.13.0",

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>

src/scss/message.scss

@@ -57,6 +57,5 @@ div.message div.icon {
 
 .message pre {
   margin-top: 20px;
-  white-space: pre-wrap;
-  word-break: break-all;
+  overflow-x: scroll;
 }

yarn.lock

@@ -2088,6 +2088,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/js-yaml@npm:^4":
+  version: 4.0.9
+  resolution: "@types/js-yaml@npm:4.0.9"
+  checksum: 10c0/24de857aa8d61526bbfbbaa383aa538283ad17363fcd5bb5148e2c7f604547db36646440e739d78241ed008702a8920665d1add5618687b6743858fae00da211
+  languageName: node
+  linkType: hard
+
 "@types/json5@npm:^0.0.29":
   version: 0.0.29
   resolution: "@types/json5@npm:0.0.29"
@@ -5131,6 +5138,7 @@ __metadata:
     "@rollup/plugin-typescript": "npm:^11.1.6"
     "@semantic-release/github": "npm:^10.3.3"
     "@types/bluebird": "npm:^3.5.42"
+    "@types/js-yaml": "npm:^4"
     "@types/lodash-es": "npm:^4.17.12"
     "@types/masonry-layout": "npm:^4.2.8"
     "@typescript-eslint/eslint-plugin": "npm:^7.13.0"
@@ -5148,6 +5156,7 @@ __metadata:
     eslint-config-prettier: "npm:^9.1.0"
     eslint-plugin-import: "npm:^2.29.1"
     home-assistant-js-websocket: "npm:^9.4.0"
+    js-yaml: "npm:^4.1.0"
     jsdom: "npm:^21.1.2"
     keycharm: "npm:^0.4.0"
     lit: "npm:^3.1.4"