a8722a7a07
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Full-site fake-data audit findings: - SetupWizard showed a curl|sh installer (get.corrosionmgmt.com) and a 'corrosion-agent' binary that don't exist -> real host-agent commands - 'View live demo' CTA on 5 marketing pages linked to a login, not a demo -> honest 'Sign in' - Google Fonts @import was silently dropped from the production CSS bundle (mid-bundle @import) -> <link> tags in index.html; prod was shipping system fallback fonts - App-root ErrorBoundary bricked the entire SPA (incl. marketing) on a single failed fetch until manual reload -> resets on route change + content-scoped boundary inside DashboardLayout so nav chrome survives - Status page KPIs showed fake zeros while the fetch failed -> em dash - Login lacked the forgot-password link (flow already existed end-to-end) - AdminSeedService: fresh DB had schema but no login possible; seeds super-admin + license from ADMIN_* env when users table is empty Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
499 lines
13 KiB
Vue
499 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
|
import { useApi } from '@/composables/useApi'
|
|
import { safeFixed } from '@/utils/formatters'
|
|
import Panel from '@/components/ds/data/Panel.vue'
|
|
import StatCard from '@/components/ds/data/StatCard.vue'
|
|
import Badge from '@/components/ds/core/Badge.vue'
|
|
import StatusDot from '@/components/ds/core/StatusDot.vue'
|
|
import Icon from '@/components/ds/core/Icon.vue'
|
|
import Alert from '@/components/ds/feedback/Alert.vue'
|
|
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
|
import Input from '@/components/ds/forms/Input.vue'
|
|
import Logo from '@/components/ds/brand/Logo.vue'
|
|
|
|
interface ServerStatus {
|
|
server_name: string
|
|
subdomain: string
|
|
status: 'online' | 'offline' | 'degraded'
|
|
player_count: number
|
|
max_players: number
|
|
uptime_24h_percent: number
|
|
uptime_7d_percent: number
|
|
uptime_30d_percent: number
|
|
map_name: string | null
|
|
wipe_schedule: string | null
|
|
next_wipe: string | null
|
|
description: string | null
|
|
}
|
|
|
|
interface PlatformHealth {
|
|
total_servers: number
|
|
online_servers: number
|
|
total_players: number
|
|
uptime_percent: number
|
|
}
|
|
|
|
interface StatusResponse {
|
|
servers: ServerStatus[]
|
|
platform_health: PlatformHealth
|
|
}
|
|
|
|
const api = useApi()
|
|
const servers = ref<ServerStatus[]>([])
|
|
// null until the first successful fetch — KPIs render '—', never fake zeros
|
|
const platformHealth = ref<PlatformHealth | null>(null)
|
|
|
|
const searchQuery = ref('')
|
|
const loading = ref(true)
|
|
const error = ref<string | null>(null)
|
|
let refreshInterval: number | null = null
|
|
|
|
// Filtered servers based on search
|
|
const filteredServers = computed(() => {
|
|
if (!searchQuery.value) return servers.value
|
|
|
|
const query = searchQuery.value.toLowerCase()
|
|
return servers.value.filter(
|
|
(s) =>
|
|
s.server_name.toLowerCase().includes(query) ||
|
|
s.subdomain.toLowerCase().includes(query) ||
|
|
s.description?.toLowerCase().includes(query)
|
|
)
|
|
})
|
|
|
|
async function fetchStatus() {
|
|
try {
|
|
const response = await api.get<StatusResponse>('/public/status')
|
|
servers.value = response.servers
|
|
platformHealth.value = response.platform_health
|
|
error.value = null
|
|
} catch (err) {
|
|
console.error('Failed to fetch status:', err)
|
|
error.value = 'Failed to load server status'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function getStatusTone(status: string): 'online' | 'offline' | 'warn' {
|
|
if (status === 'online') return 'online'
|
|
if (status === 'degraded') return 'warn'
|
|
return 'offline'
|
|
}
|
|
|
|
function getUptimeTone(uptime: number): 'online' | 'warn' | 'offline' {
|
|
if (uptime >= 99) return 'online'
|
|
if (uptime >= 95) return 'warn'
|
|
return 'offline'
|
|
}
|
|
|
|
function formatTimeUntil(isoDate: string | null): string {
|
|
if (!isoDate) return 'Not scheduled'
|
|
|
|
const now = new Date()
|
|
const target = new Date(isoDate)
|
|
const diff = target.getTime() - now.getTime()
|
|
|
|
if (diff < 0) return 'Overdue'
|
|
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
|
|
|
|
if (days > 0) return `${days}d ${hours}h`
|
|
if (hours > 0) return `${hours}h ${minutes}m`
|
|
return `${minutes}m`
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchStatus()
|
|
|
|
// Auto-refresh every 10 seconds
|
|
refreshInterval = window.setInterval(() => {
|
|
fetchStatus()
|
|
}, 10000)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (refreshInterval) {
|
|
clearInterval(refreshInterval)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="sp-page">
|
|
<!-- Brand bar -->
|
|
<header class="sp-bar">
|
|
<div class="sp-bar__inner">
|
|
<div class="sp-bar__brand">
|
|
<Logo :size="22" :wordmark="true" />
|
|
<div class="sp-bar__sub">Real-time status for all Corrosion-powered servers</div>
|
|
</div>
|
|
<div class="sp-bar__search">
|
|
<Input
|
|
v-model="searchQuery"
|
|
icon="search"
|
|
placeholder="Search servers..."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Platform KPIs -->
|
|
<div v-if="!loading" class="sp-kpis">
|
|
<StatCard icon="server" label="Total servers" :value="platformHealth ? String(platformHealth.total_servers) : '—'" />
|
|
<StatCard icon="activity" label="Online now" :value="platformHealth ? String(platformHealth.online_servers) : '—'" />
|
|
<StatCard icon="users" label="Total players" :value="platformHealth ? String(platformHealth.total_players) : '—'" />
|
|
<StatCard icon="trending-up" label="Platform uptime" :value="safeFixed(platformHealth?.uptime_percent ?? null, 1, '—')" unit="%" />
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<main class="sp-main">
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="sp-state">
|
|
<Icon name="loader" :size="28" class="sp-spin" />
|
|
<span class="sp-state__label">Loading server status...</span>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<Alert v-else-if="error" tone="danger" :title="error ?? ''" />
|
|
|
|
<!-- Empty -->
|
|
<EmptyState
|
|
v-else-if="filteredServers.length === 0"
|
|
icon="server"
|
|
:title="searchQuery ? 'No servers match your search' : 'No servers available yet'"
|
|
/>
|
|
|
|
<!-- Server grid -->
|
|
<div v-else class="sp-grid">
|
|
<Panel
|
|
v-for="server in filteredServers"
|
|
:key="server.subdomain"
|
|
class="sp-card"
|
|
>
|
|
<div class="sp-card__body">
|
|
<!-- Server name + link -->
|
|
<div class="sp-card__head">
|
|
<div class="sp-card__name-block">
|
|
<h3 class="sp-card__name">{{ server.server_name }}</h3>
|
|
<a
|
|
:href="`https://${server.subdomain}.corrosionmgmt.com`"
|
|
target="_blank"
|
|
class="sp-card__link"
|
|
>
|
|
<Icon name="external-link" :size="11" />
|
|
{{ server.subdomain }}.corrosionmgmt.com
|
|
</a>
|
|
</div>
|
|
<StatusDot :tone="getStatusTone(server.status)" :size="10" :pulse="server.status === 'online'" />
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p v-if="server.description" class="sp-card__desc">{{ server.description }}</p>
|
|
|
|
<!-- Player bar -->
|
|
<div class="sp-players">
|
|
<div class="sp-players__label">
|
|
<Icon name="users" :size="12" />
|
|
<span>{{ server.player_count }} / {{ server.max_players }} players</span>
|
|
</div>
|
|
<div class="sp-players__track">
|
|
<div
|
|
class="sp-players__fill"
|
|
:style="{ width: `${(server.player_count / server.max_players) * 100}%` }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map -->
|
|
<div v-if="server.map_name" class="sp-card__meta">
|
|
<Icon name="map" :size="12" />
|
|
<span>{{ server.map_name }}</span>
|
|
</div>
|
|
|
|
<!-- Wipe schedule -->
|
|
<div v-if="server.wipe_schedule" class="sp-wipe">
|
|
<div class="sp-wipe__label">Wipe schedule</div>
|
|
<div class="sp-wipe__val">{{ server.wipe_schedule }}</div>
|
|
<div v-if="server.next_wipe" class="sp-wipe__next">
|
|
Next: {{ formatTimeUntil(server.next_wipe) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Uptime badges -->
|
|
<div class="sp-uptime">
|
|
<Badge :tone="getUptimeTone(server.uptime_24h_percent)" :mono="true" size="lg">
|
|
{{ safeFixed(server.uptime_24h_percent, 1) }}% <span class="sp-uptime__period">24h</span>
|
|
</Badge>
|
|
<Badge :tone="getUptimeTone(server.uptime_7d_percent)" :mono="true" size="lg">
|
|
{{ safeFixed(server.uptime_7d_percent, 1) }}% <span class="sp-uptime__period">7d</span>
|
|
</Badge>
|
|
<Badge :tone="getUptimeTone(server.uptime_30d_percent)" :mono="true" size="lg">
|
|
{{ safeFixed(server.uptime_30d_percent, 1) }}% <span class="sp-uptime__period">30d</span>
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
|
|
<!-- Auto-refresh note -->
|
|
<div class="sp-refresh-note">Auto-refreshing every 10 seconds</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sp-page {
|
|
min-height: 100vh;
|
|
background: var(--surface-canvas);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Brand bar */
|
|
.sp-bar {
|
|
background: var(--surface-base);
|
|
box-shadow: 0 1px 0 var(--border-subtle);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
|
|
.sp-bar__inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--space-5) var(--space-6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-5);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sp-bar__brand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.sp-bar__sub {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sp-bar__search {
|
|
width: 260px;
|
|
flex: none;
|
|
}
|
|
|
|
/* Platform KPIs */
|
|
.sp-kpis {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
padding: var(--space-5) var(--space-6) 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
/* Main content area */
|
|
.sp-main {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
padding: var(--space-5) var(--space-6) var(--space-8);
|
|
flex: 1;
|
|
}
|
|
|
|
/* Loading state */
|
|
.sp-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
padding: var(--space-16) 0;
|
|
}
|
|
|
|
.sp-spin {
|
|
color: var(--accent);
|
|
animation: sp-rotate 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes sp-rotate {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sp-spin { animation: none; }
|
|
}
|
|
|
|
.sp-state__label {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Server grid */
|
|
.sp-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--space-4);
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
/* Server card body */
|
|
.sp-card__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.sp-card__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.sp-card__name-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
min-width: 0;
|
|
}
|
|
|
|
.sp-card__name {
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sp-card__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--accent-text);
|
|
transition: color var(--dur-fast) var(--ease-standard);
|
|
}
|
|
|
|
.sp-card__link:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.sp-card__desc {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
line-height: 1.55;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sp-card__meta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1-5);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Player progress bar */
|
|
.sp-players {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.sp-players__label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1-5);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.sp-players__track {
|
|
height: 4px;
|
|
background: var(--surface-raised-2);
|
|
border-radius: var(--radius-pill);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sp-players__fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
border-radius: var(--radius-pill);
|
|
transition: width 0.4s var(--ease-standard);
|
|
}
|
|
|
|
/* Wipe schedule block */
|
|
.sp-wipe {
|
|
background: var(--surface-raised);
|
|
box-shadow: var(--ring-default);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-2-5) var(--space-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sp-wipe__label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sp-wipe__val {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.sp-wipe__next {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--accent-text);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Uptime badges row */
|
|
.sp-uptime {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.sp-uptime__period {
|
|
opacity: 0.65;
|
|
font-weight: 400;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Auto-refresh note */
|
|
.sp-refresh-note {
|
|
text-align: center;
|
|
margin-top: var(--space-8);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1100px) {
|
|
.sp-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.sp-kpis { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.sp-grid { grid-template-columns: 1fr; }
|
|
.sp-kpis { grid-template-columns: repeat(2, 1fr); }
|
|
.sp-bar__search { width: 100%; }
|
|
}
|
|
</style>
|