Added ability to retry on initialization errors. (#12103)

This commit is contained in:
Mark Lopez 2022-04-21 21:11:32 -05:00 committed by GitHub
parent ee7aa54ab4
commit 4f13db3178
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -5,15 +5,22 @@ import { property, state } from "lit/decorators";
class HaInitPage extends LitElement { class HaInitPage extends LitElement {
@property({ type: Boolean }) public error = false; @property({ type: Boolean }) public error = false;
@state() showProgressIndicator = false; @state() private _showProgressIndicator = false;
private _showProgressIndicatorTimeout; @state() private _retryInSeconds = 60;
private _showProgressIndicatorTimeout?: NodeJS.Timeout;
private _retryInterval?: NodeJS.Timeout;
protected render() { protected render() {
return this.error return this.error
? html` ? html`
<p>Unable to connect to Home Assistant.</p> <p>Unable to connect to Home Assistant.</p>
<mwc-button @click=${this._retry}>Retry</mwc-button> <p class="retry-text">
Retrying in ${this._retryInSeconds} seconds...
</p>
<mwc-button @click=${this._retry}>Retry now</mwc-button>
${location.host.includes("ui.nabu.casa") ${location.host.includes("ui.nabu.casa")
? html` ? html`
<p> <p>
@ -29,7 +36,7 @@ class HaInitPage extends LitElement {
` `
: html` : html`
<div id="progress-indicator-wrapper"> <div id="progress-indicator-wrapper">
${this.showProgressIndicator ${this._showProgressIndicator
? html`<ha-circular-progress active></ha-circular-progress>` ? html`<ha-circular-progress active></ha-circular-progress>`
: ""} : ""}
</div> </div>
@ -39,14 +46,26 @@ class HaInitPage extends LitElement {
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
clearTimeout(this._showProgressIndicatorTimeout); if (this._showProgressIndicatorTimeout) {
clearTimeout(this._showProgressIndicatorTimeout);
}
if (this._retryInterval) {
clearInterval(this._retryInterval);
}
} }
protected firstUpdated() { protected firstUpdated() {
this._showProgressIndicatorTimeout = setTimeout(async () => { this._showProgressIndicatorTimeout = setTimeout(async () => {
await import("../components/ha-circular-progress"); await import("../components/ha-circular-progress");
this.showProgressIndicator = true; this._showProgressIndicator = true;
}, 5000); }, 5000);
this._retryInterval = setInterval(() => {
const remainingSeconds = this._retryInSeconds--;
if (remainingSeconds <= 0) {
this._retry();
}
}, 1000);
} }
private _retry() { private _retry() {
@ -70,6 +89,9 @@ class HaInitPage extends LitElement {
a { a {
color: var(--primary-color); color: var(--primary-color);
} }
.retry-text {
margin-top: 0;
}
p, p,
#loading-text { #loading-text {
max-width: 350px; max-width: 350px;