deployment history rendering in side bar

6 years ago · b0c8d570bc
2 changed files with 126 additions and 16 deletions
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@ -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>
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@ -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>