@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/packages/diagrams/src/lib/templates/cloud-arch/components/SubnetSelector.tsx

@@ -1,469 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-  ListItemAvatar,
-  Avatar,
-  Typography,
-  Box,
-  Chip,
-  RadioGroup,
-  FormControlLabel,
-  Radio,
-  Divider,
-} from '@mui/material';
-import { Node } from 'reactflow';
-import { getServiceInfo } from '../utils/iconMapping';
-import CloudIcon from '@mui/icons-material/Cloud';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import StorageIcon from '@mui/icons-material/Storage';
-import SecurityIcon from '@mui/icons-material/Security';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-
-interface SubnetSelectorProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect: (subnetId: string | null) => void;
-  nodes: Node[];
-  serviceInfo: {
-    service: string;
-    cloudProvider: string;
-    nodeType: string;
-    label: string;
-    position: { x: number; y: number };
-  } | null;
-}
-
-const SubnetSelector: React.FC<SubnetSelectorProps> = ({
-  open,
-  onClose,
-  onSelect,
-  nodes,
-  serviceInfo,
-}) => {
-  const [selectedSubnet, setSelectedSubnet] = useState<string | null>(null);
-
-  // Get available subnets based on cloud provider and service type
-  const getAvailableSubnets = () => {
-    if (!serviceInfo) return [];
-
-    const cloudProvider = serviceInfo.cloudProvider;
-    const service = serviceInfo.service;
-    const containerTypes = ['subnetNode'];
-    
-    // Get valid parent types for this specific service
-    const validParentTypes = getValidParentTypes(service, cloudProvider);
-    
-    // Filter nodes that can contain this specific service
-    const availableContainers = nodes.filter(node => {
-      if (!containerTypes.includes(node.type || '')) return false;
-      
-      // Check if the node matches the cloud provider
-      if (node.data?.cloudProvider !== cloudProvider) return false;
-      
-      // Check if this container type is valid for the service
-      return validParentTypes.includes(node.data?.service);
-    });
-
-    return availableContainers;
-  };
-
-  // Get valid parent types for a specific service
-  const getValidParentTypes = (service: string, cloudProvider: string) => {
-    switch (cloudProvider) {
-      case 'aws':
-        return getAWSValidParents(service);
-      case 'azure':
-        return getAzureValidParents(service);
-      case 'gcp':
-        return getGCPValidParents(service);
-      default:
-        return [];
-    }
-  };
-
-  // AWS service placement rules
-  const getAWSValidParents = (service: string) => {
-    // Services that must be in subnets
-    const subnetOnlyServices = [
-      'ec2', 'rds', 'ecs', 'eks', 'aurora', 'documentdb', 'elasticache', 'neptune',
-      'redshift', 'emr', 'sagemaker', 'batch', 'elastic-beanstalk', 'app-runner',
-      'elastic-load-balancing', 'application-load-balancer', 'network-load-balancer',
-      'nat-gateway', 'ec2-image-builder', 'keyspaces', 'memorydb-redis', 'timestream',
-      'rds-vmware', 'database-migration-service', 'elastic-container-service',
-      'elastic-kubernetes-service', 'fargate', 'ecs-anywhere', 'eks-anywhere',
-      'eks-cloud', 'eks-distro', 'elastic-container-registry'
-    ];
-    
-    // Services that can be at account level (global services)
-    const accountLevelServices = [
-      's3', 'cloudfront', 'route-53', 'iam', 'lambda', 'api-gateway', 'sns', 'sqs',
-      'dynamodb', 'cloudwatch', 'secrets-manager', 'kms', 'cognito', 'waf', 'shield',
-      'guardduty', 'security-hub', 'inspector', 'macie', 'detective', 'certificate-manager',
-      'cloudhsm', 'directory-service', 'firewall-manager', 'iam-identity-center',
-      'private-certificate-authority', 'resource-access-manager', 'security-lake',
-      'signer', 'verified-permissions', 'artifact', 'audit-manager', 'backup',
-      'storage-gateway', 'snowball', 'snowball-edge', 'snowcone', 'snowmobile',
-      's3-outposts', 'fsx', 'fsx-lustre', 'fsx-ontap', 'fsx-openzfs', 'fsx-wfs',
-      'elastic-disaster-recovery', 'file-cache', 'application-auto-scaling',
-      'ec2-auto-scaling', 'serverless-application-repository'
-    ];
-    
-    // Services that can be in VPC level
-    const vpcLevelServices = [
-      'internet-gateway', 'transit-gateway', 'vpc-endpoint', 'direct-connect',
-      'site-to-site-vpn', 'client-vpn', 'app-mesh', 'cloud-map', 'cloud-wan',
-      'privatelink', 'vpc-lattice', 'global-accelerator', 'network-firewall',
-      'verified-access', 'private-5g'
-    ];
-
-    if (subnetOnlyServices.includes(service)) {
-      return ['subnet'];
-    } else if (accountLevelServices.includes(service)) {
-      return ['account'];
-    } else if (vpcLevelServices.includes(service)) {
-      return ['vpc'];
-    } else {
-      // Default: can be in subnet for most compute/database services
-      return ['subnet'];
-    }
-  };
-
-  // Azure service placement rules
-  const getAzureValidParents = (service: string) => {
-    // Services that must be in subnets
-    const subnetOnlyServices = [
-      'virtual-machines', 'vm-scale-sets', 'sql-database', 'mysql-server', 'postgresql-server',
-      'mariadb-server', 'redis-cache', 'managed-database', 'kubernetes-services',
-      'container-instances', 'application-gateway', 'load-balancer', 'load-balancers',
-      'azure-firewall', 'vpn-gateway', 'express-route', 'network-interface',
-      'network-interfaces', 'batch-accounts', 'app-service-vnet', 'function-apps-vnet'
-    ];
-    
-    // Services that can be at resource group level
-    const resourceGroupServices = [
-      'storage-account', 'storage-accounts', 'managed-disks', 'blob-storage', 'file-storage',
-      'cdn-profiles', 'cosmos-db', 'key-vaults', 'app-services', 'app-service',
-      'function-apps', 'service-bus', 'event-hubs', 'azure-sql', 'security-center',
-      'azure-active-directory', 'network-security-groups', 'image-definitions',
-      'image-versions', 'shared-image-galleries', 'vm-images-classic', 'disks-classic',
-      'container-services-deprecated', 'host-groups', 'service-fabric-clusters',
-      'container-registries', 'red-hat-openshift'
-    ];
-
-    if (subnetOnlyServices.includes(service)) {
-      return ['subnet'];
-    } else if (resourceGroupServices.includes(service)) {
-      return ['resource-group'];
-    } else {
-      // Default: can be in subnet for most compute services
-      return ['subnet'];
-    }
-  };
-
-  // GCP service placement rules
-  const getGCPValidParents = (service: string) => {
-    // Services that must be in subnets
-    const subnetOnlyServices = [
-      'compute-engine', 'cloud-sql', 'cloud-spanner', 'cloud-bigtable', 'cloud-memorystore',
-      'kubernetes-engine', 'cloud-run-vpc', 'cloud-functions-vpc', 'cloud-load-balancing',
-      'cloud-armor', 'cloud-vpn', 'cloud-interconnect', 'cloud-nat', 'cloud-router',
-      'cloud-firewall-rules', 'persistent-disk', 'filestore'
-    ];
-    
-    // Services that can be at project level (global services)
-    const projectLevelServices = [
-      'cloud-storage', 'cloud-cdn', 'cloud-dns', 'cloud-iam', 'iam', 'cloud-run',
-      'cloud-functions', 'app-engine', 'cloud-scheduler', 'pub-sub', 'cloud-kms',
-      'cloud-security-command-center', 'binary-authorization', 'cloud-asset-inventory',
-      'data-loss-prevention-api', 'beyondcorp', 'cloud-build', 'cloud-firestore'
-    ];
-
-    if (subnetOnlyServices.includes(service)) {
-      return ['subnet'];
-    } else if (projectLevelServices.includes(service)) {
-      return ['project'];
-    } else {
-      // Default: can be in subnet for most compute services
-      return ['subnet'];
-    }
-  };
-
-  // Check if root level placement is allowed for this service
-  const isRootLevelAllowed = (service: string, cloudProvider: string) => {
-    const validParents = getValidParentTypes(service, cloudProvider);
-    
-    switch (cloudProvider) {
-      case 'aws':
-        return validParents.includes('account');
-      case 'azure':
-        return validParents.includes('subscription') || validParents.includes('resource-group');
-      case 'gcp':
-        return validParents.includes('project');
-      default:
-        return false;
-    }
-  };
-
-  const getContainerIcon = (service: string) => {
-    switch (service) {
-      case 'account':
-      case 'subscription':
-        return <AccountTreeIcon sx={{ color: '#FF9900' }} />;
-      case 'vpc':
-      case 'virtual-network':
-        return <CloudIcon sx={{ color: '#61dafb' }} />;
-      case 'subnet':
-        return <StorageIcon sx={{ color: '#4CAF50' }} />;
-      case 'availability-zone':
-      case 'local-zone':
-        return <LocationOnIcon sx={{ color: '#9c27b0' }} />;
-      case 'security-group':
-        return <SecurityIcon sx={{ color: '#f44336' }} />;
-      case 'project':
-        return <AccountTreeIcon sx={{ color: '#4285F4' }} />;
-      default:
-        return <CloudIcon sx={{ color: '#61dafb' }} />;
-    }
-  };
-
-  const getContainerDisplayName = (service: string) => {
-    switch (service) {
-      case 'account':
-        return 'AWS Account';
-      case 'subscription':
-        return 'Azure Subscription';
-      case 'resource-group':
-        return 'Resource Group';
-      case 'virtual-network':
-        return 'Virtual Network';
-      case 'vpc':
-        return 'VPC';
-      case 'subnet':
-        return 'Subnet';
-      case 'availability-zone':
-        return 'Availability Zone';
-      case 'local-zone':
-        return 'Local Zone';
-      case 'security-group':
-        return 'Security Group';
-      case 'project':
-        return 'GCP Project';
-      default:
-        return service;
-    }
-  };
-
-  const handleConfirm = () => {
-    onSelect(selectedSubnet);
-    setSelectedSubnet(null);
-  };
-
-  const handleCancel = () => {
-    onClose();
-    setSelectedSubnet(null);
-  };
-
-  const availableSubnets = getAvailableSubnets();
-  const serviceIconInfo = serviceInfo ? getServiceInfo(serviceInfo.service, serviceInfo.cloudProvider as 'aws' | 'azure' | 'gcp') : null;
-  const allowRootLevel = serviceInfo ? isRootLevelAllowed(serviceInfo.service, serviceInfo.cloudProvider) : false;
-
-  return (
-    <Dialog 
-      open={open} 
-      onClose={handleCancel}
-      maxWidth="sm"
-      fullWidth
-      PaperProps={{
-        sx: {
-          bgcolor: '#2a2a2a',
-          color: '#fff',
-          minHeight: '400px',
-        }
-      }}
-    >
-      <DialogTitle sx={{ 
-        bgcolor: '#1a1a1a', 
-        color: '#fff',
-        borderBottom: '1px solid #444',
-        pb: 2
-      }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          {serviceIconInfo && (
-            <Avatar sx={{ bgcolor: 'transparent', width: 40, height: 40 }}>
-              <img 
-                src={serviceIconInfo.icon} 
-                alt={serviceIconInfo.name}
-                width={32}
-                height={32}
-                style={{ objectFit: 'contain' }}
-              />
-            </Avatar>
-          )}
-          <Box>
-            <Typography variant="h6">
-              Select Container for {serviceInfo?.label || serviceInfo?.service}
-            </Typography>
-            <Typography variant="body2" sx={{ color: '#aaa', mt: 0.5 }}>
-              Choose where to place this service in your {serviceInfo?.cloudProvider?.toUpperCase()} architecture
-            </Typography>
-          </Box>
-        </Box>
-      </DialogTitle>
-      
-      <DialogContent sx={{ pt: 2, pb: 1 }}>
-        {availableSubnets.length > 0 || allowRootLevel ? (
-          <>
-            <Typography variant="subtitle2" sx={{ mb: 2, color: '#ccc' }}>
-              Available placement options:
-            </Typography>
-            <RadioGroup
-              value={selectedSubnet || ''}
-              onChange={(e) => setSelectedSubnet(e.target.value || null)}
-            >
-              {/* Root level option - only show if allowed */}
-              {allowRootLevel && (
-                <>
-                  <FormControlLabel
-                    value="root"
-                    control={<Radio sx={{ color: '#61dafb' }} />}
-                    label={
-                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 1 }}>
-                        <Avatar sx={{ bgcolor: 'transparent', width: 32, height: 32 }}>
-                          <CloudIcon sx={{ color: '#61dafb' }} />
-                        </Avatar>
-                        <Box>
-                          <Typography variant="body1" sx={{ color: '#fff' }}>
-                            {serviceInfo?.cloudProvider === 'aws' 
-                              ? 'Account Level' 
-                              : serviceInfo?.cloudProvider === 'azure' 
-                                ? 'Subscription Level' 
-                                : 'Project Level'}
-                          </Typography>
-                          <Typography variant="body2" sx={{ color: '#aaa' }}>
-                            {serviceInfo?.cloudProvider === 'aws' 
-                              ? 'Place at AWS Account level (global service)' 
-                              : serviceInfo?.cloudProvider === 'azure' 
-                                ? 'Place at Azure Subscription level (global service)' 
-                                : 'Place at GCP Project level (global service)'}
-                          </Typography>
-                        </Box>
-                      </Box>
-                    }
-                    sx={{ 
-                      m: 0,
-                      '& .MuiFormControlLabel-label': { width: '100%' },
-                      '&:hover': { bgcolor: 'rgba(97, 218, 251, 0.1)' },
-                      borderRadius: 1,
-                      px: 1,
-                    }}
-                  />
-                  
-                  {availableSubnets.length > 0 && (
-                    <Divider sx={{ my: 1, borderColor: '#444' }} />
-                  )}
-                </>
-              )}
-              
-              {availableSubnets.map((subnet) => (
-                <FormControlLabel
-                  key={subnet.id}
-                  value={subnet.id}
-                  control={<Radio sx={{ color: '#61dafb' }} />}
-                  label={
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 1 }}>
-                      <Avatar sx={{ bgcolor: 'transparent', width: 32, height: 32 }}>
-                        {getContainerIcon(subnet.data?.service)}
-                      </Avatar>
-                      <Box sx={{ flex: 1 }}>
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                          <Typography variant="body1" sx={{ color: '#fff' }}>
-                            {subnet.data?.label || getContainerDisplayName(subnet.data?.service)}
-                          </Typography>
-                          <Chip
-                            label={subnet.data?.service}
-                            size="small"
-                            sx={{
-                              bgcolor: 'rgba(97, 218, 251, 0.2)',
-                              color: '#61dafb',
-                              fontSize: '0.7rem',
-                              height: '20px',
-                            }}
-                          />
-                        </Box>
-                        <Typography variant="body2" sx={{ color: '#aaa' }}>
-                          {subnet.data?.sublabel || `${getContainerDisplayName(subnet.data?.service)} container`}
-                        </Typography>
-                      </Box>
-                    </Box>
-                  }
-                  sx={{ 
-                    m: 0,
-                    '& .MuiFormControlLabel-label': { width: '100%' },
-                    '&:hover': { bgcolor: 'rgba(97, 218, 251, 0.1)' },
-                    borderRadius: 1,
-                    px: 1,
-                  }}
-                />
-              ))}
-            </RadioGroup>
-          </>
-        ) : (
-          <Box sx={{ textAlign: 'center', py: 4 }}>
-            <CloudIcon sx={{ fontSize: 48, color: '#666', mb: 2 }} />
-            <Typography variant="h6" sx={{ color: '#ccc', mb: 1 }}>
-              No valid containers available
-            </Typography>
-            <Typography variant="body2" sx={{ color: '#aaa' }}>
-              This service requires specific containers. Please create the appropriate containers first.
-            </Typography>
-            <Typography variant="body2" sx={{ color: '#888', mt: 2 }}>
-              {serviceInfo && (
-                <>
-                  <strong>{serviceInfo.service}</strong> can be placed in:{' '}
-                  {getValidParentTypes(serviceInfo.service, serviceInfo.cloudProvider)
-                    .map(type => getContainerDisplayName(type))
-                    .join(', ')}
-                </>
-              )}
-            </Typography>
-          </Box>
-        )}
-      </DialogContent>
-      
-      <DialogActions sx={{ p: 3, bgcolor: '#1a1a1a', borderTop: '1px solid #444' }}>
-        <Button 
-          onClick={handleCancel}
-          sx={{ 
-            color: '#aaa',
-            '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
-          }}
-        >
-          Cancel
-        </Button>
-        <Button 
-          onClick={handleConfirm}
-          disabled={!selectedSubnet}
-          variant="contained"
-          sx={{
-            bgcolor: '#61dafb',
-            color: '#000',
-            '&:hover': { bgcolor: '#4fa8d8' },
-            '&:disabled': { bgcolor: '#444', color: '#666' }
-          }}
-        >
-          Place Service
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default SubnetSelector;