@flowuent-org/diagramming-core 1.3.9 → 1.4.0

package/packages/diagrams/src/lib/components/automation/AutomationMonitoringNode.tsx

@@ -1,401 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import { Handle, Position, useNodeId } from '@xyflow/react';
-import {
-  Box,
-  Typography,
-  Chip,
-  IconButton,
-  Card,
-  LinearProgress,
-} from '@mui/material';
-import {
-  Visibility as VisibilityIcon,
-  AccessTime as AccessTimeIcon,
-  CheckCircle as CheckCircleIcon,
-  Error as ErrorIcon,
-} from '@mui/icons-material';
-import { RiCloseLine } from 'react-icons/ri';
-import ReactJson from 'react-json-view';
-import { useDiagram } from '../../contexts/DiagramProvider';
-import { useSearch } from '../../contexts/SearchContext';
-import { NodeActionButtons } from './NodeActionButtons';
-import { getStatusColor } from './statusColors';
-import { getIconByName } from '../../utils/iconMapper';
-
-// ========================
-// Types
-// ========================
-
-export interface AutomationMonitoringNodeData {
-  label: string;
-  description: string;
-  status: 'Ready' | 'Running' | 'Completed' | 'Error' | 'Need to Config';
-  formData?: {
-    nodeId?: string;
-    title?: string;
-    type?: string;
-    [key: string]: any;
-  };
-  lastRun?: string;
-  lastRunAt?: string;
-  lastExecution?: string;
-  duration?: string;
-  executionResult?: {
-    success: boolean;
-    data?: any;
-    error?: string;
-  };
-  iconName?: string;
-}
-
-export interface AutomationMonitoringNodeProps {
-  data: AutomationMonitoringNodeData;
-  selected?: boolean;
-}
-
-// ========================
-// Main Component
-// ========================
-
-export const AutomationMonitoringNode: React.FC<AutomationMonitoringNodeProps> = ({
-  data,
-  selected,
-}) => {
-  const { highlightText } = useSearch();
-  const [isJsonOpen, setIsJsonOpen] = useState(false);
-  const rootRef = useRef<any>(null);
-  const portalRef = useRef<HTMLDivElement | null>(null);
-  const nodeId = useNodeId();
-  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
-  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
-  const onNodesChange = useDiagram((state) => state.onNodesChange);
-  const nodes = useDiagram((state) => state.nodes);
-  const setNodes = useDiagram((state) => state.setNodes);
-
-  // Get the icon component based on the iconName
-  const IconComponent = getIconByName(data.iconName, VisibilityIcon);
-
-  // Status configuration
-  const status = data.status || 'Ready';
-  const statusConfig = getStatusColor(status);
-
-  // Handle JSON view
-  const handleJsonClick = () => {
-    if (nodeId) setSelectedNode(nodeId);
-    if (!enableJson) return;
-    setIsJsonOpen(!isJsonOpen);
-  };
-
-  const handleClose = () => {
-    setIsJsonOpen(false);
-    if (rootRef.current) {
-      rootRef.current.unmount();
-      rootRef.current = null;
-    }
-    if (portalRef.current) {
-      document.body.removeChild(portalRef.current);
-      portalRef.current = null;
-    }
-  };
-
-  // Click outside handler
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
-        handleClose();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isJsonOpen]);
-
-  // JSON popover portal
-  useEffect(() => {
-    if (isJsonOpen) {
-      const portalRoot = document.createElement('div');
-      document.body.appendChild(portalRoot);
-      portalRef.current = portalRoot;
-
-      const root = createRoot(portalRoot);
-      rootRef.current = root;
-
-      root.render(
-        <Card
-          id="automation-json-popover"
-          sx={{
-            position: 'fixed',
-            top: 0,
-            right: 0,
-            zIndex: 9999,
-            width: '400px',
-            height: '100vh',
-            overflow: 'auto',
-            bgcolor: '#242424',
-            color: '#fff',
-            border: '1px solid #333',
-          }}
-        >
-          <Box
-            sx={{
-              p: 2,
-              borderBottom: '1px solid #333',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}
-          >
-            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-              Monitoring Configuration
-            </Typography>
-            <IconButton size="small" onClick={handleClose} sx={{ color: '#fff' }}>
-              <RiCloseLine />
-            </IconButton>
-          </Box>
-          <Box sx={{ p: 2 }}>
-            <ReactJson
-              src={data}
-              theme="monokai"
-              collapsed={1}
-              displayDataTypes={false}
-              enableClipboard={false}
-              style={{
-                backgroundColor: 'transparent',
-                fontSize: '12px',
-              }}
-            />
-          </Box>
-        </Card>
-      );
-    }
-    return () => {
-      if (rootRef.current) {
-        rootRef.current.unmount();
-        rootRef.current = null;
-      }
-      if (portalRef.current && portalRef.current.parentNode) {
-        document.body.removeChild(portalRef.current);
-        portalRef.current = null;
-      }
-    };
-  }, [isJsonOpen, data]);
-
-  // Monitoring color theme
-  const monitoringColor = '#10B981'; // Green for monitoring
-
-  return (
-    <Box
-      sx={{
-        bgcolor: '#1E1E2E',
-        borderRadius: 2,
-        border: selected ? `2px solid ${monitoringColor}` : '1px solid #374151',
-        minWidth: 280,
-        maxWidth: 320,
-        overflow: 'hidden',
-        boxShadow: selected
-          ? `0 0 20px ${monitoringColor}30`
-          : '0 4px 12px rgba(0, 0, 0, 0.3)',
-        transition: 'all 0.2s ease',
-        ...(status === 'Running' && {
-          animation: 'pulse-glow 2s ease-in-out infinite',
-          '@keyframes pulse-glow': {
-            '0%, 100%': {
-              boxShadow: `0 0 20px ${monitoringColor}40, 0 0 40px ${monitoringColor}20`,
-              borderColor: `${monitoringColor}60`,
-            },
-            '50%': {
-              boxShadow: `0 0 30px ${monitoringColor}60, 0 0 60px ${monitoringColor}30`,
-              borderColor: `${monitoringColor}90`,
-            },
-          },
-        }),
-      }}
-      onClick={() => setSelectedNode(nodeId || '')}
-    >
-      {/* Input Handle */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{
-          background: monitoringColor,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
-        }}
-      />
-
-      {/* Header */}
-      <Box
-        sx={{
-          bgcolor: `${monitoringColor}15`,
-          borderBottom: `1px solid ${monitoringColor}30`,
-          px: 2,
-          py: 1.5,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-          <Box
-            sx={{
-              bgcolor: monitoringColor,
-              borderRadius: 1,
-              p: 0.75,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconComponent sx={{ fontSize: 18, color: '#fff' }} />
-          </Box>
-          <Box>
-            <Typography
-              variant="subtitle2"
-              sx={{ color: '#fff', fontWeight: 600, fontSize: 13 }}
-            >
-              {highlightText(data.label || 'Monitoring Node')}
-            </Typography>
-            <Typography
-              variant="caption"
-              sx={{ color: '#9CA3AF', fontSize: 10 }}
-            >
-              {data.description || 'Monitor and track changes on target pages or elements over time.'}
-            </Typography>
-          </Box>
-        </Box>
-        <Chip
-          size="small"
-          label={
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-              {status === 'Completed' && <CheckCircleIcon sx={{ fontSize: 12 }} />}
-              {status === 'Error' && <ErrorIcon sx={{ fontSize: 12 }} />}
-              <span>{statusConfig.label}</span>
-            </Box>
-          }
-          sx={{
-            height: 20,
-            fontSize: '10px',
-            fontWeight: 600,
-            color: statusConfig.color,
-            bgcolor: statusConfig.bgColor,
-            border: `1px solid ${statusConfig.color}20`,
-            '& .MuiChip-label': { px: 1 },
-          }}
-        />
-      </Box>
-
-      {/* Content */}
-      <Box sx={{ px: 2, py: 1.5 }}>
-        {/* Progress Bar (when running) */}
-        {status === 'Running' && (
-          <Box sx={{ mb: 1.5 }}>
-            <LinearProgress
-              variant="indeterminate"
-              sx={{
-                height: 4,
-                borderRadius: 2,
-                bgcolor: 'rgba(16, 185, 129, 0.1)',
-                '& .MuiLinearProgress-bar': {
-                  bgcolor: monitoringColor,
-                },
-              }}
-            />
-          </Box>
-        )}
-
-        {/* Execution Result */}
-        {data.executionResult && (
-          <Box
-            sx={{
-              bgcolor: data.executionResult.success
-                ? 'rgba(16, 185, 129, 0.1)'
-                : 'rgba(239, 68, 68, 0.1)',
-              borderRadius: 1,
-              p: 1,
-              mb: 1.5,
-              border: `1px solid ${
-                data.executionResult.success
-                  ? 'rgba(16, 185, 129, 0.3)'
-                  : 'rgba(239, 68, 68, 0.3)'
-              }`,
-            }}
-          >
-            <Typography
-              variant="caption"
-              sx={{
-                color: data.executionResult.success ? '#10B981' : '#EF4444',
-                fontSize: 10,
-              }}
-            >
-              {data.executionResult.success
-                ? '✓ Monitoring completed'
-                : `✗ ${data.executionResult.error || 'Monitoring failed'}`}
-            </Typography>
-          </Box>
-        )}
-
-        {/* Last Run Info */}
-        {data.lastRun && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              justifyContent: 'center',
-            }}
-          >
-            <AccessTimeIcon sx={{ fontSize: 10, color: '#6B7280' }} />
-            <Typography variant="caption" sx={{ color: '#6B7280', fontSize: 9 }}>
-              Last run: {data.lastRun}
-              {data.duration && ` · ${data.duration}`}
-            </Typography>
-          </Box>
-        )}
-      </Box>
-
-      {/* Node Action Buttons */}
-      <NodeActionButtons
-        selected={selected}
-        onDelete={() => {
-          if (nodeId && onNodesChange) {
-            onNodesChange([{ id: nodeId, type: 'remove' }]);
-          }
-        }}
-        onDuplicate={() => {
-          if (nodeId) {
-            const currentNode = nodes.find(n => n.id === nodeId);
-            if (currentNode) {
-              const newNode = {
-                ...currentNode,
-                id: `${currentNode.id}-copy-${Date.now()}`,
-                position: {
-                  x: currentNode.position.x + 50,
-                  y: currentNode.position.y + 50,
-                },
-                selected: false,
-              };
-              setNodes([...nodes, newNode]);
-            }
-          }
-        }}
-      />
-
-      {/* Output Handle */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{
-          background: monitoringColor,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
-        }}
-      />
-    </Box>
-  );
-};
-
-export default AutomationMonitoringNode;