Tsu-ba-me
2 years ago
parent
837dc3028d
commit
9e9a81a5ce
27 changed files with 255 additions and 512 deletions
@ -1,93 +0,0 @@ |
||||
import { useContext } from 'react'; |
||||
|
||||
import { Box } from '@mui/material'; |
||||
import { styled } from '@mui/material/styles'; |
||||
import { BodyText, HeaderText } from '../Text'; |
||||
import { Panel, InnerPanel, InnerPanelHeader } from '../Panels'; |
||||
import SharedStorageHost from './FileSystemsHost'; |
||||
import periodicFetch from '../../lib/fetchers/periodicFetch'; |
||||
import { AnvilContext } from '../AnvilContext'; |
||||
import Spinner from '../Spinner'; |
||||
import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const PREFIX = 'SharedStorage'; |
||||
|
||||
const classes = { |
||||
header: `${PREFIX}-header`, |
||||
root: `${PREFIX}-root`, |
||||
}; |
||||
|
||||
const StyledDiv = styled('div')(({ theme }) => ({ |
||||
[`& .${classes.header}`]: { |
||||
paddingTop: '.1em', |
||||
paddingRight: '.7em', |
||||
}, |
||||
|
||||
[`& .${classes.root}`]: { |
||||
overflow: 'auto', |
||||
height: '78vh', |
||||
paddingLeft: '.3em', |
||||
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: { |
||||
height: '100%', |
||||
}, |
||||
}, |
||||
})); |
||||
|
||||
const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
||||
const { uuid } = useContext(AnvilContext); |
||||
const { data, isLoading } = periodicFetch<{ |
||||
file_systems: AnvilFileSystem[]; |
||||
}>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`, |
||||
); |
||||
return ( |
||||
<Panel> |
||||
<StyledDiv> |
||||
<HeaderText text="Shared Storage" /> |
||||
{!isLoading ? ( |
||||
<Box className={classes.root}> |
||||
{data?.file_systems && |
||||
data.file_systems.map( |
||||
(fs: AnvilFileSystem): JSX.Element => ( |
||||
<InnerPanel key={fs.mount_point}> |
||||
<InnerPanelHeader> |
||||
<Box |
||||
display="flex" |
||||
width="100%" |
||||
className={classes.header} |
||||
> |
||||
<Box> |
||||
<BodyText text={fs.mount_point} /> |
||||
</Box> |
||||
</Box> |
||||
</InnerPanelHeader> |
||||
{fs?.hosts && |
||||
fs.hosts.map( |
||||
( |
||||
host: AnvilFileSystemHost, |
||||
index: number, |
||||
): JSX.Element => ( |
||||
<SharedStorageHost |
||||
host={{ |
||||
...host, |
||||
...anvil[ |
||||
anvil.findIndex((a) => a.anvil_uuid === uuid) |
||||
].hosts[index], |
||||
}} |
||||
key={fs.hosts[index].free} |
||||
/> |
||||
), |
||||
)} |
||||
</InnerPanel> |
||||
), |
||||
)} |
||||
</Box> |
||||
) : ( |
||||
<Spinner /> |
||||
)} |
||||
</StyledDiv> |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default SharedStorage; |
||||
@ -1,87 +0,0 @@ |
||||
import { Box } from '@mui/material'; |
||||
import { styled } from '@mui/material/styles'; |
||||
import * as prettyBytes from 'pretty-bytes'; |
||||
import { AllocationBar } from '../Bars'; |
||||
import { BodyText } from '../Text'; |
||||
import Decorator from '../Decorator'; |
||||
|
||||
const PREFIX = 'SharedStorageHost'; |
||||
|
||||
const classes = { |
||||
fs: `${PREFIX}-fs`, |
||||
bar: `${PREFIX}-bar`, |
||||
decoratorBox: `${PREFIX}-decoratorBox`, |
||||
}; |
||||
|
||||
const StyledDiv = styled('div')(() => ({ |
||||
[`& .${classes.fs}`]: { |
||||
paddingLeft: '.7em', |
||||
paddingRight: '.7em', |
||||
paddingTop: '1.2em', |
||||
}, |
||||
|
||||
[`& .${classes.bar}`]: { |
||||
paddingLeft: '.7em', |
||||
paddingRight: '.7em', |
||||
}, |
||||
|
||||
[`& .${classes.decoratorBox}`]: { |
||||
paddingRight: '.3em', |
||||
}, |
||||
})); |
||||
|
||||
const SharedStorageHost = ({ |
||||
host, |
||||
}: { |
||||
host: AnvilFileSystemHost; |
||||
}): JSX.Element => ( |
||||
<StyledDiv> |
||||
<Box display="flex" width="100%" className={classes.fs}> |
||||
<Box flexGrow={1}> |
||||
<BodyText text={host.host_name || 'Not Available'} /> |
||||
</Box> |
||||
<Box className={classes.decoratorBox}> |
||||
<Decorator colour={host.is_mounted ? 'ok' : 'error'} /> |
||||
</Box> |
||||
<Box> |
||||
<BodyText text={host.is_mounted ? 'Mounted' : 'Not Mounted'} /> |
||||
</Box> |
||||
</Box> |
||||
{host.is_mounted && ( |
||||
<> |
||||
<Box display="flex" width="100%" className={classes.fs}> |
||||
<Box flexGrow={1}> |
||||
<BodyText |
||||
text={`Used: ${prettyBytes.default(host.total - host.free, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Box> |
||||
<Box> |
||||
<BodyText |
||||
text={`Free: ${prettyBytes.default(host.free, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Box> |
||||
</Box> |
||||
<Box display="flex" width="100%" className={classes.bar}> |
||||
<Box flexGrow={1}> |
||||
<AllocationBar |
||||
allocated={((host.total - host.free) / host.total) * 100} |
||||
/> |
||||
</Box> |
||||
</Box> |
||||
<Box display="flex" justifyContent="center" width="100%"> |
||||
<BodyText |
||||
text={`Total Storage: ${prettyBytes.default(host.total, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Box> |
||||
</> |
||||
)} |
||||
</StyledDiv> |
||||
); |
||||
|
||||
export default SharedStorageHost; |
||||
@ -1,3 +0,0 @@ |
||||
import SharedStorage from './FileSystems'; |
||||
|
||||
export default SharedStorage; |
||||
@ -1,53 +0,0 @@ |
||||
import { Grid } from '@mui/material'; |
||||
import * as prettyBytes from 'pretty-bytes'; |
||||
import { useMemo } from 'react'; |
||||
|
||||
import { AllocationBar } from './Bars'; |
||||
import { Panel } from './Panels'; |
||||
import periodicFetch from '../lib/fetchers/periodicFetch'; |
||||
import Spinner from './Spinner'; |
||||
import { HeaderText, BodyText } from './Text'; |
||||
|
||||
// TODO: need to be removed or revised because it's likely unused.
|
||||
const Storage = ({ uuid }: { uuid: string }): JSX.Element => { |
||||
const { data: { free = 0, total = 0 } = {}, isLoading } = |
||||
periodicFetch<AnvilMemory>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`, |
||||
); |
||||
|
||||
const contentLayoutElement = useMemo( |
||||
() => ( |
||||
<Grid container alignItems="center" justifyContent="space-around"> |
||||
<Grid item xs={12}> |
||||
<HeaderText text="Storage Resync" /> |
||||
</Grid> |
||||
<Grid item xs={5}> |
||||
<BodyText |
||||
text={`Allocated: ${prettyBytes.default(total - free, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Grid> |
||||
<Grid item xs={4}> |
||||
<BodyText |
||||
text={`Free: ${prettyBytes.default(free, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Grid> |
||||
<Grid item xs={10}> |
||||
<AllocationBar allocated={((total - free) / total) * 100} /> |
||||
</Grid> |
||||
</Grid> |
||||
), |
||||
[free, total], |
||||
); |
||||
const contentAreaElement = useMemo( |
||||
() => (isLoading ? <Spinner /> : contentLayoutElement), |
||||
[contentLayoutElement, isLoading], |
||||
); |
||||
|
||||
return <Panel>{contentAreaElement}</Panel>; |
||||
}; |
||||
|
||||
export default Storage; |
||||
@ -0,0 +1,88 @@ |
||||
type AnvilCPU = { |
||||
allocated: number; |
||||
cores: number; |
||||
threads: number; |
||||
}; |
||||
|
||||
type AnvilMemory = { |
||||
allocated: string; |
||||
reserved: string; |
||||
total: string; |
||||
}; |
||||
|
||||
type AnvilNetworkBondLink = { |
||||
link_name: string; |
||||
link_uuid: string; |
||||
link_speed: number; |
||||
link_state: 'optimal' | 'degraded' | 'down'; |
||||
is_active: boolean; |
||||
}; |
||||
|
||||
type AnvilNetworkHostBond = { |
||||
bond_name: string; |
||||
bond_uuid: string; |
||||
links: AnvilNetworkBondLink[]; |
||||
}; |
||||
|
||||
type AnvilNetworkHosts = { |
||||
host_name: string; |
||||
host_uuid: string; |
||||
bonds: AnvilNetworkHostBond[]; |
||||
}; |
||||
|
||||
type AnvilNetwork = { |
||||
hosts: AnvilNetworkHosts[]; |
||||
}; |
||||
|
||||
type AnvilServer = { |
||||
anvilName: string; |
||||
anvilUUID: string; |
||||
serverName: string; |
||||
serverUUID: string; |
||||
serverState: |
||||
| 'running' |
||||
| 'idle' |
||||
| 'paused' |
||||
| 'in shutdown' |
||||
| 'shut off' |
||||
| 'crashed' |
||||
| 'pmsuspended' |
||||
| 'migrating'; |
||||
serverHostUUID: string; |
||||
}; |
||||
|
||||
type AnvilServers = AnvilServer[]; |
||||
|
||||
type AnvilSharedStorageGroup = { |
||||
storage_group_free: string; |
||||
storage_group_name: string; |
||||
storage_group_total: string; |
||||
storage_group_uuid: string; |
||||
}; |
||||
|
||||
type AnvilSharedStorage = { |
||||
storage_groups: AnvilSharedStorageGroup[]; |
||||
}; |
||||
|
||||
type AnvilStatusHost = { |
||||
state: 'offline' | 'booted' | 'crmd' | 'in_ccm' | 'online'; |
||||
host_uuid: string; |
||||
host_name: string; |
||||
state_percent: number; |
||||
state_message: string; |
||||
removable: boolean; |
||||
}; |
||||
|
||||
type AnvilStatus = { |
||||
anvil_state: 'optimal' | 'not_ready' | 'degraded'; |
||||
hosts: AnvilStatusHost[]; |
||||
}; |
||||
|
||||
type AnvilListItem = { |
||||
anvil_name: string; |
||||
anvil_uuid: string; |
||||
} & AnvilStatus; |
||||
|
||||
type AnvilList = { |
||||
anvils: AnvilListItem[]; |
||||
}; |
||||
@ -1,5 +0,0 @@ |
||||
declare type AnvilCPU = { |
||||
cores: number; |
||||
threads: number; |
||||
allocated: number; |
||||
}; |
||||
@ -1,16 +0,0 @@ |
||||
declare type AnvilFileSystemHost = { |
||||
host_uuid: string; |
||||
host_name: string; |
||||
is_mounted: boolean; |
||||
total: number; |
||||
free: number; |
||||
}; |
||||
|
||||
declare type AnvilFileSystem = { |
||||
mount_point: string; |
||||
hosts: Array<AnvilFileSystemHost>; |
||||
}; |
||||
|
||||
declare type AnvilFileSystems = { |
||||
file_systems: Array<AnvilFileSystem>; |
||||
}; |
||||
@ -1,8 +0,0 @@ |
||||
declare type AnvilListItem = { |
||||
anvil_name: string; |
||||
anvil_uuid: string; |
||||
} & AnvilStatus; |
||||
|
||||
declare type AnvilList = { |
||||
anvils: Array<AnvilListItem>; |
||||
}; |
||||
@ -1,6 +0,0 @@ |
||||
declare type AnvilMemory = { |
||||
allocated: number; |
||||
free: number; |
||||
reserved: number; |
||||
total: number; |
||||
}; |
||||
@ -1,45 +0,0 @@ |
||||
declare type AnvilNetworkBondLink = { |
||||
link_name: string; |
||||
link_uuid: string; |
||||
link_speed: number; |
||||
link_state: 'optimal' | 'degraded' | 'down'; |
||||
is_active: boolean; |
||||
}; |
||||
|
||||
declare type AnvilNetworkHostBond = { |
||||
bond_name: string; |
||||
bond_uuid: string; |
||||
links: Array<AnvilNetworkBondLink>; |
||||
}; |
||||
|
||||
declare type AnvilNetworkHosts = { |
||||
host_name: string; |
||||
host_uuid: string; |
||||
bonds: Array<AnvilNetworkHostBond>; |
||||
}; |
||||
|
||||
declare type AnvilNetwork = { |
||||
hosts: Array<AnvilNetworkHosts>; |
||||
}; |
||||
|
||||
declare type ProcessedBond = { |
||||
bond_name: string; |
||||
bond_uuid: string; |
||||
bond_speed: number; |
||||
bond_state: 'optimal' | 'degraded' | 'down'; |
||||
hosts: Array<{ |
||||
host_name: string; |
||||
host_uuid: string; |
||||
link: { |
||||
link_name: string; |
||||
link_uuid: string; |
||||
link_speed: number; |
||||
link_state: 'optimal' | 'degraded' | 'down'; |
||||
is_active: boolean; |
||||
}; |
||||
}>; |
||||
}; |
||||
|
||||
declare type ProcessedNetwork = { |
||||
bonds: Array<ProcessedBond>; |
||||
}; |
||||
@ -1,18 +0,0 @@ |
||||
declare type AnvilServer = { |
||||
server_name: string; |
||||
server_uuid: string; |
||||
server_state: |
||||
| 'running' |
||||
| 'idle' |
||||
| 'paused' |
||||
| 'in shutdown' |
||||
| 'shut off' |
||||
| 'crashed' |
||||
| 'pmsuspended' |
||||
| 'migrating'; |
||||
server_host_uuid: string; |
||||
}; |
||||
|
||||
declare type AnvilServers = { |
||||
servers: Array<AnvilServer>; |
||||
}; |
||||
@ -1,10 +0,0 @@ |
||||
declare type AnvilSharedStorageGroup = { |
||||
storage_group_name: string; |
||||
storage_group_uuid: string; |
||||
storage_group_total: number; |
||||
storage_group_free: number; |
||||
}; |
||||
|
||||
declare type AnvilSharedStorage = { |
||||
storage_groups: Array<AnvilSharedStorageGroup>; |
||||
}; |
||||
@ -1,13 +0,0 @@ |
||||
declare type AnvilStatusHost = { |
||||
state: 'offline' | 'booted' | 'crmd' | 'in_ccm' | 'online'; |
||||
host_uuid: string; |
||||
host_name: string; |
||||
state_percent: number; |
||||
state_message: string; |
||||
removable: boolean; |
||||
}; |
||||
|
||||
declare type AnvilStatus = { |
||||
anvil_state: 'optimal' | 'not_ready' | 'degraded'; |
||||
hosts: Array<AnvilStatusHost>; |
||||
}; |
||||
@ -0,0 +1,21 @@ |
||||
type ProcessedBond = { |
||||
bond_name: string; |
||||
bond_uuid: string; |
||||
bond_speed: number; |
||||
bond_state: 'optimal' | 'degraded' | 'down'; |
||||
hosts: Array<{ |
||||
host_name: string; |
||||
host_uuid: string; |
||||
link: { |
||||
link_name: string; |
||||
link_uuid: string; |
||||
link_speed: number; |
||||
link_state: 'optimal' | 'degraded' | 'down'; |
||||
is_active: boolean; |
||||
}; |
||||
}>; |
||||
}; |
||||
|
||||
type ProcessedNetwork = { |
||||
bonds: ProcessedBond[]; |
||||
}; |
||||
Loading…
Reference in new issue