Add navigation option from more-info to history (#9717)

src/dialogs/more-info/ha-more-info-history.ts

@@ -1,12 +1,19 @@
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { fireEvent } from "../../common/dom/fire_event";
 import { throttle } from "../../common/util/throttle";
 import "../../components/chart/state-history-charts";
 import { getRecentWithCache } from "../../data/cached-history";
 import { HistoryResult } from "../../data/history";
 import { HomeAssistant } from "../../types";
 
+declare global {
+  interface HASSDomEvents {
+    closed: undefined;
+  }
+}
+
 @customElement("ha-more-info-history")
 export class MoreInfoHistory extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -24,14 +31,26 @@ export class MoreInfoHistory extends LitElement {
       return html``;
     }
 
+    const href = "/history?entity_id=" + this.entityId;
+
     return html`${isComponentLoaded(this.hass, "history")
-      ? html`<state-history-charts
+      ? html` <div class="header">
-          up-to-now
+            <div class="title">
-          .hass=${this.hass}
+              ${this.hass.localize("ui.dialogs.more_info_control.history")}
-          .historyData=${this._stateHistory}
+            </div>
-          .isLoadingData=${!this._stateHistory}
+            <a href=${href} @click=${this._close}
-        ></state-history-charts>`
+              >${this.hass.localize(
-      : ""} `;
+                "ui.dialogs.more_info_control.show_more"
+              )}</a
+            >
+          </div>
+          <state-history-charts
+            up-to-now
+            .hass=${this.hass}
+            .historyData=${this._stateHistory}
+            .isLoadingData=${!this._stateHistory}
+          ></state-history-charts>`
+      : ""}`;
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -78,6 +97,38 @@ export class MoreInfoHistory extends LitElement {
       this.hass!.language
     );
   }
+
+  private _close(): void {
+    setTimeout(() => fireEvent(this, "closed"), 500);
+  }
+
+  static get styles() {
+    return [
+      css`
+        .header {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+        }
+        .header > a,
+        a:visited {
+          color: var(--primary-color);
+        }
+        .title {
+          font-family: var(--paper-font-title_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-title_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-title_-_font-size);
+          font-weight: var(--paper-font-title_-_font-weight);
+          letter-spacing: var(--paper-font-title_-_letter-spacing);
+          line-height: var(--paper-font-title_-_line-height);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -1,16 +1,16 @@
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { throttle } from "../../common/util/throttle";
 import "../../components/ha-circular-progress";
-import { fetchUsers } from "../../data/user";
 import { getLogbookData, LogbookEntry } from "../../data/logbook";
 import { loadTraceContexts, TraceContexts } from "../../data/trace";
+import { fetchUsers } from "../../data/user";
 import "../../panels/logbook/ha-logbook";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
-import { closeDialog } from "../make-dialog-manager";
 
 @customElement("ha-more-info-logbook")
 export class MoreInfoLogbook extends LitElement {
@@ -44,6 +44,8 @@ export class MoreInfoLogbook extends LitElement {
       return html``;
     }
 
+    const href = "/logbook?entity_id=" + this.entityId;
+
     return html`
       ${isComponentLoaded(this.hass, "logbook")
         ? this._error
@@ -61,6 +63,16 @@ export class MoreInfoLogbook extends LitElement {
             `
           : this._logbookEntries.length
           ? html`
+              <div class="header">
+                <div class="title">
+                  ${this.hass.localize("ui.dialogs.more_info_control.logbook")}
+                </div>
+                <a href=${href} @click=${this._close}
+                  >${this.hass.localize(
+                    "ui.dialogs.more_info_control.show_more"
+                  )}</a
+                >
+              </div>
               <ha-logbook
                 narrow
                 no-icon
@@ -81,11 +93,6 @@ export class MoreInfoLogbook extends LitElement {
 
   protected firstUpdated(): void {
     this._fetchUserPromise = this._fetchUserNames();
-    this.addEventListener("click", (ev) => {
-      if ((ev.composedPath()[0] as HTMLElement).tagName === "A") {
-        setTimeout(() => closeDialog("ha-more-info-dialog"), 500);
-      }
-    });
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -182,6 +189,10 @@ export class MoreInfoLogbook extends LitElement {
     this._userIdToName = userIdToName;
   }
 
+  private _close(): void {
+    setTimeout(() => fireEvent(this, "closed"), 500);
+  }
+
   static get styles() {
     return [
       haStyle,
@@ -203,6 +214,27 @@ export class MoreInfoLogbook extends LitElement {
           display: flex;
           justify-content: center;
         }
+        .header {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+        }
+        .header > a,
+        a:visited {
+          color: var(--primary-color);
+        }
+        .title {
+          font-family: var(--paper-font-title_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-title_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-title_-_font-size);
+          font-weight: var(--paper-font-title_-_font-weight);
+          letter-spacing: var(--paper-font-title_-_letter-spacing);
+          line-height: var(--paper-font-title_-_line-height);
+        }
       `,
     ];
   }

src/panels/history/ha-panel-history.ts

@@ -12,6 +12,7 @@ import {
 } from "date-fns";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
+import { extractSearchParam } from "../../common/url/search-params";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/chart/state-history-charts";
 import "../../components/entity/ha-entity-picker";
@@ -136,6 +137,8 @@ class HaPanelHistory extends LitElement {
       [this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
         [addDays(weekStart, -7), addDays(weekEnd, -7)],
     };
+
+    this._entityId = extractSearchParam("entity_id") ?? "";
   }
 
   protected updated(changedProps: PropertyValues) {

src/panels/logbook/ha-logbook.ts

@@ -222,6 +222,7 @@ class HaLogbook extends LitElement {
                         }?run_id=${
                           this.traceContexts[item.context_id!].run_id
                         }`}
+                        @click=${this._close}
                         >${this.hass.localize(
                           "ui.components.logbook.show_trace"
                         )}</a
@@ -254,6 +255,10 @@ class HaLogbook extends LitElement {
     });
   }
 
+  private _close(): void {
+    setTimeout(() => fireEvent(this, "closed"), 500);
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/logbook/ha-panel-logbook.ts

@@ -33,6 +33,7 @@ import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "./ha-logbook";
+import { extractSearchParam } from "../../common/url/search-params";
 
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -158,6 +159,8 @@ export class HaPanelLogbook extends LitElement {
       [this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
         [addDays(weekStart, -7), addDays(weekEnd, -7)],
     };
+
+    this._entityId = extractSearchParam("entity_id") ?? "";
   }
 
   protected updated(changedProps: PropertyValues<this>) {

src/translations/en.json

@@ -628,8 +628,10 @@
         "edit": "Edit entity",
         "details": "Details",
         "history": "History",
+        "logbook": "Logbook",
         "last_changed": "Last changed",
         "last_updated": "Last updated",
+        "show_more": "Show more",
         "script": {
           "last_action": "Last action",
           "last_triggered": "Last triggered"