Added instructions for docker and minor grammar changes

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/clouds/AWSCloudFormation.tsx

@@ -36,7 +36,7 @@ export const AWSCloudFormation = () => {
   return (
     <div className="w-full sm:w-1/2">
       <Stepper>
-        <Step indicator={<HiViewGridAdd />} title="Cloud Formation.">
+        <Step indicator={<HiViewGridAdd />} title="Cloud Formation">
           <div className={`${Typography.size.sm} dark:text-gray-200`}>
             Connect to your AWS Cloud Account via Cloud Formation. Find out more
             information by{' '}

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/clouds/AWSTerraform.tsx

@@ -24,7 +24,7 @@ module "cloud-scanner_example_single-account-ecs" {
   return (
     <div className="w-full sm:w-1/2">
       <Stepper>
-        <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation.">
+        <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation">
           <div className={`${Typography.size.sm} dark:text-gray-200`}>
             Connect to your AWS Cloud Account via Teraform. Find out more information by{' '}
             <a

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/clouds/AzureConnectorForm.tsx

@@ -24,7 +24,7 @@ export const AzureConnectorForm = () => {
 
   return (
     <Stepper>
-      <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation.">
+      <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation">
         <div className={`${Typography.size.sm} dark:text-gray-200`}>
           Connect to your Azure Cloud Account via Teraform. Find out more information by{' '}
           <a

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/clouds/GCPConnectorForm.tsx

@@ -29,7 +29,7 @@ export const GCPConnectorForm = () => {
 
   return (
     <Stepper>
-      <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation.">
+      <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation">
         <div className={`${Typography.size.sm} dark:text-gray-200`}>
           Connect to your Google Cloud Account via Teraform. Find out more information by{' '}
           <a

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/hosts/DockerConnectorForm.tsx

@@ -0,0 +1,73 @@
+import cx from 'classnames';
+import { HiViewGridAdd } from 'react-icons/hi';
+import { Button, Card, Step, Stepper, Typography } from 'ui-components';
+
+import { CopyToClipboardIcon } from '../../../../../components/CopyToClipboardIcon';
+import { usePageNavigation } from '../../../../../utils/usePageNavigation';
+
+export const DockerConnectorForm = () => {
+  const { navigate } = usePageNavigation();
+
+  const code = `docker run -dit --cpus=".2" --name=deepfence-agent --restart on-failure --pid=host --net=host \\
+  --privileged=true -v /sys/kernel/debug:/sys/kernel/debug:rw -v /var/log/fenced \\
+  -v /var/run/docker.sock:/var/run/docker.sock -v /:/fenced/mnt/host/:ro \\
+  -e USER_DEFINED_TAGS="" -e MGMT_CONSOLE_URL="${
+    window.location.host ?? '---CONSOLE-IP---'
+  }" -e MGMT_CONSOLE_PORT="443" \\
+  -e DEEPFENCE_KEY="${localStorage.getItem('dfApiKey') ?? '---DEEPFENCE-API-KEY---'}" \\
+  deepfenceio/deepfence_agent_ce:latest`;
+
+  return (
+    <Stepper>
+      <Step indicator={<HiViewGridAdd />} title="Connect Docker Container">
+        <div className={`${Typography.size.sm} dark:text-gray-200`}>
+          Connect to Docker Container. Find out more information by{' '}
+          <a
+            href={`https://docs.deepfence.io/threatstryker/docs/sensors/docker/`}
+            target="_blank"
+            rel="noreferrer"
+            className="text-blue-600 dark:text-blue-500 mt-2"
+          >
+            reading our documentation
+          </a>
+          .
+        </div>
+      </Step>
+      <Step indicator="1" title="Deploy">
+        <div className={`${Typography.size.sm} dark:text-gray-400`}>
+          <p className="mb-2.5">
+            Copy the following commands and paste them into your shell.
+          </p>
+          <Card className="w-full relative ">
+            <pre
+              className={cx(
+                'pl-4 pt-4',
+                'h-fit',
+                `${Typography.weight.normal} ${Typography.size.xs} `,
+              )}
+            >
+              {code}
+            </pre>
+            <CopyToClipboardIcon text={code} />
+          </Card>
+          <div className="flex flex-col mt-6">
+            <p className={`${Typography.size.xs}`}>
+              Note: After successfully run the commands above, your connector will appear
+              on MyConnector page, then you can perform scanning.
+            </p>
+            <Button
+              size="xs"
+              color="primary"
+              className="ml-auto"
+              onClick={() => {
+                navigate('/onboard/my-connectors');
+              }}
+            >
+              Go to connectors
+            </Button>
+          </div>
+        </div>
+      </Step>
+    </Stepper>
+  );
+};

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/hosts/LinuxConnectorForm.tsx

@@ -0,0 +1,73 @@
+import cx from 'classnames';
+import { HiViewGridAdd } from 'react-icons/hi';
+import { Button, Card, Step, Stepper, Typography } from 'ui-components';
+
+import { CopyToClipboardIcon } from '../../../../../components/CopyToClipboardIcon';
+import { usePageNavigation } from '../../../../../utils/usePageNavigation';
+
+export const LinuxConnectorForm = () => {
+  const { navigate } = usePageNavigation();
+
+  const code = `docker run -dit --cpus=".2" --name=deepfence-agent --restart on-failure --pid=host --net=host \\
+  --privileged=true -v /sys/kernel/debug:/sys/kernel/debug:rw -v /var/log/fenced \\
+  -v /var/run/docker.sock:/var/run/docker.sock -v /:/fenced/mnt/host/:ro \\
+  -e USER_DEFINED_TAGS="" -e MGMT_CONSOLE_URL="${
+    window.location.host ?? '---CONSOLE-IP---'
+  }" -e MGMT_CONSOLE_PORT="443" \\
+  -e DEEPFENCE_KEY="${localStorage.getItem('dfApiKey') ?? '---DEEPFENCE-API-KEY---'}" \\
+  deepfenceio/deepfence_agent_ce:latest`;
+
+  return (
+    <Stepper>
+      <Step indicator={<HiViewGridAdd />} title="Connect Linux VM">
+        <div className={`${Typography.size.sm} dark:text-gray-200`}>
+          Connect to Linux VM. Find out more information by{' '}
+          <a
+            href={`https://docs.deepfence.io/docs/threatmapper/sensors/linux-host/`}
+            target="_blank"
+            rel="noreferrer"
+            className="text-blue-600 dark:text-blue-500 mt-2"
+          >
+            reading our documentation
+          </a>
+          .
+        </div>
+      </Step>
+      <Step indicator="1" title="Deploy">
+        <div className={`${Typography.size.sm} dark:text-gray-400`}>
+          <p className="mb-2.5">
+            Copy the following commands and paste them into your shell.
+          </p>
+          <Card className="w-full relative ">
+            <pre
+              className={cx(
+                'pl-4 pt-4',
+                'h-fit',
+                `${Typography.weight.normal} ${Typography.size.xs} `,
+              )}
+            >
+              {code}
+            </pre>
+            <CopyToClipboardIcon text={code} />
+          </Card>
+          <div className="flex flex-col mt-6">
+            <p className={`${Typography.size.xs}`}>
+              Note: After successfully run the commands above, your connector will appear
+              on MyConnector page, then you can perform scanning.
+            </p>
+            <Button
+              size="xs"
+              color="primary"
+              className="ml-auto"
+              onClick={() => {
+                navigate('/onboard/my-connectors');
+              }}
+            >
+              Go to connectors
+            </Button>
+          </div>
+        </div>
+      </Step>
+    </Stepper>
+  );
+};

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx

@@ -15,7 +15,7 @@ import {
 export const AmazonECRConnectorForm = () => {
   return (
     <Stepper>
-      <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation.">
+      <Step indicator={<HiViewGridAdd />} title="Teraform Cloud Formation">
         <div className={`${Typography.size.sm} dark:text-gray-200`}>
           Connect to your Google Cloud Account via Teraform. Find out more information by{' '}
           <a

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

@@ -0,0 +1,23 @@
+import { Button } from 'ui-components';
+
+import { usePageNavigation } from '../../../utils/usePageNavigation';
+import { ConnectorHeader } from '../components/ConnectorHeader';
+import { DockerConnectorForm } from '../components/connectors/hosts/DockerConnectorForm';
+
+export const DockerConnector = () => {
+  const { goBack } = usePageNavigation();
+
+  return (
+    <div className="w-full">
+      <ConnectorHeader
+        title="Connect a Docker Container"
+        description="Deploy all modules for Deepfence Compliance Scanner at your docker container."
+      />
+      <DockerConnectorForm />
+
+      <Button onClick={goBack} size="xs" className="mt-16" color="default">
+        Cancel
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { Button } from 'ui-components';
+
+import { usePageNavigation } from '../../../utils/usePageNavigation';
+import { ConnectorHeader } from '../components/ConnectorHeader';
+import { LinuxConnectorForm } from '../components/connectors/hosts/LinuxConnectorForm';
+
+export const LinuxConnector = () => {
+  const { goBack } = usePageNavigation();
+
+  return (
+    <div className="w-full">
+      <ConnectorHeader
+        title="Connect a Linux VM"
+        description="Deploy all modules for Deepfence Compliance Scanner at Linux VM."
+      />
+      <LinuxConnectorForm />
+
+      <Button onClick={goBack} size="xs" className="mt-16" color="default">
+        Cancel
+      </Button>
+    </div>
+  );
+};

deepfence_frontend/apps/dashboard/src/routes/private.tsx

@@ -8,8 +8,10 @@ import { AmazonECRConnector } from '../features/onboard/pages/AmazonECRConnector
 import { AWSConnector } from '../features/onboard/pages/AWSConnector';
 import { AzureConnector } from '../features/onboard/pages/AzureConnector';
 import { Connector } from '../features/onboard/pages/Connector';
+import { DockerConnector } from '../features/onboard/pages/DockerConnector';
 import { GCPConnector } from '../features/onboard/pages/GCPConnector';
 import { K8sConnector } from '../features/onboard/pages/K8sConnector';
+import { LinuxConnector } from '../features/onboard/pages/LinuxConnector';
 
 export const privateRoutes: RouteObject[] = [
   {
@@ -41,6 +43,14 @@ export const privateRoutes: RouteObject[] = [
             path: 'host/k8s',
             element: <K8sConnector />,
           },
+          {
+            path: 'docker',
+            element: <DockerConnector />,
+          },
+          {
+            path: 'host-linux',
+            element: <LinuxConnector />,
+          },
           {
             path: 'registry/amazon-ecr',
             element: <AmazonECRConnector />,