39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Center, Title } from '@mantine/core'
|
|
import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react'
|
|
|
|
export default function OverallStatus({
|
|
state,
|
|
}: {
|
|
state: { overallUp: number; overallDown: number; lastUpdate: number }
|
|
}) {
|
|
let statusString = ''
|
|
let icon = <IconAlertCircle style={{ width: 64, height: 64, color: '#b91c1c' }} />
|
|
if (state.overallUp === 0 && state.overallDown === 0) {
|
|
statusString = 'No data yet'
|
|
} else if (state.overallUp === 0) {
|
|
statusString = 'All systems not operational'
|
|
} else if (state.overallDown === 0) {
|
|
statusString = 'All systems operational'
|
|
icon = <IconCircleCheck style={{ width: 64, height: 64, color: '#059669' }} />
|
|
} else {
|
|
statusString = `Some systems not operational (${state.overallDown} out of ${
|
|
state.overallUp + state.overallDown
|
|
})`
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Center>{icon}</Center>
|
|
<Title mt="sm" style={{ textAlign: 'center' }} order={1}>
|
|
{statusString}
|
|
</Title>
|
|
<Title mt="sm" style={{ textAlign: 'center', color: '#70778c' }} order={5}>
|
|
Last updated on:{' '}
|
|
{`${new Date(state.lastUpdate * 1000).toLocaleString()} (${
|
|
Math.round(Date.now() / 1000) - state.lastUpdate
|
|
} sec ago)`}
|
|
</Title>
|
|
</>
|
|
)
|
|
}
|