Update overview automation history tab
This commit is contained in:
parent
3f7a7eda16
commit
bbf41f9656
16 changed files with 134 additions and 154 deletions
|
@ -57,15 +57,13 @@
|
|||
<Button cta on:click={publishModal.show}>Publish</Button>
|
||||
<Modal bind:this={publishModal}>
|
||||
<ModalContent
|
||||
title="Publish to Production"
|
||||
title="Publish to production"
|
||||
confirmText="Publish"
|
||||
onConfirm={publishApp}
|
||||
dataCy={"deploy-app-modal"}
|
||||
>
|
||||
<span
|
||||
>The changes you have made will be published to the production version of
|
||||
the application.</span
|
||||
>
|
||||
The changes you have made will be published to the production version of the
|
||||
application.
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
|
|
|
@ -1,39 +0,0 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
export let value
|
||||
|
||||
$: isError = !value || value.toLowerCase() === "error"
|
||||
$: isStoppedError = value?.toLowerCase() === "stopped_error"
|
||||
$: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
|
||||
$: status = getStatus(isError, isStopped)
|
||||
|
||||
function getStatus(error, stopped) {
|
||||
if (error) {
|
||||
return { color: "var(--red)", message: "Error", icon: "Alert" }
|
||||
} else if (stopped) {
|
||||
return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
|
||||
} else {
|
||||
return {
|
||||
color: "var(--green)",
|
||||
message: "Success",
|
||||
icon: "CheckmarkCircle",
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon color={status.color} name={status.icon} />
|
||||
<div style={`color: ${status.color};`}>
|
||||
{status.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
//export let app
|
||||
</script>
|
||||
|
||||
<div class="automation-tab" />
|
||||
|
||||
<style>
|
||||
.automation-tab {
|
||||
color: pink;
|
||||
}
|
||||
</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>
|
|
@ -1,21 +1,27 @@
|
|||
<script>
|
||||
import { Layout, Table, Select, Pagination, Button } from "@budibase/bbui"
|
||||
import {
|
||||
Layout,
|
||||
Table,
|
||||
Select,
|
||||
Pagination,
|
||||
Button,
|
||||
Body,
|
||||
Heading,
|
||||
Divider,
|
||||
} from "@budibase/bbui"
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
|
||||
import StatusRenderer from "./_components/StatusRenderer.svelte"
|
||||
import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
|
||||
import { automationStore } from "builderStore"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import { onMount } from "svelte"
|
||||
import dayjs from "dayjs"
|
||||
import { auth, licensing, admin } from "stores/portal"
|
||||
import { auth, licensing, admin, overview } from "stores/portal"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
|
||||
const ERROR = "error",
|
||||
SUCCESS = "success",
|
||||
STOPPED = "stopped"
|
||||
export let app
|
||||
|
||||
$: licensePlan = $auth.user?.license?.plan
|
||||
|
||||
let pageInfo = createPaginationStore()
|
||||
let runHistory = null
|
||||
|
@ -26,6 +32,8 @@
|
|||
let status = null
|
||||
let timeRange = null
|
||||
|
||||
$: licensePlan = $auth.user?.license?.plan
|
||||
$: app = $overview.selectedApp
|
||||
$: page = $pageInfo.page
|
||||
$: fetchLogs(automationId, status, page, timeRange)
|
||||
|
||||
|
@ -47,8 +55,8 @@
|
|||
|
||||
const runHistorySchema = {
|
||||
status: { displayName: "Status" },
|
||||
createdAt: { displayName: "Time" },
|
||||
automationName: { displayName: "Automation" },
|
||||
createdAt: { displayName: "Time" },
|
||||
}
|
||||
|
||||
const customRenderers = [
|
||||
|
@ -124,97 +132,94 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<div class="root" class:panelOpen={showPanel}>
|
||||
<Layout noPadding gap="M" alignContent="start">
|
||||
<div class="search">
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All automations"
|
||||
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 class="select">
|
||||
<Select
|
||||
placeholder="All status"
|
||||
label="Status"
|
||||
bind:value={status}
|
||||
options={statusOptions}
|
||||
/>
|
||||
</div>
|
||||
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
|
||||
<div class="pro-upgrade">
|
||||
<div class="pro-copy">Expand your automation log history</div>
|
||||
<Button primary on:click={$licensing.goToUpgradePage()}>
|
||||
Upgrade
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Automation History</Heading>
|
||||
<Body>View the automations your app has executed</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
|
||||
<div class="search">
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Status"
|
||||
bind:value={status}
|
||||
options={statusOptions}
|
||||
/>
|
||||
</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 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>
|
||||
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
|
||||
<div class="pro-upgrade">
|
||||
<Button secondary on:click={$licensing.goToUpgradePage()}>
|
||||
Get more history
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
<div class="panel" class:panelShow={showPanel}>
|
||||
<HistoryDetailsPanel
|
||||
appId={app.devId}
|
||||
bind:history={selectedHistory}
|
||||
close={() => {
|
||||
showPanel = false
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
|
||||
<div class="panel" class:panelShow={showPanel}>
|
||||
<HistoryDetailsPanel
|
||||
appId={app.devId}
|
||||
bind:history={selectedHistory}
|
||||
close={() => {
|
||||
showPanel = false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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);
|
|
@ -18,14 +18,14 @@
|
|||
} from "@budibase/bbui"
|
||||
import { backups, licensing, auth, admin } from "stores/portal"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import AppSizeRenderer from "./AppSizeRenderer.svelte"
|
||||
import CreateBackupModal from "./CreateBackupModal.svelte"
|
||||
import ActionsRenderer from "./ActionsRenderer.svelte"
|
||||
import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import UserRenderer from "./UserRenderer.svelte"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import TypeRenderer from "./TypeRenderer.svelte"
|
||||
import NameRenderer from "./NameRenderer.svelte"
|
||||
import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
|
||||
import CreateBackupModal from "./_components/CreateBackupModal.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 NameRenderer from "./_components/NameRenderer.svelte"
|
||||
import BackupsDefault from "assets/backups-default.png"
|
||||
import { BackupTrigger, BackupType } from "constants/backend/backups"
|
||||
import { onMount } from "svelte"
|
Loading…
Reference in a new issue