feat: add screenshotsGenerated metrics across console #2543
Conversation
ConsoleProject ID: Tip You can use Avatars API to generate QR code for any text or URLs. |
WalkthroughThis pull request adds a new resource metric, Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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 |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
package.json(1 hunks)src/lib/sdk/billing.ts(4 hunks)src/lib/sdk/usage.ts(1 hunks)src/lib/stores/billing.ts(1 hunks)src/routes/(console)/organization-[organization]/billing/planSummary.svelte(2 hunks)src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte(1 hunks)src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts(1 hunks)src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-26T06:48:57.938Z
Learnt from: ItzNotABug
Repo: appwrite/console PR: 2373
File: src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte:629-631
Timestamp: 2025-09-26T06:48:57.938Z
Learning: In the Appwrite console codebase using appwrite.io/pink-svelte, the Icon component automatically handles CSS variable names passed to its color prop by internally wrapping them with var(). Therefore, passing '--some-css-variable' as a string to the Icon color prop works correctly without needing to manually wrap it with var().
Applied to files:
package.json
🧬 Code graph analysis (1)
src/lib/sdk/billing.ts (1)
src/lib/sdk/usage.ts (1)
Metric(21-30)
🪛 ESLint
src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
[error] 33-33: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
[error] 34-34: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🔇 Additional comments (10)
src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts (1)
37-39: LGTM! Consistent with existing temporary fix pattern.The new fields are correctly initialized to null in the early-return path, matching the pattern used for other metrics like
imageTransformationsTotal.src/lib/stores/billing.ts (1)
153-154: LGTM! Service type extension is correct.The addition of
'screenshotsGenerated'to thePlanServicesunion follows the existing pattern and enables the new metric to be used withgetServiceLimit().src/lib/sdk/usage.ts (1)
336-344: LGTM! Type definitions follow established pattern.The new
screenshotsGeneratedandscreenshotsGeneratedTotalfields mirror the structure ofimageTransformations, maintaining consistency in the data model.package.json (1)
25-25: Dependency update noted.Package version updated to support the new screenshotsGenerated metric feature.
src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte (1)
19-20: LGTM! Metric handling is consistent.The addition of
'screenshotsGenerated'to the Metric type and its formatting logic correctly mirrors theimageTransformationsimplementation, usingformatNumberWithCommasfor display.Also applies to: 93-93
src/lib/sdk/billing.ts (1)
295-295: LGTM! Comprehensive metric integration.The new
screenshotsGeneratedmetric is properly integrated across all billing data structures:
- Organization-level metrics and totals
- Per-project tracking
- Plan limits and usage pricing
All additions follow the established pattern from
imageTransformations.Also applies to: 302-302, 321-321, 390-390, 418-418
src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte (1)
246-283: LGTM! UI implementation follows established patterns.The new "Screenshots generated" CardGrid section correctly mirrors the structure of other usage metrics, including the chart visualization and "No data to show" fallback state.
src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte (1)
325-370: LGTM! Organization usage section is well-implemented.The new "Screenshots generated" section correctly integrates with the billing system, including:
- Progress bar with current usage and plan limits
- Bar chart visualization
- Project breakdown for detailed analysis
- Proper conditional rendering for empty states
The implementation is consistent with other usage metrics in the file.
src/routes/(console)/organization-[organization]/billing/planSummary.svelte (2)
130-132: LGTM! Resource mapping follows established pattern.The addition of
screenshotsGeneratedto the resource mapping is consistent with how other metrics (executions, imageTransformations, etc.) are handled.
286-298: LGTM! Billing row implementation is consistent and complete.The screenshots generated metric row correctly implements:
- Formatted usage display with current/limit values
- Currency formatting for pricing
- Progress bar visualization
- Proper handling of unlimited plans
The implementation mirrors the pattern used for other metrics like image transformations, ensuring UI consistency.
| $: screenshotsGenerated = (data.usage as any).screenshotsGenerated ?? null; | ||
| $: screenshotsGeneratedTotal = (data.usage as any).screenshotsGeneratedTotal ?? 0; |
There was a problem hiding this comment.
Address type casting with proper type definitions.
The as any casts bypass TypeScript's type safety. Since screenshotsGenerated and screenshotsGeneratedTotal are defined in the UsageProject type (src/lib/sdk/usage.ts), the data loader should be updated to properly type the usage data.
Consider updating the data loader or type imports to avoid the as any cast:
-$: screenshotsGenerated = (data.usage as any).screenshotsGenerated ?? null;
-$: screenshotsGeneratedTotal = (data.usage as any).screenshotsGeneratedTotal ?? 0;
+$: screenshotsGenerated = data.usage.screenshotsGenerated ?? null;
+$: screenshotsGeneratedTotal = data.usage.screenshotsGeneratedTotal ?? 0;Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 ESLint
[error] 33-33: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
[error] 34-34: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
What does this PR do?
(Provide a description of what this PR does.)
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?
(Write your answer here.)
Summary by CodeRabbit
New Features
Chores