Merge branch 'master' into issue-291

921944e9 · Kálmán Viktor · 7c5eae88 · db42d716 · 921944e9 · 921944e9
Commit 921944e9 authored Jan 13, 2015 by Kálmán Viktor
22 changed files
--- a/circle/bower.json
+++ b/circle/bower.json
@@ -18,6 +18,7 @@
    "jquery-knob": "~1.2.9",
    "jquery-simple-slider": "https://github.com/BME-IK/jquery-simple-slider.git",
    "bootbox": "~4.3.0",
-    "intro.js": "0.9.0"
+    "intro.js": "0.9.0",
+    "favico.js": "~0.3.5"
  }
 }
--- a/circle/circle/settings/base.py
+++ b/circle/circle/settings/base.py
@@ -197,6 +197,7 @@ PIPELINE_JS = {
        "intro.js/intro.js",
        "jquery-knob/dist/jquery.knob.min.js",
        "jquery-simple-slider/js/simple-slider.js",
+        "favico.js/favico.js",
        "dashboard/dashboard.js",
        "dashboard/activity.js",
        "dashboard/group-details.js",

--- a/circle/dashboard/models.py
+++ b/circle/dashboard/models.py
@@ -31,6 +31,7 @@ from django.db.models import (
 )
 from django.db.models.signals import post_save, pre_delete, post_delete
 from django.templatetags.static import static
+from django.utils.html import escape
 from django.utils.translation import ugettext_lazy as _
 from django_sshkey.models import UserKey
 from django.core.exceptions import ObjectDoesNotExist
@@ -87,7 +88,8 @@ class Notification(TimeStampedModel):
    @property
    def subject(self):
-        return HumanReadableObject.from_dict(self.subject_data)
+        return HumanReadableObject.from_dict(
+            self.escape_dict(self.subject_data))
    @subject.setter
    def subject(self, value):
@@ -95,7 +97,14 @@ class Notification(TimeStampedModel):
    @property
    def message(self):
-        return HumanReadableObject.from_dict(self.message_data)
+        return HumanReadableObject.from_dict(
+            self.escape_dict(self.message_data))
+    def escape_dict(self, data):
+        for k, v in data['params'].items():
+            if isinstance(v, basestring):
+                data['params'][k] = escape(v)
+        return data
    @message.setter
    def message(self, value):

--- a/circle/dashboard/static/dashboard/dashboard.js
+++ b/circle/dashboard/static/dashboard/dashboard.js
 $(function () {
+  var favicon= new Favico({
+        animation:'none'
+  });
+  var notifications = $("#notification_count").data("notifications");
+  if(notifications)
+    favicon.badge(notifications);
  $(".not-tab-pane").removeClass("not-tab-pane").addClass("tab-pane");
  $('.vm-create').click(function(e) {
@@ -151,7 +159,8 @@ $(function () {
  $("#dashboard-vm-search-input").keyup(function(e) {
    // if my_vms is empty get a list of our vms
    if(my_vms.length < 1) {
-      $.ajaxSetup( { "async": false } );
+      $("#dashboard-vm-search-form button i").addClass("fa-spinner fa-spin");
      $.get("/dashboard/vm/list/", function(result) {
        for(var i in result) {
          my_vms.push({
@@ -165,8 +174,10 @@ $(function () {
            'owner': result[i].owner,
          });
        }
+        $("#dashboard-vm-search-input").trigger("keyup");
+        $("#dashboard-vm-search-form button i").removeClass("fa-spinner fa-spin").addClass("fa-search");
      });
-      $.ajaxSetup( { "async": true } );
+      return;
    }
    input = $("#dashboard-vm-search-input").val().toLowerCase();
@@ -311,6 +322,8 @@ $(function () {
  $("#notification-button a").click(function() {
    $('#notification-messages').load("/dashboard/notifications/");
    $('#notification-button a span[class*="badge-pulse"]').remove();
+    favicon.reset();
  });
  /* on the client confirmation button fire the clientInstalledAction */
@@ -349,7 +362,6 @@ $(function () {
    li.addClass('panel-primary').find('input').prop("checked", true);
    return true;
  });
 });
 function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
@@ -358,7 +370,7 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
        '<span class="index-vm-list-name">' + 
          '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) +
        '</span>' + 
-        '<small class="text-muted"> ' + host + '</small>' +
+        '<small class="text-muted index-vm-list-host"> ' + host + '</small>' +
        '<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' +
          (fav ? '<i class="fa fa-star text-primary title-favourite" title="' + gettext("Unfavourite") + '"></i>' :
          '<i class="fa fa-star-o text-primary title-favourite" title="' + gettext("Mark as favorite") + '"></i>' ) +

--- a/circle/dashboard/static/dashboard/dashboard.less
+++ b/circle/dashboard/static/dashboard/dashboard.less
@@ -23,46 +23,23 @@ html {
  padding-right: 15px;
 }
-/* values for 45px tall navbar */
+/* --- */
-.navbar {
-  min-height: 45px;
-}
-.navbar-brand {
-  height: 45px;
-  padding: 12.5px 12.5px;
-}
-.navbar-toggle {
+#dashboard-menu > li > a {
-  margin-top: 5.5px;
+  color: white;
-  margin-bottom: 5.5px;
+  font-size: 10px;
 }
-.navbar-form {
-  margin-top: 5.5px;
-  margin-bottom: 5.5px;
-}
-.navbar-btn {
+#dashboard-menu {
-  margin-top: 5.5px;
+  margin-right: 15px;
-  margin-bottom: 5.5px;
 }
-.navbar-btn.btn-sm {
+/* we need this for mobile view */
-  margin-top: 7.5px;
+.container > :first-child {
-  margin-bottom: 7.5px;
+  margin-top: 15px;
-}
-.navbar-btn.btn-xs {
-  margin-top: 11.5px;
-  margin-bottom: 11.5px;
-}
-.navbar-text {
-  margin-top: 12.5px;
-  margin-bottom: 12.5px;
 }
-/* --- */
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
  /* Let the jumbotron breathe */
@@ -80,6 +57,7 @@ html {
  }
 }
 .no-margin {
  margin: 0!important;
 }
@@ -400,10 +378,6 @@ a.hover-black {
  font-size: 12px;
 }
-#notification-button {
-  margin-right: 15px;
-}
 #vm-migrate-node-list {
  list-style: none;
 }
@@ -519,15 +493,6 @@ footer a, footer a:hover, footer a:visited {
  padding: 5px; /* it's nice this way in the tour */
 }
-.index-vm-list-name {
-  display: inline-block;
-  max-width: 70%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  float: left;
-}
 #dashboard-vm-list a small {
  padding-left: 10px;
 }
@@ -756,12 +721,15 @@ textarea[name="new_members"] {
  margin-top: 8px;
 }
-#dashboard-files-toplist div.list-group-item {
+#dashboard-files-toplist {
+  div.list-group-item {
    color: #555;
-}
+    height: 41px;
-#dashboard-files-toplist div.list-group-item:hover {
+    &:hover {
      background: #eee;
+    }
+  }
 }
 .store-list-item-name {
@@ -1109,6 +1077,25 @@ textarea[name="new_members"] {
  text-align: center;
 }
+.vm-create-list-name {
+  display: inline-block;
+  max-width: 60%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  float: left;
+}
+.vm-create-list-system {
+  display: inline-block;
+  max-width: 40%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  float: right;
+}
 /* for introjs
 * newer version has this fixed
 * but it doesn't work w bootstrap 3.2.0
@@ -1155,3 +1142,78 @@ textarea[name="new_members"] {
    background-position: 0 0px;
  }
 }
+#dashboard-vm-list {
+  .list-group-item {
+    display: flex;
+  }
+  .index-vm-list-name, .index-vm-list-host {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .index-vm-list-name {
+    max-width: 70%;
+  }
+  .index-vm-list-host {
+    padding-top: 3px;
+    flex: 1;
+  }
+}
+.fa-fw-12 {
+  /* fa-fw is too wide */
+  width: 12px;
+}
+.btn-op-form-send {
+  padding: 6px 12px 6px 8px;
+}
+@media (max-width: 767px) {
+  #vm-detail-panel .graph-buttons {
+    padding-top: 15px;
+  }
+  .graph-buttons a {
+    margin-bottom: 8px;
+  }
+  #ops .operation {
+    margin-bottom: 5px;
+  }
+  .vm-details-connection dd {
+    margin-left: 25px;
+  }
+  .vm-details-connection dt {
+    padding-left: 0px;
+  }
+}
+#notifications-upper-pagination {
+  margin-top: 4px;
+}
+#notifications-bottom-pagination {
+  * {
+    display: inline-block;
+  }
+  a {
+    font-size: 20px;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  .page-numbers {
+    padding: 25px;
+  }
+}
--- a/circle/dashboard/static/template.less
+++ b/circle/dashboard/static/template.less
@@ -82,7 +82,6 @@ html {
  z-index: 1;
 }
 .nojs-dropdown-toggle:focus + .nojs-dropdown-menu
 {
  display: block;
@@ -98,32 +97,6 @@ html {
  display: block;
 }
-.notification-messages {
-  padding: 10px 8px;
-  width: 350px;
-}
-.notification-message {
-  margin-bottom: 10px;
-  padding: 0 0 4px 0;
-  border-bottom: 1px dotted #D3D3D3;
-}
-.notification-messages .notification-message:last-child {
-  margin-bottom: 0px;
-  padding: 0px;
-  border-bottom: none;
-}
-.notification-message-text {
-  padding: 8px 15px;
-  display: none;
-}
-.notification-message .notification-message-subject {
-  cursor: pointer;
-}
 /* footer */
 footer {
  position: absolute;
@@ -148,10 +121,6 @@ footer a, footer a:hover, footer a:visited {
  display: none;
 }
-#notifications-button {
-  margin: 0;
-}
 /* 2px border bottom for all bootstrap tables */
 .table thead>tr>th {
  border-bottom: 1px;

--- a/circle/dashboard/templates/dashboard/_disk-list-element.html
+++ b/circle/dashboard/templates/dashboard/_disk-list-element.html
@@ -9,7 +9,7 @@
    <a href="{{ op.remove_disk.get_url }}?disk={{d.pk}}"
      class="btn btn-xs btn-{{ op.remove_disk.effect}} pull-right operation disk-remove-btn
      {% if op.remove_disk.disabled %}disabled{% endif %}">
-      <i class="fa fa-{{ op.remove_disk.icon }}"></i> {% trans "Remove" %}
+      <i class="fa fa-{{ op.remove_disk.icon }} fa-fw-12"></i> {% trans "Remove" %}
    </a>
  </span>
 {% endif %}
@@ -18,7 +18,7 @@
    <a href="{{ op.resize_disk.get_url }}?disk={{d.pk}}"
      class="btn btn-xs btn-{{ op.resize_disk.effect }} pull-right operation disk-resize-btn
      {% if op.resize_disk.disabled %}disabled{% endif %}">
-      <i class="fa fa-{{ op.resize_disk.icon }}"></i> {% trans "Resize" %}
+      <i class="fa fa-{{ op.resize_disk.icon }} fa-fw-12"></i> {% trans "Resize" %}
    </a>
  </span>
 {% endif %}

--- a/circle/dashboard/templates/dashboard/_notifications-timeline.html
+++ b/circle/dashboard/templates/dashboard/_notifications-timeline.html
 {% load i18n %}
 {% load hro %}
-{% for n in notifications %}
+{% for n in page %}
  <li class="notification-message" id="msg-{{n.id}}">
    <span class="notification-message-subject">
      {% if n.status == "new" %}<i class="fa fa-envelope-o"></i> {% endif %}

--- a/circle/dashboard/templates/dashboard/_vm-create-1.html
+++ b/circle/dashboard/templates/dashboard/_vm-create-1.html
@@ -5,8 +5,14 @@
  {% for t in templates %}
  <div class="vm-create-template">
    <div class="vm-create-template-summary">
+      <span class="vm-create-list-name">
        {{ t.name }}
-      <span class="pull-right"><i class="fa fa-{{ t.os_type }}"></i> {{ t.system }}</span>
+      </span>
+      <span class="vm-create-list-system">
+        <i class="fa fa-{{ t.os_type }}"></i>
+        {{ t.system }}
+      </span>
+      <div class="clearfix"></div>
    </div>
    <div class="vm-create-template-details">
      <ul>

--- a/circle/dashboard/templates/dashboard/base.html
+++ b/circle/dashboard/templates/dashboard/base.html
@@ -18,35 +18,53 @@
 {% block navbar %}
 {% if user.is_authenticated and user.pk and not request.token_user %}
-  <ul class="nav navbar-nav pull-right">
+  <ul class="nav navbar-nav navbar-right" id="dashboard-menu">
-    <li class="dropdown" id="notification-button">
+    {% if user.is_superuser %}
-      <a href="{% url "dashboard.views.notifications" %}"
+    <li>
-        class="dropdown-toggle" data-toggle="dropdown">
+      <a href="/admin/"><i class="fa fa-cogs"></i> {% trans "Admin" %}</a>
+    </li>
+    <li>
+      <a href="/network/"><i class="fa fa-globe"></i> {% trans "Network" %}</a>
+    </li>
+    {% endif %}
+    <li>
+      <a href="{% url "dashboard.views.profile-preferences" %}">
+        <i class="fa fa-user"></i>
+        {% include "dashboard/_display-name.html" with user=user show_org=True %}
+      </a>
+    </li>
+    <li>
+      <a href="{% url "logout" %}?next={% url "login" %}">
+        <i class="fa fa-sign-out"></i> {% trans "Log out" %}
+      </a>
+    </li>
+    <li class="visible-xs">
+      <a href="{% url "dashboard.views.notifications" %}">
        {% trans "Notifications" %}
        {% if NEW_NOTIFICATIONS_COUNT > 0 %}
          <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>
        {% endif %}
      </a>
+    </li>
+    <li class="dropdown hidden-xs" id="notification-button">
+      <a href="{% url "dashboard.views.notifications" %}"
+        class="dropdown-toggle" data-toggle="dropdown"
+        id="notification_count" data-notifications="{{ NEW_NOTIFICATIONS_COUNT }}">
+        {% trans "Notifications" %}
+        {% if NEW_NOTIFICATIONS_COUNT > 0 %}
+          <span class="badge badge-pulse">
+            {{ NEW_NOTIFICATIONS_COUNT }}
+          </span>
+        {% endif %}
+      </a>
      <ul class="dropdown-menu" id="notification-messages">
          <li>{% trans "Loading..." %}</li>
      </ul>
    </li>
  </ul>
-  <a class="navbar-brand pull-right" href="{% url "logout" %}?next={% url "login" %}" style="color: white; font-size: 10px;">
-    <i class="fa fa-sign-out"></i> {% trans "Log out" %}
-  </a>
-  <a class="navbar-brand pull-right" href="{% url "dashboard.views.profile-preferences" %}" style="color: white; font-size: 10px;">
-    <i class="fa fa-user"></i>
-    {% include "dashboard/_display-name.html" with user=user show_org=True %}
-  </a>
-  {% if user.is_superuser %}
-    <a class="navbar-brand pull-right" href="/network/" style="color: white; font-size: 10px;"><i class="fa fa-globe"></i> {% trans "Network" %}</a>
-    <a class="navbar-brand pull-right" href="/admin/" style="color: white; font-size: 10px;"><i class="fa fa-cogs"></i> {% trans "Admin" %}</a>
-  {% endif %}
 {% else %}
-  <a class="navbar-brand pull-right" href="{% url "login" %}?next={{ request.path }}" style="color: white; font-size: 10px;"><i class="fa fa-sign-in"></i> {% trans "Log in " %}</a>
+  <a class="navbar-brand pull-right" href="{% url "login" %}?next={{ request.path }}"><i class="fa fa-sign-in"></i> {% trans "Log in " %}</a>
 {% endif %}
 {% endblock %}
--- a/circle/dashboard/templates/dashboard/group-list.html
+++ b/circle/dashboard/templates/dashboard/group-list.html
@@ -16,9 +16,11 @@
      <div class="panel-body">
        <div id="table_container">
          <div id="rendered_table" class="panel-body">
+            <div class="table-responsive">
              {% render_table table %}
            </div>
          </div>
+        </div>
      </div><!-- .panel-body -->
    </div>
  </div>

--- a/circle/dashboard/templates/dashboard/index-vm.html
+++ b/circle/dashboard/templates/dashboard/index-vm.html
@@ -13,7 +13,14 @@
      <span class="btn btn-default btn-xs infobtn" data-container="body" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="fa fa-info-circle"></i></span>
    </div>
    <h3 class="no-margin">
-      <i class="fa fa-desktop"></i> {% trans "Virtual machines" %}
+      <span class="visible-xs">
+        <i class="fa fa-desktop"></i>
+        {% trans "VMs" %}
+      </span>
+      <span class="hidden-xs">
+        <i class="fa fa-desktop"></i>
+        {% trans "Virtual machines" %}
+      </span>
    </h3>
  </div>
  <div class="list-group" id="vm-list-view">
@@ -25,7 +32,7 @@
          <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
          {{ i.name }}
        </span>
-        <small class="text-muted">
+        <small class="text-muted index-vm-list-host">
          {% if i.owner == request.user %}{{ i.short_hostname }}
          {% else %}{{i.owner.profile.get_display_name}}{% endif %}
        </small>

--- a/circle/dashboard/templates/dashboard/node-list.html
+++ b/circle/dashboard/templates/dashboard/node-list.html
@@ -15,11 +15,13 @@
      </div>
      <div id="table_container">
        <div id="rendered_table" class="panel-body">
+          <div class="table-responsive">
            {% render_table table %}
          </div>
        </div>
      </div>
    </div>
+  </div>
 </div>
 <div class="row">

--- a/circle/dashboard/templates/dashboard/notifications.html
+++ b/circle/dashboard/templates/dashboard/notifications.html
@@ -6,6 +6,18 @@
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
+        <div id="notifications-upper-pagination" class="pull-right">
+          {% if page.has_previous %}
+            <a href="?page={{ page.previous_page_number }}">
+              <i class="fa fa-chevron-left"></i></a>
+            </a>
+          {% endif %}
+          {{ page.number }} / {{ paginator.num_pages }}
+          {% if page.has_next %}
+          <a href="?page={{ page.next_page_number }}"><i class="fa fa-chevron-right"></i></a>
+          {% endif %}
+        </div>
        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Notifications" %}</h3>
      </div>
      <div class="panel-body">
@@ -13,6 +25,29 @@
          {% include "dashboard/_notifications-timeline.html" %}
        </ul>
      </div>
+      <div class="panel-body text-center" id="notifications-bottom-pagination">
+        {% if page.has_previous %}
+        <a href="?page=1">
+          <i class="fa fa-angle-double-left"></i>
+        </a>
+        <a href="{% if page.has_previous %}?page={{ page.previous_page_number}}{% else %}#{% endif %}">
+          <i class="fa fa-angle-left"></i>
+        </a>
+        {% endif %}
+        <div class="page-numbers">
+          {{ page.number }} / {{ paginator.num_pages }}
+        </div>
+        {% if page.has_next %}
+        <a href="{% if page.has_next %}?page={{ page.next_page_number}}{% else %}#{% endif %}">
+          <i class="fa fa-angle-right"></i>
+        </a>
+        <a href="?page={{ paginator.num_pages }}">
+          <i class="fa fa-angle-double-right"></i>
+        </a>
+        {% endif %}
+      </div>
    </div>
  </div>
 </div>

--- a/circle/dashboard/templates/dashboard/operate.html
+++ b/circle/dashboard/templates/dashboard/operate.html
@@ -19,8 +19,8 @@ Do you want to perform the following operation on
  <div class="pull-right">
    <a class="btn btn-default" href="{{object.get_absolute_url}}"
        data-dismiss="modal">{% trans "Cancel" %}</a>
-    <button class="btn btn-{{ opview.effect }}" type="submit" id="op-form-send">
+    <button class="btn btn-{{ opview.effect }} btn-op-form-send" type="submit" id="op-form-send">
-        {% if opview.icon %}<i class="fa fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
+      {% if opview.icon %}<i class="fa fa-fw fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
    </button>
  </div>
 </form>