seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): move old dashboard to /anvil and add server list as dashboard

Browse Source
main
Tsu-ba-me 3 years ago
parent b2e4747058
commit e5b3243f04
3 changed files with 231 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 111
      striker-ui/pages/anvil/index.tsx
  2. 207
      striker-ui/pages/index.tsx
  3. 6
      striker-ui/types/APIServer.d.ts

111
striker-ui/pages/anvil/index.tsx
Unescape View File

@ -0,0 +1,111 @@
import Head from 'next/head';
import { Box } from '@mui/material';
import { styled } from '@mui/material/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';
import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
import useWindowDimensions from '../../hooks/useWindowDimenions';
const PREFIX = 'Anvil';
const classes = {
child: `${PREFIX}-child`,
server: `${PREFIX}-server`,
container: `${PREFIX}-container`,
};
const StyledDiv = styled('div')(({ theme }) => ({
[`& .${classes.child}`]: {
width: '22%',
height: '100%',
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
width: '50%',
},
[theme.breakpoints.down('md')]: {
width: '100%',
},
},
[`& .${classes.server}`]: {
width: '35%',
height: '100%',
[theme.breakpoints.down('md')]: {
width: '100%',
},
},
[`& .${classes.container}`]: {
display: 'flex',
flexDirection: 'row',
width: '100%',
justifyContent: 'space-between',
[theme.breakpoints.down('md')]: {
display: 'block',
},
},
}));
const Anvil = (): JSX.Element => {
const width = useWindowDimensions();
const { data } = periodicFetch<AnvilList>(
`${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
);
return (
<StyledDiv>
<Head>
<title>Anvil</title>
</Head>
<AnvilProvider>
<Header />
{data?.anvils &&
width &&
(width > LARGE_MOBILE_BREAKPOINT ? (
<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>
) : (
<Box className={classes.container}>
<Box className={classes.child}>
<Servers anvil={data.anvils} />
<Anvils list={data} />
<Hosts anvil={data.anvils} />
</Box>
<Box className={classes.child}>
<Network />
<SharedStorage />
<CPU />
<Memory />
</Box>
</Box>
))}
</AnvilProvider>
</StyledDiv>
);
};
export default Anvil;

207
striker-ui/pages/index.tsx
Unescape View File

@ -1,110 +1,131 @@
import Head from 'next/head'; import Head from 'next/head';
import { Box } from '@mui/material'; import { FC, useState } from 'react';
import { styled } from '@mui/material/styles'; import { Box, Divider } from '@mui/material';
import Anvils from '../components/Anvils'; import API_BASE_URL from '../lib/consts/API_BASE_URL';
import Hosts from '../components/Hosts'; import { DIVIDER } from '../lib/consts/DEFAULT_THEME';
import CPU from '../components/CPU';
import SharedStorage from '../components/SharedStorage'; import { Preview } from '../components/Display';
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 Header from '../components/Header';
import AnvilProvider from '../components/AnvilContext'; import OutlinedInput from '../components/OutlinedInput';
import { LARGE_MOBILE_BREAKPOINT } from '../lib/consts/DEFAULT_THEME'; import { Panel, PanelHeader } from '../components/Panels';
import useWindowDimensions from '../hooks/useWindowDimenions'; import periodicFetch from '../lib/fetchers/periodicFetch';
import Spinner from '../components/Spinner';
const PREFIX = 'Dashboard'; const createServerPreviewContainer = (servers: ServerOverviewMetadata[]) => (
<Box
sx={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
const classes = { '& > *': {
child: `${PREFIX}-child`, width: { xs: '20em', md: '30em' },
server: `${PREFIX}-server`, },
container: `${PREFIX}-container`, }}
}; >
{servers.map(({ serverName, serverUUID }) => (
<Preview
key={`server-preview-${serverUUID}`}
isShowControls={false}
isUseInnerPanel
serverName={serverName}
uuid={serverUUID}
/>
))}
</Box>
);
const StyledDiv = styled('div')(({ theme }) => ({ const filterServers = (
[`& .${classes.child}`]: { allServers: ServerOverviewMetadata[],
width: '22%', searchTerm: string,
height: '100%', ) =>
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: { searchTerm === ''
width: '50%', ? {
}, exclude: allServers,
[theme.breakpoints.down('md')]: { include: [],
width: '100%', }
}, : allServers.reduce<{
}, exclude: ServerOverviewMetadata[];
include: ServerOverviewMetadata[];
}>(
(reduceContainer, server) => {
const { serverName } = server;
[`& .${classes.server}`]: { if (serverName.includes(searchTerm)) {
width: '35%', reduceContainer.include.push(server);
height: '100%', } else {
[theme.breakpoints.down('md')]: { reduceContainer.exclude.push(server);
width: '100%', }
},
}, return reduceContainer;
},
[`& .${classes.container}`]: { { exclude: [], include: [] },
display: 'flex', );
flexDirection: 'row',
width: '100%', const Dashboard: FC = () => {
justifyContent: 'space-between', const [allServers, setAllServers] = useState<ServerOverviewMetadata[]>([]);
[theme.breakpoints.down('md')]: { const [excludeServers, setExcludeServers] = useState<
display: 'block', ServerOverviewMetadata[]
}, >([]);
}, const [includeServers, setIncludeServers] = useState<
})); ServerOverviewMetadata[]
>([]);
const [inputSearchTerm, setInputSearchTerm] = useState<string>('');
const Dashboard = (): JSX.Element => { const updateServerList = (
const width = useWindowDimensions(); ...filterArgs: Parameters<typeof filterServers>
) => {
const { exclude, include } = filterServers(...filterArgs);
const { data } = periodicFetch<AnvilList>( setExcludeServers(exclude);
`${process.env.NEXT_PUBLIC_API_URL}/get_anvils`, setIncludeServers(include);
};
const { isLoading } = periodicFetch<ServerOverviewMetadata[]>(
`${API_BASE_URL}/server`,
{
onSuccess: (data = []) => {
setAllServers(data);
updateServerList(data, inputSearchTerm);
},
refreshInterval: 60000,
},
); );
return ( return (
<StyledDiv> <Box>
<Head> <Head>
<title>Dashboard</title> <title>Dashboard</title>
</Head> </Head>
<AnvilProvider> <Header />
<Header /> <Panel>
{data?.anvils && {isLoading ? (
width && <Spinner />
(width > LARGE_MOBILE_BREAKPOINT ? ( ) : (
<Box className={classes.container}> <>
<Box className={classes.child}> <PanelHeader>
<Anvils list={data} /> <OutlinedInput
<Hosts anvil={data.anvils} /> placeholder="Search by server name"
</Box> onChange={({ target: { value } }) => {
<Box className={classes.server}> setInputSearchTerm(value);
<Servers anvil={data.anvils} />
</Box> updateServerList(allServers, value);
<Box className={classes.child}> }}
<SharedStorage /> value={inputSearchTerm}
</Box> />
<Box className={classes.child}> </PanelHeader>
<Network /> {createServerPreviewContainer(includeServers)}
<CPU /> {includeServers.length > 0 && (
<Memory /> <Divider sx={{ backgroundColor: DIVIDER }} />
</Box> )}
</Box> {createServerPreviewContainer(excludeServers)}
) : ( </>
<Box className={classes.container}> )}
<Box className={classes.child}> </Panel>
<Servers anvil={data.anvils} /> </Box>
<Anvils list={data} />
<Hosts anvil={data.anvils} />
</Box>
<Box className={classes.child}>
<Network />
<SharedStorage />
<CPU />
<Memory />
</Box>
</Box>
))}
</AnvilProvider>
</StyledDiv>
); );
}; };

6
striker-ui/types/APIServer.d.ts vendored
Unescape View File

@ -0,0 +1,6 @@
type ServerOverviewMetadata = {
serverHostUUID: string;
serverName: string;
serverState: string;
serverUUID: string;
};
Write Preview
Loading…
Cancel
Save