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

feat: Frontend gap closure — Schedules, Alerts, Migration, Changelog views

Browse Source 
Implements missing frontend views and API integrations:

New Views:
- SchedulesView: CRUD for scheduled tasks (restart/announcement/command/plugin_reload)
- MigrationView: Export/import interface with file upload and history tracking
- ChangelogView: Paginated changelog feed with category badges
- ForgotPasswordView: Password reset flow with email submission
- AlertsView: Alert config dashboard with threshold settings and history

Component Updates:
- ErrorBoundary: Global error handler with retry functionality
- DashboardLayout: Mobile responsive sidebar, permission-based nav, new menu items
- ServerInfoView: Complete rewrite for public server info display

Infrastructure:
- useApi: Token refresh interceptor with 401 retry and infinite loop prevention
- plugins store: Implemented all stubbed methods with real API calls
- auth store: Added hasPermission() helper for RBAC UI visibility
- Router: Added new routes with catch-all fallback

Purpose: Closes frontend implementation gaps. Hardens auth flow, improves mobile UX,
enables server automation scheduling, alert configuration, and data migration tools.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-15 21:20:40 -05:00
parent 8cd792eb75
commit 4c648783a2
14 changed files with 1327 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
frontend/src/views/admin/MigrationView.vue Normal file
View File

@@ -0,0 +1,191 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import { Download, Upload, FileText, Loader2 } from 'lucide-vue-next'
interface ExportRecord {
id: string
export_type: 'full' | 'config_only' | 'store_only'
file_size_bytes: number
created_at: string
download_url?: string
}
const api = useApi()
const exports = ref<ExportRecord[]>([])
const isExporting = ref(false)
const isImporting = ref(false)
const exportType = ref<'full' | 'config_only' | 'store_only'>('full')
const uploadFile = ref<File | null>(null)
async function fetchExports() {
exports.value = await api.get<ExportRecord[]>('/migration/exports')
}
async function createExport() {
if (!confirm(`Export ${exportType.value.replace('_', ' ')} data?`)) return
isExporting.value = true
try {
const result = await api.post<{ export_id: string }>('/migration/export', { export_type: exportType.value })
alert(`Export created: ${result.export_id}`)
await fetchExports()
} finally {
isExporting.value = false
}
}
function handleFileSelect(event: Event) {
const target = event.target as HTMLInputElement
if (target.files && target.files.length > 0) {
uploadFile.value = target.files[0]
}
}
async function importData() {
if (!uploadFile.value) return
if (!confirm('Import data? This will overwrite existing configuration.')) return
isImporting.value = true
try {
const formData = new FormData()
formData.append('file', uploadFile.value)
const response = await fetch('/api/migration/import', {
method: 'POST',
body: formData,
})
if (!response.ok) {
throw new Error('Import failed')
}
alert('Import successful')
uploadFile.value = null
} catch (err) {
alert(err instanceof Error ? err.message : 'Import failed')
} finally {
isImporting.value = false
}
}
function formatBytes(bytes: number): string {
if (bytes === 0) return '0 B'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
}
onMounted(() => {
fetchExports()
})
</script>
<template>
<div class="p-6 space-y-6">
<!-- Header -->
<div class="flex items-center gap-3">
<FileText class="w-5 h-5 text-oxide-500" />
<h1 class="text-2xl font-bold text-neutral-100">Migration</h1>
</div>
<!-- Export Section -->
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Export Data</h2>
<div class="flex items-end gap-4">
<div>
<label class="block text-xs text-neutral-500 mb-2">Export Type</label>
<div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
<button
v-for="opt in (['full', 'config_only', 'store_only'] as const)"
:key="opt"
@click="exportType = opt"
class="px-4 py-2 text-sm font-medium transition-colors capitalize"
:class="exportType === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
>
{{ opt.replace('_', ' ') }}
</button>
</div>
</div>
<button
@click="createExport"
:disabled="isExporting"
class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
>
<Loader2 v-if="isExporting" class="w-4 h-4 animate-spin" />
<Download v-else class="w-4 h-4" />
Export
</button>
</div>
</div>
<!-- Export History -->
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
<div class="p-5 border-b border-neutral-800">
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Export History</h2>
</div>
<div v-if="exports.length === 0" class="p-8 text-center text-neutral-500">
No exports yet.
</div>
<table v-else class="w-full">
<thead class="bg-neutral-800/50 border-b border-neutral-800">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Created</th>
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Size</th>
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-neutral-800">
<tr v-for="exp in exports" :key="exp.id" class="hover:bg-neutral-800/30">
<td class="px-4 py-3 text-sm text-neutral-200 capitalize">{{ exp.export_type.replace('_', ' ') }}</td>
<td class="px-4 py-3 text-sm text-neutral-400">{{ new Date(exp.created_at).toLocaleString() }}</td>
<td class="px-4 py-3 text-sm text-neutral-400">{{ formatBytes(exp.file_size_bytes) }}</td>
<td class="px-4 py-3">
<a
v-if="exp.download_url"
:href="exp.download_url"
class="text-oxide-400 hover:text-oxide-300 text-sm transition-colors"
>
Download
</a>
<span v-else class="text-sm text-neutral-600">Preparing...</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Import Section -->
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Import Data</h2>
<div class="space-y-4">
<div class="border-2 border-dashed border-neutral-700 rounded-lg p-6 text-center">
<Upload class="w-8 h-8 text-neutral-500 mx-auto mb-2" />
<input
type="file"
accept=".json,.zip"
@change="handleFileSelect"
class="hidden"
id="file-upload"
/>
<label for="file-upload" class="cursor-pointer">
<span class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors">
{{ uploadFile ? uploadFile.name : 'Click to select file' }}
</span>
</label>
<p class="text-xs text-neutral-500 mt-1">JSON or ZIP exports</p>
</div>
<button
@click="importData"
:disabled="!uploadFile || isImporting"
class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
>
<Loader2 v-if="isImporting" class="w-4 h-4 animate-spin" />
<Upload v-else class="w-4 h-4" />
Import
</button>
</div>
</div>
</div>
</template>