@qwickapps/server 1.5.2 → 1.6.1

package/src/plugins/maintenance/SeedList.tsx

@@ -0,0 +1,130 @@
+/**
+ * Seed List Component
+ *
+ * Displays available seed scripts with metadata.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+export interface SeedListProps {
+  apiPrefix: string;
+  onExecute: (seedName: string) => void;
+}
+
+interface SeedFile {
+  name: string;
+  path: string;
+  size: number;
+  createdAt: string;
+  modifiedAt: string;
+}
+
+export const SeedList: React.FC<SeedListProps> = ({ apiPrefix, onExecute }) => {
+  const [seeds, setSeeds] = useState<SeedFile[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchSeeds();
+  }, [apiPrefix]);
+
+  const fetchSeeds = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`${apiPrefix}/seeds/discover`);
+      if (!response.ok) throw new Error('Failed to fetch seeds');
+      const data = await response.json();
+      setSeeds(data.seeds || []);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatDate = (dateString: string): string => {
+    return new Date(dateString).toLocaleString();
+  };
+
+  if (loading) {
+    return <div style={{ padding: '20px' }}>Loading seeds...</div>;
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: '20px', color: '#d32f2f' }}>
+        Error: {error}
+      </div>
+    );
+  }
+
+  if (seeds.length === 0) {
+    return (
+      <div style={{ padding: '20px', color: '#666' }}>
+        No seed scripts found in scripts directory.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Available Seed Scripts ({seeds.length})</h3>
+      <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '16px' }}>
+        <thead>
+          <tr style={{ borderBottom: '2px solid #ddd', textAlign: 'left' }}>
+            <th style={{ padding: '12px' }}>Name</th>
+            <th style={{ padding: '12px' }}>Size</th>
+            <th style={{ padding: '12px' }}>Modified</th>
+            <th style={{ padding: '12px' }}>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {seeds.map((seed) => (
+            <tr key={seed.name} style={{ borderBottom: '1px solid #eee' }}>
+              <td style={{ padding: '12px', fontFamily: 'monospace' }}>
+                {seed.name}
+              </td>
+              <td style={{ padding: '12px' }}>{formatFileSize(seed.size)}</td>
+              <td style={{ padding: '12px', fontSize: '14px', color: '#666' }}>
+                {formatDate(seed.modifiedAt)}
+              </td>
+              <td style={{ padding: '12px' }}>
+                <button
+                  onClick={() => {
+                    if (confirm(`Execute ${seed.name}?`)) {
+                      onExecute(seed.name);
+                    }
+                  }}
+                  style={{
+                    padding: '6px 12px',
+                    backgroundColor: '#1976d2',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                  }}
+                  data-testid={`execute-${seed.name}`}
+                >
+                  Execute
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default SeedList;

package/src/plugins/maintenance/SeedManagementPage.tsx

@@ -0,0 +1,91 @@
+/**
+ * Seed Management Page
+ *
+ * Main page for managing and executing seed scripts.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useState } from 'react';
+import { PluginManagementPage } from '@qwickapps/server/ui';
+import { SeedList } from './SeedList.js';
+import { SeedExecutor } from './SeedExecutor.js';
+import { SeedHistory } from './SeedHistory.js';
+
+export interface SeedManagementPageProps {
+  apiPrefix?: string;
+}
+
+type Tab = 'list' | 'execute' | 'history';
+
+export const SeedManagementPage: React.FC<SeedManagementPageProps> = ({
+  apiPrefix = '/api/plugins/maintenance',
+}) => {
+  const [activeTab, setActiveTab] = useState<Tab>('list');
+  const [selectedSeed, setSelectedSeed] = useState<string | null>(null);
+
+  const handleExecute = (seedName: string) => {
+    setSelectedSeed(seedName);
+    setActiveTab('execute');
+  };
+
+  const handleExecutionComplete = () => {
+    setActiveTab('history');
+  };
+
+  return (
+    <PluginManagementPage
+      title="Seed Management"
+      description="Manage and execute database seed scripts"
+    >
+      <div style={{ marginBottom: '20px' }}>
+        <button
+          onClick={() => setActiveTab('list')}
+          style={{
+            padding: '8px 16px',
+            marginRight: '8px',
+            backgroundColor: activeTab === 'list' ? '#1976d2' : '#f5f5f5',
+            color: activeTab === 'list' ? 'white' : 'black',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Available Seeds
+        </button>
+        <button
+          onClick={() => setActiveTab('history')}
+          style={{
+            padding: '8px 16px',
+            backgroundColor: activeTab === 'history' ? '#1976d2' : '#f5f5f5',
+            color: activeTab === 'history' ? 'white' : 'black',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Execution History
+        </button>
+      </div>
+
+      {activeTab === 'list' && (
+        <SeedList apiPrefix={apiPrefix} onExecute={handleExecute} />
+      )}
+
+      {activeTab === 'execute' && selectedSeed && (
+        <SeedExecutor
+          apiPrefix={apiPrefix}
+          seedName={selectedSeed}
+          onComplete={handleExecutionComplete}
+          onCancel={() => setActiveTab('list')}
+        />
+      )}
+
+      {activeTab === 'history' && (
+        <SeedHistory apiPrefix={apiPrefix} />
+      )}
+    </PluginManagementPage>
+  );
+};
+
+export default SeedManagementPage;

package/src/plugins/maintenance/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Maintenance Plugin UI Components
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { MaintenanceStatusWidget } from './MaintenanceStatusWidget.js';
+export type { MaintenanceStatusWidgetProps } from './MaintenanceStatusWidget.js';
+export { MaintenanceManagementPage } from './MaintenanceManagementPage.js';
+export type { MaintenanceManagementPageProps } from './MaintenanceManagementPage.js';
+
+// Seed Management - Backend
+export { SeedExecutor, validateScriptPath } from './seed-executor.js';
+export type { SeedExecutionResult } from './seed-executor.js';
+
+// Seed Management - UI Components
+export { SeedManagementPage } from './SeedManagementPage.js';
+export type { SeedManagementPageProps } from './SeedManagementPage.js';
+export { SeedList } from './SeedList.js';
+export type { SeedListProps } from './SeedList.js';
+export { SeedExecutor as SeedExecutorUI } from './SeedExecutor.js';
+export type { SeedExecutorProps } from './SeedExecutor.js';
+export { SeedHistory } from './SeedHistory.js';
+export type { SeedHistoryProps } from './SeedHistory.js';

package/src/plugins/maintenance/seed-executor.ts

@@ -0,0 +1,224 @@
+/**
+ * Seed Executor
+ *
+ * Executes seed scripts in isolated child processes and streams output via SSE.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { spawn, type ChildProcess } from 'child_process';
+import { existsSync } from 'fs';
+import { resolve, relative } from 'path';
+import type { Response } from 'express';
+
+/**
+ * Result of seed execution
+ */
+export interface SeedExecutionResult {
+  exitCode: number;
+  duration: number;
+  output: string;
+  error: string;
+}
+
+/**
+ * SSE event types
+ */
+type SSEEventType = 'stdout' | 'stderr' | 'exit' | 'error';
+
+interface SSEEvent {
+  type: SSEEventType;
+  data: string;
+  timestamp: string;
+}
+
+/**
+ * Maximum output size to store (100KB)
+ */
+const MAX_OUTPUT_SIZE = 100 * 1024;
+
+/**
+ * Validate script path to prevent path traversal attacks
+ *
+ * @param scriptName - Name of the script (e.g., "seed-products.mjs")
+ * @param scriptsPath - Base path for scripts directory
+ * @returns Resolved path if valid, null if invalid
+ */
+export function validateScriptPath(scriptName: string, scriptsPath: string): string | null {
+  // Only allow seed-*.mjs pattern
+  if (!/^seed-[a-z0-9-]+\.mjs$/.test(scriptName)) {
+    return null;
+  }
+
+  // Resolve paths
+  const basePath = resolve(scriptsPath);
+  const scriptPath = resolve(basePath, scriptName);
+
+  // Ensure resolved path is within scriptsPath (prevent path traversal)
+  // Use relative() for platform-agnostic check (works on Windows and Unix)
+  const relativePath = relative(basePath, scriptPath);
+  if (relativePath.startsWith('..') || relativePath.includes('../') || relativePath.includes('..\\')) {
+    return null;
+  }
+
+  // Ensure file exists
+  if (!existsSync(scriptPath)) {
+    return null;
+  }
+
+  return scriptPath;
+}
+
+/**
+ * Send SSE event to client
+ */
+function sendSSEEvent(res: Response, event: SSEEvent): void {
+  const data = JSON.stringify(event);
+  res.write(`data: ${data}\n\n`);
+}
+
+/**
+ * Seed Executor
+ *
+ * Executes seed scripts in isolated Node.js child processes.
+ * Streams stdout/stderr via SSE to frontend for real-time feedback.
+ */
+export class SeedExecutor {
+  private child: ChildProcess | null = null;
+  private startTime: number = 0;
+  private outputBuffer: string = '';
+  private errorBuffer: string = '';
+  private outputSize: number = 0;
+
+  /**
+   * Execute a seed script
+   *
+   * @param scriptPath - Absolute path to the script
+   * @param res - Express response object (for SSE streaming)
+   * @returns Promise resolving to execution result
+   */
+  async execute(scriptPath: string, res: Response): Promise<SeedExecutionResult> {
+    this.startTime = Date.now();
+    this.outputBuffer = '';
+    this.errorBuffer = '';
+    this.outputSize = 0;
+
+    return new Promise((resolvePromise, rejectPromise) => {
+      // Spawn Node.js process with minimal environment
+      // Use process.execPath to ensure we use the same node binary as the parent process
+      this.child = spawn(process.execPath, [scriptPath], {
+        env: {
+          NODE_ENV: process.env.NODE_ENV || 'development',
+          DATABASE_URI: process.env.DATABASE_URI,
+          DATABASE_URL: process.env.DATABASE_URL,
+          PAYLOAD_PUBLIC_SERVER_URL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
+          NEXT_PUBLIC_SERVER_URL: process.env.NEXT_PUBLIC_SERVER_URL,
+          API_URL: process.env.API_URL,
+        },
+        stdio: ['ignore', 'pipe', 'pipe'], // stdin: ignore, stdout: pipe, stderr: pipe
+        cwd: resolve(scriptPath, '..'), // Run from scripts directory
+      });
+
+      // Handle stdout
+      this.child.stdout?.on('data', (data: Buffer) => {
+        const text = data.toString();
+
+        // Send via SSE
+        sendSSEEvent(res, {
+          type: 'stdout',
+          data: text,
+          timestamp: new Date().toISOString(),
+        });
+
+        // Buffer output (with size limit)
+        if (this.outputSize < MAX_OUTPUT_SIZE) {
+          const remaining = MAX_OUTPUT_SIZE - this.outputSize;
+          const chunk = text.slice(0, remaining);
+          this.outputBuffer += chunk;
+          this.outputSize += chunk.length;
+
+          if (this.outputSize >= MAX_OUTPUT_SIZE) {
+            this.outputBuffer += '\n... (output truncated at 100KB)';
+          }
+        }
+      });
+
+      // Handle stderr
+      this.child.stderr?.on('data', (data: Buffer) => {
+        const text = data.toString();
+
+        // Send via SSE
+        sendSSEEvent(res, {
+          type: 'stderr',
+          data: text,
+          timestamp: new Date().toISOString(),
+        });
+
+        // Buffer error output (with size limit)
+        if (this.outputSize < MAX_OUTPUT_SIZE) {
+          const remaining = MAX_OUTPUT_SIZE - this.outputSize;
+          const chunk = text.slice(0, remaining);
+          this.errorBuffer += chunk;
+          this.outputSize += chunk.length;
+        }
+      });
+
+      // Handle process exit
+      this.child.on('exit', (code, signal) => {
+        const exitCode = code ?? (signal ? 1 : 0);
+        const duration = Date.now() - this.startTime;
+
+        // Send exit event via SSE
+        sendSSEEvent(res, {
+          type: 'exit',
+          data: JSON.stringify({ exitCode, duration, signal }),
+          timestamp: new Date().toISOString(),
+        });
+
+        // Resolve with result
+        resolvePromise({
+          exitCode,
+          duration,
+          output: this.outputBuffer,
+          error: this.errorBuffer,
+        });
+
+        this.child = null;
+      });
+
+      // Handle spawn errors
+      this.child.on('error', (err: Error) => {
+        sendSSEEvent(res, {
+          type: 'error',
+          data: err.message,
+          timestamp: new Date().toISOString(),
+        });
+
+        rejectPromise(err);
+      });
+
+      // Handle SSE connection close - terminate child process
+      res.on('close', () => {
+        if (this.child && !this.child.killed) {
+          this.child.kill('SIGTERM');
+        }
+      });
+    });
+  }
+
+  /**
+   * Check if executor is currently running a process
+   */
+  isRunning(): boolean {
+    return this.child !== null && !this.child.killed;
+  }
+
+  /**
+   * Terminate running process
+   */
+  terminate(): void {
+    if (this.child && !this.child.killed) {
+      this.child.kill('SIGTERM');
+    }
+  }
+}