mirror of https://github.com/portainer/portainer
407 lines
21 KiB
HTML
407 lines
21 KiB
HTML
<rd-header>
|
|
<rd-header-title title="Create container"></rd-header-title>
|
|
<rd-header-content>
|
|
<a ui-sref="containers">Containers</a> > Add container
|
|
</rd-header-content>
|
|
</rd-header>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-xs-12">
|
|
<rd-widget>
|
|
<rd-widget-body>
|
|
<form class="form-horizontal">
|
|
<!-- name-input -->
|
|
<div class="form-group">
|
|
<label for="container_name" class="col-sm-1 control-label text-left">Name</label>
|
|
<div class="col-sm-11">
|
|
<input type="text" class="form-control" ng-model="config.name" id="container_name" placeholder="e.g. myContainer">
|
|
</div>
|
|
</div>
|
|
<!-- !name-input -->
|
|
<!-- image-and-registry-inputs -->
|
|
<div class="form-group">
|
|
<label for="container_image" class="col-sm-1 control-label text-left">Image</label>
|
|
<div class="col-sm-7">
|
|
<input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="e.g. ubuntu:trusty">
|
|
</div>
|
|
<label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
|
|
<div class="col-sm-3">
|
|
<input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
|
|
</div>
|
|
<div class="col-sm-offset-1 col-sm-11">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="formValues.alwaysPull"> Always pull image before creating
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !image-and-registry-inputs -->
|
|
<!-- restart-policy -->
|
|
<div class="form-group">
|
|
<label class="col-sm-1 control-label text-left">Restart policy</label>
|
|
<div class="col-sm-11">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="no">
|
|
Never
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="always">
|
|
Always
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="on-failure">
|
|
<span class="radio-value">On failure</span>
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="unless-stopped">
|
|
<span class="radio-value">Unless stopped</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- !restart-policy -->
|
|
<!-- port-mapping -->
|
|
<div class="form-group">
|
|
<label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
|
|
<div class="col-sm-11">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="config.HostConfig.PublishAllPorts"> Publish all exposed ports
|
|
</label>
|
|
</div>
|
|
<span class="label label-default interactive" ng-click="addPortBinding()">
|
|
<i class="fa fa-plus-circle" aria-hidden="true"></i> map port
|
|
</span>
|
|
</div>
|
|
<!-- port-mapping-input-list -->
|
|
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
|
|
<div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;">
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">host</span>
|
|
<input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
|
|
</div>
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">container</span>
|
|
<input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80">
|
|
</div>
|
|
<div class="input-group col-sm-1 input-group-sm">
|
|
<select class="form-control" ng-model="portBinding.protocol">
|
|
<option value="tcp">tcp</option>
|
|
<option value="udp">udp</option>
|
|
</select>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" ng-click="removePortBinding($index)">
|
|
<i class="fa fa-minus" aria-hidden="true"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !port-mapping-input-list -->
|
|
</div>
|
|
<!-- !port-mapping -->
|
|
</form>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-xs-12">
|
|
<rd-widget>
|
|
<rd-widget-body>
|
|
<ul class="nav nav-tabs">
|
|
<li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
|
|
<li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
|
|
<li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
|
|
<li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
|
|
<li class="interactive"><a data-target="#security" data-toggle="tab">Security/Host</a></li>
|
|
</ul>
|
|
<!-- tab-content -->
|
|
<div class="tab-content">
|
|
<!-- tab-command -->
|
|
<div class="tab-pane active" id="command">
|
|
<form class="form-horizontal" style="margin-top: 15px;">
|
|
<!-- command-input -->
|
|
<div class="form-group">
|
|
<label for="container_command" class="col-sm-1 control-label text-left">Command</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" ng-model="config.Cmd" id="container_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
|
|
</div>
|
|
</div>
|
|
<!-- !command-input -->
|
|
<!-- entrypoint-input -->
|
|
<div class="form-group">
|
|
<label for="container_entrypoint" class="col-sm-1 control-label text-left">Entry Point</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" ng-model="config.Entrypoint" id="container_entrypoint" placeholder="e.g. /bin/sh -c">
|
|
</div>
|
|
</div>
|
|
<!-- !entrypoint-input -->
|
|
<!-- workdir-user-input -->
|
|
<div class="form-group">
|
|
<label for="container_workingdir" class="col-sm-1 control-label text-left">Working Dir</label>
|
|
<div class="col-sm-4">
|
|
<input type="text" class="form-control" ng-model="config.WorkingDir" id="container_workingdir" placeholder="e.g. /myapp">
|
|
</div>
|
|
<label for="container_user" class="col-sm-1 control-label text-left">User</label>
|
|
<div class="col-sm-4">
|
|
<input type="text" class="form-control" ng-model="config.User" id="container_user" placeholder="e.g. nginx">
|
|
</div>
|
|
</div>
|
|
<!-- !workdir-user-input -->
|
|
<!-- console -->
|
|
<div class="form-group">
|
|
<label for="container_console" class="col-sm-1 control-label text-left">Console</label>
|
|
<div class="col-sm-11">
|
|
<div class="col-sm-4">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_console" ng-model="formValues.Console" value="both">
|
|
Interactive & TTY <span class="small text-muted">(-i -t)</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_console" ng-model="formValues.Console" value="interactive">
|
|
Interactive <span class="small text-muted">(-i)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-offset-1 col-sm-11">
|
|
<div class="col-sm-4">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_console" ng-model="formValues.Console" value="tty">
|
|
TTY <span class="small text-muted">(-t)</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="container_console" ng-model="formValues.Console" value="none">
|
|
None
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !console -->
|
|
<!-- environment-variables -->
|
|
<div class="form-group">
|
|
<label for="container_env" class="col-sm-1 control-label text-left">Environment variables</label>
|
|
<div class="col-sm-11">
|
|
<span class="label label-default interactive" ng-click="addEnvironmentVariable()">
|
|
<i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
|
|
</span>
|
|
</div>
|
|
<!-- environment-variable-input-list -->
|
|
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
|
|
<div ng-repeat="variable in config.Env" style="margin-top: 2px;">
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">name</span>
|
|
<input type="text" class="form-control" ng-model="variable.name" placeholder="e.g. FOO">
|
|
</div>
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">value</span>
|
|
<input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. bar">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" ng-click="removeEnvironmentVariable($index)">
|
|
<i class="fa fa-minus" aria-hidden="true"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !environment-variable-input-list -->
|
|
</div>
|
|
<!-- !environment-variables -->
|
|
</form>
|
|
</div>
|
|
<!-- !tab-command -->
|
|
<!-- tab-volume -->
|
|
<div class="tab-pane" id="volumes">
|
|
<form class="form-horizontal" style="margin-top: 15px;">
|
|
<!-- volumes -->
|
|
<div class="form-group">
|
|
<label for="container_volumes" class="col-sm-1 control-label text-left">Volumes</label>
|
|
<div class="col-sm-11">
|
|
<span class="label label-default interactive" ng-click="addVolume()">
|
|
<i class="fa fa-plus-circle" aria-hidden="true"></i> volume
|
|
</span>
|
|
</div>
|
|
<!-- volumes-input-list -->
|
|
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
|
|
<div ng-repeat="volume in formValues.Volumes" style="margin-top: 2px;">
|
|
<div class="input-group col-sm-1 input-group-sm">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="volume.readOnly"> Read-only
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon"><input type="checkbox" ng-model="volume.isPath" ng-click="resetVolumePath($index)">Path</span>
|
|
<select class="form-control" ng-model="volume.name" ng-if="!volume.isPath">
|
|
<option selected disabled hidden value="">Select a volume</option>
|
|
<option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
|
|
</select>
|
|
<input ng-if="volume.isPath" type="text" class="form-control" ng-model="volume.name" placeholder="e.g. /path/on/host">
|
|
</div>
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">container</span>
|
|
<input type="text" class="form-control" ng-model="volume.containerPath" placeholder="e.g. /path/in/container">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" ng-click="removeVolume($index)">
|
|
<i class="fa fa-minus" aria-hidden="true"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !volumes-input-list -->
|
|
</div>
|
|
</form>
|
|
<!-- !volumes -->
|
|
</div>
|
|
<!-- !tab-volume -->
|
|
<!-- tab-network -->
|
|
<div class="tab-pane" id="network">
|
|
<form class="form-horizontal" style="margin-top: 15px;">
|
|
<div class="form-group" ng-if="globalNetworkCount === 0 && applicationState.endpoint.mode.provider !== 'DOCKER_SWARM_MODE'">
|
|
<div class="col-sm-12">
|
|
<span class="small text-muted">You don't have any shared network. Head over the <a ui-sref="networks">networks view</a> to create one.</span>
|
|
</div>
|
|
</div>
|
|
<!-- network-input -->
|
|
<div class="form-group">
|
|
<label for="container_network" class="col-sm-1 control-label text-left">Network</label>
|
|
<div class="col-sm-9">
|
|
<select class="form-control" ng-model="config.HostConfig.NetworkMode" id="container_network">
|
|
<option selected disabled hidden value="">Select a network</option>
|
|
<option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- !network-input -->
|
|
<!-- container-name-input -->
|
|
<div class="form-group" ng-if="config.HostConfig.NetworkMode == 'container'">
|
|
<label for="container_network_container" class="col-sm-1 control-label text-left">Container</label>
|
|
<div class="col-sm-9">
|
|
<select ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'" ng-options="container|containername for container in runningContainers" class="form-control" ng-model="formValues.NetworkContainer">
|
|
<option selected disabled hidden value="">Select a container</option>
|
|
</select>
|
|
<select ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'" ng-options="container|swarmcontainername for container in runningContainers" class="form-control" ng-model="formValues.NetworkContainer">
|
|
<option selected disabled hidden value="">Select a container</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- !container-name-input -->
|
|
<!-- hostname-input -->
|
|
<div class="form-group">
|
|
<label for="container_hostname" class="col-sm-1 control-label text-left">Hostname</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" ng-model="config.Hostname" id="container_hostname" placeholder="e.g. web01">
|
|
</div>
|
|
</div>
|
|
<!-- !hostname-input -->
|
|
<!-- domainname-input -->
|
|
<div class="form-group">
|
|
<label for="container_domainname" class="col-sm-1 control-label text-left">Domain Name</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" ng-model="config.Domainname" id="container_domainname" placeholder="e.g. example.com">
|
|
</div>
|
|
</div>
|
|
<!-- !domainname -->
|
|
<!-- extra-hosts-variables -->
|
|
<div class="form-group">
|
|
<label for="container_extrahosts" class="col-sm-1 control-label text-left">Extra Hosts</label>
|
|
<div class="col-sm-11">
|
|
<span class="label label-default interactive" ng-click="addExtraHost()">
|
|
<i class="fa fa-plus-circle" aria-hidden="true"></i> extra host
|
|
</span>
|
|
</div>
|
|
<!-- extra-hosts-input-list -->
|
|
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
|
|
<div ng-repeat="variable in formValues.ExtraHosts" style="margin-top: 2px;">
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">value</span>
|
|
<input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" ng-click="removeExtraHost($index)">
|
|
<i class="fa fa-minus" aria-hidden="true"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !extra-hosts-input-list -->
|
|
</div>
|
|
<!-- !extra-hosts-variables -->
|
|
</form>
|
|
</div>
|
|
<!-- !tab-network -->
|
|
<!-- tab-labels -->
|
|
<div class="tab-pane" id="labels">
|
|
<form class="form-horizontal" style="margin-top: 15px;">
|
|
<!-- labels -->
|
|
<div class="form-group">
|
|
<label for="container_labels" class="col-sm-1 control-label text-left">Labels</label>
|
|
<div class="col-sm-11">
|
|
<span class="label label-default interactive" ng-click="addLabel()">
|
|
<i class="fa fa-plus-circle" aria-hidden="true"></i> label
|
|
</span>
|
|
</div>
|
|
<!-- labels-input-list -->
|
|
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
|
|
<div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">name</span>
|
|
<input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
|
|
</div>
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">value</span>
|
|
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" ng-click="removeLabel($index)">
|
|
<i class="fa fa-minus" aria-hidden="true"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !labels-input-list -->
|
|
</div>
|
|
<!-- !labels-->
|
|
</form>
|
|
</div>
|
|
<!-- !tab-labels -->
|
|
<!-- tab-security -->
|
|
<div class="tab-pane" id="security">
|
|
<form class="form-horizontal" style="margin-top: 15px;">
|
|
<!-- privileged-mode -->
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="config.HostConfig.Privileged"> Privileged mode
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !privileged-mode -->
|
|
</form>
|
|
</div>
|
|
<!-- !tab-security -->
|
|
</div>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
|
|
<div>
|
|
<i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
|
|
</div>
|
|
<button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
|
|
<a type="button" class="btn btn-default btn-lg" ui-sref="containers">Cancel</a>
|
|
</div>
|
|
</div>
|