refactor: [M3-7382] - Use `object-storage/types` endpoint for pricing data #10468

mjac0bs · 2024-05-14T19:08:41Z

Description 📝

API is now returning pricing data through the /object-storage/types endpoint.

In this PR, prices can be dynamically displayed for base region pricing and DC-specific region pricing, using the prices returned in the new endpoint, for Object Storage.

Note

Outbound transfer overages will be done in a follow-up PR, since pricing for network transfer overages is the same across Cloud Manager and not currently being returned by the API. They are creating a new endpoint for this.

Changes 🔄

Created the necessary api-v4 endpoint, query, and interface to use the object-storage/types endpoint.
Modified getDCSpecificPriceByType to optionally accept interval (hourly or monthly) and decimal precision params and updated util unit test accordingly.
Created the necessary factories and endpoint in the MSW to support a mocked response to the API endpoint.
Added UX for error handling in the unlikely event that pricing cannot be calculated: disable primary action button and display tooltip error.
Added loading state for prices.
Updated unit tests.

Target release date 🗓️

5/28/24

Preview 📷

Before	After

N/A	Screen.Recording.2024-05-17.at.12.48.28.AM.mov

How to test 🧪

Prerequisites

(How to setup test environment)

Check out this PR and yarn up.
Go to http://localhost:3000/account/settings and Cancel Object Storage if it is enabled on your account.

Verification steps

(How to verify changes)

Go to http://localhost:3000/object-storage/buckets/create.
Select a region without DC specific pricing (e.g. us-east).
Open the network tab and filter on /types. Confirm the "additional storage overage" pricing is consistent with the overage pricing returned by the API endpoint AND that price is consistent with prod.
Repeat the same process for Sao Paulo (br-gru) and Jakarta (id-cgk).
Fill out the necessary fields, click Create Bucket, and confirm the Enable Object Storage modal pops up with no regressions. Cancel out of the modal - don't enable OBJ.
Use the Network tools to slow and block network requests - confirm that loading and error behavior is handled gracefully in the Create Bucket drawer if prices can't be retrieved from the object-storage/types endpoint.
Go to http://localhost:3000/object-storage/access-keys.
Fill out the necessary fields, click Create Access Key, and confirm the Enable Object Storage modal pops up with no regressions. Cancel out of the modal - don't enable OBJ.
Ensure object storage e2e tests pass.
Ensure updated unit tests pass:

yarn test OveragePricing dynamicPricing EnableObjectStorageModal

As an Author I have considered 🤔

Check all that apply

mjac0bs · 2024-05-20T15:39:11Z

packages/api-v4/src/object-storage/prices.ts

None of the other object-storage endpoint files seemed like a good fit for this, so I created a new file, prices.ts. I didn't name it types.ts, since that's another file. This seemed like the most straight-forward way to add the new endpoint.

mjac0bs · 2024-05-20T15:39:56Z

packages/manager/cypress/e2e/core/objectStorage/enable-object-storage.spec.ts

All of these constants are old and can be cleaned up. They were leftovers from earlier stages of the project, pre-full GA.

mjac0bs · 2024-05-20T15:43:03Z

packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx

-            ? objectStoragePriceIncreaseMap[regionId].storage_overage
-            : OBJ_STORAGE_PRICE.storage_overage}{' '}
+          {storageOveragePrice && !isError
+            ? parseFloat(storageOveragePrice)


Using parseFloat here to truncate trailing zeros - e.g. we will display $0.02 and not $0.020, but otherwise display to 3 decimal places for the other overage prices.

mjac0bs · 2024-05-20T15:47:16Z

packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.test.tsx

+  it('displays placeholder unknown pricing and disables the primary action button if pricing is not available', () => {
+    queryMocks.useObjectStorageTypesQuery.mockReturnValue({
+      data: undefined,
+      isError: true,
+    });
+
+    const { getByTestId, getByText } = render(
+      wrapWithTheme(<EnableObjectStorageModal regionId="us-east" {...props} />)
+    );
+
+    const primaryActionButton = getByTestId('enable-obj');
+
+    expect(getByText(`${UNKNOWN_PRICE}/month`, { exact: false })).toBeVisible();
+    expect(primaryActionButton).toBeDisabled();
+  });


Getting the UI in this state would require manually manipulating the code, since you can't Create Bucket if prices are invalid, and therefore would not be able to get to this modal. We can confirm error state for invalid pricing in the Enable Object Storage modal works with this test case passing.

mjac0bs · 2024-05-20T15:49:45Z

packages/manager/src/utilities/pricing/dynamicPricing.ts

Updates to this function were to account for the object storage storage overages, which are displayed by their hourly rate. Previously, this util was not flexible enough and calculated only monthly prices and only to a fixed 2 decimal places.

github-actions · 2024-05-20T15:59:27Z

Coverage Report: ✅
Base Coverage: 81.62%
Current Coverage: 81.63%

bnussman-akamai

Confirmed pricing matches production ✅

packages/manager/src/queries/objectStorage.ts

packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx

carrillo-erik · 2024-05-22T22:12:17Z

packages/manager/src/factories/types.ts

+      monthly: 5.0,
+    },
+  ],
+  transfer: 1000,


Not specific to your work, just curious to know what transfer represents in the payload?

It's the 1TB transfer quota (added to the global network transfer pool) that comes with enabling Object Storage. (Docs)

carrillo-erik · 2024-05-22T22:33:29Z

packages/manager/src/queries/objectStorage.ts

+    queryFn: getAllObjectStorageTypes,
+    queryKey: [queryKey, 'types'],
+    ...queryPresets.oneTimeFetch,
+    enabled,


How do we determine whether enabled should be true or false?

When the query hook is called, we can pass in a boolean value to indicate whether the query should be enabled or not (see here and here). Otherwise, by default, it is enabled, so we don't need to pass anything here.

carrillo-erik

Verified the functionality works as expected and test passed locally. I left two questions/comments but those are for my own knowledge. ✅

carrillo-erik · 2024-05-23T16:00:38Z

packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx

@@ -19,13 +19,15 @@ import {
  useCreateBucketMutation,
  useObjectStorageBuckets,
  useObjectStorageClusters,
+  useObjectStorageTypesQuery,
 } from 'src/queries/objectStorage';
 import { useProfile } from 'src/queries/profile';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { isFeatureEnabled } from 'src/utilities/accountCapabilities';


Just noticed this, isFeatureEnabled has been deprecated in favor of isFeatureEnabledV2.

True. Out of scope of this PR, though.

mjac0bs self-assigned this May 14, 2024

mjac0bs added Work in Progress DC-Specific Pricing labels May 14, 2024

mjac0bs added 6 commits May 15, 2024 12:32

Set up endpoint, query, and save work

216b200

Add loading and error state for Create Bucket button

78d8142

Add dynamic pricing to modal; add loading/error state to drawer

fa8e243

Add dynamicPricing test coverage for interval

91c1b2b

Add decimal precision to util args

d9e2701

Add WIP tests

c1d423a

mjac0bs force-pushed the M3-7382-add-dynamic-pricing-for-object-storage branch from 2d092a7 to c1d423a Compare May 15, 2024 19:32

mjac0bs added 8 commits May 16, 2024 23:54

Add mock endpoint to MSW

e504163

Clean up loading

9f3a6ed

Update OveragePricing test coverage

4ba4291

Update dynamicPricing utils test coverage

27e2ef5

Clean up to disable types query if only creating an access key

87925d7

Add test coverage to modal; clean up

519f687

Clean up old constants in test spec

702f2ce

Remove trailing zero for base price storage overage

e7ec121

mjac0bs removed the Work in Progress label May 20, 2024

mjac0bs marked this pull request as ready for review May 20, 2024 15:31

mjac0bs requested a review from a team as a code owner May 20, 2024 15:31

mjac0bs requested review from jdamore-linode and bnussman-akamai and removed request for a team May 20, 2024 15:31

Add changesets

2517731

mjac0bs requested a review from a team as a code owner May 20, 2024 15:35

mjac0bs requested review from cliu-akamai and removed request for a team May 20, 2024 15:35

mjac0bs added @linode/api-v4 Changes are made to the @linode/api-v4 package Ready for Review labels May 20, 2024

mjac0bs commented May 20, 2024

View reviewed changes

Clean up from self review

5ad54d8

bnussman-akamai approved these changes May 21, 2024

View reviewed changes

packages/manager/src/queries/objectStorage.ts Outdated Show resolved Hide resolved

packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx Outdated Show resolved Hide resolved

Address feedback: @bnussman-akamai

224d943

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label May 21, 2024

mjac0bs requested a review from carrillo-erik May 22, 2024 19:03

carrillo-erik reviewed May 22, 2024

View reviewed changes

carrillo-erik reviewed May 23, 2024

View reviewed changes

carrillo-erik approved these changes May 23, 2024

View reviewed changes

carrillo-erik reviewed May 23, 2024

View reviewed changes

mjac0bs added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! Ready for Review labels May 23, 2024

mjac0bs merged commit f99456f into linode:develop May 23, 2024
18 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-7382] - Use `object-storage/types` endpoint for pricing data #10468

refactor: [M3-7382] - Use `object-storage/types` endpoint for pricing data #10468

mjac0bs commented May 14, 2024 •

edited

mjac0bs May 20, 2024

mjac0bs May 20, 2024

mjac0bs May 20, 2024

mjac0bs May 20, 2024

mjac0bs May 20, 2024

github-actions bot commented May 20, 2024 •

edited

bnussman-akamai left a comment

carrillo-erik May 22, 2024

mjac0bs May 23, 2024

carrillo-erik May 22, 2024

mjac0bs May 23, 2024

carrillo-erik left a comment

carrillo-erik May 23, 2024

mjac0bs May 23, 2024

refactor: [M3-7382] - Use object-storage/types endpoint for pricing data #10468

refactor: [M3-7382] - Use object-storage/types endpoint for pricing data #10468

Conversation

mjac0bs commented May 14, 2024 • edited

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

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

github-actions bot commented May 20, 2024 • edited

bnussman-akamai left a 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

carrillo-erik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

refactor: [M3-7382] - Use `object-storage/types` endpoint for pricing data #10468

refactor: [M3-7382] - Use `object-storage/types` endpoint for pricing data #10468

mjac0bs commented May 14, 2024 •

edited

github-actions bot commented May 20, 2024 •

edited