mirror of
https://github.com/ChenQihan666/Lolia-Nodes-Status-Pages.git
synced 2026-08-14 07:52:34 +08:00
Initial commit
This commit is contained in:
GitHub
@@ -0,0 +1,160 @@
|
||||
import { MonitorState, MonitorTarget } from '@/types/config'
|
||||
import { getColor } from '@/util/color'
|
||||
import { Box, Tooltip, Modal } from '@mantine/core'
|
||||
import { useResizeObserver } from '@mantine/hooks'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
const moment = require('moment')
|
||||
require('moment-precise-range-plugin')
|
||||
|
||||
export default function DetailBar({
|
||||
monitor,
|
||||
state,
|
||||
}: {
|
||||
monitor: MonitorTarget
|
||||
state: MonitorState
|
||||
}) {
|
||||
const { t } = useTranslation('common')
|
||||
const [barRef, barRect] = useResizeObserver()
|
||||
const [modalOpened, setModalOpened] = useState(false)
|
||||
const [modalTitle, setModalTitle] = useState('')
|
||||
const [modelContent, setModelContent] = useState(<div />)
|
||||
|
||||
const overlapLen = (x1: number, x2: number, y1: number, y2: number) => {
|
||||
return Math.max(0, Math.min(x2, y2) - Math.max(x1, y1))
|
||||
}
|
||||
|
||||
const uptimePercentBars = []
|
||||
|
||||
const currentTime = Math.round(Date.now() / 1000)
|
||||
const montiorStartTime = state.incident[monitor.id][0].start[0]
|
||||
|
||||
const todayStart = new Date()
|
||||
todayStart.setHours(0, 0, 0, 0)
|
||||
|
||||
for (let i = 89; i >= 0; i--) {
|
||||
const dayStart = Math.round(todayStart.getTime() / 1000) - i * 86400
|
||||
const dayEnd = dayStart + 86400
|
||||
|
||||
const dayMonitorTime = overlapLen(dayStart, dayEnd, montiorStartTime, currentTime)
|
||||
let dayDownTime = 0
|
||||
|
||||
let incidentReasons: string[] = []
|
||||
|
||||
for (let incident of state.incident[monitor.id]) {
|
||||
const incidentStart = incident.start[0]
|
||||
const incidentEnd = incident.end ?? currentTime
|
||||
|
||||
const overlap = overlapLen(dayStart, dayEnd, incidentStart, incidentEnd)
|
||||
dayDownTime += overlap
|
||||
|
||||
// Incident history for the day
|
||||
if (overlap > 0) {
|
||||
for (let i = 0; i < incident.error.length; i++) {
|
||||
let partStart = incident.start[i]
|
||||
let partEnd =
|
||||
i === incident.error.length - 1 ? incident.end ?? currentTime : incident.start[i + 1]
|
||||
partStart = Math.max(partStart, dayStart)
|
||||
partEnd = Math.min(partEnd, dayEnd)
|
||||
|
||||
if (overlapLen(dayStart, dayEnd, partStart, partEnd) > 0) {
|
||||
const startStr = new Date(partStart * 1000).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
const endStr = new Date(partEnd * 1000).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
incidentReasons.push(`[${startStr}-${endStr}] ${incident.error[i]}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const dayPercent = (((dayMonitorTime - dayDownTime) / dayMonitorTime) * 100).toPrecision(4)
|
||||
|
||||
uptimePercentBars.push(
|
||||
<Tooltip
|
||||
multiline
|
||||
key={i}
|
||||
events={{ hover: true, focus: false, touch: true }}
|
||||
label={
|
||||
Number.isNaN(Number(dayPercent)) ? (
|
||||
t('No Data')
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
{t('percent at date', {
|
||||
percent: dayPercent,
|
||||
date: new Date(dayStart * 1000).toLocaleDateString(),
|
||||
})}
|
||||
</div>
|
||||
{dayDownTime > 0 && (
|
||||
<div>
|
||||
{t('Down for', {
|
||||
duration: moment.preciseDiff(moment(0), moment(dayDownTime * 1000)),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '20px',
|
||||
width: '7px',
|
||||
background: getColor(dayPercent, false),
|
||||
borderRadius: '2px',
|
||||
marginLeft: '1px',
|
||||
marginRight: '1px',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (dayDownTime > 0) {
|
||||
setModalTitle(
|
||||
t('incidents at', {
|
||||
name: monitor.name,
|
||||
date: new Date(dayStart * 1000).toLocaleDateString(),
|
||||
})
|
||||
)
|
||||
setModelContent(
|
||||
<>
|
||||
{incidentReasons.map((reason, index) => (
|
||||
<div key={index}>{reason}</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
setModalOpened(true)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={modalOpened}
|
||||
onClose={() => setModalOpened(false)}
|
||||
title={modalTitle}
|
||||
size={'40em'}
|
||||
>
|
||||
{modelContent}
|
||||
</Modal>
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
marginTop: '10px',
|
||||
marginBottom: '5px',
|
||||
}}
|
||||
visibleFrom="540"
|
||||
ref={barRef}
|
||||
>
|
||||
{uptimePercentBars.slice(Math.floor(Math.max(9 * 90 - barRect.width, 0) / 9), 90)}
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Line } from 'react-chartjs-2'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip as ChartTooltip,
|
||||
Legend,
|
||||
TimeScale,
|
||||
} from 'chart.js'
|
||||
import 'chartjs-adapter-moment'
|
||||
import { MonitorState, MonitorTarget } from '@/types/config'
|
||||
import { codeToCountry } from '@/util/iata'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
ChartTooltip,
|
||||
Legend,
|
||||
TimeScale
|
||||
)
|
||||
|
||||
export default function DetailChart({
|
||||
monitor,
|
||||
state,
|
||||
}: {
|
||||
monitor: MonitorTarget
|
||||
state: MonitorState
|
||||
}) {
|
||||
const { t } = useTranslation('common')
|
||||
const latencyData = state.latency[monitor.id].map((point) => ({
|
||||
x: point.time * 1000,
|
||||
y: point.ping,
|
||||
loc: point.loc,
|
||||
}))
|
||||
|
||||
let data = {
|
||||
datasets: [
|
||||
{
|
||||
data: latencyData,
|
||||
borderColor: 'rgb(112, 119, 140)',
|
||||
borderWidth: 2,
|
||||
radius: 0,
|
||||
cubicInterpolationMode: 'monotone' as const,
|
||||
tension: 0.4,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
let options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index' as const,
|
||||
intersect: false,
|
||||
},
|
||||
animation: {
|
||||
duration: 0,
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (item: any) => {
|
||||
if (item.parsed.y) {
|
||||
return `${item.parsed.y}ms (${codeToCountry(item.raw.loc)})`
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: t('Response times'),
|
||||
align: 'start' as const,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time' as const,
|
||||
ticks: {
|
||||
source: 'auto' as const,
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ height: '150px' }}>
|
||||
<Line options={options} data={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Divider } from '@mantine/core'
|
||||
import { pageConfig } from '@/uptime.config'
|
||||
|
||||
export default function Footer() {
|
||||
const defaultFooter =
|
||||
'<p style="text-align: center; font-size: 12px; margin-top: 10px;"> Open-source monitoring and status page powered by <a href="https://github.com/lyc8503/UptimeFlare" target="_blank">Uptimeflare</a>, made with ❤ by <a href="https://github.com/lyc8503" target="_blank">lyc8503</a>. </p>'
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider mt="lg" />
|
||||
<div dangerouslySetInnerHTML={{ __html: pageConfig.customFooter ?? defaultFooter }} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Container, Group, Image } from '@mantine/core'
|
||||
import classes from '@/styles/Header.module.css'
|
||||
import { pageConfig } from '@/uptime.config'
|
||||
import { PageConfigLink } from '@/types/config'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function Header({ style }: { style?: React.CSSProperties }) {
|
||||
const { t } = useTranslation('common')
|
||||
const linkToElement = (link: PageConfigLink, i: number) => {
|
||||
return (
|
||||
<a
|
||||
key={i}
|
||||
href={link.link}
|
||||
target={link.link.startsWith('/') ? undefined : '_blank'}
|
||||
className={classes.link}
|
||||
data-active={link.highlight}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
const links = [{ label: t('Incidents'), link: '/incidents' }, ...(pageConfig.links || [])]
|
||||
|
||||
return (
|
||||
<header className={classes.header} style={style}>
|
||||
<Container size="md" className={classes.inner}>
|
||||
<div>
|
||||
<a
|
||||
href={location.pathname == '/' ? 'https://github.com/lyc8503/UptimeFlare' : '/'}
|
||||
target={location.pathname == '/' ? '_blank' : undefined}
|
||||
>
|
||||
<Image
|
||||
src={pageConfig.logo ?? '/logo.svg'}
|
||||
h={56}
|
||||
w={{ base: 140, sm: 190 }}
|
||||
fit="contain"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<Group gap={5} visibleFrom="sm">
|
||||
{links?.map(linkToElement)}
|
||||
</Group>
|
||||
|
||||
<Group gap={5} hiddenFrom="sm">
|
||||
{links?.filter((link) => link.highlight || link.link.startsWith('/')).map(linkToElement)}
|
||||
</Group>
|
||||
</Container>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import { Alert, List, Text, useMantineTheme } from '@mantine/core'
|
||||
import { useMediaQuery } from '@mantine/hooks'
|
||||
import { IconAlertTriangle } from '@tabler/icons-react'
|
||||
import { MaintenanceConfig, MonitorTarget } from '@/types/config'
|
||||
import { pageConfig } from '@/uptime.config'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function MaintenanceAlert({
|
||||
maintenance,
|
||||
style,
|
||||
upcoming = false,
|
||||
}: {
|
||||
maintenance: Omit<MaintenanceConfig, 'monitors'> & { monitors?: (MonitorTarget | undefined)[] }
|
||||
style?: React.CSSProperties
|
||||
upcoming?: boolean
|
||||
}) {
|
||||
const { t } = useTranslation('common')
|
||||
const theme = useMantineTheme()
|
||||
const isDesktop = useMediaQuery(`(min-width: ${theme.breakpoints.sm})`)
|
||||
|
||||
return (
|
||||
<Alert
|
||||
icon={<IconAlertTriangle />}
|
||||
title={
|
||||
<span
|
||||
style={{
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{(upcoming ? t('Upcoming') : '') + (maintenance.title || t('Scheduled Maintenance'))}
|
||||
</span>
|
||||
}
|
||||
color={
|
||||
upcoming ? pageConfig.maintenances?.upcomingColor ?? 'gray' : maintenance.color || 'yellow'
|
||||
}
|
||||
withCloseButton={false}
|
||||
style={{ margin: '16px auto 0 auto', ...style }}
|
||||
>
|
||||
{/* Date range in top right (desktop) or inline (mobile) */}
|
||||
<div
|
||||
style={{
|
||||
...{
|
||||
top: 10,
|
||||
fontSize: '0.85rem',
|
||||
borderRadius: 6,
|
||||
},
|
||||
...(isDesktop
|
||||
? {
|
||||
position: 'absolute',
|
||||
right: 10,
|
||||
padding: '2px 8px',
|
||||
textAlign: 'right',
|
||||
}
|
||||
: { marginBottom: 4 }),
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto 1fr',
|
||||
gridColumnGap: '3px',
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'right', fontWeight: 'bold' }}>
|
||||
{upcoming ? t('Scheduled for') : t('From')}
|
||||
</div>
|
||||
<div>{new Date(maintenance.start).toLocaleString()}</div>
|
||||
<div style={{ textAlign: 'right', fontWeight: 'bold' }}>
|
||||
{upcoming ? t('Expected end') : t('To')}
|
||||
</div>
|
||||
<div>
|
||||
{maintenance.end
|
||||
? new Date(maintenance.end).toLocaleString()
|
||||
: t('Until further notice')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Text style={{ paddingTop: '3px', whiteSpace: 'pre-line' }}>{maintenance.body}</Text>
|
||||
{maintenance.monitors && maintenance.monitors.length > 0 && (
|
||||
<>
|
||||
<Text mt="xs">
|
||||
<b>{t('Affected components')}</b>
|
||||
</Text>
|
||||
<List size="sm" withPadding>
|
||||
{maintenance.monitors.map((comp, compIdx) => (
|
||||
<List.Item key={compIdx}>{comp?.name ?? t('MONITOR ID NOT FOUND')}</List.Item>
|
||||
))}
|
||||
</List>
|
||||
</>
|
||||
)}
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Text, Tooltip } from '@mantine/core'
|
||||
import { MonitorState, MonitorTarget } from '@/types/config'
|
||||
import { IconAlertCircle, IconAlertTriangle, IconCircleCheck } from '@tabler/icons-react'
|
||||
import DetailChart from './DetailChart'
|
||||
import DetailBar from './DetailBar'
|
||||
import { getColor } from '@/util/color'
|
||||
import { maintenances } from '@/uptime.config'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function MonitorDetail({
|
||||
monitor,
|
||||
state,
|
||||
}: {
|
||||
monitor: MonitorTarget
|
||||
state: MonitorState
|
||||
}) {
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
if (!state.latency[monitor.id])
|
||||
return (
|
||||
<>
|
||||
<Text mt="sm" fw={700}>
|
||||
{monitor.name}
|
||||
</Text>
|
||||
<Text mt="sm" fw={700}>
|
||||
{t('No data available')}
|
||||
</Text>
|
||||
</>
|
||||
)
|
||||
|
||||
let statusIcon =
|
||||
state.incident[monitor.id].slice(-1)[0].end === null ? (
|
||||
<IconAlertCircle
|
||||
style={{ width: '1.25em', height: '1.25em', color: '#b91c1c', marginRight: '3px' }}
|
||||
/>
|
||||
) : (
|
||||
<IconCircleCheck
|
||||
style={{ width: '1.25em', height: '1.25em', color: '#059669', marginRight: '3px' }}
|
||||
/>
|
||||
)
|
||||
|
||||
// Hide real status icon if monitor is in maintenance
|
||||
const now = new Date()
|
||||
const hasMaintenance = maintenances
|
||||
.filter((m) => now >= new Date(m.start) && (!m.end || now <= new Date(m.end)))
|
||||
.find((maintenance) => maintenance.monitors?.includes(monitor.id))
|
||||
if (hasMaintenance)
|
||||
statusIcon = (
|
||||
<IconAlertTriangle
|
||||
style={{
|
||||
width: '1.25em',
|
||||
height: '1.25em',
|
||||
color: '#fab005',
|
||||
marginRight: '3px',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
let totalTime = Date.now() / 1000 - state.incident[monitor.id][0].start[0]
|
||||
let downTime = 0
|
||||
for (let incident of state.incident[monitor.id]) {
|
||||
downTime += (incident.end ?? Date.now() / 1000) - incident.start[0]
|
||||
}
|
||||
|
||||
const uptimePercent = (((totalTime - downTime) / totalTime) * 100).toPrecision(4)
|
||||
|
||||
// Conditionally render monitor name with or without hyperlink based on monitor.url presence
|
||||
const monitorNameElement = (
|
||||
<Text mt="sm" fw={700} style={{ display: 'inline-flex', alignItems: 'center' }}>
|
||||
{monitor.statusPageLink ? (
|
||||
<a
|
||||
href={monitor.statusPageLink}
|
||||
target="_blank"
|
||||
style={{ display: 'inline-flex', alignItems: 'center', color: 'inherit' }}
|
||||
>
|
||||
{statusIcon} {monitor.name}
|
||||
</a>
|
||||
) : (
|
||||
<>
|
||||
{statusIcon} {monitor.name}
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
{monitor.tooltip ? (
|
||||
<Tooltip label={monitor.tooltip}>{monitorNameElement}</Tooltip>
|
||||
) : (
|
||||
monitorNameElement
|
||||
)}
|
||||
|
||||
<Text mt="sm" fw={700} style={{ display: 'inline', color: getColor(uptimePercent, true) }}>
|
||||
{t('Overall', { percent: uptimePercent })}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<DetailBar monitor={monitor} state={state} />
|
||||
{!monitor.hideLatencyChart && <DetailChart monitor={monitor} state={state} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { MonitorState, MonitorTarget } from '@/types/config'
|
||||
import { Accordion, Card, Center, Text } from '@mantine/core'
|
||||
import MonitorDetail from './MonitorDetail'
|
||||
import { pageConfig } from '@/uptime.config'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
function countDownCount(state: MonitorState, ids: string[]) {
|
||||
let downCount = 0
|
||||
for (let id of ids) {
|
||||
if (state.incident[id] === undefined || state.incident[id].length === 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (state.incident[id].slice(-1)[0].end === null) {
|
||||
downCount++
|
||||
}
|
||||
}
|
||||
return downCount
|
||||
}
|
||||
|
||||
function getStatusTextColor(state: MonitorState, ids: string[]) {
|
||||
let downCount = countDownCount(state, ids)
|
||||
if (downCount === 0) {
|
||||
return '#059669'
|
||||
} else if (downCount === ids.length) {
|
||||
return '#df484a'
|
||||
} else {
|
||||
return '#f29030'
|
||||
}
|
||||
}
|
||||
|
||||
export default function MonitorList({
|
||||
monitors,
|
||||
state,
|
||||
}: {
|
||||
monitors: MonitorTarget[]
|
||||
state: MonitorState
|
||||
}) {
|
||||
const { t } = useTranslation('common')
|
||||
const group = pageConfig.group
|
||||
const groupedMonitor = group && Object.keys(group).length > 0
|
||||
let content
|
||||
|
||||
// Load expanded groups from localStorage
|
||||
const savedExpandedGroups = localStorage.getItem('expandedGroups')
|
||||
const expandedInitial = savedExpandedGroups
|
||||
? JSON.parse(savedExpandedGroups)
|
||||
: Object.keys(group || {})
|
||||
const [expandedGroups, setExpandedGroups] = useState<string[]>(expandedInitial)
|
||||
useEffect(() => {
|
||||
localStorage.setItem('expandedGroups', JSON.stringify(expandedGroups))
|
||||
}, [expandedGroups])
|
||||
|
||||
if (groupedMonitor) {
|
||||
// Grouped monitors
|
||||
content = (
|
||||
<Accordion
|
||||
multiple
|
||||
defaultValue={Object.keys(group)}
|
||||
variant="contained"
|
||||
value={expandedGroups}
|
||||
onChange={(values) => setExpandedGroups(values)}
|
||||
>
|
||||
{Object.keys(group).map((groupName) => (
|
||||
<Accordion.Item key={groupName} value={groupName}>
|
||||
<Accordion.Control>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div>{groupName}</div>
|
||||
<Text
|
||||
fw={500}
|
||||
style={{
|
||||
display: 'inline',
|
||||
paddingRight: '5px',
|
||||
color: getStatusTextColor(state, group[groupName]),
|
||||
}}
|
||||
>
|
||||
{group[groupName].length - countDownCount(state, group[groupName])}/
|
||||
{group[groupName].length} {t('Operational')}
|
||||
</Text>
|
||||
</div>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{monitors
|
||||
.filter((monitor) => group[groupName].includes(monitor.id))
|
||||
.sort((a, b) => group[groupName].indexOf(a.id) - group[groupName].indexOf(b.id))
|
||||
.map((monitor) => (
|
||||
<div key={monitor.id}>
|
||||
<Card.Section ml="xs" mr="xs">
|
||||
<MonitorDetail monitor={monitor} state={state} />
|
||||
</Card.Section>
|
||||
</div>
|
||||
))}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
))}
|
||||
</Accordion>
|
||||
)
|
||||
} else {
|
||||
// Ungrouped monitors
|
||||
content = monitors.map((monitor) => (
|
||||
<div key={monitor.id}>
|
||||
<Card.Section ml="xs" mr="xs">
|
||||
<MonitorDetail monitor={monitor} state={state} />
|
||||
</Card.Section>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
return (
|
||||
<Center>
|
||||
<Card
|
||||
shadow="sm"
|
||||
padding="lg"
|
||||
radius="md"
|
||||
ml="md"
|
||||
mr="md"
|
||||
mt="xl"
|
||||
withBorder={!groupedMonitor}
|
||||
style={{ width: groupedMonitor ? '897px' : '865px' }}
|
||||
>
|
||||
{content}
|
||||
</Card>
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Alert, Text } from '@mantine/core'
|
||||
import { IconInfoCircle } from '@tabler/icons-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function NoIncidentsAlert({ style }: { style?: React.CSSProperties }) {
|
||||
const { t } = useTranslation('common')
|
||||
return (
|
||||
<Alert
|
||||
icon={<IconInfoCircle />}
|
||||
title={
|
||||
<span
|
||||
style={{
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{t('No incidents in this month')}
|
||||
</span>
|
||||
}
|
||||
color="gray"
|
||||
withCloseButton={false}
|
||||
style={{
|
||||
position: 'relative',
|
||||
margin: '16px auto 0 auto',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<Text>{t('There are no incidents for this month')}</Text>
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import dynamic from 'next/dynamic'
|
||||
import React from 'react'
|
||||
|
||||
const NoSsr = (props: {
|
||||
children:
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| React.ReactElement<any, string | React.JSXElementConstructor<any>>
|
||||
| Iterable<React.ReactNode>
|
||||
| React.ReactPortal
|
||||
| React.PromiseLikeOfReactNode
|
||||
| null
|
||||
| undefined
|
||||
}) => <React.Fragment>{props.children}</React.Fragment>
|
||||
|
||||
export default dynamic(() => Promise.resolve(NoSsr), {
|
||||
ssr: false,
|
||||
})
|
||||
@@ -0,0 +1,137 @@
|
||||
import { MaintenanceConfig, MonitorTarget } from '@/types/config'
|
||||
import { Center, Container, Title, Collapse, Button, Box } from '@mantine/core'
|
||||
import { IconCircleCheck, IconAlertCircle, IconPlus, IconMinus } from '@tabler/icons-react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import MaintenanceAlert from './MaintenanceAlert'
|
||||
import { pageConfig } from '@/uptime.config'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
function useWindowVisibility() {
|
||||
const [isVisible, setIsVisible] = useState(true)
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => setIsVisible(document.visibilityState === 'visible')
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange)
|
||||
return () => document.removeEventListener('visibilitychange', handleVisibilityChange)
|
||||
}, [])
|
||||
return isVisible
|
||||
}
|
||||
|
||||
export default function OverallStatus({
|
||||
state,
|
||||
maintenances,
|
||||
monitors,
|
||||
}: {
|
||||
state: { overallUp: number; overallDown: number; lastUpdate: number }
|
||||
maintenances: MaintenanceConfig[]
|
||||
monitors: MonitorTarget[]
|
||||
}) {
|
||||
const { t } = useTranslation('common')
|
||||
let group = pageConfig.group
|
||||
let groupedMonitor = (group && Object.keys(group).length > 0) || false
|
||||
|
||||
let statusString = ''
|
||||
let icon = <IconAlertCircle style={{ width: 64, height: 64, color: '#b91c1c' }} />
|
||||
if (state.overallUp === 0 && state.overallDown === 0) {
|
||||
statusString = t('No data yet')
|
||||
} else if (state.overallUp === 0) {
|
||||
statusString = t('All systems not operational')
|
||||
} else if (state.overallDown === 0) {
|
||||
statusString = t('All systems operational')
|
||||
icon = <IconCircleCheck style={{ width: 64, height: 64, color: '#059669' }} />
|
||||
} else {
|
||||
statusString = t('Some systems not operational', {
|
||||
down: state.overallDown,
|
||||
total: state.overallUp + state.overallDown,
|
||||
})
|
||||
}
|
||||
|
||||
const [openTime] = useState(Math.round(Date.now() / 1000))
|
||||
const [currentTime, setCurrentTime] = useState(Math.round(Date.now() / 1000))
|
||||
const isWindowVisible = useWindowVisibility()
|
||||
const [expandUpcoming, setExpandUpcoming] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (!isWindowVisible) return
|
||||
if (currentTime - state.lastUpdate > 300 && currentTime - openTime > 30) {
|
||||
window.location.reload()
|
||||
}
|
||||
setCurrentTime(Math.round(Date.now() / 1000))
|
||||
}, 1000)
|
||||
return () => clearInterval(interval)
|
||||
})
|
||||
|
||||
const now = new Date()
|
||||
|
||||
const activeMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
|
||||
monitors?: MonitorTarget[]
|
||||
})[] = maintenances
|
||||
.filter((m) => now >= new Date(m.start) && (!m.end || now <= new Date(m.end)))
|
||||
.map((maintenance) => ({
|
||||
...maintenance,
|
||||
monitors: maintenance.monitors?.map(
|
||||
(monitorId) => monitors.find((mon) => monitorId === mon.id)!
|
||||
),
|
||||
}))
|
||||
|
||||
const upcomingMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
|
||||
monitors?: (MonitorTarget | undefined)[]
|
||||
})[] = maintenances
|
||||
.filter((m) => now < new Date(m.start))
|
||||
.map((maintenance) => ({
|
||||
...maintenance,
|
||||
monitors: maintenance.monitors?.map(
|
||||
(monitorId) => monitors.find((mon) => monitorId === mon.id)!
|
||||
),
|
||||
}))
|
||||
|
||||
return (
|
||||
<Container size="md" mt="xl">
|
||||
<Center>{icon}</Center>
|
||||
<Title mt="sm" style={{ textAlign: 'center' }} order={1}>
|
||||
{statusString}
|
||||
</Title>
|
||||
<Title mt="sm" style={{ textAlign: 'center', color: '#70778c' }} order={5}>
|
||||
{t('Last updated on', {
|
||||
date: new Date(state.lastUpdate * 1000).toLocaleString(),
|
||||
seconds: currentTime - state.lastUpdate,
|
||||
})}
|
||||
</Title>
|
||||
|
||||
{/* Upcoming Maintenance */}
|
||||
{upcomingMaintenances.length > 0 && (
|
||||
<>
|
||||
<Title mt="4px" style={{ textAlign: 'center', color: '#70778c' }} order={5}>
|
||||
{t('upcoming maintenance', { count: upcomingMaintenances.length })}{' '}
|
||||
<span
|
||||
style={{ textDecoration: 'underline', cursor: 'pointer' }}
|
||||
onClick={() => setExpandUpcoming(!expandUpcoming)}
|
||||
>
|
||||
{expandUpcoming ? t('Hide') : t('Show')}
|
||||
</span>
|
||||
</Title>
|
||||
|
||||
<Collapse in={expandUpcoming}>
|
||||
{upcomingMaintenances.map((maintenance, idx) => (
|
||||
<MaintenanceAlert
|
||||
key={`upcoming-${idx}`}
|
||||
maintenance={maintenance}
|
||||
style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
|
||||
upcoming
|
||||
/>
|
||||
))}
|
||||
</Collapse>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Active Maintenance */}
|
||||
{activeMaintenances.map((maintenance, idx) => (
|
||||
<MaintenanceAlert
|
||||
key={`active-${idx}`}
|
||||
maintenance={maintenance}
|
||||
style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user