Michal
/
UptimeFlare
mirror of https://github.com/lyc8503/UptimeFlare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: title width & warning icon

pull/101/head
lyc8503 2025-04-21 17:07:02 +08:00
parent 5966c6dcbb
commit 90672ac88d
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/MonitorDetail.tsx
View File

@ -1,6 +1,6 @@
import { Text, Tooltip } from '@mantine/core' import { Text, Tooltip } from '@mantine/core'
import { MonitorState, MonitorTarget } from '@/types/uptime.types' import { MonitorState, MonitorTarget } from '@/types/uptime.types'
import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react' import { IconAlertCircle, IconAlertTriangle, IconCircleCheck } from '@tabler/icons-react'
import DetailChart from './DetailChart' import DetailChart from './DetailChart'
import DetailBar from './DetailBar' import DetailBar from './DetailBar'
import { getColor } from '@/util/color' import { getColor } from '@/util/color'
@ -37,18 +37,18 @@ export default function MonitorDetail({
/> />
) )
// check in maintenances // Hide real status icon if monitor is in maintenance
const now = new Date() const now = new Date()
const hasMaintenance = (maintenances || []) const hasMaintenance = (maintenances || [])
.filter((m) => (!m.start && !m.end) || (m.start && m.end && now >= m.start && now <= m.end)) .filter((m) => (!m.start && !m.end) || (m.start && m.end && now >= m.start && now <= m.end))
.find((maintenance) => maintenance.monitors?.includes(monitor.id)) .find((maintenance) => maintenance.monitors?.includes(monitor.id))
if (hasMaintenance) if (hasMaintenance)
statusIcon = ( statusIcon = (
<IconAlertCircle <IconAlertTriangle
style={{ style={{
width: '1.25em', width: '1.25em',
height: '1.25em', height: '1.25em',
color: hasMaintenance?.color, color: '#fab005',
marginRight: '3px', marginRight: '3px',
}} }}
/> />

4
components/MonitorList.tsx
View File

@ -102,8 +102,8 @@ export default function MonitorList({
shadow="sm" shadow="sm"
padding="lg" padding="lg"
radius="md" radius="md"
ml="xl" ml="md"
mr="xl" mr="md"
mt="xl" mt="xl"
withBorder={!groupedMonitor} withBorder={!groupedMonitor}
style={{ width: groupedMonitor ? '897px' : '865px' }} style={{ width: groupedMonitor ? '897px' : '865px' }}

11
components/OverallStatus.tsx
View File

@ -1,6 +1,6 @@
import { Maintenances, Monitor } from '@/types/config' import { Maintenances, Monitor } from '@/types/config'
import { Alert, Card, Center, Container, List, ListItem, Text, Title } from '@mantine/core' import { Alert, Center, Container, List, Text, Title } from '@mantine/core'
import { IconCircleCheck, IconAlertCircle, IconInfoCircle } from '@tabler/icons-react' import { IconCircleCheck, IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
function useWindowVisibility() { function useWindowVisibility() {
@ -82,7 +82,7 @@ export default function OverallStatus({
return ( return (
<> <>
<Container size="md" mt="xl" style={{ width: '897px' }}> <Container size="md" mt="xl">
<Center>{icon}</Center> <Center>{icon}</Center>
<Title mt="sm" style={{ textAlign: 'center' }} order={1}> <Title mt="sm" style={{ textAlign: 'center' }} order={1}>
{statusString} {statusString}
@ -97,11 +97,14 @@ export default function OverallStatus({
filteredMaintenances.map((maintenance, idx) => ( filteredMaintenances.map((maintenance, idx) => (
<Alert <Alert
key={idx} key={idx}
icon={<IconInfoCircle />} icon={<IconAlertTriangle />}
title={maintenance.title} title={maintenance.title}
color={maintenance.color || 'primary'} color={maintenance.color || 'primary'}
mt="md" mt="md"
ml="md"
mr="md"
withCloseButton={false} withCloseButton={false}
style={{ maxWidth: '865px', margin: '0 auto' }}
> >
<Text> <Text>
{maintenance.start && ( {maintenance.start && (