feat: add screenshots generated metric to billing and usage reports #2798
Conversation
Console (appwrite/console)Project ID: Tip GraphQL API works alongside REST and WebSocket protocols |
WalkthroughAdds a new billing metric "screenshots generated" across the codebase. Type definitions in src/lib/sdk/billing.ts gain fields: Plan.screenshotsGenerated, OrganizationUsage.screenshotsGeneratedTotal, and OrganizationUsage.projects[].screenshotsGenerated. UI updates add displays for the metric in billing plan summaries and usage pages: new rows/cards, a BarChart-derived view, and a ProjectBreakdown metric union extended to include "screenshotsGenerated". The page load early-return now includes null-initialized screenshotsGenerated and screenshotsGeneratedTotal. All changes are additive; no existing fields or control flow were removed. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/lib/sdk/billing.ts (1)
289-322: MissingscreenshotsGeneratedfields inOrganizationUsagetype causes pipeline failures.The pipeline errors indicate that
screenshotsGeneratedTotaldoes not exist on typeOrganizationUsage. The type needs to be updated to include both the time-series array and total fields, similar to other metrics likeimageTransformations.🔧 Proposed fix
export type OrganizationUsage = { bandwidth: Array<Models.Metric>; executions: Array<Models.Metric>; databasesReads: Array<Models.Metric>; databasesWritesTotal: 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; backupsStorageTotal: number; storageTotal: number; users: Array<Models.Metric>; usersTotal: number; projects: Array<{ projectId: string; storage: number; executions: number; bandwidth: number; databasesReads: number; databasesWrites: number; users: number; authPhoneTotal: number; authPhoneEstimate: number; imageTransformations: number; + screenshotsGenerated: number; }>; authPhoneTotal: number; authPhoneEstimate: number; };src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte (1)
86-102: Missing format case forscreenshotsGenerated- will returnundefined.The
formatfunction handles various metrics in the switch statement, butscreenshotsGeneratedis not included in any case. This will cause the function to returnundefinedwhen formatting screenshot values in the project breakdown table.🔧 Proposed fix
function format(value: number): string { if (databaseOperationMetric) { return abbreviateNumber(value); } switch (metric) { case 'imageTransformations': + case 'screenshotsGenerated': case 'authPhoneTotal': return formatNumberWithCommas(value); case 'executions': case 'users': return abbreviateNumber(value); case 'storage': case 'bandwidth': return humanFileSize(value).value + humanFileSize(value).unit; } }
🤖 Fix all issues with AI agents
In
`@src/routes/`(console)/organization-[organization]/usage/[[invoice]]/+page.svelte:
- Around line 330-336: The OrganizationUsage type is missing
screenshotsGenerated and screenshotsGeneratedTotal used by the Svelte page;
update the OrganizationUsage interface/type (named OrganizationUsage) in the
billing SDK to include screenshotsGenerated: number and
screenshotsGeneratedTotal: number (or optional number if backend may omit them),
ensure they are exported and any mapping/parsing code that builds
OrganizationUsage from API responses populates these fields so
data.organizationUsage.screenshotsGeneratedTotal in the +page.svelte resolves
correctly.
- Around line 345-355: The BarChart series for "Screenshots generated" is using
the wrong data source; replace references to
data.organizationUsage.imageTransformations with
data.organizationUsage.screenshotsGenerated in the series mapping so the chart
maps (e.date, e.value) from screenshotsGenerated instead of
imageTransformations; update the series object in the component where the chart
is defined (the code creating series={[ { name: 'Screenshots generated', data:
[...] } ]}) to use screenshotsGenerated.
In
`@src/routes/`(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte:
- Around line 252-258: The label text for the screenshots metric is wrong:
update the hardcoded span that currently reads "Transformations" (near the span
containing {current} in the +page.svelte markup) to "Screenshots generated" so
the UI correctly reflects the screenshots metric; ensure you only change the
visible label string and leave the surrounding structure and the {current}
variable intact.
src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
Show resolved
Hide resolved
| series={[ | ||
| { | ||
| name: 'Screenshots generated', | ||
| data: [ | ||
| ...(data.organizationUsage.imageTransformations ?? []).map((e) => [ | ||
| e.date, | ||
| e.value | ||
| ]) | ||
| ] | ||
| } | ||
| ]} /> |
There was a problem hiding this comment.
Bug: Chart uses wrong data source - displays imageTransformations instead of screenshotsGenerated.
The BarChart is mapping data.organizationUsage.imageTransformations instead of data.organizationUsage.screenshotsGenerated. This will display incorrect data in the "Screenshots generated" chart.
🐛 Proposed fix
series={[
{
name: 'Screenshots generated',
data: [
- ...(data.organizationUsage.imageTransformations ?? []).map((e) => [
+ ...(data.organizationUsage.screenshotsGenerated ?? []).map((e) => [
e.date,
e.value
])
]
}
]} />🤖 Prompt for AI Agents
In
`@src/routes/`(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
around lines 345 - 355, The BarChart series for "Screenshots generated" is using
the wrong data source; replace references to
data.organizationUsage.imageTransformations with
data.organizationUsage.screenshotsGenerated in the series mapping so the chart
maps (e.date, e.value) from screenshotsGenerated instead of
imageTransformations; update the series object in the component where the chart
is defined (the code creating series={[ { name: 'Screenshots generated', data:
[...] } ]}) to use screenshotsGenerated.
| <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">Transformations</span> | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
Incorrect label: Shows "Transformations" instead of "Screenshots".
The label text appears to be a copy/paste artifact from the Image transformations section. It should reflect the "Screenshots generated" metric.
✏️ Proposed fix
<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">Transformations</span>
+ <span class="body-text-1 u-bold">Screenshots</span>
</p>
</div>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <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">Transformations</span> | |
| </p> | |
| </div> | |
| <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> |
🤖 Prompt for AI Agents
In
`@src/routes/`(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
around lines 252 - 258, The label text for the screenshots metric is wrong:
update the hardcoded span that currently reads "Transformations" (near the span
containing {current} in the +page.svelte markup) to "Screenshots generated" so
the UI correctly reflects the screenshots metric; ensure you only change the
visible label string and leave the surrounding structure and the {current}
variable intact.
What does this PR do?
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
YES
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.