merge siliconbrain/tmp

circle/dashboard/static/dashboard/dashboard.css

@@ -157,3 +157,40 @@ body {
 #vm-list-rename-name {
   max-width: 100px;
 }
+
+.label-tag {
+  /* pass */
+}
+
+#vm-details-tags-form {
+  margin-top: 15px;
+  max-width: 250px;
+}
+
+.vm-details-remove-tag {
+  color: white;
+  padding-left: 5px;
+}
+
+.vm-details-remove-tag:hover {
+  cursor: pointer;
+  color: black;
+  text-decoration: none;
+}
+
+/* small buttons for tags, copied from Bootstraps input-sm, bnt-sm */
+.btn-tags {
+  padding: 3px 6px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.input-tags {
+  height: 22px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+/* --- */

circle/dashboard/static/dashboard/dashboard.js

@@ -41,8 +41,15 @@ $(function () {
     window.location.hash = $(this).attr('href');
   });
 
-  if (window.location.hash)
+  if (window.location.hash) {
+    if(window.location.hash.substring(1,4) == "ipv")
+      $("a[href=#network]").tab('show');
     $("a[href=" + window.location.hash +"]").tab('show');
+  }
+
+  /* scroll to top if there is a message */
+  if($(".messagelist").children(".alert").length > 0)
+    $('body').animate({scrollTop: 0});
 
   addSliderMiscs();
 

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/static/dashboard/vm-details.js

@@ -51,6 +51,30 @@ $(function() {
     });
     return false;
   });
+
+  /* remove tag */
+  $('.vm-details-remove-tag').click(function() {
+    var to_remove =  $.trim($(this).parent('div').text());
+    var clicked = $(this);
+    $.ajax({
+      type: 'POST',
+      url: location.href,
+      headers: {"X-CSRFToken": getCookie('csrftoken')}, 
+      data: {'to_remove': to_remove},
+      success: function(re) {
+        if(re['message'].toLowerCase() == "success") {
+          $(clicked).closest(".label").fadeOut(500, function() {
+            $(this).remove();
+          });
+        }
+      },
+      error: function() {
+        addMessage(re['message'], 'danger');
+      }
+
+    });
+    return false;
+  });
 });
 
 function checkNewActivity() {

circle/dashboard/tables.py

-from django_tables2 import Table  # A
-from django_tables2.columns import TemplateColumn  # LinkColumn
+from django_tables2 import Table, A
+from django_tables2.columns import LinkColumn, TemplateColumn, Column
 
-from vm.models import Instance
+from vm.models import Instance, Node
 from django.utils.translation import ugettext_lazy as _
 
 
@@ -40,3 +40,23 @@ class VmListTable(Table):
         attrs = {'class': ('table table-bordered table-striped table-hover '
                            'vm-list-table')}
         fields = ('pk', 'name', 'state', 'time_of_suspend', 'time_of_delete', )
+
+
+class NodeListTable(Table):
+
+    pk = Column(
+        verbose_name="ID",
+    )
+
+    name = LinkColumn(
+        'dashboard.views.node-detail',
+        args=[A('pk')],
+        attrs={'a': {'class': 'real-link'}}
+    )
+
+    class Meta:
+        model = Node
+        attrs = {'class': ('table table-bordered table-striped table-hover '
+                           'node-list-table')}
+        fields = ('pk', 'name', 'host', 'enabled', 'created', 'modified',
+                  'priority', 'overcommit', )

circle/dashboard/templates/dashboard/base.html

@@ -26,6 +26,7 @@
       <a class="navbar-brand" href="/dashboard/">{% block header-site %}CIRCLE{% endblock %}</a>
       <!-- temporarily -->
       <a class="navbar-brand pull-right" href="/network/" style="color: white; font-size: 10px;">Network</a>
+      <a class="navbar-brand pull-right" href="/admin/" style="color: white; font-size: 10px;">Admin</a>
       <a class="navbar-brand pull-right" href="/login/?next={% url "dashboard.index" %}" style="color: white; font-size: 10px;">Login</a>
     </div>
 

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

@@ -3,8 +3,8 @@
   <div class="panel-heading">
     <div class="pull-right toolbar">
       <div class="btn-group">
-        <a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
-        <a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a>
+        <a href="#node-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
+        <a href="#node-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a>
       </div>
       <span class="btn btn-default btn-xs infobtn" title="Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.  "><i class="icon-info-sign"></i></span>
     </div>
@@ -12,35 +12,32 @@
       <i class="icon-sitemap"></i> {% trans "Compute nodes" %}
     </h3>
   </div>
-  <div class="panel-body" id="vm-graph-view" style="">
+  <div class="panel-body" id="node-graph-view" style="">
     <p class="pull-right">  <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="60" data-height="60" data-readOnly="true" value="68"></p>
     <p><span class="big"><big>13</big> running </span>
     + <big>3</big> off + <big>3</big> missing</p>
       <ul class="list-inline">
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-warning"><i class="icon-off"></i> szilva</li>
-        <li class="label label-warning"><i class="icon-off"></i> korte</li>
-        <li class="label label-warning"><i class="icon-off"></i> korte</li>
-        <li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
-        <li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
-        <li class="label label-danger"><i class="icon-question"></i> szilva</li>
-      </ul>
+   {% for i in nodes %}
+	<li class="label label-success"><i class="icon-{% if i.enabled == True %}play-sign{% else %}pause{% endif %}"></i>{{ i.name }}</li>
+   {% endfor %}
+   </ul>
 
     <div class="clearfix"></div>
-    <div class="text-right">
-      <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong>  more  </a> 
-    </div>
-  </div>
+ <div class="row">
+	<div class="col-sm-6 col-xs-6 input-group input-group-sm">
+          <input type="text" class="form-control" placeholder="Search..." />
+            <div class="input-group-btn">
+            	<button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
+	    </div>
+        </div>
+        <div class="col-sm-6 text-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> <strong>{{ more_nodes }}</strong>  more
+          </a>
+         {% endif %}
+	<a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="icon-plus-sign"></i> new </a>
+    	</div>
+</div>
+</div>
 </div>

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;}