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