linode · coliu-akamai · Aug 15, 2023 · Aug 1, 2023 · Aug 1, 2023 · Aug 2, 2023
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Include `vpc_id` and rename `subnet` to `subnet_id` in Linode config interface return object ([#9485](https://github.com/linode/manager/pull/9485))
@@ -164,7 +164,8 @@ export interface Interface {
   purpose: InterfacePurpose;
   ipam_address: string | null;
   primary?: boolean;
-  subnet?: number | null;
+  subnet_id?: number | null;
+  vpc_id?: number | null;
   ipv4?: ConfigInterfaceIPv4;
   ipv6?: ConfigInterfaceIPv6;
   ip_ranges?: string[];

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add VPC column to linodes landing page table ([#9485](https://github.com/linode/manager/pull/9485))
@@ -270,7 +270,7 @@ describe('linode landing checks', () => {
       fbtVisible('Plan');
     });
     getVisible('[aria-label="Sort by ipv4[0]"]').within(() => {
-      fbtVisible('IP Address');
+      fbtVisible('Public IP Address');
     });
 
     getVisible(`tr[data-qa-linode="${label}"]`).within(() => {

@@ -9,3 +9,22 @@ export const LinodeConfigInterfaceFactory = Factory.Sync.makeFactory<Interface>(
     purpose: 'vlan',
   }
 );
+
+export const LinodeConfigInterfaceFactoryWithVPC = Factory.Sync.makeFactory<Interface>(
+  {
+    id: Factory.each((i) => i),
+    ipam_address: '10.0.0.1/24',
+    label: Factory.each((i) => `interface-${i}`),
+    purpose: 'vpc',
+    ipv4: {
+      vpc: '10.0.0.0',
+      nat_1_1: 'some nat',
+    },
+    ipv6: {
+      vpc: '2001:0db8:85a3:0000:0000:8a2e:0370:7334',
+    },
+    ip_ranges: ['192.0.2.0/24'],
+    vpc_id: Factory.each((i) => i + 1),
+    subnet_id: Factory.each((i) => i),
+  }
+);
@@ -1,7 +1,10 @@
 import { Config } from '@linode/api-v4/lib/linodes/types';
 import * as Factory from 'factory.ts';
 
-import { LinodeConfigInterfaceFactory } from 'src/factories/linodeConfigInterfaceFactory';
+import {
+  LinodeConfigInterfaceFactory,
+  LinodeConfigInterfaceFactoryWithVPC,
+} from 'src/factories/linodeConfigInterfaceFactory';
 
 const generateRandomId = () => Math.floor(Math.random() * 10000);
 
@@ -13,6 +16,8 @@ const [vlanInterface1, vlanInterface2] = LinodeConfigInterfaceFactory.buildList(
   2
 );
 
+const vpcInterface = LinodeConfigInterfaceFactoryWithVPC.build();
+
 export const linodeConfigFactory = Factory.Sync.makeFactory<Config>({
   comments: '',
   created: '2018-06-26T16:04:28',
@@ -49,6 +54,7 @@ export const linodeConfigFactory = Factory.Sync.makeFactory<Config>({
     publicInterface,
     vlanInterface1,
     vlanInterface2,
+    vpcInterface,
   ],
   kernel: 'linode/grub2',
   label: 'My Arch Linux Disk Profile',

@@ -1,12 +1,49 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 
+import { QueryClient } from 'react-query';
+
+import { linodeFactory, linodeConfigFactory, vpcFactory } from 'src/factories';
+import {
+  mockMatchMedia,
+  renderWithTheme,
+  wrapWithTableBody,
+} from 'src/utilities/testHelpers';
+
 import { mockNotification } from 'src/__data__/notifications';
 
-import { RenderFlag } from './LinodeRow';
+import { RenderFlag, LinodeRow } from './LinodeRow';
+
+const queryClient = new QueryClient();
+
+beforeAll(() => mockMatchMedia());
+afterEach(() => {
+  queryClient.clear();
+});
+
+jest.mock('src/hooks/useFlags', () => ({
+  __esModule: true,
+  useFlags: jest.fn().mockReturnValue({ vpc: true }),
+}));
+
+jest.mock('src/queries/linodes/configs.ts', () => ({
+  useAllLinodeConfigsQuery: jest.fn().mockReturnValue({
+    data: linodeConfigFactory.buildList(1),
+    isLoading: false,
+    error: {},
+  }),
+}));
+
+jest.mock('src/queries/vpcs.ts', () => ({
+  useVPCQuery: jest.fn().mockReturnValue({
+    data: vpcFactory.build({ label: 'vpc-1' }),
+    isLoading: false,
+    error: {},
+  }),
+}));
 
 describe('LinodeRow', () => {
-  describe.skip('when Linode has notification', () => {
+  describe('when Linode has notification', () => {
     it('should render a Flag', () => {
       const wrapper = shallow(
         <RenderFlag
@@ -15,10 +52,57 @@ describe('LinodeRow', () => {
         />
       );
 
-      const Tooltip = wrapper.find('WithStyles(Tooltip)');
+      const Tooltip = wrapper.find('Tooltip');
 
       expect(Tooltip).toHaveLength(1);
       expect(Tooltip.props()).toHaveProperty('title', mockNotification.message);
     });
   });
+
+  // TODO: VPC - when a feature flag is no longer needed for vpc, this should be changed
+  it('should render a linode row with associated vpc information if the feature flag is on', () => {
+    const linode = linodeFactory.build();
+    const renderedLinode = (
+      <LinodeRow
+        handlers={{
+          onOpenDeleteDialog: () => {},
+          onOpenMigrateDialog: () => {},
+          onOpenPowerDialog: (action) => {},
+          onOpenRebuildDialog: () => {},
+          onOpenRescueDialog: () => {},
+          onOpenResizeDialog: () => {},
+        }}
+        alerts={linode.alerts}
+        backups={linode.backups}
+        created={linode.created}
+        group={linode.group}
+        hypervisor={linode.hypervisor}
+        id={linode.id}
+        image={linode.image}
+        ipv4={linode.ipv4}
+        ipv6={linode.ipv6 || ''}
+        key={`linode-row-${1}`}
+        label={linode.label}
+        region={linode.region}
+        specs={linode.specs}
+        status={linode.status}
+        tags={linode.tags}
+        type={linode.type}
+        updated={linode.updated}
+        watchdog_enabled={linode.watchdog_enabled}
+      />
+    );
+
+    const { getByText } = renderWithTheme(
+      wrapWithTableBody(renderedLinode, { queryClient })
+    );
+
+    getByText('vpc-1');
+    getByText(linode.label);
+    getByText('Power Off');
+    getByText('Reboot');
+    getByText('Launch LISH Console');
+    getByText('Clone');
+    getByText('Resize');
+  });
 });
@@ -1,12 +1,13 @@
+import type { Config } from '@linode/api-v4';
 import { Notification } from '@linode/api-v4/lib/account';
-import { Linode } from '@linode/api-v4/lib/linodes';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 
 import Flag from 'src/assets/icons/flag.svg';
 import { BackupStatus } from 'src/components/BackupStatus/BackupStatus';
 import { Hidden } from 'src/components/Hidden';
 import { Link } from 'src/components/Link';
+import { Skeleton } from 'src/components/Skeleton';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
@@ -19,12 +20,15 @@ import {
   transitionText,
 } from 'src/features/Linodes/transitions';
 import { notificationContext as _notificationContext } from 'src/features/NotificationCenter/NotificationContext';
-import { useAllAccountMaintenanceQuery } from 'src/queries/accountMaintenance';
 import { useNotificationsQuery } from 'src/queries/accountNotifications';
+import { useAllLinodeConfigsQuery } from 'src/queries/linodes/configs';
+import { useVPCQuery } from 'src/queries/vpcs';
 import { useTypeQuery } from 'src/queries/types';
+import { useFlags } from 'src/hooks/useFlags';
 import { useRecentEventForLinode } from 'src/store/selectors/recentEventForLinode';
 import { capitalizeAllWords } from 'src/utilities/capitalize';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
+import { LinodeWithMaintenance } from 'src/utilities/linodes';
 
 import { IPAddress } from '../IPAddress';
 import { LinodeActionMenu } from '../LinodeActionMenu';
@@ -37,23 +41,36 @@ import {
   StyledMaintenanceTableCell,
 } from './LinodeRow.styles';
 
-type Props = Linode & { handlers: LinodeHandlers };
+type Props = LinodeWithMaintenance & { handlers: LinodeHandlers };
 
 export const LinodeRow = (props: Props) => {
-  const { backups, handlers, id, ipv4, label, region, status, type } = props;
+  const flags = useFlags();
+  const {
+    backups,
+    handlers,
+    id,
+    ipv4,
+    label,
+    region,
+    status,
+    type,
+    maintenance,
+  } = props;
 
   const notificationContext = React.useContext(_notificationContext);
 
   const { data: notifications } = useNotificationsQuery();
 
-  const { data: accountMaintenanceData } = useAllAccountMaintenanceQuery(
-    {},
-    { status: { '+or': ['pending, started'] } }
+  // TODO: VPC - later if there is a way to directly get a linode's vpc, replace this
+  const { data: configs, isLoading: configsLoading } = useAllLinodeConfigsQuery(
+    id
   );
-
-  const maintenance = accountMaintenanceData?.find(
-    (m) => m.entity.id === id && m.entity.type === 'linode'
+  const vpcId = getVPCId(configs ?? []);
+  const { data: vpc, isLoading: vpcLoading } = useVPCQuery(
+    vpcId ?? -1,
+    vpcId !== undefined && vpcId !== null
   );
+  const vpcLabel = vpc?.label;
 
   const linodeNotifications =
     notifications?.filter(
@@ -163,6 +180,21 @@ export const LinodeRow = (props: Props) => {
             <RegionIndicator region={region} />
           </TableCell>
         </Hidden>
+        {flags.vpc && (
+          <Hidden smDown>
+            <TableCell noWrap>
+              {vpcLoading || configsLoading ? (
+                <Skeleton />
+              ) : vpcLabel ? (
+                <Link tabIndex={0} to={`/vpc/${vpcId}`}>
+                  {vpcLabel}
+                </Link>
+              ) : (
+                'None'
+              )}
+            </TableCell>
+          </Hidden>
+        )}
       </Hidden>
       <Hidden lgDown>
         <TableCell>
@@ -229,6 +261,18 @@ export const RenderFlag: React.FC<{
   return null;
 };
 
+const getVPCId = (configs: Config[]) => {
+  for (const config of configs) {
+    for (const linodeInterface of config.interfaces) {
+      if (linodeInterface.purpose === 'vpc') {
+        return linodeInterface.vpc_id;
+      }
+    }
+  }
+
+  return undefined;
+};
+
 RenderFlag.displayName = `RenderFlag`;
 
 export const ProgressDisplay: React.FC<{

@@ -53,6 +53,7 @@ export const ListView = (props: RenderLinodesProps) => {
           type={linode.type}
           updated={linode.updated}
           watchdog_enabled={linode.watchdog_enabled}
+          maintenance={linode.maintenance}
         />
       ))}
     </>

@@ -10,6 +10,7 @@ import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { Tooltip } from 'src/components/Tooltip';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { StyledToggleButton } from './DisplayLinodes.styles';
 
@@ -29,6 +30,7 @@ type CombinedProps<T> = Props & Omit<OrderByProps<T>, 'data'>;
 export const SortableTableHead = <T extends unknown>(
   props: CombinedProps<T>
 ) => {
+  const flags = useFlags();
   const theme = useTheme();
 
   const {
@@ -116,8 +118,9 @@ export const SortableTableHead = <T extends unknown>(
                 direction={order}
                 handleClick={handleOrderChange}
                 label="ipv4[0]" // we want to sort by the first ipv4
+                noWrap
               >
-                IP Address
+                Public IP Address
               </TableSortCell>
               <Hidden lgDown>
                 <TableSortCell
@@ -138,6 +141,11 @@ export const SortableTableHead = <T extends unknown>(
                 </TableSortCell>
               </Hidden>
             </Hidden>
+            {flags.vpc && (
+              <Hidden smDown>
+                <TableCell>VPC</TableCell>
+              </Hidden>
+            )}
             <Hidden lgDown>
               <TableSortCell
                 active={isActive('backups:last_successful')}

@@ -401,6 +401,10 @@ const vpc = [
   rest.put('*/vpcs/:vpcId', (req, res, ctx) => {
     return res(ctx.json(vpcFactory.build({ description: 'testing' })));
   }),
+  rest.get('*/vpcs/:vpcID', (req, res, ctx) => {
+    const id = Number(req.params.id);
+    return res(ctx.json(vpcFactory.build({ id })));
+  }),
 ];
 
 const nanodeType = linodeTypeFactory.build({ id: 'g6-nanode-1' });

@@ -36,8 +36,10 @@ export const useVPCsQuery = (params: Params, filter: Filter) => {
   );
 };
 
-export const useVPCQuery = (id: number) => {
-  return useQuery<VPC, APIError[]>([vpcQueryKey, 'vpc', id], () => getVPC(id));
+export const useVPCQuery = (id: number, enabled: boolean = true) => {
+  return useQuery<VPC, APIError[]>([vpcQueryKey, 'vpc', id], () => getVPC(id), {
+    enabled,
+  });
 };
 
 export const useCreateVPCMutation = () => {

@@ -0,0 +1,5 @@
+---
+"@linode/validation": Changed
+---
+
+Update validation for `linodeInterfaceSchema`: include validation for `vpc_id` and update `subnet` to `subnet_id` ([#9485](https://github.com/linode/manager/pull/9485))