@qwickapps/server 1.6.0 → 1.6.1

package/src/plugins/maintenance/SeedExecutor.tsx

@@ -0,0 +1,236 @@
+/**
+ * Seed Executor Component
+ *
+ * Executes seed scripts and displays real-time output via SSE.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface SeedExecutorProps {
+  apiPrefix: string;
+  seedName: string;
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+type ExecutionStatus = 'idle' | 'running' | 'completed' | 'failed';
+
+interface OutputLine {
+  type: 'stdout' | 'stderr' | 'exit' | 'error';
+  data: string;
+  timestamp: string;
+}
+
+export const SeedExecutor: React.FC<SeedExecutorProps> = ({
+  apiPrefix,
+  seedName,
+  onComplete,
+  onCancel,
+}) => {
+  const [status, setStatus] = useState<ExecutionStatus>('idle');
+  const [output, setOutput] = useState<OutputLine[]>([]);
+  const [exitCode, setExitCode] = useState<number | null>(null);
+  const outputRef = useRef<HTMLDivElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  useEffect(() => {
+    executeScript();
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+    };
+  }, [seedName]);
+
+  useEffect(() => {
+    // Auto-scroll to bottom
+    if (outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, [output]);
+
+  const executeScript = async () => {
+    try {
+      setStatus('running');
+      setOutput([]);
+      setExitCode(null);
+
+      const response = await fetch(`${apiPrefix}/seeds/execute`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: seedName }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Execution failed');
+      }
+
+      // Set up EventSource for SSE
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+
+      if (!reader) {
+        throw new Error('No response body');
+      }
+
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6);
+            try {
+              const event = JSON.parse(data);
+              setOutput((prev) => [...prev, event]);
+
+              if (event.type === 'exit') {
+                const exitData = JSON.parse(event.data);
+                setExitCode(exitData.exitCode);
+                setStatus(exitData.exitCode === 0 ? 'completed' : 'failed');
+              }
+            } catch (e) {
+              console.error('Failed to parse SSE event:', e);
+            }
+          }
+        }
+      }
+    } catch (err) {
+      setStatus('failed');
+      setOutput((prev) => [
+        ...prev,
+        {
+          type: 'error',
+          data: err instanceof Error ? err.message : String(err),
+          timestamp: new Date().toISOString(),
+        },
+      ]);
+    }
+  };
+
+  const getStatusColor = (): string => {
+    switch (status) {
+      case 'running':
+        return '#1976d2';
+      case 'completed':
+        return '#2e7d32';
+      case 'failed':
+        return '#d32f2f';
+      default:
+        return '#666';
+    }
+  };
+
+  const getStatusText = (): string => {
+    switch (status) {
+      case 'running':
+        return 'Running...';
+      case 'completed':
+        return `Completed (exit code: ${exitCode})`;
+      case 'failed':
+        return `Failed (exit code: ${exitCode})`;
+      default:
+        return 'Idle';
+    }
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h3>Executing: {seedName}</h3>
+        <div>
+          <span
+            style={{
+              padding: '6px 12px',
+              backgroundColor: getStatusColor(),
+              color: 'white',
+              borderRadius: '4px',
+              marginRight: '12px',
+              fontSize: '14px',
+            }}
+            data-testid="execution-status"
+          >
+            {getStatusText()}
+          </span>
+          {status !== 'running' && (
+            <>
+              <button
+                onClick={onComplete}
+                style={{
+                  padding: '6px 12px',
+                  backgroundColor: '#1976d2',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  marginRight: '8px',
+                }}
+              >
+                View History
+              </button>
+              <button
+                onClick={onCancel}
+                style={{
+                  padding: '6px 12px',
+                  backgroundColor: '#f5f5f5',
+                  color: 'black',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                }}
+              >
+                Back to List
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div
+        ref={outputRef}
+        data-testid="seed-output"
+        style={{
+          backgroundColor: '#1e1e1e',
+          color: '#d4d4d4',
+          fontFamily: 'monospace',
+          fontSize: '13px',
+          padding: '16px',
+          borderRadius: '4px',
+          height: '500px',
+          overflow: 'auto',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        }}
+      >
+        {output.length === 0 && status === 'running' && (
+          <div style={{ color: '#888' }}>Waiting for output...</div>
+        )}
+        {output.map((line, index) => (
+          <div
+            key={index}
+            style={{
+              color: line.type === 'stderr' ? '#f48771' : line.type === 'error' ? '#ff5555' : '#d4d4d4',
+              marginBottom: '2px',
+            }}
+          >
+            {line.data}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SeedExecutor;

package/src/plugins/maintenance/SeedHistory.tsx

@@ -0,0 +1,360 @@
+/**
+ * Seed History Component
+ *
+ * Displays execution history with filtering and pagination.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+export interface SeedHistoryProps {
+  apiPrefix: string;
+}
+
+interface Execution {
+  id: string;
+  name: string;
+  status: 'running' | 'completed' | 'failed';
+  started_at: string;
+  completed_at: string | null;
+  exit_code: number | null;
+  duration_ms: number | null;
+}
+
+export const SeedHistory: React.FC<SeedHistoryProps> = ({ apiPrefix }) => {
+  const [executions, setExecutions] = useState<Execution[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [offset, setOffset] = useState(0);
+  const [selectedExecution, setSelectedExecution] = useState<Execution | null>(null);
+  const [executionDetails, setExecutionDetails] = useState<any | null>(null);
+
+  const limit = 20;
+
+  useEffect(() => {
+    fetchHistory();
+  }, [apiPrefix, statusFilter, searchQuery, offset]);
+
+  const fetchHistory = async () => {
+    try {
+      setLoading(true);
+      const params = new URLSearchParams({
+        limit: limit.toString(),
+        offset: offset.toString(),
+      });
+
+      if (statusFilter !== 'all') {
+        params.append('status', statusFilter);
+      }
+
+      if (searchQuery) {
+        params.append('search', searchQuery);
+      }
+
+      const response = await fetch(`${apiPrefix}/seeds/history?${params}`);
+      if (!response.ok) throw new Error('Failed to fetch history');
+
+      const data = await response.json();
+      setExecutions(data.executions || []);
+      setTotal(data.total || 0);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchExecutionDetails = async (id: string) => {
+    try {
+      const response = await fetch(`${apiPrefix}/seeds/history/${id}`);
+      if (!response.ok) throw new Error('Failed to fetch execution details');
+
+      const data = await response.json();
+      setExecutionDetails(data.execution);
+    } catch (err) {
+      console.error('Failed to fetch execution details:', err);
+    }
+  };
+
+  const formatDuration = (ms: number | null): string => {
+    if (ms === null) return '-';
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  };
+
+  const formatDateTime = (dateString: string | null): string => {
+    if (!dateString) return '-';
+    return new Date(dateString).toLocaleString();
+  };
+
+  const getStatusBadge = (status: string): React.ReactElement => {
+    const colors = {
+      running: '#1976d2',
+      completed: '#2e7d32',
+      failed: '#d32f2f',
+    };
+
+    return (
+      <span
+        style={{
+          padding: '4px 8px',
+          backgroundColor: colors[status as keyof typeof colors] || '#666',
+          color: 'white',
+          borderRadius: '4px',
+          fontSize: '12px',
+          fontWeight: 'bold',
+        }}
+      >
+        {status.toUpperCase()}
+      </span>
+    );
+  };
+
+  if (loading && executions.length === 0) {
+    return <div style={{ padding: '20px' }}>Loading history...</div>;
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: '20px', color: '#d32f2f' }}>
+        Error: {error}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '20px', display: 'flex', gap: '12px' }}>
+        <select
+          value={statusFilter}
+          onChange={(e) => {
+            setStatusFilter(e.target.value);
+            setOffset(0);
+          }}
+          style={{
+            padding: '8px 12px',
+            borderRadius: '4px',
+            border: '1px solid #ddd',
+          }}
+        >
+          <option value="all">All Status</option>
+          <option value="running">Running</option>
+          <option value="completed">Completed</option>
+          <option value="failed">Failed</option>
+        </select>
+
+        <input
+          type="text"
+          placeholder="Search by name..."
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setOffset(0);
+          }}
+          style={{
+            padding: '8px 12px',
+            borderRadius: '4px',
+            border: '1px solid #ddd',
+            flex: 1,
+          }}
+        />
+      </div>
+
+      <h3>Execution History ({total} total)</h3>
+
+      {executions.length === 0 ? (
+        <div style={{ padding: '20px', color: '#666' }}>
+          No executions found.
+        </div>
+      ) : (
+        <>
+          <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' }}>Status</th>
+                <th style={{ padding: '12px' }}>Started</th>
+                <th style={{ padding: '12px' }}>Duration</th>
+                <th style={{ padding: '12px' }}>Exit Code</th>
+                <th style={{ padding: '12px' }}>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {executions.map((execution) => (
+                <tr key={execution.id} style={{ borderBottom: '1px solid #eee' }}>
+                  <td style={{ padding: '12px', fontFamily: 'monospace' }}>
+                    {execution.name}
+                  </td>
+                  <td style={{ padding: '12px' }}>
+                    {getStatusBadge(execution.status)}
+                  </td>
+                  <td style={{ padding: '12px', fontSize: '14px' }}>
+                    {formatDateTime(execution.started_at)}
+                  </td>
+                  <td style={{ padding: '12px' }}>
+                    {formatDuration(execution.duration_ms)}
+                  </td>
+                  <td style={{ padding: '12px', textAlign: 'center' }}>
+                    {execution.exit_code !== null ? execution.exit_code : '-'}
+                  </td>
+                  <td style={{ padding: '12px' }}>
+                    <button
+                      onClick={() => {
+                        setSelectedExecution(execution);
+                        fetchExecutionDetails(execution.id);
+                      }}
+                      style={{
+                        padding: '4px 8px',
+                        backgroundColor: '#1976d2',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        fontSize: '12px',
+                      }}
+                    >
+                      View Details
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-between' }}>
+            <button
+              onClick={() => setOffset(Math.max(0, offset - limit))}
+              disabled={offset === 0}
+              style={{
+                padding: '8px 16px',
+                backgroundColor: offset === 0 ? '#f5f5f5' : '#1976d2',
+                color: offset === 0 ? '#999' : 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: offset === 0 ? 'not-allowed' : 'pointer',
+              }}
+            >
+              Previous
+            </button>
+            <span style={{ padding: '8px' }}>
+              Showing {offset + 1}-{Math.min(offset + limit, total)} of {total}
+            </span>
+            <button
+              onClick={() => setOffset(offset + limit)}
+              disabled={offset + limit >= total}
+              style={{
+                padding: '8px 16px',
+                backgroundColor: offset + limit >= total ? '#f5f5f5' : '#1976d2',
+                color: offset + limit >= total ? '#999' : 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: offset + limit >= total ? 'not-allowed' : 'pointer',
+              }}
+            >
+              Next
+            </button>
+          </div>
+        </>
+      )}
+
+      {selectedExecution && executionDetails && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+          }}
+          onClick={() => setSelectedExecution(null)}
+        >
+          <div
+            style={{
+              backgroundColor: 'white',
+              padding: '24px',
+              borderRadius: '8px',
+              maxWidth: '800px',
+              maxHeight: '80vh',
+              overflow: 'auto',
+              width: '90%',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3>Execution Details: {selectedExecution.name}</h3>
+            <div style={{ marginTop: '16px' }}>
+              <p><strong>Status:</strong> {getStatusBadge(selectedExecution.status)}</p>
+              <p><strong>Started:</strong> {formatDateTime(selectedExecution.started_at)}</p>
+              <p><strong>Completed:</strong> {formatDateTime(selectedExecution.completed_at)}</p>
+              <p><strong>Duration:</strong> {formatDuration(selectedExecution.duration_ms)}</p>
+              <p><strong>Exit Code:</strong> {selectedExecution.exit_code !== null ? selectedExecution.exit_code : '-'}</p>
+
+              {executionDetails.output && (
+                <>
+                  <h4 style={{ marginTop: '20px' }}>Output:</h4>
+                  <pre
+                    style={{
+                      backgroundColor: '#1e1e1e',
+                      color: '#d4d4d4',
+                      padding: '12px',
+                      borderRadius: '4px',
+                      overflow: 'auto',
+                      maxHeight: '300px',
+                      fontSize: '12px',
+                    }}
+                  >
+                    {executionDetails.output}
+                  </pre>
+                </>
+              )}
+
+              {executionDetails.error && (
+                <>
+                  <h4 style={{ marginTop: '20px', color: '#d32f2f' }}>Error:</h4>
+                  <pre
+                    style={{
+                      backgroundColor: '#ffebee',
+                      color: '#c62828',
+                      padding: '12px',
+                      borderRadius: '4px',
+                      overflow: 'auto',
+                      maxHeight: '200px',
+                      fontSize: '12px',
+                    }}
+                  >
+                    {executionDetails.error}
+                  </pre>
+                </>
+              )}
+            </div>
+            <button
+              onClick={() => setSelectedExecution(null)}
+              style={{
+                marginTop: '20px',
+                padding: '8px 16px',
+                backgroundColor: '#1976d2',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SeedHistory;