diff --git a/urbackupserver/www2/src/components/StatusRowMenu.tsx b/urbackupserver/www2/src/components/StatusRowMenu.tsx new file mode 100644 index 00000000..22d21e06 --- /dev/null +++ b/urbackupserver/www2/src/components/StatusRowMenu.tsx @@ -0,0 +1,45 @@ +import { + Menu, + MenuButton, + MenuItem, + MenuList, + MenuPopover, + MenuTrigger, +} from "@fluentui/react-components"; +import { MoreHorizontal24Filled } from "@fluentui/react-icons"; +import { StatusClientItem } from "../api/urbackupserver"; +import { useMutation, useQueryClient } from "react-query"; +import { urbackupServer } from "../App"; + +export function StatusRowMenu({ id }: { id: StatusClientItem["id"] }) { + const queryClient = useQueryClient(); + + const removeClientMutation = useMutation(urbackupServer.removeClient, { + onSuccess: () => { + queryClient.invalidateQueries("status"); + }, + }); + + const removeClient = () => { + removeClientMutation.mutate(id); + }; + + return ( + + + } + onClick={(e) => e.stopPropagation()} + /> + + + e.stopPropagation()}> + + Remove client + + + + ); +} diff --git a/urbackupserver/www2/src/pages/Status.tsx b/urbackupserver/www2/src/pages/Status.tsx index 796c2a6a..241cd412 100644 --- a/urbackupserver/www2/src/pages/Status.tsx +++ b/urbackupserver/www2/src/pages/Status.tsx @@ -21,19 +21,20 @@ import { urbackupServer } from "../App"; import { chunk } from "../utils/chunk"; import { registerIcons } from "@fluentui/react-experiments/lib/Styling"; import { - ArrowNext20Regular, - ArrowPrevious20Regular, - ChevronLeft20Regular, - ChevronRight20Regular, + ArrowNext20Filled, + ArrowPrevious20Filled, + ChevronLeft20Filled, + ChevronRight20Filled, } from "@fluentui/react-icons"; +import { StatusRowMenu } from "../components/StatusRowMenu"; // Register icons used in Pagination @fluentui/react-experiments. See https://github.com/microsoft/fluentui/wiki/Using-icons#registering-custom-icons. registerIcons({ icons: { - CaretSolidLeft: , - CaretSolidRight: , - Next: , - Previous: , + CaretSolidLeft: , + CaretSolidRight: , + Next: , + Previous: , }, }); @@ -98,6 +99,13 @@ const columns: TableColumnDefinition[] = [ ); }, }), + createTableColumn({ + columnId: "action", + renderHeaderCell: () => { + return "Actions"; + }, + renderCell: ({ id }) => , + }), ]; const useStyles = makeStyles({ @@ -131,7 +139,7 @@ const Status = () => { const classes = useStyles(); - const dataItems = statusResult.data!.status; + const dataItems = statusResult.data!.status.filter((d) => !d.delete_pending); const pageData = chunk(dataItems, pageSize); return (