diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 5d35d8b3..d4093fe4 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.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 ``` diff --git a/package.json b/package.json index aae28d08..31ab5f64 100644 --- a/package.json +++ b/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", diff --git a/src/components/diagnostics.ts b/src/components/diagnostics.ts index 44d962ec..fd049c28 100644 --- a/src/components/diagnostics.ts +++ b/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', diff --git a/src/components/message.ts b/src/components/message.ts index 189960c2..08d6d352 100644 --- a/src/components/message.ts +++ b/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 { : ''}` : ''} - ${this.context && typeof this.context !== 'string' - ? html`
${JSON.stringify(this.context, null, 2)}
` + ${this.context && typeof this.context === 'object' + ? html`
${yaml.dump(this.context)}
` : ''} diff --git a/src/scss/message.scss b/src/scss/message.scss index 17486702..63427729 100644 --- a/src/scss/message.scss +++ b/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; } diff --git a/yarn.lock b/yarn.lock index c87d5fc9..2f60368c 100644 --- a/yarn.lock +++ b/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"