@serve.zone/dcrouter 2.12.4

package/ts_web/elements/ops-view-config.ts

@@ -0,0 +1,268 @@
+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,
+} from '@design.estate/dees-element';
+
+@customElement('ops-view-config')
+export class OpsViewConfig extends DeesElement {
+  @state()
+  private configState: appstate.IConfigState = {
+    config: null,
+    isLoading: false,
+    error: null,
+  };
+
+  @state()
+  private editingSection: string | null = null;
+
+  @state()
+  private editedConfig: any = 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`
+      .configSection {
+        background: white;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        margin-bottom: 24px;
+        overflow: hidden;
+      }
+
+      .sectionHeader {
+        background: #f8f9fa;
+        padding: 16px 24px;
+        border-bottom: 1px solid #e9ecef;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .sectionTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .sectionContent {
+        padding: 24px;
+      }
+
+      .configField {
+        margin-bottom: 20px;
+      }
+
+      .fieldLabel {
+        font-size: 14px;
+        font-weight: 600;
+        color: #666;
+        margin-bottom: 8px;
+        display: block;
+      }
+
+      .fieldValue {
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 14px;
+        color: #333;
+        background: #f8f9fa;
+        padding: 8px 12px;
+        border-radius: 4px;
+        border: 1px solid #e9ecef;
+      }
+
+      .configEditor {
+        width: 100%;
+        min-height: 200px;
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 14px;
+        padding: 12px;
+        border: 1px solid #e9ecef;
+        border-radius: 4px;
+        background: #f8f9fa;
+        resize: vertical;
+      }
+
+      .buttonGroup {
+        display: flex;
+        gap: 8px;
+        margin-top: 16px;
+      }
+
+      .warning {
+        background: #fff3cd;
+        border: 1px solid #ffeaa7;
+        border-radius: 4px;
+        padding: 12px;
+        margin-bottom: 16px;
+        color: #856404;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .errorMessage {
+        background: #fee;
+        border: 1px solid #fcc;
+        border-radius: 4px;
+        padding: 16px;
+        color: #c00;
+        margin: 16px 0;
+      }
+
+      .loadingMessage {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <ops-sectionheading>Configuration</ops-sectionheading>
+      
+      ${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 ? html`
+        <div class="warning">
+          <dees-icon name="warning"></dees-icon>
+          <span>Changes to configuration will take effect immediately. Please be careful when editing production settings.</span>
+        </div>
+
+        ${this.renderConfigSection('server', 'Server Configuration', this.configState.config.server)}
+        ${this.renderConfigSection('email', 'Email Configuration', this.configState.config.email)}
+        ${this.renderConfigSection('dns', 'DNS Configuration', this.configState.config.dns)}
+        ${this.renderConfigSection('security', 'Security Configuration', this.configState.config.security)}
+        ${this.renderConfigSection('storage', 'Storage Configuration', this.configState.config.storage)}
+      ` : html`
+        <div class="errorMessage">No configuration loaded</div>
+      `}
+    `;
+  }
+
+  private renderConfigSection(key: string, title: string, config: any) {
+    const isEditing = this.editingSection === key;
+    
+    return html`
+      <div class="configSection">
+        <div class="sectionHeader">
+          <h3 class="sectionTitle">${title}</h3>
+          <div>
+            ${isEditing ? html`
+              <dees-button 
+                @click=${() => this.saveConfig(key)}
+                type="highlighted"
+              >
+                Save
+              </dees-button>
+              <dees-button 
+                @click=${() => this.cancelEdit()}
+              >
+                Cancel
+              </dees-button>
+            ` : html`
+              <dees-button 
+                @click=${() => this.startEdit(key, config)}
+              >
+                Edit
+              </dees-button>
+            `}
+          </div>
+        </div>
+        <div class="sectionContent">
+          ${isEditing ? html`
+            <textarea 
+              class="configEditor"
+              @input=${(e) => this.editedConfig = e.target.value}
+              .value=${JSON.stringify(config, null, 2)}
+            ></textarea>
+          ` : html`
+            ${this.renderConfigFields(config)}
+          `}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderConfigFields(config: any, prefix = '') {
+    if (!config || typeof config !== 'object') {
+      return html`<div class="fieldValue">${config}</div>`;
+    }
+
+    return Object.entries(config).map(([key, value]) => {
+      const fieldName = prefix ? `${prefix}.${key}` : key;
+      
+      if (typeof value === 'object' && !Array.isArray(value)) {
+        return html`
+          <div class="configField">
+            <label class="fieldLabel">${fieldName}</label>
+            ${this.renderConfigFields(value, fieldName)}
+          </div>
+        `;
+      }
+      
+      return html`
+        <div class="configField">
+          <label class="fieldLabel">${fieldName}</label>
+          <div class="fieldValue">
+            ${Array.isArray(value) ? value.join(', ') : value}
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  private startEdit(section: string, config: any) {
+    this.editingSection = section;
+    this.editedConfig = JSON.stringify(config, null, 2);
+  }
+
+  private cancelEdit() {
+    this.editingSection = null;
+    this.editedConfig = null;
+  }
+
+  private async saveConfig(section: string) {
+    try {
+      const parsedConfig = JSON.parse(this.editedConfig);
+      
+      await appstate.configStatePart.dispatchAction(appstate.updateConfigurationAction, {
+        section,
+        config: parsedConfig,
+      });
+      
+      this.editingSection = null;
+      this.editedConfig = null;
+      
+      // Configuration updated successfully
+    } catch (error) {
+      console.error(`Error updating configuration:`, error);
+    }
+  }
+}

package/ts_web/elements/ops-view-logs.ts

@@ -0,0 +1,207 @@
+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,
+} from '@design.estate/dees-element';
+
+@customElement('ops-view-logs')
+export class OpsViewLogs extends DeesElement {
+  @state()
+  private logState: appstate.ILogState = {
+    recentLogs: [],
+    isStreaming: false,
+    filters: {},
+  };
+
+  constructor() {
+    super();
+    const subscription = appstate.logStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((logState) => {
+        this.logState = logState;
+      });
+    this.rxSubscriptions.push(subscription);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css`
+      .controls {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 24px;
+        flex-wrap: wrap;
+      }
+
+      .filterGroup {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .logContainer {
+        background: #1e1e1e;
+        border-radius: 8px;
+        padding: 16px;
+        max-height: 600px;
+        overflow-y: auto;
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 13px;
+      }
+
+      .logEntry {
+        margin-bottom: 8px;
+        line-height: 1.5;
+      }
+
+      .logTimestamp {
+        color: #7a7a7a;
+        margin-right: 8px;
+      }
+
+      .logLevel {
+        font-weight: bold;
+        margin-right: 8px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+      }
+
+      .logLevel.debug { 
+        color: #6a9955; 
+        background: rgba(106, 153, 85, 0.1);
+      }
+      .logLevel.info { 
+        color: #569cd6; 
+        background: rgba(86, 156, 214, 0.1);
+      }
+      .logLevel.warn { 
+        color: #ce9178; 
+        background: rgba(206, 145, 120, 0.1);
+      }
+      .logLevel.error { 
+        color: #f44747; 
+        background: rgba(244, 71, 71, 0.1);
+      }
+
+      .logCategory {
+        color: #c586c0;
+        margin-right: 8px;
+      }
+
+      .logMessage {
+        color: #d4d4d4;
+      }
+
+      .noLogs {
+        color: #7a7a7a;
+        text-align: center;
+        padding: 40px;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <ops-sectionheading>Logs</ops-sectionheading>
+      
+      <div class="controls">
+        <div class="filterGroup">
+          <dees-button 
+            @click=${() => this.fetchLogs()}
+          >
+            Refresh Logs
+          </dees-button>
+          
+          <dees-button 
+            @click=${() => this.toggleStreaming()}
+            .type=${this.logState.isStreaming ? 'highlighted' : 'normal'}
+          >
+            ${this.logState.isStreaming ? 'Stop Streaming' : 'Start Streaming'}
+          </dees-button>
+        </div>
+
+        <div class="filterGroup">
+          <label>Level:</label>
+          <dees-input-dropdown
+            .options=${['all', 'debug', 'info', 'warn', 'error']}
+            .selectedOption=${'all'}
+            @selectedOption=${(e) => this.updateFilter('level', e.detail)}
+          ></dees-input-dropdown>
+        </div>
+
+        <div class="filterGroup">
+          <label>Category:</label>
+          <dees-input-dropdown
+            .options=${['all', 'smtp', 'dns', 'security', 'system', 'email']}
+            .selectedOption=${'all'}
+            @selectedOption=${(e) => this.updateFilter('category', e.detail)}
+          ></dees-input-dropdown>
+        </div>
+
+        <div class="filterGroup">
+          <label>Limit:</label>
+          <dees-input-dropdown
+            .options=${['50', '100', '200', '500']}
+            .selectedOption=${'100'}
+            @selectedOption=${(e) => this.updateFilter('limit', e.detail)}
+          ></dees-input-dropdown>
+        </div>
+      </div>
+
+      <div class="logContainer">
+        ${this.logState.recentLogs.length > 0 ? 
+          this.logState.recentLogs.map(log => html`
+            <div class="logEntry">
+              <span class="logTimestamp">${new Date(log.timestamp).toLocaleTimeString()}</span>
+              <span class="logLevel ${log.level}">${log.level.toUpperCase()}</span>
+              <span class="logCategory">[${log.category}]</span>
+              <span class="logMessage">${log.message}</span>
+            </div>
+          `) : html`
+            <div class="noLogs">No logs to display</div>
+          `
+        }
+      </div>
+    `;
+  }
+
+  private async fetchLogs() {
+    const filters = this.getActiveFilters();
+    await appstate.logStatePart.dispatchAction(appstate.fetchRecentLogsAction, {
+      limit: filters.limit || 100,
+      level: filters.level as 'debug' | 'info' | 'warn' | 'error' | undefined,
+      category: filters.category as 'smtp' | 'dns' | 'security' | 'system' | 'email' | undefined,
+    });
+  }
+
+  private updateFilter(type: string, value: string) {
+    if (value === 'all') {
+      value = undefined;
+    }
+    
+    // Update filters then fetch logs
+    this.fetchLogs();
+  }
+
+  private getActiveFilters() {
+    return {
+      level: this.logState.filters.level?.[0],
+      category: this.logState.filters.category?.[0],
+      limit: 100,
+    };
+  }
+
+  private toggleStreaming() {
+    // TODO: Implement log streaming with VirtualStream
+    console.log('Streaming toggle not yet implemented');
+  }
+}

package/ts_web/elements/ops-view-overview.ts

@@ -0,0 +1,222 @@
+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,
+} from '@design.estate/dees-element';
+
+@customElement('ops-view-overview')
+export class OpsViewOverview extends DeesElement {
+  @state()
+  private statsState: appstate.IStatsState = {
+    serverStats: null,
+    emailStats: null,
+    dnsStats: null,
+    securityMetrics: null,
+    lastUpdated: 0,
+    isLoading: false,
+    error: null,
+  };
+
+  constructor() {
+    super();
+    const subscription = appstate.statsStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((statsState) => {
+        this.statsState = statsState;
+      });
+    this.rxSubscriptions.push(subscription);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css`
+      .statsGrid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-gap: 16px;
+        margin-bottom: 40px;
+      }
+
+      .statCard {
+        background: #f8f9fa;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        padding: 24px;
+      }
+
+      .statCard h3 {
+        margin: 0 0 16px 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .statValue {
+        font-size: 32px;
+        font-weight: 700;
+        color: #2196F3;
+        margin-bottom: 8px;
+      }
+
+      .statLabel {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .chartGrid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 16px;
+        margin-top: 32px;
+      }
+
+      .loadingMessage {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+
+      .errorMessage {
+        background-color: #fee;
+        border: 1px solid #fcc;
+        border-radius: 4px;
+        padding: 16px;
+        color: #c00;
+        margin: 16px 0;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <ops-sectionheading>Overview</ops-sectionheading>
+      
+      ${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`
+        <div class="statsGrid">
+          ${this.statsState.serverStats ? html`
+            <div class="statCard">
+              <h3>Server Status</h3>
+              <div class="statValue">${this.statsState.serverStats.uptime ? 'Online' : 'Offline'}</div>
+              <div class="statLabel">Uptime: ${this.formatUptime(this.statsState.serverStats.uptime)}</div>
+            </div>
+            
+            <div class="statCard">
+              <h3>Connections</h3>
+              <div class="statValue">${this.statsState.serverStats.activeConnections}</div>
+              <div class="statLabel">Active connections</div>
+            </div>
+
+            <div class="statCard">
+              <h3>Memory Usage</h3>
+              <div class="statValue">${this.formatBytes(this.statsState.serverStats.memoryUsage.heapUsed)}</div>
+              <div class="statLabel">of ${this.formatBytes(this.statsState.serverStats.memoryUsage.heapTotal)}</div>
+            </div>
+
+            <div class="statCard">
+              <h3>CPU Usage</h3>
+              <div class="statValue">${Math.round((this.statsState.serverStats.cpuUsage.user + this.statsState.serverStats.cpuUsage.system) / 2)}%</div>
+              <div class="statLabel">Average load</div>
+            </div>
+          ` : ''}
+        </div>
+
+        ${this.statsState.emailStats ? html`
+          <h2>Email Statistics</h2>
+          <div class="statsGrid">
+            <div class="statCard">
+              <h3>Emails Sent</h3>
+              <div class="statValue">${this.statsState.emailStats.sent}</div>
+              <div class="statLabel">Total sent</div>
+            </div>
+
+            <div class="statCard">
+              <h3>Emails Received</h3>
+              <div class="statValue">${this.statsState.emailStats.received}</div>
+              <div class="statLabel">Total received</div>
+            </div>
+
+            <div class="statCard">
+              <h3>Failed Deliveries</h3>
+              <div class="statValue">${this.statsState.emailStats.failed}</div>
+              <div class="statLabel">Delivery failures</div>
+            </div>
+
+            <div class="statCard">
+              <h3>Queued</h3>
+              <div class="statValue">${this.statsState.emailStats.queued}</div>
+              <div class="statLabel">In queue</div>
+            </div>
+          </div>
+        ` : ''}
+
+        ${this.statsState.dnsStats ? html`
+          <h2>DNS Statistics</h2>
+          <div class="statsGrid">
+            <div class="statCard">
+              <h3>DNS Queries</h3>
+              <div class="statValue">${this.statsState.dnsStats.totalQueries}</div>
+              <div class="statLabel">Total queries handled</div>
+            </div>
+
+            <div class="statCard">
+              <h3>Cache Hit Rate</h3>
+              <div class="statValue">${Math.round(this.statsState.dnsStats.cacheHitRate * 100)}%</div>
+              <div class="statLabel">Cache efficiency</div>
+            </div>
+          </div>
+        ` : ''}
+
+        <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>
+        </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);
+    
+    if (days > 0) {
+      return `${days}d ${hours}h ${minutes}m`;
+    } else if (hours > 0) {
+      return `${hours}h ${minutes}m`;
+    } else {
+      return `${minutes}m`;
+    }
+  }
+
+  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]}`;
+  }
+}