Add sidebar metadata

app/forms/external-subnet-edit.tsx

@@ -101,9 +101,7 @@ export default function EditExternalSubnetSideModalForm() {
       submitError={editExternalSubnet.error}
     >
       <PropertiesTable>
-        <PropertiesTable.IdRow id={subnet.id} />
-        <PropertiesTable.DateRow label="Created" date={subnet.timeCreated} />
-        <PropertiesTable.DateRow label="Updated" date={subnet.timeModified} />
+        <PropertiesTable.ResourceRows resource={subnet} />
         <PropertiesTable.Row label="Subnet">{subnet.subnet}</PropertiesTable.Row>
         <PropertiesTable.Row label="Subnet Pool">
           <SubnetPoolCell subnetPoolId={subnet.subnetPoolId} />

app/forms/firewall-rules-edit.tsx

@@ -27,6 +27,8 @@ import {
   useVpcSelector,
 } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ALL_ISH } from '~/util/consts'
 import { invariant } from '~/util/invariant'
 import { pb } from '~/util/path-builder'
@@ -134,6 +136,10 @@ export default function EditFirewallRuleForm() {
       loading={updateRules.isPending}
       submitError={updateRules.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={originalRule} />
+      </PropertiesTable>
+      <FormDivider />
       <CommonFields
         control={form.control}
         // error if name is being changed to something that conflicts with some other rule

app/forms/floating-ip-edit.tsx

@@ -27,6 +27,7 @@ import { addToast } from '~/stores/toast'
 import { InstanceLink } from '~/table/cells/InstanceLinkCell'
 import { IpPoolCell } from '~/table/cells/IpPoolCell'
 import { CopyableIp } from '~/ui/lib/CopyableIp'
+import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
@@ -100,9 +101,7 @@ export default function EditFloatingIpSideModalForm() {
       submitError={editFloatingIp.error}
     >
       <PropertiesTable>
-        <PropertiesTable.IdRow id={floatingIp.id} />
-        <PropertiesTable.DateRow label="Created" date={floatingIp.timeCreated} />
-        <PropertiesTable.DateRow label="Updated" date={floatingIp.timeModified} />
+        <PropertiesTable.ResourceRows resource={floatingIp} />
         <PropertiesTable.Row label="IP Address">
           <CopyableIp ip={floatingIp.ip} isLinked={false} />
         </PropertiesTable.Row>
@@ -113,6 +112,7 @@ export default function EditFloatingIpSideModalForm() {
           <InstanceLink instanceId={floatingIp.instanceId} tab="networking" />
         </PropertiesTable.Row>
       </PropertiesTable>
+      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <SideModalFormDocs docs={[docLinks.floatingIps]} />

app/forms/idp/edit.tsx

@@ -56,10 +56,9 @@ export default function EditIdpSideModalForm() {
       }
     >
       <PropertiesTable>
-        <PropertiesTable.IdRow id={idp.id} />
-        <PropertiesTable.DateRow date={idp.timeCreated} label="Created" />
-        <PropertiesTable.DateRow date={idp.timeModified} label="Updated" />
+        <PropertiesTable.ResourceRows resource={idp} />
       </PropertiesTable>
+      <FormDivider />
 
       <NameField name="name" control={form.control} disabled />
       <DescriptionField name="description" control={form.control} required disabled />

app/forms/image-from-snapshot.tsx

@@ -25,6 +25,7 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
@@ -97,6 +98,7 @@ export default function CreateImageFromSnapshotSideModalForm() {
           {formatBytes(data.size).label}
         </PropertiesTable.Row>
       </PropertiesTable>
+      <FormDivider />
 
       <NameField name="name" control={form.control} required />
       <DescriptionField name="description" control={form.control} required />

app/forms/ip-pool-edit.tsx

@@ -18,7 +18,9 @@ import { HL } from '~/components/HL'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -73,6 +75,10 @@ export default function EditIpPoolSideModalForm() {
       loading={editPool.isPending}
       submitError={editPool.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={pool} />
+      </PropertiesTable>
+      <FormDivider />
       <IpPoolVisibilityMessage />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />

app/forms/network-interface-edit.tsx

@@ -24,18 +24,31 @@ import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { SubnetNameFromId } from '~/table/cells/SubnetNameCell'
+import { CopyableIp } from '~/ui/lib/CopyableIp'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Message } from '~/ui/lib/Message'
 import { ClearAndAddButtons, MiniTable } from '~/ui/lib/MiniTable'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { HintLink, TextInputHint } from '~/ui/lib/TextInput'
 import { KEYS } from '~/ui/util/keys'
 import { parseIpNet, validateIpNet } from '~/util/ip'
 import { docLinks, links } from '~/util/links'
 
 const transitIpTableColumns = [{ header: 'Transit IPs', cell: (ip: string) => ip }]
 
+// IP addresses aren't editable — a new interface must be created to change them
+// — so surface them as read-only metadata. A NIC has a v4 address, a v6
+// address, or both, depending on its stack type.
+const privateIps = (ipStack: InstanceNetworkInterface['ipStack']) =>
+  match(ipStack)
+    .with({ type: 'v4' }, ({ value }) => ({ v4: value.ip, v6: undefined }))
+    .with({ type: 'v6' }, ({ value }) => ({ v4: undefined, v6: value.ip }))
+    .with({ type: 'dual_stack' }, ({ value }) => ({ v4: value.v4.ip, v6: value.v6.ip }))
+    .exhaustive()
+
 type EditNetworkInterfaceFormProps = {
   editing: InstanceNetworkInterface
   onDismiss: () => void
@@ -46,6 +59,7 @@ export function EditNetworkInterfaceForm({
   editing,
 }: EditNetworkInterfaceFormProps) {
   const instanceSelector = useInstanceSelector()
+  const ips = privateIps(editing.ipStack)
 
   const editNetworkInterface = useApiMutation(api.instanceNetworkInterfaceUpdate, {
     onSuccess(nic) {
@@ -113,6 +127,24 @@ export function EditNetworkInterfaceForm({
       loading={editNetworkInterface.isPending}
       submitError={editNetworkInterface.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={editing} />
+        {ips.v4 && (
+          <PropertiesTable.Row label="Private IPv4">
+            <CopyableIp ip={ips.v4} isLinked={false} />
+          </PropertiesTable.Row>
+        )}
+        {ips.v6 && (
+          <PropertiesTable.Row label="Private IPv6">
+            <CopyableIp ip={ips.v6} isLinked={false} />
+          </PropertiesTable.Row>
+        )}
+        <PropertiesTable.Row label="MAC address">{editing.mac}</PropertiesTable.Row>
+        <PropertiesTable.Row label="Subnet">
+          <SubnetNameFromId subnetId={editing.subnetId} />
+        </PropertiesTable.Row>
+      </PropertiesTable>
+      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <FormDivider />

app/forms/project-edit.tsx

@@ -17,7 +17,9 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -68,6 +70,10 @@ export default function EditProjectSideModalForm() {
       loading={editProject.isPending}
       submitError={editProject.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={project} />
+      </PropertiesTable>
+      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <SideModalFormDocs docs={[docLinks.projects]} />

app/forms/ssh-key-edit.tsx

@@ -56,9 +56,7 @@ export default function EditSSHKeySideModalForm() {
       }
     >
       <PropertiesTable>
-        <PropertiesTable.IdRow id={data.id} />
-        <PropertiesTable.DateRow date={data.timeCreated} label="Created" />
-        <PropertiesTable.DateRow date={data.timeModified} label="Updated" />
+        <PropertiesTable.ResourceRows resource={data} />
       </PropertiesTable>
       <NameField name="name" control={form.control} disabled />
       <DescriptionField name="description" control={form.control} disabled />

app/forms/subnet-edit.tsx

@@ -33,6 +33,7 @@ import { getVpcSubnetSelector, useVpcSubnetSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -95,6 +96,12 @@ export default function EditSubnetForm() {
       loading={updateSubnet.isPending}
       submitError={updateSubnet.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={subnet} />
+        <PropertiesTable.Row label="IPv4 block">{subnet.ipv4Block}</PropertiesTable.Row>
+        <PropertiesTable.Row label="IPv6 block">{subnet.ipv6Block}</PropertiesTable.Row>
+      </PropertiesTable>
+      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <FormDivider />

app/forms/subnet-pool-edit.tsx

@@ -18,7 +18,9 @@ import { HL } from '~/components/HL'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSubnetPoolSelector, useSubnetPoolSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -72,6 +74,10 @@ export default function EditSubnetPoolSideModalForm() {
       loading={editPool.isPending}
       submitError={editPool.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={pool} />
+      </PropertiesTable>
+      <FormDivider />
       <SubnetPoolVisibilityMessage />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />

app/forms/vpc-edit.tsx

@@ -17,7 +17,9 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -75,6 +77,10 @@ export default function EditVpcSideModalForm() {
       loading={editVpc.isPending}
       submitError={editVpc.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={vpc} />
+      </PropertiesTable>
+      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <NameField name="dnsName" label="DNS name" required={false} control={form.control} />

app/forms/vpc-router-edit.tsx

@@ -16,6 +16,7 @@ import {
   usePrefetchedQuery,
   type VpcRouterUpdate,
 } from '@oxide/api'
+import { Badge } from '@oxide/design-system/ui'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
@@ -24,7 +25,9 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -78,6 +81,13 @@ export default function EditRouterSideModalForm() {
       loading={editRouter.isPending}
       submitError={editRouter.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={routerData} />
+        <PropertiesTable.Row label="Kind">
+          <Badge color="neutral">{routerData.kind}</Badge>
+        </PropertiesTable.Row>
+      </PropertiesTable>
+      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <SideModalFormDocs docs={[docLinks.routers]} />

app/forms/vpc-router-route-edit.tsx

@@ -10,6 +10,7 @@ import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 import * as R from 'remeda'
 
 import { api, q, queryClient, useApiMutation, usePrefetchedQuery } from '@oxide/api'
+import { Badge } from '@oxide/design-system/ui'
 
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
@@ -22,6 +23,8 @@ import {
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getVpcRouterRouteSelector, useVpcRouterRouteSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { FormDivider } from '~/ui/lib/Divider'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ALL_ISH } from '~/util/consts'
 import { pb } from '~/util/path-builder'
 
@@ -99,6 +102,13 @@ export default function EditRouterRouteSideModalForm() {
       submitError={updateRouterRoute.error}
       submitDisabled={disabled ? routeFormMessage.vpcSubnetNotModifiable : undefined}
     >
+      <PropertiesTable>
+        <PropertiesTable.ResourceRows resource={route} />
+        <PropertiesTable.Row label="Kind">
+          <Badge color="neutral">{route.kind.replace('_', ' ')}</Badge>
+        </PropertiesTable.Row>
+      </PropertiesTable>
+      <FormDivider />
       <RouteFormFields form={form} disabled={disabled} />
       <RouteFormDocs />
     </SideModalForm>

app/pages/project/external-subnets/ExternalSubnetsPage.tsx

@@ -7,7 +7,7 @@
  */
 import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'
 
@@ -34,6 +34,7 @@ import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { InstanceLink } from '~/table/cells/InstanceLinkCell'
+import { makeLinkCell } from '~/table/cells/LinkCell'
 import { SubnetPoolCell } from '~/table/cells/SubnetPoolCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
@@ -77,7 +78,6 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
 
 const colHelper = createColumnHelper<ExternalSubnet>()
 const staticCols = [
-  colHelper.accessor('name', {}),
   colHelper.accessor('description', Columns.description),
   colHelper.accessor('subnet', {
     header: 'Subnet',
@@ -189,7 +189,20 @@ export default function ExternalSubnetsPage() {
     [deleteExternalSubnet, externalSubnetDetach, navigate, project, instances]
   )
 
-  const columns = useColsWithActions(staticCols, makeActions)
+  // name column links to the edit side modal; defined here (not in staticCols)
+  // because the link needs the project from the route
+  const cols = useMemo(
+    () => [
+      colHelper.accessor('name', {
+        cell: makeLinkCell((externalSubnet) =>
+          pb.externalSubnetEdit({ project, externalSubnet })
+        ),
+      }),
+      ...staticCols,
+    ],
+    [project]
+  )
+  const columns = useColsWithActions(cols, makeActions)
   const { table } = useQueryTable({
     query: subnetList(project),
     columns,