feat: [M3-6729] - Add VPC column to Linodes landing table #9485

coliu-akamai · 2023-08-02T21:16:26Z

Description 📝

Added vpc column to linode landing table so that users can see what vpc a linode is associated with

Major Changes 🔄

add vpc column to linode landing table, add functionality to include vpc information (vpc's label & id) with a linode's data
changed IP Address column to public iP address

Preview 📷

How to test 🧪

Turn on mocks and navigate to linodes landing page to see the vpc column (you can see the vpc column without the mock as long as you have the vpc flag enabled, but you won't be able to see any mock data). Clicking on a vpc label should bring you to the vpc detail page (currently blank / a todo) :D

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

coliu-akamai · 2023-08-03T17:50:32Z

packages/manager/src/utilities/linodes.ts

+        // a linode should have only one vpc associated with it (?) so we can
+        // short circuit once we find the associated vpc
+        return vpc;


Was seeing in the mock examples that linodes would often have multiple vpcs associated with them, but just wanted to confirm that in the actual live data, a linode will have at most one vpc associated with it (although this function may eventually be unnecessary if the api endpoints get updated)

packages/manager/src/utilities/linodes.ts

packages/manager/src/features/Linodes/index.tsx

coliu-akamai · 2023-08-03T17:57:24Z

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

-  const { data: accountMaintenanceData } = useAllAccountMaintenanceQuery(
-    {},
-    { status: { '+or': ['pending, started'] } }
-  );
-
-  const maintenance = accountMaintenanceData?.find(
-    (m) => m.entity.id === id && m.entity.type === 'linode'
-  );


Removed this bc we seem to already have this information associated with the linodes due to this functionality being done in src/features/Linodes/index.tsx and the information needed for the maintenance being passed along from the parent components, but lmk if I missed anything!

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx

bnussman-akamai · 2023-08-04T14:15:04Z

@jaalah-akamai Should we build this right now given that the API might add /v4/linode/instances/:id/vpcs for us to use for this purpose?

jaalah-akamai · 2023-08-04T14:44:12Z

I should probably clarify - API will not be adding a new endpoint at this time, but they will correct the existing endpoint /linode/instances/{linode id}/configs/{config id}/interfaces to provide the VPC id which is needed to more easily determine the VPC label for that column

jaalah-akamai · 2023-08-04T14:50:49Z

@jaalah-akamai Should we build this right now given that the API might add /v4/linode/instances/:id/vpcs for us to use for this purpose?

I will also add this fix is pending API approval, so I'm for moving forward with the approach we know will work (even though it's a roundabout way of getting the VPC label).

Update: This will be out in Alpha by Tuesday, so let's wait to finish this work

bnussman-akamai · 2023-08-04T17:03:04Z

So for every Linode row we'll have to do a GET /v4/linode/instances/{linode id}/configs and a GET /v4/linode/instances/{linode id}/configs/{config id}/interfaces for every config? That isn't good. At that point, Connie original solution would be much better.

coliu-akamai · 2023-08-04T17:24:00Z

I think the API team's plan is to add the VPC id to the interface config return object, so just using GET /v4/linode/instances/{linode id}/configs to a get a list of all the configs should do the trick (and then I'd need to loop through every config to be able to loop through all their interfaces, and then just get the first interface with a purpose of vpc. From there I'd have to do a GET /vpcs/<vpc_id> so that I can also get the vpc's label). iirc, the config return object already has all the interface objects inside it

tbh, I might still need to put this functionality into the Linodes/index.tsx file in order to be able to have the table sort by the vpc label -- earlier, when I'd had a solution of getting the vpc id and label inside the Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx file only, the sorting didn't work. I can look into this more once the new api spec comes out on Tuesday though! 👀

bnussman-akamai · 2023-08-07T13:46:01Z

Okay, understood @coliu-akamai.

I do want to bring some attention to making vpc label sortable on the client-side. I don't think we should let people order by vpc label. Practices like this have been blocking us from API paginating and sorting Linodes. I think the only way we should allow this is if the /linode/instances endpoint returns a vpc_label , which would mean the API can sort by it on the server-side. @jaalah-akamai

dwiley-akamai

Left a couple of comments -- I would agree with not allowing for sorting by the VPC label in the Linodes landing table unless the API supports it.

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx

coliu-akamai · 2023-08-11T14:28:28Z

updated to reflect the new api changes -- have also made the vpc column not sortable

bnussman-akamai

Looking good, just have a few small items before I approve ✅

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

bnussman-akamai · 2023-08-14T17:55:49Z

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

+            <TableCell noWrap>
+              {vpcLabel && (vpcId === 0 || vpcId) && (
+                <Link tabIndex={0} to={`/vpc/${vpcId}`}>
+                  {vpcLabel}


Should we have some kind of state for when there is no VPC attached?

Along the same lines: because we have to make a lot of API calls now, should we add a <Skeleton /> as a placeholder while we load the data? We do this for NodeBalancer Ports and it looks nice.

…/LinodeRow.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

coliu-akamai · 2023-08-14T18:36:01Z

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

+              {vpcLoading || configsLoading ? (
+                <Skeleton />
+              ) : vpcLabel ? (
+                <Link tabIndex={0} to={`/vpc/${vpcId}`}>
+                  {vpcLabel}
+                </Link>
+              ) : (
+                'None'


@bnussman-akamai added the skeleton / 'None'! I think the skeleton is definitely a nice addition for loading. The 'none' looked good too imo -- would we need to get UX approval for this?

I think it looks great! We probably should get UX approval. Can you reach out to Andrew?

Andrew approved! 🎉

jdamore-linode · 2023-08-14T19:06:26Z

Hey @coliu-akamai, just a heads up that there's an E2E test failure! It's nothing big, just a test expecting to see "IP Address" rather than "Public IP Address" in the Linodes landing page. The failure is in manager/cypress/core/e2e/linodes/smoke-linode-landing-table.spec.ts (and the specific test is checks the table and action menu buttons/labels).

You can fix that test and verify your changes with this command while Cloud's running locally:

yarn cy:run -s "cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts"

Happy to help out if you have any trouble!

coliu-akamai · 2023-08-14T19:19:57Z

@jdamore-linode thanks for pointing that out! Those tests are now passing on local so hopefully they pass here too 🎉

bnussman-akamai

Nice job! 🚀

jdamore-linode

Great work, @coliu-akamai !

dwiley-akamai

Good work on this! There's one cleanup item but I'm approving pending that being addressed.

packages/validation/src/linodes.schema.ts

@bnussman-akamai

* add vpc column to linode landing pg table * roundabout way to get vpcs associated with a linode * add comments and todos * sortable table row for vpcs now * remove unneeded comment * ...fix comment * changeset and update test * linode row trying to test for vpc column wip * test vpc column shows up with feature flag * updated linode row vpc column * Added changeset: Update linode config interface return object as per new API spec * Update packages/api-v4/.changeset/pr-9485-upcoming-features-1691764196950.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> * Update packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> * address feedback * Added changeset: Update validation for `linodeInterfaceSchema`: include validation for `vpc_id` and update `subnet` to `subnet_id` * Update packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> * address feedback @bnussman-akamai * update cypress test * remove vpc_id from linode interface schema --------- Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

coliu-akamai added 5 commits August 1, 2023 14:09

add vpc column to linode landing pg table

5ad2576

Merge branch 'develop' into feat-m3-6729

7c7aeac

roundabout way to get vpcs associated with a linode

fd54d0d

Merge branch 'develop' into feat-m3-6729

75fdffc

add comments and todos

c5cbae0

coliu-akamai commented Aug 2, 2023

View reviewed changes

bnussman-akamai assigned coliu-akamai Aug 3, 2023

coliu-akamai added 3 commits August 3, 2023 13:45

sortable table row for vpcs now

1701322

remove unneeded comment

5284cd0

...fix comment

8356a4d

coliu-akamai commented Aug 3, 2023

View reviewed changes

coliu-akamai added the VPC Relating to VPC project label Aug 3, 2023

changeset and update test

d146bbe

coliu-akamai marked this pull request as ready for review August 3, 2023 18:30

bnussman-akamai added the Ready for Review label Aug 3, 2023

coliu-akamai added 2 commits August 3, 2023 16:30

linode row trying to test for vpc column wip

db8aa49

test vpc column shows up with feature flag

faf21e1

coliu-akamai added Work in Progress and removed Ready for Review labels Aug 4, 2023

dwiley-akamai reviewed Aug 9, 2023

View reviewed changes

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx Show resolved Hide resolved

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx Outdated Show resolved Hide resolved

updated linode row vpc column

2d653e1

coliu-akamai added Ready for Review and removed Work in Progress labels Aug 11, 2023

coliu-akamai added @linode/api-v4 Changes are made to the @linode/api-v4 package @linode/validation Changes are made to the @linode/validation package labels Aug 11, 2023

bnussman-akamai self-requested a review August 14, 2023 13:21

bnussman-akamai reviewed Aug 14, 2023

View reviewed changes

coliu-akamai and others added 2 commits August 14, 2023 14:11

Update packages/manager/src/features/Linodes/LinodesLanding/LinodeRow…

20cfb48

…/LinodeRow.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

address feedback @bnussman-akamai

f3fe379

coliu-akamai commented Aug 14, 2023

View reviewed changes

coliu-akamai requested review from bnussman-akamai and dwiley-akamai August 14, 2023 18:38

Merge branch 'develop' into feat-m3-6729

14d3938

update cypress test

62577fa

bnussman-akamai approved these changes Aug 14, 2023

View reviewed changes

bnussman-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Aug 14, 2023

jdamore-linode approved these changes Aug 14, 2023

View reviewed changes

bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Aug 14, 2023

dwiley-akamai approved these changes Aug 14, 2023

View reviewed changes

packages/validation/src/linodes.schema.ts Outdated Show resolved Hide resolved

remove vpc_id from linode interface schema

091181e

coliu-akamai merged commit 2b55810 into linode:develop Aug 15, 2023
11 checks passed

bnussman-akamai mentioned this pull request Aug 16, 2023

fix: Failing LinodeRow.test.tsx unit test #9553

Merged

This was referenced Aug 17, 2023

Release v1.100.0 - release → staging #9562

Merged

Release v1.100.0 - staging → master #9571

Merged

coliu-akamai deleted the feat-m3-6729 branch August 25, 2023 03:49

coliu-akamai mentioned this pull request Sep 1, 2023

change: [M3-7077] - Remove VPC column from Linodes landing page table #9625

Merged

coliu-akamai mentioned this pull request Oct 18, 2023

feat: [M3-7257] - Invalidate VPC-related queries after deleting a linode #9814

Merged

12 tasks

coliu-akamai mentioned this pull request Nov 13, 2023

feat: [M3-7328] - Add 'Reboot Needed' status for Linodes assigned to VPCs #9893

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-6729] - Add VPC column to Linodes landing table #9485

feat: [M3-6729] - Add VPC column to Linodes landing table #9485

coliu-akamai commented Aug 2, 2023 •

edited

Loading

coliu-akamai Aug 3, 2023

coliu-akamai Aug 3, 2023

bnussman-akamai commented Aug 4, 2023

jaalah-akamai commented Aug 4, 2023

jaalah-akamai commented Aug 4, 2023 •

edited

Loading

bnussman-akamai commented Aug 4, 2023 •

edited

Loading

coliu-akamai commented Aug 4, 2023 •

edited

Loading

bnussman-akamai commented Aug 7, 2023

dwiley-akamai left a comment

coliu-akamai commented Aug 11, 2023

bnussman-akamai left a comment

bnussman-akamai Aug 14, 2023

bnussman-akamai Aug 14, 2023

coliu-akamai Aug 14, 2023 •

edited

Loading

bnussman-akamai Aug 14, 2023

coliu-akamai Aug 14, 2023

jdamore-linode commented Aug 14, 2023 •

edited

Loading

coliu-akamai commented Aug 14, 2023

bnussman-akamai left a comment

jdamore-linode left a comment

dwiley-akamai left a comment

feat: [M3-6729] - Add VPC column to Linodes landing table #9485

feat: [M3-6729] - Add VPC column to Linodes landing table #9485

Conversation

coliu-akamai commented Aug 2, 2023 • edited Loading

Description 📝

Major Changes 🔄

Preview 📷

How to test 🧪

coliu-akamai Aug 3, 2023

Choose a reason for hiding this comment

coliu-akamai Aug 3, 2023

Choose a reason for hiding this comment

bnussman-akamai commented Aug 4, 2023

jaalah-akamai commented Aug 4, 2023

jaalah-akamai commented Aug 4, 2023 • edited Loading

bnussman-akamai commented Aug 4, 2023 • edited Loading

coliu-akamai commented Aug 4, 2023 • edited Loading

bnussman-akamai commented Aug 7, 2023

dwiley-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Aug 11, 2023

bnussman-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai Aug 14, 2023

Choose a reason for hiding this comment

bnussman-akamai Aug 14, 2023

Choose a reason for hiding this comment

coliu-akamai Aug 14, 2023 • edited Loading

Choose a reason for hiding this comment

bnussman-akamai Aug 14, 2023

Choose a reason for hiding this comment

coliu-akamai Aug 14, 2023

Choose a reason for hiding this comment

jdamore-linode commented Aug 14, 2023 • edited Loading

coliu-akamai commented Aug 14, 2023

bnussman-akamai left a comment

Choose a reason for hiding this comment

jdamore-linode left a comment

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Aug 2, 2023 •

edited

Loading

jaalah-akamai commented Aug 4, 2023 •

edited

Loading

bnussman-akamai commented Aug 4, 2023 •

edited

Loading

coliu-akamai commented Aug 4, 2023 •

edited

Loading

coliu-akamai Aug 14, 2023 •

edited

Loading

jdamore-linode commented Aug 14, 2023 •

edited

Loading