MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update overview backups page

This commit is contained in:
Andrew Kingston 2022-12-20 12:35:07 +00:00
parent 821c736249
commit b14132cd9a
1 changed files with 74 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
View File

@ -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,25 +171,24 @@
}) })
</script> </script>
<div class="root"> <Layout noPadding>
{#if !$licensing.backupsEnabled}
<Page wide={false}>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<div class="title"> <div class="title">
<Heading size="M">Backups</Heading> <Heading>Backups</Heading>
{#if !$licensing.backupsEnabled}
<Tags> <Tags>
<Tag icon="LockClosed">Pro plan</Tag> <Tag icon="LockClosed">Pro plan</Tag>
</Tags> </Tags>
</div>
<div>
<Body>
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} {/if}
</Body>
</div> </div>
<Body>Back up your apps and restore them to their previous state</Body>
</Layout>
<Divider /> <Divider />
{#if !$licensing.backupsEnabled}
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
<Body>Contact your account holder to upgrade your plan.</Body>
{/if}
<div class="pro-buttons"> <div class="pro-buttons">
{#if $auth.accountPortalAccess} {#if $auth.accountPortalAccess}
<Button <Button
@ -200,7 +199,6 @@
Upgrade Upgrade
</Button> </Button>
{/if} {/if}
<!--Show the view plans button-->
<Button <Button
secondary secondary
on:click={() => { on:click={() => {
@ -210,28 +208,19 @@
View plans View plans
</Button> </Button>
</div> </div>
</Layout> {:else if backupData?.length === 0 && loaded && !filterOpt && !startDate}
</Page> <div class="center">
{:else if backupData?.length === 0 && !loaded && !filterOpt && !startDate} <Layout noPadding gap="S" justifyItems="center">
<Page wide={false}> <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
<div class="align"> <Layout noPadding gap="XS">
<img
width="220px"
height="130px"
src={BackupsDefault}
alt="BackupsDefault"
/>
<Layout gap="S">
<Heading>You have no backups yet</Heading> <Heading>You have no backups yet</Heading>
<div class="opacity"> <Body>You can manually back up your app any time</Body>
<Body size="S">You can manually backup your app any time</Body> </Layout>
</div> <div>
<div class="padding"> <Button on:click={modal.show} cta>Create backup</Button>
<Button on:click={modal.show} cta>Create Backup</Button>
</div> </div>
</Layout> </Layout>
</div> </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,10 +234,9 @@
bind:value={filterOpt} bind:value={filterOpt}
/> />
</div> </div>
<div>
<DatePicker <DatePicker
range={true} range={true}
label={"Filter Range"} label="Date 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()
@ -256,12 +244,11 @@
} }
}} }}
/> />
</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>