Merge branch 'master' into feature-hot-plug

Conflicts:
	circle/vm/operations.py

circle/circle/settings/base.py

@@ -22,6 +22,7 @@ from os.path import (abspath, basename, dirname, join, normpath, isfile,
                      expanduser)
 from sys import path
 from subprocess import check_output
+from uuid import getnode
 
 from django.core.exceptions import ImproperlyConfigured
 from django.utils.translation import ugettext_lazy as _
@@ -444,3 +445,6 @@ if graphite_host and graphite_port:
     GRAPHITE_URL = 'http://%s:%s/render/' % (graphite_host, graphite_port)
 else:
     GRAPHITE_URL = None
+
+SESSION_COOKIE_NAME = "csessid%x" % (((getnode() // 139) ^
+                                      (getnode() % 983)) & 0xffff)

circle/circle/urls.py

@@ -43,8 +43,9 @@ urlpatterns = patterns(
     url(r'^network/', include('network.urls')),
     url(r'^dashboard/', include('dashboard.urls')),
 
-    url((r'^accounts/reset/(?P<uidb36>[0-9A-Za-z]{1,13})-'
-         '(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$'),
+    # django/contrib/auth/urls.py (care when new version)
+    url((r'^accounts/reset/(?P<uidb64>[0-9A-Za-z_\-]+)/'
+         r'(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$'),
         'django.contrib.auth.views.password_reset_confirm',
         {'set_password_form': CircleSetPasswordForm},
         name='accounts.password_reset_confirm'
@@ -64,3 +65,5 @@ if get_env_variable('DJANGO_SAML', 'FALSE') == 'TRUE':
         '',
         (r'^saml2/', include('djangosaml2.urls')),
     )
+
+handler500 = 'common.views.handler500'

circle/common/models.py

@@ -21,13 +21,19 @@ from hashlib import sha224
 from itertools import chain, imap
 from logging import getLogger
 from time import time
+from warnings import warn
 
 from django.contrib.auth.models import User
 from django.core.cache import cache
-from django.db.models import (CharField, DateTimeField, ForeignKey,
-                              NullBooleanField, TextField)
+from django.core.serializers.json import DjangoJSONEncoder
+from django.db.models import (
+    CharField, DateTimeField, ForeignKey, NullBooleanField
+)
 from django.utils import timezone
-from django.utils.translation import ugettext_lazy as _
+from django.utils.encoding import force_text
+from django.utils.functional import Promise
+from django.utils.translation import ugettext_lazy as _, ugettext_noop
+from jsonfield import JSONField
 
 from model_utils.models import TimeStampedModel
 
@@ -45,7 +51,11 @@ def activitycontextimpl(act, on_abort=None, on_commit=None):
         # BaseException is the common parent of Exception and
         # system-exiting exceptions, e.g. KeyboardInterrupt
         handler = None if on_abort is None else lambda a: on_abort(a, e)
-        act.finish(succeeded=False, result=str(e), event_handler=handler)
+        result = create_readable(ugettext_noop("Failure."),
+                                 ugettext_noop("Unhandled exception: "
+                                               "%(error)s"),
+                                 error=unicode(e))
+        act.finish(succeeded=False, result=result, event_handler=handler)
         raise e
     else:
         act.finish(succeeded=True, event_handler=on_commit)
@@ -103,8 +113,23 @@ def split_activity_code(activity_code):
     return activity_code.split(activity_code_separator)
 
 
+class Encoder(DjangoJSONEncoder):
+    def default(self, obj):
+        if isinstance(obj, Promise):
+            obj = force_text(obj)
+        try:
+            return super(Encoder, self).default(obj)
+        except TypeError:
+            return unicode(obj)
+
+
 class ActivityModel(TimeStampedModel):
     activity_code = CharField(max_length=100, verbose_name=_('activity code'))
+    readable_name_data = JSONField(blank=True, null=True,
+                                   dump_kwargs={"cls": Encoder},
+                                   verbose_name=_('human readable name'),
+                                   help_text=_('Human readable name of '
+                                               'activity.'))
     parent = ForeignKey('self', blank=True, null=True, related_name='children')
     task_uuid = CharField(blank=True, max_length=50, null=True, unique=True,
                           help_text=_('Celery task unique identifier.'),
@@ -120,8 +145,9 @@ class ActivityModel(TimeStampedModel):
     succeeded = NullBooleanField(blank=True, null=True,
                                  help_text=_('True, if the activity has '
                                              'finished successfully.'))
-    result = TextField(verbose_name=_('result'), blank=True, null=True,
-                       help_text=_('Human readable result of activity.'))
+    result_data = JSONField(verbose_name=_('result'), blank=True, null=True,
+                            dump_kwargs={"cls": Encoder},
+                            help_text=_('Human readable result of activity.'))
 
     def __unicode__(self):
         if self.parent:
@@ -150,6 +176,29 @@ class ActivityModel(TimeStampedModel):
     def has_failed(self):
         return self.finished and not self.succeeded
 
+    @property
+    def readable_name(self):
+        return HumanReadableObject.from_dict(self.readable_name_data)
+
+    @readable_name.setter
+    def readable_name(self, value):
+        self.readable_name_data = None if value is None else value.to_dict()
+
+    @property
+    def result(self):
+        return HumanReadableObject.from_dict(self.result_data)
+
+    @result.setter
+    def result(self, value):
+        if isinstance(value, basestring):
+            warn("Using string as result value is deprecated. Use "
+                 "HumanReadableObject instead.",
+                 DeprecationWarning, stacklevel=2)
+            value = create_readable(user_text_template="",
+                                    admin_text_template=value)
+
+        self.result_data = None if value is None else value.to_dict()
+
 
 def method_cache(memcached_seconds=60, instance_seconds=5):  # noqa
     """Cache return value of decorated method to memcached and memory.
@@ -299,3 +348,69 @@ try:
     ], patterns=['common\.models\.'])
 except ImportError:
     pass
+
+
+class HumanReadableObject(object):
+    def __init__(self, user_text_template, admin_text_template, params):
+        self._set_values(user_text_template, admin_text_template, params)
+
+    def _set_values(self, user_text_template, admin_text_template, params):
+        self.user_text_template = user_text_template
+        self.admin_text_template = admin_text_template
+        self.params = params
+
+    @classmethod
+    def create(cls, user_text_template, admin_text_template=None, **params):
+        return cls(user_text_template,
+                   admin_text_template or user_text_template, params)
+
+    def set(self, user_text_template, admin_text_template=None, **params):
+        self._set_values(user_text_template,
+                         admin_text_template or user_text_template, params)
+
+    @classmethod
+    def from_dict(cls, d):
+        return None if d is None else cls(**d)
+
+    def get_admin_text(self):
+        if self.admin_text_template == "":
+            return ""
+        return _(self.admin_text_template) % self.params
+
+    def get_user_text(self):
+        if self.user_text_template == "":
+            return ""
+        return _(self.user_text_template) % self.params
+
+    def to_dict(self):
+        return {"user_text_template": self.user_text_template,
+                "admin_text_template": self.admin_text_template,
+                "params": self.params}
+
+    def __unicode__(self):
+        return self.get_user_text()
+
+
+create_readable = HumanReadableObject.create
+
+
+class HumanReadableException(HumanReadableObject, Exception):
+    """HumanReadableObject that is an Exception so can used in except clause.
+    """
+    pass
+
+
+def humanize_exception(message, exception=None, **params):
+    """Return new dynamic-class exception which is based on
+    HumanReadableException and the original class with the dict of exception.
+
+    >>> try: raise humanize_exception("Welcome!", TypeError("hello"))
+    ... except HumanReadableException as e: print e.get_admin_text()
+    ...
+    Welcome!
+    """
+
+    Ex = type("HumanReadable" + type(exception).__name__,
+              (HumanReadableException, type(exception)),
+              exception.__dict__)
+    return Ex.create(message, **params)

circle/common/operations.py

@@ -74,7 +74,8 @@ class Operation(object):
             self.check_auth(user)
         self.check_precond()
 
-        activity = self.create_activity(parent=parent_activity, user=user)
+        activity = self.create_activity(
+            parent=parent_activity, user=user, kwargs=kwargs)
 
         return activity, allargs, auxargs
 
@@ -150,7 +151,7 @@ class Operation(object):
             raise PermissionDenied("%s doesn't have the required permissions."
                                    % user)
 
-    def create_activity(self, parent, user):
+    def create_activity(self, parent, user, kwargs):
         raise NotImplementedError
 
     def on_abort(self, activity, error):
@@ -159,6 +160,18 @@ class Operation(object):
         """
         pass
 
+    def get_activity_name(self, kwargs):
+        try:
+            return self.activity_name
+        except AttributeError:
+            try:
+                return self.name._proxy____args[0]  # ewww!
+            except AttributeError:
+                raise ImproperlyConfigured(
+                    "Set Operation.activity_name to an ugettext_nooped "
+                    "string or a create_readable call, or override "
+                    "get_activity_name to create a name dynamically")
+
     def on_commit(self, activity):
         """This method is called when the operation executes successfully.
         """

circle/common/views.py

+from sys import exc_info
+
+import logging
+
+from django.template import RequestContext
+from django.shortcuts import render_to_response
+
+from .models import HumanReadableException
+
+logger = logging.getLogger(__name__)
+
+
+def handler500(request):
+    cls, exception, traceback = exc_info()
+    logger.exception("unhandled exception")
+    ctx = {}
+    if isinstance(exception, HumanReadableException):
+        try:
+            ctx['error'] = exception.get_user_text()
+        except:
+            pass
+        else:
+            try:
+                if request.user.is_superuser():
+                    ctx['error'] = exception.get_admin_text()
+            except:
+                pass
+        try:
+            resp = render_to_response("500.html", ctx, RequestContext(request))
+        except:
+            resp = render_to_response("500.html", ctx)
+        resp.status_code = 500
+        return resp

circle/dashboard/forms.py

@@ -131,7 +131,7 @@ class VmCustomizeForm(forms.Form):
                         "button",
                         AnyTag(
                             "i",
-                            css_class="icon-play"
+                            css_class="fa fa-play"
                         ),
                         HTML(" Start"),
                         css_id="vm-create-customized-start",
@@ -163,7 +163,7 @@ class VmCustomizeForm(forms.Form):
             Div(  # cpu priority
                 Div(
                     HTML('<label for="vm-cpu-priority-slider">'
-                         '<i class="icon-trophy"></i> CPU priority'
+                         '<i class="fa fa-trophy"></i> CPU priority'
                          '</label>'),
                     css_class="col-sm-3"
                 ),
@@ -182,7 +182,7 @@ class VmCustomizeForm(forms.Form):
             Div(  # cpu count
                 Div(
                     HTML('<label for="cpu-count-slider">'
-                         '<i class="icon-cogs"></i> CPU count'
+                         '<i class="fa fa-cogs"></i> CPU count'
                          '</label>'),
                     css_class="col-sm-3"
                 ),
@@ -201,7 +201,7 @@ class VmCustomizeForm(forms.Form):
             Div(  # ram size
                 Div(
                     HTML('<label for="ram-slider">'
-                         '<i class="icon-ticket"></i> RAM amount'
+                         '<i class="fa fa-ticket"></i> RAM amount'
                          '</label>'),
                     css_class="col-sm-3"
                 ),
@@ -313,7 +313,7 @@ class VmCustomizeForm(forms.Form):
                                         "a",
                                         AnyTag(
                                             "i",
-                                            css_class="icon-plus-sign",
+                                            css_class="fa fa-plus-circle",
                                         ),
                                         css_id=("vm-create-network-add"
                                                 "-button"),
@@ -556,7 +556,7 @@ class NodeForm(forms.ModelForm):
                                 "button",
                                 AnyTag(
                                     "i",
-                                    css_class="icon-play"
+                                    css_class="fa fa-play"
                                 ),
                                 HTML("Start"),
                                 css_id="node-create-submit",
@@ -958,7 +958,7 @@ class CircleAuthenticationForm(AuthenticationForm):
                     "span",
                     AnyTag(
                         "i",
-                        css_class="icon-user",
+                        css_class="fa fa-user",
                     ),
                     css_class="input-group-addon",
                 ),
@@ -972,7 +972,7 @@ class CircleAuthenticationForm(AuthenticationForm):
                     "span",
                     AnyTag(
                         "i",
-                        css_class="icon-lock",
+                        css_class="fa fa-lock",
                     ),
                     css_class="input-group-addon",
                 ),
@@ -1000,7 +1000,7 @@ class CirclePasswordResetForm(PasswordResetForm):
                     "span",
                     AnyTag(
                         "i",
-                        css_class="icon-envelope",
+                        css_class="fa fa-envelope",
                     ),
                     css_class="input-group-addon",
                 ),

circle/dashboard/models.py

@@ -30,16 +30,17 @@ from django.db.models import (
     DateTimeField, permalink, BooleanField
 )
 from django.db.models.signals import post_save, pre_delete
-from django.template.loader import render_to_string
 from django.templatetags.static import static
-from django.utils.translation import ugettext_lazy as _, override, ugettext
+from django.utils.translation import ugettext_lazy as _
 from django_sshkey.models import UserKey
 
+from jsonfield import JSONField
 from model_utils.models import TimeStampedModel
 from model_utils.fields import StatusField
 from model_utils import Choices
 
 from acl.models import AclBase
+from common.models import HumanReadableObject, create_readable, Encoder
 
 from vm.tasks.agent_tasks import add_keys, del_keys
 
@@ -58,26 +59,39 @@ class Notification(TimeStampedModel):
 
     status = StatusField()
     to = ForeignKey(User)
-    subject = CharField(max_length=128)
-    message = TextField()
+    subject_data = JSONField(null=True, dump_kwargs={"cls": Encoder})
+    message_data = JSONField(null=True, dump_kwargs={"cls": Encoder})
     valid_until = DateTimeField(null=True, default=None)
 
     class Meta:
         ordering = ['-created']
 
     @classmethod
-    def send(cls, user, subject, template, context={}, valid_until=None):
-        try:
-            language = user.profile.preferred_language
-        except:
-            language = None
-        with override(language):
-            context['user'] = user
-            rendered = render_to_string(template, context)
-            subject = ugettext(unicode(subject))
-        return cls.objects.create(to=user, subject=subject, message=rendered,
+    def send(cls, user, subject, template, context,
+             valid_until=None, subject_context=None):
+        hro = create_readable(template, user=user, **context)
+        subject = create_readable(subject, subject_context or context)
+        return cls.objects.create(to=user,
+                                  subject_data=subject.to_dict(),
+                                  message_data=hro.to_dict(),
                                   valid_until=valid_until)
 
+    @property
+    def subject(self):
+        return HumanReadableObject.from_dict(self.subject_data)
+
+    @subject.setter
+    def subject(self, value):
+        self.subject_data = None if value is None else value.to_dict()
+
+    @property
+    def message(self):
+        return HumanReadableObject.from_dict(self.message_data)
+
+    @message.setter
+    def message(self, value):
+        self.message_data = None if value is None else value.to_dict()
+
 
 class Profile(Model):
     user = OneToOneField(User)
@@ -96,8 +110,11 @@ class Profile(Model):
         verbose_name=_("Email notifications"), default=True,
         help_text=_('Whether user wants to get digested email notifications.'))
 
-    def notify(self, subject, template, context={}, valid_until=None):
-        return Notification.send(self.user, subject, template, context,
+    def notify(self, subject, template, context=None, valid_until=None,
+               **kwargs):
+        if context is not None:
+            kwargs.update(context)
+        return Notification.send(self.user, subject, template, kwargs,
                                  valid_until)
 
     def get_absolute_url(self):

circle/dashboard/static/dashboard/bootstrap-slider/slider.css

@@ -146,10 +146,10 @@
     height: 26px;
     margin-top: -4px!important;
     margin-left: -6px !important;
-  
+
      border-radius: 0px;
     -moz-border-radius: 0px;
-    -webkit-border-radius: 0px;    
+    -webkit-border-radius: 0px;
 
     text-shadow: 0 1px 0 #fff;
     background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
@@ -196,10 +196,10 @@
 }
 
 .vm-slider {
-    width: 300px;   
+    width: 300px;
 }
 
 .output {
   padding-left: 10px;
   font-weight: bold;
-} 
+}

circle/dashboard/static/dashboard/dashboard.css

@@ -145,13 +145,13 @@ html {
   background-color: transparent;
 }
 
-.sub-timeline {                                                           
-}   
+.sub-timeline {
+}
 
 .sub-activity {
   margin-left: 30px;
   padding-left: 10px;
-  border-left: 3px solid green;                                           
+  border-left: 3px solid green;
 }
 
 .sub-activity-active {
@@ -235,7 +235,7 @@ html {
 
 #vm-details-rename, #vm-details-h1-name, #vm-details-rename ,
 #node-details-rename, #node-details-rename *, #node-details-h1-name, #node-list-rename, #node-list-rename *#group-details-rename, #group-details-rename *, #group-details-h1-name, #group-list-rename, #group-list-rename * {
- 
+
   display: inline;
 }
 
@@ -302,8 +302,8 @@ html {
 }
 
 /* port add buttons */
-.vm-details-network-port-add .input-group-addon, .vm-details-network-port-add .input-group-btn {                         
-  width: inherit ; 
+.vm-details-network-port-add .input-group-addon, .vm-details-network-port-add .input-group-btn {
+  width: inherit ;
 }
 
 /* vm-create */
@@ -426,12 +426,12 @@ a.hover-black {
   cursor: pointer;
 }
 
-#vm-migrate-node-list {                                                   
-  list-style: none;                                                       
-}                                                                         
-                                                                          
-#vm-migrate-node-list li {                                                
-  padding-bottom: 10px;                                                   
+#vm-migrate-node-list {
+  list-style: none;
+}
+
+#vm-migrate-node-list li {
+  padding-bottom: 10px;
 }
 
 .vm-migrate-node-property {
@@ -446,7 +446,7 @@ a.hover-black {
   /*  fancy stuff
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0,0,0,0.2);
-  border-radius: 8px; 
+  border-radius: 8px;
   */
 }
 
@@ -460,25 +460,25 @@ a.hover-black {
 
 
 /* footer */
-footer {                                                             
-  position: absolute;                                               
-  bottom: 0;                                                        
-  width: 100%;                                                      
-  /* Set the fixed height of the footer here */                     
-  height: 30px;                                                     
-  background-color: #101010;                                        
-  color: white;                                                               
-  font-size: 13px;                                                            
-  padding: 5px 5px 0 5px;                                                     
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);                          
-  text-align: center;                                                     
-}
-                                                                
-footer a, footer a:hover, footer a:visited {                        
-  color: white;                                                     
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 30px;
+  background-color: #101010;
+  color: white;
+  font-size: 13px;
+  padding: 5px 5px 0 5px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+footer a, footer a:hover, footer a:visited {
+  color: white;
   text-decoration: underline;
 }
-  
+
 .template-disk-list {
   list-style: none;
   padding-left: 0;
@@ -513,15 +513,15 @@ footer a, footer a:hover, footer a:visited {
 }
 
 /* template create vm help */
-.alert-new-template {                                                       
-  background: #3071a9;                                                      
-  color: white;                                                             
-  font-size: 22px;                                                          
-}                                                                           
-                                                                            
-.alert-new-template ol {                                                    
+.alert-new-template {
+  background: #3071a9;
+  color: white;
+  font-size: 22px;
+}
+
+.alert-new-template ol {
   margin-left: 25px;
-} 
+}
 
 /* bootstrap tour */
 .tour-template {
@@ -542,11 +542,11 @@ footer a, footer a:hover, footer a:visited {
 }
 
 .index-vm-list-name {
-  display: inline-block; 
-  max-width: 70%; 
-  text-overflow: ellipsis; 
-  white-space: nowrap; 
-  overflow: hidden; 
+  display: inline-block;
+  max-width: 70%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   float: left;
 }
 
@@ -555,11 +555,11 @@ footer a, footer a:hover, footer a:visited {
 }
 
 .index-template-list-name {
-  display: inline-block; 
-  max-width: 50%; 
-  text-overflow: ellipsis; 
-  white-space: nowrap; 
-  overflow: hidden; 
+  display: inline-block;
+  max-width: 50%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   float: left;
 }
 
@@ -574,7 +574,7 @@ footer a, footer a:hover, footer a:visited {
 }
 
 #vm-details-home-description {
-  display: inline-block; 
+  display: inline-block;
   position: relative;
 }
 
@@ -588,8 +588,8 @@ footer a, footer a:hover, footer a:visited {
 }
 
 .vm-details-description-submit {
-  position: absolute; 
-  bottom: 10px; 
+  position: absolute;
+  bottom: 10px;
   right: 20px;
 }
 
@@ -670,25 +670,25 @@ textarea[name="list-new-namelist"] {
 }
 
 /* vm list css */
-.vm-list-selected, .vm-list-selected td {                                 
-  background-color: #e8e8e8 !important;                                   
-}                                                                         
-                                                                          
-.vm-list-selected:hover, .vm-list-selected:hover td {                     
-  background-color: #d0d0d0 !important;                                   
-}                                                                         
-                                                                          
-.vm-list-selected td:first-child {                                        
-  font-weight: bold;                                                      
-}                                                                         
-                                                                          
-.vm-list-table-thin {                                                     
-  width: 10px;                                                            
-}                                                                         
-                                                                          
-.vm-list-table-admin {                                                    
-  width: 130px;                                                           
-} 
+.vm-list-selected, .vm-list-selected td {
+  background-color: #e8e8e8 !important;
+}
+
+.vm-list-selected:hover, .vm-list-selected:hover td {
+  background-color: #d0d0d0 !important;
+}
+
+.vm-list-selected td:first-child {
+  font-weight: bold;
+}
+
+.vm-list-table-thin {
+  width: 10px;
+}
+
+.vm-list-table-admin {
+  width: 130px;
+}
 
 #vm-details-connection-string-copy {
   cursor: pointer;
@@ -705,9 +705,9 @@ textarea[name="list-new-namelist"] {
 }
 
 #group-detail-user-table td:nth-child(2) a,
-#group-detail-perm-table td:nth-child(2) a, 
-#template-access-table td:nth-child(2) a, 
-#vm-access-table td:nth-child(2) a, 
+#group-detail-perm-table td:nth-child(2) a,
+#template-access-table td:nth-child(2) a,
+#vm-access-table td:nth-child(2) a,
 .no-style-link, .no-style-link:hover {
   color: #555 !important;
   text-decoration: none;
@@ -733,7 +733,7 @@ textarea[name="list-new-namelist"] {
   border: 1px solid #ccc;
 }
 
-#group-detail-permissions .selector-available h2, 
+#group-detail-permissions .selector-available h2,
 #group-detail-permissions .selector-chosen h2 {
   margin: 0;
   padding: 5px 8px 5px 8px;
@@ -749,5 +749,5 @@ textarea[name="list-new-namelist"] {
 }
 
 #group-detail-permissions input[type="submit"]{
-  margin-top: -6px;  
+  margin-top: -6px;
 }

circle/dashboard/static/dashboard/dashboard.js

@@ -121,11 +121,11 @@ $(function () {
   $("#dashboard-vm-list").on('click', '.dashboard-vm-favourite', function(e) {
     var star = $(this).children("i");
     var pk = $(this).data("vm");
-    if(star.hasClass("icon-star-empty")) {
-      star.removeClass("icon-star-empty").addClass("icon-star");
+    if(star.hasClass("fa-star-o")) {
+      star.removeClass("fa-star-o").addClass("fa-star");
       star.prop("title", "Unfavourite");
     } else {
-      star.removeClass("icon-star").addClass("icon-star-empty");
+      star.removeClass("fa-star").addClass("fa-star-o");
       star.prop("title", "Mark as favourite");
     }
     $.ajax({
@@ -381,12 +381,12 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
   return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item' +
          (is_last ? ' list-group-item-last' : '') + '">' +      
         '<span class="index-vm-list-name">' + 
-          '<i class="' + icon + '" title="' + _status + '"></i> ' + name +
+          '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + name +
         '</span>' + 
         '<small class="text-muted"> ' + host + '</small>' +
         '<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' +  
-          (fav ? '<i class="icon-star text-primary title-favourite" title="Unfavourite"></i>' :
-          '<i class="icon-star-empty text-primary title-favourite" title="Mark as favorite"></i>' ) +
+          (fav ? '<i class="fa fa-star text-primary title-favourite" title="Unfavourite"></i>' :
+          '<i class="fa fa-star-o text-primary title-favourite" title="Mark as favorite"></i>' ) +
         '</div>' +                                                               
       '<div style="clear: both;"></div>' +                                       
       '</a>';     
@@ -394,14 +394,14 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
 
 function generateGroupHTML(url, name) {
   return '<a href="' + url + '" class="list-group-item real-link">'+
-         '<i class="icon-group"></i> '+ name +
+         '<i class="fa fa-users"></i> '+ name +
          '</a>';
 }
 
 function generateNodeHTML(name, icon, _status, url, is_last) {
   return '<a href="' + url + '" class="list-group-item real-link' + (is_last ? ' list-group-item-last' : '') + '">' +
         '<span class="index-node-list-name">' +
-        '<i class="' + icon + '" title="' + _status + '"></i> ' + name +
+        '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + name +
         '</span>' +
         '<div style="clear: both;"></div>' +
         '</a>';

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/demo.html

@@ -5,8 +5,8 @@
   <script src="js/simple-slider.js"></script>
 
   <link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
-  <link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />  
-  
+  <link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
+
   <!-- These styles are only used for this page, not required for the slider -->
   <style>
   body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

circle/dashboard/static/dashboard/template-list.js

@@ -31,7 +31,7 @@ $(function() {
   ttable.on("aftertablesort", function(event, data) {
     $(".template-list-table thead th i").remove();
 
-    var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right" style="position: absolute;"></i>';
+    var icon_html = '<i class="fa fa-sort-' + (data.direction == "desc" ? "desc" : "asc") + ' pull-right" style="position: absolute;"></i>';
     $(".template-list-table thead th").eq(data.column).append(icon_html);
   });
 

circle/dashboard/static/dashboard/vm-common.js

@@ -4,13 +4,13 @@ $(function() {
 
   /* vm operations */
   $('#ops, #vm-details-resources-disk').on('click', '.operation.btn', function(e) {
-    var icon = $(this).children("i").addClass('icon-spinner icon-spin');
+    var icon = $(this).children("i").addClass('fa-spinner fa-spin');
 
     $.ajax({
       type: 'GET',
       url: $(this).attr('href'),
       success: function(data) {
-        icon.removeClass("icon-spinner icon-spin");
+        icon.removeClass("fa-spinner fa-spin");
         $('body').append(data);
         $('#confirmation-modal').modal('show');
         $('#confirmation-modal').on('hidden.bs.modal', function() {
@@ -53,7 +53,7 @@ $(function() {
 
           /* if there are messages display them */
           if(data.messages && data.messages.length > 0) {
-            addMessage(data.messages.join("<br />"), "danger");
+            addMessage(data.messages.join("<br />"), data.success ? "success" : "danger");
           }
         }
         else {

circle/dashboard/static/dashboard/vm-create.js

@@ -288,11 +288,11 @@ function vmCustomizeLoaded() {
 
 
 function vmCreateNetworkLabel(pk, name, managed) {
-  return '<span id="vlan-' + pk + '" class="label label-' +  (managed ? 'primary' : 'default')  + '"><i class="icon-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="icon-remove-sign"></i></a></span> ';
+  return '<span id="vlan-' + pk + '" class="label label-' +  (managed ? 'primary' : 'default')  + '"><i class="fa fa-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="fa fa-times-circle"></i></a></span> ';
 }
 
 
 function vmCreateDiskLabel(pk, name) {
   var style = "float: left; margin: 5px 5px 5px 0;";
-  return '<span id="disk-' + pk + '" class="label label-primary" style="' + style + '"><i class="icon-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="icon-remove-sign"></i></a></span> ';
+  return '<span id="disk-' + pk + '" class="label label-primary" style="' + style + '"><i class="fa fa-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="fa fa-times-circle"></i></a></span> ';
 }

circle/dashboard/static/dashboard/vm-details.js

@@ -4,24 +4,24 @@ $(function() {
     checkNewActivity(false, 1);
   }
   $('a[href="#activity"]').click(function(){
-    $('a[href="#activity"] i').addClass('icon-spin');
+    $('a[href="#activity"] i').addClass('fa-spin');
     checkNewActivity(false, 1);
   });
 
   /* save resources */
   $('#vm-details-resources-save').click(function() {
-    $('i.icon-save', this).removeClass("icon-save").addClass("icon-refresh icon-spin");
+    $('i.fa-floppy-o', this).removeClass("fa-floppy-o").addClass("fa-refresh fa-spin");
     var vm = $(this).data("vm");
     $.ajax({
       type: 'POST',
       url: "/dashboard/vm/" + vm + "/op/resources_change/", 
       data: $('#vm-details-resources-form').serialize(),
       success: function(data, textStatus, xhr) {
-        $("#vm-details-resources-save i").removeClass('icon-refresh icon-spin').addClass("icon-save");
+        $("#vm-details-resources-save i").removeClass('fa-refresh fa-spin').addClass("fa-floppy-o");
         $('a[href="#activity"]').trigger("click");
       },
       error: function(xhr, textStatus, error) {
-        $("#vm-details-resources-save i").removeClass('icon-refresh icon-spin').addClass("icon-save");
+        $("#vm-details-resources-save i").removeClass('fa-refresh fa-spin').addClass("fa-floppy-o");
         if (xhr.status == 500) {
           addMessage("500 Internal Server Error", "danger");
         } else {
@@ -76,13 +76,13 @@ $(function() {
     var eye = $(this).children("#vm-details-pw-eye");
     
     eye.tooltip("destroy")
-    if(eye.hasClass("icon-eye-open")) {
-      eye.removeClass("icon-eye-open").addClass("icon-eye-close");
+    if(eye.hasClass("fa-eye")) {
+      eye.removeClass("fa-eye").addClass("fa-eye-slash");
       input.prop("type", "text");
       input.focus();
       eye.prop("title", "Hide password");
     } else {
-      eye.removeClass("icon-eye-close").addClass("icon-eye-open");
+      eye.removeClass("fa-eye-slash").addClass("fa-eye");
       input.prop("type", "password");
       eye.prop("title", "Show password");
     }
@@ -269,7 +269,7 @@ $(function() {
   $("#getScreenshotButton").click(function() {
     var vm = $(this).data("vm-pk");
     var ct = $("#vm-console-screenshot");
-    $("i", this).addClass("icon-spinner icon-spin");
+    $("i", this).addClass("fa-spinner fa-spin");
     $(this).prop("disabled", true);
     ct.slideDown();
     var img = $("img", ct).prop("src", '/dashboard/vm/' + vm + '/screenshot/');
@@ -280,7 +280,7 @@ $(function() {
   // see: http://stackoverflow.com/a/3877079/1112653
   $("#vm-console-screenshot img").load(function(e) {
     $("#getScreenshotButton").prop("disabled", false)
-    .find("i").removeClass("icon-spinner icon-spin");
+    .find("i").removeClass("fa-spinner fa-spin");
 
   });
     
@@ -320,7 +320,7 @@ function removePort(data) {
 function decideActivityRefresh() {
   var check = false;
   /* if something is still spinning */
-  if($('.timeline .activity:first i:first').hasClass('icon-spin'))
+  if($('.timeline .activity:first i:first').hasClass('fa-spin'))
     check = true;
   /* if there is only one activity */
   if($('#activity-timeline div[class="activity"]').length < 2)
@@ -360,7 +360,7 @@ function checkNewActivity(only_status, runs) {
         $("[title]").tooltip();
       }
 
-      $("#vm-details-state i").prop("class", data['icon']);
+      $("#vm-details-state i").prop("class", "fa " + data['icon']);
       $("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
       if(data['status'] == "RUNNING") {
         $("[data-target=#_console]").attr("data-toggle", "pill").attr("href", "#console").parent("li").removeClass("disabled");
@@ -382,7 +382,7 @@ function checkNewActivity(only_status, runs) {
           1000 + Math.exp(runs * 0.05)
         );
       }
-      $('a[href="#activity"] i').removeClass('icon-spin');
+      $('a[href="#activity"] i').removeClass('fa-spin');
     },
     error: function() {
 

circle/dashboard/static/dashboard/vm-list.js

@@ -171,7 +171,7 @@ $(function() {
     
     $(".vm-list-table thead th i").remove();
 
-    var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right"></i>';
+    var icon_html = '<i class="fa fa-sort-' + (data.direction == "desc" ? "desc" : "asc") + ' pull-right"></i>';
     $(".vm-list-table thead th").eq(data.column).append(icon_html);
   });
 

circle/dashboard/static/dashboard/vm-tour.js

@@ -17,13 +17,13 @@ function createTemplateTour() {
                   "<div class='popover-navigation'>" +
                     "<div class='btn-group'>" +
                       "<button class='btn btn-sm btn-default' data-role='prev'>" +
-                        '<i class="icon-chevron-left"></i> ' + gettext("Prev") + "</button> " +
+                        '<i class="fa fa-chevron-left"></i> ' + gettext("Prev") + "</button> " +
                       "<button class='btn btn-sm btn-default' data-role='next'>" +
-                        gettext("Next") + ' <i class="icon-chevron-right"></i></button> ' +
+                        gettext("Next") + ' <i class="fa fa-chevron-right"></i></button> ' +
                       "<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> " +
                     "</div>" +
                     "<button class='btn btn-sm btn-default' data-role='end'>" +
-                      gettext("End tour") + ' <i class="icon-flag-checkered"></i></button>' +
+                      gettext("End tour") + ' <i class="fa fa-flag-checkered"></i></button>' +
                   "</div>" +
                 "</div>",
   });
@@ -99,7 +99,7 @@ function createTemplateTour() {
 
   ttour.addStep({
     element: "#ops",
-    title: '<i class="icon-play"></i> ' + gettext("Deploy"),
+    title: '<i class="fa fa-play"></i> ' + gettext("Deploy"),
     placement: "left",
     backdrop: true,
     content: gettext("Deploy the virtual machine."),
@@ -123,7 +123,7 @@ function createTemplateTour() {
 
   ttour.addStep({
     element: "#ops",
-    title: '<i class="icon-save"></i> ' + gettext("Save as"),
+    title: '<i class="fa fa-floppy-o"></i> ' + gettext("Save as"),
     placement: "left",
     backdrop: true,
     content: gettext('Press the "Save as template" button and wait until the activity finishes.'),

circle/dashboard/static/template.css

+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+  padding-bottom: 20px;
+  margin-bottom: 30px; /* sticky footer */
+}
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+/* Set widths on the navbar form inputs since otherwise they're 100% wide */
+.navbar-form input[type="text"],
+.navbar-form input[type="password"] {
+  width: 180px;
+}
+
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* values for 45px tall navbar */
+.navbar {
+  min-height: 45px;
+}
+
+.navbar-brand {
+  height: 45px;
+  padding: 12.5px 12.5px;
+}
+
+.navbar-toggle {
+  margin-top: 5.5px;
+  margin-bottom: 5.5px;
+}
+
+.navbar-form {
+  margin-top: 5.5px;
+  margin-bottom: 5.5px;
+}
+
+.navbar-btn {
+  margin-top: 5.5px;
+  margin-bottom: 5.5px;
+}
+
+.navbar-btn.btn-sm {
+  margin-top: 7.5px;
+  margin-bottom: 7.5px;
+}
+.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 */
+  .container > :first-child {
+    margin-top: 20px;
+  }
+  /* Remove padding from wrapping element since we kick in the grid classes here */
+  .body-content {
+    padding: 0;
+  }
+
+  .navbar-nav > li > a {
+    padding-top: 12.5px;
+    padding-bottom: 12.5px;
+  }
+
+}
+.no-margin {
+  margin: 0!important;
+}
+
+.list-group .list-group-footer {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.big {
+  font-size: 2em;
+}
+.bigbig {
+  font-size: 3em;
+}
+/* small buttons for tags, copied from Bootstraps input-sm, bnt-sm */
+.btn-tags, .btn-traits {
+  padding: 3px 6px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.input-tags, .input-tratis {
+  height: 22px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+/* font awesome font */
+.font-awesome-font {
+  font-family: "FontAwesome";
+}
+
+.nojs-dropdown-menu
+{
+  position:absolute;
+  display:none;
+  z-index: 1;
+}
+
+
+.nojs-dropdown-toggle:focus + .nojs-dropdown-menu
+{
+  display: block;
+}
+
+.nojs-dropdown-toggle:focus
+{
+  outline:none;
+}
+
+.nojs-dropdown-menu:hover
+{
+  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;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 30px;
+  background-color: #101010;
+  color: white;
+  font-size: 13px;
+  padding: 5px 5px 0 5px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+footer a, footer a:hover, footer a:visited {
+  color: white;
+  text-decoration: underline;
+}
+
+.table-sorting {
+  display: none;
+}
+
+#notifications-button {
+  margin: 0;
+}
+
+/* 2px border bottom for all bootstrap tables */
+.table thead>tr>th {
+  border-bottom: 1px;
+}
+
+.badge-pulse {
+  -webkit-animation-name: 'pulse_animation';
+  -webkit-animation-duration: 1000ms;
+  -webkit-transform-origin: 70% 70%;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+}
+
+@-webkit-keyframes pulse_animation {
+  0% { -webkit-transform: scale(1); }
+  30% { -webkit-transform: scale(1); }
+  40% { -webkit-transform: scale(1.18); }
+  50% { -webkit-transform: scale(1); }
+  60% { -webkit-transform: scale(1); }
+  70% { -webkit-transform: scale(1.08); }
+  80% { -webkit-transform: scale(1); }
+  100% { -webkit-transform: scale(1); }
+}
+
+.btn-toolbar {
+  margin-bottom: 5px;
+}

circle/dashboard/templates/base.html

-{% load i18n %}<!DOCTYPE html>
+{% load i18n %}
+<!DOCTYPE html>
 <html lang="{{lang}}">
   <head>
     <meta charset="utf-8">
@@ -9,83 +10,73 @@
 
     <title>{% block title %}{% block title-page %}{% endblock %} | {% block title-site %}CIRCLE{% endblock %}{% endblock %}</title>
 
-    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
-    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
-    <script src="{{ STATIC_URL}}dashboard/bootstrap-slider/bootstrap-slider.js"></script>
-    <link rel="stylesheet" href="{{ STATIC_URL }}dashboard/bootstrap-slider/slider.css"/>
-    <link href="{{ STATIC_URL }}dashboard/bootstrap-tour.min.css" rel="stylesheet">
-    <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
-    <script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
-    <script src="{{ STATIC_URL }}jsi18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ STATIC_URL }}/template.css">
+
+    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    {% block extra_link %}{% endblock %}
+
+    {% block extra_css %}{% endblock %}
   </head>
 
   <body>
     <div class="navbar navbar-inverse navbar-fixed-top">
-        <div class="navbar-header">  
-          <a class="navbar-brand" href="{% url "dashboard.index" %}" style="padding: 10px 15px;">
-            <img src="{{ STATIC_URL}}dashboard/img/logo.png" style="height: 25px;"/>
-          </a>
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-        </div><!-- .navbar-header -->
-        <div class="collapse navbar-collapse">
-          <ul class="nav navbar-nav pull-right">
-            <li class="dropdown" id="notification-button">                            
-              <a href="{% url "dashboard.views.notifications" %}" style="color: white; font-size: 12px;" class="dropdown-toggle" data-toggle="dropdown">
-                {% trans "Notifications" %}{% if NEW_NOTIFICATIONS_COUNT > 0 %} <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>{% endif %}
-              </a>                                                                    
-              <ul class="dropdown-menu notification-messages">                        
-                  <li>{% trans "Loading..." %}</li>                                   
-              </ul>                                                                   
-            </li>               
-          </ul>
-          {% if user.is_authenticated and user.pk %}
-            <a class="navbar-brand pull-right" href="{% url "logout" %}?next={% url "login" %}" style="color: white; font-size: 10px;"><i class="icon-signout icon-sign-out"></i> {% trans "Log out" %}</a>
-            <a class="navbar-brand pull-right" href="{% url "dashboard.views.profile-preferences" %}" 
-              title="{% trans "User profile" %}" style="color: white; font-size: 10px;">
-              <i class="icon-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="icon-globe"></i> {% trans "Network" %}</a>
-              <a class="navbar-brand pull-right" href="/admin/" style="color: white; font-size: 10px;"><i class="icon-cogs"></i> {% trans "Admin" %}</a>
-            {% endif %}
-          {% else %}
-            <a class="navbar-brand pull-right" href="{% url "login" %}?next={% url "dashboard.index" %}" style="color: white; font-size: 10px;"><i class="icon-sign-in"></i> {% trans "Log in " %}</a>
-          {% endif %}
-        </div><!-- .collapse .navbar-collapse -->
+      <div class="navbar-header">
+        {% block navbar-brand %}{% endblock %}
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+      </div><!-- .navbar-header -->
+      <div class="collapse navbar-collapse">
+        {% block navbar %}{% endblock %}
+      </div><!-- .collapse .navbar-collapse -->
     </div><!-- navbar navbar-inverse navbar-fixed-top -->
 
     <div class="container">
       {% block messages %}
-      <div class="messagelist">
-      {% if messages %}
-      {% for message in messages %}
-      <div class="alert
-          {% if message.tags %} alert-{% if message.tags == "error" %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}">
+        <div class="messagelist">
+        {% if messages %}
+          {% for message in messages %}
+            <div class="alert
+              {% if message.tags %} alert-{% if message.tags == "error" %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}">
           {{ message|safe }}
-      </div>
-      {% endfor %}
-      {% endif %}
+            </div>
+          {% endfor %}
+        {% endif %}
       </div>
       {% endblock messages %}
       {% block content %}
         <h1 class="alert alert-error">Please override "content" block.</h1>
       {% endblock %}
     </div> <!-- /container -->
+
     <footer>
-      <a href="#">{% trans "Legal notice" %}</a> | <a href="#">{% trans "Policy" %}</a> | <a href="#">{% trans "Help" %}</a> |
+      <a href="#">{% trans "Legal notice" %}</a> |
+      <a href="#">{% trans "Policy" %}</a> |
+      <a href="#">{% trans "Help" %}</a> |
       <a href="#">{% trans "Support" %}</a>
       <span class="pull-right">{{ COMPANY_NAME }}</span>
     </footer>
   </body>
-{% block extra_js %}
-{% endblock %}
+
+  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+  <script src="{{ STATIC_URL }}jsi18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
+
+  {% block extra_script %}
+  {% endblock %}
+
+  {% block extra_js %}
+  {% endblock %}
+
+  {% block extra_etc %}
+  {% endblock %}
 </html>

circle/dashboard/templates/crispy_forms/anytag.html

-<{{ tag.tag }} {% if tag.css_id %}id="{{ tag.css_id }}"{% endif %} 
+<{{ tag.tag }} {% if tag.css_id %}id="{{ tag.css_id }}"{% endif %}
     {% if tag.css_class %}class="{{ tag.css_class }}"{% endif %} {{ tag.flat_attrs|safe }}>
        {{ fields|safe }}
 </{{ tag.tag }}>

circle/dashboard/templates/dashboard/_base.html

@@ -10,7 +10,7 @@
             {{ title }}
           {% else %}
             {% trans "Confirmation" %}
-          {% endif %}  
+          {% endif %}
         </h3>
       </div>
       <div class="panel-body">

circle/dashboard/templates/dashboard/_disk-list-element.html

 {% load i18n %}
 {% load sizefieldtags %}
 
-<i class="{% if d.is_downloading %}icon-refresh icon-spin{% else %}icon-file{% if d.failed %}" style="color: #d9534f;{% endif %}{% endif %}"></i> 
-{{ d.name }} (#{{ d.id }}) - 
+<i class="fa {% if d.is_downloading %}fa-refresh fa-spin{% else %}fa-file{% if d.failed %}" style="color: #d9534f;{% endif %}{% endif %}"></i>
+{{ d.name }} (#{{ d.id }}) -
 {% if not d.is_downloading %}
   {% if not d.failed %}
     {% if d.size %}{{ d.size|filesize }}{% endif %}
@@ -10,10 +10,10 @@
   <div class="label label-danger"{% if user.is_superuser %} title="{{ d.get_latest_activity_result }}"{% endif %}>{% trans "failed" %}</div>
   {% endif %}
 {% else %}<span class="disk-list-disk-percentage" data-disk-pk="{{ d.pk }}">{{ d.get_download_percentage }}</span>%{% endif %}
-<a href="{% url "dashboard.views.disk-remove" pk=d.pk %}?next={{ request.path }}" 
+<a href="{% url "dashboard.views.disk-remove" pk=d.pk %}?next={{ request.path }}"
   data-disk-pk="{{ d.pk }}" class="btn btn-xs btn-danger pull-right disk-remove"
   {% if not long_remove %}title="{% trans "Remove" %}"{% endif %}
   >
-  <i class="icon-remove"></i>{% if long_remove %} {% trans "Remove" %}{% endif %}
+  <i class="fa fa-times"></i>{% if long_remove %} {% trans "Remove" %}{% endif %}
 </a>
 <div style="clear: both;"></div>

circle/dashboard/templates/dashboard/_modal.html

 {% load i18n %}
-<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog"> 
-  <div class="modal-dialog"> 
-    <div class="modal-content"> 
-      <div class="modal-body">  
+<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
         {% if template %}
           {% include template %}
         {% else %}
@@ -11,6 +11,6 @@
         <div class="clearfix"></div>
       </div>
       <div class="clearfix"></div>
-    </div><!-- /.modal-content --> 
-  </div><!-- /.modal-dialog --> 
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
 </div>

circle/dashboard/templates/dashboard/_notifications-timeline.html

 {% load i18n %}
 {% for n in notifications %}
-  <li class="notification-message">
+  <li class="notification-message" id="msg-{{n.id}}">
     <span class="notification-message-subject">
-      {% if n.status == "new" %}<i class="icon-envelope-alt"></i> {% endif %}
-      {{ n.subject }}
+      {% if n.status == "new" %}<i class="fa fa-envelope-alt"></i> {% endif %}
+      {{ n.subject.get_user_text }}
     </span>
-    <span class="notification-message-date pull-right">
+    <span class="notification-message-date pull-right" title="{{n.created}}">
       {{ n.created|timesince }}
     </span>
     <div style="clear: both;"></div>
     <div class="notification-message-text">
-      {{ n.message|safe }}
+      {{ n.message.get_user_text|safe }}
     </div>
   </li>
 {% empty %}

circle/dashboard/templates/dashboard/_template-create.html

 {% load i18n %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 {% if leases < 1 %}
   <div class="alert alert-warning">

circle/dashboard/templates/dashboard/_vm-create-1.html

@@ -6,51 +6,51 @@
   <div class="vm-create-template">
     <div class="vm-create-template-summary">
       {{ t.name }}
-      <span class="pull-right"><i class="icon-{{ t.os_type }}"></i> {{ t.system }}</span>
+      <span class="pull-right"><i class="fa fa-{{ t.os_type }}"></i> {{ t.system }}</span>
     </div>
     <div class="vm-create-template-details">
       <ul>
         <li>
-          <i class="icon-gears"></i> {% trans "CPU" %}
+          <i class="fa fa-gears"></i> {% trans "CPU" %}
           <div class="progress pull-right">
-            <div class="progress-bar progress-bar-success" role="progressbar" 
+            <div class="progress-bar progress-bar-success" role="progressbar"
               aria-valuenow="{{ t.num_cores }}" aria-valuemin="0" aria-valuemax="8" style="width: 80%">
               <span class="progress-bar-text">{{ t.num_cores }} cores</span>
             </div>
           </div>
         </li>
         <li>
-          <i class="icon-ticket"></i> {% trans "Memory" %}
+          <i class="fa fa-ticket"></i> {% trans "Memory" %}
           <div class="progress pull-right">
-            <div class="progress-bar progress-bar-info" role="progressbar" 
-              aria-valuenow="{{ t.ram_size }}" aria-valuemin="0" aria-valuemax="4096" 
+            <div class="progress-bar progress-bar-info" role="progressbar"
+              aria-valuenow="{{ t.ram_size }}" aria-valuemin="0" aria-valuemax="4096"
               style="width: 80%">
               <span class="progress-bar-text">{{ t.ram_size }} MB</span>
             </div>
           </div>
         </li>
         <li>
-          <i class="icon-file"></i> {% trans "Disks" %} 
+          <i class="fa fa-file"></i> {% trans "Disks" %}
           <span style="float: right; text-align: right;">
             {% for d in t.disks.all %}{{ d.name }} ({% if d.size %}{{ d.size|filesize }}{% endif %}){% if not forloop.last %}, {% endif %}{% endfor %}
           </span>
           <div style="clear: both;"></div>
         </li>
         <li>
-          <i class="icon-globe"></i> {% trans "Network" %}
+          <i class="fa fa-globe"></i> {% trans "Network" %}
           <span style="float: right;">
             {% for i in t.interface_set.all %}{{ i.vlan.name }}{% if not forloop.last %}, {% endif %}{% endfor %}
           </span>
         </li>
         <li>
-          <i class="icon-tag"></i> {% trans "Type" %}: {{ t.lease.name }}
+          <i class="fa fa-tag"></i> {% trans "Type" %}: {{ t.lease.name }}
           <span style="float: right;">
-            <i class="icon-pause"></i> {{ t.lease.get_readable_suspend_time }}
-            <i class="icon-remove"></i> {{ t.lease.get_readable_delete_time }}
+            <i class="fa fa-pause"></i> {{ t.lease.get_readable_suspend_time }}
+            <i class="fa fa-times"></i> {{ t.lease.get_readable_delete_time }}
           </span>
         </li>
         <li>
-          <i class="icon-hand-right"></i> {% trans "Description" %}:
+          <i class="fa fa-hand-right"></i> {% trans "Description" %}:
           <span style="float: right; max-width: 350px;">
             {{ t.description }}
           </span>
@@ -59,13 +59,13 @@
       </ul>
       <div style="margin-top: 20px; padding: 0 15px; width: 100%">
         {% if perms.vm_set_resources %}
-        <a class="btn btn-primary btn-xs customize-vm" data-template-pk="{{ t.pk }}" href="{% url "dashboard.views.vm-create" %}?template={{ t.pk }}"><i class="icon-wrench"></i> {% trans "Customize" %}</a>
+        <a class="btn btn-primary btn-xs customize-vm" data-template-pk="{{ t.pk }}" href="{% url "dashboard.views.vm-create" %}?template={{ t.pk }}"><i class="fa fa-wrench"></i> {% trans "Customize" %}</a>
         {% endif %}
         <form class="pull-right text-right" method="POST" action="{% url "dashboard.views.vm-create" %}">
           {% csrf_token %}
           <input type="hidden" name="template" value="{{ t.pk }}"/>
           <button class="btn btn-success btn-xs vm-create-start" data-template-pk="{{ t.pk }}" type="submit">
-            <i class="icon-play"></i> {% trans "Start" %}
+            <i class="fa fa-play"></i> {% trans "Start" %}
           </button>
         </form>
         <div style="clear: both;"></div>
@@ -131,11 +131,11 @@
     width: 100%;
     color: white;
     /* outline */
-    text-shadow:  
+    text-shadow:
       -1px -1px 0 #000,
       1px -1px 0 #000,
       -1px 1px 0 #000,
-      1px 1px 0 #000;  
+      1px 1px 0 #000;
     font-size: 10px;
   }
 </style>

circle/dashboard/templates/dashboard/base.html

@@ -2,3 +2,60 @@
 {% load i18n %}
 
 {% block title-site %}Dashboard | CIRCLE{% endblock %}
+
+
+{% block extra_link %}
+  <link rel="stylesheet" href="{{ STATIC_URL }}dashboard/bootstrap-slider/slider.css"/>
+  <link href="{{ STATIC_URL }}dashboard/bootstrap-tour.min.css" rel="stylesheet">
+  <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
+{% endblock %}
+
+
+{% block navbar-brand %}
+  <a class="navbar-brand" href="{% url "dashboard.index" %}" style="padding: 10px 15px;">
+    <img src="{{ STATIC_URL}}dashboard/img/logo.png" style="height: 25px;"/>
+  </a>
+{% endblock %}
+
+{% block navbar %}
+
+<ul class="nav navbar-nav pull-right">
+  <li class="dropdown" id="notification-button">
+    <a href="{% url "dashboard.views.notifications" %}" style="color: white; font-size: 12px;"
+      class="dropdown-toggle" data-toggle="dropdown">
+      {% trans "Notifications" %}
+      {% if NEW_NOTIFICATIONS_COUNT > 0 %}
+        <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>
+      {% endif %}
+    </a>
+    <ul class="dropdown-menu notification-messages">
+        <li>{% trans "Loading..." %}</li>
+    </ul>
+  </li>
+</ul>
+
+{% if user.is_authenticated and user.pk %}
+  <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" %}" title="{% trans "User profile" %}" 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={% url "dashboard.index" %}" style="color: white; font-size: 10px;"><i class="fa fa-sign-in"></i> {% trans "Log in " %}</a>
+{% endif %}
+
+{% endblock %}
+
+
+{% block extra_script %}
+  <script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
+  <script src="{{ STATIC_URL}}dashboard/bootstrap-slider/bootstrap-slider.js"></script>
+  <script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
+{% endblock %}

circle/dashboard/templates/dashboard/confirm/ajax-delete.html

 {% load i18n %}
-<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog"> 
-  <div class="modal-dialog"> 
-    <div class="modal-content"> 
-      <div class="modal-body">  
+<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
         {% if text %}
           {{ text|safe }}
         {% else %}
@@ -12,13 +12,13 @@
         {% endif %}
         <br />
         <div class="pull-right" style="margin-top: 15px;">
-          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button> 
+          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
           <button id="confirmation-modal-button" type="button" class="btn btn-danger"
           {% if disable_submit %}disabled{% endif %}
-            >{% trans "Delete" %}</button> 
+            >{% trans "Delete" %}</button>
         </div>
         <div class="clearfix"></div>
       </div>
-    </div><!-- /.modal-content --> 
-  </div><!-- /.modal-dialog --> 
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
 </div>

circle/dashboard/templates/dashboard/confirm/ajax-node-flush.html

 {% load i18n %}
-<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog"> 
-  <div class="modal-dialog"> 
-    <div class="modal-content"> 
-      <div class="modal-body">  
-      
+<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
+
           {% if text %}
             {{ text }}
           {% else %}
@@ -14,7 +14,7 @@
         <div class="pull-right">
 		<form action="{% url "dashboard.views.flush-node" pk=node.pk %}?next={{next}}" method="POST">
             {% csrf_token %}
-            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button> 
+            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
 	    <input type="hidden" name="flush" value=""/>
             <button class="btn btn-warning">{% trans "Yes" %}</button>
           </form>
@@ -22,6 +22,6 @@
 	<div class="clearfix"></div>
 
       </div>
-    </div><!-- /.modal-content --> 
-  </div><!-- /.modal-dialog --> 
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
 </div>

circle/dashboard/templates/dashboard/confirm/ajax-node-status.html

 {% load i18n %}
-<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog"> 
-  <div class="modal-dialog"> 
-    <div class="modal-content"> 
-      <div class="modal-body">  
-      
+<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
+
           {% if text %}
             {{ text }}
           {% else %}
@@ -14,7 +14,7 @@
         <div class="pull-right">
           <form action="{% url "dashboard.views.status-node" pk=object.pk %}" method="POST">
             {% csrf_token %}
-            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button> 
+            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
 	    <input type="hidden" name="change_status" value=""/>
             <button class="btn btn-warning">{% blocktrans with status=status %}Yes, {{status}}{% endblocktrans %}</button>
           </form>
@@ -22,6 +22,6 @@
 	<div class="clearfix"></div>
 
       </div>
-    </div><!-- /.modal-content --> 
-  </div><!-- /.modal-dialog --> 
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
 </div>

circle/dashboard/templates/dashboard/confirm/ajax-remove.html

 {% load i18n %}
-<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog"> 
-  <div class="modal-dialog"> 
-    <div class="modal-content"> 
-      <div class="modal-body">  
+<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
         {% if text %}
           {{ text }}
         {% else %}
@@ -12,11 +12,11 @@
         {% endif %}
         <br />
         <div class="pull-right" style="margin-top: 15px;">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
-          <button id="confirmation-modal-button" type="button" class="btn btn-warning">Remove</button> 
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <button id="confirmation-modal-button" type="button" class="btn btn-warning">Remove</button>
         </div>
         <div class="clearfix"></div>
       </div>
-    </div><!-- /.modal-content --> 
-  </div><!-- /.modal-dialog --> 
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
 </div>

circle/dashboard/templates/dashboard/confirm/base-delete.html

@@ -10,7 +10,7 @@
             {{ title }}
           {% else %}
             {% trans "Delete confirmation" %}
-          {% endif %}  
+          {% endif %}
         </h3>
       </div>
       <div class="panel-body">

circle/dashboard/templates/dashboard/confirm/mass-delete.html

 {% load i18n %}
-<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog"> 
-  <div class="modal-dialog"> 
-    <div class="modal-content"> 
-      <div class="modal-body">  
+<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
         {% trans "Are you sure you want to delete the following objects?" %}<br />
         {% for o in objects %}
-          <strong>{{ o }}</strong>{% if not forloop.last %},{% endif %} 
-        {% endfor %}  
+          <strong>{{ o }}</strong>{% if not forloop.last %},{% endif %}
+        {% endfor %}
         <div class="pull-right" style="margin-top: 40px;">
-          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button> 
-          <button id="confirmation-modal-button" type="button" class="btn btn-danger">{% trans "Delete" %}</button> 
+          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
+          <button id="confirmation-modal-button" type="button" class="btn btn-danger">{% trans "Delete" %}</button>
         </div>
         <div class="clearfix"></div>
       </div>
-    </div><!-- /.modal-content --> 
-  </div><!-- /.modal-dialog --> 
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
 </div>

circle/dashboard/templates/dashboard/confirm/node-flush.html

@@ -9,7 +9,7 @@
             {{ title }}
           {% else %}
             Flush confirmation
-          {% endif %}  
+          {% endif %}
         </h3>
       </div>
       <div class="panel-body">

circle/dashboard/templates/dashboard/confirm/node-status.html

@@ -10,7 +10,7 @@
             {{ title }}
           {% else %}
             {% trans "Status changing confirmation" %}
-          {% endif %}  
+          {% endif %}
         </h3>
       </div>
       <div class="panel-body">
@@ -25,7 +25,7 @@
           <form action="" method="POST">
             {% csrf_token %}
             <a class="btn btn-default">{% trans "Cancel" %}</a>
-            <button type="button" class="btn btn-default" data-dismiss="modal"></button> 
+            <button type="button" class="btn btn-default" data-dismiss="modal"></button>
 	    <input type="hidden" name="change_status" value=""/>
             <button class="btn btn-warning">{% blocktrans with status=status %}Yes, {{status}}{% endblocktrans %}</button>
           </form>

circle/dashboard/templates/dashboard/group-detail.html

@@ -6,20 +6,20 @@
 <div class="body-content">
   <div class="page-header">
     <div class="pull-right" style="padding-top: 15px;">
-      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs group-details-rename-button"><i class="icon-pencil"></i></a>
-      <a title="{% trans "Delete" %}" data-group-pk="{{ group.pk }}" class="btn btn-default btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="icon-trash"></i></a>
-      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs group-details-help-button"><i class="icon-question"></i></a>
+      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs group-details-rename-button"><i class="fa fa-pencil"></i></a>
+      <a title="{% trans "Delete" %}" data-group-pk="{{ group.pk }}" class="btn btn-default btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="fa fa-trash"></i></a>
+      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs group-details-help-button"><i class="fa fa-question"></i></a>
     </div>
    <h1>
       <div id="group-details-rename">
         <form action="" method="POST" id="group-details-rename-form">
           {% csrf_token %}
-          <input id="group-details-rename-name" class="form-control" name="new_name" type="text" value="{{ group.name }}"/> 
+          <input id="group-details-rename-name" class="form-control" name="new_name" type="text" value="{{ group.name }}"/>
           <button type="submit" id="group-details-rename-submit" class="btn">{% trans "Rename" %}</button>
         </form>
       </div>
       <div id="group-details-h1-name">
-        {{ group.name }} 
+        {{ group.name }}
         {% if group.groupprofile.org_id %}
         <small>{{group.groupprofile.org_id}}</small>
         {% endif %}
@@ -62,32 +62,32 @@
         {% for i in users %}
 	  <tr>
             <td>
-              <i class="icon-user"></i>
+              <i class="fa fa-user"></i>
             </td>
             <td>
               <a href="{% url "dashboard.views.profile" username=i.username %}" title="{{ i.username }}"
                 >{% include "dashboard/_display-name.html" with user=i show_org=True %}</a>
             </td>
 	    <td>
-              <a data-group_pk="{{ group.pk }}" data-member_pk="{{i.pk}}" href="{% url "dashboard.views.remove-user" member_pk=i.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+              <a data-group_pk="{{ group.pk }}" data-member_pk="{{i.pk}}" href="{% url "dashboard.views.remove-user" member_pk=i.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a>
             </td>
           </tr>
         {% endfor %}
         {% for i in future_users %}
 	  <tr>
             <td>
-              <i class="icon-user text-muted"></i>
+              <i class="fa fa-user text-muted"></i>
             </td>
             <td> {{ i.org_id }} </td>
 	    <td>
               <a href="{% url "dashboard.views.remove-future-user" member_org_id=i.org_id group_pk=group.pk %}"
                   class="real-link btn-link btn-xs">
-                  <i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+                  <i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a>
             </td>
           </tr>
         {% endfor %}
         <tr>
-          <td><i class="icon-plus"></i></td>
+          <td><i class="fa fa-plus"></i></td>
           <td colspan="2">
             <input type="text" class="form-control" name="list-new-name"
             placeholder="{% trans "Name of user" %}">
@@ -95,7 +95,7 @@
         </tr>
   </tbody>
   </table>
-  <textarea name="list-new-namelist" class="form-control" 
+  <textarea name="list-new-namelist" class="form-control"
     placeholder="{% trans "Add multiple users at once (one identifier per line)." %}"></textarea>
   <div class="form-actions">
     <button type="submit" class="btn btn-success">{% trans "Save" %}</button>
@@ -115,7 +115,7 @@
     {% for i in acl.users %}
     <tr>
       <td>
-        <i class="icon-user"></i>
+        <i class="fa fa-user"></i>
       </td>
       <td>
         <a href="{% url "dashboard.views.profile" username=i.user.username %}" title="{{ i.user.username }}"
@@ -128,14 +128,14 @@
         {% endfor %}
         </select>
       </td>
-      <td class="user-remove"><a data-group_pk="{{ group.pk }}" data-member_pk="{{i.user.pk }}" href="{% url "dashboard.views.remove-acluser" member_pk=i.user.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td>
+      <td class="user-remove"><a data-group_pk="{{ group.pk }}" data-member_pk="{{i.user.pk }}" href="{% url "dashboard.views.remove-acluser" member_pk=i.user.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a></td>
     </tr>
     {% endfor %}
-    
+
     {% for i in acl.groups %}
       <tr>
         <td>
-          <i class="icon-group"></i>
+          <i class="fa fa-group"></i>
         </td>
         <td>
           <a href="{% url "dashboard.views.group-detail" pk=i.group.pk %}">{{ i.group }}</a>
@@ -147,12 +147,12 @@
           {% endfor %}
           </select>
         </td>
-        <td class="user-remove"><a data-group_pk="{{ i.pk }}"data-member_pk="{{i.group.pk }}" href="{% url "dashboard.views.remove-aclgroup" member_pk=i.group.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+        <td class="user-remove"><a data-group_pk="{{ i.pk }}"data-member_pk="{{i.group.pk }}" href="{% url "dashboard.views.remove-aclgroup" member_pk=i.group.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a>
         </td>
       </tr>
       {% endfor %}
       <tr>
-        <td><i class="icon-plus"></i></td>
+        <td><i class="fa fa-plus"></i></td>
         <td>
           <input type="text" class="form-control" name="perm-new-name"
           placeholder="{% trans "Name of group or user" %}">

circle/dashboard/templates/dashboard/group-list.html

@@ -18,13 +18,13 @@
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-group"></i> Your groups</h3>
+        <h3 class="no-margin"><i class="fa fa-group"></i> Your groups</h3>
       </div>
       <div class="panel-body group-list-group-control">
         <p>
           <strong>Group actions</strong>
           <button id="group-list-group-select-all" class="btn btn-info btn-xs">Select all</button>
-          <a id="group-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
+          <a id="group-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Discard</a>
         </p>
 	</div>
 	<div id="table_container">

circle/dashboard/templates/dashboard/group-list/column-actions.html

-   <a data-group-pk="{{ record.pk }}" class="btn btn-danger btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=record.pk %}?next={{ request.path }}"><i class="icon-trash"></i></a>
+   <a data-group-pk="{{ record.pk }}" class="btn btn-danger btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-trash"></i></a>

circle/dashboard/templates/dashboard/group-list/column-admin.html

 <a id="group-list-rename-button" class="btn btn-default btn-xs" title data-original-title="Rename">
-  <i class="icon-pencil"></i>
+  <i class="fa fa-pencil"></i>
   </a>
-  
+

circle/dashboard/templates/dashboard/group-list/column-name.html

-{% load i18n %} 
+{% load i18n %}
 
 <div id="group-list-rename">
   <form action="{% url "dashboard.views.group-detail" pk=record.pk %}" method="POST" id="group-list-rename-form">
     {% csrf_token %}
-    <input id="group-list-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ record.name }}"/> 
+    <input id="group-list-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ record.name }}"/>
     <button type="submit" class="group-list-rename-submit btn btn-sm">{% trans "Rename" %}</button>
   </form>
 </div>

circle/dashboard/templates/dashboard/group-list/column-username.html

-{% load i18n %} 
+{% load i18n %}
 {{ record.username }}

circle/dashboard/templates/dashboard/group-list/column-users.html

-{% load i18n %} 
+{% load i18n %}
 
 <div id="group-list-column-users">
   <a class="real-link" href="{% url "dashboard.views.group-detail" pk=record.pk %}">{{ record.user_set.count }}</a>

circle/dashboard/templates/dashboard/group-list/test-one.html

-            
+
             <tr>
               <!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
               <td>
@@ -10,10 +10,10 @@
               <td>1 month</td>
               <td>
                 <a class="btn btn-default btn-xs" title data-original-title="Migrate">
-                  <i class="icon-truck"></i>
+                  <i class="fa fa-truck"></i>
                 </a>
                 <a class="btn btn-default btn-xs" title data-original-title="Rename">
-                  <i class="icon-pencil"></i>
+                  <i class="fa fa-pencil"></i>
                 </a>
                 <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
                   data-content='
@@ -22,7 +22,7 @@
                   '>Connect</a>
               </td>
               <td>
-                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover" 
+                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover"
                   data-content='
                   <h4>Quick details</h4>
                   <dl class="dl-horizontal">
@@ -39,13 +39,13 @@
               </td>
               <td>
                 <div class="btn-group">
-                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
                   <ul class="nojs-dropdown-menu dropdown-menu" role="menu">
-                    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-                    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-                    <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+                    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+                    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+                    <li><a href="#"><i class="fa fa-times"></i> Discard</a></li>
                   </ul>
                 </div>
               </td>
-            
+
             </tr>

circle/dashboard/templates/dashboard/index-files.html

 <div class="panel panel-default">
   <div class="panel-heading">
     <ul class="list-inline pull-right">
-      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
-      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
+      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="fa fa-dashboard"></i></a></li>
+      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="fa fa-list"></i></a></li>
     </ul>
-    <h3 class="no-margin"><i class="icon-briefcase"></i> Files
+    <h3 class="no-margin"><i class="fa fa-briefcase"></i> Files
     </h3>
   </div>
   <div class="list-group" id="vm-list-view">
     <a href="#" class="list-group-item">
-      <i class="icon-file"></i> ALMA <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file"></i> ALMA <div class="pull-right"><i class="fa fa-download-alt "></i></div>
     </a>
     <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
     </a>
     <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
     </a>
     <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
     </a>
     <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
     </a>
     <div href="#" class="list-group-item list-group-footer text-right">
       <p>
-        <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> show more  </a>
-        <a class="btn btn-success btn-xs"><i class="icon-upload-alt"></i> upload  </a>
+        <a class="btn btn-primary btn-xs"><i class="fa fa-chevron-circle-right"></i> show more  </a>
+        <a class="btn btn-success btn-xs"><i class="fa fa-upload-alt"></i> upload  </a>
       </p>
     </div>
   </div>

circle/dashboard/templates/dashboard/index-groups.html

@@ -2,16 +2,16 @@
 <div class="panel panel-default">
   <div class="panel-heading">
     <div class="pull-right toolbar">
-      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of groups that you have access to." %}"><i class="icon-info-sign"></i></span>
-    </div> 
-    <h3 class="no-margin"><i class="icon-group"></i> {% trans "Groups" %}</h3>
+      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of groups that you have access to." %}"><i class="fa fa-info-circle"></i></span>
+    </div>
+    <h3 class="no-margin"><i class="fa fa-group"></i> {% trans "Groups" %}</h3>
   </div>
   <div class="list-group" id="vm-list-view">
     <div id="dashboard-group-list">
       {% for i in groups %}
       <a href="{% url "dashboard.views.group-detail" pk=i.pk %}" class="list-group-item real-link
       {% if forloop.last and groups|length < 5 %} list-group-item-last{% endif %}">
-        <i class="icon-group"></i> {{ i.name }}
+        <i class="fa fa-group"></i> {{ i.name }}
       </a>
       {% endfor %}
     </div>
@@ -20,12 +20,12 @@
         <div class="col-sm-6 col-xs-6 input-group input-group-sm">
           <input id="dashboard-group-search-input" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
           <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary"><i class="fa fa-search"></i></button>
           </div>
         </div>
         <div class="col-sm-6 text-right">
           <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.group-list" %}">
-            <i class="icon-chevron-sign-right"></i> 
+            <i class="fa fa-chevron-circle-right"></i>
 	    {% if more_groups > 0 %}
               {% blocktrans count more=more_groups %}
                 <strong>{{ more }}</strong>  more
@@ -33,10 +33,10 @@
                 <strong>{{ more }}</strong>  more
               {% endblocktrans %}
             {% else %}
-              {% trans "list" %} 
+              {% trans "list" %}
             {% endif %}
           </a>
-          <a class="btn btn-success btn-xs group-create" href="{% url "dashboard.views.group-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %} </a>
+          <a class="btn btn-success btn-xs group-create" href="{% url "dashboard.views.group-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %} </a>
         </div>
       </div>
     </div>

circle/dashboard/templates/dashboard/index-nodes.html

@@ -3,14 +3,14 @@
   <div class="panel-heading">
     <div class="pull-right toolbar">
       <div class="btn-group">
-        <a href="#index-graph-view" data-index-box="node" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
-        <a href="#index-list-view" data-index-box="node" class="btn btn-default btn-xs disabled"><i class="icon-list"></i></a>
+        <a href="#index-graph-view" data-index-box="node" class="btn btn-default btn-xs"><i class="fa fa-dashboard"></i></a>
+        <a href="#index-list-view" data-index-box="node" class="btn btn-default btn-xs disabled"><i class="fa fa-list"></i></a>
 
       </div>
-      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of compute nodes, also called worker nodes or hypervisors, which run the virtual machines." %}"><i class="icon-info-sign"></i></span>
+      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of compute nodes, also called worker nodes or hypervisors, which run the virtual machines." %}"><i class="fa fa-info-circle"></i></span>
     </div>
     <h3 class="no-margin">
-      <i class="icon-sitemap"></i> {% trans "Nodes" %}
+      <i class="fa fa-sitemap"></i> {% trans "Nodes" %}
     </h3>
   </div >
   <div class="list-group" id="node-list-view">
@@ -19,7 +19,7 @@
       <a href="{{ i.get_absolute_url }}" class="list-group-item real-link
         {% if forloop.last and nodes|length < 5 %} list-group-item-last{% endif %}">
         <span class="index-node-list-name">
-          <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
+          <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
            {{ i.name }}
         </span>
         <div style="clear: both;"></div>
@@ -31,24 +31,24 @@
         <div class="col-sm-6 col-xs-6 input-group input-group-sm">
           <input id="dashboard-node-search-input" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
           <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary" title="search"><i class="fa fa-search"></i></button>
           </div>
         </div>
         <div class="col-sm-6 text-right">
           <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.node-list" %}">
-            <i class="icon-chevron-sign-right"></i>
+            <i class="fa fa-chevron-circle-right"></i>
             {% if more_nodes > 0 %}
                 {% blocktrans with count=more_nodes %}<strong>{{count}}</strong>  more{% endblocktrans %}
             {% else %}
                 {% trans "list" %}
             {% endif %}
           </a>
-          <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %}</a>
+          <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %}</a>
         </div>
       </div>
     </div>
   </div>
- 
+
   <div class="panel-body" id="node-graph-view" style="display: none">
     <p class="pull-right">  <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="60" data-height="60" data-readOnly="true" value="{% widthratio node_num.running sum_node_num 100 %}"></p>
     <p><span class="big"><big>{{ node_num.running }}</big> running </span>
@@ -56,7 +56,7 @@
       <ul class="list-inline" id="dashboard-node-taglist">
         {% for i in nodes %}
         <a href="{{ i.get_absolute_url }}" class="label {{i.get_status_label}}" >
-        <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i> {{ i.name }}</a>
+        <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i> {{ i.name }}</a>
         {% endfor %}
       </ul>
 
@@ -65,10 +65,10 @@
         <div class="col-sm-6 text-right pull-right">
          {% if more_nodes >= 0  %}
           <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.node-list" %}">
-            <i class="icon-chevron-sign-right"></i> {% blocktrans with count=more_nodes %}<strong>{{count}}</strong>  more{% endblocktrans %}
+            <i class="fa fa-chevron-circle-right"></i> {% blocktrans with count=more_nodes %}<strong>{{count}}</strong>  more{% endblocktrans %}
           </a>
          {% endif %}
-         <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %}</a>
+         <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %}</a>
         </div>
 </div>
 </div>

circle/dashboard/templates/dashboard/index-templates.html

@@ -2,9 +2,9 @@
 <div class="panel panel-default">
   <div class="panel-heading">
     <span class="btn btn-default btn-xs infobtn pull-right" title="{% trans "List of VM templates that are available for you. You can create new ones from scratch or customize existing ones (preferred)." %}">
-      <i class="icon-info-sign"></i>
+      <i class="fa fa-info-circle"></i>
     </span>
-    <h3 class="no-margin"><i class="icon-puzzle-piece"></i> {% trans "Templates" %}
+    <h3 class="no-margin"><i class="fa fa-puzzle-piece"></i> {% trans "Templates" %}
     </h3>
   </div>
   <div class="list-group" id="dashboard-template-list">
@@ -13,10 +13,10 @@
       <a href="{% url "dashboard.views.template-detail" pk=t.pk %}" class="list-group-item
         {% if forloop.last and templates|length < 5 %} list-group-item-last{% endif %}">
         <span class="index-template-list-name">
-          <i class="icon-{{ t.os_type }}"></i> {{ t.name }} 
+          <i class="fa fa-{{ t.os_type }}"></i> {{ t.name }}
         </span>
         <small class="text-muted index-template-list-system">{{ t.system }}</small>
-        <div class="pull-right vm-create" data-template="{{ t.pk }}"><i title="{% trans "Start vm instance" %}" class="icon-play"></i></div>
+        <div class="pull-right vm-create" data-template="{{ t.pk }}"><i title="{% trans "Start vm instance" %}" class="fa fa-play"></i></div>
         <div class="clearfix"></div>
       </a>
       {% empty %}
@@ -30,10 +30,10 @@
     <div href="#" class="list-group-item list-group-footer text-right">
       <p>
         <a href="{% url "dashboard.views.template-list" %}" class="btn btn-primary btn-xs">
-          <i class="icon-chevron-sign-right"></i> {% trans "show all" %}
+          <i class="fa fa-chevron-circle-right"></i> {% trans "show all" %}
         </a>
         <a href="{% url "dashboard.views.template-choose" %}" class="btn btn-success btn-xs template-choose">
-          <i class="icon-plus-sign"></i> {% trans "new" %}
+          <i class="fa fa-plus-circle"></i> {% trans "new" %}
         </a>
       </p>
     </div>

circle/dashboard/templates/dashboard/index-vm.html

@@ -3,13 +3,13 @@
   <div class="panel-heading">
     <div class="pull-right toolbar">
       <div class="btn-group">
-        <a href="#index-graph-view" data-index-box="vm" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
-        <a href="#index-list-view" data-index-box="vm" class="btn btn-default btn-xs disabled"><i class="icon-list"></i></a>
+        <a href="#index-graph-view" data-index-box="vm" class="btn btn-default btn-xs"><i class="fa fa-dashboard"></i></a>
+        <a href="#index-list-view" data-index-box="vm" class="btn btn-default btn-xs disabled"><i class="fa fa-list"></i></a>
       </div>
-      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="icon-info-sign"></i></span>
+      <span class="btn btn-default btn-xs infobtn" 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="icon-desktop"></i> {% trans "Virtual machines" %}
+      <i class="fa fa-desktop"></i> {% trans "Virtual machines" %}
     </h3>
   </div>
   <div class="list-group" id="vm-list-view">
@@ -18,15 +18,15 @@
       <a href="{{ i.get_absolute_url }}" class="list-group-item
         {% if forloop.last and instances|length < 5 %} list-group-item-last{% endif %}">
         <span class="index-vm-list-name">
-          <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
+          <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
           {{ i.name }}
         </span>
         <small class="text-muted"> {{ i.primary_host.hostname }}</small>
         <div class="pull-right dashboard-vm-favourite" data-vm="{{ i.pk }}">
           {% if i.fav %}
-            <i class="icon-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
+            <i class="fa fa-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
           {% else %}
-            <i class="icon-star-empty text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
+            <i class="fa fa-star-o text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
           {% endif %}
         </div>
       <div style="clear: both;"></div>
@@ -47,12 +47,12 @@
         <div class="col-sm-6 col-xs-6 input-group input-group-sm">
           <input id="dashboard-vm-search-input" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
           <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary"><i class="fa fa-search"></i></button>
           </div>
         </div>
         <div class="col-sm-6 text-right">
           <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.vm-list" %}">
-            <i class="icon-chevron-sign-right"></i>
+            <i class="fa fa-chevron-circle-right"></i>
             {% if more_instances > 0 %}
             {% blocktrans count counter=more_instances %}
               <strong>{{ counter }}</strong>  more
@@ -63,7 +63,7 @@
               {% trans "list" %}
             {% endif %}
           </a>
-          <a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %}</a>
+          <a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %}</a>
         </div>
       </div>
     </div>
@@ -77,7 +77,7 @@
         {% for vm in running_vms %}
         <li style="display: inline-block; padding: 2px;">
           <a href="{{vm.get_absolute_url}}" title="{{vm.primary_host.get_fqdn}}"  class="label label-success">
-            <i class="{{vm.get_status_icon}}"></i> {{vm.name}}
+            <i class="fa {{vm.get_status_icon}}"></i> {{vm.name}}
           </a>
         </li>
         {% endfor %}
@@ -87,13 +87,13 @@
     <div class="clearfix"></div>
     <div>
       <a style="float: right; margin-top: 17px;" href="{% url "dashboard.views.vm-list" %}" class="btn btn-primary btn-xs">
-        <i class="icon-chevron-sign-right"></i> 
+        <i class="fa fa-chevron-circle-right"></i>
         {% blocktrans count counter=instances|length|add:more_instances %}
           <strong>{{ counter }}</strong> machine total
           {% plural %}
           <strong>{{ counter }}</strong> machines total
         {% endblocktrans %}
-      </a> 
+      </a>
       <p class="big text-warning">{% blocktrans with count=stopped_vm_num %}<big>{{ count }}</big> stopped{% endblocktrans %}</p>
     </div>
   </div>

circle/dashboard/templates/dashboard/index.html

@@ -46,5 +46,5 @@
 
 {% block extra_js %}
 <script src="{{ STATIC_URL }}dashboard/vm-create.js"></script>
-<script src="{{ STATIC_URL }}dashboard/node-create.js"></script>   
+<script src="{{ STATIC_URL }}dashboard/node-create.js"></script>
 {% endblock %}

circle/dashboard/templates/dashboard/instanceactivity_detail.html

@@ -5,7 +5,12 @@
 <div class="body-content">
   <div class="page-header">
     <h1>
-        {{ object.instance.name }}: {{ object.get_readable_name }}
+        {{ object.instance.name }}:
+            {% if user.is_superuser %}
+            {{object.readable_name.get_admin_text}}
+            {% else %}
+            {{object.readable_name.get_user_text}}
+            {% endif %}
     </h1>
   </div>
   <div class="row">
@@ -53,7 +58,7 @@
 
 
             <dt>{% trans "result" %}</dt>
-            <dd><textarea class="form-control">{{object.result}}</textarea></dd>
+            <dd><textarea class="form-control">{% if user.is_superuser %}{{object.result.get_admin_text}}{% else %}{{object.result.get_admin_text}}{% endif %}</textarea></dd>
 
             <dt>{% trans "resultant state" %}</dt>
             <dd>{{object.resultant_state|default:'n/a'}}</dd>

circle/dashboard/templates/dashboard/lease-create.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 {% block title-page %}{% trans "Create lease" %}{% endblock %}
 
@@ -11,7 +11,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.template-list" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-time"></i> {% trans "Create lease" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-time"></i> {% trans "Create lease" %}</h3>
       </div>
       <div class="panel-body">
         {% with form=form %}

circle/dashboard/templates/dashboard/lease-edit.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 {% block title-page %}{% trans "Edit lease" %}{% endblock %}
 
@@ -10,7 +10,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.template-list" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-time"></i> {% trans "Edit lease" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-time"></i> {% trans "Edit lease" %}</h3>
       </div>
       <div class="panel-body">
         {% with form=form %}

circle/dashboard/templates/dashboard/modal-wrapper.html

-<div class="modal fade" id="create-modal" tabindex="-1" role="dialog"> 
-  <div class="modal-dialog"> 
-    <div class="modal-content"> 
+<div class="modal fade" id="create-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
       {% if box_title and ajax_title %}
-      <div class="modal-header"> 
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
-        <h4 class="modal-title">{{ box_title }}</h4> 
-      </div> 
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">{{ box_title }}</h4>
+      </div>
       {% endif %}
-      <div class="modal-body">  
+      <div class="modal-body">
         {% include template %}
-      </div> 
-      <!--<div class="modal-footer"> 
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
-        <button type="button" class="btn btn-primary">Save changes</button> 
+      </div>
+      <!--<div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
       </div>-->
-    </div><!-- /.modal-content --> 
-  </div><!-- /.modal-dialog --> 
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
 </div>

circle/dashboard/templates/dashboard/node-add-trait.html

@@ -16,7 +16,7 @@
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
-	      <h3 class="no-margin"><i class="icon-plus"></i> {% trans "Add Trait" %}</h3>
+	      <h3 class="no-margin"><i class="fa fa-plus"></i> {% trans "Add Trait" %}</h3>
       </div>
       <div class="panel-body">
         {% with form=form %}

circle/dashboard/templates/dashboard/node-detail.html

@@ -7,23 +7,23 @@
 <div class="body-content">
   <div class="page-header">
      <div class="pull-right" style="padding-top: 15px;">
-      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs node-details-rename-button"><i class="icon-pencil"></i></a>
-      <a title="{% trans "Flush" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-flush" href="{% url "dashboard.views.flush-node" pk=node.pk %}"><i class="icon-cloud-upload"></i></a>
-      <a title="{% trans "Enable" %}" style="display:{% if node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-check"></i></a>
-      <a title="{% trans "Disable" %}" style="display:{% if not node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-ban-circle"></i></a>
-      <a title="{% trans "Delete" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}"><i class="icon-trash"></i></a>
-      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs node-details-help-button"><i class="icon-question"></i></a>
+      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs node-details-rename-button"><i class="fa fa-pencil"></i></a>
+      <a title="{% trans "Flush" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-flush" href="{% url "dashboard.views.flush-node" pk=node.pk %}"><i class="fa fa-cloud-upload"></i></a>
+      <a title="{% trans "Enable" %}" style="display:{% if node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="fa fa-check"></i></a>
+      <a title="{% trans "Disable" %}" style="display:{% if not node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="fa fa-ban"></i></a>
+      <a title="{% trans "Delete" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}"><i class="fa fa-trash-o"></i></a>
+      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs node-details-help-button"><i class="fa fa-question"></i></a>
     </div>
-   <h1>	  
+   <h1>
       <div id="node-details-rename">
        <form action="" method="POST" id="node-details-rename-form">
          {% csrf_token %}
-         <input id="node-details-rename-name" class="form-control" name="new_name" type="text" value="{{ node.name }}"/> 
+         <input id="node-details-rename-name" class="form-control" name="new_name" type="text" value="{{ node.name }}"/>
          <button type="submit" id="node-details-rename-submit" class="btn">{% trans "Rename" %}</button>
        </form>
       </div>
-      <div id="node-details-h1-name">    
-      {{ node.name }} 
+      <div id="node-details-h1-name">
+      {{ node.name }}
       </div>
     </h1>
     <div class="node-details-help js-hidden">
@@ -66,19 +66,19 @@
         <ul class="nav nav-pills panel-heading">
           <li class="active">
             <a href="#home" data-toggle="pill" class="text-center">
-              <i class="icon-compass icon-2x"></i><br>
+              <i class="fa fa-compass fa-2x"></i><br>
               {% trans "Home" %}</a></li>
           <li>
             <a href="#resources" data-toggle="pill" class="text-center">
-              <i class="icon-tasks icon-2x"></i><br>
+              <i class="fa fa-tasks fa-2x"></i><br>
               {% trans "Resources" %}</a></li>
 	  <li>
             <a href="#virtualmachines" data-toggle="pill" class="text-center">
-              <i class="icon-desktop icon-2x"></i><br>
+              <i class="fa fa-desktop fa-2x"></i><br>
               {% trans "Virtual Machines" %}</a></li>
  	  <li>
             <a href="#activity" data-toggle="pill" class="text-center">
-              <i class="icon-time icon-2x"></i><br>
+              <i class="fa fa-clock-o fa-2x"></i><br>
               {% trans "Activity" %}</a></li>
 	</ul>
 

circle/dashboard/templates/dashboard/node-detail/_activity-timeline.html

@@ -3,19 +3,26 @@
 {% for a in activities %}
 <div class="activity" data-activity-id="{{ a.pk }}">
   <span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
-  <i class="{% if not a.finished %} icon-refresh icon-spin {% else %}icon-plus{% endif %}"></i>
+  <i class="fa {% if not a.finished %}fa-refresh fa-spin {% else %}fa-plus{% endif %}"></i>
 </span>
-<strong>{{ a.get_readable_name }}</strong>
+<strong>{% if user.is_superuser %}
+    {{ a.readable_name.get_admin_text }}
+    {% else %}
+    {{ a.readable_name.get_user_text }}{% endif %}</strong>
 {{ a.started|date:"Y-m-d H:i" }}, {{ a.user }}
   {% if a.children.count > 0 %}
     <div class="sub-timeline">
       {% for s in a.children.all %}
       <div data-activity-id="{{ s.pk }}" class="sub-activity{% if s.has_failed %} sub-activity-failed{% endif %}">
-        {{ s.get_readable_name }} - 
+    {% if user.is_superuser %}
+    {{ s.readable_name.get_admin_text }}
+    {% else %}
+    {{ s.readable_name.get_user_text }}{% endif %}
+         &ndash;
         {% if s.finished %}
           {{ s.finished|time:"H:i:s" }}
         {% else %}
-          <i class="icon-refresh icon-spin" class="sub-activity-loading-icon"></i>
+          <i class="fa fa-refresh fa-spin" class="sub-activity-loading-icon"></i>
         {% endif %}
         {% if s.has_failed %}
           <div class="label label-danger">{% trans "failed" %}</div>

circle/dashboard/templates/dashboard/node-detail/home.html

@@ -8,7 +8,7 @@
           {% for t in node.traits.all %}
             <div class="label label-success label-tag" style="display: inline-block">
               {{ t }}
-	      <a data-trait-pk="{{ t.pk }}" href="#" class="node-details-remove-trait"><i class="icon-remove"></i></a>
+	      <a data-trait-pk="{{ t.pk }}" href="#" class="node-details-remove-trait"><i class="fa fa-times"></i></a>
             </div>
           {% endfor %}
         {% else %}
@@ -25,7 +25,7 @@
   <form action="{% url "dashboard.views.node-addtrait" node.pk %}" method="POST">
   {% csrf_token %}
   {% crispy trait_form %}
-  </form>     
+  </form>
     </div><!-- id:node-details-traits -->
   </div>
   <div class="col-md-8">

circle/dashboard/templates/dashboard/node-detail/vm.html

@@ -18,7 +18,7 @@
         $("#node-detail-pane").addClass("col-md-12");
     });
     </script>
-    
+
 {% block extra_js %}
 <script src="{{ STATIC_URL}}dashboard/vm-list.js"></script>
 {% endblock %}

circle/dashboard/templates/dashboard/node-list.html

@@ -10,7 +10,7 @@
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Compute nodes" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Compute nodes" %}</h3>
       </div>
 	<div id="table_container">
 	

circle/dashboard/templates/dashboard/node-list/column-actions.html

 {% load i18n %}
 <div class="btn-group">
-	<button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+	<button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
   <ul class="dropdown-menu nojs-dropdown-toogle" role="menu">
- <li><a href="#" class="node-details-rename-button"><i class="icon-pencil"></i> {% trans "Rename" %}</a></li>
- <li><a data-node-pk="{{ record.pk }}" class="real-link node-flush" href="{% url "dashboard.views.flush-node" pk=record.pk %}"><i class="icon-cloud-upload"></i>{% trans "Flush" %}</a>
-    <li><a style={% if record.enabled %}"display:none"{% else %}"display:block"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-check"></i>{% trans "Enable" %}</a>
-  <a style={% if record.enabled %}"display:block"{% else %}"display:none"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i>{% trans "Disable" %}</a></li>
-  <li><a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-trash"></i>{% trans "Delete" %}</a></li>
+ <li><a href="#" class="node-details-rename-button"><i class="fa fa-pencil"></i> {% trans "Rename" %}</a></li>
+ <li><a data-node-pk="{{ record.pk }}" class="real-link node-flush" href="{% url "dashboard.views.flush-node" pk=record.pk %}"><i class="fa fa-cloud-upload"></i>{% trans "Flush" %}</a>
+    <li><a style={% if record.enabled %}"display:none"{% else %}"display:block"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-check"></i>{% trans "Enable" %}</a>
+  <a style={% if record.enabled %}"display:block"{% else %}"display:none"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-times"></i>{% trans "Disable" %}</a></li>
+  <li><a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-trash"></i>{% trans "Delete" %}</a></li>
     </ul>
 </div>

circle/dashboard/templates/dashboard/node-list/column-admin.html

 {% load i18n %}
 <a class="btn btn-default btn-xs" title="{% trans "Flush" %}">
-<i class="icon-cloud-upload"></i>
+<i class="fa fa-cloud-upload"></i>
 </a>
 <a id="node-list-rename-button" class="btn btn-default btn-xs" title="{% trans "Rename" %}">
-  <i class="icon-pencil"></i>
+  <i class="fa fa-pencil"></i>
 </a>

circle/dashboard/templates/dashboard/node-list/column-monitor.html

 {% load sizefieldtags %}
 {% load i18n %}
 
-<i class="icon-gears"></i> {% trans "CPU" %}
+<i class="fa fa-gears"></i> {% trans "CPU" %}
  <div class="progress pull-right">
   <div class="progress-bar progress-bar-success" role="progressbar"
     aria-valuenow="{{ record.cpu_usage|stringformat:"f" }}"
@@ -17,7 +17,7 @@
   </div>
  </div>
 <br>
-<i class="icon-ticket"></i> {% trans "Memory" %}
+<i class="fa fa-ticket"></i> {% trans "Memory" %}
  <div class="progress pull-right">
   <div class="progress-bar" role="progressbar"
     aria-valuenow="{{ record.ram_usage|stringformat:"f" }}"

circle/dashboard/templates/dashboard/node-list/column-name.html

-{% load i18n %} 
+{% load i18n %}
 
 <div id="node-list-rename">
   <form action="{% url "dashboard.views.node-detail" pk=record.pk %}" method="POST" id="node-list-rename-form">
     {% csrf_token %}
-    <input id="node-list-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ record.name }}"/> 
+    <input id="node-list-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ record.name }}"/>
     <button type="submit" class="node-list-rename-submit btn btn-sm">{% trans "Rename" %}</button>
   </form>
 </div>

circle/dashboard/templates/dashboard/node-list/column-vm.html

-{% load i18n %} 
+{% load i18n %}
 
 <div id="node-list-column-vm">
   <a class="real-link" href="{% url "dashboard.views.node-detail" pk=record.pk %}#virtualmachines">{{ value }}</a>

circle/dashboard/templates/dashboard/node-list/test-one.html

-            
+
             <tr>
               <!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
               <td>
@@ -10,10 +10,10 @@
               <td>1 month</td>
               <td>
                 <a class="btn btn-default btn-xs" title data-original-title="Migrate">
-                  <i class="icon-truck"></i>
+                  <i class="fa fa-truck"></i>
                 </a>
                 <a class="btn btn-default btn-xs" title data-original-title="Rename">
-                  <i class="icon-pencil"></i>
+                  <i class="fa fa-pencil"></i>
                 </a>
                 <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
                   data-content='
@@ -22,7 +22,7 @@
                   '>Connect</a>
               </td>
               <td>
-                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover" 
+                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover"
                   data-content='
                   <h4>Quick details</h4>
                   <dl class="dl-horizontal">
@@ -39,13 +39,13 @@
               </td>
               <td>
                 <div class="btn-group">
-                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
                   <ul class="nojs-dropdown-menu dropdown-menu" role="menu">
-                    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-                    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-                    <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+                    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+                    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+                    <li><a href="#"><i class="fa fa-times"></i> Discard</a></li>
                   </ul>
                 </div>
               </td>
-            
+
             </tr>

circle/dashboard/templates/dashboard/notifications.html

@@ -6,7 +6,7 @@
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Notifications" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Notifications" %}</h3>
       </div>
       <div class="panel-body">
         <ul style="list-style: none;">

circle/dashboard/templates/dashboard/notifications/ownership-accepted.html

-{%load i18n%}
-{%blocktrans with instance=instance.name user=user.name%}
-Your ownership offer of {{instance}} has been accepted by {{user}}.
-{%endblocktrans%}

circle/dashboard/templates/dashboard/notifications/ownership-offer.html

-{%load i18n%}
-{%blocktrans with instance=instance.name user=user.name%}
-{{user}} offered you to take the ownership of his/her virtual machine
-called {{instance}}.{%endblocktrans%} 
-<a href="{{token}}" class="btn btn-success btn-small">{%trans "Accept"%}</a>

circle/dashboard/templates/dashboard/notifications/vm-destroyed.html

-{%load i18n%}
-{%blocktrans with instance=instance.name url=instance.get_absolute_url %}
-Your instance <a href="{{url}}">{{instance}}</a> has been destroyed due to expiration.
-{%endblocktrans%} 

circle/dashboard/templates/dashboard/notifications/vm-expiring.html

-{%load i18n%}
-{%blocktrans with instance=instance.name url=instance.get_absolute_url suspend=instance.time_of_suspend delete=instance.time_of_delete %}
-Your instance <a href="{{url}}">{{instance}}</a> is going to expire.
-It will be suspended at {{suspend}} and destroyed at {{delete}}.
-{%endblocktrans%} 
-
-{%blocktrans with token=token url=instance.get_absolute_url %}
-Please, either <a href="{{token}}">renew</a> or <a href="{{url}}">destroy</a>
-it now.
-{%endblocktrans%} 

circle/dashboard/templates/dashboard/notifications/vm-suspended.html

-{%load i18n%}
-{%blocktrans with instance=instance.name url=instance.get_absolute_url %}
-Your instance <a href="{{url}}">{{instance}}</a> has been suspended due to expiration.
-{%endblocktrans%} 

circle/dashboard/templates/dashboard/operate.html

@@ -20,7 +20,7 @@ Do you want to do the following operation on <a href="{{url}}">{{obj}}</a>:
     <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">
-        {% if opview.icon %}<i class="icon-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
+        {% if opview.icon %}<i class="fa fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
       </button>
   </div>
 </form>

circle/dashboard/templates/dashboard/profile.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 {% block title-page %}{{ profile.username}} | {% trans "Profile" %}{% endblock %}
 
@@ -12,7 +12,7 @@
       <div class="panel-heading">
         <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.index" %}">{% trans "Back" %}</a>
         <h3 class="no-margin">
-          <i class="icon-user"></i> 
+          <i class="fa fa-user"></i>
           {% include "dashboard/_display-name.html" with user=profile show_org=True %}
         </h3>
       </div>
@@ -27,7 +27,7 @@
             <p>{% trans "First name" %}: {{ profile.first_name|default:"-" }}</p>
             <p>{% trans "Last name" %}: {{ profile.last_name|default:"-" }}</p>
             <p>
-              {% if perm_email %} 
+              {% if perm_email %}
                 {% trans "Email address" %}: {{ profile.email }}
               {% endif %}
             </p>
@@ -47,7 +47,7 @@
         {% if perm_group_list %}
           <hr />
           <h4>
-            <i class="icon-group"></i> {% trans "Groups" %}
+            <i class="fa fa-group"></i> {% trans "Groups" %}
           </h4>
           <ul class="dashboard-profile-group-list">
           {% for g in groups %}
@@ -61,14 +61,14 @@
         <hr />
 
         <h4>
-          <i class="icon-desktop"></i>
+          <i class="fa fa-desktop"></i>
           {% trans "Virtual machines owned by the user" %} ({{ instances_owned|length }})
         </h4>
         <ul class="dashboard-profile-vm-list">
         {% for i in instances_owned %}
           <li>
             <a href="{{ i.get_absolute_url }}">
-              <i class="icon-li {{ i.get_status_icon }}"></i>
+              <i class="fa fa-li {{ i.get_status_icon }}"></i>
               {{ i }}
             </a>
           </li>
@@ -82,14 +82,14 @@
         <hr />
 
         <h4>
-          <i class="icon-desktop"></i> 
+          <i class="fa fa-desktop"></i>
           {% trans "Virtual machines with access" %} ({{ instances_with_access|length }})
         </h4>
         <ul class="dashboard-profile-vm-list">
         {% for i in instances_with_access %}
           <li>
             <a href="{{ i.get_absolute_url }}">
-              <i class="icon-li {{ i.get_status_icon }}"></i>
+              <i class="fa fa-li {{ i.get_status_icon }}"></i>
               {{ i }}
             </a>
           </li>

circle/dashboard/templates/dashboard/profile_form.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 {% load render_table from django_tables2 %}
 
 {% block title-page %}{% trans "Profile" %}{% endblock %}
@@ -11,10 +11,10 @@
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <a class="pull-right btn btn-default btn-xs" 
+        <a class="pull-right btn btn-default btn-xs"
           href="{% url "dashboard.views.profile" username=object.user.username %}">
           {% trans "Go to my profile" %}</a>
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "My profile" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "My profile" %}</h3>
       </div>
       <div class="panel-body">
         <div class="row">
@@ -34,7 +34,7 @@
             <fieldset>
               <legend>{% trans "Current avatar" %}</legend>
               <p>
-                <img id="dashboard-profile-avatar" 
+                <img id="dashboard-profile-avatar"
                  class="img-rounded" src="{{ object.get_avatar_url }}"/>
               </p>
               <p>
@@ -55,9 +55,9 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <a href="{% url "dashboard.views.userkey-create" %}" class="pull-right btn btn-success btn-xs" style="margin-right: 10px;">
-          <i class="icon-plus"></i> {% trans "add SSH key" %}
+          <i class="fa fa-plus"></i> {% trans "add SSH key" %}
         </a>
-        <h3 class="no-margin"><i class="icon-key"></i> {% trans "SSH public keys" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-key"></i> {% trans "SSH public keys" %}</h3>
       </div>
       <div class="panel-body">
         {% render_table userkey_table %}

circle/dashboard/templates/dashboard/template-edit.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
 {% load sizefieldtags %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 {% block title-page %}{% trans "Edit template" %}{% endblock %}
 
@@ -12,7 +12,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.template-list" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-puzzle-piece"></i> {% trans "Edit template" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-puzzle-piece"></i> {% trans "Edit template" %}</h3>
       </div>
       <div class="panel-body">
         {% with form=form %}
@@ -26,7 +26,7 @@
   <div class="col-md-5">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h4 class="no-margin"><i class="icon-group"></i> {% trans "Manage access"  %}</h4>
+        <h4 class="no-margin"><i class="fa fa-group"></i> {% trans "Manage access"  %}</h4>
       </div>
       <div class="panel-body">
         <form action="{% url "dashboard.views.template-acl" pk=object.pk %}" method="post">{% csrf_token %}
@@ -36,14 +36,14 @@
                 <th></th>
                 <th>{% trans "Who" %}</th>
                 <th>{% trans "What" %}</th>
-                <th><i class="icon-remove"></i></th>
+                <th><i class="fa fa-times"></i></th>
               </tr>
             </thead>
             <tbody>
               {% for i in acl.users %}
               <tr>
                 <td>
-                  <i class="icon-user"></i>
+                  <i class="fa fa-user"></i>
                 </td>
                 <td>
                   <a href="{% url "dashboard.views.profile" username=i.user.username %}"
@@ -65,7 +65,7 @@
               {% endfor %}
               {% for i in acl.groups %}
               <tr>
-                <td><i class="icon-group"></i></td>
+                <td><i class="fa fa-group"></i></td>
                 <td>
                   <a href="{% url "dashboard.views.group-detail" pk=i.group.pk %}">
                     {{i.group}}
@@ -83,7 +83,7 @@
                 </td>
               </tr>
               {% endfor %}
-              <tr><td><i class="icon-plus"></i></td>
+              <tr><td><i class="fa fa-plus"></i></td>
                   <td><input type="text" class="form-control" name="perm-new-name"
                       placeholder="{% trans "Name of group or user" %}"></td>
                   <td><select class="form-control" name="perm-new">
@@ -100,11 +100,11 @@
         </form>
       </div>
     </div>
-    
-        
+
+
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h4 class="no-margin"><i class="icon-file"></i> {% trans "Disk list" %}</h4>
+        <h4 class="no-margin"><i class="fa fa-file"></i> {% trans "Disk list" %}</h4>
       </div>
       <div class="panel-body">
         <ul class="template-disk-list">

circle/dashboard/templates/dashboard/template-list.html

@@ -11,9 +11,9 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <a href="{% url "dashboard.views.template-create" %}" class="pull-right btn btn-success btn-xs">
-          <i class="icon-plus"></i> {% trans "new base vm" %}
+          <i class="fa fa-plus"></i> {% trans "new base vm" %}
         </a>
-        <h3 class="no-margin"><i class="icon-puzzle-piece"></i> {% trans "Templates" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-puzzle-piece"></i> {% trans "Templates" %}</h3>
       </div>
       <div class="panel-body">
         {% render_table table %}
@@ -28,10 +28,10 @@
       <div class="panel-heading">
         {% if perms.vm.create_leases %}
         <a href="{% url "dashboard.views.lease-create" %}" class="pull-right btn btn-success btn-xs" style="margin-right: 10px;">
-          <i class="icon-plus"></i> {% trans "new lease" %}
+          <i class="fa fa-plus"></i> {% trans "new lease" %}
         </a>
         {% endif %}
-        <h3 class="no-margin"><i class="icon-time"></i> {% trans "Leases" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-time"></i> {% trans "Leases" %}</h3>
       </div>
       <div class="panel-body">
         <div class="" style="max-width: 600px;">
@@ -45,7 +45,7 @@
   <div class="col-md-6">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-desktop"></i> Placeholder</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> Placeholder</h3>
       </div>
       <div class="panel-body">
         ???

circle/dashboard/templates/dashboard/template-list/column-lease-actions.html

 {% load i18n %}
 <a href="{% url "dashboard.views.lease-detail" pk=record.pk %}" id="template-list-edit-button" class="btn btn-default btn-xs" title data-original-title="{% trans "Edit" %}">
-  <i class="icon-edit"></i>
+  <i class="fa fa-edit"></i>
 </a>
 <a data-lease-pk="{{ record.pk }}" href="{% url "dashboard.views.lease-delete" pk=record.pk %}" class="btn btn-danger btn-xs lease-delete" title="{% trans "Delete" %}">
-  <i class="icon-remove"></i>
+  <i class="fa fa-times"></i>
 </a>

circle/dashboard/templates/dashboard/template-list/column-template-actions.html

 {% load i18n %}
 <a href="{% url "dashboard.views.template-detail" pk=record.pk%}" id="template-list-edit-button" class="btn btn-default btn-xs" title="{% trans "Edit" %}">
-  <i class="icon-edit"></i>
+  <i class="fa fa-edit"></i>
 </a>
 <a data-template-pk="{{ record.pk }}" href="{% url "dashboard.views.template-delete" pk=record.pk %}" class="btn btn-danger btn-xs template-delete" title="{% trans "Delete" %}">
-  <i class="icon-remove"></i>
+  <i class="fa fa-times"></i>
 </a>

circle/dashboard/templates/dashboard/userkey-create.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 {% block title-page %}{% trans "Create SSH public key" %}{% endblock %}
 
@@ -11,7 +11,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.profile-preferences" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-key"></i> {% trans "Create SSH public key" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-key"></i> {% trans "Create SSH public key" %}</h3>
       </div>
       <div class="panel-body">
         {% crispy form %}

circle/dashboard/templates/dashboard/userkey-edit.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
 {% load sizefieldtags %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 {% block title-page %}{% trans "Edit SSH public key" %}{% endblock %}
 
@@ -12,7 +12,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.profile-preferences" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-key"></i> {% trans "Edit SSH public key" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-key"></i> {% trans "Edit SSH public key" %}</h3>
       </div>
       <div class="panel-body">
         {% crispy form %}

circle/dashboard/templates/dashboard/userkey-list/column-userkey-actions.html

 {% load i18n %}
 <a href="{% url "dashboard.views.userkey-detail" pk=record.pk%}" id="template-list-edit-button" class="btn btn-default btn-xs" title="{% trans "Edit" %}">
-  <i class="icon-edit"></i>
+  <i class="fa fa-edit"></i>
 </a>
 <a data-template-pk="{{ record.pk }}" href="{% url "dashboard.views.userkey-delete" pk=record.pk %}" class="btn btn-danger btn-xs template-delete" title="{% trans "Delete" %}">
-  <i class="icon-remove"></i>
+  <i class="fa fa-times"></i>
 </a>

circle/dashboard/templates/dashboard/vm-detail.html

@@ -10,7 +10,7 @@
   <strong>{% trans "This is the master vm of your new template" %}</strong>
   <div id="vm-details-template-tour-button" class="pull-right">
     <a href="#" class="btn btn-default btn-lg pull-right vm-details-start-template-tour">
-      <i class="icon-play"></i> {% trans "Start template tutorial" %}
+      <i class="fa fa-play"></i> {% trans "Start template tutorial" %}
     </a>
   </div>
   <ol>
@@ -45,7 +45,7 @@
         <form action="" method="POST" id="vm-details-rename-form">
           {% csrf_token %}
           <div class="input-group vm-details-home-name">
-            <input id="vm-details-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ instance.name }}"/> 
+            <input id="vm-details-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ instance.name }}"/>
             <span class="input-group-btn">
               <button type="submit" class="btn btn-sm vm-details-rename-submit">{% trans "Rename" %}</button>
             </span>
@@ -53,7 +53,7 @@
         </form>
       </div>
       <div id="vm-details-h1-name" class="vm-details-home-edit-name">
-        {{ instance.name }} 
+        {{ instance.name }}
       </div>
       <small>{{ instance.primary_host.get_fqdn }}</small>
     </h1>
@@ -63,7 +63,7 @@
     <div class="col-md-4" id="vm-info-pane">
       <div class="big">
         <span id="vm-details-state" class="label label-success">
-          <i class="{{ instance.get_status_icon }}"></i> 
+          <i class="fa {{ instance.get_status_icon }}"></i>
           <span>{{ instance.get_status_display|upper }}</span>
         </span>
       </div>
@@ -76,7 +76,7 @@
             {% if instance.get_connect_port %}
               {{ instance.get_connect_host }}:<strong>{{ instance.get_connect_port }}</strong>
             {% else %}
-              <strong>{% trans "The required port for this protocol is not forwarded." %}</strong> 
+              <strong>{% trans "The required port for this protocol is not forwarded." %}</strong>
             {% endif %}
           </dd>
 
@@ -90,10 +90,10 @@
         <dt>{% trans "Password" %}</dt>
         <dd>
           <div class="input-group">
-            <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags" 
+            <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags"
             value="{{ instance.pw }}" spellcheck="false"/>
             <span class="input-group-addon input-tags" id="vm-details-pw-show">
-              <i class="icon-eye-open" id="vm-details-pw-eye" title="Show password"></i>
+              <i class="fa fa-eye" id="vm-details-pw-eye" title="Show password"></i>
             </span>
           </div>
         </dd>
@@ -105,7 +105,7 @@
             {% trans "Are you sure?" %}
           </dt>
           <dd>
-            <a href="#" class="vm-details-pw-confirm-choice label label-success" data-choice="1" data-vm="{{ instance.pk }}">{% trans "Yes" %}</a> / 
+            <a href="#" class="vm-details-pw-confirm-choice label label-success" data-choice="1" data-vm="{{ instance.pk }}">{% trans "Yes" %}</a> /
             <a href="#" class="vm-details-pw-confirm-choice label label-danger" data-choice="0">{% trans "No" %}</a>
           </dd>
         </div>
@@ -113,12 +113,12 @@
 
       <div class="input-group" id="dashboard-vm-details-connect-command">
         <span class="input-group-addon input-tags">{% trans "Command" %}</span>
-        <input type="text" spellcheck="false" 
+        <input type="text" spellcheck="false"
         value="{% if instance.get_connect_command %}{{ instance.get_connect_command }}{% else %}
-        {% trans "Connection is not possible." %}{% endif %}" 
+        {% trans "Connection is not possible." %}{% endif %}"
         id="vm-details-connection-string" class="form-control input-tags" />
         <span class="input-group-addon input-tags" id="vm-details-connection-string-copy">
-          <i class="icon-copy" title="{% trans "Select all" %}"></i>
+          <i class="fa fa-copy" title="{% trans "Select all" %}"></i>
         </span>
       </div>
     </div>
@@ -127,31 +127,31 @@
         <ul class="nav nav-pills panel-heading">
           <li class="active">
             <a href="#home" data-toggle="pill" data-target="#_home" class="text-center">
-              <i class="icon-compass icon-2x"></i><br>
+              <i class="fa fa-compass fa-2x"></i><br>
               {% trans "Home" %}</a>
           </li>
           <li>
             <a href="#resources" data-toggle="pill" data-target="#_resources" class="text-center">
-              <i class="icon-tasks icon-2x"></i><br>
+              <i class="fa fa-tasks fa-2x"></i><br>
               {% trans "Resources" %}</a>
           </li>
           <li{% if not instance.is_console_available %} class="disabled"{% endif %}>
             <a href="#console" data-toggle="pill" data-target="#_console" class="text-center">
-              <i class="icon-desktop icon-2x"></i><br>
+              <i class="fa fa-desktop fa-2x"></i><br>
               {% trans "Console" %}</a></li>
           <li>
             <a href="#access" data-toggle="pill" data-target="#_access" class="text-center">
-              <i class="icon-group icon-2x"></i><br>
+              <i class="fa fa-group fa-2x"></i><br>
               {% trans "Access" %}</a>
           </li>
           <li>
             <a href="#network" data-toggle="pill" data-target="#_network" class="text-center">
-              <i class="icon-globe icon-2x"></i><br>
+              <i class="fa fa-globe fa-2x"></i><br>
               {% trans "Network" %}</a>
           </li>
           <li>
             <a href="#activity" data-toggle="pill" data-target="#_activity" class="text-center">
-              <i class="icon-time icon-2x"></i><br>
+              <i class="fa fa-clock-o fa-2x"></i><br>
               {% trans "Activity" %}</a>
           </li>
         </ul>

circle/dashboard/templates/dashboard/vm-detail/_activity-timeline.html

@@ -2,18 +2,18 @@
 {% for a in activities %}
 <div class="activity{% if a.pk == active.pk %} activity-active{%endif%}" data-activity-id="{{ a.pk }}">
   <span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
-  <i class="{% if not a.finished %} icon-refresh icon-spin {% else %}icon-plus{% endif %}"></i>
-</span> 
-<strong{% if user.is_superuser and a.result %} title="{{ a.result }}"{% endif %}>
-  {% if user.is_superuser %}<a href="{{ a.get_absolute_url }}">{% endif %}
+  <i class="fa {% if not a.finished %}fa-refresh fa-spin {% else %}fa-plus{% endif %}"></i>
+</span>
+<strong{% if a.result %} title="{{ a.result.get_user_text }}"{% endif %}>
+  <a href="{{ a.get_absolute_url }}">
     {% if a.times > 1 %}({{ a.times }}x){% endif %}
-    {{ a.get_readable_name }}{% if user.is_superuser %}</a>{% endif %}
+    {{ a.readable_name.get_user_text }}</a>
 
 {% if a.has_percent %}
   - {{ a.percentage }}%
 {% endif %}
 </strong>
-{% if a.times < 2%}{{ a.started|date:"Y-m-d H:i" }}{% endif %}{% if a.user %}, 
+{% if a.times < 2%}{{ a.started|date:"Y-m-d H:i" }}{% endif %}{% if a.user %},
   <a class="no-style-link" href="{% url "dashboard.views.profile" username=a.user.username %}">
     {% include "dashboard/_display-name.html" with user=a.user show_org=True %}
   </a>
@@ -23,20 +23,20 @@
   {% csrf_token %}
   <input type="hidden" name="abort_operation"/>
   <input type="hidden" name="activity" value="{{ a.pk }}"/>
-  <button class="btn btn-danger btn-xs"><i class="icon-bolt"></i> {% trans "Abort" %}</button>
+  <button class="btn btn-danger btn-xs"><i class="fa fa-bolt"></i> {% trans "Abort" %}</button>
 </form>
 {% endif %}
   {% if a.children.count > 0 %}
     <div class="sub-timeline">
       {% for s in a.children.all %}
       <div data-activity-id="{{ s.pk }}" class="sub-activity{% if s.has_failed %} sub-activity-failed{% endif %}{% if s.pk == active.pk %} sub-activity-active{% endif %}">
-        <span{% if user.is_superuser and s.result %} title="{{ s.result }}"{% endif %}>
-          {% if user.is_superuser %}<a href="{{ s.get_absolute_url }}">{% endif %}
-              {{ s.get_readable_name }}{% if user.is_superuser %}</a>{% endif %}</span> &ndash;
+        <span{% if s.result %} title="{{ s.result.get_user_text }}"{% endif %}>
+          <a href="{{ s.get_absolute_url }}">
+              {{ s.readable_name.get_user_text }}</a></span> &ndash;
         {% if s.finished %}
           {{ s.finished|time:"H:i:s" }}
         {% else %}
-          <i class="icon-refresh icon-spin" class="sub-activity-loading-icon"></i>
+          <i class="fa fa-refresh fa-spin" class="sub-activity-loading-icon"></i>
         {% endif %}
         {% if s.has_failed %}
           <div class="label label-danger">{% trans "failed" %}</div>

circle/dashboard/templates/dashboard/vm-detail/_disk-operations.html

@@ -4,7 +4,7 @@
 {% if op.is_disk_operation %}
     <a href="{{op.get_url}}" class="btn btn-success btn-xs
             operation operation-{{op.op}} btn btn-default">
-      <i class="icon-{{op.icon}}"></i>
+      <i class="fa fa-{{op.icon}}"></i>
             {{op.name}} </a>
 {% endif %}
 {% endfor %}

circle/dashboard/templates/dashboard/vm-detail/_network-port-add.html

 {% load i18n %}
-<div class="vm-details-network-port-add pull-right">                                   
-  <form action="" method="POST">                                              
-    {% csrf_token %}                                                          
-    <input type="hidden" name="host_pk" value="{{ i.host.pk }}"/>             
-    <div class="input-group input-group-sm">                                  
-      <span class="input-group-addon">                                        
-        <i class="icon-plus"></i> <i class="icon-long-arrow-right"></i>       
-      </span>                                                                 
+<div class="vm-details-network-port-add pull-right">
+  <form action="" method="POST">
+    {% csrf_token %}
+    <input type="hidden" name="host_pk" value="{{ i.host.pk }}"/>
+    <div class="input-group input-group-sm">
+      <span class="input-group-addon">
+        <i class="fa fa-plus"></i> <i class="fa fa-long-arrow-right"></i>
+      </span>
       <input type="text" class="form-control" size="5" style="width: 80px;" name="port"/>
-      <span class="input-group-addon">/</span>                                
+      <span class="input-group-addon">/</span>
       <select class="form-control" name="proto" style="width: 70px;"><option>tcp</option><option>udp</option></select>
-      <div class="input-group-btn">                                           
-        <button type="submit" class="btn btn-success btn-sm">{% trans "Add" %}</button>     
-      </div>                                                                  
-    </div>                                                                    
-  </form>                                   
-</div>                                        
+      <div class="input-group-btn">
+        <button type="submit" class="btn btn-success btn-sm">{% trans "Add" %}</button>
+      </div>
+    </div>
+  </form>
+</div>

circle/dashboard/templates/dashboard/vm-detail/_operations.html

@@ -9,7 +9,7 @@
 <a href="{{op.get_url}}" class="operation operation-{{op.op}} btn
     btn-{{op.effect}} btn-xs" title="{{op.name}}: {{op.description}}">
 {% endif %}
-    <i class="icon-{{op.icon}}"></i>
+    <i class="fa fa-{{op.icon}}"></i>
     <span{% if not op.is_preferred %} class="sr-only"{% endif %}>{{op.name}}</span>
 {% if op.disabled %}
 </span>

circle/dashboard/templates/dashboard/vm-detail/access.html

@@ -25,7 +25,7 @@
     <tbody>
         {% for i in acl.users %}
         <tr>
-          <td><i class="icon-user"></i></td>
+          <td><i class="fa fa-user"></i></td>
           <td>
             <a href="{% url "dashboard.views.profile" username=i.user.username %}" title="{{ i.user.username }}"
               >{% include "dashboard/_display-name.html" with user=i.user show_org=True %}</a>
@@ -44,7 +44,7 @@
         {% endfor %}
         {% for i in acl.groups %}
         <tr>
-          <td><i class="icon-group"></i></td>
+          <td><i class="fa fa-group"></i></td>
           <td>
             <a href="{% url "dashboard.views.group-detail" pk=i.group.pk %}"
               >{{ i.group.name }}</a>
@@ -60,7 +60,7 @@
           </td>
         </tr>
         {% endfor %}
-        <tr><td><i class="icon-plus"></i></td>
+        <tr><td><i class="fa fa-plus"></i></td>
             <td><input type="text" class="form-control" name="perm-new-name"
                 placeholder="{% trans "Name of group or user" %}"></td>
             <td><select class="form-control" name="perm-new">

circle/dashboard/templates/dashboard/vm-detail/console.html

@@ -4,7 +4,7 @@
   <button id="sendCtrlAltDelButton" class="btn btn-danger btn-sm">{% trans "Send Ctrl+Alt+Del" %}</button>
   <button id="sendPasswordButton" class="btn btn-default btn-sm">{% trans "Type password" %}</button>
 {% endif %}
-  <button id="getScreenshotButton" class="btn btn-info btn-sm pull-right" data-vm-pk="{{ instance.pk }}"><i class="icon-picture"></i> {% trans "Screenshot" %}</button>
+  <button id="getScreenshotButton" class="btn btn-info btn-sm pull-right" data-vm-pk="{{ instance.pk }}"><i class="fa fa-picture"></i> {% trans "Screenshot" %}</button>
 </div>
 {% if perms.vm.access_console %}
 <div class="alert alert-info" id="noVNC_status">

circle/dashboard/templates/dashboard/vm-detail/home.html

@@ -3,10 +3,10 @@
   <div class="col-md-4">
     <dl>
       <dt>{% trans "System" %}:</dt>
-      <dd><i class="icon-{{ os_type_icon }}"></i> {{ instance.system }}</dd>
+      <dd><i class="fa fa-{{ os_type_icon }}"></i> {{ instance.system }}</dd>
       <dt style="margin-top: 5px;">
         {% trans "Name" %}:
-        <a href="#" class="vm-details-home-edit-name-click"><i class="icon-pencil"></i></a>
+        <a href="#" class="vm-details-home-edit-name-click"><i class="fa fa-pencil"></i></a>
       </dt>
       <dd>
         <div class="vm-details-home-edit-name-click">
@@ -19,7 +19,7 @@
               <input type="text" name="new_name" value="{{ instance.name }}" class="form-control input-sm"/>
               <span class="input-group-btn">
                 <button type="submit" class="btn btn-success btn-sm vm-details-rename-submit">
-                  <i class="icon-pencil"></i> {% trans "Rename" %}
+                  <i class="fa fa-pencil"></i> {% trans "Rename" %}
                 </button>
               </span>
             </div>
@@ -27,8 +27,8 @@
         </div>
       </dd>
       <dt style="margin-top: 5px;">
-        {% trans "Description" %}: 
-        <a href="#" class="vm-details-home-edit-description-click"><i class="icon-pencil"></i></a>
+        {% trans "Description" %}:
+        <a href="#" class="vm-details-home-edit-description-click"><i class="fa fa-pencil"></i></a>
       </dt>
       <dd>
         {% csrf_token %}
@@ -39,26 +39,26 @@
           <form method="POST">
             <textarea name="new_description" class="form-control">{{ instance.description }}</textarea>
             <button type="submit" class="btn btn-xs btn-success vm-details-description-submit">
-              <i class="icon-pencil"></i> {% trans "Update" %}
+              <i class="fa fa-pencil"></i> {% trans "Update" %}
             </button>
           </form>
         </div>
       </dd>
     </dl>
 
-    <h4>{% trans "Expiration" %} {% if instance.is_expiring %}<i class="icon-warning-sign text-danger"></i>{% endif %}
+    <h4>{% trans "Expiration" %} {% if instance.is_expiring %}<i class="fa fa-warning-sign text-danger"></i>{% endif %}
         {% with op=op.renew %}
           <a href="{{op.get_url}}" class="btn btn-success btn-xs
                   operation operation-{{op.op}} btn btn-default">
-            <i class="icon-{{op.icon}}"></i>
+            <i class="fa fa-{{op.icon}}"></i>
                   {{op.name}} </a>
         {% endwith %}
     </h4>
     <dl>
       <dt>{% trans "Suspended at:" %}</dt>
-      <dd><i class="icon-moon"></i> {{ instance.time_of_suspend|timeuntil }}</dd>
+      <dd><i class="fa fa-moon"></i> {{ instance.time_of_suspend|timeuntil }}</dd>
       <dt>{% trans "Destroyed at:" %}</dt>
-      <dd><i class="icon-remove"></i> {{ instance.time_of_delete|timeuntil }}</dd>
+      <dd><i class="fa fa-times"></i> {{ instance.time_of_delete|timeuntil }}</dd>
     </dl>
 
     <div style="font-weight: bold;">{% trans "Tags" %}</div>
@@ -68,7 +68,7 @@
           {% for t in instance.tags.all %}
             <div class="label label-primary label-tag" style="display: inline-block">
               {{ t }}
-              <a href="#" class="vm-details-remove-tag"><i class="icon-remove"></i></a>
+              <a href="#" class="vm-details-remove-tag"><i class="fa fa-times"></i></a>
             </div>
           {% endfor %}
         {% else %}
@@ -80,7 +80,7 @@
         <div class="input-group" id="vm-details-tags-form">
           <input type="text" class="form-control input-sm input-tags" name="new_tag" id="vm-details-tags-input"/>
           <!--<div class="input-group-addon">
-            <i class="icon-question"></i>
+            <i class="fa fa-question"></i>
           </div>-->
           <div class="input-group-btn">
             <input type="submit" class="btn btn-default btn-sm input-tags" value="{% trans "Add tag" %}"/>

circle/dashboard/templates/dashboard/vm-detail/network.html

 {% load i18n %}
-{% load network_tags %} 
+{% load network_tags %}
 <h2>
   <a href="#" id="vm-details-network-add" class="btn btn-success pull-right no-js-hidden">
-    <i class="icon-plus"></i> {% trans "add interface" %}
+    <i class="fa fa-plus"></i> {% trans "add interface" %}
   </a>
   {% trans "Interfaces" %}
 </h2>
@@ -33,25 +33,25 @@
           </select>
           <div class="input-group-btn">
             <button {% if vlans|length == 0 %}disabled{% endif %}
-              type="submit" class="btn btn-success"><i class="icon-plus-sign"></i></button>
+              type="submit" class="btn btn-success"><i class="fa fa-plus-circle"></i></button>
           </div>
         </div>
       </form>
       <hr />
-    </div> 
+    </div>
   </div>
 </div>
 
 {% for i in instance.interface_set.all %}
 <div>
   <h3 class="list-group-item-heading dashboard-vm-details-network-h3">
-    <i class="icon-{% if i.host %}globe{% else %}link{% endif %}"></i> {{ i.vlan.name }} 
+    <i class="fa fa-{% if i.host %}globe{% else %}link{% endif %}"></i> {{ i.vlan.name }}
     {% if not i.host%}({% trans "unmanaged" %}){% endif %}
     {% if user.is_superuser %}
-      <a href="{{ i.host.get_absolute_url }}" 
+      <a href="{{ i.host.get_absolute_url }}"
         class="btn btn-default btn-xs">{% trans "edit" %}</a>
     {% endif %}
-    <a href="{% url "dashboard.views.interface-delete" pk=i.pk %}?next={{ request.path }}" 
+    <a href="{% url "dashboard.views.interface-delete" pk=i.pk %}?next={{ request.path }}"
       class="btn btn-danger btn-xs interface-remove"
       data-interface-pk="{{ i.pk }}">
       {% trans "remove" %}
@@ -85,13 +85,13 @@
             <table class="table table-striped rule-table">
               <thead>
                 <tr><th>
-                  <i class="icon-globe icon-2x"></i>
-                  <i class="icon-long-arrow-right icon-2x"></i>
+                  <i class="fa fa-globe fa-2x"></i>
+                  <i class="fa fa-long-arrow-right fa-2x"></i>
                   </th><th>
-                  <i class="icon-shield icon-2x"></i>
+                  <i class="fa fa-shield fa-2x"></i>
                   </th><th colspan="2">
-                  <i class="icon-long-arrow-right icon-2x"></i>
-                  <i class="icon-desktop icon-2x"></i>
+                  <i class="fa fa-long-arrow-right fa-2x"></i>
+                  <i class="fa fa-desktop fa-2x"></i>
                 </th></tr>
               </thead>
               <tbody>
@@ -101,12 +101,12 @@
                       <td>
                         {% display_portforward4 l %}
                       </td>
-                      <td><i class="icon-long-arrow-right"></i></td>
+                      <td><i class="fa fa-long-arrow-right"></i></td>
                       <td>
                         {{ l.private }}/{{ l.proto }}
                       </td>
                       <td>
-                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv4.pk }}" title="{% trans "Remove" %}"><i class="icon-remove"><span class="sr-only">{% trans "Remove" %}</span></i></a>
+                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv4.pk }}" title="{% trans "Remove" %}"><i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i></a>
                       </td>
                     </tr>
                   {% endif %}
@@ -115,15 +115,15 @@
             </table>
           </div> <!-- /ipv4 -->
           <div class="tab-pane" id="ipv6_{{ i.host.vlan.pk }}">
-            {% if i.host.ipv6 %} 
+            {% if i.host.ipv6 %}
             <table class="table table-striped rule-table">
               <thead>
                 <tr><th>
-                  <i class="icon-globe icon-2x"></i>
+                  <i class="fa fa-globe fa-2x"></i>
                 </th><th>
-                  <i class="icon-long-arrow-right icon-2x"></i>
+                  <i class="fa fa-long-arrow-right fa-2x"></i>
                 </th><th colspan="2">
-                  <i class="icon-desktop icon-2x"></i>
+                  <i class="fa fa-desktop fa-2x"></i>
                 </th></tr>
               </thead>
               <tbody>
@@ -133,12 +133,12 @@
                       <td>
                         {% display_portforward6 l %}
                       </td>
-                      <td><i class="icon-long-arrow-right"></i></td>
+                      <td><i class="fa fa-long-arrow-right"></i></td>
                       <td>
                         {{ l.private }}/{{ l.proto }}
                       </td>
                       <td>
-                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv6.pk }}" title="{% trans "Remove" %}"><i class="icon-remove"><span class="sr-only">{% trans "Remove" %}</span></i></a>
+                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv6.pk }}" title="{% trans "Remove" %}"><i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i></a>
                       </td>
                     </tr>
                   {% endif %}

circle/dashboard/templates/dashboard/vm-detail/resources.html

 {% load i18n %}
 {% load sizefieldtags %}
-{% load crispy_forms_tags %} 
+{% load crispy_forms_tags %}
 
 <form id="vm-details-resources-form" method="POST" action="">
   {% csrf_token %}
 <p class="row">
     <div class="col-sm-3">
-      <label for="vm-cpu-priority-slider"><i class="icon-trophy"></i> {% trans "CPU priority" %}</label>
+      <label for="vm-cpu-priority-slider"><i class="fa fa-trophy"></i> {% trans "CPU priority" %}</label>
     </div>
     <div class="col-sm-9">
-      <input name="cpu-priority" type="text" id="vm-cpu-priority-slider" class="vm-slider" value="{{ instance.priority }}" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="{{ instance.priority }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>         
+      <input name="cpu-priority" type="text" id="vm-cpu-priority-slider" class="vm-slider" value="{{ instance.priority }}" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="{{ instance.priority }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>
     </div>
 </p>
 
 
 <p class="row">
     <div class="col-sm-3">
-      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "CPU count" %}</label>
+      <label for="cpu-count-slider"><i class="fa fa-cogs"></i> {% trans "CPU count" %}</label>
     </div>
     <div class="col-sm-9">
-      <input name="cpu-count" type="text" id="vm-cpu-count-slider" class="vm-slider" value=" {{ instance.num_cores }}" data-slider-min="0" data-slider-max="8" data-slider-step="1" data-slider-value="{{ instance.num_cores }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>         
+      <input name="cpu-count" type="text" id="vm-cpu-count-slider" class="vm-slider" value=" {{ instance.num_cores }}" data-slider-min="0" data-slider-max="8" data-slider-step="1" data-slider-value="{{ instance.num_cores }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>
     </div>
 </p>
 
 
 <p class="row">
     <div class="col-sm-3">
-      <label for="ram-slider"><i class="icon-ticket"></i> {% trans "RAM amount" %}</label>
+      <label for="ram-slider"><i class="fa fa-ticket"></i> {% trans "RAM amount" %}</label>
     </div>
-    <div class="col-sm-9"> 
-      <input name="ram-size" type="text" id="vm-ram-size-slider" class="vm-slider" value="{{ instance.ram_size }}" data-slider-min="128" data-slider-max="4096" data-slider-step="128" data-slider-value="{{ instance.ram_size }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>         MiB  
+    <div class="col-sm-9">
+      <input name="ram-size" type="text" id="vm-ram-size-slider" class="vm-slider" value="{{ instance.ram_size }}" data-slider-min="128" data-slider-max="4096" data-slider-step="128" data-slider-value="{{ instance.ram_size }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>         MiB
   </div>
 </p>
 
@@ -39,7 +39,7 @@
     <button type="submit" class="btn btn-success btn-sm enabled-when-stopped" id="vm-details-resources-save"
       data-vm="{{ instance.pk }}"
       {% if not op.resources_change %}disabled{% endif %}>
-      <i class="icon-save"></i> {% trans "Save resources" %}
+      <i class="fa fa-floppy-o"></i> {% trans "Save resources" %}
     </button>
     <span class="hide-when-stopped"
       {% if op.resources_change %}style="display: none;"{% endif %}
@@ -58,7 +58,7 @@
       <div class="pull-right">
         <div id="disk-ops">
           {% include "dashboard/vm-detail/_disk-operations.html" %}
-        </div> 
+        </div>
       </div>
     </h3>
 

circle/dashboard/templates/dashboard/vm-list.html

@@ -11,15 +11,15 @@
       <div class="panel-heading">
         <div class="pull-right table-sorting">
           {% trans "Sorting ... " %}
-          <!--<i class="icon-refresh icon-spin icon-2x"></i>-->
+          <!--<i class="fa fa-refresh fa-spin fa-2x"></i>-->
         </div>
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Virtual machines" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Virtual machines" %}</h3>
       </div>
       <div class="pull-right" style="max-width: 250px; margin-top: 15px; margin-right: 15px;">
         <form action="" method="GET" class="input-group">
           <input type="text" name="s"{% if request.GET.s %} value="{{ request.GET.s }}"{% endif %} class="form-control input-tags" placeholder="{% trans "Search..."%}" />
           <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary input-tags" title="search"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary input-tags" title="search"><i class="fa fa-search"></i></button>
           </div>
         </form>
       </div>
@@ -27,10 +27,10 @@
         <p>
         <strong>{% trans "Group actions" %}</strong>
         <button id="vm-list-group-select-all" class="btn btn-info btn-xs">{% trans "Select all" %}</button>
-        <a class="btn btn-default btn-xs" id="vm-list-group-migrate" disabled><i class="icon-truck"></i> {% trans "Migrate" %}</a>
-        <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-refresh"></i> {% trans "Reboot" %}</a>
-        <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-off"></i> {% trans "Shutdown" %}</a>
-        <a id="vm-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> {% trans "Destroy" %}</a>
+        <a class="btn btn-default btn-xs" id="vm-list-group-migrate" disabled><i class="fa fa-truck"></i> {% trans "Migrate" %}</a>
+        <a disabled href="#" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i> {% trans "Reboot" %}</a>
+        <a disabled href="#" class="btn btn-default btn-xs"><i class="fa fa-off"></i> {% trans "Shutdown" %}</a>
+        <a id="vm-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> {% trans "Destroy" %}</a>
         </p>
       </div>
       <div class="panel-body">

circle/dashboard/templates/dashboard/vm-list/column-actions.html

 
 <div class="btn-group">
-  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
   <ul class="nojs-dropdown-toogle dropdown-menu" role="menu">
-    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-    <li><a data-vm-pk="{{ record.pk }}" class="real-link vm-delete" href="{% url "dashboard.views.delete-vm" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Discard</a></li>
+    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+    <li><a data-vm-pk="{{ record.pk }}" class="real-link vm-delete" href="{% url "dashboard.views.delete-vm" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-times"></i> Discard</a></li>
   </ul>
 </div>

circle/dashboard/templates/dashboard/vm-list/column-admin.html

 <a href="{% url "dashboard.vm.op.migrate" pk=record.pk %}" class="btn btn-default btn-xs vm-migrate" data-vm-pk="{{ record.pk }}" title data-original-title="Migrate">
-  <i class="icon-truck"></i>
+  <i class="fa fa-truck"></i>
 </a>
 <a id="vm-list-rename-button" class="btn btn-default btn-xs" title data-original-title="Rename">
-  <i class="icon-pencil"></i>
+  <i class="fa fa-pencil"></i>
 </a>
 <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
   data-content='

circle/dashboard/templates/dashboard/vm-list/column-name.html

-{% load i18n %} 
+{% load i18n %}
 
 <div id="vm-list-rename">
   <form action="{% url "dashboard.views.detail" pk=record.pk %}" method="POST" id="vm-list-rename-form">
     {% csrf_token %}
-    <input id="vm-list-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ record.name }}"/> 
+    <input id="vm-list-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ record.name }}"/>
     <button type="submit" class="vm-list-rename-submit btn btn-sm">{% trans "Rename" %}</button>
   </form>
 </div>

circle/dashboard/templates/dashboard/vm-list/test-one.html

-            
+
             <tr>
               <!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
               <td>
@@ -10,10 +10,10 @@
               <td>1 month</td>
               <td>
                 <a class="btn btn-default btn-xs" title data-original-title="Migrate">
-                  <i class="icon-truck"></i>
+                  <i class="fa fa-truck"></i>
                 </a>
                 <a class="btn btn-default btn-xs" title data-original-title="Rename">
-                  <i class="icon-pencil"></i>
+                  <i class="fa fa-pencil"></i>
                 </a>
                 <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
                   data-content='
@@ -22,7 +22,7 @@
                   '>Connect</a>
               </td>
               <td>
-                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover" 
+                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover"
                   data-content='
                   <h4>Quick details</h4>
                   <dl class="dl-horizontal">
@@ -39,13 +39,13 @@
               </td>
               <td>
                 <div class="btn-group">
-                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
                   <ul class="nojs-dropdown-menu dropdown-menu" role="menu">
-                    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-                    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-                    <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+                    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+                    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+                    <li><a href="#"><i class="fa fa-times"></i> Discard</a></li>
                   </ul>
                 </div>
               </td>
-            
+
             </tr>

circle/dashboard/templates/display-form-errors.html

 {% if form.errors %}
   <div class="alert alert-danger">
-    {% for field in form %} 
+    {% for field in form %}
       {% if field.errors %}
       <div><strong>{{ field.label }}</strong>: {{ field.errors|striptags }}</div>
       {% endif %}