From 4e54f6d0d105dcc34ffecd8a54d9411be9663b27 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 12 Nov 2020 12:58:05 +0000
Subject: [PATCH 1/2] track quota errors in deployment

---
 .../src/components/deploy/DeploymentHistory.svelte    | 11 ++++++++++-
 packages/server/src/api/controllers/deploy/aws.js     | 10 +++++-----
 packages/server/src/api/controllers/deploy/index.js   |  9 +++------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index 05a2e40fa6..ed7439eef9 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -7,6 +7,12 @@
   import { notifier } from "builderStore/store/notifications"
   import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
 
+  const DeploymentStatus = {
+    SUCCESS: "SUCCESS",
+    PENDING: "PENDING",
+    FAILURE: "FAILURE",
+  }
+
   const DATE_OPTIONS = {
     fullDate: {
       weekday: "long",
@@ -56,7 +62,7 @@
     <header>
       <h4>Deployment History</h4>
       <div class="deploy-div">
-        {#if deployments.some(deployment => deployment.status === 'SUCCESS')}
+        {#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
           <a target="_blank" href={`https://${appId}.app.budi.live/${appId}`}>
             View Your Deployed App →
           </a>
@@ -82,6 +88,9 @@
             <div class={`deployment-status ${deployment.status}`}>
               {deployment.status}
             </div>
+            {#if deployment.status === DeploymentStatus.FAILURE}
+              <span>{deployment.err}</span>
+            {/if}
           </div>
         </article>
       {/each}
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index 9e62f135a1..d478c4efde 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -55,17 +55,17 @@ exports.verifyDeployment = async function({ appId, quota }) {
     }),
   })
 
+  const json = await response.json()
+  if (json.errors) {
+    throw new Error(json.errors)
+  }
+
   if (response.status !== 200) {
     throw new Error(
       `Error fetching temporary credentials for api key: ${env.BUDIBASE_API_KEY}`
     )
   }
 
-  const json = await response.json()
-  if (json.errors) {
-    throw new Error(json.errors)
-  }
-
   // set credentials here, means any time we're verified we're ready to go
   if (json.credentials) {
     AWS.config.update({
diff --git a/packages/server/src/api/controllers/deploy/index.js b/packages/server/src/api/controllers/deploy/index.js
index c3919ebbae..03f91430db 100644
--- a/packages/server/src/api/controllers/deploy/index.js
+++ b/packages/server/src/api/controllers/deploy/index.js
@@ -21,18 +21,15 @@ const DeploymentStatus = {
 // checks that deployments are in a good state, any pending will be updated
 async function checkAllDeployments(deployments) {
   let updated = false
-  function update(deployment, status) {
-    deployment.status = status
-    updated = true
-  }
-
   for (let deployment of Object.values(deployments.history)) {
     // check that no deployments have crashed etc and are now stuck
     if (
       deployment.status === DeploymentStatus.PENDING &&
       Date.now() - deployment.updatedAt > MAX_PENDING_TIME_MS
     ) {
-      update(deployment, DeploymentStatus.FAILURE)
+      deployment.status = status
+      deployment.err = "Timed out"
+      updated = true
     }
   }
   return { updated, deployments }

From a1c3cc6745beb78b915caab9284a933ef4949543 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 13 Nov 2020 14:32:47 +0000
Subject: [PATCH 2/2] show quota errors when deployments fail

---
 .../deploy/DeploymentHistory.svelte           | 62 +++++++++++++++++--
 .../standard-components/src/RichText.svelte   | 32 ++++------
 2 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index ed7439eef9..8068215969 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -2,7 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import Spinner from "components/common/Spinner.svelte"
   import { slide } from "svelte/transition"
-  import { Heading, Body, Button, Modal } from "@budibase/bbui"
+  import { Heading, Body, Button, Modal, ModalContent } from "@budibase/bbui"
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
   import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
@@ -31,6 +31,8 @@
   export let appId
 
   let modal
+  let errorReasonModal
+  let errorReason
   let poll
   let deployments = []
   let deploymentUrl = `https://${appId}.app.budi.live/${appId}`
@@ -38,10 +40,35 @@
   const formatDate = (date, format) =>
     Intl.DateTimeFormat("en-GB", DATE_OPTIONS[format]).format(date)
 
+  // Required to check any updated deployment statuses between polls
+  function checkIncomingDeploymentStatus(current, incoming) {
+    for (let incomingDeployment of incoming) {
+      if (incomingDeployment.status === DeploymentStatus.FAILURE) {
+        const currentDeployment = current.find(
+          deployment => deployment._id === incomingDeployment._id
+        )
+
+        // We have just been notified of an ongoing deployments failure
+        if (
+          !currentDeployment ||
+          currentDeployment.status === DeploymentStatus.PENDING
+        ) {
+          showErrorReasonModal(incomingDeployment.err)
+        }
+      }
+    }
+  }
+
   async function fetchDeployments() {
     try {
       const response = await api.get(`/api/deployments`)
-      deployments = await response.json()
+      const json = await response.json()
+
+      if (deployments.length > 0) {
+        checkIncomingDeploymentStatus(deployments, json)
+      }
+
+      deployments = json
     } catch (err) {
       console.error(err)
       clearInterval(poll)
@@ -49,6 +76,11 @@
     }
   }
 
+  function showErrorReasonModal(err) {
+    errorReason = err
+    errorReasonModal.show()
+  }
+
   onMount(() => {
     fetchDeployments()
     poll = setInterval(fetchDeployments, POLL_INTERVAL)
@@ -86,11 +118,15 @@
               <Spinner size="10" />
             {/if}
             <div class={`deployment-status ${deployment.status}`}>
-              {deployment.status}
+              <span>
+                {deployment.status}
+                {#if deployment.status === DeploymentStatus.FAILURE}
+                  <i
+                    class="ri-information-line"
+                    on:click={() => showErrorReasonModal(deployment.err)} />
+                {/if}
+              </span>
             </div>
-            {#if deployment.status === DeploymentStatus.FAILURE}
-              <span>{deployment.err}</span>
-            {/if}
           </div>
         </article>
       {/each}
@@ -100,6 +136,14 @@
 <Modal bind:this={modal} width="30%">
   <CreateWebhookDeploymentModal />
 </Modal>
+<Modal bind:this={errorReasonModal} width="30%">
+  <ModalContent
+    title="Deployment Error"
+    confirmText="OK"
+    showCancelButton={false}>
+    {errorReason}
+  </ModalContent>
+</Modal>
 
 <style>
   .deployment:nth-child(odd) {
@@ -198,5 +242,11 @@
   .FAILURE {
     color: var(--red);
     background: var(--red-light);
+    cursor: pointer;
+  }
+
+  i {
+    position: relative;
+    top: 2px;
   }
 </style>
diff --git a/packages/standard-components/src/RichText.svelte b/packages/standard-components/src/RichText.svelte
index a033d3cc1d..af0c190578 100644
--- a/packages/standard-components/src/RichText.svelte
+++ b/packages/standard-components/src/RichText.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { RichText } from '@budibase/bbui'
+  import { RichText } from "@budibase/bbui"
 
   export let _bb
 
@@ -16,29 +16,19 @@
   // Need to determine what options we want to expose.
 
   let options = {
-    "modules": {
-      "toolbar": [
+    modules: {
+      toolbar: [
         [
           {
-            "header": [
-              1,
-              2,
-              3,
-              false
-            ]
-          }
+            header: [1, 2, 3, false],
+          },
         ],
-        [
-          "bold",
-          "italic",
-          "underline",
-          "strike"
-        ]
-      ]
+        ["bold", "italic", "underline", "strike"],
+      ],
     },
-    "placeholder": "Type something...",
-    "theme": "snow"
+    placeholder: "Type something...",
+    theme: "snow",
   }
 </script>
-  
-  <RichText bind:content {options} />
\ No newline at end of file
+
+<RichText bind:content {options} />