forked from tsai/budibase
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") |
const { budibaseTempDir } = require("@budibase/backend-core/objectStore") |
||||
|
|
||||
module.exports.budibaseAppsDir = function () { |
|
||||
return env.BUDIBASE_DIR || join(homedir(), ".budibase") |
|
||||
} |
|
||||
|
|
||||
module.exports.budibaseTempDir = budibaseTempDir |
module.exports.budibaseTempDir = budibaseTempDir |
||||
|
|||||
Loading…
Reference in new issue