diff --git a/striker-ui/components/Anvils/AnvilSummary.tsx b/striker-ui/components/Anvils/AnvilSummary.tsx index 053ab415..39d641ee 100644 --- a/striker-ui/components/Anvils/AnvilSummary.tsx +++ b/striker-ui/components/Anvils/AnvilSummary.tsx @@ -1,10 +1,11 @@ -import { Grid, gridClasses } from '@mui/material'; +import { Grid, gridClasses, typographyClasses } from '@mui/material'; import { dSizeStr } from 'format-data-size'; -import { FC, useMemo } from 'react'; +import { FC, ReactNode, useMemo } from 'react'; -import { BLUE, PURPLE, RED } from '../../lib/consts/DEFAULT_THEME'; +import { BLUE, GREY, PURPLE, RED } from '../../lib/consts/DEFAULT_THEME'; import { + toAnvilDetail, toAnvilMemoryCalcable, toAnvilSharedStorageOverview, } from '../../lib/api_converters'; @@ -14,11 +15,31 @@ import StackBar from '../Bars/StackBar'; import { BodyText, InlineMonoText, MonoText } from '../Text'; import useFetch from '../../hooks/useFetch'; -const n100 = BigInt(100); +const N_100 = BigInt(100); + +const MAP_TO_ANVIL_STATE_COLOUR = { + degraded: RED, + not_ready: PURPLE, + optimal: BLUE, +}; + +const MAP_TO_HOST_STATE_COLOUR: Record = { + offline: PURPLE, + online: BLUE, +}; const AnvilSummary: FC = (props) => { const { anvilUuid } = props; + const { data: rAnvil, loading: loadingAnvil } = useFetch( + `/anvil/${anvilUuid}`, + ); + + const anvil = useMemo( + () => rAnvil && toAnvilDetail(rAnvil), + [rAnvil], + ); + const { data: cpu, loading: loadingCpu } = useFetch( `/anvil/${anvilUuid}/cpu`, ); @@ -46,8 +67,57 @@ const AnvilSummary: FC = (props) => { ); const loading = useMemo( - () => loadingCpu || loadingMemory || loadingStorages, - [loadingCpu, loadingMemory, loadingStorages], + () => + [loadingAnvil, loadingCpu, loadingMemory, loadingStorages].some( + (cond) => cond, + ), + [loadingAnvil, loadingCpu, loadingMemory, loadingStorages], + ); + + const anvilSummary = useMemo( + () => + anvil && ( + + {anvil.state} + + ), + [anvil], + ); + + const hostsSummary = useMemo( + () => + anvil && ( + .${typographyClasses.root}:first-child`]: { + marginBottom: '-.6em', + }, + }} + > + {Object.values(anvil.hosts).map((host) => { + const { name, state, stateProgress, uuid } = host; + + const stateColour: string = MAP_TO_HOST_STATE_COLOUR[state] ?? GREY; + + let stateValue: string = state; + + if (!['offline', 'online'].includes(state)) { + stateValue = `${stateProgress}%`; + } + + return ( + + {name}{' '} + + {stateValue} + + + ); + })} + + ), + [anvil], ); const cpuSummary = useMemo( @@ -114,11 +184,11 @@ const AnvilSummary: FC = (props) => { thin value={{ reserved: { - value: Number((memory.reserved * n100) / memory.total), + value: Number((memory.reserved * N_100) / memory.total), }, allocated: { value: Number( - ((memory.reserved + memory.allocated) * n100) / memory.total, + ((memory.reserved + memory.allocated) * N_100) / memory.total, ), colour: { 0: BLUE, 70: PURPLE, 90: RED }, }, @@ -150,7 +220,7 @@ const AnvilSummary: FC = (props) => { value={{ allocated: { value: Number( - ((storages.totalSize - storages.totalFree) * n100) / + ((storages.totalSize - storages.totalFree) * N_100) / storages.totalSize, ), colour: { 0: BLUE, 70: PURPLE, 90: RED }, @@ -177,6 +247,18 @@ const AnvilSummary: FC = (props) => { }, }} > + + Node + + + {anvilSummary} + + + Subnodes + + + {hostsSummary} + CPU