Add logbook note (#8843)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/trace/hat-logbook-note.ts

@@ -0,0 +1,26 @@
+import { LitElement, css, html, customElement } from "lit-element";
+
+@customElement("hat-logbook-note")
+class HatLogbookNote extends LitElement {
+  render() {
+    return html`
+      Not all shown logbook entries might be related to this automation.
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      text-align: center;
+      font-style: italic;
+      padding: 16px;
+      margin-top: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-logbook-note": HatLogbookNote;
+  }
+}

src/panels/config/automation/trace/ha-automation-trace-logbook.ts

@@ -0,0 +1,54 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import type { HomeAssistant } from "../../../../types";
+import type { LogbookEntry } from "../../../../data/logbook";
+import "../../../../components/trace/hat-logbook-note";
+import "../../../logbook/ha-logbook";
+
+@customElement("ha-automation-trace-logbook")
+export class HaAutomationTraceLogbook extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
+
+  @property({ attribute: false }) public logbookEntries!: LogbookEntry[];
+
+  protected render(): TemplateResult {
+    return this.logbookEntries.length
+      ? html`
+          <ha-logbook
+            relative-time
+            .hass=${this.hass}
+            .entries=${this.logbookEntries}
+            .narrow=${this.narrow}
+          ></ha-logbook>
+          <hat-logbook-note></hat-logbook-note>
+        `
+      : html`<div class="padded-box">
+          No Logbook entries found for this step.
+        </div>`;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      css`
+        .padded-box {
+          padding: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-trace-logbook": HaAutomationTraceLogbook;
+  }
+}

src/panels/config/automation/trace/ha-automation-trace-path-details.ts

@@ -9,6 +9,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import {
   ActionTraceStep,
   AutomationTraceExtended,
@@ -18,11 +19,11 @@ import {
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-code-editor";
 import type { NodeInfo } from "../../../../components/trace/hat-graph";
+import "../../../../components/trace/hat-logbook-note";
 import { HomeAssistant } from "../../../../types";
 import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
 import { LogbookEntry } from "../../../../data/logbook";
 import { traceTabStyles } from "./styles";
-import { classMap } from "lit-html/directives/class-map";
 import "../../../logbook/ha-logbook";
 
 @customElement("ha-automation-trace-path-details")
@@ -205,12 +206,15 @@ ${safeDump(trace.changed_variables).trimRight()}</pre
     }
 
     return entries.length
-      ? html`<ha-logbook
+      ? html`
-          relative-time
+          <ha-logbook
-          .hass=${this.hass}
+            relative-time
-          .entries=${entries}
+            .hass=${this.hass}
-          .narrow=${this.narrow}
+            .entries=${entries}
-        ></ha-logbook>`
+            .narrow=${this.narrow}
+          ></ha-logbook>
+          <hat-logbook-note></hat-logbook-note>
+        `
       : html`<div class="padded-box">
           No Logbook entries found for this step.
         </div>`;

src/panels/config/automation/trace/ha-automation-trace-timeline.ts

@@ -7,19 +7,20 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { AutomationTraceExtended } from "../../../../data/trace";
+import type { AutomationTraceExtended } from "../../../../data/trace";
-import { HomeAssistant } from "../../../../types";
+import type { HomeAssistant } from "../../../../types";
-import { LogbookEntry } from "../../../../data/logbook";
+import type { LogbookEntry } from "../../../../data/logbook";
 import "../../../../components/trace/hat-trace-timeline";
-import { NodeInfo } from "../../../../components/trace/hat-graph";
+import type { NodeInfo } from "../../../../components/trace/hat-graph";
+import "../../../../components/trace/hat-logbook-note";
 
 @customElement("ha-automation-trace-timeline")
 export class HaAutomationTraceTimeline extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trace!: AutomationTraceExtended;
+  @property({ attribute: false }) public trace!: AutomationTraceExtended;
 
-  @property() public logbookEntries!: LogbookEntry[];
+  @property({ attribute: false }) public logbookEntries!: LogbookEntry[];
 
   @property() public selected!: NodeInfo;
 
@@ -33,6 +34,7 @@ export class HaAutomationTraceTimeline extends LitElement {
         allowPick
       >
       </hat-trace-timeline>
+      <hat-logbook-note></hat-logbook-note>
     `;
   }
 

src/panels/config/automation/trace/ha-automation-trace.ts

@@ -30,6 +30,7 @@ import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "./ha-automation-trace-path-details";
 import "./ha-automation-trace-timeline";
 import "./ha-automation-trace-config";
+import "./ha-automation-trace-logbook";
 import { classMap } from "lit-html/directives/class-map";
 import { traceTabStyles } from "./styles";
 import {
@@ -252,10 +253,10 @@ export class HaAutomationTrace extends LitElement {
                       `
                     : this._view === "logbook"
                     ? html`
-                        <ha-logbook
+                        <ha-automation-trace-logbook
                           .hass=${this.hass}
-                          .entries=${this._logbookEntries}
+                          .logbookEntries=${this._logbookEntries}
-                        ></ha-logbook>
+                        ></ha-automation-trace-logbook>
                       `
                     : this._view === "blueprint"
                     ? html`