feat(swdash): Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
This commit is contained in:
13
changelog.md
13
changelog.md
@@ -1,5 +1,18 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-04 - 6.8.0 - feat(swdash)
|
||||
Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
|
||||
|
||||
- Add a new sw-dash frontend (ts_swdash) implemented with Lit: sw-dash-app, sw-dash-overview, sw-dash-urls, sw-dash-domains, sw-dash-types, sw-dash-table, shared styles and plugin shims.
|
||||
- Wire sw-dash into build pipeline and packaging: add ts_swdash bundle to npm build script and include ts_swdash in package files.
|
||||
- Serve the dashboard bundle: add paths (swdashBundleDir / swdashBundlePath) and a built-in route (/sw-dash/bundle.js) in BuiltInRoutesController.
|
||||
- Simplify service-worker dashboard HTML output to a minimal shell that mounts <sw-dash-app> and loads the module /sw-dash/bundle.js (reduces inline HTML/CSS/JS duplication).
|
||||
- Lazy-load service worker bundle and source map in servertools.tools.serviceworker and expose /sw-typedrequest endpoints for SW typed requests (including speedtest handler).
|
||||
- Enhance compression utilities and static serving: Compressor now caches compressed results, prioritizes preferred compression methods, provides safer zlib calls, and exposes createCompressionStream; HandlerStatic gained improved path resolution, Express 5 wildcard handling and optional compression flow.
|
||||
- Improve proxy/static handler path handling to be compatible with Express 5 wildcard parameters and more robust fallback logic.
|
||||
- Deprecate Server.addTypedSocket (no-op) and document recommended SmartServe/TypedServer integration for WebSocket support.
|
||||
- Various minor packaging/path updates (paths.ts, plugins exports) to support the new dashboard and bundles.
|
||||
|
||||
## 2025-12-04 - 6.7.0 - feat(web_serviceworker)
|
||||
Add per-resource metrics and request deduplication to service worker cache manager
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"scripts": {
|
||||
"test": "npm run build && tstest test/ --verbose --logfile --timeout 60",
|
||||
"build": "tsbuild tsfolders --web --allowimplicitany && npm run bundle",
|
||||
"bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js",
|
||||
"bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js && tsbundle --from ./ts_swdash/index.ts --to ./dist_ts_swdash/bundle.js",
|
||||
"interfaces": "tsbuild interfaces --web --allowimplicitany --skiplibcheck",
|
||||
"docs": "tsdoc aidoc"
|
||||
},
|
||||
@@ -47,6 +47,7 @@
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
"ts_web/**/*",
|
||||
"ts_swdash/**/*",
|
||||
"dist/**/*",
|
||||
"dist_*/**/*",
|
||||
"dist_ts/**/*",
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@api.global/typedserver',
|
||||
version: '6.7.0',
|
||||
version: '6.8.0',
|
||||
description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as paths from '../paths.js';
|
||||
|
||||
/**
|
||||
* Built-in routes controller for TypedServer
|
||||
@@ -122,4 +123,25 @@ export class BuiltInRoutesController {
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/sw-dash/bundle.js')
|
||||
async getSwDashBundle(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
try {
|
||||
const bundleContent = (await plugins.fsInstance
|
||||
.file(paths.swdashBundlePath)
|
||||
.encoding('utf8')
|
||||
.read()) as string;
|
||||
|
||||
return new Response(bundleContent, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'text/javascript',
|
||||
'Cache-Control': 'no-cache',
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to serve sw-dash bundle:', error);
|
||||
return new Response('SW-Dash bundle not found', { status: 404 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,4 +8,7 @@ export const packageDir = plugins.path.join(
|
||||
export const injectBundleDir = plugins.path.join(packageDir, './dist_ts_web_inject');
|
||||
export const injectBundlePath = plugins.path.join(injectBundleDir, './bundle.js');
|
||||
|
||||
export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
|
||||
export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
|
||||
|
||||
export const swdashBundleDir = plugins.path.join(packageDir, './dist_ts_swdash');
|
||||
export const swdashBundlePath = plugins.path.join(swdashBundleDir, './bundle.js');
|
||||
13
ts_swdash/index.ts
Normal file
13
ts_swdash/index.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
// SW-Dash: Service Worker Dashboard
|
||||
// Entry point for the Lit-based dashboard application
|
||||
|
||||
// Import the main app component (which imports all others)
|
||||
import './sw-dash-app.js';
|
||||
|
||||
// Export components for external use if needed
|
||||
export { SwDashApp } from './sw-dash-app.js';
|
||||
export { SwDashOverview } from './sw-dash-overview.js';
|
||||
export { SwDashTable } from './sw-dash-table.js';
|
||||
export { SwDashUrls } from './sw-dash-urls.js';
|
||||
export { SwDashDomains } from './sw-dash-domains.js';
|
||||
export { SwDashTypes } from './sw-dash-types.js';
|
||||
15
ts_swdash/plugins.ts
Normal file
15
ts_swdash/plugins.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
// Lit imports
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import type { CSSResult, TemplateResult } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
|
||||
export {
|
||||
LitElement,
|
||||
html,
|
||||
css,
|
||||
customElement,
|
||||
property,
|
||||
state,
|
||||
};
|
||||
|
||||
export type { CSSResult, TemplateResult };
|
||||
186
ts_swdash/sw-dash-app.ts
Normal file
186
ts_swdash/sw-dash-app.ts
Normal file
@@ -0,0 +1,186 @@
|
||||
import { LitElement, html, css, state, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, terminalStyles, navStyles } from './sw-dash-styles.js';
|
||||
import type { IMetricsData } from './sw-dash-overview.js';
|
||||
import type { ICachedResource } from './sw-dash-urls.js';
|
||||
import type { IDomainStats } from './sw-dash-domains.js';
|
||||
import type { IContentTypeStats } from './sw-dash-types.js';
|
||||
|
||||
// Import components to register them
|
||||
import './sw-dash-overview.js';
|
||||
import './sw-dash-urls.js';
|
||||
import './sw-dash-domains.js';
|
||||
import './sw-dash-types.js';
|
||||
import './sw-dash-table.js';
|
||||
|
||||
type ViewType = 'overview' | 'urls' | 'domains' | 'types';
|
||||
|
||||
interface IResourceData {
|
||||
resources: ICachedResource[];
|
||||
domains: IDomainStats[];
|
||||
contentTypes: IContentTypeStats[];
|
||||
resourceCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main SW Dashboard application shell
|
||||
*/
|
||||
@customElement('sw-dash-app')
|
||||
export class SwDashApp extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
terminalStyles,
|
||||
navStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: var(--sw-bg-dark);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view.active {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@state() accessor currentView: ViewType = 'overview';
|
||||
@state() accessor metrics: IMetricsData | null = null;
|
||||
@state() accessor resourceData: IResourceData = {
|
||||
resources: [],
|
||||
domains: [],
|
||||
contentTypes: [],
|
||||
resourceCount: 0
|
||||
};
|
||||
@state() accessor lastRefresh = new Date().toLocaleTimeString();
|
||||
|
||||
private refreshInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.loadMetrics();
|
||||
this.loadResourceData();
|
||||
// Auto-refresh every 2 seconds
|
||||
this.refreshInterval = setInterval(() => {
|
||||
this.loadMetrics();
|
||||
if (this.currentView !== 'overview') {
|
||||
this.loadResourceData();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
if (this.refreshInterval) {
|
||||
clearInterval(this.refreshInterval);
|
||||
}
|
||||
}
|
||||
|
||||
private async loadMetrics(): Promise<void> {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/metrics');
|
||||
this.metrics = await response.json();
|
||||
this.lastRefresh = new Date().toLocaleTimeString();
|
||||
} catch (err) {
|
||||
console.error('Failed to load metrics:', err);
|
||||
}
|
||||
}
|
||||
|
||||
private async loadResourceData(): Promise<void> {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/resources');
|
||||
this.resourceData = await response.json();
|
||||
} catch (err) {
|
||||
console.error('Failed to load resources:', err);
|
||||
}
|
||||
}
|
||||
|
||||
private setView(view: ViewType): void {
|
||||
this.currentView = view;
|
||||
if (view !== 'overview') {
|
||||
this.loadResourceData();
|
||||
}
|
||||
}
|
||||
|
||||
private handleSpeedtestComplete(_e: CustomEvent): void {
|
||||
// Refresh metrics after speedtest
|
||||
this.loadMetrics();
|
||||
}
|
||||
|
||||
private formatUptime(ms: number): string {
|
||||
const s = Math.floor(ms / 1000);
|
||||
const m = Math.floor(s / 60);
|
||||
const h = Math.floor(m / 60);
|
||||
const d = Math.floor(h / 24);
|
||||
if (d > 0) return `${d}d ${h % 24}h`;
|
||||
if (h > 0) return `${h}h ${m % 60}m`;
|
||||
if (m > 0) return `${m}m ${s % 60}s`;
|
||||
return `${s}s`;
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
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>
|
||||
|
||||
<nav class="nav">
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'overview' ? 'active' : ''}"
|
||||
@click="${() => this.setView('overview')}"
|
||||
>Overview</button>
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'urls' ? 'active' : ''}"
|
||||
@click="${() => this.setView('urls')}"
|
||||
>URLs <span class="count">${this.resourceData.resourceCount}</span></button>
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'domains' ? 'active' : ''}"
|
||||
@click="${() => this.setView('domains')}"
|
||||
>Domains</button>
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'types' ? 'active' : ''}"
|
||||
@click="${() => this.setView('types')}"
|
||||
>Types</button>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
<div class="view ${this.currentView === 'overview' ? 'active' : ''}">
|
||||
<sw-dash-overview
|
||||
.metrics="${this.metrics}"
|
||||
@speedtest-complete="${this.handleSpeedtestComplete}"
|
||||
></sw-dash-overview>
|
||||
</div>
|
||||
|
||||
<div class="view ${this.currentView === 'urls' ? 'active' : ''}">
|
||||
<sw-dash-urls .resources="${this.resourceData.resources}"></sw-dash-urls>
|
||||
</div>
|
||||
|
||||
<div class="view ${this.currentView === 'domains' ? 'active' : ''}">
|
||||
<sw-dash-domains .domains="${this.resourceData.domains}"></sw-dash-domains>
|
||||
</div>
|
||||
|
||||
<div class="view ${this.currentView === 'types' ? 'active' : ''}">
|
||||
<sw-dash-types .contentTypes="${this.resourceData.contentTypes}"></sw-dash-types>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
52
ts_swdash/sw-dash-domains.ts
Normal file
52
ts_swdash/sw-dash-domains.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { LitElement, html, css, property, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
import type { IColumnConfig } from './sw-dash-table.js';
|
||||
|
||||
export interface IDomainStats {
|
||||
domain: string;
|
||||
totalResources: number;
|
||||
totalSize: number;
|
||||
totalHits: number;
|
||||
totalMisses: number;
|
||||
hitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Domains table view component
|
||||
*/
|
||||
@customElement('sw-dash-domains')
|
||||
export class SwDashDomains extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor domains: IDomainStats[] = [];
|
||||
|
||||
private columns: IColumnConfig[] = [
|
||||
{ key: 'domain', label: 'Domain' },
|
||||
{ key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
|
||||
{ key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'hitRate', label: 'Hit Rate' },
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<sw-dash-table
|
||||
.columns="${this.columns}"
|
||||
.data="${this.domains}"
|
||||
filterPlaceholder="Filter domains..."
|
||||
infoLabel="domains"
|
||||
></sw-dash-table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
183
ts_swdash/sw-dash-overview.ts
Normal file
183
ts_swdash/sw-dash-overview.ts
Normal file
@@ -0,0 +1,183 @@
|
||||
import { LitElement, html, css, property, state, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, panelStyles, gaugeStyles, buttonStyles, speedtestStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
|
||||
export interface IMetricsData {
|
||||
cache: {
|
||||
hits: number;
|
||||
misses: number;
|
||||
errors: number;
|
||||
bytesServedFromCache: number;
|
||||
bytesFetched: number;
|
||||
averageResponseTime: number;
|
||||
};
|
||||
network: {
|
||||
totalRequests: number;
|
||||
successfulRequests: number;
|
||||
failedRequests: number;
|
||||
timeouts: number;
|
||||
averageLatency: number;
|
||||
totalBytesTransferred: number;
|
||||
};
|
||||
update: {
|
||||
totalChecks: number;
|
||||
successfulChecks: number;
|
||||
failedChecks: number;
|
||||
updatesFound: number;
|
||||
updatesApplied: number;
|
||||
lastCheckTimestamp: number;
|
||||
lastUpdateTimestamp: number;
|
||||
};
|
||||
connection: {
|
||||
connectedClients: number;
|
||||
totalConnectionAttempts: number;
|
||||
successfulConnections: number;
|
||||
failedConnections: number;
|
||||
};
|
||||
speedtest: {
|
||||
lastDownloadSpeedMbps: number;
|
||||
lastUploadSpeedMbps: number;
|
||||
lastLatencyMs: number;
|
||||
lastTestTimestamp: number;
|
||||
testCount: number;
|
||||
isOnline: boolean;
|
||||
};
|
||||
startTime: number;
|
||||
uptime: number;
|
||||
cacheHitRate: number;
|
||||
networkSuccessRate: number;
|
||||
resourceCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overview panel component with metrics gauges and stats
|
||||
*/
|
||||
@customElement('sw-dash-overview')
|
||||
export class SwDashOverview extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
panelStyles,
|
||||
gaugeStyles,
|
||||
buttonStyles,
|
||||
speedtestStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Object }) accessor metrics: IMetricsData | null = null;
|
||||
@state() accessor speedtestRunning = false;
|
||||
|
||||
private async runSpeedtest(): Promise<void> {
|
||||
if (this.speedtestRunning) return;
|
||||
this.speedtestRunning = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/sw-dash/speedtest');
|
||||
const result = await response.json();
|
||||
|
||||
// Dispatch event to parent to update metrics
|
||||
this.dispatchEvent(new CustomEvent('speedtest-complete', {
|
||||
detail: result,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Speedtest failed:', err);
|
||||
} finally {
|
||||
this.speedtestRunning = false;
|
||||
}
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.metrics) {
|
||||
return html`<div class="panel">Loading metrics...</div>`;
|
||||
}
|
||||
|
||||
const m = this.metrics;
|
||||
const gaugeClass = SwDashTable.getGaugeClass;
|
||||
|
||||
return html`
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
427
ts_swdash/sw-dash-styles.ts
Normal file
427
ts_swdash/sw-dash-styles.ts
Normal file
@@ -0,0 +1,427 @@
|
||||
import { css } from './plugins.js';
|
||||
import type { CSSResult } from './plugins.js';
|
||||
|
||||
/**
|
||||
* Shared terminal-style theme for sw-dash components
|
||||
*/
|
||||
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;
|
||||
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--sw-border-active);
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--sw-bg-header);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--sw-text-primary);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uptime {
|
||||
color: var(--sw-text-secondary);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 15px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--sw-border-active);
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--sw-bg-header);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.refresh-info {
|
||||
color: var(--sw-text-secondary);
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--sw-text-primary);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
`;
|
||||
|
||||
export const navStyles: CSSResult = css`
|
||||
.nav {
|
||||
display: flex;
|
||||
background: var(--sw-bg-header);
|
||||
border-bottom: 1px solid var(--sw-border);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
color: var(--sw-text-secondary);
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
color: var(--sw-text-primary);
|
||||
border-bottom-color: var(--sw-text-primary);
|
||||
background: var(--sw-bg-input);
|
||||
}
|
||||
|
||||
.nav-tab .count {
|
||||
background: var(--sw-border);
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const panelStyles: CSSResult = css`
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--sw-border);
|
||||
padding: 12px;
|
||||
background: var(--sw-bg-dark);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--sw-text-cyan);
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dashed var(--sw-border);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--sw-text-secondary);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
|
||||
.value.warning {
|
||||
color: var(--sw-text-warning);
|
||||
}
|
||||
|
||||
.value.error {
|
||||
color: var(--sw-text-error);
|
||||
}
|
||||
|
||||
.value.success {
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
export const gaugeStyles: CSSResult = css`
|
||||
.gauge {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.gauge-bar {
|
||||
height: 16px;
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gauge-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.gauge-fill.good {
|
||||
background: var(--sw-gauge-good);
|
||||
}
|
||||
|
||||
.gauge-fill.warning {
|
||||
background: var(--sw-gauge-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;
|
||||
}
|
||||
`;
|
||||
|
||||
export const tableStyles: CSSResult = css`
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: var(--sw-bg-input);
|
||||
color: var(--sw-text-cyan);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table th:hover {
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.data-table th .sort-icon {
|
||||
margin-left: 5px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.data-table th.sorted .sort-icon {
|
||||
opacity: 1;
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background: #151515;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.data-table td.url {
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table td.num {
|
||||
text-align: right;
|
||||
color: var(--sw-text-primary);
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
color: var(--sw-text-primary);
|
||||
padding: 6px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--sw-border-active);
|
||||
}
|
||||
|
||||
.table-info {
|
||||
color: var(--sw-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hit-rate-bar {
|
||||
width: 60px;
|
||||
height: 10px;
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.hit-rate-fill {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hit-rate-fill.good {
|
||||
background: var(--sw-gauge-good);
|
||||
}
|
||||
|
||||
.hit-rate-fill.warning {
|
||||
background: var(--sw-gauge-warning);
|
||||
}
|
||||
|
||||
.hit-rate-fill.bad {
|
||||
background: var(--sw-gauge-bad);
|
||||
}
|
||||
`;
|
||||
|
||||
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;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--sw-text-primary);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const speedtestStyles: CSSResult = css`
|
||||
.online-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px dashed var(--sw-border);
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.online-dot.online {
|
||||
background: var(--sw-text-primary);
|
||||
box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.online-dot.offline {
|
||||
background: var(--sw-text-error);
|
||||
box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.speed-bar {
|
||||
height: 8px;
|
||||
background: var(--sw-bg-input);
|
||||
border: 1px solid var(--sw-border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.speed-fill {
|
||||
height: 100%;
|
||||
background: var(--sw-gauge-good);
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
`;
|
||||
173
ts_swdash/sw-dash-table.ts
Normal file
173
ts_swdash/sw-dash-table.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { LitElement, html, css, property, state, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
|
||||
export interface IColumnConfig {
|
||||
key: string;
|
||||
label: string;
|
||||
sortable?: boolean;
|
||||
formatter?: (value: any, row: any) => string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Base sortable table component for sw-dash
|
||||
*/
|
||||
@customElement('sw-dash-table')
|
||||
export class SwDashTable extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor columns: IColumnConfig[] = [];
|
||||
@property({ type: Array }) accessor data: any[] = [];
|
||||
@property({ type: String }) accessor filterPlaceholder = 'Filter...';
|
||||
@property({ type: String }) accessor infoLabel = 'items';
|
||||
|
||||
@state() accessor sortColumn = '';
|
||||
@state() accessor sortDirection: 'asc' | 'desc' = 'desc';
|
||||
@state() accessor filterText = '';
|
||||
|
||||
// Utility formatters
|
||||
static formatNumber(n: number): string {
|
||||
return n.toLocaleString();
|
||||
}
|
||||
|
||||
static formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
static formatTimestamp(ts: number): string {
|
||||
if (!ts || ts === 0) return 'never';
|
||||
const ago = Date.now() - ts;
|
||||
if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
|
||||
if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
|
||||
if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
|
||||
return new Date(ts).toLocaleDateString();
|
||||
}
|
||||
|
||||
static getGaugeClass(rate: number): string {
|
||||
if (rate >= 80) return 'good';
|
||||
if (rate >= 50) return 'warning';
|
||||
return 'bad';
|
||||
}
|
||||
|
||||
private handleSort(column: string): void {
|
||||
if (this.sortColumn === column) {
|
||||
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
this.sortColumn = column;
|
||||
this.sortDirection = 'desc';
|
||||
}
|
||||
}
|
||||
|
||||
private handleFilter(e: Event): void {
|
||||
this.filterText = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
private getSortedFilteredData(): any[] {
|
||||
let result = [...this.data];
|
||||
|
||||
// Filter
|
||||
if (this.filterText) {
|
||||
const search = this.filterText.toLowerCase();
|
||||
result = result.filter(row => {
|
||||
return this.columns.some(col => {
|
||||
const val = row[col.key];
|
||||
if (val == null) return false;
|
||||
return String(val).toLowerCase().includes(search);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Sort
|
||||
if (this.sortColumn) {
|
||||
result.sort((a, b) => {
|
||||
let valA = a[this.sortColumn];
|
||||
let valB = b[this.sortColumn];
|
||||
if (typeof valA === 'string') valA = valA.toLowerCase();
|
||||
if (typeof valB === 'string') valB = valB.toLowerCase();
|
||||
if (valA < valB) return this.sortDirection === 'asc' ? -1 : 1;
|
||||
if (valA > valB) return this.sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private renderHitRateBar(rate: number): TemplateResult {
|
||||
const cls = SwDashTable.getGaugeClass(rate);
|
||||
return html`
|
||||
<span class="hit-rate-bar">
|
||||
<span class="hit-rate-fill ${cls}" style="width: ${rate}%"></span>
|
||||
</span>${rate}%
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderCellValue(value: any, row: any, column: IColumnConfig): any {
|
||||
if (column.formatter) {
|
||||
return column.formatter(value, row);
|
||||
}
|
||||
// Special handling for hitRate
|
||||
if (column.key === 'hitRate') {
|
||||
return this.renderHitRateBar(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const sortedData = this.getSortedFilteredData();
|
||||
|
||||
return html`
|
||||
<div class="table-controls">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="${this.filterPlaceholder}"
|
||||
.value="${this.filterText}"
|
||||
@input="${this.handleFilter}"
|
||||
>
|
||||
<span class="table-info">${sortedData.length} of ${this.data.length} ${this.infoLabel}</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
${this.columns.map(col => html`
|
||||
<th
|
||||
class="${this.sortColumn === col.key ? 'sorted' : ''}"
|
||||
@click="${() => col.sortable !== false && this.handleSort(col.key)}"
|
||||
>
|
||||
${col.label}
|
||||
${col.sortable !== false ? html`
|
||||
<span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '^' : 'v'}</span>
|
||||
` : ''}
|
||||
</th>
|
||||
`)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${sortedData.map(row => html`
|
||||
<tr>
|
||||
${this.columns.map(col => html`
|
||||
<td class="${col.className || ''}">${this.renderCellValue(row[col.key], row, col)}</td>
|
||||
`)}
|
||||
</tr>
|
||||
`)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
52
ts_swdash/sw-dash-types.ts
Normal file
52
ts_swdash/sw-dash-types.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { LitElement, html, css, property, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
import type { IColumnConfig } from './sw-dash-table.js';
|
||||
|
||||
export interface IContentTypeStats {
|
||||
contentType: string;
|
||||
totalResources: number;
|
||||
totalSize: number;
|
||||
totalHits: number;
|
||||
totalMisses: number;
|
||||
hitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Content types table view component
|
||||
*/
|
||||
@customElement('sw-dash-types')
|
||||
export class SwDashTypes extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor contentTypes: IContentTypeStats[] = [];
|
||||
|
||||
private columns: IColumnConfig[] = [
|
||||
{ key: 'contentType', label: 'Content Type' },
|
||||
{ key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
|
||||
{ key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'hitRate', label: 'Hit Rate' },
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<sw-dash-table
|
||||
.columns="${this.columns}"
|
||||
.data="${this.contentTypes}"
|
||||
filterPlaceholder="Filter types..."
|
||||
infoLabel="content types"
|
||||
></sw-dash-table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
66
ts_swdash/sw-dash-urls.ts
Normal file
66
ts_swdash/sw-dash-urls.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { LitElement, html, css, property, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
import type { IColumnConfig } from './sw-dash-table.js';
|
||||
|
||||
export interface ICachedResource {
|
||||
url: string;
|
||||
domain: string;
|
||||
contentType: string;
|
||||
size: number;
|
||||
hitCount: number;
|
||||
missCount: number;
|
||||
lastAccessed: number;
|
||||
cachedAt: number;
|
||||
hitRate?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* URLs table view component
|
||||
*/
|
||||
@customElement('sw-dash-urls')
|
||||
export class SwDashUrls extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor resources: ICachedResource[] = [];
|
||||
|
||||
private columns: IColumnConfig[] = [
|
||||
{ key: 'url', label: 'URL', className: 'url' },
|
||||
{ key: 'contentType', label: 'Type' },
|
||||
{ key: 'size', label: 'Size', className: 'num', formatter: SwDashTable.formatBytes },
|
||||
{ key: 'hitCount', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'missCount', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'hitRate', label: 'Hit Rate' },
|
||||
{ key: 'lastAccessed', label: 'Last Access', formatter: SwDashTable.formatTimestamp },
|
||||
];
|
||||
|
||||
private getDataWithHitRate(): ICachedResource[] {
|
||||
return this.resources.map(r => {
|
||||
const total = r.hitCount + r.missCount;
|
||||
return {
|
||||
...r,
|
||||
hitRate: total > 0 ? Math.round((r.hitCount / total) * 100) : 0
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<sw-dash-table
|
||||
.columns="${this.columns}"
|
||||
.data="${this.getDataWithHitRate()}"
|
||||
filterPlaceholder="Filter URLs..."
|
||||
infoLabel="resources"
|
||||
></sw-dash-table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -144,15 +144,9 @@ export class DashboardGenerator {
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the complete HTML dashboard page as a SPA with tab navigation
|
||||
* Generates a minimal HTML shell that loads the Lit-based dashboard bundle
|
||||
*/
|
||||
public generateDashboardHtml(): string {
|
||||
const metrics = getMetricsCollector();
|
||||
const data = metrics.getMetrics();
|
||||
const hitRate = metrics.getCacheHitRate();
|
||||
const successRate = metrics.getNetworkSuccessRate();
|
||||
const resourceCount = metrics.getResourceCount();
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -163,754 +157,17 @@ export class DashboardGenerator {
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #00ff00;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.terminal {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #00ff00;
|
||||
background: #0d0d0d;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #00ff00;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #111;
|
||||
}
|
||||
.title { color: #00ff00; font-weight: bold; font-size: 16px; }
|
||||
.uptime { color: #888; }
|
||||
|
||||
/* Navigation tabs */
|
||||
.nav {
|
||||
display: flex;
|
||||
background: #111;
|
||||
border-bottom: 1px solid #333;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.nav-tab {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
color: #888;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.nav-tab:hover { color: #00ff00; }
|
||||
.nav-tab.active {
|
||||
color: #00ff00;
|
||||
border-bottom-color: #00ff00;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.nav-tab .count {
|
||||
background: #333;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.content { padding: 15px; min-height: 400px; }
|
||||
.view { display: none; }
|
||||
.view.active { display: block; }
|
||||
|
||||
/* Grid layout for overview */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
.panel {
|
||||
border: 1px solid #333;
|
||||
padding: 12px;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
.panel-title {
|
||||
color: #00ffff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dashed #333;
|
||||
}
|
||||
.row { display: flex; justify-content: space-between; padding: 3px 0; }
|
||||
.label { color: #888; }
|
||||
.value { color: #00ff00; }
|
||||
.value.warning { color: #ffff00; }
|
||||
.value.error { color: #ff4444; }
|
||||
.value.success { color: #00ff00; }
|
||||
|
||||
/* Gauge */
|
||||
.gauge { margin: 8px 0; }
|
||||
.gauge-bar {
|
||||
height: 16px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
.gauge-fill { height: 100%; transition: width 0.3s ease; }
|
||||
.gauge-fill.good { background: #00aa00; }
|
||||
.gauge-fill.warning { background: #aaaa00; }
|
||||
.gauge-fill.bad { background: #aa0000; }
|
||||
.gauge-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px #000;
|
||||
}
|
||||
|
||||
/* Sortable table */
|
||||
.table-container { overflow-x: auto; }
|
||||
.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 #333;
|
||||
}
|
||||
.data-table th {
|
||||
background: #1a1a1a;
|
||||
color: #00ffff;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.data-table th:hover { background: #252525; }
|
||||
.data-table th .sort-icon { margin-left: 5px; opacity: 0.5; }
|
||||
.data-table th.sorted .sort-icon { opacity: 1; color: #00ff00; }
|
||||
.data-table tr:hover { background: #151515; }
|
||||
.data-table td { color: #ccc; }
|
||||
.data-table td.url {
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.data-table td.num { text-align: right; color: #00ff00; }
|
||||
|
||||
/* Search/filter */
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
.search-input {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
color: #00ff00;
|
||||
padding: 6px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
width: 250px;
|
||||
}
|
||||
.search-input:focus { outline: none; border-color: #00ff00; }
|
||||
.table-info { color: #888; font-size: 12px; }
|
||||
|
||||
/* Speed bars */
|
||||
.speed-bar {
|
||||
height: 8px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.speed-fill { height: 100%; background: #00aa00; transition: width 0.5s ease; }
|
||||
|
||||
/* Online indicator */
|
||||
.online-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 10px; border-bottom: 1px dashed #333; }
|
||||
.online-dot { width: 12px; height: 12px; border-radius: 50%; transition: background-color 0.3s ease; }
|
||||
.online-dot.online { background: #00ff00; box-shadow: 0 0 8px rgba(0, 255, 0, 0.5); }
|
||||
.online-dot.offline { background: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.5); }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #00ff00;
|
||||
color: #00ff00;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:hover { background: #00ff00; color: #000; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-row { display: flex; justify-content: flex-end; margin-top: 10px; }
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
border-top: 1px solid #00ff00;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #111;
|
||||
font-size: 12px;
|
||||
}
|
||||
.refresh-info { color: #888; }
|
||||
.status { display: flex; align-items: center; gap: 8px; }
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #00ff00;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
.prompt { color: #00ff00; }
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
background: #00ff00;
|
||||
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; } }
|
||||
|
||||
/* Hit rate bar in tables */
|
||||
.hit-rate-bar {
|
||||
width: 60px;
|
||||
height: 10px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.hit-rate-fill { height: 100%; }
|
||||
.hit-rate-fill.good { background: #00aa00; }
|
||||
.hit-rate-fill.warning { background: #aaaa00; }
|
||||
.hit-rate-fill.bad { background: #aa0000; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="terminal">
|
||||
<div class="header">
|
||||
<span class="title">[SW-DASH] Service Worker Dashboard</span>
|
||||
<span class="uptime" id="uptime">Uptime: ${this.formatDuration(data.uptime)}</span>
|
||||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<button class="nav-tab active" data-view="overview">Overview</button>
|
||||
<button class="nav-tab" data-view="urls">URLs <span class="count" id="url-count">${resourceCount}</span></button>
|
||||
<button class="nav-tab" data-view="domains">Domains</button>
|
||||
<button class="nav-tab" data-view="types">Types</button>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
<!-- Overview View -->
|
||||
<div id="view-overview" class="view active">
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ CACHE ]</div>
|
||||
<div class="gauge">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${this.getGaugeClass(hitRate)}" id="cache-gauge" style="width: ${hitRate}%"></div>
|
||||
<span class="gauge-text" id="cache-gauge-text">${hitRate}% hit rate</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Hits:</span><span class="value success" id="cache-hits">${this.formatNumber(data.cache.hits)}</span></div>
|
||||
<div class="row"><span class="label">Misses:</span><span class="value warning" id="cache-misses">${this.formatNumber(data.cache.misses)}</span></div>
|
||||
<div class="row"><span class="label">Errors:</span><span class="value ${data.cache.errors > 0 ? 'error' : ''}" id="cache-errors">${this.formatNumber(data.cache.errors)}</span></div>
|
||||
<div class="row"><span class="label">From Cache:</span><span class="value" id="cache-bytes">${this.formatBytes(data.cache.bytesServedFromCache)}</span></div>
|
||||
<div class="row"><span class="label">Fetched:</span><span class="value" id="cache-fetched">${this.formatBytes(data.cache.bytesFetched)}</span></div>
|
||||
<div class="row"><span class="label">Resources:</span><span class="value" id="cache-resources">${resourceCount}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ NETWORK ]</div>
|
||||
<div class="gauge">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${this.getGaugeClass(successRate)}" id="net-gauge" style="width: ${successRate}%"></div>
|
||||
<span class="gauge-text" id="net-gauge-text">${successRate}% success</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Total Requests:</span><span class="value" id="net-total">${this.formatNumber(data.network.totalRequests)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success" id="net-success">${this.formatNumber(data.network.successfulRequests)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${data.network.failedRequests > 0 ? 'error' : ''}" id="net-failed">${this.formatNumber(data.network.failedRequests)}</span></div>
|
||||
<div class="row"><span class="label">Timeouts:</span><span class="value ${data.network.timeouts > 0 ? 'warning' : ''}" id="net-timeouts">${this.formatNumber(data.network.timeouts)}</span></div>
|
||||
<div class="row"><span class="label">Avg Latency:</span><span class="value" id="net-latency">${data.network.averageLatency}ms</span></div>
|
||||
<div class="row"><span class="label">Transferred:</span><span class="value" id="net-bytes">${this.formatBytes(data.network.totalBytesTransferred)}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ UPDATES ]</div>
|
||||
<div class="row"><span class="label">Total Checks:</span><span class="value" id="upd-checks">${this.formatNumber(data.update.totalChecks)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success" id="upd-success">${this.formatNumber(data.update.successfulChecks)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${data.update.failedChecks > 0 ? 'error' : ''}" id="upd-failed">${this.formatNumber(data.update.failedChecks)}</span></div>
|
||||
<div class="row"><span class="label">Updates Found:</span><span class="value" id="upd-found">${this.formatNumber(data.update.updatesFound)}</span></div>
|
||||
<div class="row"><span class="label">Updates Applied:</span><span class="value success" id="upd-applied">${this.formatNumber(data.update.updatesApplied)}</span></div>
|
||||
<div class="row"><span class="label">Last Check:</span><span class="value" id="upd-last-check">${this.formatTimestamp(data.update.lastCheckTimestamp)}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ CONNECTIONS ]</div>
|
||||
<div class="row"><span class="label">Active Clients:</span><span class="value success" id="conn-clients">${this.formatNumber(data.connection.connectedClients)}</span></div>
|
||||
<div class="row"><span class="label">Total Attempts:</span><span class="value" id="conn-attempts">${this.formatNumber(data.connection.totalConnectionAttempts)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success" id="conn-success">${this.formatNumber(data.connection.successfulConnections)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${data.connection.failedConnections > 0 ? 'error' : ''}" id="conn-failed">${this.formatNumber(data.connection.failedConnections)}</span></div>
|
||||
<div class="row" style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed #333;">
|
||||
<span class="label">Started:</span><span class="value" id="start-time">${this.formatTimestamp(data.startTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ SPEEDTEST ]</div>
|
||||
<div class="online-indicator">
|
||||
<span class="online-dot ${data.speedtest.isOnline ? 'online' : 'offline'}" id="online-dot"></span>
|
||||
<span class="value ${data.speedtest.isOnline ? 'success' : 'error'}" id="online-status">${data.speedtest.isOnline ? 'Online' : 'Offline'}</span>
|
||||
</div>
|
||||
<div class="row"><span class="label">Download:</span><span class="value" id="speed-download">${data.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span></div>
|
||||
<div class="speed-bar"><div class="speed-fill" id="speed-download-bar" style="width: ${Math.min(data.speedtest.lastDownloadSpeedMbps, 100)}%"></div></div>
|
||||
<div class="row"><span class="label">Upload:</span><span class="value" id="speed-upload">${data.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span></div>
|
||||
<div class="speed-bar"><div class="speed-fill" id="speed-upload-bar" style="width: ${Math.min(data.speedtest.lastUploadSpeedMbps, 100)}%"></div></div>
|
||||
<div class="row"><span class="label">Latency:</span><span class="value" id="speed-latency">${data.speedtest.lastLatencyMs.toFixed(0)} ms</span></div>
|
||||
<div class="btn-row"><button class="btn" id="run-speedtest">Run Test</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- URLs View -->
|
||||
<div id="view-urls" class="view">
|
||||
<div class="table-controls">
|
||||
<input type="text" class="search-input" id="url-search" placeholder="Filter URLs...">
|
||||
<span class="table-info" id="url-info">Loading...</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="url-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="url">URL <span class="sort-icon">^</span></th>
|
||||
<th data-sort="contentType">Type <span class="sort-icon">^</span></th>
|
||||
<th data-sort="size">Size <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitCount">Hits <span class="sort-icon">^</span></th>
|
||||
<th data-sort="missCount">Misses <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
|
||||
<th data-sort="lastAccessed">Last Access <span class="sort-icon">^</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="url-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Domains View -->
|
||||
<div id="view-domains" class="view">
|
||||
<div class="table-controls">
|
||||
<input type="text" class="search-input" id="domain-search" placeholder="Filter domains...">
|
||||
<span class="table-info" id="domain-info">Loading...</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="domain-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="domain">Domain <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalResources">Resources <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalSize">Total Size <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalHits">Hits <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalMisses">Misses <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="domain-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Types View -->
|
||||
<div id="view-types" class="view">
|
||||
<div class="table-controls">
|
||||
<input type="text" class="search-input" id="type-search" placeholder="Filter types...">
|
||||
<span class="table-info" id="type-info">Loading...</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="type-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="contentType">Content Type <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalResources">Resources <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalSize">Total Size <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalHits">Hits <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalMisses">Misses <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="type-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span class="refresh-info">
|
||||
<span class="prompt">$</span> Last refresh: <span id="last-refresh">${new Date().toLocaleTimeString()}</span><span class="cursor"></span>
|
||||
</span>
|
||||
<div class="status">
|
||||
<span class="status-dot"></span>
|
||||
<span>Auto-refresh: 2s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// State
|
||||
let resourceData = { resources: [], domains: [], contentTypes: [] };
|
||||
let sortState = {
|
||||
urls: { column: 'lastAccessed', direction: 'desc' },
|
||||
domains: { column: 'totalHits', direction: 'desc' },
|
||||
types: { column: 'totalHits', direction: 'desc' }
|
||||
};
|
||||
|
||||
// Utilities
|
||||
const formatNumber = n => n.toLocaleString();
|
||||
const formatBytes = bytes => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024, sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
const formatDuration = ms => {
|
||||
const s = Math.floor(ms / 1000), m = Math.floor(s / 60), h = Math.floor(m / 60), d = Math.floor(h / 24);
|
||||
if (d > 0) return d + 'd ' + (h % 24) + 'h';
|
||||
if (h > 0) return h + 'h ' + (m % 60) + 'm';
|
||||
if (m > 0) return m + 'm ' + (s % 60) + 's';
|
||||
return s + 's';
|
||||
};
|
||||
const formatTimestamp = ts => {
|
||||
if (!ts || ts === 0) return 'never';
|
||||
const ago = Date.now() - ts;
|
||||
if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
|
||||
if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
|
||||
if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
|
||||
return new Date(ts).toLocaleDateString();
|
||||
};
|
||||
const getGaugeClass = rate => rate >= 80 ? 'good' : rate >= 50 ? 'warning' : 'bad';
|
||||
|
||||
// Navigation
|
||||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
document.getElementById('view-' + tab.dataset.view).classList.add('active');
|
||||
if (tab.dataset.view !== 'overview') loadResourceData();
|
||||
});
|
||||
});
|
||||
|
||||
// Sort function
|
||||
function sortData(data, column, direction) {
|
||||
return [...data].sort((a, b) => {
|
||||
let valA = a[column], valB = b[column];
|
||||
if (typeof valA === 'string') valA = valA.toLowerCase();
|
||||
if (typeof valB === 'string') valB = valB.toLowerCase();
|
||||
if (valA < valB) return direction === 'asc' ? -1 : 1;
|
||||
if (valA > valB) return direction === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
// Hit rate bar HTML
|
||||
function hitRateBar(rate) {
|
||||
const cls = getGaugeClass(rate);
|
||||
return '<span class="hit-rate-bar"><span class="hit-rate-fill ' + cls + '" style="width:' + rate + '%"></span></span>' + rate + '%';
|
||||
}
|
||||
|
||||
// Render URL table
|
||||
function renderUrlTable(filter = '') {
|
||||
const tbody = document.getElementById('url-tbody');
|
||||
let data = resourceData.resources;
|
||||
if (filter) data = data.filter(r => r.url.toLowerCase().includes(filter.toLowerCase()));
|
||||
data = sortData(data, sortState.urls.column, sortState.urls.direction);
|
||||
|
||||
// Add computed hitRate
|
||||
data.forEach(r => {
|
||||
const total = r.hitCount + r.missCount;
|
||||
r.hitRate = total > 0 ? Math.round((r.hitCount / total) * 100) : 0;
|
||||
});
|
||||
|
||||
tbody.innerHTML = data.map(r =>
|
||||
'<tr>' +
|
||||
'<td class="url" title="' + r.url + '">' + r.url + '</td>' +
|
||||
'<td>' + (r.contentType || 'unknown') + '</td>' +
|
||||
'<td class="num">' + formatBytes(r.size) + '</td>' +
|
||||
'<td class="num">' + formatNumber(r.hitCount) + '</td>' +
|
||||
'<td class="num">' + formatNumber(r.missCount) + '</td>' +
|
||||
'<td>' + hitRateBar(r.hitRate) + '</td>' +
|
||||
'<td>' + formatTimestamp(r.lastAccessed) + '</td>' +
|
||||
'</tr>'
|
||||
).join('');
|
||||
|
||||
document.getElementById('url-info').textContent = data.length + ' of ' + resourceData.resources.length + ' resources';
|
||||
}
|
||||
|
||||
// Render domain table
|
||||
function renderDomainTable(filter = '') {
|
||||
const tbody = document.getElementById('domain-tbody');
|
||||
let data = resourceData.domains;
|
||||
if (filter) data = data.filter(d => d.domain.toLowerCase().includes(filter.toLowerCase()));
|
||||
data = sortData(data, sortState.domains.column, sortState.domains.direction);
|
||||
|
||||
tbody.innerHTML = data.map(d =>
|
||||
'<tr>' +
|
||||
'<td>' + d.domain + '</td>' +
|
||||
'<td class="num">' + formatNumber(d.totalResources) + '</td>' +
|
||||
'<td class="num">' + formatBytes(d.totalSize) + '</td>' +
|
||||
'<td class="num">' + formatNumber(d.totalHits) + '</td>' +
|
||||
'<td class="num">' + formatNumber(d.totalMisses) + '</td>' +
|
||||
'<td>' + hitRateBar(d.hitRate) + '</td>' +
|
||||
'</tr>'
|
||||
).join('');
|
||||
|
||||
document.getElementById('domain-info').textContent = data.length + ' domains';
|
||||
}
|
||||
|
||||
// Render type table
|
||||
function renderTypeTable(filter = '') {
|
||||
const tbody = document.getElementById('type-tbody');
|
||||
let data = resourceData.contentTypes;
|
||||
if (filter) data = data.filter(t => t.contentType.toLowerCase().includes(filter.toLowerCase()));
|
||||
data = sortData(data, sortState.types.column, sortState.types.direction);
|
||||
|
||||
tbody.innerHTML = data.map(t =>
|
||||
'<tr>' +
|
||||
'<td>' + t.contentType + '</td>' +
|
||||
'<td class="num">' + formatNumber(t.totalResources) + '</td>' +
|
||||
'<td class="num">' + formatBytes(t.totalSize) + '</td>' +
|
||||
'<td class="num">' + formatNumber(t.totalHits) + '</td>' +
|
||||
'<td class="num">' + formatNumber(t.totalMisses) + '</td>' +
|
||||
'<td>' + hitRateBar(t.hitRate) + '</td>' +
|
||||
'</tr>'
|
||||
).join('');
|
||||
|
||||
document.getElementById('type-info').textContent = data.length + ' content types';
|
||||
}
|
||||
|
||||
// Sort handlers
|
||||
function setupSortHandlers(tableId, stateKey, renderFn) {
|
||||
document.querySelectorAll('#' + tableId + ' th[data-sort]').forEach(th => {
|
||||
th.addEventListener('click', () => {
|
||||
const col = th.dataset.sort;
|
||||
if (sortState[stateKey].column === col) {
|
||||
sortState[stateKey].direction = sortState[stateKey].direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
sortState[stateKey].column = col;
|
||||
sortState[stateKey].direction = 'desc';
|
||||
}
|
||||
// Update sort icons
|
||||
document.querySelectorAll('#' + tableId + ' th').forEach(h => h.classList.remove('sorted'));
|
||||
th.classList.add('sorted');
|
||||
th.querySelector('.sort-icon').textContent = sortState[stateKey].direction === 'asc' ? '^' : 'v';
|
||||
renderFn();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setupSortHandlers('url-table', 'urls', () => renderUrlTable(document.getElementById('url-search').value));
|
||||
setupSortHandlers('domain-table', 'domains', () => renderDomainTable(document.getElementById('domain-search').value));
|
||||
setupSortHandlers('type-table', 'types', () => renderTypeTable(document.getElementById('type-search').value));
|
||||
|
||||
// Search handlers
|
||||
document.getElementById('url-search').addEventListener('input', e => renderUrlTable(e.target.value));
|
||||
document.getElementById('domain-search').addEventListener('input', e => renderDomainTable(e.target.value));
|
||||
document.getElementById('type-search').addEventListener('input', e => renderTypeTable(e.target.value));
|
||||
|
||||
// Load resource data
|
||||
async function loadResourceData() {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/resources');
|
||||
resourceData = await response.json();
|
||||
document.getElementById('url-count').textContent = resourceData.resourceCount;
|
||||
renderUrlTable(document.getElementById('url-search').value);
|
||||
renderDomainTable(document.getElementById('domain-search').value);
|
||||
renderTypeTable(document.getElementById('type-search').value);
|
||||
} catch (err) {
|
||||
console.error('Failed to load resource data:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Update overview
|
||||
function updateOverview(data) {
|
||||
document.getElementById('uptime').textContent = 'Uptime: ' + formatDuration(data.uptime);
|
||||
document.getElementById('cache-hits').textContent = formatNumber(data.cache.hits);
|
||||
document.getElementById('cache-misses').textContent = formatNumber(data.cache.misses);
|
||||
document.getElementById('cache-errors').textContent = formatNumber(data.cache.errors);
|
||||
document.getElementById('cache-bytes').textContent = formatBytes(data.cache.bytesServedFromCache);
|
||||
document.getElementById('cache-fetched').textContent = formatBytes(data.cache.bytesFetched);
|
||||
document.getElementById('cache-resources').textContent = data.resourceCount || 0;
|
||||
|
||||
const cacheGauge = document.getElementById('cache-gauge');
|
||||
cacheGauge.style.width = data.cacheHitRate + '%';
|
||||
cacheGauge.className = 'gauge-fill ' + getGaugeClass(data.cacheHitRate);
|
||||
document.getElementById('cache-gauge-text').textContent = data.cacheHitRate + '% hit rate';
|
||||
|
||||
document.getElementById('net-total').textContent = formatNumber(data.network.totalRequests);
|
||||
document.getElementById('net-success').textContent = formatNumber(data.network.successfulRequests);
|
||||
document.getElementById('net-failed').textContent = formatNumber(data.network.failedRequests);
|
||||
document.getElementById('net-timeouts').textContent = formatNumber(data.network.timeouts);
|
||||
document.getElementById('net-latency').textContent = data.network.averageLatency + 'ms';
|
||||
document.getElementById('net-bytes').textContent = formatBytes(data.network.totalBytesTransferred);
|
||||
|
||||
const netGauge = document.getElementById('net-gauge');
|
||||
netGauge.style.width = data.networkSuccessRate + '%';
|
||||
netGauge.className = 'gauge-fill ' + getGaugeClass(data.networkSuccessRate);
|
||||
document.getElementById('net-gauge-text').textContent = data.networkSuccessRate + '% success';
|
||||
|
||||
document.getElementById('upd-checks').textContent = formatNumber(data.update.totalChecks);
|
||||
document.getElementById('upd-success').textContent = formatNumber(data.update.successfulChecks);
|
||||
document.getElementById('upd-failed').textContent = formatNumber(data.update.failedChecks);
|
||||
document.getElementById('upd-found').textContent = formatNumber(data.update.updatesFound);
|
||||
document.getElementById('upd-applied').textContent = formatNumber(data.update.updatesApplied);
|
||||
document.getElementById('upd-last-check').textContent = formatTimestamp(data.update.lastCheckTimestamp);
|
||||
|
||||
document.getElementById('conn-clients').textContent = formatNumber(data.connection.connectedClients);
|
||||
document.getElementById('conn-attempts').textContent = formatNumber(data.connection.totalConnectionAttempts);
|
||||
document.getElementById('conn-success').textContent = formatNumber(data.connection.successfulConnections);
|
||||
document.getElementById('conn-failed').textContent = formatNumber(data.connection.failedConnections);
|
||||
document.getElementById('start-time').textContent = formatTimestamp(data.startTime);
|
||||
|
||||
if (data.speedtest) {
|
||||
document.getElementById('online-dot').className = 'online-dot ' + (data.speedtest.isOnline ? 'online' : 'offline');
|
||||
document.getElementById('online-status').textContent = data.speedtest.isOnline ? 'Online' : 'Offline';
|
||||
document.getElementById('online-status').className = 'value ' + (data.speedtest.isOnline ? 'success' : 'error');
|
||||
document.getElementById('speed-download').textContent = data.speedtest.lastDownloadSpeedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-upload').textContent = data.speedtest.lastUploadSpeedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-latency').textContent = data.speedtest.lastLatencyMs.toFixed(0) + ' ms';
|
||||
document.getElementById('speed-download-bar').style.width = Math.min(data.speedtest.lastDownloadSpeedMbps, 100) + '%';
|
||||
document.getElementById('speed-upload-bar').style.width = Math.min(data.speedtest.lastUploadSpeedMbps, 100) + '%';
|
||||
}
|
||||
|
||||
document.getElementById('url-count').textContent = data.resourceCount || 0;
|
||||
document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
|
||||
}
|
||||
|
||||
// Speedtest
|
||||
let speedtestRunning = false;
|
||||
document.getElementById('run-speedtest').addEventListener('click', async () => {
|
||||
if (speedtestRunning) return;
|
||||
speedtestRunning = true;
|
||||
const btn = document.getElementById('run-speedtest');
|
||||
btn.textContent = 'Testing...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/sw-dash/speedtest');
|
||||
const result = await response.json();
|
||||
document.getElementById('online-dot').className = 'online-dot ' + (result.isOnline ? 'online' : 'offline');
|
||||
document.getElementById('online-status').textContent = result.isOnline ? 'Online' : 'Offline';
|
||||
document.getElementById('online-status').className = 'value ' + (result.isOnline ? 'success' : 'error');
|
||||
if (result.download) {
|
||||
document.getElementById('speed-download').textContent = result.download.speedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-download-bar').style.width = Math.min(result.download.speedMbps, 100) + '%';
|
||||
}
|
||||
if (result.upload) {
|
||||
document.getElementById('speed-upload').textContent = result.upload.speedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-upload-bar').style.width = Math.min(result.upload.speedMbps, 100) + '%';
|
||||
}
|
||||
if (result.latency) {
|
||||
document.getElementById('speed-latency').textContent = result.latency.durationMs.toFixed(0) + ' ms';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Speedtest failed:', err);
|
||||
document.getElementById('online-dot').className = 'online-dot offline';
|
||||
document.getElementById('online-status').textContent = 'Offline';
|
||||
document.getElementById('online-status').className = 'value error';
|
||||
} finally {
|
||||
speedtestRunning = false;
|
||||
btn.textContent = 'Run Test';
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-refresh
|
||||
setInterval(async () => {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/metrics');
|
||||
const data = await response.json();
|
||||
updateOverview(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch metrics:', err);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
// Initial load
|
||||
loadResourceData();
|
||||
</script>
|
||||
<sw-dash-app></sw-dash-app>
|
||||
<script type="module" src="/sw-dash/bundle.js"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format bytes to human-readable string
|
||||
*/
|
||||
private formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Format duration to human-readable string
|
||||
*/
|
||||
private formatDuration(ms: number): string {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) return `${days}d ${hours % 24}h`;
|
||||
if (hours > 0) return `${hours}h ${minutes % 60}m`;
|
||||
if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
|
||||
return `${seconds}s`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format timestamp to relative time string
|
||||
*/
|
||||
private formatTimestamp(ts: number): string {
|
||||
if (!ts || ts === 0) return 'never';
|
||||
const ago = Date.now() - ts;
|
||||
if (ago < 60000) return `${Math.floor(ago / 1000)}s ago`;
|
||||
if (ago < 3600000) return `${Math.floor(ago / 60000)}m ago`;
|
||||
if (ago < 86400000) return `${Math.floor(ago / 3600000)}h ago`;
|
||||
return new Date(ts).toLocaleDateString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Format number with thousands separator
|
||||
*/
|
||||
private formatNumber(num: number): string {
|
||||
return num.toLocaleString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get gauge class based on percentage
|
||||
*/
|
||||
private getGaugeClass(rate: number): string {
|
||||
if (rate >= 80) return 'good';
|
||||
if (rate >= 50) return 'warning';
|
||||
return 'bad';
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton getter
|
||||
|
||||
Reference in New Issue
Block a user