From ad9194a65cb82a7a624930b379ba119d616f952e Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Apr 2020 13:24:03 -0700
Subject: [PATCH] Build out frontend for viewing server backups

---
 .../server/backups/BackupContainer.tsx        | 13 +++--
 .../components/server/backups/BackupRow.tsx   | 47 +++++++++++++++++++
 2 files changed, 53 insertions(+), 7 deletions(-)
 create mode 100644 resources/scripts/components/server/backups/BackupRow.tsx

diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
index 3cc0f1757..dee9342c9 100644
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -7,6 +7,7 @@ import { httpErrorToHuman } from '@/api/http';
 import Can from '@/components/elements/Can';
 import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import BackupRow from '@/components/server/backups/BackupRow';
 
 export default () => {
     const { uuid } = useServer();
@@ -40,13 +41,11 @@ export default () => {
                 </p>
                 :
                 <div>
-                    {
-                        backups.map(backup => (
-                            <div key={backup.uuid}>
-                                {backup.uuid}
-                            </div>
-                        ))
-                    }
+                    {backups.map((backup, index) => <BackupRow
+                        key={backup.uuid}
+                        backup={backup}
+                        className={index !== (backups.length - 1) ? 'mb-2' : undefined}
+                    />)}
                 </div>
             }
             <Can action={'backup.create'}>
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
new file mode 100644
index 000000000..ec98cc885
--- /dev/null
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { ServerBackup } from '@/api/server/backups/getServerBackups';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArchive } from '@fortawesome/free-solid-svg-icons/faArchive';
+import format from 'date-fns/format';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
+import Spinner from '@/components/elements/Spinner';
+import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons/faCloudDownloadAlt';
+
+interface Props {
+    backup: ServerBackup;
+    className?: string;
+}
+
+export default ({ backup, className }: Props) => {
+    return (
+        <div className={`grey-row-box flex items-center ${className}`}>
+            <div className={'mr-4'}>
+                <FontAwesomeIcon icon={faArchive} className={'text-neutral-300'}/>
+            </div>
+            <div className={'flex-1'}>
+                <p className={'text-sm mb-1'}>{backup.name}</p>
+                <p className={'text-xs text-neutral-400 font-mono'}>{backup.uuid}</p>
+            </div>
+            <div className={'ml-4 text-center'}>
+                <p
+                    title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
+                    className={'text-sm'}
+                >
+                    {distanceInWordsToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
+                </p>
+                <p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
+            </div>
+            <div className={'ml-6'} style={{ marginRight: '-0.5rem' }}>
+                {!backup.completedAt ?
+                    <div title={'Backup is in progress'} className={'p-2'}>
+                        <Spinner size={'tiny'}/>
+                    </div>
+                    :
+                    <a href={'#'} className={'text-sm text-neutral-300 p-2 transition-colors duration-250 hover:text-cyan-400'}>
+                        <FontAwesomeIcon icon={faCloudDownloadAlt}/>
+                    </a>
+                }
+            </div>
+        </div>
+    );
+};