Function OutputView

frontend/src/components/Pipeline/OutputView.tsx:5–100

()

import LoadingSpinner from '../Common/LoadingSpinner';

const OutputView: React.FC = () => {
  const { currentPipeline, executionResults } = usePipelineStore();

  if (!currentPipeline) {
    return (
      <div className="h-full flex items-center justify-center text-muted">
        <p>No pipeline selected</p>
      </div>
    );
  }

  if (currentPipeline.status === 'running') {
    return (
      <div className="h-full flex flex-col items-center justify-center">
        <LoadingSpinner />
        <p className="mt-4 text-muted">Executing pipeline...</p>
      </div>
    );
  }

  if (!executionResults || executionResults.length === 0) {
    return (
      <div className="h-full flex flex-col items-center justify-center text-muted">
        <p className="text-lg mb-2">No execution results yet</p>
        <p className="text-sm">Click "Run Pipeline" to execute your scraping code</p>
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col p-4">
      <div className="mb-4">
        <h3 className="text-lg font-semibold mb-2">Execution Results</h3>
        <div className="text-sm text-muted">
          Status: <span className={`font-medium ${
            currentPipeline.status === 'completed' ? 'text-success' : 
            currentPipeline.status === 'failed' ? 'text-error' : 
            'text-muted'
          }`}>
            {currentPipeline.status}
          </span>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto space-y-4">
        {executionResults.map((result, index) => (
          <div key={index} className="card">
            <div className="flex items-start justify-between mb-2">
              <h4 className="font-medium">
                Result {index + 1}
                {result.url && <span className="text-sm text-muted ml-2">({result.url})</span>}
              </h4>
              {result.success !== undefined && (
                <span className={`text-sm ${result.success ? 'text-success' : 'text-error'}`}>
                  {result.success ? '✓ Success' : '✗ Failed'}
                </span>
              )}
            </div>