feat(service): add logging driver config in service create/update (#1516)

app/components/service/includes/logging.html

@@ -0,0 +1,65 @@
+<div id="service-logging-driver">
+    <rd-widget>
+      <rd-widget-header icon="fa-tasks" title="Logging driver">        
+      </rd-widget-header>      
+      <rd-widget-body classes="no-padding">
+        <div class="form-inline" style="padding: 10px;">
+          Driver:
+          <select class="form-control" ng-model="service.LogDriverName" ng-change="updateLogDriverName(service)" ng-disabled="isUpdating">
+            <option selected value="">Default logging driver</option>  
+            <option ng-repeat="driver in availableLoggingDrivers" ng-value="driver">{{ driver }}</option>                              
+            <option value="none">none</option>
+          </select>
+          <a class="btn btn-default btn-sm" ng-click="!service.LogDriverName || service.LogDriverName === 'none' || addLogDriverOpt(service)">
+            <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+          </a>
+        </div>
+        <table class="table" >
+          <thead>
+            <tr>
+              <th>Option</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="option in service.LogDriverOpts">
+              <td>
+                <div class="input-group input-group-sm">
+                  <span class="input-group-addon fit-text-size">name</span>
+                  <input type="text" class="form-control" ng-model="option.key" ng-disabled="option.added || isUpdating" placeholder="e.g. FOO">
+                </div>
+              </td>
+              <td>
+                <div class="input-group input-group-sm">
+                  <span class="input-group-addon fit-text-size">value</span>
+                  <input type="text" class="form-control" ng-model="option.value" ng-change="updateLogDriverOpt(service, option)" placeholder="e.g. bar" ng-disabled="isUpdating">
+                  <span class="input-group-btn">
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLogDriverOpt(service, $index)" ng-disabled="isUpdating">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </td>
+            </tr>
+            <tr ng-if="service.LogDriverOpts.length === 0">
+                <td colspan="6" class="text-center text-muted">No options associated to this logging driver.</td>
+              </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+      <rd-widget-footer>
+        <div class="btn-toolbar" role="toolbar">
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['LogDriverName', 'LogDriverOpts'])" ng-click="updateService(service)">Apply changes</button>
+            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a ng-click="cancelChanges(service, ['LogDriverName', 'LogDriverOpts'])">Reset changes</a></li>
+              <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
+            </ul>
+          </div>
+        </div>
+      </rd-widget-footer>
+    </rd-widget>
+  </div>

app/components/service/service.html

@@ -116,6 +116,7 @@
           <li ng-if="applicationState.endpoint.apiVersion >= 1.30"><a href ng-click="goToItem('service-placement-preferences')">Placement preferences</a></li>
           <li><a href ng-click="goToItem('service-restart-policy')">Restart policy</a></li>
           <li><a href ng-click="goToItem('service-update-config')">Update configuration</a></li>
+          <li><a href ng-click="goToItem('service-logging')">Logging</a></li>
           <li><a href ng-click="goToItem('service-labels')">Service labels</a></li>
           <li><a href ng-click="goToItem('service-configs')">Configs</a></li>
           <li ng-if="applicationState.endpoint.apiVersion >= 1.25"><a href ng-click="goToItem('service-secrets')">Secrets</a></li>
@@ -165,6 +166,7 @@
     <div id="service-placement-preferences" ng-if="applicationState.endpoint.apiVersion >= 1.30" class="padding-top" ng-include="'app/components/service/includes/placementPreferences.html'"></div>
     <div id="service-restart-policy" class="padding-top" ng-include="'app/components/service/includes/restart.html'"></div>
     <div id="service-update-config" class="padding-top" ng-include="'app/components/service/includes/updateconfig.html'"></div>
+    <div id="service-logging" class="padding-top" ng-include="'app/components/service/includes/logging.html'"></div>
     <div id="service-labels" class="padding-top" ng-include="'app/components/service/includes/servicelabels.html'"></div>
     <div id="service-configs" class="padding-top" ng-include="'app/components/service/includes/configs.html'"></div>
     <div id="service-secrets" ng-if="applicationState.endpoint.apiVersion >= 1.25" class="padding-top" ng-include="'app/components/service/includes/secrets.html'"></div>

app/components/service/serviceController.js

@@ -1,6 +1,6 @@
 angular.module('service', [])
-.controller('ServiceController', ['$q', '$scope', '$transition$', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'ConfigService', 'ConfigHelper', 'SecretService', 'ImageService', 'SecretHelper', 'Service', 'ServiceHelper', 'LabelHelper', 'TaskService', 'NodeService', 'Notifications', 'ModalService',
-function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll, ServiceService, ConfigService, ConfigHelper, SecretService, ImageService, SecretHelper, Service, ServiceHelper, LabelHelper, TaskService, NodeService, Notifications, ModalService) {
+.controller('ServiceController', ['$q', '$scope', '$transition$', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'ConfigService', 'ConfigHelper', 'SecretService', 'ImageService', 'SecretHelper', 'Service', 'ServiceHelper', 'LabelHelper', 'TaskService', 'NodeService', 'Notifications', 'ModalService', 'PluginService',
+function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll, ServiceService, ConfigService, ConfigHelper, SecretService, ImageService, SecretHelper, Service, ServiceHelper, LabelHelper, TaskService, NodeService, Notifications, ModalService, PluginService) {
 
   $scope.state = {};
   $scope.tasks = [];
@@ -168,6 +168,25 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
     }
   };
 
+  $scope.addLogDriverOpt = function addLogDriverOpt(service) {    
+    service.LogDriverOpts.push({ key: '', value: '', originalValue: '' });
+    updateServiceArray(service, 'LogDriverOpts', service.LogDriverOpts);
+  };
+  $scope.removeLogDriverOpt = function removeLogDriverOpt(service, index) {
+    var removedElement = service.LogDriverOpts.splice(index, 1);
+    if (removedElement !== null) {
+      updateServiceArray(service, 'LogDriverOpts', service.LogDriverOpts);
+    }
+  };
+  $scope.updateLogDriverOpt = function updateLogDriverOpt(service, variable) {
+    if (variable.value !== variable.originalValue || variable.key !== variable.originalKey) {
+      updateServiceArray(service, 'LogDriverOpts', service.LogDriverOpts);
+    }
+  };   
+  $scope.updateLogDriverName = function updateLogDriverName(service) {    
+    updateServiceArray(service, 'LogDriverName', service.LogDriverName);    
+  };    
+
   $scope.addHostsEntry = function (service) {
     if (!service.Hosts) {
       service.Hosts = [];
@@ -260,6 +279,17 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
       MaxAttempts: service.RestartMaxAttempts,
       Window: ServiceHelper.translateHumanDurationToNanos(service.RestartWindow) || 0
     };
+    
+    config.TaskTemplate.LogDriver = null;
+    if (service.LogDriverName) {      
+      config.TaskTemplate.LogDriver = { Name: service.LogDriverName };
+      if (service.LogDriverName !== 'none') {
+        var logOpts = ServiceHelper.translateKeyValueToLogDriverOpts(service.LogDriverOpts);
+        if (Object.keys(logOpts).length !== 0 && logOpts.constructor === Object) {
+          config.TaskTemplate.LogDriver.Options = logOpts;
+        }
+      }      
+    }    
 
     if (service.Ports) {
       service.Ports.forEach(function (binding) {
@@ -312,6 +342,7 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
     service.ServiceSecrets = service.Secrets ? service.Secrets.map(SecretHelper.flattenSecret) : [];
     service.ServiceConfigs = service.Configs ? service.Configs.map(ConfigHelper.flattenConfig) : [];
     service.EnvironmentVariables = ServiceHelper.translateEnvironmentVariables(service.Env);
+    service.LogDriverOpts = ServiceHelper.translateLogDriverOptsToKeyValue(service.LogDriverOpts);
     service.ServiceLabels = LabelHelper.fromLabelHashToKeyValue(service.Labels);
     service.ServiceContainerLabels = LabelHelper.fromLabelHashToKeyValue(service.ContainerLabels);
     service.ServiceMounts = angular.copy(service.Mounts);
@@ -334,7 +365,8 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
   }
 
   function initView() {
-    var apiVersion = $scope.applicationState.endpoint.apiVersion;
+    var apiVersion = $scope.applicationState.endpoint.apiVersion;  
+
     ServiceService.service($transition$.params().id)
     .then(function success(data) {
       var service = data;
@@ -354,7 +386,8 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
         nodes: NodeService.nodes(),
         secrets: apiVersion >= 1.25 ? SecretService.secrets() : [],
         configs: apiVersion >= 1.30 ? ConfigService.configs() : [],
-        availableImages: ImageService.images()
+        availableImages: ImageService.images(),
+        availableLoggingDrivers: PluginService.loggingPlugins(apiVersion < 1.25)
       });
     })
     .then(function success(data) {
@@ -363,6 +396,7 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
       $scope.configs = data.configs;
       $scope.secrets = data.secrets;
       $scope.availableImages = ImageService.getUniqueTagListFromImages(data.availableImages);
+      $scope.availableLoggingDrivers = data.availableLoggingDrivers;
 
       // Set max cpu value
       var maxCpus = 0;