Fixing issues discussed in #8460 around backup UI.
This commit is contained in:
parent
cbd6ce7f32
commit
b9334a373c
8 changed files with 80 additions and 62 deletions
|
@ -10,7 +10,7 @@
|
|||
} from "@budibase/bbui"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import CreateRestoreModal from "./CreateRestoreModal.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { createEventDispatcher, onMount } from "svelte"
|
||||
|
||||
export let row
|
||||
|
||||
|
@ -49,6 +49,10 @@
|
|||
async function downloadExport() {
|
||||
window.open(`/api/apps/${row.appId}/backups/${row._id}/file`, "_blank")
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
name = row.name
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
|
@ -62,7 +66,7 @@
|
|||
<MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
|
||||
<MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
|
||||
{/if}
|
||||
<MenuItem on:click={updateDialog.show} icon="Edit">Update</MenuItem>
|
||||
<MenuItem on:click={updateDialog.show} icon="Edit">Rename</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
|
||||
|
@ -100,7 +104,7 @@
|
|||
title="Update Backup"
|
||||
warning={false}
|
||||
>
|
||||
<Input onlabel="Backup name" placeholder={row.name} bind:value={name} />
|
||||
<Input onlabel="Backup name" bind:value={name} />
|
||||
</ConfirmDialog>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -21,13 +21,14 @@
|
|||
import AppSizeRenderer from "./AppSizeRenderer.svelte"
|
||||
import CreateBackupModal from "./CreateBackupModal.svelte"
|
||||
import ActionsRenderer from "./ActionsRenderer.svelte"
|
||||
import DateRenderer from "./DateRenderer.svelte"
|
||||
import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import UserRenderer from "./UserRenderer.svelte"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import TypeRenderer from "./TypeRenderer.svelte"
|
||||
import NameRenderer from "./NameRenderer.svelte"
|
||||
import BackupsDefault from "assets/backups-default.png"
|
||||
import { BackupTrigger, BackupType } from "constants/backend/backups"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
export let app
|
||||
|
||||
let backupData = null
|
||||
|
@ -36,30 +37,34 @@
|
|||
let filterOpt = null
|
||||
let startDate = null
|
||||
let endDate = null
|
||||
let filters = getFilters()
|
||||
let loaded = false
|
||||
let filters = [
|
||||
{
|
||||
label: "Manual backup",
|
||||
value: { type: BackupType.BACKUP, trigger: BackupTrigger.MANUAL },
|
||||
},
|
||||
{
|
||||
label: "Published backup",
|
||||
value: { type: BackupType.BACKUP, trigger: BackupTrigger.PUBLISH },
|
||||
},
|
||||
{
|
||||
label: "Scheduled backup",
|
||||
value: { type: BackupType.BACKUP, trigger: BackupTrigger.SCHEDULED },
|
||||
},
|
||||
{
|
||||
label: "Pre-restore backup",
|
||||
value: { type: BackupType.BACKUP, trigger: BackupTrigger.RESTORING },
|
||||
},
|
||||
{
|
||||
label: "Manual restore",
|
||||
value: { type: BackupType.RESTORE, trigger: BackupTrigger.MANUAL },
|
||||
},
|
||||
]
|
||||
|
||||
$: page = $pageInfo.page
|
||||
$: fetchBackups(filterOpt, page, startDate, endDate)
|
||||
|
||||
function getFilters() {
|
||||
const options = []
|
||||
let types = ["backup"]
|
||||
let triggers = ["manual", "publish", "scheduled", "restoring"]
|
||||
for (let type of types) {
|
||||
for (let trigger of triggers) {
|
||||
let label = `${trigger} ${type}`
|
||||
label = label.charAt(0).toUpperCase() + label?.slice(1)
|
||||
options.push({ label, value: { type, trigger } })
|
||||
}
|
||||
}
|
||||
options.push({
|
||||
label: `Manual restore`,
|
||||
value: { type: "restore", trigger: "manual" },
|
||||
})
|
||||
return options
|
||||
}
|
||||
|
||||
const schema = {
|
||||
let schema = {
|
||||
type: {
|
||||
displayName: "Type",
|
||||
width: "auto",
|
||||
|
@ -97,6 +102,7 @@
|
|||
{ column: "createdBy", component: UserRenderer },
|
||||
{ column: "status", component: StatusRenderer },
|
||||
{ column: "type", component: TypeRenderer },
|
||||
{ column: "name", component: NameRenderer },
|
||||
]
|
||||
|
||||
function flattenBackups(backups) {
|
||||
|
@ -260,7 +266,7 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table">
|
||||
<Table
|
||||
{schema}
|
||||
disableSorting
|
||||
|
@ -308,7 +314,7 @@
|
|||
}
|
||||
|
||||
.select {
|
||||
flex-basis: 150px;
|
||||
flex-basis: 100px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
@ -342,4 +348,8 @@
|
|||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.table {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,22 +0,0 @@
|
|||
<script>
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import dayjs from "dayjs"
|
||||
import relativeTime from "dayjs/plugin/relativeTime"
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
export let value
|
||||
$: timeSince = dayjs(value).fromNow()
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{timeSince} - <DateTimeRenderer {value} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,8 @@
|
|||
<script>
|
||||
import { truncate } from "lodash"
|
||||
|
||||
export let value
|
||||
$: truncatedValue = truncate(value, { length: 12 })
|
||||
</script>
|
||||
|
||||
{truncatedValue}
|
|
@ -1,13 +1,29 @@
|
|||
<script>
|
||||
import { BackupTrigger } from "constants/backend/backups"
|
||||
export let row
|
||||
|
||||
$: baseTrig = row?.trigger || "manual"
|
||||
$: trigger = row?.trigger || "manual"
|
||||
$: type = row?.type || "backup"
|
||||
$: trigger = baseTrig.charAt(0).toUpperCase() + baseTrig.slice(1)
|
||||
|
||||
function printTrigger(trig) {
|
||||
let final = "undefined"
|
||||
switch (trig) {
|
||||
case BackupTrigger.PUBLISH:
|
||||
final = "published"
|
||||
break
|
||||
case BackupTrigger.RESTORING:
|
||||
final = "pre-restore"
|
||||
break
|
||||
default:
|
||||
final = trig
|
||||
break
|
||||
}
|
||||
return final.charAt(0).toUpperCase() + final.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{trigger}
|
||||
{printTrigger(trigger)}
|
||||
{type}
|
||||
</div>
|
||||
|
||||
|
|
11
packages/builder/src/constants/backend/backups.js
Normal file
11
packages/builder/src/constants/backend/backups.js
Normal file
|
@ -0,0 +1,11 @@
|
|||
export const BackupTrigger = {
|
||||
MANUAL: "manual",
|
||||
PUBLISH: "publish",
|
||||
RESTORING: "restoring",
|
||||
SCHEDULED: "scheduled",
|
||||
}
|
||||
|
||||
export const BackupType = {
|
||||
BACKUP: "backup",
|
||||
RESTORE: "restore",
|
||||
}
|
|
@ -383,10 +383,5 @@
|
|||
.user-dropdown {
|
||||
flex: 0 1 0;
|
||||
}
|
||||
|
||||
/* Reduce BBUI page padding */
|
||||
.content :global(> *) {
|
||||
padding: calc(var(--spacing-xl) * 1.5) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -391,11 +391,7 @@
|
|||
gap: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.overview-wrap :global(.content > *) {
|
||||
padding: calc(var(--spacing-xl) * 1.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-title {
|
||||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
|
|
Loading…
Reference in a new issue