Updating rendering of table - as per Andy's new designs based on the restore event.
This commit is contained in:
mike12345567
parent
7822fadd12
commit
d4d69f92c1
|
|
@ -1,6 +1,5 @@
|
|||
<script>
|
||||
import {
|
||||
ActionButton,
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
Icon,
|
||||
|
|
@ -55,15 +54,17 @@
|
|||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<ActionButton on:click={restoreDialog.show}>Restore</ActionButton>
|
||||
<ActionMenu>
|
||||
<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={updateDialog.show} icon="Edit">Update</MenuItem>
|
||||
<MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
|
||||
{/if}
|
||||
<MenuItem on:click={updateDialog.show} icon="Edit">Update</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -12,14 +12,13 @@
|
|||
import { backups } from "stores/portal"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
|
||||
import DatasourceRenderer from "./DatasourceRenderer.svelte"
|
||||
import ScreensRenderer from "./ScreensRenderer.svelte"
|
||||
import AutomationsRenderer from "./AutomationsRenderer.svelte"
|
||||
import AppSizeRenderer from "./AppSizeRenderer.svelte"
|
||||
import CreateBackupModal from "./CreateBackupModal.svelte"
|
||||
import TriggerRenderer from "./TriggerRenderer.svelte"
|
||||
import ActionsRenderer from "./ActionsRenderer.svelte"
|
||||
import DateRenderer from "./DateRenderer.svelte"
|
||||
import DaysRenderer from "./DaysRenderer.svelte"
|
||||
import UserRenderer from "./UserRenderer.svelte"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import TypeRenderer from "./TypeRenderer.svelte"
|
||||
|
||||
export let app
|
||||
|
||||
|
|
@ -38,66 +37,47 @@
|
|||
}
|
||||
|
||||
const schema = {
|
||||
trigger: {
|
||||
displayName: "Trigger",
|
||||
},
|
||||
days: {
|
||||
displayName: null,
|
||||
},
|
||||
|
||||
name: {
|
||||
displayName: "Name",
|
||||
type: {
|
||||
displayName: "Type",
|
||||
},
|
||||
createdAt: {
|
||||
displayName: "Date",
|
||||
},
|
||||
datasources: {
|
||||
displayName: "Data",
|
||||
name: {
|
||||
displayName: "Name",
|
||||
},
|
||||
screens: {
|
||||
displayName: "Screens",
|
||||
appSize: {
|
||||
displayName: "App size",
|
||||
},
|
||||
automations: {
|
||||
displayName: "Automations",
|
||||
},
|
||||
userId: {
|
||||
createdBy: {
|
||||
displayName: "User",
|
||||
},
|
||||
status: {
|
||||
displayName: "Status",
|
||||
},
|
||||
actions: {
|
||||
displayName: null,
|
||||
},
|
||||
}
|
||||
|
||||
const customRenderers = [
|
||||
{ column: "datasources", component: DatasourceRenderer },
|
||||
{ column: "screens", component: ScreensRenderer },
|
||||
{ column: "automations", component: AutomationsRenderer },
|
||||
{ column: "trigger", component: TriggerRenderer },
|
||||
{ column: "appSize", component: AppSizeRenderer },
|
||||
{ column: "actions", component: ActionsRenderer },
|
||||
{ column: "createdAt", component: DateRenderer },
|
||||
{ column: "days", component: DaysRenderer },
|
||||
{ column: "createdBy", component: UserRenderer },
|
||||
{ column: "status", component: StatusRenderer },
|
||||
{ column: "type", component: TypeRenderer },
|
||||
]
|
||||
|
||||
function flattenBackups(backups) {
|
||||
return backups.map(backup => {
|
||||
return {
|
||||
...backup,
|
||||
days: getDaysBetween(backup.timestamp),
|
||||
...backup?.contents,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getDaysBetween(date) {
|
||||
const now = new Date()
|
||||
const backupDate = new Date(date)
|
||||
backupDate.setDate(backupDate.getDate() - 1)
|
||||
const oneDay = 24 * 60 * 60 * 1000
|
||||
return now > backupDate
|
||||
? Math.round(Math.abs((now - backupDate) / oneDay))
|
||||
: 0
|
||||
}
|
||||
|
||||
async function fetchBackups(trigger, page) {
|
||||
const response = await backups.searchBackups({
|
||||
appId: app.instance._id,
|
||||
|
|
@ -123,6 +103,7 @@
|
|||
}
|
||||
|
||||
async function handleButtonClick({ detail }) {
|
||||
console.log(detail.type)
|
||||
if (detail.type === "backupDelete") {
|
||||
await backups.deleteBackup({
|
||||
appId: app.instance._id,
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@
|
|||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{#if value != null}
|
||||
<Icon name="Data" />
|
||||
<div>{value || 0}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
<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">
|
||||
<DateTimeRenderer {value} />
|
||||
{timeSince} - <DateTimeRenderer {value} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<script>
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{value}
|
||||
{`day${value == 1 ? "" : "s"} ago`}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon name="WebPage" />
|
||||
<div>{value || 0}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
import { Badge } from "@budibase/bbui"
|
||||
|
||||
export let value = "started"
|
||||
$: status = value.charAt(0).toUpperCase() + value.slice(1)
|
||||
</script>
|
||||
|
||||
<Badge green={value === "complete"} red={value === "failed"} size="S">
|
||||
{status}
|
||||
</Badge>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
$: console.log(value)
|
||||
let trigger = value?.charAt(0).toUpperCase() + value?.slice(1)
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{#if value === "publish"}
|
||||
<Icon name="GlobeCheck" />
|
||||
<div>{trigger}</div>
|
||||
{:else if value === "manual"}
|
||||
<Icon name="SaveFloppy" />
|
||||
<div>{trigger}</div>
|
||||
{:else if value === "scheduled"}
|
||||
<Icon name="Clock" />
|
||||
<div>{trigger}</div>
|
||||
{:else if value === "restore"}
|
||||
<Icon name="Refresh" />
|
||||
<div>{trigger}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
export let row
|
||||
|
||||
$: baseTrig = row?.trigger || "manual"
|
||||
$: type = row?.type || "backup"
|
||||
$: trigger = baseTrig.charAt(0).toUpperCase() + baseTrig.slice(1)
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
{trigger}
|
||||
{type}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
$: username = value?.firstName
|
||||
? `${value?.firstName} ${value?.lastName}`
|
||||
: value?.email
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon name="JourneyVoyager" />
|
||||
<div>{value || 0}</div>
|
||||
{#if value != null}
|
||||
<div>{username}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -10,12 +10,10 @@ export const buildBackupsEndpoints = API => ({
|
|||
if (trigger) {
|
||||
opts.trigger = trigger.toLowerCase()
|
||||
}
|
||||
|
||||
if (startDate) {
|
||||
opts.startDate = startDate
|
||||
opts.endDate = endDate
|
||||
}
|
||||
console.log(opts)
|
||||
return await API.post({
|
||||
url: `/api/apps/${appId}/backups/search`,
|
||||
body: opts,
|
||||
|
|
|
|||
Loading…
Reference in New Issue