feat(stack): updated based on comments

app/portainer/components/intervalFormat.js

@@ -0,0 +1,24 @@
+import parse from 'parse-duration';
+angular.module('portainer.app').directive('intervalFormat', function () {
+  return {
+    restrict: 'A',
+    require: 'ngModel',
+    link: function ($scope, $element, $attrs, ngModel) {
+      ngModel.$validators.invalidIntervalFormat = function (modelValue) {
+        try {
+          return modelValue && modelValue.toUpperCase().match(/^P?(?!$)(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T?(?=\d+[HMS])(\d+H)?(\d+M)?(\d+S)?)?$/gm) !== null;
+        } catch (error) {
+          return false;
+        }
+      };
+
+      ngModel.$validators.minimumInterval = function (modelValue) {
+        try {
+          return modelValue && parse(modelValue, 'minute') >= 1;
+        } catch (error) {
+          return false;
+        }
+      };
+    },
+  };
+});

app/portainer/helpers/webhookHelper.js

@@ -1,16 +1,21 @@
 angular.module('portainer.app').factory('WebhookHelper', [
   '$location',
   'API_ENDPOINT_WEBHOOKS',
-  function WebhookHelperFactory($location, API_ENDPOINT_WEBHOOKS) {
+  'API_ENDPOINT_STACKS',
+  function WebhookHelperFactory($location, API_ENDPOINT_WEBHOOKS, API_ENDPOINT_STACKS) {
     'use strict';
+
     var helper = {};
+    const protocol = $location.protocol().toLowerCase();
+    const port = $location.port();
+    const displayPort = (protocol === 'http' && port === 80) || (protocol === 'https' && port === 443) ? '' : ':' + port;
 
     helper.returnWebhookUrl = function (token) {
-      var displayPort =
+      return `${protocol}://${$location.host()}${displayPort}/${API_ENDPOINT_WEBHOOKS}/${token}`;
-        ($location.protocol().toLowerCase() === 'http' && $location.port() === 80) || ($location.protocol().toLowerCase() === 'https' && $location.port() === 443)
+    };
-          ? ''
+
-          : ':' + $location.port();
+    helper.returnStackWebhookUrl = function (token) {
-      return $location.protocol() + '://' + $location.host() + displayPort + '/' + API_ENDPOINT_WEBHOOKS + '/' + token;
+      return `${protocol}://${$location.host()}${displayPort}/${API_ENDPOINT_STACKS}/webhooks/${token}`;
     };
 
     return helper;

app/portainer/services/api/stackService.js

@@ -279,12 +279,16 @@ angular.module('portainer.app').factory('StackService', [
         Name: name,
         RepositoryURL: repositoryOptions.RepositoryURL,
         RepositoryReferenceName: repositoryOptions.RepositoryReferenceName,
-        ComposeFilePathInRepository: repositoryOptions.ComposeFilePathInRepository,
+        ComposeFile: repositoryOptions.ComposeFilePathInRepository,
+        AdditionalFiles: repositoryOptions.AdditionalFiles,
         RepositoryAuthentication: repositoryOptions.RepositoryAuthentication,
         RepositoryUsername: repositoryOptions.RepositoryUsername,
         RepositoryPassword: repositoryOptions.RepositoryPassword,
         Env: env,
       };
+      if (repositoryOptions.AutoUpdate) {
+        payload.AutoUpdate = repositoryOptions.AutoUpdate;
+      }
       return Stack.create({ method: 'repository', type: 2, endpointId: endpointId }, payload).$promise;
     };
 
@@ -299,12 +303,18 @@ angular.module('portainer.app').factory('StackService', [
             SwarmID: swarm.Id,
             RepositoryURL: repositoryOptions.RepositoryURL,
             RepositoryReferenceName: repositoryOptions.RepositoryReferenceName,
-            ComposeFilePathInRepository: repositoryOptions.ComposeFilePathInRepository,
+            ComposeFile: repositoryOptions.ComposeFilePathInRepository,
+            AdditionalFiles: repositoryOptions.AdditionalFiles,
             RepositoryAuthentication: repositoryOptions.RepositoryAuthentication,
             RepositoryUsername: repositoryOptions.RepositoryUsername,
             RepositoryPassword: repositoryOptions.RepositoryPassword,
             Env: env,
           };
+
+          if (repositoryOptions.AutoUpdate) {
+            payload.AutoUpdate = repositoryOptions.AutoUpdate;
+          }
+
           return Stack.create({ method: 'repository', type: 1, endpointId: endpointId }, payload).$promise;
         })
         .then(function success(data) {

app/portainer/views/stacks/create/createStackController.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import _ from 'lodash-es';
-
+import uuidv4 from 'uuid/v4';
 import { AccessControlFormData } from '../../../components/accessControlForm/porAccessControlFormModel';
 
 angular
@@ -21,7 +21,10 @@ angular
     StackHelper,
     ContainerHelper,
     CustomTemplateService,
-    ContainerService
+    ContainerService,
+    endpoint,
+    WebhookHelper,
+    clipboard
   ) {
     $scope.formValues = {
       Name: '',
@@ -29,10 +32,14 @@ angular
       StackFile: null,
       RepositoryURL: '',
       RepositoryReferenceName: '',
+      RepositoryAutomaticUpdates: true,
       RepositoryAuthentication: false,
       RepositoryUsername: '',
       RepositoryPassword: '',
+      RepositoryMechanism: 'Interval',
+      RepositoryWebhookURL: WebhookHelper.returnStackWebhookUrl(uuidv4()),
       Env: [],
+      AdditionalFiles: [],
       ComposeFilePathInRepository: 'docker-compose.yml',
       AccessControlData: new AccessControlFormData(),
     };
@@ -61,6 +68,14 @@ angular
       $scope.formValues.Env.splice(index, 1);
     };
 
+    $scope.addAdditionalFiles = function () {
+      $scope.formValues.AdditionalFiles.push('');
+    };
+
+    $scope.removeAdditionalFiles = function (index) {
+      $scope.formValues.AdditionalFiles.splice(index, 1);
+    };
+
     function validateForm(accessControlData, isAdmin) {
       $scope.state.formValidationError = '';
       var error = '';
@@ -89,17 +104,32 @@ angular
 
       if (method === 'repository') {
         var repositoryOptions = {
+          AdditionalFiles: $scope.formValues.AdditionalFiles,
           RepositoryURL: $scope.formValues.RepositoryURL,
           RepositoryReferenceName: $scope.formValues.RepositoryReferenceName,
           ComposeFilePathInRepository: $scope.formValues.ComposeFilePathInRepository,
           RepositoryAuthentication: $scope.formValues.RepositoryAuthentication,
           RepositoryUsername: $scope.formValues.RepositoryUsername,
-          RepositoryPassword: $scope.formValues.RepositoryPassword,
+          RepositoryPassword: $scope.formValues.RepositoryPersonalAccessToken,
         };
+
+        getAutoUpdatesProperty(repositoryOptions);
+
         return StackService.createSwarmStackFromGitRepository(name, repositoryOptions, env, endpointId);
       }
     }
 
+    function getAutoUpdatesProperty(repositoryOptions) {
+      if ($scope.formValues.RepositoryAutomaticUpdates) {
+        repositoryOptions.AutoUpdate = {};
+        if ($scope.formValues.RepositoryMechanism === 'Interval') {
+          repositoryOptions.AutoUpdate.Interval = $scope.formValues.RepositoryFetchInterval;
+        } else if ($scope.formValues.RepositoryMechanism === 'Webhook') {
+          repositoryOptions.AutoUpdate.Webhook = $scope.formValues.RepositoryWebhookURL.split('/').reverse()[0];
+        }
+      }
+    }
+
     function createComposeStack(name, method) {
       var env = FormHelper.removeInvalidEnvVars($scope.formValues.Env);
       const endpointId = +$state.params.endpointId;
@@ -112,17 +142,27 @@ angular
         return StackService.createComposeStackFromFileUpload(name, stackFile, env, endpointId);
       } else if (method === 'repository') {
         var repositoryOptions = {
+          AdditionalFiles: $scope.formValues.AdditionalFiles,
           RepositoryURL: $scope.formValues.RepositoryURL,
           RepositoryReferenceName: $scope.formValues.RepositoryReferenceName,
           ComposeFilePathInRepository: $scope.formValues.ComposeFilePathInRepository,
           RepositoryAuthentication: $scope.formValues.RepositoryAuthentication,
           RepositoryUsername: $scope.formValues.RepositoryUsername,
-          RepositoryPassword: $scope.formValues.RepositoryPassword,
+          RepositoryPassword: $scope.formValues.RepositoryPersonalAccessToken,
         };
+
+        getAutoUpdatesProperty(repositoryOptions);
+
         return StackService.createComposeStackFromGitRepository(name, repositoryOptions, env, endpointId);
       }
     }
 
+    $scope.copyWebhook = function () {
+      clipboard.copyText($scope.formValues.RepositoryWebhookURL);
+      $('#copyNotification').show();
+      $('#copyNotification').fadeOut(2000);
+    };
+
     $scope.deployStack = function () {
       var name = $scope.formValues.Name;
       var method = $scope.state.Method;

app/portainer/views/stacks/create/createstack.html

@@ -7,7 +7,7 @@
   <div class="col-sm-12">
     <rd-widget>
       <rd-widget-body>
-        <form class="form-horizontal">
+        <form class="form-horizontal" name="createStackForm">
           <!-- name-input -->
           <div class="form-group">
             <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
@@ -175,6 +175,32 @@
                 <input type="text" class="form-control" ng-model="formValues.ComposeFilePathInRepository" id="stack_repository_path" placeholder="docker-compose.yml" />
               </div>
             </div>
+            <!-- additional paths-variables -->
+            <div>
+              <div class="form-group">
+                <div class="col-sm-12" style="margin-top: 5px;">
+                  <label class="control-label text-left">Additional paths</label>
+                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addAdditionalFiles()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add file
+                  </span>
+                </div>
+                <!-- additional-paths-variable-input-list -->
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="variable in formValues.AdditionalFiles track by $index" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">path</span>
+                      <input id="ipv6_network_auxaddr_{{ $index }}" type="text" class="form-control" ng-model="formValues.AdditionalFiles[$index]" />
+                    </div>
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeAdditionalFiles($index)">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+                <!-- !additional-paths-variable-input-list -->
+              </div>
+            </div>
+            <!-- !additional-variables -->
+
             <div class="form-group">
               <div class="col-sm-12">
                 <label class="control-label text-left">
@@ -183,22 +209,90 @@
                 <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.RepositoryAuthentication" /><i></i> </label>
               </div>
             </div>
+
             <div class="form-group" ng-if="formValues.RepositoryAuthentication">
-              <span class="col-sm-12 text-muted small">
+              <label for="repository_username" class="col-sm-2 control-label text-left">Username</label>
-                If your git account has 2FA enabled, you may receive an <code>authentication required</code> error when deploying your stack. In this case, you will need to provide
+              <div class="col-sm-3">
-                a personal-access token instead of your password.
+                <input type="text" class="form-control" ng-model="formValues.RepositoryUsername" name="repository_username" placeholder="git username" />
-              </span>
+              </div>
             </div>
             <div class="form-group" ng-if="formValues.RepositoryAuthentication">
-              <label for="repository_username" class="col-sm-1 control-label text-left">Username</label>
+              <label for="repository_personal_access_token" class="col-sm-2 control-label text-left">
-              <div class="col-sm-11 col-md-5">
+                Personal Access Token
-                <input type="text" class="form-control" ng-model="formValues.RepositoryUsername" name="repository_username" placeholder="myGitUser" />
+                <portainer-tooltip position="bottom" message="Provide a personal access token or password"></portainer-tooltip>
-              </div>
-              <label for="repository_password" class="col-sm-1 control-label text-left">
-                Password
               </label>
-              <div class="col-sm-11 col-md-5">
+              <div class="col-sm-3">
-                <input type="password" class="form-control" ng-model="formValues.RepositoryPassword" name="repository_password" placeholder="myPassword" />
+                <input
+                  type="password"
+                  class="form-control"
+                  ng-model="formValues.RepositoryPersonalAccessToken"
+                  name="repository_personal_access_token"
+                  placeholder="personal access token"
+                />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <div class="col-sm-12">
+                <label class="control-label text-left">
+                  Automatic updates
+                </label>
+                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.RepositoryAutomaticUpdates" /><i></i> </label>
+              </div>
+            </div>
+            <div class="small text-warning" style="margin-top: 5px;" ng-if="formValues.RepositoryAutomaticUpdates">
+              <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+              <span class="text-muted">Enabling automatic updates will store the credentials and it is advisable to use a git service account.</span>
+            </div>
+            <div class="small text-warning" style="margin: 5px 0 10px 0;" ng-if="formValues.RepositoryAutomaticUpdates">
+              <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+              <span class="text-muted">Any changes to this stack made locally in Portainer will be overriden by the definition in git and may cause service interruption.</span>
+            </div>
+
+            <div class="form-group" ng-if="formValues.RepositoryAutomaticUpdates">
+              <label for="repository_mechanism" class="col-sm-2 control-label text-left">
+                Mechanism
+              </label>
+              <div class="col-sm-3">
+                <div class="input-group col-sm-10 input-group-sm">
+                  <div class="btn-group btn-group-sm">
+                    <label class="btn btn-primary" ng-model="formValues.RepositoryMechanism" uib-btn-radio="'Interval'">Polling</label>
+                    <label class="btn btn-primary" ng-model="formValues.RepositoryMechanism" uib-btn-radio="'Webhook'">Webhook</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="form-group" ng-if="formValues.RepositoryMechanism === 'Webhook'">
+              <label for="repository_mechanism" class="col-sm-2 control-label text-left">
+                Webhook
+              </label>
+              <div class="col-sm-3">
+                <span class="text-muted"> {{ formValues.RepositoryWebhookURL | truncatelr }} </span>
+                <button type="button" class="btn btn-sm btn-primary btn-sm space-left" ng-if="formValues.RepositoryWebhookURL" ng-click="copyWebhook()">
+                  <span><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy link</span>
+                </button>
+                <span>
+                  <i id="copyNotification" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
+                </span>
+              </div>
+            </div>
+
+            <div class="form-group" ng-if="formValues.RepositoryMechanism === 'Interval'">
+              <label for="repository_fetch_interval" class="col-sm-2 control-label text-left">
+                Fetch interval
+              </label>
+              <div class="col-sm-10">
+                <input type="text" class="form-control" ng-model="formValues.RepositoryFetchInterval" name="repository_fetch_interval" placeholder="5m" required interval-format />
+              </div>
+            </div>
+            <div class="form-group col-md-12" ng-show="createStackForm.repository_fetch_interval.$invalid">
+              <div class="small text-warning">
+                <div ng-messages="createStackForm.repository_fetch_interval.$error">
+                  <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                  <p ng-message="invalidIntervalFormat"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Please enter a valid time interval.</p>
+                  <p ng-message="minimumInterval"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum interval is 1m</p>
+                </div>
               </div>
             </div>
           </div>

package.json

@@ -91,6 +91,7 @@
     "lodash-es": "^4.17.15",
     "moment": "^2.21.0",
     "ng-file-upload": "~12.2.13",
+    "parse-duration": "^1.0.0",
     "source-map-loader": "^1.1.2",
     "spinkit": "^2.0.1",
     "splitargs": "github:deviantony/splitargs#semver:~0.2.0",

yarn.lock

@@ -7967,6 +7967,11 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-duration@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-duration/-/parse-duration-1.0.0.tgz#8605651745f61088f6fb14045c887526c291858c"
+  integrity sha512-X4kUkCTHU1N/kEbwK9FpUJ0UZQa90VzeczfS704frR30gljxDG0pSziws06XlK+CGRSo/1wtG1mFIdBFQTMQNw==
+
 parse-filepath@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891"