upcoming: [M3-7905] - Update PG landing page table

packages/manager/.changeset/pr-10318-upcoming-features-1711489006250.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Placement Groups landing page table ([#10318](https://github.com/linode/manager/pull/10318))

packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx

@@ -20,7 +20,7 @@ import {
 
 import { LinodeSelect } from '../Linodes/LinodeSelect/LinodeSelect';
 import {
-  getAffinityEnforcement,
+  getAffinityTypeEnforcement,
   getLinodesFromAllPlacementGroups,
 } from './utils';
 
@@ -139,7 +139,7 @@ export const PlacementGroupsAssignLinodesDrawer = (
       {generalError ? <Notice text={generalError} variant="error" /> : null}
       <Typography my={4}>
         <strong>Affinity Enforcement: </strong>
-        {getAffinityEnforcement(selectedPlacementGroup.is_strict)}
+        {getAffinityTypeEnforcement(selectedPlacementGroup.is_strict)}
       </Typography>
       <Divider sx={{ mb: 4 }} />
       <form onSubmit={handleAssignLinode}>

packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx

@@ -23,7 +23,7 @@ import {
 import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
-import { getAffinityEnforcement } from './utils';
+import { getAffinityTypeEnforcement } from './utils';
 
 import type { PlacementGroupsEditDrawerProps } from './types';
 import type { UpdatePlacementGroupPayload } from '@linode/api-v4';
@@ -137,7 +137,7 @@ export const PlacementGroupsEditDrawer = (
 
           <Typography mb={4}>
             <strong>Affinity Enforcement: </strong>
-            {getAffinityEnforcement(placementGroup.is_strict)}
+            {getAffinityTypeEnforcement(placementGroup.is_strict)}
           </Typography>
           <Divider />
           <form onSubmit={handleSubmit}>

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx

@@ -1,8 +1,10 @@
 import CloseIcon from '@mui/icons-material/Close';
+import { useMediaQuery, useTheme } from '@mui/material';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { CircleProgress } from 'src/components/CircleProgress';
+import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Hidden } from 'src/components/Hidden';
 import { IconButton } from 'src/components/IconButton';
@@ -14,8 +16,8 @@ import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
+import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableSortCell } from 'src/components/TableSortCell/TableSortCell';
-import { TextField } from 'src/components/TextField';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
@@ -36,10 +38,12 @@ const preferenceKey = 'placement-groups';
 export const PlacementGroupsLanding = React.memo(() => {
   const history = useHistory();
   const pagination = usePagination(1, preferenceKey);
+  const theme = useTheme();
   const [query, setQuery] = React.useState<string>('');
   const [selectedPlacementGroup, setSelectedPlacementGroup] = React.useState<
     PlacementGroup | undefined
   >(undefined);
+  const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
   const { handleOrderChange, order, orderBy } = useOrder(
     {
       order: 'asc',
@@ -57,13 +61,16 @@ export const PlacementGroupsLanding = React.memo(() => {
     filter['label'] = { '+contains': query };
   }
 
-  const params = {
-    page: pagination.page,
-    page_size: pagination.pageSize,
-  };
-
-  const { data: placementGroups, error, isLoading } = usePlacementGroupsQuery(
-    params,
+  const {
+    data: placementGroups,
+    error,
+    isFetching,
+    isLoading,
+  } = usePlacementGroupsQuery(
+    {
+      page: pagination.page,
+      page_size: pagination.pageSize,
+    },
     filter
   );
 
@@ -101,7 +108,7 @@ export const PlacementGroupsLanding = React.memo(() => {
     return <CircleProgress />;
   }
 
-  if (placementGroups?.results === 0) {
+  if (placementGroups?.results === 0 && query === '') {
     return (
       <>
         <PlacementGroupsLandingEmptyState
@@ -146,10 +153,12 @@ export const PlacementGroupsLanding = React.memo(() => {
         onButtonClick={handleCreatePlacementGroup}
         title="Placement Groups"
       />
-      <TextField
+      <DebouncedSearchTextField
         InputProps={{
           endAdornment: query && (
             <InputAdornment position="end">
+              {isFetching && <CircleProgress mini />}
+
               <IconButton
                 aria-label="Clear"
                 onClick={() => setQuery('')}
@@ -161,6 +170,7 @@ export const PlacementGroupsLanding = React.memo(() => {
             </InputAdornment>
           ),
         }}
+        debounceTime={250}
         hideLabel
         label="Filter"
         onChange={(e) => setQuery(e.target.value)}
@@ -176,10 +186,31 @@ export const PlacementGroupsLanding = React.memo(() => {
               direction={order}
               handleClick={handleOrderChange}
               label="label"
-              sx={{ width: '40%' }}
+              sx={{ width: matchesSmDown ? '40%' : '20%' }}
             >
               Label
             </TableSortCell>
+            <Hidden smDown>
+              <TableSortCell
+                active={orderBy === 'affinity_type'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="affinity_type"
+              >
+                Affinity Type
+              </TableSortCell>
+            </Hidden>
+            <Hidden smDown>
+              <TableSortCell
+                active={orderBy === 'is_strict'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="is_strict"
+                sx={{ width: '20%' }}
+              >
+                Affinity Type Enforcement
+              </TableSortCell>
+            </Hidden>
             <TableCell>Linodes</TableCell>
             <Hidden smDown>
               <TableSortCell
@@ -195,6 +226,7 @@ export const PlacementGroupsLanding = React.memo(() => {
           </TableRow>
         </TableHead>
         <TableBody>
+          {placementGroups?.data.length === 0 && <TableRowEmpty colSpan={6} />}
           {placementGroups?.data.map((placementGroup) => (
             <PlacementGroupsRow
               handleDeletePlacementGroup={() =>

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.test.tsx

@@ -88,7 +88,7 @@ describe('PlacementGroupsLanding', () => {
     );
 
     expect(getByTestId('link-to-placement-group-1')).toHaveTextContent(
-      'group 1 (Anti-affinity)'
+      'group 1'
     );
     expect(getByText('Non-compliant')).toBeInTheDocument();
     expect(getByTestId('placement-group-1-assigned-linodes')).toHaveTextContent(

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.tsx

@@ -12,6 +12,7 @@ import { TextTooltip } from 'src/components/TextTooltip';
 import { Typography } from 'src/components/Typography';
 import { usePlacementGroupData } from 'src/hooks/usePlacementGroupsData';
 
+import { getAffinityTypeEnforcement } from '../utils';
 import { StyledWarningIcon } from './PlacementGroupsRow.styles';
 
 import type { PlacementGroup } from '@linode/api-v4';
@@ -31,7 +32,13 @@ export const PlacementGroupsRow = React.memo(
     handleEditPlacementGroup,
     placementGroup,
   }: PlacementGroupsRowProps) => {
-    const { affinity_type, id, is_compliant, label } = placementGroup;
+    const {
+      affinity_type,
+      id,
+      is_compliant,
+      is_strict,
+      label,
+    } = placementGroup;
     const { assignedLinodes, linodesCount, region } = usePlacementGroupData({
       placementGroup,
     });
@@ -57,7 +64,7 @@ export const PlacementGroupsRow = React.memo(
             style={{ marginRight: 8 }}
             to={`/placement-groups/${id}`}
           >
-            {label} ({AFFINITY_TYPES[affinity_type]})
+            {label}
           </Link>
           {!is_compliant && (
             <Typography component="span" sx={{ whiteSpace: 'nowrap' }}>
@@ -66,19 +73,29 @@ export const PlacementGroupsRow = React.memo(
             </Typography>
           )}
         </TableCell>
+        <Hidden smDown>
+          <TableCell>{AFFINITY_TYPES[affinity_type]}</TableCell>
+        </Hidden>
+        <Hidden smDown>
+          <TableCell>{getAffinityTypeEnforcement(is_strict)}</TableCell>
+        </Hidden>
         <TableCell data-testid={`placement-group-${id}-assigned-linodes`}>
-          <TextTooltip
-            tooltipText={
-              <List>
-                {assignedLinodes?.map((linode, idx) => (
-                  <ListItem key={`pg-linode-${idx}`}>{linode.label}</ListItem>
-                ))}
-              </List>
-            }
-            displayText={`${linodesCount}`}
-            minWidth={200}
-          />
-          &nbsp; of {region?.maximum_vms_per_pg}
+          {assignedLinodes?.length === 0 ? (
+            '0'
+          ) : (
+            <TextTooltip
+              tooltipText={
+                <List>
+                  {assignedLinodes?.map((linode, idx) => (
+                    <ListItem key={`pg-linode-${idx}`}>{linode.label}</ListItem>
+                  ))}
+                </List>
+              }
+              displayText={`${linodesCount}`}
+              minWidth={200}
+            />
+          )}
+          &nbsp; of {region?.maximum_vms_per_pg ?? 'unknown'}
         </TableCell>
         <Hidden smDown>
           <TableCell>{region?.label}</TableCell>

packages/manager/src/features/PlacementGroups/utils.test.ts

@@ -2,7 +2,7 @@ import { placementGroupFactory, regionFactory } from 'src/factories';
 
 import {
   affinityTypeOptions,
-  getAffinityEnforcement,
+  getAffinityTypeEnforcement,
   getLinodesFromAllPlacementGroups,
   getPlacementGroupLinodeCount,
   hasPlacementGroupReachedCapacity,
@@ -109,11 +109,11 @@ describe('getLinodesFromAllPlacementGroups', () => {
 
 describe('getAffinityEnforcement', () => {
   it('returns "Strict" if `is_strict` is true', () => {
-    expect(getAffinityEnforcement(true)).toBe('Strict');
+    expect(getAffinityTypeEnforcement(true)).toBe('Strict');
   });
 
   it('returns "Flexible" if `is_strict` is false', () => {
-    expect(getAffinityEnforcement(false)).toBe('Flexible');
+    expect(getAffinityTypeEnforcement(false)).toBe('Flexible');
   });
 });
 

packages/manager/src/features/PlacementGroups/utils.ts

@@ -10,7 +10,7 @@ import type {
 /**
  * Helper to get the affinity enforcement readable string.
  */
-export const getAffinityEnforcement = (
+export const getAffinityTypeEnforcement = (
   is_strict: boolean
 ): AffinityEnforcement => {
   return is_strict ? 'Strict' : 'Flexible';