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

fix(striker-ui): add loading indicator to anvil Dashboard

Browse Source
main
Tsu-ba-me 2 years ago
parent 87fd3bdc6b
commit 6970b4f882
1 changed files with 74 additions and 44 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. 80
      striker-ui/pages/anvil/index.tsx

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

@ -1,20 +1,22 @@
import { Box, styled } from '@mui/material';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useContext, useEffect } from 'react'; import { useContext, useEffect, useMemo } from 'react';
import { Box } from '@mui/material';
import { styled } from '@mui/material/styles';
import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
import AnvilProvider, { AnvilContext } from '../../components/AnvilContext';
import Anvils from '../../components/Anvils'; import Anvils from '../../components/Anvils';
import Hosts from '../../components/Hosts';
import CPU from '../../components/CPU'; import CPU from '../../components/CPU';
import SharedStorage from '../../components/SharedStorage'; import Header from '../../components/Header';
import Hosts from '../../components/Hosts';
import Memory from '../../components/Memory'; import Memory from '../../components/Memory';
import Network from '../../components/Network'; import Network from '../../components/Network';
import { Panel } from '../../components/Panels';
import periodicFetch from '../../lib/fetchers/periodicFetch'; import periodicFetch from '../../lib/fetchers/periodicFetch';
import Servers from '../../components/Servers'; import Servers from '../../components/Servers';
import Header from '../../components/Header'; import SharedStorage from '../../components/SharedStorage';
import AnvilProvider, { AnvilContext } from '../../components/AnvilContext'; import Spinner from '../../components/Spinner';
import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
import useWindowDimensions from '../../hooks/useWindowDimenions'; import useWindowDimensions from '../../hooks/useWindowDimenions';
const PREFIX = 'Anvil'; const PREFIX = 'Anvil';
@ -62,26 +64,16 @@ const Anvil = (): JSX.Element => {
const { anvil_uuid: queryAnvilUUID } = router.query; const { anvil_uuid: queryAnvilUUID } = router.query;
const { uuid: contextAnvilUUID, setAnvilUuid } = useContext(AnvilContext); const { uuid: contextAnvilUUID, setAnvilUuid } = useContext(AnvilContext);
const { data } = periodicFetch<AnvilList>( const { data, isLoading } = periodicFetch<AnvilList>(
`${process.env.NEXT_PUBLIC_API_URL}/get_anvils`, `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
); );
useEffect(() => { const contentLayoutElement = useMemo(() => {
if (contextAnvilUUID === '') { let result;
setAnvilUuid(queryAnvilUUID?.toString() || '');
}
}, [contextAnvilUUID, queryAnvilUUID, setAnvilUuid]);
return ( if (data && width) {
<StyledDiv> result =
<Head> width > LARGE_MOBILE_BREAKPOINT ? (
<title>Anvil</title>
</Head>
<AnvilProvider>
<Header />
{data?.anvils &&
width &&
(width > LARGE_MOBILE_BREAKPOINT ? (
<Box className={classes.container}> <Box className={classes.container}>
<Box className={classes.child}> <Box className={classes.child}>
<Anvils list={data} /> <Anvils list={data} />
@ -113,7 +105,45 @@ const Anvil = (): JSX.Element => {
<Memory /> <Memory />
</Box> </Box>
</Box> </Box>
))} );
}
return result;
}, [data, width]);
const contentAreaElement = useMemo(
() =>
isLoading ? (
<Panel
sx={{
marginLeft: { xs: '1em', sm: 'auto' },
marginRight: { xs: '1em', sm: 'auto' },
marginTop: 'calc(50vh - 10em)',
maxWidth: { xs: undefined, sm: '60%', md: '50%', lg: '40%' },
minWidth: 'fit-content',
}}
>
<Spinner sx={{ margin: '2em 2.4em' }} />
</Panel>
) : (
contentLayoutElement
),
[contentLayoutElement, isLoading],
);
useEffect(() => {
if (contextAnvilUUID === '') {
setAnvilUuid(queryAnvilUUID?.toString() || '');
}
}, [contextAnvilUUID, queryAnvilUUID, setAnvilUuid]);
return (
<StyledDiv>
<Head>
<title>Anvil</title>
</Head>
<AnvilProvider>
<Header />
{contentAreaElement}
</AnvilProvider> </AnvilProvider>
</StyledDiv> </StyledDiv>
); );

Write Preview
Loading…
Cancel
Save