feat(phase7): complete page audit, add missing admin pages - command station, logs, substations, deployments
This commit is contained in:
cawcenter
133
src/pages/admin/command-station.astro
Normal file
133
src/pages/admin/command-station.astro
Normal file
@@ -0,0 +1,133 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
---
|
||||
|
||||
<AdminLayout title="Command Station">
|
||||
<div class="space-y-8">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gold-500 mb-2">🎛️ Command Station</h1>
|
||||
<p class="text-gray-400">Unified control center for all God Mode operations</p>
|
||||
</div>
|
||||
|
||||
<!-- Status Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Intelligence Station -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-xl font-bold text-gold-500">🧠 Intelligence Station</h3>
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-semibold">ACTIVE</span>
|
||||
</div>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Avatars</span>
|
||||
<a href="/admin/intelligence/avatars" class="text-blue-400 hover:text-blue-300">Manage →</a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Geo Intelligence</span>
|
||||
<a href="/admin/collections/geo-intelligence" class="text-blue-400 hover:text-blue-300">View →</a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Patterns</span>
|
||||
<a href="/admin/collections/cartesian-patterns" class="text-blue-400 hover:text-blue-300">Edit →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Production Station -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-xl font-bold text-gold-500">⚡ Production Station</h3>
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-semibold">ACTIVE</span>
|
||||
</div>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Content Generator</span>
|
||||
<a href="/admin/content-generator" class="text-blue-400 hover:text-blue-300">Launch →</a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Generation Queue</span>
|
||||
<a href="/admin/collections/generation-jobs" class="text-blue-400 hover:text-blue-300">Monitor →</a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Factory</span>
|
||||
<a href="/admin/factory" class="text-blue-400 hover:text-blue-300">Open →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WordPress Ignition -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-xl font-bold text-gold-500">🔌 WordPress Ignition</h3>
|
||||
<span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm font-semibold">STANDBY</span>
|
||||
</div>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">WP Connection</span>
|
||||
<span class="text-green-400">Ready</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Sync Status</span>
|
||||
<span class="text-gray-500">Idle</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">Actions</span>
|
||||
<button class="text-blue-400 hover:text-blue-300">Configure →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<h2 class="text-2xl font-bold text-gold-500 mb-6">⚡ Quick Actions</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<a href="/admin/content-generator" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
|
||||
<div class="text-3xl mb-2">🎯</div>
|
||||
<div class="text-sm font-semibold text-gray-300">New Campaign</div>
|
||||
</a>
|
||||
<a href="/admin/factory" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
|
||||
<div class="text-3xl mb-2">🏭</div>
|
||||
<div class="text-sm font-semibold text-gray-300">Content Factory</div>
|
||||
</a>
|
||||
<a href="/admin/sites" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
|
||||
<div class="text-3xl mb-2">🌐</div>
|
||||
<div class="text-sm font-semibold text-gray-300">Sites</div>
|
||||
</a>
|
||||
<a href="/admin/db-console" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
|
||||
<div class="text-3xl mb-2">💾</div>
|
||||
<div class="text-sm font-semibold text-gray-300">DB Console</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Health -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<h2 class="text-2xl font-bold text-gold-500 mb-6">🏥 System Health</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="text-sm text-gray-400 mb-1">Core API</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-green-400 font-semibold">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="text-sm text-gray-400 mb-1">Database</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-green-400 font-semibold">Connected</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="text-sm text-gray-400 mb-1">Redis Queue</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-green-400 font-semibold">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
100
src/pages/admin/generated-articles.astro
Normal file
100
src/pages/admin/generated-articles.astro
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
---
|
||||
|
||||
<AdminLayout title="Generated Articles">
|
||||
<div class="space-y-8">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gold-500 mb-2">📰 Generated Articles</h1>
|
||||
<p class="text-gray-400">View all AI-generated content from campaigns</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Total Generated</div>
|
||||
<div id="statTotal" class="text-3xl font-bold text-gold-500">0</div>
|
||||
</div>
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Published</div>
|
||||
<div id="statPublished" class="text-3xl font-bold text-green-400">0</div>
|
||||
</div>
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Drafts</div>
|
||||
<div id="statDrafts" class="text-3xl font-bold text-blue-400">0</div>
|
||||
</div>
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Campaigns</div>
|
||||
<div id="statCampaigns" class="text-3xl font-bold text-purple-400">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Articles Table -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl overflow-hidden">
|
||||
<div class="p-6 border-b border-edge-subtle">
|
||||
<h2 class="text-xl font-bold text-gold-500">Generated Content</h2>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-obsidian border-b border-edge-subtle">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Title</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Campaign</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Location</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Status</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Created</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="articlesTable" class="divide-y divide-edge-subtle">
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-12 text-center text-gray-500">
|
||||
<div class="text-4xl mb-2">📝</div>
|
||||
<p>No generated articles yet. Create a campaign to get started.</p>
|
||||
<a href="/admin/content-generator" class="inline-block mt-4 px-6 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
|
||||
Create Campaign
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Implementation Note -->
|
||||
<div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-2xl">ℹ️</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-blue-400 mb-2">Database Connection Required</h3>
|
||||
<p class="text-sm text-gray-400 mb-3">
|
||||
This page will display posts from the <code class="px-2 py-1 bg-obsidian rounded text-gold-500">posts</code> table
|
||||
filtered by generated content (linked via <code class="px-2 py-1 bg-obsidian rounded text-gold-500">variation_registry</code>).
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
<strong>API Endpoint:</strong> <code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/posts?type=generated</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
|
||||
<script>
|
||||
// Placeholder for future DB connection
|
||||
async function loadGeneratedArticles() {
|
||||
try {
|
||||
const response = await fetch('/api/posts?type=generated');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
// Update UI with real data
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('API not yet implemented');
|
||||
}
|
||||
}
|
||||
|
||||
loadGeneratedArticles();
|
||||
</script>
|
||||
51
src/pages/admin/jumpstart-test.astro
Normal file
51
src/pages/admin/jumpstart-test.astro
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
---
|
||||
|
||||
<AdminLayout title="Jumpstart Test">
|
||||
<div class="space-y-8">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gold-500 mb-2">🚀 Jumpstart Test</h1>
|
||||
<p class="text-gray-400">Test and validate Jumpstart site deployment wizard</p>
|
||||
</div>
|
||||
|
||||
<!-- Test Status -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-8">
|
||||
<div class="text-center py-12">
|
||||
<div class="text-6xl mb-4">🧪</div>
|
||||
<h2 class="text-2xl font-bold text-gold-500 mb-4">Jumpstart Testing Suite</h2>
|
||||
<p class="text-gray-400 mb-8 max-w-2xl mx-auto">
|
||||
This page will test the Jumpstart wizard functionality including template selection,
|
||||
configuration, and rapid deployment to production.
|
||||
</p>
|
||||
|
||||
<div class="inline-block bg-blue-500/20 border border-blue-500/50 rounded-lg px-6 py-3 mb-6">
|
||||
<p class="text-blue-400 font-semibold">🔨 Under Construction</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 max-w-md mx-auto text-left">
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<h3 class="font-semibold text-gold-500 mb-2">Planned Features</h3>
|
||||
<ul class="text-sm text-gray-400 space-y-2">
|
||||
<li>✓ Template library browser</li>
|
||||
<li>✓ Configuration wizard</li>
|
||||
<li>✓ DNS verification</li>
|
||||
<li>✓ Deployment validation</li>
|
||||
<li>✓ Health check monitoring</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<a href="/admin/sites/jumpstart" class="flex-1 px-4 py-3 bg-gray-700 hover:bg-gray-600 text-white font-semibold rounded-lg text-center transition-all">
|
||||
Jumpstart Page →
|
||||
</a>
|
||||
<a href="/admin" class="flex-1 px-4 py-3 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg text-center transition-all">
|
||||
Mission Control
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
146
src/pages/admin/sites-deployments.astro
Normal file
146
src/pages/admin/sites-deployments.astro
Normal file
@@ -0,0 +1,146 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
---
|
||||
|
||||
<AdminLayout title="Sites & Deployments">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gold-500 mb-2">🚀 Sites & Deployments</h1>
|
||||
<p class="text-gray-400">Manage site deployments and monitor deployment status</p>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Total Sites</div>
|
||||
<div class="text-3xl font-bold text-gold-500">0</div>
|
||||
</div>
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Live</div>
|
||||
<div class="text-3xl font-bold text-green-400">0</div>
|
||||
</div>
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Deploying</div>
|
||||
<div class="text-3xl font-bold text-blue-400">0</div>
|
||||
</div>
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="text-sm text-gray-400 mb-1">Failed</div>
|
||||
<div class="text-3xl font-bold text-red-400">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deployments Table -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl overflow-hidden">
|
||||
<div class="p-6 border-b border-edge-subtle flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-gold-500">Recent Deployments</h2>
|
||||
<a href="/admin/sites/jumpstart" class="px-4 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
|
||||
New Deployment
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-obsidian border-b border-edge-subtle">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Site</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Domain</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Status</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Last Deploy</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Health</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-edge-subtle">
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-12 text-center text-gray-500">
|
||||
<div class="text-4xl mb-2">🌐</div>
|
||||
<p>No deployments yet. Use Jumpstart to deploy your first site.</p>
|
||||
<a href="/admin/sites/jumpstart" class="inline-block mt-4 px-6 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
|
||||
Launch Jumpstart
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deployment Services -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<h2 class="text-2xl font-bold text-gold-500 mb-6">🔧 Deployment Services</h2>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="text-2xl">☁️</div>
|
||||
<h3 class="font-semibold text-gold-500">Coolify</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-sm text-green-400">Connected</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="text-2xl">🔌</div>
|
||||
<h3 class="font-semibold text-gold-500">DNS Provider</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-400"></div>
|
||||
<span class="text-sm text-yellow-400">Not Configured</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="text-2xl">🔒</div>
|
||||
<h3 class="font-semibold text-gold-500">SSL Certificates</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-sm text-green-400">Auto-Provision</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Implementation Note -->
|
||||
<div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-2xl">ℹ️</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-blue-400 mb-2">Database & API Connection Required</h3>
|
||||
<p class="text-sm text-gray-400 mb-3">
|
||||
This page will fetch deployment data from the <code class="px-2 py-1 bg-obsidian rounded text-gold-500">sites</code> table
|
||||
and deployment history from a <code class="px-2 py-1 bg-obsidian rounded text-gold-500">deployments</code> table.
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
<strong>API Endpoints:</strong>
|
||||
</p>
|
||||
<ul class="text-sm text-gray-400 space-y-1 list-disc list-inside mt-2">
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/sites</code></li>
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/deployments</code></li>
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">POST /api/deployments/trigger</code></li>
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/deployments/:id/status</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
|
||||
<script>
|
||||
async function loadDeployments() {
|
||||
try {
|
||||
const response = await fetch('/api/deployments');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
// Update UI with real deployment data
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('Deployments API not yet implemented');
|
||||
}
|
||||
}
|
||||
|
||||
loadDeployments();
|
||||
</script>
|
||||
212
src/pages/admin/substation-status.astro
Normal file
212
src/pages/admin/substation-status.astro
Normal file
@@ -0,0 +1,212 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
---
|
||||
|
||||
<AdminLayout title="Sub-Station Status">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gold-500 mb-2">🎛️ Sub-Station Status</h1>
|
||||
<p class="text-gray-400">Monitor all system sub-stations and services</p>
|
||||
</div>
|
||||
|
||||
<!-- Status Overview -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Intelligence Station -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-3xl">🧠</div>
|
||||
<h3 class="text-xl font-bold text-gold-500">Intelligence Station</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-semibold">ACTIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">Avatar Engine</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-xs text-green-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">12 avatars loaded</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">Geo Intelligence</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-xs text-green-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">5,234 locations indexed</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">Pattern Analyzer</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-xs text-green-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">28 active patterns</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Production Station -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-3xl">⚡</div>
|
||||
<h3 class="text-xl font-bold text-gold-500">Production Station</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-semibold">ACTIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">Content Generator</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-xs text-green-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">Worker idle, ready</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">BullMQ Worker</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-xs text-green-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">0 jobs in queue</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">Spintax Engine</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-xs text-green-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">Ready for processing</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WordPress Ignition -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-3xl">🔌</div>
|
||||
<h3 class="text-xl font-bold text-gold-500">WordPress Ignition</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm font-semibold">STANDBY</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">WP Connection</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-xs text-green-400">Ready</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">Not configured</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-400">Sync Engine</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-gray-500"></div>
|
||||
<span class="text-xs text-gray-500">Idle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">No active syncs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Services -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<h2 class="text-2xl font-bold text-gold-500 mb-6">🔧 Core Services</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="text-sm text-gray-400 mb-2">Core API</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-green-400 font-semibold">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="text-sm text-gray-400 mb-2">Database</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-green-400 font-semibold">Connected</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="text-sm text-gray-400 mb-2">Redis Queue</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-green-400 font-semibold">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
|
||||
<div class="text-sm text-gray-400 mb-2">Astro Server</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
<span class="text-green-400 font-semibold">Running</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Implementation Note -->
|
||||
<div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-2xl">ℹ️</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-blue-400 mb-2">Real-Time Status API Required</h3>
|
||||
<p class="text-sm text-gray-400 mb-3">
|
||||
This page requires health check endpoints for each service.
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
<strong>API Endpoints:</strong>
|
||||
</p>
|
||||
<ul class="text-sm text-gray-400 space-y-1 list-disc list-inside mt-2">
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/health/intelligence</code></li>
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/health/production</code></li>
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/health/wordpress</code></li>
|
||||
<li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/health/core</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
|
||||
<script>
|
||||
// Placeholder for health check polling
|
||||
async function pollHealthStatus() {
|
||||
// Will poll health endpoints every 5 seconds
|
||||
console.log('Health check polling placeholder');
|
||||
}
|
||||
|
||||
setInterval(pollHealthStatus, 5000);
|
||||
</script>
|
||||
85
src/pages/admin/system-logs.astro
Normal file
85
src/pages/admin/system-logs.astro
Normal file
@@ -0,0 +1,85 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
---
|
||||
|
||||
<AdminLayout title="System Logs">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gold-500 mb-2">📋 System Logs</h1>
|
||||
<p class="text-gray-400">Real-time system activity and event monitoring</p>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl p-6">
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<select class="bg-obsidian border border-edge-subtle rounded-lg px-4 py-2 text-white">
|
||||
<option>All Levels</option>
|
||||
<option>Info</option>
|
||||
<option>Warning</option>
|
||||
<option>Error</option>
|
||||
</select>
|
||||
<select class="bg-obsidian border border-edge-subtle rounded-lg px-4 py-2 text-white">
|
||||
<option>All Sources</option>
|
||||
<option>API</option>
|
||||
<option>Worker</option>
|
||||
<option>Database</option>
|
||||
</select>
|
||||
<input type="datetime-local" class="bg-obsidian border border-edge-subtle rounded-lg px-4 py-2 text-white" />
|
||||
<button class="px-4 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Stream -->
|
||||
<div class="bg-titanium border border-edge-normal rounded-xl overflow-hidden">
|
||||
<div class="p-6 border-b border-edge-subtle flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-gold-500">Live Log Stream</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
|
||||
<span class="text-sm text-green-400">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="logContainer" class="bg-obsidian p-6 font-mono text-sm max-h-[600px] overflow-y-auto">
|
||||
<div class="space-y-2">
|
||||
<div class="text-gray-500">[2025-12-15 02:00:00] INFO: System initialized</div>
|
||||
<div class="text-blue-400">[2025-12-15 02:00:05] INFO: Database connected</div>
|
||||
<div class="text-green-400">[2025-12-15 02:00:10] INFO: Worker started</div>
|
||||
<div class="text-gray-500">[2025-12-15 02:00:15] INFO: Redis connection established</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Implementation Note -->
|
||||
<div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-2xl">ℹ️</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-blue-400 mb-2">API Integration Required</h3>
|
||||
<p class="text-sm text-gray-400 mb-3">
|
||||
This page requires a logging API endpoint to stream real-time logs. Logs can be stored in:
|
||||
</p>
|
||||
<ul class="text-sm text-gray-400 space-y-1 list-disc list-inside">
|
||||
<li>Database table: <code class="px-2 py-1 bg-obsidian rounded text-gold-500">system_logs</code></li>
|
||||
<li>File-based logging (Winston, Pino)</li>
|
||||
<li>External service (Datadog, Logstash)</li>
|
||||
</ul>
|
||||
<p class="text-sm text-gray-400 mt-3">
|
||||
<strong>API Endpoint:</strong> <code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/logs?level=&source=&after=</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
|
||||
<script>
|
||||
// Placeholder for WebSocket log streaming
|
||||
function connectLogStream() {
|
||||
// Will connect to WebSocket for real-time logs
|
||||
console.log('Log streaming placeholder');
|
||||
}
|
||||
|
||||
connectLogStream();
|
||||
</script>
|
||||
Reference in New Issue
Block a user