refactor(app): webpack aliases for imports + async / await dep + start refactor

.babelrc

@@ -4,7 +4,8 @@
     [
       "@babel/preset-env",
       {
-        "modules": false
+        "modules": false,
+        "useBuiltIns": "usage"
       }
     ]
   ]

app/docker/__module.js

@@ -24,7 +24,8 @@ angular.module('portainer.docker', ['portainer.app'])
     views: {
       'content@': {
         templateUrl: './views/configs/configs.html',
-        controller: 'ConfigsController'
+        controller: 'ConfigsController',
+        controllerAs: '$ctrl'
       }
     }
   };

app/docker/views/configs/configs.html

@@ -11,10 +11,10 @@
   <div class="col-sm-12">
     <configs-datatable
     title-text="Configs" title-icon="fa-file-code"
-    dataset="configs" table-key="configs"
+    dataset="$ctrl.configs" table-key="configs"
     order-by="Name" 
     show-ownership-column="applicationState.application.authentication"
-    remove-action="removeAction"
+    remove-action="$ctrl.removeAction"
     ></configs-datatable>
   </div>
 </div>

app/docker/views/configs/configsController.js

@@ -1,38 +1,41 @@
-angular.module('portainer.docker')
+import angular from 'angular';
-.controller('ConfigsController', ['$scope', '$state', 'ConfigService', 'Notifications',
-function ($scope, $state, ConfigService, Notifications) {
 
-  $scope.removeAction = function (selectedItems) {
+class ConfigsController {
-    var actionCount = selectedItems.length;
-    angular.forEach(selectedItems, function (config) {
-      ConfigService.remove(config.Id)
-      .then(function success() {
-        Notifications.success('Config successfully removed', config.Name);
-        var index = $scope.configs.indexOf(config);
-        $scope.configs.splice(index, 1);
-      })
-      .catch(function error(err) {
-        Notifications.error('Failure', err, 'Unable to remove config');
-      })
-      .finally(function final() {
-        --actionCount;
-        if (actionCount === 0) {
-          $state.reload();
-        }
-      });
-    });
-  };
 
-  function initView() {
+  /* @ngInject */
-    ConfigService.configs()
+  constructor($state, ConfigService, Notifications) {
-    .then(function success(data) {
+    this.$state = $state;
-      $scope.configs = data;
+    this.ConfigService = ConfigService;
-    })
+    this.Notifications = Notifications;
-    .catch(function error(err) {
-      $scope.configs = [];
-      Notifications.error('Failure', err, 'Unable to retrieve configs');
-    });
   }
 
-  initView();
+  async $onInit() {
-}]);
+    this.configs = [];
+    try {
+      this.configs = await this.ConfigService.configs();
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve configs');
+    }
+  }
+
+  async removeAction(selectedItems) {
+    let actionCount = selectedItems.length;
+    for (const config of selectedItems) {
+      try {
+        await this.ConfigService.remove(config.id);
+        this.Notifications.success('Config successfully removed', config.Name);
+        const index = this.configs.indexOf(config);
+        this.configs.splice(index, 1);
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to remove config');
+      } finally {
+        --actionCount;
+        if (actionCount === 0) {
+          this.$state.reload();
+        }
+      }
+    }
+  }
+}
+export default ConfigsController;
+angular.module('portainer.docker').controller('ConfigsController', ConfigsController);

app/docker/views/configs/create/createConfigController.js

@@ -1,121 +1,148 @@
-import _ from 'lodash-es';
+import _ from "lodash-es";
-import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
+import { AccessControlFormData } from "Portainer/components/accessControlForm/porAccessControlFormModel";
 
-angular.module('portainer.docker')
+import angular from "angular";
-.controller('CreateConfigController', ['$scope', '$state', '$transition$', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService',
-function ($scope, $state, $transition$, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
-  $scope.formValues = {
-    Name: '',
-    Labels: [],
-    AccessControlData: new AccessControlFormData(),
-    ConfigContent: ''
-  };
 
-  $scope.state = {
+class CreateControllerConfig {
-    formValidationError: ''
+  /* @ngInject */
-  };
+  constructor(
+    $state,
+    $transition$,
+    Notifications,
+    ConfigService,
+    Authentication,
+    FormValidator,
+    ResourceControlService
+  ) {
+    this.$state = $state;
+    this.$transition$ = $transition$;
+    this.Notifications = Notifications;
+    this.ConfigService = ConfigService;
+    this.Authentication = Authentication;
+    this.FormValidator = FormValidator;
+    this.ResourceControlService = ResourceControlService;
 
-  $scope.addLabel = function() {
+    this.formValues = {
-    $scope.formValues.Labels.push({ name: '', value: ''});
+      Name: "",
-  };
+      Labels: [],
+      AccessControlData: new AccessControlFormData(),
+      ConfigContent: ""
+    };
 
-  $scope.removeLabel = function(index) {
+    this.state = {
-    $scope.formValues.Labels.splice(index, 1);
+      formValidationError: ""
-  };
+    };
+  }
 
-  function prepareLabelsConfig(config) {
+  addLabel() {
-    var labels = {};
+    this.formValues.Labels.push({ name: "", value: "" });
-    $scope.formValues.Labels.forEach(function (label) {
+  }
+
+  removeLabel(index) {
+    this.formValues.Labels.splice(index, 1);
+  }
+
+  prepareLabelsConfig(config) {
+    let labels = {};
+    this.formValues.Labels.forEach(function(label) {
       if (label.name && label.value) {
-          labels[label.name] = label.value;
+        labels[label.name] = label.value;
       }
     });
     config.Labels = labels;
   }
 
-  function prepareConfigData(config) {
+  prepareConfigData(config) {
-    var configData = $scope.formValues.ConfigContent;
+    let configData = this.formValues.ConfigContent;
     config.Data = btoa(unescape(encodeURIComponent(configData)));
   }
 
-  function prepareConfiguration() {
+  prepareConfiguration() {
-    var config = {};
+    let config = {};
-    config.Name = $scope.formValues.Name;
+    config.Name = this.formValues.Name;
-    prepareConfigData(config);
+    this.prepareConfigData(config);
-    prepareLabelsConfig(config);
+    this.prepareLabelsConfig(config);
     return config;
   }
 
-  function validateForm(accessControlData, isAdmin) {
+  validateForm(accessControlData, isAdmin) {
-    $scope.state.formValidationError = '';
+    this.state.formValidationError = "";
-    var error = '';
+    let error = "";
-    error = FormValidator.validateAccessControl(accessControlData, isAdmin);
+    error = this.FormValidator.validateAccessControl(
+      accessControlData,
+      isAdmin
+    );
 
     if (error) {
-      $scope.state.formValidationError = error;
+      this.state.formValidationError = error;
       return false;
     }
     return true;
   }
 
-  $scope.create = function () {
+  async create() {
-    var accessControlData = $scope.formValues.AccessControlData;
+    let accessControlData = this.formValues.AccessControlData;
-    var userDetails = Authentication.getUserDetails();
+    let userDetails = this.Authentication.getUserDetails();
-    var isAdmin = userDetails.role === 1;
+    let isAdmin = userDetails.role === 1;
 
-    if ($scope.formValues.ConfigContent === '') {
+    if (this.formValues.ConfigContent === "") {
-      $scope.state.formValidationError = 'Config content must not be empty';
+      this.state.formValidationError = "Config content must not be empty";
       return;
     }
 
-    if (!validateForm(accessControlData, isAdmin)) {
+    if (!this.validateForm(accessControlData, isAdmin)) {
       return;
     }
 
-    var config = prepareConfiguration();
+    let config = this.prepareConfiguration();
 
-    ConfigService.create(config)
+    try {
-    .then(function success(data) {
+      let data = await this.ConfigService.create(config);
-      var configIdentifier = data.ID;
+      let configIdentifier = data.ID;
-      var userId = userDetails.ID;
+      let userId = userDetails.ID;
-      return ResourceControlService.applyResourceControl('config', configIdentifier, userId, accessControlData, []);
+      await this.ResourceControlService.applyResourceControl(
-    })
+        "config",
-    .then(function success() {
+        configIdentifier,
-      Notifications.success('Config successfully created');
+        userId,
-      $state.go('docker.configs', {}, {reload: true});
+        accessControlData,
-    })
+        []
-    .catch(function error(err) {
+      );
-      Notifications.error('Failure', err, 'Unable to create config');
+      this.Notifications.success("Config successfully created");
-    });
+      this.$state.go("docker.configs", {}, { reload: true });
-  };
+    } catch (err) {
-
+      this.Notifications.error("Failure", err, "Unable to create config");
-  $scope.editorUpdate = function(cm) {
-    $scope.formValues.ConfigContent = cm.getValue();
-  };
-
-  function initView() {
-    if (!$transition$.params().id) {
-        $scope.formValues.displayCodeEditor = true;
-        return;
     }
-
-    ConfigService.config($transition$.params().id)
-    .then(function success(data) {
-      $scope.formValues.Name = data.Name + '_copy';
-      $scope.formValues.Data = data.Data;
-      var labels = _.keys(data.Labels);
-      for (var i = 0; i < labels.length; i++) {
-        var labelName = labels[i];
-        var labelValue = data.Labels[labelName];
-        $scope.formValues.Labels.push({ name: labelName, value: labelValue});
-      }
-      $scope.formValues.displayCodeEditor = true;
-    })
-    .catch(function error(err) {
-      $scope.formValues.displayCodeEditor = true;
-      Notifications.error('Failure', err, 'Unable to clone config');
-    });
   }
 
-  initView();
+  editorUpdate(cm) {
-}]);
+    this.formValues.ConfigContent = cm.getValue();
+  }
+
+  async $onInit() {
+    if (!this.$transition$.params().id) {
+      this.formValues.displayCodeEditor = true;
+      return;
+    }
+
+    try {
+      let data = await this.ConfigService.config(this.$transition$.params().id);
+      this.formValues.Name = data.Name + "_copy";
+      this.formValues.Data = data.Data;
+      let labels = _.keys(data.Labels);
+      for (let i = 0; i < labels.length; i++) {
+        let labelName = labels[i];
+        let labelValue = data.Labels[labelName];
+        this.formValues.Labels.push({ name: labelName, value: labelValue });
+      }
+      this.formValues.displayCodeEditor = true;
+    } catch (err) {
+      this.formValues.displayCodeEditor = true;
+      this.Notifications.error("Failure", err, "Unable to clone config");
+    }
+  }
+}
+
+export default CreateControllerConfig;
+angular
+  .module("portainer.docker")
+  .controller("CreateControllerConfig", CreateControllerConfig);

app/docker/views/configs/create/createconfig.html

@@ -14,19 +14,19 @@
           <div class="form-group">
             <label for="config_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="config_name" placeholder="e.g. myConfig">
+              <input type="text" class="form-control" ng-model="$ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig">
             </div>
           </div>
           <!-- !name-input -->
           <!-- config-data -->
           <div class="form-group">
-            <div class="col-sm-12" ng-if="formValues.displayCodeEditor">
+            <div class="col-sm-12" ng-if="$ctrl.formValues.displayCodeEditor">
               <code-editor
                 identifier="config-creation-editor"
                 placeholder="Define or paste the content of your config here"
                 yml="false"
-                on-change="editorUpdate"
+                on-change="$ctrl.editorUpdate"
-                value="formValues.Data"
+                value="$ctrl.formValues.Data"
               ></code-editor>
             </div>
           </div>
@@ -35,13 +35,13 @@
           <div class="form-group">
             <div class="col-sm-12" style="margin-top: 5px;">
               <label class="control-label text-left">Labels</label>
-              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
+              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="$ctrl.addLabel()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> add 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 ng-repeat="label in $ctrl.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.name" placeholder="e.g. com.example.foo">
@@ -50,7 +50,7 @@
                   <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)">
+                <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
                   <i class="fa fa-trash" aria-hidden="true"></i>
                 </button>
               </div>
@@ -59,7 +59,7 @@
           </div>
           <!-- !labels-->
           <!-- access-control -->
-          <por-access-control-form form-data="formValues.AccessControlData" ng-if="applicationState.application.authentication"></por-access-control-form>
+          <por-access-control-form form-data="$ctrl.formValues.AccessControlData" ng-if="applicationState.application.authentication"></por-access-control-form>
           <!-- !access-control -->
           <!-- actions -->
           <div class="col-sm-12 form-section-title">
@@ -67,8 +67,8 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name" ng-click="create()">Create config</button>
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.formValues.Name" ng-click="$ctrl.create()">Create config</button>
-              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
+              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ $ctrl.state.formValidationError }}</span>
             </div>
           </div>
           <!-- !actions -->

package.json

@@ -32,6 +32,7 @@
     "node": ">= 0.8.4"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.2.5",
     "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
     "@uirouter/angularjs": "~1.0.6",
     "angular": "~1.5.0",

webpack/webpack.common.js

@@ -108,5 +108,14 @@ module.exports = {
         }
       }
     }
-  }
+  },
+  resolve: {
+    alias: {
+      Agent: path.resolve(projectRoot, 'app/agent'),
+      Azure: path.resolve(projectRoot, 'app/azure'),
+      Docker: path.resolve(projectRoot, 'app/docker'),
+      Extensions: path.resolve(projectRoot, 'app/extensions'),
+      Portainer: path.resolve(projectRoot, 'app/portainer'),
+    }
+  },
 };

yarn.lock

@@ -503,6 +503,14 @@
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
+"@babel/polyfill@^7.2.5":
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.2.5.tgz#6c54b964f71ad27edddc567d065e57e87ed7fa7d"
+  integrity sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==
+  dependencies:
+    core-js "^2.5.7"
+    regenerator-runtime "^0.12.0"
+
 "@babel/preset-env@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.0.tgz#e67ea5b0441cfeab1d6f41e9b5c79798800e8d11"
@@ -2667,6 +2675,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+core-js@^2.5.7:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
+  integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -9384,6 +9397,11 @@ regenerate@^1.2.1, regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+
 regenerator-transform@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"