Skip to content

Commit e1be2e4

Browse files
charlieparkcharliepark
committed
Most PR review tweaks
1 parent 5e17d08 commit e1be2e4

4 files changed

Lines changed: 49 additions & 50 deletions

File tree

‎app/layouts/ProjectLayoutBase.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { makeCrumb } from '~/hooks/use-crumbs'
2626
import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
2727
import { useQuickActions } from '~/hooks/use-quick-actions'
2828
import { Divider } from '~/ui/lib/Divider'
29-
import { affinityBase, pb } from '~/util/path-builder'
29+
import { pb } from '~/util/path-builder'
3030
import type * as PP from '~/util/path-params'
3131

3232
import { DocsLinkItem, NavLinkItem, Sidebar } from '../components/Sidebar'
@@ -69,7 +69,7 @@ export function ProjectLayoutBase({ overrideContentPane }: ProjectLayoutProps) {
6969
{ value: 'Images', path: pb.projectImages(projectSelector) },
7070
{ value: 'VPCs', path: pb.vpcs(projectSelector) },
7171
{ value: 'Floating IPs', path: pb.floatingIps(projectSelector) },
72-
{ value: 'Affinity', path: pb.antiAffinityGroups(projectSelector) },
72+
{ value: 'Affinity', path: pb.affinity(projectSelector) },
7373
{ value: 'Access', path: pb.projectAccess(projectSelector) },
7474
]
7575
// filter out the entry for the path we're currently on
@@ -114,7 +114,7 @@ export function ProjectLayoutBase({ overrideContentPane }: ProjectLayoutProps) {
114114
<NavLinkItem to={pb.floatingIps(projectSelector)}>
115115
<IpGlobal16Icon /> Floating IPs
116116
</NavLinkItem>
117-
<NavLinkItem to={affinityBase(projectSelector)}>
117+
<NavLinkItem to={pb.affinity(projectSelector)}>
118118
<Affinity16Icon title="Affinity" /> Affinity
119119
</NavLinkItem>
120120
<NavLinkItem to={pb.projectAccess(projectSelector)}>

‎app/pages/project/affinity/AffinityPage.tsx‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
10+
import { useMemo } from 'react'
1011
import { Link, type LoaderFunctionArgs } from 'react-router'
1112

1213
import {
@@ -79,32 +80,40 @@ const AffinityGroupPolicyBadge = ({ policy, className }: AffinityGroupPolicyBadg
7980
</Badge>
8081
)
8182

83+
const staticCols = [
84+
colHelper.accessor('description', Columns.description),
85+
colHelper.accessor(() => {}, {
86+
header: 'type',
87+
cell: () => <Badge>anti-affinity</Badge>,
88+
}),
89+
colHelper.accessor('policy', {
90+
cell: (info) => <AffinityGroupPolicyBadge policy={info.getValue()} />,
91+
}),
92+
colHelper.accessor('name', {
93+
header: 'members',
94+
cell: (info) => <AffinityGroupMembersCell antiAffinityGroup={info.getValue()} />,
95+
}),
96+
colHelper.accessor('timeCreated', Columns.timeCreated),
97+
]
98+
8299
export default function AffinityPage() {
83100
const { project } = useProjectSelector()
84-
const staticCols = [
85-
colHelper.accessor('name', {
86-
cell: makeLinkCell((antiAffinityGroup) =>
87-
pb.antiAffinityGroup({ project, antiAffinityGroup })
88-
),
89-
}),
90-
colHelper.accessor('description', Columns.description),
91-
colHelper.accessor(() => {}, {
92-
header: 'type',
93-
cell: () => <Badge>anti-affinity</Badge>,
94-
}),
95-
colHelper.accessor('policy', {
96-
cell: (info) => <AffinityGroupPolicyBadge policy={info.getValue()} />,
97-
}),
98-
colHelper.accessor('name', {
99-
header: 'members',
100-
cell: (info) => <AffinityGroupMembersCell antiAffinityGroup={info.getValue()} />,
101-
}),
102-
colHelper.accessor('timeCreated', Columns.timeCreated),
103-
]
101+
const columns = useMemo(
102+
() => [
103+
colHelper.accessor('name', {
104+
cell: makeLinkCell((antiAffinityGroup) =>
105+
pb.antiAffinityGroup({ project, antiAffinityGroup })
106+
),
107+
id: 'members',
108+
}),
109+
...staticCols,
110+
],
111+
[project]
112+
)
104113
const { data } = usePrefetchedQuery(antiAffinityGroupList({ project }).optionsFn())
105114

106115
const table = useReactTable({
107-
columns: staticCols,
116+
columns,
108117
data: data.items,
109118
getCoreRowModel: getCoreRowModel(),
110119
})
@@ -123,8 +132,6 @@ export const AntiAffinityGroupEmptyState = () => (
123132
icon={<Affinity24Icon />}
124133
title="No anti-affinity groups"
125134
body="Create an anti-affinity group to see it here"
126-
buttonText="New anti-affinity group"
127-
buttonTo={pb.antiAffinityGroupNew(useProjectSelector())}
128135
/>
129136
</TableEmptyBox>
130137
)

‎app/pages/project/affinity/AntiAffinityGroupPage.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
10+
import { useMemo } from 'react'
1011
import type { LoaderFunctionArgs } from 'react-router'
1112

1213
import { Affinity24Icon } from '@oxide/design-system/icons/react'
@@ -22,13 +23,13 @@ import { makeCrumb } from '~/hooks/use-crumbs'
2223
import {
2324
getAntiAffinityGroupSelector,
2425
useAntiAffinityGroupSelector,
25-
useProjectSelector,
2626
} from '~/hooks/use-params'
2727
import { makeLinkCell } from '~/table/cells/LinkCell'
2828
import { Columns } from '~/table/columns/common'
2929
import { Table } from '~/table/Table'
3030
import { Badge } from '~/ui/lib/Badge'
3131
import { CardBlock } from '~/ui/lib/CardBlock'
32+
import { Divider } from '~/ui/lib/Divider'
3233
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3334
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
3435
import { TableEmptyBox } from '~/ui/lib/Table'
@@ -69,9 +70,6 @@ const AntiAffinityGroupMemberEmptyState = () => (
6970
icon={<Affinity24Icon />}
7071
title="No anti-affinity group members"
7172
body="Add an instance to the group to see it here"
72-
buttonText="Add anti-affinity group member"
73-
// TODO: this should open the AntiAffinityGroup edit modal
74-
buttonTo={pb.antiAffinityGroupNew(useProjectSelector())}
7573
/>
7674
</TableEmptyBox>
7775
)
@@ -86,16 +84,19 @@ export default function AntiAffinityPage() {
8684
memberList({ antiAffinityGroup, project }).optionsFn()
8785
)
8886
const membersCount = members.items.length
89-
const staticCols = [
90-
colHelper.accessor('value.name', {
91-
header: 'Name',
92-
cell: makeLinkCell((instance) => pb.instance({ project, instance })),
93-
}),
94-
colHelper.accessor('value.runState', Columns.instanceState),
95-
]
87+
const columns = useMemo(
88+
() => [
89+
colHelper.accessor('value.name', {
90+
header: 'Name',
91+
cell: makeLinkCell((instance) => pb.instance({ project, instance })),
92+
}),
93+
colHelper.accessor('value.runState', Columns.instanceState),
94+
],
95+
[project]
96+
)
9697

9798
const table = useReactTable({
98-
columns: staticCols,
99+
columns,
99100
data: members.items,
100101
getCoreRowModel: getCoreRowModel(),
101102
})
@@ -115,6 +116,7 @@ export default function AntiAffinityPage() {
115116
<PropertiesTable.Row label="Members">{membersCount}</PropertiesTable.Row>
116117
<PropertiesTable.IdRow id={id} />
117118
</PropertiesTable>
119+
<Divider className="mb-10" />
118120
<CardBlock>
119121
<CardBlock.Header
120122
title="Members"

‎app/util/path-builder.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ const instanceBase = ({ project, instance }: PP.Instance) =>
1515
`${pb.instances({ project })}/${instance}`
1616
const vpcBase = ({ project, vpc }: PP.Vpc) => `${pb.vpcs({ project })}/${vpc}`
1717

18-
/** Don't use these for links. only exported for use with activePrefix */
19-
export const affinityBase = (params: PP.Project) => `${projectBase(params)}/affinity`
2018
export const instanceMetricsBase = ({ project, instance }: PP.Instance) =>
2119
`${instanceBase({ project, instance })}/metrics`
2220
export const inventoryBase = () => '/system/inventory'
@@ -98,17 +96,9 @@ export const pb = {
9896
floatingIpEdit: (params: PP.FloatingIp) =>
9997
`${pb.floatingIps(params)}/${params.floatingIp}/edit`,
10098

101-
affinityGroups: (params: PP.Project) => affinityBase(params),
102-
affinityGroup: (params: PP.AffinityGroup) =>
103-
`${pb.affinityGroups(params)}/${params.affinityGroup}`,
104-
affinityGroupNew: (params: PP.Project) =>
105-
`${pb.affinityGroups(params)}/affinity-groups-new`,
106-
107-
antiAffinityGroups: (params: PP.Project) => affinityBase(params),
99+
affinity: (params: PP.Project) => `${projectBase(params)}/affinity`,
108100
antiAffinityGroup: (params: PP.AntiAffinityGroup) =>
109-
`${affinityBase(params)}/${params.antiAffinityGroup}`,
110-
antiAffinityGroupNew: (params: PP.Project) =>
111-
`${affinityBase(params)}/anti-affinity-groups-new`,
101+
`${pb.affinity(params)}/${params.antiAffinityGroup}`,
112102

113103
siloUtilization: () => '/utilization',
114104
siloAccess: () => '/access',

0 commit comments

Comments
 (0)