From 8f32517baa46eaceef3e179360681db466902af3 Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Thu, 9 Dec 2021 09:38:07 +0200 Subject: [PATCH] refactor(app): convert root folder files to es6 (#4159) --- app/__module.js | 55 ------------------- app/app.js | 72 +++++++++++-------------- app/config.js | 110 +++++++++++++++++--------------------- app/index.js | 61 +++++++++++++++++++++ webpack/webpack.common.js | 2 +- 5 files changed, 140 insertions(+), 160 deletions(-) delete mode 100644 app/__module.js create mode 100644 app/index.js diff --git a/app/__module.js b/app/__module.js deleted file mode 100644 index 06502aa36..000000000 --- a/app/__module.js +++ /dev/null @@ -1,55 +0,0 @@ -import './assets/css'; -import '@babel/polyfill'; - -import angular from 'angular'; -import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid'; - -import './matomo-setup'; -import analyticsModule from './angulartics.matomo'; - -import './agent'; -import './azure/_module'; -import './docker/__module'; -import './edge/__module'; -import './portainer/__module'; - -angular.module('portainer', [ - 'ui.bootstrap', - 'ui.router', - UI_ROUTER_REACT_HYBRID, - 'ui.select', - 'isteven-multi-select', - 'ngSanitize', - 'ngFileUpload', - 'ngMessages', - 'ngResource', - 'angularUtils.directives.dirPagination', - 'LocalStorageModule', - 'angular-jwt', - 'angular-json-tree', - 'angular-loading-bar', - 'angular-clipboard', - 'ngFileSaver', - 'luegg.directives', - 'portainer.app', - 'portainer.agent', - 'portainer.azure', - 'portainer.docker', - 'portainer.kubernetes', - 'portainer.edge', - 'portainer.integrations', - 'rzModule', - 'moment-picker', - 'angulartics', - analyticsModule, -]); - -if (require) { - var req = require.context('./', true, /^(.*\.(js$))[^.]*$/im); - req - .keys() - .filter((path) => !path.includes('.test')) - .forEach(function (key) { - req(key); - }); -} diff --git a/app/app.js b/app/app.js index 68f9a2ddc..10996f0d8 100644 --- a/app/app.js +++ b/app/app.js @@ -1,55 +1,43 @@ import $ from 'jquery'; import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models'; -angular.module('portainer').run([ - '$rootScope', - '$state', - '$interval', - 'LocalStorage', - 'EndpointProvider', - 'SystemService', - 'cfpLoadingBar', - '$transitions', - 'HttpRequestHelper', - function ($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemService, cfpLoadingBar, $transitions, HttpRequestHelper) { - 'use strict'; +/* @ngInject */ +export function onStartupAngular($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemService, cfpLoadingBar, $transitions, HttpRequestHelper) { + EndpointProvider.initialize(); - EndpointProvider.initialize(); + $rootScope.$state = $state; + $rootScope.defaultTitle = document.title; - $rootScope.$state = $state; - $rootScope.defaultTitle = document.title; + // Workaround to prevent the loading bar from going backward + // https://github.com/chieffancypants/angular-loading-bar/issues/273 + const originalSet = cfpLoadingBar.set; + cfpLoadingBar.set = function overrideSet(n) { + if (n > cfpLoadingBar.status()) { + originalSet.apply(cfpLoadingBar, arguments); + } + }; - // Workaround to prevent the loading bar from going backward - // https://github.com/chieffancypants/angular-loading-bar/issues/273 - var originalSet = cfpLoadingBar.set; - cfpLoadingBar.set = function overrideSet(n) { - if (n > cfpLoadingBar.status()) { - originalSet.apply(cfpLoadingBar, arguments); - } - }; + $transitions.onBefore({}, () => { + HttpRequestHelper.resetAgentHeaders(); + }); - $transitions.onBefore({}, function () { - HttpRequestHelper.resetAgentHeaders(); - }); + // Keep-alive Edge endpoints by sending a ping request every minute + $interval(() => { + ping(EndpointProvider, SystemService); + }, 60 * 1000); - // Keep-alive Edge endpoints by sending a ping request every minute - $interval(function () { - ping(EndpointProvider, SystemService); - }, 60 * 1000); - - $(document).ajaxSend(function (event, jqXhr, jqOpts) { - const type = jqOpts.type === 'POST' || jqOpts.type === 'PUT' || jqOpts.type === 'PATCH'; - const hasNoContentType = jqOpts.contentType !== 'application/json' && jqOpts.headers && !jqOpts.headers['Content-Type']; - if (type && hasNoContentType) { - jqXhr.setRequestHeader('Content-Type', 'application/json'); - } - jqXhr.setRequestHeader('Authorization', 'Bearer ' + LocalStorage.getJWT()); - }); - }, -]); + $(document).ajaxSend((event, jqXhr, jqOpts) => { + const type = jqOpts.type === 'POST' || jqOpts.type === 'PUT' || jqOpts.type === 'PATCH'; + const hasNoContentType = jqOpts.contentType !== 'application/json' && jqOpts.headers && !jqOpts.headers['Content-Type']; + if (type && hasNoContentType) { + jqXhr.setRequestHeader('Content-Type', 'application/json'); + } + jqXhr.setRequestHeader('Authorization', 'Bearer ' + LocalStorage.getJWT()); + }); +} function ping(EndpointProvider, SystemService) { - let endpoint = EndpointProvider.currentEndpoint(); + const endpoint = EndpointProvider.currentEndpoint(); if (endpoint !== undefined && endpoint.Type == PortainerEndpointTypes.EdgeAgentOnDockerEnvironment) { SystemService.ping(endpoint.Id); } diff --git a/app/config.js b/app/config.js index 2426ed100..26f639522 100644 --- a/app/config.js +++ b/app/config.js @@ -2,74 +2,60 @@ import toastr from 'toastr'; import { Terminal } from 'xterm'; import * as fit from 'xterm/lib/addons/fit/fit'; -angular.module('portainer').config([ - '$urlRouterProvider', - '$httpProvider', - 'localStorageServiceProvider', - 'jwtOptionsProvider', - '$uibTooltipProvider', - '$compileProvider', - 'cfpLoadingBarProvider', - function ($urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, $uibTooltipProvider, $compileProvider, cfpLoadingBarProvider) { - 'use strict'; +/* @ngInject */ +export function configApp($urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, $uibTooltipProvider, $compileProvider, cfpLoadingBarProvider) { + if (process.env.NODE_ENV === 'testing') { + $compileProvider.debugInfoEnabled(false); + } - if (process.env.NODE_ENV === 'testing') { - $compileProvider.debugInfoEnabled(false); - } + localStorageServiceProvider.setPrefix('portainer'); - localStorageServiceProvider.setPrefix('portainer'); + jwtOptionsProvider.config({ + tokenGetter: /* @ngInject */ function tokenGetter(LocalStorage) { + return LocalStorage.getJWT(); + }, + }); + $httpProvider.interceptors.push('jwtInterceptor'); + $httpProvider.interceptors.push('EndpointStatusInterceptor'); + $httpProvider.defaults.headers.post['Content-Type'] = 'application/json'; + $httpProvider.defaults.headers.put['Content-Type'] = 'application/json'; + $httpProvider.defaults.headers.patch['Content-Type'] = 'application/json'; - jwtOptionsProvider.config({ - tokenGetter: [ - 'LocalStorage', - function (LocalStorage) { - return LocalStorage.getJWT(); - }, - ], - }); - $httpProvider.interceptors.push('jwtInterceptor'); - $httpProvider.interceptors.push('EndpointStatusInterceptor'); - $httpProvider.defaults.headers.post['Content-Type'] = 'application/json'; - $httpProvider.defaults.headers.put['Content-Type'] = 'application/json'; - $httpProvider.defaults.headers.patch['Content-Type'] = 'application/json'; - - $httpProvider.interceptors.push([ - 'HttpRequestHelper', - function (HttpRequestHelper) { - return { - request: function (config) { - if (config.url.indexOf('/docker/') > -1) { - config.headers['X-PortainerAgent-Target'] = HttpRequestHelper.portainerAgentTargetHeader(); - if (HttpRequestHelper.portainerAgentManagerOperation()) { - config.headers['X-PortainerAgent-ManagerOperation'] = '1'; - } + $httpProvider.interceptors.push( + /* @ngInject */ function (HttpRequestHelper) { + return { + request(config) { + if (config.url.indexOf('/docker/') > -1) { + config.headers['X-PortainerAgent-Target'] = HttpRequestHelper.portainerAgentTargetHeader(); + if (HttpRequestHelper.portainerAgentManagerOperation()) { + config.headers['X-PortainerAgent-ManagerOperation'] = '1'; } - return config; - }, - }; - }, - ]); + } + return config; + }, + }; + } + ); - toastr.options = { - timeOut: 3000, - closeButton: true, - progressBar: true, - tapToDismiss: false, - }; + toastr.options = { + timeOut: 3000, + closeButton: true, + progressBar: true, + tapToDismiss: false, + }; - Terminal.applyAddon(fit); + Terminal.applyAddon(fit); - $uibTooltipProvider.setTriggers({ - mouseenter: 'mouseleave', - click: 'click', - focus: 'blur', - outsideClick: 'outsideClick', - }); + $uibTooltipProvider.setTriggers({ + mouseenter: 'mouseleave', + click: 'click', + focus: 'blur', + outsideClick: 'outsideClick', + }); - cfpLoadingBarProvider.includeSpinner = false; - cfpLoadingBarProvider.parentSelector = '#loadingbar-placeholder'; - cfpLoadingBarProvider.latencyThreshold = 600; + cfpLoadingBarProvider.includeSpinner = false; + cfpLoadingBarProvider.parentSelector = '#loadingbar-placeholder'; + cfpLoadingBarProvider.latencyThreshold = 600; - $urlRouterProvider.otherwise('/auth'); - }, -]); + $urlRouterProvider.otherwise('/auth'); +} diff --git a/app/index.js b/app/index.js new file mode 100644 index 000000000..0efd2671f --- /dev/null +++ b/app/index.js @@ -0,0 +1,61 @@ +import './assets/css'; +import '@babel/polyfill'; + +import angular from 'angular'; +import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid'; + +import './matomo-setup'; +import analyticsModule from './angulartics.matomo'; + +import './agent'; +import './azure/_module'; +import './docker/__module'; +import './edge/__module'; +import './portainer/__module'; + +import { onStartupAngular } from './app'; +import { configApp } from './config'; + +angular + .module('portainer', [ + 'ui.bootstrap', + 'ui.router', + UI_ROUTER_REACT_HYBRID, + 'ui.select', + 'isteven-multi-select', + 'ngSanitize', + 'ngFileUpload', + 'ngMessages', + 'ngResource', + 'angularUtils.directives.dirPagination', + 'LocalStorageModule', + 'angular-jwt', + 'angular-json-tree', + 'angular-loading-bar', + 'angular-clipboard', + 'ngFileSaver', + 'luegg.directives', + 'portainer.app', + 'portainer.agent', + 'portainer.azure', + 'portainer.docker', + 'portainer.kubernetes', + 'portainer.edge', + 'portainer.integrations', + 'rzModule', + 'moment-picker', + 'angulartics', + analyticsModule, + ]) + .run(onStartupAngular) + .config(configApp); + +if (require) { + const req = require.context('./', true, /^(.*\.(js$))[^.]*$/im); + req + .keys() + .filter((path) => !path.includes('.test')) + .forEach(function (key) { + req(key); + }); +} diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js index f003dbe59..3611d69a3 100644 --- a/webpack/webpack.common.js +++ b/webpack/webpack.common.js @@ -14,7 +14,7 @@ const projectRoot = path.resolve(__dirname, '..'); module.exports = { entry: { - main: './app/__module.js', + main: './app', }, output: { filename: '[name].[hash].js',