Skip to content

Instantly share code, notes, and snippets.

@pyreta
Last active November 23, 2021 16:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pyreta/eaab8e4d0d3894eaf1892e7b47cc20b7 to your computer and use it in GitHub Desktop.
Save pyreta/eaab8e4d0d3894eaf1892e7b47cc20b7 to your computer and use it in GitHub Desktop.

CoreWeave Design Challenge

In this challenge you will be provided with some screen shots from cloud.coreweave.com along with the colors used. You will then be given a list of specifications for a new feature design. Your submission will be a Figma (or something comparable) mockup of the feature UI meeting all of the specifications and matching our current brand. Bonus points for mobile and tablet views!

Complete as many of the specs as you can in time you are allotted. Any questions feel free to reach out.

Feature you will be creating - Storage Volume Management

A Storage Volume is essentially a virtual hard drive. Users can create different size volumes with various configurations and attach them to other virtual deployments in their namespace. The Storage Volume Management page will provide a list of all existing volumes already created in the namespace, as well as the ability to add, edit, delete, and clone each volume.

Storage Volume Attributes

Each volume has the following attributes:

  1. Name - (lowercase and no spaces)
  2. Type - (either NVMe or SSD)
  3. Filesystem Type - ("Shared Filesystem" or "Block Storage")
  4. Age/Date created
  5. Size - (e.g. 100 Gi)
  6. Cost per month (e.g. $0.35)
  7. Amount used - (e.g. 50 Gi)
  8. Region - (location where actual storage hardware lives - Either ORD1 (Chicago), EWR1 (New York) or LAS1 (Las Vegas))
  9. Tags - This can be any number of tags with any key/value pair (e.g. some/tag: Completed). Note, users must be able to add/delete tags (keys and values) as well
  10. Status - Either "Bound" (ready) or "Unbound" (not set up yet).

Modals

  1. New Volume - a user must be able to provide the name, region, type, filesystem type, size as well as any number of tags. As they ar updating the info, there should be a price per month value showing the cost of their settings. You can use $0.35 as the value.
  2. Edit Volume - A user must be able to increase their volume size, as well ass add/remove tags. Their price change from previous cost per month to their current cost should be displayed. Could use $0.35 and $0.45 respectively.
  3. Delete and Clone - just an "Are you sure?" type message

Simple/Detailed view

Find a way to have a simple list display and also allow the option for a more detailed view, displaying more of the attributes. You can determine what to show in what view and how to show it. This can be a modal, a dropdown, or anything else.

Totals

We want to display total cost per month for all volumes somewhere, as well as total used and total remaining

Filter Search

There should an input to search for an existing volume/type etc.

Sortable Columns

Some columns in list should be sortable at your discretion.

Existing Screenshots

Login: image

Dashboard: image

API Access page: image

Account: image

Colors used

  • #1a7edf #1a7edf
  • #132444 #132444
  • #ffffff #ffffff
  • #182c51 #182c51
  • #1c3157 #1c3157
  • #132444c7 #132444c7
  • #29426e #29426e
  • #315cab #315cab
  • #e9ecef3d #e9ecef3d

Real life ticket:

Below is the actual spec used to create this feature. Feel free to use this as much or as little as you like. All the information you need should be shown above, but these inital descriptions and screen shot ideas may be helpful:

Outline and requirements

List View

The first view in /volume-management should be the list of all the volumes that are available and in the users namespace. I think this should just be a few rows(table rows, etc) that give some general information about the PVC. I think everything we would want to show for this is in the screenshot below except we might was to have a dedicated region key?? (The defined region will be in the storage class so not sure how important that is) A rough example of what this could look like: image I like this, we can put all of the per volume actions like this(clone, edit, delete): image

Details Modal

In the detailed view it might be good for us to display any of the information that is not outlined in the general list view. This can include things like labels, annotations, owner references, etc. I also think for this we should use a modal instead of a separate view like I've posted below but Example Detailed View: image

Edit Modal

A view to edit/manage the Volume (On our version we will want to dumb this down, if someone knew how to edit YAMLs they wouldn't need the UI in the first place 😛 ). I will update this w/ the exact editable values we will want for this. We should also show pricing changes/current price image

Delete Modal

Pretty standard I think image

Creation Modal

We also will want a creation modal (really the whole point) that will allow users to create Volumes in a nice UI. We can most likely share inputs from here and the Edit modal/view. We want to include pricing data for this.

Clone Modal

This will allow users to create clones of Volumes. Useful for backing up VMs. Can be a pretty simple modal, will update with the exact requirements. Include pricing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment