chore: add delete button for scheduled backups (#37)

* chore: add delete button for scheduled backups * chore: add delete button for scheduled backup
PostHog · Sep 1, 2023 · d55bec5 · d55bec5
1 parent e4a1f3d
commit d55bec5
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 44 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,7 +4,6 @@
     "dependencies": {
         "@ant-design/charts": "^1.4.2",
         "@ant-design/icons": "^5.2.0",
-        "antd": "^5.0.0",
         "prismjs": "^1.29.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -19,10 +18,11 @@
         "@types/jest": "^27.5.2",
         "@types/lodash": "^4.14.192",
         "@types/node": "^16.18.22",
-        "@types/react": "^18.0.31",
-        "@types/react-dom": "^18.0.11",
+        "@types/react": "^18.2.21",
+        "@types/react-dom": "^18.2.7",
         "@types/react-router-dom": "5.3.3",
-        "@types/uuid": "^9.0.1"
+        "@types/uuid": "^9.0.1",
+        "icons": "link:@types/ant-design/icons"
     },
     "scripts": {
         "start": "react-scripts start",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/pages/Backups/ScheduledBackups.tsx b/frontend/src/pages/Backups/ScheduledBackups.tsx
@@ -2,6 +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 { Clusters } from '../Clusters/Clusters'
 
 interface ScheduleRow {
@@ -133,6 +134,32 @@ export default function ScheduledBackups() {
         { title: 'Bucket', dataIndex: 'bucket' },
         { title: 'Path', dataIndex: 'path' },
         { title: 'Created At', dataIndex: 'created_at' },
+        {
+            title: '',
+            dataIndex: 'id',
+            render: id => {
+                const deleteBackup = async () => {
+                    try {
+                        const res = await fetch(`/api/scheduled_backups/${id}`, {
+                            method: 'DELETE',
+                        })
+                        loadData()
+                        return await res.text()
+                    } catch (error) {
+                        console.log(error)
+                        notification.error({
+                            message: 'Failed to delete backup',
+                        })
+                    }
+                }
+
+                return (
+                    <a id={id} onClick={deleteBackup}>
+                        <DeleteOutlined rev={undefined} />
+                    </a>
+                )
+            },
+        },
     ]
 
     usePollingEffect(