From 47f2490059b25ffa08763091ac53b78829346c29 Mon Sep 17 00:00:00 2001 From: congs Date: Mon, 19 Sep 2022 13:44:52 +1200 Subject: [PATCH] fix(wizard) EE-2053 Add Docker Standalone option to agent install instructions (#7589) --- .../components/Stepper/Stepper.module.css | 2 +- .../EnvironmentSelector.tsx | 6 +- .../environment-types.ts | 14 ++-- .../EnvironmentsCreationView.tsx | 10 ++- .../WizardDocker/AgentTab/AgentTab.tsx | 5 +- .../AgentTab/DeploymentScripts.tsx | 68 ++++++++++++++++--- .../WizardDocker/WizardDocker.tsx | 4 +- 7 files changed, 87 insertions(+), 22 deletions(-) diff --git a/app/react/components/Stepper/Stepper.module.css b/app/react/components/Stepper/Stepper.module.css index 4dba12795..08876d03c 100644 --- a/app/react/components/Stepper/Stepper.module.css +++ b/app/react/components/Stepper/Stepper.module.css @@ -4,7 +4,7 @@ display: flex; justify-content: space-between; margin-bottom: 20px; - margin-left: 10px; + margin-left: 50px; } .step-wrapper { position: relative; diff --git a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx index 211daff11..9ffc06f40 100644 --- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx +++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx @@ -12,7 +12,11 @@ interface Props { createEdgeDevice?: boolean; } -const hasEdge: EnvironmentSelectorValue[] = ['docker', 'kubernetes']; +const hasEdge: EnvironmentSelectorValue[] = [ + 'dockerStandalone', + 'dockerSwarm', + 'kubernetes', +]; export function EnvironmentSelector({ value, diff --git a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts index abe0e2eeb..dd6f13d36 100644 --- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts +++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts @@ -4,11 +4,17 @@ import KaaSIcon from './kaas-icon.svg?c'; export const environmentTypes = [ { - id: 'docker', - title: 'Docker', + id: 'dockerStandalone', + title: 'Docker Standalone', icon: 'fab fa-docker', - description: - 'Connect to Docker Standalone / Swarm via URL/IP, API or Socket', + description: 'Connect to Docker Standalone via URL/IP, API or Socket', + featureId: undefined, + }, + { + id: 'dockerSwarm', + title: 'Docker Swarm', + icon: 'fab fa-docker', + description: 'Connect to Docker Swarm via URL/IP, API or Socket', featureId: undefined, }, { diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx index 051d94e0f..a7c55504a 100644 --- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx +++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx @@ -57,6 +57,8 @@ export function EnvironmentCreationView() { isLastStep, } = useStepper(steps, handleFinish); + const isDockerStandalone = currentStep.id === 'dockerStandalone'; + return ( <> - +
- +
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx index dae3187a0..ac817d1b6 100644 --- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx +++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx @@ -6,20 +6,40 @@ import { CopyButton } from '@@/buttons/CopyButton'; import { Code } from '@@/Code'; import { NavTabs } from '@@/NavTabs'; -const deployments = [ +const deploymentsStandalone = [ { id: 'linux', - label: 'Linux', - command: linuxCommand, + label: 'Linux & Windows WSL', + command: linuxStandaloneCommand, }, { id: 'win', - label: 'Windows', - command: winCommand, + label: 'Windows WCS', + command: winStandaloneCommand, }, ]; -export function DeploymentScripts() { +const deploymentsSwarm = [ + { + id: 'linux', + label: 'Linux & Windows WSL', + command: linuxSwarmCommand, + }, + { + id: 'win', + label: 'Windows WCS', + command: winSwarmCommand, + }, +]; + +interface Props { + isDockerStandalone?: boolean; +} + +export function DeploymentScripts({ isDockerStandalone }: Props) { + const deployments = isDockerStandalone + ? deploymentsStandalone + : deploymentsSwarm; const [deployType, setDeployType] = useState(deployments[0].id); const agentDetailsQuery = useAgentDetails(); @@ -56,9 +76,6 @@ interface DeployCodeProps { function DeployCode({ code }: DeployCodeProps) { return ( <> - - CLI script for installing agent on your environment with Docker Swarm: -
{code}
@@ -67,7 +84,21 @@ function DeployCode({ code }: DeployCodeProps) { ); } -function linuxCommand(agentVersion: string, agentSecret: string) { +function linuxStandaloneCommand(agentVersion: string, agentSecret: string) { + const secret = + agentSecret === '' ? '' : `\\\n -e AGENT_SECRET=${agentSecret} `; + + return `docker run -d \\ + -p 9001:9001 ${secret}\\ + --name portainer_agent \\ + --restart=always \\ + -v /var/run/docker.sock:/var/run/docker.sock \\ + -v /var/lib/docker/volumes:/var/lib/docker/volumes \\ + portainer/agent:${agentVersion} +`; +} + +function linuxSwarmCommand(agentVersion: string, agentSecret: string) { const secret = agentSecret === '' ? '' : `\\\n -e AGENT_SECRET=${agentSecret} `; @@ -87,7 +118,22 @@ docker service create \\ `; } -function winCommand(agentVersion: string, agentSecret: string) { +function winStandaloneCommand(agentVersion: string, agentSecret: string) { + const secret = + agentSecret === '' ? '' : `\\\n -e AGENT_SECRET=${agentSecret} `; + + return `docker run -d \\ + -p 9001:9001 ${secret}\\ + --name portainer_agent \\ + --restart=always \\ + -v C:\\:C:\\host \\ + -v C:\\ProgramData\\docker\\volumes:C:\\ProgramData\\docker\\volumes \\ + -v \\\\.\\pipe\\docker_engine:\\\\.\\pipe\\docker_engine \\ + portainer/agent:${agentVersion} +`; +} + +function winSwarmCommand(agentVersion: string, agentSecret: string) { const secret = agentSecret === '' ? '' : `\\\n -e AGENT_SECRET=${agentSecret} `; diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx index bfa74c8d7..4cb14b62e 100644 --- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx +++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx @@ -15,6 +15,7 @@ import { SocketTab } from './SocketTab'; interface Props { onCreate(environment: Environment, analytics: AnalyticsStateKey): void; + isDockerStandalone?: boolean; } const defaultOptions: BoxSelectorOption< @@ -51,7 +52,7 @@ const defaultOptions: BoxSelectorOption< }, ]; -export function WizardDocker({ onCreate }: Props) { +export function WizardDocker({ onCreate, isDockerStandalone }: Props) { const options = useFilterEdgeOptionsIfNeeded(defaultOptions, 'edgeAgent'); const [creationType, setCreationType] = useState(options[0].value); @@ -77,6 +78,7 @@ export function WizardDocker({ onCreate }: Props) { return ( onCreate(environment, 'dockerAgent')} + isDockerStandalone={isDockerStandalone} /> ); case 'api':