From 728c391b5dd57c687ffa9f9bd435d74b1fb7d031 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 18 Feb 2022 16:06:19 -0800
Subject: [PATCH] Show why relayer is reconnecting (#11732)

---
 src/data/cloud.ts                                |  1 +
 src/panels/config/cloud/account/cloud-account.ts | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/data/cloud.ts b/src/data/cloud.ts
index 8f4f14b72b..e8add4f4ef 100644
--- a/src/data/cloud.ts
+++ b/src/data/cloud.ts
@@ -47,6 +47,7 @@ export interface CloudPreferences {
 export interface CloudStatusLoggedIn {
   logged_in: true;
   cloud: "disconnected" | "connecting" | "connected";
+  cloud_last_disconnect_reason: { clean: boolean; reason: string } | null;
   email: string;
   google_registered: boolean;
   google_entities: EntityFilter;
diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts
index 15e5d3c002..5d4d798be9 100644
--- a/src/panels/config/cloud/account/cloud-account.ts
+++ b/src/panels/config/cloud/account/cloud-account.ts
@@ -10,6 +10,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-icon-button";
 import { debounce } from "../../../../common/util/debounce";
@@ -106,6 +107,17 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
                 </paper-item-body>
               </div>
 
+              ${this.cloudStatus.cloud === "connecting" &&
+              this.cloudStatus.cloud_last_disconnect_reason
+                ? html`
+                    <ha-alert
+                      alert-type="warning"
+                      .title=${this.cloudStatus.cloud_last_disconnect_reason
+                        .reason}
+                    ></ha-alert>
+                  `
+                : ""}
+
               <div class="account-row">
                 <paper-item-body>
                   ${this.hass.localize(