feat(web): add budget spend management #1224

ubinatus · 2024-03-24T20:56:48Z

What does this PR do?

I've added a Loom so that you can see the feature of interacting with budgets in action:
https://www.loom.com/share/986fc21fb8aa4ed6910494838826780d?sid=0a5fe5cd-c94b-4655-85ba-37afaf085ccc

The email that users will receive is the following:

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
Enhancement (small improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How should this be tested?

Requirements for testing:

Tinybird (to retrieve active keys and verification for usage calculation).
Stripe (basically for creating a paid workspace). Believe you could use dummy env vars for this so that stripeSchema doesn't throw when you create a paid workspace.
App
Worfklows (trigger.dev)
Test A: Handle a Budget.
1. Go to the Settings section and head to the Billings tab
2. You should be able to create a budget with the "Create Budget" button on the "Budgets section". There you can pass the name of the budget, the amount an additional emails to notify whenever the spending reaches the limit.
3. Once created, you are able to edit or delete your bucket.
Test B: Receive a spending limit notification
1. This test requires you spin the "workflows" trigger app.
2. Once the job is running (it's running on a 10min interval basis), try to exceed the specified limit directly on Tinybird and wait for the queue to check on your workspace budget.
3. After the job catched your spending exceeded you should: i) receive an email about the usage, ii) have a lastReachedAt property set on your budget (see db) and iii) should not receive more emails about that budget for the rest of the month cycle.

Checklist

Required

Appreciated

If a UI change was made: Added a screen recording or screenshots to this PR
Updated the Unkey Docs if changes were necessary

changeset-bot · 2024-03-24T20:56:52Z

⚠️ No Changeset found

Latest commit: cd38410

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2024-03-24T20:56:54Z

@ubinatus is attempting to deploy a commit to the Unkey Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2024-03-24T20:56:59Z

Thank you for following the naming conventions for pull request titles! 🙏

ubinatus · 2024-03-24T20:57:39Z

apps/workflows/jobs/end-trials.ts

@@ -71,7 +71,7 @@ client.defineJob({
      });

      const users = await io.runTask(`get users for workspace ${ws.id}`, () =>
-        getUsers(ws.tenantId),
+        getClerkOrganizationUsers(ws.tenantId),


Centralized the clerk usage with an util fn. It should handle Clerk's rate limit.

ubinatus · 2024-03-24T20:59:18Z

apps/workflows/jobs/spend-management.ts

+    const year = t.getUTCFullYear();
+    const month = t.getUTCMonth() + 1; // months are 0 indexed
+
+    // TODO: Find a way to pipe Tinybird for a given set of workspaceIds.


In case it becomes an expensive op, would be great to have a custom pipe to retrieve the active keys and verifications for a given list of workspaces IDs.

agreed, but it's fine for now

apps/workflows/jobs/spend-management.ts

ubinatus · 2024-03-24T21:02:06Z

apps/workflows/jobs/spend-management.ts

+    // TODO: Assumming admin users will not change frequently their emails, we could store in in the budget entity to avoid this step.
+    await io.runTask(
+      "retrieve workpaces admin emails from Clerk for exceeded budgets",


Since Unkey is not storing emails but retrieving them directly from Clerk, this job will need to retrieve the involved workspace admin's emails. So either i) retrieve it directly on the job or ii) save it on the budget and assume the admin user email won't change.

ubinatus · 2024-03-24T21:05:18Z

internal/db/src/schema/budgets.ts

+        /**
+         * Webhook URL to POST trigger when metered resources reached set amount.
+         * @dev TODO: Not used currently.
+         */
+        webhookUrl?: string;


Just explanatory to showcase future customization of budget notification with webhookUrls, Slack, etc.

ubinatus · 2024-03-24T21:06:34Z

internal/resend/src/client.tsx

@@ -101,4 +102,45 @@ export class Resend {
      console.error("Error occurred sending payment issue email ", JSON.stringify(error));
    }
  }
+
+  public async sendBatchBudgetExceeded(


Adds the batch feature from Resend in order to send the budget spending limit emails.

apps/web/app/(authenticated)/(app)/app/settings/billing/page.tsx

ubinatus · 2024-03-24T21:09:15Z

apps/web/app/(authenticated)/(app)/app/settings/billing/edit-budget-button.tsx

This could use the create-budget-button, as it only adds the enabled switch form item and interacts with a different mutation.

vercel · 2024-03-25T10:34:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
workflows	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2024 10:36am

ubinatus · 2024-03-31T03:18:15Z

internal/resend/emails/usage-budget-exceeded.tsx

Here I had to remove the "use client" directive.

Idk why but the job was failing when calling resend. (It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.). Very weird behaviour.

ubinatus · 2024-03-31T03:19:31Z

internal/billing/src/usage.ts

Created this billing util that is currently used in the spend-management workflow and in the ProUsage web component

ubinatus

Ready for review. By the way, I've noted that the endpoint__ratelimits_by_workspace__v1 pipe is missing in the internals/tinybird.

So, for the matter of this testing, I assumed the following pipe:

%
SELECT
    time
FROM mv__ratelimits_monthly__v1
where
    workspaceId = {{ String(workspaceId, required=True) }}
    and time = makeDate({{ Int64(year) }}, {{ Int64(month) }}, 1)
group by time

ubinatus added 8 commits March 4, 2024 21:05

feat(db): add budgets

7119309

feat(web): add budget crud

8f3024d

feat(workflows): add budged usage reached workflow

066ccb7

Merge branch 'main' into feature/spend-management

ccf7b1a

fix(resend): resolve budget email typos

1d60d10

refactor(workflows): use clerk utils

dc81f55

feat(workflows): add budged usage reached workflow

93b4f27

Merge branch 'main' into feature/spend-management

0389089

ubinatus commented Mar 24, 2024

View reviewed changes

chronark self-assigned this Mar 25, 2024

vercel bot deployed to Preview – workflows March 25, 2024 10:36 View deployment

ubinatus added 7 commits March 30, 2024 14:41

Merge branch 'main' into feature/spend-management

d3e0dd6

refactor: budget router

073a798

fix(budgets): resolve merge conflict

9107960

feat(budgets): include rate limits

eb8e278

fix(workflows): add possible clerk admin roles

c17e39d

feat(budgets): add tailwind config to react-email

980f0b0

feat(budgets): add ratelimits to current usage

cd38410

ubinatus marked this pull request as ready for review March 31, 2024 02:18

ubinatus requested a review from perkinsjr as a code owner March 31, 2024 02:18

ubinatus commented Mar 31, 2024

View reviewed changes

ubinatus requested a review from chronark March 31, 2024 03:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web): add budget spend management #1224

feat(web): add budget spend management #1224

ubinatus commented Mar 24, 2024 •

edited

changeset-bot bot commented Mar 24, 2024 •

edited

vercel bot commented Mar 24, 2024

github-actions bot commented Mar 24, 2024 •

edited

ubinatus Mar 24, 2024

ubinatus Mar 24, 2024

chronark Mar 25, 2024

ubinatus Mar 24, 2024

ubinatus Mar 24, 2024

ubinatus Mar 24, 2024

ubinatus Mar 24, 2024

vercel bot commented Mar 25, 2024 •

edited

ubinatus Mar 31, 2024

ubinatus Mar 31, 2024

ubinatus left a comment

feat(web): add budget spend management #1224

Are you sure you want to change the base?

feat(web): add budget spend management #1224

Conversation

ubinatus commented Mar 24, 2024 • edited

What does this PR do?

Type of change

How should this be tested?

Checklist

Required

Appreciated

changeset-bot bot commented Mar 24, 2024 • edited

⚠️ No Changeset found

vercel bot commented Mar 24, 2024

github-actions bot commented Mar 24, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Mar 25, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ubinatus left a comment

Choose a reason for hiding this comment

ubinatus commented Mar 24, 2024 •

edited

changeset-bot bot commented Mar 24, 2024 •

edited

github-actions bot commented Mar 24, 2024 •

edited

vercel bot commented Mar 25, 2024 •

edited