A detailed summary of the pagination and scaling efforts I championed.
Overview
Kubecost was having an issue scaling large sized customers with several thousand nodes. This project was done in conjunction with a POC for lyft who was wanting to use Kubecost to monitor their large spend.
Objective
Scale the application to support 100x the amount of nodes and enable sales into a previously inaccessible market segment using duckDb and server side pagination. Create a user friendly and reusable set of components and logic on the front end to support the new backend aggregator functionality.
Identifying Feature Requirements
How does the new DB and api logic work on the frontend.
How to quickly POC this for our top 3 features(allocation, asset, and cloud cost monitoring).
How to take the initial design and make sure it scales and is reusable on the frontend.
Known Pitfalls
Time that I would have to implement something quick and still maintain code standards as well as making it so it could grow and expand where we begin to implement pagination in other places.
Changes in API logic and the shape of data returned that had not been expected.
Handling loading states for separate queries controlling multiple components on the same page.
Engineering Design
Building pagination controls and logic to match current components.
Creating new pagination query parameters for react query.
Re architecting components to support new api calls.
Staggering api calls to make loading states and ux more friendly.
Implementation
Initial Implementation was scope to a reusable hook with a set of pagination controls. I wanted to be able to use this in as many places as needed in the application and make it easy for anyone on the team to add pagination to a new or existing feature/page. This initial attempt worked for our lyft POC but I went back in and made it a bit more reusable with a context instead of a hook for better state management. Below are code snippets of the initial implementation as well as it’s final form.
/w=3840,quality=90,fit=scale-down)
Measuring Success
The skunkworks/aggregator project was a make or break for Kubecost, our inability to scale was costing us larger customers and we initially sought the project to close lyft. We did not close lyft but this initiative did help us scale to turn around and close customers such as Apple(900k), Ford(2mm) and Verizon(250k) as well as providing even more usability for our current customers and numerous others afterwards. Closing these deals helped us land a successful exit in September of 2024
