From c747c4482db33f8b6f81f0be096e090247f07524 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Sat, 9 Dec 2023 15:04:50 +0100 Subject: [PATCH 1/3] fix: org usage --- src/lib/components/progressBarBig.svelte | 35 ++++---- src/lib/helpers/date.ts | 8 ++ src/lib/sdk/billing.ts | 7 ++ .../usage/[[invoice]]/+page.svelte | 77 +++++++++++++---- .../usage/[[invoice]]/+page.ts | 12 ++- .../usage/[[invoice]]/ProjectBreakdown.svelte | 82 +++++++++++++++++++ 6 files changed, 187 insertions(+), 34 deletions(-) create mode 100644 src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte index 68132f8938..b5d41308c5 100644 --- a/src/lib/components/progressBarBig.svelte +++ b/src/lib/components/progressBarBig.svelte @@ -1,13 +1,14 @@ @@ -16,19 +17,21 @@

- {used} - {unit} + {currentValue} + {currentUnit}

{progress}%

- {formatNumber ? abbreviateNumber(max) : max} - {unit} + {maxValue} + {maxUnit}

-
+ {#if showBar} +
+ {/if} diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts index cc3e351777..c8aaf0fc86 100644 --- a/src/lib/helpers/date.ts +++ b/src/lib/helpers/date.ts @@ -69,3 +69,11 @@ export function hoursToDays(hours: number) { return `${hours} hour`; } } + +export function getTomorrow(date: Date) { + const tomorrow = new Date(date); + tomorrow.setDate(tomorrow.getDate() + 2); + tomorrow.setHours(0, 0, 0, 0); + + return tomorrow; +} diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts index 09ec9294ee..1d785bf989 100644 --- a/src/lib/sdk/billing.ts +++ b/src/lib/sdk/billing.ts @@ -164,6 +164,13 @@ export type OrganizationUsage = { executions: number; storage: number; users: Array; + projects: Array<{ + projectId: string; + storage: number; + executions: number; + bandwidth: number; + users: number; + }>; }; export type AggregationList = { diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte index 2ceac055e3..7c05f360a2 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -8,14 +8,18 @@ import { page } from '$app/stores'; import { goto } from '$app/navigation'; import { toLocaleDate } from '$lib/helpers/date.js'; + import { bytesToSize, humanFileSize } from '$lib/helpers/sizeConvertion'; + import { abbreviateNumber } from '$lib/helpers/numbers'; + import { BarChart } from '$lib/charts'; import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte'; + import ProjectBreakdown from './ProjectBreakdown.svelte'; export let data; const tier = data?.currentInvoice?.tier ?? $organization?.billingPlan; const plan = tierToPlan(tier).name; - let invoice = 'current'; + let invoice = null; async function handlePeriodChange() { const target = invoice @@ -56,7 +60,6 @@

Usage period:

- + ]} />
@@ -82,10 +85,25 @@

+ {@const current = data.organizationUsage.bandwidth[0]?.value ?? 0} + {@const currentHumanized = humanFileSize(current)} + {@const max = getServiceLimit('bandwidth', tier)} + currentUnit={currentHumanized.unit} + currentValue={currentHumanized.value} + maxUnit="GB" + maxValue={max.toString()} + progressValue={bytesToSize(current, 'GB')} + progressMax={max} + showBar={false} /> + [e.date, e.value])] + } + ]} /> + @@ -95,10 +113,24 @@

The total number of users across all projects in your organization.

+ {@const current = data.organizationUsage.users[0]?.value ?? 0} + {@const max = getServiceLimit('users', tier)} + currentUnit="Users" + currentValue={current.toString()} + maxUnit="Users" + maxValue={abbreviateNumber(max)} + progressValue={current} + progressMax={max} + showBar={false} /> + [e.date, e.value])] + } + ]} /> + @@ -110,10 +142,16 @@

+ {@const current = data.organizationUsage.executions} + {@const max = getServiceLimit('executions', tier)} + currentUnit="Executions" + currentValue={current.toString()} + maxUnit="Executions" + maxValue={abbreviateNumber(max)} + progressValue={current} + progressMax={max} /> + @@ -125,10 +163,17 @@

+ {@const current = data.organizationUsage.storage} + {@const currentHumanized = humanFileSize(current)} + {@const max = getServiceLimit('storage', tier)} + currentUnit={currentHumanized.unit} + currentValue={currentHumanized.value} + maxUnit="GB" + maxValue={max.toString()} + progressValue={bytesToSize(current, 'GB')} + progressMax={max} /> + diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts index c2f3584748..095040a967 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts @@ -2,12 +2,15 @@ import { sdk } from '$lib/stores/sdk'; import type { PageLoad } from './$types'; import type { Organization } from '$lib/stores/organization'; import type { Invoice } from '$lib/sdk/billing'; +import { getTomorrow } from '$lib/helpers/date'; +import { Query } from '@appwrite.io/console'; export const load: PageLoad = async ({ params, parent }) => { const { invoice } = params; const parentData = await parent(); const org = parentData.organization as Organization; - const today = new Date().toISOString(); + const tomorrow = getTomorrow(new Date()); + let startDate: string; let endDate: string; let currentInvoice: Invoice | null = null; @@ -18,7 +21,7 @@ export const load: PageLoad = async ({ params, parent }) => { endDate = currentInvoice.to; } else { startDate = org.billingCurrentInvoiceDate; - endDate = today; + endDate = tomorrow.toISOString(); } const [invoices, usage] = await Promise.all([ @@ -26,8 +29,13 @@ export const load: PageLoad = async ({ params, parent }) => { sdk.forConsole.billing.listUsage(params.organization, startDate, endDate) ]); + const projectNames = await sdk.forConsole.projects.list([ + Query.equal('$id', usage.projects.map((p) => p.projectId)) + ]); + return { organizationUsage: usage, + projectNames: projectNames.projects, invoices, currentInvoice }; diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte new file mode 100644 index 0000000000..d856f30165 --- /dev/null +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte @@ -0,0 +1,82 @@ + + + + + More details +
+ + + Project + Usage + + + + {#each groupByProject(metric) as project} + + + {getProjectName(project.projectId)} + + {format(project.usage)} + View project usage + + {/each} + +
+
+ + From 11cc02c37cc3f056aa21bc001e74c5b6f0fb4944 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Sat, 9 Dec 2023 16:55:27 +0100 Subject: [PATCH 2/3] fix: leftovers --- src/lib/components/progressBarBig.svelte | 7 ++----- .../usage/[[invoice]]/+page.svelte | 10 ++++++++-- .../usage/[[invoice]]/+page.ts | 5 ++++- .../usage/[[invoice]]/ProjectBreakdown.svelte | 2 +- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte index b5d41308c5..8b11b6d9d8 100644 --- a/src/lib/components/progressBarBig.svelte +++ b/src/lib/components/progressBarBig.svelte @@ -6,11 +6,8 @@ export let progressValue: number; export let progressMax: number; export let showBar = true; - export let status: null | 'warning' | 'error' = null; $: progress = Math.round((progressValue / progressMax) * 100); - - //TODO: depending on the data received, we could set the status
@@ -30,8 +27,8 @@ {#if showBar}
= 80 && progress < 100} + class:is-danger={progress >= 100} style:--graph-size={progress + '%'} /> {/if}
diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte index 7c05f360a2..d2afae374e 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -103,7 +103,10 @@ data: [...data.organizationUsage.bandwidth.map((e) => [e.date, e.value])] } ]} /> - + @@ -151,7 +154,10 @@ maxValue={abbreviateNumber(max)} progressValue={current} progressMax={max} /> - + diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts index 095040a967..e5b8891759 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts @@ -30,7 +30,10 @@ export const load: PageLoad = async ({ params, parent }) => { ]); const projectNames = await sdk.forConsole.projects.list([ - Query.equal('$id', usage.projects.map((p) => p.projectId)) + Query.equal( + '$id', + usage.projects.map((p) => p.projectId) + ) ]); return { diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte index d856f30165..8c1dfcd204 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte @@ -54,7 +54,7 @@ - More details + Project breakdown
From 696cd7b600cb7ab7f447f49e6649e1b85dc82fa5 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Sat, 9 Dec 2023 16:57:39 +0100 Subject: [PATCH 3/3] fix: unpushed changes --- src/lib/components/progressBarBig.svelte | 2 +- .../organization-[organization]/usage/[[invoice]]/+page.svelte | 3 ++- .../usage/[[invoice]]/ProjectBreakdown.svelte | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte index 8b11b6d9d8..4bd00e6258 100644 --- a/src/lib/components/progressBarBig.svelte +++ b/src/lib/components/progressBarBig.svelte @@ -27,7 +27,7 @@ {#if showBar}
= 80 && progress < 100} + class:is-warning={progress >= 75 && progress < 100} class:is-danger={progress >= 100} style:--graph-size={progress + '%'} /> {/if} diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte index d2afae374e..e0a29becf2 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -165,7 +165,8 @@ Storage

- Calculated for all storage operations across all projects in your organization. + Calculated for all your files, deployments, builds and databases. While in beta, only + file storage is counted against your plan limits.

diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte index 8c1dfcd204..d553efc80b 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte @@ -54,7 +54,7 @@ - Project breakdown + Project breakdown