Merge pull request #859 from Budibase/quota-errors

Quota errors

packages/builder/src/components/deploy/DeploymentHistory.svelte

@@ -2,11 +2,17 @@
   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"
 
+  const DeploymentStatus = {
+    SUCCESS: "SUCCESS",
+    PENDING: "PENDING",
+    FAILURE: "FAILURE",
+  }
+
   const DATE_OPTIONS = {
     fullDate: {
       weekday: "long",
@@ -25,6 +31,8 @@
   export let appId
 
   let modal
+  let errorReasonModal
+  let errorReason
   let poll
   let deployments = []
   let deploymentUrl = `https://${appId}.app.budi.live/${appId}`
@@ -32,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)
@@ -43,6 +76,11 @@
     }
   }
 
+  function showErrorReasonModal(err) {
+    errorReason = err
+    errorReasonModal.show()
+  }
+
   onMount(() => {
     fetchDeployments()
     poll = setInterval(fetchDeployments, POLL_INTERVAL)
@@ -56,7 +94,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>
@@ -80,7 +118,14 @@
               <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>
           </div>
         </article>
@@ -91,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) {
@@ -189,5 +242,11 @@
   .FAILURE {
     color: var(--red);
     background: var(--red-light);
+    cursor: pointer;
+  }
+
+  i {
+    position: relative;
+    top: 2px;
   }
 </style>

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({

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 }

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} />
+
+<RichText bind:content {options} />