Add progress and status for backup dashboard

src/components/ha-file-upload.ts

@@ -56,6 +56,21 @@ export class HaFileUpload extends LitElement {
     }
   }
 
+  private get _name() {
+    if (this.value === undefined) {
+      return "";
+    }
+    if (typeof this.value === "string") {
+      return this.value;
+    }
+    const files =
+      this.value instanceof FileList
+        ? Array.from(this.value)
+        : ensureArray(this.value);
+
+    return files.map((file) => file.name).join(", ");
+  }
+
   public render(): TemplateResult {
     return html`
       ${this.uploading
@@ -65,7 +80,7 @@ export class HaFileUpload extends LitElement {
                 >${this.value
                   ? this.hass?.localize(
                       "ui.components.file-upload.uploading_name",
-                      { name: this.value.toString() }
+                      { name: this._name }
                     )
                   : this.hass?.localize(
                       "ui.components.file-upload.uploading"

src/data/backup.ts

@@ -203,23 +203,6 @@ export const uploadBackup = async (
   }
 };
 
-type BackupEvent = BackupProgressEvent;
-
-type BackupProgressEvent = {
-  event_type: "backup_progress";
-  done: boolean;
-  stage: string;
-  success?: boolean;
-};
-
-export const subscribeBackupEvents = (
-  hass: HomeAssistant,
-  callback: (event: BackupEvent) => void
-) =>
-  hass.connection.subscribeMessage<BackupEvent>(callback, {
-    type: "backup/subscribe_events",
-  });
-
 export const getPreferredAgentForDownload = (agents: string[]) => {
   const localAgents = agents.filter(
     (agent) => agent.split(".")[0] === "backup"

src/data/backup_manager.ts

@@ -0,0 +1,77 @@
+import type { HomeAssistant } from "../types";
+
+export type BackupManagerState =
+  | "idle"
+  | "create_backup"
+  | "receive_backup"
+  | "restore_backup";
+
+export type CreateBackupStage =
+  | "addon_repositories"
+  | "addons"
+  | "await_addon_restarts"
+  | "docker_config"
+  | "finishing_file"
+  | "folders"
+  | "home_assistant"
+  | "upload_to_agents";
+
+export type CreateBackupState = "completed" | "failed" | "in_progress";
+
+export type ReceiveBackupStage = "receive_file" | "upload_to_agents";
+
+export type ReceiveBackupState = "completed" | "failed" | "in_progress";
+
+export type RestoreBackupStage =
+  | "addon_repositories"
+  | "addons"
+  | "await_addon_restarts"
+  | "await_home_assistant_restart"
+  | "check_home_assistant"
+  | "docker_config"
+  | "download_from_agent"
+  | "folders"
+  | "home_assistant"
+  | "remove_delta_addons";
+
+export type RestoreBackupState = "completed" | "failed" | "in_progress";
+
+type IdleEvent = {
+  manager_state: "idle";
+};
+
+type CreateBackupEvent = {
+  manager_state: "create_backup";
+  stage: CreateBackupStage | null;
+  state: CreateBackupState;
+};
+
+type ReceiveBackupEvent = {
+  manager_state: "receive_backup";
+  stage: ReceiveBackupStage | null;
+  state: ReceiveBackupState;
+};
+
+type RestoreBackupEvent = {
+  manager_state: "restore_backup";
+  stage: RestoreBackupStage | null;
+  state: RestoreBackupState;
+};
+
+export type ManagerStateEvent =
+  | IdleEvent
+  | CreateBackupEvent
+  | ReceiveBackupEvent
+  | RestoreBackupEvent;
+
+export const subscribeBackupEvents = (
+  hass: HomeAssistant,
+  callback: (event: ManagerStateEvent) => void
+) =>
+  hass.connection.subscribeMessage<ManagerStateEvent>(callback, {
+    type: "backup/subscribe_events",
+  });
+
+export const DEFAULT_MANAGER_STATE: ManagerStateEvent = {
+  manager_state: "idle",
+};

src/panels/config/backup/components/ha-backup-summary-card.ts

@@ -25,7 +25,7 @@ const ICONS: Record<SummaryStatus, string> = {
 @customElement("ha-backup-summary-card")
 class HaBackupSummaryCard extends LitElement {
   @property()
-  public title!: string;
+  public heading!: string;
 
   @property()
   public description!: string;
@@ -49,7 +49,7 @@ class HaBackupSummaryCard extends LitElement {
               `}
 
           <div class="content">
-            <p class="title">${this.title}</p>
+            <p class="heading">${this.heading}</p>
             <p class="description">${this.description}</p>
           </div>
           ${this.hasAction
@@ -116,7 +116,7 @@ class HaBackupSummaryCard extends LitElement {
       flex: 1;
       min-width: 0;
     }
-    .title {
+    .heading {
       font-size: 22px;
       font-style: normal;
       font-weight: 400;

src/panels/config/backup/components/ha-backup-summary-progress.ts

@@ -0,0 +1,108 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { ManagerStateEvent } from "../../../../data/backup_manager";
+import type { HomeAssistant } from "../../../../types";
+import "./ha-backup-summary-card";
+
+@customElement("ha-backup-summary-progress")
+export class HaBackupSummaryProgress extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public manager!: ManagerStateEvent;
+
+  @property({ type: Boolean, attribute: "has-action" })
+  public hasAction = false;
+
+  private get _heading() {
+    switch (this.manager.manager_state) {
+      case "create_backup":
+        return "Creating backup";
+      case "restore_backup":
+        return "Restoring backup";
+      case "receive_backup":
+        return "Receiving backup";
+      default:
+        return "";
+    }
+  }
+
+  private get _description() {
+    switch (this.manager.manager_state) {
+      case "create_backup":
+        switch (this.manager.stage) {
+          case "addon_repositories":
+          case "addons":
+            return "Backing up add-ons";
+          case "await_addon_restarts":
+            return "Waiting for add-ons to restart";
+          case "docker_config":
+            return "Backing up Docker configuration";
+          case "finishing_file":
+            return "Finishing backup file";
+          case "folders":
+            return "Backing up folders";
+          case "home_assistant":
+            return "Backing up Home Assistant";
+          case "upload_to_agents":
+            return "Uploading to locations";
+          default:
+            return "";
+        }
+      case "restore_backup":
+        switch (this.manager.stage) {
+          case "addon_repositories":
+          case "addons":
+            return "Restoring add-ons";
+          case "await_addon_restarts":
+            return "Waiting for add-ons to restart";
+          case "await_home_assistant_restart":
+            return "Waiting for Home Assistant to restart";
+          case "check_home_assistant":
+            return "Checking Home Assistant";
+          case "docker_config":
+            return "Restoring Docker configuration";
+          case "download_from_agent":
+            return "Downloading from location";
+          case "folders":
+            return "Restoring folders";
+          case "home_assistant":
+            return "Restoring Home Assistant";
+          case "remove_delta_addons":
+            return "Removing delta add-ons";
+          default:
+            return "";
+        }
+      case "receive_backup":
+        switch (this.manager.stage) {
+          case "receive_file":
+            return "Receiving file";
+          case "upload_to_agents":
+            return "Uploading to locations";
+          default:
+            return "";
+        }
+      default:
+        return "";
+    }
+  }
+
+  protected render() {
+    return html`
+      <ha-backup-summary-card
+        .hass=${this.hass}
+        .heading=${this._heading}
+        .description=${this._description}
+        status="loading"
+        .hasAction=${this.hasAction}
+      >
+        <slot name="action" slot="action"></slot>
+      </ha-backup-summary-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-backup-summary-progress": HaBackupSummaryProgress;
+  }
+}

src/panels/config/backup/components/ha-backup-summary-status.ts

@@ -0,0 +1,84 @@
+import { differenceInDays } from "date-fns";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { formatShortDateTime } from "../../../../common/datetime/format_date_time";
+import type { BackupContent } from "../../../../data/backup";
+import type { ManagerStateEvent } from "../../../../data/backup_manager";
+import type { HomeAssistant } from "../../../../types";
+import "./ha-backup-summary-card";
+
+@customElement("ha-backup-summary-status")
+export class HaBackupSummaryProgress extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public manager!: ManagerStateEvent;
+
+  @property({ attribute: false }) public backups!: BackupContent[];
+
+  @property({ type: Boolean, attribute: "has-action" })
+  public hasAction = false;
+
+  private _lastBackup = memoizeOne((backups: BackupContent[]) => {
+    const sortedBackups = backups
+      // eslint-disable-next-line arrow-body-style
+      .filter((backup) => {
+        // TODO : only show backups with default flag
+        return backup;
+      })
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+    return sortedBackups[0] as BackupContent | undefined;
+  });
+
+  protected render() {
+    const lastBackup = this._lastBackup(this.backups);
+
+    if (!lastBackup) {
+      return html`
+        <ha-backup-summary-card
+          heading="No backup available"
+          description="You have not created any backups yet."
+          .hasAction=${this.hasAction}
+          status="warning"
+        >
+          <slot name="action" slot="action"></slot>
+        </ha-backup-summary-card>
+      `;
+    }
+
+    const lastBackupDate = new Date(lastBackup.date);
+    const numberOfDays = differenceInDays(new Date(), lastBackupDate);
+
+    // TODO : Improve time format
+    const description = `Last successful backup ${formatShortDateTime(lastBackupDate, this.hass.locale, this.hass.config)} and synced to ${lastBackup.agent_ids?.length} locations`;
+    if (numberOfDays > 8) {
+      return html`
+        <ha-backup-summary-card
+          heading=${`No backup for ${numberOfDays} days`}
+          description=${description}
+          .hasAction=${this.hasAction}
+          status="warning"
+        >
+          <slot name="action" slot="action"></slot>
+        </ha-backup-summary-card>
+      `;
+    }
+    return html`
+      <ha-backup-summary-card
+        heading=${`Backed up`}
+        description=${description}
+        .hasAction=${this.hasAction}
+        status="success"
+      >
+        <slot name="action" slot="action"></slot>
+      </ha-backup-summary-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-backup-summary-status": HaBackupSummaryProgress;
+  }
+}