added ec2 connector

deepfence_frontend/apps/dashboard/src/components/hosts-connector/AWSEC2ConnectorForm.tsx

@@ -0,0 +1,37 @@
+import { Step, StepIndicator, Stepper } from 'ui-components';
+
+import { DFLink } from '@/components/DFLink';
+import { InfoIcon } from '@/components/icons/common/Info';
+
+export const AWSEC2ConnectorForm = () => {
+  return (
+    <Stepper>
+      <Step
+        indicator={
+          <StepIndicator className="rounded-full">
+            <div className="w-6 h-6 flex items-center justify-center">
+              <span className="w-4 h-4">
+                <InfoIcon />
+              </span>
+            </div>
+          </StepIndicator>
+        }
+        title="AWS ECS"
+      >
+        <div className="text-p7 dark:text-text-text-and-icon">
+          In AWS ECS, the ThreatStryker sensors are deployed as a daemon service using
+          task definition.{' '}
+          <DFLink
+            href={`https://community.deepfence.io/threatmapper/docs/sensors/aws-ecs`}
+            target="_blank"
+            rel="noreferrer"
+            className="mt-2"
+          >
+            Please read our documentation
+          </DFLink>
+          .
+        </div>
+      </Step>
+    </Stepper>
+  );
+};

deepfence_frontend/apps/dashboard/src/components/hosts-connector/NoConnectors.tsx

@@ -10,6 +10,7 @@ export const ACCOUNT_CONNECTOR = {
   HOST: 'host',
   KUBERNETES: 'kubernetes',
   CLUSTER: 'cluster',
+  AWS_ECS: 'aws_ecs',
 } as const;
 
 export const NoConnectors = () => {

deepfence_frontend/apps/dashboard/src/components/icons/hosts/AWSEC2.tsx

@@ -0,0 +1,15 @@
+export const AWSEC2Icon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="m21.895 15.256l-3.369-2.021V8.421a.42.42 0 0 0-.209-.364l-4.843-2.825V1.159l8.42 4.976Zm.635-9.724L13.267.06a.422.422 0 0 0-.635.362v5.053c0 .15.08.288.208.363l4.844 2.826v4.81a.42.42 0 0 0 .205.362l4.21 2.526a.42.42 0 0 0 .638-.361V5.895a.42.42 0 0 0-.207-.363ZM11.977 23.1l-9.872-5.248V6.135l8.421-4.976v4.084L6.09 8.066a.422.422 0 0 0-.195.355v7.158a.42.42 0 0 0 .226.373l5.665 2.948a.42.42 0 0 0 .387 0l5.496-2.84l3.382 2.03l-9.074 5.01Zm10.135-5.356l-4.21-2.526a.42.42 0 0 0-.411-.013l-5.51 2.847l-5.244-2.729v-6.67l4.436-2.824a.422.422 0 0 0 .195-.355V.42a.421.421 0 0 0-.635-.362L1.47 5.532a.421.421 0 0 0-.207.363v12.21c0 .156.086.299.223.372l10.297 5.474a.421.421 0 0 0 .401-.004l9.915-5.473a.422.422 0 0 0 .013-.73Z"
+      ></path>
+    </svg>
+  );
+};

deepfence_frontend/apps/dashboard/src/features/onboard/pages/Connector.tsx

@@ -7,6 +7,7 @@ import { AWSCloudFormation } from '@/components/clouds-connector/AWSCloudFormati
 import { AWSTerraform } from '@/components/clouds-connector/AWSTerraform';
 import { AzureConnectorForm } from '@/components/clouds-connector/AzureConnectorForm';
 import { GCPConnectorForm } from '@/components/clouds-connector/GCPConnectorForm';
+import { AWSEC2ConnectorForm } from '@/components/hosts-connector/AWSEC2ConnectorForm';
 import { DockerConnectorForm } from '@/components/hosts-connector/DockerConnectorForm';
 import { K8ConnectorForm } from '@/components/hosts-connector/K8ConnectorForm';
 import { LinuxConnectorForm } from '@/components/hosts-connector/LinuxConnectorForm';
@@ -38,6 +39,9 @@ const Connector = () => {
   } else if (ACCOUNT_CONNECTOR.AWS === connectorType) {
     title = 'Connect to Amazon Web Services';
     description = 'Deploy all modules for Deepfence Scanner at your aws cloud.';
+  } else if (ACCOUNT_CONNECTOR.AWS_ECS === connectorType) {
+    title = 'Connect AWS ECS (EC2 Provider)';
+    description = '';
   } else if (ACCOUNT_CONNECTOR.AZURE === connectorType) {
     title = 'Connect to Azure Cloud';
     description = 'Deploy all modules for Deepfence Scanner at your azure cloud.';
@@ -94,6 +98,8 @@ const Connector = () => {
       {ACCOUNT_CONNECTOR.AZURE === connectorType && <AzureConnectorForm />}
       {ACCOUNT_CONNECTOR.GCP === connectorType && <GCPConnectorForm />}
 
+      {ACCOUNT_CONNECTOR.AWS_ECS === connectorType && <AWSEC2ConnectorForm />}
+
       {isRegistryConnector ? (
         <RegistriesConnector />
       ) : (

deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx

@@ -9,6 +9,7 @@ import { ACCOUNT_CONNECTOR } from '@/components/hosts-connector/NoConnectors';
 import { ArrowLine } from '@/components/icons/common/ArrowLine';
 import { CloudLine } from '@/components/icons/common/CloudLine';
 import { HostIcon } from '@/components/icons/host';
+import { AWSEC2Icon } from '@/components/icons/hosts/AWSEC2';
 import { AwsIcon } from '@/components/icons/posture/Aws';
 import { AzureIcon } from '@/components/icons/posture/Azure';
 import { GoogleIcon } from '@/components/icons/posture/Google';
@@ -103,7 +104,9 @@ const Cloud = () => {
   );
 };
 const Host = () => {
-  const connectors = [
+  const [showAll, setShowAll] = useState(false);
+
+  const hostConnectors = [
     {
       icon: <KubernetesIcon />,
       label: 'Kubernetes Clusters',
@@ -119,8 +122,31 @@ const Host = () => {
       label: 'Linux Bare-Metal/VM',
       path: ACCOUNT_CONNECTOR.LINUX,
     },
+    {
+      icon: (
+        <div className="dark:text-[#F68633]">
+          <AWSEC2Icon />
+        </div>
+      ),
+      label: 'AWS ECS (EC2 Provider)',
+      path: ACCOUNT_CONNECTOR.AWS_ECS,
+    },
   ];
 
+  const onShowAll = () => {
+    setShowAll((state) => {
+      return !state;
+    });
+  };
+
+  const connectors = useMemo(() => {
+    if (showAll) {
+      return [...hostConnectors];
+    } else {
+      return [...hostConnectors.slice(0, 3)];
+    }
+  }, [showAll]);
+
   return (
     <>
       <div className="py-4 items-center flex px-6 gap-x-2">
@@ -142,6 +168,11 @@ const Host = () => {
               </div>
             );
           })}
+          {!showAll ? (
+            <Button size="sm" onClick={onShowAll} className="ml-3 mt-2">
+              +1 more
+            </Button>
+          ) : null}
         </div>
       </div>
     </>

deepfence_frontend/apps/dashboard/src/features/settings/pages/ConnectorInstructions.tsx

@@ -1,19 +1,22 @@
-import { startCase } from 'lodash-es';
+import { useMemo, useState } from 'react';
 import { generatePath, useParams } from 'react-router-dom';
 import { cn } from 'tailwind-preset';
-import { Card } from 'ui-components';
+import { Button, Card } from 'ui-components';
 
 import { AWSCloudFormation } from '@/components/clouds-connector/AWSCloudFormation';
 import { AWSTerraform } from '@/components/clouds-connector/AWSTerraform';
 import { AzureConnectorForm } from '@/components/clouds-connector/AzureConnectorForm';
 import { GCPConnectorForm } from '@/components/clouds-connector/GCPConnectorForm';
 import { DFLink } from '@/components/DFLink';
+import { AWSEC2ConnectorForm } from '@/components/hosts-connector/AWSEC2ConnectorForm';
 import { DockerConnectorForm } from '@/components/hosts-connector/DockerConnectorForm';
 import { K8ConnectorForm } from '@/components/hosts-connector/K8ConnectorForm';
 import { LinuxConnectorForm } from '@/components/hosts-connector/LinuxConnectorForm';
+import { ACCOUNT_CONNECTOR } from '@/components/hosts-connector/NoConnectors';
 import { ArrowLine } from '@/components/icons/common/ArrowLine';
 import { CloudLine } from '@/components/icons/common/CloudLine';
 import { HostIcon } from '@/components/icons/host';
+import { AWSEC2Icon } from '@/components/icons/hosts/AWSEC2';
 import { AwsIcon } from '@/components/icons/posture/Aws';
 import { AzureIcon } from '@/components/icons/posture/Azure';
 import { GoogleIcon } from '@/components/icons/posture/Google';
@@ -28,15 +31,16 @@ interface CardConnectProps {
   icon: React.ReactNode;
 }
 
-const ACCOUNT_CONNECTOR = {
-  DOCKER: 'docker container',
-  AWS: 'amazon web services',
-  GCP: 'google cloud platform',
-  AZURE: 'microsoft azure',
-  LINUX: 'linux bare-metal vm',
-  HOST: 'host',
-  KUBERNETES: 'kubernetes cluster',
-  CLUSTER: 'cluster',
+const ACCOUNT_CONNECTOR_TITLE: { [k: string]: string } = {
+  docker: 'Docker container',
+  aws: 'Amazon web services',
+  gcp: 'Google cloud platform',
+  azure: 'Microsoft azure',
+  linux: 'Linux bare-metal/vm',
+  host: 'Host',
+  kubernetes: 'Kubernetes cluster',
+  cluster: 'Cluster',
+  aws_ecs: 'AWS ECS (EC2 Provider)',
 } as const;
 
 const CardConnect = ({ label, path, icon }: CardConnectProps) => {
@@ -117,7 +121,9 @@ const Cloud = () => {
   );
 };
 const Host = () => {
-  const connectors = [
+  const [showAll, setShowAll] = useState(false);
+
+  const hostConnectors = [
     {
       icon: <KubernetesIcon />,
       label: 'Kubernetes Clusters',
@@ -133,8 +139,31 @@ const Host = () => {
       label: 'Linux Bare-Metal/VM',
       path: ACCOUNT_CONNECTOR.LINUX,
     },
+    {
+      icon: (
+        <div className="dark:text-[#F68633]">
+          <AWSEC2Icon />
+        </div>
+      ),
+      label: 'AWS ECS (EC2 Provider)',
+      path: ACCOUNT_CONNECTOR.AWS_ECS,
+    },
   ];
 
+  const onShowAll = () => {
+    setShowAll((state) => {
+      return !state;
+    });
+  };
+
+  const connectors = useMemo(() => {
+    if (showAll) {
+      return [...hostConnectors];
+    } else {
+      return [...hostConnectors.slice(0, 3)];
+    }
+  }, [showAll]);
+
   return (
     <>
       <div className="py-4 items-center flex px-6 gap-x-2">
@@ -160,6 +189,11 @@ const Host = () => {
               </div>
             );
           })}
+          {!showAll ? (
+            <Button size="sm" onClick={onShowAll} className="ml-3 mt-2">
+              +1 more
+            </Button>
+          ) : null}
         </div>
       </div>
     </>
@@ -175,7 +209,7 @@ const Instructions = ({ connectorType }: { connectorType: string }) => {
           </div>
         </DFLink>
         <h3 className="font-medium text-gray-900 dark:text-white text-base">
-          {startCase(connectorType)}
+          {ACCOUNT_CONNECTOR_TITLE[connectorType]}
         </h3>
       </div>
       <div className="pt-2">
@@ -190,6 +224,7 @@ const Instructions = ({ connectorType }: { connectorType: string }) => {
         )}
         {ACCOUNT_CONNECTOR.AZURE === connectorType && <AzureConnectorForm />}
         {ACCOUNT_CONNECTOR.GCP === connectorType && <GCPConnectorForm />}
+        {ACCOUNT_CONNECTOR.AWS_ECS === connectorType && <AWSEC2ConnectorForm />}
       </div>
     </>
   );