Skip to content

Commit 047881f

Browse files
evan-grayevan-gray
committed
dashboard: unify monitor section styling
1 parent cc3e153 commit 047881f

File tree

1 file changed

+114
-97
lines changed

1 file changed

+114
-97
lines changed

‎dashboard/src/components/Monitor.tsx

+114-97
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { ChainId, coalesceChainName } from '@certusone/wormhole-sdk/lib/esm/utils/consts';
2-
import { ArrowDownward, ArrowUpward, Code, Launch } from '@mui/icons-material';
2+
import { ArrowDownward, ArrowUpward, Code, ExpandMore, Launch } from '@mui/icons-material';
33
import {
4+
Accordion,
5+
AccordionDetails,
6+
AccordionSummary,
47
Box,
58
Button,
69
Card,
@@ -252,10 +255,12 @@ function ReobserveCodeContent({ misses }: { misses: MissesByChain }) {
252255

253256
function ReobserveCode({ misses }: { misses: MissesByChain | null }) {
254257
const [isOpen, setIsOpen] = useState<boolean>(false);
255-
const handleOpenClick = useCallback(() => {
258+
const handleOpenClick = useCallback((event: any) => {
259+
event.stopPropagation();
256260
setIsOpen(true);
257261
}, []);
258-
const handleCloseClick = useCallback(() => {
262+
const handleCloseClick = useCallback((event: any) => {
263+
event.stopPropagation();
259264
setIsOpen(false);
260265
}, []);
261266
return misses ? (
@@ -329,13 +334,15 @@ function Misses({
329334
.filter((el) => !!el)
330335
: [];
331336
return (
332-
<>
333-
<Box display="flex" alignItems="center">
334-
<Typography variant="h4">Misses</Typography>
335-
<Box flexGrow="1" />
336-
<ReobserveCode misses={misses} />
337-
</Box>
338-
<Box pl={0.5}>
337+
<Accordion defaultExpanded TransitionProps={{ mountOnEnter: true, unmountOnExit: true }}>
338+
<AccordionSummary expandIcon={<ExpandMore />}>
339+
<Box display="flex" alignItems="center" flexGrow="1">
340+
<Typography>Misses</Typography>
341+
<Box flexGrow="1" />
342+
<ReobserveCode misses={misses} />
343+
</Box>
344+
</AccordionSummary>
345+
<AccordionDetails>
339346
{missesWrapper.receivedAt ? (
340347
<Typography variant="body2">
341348
Last retrieved misses at{' '}
@@ -351,17 +358,17 @@ function Misses({
351358
) : (
352359
<Typography variant="body2">Loading message counts by chain...</Typography>
353360
)}
354-
</Box>
355-
{missesWrapper.isFetching ? (
356-
<CircularProgress />
357-
) : missesElements.length ? (
358-
missesElements
359-
) : (
360-
<Typography pl={0.5}>
361-
No misses{showAllMisses ? '' : ` > ${MISS_THRESHOLD_LABEL}`}!
362-
</Typography>
363-
)}
364-
</>
361+
{missesWrapper.isFetching ? (
362+
<CircularProgress />
363+
) : missesElements.length ? (
364+
missesElements
365+
) : (
366+
<Typography pl={0.5}>
367+
No misses{showAllMisses ? '' : ` > ${MISS_THRESHOLD_LABEL}`}!
368+
</Typography>
369+
)}
370+
</AccordionDetails>
371+
</Accordion>
365372
);
366373
}
367374

@@ -371,86 +378,96 @@ function Monitor({ governorInfo }: { governorInfo?: CloudGovernorInfo | null })
371378
const messageCounts = messageCountsWrapper.data;
372379
return (
373380
<CollapsibleSection header="Monitor">
374-
<Card sx={{ p: 2 }}>
375-
<Box mb={2}>
381+
<Box mt={2}>
382+
<Card>
376383
<Misses governorInfo={governorInfo} missesWrapper={missesWrapper} />
377-
</Box>
378-
<Typography variant="h4">Chains</Typography>
379-
<Box pl={0.5}>
380-
{lastBlockByChainWrapper.receivedAt ? (
381-
<Typography variant="body2">
382-
Last retrieved latest blocks at{' '}
383-
<Box component="span" sx={{ display: 'inline-block' }}>
384-
{new Date(lastBlockByChainWrapper.receivedAt).toLocaleString()}
385-
</Box>{' '}
386-
{lastBlockByChainWrapper.error ? (
387-
<Typography component="span" color="error" variant="body2">
388-
{lastBlockByChainWrapper.error}
389-
</Typography>
390-
) : null}
391-
</Typography>
392-
) : (
393-
<Typography variant="body2">Loading last block by chain...</Typography>
394-
)}
395-
{messageCountsWrapper.receivedAt ? (
396-
<Typography variant="body2">
397-
Last retrieved message counts at{' '}
398-
<Box component="span" sx={{ display: 'inline-block' }}>
399-
{new Date(messageCountsWrapper.receivedAt).toLocaleString()}
400-
</Box>{' '}
401-
{messageCountsWrapper.error ? (
402-
<Typography component="span" color="error" variant="body2">
403-
{messageCountsWrapper.error}
384+
</Card>
385+
</Box>
386+
<Box mt={2}>
387+
<Card>
388+
<Accordion TransitionProps={{ mountOnEnter: true, unmountOnExit: true }}>
389+
<AccordionSummary expandIcon={<ExpandMore />}>
390+
<Typography>Chains</Typography>
391+
</AccordionSummary>
392+
<AccordionDetails>
393+
{lastBlockByChainWrapper.receivedAt ? (
394+
<Typography variant="body2">
395+
Last retrieved latest blocks at{' '}
396+
<Box component="span" sx={{ display: 'inline-block' }}>
397+
{new Date(lastBlockByChainWrapper.receivedAt).toLocaleString()}
398+
</Box>{' '}
399+
{lastBlockByChainWrapper.error ? (
400+
<Typography component="span" color="error" variant="body2">
401+
{lastBlockByChainWrapper.error}
402+
</Typography>
403+
) : null}
404404
</Typography>
405-
) : null}
406-
</Typography>
407-
) : (
408-
<Typography variant="body2">Loading message counts by chain...</Typography>
409-
)}
410-
</Box>
411-
{lastBlockByChainWrapper.isFetching ? (
412-
<CircularProgress />
413-
) : (
414-
lastBlockByChain &&
415-
Object.entries(lastBlockByChain).map(([chain, lastBlock]) => (
416-
<CollapsibleSection
417-
key={chain}
418-
defaultExpanded={false}
419-
header={
420-
<div>
421-
<Typography variant="h5" sx={{ mb: 0.5 }}>
422-
{coalesceChainName(Number(chain) as ChainId)} ({chain})
423-
</Typography>
424-
<Typography variant="body2" sx={{ mb: 0.5 }}>
425-
Last Indexed Block - {lastBlock.split('/')[0]}
426-
{' - '}
427-
{new Date(lastBlock.split('/')[1]).toLocaleString()}
428-
</Typography>
429-
{messageCounts?.[Number(chain) as ChainId] ? (
430-
<Typography
431-
component="div"
432-
sx={{
433-
display: 'flex',
434-
alignItems: 'center',
435-
}}
436-
>
437-
<Box sx={missingBlockSx} />
438-
&nbsp;= {messageCounts?.[Number(chain) as ChainId]?.numMessagesWithoutVaas}
439-
&nbsp;&nbsp;
440-
<Box sx={doneBlockSx} />
441-
&nbsp;={' '}
442-
{(messageCounts?.[Number(chain) as ChainId]?.numTotalMessages || 0) -
443-
(messageCounts?.[Number(chain) as ChainId]?.numMessagesWithoutVaas || 0)}
405+
) : (
406+
<Typography variant="body2">Loading last block by chain...</Typography>
407+
)}
408+
{messageCountsWrapper.receivedAt ? (
409+
<Typography variant="body2">
410+
Last retrieved message counts at{' '}
411+
<Box component="span" sx={{ display: 'inline-block' }}>
412+
{new Date(messageCountsWrapper.receivedAt).toLocaleString()}
413+
</Box>{' '}
414+
{messageCountsWrapper.error ? (
415+
<Typography component="span" color="error" variant="body2">
416+
{messageCountsWrapper.error}
444417
</Typography>
445418
) : null}
446-
</div>
447-
}
448-
>
449-
<DetailBlocks chain={chain} />
450-
</CollapsibleSection>
451-
))
452-
)}
453-
</Card>
419+
</Typography>
420+
) : (
421+
<Typography variant="body2">Loading message counts by chain...</Typography>
422+
)}
423+
{lastBlockByChainWrapper.isFetching ? (
424+
<CircularProgress />
425+
) : (
426+
lastBlockByChain &&
427+
Object.entries(lastBlockByChain).map(([chain, lastBlock]) => (
428+
<CollapsibleSection
429+
key={chain}
430+
defaultExpanded={false}
431+
header={
432+
<div>
433+
<Typography variant="h5" sx={{ mb: 0.5 }}>
434+
{coalesceChainName(Number(chain) as ChainId)} ({chain})
435+
</Typography>
436+
<Typography variant="body2" sx={{ mb: 0.5 }}>
437+
Last Indexed Block - {lastBlock.split('/')[0]}
438+
{' - '}
439+
{new Date(lastBlock.split('/')[1]).toLocaleString()}
440+
</Typography>
441+
{messageCounts?.[Number(chain) as ChainId] ? (
442+
<Typography
443+
component="div"
444+
sx={{
445+
display: 'flex',
446+
alignItems: 'center',
447+
}}
448+
>
449+
<Box sx={missingBlockSx} />
450+
&nbsp;={' '}
451+
{messageCounts?.[Number(chain) as ChainId]?.numMessagesWithoutVaas}
452+
&nbsp;&nbsp;
453+
<Box sx={doneBlockSx} />
454+
&nbsp;={' '}
455+
{(messageCounts?.[Number(chain) as ChainId]?.numTotalMessages || 0) -
456+
(messageCounts?.[Number(chain) as ChainId]?.numMessagesWithoutVaas ||
457+
0)}
458+
</Typography>
459+
) : null}
460+
</div>
461+
}
462+
>
463+
<DetailBlocks chain={chain} />
464+
</CollapsibleSection>
465+
))
466+
)}
467+
</AccordionDetails>
468+
</Accordion>
469+
</Card>
470+
</Box>
454471
</CollapsibleSection>
455472
);
456473
}

0 commit comments

Comments
 (0)