diff --git a/bower.json b/bower.json index 851068977..6dd59a7be 100644 --- a/bower.json +++ b/bower.json @@ -21,7 +21,6 @@ "datatables.net": "~1.10.12", "datatables.net-dt": "~1.10.12", "admin-lte": "~2.3.11", - "handlebars": "~4.0.5", "underscore": "~1.8.3", "html5shiv": "~3.7.3", "respond": "~1.4.2", diff --git a/jstests/tests.html b/jstests/tests.html index b741dfdc5..a039d5577 100644 --- a/jstests/tests.html +++ b/jstests/tests.html @@ -14,6 +14,7 @@
+
diff --git a/jstests/tests/home/test_application_list_view.js b/jstests/tests/home/test_application_list_view.js new file mode 100644 index 000000000..1ed496d53 --- /dev/null +++ b/jstests/tests/home/test_application_list_view.js @@ -0,0 +1,94 @@ +define([ + "home/models", + "home/views/application_list_view", + "components/vue/dist/vue", + "vue/filters" +], function (models, applicationListView, Vue) { + "use strict"; + + QUnit.module("home.app_list_view"); + QUnit.test("rendering list", function (assert) { + var done = assert.async(); + + var model = new models.ApplicationListModel(); + var appListView = new applicationListView.ApplicationListView({ + data: function() { return { model: model }; } + }).$mount(); + + assert.ok(model.loading); + assert.equal( + appListView.$el.querySelector("#loading-spinner").style.display, + "" + ); + + model.update().done(function() { Vue.nextTick(function() { + assert.equal( + appListView.$el.querySelector("#no-app-msg").style.display, + "none" + ); + assert.equal( + appListView.$el.querySelector("#loading-spinner").style.display, + "none" + ); + assert.equal( + appListView.$el.querySelector("#applistentries").children.length, + model.appList.length + ); + + done(); + })}); + }); + + QUnit.test("rendering nothing in the list", function (assert) { + var done = assert.async(); + + var model = new models.ApplicationListModel(); + var appListView = new applicationListView.ApplicationListView({ + data: function() { return { model: model }; } + }).$mount(); + + model.loading = false; + + Vue.nextTick(function() { + assert.equal( + appListView.$el.querySelector("#no-app-msg").style.display, + "" + ); + assert.equal( + appListView.$el.querySelector("#loading-spinner").style.display, + "none" + ); + assert.equal( + appListView.$el.querySelector("#applistentries").children.length, + 0 + ); + + done(); + }); + }); + + QUnit.test("search form", function (assert) { + var done = assert.async(); + + var model = new models.ApplicationListModel(); + var appListView = new applicationListView.ApplicationListView({ + data: function() { return { model: model }; } + }).$mount(); + + model.update().done(function() { Vue.nextTick(function() { + assert.notEqual(appListView.visibleList.length, 0); + + appListView.searchInput = "heho"; + + Vue.nextTick(function() { + assert.equal(appListView.visibleList.length, 0); + assert.equal( + appListView.$el.querySelector("input[name=q]").value, + "heho" + ); + + done(); + }) + })}); + }); +}); diff --git a/jstests/tests/home/test_application_view.js b/jstests/tests/home/test_application_view.js new file mode 100644 index 000000000..c10703cb3 --- /dev/null +++ b/jstests/tests/home/test_application_view.js @@ -0,0 +1,75 @@ +define([ + "home/models", + "home/views/application_view", + "components/vue/dist/vue", + "vue/filters" +], function (models, applicationView, Vue) { + "use strict"; + + QUnit.module("home.app_view"); + QUnit.test("rendering form", function (assert) { + var done = assert.async(); + + var model = new models.ApplicationListModel(); + var appView = new applicationView.ApplicationView({ + data: function() { return { model: model }; } + }).$mount(); + + model.update().done(function() { Vue.nextTick(function() { + assert.equal(appView.$el.children[0].tagName, 'DIV'); + assert.ok(appView.$el.children[0].classList.contains('row')); + + assert.equal( + appView.$el.querySelector('.box-title').innerHTML, + model.appList[0].appData.image.ui_name + ); + + // Simulate application starting + model.appList[0].status = 'STARTING'; + + assert.equal( + appView.$el.querySelector('.box-title').innerHTML, + model.appList[0].appData.image.ui_name + ); + assert.equal( + appView.$el.querySelector('#app-description').innerHTML, + model.appList[0].appData.image.description + ); + + done(); + })}); + }); + + QUnit.test("rendering iframe", function (assert) { + var done = assert.async(); + + var model = new models.ApplicationListModel(); + var appView = new applicationView.ApplicationView({ + data: function() { return { model: model }; } + }).$mount(); + + model.update().done(function() { + // Simulate application running + model.appList[0].status = 'RUNNING'; + model.appList[0].appData.container = {}; + model.appList[0].appData.container.url_id = 'https://127.0.0.1:1234/'; + + Vue.nextTick(function() { + assert.equal(appView.$el.children[0].tagName, 'IFRAME'); + + // Render form again by selecting the other application which is stopped + model.selectedIndex = 1; + + Vue.nextTick(function() { + console.log(model.appList[1].ui_name) + assert.equal( + appView.$el.querySelector('.box-title').innerHTML, + model.appList[1].appData.image.ui_name + ); + + done(); + }); + }); + }); + }); +}); diff --git a/jstests/tests/home/test_configurables.js b/jstests/tests/home/test_configurables.js index 1d011295c..aec9bcaeb 100644 --- a/jstests/tests/home/test_configurables.js +++ b/jstests/tests/home/test_configurables.js @@ -5,22 +5,21 @@ define([ QUnit.module("home.configurables"); QUnit.test("instantiation", function (assert) { - var resolution_class = configurables.from_tag("resolution"); - var resolution = new resolution_class(); - assert.equal(resolution.tag, "resolution"); - assert.equal(resolution.resolution, "Window"); - - resolution.resolution = "1024x768"; - assert.equal(resolution.as_config_dict().resolution, "1024x768"); + var resolutionConf = new configurables.resolution.model(); + + assert.equal(resolutionConf.tag, "resolution"); + assert.deepEqual(resolutionConf.configDict, { resolution: "Window" }); + assert.notEqual(resolutionConf.asConfigDict().resolution, "Window"); + + resolutionConf.configDict = { resolution: '1280x1024' }; + assert.equal(resolutionConf.asConfigDict().resolution, '1280x1024'); }); - + QUnit.test("view", function (assert) { - var resolution_class = configurables.from_tag("resolution"); - var resolution = new resolution_class(); + var propsData = { configDict: { resolution: "Window" } }; + var component = new configurables.resolution.component({propsData: propsData}).$mount(); - var view = resolution.view(); - assert.notEqual(view.find("select"), null); - assert.equal(view.find("option").length, - resolution.resolution_options.length); + assert.notEqual(component.$el.querySelector("select"), null); + assert.equal(component.$el.querySelector("select").children.length, 5); }); -}); +}); \ No newline at end of file diff --git a/jstests/tests/home/test_models.js b/jstests/tests/home/test_models.js index 78a9c71ee..fe3252dc4 100644 --- a/jstests/tests/home/test_models.js +++ b/jstests/tests/home/test_models.js @@ -1,17 +1,21 @@ define([ - "home/models" + "home/models" ], function (models) { "use strict"; - + QUnit.module("home.models"); QUnit.test("instantiation", function (assert) { var model = new models.ApplicationListModel(); - assert.equal(model.app_data.length, 0); + + assert.equal(model.appList.length, 0); + assert.equal(model.selectedIndex, null); + model.update().done(function() { - assert.equal(model.app_data.length, 2); - assert.equal(model.app_data[0].image.configurables[0], "resolution"); - assert.notEqual(model.configurables[0].resolution, null); - assert.equal(model.configurables[0].resolution.resolution, "Window"); + assert.equal(model.appList.length, 2); + assert.equal(model.selectedIndex, 0); + + assert.equal(model.appList[0].appData.image.configurables[0], "resolution"); + assert.equal(model.appList[0].configurables[0].configDict.resolution, "Window"); }); }); }); diff --git a/jstests/tests/home/test_views.js b/jstests/tests/home/test_views.js deleted file mode 100644 index 79671395f..000000000 --- a/jstests/tests/home/test_views.js +++ /dev/null @@ -1,22 +0,0 @@ -define([ - "home/models", - "home/views/application_list_view", - "jquery" -], function (models, application_list_view, $) { - "use strict"; - QUnit.module("home.views"); - QUnit.test("rendering", function (assert) { - var model = new models.ApplicationListModel(); - var view = new application_list_view.ApplicationListView(model); - model.update() - .done(function() { view.render(); } ) - .done(function() { - var applist = $("#applist"); - assert.equal(applist.children().length, 2); - }) - .done(function() { - model.app_data[0].image.ui_name = "Hello"; - view.update_entry(0); - }); - }); -}); diff --git a/jstests/tests/vue/components/test_ConfirmDialog.js b/jstests/tests/vue/components/test_ConfirmDialog.js index dccdcf8b5..1dcb0ec6f 100644 --- a/jstests/tests/vue/components/test_ConfirmDialog.js +++ b/jstests/tests/vue/components/test_ConfirmDialog.js @@ -4,11 +4,16 @@ define([ "jstests/helpers" ], function (Vue, ConfirmDialog, helpers) { "use strict"; - + QUnit.module("ConfirmDialog"); QUnit.test("rendering", function (assert) { assert.equal(helpers.getRenderedText(ConfirmDialog, { - title: "This is the title" + title: "This is the title", + closeCallback: function() {} }), "This is the title Cancel Ok"); + + assert.equal(helpers.getRenderedText(ConfirmDialog, { + title: "This is the title" + }), "This is the title Ok"); }); }); diff --git a/jstests/testsuite.js b/jstests/testsuite.js index 6fce3be0f..ab7a02729 100644 --- a/jstests/testsuite.js +++ b/jstests/testsuite.js @@ -8,7 +8,6 @@ bootstrap: '../components/bootstrap/js/bootstrap.min', moment: "../components/moment/moment", "jsapi/v1/resources": "../../../jstests/tests/home/mock_jsapi", - handlebars: "../components/handlebars/handlebars.amd.min", underscore: "../components/underscore/underscore-min" }, shim: { @@ -19,24 +18,23 @@ } }); - require([ - "init", + require([ "tests/home/test_configurables.js", "tests/home/test_models.js", - "tests/home/test_views.js", + "tests/home/test_application_list_view.js", + "tests/home/test_application_view.js", "tests/vue/components/test_DataTable.js", "tests/vue/components/test_ConfirmDialog.js", "tests/test_utils.js", "tests/test_analytics.js" - ], function(init) { + ], function() { window.apidata = { base_url: "/", prefix: "/" }; - init.handlebars(); - + QUnit.load(); QUnit.start(); - }); + }); }()); diff --git a/package.json b/package.json index d33976684..44d066c7e 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,19 @@ { - "name": "simphony-remote-deps", - "version": "0.0.0", - "description": "SimPhoNy-remote nodejs dependencies", - "author": "Enthought", - "license": "BSD", - "repository": { - "type": "git", - "url": "https://github.com/simphony-remote/simphony-remote.git" - }, - "dependencies": { - "bower": "*", - "configurable-http-proxy": "git://github.com/jupyterhub/configurable-http-proxy.git#2.0.1" - }, - "devDependencies": { - "jshint": "*", - "node-qunit-phantomjs": "*" - } + "name": "simphony-remote-deps", + "version": "1.2.0", + "description": "SimPhoNy-remote nodejs dependencies", + "author": "Enthought", + "license": "BSD", + "repository": { + "type": "git", + "url": "https://github.com/simphony-remote/simphony-remote.git" + }, + "dependencies": { + "bower": "*", + "configurable-http-proxy": "git://github.com/jupyterhub/configurable-http-proxy.git#2.0.1" + }, + "devDependencies": { + "jshint": "*", + "node-qunit-phantomjs": "*" + } } - diff --git a/remoteappmanager/static/css/remoteappmanager.css b/remoteappmanager/static/css/remoteappmanager.css index 7473fa7b0..f08aef6d6 100644 --- a/remoteappmanager/static/css/remoteappmanager.css +++ b/remoteappmanager/static/css/remoteappmanager.css @@ -9,11 +9,11 @@ body { float: none; } -#applist > li > a > div { +#applistentries > li > a > div { float: left; } -#applist img.app-icon { +#applistentries img.app-icon { position: relative; width: 32px; height: 32px; @@ -133,7 +133,7 @@ body { } .stop-button { - display: block; + display: none; position: absolute; top: 10px; left: 15px; @@ -148,77 +148,56 @@ body { color: rgba(255, 255, 255, 0.7); } -.truncate { - overflow: hidden; - text-overflow: ellipsis; +/* When the mouse is on the img or the stop-button -> display stop-button */ +li a img:hover + .stop-button { + display: block; } - -.no-padding { - padding: 0px; +li a .stop-button:hover { + display: block; } -.modal-mask { - position: fixed; - z-index: 9998; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, .5); - display: table; - transition: opacity .3s ease; +/* transition effect */ +.fade-enter-active { + transition: opacity .3s } - -.modal-wrapper { - display: table-cell; - vertical-align: middle; +.fade-leave-active { + transition: opacity 2.0s } - -.modal-container { - width: 300px; - margin: 0px auto; - padding: 20px 30px; - background-color: #fff; - border-radius: 2px; - box-shadow: 0 2px 8px rgba(0, 0, 0, .33); - transition: all .3s ease; - font-family: Helvetica, Arial, sans-serif; +.fade-enter, .fade-leave-to { + opacity: 0 } -.modal-header h3 { - margin-top: 0; - color: #42b983; +.list-enter, .list-leave-to { + opacity: 0; + transform: translateX(-50px); } - -.modal-body { - margin: 20px 0; +.list-enter-active, .list-leave-active { + transition: all 0.5s; + position: absolute; } - -.modal-default-button { - float: right; +.list-move { + transition: transform .5s; } -/* - * The following styles are auto-applied to elements with - * transition="modal" when their visibility is toggled - * by Vue.js. - * - * You can easily play with the modal transition by editing - * these styles. - */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; +} -.modal-enter { - opacity: 0; +.no-padding { + padding: 0px; } -.modal-leave-active { - opacity: 0; +/* Transition for the modal dialog */ +.modal-fade-enter-active, .modal-fade-leave-active { + transition: opacity .2s +} +.modal-fade-enter, .modal-fade-leave-to { + opacity: 0 } -.modal-enter .modal-container, -.modal-leave-active .modal-container { - -webkit-transform: scale(1.1); - transform: scale(1.1); +.modal-display { + display: block; } .required-field > label::after { diff --git a/remoteappmanager/static/js/admin/vue-components/toolkit/ConfirmDialog.js b/remoteappmanager/static/js/admin/vue-components/toolkit/ConfirmDialog.js index 5145dc177..066e48a47 100644 --- a/remoteappmanager/static/js/admin/vue-components/toolkit/ConfirmDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/toolkit/ConfirmDialog.js @@ -1,7 +1,7 @@ define([ ], function() { "use strict"; - + return { props: { title: { @@ -10,26 +10,26 @@ define([ }, closeCallback: { type: Function, - default: function() {} + default: undefined }, okCallback: { type: Function, default: function() {} } }, - template: '' + - '
' + - '
' + - '
' + - '

{{ title }}

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

{{ title }}

' + + '
' + + '
' + + ' ' + + ' ' + + '
' + '
' + '
' + '
' + - '
' + '' }; }); diff --git a/remoteappmanager/static/js/admin/vue-components/toolkit/ModalDialog.js b/remoteappmanager/static/js/admin/vue-components/toolkit/ModalDialog.js index aba20328b..d8df1d553 100644 --- a/remoteappmanager/static/js/admin/vue-components/toolkit/ModalDialog.js +++ b/remoteappmanager/static/js/admin/vue-components/toolkit/ModalDialog.js @@ -1,12 +1,12 @@ define([ ], function() { "use strict"; - + return { - template: '' + - '
' + - '
' + - '
' + + template: '' + + '
' + + '
' + + '
' + ' ' + ' ' + '
' + diff --git a/remoteappmanager/static/js/dialogs.js b/remoteappmanager/static/js/dialogs.js deleted file mode 100644 index db77ef327..000000000 --- a/remoteappmanager/static/js/dialogs.js +++ /dev/null @@ -1,48 +0,0 @@ -define([ - 'jquery' -], function ($) { - "use strict"; - - var webapi_error_dialog = function (error) { - // Shows the error dialog with a webapi error. - // The webapi error is an object with the following props: - // - status : HTTP error status - // - message: user-readable message from the server via the - // response payload. may be undefined. - - var msg = error.status_text; - if (!msg) { - msg = "Unknown error"; - } - var dialog = $("#error-dialog"); - dialog.find(".error-msg").text(error.status + " - "+msg); - dialog.modal(); - }; - - var config_dialog = function(dialog_element, title, body, ok_callback, close_callback) { - var modal = $(dialog_element); - - // Remove possible already existing handlers - modal.find('.modal-footer .primary').off("click"); - modal.find('.modal-close').off("click"); - - if (title !== null) { - modal.find('.modal-title').text(title); - } - if (body !== null) { - modal.find('.modal-body').text(body); - } - if (ok_callback !== null) { - modal.find('.modal-footer .primary').click(ok_callback); - } - if (close_callback !== null) { - modal.find('.modal-close').click(close_callback); - } - }; - - return { - webapi_error_dialog : webapi_error_dialog, - config_dialog : config_dialog - }; - -}); diff --git a/remoteappmanager/static/js/gamodule.js b/remoteappmanager/static/js/gamodule.js index 0795f53b9..09be666ed 100644 --- a/remoteappmanager/static/js/gamodule.js +++ b/remoteappmanager/static/js/gamodule.js @@ -1,26 +1,35 @@ // This module contains the setup for google analytics. -// MUST not be renamed to analytics. Some blockers rely on name +// MUST not be renamed to analytics. Some blockers rely on name // matching to prevent loading. -define([ -], function () { +define([], function () { "use strict"; function init() { - var module; - if (window.apidata.analytics !== undefined) { window.ga('create', window.apidata.analytics.tracking_id, 'auto'); } else { - window.ga = function () { - }; + window.ga = function() {}; } - module = function () { + + return function() { window.ga.apply(this, arguments); }; - return module; - } + } + + var GaObserver = function() { + this.ga = init(); + }; + + GaObserver.prototype.triggerApplicationStarting = function(name) { + this.ga("send", "event", { + eventCategory: "Application", + eventAction: "start", + eventLabel: name + }); + }; return { - init: init + init: init, // For testing purpose + GaObserver: GaObserver }; }); diff --git a/remoteappmanager/static/js/home/configurables.js b/remoteappmanager/static/js/home/configurables.js index 514df06da..4f4e8902e 100644 --- a/remoteappmanager/static/js/home/configurables.js +++ b/remoteappmanager/static/js/home/configurables.js @@ -1,85 +1,61 @@ define([ - "jquery", - "handlebars", - "utils" -], function($, hb, utils) { + "utils", + "components/vue/dist/vue" +], function(utils, Vue) { "use strict"; - var view_template = hb.compile( - '
' + - '' + - '' + + ' ' + + ' ' + + '
', + + 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 } - - return { - "resolution": resolution - }; - }; - - // Define all your configurables here. - var configurables = { - ResolutionModel: ResolutionModel + }); + + // Your configurable class must implement a tag and default configDict + var ResolutionModel = function() { + this.tag = resolutionTag; + this.configDict = { resolution: 'Window' }; }; - - var from_tag = function (tag) { - // Given a tag, lookup the appropriate configurable and - // return it. If the tag matches no configurable, returns null - for (var conf in configurables) { - if (configurables[conf].prototype.tag === tag) { - return configurables[conf]; - } + + ResolutionModel.prototype.asConfigDict = function() { + var resolution = this.configDict.resolution; + + if (resolution === 'Window') { + var maxSize = utils.maxIframeSize(); + resolution = maxSize[0] + 'x' + maxSize[1]; } - return null; + + return { resolution: resolution }; }; - var ns = { - from_tag: from_tag + var outputConfigurables = {}; + + // Export all your configurable models here + outputConfigurables[resolutionTag] = { + model: ResolutionModel, + component: resolutionComponent }; - return $.extend(ns, configurables); - + return outputConfigurables; }); diff --git a/remoteappmanager/static/js/home/controller.js b/remoteappmanager/static/js/home/controller.js index 1c68bdbe4..eef36c39b 100644 --- a/remoteappmanager/static/js/home/controller.js +++ b/remoteappmanager/static/js/home/controller.js @@ -1,136 +1,42 @@ /*globals: require, console*/ require([ - "jquery", - "urlutils", - "dialogs", - "gamodule", - "home/models", + "home/models", "home/views/application_list_view", "home/views/application_view", - "jsapi/v1/resources", - "handlebars", - "init" + "components/vue/dist/vue", + "gamodule", + "vue/filters" ], function( - $, - urlutils, - dialogs, - gamodule, - models, - application_list_view, - application_view, - resources, - hb, - init) { + models, + applicationListView, + applicationView, + Vue, + gamodule) { "use strict"; - var ga = gamodule.init(); - init.handlebars(); - // This model keeps the retrieved content from the REST query locally. // It is only synchronized at initial load. var model = new models.ApplicationListModel(); - var app_list_view = new application_list_view.ApplicationListView(model); - var app_view = new application_view.ApplicationView(model); - - app_list_view.entry_clicked = function (index) { - model.selected_index = index; - app_list_view.update_selected(); - app_view.render(false, 200); - }; - - app_list_view.stop_button_clicked = function(index) { - if (model.status[index] === models.Status.STOPPING) { - return; - } - model.status[index] = models.Status.STOPPING; - - var app_info = model.app_data[index]; - var url_id = app_info.container.url_id; - - app_list_view.update_entry(index); - - resources.Container.delete(url_id) - .done(function () { - model.update_idx(index) - .done(function() { - app_list_view.update_entry(index); - app_view.render(true); - }) - .fail(function(error) { - model.status[index] = models.Status.STOPPED; - app_list_view.update_entry(index); - app_view.render(true); - dialogs.webapi_error_dialog(error); - }); - }) - .fail( - function (error) { - model.status[index] = models.Status.STOPPED; - app_list_view.update_entry(index); - app_view.render(true); - dialogs.webapi_error_dialog(error); - }); - }; - app_view.start_button_clicked = function (index) { - // The container is not running. This is a start button. - var mapping_id = model.app_data[index].mapping_id; - var image_name = model.app_data[index].image.name; - - if (model.status[index] === models.Status.STARTING) { - return; - } - - model.status[index] = models.Status.STARTING; - app_view.render(false, null); - app_list_view.update_entry(index); - - var configurables_data = {}; - var configurables = model.configurables[index]; - configurables_data = {}; + // Initialize views + var appListView = new applicationListView.ApplicationListView({ + el: '#applist', + data: function() { return { model: model }; } + }); - Object.getOwnPropertyNames(configurables).forEach( - function(val, idx, array) { // jshint ignore:line - var configurable = configurables[val]; - var tag = configurable.tag; - configurables_data[tag] = configurable.as_config_dict(); - } - ); - - resources.Container.create({ - mapping_id: mapping_id, - configurables: configurables_data - }).done(function() { - ga("send", "event", { - eventCategory: "Application", - eventAction: "start", - eventLabel: image_name - }); + var appView = new applicationView.ApplicationView({ + el: '#appview', + data: function() { return { model: model }; } + }); - model.update_idx(index) - .always(function() { - app_list_view.update_entry(index); - app_list_view.update_selected(); - app_view.render(true, 200); - }) - .fail(function(error) { - model.status[index] = models.Status.STOPPED; - app_list_view.update_entry(index); - app_view.render(true, 200); - dialogs.webapi_error_dialog(error); - }); - }).fail(function(error) { - model.status[index] = models.Status.STOPPED; - app_list_view.update_entry(index); - app_list_view.update_selected(); - app_view.render(true, 200); - dialogs.webapi_error_dialog(error); - }); - }; + // Create GA observer + var gaObserver = new gamodule.GaObserver(); - $.when(model.update()).done(function () { - app_list_view.render(); - app_view.render(false, 200); + appView.$on('startApplication', function(application) { + gaObserver.triggerApplicationStarting(application.appData.image.name); }); + appListView.$on('entryClicked', function() { appView.focusIframe(); }); + + model.update(); }); diff --git a/remoteappmanager/static/js/home/models.js b/remoteappmanager/static/js/home/models.js index cd363b2ff..03203c653 100644 --- a/remoteappmanager/static/js/home/models.js +++ b/remoteappmanager/static/js/home/models.js @@ -1,9 +1,8 @@ define([ - 'jquery', - 'home/configurables', - 'utils', - 'jsapi/v1/resources' -], function ($, configurables, utils, resources) { + "jquery", + "home/configurables", + "jsapi/v1/resources" +], function ($, configurables, resources) { "use strict"; var Status = { @@ -12,16 +11,16 @@ define([ STOPPING: "STOPPING", STOPPED: "STOPPED" }; - - var available_applications_info = function () { + + var availableApplicationsInfo = function () { // Retrieve information from the various applications and // connect the cascading callbacks. - // Returns a single promise. When resolved, the attached + // 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. - + var promise = $.Deferred(); resources.Application.items() @@ -31,6 +30,7 @@ define([ result.push(items[key]); }); promise.resolve(result); + }) .fail(function() { promise.resolve([]); @@ -41,95 +41,167 @@ define([ var ApplicationListModel = function() { // (constructor) Model for the application list. - - // Contains the data retrieved from the remote API - this.app_data = []; - - // Contains the submodels for the configurables. - // The values are aligned to the app_data index, and contain - // a dictionary that maps a supported (by the image) configurable tag - // to its client-side model. - this.configurables = []; - + this.appList = []; + // Selection index for when we click on one entry. - // Should be the index of the selected app_data, - // or null if no selection. - this.selected_index = null; - - // indexes currently starting - this.status = []; + // 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; }; ApplicationListModel.prototype.update = function() { // Requests an update of the object internal data. - // This method returns a jQuery Promise object. + // 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 - var self = this; - return $.when( - available_applications_info() - ).done(function (app_data) { - self.app_data = app_data; - self.configurables = []; - + 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; + }); + // Add the options for some image types - for (var data_idx = 0; data_idx < self.app_data.length; ++data_idx) { - self._update_configurables(data_idx); - self._update_status(data_idx); - } - }); + 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); + + app.delayed = !app.isRunning(); + appList.push(app); + }.bind(this)); + + this.appList = appList; + + if(appList.length) {this.selectedIndex = 0;} + + this.loading = false; + }.bind(this)); }; - ApplicationListModel.prototype.update_idx = function(index) { + ApplicationListModel.prototype.updateIdx = function(index) { // Refetches and updates the entry at the given index. - var self = this; - - var entry = this.app_data[index]; - var mapping_id = entry.mapping_id; + var app = this.appList[index]; + var mapping_id = app.appData.mapping_id; + return resources.Application.retrieve(mapping_id) - .done(function(new_data) { - self.app_data[index] = new_data; - self._update_configurables(index); - self._update_status(index); - }); - }; + .done(function(newData) { + app.appData = newData; - ApplicationListModel.prototype._update_configurables = function(index) { - // Updates the configurables submodel for a given application index. - var self = this; - var image = self.app_data[index].image; - self.configurables[index] = {}; + this._updateStatus(app); + }.bind(this)); + }; - for (var cfg_idx = 0; cfg_idx < image.configurables.length; ++cfg_idx) { - var tag = image.configurables[cfg_idx]; + 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 + // 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.from_tag(tag); + var ConfigurableCls = configurables[tag].model; - if (ConfigurableCls !== null) { - self.configurables[index][tag] = new ConfigurableCls(); + if (ConfigurableCls !== undefined) { + app.configurables.push(new ConfigurableCls()); } - } + }); }; - - ApplicationListModel.prototype._update_status = function(index) { - var self = this; - var app_data = self.app_data[index]; - - if (app_data.container === undefined) { - self.status[index] = Status.STOPPED; + + ApplicationListModel.prototype._updateStatus = function(app) { + if (app.appData.container === undefined) { + app.status = Status.STOPPED; } else { - self.status[index] = Status.RUNNING; + app.status = Status.RUNNING; } }; - + + 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) { + currentApp.status = Status.STOPPED; + startPromise.reject(error); + }); + }.bind(this)) + .fail(function(error) { + currentApp.status = Status.STOPPED; + startPromise.reject(error); + }); + + return startPromise; + }; + + ApplicationListModel.prototype.stopApplication = function(index) { + var appStopping = this.appList[index]; + appStopping.status = Status.STOPPING; + + var url_id = appStopping.appData.container.url_id; + + var stopPromise = $.Deferred(); + + resources.Container.delete(url_id) + .done(function() { + this.updateIdx(index) + .done(stopPromise.resolve) + .fail(function(error) { + appStopping.status = Status.STOPPED; + stopPromise.reject(error); + }); + }.bind(this)) + .fail(function(error) { + appStopping.status = Status.STOPPED; + stopPromise.reject(error); + }); + + return stopPromise; + }; + return { - ApplicationListModel: ApplicationListModel, - Status: Status + ApplicationListModel: ApplicationListModel }; }); diff --git a/remoteappmanager/static/js/home/views/application_list_view.js b/remoteappmanager/static/js/home/views/application_list_view.js index fe2845d43..c76611aa8 100644 --- a/remoteappmanager/static/js/home/views/application_list_view.js +++ b/remoteappmanager/static/js/home/views/application_list_view.js @@ -1,128 +1,108 @@ define([ - "jquery", - "urlutils", - "handlebars", - "underscore" -], function ($, urlutils, hb) { - "use strict"; - var templates = { - app_entries: hb.compile( - '
  • ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' {{image_name app_data}}' + - ' ' + - '
    • ') - }; + "../../components/vue/dist/vue", + "admin/vue-components/toolkit/toolkit" +], function (Vue) { + 'use strict'; - var ApplicationListView = function(model) { - // (Constructor) Represents the application list. In charge of - // rendering in on the div with id #applist - // - // Parameters - // model : ApplicationListModel - // The data model. - var self = this; - self.model = model; + var ApplicationListView = Vue.extend({ + template: + '
    ' + + ' ' + + ' ' + + '
    ' + + ' Code: {{stoppingError.code}}' + + ' {{stoppingError.message}}' + + '
    ' + + '     ' + - $("#applist").html( - '
  • Loading
    • ' - ); - }; + '' + + '
    ' + + ' ' + + '
    ' + - ApplicationListView.prototype.entry_clicked = function(index) { // jshint ignore:line - // handler when entry has been clicked. Override in controller. - }; - - ApplicationListView.prototype.stop_button_clicked = function(index) { // jshint ignore:line - // handler when stop has been clicked. Override in controller. - }; - - ApplicationListView.prototype.render = function () { - // Renders the full application list and adds it to the DOM. - var self = this; - var num_entries = this.model.app_data.length; - var row; - var applist = $("#applist"); - applist.empty(); - if (num_entries === 0) { - row = $('
  • No applications found
    • '); - applist.append(row); - } else { - for (var i = 0; i < num_entries; i++) { - row = self._render_applist_entry(i); - applist.append(row.hide().fadeIn(500)); - } - } - self.update_selected(); - }; + '' + + '
      ' + + '
    • APPLICATIONS
      • ' + + '
    ' + - ApplicationListView.prototype.update_entry = function (index) { - // Re-renders the entry for a given index, replacing the - // current entry. - var self = this; - var row = this._render_applist_entry(index); - $("#applist") - .find("li[data-index='"+index+"']") - .replaceWith(row); - - if (self.model.selected_index === index) { - self.update_selected(); - } - }; + '
      ' + + '
    • ' + + ' No applications found' + + '
      • ' + - ApplicationListView.prototype.update_selected = function() { - // Updates the list against the current selected entry. - var self = this; - var applist = $("#applist"); - var selected_index = self.model.selected_index; - applist.find("li").removeClass("active"); - if (selected_index !== null) { - applist.find("li[data-index='"+selected_index+"']") - .addClass("active"); - } - }; + ' ' + + '
    • ' + + ' ' + + ' ' + + ' Loading' + + ' ' + + '
      • ' + + '
    ' + + + ' ' + + '' + + '
  • ' + + + ' ' + + + ' ' + + ' ' + + + ' ' + + ' {{ app.appData.image | appName }}' + + ' ' + + '
    • ' + + '    ' + + '' + + '
    ' + + '', - ApplicationListView.prototype._render_applist_entry = function (index) { - // Returns a jquery HTML snippet for a single application entry - // The returned entity has event handlers already installed. - // index: - // a progressive index for the entry. - var self = this; - var app_data = self.model.app_data[index]; - var app_status = self.model.status[index]; + data: function() { + return { + 'searchInput': '', + stoppingError: { show: false, appName: '', code: '', message: '' } + }; + }, - var row = templates.app_entries({ - index: index, - app_data: app_data, - app_status: app_status.toLowerCase() - }); - - var jq_row = $(row); - jq_row.click(function() { - self.entry_clicked($(this).attr("data-index")); - }); - jq_row.find(".app-icon").hover(function() { - var app_data = self.model.app_data[index]; - if (app_data.container !== null) { - jq_row.find(".stop-button").show(); + computed: { + visibleList: function() { + return this.model.appList.filter(function(app) { + var appName = this.$options.filters.appName(app.appData.image).toLowerCase(); + return appName.indexOf(this.searchInput.toLowerCase()) !== -1; + }.bind(this)); } - }, null); - - jq_row.find(".stop-button") - .hide() - .click(function(event) { - event.stopPropagation(); - self.stop_button_clicked($(this).attr("data-index")); - }) - .hover(null, function() { - jq_row.find(".stop-button").hide(); - }); - return jq_row; - }; - + }, + + methods: { + stopApplication: function(index) { + var stoppingAppName = this.$options.filters.appName( + this.model.appList[index].appData.image); + this.model.stopApplication(index).fail(function(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; + }, + indexOf: function(app) { + return this.model.appList.indexOf(app); + } + } + }); + return { ApplicationListView : ApplicationListView }; diff --git a/remoteappmanager/static/js/home/views/application_view.js b/remoteappmanager/static/js/home/views/application_view.js index 5ce6a0f9e..8932c06b6 100644 --- a/remoteappmanager/static/js/home/views/application_view.js +++ b/remoteappmanager/static/js/home/views/application_view.js @@ -1,172 +1,151 @@ define([ - "jquery", "urlutils", - "handlebars", "utils", - "underscore", - "home/models" -], function ($, urlutils, hb, utils, _, models) { + "../../components/vue/dist/vue", + "admin/vue-components/toolkit/toolkit" +], function (urlUtils, utils, Vue) { "use strict"; - var templates = { - app_start_panel: hb.compile( - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '

    {{image_name app_data}}

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

    Policy

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

    Configuration

    ' + - '
    ' + - '
    ' + - '
    ' + - ' ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' - ) - }; - var ApplicationView = function(model) { - // (Constructor) Represents the main view where the application will be - // - // Parameters - // model : ApplicationListModel - // The data model. - var self = this; - self.model = model; - self.visualised_index = null; - self.base_url = window.apidata.base_url; - }; + var ApplicationView = Vue.extend({ + template: + '' + + '
    ' + + ' ' + + ' ' + + '
    ' + + ' Code: {{startingError.code}}' + + ' {{startingError.message}}' + + '
    ' + + '     ' + - ApplicationView.prototype.start_button_clicked = function(index) {}; // jshint ignore:line - - ApplicationView.prototype.render = function (delayed, fade_in) { - // Renders the ApplicationView. - // delayed: - // When true, if the application is running it will redirect to - // the waiting spinner, rather than the application itself. - // Temporary measure. Will go away. - var self = this; - if (self.visualised_index === self.model.selected_index && - self.visualised_status === self.model.status[self.model.selected_index]) { - $("iframe").focus(); - return; - } - var html = self._render_for_model_state(delayed); - self.visualised_index = self.model.selected_index; - self.visualised_status = self.model.status[self.visualised_index]; - if (fade_in) { - $(".content").html(html.hide().fadeIn(fade_in)); - } else { - $(".content").html(html); - } - $("iframe").focus(); - }; - - ApplicationView.prototype._render_for_model_state = function(delayed) { - // Decides what to render according to the current model state - var self = this; - var index = self.model.selected_index; - - if (index === null) { - // render nothing. - return $("
    "); - } - - var app_status = self.model.status[index]; - var html; - - if (app_status === models.Status.STARTING || app_status === models.Status.STOPPED) { - $("section.content").removeClass("no-padding"); - html = self._render_form(index); - } else { - $("section.content").addClass("no-padding"); - html = self._render_app(index, delayed); - } - return html; - }; - - ApplicationView.prototype._render_form = function(index) { - // Renders the configuration form - var self = this; - var app_data = self.model.app_data[index]; - var app_status = self.model.status[index]; - - var configurables = self.model.configurables[index]; - var properties = Object.getOwnPropertyNames(configurables); - - var disabled = (app_status === models.Status.STARTING); - - var base = $(templates.app_start_panel({ - app_data: app_data, - index: index, - disabled: disabled - })); - - base.find(".start-button").click(function() { - self.start_button_clicked($(this).attr("data-index")); - }); - - - var policy = app_data.image.policy; - var policy_ul = base.find(".policy"); - - if (policy.allow_home) { - policy_ul.append($("
  • Workspace accessible
    • ")); - } else { - policy_ul.append($("
  • Workspace not accessible
    • ")); - } - - if (policy.volume_source && policy.volume_target && policy.volume_mode) { - policy_ul.append($( - "
  • Volume mounted: " + policy.volume_source + - " → " + policy.volume_target + - " (" + policy.volume_mode + ")
    • ")); - } else { - policy_ul.append($("
  • No volumes mounted
    • ")); - } - - var fieldset = base.find("fieldset"); - - if (properties.length === 0) { - fieldset.html("No configurable options for this image"); - } else { - properties.forEach( - function(val) { // jshint ignore:line - var widget = configurables[val].view(index); - fieldset.append(widget); + ' ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '

    {{ 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 { + 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() { + var url = urlUtils.pathJoin( + window.apidata.base_url, + 'containers', + this.currentApp.appData.container.url_id + ); + var output = this.currentApp.delayed ? url : url + '/'; + + this.currentApp.delayed = false; + + return output; + } + }, + + methods: { + startApplication: function() { + var startingApp = this.currentApp; + var startingAppName = this.$options.filters.appName(startingApp.appData.image); + this.model.startApplication() + .done(function() { + this.$emit('startApplication', startingApp); + }.bind(this)) + .fail(function(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; + }, + getIframeSize: function() { + return utils.maxIframeSize(); + }, + focusIframe: function() { + var iframe = this.$el.querySelector('iframe'); + if(iframe !== null) { + iframe.focus(); } - ); - } + } + }, - return base; - }; - - ApplicationView.prototype._render_app = function(index, delayed) { - // Renders the iframe with the application. - var self = this; - var app_data = self.model.app_data[index]; - var location = urlutils.path_join(self.base_url, - "containers", - app_data.container.url_id - ); - - if (!delayed) { - location = location+"/"; - } - - var iframe_size = utils.max_iframe_size(); - var iframe = $(''); - return iframe; - }; + updated: function() { this.focusIframe(); } + }); return { ApplicationView : ApplicationView diff --git a/remoteappmanager/static/js/init.js b/remoteappmanager/static/js/init.js deleted file mode 100644 index 8bae1b632..000000000 --- a/remoteappmanager/static/js/init.js +++ /dev/null @@ -1,21 +0,0 @@ -define([ - "handlebars", - "urlutils" -], function(hb, urlutils) { - "use strict"; - - return { - handlebars : function() { - hb.registerHelper('icon_src', function(app_data) { - var icon_data = app_data.image.icon_128; - return (icon_data ? "data:image/png;base64,"+icon_data : - urlutils.path_join(this.base_url, "static", "images", "generic_appicon_128.png")); - } - ); - hb.registerHelper('image_name', function(app_data) { - return (app_data.image.ui_name ? app_data.image.ui_name : app_data.image.name); - }); - - } - }; -}); diff --git a/remoteappmanager/static/js/urlutils.js b/remoteappmanager/static/js/urlutils.js index 9a64c7c2f..1295483f4 100644 --- a/remoteappmanager/static/js/urlutils.js +++ b/remoteappmanager/static/js/urlutils.js @@ -8,7 +8,7 @@ define(function () { "use strict"; - var path_join = function () { + var pathJoin = function () { // join a sequence of url components with '/' var url = '', i = 0; @@ -25,7 +25,7 @@ define(function () { url = url.replace(/\/\/+/, '/'); return url; }; - + var 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") @@ -39,17 +39,17 @@ define(function () { a.href = url; return a; }; - - var encode_uri_components = function (uri) { + + var encodeUriComponents = function (uri) { // encode just the components of a multi-segment uri, // leaving '/' separators return uri.split('/').map(encodeURIComponent).join('/'); }; - + return { - path_join : path_join, - encode_uri_components : encode_uri_components, - parse : parse + pathJoin: pathJoin, + encodeUriComponents: encodeUriComponents, + parse: parse }; - -}); + +}); diff --git a/remoteappmanager/static/js/utils.js b/remoteappmanager/static/js/utils.js index 45730f8d8..697337fbe 100644 --- a/remoteappmanager/static/js/utils.js +++ b/remoteappmanager/static/js/utils.js @@ -9,7 +9,7 @@ define([ 'jquery' ], function ($) { "use strict"; - + var 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 @@ -18,7 +18,7 @@ define([ 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, + // 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 @@ -28,7 +28,7 @@ define([ } }); }; - + var update = function (d1, d2) { // Transfers the keys from d2 to d1. Returns d1 $.map(d2, function (i, key) { @@ -36,19 +36,17 @@ define([ }); return d1; }; - - var max_iframe_size = function () { - // Returns the current iframe viewport size - var body = $("body"); - var height = body.height() - $(".header").outerHeight(); - var width = body.width() - $(".main-sidebar").outerWidth(); - return [width, height]; + + var maxIframeSize = function () { + // Returns the current iframe viewport size + var box = document.querySelector(".content-wrapper").getBoundingClientRect(); + return [box.width, box.height]; }; return { all : all, update : update, - max_iframe_size: max_iframe_size + maxIframeSize: maxIframeSize }; - -}); + +}); diff --git a/remoteappmanager/static/js/vue/filters.js b/remoteappmanager/static/js/vue/filters.js new file mode 100644 index 000000000..682127069 --- /dev/null +++ b/remoteappmanager/static/js/vue/filters.js @@ -0,0 +1,22 @@ +define([ + "components/vue/dist/vue", + "urlutils" +], function (Vue, urlUtils) { + 'use strict'; + + 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' + ) + ); + }); + + Vue.filter('appName', function(image) { + return image.ui_name? image.ui_name: image.name; + }); + + return null; +}); diff --git a/remoteappmanager/templates/home.html b/remoteappmanager/templates/home.html index 7d2ab6a34..0f165419e 100644 --- a/remoteappmanager/templates/home.html +++ b/remoteappmanager/templates/home.html @@ -1,34 +1,11 @@ {% extends "page.html" %} {% block sidebar %} - -
    - - -
    -
    - - - - -
    -
    - - - -
      -
    • APPLICATIONS
      • -
    - - - -
    - +
    {% endblock %} {% block main %} +
    {% endblock %} {% block script_init %} diff --git a/remoteappmanager/templates/page.html b/remoteappmanager/templates/page.html index 34a84f48e..3741e3486 100644 --- a/remoteappmanager/templates/page.html +++ b/remoteappmanager/templates/page.html @@ -166,11 +166,9 @@
    -
    - {% block main %} - {% endblock %} - -
    + {% block main %} + {% endblock %} +
    diff --git a/selenium_tests/selenium_test_base.py b/selenium_tests/selenium_test_base.py index 8cf321996..414de08d9 100644 --- a/selenium_tests/selenium_test_base.py +++ b/selenium_tests/selenium_test_base.py @@ -135,9 +135,10 @@ def running_container(self): driver = self.driver self.wait_for(lambda: driver.find_element_by_css_selector( - "#applist > li > a").text != "Loading") + "#loading-spinner").value_of_css_property( + 'display') == "none") - self.click_by_css_selector("#applist > li > a") + self.click_by_css_selector("#applistentries > li > a > img") self.click_by_css_selector(".start-button") try: @@ -145,6 +146,7 @@ def running_container(self): finally: driver.find_element_by_id("application") ActionChains(driver).move_to_element( - driver.find_element_by_css_selector("#applist .app-icon") + driver.find_element_by_css_selector( + "#applistentries .app-icon") ).click(driver.find_element_by_css_selector(".stop-button") ).perform() diff --git a/selenium_tests/test_hide_application.py b/selenium_tests/test_hide_application.py new file mode 100644 index 000000000..0a77f2def --- /dev/null +++ b/selenium_tests/test_hide_application.py @@ -0,0 +1,22 @@ +# -*- coding: utf-8 -*- +from selenium_tests.selenium_test_base import SeleniumTestBase +from selenium.webdriver.common.by import By + + +class TestHideApplication(SeleniumTestBase): + def test_hide_application(self): + driver = self.driver + with self.login(): + self.wait_for(lambda: + driver.find_element_by_css_selector( + "#loading-spinner").value_of_css_property( + 'display') == "none") + + # Click on the search box + search_box = driver.find_element_by_name("q") + search_box.clear() + search_box.send_keys('foobarheho') + + self.wait_for(lambda: + not self.is_element_present( + By.CSS_SELECTOR, '#applistentries > li')) diff --git a/selenium_tests/test_login_logout.py b/selenium_tests/test_login_logout.py index 7acf49104..82ec299bc 100644 --- a/selenium_tests/test_login_logout.py +++ b/selenium_tests/test_login_logout.py @@ -12,7 +12,7 @@ def test_login_logout(self): driver.find_element_by_id("password_input").clear() driver.find_element_by_id("password_input").send_keys("test") driver.find_element_by_id("login_submit").click() - driver.find_element_by_id("applist") + driver.find_element_by_id("applistentries") driver.find_element_by_css_selector(".dropdown-toggle").click() driver.find_element_by_id("logout").click() self.wait_for( diff --git a/selenium_tests/test_start_stop_container.py b/selenium_tests/test_start_stop_container.py index 40482d792..ac311404a 100644 --- a/selenium_tests/test_start_stop_container.py +++ b/selenium_tests/test_start_stop_container.py @@ -8,15 +8,17 @@ def test_start_stop_container(self): driver = self.driver with self.login(): self.wait_for(lambda: - driver.find_element_by_css_selector( - "#applist > li > a").text != "Loading") + driver.find_element_by_css_selector( + "#loading-spinner").value_of_css_property( + 'display') == "none") - self.click_by_css_selector("#applist > li > a") + self.click_by_css_selector("#applistentries > li > a > img") self.click_by_css_selector(".start-button") driver.find_element_by_id("application") ActionChains(driver).move_to_element( - driver.find_element_by_css_selector("#applist .app-icon") + driver.find_element_by_css_selector( + "#applistentries .app-icon") ).click(driver.find_element_by_css_selector(".stop-button") ).perform() @@ -32,6 +34,6 @@ def test_focus(self): self.assertNotEqual(iframe, self.driver.switch_to.active_element) - self.click_by_css_selector("#applist > li > a") + self.click_by_css_selector("#applistentries > li > a > img") self.assertEqual(iframe, self.driver.switch_to.active_element)