node-detail.html

{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}
<div class="body-content">
  <div class="page-header">
    <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 }}"/> 
         <button type="submit" id="node-details-rename-submit" class="btn">{% trans "Rename" %}</button>
       </form>
  </div>
  <div id="node-details-h1-name">    
      {{ node.name }} 
  </div>
</h1>
      <small>{{ node.get_connect_host }}</small>
  </div>
  <div class="row">
    <div class="col-md-4" id="node-info-pane">
      <div id="node-info-data" class="big">
      <span id="node-details-state" class="label {% if node.state == 'ONLINE' %}label-success
			{% elif node.state == 'MISSING' %}label-danger
			{% elif node.state == 'DISABLED' %}label-warning
			{% elif node.state == 'OFFLINE' %}label-warning
			{% endif %}">{{ node.get_status_display|upper }}</span>
<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>
  <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 href="#"><i class="icon-cloud-upload"></i> Flush</a></li>
  {% if node.enabled %}
    <li><a style="display:none" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-check"></i> Enable</a>
    <a style="display:block" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Disable</a></li>
  {% else %}
    <li><a style="display:block" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}" >
	<i class="icon-check"></i> Enable</a>
      <a style="display:none" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}" ><i class="icon-remove"></i> Disable</a></li>
  {% endif %}
    <li><a data-node-pk="{{ node.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-trash"></i> Delete</a></li>
  </ul>
</div>
      </div>
    </div>
    <div class="col-md-8" id="node-detail-pane">
      <div class="panel panel-default" id="node-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="#virtualmachines" data-toggle="pill" class="text-center">
              <i class="icon-desktop icon-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>
              {% trans "Activity" %}</a></li>
	</ul>

        <div id="panel-body"  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 class="tab-pane" id="virtualmachines">{% include "dashboard/node-detail/vm.html" %}</div>
  	</div>
      </div>
    </div>
  </div>
</div>
<style>
  .popover {
    max-width: 600px;
  }
</style>

{% endblock %}
{% block extra_js %}
<script src="{{ STATIC_URL}}dashboard/node-details.js"></script>
{% endblock %}