Fix display of arrays/objects in attributes (#4836)

* Fix display of arrays/objects in attributes

* async import js-yaml

src/components/ha-attributes.ts

@@ -10,6 +10,9 @@ import {
 import { HassEntity } from "home-assistant-js-websocket";
 
 import hassAttributeUtil from "../util/hass-attributes-util";
+import { until } from "lit-html/directives/until";
+
+let jsYamlPromise: Promise<typeof import("js-yaml")>;
 
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
@@ -32,7 +35,7 @@ class HaAttributes extends LitElement {
             <div class="data-entry">
               <div class="key">${attribute.replace(/_/g, " ")}</div>
               <div class="value">
-                ${this.formatAttributeValue(attribute)}
+                ${this.formatAttribute(attribute)}
               </div>
             </div>
           `
@@ -63,6 +66,10 @@ class HaAttributes extends LitElement {
         color: var(--secondary-text-color);
         text-align: right;
       }
+      pre {
+        font-family: inherit;
+        font-size: inherit;
+      }
     `;
   }
 
@@ -75,18 +82,31 @@ class HaAttributes extends LitElement {
     });
   }
 
-  private formatAttributeValue(attribute: string): string {
+  private formatAttribute(attribute: string): string | TemplateResult {
     if (!this.stateObj) {
       return "-";
     }
     const value = this.stateObj.attributes[attribute];
+    return this.formatAttributeValue(value);
+  }
+
+  private formatAttributeValue(value: any): string | TemplateResult {
     if (value === null) {
       return "-";
     }
-    if (Array.isArray(value)) {
+    if (
-      return value.join(", ");
+      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
+      (!Array.isArray(value) && value instanceof Object)
+    ) {
+      if (!jsYamlPromise) {
+        jsYamlPromise = import(/* webpackChunkName: "js-yaml" */ "js-yaml");
       }
-    return value instanceof Object ? JSON.stringify(value, null, 2) : value;
+      const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
+      return html`
+        <pre>${until(yaml, "")}</pre>
+      `;
+    }
+    return Array.isArray(value) ? value.join(", ") : value;
   }
 }
 

src/panels/developer-tools/state/developer-tools-state.js

@@ -357,14 +357,20 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
     for (i = 0, keys = Object.keys(entity.attributes); i < keys.length; i++) {
       key = keys[i];
-      value = entity.attributes[key];
+      value = this.formatAttributeValue(entity.attributes[key]);
-      if (!Array.isArray(value) && value instanceof Object) {
+      output += `${key}: ${value}\n`;
-        value = JSON.stringify(value, null, "  ");
     }
-      output += key + ": " + value + "\n";
+    return output;
   }
 
-    return output;
+  formatAttributeValue(value) {
+    if (
+      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
+      (!Array.isArray(value) && value instanceof Object)
+    ) {
+      return `\n${safeDump(value)}`;
+    }
+    return Array.isArray(value) ? value.join(", ") : value;
   }
 
   _computeParsedStateAttributes(stateAttributes) {