Create a component for the topbar

frontend/tests/tests/user/test_application_label.js

@@ -0,0 +1,74 @@
+var Vue = require("vuejs");
+var ApplicationListModel = require("user/ApplicationListModel");
+var ApplicationLabel = require("user/vue-components/ApplicationLabel");
+var $ = require("jquery");
+require("filters");
+
+QUnit.module("user.app_label");
+QUnit.test("application name", function(assert) {
+  var done = assert.async();
+
+  var model = new ApplicationListModel();
+  var appLabel = new ApplicationLabel({
+    data: function() { return { model: model }; }
+  }).$mount();
+
+  model.update().done(function() {
+    Vue.nextTick(function() {
+      assert.equal(
+        appLabel.$el.querySelector('li > a > span').innerHTML,
+        model.appList[0].appData.image.ui_name
+      );
+
+      // Simulate changing currentApp
+      model.selectedIndex = 1;
+
+      Vue.nextTick(function() {
+        assert.equal(
+          appLabel.$el.querySelector('li > a > span').innerHTML,
+          model.appList[1].appData.image.ui_name
+        );
+
+        done();
+      });
+    })
+  });
+});
+
+QUnit.test("rendering stop button", function (assert) {
+  var done = assert.async();
+
+  var model = new ApplicationListModel();
+  var appLabel = new ApplicationLabel({
+    data: function() { return { model: model }; }
+  }).$mount();
+
+  model.update().done(function() {
+    // Simulate application stopped
+    model.appList[0].status = 'STOPPED';
+
+    Vue.nextTick(function() {
+      assert.equal(
+        appLabel.$el.querySelector('li > a > span').innerHTML,
+        model.appList[0].appData.image.ui_name
+      );
+
+      // Test stop button disabled
+      assert.ok(
+        appLabel.$el.querySelector('#stop-button').classList.contains('disabled')
+      );
+
+      // Simulate application running
+      model.appList[0].status = 'RUNNING';
+
+      // Test stop button enabled
+      Vue.nextTick(function() {
+        assert.notOk(
+          appLabel.$el.querySelector('#stop-button').classList.contains('disabled')
+        );
+
+        done();
+      });
+    })
+  });
+});

frontend/tests/tests/user/test_application_view.js

@@ -58,7 +58,6 @@ QUnit.test("rendering iframe", function (assert) {
             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

frontend/tests/testsuite.js

@@ -2,6 +2,7 @@ require("./tests/user/test_configurables.js");
 require("./tests/user/test_models.js");
 require("./tests/user/test_application_list_view.js");
 require("./tests/user/test_application_view.js");
+require("./tests/user/test_application_label.js");
 require("./tests/vue/components/test_DataTable.js");
 require("./tests/vue/components/test_ConfirmDialog.js");
 require("./tests/vue/components/test_error_dialog.js");

frontend/user/configurables/Resolution.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="form-group">
     <label>Resolution</label>
-    <select class="form-control" v-model="resolution">
+    <select class="form-control drop-down" v-model="resolution">
       <option v-for="resolutionOption in resolutionOptions">
         {{resolutionOption}}
       </option>
@@ -30,3 +30,10 @@
     }
   });
 </script>
+
+<style scoped>
+  .drop-down {
+    width: auto;
+    border-radius: 3px;
+  }
+</style>

frontend/user/main.js

@@ -3,6 +3,7 @@ let ErrorDialog = require("ErrorDialog");
 let ApplicationListModel = require("./ApplicationListModel");
 let ApplicationListView = require("./vue-components/ApplicationListView");
 let ApplicationView = require("./vue-components/ApplicationView");
+let ApplicationLabel = require("./vue-components/ApplicationLabel");
 require("filters");
 
 // This model keeps the retrieved content from the REST query locally.
@@ -24,9 +25,15 @@ let appView = new ApplicationView({
   data: function() { return { model }; }
 });
 
+let applabel = new ApplicationLabel({
+  el: '#applabel',
+  data: function() { return { model: model }; }
+});
+
 // Create GA observer
 let gaObserver = new gamodule.GaObserver();
 
+// Set events
 appView.$on('startApplication', function(application) {
   gaObserver.triggerApplicationStarting(application.appData.image.name);
 });
@@ -37,4 +44,8 @@ appView.$on('error', function(error) {
 
 appListView.$on('entryClicked', function() { appView.focusIframe(); });
 
+applabel.$on('error', function(error) {
+  errorDialog.errorList.push(error);
+});
+
 model.update();

frontend/user/vue-components/ApplicationLabel.vue

@@ -0,0 +1,69 @@
+<template>
+  <ul v-if="currentApp !== null" class="nav navbar-nav">
+    <li class="dropdown">
+      <a href="#" class="dropdown-toggle cust-padding" data-toggle="dropdown" aria-expanded="false">
+        <img class="app-icon"
+        :src="currentApp.appData.image.icon_128 | iconSrc">
+
+        <span>{{ currentApp.appData.image | appName }}</span>
+      </a>
+
+      <ul class="dropdown-menu" role="menu">
+        <li class="disabled">
+          <a href="#">Application settings</a>
+        </li>
+        <li role="separator" class="divider"></li>
+        <li
+        id="stop-button"
+        :class="{ disabled: !currentApp.isRunning() }"
+        @click="stopApplication()">
+          <a href="#">
+            <i class="fa fa-times text-danger"></i>
+            Stop Application
+          </a>
+          <!-- Put other settings here -->
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script>
+  let Vue = require("vuejs");
+  require('toolkit');
+
+  module.exports = Vue.extend({
+    computed: {
+      currentApp: function() {
+        return this.model.appList[this.model.selectedIndex] || null;
+      }
+    },
+
+    methods: {
+      stopApplication: function() {
+        let stoppingAppName = this.$options.filters.appName(
+          this.currentApp.appData.image);
+        this.model.stopApplication(this.model.selectedIndex).fail((error) => {
+          this.$emit('error', {
+            title: 'Error when stopping ' + stoppingAppName,
+            code: error.code,
+            message: error.message
+          });
+        });
+      }
+    },
+  });
+</script>
+
+<style scoped>
+  .cust-padding {
+    padding: 9px;
+  }
+
+  .app-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 20%;
+    border: 1px solid #d2d6de;
+  }
+</style>

frontend/user/vue-components/ApplicationListView.vue

@@ -1,15 +1,5 @@
 <template>
   <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">
@@ -46,12 +36,6 @@
           <img class="app-icon"
           :src="app.appData.image.icon_128 | iconSrc">
 
-          <button class="stop-button"
-          v-if="app.isRunning()"
-          @click="stopApplication(indexOf(app))"
-          :disabled="app.isStopping()">
-            <i class="fa fa-times"></i>
-          </button>
           <span>{{ app.appData.image | appName }}</span>
         </a>
       </li>
@@ -61,13 +45,11 @@
 
 <script>
   let Vue = require("vuejs");
-  require("toolkit");
 
   module.exports = Vue.extend({
     data: function() {
       return {
-        'searchInput': '',
-        stoppingError: { show: false, appName: '', code: '', message: '' }
+        'searchInput': ''
       };
     },
 
@@ -81,19 +63,6 @@
     },
 
     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);
       }
@@ -106,10 +75,8 @@
     position: relative;
     width: 32px;
     height: 32px;
-    border-radius: 50%;
+    border-radius: 20%;
     border-color: black;
-    border-width: 1px;
-    border-style: solid;
     margin-right: 5px;
     margin-top: -2px;
     background-color: white;
@@ -139,7 +106,7 @@
     height: 4px;
     border: 1px solid transparent;
     background-color: transparent;
-    border-radius: 50%;
+    border-radius: 20%;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 1.0);
   }
 
@@ -214,30 +181,6 @@
     text-overflow: ellipsis;
   }
 
-  .stop-button {
-    display: none;
-    position: absolute;
-    top: 10px;
-    left: 15px;
-    z-index: 100;
-    width: 32px;
-    height: 32px;
-    padding: 0px;
-    border: 1px solid rgba(0, 0, 0, 0.8);
-    background-color: rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-    font-size: 18px;
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  /* When the mouse is on the img or the stop-button -> display stop-button */
-  li a img:hover + .stop-button {
-    display: block;
-  }
-  li a .stop-button:hover {
-    display: block;
-  }
-
   .list-enter, .list-leave-to {
     opacity: 0;
     transform: translateX(-50px);

frontend/user/vue-components/ApplicationView.vue

@@ -6,7 +6,7 @@
     <!-- Start Form -->
     <div v-if="!currentApp.isRunning()" class="row">
       <div class="col-md-offset-2 col-md-8">
-        <div class="box box-primary">
+        <div class="box box-standard">
           <div class="box-header with-border">
             <h3 class="box-title">{{ currentApp.appData.image | appName }}</h3>
             <div class="box-tools pull-right"></div>

remoteappmanager/templates/page.html

@@ -61,6 +61,11 @@
 
       <!-- Header Navbar -->
       <nav class="navbar navbar-static-top" role="navigation">
+        <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
+          {% block topbar %}
+          {% endblock %}
+        </div>
+
         <!-- Navbar Right Menu -->
         <div class="navbar-custom-menu">
           <ul class="nav navbar-nav">

remoteappmanager/templates/user/page.html

@@ -1,5 +1,11 @@
 {% extends "page.html" %}
 
+{% set skin = "skin-black" %}
+
+{% block topbar %}
+  <div id="applabel"></div>
+{% endblock %}
+
 {% block sidebar %}
   <div id="applist"></div>
 {% endblock %}

selenium_tests/selenium_test_base.py

@@ -122,7 +122,7 @@ def login(self, username="test"):
         try:
             yield
         finally:
-            driver.find_element_by_css_selector(".dropdown-toggle").click()
+            driver.find_element_by_css_selector(".user-menu").click()
             driver.find_element_by_id("logout").click()
             self.wait_for(
                 lambda: "Sign in" == driver.find_element_by_css_selector(
@@ -145,8 +145,5 @@ def running_container(self):
                 yield
             finally:
                 driver.find_element_by_id("application")
-                ActionChains(driver).move_to_element(
-                    driver.find_element_by_css_selector(
-                        "#applistentries .app-icon")
-                ).click(driver.find_element_by_css_selector(".stop-button")
-                        ).perform()
+                self.click_by_css_selector(".dropdown > a > img")
+                self.click_by_css_selector("#stop-button")

selenium_tests/test_login_logout.py

@@ -13,7 +13,7 @@ def test_login_logout(self):
         driver.find_element_by_id("password_input").send_keys("test")
         driver.find_element_by_id("login_submit").click()
         driver.find_element_by_id("applistentries")
-        driver.find_element_by_css_selector(".dropdown-toggle").click()
+        driver.find_element_by_css_selector(".user-menu").click()
         driver.find_element_by_id("logout").click()
         self.wait_for(
             lambda: "Sign in" == driver.find_element_by_css_selector("div.auth-form-header").text