Add backup sync status in detail page (#23312)

src/data/backup.ts

@@ -63,6 +63,7 @@ export interface BackupContent {
   protected: boolean;
   size: number;
   agent_ids?: string[];
+  failed_agent_ids?: string[];
   with_strategy_settings: boolean;
 }
 

src/panels/config/backup/ha-config-backup-dashboard.ts

@@ -492,6 +492,7 @@ class HaConfigBackupDashboard extends SubscribeMixin(LitElement) {
     this._backups = info.backups.map((backup) => ({
       ...backup,
       agent_ids: backup.agent_ids?.sort(compareAgents),
+      failed_agent_ids: backup.failed_agent_ids?.sort(compareAgents),
     }));
   }
 

src/panels/config/backup/ha-config-backup-details.ts

@@ -36,6 +36,22 @@ import { showConfirmationDialog } from "../../lovelace/custom-card-helpers";
 import "./components/ha-backup-data-picker";
 import { showRestoreBackupEncryptionKeyDialog } from "./dialogs/show-dialog-restore-backup-encryption-key";
 
+type Agent = {
+  id: string;
+  success: boolean;
+};
+
+const computeAgents = (agent_ids: string[], failed_agent_ids: string[]) =>
+  [
+    ...agent_ids.filter((id) => !failed_agent_ids.includes(id)),
+    ...failed_agent_ids,
+  ]
+    .map<Agent>((id) => ({
+      id,
+      success: !failed_agent_ids.includes(id),
+    }))
+    .sort((a, b) => compareAgents(a.id, b.id));
+
 @customElement("ha-config-backup-details")
 class HaConfigBackupDetails extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -46,6 +62,8 @@ class HaConfigBackupDetails extends LitElement {
 
   @state() private _backup?: BackupContentExtended | null;
 
+  @state() private _agents: Agent[] = [];
+
   @state() private _error?: string;
 
   @state() private _selectedBackup?: BackupContentExtended;
@@ -93,9 +111,11 @@ class HaConfigBackupDetails extends LitElement {
           ${this._error &&
           html`<ha-alert alert-type="error">${this._error}</ha-alert>`}
           ${this._backup === null
-            ? html`<ha-alert alert-type="warning" title="Not found">
+            ? html`
-                Backup matching ${this.backupId} not found
+                <ha-alert alert-type="warning" title="Not found">
-              </ha-alert>`
+                  Backup matching ${this.backupId} not found
+                </ha-alert>
+              `
             : !this._backup
               ? html`<ha-circular-progress active></ha-circular-progress>`
               : html`
@@ -142,7 +162,9 @@ class HaConfigBackupDetails extends LitElement {
                   <ha-card header="Locations">
                     <div class="card-content">
                       <ha-md-list>
-                        ${this._backup.agent_ids?.map((agentId) => {
+                        ${this._agents.map((agent) => {
+                          const agentId = agent.id;
+                          const success = agent.success;
                           const domain = computeDomain(agentId);
                           const name = computeBackupAgentName(
                             this.hass.localize,
@@ -176,25 +198,38 @@ class HaConfigBackupDetails extends LitElement {
                                     />
                                   `}
                               <div slot="headline">${name}</div>
-                              <ha-button-menu
+                              <div slot="supporting-text">
-                                slot="end"
+                                <span
-                                @action=${this._handleAgentAction}
+                                  class="dot ${success ? "success" : "error"}"
-                                .agent=${agentId}
+                                >
-                                fixed
+                                </span>
-                              >
+                                <span>
-                                <ha-icon-button
+                                  ${success ? "Backup synced" : "Backup failed"}
-                                  slot="trigger"
+                                </span>
-                                  .label=${this.hass.localize("ui.common.menu")}
+                              </div>
-                                  .path=${mdiDotsVertical}
+                              ${success
-                                ></ha-icon-button>
+                                ? html`<ha-button-menu
-                                <ha-list-item graphic="icon">
+                                    slot="end"
-                                  <ha-svg-icon
+                                    @action=${this._handleAgentAction}
-                                    slot="graphic"
+                                    .agent=${agentId}
-                                    .path=${mdiDownload}
+                                    fixed
-                                  ></ha-svg-icon>
+                                  >
-                                  Download from this location
+                                    <ha-icon-button
-                                </ha-list-item>
+                                      slot="trigger"
-                              </ha-button-menu>
+                                      .label=${this.hass.localize(
+                                        "ui.common.menu"
+                                      )}
+                                      .path=${mdiDotsVertical}
+                                    ></ha-icon-button>
+                                    <ha-list-item graphic="icon">
+                                      <ha-svg-icon
+                                        slot="graphic"
+                                        .path=${mdiDownload}
+                                      ></ha-svg-icon>
+                                      Download from this location
+                                    </ha-list-item>
+                                  </ha-button-menu>`
+                                : nothing}
                             </ha-md-list-item>
                           `;
                         })}
@@ -266,10 +301,11 @@ class HaConfigBackupDetails extends LitElement {
   private async _fetchBackup() {
     try {
       const response = await fetchBackupDetails(this.hass, this.backupId);
-      this._backup = {
+      this._backup = response.backup;
-        ...response.backup,
+      this._agents = computeAgents(
-        agent_ids: response.backup.agent_ids?.sort(compareAgents),
+        response.backup.agent_ids || [],
-      };
+        response.backup.failed_agent_ids || []
+      );
     } catch (err: any) {
       this._error = err?.message || "Could not fetch backup details";
     }
@@ -357,6 +393,28 @@ class HaConfigBackupDetails extends LitElement {
     ha-backup-data-picker {
       display: block;
     }
+    ha-md-list-item [slot="supporting-text"] {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+      line-height: normal;
+    }
+    .dot {
+      display: block;
+      position: relative;
+      width: 8px;
+      height: 8px;
+      background-color: var(--disabled-color);
+      border-radius: 50%;
+      flex: none;
+    }
+    .dot.success {
+      background-color: var(--success-color);
+    }
+    .dot.error {
+      background-color: var(--error-color);
+    }
   `;
 }