diff --git a/packages/manager/src/components/DescriptionList/DescriptionList.stories.tsx b/packages/manager/src/components/DescriptionList/DescriptionList.stories.tsx index aeba0b24302..6c6b63b8240 100644 --- a/packages/manager/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/packages/manager/src/components/DescriptionList/DescriptionList.stories.tsx @@ -18,6 +18,10 @@ const defaultItems = [ description: 'Another description', title: 'Another Title', }, + { + description: 'Fourth description', + title: 'Number 4', + }, ]; const meta: Meta = { diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx index b2e11c1fedd..8c221a4c022 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx @@ -1,6 +1,6 @@ import { AFFINITY_TYPES } from '@linode/api-v4'; import * as React from 'react'; -import { useHistory, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; @@ -8,10 +8,6 @@ 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 { getRestrictedResourceText } from 'src/features/Account/utils'; import { useFlags } from 'src/hooks/useFlags'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; @@ -28,8 +24,7 @@ import { PlacementGroupsSummary } from './PlacementGroupsSummary/PlacementGroups export const PlacementGroupsDetail = () => { const flags = useFlags(); - const { id, tab } = useParams<{ id: string; tab?: string }>(); - const history = useHistory(); + const { id } = useParams<{ id: string }>(); const placementGroupId = +id; const { @@ -84,19 +79,7 @@ export const PlacementGroupsDetail = () => { placementGroup?.members.some((pgLinode) => pgLinode.linode_id === linode.id) ); - const linodeCount = placementGroup.members.length; - const tabs = [ - { - routeName: `/placement-groups/${id}`, - title: 'Summary', - }, - { - routeName: `/placement-groups/${id}/linodes`, - title: `Linodes (${linodeCount})`, - }, - ]; const { affinity_type, label } = placementGroup; - const tabIndex = tab ? tabs.findIndex((t) => t.routeName.endsWith(tab)) : -1; const resetEditableLabel = () => { return `${label} (${AFFINITY_TYPES[affinity_type]})`; @@ -145,29 +128,14 @@ export const PlacementGroupsDetail = () => { variant="warning" /> )} - history.push(tabs[i].routeName)} - > - - - - - - - - - - + + ); }; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx index f7b5832aa37..45afa0b1696 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx @@ -5,6 +5,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Box } from 'src/components/Box'; +import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; @@ -26,7 +27,7 @@ export const PlacementGroupsSummary = (props: Props) => { const linodesCount = placementGroup.members.length; return ( - <> + {!placementGroup.is_compliant && ( @@ -56,6 +57,14 @@ export const PlacementGroupsSummary = (props: Props) => { + Linodes {`${linodesCount} of ${region?.placement_group_limits.maximum_linodes_per_pg}`} @@ -87,7 +96,7 @@ export const PlacementGroupsSummary = (props: Props) => { - + ); };