Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f9a8b61743 | |||
| ffad23e6cf | |||
| cb429b1f5f | |||
| c4e0e9b915 | |||
| 8bb4814350 | |||
| 9c7e17bdbb |
33
changelog.md
33
changelog.md
@@ -1,5 +1,38 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-04 - 7.3.0 - feat(serviceworker)
|
||||
Modernize SW dashboard UI and improve service worker backend and server tooling
|
||||
|
||||
- Revamped sw-dash UI: new header/logo, uptime badge, live auto-refresh indicator, reorganized panels and improved speedtest UI and controls
|
||||
- Shared styles overhaul: new theming variables, spacing scale, badges, refined progress/pulse animations and cleaner typography
|
||||
- Dashboard internals: metrics endpoint and SPA shell updated; Lit bundle loading and table sort icon changed to ↑/↓
|
||||
- Service worker: added request deduplication (in-flight request coalescing), safer caching logic, consistent CORS/caching headers, and cache revalidation
|
||||
- Metrics: richer MetricsCollector with per-resource tracking, domain/content-type stats, speedtest metrics and better summary/stat helpers
|
||||
- Update & network managers: rate-limited update checks, debounced update/revalidation tasks, online/offline checks and improved retry/backoff logic
|
||||
- TypedServer & tooling: addRoute API for custom routes, improved HTML reload script injection, TypedSocket integration and a backend speedtest handler
|
||||
- servertools: improved static/proxy handlers (more robust path extraction, compression handling) and deprecation notice for addTypedSocket()
|
||||
|
||||
## 2025-12-04 - 7.2.0 - feat(serviceworker)
|
||||
Add service worker status updates, EventBus and UI status pill for realtime observability
|
||||
|
||||
- Introduce a status update protocol for service worker <-> clients (IStatusUpdate, IMessage_Serviceworker_StatusUpdate, IRequest_Serviceworker_GetStatus).
|
||||
- Add typedserver-statuspill Lit component to display backend/serviceworker/network status in the UI, with expand/collapse details and persistent/error states.
|
||||
- Wire ReloadChecker to use the new status pill: show network/backend/serviceworker status, handle online/offline events, and subscribe to service worker status broadcasts.
|
||||
- Extend ActionManager (client) with subscribeToStatusUpdates and getServiceWorkerStatus helpers; forward serviceworker_statusUpdate broadcasts to registered callbacks.
|
||||
- Serviceworker backend: add serviceworker_getStatus handler and broadcastStatusUpdate API; subscribe to EventBus lifecycle/network/update events to broadcast status changes to clients.
|
||||
- Add EventBus for decoupled service worker internal events (ServiceWorkerEvent enum, pub/sub API, history and convenience emitters).
|
||||
- Ensure proper subscribe/unsubscribe lifecycle (ReloadChecker stops SW subscription on stop).
|
||||
- Improve cache/connection status reporting integration so status updates include details like cacheHitRate, resourceCount and connected clients.
|
||||
|
||||
## 2025-12-04 - 7.1.0 - feat(swdash)
|
||||
Add live speedtest progress UI to service worker dashboard
|
||||
|
||||
- Introduce reactive speedtest state (phase, progress, elapsed) in sw-dash-overview component
|
||||
- Start a progress interval to animate overall test progress and estimate phases (latency, download, upload)
|
||||
- Dispatch 'speedtest-complete' event and show a brief complete state before resetting UI
|
||||
- Add helper methods for phase labels and elapsed time formatting
|
||||
- Add CSS for progress bar, shimmer animation and phase pulse to sw-dash-styles
|
||||
|
||||
## 2025-12-04 - 7.0.0 - BREAKING CHANGE(serviceworker)
|
||||
Move serviceworker speedtest to time-based chunked transfers and update dashboard/server contract
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@api.global/typedserver",
|
||||
"version": "7.0.0",
|
||||
"version": "7.3.0",
|
||||
"description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@api.global/typedserver',
|
||||
version: '7.0.0',
|
||||
version: '7.3.0',
|
||||
description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
|
||||
}
|
||||
|
||||
@@ -240,4 +240,77 @@ export interface IRequest_Serviceworker_Speedtest
|
||||
timestamp: number;
|
||||
payload?: string; // For download_chunk, the data received
|
||||
};
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Status update interfaces
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Status update source types
|
||||
*/
|
||||
export type TStatusSource = 'backend' | 'serviceworker' | 'network';
|
||||
|
||||
/**
|
||||
* Status update event types
|
||||
*/
|
||||
export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
|
||||
|
||||
/**
|
||||
* Status update details
|
||||
*/
|
||||
export interface IStatusDetails {
|
||||
version?: string;
|
||||
cacheHitRate?: number;
|
||||
resourceCount?: number;
|
||||
connectionType?: string;
|
||||
latencyMs?: number;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Status update payload sent from SW to clients
|
||||
*/
|
||||
export interface IStatusUpdate {
|
||||
source: TStatusSource;
|
||||
type: TStatusType;
|
||||
message: string;
|
||||
details?: IStatusDetails;
|
||||
persist?: boolean; // Stay visible until resolved
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Message for status updates from service worker to clients
|
||||
*/
|
||||
export interface IMessage_Serviceworker_StatusUpdate
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_StatusUpdate
|
||||
> {
|
||||
method: 'serviceworker_statusUpdate';
|
||||
request: IStatusUpdate;
|
||||
response: {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Request to get current service worker status
|
||||
*/
|
||||
export interface IRequest_Serviceworker_GetStatus
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_GetStatus
|
||||
> {
|
||||
method: 'serviceworker_getStatus';
|
||||
request: {};
|
||||
response: {
|
||||
isActive: boolean;
|
||||
isOnline: boolean;
|
||||
version?: string;
|
||||
cacheHitRate: number;
|
||||
resourceCount: number;
|
||||
connectionType?: string;
|
||||
connectedClients: number;
|
||||
lastUpdateCheck: number;
|
||||
};
|
||||
}
|
||||
@@ -34,9 +34,9 @@ export class SwDashApp extends LitElement {
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: var(--sw-bg-dark);
|
||||
background: var(--bg-primary);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.view {
|
||||
@@ -46,6 +46,81 @@ export class SwDashApp extends LitElement {
|
||||
.view.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--accent-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.uptime-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.uptime-badge .value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.auto-refresh {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--accent-success);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auto-refresh .dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@@ -127,8 +202,13 @@ export class SwDashApp extends LitElement {
|
||||
return html`
|
||||
<div class="terminal">
|
||||
<div class="header">
|
||||
<span class="title">[SW-DASH] Service Worker Dashboard</span>
|
||||
<span class="uptime">Uptime: ${this.metrics ? this.formatUptime(this.metrics.uptime) : '...'}</span>
|
||||
<div class="header-left">
|
||||
<div class="logo">SW</div>
|
||||
<span class="title">Service Worker Dashboard</span>
|
||||
</div>
|
||||
<div class="uptime-badge">
|
||||
Uptime: <span class="value">${this.metrics ? this.formatUptime(this.metrics.uptime) : '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
@@ -172,12 +252,14 @@ export class SwDashApp extends LitElement {
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span class="refresh-info">
|
||||
<span class="prompt">$</span> Last refresh: ${this.lastRefresh}<span class="cursor"></span>
|
||||
</span>
|
||||
<div class="status">
|
||||
<span class="status-dot"></span>
|
||||
<span>Auto-refresh: 2s</span>
|
||||
<div class="footer-left">
|
||||
Last updated: ${this.lastRefresh}
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<div class="auto-refresh">
|
||||
<span class="dot"></span>
|
||||
Live
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -65,20 +65,61 @@ export class SwDashOverview extends LitElement {
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin-top: var(--space-4);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border-muted);
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Object }) accessor metrics: IMetricsData | null = null;
|
||||
@state() accessor speedtestRunning = false;
|
||||
@state() accessor speedtestPhase: 'idle' | 'latency' | 'download' | 'upload' | 'complete' = 'idle';
|
||||
@state() accessor speedtestProgress = 0;
|
||||
@state() accessor speedtestElapsed = 0;
|
||||
|
||||
// Speedtest timing constants (must match service worker)
|
||||
private static readonly TEST_DURATION_MS = 5000; // 5 seconds per test
|
||||
private progressInterval: number | null = null;
|
||||
|
||||
private async runSpeedtest(): Promise<void> {
|
||||
if (this.speedtestRunning) return;
|
||||
this.speedtestRunning = true;
|
||||
this.speedtestPhase = 'latency';
|
||||
this.speedtestProgress = 0;
|
||||
this.speedtestElapsed = 0;
|
||||
|
||||
// Start progress animation (total ~10.5s: latency ~0.5s + 5s download + 5s upload)
|
||||
const totalEstimatedMs = 10500;
|
||||
const startTime = Date.now();
|
||||
|
||||
this.progressInterval = window.setInterval(() => {
|
||||
this.speedtestElapsed = Date.now() - startTime;
|
||||
this.speedtestProgress = Math.min(100, (this.speedtestElapsed / totalEstimatedMs) * 100);
|
||||
|
||||
// Estimate phase based on elapsed time
|
||||
if (this.speedtestElapsed < 500) {
|
||||
this.speedtestPhase = 'latency';
|
||||
} else if (this.speedtestElapsed < 5500) {
|
||||
this.speedtestPhase = 'download';
|
||||
} else {
|
||||
this.speedtestPhase = 'upload';
|
||||
}
|
||||
}, 100);
|
||||
|
||||
try {
|
||||
const response = await fetch('/sw-dash/speedtest');
|
||||
const result = await response.json();
|
||||
|
||||
this.speedtestPhase = 'complete';
|
||||
this.speedtestProgress = 100;
|
||||
|
||||
// Dispatch event to parent to update metrics
|
||||
this.dispatchEvent(new CustomEvent('speedtest-complete', {
|
||||
detail: result,
|
||||
@@ -87,14 +128,39 @@ export class SwDashOverview extends LitElement {
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Speedtest failed:', err);
|
||||
this.speedtestPhase = 'idle';
|
||||
} finally {
|
||||
this.speedtestRunning = false;
|
||||
if (this.progressInterval) {
|
||||
window.clearInterval(this.progressInterval);
|
||||
this.progressInterval = null;
|
||||
}
|
||||
// Keep showing complete state briefly, then reset
|
||||
setTimeout(() => {
|
||||
this.speedtestRunning = false;
|
||||
this.speedtestPhase = 'idle';
|
||||
this.speedtestProgress = 0;
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
private getPhaseLabel(): string {
|
||||
switch (this.speedtestPhase) {
|
||||
case 'latency': return 'Testing latency';
|
||||
case 'download': return 'Download test';
|
||||
case 'upload': return 'Upload test';
|
||||
case 'complete': return 'Complete';
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
private formatElapsed(): string {
|
||||
const seconds = Math.floor(this.speedtestElapsed / 1000);
|
||||
return `${seconds}s`;
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.metrics) {
|
||||
return html`<div class="panel">Loading metrics...</div>`;
|
||||
return html`<div class="panel"><div class="panel-content">Loading metrics...</div></div>`;
|
||||
}
|
||||
|
||||
const m = this.metrics;
|
||||
@@ -104,77 +170,117 @@ export class SwDashOverview extends LitElement {
|
||||
<div class="grid">
|
||||
<!-- Cache Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ CACHE ]</div>
|
||||
<div class="gauge">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${gaugeClass(m.cacheHitRate)}" style="width: ${m.cacheHitRate}%"></div>
|
||||
<span class="gauge-text">${m.cacheHitRate}% hit rate</span>
|
||||
<div class="panel-title">Cache</div>
|
||||
<div class="panel-content">
|
||||
<div class="gauge">
|
||||
<div class="gauge-header">
|
||||
<span class="gauge-label">Hit Rate</span>
|
||||
<span class="gauge-value">${m.cacheHitRate}%</span>
|
||||
</div>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${gaugeClass(m.cacheHitRate)}" style="width: ${m.cacheHitRate}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Hits</span><span class="value success">${SwDashTable.formatNumber(m.cache.hits)}</span></div>
|
||||
<div class="row"><span class="label">Misses</span><span class="value warning">${SwDashTable.formatNumber(m.cache.misses)}</span></div>
|
||||
<div class="row"><span class="label">Errors</span><span class="value ${m.cache.errors > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.cache.errors)}</span></div>
|
||||
<div class="row"><span class="label">From Cache</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesServedFromCache)}</span></div>
|
||||
<div class="row"><span class="label">Fetched</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesFetched)}</span></div>
|
||||
<div class="row"><span class="label">Resources</span><span class="value">${m.resourceCount}</span></div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Hits:</span><span class="value success">${SwDashTable.formatNumber(m.cache.hits)}</span></div>
|
||||
<div class="row"><span class="label">Misses:</span><span class="value warning">${SwDashTable.formatNumber(m.cache.misses)}</span></div>
|
||||
<div class="row"><span class="label">Errors:</span><span class="value ${m.cache.errors > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.cache.errors)}</span></div>
|
||||
<div class="row"><span class="label">From Cache:</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesServedFromCache)}</span></div>
|
||||
<div class="row"><span class="label">Fetched:</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesFetched)}</span></div>
|
||||
<div class="row"><span class="label">Resources:</span><span class="value">${m.resourceCount}</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Network Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ NETWORK ]</div>
|
||||
<div class="gauge">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${gaugeClass(m.networkSuccessRate)}" style="width: ${m.networkSuccessRate}%"></div>
|
||||
<span class="gauge-text">${m.networkSuccessRate}% success</span>
|
||||
<div class="panel-title">Network</div>
|
||||
<div class="panel-content">
|
||||
<div class="gauge">
|
||||
<div class="gauge-header">
|
||||
<span class="gauge-label">Success Rate</span>
|
||||
<span class="gauge-value">${m.networkSuccessRate}%</span>
|
||||
</div>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${gaugeClass(m.networkSuccessRate)}" style="width: ${m.networkSuccessRate}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Total Requests</span><span class="value">${SwDashTable.formatNumber(m.network.totalRequests)}</span></div>
|
||||
<div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.network.successfulRequests)}</span></div>
|
||||
<div class="row"><span class="label">Failed</span><span class="value ${m.network.failedRequests > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.network.failedRequests)}</span></div>
|
||||
<div class="row"><span class="label">Timeouts</span><span class="value ${m.network.timeouts > 0 ? 'warning' : ''}">${SwDashTable.formatNumber(m.network.timeouts)}</span></div>
|
||||
<div class="row"><span class="label">Avg Latency</span><span class="value">${m.network.averageLatency}ms</span></div>
|
||||
<div class="row"><span class="label">Transferred</span><span class="value">${SwDashTable.formatBytes(m.network.totalBytesTransferred)}</span></div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Total Requests:</span><span class="value">${SwDashTable.formatNumber(m.network.totalRequests)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.network.successfulRequests)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${m.network.failedRequests > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.network.failedRequests)}</span></div>
|
||||
<div class="row"><span class="label">Timeouts:</span><span class="value ${m.network.timeouts > 0 ? 'warning' : ''}">${SwDashTable.formatNumber(m.network.timeouts)}</span></div>
|
||||
<div class="row"><span class="label">Avg Latency:</span><span class="value">${m.network.averageLatency}ms</span></div>
|
||||
<div class="row"><span class="label">Transferred:</span><span class="value">${SwDashTable.formatBytes(m.network.totalBytesTransferred)}</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Updates Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ UPDATES ]</div>
|
||||
<div class="row"><span class="label">Total Checks:</span><span class="value">${SwDashTable.formatNumber(m.update.totalChecks)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.update.successfulChecks)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${m.update.failedChecks > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.update.failedChecks)}</span></div>
|
||||
<div class="row"><span class="label">Updates Found:</span><span class="value">${SwDashTable.formatNumber(m.update.updatesFound)}</span></div>
|
||||
<div class="row"><span class="label">Updates Applied:</span><span class="value success">${SwDashTable.formatNumber(m.update.updatesApplied)}</span></div>
|
||||
<div class="row"><span class="label">Last Check:</span><span class="value">${SwDashTable.formatTimestamp(m.update.lastCheckTimestamp)}</span></div>
|
||||
<div class="panel-title">Updates</div>
|
||||
<div class="panel-content">
|
||||
<div class="row"><span class="label">Total Checks</span><span class="value">${SwDashTable.formatNumber(m.update.totalChecks)}</span></div>
|
||||
<div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.update.successfulChecks)}</span></div>
|
||||
<div class="row"><span class="label">Failed</span><span class="value ${m.update.failedChecks > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.update.failedChecks)}</span></div>
|
||||
<div class="row"><span class="label">Updates Found</span><span class="value">${SwDashTable.formatNumber(m.update.updatesFound)}</span></div>
|
||||
<div class="row"><span class="label">Updates Applied</span><span class="value success">${SwDashTable.formatNumber(m.update.updatesApplied)}</span></div>
|
||||
<div class="row"><span class="label">Last Check</span><span class="value">${SwDashTable.formatTimestamp(m.update.lastCheckTimestamp)}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connections Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ CONNECTIONS ]</div>
|
||||
<div class="row"><span class="label">Active Clients:</span><span class="value success">${SwDashTable.formatNumber(m.connection.connectedClients)}</span></div>
|
||||
<div class="row"><span class="label">Total Attempts:</span><span class="value">${SwDashTable.formatNumber(m.connection.totalConnectionAttempts)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.connection.successfulConnections)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${m.connection.failedConnections > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.connection.failedConnections)}</span></div>
|
||||
<div class="row" style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed var(--sw-border);">
|
||||
<span class="label">Started:</span><span class="value">${SwDashTable.formatTimestamp(m.startTime)}</span>
|
||||
<div class="panel-title">Connections</div>
|
||||
<div class="panel-content">
|
||||
<div class="row"><span class="label">Active Clients</span><span class="value success">${SwDashTable.formatNumber(m.connection.connectedClients)}</span></div>
|
||||
<div class="row"><span class="label">Total Attempts</span><span class="value">${SwDashTable.formatNumber(m.connection.totalConnectionAttempts)}</span></div>
|
||||
<div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.connection.successfulConnections)}</span></div>
|
||||
<div class="row"><span class="label">Failed</span><span class="value ${m.connection.failedConnections > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.connection.failedConnections)}</span></div>
|
||||
<div class="section-divider">
|
||||
<div class="row"><span class="label">Started</span><span class="value">${SwDashTable.formatTimestamp(m.startTime)}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Speedtest Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ SPEEDTEST ]</div>
|
||||
<div class="online-indicator">
|
||||
<span class="online-dot ${m.speedtest.isOnline ? 'online' : 'offline'}"></span>
|
||||
<span class="value ${m.speedtest.isOnline ? 'success' : 'error'}">${m.speedtest.isOnline ? 'Online' : 'Offline'}</span>
|
||||
</div>
|
||||
<div class="row"><span class="label">Download:</span><span class="value">${m.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span></div>
|
||||
<div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastDownloadSpeedMbps, 100)}%"></div></div>
|
||||
<div class="row"><span class="label">Upload:</span><span class="value">${m.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span></div>
|
||||
<div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastUploadSpeedMbps, 100)}%"></div></div>
|
||||
<div class="row"><span class="label">Latency:</span><span class="value">${m.speedtest.lastLatencyMs.toFixed(0)} ms</span></div>
|
||||
<div class="btn-row">
|
||||
<button class="btn" ?disabled="${this.speedtestRunning}" @click="${this.runSpeedtest}">
|
||||
${this.speedtestRunning ? 'Testing...' : 'Run Test'}
|
||||
</button>
|
||||
<div class="panel-title">Speedtest</div>
|
||||
<div class="panel-content">
|
||||
<div class="online-indicator ${m.speedtest.isOnline ? 'online' : 'offline'}">
|
||||
<span class="online-dot"></span>
|
||||
<span>${m.speedtest.isOnline ? 'Online' : 'Offline'}</span>
|
||||
</div>
|
||||
${this.speedtestRunning ? html`
|
||||
<div class="speedtest-progress">
|
||||
<div class="progress-header">
|
||||
<span class="progress-phase">${this.getPhaseLabel()}</span>
|
||||
<span class="progress-time">${this.formatElapsed()}</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill ${this.speedtestPhase === 'complete' ? 'complete' : ''}" style="width: ${this.speedtestProgress}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
` : html`
|
||||
<div class="speedtest-results">
|
||||
<div class="speedtest-metric">
|
||||
<div class="speedtest-value">${m.speedtest.lastDownloadSpeedMbps.toFixed(1)}</div>
|
||||
<div class="speedtest-unit">Mbps</div>
|
||||
<div class="speedtest-label">Download</div>
|
||||
</div>
|
||||
<div class="speedtest-metric">
|
||||
<div class="speedtest-value">${m.speedtest.lastUploadSpeedMbps.toFixed(1)}</div>
|
||||
<div class="speedtest-unit">Mbps</div>
|
||||
<div class="speedtest-label">Upload</div>
|
||||
</div>
|
||||
<div class="speedtest-metric">
|
||||
<div class="speedtest-value">${m.speedtest.lastLatencyMs.toFixed(0)}</div>
|
||||
<div class="speedtest-unit">ms</div>
|
||||
<div class="speedtest-label">Latency</div>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-secondary" ?disabled="${this.speedtestRunning}" @click="${this.runSpeedtest}">
|
||||
${this.speedtestRunning ? 'Testing...' : 'Run Test'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,29 +2,58 @@ import { css } from './plugins.js';
|
||||
import type { CSSResult } from './plugins.js';
|
||||
|
||||
/**
|
||||
* Shared terminal-style theme for sw-dash components
|
||||
* Modern professional theme for sw-dash components
|
||||
* Inspired by Bloomberg terminals, Vercel dashboards, and shadcn/ui
|
||||
*/
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
--sw-bg-dark: #0a0a0a;
|
||||
--sw-bg-panel: #0d0d0d;
|
||||
--sw-bg-header: #111;
|
||||
--sw-bg-input: #1a1a1a;
|
||||
--sw-border: #333;
|
||||
--sw-border-active: #00ff00;
|
||||
--sw-text-primary: #00ff00;
|
||||
--sw-text-secondary: #888;
|
||||
--sw-text-cyan: #00ffff;
|
||||
--sw-text-warning: #ffff00;
|
||||
--sw-text-error: #ff4444;
|
||||
--sw-gauge-good: #00aa00;
|
||||
--sw-gauge-warning: #aaaa00;
|
||||
--sw-gauge-bad: #aa0000;
|
||||
/* Neutral backgrounds - zinc scale */
|
||||
--bg-primary: #09090b;
|
||||
--bg-secondary: #18181b;
|
||||
--bg-tertiary: #27272a;
|
||||
--bg-elevated: #3f3f46;
|
||||
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: var(--sw-text-primary);
|
||||
/* Text colors */
|
||||
--text-primary: #fafafa;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-tertiary: #71717a;
|
||||
|
||||
/* Borders */
|
||||
--border-default: #27272a;
|
||||
--border-muted: #3f3f46;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-success: #22c55e;
|
||||
--accent-warning: #eab308;
|
||||
--accent-error: #ef4444;
|
||||
--accent-info: #06b6d4;
|
||||
|
||||
/* Spacing scale */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -32,123 +61,129 @@ export const terminalStyles: CSSResult = css`
|
||||
.terminal {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid var(--sw-border-active);
|
||||
background: var(--sw-bg-panel);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
|
||||
border: 1px solid var(--border-default);
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--sw-border-active);
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--sw-bg-header);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--sw-text-primary);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.uptime {
|
||||
color: var(--sw-text-secondary);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 15px;
|
||||
padding: var(--space-5);
|
||||
min-height: 400px;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--sw-border-active);
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid var(--border-default);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--sw-bg-header);
|
||||
background: var(--bg-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.refresh-info {
|
||||
color: var(--sw-text-secondary);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--sw-text-primary);
|
||||
animation: pulse 2s infinite;
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
background: var(--accent-error);
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
background: var(--sw-text-primary);
|
||||
animation: blink 1s step-end infinite;
|
||||
vertical-align: middle;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const navStyles: CSSResult = css`
|
||||
.nav {
|
||||
display: flex;
|
||||
background: var(--sw-bg-header);
|
||||
border-bottom: 1px solid var(--sw-border);
|
||||
padding: 0 10px;
|
||||
gap: var(--space-1);
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 20px;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
cursor: pointer;
|
||||
color: var(--sw-text-secondary);
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: var(--sw-text-primary);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
color: var(--sw-text-primary);
|
||||
border-bottom-color: var(--sw-text-primary);
|
||||
background: var(--sw-bg-input);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.nav-tab .count {
|
||||
background: var(--sw-border);
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 18px;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0 6px;
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
margin-left: 6px;
|
||||
font-weight: 500;
|
||||
margin-left: var(--space-2);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.nav-tab.active .count {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -156,137 +191,167 @@ export const panelStyles: CSSResult = css`
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 15px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--sw-border);
|
||||
padding: 12px;
|
||||
background: var(--sw-bg-dark);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--sw-text-cyan);
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dashed var(--sw-border);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 3px 0;
|
||||
align-items: center;
|
||||
padding: var(--space-2) 0;
|
||||
border-bottom: 1px solid var(--border-muted);
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--sw-text-secondary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--sw-text-primary);
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.value.warning {
|
||||
color: var(--sw-text-warning);
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.value.error {
|
||||
color: var(--sw-text-error);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.value.success {
|
||||
color: var(--sw-text-primary);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
`;
|
||||
|
||||
export const gaugeStyles: CSSResult = css`
|
||||
.gauge {
|
||||
margin: 8px 0;
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.gauge-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-2);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.gauge-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.gauge-bar {
|
||||
height: 16px;
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
height: 6px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gauge-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.gauge-fill.good {
|
||||
background: var(--sw-gauge-good);
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
.gauge-fill.warning {
|
||||
background: var(--sw-gauge-warning);
|
||||
background: var(--accent-warning);
|
||||
}
|
||||
|
||||
.gauge-fill.bad {
|
||||
background: var(--sw-gauge-bad);
|
||||
}
|
||||
|
||||
.gauge-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px #000;
|
||||
background: var(--accent-error);
|
||||
}
|
||||
`;
|
||||
|
||||
export const tableStyles: CSSResult = css`
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--sw-border);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: var(--sw-bg-input);
|
||||
color: var(--sw-text-cyan);
|
||||
text-align: left;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.data-table th:hover {
|
||||
background: #252525;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.data-table th .sort-icon {
|
||||
margin-left: 5px;
|
||||
opacity: 0.5;
|
||||
margin-left: var(--space-1);
|
||||
opacity: 0.4;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.data-table th.sorted .sort-icon {
|
||||
opacity: 1;
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background: #151515;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
color: #ccc;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.data-table td.url {
|
||||
@@ -294,83 +359,119 @@ export const tableStyles: CSSResult = css`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-secondary);
|
||||
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table td.num {
|
||||
text-align: right;
|
||||
color: var(--sw-text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
margin-bottom: var(--space-4);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
color: var(--sw-text-primary);
|
||||
padding: 6px 10px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
width: 250px;
|
||||
font-size: 13px;
|
||||
width: 280px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--sw-border-active);
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.table-info {
|
||||
color: var(--sw-text-secondary);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hit-rate-bar {
|
||||
width: 60px;
|
||||
height: 10px;
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
height: 4px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
margin-right: var(--space-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hit-rate-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hit-rate-fill.good {
|
||||
background: var(--sw-gauge-good);
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
.hit-rate-fill.warning {
|
||||
background: var(--sw-gauge-warning);
|
||||
background: var(--accent-warning);
|
||||
}
|
||||
|
||||
.hit-rate-fill.bad {
|
||||
background: var(--sw-gauge-bad);
|
||||
background: var(--accent-error);
|
||||
}
|
||||
`;
|
||||
|
||||
export const buttonStyles: CSSResult = css`
|
||||
.btn {
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border-active);
|
||||
color: var(--sw-text-primary);
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--sw-text-primary);
|
||||
color: #000;
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--border-muted);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
@@ -381,47 +482,186 @@ export const buttonStyles: CSSResult = css`
|
||||
.btn-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
`;
|
||||
|
||||
export const speedtestStyles: CSSResult = css`
|
||||
.online-indicator {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px dashed var(--sw-border);
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.online-indicator.online {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.online-indicator.offline {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.online-dot.online {
|
||||
background: var(--sw-text-primary);
|
||||
box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
|
||||
.speedtest-results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.online-dot.offline {
|
||||
background: var(--sw-text-error);
|
||||
box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
|
||||
.speedtest-metric {
|
||||
text-align: center;
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.speedtest-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.speedtest-unit {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.speedtest-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.speed-bar {
|
||||
height: 8px;
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
margin: 4px 0;
|
||||
height: 4px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 2px;
|
||||
margin: var(--space-1) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.speed-fill {
|
||||
height: 100%;
|
||||
background: var(--sw-gauge-good);
|
||||
background: var(--accent-success);
|
||||
border-radius: 2px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
/* Speedtest progress indicator */
|
||||
.speedtest-progress {
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.progress-phase {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--accent-info);
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.progress-phase::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.progress-time {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent-info);
|
||||
border-radius: 3px;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
.progress-fill.complete {
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
`;
|
||||
|
||||
export const statusBadgeStyles: CSSResult = css`
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.status-badge.warning {
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.status-badge.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.status-badge.info {
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
color: var(--accent-info);
|
||||
}
|
||||
|
||||
.status-badge .badge-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -151,7 +151,7 @@ export class SwDashTable extends LitElement {
|
||||
>
|
||||
${col.label}
|
||||
${col.sortable !== false ? html`
|
||||
<span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '^' : 'v'}</span>
|
||||
<span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '↑' : '↓'}</span>
|
||||
` : ''}
|
||||
</th>
|
||||
`)}
|
||||
|
||||
@@ -3,12 +3,12 @@ import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { logger } from './typedserver_web.logger.js';
|
||||
logger.log('info', `TypedServer-Devtools initialized!`);
|
||||
|
||||
import { TypedserverInfoscreen } from './typedserver_web.infoscreen.js';
|
||||
import { TypedserverStatusPill } from './typedserver_web.statuspill.js';
|
||||
|
||||
export class ReloadChecker {
|
||||
public reloadJustified = false;
|
||||
public backendConnectionLost = false;
|
||||
public infoscreen = new TypedserverInfoscreen();
|
||||
public statusPill = new TypedserverStatusPill();
|
||||
public store = new plugins.webstore.WebStore({
|
||||
dbName: 'apiglobal__typedserver',
|
||||
storeName: 'apiglobal__typedserver',
|
||||
@@ -17,14 +17,90 @@ export class ReloadChecker {
|
||||
|
||||
public typedsocket: plugins.typedsocket.TypedSocket;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
private swStatusUnsubscribe: (() => void) | null = null;
|
||||
|
||||
constructor() {}
|
||||
constructor() {
|
||||
// Listen to browser online/offline events
|
||||
window.addEventListener('online', () => {
|
||||
this.statusPill.updateStatus({
|
||||
source: 'network',
|
||||
type: 'online',
|
||||
message: 'Back online',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('offline', () => {
|
||||
this.statusPill.updateStatus({
|
||||
source: 'network',
|
||||
type: 'offline',
|
||||
message: 'No internet connection',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public async reload() {
|
||||
// this looks a bit hacky, but apparently is the safest way to really reload stuff
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribe to service worker status updates
|
||||
*/
|
||||
public subscribeToServiceWorker(): void {
|
||||
// Check if service worker client is available
|
||||
if (globalThis.globalSw?.actionManager) {
|
||||
this.swStatusUnsubscribe = globalThis.globalSw.actionManager.subscribeToStatusUpdates((status) => {
|
||||
this.statusPill.updateStatus({
|
||||
source: status.source,
|
||||
type: status.type,
|
||||
message: status.message,
|
||||
details: status.details,
|
||||
persist: status.persist || false,
|
||||
timestamp: status.timestamp,
|
||||
});
|
||||
});
|
||||
logger.log('info', 'Subscribed to service worker status updates');
|
||||
|
||||
// Get initial SW status
|
||||
this.fetchServiceWorkerStatus();
|
||||
} else {
|
||||
logger.log('note', 'Service worker client not available yet, will retry...');
|
||||
// Retry after a delay
|
||||
setTimeout(() => this.subscribeToServiceWorker(), 2000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch and display initial service worker status
|
||||
*/
|
||||
private async fetchServiceWorkerStatus(): Promise<void> {
|
||||
if (!globalThis.globalSw?.actionManager) return;
|
||||
|
||||
try {
|
||||
const status = await globalThis.globalSw.actionManager.getServiceWorkerStatus();
|
||||
if (status) {
|
||||
this.statusPill.updateStatus({
|
||||
source: 'serviceworker',
|
||||
type: status.isActive ? 'connected' : 'disconnected',
|
||||
message: status.isActive ? 'Service worker active' : 'Service worker inactive',
|
||||
details: {
|
||||
cacheHitRate: status.cacheHitRate,
|
||||
resourceCount: status.resourceCount,
|
||||
connectionType: status.connectionType,
|
||||
},
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to get SW status: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* starts the reload checker
|
||||
*/
|
||||
@@ -50,11 +126,23 @@ export class ReloadChecker {
|
||||
if (response?.status !== 200) {
|
||||
this.backendConnectionLost = true;
|
||||
logger.log('warn', `got a status ${response?.status}.`);
|
||||
this.infoscreen.setText(`backend connection lost... Status ${response?.status}`);
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: 'disconnected',
|
||||
message: `Backend connection lost (${response?.status || 'timeout'})`,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
if (response?.status === 200 && this.backendConnectionLost) {
|
||||
this.backendConnectionLost = false;
|
||||
this.infoscreen.setSuccess('regained connection to backend...');
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: 'connected',
|
||||
message: 'Backend connection restored',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
return response;
|
||||
}
|
||||
@@ -69,10 +157,15 @@ export class ReloadChecker {
|
||||
|
||||
if (reloadJustified) {
|
||||
this.store.set(this.storeKey, lastServerChange);
|
||||
const reloadText = `upgrading... ${
|
||||
globalThis.globalSw ? '(purging the sw cache first...)' : ''
|
||||
}`;
|
||||
this.infoscreen.setText(reloadText);
|
||||
const hasSw = !!globalThis.globalSw;
|
||||
this.statusPill.updateStatus({
|
||||
source: 'serviceworker',
|
||||
type: 'update',
|
||||
message: hasSw ? 'Updating app...' : 'Upgrading...',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
if (globalThis.globalSw?.purgeCache) {
|
||||
await globalThis.globalSw.purgeCache();
|
||||
} else if ('caches' in window) {
|
||||
@@ -87,14 +180,19 @@ export class ReloadChecker {
|
||||
} else {
|
||||
console.log('globalThis.globalSw not found and Cache API not available...');
|
||||
}
|
||||
this.infoscreen.setText(`cleaned caches`);
|
||||
|
||||
this.statusPill.updateStatus({
|
||||
source: 'serviceworker',
|
||||
type: 'cache',
|
||||
message: 'Cache cleared, reloading...',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
await plugins.smartdelay.delayFor(200);
|
||||
this.reload();
|
||||
return;
|
||||
} else {
|
||||
if (this.infoscreen) {
|
||||
this.infoscreen.hide();
|
||||
}
|
||||
// All good, hide after brief show
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -116,10 +214,22 @@ export class ReloadChecker {
|
||||
console.log(`typedsocket status: ${statusArg}`);
|
||||
if (statusArg === 'disconnected' || statusArg === 'reconnecting') {
|
||||
this.backendConnectionLost = true;
|
||||
this.infoscreen.setText(`typedsocket ${statusArg}!`);
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: statusArg === 'disconnected' ? 'disconnected' : 'reconnecting',
|
||||
message: `TypedSocket ${statusArg}`,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
} else if (statusArg === 'connected' && this.backendConnectionLost) {
|
||||
this.backendConnectionLost = false;
|
||||
this.infoscreen.setSuccess('typedsocket connected!');
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: 'connected',
|
||||
message: 'TypedSocket connected',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// lets check if a reload is necessary
|
||||
const getLatestServerChangeTime =
|
||||
this.typedsocket.createTypedRequest<interfaces.IReq_GetLatestServerChangeTime>(
|
||||
@@ -137,9 +247,13 @@ export class ReloadChecker {
|
||||
public async start() {
|
||||
this.started = true;
|
||||
logger.log('info', `starting ReloadChecker...`);
|
||||
|
||||
// Subscribe to service worker status updates
|
||||
this.subscribeToServiceWorker();
|
||||
|
||||
while (this.started) {
|
||||
const response = await this.performHttpRequest();
|
||||
if (response.status === 200) {
|
||||
if (response?.status === 200) {
|
||||
logger.log('info', `ReloadChecker reached backend!`);
|
||||
await this.checkReload(parseInt(await response.text()));
|
||||
await this.connectTypedsocket();
|
||||
@@ -150,6 +264,10 @@ export class ReloadChecker {
|
||||
|
||||
public async stop() {
|
||||
this.started = false;
|
||||
if (this.swStatusUnsubscribe) {
|
||||
this.swStatusUnsubscribe();
|
||||
this.swStatusUnsubscribe = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
534
ts_web_inject/typedserver_web.statuspill.ts
Normal file
534
ts_web_inject/typedserver_web.statuspill.ts
Normal file
@@ -0,0 +1,534 @@
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import * as plugins from './typedserver_web.plugins.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'typedserver-statuspill': TypedserverStatusPill;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Status source types
|
||||
*/
|
||||
export type TStatusSource = 'backend' | 'serviceworker' | 'network';
|
||||
|
||||
/**
|
||||
* Status type
|
||||
*/
|
||||
export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
|
||||
|
||||
/**
|
||||
* Status item with details
|
||||
*/
|
||||
export interface IStatusItem {
|
||||
source: TStatusSource;
|
||||
type: TStatusType;
|
||||
message: string;
|
||||
details?: {
|
||||
version?: string;
|
||||
cacheHitRate?: number;
|
||||
resourceCount?: number;
|
||||
connectionType?: string;
|
||||
latencyMs?: number;
|
||||
};
|
||||
persist: boolean;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Modern status pill component that displays connection and service worker status
|
||||
* - Shows at center-bottom on connectivity changes
|
||||
* - Stays visible during error states
|
||||
* - Expands on hover to show detailed status
|
||||
*/
|
||||
@customElement('typedserver-statuspill')
|
||||
export class TypedserverStatusPill extends LitElement {
|
||||
// Current status items by source
|
||||
@state() accessor backendStatus: IStatusItem | null = null;
|
||||
@state() accessor swStatus: IStatusItem | null = null;
|
||||
@state() accessor networkStatus: IStatusItem | null = null;
|
||||
|
||||
// UI state
|
||||
@state() accessor visible = false;
|
||||
@state() accessor expanded = false;
|
||||
@state() accessor hasError = false;
|
||||
|
||||
// Hide timeout
|
||||
private hideTimeout: number | null = null;
|
||||
private appended = false;
|
||||
|
||||
public static styles = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
--pill-bg: rgba(20, 20, 20, 0.9);
|
||||
--pill-bg-error: rgba(180, 40, 40, 0.95);
|
||||
--pill-bg-success: rgba(40, 140, 60, 0.95);
|
||||
--pill-text: #fff;
|
||||
--pill-text-muted: rgba(255, 255, 255, 0.7);
|
||||
--pill-border: rgba(255, 255, 255, 0.1);
|
||||
--pill-accent: #4af;
|
||||
--pill-success: #4f8;
|
||||
--pill-warning: #fa4;
|
||||
--pill-error: #f44;
|
||||
}
|
||||
|
||||
.pill {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: var(--pill-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 24px;
|
||||
padding: 10px 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--pill-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.pill.visible {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.pill.error {
|
||||
background: var(--pill-bg-error);
|
||||
}
|
||||
|
||||
.pill.success {
|
||||
background: var(--pill-bg-success);
|
||||
}
|
||||
|
||||
.pill-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--pill-text-muted);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background: var(--pill-success);
|
||||
box-shadow: 0 0 6px var(--pill-success);
|
||||
}
|
||||
|
||||
.status-dot.disconnected,
|
||||
.status-dot.offline,
|
||||
.status-dot.error {
|
||||
background: var(--pill-error);
|
||||
box-shadow: 0 0 6px var(--pill-error);
|
||||
}
|
||||
|
||||
.status-dot.reconnecting,
|
||||
.status-dot.update {
|
||||
background: var(--pill-warning);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
color: var(--pill-text);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: var(--pill-border);
|
||||
}
|
||||
|
||||
.pill-expanded {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--pill-border);
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pill.expanded .pill-expanded {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--pill-text-muted);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--pill-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value.success {
|
||||
color: var(--pill-success);
|
||||
}
|
||||
|
||||
.detail-value.error {
|
||||
color: var(--pill-error);
|
||||
}
|
||||
|
||||
.detail-value.warning {
|
||||
color: var(--pill-warning);
|
||||
}
|
||||
|
||||
/* Click hint */
|
||||
.pill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 32px;
|
||||
height: 3px;
|
||||
background: var(--pill-border);
|
||||
border-radius: 2px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.pill:hover::after {
|
||||
background: var(--pill-text-muted);
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Update status from a specific source
|
||||
*/
|
||||
public updateStatus(status: IStatusItem): void {
|
||||
// Store by source
|
||||
switch (status.source) {
|
||||
case 'backend':
|
||||
this.backendStatus = status;
|
||||
break;
|
||||
case 'serviceworker':
|
||||
this.swStatus = status;
|
||||
break;
|
||||
case 'network':
|
||||
this.networkStatus = status;
|
||||
break;
|
||||
}
|
||||
|
||||
// Determine if we have any errors (should persist)
|
||||
this.hasError = this.hasAnyError();
|
||||
|
||||
// Show the pill
|
||||
this.show();
|
||||
|
||||
// Auto-hide after delay if not persistent
|
||||
if (!status.persist && !this.hasError) {
|
||||
this.scheduleHide(2500);
|
||||
} else {
|
||||
this.cancelHide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if any status is an error state
|
||||
*/
|
||||
private hasAnyError(): boolean {
|
||||
const errorTypes: TStatusType[] = ['disconnected', 'error', 'offline'];
|
||||
return (
|
||||
(this.backendStatus && errorTypes.includes(this.backendStatus.type)) ||
|
||||
(this.networkStatus && errorTypes.includes(this.networkStatus.type)) ||
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get overall status class
|
||||
*/
|
||||
private getStatusClass(): string {
|
||||
if (this.hasError) return 'error';
|
||||
|
||||
const latestStatus = this.getLatestStatus();
|
||||
if (latestStatus?.type === 'connected' || latestStatus?.type === 'online') {
|
||||
return 'success';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the most recent status
|
||||
*/
|
||||
private getLatestStatus(): IStatusItem | null {
|
||||
const statuses = [this.backendStatus, this.swStatus, this.networkStatus].filter(Boolean) as IStatusItem[];
|
||||
if (statuses.length === 0) return null;
|
||||
return statuses.reduce((latest, current) =>
|
||||
current.timestamp > latest.timestamp ? current : latest
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the pill
|
||||
*/
|
||||
public show(): void {
|
||||
if (!this.appended) {
|
||||
document.body.appendChild(this);
|
||||
this.appended = true;
|
||||
}
|
||||
// Small delay to ensure DOM update
|
||||
requestAnimationFrame(() => {
|
||||
this.visible = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the pill
|
||||
*/
|
||||
public hide(): void {
|
||||
this.visible = false;
|
||||
this.expanded = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule auto-hide
|
||||
*/
|
||||
private scheduleHide(delayMs: number): void {
|
||||
this.cancelHide();
|
||||
this.hideTimeout = window.setTimeout(() => {
|
||||
if (!this.hasError) {
|
||||
this.hide();
|
||||
}
|
||||
}, delayMs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel scheduled hide
|
||||
*/
|
||||
private cancelHide(): void {
|
||||
if (this.hideTimeout) {
|
||||
clearTimeout(this.hideTimeout);
|
||||
this.hideTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle expanded state
|
||||
*/
|
||||
private toggleExpanded(): void {
|
||||
this.expanded = !this.expanded;
|
||||
if (this.expanded) {
|
||||
this.cancelHide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all status and hide
|
||||
*/
|
||||
public clearStatus(): void {
|
||||
this.backendStatus = null;
|
||||
this.swStatus = null;
|
||||
this.networkStatus = null;
|
||||
this.hasError = false;
|
||||
this.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set success message (auto-hides)
|
||||
*/
|
||||
public setSuccess(message: string, source: TStatusSource = 'backend'): void {
|
||||
this.updateStatus({
|
||||
source,
|
||||
type: 'connected',
|
||||
message,
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set error message (persists)
|
||||
*/
|
||||
public setError(message: string, source: TStatusSource = 'backend'): void {
|
||||
this.updateStatus({
|
||||
source,
|
||||
type: 'error',
|
||||
message,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set transitional message (auto-hides)
|
||||
*/
|
||||
public setText(message: string, source: TStatusSource = 'backend'): void {
|
||||
this.updateStatus({
|
||||
source,
|
||||
type: 'reconnecting',
|
||||
message,
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render status indicators
|
||||
*/
|
||||
private renderStatusIndicators() {
|
||||
const indicators = [];
|
||||
|
||||
if (this.networkStatus) {
|
||||
indicators.push(html`
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot ${this.networkStatus.type}"></span>
|
||||
<span class="status-label">Net</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.backendStatus) {
|
||||
indicators.push(html`
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot ${this.backendStatus.type}"></span>
|
||||
<span class="status-label">API</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.swStatus) {
|
||||
indicators.push(html`
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot ${this.swStatus.type}"></span>
|
||||
<span class="status-label">SW</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
return indicators;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render expanded details
|
||||
*/
|
||||
private renderDetails() {
|
||||
const details = [];
|
||||
|
||||
if (this.networkStatus) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Network</span>
|
||||
<span class="detail-value ${this.networkStatus.type === 'online' ? 'success' : 'error'}">
|
||||
${this.networkStatus.message}
|
||||
${this.networkStatus.details?.connectionType ? ` (${this.networkStatus.details.connectionType})` : ''}
|
||||
</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.backendStatus) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Backend</span>
|
||||
<span class="detail-value ${this.backendStatus.type === 'connected' ? 'success' : this.backendStatus.type === 'reconnecting' ? 'warning' : 'error'}">
|
||||
${this.backendStatus.message}
|
||||
</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.swStatus) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Service Worker</span>
|
||||
<span class="detail-value ${this.swStatus.type === 'connected' ? 'success' : this.swStatus.type === 'update' ? 'warning' : ''}">
|
||||
${this.swStatus.message}
|
||||
${this.swStatus.details?.version ? ` v${this.swStatus.details.version}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
`);
|
||||
|
||||
if (this.swStatus.details?.cacheHitRate !== undefined) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Cache Hit Rate</span>
|
||||
<span class="detail-value">${this.swStatus.details.cacheHitRate.toFixed(1)}%</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.swStatus.details?.resourceCount !== undefined) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Cached Resources</span>
|
||||
<span class="detail-value">${this.swStatus.details.resourceCount}</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
return details;
|
||||
}
|
||||
|
||||
public render() {
|
||||
const latestStatus = this.getLatestStatus();
|
||||
const message = latestStatus?.message || '';
|
||||
const indicators = this.renderStatusIndicators();
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="pill ${this.visible ? 'visible' : ''} ${this.getStatusClass()} ${this.expanded ? 'expanded' : ''}"
|
||||
@click="${this.toggleExpanded}"
|
||||
>
|
||||
<div class="pill-main">
|
||||
${indicators.length > 0 ? html`
|
||||
${indicators}
|
||||
${message ? html`<span class="separator"></span>` : ''}
|
||||
` : ''}
|
||||
${message ? html`<span class="status-message">${message}</span>` : ''}
|
||||
</div>
|
||||
<div class="pill-expanded">
|
||||
${this.renderDetails()}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import * as plugins from './plugins.js';
|
||||
import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { logger } from './logging.js';
|
||||
import { getMetricsCollector } from './classes.metrics.js';
|
||||
import { getEventBus, ServiceWorkerEvent } from './classes.eventbus.js';
|
||||
|
||||
// Add type definitions for ServiceWorker APIs
|
||||
declare global {
|
||||
@@ -75,8 +76,128 @@ export class ServiceworkerBackend {
|
||||
return await optionsArg.purgeCache?.(reqArg);
|
||||
});
|
||||
|
||||
// Handler for getting current SW status
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus', async () => {
|
||||
const metrics = getMetricsCollector();
|
||||
const metricsData = metrics.getMetrics();
|
||||
return {
|
||||
isActive: true,
|
||||
isOnline: metricsData.speedtest.isOnline,
|
||||
cacheHitRate: metrics.getCacheHitRate(),
|
||||
resourceCount: metrics.getResourceCount(),
|
||||
connectedClients: metricsData.connection.connectedClients,
|
||||
lastUpdateCheck: metricsData.update.lastCheckTimestamp,
|
||||
};
|
||||
});
|
||||
|
||||
// Periodically update connected clients count
|
||||
this.startClientCountUpdates();
|
||||
|
||||
// Subscribe to EventBus and broadcast status updates
|
||||
this.setupEventBusSubscriptions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up subscriptions to EventBus events and broadcasts them to clients
|
||||
*/
|
||||
private setupEventBusSubscriptions(): void {
|
||||
const eventBus = getEventBus();
|
||||
|
||||
// Network status changes
|
||||
eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'network',
|
||||
type: 'online',
|
||||
message: 'Connection restored',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'network',
|
||||
type: 'offline',
|
||||
message: 'Connection lost - offline mode',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
// Update events
|
||||
eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, (_event, payload: any) => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'update',
|
||||
message: 'Update available',
|
||||
details: {
|
||||
version: payload.newVersion,
|
||||
},
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, (_event, payload: any) => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'update',
|
||||
message: 'Update applied',
|
||||
details: {
|
||||
version: payload.newVersion,
|
||||
},
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, (_event, payload: any) => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'error',
|
||||
message: `Update error: ${payload.error || 'Unknown error'}`,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
// Cache invalidation
|
||||
eventBus.on(ServiceWorkerEvent.CACHE_INVALIDATE_ALL, () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'cache',
|
||||
message: 'Clearing cache...',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
// Lifecycle events
|
||||
eventBus.on(ServiceWorkerEvent.ACTIVATE, () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'connected',
|
||||
message: 'Service worker activated',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Broadcasts a status update to all connected clients
|
||||
*/
|
||||
public async broadcastStatusUpdate(status: interfaces.serviceworker.IStatusUpdate): Promise<void> {
|
||||
try {
|
||||
await this.deesComms.postMessage({
|
||||
method: 'serviceworker_statusUpdate',
|
||||
request: status,
|
||||
messageId: `sw_status_${Date.now()}`
|
||||
});
|
||||
logger.log('info', `Status update broadcast: ${status.source}:${status.type} - ${status.message}`);
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to broadcast status update: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -26,8 +26,14 @@ const DEFAULT_CONNECTION_OPTIONS: IConnectionOptions = {
|
||||
* * the serviceWorker method
|
||||
* * the deesComms method using BroadcastChannel
|
||||
*/
|
||||
/**
|
||||
* Callback type for status update subscriptions
|
||||
*/
|
||||
export type TStatusUpdateCallback = (status: interfaces.serviceworker.IStatusUpdate) => void;
|
||||
|
||||
export class ActionManager {
|
||||
public deesComms = new plugins.deesComms.DeesComms();
|
||||
private statusCallbacks: Set<TStatusUpdateCallback> = new Set();
|
||||
|
||||
constructor() {
|
||||
// lets define handlers on the client/tab side
|
||||
@@ -37,6 +43,49 @@ export class ActionManager {
|
||||
}, 200);
|
||||
return {};
|
||||
});
|
||||
|
||||
// Handler for status updates from service worker
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IMessage_Serviceworker_StatusUpdate>('serviceworker_statusUpdate', async (status) => {
|
||||
// Forward to all registered callbacks
|
||||
for (const callback of this.statusCallbacks) {
|
||||
try {
|
||||
callback(status);
|
||||
} catch (error) {
|
||||
logger.log('warn', `Status callback error: ${error}`);
|
||||
}
|
||||
}
|
||||
return {};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribe to status updates from the service worker
|
||||
* @returns Unsubscribe function
|
||||
*/
|
||||
public subscribeToStatusUpdates(callback: TStatusUpdateCallback): () => void {
|
||||
this.statusCallbacks.add(callback);
|
||||
logger.log('info', 'Subscribed to service worker status updates');
|
||||
return () => {
|
||||
this.statusCallbacks.delete(callback);
|
||||
logger.log('info', 'Unsubscribed from service worker status updates');
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current service worker status
|
||||
*/
|
||||
public async getServiceWorkerStatus(): Promise<interfaces.serviceworker.IRequest_Serviceworker_GetStatus['response'] | null> {
|
||||
try {
|
||||
const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus');
|
||||
const response = await Promise.race([
|
||||
tr.fire({}),
|
||||
new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000)),
|
||||
]);
|
||||
return response;
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to get service worker status: ${error}`);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user