Skip to content

Commit

Permalink
feat(pci.private-network): add usememo for usecolumns
Browse files Browse the repository at this point in the history 
ref: -1826
Signed-off-by: tsiorifamonjena <[email protected]>
  • Loading branch information
@Tsiorifamonjena
Tsiorifamonjena committed Dec 4, 2024
1 parent fcacc5c commit 75f4218
Showing 1 changed file with 187 additions and 178 deletions.
365 changes: 187 additions & 178 deletions packages/manager/apps/pci-private-network/src/hooks/useColumns/useColumns.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { DataGridTextCell } from '@ovh-ux/manager-react-components';
Expand Down Expand Up @@ -33,103 +34,108 @@ import SkeletonWrapper from '@/components/skeleton/SkeletonWrapper.component';
export function usePrivateNetworkRegionColumns() {
const { t } = useTranslation(['listing', 'common']);

return [
{
id: 'name',
cell: ({ name }: TGroupedNetwork) => (
<DataGridTextCell>{name}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_name'),
},
{
id: 'region',
cell: ({ regions }: TGroupedNetwork) => (
<DataGridTextCell>
<SlicedRegions regions={regions} length={3} />
</DataGridTextCell>
),
label: t('pci_projects_project_network_private_region'),
},
{
id: 'vlanId',
cell: ({ vlanId }: TGroupedNetwork) => (
<DataGridTextCell>{vlanId}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_vlan_id'),
},
{
id: 'actions',
cell: () => (
<DataGridTextCell>
<DatagridActions
actions={[
{
id: 1,
content: (
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
disabled
>
<OsdsText
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
level={ODS_TEXT_LEVEL.button}
color={ODS_TEXT_COLOR_INTENT.primary}
slot="start"
return useMemo(
() => [
{
id: 'name',
cell: ({ name }: TGroupedNetwork) => (
<DataGridTextCell>{name}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_name'),
},
{
id: 'region',
cell: ({ regions }: TGroupedNetwork) => (
<DataGridTextCell>
<SlicedRegions regions={regions} length={3} />
</DataGridTextCell>
),
label: t('pci_projects_project_network_private_region'),
},
{
id: 'vlanId',
cell: ({ vlanId }: TGroupedNetwork) => (
<DataGridTextCell>{vlanId}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_vlan_id'),
},
{
id: 'actions',
cell: () => (
<DataGridTextCell>
<DatagridActions
actions={[
{
id: 1,
content: (
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
disabled
>
{t('pci_projects_project_network_private_subnet_create')}
</OsdsText>
</OsdsButton>
),
},
{
id: 2,
content: (
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
disabled
>
<OsdsText
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
level={ODS_TEXT_LEVEL.button}
color={ODS_TEXT_COLOR_INTENT.primary}
slot="start"
<OsdsText
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
level={ODS_TEXT_LEVEL.button}
color={ODS_TEXT_COLOR_INTENT.primary}
slot="start"
>
{t(
'pci_projects_project_network_private_subnet_create',
)}
</OsdsText>
</OsdsButton>
),
},
{
id: 2,
content: (
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
disabled
>
{t('pci_projects_project_network_private_subnet_show')}
</OsdsText>
</OsdsButton>
),
},
{
id: 3,
content: (
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
disabled
>
<OsdsText
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
level={ODS_TEXT_LEVEL.button}
color={ODS_TEXT_COLOR_INTENT.primary}
slot="start"
<OsdsText
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
level={ODS_TEXT_LEVEL.button}
color={ODS_TEXT_COLOR_INTENT.primary}
slot="start"
>
{t('pci_projects_project_network_private_subnet_show')}
</OsdsText>
</OsdsButton>
),
},
{
id: 3,
content: (
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
disabled
>
{t('pci_projects_project_network_private_delete')}
</OsdsText>
</OsdsButton>
),
},
]}
/>
</DataGridTextCell>
),
label: t('pci_projects_project_network_private_action'),
},
];
<OsdsText
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
level={ODS_TEXT_LEVEL.button}
color={ODS_TEXT_COLOR_INTENT.primary}
slot="start"
>
{t('pci_projects_project_network_private_delete')}
</OsdsText>
</OsdsButton>
),
},
]}
/>
</DataGridTextCell>
),
label: t('pci_projects_project_network_private_action'),
},
],
[t],
);
}

type LZPrivateNetworkColumn = TGroupedSubnet & { isPending: boolean };
Expand All @@ -138,89 +144,92 @@ export function usePrivateNetworkLZColumns() {
const { t } = useTranslation(['listing', 'common']);
const navigate = useNavigate();

return [
{
id: 'name',
cell: ({ name }: LZPrivateNetworkColumn) => (
<DataGridTextCell>{name}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_name'),
},
{
id: 'region',
cell: ({ region }: LZPrivateNetworkColumn) => (
<DataGridTextCell>{region}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_region'),
},
{
id: 'cidr',
cell: ({ cidr, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>{cidr}</DataGridTextCell>
</SkeletonWrapper>
),
label: 'CIDR',
},
{
id: 'gatewayIp',
cell: ({ gatewayIp, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>{gatewayIp}</DataGridTextCell>
</SkeletonWrapper>
),
label: t('pci_projects_project_network_private_gateway'),
},
{
id: 'dhcp',
cell: ({ dhcpEnabled, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>
<StatusInfo
label={
dhcpEnabled ? ResourceStatus.ACTIVE : ResourceStatus.DISABLED
}
/>
</DataGridTextCell>
</SkeletonWrapper>
),
label: 'DHCP',
},
{
id: 'ip_allocation',
cell: ({ allocatedIp, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>{allocatedIp}</DataGridTextCell>
</SkeletonWrapper>
),
label: t('pci_projects_project_network_private_ip_allocation'),
},
{
id: 'actions',
cell: ({ region, networkId }: LZPrivateNetworkColumn) => (
<div>
<OsdsTooltip>
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
onClick={() =>
navigate(`./delete?networkId=${networkId}&region=${region}`)
}
>
<OsdsIcon
name={ODS_ICON_NAME.BIN}
size={ODS_ICON_SIZE.xs}
color={ODS_THEME_COLOR_INTENT.primary}
return useMemo(
() => [
{
id: 'name',
cell: ({ name }: LZPrivateNetworkColumn) => (
<DataGridTextCell>{name}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_name'),
},
{
id: 'region',
cell: ({ region }: LZPrivateNetworkColumn) => (
<DataGridTextCell>{region}</DataGridTextCell>
),
label: t('pci_projects_project_network_private_region'),
},
{
id: 'cidr',
cell: ({ cidr, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>{cidr}</DataGridTextCell>
</SkeletonWrapper>
),
label: 'CIDR',
},
{
id: 'gatewayIp',
cell: ({ gatewayIp, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>{gatewayIp}</DataGridTextCell>
</SkeletonWrapper>
),
label: t('pci_projects_project_network_private_gateway'),
},
{
id: 'dhcp',
cell: ({ dhcpEnabled, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>
<StatusInfo
label={
dhcpEnabled ? ResourceStatus.ACTIVE : ResourceStatus.DISABLED
}
/>
</OsdsButton>
<OsdsTooltipContent slot="tooltip-content">
{t('pci_projects_project_network_private_delete')}
</OsdsTooltipContent>
</OsdsTooltip>
</div>
),
label: t('pci_projects_project_network_private_action'),
},
];
</DataGridTextCell>
</SkeletonWrapper>
),
label: 'DHCP',
},
{
id: 'ip_allocation',
cell: ({ allocatedIp, isPending }: LZPrivateNetworkColumn) => (
<SkeletonWrapper isPending={isPending}>
<DataGridTextCell>{allocatedIp}</DataGridTextCell>
</SkeletonWrapper>
),
label: t('pci_projects_project_network_private_ip_allocation'),
},
{
id: 'actions',
cell: ({ region, networkId }: LZPrivateNetworkColumn) => (
<div>
<OsdsTooltip>
<OsdsButton
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.ghost}
color={ODS_THEME_COLOR_INTENT.primary}
onClick={() =>
navigate(`./delete?networkId=${networkId}&region=${region}`)
}
>
<OsdsIcon
name={ODS_ICON_NAME.BIN}
size={ODS_ICON_SIZE.xs}
color={ODS_THEME_COLOR_INTENT.primary}
/>
</OsdsButton>
<OsdsTooltipContent slot="tooltip-content">
{t('pci_projects_project_network_private_delete')}
</OsdsTooltipContent>
</OsdsTooltip>
</div>
),
label: t('pci_projects_project_network_private_action'),
},
],
[t, navigate],
);
}

0 comments on commit 75f4218

Please sign in to comment.