feat(api): add EFS file systems to the cloud explorer

Create file systems (with a mount target in each default subnet unless asked
not to), add and remove mount targets, create and delete access points, and
attach a file system to a Lambda function through an access point. A function
not yet in a VPC is put in the file system's mount target subnets with the
default security group, as Lambda requires. TheCloud's mounts are real, so two
functions on one access point share files.

Deleting a file system removes its access points and mount targets first, and
is refused while a function still mounts it.

packages/frontend/src/api/api.ts

@@ -155,6 +155,14 @@ export const apiEndpointKeys = {
       export: "clouds.services.certificates.export",
       revoke: "clouds.services.certificates.revoke",
     },
+    filesystems: {
+      mountTargets: "clouds.services.filesystems.mountTargets",
+      mountTarget: "clouds.services.filesystems.mountTarget",
+      accessPoints: "clouds.services.filesystems.accessPoints",
+      accessPoint: "clouds.services.filesystems.accessPoint",
+      functions: "clouds.services.filesystems.functions",
+      function: "clouds.services.filesystems.function",
+    },
     autoscaling: {
       capacity: "clouds.services.autoscaling.capacity",
       terminate: "clouds.services.autoscaling.instances.terminate",
@@ -956,6 +964,48 @@ export const endpointRegistry: EndpointRegistry = new Map([
       method: "POST",
     },
   ],
+  [
+    apiEndpointKeys.clouds.filesystems.mountTargets,
+    {
+      path: "/clouds/:cloud/services/filesystems/resources/:id/mount-targets",
+      method: "POST",
+    },
+  ],
+  [
+    apiEndpointKeys.clouds.filesystems.mountTarget,
+    {
+      path: "/clouds/:cloud/services/filesystems/resources/:id/mount-targets/:mountTargetId",
+      method: "DELETE",
+    },
+  ],
+  [
+    apiEndpointKeys.clouds.filesystems.accessPoints,
+    {
+      path: "/clouds/:cloud/services/filesystems/resources/:id/access-points",
+      method: "POST",
+    },
+  ],
+  [
+    apiEndpointKeys.clouds.filesystems.accessPoint,
+    {
+      path: "/clouds/:cloud/services/filesystems/resources/:id/access-points/:accessPointId",
+      method: "DELETE",
+    },
+  ],
+  [
+    apiEndpointKeys.clouds.filesystems.functions,
+    {
+      path: "/clouds/:cloud/services/filesystems/resources/:id/functions",
+      method: "POST",
+    },
+  ],
+  [
+    apiEndpointKeys.clouds.filesystems.function,
+    {
+      path: "/clouds/:cloud/services/filesystems/resources/:id/functions/:functionName",
+      method: "DELETE",
+    },
+  ],
   [
     apiEndpointKeys.clouds.autoscaling.capacity,
     {

packages/frontend/src/api/cloudProxyClient.ts

@@ -34,6 +34,8 @@ import type {
   UserPoolClientSettings,
   DistributionInvalidation,
   AutoScalingCapacityInput,
+  AccessPointInput,
+  FileSystemAttachmentInput,
   CertificatePem,
   CertificateRevocationReason,
   ExportedCertificate,
@@ -1721,6 +1723,84 @@ export async function revokeCertificate(
   return res.data;
 }
 
+export async function createMountTarget(
+  cloud: CloudProvider,
+  fileSystemId: string,
+  subnetId: string,
+): Promise<CloudResource> {
+  const res = await apiClient.call<CloudResource, { subnetId: string }>(
+    apiEndpointKeys.clouds.filesystems.mountTargets,
+    requestOptions(cloud, "filesystems", { body: { subnetId } }),
+    { cloud, id: fileSystemId },
+  );
+  return res.data;
+}
+
+export async function deleteMountTarget(
+  cloud: CloudProvider,
+  fileSystemId: string,
+  mountTargetId: string,
+): Promise<CloudResource> {
+  const res = await apiClient.call<CloudResource>(
+    apiEndpointKeys.clouds.filesystems.mountTarget,
+    requestOptions(cloud, "filesystems"),
+    { cloud, id: fileSystemId, mountTargetId },
+  );
+  return res.data;
+}
+
+export async function createAccessPoint(
+  cloud: CloudProvider,
+  fileSystemId: string,
+  input: AccessPointInput,
+): Promise<CloudResource> {
+  const res = await apiClient.call<CloudResource, AccessPointInput>(
+    apiEndpointKeys.clouds.filesystems.accessPoints,
+    requestOptions(cloud, "filesystems", { body: input }),
+    { cloud, id: fileSystemId },
+  );
+  return res.data;
+}
+
+export async function deleteAccessPoint(
+  cloud: CloudProvider,
+  fileSystemId: string,
+  accessPointId: string,
+): Promise<CloudResource> {
+  const res = await apiClient.call<CloudResource>(
+    apiEndpointKeys.clouds.filesystems.accessPoint,
+    requestOptions(cloud, "filesystems"),
+    { cloud, id: fileSystemId, accessPointId },
+  );
+  return res.data;
+}
+
+export async function attachFileSystemToFunction(
+  cloud: CloudProvider,
+  fileSystemId: string,
+  input: FileSystemAttachmentInput,
+): Promise<CloudResource> {
+  const res = await apiClient.call<CloudResource, FileSystemAttachmentInput>(
+    apiEndpointKeys.clouds.filesystems.functions,
+    requestOptions(cloud, "filesystems", { body: input }),
+    { cloud, id: fileSystemId },
+  );
+  return res.data;
+}
+
+export async function detachFileSystemFromFunction(
+  cloud: CloudProvider,
+  fileSystemId: string,
+  functionName: string,
+): Promise<CloudResource> {
+  const res = await apiClient.call<CloudResource>(
+    apiEndpointKeys.clouds.filesystems.function,
+    requestOptions(cloud, "filesystems"),
+    { cloud, id: fileSystemId, functionName },
+  );
+  return res.data;
+}
+
 export async function setAutoScalingCapacity(
   cloud: CloudProvider,
   groupName: string,

packages/frontend/src/components/DynamicResourceView.tsx

@@ -69,6 +69,7 @@ import { CognitoUsersPanel } from "@/components/CognitoUsersPanel";
 import { Route53RecordsPanel } from "@/components/Route53RecordsPanel";
 import { CloudFrontPanel } from "@/components/CloudFrontPanel";
 import { AutoScalingPanel } from "@/components/AutoScalingPanel";
+import { FileSystemPanel } from "@/components/FileSystemPanel";
 import { CertificatePanel } from "@/components/CertificatePanel";
 import { PipePanel } from "@/components/PipePanel";
 import { CloudWatchAlarmPanel } from "@/components/CloudWatchAlarmPanel";
@@ -999,6 +1000,9 @@ export function DynamicResourceView({
       {service === "autoscaling" && cloud === "aws" && (
         <AutoScalingPanel resource={activeSelected} runtimeReachable={canUseRuntime} />
       )}
+      {service === "filesystems" && cloud === "aws" && (
+        <FileSystemPanel resource={activeSelected} runtimeReachable={canUseRuntime} />
+      )}
       {service === "cdn" && cloud === "aws" && (
         <CloudFrontPanel resource={activeSelected} runtimeReachable={canUseRuntime} />
       )}

packages/frontend/src/components/FileSystemPanel.test.tsx

@@ -0,0 +1,104 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
+import {render, screen, within} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {MemoryRouter} from 'react-router-dom'
+import {beforeEach, expect, test, vi} from 'vitest'
+import {FileSystemPanel} from './FileSystemPanel'
+import type {CloudResource} from '@/types/resource'
+
+const api = vi.hoisted(() => ({
+    getCloudResource: vi.fn(),
+    listCloudResources: vi.fn(),
+    createMountTarget: vi.fn(),
+    deleteMountTarget: vi.fn(),
+    createAccessPoint: vi.fn(),
+    deleteAccessPoint: vi.fn(),
+    attachFileSystemToFunction: vi.fn(),
+    detachFileSystemFromFunction: vi.fn(),
+}))
+
+vi.mock('@/api/cloudProxyClient', () => api)
+vi.mock('@/lib/accountStore', () => ({useAccountId: () => '000000000000'}))
+
+function fileSystem(metadata: Record<string, unknown> = {}): CloudResource {
+    return {
+        id: 'fs-1', name: 'shared', cloud: 'aws', service: 'filesystems', type: 'fileSystem', region: 'us-east-1', createdAt: null, status: 'available',
+        metadata: {
+            fileSystemId: 'fs-1', throughputMode: 'bursting', encrypted: true,
+            mountTargets: [{id: 'fsmt-1', subnetId: 'subnet-a', availabilityZone: 'us-east-1a', ipAddress: '10.0.0.10', state: 'available'}],
+            accessPoints: [{id: 'fsap-1', arn: 'arn:aws:elasticfilesystem:us-east-1:000000000000:access-point/fsap-1', name: 'app', path: '/app', uid: 1000, gid: 1000, permissions: '755', state: 'available'}],
+            functions: [{name: 'writer', accessPointId: 'fsap-1', mountPath: '/mnt/share'}],
+            ...metadata,
+        },
+    }
+}
+
+function renderPanel(resource: CloudResource) {
+    api.getCloudResource.mockResolvedValue(resource)
+    const client = new QueryClient({defaultOptions: {queries: {retry: false}}})
+    return render(<MemoryRouter><QueryClientProvider client={client}><FileSystemPanel resource={resource} runtimeReachable/></QueryClientProvider></MemoryRouter>)
+}
+
+beforeEach(() => {
+    vi.clearAllMocks()
+    api.listCloudResources.mockResolvedValue([{id: 'reader', name: 'reader'}, {id: 'writer', name: 'writer'}])
+    for (const fn of [api.createMountTarget, api.deleteMountTarget, api.createAccessPoint, api.deleteAccessPoint, api.attachFileSystemToFunction, api.detachFileSystemFromFunction]) {
+        fn.mockResolvedValue(fileSystem())
+    }
+})
+
+test('shows mount targets, access points and the functions that mount the file system', async () => {
+    renderPanel(fileSystem())
+
+    expect(await screen.findByText('fsmt-1')).toBeInTheDocument()
+    expect(screen.getByText('fsap-1')).toBeInTheDocument()
+    expect(screen.getByRole('link', {name: 'writer'})).toHaveAttribute('href', '/cloud-explorer/aws/serverless')
+    expect(screen.getByText('/mnt/share')).toBeInTheDocument()
+})
+
+test('adds a mount target and creates an access point', async () => {
+    const user = userEvent.setup()
+    renderPanel(fileSystem())
+
+    const mountForm = await screen.findByRole('form', {name: 'Add mount target'})
+    await user.type(within(mountForm).getByLabelText('Subnet ID'), 'subnet-b')
+    await user.click(within(mountForm).getByRole('button', {name: 'Add mount target'}))
+    expect(api.createMountTarget).toHaveBeenCalledWith('aws', 'fs-1', 'subnet-b')
+    expect(await screen.findByText('Added a mount target in subnet-b.')).toBeInTheDocument()
+
+    const accessPointForm = screen.getByRole('form', {name: 'Create access point'})
+    const path = within(accessPointForm).getByLabelText('Root directory')
+    await user.clear(path)
+    await user.type(path, '/uploads')
+    await user.click(within(accessPointForm).getByRole('button', {name: 'Create access point'}))
+    expect(api.createAccessPoint).toHaveBeenCalledWith('aws', 'fs-1', {path: '/uploads', uid: 1000, gid: 1000, permissions: '755'})
+})
+
+test('attaches the file system to a function through an access point', async () => {
+    const user = userEvent.setup()
+    renderPanel(fileSystem())
+
+    const form = await screen.findByRole('form', {name: 'Attach to a function'})
+    await user.selectOptions(within(form).getByLabelText('Function'), await within(form).findByRole('option', {name: 'reader'}))
+    await user.selectOptions(within(form).getByLabelText('Access point'), 'fsap-1')
+    await user.click(within(form).getByRole('button', {name: 'Attach'}))
+
+    expect(api.attachFileSystemToFunction).toHaveBeenCalledWith('aws', 'fs-1', {accessPointId: 'fsap-1', functionName: 'reader', mountPath: '/mnt/data'})
+    expect(await screen.findByText('reader now sees this file system at /mnt/data.')).toBeInTheDocument()
+})
+
+test('detaches a function after confirming', async () => {
+    const user = userEvent.setup()
+    vi.spyOn(window, 'confirm').mockReturnValue(true)
+    renderPanel(fileSystem())
+
+    await user.click(await screen.findByRole('button', {name: 'Detach writer'}))
+    expect(api.detachFileSystemFromFunction).toHaveBeenCalledWith('aws', 'fs-1', 'writer')
+})
+
+test('cannot attach until the file system has a mount target', async () => {
+    renderPanel(fileSystem({mountTargets: [], functions: []}))
+
+    expect(await screen.findByText(/No mount targets yet/)).toBeInTheDocument()
+    expect(within(screen.getByRole('form', {name: 'Attach to a function'})).getByRole('button', {name: 'Attach'})).toBeDisabled()
+})

packages/frontend/src/components/FileSystemPanel.tsx

@@ -0,0 +1,191 @@
+import {RefreshCw} from 'lucide-react'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+import {useEffect, useState} from 'react'
+import {Link} from 'react-router-dom'
+import {
+    attachFileSystemToFunction,
+    createAccessPoint,
+    createMountTarget,
+    deleteAccessPoint,
+    deleteMountTarget,
+    detachFileSystemFromFunction,
+    getCloudResource,
+    listCloudResources,
+} from '@/api/cloudProxyClient'
+import {cloudQueryKeys} from '@/api/queries/cloudQueries'
+import {useAccountId} from '@/lib/accountStore'
+import type {CloudResource} from '@/types/resource'
+
+type Props = {
+    resource?: CloudResource
+    runtimeReachable: boolean
+}
+
+type MountTarget = {id: string; subnetId: string | null; availabilityZone: string | null; ipAddress: string | null; state: string | null}
+type AccessPoint = {id: string; arn: string | null; name: string | null; path: string; uid: number | null; gid: number | null; permissions: string | null; state: string | null}
+type MountedFunction = {name: string; accessPointId: string | null; mountPath: string | null}
+
+const EMPTY_ACCESS_POINT = {name: '', path: '/', uid: '1000', gid: '1000', permissions: '755'}
+
+export function FileSystemPanel({resource, runtimeReachable}: Props) {
+    const accountId = useAccountId()
+    const queryClient = useQueryClient()
+    const [subnetId, setSubnetId] = useState('')
+    const [accessPointForm, setAccessPointForm] = useState(EMPTY_ACCESS_POINT)
+    const [attachForm, setAttachForm] = useState({accessPointId: '', functionName: '', mountPath: '/mnt/data'})
+    const [notice, setNotice] = useState('')
+    const detailKey = ['efs-file-system', accountId, resource?.id]
+
+    const detailQuery = useQuery({
+        queryKey: detailKey,
+        queryFn: ({signal}) => getCloudResource('aws', 'filesystems', resource?.id ?? '', signal),
+        enabled: Boolean(resource) && runtimeReachable,
+    })
+    const functionsQuery = useQuery({
+        queryKey: cloudQueryKeys.resources('aws', 'serverless'),
+        queryFn: ({signal}) => listCloudResources('aws', 'serverless', undefined, signal),
+        enabled: Boolean(resource) && runtimeReachable,
+    })
+
+    useEffect(() => {
+        setNotice('')
+        setSubnetId('')
+        setAccessPointForm(EMPTY_ACCESS_POINT)
+        setAttachForm({accessPointId: '', functionName: '', mountPath: '/mnt/data'})
+    }, [resource?.id])
+
+    const settle = (updated: CloudResource, message: string) => {
+        queryClient.setQueryData(detailKey, updated)
+        setNotice(message)
+        return queryClient.invalidateQueries({queryKey: cloudQueryKeys.resources('aws', 'filesystems')})
+    }
+    const id = resource?.id ?? ''
+    const addMountTarget = useMutation({
+        mutationFn: () => createMountTarget('aws', id, subnetId.trim()),
+        onSuccess: (updated) => { setSubnetId(''); return settle(updated, `Added a mount target in ${subnetId.trim()}.`) },
+    })
+    const removeMountTarget = useMutation({
+        mutationFn: (mountTargetId: string) => deleteMountTarget('aws', id, mountTargetId),
+        onSuccess: (updated, mountTargetId) => settle(updated, `Removed mount target ${mountTargetId}.`),
+    })
+    const addAccessPoint = useMutation({
+        mutationFn: () => createAccessPoint('aws', id, {
+            ...(accessPointForm.name.trim() ? {name: accessPointForm.name.trim()} : {}),
+            path: accessPointForm.path.trim(),
+            uid: Number(accessPointForm.uid),
+            gid: Number(accessPointForm.gid),
+            permissions: accessPointForm.permissions.trim(),
+        }),
+        onSuccess: (updated) => { setAccessPointForm(EMPTY_ACCESS_POINT); return settle(updated, `Created an access point at ${accessPointForm.path.trim()}.`) },
+    })
+    const removeAccessPoint = useMutation({
+        mutationFn: (accessPointId: string) => deleteAccessPoint('aws', id, accessPointId),
+        onSuccess: (updated, accessPointId) => settle(updated, `Deleted access point ${accessPointId}.`),
+    })
+    const attach = useMutation({
+        mutationFn: () => attachFileSystemToFunction('aws', id, {...attachForm, mountPath: attachForm.mountPath.trim()}),
+        onSuccess: (updated) => settle(updated, `${attachForm.functionName} now sees this file system at ${attachForm.mountPath.trim()}.`),
+    })
+    const detach = useMutation({
+        mutationFn: (functionName: string) => detachFileSystemFromFunction('aws', id, functionName),
+        onSuccess: (updated, functionName) => settle(updated, `Detached ${functionName}.`),
+    })
+
+    if (!resource) {
+        return <section className="table-panel"><div className="empty compact"><h3>Select a file system</h3><p>Choose a file system to manage its mount targets and access points, and attach it to Lambda functions.</p></div></section>
+    }
+
+    const fileSystem = detailQuery.data ?? resource
+    const metadata = fileSystem.metadata
+    const mountTargets = Array.isArray(metadata.mountTargets) ? metadata.mountTargets as MountTarget[] : []
+    const accessPoints = Array.isArray(metadata.accessPoints) ? metadata.accessPoints as AccessPoint[] : []
+    const mounted = Array.isArray(metadata.functions) ? metadata.functions as MountedFunction[] : []
+    const functionNames = (functionsQuery.data ?? []).map((fn) => fn.name).sort()
+    const mutations = [addMountTarget, removeMountTarget, addAccessPoint, removeAccessPoint, attach, detach]
+    const disabled = !runtimeReachable || mutations.some((mutation) => mutation.isPending)
+    const error = detailQuery.error ?? mutations.find((mutation) => mutation.error)?.error
+    const accessPointLabel = (accessPointId: string | null) => {
+        const accessPoint = accessPoints.find((candidate) => candidate.id === accessPointId)
+        return accessPoint ? `${accessPoint.name ?? accessPoint.id} (${accessPoint.path})` : accessPointId ?? '—'
+    }
+    const run = (action: () => void) => { setNotice(''); action() }
+
+    return <section className="table-panel" style={{marginTop: 16}} aria-label={`File system ${fileSystem.name}`}>
+        <div className="input-row resource-table-bar">
+            <div><p className="eyebrow">EFS file system</p><span className="muted mono">{String(metadata.fileSystemId ?? fileSystem.id)}</span><span className="muted"> · {String(metadata.throughputMode ?? '')} · {metadata.encrypted ? 'encrypted' : 'not encrypted'}</span></div>
+            <div className="cdn-actions">
+                <button className="button" type="button" disabled={!runtimeReachable || detailQuery.isFetching} onClick={() => { void detailQuery.refetch() }}><RefreshCw size={14}/>{detailQuery.isFetching ? 'Loading' : 'Refresh'}</button>
+            </div>
+        </div>
+
+        <div className="input-row resource-table-bar"><div><p className="eyebrow">Mount targets</p><span className="muted">Functions and tasks reach the file system through a mount target in their subnet.</span></div></div>
+        {mountTargets.length === 0 ? <p className="muted compact-text efs-note">No mount targets yet. Add one before attaching the file system to a function.</p>
+            : <div className="cognito-table"><table className="table"><thead><tr><th>Mount target</th><th>Subnet</th><th>Zone</th><th>IP address</th><th>State</th><th aria-label="Actions"/></tr></thead><tbody>{mountTargets.map((mountTarget) => (
+                <tr key={mountTarget.id}>
+                    <td className="mono">{mountTarget.id}</td>
+                    <td className="mono">{mountTarget.subnetId ?? '—'}</td>
+                    <td>{mountTarget.availabilityZone ?? '—'}</td>
+                    <td className="mono">{mountTarget.ipAddress ?? '—'}</td>
+                    <td><code>{mountTarget.state ?? '—'}</code></td>
+                    <td className="efs-row-actions"><button className="button compact danger" type="button" disabled={disabled} aria-label={`Remove ${mountTarget.id}`} onClick={() => run(() => {
+                        if (window.confirm(`Remove mount target ${mountTarget.id}?`)) removeMountTarget.mutate(mountTarget.id)
+                    })}>Remove</button></td>
+                </tr>
+            ))}</tbody></table></div>}
+        <form className="dynamic-form efs-inline-form" aria-label="Add mount target" onSubmit={(event) => { event.preventDefault(); run(() => addMountTarget.mutate()) }}>
+            <label className="dynamic-field"><span>Subnet ID</span><input className="input mono" value={subnetId} placeholder="subnet-…" onChange={(event) => setSubnetId(event.target.value)} disabled={disabled} required/></label>
+            <div><button className="button" type="submit" disabled={disabled || !subnetId.trim()}>{addMountTarget.isPending ? 'Adding' : 'Add mount target'}</button></div>
+        </form>
+
+        <div className="input-row resource-table-bar"><div><p className="eyebrow">Access points</p><span className="muted">An entry point into one directory, as a fixed POSIX user. Lambda mounts a file system through an access point.</span></div></div>
+        {accessPoints.length === 0 ? <p className="muted compact-text efs-note">No access points yet.</p>
+            : <div className="cognito-table"><table className="table"><thead><tr><th>Access point</th><th>Root directory</th><th>POSIX user</th><th>State</th><th aria-label="Actions"/></tr></thead><tbody>{accessPoints.map((accessPoint) => (
+                <tr key={accessPoint.id}>
+                    <td>{accessPoint.name && <>{accessPoint.name}<br/></>}<small className="mono">{accessPoint.id}</small></td>
+                    <td className="mono">{accessPoint.path}{accessPoint.permissions ? <small className="muted"> ({accessPoint.permissions})</small> : null}</td>
+                    <td className="mono">{accessPoint.uid ?? '—'}:{accessPoint.gid ?? '—'}</td>
+                    <td><code>{accessPoint.state ?? '—'}</code></td>
+                    <td className="efs-row-actions"><button className="button compact danger" type="button" disabled={disabled} aria-label={`Delete ${accessPoint.id}`} onClick={() => run(() => {
+                        if (window.confirm(`Delete access point ${accessPoint.id}? Files stay in the file system.`)) removeAccessPoint.mutate(accessPoint.id)
+                    })}>Delete</button></td>
+                </tr>
+            ))}</tbody></table></div>}
+        <form className="dynamic-form efs-access-point-form" aria-label="Create access point" onSubmit={(event) => { event.preventDefault(); run(() => addAccessPoint.mutate()) }}>
+            <label className="dynamic-field"><span>Name</span><input className="input" value={accessPointForm.name} onChange={(event) => setAccessPointForm({...accessPointForm, name: event.target.value})} disabled={disabled}/></label>
+            <label className="dynamic-field"><span>Root directory</span><input className="input mono" value={accessPointForm.path} onChange={(event) => setAccessPointForm({...accessPointForm, path: event.target.value})} disabled={disabled} required pattern="/.*" title="Start with /"/></label>
+            <label className="dynamic-field"><span>User ID</span><input className="input" type="number" min={0} value={accessPointForm.uid} onChange={(event) => setAccessPointForm({...accessPointForm, uid: event.target.value})} disabled={disabled} required/></label>
+            <label className="dynamic-field"><span>Group ID</span><input className="input" type="number" min={0} value={accessPointForm.gid} onChange={(event) => setAccessPointForm({...accessPointForm, gid: event.target.value})} disabled={disabled} required/></label>
+            <label className="dynamic-field"><span>Permissions</span><input className="input mono" value={accessPointForm.permissions} onChange={(event) => setAccessPointForm({...accessPointForm, permissions: event.target.value})} disabled={disabled} required pattern="[0-7]{3,4}" title="Octal, such as 755"/></label>
+            <div><button className="button" type="submit" disabled={disabled}>{addAccessPoint.isPending ? 'Creating' : 'Create access point'}</button></div>
+        </form>
+
+        <div className="input-row resource-table-bar"><div><p className="eyebrow">Lambda functions</p><span className="muted">Functions that mount this file system share its files. A function can mount one file system.</span></div></div>
+        {mounted.length === 0 ? <p className="muted compact-text efs-note">No function mounts this file system.</p>
+            : <div className="cognito-table"><table className="table"><thead><tr><th>Function</th><th>Mount path</th><th>Access point</th><th aria-label="Actions"/></tr></thead><tbody>{mounted.map((fn) => (
+                <tr key={fn.name}>
+                    <td><Link to="/cloud-explorer/aws/serverless" className="mono">{fn.name}</Link></td>
+                    <td className="mono">{fn.mountPath ?? '—'}</td>
+                    <td>{accessPointLabel(fn.accessPointId)}</td>
+                    <td className="efs-row-actions"><button className="button compact danger" type="button" disabled={disabled} aria-label={`Detach ${fn.name}`} onClick={() => run(() => {
+                        if (window.confirm(`Detach the file system from ${fn.name}?`)) detach.mutate(fn.name)
+                    })}>Detach</button></td>
+                </tr>
+            ))}</tbody></table></div>}
+        {accessPoints.length > 0 && <form className="dynamic-form efs-access-point-form" aria-label="Attach to a function" onSubmit={(event) => { event.preventDefault(); run(() => attach.mutate()) }}>
+            <label className="dynamic-field"><span>Function</span><select className="input" value={attachForm.functionName} onChange={(event) => setAttachForm({...attachForm, functionName: event.target.value})} disabled={disabled} required>
+                <option value="">{functionNames.length === 0 ? 'No functions yet' : 'Choose a function'}</option>
+                {functionNames.map((name) => <option key={name} value={name}>{name}</option>)}
+            </select></label>
+            <label className="dynamic-field"><span>Access point</span><select className="input" value={attachForm.accessPointId} onChange={(event) => setAttachForm({...attachForm, accessPointId: event.target.value})} disabled={disabled} required>
+                <option value="">Choose an access point</option>
+                {accessPoints.map((accessPoint) => <option key={accessPoint.id} value={accessPoint.id}>{accessPointLabel(accessPoint.id)}</option>)}
+            </select></label>
+            <label className="dynamic-field"><span>Mount path</span><input className="input mono" value={attachForm.mountPath} onChange={(event) => setAttachForm({...attachForm, mountPath: event.target.value})} disabled={disabled} required pattern="/mnt/[a-zA-Z0-9\-_.]+" title="Under /mnt, such as /mnt/data"/></label>
+            <div><button className="button" type="submit" disabled={disabled || mountTargets.length === 0} title={mountTargets.length === 0 ? 'Add a mount target first' : undefined}>{attach.isPending ? 'Attaching' : 'Attach'}</button></div>
+        </form>}
+        {accessPoints.length > 0 && <p className="muted compact-text efs-note">Lambda needs a VPC to mount a file system. A function not yet in one is put in this file system&apos;s mount target subnets with the default security group.</p>}
+
+        {notice && <p className="cognito-outcome cognito-outcome--ok" role="status">{notice}</p>}
+        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
+    </section>
+}

packages/frontend/src/components/serviceIcons.tsx

@@ -7,6 +7,7 @@ import {
     Database,
     Earth,
     FileBadge,
+    FolderTree,
     Globe,
     HardDrive,
     Hammer,
@@ -39,6 +40,7 @@ import cognitoIcon from '../../../../aws-icons-svg/Security-Identity-Compliance/
 import route53Icon from '../../../../aws-icons-svg/Networking-Content-Delivery/Route-53.svg'
 import cloudFrontIcon from '../../../../aws-icons-svg/Networking-Content-Delivery/CloudFront.svg'
 import autoScalingIcon from '../../../../aws-icons-svg/Compute/EC2-Auto-Scaling.svg'
+import efsIcon from '../../../../aws-icons-svg/Storage/EFS.svg'
 import certificateManagerIcon from '../../../../aws-icons-svg/Security-Identity-Compliance/Certificate-Manager.svg'
 import cloudWatchIcon from '../../../../aws-icons-svg/Management-Governance/CloudWatch.svg'
 import cloudFormationIcon from '@/assets/aws-services/cloudformation.svg'
@@ -101,6 +103,7 @@ const SERVICE_ICONS: Record<string, LucideIcon> = {
     dns: Globe,
     cdn: Earth,
     autoscaling: Scaling,
+    filesystems: FolderTree,
     certificates: FileBadge,
     monitoring: Activity,
     loadbalancing: Scale,
@@ -151,6 +154,7 @@ const AWS_SERVICE_ICON_ASSETS: Record<string, string> = {
     dns: route53Icon,
     cdn: cloudFrontIcon,
     autoscaling: autoScalingIcon,
+    filesystems: efsIcon,
     certificates: certificateManagerIcon,
     monitoring: cloudWatchIcon,
     workflows: stepFunctionsIcon,

packages/frontend/src/index.css

@@ -6630,3 +6630,9 @@ tr[aria-current="true"] td { background: var(--hover-md); }
 .autoscaling-capacity { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: end; padding: 4px 16px 12px; }
 .autoscaling-note { padding: 0 16px 12px; margin: 0; }
 .autoscaling-instance-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
+
+/* EFS: short inline forms under each table, row actions on the right. */
+.efs-note { padding: 0 16px 12px; margin: 0; }
+.efs-inline-form { grid-template-columns: minmax(180px, 320px) auto; align-items: end; padding: 4px 16px 12px; }
+.efs-access-point-form { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); align-items: end; padding: 4px 16px 12px; }
+.efs-row-actions { text-align: right; }

packages/frontend/src/types/resource.ts

@@ -362,6 +362,20 @@ export interface AutoScalingCapacityInput {
     maxSize?: number
 }
 
+export interface AccessPointInput {
+    name?: string
+    path: string
+    uid: number
+    gid: number
+    permissions: string
+}
+
+export interface FileSystemAttachmentInput {
+    accessPointId: string
+    functionName: string
+    mountPath: string
+}
+
 export interface DistributionInvalidation {
     id: string
     status: string

packages/frontend/src/types/schema.ts

@@ -30,6 +30,7 @@ export type ItemActionName = 'list' | 'get' | 'put' | 'delete' | 'query'
 export type DistributionActionName = 'setEnabled' | 'createInvalidation'
 export type AutoScalingActionName = 'setCapacity' | 'terminateInstance'
 export type CertificateActionName = 'download' | 'export' | 'revoke'
+export type FileSystemActionName = 'createMountTarget' | 'deleteMountTarget' | 'createAccessPoint' | 'deleteAccessPoint' | 'attachFunction' | 'detachFunction'
 export type MonitoringActionName = 'listMetrics' | 'getMetricData' | 'alarmHistory' | 'setAlarmState' | 'setAlarmActions'
 export type UserPoolActionName = 'updateUser' | 'setUserGroups' | 'listGroups' | 'createGroup' | 'deleteGroup' | 'testSignIn' | 'describeClient' | 'updateClientOAuth'
 export type CapabilityStatus = 'available' | 'blocked' | 'partial' | 'coming_soon'
@@ -95,6 +96,7 @@ export interface ServiceSchema {
         distributionActions?: Array<CapabilitySchema<DistributionActionName>>
         autoScalingActions?: Array<CapabilitySchema<AutoScalingActionName>>
         certificateActions?: Array<CapabilitySchema<CertificateActionName>>
+        fileSystemActions?: Array<CapabilitySchema<FileSystemActionName>>
         monitoringActions?: Array<CapabilitySchema<MonitoringActionName>>
     }
     filters: FieldSchema[]