index-vm.html 5.18 KB
Newer Older
1 2 3 4 5
{% load i18n %}
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="pull-right toolbar">
      <div class="btn-group">
6
        <a href="#index-graph-view" data-index-box="vm" class="btn btn-default btn-xs"
7 8
          data-container="body"
          title="{% trans "summary view" %}"><i class="fa fa-dashboard"></i></a>
9
        <a href="#index-list-view" data-index-box="vm" class="btn btn-default btn-xs disabled"
10 11
          data-container="body"
          title="{% trans "list view" %}"><i class="fa fa-list"></i></a>
12
      </div>
13
      <span class="btn btn-default btn-xs infobtn" data-container="body" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="fa fa-info-circle"></i></span>
14 15
    </div>
    <h3 class="no-margin">
16 17 18 19 20 21 22 23
      <span class="visible-xs">
        <i class="fa fa-desktop"></i>
        {% trans "VMs" %}
      </span>
      <span class="hidden-xs">
        <i class="fa fa-desktop"></i>
        {% trans "Virtual machines" %}
      </span>
24 25 26
    </h3>
  </div>
  <div class="list-group" id="vm-list-view">
27 28
    <div id="dashboard-vm-list">
      {% for i in instances %}
29 30
      <a href="{{ i.get_absolute_url }}" class="list-group-item
        {% if forloop.last and instances|length < 5 %} list-group-item-last{% endif %}">
31
        <span class="index-vm-list-name">
32
          <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
33 34
          {{ i.name }}
        </span>
35
        <small class="text-muted index-vm-list-host">
36 37 38
          {% if i.owner == request.user %}{{ i.short_hostname }}
          {% else %}{{i.owner.profile.get_display_name}}{% endif %}
        </small>
39 40
        <div class="pull-right dashboard-vm-favourite" data-vm="{{ i.pk }}">
          {% if i.fav %}
41
            <i class="fa fa-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
42
          {% else %}
43
            <i class="fa fa-star-o text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
44 45
          {% endif %}
        </div>
46
      <div style="clear: both;"></div>
47
      </a>
48 49 50 51
      {% empty %}
        <div class="list-group-item list-group-item-last">
          {% trans "You have no virtual machines." %}
        </div>
52
      <div id="empty-vm-help">
53
        {% trans "Use the <strong>new</strong> button to start a new VM" %}<br />
54 55
        <i class="fa fa-arrow-down"></i>
      </div>
56 57
      {% endfor %}
    </div>
58
    <div class="list-group-item list-group-footer">
59
      <div class="row">
60
        <div class="col-xs-6">
Kálmán Viktor committed
61
        <form action="{% url "dashboard.views.vm-list" %}" method="GET" id="dashboard-vm-search-form">
62
          <div class="input-group input-group-sm">
Kálmán Viktor committed
63 64 65
            <input id="dashboard-vm-search-input" type="text" class="form-control" name="s" 
            placeholder="{% trans "Search..." %}" />
            <div class="input-group-btn">
66
              <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
Kálmán Viktor committed
67
            </div>
68
          </div>
Kálmán Viktor committed
69
        </form>
70 71
        </div>
        <div class="col-xs-6 text-right">
72
          <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.vm-list" %}">
73
            <i class="fa fa-chevron-circle-right"></i>
74
            {% if more_instances > 0 %}
75 76 77 78 79
            {% blocktrans count counter=more_instances %}
              <strong>{{ counter }}</strong>  more
              {% plural %}
              <strong>{{ counter }}</strong>  more
            {% endblocktrans %}
80 81 82
            {% else %}
              {% trans "list" %}
            {% endif %}
83
          </a>
84
          <a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %}</a>
85 86 87 88 89
        </div>
      </div>
    </div>
  </div>
  <div class="panel-body" id="vm-graph-view" style="display: none">
90 91 92
    <p class="pull-right">
    <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-max="{{ request.user.profile.instance_limit }}" data-width="100" data-height="100" data-readOnly="true" value="{{ instances|length|add:more_instances }}">
    </p>
93
    <span class="bigbig">{% blocktrans with count=running_vm_num %}<big>{{ count }}</big> running{% endblocktrans %}</span>
94
      <ul class="list-inline" style="max-height: 95px; overflow: hidden;">
95
        {% for vm in running_vms %}
96 97
        <li style="display: inline-block; padding: 2px;">
          <a href="{{vm.get_absolute_url}}" title="{{vm.primary_host.get_fqdn}}"  class="label label-success">
98
            <i class="fa {{vm.get_status_icon}}"></i> {{vm.name}}
99 100
          </a>
        </li>
101
        {% endfor %}
102 103 104
      </ul>

    <div class="clearfix"></div>
105 106
    <div>
      <a style="float: right; margin-top: 17px;" href="{% url "dashboard.views.vm-list" %}" class="btn btn-primary btn-xs">
107
        <i class="fa fa-chevron-circle-right"></i>
108 109 110 111 112
        {% blocktrans count counter=instances|length|add:more_instances %}
          <strong>{{ counter }}</strong> machine total
          {% plural %}
          <strong>{{ counter }}</strong> machines total
        {% endblocktrans %}
113
      </a>
114
      <p class="big text-warning">{% blocktrans with count=stopped_vm_num %}<big>{{ count }}</big> stopped{% endblocktrans %}</p>
115 116 117
    </div>
  </div>
</div>