feat: Add 5 Platform Admin views for super-admin dashboard
- AdminDashboard: KPI cards (licenses, users, MRR, servers, signups) + quick links - AdminLicenses: Searchable paginated table with detail panel, CSV export, license generation - AdminSubscriptions: MRR summary cards, per-module breakdown, subscriber table - AdminUsers: Paginated user table with super admin toggle and account disable actions - AdminServers: Filterable server table with connection type badges, status dots, relative heartbeat times Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
204
frontend/src/views/platform-admin/AdminServers.vue
Normal file
204
frontend/src/views/platform-admin/AdminServers.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Server, Search } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
interface ServerEntry {
|
||||
id: string
|
||||
server_name: string
|
||||
owner_email: string
|
||||
connection_type: 'plugin' | 'companion' | 'amp' | 'pterodactyl' | 'bare_metal'
|
||||
status: 'connected' | 'degraded' | 'offline'
|
||||
server_ip: string
|
||||
game_port: number
|
||||
last_heartbeat: string
|
||||
}
|
||||
|
||||
interface ServerListResponse {
|
||||
servers: ServerEntry[]
|
||||
}
|
||||
|
||||
const servers = ref<ServerEntry[]>([])
|
||||
const isLoading = ref(false)
|
||||
const statusFilter = ref('all')
|
||||
const searchQuery = ref('')
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'connected', label: 'Connected' },
|
||||
{ value: 'degraded', label: 'Degraded' },
|
||||
{ value: 'offline', label: 'Offline' },
|
||||
]
|
||||
|
||||
const connectionBadgeClass: Record<string, string> = {
|
||||
plugin: 'bg-blue-500/10 text-blue-400',
|
||||
companion: 'bg-purple-500/10 text-purple-400',
|
||||
amp: 'bg-cyan-500/10 text-cyan-400',
|
||||
pterodactyl: 'bg-green-500/10 text-green-400',
|
||||
bare_metal: 'bg-orange-500/10 text-orange-400',
|
||||
}
|
||||
|
||||
const statusDotClass: Record<string, string> = {
|
||||
connected: 'bg-green-500',
|
||||
degraded: 'bg-yellow-500',
|
||||
offline: 'bg-red-500',
|
||||
}
|
||||
|
||||
const statusTextClass: Record<string, string> = {
|
||||
connected: 'text-green-400',
|
||||
degraded: 'text-yellow-400',
|
||||
offline: 'text-red-400',
|
||||
}
|
||||
|
||||
const filteredServers = computed(() => {
|
||||
let result = servers.value
|
||||
|
||||
if (statusFilter.value !== 'all') {
|
||||
result = result.filter(s => s.status === statusFilter.value)
|
||||
}
|
||||
|
||||
if (searchQuery.value.trim()) {
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
result = result.filter(s =>
|
||||
s.server_name.toLowerCase().includes(q) ||
|
||||
s.owner_email.toLowerCase().includes(q) ||
|
||||
s.server_ip.includes(q)
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
function relativeTime(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime()
|
||||
const seconds = Math.floor(diff / 1000)
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const days = Math.floor(hours / 24)
|
||||
|
||||
if (seconds < 60) return 'Just now'
|
||||
if (minutes < 60) return `${minutes} min ago`
|
||||
if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`
|
||||
return `${days} day${days !== 1 ? 's' : ''} ago`
|
||||
}
|
||||
|
||||
async function fetchServers() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams()
|
||||
if (statusFilter.value !== 'all') params.set('status', statusFilter.value)
|
||||
|
||||
const query = params.toString()
|
||||
const path = query ? `/admin/servers?${query}` : '/admin/servers'
|
||||
const data = await api.get<ServerListResponse>(path)
|
||||
servers.value = data.servers
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(statusFilter, () => {
|
||||
fetchServers()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchServers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<Server class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Server Overview</h1>
|
||||
<p class="text-sm text-neutral-400 mt-0.5">
|
||||
{{ filteredServers.length }} server{{ filteredServers.length !== 1 ? 's' : '' }}
|
||||
<template v-if="statusFilter !== 'all'"> ({{ statusFilter }})</template>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative flex-1 max-w-sm">
|
||||
<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 by server name, email, or IP..."
|
||||
class="w-full pl-10 pr-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"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
v-model="statusFilter"
|
||||
class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
>
|
||||
<option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-neutral-800 text-left">
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Server Name</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Connection Type</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Server IP</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Game Port</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Last Heartbeat</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="filteredServers.length === 0 && !isLoading">
|
||||
<td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="searchQuery">No servers matching "{{ searchQuery }}"</template>
|
||||
<template v-else-if="statusFilter !== 'all'">No {{ statusFilter }} servers found.</template>
|
||||
<template v-else>No servers found.</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="isLoading">
|
||||
<td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading servers...</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="srv in filteredServers"
|
||||
:key="srv.id"
|
||||
class="hover:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-sm font-medium text-neutral-100">{{ srv.server_name }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ srv.owner_email }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-flex text-xs font-medium px-2 py-0.5 rounded-full capitalize"
|
||||
:class="connectionBadgeClass[srv.connection_type] || 'bg-neutral-700/50 text-neutral-400'"
|
||||
>
|
||||
{{ srv.connection_type.replace('_', ' ') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full" :class="statusDotClass[srv.status] || 'bg-neutral-500'" />
|
||||
<span class="text-sm capitalize" :class="statusTextClass[srv.status] || 'text-neutral-400'">
|
||||
{{ srv.status }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ srv.server_ip }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ srv.game_port }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ relativeTime(srv.last_heartbeat) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user