Add backup details page (#22884)

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

@@ -1,4 +1,4 @@
-import { mdiDelete, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDownload, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -22,6 +22,7 @@ import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-svg-icon";
 import {
   fetchBackupInfo,
+  getBackupDownloadUrl,
   removeBackup,
   type BackupContent,
 } from "../../../data/backup";
@@ -38,6 +39,8 @@ import type { HomeAssistant, Route } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import "./components/ha-backup-summary-card";
 import { showGenerateBackupDialog } from "./dialogs/show-dialog-generate-backup";
+import { getSignedPath } from "../../../data/auth";
+import { fileDownload } from "../../../util/file_download";
 
 @customElement("ha-config-backup-dashboard")
 class HaConfigBackupDashboard extends SubscribeMixin(LitElement) {
@@ -115,6 +118,11 @@ class HaConfigBackupDashboard extends SubscribeMixin(LitElement) {
             .hass=${this.hass}
             narrow
             .items=${[
+              {
+                label: this.hass.localize("ui.common.download"),
+                path: mdiDownload,
+                action: () => this._downloadBackup(backup),
+              },
               {
                 label: this.hass.localize("ui.common.delete"),
                 path: mdiDelete,
@@ -266,6 +274,14 @@ class HaConfigBackupDashboard extends SubscribeMixin(LitElement) {
     navigate(`/config/backup/details/${id}`);
   }
 
+  private async _downloadBackup(backup: BackupContent): Promise<void> {
+    const signedUrl = await getSignedPath(
+      this.hass,
+      getBackupDownloadUrl(backup.backup_id)
+    );
+    fileDownload(signedUrl.path);
+  }
+
   private async _deleteBackup(backup: BackupContent): Promise<void> {
     const confirm = await showConfirmationDialog(this, {
       title: "Delete backup",

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

@@ -1,17 +1,30 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { mdiDelete, mdiDotsVertical, mdiDownload } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../layouts/hass-subpage";
-
+import type { ActionDetail } from "@material/mwc-list";
+import { formatDateTime } from "../../../common/datetime/format_date_time";
+import { navigate } from "../../../common/navigate";
 import "../../../components/ha-alert";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
-import "../../../components/ha-relative-time";
-import "../../../components/ha-settings-row";
-
+import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
+import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
+import { getSignedPath } from "../../../data/auth";
 import type { BackupContent } from "../../../data/backup";
-import { fetchBackupDetails } from "../../../data/backup";
+import {
+  fetchBackupDetails,
+  getBackupDownloadUrl,
+  removeBackup,
+} from "../../../data/backup";
+import { domainToName } from "../../../data/integration";
+import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+import { fileDownload } from "../../../util/file_download";
+import { showConfirmationDialog } from "../../lovelace/custom-card-helpers";
 
 @customElement("ha-config-backup-details")
 class HaConfigBackupDetails extends LitElement {
@@ -35,10 +48,11 @@ class HaConfigBackupDetails extends LitElement {
     }
   }
 
-  protected render(): TemplateResult {
+  protected render() {
     if (!this.hass) {
-      return html`:(`;
+      return nothing;
     }
+
     return html`
       <hass-subpage
         back-path="/config/backup"
@@ -46,6 +60,21 @@ class HaConfigBackupDetails extends LitElement {
         .narrow=${this.narrow}
         .header=${this._backup?.name || "Backup"}
       >
+        <ha-button-menu slot="toolbar-icon" @action=${this._handleAction}>
+          <ha-icon-button
+            slot="trigger"
+            .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>
+            ${this.hass.localize("ui.common.download")}
+          </ha-list-item>
+          <ha-list-item graphic="icon" class="warning">
+            <ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
+            ${this.hass.localize("ui.common.delete")}
+          </ha-list-item>
+        </ha-button-menu>
         <div class="content">
           ${this._error &&
           html`<ha-alert alert-type="error">${this._error}</ha-alert>`}
@@ -58,27 +87,53 @@ class HaConfigBackupDetails extends LitElement {
               : html`
                   <ha-card header="Backup">
                     <div class="card-content">
-                      <ha-settings-row>
-                        <span slot="heading">Partial</span>
-                        <span slot="description">Type</span>
-                      </ha-settings-row>
+                      <ha-md-list>
+                        <ha-md-list-item>
+                          <span slot="headline">
+                            ${Math.ceil(this._backup.size * 10) / 10 + " MB"}
+                          </span>
+                          <span slot="supporting-text">Size</span>
+                        </ha-md-list-item>
+                        <ha-md-list-item>
+                          ${formatDateTime(
+                            new Date(this._backup.date),
+                            this.hass.locale,
+                            this.hass.config
+                          )}
+                          <span slot="supporting-text">Created</span>
+                        </ha-md-list-item>
+                      </ha-md-list>
+                    </div>
+                  </ha-card>
+                  <ha-card header="Locations">
+                    <div class="card-content">
+                      <ha-md-list>
+                        ${this._backup.agent_ids?.map((agent) => {
+                          const [domain, name] = agent.split(".");
+                          const domainName = domainToName(
+                            this.hass.localize,
+                            domain
+                          );
 
-                      <ha-settings-row>
-                        <span slot="heading">
-                          ${Math.ceil(this._backup.size * 10) / 10 + " MB"}
-                        </span>
-                        <span slot="description">Size</span>
-                      </ha-settings-row>
-                      <ha-settings-row>
-                        <ha-relative-time
-                          .hass=${this.hass}
-                          .datetime=${this._backup.date}
-                          slot="heading"
-                          capitalize
-                        >
-                        </ha-relative-time>
-                        <span slot="description">Created</span>
-                      </ha-settings-row>
+                          return html`
+                            <ha-md-list-item>
+                              <img
+                                .src=${brandsUrl({
+                                  domain,
+                                  type: "icon",
+                                  useFallback: true,
+                                  darkOptimized: this.hass.themes?.darkMode,
+                                })}
+                                crossorigin="anonymous"
+                                referrerpolicy="no-referrer"
+                                alt=""
+                                slot="start"
+                              />
+                              <div slot="headline">${domainName}: ${name}</div>
+                            </ha-md-list-item>
+                          `;
+                        })}
+                      </ha-md-list>
                     </div>
                   </ha-card>
                 `}
@@ -96,6 +151,41 @@ class HaConfigBackupDetails extends LitElement {
     }
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._downloadBackup();
+        break;
+      case 1:
+        this._deleteBackup();
+        break;
+    }
+  }
+
+  private async _downloadBackup(): Promise<void> {
+    const signedUrl = await getSignedPath(
+      this.hass,
+      getBackupDownloadUrl(this._backup!.backup_id)
+    );
+    fileDownload(signedUrl.path);
+  }
+
+  private async _deleteBackup(): Promise<void> {
+    const confirm = await showConfirmationDialog(this, {
+      title: "Delete backup",
+      text: "This backup will be permanently deleted.",
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+    });
+
+    if (!confirm) {
+      return;
+    }
+
+    await removeBackup(this.hass, this._backup!.backup_id);
+    navigate("/config/backup");
+  }
+
   static styles = css`
     .content {
       padding: 28px 20px 0;
@@ -104,6 +194,26 @@ class HaConfigBackupDetails extends LitElement {
       gap: 24px;
       display: grid;
     }
+    .card-content {
+      padding: 0 20px 8px 20px;
+    }
+    ha-md-list {
+      background: none;
+      padding: 0;
+    }
+    ha-md-list-item {
+      --md-list-item-leading-space: 0;
+      --md-list-item-trailing-space: 0;
+    }
+    ha-md-list-item img {
+      width: 48px;
+    }
+    .warning {
+      color: var(--error-color);
+    }
+    .warning ha-svg-icon {
+      color: var(--error-color);
+    }
   `;
 }
 

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

@@ -119,10 +119,10 @@ class HaConfigBackupLocations extends LitElement {
       margin: 0;
     }
 
-    .agents ha-md-list {
+    ha-md-list {
       background: none;
     }
-    .agents ha-md-list-item img {
+    ha-md-list-item img {
       width: 48px;
     }
     .card-content {