mirror of https://github.com/Budibase/budibase.git
Michael Drury
4 years ago
committed by
GitHub
GitHub
23 changed files with 318 additions and 66 deletions
@ -0,0 +1,56 @@ |
|||
<script> |
|||
import { Body, ProgressBar, Label } from "@budibase/bbui" |
|||
import { onMount } from "svelte" |
|||
export let usage |
|||
|
|||
let percentage |
|||
let unlimited = false |
|||
|
|||
const isUnlimited = () => { |
|||
if (usage.total === -1) { |
|||
return true |
|||
} |
|||
return false |
|||
} |
|||
|
|||
const getPercentage = () => { |
|||
return Math.min(Math.ceil((usage.used / usage.total) * 100), 100) |
|||
} |
|||
|
|||
onMount(() => { |
|||
unlimited = isUnlimited() |
|||
percentage = getPercentage() |
|||
}) |
|||
</script> |
|||
|
|||
<div class="usage"> |
|||
<div class="info"> |
|||
<Label size="XL">{usage.name}</Label> |
|||
{#if unlimited} |
|||
<Body size="S">{usage.used}</Body> |
|||
{:else} |
|||
<Body size="S">{usage.used} / {usage.total}</Body> |
|||
{/if} |
|||
</div> |
|||
<div> |
|||
{#if unlimited} |
|||
<Body size="S">Unlimited</Body> |
|||
{:else} |
|||
<ProgressBar width={"100%"} duration={1} value={percentage} /> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.usage { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.info { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
gap: var(--spacing-m); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,139 @@ |
|||
<script> |
|||
import { |
|||
Body, |
|||
Divider, |
|||
Heading, |
|||
Layout, |
|||
notifications, |
|||
Link, |
|||
} from "@budibase/bbui" |
|||
import { onMount } from "svelte" |
|||
import { admin, auth, licensing } from "stores/portal" |
|||
import Usage from "components/usage/Usage.svelte" |
|||
|
|||
let staticUsage = [] |
|||
let monthlyUsage = [] |
|||
let loaded = false |
|||
|
|||
$: quotaUsage = $licensing.quotaUsage |
|||
$: license = $auth.user?.license |
|||
|
|||
const upgradeUrl = `${$admin.accountPortalUrl}/portal/upgrade` |
|||
|
|||
const setMonthlyUsage = () => { |
|||
monthlyUsage = [] |
|||
if (quotaUsage.monthly) { |
|||
for (let [key, value] of Object.entries(license.quotas.usage.monthly)) { |
|||
const used = quotaUsage.monthly.current[key] |
|||
if (used !== undefined) { |
|||
monthlyUsage.push({ |
|||
name: value.name, |
|||
used: used, |
|||
total: value.value, |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
const setStaticUsage = () => { |
|||
staticUsage = [] |
|||
for (let [key, value] of Object.entries(license.quotas.usage.static)) { |
|||
const used = quotaUsage.usageQuota[key] |
|||
if (used !== undefined) { |
|||
staticUsage.push({ |
|||
name: value.name, |
|||
used: used, |
|||
total: value.value, |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
const capitalise = string => { |
|||
if (string) { |
|||
return string.charAt(0).toUpperCase() + string.slice(1) |
|||
} |
|||
} |
|||
|
|||
const init = async () => { |
|||
try { |
|||
await licensing.getQuotaUsage() |
|||
} catch (e) { |
|||
console.error(e) |
|||
notifications.error(e) |
|||
} |
|||
} |
|||
|
|||
onMount(async () => { |
|||
await init() |
|||
loaded = true |
|||
}) |
|||
|
|||
$: { |
|||
if (license && quotaUsage) { |
|||
setMonthlyUsage() |
|||
setStaticUsage() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
{#if loaded} |
|||
<Layout> |
|||
<Heading>Usage</Heading> |
|||
<Body |
|||
>Get information about your current usage within Budibase. |
|||
{#if $admin.cloud} |
|||
{#if $auth.user?.accountPortalAccess} |
|||
To upgrade your plan and usage limits visit your <Link |
|||
size="L" |
|||
href={upgradeUrl}>Account</Link |
|||
>. |
|||
{:else} |
|||
Contact your account holder to upgrade your usage limits. |
|||
{/if} |
|||
{/if} |
|||
</Body> |
|||
</Layout> |
|||
<Layout gap="S"> |
|||
<Divider size="S" /> |
|||
</Layout> |
|||
<Layout gap="S" noPadding> |
|||
<Layout gap="XS"> |
|||
<Body size="S">YOUR PLAN</Body> |
|||
<Heading size="S">{capitalise(license?.plan.type)}</Heading> |
|||
</Layout> |
|||
<Layout gap="S"> |
|||
<Body size="S">USAGE</Body> |
|||
<div class="usages"> |
|||
{#each staticUsage as usage} |
|||
<div class="usage"> |
|||
<Usage {usage} /> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
</Layout> |
|||
{#if monthlyUsage.length} |
|||
<Layout gap="S"> |
|||
<Body size="S">MONTHLY</Body> |
|||
<div class="usages"> |
|||
{#each monthlyUsage as usage} |
|||
<div class="usage"> |
|||
<Usage {usage} /> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
</Layout> |
|||
<div /> |
|||
{/if} |
|||
</Layout> |
|||
{/if} |
|||
|
|||
<style> |
|||
.usages { |
|||
display: grid; |
|||
column-gap: 60px; |
|||
row-gap: 50px; |
|||
grid-template-columns: 1fr 1fr 1fr; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
import { writable } from "svelte/store" |
|||
import { API } from "api" |
|||
|
|||
export const createLicensingStore = () => { |
|||
const DEFAULT = { |
|||
plans: {}, |
|||
} |
|||
|
|||
const store = writable(DEFAULT) |
|||
|
|||
const actions = { |
|||
getQuotaUsage: async () => { |
|||
const quotaUsage = await API.getQuotaUsage() |
|||
store.update(state => { |
|||
return { |
|||
...state, |
|||
quotaUsage, |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
|
|||
return { |
|||
subscribe: store.subscribe, |
|||
...actions, |
|||
} |
|||
} |
|||
|
|||
export const licensing = createLicensingStore() |
|||
@ -1,10 +1,3 @@ |
|||
const { join } = require("./centralPath") |
|||
const { homedir } = require("os") |
|||
const env = require("../environment") |
|||
const { budibaseTempDir } = require("@budibase/backend-core/objectStore") |
|||
|
|||
module.exports.budibaseAppsDir = function () { |
|||
return env.BUDIBASE_DIR || join(homedir(), ".budibase") |
|||
} |
|||
|
|||
module.exports.budibaseTempDir = budibaseTempDir |
|||
|
|||
Loading…
Reference in new issue