Move last changed / last updated out of state table (#7649)

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

@@ -12,6 +12,7 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import "../../../styles/polymer-ha-style";
+import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import { mdiInformationOutline } from "@mdi/js";
 import { computeRTL } from "../../../common/util/compute_rtl";
 
@@ -33,14 +34,25 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         }
 
         .inputs {
+          width: 100%;
           max-width: 400px;
         }
 
+        .info {
+          padding: 0 16px;
+        }
+
         mwc-button {
           margin-top: 8px;
         }
 
+        .table-wrapper {
+          width: 100%;
+          overflow: auto;
+        }
+
         .entities th {
+          padding: 0 8px;
           text-align: left;
           font-size: var(
             --paper-input-container-shared-input-style_-_font-size
@@ -65,7 +77,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         }
         .entities td {
           padding: 4px;
-          min-width: 220px;
+          min-width: 200px;
           word-break: break-word;
         }
         .entities ha-svg-icon {
@@ -81,14 +93,22 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         .entities a {
           color: var(--primary-color);
         }
+
+        :host([narrow]) .state-wrapper {
+          flex-direction: column;
+        }
+
+        :host([narrow]) .info {
+          padding: 0;
+        }
       </style>
 
-      <div class="inputs">
       <p>
         [[localize('ui.panel.developer-tools.tabs.states.description1')]]<br />
         [[localize('ui.panel.developer-tools.tabs.states.description2')]]
       </p>
-
+      <div class="state-wrapper flex layout horizontal">
+        <div class="inputs">
           <ha-entity-picker
             autofocus
             hass="[[hass]]"
@@ -119,10 +139,26 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
             >[[localize('ui.panel.developer-tools.tabs.states.set_state')]]</mwc-button
           >
         </div>
+        <div class="info">
+          <template is="dom-if" if="[[_entity]]">
+            <p>
+              <b
+                >[[localize('ui.panel.developer-tools.tabs.states.last_changed')]]:</b
+              ><br />[[lastChangedString(_entity)]]
+            </p>
+            <p>
+              <b
+                >[[localize('ui.panel.developer-tools.tabs.states.last_updated')]]:</b
+              ><br />[[lastUpdatedString(_entity)]]
+            </p>
+          </template>
+        </div>
+      </div>
 
       <h1>
         [[localize('ui.panel.developer-tools.tabs.states.current_entities')]]
       </h1>
+      <div class="table-wrapper">
         <table class="entities">
           <tr>
             <th>[[localize('ui.panel.developer-tools.tabs.states.entity')]]</th>
@@ -172,11 +208,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 <a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
               </td>
               <td>
-              [[entity.state]]<br /><br />
-              <span class="secondary">
-                last_changed: [[lastChangedString(entity)]]<br />
-                last_updated: [[lastUpdatedString(entity)]]
-              </span>
+                [[entity.state]]
               </td>
               <template
                 is="dom-if"
@@ -187,6 +219,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </tr>
           </template>
         </table>
+      </div>
     `;
   }
 
@@ -226,6 +259,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         value: "",
       },
 
+      _entity: {
+        type: Object,
+      },
+
       _state: {
         type: String,
         value: "",
@@ -247,6 +284,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           "computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter)",
       },
 
+      narrow: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       rtl: {
         reflectToAttribute: true,
         computed: "_computeRTL(hass)",
@@ -257,6 +299,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
   entitySelected(ev) {
     const state = ev.model.entity;
     this._entityId = state.entity_id;
+    this._entity = state;
     this._state = state.state;
     this._stateAttributes = safeDump(state.attributes);
     ev.preventDefault();
@@ -264,6 +307,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   entityIdChanged() {
     if (this._entityId === "") {
+      this._entity = undefined;
       this._state = "";
       this._stateAttributes = "";
       return;
@@ -272,6 +316,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     if (!state) {
       return;
     }
+    this._entity = state;
     this._state = state.state;
     this._stateAttributes = safeDump(state.attributes);
   }
@@ -391,11 +436,17 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   lastChangedString(entity) {
-    return new Date(entity.last_changed).toISOString();
+    return formatDateTimeWithSeconds(
+      new Date(entity.last_changed),
+      this.hass.language
+    );
   }
 
   lastUpdatedString(entity) {
-    return new Date(entity.last_updated).toISOString();
+    return formatDateTimeWithSeconds(
+      new Date(entity.last_updated),
+      this.hass.language
+    );
   }
 
   formatAttributeValue(value) {

src/translations/en.json

@@ -3061,7 +3061,9 @@
             "filter_attributes": "Filter attributes",
             "no_entities": "No entities",
             "more_info": "More Info",
-            "alert_entity_field": "Entity is a mandatory field"
+            "alert_entity_field": "Entity is a mandatory field",
+            "last_updated": "[%key:ui::dialogs::more_info_control::last_updated%]",
+            "last_changed": "[%key:ui::dialogs::more_info_control::last_changed%]"
           },
           "templates": {
             "title": "Template",