Merge pull request #109 from Tsu-ba-me/issues/4-web-ui-rpm
Add new web UI and its build resourcesmain
Digimer
4 years ago
committed by
GitHub
commit
57bf83f32d
94 changed files with 9174 additions and 3 deletions
@ -0,0 +1,5 @@ |
||||
# dependencies |
||||
/node_modules |
||||
|
||||
# next.js |
||||
/.next/ |
||||
@ -0,0 +1,63 @@ |
||||
{ |
||||
"env": { |
||||
"browser": true, |
||||
"commonjs": true, |
||||
"es6": true, |
||||
"node": true |
||||
}, |
||||
"extends": [ |
||||
"airbnb", |
||||
"eslint:recommended", |
||||
"plugin:@typescript-eslint/recommended", |
||||
"plugin:import/errors", |
||||
"plugin:import/typescript", |
||||
"plugin:import/warnings", |
||||
"plugin:jsx-a11y/recommended", |
||||
"plugin:prettier/recommended", |
||||
"plugin:react/recommended", |
||||
"plugin:react-hooks/recommended", |
||||
"prettier/@typescript-eslint", |
||||
"prettier/react" |
||||
], |
||||
"plugins": [ |
||||
"@typescript-eslint", |
||||
"import", |
||||
"jsx-a11y", |
||||
"prettier", |
||||
"react", |
||||
"react-hooks" |
||||
], |
||||
"parser": "@typescript-eslint/parser", |
||||
"parserOptions": { |
||||
"ecmaFeatures": { |
||||
"jsx": true |
||||
}, |
||||
"ecmaVersion": 2020, |
||||
"sourceType": "module" |
||||
}, |
||||
"rules": { |
||||
"complexity": ["error", 5], |
||||
"import/extensions": [ |
||||
"error", |
||||
"ignorePackages", |
||||
{ |
||||
"js": "never", |
||||
"jsx": "never", |
||||
"ts": "never", |
||||
"tsx": "never" |
||||
} |
||||
], |
||||
// Allow JSX in files with other extensions |
||||
"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }], |
||||
// Use TypeScript's types for component props |
||||
"react/prop-types": "off", |
||||
// Importing React is not required in Next.js |
||||
"react/react-in-jsx-scope": "off", |
||||
|
||||
"camelcase": "off", |
||||
"@typescript-eslint/camelcase": "off" |
||||
}, |
||||
"settings": { |
||||
"react": { "version": "detect" } |
||||
} |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. |
||||
|
||||
# dependencies |
||||
/node_modules |
||||
/.pnp |
||||
.pnp.js |
||||
|
||||
# testing |
||||
/coverage |
||||
|
||||
# next.js |
||||
/.next/ |
||||
/out/ |
||||
|
||||
# production |
||||
/build |
||||
|
||||
# misc |
||||
.DS_Store |
||||
*.pem |
||||
|
||||
# debug |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
|
||||
# local env files |
||||
.env.local |
||||
.env.development.local |
||||
.env.test.local |
||||
.env.production.local |
||||
|
||||
# vercel |
||||
.vercel |
||||
@ -0,0 +1 @@ |
||||
_ |
||||
@ -0,0 +1,6 @@ |
||||
#!/bin/sh |
||||
. "$(dirname "$0")/_/husky.sh" |
||||
|
||||
cd striker-ui |
||||
|
||||
npx --no-install commitlint --edit "$1" |
||||
@ -0,0 +1,7 @@ |
||||
#!/bin/sh |
||||
. "$(dirname "$0")/_/husky.sh" |
||||
|
||||
# Must cd because pwd/cwd is the root of this repository. |
||||
cd striker-ui |
||||
|
||||
npx --no-install lint-staged |
||||
@ -0,0 +1,4 @@ |
||||
{ |
||||
"*.{js,jsx,ts,tsx}": "npm run lint -- --fix", |
||||
"*.{json,md}": "prettier --write" |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
{ |
||||
"endOfLine": "lf", |
||||
"singleQuote": true, |
||||
"tabWidth": 2, |
||||
"trailingComma": "all" |
||||
} |
||||
@ -0,0 +1,136 @@ |
||||
MAINTAINERCLEANFILES = Makefile.in
|
||||
|
||||
# The files listed under EXTRA_DIST is only used for building, they should not
|
||||
# be included in the installation process.
|
||||
#
|
||||
# It is recommended to use the following command to regenerate the file list
|
||||
# as files get added/removed:
|
||||
#
|
||||
# find . \
|
||||
# -not \( -name node_modules -prune \) \ # Ignore ./node_modules directory
|
||||
# -not \( -name *git* -prune \) \ # Ignore git related files
|
||||
# -not \( -name *husky* -prune \) \ # Ignore husky related files
|
||||
# -not \( -name public -prune \) \ # Ignore ./public directory
|
||||
# -not \( -name *[Mm]ake* -prune \) \ # Ignore make related files
|
||||
# -not \( -name *.md -prune \) \ # Ignore all markdown files
|
||||
# -type f \ # Only print file paths
|
||||
# | sed -E 's@^./(.+)$@\1 \\@' # Remove leading "./" and append "\"
|
||||
#
|
||||
EXTRA_DIST = \
|
||||
next.config.js \
|
||||
next-env.d.ts \
|
||||
tsconfig.json \
|
||||
theme/index.ts \
|
||||
styles/globals.css \
|
||||
.lintstagedrc.json \
|
||||
env.development \
|
||||
package.json \
|
||||
lib/extended_date/ExtendedDate.ts \
|
||||
lib/fetchers/putJSON.ts \
|
||||
lib/fetchers/fetchJSON.ts \
|
||||
lib/fetchers/periodicFetch.ts \
|
||||
lib/sanitizers/hostsSanitizer.ts \
|
||||
lib/consts/ICONS.ts \
|
||||
lib/consts/DEFAULT_THEME.ts \
|
||||
lib/consts/SERVERS.ts \
|
||||
lib/consts/ANVILS.ts \
|
||||
lib/consts/API_BASE_URL.ts \
|
||||
lib/consts/IS_DEV_ENV.ts \
|
||||
lib/consts/NODES.ts \
|
||||
.prettierrc.json \
|
||||
types/AnvilServers.d.ts \
|
||||
types/GetAllAnvilResponse.d.ts \
|
||||
types/AnvilMemory.d.ts \
|
||||
types/FetchResponse.d.ts \
|
||||
types/AnvilSharedStorage.d.ts \
|
||||
types/AnvilNetwork.d.ts \
|
||||
types/AnvilTypes.d.ts \
|
||||
types/GetResponse.d.ts \
|
||||
types/AnvilNodeStatus.d.ts \
|
||||
types/AnvilList.d.ts \
|
||||
types/AnvilCPU.d.ts \
|
||||
types/GetOneAnvilResponse.d.ts \
|
||||
types/AnvilSet.d.ts \
|
||||
types/AnvilStatus.d.ts \
|
||||
types/AnvilReplicatedStorage.d.ts \
|
||||
types/AnvilFileSystems.d.ts \
|
||||
types/NodeSet.d.ts \
|
||||
components/Memory.tsx \
|
||||
components/Decorator.tsx \
|
||||
components/Hosts/index.tsx \
|
||||
components/Hosts/AnvilHost.tsx \
|
||||
components/Spinner.tsx \
|
||||
components/AnvilDrawer.tsx \
|
||||
components/Text/HeaderText.tsx \
|
||||
components/Text/index.tsx \
|
||||
components/Text/BodyText.tsx \
|
||||
components/FileSystem/index.tsx \
|
||||
components/FileSystem/FileSystemsHost.tsx \
|
||||
components/FileSystem/FileSystems.tsx \
|
||||
components/Anvils/index.tsx \
|
||||
components/Anvils/sortAnvils.ts \
|
||||
components/Anvils/Anvil.tsx \
|
||||
components/Anvils/AnvilList.tsx \
|
||||
components/Anvils/SelectedAnvil.tsx \
|
||||
components/Panels/index.tsx \
|
||||
components/Panels/InnerPanel.tsx \
|
||||
components/Panels/PanelHeader.tsx \
|
||||
components/Panels/Panel.tsx \
|
||||
components/Servers.tsx \
|
||||
components/Storage.tsx \
|
||||
components/AnvilContext.tsx \
|
||||
components/SharedStorage/SharedStorage.tsx \
|
||||
components/SharedStorage/index.tsx \
|
||||
components/SharedStorage/SharedStorageHost.tsx \
|
||||
components/Header.tsx \
|
||||
components/Network/index.tsx \
|
||||
components/Network/Network.tsx \
|
||||
components/Network/processNetwork.ts \
|
||||
components/CPU.tsx \
|
||||
components/Bars/index.tsx \
|
||||
components/Bars/ProgressBar.tsx \
|
||||
components/Bars/AllocationBar.tsx \
|
||||
pages/index.tsx \
|
||||
pages/_app.tsx \
|
||||
pages/_document.tsx \
|
||||
.eslintrc.json \
|
||||
commitlint.config.js \
|
||||
.eslintignore \
|
||||
package-lock.json
|
||||
|
||||
htmldir = $(localstatedir)/www/html
|
||||
outdir = out
|
||||
|
||||
# Trigger build target on make call without parameters.
|
||||
all: out |
||||
|
||||
# Note: the input file to the generate endpoint prefix step must exist in
|
||||
# EXTRA_DIST.
|
||||
#
|
||||
out: |
||||
-@echo "Copying required build files to build (current) directory."
|
||||
rsync -av --exclude "[Mm]ake*" $(srcdir)/ ./
|
||||
-@echo "Allow tools to write to files in the build directory."
|
||||
chmod -R +w .
|
||||
-@echo "Install node modules (dependencies) prior to building."
|
||||
npm install --no-package-lock --ignore-scripts
|
||||
-@echo "Generate endpoint prefix."
|
||||
sed 's@=.*@=/cgi-bin@' <env.development >.env.local
|
||||
-@echo "Build front-end project."
|
||||
npm run build
|
||||
|
||||
install-data-hook: |
||||
-@echo "Place build output files."
|
||||
cp -r $(outdir)/index.html $(outdir)/_next $(DESTDIR)/$(htmldir)/
|
||||
-@echo "Create symlink to images to enable borrowing icon etc. without duplicating."
|
||||
(cd $(DESTDIR)/$(htmldir); $(LN_S) skins/alteeve/images pngs)
|
||||
|
||||
uninstall-hook: |
||||
-@echo "Remove all installed files of the current module."
|
||||
(cd $(DESTDIR)/$(htmldir); rm -rf index.html _next pngs)
|
||||
|
||||
clean-local: |
||||
-@echo "Clean up build output files."
|
||||
test $(srcdir) == . && rm -rf $(outdir) .next || find . -mindepth 1 -maxdepth 1 -exec rm -rf {} +
|
||||
|
||||
distclean-local: clean-local |
||||
@ -0,0 +1,34 @@ |
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). |
||||
|
||||
## Getting Started |
||||
|
||||
First, run the development server: |
||||
|
||||
```bash |
||||
npm run dev |
||||
# or |
||||
yarn dev |
||||
``` |
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
||||
|
||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. |
||||
|
||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. |
||||
|
||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. |
||||
|
||||
## Learn More |
||||
|
||||
To learn more about Next.js, take a look at the following resources: |
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! |
||||
|
||||
## Deploy on Vercel |
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
||||
@ -0,0 +1,3 @@ |
||||
module.exports = { |
||||
extends: ['@commitlint/config-conventional'], |
||||
}; |
||||
@ -0,0 +1,29 @@ |
||||
import { createContext, useState, ReactNode } from 'react'; |
||||
|
||||
interface AnvilContextType { |
||||
uuid: string; |
||||
setAnvilUuid: (uuid: string) => void; |
||||
} |
||||
|
||||
const AnvilContextDefault: AnvilContextType = { |
||||
uuid: '', |
||||
setAnvilUuid: () => null, |
||||
}; |
||||
|
||||
const AnvilContext = createContext<AnvilContextType>(AnvilContextDefault); |
||||
|
||||
const AnvilProvider = ({ children }: { children: ReactNode }): JSX.Element => { |
||||
const [uuid, setUuid] = useState<string>(''); |
||||
const setAnvilUuid = (anvilUuid: string): void => { |
||||
setUuid(anvilUuid); |
||||
}; |
||||
|
||||
return ( |
||||
<AnvilContext.Provider value={{ uuid, setAnvilUuid }}> |
||||
{children} |
||||
</AnvilContext.Provider> |
||||
); |
||||
}; |
||||
|
||||
export default AnvilProvider; |
||||
export { AnvilContext }; |
||||
@ -0,0 +1,79 @@ |
||||
import { Divider, Drawer, List, ListItem, Box } from '@material-ui/core'; |
||||
import { makeStyles, createStyles } from '@material-ui/core/styles'; |
||||
import { Dispatch, SetStateAction } from 'react'; |
||||
import { BodyText, HeaderText } from './Text'; |
||||
import { ICONS, ICON_SIZE } from '../lib/consts/ICONS'; |
||||
import { DIVIDER } from '../lib/consts/DEFAULT_THEME'; |
||||
|
||||
interface DrawerProps { |
||||
open: boolean; |
||||
setOpen: Dispatch<SetStateAction<boolean>>; |
||||
} |
||||
|
||||
const useStyles = makeStyles(() => |
||||
createStyles({ |
||||
list: { |
||||
width: '200px', |
||||
}, |
||||
divider: { |
||||
background: DIVIDER, |
||||
}, |
||||
text: { |
||||
paddingTop: '.5em', |
||||
paddingLeft: '1.5em', |
||||
}, |
||||
}), |
||||
); |
||||
|
||||
const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => { |
||||
const classes = useStyles(); |
||||
|
||||
return ( |
||||
<Drawer |
||||
BackdropProps={{ invisible: true }} |
||||
anchor="left" |
||||
open={open} |
||||
onClose={() => setOpen(!open)} |
||||
> |
||||
<div role="presentation"> |
||||
<List className={classes.list}> |
||||
<ListItem button> |
||||
<HeaderText text="Admin" /> |
||||
</ListItem> |
||||
<Divider className={classes.divider} /> |
||||
{ICONS.map( |
||||
(icon): JSX.Element => ( |
||||
<ListItem |
||||
button |
||||
key={icon.image} |
||||
component="a" |
||||
href={ |
||||
icon.uri.search(/^https?:/) !== -1 |
||||
? icon.uri |
||||
: `${process.env.NEXT_PUBLIC_API_URL}${icon.uri}` |
||||
} |
||||
> |
||||
<Box display="flex" flexDirection="row" width="100%"> |
||||
<Box> |
||||
<img |
||||
alt="" |
||||
key="icon" |
||||
src={icon.image} |
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...ICON_SIZE} |
||||
/> |
||||
</Box> |
||||
<Box flexGrow={1} className={classes.text}> |
||||
<BodyText text={icon.text} /> |
||||
</Box> |
||||
</Box> |
||||
</ListItem> |
||||
), |
||||
)} |
||||
</List> |
||||
</div> |
||||
</Drawer> |
||||
); |
||||
}; |
||||
|
||||
export default AnvilDrawer; |
||||
@ -0,0 +1,15 @@ |
||||
import { BodyText } from '../Text'; |
||||
import anvilState from '../../lib/consts/ANVILS'; |
||||
|
||||
const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => { |
||||
return ( |
||||
<> |
||||
<BodyText text={anvil.anvil_name} /> |
||||
<BodyText |
||||
text={anvilState.get(anvil.anvil_state) || 'State unavailable'} |
||||
/> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Anvil; |
||||
@ -0,0 +1,83 @@ |
||||
import { useContext, useEffect } from 'react'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { List, Box, Divider, ListItem } from '@material-ui/core'; |
||||
import { HOVER, DIVIDER } from '../../lib/consts/DEFAULT_THEME'; |
||||
import Anvil from './Anvil'; |
||||
import { AnvilContext } from '../AnvilContext'; |
||||
import sortAnvils from './sortAnvils'; |
||||
import Decorator, { Colours } from '../Decorator'; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
root: { |
||||
width: '100%', |
||||
overflow: 'auto', |
||||
height: '30vh', |
||||
[theme.breakpoints.down('md')]: { |
||||
height: '100%', |
||||
overflow: 'hidden', |
||||
}, |
||||
}, |
||||
divider: { |
||||
background: DIVIDER, |
||||
}, |
||||
button: { |
||||
'&:hover': { |
||||
backgroundColor: HOVER, |
||||
}, |
||||
paddingLeft: 0, |
||||
}, |
||||
anvil: { |
||||
paddingLeft: 0, |
||||
}, |
||||
})); |
||||
|
||||
const selectDecorator = (state: string): Colours => { |
||||
switch (state) { |
||||
case 'optimal': |
||||
return 'ok'; |
||||
case 'not_ready': |
||||
return 'warning'; |
||||
case 'degraded': |
||||
return 'error'; |
||||
default: |
||||
return 'off'; |
||||
} |
||||
}; |
||||
|
||||
const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => { |
||||
const { uuid, setAnvilUuid } = useContext(AnvilContext); |
||||
const classes = useStyles(); |
||||
|
||||
useEffect(() => { |
||||
if (uuid === '') setAnvilUuid(sortAnvils(list)[0].anvil_uuid); |
||||
}, [uuid, list, setAnvilUuid]); |
||||
|
||||
return ( |
||||
<List component="nav" className={classes.root} aria-label="mailbox folders"> |
||||
{sortAnvils(list).map((anvil) => { |
||||
return ( |
||||
<> |
||||
<Divider className={classes.divider} /> |
||||
<ListItem |
||||
button |
||||
className={classes.button} |
||||
key={anvil.anvil_uuid} |
||||
onClick={() => setAnvilUuid(anvil.anvil_uuid)} |
||||
> |
||||
<Box display="flex" flexDirection="row" width="100%"> |
||||
<Box p={1}> |
||||
<Decorator colour={selectDecorator(anvil.anvil_state)} /> |
||||
</Box> |
||||
<Box p={1} flexGrow={1} className={classes.anvil}> |
||||
<Anvil anvil={anvil} /> |
||||
</Box> |
||||
</Box> |
||||
</ListItem> |
||||
</> |
||||
); |
||||
})} |
||||
</List> |
||||
); |
||||
}; |
||||
|
||||
export default AnvilList; |
||||
@ -0,0 +1,83 @@ |
||||
import { useContext } from 'react'; |
||||
import { Switch, Box } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { HeaderText } from '../Text'; |
||||
import { SELECTED_ANVIL } from '../../lib/consts/DEFAULT_THEME'; |
||||
import anvilState from '../../lib/consts/ANVILS'; |
||||
import { AnvilContext } from '../AnvilContext'; |
||||
import Decorator, { Colours } from '../Decorator'; |
||||
import putJSON from '../../lib/fetchers/putJSON'; |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
root: { |
||||
width: '100%', |
||||
'&:hover $child': { |
||||
backgroundColor: SELECTED_ANVIL, |
||||
}, |
||||
}, |
||||
anvilName: { |
||||
paddingLeft: 0, |
||||
}, |
||||
})); |
||||
|
||||
const selectDecorator = (state: string): Colours => { |
||||
switch (state) { |
||||
case 'optimal': |
||||
return 'ok'; |
||||
case 'not_ready': |
||||
return 'warning'; |
||||
case 'degraded': |
||||
return 'error'; |
||||
default: |
||||
return 'error'; |
||||
} |
||||
}; |
||||
|
||||
const isAnvilOn = (anvil: AnvilListItem): boolean => |
||||
!( |
||||
anvil.hosts.findIndex( |
||||
({ state }: AnvilStatusHost) => state !== 'offline', |
||||
) === -1 |
||||
); |
||||
|
||||
const SelectedAnvil = ({ list }: { list: AnvilListItem[] }): JSX.Element => { |
||||
const { uuid } = useContext(AnvilContext); |
||||
const classes = useStyles(); |
||||
|
||||
const index = list.findIndex( |
||||
(anvil: AnvilListItem) => anvil.anvil_uuid === uuid, |
||||
); |
||||
|
||||
return ( |
||||
<Box display="flex" flexDirection="row" width="100%"> |
||||
{uuid !== '' && ( |
||||
<> |
||||
<Box p={1}> |
||||
<Decorator colour={selectDecorator(list[index].anvil_state)} /> |
||||
</Box> |
||||
<Box p={1} flexGrow={1} className={classes.anvilName}> |
||||
<HeaderText text={list[index].anvil_name} /> |
||||
<HeaderText |
||||
text={ |
||||
anvilState.get(list[index].anvil_state) || 'State unavailable' |
||||
} |
||||
/> |
||||
</Box> |
||||
<Box p={1}> |
||||
<Switch |
||||
checked={isAnvilOn(list[index])} |
||||
onChange={() => |
||||
putJSON('/set_power', { |
||||
anvil_uuid: list[index].anvil_uuid, |
||||
is_on: !isAnvilOn(list[index]), |
||||
}) |
||||
} |
||||
/> |
||||
</Box> |
||||
</> |
||||
)} |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default SelectedAnvil; |
||||
@ -0,0 +1,28 @@ |
||||
import { Panel } from '../Panels'; |
||||
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; |
||||
import SelectedAnvil from './SelectedAnvil'; |
||||
import AnvilList from './AnvilList'; |
||||
|
||||
import sortAnvils from './sortAnvils'; |
||||
|
||||
const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => { |
||||
const anvils: AnvilListItem[] = []; |
||||
|
||||
list?.anvils.forEach((anvil: AnvilListItem) => { |
||||
const { data } = PeriodicFetch<AnvilStatus>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_status?anvil_uuid=${anvil.anvil_uuid}`, |
||||
); |
||||
anvils.push({ |
||||
...anvil, |
||||
...data, |
||||
}); |
||||
}); |
||||
return ( |
||||
<Panel> |
||||
<SelectedAnvil list={anvils} /> |
||||
<AnvilList list={sortAnvils(anvils)} /> |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default Anvils; |
||||
@ -0,0 +1,14 @@ |
||||
const sortAnvils = (unsortedList: AnvilListItem[]): AnvilListItem[] => { |
||||
const optimal: AnvilListItem[] = []; |
||||
const notReady: AnvilListItem[] = []; |
||||
const degraded: AnvilListItem[] = []; |
||||
|
||||
unsortedList.forEach((anvil) => { |
||||
if (anvil.anvil_state === 'optimal') optimal.push(anvil); |
||||
else if (anvil.anvil_state === 'not_ready') notReady.push(anvil); |
||||
else degraded.push(anvil); |
||||
}); |
||||
return [...degraded, ...notReady, ...optimal]; |
||||
}; |
||||
|
||||
export default sortAnvils; |
||||
@ -0,0 +1,61 @@ |
||||
import { makeStyles, withStyles } from '@material-ui/core/styles'; |
||||
import { LinearProgress } from '@material-ui/core'; |
||||
import { |
||||
PURPLE, |
||||
RED, |
||||
BLUE, |
||||
PANEL_BACKGROUND, |
||||
BORDER_RADIUS, |
||||
} from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const breakpointWarning = 70; |
||||
const breakpointAlert = 90; |
||||
|
||||
const BorderLinearProgress = withStyles({ |
||||
root: { |
||||
height: '1em', |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
colorPrimary: { |
||||
backgroundColor: PANEL_BACKGROUND, |
||||
}, |
||||
bar: { |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
})(LinearProgress); |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
barOk: { |
||||
backgroundColor: BLUE, |
||||
}, |
||||
barWarning: { |
||||
backgroundColor: PURPLE, |
||||
}, |
||||
barAlert: { |
||||
backgroundColor: RED, |
||||
}, |
||||
})); |
||||
|
||||
const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => { |
||||
const classes = useStyles(); |
||||
return ( |
||||
<> |
||||
<BorderLinearProgress |
||||
classes={{ |
||||
bar: |
||||
/* eslint-disable no-nested-ternary */ |
||||
allocated > breakpointWarning |
||||
? allocated > breakpointAlert |
||||
? classes.barAlert |
||||
: classes.barWarning |
||||
: classes.barOk, |
||||
}} |
||||
variant="determinate" |
||||
value={allocated} |
||||
/> |
||||
<LinearProgress variant="determinate" value={0} /> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default AllocationBar; |
||||
@ -0,0 +1,57 @@ |
||||
import { makeStyles, withStyles } from '@material-ui/core/styles'; |
||||
import { LinearProgress } from '@material-ui/core'; |
||||
import { |
||||
PURPLE, |
||||
BLUE, |
||||
PANEL_BACKGROUND, |
||||
BORDER_RADIUS, |
||||
} from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const completed = 100; |
||||
|
||||
const BorderLinearProgress = withStyles({ |
||||
root: { |
||||
height: '1em', |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
colorPrimary: { |
||||
backgroundColor: PANEL_BACKGROUND, |
||||
}, |
||||
bar: { |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
})(LinearProgress); |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
barOk: { |
||||
backgroundColor: BLUE, |
||||
}, |
||||
barInProgress: { |
||||
backgroundColor: PURPLE, |
||||
}, |
||||
})); |
||||
|
||||
const ProgressBar = ({ |
||||
progressPercentage, |
||||
}: { |
||||
progressPercentage: number; |
||||
}): JSX.Element => { |
||||
const classes = useStyles(); |
||||
return ( |
||||
<> |
||||
<BorderLinearProgress |
||||
classes={{ |
||||
bar: |
||||
progressPercentage < completed |
||||
? classes.barInProgress |
||||
: classes.barOk, |
||||
}} |
||||
variant="determinate" |
||||
value={progressPercentage} |
||||
/> |
||||
<LinearProgress variant="determinate" value={0} /> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default ProgressBar; |
||||
@ -0,0 +1,4 @@ |
||||
import AllocationBar from './AllocationBar'; |
||||
import ProgressBar from './ProgressBar'; |
||||
|
||||
export { AllocationBar, ProgressBar }; |
||||
@ -0,0 +1,39 @@ |
||||
import { useContext } from 'react'; |
||||
import { Box } from '@material-ui/core'; |
||||
import { Panel } from './Panels'; |
||||
import { HeaderText, BodyText } from './Text'; |
||||
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
||||
import { AnvilContext } from './AnvilContext'; |
||||
import Spinner from './Spinner'; |
||||
|
||||
const CPU = (): JSX.Element => { |
||||
const { uuid } = useContext(AnvilContext); |
||||
|
||||
const { data, isLoading } = PeriodicFetch<AnvilCPU>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`, |
||||
); |
||||
|
||||
const cpuData = |
||||
isLoading || !data ? { allocated: 0, cores: 0, threads: 0 } : data; |
||||
|
||||
return ( |
||||
<Panel> |
||||
<HeaderText text="CPU" /> |
||||
{!isLoading ? ( |
||||
<> |
||||
<Box display="flex" width="100%"> |
||||
<Box flexGrow={1} style={{ marginLeft: '1em', marginTop: '1em' }}> |
||||
<BodyText text={`Total Cores: ${cpuData.cores}`} /> |
||||
<BodyText text={`Total Threads: ${cpuData.threads}`} /> |
||||
<BodyText text={`Allocated Cores: ${cpuData.allocated}`} /> |
||||
</Box> |
||||
</Box> |
||||
</> |
||||
) : ( |
||||
<Spinner /> |
||||
)} |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default CPU; |
||||
@ -0,0 +1,37 @@ |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { |
||||
BLUE, |
||||
GREY, |
||||
PURPLE, |
||||
RED, |
||||
BORDER_RADIUS, |
||||
} from '../lib/consts/DEFAULT_THEME'; |
||||
|
||||
export type Colours = 'ok' | 'off' | 'error' | 'warning'; |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
decorator: { |
||||
width: '1.4em', |
||||
height: '100%', |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
ok: { |
||||
backgroundColor: BLUE, |
||||
}, |
||||
warning: { |
||||
backgroundColor: PURPLE, |
||||
}, |
||||
error: { |
||||
backgroundColor: RED, |
||||
}, |
||||
off: { |
||||
backgroundColor: GREY, |
||||
}, |
||||
})); |
||||
|
||||
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => { |
||||
const classes = useStyles(); |
||||
return <div className={`${classes.decorator} ${classes[colour]}`} />; |
||||
}; |
||||
|
||||
export default Decorator; |
||||
@ -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<AnvilSharedStorage>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`, |
||||
); |
||||
return ( |
||||
<Panel> |
||||
<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}> |
||||
<PanelHeader> |
||||
<Box display="flex" width="100%" className={classes.header}> |
||||
<Box> |
||||
<BodyText text={fs.mount_point} /> |
||||
</Box> |
||||
</Box> |
||||
</PanelHeader> |
||||
{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 /> |
||||
)} |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default SharedStorage; |
||||
@ -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: AnvilFileSystemHost; |
||||
}): JSX.Element => { |
||||
const classes = useStyles(); |
||||
return ( |
||||
<> |
||||
<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> |
||||
</> |
||||
)} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default SharedStorageHost; |
||||
@ -0,0 +1,3 @@ |
||||
import SharedStorage from './FileSystems'; |
||||
|
||||
export default SharedStorage; |
||||
@ -0,0 +1,86 @@ |
||||
import { useState } from 'react'; |
||||
import AppBar from '@material-ui/core/AppBar'; |
||||
import { makeStyles, createStyles } from '@material-ui/core/styles'; |
||||
import { Box, Button } from '@material-ui/core'; |
||||
import { ICONS, ICON_SIZE } from '../lib/consts/ICONS'; |
||||
import { BORDER_RADIUS, RED } from '../lib/consts/DEFAULT_THEME'; |
||||
import AnvilDrawer from './AnvilDrawer'; |
||||
|
||||
const useStyles = makeStyles((theme) => |
||||
createStyles({ |
||||
appBar: { |
||||
paddingTop: theme.spacing(0.5), |
||||
paddingBottom: theme.spacing(0.5), |
||||
paddingLeft: theme.spacing(3), |
||||
paddingRight: theme.spacing(3), |
||||
borderBottom: 'solid 1px', |
||||
borderBottomColor: RED, |
||||
}, |
||||
input: { |
||||
height: '2.8em', |
||||
width: '30vw', |
||||
backgroundColor: theme.palette.secondary.main, |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
barElement: { |
||||
padding: 0, |
||||
}, |
||||
icons: { |
||||
[theme.breakpoints.down('sm')]: { |
||||
display: 'none', |
||||
}, |
||||
}, |
||||
searchBar: { |
||||
[theme.breakpoints.down('sm')]: { |
||||
flexGrow: 1, |
||||
paddingLeft: '15vw', |
||||
}, |
||||
}, |
||||
}), |
||||
); |
||||
|
||||
const Header = (): JSX.Element => { |
||||
const classes = useStyles(); |
||||
const [open, setOpen] = useState(false); |
||||
|
||||
const toggleDrawer = (): void => setOpen(!open); |
||||
|
||||
return ( |
||||
<> |
||||
<AppBar position="static" className={classes.appBar}> |
||||
<Box display="flex" justifyContent="space-between" flexDirection="row"> |
||||
<Box className={classes.barElement}> |
||||
<Button onClick={toggleDrawer}> |
||||
<img alt="" src="/pngs/logo.png" width="160" height="40" /> |
||||
</Button> |
||||
</Box> |
||||
<Box className={`${classes.barElement} ${classes.icons}`}> |
||||
{ICONS.map( |
||||
(icon): JSX.Element => ( |
||||
<a |
||||
key={icon.uri} |
||||
href={ |
||||
icon.uri.search(/^https?:/) !== -1 |
||||
? icon.uri |
||||
: `${process.env.NEXT_PUBLIC_API_URL}${icon.uri}` |
||||
} |
||||
> |
||||
<img |
||||
alt="" |
||||
key="icon" |
||||
src={icon.image} |
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...ICON_SIZE} |
||||
/> |
||||
</a> |
||||
), |
||||
)} |
||||
</Box> |
||||
</Box> |
||||
</AppBar> |
||||
<AnvilDrawer open={open} setOpen={setOpen} /> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Header; |
||||
@ -0,0 +1,155 @@ |
||||
import { Box, Switch } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { InnerPanel, PanelHeader } from '../Panels'; |
||||
import { ProgressBar } from '../Bars'; |
||||
import { BodyText } from '../Text'; |
||||
import Decorator, { Colours } from '../Decorator'; |
||||
import HOST_STATUS from '../../lib/consts/NODES'; |
||||
|
||||
import putJSON from '../../lib/fetchers/putJSON'; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
root: { |
||||
overflow: 'auto', |
||||
height: '28vh', |
||||
paddingLeft: '.3em', |
||||
[theme.breakpoints.down('md')]: { |
||||
height: '100%', |
||||
overflow: 'hidden', |
||||
}, |
||||
}, |
||||
state: { |
||||
paddingLeft: '.7em', |
||||
paddingRight: '.7em', |
||||
paddingTop: '1em', |
||||
}, |
||||
bar: { |
||||
paddingLeft: '.7em', |
||||
paddingRight: '.7em', |
||||
}, |
||||
header: { |
||||
paddingTop: '.3em', |
||||
paddingRight: '.7em', |
||||
}, |
||||
label: { |
||||
paddingTop: '.3em', |
||||
}, |
||||
decoratorBox: { |
||||
paddingRight: '.3em', |
||||
}, |
||||
})); |
||||
|
||||
const selectStateMessage = (regex: RegExp, message: string): string => { |
||||
const msg = regex.exec(message); |
||||
|
||||
if (msg) { |
||||
return HOST_STATUS.get(msg[0]) || 'Error code not recognized'; |
||||
} |
||||
return 'Error code not found'; |
||||
}; |
||||
|
||||
const selectDecorator = (state: string): Colours => { |
||||
switch (state) { |
||||
case 'online': |
||||
return 'ok'; |
||||
case 'offline': |
||||
return 'off'; |
||||
default: |
||||
return 'warning'; |
||||
} |
||||
}; |
||||
|
||||
const AnvilHost = ({ |
||||
hosts, |
||||
}: { |
||||
hosts: Array<AnvilStatusHost>; |
||||
}): JSX.Element => { |
||||
const classes = useStyles(); |
||||
const stateRegex = /^[a-zA-Z]/; |
||||
const messageRegex = /^(message_[0-9]+)/; |
||||
|
||||
return ( |
||||
<Box className={classes.root}> |
||||
{hosts && |
||||
hosts.map( |
||||
(host): JSX.Element => { |
||||
return ( |
||||
<InnerPanel key={host.host_uuid}> |
||||
<PanelHeader> |
||||
<Box display="flex" width="100%" className={classes.header}> |
||||
<Box flexGrow={1}> |
||||
<BodyText text={host.host_name} /> |
||||
</Box> |
||||
<Box className={classes.decoratorBox}> |
||||
<Decorator colour={selectDecorator(host.state)} /> |
||||
</Box> |
||||
<Box> |
||||
<BodyText |
||||
text={ |
||||
host?.state?.replace(stateRegex, (c) => |
||||
c.toUpperCase(), |
||||
) || 'Not Available' |
||||
} |
||||
/> |
||||
</Box> |
||||
</Box> |
||||
</PanelHeader> |
||||
<Box display="flex" className={classes.state}> |
||||
<Box className={classes.label}> |
||||
<BodyText text="Power: " /> |
||||
</Box> |
||||
<Box flexGrow={1}> |
||||
<Switch |
||||
checked={host.state === 'online'} |
||||
onChange={() => |
||||
putJSON('/set_power', { |
||||
host_uuid: host.host_uuid, |
||||
is_on: !(host.state === 'online'), |
||||
}) |
||||
} |
||||
/> |
||||
</Box> |
||||
<Box className={classes.label}> |
||||
<BodyText text="Member: " /> |
||||
</Box> |
||||
<Box> |
||||
<Switch |
||||
checked={host.state === 'online'} |
||||
disabled={!(host.state === 'online')} |
||||
onChange={() => |
||||
putJSON('/set_membership', { |
||||
host_uuid: host.host_uuid, |
||||
is_member: !(host.state === 'online'), |
||||
}) |
||||
} |
||||
/> |
||||
</Box> |
||||
</Box> |
||||
{host.state !== 'online' && host.state !== 'offline' && ( |
||||
<> |
||||
<Box display="flex" width="100%" className={classes.state}> |
||||
<Box> |
||||
<BodyText |
||||
text={selectStateMessage( |
||||
messageRegex, |
||||
host.state_message, |
||||
)} |
||||
/> |
||||
</Box> |
||||
</Box> |
||||
<Box display="flex" width="100%" className={classes.bar}> |
||||
<Box flexGrow={1}> |
||||
<ProgressBar progressPercentage={host.state_percent} /> |
||||
</Box> |
||||
</Box> |
||||
</> |
||||
)} |
||||
</InnerPanel> |
||||
); |
||||
}, |
||||
)} |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default AnvilHost; |
||||
@ -0,0 +1,41 @@ |
||||
import { useContext } from 'react'; |
||||
import { Panel } from '../Panels'; |
||||
import { HeaderText } from '../Text'; |
||||
import AnvilHost from './AnvilHost'; |
||||
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; |
||||
import { AnvilContext } from '../AnvilContext'; |
||||
import Spinner from '../Spinner'; |
||||
import hostsSanitizer from '../../lib/sanitizers/hostsSanitizer'; |
||||
|
||||
const Hosts = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
||||
const { uuid } = useContext(AnvilContext); |
||||
|
||||
const { data, isLoading } = PeriodicFetch<AnvilStatus>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_status?anvil_uuid=${uuid}`, |
||||
); |
||||
|
||||
const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid); |
||||
|
||||
return ( |
||||
<Panel> |
||||
<HeaderText text="Nodes" /> |
||||
{!isLoading ? ( |
||||
<> |
||||
{anvilIndex !== -1 && data && ( |
||||
<AnvilHost |
||||
hosts={hostsSanitizer(anvil[anvilIndex].hosts).map( |
||||
(host, index) => { |
||||
return data.hosts[index]; |
||||
}, |
||||
)} |
||||
/> |
||||
)} |
||||
</> |
||||
) : ( |
||||
<Spinner /> |
||||
)} |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default Hosts; |
||||
@ -0,0 +1,69 @@ |
||||
import { useContext } from 'react'; |
||||
import { Box } from '@material-ui/core'; |
||||
import * as prettyBytes from 'pretty-bytes'; |
||||
import { Panel } from './Panels'; |
||||
import { AllocationBar } from './Bars'; |
||||
import { HeaderText, BodyText } from './Text'; |
||||
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
||||
import { AnvilContext } from './AnvilContext'; |
||||
import Spinner from './Spinner'; |
||||
|
||||
const Memory = (): JSX.Element => { |
||||
const { uuid } = useContext(AnvilContext); |
||||
const { data, isLoading } = PeriodicFetch<AnvilMemory>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`, |
||||
); |
||||
|
||||
const memoryData = |
||||
isLoading || !data ? { total: 0, allocated: 0, reserved: 0 } : data; |
||||
|
||||
return ( |
||||
<Panel> |
||||
<HeaderText text="Memory" /> |
||||
{!isLoading ? ( |
||||
<> |
||||
{' '} |
||||
<Box display="flex" width="100%"> |
||||
<Box flexGrow={1}> |
||||
<BodyText |
||||
text={`Allocated: ${prettyBytes.default(memoryData.allocated, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Box> |
||||
<Box> |
||||
<BodyText |
||||
text={`Free: ${prettyBytes.default( |
||||
memoryData.total - memoryData.allocated, |
||||
{ |
||||
binary: true, |
||||
}, |
||||
)}`}
|
||||
/> |
||||
</Box> |
||||
</Box> |
||||
<Box display="flex" width="100%"> |
||||
<Box flexGrow={1}> |
||||
<AllocationBar |
||||
allocated={(memoryData.allocated / memoryData.total) * 100} |
||||
/> |
||||
</Box> |
||||
</Box> |
||||
<Box display="flex" justifyContent="center" width="100%"> |
||||
<BodyText |
||||
text={`Total: ${prettyBytes.default(memoryData.total, { |
||||
binary: true, |
||||
})} | Reserved: ${prettyBytes.default(memoryData.reserved, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Box> |
||||
</> |
||||
) : ( |
||||
<Spinner /> |
||||
)} |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default Memory; |
||||
@ -0,0 +1,123 @@ |
||||
import { useContext } from 'react'; |
||||
import { Box, Divider } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { Panel } from '../Panels'; |
||||
import { HeaderText, BodyText } from '../Text'; |
||||
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; |
||||
import { DIVIDER } from '../../lib/consts/DEFAULT_THEME'; |
||||
import processNetworkData from './processNetwork'; |
||||
import { AnvilContext } from '../AnvilContext'; |
||||
import Decorator, { Colours } from '../Decorator'; |
||||
import Spinner from '../Spinner'; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
container: { |
||||
width: '100%', |
||||
overflow: 'auto', |
||||
height: '32vh', |
||||
[theme.breakpoints.down('md')]: { |
||||
height: '100%', |
||||
overflow: 'hidden', |
||||
}, |
||||
}, |
||||
root: { |
||||
paddingTop: '.7em', |
||||
paddingBottom: '.7em', |
||||
}, |
||||
noPaddingLeft: { |
||||
paddingLeft: 0, |
||||
}, |
||||
divider: { |
||||
background: DIVIDER, |
||||
}, |
||||
verticalDivider: { |
||||
height: '3.5em', |
||||
}, |
||||
})); |
||||
|
||||
const selectDecorator = (state: string): Colours => { |
||||
switch (state) { |
||||
case 'optimal': |
||||
return 'ok'; |
||||
case 'degraded': |
||||
return 'warning'; |
||||
case 'down': |
||||
return 'error'; |
||||
default: |
||||
return 'warning'; |
||||
} |
||||
}; |
||||
|
||||
const Network = (): JSX.Element => { |
||||
const { uuid } = useContext(AnvilContext); |
||||
const classes = useStyles(); |
||||
|
||||
const { data, isLoading } = PeriodicFetch<AnvilNetwork>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_networks?anvil_uuid=${uuid}`, |
||||
); |
||||
|
||||
const processed = processNetworkData(data); |
||||
return ( |
||||
<Panel> |
||||
<HeaderText text="Network" /> |
||||
{!isLoading ? ( |
||||
<Box className={classes.container}> |
||||
{data && |
||||
processed.bonds.map((bond: ProcessedBond) => { |
||||
return ( |
||||
<> |
||||
<Box |
||||
display="flex" |
||||
flexDirection="row" |
||||
width="100%" |
||||
className={classes.root} |
||||
> |
||||
<Box p={1} className={classes.noPaddingLeft}> |
||||
<Decorator colour={selectDecorator(bond.bond_state)} /> |
||||
</Box> |
||||
<Box p={1} flexGrow={1} className={classes.noPaddingLeft}> |
||||
<BodyText text={bond.bond_name} /> |
||||
<BodyText text={`${bond.bond_speed}Mbps`} /> |
||||
</Box> |
||||
<Box display="flex" style={{ paddingTop: '.5em' }}> |
||||
{bond.hosts.map( |
||||
(host, index: number): JSX.Element => ( |
||||
<> |
||||
<Box |
||||
p={1} |
||||
key={host.host_name} |
||||
style={{ paddingTop: 0, paddingBottom: 0 }} |
||||
> |
||||
<Box> |
||||
<BodyText |
||||
text={host.host_name} |
||||
selected={false} |
||||
/> |
||||
<BodyText text={host.link.link_name} /> |
||||
</Box> |
||||
</Box> |
||||
{index !== bond.hosts.length - 1 && ( |
||||
<Divider |
||||
className={`${classes.divider} ${classes.verticalDivider}`} |
||||
orientation="vertical" |
||||
flexItem |
||||
/> |
||||
)} |
||||
</> |
||||
), |
||||
)} |
||||
</Box> |
||||
</Box> |
||||
<Divider className={classes.divider} /> |
||||
</> |
||||
); |
||||
})} |
||||
</Box> |
||||
) : ( |
||||
<Spinner /> |
||||
)} |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default Network; |
||||
@ -0,0 +1,3 @@ |
||||
import Network from './Network'; |
||||
|
||||
export default Network; |
||||
@ -0,0 +1,47 @@ |
||||
const processNetworkData = (data: AnvilNetwork): ProcessedNetwork => { |
||||
const processedBonds: string[] = []; |
||||
const displayBonds: ProcessedNetwork = { bonds: [] }; |
||||
|
||||
data?.hosts.forEach((host) => { |
||||
host.bonds.forEach((bond) => { |
||||
const index = processedBonds.findIndex( |
||||
(processed: string) => processed === bond.bond_name, |
||||
); |
||||
|
||||
if (index === -1) { |
||||
processedBonds.push(bond.bond_name); |
||||
displayBonds.bonds.push({ |
||||
bond_name: bond.bond_name, |
||||
bond_uuid: bond.bond_uuid, |
||||
bond_speed: 0, |
||||
bond_state: 'degraded', |
||||
hosts: [ |
||||
{ |
||||
host_name: host.host_name, |
||||
host_uuid: host.host_uuid, |
||||
link: bond.links[0].is_active ? bond.links[0] : bond.links[1], |
||||
}, |
||||
], |
||||
}); |
||||
} else { |
||||
displayBonds.bonds[index].hosts.push({ |
||||
host_name: host.host_name, |
||||
host_uuid: host.host_uuid, |
||||
link: bond.links[0].is_active ? bond.links[0] : bond.links[1], |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
/* eslint-disable no-param-reassign */ |
||||
displayBonds.bonds.forEach((bond) => { |
||||
const hostIndex = |
||||
bond.hosts[0].link.link_speed > bond.hosts[1].link.link_speed ? 1 : 0; |
||||
|
||||
bond.bond_speed = bond.hosts[hostIndex].link.link_speed; |
||||
bond.bond_state = bond.hosts[hostIndex].link.link_state; |
||||
}); |
||||
return displayBonds; |
||||
}; |
||||
|
||||
export default processNetworkData; |
||||
@ -0,0 +1,29 @@ |
||||
import { ReactNode } from 'react'; |
||||
import { Box } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
type Props = { |
||||
children: ReactNode; |
||||
}; |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
innerBody: { |
||||
borderWidth: '1px', |
||||
borderRadius: BORDER_RADIUS, |
||||
borderStyle: 'solid', |
||||
borderColor: DIVIDER, |
||||
marginTop: '1.4em', |
||||
marginBottom: '1.4em', |
||||
paddingBottom: '.7em', |
||||
position: 'relative', |
||||
}, |
||||
})); |
||||
|
||||
const InnerPanel = ({ children }: Props): JSX.Element => { |
||||
const classes = useStyles(); |
||||
|
||||
return <Box className={classes.innerBody}>{children}</Box>; |
||||
}; |
||||
|
||||
export default InnerPanel; |
||||
@ -0,0 +1,59 @@ |
||||
import { ReactNode } from 'react'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { |
||||
BORDER_RADIUS, |
||||
PANEL_BACKGROUND, |
||||
TEXT, |
||||
} from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
type Props = { |
||||
children: ReactNode; |
||||
}; |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
paper: { |
||||
padding: '2.1em', |
||||
backgroundColor: PANEL_BACKGROUND, |
||||
opacity: 0.8, |
||||
zIndex: 999, |
||||
}, |
||||
container: { |
||||
margin: '1em', |
||||
position: 'relative', |
||||
}, |
||||
square: { |
||||
content: '""', |
||||
position: 'absolute', |
||||
width: '2.1em', |
||||
height: '2.1em', |
||||
border: '1px', |
||||
borderColor: TEXT, |
||||
borderWidth: '1px', |
||||
borderRadius: BORDER_RADIUS, |
||||
borderStyle: 'solid', |
||||
padding: 0, |
||||
margin: 0, |
||||
}, |
||||
topSquare: { |
||||
top: '-.3em', |
||||
left: '-.3em', |
||||
}, |
||||
bottomSquare: { |
||||
bottom: '-.3em', |
||||
right: '-.3em', |
||||
}, |
||||
})); |
||||
|
||||
const Panel = ({ children }: Props): JSX.Element => { |
||||
const classes = useStyles(); |
||||
|
||||
return ( |
||||
<div className={classes.container}> |
||||
<div className={`${classes.square} ${classes.topSquare}`} /> |
||||
<div className={`${classes.square} ${classes.bottomSquare}`} /> |
||||
<div className={classes.paper}>{children}</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Panel; |
||||
@ -0,0 +1,40 @@ |
||||
import { ReactNode } from 'react'; |
||||
import { Box } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
type Props = { |
||||
children: ReactNode; |
||||
}; |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
innerHeader: { |
||||
position: 'relative', |
||||
padding: '0 .7em', |
||||
}, |
||||
header: { |
||||
top: '-.3em', |
||||
left: '-.3em', |
||||
padding: '1.4em 0', |
||||
position: 'absolute', |
||||
content: '""', |
||||
borderColor: DIVIDER, |
||||
borderWidth: '1px', |
||||
borderRadius: BORDER_RADIUS, |
||||
borderStyle: 'solid', |
||||
width: '100%', |
||||
}, |
||||
})); |
||||
|
||||
const PanelHeader = ({ children }: Props): JSX.Element => { |
||||
const classes = useStyles(); |
||||
|
||||
return ( |
||||
<Box className={classes.innerHeader} whiteSpace="pre-wrap"> |
||||
<div className={classes.header} /> |
||||
{children} |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default PanelHeader; |
||||
@ -0,0 +1,5 @@ |
||||
import PanelHeader from './PanelHeader'; |
||||
import InnerPanel from './InnerPanel'; |
||||
import Panel from './Panel'; |
||||
|
||||
export { Panel, PanelHeader, InnerPanel }; |
||||
@ -0,0 +1,152 @@ |
||||
import { useContext } from 'react'; |
||||
import { List, ListItem, Divider, Box } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { Panel } from './Panels'; |
||||
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
||||
import { HeaderText, BodyText } from './Text'; |
||||
import { HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME'; |
||||
import { AnvilContext } from './AnvilContext'; |
||||
import serverState from '../lib/consts/SERVERS'; |
||||
import Decorator, { Colours } from './Decorator'; |
||||
import Spinner from './Spinner'; |
||||
import hostsSanitizer from '../lib/sanitizers/hostsSanitizer'; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
root: { |
||||
width: '100%', |
||||
overflow: 'auto', |
||||
height: '78vh', |
||||
[theme.breakpoints.down('md')]: { |
||||
height: '100%', |
||||
}, |
||||
}, |
||||
divider: { |
||||
background: DIVIDER, |
||||
}, |
||||
verticalDivider: { |
||||
height: '75%', |
||||
paddingTop: '1em', |
||||
}, |
||||
button: { |
||||
'&:hover': { |
||||
backgroundColor: HOVER, |
||||
}, |
||||
paddingLeft: 0, |
||||
}, |
||||
headerPadding: { |
||||
paddingLeft: '.3em', |
||||
}, |
||||
hostsBox: { |
||||
padding: '1em', |
||||
paddingRight: 0, |
||||
}, |
||||
hostBox: { |
||||
paddingTop: 0, |
||||
}, |
||||
})); |
||||
|
||||
const selectDecorator = (state: string): Colours => { |
||||
switch (state) { |
||||
case 'running': |
||||
return 'ok'; |
||||
case 'shut off': |
||||
return 'off'; |
||||
case 'crashed': |
||||
return 'error'; |
||||
default: |
||||
return 'warning'; |
||||
} |
||||
}; |
||||
|
||||
const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
||||
const { uuid } = useContext(AnvilContext); |
||||
const classes = useStyles(); |
||||
|
||||
const { data, isLoading } = PeriodicFetch<AnvilServers>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, |
||||
); |
||||
|
||||
const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid); |
||||
|
||||
const filteredHosts = hostsSanitizer(anvil[anvilIndex]?.hosts); |
||||
|
||||
return ( |
||||
<Panel> |
||||
<div className={classes.headerPadding}> |
||||
<HeaderText text="Servers" /> |
||||
</div> |
||||
{!isLoading ? ( |
||||
<Box className={classes.root}> |
||||
<List component="nav"> |
||||
{data && |
||||
data.servers.map((server: AnvilServer) => { |
||||
return ( |
||||
<> |
||||
<ListItem |
||||
button |
||||
className={classes.button} |
||||
key={server.server_uuid} |
||||
> |
||||
<Box display="flex" flexDirection="row" width="100%"> |
||||
<Box p={1}> |
||||
<Decorator |
||||
colour={selectDecorator(server.server_state)} |
||||
/> |
||||
</Box> |
||||
<Box p={1} flexGrow={1}> |
||||
<BodyText text={server.server_name} /> |
||||
<BodyText |
||||
text={ |
||||
serverState.get(server.server_state) || |
||||
'Not Available' |
||||
} |
||||
/> |
||||
</Box> |
||||
<Box display="flex" className={classes.hostsBox}> |
||||
{server.server_state !== 'shut off' && |
||||
server.server_state !== 'crashed' && |
||||
filteredHosts.map( |
||||
( |
||||
host: AnvilStatusHost, |
||||
index: number, |
||||
): JSX.Element => ( |
||||
<> |
||||
<Box |
||||
p={1} |
||||
key={host.host_uuid} |
||||
className={classes.hostBox} |
||||
> |
||||
<BodyText |
||||
text={host.host_name} |
||||
selected={ |
||||
server.server_host_uuid === |
||||
host.host_uuid |
||||
} |
||||
/> |
||||
</Box> |
||||
{index !== filteredHosts.length - 1 && ( |
||||
<Divider |
||||
className={`${classes.divider} ${classes.verticalDivider}`} |
||||
orientation="vertical" |
||||
/> |
||||
)} |
||||
</> |
||||
), |
||||
)} |
||||
</Box> |
||||
</Box> |
||||
</ListItem> |
||||
<Divider className={classes.divider} /> |
||||
</> |
||||
); |
||||
})} |
||||
</List> |
||||
</Box> |
||||
) : ( |
||||
<Spinner /> |
||||
)} |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default Servers; |
||||
@ -0,0 +1,64 @@ |
||||
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 './SharedStorageHost'; |
||||
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 = (): JSX.Element => { |
||||
const classes = useStyles(); |
||||
const { uuid } = useContext(AnvilContext); |
||||
const { data, isLoading } = PeriodicFetch<AnvilSharedStorage>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`, |
||||
); |
||||
return ( |
||||
<Panel> |
||||
<HeaderText text="Shared Storage" /> |
||||
{!isLoading ? ( |
||||
<Box className={classes.root}> |
||||
{data?.storage_groups && |
||||
data.storage_groups.map( |
||||
(storageGroup: AnvilSharedStorageGroup): JSX.Element => ( |
||||
<InnerPanel key={storageGroup.storage_group_uuid}> |
||||
<PanelHeader> |
||||
<Box display="flex" width="100%" className={classes.header}> |
||||
<Box> |
||||
<BodyText text={storageGroup.storage_group_name} /> |
||||
</Box> |
||||
</Box> |
||||
</PanelHeader> |
||||
<SharedStorageHost |
||||
group={storageGroup} |
||||
key={storageGroup.storage_group_uuid} |
||||
/> |
||||
</InnerPanel> |
||||
), |
||||
)} |
||||
</Box> |
||||
) : ( |
||||
<Spinner /> |
||||
)} |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default SharedStorage; |
||||
@ -0,0 +1,74 @@ |
||||
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'; |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
fs: { |
||||
paddingLeft: '.7em', |
||||
paddingRight: '.7em', |
||||
paddingTop: '1.2em', |
||||
}, |
||||
bar: { |
||||
paddingLeft: '.7em', |
||||
paddingRight: '.7em', |
||||
}, |
||||
decoratorBox: { |
||||
paddingRight: '.3em', |
||||
}, |
||||
})); |
||||
|
||||
const SharedStorageHost = ({ |
||||
group, |
||||
}: { |
||||
group: AnvilSharedStorageGroup; |
||||
}): JSX.Element => { |
||||
const classes = useStyles(); |
||||
return ( |
||||
<> |
||||
<Box display="flex" width="100%" className={classes.fs}> |
||||
<Box flexGrow={1}> |
||||
<BodyText |
||||
text={`Used: ${prettyBytes.default( |
||||
group.storage_group_total - group.storage_group_free, |
||||
{ |
||||
binary: true, |
||||
}, |
||||
)}`}
|
||||
/> |
||||
</Box> |
||||
<Box> |
||||
<BodyText |
||||
text={`Free: ${prettyBytes.default(group.storage_group_free, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Box> |
||||
</Box> |
||||
<Box display="flex" width="100%" className={classes.bar}> |
||||
<Box flexGrow={1}> |
||||
<AllocationBar |
||||
allocated={ |
||||
((group.storage_group_total - group.storage_group_free) / |
||||
group.storage_group_total) * |
||||
100 |
||||
} |
||||
/> |
||||
</Box> |
||||
</Box> |
||||
<Box display="flex" justifyContent="center" width="100%"> |
||||
<BodyText |
||||
text={`Total Storage: ${prettyBytes.default( |
||||
group.storage_group_total, |
||||
{ |
||||
binary: true, |
||||
}, |
||||
)}`}
|
||||
/> |
||||
</Box> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default SharedStorageHost; |
||||
@ -0,0 +1,3 @@ |
||||
import SharedStorage from './SharedStorage'; |
||||
|
||||
export default SharedStorage; |
||||
@ -0,0 +1,29 @@ |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import CircularProgress from '@material-ui/core/CircularProgress'; |
||||
import { TEXT } from '../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
root: { |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
marginTop: '3em', |
||||
}, |
||||
spinner: { |
||||
color: TEXT, |
||||
variant: 'indeterminate', |
||||
size: '50em', |
||||
}, |
||||
})); |
||||
|
||||
const Spinner = (): JSX.Element => { |
||||
const classes = useStyles(); |
||||
|
||||
return ( |
||||
<div className={classes.root}> |
||||
<CircularProgress className={classes.spinner} /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Spinner; |
||||
@ -0,0 +1,50 @@ |
||||
import { Grid } from '@material-ui/core'; |
||||
import * as prettyBytes from 'pretty-bytes'; |
||||
import { Panel } from './Panels'; |
||||
import { AllocationBar } from './Bars'; |
||||
import { HeaderText, BodyText } from './Text'; |
||||
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
||||
|
||||
const Storage = ({ uuid }: { uuid: string }): JSX.Element => { |
||||
const { data, isLoading } = PeriodicFetch<AnvilMemory>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`, |
||||
); |
||||
|
||||
const memoryData = isLoading || !data ? { total: 0, free: 0 } : data; |
||||
|
||||
return ( |
||||
<Panel> |
||||
<Grid container alignItems="center" justify="space-around"> |
||||
<Grid item xs={12}> |
||||
<HeaderText text="Storage Resync" /> |
||||
</Grid> |
||||
<Grid item xs={5}> |
||||
<BodyText |
||||
text={`Allocated: ${prettyBytes.default( |
||||
memoryData.total - memoryData.free, |
||||
{ |
||||
binary: true, |
||||
}, |
||||
)}`}
|
||||
/> |
||||
</Grid> |
||||
<Grid item xs={4}> |
||||
<BodyText |
||||
text={`Free: ${prettyBytes.default(memoryData.free, { |
||||
binary: true, |
||||
})}`}
|
||||
/> |
||||
</Grid> |
||||
<Grid item xs={10}> |
||||
<AllocationBar |
||||
allocated={ |
||||
((memoryData.total - memoryData.free) / memoryData.total) * 100 |
||||
} |
||||
/> |
||||
</Grid> |
||||
</Grid> |
||||
</Panel> |
||||
); |
||||
}; |
||||
|
||||
export default Storage; |
||||
@ -0,0 +1,36 @@ |
||||
import { Typography } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
interface TextProps { |
||||
text: string; |
||||
selected?: boolean; |
||||
} |
||||
|
||||
const useStyles = makeStyles(() => ({ |
||||
selected: { |
||||
color: TEXT, |
||||
}, |
||||
unselected: { |
||||
color: UNSELECTED, |
||||
}, |
||||
})); |
||||
|
||||
const BodyText = ({ text, selected }: TextProps): JSX.Element => { |
||||
const classes = useStyles(); |
||||
|
||||
return ( |
||||
<Typography |
||||
variant="subtitle1" |
||||
className={selected ? classes.selected : classes.unselected} |
||||
> |
||||
{text} |
||||
</Typography> |
||||
); |
||||
}; |
||||
|
||||
BodyText.defaultProps = { |
||||
selected: true, |
||||
}; |
||||
|
||||
export default BodyText; |
||||
@ -0,0 +1,15 @@ |
||||
import { Typography } from '@material-ui/core'; |
||||
import { withStyles } from '@material-ui/core/styles'; |
||||
import { TEXT } from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const WhiteTypography = withStyles({ |
||||
root: { |
||||
color: TEXT, |
||||
}, |
||||
})(Typography); |
||||
|
||||
const HeaderText = ({ text }: { text: string }): JSX.Element => { |
||||
return <WhiteTypography variant="h4">{text}</WhiteTypography>; |
||||
}; |
||||
|
||||
export default HeaderText; |
||||
@ -0,0 +1,4 @@ |
||||
import HeaderText from './HeaderText'; |
||||
import BodyText from './BodyText'; |
||||
|
||||
export { HeaderText, BodyText }; |
||||
@ -0,0 +1,2 @@ |
||||
# Use this to set a different origin |
||||
NEXT_PUBLIC_API_URL= |
||||
@ -0,0 +1,7 @@ |
||||
const anvilState: ReadonlyMap<string, string> = new Map([ |
||||
['optimal', 'Optimal'], |
||||
['not_ready', 'Not Ready'], |
||||
['degraded', 'Degraded'], |
||||
]); |
||||
|
||||
export default anvilState; |
||||
@ -0,0 +1,7 @@ |
||||
import IS_DEV_ENV from './IS_DEV_ENV'; |
||||
|
||||
const API_BASE_URL = IS_DEV_ENV |
||||
? process.env.DEVELOPMENT_API_BASE_URL |
||||
: process.env.PRODUCTION_API_BASE_URL; |
||||
|
||||
export default API_BASE_URL; |
||||
@ -0,0 +1,16 @@ |
||||
// Colour Palette
|
||||
|
||||
export const RED = '#D02724'; |
||||
export const TEXT = '#F2F2F2'; |
||||
export const PANEL_BACKGROUND = '#343434'; |
||||
export const PANEL_BORDER = '#000000'; |
||||
export const PURPLE = '#7353BA'; |
||||
export const BLUE = '#4785FF'; |
||||
export const GREY = '#E5E5E5'; |
||||
export const HOVER = '#444'; |
||||
export const UNSELECTED = '#666'; |
||||
export const DIVIDER = '#888'; |
||||
export const SELECTED_ANVIL = '#00ff00'; |
||||
export const DISABLED = '#AAA'; |
||||
|
||||
export const BORDER_RADIUS = '3px'; |
||||
@ -0,0 +1,42 @@ |
||||
export const ICONS = [ |
||||
{ |
||||
text: 'Files', |
||||
image: '/pngs/files_on.png', |
||||
uri: '/striker?files=true', |
||||
}, |
||||
{ |
||||
text: 'Tasks', |
||||
image: '/pngs/tasks_no-jobs_icon.png', |
||||
uri: '/striker?jobs=true', |
||||
}, |
||||
{ |
||||
text: 'Configure', |
||||
image: '/pngs/configure_icon_on.png', |
||||
uri: '/striker?configure=true', |
||||
}, |
||||
{ |
||||
text: 'Striker', |
||||
image: '/pngs/striker_icon_on.png', |
||||
uri: '/striker?striker=true', |
||||
}, |
||||
{ |
||||
text: 'Anvil', |
||||
image: '/pngs/anvil_icon_on.png', |
||||
uri: '/striker?anvil=true', |
||||
}, |
||||
{ |
||||
text: 'Email', |
||||
image: '/pngs/email_on.png', |
||||
uri: '/striker?email=true', |
||||
}, |
||||
{ |
||||
text: 'Help', |
||||
image: '/pngs/help_icon_on.png', |
||||
uri: 'https://alteeve.com/w/Support', |
||||
}, |
||||
]; |
||||
|
||||
export const ICON_SIZE = { |
||||
width: '40em', |
||||
height: '40em', |
||||
}; |
||||
@ -0,0 +1,3 @@ |
||||
const IS_DEV_ENV: boolean = process.env.NODE_ENV !== 'production'; |
||||
|
||||
export default IS_DEV_ENV; |
||||
@ -0,0 +1,18 @@ |
||||
const NODE_STATUS_MESSAGE_MAP: ReadonlyMap<string, string> = new Map([ |
||||
['message_0222', 'The node is in an unknown state.'], |
||||
['message_0223', 'The node is a full cluster member.'], |
||||
[ |
||||
'message_0224', |
||||
'The node is coming online; the cluster resource manager is running (step 2/3).', |
||||
], |
||||
[ |
||||
'message_0225', |
||||
'The node is coming online; the node is a consensus cluster member (step 1/3).', |
||||
], |
||||
[ |
||||
'message_0226', |
||||
'The node has booted, but it is not (yet) joining the cluster.', |
||||
], |
||||
]); |
||||
|
||||
export default NODE_STATUS_MESSAGE_MAP; |
||||
@ -0,0 +1,12 @@ |
||||
const serverState: ReadonlyMap<string, string> = new Map([ |
||||
['running', 'Running'], |
||||
['idle', 'Idle'], |
||||
['paused', 'Paused'], |
||||
['in shutdown', 'Shutting Down'], |
||||
['shut off', 'Off'], |
||||
['crashed', 'Crashed'], |
||||
['pmsuspended', 'PM Suspended'], |
||||
['migrating', 'Migrating'], |
||||
]); |
||||
|
||||
export default serverState; |
||||
@ -0,0 +1,18 @@ |
||||
class ExtendedDate extends Date { |
||||
toLocaleISOString(): string { |
||||
const localeDateParts: string[] = this.toLocaleDateString('en-US', { |
||||
year: 'numeric', |
||||
month: '2-digit', |
||||
day: '2-digit', |
||||
}).split('/', 3); |
||||
const localDate = `${localeDateParts[2]}-${localeDateParts[0]}-${localeDateParts[1]}`; |
||||
const localeTime: string = this.toLocaleTimeString('en-US', { |
||||
hour12: false, |
||||
}); |
||||
const timezoneOffset: number = (this.getTimezoneOffset() / 60) * -1; |
||||
|
||||
return `${localDate}T${localeTime}${timezoneOffset}`; |
||||
} |
||||
} |
||||
|
||||
export default ExtendedDate; |
||||
@ -0,0 +1,5 @@ |
||||
const fetchJSON = <T>(...args: [RequestInfo, RequestInit?]): Promise<T> => { |
||||
return fetch(...args).then((response: Response) => response.json()); |
||||
}; |
||||
|
||||
export default fetchJSON; |
||||
@ -0,0 +1,18 @@ |
||||
import useSWR from 'swr'; |
||||
import fetcher from './fetchJSON'; |
||||
|
||||
const PeriodicFetch = <T>( |
||||
url: string, |
||||
refreshInterval = 5000, |
||||
): GetResponses => { |
||||
const { data, error } = useSWR<T>(url, fetcher, { |
||||
refreshInterval, |
||||
}); |
||||
return { |
||||
data, |
||||
isLoading: !error && !data, |
||||
isError: error, |
||||
}; |
||||
}; |
||||
|
||||
export default PeriodicFetch; |
||||
@ -0,0 +1,11 @@ |
||||
const putJSON = <T>(uri: string, data: T): void => { |
||||
fetch(`${process.env.NEXT_PUBLIC_API_URL}${uri}`, { |
||||
method: 'PUT', |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
}, |
||||
body: JSON.stringify(data), |
||||
}); |
||||
}; |
||||
|
||||
export default putJSON; |
||||
@ -0,0 +1,7 @@ |
||||
const hostsSanitizer = ( |
||||
data: Array<AnvilStatusHost>, |
||||
): Array<AnvilStatusHost> => { |
||||
return data?.filter((host) => host.host_uuid); |
||||
}; |
||||
|
||||
export default hostsSanitizer; |
||||
@ -0,0 +1,2 @@ |
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
pageExtensions: ['ts', 'tsx'], |
||||
poweredByHeader: false, |
||||
reactStrictMode: true, |
||||
}; |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,46 @@ |
||||
{ |
||||
"name": "striker-ui", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"build": "next build && next export", |
||||
"dev": "next dev", |
||||
"lint": "eslint --config .eslintrc.json --ext js,jsx,ts,tsx --max-warnings=0", |
||||
"lint:dryrun": "npm run lint -- .", |
||||
"lint:fix": "npm run lint -- --fix .", |
||||
"postinstall": "cd .. && husky install striker-ui/.husky", |
||||
"start": "next start" |
||||
}, |
||||
"dependencies": { |
||||
"@material-ui/core": "^4.11.3", |
||||
"@material-ui/styles": "^4.11.3", |
||||
"next": "10.0.6", |
||||
"pretty-bytes": "^5.6.0", |
||||
"react": "17.0.1", |
||||
"react-dom": "17.0.1", |
||||
"swr": "^0.4.2", |
||||
"typeface-roboto": "^1.1.13", |
||||
"typeface-roboto-condensed": "^1.1.13" |
||||
}, |
||||
"devDependencies": { |
||||
"@commitlint/cli": "^11.0.0", |
||||
"@commitlint/config-conventional": "^11.0.0", |
||||
"@types/node": "^14.14.26", |
||||
"@types/react": "^17.0.1", |
||||
"@types/styled-components": "^5.1.7", |
||||
"@typescript-eslint/eslint-plugin": "^4.15.0", |
||||
"@typescript-eslint/parser": "^4.15.0", |
||||
"eslint": "^7.19.0", |
||||
"eslint-config-airbnb": "^18.2.1", |
||||
"eslint-config-prettier": "^7.2.0", |
||||
"eslint-plugin-import": "^2.22.1", |
||||
"eslint-plugin-jsx-a11y": "^6.4.1", |
||||
"eslint-plugin-prettier": "^3.3.1", |
||||
"eslint-plugin-react": "^7.22.0", |
||||
"eslint-plugin-react-hooks": "^4.2.0", |
||||
"husky": "^5.0.9", |
||||
"lint-staged": "^10.5.4", |
||||
"prettier": "^2.2.1", |
||||
"typescript": "^4.1.5" |
||||
} |
||||
} |
||||
@ -0,0 +1,28 @@ |
||||
import { useEffect } from 'react'; |
||||
import { AppProps } from 'next/app'; |
||||
import { ThemeProvider } from '@material-ui/core/styles'; |
||||
import theme from '../theme'; |
||||
import '../styles/globals.css'; |
||||
|
||||
const App = ({ Component, pageProps }: AppProps): JSX.Element => { |
||||
// This hook is for ensuring the styling is in sync between client and server
|
||||
useEffect(() => { |
||||
// Remove the server-side injected CSS.
|
||||
const jssStyles = document.querySelector('#jss-server-side'); |
||||
if (jssStyles) { |
||||
jssStyles.parentElement?.removeChild(jssStyles); |
||||
} |
||||
}, []); |
||||
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
return ( |
||||
<ThemeProvider theme={theme}> |
||||
<Component |
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...pageProps} |
||||
/> |
||||
</ThemeProvider> |
||||
); |
||||
}; |
||||
|
||||
export default App; |
||||
@ -0,0 +1,37 @@ |
||||
import Document, { DocumentInitialProps, DocumentContext } from 'next/document'; |
||||
import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/styles'; |
||||
// import { ServerStyleSheet as StyledComponentSheets } from 'styled-components';
|
||||
|
||||
class MyDocument extends Document { |
||||
static async getInitialProps( |
||||
ctx: DocumentContext, |
||||
): Promise<DocumentInitialProps> { |
||||
const materialUiSheets = new MaterialUiServerStyleSheets(); |
||||
const originalRenderPage = ctx.renderPage; |
||||
|
||||
ctx.renderPage = () => |
||||
originalRenderPage({ |
||||
enhanceApp: (App) => (props) => |
||||
materialUiSheets.collect( |
||||
<App |
||||
/* eslint-disable react/jsx-props-no-spreading */ |
||||
{...props} |
||||
/>, |
||||
), |
||||
}); |
||||
|
||||
const initialProps = await Document.getInitialProps(ctx); |
||||
|
||||
return { |
||||
...initialProps, |
||||
styles: ( |
||||
<> |
||||
{initialProps.styles} |
||||
{materialUiSheets.getStyleElement()} |
||||
</> |
||||
), |
||||
}; |
||||
} |
||||
} |
||||
|
||||
export default MyDocument; |
||||
@ -0,0 +1,82 @@ |
||||
import { Box } from '@material-ui/core'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
|
||||
import Anvils from '../components/Anvils'; |
||||
import Hosts from '../components/Hosts'; |
||||
import CPU from '../components/CPU'; |
||||
import SharedStorage from '../components/SharedStorage'; |
||||
import Memory from '../components/Memory'; |
||||
import Network from '../components/Network'; |
||||
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
||||
import Servers from '../components/Servers'; |
||||
import Header from '../components/Header'; |
||||
import AnvilProvider from '../components/AnvilContext'; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
child: { |
||||
width: '22%', |
||||
height: '100%', |
||||
[theme.breakpoints.down('lg')]: { |
||||
width: '25%', |
||||
}, |
||||
[theme.breakpoints.down('md')]: { |
||||
width: '100%', |
||||
}, |
||||
}, |
||||
server: { |
||||
width: '35%', |
||||
height: '100%', |
||||
[theme.breakpoints.down('lg')]: { |
||||
width: '25%', |
||||
}, |
||||
[theme.breakpoints.down('md')]: { |
||||
width: '100%', |
||||
}, |
||||
}, |
||||
container: { |
||||
display: 'flex', |
||||
flexDirection: 'row', |
||||
width: '100%', |
||||
justifyContent: 'space-between', |
||||
[theme.breakpoints.down('md')]: { |
||||
display: 'block', |
||||
}, |
||||
}, |
||||
})); |
||||
|
||||
const Home = (): JSX.Element => { |
||||
const classes = useStyles(); |
||||
|
||||
const { data } = PeriodicFetch<AnvilList>( |
||||
`${process.env.NEXT_PUBLIC_API_URL}/get_anvils`, |
||||
); |
||||
|
||||
return ( |
||||
<> |
||||
<AnvilProvider> |
||||
<Header /> |
||||
{data?.anvils && ( |
||||
<Box className={classes.container}> |
||||
<Box className={classes.child}> |
||||
<Anvils list={data} /> |
||||
<Hosts anvil={data.anvils} /> |
||||
</Box> |
||||
<Box className={classes.server}> |
||||
<Servers anvil={data.anvils} /> |
||||
</Box> |
||||
<Box className={classes.child}> |
||||
<SharedStorage /> |
||||
</Box> |
||||
<Box className={classes.child}> |
||||
<Network /> |
||||
<CPU /> |
||||
<Memory /> |
||||
</Box> |
||||
</Box> |
||||
)} |
||||
</AnvilProvider> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Home; |
||||
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1 @@ |
||||
../../html/skins/alteeve/images/ |
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,12 @@ |
||||
html, |
||||
body { |
||||
background-image: url('/pngs/Texture.jpg'); |
||||
padding: 0; |
||||
margin: 0; |
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, |
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; |
||||
} |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
@ -0,0 +1,59 @@ |
||||
import createMuiTheme, { Theme } from '@material-ui/core/styles/createMuiTheme'; |
||||
import { |
||||
PANEL_BACKGROUND, |
||||
TEXT, |
||||
PURPLE, |
||||
BLUE, |
||||
DISABLED, |
||||
BORDER_RADIUS, |
||||
} from '../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const theme: Theme = createMuiTheme({ |
||||
palette: { |
||||
primary: { |
||||
main: PANEL_BACKGROUND, |
||||
}, |
||||
secondary: { |
||||
main: TEXT, |
||||
}, |
||||
background: { |
||||
paper: PANEL_BACKGROUND, |
||||
}, |
||||
}, |
||||
typography: { |
||||
fontFamily: 'Roboto Condensed', |
||||
fontWeightRegular: 200, |
||||
fontSize: 14, |
||||
}, |
||||
overrides: { |
||||
MuiSwitch: { |
||||
switchBase: { |
||||
// Controls default (unchecked) color for the thumb
|
||||
color: TEXT, |
||||
}, |
||||
root: { |
||||
padding: 8, |
||||
}, |
||||
track: { |
||||
borderRadius: BORDER_RADIUS, |
||||
border: 3, |
||||
backgroundColor: PURPLE, |
||||
opacity: 1, |
||||
'$checked$checked + &': { |
||||
// Controls checked color for the track
|
||||
backgroundColor: BLUE, |
||||
opacity: 1, |
||||
}, |
||||
'$disabled$disabled + &': { |
||||
backgroundColor: DISABLED, |
||||
}, |
||||
}, |
||||
thumb: { |
||||
color: TEXT, |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
export default theme; |
||||
@ -0,0 +1,21 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"target": "es5", |
||||
"lib": ["dom", "dom.iterable", "esnext"], |
||||
"allowJs": true, |
||||
"skipLibCheck": true, |
||||
"strict": true, |
||||
"forceConsistentCasingInFileNames": true, |
||||
"noEmit": true, |
||||
"esModuleInterop": true, |
||||
"module": "esnext", |
||||
"moduleResolution": "node", |
||||
"resolveJsonModule": true, |
||||
"isolatedModules": true, |
||||
"jsx": "preserve", |
||||
"noImplicitAny": true, |
||||
"typeRoots": ["types"] |
||||
}, |
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], |
||||
"exclude": ["node_modules"] |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
declare type AnvilCPU = { |
||||
cores: number; |
||||
threads: number; |
||||
allocated: number; |
||||
}; |
||||
@ -0,0 +1,16 @@ |
||||
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>; |
||||
}; |
||||
@ -0,0 +1,8 @@ |
||||
declare type AnvilListItem = { |
||||
anvil_name: string; |
||||
anvil_uuid: string; |
||||
} & AnvilStatus; |
||||
|
||||
declare type AnvilList = { |
||||
anvils: Array<AnvilListItem>; |
||||
}; |
||||
@ -0,0 +1,5 @@ |
||||
declare type AnvilMemory = { |
||||
total: number; |
||||
allocated: number; |
||||
reserved: number; |
||||
}; |
||||
@ -0,0 +1,45 @@ |
||||
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>; |
||||
}; |
||||
@ -0,0 +1,3 @@ |
||||
declare type AnvilNodeStatus = { |
||||
on: 0 | 1; |
||||
}; |
||||
@ -0,0 +1,34 @@ |
||||
declare type AnvilConnection = { |
||||
protocol: 'async_a' | 'sync_c'; |
||||
targets: Array<{ |
||||
target_name: string; |
||||
states: { |
||||
connection: string; |
||||
disk: string; |
||||
}; |
||||
role: string; |
||||
logical_volume_path: string; |
||||
}>; |
||||
resync?: { |
||||
rate: number; |
||||
percent_complete: number; |
||||
time_remain: number; |
||||
}; |
||||
}; |
||||
|
||||
declare type AnvilVolume = { |
||||
index: number; |
||||
drbd_device_path: string; |
||||
drbd_device_minor: number; |
||||
size: number; |
||||
connections: Array<AnvilConnection>; |
||||
}; |
||||
|
||||
declare type AnvilResource = { |
||||
resource_name: string; |
||||
volumes: Array<AnvilVolume>; |
||||
}; |
||||
|
||||
declare type AnvilReplicatedStorage = { |
||||
resources: Array<AnvilResource>; |
||||
}; |
||||
@ -0,0 +1,18 @@ |
||||
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>; |
||||
}; |
||||
@ -0,0 +1,4 @@ |
||||
declare type AnvilSet = { |
||||
anvil_uuid: string; |
||||
is_on: boolean; |
||||
}; |
||||
@ -0,0 +1,10 @@ |
||||
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>; |
||||
}; |
||||
@ -0,0 +1,13 @@ |
||||
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 @@ |
||||
declare type AnvilTypes = AnvilList | AnvilCPU | AnvilMemory | AnvilStatus; |
||||
@ -0,0 +1,4 @@ |
||||
declare type FetchResponse = { |
||||
error: Error | null; |
||||
isLoading?: boolean; |
||||
}; |
||||
@ -0,0 +1,3 @@ |
||||
declare type GetAllAnvilResponse = FetchResponse & { |
||||
anvilList: AnvilList; |
||||
}; |
||||
@ -0,0 +1,3 @@ |
||||
declare type GetOneAnvilResponse = FetchResponse & { |
||||
anvilStatus: AnvilStatus; |
||||
}; |
||||
@ -0,0 +1,5 @@ |
||||
declare type GetResponses = { |
||||
data: T; |
||||
isLoading: boolean; |
||||
isError: Error; |
||||
}; |
||||
@ -0,0 +1,11 @@ |
||||
declare type HostSet = { |
||||
host_uuid: string; |
||||
}; |
||||
|
||||
declare type HostSetPower = HostSet & { |
||||
is_on: boolean; |
||||
}; |
||||
|
||||
declare type HostSetMembership = HostSet & { |
||||
is_membership: boolean; |
||||
}; |
||||
Loading…
Reference in new issue