add base ui and backups tab
This commit is contained in:
Peter Clement
parent
07d4d9ee4d
commit
06e2b041d2
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
import { ActionButton, ActionMenu, MenuItem, Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<ActionButton>Restore</ActionButton>
|
||||
<ActionMenu>
|
||||
<div slot="control">
|
||||
<Icon size="M" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
|
||||
<MenuItem icon="Delete">Delete</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
$: console.log(value)
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon name="JourneyVoyager" />
|
||||
<div>{value.length}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<script>
|
||||
import {
|
||||
ActionButton,
|
||||
Layout,
|
||||
Pagination,
|
||||
Select,
|
||||
Table,
|
||||
Modal,
|
||||
} from "@budibase/bbui"
|
||||
import { onMount } from "svelte"
|
||||
import { backups } from "stores/portal"
|
||||
import DatasourceRenderer from "./DatasourceRenderer.svelte"
|
||||
import ScreensRenderer from "./ScreensRenderer.svelte"
|
||||
import AutomationsRenderer from "./AutomationsRenderer.svelte"
|
||||
import CreateBackupModal from "./CreateBackupModal.svelte"
|
||||
import TriggerRenderer from "./TriggerRenderer.svelte"
|
||||
import ActionsRenderer from "./ActionsRenderer.svelte"
|
||||
|
||||
export let app
|
||||
let backupData = null
|
||||
let modal
|
||||
|
||||
const triggers = {
|
||||
PUBLISH: "Publish",
|
||||
SCHEDULED: "Scheduled",
|
||||
MANUAL: "Manual",
|
||||
}
|
||||
|
||||
const schema = {
|
||||
trigger: {
|
||||
displayName: "Trigger",
|
||||
},
|
||||
name: {
|
||||
displayName: "Name",
|
||||
},
|
||||
date: {
|
||||
displayName: "Date",
|
||||
},
|
||||
datasources: {
|
||||
displayName: "Data",
|
||||
},
|
||||
screens: {
|
||||
displayName: "Screens",
|
||||
},
|
||||
automations: {
|
||||
displayName: "Automations",
|
||||
},
|
||||
userId: {
|
||||
displayName: "User",
|
||||
},
|
||||
actions: {
|
||||
displayName: null,
|
||||
},
|
||||
}
|
||||
|
||||
const customRenderers = [
|
||||
{ column: "datasources", component: DatasourceRenderer },
|
||||
{ column: "screens", component: ScreensRenderer },
|
||||
{ column: "automations", component: AutomationsRenderer },
|
||||
{ column: "trigger", component: TriggerRenderer },
|
||||
{ column: "actions", component: ActionsRenderer },
|
||||
]
|
||||
|
||||
async function fetchBackups() {
|
||||
backups.load()
|
||||
backupData = enrichBackupData($backups)
|
||||
}
|
||||
|
||||
function enrichBackupData(backups) {
|
||||
let enrichedBackups = backups.map(backup => {
|
||||
return {
|
||||
...backup,
|
||||
...Object.assign(...backup.contents),
|
||||
}
|
||||
})
|
||||
|
||||
return enrichedBackups
|
||||
}
|
||||
|
||||
function createManualBackup(name) {
|
||||
backups.createManualBackup({ appId: app.appId, name })
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
console.log(await backups.searchBackups(app.appId))
|
||||
|
||||
await fetchBackups()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Layout noPadding gap="M" alignContent="start">
|
||||
<div class="search">
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Trigger"
|
||||
options={Object.values(triggers)}
|
||||
/>
|
||||
</div>
|
||||
<div class="split-buttons">
|
||||
<ActionButton on:click={modal.show} icon="SaveAsFloppy"
|
||||
>Create new backup</ActionButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if backupData}
|
||||
<div>
|
||||
<Table
|
||||
{schema}
|
||||
allowSelectRows={false}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
data={backupData}
|
||||
{customRenderers}
|
||||
placeholderText="No backups found"
|
||||
border={false}
|
||||
/>
|
||||
<div class="pagination">
|
||||
<Pagination page={1} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
<Modal bind:this={modal}>
|
||||
<CreateBackupModal {createManualBackup} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100%;
|
||||
padding: var(--spectrum-alias-grid-gutter-medium)
|
||||
var(--spectrum-alias-grid-gutter-large);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.select {
|
||||
flex-basis: 150px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.split-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
import { ModalContent, Input } from "@budibase/bbui"
|
||||
|
||||
export let createManualBackup
|
||||
|
||||
let name
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
onConfirm={() => createManualBackup(name)}
|
||||
title="Create new backup"
|
||||
confirmText="Create"
|
||||
><Input
|
||||
label="Backup name"
|
||||
bind:value={name}
|
||||
placeholder={"test"}
|
||||
/></ModalContent
|
||||
>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon name="Data" />
|
||||
<div>{value.length}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon name="WebPage" />
|
||||
<div>{value.length}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{#if value === "PUBLISH"}
|
||||
<Icon name="GlobeCheck" />
|
||||
<div>{value}</div>
|
||||
{:else if value === "MANUAL"}
|
||||
<Icon name="Floppy" />
|
||||
<div>{value}</div>
|
||||
{:else if value === "SCHEDULED"}
|
||||
<Icon name="Clock" />
|
||||
<div>{value}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
import ExportAppModal from "components/start/ExportAppModal.svelte"
|
||||
import { checkIncomingDeploymentStatus } from "components/deploy/utils"
|
||||
import { onDestroy, onMount } from "svelte"
|
||||
import BackupsTab from "components/portal/overview/backups/BackupsTab.svelte"
|
||||
|
||||
export let application
|
||||
|
||||
|
|
@ -323,11 +324,9 @@
|
|||
<HistoryTab app={selectedApp} />
|
||||
</Tab>
|
||||
{/if}
|
||||
{#if false}
|
||||
<Tab title="Backups">
|
||||
<div class="container">Backups contents</div>
|
||||
</Tab>
|
||||
{/if}
|
||||
<Tab title="Backups">
|
||||
<BackupsTab app={selectedApp} />
|
||||
</Tab>
|
||||
<Tab title="Settings">
|
||||
<SettingsTab app={selectedApp} />
|
||||
</Tab>
|
||||
|
|
|
|||
Loading…
Reference in New Issue