mirror of https://github.com/portainer/portainer
				
				
				
			
		
			
				
	
	
		
			610 lines
		
	
	
		
			32 KiB
		
	
	
	
		
			HTML
		
	
	
			
		
		
	
	
			610 lines
		
	
	
		
			32 KiB
		
	
	
	
		
			HTML
		
	
	
<rd-header>
 | 
						|
  <rd-header-title title-text="Create container"></rd-header-title>
 | 
						|
  <rd-header-content>
 | 
						|
    <a ui-sref="docker.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" autocomplete="off">
 | 
						|
          <!-- 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 -->
 | 
						|
          <div class="col-sm-12 form-section-title">
 | 
						|
            Image configuration
 | 
						|
          </div>
 | 
						|
          <div ng-if="!formValues.Registry && fromContainer">
 | 
						|
            <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i>
 | 
						|
            <span class="small text-danger" style="margin-left: 5px;">The Docker registry for the <code>{{ config.Image }}</code> image is not registered inside Portainer, you will not be able to create a container. Please register that registry first.</span>
 | 
						|
          </div>
 | 
						|
          <div ng-if="formValues.Registry || !fromContainer">
 | 
						|
            <!-- image-and-registry -->
 | 
						|
            <por-image-registry
 | 
						|
              image="config.Image"
 | 
						|
              registry="formValues.Registry"
 | 
						|
              ng-if="formValues.Registry"
 | 
						|
              auto-complete="true"
 | 
						|
              label-class="col-sm-1" input-class="col-sm-11 col-md-5"
 | 
						|
            ></por-image-registry>
 | 
						|
            <!-- !image-and-registry -->
 | 
						|
            <!-- always-pull -->
 | 
						|
            <div class="form-group">
 | 
						|
              <div class="col-sm-12">
 | 
						|
                <label for="ownership" class="control-label text-left">
 | 
						|
                  Always pull the image
 | 
						|
                  <portainer-tooltip position="bottom" message="When enabled, Portainer will automatically try to pull the specified image before creating the container."></portainer-tooltip>
 | 
						|
                </label>
 | 
						|
                <label class="switch" style="margin-left: 20px;">
 | 
						|
                  <input type="checkbox" ng-model="formValues.alwaysPull"><i></i>
 | 
						|
                </label>
 | 
						|
              </div>
 | 
						|
            </div>
 | 
						|
            <!-- !always-pull -->
 | 
						|
          </div>
 | 
						|
          <div class="col-sm-12 form-section-title">
 | 
						|
            Ports configuration
 | 
						|
          </div>
 | 
						|
          <!-- publish-exposed-ports -->
 | 
						|
          <div class="form-group">
 | 
						|
            <div class="col-sm-12">
 | 
						|
              <label class="control-label text-left">
 | 
						|
                Publish all exposed ports
 | 
						|
                <portainer-tooltip position="bottom" message="When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile."></portainer-tooltip>
 | 
						|
              </label>
 | 
						|
              <label class="switch" style="margin-left: 20px;">
 | 
						|
                <input type="checkbox" ng-model="config.HostConfig.PublishAllPorts"><i></i>
 | 
						|
              </label>
 | 
						|
            </div>
 | 
						|
          </div>
 | 
						|
          <!-- !publish-exposed-ports -->
 | 
						|
          <!-- port-mapping -->
 | 
						|
          <div class="form-group">
 | 
						|
            <div class="col-sm-12">
 | 
						|
              <label class="control-label text-left">Port mapping</label>
 | 
						|
              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPortBinding()">
 | 
						|
                <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
 | 
						|
              </span>
 | 
						|
            </div>
 | 
						|
            <!-- port-mapping-input-list -->
 | 
						|
            <div class="col-sm-12 form-inline" style="margin-top: 10px;">
 | 
						|
              <div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;">
 | 
						|
                <!-- host-port -->
 | 
						|
                <div class="input-group col-sm-4 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>
 | 
						|
                <!-- !host-port -->
 | 
						|
                <span style="margin: 0 10px 0 10px;">
 | 
						|
                  <i class="fa fa-long-arrow-alt-right" aria-hidden="true"></i>
 | 
						|
                </span>
 | 
						|
                <!-- container-port -->
 | 
						|
                <div class="input-group col-sm-4 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>
 | 
						|
                <!-- !container-port -->
 | 
						|
                <!-- protocol-actions -->
 | 
						|
                <div class="input-group col-sm-3 input-group-sm">
 | 
						|
                  <div class="btn-group btn-group-sm">
 | 
						|
                    <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
 | 
						|
                    <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
 | 
						|
                  </div>
 | 
						|
                  <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
 | 
						|
                    <i class="fa fa-trash" aria-hidden="true"></i>
 | 
						|
                  </button>
 | 
						|
                </div>
 | 
						|
                <!-- !protocol-actions -->
 | 
						|
              </div>
 | 
						|
            </div>
 | 
						|
            <!-- !port-mapping-input-list -->
 | 
						|
          </div>
 | 
						|
          <!-- !port-mapping -->
 | 
						|
          <div ng-if="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
 | 
						|
            <div class="col-sm-12 form-section-title">
 | 
						|
              Deployment
 | 
						|
            </div>
 | 
						|
            <!-- node-selection -->
 | 
						|
            <node-selector
 | 
						|
              model="formValues.NodeName">
 | 
						|
            </node-selector>
 | 
						|
            <!-- !node-selection -->
 | 
						|
          </div>
 | 
						|
          <!-- access-control -->
 | 
						|
          <por-access-control-form form-data="formValues.AccessControlData" resource-control="fromContainer.ResourceControl" ng-if="applicationState.application.authentication && fromContainer"></por-access-control-form>
 | 
						|
          <!-- !access-control -->
 | 
						|
          <!-- actions -->
 | 
						|
          <div class="col-sm-12 form-section-title">
 | 
						|
            Actions
 | 
						|
          </div>
 | 
						|
          <div class="form-group">
 | 
						|
            <div class="col-sm-12">
 | 
						|
              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !config.Image || (!formValues.Registry && fromContainer)" ng-click="create()" button-spinner="state.actionInProgress">
 | 
						|
                <span ng-hide="state.actionInProgress">Deploy the container</span>
 | 
						|
                <span ng-show="state.actionInProgress">Deployment in progress...</span>
 | 
						|
              </button>
 | 
						|
            </div>
 | 
						|
          </div>
 | 
						|
          <!-- !actions -->
 | 
						|
        </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-header icon="fa-cog" title-text="Advanced container settings"></rd-widget-header>
 | 
						|
      <rd-widget-body>
 | 
						|
        <ul class="nav nav-pills nav-justified">
 | 
						|
          <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="#env" data-toggle="tab">Env</a></li>
 | 
						|
          <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
 | 
						|
          <li class="interactive"><a data-target="#restart-policy" data-toggle="tab">Restart policy</a></li>
 | 
						|
          <li class="interactive"><a data-target="#runtime-resources" ng-click="refreshSlider()" data-toggle="tab">Runtime & Resources</a></li>
 | 
						|
          <li class="interactive"><a data-target="#container-capabilities" data-toggle="tab">Capabilities</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-2 col-lg-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-2 col-lg-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-2 col-lg-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-2 col-lg-1 control-label text-left">Console</label>
 | 
						|
                <div class="col-sm-10 col-lg-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-2 col-sm-10 col-lg-offset-1 col-lg-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 -->
 | 
						|
            </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">
 | 
						|
                <div class="col-sm-12" style="margin-top: 5px;">
 | 
						|
                  <label class="control-label text-left">Volume mapping</label>
 | 
						|
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addVolume()">
 | 
						|
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
 | 
						|
                  </span>
 | 
						|
                </div>
 | 
						|
                <!-- volumes-input-list -->
 | 
						|
                <div class="form-inline" style="margin-top: 10px;">
 | 
						|
                  <div ng-repeat="volume in formValues.Volumes">
 | 
						|
                    <!-- volume-line1 -->
 | 
						|
                    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
 | 
						|
                      <!-- container-path -->
 | 
						|
                      <div class="input-group input-group-sm col-sm-6">
 | 
						|
                        <span class="input-group-addon">container</span>
 | 
						|
                        <input type="text" class="form-control" ng-model="volume.containerPath" placeholder="e.g. /path/in/container">
 | 
						|
                      </div>
 | 
						|
                      <!-- !container-path -->
 | 
						|
                      <!-- volume-type -->
 | 
						|
                      <div class="input-group col-sm-5" style="margin-left: 5px;" ng-if="isAdmin || allowBindMounts">
 | 
						|
                        <div class="btn-group btn-group-sm">
 | 
						|
                          <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'volume'" ng-click="volume.name = ''">Volume</label>
 | 
						|
                          <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'bind'" ng-click="volume.name = ''">Bind</label>
 | 
						|
                        </div>
 | 
						|
                        <button class="btn btn-sm btn-danger" type="button" ng-click="removeVolume($index)">
 | 
						|
                          <i class="fa fa-trash" aria-hidden="true"></i>
 | 
						|
                        </button>
 | 
						|
                      </div>
 | 
						|
                      <!-- !volume-type -->
 | 
						|
                    </div>
 | 
						|
                    <!-- !volume-line1 -->
 | 
						|
                    <!-- volume-line2 -->
 | 
						|
                    <div class="col-sm-12 form-inline" style="margin-top: 5px;">
 | 
						|
                      <i class="fa fa-long-arrow-alt-right" aria-hidden="true"></i>
 | 
						|
                      <!-- volume -->
 | 
						|
                      <div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'volume'">
 | 
						|
                        <span class="input-group-addon">volume</span>
 | 
						|
                        <select class="form-control" ng-model="volume.name">
 | 
						|
                          <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>
 | 
						|
                      </div>
 | 
						|
                      <!-- !volume -->
 | 
						|
                      <!-- bind -->
 | 
						|
                      <div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'bind'">
 | 
						|
                        <span class="input-group-addon">host</span>
 | 
						|
                        <input type="text" class="form-control" ng-model="volume.name" placeholder="e.g. /path/on/host">
 | 
						|
                      </div>
 | 
						|
                      <!-- !bind -->
 | 
						|
                      <!-- read-only -->
 | 
						|
                      <div class="input-group input-group-sm col-sm-5" style="margin-left: 5px;">
 | 
						|
                        <div class="btn-group btn-group-sm">
 | 
						|
                          <label class="btn btn-primary" ng-model="volume.readOnly" uib-btn-radio="false">Writable</label>
 | 
						|
                          <label class="btn btn-primary" ng-model="volume.readOnly" uib-btn-radio="true">Read-only</label>
 | 
						|
                        </div>
 | 
						|
                      </div>
 | 
						|
                      <!-- !read-only -->
 | 
						|
                    </div>
 | 
						|
                    <!-- !volume-line2 -->
 | 
						|
                  </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="docker.networks">networks view</a> to create one.</span>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- network-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="container_network" class="col-sm-2 col-lg-1 control-label text-left">Network</label>
 | 
						|
                <div class="col-sm-9">
 | 
						|
                  <select class="form-control" ng-model="config.HostConfig.NetworkMode" id="container_network" ng-change="resetNetworkConfig()">
 | 
						|
                    <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-2 col-lg-1 control-label text-left">Container</label>
 | 
						|
                <div class="col-sm-9">
 | 
						|
                  <select 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>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !container-name-input -->
 | 
						|
              <!-- hostname-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="container_hostname" class="col-sm-2 col-lg-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-2 col-lg-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 -->
 | 
						|
              <!-- mac-address-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="container_macaddress" class="col-sm-2 col-lg-1 control-label text-left">Mac Address</label>
 | 
						|
                <div class="col-sm-9">
 | 
						|
                  <input type="text" class="form-control" ng-model="formValues.MacAddress" id="container_macaddress" placeholder="e.g. 12-34-56-78-9a-bc">
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !mac-address-input -->
 | 
						|
              <!-- ipv4-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="container_ipv4" class="col-sm-2 col-lg-1 control-label text-left">IPv4 Address</label>
 | 
						|
                <div class="col-sm-9">
 | 
						|
                  <input type="text" class="form-control" ng-model="formValues.IPv4" id="container_ipv4" placeholder="e.g. 172.20.0.7">
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !ipv4-input -->
 | 
						|
              <!-- ipv6-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="container_ipv6" class="col-sm-2 col-lg-1 control-label text-left">IPv6 Address</label>
 | 
						|
                <div class="col-sm-9">
 | 
						|
                  <input type="text" class="form-control" ng-model="formValues.IPv6" id="container_ipv6" placeholder="e.g. a:b:c:d::1234">
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !ipv6-input -->
 | 
						|
              <!-- extra-hosts-variables -->
 | 
						|
              <div class="form-group">
 | 
						|
                <div class="col-sm-12" style="margin-top: 5px;">
 | 
						|
                  <label class="control-label text-left">Hosts file entries</label>
 | 
						|
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addExtraHost()">
 | 
						|
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
 | 
						|
                  </span>
 | 
						|
                </div>
 | 
						|
                <!-- extra-hosts-input-list -->
 | 
						|
                <div class="col-sm-12 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">
 | 
						|
                    </div>
 | 
						|
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeExtraHost($index)">
 | 
						|
                      <i class="fa fa-trash" aria-hidden="true"></i>
 | 
						|
                    </button>
 | 
						|
                  </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">
 | 
						|
                <div class="col-sm-12" style="margin-top: 5px;">
 | 
						|
                  <label class="control-label text-left">Labels</label>
 | 
						|
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
 | 
						|
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
 | 
						|
                  </span>
 | 
						|
                </div>
 | 
						|
                <!-- labels-input-list -->
 | 
						|
                <div class="col-sm-12 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">
 | 
						|
                    </div>
 | 
						|
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
 | 
						|
                      <i class="fa fa-trash" aria-hidden="true"></i>
 | 
						|
                    </button>
 | 
						|
                  </div>
 | 
						|
                </div>
 | 
						|
                <!-- !labels-input-list -->
 | 
						|
              </div>
 | 
						|
              <!-- !labels-->
 | 
						|
            </form>
 | 
						|
          </div>
 | 
						|
          <!-- !tab-labels -->
 | 
						|
          <!-- tab-env -->
 | 
						|
          <div class="tab-pane" id="env">
 | 
						|
            <form class="form-horizontal" style="margin-top: 15px;">
 | 
						|
              <!-- environment-variables -->
 | 
						|
              <div class="form-group">
 | 
						|
                <div class="col-sm-12" style="margin-top: 5px;">
 | 
						|
                  <label class="control-label text-left">Environment variables</label>
 | 
						|
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addEnvironmentVariable()">
 | 
						|
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add environment variable
 | 
						|
                  </span>
 | 
						|
                </div>
 | 
						|
                <!-- environment-variable-input-list -->
 | 
						|
                <div class="col-sm-12 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">
 | 
						|
                    </div>
 | 
						|
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable($index)">
 | 
						|
                      <i class="fa fa-trash" aria-hidden="true"></i>
 | 
						|
                    </button>
 | 
						|
                  </div>
 | 
						|
                </div>
 | 
						|
                <!-- !environment-variable-input-list -->
 | 
						|
              </div>
 | 
						|
              <!-- !environment-variables -->
 | 
						|
            </form>
 | 
						|
          </div>
 | 
						|
          <!-- !tab-labels -->
 | 
						|
          <!-- tab-restart-policy -->
 | 
						|
          <div class="tab-pane" id="restart-policy">
 | 
						|
            <form class="form-horizontal" style="margin-top: 15px;">
 | 
						|
              <div class="form-group">
 | 
						|
                <div class="col-sm-12">
 | 
						|
                  <label class="control-label text-left">
 | 
						|
                    Restart policy
 | 
						|
                  </label>
 | 
						|
                  <div class="btn-group btn-group-sm" style="margin-left: 20px;">
 | 
						|
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'no'">
 | 
						|
                      Never
 | 
						|
                    </label>
 | 
						|
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'always'">
 | 
						|
                      Always
 | 
						|
                    </label>
 | 
						|
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'on-failure'">
 | 
						|
                      On failure
 | 
						|
                    </label>
 | 
						|
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'unless-stopped'">
 | 
						|
                      Unless stopped
 | 
						|
                    </label>
 | 
						|
                  </div>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
            </form>
 | 
						|
          </div>
 | 
						|
          <!-- !tab-restart-policy -->
 | 
						|
          <!-- tab-runtime-resources -->
 | 
						|
          <div class="tab-pane" id="runtime-resources">
 | 
						|
            <form class="form-horizontal" style="margin-top: 15px;">
 | 
						|
              <div class="col-sm-12 form-section-title">
 | 
						|
                Runtime
 | 
						|
              </div>
 | 
						|
              <!-- privileged-mode -->
 | 
						|
              <div class="form-group" ng-if="isAdmin || allowPrivilegedMode">
 | 
						|
                <div class="col-sm-12">
 | 
						|
                  <label for="privileged_mode" class="control-label text-left">
 | 
						|
                    Privileged mode
 | 
						|
                  </label>
 | 
						|
                  <label class="switch" style="margin-left: 20px;">
 | 
						|
                    <input type="checkbox" name="privileged_mode" ng-model="config.HostConfig.Privileged"><i></i>
 | 
						|
                  </label>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !privileged-mode -->
 | 
						|
              <!-- runtimes -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="container_runtime" class="col-sm-2 col-lg-1 control-label text-left">Runtime</label>
 | 
						|
                <div class="col-sm-1">
 | 
						|
                  <select class="form-control" ng-model="config.HostConfig.Runtime" id="container_runtime">
 | 
						|
                    <option selected disabled hidden value="">Select a runtime</option>
 | 
						|
                    <option ng-repeat="(runtime, _) in availableRuntimes" ng-value="runtime">{{ runtime }}</option>
 | 
						|
                  </select>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !runtimes -->
 | 
						|
            </form>
 | 
						|
            <form class="form-horizontal" style="margin-top: 15px;">
 | 
						|
              <!-- devices -->
 | 
						|
              <div class="form-group">
 | 
						|
                <div class="col-sm-12" style="margin-top: 5px;">
 | 
						|
                  <label class="control-label text-left">Devices</label>
 | 
						|
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addDevice()">
 | 
						|
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add device
 | 
						|
                  </span>
 | 
						|
                </div>
 | 
						|
               <!-- devices-input-list -->
 | 
						|
                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
 | 
						|
                  <div ng-repeat="device in config.HostConfig.Devices" 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="device.pathOnHost" placeholder="e.g. /dev/tty0">
 | 
						|
                    </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="device.pathInContainer" placeholder="e.g. /dev/tty0">
 | 
						|
                    </div>
 | 
						|
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeDevice($index)">
 | 
						|
                      <i class="fa fa-trash" aria-hidden="true"></i>
 | 
						|
                    </button>
 | 
						|
                  </div>
 | 
						|
                </div>
 | 
						|
                <!-- !devices-input-list -->
 | 
						|
              </div>
 | 
						|
              <!-- !devices-->
 | 
						|
              <div class="col-sm-12 form-section-title">
 | 
						|
                Resources
 | 
						|
              </div>
 | 
						|
              <!-- memory-reservation-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
 | 
						|
                  Memory reservation
 | 
						|
                </label>
 | 
						|
                <div class="col-sm-3">
 | 
						|
                  <slider model="formValues.MemoryReservation" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
 | 
						|
                </div>
 | 
						|
                <div class="col-sm-2">
 | 
						|
                  <input type="number" min="0" class="form-control" ng-model="formValues.MemoryReservation" id="memory-reservation">
 | 
						|
                </div>
 | 
						|
                <div class="col-sm-4">
 | 
						|
                  <p class="small text-muted" style="margin-top: 7px;">
 | 
						|
                    Memory soft limit (<b>MB</b>)
 | 
						|
                  </p>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !memory-reservation-input -->
 | 
						|
              <!-- memory-limit-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
 | 
						|
                  Memory limit
 | 
						|
                </label>
 | 
						|
                <div class="col-sm-3">
 | 
						|
                  <slider model="formValues.MemoryLimit" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
 | 
						|
                </div>
 | 
						|
                <div class="col-sm-2">
 | 
						|
                  <input type="number" min="0" class="form-control" ng-model="formValues.MemoryLimit" id="memory-limit">
 | 
						|
                </div>
 | 
						|
                <div class="col-sm-4">
 | 
						|
                  <p class="small text-muted" style="margin-top: 7px;">
 | 
						|
                    Memory limit (<b>MB</b>)
 | 
						|
                  </p>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !memory-limit-input -->
 | 
						|
              <!-- cpu-limit-input -->
 | 
						|
              <div class="form-group">
 | 
						|
                <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
 | 
						|
                  CPU limit
 | 
						|
                </label>
 | 
						|
                <div class="col-sm-5">
 | 
						|
                  <slider model="formValues.CpuLimit" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="state.sliderMaxCpu"></slider>
 | 
						|
                </div>
 | 
						|
                <div class="col-sm-4" style="margin-top: 20px;">
 | 
						|
                  <p class="small text-muted">
 | 
						|
                    Maximum CPU usage
 | 
						|
                  </p>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
              <!-- !cpu-limit-input -->
 | 
						|
            </form>
 | 
						|
          </div>
 | 
						|
          <!-- !tab-runtime-resources -->
 | 
						|
          <!-- tab-container-capabilities -->
 | 
						|
          <div class="tab-pane" id="container-capabilities">
 | 
						|
            <container-capabilities capabilities="formValues.capabilities" ></container-capabilities>
 | 
						|
          </div>
 | 
						|
          <!-- !tab-container-capabilities -->
 | 
						|
        </div>
 | 
						|
      </rd-widget-body>
 | 
						|
    </rd-widget>
 | 
						|
  </div>
 | 
						|
</div>
 |