506 lines
14 KiB
TypeScript
506 lines
14 KiB
TypeScript
import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
|
|
import * as appstate from '../appstate.js';
|
|
import { viewHostCss } from './shared/css.js';
|
|
import { type IStatsTile } from '@design.estate/dees-catalog';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'ops-view-network': OpsViewNetwork;
|
|
}
|
|
}
|
|
|
|
interface INetworkRequest {
|
|
id: string;
|
|
timestamp: number;
|
|
method: string;
|
|
url: string;
|
|
hostname: string;
|
|
port: number;
|
|
protocol: 'http' | 'https' | 'tcp' | 'udp';
|
|
statusCode?: number;
|
|
duration: number;
|
|
bytesIn: number;
|
|
bytesOut: number;
|
|
remoteIp: string;
|
|
route?: string;
|
|
}
|
|
|
|
@customElement('ops-view-network')
|
|
export class OpsViewNetwork extends DeesElement {
|
|
@state()
|
|
private statsState = appstate.statsStatePart.getState();
|
|
|
|
@state()
|
|
private selectedTimeRange: '1m' | '5m' | '15m' | '1h' | '24h' = '5m';
|
|
|
|
@state()
|
|
private selectedProtocol: 'all' | 'http' | 'https' | 'smtp' | 'dns' = 'all';
|
|
|
|
@state()
|
|
private networkRequests: INetworkRequest[] = [];
|
|
|
|
@state()
|
|
private trafficData: Array<{ x: number; y: number }> = [];
|
|
|
|
@state()
|
|
private isLoading = false;
|
|
|
|
constructor() {
|
|
super();
|
|
this.subscribeToStateParts();
|
|
this.generateMockData(); // TODO: Replace with real data from metrics
|
|
}
|
|
|
|
private subscribeToStateParts() {
|
|
appstate.statsStatePart.state.subscribe((state) => {
|
|
this.statsState = state;
|
|
this.updateNetworkData();
|
|
});
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
viewHostCss,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 24px;
|
|
}
|
|
|
|
.networkContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.controlBar {
|
|
background: white;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.controlGroup {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.controlLabel {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
dees-statsgrid {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
dees-chart-area {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.protocolBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.protocolBadge.http {
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
}
|
|
|
|
.protocolBadge.https {
|
|
background: #e8f5e9;
|
|
color: #388e3c;
|
|
}
|
|
|
|
.protocolBadge.tcp {
|
|
background: #fff3e0;
|
|
color: #f57c00;
|
|
}
|
|
|
|
.protocolBadge.smtp {
|
|
background: #f3e5f5;
|
|
color: #7b1fa2;
|
|
}
|
|
|
|
.protocolBadge.dns {
|
|
background: #e0f2f1;
|
|
color: #00796b;
|
|
}
|
|
|
|
.statusBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.statusBadge.success {
|
|
background: #e8f5e9;
|
|
color: #388e3c;
|
|
}
|
|
|
|
.statusBadge.error {
|
|
background: #ffebee;
|
|
color: #d32f2f;
|
|
}
|
|
|
|
.statusBadge.warning {
|
|
background: #fff3e0;
|
|
color: #f57c00;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<ops-sectionheading>Network Activity</ops-sectionheading>
|
|
|
|
<div class="networkContainer">
|
|
<!-- Control Bar -->
|
|
<div class="controlBar">
|
|
<div class="controlGroup">
|
|
<span class="controlLabel">Time Range:</span>
|
|
<dees-button-group>
|
|
${(['1m', '5m', '15m', '1h', '24h'] as const).map(range => html`
|
|
<dees-button
|
|
@click=${() => this.selectedTimeRange = range}
|
|
.type=${this.selectedTimeRange === range ? 'highlighted' : 'normal'}
|
|
>
|
|
${range}
|
|
</dees-button>
|
|
`)}
|
|
</dees-button-group>
|
|
</div>
|
|
|
|
<div class="controlGroup">
|
|
<span class="controlLabel">Protocol:</span>
|
|
<dees-input-dropdown
|
|
.options=${[
|
|
{ key: 'all', label: 'All Protocols' },
|
|
{ key: 'http', label: 'HTTP' },
|
|
{ key: 'https', label: 'HTTPS' },
|
|
{ key: 'smtp', label: 'SMTP' },
|
|
{ key: 'dns', label: 'DNS' },
|
|
]}
|
|
.selectedOption=${{ key: this.selectedProtocol, label: this.getProtocolLabel(this.selectedProtocol) }}
|
|
@selectedOption=${(e: CustomEvent) => this.selectedProtocol = e.detail.key}
|
|
></dees-input-dropdown>
|
|
</div>
|
|
|
|
<div style="margin-left: auto;">
|
|
<dees-button
|
|
@click=${() => this.refreshData()}
|
|
.disabled=${this.isLoading}
|
|
>
|
|
${this.isLoading ? html`<dees-spinner size="small"></dees-spinner>` : 'Refresh'}
|
|
</dees-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
${this.renderNetworkStats()}
|
|
|
|
<!-- Traffic Chart -->
|
|
<dees-chart-area
|
|
.label=${'Network Traffic'}
|
|
.series=${[
|
|
{
|
|
name: 'Requests/min',
|
|
data: this.trafficData,
|
|
}
|
|
]}
|
|
></dees-chart-area>
|
|
|
|
<!-- Requests Table -->
|
|
<dees-table
|
|
.data=${this.getFilteredRequests()}
|
|
.displayFunction=${(req: INetworkRequest) => ({
|
|
Time: new Date(req.timestamp).toLocaleTimeString(),
|
|
Protocol: html`<span class="protocolBadge ${req.protocol}">${req.protocol.toUpperCase()}</span>`,
|
|
Method: req.method,
|
|
'Host:Port': `${req.hostname}:${req.port}`,
|
|
Path: this.truncateUrl(req.url),
|
|
Status: this.renderStatus(req.statusCode),
|
|
Duration: `${req.duration}ms`,
|
|
'In/Out': `${this.formatBytes(req.bytesIn)} / ${this.formatBytes(req.bytesOut)}`,
|
|
'Remote IP': req.remoteIp,
|
|
})}
|
|
.dataActions=${[
|
|
{
|
|
name: 'View Details',
|
|
iconName: 'magnifyingGlass',
|
|
type: ['inRow', 'doubleClick', 'contextmenu'],
|
|
actionFunc: async (actionData) => {
|
|
await this.showRequestDetails(actionData.item);
|
|
}
|
|
}
|
|
]}
|
|
heading1="Recent Network Activity"
|
|
heading2="Last ${this.selectedTimeRange} of network requests"
|
|
searchable
|
|
.pagination=${true}
|
|
.paginationSize=${50}
|
|
dataName="request"
|
|
></dees-table>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private async showRequestDetails(request: INetworkRequest) {
|
|
const { DeesModal } = await import('@design.estate/dees-catalog');
|
|
|
|
await DeesModal.createAndShow({
|
|
heading: 'Request Details',
|
|
content: html`
|
|
<div style="padding: 20px;">
|
|
<dees-dataview-codebox
|
|
.heading=${'Request Information'}
|
|
progLang="json"
|
|
.codeToDisplay=${JSON.stringify({
|
|
id: request.id,
|
|
timestamp: new Date(request.timestamp).toISOString(),
|
|
protocol: request.protocol,
|
|
method: request.method,
|
|
url: request.url,
|
|
hostname: request.hostname,
|
|
port: request.port,
|
|
statusCode: request.statusCode,
|
|
duration: `${request.duration}ms`,
|
|
bytesIn: request.bytesIn,
|
|
bytesOut: request.bytesOut,
|
|
remoteIp: request.remoteIp,
|
|
route: request.route,
|
|
}, null, 2)}
|
|
></dees-dataview-codebox>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'Copy Request ID',
|
|
iconName: 'copy',
|
|
action: async () => {
|
|
await navigator.clipboard.writeText(request.id);
|
|
// TODO: Implement toast notification when DeesToast.show is available
|
|
console.log('Request ID copied to clipboard');
|
|
}
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
private getFilteredRequests(): INetworkRequest[] {
|
|
if (this.selectedProtocol === 'all') {
|
|
return this.networkRequests;
|
|
}
|
|
|
|
// Map protocol filter to actual protocol values
|
|
const protocolMap: Record<string, string[]> = {
|
|
'http': ['http'],
|
|
'https': ['https'],
|
|
'smtp': ['tcp'], // SMTP runs over TCP
|
|
'dns': ['udp'], // DNS typically runs over UDP
|
|
};
|
|
|
|
const allowedProtocols = protocolMap[this.selectedProtocol] || [this.selectedProtocol];
|
|
return this.networkRequests.filter(req => allowedProtocols.includes(req.protocol));
|
|
}
|
|
|
|
private renderStatus(statusCode?: number): TemplateResult {
|
|
if (!statusCode) {
|
|
return html`<span class="statusBadge warning">N/A</span>`;
|
|
}
|
|
|
|
const statusClass = statusCode >= 200 && statusCode < 300 ? 'success' :
|
|
statusCode >= 400 ? 'error' : 'warning';
|
|
|
|
return html`<span class="statusBadge ${statusClass}">${statusCode}</span>`;
|
|
}
|
|
|
|
private truncateUrl(url: string, maxLength = 50): string {
|
|
if (url.length <= maxLength) return url;
|
|
return url.substring(0, maxLength - 3) + '...';
|
|
}
|
|
|
|
private getProtocolLabel(protocol: string): string {
|
|
const labels: Record<string, string> = {
|
|
'all': 'All Protocols',
|
|
'http': 'HTTP',
|
|
'https': 'HTTPS',
|
|
'smtp': 'SMTP',
|
|
'dns': 'DNS',
|
|
};
|
|
return labels[protocol] || protocol.toUpperCase();
|
|
}
|
|
|
|
private formatNumber(num: number): string {
|
|
if (num >= 1000000) {
|
|
return (num / 1000000).toFixed(1) + 'M';
|
|
} else if (num >= 1000) {
|
|
return (num / 1000).toFixed(1) + 'K';
|
|
}
|
|
return num.toFixed(0);
|
|
}
|
|
|
|
private formatBytes(bytes: number): string {
|
|
const units = ['B', 'KB', 'MB', 'GB'];
|
|
let size = bytes;
|
|
let unitIndex = 0;
|
|
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
size /= 1024;
|
|
unitIndex++;
|
|
}
|
|
|
|
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
|
}
|
|
|
|
private calculateRequestsPerSecond(): number {
|
|
// TODO: Calculate from real data based on connection metrics
|
|
// For now, return a calculated value based on active connections
|
|
return Math.floor((this.statsState.serverStats?.activeConnections || 0) * 0.8);
|
|
}
|
|
|
|
private calculateThroughput(): { in: number; out: number } {
|
|
// TODO: Calculate from real connection data
|
|
// For now, return estimated values
|
|
const activeConnections = this.statsState.serverStats?.activeConnections || 0;
|
|
return {
|
|
in: activeConnections * 1024 * 10, // 10KB per connection estimate
|
|
out: activeConnections * 1024 * 50, // 50KB per connection estimate
|
|
};
|
|
}
|
|
|
|
private renderNetworkStats(): TemplateResult {
|
|
const reqPerSec = this.calculateRequestsPerSecond();
|
|
const throughput = this.calculateThroughput();
|
|
const activeConnections = this.statsState.serverStats?.activeConnections || 0;
|
|
|
|
// Generate trend data for requests per second
|
|
const trendData = Array.from({ length: 20 }, (_, i) =>
|
|
Math.max(0, reqPerSec + (Math.random() - 0.5) * 10)
|
|
);
|
|
|
|
const tiles: IStatsTile[] = [
|
|
{
|
|
id: 'connections',
|
|
title: 'Active Connections',
|
|
value: activeConnections,
|
|
type: 'number',
|
|
icon: 'plug',
|
|
color: activeConnections > 100 ? '#f59e0b' : '#22c55e',
|
|
description: `Total: ${this.statsState.serverStats?.totalConnections || 0}`,
|
|
actions: [
|
|
{
|
|
name: 'View Details',
|
|
iconName: 'magnifyingGlass',
|
|
action: async () => {
|
|
// TODO: Show connection details
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 'requests',
|
|
title: 'Requests/sec',
|
|
value: reqPerSec,
|
|
type: 'trend',
|
|
icon: 'chartLine',
|
|
color: '#3b82f6',
|
|
trendData: trendData,
|
|
description: `${this.formatNumber(reqPerSec)} req/s`,
|
|
},
|
|
{
|
|
id: 'throughputIn',
|
|
title: 'Throughput In',
|
|
value: this.formatBytes(throughput.in),
|
|
unit: '/s',
|
|
type: 'number',
|
|
icon: 'download',
|
|
color: '#22c55e',
|
|
},
|
|
{
|
|
id: 'throughputOut',
|
|
title: 'Throughput Out',
|
|
value: this.formatBytes(throughput.out),
|
|
unit: '/s',
|
|
type: 'number',
|
|
icon: 'upload',
|
|
color: '#8b5cf6',
|
|
},
|
|
];
|
|
|
|
return html`
|
|
<dees-statsgrid
|
|
.tiles=${tiles}
|
|
.minTileWidth=${200}
|
|
.gridActions=${[
|
|
{
|
|
name: 'Export Data',
|
|
iconName: 'fileExport',
|
|
action: async () => {
|
|
// TODO: Export network data
|
|
// TODO: Implement toast notification when DeesToast.show is available
|
|
console.log('Export feature coming soon');
|
|
},
|
|
},
|
|
]}
|
|
></dees-statsgrid>
|
|
`;
|
|
}
|
|
|
|
private async refreshData() {
|
|
this.isLoading = true;
|
|
await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
|
|
await this.updateNetworkData();
|
|
this.isLoading = false;
|
|
}
|
|
|
|
private async updateNetworkData() {
|
|
// TODO: Fetch real network data from the server
|
|
// For now, using mock data
|
|
this.generateMockData();
|
|
}
|
|
|
|
private generateMockData() {
|
|
// Generate mock network requests
|
|
const now = Date.now();
|
|
const protocols: Array<'http' | 'https' | 'tcp' | 'udp'> = ['http', 'https', 'tcp', 'udp'];
|
|
const methods = ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'];
|
|
const hosts = ['api.example.com', 'app.local', 'mail.server.com', 'dns.resolver.net'];
|
|
|
|
this.networkRequests = Array.from({ length: 100 }, (_, i) => ({
|
|
id: `req-${i}`,
|
|
timestamp: now - (i * 5000), // 5 seconds apart
|
|
method: methods[Math.floor(Math.random() * methods.length)],
|
|
url: `/api/v1/resource/${Math.floor(Math.random() * 100)}`,
|
|
hostname: hosts[Math.floor(Math.random() * hosts.length)],
|
|
port: Math.random() > 0.5 ? 443 : 80,
|
|
protocol: protocols[Math.floor(Math.random() * protocols.length)],
|
|
statusCode: Math.random() > 0.8 ? 404 : 200,
|
|
duration: Math.floor(Math.random() * 500),
|
|
bytesIn: Math.floor(Math.random() * 10000),
|
|
bytesOut: Math.floor(Math.random() * 50000),
|
|
remoteIp: `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
|
|
route: 'main-route',
|
|
}));
|
|
|
|
// Generate traffic data for chart
|
|
this.trafficData = Array.from({ length: 60 }, (_, i) => ({
|
|
x: now - (i * 60000), // 1 minute intervals
|
|
y: Math.floor(Math.random() * 100) + 50,
|
|
})).reverse();
|
|
}
|
|
} |