diff --git a/striker-ui/components/FileSystem/FileSystems.tsx b/striker-ui/components/FileSystem/FileSystems.tsx new file mode 100644 index 00000000..3a8e0ea6 --- /dev/null +++ b/striker-ui/components/FileSystem/FileSystems.tsx @@ -0,0 +1,77 @@ +import { useContext } from 'react'; + +import { Box } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { BodyText, HeaderText } from '../Text'; +import { Panel, InnerPanel, PanelHeader } from '../Panels'; +import SharedStorageHost from './FileSystemsHost'; +import PeriodicFetch from '../../lib/fetchers/periodicFetch'; +import { AnvilContext } from '../AnvilContext'; +import Spinner from '../Spinner'; + +const useStyles = makeStyles((theme) => ({ + header: { + paddingTop: '.1em', + paddingRight: '.7em', + }, + root: { + overflow: 'auto', + height: '78vh', + paddingLeft: '.3em', + [theme.breakpoints.down('md')]: { + height: '100%', + }, + }, +})); + +const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { + const classes = useStyles(); + const { uuid } = useContext(AnvilContext); + const { data, isLoading } = PeriodicFetch( + `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`, + ); + return ( + + + {!isLoading ? ( + + {data?.file_systems && + data.file_systems.map( + (fs: AnvilSharedStorageFileSystem): JSX.Element => ( + + + + + + + + + {fs?.hosts && + fs.hosts.map( + ( + host: AnvilSharedStorageHost, + index: number, + ): JSX.Element => ( + a.anvil_uuid === uuid) + ].hosts[index], + }} + key={fs.hosts[index].free} + /> + ), + )} + + ), + )} + + ) : ( + + )} + + ); +}; + +export default SharedStorage; diff --git a/striker-ui/components/FileSystem/FileSystemsHost.tsx b/striker-ui/components/FileSystem/FileSystemsHost.tsx new file mode 100644 index 00000000..63feead0 --- /dev/null +++ b/striker-ui/components/FileSystem/FileSystemsHost.tsx @@ -0,0 +1,80 @@ +import { Box } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import * as prettyBytes from 'pretty-bytes'; +import { AllocationBar } from '../Bars'; +import { BodyText } from '../Text'; +import Decorator from '../Decorator'; + +const useStyles = makeStyles(() => ({ + fs: { + paddingLeft: '.7em', + paddingRight: '.7em', + paddingTop: '1.2em', + }, + bar: { + paddingLeft: '.7em', + paddingRight: '.7em', + }, + decoratorBox: { + paddingRight: '.3em', + }, +})); + +const SharedStorageHost = ({ + host, +}: { + host: AnvilSharedStorageHost; +}): JSX.Element => { + const classes = useStyles(); + return ( + <> + + + + + + + + + + + + {host.is_mounted && ( + <> + + + + + + + + + + + + + + + + + + )} + + ); +}; + +export default SharedStorageHost; diff --git a/striker-ui/components/FileSystem/index.tsx b/striker-ui/components/FileSystem/index.tsx new file mode 100644 index 00000000..42e3505f --- /dev/null +++ b/striker-ui/components/FileSystem/index.tsx @@ -0,0 +1,3 @@ +import SharedStorage from './FileSystems'; + +export default SharedStorage; diff --git a/striker-ui/types/AnvilFileSystems.d.ts b/striker-ui/types/AnvilFileSystems.d.ts new file mode 100644 index 00000000..c11fd39b --- /dev/null +++ b/striker-ui/types/AnvilFileSystems.d.ts @@ -0,0 +1,16 @@ +declare type AnvilSharedStorageHost = { + host_uuid: string; + host_name: string; + is_mounted: boolean; + total: number; + free: number; +}; + +declare type AnvilSharedStorageFileSystem = { + mount_point: string; + hosts: Array; +}; + +declare type AnvilSharedStorage = { + file_systems: Array; +};