decentralized-internet
Version:
An NPM library of programs to create decentralized web and distributed computing projects
188 lines (167 loc) • 7.89 kB
text/typescript
import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
import * as React from '@theia/core/shared/react';
import { DecentralizedInternetManager, SDKComponent, SDKMetrics } from './decentralized-internet-manager';
import { MessageService } from '@theia/core/lib/browser';
()
export class DecentralizedInternetWidget extends ReactWidget {
static readonly ID = 'decentralized-internet:widget';
static readonly LABEL = 'SDK Dashboard';
(DecentralizedInternetManager)
protected readonly manager!: DecentralizedInternetManager;
(MessageService)
protected readonly messageService!: MessageService;
private components: SDKComponent[] = [];
private metrics: SDKMetrics | null = null;
()
protected init(): void {
this.id = DecentralizedInternetWidget.ID;
this.title.label = DecentralizedInternetWidget.LABEL;
this.title.caption = DecentralizedInternetWidget.LABEL;
this.title.closable = true;
this.title.iconClass = 'fa fa-cube';
this.update();
this.manager.onComponentsChange(components => {
this.components = components;
this.update();
});
this.manager.onMetricsChange(metrics => {
this.metrics = metrics;
this.update();
});
}
protected render(): React.ReactNode {
return (
<div className='sdk-dashboard' style={{ padding: '20px', height: '100%', overflow: 'auto' }}>
<h2>Decentralized Internet SDK Dashboard</h2>
{this.renderMetrics()}
{this.renderComponents()}
</div>
);
}
private renderMetrics(): React.ReactNode {
if (!this.metrics) {
return <div>Loading metrics...</div>;
}
return (
<div style={{ marginBottom: '30px' }}>
<h3>System Metrics</h3>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
<div style={{ padding: '15px', background: '#2d2d2d', borderRadius: '5px' }}>
<strong>CPU Usage:</strong> {this.metrics.cpu.toFixed(2)}%
</div>
<div style={{ padding: '15px', background: '#2d2d2d', borderRadius: '5px' }}>
<strong>Memory Usage:</strong> {this.metrics.memory.toFixed(2)}%
</div>
<div style={{ padding: '15px', background: '#2d2d2d', borderRadius: '5px' }}>
<strong>Network RX:</strong> {(this.metrics.network.rx / 1024).toFixed(2)} KB/s
</div>
<div style={{ padding: '15px', background: '#2d2d2d', borderRadius: '5px' }}>
<strong>Network TX:</strong> {(this.metrics.network.tx / 1024).toFixed(2)} KB/s
</div>
</div>
</div>
);
}
private renderComponents(): React.ReactNode {
if (this.components.length === 0) {
return <div>No components found. Make sure the UI Dashboard is running on port 9000.</div>;
}
return (
<div>
<h3>SDK Components</h3>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ borderBottom: '2px solid #444' }}>
<th style={{ padding: '10px', textAlign: 'left' }}>Component</th>
<th style={{ padding: '10px', textAlign: 'left' }}>Status</th>
<th style={{ padding: '10px', textAlign: 'left' }}>PID</th>
<th style={{ padding: '10px', textAlign: 'left' }}>Uptime</th>
<th style={{ padding: '10px', textAlign: 'left' }}>Port</th>
<th style={{ padding: '10px', textAlign: 'left' }}>Actions</th>
</tr>
</thead>
<tbody>
{this.components.map(component => this.renderComponentRow(component))}
</tbody>
</table>
</div>
);
}
private renderComponentRow(component: SDKComponent): React.ReactNode {
const statusColor = component.status === 'running' ? '#4caf50' :
component.status === 'error' ? '#f44336' : '#999';
return (
<tr key={component.name} style={{ borderBottom: '1px solid #333' }}>
<td style={{ padding: '10px' }}>{component.name}</td>
<td style={{ padding: '10px' }}>
<span style={{
color: statusColor,
fontWeight: 'bold'
}}>
{component.status.toUpperCase()}
</span>
</td>
<td style={{ padding: '10px' }}>{component.pid || '-'}</td>
<td style={{ padding: '10px' }}>
{component.uptime ? this.formatUptime(component.uptime) : '-'}
</td>
<td style={{ padding: '10px' }}>{component.port || '-'}</td>
<td style={{ padding: '10px' }}>
{component.status === 'running' ? (
<button
onClick={() => this.handleStop(component.name)}
style={{ padding: '5px 10px', cursor: 'pointer' }}
>
Stop
</button>
) : (
<button
onClick={() => this.handleStart(component.name)}
style={{ padding: '5px 10px', cursor: 'pointer' }}
>
Start
</button>
)}
<button
onClick={() => this.handleViewLogs(component.name)}
style={{ padding: '5px 10px', marginLeft: '5px', cursor: 'pointer' }}
>
Logs
</button>
</td>
</tr>
);
}
private formatUptime(seconds: number): string {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = Math.floor(seconds % 60);
return `${hours}h ${minutes}m ${secs}s`;
}
private async handleStart(name: string): Promise<void> {
try {
await this.manager.startComponent(name);
this.messageService.info(`Started ${name}`);
} catch (error) {
this.messageService.error(`Failed to start ${name}: ${error}`);
}
}
private async handleStop(name: string): Promise<void> {
try {
await this.manager.stopComponent(name);
this.messageService.info(`Stopped ${name}`);
} catch (error) {
this.messageService.error(`Failed to stop ${name}: ${error}`);
}
}
private async handleViewLogs(name: string): Promise<void> {
try {
const logs = await this.manager.getComponentLogs(name);
console.log(`Logs for ${name}:`, logs);
this.messageService.info(`Check the console for ${name} logs`);
} catch (error) {
this.messageService.error(`Failed to get logs for ${name}: ${error}`);
}
}
}