feat(billing): sidenav compute gauge above sign-out row (meter mode)#4126
Conversation
Add BillingComputeGaugeComponent in billing/components showing meterUsed/meterQuota with a color-coded progress bar (primary < 80 %, warning >= 80 %, error >= 100 %). Hover reveals remaining units + reset date. Gated on meterMode + isLoggedIn so non-billing apps stay dormant. Mounted in core.navigation.component.vue above the Sign out row, following the same cross-module import pattern as user.view.vue importing BillingSubscriptionsComponent. 10 unit tests added.
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4126 +/- ##
=======================================
Coverage 99.54% 99.54%
=======================================
Files 31 31
Lines 1089 1089
Branches 302 302
=======================================
Hits 1084 1084
Misses 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Adds a compact “compute usage” gauge to the sidenav’s bottom section (above Sign out) for meter-mode billing apps, plus a new billing component and unit tests to validate visibility and display behavior.
Changes:
- Mount a billing compute gauge in the core navigation drawer append slot.
- Add
BillingComputeGaugeComponentto rendermeterUsed / meterQuotawith threshold-based coloring and an expanded detail line. - Add unit tests for visibility gating, thresholds, and edge cases.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/modules/core/components/core.navigation.component.vue | Mounts the compute gauge in the sidenav and registers the billing component. |
| src/modules/billing/components/billing.computeGauge.component.vue | Implements the compact meter gauge UI + computed state (visibility, percent, color, reset date). |
| src/modules/billing/tests/billing.computeGauge.component.unit.tests.js | Adds unit tests covering gating, rendering, thresholds, and edge cases. |
| </v-list> | ||
| </template> | ||
| <!-- Compute usage gauge — visible only in meter-mode apps --> | ||
| <billingComputeGauge /> |
| tabindex="0" | ||
| role="region" | ||
| aria-label="Compute usage" | ||
| @mouseenter="isExpanded = true" | ||
| @mouseleave="isExpanded = false" | ||
| @focus="isExpanded = true" | ||
| @blur="isExpanded = false" | ||
| > | ||
| <div class="d-flex align-center justify-space-between mb-1"> | ||
| <span id="compute-gauge-label" class="text-label-small text-medium-emphasis">Compute</span> | ||
| <span class="text-label-small font-weight-medium">{{ meterUsed }} / {{ meterQuota }}</span> |
| * @desc Progress as a 0–100 percentage. Guards against division by zero when | ||
| * meterQuota is 0 (e.g. free plan before any grant lands). | ||
| * @returns {number} | ||
| */ | ||
| const progressPercent = computed(() => { | ||
| const quota = meterQuota.value; | ||
| if (!quota) return 0; | ||
| return Math.min(100, Math.round((meterUsed.value / quota) * 100)); | ||
| }); | ||
|
|
||
| /** | ||
| * @desc Bar color — primary below 80 %, warning at 80–99 %, error at 100 %+. | ||
| * @returns {'primary'|'warning'|'error'} | ||
| */ | ||
| const barColor = computed(() => { | ||
| const pct = progressPercent.value; |
| * @desc Human-readable reset date derived from the current meter week. | ||
| * Falls back to an em-dash when the billing store has no reset date yet. | ||
| * @returns {string} | ||
| */ | ||
| const resetDate = computed(() => { | ||
| const d = billingStore.usageMeter?.weekResetAt; | ||
| if (!d) return '—'; | ||
| return new Date(d).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); | ||
| }); |
| const wrapper = mountComponent(); | ||
| expect(wrapper.vm.barColor).toBe('primary'); | ||
| }); | ||
|
|
Summary
Boundary note
The `core.navigation.component.vue` (core module) imports `BillingComputeGaugeComponent` (billing module). This crosses the core/billing boundary the same way `user.view.vue` already imports `BillingSubscriptionsComponent`. Billing is a devkit core dependency (not optional) — all downstream projects include it. A consolidated cross-module refactor is tracked as tech debt; this PR does not introduce a new pattern.
Test plan