upcoming: [M3-7611] - Placement Groups Detail Summary

packages/manager/.changeset/pr-10164-upcoming-features-1707487417041.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Create PlacementGroups Summary component ([#10164](https://github.com/linode/manager/pull/10164))

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

@@ -1,16 +1,20 @@
 import { AFFINITY_TYPES } from '@linode/api-v4';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { NotFound } from 'src/components/NotFound';
+import { Notice } from 'src/components/Notice/Notice';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
+import { Typography } from 'src/components/Typography';
 import { useFlags } from 'src/hooks/useFlags';
 import {
   useMutatePlacementGroup,
@@ -19,23 +23,29 @@ import {
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
 
 import { getPlacementGroupLinodeCount } from '../utils';
+import { getWarningNoticeText } from '../utils';
 import { PlacementGroupsLinodes } from './PlacementGroupsLinodes/PlacementGroupsLinodes';
+import { PlacementGroupsSummary } from './PlacementGroupsSummary/PlacementGroupsSummary';
 
 export const PlacementGroupsDetail = () => {
   const flags = useFlags();
   const { id, tab } = useParams<{ id: string; tab?: string }>();
   const history = useHistory();
+  const theme = useTheme();
   const placementGroupId = Number(id);
+
   const {
     data: placementGroup,
     error: placementGroupError,
     isLoading,
   } = usePlacementGroupQuery(placementGroupId, Boolean(flags.vmPlacement));
+
   const {
     error: updatePlacementGroupError,
     mutateAsync: updatePlacementGroup,
     reset,
   } = useMutatePlacementGroup(placementGroupId);
+
   const errorText = getErrorStringOrDefault(updatePlacementGroupError ?? '');
 
   if (isLoading) {
@@ -108,7 +118,24 @@ export const PlacementGroupsDetail = () => {
       >
         <TabLinkList tabs={tabs} />
         <TabPanels>
-          <SafeTabPanel index={0}>TODO VM_Placement: summary</SafeTabPanel>
+          <SafeTabPanel index={0}>
+            {!placementGroup.compliant && (
+              <Notice spacingBottom={20} spacingTop={24} variant="warning">
+                <Typography fontFamily={theme.font.bold}>
+                  {getWarningNoticeText(placementGroup)}
+                  {/* TODO VM_Placement: Get link location */}
+                  <Link
+                    className="secondaryLink"
+                    data-testid="pg-non-compliant-notice-link"
+                    to={'#'}
+                  >
+                    Learn more.
+                  </Link>
+                </Typography>
+              </Notice>
+            )}
+            <PlacementGroupsSummary placementGroup={placementGroup} />
+          </SafeTabPanel>
           <SafeTabPanel index={1}>
             <PlacementGroupsLinodes placementGroup={placementGroup} />
           </SafeTabPanel>

packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { placementGroupFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { PlacementGroupsSummary } from './PlacementGroupsSummary';
+
+describe('PlacementGroups Summary', () => {
+  it('renders the placement group detail summary panel', () => {
+    const { getByText } = renderWithTheme(
+      <PlacementGroupsSummary
+        placementGroup={placementGroupFactory.build({
+          affinity_type: 'affinity',
+          capacity: 10,
+          compliant: true,
+          id: 3,
+          label: 'pg-3',
+          linode_ids: [2, 4, 6, 8, 10],
+          region: 'us-east',
+        })}
+      />
+    );
+
+    expect(getByText('Placement Group Configuration')).toBeInTheDocument();
+    expect(getByText('Linodes')).toBeInTheDocument();
+    expect(getByText('Affinity Type')).toBeInTheDocument();
+    expect(getByText('Region')).toBeInTheDocument();
+  });
+});

packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx

@@ -0,0 +1,79 @@
+import { AFFINITY_TYPES } from '@linode/api-v4';
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+
+import { Box } from 'src/components/Box';
+import { Paper } from 'src/components/Paper';
+import { TooltipIcon } from 'src/components/TooltipIcon';
+import { Typography } from 'src/components/Typography';
+import { useRegionsQuery } from 'src/queries/regions';
+
+import { PLACEMENT_GROUP_TOOLTIP_TEXT } from '../../constants';
+
+import type { PlacementGroup } from '@linode/api-v4';
+
+interface Props {
+  placementGroup: PlacementGroup;
+}
+
+export const PlacementGroupsSummary = (props: Props) => {
+  const { placementGroup } = props;
+  const { data: regions } = useRegionsQuery();
+
+  const regionLabel =
+    regions?.find((region) => region.id === placementGroup.region)?.label ??
+    placementGroup.region;
+
+  return (
+    <Paper>
+      <Typography
+        sx={(theme) => ({ marginBottom: theme.spacing(3) })}
+        variant="h3"
+      >
+        Placement Group Configuration
+      </Typography>
+      <Grid container spacing={1}>
+        <Grid md={8} sm={12}>
+          <Box display="flex">
+            <StyledLabel>Linodes</StyledLabel>
+            <Typography sx={{ mx: 8 }}>
+              {`${placementGroup.linode_ids.length} of ${placementGroup.capacity}`}
+              <TooltipIcon
+                sxTooltipIcon={{
+                  marginLeft: '10px',
+                  padding: 0,
+                }}
+                status="help"
+                text={PLACEMENT_GROUP_TOOLTIP_TEXT}
+                tooltipPosition="right"
+              />
+            </Typography>
+          </Box>
+        </Grid>
+        <Grid md={8} sm={12}>
+          <Box display="flex">
+            <StyledLabel>Affinity Type</StyledLabel>
+            <Typography sx={{ mx: 8 }}>
+              {AFFINITY_TYPES[placementGroup?.affinity_type]}
+            </Typography>
+          </Box>
+        </Grid>
+        <Grid md={8} sm={12}>
+          <Box display="flex">
+            <StyledLabel>Region</StyledLabel>
+            <Typography sx={{ mx: 8 }}>{regionLabel}</Typography>
+          </Box>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+};
+
+export const StyledLabel = styled(Typography, {
+  label: 'StyledLabel',
+})(({ theme }) => ({
+  fontFamily: theme.font.bold,
+  marginRight: theme.spacing(8),
+  width: theme.spacing(10),
+}));

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

@@ -8,3 +8,5 @@ export const MAX_NUMBER_OF_LINODES_IN_PLACEMENT_GROUP_MESSAGE =
 
 export const PLACEMENT_GROUP_LINODES_ERROR_MESSAGE =
   'There was an error loading Linodes for this Placement Group.';
+
+export const PLACEMENT_GROUP_TOOLTIP_TEXT = `The Affinity Type and Region determine the maximum number of VMs per group`;

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

@@ -32,3 +32,13 @@ export const affinityTypeOptions = Object.entries(AFFINITY_TYPES).map(
     value: key as CreatePlacementGroupPayload['affinity_type'],
   })
 );
+
+/**
+ * Helper to generate the text content of the non-compliant warning notice.
+ */
+export const getWarningNoticeText = (placementGroup: PlacementGroup) => {
+  return `Placement Group ${placementGroup.label} (${
+    AFFINITY_TYPES[placementGroup?.affinity_type]
+  }) is non-compliant.
+We are working to resolve compliance issues so that you can continue assigning Linodes to this Placement Group. `;
+};