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>&nbsp;</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>&nbsp;</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>&nbsp;</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="&infin;"></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>&nbsp;</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>&nbsp;</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>