Change error dialogs

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");
     });
 });

remoteappmanager/static/css/remoteappmanager.css

@@ -188,68 +188,16 @@ li a .stop-button:hover {
     padding: 0px;
 }
 
-.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 for the modal dialog */
+.modal-fade-enter-active, .modal-fade-leave-active {
+  transition: opacity .2s
 }
-
-.modal-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.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;
-}
-
-.modal-header h3 {
-  margin-top: 0;
-  color: #42b983;
-}
-
-.modal-body {
-  margin: 20px 0;
-}
-
-.modal-default-button {
-  float: right;
-}
-
-/*
- * 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.
- */
-
-.modal-enter {
-  opacity: 0;
-}
-
-.modal-leave-active {
-  opacity: 0;
+.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 {

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: '<transition name="modal">' +
-    '  <div class="modal-mask">' +
-    '    <div class="modal-wrapper">' +
-    '      <div class="modal-container">' +
-    '        <div class="modal-header"><slot name="header"><h4>{{ title }}</h4></slot></div>' +
-    '        <div class="modal-body"><slot></slot></div>' +
-    '        <div class="modal-footer text-right">' +
-    '          <button type="button" class="btn btn-default" @click="closeCallback">Cancel</button>' +
-    '          <button class="btn btn-primary primary" @click="okCallback">Ok</button>' +
+    template: '<transition name="modal-fade">' +
+    '    <div class="modal modal-display">' +
+    '      <div class="modal-dialog">' +
+    '        <div class="modal-content">' +
+    '          <div class="modal-header"><slot name="header"><h4>{{ title }}</h4></slot></div>' +
+    '          <div class="modal-body"><slot></slot></div>' +
+    '          <div class="modal-footer text-right">' +
+    '            <button v-if="closeCallback !== undefined" type="button" class="btn btn-default" @click="closeCallback">Cancel</button>' +
+    '            <button class="btn btn-primary primary" @click="okCallback">Ok</button>' +
+    '          </div>' +
     '        </div>' +
     '      </div>' +
     '    </div>' +
-    '  </div>' +
     '</transition>'
   };
 });

remoteappmanager/static/js/home/models.js

@@ -1,9 +1,8 @@
 define([
     "jquery",
     "home/configurables",
-    "jsapi/v1/resources",
-    "dialogs"
-], function ($, configurables, resources, dialogs) {
+    "jsapi/v1/resources"
+], function ($, configurables, resources) {
     "use strict";
 
     var Status = {
@@ -154,19 +153,26 @@ define([
             configurablesData[tag] = configurable.asConfigDict();
         });
 
+        var startPromise = $.Deferred();
+
         resources.Container.create({
             mapping_id: currentApp.appData.mapping_id,
             configurables: configurablesData
-        }).done(function() {
+        })
+        .done(function() {
             this.updateIdx(selectedIndex)
+            .done(startPromise.resolve)
             .fail(function(error) {
                 currentApp.status = Status.STOPPED;
-                dialogs.webapi_error_dialog(error);
+                startPromise.reject(error);
             });
-        }.bind(this)).fail(function(error) {
+        }.bind(this))
+        .fail(function(error) {
             currentApp.status = Status.STOPPED;
-            dialogs.webapi_error_dialog(error);
+            startPromise.reject(error);
         });
+
+        return startPromise;
     };
 
     ApplicationListModel.prototype.stopApplication = function(index) {
@@ -175,18 +181,23 @@ define([
 
         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;
-                dialogs.webapi_error_dialog(error);
+                stopPromise.reject(error);
             });
         }.bind(this))
         .fail(function(error) {
             appStopping.status = Status.STOPPED;
-            dialogs.webapi_error_dialog(error);
+            stopPromise.reject(error);
         });
+
+        return stopPromise;
     };
 
     return {

remoteappmanager/static/js/home/views/application_list_view.js

@@ -1,11 +1,22 @@
 define([
-    '../../components/vue/dist/vue',
+    "../../components/vue/dist/vue",
+    "admin/vue-components/toolkit/toolkit"
 ], function (Vue) {
     'use strict';
 
     var ApplicationListView = Vue.extend({
         template:
-            '<section class="sidebar">' +
+              '<section class="sidebar">' +
+              '  <!-- Error dialog -->' +
+              '  <confirm-dialog v-if="stoppingError.show"' +
+              '                  :title="\'Error when stopping \' + stoppingError.appName"' +
+              '                  :okCallback="closeDialog">' +
+              '    <div class="alert alert-danger">' +
+              '      <strong>Code: {{stoppingError.code}}</strong>' +
+              '      <span>{{stoppingError.message}}</span>' +
+              '    </div>' +
+              '  </confirm-dialog>' +
+
               '<!-- Search form -->' +
               '<form action="#" class="sidebar-form">' +
               '  <input type="text" name="q" class="form-control" placeholder="Search..." v-model="searchInput">' +
@@ -44,7 +55,7 @@ define([
 
               '      <button class="stop-button"' +
               '              v-if="app.isRunning()"' +
-              '              @click="model.stopApplication(indexOf(app))"' +
+              '              @click="stopApplication(indexOf(app))"' +
               '              :disabled="app.isStopping()">' +
               '        <i class="fa fa-times"></i>' +
               '      </button>' +
@@ -57,7 +68,10 @@ define([
             '<!-- /.sidebar -->',
 
         data: function() {
-            return { 'searchInput': '' };
+            return {
+                'searchInput': '',
+                stoppingError: { show: false, appName: '', code: '', message: '' }
+            };
         },
 
         computed: {
@@ -70,6 +84,19 @@ define([
         },
 
         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);
             }

remoteappmanager/static/js/home/views/application_view.js

@@ -1,7 +1,8 @@
 define([
     "urlutils",
     "utils",
-    '../../components/vue/dist/vue'
+    "../../components/vue/dist/vue",
+    "admin/vue-components/toolkit/toolkit"
 ], function (urlUtils, utils, Vue) {
     "use strict";
 
@@ -11,6 +12,16 @@ define([
             '<section id="appview"' +
             '         v-if="currentApp !== null"' +
             '         :class="{ content: true, \'no-padding\': currentApp.isRunning() }">' +
+            '  <!-- Error dialog -->' +
+            '  <confirm-dialog v-if="startingError.show"' +
+            '                  :title="\'Error when starting \' + startingError.appName"' +
+            '                  :okCallback="closeDialog">' +
+            '    <div class="alert alert-danger">' +
+            '      <strong>Code: {{startingError.code}}</strong>' +
+            '      <span>{{startingError.message}}</span>' +
+            '    </div>' +
+            '  </confirm-dialog>' +
+
             '  <!-- Start Form -->' +
             '  <transition name="fade" v-if="!currentApp.isRunning()">' +
             '  <div v-if="currentApp.isStopped()" class="row">' +
@@ -78,6 +89,12 @@ define([
             '  </iframe>' +
             '</section>',
 
+        data: function() {
+            return {
+                startingError: { show: false, appName: '', code: '', message: '' }
+            };
+        },
+
         computed: {
             currentApp: function() {
                 return this.model.appList[this.model.selectedIndex] || null;
@@ -101,8 +118,21 @@ define([
 
         methods: {
             startApplication: function() {
-                this.$emit('startApplication', this.currentApp);
-                this.model.startApplication();
+                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();