Update overview backups page
This commit is contained in:
Andrew Kingston
parent
627a5f812c
commit
2506d018f9
|
|
@ -16,7 +16,7 @@
|
||||||
Table,
|
Table,
|
||||||
Page,
|
Page,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { backups, licensing, auth, admin } from "stores/portal"
|
import { backups, licensing, auth, admin, overview } from "stores/portal"
|
||||||
import { createPaginationStore } from "helpers/pagination"
|
import { createPaginationStore } from "helpers/pagination"
|
||||||
import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||||
import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
|
import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
|
||||||
|
|
@ -29,7 +29,6 @@
|
||||||
import BackupsDefault from "assets/backups-default.png"
|
import BackupsDefault from "assets/backups-default.png"
|
||||||
import { BackupTrigger, BackupType } from "constants/backend/backups"
|
import { BackupTrigger, BackupType } from "constants/backend/backups"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
export let app
|
|
||||||
|
|
||||||
let backupData = null
|
let backupData = null
|
||||||
let modal
|
let modal
|
||||||
|
|
@ -61,6 +60,7 @@
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
$: app = $overview.selectedApp
|
||||||
$: page = $pageInfo.page
|
$: page = $pageInfo.page
|
||||||
$: fetchBackups(filterOpt, page, startDate, endDate)
|
$: fetchBackups(filterOpt, page, startDate, endDate)
|
||||||
|
|
||||||
|
|
@ -171,67 +171,56 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<Layout noPadding>
|
||||||
|
<Layout gap="XS" noPadding>
|
||||||
|
<div class="title">
|
||||||
|
<Heading>Backups</Heading>
|
||||||
|
{#if !$licensing.backupsEnabled}
|
||||||
|
<Tags>
|
||||||
|
<Tag icon="LockClosed">Pro plan</Tag>
|
||||||
|
</Tags>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<Body>Back up your apps and restore them to their previous state</Body>
|
||||||
|
</Layout>
|
||||||
|
<Divider />
|
||||||
|
|
||||||
{#if !$licensing.backupsEnabled}
|
{#if !$licensing.backupsEnabled}
|
||||||
<Page wide={false}>
|
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
|
||||||
<Layout gap="XS" noPadding>
|
<Body>Contact your account holder to upgrade your plan.</Body>
|
||||||
<div class="title">
|
{/if}
|
||||||
<Heading size="M">Backups</Heading>
|
<div class="pro-buttons">
|
||||||
<Tags>
|
{#if $auth.accountPortalAccess}
|
||||||
<Tag icon="LockClosed">Pro plan</Tag>
|
<Button
|
||||||
</Tags>
|
primary
|
||||||
</div>
|
disabled={!$auth.accountPortalAccess && $admin.cloud}
|
||||||
|
on:click={$licensing.goToUpgradePage()}
|
||||||
|
>
|
||||||
|
Upgrade
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
<Button
|
||||||
|
secondary
|
||||||
|
on:click={() => {
|
||||||
|
window.open("https://budibase.com/pricing/", "_blank")
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
View plans
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{:else if backupData?.length === 0 && loaded && !filterOpt && !startDate}
|
||||||
|
<div class="center">
|
||||||
|
<Layout noPadding gap="S" justifyItems="center">
|
||||||
|
<img height="130px" src={BackupsDefault} alt="BackupsDefault" />
|
||||||
|
<Layout noPadding gap="XS">
|
||||||
|
<Heading>You have no backups yet</Heading>
|
||||||
|
<Body>You can manually back up your app any time</Body>
|
||||||
|
</Layout>
|
||||||
<div>
|
<div>
|
||||||
<Body>
|
<Button on:click={modal.show} cta>Create backup</Button>
|
||||||
Back up your apps and restore them to their previous state.
|
|
||||||
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
|
|
||||||
Contact your account holder to upgrade your plan.
|
|
||||||
{/if}
|
|
||||||
</Body>
|
|
||||||
</div>
|
|
||||||
<Divider />
|
|
||||||
<div class="pro-buttons">
|
|
||||||
{#if $auth.accountPortalAccess}
|
|
||||||
<Button
|
|
||||||
primary
|
|
||||||
disabled={!$auth.accountPortalAccess && $admin.cloud}
|
|
||||||
on:click={$licensing.goToUpgradePage()}
|
|
||||||
>
|
|
||||||
Upgrade
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
<!--Show the view plans button-->
|
|
||||||
<Button
|
|
||||||
secondary
|
|
||||||
on:click={() => {
|
|
||||||
window.open("https://budibase.com/pricing/", "_blank")
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
View plans
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Page>
|
</div>
|
||||||
{:else if backupData?.length === 0 && !loaded && !filterOpt && !startDate}
|
|
||||||
<Page wide={false}>
|
|
||||||
<div class="align">
|
|
||||||
<img
|
|
||||||
width="220px"
|
|
||||||
height="130px"
|
|
||||||
src={BackupsDefault}
|
|
||||||
alt="BackupsDefault"
|
|
||||||
/>
|
|
||||||
<Layout gap="S">
|
|
||||||
<Heading>You have no backups yet</Heading>
|
|
||||||
<div class="opacity">
|
|
||||||
<Body size="S">You can manually backup your app any time</Body>
|
|
||||||
</div>
|
|
||||||
<div class="padding">
|
|
||||||
<Button on:click={modal.show} cta>Create Backup</Button>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
</div>
|
|
||||||
</Page>
|
|
||||||
{:else if loaded}
|
{:else if loaded}
|
||||||
<Layout noPadding gap="M" alignContent="start">
|
<Layout noPadding gap="M" alignContent="start">
|
||||||
<div class="search">
|
<div class="search">
|
||||||
|
|
@ -245,23 +234,21 @@
|
||||||
bind:value={filterOpt}
|
bind:value={filterOpt}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<DatePicker
|
||||||
<DatePicker
|
range={true}
|
||||||
range={true}
|
label="Date Range"
|
||||||
label={"Filter Range"}
|
on:change={e => {
|
||||||
on:change={e => {
|
if (e.detail[0].length > 1) {
|
||||||
if (e.detail[0].length > 1) {
|
startDate = e.detail[0][0].toISOString()
|
||||||
startDate = e.detail[0][0].toISOString()
|
endDate = e.detail[0][1].toISOString()
|
||||||
endDate = e.detail[0][1].toISOString()
|
}
|
||||||
}
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="split-buttons">
|
<div class="split-buttons">
|
||||||
<ActionButton on:click={modal.show} icon="SaveAsFloppy"
|
<ActionButton on:click={modal.show} icon="SaveAsFloppy">
|
||||||
>Create new backup</ActionButton
|
Create new backup
|
||||||
>
|
</ActionButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table">
|
<div class="table">
|
||||||
|
|
@ -289,19 +276,19 @@
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</Layout>
|
||||||
|
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
<CreateBackupModal {createManualBackup} />
|
<CreateBackupModal {createManualBackup} />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.root {
|
.title {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 1fr;
|
flex-direction: row;
|
||||||
height: 100%;
|
justify-content: flex-start;
|
||||||
padding: var(--spectrum-alias-grid-gutter-medium)
|
align-items: center;
|
||||||
var(--spectrum-alias-grid-gutter-large);
|
gap: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
|
|
@ -312,7 +299,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.select {
|
.select {
|
||||||
flex-basis: 100px;
|
flex-basis: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
|
|
@ -327,7 +314,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
gap: var(--spacing-xl);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
@ -337,11 +323,6 @@
|
||||||
gap: var(--spacing-m);
|
gap: var(--spacing-m);
|
||||||
}
|
}
|
||||||
|
|
||||||
.align {
|
|
||||||
margin-top: 5%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pro-buttons {
|
.pro-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--spacing-m);
|
gap: var(--spacing-m);
|
||||||
|
|
@ -350,4 +331,9 @@
|
||||||
.table {
|
.table {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue