diff --git a/app/forms/floating-ip-edit.tsx b/app/forms/floating-ip-edit.tsx index 347cbc793e..c1de6fae11 100644 --- a/app/forms/floating-ip-edit.tsx +++ b/app/forms/floating-ip-edit.tsx @@ -6,9 +6,15 @@ * Copyright Oxide Computer Company */ import { useForm } from 'react-hook-form' -import { useNavigate, type LoaderFunctionArgs } from 'react-router' +import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router' -import { apiq, queryClient, useApiMutation, usePrefetchedApiQuery } from '@oxide/api' +import { + apiq, + getListQFn, + queryClient, + useApiMutation, + usePrefetchedQuery, +} from '@oxide/api' import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' @@ -16,15 +22,25 @@ import { SideModalForm } from '~/components/form/SideModalForm' import { HL } from '~/components/HL' import { getFloatingIpSelector, useFloatingIpSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' +import { EmptyCell } from '~/table/cells/EmptyCell' +import { IpPoolCell } from '~/table/cells/IpPoolCell' +import { CopyableIp } from '~/ui/lib/CopyableIp' +import { PropertiesTable } from '~/ui/lib/PropertiesTable' +import { ALL_ISH } from '~/util/consts' import type * as PP from '~/util/path-params' import { pb } from 'app/util/path-builder' const floatingIpView = ({ project, floatingIp }: PP.FloatingIp) => apiq('floatingIpView', { path: { floatingIp }, query: { project } }) +const instanceList = (project: string) => + getListQFn('instanceList', { query: { project, limit: ALL_ISH } }) EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => { const selector = getFloatingIpSelector(params) - await queryClient.prefetchQuery(floatingIpView(selector)) + await Promise.all([ + queryClient.fetchQuery(floatingIpView(selector)), + queryClient.fetchQuery(instanceList(selector.project).optionsFn()), + ]) return null } @@ -35,10 +51,11 @@ export function EditFloatingIpSideModalForm() { const onDismiss = () => navigate(pb.floatingIps({ project: floatingIpSelector.project })) - const { data: floatingIp } = usePrefetchedApiQuery('floatingIpView', { - path: { floatingIp: floatingIpSelector.floatingIp }, - query: { project: floatingIpSelector.project }, - }) + const { data: floatingIp } = usePrefetchedQuery(floatingIpView(floatingIpSelector)) + const { data: instances } = usePrefetchedQuery( + instanceList(floatingIpSelector.project).optionsFn() + ) + const instanceName = instances.items.find((i) => i.id === floatingIp.instanceId)?.name const editFloatingIp = useApiMutation('floatingIpUpdate', { onSuccess(_floatingIp) { @@ -49,7 +66,6 @@ export function EditFloatingIpSideModalForm() { }) const form = useForm({ defaultValues: floatingIp }) - return ( + + + + + + + + + + + + {instanceName ? ( + + {instanceName} + + ) : ( + + )} + + diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx index 02c14ff2e1..50ef40c562 100644 --- a/app/pages/project/floating-ips/FloatingIpsPage.tsx +++ b/app/pages/project/floating-ips/FloatingIpsPage.tsx @@ -61,8 +61,8 @@ const instanceList = (project: string) => FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => { const { project } = getProjectSelector(params) await Promise.all([ - queryClient.prefetchQuery(fipList(project).optionsFn()), - queryClient.prefetchQuery(instanceList(project).optionsFn()), + queryClient.fetchQuery(fipList(project).optionsFn()), + queryClient.fetchQuery(instanceList(project).optionsFn()), // fetch IP Pools and preload into RQ cache so fetches by ID in // IpPoolCell can be mostly instant yet gracefully fall back to // fetching individually if we don't fetch them all here