form

frontend/src/pages/Backups/Backups.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { ColumnType } from 'antd/es/table'
-import { Table, Button, Tag, Col, Row, Tooltip, notification } from 'antd'
+import { Table, Button, Form, Input, Modal, Tag, Col, Progress, Row, Tooltip, notification } from 'antd'
 
 interface BackupRow {
     id: string
@@ -22,11 +22,53 @@ interface Backups {
     backups: BackupRow[]
 }
 
+type FieldType = {
+    database?: string
+    table?: string
+    bucket?: string
+    path?: string
+}
+
 export default function Backups() {
     const [backups, setBackups] = useState<Backups>({
         backups: [],
     })
     const [loadingBackups, setLoadingBackups] = useState(false)
+    const [open, setOpen] = useState(false)
+    const [confirmLoading, setConfirmLoading] = useState(false)
+
+    const [form] = Form.useForm() // Hook to get form API
+
+    const handleSubmit = async () => {
+        try {
+            // Validate and get form values
+            const values = await form.validateFields()
+            setConfirmLoading(true)
+            const res = await fetch(`/api/backups`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(values),
+            })
+            setOpen(false)
+            setConfirmLoading(false)
+            loadData()
+            return await res.json()
+        } catch (error) {
+            notification.error({
+                message: 'Creating backup failed',
+            })
+        }
+    }
+
+    const showModal = () => {
+        setOpen(true)
+    }
+    const handleCancel = () => {
+        console.log('Clicked cancel button')
+        setOpen(false)
+    }
 
     const loadData = async () => {
         try {
@@ -51,7 +93,7 @@ export default function Backups() {
             title: 'Status',
             dataIndex: 'status',
             render: (_, { status }) => {
-                var color = 'black'
+                var color = 'volcano'
                 switch (status) {
                     case 'CREATING_BACKUP' || 'RESTORING':
                         color = 'black'
@@ -79,14 +121,57 @@ export default function Backups() {
     return (
         <div>
             <h1 style={{ textAlign: 'left' }}>Backups</h1>
-            <Button
-                onClick={() => {
-                    console.log('hi')
-                }}
-            >
-                Create Backup
-            </Button>
+            <Button onClick={showModal}>Create Backup</Button>
             <br />
+            <Modal
+                title="Title"
+                open={open}
+                onOk={handleSubmit}
+                confirmLoading={confirmLoading}
+                onCancel={handleCancel}
+            >
+                <Form
+                    name="basic"
+                    form={form}
+                    labelCol={{ span: 8 }}
+                    wrapperCol={{ span: 16 }}
+                    style={{ maxWidth: 600 }}
+                    initialValues={{ remember: true }}
+                    autoComplete="on"
+                >
+                    <Form.Item<FieldType>
+                        label="Database"
+                        name="database"
+                        rules={[{ required: true, message: 'Please select a database to back up from' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item<FieldType>
+                        label="Table"
+                        name="table"
+                        rules={[{ required: true, message: 'Please select a table to back up' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item<FieldType>
+                        label="S3 Bucket"
+                        name="bucket"
+                        rules={[{ required: true, message: 'What S3 bucket to backup into' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item<FieldType>
+                        label="S3 Path"
+                        name="path"
+                        rules={[{ required: true, message: 'What is the path in the bucket to backup to' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+                </Form>
+            </Modal>
             <Row gutter={8} style={{ paddingBottom: 8 }}>
                 <ul>
                     <Table columns={columns} dataSource={backups.backups} loading={loadingBackups} />

frontend/src/pages/RunningQueries/RunningQueries.tsx

@@ -36,7 +36,7 @@ function KillQueryButton({ queryId }: any) {
         } catch (err) {
             setIsLoading(false)
             notification.error({
-                message: 'Killing query failed',
+                message: 'Creating backup failed',
             })
         }
     }