From b9a820061de6152a23074b9e38bb48f734f9992f Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 11:26:05 +0100 Subject: [PATCH 1/9] Move admin part to es6 --- .../js/admin/vue-components/AccountingView.js | 89 +++++++------ .../admin/vue-components/ApplicationsView.js | 83 ++++++------ .../js/admin/vue-components/ContainersView.js | 62 +++++---- .../js/admin/vue-components/MainView.js | 78 ++++++------ .../js/admin/vue-components/UsersView.js | 73 ++++++----- .../accounting/NewAccountingDialog.js | 118 +++++++++--------- .../applications/NewApplicationDialog.js | 50 ++++---- .../vue-components/users/NewUserDialog.js | 44 +++---- 8 files changed, 293 insertions(+), 304 deletions(-) diff --git a/remoteappmanager/static/js/admin/vue-components/AccountingView.js b/remoteappmanager/static/js/admin/vue-components/AccountingView.js index 8dd2fb25a..79b7dc999 100644 --- a/remoteappmanager/static/js/admin/vue-components/AccountingView.js +++ b/remoteappmanager/static/js/admin/vue-components/AccountingView.js @@ -7,39 +7,38 @@ module.exports = { }, template: - '' + - '
Accounting for user {{ $route.params.id }}
' + - '
' + - '
' + - ' Error: {{communicationError}}' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - '
Do you want to remove accounting ' + - ' {{ removeAccountingDialog.accountingToRemove }}?' + - '
' + - ' ' + - '
' + - '', + ` +
Accounting for user {{ $route.params.id }}
+
+
+ Error: {{communicationError}} +
+ + + + + +
Do you want to remove accounting + {{ removeAccountingDialog.accountingToRemove }}? +
+ +
+ `, data: function () { - var self = this; return { table: { headers: [ @@ -48,7 +47,7 @@ module.exports = { rows: [], globalActions: [{ label: "Create New Entry", - callback: function() { self.newAccountingDialog.show = true; } + callback: () => { this.newAccountingDialog.show = true; } }], rowActions: [{ label: "Remove", @@ -76,14 +75,13 @@ module.exports = { methods: { updateTable: function() { - var self = this; this.communicationError = null; resources.Accounting.items({filter: JSON.stringify({user_id: this.$route.params.id })}) - .done(function (identifiers, items) { - self.table.rows = []; - identifiers.forEach(function(id) { + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { var item = items[id]; - self.table.rows.push([ + this.table.rows.push([ id, item.image_name, item.allow_home, @@ -93,8 +91,8 @@ module.exports = { ]); }); }) - .fail(function () { - self.communicationError = "The request could not be executed successfully"; + .fail(() => { + this.communicationError = "The request could not be executed successfully"; }); }, @@ -114,15 +112,14 @@ module.exports = { }, removeAccounting: function () { - var self = this; resources.Accounting.delete(this.removeAccountingDialog.accountingToRemove) - .done(function () { - self.closeRemoveAccountingDialog(); - self.updateTable(); + .done(() => { + this.closeRemoveAccountingDialog(); + this.updateTable(); }) - .fail(function () { - self.closeRemoveAccountingDialog(); - self.communicationError = "The request could not be executed successfully"; + .fail(() => { + this.closeRemoveAccountingDialog(); + this.communicationError = "The request could not be executed successfully"; }); } } diff --git a/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js b/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js index 82b85d25d..929805efc 100644 --- a/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js +++ b/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js @@ -7,44 +7,43 @@ module.exports = { }, template: - '' + - '
' + - '
' + - ' Error: {{communicationError}}' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - '
Do you want to remove Application ' + - ' {{removeApplicationDialog.applicationToRemove.name}} ' + - ' ({{removeApplicationDialog.applicationToRemove.id}})
' + - ' ' + - '
' + - '', + ` +
+
+ Error: {{communicationError}} +
+ + + + + +
Do you want to remove Application + {{removeApplicationDialog.applicationToRemove.name}} + ({{removeApplicationDialog.applicationToRemove.id}})
+ +
+ `, data: function () { - var self=this; return { table: { headers: ["ID", "Image"], rows: [], globalActions: [{ label: "Create New Entry", - callback: function() { self.newApplicationDialog.show = true; } + callback: () => { this.newApplicationDialog.show = true; } }], rowActions: [{ label: "Remove", @@ -74,21 +73,20 @@ module.exports = { methods: { updateTable: function() { - var self = this; this.communicationError = null; resources.Application.items() - .done(function (identifiers, items) { - self.table.rows = []; - identifiers.forEach(function(id) { + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { var item = items[id]; - self.table.rows.push([ + this.table.rows.push([ id, item.image_name ]); }); }) - .fail(function () { - self.communicationError = "The request could not be executed successfully"; + .fail(() => { + this.communicationError = "The request could not be executed successfully"; }); }, @@ -110,14 +108,13 @@ module.exports = { }, removeApplication: function () { - var self = this; resources.Application.delete(this.removeApplicationDialog.applicationToRemove.id) - .done(function () { - self.closeRemoveApplicationDialog(); - self.updateTable(); + .done(() => { + this.closeRemoveApplicationDialog(); + this.updateTable(); }) - .fail(function () { - self.closeRemoveApplicationDialog(); + .fail(() => { + this.closeRemoveApplicationDialog(); this.communicationError = "The request could not be executed successfully"; }); }, diff --git a/remoteappmanager/static/js/admin/vue-components/ContainersView.js b/remoteappmanager/static/js/admin/vue-components/ContainersView.js index 7a2c067ea..71285ef26 100644 --- a/remoteappmanager/static/js/admin/vue-components/ContainersView.js +++ b/remoteappmanager/static/js/admin/vue-components/ContainersView.js @@ -2,24 +2,24 @@ var resources = require("admin-resources"); module.exports = { template: - '' + - '
' + - ' Error: {{communicationError}}' + - '
' + - ' ' + - ' ' + - ' ' + - '
Do you want to stop container {{ stopContainerDialog.containerToStop }}?
' + - ' ' + - '', + ` +
+ Error: {{communicationError}} +
+ + + +
Do you want to stop container {{ stopContainerDialog.containerToStop }}?
+ + `, data: function () { return { @@ -45,14 +45,13 @@ module.exports = { methods: { updateTable: function() { - var self = this; this.communicationError = null; resources.Container.items() - .done(function (identifiers, items) { - self.table.rows = []; - identifiers.forEach(function(id) { + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { var item = items[id]; - self.table.rows.push([ + this.table.rows.push([ id, item.user, item.image_name, @@ -61,8 +60,8 @@ module.exports = { ]); }); }) - .fail(function () { - self.communicationError = "The request could not be executed successfully"; + .fail(() => { + this.communicationError = "The request could not be executed successfully"; }); }, @@ -72,15 +71,14 @@ module.exports = { }, stopContainer: function () { - var self = this; resources.Container.delete(this.stopContainerDialog.containerToStop) - .done(function () { - self.updateTable(); - self.closeStopContainerDialog(); + .done(() => { + this.updateTable(); + this.closeStopContainerDialog(); }) - .fail(function () { - self.closeStopContainerDialog(); - self.communicationError = "The request could not be executed successfully"; + .fail(() => { + this.closeStopContainerDialog(); + this.communicationError = "The request could not be executed successfully"; }); }, diff --git a/remoteappmanager/static/js/admin/vue-components/MainView.js b/remoteappmanager/static/js/admin/vue-components/MainView.js index b82cba9e4..ac7c3d051 100644 --- a/remoteappmanager/static/js/admin/vue-components/MainView.js +++ b/remoteappmanager/static/js/admin/vue-components/MainView.js @@ -2,41 +2,41 @@ var resources = require("admin-resources"); module.exports = { template: - '
' + - '
' + - '
' + - '
Statistics
' + - '
' + - '
' + - ' Error: {{communicationError}}' + - '
' + - '
' + - '
' + - '
Realm
' + - '
{{ realm }}
' + - '
' + - '
' + - '
Total users
' + - '
{{ num_total_users }}
' + - '
' + - '
' + - '
Number of applications
' + - '
{{ num_applications }}
' + - '
' + - '
' + - '
' + - '
Active users
' + - '
{{ num_active_users }}
' + - '
' + - '
' + - '
Running containers
' + - '
{{ num_running_containers }}
' + - '
' + - '
' + - '
' + - '
' + - '
' + - '
', + `
+
+
+
Statistics
+
+
+ Error: {{communicationError}} +
+
+
+
Realm
+
{{ realm }}
+
+
+
Total users
+
{{ num_total_users }}
+
+
+
Number of applications
+
{{ num_applications }}
+
+
+
+
Active users
+
{{ num_active_users }}
+
+
+
Running containers
+
{{ num_running_containers }}
+
+
+
+
+
+
`, data: function() { return { @@ -51,15 +51,15 @@ module.exports = { mounted: function() { resources.Stats.retrieve() - .done(function(rep) { + .done((rep) => { this.realm = rep.realm; this.num_total_users = rep.num_total_users; this.num_applications = rep.num_applications; this.num_active_users = rep.num_active_users; this.num_running_containers = rep.num_running_containers; - }.bind(this)) - .fail(function() { + }) + .fail(() => { this.communicationError = "The request could not be executed successfully"; - }.bind(this)); + }); } }; diff --git a/remoteappmanager/static/js/admin/vue-components/UsersView.js b/remoteappmanager/static/js/admin/vue-components/UsersView.js index b915f1d89..9fbc94301 100644 --- a/remoteappmanager/static/js/admin/vue-components/UsersView.js +++ b/remoteappmanager/static/js/admin/vue-components/UsersView.js @@ -7,39 +7,38 @@ module.exports = { }, template: - '' + - '
' + - ' Error: {{communicationError}}' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - '
Do you want to remove User {{removeUserDialog.userToRemove.name}} ' + - ' ({{removeUserDialog.userToRemove.id}})
' + - ' ' + - '', + ` +
+ Error: {{communicationError}} +
+ + + + +
Do you want to remove User {{removeUserDialog.userToRemove.name}} + ({{removeUserDialog.userToRemove.id}})
+ + `, data: function () { - var self = this; return { table: { headers: ["ID", "Username"], rows: [], globalActions: [{ label: "Create New Entry", - callback: function() { self.newUserDialog.show = true; } + callback: () => { this.newUserDialog.show = true; } }], rowActions: [{ label: "Policies", @@ -71,21 +70,20 @@ module.exports = { methods: { updateTable: function() { - var self = this; this.communicationError = null; resources.User.items() - .done(function (identifiers, items){ - self.table.rows = []; - identifiers.forEach(function(id) { + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { var item = items[id]; - self.table.rows.push([ + this.table.rows.push([ id, item.name ]); }); }) - .fail(function () { - self.communicationError = "The request could not be executed successfully"; + .fail(() => { + this.communicationError = "The request could not be executed successfully"; }); }, @@ -116,14 +114,13 @@ module.exports = { }, removeUser: function () { - var self = this; resources.User.delete(this.removeUserDialog.userToRemove.id) - .done(function() { - self.closeRemoveUserDialog(); - self.updateTable(); + .done(() => { + this.closeRemoveUserDialog(); + this.updateTable(); }) - .fail(function() { - self.closeRemoveUserDialog(); + .fail(() => { + this.closeRemoveUserDialog(); }); } } diff --git a/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js b/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js index 2da67a9df..d5b5d9282 100644 --- a/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js @@ -2,61 +2,61 @@ var resources = require("admin-resources"); module.exports = { template: - ' ' + - '

Create New Policy

' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' Image Name cannot be empty' + - ' ' + - ' ' + - ' ' + - '
' + - ' ' + - '
' + - ' ' + - ' ' + - '
' + - ' ' + - ' ' + - '
' + - ' ' + - ' Volume Source must be empty or an absolute path' + - ' ' + - ' ' + - ' ' + - ' ' + - '
' + - ' ' + - ' ' + - '
' + - ' ' + - ' Volume Target must be empty or an absolute path' + - ' ' + - ' ' + - ' ' + - '
' + - ' ' + - '
' + - ' ' + - '

Both Volume Source and Target must be defined

' + - '
' + - '
' + - ' Error: {{communicationError}}' + - '
' + - ' ' + - ' ' + - '
' + - ' ' + - '
' + - '', + ` +

Create New Policy

+
+ + + + + + Image Name cannot be empty + + + +
+ +
+ + +
+ + +
+ + Volume Source must be empty or an absolute path + + + + +
+ + +
+ + Volume Target must be empty or an absolute path + + + +
+ +
+ +

Both Volume Source and Target must be defined

+
+
+ Error: {{communicationError}} +
+ + +
+ +
+ `, props: ['show', "userId"], @@ -115,12 +115,12 @@ module.exports = { }; resources.Accounting.create(rep) - .done(function () { + .done(() => { this.$emit('created'); - }.bind(this)) - .fail(function () { + }) + .fail(() => { this.communicationError = "The request could not be executed successfully"; - }.bind(this)); + }); }, reset: function () { diff --git a/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js b/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js index 85f45aa72..2fd9f4145 100644 --- a/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js @@ -2,27 +2,27 @@ var resources = require("admin-resources"); module.exports = { template: - ' ' + - '

Create New Application

' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' Image Name cannot be empty' + - ' ' + - ' ' + - '
' + - '
' + - ' Error: {{communicationError}}' + - '
' + - ' ' + - ' ' + - '
' + - ' ' + - '
' + - ' ', + ` +

Create New Application

+
+ + + + + + Image Name cannot be empty + + +
+
+ Error: {{communicationError}} +
+ + +
+ +
+ `, props: ['show'], @@ -57,12 +57,12 @@ module.exports = { return; } resources.Application.create({image_name: this.model.name}) - .done(function () { + .done(() => { this.$emit('created'); - }.bind(this)) - .fail(function () { + }) + .fail(() => { this.communicationError = "The request could not be executed successfully"; - }.bind(this)); + }); }, reset: function () { diff --git a/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js b/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js index 46d481d36..a136c0f15 100644 --- a/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js @@ -2,24 +2,24 @@ var resources = require("admin-resources"); module.exports = { template: - '' + - '

Create New User

' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' User Name cannot be empty' + - ' ' + - ' ' + - '
' + - ' ' + - ' ' + - '
' + - ' ' + - '
' + - '', + ` +

Create New User

+
+ + + + + + User Name cannot be empty + + +
+ + +
+ +
+ `, props: ['show'], @@ -53,12 +53,12 @@ module.exports = { return; } resources.User.create({name: this.model.name}) - .done((function () { + .done(() => { this.$emit('created'); - }).bind(this)) - .fail(function () { + }) + .fail(() => { this.$emit("closed"); - }.bind(this)); + }); }, reset: function () { From dfb05674c246aa7500df658dbeb22a56302ba263 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 11:56:03 +0100 Subject: [PATCH 2/9] Change use part --- .../static/js/user/configurables.js | 46 +-- remoteappmanager/static/js/user/models.js | 278 +++++++++--------- .../js/user/views/application_list_view.js | 114 +++---- .../static/js/user/views/application_view.js | 167 ++++++----- 4 files changed, 304 insertions(+), 301 deletions(-) diff --git a/remoteappmanager/static/js/user/configurables.js b/remoteappmanager/static/js/user/configurables.js index 1a1f20e83..36514984b 100644 --- a/remoteappmanager/static/js/user/configurables.js +++ b/remoteappmanager/static/js/user/configurables.js @@ -7,14 +7,14 @@ var resolutionComponent = Vue.component(resolutionTag + '-component', { props: ['configDict'], template: - '
' + - ' ' + - ' ' + - '
', + `
+ + +
`, data: function() { return { @@ -30,20 +30,22 @@ var resolutionComponent = Vue.component(resolutionTag + '-component', { }); // Your configurable class must implement a tag and default configDict -var ResolutionModel = function() { - this.tag = resolutionTag; - this.configDict = { resolution: 'Window' }; -}; - -ResolutionModel.prototype.asConfigDict = function() { - var resolution = this.configDict.resolution; - - if (resolution === 'Window') { - var maxSize = utils.maxIframeSize(); - resolution = maxSize[0] + 'x' + maxSize[1]; - } - - return { resolution: resolution }; +class ResolutionModel { + constructor() { + this.tag = resolutionTag; + this.configDict = { resolution: 'Window' }; + }; + + asConfigDict() { + var resolution = this.configDict.resolution; + + if (resolution === 'Window') { + var maxSize = utils.maxIframeSize(); + resolution = maxSize[0] + 'x' + maxSize[1]; + } + + return { resolution: resolution }; + }; }; var outputConfigurables = {}; diff --git a/remoteappmanager/static/js/user/models.js b/remoteappmanager/static/js/user/models.js index 5e8516106..7429c2f1f 100644 --- a/remoteappmanager/static/js/user/models.js +++ b/remoteappmanager/static/js/user/models.js @@ -21,183 +21,185 @@ var availableApplicationsInfo = function () { var promise = $.Deferred(); resources.Application.items() - .done(function (identifiers, items) { + .done((identifiers, items) => { var result = []; - Object.keys(items).forEach(function(key) { + Object.keys(items).forEach((key) => { result.push(items[key]); }); promise.resolve(result); }) - .fail(function() { + .fail(() => { promise.resolve([]); }); return promise; }; -var ApplicationListModel = function() { - // (constructor) Model for the application list. - this.appList = []; - // Selection index for when we click on one entry. - // Should be the index of the selected application, - // or null if no application available (first app is clicked by default). - this.selectedIndex = null; +class ApplicationListModel { + constructor() { + this.appList = []; + + // Selection index for when we click on one entry. + // Should be the index of the selected application, + // or null if no application available (first app is clicked by default). + this.selectedIndex = null; + + this.loading = true; + }; + + update() { + // Requests an update of the object internal data. + // This method returns a jQuery Promise object. + // When resolved, this.data will contain a list of the retrieved + // data. Note that, in error conditions, this routine resolves + // successfully in any case, and the data is set to empty list + return $.when( + availableApplicationsInfo() + ).done((appData) => { + // appData contains the data retrieved from the remote API + + var appList = []; + + // Sort application list by names + appData.sort((app1, app2) => { + var app1Name = app1.image.ui_name? app1.image.ui_name: app1.image.name; + var app2Name = app2.image.ui_name? app2.image.ui_name: app2.image.name; + return app1Name < app2Name? -1: 1; + }); - this.loading = true; -}; + // Add the options for some image types + appData.forEach((applicationData) => { + var app = { + appData: applicationData, + // Default values, will be overwritten + status: Status.STOPPED, + // If true the user will see the loading spinner (when starting the application) + delayed: true, + configurables: [], + isRunning: function() {return this.status === Status.RUNNING;}, + isStopped: function() {return this.status === Status.STOPPED;}, + isStarting: function() {return this.status === Status.STARTING;}, + isStopping: function() {return this.status === Status.STOPPING;} + }; + + this._updateConfigurables(app); + this._updateStatus(app); + + app.delayed = !app.isRunning(); + appList.push(app); + }); -ApplicationListModel.prototype.update = function() { - // Requests an update of the object internal data. - // This method returns a jQuery Promise object. - // When resolved, this.data will contain a list of the retrieved - // data. Note that, in error conditions, this routine resolves - // successfully in any case, and the data is set to empty list - return $.when( - availableApplicationsInfo() - ).done(function (appData) { - // appData contains the data retrieved from the remote API - - var appList = []; - - // Sort application list by names - appData.sort(function(app1, app2) { - var app1Name = app1.image.ui_name? app1.image.ui_name: app1.image.name; - var app2Name = app2.image.ui_name? app2.image.ui_name: app2.image.name; - return app1Name < app2Name? -1: 1; - }); + this.appList = appList; - // Add the options for some image types - appData.forEach(function(applicationData) { - var app = { - appData: applicationData, - // Default values, will be overwritten - status: Status.STOPPED, - // If true the user will see the loading spinner (when starting the application) - delayed: true, - configurables: [], - isRunning: function() {return this.status === Status.RUNNING;}, - isStopped: function() {return this.status === Status.STOPPED;}, - isStarting: function() {return this.status === Status.STARTING;}, - isStopping: function() {return this.status === Status.STOPPING;} - }; - - this._updateConfigurables(app); - this._updateStatus(app); + if(appList.length) {this.selectedIndex = 0;} - app.delayed = !app.isRunning(); - appList.push(app); - }.bind(this)); + this.loading = false; + }); + }; - this.appList = appList; + updateIdx(index) { + // Refetches and updates the entry at the given index. + var app = this.appList[index]; + var mapping_id = app.appData.mapping_id; - if(appList.length) {this.selectedIndex = 0;} + return resources.Application.retrieve(mapping_id) + .done((newData) => { + app.appData = newData; - this.loading = false; - }.bind(this)); -}; + this._updateStatus(app); + }); + }; + + _updateConfigurables(app) { + // Contains the submodels for the configurables. + // It is a dictionary that maps a supported (by the image) configurable tag + // to its client-side model. + app.configurables = []; + + app.appData.image.configurables.forEach(function(tag) { + // If this returns null, the tag has not been recognized + // by the client. skip it and let the server deal with the + // missing data, either by using a default or throwing + // an error. + var ConfigurableCls = configurables[tag].model; + + if (ConfigurableCls !== undefined) { + app.configurables.push(new ConfigurableCls()); + } + }); + }; -ApplicationListModel.prototype.updateIdx = function(index) { - // Refetches and updates the entry at the given index. - var app = this.appList[index]; - var mapping_id = app.appData.mapping_id; + _updateStatus(app) { + if (app.appData.container === undefined) { + app.status = Status.STOPPED; + } else { + app.status = Status.RUNNING; + } + }; - return resources.Application.retrieve(mapping_id) - .done(function(newData) { - app.appData = newData; + startApplication() { + var selectedIndex = this.selectedIndex; + var currentApp = this.appList[selectedIndex]; - this._updateStatus(app); - }.bind(this)); -}; + currentApp.status = Status.STARTING; + currentApp.delayed = true; -ApplicationListModel.prototype._updateConfigurables = function(app) { - // Contains the submodels for the configurables. - // It is a dictionary that maps a supported (by the image) configurable tag - // to its client-side model. - app.configurables = []; - - app.appData.image.configurables.forEach(function(tag) { - // If this returns null, the tag has not been recognized - // by the client. skip it and let the server deal with the - // missing data, either by using a default or throwing - // an error. - var ConfigurableCls = configurables[tag].model; - - if (ConfigurableCls !== undefined) { - app.configurables.push(new ConfigurableCls()); - } - }); -}; + var configurablesData = {}; + currentApp.configurables.forEach(function(configurable) { + var tag = configurable.tag; + configurablesData[tag] = configurable.asConfigDict(); + }); -ApplicationListModel.prototype._updateStatus = function(app) { - if (app.appData.container === undefined) { - app.status = Status.STOPPED; - } else { - app.status = Status.RUNNING; - } -}; + var startPromise = $.Deferred(); -ApplicationListModel.prototype.startApplication = function() { - var selectedIndex = this.selectedIndex; - var currentApp = this.appList[selectedIndex]; - - currentApp.status = Status.STARTING; - currentApp.delayed = true; - - var configurablesData = {}; - currentApp.configurables.forEach(function(configurable) { - var tag = configurable.tag; - configurablesData[tag] = configurable.asConfigDict(); - }); - - var startPromise = $.Deferred(); - - resources.Container.create({ - mapping_id: currentApp.appData.mapping_id, - configurables: configurablesData - }) - .done(function() { - this.updateIdx(selectedIndex) - .done(startPromise.resolve) - .fail(function(error) { + resources.Container.create({ + mapping_id: currentApp.appData.mapping_id, + configurables: configurablesData + }) + .done(() => { + this.updateIdx(selectedIndex) + .done(startPromise.resolve) + .fail((error) => { + currentApp.status = Status.STOPPED; + startPromise.reject(error); + }); + }) + .fail((error) => { currentApp.status = Status.STOPPED; startPromise.reject(error); }); - }.bind(this)) - .fail(function(error) { - currentApp.status = Status.STOPPED; - startPromise.reject(error); - }); - return startPromise; -}; + return startPromise; + }; -ApplicationListModel.prototype.stopApplication = function(index) { - var appStopping = this.appList[index]; - appStopping.status = Status.STOPPING; + stopApplication(index) { + var appStopping = this.appList[index]; + appStopping.status = Status.STOPPING; - var url_id = appStopping.appData.container.url_id; + var url_id = appStopping.appData.container.url_id; - var stopPromise = $.Deferred(); + var stopPromise = $.Deferred(); - resources.Container.delete(url_id) - .done(function() { - this.updateIdx(index) - .done(stopPromise.resolve) - .fail(function(error) { + resources.Container.delete(url_id) + .done(() => { + this.updateIdx(index) + .done(stopPromise.resolve) + .fail(function(error) { + appStopping.status = Status.STOPPED; + stopPromise.reject(error); + }); + }) + .fail((error) => { appStopping.status = Status.STOPPED; stopPromise.reject(error); }); - }.bind(this)) - .fail(function(error) { - appStopping.status = Status.STOPPED; - stopPromise.reject(error); - }); - return stopPromise; + return stopPromise; + }; }; module.exports = { - ApplicationListModel: ApplicationListModel + ApplicationListModel }; diff --git a/remoteappmanager/static/js/user/views/application_list_view.js b/remoteappmanager/static/js/user/views/application_list_view.js index 4a0ee8a46..00a58c846 100644 --- a/remoteappmanager/static/js/user/views/application_list_view.js +++ b/remoteappmanager/static/js/user/views/application_list_view.js @@ -3,66 +3,66 @@ require("toolkit"); var ApplicationListView = Vue.extend({ template: - '
' + - ' ' + - ' ' + - '
' + - ' Code: {{stoppingError.code}}' + - ' {{stoppingError.message}}' + - '
' + - ' ' + + `
+ + +
+ Code: {{stoppingError.code}} + {{stoppingError.message}} +
+ - '' + - '
' + - ' ' + - '
' + + +
+ +
- '' + - '
    ' + - '
  • APPLICATIONS
    • ' + - '
' + + +
    +
  • APPLICATIONS
    • +
- ' - ' ' + - '' + - '
  • ' + + + +
  • - ' ' + + - ' ' + - ' ' + + + - ' ' + - ' {{ app.appData.image | appName }}' + - ' ' + - '
    • ' + - '    ' + - '' + - '
    ' + - '', + + {{ app.appData.image | appName }} + + + + +
    + `, data: function() { return { @@ -73,10 +73,10 @@ var ApplicationListView = Vue.extend({ computed: { visibleList: function() { - return this.model.appList.filter(function(app) { + return this.model.appList.filter((app) => { var appName = this.$options.filters.appName(app.appData.image).toLowerCase(); return appName.indexOf(this.searchInput.toLowerCase()) !== -1; - }.bind(this)); + }); } }, @@ -84,12 +84,12 @@ var ApplicationListView = Vue.extend({ stopApplication: function(index) { var stoppingAppName = this.$options.filters.appName( this.model.appList[index].appData.image); - this.model.stopApplication(index).fail(function(error) { + this.model.stopApplication(index).fail((error) => { this.stoppingError.code = error.code; this.stoppingError.message = error.message; this.stoppingError.appName = stoppingAppName; this.stoppingError.show = true; - }.bind(this)); + }); }, closeDialog: function() { this.stoppingError.show = false; @@ -101,5 +101,5 @@ var ApplicationListView = Vue.extend({ }); module.exports = { - ApplicationListView : ApplicationListView + ApplicationListView }; diff --git a/remoteappmanager/static/js/user/views/application_view.js b/remoteappmanager/static/js/user/views/application_view.js index 5b3ce899c..01b634356 100644 --- a/remoteappmanager/static/js/user/views/application_view.js +++ b/remoteappmanager/static/js/user/views/application_view.js @@ -5,85 +5,84 @@ require("toolkit"); var ApplicationView = Vue.extend({ template: - '' + - '
    ' + - ' ' + - ' ' + - '
    ' + - ' Code: {{startingError.code}}' + - ' {{startingError.message}}' + - '
    ' + - '     ' + - - ' ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '

    {{ currentApp.appData.image | appName }}

    ' + - '
    ' + - '
    ' + - '
    ' + - '

    Description

    ' + - ' {{ currentApp.appData.image.description }}' + - - '

    Policy

    ' + - - '
      ' + - ' ' + - '
    • ' + - ' Workspace accessible' + - '
      • ' + - '
    • ' + - ' Workspace not accessible' + - '
      • ' + - - ' ' + - '
    • ' + - ' Volume mounted: {{ appPolicy.volume_source }} → {{ appPolicy.volume_target }} ({{ appPolicy.volume_mode }})' + - '
      • ' + - '
    • ' + - ' No volumes mounted' + - '
      • ' + - '
    ' + - - '

    Configuration

    ' + - '
    ' + - '
    No configurable options for this image
    ' + - '
    ' + - ' ' + - '
    ' + - '
    ' + - '
    ' + - - ' ' + - '
    ' + - ' ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - - - ' ' + - ' ' + - '
    ', + ` +
    + + +
    + Code: {{startingError.code}} + {{startingError.message}} +
    +     + + +
    +
    +
    +
    +

    {{ currentApp.appData.image | appName }}

    +
    +
    +
    +

    Description

    + {{ currentApp.appData.image.description }} + +

    Policy

    + +
      + +
    • + Workspace accessible +
      • +
    • + Workspace not accessible +
      • + + +
    • + Volume mounted: {{ appPolicy.volume_source }} → {{ appPolicy.volume_target }} ({{ appPolicy.volume_mode }}) +
      • +
    • + No volumes mounted +
      • +
    + +

    Configuration

    +
    +
    No configurable options for this image
    +
    + +
    +
    +
    + + +
    + +
    +
    +
    +
    + + + +
    `, data: function() { return { @@ -117,15 +116,15 @@ var ApplicationView = Vue.extend({ var startingApp = this.currentApp; var startingAppName = this.$options.filters.appName(startingApp.appData.image); this.model.startApplication() - .done(function() { + .done(() => { this.$emit('startApplication', startingApp); - }.bind(this)) - .fail(function(error) { + }) + .fail((error) => { this.startingError.code = error.code; this.startingError.message = error.message; this.startingError.appName = startingAppName; this.startingError.show = true; - }.bind(this)); + }); }, closeDialog: function() { this.startingError.show = false; @@ -145,5 +144,5 @@ var ApplicationView = Vue.extend({ }); module.exports = { - ApplicationView : ApplicationView + ApplicationView }; From 8a925a08b6b8b84d5c708b8b440f6726925f0191 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 12:06:45 +0100 Subject: [PATCH 3/9] Change vue components --- .../static/js/vue/toolkit/AdminLTEBox.js | 16 ++--- .../static/js/vue/toolkit/ConfirmDialog.js | 28 ++++----- .../static/js/vue/toolkit/DataTable.js | 59 +++++++++---------- .../static/js/vue/toolkit/ModalDialog.js | 20 +++---- .../static/js/vue/toolkit/toolkit.js | 8 +-- 5 files changed, 64 insertions(+), 67 deletions(-) diff --git a/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js b/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js index 83aa72b84..ad564fc13 100644 --- a/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js +++ b/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js @@ -6,12 +6,12 @@ module.exports = { } }, template: - '
    ' + - '
    ' + - '
    ' + - '
    {{title}}
    ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + `
    +
    +
    +
    {{title}}
    +
    +
    +
    +
    ` }; diff --git a/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js b/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js index c82188cf3..3a366de09 100644 --- a/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js +++ b/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js @@ -13,18 +13,18 @@ module.exports = { default: function() {} } }, - template: '' + - '
    ' + - '
    ' + - '
    ' + - '

    {{ title }}

    ' + - '
    ' + - '
    ' + - ' ' + - ' ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '    ' + template: ` +
    +
    +
    +

    {{ title }}

    +
    +
    + + +
    +
    +
    +
    +     ` }; diff --git a/remoteappmanager/static/js/vue/toolkit/DataTable.js b/remoteappmanager/static/js/vue/toolkit/DataTable.js index 3845ddac9..f3b119f1c 100644 --- a/remoteappmanager/static/js/vue/toolkit/DataTable.js +++ b/remoteappmanager/static/js/vue/toolkit/DataTable.js @@ -6,41 +6,38 @@ module.exports = { isBoolean: function(value) { return typeof(value) === "boolean"; }, - buttonClassFromType: function(value) { + buttonClassFromType: function(value = "danger") { var cls = {"btn": true}; - if (value === undefined) { - value = "danger"; - } cls["btn-" + value] = true; return cls; } }, template: - '
    ' + - '
    ' + - ' ' + - '
    ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - '
    {{header}}Actions
    ' + - ' ' + - '
    ' + - '
    ' + `
    +
    + +
    + + + + + + + + + + + + + +
    {{header}}Actions
    + +
    +
    ` }; diff --git a/remoteappmanager/static/js/vue/toolkit/ModalDialog.js b/remoteappmanager/static/js/vue/toolkit/ModalDialog.js index 61a7059a6..129fb0d5d 100644 --- a/remoteappmanager/static/js/vue/toolkit/ModalDialog.js +++ b/remoteappmanager/static/js/vue/toolkit/ModalDialog.js @@ -1,12 +1,12 @@ module.exports = { - template: '' + - '
    ' + - '
    ' + - '
    ' + - ' ' + - ' ' + - '
    ' + - '
    ' + - '
    ' + - '    ' + template: ` +
    +
    +
    + + +
    +
    +
    +     ` }; \ No newline at end of file diff --git a/remoteappmanager/static/js/vue/toolkit/toolkit.js b/remoteappmanager/static/js/vue/toolkit/toolkit.js index b1018e319..b10fe9317 100644 --- a/remoteappmanager/static/js/vue/toolkit/toolkit.js +++ b/remoteappmanager/static/js/vue/toolkit/toolkit.js @@ -10,8 +10,8 @@ Vue.component("adminlte-box", AdminLTEBox); Vue.component("data-table", DataTable); module.exports = { - ConfirmDialog: ConfirmDialog, - AdminLTEBox: AdminLTEBox, - ModalDialog: ModalDialog, - DataTable: DataTable + ConfirmDialog, + AdminLTEBox, + ModalDialog, + DataTable }; From 210ec0ab964b0c25032e5e26eb5c2182ccfab73e Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 12:10:45 +0100 Subject: [PATCH 4/9] Change utils --- remoteappmanager/static/js/gamodule.js | 24 +++++++++++++----------- remoteappmanager/static/js/urlutils.js | 6 +++--- remoteappmanager/static/js/utils.js | 6 +++--- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/remoteappmanager/static/js/gamodule.js b/remoteappmanager/static/js/gamodule.js index cd71bd96e..bd31cd7a9 100644 --- a/remoteappmanager/static/js/gamodule.js +++ b/remoteappmanager/static/js/gamodule.js @@ -14,19 +14,21 @@ function init() { }; } -var GaObserver = function() { - this.ga = init(); -}; +class GaObserver { + constructor() { + this.ga = init(); + }; -GaObserver.prototype.triggerApplicationStarting = function(name) { - this.ga("send", "event", { - eventCategory: "Application", - eventAction: "start", - eventLabel: name - }); + triggerApplicationStarting(name) { + this.ga("send", "event", { + eventCategory: "Application", + eventAction: "start", + eventLabel: name + }); + }; }; module.exports = { - init: init, // For testing purpose - GaObserver: GaObserver + init, // For testing purpose + GaObserver }; diff --git a/remoteappmanager/static/js/urlutils.js b/remoteappmanager/static/js/urlutils.js index 700c7400b..fc3602c32 100644 --- a/remoteappmanager/static/js/urlutils.js +++ b/remoteappmanager/static/js/urlutils.js @@ -44,7 +44,7 @@ var encodeUriComponents = function (uri) { }; module.exports = { - pathJoin: pathJoin, - encodeUriComponents: encodeUriComponents, - parse: parse + pathJoin, + encodeUriComponents, + parse }; diff --git a/remoteappmanager/static/js/utils.js b/remoteappmanager/static/js/utils.js index ebdb3077b..902322cf9 100644 --- a/remoteappmanager/static/js/utils.js +++ b/remoteappmanager/static/js/utils.js @@ -41,7 +41,7 @@ var maxIframeSize = function () { }; module.exports = { - all : all, - update : update, - maxIframeSize: maxIframeSize + all, + update, + maxIframeSize }; From dffd7c75b363bd24e83be50bd1443a2d6bc7f540 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 12:14:11 +0100 Subject: [PATCH 5/9] Change es version for jshint --- .jshintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.jshintrc b/.jshintrc index cc77b267f..a12e6147d 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,4 +1,5 @@ { + "esversion": 6, "passfail" : false, "maxerr" : 100, "browser" : true, @@ -8,7 +9,6 @@ ], "debug" : false, "devel" : true, - "es5" : true, "strict" : false, "globalstrict" : false, "asi" : false, From 6966e9ad603b6cea41e00e3929b7ad875ae3a538 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 12:16:35 +0100 Subject: [PATCH 6/9] Fix jstest --- remoteappmanager/static/js/gamodule.js | 6 +++--- remoteappmanager/static/js/user/configurables.js | 6 +++--- remoteappmanager/static/js/user/models.js | 16 ++++++++-------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/remoteappmanager/static/js/gamodule.js b/remoteappmanager/static/js/gamodule.js index bd31cd7a9..90e2f1443 100644 --- a/remoteappmanager/static/js/gamodule.js +++ b/remoteappmanager/static/js/gamodule.js @@ -17,7 +17,7 @@ function init() { class GaObserver { constructor() { this.ga = init(); - }; + } triggerApplicationStarting(name) { this.ga("send", "event", { @@ -25,8 +25,8 @@ class GaObserver { eventAction: "start", eventLabel: name }); - }; -}; + } +} module.exports = { init, // For testing purpose diff --git a/remoteappmanager/static/js/user/configurables.js b/remoteappmanager/static/js/user/configurables.js index 36514984b..02de9cbe4 100644 --- a/remoteappmanager/static/js/user/configurables.js +++ b/remoteappmanager/static/js/user/configurables.js @@ -34,7 +34,7 @@ class ResolutionModel { constructor() { this.tag = resolutionTag; this.configDict = { resolution: 'Window' }; - }; + } asConfigDict() { var resolution = this.configDict.resolution; @@ -45,8 +45,8 @@ class ResolutionModel { } return { resolution: resolution }; - }; -}; + } +} var outputConfigurables = {}; diff --git a/remoteappmanager/static/js/user/models.js b/remoteappmanager/static/js/user/models.js index 7429c2f1f..dd7426777 100644 --- a/remoteappmanager/static/js/user/models.js +++ b/remoteappmanager/static/js/user/models.js @@ -47,7 +47,7 @@ class ApplicationListModel { this.selectedIndex = null; this.loading = true; - }; + } update() { // Requests an update of the object internal data. @@ -97,7 +97,7 @@ class ApplicationListModel { this.loading = false; }); - }; + } updateIdx(index) { // Refetches and updates the entry at the given index. @@ -110,7 +110,7 @@ class ApplicationListModel { this._updateStatus(app); }); - }; + } _updateConfigurables(app) { // Contains the submodels for the configurables. @@ -129,7 +129,7 @@ class ApplicationListModel { app.configurables.push(new ConfigurableCls()); } }); - }; + } _updateStatus(app) { if (app.appData.container === undefined) { @@ -137,7 +137,7 @@ class ApplicationListModel { } else { app.status = Status.RUNNING; } - }; + } startApplication() { var selectedIndex = this.selectedIndex; @@ -172,7 +172,7 @@ class ApplicationListModel { }); return startPromise; - }; + } stopApplication(index) { var appStopping = this.appList[index]; @@ -197,8 +197,8 @@ class ApplicationListModel { }); return stopPromise; - }; -}; + } +} module.exports = { ApplicationListModel From a2843ef53b14531f84fa525da155fd11eeb530c6 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 12:44:37 +0100 Subject: [PATCH 7/9] var -> let --- remoteappmanager/static/js/admin/main.js | 22 ++++----- .../js/admin/vue-components/AccountingView.js | 6 +-- .../admin/vue-components/ApplicationsView.js | 6 +-- .../js/admin/vue-components/ContainersView.js | 4 +- .../js/admin/vue-components/MainView.js | 2 +- .../js/admin/vue-components/UsersView.js | 6 +-- .../accounting/NewAccountingDialog.js | 8 ++-- .../applications/NewApplicationDialog.js | 2 +- .../vue-components/users/NewUserDialog.js | 2 +- remoteappmanager/static/js/urlutils.js | 10 ++-- .../static/js/user/configurables.js | 14 +++--- remoteappmanager/static/js/user/main.js | 16 +++---- remoteappmanager/static/js/user/models.js | 48 +++++++++---------- .../js/user/views/application_list_view.js | 8 ++-- .../static/js/user/views/application_view.js | 18 +++---- remoteappmanager/static/js/utils.js | 10 ++-- remoteappmanager/static/js/vue/filters.js | 4 +- .../static/js/vue/toolkit/DataTable.js | 2 +- .../static/js/vue/toolkit/toolkit.js | 10 ++-- 19 files changed, 99 insertions(+), 99 deletions(-) diff --git a/remoteappmanager/static/js/admin/main.js b/remoteappmanager/static/js/admin/main.js index 7d680f022..df96b730d 100644 --- a/remoteappmanager/static/js/admin/main.js +++ b/remoteappmanager/static/js/admin/main.js @@ -1,13 +1,13 @@ -var _ = require("lodash"); -var Vue = require("vuejs"); -var VueRouter = require("vue-router"); -var VueForm = require("vue-form"); +let _ = require("lodash"); +let Vue = require("vuejs"); +let VueRouter = require("vue-router"); +let VueForm = require("vue-form"); require("toolkit"); -var MainView = require("./vue-components/MainView"); -var ContainersView = require("./vue-components/ContainersView"); -var UsersView = require("./vue-components/UsersView"); -var ApplicationsView = require("./vue-components/ApplicationsView"); -var AccountingView = require("./vue-components/AccountingView"); +let MainView = require("./vue-components/MainView"); +let ContainersView = require("./vue-components/ContainersView"); +let UsersView = require("./vue-components/UsersView"); +let ApplicationsView = require("./vue-components/ApplicationsView"); +let AccountingView = require("./vue-components/AccountingView"); // install router Vue.use(VueRouter); @@ -22,7 +22,7 @@ Vue.filter("truncate", function(value) { return _.truncate(value, {'length': 12 }); }); -var router = new VueRouter({ +let router = new VueRouter({ routes: [ { path: '/', component: MainView }, { path: '/containers', component: ContainersView }, @@ -32,7 +32,7 @@ var router = new VueRouter({ ] }); -var vm; +let vm; vm = new Vue({ el: "#app", router: router diff --git a/remoteappmanager/static/js/admin/vue-components/AccountingView.js b/remoteappmanager/static/js/admin/vue-components/AccountingView.js index 79b7dc999..0bf9dbc7a 100644 --- a/remoteappmanager/static/js/admin/vue-components/AccountingView.js +++ b/remoteappmanager/static/js/admin/vue-components/AccountingView.js @@ -1,5 +1,5 @@ -var resources = require("admin-resources"); -var NewAccountingDialog = require("./accounting/NewAccountingDialog"); +let resources = require("admin-resources"); +let NewAccountingDialog = require("./accounting/NewAccountingDialog"); module.exports = { components: { @@ -80,7 +80,7 @@ module.exports = { .done((identifiers, items) => { this.table.rows = []; identifiers.forEach((id) => { - var item = items[id]; + let item = items[id]; this.table.rows.push([ id, item.image_name, diff --git a/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js b/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js index 929805efc..b193d6477 100644 --- a/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js +++ b/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js @@ -1,5 +1,5 @@ -var resources = require("admin-resources"); -var NewApplicationDialog = require("./applications/NewApplicationDialog"); +let resources = require("admin-resources"); +let NewApplicationDialog = require("./applications/NewApplicationDialog"); module.exports = { components: { @@ -78,7 +78,7 @@ module.exports = { .done((identifiers, items) => { this.table.rows = []; identifiers.forEach((id) => { - var item = items[id]; + let item = items[id]; this.table.rows.push([ id, item.image_name diff --git a/remoteappmanager/static/js/admin/vue-components/ContainersView.js b/remoteappmanager/static/js/admin/vue-components/ContainersView.js index 71285ef26..9e9e28f3f 100644 --- a/remoteappmanager/static/js/admin/vue-components/ContainersView.js +++ b/remoteappmanager/static/js/admin/vue-components/ContainersView.js @@ -1,4 +1,4 @@ -var resources = require("admin-resources"); +let resources = require("admin-resources"); module.exports = { template: @@ -50,7 +50,7 @@ module.exports = { .done((identifiers, items) => { this.table.rows = []; identifiers.forEach((id) => { - var item = items[id]; + let item = items[id]; this.table.rows.push([ id, item.user, diff --git a/remoteappmanager/static/js/admin/vue-components/MainView.js b/remoteappmanager/static/js/admin/vue-components/MainView.js index ac7c3d051..c53b583a9 100644 --- a/remoteappmanager/static/js/admin/vue-components/MainView.js +++ b/remoteappmanager/static/js/admin/vue-components/MainView.js @@ -1,4 +1,4 @@ -var resources = require("admin-resources"); +let resources = require("admin-resources"); module.exports = { template: diff --git a/remoteappmanager/static/js/admin/vue-components/UsersView.js b/remoteappmanager/static/js/admin/vue-components/UsersView.js index 9fbc94301..1de805ab7 100644 --- a/remoteappmanager/static/js/admin/vue-components/UsersView.js +++ b/remoteappmanager/static/js/admin/vue-components/UsersView.js @@ -1,5 +1,5 @@ -var resources = require("admin-resources"); -var NewUserDialog = require("./users/NewUserDialog"); +let resources = require("admin-resources"); +let NewUserDialog = require("./users/NewUserDialog"); module.exports = { components: { @@ -75,7 +75,7 @@ module.exports = { .done((identifiers, items) => { this.table.rows = []; identifiers.forEach((id) => { - var item = items[id]; + let item = items[id]; this.table.rows.push([ id, item.name diff --git a/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js b/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js index d5b5d9282..9481570e3 100644 --- a/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js @@ -1,4 +1,4 @@ -var resources = require("admin-resources"); +let resources = require("admin-resources"); module.exports = { template: @@ -93,8 +93,8 @@ module.exports = { }, createNewAccounting: function () { - var model = this.model; - var formstate = this.formstate; + let model = this.model; + let formstate = this.formstate; if (formstate.$invalid) { return; @@ -105,7 +105,7 @@ module.exports = { return; } - var rep = { + let rep = { user_id: this.userId, image_name: this.model.image_name, allow_home: this.model.allow_home, diff --git a/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js b/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js index 2fd9f4145..ebd6b27fc 100644 --- a/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js @@ -1,4 +1,4 @@ -var resources = require("admin-resources"); +let resources = require("admin-resources"); module.exports = { template: diff --git a/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js b/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js index a136c0f15..0f172876b 100644 --- a/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js @@ -1,4 +1,4 @@ -var resources = require("admin-resources"); +let resources = require("admin-resources"); module.exports = { template: diff --git a/remoteappmanager/static/js/urlutils.js b/remoteappmanager/static/js/urlutils.js index fc3602c32..d50ceda38 100644 --- a/remoteappmanager/static/js/urlutils.js +++ b/remoteappmanager/static/js/urlutils.js @@ -5,9 +5,9 @@ // Modifications Copyright (c) Juptyer Development Team. // Distributed under the terms of the Modified BSD License. -var pathJoin = function () { +let pathJoin = function () { // join a sequence of url components with '/' - var url = '', i = 0; + let url = '', i = 0; for (i = 0; i < arguments.length; i += 1) { if (arguments[i] === '') { @@ -23,7 +23,7 @@ var pathJoin = function () { return url; }; -var parse = function (url) { +let parse = function (url) { // an `a` element with an href allows attr-access to the parsed segments of a URL // a = parse_url("http://localhost:8888/path/name#hash") // a.protocol = "http:" @@ -32,12 +32,12 @@ var parse = function (url) { // a.port = 8888 // a.pathname = "/path/name" // a.hash = "#hash" - var a = document.createElement("a"); + let a = document.createElement("a"); a.href = url; return a; }; -var encodeUriComponents = function (uri) { +let encodeUriComponents = function (uri) { // encode just the components of a multi-segment uri, // leaving '/' separators return uri.split('/').map(encodeURIComponent).join('/'); diff --git a/remoteappmanager/static/js/user/configurables.js b/remoteappmanager/static/js/user/configurables.js index 02de9cbe4..219640374 100644 --- a/remoteappmanager/static/js/user/configurables.js +++ b/remoteappmanager/static/js/user/configurables.js @@ -1,8 +1,8 @@ -var Vue = require("vuejs"); -var utils = require("utils"); +let Vue = require("vuejs"); +let utils = require("utils"); -var resolutionTag = 'resolution'; -var resolutionComponent = Vue.component(resolutionTag + '-component', { +let resolutionTag = 'resolution'; +const resolutionComponent = Vue.component(resolutionTag + '-component', { // Your configurable must have a "configDict" property from the model props: ['configDict'], @@ -37,10 +37,10 @@ class ResolutionModel { } asConfigDict() { - var resolution = this.configDict.resolution; + let resolution = this.configDict.resolution; if (resolution === 'Window') { - var maxSize = utils.maxIframeSize(); + let maxSize = utils.maxIframeSize(); resolution = maxSize[0] + 'x' + maxSize[1]; } @@ -48,7 +48,7 @@ class ResolutionModel { } } -var outputConfigurables = {}; +let outputConfigurables = {}; // Export all your configurable models here outputConfigurables[resolutionTag] = { diff --git a/remoteappmanager/static/js/user/main.js b/remoteappmanager/static/js/user/main.js index 2e06abbae..7e30c94b4 100644 --- a/remoteappmanager/static/js/user/main.js +++ b/remoteappmanager/static/js/user/main.js @@ -1,26 +1,26 @@ -var gamodule = require("gamodule"); -var models = require("./models"); -var applicationListView = require("./views/application_list_view"); -var applicationView = require("./views/application_view"); +let gamodule = require("gamodule"); +let models = require("./models"); +let applicationListView = require("./views/application_list_view"); +let applicationView = require("./views/application_view"); require("filters"); // This model keeps the retrieved content from the REST query locally. // It is only synchronized at initial load. -var model = new models.ApplicationListModel(); +let model = new models.ApplicationListModel(); // Initialize views -var appListView = new applicationListView.ApplicationListView({ +let appListView = new applicationListView.ApplicationListView({ el: '#applist', data: function() { return { model: model }; } }); -var appView = new applicationView.ApplicationView({ +let appView = new applicationView.ApplicationView({ el: '#appview', data: function() { return { model: model }; } }); // Create GA observer -var gaObserver = new gamodule.GaObserver(); +let gaObserver = new gamodule.GaObserver(); appView.$on('startApplication', function(application) { gaObserver.triggerApplicationStarting(application.appData.image.name); diff --git a/remoteappmanager/static/js/user/models.js b/remoteappmanager/static/js/user/models.js index dd7426777..ca744342b 100644 --- a/remoteappmanager/static/js/user/models.js +++ b/remoteappmanager/static/js/user/models.js @@ -1,28 +1,28 @@ -var $ = require("jquery"); -var resources = require("user-resources"); -var configurables = require("./configurables"); +let $ = require("jquery"); +let resources = require("user-resources"); +let configurables = require("./configurables"); -var Status = { +let Status = { RUNNING: "RUNNING", STARTING: "STARTING", STOPPING: "STOPPING", STOPPED: "STOPPED" }; -var availableApplicationsInfo = function () { - // Retrieve information from the various applications and +let availableApplicationsInfo = function () { + // Retrieve information from the letious applications and // connect the cascading callbacks. // Returns a single promise. When resolved, the attached - // callbacks will be passed an array of the promises for the various + // callbacks will be passed an array of the promises for the letious // retrieve operations, successful or not. // This routine will go away when we provide the representation data // inline with the items at tornado-webapi level. - var promise = $.Deferred(); + let promise = $.Deferred(); resources.Application.items() .done((identifiers, items) => { - var result = []; + let result = []; Object.keys(items).forEach((key) => { result.push(items[key]); }); @@ -60,18 +60,18 @@ class ApplicationListModel { ).done((appData) => { // appData contains the data retrieved from the remote API - var appList = []; + let appList = []; // Sort application list by names appData.sort((app1, app2) => { - var app1Name = app1.image.ui_name? app1.image.ui_name: app1.image.name; - var app2Name = app2.image.ui_name? app2.image.ui_name: app2.image.name; + let app1Name = app1.image.ui_name? app1.image.ui_name: app1.image.name; + let app2Name = app2.image.ui_name? app2.image.ui_name: app2.image.name; return app1Name < app2Name? -1: 1; }); // Add the options for some image types appData.forEach((applicationData) => { - var app = { + let app = { appData: applicationData, // Default values, will be overwritten status: Status.STOPPED, @@ -101,8 +101,8 @@ class ApplicationListModel { updateIdx(index) { // Refetches and updates the entry at the given index. - var app = this.appList[index]; - var mapping_id = app.appData.mapping_id; + let app = this.appList[index]; + let mapping_id = app.appData.mapping_id; return resources.Application.retrieve(mapping_id) .done((newData) => { @@ -123,7 +123,7 @@ class ApplicationListModel { // by the client. skip it and let the server deal with the // missing data, either by using a default or throwing // an error. - var ConfigurableCls = configurables[tag].model; + let ConfigurableCls = configurables[tag].model; if (ConfigurableCls !== undefined) { app.configurables.push(new ConfigurableCls()); @@ -140,19 +140,19 @@ class ApplicationListModel { } startApplication() { - var selectedIndex = this.selectedIndex; - var currentApp = this.appList[selectedIndex]; + let selectedIndex = this.selectedIndex; + let currentApp = this.appList[selectedIndex]; currentApp.status = Status.STARTING; currentApp.delayed = true; - var configurablesData = {}; + let configurablesData = {}; currentApp.configurables.forEach(function(configurable) { - var tag = configurable.tag; + let tag = configurable.tag; configurablesData[tag] = configurable.asConfigDict(); }); - var startPromise = $.Deferred(); + let startPromise = $.Deferred(); resources.Container.create({ mapping_id: currentApp.appData.mapping_id, @@ -175,12 +175,12 @@ class ApplicationListModel { } stopApplication(index) { - var appStopping = this.appList[index]; + let appStopping = this.appList[index]; appStopping.status = Status.STOPPING; - var url_id = appStopping.appData.container.url_id; + let url_id = appStopping.appData.container.url_id; - var stopPromise = $.Deferred(); + let stopPromise = $.Deferred(); resources.Container.delete(url_id) .done(() => { diff --git a/remoteappmanager/static/js/user/views/application_list_view.js b/remoteappmanager/static/js/user/views/application_list_view.js index 00a58c846..0e0b4ae3f 100644 --- a/remoteappmanager/static/js/user/views/application_list_view.js +++ b/remoteappmanager/static/js/user/views/application_list_view.js @@ -1,7 +1,7 @@ -var Vue = require("vuejs"); +let Vue = require("vuejs"); require("toolkit"); -var ApplicationListView = Vue.extend({ +const ApplicationListView = Vue.extend({ template: `
    @@ -74,7 +74,7 @@ var ApplicationListView = Vue.extend({ computed: { visibleList: function() { return this.model.appList.filter((app) => { - var appName = this.$options.filters.appName(app.appData.image).toLowerCase(); + let appName = this.$options.filters.appName(app.appData.image).toLowerCase(); return appName.indexOf(this.searchInput.toLowerCase()) !== -1; }); } @@ -82,7 +82,7 @@ var ApplicationListView = Vue.extend({ methods: { stopApplication: function(index) { - var stoppingAppName = this.$options.filters.appName( + let stoppingAppName = this.$options.filters.appName( this.model.appList[index].appData.image); this.model.stopApplication(index).fail((error) => { this.stoppingError.code = error.code; diff --git a/remoteappmanager/static/js/user/views/application_view.js b/remoteappmanager/static/js/user/views/application_view.js index 01b634356..0588508dd 100644 --- a/remoteappmanager/static/js/user/views/application_view.js +++ b/remoteappmanager/static/js/user/views/application_view.js @@ -1,9 +1,9 @@ -var Vue = require("vuejs"); -var urlUtils = require("urlutils"); -var utils = require("utils"); +let Vue = require("vuejs"); +let urlUtils = require("urlutils"); +let utils = require("utils"); require("toolkit"); -var ApplicationView = Vue.extend({ +const ApplicationView = Vue.extend({ template: `
    { this.$emit('startApplication', startingApp); @@ -133,7 +133,7 @@ var ApplicationView = Vue.extend({ return utils.maxIframeSize(); }, focusIframe: function() { - var iframe = this.$el.querySelector('iframe'); + let iframe = this.$el.querySelector('iframe'); if(iframe !== null) { iframe.focus(); } diff --git a/remoteappmanager/static/js/utils.js b/remoteappmanager/static/js/utils.js index 902322cf9..4355717a1 100644 --- a/remoteappmanager/static/js/utils.js +++ b/remoteappmanager/static/js/utils.js @@ -5,9 +5,9 @@ // Modifications Copyright (c) Juptyer Development Team. // Distributed under the terms of the Modified BSD License. -var $ = require("jquery"); +let $ = require("jquery"); -var all = function (promises) { +let all = function (promises) { // A form of jQuery.when that handles an array of promises // and equalises the behavior regardless if there's one or more than // one elements. @@ -26,7 +26,7 @@ var all = function (promises) { }); }; -var update = function (d1, d2) { +let update = function (d1, d2) { // Transfers the keys from d2 to d1. Returns d1 $.map(d2, function (i, key) { d1[key] = d2[key]; @@ -34,9 +34,9 @@ var update = function (d1, d2) { return d1; }; -var maxIframeSize = function () { +let maxIframeSize = function () { // Returns the current iframe viewport size - var box = document.querySelector(".content-wrapper").getBoundingClientRect(); + let box = document.querySelector(".content-wrapper").getBoundingClientRect(); return [box.width, box.height]; }; diff --git a/remoteappmanager/static/js/vue/filters.js b/remoteappmanager/static/js/vue/filters.js index 0f9acc584..fc6324b1e 100644 --- a/remoteappmanager/static/js/vue/filters.js +++ b/remoteappmanager/static/js/vue/filters.js @@ -1,5 +1,5 @@ -var Vue = require("vuejs"); -var urlUtils = require("urlutils"); +let Vue = require("vuejs"); +let urlUtils = require("urlutils"); Vue.filter('iconSrc', function(icon_data) { return ( diff --git a/remoteappmanager/static/js/vue/toolkit/DataTable.js b/remoteappmanager/static/js/vue/toolkit/DataTable.js index f3b119f1c..4a6692fbc 100644 --- a/remoteappmanager/static/js/vue/toolkit/DataTable.js +++ b/remoteappmanager/static/js/vue/toolkit/DataTable.js @@ -7,7 +7,7 @@ module.exports = { return typeof(value) === "boolean"; }, buttonClassFromType: function(value = "danger") { - var cls = {"btn": true}; + let cls = {"btn": true}; cls["btn-" + value] = true; return cls; } diff --git a/remoteappmanager/static/js/vue/toolkit/toolkit.js b/remoteappmanager/static/js/vue/toolkit/toolkit.js index b10fe9317..37cc6841d 100644 --- a/remoteappmanager/static/js/vue/toolkit/toolkit.js +++ b/remoteappmanager/static/js/vue/toolkit/toolkit.js @@ -1,8 +1,8 @@ -var Vue = require("vuejs"); -var ConfirmDialog = require("./ConfirmDialog"); -var ModalDialog = require("./ModalDialog"); -var AdminLTEBox = require("./AdminLTEBox"); -var DataTable = require("./DataTable"); +let Vue = require("vuejs"); +let ConfirmDialog = require("./ConfirmDialog"); +let ModalDialog = require("./ModalDialog"); +let AdminLTEBox = require("./AdminLTEBox"); +let DataTable = require("./DataTable"); Vue.component("confirm-dialog", ConfirmDialog); Vue.component("modal-dialog", ModalDialog); From 367e52b56af98156e28d0e29f5803157f1f13c01 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 13:04:35 +0100 Subject: [PATCH 8/9] Fix comment --- remoteappmanager/static/js/user/models.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/remoteappmanager/static/js/user/models.js b/remoteappmanager/static/js/user/models.js index ca744342b..b011b61a6 100644 --- a/remoteappmanager/static/js/user/models.js +++ b/remoteappmanager/static/js/user/models.js @@ -10,10 +10,10 @@ let Status = { }; let availableApplicationsInfo = function () { - // Retrieve information from the letious applications and + // Retrieve information from the various applications and // connect the cascading callbacks. // Returns a single promise. When resolved, the attached - // callbacks will be passed an array of the promises for the letious + // callbacks will be passed an array of the promises for the various // retrieve operations, successful or not. // This routine will go away when we provide the representation data // inline with the items at tornado-webapi level. From 7aac7004e368960e0a73312997945e5998363d80 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 17 May 2017 13:13:41 +0100 Subject: [PATCH 9/9] Indent 4 -> 2 --- .jshintrc | 2 +- .../static/js/admin/admin-resources.js | 744 +++++++++--------- remoteappmanager/static/js/admin/main.js | 28 +- .../js/admin/vue-components/AccountingView.js | 218 ++--- .../admin/vue-components/ApplicationsView.js | 222 +++--- .../js/admin/vue-components/ContainersView.js | 158 ++-- .../js/admin/vue-components/MainView.js | 116 +-- .../js/admin/vue-components/UsersView.js | 224 +++--- .../accounting/NewAccountingDialog.js | 282 +++---- .../applications/NewApplicationDialog.js | 136 ++-- .../vue-components/users/NewUserDialog.js | 128 +-- remoteappmanager/static/js/gamodule.js | 40 +- remoteappmanager/static/js/urlutils.js | 60 +- .../static/js/user/configurables.js | 76 +- remoteappmanager/static/js/user/main.js | 10 +- remoteappmanager/static/js/user/models.js | 376 ++++----- .../static/js/user/user-resources.js | 554 ++++++------- .../js/user/views/application_list_view.js | 170 ++-- .../static/js/user/views/application_view.js | 246 +++--- remoteappmanager/static/js/utils.js | 52 +- remoteappmanager/static/js/vue/filters.js | 16 +- .../static/js/vue/toolkit/AdminLTEBox.js | 30 +- .../static/js/vue/toolkit/ConfirmDialog.js | 54 +- .../static/js/vue/toolkit/DataTable.js | 80 +- .../static/js/vue/toolkit/ModalDialog.js | 20 +- .../static/js/vue/toolkit/toolkit.js | 8 +- 26 files changed, 2025 insertions(+), 2025 deletions(-) diff --git a/.jshintrc b/.jshintrc index a12e6147d..95ed49ba6 100644 --- a/.jshintrc +++ b/.jshintrc @@ -41,7 +41,7 @@ "sub" : false, "trailing" : true, "white" : false, - "indent" : 4, + "indent" : 2, "globals": { "module": true } diff --git a/remoteappmanager/static/js/admin/admin-resources.js b/remoteappmanager/static/js/admin/admin-resources.js index bc51a6cd0..8b9b86774 100644 --- a/remoteappmanager/static/js/admin/admin-resources.js +++ b/remoteappmanager/static/js/admin/admin-resources.js @@ -3,412 +3,412 @@ var urlUtils = require("urlutils"); var utils = require("utils"); var object_to_query_args = function (obj) { - var keys = Object.keys(obj); - if (keys.length === 0) { - return ""; + var keys = Object.keys(obj); + if (keys.length === 0) { + return ""; + } + + var result = []; + for (var idx in keys) { + var key = keys[idx]; + var value = obj[key]; + var key_enc = encodeURIComponent(key); + if ($.isArray(value)) { + for (var v in value) { + result.push(key_enc+"="+encodeURIComponent(v)); + } + } else { + result.push(key_enc+"="+encodeURIComponent(value)); } + } - var result = []; - for (var idx in keys) { - var key = keys[idx]; - var value = obj[key]; - var key_enc = encodeURIComponent(key); - if ($.isArray(value)) { - for (var v in value) { - result.push(key_enc+"="+encodeURIComponent(v)); - } - } else { - result.push(key_enc+"="+encodeURIComponent(value)); - } - } - - return result.join("&"); + return result.join("&"); }; var API = (function () { - // Object representing the interface to the Web API. - // @param base_url : the url at which to find the web API endpoint. - var self = {}; - self.base_urlpath = "/user/admin/"; - self.default_options = { - contentType: "application/json", - cache: false, - dataType : null, - processData: false, - success: null, - error: null - }; - - self.request = function (req_type, endpoint, body, query_args) { - // Performs a request to the final endpoint - var options = {}; - utils.update(options, self.default_options); - utils.update(options, { - type: req_type, - data: body - }); - - var url = urlUtils.pathJoin( - self.base_urlpath, - "api", "v1", - urlUtils.encodeUriComponents(endpoint) - )+'/'; - - if (query_args) { - url = url + "?" + object_to_query_args(query_args); - } - return $.ajax(url, options); - }; - return self; + // Object representing the interface to the Web API. + // @param base_url : the url at which to find the web API endpoint. + var self = {}; + self.base_urlpath = "/user/admin/"; + self.default_options = { + contentType: "application/json", + cache: false, + dataType : null, + processData: false, + success: null, + error: null + }; + + self.request = function (req_type, endpoint, body, query_args) { + // Performs a request to the final endpoint + var options = {}; + utils.update(options, self.default_options); + utils.update(options, { + type: req_type, + data: body + }); + + var url = urlUtils.pathJoin( + self.base_urlpath, + "api", "v1", + urlUtils.encodeUriComponents(endpoint) + )+'/'; + + if (query_args) { + url = url + "?" + object_to_query_args(query_args); + } + return $.ajax(url, options); + }; + return self; })(); var RestError = function(code, message) { - console.log("Creating error "+code+" message: "+message); - this.code = code; - this.message = message; + console.log("Creating error "+code+" message: "+message); + this.code = code; + this.message = message; }; var fail_handler = function(promise, jqXHR) { - var status = jqXHR.status; - var payload = null; - try { - payload = JSON.parse(jqXHR.responseText); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - var err = new RestError(status, ""); - if (payload !== null) { - utils.update(err, payload); - } - promise.reject(err); + var status = jqXHR.status; + var payload = null; + try { + payload = JSON.parse(jqXHR.responseText); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + var err = new RestError(status, ""); + if (payload !== null) { + utils.update(err, payload); + } + promise.reject(err); }; var create_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(data); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 201) { - // Strange situation in which the call succeeded, but - // not with a 201. Just do our best. - console.log( - "Create succeded but response with status " + - status + - " instead of 201." - ); - promise.reject(status, payload); - return; - } - - var id, location; - try { - location = jqXHR.getResponseHeader('Location'); - var url = urlUtils.parse(location); - var arr = url.pathname.replace(/\/$/, "").split('/'); - id = arr[arr.length - 1]; - } catch (e) { - console.log("Response had invalid or absent Location header"); - promise.reject(status, payload); - return; - } - promise.resolve(id, location); + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(data); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 201) { + // Strange situation in which the call succeeded, but + // not with a 201. Just do our best. + console.log( + "Create succeded but response with status " + + status + + " instead of 201." + ); + promise.reject(status, payload); + return; + } + + var id, location; + try { + location = jqXHR.getResponseHeader('Location'); + var url = urlUtils.parse(location); + var arr = url.pathname.replace(/\/$/, "").split('/'); + id = arr[arr.length - 1]; + } catch (e) { + console.log("Response had invalid or absent Location header"); + promise.reject(status, payload); + return; + } + promise.resolve(id, location); }; var create_singleton_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(data); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 201) { - // Strange situation in which the call succeeded, but - // not with a 201. Just do our best. - console.log( - "Create succeded but response with status " + - status + - " instead of 201." - ); - promise.reject(status, payload); - return; - } - - var location; - try { - location = jqXHR.getResponseHeader('Location'); - } catch (e) { - console.log("Response had invalid or absent Location header"); - promise.reject(status, payload); - return; - } - promise.resolve(location); + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(data); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 201) { + // Strange situation in which the call succeeded, but + // not with a 201. Just do our best. + console.log( + "Create succeded but response with status " + + status + + " instead of 201." + ); + promise.reject(status, payload); + return; + } + + var location; + try { + location = jqXHR.getResponseHeader('Location'); + } catch (e) { + console.log("Response had invalid or absent Location header"); + promise.reject(status, payload); + return; + } + promise.resolve(location); }; var update_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(data); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 204) { - // Strange situation in which the call succeeded, but - // not with a 201. Just do our best. - console.log( - "Update succeded but response with status " + - status + - " instead of 204." - ); - promise.reject(status, payload); - return; - } - - promise.resolve(); + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(data); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 204) { + // Strange situation in which the call succeeded, but + // not with a 201. Just do our best. + console.log( + "Update succeded but response with status " + + status + + " instead of 204." + ); + promise.reject(status, payload); + return; + } + + promise.resolve(); }; var delete_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - var payload = null; - try { - payload = JSON.parse(data); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 204) { - console.log( - "Delete succeded but response with status " + - status + - " instead of 204." - ); - promise.reject(status, payload); - return; - } - promise.resolve(); + var status = jqXHR.status; + var payload = null; + try { + payload = JSON.parse(data); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 204) { + console.log( + "Delete succeded but response with status " + + status + + " instead of 204." + ); + promise.reject(status, payload); + return; + } + promise.resolve(); }; var retrieve_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(jqXHR.responseText); - } catch (e) { - // Suppress any syntax error and discard the payload - } + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(jqXHR.responseText); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 200) { + console.log( + "Retrieve succeded but response with status " + + status + + " instead of 200." + ); + promise.reject(status, payload); + return; + } + + if (payload === null) { + console.log( + "Retrieve succeded but empty or invalid payload" + ); + promise.reject(status, payload); + return; + } + + promise.resolve(payload); +}; - if (status !== 200) { - console.log( - "Retrieve succeded but response with status " + - status + - " instead of 200." - ); - promise.reject(status, payload); - return; - } +var Resource = function(type) { + this.type = type; + + this.create = function(representation, query_args) { + var body = JSON.stringify(representation); + var promise = $.Deferred(); + + API.request("POST", type, body, query_args) + .done(function(data, textStatus, jqXHR) { + create_handler(promise, data, textStatus, jqXHR); + }) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.update = function(id, representation, query_args) { + var body = JSON.stringify(representation); + var promise = $.Deferred(); + + API.request("PUT", urlUtils.pathJoin(type, id), body, query_args) + .done(function(data, textStatus, jqXHR) { + update_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.delete = function(id, query_args) { + var promise = $.Deferred(); + + API.request("DELETE", urlUtils.pathJoin(type, id), null, query_args) + .done(function(data, textStatus, jqXHR) { + delete_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.retrieve = function(id, query_args) { + var promise = $.Deferred(); + + API.request("GET", urlUtils.pathJoin(type, id), null, query_args) + .done(function(data, textStatus, jqXHR) { + retrieve_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.items = function(query_args) { + var promise = $.Deferred(); + + API.request("GET", type, null, query_args) + .done(function(data, textStatus, jqXHR) { + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(jqXHR.responseText); + } catch (e) { + // Suppress any syntax error and discard the payload + } - if (payload === null) { - console.log( - "Retrieve succeded but empty or invalid payload" - ); - promise.reject(status, payload); - return; - } + if (status !== 200) { + console.log( + "Items retrieve succeded but response with status " + + status + + " instead of 200." + ); + promise.reject(status, payload); + return; + } - promise.resolve(payload); -}; + if (payload === null) { + console.log( + "Items Retrieve succeded but empty or invalid payload" + ); + promise.reject(status, payload); + return; + } -var Resource = function(type) { - this.type = type; - - this.create = function(representation, query_args) { - var body = JSON.stringify(representation); - var promise = $.Deferred(); - - API.request("POST", type, body, query_args) - .done(function(data, textStatus, jqXHR) { - create_handler(promise, data, textStatus, jqXHR); - }) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.update = function(id, representation, query_args) { - var body = JSON.stringify(representation); - var promise = $.Deferred(); - - API.request("PUT", urlUtils.pathJoin(type, id), body, query_args) - .done(function(data, textStatus, jqXHR) { - update_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.delete = function(id, query_args) { - var promise = $.Deferred(); - - API.request("DELETE", urlUtils.pathJoin(type, id), null, query_args) - .done(function(data, textStatus, jqXHR) { - delete_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.retrieve = function(id, query_args) { - var promise = $.Deferred(); - - API.request("GET", urlUtils.pathJoin(type, id), null, query_args) - .done(function(data, textStatus, jqXHR) { - retrieve_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.items = function(query_args) { - var promise = $.Deferred(); - - API.request("GET", type, null, query_args) - .done(function(data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(jqXHR.responseText); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 200) { - console.log( - "Items retrieve succeded but response with status " + - status + - " instead of 200." - ); - promise.reject(status, payload); - return; - } - - if (payload === null) { - console.log( - "Items Retrieve succeded but empty or invalid payload" - ); - promise.reject(status, payload); - return; - } - - promise.resolve( - payload.identifiers, - payload.items, - payload.offset, - payload.total); - }) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; + promise.resolve( + payload.identifiers, + payload.items, + payload.offset, + payload.total); + }) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; }; var SingletonResource = function(type) { - this.type = type; - this.create = function(representation, query_args) { - var body = JSON.stringify(representation); - var promise = $.Deferred(); - - API.request("POST", type, body, query_args) - .done(function(data, textStatus, jqXHR) { - create_singleton_handler(promise, data, textStatus, jqXHR); - }) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - this.update = function(representation, query_args) { - var body = JSON.stringify(representation); - var promise = $.Deferred(); - - API.request("PUT", type, body, query_args) - .done(function(data, textStatus, jqXHR) { - update_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - - - }; - - this.delete = function(query_args) { - var promise = $.Deferred(); - - API.request("DELETE", type, null, query_args) - .done(function(data, textStatus, jqXHR) { - delete_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.retrieve = function(query_args) { - var promise = $.Deferred(); - - API.request("GET", type, null, query_args) - .done(function(data, textStatus, jqXHR) { - retrieve_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; + this.type = type; + this.create = function(representation, query_args) { + var body = JSON.stringify(representation); + var promise = $.Deferred(); + + API.request("POST", type, body, query_args) + .done(function(data, textStatus, jqXHR) { + create_singleton_handler(promise, data, textStatus, jqXHR); + }) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + this.update = function(representation, query_args) { + var body = JSON.stringify(representation); + var promise = $.Deferred(); + + API.request("PUT", type, body, query_args) + .done(function(data, textStatus, jqXHR) { + update_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + + + }; + + this.delete = function(query_args) { + var promise = $.Deferred(); + + API.request("DELETE", type, null, query_args) + .done(function(data, textStatus, jqXHR) { + delete_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.retrieve = function(query_args) { + var promise = $.Deferred(); + + API.request("GET", type, null, query_args) + .done(function(data, textStatus, jqXHR) { + retrieve_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; }; module.exports = { - "Application" : new Resource("applications"), - "Accounting" : new Resource("accounting"), - "User" : new Resource("users"), - "Container" : new Resource("containers"), - "Stats" : new SingletonResource("stats"), + "Application" : new Resource("applications"), + "Accounting" : new Resource("accounting"), + "User" : new Resource("users"), + "Container" : new Resource("containers"), + "Stats" : new SingletonResource("stats"), }; \ No newline at end of file diff --git a/remoteappmanager/static/js/admin/main.js b/remoteappmanager/static/js/admin/main.js index df96b730d..f76bb889a 100644 --- a/remoteappmanager/static/js/admin/main.js +++ b/remoteappmanager/static/js/admin/main.js @@ -12,28 +12,28 @@ let AccountingView = require("./vue-components/AccountingView"); // install router Vue.use(VueRouter); Vue.use(VueForm, { - inputClasses: { - valid: 'form-control-success', - invalid: 'form-control-danger' - } + inputClasses: { + valid: 'form-control-success', + invalid: 'form-control-danger' + } }); Vue.filter("truncate", function(value) { - return _.truncate(value, {'length': 12 }); + return _.truncate(value, {'length': 12 }); }); let router = new VueRouter({ - routes: [ - { path: '/', component: MainView }, - { path: '/containers', component: ContainersView }, - { path: '/users', component: UsersView }, - { path: '/users/:id/accounting', component: AccountingView, name: "user_accounting" }, - { path: '/applications', component: ApplicationsView } - ] + routes: [ + { path: '/', component: MainView }, + { path: '/containers', component: ContainersView }, + { path: '/users', component: UsersView }, + { path: '/users/:id/accounting', component: AccountingView, name: "user_accounting" }, + { path: '/applications', component: ApplicationsView } + ] }); let vm; vm = new Vue({ - el: "#app", - router: router + el: "#app", + router: router }); diff --git a/remoteappmanager/static/js/admin/vue-components/AccountingView.js b/remoteappmanager/static/js/admin/vue-components/AccountingView.js index 0bf9dbc7a..de35a1916 100644 --- a/remoteappmanager/static/js/admin/vue-components/AccountingView.js +++ b/remoteappmanager/static/js/admin/vue-components/AccountingView.js @@ -2,126 +2,126 @@ let resources = require("admin-resources"); let NewAccountingDialog = require("./accounting/NewAccountingDialog"); module.exports = { - components: { - 'new-accounting-dialog': NewAccountingDialog - }, + components: { + 'new-accounting-dialog': NewAccountingDialog + }, - template: - ` -
    Accounting for user {{ $route.params.id }}
    -
    -
    - Error: {{communicationError}} -
    - - - - - -
    Do you want to remove accounting - {{ removeAccountingDialog.accountingToRemove }}? -
    -     -
    -     `, + template: + ` +
    Accounting for user {{ $route.params.id }}
    +
    +
    + Error: {{communicationError}} +
    + + + + + +
    Do you want to remove accounting + {{ removeAccountingDialog.accountingToRemove }}? +
    +     +
    +     `, - data: function () { - return { - table: { - headers: [ - "ID", "Image", "Workspace", "Vol. source", "Vol. target", "Readonly" - ], - rows: [], - globalActions: [{ - label: "Create New Entry", - callback: () => { this.newAccountingDialog.show = true; } - }], - rowActions: [{ - label: "Remove", - callback: this.removeAction - }] - }, + data: function () { + return { + table: { + headers: [ + "ID", "Image", "Workspace", "Vol. source", "Vol. target", "Readonly" + ], + rows: [], + globalActions: [{ + label: "Create New Entry", + callback: () => { this.newAccountingDialog.show = true; } + }], + rowActions: [{ + label: "Remove", + callback: this.removeAction + }] + }, - newAccountingDialog: { - show: false, - userId: this.$route.params.id - }, + newAccountingDialog: { + show: false, + userId: this.$route.params.id + }, - removeAccountingDialog: { - show: false, - accountingToRemove: null - }, + removeAccountingDialog: { + show: false, + accountingToRemove: null + }, - communicationError: null - }; - }, + communicationError: null + }; + }, - mounted: function () { - this.updateTable(); - }, + mounted: function () { + this.updateTable(); + }, - methods: { - updateTable: function() { - this.communicationError = null; - resources.Accounting.items({filter: JSON.stringify({user_id: this.$route.params.id })}) - .done((identifiers, items) => { - this.table.rows = []; - identifiers.forEach((id) => { - let item = items[id]; - this.table.rows.push([ - id, - item.image_name, - item.allow_home, - item.volume_source, - item.volume_target, - item.volume_mode === "ro" - ]); - }); - }) - .fail(() => { - this.communicationError = "The request could not be executed successfully"; - }); - }, + methods: { + updateTable: function() { + this.communicationError = null; + resources.Accounting.items({filter: JSON.stringify({user_id: this.$route.params.id })}) + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { + let item = items[id]; + this.table.rows.push([ + id, + item.image_name, + item.allow_home, + item.volume_source, + item.volume_target, + item.volume_mode === "ro" + ]); + }); + }) + .fail(() => { + this.communicationError = "The request could not be executed successfully"; + }); + }, - newAccountingCreated: function() { - this.newAccountingDialog.show = false; - this.updateTable(); - }, + newAccountingCreated: function() { + this.newAccountingDialog.show = false; + this.updateTable(); + }, - removeAction: function(row) { - this.removeAccountingDialog.accountingToRemove = row[0]; - this.removeAccountingDialog.show = true; - }, + removeAction: function(row) { + this.removeAccountingDialog.accountingToRemove = row[0]; + this.removeAccountingDialog.show = true; + }, - closeRemoveAccountingDialog: function() { - this.removeAccountingDialog.show = false; - this.removeAccountingDialog.accountingToRemove = null; - }, + closeRemoveAccountingDialog: function() { + this.removeAccountingDialog.show = false; + this.removeAccountingDialog.accountingToRemove = null; + }, - removeAccounting: function () { - resources.Accounting.delete(this.removeAccountingDialog.accountingToRemove) - .done(() => { - this.closeRemoveAccountingDialog(); - this.updateTable(); - }) - .fail(() => { - this.closeRemoveAccountingDialog(); - this.communicationError = "The request could not be executed successfully"; - }); - } + removeAccounting: function () { + resources.Accounting.delete(this.removeAccountingDialog.accountingToRemove) + .done(() => { + this.closeRemoveAccountingDialog(); + this.updateTable(); + }) + .fail(() => { + this.closeRemoveAccountingDialog(); + this.communicationError = "The request could not be executed successfully"; + }); } + } }; diff --git a/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js b/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js index b193d6477..c0d6cc2ed 100644 --- a/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js +++ b/remoteappmanager/static/js/admin/vue-components/ApplicationsView.js @@ -2,129 +2,129 @@ let resources = require("admin-resources"); let NewApplicationDialog = require("./applications/NewApplicationDialog"); module.exports = { - components: { - 'new-application-dialog': NewApplicationDialog - }, + components: { + 'new-application-dialog': NewApplicationDialog + }, - template: - ` -
    -
    - Error: {{communicationError}} -
    - - - + template: + ` +
    +
    + Error: {{communicationError}} +
    + + + - -
    Do you want to remove Application - {{removeApplicationDialog.applicationToRemove.name}} - ({{removeApplicationDialog.applicationToRemove.id}})
    -     -
    -     `, + +
    Do you want to remove Application + {{removeApplicationDialog.applicationToRemove.name}} + ({{removeApplicationDialog.applicationToRemove.id}})
    +     +
    +     `, - data: function () { - return { - table: { - headers: ["ID", "Image"], - rows: [], - globalActions: [{ - label: "Create New Entry", - callback: () => { this.newApplicationDialog.show = true; } - }], - rowActions: [{ - label: "Remove", - callback: this.removeAction - }] - }, + data: function () { + return { + table: { + headers: ["ID", "Image"], + rows: [], + globalActions: [{ + label: "Create New Entry", + callback: () => { this.newApplicationDialog.show = true; } + }], + rowActions: [{ + label: "Remove", + callback: this.removeAction + }] + }, - newApplicationDialog: { - show: false - }, + newApplicationDialog: { + show: false + }, - removeApplicationDialog: { - show: false, - applicationToRemove: { - id: null, - name: "" - } - }, + removeApplicationDialog: { + show: false, + applicationToRemove: { + id: null, + name: "" + } + }, - communicationError: null - }; - }, + communicationError: null + }; + }, - mounted: function () { - this.updateTable(); - }, + mounted: function () { + this.updateTable(); + }, - methods: { - updateTable: function() { - this.communicationError = null; - resources.Application.items() - .done((identifiers, items) => { - this.table.rows = []; - identifiers.forEach((id) => { - let item = items[id]; - this.table.rows.push([ - id, - item.image_name - ]); - }); - }) - .fail(() => { - this.communicationError = "The request could not be executed successfully"; - }); - }, + methods: { + updateTable: function() { + this.communicationError = null; + resources.Application.items() + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { + let item = items[id]; + this.table.rows.push([ + id, + item.image_name + ]); + }); + }) + .fail(() => { + this.communicationError = "The request could not be executed successfully"; + }); + }, - newApplicationCreated: function() { - this.newApplicationDialog.show = false; - this.updateTable(); - }, + newApplicationCreated: function() { + this.newApplicationDialog.show = false; + this.updateTable(); + }, - newApplicationDialogClosed: function() { - this.newApplicationDialog.show = false; - }, + newApplicationDialogClosed: function() { + this.newApplicationDialog.show = false; + }, - removeAction: function(row) { - this.removeApplicationDialog.applicationToRemove = { - id: row[0], - name: row[1] - }; - this.removeApplicationDialog.show = true; - }, + removeAction: function(row) { + this.removeApplicationDialog.applicationToRemove = { + id: row[0], + name: row[1] + }; + this.removeApplicationDialog.show = true; + }, - removeApplication: function () { - resources.Application.delete(this.removeApplicationDialog.applicationToRemove.id) - .done(() => { - this.closeRemoveApplicationDialog(); - this.updateTable(); - }) - .fail(() => { - this.closeRemoveApplicationDialog(); - this.communicationError = "The request could not be executed successfully"; - }); - }, - closeRemoveApplicationDialog: function() { - this.removeApplicationDialog.show = false; - this.removeApplicationDialog.applicationToRemove = { - name: "", - id: null - }; - } + removeApplication: function () { + resources.Application.delete(this.removeApplicationDialog.applicationToRemove.id) + .done(() => { + this.closeRemoveApplicationDialog(); + this.updateTable(); + }) + .fail(() => { + this.closeRemoveApplicationDialog(); + this.communicationError = "The request could not be executed successfully"; + }); + }, + closeRemoveApplicationDialog: function() { + this.removeApplicationDialog.show = false; + this.removeApplicationDialog.applicationToRemove = { + name: "", + id: null + }; } + } }; diff --git a/remoteappmanager/static/js/admin/vue-components/ContainersView.js b/remoteappmanager/static/js/admin/vue-components/ContainersView.js index 9e9e28f3f..6869d1e78 100644 --- a/remoteappmanager/static/js/admin/vue-components/ContainersView.js +++ b/remoteappmanager/static/js/admin/vue-components/ContainersView.js @@ -1,90 +1,90 @@ let resources = require("admin-resources"); module.exports = { - template: - ` -
    - Error: {{communicationError}} -
    - - - -
    Do you want to stop container {{ stopContainerDialog.containerToStop }}?
    -     -     `, + template: + ` +
    + Error: {{communicationError}} +
    + + + +
    Do you want to stop container {{ stopContainerDialog.containerToStop }}?
    +     +     `, - data: function () { - return { - table: { - headers: ["URL ID", "User", "Image", "Docker ID", "Mapping ID"], - rows: [], - rowActions: [{ - label: "Stop", - callback: this.stopAction - }] - }, - stopContainerDialog: { - show: false, - containerToStop: null - }, - communicationError: null - }; - }, + data: function () { + return { + table: { + headers: ["URL ID", "User", "Image", "Docker ID", "Mapping ID"], + rows: [], + rowActions: [{ + label: "Stop", + callback: this.stopAction + }] + }, + stopContainerDialog: { + show: false, + containerToStop: null + }, + communicationError: null + }; + }, - mounted: function () { - this.updateTable(); - }, + mounted: function () { + this.updateTable(); + }, - methods: { - updateTable: function() { - this.communicationError = null; - resources.Container.items() - .done((identifiers, items) => { - this.table.rows = []; - identifiers.forEach((id) => { - let item = items[id]; - this.table.rows.push([ - id, - item.user, - item.image_name, - item.docker_id, - item.mapping_id - ]); - }); - }) - .fail(() => { - this.communicationError = "The request could not be executed successfully"; - }); - }, + methods: { + updateTable: function() { + this.communicationError = null; + resources.Container.items() + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { + let item = items[id]; + this.table.rows.push([ + id, + item.user, + item.image_name, + item.docker_id, + item.mapping_id + ]); + }); + }) + .fail(() => { + this.communicationError = "The request could not be executed successfully"; + }); + }, - stopAction: function(row) { - this.stopContainerDialog.containerToStop = row[0]; - this.stopContainerDialog.show = true; - }, + stopAction: function(row) { + this.stopContainerDialog.containerToStop = row[0]; + this.stopContainerDialog.show = true; + }, - stopContainer: function () { - resources.Container.delete(this.stopContainerDialog.containerToStop) - .done(() => { - this.updateTable(); - this.closeStopContainerDialog(); - }) - .fail(() => { - this.closeStopContainerDialog(); - this.communicationError = "The request could not be executed successfully"; - }); - }, + stopContainer: function () { + resources.Container.delete(this.stopContainerDialog.containerToStop) + .done(() => { + this.updateTable(); + this.closeStopContainerDialog(); + }) + .fail(() => { + this.closeStopContainerDialog(); + this.communicationError = "The request could not be executed successfully"; + }); + }, - closeStopContainerDialog: function() { - this.stopContainerDialog.show = false; - this.stopContainerDialog.containerToStop = null; - } + closeStopContainerDialog: function() { + this.stopContainerDialog.show = false; + this.stopContainerDialog.containerToStop = null; } + } }; diff --git a/remoteappmanager/static/js/admin/vue-components/MainView.js b/remoteappmanager/static/js/admin/vue-components/MainView.js index c53b583a9..daf4eba75 100644 --- a/remoteappmanager/static/js/admin/vue-components/MainView.js +++ b/remoteappmanager/static/js/admin/vue-components/MainView.js @@ -1,65 +1,65 @@ let resources = require("admin-resources"); module.exports = { - template: - `
    -
    -
    -
    Statistics
    -
    -
    - Error: {{communicationError}} -
    -
    -
    -
    Realm
    -
    {{ realm }}
    -
    -
    -
    Total users
    -
    {{ num_total_users }}
    -
    -
    -
    Number of applications
    -
    {{ num_applications }}
    -
    -
    -
    -
    Active users
    -
    {{ num_active_users }}
    -
    -
    -
    Running containers
    -
    {{ num_running_containers }}
    -
    -
    -
    -
    + template: + `
    +
    +
    +
    Statistics
    +
    +
    + Error: {{communicationError}} +
    +
    +
    +
    Realm
    +
    {{ realm }}
    -
    `, +
    +
    Total users
    +
    {{ num_total_users }}
    +
    +
    +
    Number of applications
    +
    {{ num_applications }}
    +
    +
    +
    +
    Active users
    +
    {{ num_active_users }}
    +
    +
    +
    Running containers
    +
    {{ num_running_containers }}
    +
    +
    +
    +
    +
    +
    `, - data: function() { - return { - communicationError: null, - realm: "", - num_total_users: "", - num_applications: "", - num_active_users: "", - num_running_containers: "" - }; - }, + data: function() { + return { + communicationError: null, + realm: "", + num_total_users: "", + num_applications: "", + num_active_users: "", + num_running_containers: "" + }; + }, - mounted: function() { - resources.Stats.retrieve() - .done((rep) => { - this.realm = rep.realm; - this.num_total_users = rep.num_total_users; - this.num_applications = rep.num_applications; - this.num_active_users = rep.num_active_users; - this.num_running_containers = rep.num_running_containers; - }) - .fail(() => { - this.communicationError = "The request could not be executed successfully"; - }); - } + mounted: function() { + resources.Stats.retrieve() + .done((rep) => { + this.realm = rep.realm; + this.num_total_users = rep.num_total_users; + this.num_applications = rep.num_applications; + this.num_active_users = rep.num_active_users; + this.num_running_containers = rep.num_running_containers; + }) + .fail(() => { + this.communicationError = "The request could not be executed successfully"; + }); + } }; diff --git a/remoteappmanager/static/js/admin/vue-components/UsersView.js b/remoteappmanager/static/js/admin/vue-components/UsersView.js index 1de805ab7..1b3403b83 100644 --- a/remoteappmanager/static/js/admin/vue-components/UsersView.js +++ b/remoteappmanager/static/js/admin/vue-components/UsersView.js @@ -2,126 +2,126 @@ let resources = require("admin-resources"); let NewUserDialog = require("./users/NewUserDialog"); module.exports = { - components: { - 'new-user-dialog': NewUserDialog, - }, + components: { + 'new-user-dialog': NewUserDialog, + }, - template: - ` -
    - Error: {{communicationError}} -
    - - - - -
    Do you want to remove User {{removeUserDialog.userToRemove.name}} - ({{removeUserDialog.userToRemove.id}})
    -     -     `, + template: + ` +
    + Error: {{communicationError}} +
    + + + + +
    Do you want to remove User {{removeUserDialog.userToRemove.name}} + ({{removeUserDialog.userToRemove.id}})
    +     +     `, - data: function () { - return { - table: { - headers: ["ID", "Username"], - rows: [], - globalActions: [{ - label: "Create New Entry", - callback: () => { this.newUserDialog.show = true; } - }], - rowActions: [{ - label: "Policies", - callback: this.showPolicyAction, - type: "info" - }, { - label: "Remove", - callback: this.removeAction - }] - }, - users: [], - newUserDialog: { - show: false - }, - removeUserDialog: { - show: false, - userToRemove: { - id: null, - name: "" - } - }, - communicationError: null - }; - }, + data: function () { + return { + table: { + headers: ["ID", "Username"], + rows: [], + globalActions: [{ + label: "Create New Entry", + callback: () => { this.newUserDialog.show = true; } + }], + rowActions: [{ + label: "Policies", + callback: this.showPolicyAction, + type: "info" + }, { + label: "Remove", + callback: this.removeAction + }] + }, + users: [], + newUserDialog: { + show: false + }, + removeUserDialog: { + show: false, + userToRemove: { + id: null, + name: "" + } + }, + communicationError: null + }; + }, - mounted: function () { - this.updateTable(); - }, + mounted: function () { + this.updateTable(); + }, - methods: { - updateTable: function() { - this.communicationError = null; - resources.User.items() - .done((identifiers, items) => { - this.table.rows = []; - identifiers.forEach((id) => { - let item = items[id]; - this.table.rows.push([ - id, - item.name - ]); - }); - }) - .fail(() => { - this.communicationError = "The request could not be executed successfully"; - }); - }, + methods: { + updateTable: function() { + this.communicationError = null; + resources.User.items() + .done((identifiers, items) => { + this.table.rows = []; + identifiers.forEach((id) => { + let item = items[id]; + this.table.rows.push([ + id, + item.name + ]); + }); + }) + .fail(() => { + this.communicationError = "The request could not be executed successfully"; + }); + }, - newUserCreated: function() { - this.newUserDialog.show = false; - this.updateTable(); - }, + newUserCreated: function() { + this.newUserDialog.show = false; + this.updateTable(); + }, - showPolicyAction: function(row) { - this.$router.push({ - name: 'user_accounting', - params: { id: row[0] } - }); - }, + showPolicyAction: function(row) { + this.$router.push({ + name: 'user_accounting', + params: { id: row[0] } + }); + }, - removeAction: function(row) { - this.removeUserDialog.userToRemove.id = row[0]; - this.removeUserDialog.userToRemove.name = row[1]; - this.removeUserDialog.show = true; - }, + removeAction: function(row) { + this.removeUserDialog.userToRemove.id = row[0]; + this.removeUserDialog.userToRemove.name = row[1]; + this.removeUserDialog.show = true; + }, - closeRemoveUserDialog: function() { - this.removeUserDialog.show = false; - this.removeUserDialog.userToRemove = { - id: null, - name: "" - }; - }, + closeRemoveUserDialog: function() { + this.removeUserDialog.show = false; + this.removeUserDialog.userToRemove = { + id: null, + name: "" + }; + }, - removeUser: function () { - resources.User.delete(this.removeUserDialog.userToRemove.id) - .done(() => { - this.closeRemoveUserDialog(); - this.updateTable(); - }) - .fail(() => { - this.closeRemoveUserDialog(); - }); - } + removeUser: function () { + resources.User.delete(this.removeUserDialog.userToRemove.id) + .done(() => { + this.closeRemoveUserDialog(); + this.updateTable(); + }) + .fail(() => { + this.closeRemoveUserDialog(); + }); } + } }; diff --git a/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js b/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js index 9481570e3..87374dd34 100644 --- a/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/accounting/NewAccountingDialog.js @@ -1,150 +1,150 @@ let resources = require("admin-resources"); module.exports = { - template: - ` -

    Create New Policy

    -
    - - - - - - Image Name cannot be empty - - - -
    - -
    - - -
    - - -
    - - Volume Source must be empty or an absolute path - -     - - -
    - - -
    - - Volume Target must be empty or an absolute path - -     - -
    - -
    - -

    Both Volume Source and Target must be defined

    -
    -
    - Error: {{communicationError}} -
    - - -
    -     -
    -     `, - - props: ['show', "userId"], - - data: function () { - return { - formstate: {}, - crossValidationError: false, - communicationError: null, - model: { - image_name: '', - allow_home: false, - volume_source: '', - volume_target: '', - volume_readonly: false, - volume_source_target: [] - } - }; + template: + ` +

    Create New Policy

    +
    + + + + + + Image Name cannot be empty + + + +
    + +
    + + +
    + + +
    + + Volume Source must be empty or an absolute path + +     + + +
    + + +
    + + Volume Target must be empty or an absolute path + +     + +
    + +
    + +

    Both Volume Source and Target must be defined

    +
    +
    + Error: {{communicationError}} +
    + + +
    +     +
    +     `, + + props: ['show', "userId"], + + data: function () { + return { + formstate: {}, + crossValidationError: false, + communicationError: null, + model: { + image_name: '', + allow_home: false, + volume_source: '', + volume_target: '', + volume_readonly: false, + volume_source_target: [] + } + }; + }, + + methods: { + close: function () { + this.$emit('closed'); }, - methods: { - close: function () { - this.$emit('closed'); - }, - - fieldClassName: function (field) { - if (!field) { - return ''; - } - if ((field.$dirty || field.$submitted) && field.$invalid) { - return 'has-error'; - } else { - return ''; - } - }, - - createNewAccounting: function () { - let model = this.model; - let formstate = this.formstate; - - if (formstate.$invalid) { - return; - } - if ((model.volume_source.length === 0 && model.volume_target.length !== 0) || - (model.volume_source.length !== 0 && model.volume_target.length === 0)) { - this.crossValidationError = true; - return; - } - - let rep = { - user_id: this.userId, - image_name: this.model.image_name, - allow_home: this.model.allow_home, - volume_source: this.model.volume_source, - volume_target: this.model.volume_target, - volume_mode: (model.volume_readonly ? "ro" : "rw") - }; - - resources.Accounting.create(rep) - .done(() => { - this.$emit('created'); - }) - .fail(() => { - this.communicationError = "The request could not be executed successfully"; - }); - }, - - reset: function () { - Object.assign(this.$data, this.$options.data()); - }, - - validatePath: function(value) { - return (value.length === 0 || value[0] === '/'); - } + fieldClassName: function (field) { + if (!field) { + return ''; + } + if ((field.$dirty || field.$submitted) && field.$invalid) { + return 'has-error'; + } else { + return ''; + } }, - watch: { - "show": function (value) { - if (value) { - this.reset(); - } - }, - "model.volume_source": function() { - delete this.formstate.volume_source.$error.volumesInconsistent; - delete this.formstate.volume_target.$error.volumesInconsistent; - }, - "model.volume_target": function() { - delete this.formstate.volume_source.$error.volumesInconsistent; - delete this.formstate.volume_target.$error.volumesInconsistent; - } + createNewAccounting: function () { + let model = this.model; + let formstate = this.formstate; + + if (formstate.$invalid) { + return; + } + if ((model.volume_source.length === 0 && model.volume_target.length !== 0) || + (model.volume_source.length !== 0 && model.volume_target.length === 0)) { + this.crossValidationError = true; + return; + } + + let rep = { + user_id: this.userId, + image_name: this.model.image_name, + allow_home: this.model.allow_home, + volume_source: this.model.volume_source, + volume_target: this.model.volume_target, + volume_mode: (model.volume_readonly ? "ro" : "rw") + }; + + resources.Accounting.create(rep) + .done(() => { + this.$emit('created'); + }) + .fail(() => { + this.communicationError = "The request could not be executed successfully"; + }); + }, + + reset: function () { + Object.assign(this.$data, this.$options.data()); + }, + + validatePath: function(value) { + return (value.length === 0 || value[0] === '/'); + } + }, + + watch: { + "show": function (value) { + if (value) { + this.reset(); + } + }, + "model.volume_source": function() { + delete this.formstate.volume_source.$error.volumesInconsistent; + delete this.formstate.volume_target.$error.volumesInconsistent; + }, + "model.volume_target": function() { + delete this.formstate.volume_source.$error.volumesInconsistent; + delete this.formstate.volume_target.$error.volumesInconsistent; } + } }; diff --git a/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js b/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js index ebd6b27fc..2c8e2ed2f 100644 --- a/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/applications/NewApplicationDialog.js @@ -1,80 +1,80 @@ let resources = require("admin-resources"); module.exports = { - template: - ` -

    Create New Application

    -
    - - - - - - Image Name cannot be empty - - -
    -
    - Error: {{communicationError}} -
    - - -
    -     -
    -     `, + template: + ` +

    Create New Application

    +
    + + + + + + Image Name cannot be empty + + +
    +
    + Error: {{communicationError}} +
    + + +
    +     +
    +     `, - props: ['show'], + props: ['show'], - data: function () { - return { - formstate: {}, - communicationError: null, - model: { - name: '' - } - }; - }, - - methods: { - close: function () { - this.$emit('closed'); - }, + data: function () { + return { + formstate: {}, + communicationError: null, + model: { + name: '' + } + }; + }, - fieldClassName: function (field) { - if (!field) { - return ''; - } - if ((field.$touched || field.$submitted) && field.$invalid) { - return 'has-error'; - } else { - return ''; - } - }, + methods: { + close: function () { + this.$emit('closed'); + }, - createNewApplication: function () { - if (!this.formstate.$valid) { - return; - } - resources.Application.create({image_name: this.model.name}) - .done(() => { - this.$emit('created'); - }) - .fail(() => { - this.communicationError = "The request could not be executed successfully"; - }); - }, + fieldClassName: function (field) { + if (!field) { + return ''; + } + if ((field.$touched || field.$submitted) && field.$invalid) { + return 'has-error'; + } else { + return ''; + } + }, - reset: function () { - Object.assign(this.$data, this.$options.data()); - } + createNewApplication: function () { + if (!this.formstate.$valid) { + return; + } + resources.Application.create({image_name: this.model.name}) + .done(() => { + this.$emit('created'); + }) + .fail(() => { + this.communicationError = "The request could not be executed successfully"; + }); }, - watch: { - "show": function (value) { - if (value) { - this.reset(); - } - } + reset: function () { + Object.assign(this.$data, this.$options.data()); + } + }, + + watch: { + "show": function (value) { + if (value) { + this.reset(); + } } + } }; diff --git a/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js b/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js index 0f172876b..832a24265 100644 --- a/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/users/NewUserDialog.js @@ -1,76 +1,76 @@ let resources = require("admin-resources"); module.exports = { - template: - ` -

    Create New User

    -
    - - - - - - User Name cannot be empty - - -
    - - -
    -     -
    -     `, + template: + ` +

    Create New User

    +
    + + + + + + User Name cannot be empty + + +
    + + +
    +     +
    +     `, - props: ['show'], + props: ['show'], - data: function () { - return { - formstate: {}, - model: { - name: '' - } - }; - }, - - methods: { - close: function () { - this.$emit('closed'); - }, + data: function () { + return { + formstate: {}, + model: { + name: '' + } + }; + }, - fieldClassName: function (field) { - if (!field) { - return ''; - } - if ((field.$touched || field.$submitted) && field.$invalid) { - return 'has-error'; - } else { - return ''; - } - }, + methods: { + close: function () { + this.$emit('closed'); + }, - createNewUser: function () { - if (!this.formstate.$valid) { - return; - } - resources.User.create({name: this.model.name}) - .done(() => { - this.$emit('created'); - }) - .fail(() => { - this.$emit("closed"); - }); - }, + fieldClassName: function (field) { + if (!field) { + return ''; + } + if ((field.$touched || field.$submitted) && field.$invalid) { + return 'has-error'; + } else { + return ''; + } + }, - reset: function () { - Object.assign(this.$data, this.$options.data()); - } + createNewUser: function () { + if (!this.formstate.$valid) { + return; + } + resources.User.create({name: this.model.name}) + .done(() => { + this.$emit('created'); + }) + .fail(() => { + this.$emit("closed"); + }); }, - watch: { - "show": function (value) { - if (value) { - this.reset(); - } - } + reset: function () { + Object.assign(this.$data, this.$options.data()); + } + }, + + watch: { + "show": function (value) { + if (value) { + this.reset(); + } } + } }; diff --git a/remoteappmanager/static/js/gamodule.js b/remoteappmanager/static/js/gamodule.js index 90e2f1443..c74361bd7 100644 --- a/remoteappmanager/static/js/gamodule.js +++ b/remoteappmanager/static/js/gamodule.js @@ -3,32 +3,32 @@ // matching to prevent loading. function init() { - if (window.apidata.analytics !== undefined) { - window.ga('create', window.apidata.analytics.tracking_id, 'auto'); - } else { - window.ga = function() {}; - } + if (window.apidata.analytics !== undefined) { + window.ga('create', window.apidata.analytics.tracking_id, 'auto'); + } else { + window.ga = function() {}; + } - return function() { - window.ga.apply(this, arguments); - }; + return function() { + window.ga.apply(this, arguments); + }; } class GaObserver { - constructor() { - this.ga = init(); - } + constructor() { + this.ga = init(); + } - triggerApplicationStarting(name) { - this.ga("send", "event", { - eventCategory: "Application", - eventAction: "start", - eventLabel: name - }); - } + triggerApplicationStarting(name) { + this.ga("send", "event", { + eventCategory: "Application", + eventAction: "start", + eventLabel: name + }); + } } module.exports = { - init, // For testing purpose - GaObserver + init, // For testing purpose + GaObserver }; diff --git a/remoteappmanager/static/js/urlutils.js b/remoteappmanager/static/js/urlutils.js index d50ceda38..3fac1dd81 100644 --- a/remoteappmanager/static/js/urlutils.js +++ b/remoteappmanager/static/js/urlutils.js @@ -6,45 +6,45 @@ // Distributed under the terms of the Modified BSD License. let pathJoin = function () { - // join a sequence of url components with '/' - let url = '', i = 0; + // join a sequence of url components with '/' + let url = '', i = 0; - for (i = 0; i < arguments.length; i += 1) { - if (arguments[i] === '') { - continue; - } - if (url.length > 0 && url[url.length-1] !== '/') { - url = url + '/' + arguments[i]; - } else { - url = url + arguments[i]; - } + for (i = 0; i < arguments.length; i += 1) { + if (arguments[i] === '') { + continue; } - url = url.replace(/\/\/+/, '/'); - return url; + if (url.length > 0 && url[url.length-1] !== '/') { + url = url + '/' + arguments[i]; + } else { + url = url + arguments[i]; + } + } + url = url.replace(/\/\/+/, '/'); + return url; }; let parse = function (url) { - // an `a` element with an href allows attr-access to the parsed segments of a URL - // a = parse_url("http://localhost:8888/path/name#hash") - // a.protocol = "http:" - // a.host = "localhost:8888" - // a.hostname = "localhost" - // a.port = 8888 - // a.pathname = "/path/name" - // a.hash = "#hash" - let a = document.createElement("a"); - a.href = url; - return a; + // an `a` element with an href allows attr-access to the parsed segments of a URL + // a = parse_url("http://localhost:8888/path/name#hash") + // a.protocol = "http:" + // a.host = "localhost:8888" + // a.hostname = "localhost" + // a.port = 8888 + // a.pathname = "/path/name" + // a.hash = "#hash" + let a = document.createElement("a"); + a.href = url; + return a; }; let encodeUriComponents = function (uri) { - // encode just the components of a multi-segment uri, - // leaving '/' separators - return uri.split('/').map(encodeURIComponent).join('/'); + // encode just the components of a multi-segment uri, + // leaving '/' separators + return uri.split('/').map(encodeURIComponent).join('/'); }; module.exports = { - pathJoin, - encodeUriComponents, - parse + pathJoin, + encodeUriComponents, + parse }; diff --git a/remoteappmanager/static/js/user/configurables.js b/remoteappmanager/static/js/user/configurables.js index 219640374..f248fe2d6 100644 --- a/remoteappmanager/static/js/user/configurables.js +++ b/remoteappmanager/static/js/user/configurables.js @@ -3,57 +3,57 @@ let utils = require("utils"); let resolutionTag = 'resolution'; const resolutionComponent = Vue.component(resolutionTag + '-component', { - // Your configurable must have a "configDict" property from the model - props: ['configDict'], - - template: - `
    - - -
    `, - - data: function() { - return { - resolution: this.configDict.resolution, - resolutionOptions: ['Window', '1920x1080', '1280x1024', '1280x800', '1024x768'] - }; - }, - - watch: { - configDict: function() { this.resolution = this.configDict.resolution; }, // model -> view update - resolution: function() { this.$emit('update:configDict', { resolution: this.resolution }); } // view -> model update - } + // Your configurable must have a "configDict" property from the model + props: ['configDict'], + + template: + `
    + + +
    `, + + data: function() { + return { + resolution: this.configDict.resolution, + resolutionOptions: ['Window', '1920x1080', '1280x1024', '1280x800', '1024x768'] + }; + }, + + watch: { + configDict: function() { this.resolution = this.configDict.resolution; }, // model -> view update + resolution: function() { this.$emit('update:configDict', { resolution: this.resolution }); } // view -> model update + } }); // Your configurable class must implement a tag and default configDict class ResolutionModel { - constructor() { - this.tag = resolutionTag; - this.configDict = { resolution: 'Window' }; - } + constructor() { + this.tag = resolutionTag; + this.configDict = { resolution: 'Window' }; + } - asConfigDict() { - let resolution = this.configDict.resolution; + asConfigDict() { + let resolution = this.configDict.resolution; - if (resolution === 'Window') { - let maxSize = utils.maxIframeSize(); - resolution = maxSize[0] + 'x' + maxSize[1]; - } - - return { resolution: resolution }; + if (resolution === 'Window') { + let maxSize = utils.maxIframeSize(); + resolution = maxSize[0] + 'x' + maxSize[1]; } + + return { resolution: resolution }; + } } let outputConfigurables = {}; // Export all your configurable models here outputConfigurables[resolutionTag] = { - model: ResolutionModel, - component: resolutionComponent + model: ResolutionModel, + component: resolutionComponent }; module.exports = outputConfigurables; \ No newline at end of file diff --git a/remoteappmanager/static/js/user/main.js b/remoteappmanager/static/js/user/main.js index 7e30c94b4..4f752b0db 100644 --- a/remoteappmanager/static/js/user/main.js +++ b/remoteappmanager/static/js/user/main.js @@ -10,20 +10,20 @@ let model = new models.ApplicationListModel(); // Initialize views let appListView = new applicationListView.ApplicationListView({ - el: '#applist', - data: function() { return { model: model }; } + el: '#applist', + data: function() { return { model: model }; } }); let appView = new applicationView.ApplicationView({ - el: '#appview', - data: function() { return { model: model }; } + el: '#appview', + data: function() { return { model: model }; } }); // Create GA observer let gaObserver = new gamodule.GaObserver(); appView.$on('startApplication', function(application) { - gaObserver.triggerApplicationStarting(application.appData.image.name); + gaObserver.triggerApplicationStarting(application.appData.image.name); }); appListView.$on('entryClicked', function() { appView.focusIframe(); }); diff --git a/remoteappmanager/static/js/user/models.js b/remoteappmanager/static/js/user/models.js index b011b61a6..b5a279afa 100644 --- a/remoteappmanager/static/js/user/models.js +++ b/remoteappmanager/static/js/user/models.js @@ -3,203 +3,203 @@ let resources = require("user-resources"); let configurables = require("./configurables"); let Status = { - RUNNING: "RUNNING", - STARTING: "STARTING", - STOPPING: "STOPPING", - STOPPED: "STOPPED" + RUNNING: "RUNNING", + STARTING: "STARTING", + STOPPING: "STOPPING", + STOPPED: "STOPPED" }; let availableApplicationsInfo = function () { - // Retrieve information from the various applications and - // connect the cascading callbacks. - // Returns a single promise. When resolved, the attached - // callbacks will be passed an array of the promises for the various - // retrieve operations, successful or not. - // This routine will go away when we provide the representation data - // inline with the items at tornado-webapi level. - - let promise = $.Deferred(); - - resources.Application.items() - .done((identifiers, items) => { - let result = []; - Object.keys(items).forEach((key) => { - result.push(items[key]); - }); - promise.resolve(result); - - }) - .fail(() => { - promise.resolve([]); - }); - - return promise; + // Retrieve information from the various applications and + // connect the cascading callbacks. + // Returns a single promise. When resolved, the attached + // callbacks will be passed an array of the promises for the various + // retrieve operations, successful or not. + // This routine will go away when we provide the representation data + // inline with the items at tornado-webapi level. + + let promise = $.Deferred(); + + resources.Application.items() + .done((identifiers, items) => { + let result = []; + Object.keys(items).forEach((key) => { + result.push(items[key]); + }); + promise.resolve(result); + + }) + .fail(() => { + promise.resolve([]); + }); + + return promise; }; class ApplicationListModel { - constructor() { - this.appList = []; - - // Selection index for when we click on one entry. - // Should be the index of the selected application, - // or null if no application available (first app is clicked by default). - this.selectedIndex = null; - - this.loading = true; - } - - update() { - // Requests an update of the object internal data. - // This method returns a jQuery Promise object. - // When resolved, this.data will contain a list of the retrieved - // data. Note that, in error conditions, this routine resolves - // successfully in any case, and the data is set to empty list - return $.when( - availableApplicationsInfo() - ).done((appData) => { - // appData contains the data retrieved from the remote API - - let appList = []; - - // Sort application list by names - appData.sort((app1, app2) => { - let app1Name = app1.image.ui_name? app1.image.ui_name: app1.image.name; - let app2Name = app2.image.ui_name? app2.image.ui_name: app2.image.name; - return app1Name < app2Name? -1: 1; - }); - - // Add the options for some image types - appData.forEach((applicationData) => { - let app = { - appData: applicationData, - // Default values, will be overwritten - status: Status.STOPPED, - // If true the user will see the loading spinner (when starting the application) - delayed: true, - configurables: [], - isRunning: function() {return this.status === Status.RUNNING;}, - isStopped: function() {return this.status === Status.STOPPED;}, - isStarting: function() {return this.status === Status.STARTING;}, - isStopping: function() {return this.status === Status.STOPPING;} - }; - - this._updateConfigurables(app); - this._updateStatus(app); - - app.delayed = !app.isRunning(); - appList.push(app); - }); - - this.appList = appList; - - if(appList.length) {this.selectedIndex = 0;} - - this.loading = false; - }); - } - - updateIdx(index) { - // Refetches and updates the entry at the given index. - let app = this.appList[index]; - let mapping_id = app.appData.mapping_id; - - return resources.Application.retrieve(mapping_id) - .done((newData) => { - app.appData = newData; - - this._updateStatus(app); - }); - } - - _updateConfigurables(app) { - // Contains the submodels for the configurables. - // It is a dictionary that maps a supported (by the image) configurable tag - // to its client-side model. - app.configurables = []; - - app.appData.image.configurables.forEach(function(tag) { - // If this returns null, the tag has not been recognized - // by the client. skip it and let the server deal with the - // missing data, either by using a default or throwing - // an error. - let ConfigurableCls = configurables[tag].model; - - if (ConfigurableCls !== undefined) { - app.configurables.push(new ConfigurableCls()); - } - }); - } - - _updateStatus(app) { - if (app.appData.container === undefined) { - app.status = Status.STOPPED; - } else { - app.status = Status.RUNNING; - } - } - - startApplication() { - let selectedIndex = this.selectedIndex; - let currentApp = this.appList[selectedIndex]; - - currentApp.status = Status.STARTING; - currentApp.delayed = true; - - let configurablesData = {}; - currentApp.configurables.forEach(function(configurable) { - let tag = configurable.tag; - configurablesData[tag] = configurable.asConfigDict(); - }); - - let startPromise = $.Deferred(); - - resources.Container.create({ - mapping_id: currentApp.appData.mapping_id, - configurables: configurablesData - }) - .done(() => { - this.updateIdx(selectedIndex) - .done(startPromise.resolve) - .fail((error) => { - currentApp.status = Status.STOPPED; - startPromise.reject(error); - }); - }) - .fail((error) => { - currentApp.status = Status.STOPPED; - startPromise.reject(error); - }); - - return startPromise; - } - - stopApplication(index) { - let appStopping = this.appList[index]; - appStopping.status = Status.STOPPING; - - let url_id = appStopping.appData.container.url_id; - - let stopPromise = $.Deferred(); - - resources.Container.delete(url_id) - .done(() => { - this.updateIdx(index) - .done(stopPromise.resolve) - .fail(function(error) { - appStopping.status = Status.STOPPED; - stopPromise.reject(error); - }); - }) - .fail((error) => { - appStopping.status = Status.STOPPED; - stopPromise.reject(error); - }); - - return stopPromise; + constructor() { + this.appList = []; + + // Selection index for when we click on one entry. + // Should be the index of the selected application, + // or null if no application available (first app is clicked by default). + this.selectedIndex = null; + + this.loading = true; + } + + update() { + // Requests an update of the object internal data. + // This method returns a jQuery Promise object. + // When resolved, this.data will contain a list of the retrieved + // data. Note that, in error conditions, this routine resolves + // successfully in any case, and the data is set to empty list + return $.when( + availableApplicationsInfo() + ).done((appData) => { + // appData contains the data retrieved from the remote API + + let appList = []; + + // Sort application list by names + appData.sort((app1, app2) => { + let app1Name = app1.image.ui_name? app1.image.ui_name: app1.image.name; + let app2Name = app2.image.ui_name? app2.image.ui_name: app2.image.name; + return app1Name < app2Name? -1: 1; + }); + + // Add the options for some image types + appData.forEach((applicationData) => { + let app = { + appData: applicationData, + // Default values, will be overwritten + status: Status.STOPPED, + // If true the user will see the loading spinner (when starting the application) + delayed: true, + configurables: [], + isRunning: function() {return this.status === Status.RUNNING;}, + isStopped: function() {return this.status === Status.STOPPED;}, + isStarting: function() {return this.status === Status.STARTING;}, + isStopping: function() {return this.status === Status.STOPPING;} + }; + + this._updateConfigurables(app); + this._updateStatus(app); + + app.delayed = !app.isRunning(); + appList.push(app); + }); + + this.appList = appList; + + if(appList.length) {this.selectedIndex = 0;} + + this.loading = false; + }); + } + + updateIdx(index) { + // Refetches and updates the entry at the given index. + let app = this.appList[index]; + let mapping_id = app.appData.mapping_id; + + return resources.Application.retrieve(mapping_id) + .done((newData) => { + app.appData = newData; + + this._updateStatus(app); + }); + } + + _updateConfigurables(app) { + // Contains the submodels for the configurables. + // It is a dictionary that maps a supported (by the image) configurable tag + // to its client-side model. + app.configurables = []; + + app.appData.image.configurables.forEach(function(tag) { + // If this returns null, the tag has not been recognized + // by the client. skip it and let the server deal with the + // missing data, either by using a default or throwing + // an error. + let ConfigurableCls = configurables[tag].model; + + if (ConfigurableCls !== undefined) { + app.configurables.push(new ConfigurableCls()); + } + }); + } + + _updateStatus(app) { + if (app.appData.container === undefined) { + app.status = Status.STOPPED; + } else { + app.status = Status.RUNNING; } + } + + startApplication() { + let selectedIndex = this.selectedIndex; + let currentApp = this.appList[selectedIndex]; + + currentApp.status = Status.STARTING; + currentApp.delayed = true; + + let configurablesData = {}; + currentApp.configurables.forEach(function(configurable) { + let tag = configurable.tag; + configurablesData[tag] = configurable.asConfigDict(); + }); + + let startPromise = $.Deferred(); + + resources.Container.create({ + mapping_id: currentApp.appData.mapping_id, + configurables: configurablesData + }) + .done(() => { + this.updateIdx(selectedIndex) + .done(startPromise.resolve) + .fail((error) => { + currentApp.status = Status.STOPPED; + startPromise.reject(error); + }); + }) + .fail((error) => { + currentApp.status = Status.STOPPED; + startPromise.reject(error); + }); + + return startPromise; + } + + stopApplication(index) { + let appStopping = this.appList[index]; + appStopping.status = Status.STOPPING; + + let url_id = appStopping.appData.container.url_id; + + let stopPromise = $.Deferred(); + + resources.Container.delete(url_id) + .done(() => { + this.updateIdx(index) + .done(stopPromise.resolve) + .fail(function(error) { + appStopping.status = Status.STOPPED; + stopPromise.reject(error); + }); + }) + .fail((error) => { + appStopping.status = Status.STOPPED; + stopPromise.reject(error); + }); + + return stopPromise; + } } module.exports = { - ApplicationListModel + ApplicationListModel }; diff --git a/remoteappmanager/static/js/user/user-resources.js b/remoteappmanager/static/js/user/user-resources.js index c5060fefd..f8d425134 100644 --- a/remoteappmanager/static/js/user/user-resources.js +++ b/remoteappmanager/static/js/user/user-resources.js @@ -3,311 +3,311 @@ var urlUtils = require("urlutils"); var utils = require("utils"); var object_to_query_args = function (obj) { - var keys = Object.keys(obj); - if (keys.length === 0) { - return ""; + var keys = Object.keys(obj); + if (keys.length === 0) { + return ""; + } + + var result = []; + for (var idx in keys) { + var key = keys[idx]; + var value = obj[key]; + var key_enc = encodeURIComponent(key); + if ($.isArray(value)) { + for (var v in value) { + result.push(key_enc+"="+encodeURIComponent(v)); + } + } else { + result.push(key_enc+"="+encodeURIComponent(value)); } + } - var result = []; - for (var idx in keys) { - var key = keys[idx]; - var value = obj[key]; - var key_enc = encodeURIComponent(key); - if ($.isArray(value)) { - for (var v in value) { - result.push(key_enc+"="+encodeURIComponent(v)); - } - } else { - result.push(key_enc+"="+encodeURIComponent(value)); - } - } - - return result.join("&"); + return result.join("&"); }; var API = (function () { - // Object representing the interface to the Web API. - // @param base_url : the url at which to find the web API endpoint. - var self = {}; - self.base_urlpath = "/user/test/"; - self.default_options = { - contentType: "application/json", - cache: false, - dataType : null, - processData: false, - success: null, - error: null - }; - - self.request = function (req_type, endpoint, body, query_args) { - // Performs a request to the final endpoint - var options = {}; - utils.update(options, self.default_options); - utils.update(options, { - type: req_type, - data: body - }); - - var url = urlUtils.pathJoin( - self.base_urlpath, - "api", "v1", - urlUtils.encodeUriComponents(endpoint) - )+'/'; - - if (query_args) { - url = url + "?" + object_to_query_args(query_args); - } - return $.ajax(url, options); - }; - return self; + // Object representing the interface to the Web API. + // @param base_url : the url at which to find the web API endpoint. + var self = {}; + self.base_urlpath = "/user/test/"; + self.default_options = { + contentType: "application/json", + cache: false, + dataType : null, + processData: false, + success: null, + error: null + }; + + self.request = function (req_type, endpoint, body, query_args) { + // Performs a request to the final endpoint + var options = {}; + utils.update(options, self.default_options); + utils.update(options, { + type: req_type, + data: body + }); + + var url = urlUtils.pathJoin( + self.base_urlpath, + "api", "v1", + urlUtils.encodeUriComponents(endpoint) + )+'/'; + + if (query_args) { + url = url + "?" + object_to_query_args(query_args); + } + return $.ajax(url, options); + }; + return self; })(); var RestError = function(code, message) { - console.log("Creating error "+code+" message: "+message); - this.code = code; - this.message = message; + console.log("Creating error "+code+" message: "+message); + this.code = code; + this.message = message; }; var fail_handler = function(promise, jqXHR) { - var status = jqXHR.status; - var payload = null; - try { - payload = JSON.parse(jqXHR.responseText); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - var err = new RestError(status, ""); - if (payload !== null) { - utils.update(err, payload); - } - promise.reject(err); + var status = jqXHR.status; + var payload = null; + try { + payload = JSON.parse(jqXHR.responseText); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + var err = new RestError(status, ""); + if (payload !== null) { + utils.update(err, payload); + } + promise.reject(err); }; var create_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(data); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 201) { - // Strange situation in which the call succeeded, but - // not with a 201. Just do our best. - console.log( - "Create succeded but response with status " + - status + - " instead of 201." - ); - promise.reject(status, payload); - return; - } - - var id, location; - try { - location = jqXHR.getResponseHeader('Location'); - var url = urlUtils.parse(location); - var arr = url.pathname.replace(/\/$/, "").split('/'); - id = arr[arr.length - 1]; - } catch (e) { - console.log("Response had invalid or absent Location header"); - promise.reject(status, payload); - return; - } - promise.resolve(id, location); + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(data); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 201) { + // Strange situation in which the call succeeded, but + // not with a 201. Just do our best. + console.log( + "Create succeded but response with status " + + status + + " instead of 201." + ); + promise.reject(status, payload); + return; + } + + var id, location; + try { + location = jqXHR.getResponseHeader('Location'); + var url = urlUtils.parse(location); + var arr = url.pathname.replace(/\/$/, "").split('/'); + id = arr[arr.length - 1]; + } catch (e) { + console.log("Response had invalid or absent Location header"); + promise.reject(status, payload); + return; + } + promise.resolve(id, location); }; var update_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(data); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 204) { - // Strange situation in which the call succeeded, but - // not with a 201. Just do our best. - console.log( - "Update succeded but response with status " + - status + - " instead of 204." - ); - promise.reject(status, payload); - return; - } - - promise.resolve(); + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(data); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 204) { + // Strange situation in which the call succeeded, but + // not with a 201. Just do our best. + console.log( + "Update succeded but response with status " + + status + + " instead of 204." + ); + promise.reject(status, payload); + return; + } + + promise.resolve(); }; var delete_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - var payload = null; - try { - payload = JSON.parse(data); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 204) { - console.log( - "Delete succeded but response with status " + - status + - " instead of 204." - ); - promise.reject(status, payload); - return; - } - promise.resolve(); + var status = jqXHR.status; + var payload = null; + try { + payload = JSON.parse(data); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 204) { + console.log( + "Delete succeded but response with status " + + status + + " instead of 204." + ); + promise.reject(status, payload); + return; + } + promise.resolve(); }; var retrieve_handler = function(promise, data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(jqXHR.responseText); - } catch (e) { - // Suppress any syntax error and discard the payload - } + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(jqXHR.responseText); + } catch (e) { + // Suppress any syntax error and discard the payload + } + + if (status !== 200) { + console.log( + "Retrieve succeded but response with status " + + status + + " instead of 200." + ); + promise.reject(status, payload); + return; + } + + if (payload === null) { + console.log( + "Retrieve succeded but empty or invalid payload" + ); + promise.reject(status, payload); + return; + } + + promise.resolve(payload); +}; - if (status !== 200) { - console.log( - "Retrieve succeded but response with status " + - status + - " instead of 200." - ); - promise.reject(status, payload); - return; - } +var Resource = function(type) { + this.type = type; + + this.create = function(representation, query_args) { + var body = JSON.stringify(representation); + var promise = $.Deferred(); + + API.request("POST", type, body, query_args) + .done(function(data, textStatus, jqXHR) { + create_handler(promise, data, textStatus, jqXHR); + }) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.update = function(id, representation, query_args) { + var body = JSON.stringify(representation); + var promise = $.Deferred(); + + API.request("PUT", urlUtils.pathJoin(type, id), body, query_args) + .done(function(data, textStatus, jqXHR) { + update_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.delete = function(id, query_args) { + var promise = $.Deferred(); + + API.request("DELETE", urlUtils.pathJoin(type, id), null, query_args) + .done(function(data, textStatus, jqXHR) { + delete_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.retrieve = function(id, query_args) { + var promise = $.Deferred(); + + API.request("GET", urlUtils.pathJoin(type, id), null, query_args) + .done(function(data, textStatus, jqXHR) { + retrieve_handler(promise, data, textStatus, jqXHR); + } + ) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; + + this.items = function(query_args) { + var promise = $.Deferred(); + + API.request("GET", type, null, query_args) + .done(function(data, textStatus, jqXHR) { + var status = jqXHR.status; + + var payload = null; + try { + payload = JSON.parse(jqXHR.responseText); + } catch (e) { + // Suppress any syntax error and discard the payload + } - if (payload === null) { - console.log( - "Retrieve succeded but empty or invalid payload" - ); - promise.reject(status, payload); - return; - } + if (status !== 200) { + console.log( + "Items retrieve succeded but response with status " + + status + + " instead of 200." + ); + promise.reject(status, payload); + return; + } - promise.resolve(payload); -}; + if (payload === null) { + console.log( + "Items Retrieve succeded but empty or invalid payload" + ); + promise.reject(status, payload); + return; + } -var Resource = function(type) { - this.type = type; - - this.create = function(representation, query_args) { - var body = JSON.stringify(representation); - var promise = $.Deferred(); - - API.request("POST", type, body, query_args) - .done(function(data, textStatus, jqXHR) { - create_handler(promise, data, textStatus, jqXHR); - }) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.update = function(id, representation, query_args) { - var body = JSON.stringify(representation); - var promise = $.Deferred(); - - API.request("PUT", urlUtils.pathJoin(type, id), body, query_args) - .done(function(data, textStatus, jqXHR) { - update_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.delete = function(id, query_args) { - var promise = $.Deferred(); - - API.request("DELETE", urlUtils.pathJoin(type, id), null, query_args) - .done(function(data, textStatus, jqXHR) { - delete_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.retrieve = function(id, query_args) { - var promise = $.Deferred(); - - API.request("GET", urlUtils.pathJoin(type, id), null, query_args) - .done(function(data, textStatus, jqXHR) { - retrieve_handler(promise, data, textStatus, jqXHR); - } - ) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; - - this.items = function(query_args) { - var promise = $.Deferred(); - - API.request("GET", type, null, query_args) - .done(function(data, textStatus, jqXHR) { - var status = jqXHR.status; - - var payload = null; - try { - payload = JSON.parse(jqXHR.responseText); - } catch (e) { - // Suppress any syntax error and discard the payload - } - - if (status !== 200) { - console.log( - "Items retrieve succeded but response with status " + - status + - " instead of 200." - ); - promise.reject(status, payload); - return; - } - - if (payload === null) { - console.log( - "Items Retrieve succeded but empty or invalid payload" - ); - promise.reject(status, payload); - return; - } - - promise.resolve( - payload.identifiers, - payload.items, - payload.offset, - payload.total); - }) - .fail(function(jqXHR) { - fail_handler(promise, jqXHR); - }); - - return promise; - }; + promise.resolve( + payload.identifiers, + payload.items, + payload.offset, + payload.total); + }) + .fail(function(jqXHR) { + fail_handler(promise, jqXHR); + }); + + return promise; + }; }; module.exports = { - "Container" : new Resource("containers"), - "Application" : new Resource("applications"), + "Container" : new Resource("containers"), + "Application" : new Resource("applications"), }; diff --git a/remoteappmanager/static/js/user/views/application_list_view.js b/remoteappmanager/static/js/user/views/application_list_view.js index 0e0b4ae3f..0b2973d3f 100644 --- a/remoteappmanager/static/js/user/views/application_list_view.js +++ b/remoteappmanager/static/js/user/views/application_list_view.js @@ -2,104 +2,104 @@ let Vue = require("vuejs"); require("toolkit"); const ApplicationListView = Vue.extend({ - template: - `
    - - -
    - Code: {{stoppingError.code}} - {{stoppingError.message}} -
    -     + template: + `
    + + +
    + Code: {{stoppingError.code}} + {{stoppingError.message}} +
    +     - -
    - -
    + +
    + +
    - -
      -
    • APPLICATIONS
      • -
    + +
      +
    • APPLICATIONS
      • +
    - - - -
  • + + +
  • - + - - + + - - {{ app.appData.image | appName }} - -
    • -     - -
    - `, + + {{ app.appData.image | appName }} + + + + +
    + `, - data: function() { - return { - 'searchInput': '', - stoppingError: { show: false, appName: '', code: '', message: '' } - }; - }, + data: function() { + return { + 'searchInput': '', + stoppingError: { show: false, appName: '', code: '', message: '' } + }; + }, - computed: { - visibleList: function() { - return this.model.appList.filter((app) => { - let appName = this.$options.filters.appName(app.appData.image).toLowerCase(); - return appName.indexOf(this.searchInput.toLowerCase()) !== -1; - }); - } - }, + computed: { + visibleList: function() { + return this.model.appList.filter((app) => { + let appName = this.$options.filters.appName(app.appData.image).toLowerCase(); + return appName.indexOf(this.searchInput.toLowerCase()) !== -1; + }); + } + }, - methods: { - stopApplication: function(index) { - let stoppingAppName = this.$options.filters.appName( - this.model.appList[index].appData.image); - this.model.stopApplication(index).fail((error) => { - this.stoppingError.code = error.code; - this.stoppingError.message = error.message; - this.stoppingError.appName = stoppingAppName; - this.stoppingError.show = true; - }); - }, - closeDialog: function() { - this.stoppingError.show = false; - }, - indexOf: function(app) { - return this.model.appList.indexOf(app); - } + methods: { + stopApplication: function(index) { + let stoppingAppName = this.$options.filters.appName( + this.model.appList[index].appData.image); + this.model.stopApplication(index).fail((error) => { + this.stoppingError.code = error.code; + this.stoppingError.message = error.message; + this.stoppingError.appName = stoppingAppName; + this.stoppingError.show = true; + }); + }, + closeDialog: function() { + this.stoppingError.show = false; + }, + indexOf: function(app) { + return this.model.appList.indexOf(app); } + } }); module.exports = { - ApplicationListView + ApplicationListView }; diff --git a/remoteappmanager/static/js/user/views/application_view.js b/remoteappmanager/static/js/user/views/application_view.js index 0588508dd..416fbd959 100644 --- a/remoteappmanager/static/js/user/views/application_view.js +++ b/remoteappmanager/static/js/user/views/application_view.js @@ -4,145 +4,145 @@ let utils = require("utils"); require("toolkit"); const ApplicationView = Vue.extend({ - template: - ` -
    - - -
    - Code: {{startingError.code}} - {{startingError.message}} -
    -     + template: + ` +
    + + +
    + Code: {{startingError.code}} + {{startingError.message}} +
    +     - -
    -
    -
    -
    -

    {{ currentApp.appData.image | appName }}

    -
    -
    -
    -

    Description

    - {{ currentApp.appData.image.description }} + +
    +
    +
    +
    +

    {{ currentApp.appData.image | appName }}

    +
    +
    +
    +

    Description

    + {{ currentApp.appData.image.description }} -

    Policy

    +

    Policy

    -
      - -
    • - Workspace accessible -
      • -
    • - Workspace not accessible -
      • +
        + +
      • + Workspace accessible +
        • +
      • + Workspace not accessible +
        • - -
      • - Volume mounted: {{ appPolicy.volume_source }} → {{ appPolicy.volume_target }} ({{ appPolicy.volume_mode }}) -
        • -
      • - No volumes mounted -
        • -
      + +
    • + Volume mounted: {{ appPolicy.volume_source }} → {{ appPolicy.volume_target }} ({{ appPolicy.volume_mode }}) +
      • +
    • + No volumes mounted +
      • +
    -

    Configuration

    -
    -
    No configurable options for this image
    -
    - -
    -
    -
    +

    Configuration

    +
    +
    No configurable options for this image
    +
    + +
    +
    +
    - -
    - -
    -
    -
    -
    + +
    + +
    +
    +
    +
    - - -
    `, + + +
    `, - data: function() { - return { - startingError: { show: false, appName: '', code: '', message: '' } - }; + data: function() { + return { + startingError: { show: false, appName: '', code: '', message: '' } + }; + }, + + computed: { + currentApp: function() { + return this.model.appList[this.model.selectedIndex] || null; + }, + appPolicy: function() { + return this.currentApp.appData.image.policy; }, + appSource: function() { + let url = urlUtils.pathJoin( + window.apidata.base_url, + 'containers', + this.currentApp.appData.container.url_id + ); + let output = this.currentApp.delayed ? url : url + '/'; - computed: { - currentApp: function() { - return this.model.appList[this.model.selectedIndex] || null; - }, - appPolicy: function() { - return this.currentApp.appData.image.policy; - }, - appSource: function() { - let url = urlUtils.pathJoin( - window.apidata.base_url, - 'containers', - this.currentApp.appData.container.url_id - ); - let output = this.currentApp.delayed ? url : url + '/'; + this.currentApp.delayed = false; - this.currentApp.delayed = false; + return output; + } + }, - return output; - } + methods: { + startApplication: function() { + let startingApp = this.currentApp; + let startingAppName = this.$options.filters.appName(startingApp.appData.image); + this.model.startApplication() + .done(() => { + this.$emit('startApplication', startingApp); + }) + .fail((error) => { + this.startingError.code = error.code; + this.startingError.message = error.message; + this.startingError.appName = startingAppName; + this.startingError.show = true; + }); }, - - methods: { - startApplication: function() { - let startingApp = this.currentApp; - let startingAppName = this.$options.filters.appName(startingApp.appData.image); - this.model.startApplication() - .done(() => { - this.$emit('startApplication', startingApp); - }) - .fail((error) => { - this.startingError.code = error.code; - this.startingError.message = error.message; - this.startingError.appName = startingAppName; - this.startingError.show = true; - }); - }, - closeDialog: function() { - this.startingError.show = false; - }, - getIframeSize: function() { - return utils.maxIframeSize(); - }, - focusIframe: function() { - let iframe = this.$el.querySelector('iframe'); - if(iframe !== null) { - iframe.focus(); - } - } + closeDialog: function() { + this.startingError.show = false; + }, + getIframeSize: function() { + return utils.maxIframeSize(); }, + focusIframe: function() { + let iframe = this.$el.querySelector('iframe'); + if(iframe !== null) { + iframe.focus(); + } + } + }, - updated: function() { this.focusIframe(); } + updated: function() { this.focusIframe(); } }); module.exports = { - ApplicationView + ApplicationView }; diff --git a/remoteappmanager/static/js/utils.js b/remoteappmanager/static/js/utils.js index 4355717a1..cc9f071cd 100644 --- a/remoteappmanager/static/js/utils.js +++ b/remoteappmanager/static/js/utils.js @@ -8,40 +8,40 @@ let $ = require("jquery"); let all = function (promises) { - // A form of jQuery.when that handles an array of promises - // and equalises the behavior regardless if there's one or more than - // one elements. - if (!Array.isArray(promises)) { - throw new Error("$.all() must be passed an array of promises"); + // A form of jQuery.when that handles an array of promises + // and equalises the behavior regardless if there's one or more than + // one elements. + if (!Array.isArray(promises)) { + throw new Error("$.all() must be passed an array of promises"); + } + return $.when.apply($, promises).then(function () { + // if single argument was expanded into multiple arguments, + // then put it back into an array for consistency + if (promises.length === 1 && arguments.length > 1) { + // put arguments into an array + return [Array.prototype.slice.call(arguments, 0)]; + } else { + return Array.prototype.slice.call(arguments, 0); } - return $.when.apply($, promises).then(function () { - // if single argument was expanded into multiple arguments, - // then put it back into an array for consistency - if (promises.length === 1 && arguments.length > 1) { - // put arguments into an array - return [Array.prototype.slice.call(arguments, 0)]; - } else { - return Array.prototype.slice.call(arguments, 0); - } - }); + }); }; let update = function (d1, d2) { - // Transfers the keys from d2 to d1. Returns d1 - $.map(d2, function (i, key) { - d1[key] = d2[key]; - }); - return d1; + // Transfers the keys from d2 to d1. Returns d1 + $.map(d2, function (i, key) { + d1[key] = d2[key]; + }); + return d1; }; let maxIframeSize = function () { - // Returns the current iframe viewport size - let box = document.querySelector(".content-wrapper").getBoundingClientRect(); - return [box.width, box.height]; + // Returns the current iframe viewport size + let box = document.querySelector(".content-wrapper").getBoundingClientRect(); + return [box.width, box.height]; }; module.exports = { - all, - update, - maxIframeSize + all, + update, + maxIframeSize }; diff --git a/remoteappmanager/static/js/vue/filters.js b/remoteappmanager/static/js/vue/filters.js index fc6324b1e..aa0677879 100644 --- a/remoteappmanager/static/js/vue/filters.js +++ b/remoteappmanager/static/js/vue/filters.js @@ -2,15 +2,15 @@ let Vue = require("vuejs"); let urlUtils = require("urlutils"); Vue.filter('iconSrc', function(icon_data) { - return ( - icon_data ? - 'data:image/png;base64,' + icon_data : - urlUtils.pathJoin( - window.apidata.base_url, 'static', 'images', 'generic_appicon_128.png' - ) - ); + return ( + icon_data ? + 'data:image/png;base64,' + icon_data : + urlUtils.pathJoin( + window.apidata.base_url, 'static', 'images', 'generic_appicon_128.png' + ) + ); }); Vue.filter('appName', function(image) { - return image.ui_name? image.ui_name: image.name; + return image.ui_name? image.ui_name: image.name; }); diff --git a/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js b/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js index ad564fc13..32791c257 100644 --- a/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js +++ b/remoteappmanager/static/js/vue/toolkit/AdminLTEBox.js @@ -1,17 +1,17 @@ module.exports = { - props: { - title: { - type: String, - default: "Box" - } - }, - template: - `
    -
    -
    -
    {{title}}
    -
    -
    -
    -
    ` + props: { + title: { + type: String, + default: "Box" + } + }, + template: + `
    +
    +
    +
    {{title}}
    +
    +
    +
    +
    ` }; diff --git a/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js b/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js index 3a366de09..d5e32fdff 100644 --- a/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js +++ b/remoteappmanager/static/js/vue/toolkit/ConfirmDialog.js @@ -1,30 +1,30 @@ module.exports = { - props: { - title: { - type: String, - default: "Confirm" - }, - closeCallback: { - type: Function, - default: undefined - }, - okCallback: { - type: Function, - default: function() {} - } + props: { + title: { + type: String, + default: "Confirm" }, - template: ` -
    -
    -
    -

    {{ title }}

    -
    -
    - - -
    -
    -
    -
    -     ` + closeCallback: { + type: Function, + default: undefined + }, + okCallback: { + type: Function, + default: function() {} + } + }, + template: ` +
    +
    +
    +

    {{ title }}

    +
    +
    + + +
    +
    +
    +
    +     ` }; diff --git a/remoteappmanager/static/js/vue/toolkit/DataTable.js b/remoteappmanager/static/js/vue/toolkit/DataTable.js index 4a6692fbc..a676cbbf6 100644 --- a/remoteappmanager/static/js/vue/toolkit/DataTable.js +++ b/remoteappmanager/static/js/vue/toolkit/DataTable.js @@ -1,43 +1,43 @@ module.exports = { - props: [ - "headers", "rows", "globalActions", "rowActions" - ], - methods: { - isBoolean: function(value) { - return typeof(value) === "boolean"; - }, - buttonClassFromType: function(value = "danger") { - let cls = {"btn": true}; - cls["btn-" + value] = true; - return cls; - } + props: [ + "headers", "rows", "globalActions", "rowActions" + ], + methods: { + isBoolean: function(value) { + return typeof(value) === "boolean"; }, - template: - `
    -
    - -
    - - - - - - - - - - - - - -
    {{header}}Actions
    - -
    -
    ` + buttonClassFromType: function(value = "danger") { + let cls = {"btn": true}; + cls["btn-" + value] = true; + return cls; + } + }, + template: + `
    +
    + +
    + + + + + + + + + + + + + +
    {{header}}Actions
    + +
    +
    ` }; diff --git a/remoteappmanager/static/js/vue/toolkit/ModalDialog.js b/remoteappmanager/static/js/vue/toolkit/ModalDialog.js index 129fb0d5d..6da7b4a59 100644 --- a/remoteappmanager/static/js/vue/toolkit/ModalDialog.js +++ b/remoteappmanager/static/js/vue/toolkit/ModalDialog.js @@ -1,12 +1,12 @@ module.exports = { - template: ` -
    -
    -
    - - -
    -
    -
    -     ` + template: ` +
    +
    +
    + + +
    +
    +
    +     ` }; \ No newline at end of file diff --git a/remoteappmanager/static/js/vue/toolkit/toolkit.js b/remoteappmanager/static/js/vue/toolkit/toolkit.js index 37cc6841d..4155036e0 100644 --- a/remoteappmanager/static/js/vue/toolkit/toolkit.js +++ b/remoteappmanager/static/js/vue/toolkit/toolkit.js @@ -10,8 +10,8 @@ Vue.component("adminlte-box", AdminLTEBox); Vue.component("data-table", DataTable); module.exports = { - ConfirmDialog, - AdminLTEBox, - ModalDialog, - DataTable + ConfirmDialog, + AdminLTEBox, + ModalDialog, + DataTable };