Demo working for few tools

2025-08-26 14:19:24 +00:00 · 2025-08-21 12:53:28 +01:00 · 2025-08-21 12:53:28 +01:00 · 4956d6b4da
commit 4956d6b4da
parent 555d937921
4 changed files with 103 additions and 123 deletions
--- a/frontend/src/components/tools/automate/AutomationRun.tsx
+++ b/frontend/src/components/tools/automate/AutomationRun.tsx
@ -1,27 +1,15 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  Text,
-  Title,
-  Stack,
-  Group,
-  ActionIcon,
-  Progress,
-  Card,
-  Alert
-} from '@mantine/core';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import CheckIcon from '@mui/icons-material/Check';
-import ErrorIcon from '@mui/icons-material/Error';
-import { useFileContext } from '../../../contexts/FileContext';
-import { useFlatToolRegistry } from '../../../data/useTranslatedToolRegistry';
-import { executeAutomationSequence } from '../../../utils/automationExecutor';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Text, Stack, Group, Progress, Card } from "@mantine/core";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import CheckIcon from "@mui/icons-material/Check";
+import ErrorIcon from "@mui/icons-material/Error";
+import { useFileSelection } from "../../../contexts/FileSelectionContext";
+import { useFlatToolRegistry } from "../../../data/useTranslatedToolRegistry";
+import { executeAutomationSequence } from "../../../utils/automationExecutor";

 interface AutomationRunProps {
  automation: any;
-  onBack: () => void;
  onComplete: () => void;
  automateOperation?: any; // Add the operation hook to store results
 }
@ -30,18 +18,17 @@ interface ExecutionStep {
  id: string;
  operation: string;
  name: string;
-  status: 'pending' | 'running' | 'completed' | 'error';
+  status: "pending" | "running" | "completed" | "error";
  error?: string;
 }

-export default function AutomationRun({ automation, onBack, onComplete, automateOperation }: AutomationRunProps) {
+export default function AutomationRun({ automation, onComplete, automateOperation }: AutomationRunProps) {
  const { t } = useTranslation();
-  const { activeFiles, consumeFiles } = useFileContext();
+  const { selectedFiles } = useFileSelection();
  const toolRegistry = useFlatToolRegistry();
  const [isExecuting, setIsExecuting] = useState(false);
  const [executionSteps, setExecutionSteps] = useState<ExecutionStep[]>([]);
  const [currentStepIndex, setCurrentStepIndex] = useState(-1);
-  const [currentFiles, setCurrentFiles] = useState<File[]>([]);

  // Initialize execution steps from automation
  React.useEffect(() => {
@ -52,74 +39,41 @@ export default function AutomationRun({ automation, onBack, onComplete, automate
          id: `${op.operation}-${index}`,
          operation: op.operation,
          name: tool?.name || op.operation,
-          status: 'pending' as const
+          status: "pending" as const,
        };
      });
      setExecutionSteps(steps);
    }
  }, [automation]); // Remove toolRegistry from dependencies to prevent infinite loops

-  // Initialize current files with active files (separate effect)
-  React.useEffect(() => {
-    if (activeFiles && activeFiles.length > 0) {
-      setCurrentFiles([...activeFiles]);
-    }
-  }, [activeFiles?.length]); // Only depend on length to avoid infinite loops
-
  const executeAutomation = async () => {
-    if (!activeFiles || activeFiles.length === 0) {
+    if (!selectedFiles || selectedFiles.length === 0) {
      // Show error - need files to execute automation
      return;
    }

+    if (!automateOperation) {
+      console.error('No automateOperation provided');
+      return;
+    }
+
    setIsExecuting(true);
    setCurrentStepIndex(0);

    try {
-      // Execute the automation sequence using the new executor
-      const finalResults = await executeAutomationSequence(
-        automation,
-        activeFiles,
-        (stepIndex: number, operationName: string) => {
-          // Step started
-          setCurrentStepIndex(stepIndex);
-          setExecutionSteps(prev => prev.map((step, idx) =>
-            idx === stepIndex ? { ...step, status: 'running' } : step
-          ));
-        },
-        (stepIndex: number, resultFiles: File[]) => {
-          // Step completed
-          setExecutionSteps(prev => prev.map((step, idx) =>
-            idx === stepIndex ? { ...step, status: 'completed' } : step
-          ));
-          setCurrentFiles(resultFiles);
-        },
-        (stepIndex: number, error: string) => {
-          // Step failed
-          setExecutionSteps(prev => prev.map((step, idx) =>
-            idx === stepIndex ? { ...step, status: 'error', error } : step
-          ));
-        }
+      // Use the automateOperation.executeOperation to handle file consumption properly
+      await automateOperation.executeOperation(
+        { automationConfig: automation },
+        selectedFiles
      );

      // All steps completed successfully
      setCurrentStepIndex(-1);
      setIsExecuting(false);
-      setCurrentFiles(finalResults);
-
-      // Properly integrate results with FileContext
-      if (finalResults.length > 0) {
-        console.log(`🎨 Integrating ${finalResults.length} result files with FileContext`);
-
-        // Use FileContext's consumeFiles to properly add results
-        // This replaces input files with output files (like other tools do)
-        await consumeFiles(activeFiles, finalResults);
-
-        console.log(`✅ Successfully integrated automation results with FileContext`);
-      }

+      console.log(`✅ Automation completed successfully`);
    } catch (error: any) {
-      console.error('Automation execution failed:', error);
+      console.error("Automation execution failed:", error);
      setIsExecuting(false);
      setCurrentStepIndex(-1);
    }
@ -127,24 +81,35 @@ export default function AutomationRun({ automation, onBack, onComplete, automate

  const getStepIcon = (step: ExecutionStep) => {
    switch (step.status) {
-      case 'completed':
-        return <CheckIcon style={{ fontSize: 16, color: 'green' }} />;
-      case 'error':
-        return <ErrorIcon style={{ fontSize: 16, color: 'red' }} />;
-      case 'running':
-        return <div style={{ width: 16, height: 16, border: '2px solid #ccc', borderTop: '2px solid #007bff', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />;
+      case "completed":
+        return <CheckIcon style={{ fontSize: 16, color: "green" }} />;
+      case "error":
+        return <ErrorIcon style={{ fontSize: 16, color: "red" }} />;
+      case "running":
+        return (
+          <div
+            style={{
+              width: 16,
+              height: 16,
+              border: "2px solid #ccc",
+              borderTop: "2px solid #007bff",
+              borderRadius: "50%",
+              animation: "spin 1s linear infinite",
+            }}
+          />
+        );
      default:
-        return <div style={{ width: 16, height: 16, border: '2px solid #ccc', borderRadius: '50%' }} />;
+        return <div style={{ width: 16, height: 16, border: "2px solid #ccc", borderRadius: "50%" }} />;
    }
  };

  const getProgress = () => {
-    const completedSteps = executionSteps.filter(step => step.status === 'completed').length;
+    const completedSteps = executionSteps.filter((step) => step.status === "completed").length;
    return (completedSteps / executionSteps.length) * 100;
  };

-  const allStepsCompleted = executionSteps.every(step => step.status === 'completed');
-  const hasErrors = executionSteps.some(step => step.status === 'error');
+  const allStepsCompleted = executionSteps.every((step) => step.status === "completed");
+  const hasErrors = executionSteps.some((step) => step.status === "error");

  return (
    <div>
@ -152,10 +117,10 @@ export default function AutomationRun({ automation, onBack, onComplete, automate
        {/* Automation Info */}
        <Card padding="md" withBorder>
          <Text size="sm" fw={500} mb="xs">
-            {automation?.name || t('automate.sequence.unnamed', 'Unnamed Automation')}
+            {automation?.name || t("automate.sequence.unnamed", "Unnamed Automation")}
          </Text>
          <Text size="xs" c="dimmed">
-            {t('automate.sequence.steps', '{{count}} steps', { count: executionSteps.length })}
+            {t("automate.sequence.steps", "{{count}} steps", { count: executionSteps.length })}
          </Text>
        </Card>

@ -163,9 +128,9 @@ export default function AutomationRun({ automation, onBack, onComplete, automate
        {isExecuting && (
          <div>
            <Text size="sm" mb="xs">
-              {t('automate.sequence.progress', 'Progress: {{current}}/{{total}}', {
+              {t("automate.sequence.progress", "Progress: {{current}}/{{total}}", {
                current: currentStepIndex + 1,
-                total: executionSteps.length
+                total: executionSteps.length,
              })}
            </Text>
            <Progress value={getProgress()} size="lg" />
@ -176,17 +141,20 @@ export default function AutomationRun({ automation, onBack, onComplete, automate
        <Stack gap="xs">
          {executionSteps.map((step, index) => (
            <Group key={step.id} gap="sm" align="center">
-              <Text size="xs" c="dimmed" style={{ minWidth: '1rem', textAlign: 'center' }}>
+              <Text size="xs" c="dimmed" style={{ minWidth: "1rem", textAlign: "center" }}>
                {index + 1}
              </Text>

              {getStepIcon(step)}

              <div style={{ flex: 1 }}>
-                <Text size="sm" style={{
-                  color: step.status === 'running' ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-text)',
-                  fontWeight: step.status === 'running' ? 500 : 400
-                }}>
+                <Text
+                  size="sm"
+                  style={{
+                    color: step.status === "running" ? "var(--mantine-color-blue-6)" : "var(--mantine-color-text)",
+                    fontWeight: step.status === "running" ? 500 : 400,
+                  }}
+                >
                  {step.name}
                </Text>
                {step.error && (
@ -204,23 +172,13 @@ export default function AutomationRun({ automation, onBack, onComplete, automate
          <Button
            leftSection={<PlayArrowIcon />}
            onClick={executeAutomation}
-            disabled={isExecuting || !activeFiles || activeFiles.length === 0}
+            disabled={isExecuting || !selectedFiles || selectedFiles.length === 0}
            loading={isExecuting}
          >
            {isExecuting
-              ? t('automate.sequence.running', 'Running Automation...')
-              : t('automate.sequence.run', 'Run Automation')
-            }
+              ? t("automate.sequence.running", "Running Automation...")
+              : t("automate.sequence.run", "Run Automation")}
          </Button>
-
-          {(allStepsCompleted || hasErrors) && (
-            <Button
-              variant="light"
-              onClick={onComplete}
-            >
-              {t('automate.sequence.finish', 'Finish')}
-            </Button>
-          )}
        </Group>
      </Stack>

--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@ -21,7 +21,8 @@ const showPlaceholderTools = false; // For development purposes. Allows seeing t
 export function useFlatToolRegistry(): ToolRegistry {
  const { t } = useTranslation();

-  const allTools: ToolRegistry = {
+  return useMemo(() => {
+    const allTools: ToolRegistry = {
    // Signing

    "certSign": {
@ -620,15 +621,16 @@ export function useFlatToolRegistry(): ToolRegistry {
    },
  };

-  if (showPlaceholderTools) {
-    return allTools;
-  } else {
-    const filteredTools = Object.keys(allTools)
-      .filter(key => allTools[key].component !== null || allTools[key].link)
-      .reduce((obj, key) => {
-        obj[key] = allTools[key];
-        return obj;
-      }, {} as ToolRegistry);
-    return filteredTools;
-  }
+    if (showPlaceholderTools) {
+      return allTools;
+    } else {
+      const filteredTools = Object.keys(allTools)
+        .filter(key => allTools[key].component !== null || allTools[key].link)
+        .reduce((obj, key) => {
+          obj[key] = allTools[key];
+          return obj;
+        }, {} as ToolRegistry);
+      return filteredTools;
+    }
+  }, [t]); // Only re-compute when translations change
 }
--- a/frontend/src/hooks/tools/automate/useAutomateOperation.ts
+++ b/frontend/src/hooks/tools/automate/useAutomateOperation.ts
@ -1,5 +1,6 @@
 import { useToolOperation } from '../shared/useToolOperation';
 import { useCallback } from 'react';
+import { executeAutomationSequence } from '../../../utils/automationExecutor';

 interface AutomateParameters {
  automationConfig?: any;
@ -7,16 +8,36 @@ interface AutomateParameters {

 export function useAutomateOperation() {
  const customProcessor = useCallback(async (params: AutomateParameters, files: File[]) => {
-    // For now, this is a placeholder - the automation execution will be implemented later
-    // This function would send the automation config to the backend pipeline endpoint
-    console.log('Automation execution not yet implemented', { params, files });
-    throw new Error('Automation execution not yet implemented');
+    console.log('🚀 Starting automation execution via customProcessor', { params, files });
+    
+    if (!params.automationConfig) {
+      throw new Error('No automation configuration provided');
+    }
+
+    // Execute the automation sequence and return the final results
+    const finalResults = await executeAutomationSequence(
+      params.automationConfig,
+      files,
+      (stepIndex: number, operationName: string) => {
+        console.log(`Step ${stepIndex + 1} started: ${operationName}`);
+      },
+      (stepIndex: number, resultFiles: File[]) => {
+        console.log(`Step ${stepIndex + 1} completed with ${resultFiles.length} files`);
+      },
+      (stepIndex: number, error: string) => {
+        console.error(`Step ${stepIndex + 1} failed:`, error);
+        throw new Error(`Automation step ${stepIndex + 1} failed: ${error}`);
+      }
+    );
+
+    console.log(`✅ Automation completed, returning ${finalResults.length} files`);
+    return finalResults;
  }, []);

  return useToolOperation<AutomateParameters>({
    operationType: 'automate',
-    endpoint: '/api/v1/pipeline/handleData',
-    buildFormData: () => new FormData(), // Placeholder, not used with customProcessor
+    endpoint: '/api/v1/pipeline/handleData', // Not used with customProcessor
+    buildFormData: () => new FormData(), // Not used with customProcessor
    customProcessor,
    filePrefix: 'automated_'
  });
--- a/frontend/src/tools/Automate.tsx
+++ b/frontend/src/tools/Automate.tsx
@ -74,7 +74,6 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
        return (
          <AutomationRun
            automation={stepData.automation}
-            onBack={() => handleStepChange({ step: 'selection'})}
            onComplete={handleComplete}
            automateOperation={automateOperation}
          />
@ -121,7 +120,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
    // Run step
    createStep(t('automate.run.title', 'Run Automation'), {
      isVisible: currentStep === 'run',
-      isCollapsed: false
+      isCollapsed: hasResults,
    }, currentStep === 'run' ? renderCurrentStep() : null)
  ];