Merge branch 'feat/web-interface-expansion-mockup' into main
This commit is contained in:
syntaxbullet
@@ -56,12 +56,41 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
// We can optionally verify if client clock is drifting, but let's keep it simple.
|
||||
} else if (msg.type === "WELCOME") {
|
||||
console.log(msg.message);
|
||||
} else if (msg.type === "LOG") {
|
||||
appendToActivityFeed(msg.data);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("WS Parse Error", e);
|
||||
}
|
||||
};
|
||||
|
||||
function appendToActivityFeed(log) {
|
||||
const list = document.querySelector(".activity-feed");
|
||||
if (!list) return;
|
||||
|
||||
const item = document.createElement("li");
|
||||
item.className = `activity-item ${log.type}`;
|
||||
|
||||
const timeSpan = document.createElement("span");
|
||||
timeSpan.className = "time";
|
||||
timeSpan.textContent = log.timestamp;
|
||||
|
||||
const messageSpan = document.createElement("span");
|
||||
messageSpan.className = "message";
|
||||
messageSpan.textContent = log.message;
|
||||
|
||||
item.appendChild(timeSpan);
|
||||
item.appendChild(messageSpan);
|
||||
|
||||
// Prepend to top
|
||||
list.insertBefore(item, list.firstChild);
|
||||
|
||||
// Limit history
|
||||
if (list.children.length > 50) {
|
||||
list.removeChild(list.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("WS Disconnected");
|
||||
if (statusIndicator) statusIndicator.classList.remove("online");
|
||||
|
||||
@@ -455,4 +455,153 @@ header nav a:hover::after {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Dashboard Layout */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-card .stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
.dashboard-main {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel.control-panel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Activity Feed */
|
||||
.activity-feed {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.activity-item .time {
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.activity-item.info .message { color: var(--text-main); }
|
||||
.activity-item.success .message { color: hsl(150, 60%, 45%); }
|
||||
.activity-item.warning .message { color: hsl(35, 90%, 60%); }
|
||||
.activity-item.error .message { color: hsl(0, 80%, 60%); }
|
||||
|
||||
.badge.live {
|
||||
background: hsla(0, 100%, 50%, 0.2);
|
||||
color: hsl(0, 100%, 60%);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Mock Chart */
|
||||
.mock-chart-container {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
padding-top: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mock-chart-bar {
|
||||
flex: 1;
|
||||
background: var(--primary);
|
||||
opacity: 0.5;
|
||||
border-radius: 2px 2px 0 0;
|
||||
transition: height 0.5s ease;
|
||||
}
|
||||
|
||||
.mock-chart-bar:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.metrics-legend {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Responsive Dashboard */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr 1fr; /* 2 columns on tablet/mobile */
|
||||
}
|
||||
|
||||
.dashboard-main {
|
||||
grid-template-columns: 1fr; /* Stack panels */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,6 +13,13 @@ describe("Web Router", () => {
|
||||
expect(text).toContain('id="uptime-display"');
|
||||
});
|
||||
|
||||
it("should return dashboard page on /dashboard", async () => {
|
||||
const req = new Request("http://localhost/dashboard");
|
||||
const res = await router(req);
|
||||
expect(res.status).toBe(200);
|
||||
expect(await res.text()).toContain("Live Activity");
|
||||
});
|
||||
|
||||
it("should return health check on /health", async () => {
|
||||
const req = new Request("http://localhost/health");
|
||||
const res = await router(req);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { homeRoute } from "./routes/home";
|
||||
import { healthRoute } from "./routes/health";
|
||||
import { dashboardRoute } from "./routes/dashboard";
|
||||
import { file } from "bun";
|
||||
import { join, resolve } from "path";
|
||||
|
||||
@@ -19,12 +20,6 @@ export async function router(request: Request): Promise<Response> {
|
||||
const relativePath = url.pathname.replace(/^\/public/, "");
|
||||
|
||||
// Resolve full path
|
||||
// We use join with relativePath. If relativePath starts with /, join handles it correctly
|
||||
// effectively treating it as a segment.
|
||||
// However, to be extra safe with 'resolve', we ensure we are resolving from publicDir.
|
||||
// simple join(publicDir, relativePath) is usually enough with 'bun'.
|
||||
// But we use 'resolve' to handle .. segments correctly.
|
||||
// We prepend '.' to relativePath to ensure it's treated as relative to publicDir logic
|
||||
const normalizedRelative = relativePath.startsWith("/") ? "." + relativePath : relativePath;
|
||||
const requestedPath = resolve(publicDir, normalizedRelative);
|
||||
|
||||
@@ -35,8 +30,6 @@ export async function router(request: Request): Promise<Response> {
|
||||
return new Response(staticFile);
|
||||
}
|
||||
} else {
|
||||
// If path traversal detected, return 403 or 404.
|
||||
// 403 indicates we caught them.
|
||||
return new Response("Forbidden", { status: 403 });
|
||||
}
|
||||
}
|
||||
@@ -47,6 +40,9 @@ export async function router(request: Request): Promise<Response> {
|
||||
if (url.pathname === "/health") {
|
||||
return healthRoute();
|
||||
}
|
||||
if (url.pathname === "/dashboard") {
|
||||
return dashboardRoute();
|
||||
}
|
||||
}
|
||||
|
||||
return new Response("Not Found", { status: 404 });
|
||||
|
||||
95
src/web/routes/dashboard.ts
Normal file
95
src/web/routes/dashboard.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { BaseLayout } from "../views/layout";
|
||||
import { AuroraClient } from "@/lib/BotClient";
|
||||
|
||||
export function dashboardRoute(): Response {
|
||||
// Gather real data where possible, mock where not
|
||||
const guildCount = AuroraClient.guilds.cache.size;
|
||||
const userCount = AuroraClient.guilds.cache.reduce((acc, guild) => acc + guild.memberCount, 0); // Approximation
|
||||
const commandCount = AuroraClient.commands.size;
|
||||
const ping = AuroraClient.ws.ping;
|
||||
|
||||
// In a real app, these would be dynamic charts or lists
|
||||
const mockedActivity = [
|
||||
{ time: "10:42:01", type: "info", message: "User 'Syntax' ran /profile" },
|
||||
{ time: "10:41:55", type: "success", message: "Task 'HourlyCleanup' completed" },
|
||||
{ time: "10:40:12", type: "warning", message: "API Latency spike detected (150ms)" },
|
||||
{ time: "10:39:00", type: "info", message: "Bot connected to Gateway" },
|
||||
];
|
||||
|
||||
const content = `
|
||||
<div class="dashboard-grid">
|
||||
<!-- Top Stats Row -->
|
||||
<div class="stat-card">
|
||||
<h3>Servers</h3>
|
||||
<div class="stat-value">${guildCount}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Users</h3>
|
||||
<div class="stat-value">${userCount}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Commands</h3>
|
||||
<div class="stat-value">${commandCount}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Ping</h3>
|
||||
<div class="stat-value">${ping < 0 ? "?" : ping}ms</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="dashboard-main">
|
||||
<div class="panel activity-panel">
|
||||
<div class="panel-header">
|
||||
<h2>Live Activity</h2>
|
||||
<span class="badge live">LIVE</span>
|
||||
</div>
|
||||
<ul class="activity-feed">
|
||||
${mockedActivity.map(log => `
|
||||
<li class="activity-item ${log.type}">
|
||||
<span class="time">${log.time}</span>
|
||||
<span class="message">${log.message}</span>
|
||||
</li>
|
||||
`).join('')}
|
||||
<li class="activity-item info"><span class="time">--:--:--</span> <span class="message">Waiting for events...</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panel metrics-panel">
|
||||
<div class="panel-header">
|
||||
<h2>System Metrics</h2>
|
||||
</div>
|
||||
<div class="mock-chart-container">
|
||||
<div class="mock-chart-bar" style="height: 40%"></div>
|
||||
<div class="mock-chart-bar" style="height: 60%"></div>
|
||||
<div class="mock-chart-bar" style="height: 30%"></div>
|
||||
<div class="mock-chart-bar" style="height: 80%"></div>
|
||||
<div class="mock-chart-bar" style="height: 50%"></div>
|
||||
<div class="mock-chart-bar" style="height: 90%"></div>
|
||||
<div class="mock-chart-bar" style="height: 45%"></div>
|
||||
</div>
|
||||
<div class="metrics-legend">
|
||||
<span>CPU Load (Mock)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Control Panel -->
|
||||
<div class="panel control-panel">
|
||||
<div class="panel-header">
|
||||
<h2>Quick Actions</h2>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-secondary" disabled>Clear Cache</button>
|
||||
<button class="btn btn-secondary" disabled>Reload Commands</button>
|
||||
<button class="btn btn-danger" disabled>Restart Bot</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const html = BaseLayout({ title: "Dashboard", content });
|
||||
|
||||
return new Response(html, {
|
||||
headers: { "Content-Type": "text/html" },
|
||||
});
|
||||
}
|
||||
@@ -65,7 +65,21 @@ export class WebServer {
|
||||
this.server = null;
|
||||
}
|
||||
}
|
||||
|
||||
public static get port(): number | undefined {
|
||||
return this.server?.port;
|
||||
}
|
||||
|
||||
public static broadcastLog(type: string, message: string) {
|
||||
if (this.server) {
|
||||
this.server.publish("status-updates", JSON.stringify({
|
||||
type: "LOG",
|
||||
data: {
|
||||
timestamp: new Date().toLocaleTimeString(),
|
||||
type,
|
||||
message
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@ export function BaseLayout({ title, content }: LayoutProps): string {
|
||||
<h1>Aurora Web</h1>
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/dashboard">Dashboard</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
Reference in New Issue
Block a user