vm-list.html 6.78 KB
Newer Older
Kálmán Viktor committed
1 2
{% extends "dashboard/base.html" %}
{% load i18n %}
3 4 5

{% block title-page %}{% trans "Virtual machines" %}{% endblock %}

Kálmán Viktor committed
6
{% block content %}
7

Kálmán Viktor committed
8 9 10 11
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
12 13
        <div class="pull-right table-sorting">
          {% trans "Sorting ... " %}
14
          <!--<i class="fa fa-refresh fa-spin fa-2x"></i>-->
15
        </div>
16
        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Virtual machines" %}</h3>
Kálmán Viktor committed
17 18
      </div>
      <div class="panel-body">
19 20 21 22 23
        <div class="row">
          <div class="col-md-8 vm-list-group-control" id="vm-mass-ops">
            <strong>{% trans "Group actions" %}</strong>
            <button id="vm-list-group-select-all" class="btn btn-info btn-xs">{% trans "Select all" %}</button>
            {% for o in ops %}
24
              <a href="{{ o.get_url }}" class="btn btn-xs btn-{{ o.effect }} mass-operation"
25 26 27 28 29 30 31 32 33 34 35
               title="{{ o.name|capfirst }}" disabled>
                <i class="fa fa-{{ o.icon }}"></i>
              </a>
            {% endfor %}
          </div><!-- .vm-list-group-control -->
          <div class="col-md-4" id="vm-list-search">
            <form action="" method="GET">
              <div class="input-group">
                {{ search_form.s }}
                <div class="input-group-btn">
                  {{ search_form.stype }}
36
                </div>
37
                <label class="input-group-addon input-tags" title="{% trans "Include deleted VMs" %}"
38 39
                  id="vm-list-search-checkbox-span" data-container="body">
                  {{ search_form.include_deleted }}
40
                </label>
41
                <div class="input-group-btn">
42
                  <button type="submit" class="btn btn-primary input-tags">
43 44 45 46 47 48 49 50
                    <i class="fa fa-search"></i>
                  </button>
                </div>
              </div><!-- .input-group -->
            </form>
          </div><!-- .col-md-4 #vm-list-search -->
        </div><!-- .row -->
      </div><!-- .panel-body -->
Kálmán Viktor committed
51
      <div class="panel-body">
52 53
        <table class="table table-bordered table-striped table-hover vm-list-table"
         id="vm-list-table">
54
          <thead><tr>
55
              <th data-sort="int" class="orderable pk sortable vm-list-table-thin" style="min-width: 50px;">
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
                {% trans "ID" as t %}
                {% include "dashboard/vm-list/header-link.html" with name=t sort="pk" %}
              </th>
              <th data-sort="string" class="name orderable sortable">
                {% trans "Name" as t %}
                {% include "dashboard/vm-list/header-link.html" with name=t sort="name" %}
              </th>
              <th data-sort="string">
                {% trans "State" as t %}
                {% include "dashboard/vm-list/header-link.html" with name=t sort="status" %}
              </th>
              <th data-sort="string" class="orderable sortable">
                {% trans "Owner" as t %}
                {% include "dashboard/vm-list/header-link.html" with name=t sort="owner" %}
              </th>
71 72 73 74
              <th data-sort="string" class="orderable sortable">
                {% trans "Lease" as t %}
                {% include "dashboard/vm-list/header-link.html" with name=t sort="lease" %}
              </th>
75 76 77 78
              <th data-sort="string" class="orderable sortable">
                {% trans "Memory" as t %}
                {% include "dashboard/vm-list/header-link.html" with name=t sort="ram_size" %}
              </th>
79 80 81 82 83 84 85 86 87 88
              {% if user.is_superuser %}
                <th data-sort="string" class="orderable sortable">
                  {% trans "IP address" as t %}
                  {% include "dashboard/vm-list/header-link.html" with name=t sort="ip_addr" %}
                </th>
                <th data-sort="string" class="orderable sortable">
                  {% trans "Node" as t %}
                  {% include "dashboard/vm-list/header-link.html" with name=t sort="node" %}
                </th>
              {% endif %}
89 90
          </tr></thead><tbody>
          {% for i in object_list %}
91
          <tr class="{% cycle 'odd' 'even' %}" data-vm-pk="{{ i.pk }}">
92
            <td class="pk"><div id="vm-{{i.pk}}">{{i.pk}}</div> </td>
93 94 95
            <td class="name"><a class="real-link" href="{% url "dashboard.views.detail" i.pk %}">
                {{ i.name }}</a>
            </td>
96
            <td class="state">
97
              <i class="fa fa-fw
98
                {% if show_acts_in_progress and i.is_in_status_change %}
99 100 101 102 103
                  fa-spin fa-spinner
                {% else %}
                {{ i.get_status_icon }}{% endif %}"></i>
              <span>{{ i.get_status_display }}</span>
            </td>
104
            <td>
105 106 107 108 109 110
              {% if i.owner.profile %}
                {{ i.owner.profile.get_display_name }}
              {% else %}
                {{ i.owner.username }}
              {% endif %}
              {# include "dashboard/_display-name.html" with user=i.owner show_org=True #}
111
            </td>
112
            <td class="lease "data-sort-value="{{ i.lease.name }}">
113 114 115 116 117 118
              <span title="{{ i.time_of_suspend|timeuntil }} | {{ i.time_of_delete|timeuntil }}">
                {{ i.lease.name }}
              </span>
            </td>
            <td class="memory "data-sort-value="{{ i.ram_size }}">
              {{ i.ram_size }} MiB
119
            </td>
120
            {% if user.is_superuser %}
121 122 123
            <td class="ip_addr "data-sort-value="{{ i.ipv4 }}">
              {{ i.ipv4|default:"-" }}
            </td>
124 125 126
            <td class="node "data-sort-value="{{ i.node.normalized_name }}">
              {{ i.node.name|default:"-" }}
            </td>
127
            {% endif %}
128 129
          </tr>
          {% empty %}
130
          <tr>
131
            <td colspan="7">
132 133 134 135 136 137 138
              {% if request.GET.s %}
                <strong>{% trans "No result." %}</strong>
              {% else %}
                <strong>{% trans "You have no virtual machines." %}</strong>
              {% endif %}
            </td>
          </tr>
139 140 141
          {% endfor %}
        </tbody>
      </table>
142 143 144
    </div>
  </div>
</div>
145 146
</div>

147 148 149
<div class="alert alert-info">
  You can filter the list by certain attributes (owner, name, status, tags) in the following way: "owner:John Doe name:my little server". If you don't specify any attribute names the filtering will be done by name.
</div>
150

151
<div class="alert alert-info">
152 153
  {% trans "You can select multiple vm instances while holding down the <strong>CTRL</strong> key." %}
  {% trans "If you want to select multiple instances by one click select an instance then hold down <strong>SHIFT</strong> key and select another one!" %}
154 155
</div>

156 157 158
{% endblock %}

{% block extra_js %}
159
  <script src="{{ STATIC_URL}}dashboard/vm-list.js"></script>
160
  <script src="{{ STATIC_URL}}dashboard/js/stupidtable.min.js"></script>
Kálmán Viktor committed
161
{% endblock %}