Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-23 07:19:41 +02:00
Code Issues Releases Activity

feat(UX): UX/responsiveness enhancements

Browse source
This commit is contained in:
Anthony Lapenna 2017-03-27 14:44:39 +02:00 • committed by GitHub
parent 967286f45d
commit c243a02e7a
31 changed files with 710 additions and 509 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/app.js
View file

@ -51,7 +51,7 @@ angular.module('portainer', [
'user', 'user',
'users', 'users',
'volumes']) 'volumes'])
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 'localStorageServiceProvider', 'jwtOptionsProvider', 'AnalyticsProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, AnalyticsProvider) { .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 'localStorageServiceProvider', 'jwtOptionsProvider', 'AnalyticsProvider', '$uibTooltipProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, AnalyticsProvider, $uibTooltipProvider) {
'use strict'; 'use strict';
localStorageServiceProvider localStorageServiceProvider
@ -73,6 +73,13 @@ angular.module('portainer', [
$urlRouterProvider.otherwise('/auth'); $urlRouterProvider.otherwise('/auth');
$uibTooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'outsideClick': 'outsideClick'
});
$stateProvider $stateProvider
.state('root', { .state('root', {
abstract: true, abstract: true,

11
app/components/container/container.html
View file

@ -101,11 +101,14 @@
<!-- name-and-registry-inputs --> <!-- name-and-registry-inputs -->
<div class="form-group"> <div class="form-group">
<label for="image_name" class="col-sm-1 control-label text-left">Name</label> <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-7"> <div class="col-sm-11 col-md-6">
<input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag"> <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
</div> </div>
<label for="image_registry" class="col-sm-1 control-label text-left">Registry</label> <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
<div class="col-sm-3"> Registry
<portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
</label>
<div class="col-sm-10 col-md-3 margin-sm-top">
<input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional"> <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional">
</div> </div>
</div> </div>
@ -119,7 +122,7 @@
<!-- !tag-note --> <!-- !tag-note -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="commit()">Create</button> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="commit()">Create</button>
<i id="createImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i> <i id="createImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div> </div>
</div> </div>

2
app/components/containers/containers.html
View file

@ -33,7 +33,7 @@
<button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button> <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
<button type="button" class="btn btn-danger btn-responsive" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button> <button type="button" class="btn btn-danger btn-responsive" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
</div> </div>
<a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.container">Add container</a> <a class="btn btn-primary" type="button" ui-sref="actions.create.container"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add container</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<input type="checkbox" ng-model="state.displayAll" id="displayAll" ng-change="toggleGetAll()" style="margin-top: -2px; margin-right: 5px;"/><label for="displayAll">Show all containers</label> <input type="checkbox" ng-model="state.displayAll" id="displayAll" ng-change="toggleGetAll()" style="margin-top: -2px; margin-right: 5px;"/><label for="displayAll">Show all containers</label>

2
app/components/createContainer/createContainerController.js
View file

@ -37,7 +37,7 @@ function ($scope, $state, $stateParams, $filter, Config, Info, Container, Contai
}; };
$scope.addVolume = function() { $scope.addVolume = function() {
$scope.formValues.Volumes.push({ name: '', containerPath: '' }); $scope.formValues.Volumes.push({ name: '', containerPath: '', readOnly: false, type: 'volume' });
}; };
$scope.removeVolume = function(index) { $scope.removeVolume = function(index) {

386
app/components/createContainer/createcontainer.html
View file

@ -18,88 +18,98 @@
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<div class="col-sm-12 form-section-title">
Image configuration
</div>
<!-- image-and-registry-inputs --> <!-- image-and-registry-inputs -->
<div class="form-group"> <div class="form-group">
<label for="container_image" class="col-sm-1 control-label text-left">Image</label> <label for="container_image" class="col-sm-1 control-label text-left">Image</label>
<div class="col-sm-7"> <div class="col-sm-11 col-md-6">
<input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="e.g. ubuntu:trusty"> <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="e.g. ubuntu:trusty">
</div> </div>
<label for="image_registry" class="col-sm-1 control-label text-left">Registry</label> <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
<div class="col-sm-3"> Registry
<input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub"> <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
</div> </label>
<div class="col-sm-offset-1 col-sm-11"> <div class="col-sm-10 col-md-3 margin-sm-top">
<div class="checkbox"> <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
<label>
<input type="checkbox" ng-model="formValues.alwaysPull"> Always pull image before creating
</label>
</div>
</div> </div>
</div> </div>
<!-- !image-and-registry-inputs --> <!-- !image-and-registry-inputs -->
<!-- restart-policy --> <!-- always-pull -->
<div class="form-group"> <div class="form-group">
<label class="col-sm-1 control-label text-left">Restart policy</label> <div class="col-sm-12">
<div class="col-sm-11"> <label for="ownership" class="control-label text-left">
<label class="radio-inline"> Always pull the image
<input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="no"> <portainer-tooltip position="bottom" message="When enabled, Portainer will automatically try to pull the specified image before creating the container."></portainer-tooltip>
Never
</label> </label>
<label class="radio-inline"> <label class="switch" style="margin-left: 20px;">
<input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="always"> <input type="checkbox" ng-model="formValues.alwaysPull"><i></i>
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> </label>
</div> </div>
</div> </div>
<!-- !restart-policy --> <!-- !always-pull -->
<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 --> <!-- port-mapping -->
<div class="form-group"> <div class="form-group">
<label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label> <div class="col-sm-12">
<div class="col-sm-11"> <label class="control-label text-left">Port mapping</label>
<div class="checkbox"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPortBinding()">
<label> <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
<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> </span>
</div> </div>
<!-- port-mapping-input-list --> <!-- port-mapping-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;"> <div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <!-- host-port -->
<div class="input-group col-sm-4 input-group-sm">
<span class="input-group-addon">host</span> <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)"> <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
</div> </div>
<div class="input-group col-sm-5 input-group-sm"> <!-- !host-port -->
<span style="margin: 0 10px 0 10px;">
<i class="fa fa-long-arrow-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> <span class="input-group-addon">container</span>
<input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80"> <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80">
</div> </div>
<div class="input-group col-sm-1 input-group-sm"> <!-- !container-port -->
<select class="form-control" ng-model="portBinding.protocol"> <!-- protocol-actions -->
<option value="tcp">tcp</option> <div class="input-group col-sm-3 input-group-sm">
<option value="udp">udp</option> <div class="btn-group btn-group-sm">
</select> <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
<span class="input-group-btn"> <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
<button class="btn btn-default" type="button" ng-click="removePortBinding($index)"> </div>
<i class="fa fa-minus" aria-hidden="true"></i> <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
</button> <i class="fa fa-trash" aria-hidden="true"></i>
</span> </button>
</div> </div>
<!-- !protocol-actions -->
</div> </div>
</div> </div>
<!-- !port-mapping-input-list --> <!-- !port-mapping-input-list -->
</div> </div>
<!-- !port-mapping --> <!-- !port-mapping -->
<div class="col-sm-12 form-section-title" ng-if="applicationState.application.authentication">
Access control
</div>
<!-- ownership --> <!-- ownership -->
<div class="form-group" ng-if="applicationState.application.authentication"> <div class="form-group" ng-if="applicationState.application.authentication">
<div class="col-sm-12"> <div class="col-sm-12">
@ -108,11 +118,11 @@
<portainer-tooltip position="bottom" message="When setting the ownership value to private, only you and the administrators will be able to see and manage this object. When choosing public, everybody will be able to access it."></portainer-tooltip> <portainer-tooltip position="bottom" message="When setting the ownership value to private, only you and the administrators will be able to see and manage this object. When choosing public, everybody will be able to access it."></portainer-tooltip>
</label> </label>
<div class="btn-group btn-group-sm" style="margin-left: 20px;"> <div class="btn-group btn-group-sm" style="margin-left: 20px;">
<label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'private'"> <label class="btn btn-primary" ng-model="formValues.Ownership" uib-btn-radio="'private'">
<i class="fa fa-eye-slash" aria-hidden="true"></i> <i class="fa fa-eye-slash" aria-hidden="true"></i>
Private Private
</label> </label>
<label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'public'"> <label class="btn btn-primary" ng-model="formValues.Ownership" uib-btn-radio="'public'">
<i class="fa fa-eye" aria-hidden="true"></i> <i class="fa fa-eye" aria-hidden="true"></i>
Public Public
</label> </label>
@ -120,6 +130,18 @@
</div> </div>
</div> </div>
<!-- !ownership --> <!-- !ownership -->
<!-- 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="!config.Image" ng-click="create()">Start container</button>
<a type="button" class="btn btn-default btn-sm" ui-sref="containers">Cancel</a>
<i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div>
</div>
<!-- !actions -->
</form> </form>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
@ -129,13 +151,16 @@
<div class="row"> <div class="row">
<div class="col-lg-12 col-md-12 col-xs-12"> <div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget> <rd-widget>
<rd-widget-header icon="fa-cog" title="Advanced container settings"></rd-widget-header>
<rd-widget-body> <rd-widget-body>
<ul class="nav nav-tabs"> <ul class="nav nav-pills nav-justified">
<li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li> <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="#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="#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="#labels" data-toggle="tab">Labels</a></li>
<li class="interactive"><a data-target="#security" data-toggle="tab">Security/Host</a></li> <li class="interactive"><a data-target="#restart-policy" data-toggle="tab">Restart policy</a></li>
<li class="interactive"><a data-target="#runtime" data-toggle="tab">Runtime</a></li>
</ul> </ul>
<!-- tab-content --> <!-- tab-content -->
<div class="tab-content"> <div class="tab-content">
@ -144,7 +169,7 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- command-input --> <!-- command-input -->
<div class="form-group"> <div class="form-group">
<label for="container_command" class="col-sm-1 control-label text-left">Command</label> <label for="container_command" class="col-sm-2 col-lg-1 control-label text-left">Command</label>
<div class="col-sm-9"> <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"> <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>
@ -152,7 +177,7 @@
<!-- !command-input --> <!-- !command-input -->
<!-- entrypoint-input --> <!-- entrypoint-input -->
<div class="form-group"> <div class="form-group">
<label for="container_entrypoint" class="col-sm-1 control-label text-left">Entry Point</label> <label for="container_entrypoint" class="col-sm-2 col-lg-1 control-label text-left">Entry Point</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" class="form-control" ng-model="config.Entrypoint" id="container_entrypoint" placeholder="e.g. /bin/sh -c"> <input type="text" class="form-control" ng-model="config.Entrypoint" id="container_entrypoint" placeholder="e.g. /bin/sh -c">
</div> </div>
@ -160,7 +185,7 @@
<!-- !entrypoint-input --> <!-- !entrypoint-input -->
<!-- workdir-user-input --> <!-- workdir-user-input -->
<div class="form-group"> <div class="form-group">
<label for="container_workingdir" class="col-sm-1 control-label text-left">Working Dir</label> <label for="container_workingdir" class="col-sm-2 col-lg-1 control-label text-left">Working Dir</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" class="form-control" ng-model="config.WorkingDir" id="container_workingdir" placeholder="e.g. /myapp"> <input type="text" class="form-control" ng-model="config.WorkingDir" id="container_workingdir" placeholder="e.g. /myapp">
</div> </div>
@ -172,8 +197,8 @@
<!-- !workdir-user-input --> <!-- !workdir-user-input -->
<!-- console --> <!-- console -->
<div class="form-group"> <div class="form-group">
<label for="container_console" class="col-sm-1 control-label text-left">Console</label> <label for="container_console" class="col-sm-2 col-lg-1 control-label text-left">Console</label>
<div class="col-sm-11"> <div class="col-sm-10 col-lg-11">
<div class="col-sm-4"> <div class="col-sm-4">
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="container_console" ng-model="formValues.Console" value="both"> <input type="radio" name="container_console" ng-model="formValues.Console" value="both">
@ -187,7 +212,7 @@
</label> </label>
</div> </div>
</div> </div>
<div class="col-sm-offset-1 col-sm-11"> <div class="col-sm-offset-2 col-sm-10 col-lg-offset-1 col-lg-11">
<div class="col-sm-4"> <div class="col-sm-4">
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="container_console" ng-model="formValues.Console" value="tty"> <input type="radio" name="container_console" ng-model="formValues.Console" value="tty">
@ -203,35 +228,6 @@
</div> </div>
</div> </div>
<!-- !console --> <!-- !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> </form>
</div> </div>
<!-- !tab-command --> <!-- !tab-command -->
@ -240,39 +236,64 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- volumes --> <!-- volumes -->
<div class="form-group"> <div class="form-group">
<label for="container_volumes" class="col-sm-1 control-label text-left">Volumes</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Volume mapping</label>
<span class="label label-default interactive" ng-click="addVolume()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addVolume()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> volume <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
</span> </span>
</div> </div>
<!-- volumes-input-list --> <!-- volumes-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="form-inline" style="margin-top: 10px;">
<div ng-repeat="volume in formValues.Volumes" style="margin-top: 2px;"> <div ng-repeat="volume in formValues.Volumes">
<div class="input-group col-sm-1 input-group-sm"> <!-- volume-line1 -->
<div class="checkbox"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<label> <!-- container-path -->
<input type="checkbox" ng-model="volume.readOnly"> Read-only <div class="input-group input-group-sm col-sm-6">
</label> <span class="input-group-addon">container</span>
<input type="text" class="form-control" ng-model="volume.containerPath" placeholder="e.g. /path/in/container">
</div> </div>
</div> <!-- !container-path -->
<div class="input-group col-sm-5 input-group-sm"> <!-- volume-type -->
<span class="input-group-addon"><input type="checkbox" ng-model="volume.isPath" ng-click="resetVolumePath($index)">Path</span> <div class="input-group col-sm-5" style="margin-left: 5px;">
<select class="form-control" ng-model="volume.name" ng-if="!volume.isPath"> <div class="btn-group btn-group-sm">
<option selected disabled hidden value="">Select a volume</option> <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'volume'" ng-click="volume.name = ''">Volume</label>
<option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option> <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'bind'" ng-click="volume.name = ''">Bind</label>
</select> </div>
<input ng-if="volume.isPath" type="text" class="form-control" ng-model="volume.name" placeholder="e.g. /path/on/host"> <button class="btn btn-sm btn-danger" type="button" ng-click="removeVolume($index)">
</div> <i class="fa fa-trash" aria-hidden="true"></i>
<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> </button>
</span> </div>
<!-- !volume-type -->
</div> </div>
<!-- !volume-line1 -->
<!-- volume-line2 -->
<div class="col-sm-12 form-inline" style="margin-top: 5px;">
<i class="fa fa-long-arrow-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>
</div> </div>
<!-- !volumes-input-list --> <!-- !volumes-input-list -->
@ -291,7 +312,7 @@
</div> </div>
<!-- network-input --> <!-- network-input -->
<div class="form-group"> <div class="form-group">
<label for="container_network" class="col-sm-1 control-label text-left">Network</label> <label for="container_network" class="col-sm-2 col-lg-1 control-label text-left">Network</label>
<div class="col-sm-9"> <div class="col-sm-9">
<select class="form-control" ng-model="config.HostConfig.NetworkMode" id="container_network"> <select class="form-control" ng-model="config.HostConfig.NetworkMode" id="container_network">
<option selected disabled hidden value="">Select a network</option> <option selected disabled hidden value="">Select a network</option>
@ -302,7 +323,7 @@
<!-- !network-input --> <!-- !network-input -->
<!-- container-name-input --> <!-- container-name-input -->
<div class="form-group" ng-if="config.HostConfig.NetworkMode == 'container'"> <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> <label for="container_network_container" class="col-sm-2 col-lg-1 control-label text-left">Container</label>
<div class="col-sm-9"> <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"> <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> <option selected disabled hidden value="">Select a container</option>
@ -315,7 +336,7 @@
<!-- !container-name-input --> <!-- !container-name-input -->
<!-- hostname-input --> <!-- hostname-input -->
<div class="form-group"> <div class="form-group">
<label for="container_hostname" class="col-sm-1 control-label text-left">Hostname</label> <label for="container_hostname" class="col-sm-2 col-lg-1 control-label text-left">Hostname</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" class="form-control" ng-model="config.Hostname" id="container_hostname" placeholder="e.g. web01"> <input type="text" class="form-control" ng-model="config.Hostname" id="container_hostname" placeholder="e.g. web01">
</div> </div>
@ -323,7 +344,7 @@
<!-- !hostname-input --> <!-- !hostname-input -->
<!-- domainname-input --> <!-- domainname-input -->
<div class="form-group"> <div class="form-group">
<label for="container_domainname" class="col-sm-1 control-label text-left">Domain Name</label> <label for="container_domainname" class="col-sm-2 col-lg-1 control-label text-left">Domain Name</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" class="form-control" ng-model="config.Domainname" id="container_domainname" placeholder="e.g. example.com"> <input type="text" class="form-control" ng-model="config.Domainname" id="container_domainname" placeholder="e.g. example.com">
</div> </div>
@ -331,24 +352,22 @@
<!-- !domainname --> <!-- !domainname -->
<!-- extra-hosts-variables --> <!-- extra-hosts-variables -->
<div class="form-group"> <div class="form-group">
<label for="container_extrahosts" class="col-sm-1 control-label text-left">Extra Hosts</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Hosts file entries</label>
<span class="label label-default interactive" ng-click="addExtraHost()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addExtraHost()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> extra host <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
</span> </span>
</div> </div>
<!-- extra-hosts-input-list --> <!-- extra-hosts-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="variable in formValues.ExtraHosts" style="margin-top: 2px;"> <div ng-repeat="variable in formValues.ExtraHosts" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP"> <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>
<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>
</div> </div>
<!-- !extra-hosts-input-list --> <!-- !extra-hosts-input-list -->
@ -362,14 +381,14 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- labels --> <!-- labels -->
<div class="form-group"> <div class="form-group">
<label for="container_labels" class="col-sm-1 control-label text-left">Labels</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Labels</label>
<span class="label label-default interactive" ng-click="addLabel()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> label <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
</span> </span>
</div> </div>
<!-- labels-input-list --> <!-- labels-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="label in formValues.Labels" style="margin-top: 2px;"> <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
@ -378,12 +397,10 @@
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"> <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>
<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>
</div> </div>
<!-- !labels-input-list --> <!-- !labels-input-list -->
@ -392,35 +409,86 @@
</form> </form>
</div> </div>
<!-- !tab-labels --> <!-- !tab-labels -->
<!-- tab-security --> <!-- tab-env -->
<div class="tab-pane" id="security"> <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 -->
<div class="tab-pane" id="runtime">
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- privileged-mode --> <!-- privileged-mode -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="checkbox"> <label for="ownership" class="control-label text-left">
<label> Privileged mode
<input type="checkbox" ng-model="config.HostConfig.Privileged"> Privileged mode </label>
</label> <label class="switch" style="margin-left: 20px;">
</div> <input type="checkbox" ng-model="config.HostConfig.Privileged"><i></i>
</label>
</div> </div>
</div> </div>
<!-- !privileged-mode --> <!-- !privileged-mode -->
</form> </form>
</div> </div>
<!-- !tab-security --> <!-- !tab-runtime -->
</div> </div>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div> </div>
</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>

103
app/components/createNetwork/createnetwork.html
View file

@ -18,36 +18,45 @@
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<div class="col-sm-12 form-section-title">
Network configuration
</div>
<!-- subnet-gateway-inputs --> <!-- subnet-gateway-inputs -->
<div class="form-group"> <div class="form-group">
<label for="network_subnet" class="col-sm-1 control-label text-left">Subnet</label> <label for="network_subnet" class="col-sm-2 col-lg-1 control-label text-left">Subnet</label>
<div class="col-sm-5"> <div class="col-sm-4 col-lg-5">
<input type="text" class="form-control" ng-model="formValues.Subnet" id="network_subnet" placeholder="e.g. 172.20.0.0/16"> <input type="text" class="form-control" ng-model="formValues.Subnet" id="network_subnet" placeholder="e.g. 172.20.0.0/16">
</div> </div>
<label for="network_gateway" class="col-sm-1 control-label text-left">Gateway</label> <label for="network_gateway" class="col-sm-2 col-lg-1 control-label text-left">Gateway</label>
<div class="col-sm-5"> <div class="col-sm-4 col-lg-5">
<input type="text" class="form-control" ng-model="formValues.Gateway" id="network_gateway" placeholder="e.g. 172.20.10.11"> <input type="text" class="form-control" ng-model="formValues.Gateway" id="network_gateway" placeholder="e.g. 172.20.10.11">
</div> </div>
</div> </div>
<!-- !subnet-gateway-inputs --> <!-- !subnet-gateway-inputs -->
<div class="col-sm-12 form-section-title">
Driver configuration
</div>
<!-- driver-input --> <!-- driver-input -->
<div class="form-group"> <div class="form-group">
<label for="network_driver" class="col-sm-1 control-label text-left">Driver</label> <label for="network_driver" class="col-sm-2 col-lg-1 control-label text-left">Driver</label>
<div class="col-sm-11"> <div class="col-sm-10">
<input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName"> <input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName">
</div> </div>
</div> </div>
<!-- !driver-input --> <!-- !driver-input -->
<!-- driver-options --> <!-- driver-options -->
<div class="form-group"> <div class="form-group">
<label for="network_driveropts" class="col-sm-1 control-label text-left">Driver options</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">
<span class="label label-default interactive" ng-click="addDriverOption()"> Driver options
<i class="fa fa-plus-circle" aria-hidden="true"></i> driver option <portainer-tooltip position="bottom" message="Driver options are specific to the selected driver. Please refer to the selected driver documentation."></portainer-tooltip>
</label>
<span class="label label-default interactive" style="margin-left: 10px;" ng-click="addDriverOption()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> add driver option
</span> </span>
</div> </div>
<!-- driver-options-input-list --> <!-- driver-options-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;"> <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
@ -56,38 +65,28 @@
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true"> <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeDriverOption($index)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</span>
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removeDriverOption($index)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div> </div>
</div> </div>
<!-- !driver-options-input-list --> <!-- !driver-options-input-list -->
</div> </div>
<!-- !driver-options --> <!-- !driver-options -->
<!-- internal --> <div class="col-sm-12 form-section-title">
<div class="form-group"> Advanced configuration
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="config.Internal"> Restrict external access to the network
</label>
</div>
</div>
</div> </div>
<!-- !internal -->
<!-- labels --> <!-- labels -->
<div class="form-group"> <div class="form-group">
<label for="service_env" class="col-sm-1 control-label text-left">Labels</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Labels</label>
<span class="label label-default interactive" ng-click="addLabel()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> label <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
</span> </span>
</div> </div>
<!-- labels-input-list --> <!-- labels-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="label in formValues.Labels" style="margin-top: 2px;"> <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
@ -96,29 +95,41 @@
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"> <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>
<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>
</div> </div>
<!-- !labels-input-list --> <!-- !labels-input-list -->
</div> </div>
<!-- !labels--> <!-- !labels-->
<!-- internal -->
<div class="form-group">
<div class="col-sm-12">
<label for="ownership" class="control-label text-left">
Restrict external access to the network
</label>
<label class="switch" style="margin-left: 20px;">
<input type="checkbox" ng-model="formValues.alwaysPull"><i></i>
</label>
</div>
</div>
<!-- !internal -->
<!-- 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="!config.Name" ng-click="create()">Create network</button>
<a type="button" class="btn btn-default btn-sm" ui-sref="networks">Cancel</a>
<i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div>
</div>
<!-- !actions -->
</form> </form>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div> </div>
</div> </div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
<div>
<i id="createNetworkSpinner" 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-disabled="!config.Name" ng-click="create()">Create</button>
<a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
</div>
</div>

2
app/components/createService/createServiceController.js
View file

@ -44,7 +44,7 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Authentication,
}; };
$scope.addVolume = function() { $scope.addVolume = function() {
$scope.formValues.Volumes.push({ name: '', containerPath: '' }); $scope.formValues.Volumes.push({ Source: '', Target: '', ReadOnly: false, Type: 'volume' });
}; };
$scope.removeVolume = function(index) { $scope.removeVolume = function(index) {

330
app/components/createService/createservice.html
View file

@ -18,75 +18,95 @@
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<div class="col-sm-12 form-section-title">
Image configuration
</div>
<!-- image-and-registry-inputs --> <!-- image-and-registry-inputs -->
<div class="form-group"> <div class="form-group">
<label for="service_image" class="col-sm-1 control-label text-left">Image</label> <label for="service_image" class="col-sm-1 control-label text-left">Image</label>
<div class="col-sm-7"> <div class="col-sm-11 col-md-6">
<input type="text" class="form-control" ng-model="formValues.Image" id="service_image" placeholder="e.g. nginx:latest"> <input type="text" class="form-control" ng-model="formValues.Image" id="service_image" placeholder="e.g. nginx:latest">
</div> </div>
<label for="image_registry" class="col-sm-1 control-label text-left">Registry</label> <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
<div class="col-sm-3"> Registry
<input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub"> <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
</label>
<div class="col-sm-10 col-md-3 margin-sm-top">
<input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
</div> </div>
</div> </div>
<!-- !image-and-registry-inputs --> <!-- !image-and-registry-inputs -->
<div class="col-sm-12 form-section-title">
Scheduling
</div>
<!-- scheduling-mode --> <!-- scheduling-mode -->
<div class="form-group"> <div class="form-group">
<label class="col-sm-1 control-label text-left">Scheduling mode</label> <div class="col-sm-12">
<div class="col-sm-11"> <label class="control-label text-left">
<label class="radio-inline"> Scheduling mode
<input type="radio" name="service_scheduling" ng-model="formValues.Mode" value="global">
Global
</label>
<label class="radio-inline">
<input type="radio" name="service_scheduling" ng-model="formValues.Mode" value="replicated">
Replicated
</label> </label>
<div class="btn-group btn-group-sm" style="margin-left: 20px;">
<label class="btn btn-primary" ng-model="formValues.Mode" uib-btn-radio="'global'">Global</label>
<label class="btn btn-primary" ng-model="formValues.Mode" uib-btn-radio="'replicated'">Replicated</label>
</div>
</div> </div>
</div> </div>
<div class="form-group" ng-if="formValues.Mode === 'replicated'"> <div class="form-group form-inline" ng-if="formValues.Mode === 'replicated'">
<label for="replicas" class="col-sm-1 control-label text-left">Replicas</label> <div class="col-sm-12">
<div class="col-sm-1"> <label class="control-label text-left">
<input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3"> Replicas
</label>
<input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3" style="margin-left: 20px;">
</div> </div>
<div class="col-sm-10"></div>
</div> </div>
<!-- !scheduling-mode --> <!-- !scheduling-mode -->
<div class="col-sm-12 form-section-title">
Ports configuration
</div>
<!-- port-mapping --> <!-- port-mapping -->
<div class="form-group"> <div class="form-group">
<label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Port mapping</label>
<span class="label label-default interactive" ng-click="addPortBinding()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPortBinding()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> map port <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
</span> </span>
</div> </div>
<!-- port-mapping-input-list --> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
<div ng-repeat="portBinding in formValues.Ports" style="margin-top: 2px;"> <div ng-repeat="portBinding in formValues.Ports" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <!-- host-port -->
<div class="input-group col-sm-4 input-group-sm">
<span class="input-group-addon">host</span> <span class="input-group-addon">host</span>
<input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 8080"> <input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
</div> </div>
<div class="input-group col-sm-5 input-group-sm"> <!-- !host-port -->
<span style="margin: 0 10px 0 10px;">
<i class="fa fa-long-arrow-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> <span class="input-group-addon">container</span>
<input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80"> <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80">
</div> </div>
<div class="input-group col-sm-1 input-group-sm"> <!-- !container-port -->
<select class="form-control" ng-model="portBinding.Protocol"> <!-- protocol-actions -->
<option value="tcp">tcp</option> <div class="input-group col-sm-3 input-group-sm">
<option value="udp">udp</option> <div class="btn-group btn-group-sm">
</select> <label class="btn btn-primary" ng-model="portBinding.Protocol" uib-btn-radio="'tcp'">TCP</label>
<span class="input-group-btn"> <label class="btn btn-primary" ng-model="portBinding.Protocol" uib-btn-radio="'udp'">UDP</label>
<button class="btn btn-default" type="button" ng-click="removePortBinding($index)"> </div>
<i class="fa fa-minus" aria-hidden="true"></i> <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
</button> <i class="fa fa-trash" aria-hidden="true"></i>
</span> </button>
</div> </div>
<!-- !protocol-actions -->
</div> </div>
</div> </div>
<!-- !port-mapping-input-list --> <!-- !port-mapping-input-list -->
</div> </div>
<!-- !port-mapping --> <!-- !port-mapping -->
<div class="col-sm-12 form-section-title" ng-if="applicationState.application.authentication">
Access control
</div>
<!-- ownership --> <!-- ownership -->
<div class="form-group" ng-if="applicationState.application.authentication"> <div class="form-group" ng-if="applicationState.application.authentication">
<div class="col-sm-12"> <div class="col-sm-12">
@ -95,11 +115,11 @@
<portainer-tooltip position="bottom" message="When setting the ownership value to private, only you and the administrators will be able to see and manage this object. When choosing public, everybody will be able to access it."></portainer-tooltip> <portainer-tooltip position="bottom" message="When setting the ownership value to private, only you and the administrators will be able to see and manage this object. When choosing public, everybody will be able to access it."></portainer-tooltip>
</label> </label>
<div class="btn-group btn-group-sm" style="margin-left: 20px;"> <div class="btn-group btn-group-sm" style="margin-left: 20px;">
<label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'private'"> <label class="btn btn-primary" ng-model="formValues.Ownership" uib-btn-radio="'private'">
<i class="fa fa-eye-slash" aria-hidden="true"></i> <i class="fa fa-eye-slash" aria-hidden="true"></i>
Private Private
</label> </label>
<label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'public'"> <label class="btn btn-primary" ng-model="formValues.Ownership" uib-btn-radio="'public'">
<i class="fa fa-eye" aria-hidden="true"></i> <i class="fa fa-eye" aria-hidden="true"></i>
Public Public
</label> </label>
@ -107,6 +127,18 @@
</div> </div>
</div> </div>
<!-- !ownership --> <!-- !ownership -->
<!-- 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="!formValues.Image" ng-click="create()">Create service</button>
<a type="button" class="btn btn-default btn-sm" ui-sref="services">Cancel</a>
<i id="createServiceSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div>
</div>
<!-- !actions -->
</form> </form>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
@ -117,7 +149,7 @@
<div class="col-lg-12 col-md-12 col-xs-12"> <div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget> <rd-widget>
<rd-widget-body> <rd-widget-body>
<ul class="nav nav-tabs"> <ul class="nav nav-pills nav-justified">
<li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li> <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="#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="#network" data-toggle="tab">Network</a></li>
@ -131,7 +163,7 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- command-input --> <!-- command-input -->
<div class="form-group"> <div class="form-group">
<label for="service_command" class="col-sm-1 control-label text-left">Command</label> <label for="service_command" class="col-sm-2 col-lg-1 control-label text-left">Command</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" class="form-control" ng-model="formValues.Command" id="service_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf"> <input type="text" class="form-control" ng-model="formValues.Command" id="service_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
</div> </div>
@ -139,7 +171,7 @@
<!-- !command-input --> <!-- !command-input -->
<!-- entrypoint-input --> <!-- entrypoint-input -->
<div class="form-group"> <div class="form-group">
<label for="service_entrypoint" class="col-sm-1 control-label text-left">Entrypoint</label> <label for="service_entrypoint" class="col-sm-2 col-lg-1 control-label text-left">Entrypoint</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" class="form-control" ng-model="formValues.EntryPoint" id="service_entrypoint" placeholder="e.g. /bin/sh -c"> <input type="text" class="form-control" ng-model="formValues.EntryPoint" id="service_entrypoint" placeholder="e.g. /bin/sh -c">
</div> </div>
@ -147,7 +179,7 @@
<!-- !entrypoint-input --> <!-- !entrypoint-input -->
<!-- workdir-user-input --> <!-- workdir-user-input -->
<div class="form-group"> <div class="form-group">
<label for="service_workingdir" class="col-sm-1 control-label text-left">Working Dir</label> <label for="service_workingdir" class="col-sm-2 col-lg-1 control-label text-left">Working Dir</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp"> <input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp">
</div> </div>
@ -159,14 +191,14 @@
<!-- !workdir-user-input --> <!-- !workdir-user-input -->
<!-- environment-variables --> <!-- environment-variables -->
<div class="form-group"> <div class="form-group">
<label for="service_env" class="col-sm-1 control-label text-left">Environment variables</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Environment variables</label>
<span class="label label-default interactive" ng-click="addEnvironmentVariable()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addEnvironmentVariable()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable <i class="fa fa-plus-circle" aria-hidden="true"></i> add environment variable
</span> </span>
</div> </div>
<!-- environment-variable-input-list --> <!-- environment-variable-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="variable in formValues.Env" style="margin-top: 2px;"> <div ng-repeat="variable in formValues.Env" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
@ -175,12 +207,10 @@
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. bar"> <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>
<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>
</div> </div>
<!-- !environment-variable-input-list --> <!-- !environment-variable-input-list -->
@ -194,38 +224,65 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- volumes --> <!-- volumes -->
<div class="form-group"> <div class="form-group">
<label for="service_volumes" class="col-sm-1 control-label text-left">Volumes</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Volume mapping</label>
<span class="label label-default interactive" ng-click="addVolume()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addVolume()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> volume <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
</span> </span>
</div> </div>
<!-- volumes-input-list --> <!-- volumes-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="volume in formValues.Volumes" style="margin-top: 2px;"> <div ng-repeat="volume in formValues.Volumes">
<div class="input-group col-sm-1 input-group-sm"> <div class="col-sm-12" style="margin-top: 10px;">
<div class="checkbox"> <!-- volume-line1 -->
<label> <div class="col-sm-12 form-inline">
<input type="checkbox" ng-model="volume.ReadOnly"> Read-only <!-- container-path -->
</label> <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.Source" placeholder="e.g. /path/in/container">
</div>
<!-- !container-path -->
<!-- volume-type -->
<div class="input-group col-sm-5" style="margin-left: 5px;">
<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> </div>
</div> <!-- !volume-line1 -->
<div class="input-group col-sm-5 input-group-sm"> <!-- volume-line2 -->
<span class="input-group-addon"><input type="checkbox" ng-model="volume.Bind">bind</span> <div class="col-sm-12 form-inline" style="margin-top: 5px;">
<select class="form-control" ng-model="volume.Source" ng-if="!volume.Bind"> <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
<option selected disabled hidden value="">Select a volume</option> <!-- volume -->
<option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option> <div class="input-group input-group-sm col-sm-6" ng-if="volume.Type === 'volume'">
</select> <span class="input-group-addon">volume</span>
<input ng-if="volume.Bind" type="text" class="form-control" ng-model="volume.Source" placeholder="e.g. /path/on/host"> <select class="form-control" ng-model="volume.Target">
</div> <option selected disabled hidden value="">Select a volume</option>
<div class="input-group col-sm-5 input-group-sm"> <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
<span class="input-group-addon">container</span> </select>
<input type="text" class="form-control" ng-model="volume.Target" placeholder="e.g. /path/in/container"> </div>
<span class="input-group-btn"> <!-- !volume -->
<button class="btn btn-default" type="button" ng-click="removeVolume($index)"> <!-- bind -->
<i class="fa fa-minus" aria-hidden="true"></i> <div class="input-group input-group-sm col-sm-6" ng-if="volume.Type === 'bind'">
</button> <span class="input-group-addon">host</span>
</span> <input type="text" class="form-control" ng-model="volume.Target" 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>
</div> </div>
</div> </div>
@ -240,7 +297,7 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- network-input --> <!-- network-input -->
<div class="form-group"> <div class="form-group">
<label for="container_network" class="col-sm-1 control-label text-left">Network</label> <label for="container_network" class="col-sm-2 col-lg-1 control-label text-left">Network</label>
<div class="col-sm-9"> <div class="col-sm-9">
<select class="form-control" ng-model="formValues.Network"> <select class="form-control" ng-model="formValues.Network">
<option selected disabled hidden value="">Select a network</option> <option selected disabled hidden value="">Select a network</option>
@ -252,27 +309,22 @@
<!-- !network-input --> <!-- !network-input -->
<!-- extra-networks --> <!-- extra-networks -->
<div class="form-group"> <div class="form-group">
<label for="service_extra_networks" class="col-sm-1 control-label text-left">Extra networks</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Extra networks</label>
<span class="label label-default interactive" ng-click="addExtraNetwork()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addExtraNetwork()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> network <i class="fa fa-plus-circle" aria-hidden="true"></i> add extra network
</span> </span>
</div> </div>
<!-- network-input-list --> <!-- network-input-list -->
<div style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div class="col-sm-12" ng-repeat="network in formValues.ExtraNetworks" style="margin-top: 5px;"> <div ng-repeat="network in formValues.ExtraNetworks" style="margin-top: 2px;">
<div class="input-group col-sm-9 input-group-sm col-sm-offset-1"> <select class="form-control" ng-model="network.Name">
<span class="input-group-btn"> <option selected disabled hidden value="">Select a network</option>
<button class="btn btn-default" type="button" ng-click="removeExtraNetwork($index)"> <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
<i class="fa fa-minus" aria-hidden="true"></i> </select>
</button> <button class="btn btn-sm btn-danger" type="button" ng-click="removeExtraNetwork($index)">
</span> <i class="fa fa-trash" aria-hidden="true"></i>
<select class="form-control" ng-model="network.Name"> </button>
<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 class="col-sm-2"></div>
</div> </div>
</div> </div>
<!-- !network-input-list --> <!-- !network-input-list -->
@ -286,14 +338,14 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- labels --> <!-- labels -->
<div class="form-group"> <div class="form-group">
<label for="service_env" class="col-sm-1 control-label text-left">Labels</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Service labels</label>
<span class="label label-default interactive" ng-click="addLabel()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> label <i class="fa fa-plus-circle" aria-hidden="true"></i> add service label
</span> </span>
</div> </div>
<!-- labels-input-list --> <!-- labels-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="label in formValues.Labels" style="margin-top: 2px;"> <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
@ -302,12 +354,10 @@
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"> <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>
<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>
</div> </div>
<!-- !labels-input-list --> <!-- !labels-input-list -->
@ -315,14 +365,14 @@
<!-- !labels--> <!-- !labels-->
<!-- container-labels --> <!-- container-labels -->
<div class="form-group"> <div class="form-group">
<label for="service_env" class="col-sm-1 control-label text-left">Container labels</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">Container labels</label>
<span class="label label-default interactive" ng-click="addContainerLabel()"> <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addContainerLabel()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> container label <i class="fa fa-plus-circle" aria-hidden="true"></i> add container label
</span> </span>
</div> </div>
<!-- container-labels-input-list --> <!-- container-labels-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px;"> <div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
@ -331,12 +381,10 @@
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"> <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="removeContainerLabel($index)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</span>
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removeContainerLabel($index)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div> </div>
</div> </div>
<!-- !container-labels-input-list --> <!-- !container-labels-input-list -->
@ -350,11 +398,11 @@
<form class="form-horizontal" style="margin-top: 15px;"> <form class="form-horizontal" style="margin-top: 15px;">
<!-- parallelism-input --> <!-- parallelism-input -->
<div class="form-group"> <div class="form-group">
<label for="parallelism" class="col-sm-1 control-label text-left">Parallelism</label> <label for="parallelism" class="col-sm-2 col-lg-1 control-label text-left">Parallelism</label>
<div class="col-sm-1"> <div class="col-sm-2">
<input type="number" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1"> <input type="number" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1">
</div> </div>
<div class="col-sm-10"> <div class="col-sm-8">
<p class="small text-muted" style="margin-top: 10px;"> <p class="small text-muted" style="margin-top: 10px;">
Maximum number of tasks to be updated simultaneously (0 to update all at once). Maximum number of tasks to be updated simultaneously (0 to update all at once).
</p> </p>
@ -363,11 +411,11 @@
<!-- !parallelism-input --> <!-- !parallelism-input -->
<!-- delay-input --> <!-- delay-input -->
<div class="form-group"> <div class="form-group">
<label for="update-delay" class="col-sm-1 control-label text-left">Delay</label> <label for="update-delay" class="col-sm-2 col-lg-1 control-label text-left">Delay</label>
<div class="col-sm-2"> <div class="col-sm-2">
<input type="number" class="form-control" ng-model="formValues.UpdateDelay" id="update-delay" placeholder="e.g. 10"> <input type="number" class="form-control" ng-model="formValues.UpdateDelay" id="update-delay" placeholder="e.g. 10">
</div> </div>
<div class="col-sm-9"> <div class="col-sm-8">
<p class="small text-muted" style="margin-top: 10px;"> <p class="small text-muted" style="margin-top: 10px;">
Amount of time between updates. Amount of time between updates.
</p> </p>
@ -376,40 +424,20 @@
<!-- !delay-input --> <!-- !delay-input -->
<!-- failureAction-input --> <!-- failureAction-input -->
<div class="form-group"> <div class="form-group">
<label for="failure_action" class="col-sm-1 control-label text-left">Failure Action</label> <div class="col-sm-12">
<div class="col-sm-3"> <label class="control-label text-left">Failure action</label>
<label class="radio-inline"> <div class="btn-group btn-group-sm" style="margin-left: 20px;">
<input type="radio" name="failure_action" ng-model="formValues.FailureAction" value="continue"> <label class="btn btn-primary" ng-model="formValues.FailureAction" uib-btn-radio="'continue'">Continue</label>
Continue <label class="btn btn-primary" ng-model="formValues.FailureAction" uib-btn-radio="'pause'">Pause</label>
</label> </div>
<label class="radio-inline">
<input type="radio" name="failure_action" ng-model="formValues.FailureAction" value="pause">
Pause
</label>
</div> </div>
<div class="col-sm-8"></div>
</div> </div>
<!-- !failureAction-input --> <!-- !failureAction-input -->
</form> </form>
</div> </div>
<!-- !tab-update-config --> <!-- !tab-update-config -->
<!-- tab-security -->
<div class="tab-pane" id="security">
</div>
<!-- !tab-security -->
</div> </div>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div> </div>
</div> </div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
<div>
<i id="createServiceSpinner" 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="services">Cancel</a>
</div>
</div>

53
app/components/createVolume/createvolume.html
View file

@ -18,6 +18,9 @@
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<div class="col-sm-12 form-section-title">
Driver configuration
</div>
<!-- driver-input --> <!-- driver-input -->
<div class="form-group"> <div class="form-group">
<label for="volume_driver" class="col-sm-1 control-label text-left">Driver</label> <label for="volume_driver" class="col-sm-1 control-label text-left">Driver</label>
@ -28,14 +31,17 @@
<!-- !driver-input --> <!-- !driver-input -->
<!-- driver-options --> <!-- driver-options -->
<div class="form-group"> <div class="form-group">
<label for="volume_driveropts" class="col-sm-1 control-label text-left">Driver options</label> <div class="col-sm-12" style="margin-top: 5px;">
<div class="col-sm-11"> <label class="control-label text-left">
<span class="label label-default interactive" ng-click="addDriverOption()"> Driver options
<i class="fa fa-plus-circle" aria-hidden="true"></i> driver option <portainer-tooltip position="bottom" message="Driver options are specific to the selected driver. Please refer to the selected driver documentation."></portainer-tooltip>
</label>
<span class="label label-default interactive" style="margin-left: 10px;" ng-click="addDriverOption()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> add driver option
</span> </span>
</div> </div>
<!-- driver-options-input-list --> <!-- driver-options-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;"> <div class="col-sm-12 form-inline" style="margin-top: 10px;">
<div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;"> <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span> <span class="input-group-addon">name</span>
@ -44,17 +50,18 @@
<div class="input-group col-sm-5 input-group-sm"> <div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span> <span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host"> <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeDriverOption($index)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</span>
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removeDriverOption($index)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div> </div>
</div> </div>
<!-- !driver-options-input-list --> <!-- !driver-options-input-list -->
</div> </div>
<!-- !driver-options --> <!-- !driver-options -->
<div class="col-sm-12 form-section-title" ng-if="applicationState.application.authentication">
Access control
</div>
<!-- ownership --> <!-- ownership -->
<div class="form-group" ng-if="applicationState.application.authentication"> <div class="form-group" ng-if="applicationState.application.authentication">
<div class="col-sm-12"> <div class="col-sm-12">
@ -63,11 +70,11 @@
<portainer-tooltip position="bottom" message="When setting the ownership value to private, only you and the administrators will be able to see and manage this object. When choosing public, everybody will be able to access it."></portainer-tooltip> <portainer-tooltip position="bottom" message="When setting the ownership value to private, only you and the administrators will be able to see and manage this object. When choosing public, everybody will be able to access it."></portainer-tooltip>
</label> </label>
<div class="btn-group btn-group-sm" style="margin-left: 20px;"> <div class="btn-group btn-group-sm" style="margin-left: 20px;">
<label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'private'"> <label class="btn btn-primary" ng-model="formValues.Ownership" uib-btn-radio="'private'">
<i class="fa fa-eye-slash" aria-hidden="true"></i> <i class="fa fa-eye-slash" aria-hidden="true"></i>
Private Private
</label> </label>
<label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'public'"> <label class="btn btn-primary" ng-model="formValues.Ownership" uib-btn-radio="'public'">
<i class="fa fa-eye" aria-hidden="true"></i> <i class="fa fa-eye" aria-hidden="true"></i>
Public Public
</label> </label>
@ -75,18 +82,20 @@
</div> </div>
</div> </div>
<!-- !ownership --> <!-- !ownership -->
<!-- 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-click="create()">Create volume</button>
<a type="button" class="btn btn-default btn-sm" ui-sref="volumes">Cancel</a>
<i id="createVolumeSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div>
</div>
<!-- !actions -->
</form> </form>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div> </div>
</div> </div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
<div>
<i id="createVolumeSpinner" 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="volumes">Cancel</a>
</div>
</div>

8
app/components/dashboard/dashboard.html
View file

@ -85,7 +85,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="col-xs-12 col-md-6">
<a ui-sref="containers"> <a ui-sref="containers">
<rd-widget> <rd-widget>
<rd-widget-body> <rd-widget-body>
@ -102,7 +102,7 @@
</rd-widget> </rd-widget>
</a> </a>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="col-xs-12 col-md-6">
<a ui-sref="images"> <a ui-sref="images">
<rd-widget> <rd-widget>
<rd-widget-body> <rd-widget-body>
@ -118,7 +118,7 @@
</rd-widget> </rd-widget>
</a> </a>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="col-xs-12 col-md-6">
<a ui-sref="volumes"> <a ui-sref="volumes">
<rd-widget> <rd-widget>
<rd-widget-body> <rd-widget-body>
@ -134,7 +134,7 @@
</rd-widget> </rd-widget>
</a> </a>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="col-xs-12 col-md-6">
<a ui-sref="networks"> <a ui-sref="networks">
<rd-widget> <rd-widget>
<rd-widget-body> <rd-widget-body>

22
app/components/endpoint/endpoint.html
View file

@ -14,25 +14,33 @@
<form class="form-horizontal"> <form class="form-horizontal">
<!-- name-input --> <!-- name-input -->
<div class="form-group"> <div class="form-group">
<label for="container_name" class="col-sm-2 control-label text-left">Name</label> <label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<div class="col-sm-10"> <div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="container_name" ng-model="endpoint.Name" placeholder="e.g. docker-prod01"> <input type="text" class="form-control" id="container_name" ng-model="endpoint.Name" placeholder="e.g. docker-prod01">
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<!-- endpoint-url-input --> <!-- endpoint-url-input -->
<div class="form-group"> <div class="form-group">
<label for="endpoint_url" class="col-sm-2 control-label text-left">Endpoint URL</label> <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
<div class="col-sm-10"> Endpoint URL
<portainer-tooltip position="bottom" message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
<input ng-disabled="endpointType === 'local'" type="text" class="form-control" id="endpoint_url" ng-model="endpoint.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375"> <input ng-disabled="endpointType === 'local'" type="text" class="form-control" id="endpoint_url" ng-model="endpoint.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375">
</div> </div>
</div> </div>
<!-- !endpoint-url-input --> <!-- !endpoint-url-input -->
<!-- tls-checkbox --> <!-- tls-checkbox -->
<div class="form-group" ng-if="endpointType === 'remote'"> <div class="form-group" ng-if="endpointType === 'remote'">
<label for="tls" class="col-sm-2 control-label text-left">TLS</label> <div class="col-sm-12">
<div class="col-sm-10"> <label for="tls" class="control-label text-left">
<input type="checkbox" name="tls" ng-model="endpoint.TLS"> TLS
<portainer-tooltip position="bottom" message="Enable this option if you need to specify TLS certificates to connect to the Docker endpoint."></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px;">
<input type="checkbox" ng-model="endpoint.TLS"><i></i>
</label>
</div> </div>
</div> </div>
<!-- !tls-checkbox --> <!-- !tls-checkbox -->

28
app/components/endpointInit/endpointInit.html
View file

@ -1,7 +1,7 @@
<div class="page-wrapper"> <div class="page-wrapper">
<!-- simple box --> <!-- simple box -->
<div class="container simple-box"> <div class="container simple-box">
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2"> <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
<!-- simple box logo --> <!-- simple box logo -->
<div class="row"> <div class="row">
<img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo"> <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo">
@ -14,8 +14,8 @@
<!-- init-endpoint form --> <!-- init-endpoint form -->
<form class="form-horizontal" style="margin: 20px;" enctype="multipart/form-data" method="POST"> <form class="form-horizontal" style="margin: 20px;" enctype="multipart/form-data" method="POST">
<!-- comment --> <!-- comment -->
<div class="form-group"> <div class="form-group" style="text-align: center;">
<p>Connect Portainer to a Docker engine or Swarm cluster endpoint.</p> <h4>Connect Portainer to a Docker engine or Swarm cluster endpoint</h4>
</div> </div>
<!-- !comment input --> <!-- !comment input -->
<!-- endpoin-type radio --> <!-- endpoin-type radio -->
@ -54,25 +54,33 @@
<div ng-if="formValues.endpointType === 'remote'" style="margin-top: 25px;"> <div ng-if="formValues.endpointType === 'remote'" style="margin-top: 25px;">
<!-- name-input --> <!-- name-input -->
<div class="form-group"> <div class="form-group">
<label for="container_name" class="col-sm-3 control-label text-left">Name</label> <label for="container_name" class="col-sm-4 col-lg-3 control-label text-left">Name</label>
<div class="col-sm-9"> <div class="col-sm-8 col-lg-9">
<input type="text" class="form-control" id="container_name" ng-model="formValues.Name" placeholder="e.g. docker-prod01"> <input type="text" class="form-control" id="container_name" ng-model="formValues.Name" placeholder="e.g. docker-prod01">
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<!-- endpoint-url-input --> <!-- endpoint-url-input -->
<div class="form-group"> <div class="form-group">
<label for="endpoint_url" class="col-sm-3 control-label text-left">Endpoint URL</label> <label for="endpoint_url" class="col-sm-4 col-lg-3 control-label text-left">
<div class="col-sm-9"> Endpoint URL
<portainer-tooltip position="bottom" message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."></portainer-tooltip>
</label>
<div class="col-sm-8 col-lg-9">
<input type="text" class="form-control" id="endpoint_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375"> <input type="text" class="form-control" id="endpoint_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375">
</div> </div>
</div> </div>
<!-- !endpoint-url-input --> <!-- !endpoint-url-input -->
<!-- tls-checkbox --> <!-- tls-checkbox -->
<div class="form-group"> <div class="form-group">
<label for="tls" class="col-sm-3 control-label text-left">TLS</label> <div class="col-sm-12">
<div class="col-sm-9"> <label for="tls" class="control-label text-left">
<input type="checkbox" name="tls" ng-model="formValues.TLS"> TLS
<portainer-tooltip position="bottom" message="Enable this option if you need to specify TLS certificates to connect to the Docker endpoint."></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px;">
<input type="checkbox" ng-model="formValues.TLS"><i></i>
</label>
</div> </div>
</div> </div>
<!-- !tls-checkbox --> <!-- !tls-checkbox -->

22
app/components/endpoints/endpoints.html
View file

@ -29,25 +29,33 @@
<form class="form-horizontal"> <form class="form-horizontal">
<!-- name-input --> <!-- name-input -->
<div class="form-group"> <div class="form-group">
<label for="container_name" class="col-sm-2 control-label text-left">Name</label> <label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<div class="col-sm-10"> <div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="container_name" ng-model="formValues.Name" placeholder="e.g. docker-prod01"> <input type="text" class="form-control" id="container_name" ng-model="formValues.Name" placeholder="e.g. docker-prod01">
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<!-- endpoint-url-input --> <!-- endpoint-url-input -->
<div class="form-group"> <div class="form-group">
<label for="endpoint_url" class="col-sm-2 control-label text-left">Endpoint URL</label> <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
<div class="col-sm-10"> Endpoint URL
<portainer-tooltip position="bottom" message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="endpoint_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375"> <input type="text" class="form-control" id="endpoint_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375">
</div> </div>
</div> </div>
<!-- !endpoint-url-input --> <!-- !endpoint-url-input -->
<!-- tls-checkbox --> <!-- tls-checkbox -->
<div class="form-group"> <div class="form-group">
<label for="tls" class="col-sm-2 control-label text-left">TLS</label> <div class="col-sm-12">
<div class="col-sm-10"> <label for="tls" class="control-label text-left">
<input type="checkbox" name="tls" ng-model="formValues.TLS"> TLS
<portainer-tooltip position="bottom" message="Enable this option if you need to specify TLS certificates to connect to the Docker endpoint."></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px;">
<input type="checkbox" ng-model="formValues.TLS"><i></i>
</label>
</div> </div>
</div> </div>
<!-- !tls-checkbox --> <!-- !tls-checkbox -->

13
app/components/image/image.html
View file

@ -57,12 +57,15 @@
<!-- name-and-registry-inputs --> <!-- name-and-registry-inputs -->
<div class="form-group"> <div class="form-group">
<label for="image_name" class="col-sm-1 control-label text-left">Name</label> <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-7"> <div class="col-sm-11 col-md-6">
<input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag"> <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
</div> </div>
<label for="image_registry" class="col-sm-1 control-label text-left">Registry</label> <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
<div class="col-sm-3"> Registry
<input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional"> <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
</label>
<div class="col-sm-10 col-md-3 margin-sm-top">
<input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
</div> </div>
</div> </div>
<!-- !name-and-registry-inputs --> <!-- !name-and-registry-inputs -->
@ -75,7 +78,7 @@
<!-- !tag-note --> <!-- !tag-note -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="tagImage()">Tag</button> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="tagImage()">Tag</button>
<i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i> <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div> </div>
</div> </div>

13
app/components/images/images.html
View file

@ -18,12 +18,15 @@
<!-- name-and-registry-inputs --> <!-- name-and-registry-inputs -->
<div class="form-group"> <div class="form-group">
<label for="image_name" class="col-sm-1 control-label text-left">Name</label> <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-7"> <div class="col-sm-11 col-md-6">
<input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty"> <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty">
</div> </div>
<label for="image_registry" class="col-sm-1 control-label text-left">Registry</label> <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
<div class="col-sm-3"> Registry
<input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="leave empty to use DockerHub"> <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
</label>
<div class="col-sm-10 col-md-3 margin-sm-top">
<input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
</div> </div>
</div> </div>
<!-- !name-and-registry-inputs --> <!-- !name-and-registry-inputs -->
@ -36,7 +39,7 @@
<!-- !tag-note --> <!-- !tag-note -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
<i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i> <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div> </div>
</div> </div>

4
app/components/networks/networks.html
View file

@ -37,8 +37,8 @@
<!-- !tag-note --> <!-- !tag-note -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Name" ng-click="createNetwork()">Create</button> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Name" ng-click="createNetwork()">Create</button>
<button type="button" class="btn btn-default btn-sm" ui-sref="actions.create.network">Advanced settings...</button> <button type="button" class="btn btn-primary btn-sm" ui-sref="actions.create.network">Advanced settings...</button>
<i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i> <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div> </div>
</div> </div>

4
app/components/node/node.html
View file

@ -177,8 +177,8 @@
<span class="input-group-addon fit-text-size">value</span> <span class="input-group-addon fit-text-size">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(node, label)"> <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(node, label)">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeLabel(node, $index)"> <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel(node, $index)">
<i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </button>
</span> </span>
</div> </div>

4
app/components/service/includes/constraints.html
View file

@ -38,8 +38,8 @@
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating"> <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removePlacementConstraint(service, $index)" ng-disabled="isUpdating"> <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementConstraint(service, $index)" ng-disabled="isUpdating">
<i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </button>
</span> </span>
</div> </div>

4
app/components/service/includes/containerlabels.html
View file

@ -31,8 +31,8 @@
<span class="input-group-addon fit-text-size">value</span> <span class="input-group-addon fit-text-size">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateContainerLabel(service, label)" ng-disabled="isUpdating"> <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateContainerLabel(service, label)" ng-disabled="isUpdating">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeContainerLabel(service, $index)" ng-disabled="isUpdating"> <button class="btn btn-sm btn-danger" type="button" ng-click="removeContainerLabel(service, $index)" ng-disabled="isUpdating">
<i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </button>
</span> </span>
</div> </div>

4
app/components/service/includes/environmentvariables.html
View file

@ -31,8 +31,8 @@
<span class="input-group-addon fit-text-size">value</span> <span class="input-group-addon fit-text-size">value</span>
<input type="text" class="form-control" ng-model="var.value" ng-change="updateEnvironmentVariable(service, var)" placeholder="e.g. bar" ng-disabled="isUpdating"> <input type="text" class="form-control" ng-model="var.value" ng-change="updateEnvironmentVariable(service, var)" placeholder="e.g. bar" ng-disabled="isUpdating">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeEnvironmentVariable(service, $index)" ng-disabled="isUpdating"> <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable(service, $index)" ng-disabled="isUpdating">
<i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </button>
</span> </span>
</div> </div>

4
app/components/service/includes/mounts.html
View file

@ -40,8 +40,8 @@
</td> </td>
<td> <td>
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeMount(service, $index)" ng-disabled="isUpdating"> <button class="btn btn-sm btn-danger" type="button" ng-click="removeMount(service, $index)" ng-disabled="isUpdating">
<i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </button>
</span> </span>
</td> </td>

4
app/components/service/includes/ports.html
View file

@ -44,8 +44,8 @@
</td> </td>
<td> <td>
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating"> <button class="btn btn-sm btn-danger" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating">
<i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </button>
</span> </span>
</td> </td>

4
app/components/service/includes/servicelabels.html
View file

@ -35,8 +35,8 @@
<span class="input-group-addon fit-text-size">value</span> <span class="input-group-addon fit-text-size">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)" ng-disabled="isUpdating"> <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)" ng-disabled="isUpdating">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeLabel(service, $index)" ng-disabled="isUpdating"> <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel(service, $index)" ng-disabled="isUpdating">
<i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </button>
</span> </span>
</div> </div>

2
app/components/services/services.html
View file

@ -26,7 +26,7 @@
<rd-widget-taskbar classes="col-lg-12 col-md-12 col-xs-12"> <rd-widget-taskbar classes="col-lg-12 col-md-12 col-xs-12">
<div class="pull-left"> <div class="pull-left">
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button> <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
<a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.service">Add service</a> <a class="btn btn-primary" type="button" ui-sref="actions.create.service"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add service</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" /> <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />

14
app/components/templates/templates.html
View file

@ -31,8 +31,8 @@
<div class="col-sm-5"> <div class="col-sm-5">
<input type="text" name="container_name" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)"> <input type="text" name="container_name" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)">
</div> </div>
<label for="container_network" class="col-sm-1 control-label text-right">Network</label> <label for="container_network" class="col-sm-2 col-lg-1 control-label text-right">Network</label>
<div class="col-sm-5"> <div class="col-sm-4 col-lg-5">
<select class="form-control" ng-options="net.Name for net in availableNetworks" ng-model="formValues.network"> <select class="form-control" ng-options="net.Name for net in availableNetworks" ng-model="formValues.network">
<option disabled hidden value="">Select a network</option> <option disabled hidden value="">Select a network</option>
</select> </select>
@ -113,8 +113,8 @@
<!-- protocol-actions --> <!-- protocol-actions -->
<div class="input-group col-sm-3 input-group-sm"> <div class="input-group col-sm-3 input-group-sm">
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<label class="btn btn-default" ng-model="portBinding.protocol" uib-btn-radio="'tcp'" ng-click="volume.name = ''">TCP</label> <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
<label class="btn btn-default" ng-model="portBinding.protocol" uib-btn-radio="'udp'" ng-click="volume.name = ''">UDP</label> <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
</div> </div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)"> <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
@ -183,8 +183,8 @@
<!-- read-only --> <!-- read-only -->
<div class="input-group input-group-sm col-sm-5" style="margin-left: 5px;"> <div class="input-group input-group-sm col-sm-5" style="margin-left: 5px;">
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<label class="btn btn-default" ng-model="volume.readOnly" uib-btn-radio="false">Writable</label> <label class="btn btn-primary" ng-model="volume.readOnly" uib-btn-radio="false">Writable</label>
<label class="btn btn-default" ng-model="volume.readOnly" uib-btn-radio="true">Read-only</label> <label class="btn btn-primary" ng-model="volume.readOnly" uib-btn-radio="true">Read-only</label>
</div> </div>
</div> </div>
<!-- !read-only --> <!-- !read-only -->
@ -198,7 +198,7 @@
<!-- !advanced-options --> <!-- !advanced-options -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button type="button" class="btn btn-default btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
<i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i> <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
</div> </div>
</div> </div>

20
app/components/user/user.html
View file

@ -21,18 +21,14 @@
<button class="btn btn-xs btn-danger" ng-click="deleteUser()"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this user</button> <button class="btn btn-xs btn-danger" ng-click="deleteUser()"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this user</button>
</td> </td>
</tr> </tr>
<td>Permissions</td> <td colspan="2">
<td> <label for="permissions" class="control-label text-left">
<div class="btn-group btn-group-sm"> Administrator
<label class="btn btn-default" ng-model="user.RoleId" uib-btn-radio="2" ng-change="updatePermissions()"> <portainer-tooltip position="bottom" message="Administrators have access to Portainer settings management as well as full control over all defined endpoints and their resources."></portainer-tooltip>
<i class="fa fa-user" aria-hidden="true"></i> </label>
User <label class="switch" style="margin-left: 20px;">
</label> <input type="checkbox" ng-model="formValues.Administrator" ng-change="updatePermissions()"><i></i>
<label class="btn btn-default" ng-model="user.RoleId" uib-btn-radio="1" ng-change="updatePermissions()"> </label>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
Administrator
</label>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

12
app/components/user/userController.js
View file

@ -8,7 +8,8 @@ function ($scope, $state, $stateParams, UserService, ModalService, Messages) {
$scope.formValues = { $scope.formValues = {
newPassword: '', newPassword: '',
confirmPassword: '' confirmPassword: '',
Administrator: false,
}; };
$scope.deleteUser = function() { $scope.deleteUser = function() {
@ -23,9 +24,10 @@ function ($scope, $state, $stateParams, UserService, ModalService, Messages) {
$scope.updatePermissions = function() { $scope.updatePermissions = function() {
$('#loadingViewSpinner').show(); $('#loadingViewSpinner').show();
UserService.updateUser($scope.user.Id, undefined, $scope.user.RoleId) var role = $scope.formValues.Administrator ? 1 : 2;
UserService.updateUser($scope.user.Id, undefined, role)
.then(function success(data) { .then(function success(data) {
var newRole = $scope.user.RoleId === 1 ? 'administrator' : 'user'; var newRole = role === 1 ? 'administrator' : 'user';
Messages.send('Permissions successfully updated', $scope.user.Username + ' is now ' + newRole); Messages.send('Permissions successfully updated', $scope.user.Username + ' is now ' + newRole);
$state.reload(); $state.reload();
}) })
@ -71,7 +73,9 @@ function ($scope, $state, $stateParams, UserService, ModalService, Messages) {
$('#loadingViewSpinner').show(); $('#loadingViewSpinner').show();
UserService.user($stateParams.id) UserService.user($stateParams.id)
.then(function success(data) { .then(function success(data) {
$scope.user = new UserViewModel(data); var user = new UserViewModel(data);
$scope.user = user;
$scope.formValues.Administrator = user.RoleId === 1 ? true : false;
}) })
.catch(function error(err) { .catch(function error(err) {
Messages.error("Failure", err, 'Unable to retrieve user information'); Messages.error("Failure", err, 'Unable to retrieve user information');

25
app/components/users/users.html
View file

@ -51,21 +51,22 @@
<!-- !confirm-password-input --> <!-- !confirm-password-input -->
<!-- role-checkbox --> <!-- role-checkbox -->
<div class="form-group"> <div class="form-group">
<label for="permissions" class="col-sm-2 control-label text-left">Permissions</label> <div class="col-sm-12">
<div class="col-sm-8"> <label for="permissions" class="control-label text-left">
<div class="btn-group btn-group-sm"> Administrator
<label class="btn btn-default" ng-model="formValues.Role" uib-btn-radio="2"> <portainer-tooltip position="bottom" message="Administrators have access to Portainer settings management as well as full control over all defined endpoints and their resources."></portainer-tooltip>
<i class="fa fa-user" aria-hidden="true"></i> </label>
User <label class="switch" style="margin-left: 20px;">
</label> <input type="checkbox" ng-model="formValues.Administrator"><i></i>
<label class="btn btn-default" ng-model="formValues.Role" uib-btn-radio="1"> </label>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
Administrator
</label>
</div>
</div> </div>
</div> </div>
<!-- !role-checkbox --> <!-- !role-checkbox -->
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted">Note: non-administrator users do not have access to any endpoint by default. Head over the <a ui-sref="endpoints">endpoints view</a> to manage their accesses.</span>
</div>
</div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!state.validUsername || formValues.Username === '' || formValues.Password === '' || formValues.Password !== formValues.ConfirmPassword" ng-click="addUser()"><i class="fa fa-user-plus" aria-hidden="true"></i> Add user</button> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!state.validUsername || formValues.Username === '' || formValues.Password === '' || formValues.Password !== formValues.ConfirmPassword" ng-click="addUser()"><i class="fa fa-user-plus" aria-hidden="true"></i> Add user</button>

4
app/components/users/usersController.js
View file

@ -14,7 +14,7 @@ function ($scope, $state, UserService, ModalService, Messages, Pagination) {
Username: '', Username: '',
Password: '', Password: '',
ConfirmPassword: '', ConfirmPassword: '',
Role: 2, Administrator: false,
}; };
$scope.order = function(sortType) { $scope.order = function(sortType) {
@ -59,7 +59,7 @@ function ($scope, $state, UserService, ModalService, Messages, Pagination) {
$scope.state.userCreationError = ''; $scope.state.userCreationError = '';
var username = $scope.formValues.Username; var username = $scope.formValues.Username;
var password = $scope.formValues.Password; var password = $scope.formValues.Password;
var role = $scope.formValues.Role; var role = $scope.formValues.Administrator ? 1 : 2;
UserService.createUser(username, password, role) UserService.createUser(username, password, role)
.then(function success(data) { .then(function success(data) {
Messages.send("User created", username); Messages.send("User created", username);

2
app/components/volumes/volumes.html
View file

@ -25,7 +25,7 @@
<rd-widget-taskbar classes="col-lg-12"> <rd-widget-taskbar classes="col-lg-12">
<div class="pull-left"> <div class="pull-left">
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button> <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
<a class="btn btn-default" type="button" ui-sref="actions.create.volume">Add volume</a> <a class="btn btn-primary" type="button" ui-sref="actions.create.volume"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add volume</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" /> <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />

104
assets/css/app.css
View file

@ -57,9 +57,16 @@ html, body, #content-wrapper, .page-content, #view {
margin-left: 5px; margin-left: 5px;
} }
.form-section-title {
border-bottom: 1px solid #777;
margin-top: 5px;
margin-bottom: 15px;
color: #777;
}
.form-horizontal .control-label.text-left{ .form-horizontal .control-label.text-left{
text-align: left; text-align: left;
font-size: 0.9em; font-size: 0.9em;
} }
input[type="checkbox"] { input[type="checkbox"] {
@ -301,39 +308,76 @@ ul.sidebar .sidebar-list a.active {
background: #2d3e63; background: #2d3e63;
} }
@media(min-width: 768px) and (max-width: 992px) {
.margin-sm-top {
margin-top: 5px;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.pull-sm-left { .pull-sm-left {
float: left !important; float: left !important;
} }
.pull-sm-right { .pull-sm-right {
float: right !important; float: right !important;
} }
.pull-sm-none { .pull-sm-none {
float: none !important; float: none !important;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.pull-md-left { .pull-md-left {
float: left !important; float: left !important;
} }
.pull-md-right { .pull-md-right {
float: right !important; float: right !important;
} }
.pull-md-none { .pull-md-none {
float: none !important; float: none !important;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.pull-lg-left { .pull-lg-left {
float: left !important; float: left !important;
} }
.pull-lg-right { .pull-lg-right {
float: right !important; float: right !important;
} }
.pull-lg-none { .pull-lg-none {
float: none !important; float: none !important;
} }
} }
.pull-none { .pull-none {
float: none !important; float: none !important;
}
.switch input {
display: none;
}
.switch i {
display: inline-block;
vertical-align: middle;
cursor: pointer;
padding-right: 24px;
transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
border-radius: 24px;
box-shadow: inset 0 0 1px 1px rgba(0,0,0,.5);
}
.switch i:before {
display: block;
content: '';
width: 24px;
height: 24px;
border-radius: 24px;
background: white;
box-shadow: 0 0 1px 1px rgba(0,0,0,.5);
}
.switch :checked + i {
padding-right: 0;
padding-left: 24px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #337ab7;
box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #337ab7;
} }