dashboard: rename vm function

circle/dashboard/static/dashboard/dashboard.css

@@ -141,3 +141,19 @@ body {
 .dashboard-index .panel {
     height: 300px;
 }
+
+#vm-details-rename, #vm-details-rename *, #vm-details-h1-name, #vm-list-rename, #vm-list-rename * {
+  display: inline;
+}
+
+#vm-details-rename, #vm-list-rename {
+  display: none;
+}
+
+#vm-details-rename-name {
+  max-width: 160px;
+}
+
+#vm-list-rename-name {
+  max-width: 100px;
+}

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

@@ -25,6 +25,32 @@ $(function() {
     });
     return false;
   });
+
+  /* rename */
+  $("#vm-details-h1-name, .vm-details-rename-button").click(function() {
+    $("#vm-details-h1-name").hide();
+    $("#vm-details-rename").css('display', 'inline');
+  });
+
+  /* rename ajax */
+  $('#vm-details-rename-submit').click(function() {
+    var name = $('#vm-details-rename-name').val();
+    $.ajax({
+      method: 'POST',
+      url: location.href,
+      data: {'new_name': name},
+      headers: {"X-CSRFToken": getCookie('csrftoken')},
+      success: function(data, textStatus, xhr) {
+        $("#vm-details-h1-name").html(data['new_name']).show();
+        $('#vm-details-rename').hide();
+        // addMessage(data['message'], "success");
+      },
+      error: function(xhr, textStatus, error) {
+        addMessage("uhoh", "danger");
+      }
+    });
+    return false;
+  });
 });
 
 function checkNewActivity() {

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

@@ -13,6 +13,7 @@ $(function() {
   });
 
   $('.vm-list-table tbody').find('tr').mousedown(function() {
+    var retval = true;
     if (ctrlDown) {
       setRowColor($(this));
       if(!$(this).hasClass('vm-list-selected')) {
@@ -20,6 +21,7 @@ $(function() {
       } else {
         selected.push($(this).index());
       }
+      retval = false;
     } else if(shiftDown) {
       if(selected.length > 0) {
         start = selected[selected.length - 1] + 1;
@@ -36,6 +38,7 @@ $(function() {
             }
         }
       }
+      retval = false;
     } else {
       $('.vm-list-selected').removeClass('vm-list-selected');
       $(this).addClass('vm-list-selected');
@@ -53,7 +56,7 @@ $(function() {
     } else {
       $('.vm-list-group-control a').attr('disabled', true);
     }
-    return false;
+    return retval;
   });
 
     
@@ -85,6 +88,42 @@ $(function() {
     }
   });
 
+  /* rename */
+  $("#vm-list-rename-button, .vm-details-rename-button").click(function() {
+    $("#vm-list-column-name", $(this).closest("tr")).hide();
+    $("#vm-list-rename", $(this).closest("tr")).css('display', 'inline');
+  });
+
+  /* rename ajax */
+  $('.vm-list-rename-submit').click(function() {
+    var row = $(this).closest("tr")
+    var name = $('#vm-list-rename-name', row).val();
+    var url = '/dashboard/vm/' + row.children("td:first-child").text().replace(" ", "") + '/';
+    $.ajax({
+      method: 'POST',
+      url: url,
+      data: {'new_name': name},
+      headers: {"X-CSRFToken": getCookie('csrftoken')},
+      success: function(data, textStatus, xhr) {
+        
+        $("#vm-list-column-name", row).html(
+          $("<a/>", {
+            'class': "real-link",
+            href: "/dashboard/vm/" + data['vm_pk'] + "/",
+            text: data['new_name']
+          })
+        ).show();
+        $('#vm-list-rename', row).hide();
+        // addMessage(data['message'], "success");
+      },
+      error: function(xhr, textStatus, error) {
+        addMessage("uhoh", "danger");
+      }
+    });
+    return false;
+  });
+  
+  
   /* group actions */
 
   /* select all */
@@ -131,5 +170,4 @@ function setRowColor(row) {
   } else {
     row.removeClass('vm-list-selected');
   }
-
 }

circle/dashboard/tables.py

-from django_tables2 import Table, A
-from django_tables2.columns import LinkColumn, TemplateColumn
+from django_tables2 import Table  # A
+from django_tables2.columns import TemplateColumn  # LinkColumn
 
 from vm.models import Instance
 from django.utils.translation import ugettext_lazy as _
@@ -11,11 +11,11 @@ class VmListTable(Table):
         verbose_name="ID",
         attrs={'th': {'class': 'vm-list-table-thin'}},
     )
-    name = LinkColumn(
-        'dashboard.views.detail',
-        args=[A('pk')],
-        attrs={'a': {'class': 'real-link'}}
+
+    name = TemplateColumn(
+        template_name="dashboard/vm-list/column-name.html"
     )
+
     admin = TemplateColumn(
         template_name='dashboard/vm-list/column-admin.html',
         attrs={'th': {'class': 'vm-list-table-admin'}},

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

@@ -4,7 +4,7 @@
       <div class="modal-body">  
         Are you sure you want to delete <strong>{{ object }}</strong>?
         <br />
-        <div class="pull-right">
+        <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-danger">Delete</button> 
         </div>

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

@@ -4,7 +4,18 @@
 {% block content %}
 <div class="body-content">
   <div class="page-header">
-    <h1>{{ instance.name }} <small>{{ instance.get_connect_host }}</small></h1>
+    <h1>
+      <div id="vm-details-rename">
+        <form action="" method="POST" id="vm-details-rename-form">
+          {% csrf_token %}
+          <input id="vm-details-rename-name" class="form-control" name="new_name" type="text" value="{{ instance.name }}"/> 
+          <button type="submit" id="vm-details-rename-submit" class="btn">{% trans "Rename" %}</button>
+        </form>
+      </div>
+      <div id="vm-details-h1-name">
+        {{ instance.name }} 
+      </div>
+      <small>{{ instance.get_connect_host }}</small></h1>
   </div>
   <div class="row">
     <div class="col-md-4" id="vm-info-pane">
@@ -13,6 +24,7 @@
         <div class="btn-group">
           <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
           <ul class="dropdown-menu" role="menu">
+            <li><a href="#" class="vm-details-rename-button" class="icon-pencil"></i> Rename</a></li>
             <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="{{ instance.pk }}" class="vm-delete" href="{% url "dashboard.views.delete-vm" pk=instance.pk %}"><i class="icon-remove"></i> Discard</a></li>

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

@@ -3,14 +3,6 @@
 {% load render_table from django_tables2 %}
 {% block content %}
 
-<div class="alert alert-info">
-  Tip #1: you can select multiple vm instances while holding down the <strong>CTRL</strong> key!
-</div>
-
-<div class="alert alert-info">
-  Tip #2: if you want to select multiple instances by one click select an instance then hold down <strong>SHIFT</strong> key and select another one!
-</div>
-
 <div class="row">
   <div class="col-md-12">
     <div class="panel panel-default">
@@ -34,6 +26,16 @@
   </div>
 </div>
 
+
+<div class="alert alert-info">
+  Tip #1: you can select multiple vm instances while holding down the <strong>CTRL</strong> key!
+</div>
+
+<div class="alert alert-info">
+  Tip #2: if you want to select multiple instances by one click select an instance then hold down <strong>SHIFT</strong> key and select another one!
+</div>
+
+
 <style>
   .popover {
     max-width: 600px;

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

@@ -2,7 +2,7 @@
 <a class="btn btn-default btn-xs" title data-original-title="Migrate">
   <i class="icon-truck"></i>
 </a>
-<a class="btn btn-default btn-xs" title data-original-title="Rename">
+<a id="vm-list-rename-button" class="btn btn-default btn-xs" title data-original-title="Rename">
   <i class="icon-pencil"></i>
 </a>
 <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"

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

+{% 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 }}"/> 
+    <button type="submit" class="vm-list-rename-submit btn btn-sm">{% trans "Rename" %}</button>
+  </form>
+</div>
+<div id="vm-list-column-name">
+  <a class="real-link" href="{% url "dashboard.views.detail" pk=record.pk %}">{{ record.name }}</a>
+</div>

circle/dashboard/views.py

@@ -104,6 +104,10 @@ class VmDetailView(CheckedDetailView):
                 and request.POST.get('cpu-priority')):
             return self.__set_resources(request)
 
+        # this is usually not None so it should be the last
+        if request.POST.get('new_name'):
+            return self.__set_name(request)
+
     def __set_resources(self, request):
         self.object = self.get_object()
         if not self.object.has_level(request.user, 'owner'):
@@ -128,6 +132,28 @@ class VmDetailView(CheckedDetailView):
             return redirect(reverse_lazy("dashboard.views.detail",
                                          kwargs={'pk': self.object.pk}))
 
+    def __set_name(self, request):
+        self.object = self.get_object()
+        new_name = request.POST.get("new_name")
+        Instance.objects.filter(pk=self.object.pk).update(
+            **{'name': new_name})
+
+        success_message = _("VM successfully renamed!")
+        if request.is_ajax():
+            response = {
+                'message': success_message,
+                'new_name': new_name,
+                'vm_pk': self.object.pk
+            }
+            return HttpResponse(
+                json.dumps(response),
+                content_type="application/json"
+            )
+        else:
+            messages.success(request, success_message)
+            return redirect(reverse_lazy("dashboard.views.detail",
+                                         kwargs={'pk': self.object.pk}))
+
 
 class AclUpdateView(View, SingleObjectMixin):