vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feat: Add public status page with 10-second polling

Browse Source 
Implement status.corrosionmgmt.com public status page showcasing all
Corrosion servers that opt-in. Drives platform visibility and attracts
new customers.

Backend:
- Migration 007: status_page_description TEXT column
- models/public.rs: PublicServerStatus, PlatformHealth, StatusPageResponse
- db/public.rs: get_public_servers() with uptime calculations (24h/7d/30d)
- api/public.rs: GET /api/public/status (no auth)
- api/settings.rs: public site config endpoints (auth required)

Frontend:
- StatusPageView.vue: Server grid with live stats, uptime badges, wipe schedules
- Platform health header: total servers, online count, total players
- Auto-refresh every 10 seconds via polling
- Mobile-responsive design
- SettingsView.vue: Public Status tab with opt-in toggle

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-15 14:24:32 -05:00
parent 1f5516bbec
commit dfa605f44f
9 changed files with 954 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/views/admin/SettingsView.vue
View File

@@ -2,13 +2,13 @@
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useApi } from '@/composables/useApi'
import { Settings, Key, Globe, User, Save, Loader2 } from 'lucide-vue-next'
import { Settings, Key, Globe, User, Save, Loader2, Eye } from 'lucide-vue-next'
const auth = useAuthStore()
const api = useApi()
const saving = ref(false)
const section = ref<'account' | 'license' | 'domain'>('account')
const section = ref<'account' | 'license' | 'domain' | 'public'>('account')
const accountForm = ref({
username: '',
@@ -20,7 +20,12 @@ const domainForm = ref({
custom_domain: '',
})
function loadForms() {
const publicSiteForm = ref({
show_on_status_page: false,
status_page_description: '',
})
async function loadForms() {
if (auth.user) {
accountForm.value.username = auth.user.username
accountForm.value.email = auth.user.email
@@ -29,6 +34,15 @@ function loadForms() {
domainForm.value.subdomain = auth.license.subdomain || ''
domainForm.value.custom_domain = auth.license.custom_domain || ''
}
// Load public site config
try {
const config = await api.get<any>('/settings/public-site')
publicSiteForm.value.show_on_status_page = config.show_on_status_page
publicSiteForm.value.status_page_description = config.status_page_description || ''
} catch (err) {
console.error('Failed to load public site settings:', err)
}
}
async function saveAccount() {
@@ -53,6 +67,17 @@ async function saveDomain() {
}
}
async function savePublicSite() {
saving.value = true
try {
await api.put('/settings/public-site', publicSiteForm.value)
} catch {
// Handle error
} finally {
saving.value = false
}
}
onMounted(() => {
loadForms()
})
@@ -73,6 +98,7 @@ onMounted(() => {
{ key: 'account', label: 'Account', icon: User },
{ key: 'license', label: 'License', icon: Key },
{ key: 'domain', label: 'Domain', icon: Globe },
{ key: 'public', label: 'Public Status', icon: Eye },
] as const)"
:key="tab.key"
@click="section = tab.key"
@@ -206,5 +232,58 @@ onMounted(() => {
Save
</button>
</div>
<!-- Public Status Page -->
<div v-if="section === 'public'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Public Status Page</h2>
<p class="text-xs text-neutral-500">
Showcase your server on the public Corrosion status page at
<a href="https://status.corrosionmgmt.com" target="_blank" class="text-oxide-400 hover:text-oxide-300">
status.corrosionmgmt.com
</a>
</p>
<div class="space-y-4">
<!-- Toggle -->
<div class="flex items-center justify-between p-4 bg-neutral-800 rounded-lg border border-neutral-700">
<div>
<p class="text-sm font-medium text-neutral-200">Show on status page</p>
<p class="text-xs text-neutral-500 mt-1">Display your server publicly with live stats</p>
</div>
<button
@click="publicSiteForm.show_on_status_page = !publicSiteForm.show_on_status_page"
:class="publicSiteForm.show_on_status_page ? 'bg-oxide-600' : 'bg-neutral-700'"
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-oxide-500 focus:ring-offset-2 focus:ring-offset-neutral-900"
>
<span
:class="publicSiteForm.show_on_status_page ? 'translate-x-6' : 'translate-x-1'"
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
></span>
</button>
</div>
<!-- Description -->
<div>
<label class="block text-xs text-neutral-500 mb-1">Description (optional)</label>
<textarea
v-model="publicSiteForm.status_page_description"
placeholder="Friendly 10x modded server with custom plugins..."
rows="3"
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
></textarea>
<p class="text-xs text-neutral-600 mt-1">Brief description shown on the status page</p>
</div>
</div>
<button
@click="savePublicSite"
:disabled="saving"
class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
>
<Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
<Save v-else class="w-4 h-4" />
Save
</button>
</div>
</div>
</template>

338
frontend/src/views/public/StatusPageView.vue
View File

@@ -1,10 +1,340 @@
<script setup lang="ts">
// TODO: Implement public server status page with uptime and metrics
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { Server, Users, Activity, TrendingUp, Search } from 'lucide-vue-next'
import { useApi } from '@/composables/useApi'
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[]>([])
const platformHealth = ref<PlatformHealth>({
total_servers: 0,
online_servers: 0,
total_players: 0,
uptime_percent: 0,
})
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 getStatusColor(status: string) {
switch (status) {
case 'online':
return 'bg-green-500'
case 'degraded':
return 'bg-yellow-500'
default:
return 'bg-red-500'
}
}
function getStatusText(status: string) {
switch (status) {
case 'online':
return 'Online'
case 'degraded':
return 'Degraded'
default:
return 'Offline'
}
}
function getUptimeBadgeColor(uptime: number) {
if (uptime >= 99) return 'bg-green-500/10 text-green-400'
if (uptime >= 95) return 'bg-yellow-500/10 text-yellow-400'
return 'bg-red-500/10 text-red-400'
}
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="p-6">
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Server Status</h1>
<p class="text-neutral-400">Live server status, uptime history, and current player count.</p>
<div class="min-h-screen bg-neutral-950">
<!-- Header -->
<header class="bg-neutral-900 border-b border-neutral-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h1 class="text-3xl font-bold text-neutral-100 flex items-center gap-3">
<Activity class="w-8 h-8 text-oxide-500" />
Corrosion Status
</h1>
<p class="text-neutral-400 mt-1">
Real-time status for all Corrosion-powered Rust servers
</p>
</div>
<!-- Search -->
<div class="relative w-full md:w-80">
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
<input
v-model="searchQuery"
type="text"
placeholder="Search servers..."
class="w-full pl-10 pr-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
/>
</div>
</div>
<!-- Platform Health Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6" v-if="!loading">
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
<Server class="w-3.5 h-3.5" />
Total Servers
</div>
<p class="text-2xl font-bold text-neutral-100">
{{ platformHealth.total_servers }}
</p>
</div>
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
<Activity class="w-3.5 h-3.5" />
Online Now
</div>
<p class="text-2xl font-bold text-green-400">
{{ platformHealth.online_servers }}
</p>
</div>
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
<Users class="w-3.5 h-3.5" />
Total Players
</div>
<p class="text-2xl font-bold text-oxide-400">
{{ platformHealth.total_players }}
</p>
</div>
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
<TrendingUp class="w-3.5 h-3.5" />
Platform Uptime
</div>
<p class="text-2xl font-bold text-neutral-100">
{{ platformHealth.uptime_percent.toFixed(1) }}%
</p>
</div>
</div>
</div>
</header>
<!-- Server Grid -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Loading State -->
<div v-if="loading" class="text-center py-12">
<div class="inline-block w-8 h-8 border-4 border-oxide-500/20 border-t-oxide-500 rounded-full animate-spin"></div>
<p class="text-neutral-400 mt-4">Loading server status...</p>
</div>
<!-- Error State -->
<div v-else-if="error" class="bg-red-500/10 border border-red-500/20 rounded-lg p-6 text-center">
<p class="text-red-400">{{ error }}</p>
</div>
<!-- Empty State -->
<div v-else-if="filteredServers.length === 0" class="text-center py-12">
<Server class="w-16 h-16 text-neutral-600 mx-auto mb-4" />
<p class="text-neutral-400 text-lg">
{{ searchQuery ? 'No servers match your search' : 'No servers available yet' }}
</p>
</div>
<!-- Server Cards -->
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div
v-for="server in filteredServers"
:key="server.subdomain"
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 hover:border-oxide-500/50 transition-colors"
>
<!-- Server Header -->
<div class="flex items-start justify-between mb-4">
<div class="flex-1 min-w-0">
<h3 class="text-lg font-semibold text-neutral-100 truncate">
{{ server.server_name }}
</h3>
<a
:href="`https://${server.subdomain}.corrosionmgmt.com`"
target="_blank"
class="text-xs text-oxide-400 hover:text-oxide-300 truncate block"
>
{{ server.subdomain }}.corrosionmgmt.com
</a>
</div>
<!-- Status Indicator -->
<div class="flex items-center gap-2 ml-3">
<div
:class="getStatusColor(server.status)"
class="w-2.5 h-2.5 rounded-full animate-pulse"
></div>
<span class="text-xs font-medium text-neutral-300">
{{ getStatusText(server.status) }}
</span>
</div>
</div>
<!-- Description -->
<p v-if="server.description" class="text-sm text-neutral-400 mb-4 line-clamp-2">
{{ server.description }}
</p>
<!-- Player Count -->
<div class="flex items-center gap-2 mb-4">
<Users class="w-4 h-4 text-neutral-500" />
<span class="text-sm text-neutral-300">
{{ server.player_count }} / {{ server.max_players }} players
</span>
<div class="flex-1 bg-neutral-800 rounded-full h-1.5 overflow-hidden">
<div
class="h-full bg-oxide-500 transition-all duration-300"
:style="{ width: `${(server.player_count / server.max_players) * 100}%` }"
></div>
</div>
</div>
<!-- Map Info -->
<div v-if="server.map_name" class="text-xs text-neutral-500 mb-3">
Map: {{ server.map_name }}
</div>
<!-- Wipe Schedule -->
<div v-if="server.wipe_schedule" class="bg-neutral-800 rounded-lg p-3 mb-3">
<div class="text-xs text-neutral-500 mb-1">Wipe Schedule</div>
<div class="text-sm text-neutral-300">{{ server.wipe_schedule }}</div>
<div v-if="server.next_wipe" class="text-xs text-oxide-400 mt-1">
Next wipe: {{ formatTimeUntil(server.next_wipe) }}
</div>
</div>
<!-- Uptime Badges -->
<div class="flex gap-2">
<div :class="getUptimeBadgeColor(server.uptime_24h_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
<div class="text-xs font-medium">{{ server.uptime_24h_percent.toFixed(1) }}%</div>
<div class="text-[10px] opacity-75">24h</div>
</div>
<div :class="getUptimeBadgeColor(server.uptime_7d_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
<div class="text-xs font-medium">{{ server.uptime_7d_percent.toFixed(1) }}%</div>
<div class="text-[10px] opacity-75">7d</div>
</div>
<div :class="getUptimeBadgeColor(server.uptime_30d_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
<div class="text-xs font-medium">{{ server.uptime_30d_percent.toFixed(1) }}%</div>
<div class="text-[10px] opacity-75">30d</div>
</div>
</div>
</div>
</div>
<!-- Auto-refresh indicator -->
<div class="text-center mt-8 text-xs text-neutral-600">
Auto-refreshing every 10 seconds
</div>
</main>
<!-- Footer -->
<footer class="bg-neutral-900 border-t border-neutral-800 mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
<p class="text-neutral-400 text-sm mb-2">
Powered by
<a
href="https://panel.corrosionmgmt.com"
class="text-oxide-400 hover:text-oxide-300 font-medium"
target="_blank"
>
Corrosion
</a>
</p>
<p class="text-neutral-600 text-xs">
The complete server management platform for Rust game servers
</p>
</div>
</footer>
</div>
</template>