github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/app/containers/deploy.html (about) 1 <div class="ui active inverted dimmer" ng-show="vm.deploying"> 2 <div class="ui text loader">Launching Container</div> 3 </div> 4 <div class="ui padded grid"> 5 <div class="row" ng-hide="vm.deploying"> 6 <div class="column"> 7 <div class="ui bottom attached active tab segment"> 8 <div class="ui error message" ng-show="vm.error"> 9 <div class="header">Error...</div> 10 <p>{{vm.error}}</p> 11 </div> 12 <div class="ui form" ng-submit="vm.deploy()"> 13 <h3 class="ui header">Container Deployment</h3> 14 <div class="ui two column grid"> 15 <div class="column"> 16 <div class="ui horizontal segment"> 17 <h5 class="ui dividing header">Image Configuration</h5> 18 <div class="two fields"> 19 <div class="field"> 20 <label>Image Name 21 <i class="blue help circle icon"></i> 22 <div class="ui popup" style="max-width: 450px;"> 23 <h5>Image Name</h5> 24 <p>The full namespaced name of the image that you wish to use to deploy your container.</p> 25 <p>Docker image names follow the convention: <i>registry.myorganization.org:5000/namespace/image-name</i></p> 26 <p>Where:</p> 27 <ul> 28 <li><i>registry.myorganization.org:5000</i> is the location of the <b>registry</b> that contains the image you wish to deploy</li> 29 <li><i>namespace</i> is an optional <b>namespace</b> to help organize and avoid image name collisions</li> 30 <li><i>image-name</i> is the <b>image name</b> that identifies the image that you wish to deploy</li> 31 </ul> 32 <p>When the registry is omitted, Docker will make the assumption that you wish to deploy an image from the <a href="https://registry.hub.docker.com/" target="_blank">Official Docker Hub</a>. If both the registry and the namespace are omitted, then Docker will assume that you wish to deploy an image from the selection of official Docker images in the Docker Library</p> 33 </div> 34 </label> 35 <div class="ui corner labeled input"> 36 <input name="image" class="input" type="text" ng-click="vm.getImages()" ng-model="vm.request.Image" placeholder="Image"></input> 37 <div class="ui corner label"> 38 <i class="asterisk icon"></i> 39 </div> 40 </div> 41 <div class="menu" ng-show="vm.imagesShow == 1"> 42 <div class="item ui label green" style="margin:2px;cursor:pointer;" ng-repeat="i in vm.images" ng-click="vm.selectImage(i.RepoTags[0])">{{ i.RepoTags[0] }}</div> 43 </div> 44 </div> 45 46 <div class="field"> 47 <label>Command</label> 48 <input name="command" class="input" type="text" ng-model="vm.cmd" placeholder="Command"></input> 49 </div> 50 </div> 51 <div class="fields"> 52 <div class="eight wide field"> 53 <label>Hostname</label> 54 <input name="hostname" class="input" type="text" ng-model="vm.request.Hostname" placeholder="Hostname"></input> 55 </div> 56 <div class="eight wide field"> 57 <label>Domain</label> 58 <input name="domainname" class="input" type="text" ng-model="vm.request.Domainname" placeholder="Domain"></input> 59 </div> 60 </div> 61 <h5 class="ui dividing header">Environment Variables</h5> 62 <div class="fields"> 63 <div class="seven wide field"> 64 <label>Name</label> 65 <input name="variableName" class="input" type="text" ng-model="vm.variableName" placeholder="Environment Variable Name"></input> 66 </div> 67 <div class="eight wide field"> 68 <label>Value</label> 69 <input name="variableValue" class="input" type="text" ng-model="vm.variableValue" placeholder="Environment Variable Value"></input> 70 </div> 71 <div class="one wide field"> 72 <label> </label> 73 <div class="ui green icon button" ng-click="vm.pushEnvVar()"> 74 <i class="add icon"></i> 75 </div> 76 </div> 77 </div> 78 <div class="fields" ng-repeat="v in vm.envVars"> 79 <div class="seven wide field"> 80 <input class="input" type="text" ng-model="v.name"></input> 81 </div> 82 <div class="eight wide field"> 83 <input class="input" type="text" ng-model="v.value"></input> 84 </div> 85 <div class="one wide field"> 86 <div ng-click="vm.removeEnvVar(v)" class="ui red icon button"> 87 <i class="delete icon"></i> 88 </div> 89 </div> 90 </div> 91 <h5 class="ui dividing header">Volumes</h5> 92 <div class="fields"> 93 <div class="seven wide field"> 94 <label>Host Path</label> 95 <input name="hostPath" class="input" type="text" ng-model="vm.hostPath" placeholder="Host Path"></input> 96 </div> 97 <div class="eight wide field"> 98 <label>Container Path</label> 99 <input name="containerPath" class="input" type="text" ng-model="vm.containerPath" placeholder="Container Path"></input> 100 </div> 101 <div class="one wide field"> 102 <label> </label> 103 <div class="ui green icon button" ng-click="vm.pushVolume()"> 104 <i class="add icon"></i> 105 </div> 106 </div> 107 </div> 108 <div class="fields" ng-repeat="v in vm.volumes"> 109 <div class="seven wide field"> 110 <input class="input" type="text" ng-model="v.HostPath"></input> 111 </div> 112 <div class="eight wide field"> 113 <input class="input" type="text" ng-model="v.ContainerPath"></input> 114 </div> 115 <div class="one wide field"> 116 <div class="ui red icon button" ng-click="vm.deleteVolume(v)"> 117 <i class="delete icon"></i> 118 </div> 119 </div> 120 </div> 121 <h5 class="ui dividing header">Container Links</h5> 122 <div class="fields"> 123 <div class="seven wide field"> 124 <label>Container</label> 125 <select name="containerToLink" ng-model="vm.containerToLink" class="ui search fluid dropdown"> 126 <option value="">Container Name</option> 127 <option ng-repeat="c in vm.containerLinkNames" value="{{c}}">{{c}}</option> 128 </select> 129 </div> 130 <div class="eight wide field"> 131 <label>Alias</label> 132 <input name="containerToLinkAlias" class="input" type="text" ng-model="vm.containerToLinkAlias" placeholder="Link Alias"></input> 133 </div> 134 <div class="one wide field"> 135 <label> </label> 136 <div class="ui green icon button" ng-click="vm.pushLink()"> 137 <i class="add icon"></i> 138 </div> 139 </div> 140 </div> 141 <div class="fields" ng-repeat="l in vm.links"> 142 <div class="seven wide field"> 143 <input class="input" type="text" ng-model="l.ContainerToLink"></input> 144 </div> 145 <div class="eight wide field"> 146 <input class="input" type="text" ng-model="l.ContainerToLinkAlias"></input> 147 </div> 148 <div class="one wide field"> 149 <div class="ui red icon button" ng-click="vm.removeLink(l)"> 150 <i class="delete icon"></i> 151 </div> 152 </div> 153 </div> 154 <h5 class="ui dividing header">Container DNS</h5> 155 <div class="fields"> 156 <div class="eleven wide field"> 157 <input name="containerDns" class="input" type="text" ng-model="vm.containerDns" placeholder="Container DNS"></input> 158 </div> 159 <div class="one wide field"> 160 <div class="ui green icon button" ng-click="vm.pushDns()"> 161 <i class="add icon"></i> 162 </div> 163 </div> 164 </div> 165 <div class="fields" ng-repeat="d in vm.Dns track by $index"> 166 <div class="eleven wide field"> 167 <input class="input" type="text" ng-model="d" placeholder="Container DNS"></input> 168 </div> 169 <div class="one wide field"> 170 <div class="ui red icon button" ng-click="vm.removeDns(d)"> 171 <i class="remove icon"></i> 172 </div> 173 </div> 174 </div> 175 </div> 176 </div> 177 <div class="column"> 178 <div class="ui horizontal segment"> 179 <h5 class="ui dividing header">Container Name</h5> 180 <div class="field"> 181 <input name="containerName" class="input" type="text" ng-model="vm.containerName" placeholder="Container Name"></input> 182 </div> 183 <h5 class="ui dividing header">Resource Limits</h5> 184 <div class="two fields"> 185 <div class="field"> 186 <label>CPUs</label> 187 <input name="cpus" class="input" type="text" ng-model="vm.cpuShares" placeholder="1024"></input> 188 </div> 189 <div class="field"> 190 <label>Memory (MB)</label> 191 <input name="memory" class="input" type="text" ng-model="vm.memory" placeholder="∞"></input> 192 </div> 193 </div> 194 <h5 class="ui dividing header">Swarm Constraint</h5> 195 <div class="fields"> 196 <div class="five wide field"> 197 <label>Constraint</label> 198 <input name="constraint" class="input" type="text" ng-model="vm.constraintName" placeholder="storage"></input> 199 </div> 200 <div class="four wide field"> 201 <label>Rule</label> 202 <dropdown class="fluid" ng-model="vm.constraintRule"> 203 <dropdown-group>==</dropdown-group> 204 <dropdown-group>!=</dropdown-group> 205 </dropdown> 206 </div> 207 <div class="five wide field"> 208 <label>Value</label> 209 <input name="constraintValue" class="input" type="text" ng-model="vm.constraintValue" placeholder="ssd"></input> 210 </div> 211 <div class="one wide field"> 212 <label> </label> 213 <div class="ui green icon button" ng-click="vm.pushConstraint()"> 214 <i class="add icon"></i> 215 </div> 216 </div> 217 </div> 218 <div class="fields" ng-repeat="c in vm.constraints"> 219 <div class="five wide field"> 220 <input name="constraint" class="input" type="text" ng-model="c.ConstraintName" placeholder="storage"></input> 221 </div> 222 <div class="four wide field"> 223 <dropdown class="fluid" ng-model="c.ConstraintRule"> 224 <dropdown-group>==</dropdown-group> 225 <dropdown-group>!=</dropdown-group> 226 </dropdown> 227 </div> 228 <div class="five wide field"> 229 <input name="constraintValue" class="input" type="text" ng-model="c.ConstraintValue" placeholder="ssd"></input> 230 </div> 231 <div class="one wide field"> 232 <div class="ui red icon button" ng-click="vm.removeConstraint(c)"> 233 <i class="delete icon"></i> 234 </div> 235 </div> 236 </div> 237 <h5 class="ui dividing header">Restart Policy</h5> 238 <div class="two fields"> 239 <div class="field"> 240 <select class="ui fluid dropdown restart-policy" default="0" ng-model="vm.request.HostConfig.RestartPolicy.Name"> 241 <option value="no">Do not automatically restart</option> 242 <option value="on-failure">Restart only on failure</option> 243 <option value="always">Always restart</option> 244 </select> 245 </div> 246 <div class="field" ng-show="vm.request.HostConfig.RestartPolicy.Name == 'on-failure'"> 247 <input type="number" ng-model="vm.request.HostConfig.RestartPolicy.MaximumRetryCount" placeholder="Maximum restart count"> 248 </div> 249 </div> 250 <h5 class="ui dividing header">Network Mode</h5> 251 <div class="field"> 252 <select class="ui fluid dropdown" default="0" ng-model="vm.request.HostConfig.NetworkMode"> 253 <option value="bridge">Bridge</option> 254 <option value="host">Host</option> 255 <option value="none">None</option> 256 </select> 257 </div> 258 <h5 class="ui dividing header">Port Configuration</h5> 259 <div class="field"> 260 <div class="ui toggle checkbox"> 261 <input type="checkbox" id="exposeAllPorts" ng-model="vm.request.HostConfig.PublishAllPorts"> 262 <label for="exposeAllPorts">Automatically expose all ports 263 <i class="blue help circle icon"></i> 264 <div class="ui popup" style="width: 400px;"> 265 <h5>Expose all ports</h5> 266 <p>If the operator chooses to automatically expose all configured ports for the image, then Docker will make the exposed port accessible on the <b>host</b> and the ports will be <b>available to any client that can reach the host</b>. When using this option, Docker will bind the exposed ports to a random port on the host between 49153 and 65535.</p> 267 </div> 268 </label> 269 <br/> 270 </div> 271 </div> 272 <div class="fields"> 273 <div class="three wide field"> 274 <label>Container Port</label> 275 <input name="containerPort" class="input" type="text" ng-model="vm.containerPort" placeholder="Container Port"></input> 276 </div> 277 <div class="three wide field"> 278 <label>Protocol</label> 279 <dropdown class="fluid" ng-model="vm.protocol"> 280 <dropdown-group>TCP</dropdown-group> 281 <dropdown-group>UDP</dropdown-group> 282 </dropdown> 283 </div> 284 <div class="five wide field"> 285 <label>Host Listen Address</label> 286 <input name="hostPort" class="input" type="text" ng-model="vm.hostIp" placeholder="0.0.0.0"></input> 287 </div> 288 <div class="three wide field"> 289 <label>Host Port</label> 290 <input name="hostPort" class="input" type="text" ng-model="vm.hostPort" placeholder="Host Port"></input> 291 </div> 292 <div class="one wide field"> 293 <label> </label> 294 <div class="ui green icon button" ng-click="vm.pushPort()"> 295 <i class="add icon"></i> 296 </div> 297 </div> 298 </div> 299 <div class="fields" ng-repeat="p in vm.ports"> 300 <div class="three wide field"> 301 <input name="containerPort" class="input" type="text" ng-model="p.ContainerPort" placeholder="Container Port"></input> 302 </div> 303 <div class="three wide field"> 304 <dropdown class="fluid" ng-model="p.Protocol"> 305 <dropdown-group>TCP</dropdown-group> 306 <dropdown-group>UDP</dropdown-group> 307 </dropdown> 308 </div> 309 <div class="five wide field"> 310 <input name="hostIp" class="input" type="text" ng-model="p.HostIp" placeholder="0.0.0.0"></input> 311 </div> 312 <div class="three wide field"> 313 <input name="hostPort" class="input" type="text" ng-model="p.HostPort" placeholder="Host Port"></input> 314 </div> 315 <div class="one wide field"> 316 <div class="ui red icon button" ng-click="vm.removePort(p)"> 317 <i class="delete icon"></i> 318 </div> 319 </div> 320 </div> 321 <h5 class="ui dividing header">Advanced</h5> 322 <div class="field"> 323 <div class="ui toggle checkbox" ng-model="vm.request.HostConfig.Privileged"> 324 <input type="checkbox" id="privileged" ng-model="vm.request.HostConfig.Privileged"> 325 <label for="privileged">Allow container to run in privileged mode 326 </label> 327 </div> 328 </div> 329 </div> 330 </div> 331 <div class="ui blue submit button" style="margin: 0 0 20px 30px;"> 332 Deploy 333 </div> 334 </div> 335 </div> 336 </div> 337 </div> 338 </div> 339 </div> 340 <script> 341 $(function(){ 342 $('.ui.form') 343 .form({ 344 image: { 345 identifier : 'image', 346 rules: [ 347 { 348 type : 'empty', 349 prompt : 'Please enter an image' 350 } 351 ] 352 }, 353 }); 354 355 $('.help.circle.icon').popup({ 356 inline: true, 357 hoverable: true, 358 delay: { 359 show: 150, 360 hide: 400 361 } 362 }); 363 $('.ui.dropdown').dropdown(); 364 }); 365 </script>