Add Edit Network Interface Modal #985
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import invariant from 'tiny-invariant' | ||
|
|
||
| import type { NetworkInterface, NetworkInterfaceUpdate } from '@oxide/api' | ||
| import { useApiMutation, useApiQueryClient } from '@oxide/api' | ||
|
|
||
| import { DescriptionField, Form, NameField, SideModalForm } from 'app/components/form' | ||
| import type { EditSideModalFormProps } from 'app/forms' | ||
| import { useParams } from 'app/hooks' | ||
|
|
||
| export default function EditNetworkInterfaceSideModalForm({ | ||
| id = 'edit-network-interface-form', | ||
| title = 'Edit network interface', | ||
| onSubmit, | ||
| onSuccess, | ||
| onError, | ||
| onDismiss, | ||
| initialValues, | ||
| ...props | ||
| }: EditSideModalFormProps<NetworkInterfaceUpdate, NetworkInterface>) { | ||
| const queryClient = useApiQueryClient() | ||
| const pathParams = useParams('orgName', 'projectName') | ||
|
|
||
| const editNetworkInterface = useApiMutation('instanceNetworkInterfacesPutInterface', { | ||
| onSuccess(data) { | ||
| const { instanceName, ...others } = pathParams | ||
| invariant(instanceName, 'instanceName is required when posting a network interface') | ||
| queryClient.invalidateQueries('instanceNetworkInterfacesGet', { | ||
| instanceName, | ||
| ...others, | ||
| }) | ||
| onSuccess?.(data) | ||
| onDismiss() | ||
| }, | ||
| onError, | ||
| }) | ||
|
|
||
| return ( | ||
| <SideModalForm | ||
| id={id} | ||
| title={title} | ||
| initialValues={initialValues} | ||
| onDismiss={onDismiss} | ||
| onSubmit={ | ||
| onSubmit || | ||
| ((body) => { | ||
| const { instanceName, ...others } = pathParams | ||
| const interfaceName = initialValues.name | ||
| invariant( | ||
| interfaceName, | ||
| 'interfaceName is required when updating a network interface' | ||
| ) | ||
| invariant( | ||
| instanceName, | ||
| 'instanceName is required when posting a network interface' | ||
| ) | ||
|
|
||
| editNetworkInterface.mutate({ | ||
| instanceName, | ||
| interfaceName, | ||
| ...others, | ||
| body, | ||
| }) | ||
| }) | ||
| } | ||
| submitDisabled={editNetworkInterface.isLoading} | ||
| error={editNetworkInterface.error?.error as Error | undefined} | ||
| {...props} | ||
| > | ||
| <NameField id="nic-name" /> | ||
| <DescriptionField id="nic-description" /> | ||
| <Form.Submit>Save changes</Form.Submit> | ||
| </SideModalForm> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,21 @@ | ||
| import { useState } from 'react' | ||
|
|
||
| import type { NetworkInterface, NetworkInterfaceUpdate } from '@oxide/api' | ||
| import { useApiMutation, useApiQuery, useApiQueryClient } from '@oxide/api' | ||
| import type { MenuAction } from '@oxide/table' | ||
| import { useQueryTable } from '@oxide/table' | ||
| import { | ||
| Badge, | ||
| Button, | ||
| Delete16Icon, | ||
| EmptyMessage, | ||
| Networking24Icon, | ||
| OpenLink12Icon, | ||
| Success12Icon, | ||
| } from '@oxide/ui' | ||
|
|
||
| import CreateNetworkInterfaceSideModalForm from 'app/forms/network-interface-create' | ||
| import EditNetworkInterfaceSideModalForm from 'app/forms/network-interface-edit' | ||
| import { useParams, useToast } from 'app/hooks' | ||
|
|
||
| export function NetworkingTab() { | ||
|
|
@@ -22,6 +24,7 @@ export function NetworkingTab() { | |
| const addToast = useToast() | ||
|
|
||
| const [createModalOpen, setCreateModalOpen] = useState(false) | ||
| const [editing, setEditing] = useState<NetworkInterfaceUpdate | null>(null) | ||
|
|
||
| const getQuery = ['instanceNetworkInterfacesGet', instanceParams] as const | ||
|
|
||
|
|
@@ -36,12 +39,42 @@ export function NetworkingTab() { | |
| }, | ||
| }) | ||
|
|
||
| const editNic = useApiMutation('instanceNetworkInterfacesPutInterface', { | ||
| onSuccess() { | ||
| queryClient.invalidateQueries(...getQuery) | ||
| }, | ||
| }) | ||
|
|
||
| const instanceStopped = | ||
| useApiQuery('projectInstancesGetInstance', instanceParams).data?.runState === 'stopped' | ||
|
|
||
| const makeActions = (nic: NetworkInterface): MenuAction[] => [ | ||
| { | ||
| label: 'Make primary', | ||
| onActivate() { | ||
| editNic.mutate({ | ||
| ...instanceParams, | ||
| interfaceName: nic.name, | ||
| body: { ...nic, makePrimary: true }, | ||
| }) | ||
| }, | ||
| disabled: nic.primary || !instanceStopped, | ||
| }, | ||
| { | ||
| label: 'Edit', | ||
| onActivate() { | ||
| // TODO: Revisit after https://github.com/oxidecomputer/omicron/pull/1288 is merged | ||
| setEditing({ ...nic, makePrimary: nic.primary }) | ||
| }, | ||
| disabled: !instanceStopped, | ||
| }, | ||
| { | ||
| label: 'Delete', | ||
| className: 'destructive', | ||
| onActivate: () => { | ||
| deleteNic.mutate({ ...instanceParams, interfaceName: nic.name }) | ||
| }, | ||
| disabled: !instanceStopped, | ||
| }, | ||
| ] | ||
|
|
||
|
|
@@ -55,48 +88,60 @@ export function NetworkingTab() { | |
| /> | ||
| ) | ||
|
|
||
| const { Table, Column } = useQueryTable(...getQuery) | ||
| return ( | ||
| <> | ||
| <h2 id="network-interfaces" className="mb-4 text-mono-sm text-secondary"> | ||
| Network Interfaces | ||
| </h2> | ||
|
Collaborator
There was a problem hiding this comment. This matches what's on storage, and I agree we need something to say what's in the table, but I think it's too small (which probably means the disks ones are too small too?) @benjaminleonard
Contributor
Author
There was a problem hiding this comment. I'll leave that for a polish follow up |
||
| <Table makeActions={makeActions} emptyState={emptyState}> | ||
| <Column accessor="name" /> | ||
| <Column accessor="description" /> | ||
| {/* TODO: mark v4 or v6 explicitly? */} | ||
| <Column accessor="ip" /> | ||
| <Column | ||
| accessor="primary" | ||
| cell={({ value }) => | ||
| value && ( | ||
| <> | ||
| <Success12Icon className="text-accent mr-1" /> | ||
| <Badge variant="secondary">primary</Badge> | ||
| </> | ||
| ) | ||
| } | ||
| /> | ||
| </Table> | ||
| <div className="mt-4 flex flex-col gap-3"> | ||
| <div className="flex gap-3"> | ||
| <Button | ||
| size="xs" | ||
| variant="default" | ||
| onClick={() => setCreateModalOpen(true)} | ||
| disabled={!instanceStopped} | ||
| > | ||
| Add network interface | ||
| </Button> | ||
| </div> | ||
| {!instanceStopped && ( | ||
| <span className="max-w-xs text-sans-sm text-secondary"> | ||
| A network interface cannot be created or edited without{' '} | ||
| <a href="#/" className="text-accent-secondary"> | ||
| stopping the instance | ||
| <OpenLink12Icon className="ml-1 pt-[1px]" /> | ||
| </a> | ||
| </span> | ||
| )} | ||
| </div> | ||
|
|
||
| <CreateNetworkInterfaceSideModalForm | ||
| isOpen={createModalOpen} | ||
| onDismiss={() => setCreateModalOpen(false)} | ||
| /> | ||
| <EditNetworkInterfaceSideModalForm | ||
| isOpen={!!editing} | ||
| initialValues={editing || {}} | ||
| onDismiss={() => setEditing(null)} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you anticipate using this form in a context where we don't have an
instanceName? Otherwise this is basically the same as including'instanceName'in theuseParams()on line 21.I also don't see why we need an invariant on
interfaceNamesince it's a required field in the form — the invariant is enforced by form validation.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If it's used in the
instance-create-form(via the custom NIC option) theninstanceNamewouldn't be in the path.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As for the invariant on
interfaceName... this is mostly b/c the PUT method doesn't require any of these inputs. We useNetworkInterfaceUpdateto driveinitialValueswhich hasnametyped asstring | null | undefined. The modal is invoked like below, notice thatinitialValuesis potentially an empty object.