Add RPC usage chart to dashboard #6719
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #6719 +/- ##
=======================================
Coverage 54.93% 54.93%
=======================================
Files 890 890
Lines 56002 56002
Branches 3820 3820
=======================================
Hits 30762 30762
Misses 25145 25145
Partials 95 95
🚀 New features to boost your workflow:
|
size-limit report 📦
|
| name="RPC Requests" | ||
| description={`Your plan allows for ${usageData.rateLimits.rpc} requests per second.`} | ||
| > | ||
| <ThirdwebBarChart |
There was a problem hiding this comment.
Just pass the title and description to ThirdwebBarChart instead of putting it inside another card component
MananTank
force-pushed
the
Add_RPC_usage_chart_to_dashboard
branch
from
74aa063 to
e4f6c00
Compare
MananTank
force-pushed
the
Add_RPC_usage_chart_to_dashboard
branch
from
e4f6c00 to
132a790
Compare
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| const rpcUsageData = useMemo(() => { | ||
| const mappedRPCUsage = rpcUsage.reduce( | ||
| (acc, curr) => { | ||
| switch (curr.usageType) { | ||
| case "rate-limit": | ||
| acc[curr.date] = { | ||
| ...(acc[curr.date] || {}), | ||
| "rate-limit": | ||
| (acc[curr.date]?.["rate-limit"] || 0) + Number(curr.count), | ||
| included: acc[curr.date]?.included || 0, | ||
| }; | ||
| break; | ||
| default: | ||
| acc[curr.date] = { | ||
| ...(acc[curr.date] || {}), | ||
| "rate-limit": acc[curr.date]?.["rate-limit"] || 0, | ||
| included: (acc[curr.date]?.included || 0) + Number(curr.count), | ||
| }; | ||
| break; |
There was a problem hiding this comment.
There's a potential issue in the reduce function's switch statement. When processing multiple records for the same date with different usageType values, the current implementation might not correctly accumulate values.
In both switch cases, the code should add to existing values rather than potentially overwriting them. Consider refactoring to ensure proper accumulation:
acc[curr.date] = {
...(acc[curr.date] || {}),
"rate-limit": (acc[curr.date]?.["rate-limit"] || 0) + (curr.usageType === "rate-limit" ? Number(curr.count) : 0),
included: (acc[curr.date]?.included || 0) + (curr.usageType !== "rate-limit" ? Number(curr.count) : 0)
};This approach would handle all usageType values in a single consistent pattern, ensuring values are properly accumulated regardless of processing order.
| const rpcUsageData = useMemo(() => { | |
| const mappedRPCUsage = rpcUsage.reduce( | |
| (acc, curr) => { | |
| switch (curr.usageType) { | |
| case "rate-limit": | |
| acc[curr.date] = { | |
| ...(acc[curr.date] || {}), | |
| "rate-limit": | |
| (acc[curr.date]?.["rate-limit"] || 0) + Number(curr.count), | |
| included: acc[curr.date]?.included || 0, | |
| }; | |
| break; | |
| default: | |
| acc[curr.date] = { | |
| ...(acc[curr.date] || {}), | |
| "rate-limit": acc[curr.date]?.["rate-limit"] || 0, | |
| included: (acc[curr.date]?.included || 0) + Number(curr.count), | |
| }; | |
| break; | |
| const rpcUsageData = useMemo(() => { | |
| const mappedRPCUsage = rpcUsage.reduce( | |
| (acc, curr) => { | |
| acc[curr.date] = { | |
| ...(acc[curr.date] || {}), | |
| "rate-limit": (acc[curr.date]?.["rate-limit"] || 0) + (curr.usageType === "rate-limit" ? Number(curr.count) : 0), | |
| included: (acc[curr.date]?.included || 0) + (curr.usageType !== "rate-limit" ? Number(curr.count) : 0) | |
| }; | |
| return acc; | |
| }, |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
Merge activity
|
closes: TOOL-4079
### TL;DR
Added RPC usage chart to the team usage overview page.
### What changed?
- Created a new API endpoint `fetchRPCUsage` to retrieve RPC usage data from the analytics service
- Added a stacked bar chart to visualize RPC usage in the team usage overview page
- The chart displays both regular RPC requests and rate-limited requests
- Replaced the static "Unlimited Requests" display with an interactive visualization
### How to test?
1. Navigate to a team's usage overview page
2. Verify that the RPC Requests section now shows a stacked bar chart
3. Confirm that the chart displays data for the past 7 days
4. Check that the chart properly differentiates between regular RPC requests and rate-limited requests
### Why make this change?
This change provides teams with better visibility into their RPC usage patterns over time, allowing them to monitor both successful requests and rate-limited requests. This visualization helps teams understand their API consumption patterns and make informed decisions about their plan requirements.
<!-- start pr-codex -->
---
## PR-Codex overview
This PR introduces a new feature to fetch and display RPC usage data in the dashboard. It enhances the usage overview by integrating RPC metrics, providing insights into included and rate-limited requests.
### Detailed summary
- Added `RPCUsageDataItem` type and `fetchRPCUsage` function in `rpc.ts`.
- Updated `page.tsx` to fetch RPC usage data alongside account usage and subscriptions.
- Passed `rpcUsage` data to the `Usage` component.
- Modified `Usage` component to process and display RPC usage data using `ThirdwebBarChart`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Add_RPC_usage_chart_to_dashboard
branch
from
132a790 to
3f42f52
Compare
closes: TOOL-4079
TL;DR
Added RPC usage chart to the team usage overview page.
What changed?
fetchRPCUsageto retrieve RPC usage data from the analytics serviceHow to test?
Why make this change?
This change provides teams with better visibility into their RPC usage patterns over time, allowing them to monitor both successful requests and rate-limited requests. This visualization helps teams understand their API consumption patterns and make informed decisions about their plan requirements.
PR-Codex overview
This PR introduces functionality to fetch and display RPC usage data for teams, enhancing the dashboard's analytics capabilities.
Detailed summary
RPCUsageDataItemtype andfetchRPCUsagefunction inrpc.ts.fetchRPCUsagein the usage page to retrieve RPC data.Usagecomponent to accept and processrpcUsagedata.ThirdwebBarChartfor visual representation of RPC requests.