refactor(app): introduce new project structure for the frontend (#1623)

app/docker/views/services/create/createServiceController.js

@@ -0,0 +1,523 @@
+angular.module('portainer.docker')
+.controller('CreateServiceController', ['$q', '$scope', '$state', '$timeout', 'Service', 'ServiceHelper', 'ConfigService', 'ConfigHelper', 'SecretHelper', 'SecretService', 'VolumeService', 'NetworkService', 'ImageHelper', 'LabelHelper', 'Authentication', 'ResourceControlService', 'Notifications', 'FormValidator', 'PluginService', 'RegistryService', 'HttpRequestHelper', 'NodeService', 'SettingsService',
+function ($q, $scope, $state, $timeout, Service, ServiceHelper, ConfigService, ConfigHelper, SecretHelper, SecretService, VolumeService, NetworkService, ImageHelper, LabelHelper, Authentication, ResourceControlService, Notifications, FormValidator, PluginService, RegistryService, HttpRequestHelper, NodeService, SettingsService) {
+
+  $scope.formValues = {
+    Name: '',
+    Image: '',
+    Registry: {},
+    Mode: 'replicated',
+    Replicas: 1,
+    Command: '',
+    EntryPoint: '',
+    WorkingDir: '',
+    User: '',
+    Env: [],
+    Labels: [],
+    ContainerLabels: [],
+    Volumes: [],
+    Network: '',
+    ExtraNetworks: [],
+    HostsEntries: [],
+    Ports: [],
+    Parallelism: 1,
+    PlacementConstraints: [],
+    PlacementPreferences: [],
+    UpdateDelay: '0s',
+    UpdateOrder: 'stop-first',
+    FailureAction: 'pause',
+    Secrets: [],
+    Configs: [],
+    AccessControlData: new AccessControlFormData(),
+    CpuLimit: 0,
+    CpuReservation: 0,
+    MemoryLimit: 0,
+    MemoryReservation: 0,
+    MemoryLimitUnit: 'MB',
+    MemoryReservationUnit: 'MB',
+    RestartCondition: 'any',
+    RestartDelay: '5s',
+    RestartMaxAttempts: 0,
+    RestartWindow: '0s',
+    LogDriverName: '',
+    LogDriverOpts: []
+  };
+
+  $scope.state = {
+    formValidationError: '',
+    actionInProgress: false
+  };
+
+  $scope.refreshSlider = function () {
+    $timeout(function () {
+      $scope.$broadcast('rzSliderForceRender');
+    });
+  };
+
+  $scope.addPortBinding = function() {
+    $scope.formValues.Ports.push({ PublishedPort: '', TargetPort: '', Protocol: 'tcp', PublishMode: 'ingress' });
+  };
+
+  $scope.removePortBinding = function(index) {
+    $scope.formValues.Ports.splice(index, 1);
+  };
+
+  $scope.addExtraNetwork = function() {
+    $scope.formValues.ExtraNetworks.push({ Name: '' });
+  };
+
+  $scope.removeExtraNetwork = function(index) {
+    $scope.formValues.ExtraNetworks.splice(index, 1);
+  };
+
+  $scope.addHostsEntry = function() {
+    $scope.formValues.HostsEntries.push({});
+  };
+
+  $scope.removeHostsEntry = function(index) {
+    $scope.formValues.HostsEntries.splice(index, 1);
+  };
+
+  $scope.addVolume = function() {
+    $scope.formValues.Volumes.push({ Source: '', Target: '', ReadOnly: false, Type: 'volume' });
+  };
+
+  $scope.removeVolume = function(index) {
+    $scope.formValues.Volumes.splice(index, 1);
+  };
+
+  $scope.addConfig = function() {
+    $scope.formValues.Configs.push({});
+  };
+
+  $scope.removeConfig = function(index) {
+    $scope.formValues.Configs.splice(index, 1);
+  };
+
+  $scope.addSecret = function() {
+    $scope.formValues.Secrets.push({ overrideTarget: false });
+  };
+
+  $scope.removeSecret = function(index) {
+    $scope.formValues.Secrets.splice(index, 1);
+  };
+
+  $scope.addEnvironmentVariable = function() {
+    $scope.formValues.Env.push({ name: '', value: ''});
+  };
+
+  $scope.removeEnvironmentVariable = function(index) {
+    $scope.formValues.Env.splice(index, 1);
+  };
+
+  $scope.addPlacementConstraint = function() {
+    $scope.formValues.PlacementConstraints.push({ key: '', operator: '==', value: '' });
+  };
+
+  $scope.removePlacementConstraint = function(index) {
+    $scope.formValues.PlacementConstraints.splice(index, 1);
+  };
+
+  $scope.addPlacementPreference = function() {
+    $scope.formValues.PlacementPreferences.push({ strategy: 'spread', value: '' });
+  };
+
+  $scope.removePlacementPreference = function(index) {
+    $scope.formValues.PlacementPreferences.splice(index, 1);
+  };
+
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ key: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
+  $scope.addContainerLabel = function() {
+    $scope.formValues.ContainerLabels.push({ key: '', value: ''});
+  };
+
+  $scope.removeContainerLabel = function(index) {
+    $scope.formValues.ContainerLabels.splice(index, 1);
+  };
+
+  $scope.addLogDriverOpt = function(value) {
+    $scope.formValues.LogDriverOpts.push({ name: '', value: ''});
+  };
+
+  $scope.removeLogDriverOpt = function(index) {
+    $scope.formValues.LogDriverOpts.splice(index, 1);
+  };
+
+  function prepareImageConfig(config, input) {
+    var imageConfig = ImageHelper.createImageConfigForContainer(input.Image, input.Registry.URL);
+    config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage + ':' + imageConfig.tag;
+  }
+
+  function preparePortsConfig(config, input) {
+    var ports = [];
+    input.Ports.forEach(function (binding) {
+      var port = {
+        Protocol: binding.Protocol,
+        PublishMode: binding.PublishMode
+      };
+      if (binding.TargetPort) {
+        port.TargetPort = +binding.TargetPort;
+        if (binding.PublishedPort) {
+          port.PublishedPort = +binding.PublishedPort;
+        }
+        ports.push(port);
+      }
+    });
+    config.EndpointSpec.Ports = ports;
+  }
+
+  function prepareSchedulingConfig(config, input) {
+    if (input.Mode === 'replicated') {
+      config.Mode.Replicated = {
+        Replicas: input.Replicas
+      };
+    } else {
+      config.Mode.Global = {};
+    }
+  }
+
+  function commandToArray(cmd) {
+    var tokens = [].concat.apply([], cmd.split('\'').map(function(v,i) {
+       return i%2 ? v : v.split(' ');
+    })).filter(Boolean);
+    return tokens;
+  }
+
+  function prepareCommandConfig(config, input) {
+    if (input.EntryPoint) {
+      config.TaskTemplate.ContainerSpec.Command = commandToArray(input.EntryPoint);
+    }
+    if (input.Command) {
+      config.TaskTemplate.ContainerSpec.Args = commandToArray(input.Command);
+    }
+    if (input.User) {
+      config.TaskTemplate.ContainerSpec.User = input.User;
+    }
+    if (input.WorkingDir) {
+      config.TaskTemplate.ContainerSpec.Dir = input.WorkingDir;
+    }
+  }
+
+  function prepareEnvConfig(config, input) {
+    var env = [];
+    input.Env.forEach(function (v) {
+      if (v.name) {
+        env.push(v.name + '=' + v.value);
+      }
+    });
+    config.TaskTemplate.ContainerSpec.Env = env;
+  }
+
+  function prepareLabelsConfig(config, input) {
+    config.Labels = LabelHelper.fromKeyValueToLabelHash(input.Labels);
+    config.TaskTemplate.ContainerSpec.Labels = LabelHelper.fromKeyValueToLabelHash(input.ContainerLabels);
+  }
+
+  function createMountObjectFromVolume(volumeObject, target, readonly) {
+    return {
+      Target: target,
+      Source: volumeObject.Id,
+      Type: 'volume',
+      ReadOnly: readonly,
+      VolumeOptions: {
+        Labels: volumeObject.Labels,
+        DriverConfig: {
+          Name: volumeObject.Driver,
+          Options: volumeObject.Options
+        }
+      }
+    };
+  }
+
+  function prepareVolumes(config, input) {
+    input.Volumes.forEach(function (volume) {
+      if (volume.Source && volume.Target) {
+        if (volume.Type !== 'volume') {
+          config.TaskTemplate.ContainerSpec.Mounts.push(volume);
+        } else {
+          var volumeObject = volume.Source;
+          var mount = createMountObjectFromVolume(volumeObject, volume.Target, volume.ReadOnly);
+          config.TaskTemplate.ContainerSpec.Mounts.push(mount);
+        }
+      }
+    });
+  }
+
+  function prepareNetworks(config, input) {
+    var networks = [];
+    if (input.Network) {
+      networks.push({ Target: input.Network });
+    }
+    input.ExtraNetworks.forEach(function (network) {
+      networks.push({ Target: network.Name });
+    });
+    config.Networks = _.uniqWith(networks, _.isEqual);
+  }
+
+  function prepareHostsEntries(config, input) {
+    var hostsEntries = [];
+    if (input.HostsEntries) {
+      input.HostsEntries.forEach(function (host_ip) {
+        if (host_ip.value && host_ip.value.indexOf(':') && host_ip.value.split(':').length === 2) {
+          var keyVal = host_ip.value.split(':');
+          // Hosts file format, IP_address canonical_hostname
+          hostsEntries.push(keyVal[1] + ' ' + keyVal[0]);
+        }
+      });
+      if (hostsEntries.length > 0) {
+        config.TaskTemplate.ContainerSpec.Hosts = hostsEntries;
+      }
+    }
+  }
+
+  function prepareUpdateConfig(config, input) {
+    config.UpdateConfig = {
+      Parallelism: input.Parallelism || 0,
+      Delay: ServiceHelper.translateHumanDurationToNanos(input.UpdateDelay) || 0,
+      FailureAction: input.FailureAction,
+      Order: input.UpdateOrder
+    };
+  }
+
+  function prepareRestartPolicy(config, input) {
+    config.TaskTemplate.RestartPolicy = {
+      Condition: input.RestartCondition || 'any',
+      Delay: ServiceHelper.translateHumanDurationToNanos(input.RestartDelay) || 5000000000,
+      MaxAttempts: input.RestartMaxAttempts || 0,
+      Window: ServiceHelper.translateHumanDurationToNanos(input.RestartWindow) || 0
+    };
+  }
+
+  function preparePlacementConfig(config, input) {
+    config.TaskTemplate.Placement.Constraints = ServiceHelper.translateKeyValueToPlacementConstraints(input.PlacementConstraints);
+    config.TaskTemplate.Placement.Preferences = ServiceHelper.translateKeyValueToPlacementPreferences(input.PlacementPreferences);
+  }
+
+  function prepareConfigConfig(config, input) {
+    if (input.Configs) {
+      var configs = [];
+      angular.forEach(input.Configs, function(config) {
+        if (config.model) {
+          var s = ConfigHelper.configConfig(config.model);
+          s.File.Name = config.FileName || s.File.Name;
+          configs.push(s);
+        }
+      });
+      config.TaskTemplate.ContainerSpec.Configs = configs;
+    }
+  }
+
+  function prepareSecretConfig(config, input) {
+    if (input.Secrets) {
+      var secrets = [];
+      angular.forEach(input.Secrets, function(secret) {
+        if (secret.model) {
+          var s = SecretHelper.secretConfig(secret.model);
+          s.File.Name = s.SecretName;
+          if (secret.overrideTarget && secret.target && secret.target !== '') {
+            s.File.Name = secret.target;
+          }
+          secrets.push(s);
+        }
+      });
+      config.TaskTemplate.ContainerSpec.Secrets = secrets;
+    }
+  }
+
+  function prepareResourcesCpuConfig(config, input) {
+    // CPU Limit
+    if (input.CpuLimit > 0) {
+      config.TaskTemplate.Resources.Limits.NanoCPUs = input.CpuLimit * 1000000000;
+    }
+    // CPU Reservation
+    if (input.CpuReservation > 0) {
+      config.TaskTemplate.Resources.Reservations.NanoCPUs = input.CpuReservation * 1000000000;
+    }
+  }
+
+  function prepareResourcesMemoryConfig(config, input) {
+    // Memory Limit - Round to 0.125
+    var memoryLimit = (Math.round(input.MemoryLimit * 8) / 8).toFixed(3);
+    memoryLimit *= 1024 * 1024;
+    if (input.MemoryLimitUnit === 'GB') {
+      memoryLimit *= 1024;
+    }
+    if (memoryLimit > 0) {
+      config.TaskTemplate.Resources.Limits.MemoryBytes = memoryLimit;
+    }
+    // Memory Resevation - Round to 0.125
+    var memoryReservation = (Math.round(input.MemoryReservation * 8) / 8).toFixed(3);
+    memoryReservation *= 1024 * 1024;
+    if (input.MemoryReservationUnit === 'GB') {
+      memoryReservation *= 1024;
+    }
+    if (memoryReservation > 0) {
+      config.TaskTemplate.Resources.Reservations.MemoryBytes = memoryReservation;
+    }
+  }
+
+  function prepareLogDriverConfig(config, input) {
+    var logOpts = {};
+    if (input.LogDriverName) {
+      config.TaskTemplate.LogDriver = { Name: input.LogDriverName };
+      if (input.LogDriverName !== 'none') {
+        input.LogDriverOpts.forEach(function (opt) {
+          if (opt.name) {
+            logOpts[opt.name] = opt.value;
+          }
+        });
+        if (Object.keys(logOpts).length !== 0 && logOpts.constructor === Object) {
+          config.TaskTemplate.LogDriver.Options = logOpts;
+        }
+      }
+    }
+  }
+
+  function prepareConfiguration() {
+    var input = $scope.formValues;
+    var config = {
+      Name: input.Name,
+      TaskTemplate: {
+        ContainerSpec: {
+          Mounts: []
+        },
+        Placement: {},
+        Resources: {
+          Limits: {},
+          Reservations: {}
+        }
+      },
+      Mode: {},
+      EndpointSpec: {}
+    };
+    prepareSchedulingConfig(config, input);
+    prepareImageConfig(config, input);
+    preparePortsConfig(config, input);
+    prepareCommandConfig(config, input);
+    prepareEnvConfig(config, input);
+    prepareLabelsConfig(config, input);
+    prepareVolumes(config, input);
+    prepareNetworks(config, input);
+    prepareHostsEntries(config, input);
+    prepareUpdateConfig(config, input);
+    prepareConfigConfig(config, input);
+    prepareSecretConfig(config, input);
+    preparePlacementConfig(config, input);
+    prepareResourcesCpuConfig(config, input);
+    prepareResourcesMemoryConfig(config, input);
+    prepareRestartPolicy(config, input);
+    prepareLogDriverConfig(config, input);
+    return config;
+  }
+
+  function createNewService(config, accessControlData) {
+
+    var registry = $scope.formValues.Registry;
+    var authenticationDetails = registry.Authentication ? RegistryService.encodedCredentials(registry) : '';
+    HttpRequestHelper.setRegistryAuthenticationHeader(authenticationDetails);
+    Service.create(config).$promise
+    .then(function success(data) {
+      var serviceIdentifier = data.ID;
+      var userId = Authentication.getUserDetails().ID;
+      return ResourceControlService.applyResourceControl('service', serviceIdentifier, userId, accessControlData, []);
+    })
+    .then(function success() {
+      Notifications.success('Service successfully created');
+      $state.go('docker.services', {}, {reload: true});
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to create service');
+    })
+    .finally(function final() {
+      $scope.state.actionInProgress = false;
+    });
+  }
+
+  function validateForm(accessControlData, isAdmin) {
+    $scope.state.formValidationError = '';
+    var error = '';
+    error = FormValidator.validateAccessControl(accessControlData, isAdmin);
+
+    if (error) {
+      $scope.state.formValidationError = error;
+      return false;
+    }
+    return true;
+  }
+
+  $scope.create = function createService() {
+
+    var accessControlData = $scope.formValues.AccessControlData;
+    var userDetails = Authentication.getUserDetails();
+    var isAdmin = userDetails.role === 1;
+
+    if (!validateForm(accessControlData, isAdmin)) {
+      return;
+    }
+
+    $scope.state.actionInProgress = true;
+    var config = prepareConfiguration();
+    createNewService(config, accessControlData);
+  };
+
+  function initSlidersMaxValuesBasedOnNodeData(nodes) {
+    var maxCpus = 0;
+    var maxMemory = 0;
+    for (var n in nodes) {
+      if (nodes[n].CPUs && nodes[n].CPUs > maxCpus) {
+        maxCpus = nodes[n].CPUs;
+      }
+      if (nodes[n].Memory && nodes[n].Memory > maxMemory) {
+        maxMemory = nodes[n].Memory;
+      }
+    }
+    if (maxCpus > 0) {
+      $scope.state.sliderMaxCpu = maxCpus / 1000000000;
+    } else {
+      $scope.state.sliderMaxCpu = 32;
+    }
+    if (maxMemory > 0) {
+      $scope.state.sliderMaxMemory = Math.floor(maxMemory / 1000 / 1000);
+    } else {
+      $scope.state.sliderMaxMemory = 32768;
+    }
+  }
+
+  function initView() {
+    var apiVersion = $scope.applicationState.endpoint.apiVersion;
+    var provider = $scope.applicationState.endpoint.mode.provider;
+
+    $q.all({
+      volumes: VolumeService.volumes(),
+      networks: NetworkService.networks(true, true, false, false),
+      secrets: apiVersion >= 1.25 ? SecretService.secrets() : [],
+      configs: apiVersion >= 1.30 ? ConfigService.configs() : [],
+      nodes: NodeService.nodes(),
+      settings: SettingsService.publicSettings(),
+      availableLoggingDrivers: PluginService.loggingPlugins(apiVersion < 1.25)
+    })
+    .then(function success(data) {
+      $scope.availableVolumes = data.volumes;
+      $scope.availableNetworks = data.networks;
+      $scope.availableSecrets = data.secrets;
+      $scope.availableConfigs = data.configs;
+      $scope.availableLoggingDrivers = data.availableLoggingDrivers;
+      initSlidersMaxValuesBasedOnNodeData(data.nodes);
+      $scope.allowBindMounts = data.settings.AllowBindMountsForRegularUsers;
+      var userDetails = Authentication.getUserDetails();
+      $scope.isAdmin = userDetails.role === 1;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to initialize view');
+    });
+  }
+
+  initView();
+}]);

app/docker/views/services/create/createservice.html

@@ -0,0 +1,469 @@
+<rd-header>
+  <rd-header-title title="Create service"></rd-header-title>
+  <rd-header-content>
+    <a ui-sref="docker.services">Services</a> &gt; Add service
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal" autocomplete="off">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="service_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <div class="col-sm-12 form-section-title">
+            Image configuration
+          </div>
+          <!-- image-and-registry -->
+          <div class="form-group">
+            <por-image-registry image="formValues.Image" registry="formValues.Registry" auto-complete="true"></por-image-registry>
+          </div>
+          <!-- !image-and-registry -->
+          <div class="col-sm-12 form-section-title">
+            Scheduling
+          </div>
+          <!-- scheduling-mode -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label class="control-label text-left">
+                Scheduling mode
+              </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 class="form-group form-inline" ng-if="formValues.Mode === 'replicated'">
+            <div class="col-sm-12">
+              <label class="control-label text-left">
+                Replicas
+              </label>
+              <input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3" style="margin-left: 20px;">
+            </div>
+          </div>
+          <!-- !scheduling-mode -->
+          <div class="col-sm-12 form-section-title">
+            Ports configuration
+          </div>
+          <!-- port-mapping -->
+          <div class="form-group">
+            <div class="col-sm-12" style="margin-top: 5px;">
+              <label class="control-label text-left">Port mapping</label>
+              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPortBinding()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
+              </span>
+            </div>
+            <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+              <div ng-repeat="portBinding in formValues.Ports" style="margin-top: 2px;">
+                <!-- host-port -->
+                <div class="input-group col-sm-3 input-group-sm">
+                  <span class="input-group-addon">host</span>
+                  <input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
+                </div>
+                <!-- !host-port -->
+                <span style="margin: 0 10px 0 10px;">
+                  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
+                </span>
+                <!-- container-port -->
+                <div class="input-group col-sm-3 input-group-sm">
+                  <span class="input-group-addon">container</span>
+                  <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80">
+                </div>
+                <!-- !container-port -->
+                <!-- protocol-actions -->
+                <div class="input-group col-sm-5 input-group-sm">
+                  <div class="btn-group btn-group-sm">
+                    <label class="btn btn-primary" ng-model="portBinding.Protocol" uib-btn-radio="'tcp'">TCP</label>
+                    <label class="btn btn-primary" ng-model="portBinding.Protocol" uib-btn-radio="'udp'">UDP</label>
+                  </div>
+                  <div class="btn-group btn-group-sm">
+                    <label class="btn btn-primary" ng-model="portBinding.PublishMode" uib-btn-radio="'ingress'">Ingress</label>
+                    <label class="btn btn-primary" ng-model="portBinding.PublishMode" uib-btn-radio="'host'">Host</label>
+                  </div>
+                  <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
+                    <i class="fa fa-trash" aria-hidden="true"></i>
+                  </button>
+                </div>
+                <!-- !protocol-actions -->
+              </div>
+            </div>
+            <!-- !port-mapping-input-list -->
+          </div>
+          <!-- !port-mapping -->
+          <!-- access-control -->
+          <por-access-control-form form-data="formValues.AccessControlData" ng-if="applicationState.application.authentication"></por-access-control-form>
+          <!-- !access-control -->
+          <!-- actions -->
+          <div class="col-sm-12 form-section-title">
+            Actions
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.Image" ng-click="create()" button-spinner="state.actionInProgress">
+                <span ng-hide="state.actionInProgress">Create the service</span>
+                <span ng-show="state.actionInProgress">Creating service...</span>
+              </button>
+              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
+            </div>
+          </div>
+          <!-- !actions -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <ul class="nav nav-pills nav-justified">
+          <li class="active interactive"><a data-target="#command" data-toggle="tab">Command & Logging</a></li>
+          <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
+          <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
+          <li class="interactive"><a data-target="#update-config" data-toggle="tab">Update config & Restart</a></li>
+          <li class="interactive" ng-if="applicationState.endpoint.apiVersion >= 1.25"><a data-target="#secrets" data-toggle="tab">Secrets</a></li>
+          <li class="interactive"><a data-target="#configs" data-toggle="tab" ng-if="applicationState.endpoint.apiVersion >= 1.30">Configs</a></li>
+          <li class="interactive"><a data-target="#resources-placement" data-toggle="tab" ng-click="refreshSlider()">Resources & Placement</a></li>
+        </ul>
+        <!-- tab-content -->
+        <div class="tab-content">
+          <!-- tab-command -->
+          <div class="tab-pane active" id="command">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <div class="col-sm-12 form-section-title">
+                Command
+              </div>                    
+              <!-- command-input -->
+              <div class="form-group">
+                <label for="service_command" class="col-sm-2 col-lg-1 control-label text-left">Command</label>
+                <div class="col-sm-9">
+                  <input type="text" class="form-control" ng-model="formValues.Command" id="service_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
+                </div>
+              </div>
+              <!-- !command-input -->
+              <!-- entrypoint-input -->
+              <div class="form-group">
+                <label for="service_entrypoint" class="col-sm-2 col-lg-1 control-label text-left">Entrypoint</label>
+                <div class="col-sm-9">
+                  <input type="text" class="form-control" ng-model="formValues.EntryPoint" id="service_entrypoint" placeholder="e.g. /bin/sh -c">
+                </div>
+              </div>
+              <!-- !entrypoint-input -->
+              <!-- workdir-user-input -->
+              <div class="form-group">
+                <label for="service_workingdir" class="col-sm-2 col-lg-1 control-label text-left">Working Dir</label>
+                <div class="col-sm-4">
+                  <input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp">
+                </div>
+                <label for="service_user" class="col-sm-1 control-label text-left">User</label>
+                <div class="col-sm-4">
+                  <input type="text" class="form-control" ng-model="formValues.User" id="service_user" placeholder="e.g. nginx">
+                </div>
+              </div>
+              <!-- !workdir-user-input -->
+              <!-- 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 formValues.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 -->
+
+              <div class="col-sm-12 form-section-title">
+                Logging
+              </div>
+              <!-- logging-driver -->              
+              <div class="form-group">
+                <label for="log-driver" class="col-sm-2 col-lg-1 control-label text-left">Driver</label>
+                <div class="col-sm-4">
+                  <select class="form-control" ng-model="formValues.LogDriverName" id="log-driver">
+                    <option selected value="">Default logging driver</option>                    
+                    <option ng-repeat="driver in availableLoggingDrivers" ng-value="driver">{{ driver }}</option>
+                    <option value="none">none</option>
+                  </select>
+                </div>
+                <div class="col-sm-5">
+                  <p class="small text-muted">
+                    Logging driver for service that will override the default docker daemon driver. Select Default logging driver if you don't want to override it. Supported logging drivers can be found <a href="https://docs.docker.com/engine/admin/logging/overview/#supported-logging-drivers" target="_blank">in the Docker documentation</a>.
+                  </p>
+                </div>
+              </div>
+              <!-- !logging-driver -->
+              <!-- logging-opts -->
+              <div class="form-group">
+                <div class="col-sm-12" style="margin-top: 5px;">
+                  <label class="control-label text-left">
+                    Options
+                    <portainer-tooltip position="top" message="Add button is disabled unless a driver other than none or default is selected. Options are specific to the selected driver, refer to the driver documentation."></portainer-tooltip>
+                  </label>
+                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="!formValues.LogDriverName || formValues.LogDriverName === 'none' || addLogDriverOpt(formValues.LogDriverName)">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+                  </span>
+                </div>
+                <!-- logging-opts-input-list -->
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="opt in formValues.LogDriverOpts" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">option</span>
+                      <input type="text" class="form-control" ng-model="opt.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="opt.value" placeholder="e.g. bar">
+                    </div>
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLogDriverOpt($index)">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+                <!-- logging-opts-input-list -->
+              </div>              
+              <!-- !logging-opts -->
+                                        
+                  
+            </form>
+          </div>
+          <!-- !tab-command -->
+          <!-- tab-volume -->
+          <div class="tab-pane" id="volumes">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- volumes -->
+              <div class="form-group">
+                <div class="col-sm-12" style="margin-top: 5px;">
+                  <label class="control-label text-left">Volume mapping</label>
+                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addVolume()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
+                  </span>
+                </div>
+                <!-- volumes-input-list -->
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="volume in formValues.Volumes">
+                    <div class="col-sm-12" style="margin-top: 10px;">
+                      <!-- volume-line1 -->
+                      <div class="col-sm-12 form-inline">
+                        <!-- container-path -->
+                        <div class="input-group input-group-sm col-sm-6">
+                          <span class="input-group-addon">container</span>
+                          <input type="text" class="form-control" ng-model="volume.Target" 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" ng-if="isAdmin || allowBindMounts">
+                            <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.Id = ''">Bind</label>
+                          </div>
+                          <button class="btn btn-sm btn-danger" type="button" ng-click="removeVolume($index)">
+                            <i class="fa fa-trash" aria-hidden="true"></i>
+                          </button>
+                        </div>
+                        <!-- !volume-type -->
+                      </div>
+                      <!-- !volume-line1 -->
+                      <!-- volume-line2 -->
+                      <div class="col-sm-12 form-inline" style="margin-top: 5px;">
+                        <i class="fa fa-long-arrow-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.Source" ng-options="vol.Id|truncate:30 for vol in availableVolumes">
+                            <option selected disabled hidden value="">Select a volume</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.Source" 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>
+                <!-- !volumes-input-list -->
+              </div>
+              <!-- !volumes -->
+            </form>
+          </div>
+          <!-- !tab-volume -->
+          <!-- tab-network -->
+          <div class="tab-pane" id="network">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- network-input -->
+              <div class="form-group">
+                <label for="container_network" class="col-sm-2 col-lg-1 control-label text-left">Network</label>
+                <div class="col-sm-9">
+                  <select class="form-control" ng-model="formValues.Network">
+                    <option selected disabled hidden value="">Select a network</option>
+                    <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
+                  </select>
+                </div>
+                <div class="col-sm-2"></div>
+              </div>
+              <!-- !network-input -->
+              <!-- extra-networks -->
+              <div class="form-group">
+                <div class="col-sm-12" style="margin-top: 5px;">
+                  <label class="control-label text-left">Extra networks</label>
+                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addExtraNetwork()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add extra network
+                  </span>
+                </div>
+                <!-- network-input-list -->
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="network in formValues.ExtraNetworks" style="margin-top: 2px;">
+                    <select class="form-control" ng-model="network.Name">
+                      <option selected disabled hidden value="">Select a network</option>
+                      <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
+                    </select>
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeExtraNetwork($index)">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+                <!-- !network-input-list -->
+              </div>
+              <!-- !extra-networks -->
+              <!-- extra-hosts-variables -->
+              <div class="form-group" ng-if="applicationState.endpoint.apiVersion >= 1.25">
+                <div class="col-sm-12" style="margin-top: 5px;">
+                  <label class="control-label text-left">Hosts file entries</label>
+                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addHostsEntry()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
+                  </span>
+                </div>
+                <!-- hosts-input-list -->
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="variable in formValues.HostsEntries" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP">
+                    </div>
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeHostsEntry($index)">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+                <!-- !hosts-input-list -->
+              </div>
+              <!-- !extra-hosts-variables -->
+            </form>
+          </div>
+          <!-- !tab-network -->
+          <!-- tab-labels -->
+          <div class="tab-pane" id="labels">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- labels -->
+              <div class="form-group">
+                <div class="col-sm-12" style="margin-top: 5px;">
+                  <label class="control-label text-left">Service labels</label>
+                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add service label
+                  </span>
+                </div>
+                <!-- labels-input-list -->
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">name</span>
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                    </div>
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+                <!-- !labels-input-list -->
+              </div>
+              <!-- !labels-->
+              <!-- container-labels -->
+              <div class="form-group">
+                <div class="col-sm-12" style="margin-top: 5px;">
+                  <label class="control-label text-left">Container labels</label>
+                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addContainerLabel()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add container label
+                  </span>
+                </div>
+                <!-- container-labels-input-list -->
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">name</span>
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                    </div>
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeContainerLabel($index)">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+                <!-- !container-labels-input-list -->
+              </div>
+              <!-- !container-labels-->
+            </form>
+          </div>
+          <!-- !tab-labels -->
+          <!-- tab-update-config -->
+          <div class="tab-pane" id="update-config" ng-include="'app/docker/views/services/create/includes/update-restart.html'"></div>
+          <!-- !tab-update-config -->
+          <!-- tab-secrets -->
+          <div class="tab-pane" id="secrets" ng-if="applicationState.endpoint.apiVersion >= 1.25" ng-include="'app/docker/views/services/create/includes/secret.html'"></div>
+          <!-- !tab-secrets -->
+          <!-- tab-configs -->
+          <div class="tab-pane" id="configs" ng-if="applicationState.endpoint.apiVersion >= 1.30" ng-include="'app/docker/views/services/create/includes/config.html'"></div>
+          <!-- !tab-configs -->
+          <!-- tab-resources-placement -->
+          <div class="tab-pane" id="resources-placement" ng-include="'app/docker/views/services/create/includes/resources-placement.html'"></div>
+          <!-- !tab-resources-placement -->
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/docker/views/services/create/includes/config.html

@@ -0,0 +1,27 @@
+<form class="form-horizontal" style="margin-top: 15px;">
+  <div class="form-group">
+    <div class="col-sm-12" style="margin-top: 5px;">
+      <label class="control-label text-left">Configs</label>
+      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addConfig()">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i> add a config
+      </span>
+    </div>
+    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+      <div ng-repeat="config in formValues.Configs" style="margin-top: 2px;">
+        <div class="input-group col-sm-4 input-group-sm">
+          <span class="input-group-addon">config</span>
+          <select class="form-control" ng-model="config.model" ng-options="config.Name for config in availableConfigs">
+            <option value="" selected="selected">Select a config</option>
+          </select>
+        </div>
+        <div class="input-group col-sm-4 input-group-sm">
+          <span class="input-group-addon">Path in container</span>
+          <input class="form-control" ng-model="config.FileName" placeholder="e.g. /path/in/container" />
+        </div>
+        <button class="btn btn-sm btn-danger" type="button" ng-click="removeConfig($index)">
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</form>

app/docker/views/services/create/includes/resources-placement.html

@@ -0,0 +1,130 @@
+<form class="form-horizontal" style="margin-top: 15px;">
+  <div class="col-sm-12 form-section-title">
+    Resources
+  </div>
+  <!-- memory-reservation-input -->
+  <div class="form-group">
+    <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
+      Memory reservation
+    </label>
+    <div class="col-sm-3">
+      <slider model="formValues.MemoryReservation" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
+    </div>
+    <div class="col-sm-2">
+      <input type="number" min="0" class="form-control" ng-model="formValues.MemoryReservation">
+    </div>
+    <div class="col-sm-4">
+      <p class="small text-muted" style="margin-top: 7px;">
+        Minimum memory available on a node to run a task (<b>MB</b>)
+      </p>
+    </div>
+  </div>
+  <!-- !memory-reservation-input -->
+  <!-- memory-limit-input -->
+  <div class="form-group">
+    <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
+      Memory limit
+    </label>
+    <div class="col-sm-3">
+      <slider model="formValues.MemoryLimit" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
+    </div>
+    <div class="col-sm-2">
+      <input type="number" min="0" class="form-control" ng-model="formValues.MemoryLimit">
+    </div>
+    <div class="col-sm-4" style="margin-top: 7px;">
+      <p class="small text-muted">
+        Maximum memory usage per task (<b>MB</b>)
+      </p>
+    </div>
+  </div>
+  <!-- !memory-limit-input -->
+  <!-- cpu-reservation-input -->
+  <div class="form-group">
+    <label for="cpu-reservation" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
+      CPU reservation
+    </label>
+    <div class="col-sm-5">
+      <slider model="formValues.CpuReservation" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="state.sliderMaxCpu"></slider>
+    </div>
+    <div class="col-sm-4" style="margin-top: 20px;">
+      <p class="small text-muted">
+        Minimum CPU available on a node to run a task
+      </p>
+    </div>
+  </div>
+  <!-- !cpu-reservation-input -->
+  <!-- cpu-limit-input -->
+  <div class="form-group">
+    <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
+      CPU limit
+    </label>
+    <div class="col-sm-5">
+      <slider model="formValues.CpuLimit" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="state.sliderMaxCpu"></slider>
+    </div>
+    <div class="col-sm-4" style="margin-top: 20px;">
+      <p class="small text-muted">
+        Maximum CPU usage per task
+      </p>
+    </div>
+  </div>
+  <!-- !cpu-limit-input -->
+  <div class="col-sm-12 form-section-title">
+    Placement
+  </div>
+  <!-- placement-constraints -->
+  <div class="form-group">
+    <div class="col-sm-12" style="margin-top: 5px;">
+      <label class="control-label text-left">Placement constraints</label>
+      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPlacementConstraint()">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i> placement constraint
+      </span>
+    </div>
+    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+      <div ng-repeat="constraint in formValues.PlacementConstraints" style="margin-top: 2px;">
+        <div class="input-group col-sm-4 input-group-sm">
+          <span class="input-group-addon">name</span>
+          <input type="text" class="form-control" ng-model="constraint.key" placeholder="e.g. node.role">
+        </div>
+        <div class="input-group col-sm-1 input-group-sm">
+          <select name="constraintOperator" class="form-control" ng-model="constraint.operator">
+            <option value="==">==</option>
+            <option value="!=">!=</option>
+          </select>
+        </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="constraint.value" placeholder="e.g. manager">
+        </div>
+        <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementConstraint($index)">
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- !placement-constraints -->
+  <!-- placement-preferences -->
+  <div class="form-group" ng-if="applicationState.endpoint.apiVersion >= 1.30">
+    <div class="col-sm-12" style="margin-top: 5px;">
+      <label class="control-label text-left">Placement preferences</label>
+      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPlacementPreference()">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
+      </span>
+    </div>
+    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+      <div ng-repeat="preference in formValues.PlacementPreferences" style="margin-top: 2px;">
+        <div class="input-group col-sm-4 input-group-sm">
+          <span class="input-group-addon">strategy</span>
+          <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. spread">
+        </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="preference.value" placeholder="e.g. node.labels.datacenter">
+        </div>
+        <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementPreference($index)">
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- !placement-preferences -->
+</form>

app/docker/views/services/create/includes/secret.html

@@ -0,0 +1,38 @@
+<form class="form-horizontal" style="margin-top: 15px;">
+  <div class="form-group">
+    <div class="col-sm-12 small text-muted">
+      By default, secrets will be available under <code>/run/secrets/$SECRET_NAME</code> in containers.
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-12" style="margin-top: 5px;">
+      <label class="control-label text-left">Secrets</label>
+      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addSecret()">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i> add a secret
+      </span>
+    </div>
+    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+      <div ng-repeat="secret in formValues.Secrets track by $index" style="margin-top: 4px;">
+        <div class="input-group col-sm-4 input-group-sm">
+          <span class="input-group-addon">secret</span>
+          <select class="form-control" ng-model="secret.model" ng-options="secret.Name for secret in availableSecrets">
+            <option value="" selected="selected">Select a secret</option>
+          </select>
+        </div>
+        <div class="input-group col-sm-4 input-group-sm" ng-if="applicationState.endpoint.apiVersion >= 1.30 && secret.overrideTarget">
+          <span class="input-group-addon">target</span>
+          <input class="form-control" ng-model="secret.target" placeholder="/path/in/container">
+        </div>
+        <div class="input-group col-sm-3 input-group-sm">
+          <div class="btn-group btn-group-sm" ng-if="applicationState.endpoint.apiVersion >= 1.30">
+            <label class="btn btn-primary" ng-model="secret.overrideTarget" uib-btn-radio="false">Default location</label>
+            <label class="btn btn-primary" ng-model="secret.overrideTarget" uib-btn-radio="true">Override</label>
+          </div>
+          <button class="btn btn-sm btn-danger" type="button" ng-click="removeSecret($index)">
+            <i class="fa fa-trash" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

app/docker/views/services/create/includes/update-restart.html

@@ -0,0 +1,132 @@
+<form class="form-horizontal" style="margin-top: 15px;">
+  <div class="col-sm-12 form-section-title">
+      Update config
+  </div>
+  <!-- parallelism-input -->
+  <div class="form-group">
+    <label for="parallelism" class="col-sm-3 col-lg-2 control-label text-left">Update parallelism</label>
+    <div class="col-sm-4 col-lg-3">
+      <input type="number" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1">
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Maximum number of tasks to be updated simultaneously (0 to update all at once).
+      </p>
+    </div>
+  </div>
+  <!-- !parallelism-input -->
+  <!-- delay-input -->
+  <div class="form-group">
+    <label for="update-delay" class="col-sm-3 col-lg-2 control-label text-left">
+      Update delay
+      <portainer-tooltip position="bottom" message="Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns."></portainer-tooltip>
+    </label>                
+    <div class="col-sm-4 col-lg-3">
+      <input type="text" class="form-control" ng-model="formValues.UpdateDelay" id="update-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i">
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Amount of time between updates expressed by a number followed by unit (ns|us|ms|s|m|h). Default value is 0s, 0 seconds.
+      </p>
+    </div>
+  </div>
+  <!-- !delay-input -->
+  <!-- failureAction-input -->
+  <div class="form-group">
+    <label for="failure-action" class="col-sm-3 col-lg-2 control-label text-left">Update failure action</label>
+    <div class="col-sm-4 col-lg-3">
+      <div class="btn-group btn-group-sm">
+        <label class="btn btn-primary" ng-model="formValues.FailureAction" uib-btn-radio="'continue'">Continue</label>
+        <label class="btn btn-primary" ng-model="formValues.FailureAction" uib-btn-radio="'pause'">Pause</label>
+      </div>
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Action taken on failure to start after update.
+      </p>
+    </div>
+  </div>
+  <!-- !failureAction-input -->
+  <!-- order-input -->
+  <div class="form-group" ng-if="applicationState.endpoint.apiVersion >= 1.29">
+    <label for="update-order" class="col-sm-3 col-lg-2 control-label text-left">Update order</label>
+    <div class="col-sm-4 col-lg-3">
+      <div class="btn-group btn-group-sm">
+        <label class="btn btn-primary" ng-model="formValues.UpdateOrder" uib-btn-radio="'start-first'">start-first</label>
+        <label class="btn btn-primary" ng-model="formValues.UpdateOrder" uib-btn-radio="'stop-first'">stop-first</label>
+      </div>
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Operation order on failure.
+      </p>
+    </div>
+  </div>
+  <!-- !order-input -->
+  
+  <div class="col-sm-12 form-section-title">
+      Restart policy
+  </div>
+  <!-- restartCondition-input -->
+  <div class="form-group">
+    <label for="restart-condition" class="col-sm-3 col-lg-2 control-label text-left">Restart condition</label>
+    <div class="col-sm-4 col-lg-3">
+      <div class="btn-group btn-group-sm">
+        <label class="btn btn-primary" ng-model="formValues.RestartCondition" uib-btn-radio="'none'">None</label>
+        <label class="btn btn-primary" ng-model="formValues.RestartCondition" uib-btn-radio="'on-failure'">On-failure</label>
+        <label class="btn btn-primary" ng-model="formValues.RestartCondition" uib-btn-radio="'any'">Any</label>
+      </div>
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Restart when condition is met (default condition "any"). 
+      </p>
+    </div>
+  </div>
+  <!-- !restartCondition-input -->
+  <!-- restartDelay-input -->
+  <div class="form-group">
+    <label for="restart-delay" class="col-sm-3 col-lg-2 control-label text-left">
+      Restart delay
+      <portainer-tooltip position="bottom" message="Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns."></portainer-tooltip>
+    </label>                
+    <div class="col-sm-4 col-lg-3">
+      <input type="text" class="form-control" ng-model="formValues.RestartDelay" id="restart-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i">
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Delay between restart attempts expressed by a number followed by unit (ns|us|ms|s|m|h). Default value is 5s, 5 seconds.
+      </p>
+    </div>
+  </div>
+  <!-- !restartDelay-input -->
+  <!-- restartMaxAttempts-input -->
+   <div class="form-group">
+    <label for="restart-max-attempts" class="col-sm-3 col-lg-2 control-label text-left">Restart max attempts</label>
+    <div class="col-sm-4 col-lg-3">
+      <input type="number" class="form-control" ng-model="formValues.RestartMaxAttempts" id="restart-max-attempts" placeholder="e.g. 0">
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Maximum attempts to restart a given task before giving up (default value is 0, which means unlimited).
+      </p>
+    </div>
+  </div>
+  <!-- !restartMaxAttempts-input -->
+  <!-- restartWindow-input -->
+  <div class="form-group">
+    <label for="restart-window" class="col-sm-3 col-lg-2 control-label text-left">
+      Restart window
+      <portainer-tooltip position="bottom" message="Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns."></portainer-tooltip>
+    </label>                
+    <div class="col-sm-4 col-lg-3">
+      <input type="text" class="form-control" ng-model="formValues.RestartWindow" id="restart-window" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i">
+    </div>
+    <div class="col-sm-5">
+      <p class="small text-muted">
+        Time window to evaluate restart attempts expressed by a number followed by unit (ns|us|ms|s|m|h). Default value is 0 seconds, which is unbounded.
+      </p>
+    </div>
+  </div>
+  <!-- !restartWindow-input -->
+</form>