Add config panel to recorder

src/data/recorder.ts

@@ -0,0 +1,32 @@
+import { HomeAssistant } from "../types";
+
+export interface RecorderConfig {
+  auto_purge: boolean;
+  commit_interval: number;
+  db_max_retries: number;
+  db_retry_wait: number;
+  db_url: string;
+  exclude: RecorderFilter;
+  include: RecorderFilter;
+  purge_keep_days: number;
+}
+
+export interface RecorderFilter {
+  domains: string[];
+  entities: string[];
+  entity_globs: string[];
+}
+
+export const fetchRecorderConfig = (hass: HomeAssistant) =>
+  hass.callWS<RecorderConfig>({
+    type: "recorder/config",
+  });
+
+export const updateRecorderConfig = (
+  hass: HomeAssistant,
+  config: Partial<RecorderConfig>
+) =>
+  hass.callWS<RecorderConfig>({
+    type: "recorder/update_config",
+    config,
+  });

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

@@ -398,6 +398,13 @@ class HaPanelConfig extends HassRouterPage {
         load: () =>
           import("./integrations/integration-panels/ozw/ozw-config-router"),
       },
+      recorder: {
+        tag: "recorder-config-panel",
+        load: () =>
+          import(
+            "./integrations/integration-panels/recorder/recorder-config-panel"
+          ),
+      },
       zwave_js: {
         tag: "zwave_js-config-router",
         load: () =>

src/panels/config/integrations/ha-integration-card.ts

@@ -48,6 +48,7 @@ import "./ha-integration-header";
 const integrationsWithPanel = {
   hassio: "/hassio/dashboard",
   mqtt: "/config/mqtt",
+  recorder: "/config/recorder",
   zha: "/config/zha/dashboard",
   ozw: "/config/ozw/dashboard",
   zwave: "/config/zwave",

src/panels/config/integrations/integration-panels/recorder/recorder-config-advanced.ts

@@ -0,0 +1,166 @@
+import "@material/mwc-button";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../../components/ha-card";
+import { HaCheckbox } from "../../../../../components/ha-checkbox";
+import "../../../../../components/ha-formfield";
+import { haStyle } from "../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../types";
+import { PolymerChangedEvent } from "../../../../../polymer-types";
+import {
+  RecorderConfig,
+  updateRecorderConfig,
+} from "../../../../../data/recorder";
+
+@customElement("recorder-config-advanced")
+class RecorderConfigAdvanced extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public config?: RecorderConfig;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <ha-card header=${this.hass.localize(
+        "ui.panel.config.recorder.header.advanced"
+      )}>
+        <div class="card-content">
+          <ha-formfield
+            label=${this.hass.localize("ui.panel.config.recorder.auto_purge")}>
+            <ha-checkbox
+              .checked=${this.config?.auto_purge}
+              @change=${this._autoPurgeChanged}
+            >
+          </ha-formfield>
+
+          <div class="row">
+            <div class="flex">
+              ${this.hass.localize("ui.panel.config.recorder.commit_interval")}
+            </div>
+
+            <paper-input
+              class="flex"
+              .label=${this.hass.localize(
+                "ui.panel.config.recorder.commit_interval"
+              )}
+              name="commit_interval"
+              type="number"
+              .value=${this.config?.commit_interval}
+              @value-changed=${this._handleChange}
+            >
+              <span slot="suffix">
+                ${this.hass.localize("ui.duration.second", "count")}
+              </span>
+            </paper-input>
+          </div>
+          <div class="row">
+            <div class="flex">
+              ${this.hass.localize("ui.panel.config.recorder.db_retry_wait")}
+            </div>
+
+            <paper-input
+              class="flex"
+              .label=${this.hass.localize(
+                "ui.panel.config.recorder.db_retry_wait"
+              )}
+              name="db_retry_wait"
+              type="number"
+              .value=${this.config?.db_retry_wait}
+              @value-changed=${this._handleChange}
+            >
+              <span slot="suffix">
+                ${this.hass.localize("ui.duration.second", "count")}
+              </span>
+            </paper-input>
+          </div>
+          <div class="row">
+            <div class="flex">
+              ${this.hass.localize("ui.panel.config.recorder.db_max_retries")}
+            </div>
+
+            <paper-input
+              class="flex"
+              .label=${this.hass.localize(
+                "ui.panel.config.recorder.db_max_retries"
+              )}
+              name="db_max_retries"
+              type="number"
+              .value=${this.config?.db_max_retries}
+              @value-changed=${this._handleChange}
+            >
+            </paper-input>
+          </div>
+
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._submit}>${this.hass.localize(
+      "ui.common.save"
+    )}</mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _autoPurgeChanged(ev: Event): void {
+    if (this.config) {
+      this.config.auto_purge = (ev.target as HaCheckbox).checked;
+    }
+  }
+
+  private _handleChange(ev: PolymerChangedEvent<string>) {
+    const target = ev.currentTarget as PaperInputElement;
+    if (this.config && target.name) {
+      this.config[target.name] = target.value;
+    }
+  }
+
+  private _submit(): void {
+    if (!this.hass || !this.config) {
+      return;
+    }
+    updateRecorderConfig(this.hass, {
+      auto_purge: this.config.auto_purge,
+      commit_interval: this.config.commit_interval,
+      db_retry_wait: this.config.db_retry_wait,
+      db_max_retries: this.config.db_max_retries,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        :host {
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+          display: block;
+        }
+        .card-actions {
+          text-align: right;
+        }
+        .row {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+        .flex {
+          flex: 1;
+        }
+        .row > * {
+          margin: 0 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "recorder-config-advanced": RecorderConfigAdvanced;
+  }
+}