feat(stack): updated based on comments

feat(stack): removed incorrect html property.
feat(stack): updated interval format directive name
2021-06-21 00:12:44 +12:00 · 2021-06-14 23:58:49 +12:00 · 2021-06-14 17:28:43 +12:00 · 2021-06-14 14:13:28 +12:00 · 2021-06-02 13:17:39 +12:00
7 changed files with 204 additions and 25 deletions
--- a/app/portainer/components/intervalFormat.js
+++ b/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;
+        }
+      };
+    },
+  };
+});
--- a/app/portainer/helpers/webhookHelper.js
+++ b/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 =
-        ($location.protocol().toLowerCase() === 'http' && $location.port() === 80) || ($location.protocol().toLowerCase() === 'https' && $location.port() === 443)
-          ? ''
-          : ':' + $location.port();
-      return $location.protocol() + '://' + $location.host() + displayPort + '/' + API_ENDPOINT_WEBHOOKS + '/' + token;
+      return `${protocol}://${$location.host()}${displayPort}/${API_ENDPOINT_WEBHOOKS}/${token}`;
+    };
+
+    helper.returnStackWebhookUrl = function (token) {
+      return `${protocol}://${$location.host()}${displayPort}/${API_ENDPOINT_STACKS}/webhooks/${token}`;
    };

    return helper;
--- a/app/portainer/services/api/stackService.js
+++ b/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) {
--- a/app/portainer/views/stacks/create/createStackController.js
+++ b/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;
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/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">
-                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
-                a personal-access token instead of your password.
-              </span>
+              <label for="repository_username" class="col-sm-2 control-label text-left">Username</label>
+              <div class="col-sm-3">
+                <input type="text" class="form-control" ng-model="formValues.RepositoryUsername" name="repository_username" placeholder="git username" />
+              </div>
            </div>
            <div class="form-group" ng-if="formValues.RepositoryAuthentication">
-              <label for="repository_username" class="col-sm-1 control-label text-left">Username</label>
-              <div class="col-sm-11 col-md-5">
-                <input type="text" class="form-control" ng-model="formValues.RepositoryUsername" name="repository_username" placeholder="myGitUser" />
-              </div>
-              <label for="repository_password" class="col-sm-1 control-label text-left">
-                Password
+              <label for="repository_personal_access_token" class="col-sm-2 control-label text-left">
+                Personal Access Token
+                <portainer-tooltip position="bottom" message="Provide a personal access token or password"></portainer-tooltip>
              </label>
-              <div class="col-sm-11 col-md-5">
-                <input type="password" class="form-control" ng-model="formValues.RepositoryPassword" name="repository_password" placeholder="myPassword" />
+              <div class="col-sm-3">
+                <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>
--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/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"
Author	SHA1	Message	Date
Felix Han	9e56a6f51f	feat(stack): updated based on comments	2021-06-21 00:12:44 +12:00
Felix Han	ef150819ad	feat(stack): removed incorrect html property.	2021-06-14 23:58:49 +12:00
Felix Han	48f5e3b909	feat(stack): updated interval format directive name	2021-06-14 17:28:43 +12:00
Felix Han	70d11dc8ad	feat(stack): using lib to validate time interval.	2021-06-14 14:13:28 +12:00
Felix Han	26f4d37aff	feat(stack): updated Add Stack view EE-780.	2021-06-02 13:17:39 +12:00