feat(web-ui): reorganize dashboard views into grouped navigation with new email, access, and network subviews
This commit is contained in:
2
ts_web/elements/overview/index.ts
Normal file
2
ts_web/elements/overview/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './ops-view-overview.js';
|
||||
export * from './ops-view-config.js';
|
||||
334
ts_web/elements/overview/ops-view-config.ts
Normal file
334
ts_web/elements/overview/ops-view-config.ts
Normal file
@@ -0,0 +1,334 @@
|
||||
import * as plugins from '../../plugins.js';
|
||||
import * as shared from '../shared/index.js';
|
||||
import * as appstate from '../../appstate.js';
|
||||
import { appRouter } from '../../router.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
state,
|
||||
css,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import type { IConfigField, IConfigSectionAction } from '@serve.zone/catalog';
|
||||
|
||||
@customElement('ops-view-config')
|
||||
export class OpsViewConfig extends DeesElement {
|
||||
@state()
|
||||
accessor configState: appstate.IConfigState = {
|
||||
config: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const subscription = appstate.configStatePart
|
||||
.select((stateArg) => stateArg)
|
||||
.subscribe((configState) => {
|
||||
this.configState = configState;
|
||||
});
|
||||
this.rxSubscriptions.push(subscription);
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
shared.viewHostCss,
|
||||
css`
|
||||
.loadingMessage {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239,68,68,0.1)')};
|
||||
border: 1px solid ${cssManager.bdTheme('#fecaca', 'rgba(239,68,68,0.3)')};
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
margin: 16px 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<dees-heading level="2">Configuration</dees-heading>
|
||||
|
||||
${this.configState.isLoading
|
||||
? html`
|
||||
<div class="loadingMessage">
|
||||
<dees-spinner></dees-spinner>
|
||||
<p>Loading configuration...</p>
|
||||
</div>
|
||||
`
|
||||
: this.configState.error
|
||||
? html`
|
||||
<div class="errorMessage">
|
||||
Error loading configuration: ${this.configState.error}
|
||||
</div>
|
||||
`
|
||||
: this.configState.config
|
||||
? this.renderConfig()
|
||||
: html`<div class="errorMessage">No configuration loaded</div>`}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderConfig(): TemplateResult {
|
||||
const cfg = this.configState.config!;
|
||||
|
||||
return html`
|
||||
<sz-config-overview
|
||||
infoText="This view displays the current running configuration. DcRouter is configured through code or remote management."
|
||||
@navigate=${(e: CustomEvent) => {
|
||||
if (e.detail?.view) {
|
||||
appRouter.navigateToView(e.detail.view, e.detail.subview);
|
||||
}
|
||||
}}
|
||||
>
|
||||
${this.renderSystemSection(cfg.system)}
|
||||
${this.renderSmartProxySection(cfg.smartProxy)}
|
||||
${this.renderEmailSection(cfg.email)}
|
||||
${this.renderDnsSection(cfg.dns)}
|
||||
${this.renderTlsSection(cfg.tls)}
|
||||
${this.renderCacheSection(cfg.cache)}
|
||||
${this.renderRadiusSection(cfg.radius)}
|
||||
${this.renderRemoteIngressSection(cfg.remoteIngress)}
|
||||
</sz-config-overview>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderSystemSection(sys: NonNullable<appstate.IConfigState['config']>['system']): TemplateResult {
|
||||
// Annotate proxy IPs with source hint when Remote Ingress is active
|
||||
const ri = this.configState.config?.remoteIngress;
|
||||
let proxyIpValues: string[] | null = sys.proxyIps.length > 0 ? [...sys.proxyIps] : null;
|
||||
if (proxyIpValues && ri?.enabled && proxyIpValues.includes('127.0.0.1')) {
|
||||
proxyIpValues = proxyIpValues.map(ip =>
|
||||
ip === '127.0.0.1' ? '127.0.0.1 (Remote Ingress)' : ip
|
||||
);
|
||||
}
|
||||
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Base Directory', value: sys.baseDir },
|
||||
{ key: 'Data Directory', value: sys.dataDir },
|
||||
{ key: 'Public IP', value: sys.publicIp },
|
||||
{ key: 'Proxy IPs', value: proxyIpValues, type: 'pills' },
|
||||
{ key: 'Uptime', value: this.formatUptime(sys.uptime) },
|
||||
{ key: 'Storage Backend', value: sys.storageBackend, type: 'badge' },
|
||||
{ key: 'Storage Path', value: sys.storagePath },
|
||||
];
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="System"
|
||||
subtitle="Base paths and infrastructure"
|
||||
icon="lucide:server"
|
||||
status="enabled"
|
||||
.fields=${fields}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderSmartProxySection(proxy: NonNullable<appstate.IConfigState['config']>['smartProxy']): TemplateResult {
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Route Count', value: proxy.routeCount },
|
||||
];
|
||||
|
||||
if (proxy.acme) {
|
||||
fields.push(
|
||||
{ key: 'ACME Enabled', value: proxy.acme.enabled, type: 'boolean' },
|
||||
{ key: 'Account Email', value: proxy.acme.accountEmail || null },
|
||||
{ key: 'Use Production', value: proxy.acme.useProduction, type: 'boolean' },
|
||||
{ key: 'Auto Renew', value: proxy.acme.autoRenew, type: 'boolean' },
|
||||
{ key: 'Renew Threshold', value: `${proxy.acme.renewThresholdDays} days` },
|
||||
);
|
||||
}
|
||||
|
||||
const actions: IConfigSectionAction[] = [
|
||||
{ label: 'View Routes', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'network', subview: 'routes' } },
|
||||
];
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="SmartProxy"
|
||||
subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
|
||||
icon="lucide:network"
|
||||
.status=${proxy.enabled ? 'enabled' : 'disabled'}
|
||||
.fields=${fields}
|
||||
.actions=${actions}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderEmailSection(email: NonNullable<appstate.IConfigState['config']>['email']): TemplateResult {
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Ports', value: email.ports.length > 0 ? email.ports.map(String) : null, type: 'pills' },
|
||||
{ key: 'Hostname', value: email.hostname },
|
||||
{ key: 'Domains', value: email.domains.length > 0 ? email.domains : null, type: 'pills' },
|
||||
{ key: 'Email Routes', value: email.emailRouteCount },
|
||||
{ key: 'Received Emails Path', value: email.receivedEmailsPath },
|
||||
];
|
||||
|
||||
if (email.portMapping) {
|
||||
const mappingStr = Object.entries(email.portMapping)
|
||||
.map(([ext, int]) => `${ext} → ${int}`)
|
||||
.join(', ');
|
||||
fields.splice(1, 0, { key: 'Port Mapping', value: mappingStr, type: 'code' });
|
||||
}
|
||||
|
||||
const actions: IConfigSectionAction[] = [
|
||||
{ label: 'View Emails', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'email', subview: 'log' } },
|
||||
];
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="Email Server"
|
||||
subtitle="SMTP email handling with smartmta"
|
||||
icon="lucide:mail"
|
||||
.status=${email.enabled ? 'enabled' : 'disabled'}
|
||||
.fields=${fields}
|
||||
.actions=${actions}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDnsSection(dns: NonNullable<appstate.IConfigState['config']>['dns']): TemplateResult {
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Port', value: dns.port },
|
||||
{ key: 'NS Domains', value: dns.nsDomains.length > 0 ? dns.nsDomains : null, type: 'pills' },
|
||||
{ key: 'Scopes', value: dns.scopes.length > 0 ? dns.scopes : null, type: 'pills' },
|
||||
{ key: 'Record Count', value: dns.recordCount },
|
||||
{ key: 'DNS Challenge', value: dns.dnsChallenge, type: 'boolean' },
|
||||
];
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="DNS Server"
|
||||
subtitle="Authoritative DNS with smartdns"
|
||||
icon="lucide:globe"
|
||||
.status=${dns.enabled ? 'enabled' : 'disabled'}
|
||||
.fields=${fields}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTlsSection(tls: NonNullable<appstate.IConfigState['config']>['tls']): TemplateResult {
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Contact Email', value: tls.contactEmail },
|
||||
{ key: 'Domain', value: tls.domain },
|
||||
{ key: 'Source', value: tls.source, type: 'badge' },
|
||||
{ key: 'Certificate Path', value: tls.certPath },
|
||||
{ key: 'Key Path', value: tls.keyPath },
|
||||
];
|
||||
|
||||
const status = tls.source === 'none' ? 'not-configured' : 'enabled';
|
||||
const actions: IConfigSectionAction[] = [
|
||||
{ label: 'View Certificates', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'certificates' } },
|
||||
];
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="TLS / Certificates"
|
||||
subtitle="Certificate management and ACME"
|
||||
icon="lucide:shield-check"
|
||||
.status=${status as any}
|
||||
.fields=${fields}
|
||||
.actions=${actions}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderCacheSection(cache: NonNullable<appstate.IConfigState['config']>['cache']): TemplateResult {
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Storage Path', value: cache.storagePath },
|
||||
{ key: 'DB Name', value: cache.dbName },
|
||||
{ key: 'Default TTL', value: `${cache.defaultTTLDays} days` },
|
||||
{ key: 'Cleanup Interval', value: `${cache.cleanupIntervalHours} hours` },
|
||||
];
|
||||
|
||||
if (cache.ttlConfig && Object.keys(cache.ttlConfig).length > 0) {
|
||||
for (const [key, val] of Object.entries(cache.ttlConfig)) {
|
||||
fields.push({ key: `TTL: ${key}`, value: `${val} days` });
|
||||
}
|
||||
}
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="Cache Database"
|
||||
subtitle="Persistent caching with smartdata"
|
||||
icon="lucide:database"
|
||||
.status=${cache.enabled ? 'enabled' : 'disabled'}
|
||||
.fields=${fields}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderRadiusSection(radius: NonNullable<appstate.IConfigState['config']>['radius']): TemplateResult {
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Auth Port', value: radius.authPort },
|
||||
{ key: 'Accounting Port', value: radius.acctPort },
|
||||
{ key: 'Bind Address', value: radius.bindAddress },
|
||||
{ key: 'Client Count', value: radius.clientCount },
|
||||
];
|
||||
|
||||
if (radius.vlanDefaultVlan !== null) {
|
||||
fields.push(
|
||||
{ key: 'Default VLAN', value: radius.vlanDefaultVlan },
|
||||
{ key: 'Allow Unknown MACs', value: radius.vlanAllowUnknownMacs, type: 'boolean' },
|
||||
{ key: 'VLAN Mappings', value: radius.vlanMappingCount },
|
||||
);
|
||||
}
|
||||
|
||||
const status = radius.enabled ? 'enabled' : 'not-configured';
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="RADIUS Server"
|
||||
subtitle="Network authentication and VLAN assignment"
|
||||
icon="lucide:wifi"
|
||||
.status=${status as any}
|
||||
.fields=${fields}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderRemoteIngressSection(ri: NonNullable<appstate.IConfigState['config']>['remoteIngress']): TemplateResult {
|
||||
const fields: IConfigField[] = [
|
||||
{ key: 'Tunnel Port', value: ri.tunnelPort },
|
||||
{ key: 'Hub Domain', value: ri.hubDomain },
|
||||
{ key: 'TLS Mode', value: ri.tlsMode, type: 'badge' },
|
||||
{ key: 'Connected Edge IPs', value: ri.connectedEdgeIps?.length > 0 ? ri.connectedEdgeIps : null, type: 'pills' },
|
||||
];
|
||||
|
||||
const actions: IConfigSectionAction[] = [
|
||||
{ label: 'View Remote Ingress', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'network', subview: 'remoteingress' } },
|
||||
];
|
||||
|
||||
return html`
|
||||
<sz-config-section
|
||||
title="Remote Ingress"
|
||||
subtitle="Edge tunnel nodes"
|
||||
icon="lucide:cloud"
|
||||
.status=${ri.enabled ? 'enabled' : 'disabled'}
|
||||
.fields=${fields}
|
||||
.actions=${actions}
|
||||
></sz-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private formatUptime(seconds: number): string {
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const mins = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
const parts: string[] = [];
|
||||
if (days > 0) parts.push(`${days}d`);
|
||||
if (hours > 0) parts.push(`${hours}h`);
|
||||
parts.push(`${mins}m`);
|
||||
return parts.join(' ');
|
||||
}
|
||||
}
|
||||
519
ts_web/elements/overview/ops-view-overview.ts
Normal file
519
ts_web/elements/overview/ops-view-overview.ts
Normal file
@@ -0,0 +1,519 @@
|
||||
import * as plugins from '../../plugins.js';
|
||||
import * as shared from '../shared/index.js';
|
||||
import * as appstate from '../../appstate.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
state,
|
||||
css,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import { type IStatsTile } from '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('ops-view-overview')
|
||||
export class OpsViewOverview extends DeesElement {
|
||||
@state()
|
||||
accessor statsState: appstate.IStatsState = {
|
||||
serverStats: null,
|
||||
emailStats: null,
|
||||
dnsStats: null,
|
||||
securityMetrics: null,
|
||||
radiusStats: null,
|
||||
vpnStats: null,
|
||||
lastUpdated: 0,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
@state()
|
||||
accessor logState: appstate.ILogState = {
|
||||
recentLogs: [],
|
||||
isStreaming: false,
|
||||
filters: {},
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const statsSub = appstate.statsStatePart
|
||||
.select((stateArg) => stateArg)
|
||||
.subscribe((statsState) => {
|
||||
this.statsState = statsState;
|
||||
});
|
||||
this.rxSubscriptions.push(statsSub);
|
||||
|
||||
const logSub = appstate.logStatePart
|
||||
.select((stateArg) => stateArg)
|
||||
.subscribe((logState) => {
|
||||
this.logState = logState;
|
||||
});
|
||||
this.rxSubscriptions.push(logSub);
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Ensure logs are fetched for the overview charts
|
||||
if (this.logState.recentLogs.length === 0) {
|
||||
appstate.logStatePart.dispatchAction(appstate.fetchRecentLogsAction, { limit: 100 });
|
||||
}
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
shared.viewHostCss,
|
||||
css`
|
||||
.chartGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.loadingMessage {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: ${cssManager.bdTheme('#666', '#999')};
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
background-color: ${cssManager.bdTheme('#fee', '#4a1f1f')};
|
||||
border: 1px solid ${cssManager.bdTheme('#fcc', '#6a2f2f')};
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
color: ${cssManager.bdTheme('#c00', '#ff6666')};
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
dees-statsgrid {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<dees-heading level="2">Overview</dees-heading>
|
||||
|
||||
${this.statsState.isLoading ? html`
|
||||
<div class="loadingMessage">
|
||||
<dees-spinner></dees-spinner>
|
||||
<p>Loading statistics...</p>
|
||||
</div>
|
||||
` : this.statsState.error ? html`
|
||||
<div class="errorMessage">
|
||||
Error loading statistics: ${this.statsState.error}
|
||||
</div>
|
||||
` : html`
|
||||
${this.renderServerStats()}
|
||||
|
||||
${this.renderEmailStats()}
|
||||
|
||||
${this.renderDnsStats()}
|
||||
|
||||
${this.renderRadiusStats()}
|
||||
|
||||
${this.renderVpnStats()}
|
||||
|
||||
<dees-heading level="hr">Activity Charts</dees-heading>
|
||||
<div class="chartGrid">
|
||||
<dees-chart-area
|
||||
.label=${'Email Traffic (24h)'}
|
||||
.series=${this.getEmailTrafficSeries()}
|
||||
.realtimeMode=${true}
|
||||
.rollingWindow=${86400000}
|
||||
.yAxisFormatter=${(val: number) => `${val}`}
|
||||
></dees-chart-area>
|
||||
<dees-chart-area
|
||||
.label=${'DNS Queries (24h)'}
|
||||
.series=${this.getDnsQuerySeries()}
|
||||
.realtimeMode=${true}
|
||||
.rollingWindow=${86400000}
|
||||
.yAxisFormatter=${(val: number) => `${val}`}
|
||||
></dees-chart-area>
|
||||
<dees-chart-log
|
||||
.label=${'Recent Events'}
|
||||
.logEntries=${this.getRecentEventEntries()}
|
||||
></dees-chart-log>
|
||||
<dees-chart-log
|
||||
.label=${'DNS Queries'}
|
||||
.logEntries=${this.getDnsQueryEntries()}
|
||||
></dees-chart-log>
|
||||
</div>
|
||||
`}
|
||||
`;
|
||||
}
|
||||
|
||||
private formatUptime(seconds: number): string {
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}d ${hours}h ${minutes}m ${secs}s`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}h ${minutes}m ${secs}s`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}m ${secs}s`;
|
||||
} else {
|
||||
return `${secs}s`;
|
||||
}
|
||||
}
|
||||
|
||||
private formatBytes(bytes: number): string {
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
let size = bytes;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
private formatBitsPerSecond(bytesPerSecond: number): string {
|
||||
const bitsPerSecond = bytesPerSecond * 8;
|
||||
const units = ['bit/s', 'kbit/s', 'Mbit/s', 'Gbit/s'];
|
||||
let size = bitsPerSecond;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (size >= 1000 && unitIndex < units.length - 1) {
|
||||
size /= 1000;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
private renderServerStats(): TemplateResult {
|
||||
if (!this.statsState.serverStats) return html``;
|
||||
|
||||
const cpuUsage = Math.round(this.statsState.serverStats.cpuUsage.user);
|
||||
const memoryUsage = this.statsState.serverStats.memoryUsage.actualUsagePercentage !== undefined
|
||||
? Math.round(this.statsState.serverStats.memoryUsage.actualUsagePercentage)
|
||||
: Math.round((this.statsState.serverStats.memoryUsage.heapUsed / this.statsState.serverStats.memoryUsage.heapTotal) * 100);
|
||||
|
||||
const tiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'status',
|
||||
title: 'Server Status',
|
||||
value: this.statsState.serverStats.uptime ? 'Online' : 'Offline',
|
||||
type: 'text',
|
||||
icon: 'lucide:Server',
|
||||
color: this.statsState.serverStats.uptime ? '#22c55e' : '#ef4444',
|
||||
description: `Uptime: ${this.formatUptime(this.statsState.serverStats.uptime)}`,
|
||||
},
|
||||
{
|
||||
id: 'connections',
|
||||
title: 'Active Connections',
|
||||
value: this.statsState.serverStats.activeConnections,
|
||||
type: 'number',
|
||||
icon: 'lucide:Network',
|
||||
color: '#3b82f6',
|
||||
description: `Total: ${this.statsState.serverStats.totalConnections}`,
|
||||
},
|
||||
{
|
||||
id: 'throughputIn',
|
||||
title: 'Throughput In',
|
||||
value: this.formatBitsPerSecond(this.statsState.serverStats.throughput?.bytesInPerSecond || 0),
|
||||
type: 'text',
|
||||
icon: 'lucide:Download',
|
||||
color: '#22c55e',
|
||||
description: `Total: ${this.formatBytes(this.statsState.serverStats.throughput?.bytesIn || 0)}`,
|
||||
},
|
||||
{
|
||||
id: 'throughputOut',
|
||||
title: 'Throughput Out',
|
||||
value: this.formatBitsPerSecond(this.statsState.serverStats.throughput?.bytesOutPerSecond || 0),
|
||||
type: 'text',
|
||||
icon: 'lucide:Upload',
|
||||
color: '#8b5cf6',
|
||||
description: `Total: ${this.formatBytes(this.statsState.serverStats.throughput?.bytesOut || 0)}`,
|
||||
},
|
||||
{
|
||||
id: 'cpu',
|
||||
title: 'CPU Usage',
|
||||
value: cpuUsage,
|
||||
type: 'gauge',
|
||||
icon: 'lucide:Cpu',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: '#22c55e' },
|
||||
{ value: 60, color: '#f59e0b' },
|
||||
{ value: 80, color: '#ef4444' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'memory',
|
||||
title: 'Memory Usage',
|
||||
value: memoryUsage,
|
||||
type: 'percentage',
|
||||
icon: 'lucide:MemoryStick',
|
||||
color: memoryUsage > 80 ? '#ef4444' : memoryUsage > 60 ? '#f59e0b' : '#22c55e',
|
||||
description: this.statsState.serverStats.memoryUsage.actualUsageBytes !== undefined && this.statsState.serverStats.memoryUsage.maxMemoryMB !== undefined
|
||||
? `${this.formatBytes(this.statsState.serverStats.memoryUsage.actualUsageBytes)} / ${this.formatBytes(this.statsState.serverStats.memoryUsage.maxMemoryMB * 1024 * 1024)}`
|
||||
: `${this.formatBytes(this.statsState.serverStats.memoryUsage.rss)} / ${this.formatBytes(this.statsState.serverStats.memoryUsage.heapTotal)}`,
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-statsgrid
|
||||
.tiles=${tiles}
|
||||
.gridActions=${[
|
||||
{
|
||||
name: 'Refresh',
|
||||
iconName: 'lucide:RefreshCw',
|
||||
action: async () => {
|
||||
await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
|
||||
},
|
||||
},
|
||||
]}
|
||||
></dees-statsgrid>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderEmailStats(): TemplateResult {
|
||||
if (!this.statsState.emailStats) return html``;
|
||||
|
||||
const deliveryRate = this.statsState.emailStats.deliveryRate || 0;
|
||||
const bounceRate = this.statsState.emailStats.bounceRate || 0;
|
||||
|
||||
const tiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'sent',
|
||||
title: 'Emails Sent',
|
||||
value: this.statsState.emailStats.sent,
|
||||
type: 'number',
|
||||
icon: 'lucide:Send',
|
||||
color: '#22c55e',
|
||||
description: `Delivery rate: ${(deliveryRate * 100).toFixed(1)}%`,
|
||||
},
|
||||
{
|
||||
id: 'received',
|
||||
title: 'Emails Received',
|
||||
value: this.statsState.emailStats.received,
|
||||
type: 'number',
|
||||
icon: 'lucide:Mail',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
{
|
||||
id: 'queued',
|
||||
title: 'Queued',
|
||||
value: this.statsState.emailStats.queued,
|
||||
type: 'number',
|
||||
icon: 'lucide:Clock',
|
||||
color: '#f59e0b',
|
||||
description: 'Pending delivery',
|
||||
},
|
||||
{
|
||||
id: 'failed',
|
||||
title: 'Failed',
|
||||
value: this.statsState.emailStats.failed,
|
||||
type: 'number',
|
||||
icon: 'lucide:TriangleAlert',
|
||||
color: '#ef4444',
|
||||
description: `Bounce rate: ${(bounceRate * 100).toFixed(1)}%`,
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-heading level="hr">Email Statistics</dees-heading>
|
||||
<dees-statsgrid .tiles=${tiles}></dees-statsgrid>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDnsStats(): TemplateResult {
|
||||
if (!this.statsState.dnsStats) return html``;
|
||||
|
||||
const cacheHitRate = Math.round(this.statsState.dnsStats.cacheHitRate * 100);
|
||||
|
||||
const tiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'queries',
|
||||
title: 'DNS Queries',
|
||||
value: this.statsState.dnsStats.totalQueries,
|
||||
type: 'number',
|
||||
icon: 'lucide:Globe',
|
||||
color: '#3b82f6',
|
||||
description: 'Total queries handled',
|
||||
},
|
||||
{
|
||||
id: 'cacheRate',
|
||||
title: 'Cache Hit Rate',
|
||||
value: cacheHitRate,
|
||||
type: 'percentage',
|
||||
icon: 'lucide:Database',
|
||||
color: cacheHitRate > 80 ? '#22c55e' : cacheHitRate > 60 ? '#f59e0b' : '#ef4444',
|
||||
description: `${this.statsState.dnsStats.cacheHits} hits / ${this.statsState.dnsStats.cacheMisses} misses`,
|
||||
},
|
||||
{
|
||||
id: 'domains',
|
||||
title: 'Active Domains',
|
||||
value: this.statsState.dnsStats.activeDomains,
|
||||
type: 'number',
|
||||
icon: 'lucide:Network',
|
||||
color: '#8b5cf6',
|
||||
},
|
||||
{
|
||||
id: 'responseTime',
|
||||
title: 'Avg Response Time',
|
||||
value: this.statsState.dnsStats.averageResponseTime.toFixed(1),
|
||||
unit: 'ms',
|
||||
type: 'number',
|
||||
icon: 'lucide:History',
|
||||
color: this.statsState.dnsStats.averageResponseTime < 50 ? '#22c55e' : '#f59e0b',
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-heading level="hr">DNS Statistics</dees-heading>
|
||||
<dees-statsgrid .tiles=${tiles}></dees-statsgrid>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderRadiusStats(): TemplateResult {
|
||||
if (!this.statsState.radiusStats) return html``;
|
||||
|
||||
const stats = this.statsState.radiusStats;
|
||||
const authTotal = stats.authRequests || 0;
|
||||
const acceptRate = authTotal > 0 ? ((stats.authAccepts / authTotal) * 100).toFixed(1) : '0.0';
|
||||
|
||||
const tiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'radiusStatus',
|
||||
title: 'RADIUS Status',
|
||||
value: stats.running ? 'Running' : 'Stopped',
|
||||
type: 'text',
|
||||
icon: 'lucide:ShieldCheck',
|
||||
color: stats.running ? '#22c55e' : '#ef4444',
|
||||
description: stats.running ? `Uptime: ${this.formatUptime(stats.uptime / 1000)}` : undefined,
|
||||
},
|
||||
{
|
||||
id: 'authRequests',
|
||||
title: 'Auth Requests',
|
||||
value: stats.authRequests,
|
||||
type: 'number',
|
||||
icon: 'lucide:KeyRound',
|
||||
color: '#3b82f6',
|
||||
description: `Accept rate: ${acceptRate}% (${stats.authAccepts} / ${stats.authRejects} rejected)`,
|
||||
},
|
||||
{
|
||||
id: 'activeSessions',
|
||||
title: 'Active Sessions',
|
||||
value: stats.activeSessions,
|
||||
type: 'number',
|
||||
icon: 'lucide:Users',
|
||||
color: '#8b5cf6',
|
||||
},
|
||||
{
|
||||
id: 'radiusTraffic',
|
||||
title: 'Data Transfer',
|
||||
value: this.formatBytes(stats.totalInputBytes + stats.totalOutputBytes),
|
||||
type: 'text',
|
||||
icon: 'lucide:ArrowLeftRight',
|
||||
color: '#f59e0b',
|
||||
description: `In: ${this.formatBytes(stats.totalInputBytes)} / Out: ${this.formatBytes(stats.totalOutputBytes)}`,
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-heading level="hr">RADIUS Statistics</dees-heading>
|
||||
<dees-statsgrid .tiles=${tiles}></dees-statsgrid>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderVpnStats(): TemplateResult {
|
||||
if (!this.statsState.vpnStats) return html``;
|
||||
|
||||
const stats = this.statsState.vpnStats;
|
||||
|
||||
const tiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'vpnStatus',
|
||||
title: 'VPN Status',
|
||||
value: stats.running ? 'Running' : 'Stopped',
|
||||
type: 'text',
|
||||
icon: 'lucide:Shield',
|
||||
color: stats.running ? '#22c55e' : '#ef4444',
|
||||
description: `Subnet: ${stats.subnet}`,
|
||||
},
|
||||
{
|
||||
id: 'connectedClients',
|
||||
title: 'Connected Clients',
|
||||
value: stats.connectedClients,
|
||||
type: 'number',
|
||||
icon: 'lucide:Wifi',
|
||||
color: '#3b82f6',
|
||||
description: `${stats.registeredClients} registered`,
|
||||
},
|
||||
{
|
||||
id: 'wgPort',
|
||||
title: 'WireGuard Port',
|
||||
value: stats.wgListenPort,
|
||||
type: 'number',
|
||||
icon: 'lucide:Network',
|
||||
color: '#8b5cf6',
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-heading level="hr">VPN Statistics</dees-heading>
|
||||
<dees-statsgrid .tiles=${tiles}></dees-statsgrid>
|
||||
`;
|
||||
}
|
||||
|
||||
// --- Chart data helpers ---
|
||||
|
||||
private getRecentEventEntries(): Array<{ timestamp: string; level: 'debug' | 'info' | 'warn' | 'error' | 'success'; message: string; source?: string }> {
|
||||
return this.logState.recentLogs.map((log) => ({
|
||||
timestamp: new Date(log.timestamp).toISOString(),
|
||||
level: log.level as 'debug' | 'info' | 'warn' | 'error',
|
||||
message: log.message,
|
||||
source: log.category,
|
||||
}));
|
||||
}
|
||||
|
||||
private getSecurityAlertEntries(): Array<{ timestamp: string; level: 'debug' | 'info' | 'warn' | 'error' | 'success'; message: string; source?: string }> {
|
||||
const events: any[] = this.statsState.securityMetrics?.recentEvents || [];
|
||||
return events.map((evt: any) => ({
|
||||
timestamp: new Date(evt.timestamp).toISOString(),
|
||||
level: evt.level === 'critical' || evt.level === 'error' ? 'error' as const : evt.level === 'warn' ? 'warn' as const : 'info' as const,
|
||||
message: evt.message,
|
||||
source: evt.type,
|
||||
}));
|
||||
}
|
||||
|
||||
private getDnsQueryEntries(): Array<{ timestamp: string; level: 'debug' | 'info' | 'warn' | 'error' | 'success'; message: string; source?: string }> {
|
||||
const queries: any[] = (this.statsState.dnsStats as any)?.recentQueries || [];
|
||||
return queries.map((q: any) => ({
|
||||
timestamp: new Date(q.timestamp).toISOString(),
|
||||
level: q.answered ? 'info' as const : 'warn' as const,
|
||||
message: `${q.type} ${q.domain} (${q.responseTimeMs}ms)`,
|
||||
source: 'dns',
|
||||
}));
|
||||
}
|
||||
|
||||
private getEmailTrafficSeries(): Array<{ name: string; color: string; data: Array<{ x: number; y: number }> }> {
|
||||
const ts = this.statsState.emailStats?.timeSeries;
|
||||
if (!ts) return [];
|
||||
return [
|
||||
{ name: 'Sent', color: '#22c55e', data: (ts.sent || []).map((p: any) => ({ x: p.timestamp, y: p.value })) },
|
||||
{ name: 'Received', color: '#3b82f6', data: (ts.received || []).map((p: any) => ({ x: p.timestamp, y: p.value })) },
|
||||
];
|
||||
}
|
||||
|
||||
private getDnsQuerySeries(): Array<{ name: string; color: string; data: Array<{ x: number; y: number }> }> {
|
||||
const ts = this.statsState.dnsStats?.timeSeries;
|
||||
if (!ts) return [];
|
||||
return [
|
||||
{ name: 'Queries', color: '#8b5cf6', data: (ts.queries || []).map((p: any) => ({ x: p.timestamp, y: p.value })) },
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user