From 9e4e64e90176390abd2fac2ce256fd09a5575558 Mon Sep 17 00:00:00 2001
From: Kazi <kazinoshin.jo@gmail.com>
Date: Sun, 2 Jun 2024 18:00:37 +0600
Subject: [PATCH] Add row backup options

---
 .../www2/src/components/StatusRowMenu.tsx     | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/urbackupserver/www2/src/components/StatusRowMenu.tsx b/urbackupserver/www2/src/components/StatusRowMenu.tsx
index 22d21e06..eb552e66 100644
--- a/urbackupserver/www2/src/components/StatusRowMenu.tsx
+++ b/urbackupserver/www2/src/components/StatusRowMenu.tsx
@@ -6,10 +6,12 @@ import {
   MenuPopover,
   MenuTrigger,
 } from "@fluentui/react-components";
+import { MouseEvent } from "react";
 import { MoreHorizontal24Filled } from "@fluentui/react-icons";
-import { StatusClientItem } from "../api/urbackupserver";
 import { useMutation, useQueryClient } from "react-query";
+
 import { urbackupServer } from "../App";
+import { BackupType, StatusClientItem } from "../api/urbackupserver";
 
 export function StatusRowMenu({ id }: { id: StatusClientItem["id"] }) {
   const queryClient = useQueryClient();
@@ -20,10 +22,28 @@ export function StatusRowMenu({ id }: { id: StatusClientItem["id"] }) {
     },
   });
 
+  const startBackupMutation = useMutation(
+    ({
+      id,
+      type,
+    }: {
+      id: Parameters<typeof urbackupServer.startBackup>["0"];
+      type: Parameters<typeof urbackupServer.startBackup>["1"];
+    }) => urbackupServer.startBackup(id, type),
+  );
+
   const removeClient = () => {
     removeClientMutation.mutate(id);
   };
 
+  const startBackup = (e: MouseEvent<HTMLDivElement>) => {
+    const type = e.currentTarget.dataset.type;
+
+    if (type) {
+      startBackupMutation.mutate({ id: [id], type: +type });
+    }
+  };
+
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
@@ -37,6 +57,18 @@ export function StatusRowMenu({ id }: { id: StatusClientItem["id"] }) {
 
       <MenuPopover onClick={(e) => e.stopPropagation()}>
         <MenuList>
+          <MenuItem data-type={BackupType.INCR_FILE} onClick={startBackup}>
+            Incremental file backup
+          </MenuItem>
+          <MenuItem data-type={BackupType.FULL_FILE} onClick={startBackup}>
+            Full file backup
+          </MenuItem>
+          <MenuItem data-type={BackupType.INCR_IMAGE} onClick={startBackup}>
+            Incremental image backup
+          </MenuItem>
+          <MenuItem data-type={BackupType.FULL_IMAGE} onClick={startBackup}>
+            Full image backup
+          </MenuItem>
           <MenuItem onClick={removeClient}>Remove client</MenuItem>
         </MenuList>
       </MenuPopover>