Instance jumbo frames setting

OMICRON_VERSION

@@ -1 +1 @@
-985304a607b16191bdc35e0ea87fa522d925b514
+66cbaf0d1b6d69fe170c61931acad909d177129b

app/pages/project/instances/JumboFramesCard.tsx

@@ -0,0 +1,95 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { useForm } from 'react-hook-form'
+
+import { api, q, queryClient, useApiMutation, usePrefetchedQuery } from '~/api'
+import { CheckboxField } from '~/components/form/fields/CheckboxField'
+import { useInstanceSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
+import { Button } from '~/ui/lib/Button'
+import { CardBlock, LearnMore } from '~/ui/lib/CardBlock'
+import { docLinks } from '~/util/links'
+
+type FormValues = {
+  enableJumboFrames: boolean
+}
+
+export function JumboFramesCard() {
+  const instanceSelector = useInstanceSelector()
+
+  const { data: instance } = usePrefetchedQuery(
+    q(api.instanceView, {
+      path: { instance: instanceSelector.instance },
+      query: { project: instanceSelector.project },
+    })
+  )
+
+  const instanceUpdate = useApiMutation(api.instanceUpdate, {
+    onSuccess(instance) {
+      const verb = instance.enableJumboFrames ? 'enabled' : 'disabled'
+      queryClient.invalidateEndpoint('instanceView')
+      addToast({ content: `Jumbo frames ${verb} for this instance` })
+    },
+    onError(err) {
+      addToast({
+        title: 'Could not update jumbo frames setting',
+        content: err.message,
+        variant: 'error',
+      })
+    },
+  })
+
+  const defaultValues: FormValues = { enableJumboFrames: instance.enableJumboFrames }
+  const form = useForm({ defaultValues })
+
+  const disableSubmit = form.watch('enableJumboFrames') === instance.enableJumboFrames
+
+  const onSubmit = form.handleSubmit((values) => {
+    instanceUpdate.mutate({
+      path: { instance: instanceSelector.instance },
+      query: { project: instanceSelector.project },
+      body: {
+        enableJumboFrames: values.enableJumboFrames,
+        autoRestartPolicy: instance.autoRestartPolicy || null,
+        ncpus: instance.ncpus,
+        memory: instance.memory,
+        cpuPlatform: instance.cpuPlatform || null,
+        bootDisk: instance.bootDiskId || null,
+      },
+    })
+  })
+
+  return (
+    <form onSubmit={onSubmit}>
+      <CardBlock>
+        <CardBlock.Header
+          title="Jumbo frames"
+          description="Use an 8500 byte MTU on the instance's primary network interface"
+        />
+        <CardBlock.Body>
+          <CheckboxField name="enableJumboFrames" control={form.control}>
+            Enable jumbo frames
+          </CheckboxField>
+          {/* fleet opt-in is fleet-admin-only to read, so we don't gate the
+              checkbox on it; the API rejects the update if it's disabled */}
+          <p className="text-sans-md text-tertiary">
+            Can only be used if jumbo frames are enabled system-wide by the operator. Takes
+            effect on next restart.
+          </p>
+        </CardBlock.Body>
+        <CardBlock.Footer>
+          <LearnMore doc={docLinks.jumboFrames} />
+          <Button size="sm" type="submit" disabled={disableSubmit}>
+            Save
+          </Button>
+        </CardBlock.Footer>
+      </CardBlock>
+    </form>
+  )
+}

app/pages/project/instances/SettingsTab.tsx

@@ -15,6 +15,7 @@ import { getInstanceSelector } from '~/hooks/use-params'
 
 import { AntiAffinityCard, instanceAntiAffinityGroups } from './AntiAffinityCard'
 import { AutoRestartCard } from './AutoRestartCard'
+import { JumboFramesCard } from './JumboFramesCard'
 
 export const handle = { crumb: 'Settings' }
 
@@ -32,6 +33,7 @@ export default function SettingsTab() {
     <div className="space-y-6">
       <AntiAffinityCard />
       <AutoRestartCard />
+      <JumboFramesCard />
     </div>
   )
 }

app/util/links.ts

@@ -84,6 +84,10 @@ export const docLinks = {
     href: 'https://docs.oxide.computer/guides/managing-instances#_update_instances',
     linkText: 'Instance Auto-Restart',
   },
+  jumboFrames: {
+    href: 'https://docs.oxide.computer/guides/configuring-guest-networking#jumbo-frames',
+    linkText: 'Jumbo Frames',
+  },
   instanceActions: {
     href: 'https://docs.oxide.computer/guides/managing-instances',
     linkText: 'Instance Actions',

mock-api/instance.ts

@@ -19,6 +19,7 @@ const base = {
   time_modified: new Date().toISOString(),
   time_run_state_updated: new Date().toISOString(),
   auto_restart_enabled: true,
+  enable_jumbo_frames: false,
   ncpus: 2,
   memory: 4 * GiB,
 }

mock-api/msw/db.ts

@@ -644,6 +644,7 @@ const initDb = {
   sshKeys: [...mock.sshKeys],
   tufRepos: [...mock.tufRepos],
   updateStatus: mock.updateStatus,
+  systemNetworkingSettings: { external_jumbo_frames_opt_in_enabled: false },
   users: [...mock.users],
   vpcFirewallRules: [...mock.firewallRules],
   vpcRouters: [...mock.vpcRouters],