MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updating UI after pulling in latest changes.

This commit is contained in:
mike12345567 2022-05-27 17:11:41 +01:00
parent f9ce10cf65
commit c01c35386b
7 changed files with 54 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/builder/src/components/portal/overview/HistoryDetailsPanel.svelte
View File

@ -1,35 +1,29 @@
<script> <script>
import { Body, Layout, Icon, ActionButton, Heading } from "@budibase/bbui" import { Layout, Icon, ActionButton } from "@budibase/bbui"
import { capitalise } from "helpers"
import StatusRenderer from "components/portal/overview/StatusRenderer.svelte" import StatusRenderer from "components/portal/overview/StatusRenderer.svelte"
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte" import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
import FlowItemHeader from "components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte" import FlowItemHeader from "components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte"
export let history export let history
export let close export let close
$: console.log(history)
</script> </script>
{#if history} {#if history}
<div class="body"> <div class="body">
<div class="top"> <div class="top">
<div class="controls"> <div class="controls">
<Icon name="Clock" /> <StatusRenderer value={history.status} />
<Body>Run log details</Body>
<ActionButton noPadding size="S" icon="Close" quiet on:click={close} /> <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
</div> </div>
</div> </div>
<Layout paddingX="XL" gap="S"> <Layout paddingX="XL" gap="S">
<Heading>{capitalise(history.appName || "")}</Heading>
<StatusRenderer value={history.status} />
<div class="icon"> <div class="icon">
<Icon name="Clock" /> <Icon name="Clock" />
<DateTimeRenderer value={history.timestamp} /> <DateTimeRenderer value={history.timestamp} />
</div> </div>
<div class="icon"> <div class="icon">
<Icon name="JourneyVoyager" /> <Icon name="JourneyVoyager" />
<Body>{history.name}</Body> <div>{history.name}</div>
</div> </div>
<div> <div>
<ActionButton icon="Edit" fullWidth={false} <ActionButton icon="Edit" fullWidth={false}
@ -39,12 +33,12 @@
</Layout> </Layout>
<div class="bottom"> <div class="bottom">
{#each history.steps as step} {#each history.steps as step}
<FlowItemHeader useResultsModal={false} block={step} /> <FlowItemHeader block={step} />
{/each} {/each}
</div> </div>
</div> </div>
{:else} {:else}
<Body>No details found</Body> <div>No details found</div>
{/if} {/if}
<style> <style>
@ -56,13 +50,14 @@
} }
.top { .top {
padding: var(--spacing-l) 0 var(--spacing-l) 0; padding: var(--spacing-m) 0 var(--spacing-m) 0;
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
.bottom { .bottom {
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
border-top: var(--border-light); border-top: var(--border-light);
height: 100%;
} }
.icon { .icon {
@ -73,7 +68,7 @@
.controls { .controls {
padding: 0 var(--spacing-l) 0 var(--spacing-l); padding: 0 var(--spacing-l) 0 var(--spacing-l);
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: 1fr auto;
gap: var(--spacing-s); gap: var(--spacing-s);
} }
</style> </style>

10
packages/builder/src/components/portal/overview/HistoryTab.svelte
View File

@ -15,7 +15,6 @@
const runHistorySchema = { const runHistorySchema = {
status: { displayName: "Status" }, status: { displayName: "Status" },
timestamp: { displayName: "Time" }, timestamp: { displayName: "Time" },
appName: { displayName: "App" },
name: { displayName: "Automation" }, name: { displayName: "Automation" },
} }
@ -59,7 +58,6 @@
{ {
status: "Error", status: "Error",
timestamp: "2022-05-11T16:06:14.438Z", timestamp: "2022-05-11T16:06:14.438Z",
appName: "App name",
name: "automation name", name: "automation name",
steps: [ steps: [
{ {
@ -76,7 +74,6 @@
{ {
status: "Success", status: "Success",
timestamp: "2022-05-11T16:03:14.438Z", timestamp: "2022-05-11T16:03:14.438Z",
appName: "App name",
name: "automation name", name: "automation name",
steps: [ steps: [
{ {
@ -137,7 +134,7 @@
} }
.panelOpen { .panelOpen {
grid-template-columns: 1fr 360px; grid-template-columns: auto 360px;
} }
.search { .search {
@ -161,9 +158,12 @@
.panel { .panel {
display: none; display: none;
position: absolute;
right: 0; right: 0;
height: 100%; height: 100%;
width: 100%; width: 360px;
overflow: hidden;
background-color: var(--background);
} }
.panelShow { .panelShow {

24
packages/builder/src/components/portal/overview/StatusRenderer.svelte
View File

@ -1,25 +1,31 @@
<script> <script>
import { Icon, Body } from "@budibase/bbui" import { Icon } from "@budibase/bbui"
export let value export let value
$: isError = value === "Error" $: isError = value === "Error"
$: color = isError
? "var(--spectrum-semantic-negative-color-background)"
: "var(--green)"
</script> </script>
<div class="cell"> <div class="cell">
<Icon <Icon {color} name={isError ? "Alert" : "CheckmarkCircle"} />
color={isError <div class:green={!isError} class:red={isError}>{value}</div>
? "var(--spectrum-semantic-negative-color-background)"
: "var(--green)"}
name={isError ? "Alert" : "CheckmarkCircle"}
/>
<Body>{value}</Body>
</div> </div>
<style> <style>
.cell { .cell {
color: var(--spectrum-semantic-negative-color-background);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: var(--spacing-m); gap: var(--spacing-m);
align-items: center;
}
.green {
color: var(--green);
}
.red {
color: var(--spectrum-semantic-negative-color-background);
} }
</style> </style>

39
packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
View File

@ -26,8 +26,8 @@
import { AppStatus } from "constants" import { AppStatus } from "constants"
import AppLockModal from "components/common/AppLockModal.svelte" import AppLockModal from "components/common/AppLockModal.svelte"
import EditableIcon from "components/common/EditableIcon.svelte" import EditableIcon from "components/common/EditableIcon.svelte"
import HistoryTab from "components/portal/overview/HistoryTab.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import HistoryTab from "components/portal/overview/HistoryTab.svelte"
import { checkIncomingDeploymentStatus } from "components/deploy/utils" import { checkIncomingDeploymentStatus } from "components/deploy/utils"
import { onDestroy, onMount } from "svelte" import { onDestroy, onMount } from "svelte"
@ -110,7 +110,7 @@
reviewPendingDeployments(deployments, newDeployments) reviewPendingDeployments(deployments, newDeployments)
return newDeployments return newDeployments
} catch (err) { } catch (err) {
notifications.error("Error fetching deployment overview") notifications.error("Error fetching deployment history")
} }
} }
@ -215,7 +215,7 @@
<ProgressCircle size="XL" /> <ProgressCircle size="XL" />
</div> </div>
{:then _} {:then _}
<Layout paddingX="XXL" paddingY="XXL" gap="XL"> <Layout paddingX="XXL" paddingY="XL" gap="L">
<span class="page-header" class:loaded> <span class="page-header" class:loaded>
<ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}> <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
Back Back
@ -292,32 +292,6 @@
</ActionMenu> </ActionMenu>
</div> </div>
</div> </div>
<div class="header-right">
<AppLockModal app={selectedApp} />
<ButtonGroup gap="XS">
<Button
size="M"
secondary
icon="Globe"
disabled={!isPublished}
on:click={viewApp}
dataCy="view-app"
>
View app
</Button>
<Button
size="M"
cta
icon="Edit"
disabled={lockedBy && !lockedByYou}
on:click={() => {
editApp(selectedApp)
}}
>
<span>Edit</span>
</Button>
</ButtonGroup>
</div>
</Layout> </Layout>
<div class="tab-wrap"> <div class="tab-wrap">
<Tabs <Tabs
@ -342,13 +316,6 @@
<div class="container">Backups contents</div> <div class="container">Backups contents</div>
</Tab> </Tab>
{/if} {/if}
<Tab title="Overview">
<OverviewTab
app={selectedApp}
deployments={latestDeployments}
navigateTab={handleTabChange}
/>
</Tab>
<Tab title="Settings"> <Tab title="Settings">
<SettingsTab app={selectedApp} /> <SettingsTab app={selectedApp} />
</Tab> </Tab>

10
packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
View File

@ -47,18 +47,18 @@
} }
</script> </script>
<div className="overview-tab"> <div class="overview-tab">
<Layout paddingX="XXL" paddingY="XXL" gap="XL"> <Layout paddingX="XXL" paddingY="XXL" gap="XL">
<div className="top"> <div class="top">
<DashCard title={"App Status"} dataCy={"app-status"}> <DashCard title={"App Status"} dataCy={"app-status"}>
<div className="status-content"> <div class="status-content">
<div className="status-display"> <div class="status-display">
{#if isPublished} {#if isPublished}
<Icon name="GlobeCheck" size="XL" disabled={false} /> <Icon name="GlobeCheck" size="XL" disabled={false} />
<span>Published</span> <span>Published</span>
{:else} {:else}
<Icon name="GlobeStrike" size="XL" disabled={true} /> <Icon name="GlobeStrike" size="XL" disabled={true} />
<span className="disabled"> Unpublished </span> <span class="disabled"> Unpublished </span>
{/if} {/if}
</div> </div>

18
packages/server/yarn.lock
View File

@ -1014,10 +1014,10 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@budibase/backend-core@1.0.188-alpha.0": "@budibase/backend-core@1.0.188-alpha.1":
version "1.0.188-alpha.0" version "1.0.188-alpha.1"
resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.0.tgz#1799eb96756a59606ab87ffc923e00af1733f00a" resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.1.tgz#46eaa947ca9f62d9ca75188e59039e1cad356212"
integrity sha512-0L8WRjyDEmUf7VFAUtKd5ddyyA+3JyzjMm43AiMjD3rhHbjwZQBlxxP0q3BBaeobM5FBf3xUzYQ+8qRDUJtcQQ== integrity sha512-0JB0LZTqjKyPdziiDGOxvhaVUA3YfK7SkbdHSA7wgh6XAqpWn1dHf9NnE2LIT2Mmqd0YLtkmRy0mmI6/928AGQ==
dependencies: dependencies:
"@techpass/passport-openidconnect" "^0.3.0" "@techpass/passport-openidconnect" "^0.3.0"
aws-sdk "^2.901.0" aws-sdk "^2.901.0"
@ -1092,12 +1092,12 @@
svelte-flatpickr "^3.2.3" svelte-flatpickr "^3.2.3"
svelte-portal "^1.0.0" svelte-portal "^1.0.0"
"@budibase/pro@1.0.188-alpha.0": "@budibase/pro@1.0.188-alpha.1":
version "1.0.188-alpha.0" version "1.0.188-alpha.1"
resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.0.tgz#30fdaf06e11b5ddff35cd484c1bf226cc2df78cd" resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.1.tgz#f23b9b95190cbb785aca88aa31dc593602d2288b"
integrity sha512-pWkHYTqxmMTYaLYOi3TwoI0Rdz539dR40GuhnnKN4rsX5aL+dxcKTartscTJlZGvY+rrk1Cfbq2LLbGSRWDdIA== integrity sha512-kFeQU5ePBaxN5xuPCuVpLgCZhIMxGoOyY60iYdvpldB4aVBkO5bmSeJ5Mbrdf/HwuF8K+wQoG5AA9+vd2lElMg==
dependencies: dependencies:
"@budibase/backend-core" "1.0.188-alpha.0" "@budibase/backend-core" "1.0.188-alpha.1"
node-fetch "^2.6.1" node-fetch "^2.6.1"
"@budibase/standard-components@^0.9.139": "@budibase/standard-components@^0.9.139":

18
packages/worker/yarn.lock
View File

@ -293,10 +293,10 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@budibase/backend-core@1.0.188-alpha.0": "@budibase/backend-core@1.0.188-alpha.1":
version "1.0.188-alpha.0" version "1.0.188-alpha.1"
resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.0.tgz#1799eb96756a59606ab87ffc923e00af1733f00a" resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.1.tgz#46eaa947ca9f62d9ca75188e59039e1cad356212"
integrity sha512-0L8WRjyDEmUf7VFAUtKd5ddyyA+3JyzjMm43AiMjD3rhHbjwZQBlxxP0q3BBaeobM5FBf3xUzYQ+8qRDUJtcQQ== integrity sha512-0JB0LZTqjKyPdziiDGOxvhaVUA3YfK7SkbdHSA7wgh6XAqpWn1dHf9NnE2LIT2Mmqd0YLtkmRy0mmI6/928AGQ==
dependencies: dependencies:
"@techpass/passport-openidconnect" "^0.3.0" "@techpass/passport-openidconnect" "^0.3.0"
aws-sdk "^2.901.0" aws-sdk "^2.901.0"
@ -322,12 +322,12 @@
uuid "^8.3.2" uuid "^8.3.2"
zlib "^1.0.5" zlib "^1.0.5"
"@budibase/pro@1.0.188-alpha.0": "@budibase/pro@1.0.188-alpha.1":
version "1.0.188-alpha.0" version "1.0.188-alpha.1"
resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.0.tgz#30fdaf06e11b5ddff35cd484c1bf226cc2df78cd" resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.1.tgz#f23b9b95190cbb785aca88aa31dc593602d2288b"
integrity sha512-pWkHYTqxmMTYaLYOi3TwoI0Rdz539dR40GuhnnKN4rsX5aL+dxcKTartscTJlZGvY+rrk1Cfbq2LLbGSRWDdIA== integrity sha512-kFeQU5ePBaxN5xuPCuVpLgCZhIMxGoOyY60iYdvpldB4aVBkO5bmSeJ5Mbrdf/HwuF8K+wQoG5AA9+vd2lElMg==
dependencies: dependencies:
"@budibase/backend-core" "1.0.188-alpha.0" "@budibase/backend-core" "1.0.188-alpha.1"
node-fetch "^2.6.1" node-fetch "^2.6.1"
"@cspotcode/source-map-consumer@0.8.0": "@cspotcode/source-map-consumer@0.8.0":