diff --git a/src/frontend/src/components/nav/Alerts.tsx b/src/frontend/src/components/nav/Alerts.tsx index 7e689ca00b..b69f58e19c 100644 --- a/src/frontend/src/components/nav/Alerts.tsx +++ b/src/frontend/src/components/nav/Alerts.tsx @@ -1,5 +1,5 @@ import { ActionIcon, Alert, Group, Menu, Stack, Tooltip } from '@mantine/core'; -import { IconExclamationCircle } from '@tabler/icons-react'; +import { IconCircleCheck, IconExclamationCircle } from '@tabler/icons-react'; import { useMemo, useState } from 'react'; import type { SettingsStateProps } from '@lib/types/Settings'; @@ -34,7 +34,7 @@ export function Alerts() { const [dismissed, setDismissed] = useState([]); - const alerts: AlertInfo[] = useMemo( + const alerts: ExtendedAlertInfo[] = useMemo( () => getAlerts(server, globalSettings).filter( (alert) => !dismissed.includes(alert.key) @@ -79,11 +79,12 @@ export function Alerts() { export function ServerAlert({ alert, closeAlert -}: { alert: AlertInfo; closeAlert?: (key: string) => void }) { +}: { alert: ExtendedAlertInfo; closeAlert?: (key: string) => void }) { return ( : } title={ {alert.code && `${alert.code}: `} @@ -93,14 +94,15 @@ export function ServerAlert({ onClose={closeAlert ? () => closeAlert(alert.key) : undefined} > - {alert.message} - {alert.code && errorCodeLink(alert.code)} + {!alert.condition && t`No issues detected`} + {alert.condition && alert.message} + {alert.condition && alert.code && errorCodeLink(alert.code)} ); } -type ExtendedAlertInfo = AlertInfo & { +export type ExtendedAlertInfo = AlertInfo & { condition: boolean; }; @@ -112,7 +114,7 @@ export function getAlerts( const n_migrations = Number.parseInt(globalSettings.getSetting('_PENDING_MIGRATIONS')) ?? 0; - const allalerts: ExtendedAlertInfo[] = [ + const allAlerts: ExtendedAlertInfo[] = [ { key: 'debug', title: t`Debug Mode`, @@ -150,7 +152,7 @@ export function getAlerts( } ]; - return allalerts.filter((alert) => inactive || alert.condition); + return allAlerts.filter((alert) => inactive || alert.condition); } export function errorCodeLink(code: string) { diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx index 0458bb205d..8a0d202166 100644 --- a/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx +++ b/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx @@ -4,28 +4,37 @@ import { Accordion, Alert, SimpleGrid, Stack, Text } from '@mantine/core'; import { type JSX, useMemo, useState } from 'react'; import { useShallow } from 'zustand/react/shallow'; import { StylishText } from '../../../../components/items/StylishText'; -import { ServerAlert, getAlerts } from '../../../../components/nav/Alerts'; +import { + type ExtendedAlertInfo, + ServerAlert, + getAlerts +} from '../../../../components/nav/Alerts'; import { QuickAction } from '../../../../components/settings/QuickAction'; import { useServerApiState } from '../../../../states/ServerApiState'; import { useGlobalSettingsState } from '../../../../states/SettingsStates'; +function rankAlert(alert: ExtendedAlertInfo): number { + if (!alert.condition) return 0; + if (alert.error) return 2; + + return 1; +} + export default function HomePanel(): JSX.Element { const [dismissed, setDismissed] = useState(false); const [server] = useServerApiState(useShallow((state) => [state.server])); const globalSettings = useGlobalSettingsState(); const accElements = useMemo(() => { - const _alerts = getAlerts(server, globalSettings, true); + const _alerts = getAlerts(server, globalSettings, true).sort( + (a, b) => rankAlert(b) - rankAlert(a) + ); + return [ { - key: 'active', - text: t`Active Alerts`, - elements: _alerts.filter((alert) => alert.condition) - }, - { - key: 'inactive', - text: t`Inactive Alerts`, - elements: _alerts.filter((alert) => !alert.condition) + key: 'system-status', + text: t`System Status`, + elements: _alerts } ]; }, [server, globalSettings]); @@ -67,7 +76,7 @@ export default function HomePanel(): JSX.Element { )}