Merge pull request #4684 from Budibase/labday/status-banner

Add status banner + fix templates 403 redirect loop

packages/backend-core/src/cloud/accounts.js

@@ -22,3 +22,18 @@ exports.getAccount = async email => {
 
   return json[0]
 }
+
+exports.getStatus = async () => {
+  const response = await api.get(`/api/status`, {
+    headers: {
+      [Headers.API_KEY]: env.ACCOUNT_PORTAL_API_KEY,
+    },
+  })
+  const json = await response.json()
+
+  if (response.status !== 200) {
+    throw new Error(`Error getting status`)
+  }
+
+  return json
+}

packages/bbui/src/Banner/Banner.svelte

@@ -57,3 +57,10 @@
     </div>
   </div>
 {/if}
+
+<style>
+  .spectrum-Toast {
+    pointer-events: all;
+    width: 100%;
+  }
+</style>

packages/bbui/src/Banner/BannerDisplay.svelte

@@ -0,0 +1,31 @@
+<script>
+  import "@spectrum-css/toast/dist/index-vars.css"
+  import Portal from "svelte-portal"
+  import { banner } from "../Stores/banner"
+  import Banner from "./Banner.svelte"
+  import { fly } from "svelte/transition"
+</script>
+
+<Portal target=".banner-container">
+  <div class="banner">
+    {#if $banner.message}
+      <div transition:fly={{ y: -30 }}>
+        <Banner
+          type={$banner.type}
+          extraButtonText={$banner.extraButtonText}
+          extraButtonAction={$banner.extraButtonAction}
+          on:change={$banner.onChange}
+        >
+          {$banner.message}
+        </Banner>
+      </div>
+    {/if}
+  </div>
+</Portal>
+
+<style>
+  .banner {
+    pointer-events: none;
+    width: 100%;
+  }
+</style>

packages/bbui/src/Stores/banner.js

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store"
+
+export function createBannerStore() {
+  const DEFAULT_CONFIG = {}
+
+  const banner = writable(DEFAULT_CONFIG)
+
+  const show = async (
+    // eslint-disable-next-line
+    config = { message, type, extraButtonText, extraButtonAction, onChange }
+  ) => {
+    banner.update(store => {
+      return {
+        ...store,
+        ...config,
+      }
+    })
+  }
+
+  const showStatus = async () => {
+    const config = {
+      message: "Some systems are experiencing issues",
+      type: "negative",
+      extraButtonText: "View Status",
+      extraButtonAction: () => window.open("https://status.budibase.com/"),
+    }
+
+    await show(config)
+  }
+
+  return {
+    subscribe: banner.subscribe,
+    showStatus,
+  }
+}
+
+export const banner = createBannerStore()

packages/bbui/src/index.js

@@ -60,6 +60,7 @@ export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 export { default as Banner } from "./Banner/Banner.svelte"
+export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
@@ -84,6 +85,7 @@ export { default as clickOutside } from "./Actions/click_outside"
 
 // Stores
 export { notifications, createNotificationStore } from "./Stores/notifications"
+export { banner } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"

packages/builder/src/App.svelte

@@ -1,13 +1,16 @@
 <script>
   import { Router } from "@roxi/routify"
   import { routes } from "../.routify/routes"
-  import { NotificationDisplay } from "@budibase/bbui"
+  import { NotificationDisplay, BannerDisplay } from "@budibase/bbui"
   import { parse, stringify } from "qs"
   import HelpIcon from "components/common/HelpIcon.svelte"
 
   const queryHandler = { parse, stringify }
 </script>
 
+<div class="banner-container" />
+<BannerDisplay />
+
 <NotificationDisplay />
 <Router {routes} config={{ queryHandler }} />
 <div class="modal-container" />

packages/builder/src/stores/portal/admin.js

@@ -1,6 +1,7 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
 import { auth } from "stores/portal"
+import { banner } from "@budibase/bbui"
 
 export function createAdminStore() {
   const DEFAULT_CONFIG = {
@@ -30,6 +31,13 @@ export function createAdminStore() {
       x => x?.checked
     ).length
     await getEnvironment()
+
+    // enable system status checks in the cloud
+    if (get(admin).cloud) {
+      await getSystemStatus()
+      checkStatus()
+    }
+
     admin.update(store => {
       store.loaded = true
       store.checklist = checklist
@@ -58,6 +66,21 @@ export function createAdminStore() {
     })
   }
 
+  const checkStatus = async () => {
+    const health = get(admin)?.status?.health
+    if (!health?.passing) {
+      await banner.showStatus()
+    }
+  }
+
+  async function getSystemStatus() {
+    const status = await API.getSystemStatus()
+    admin.update(store => {
+      store.status = status
+      return store
+    })
+  }
+
   function unload() {
     admin.update(store => {
       store.loaded = false

packages/frontend-core/src/api/other.js

@@ -17,6 +17,15 @@ export const buildOtherEndpoints = API => ({
     })
   },
 
+  /**
+   * Gets the current system status.
+   */
+  getSystemStatus: async () => {
+    return await API.get({
+      url: "/api/system/status",
+    })
+  },
+
   /**
    * Gets the list of available integrations.
    */

packages/worker/src/api/controllers/global/self.js

@@ -1,10 +1,20 @@
-const { getGlobalDB, getTenantId } = require("@budibase/backend-core/tenancy")
+const {
+  getGlobalDB,
+  getTenantId,
+  isUserInAppTenant,
+} = require("@budibase/backend-core/tenancy")
 const { generateDevInfoID, SEPARATOR } = require("@budibase/backend-core/db")
 const { user: userCache } = require("@budibase/backend-core/cache")
-const { hash, platformLogout } = require("@budibase/backend-core/utils")
+const {
+  hash,
+  platformLogout,
+  getCookie,
+  clearCookie,
+} = require("@budibase/backend-core/utils")
 const { encrypt } = require("@budibase/backend-core/encryption")
 const { newid } = require("@budibase/backend-core/utils")
 const { getUser } = require("../../utilities")
+const { Cookies } = require("@budibase/backend-core/constants")
 
 function newApiKey() {
   return encrypt(`${getTenantId()}${SEPARATOR}${newid()}`)
@@ -48,6 +58,16 @@ exports.fetchAPIKey = async ctx => {
   ctx.body = cleanupDevInfo(devInfo)
 }
 
+const checkCurrentApp = ctx => {
+  const appCookie = getCookie(ctx, Cookies.CurrentApp)
+  if (appCookie && !isUserInAppTenant(appCookie.appId)) {
+    // there is a currentapp cookie from another tenant
+    // remove the cookie as this is incompatible with the builder
+    // due to builder and admin permissions being removed
+    clearCookie(ctx, Cookies.CurrentApp)
+  }
+}
+
 exports.getSelf = async ctx => {
   if (!ctx.user) {
     ctx.throw(403, "User not logged in")
@@ -56,6 +76,9 @@ exports.getSelf = async ctx => {
   ctx.params = {
     id: userId,
   }
+
+  checkCurrentApp(ctx)
+
   // get the main body of the user
   ctx.body = await getUser(userId)
   // forward session information not found in db

packages/worker/src/api/controllers/system/status.js

@@ -0,0 +1,15 @@
+const accounts = require("@budibase/backend-core/accounts")
+const env = require("../../../environment")
+
+exports.fetch = async ctx => {
+  if (!env.SELF_HOSTED && !env.DISABLE_ACCOUNT_PORTAL) {
+    const status = await accounts.getStatus()
+    ctx.body = status
+  } else {
+    ctx.body = {
+      health: {
+        passing: true,
+      },
+    }
+  }
+}

packages/worker/src/api/index.js

@@ -39,7 +39,6 @@ const PUBLIC_ENDPOINTS = [
     method: "GET",
   },
   {
-    // TODO: Add an provisioning API key to this endpoint in the cloud
     route: "/api/global/users/init",
     method: "POST",
   },
@@ -51,6 +50,10 @@ const PUBLIC_ENDPOINTS = [
     route: "api/system/environment",
     method: "GET",
   },
+  {
+    route: "api/system/status",
+    method: "GET",
+  },
   {
     route: "/api/global/users/tenant/:id",
     method: "GET",

packages/worker/src/api/routes/index.js

@@ -8,6 +8,7 @@ const roleRoutes = require("./global/roles")
 const sessionRoutes = require("./global/sessions")
 const environmentRoutes = require("./system/environment")
 const tenantsRoutes = require("./system/tenants")
+const statusRoutes = require("./system/status")
 const selfRoutes = require("./global/self")
 
 exports.routes = [
@@ -21,5 +22,6 @@ exports.routes = [
   sessionRoutes,
   roleRoutes,
   environmentRoutes,
+  statusRoutes,
   selfRoutes,
 ]

packages/worker/src/api/routes/system/status.js

@@ -0,0 +1,8 @@
+const Router = require("@koa/router")
+const controller = require("../../controllers/system/status")
+
+const router = Router()
+
+router.get("/api/system/status", controller.fetch)
+
+module.exports = router