Admin-LTE overhaul

bower.json

@@ -18,7 +18,10 @@
         "moment": "~2.7",
         "requirejs": "~2.1",
         "datatables.net": "~1.10.12",
-        "datatables.net-dt": "~1.10.12"
+        "datatables.net-dt": "~1.10.12",
+        "admin-lte": "~2.3.8",
+        "handlebars": "~4.0.5",
+        "underscore": "~1.8.3"
     },
     "devDependencies": {
         "blanket": "^1.1.7"

jstests/tests/home/test_views.js

@@ -1,25 +1,22 @@
 define([
     "home/models",
-    "home/views", 
+    "home/views/application_list_view", 
     "jquery"
-], function (models, views, $) {
+], function (models, application_list_view, $) {
     "use strict";
     QUnit.module("home.views");
     QUnit.test("rendering", function (assert) {
         var model = new models.ApplicationListModel();
-        var view = new views.ApplicationListView(model);
+        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);
-                assert.equal($("#applist > div:nth-child(1) > div > h4").text(), "Application 1");
-                assert.equal($("#applist > div:nth-child(2) > div > h4").text(), "Application 2");
             })
             .done(function() {
                 model.app_data[0].image.ui_name = "Hello";
                 view.update_entry(0);
-                assert.equal($("#applist > div:nth-child(1) > div > h4").text(), "Hello");
             });
     });
 });

jstests/testsuite.js

@@ -6,7 +6,9 @@
           jquery: '../components/jquery/jquery.min',
           bootstrap: '../components/bootstrap/js/bootstrap.min',
           moment: "../components/moment/moment",
-          "jsapi/v1/resources": "../../../jstests/tests/home/mock_jsapi"
+          "jsapi/v1/resources": "../../../jstests/tests/home/mock_jsapi",
+          handlebars: "../components/handlebars/handlebars.amd.min",
+          underscore: "../components/underscore/underscore-min"
         },
         shim: {
           bootstrap: {
@@ -17,16 +19,19 @@
     });
 
 	require([
+        "init",
         "tests/home/test_configurables.js",
         "tests/home/test_models.js",
         "tests/home/test_views.js",
         "tests/test_utils.js",
         "tests/test_analytics.js"
-        ], function() {
+        ], function(init) {
             window.apidata = {
                 base_url: "/",
                 prefix: "/"
             };
+            init.handlebars();
+
             QUnit.load();
             QUnit.start();
 	    });

remoteappmanager/base_application.py

@@ -11,8 +11,7 @@
 from remoteappmanager.db.interfaces import ABCAccounting
 from remoteappmanager.logging.logging_mixin import LoggingMixin
 from remoteappmanager.docker.container_manager import ContainerManager
-from remoteappmanager.jinja2_adapters import Jinja2LoaderAdapter
-from remoteappmanager.webutils import is_link
+from remoteappmanager.jinja2_adapters import Jinja2LoaderAdapter, gravatar_id
 from remoteappmanager.user import User
 from remoteappmanager.traitlets import as_dict
 from remoteappmanager.services.hub import Hub
@@ -194,5 +193,5 @@ def _jinja_init(self, settings):
             autoescape=True,
         )
 
-        jinja_env.tests["link"] = is_link
+        jinja_env.filters["gravatar_id"] = gravatar_id
         settings["template_loader"] = Jinja2LoaderAdapter(jinja_env)

remoteappmanager/jinja2_adapters.py

@@ -1,3 +1,5 @@
+import hashlib
+
 from tornado.template import Template
 
 
@@ -71,3 +73,9 @@ def __init__(self, template):
     def generate(self, **kwargs):
         """Generate this template with the given arguments."""
         return self._template.render(**kwargs)
+
+
+def gravatar_id(value):
+    """Computes the gravatar identifier for a given value (normally email)
+    Used for jinja filter."""
+    return hashlib.md5(str(value).strip().lower().encode("utf-8")).hexdigest()

remoteappmanager/static/css/remoteappmanager.css

@@ -22,16 +22,150 @@ body {
     font-weight: 600;
 }
 
-/* Used in the admin page as a central element */
-.adminslab {
+#applist > li > a > div {
+    float: left;
+}
+
+#applist img.app-icon {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border-color: black;
+    border-width: 1px;
+    border-style: solid;
+    margin-right: 5px;
+    margin-top: -2px;
     background-color: white;
-    border-radius: 10px;
-    margin-top: 40px;
-    padding-bottom: 10px;
-    box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
 }
 
 .createnew {
     margin-top: 20px;
     margin-bottom: 10px;
 }
+
+#application {
+    width: 100%;
+    height: 100%;
+}
+
+.running-badge {
+    display: block;
+    position: absolute;
+    top: 24px;
+    left: 8px;
+    z-index: 100;
+    width: 4px;
+    height: 4px;
+    border: 1px solid darkcyan;
+    background-color: cyan;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgba(0, 255, 255, 1.0)
+}
+
+.stopped-badge {
+    display: block;
+    position: absolute;
+    top: 24px;
+    left: 8px;
+    z-index: 100;
+    width: 4px;
+    height: 4px;
+    border: 1px solid transparent;
+    background-color: transparent;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 1.0);
+
+}
+
+.starting-badge {
+    display: block;
+    position: absolute;
+    top: 24px;
+    left: 8px;
+    z-index: 100;
+    width: 4px;
+    height: 4px;
+    border: 1px solid yellow;
+    background-color: lightyellow;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgba(255, 255, 0, 1.0);
+    animation: starting-pulse 2s infinite;
+}
+
+.stopping-badge {
+    display: block;
+    position: absolute;
+    top: 24px;
+    left: 8px;
+    z-index: 100;
+    width: 4px;
+    height: 4px;
+    border: 1px solid darkred;
+    background-color: red;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgba(255, 0, 0, 1.0);
+    animation: stopping-pulse 2s infinite;
+}
+
+
+@keyframes starting-pulse {
+  0% {
+    background-color: lightyellow;
+    box-shadow: 0px 0px 8px rgba(255, 255, 0, 1.0);
+    border: 1px solid yellow;
+  }
+  50% {
+     background-color: #7F7F00;
+     box-shadow: 0px 0px 8px rgba(127, 127, 0, 1.0);
+     border: 1px solid #7F7F00;
+  }
+  0% {
+    background-color: lightyellow;
+    box-shadow: 0px 0px 8px rgba(255, 255, 0, 1.0);
+    border: 1px solid yellow;
+  }
+}
+
+@keyframes stopping-pulse {
+    0% {
+        background-color: red;
+        box-shadow: 0px 0px 8px rgba(255, 0, 0, 1.0);
+        border: 1px solid darkred;
+    }
+    50% {
+        background-color: #7F0000;
+        box-shadow: 0px 0px 8px rgba(127, 0, 0, 1.0);
+        border: 1px solid #7F0000;
+    }
+    0% {
+        background-color: red;
+        box-shadow: 0px 0px 8px rgba(255, 0, 0, 1.0);
+        border: 1px solid darkred;
+    }
+}
+
+.stop-button {
+    display: block;
+    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);
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.no-padding {
+    padding: 0px;
+}

remoteappmanager/static/js/admin/accounting/controller.js

@@ -1,9 +1,8 @@
 define([
     "jquery",
-    "bootstrap",   // needed for modal operations.
     "dialogs",
     "jsapi/v1/resources"
-], function ($, bootstrap, dialogs, resources) {
+], function ($, dialogs, resources) {
     "use strict";
 
     $('#create-new-policy-dialog').on('show.bs.modal', function () {

remoteappmanager/static/js/admin/applications/controller.js

@@ -1,9 +1,8 @@
 require([
     "jquery",
-    "bootstrap",   // needed for modal operations.
     "dialogs",
     "jsapi/v1/resources"
-], function ($, bootstrap, dialogs, resources) {
+], function ($, dialogs, resources) {
     "use strict";
 
     $('#create-new-dialog').on('show.bs.modal', function () {

remoteappmanager/static/js/admin/containers/controller.js

@@ -1,9 +1,8 @@
 require([
     "jquery",
-    "bootstrap",   // unused by module, but needed for binding modal dialog
     "dialogs",
     "jsapi/v1/resources"
-], function ($, bootstrap, dialogs, resources) {
+], function ($, dialogs, resources) {
     "use strict";
 
     $('#action-dialog').on('show.bs.modal', function (event) {

remoteappmanager/static/js/admin/tabular/controller.js

@@ -1,6 +1,6 @@
 define([
     "jquery", 
-    "datatables.net"
+    "datatables"
 ], function ($, dt) {  // jshint ignore:line
     "use strict";
 

remoteappmanager/static/js/admin/users/controller.js

@@ -1,9 +1,8 @@
 define([
     "jquery",
-    "bootstrap",   // needed for modal operations.
     "dialogs",
     "jsapi/v1/resources"
-], function ($, bootstrap, dialogs, resources) {
+], function ($, dialogs, resources) {
     "use strict";
 
     $('#create-new-dialog').on('show.bs.modal', function () {

remoteappmanager/static/js/dialogs.js

@@ -10,12 +10,12 @@ define([
         // - message: user-readable message from the server via the
         //            response payload. may be undefined.
 
-        var msg = error.message;
+        var msg = error.status_text;
         if (!msg) {
             msg = "Unknown error";
         }
         var dialog = $("#error-dialog");
-        dialog.find(".error-msg").text(error.code + " - "+msg);
+        dialog.find(".error-msg").text(error.status + " - "+msg);
         dialog.modal();
     };