dashboard: add node templates

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

+var ctrlDown, shiftDown = false;
+var ctrlKey = 17;
+var shiftKey = 16;
+var selected = [];
+
+$(function() {
+  $(document).keydown(function(e) {
+    if (e.keyCode == ctrlKey) ctrlDown = true;
+    if (e.keyCode == shiftKey) shiftDown = true;
+  }).keyup(function(e) {
+    if (e.keyCode == ctrlKey) ctrlDown = false;
+    if (e.keyCode == shiftKey) shiftDown = false;
+  });
+
+  $('.node-list-table tbody').find('tr').mousedown(function() {
+    if (ctrlDown) {
+      setRowColor($(this));
+      if(!$(this).hasClass('node-list-selected')) {
+        selected.splice(selected.indexOf($(this).index()), 1);
+      } else {
+        selected.push($(this).index());
+      }
+    } else if(shiftDown) {
+      if(selected.length > 0) {
+        start = selected[selected.length - 1] + 1;
+        end = $(this).index();
+
+        if(start > end) {
+          var tmp = start - 1; start = end; end = tmp - 1;
+        }
+
+        for(var i = start; i <= end; i++) {
+          if(selected.indexOf(i) < 0) {
+            selected.push(i);
+            setRowColor($('.node-list-table tbody tr').eq(i));
+            }
+        }
+      }
+    } else {
+      $('.node-list-selected').removeClass('node-list-selected');
+      $(this).addClass('node-list-selected');
+      selected = [$(this).index()];
+    }
+
+    // reset btn disables
+    $('.node-list-table tbody tr .btn').attr('disabled', false);
+    // show/hide group controls
+    if(selected.length > 1) {
+      $('.node-list-group-control a').attr('disabled', false);
+      for(var i = 0; i < selected.length; i++) {
+        $('.node-list-table tbody tr').eq(selected[i]).find('.btn').attr('disabled', true);
+      }
+    } else {
+      $('.node-list-group-control a').attr('disabled', true);
+    }
+    return false;
+  });
+
+    
+  $('#node-list-group-migrate').click(function() {
+    console.log(collectIds(selected));
+  });
+
+  $('.node-list-details').popover({
+    'placement': 'auto',
+    'html': true,
+    'trigger': 'hover'
+  });
+
+  $('.node-list-connect').popover({
+    'placement': 'left',
+    'html': true,
+    'trigger': 'click'
+  });
+
+  $('tbody a').mousedown(function(e) {
+    // parent tr doesn't get selected when clicked
+    e.stopPropagation();
+    });
+
+  $('tbody a').click(function(e) {
+    // browser doesn't jump to top when clicked the buttons
+    if(!$(this).hasClass('real-link')) {
+      return false;
+    }
+  });
+
+  /* group actions */
+
+  /* select all */
+  $('#node-list-group-select-all').click(function() {
+    $('.node-list-table tbody tr').each(function() {
+      var index = $(this).index();
+      if(selected.indexOf(index) < 0) {
+        selected.push(index);
+        $(this).addClass('node-list-selected');
+      }
+    });
+    if(selected.length > 0)
+      $('.node-list-group-control a').attr('disabled', false);
+    return false;
+  });
+
+  /* mass vm delete */
+  $('#node-list-group-delete').click(function() {
+    text = "Are you sure you want to delete the selected VMs?";
+    random_vm_pk = $('.vm-delete').eq(0).data('vm-pk');
+    addModalConfirmation(text, random_vm_pk, massDeleteVm, false);
+    return false;
+  });
+});
+
+function collectIds(rows) {
+  var ids = [];
+  for(var i = 0; i < rows.length; i++) {
+    var div = $('td:first-child div', $('.node-list-table tbody tr').eq(rows[i]));
+    ids.push(div.prop('id').replace('vm-', ''));
+  }
+  return ids;  
+}
+
+function setRowColor(row) {
+  if(!row.hasClass('vm-list-selected')) {
+    row.addClass('node-list-selected');
+  } else {
+    row.removeClass('node-list-selected');
+  }
+
+}

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

+<style>
+  .row {
+    margin-bottom: 15px;
+  }
+</style>
+<form method="POST" action="/dashboard/vm/create/">
+{% csrf_token %}
+<div class="row">
+  <div class="col-sm-10">
+  <select class="select form-control" id="vm-create-template-select" name="template-pk">
+    <option value="-1">Choose a VM template</option>
+    {% for template in templates %}
+      <option value="{{ template.pk }}">{{ template.name}}</option>
+    {% endfor %}
+  </select>
+  </div>
+</div> 
+
+<div class="row">
+  <div class="col-sm-5">
+    <a class="btn btn-info vm-create-advanced-btn">Advanced <i class="vm-create-advanced-icon icon-caret-down"></i></a>
+  </div>
+  <div class="col-sm-5 text-right">
+    <button id="vm-create-submit" type="submit" class="btn btn-success "><i class="icon-play"></i> Start</button>
+  </div>
+</div>
+
+<div class="vm-create-advanced">
+  <div class="row">
+    <div class="col-sm-12">
+      <h2>Resources</h2>
+    </div>
+    <p class="row">
+      <div class="col-sm-3">
+        <label for="vm-cpu-priority-slider"><i class="icon-trophy"></i> CPU priority</label>
+      </div>
+      <div class="col-sm-9">
+        <input name="cpu-priority" type="text" id="vm-cpu-priority-slider" class="vm-slider" value="20" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="20" 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> CPU count</label>
+      </div>
+      <div class="col-sm-9">
+        <input name="cpu-count" type="text" id="vm-cpu-count-slider" class="vm-slider" value="2" data-slider-min="0" data-slider-max="8" data-slider-step="1" data-slider-value="2" 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> RAM amount</label>
+      </div>
+      <div class="col-sm-9">
+        <input name="ram-size" type="text" id="vm-ram-size-slider" class="vm-slider" value="512" data-slider-min="128" data-slider-max="4096" data-slider-step="128" data-slider-value="512" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/> MiB  
+      </div>
+    </p>
+  </div>
+
+  <!-- disk -->
+  <div class="row">
+    <div class="col-sm-4">
+      <h2>Disks</h2>
+    </div>
+    <div class="col-sm-8" style="padding-top: 3px;">
+      <div class="js-hidden" style="padding-top: 15px; max-width: 450px;">
+        <select class="form-control" id="vm-create-disk-add-form" multiple name="disks">
+          {% for d in disks %}
+            <option value="{{ d.pk }}">{{ d.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="no-js-hidden">
+        <h3 id="vm-create-disk-list">
+          No disks are added!
+        </h3>
+        <h3 id="vm-create-disk-add">
+          <div class="input-group" style="max-width: 330px;">
+            <select class="form-control" id="vm-create-disk-add-select">         
+              <!-- options should be copied via js from above -->
+            </select>
+            <div class="input-group-btn">
+              <!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
+              <a href="#" id="vm-create-disk-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>
+            </div>
+          </div>
+        </h3>
+      </div>
+    </div>
+  </div>
+
+  <!-- network -->
+  <div class="row">
+    <div class="col-sm-4">
+      <h2>Network</h2> 
+    </div>
+    <style>
+      /* temporary inline css for dev */
+      a.hover-black {
+        color:white;
+      }
+
+      .hover-black:hover {
+        color: black /*#d9534f*/;
+        text-decoration: none;
+      }
+
+      .no-js-hidden {
+        display: none;
+      }
+    </style>
+    <div class="col-sm-8" style="padding-top: 3px;">
+      <div class="js-hidden" style="padding-top: 15px; max-width: 450px;">
+        <h4>Managed networks</h4>
+        <select class="form-control" id="vm-create-network-add-managed" multiple name="managed-vlans">
+          {% for v in vlans %}
+            <option value="{{ v.pk }}">{{ v.name }}</option>
+          {% endfor %}
+        </select>
+
+        <h4>Unmanaged networks</h4>
+        <select class="form-control" id="vm-create-network-add-unmanaged" multiple name="unmanaged-vlans">
+          {% for v in vlans %}
+            <option value="{{ v.pk }}">{{ v.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="no-js-hidden">
+        <h3 id="vm-create-network-list">
+          Not added to any network!
+        </h3>
+        <h3 id="vm-create-network-add">
+          <div class="input-group" style="max-width: 330px;">
+            <select class="form-control" id="vm-create-network-add-select">         
+              <!-- options should be copied via js from above -->
+            </select>
+            <span class="input-group-addon">
+              <input id="vm-create-network-add-checkbox-managed" type="checkbox" title data-original-title="Managed network?" style="-webkit-transform: scale(1.4, 1.4); margin-top: 4px;" checked/>
+            </span>
+            <div class="input-group-btn">
+              <!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
+              <a href="#" id="vm-create-network-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>
+            </div>
+          </div>
+        </h3>
+      </div>
+    </div>
+  </div>
+</div>
+</form>

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

+{% load i18n %}
+<h3>{% trans "Activity" %}</h3>
+<style>
+  .sub-timeline {
+    border-left: 3px solid green;
+    margin-left: 30px;
+    padding-left: 10px;
+  }
+</style>
+
+<div class="timeline">
+  {% for a in activity %}
+  <div class="activity" data-activity-id="{{ a.pk }}">
+    <span class="timeline-icon">
+      <i class="{% if not a.finished %} icon-refresh icon-spin {% else %}icon-plus{% endif %}"></i>
+    </span> 
+    <strong>{{ a.get_readable_name }}</strong>
+    {{ a.started|date:"Y-m-d. H:i" }}, {{ a.user }}
+      {% if a.instanceactivity_set.count > 0 %}
+        <div class="sub-timeline">
+          {% for s in a.instanceactivity_set.all %}
+            <div data-activity-id="{{ s.pk }}" class="sub-activity">
+            {{ s.get_readable_name }} - 
+            {% if s.finished %}
+              {{ s.finished|time:"H:i:s" }}
+            {% else %}
+              <i class="icon-refresh icon-spin" class="sub-activity-loading-icon"></i>
+            {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      {% endif %}
+  </div>
+  {% endfor %}
+  <div><span class="timeline-icon timeline-warning"><i class="icon-remove"></i></span> <strong>Removing</strong> 2013-11-21 15:32</div>
+  <div><span class="timeline-icon timeline-warning"><i class="icon-pause"></i></span> <strong>Suspending</strong> 2013-09-21 15:32</div>
+  <div><span class="timeline-icon"><i class="icon-ellipsis-vertical" ></i></span> <strong>(now)</strong></div>
+  <div><span class="timeline-icon"><i class="icon-truck"></i></span> <strong>Migrated to mega5</strong> 2013-04-21 15:32, ABC123</div>
+  <div><span class="timeline-icon"><i class="icon-refresh"></i></span> <strong>Forced reboot</strong> 2013-04-21 15:32, ABC123</div>
+  <div><span class="timeline-icon"><i class="icon-plus"></i></span> <strong>Created</strong> 2013-04-21 15:32, ABC123</div>
+</div>
+
+{% block extra_js %}
+<script src="{{ STATIC_URL }}dashboard/vm-details.js"></script>
+{% endblock %}

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

+<div class="row">
+  <div class="col-md-4">
+    <dl>
+      <dt>System:</dt>
+      <dd><i class="icon-linux"></i> Uhu Binux Optikai Rendszer</dd>
+      <dt>Description:</dt>
+      <dd><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est libero, hendrerit at posuere sed, molestie congue quam. </small></dd>
+    </dl>
+  </div>
+  <div class="col-md-8">
+<img src="/static/grafikon.png" style="width:45%"/>
+<img src="/static/grafikon.png" style="width:45%"/>
+<img src="/static/grafikon.png" style="width:45%"/>
+<img src="/static/grafikon.png" style="width:45%"/>
+  </div>
+</div>

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

+{% load i18n %}
+<form id="vm-details-resources-form" method="POST" action="">
+  {% csrf_token %}
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Name" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.name }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Enabled" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.enabled }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Priority" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.priority }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "CPU cores" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.num_cores }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "RAM size" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {% widthratio node.ram_size 1024000 1 %} MB </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Traits" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.traits.all }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Tags" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.tags.all }} </label>
+    </div>
+</p>
+
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Host owner" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host.owner }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Host IP" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host.ipv4 }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Shared IP" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host.shared_ip }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Host vlan" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host.vlan }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Host name" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host.groups.all }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Host name" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host.hostname }} </label>
+    </div>
+</p>
+
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Host name" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host.hostname }} </label>
+    </div>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "Host online" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.online }} </label>
+    </div>
+</p>
+
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="ram-slider"><i class="icon-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>
+</p>
+
+<p class="row">
+    <div class="col-sm-3">
+      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "CPU count" %}</label>
+    </div>
+    <div class="col-sm-9">
+      <label > {{ node.host. }} </label>
+    </div>
+</p>
+
+
+<p class="row">
+  <div class="col-sm-12">
+    <button type="submit" class="btn btn-success btn-sm" id="vm-details-resources-save"><i class="icon-save"></i> {% trans "Save resources" %}</button>
+  </div>
+</p>
+</form>
+{% block extra_js %}
+  <style>
+    label {padding-top: 6px;}
+  </style>
+{% endblock %}

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

+{% extends "dashboard/base.html" %}
+{% load i18n %}
+
+{% block content %}
+<div class="body-content">
+  <div class="page-header">
+    <h1>{{ node.name }} <small>{{ node.get_connect_host }}</small></h1>
+  </div>
+  <div class="row">
+    <div class="col-md-4" id="vm-info-pane">
+      <div class="big">
+        <span class="label label-success">{{ node.enabled }}</span>
+        <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="#"><i class="icon-refresh"></i> Flash</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="{{ node.pk }}" class="vm-delete" href="{% url "dashboard.views.delete-vm" pk=node.pk %}"><i class="icon-remove"></i> Discard</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-8" id="vm-detail-pane">
+      <div class="panel panel-default" id="vm-detail-panel">
+        <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>
+              {% trans "Home" %}</a></li>
+          <li>
+            <a href="#resources" data-toggle="pill" class="text-center">
+              <i class="icon-tasks icon-2x"></i><br>
+              {% trans "Resources" %}</a></li>
+	  <li>
+            <a href="#activity" data-toggle="pill" class="text-center">
+              <i class="icon-time icon-2x"></i><br>
+              {% trans "Activity" %}</a></li>
+        </ul>
+
+        <div class="tab-content panel-body">
+          <div class="tab-pane active" id="home">{% include "dashboard/node-detail-home.html" %}</div>
+          <div class="tab-pane" id="resources">{% include "dashboard/node-detail-resources.html" %}</div>
+          <div class="tab-pane" id="activity">{% include "dashboard/node-detail-activity.html" %}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}

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

+{% extends "dashboard/base.html" %}
+{% load i18n %}
+{% 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">
+      <div class="panel-heading">
+        <h3 class="no-margin"><i class="icon-desktop"></i> Your nodes</h3>
+      </div>
+      <div class="panel-body node-list-group-control">
+        <p>
+          <strong>Group actions</strong>
+          <button id="node-list-group-select-all" class="btn btn-info btn-xs">Select all</button>
+          <a class="btn btn-default btn-xs" id="node-list-group-migrate" disabled><i class="icon-truck"></i> Migrate</a>
+          <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-refresh"></i> Reboot</a>
+          <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-off"></i> Shutdown</a>
+          <a id="node-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
+        </p>
+      </div>
+      <div class="panel-body">
+        {% render_table table %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .popover {
+    max-width: 600px;
+  }
+
+  .node-list-selected, .node-list-selected td {
+    background-color: #e8e8e8 !important;
+  }
+
+  .node-list-selected:hover, .node-list-selected:hover td {
+    background-color: #d0d0d0 !important;
+  }
+
+  .node-list-selected td:first-child {
+    font-weight: bold;
+  }
+
+  .node-list-table-thin {
+    width: 10px;
+  }
+
+  .node-list-table-admin {
+    width: 130px;
+  }
+</style>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ STATIC_URL}}dashboard/node-list.js"></script>
+{% endblock %}

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

+
+<div class="btn-group">
+  <button type="button" class="btn btn-xs btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+  <ul class="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-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Discard</a></li>
+  </ul>
+</div>

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

+
+<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">
+  <i class="icon-pencil"></i>
+</a>
+<a href="#" class="btn btn-default btn-xs node-list-connect" data-toggle="popover"
+  data-content='
+  Belépés: <input style="width: 300px;" type="text" class="form-control" value="ssh xyz@vm.ik.bme.hu -p22312"/>
+  Jelszó: <input style="width: 300px;" type="text" class="form-control" value="asdfkicsiasdfkocsi"/>
+'>Connect</a>

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

+<a class="btn btn-info btn-xs node-list-details" href="#" data-toggle="popover"
+  data-content='
+  <h4>Quick details</h4>
+  <dl class="dl-horizontal">
+    <dt>Number of cores:</dt><dd>{{ record.num_cores }}</dd>
+    <dt>Memory:</dt> <dd>{{ record.ram_size }} Mebibytes</dd>
+    <dt>Architecture:</td><dd>{{ record.arch }}</dd>
+  </dl>
+  <dl>
+    <dt>IPv4 address:</dt><dd>{{ record.ipv4 }}10.9.8.7</dd>
+      <dt>IPv6 address:</dt><dd> 2001:2001:2001:2001:2001:2001::</dd>
+      <dt>DNS name:</dt><dd>1825.vm.ik.bme.hu</dd>
+    </ul>
+'>Details</a>

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

+<div id="node-{{ record.pk }}">{{ record.pk }}</div>

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

+            
+            <tr>
+              <!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
+              <td>
+                <div id="vm-1{{ c }}">1{{ c }}</div>
+              </td>
+              <td><a href="" class="real-link">network-devenv</a></td>
+              <td>running</td>
+              <td>10 days</td>
+              <td>1 month</td>
+              <td>
+                <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">
+                  <i class="icon-pencil"></i>
+                </a>
+                <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
+                  data-content='
+                  Belépés: <input style="width: 300px;" type="text" class="form-control" value="ssh cloud@vm.ik.bme.hu -p22312"/>
+                  Jelszó: <input style="width: 300px;" type="text" class="form-control" value="asdfkicsiasdfkocsi"/>
+                  '>Connect</a>
+              </td>
+              <td>
+                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover" 
+                  data-content='
+                  <h4>Quick details</h4>
+                  <dl class="dl-horizontal">
+                    <dt>Number of cores:</dt><dd>4</dd>
+                    <dt>Memory:</dt> <dd>512 MB</dd>
+                    <dt>Architecture:</td><dd>x86-64</dd>
+                  </dl>
+                  <dl>
+                    <dt>IPv4 address:</dt><dd>10.9.8.7</dd>
+                    <dt>IPv6 address:</dt><dd> 2001:2001:2001:2001:2001:2001::</dd>
+                    <dt>DNS name:</dt><dd>1825.vm.ik.bme.hu</dd>
+                  </ul>
+                  '>Details</a>
+              </td>
+              <td>
+                <div class="btn-group">
+                  <button type="button" class="btn btn-xs btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <ul class="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>
+                  </ul>
+                </div>
+              </td>
+            
+            </tr>