Updating rendering of table - as per Andy's new designs based on the restore event.

packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte

@@ -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 align="right">
-  <ActionMenu>
     <div slot="control">
       <Icon size="M" hoverable name="MoreSmallList" />
     </div>
 
-    <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
+    {#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}
     <MenuItem on:click={updateDialog.show} icon="Edit">Update</MenuItem>
-    <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
   </ActionMenu>
 </div>
 

packages/builder/src/components/portal/overview/backups/AppSizeRenderer.svelte

@@ -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>

packages/builder/src/components/portal/overview/backups/BackupsTab.svelte

@@ -12,14 +12,13 @@
   import { backups } from "stores/portal"
   import { createPaginationStore } from "helpers/pagination"
 
-  import DatasourceRenderer from "./DatasourceRenderer.svelte"
+  import AppSizeRenderer from "./AppSizeRenderer.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"
   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: {
+    type: {
-      displayName: "Trigger",
+      displayName: "Type",
-    },
-    days: {
-      displayName: null,
-    },
-
-    name: {
-      displayName: "Name",
     },
     createdAt: {
       displayName: "Date",
     },
-    datasources: {
+    name: {
-      displayName: "Data",
+      displayName: "Name",
     },
-    screens: {
+    appSize: {
-      displayName: "Screens",
+      displayName: "App size",
     },
-    automations: {
+    createdBy: {
-      displayName: "Automations",
-    },
-    userId: {
       displayName: "User",
     },
+    status: {
+      displayName: "Status",
+    },
     actions: {
       displayName: null,
     },
   }
 
   const customRenderers = [
-    { column: "datasources", component: DatasourceRenderer },
+    { column: "appSize", component: AppSizeRenderer },
-    { column: "screens", component: ScreensRenderer },
-    { column: "automations", component: AutomationsRenderer },
-    { column: "trigger", component: TriggerRenderer },
     { 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,

packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte

@@ -5,8 +5,10 @@
 </script>
 
 <div class="cell">
-  <Icon name="Data" />
+  {#if value != null}
-  <div>{value || 0}</div>
+    <Icon name="Data" />
+    <div>{value || 0}</div>
+  {/if}
 </div>
 
 <style>

packages/builder/src/components/portal/overview/backups/DateRenderer.svelte

@@ -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>

packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte

@@ -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>

packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte

@@ -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>

packages/builder/src/components/portal/overview/backups/StatusRenderer.svelte

@@ -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>

packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte

@@ -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>

packages/builder/src/components/portal/overview/backups/TypeRenderer.svelte

@@ -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>

packages/builder/src/components/portal/overview/backups/UserRenderer.svelte

@@ -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" />
+  {#if value != null}
-  <div>{value || 0}</div>
+    <div>{username}</div>
+  {/if}
 </div>
 
 <style>

packages/frontend-core/src/api/backups.js

@@ -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,