add restore function to backups

web/images/actions/backups/restore.svg

@@ -0,0 +1 @@
+<svg id="symb" aria-label="config" viewBox="4 2 17 19" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M10 8H5V3m.291 13.357a8 8 0 10.188-8.991" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

web/scripts/backups.js

@@ -47,6 +47,17 @@ class BackupCard extends HTMLElement {
 				}
 			};
 		}
+
+		const restoreButton = this.shadowRoot.querySelector("#restore-btn");
+		if (restoreButton.classList.contains("clickable")) {
+			restoreButton.onclick = this.handleRestoreButton.bind(this);
+			restoreButton.onkeydown = (event) => {
+				if (event.key === "Enter") {
+					event.preventDefault();
+					this.handleRestoreButton();
+				}
+			};
+		}
 	}
 
 	get volid () {
@@ -85,6 +96,22 @@ class BackupCard extends HTMLElement {
 			}
 		});
 	}
+
+	async handleRestoreButton () {
+		const template = this.shadowRoot.querySelector("#restore-dialog");
+		dialog(template, async (result, form) => {
+			if (result === "confirm") {
+				const body = {
+					volid: this.volid
+				};
+				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/restore`, "POST", body);
+				if (result.status !== 200) {
+					alert(`Attempted to delete backup but got: ${result.error}`);
+				}
+				refreshBackups();
+			}
+		});
+	}
 }
 
 customElements.define("backup-card", BackupCard);

web/templates/backups.go.tmpl

@@ -83,7 +83,8 @@
 					<p>
 					Are you sure you want to <strong>restore</strong> from the backup made at {{.TimeFormatted}}?
 					<br>
-					WARNING: Restoring from a backup will WIPE disks NOT contained in the backup!!!
+					<br>
+					<strong>WARNING: Restoring from a backup will WIPE disks NOT contained in the backup!!!</strong>
 					</p>
 					</form>
 				</div>