serve.zone/dcrouter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ops/monitoring): add in-memory log buffer, metrics time-series and ops UI integration

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-19 17:23:43 +00:00
parent dc6ce341bd
commit eacddc7ce1
14 changed files with 482 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
ts_web/elements/ops-view-overview.ts
View File

@@ -26,14 +26,36 @@ export class OpsViewOverview extends DeesElement {
error: null,
};
@state()
accessor logState: appstate.ILogState = {
recentLogs: [],
isStreaming: false,
filters: {},
};
constructor() {
super();
const subscription = appstate.statsStatePart
const statsSub = appstate.statsStatePart
.select((stateArg) => stateArg)
.subscribe((statsState) => {
this.statsState = statsState;
});
this.rxSubscriptions.push(subscription);
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 = [
@@ -96,10 +118,24 @@ export class OpsViewOverview extends DeesElement {
${this.renderDnsStats()}
<div class="chartGrid">
<dees-chart-area .label=${'Email Traffic (24h)'} .data=${[]}></dees-chart-area>
<dees-chart-area .label=${'DNS Queries (24h)'} .data=${[]}></dees-chart-area>
<dees-chart-log .label=${'Recent Events'} .data=${[]}></dees-chart-log>
<dees-chart-log .label=${'Security Alerts'} .data=${[]}></dees-chart-log>
<dees-chart-area
.label=${'Email Traffic (24h)'}
.series=${this.getEmailTrafficSeries()}
.yAxisFormatter=${(val: number) => `${val}`}
></dees-chart-area>
<dees-chart-area
.label=${'DNS Queries (24h)'}
.series=${this.getDnsQuerySeries()}
.yAxisFormatter=${(val: number) => `${val}`}
></dees-chart-area>
<dees-chart-log
.label=${'Recent Events'}
.logEntries=${this.getRecentEventEntries()}
></dees-chart-log>
<dees-chart-log
.label=${'Security Alerts'}
.logEntries=${this.getSecurityAlertEntries()}
></dees-chart-log>
</div>
`}
`;
@@ -337,4 +373,42 @@ export class OpsViewOverview extends DeesElement {
<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 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 })) },
];
}
}