From 77bcdd04bd3cdc017f957a577d373ccc5cbbecb4 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Wed, 7 Apr 2021 17:31:53 +0000
Subject: [PATCH 1/3] Add logbook note

---
 src/components/trace/hat-logbook-note.ts      | 26 ++++++++++
 .../trace/ha-automation-trace-logbook.ts      | 47 +++++++++++++++++++
 .../trace/ha-automation-trace-path-details.ts | 18 ++++---
 .../trace/ha-automation-trace-timeline.ts     | 14 +++---
 .../automation/trace/ha-automation-trace.ts   |  7 +--
 5 files changed, 96 insertions(+), 16 deletions(-)
 create mode 100644 src/components/trace/hat-logbook-note.ts
 create mode 100644 src/panels/config/automation/trace/ha-automation-trace-logbook.ts

diff --git a/src/components/trace/hat-logbook-note.ts b/src/components/trace/hat-logbook-note.ts
new file mode 100644
index 000000000000..5d5b1f9df762
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
new file mode 100644
index 000000000000..7b14b7969a47
--- /dev/null
+++ b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
@@ -0,0 +1,47 @@
+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({ attribute: false }) public logbookEntries!: LogbookEntry[];
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-logbook
+        .hass=${this.hass}
+        .entries=${this.logbookEntries}
+      ></ha-logbook>
+      <hat-logbook-note></hat-logbook-note>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      css`
+        :host {
+          display: block;
+          padding: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-trace-logbook": HaAutomationTraceLogbook;
+  }
+}
diff --git a/src/panels/config/automation/trace/ha-automation-trace-path-details.ts b/src/panels/config/automation/trace/ha-automation-trace-path-details.ts
index b27edf981414..2416ea2ad641 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-path-details.ts
+++ b/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
-          relative-time
-          .hass=${this.hass}
-          .entries=${entries}
-          .narrow=${this.narrow}
-        ></ha-logbook>`
+      ? html`
+          <ha-logbook
+            relative-time
+            .hass=${this.hass}
+            .entries=${entries}
+            .narrow=${this.narrow}
+          ></ha-logbook>
+          <hat-logbook-note></hat-logbook-note>
+        `
       : html`<div class="padded-box">
           No Logbook entries found for this step.
         </div>`;
diff --git a/src/panels/config/automation/trace/ha-automation-trace-timeline.ts b/src/panels/config/automation/trace/ha-automation-trace-timeline.ts
index 63599b2db5c6..b61ce862eec9 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-timeline.ts
+++ b/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 { HomeAssistant } from "../../../../types";
-import { LogbookEntry } from "../../../../data/logbook";
+import type { AutomationTraceExtended } from "../../../../data/trace";
+import type { HomeAssistant } from "../../../../types";
+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>
     `;
   }
 
diff --git a/src/panels/config/automation/trace/ha-automation-trace.ts b/src/panels/config/automation/trace/ha-automation-trace.ts
index 53c7131dc379..35e718a64076 100644
--- a/src/panels/config/automation/trace/ha-automation-trace.ts
+++ b/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 {
@@ -238,10 +239,10 @@ export class HaAutomationTrace extends LitElement {
                       `
                     : this._view === "logbook"
                     ? html`
-                        <ha-logbook
+                        <ha-automation-trace-logbook
                           .hass=${this.hass}
-                          .entries=${this._logbookEntries}
-                        ></ha-logbook>
+                          .logbookEntries=${this._logbookEntries}
+                        ></ha-automation-trace-logbook>
                       `
                     : this._view === "blueprint"
                     ? html`

From 98985e3a3f894793bd0784abaaee6f525b5f999c Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 8 Apr 2021 11:35:04 -0700
Subject: [PATCH 2/3] Apply suggestions from code review

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 .../trace/ha-automation-trace-logbook.ts      | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
index 7b14b7969a47..59e628972b72 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
@@ -20,19 +20,27 @@ export class HaAutomationTraceLogbook extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-logbook
-        .hass=${this.hass}
-        .entries=${this.logbookEntries}
-      ></ha-logbook>
-      <hat-logbook-note></hat-logbook-note>
+    return logbookEntries.length
+      ? html`
+          <ha-logbook
+            relative-time
+            .hass=${this.hass}
+            .entries=${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`
-        :host {
-          display: block;
+        .padded-box {
           padding: 16px;
         }
       `,

From 2409c82256f9117b2ab0362bff0a145841e336d2 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 8 Apr 2021 18:36:54 +0000
Subject: [PATCH 3/3] Fix it weer

---
 .../automation/trace/ha-automation-trace-logbook.ts      | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
index 59e628972b72..b18d83d1be4b 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
@@ -16,16 +16,17 @@ import "../../../logbook/ha-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 html`
-    return logbookEntries.length
+    return this.logbookEntries.length
       ? html`
           <ha-logbook
             relative-time
             .hass=${this.hass}
-            .entries=${logbookEntries}
+            .entries=${this.logbookEntries}
             .narrow=${this.narrow}
           ></ha-logbook>
           <hat-logbook-note></hat-logbook-note>
@@ -34,8 +35,6 @@ export class HaAutomationTraceLogbook extends LitElement {
           No Logbook entries found for this step.
         </div>`;
   }
-    `;
-  }
 
   static get styles(): CSSResult[] {
     return [