import React from 'react'; import { ServerBackup } from '@/api/server/backups/getServerBackups'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArchive, faEllipsisH } from '@fortawesome/free-solid-svg-icons'; import { format, formatDistanceToNow } from 'date-fns'; import Spinner from '@/components/elements/Spinner'; import { bytesToHuman } from '@/helpers'; import Can from '@/components/elements/Can'; import useWebsocketEvent from '@/plugins/useWebsocketEvent'; import { ServerContext } from '@/state/server'; import BackupContextMenu from '@/components/server/backups/BackupContextMenu'; import tw from 'twin.macro'; import GreyRowBox from '@/components/elements/GreyRowBox'; interface Props { backup: ServerBackup; className?: string; } export default ({ backup, className }: Props) => { const appendBackup = ServerContext.useStoreActions(actions => actions.backups.appendBackup); useWebsocketEvent(`backup completed:${backup.uuid}`, data => { try { const parsed = JSON.parse(data); appendBackup({ ...backup, sha256Hash: parsed.sha256_hash || '', bytes: parsed.file_size || 0, completedAt: new Date(), }); } catch (e) { console.warn(e); } }); return (
{backup.completedAt ? : }

{backup.name} {backup.completedAt && {bytesToHuman(backup.bytes)} }

{backup.uuid}

{formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}

Created

{!backup.completedAt ?
: }
); };