{t('Group Status')}
diff --git a/web/src/features/group-status/lib/status.ts b/web/src/features/group-status/lib/status.ts
index b78e010..4c753e5 100644
--- a/web/src/features/group-status/lib/status.ts
+++ b/web/src/features/group-status/lib/status.ts
@@ -2,6 +2,14 @@ import type { UptimeMonitor, UptimeSample } from '@/features/dashboard/types'
export type GroupStatusKind = 'operational' | 'degraded' | 'error' | 'unknown'
+export function supportsAstra(monitor: UptimeMonitor): boolean {
+ return monitor.models?.includes('gpt-6-astra') ?? false
+}
+
+export function compareStatusMonitors(a: UptimeMonitor, b: UptimeMonitor): number {
+ return Number(b.status === 1) - Number(a.status === 1) || Number(supportsAstra(b)) - Number(supportsAstra(a))
+}
+
export function statusKind(status: number): GroupStatusKind {
if (status < 0) return 'unknown'
if (status === 1) return 'operational'
diff --git a/web/src/features/group-status/status-page.tsx b/web/src/features/group-status/status-page.tsx
index a687355..c34d681 100644
--- a/web/src/features/group-status/status-page.tsx
+++ b/web/src/features/group-status/status-page.tsx
@@ -1,6 +1,6 @@
import { useQuery } from '@tanstack/react-query'
import { Activity, ArrowUpRight, RefreshCw, Settings2 } from 'lucide-react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import { Dialog } from '@/components/dialog'
@@ -19,7 +19,12 @@ import { cn } from '@/lib/utils'
import { useAuthStore } from '@/stores/auth-store'
import { FingerprintPanel } from './fingerprint-panel'
-import { getOverallStatus, statusKind } from './lib/status'
+import {
+ getOverallStatus,
+ statusKind,
+ supportsAstra,
+ compareStatusMonitors,
+} from './lib/status'
import { ProbeHistory } from './probe-history'
import { getStatusPage } from './status-page-api'
import {
@@ -41,11 +46,11 @@ function qualityLabel(quality: string): string {
return 'Unable to classify'
}
-function supportsAstra(monitor: UptimeMonitor): boolean {
- return monitor.models?.includes('gpt-6-astra') ?? false
-}
-
-function ArtworkThumbnail(props: { id: string; title: string }) {
+function ArtworkThumbnail(props: {
+ id: string
+ title: string
+ artworkBase: string
+}) {
const container = useRef(null)
const [scale, setScale] = useState(0)
useEffect(() => {
@@ -64,7 +69,7 @@ function ArtworkThumbnail(props: { id: string; title: string }) {
>
)}
- {astra && (
+ {(astra || props.detailsContent) && (
)}
+ {props.actions}
{astra && (
@@ -208,6 +218,7 @@ export function StatusGroupRow(props: {
>
-
+ {props.detailsContent || (
+
+ )}
)
@@ -345,7 +358,7 @@ export function GroupStatus() {
refetchInterval: 15_000,
})
const monitors = (query.data?.flatMap((group) => group.monitors) || []).sort(
- (a, b) => Number(supportsAstra(b)) - Number(supportsAstra(a))
+ compareStatusMonitors
)
const overall = getOverallStatus(monitors.map((monitor) => monitor.status))
const operational = monitors.filter((monitor) => monitor.status === 1).length