From 83d32cdc0ff0ba88cb3576e876973e427ba0d426 Mon Sep 17 00:00:00 2001 From: baron_l Date: Mon, 11 Mar 2019 19:58:37 +0100 Subject: [PATCH] refactor(app): webpack aliases for imports + async / await dep + start refactor --- .babelrc | 3 +- app/docker/__module.js | 3 +- app/docker/views/configs/configs.html | 4 +- app/docker/views/configs/configsController.js | 71 ++++--- .../configs/create/createConfigController.js | 199 ++++++++++-------- .../views/configs/create/createconfig.html | 20 +- package.json | 1 + webpack/webpack.common.js | 11 +- yarn.lock | 18 ++ 9 files changed, 195 insertions(+), 135 deletions(-) diff --git a/.babelrc b/.babelrc index bc70edda8..32beabad5 100644 --- a/.babelrc +++ b/.babelrc @@ -4,7 +4,8 @@ [ "@babel/preset-env", { - "modules": false + "modules": false, + "useBuiltIns": "usage" } ] ] diff --git a/app/docker/__module.js b/app/docker/__module.js index f763c4ea8..cb4960c4a 100644 --- 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' } } }; diff --git a/app/docker/views/configs/configs.html b/app/docker/views/configs/configs.html index 445153dc0..94d7997fb 100644 --- a/app/docker/views/configs/configs.html +++ b/app/docker/views/configs/configs.html @@ -11,10 +11,10 @@
diff --git a/app/docker/views/configs/configsController.js b/app/docker/views/configs/configsController.js index 9d073542b..6d07a6390 100644 --- 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); diff --git a/app/docker/views/configs/create/createConfigController.js b/app/docker/views/configs/create/createConfigController.js index c4aac4896..728b93e78 100644 --- 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); diff --git a/app/docker/views/configs/create/createconfig.html b/app/docker/views/configs/create/createconfig.html index 158cc4c2f..8bba59b43 100644 --- a/app/docker/views/configs/create/createconfig.html +++ b/app/docker/views/configs/create/createconfig.html @@ -14,19 +14,19 @@
- +
-
+
@@ -35,13 +35,13 @@
- + add label
-
+
name @@ -50,7 +50,7 @@ value
-
@@ -59,7 +59,7 @@
- +
@@ -67,8 +67,8 @@
- - {{ state.formValidationError }} + + {{ $ctrl.state.formValidationError }}
diff --git a/package.json b/package.json index e938a89e1..daf391a55 100644 --- 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", diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js index 3d379f100..9769acf42 100644 --- 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'), + } + }, }; diff --git a/yarn.lock b/yarn.lock index 49eb7ce8d..cf75c1e6c 100644 --- 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"