Virtualize logbook

package.json

@@ -89,6 +89,7 @@
     "leaflet": "^1.4.0",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.0",
+    "lit-virtualizer": "^0.4.2",
     "marked": "^0.6.1",
     "mdn-polyfills": "^5.16.0",
     "memoize-one": "^5.0.2",

src/data/logbook.ts

@@ -0,0 +1,7 @@
+export interface LogbookEntry {
+  when: string;
+  name: string;
+  message: string;
+  entity_id?: string;
+  domain: string;
+}

src/panels/logbook/ha-logbook.ts

@@ -0,0 +1,156 @@
+import "@polymer/iron-icon/iron-icon";
+
+import formatTime from "../../common/datetime/format_time";
+import formatDate from "../../common/datetime/format_date";
+import { domainIcon } from "../../common/entity/domain_icon";
+import { computeRTL } from "../../common/util/compute_rtl";
+import {
+  LitElement,
+  html,
+  property,
+  TemplateResult,
+  CSSResult,
+  css,
+  PropertyValues,
+} from "lit-element";
+import { HomeAssistant } from "../../types";
+import { fireEvent } from "../../common/dom/fire_event";
+import "lit-virtualizer";
+import { LogbookEntry } from "../../data/logbook";
+
+class HaLogbook extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public entries: LogbookEntry[] = [];
+  @property({ attribute: "rtl", type: Boolean, reflect: true })
+  // @ts-ignore
+  private _rtl = false;
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (!changedProps.has("hass")) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (oldHass && oldHass.language !== this.hass.language) {
+      this._rtl = computeRTL(this.hass);
+    }
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._rtl = computeRTL(this.hass);
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.entries?.length) {
+      return html`
+        ${this.hass.localize("ui.panel.logbook.entries_not_found")}
+      `;
+    }
+
+    return html`
+      <lit-virtualizer
+        .items=${this.entries}
+        .renderItem=${(item: LogbookEntry, index: number) =>
+          this._renderLogbookItem(item, index)}
+        style="height: 100%;"
+      ></lit-virtualizer>
+    `;
+  }
+
+  private _renderLogbookItem(
+    item: LogbookEntry,
+    index: number
+  ): TemplateResult {
+    const previous = this.entries[index - 1];
+    return html`
+      <div>
+        ${index === 0 ||
+        (item?.when &&
+          previous?.when &&
+          new Date(item.when).toDateString() !==
+            new Date(previous.when).toDateString())
+          ? html`
+              <h4 class="date">
+                ${formatDate(new Date(item.when), this.hass.language)}
+              </h4>
+            `
+          : html``}
+
+        <div class="entry">
+          <div class="time">
+            ${formatTime(new Date(item.when), this.hass.language)}
+          </div>
+          <iron-icon .icon="${domainIcon(item.domain)}"></iron-icon>
+          <div class="message">
+            ${!item.entity_id
+              ? html`
+                  <span class="name">${item.name}</span>
+                `
+              : html`
+                  <a
+                    href="#"
+                    @click=${this._entityClicked}
+                    .entityId=${item.entity_id}
+                    class="name"
+                  >
+                    ${item.name}
+                  </a>
+                `}
+            <span>${item.message}</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private _entityClicked(ev: Event) {
+    ev.preventDefault();
+    fireEvent(this, "hass-more-info", {
+      entityId: (ev.target as any).entityId,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      :host([rtl]) {
+        direction: ltr;
+      }
+
+      .entry {
+        display: flex;
+        line-height: 2em;
+      }
+
+      .time {
+        width: 55px;
+        font-size: 0.8em;
+        color: var(--secondary-text-color);
+      }
+
+      :host([rtl]) .date {
+        direction: rtl;
+      }
+
+      iron-icon {
+        margin: 0 8px 0 16px;
+        color: var(--primary-text-color);
+      }
+
+      .message {
+        color: var(--primary-text-color);
+      }
+
+      a {
+        color: var(--primary-color);
+      }
+    `;
+  }
+}
+
+customElements.define("ha-logbook", HaLogbook);

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

@@ -28,7 +28,15 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="ha-style">
         .content {
-          padding: 0 16px 16px;
+          padding: 0 16px 0 16px;
+        }
+
+        ha-logbook {
+          height: calc(100vh - 136px);
+        }
+
+        :host([narrow]) ha-logbook {
+          height: calc(100vh - 198px);
         }
 
         paper-spinner {
@@ -42,6 +50,15 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
           margin-bottom: 24px;
         }
 
+        .filters {
+          display: flex;
+          align-items: center;
+        }
+
+        :host([narrow]) .filters {
+          flex-wrap: wrap;
+        }
+
         vaadin-date-picker {
           max-width: 200px;
           margin-right: 16px;
@@ -65,10 +82,15 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
 
         ha-entity-picker {
           display: inline-block;
-          width: 100%;
+          flex-grow: 1;
           max-width: 400px;
         }
 
+        :host([narrow]) ha-entity-picker {
+          max-width: none;
+          width: 100%;
+        }
+
         [hidden] {
           display: none !important;
         }
@@ -106,7 +128,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
             alt="[[localize('ui.common.loading')]]"
           ></paper-spinner>
 
-          <div class="flex layout horizontal wrap">
+          <div class="filters">
             <vaadin-date-picker
               id="picker"
               value="{{_currentDate}}"
@@ -158,7 +180,8 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
   static get properties() {
     return {
       hass: Object,
-      narrow: Boolean,
+
+      narrow: { type: Boolean, reflectToAttribute: true },
 
       // ISO8601 formatted date string
       _currentDate: {