CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 19:43:32 +13:00
Code Issues Projects Releases Wiki Activity

deployment history rendering in side bar

Browse source
This commit is contained in:
Martin McKeaveney 2020-10-17 15:13:25 +01:00
parent a64c1c9ded
commit b0c8d570bc
2 changed files with 126 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
packages/builder/src/components/deploy/DeploymentHistory.svelte Normal file
View file

@ -0,0 +1,122 @@
<script>
import { Heading, Body } from "@budibase/bbui"
const DATE_OPTIONS = {
fullDate: {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
},
timeOnly: {
hour: "numeric",
minute: "numeric",
hour12: true,
},
}
export let deployments
export let appId
const formatDate = (date, format) =>
Intl.DateTimeFormat("en-GB", DATE_OPTIONS[format]).format(date)
</script>
<section class="deployment-history">
<Heading black small style="margin-left: 20px;">Deployment History</Heading>
{#if deployments.length > 0}
<Body small grey>
<a target="_blank" href={`https://${appId}.app.budi.live/${appId}`}>
View Your Deployed App →
</a>
</Body>
{/if}
{#each deployments as deployment}
<article class="deployment">
<div class="deployment-info">
<span class="deploy-date">
{formatDate(deployment.updatedAt, 'fullDate')}
</span>
<span class="deploy-time">
{formatDate(deployment.updatedAt, 'timeOnly')}
</span>
</div>
<div class={`deployment-status ${deployment.status}`}>
{deployment.status}
</div>
</article>
{/each}
</section>
<style>
section > .deployment:nth-child(odd) {
background: var(--grey-1);
}
.deployment-history {
position: absolute;
right: 0;
top: 0;
height: 100vh;
width: 400px;
background: var(--white);
overflow-y: scroll;
}
.deployment {
padding: var(--spacing-l);
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.deployment-info {
display: flex;
flex-direction: column;
margin-right: var(--spacing-s);
}
.deploy-date {
font-size: var(--font-size-m);
}
.deploy-time {
color: var(--grey-7);
font-weight: 500;
font-size: var(--font-size-s);
}
.deployment-status {
font-size: var(--font-size-s);
padding: var(--spacing-s);
border-radius: var(--border-radius-s);
font-weight: 500;
text-transform: lowercase;
width: 80px;
text-align: center;
}
.deployment-status:first-letter {
text-transform: uppercase;
}
a {
color: var(--blue);
font-weight: 500;
}
.SUCCESS {
color: var(--green);
background: var(--green-light);
}
.PENDING {
color: var(--yellow);
background: var(--yellow-light);
}
.FAILURE {
color: var(--red);
background: var(--red-light);
}
</style>

20
packages/builder/src/pages/[application]/deploy/index.svelte
View file

@ -5,6 +5,7 @@
import { notifier } from "builderStore/store/notifications"
import api from "builderStore/api"
import Spinner from "components/common/Spinner.svelte"
import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
import analytics from "analytics"
let deployed = false
@ -43,8 +44,8 @@
async function fetchDeployments() {
try {
const response = api.get(`/api/deployments`)
deployments = await response.json
const response = await api.get(`/api/deployments`)
deployments = await response.json()
} catch (err) {
console.error(err)
notifier.danger("Error fetching deployment history. Please try again.")
@ -74,11 +75,7 @@
<img
src="/_builder/assets/deploy-rocket.jpg"
alt="Rocket flying through sky" />
<section class="deployment-history">
{#each deployments as deployment}
<div>{JSON.stringify(deployment)}</div>
{/each}
</section>
<DeploymentHistory {deployments} />
</section>
<style>
@ -112,13 +109,4 @@
margin-right: auto;
width: 50%;
}
.deployment-history {
height: 100%;
width: 400px;
position: absolute;
right: 0;
background: var(--white);
overflow-y: scroll;
}
</style>