From e2de660bec3442bba32f1d10c2b877a2324045f3 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 27 Feb 2020 14:01:37 +0100 Subject: [PATCH] Only cache default lovelace and handle config updates (#5000) * Only cache default lovelace and handle config updates * Update partial-panel-resolver.ts --- src/layouts/partial-panel-resolver.ts | 5 +- src/managers/notification-manager.ts | 4 ++ src/panels/lovelace/ha-panel-lovelace.ts | 72 ++++++++++++++---------- src/translations/en.json | 2 +- 4 files changed, 50 insertions(+), 33 deletions(-) diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts index 0cf5da6402..5f8bbc6296 100644 --- a/src/layouts/partial-panel-resolver.ts +++ b/src/layouts/partial-panel-resolver.ts @@ -9,7 +9,7 @@ import { } from "./hass-router-page"; import { removeInitSkeleton } from "../util/init-skeleton"; -const CACHE_COMPONENTS = ["lovelace", "states", "developer-tools"]; +const CACHE_URL_PATHS = ["lovelace", "states", "developer-tools"]; const COMPONENTS = { calendar: () => import( @@ -69,11 +69,10 @@ const COMPONENTS = { const getRoutes = (panels: Panels): RouterOptions => { const routes: RouterOptions["routes"] = {}; - Object.values(panels).forEach((panel) => { const data: RouteOptions = { tag: `ha-panel-${panel.component_name}`, - cache: CACHE_COMPONENTS.includes(panel.component_name), + cache: CACHE_URL_PATHS.includes(panel.url_path), }; if (panel.component_name in COMPONENTS) { data.load = COMPONENTS[panel.component_name]; diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts index d9f2a84012..5795bfe0c0 100644 --- a/src/managers/notification-manager.ts +++ b/src/managers/notification-manager.ts @@ -82,6 +82,10 @@ class NotificationManager extends LitElement { static get styles(): CSSResult { return css` + :host { + display: flex; + align-items: center; + } mwc-button { color: var(--primary-color); font-weight: bold; diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index 4243638f6a..3a44999272 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -58,13 +58,42 @@ class LovelacePanel extends LitElement { private _ignoreNextUpdateEvent = false; private _fetchConfigOnConnect = false; + private _unsubUpdates?; constructor() { super(); this._closeEditor = this._closeEditor.bind(this); } - public render(): TemplateResult | void { + public connectedCallback(): void { + super.connectedCallback(); + if ( + this.lovelace && + this.hass && + this.lovelace.language !== this.hass.language + ) { + // language has been changed, rebuild UI + this._setLovelaceConfig(this.lovelace.config, this.lovelace.mode); + } else if (this.lovelace && this.lovelace.mode === "generated") { + // When lovelace is generated, we re-generate each time a user goes + // to the states panel to make sure new entities are shown. + this._state = "loading"; + this._regenerateConfig(); + } else if (this._fetchConfigOnConnect) { + // Config was changed when we were not at the lovelace panel + this._fetchConfig(false); + } + } + + public disconnectedCallback(): void { + super.disconnectedCallback(); + // On the main dashboard we want to stay subscribed as that one is cached. + if (this.urlPath !== null && this._unsubUpdates) { + this._unsubUpdates(); + } + } + + protected render(): TemplateResult | void { const state = this._state!; if (state === "loaded") { @@ -112,7 +141,7 @@ class LovelacePanel extends LitElement { `; } - public updated(changedProps: PropertyValues): void { + protected updated(changedProps: PropertyValues): void { super.updated(changedProps); if (changedProps.has("narrow")) { @@ -131,13 +160,10 @@ class LovelacePanel extends LitElement { } } - public firstUpdated() { + protected firstUpdated() { this._fetchConfig(false); - if (this.urlPath === null) { - // we don't want to unsub as we want to stay informed of updates - subscribeLovelaceUpdates(this.hass!.connection, this.urlPath, () => - this._lovelaceChanged() - ); + if (!this._unsubUpdates) { + this._subscribeUpdates(); } // reload lovelace on reconnect so we are sure we have the latest config window.addEventListener("connection-status", (ev) => { @@ -154,32 +180,20 @@ class LovelacePanel extends LitElement { this._updateColumns(); } - public connectedCallback(): void { - super.connectedCallback(); - if ( - this.lovelace && - this.hass && - this.lovelace.language !== this.hass.language - ) { - // language has been changed, rebuild UI - this._setLovelaceConfig(this.lovelace.config, this.lovelace.mode); - } else if (this.lovelace && this.lovelace.mode === "generated") { - // When lovelace is generated, we re-generate each time a user goes - // to the states panel to make sure new entities are shown. - this._state = "loading"; - this._regenerateConfig(); - } else if (this._fetchConfigOnConnect) { - // Config was changed when we were not at the lovelace panel - this._fetchConfig(false); - } - } - private async _regenerateConfig() { const conf = await generateLovelaceConfigFromHass(this.hass!); this._setLovelaceConfig(conf, "generated"); this._state = "loaded"; } + private async _subscribeUpdates() { + this._unsubUpdates = await subscribeLovelaceUpdates( + this.hass!.connection, + this.urlPath, + () => this._lovelaceChanged() + ); + } + private _closeEditor() { this._state = "loaded"; } @@ -203,7 +217,7 @@ class LovelacePanel extends LitElement { return; } if (!this.isConnected) { - // We can't fire events from an element that is connected + // We can't fire events from an element that is not connected // Make sure we fetch the config as soon as the user goes back to Lovelace this._fetchConfigOnConnect = true; return; diff --git a/src/translations/en.json b/src/translations/en.json index 415f37399e..870d45e079 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2005,7 +2005,7 @@ "entity_non_numeric": "Entity is non-numeric: {entity}" }, "changed_toast": { - "message": "The Lovelace UI configuration was updated, refresh to see changes?", + "message": "The Lovelace UI configuration for this dashboard was updated, refresh to see changes?", "refresh": "Refresh" }, "reload_lovelace": "Reload UI"