Add "last_changed" and "last_updated" to dev tools state view (#7375)

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

@@ -42,6 +42,9 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
         .entities th {
           text-align: left;
+          font-size: var(
+            --paper-input-container-shared-input-style_-_font-size
+          );
         }
 
         :host([rtl]) .entities th {
@@ -62,7 +65,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         }
         .entities td {
           padding: 4px;
-          min-width: 200px;
+          min-width: 220px;
           word-break: break-word;
         }
         .entities ha-svg-icon {
@@ -168,7 +171,13 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
               ></ha-svg-icon>
               <a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
             </td>
-            <td>[[entity.state]]</td>
+            <td>
+              [[entity.state]]<br /><br />
+              <span class="secondary">
+                last_changed: [[lastChangedString(entity)]]<br />
+                last_updated: [[lastUpdatedString(entity)]]
+              </span>
+            </td>
             <template
               is="dom-if"
               if="[[computeShowAttributes(narrow, _showAttributes)]]"
@@ -381,6 +390,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     return output;
   }
 
+  lastChangedString(entity) {
+    return new Date(entity.last_changed).toISOString();
+  }
+
+  lastUpdatedString(entity) {
+    return new Date(entity.last_updated).toISOString();
+  }
+
   formatAttributeValue(value) {
     if (
       (Array.isArray(value) && value.some((val) => val instanceof Object)) ||

src/translations/en.json

@@ -518,6 +518,7 @@
         "edit": "Edit entity",
         "details": "Details",
         "history": "History",
+        "last_changed": "Last changed",
         "last_updated": "Last updated",
         "last_changed": "Last changed",
         "script": {