Adding in relocated screen components
This commit is contained in:
Dean
parent
f37c49e8af
commit
e1b63842e5
|
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
import { automationStore } from "builderStore"
|
||||
import { params } from "@roxi/routify"
|
||||
|
||||
if ($params.automation) {
|
||||
const automation = $automationStore.automations.find(
|
||||
m => m._id === $params.automation
|
||||
)
|
||||
if (automation) {
|
||||
automationStore.actions.select(automation)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
|
||||
</script>
|
||||
|
||||
<AutomationBuilder />
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<script>
|
||||
import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
|
||||
import { automationStore, selectedAutomation } from "builderStore"
|
||||
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
|
||||
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
|
||||
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
|
||||
import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
|
||||
import { onDestroy, onMount } from "svelte"
|
||||
import { syncURLToState } from "helpers/urlStateSync"
|
||||
import * as routify from "@roxi/routify"
|
||||
import { store } from "builderStore"
|
||||
import { redirect } from "@roxi/routify"
|
||||
|
||||
// Prevent access for other users than the lock holder
|
||||
$: {
|
||||
if (!$store.hasLock) {
|
||||
$redirect("../data")
|
||||
}
|
||||
}
|
||||
|
||||
// Keep URL and state in sync for selected screen ID
|
||||
const stopSyncing = syncURLToState({
|
||||
urlParam: "automationId",
|
||||
stateKey: "selectedAutomationId",
|
||||
validate: id => $automationStore.automations.some(x => x._id === id),
|
||||
fallbackUrl: "./index",
|
||||
store: automationStore,
|
||||
up: automationStore.actions.select,
|
||||
routify,
|
||||
})
|
||||
|
||||
let modal
|
||||
let webhookModal
|
||||
|
||||
onMount(() => {
|
||||
$automationStore.showTestPanel = false
|
||||
})
|
||||
|
||||
onDestroy(stopSyncing)
|
||||
</script>
|
||||
|
||||
<!-- routify:options index=3 -->
|
||||
<div class="root">
|
||||
<AutomationPanel {modal} {webhookModal} />
|
||||
<div class="content">
|
||||
{#if $automationStore.automations?.length}
|
||||
<slot />
|
||||
{:else}
|
||||
<div class="centered">
|
||||
<div class="main">
|
||||
<Layout gap="S" justifyItems="center">
|
||||
<svg
|
||||
width="60px"
|
||||
height="60px"
|
||||
class="spectrum-Icon"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-WorkflowAdd" />
|
||||
</svg>
|
||||
<Heading size="M">You have no automations</Heading>
|
||||
<Body size="M">Let's fix that. Call the bots!</Body>
|
||||
<Button on:click={() => modal.show()} size="M" cta>
|
||||
Create automation
|
||||
</Button>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $automationStore.showTestPanel}
|
||||
<div class="setup">
|
||||
<TestPanel automation={$selectedAutomation} />
|
||||
</div>
|
||||
{/if}
|
||||
<Modal bind:this={modal}>
|
||||
<CreateAutomationModal {webhookModal} />
|
||||
</Modal>
|
||||
<Modal bind:this={webhookModal} width="30%">
|
||||
<CreateWebhookModal />
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
flex: 1 1 auto;
|
||||
height: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column dense;
|
||||
grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
overflow: auto;
|
||||
}
|
||||
.centered {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.setup {
|
||||
padding-top: var(--spectrum-global-dimension-size-200);
|
||||
border-left: var(--border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
background-color: var(--background);
|
||||
grid-column: 3;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
import { redirect } from "@roxi/routify"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
$: {
|
||||
if ($automationStore.automations?.length) {
|
||||
$redirect(`./${$automationStore.automations[0]._id}`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<script>
|
||||
import {
|
||||
Content,
|
||||
SideNav,
|
||||
SideNavItem,
|
||||
Breadcrumbs,
|
||||
Breadcrumb,
|
||||
Header,
|
||||
} from "components/portal/page"
|
||||
import {
|
||||
Page,
|
||||
Layout,
|
||||
Button,
|
||||
Icon,
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
Helpers,
|
||||
Input,
|
||||
Modal,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import EditableIcon from "components/common/EditableIcon.svelte"
|
||||
import { url, isActive, goto } from "@roxi/routify"
|
||||
import { apps } from "stores/portal"
|
||||
</script>
|
||||
|
||||
<!-- routify:options index=4 -->
|
||||
<div class="settings">
|
||||
<Page>
|
||||
<Layout noPadding gap="L">
|
||||
<Content showMobileNav>
|
||||
<SideNav slot="side-nav">
|
||||
<SideNavItem
|
||||
text="Automation History"
|
||||
url={$url("./automation-history")}
|
||||
active={$isActive("./automation-history")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Backups"
|
||||
url={$url("./backups")}
|
||||
active={$isActive("./backups")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Embed"
|
||||
url={$url("./embed")}
|
||||
active={$isActive("./embed")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Name and URL"
|
||||
url={$url("./name-and-url")}
|
||||
active={$isActive("./name-and-url")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Version"
|
||||
url={$url("./version")}
|
||||
active={$isActive("./version")}
|
||||
/>
|
||||
</SideNav>
|
||||
<slot />
|
||||
</Content>
|
||||
</Layout>
|
||||
</Page>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.settings {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Body,
|
||||
Button,
|
||||
InlineAlert,
|
||||
Heading,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
export let history
|
||||
export let appId
|
||||
export let close
|
||||
const STOPPED_ERROR = "stopped_error"
|
||||
|
||||
$: exists = $automationStore.automations?.find(
|
||||
auto => auto._id === history?.automationId
|
||||
)
|
||||
</script>
|
||||
|
||||
{#if history}
|
||||
<Layout noPadding>
|
||||
<div class="controls">
|
||||
<StatusRenderer value={history.status} />
|
||||
<Icon hoverable name="Close" on:click={close} />
|
||||
</div>
|
||||
<Layout noPadding gap="XS">
|
||||
<Heading>{history.automationName}</Heading>
|
||||
<DateTimeRenderer value={history.createdAt} />
|
||||
</Layout>
|
||||
{#if history.status === STOPPED_ERROR}
|
||||
<div class="cron-error">
|
||||
<InlineAlert
|
||||
type="error"
|
||||
header="CRON automation disabled"
|
||||
message="Fix the error and re-publish your app to re-activate."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if exists}
|
||||
<div>
|
||||
<Button
|
||||
secondary
|
||||
on:click={() => {
|
||||
$goto(`/builder/app/${appId}/automation/${history.automationId}`)
|
||||
}}
|
||||
>
|
||||
Edit automation
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{#key history}
|
||||
<div class="history">
|
||||
<TestDisplay testResults={history} width="100%" />
|
||||
</div>
|
||||
{/key}
|
||||
</Layout>
|
||||
{:else}
|
||||
<Body>No details found</Body>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-s);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.cron-error {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.history {
|
||||
margin: 0 -30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
import { Badge } from "@budibase/bbui"
|
||||
export let value
|
||||
|
||||
$: isError = !value || value.toLowerCase() === "error"
|
||||
$: isStoppedError = value?.toLowerCase() === "stopped_error"
|
||||
$: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
|
||||
$: info = getInfo(isError, isStopped)
|
||||
|
||||
const getInfo = (error, stopped) => {
|
||||
if (error) {
|
||||
return { color: "red", message: "Error" }
|
||||
} else if (stopped) {
|
||||
return { color: "yellow", message: "Stopped" }
|
||||
} else {
|
||||
return { color: "green", message: "Success" }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Badge
|
||||
green={info.color === "green"}
|
||||
red={info.color === "red"}
|
||||
yellow={info.color === "yellow"}
|
||||
>
|
||||
{info.message}
|
||||
</Badge>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Table,
|
||||
Select,
|
||||
Pagination,
|
||||
Button,
|
||||
Body,
|
||||
Heading,
|
||||
Divider,
|
||||
} from "@budibase/bbui"
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import StatusRenderer from "./_components/StatusRenderer.svelte"
|
||||
import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
|
||||
import { automationStore, store } from "builderStore"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import { getContext, onDestroy, onMount } from "svelte"
|
||||
import dayjs from "dayjs"
|
||||
import { auth, licensing, admin } from "stores/portal"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
import Portal from "svelte-portal"
|
||||
|
||||
const ERROR = "error",
|
||||
SUCCESS = "success",
|
||||
STOPPED = "stopped"
|
||||
const sidePanel = getContext("side-panel")
|
||||
|
||||
let pageInfo = createPaginationStore()
|
||||
let runHistory = null
|
||||
let selectedHistory = null
|
||||
let automationOptions = []
|
||||
let automationId = null
|
||||
let status = null
|
||||
let timeRange = null
|
||||
let loaded = false
|
||||
|
||||
$: licensePlan = $auth.user?.license?.plan
|
||||
$: page = $pageInfo.page
|
||||
$: fetchLogs(automationId, status, page, timeRange)
|
||||
|
||||
const timeOptions = [
|
||||
{ value: "90-d", label: "Past 90 days" },
|
||||
{ value: "30-d", label: "Past 30 days" },
|
||||
{ value: "1-w", label: "Past week" },
|
||||
{ value: "1-d", label: "Past day" },
|
||||
{ value: "1-h", label: "Past 1 hour" },
|
||||
{ value: "15-m", label: "Past 15 mins" },
|
||||
{ value: "5-m", label: "Past 5 mins" },
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ value: SUCCESS, label: "Success" },
|
||||
{ value: ERROR, label: "Error" },
|
||||
{ value: STOPPED, label: "Stopped" },
|
||||
]
|
||||
|
||||
const runHistorySchema = {
|
||||
status: { displayName: "Status" },
|
||||
automationName: { displayName: "Automation" },
|
||||
createdAt: { displayName: "Time" },
|
||||
}
|
||||
|
||||
const customRenderers = [
|
||||
{ column: "createdAt", component: DateTimeRenderer },
|
||||
{ column: "status", component: StatusRenderer },
|
||||
]
|
||||
|
||||
async function fetchLogs(
|
||||
automationId,
|
||||
status,
|
||||
page,
|
||||
timeRange,
|
||||
force = false
|
||||
) {
|
||||
if (!force && !loaded) {
|
||||
return
|
||||
}
|
||||
let startDate = null
|
||||
if (timeRange) {
|
||||
const [length, units] = timeRange.split("-")
|
||||
startDate = dayjs().subtract(length, units)
|
||||
}
|
||||
const response = await automationStore.actions.getLogs({
|
||||
automationId,
|
||||
status,
|
||||
page,
|
||||
startDate,
|
||||
})
|
||||
pageInfo.fetched(response.hasNextPage, response.nextPage)
|
||||
runHistory = enrichHistory($automationStore.blockDefinitions, response.data)
|
||||
}
|
||||
|
||||
function enrichHistory(definitions, runHistory) {
|
||||
if (!definitions) {
|
||||
return []
|
||||
}
|
||||
const finalHistory = []
|
||||
for (let history of runHistory) {
|
||||
if (!history.steps) {
|
||||
continue
|
||||
}
|
||||
let notFound = false
|
||||
for (let step of history.steps) {
|
||||
const trigger = definitions.TRIGGER[step.stepId],
|
||||
action = definitions.ACTION[step.stepId]
|
||||
if (!trigger && !action) {
|
||||
notFound = true
|
||||
break
|
||||
}
|
||||
step.icon = trigger ? trigger.icon : action.icon
|
||||
step.name = trigger ? trigger.name : action.name
|
||||
}
|
||||
if (!notFound) {
|
||||
finalHistory.push(history)
|
||||
}
|
||||
}
|
||||
return finalHistory
|
||||
}
|
||||
|
||||
function viewDetails({ detail }) {
|
||||
selectedHistory = detail
|
||||
sidePanel.open()
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await automationStore.actions.fetch()
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const shouldOpen = params.get("open") === ERROR
|
||||
if (shouldOpen) {
|
||||
status = ERROR
|
||||
}
|
||||
automationOptions = []
|
||||
for (let automation of $automationStore.automations) {
|
||||
automationOptions.push({ value: automation._id, label: automation.name })
|
||||
}
|
||||
await fetchLogs(automationId, status, 0, timeRange, true)
|
||||
// Open the first automation info if one exists
|
||||
if (shouldOpen && runHistory?.[0]) {
|
||||
viewDetails({ detail: runHistory[0] })
|
||||
}
|
||||
loaded = true
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
sidePanel.close()
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Automation History</Heading>
|
||||
<Body>View the automations your app has executed</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
|
||||
<div class="controls">
|
||||
<div class="search">
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Status"
|
||||
bind:value={status}
|
||||
options={statusOptions}
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Automation"
|
||||
bind:value={automationId}
|
||||
options={automationOptions}
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Date range"
|
||||
bind:value={timeRange}
|
||||
options={timeOptions}
|
||||
isOptionEnabled={x => {
|
||||
if (licensePlan?.type === Constants.PlanType.FREE) {
|
||||
return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
|
||||
} else if (licensePlan?.type === Constants.PlanType.TEAM) {
|
||||
return ["90-d"].indexOf(x.value) < 0
|
||||
} else if (licensePlan?.type === Constants.PlanType.PRO) {
|
||||
return ["30-d", "90-d"].indexOf(x.value) < 0
|
||||
}
|
||||
return true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
|
||||
<Button secondary on:click={$licensing.goToUpgradePage()}>
|
||||
Get more history
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if runHistory}
|
||||
<div>
|
||||
<Table
|
||||
on:click={viewDetails}
|
||||
schema={runHistorySchema}
|
||||
allowSelectRows={false}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
data={runHistory}
|
||||
{customRenderers}
|
||||
placeholderText="No history found"
|
||||
border={false}
|
||||
/>
|
||||
<div class="pagination">
|
||||
<Pagination
|
||||
page={$pageInfo.pageNumber}
|
||||
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
|
||||
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
|
||||
goToPrevPage={pageInfo.prevPage}
|
||||
goToNextPage={pageInfo.nextPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
|
||||
{#if selectedHistory}
|
||||
<Portal target="#side-panel">
|
||||
<HistoryDetailsPanel
|
||||
appId={$store.appId}
|
||||
bind:history={selectedHistory}
|
||||
close={sidePanel.close}
|
||||
/>
|
||||
</Portal>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: flex-start;
|
||||
flex: 1 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.select {
|
||||
flex: 1 1 0;
|
||||
max-width: 150px;
|
||||
min-width: 80px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<script>
|
||||
import {
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
Icon,
|
||||
Heading,
|
||||
Body,
|
||||
Modal,
|
||||
} from "@budibase/bbui"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import CreateRestoreModal from "./CreateRestoreModal.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let row
|
||||
|
||||
let deleteDialog
|
||||
let restoreDialog
|
||||
let restoreBackupModal
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
const onClickRestore = () => {
|
||||
dispatch("buttonclick", {
|
||||
type: "backupRestore",
|
||||
backupId: row._id,
|
||||
})
|
||||
}
|
||||
|
||||
const onClickDelete = () => {
|
||||
dispatch("buttonclick", {
|
||||
type: "backupDelete",
|
||||
backupId: row._id,
|
||||
})
|
||||
}
|
||||
|
||||
async function downloadExport() {
|
||||
window.open(`/api/apps/${row.appId}/backups/${row._id}/file`, "_blank")
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<ActionMenu align="right">
|
||||
<div slot="control">
|
||||
<Icon size="M" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
|
||||
{#if row.type !== "restore"}
|
||||
<MenuItem on:click={restoreDialog.show} icon="Revert">Restore</MenuItem>
|
||||
<MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
|
||||
<MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
|
||||
{/if}
|
||||
</ActionMenu>
|
||||
</div>
|
||||
|
||||
<Modal bind:this={restoreBackupModal}>
|
||||
<CreateRestoreModal confirm={onClickRestore} />
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={deleteDialog}
|
||||
okText="Delete Backup"
|
||||
onOk={onClickDelete}
|
||||
title="Confirm Deletion"
|
||||
>
|
||||
Are you sure you wish to delete this backup? This action cannot be undone.
|
||||
</ConfirmDialog>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={restoreDialog}
|
||||
okText="Continue"
|
||||
onOk={restoreBackupModal?.show}
|
||||
title="Confirm restore"
|
||||
warning={false}
|
||||
>
|
||||
<Heading size="S">Backup</Heading>
|
||||
<Body size="S">{new Date(row.timestamp).toLocaleString()}</Body>
|
||||
</ConfirmDialog>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let row
|
||||
|
||||
$: automations = row?.automations
|
||||
$: datasources = row?.datasources
|
||||
$: screens = row?.screens
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{#if automations != null && screens != null && datasources != null}
|
||||
<div class="item">
|
||||
<Icon name="Data" />
|
||||
<div>{datasources || 0}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<Icon name="WebPage" />
|
||||
<div>{screens || 0}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<Icon name="JourneyVoyager" />
|
||||
<div>{automations || 0}</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: calc(var(--spacing-xl) * 2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
gap: var(--spacing-s);
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
import { ModalContent, Input, Body } from "@budibase/bbui"
|
||||
import { auth } from "stores/portal"
|
||||
|
||||
export let confirm
|
||||
|
||||
let templateName = $auth.user.firstName
|
||||
? `${$auth.user.firstName}'s Backup`
|
||||
: "Restore Backup"
|
||||
let name = templateName
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
onConfirm={() => confirm(name)}
|
||||
title="Back up your current version"
|
||||
confirmText="Confirm Restore"
|
||||
disabled={!name}
|
||||
>
|
||||
<Body size="S"
|
||||
>Create a backup of your current app to allow you to roll back after
|
||||
restoring this backup</Body
|
||||
>
|
||||
<Input label="Backup name" bind:value={name} />
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{#if value != null}
|
||||
<Icon name="Data" />
|
||||
<div>{value || 0}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
import { Badge } from "@budibase/bbui"
|
||||
|
||||
export let value = "started"
|
||||
$: status = value[0].toUpperCase() + value?.slice(1)
|
||||
</script>
|
||||
|
||||
<Badge
|
||||
grey={value === "started" || value === "pending"}
|
||||
green={value === "complete"}
|
||||
red={value === "failed"}
|
||||
size="S"
|
||||
>
|
||||
{status}
|
||||
</Badge>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
import dayjs from "dayjs"
|
||||
import relativeTime from "dayjs/plugin/relativeTime"
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<span title={value}>{dayjs(value).fromNow()}</span>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script>
|
||||
import { BackupTrigger } from "constants/backend/backups"
|
||||
export let row
|
||||
|
||||
$: trigger = row?.trigger || "manual"
|
||||
$: type = row?.type || "backup"
|
||||
|
||||
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">
|
||||
{printTrigger(trigger)}
|
||||
{type}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<script>
|
||||
import { UserAvatar } from "@budibase/frontend-core"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<UserAvatar user={value} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<script>
|
||||
import {
|
||||
Button,
|
||||
DatePicker,
|
||||
Divider,
|
||||
Layout,
|
||||
notifications,
|
||||
Pagination,
|
||||
Select,
|
||||
Heading,
|
||||
Body,
|
||||
Tags,
|
||||
Tag,
|
||||
Table,
|
||||
} from "@budibase/bbui"
|
||||
import { backups, licensing, auth, admin } from "stores/portal"
|
||||
import { store } from "builderStore"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import TimeAgoRenderer from "./_components/TimeAgoRenderer.svelte"
|
||||
import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
|
||||
import ActionsRenderer from "./_components/ActionsRenderer.svelte"
|
||||
import UserRenderer from "./_components/UserRenderer.svelte"
|
||||
import StatusRenderer from "./_components/StatusRenderer.svelte"
|
||||
import TypeRenderer from "./_components/TypeRenderer.svelte"
|
||||
import BackupsDefault from "assets/backups-default.png"
|
||||
import { BackupTrigger, BackupType } from "constants/backend/backups"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let loading = true
|
||||
let backupData = null
|
||||
let pageInfo = createPaginationStore()
|
||||
let filterOpt = null
|
||||
let startDate = null
|
||||
let endDate = null
|
||||
let filters = [
|
||||
{
|
||||
label: "Manual backup",
|
||||
value: { type: BackupType.BACKUP, trigger: BackupTrigger.MANUAL },
|
||||
},
|
||||
{
|
||||
label: "Published backup",
|
||||
value: { type: BackupType.BACKUP, trigger: BackupTrigger.PUBLISH },
|
||||
},
|
||||
{
|
||||
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)
|
||||
|
||||
let schema = {
|
||||
type: {
|
||||
displayName: "Type",
|
||||
width: "auto",
|
||||
},
|
||||
createdAt: {
|
||||
displayName: "Date",
|
||||
width: "auto",
|
||||
},
|
||||
appSize: {
|
||||
displayName: "App size",
|
||||
width: "auto",
|
||||
},
|
||||
createdBy: {
|
||||
displayName: "User",
|
||||
width: "auto",
|
||||
},
|
||||
status: {
|
||||
displayName: "Status",
|
||||
width: "auto",
|
||||
},
|
||||
actions: {
|
||||
displayName: null,
|
||||
width: "auto",
|
||||
},
|
||||
}
|
||||
|
||||
const customRenderers = [
|
||||
{ column: "appSize", component: AppSizeRenderer },
|
||||
{ column: "actions", component: ActionsRenderer },
|
||||
{ column: "createdAt", component: TimeAgoRenderer },
|
||||
{ column: "createdBy", component: UserRenderer },
|
||||
{ column: "status", component: StatusRenderer },
|
||||
{ column: "type", component: TypeRenderer },
|
||||
]
|
||||
|
||||
function flattenBackups(backups) {
|
||||
return backups.map(backup => {
|
||||
return {
|
||||
...backup,
|
||||
...backup?.contents,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function fetchBackups(filters, page, startDate, endDate) {
|
||||
const response = await backups.searchBackups({
|
||||
appId: $store.appId,
|
||||
...filters,
|
||||
page,
|
||||
startDate,
|
||||
endDate,
|
||||
})
|
||||
pageInfo.fetched(response.hasNextPage, response.nextPage)
|
||||
|
||||
// flatten so we have an easier structure to use for the table schema
|
||||
backupData = flattenBackups(response.data)
|
||||
}
|
||||
|
||||
async function createManualBackup() {
|
||||
try {
|
||||
loading = true
|
||||
let response = await backups.createManualBackup({
|
||||
appId: $store.appId,
|
||||
})
|
||||
await fetchBackups(filterOpt, page)
|
||||
notifications.success(response.message)
|
||||
} catch {
|
||||
notifications.error("Unable to create backup")
|
||||
}
|
||||
}
|
||||
|
||||
const poll = backupData => {
|
||||
if (backupData === null) {
|
||||
return
|
||||
}
|
||||
|
||||
if (backupData.some(datum => datum.status === "started")) {
|
||||
setTimeout(() => fetchBackups(filterOpt, page), 2000)
|
||||
} else {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
|
||||
$: poll(backupData)
|
||||
|
||||
async function handleButtonClick({ detail }) {
|
||||
if (detail.type === "backupDelete") {
|
||||
await backups.deleteBackup({
|
||||
appId: $store.appId,
|
||||
backupId: detail.backupId,
|
||||
})
|
||||
await fetchBackups(filterOpt, page)
|
||||
} else if (detail.type === "backupRestore") {
|
||||
await backups.restoreBackup({
|
||||
appId: $store.appId,
|
||||
backupId: detail.backupId,
|
||||
name: detail.restoreBackupName,
|
||||
})
|
||||
await fetchBackups(filterOpt, page)
|
||||
} else if (detail.type === "backupUpdate") {
|
||||
await backups.updateBackup({
|
||||
appId: $store.appId,
|
||||
backupId: detail.backupId,
|
||||
name: detail.name,
|
||||
})
|
||||
await fetchBackups(filterOpt, page)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await fetchBackups(filterOpt, page, startDate, endDate)
|
||||
loading = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="title">
|
||||
<Heading>Backups</Heading>
|
||||
{#if !$licensing.backupsEnabled}
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">Premium</Tag>
|
||||
</Tags>
|
||||
{/if}
|
||||
</div>
|
||||
<Body>Back up your apps and restore them to their previous state</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
|
||||
{#if !$licensing.backupsEnabled}
|
||||
{#if !$auth.accountPortalAccess && $admin.cloud}
|
||||
<Body>Contact your account holder to upgrade your plan.</Body>
|
||||
{/if}
|
||||
<div class="pro-buttons">
|
||||
{#if $auth.accountPortalAccess}
|
||||
<Button
|
||||
primary
|
||||
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 && !loading && !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>
|
||||
<Button cta disabled={loading} on:click={createManualBackup}>
|
||||
Create backup
|
||||
</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
{:else}
|
||||
<Layout noPadding gap="M" alignContent="start">
|
||||
<div class="controls">
|
||||
<div class="search">
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Type"
|
||||
options={filters}
|
||||
getOptionValue={filter => filter.value}
|
||||
getOptionLabel={filter => filter.label}
|
||||
bind:value={filterOpt}
|
||||
/>
|
||||
</div>
|
||||
<DatePicker
|
||||
range={true}
|
||||
label="Date Range"
|
||||
on:change={e => {
|
||||
if (e.detail[0].length > 1) {
|
||||
startDate = e.detail[0][0].toISOString()
|
||||
endDate = e.detail[0][1].toISOString()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button cta disabled={loading} on:click={createManualBackup}
|
||||
>Create new backup</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<Table
|
||||
{schema}
|
||||
disableSorting
|
||||
allowSelectRows={false}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
data={backupData}
|
||||
{customRenderers}
|
||||
placeholderText="No backups found"
|
||||
border={false}
|
||||
on:buttonclick={handleButtonClick}
|
||||
/>
|
||||
<div class="pagination">
|
||||
<Pagination
|
||||
page={$pageInfo.pageNumber}
|
||||
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
|
||||
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
|
||||
goToPrevPage={pageInfo.prevPage}
|
||||
goToNextPage={pageInfo.nextPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
{/if}
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: flex-end;
|
||||
}
|
||||
.search :global(.spectrum-InputGroup) {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.select {
|
||||
flex-basis: 160px;
|
||||
width: 0;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.pro-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Table,
|
||||
Select,
|
||||
Pagination,
|
||||
Button,
|
||||
Body,
|
||||
Heading,
|
||||
Divider,
|
||||
} from "@budibase/bbui"
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Embed</Heading>
|
||||
<Body>View the automations your app has executed</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<script>
|
||||
import { redirect } from "@roxi/routify"
|
||||
$redirect("../settings/automation-history")
|
||||
</script>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Divider,
|
||||
Heading,
|
||||
Body,
|
||||
Button,
|
||||
Label,
|
||||
Modal,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import { AppStatus } from "constants"
|
||||
import { store } from "builderStore"
|
||||
import { apps } from "stores/portal"
|
||||
import UpdateAppModal from "components/start/UpdateAppModal.svelte"
|
||||
|
||||
let updatingModal
|
||||
|
||||
$: filteredApps = $apps.filter(app => app.devId == $store.appId)
|
||||
$: app = filteredApps.length ? filteredApps[0] : {}
|
||||
$: appUrl = `${window.origin}/app${app?.url}`
|
||||
$: appDeployed = app?.status === AppStatus.DEPLOYED
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Name and URL</Heading>
|
||||
<Body>Edit your app's name and URL</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
|
||||
<Layout noPadding gap="XXS">
|
||||
<Label size="L">Name</Label>
|
||||
<Body>{app?.name}</Body>
|
||||
</Layout>
|
||||
|
||||
<Layout noPadding gap="XS">
|
||||
<Label size="L">Icon</Label>
|
||||
<div class="icon">
|
||||
<Icon
|
||||
size="L"
|
||||
name={app?.icon?.name || "Apps"}
|
||||
color={app?.icon?.color}
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<Layout noPadding gap="XXS">
|
||||
<Label size="L">URL</Label>
|
||||
<Body>{appUrl}</Body>
|
||||
</Layout>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
cta
|
||||
on:click={() => {
|
||||
updatingModal.show()
|
||||
}}
|
||||
disabled={appDeployed}
|
||||
tooltip={appDeployed
|
||||
? "You must unpublish your app to make changes to these settings"
|
||||
: null}
|
||||
icon={appDeployed ? "HelpOutline" : null}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<Modal bind:this={updatingModal} padding={false} width="600px">
|
||||
<UpdateAppModal {app} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<script>
|
||||
import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import VersionModal from "components/deploy/VersionModal.svelte"
|
||||
|
||||
let versionModal
|
||||
|
||||
$: updateAvailable = $store.upgradableVersion !== $store.version
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Version</Heading>
|
||||
<Body>See the current version of your app and check for updates</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
{#if updateAvailable}
|
||||
<Body>
|
||||
The app is currently using version <strong>{$store.version}</strong>
|
||||
but version <strong>{$store.upgradableVersion}</strong> is available.
|
||||
<br />
|
||||
Updates can contain new features, performance improvements and bug fixes.
|
||||
</Body>
|
||||
<div>
|
||||
<Button cta on:click={versionModal.show}>Update app</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<Body>
|
||||
The app is currently using version <strong>{$store.version}</strong>.
|
||||
<br />
|
||||
You're running the latest!
|
||||
</Body>
|
||||
<div>
|
||||
<Button secondary on:click={versionModal.show}>Revert app</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
|
||||
<VersionModal bind:this={versionModal} hideIcon={true} />
|
||||
Loading…
Reference in New Issue