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

2019-03-11 19:58:37 +01:00 · 2019-03-11 19:58:37 +01:00 · 83d32cdc0f
parent cdf880a397
commit 83d32cdc0f
9 changed files with 195 additions and 135 deletions
--- a/.babelrc
+++ b/.babelrc
@ -4,7 +4,8 @@
    [
      "@babel/preset-env",
      {
-        "modules": false
+        "modules": false,
+        "useBuiltIns": "usage"
      }
    ]
  ]
--- a/app/docker/__module.js
+++ b/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'
      }
    }
  };
--- a/app/docker/views/configs/configs.html
+++ b/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>
--- a/app/docker/views/configs/configsController.js
+++ b/app/docker/views/configs/configsController.js
@ -1,38 +1,41 @@
-angular.module('portainer.docker')
-.controller('ConfigsController', ['$scope', '$state', 'ConfigService', 'Notifications',
-function ($scope, $state, ConfigService, Notifications) {
+import angular from 'angular';

-  $scope.removeAction = function (selectedItems) {
-    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();
-        }
-      });
-    });
-  };
+class ConfigsController {

-  function initView() {
-    ConfigService.configs()
-    .then(function success(data) {
-      $scope.configs = data;
-    })
-    .catch(function error(err) {
-      $scope.configs = [];
-      Notifications.error('Failure', err, 'Unable to retrieve configs');
-    });
+  /* @ngInject */
+  constructor($state, ConfigService, Notifications) {
+    this.$state = $state;
+    this.ConfigService = ConfigService;
+    this.Notifications = Notifications;
  }

-  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);
--- a/app/docker/views/configs/create/createConfigController.js
+++ b/app/docker/views/configs/create/createConfigController.js
@ -1,121 +1,148 @@
-import _ from 'lodash-es';
-import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
+import _ from "lodash-es";
+import { AccessControlFormData } from "Portainer/components/accessControlForm/porAccessControlFormModel";

-angular.module('portainer.docker')
-.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: ''
-  };
+import angular from "angular";

-  $scope.state = {
-    formValidationError: ''
-  };
+class CreateControllerConfig {
+  /* @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() {
-    $scope.formValues.Labels.push({ name: '', value: ''});
-  };
+    this.formValues = {
+      Name: "",
+      Labels: [],
+      AccessControlData: new AccessControlFormData(),
+      ConfigContent: ""
+    };

-  $scope.removeLabel = function(index) {
-    $scope.formValues.Labels.splice(index, 1);
-  };
+    this.state = {
+      formValidationError: ""
+    };
+  }

-  function prepareLabelsConfig(config) {
-    var labels = {};
-    $scope.formValues.Labels.forEach(function (label) {
+  addLabel() {
+    this.formValues.Labels.push({ name: "", value: "" });
+  }
+
+  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) {
-    var configData = $scope.formValues.ConfigContent;
+  prepareConfigData(config) {
+    let configData = this.formValues.ConfigContent;
    config.Data = btoa(unescape(encodeURIComponent(configData)));
  }

-  function prepareConfiguration() {
-    var config = {};
-    config.Name = $scope.formValues.Name;
-    prepareConfigData(config);
-    prepareLabelsConfig(config);
+  prepareConfiguration() {
+    let config = {};
+    config.Name = this.formValues.Name;
+    this.prepareConfigData(config);
+    this.prepareLabelsConfig(config);
    return config;
  }

-  function validateForm(accessControlData, isAdmin) {
-    $scope.state.formValidationError = '';
-    var error = '';
-    error = FormValidator.validateAccessControl(accessControlData, isAdmin);
+  validateForm(accessControlData, isAdmin) {
+    this.state.formValidationError = "";
+    let error = "";
+    error = this.FormValidator.validateAccessControl(
+      accessControlData,
+      isAdmin
+    );

    if (error) {
-      $scope.state.formValidationError = error;
+      this.state.formValidationError = error;
      return false;
    }
    return true;
  }

-  $scope.create = function () {
-    var accessControlData = $scope.formValues.AccessControlData;
-    var userDetails = Authentication.getUserDetails();
-    var isAdmin = userDetails.role === 1;
+  async create() {
+    let accessControlData = this.formValues.AccessControlData;
+    let userDetails = this.Authentication.getUserDetails();
+    let isAdmin = userDetails.role === 1;

-    if ($scope.formValues.ConfigContent === '') {
-      $scope.state.formValidationError = 'Config content must not be empty';
+    if (this.formValues.ConfigContent === "") {
+      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)
-    .then(function success(data) {
-      var configIdentifier = data.ID;
-      var userId = userDetails.ID;
-      return ResourceControlService.applyResourceControl('config', configIdentifier, userId, accessControlData, []);
-    })
-    .then(function success() {
-      Notifications.success('Config successfully created');
-      $state.go('docker.configs', {}, {reload: true});
-    })
-    .catch(function error(err) {
-      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;
+    try {
+      let data = await this.ConfigService.create(config);
+      let configIdentifier = data.ID;
+      let userId = userDetails.ID;
+      await this.ResourceControlService.applyResourceControl(
+        "config",
+        configIdentifier,
+        userId,
+        accessControlData,
+        []
+      );
+      this.Notifications.success("Config successfully created");
+      this.$state.go("docker.configs", {}, { reload: true });
+    } catch (err) {
+      this.Notifications.error("Failure", err, "Unable to create config");
    }
-
-    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);
--- a/app/docker/views/configs/create/createconfig.html
+++ b/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"
-                value="formValues.Data"
+                on-change="$ctrl.editorUpdate"
+                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>
-              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
+              <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;">{{ $ctrl.state.formValidationError }}</span>
            </div>
          </div>
          <!-- !actions -->
--- a/package.json
+++ b/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",
--- a/webpack/webpack.common.js
+++ b/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'),
+    }
+  },
 };
--- a/yarn.lock
+++ b/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"