Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add edit ability for backup schedules #49

Merged
merged 1 commit into from
Sep 15, 2023
+55 −20
Merged

feat: add edit ability for backup schedules #49

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 55 additions & 20 deletions frontend/src/pages/Backups/ScheduledBackups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import { usePollingEffect } from '../../utils/usePollingEffect'
import { ColumnType } from 'antd/es/table'
import { Switch, Select, Table, Button, Form, Input, Modal, Tag, Col, Progress, Row, Tooltip, notification } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { Clusters } from '../Clusters/Clusters'

interface ScheduleRow {
Expand Down Expand Up @@ -49,20 +49,24 @@ export default function ScheduledBackups() {

const [form] = Form.useForm() // Hook to get form API

const [editingRow, setEditingRow] = useState<ScheduleRow | null>(null) // <-- New state to hold the editing row data

const handleSubmit = async () => {
try {
// Validate and get form values
const method = editingRow ? 'PATCH' : 'POST'
const url = editingRow ? `/api/scheduled_backups/${editingRow.id}` : '/api/scheduled_backups'
const values = await form.validateFields()
setConfirmLoading(true)
const res = await fetch(`/api/scheduled_backups`, {
method: 'POST',
const res = await fetch(url, {
method: method,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(values),
})
setOpen(false)
setConfirmLoading(false)
setEditingRow(null)
loadData()
return await res.json()
} catch (error) {
Expand All @@ -72,20 +76,32 @@ export default function ScheduledBackups() {
}
}

const showModal = () => {
setOpen(true)
}
const handleCancel = () => {
console.log('Clicked cancel button')
setOpen(false)
form.resetFields()
setEditingRow(null)
}

const showModal = (rowData: ScheduleRow | null = null) => {
setEditingRow(rowData)
if (rowData) {
form.setFieldsValue(rowData)
} else {
form.resetFields()
}
setOpen(true)
}

const handleEdit = (rowData: ScheduleRow) => {
showModal(rowData)
}

const loadData = async () => {
try {
const res = await fetch('/api/scheduled_backups')
const resJson = await res.json()
const backups = { backups: resJson.results }
console.log(backups)
setBackups(backups)
} catch (err) {
notification.error({ message: 'Failed to load data' })
Expand Down Expand Up @@ -150,7 +166,6 @@ export default function ScheduledBackups() {
loadData()
return await res.text()
} catch (error) {
console.log(error)
notification.error({
message: 'Failed to delete backup',
})
Expand All @@ -164,6 +179,18 @@ export default function ScheduledBackups() {
)
},
},
{
title: 'Actions',
dataIndex: 'id',
render: (id: string, rowData: ScheduleRow) => {
return (
<>
<EditOutlined onClick={() => handleEdit(rowData)} />
{/* <DeleteOutlined onClick={() => handleDelete(id)} /> */}
</>
)
},
},
]

usePollingEffect(
Expand All @@ -174,12 +201,24 @@ export default function ScheduledBackups() {
{ interval: 5000 }
)

console.log(editingRow)

const default_form_values = {
schedule: '0 0 * * *',
incremental_schedule: '0 0 * * *',
database: 'default',
table: 'test_backup',
bucket: 'posthog-clickhouse',
path: 'testing/test_backup/7',
aws_access_key_id: 'AKIAIOSFODNN7EXAMPLE',
aws_secret_access_key: 'wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY',
}
return (
<div>
<h1 style={{ textAlign: 'left' }}>Scheduled Backups</h1>
<Button onClick={showModal}>Create Backup</Button>
<Button onClick={() => showModal()}>Create Backup</Button>
<Modal
title="Create Backup"
title={editingRow ? 'Edit Backup' : 'Create Backup'}
open={open}
onOk={handleSubmit}
confirmLoading={confirmLoading}
Expand All @@ -191,9 +230,13 @@ export default function ScheduledBackups() {
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
initialValues={editingRow ? editingRow : default_form_values}
autoComplete="on"
>
<Form.Item name="id" hidden={true}>
<Input />
</Form.Item>

<Form.Item name="cluster" label="Cluster">
<Select>
{clusters.clusters.map(cluster => (
Expand All @@ -204,7 +247,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="Schedule"
name="schedule"
initialValue="0 0 * * *"
rules={[{ required: true, message: 'Please provide a cron schedule for the backup' }]}
>
<Input />
Expand All @@ -213,7 +255,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="Incremental Schedule"
name="incremental_schedule"
initialValue="0 0 * * *"
rules={[
{ required: true, message: 'Please provide a cron schedule for the incremental backup' },
]}
Expand All @@ -224,7 +265,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="Database"
name="database"
initialValue="default"
rules={[{ required: true, message: 'Please select a database to back up from' }]}
>
<Input />
Expand All @@ -233,7 +273,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="Table"
name="table"
initialValue="test_backup"
rules={[{ required: true, message: 'Please select a table to back up' }]}
>
<Input />
Expand All @@ -242,7 +281,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="S3 Bucket"
name="bucket"
initialValue="posthog-clickhouse"
rules={[{ required: true, message: 'What S3 bucket to backup into' }]}
>
<Input />
Expand All @@ -251,7 +289,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="S3 Path"
name="path"
initialValue="testing/test_backup/7"
rules={[{ required: true, message: 'What is the path in the bucket to backup to' }]}
>
<Input />
Expand All @@ -260,7 +297,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="AWS Access Key ID"
name="aws_access_key_id"
initialValue="AKIAIOSFODNN7EXAMPLE"
rules={[{ required: true, message: 'AWS Access Key ID to use for access to the S3 bucket' }]}
>
<Input />
Expand All @@ -269,7 +305,6 @@ export default function ScheduledBackups() {
<Form.Item<FieldType>
label="AWS Secret Access Key"
name="aws_secret_access_key"
initialValue="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
rules={[{ required: true, message: 'AWS Secret Access Key used to access S3 bucket' }]}
>
<Input />
Expand Down