Skip to content

feat: add screenshotsGenerated metrics across console #2543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HarshMN2345 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: add screenshotsGenerated metrics across console #2543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b7e99ba
add screenshotsGenerated metric across console
HarshMN2345 Nov 3, 2025
80fb7f6
pnpm lockfile
HarshMN2345 Nov 3, 2025
930d0fb
package upgrade
HarshMN2345 Nov 3, 2025
1af8a32
Refactor usage data handling for screenshots generated
HarshMN2345 Nov 3, 2025
524336d
Merge remote-tracking branch 'origin/main' into feat-screenshots-api-…
HarshMN2345 Dec 7, 2025
53b9707
broken lockfile fix
HarshMN2345 Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"deep-equal": "^2.2.3",
"echarts": "^5.6.0",
"ignore": "^6.0.2",
"install": "^0.13.0",
Copy link
Member

@ItzNotABug ItzNotABug Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whats this for?

"nanoid": "^5.1.5",
"nanotar": "^0.1.1",
"plausible-tracker": "^0.3.9",
Expand Down
9 changes: 9 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions src/lib/sdk/billing.ts
View file
Open in desktop
Copy link
Member

@lohanidamodar lohanidamodar Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should instead start using the generated SDK, it should already have these

Original file line number Diff line number Diff line change
Expand Up @@ -292,12 +292,14 @@ export type OrganizationUsage = {
databasesReads: Array<Models.Metric>;
databasesWrites: Array<Models.Metric>;
imageTransformations: Array<Models.Metric>;
screenshotsGenerated: Array<Models.Metric>;
executionsTotal: number;
filesStorageTotal: number;
buildsStorageTotal: number;
databasesReadsTotal: number;
databasesWritesTotal: number;
imageTransformationsTotal: number;
screenshotsGeneratedTotal: number;
deploymentsStorageTotal: number;
executionsMBSecondsTotal: number;
buildsMBSecondsTotal: number;
Expand All @@ -316,6 +318,7 @@ export type OrganizationUsage = {
authPhoneTotal: number;
authPhoneEstimate: number;
imageTransformations: number;
screenshotsGenerated: number;
}>;
authPhoneTotal: number;
authPhoneEstimate: number;
Expand Down Expand Up @@ -384,6 +387,7 @@ export type Plan = {
bandwidth: number;
storage: number;
imageTransformations: number;
screenshotsGenerated: number;
webhooks: number;
users: number;
teams: number;
Expand Down Expand Up @@ -411,6 +415,7 @@ export type Plan = {
databasesWrites: AdditionalResource;
GBHours: AdditionalResource;
imageTransformations: AdditionalResource;
screenshotsGenerated: AdditionalResource;
};
addons: {
seats: PlanAddon;
Expand Down
10 changes: 10 additions & 0 deletions src/lib/sdk/usage.ts
View file
Open in desktop
Copy link
Member

@lohanidamodar lohanidamodar Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, generated SDK should have these.

Original file line number Diff line number Diff line change
Expand Up @@ -332,4 +332,14 @@ export type UsageProject = {
* Aggregated statistics of total number of image transformations.
*/
imageTransformationsTotal: number;

/**
* Array of screenshots generated per period.
*/
screenshotsGenerated: Metric[];

/**
* Aggregated statistics of total number of screenshots generated.
*/
screenshotsGeneratedTotal: number;
};
3 changes: 2 additions & 1 deletion src/lib/stores/billing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,8 @@ export type PlanServices =
| 'webhooks'
| 'sites'
| 'authPhone'
| 'imageTransformations';
| 'imageTransformations'
| 'screenshotsGenerated';

export function getServiceLimit(serviceId: PlanServices, tier: Tier = null, plan?: Plan): number {
if (!isCloud) return 0;
Expand Down
6 changes: 6 additions & 0 deletions src/routes/(console)/organization-[organization]/billing/planSummary.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,12 @@
getResource(resources, 'imageTransformations'),
currentPlan?.imageTransformations
),
createResourceRow(
'screenshots-generated',
'Screenshots generated',
Comment on lines +351 to +352
Copy link
Member

@ItzNotABug ItzNotABug Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all the ids and text that are passed to createResourceRow are always same and only separated by -. We should just infer the text from the id in that case like -

createResourceRow(
    'screenshots-generated', // simply replace `-` with a ` ` and making the first char uppercased
    getResource(resources, 'screenshotsGenerated'),
    currentPlan?.screenshotsGenerated
),

getResource(resources, 'screenshotsGenerated'),
currentPlan?.screenshotsGenerated
),
createResourceRow(
'gb-hours',
'GB-hours',
Expand Down
47 changes: 47 additions & 0 deletions src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,53 @@
</svelte:fragment>
</CardGrid>

<CardGrid gap="none">
<svelte:fragment slot="title">Screenshots generated</svelte:fragment>
The total number of screenshots generated across all projects in your organization.
<svelte:fragment slot="aside">
{#if data.organizationUsage.screenshotsGeneratedTotal}
{@const current = data.organizationUsage.screenshotsGeneratedTotal}
{@const max = getServiceLimit('screenshotsGenerated', tier, plan)}
<ProgressBarBig
currentUnit="Screenshots"
currentValue={formatNum(current)}
maxValue={max ? `/ ${formatNum(max)}` : undefined}
progressValue={current}
progressMax={max}
showBar={false} />
<BarChart
options={{
yAxis: {
axisLabel: {
formatter: formatNum
}
}
}}
series={[
{
name: 'Screenshots generated',
data: [
...(data.organizationUsage.screenshotsGenerated ?? []).map((e) => [
e.date,
e.value
])
]
}
]} />
{#if projects?.length > 0}
<ProjectBreakdown {projects} metric="screenshotsGenerated" {usageProjects} />
{/if}
{:else}
<Card isDashed>
<Layout.Stack gap="xs" alignItems="center" justifyContent="center">
<Icon icon={IconChartSquareBar} size="l" />
<Typography.Text variant="m-600">No data to show</Typography.Text>
</Layout.Stack>
</Card>
{/if}
</svelte:fragment>
</CardGrid>

<CardGrid gap="none">
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in all projects in your organization.
Expand Down
4 changes: 3 additions & 1 deletion src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ export const load: PageLoad = async ({ params, parent }) => {
databasesReadsTotal: null,
databasesWritesTotal: null,
imageTransformations: null,
imageTransformationsTotal: null
imageTransformationsTotal: null,
screenshotsGenerated: null,
screenshotsGeneratedTotal: null
}
};
}
Expand Down
4 changes: 3 additions & 1 deletion src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
| 'authPhoneTotal'
| 'databasesReads'
| 'databasesWrites'
| 'imageTransformations';
| 'imageTransformations'
| 'screenshotsGenerated';

type Estimate = 'authPhoneEstimate';

Expand Down Expand Up @@ -89,6 +90,7 @@

switch (metric) {
case 'imageTransformations':
case 'screenshotsGenerated':
case 'authPhoneTotal':
return formatNumberWithCommas(value);
case 'executions':
Expand Down
40 changes: 40 additions & 0 deletions src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
data.usage.buildsStorageTotal;
$: imageTransformations = data.usage.imageTransformations;
$: imageTransformationsTotal = data.usage.imageTransformationsTotal;
$: screenshotsGenerated = data.usage.screenshotsGenerated;
$: screenshotsGeneratedTotal = data.usage.screenshotsGeneratedTotal;
$: dbReads = data.usage.databasesReads;
$: dbWrites = data.usage.databasesWrites;

Expand Down Expand Up @@ -241,6 +243,44 @@
{/if}
</svelte:fragment>
</CardGrid>
<CardGrid>
<svelte:fragment slot="title">Screenshots generated</svelte:fragment>
Total number of screenshots generated in your project.
<svelte:fragment slot="aside">
{#if screenshotsGenerated}
{@const current = formatNum(screenshotsGeneratedTotal)}
<div class="u-flex u-flex-vertical">
<div class="u-flex u-main-space-between">
<p>
<span class="heading-level-4">{current}</span>
<span class="body-text-1 u-bold">Screenshots</span>
</p>
</div>
</div>
<BarChart
options={{
yAxis: {
axisLabel: {
formatter: formatNum
}
}
}}
series={[
{
name: 'Screenshots generated',
data: [...screenshotsGenerated.map((e) => [e.date, e.value])]
}
]} />
{:else}
<Card isDashed>
<Layout.Stack gap="xs" alignItems="center" justifyContent="center">
<Icon icon={IconChartSquareBar} size="l" />
<Typography.Text variant="m-600">No data to show</Typography.Text>
</Layout.Stack>
</Card>
{/if}
</svelte:fragment>
</CardGrid>
<CardGrid>
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in this project.
Expand Down