vm-detail.html 7.76 KB
Newer Older
1 2 3
{% extends "dashboard/base.html" %}
{% load i18n %}

4 5
{% block title-page %}{{ instance.name }} | vm{% endblock %}

6
{% block content %}
7 8 9 10

{% if instance.is_base %}
<div class="alert alert-info alert-new-template">
  <strong>{% trans "This is the master vm of your new template" %}</strong>
11 12
  <div id="vm-details-template-tour-button" class="pull-right">
    <a href="#" class="btn btn-default btn-lg pull-right vm-details-start-template-tour">
13
      <i class="fa fa-play"></i> {% trans "Start template tutorial" %}
14 15
    </a>
  </div>
16
  <ol>
17
    <li>{% trans "Modify the virtual machine to suit your needs <strong>(optional)</strong>" %}
18
      <ul>
19 20 21 22
        <li>{% trans "Change the name and description" %}</li>
        <li>{% trans "Change the resources (CPU and RAM)" %}</li>
        <li>{% trans "Attach or detach disks" %}</li>
        <li>{% trans "Add or remove network interfaces" %}</li>
23 24
      </ul>
    </li>
25
    <li>{% trans "Deploy the virtual machine" %}</li>
26 27 28
    <li>{% trans "Connect to the machine" %}</li>
    <li>{% trans "Do all the needed installations/customizations" %}</li>
    <li>{% trans "Log off from the machine" %}</li>
29
    <li>
30
      {% trans "Press the Save as template button" %}
31
    </li>
32 33 34
    <li>
      {% trans "Delete this virtual machine <strong>(optional)</strong>" %}
    </li>
35 36 37
  </ol>
</div>
{% endif %}
38 39
<div class="body-content">
  <div class="page-header">
40
    <div class="pull-right" id="ops">
41
      {% include "dashboard/vm-detail/_operations.html" %}
42
    </div>
43
    <h1>
44
      <div id="vm-details-rename" class="vm-details-home-rename-form-div">
45 46
        <form action="" method="POST" id="vm-details-rename-form">
          {% csrf_token %}
47 48 49 50 51 52
          <div class="input-group vm-details-home-name">
            <input id="vm-details-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ instance.name }}"/> 
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm vm-details-rename-submit">{% trans "Rename" %}</button>
            </span>
          </div>
53 54
        </form>
      </div>
55
      <div id="vm-details-h1-name" class="vm-details-home-edit-name">
56 57
        {{ instance.name }} 
      </div>
58 59 60
      <small>{{ instance.primary_host.get_fqdn }}</small>
    </h1>
    <div style="clear: both;"></div>
61 62
  </div>
  <div class="row">
63
    <div class="col-md-4" id="vm-info-pane">
64
      <div class="big">
65 66 67 68
        <span id="vm-details-state" class="label label-success">
          <i class="{{ instance.get_status_icon }}"></i> 
          <span>{{ instance.get_status_display|upper }}</span>
        </span>
69
      </div>
70 71 72 73
      <h3>{% trans "Connection details" %}</h3>
      <dl class="dl-horizontal vm-details-connection">
        <dt>{% trans "Protocol" %}</dt>
        <dd>{{ instance.access_method|upper }}</dd>
74 75 76 77 78 79 80 81 82
          <dt>{% trans "Host" %}</dt>
          <dd>
            {% if instance.get_connect_port %}
              {{ instance.get_connect_host }}:<strong>{{ instance.get_connect_port }}</strong>
            {% else %}
              <strong>{% trans "The required port for this protocol is not forwarded." %}</strong> 
            {% endif %}
          </dd>

83
        {% if instance.ipv6 and instance.get_connect_port %}
84
          <dt>{% trans "Host (IPv6)" %}</dt>
85
          <dd>{{ ipv6_host }}:<strong>{{ ipv6_port }}</strong></dd>
86 87
        {% endif %}

88 89 90
        <dt>{% trans "Username" %}</dt>
        <dd>cloud</dd>
        <dt>{% trans "Password" %}</dt>
91 92
        <dd>
          <div class="input-group">
93 94
            <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags" 
            value="{{ instance.pw }}" spellcheck="false"/>
95
            <span class="input-group-addon input-tags" id="vm-details-pw-show">
96
              <i class="fa fa-eye" id="vm-details-pw-eye" title="Show password"></i>
97 98 99 100
            </span>
          </div>
        </dd>
        <dd style="font-size: 10px; text-align: right; padding-top: 8px;">
101
          <a id="vm-details-pw-change" href="#">{% trans "Generate new password!" %}</a>
102
        </dd>
103
        <div id="vm-details-pw-confirm"> {% comment %} TODO Couldn't this use a modal? {% endcomment%}
104
          <dt>
105
            {% trans "Are you sure?" %}
106 107
          </dt>
          <dd>
108 109
            <a href="#" class="vm-details-pw-confirm-choice label label-success" data-choice="1" data-vm="{{ instance.pk }}">{% trans "Yes" %}</a> / 
            <a href="#" class="vm-details-pw-confirm-choice label label-danger" data-choice="0">{% trans "No" %}</a>
110 111
          </dd>
        </div>
112
      </dl>
113

114
      <div class="input-group" id="dashboard-vm-details-connect-command">
115
        <span class="input-group-addon input-tags">{% trans "Command" %}</span>
116
        <input type="text" spellcheck="false" 
117 118
        value="{% if instance.get_connect_command %}{{ instance.get_connect_command }}{% else %}
        {% trans "Connection is not possible." %}{% endif %}" 
119
        id="vm-details-connection-string" class="form-control input-tags" />
120
        <span class="input-group-addon input-tags" id="vm-details-connection-string-copy">
121
          <i class="fa fa-copy" title="{% trans "Select all" %}"></i>
122 123
        </span>
      </div>
124
    </div>
125
    <div class="col-md-8" id="vm-detail-pane">
126 127 128
      <div class="panel panel-default" id="vm-detail-panel">
        <ul class="nav nav-pills panel-heading">
          <li class="active">
129
            <a href="#home" data-toggle="pill" data-target="#_home" class="text-center">
130
              <i class="fa fa-compass icon-2x"></i><br>
131 132
              {% trans "Home" %}</a>
          </li>
133
          <li>
134
            <a href="#resources" data-toggle="pill" data-target="#_resources" class="text-center">
135
              <i class="fa fa-tasks icon-2x"></i><br>
136 137
              {% trans "Resources" %}</a>
          </li>
138
          <li{% if not instance.is_console_available %} class="disabled"{% endif %}>
139
            <a href="#console" data-toggle="pill" data-target="#_console" class="text-center">
140
              <i class="fa fa-desktop icon-2x"></i><br>
141 142
              {% trans "Console" %}</a></li>
          <li>
143
            <a href="#access" data-toggle="pill" data-target="#_access" class="text-center">
144
              <i class="fa fa-group icon-2x"></i><br>
145 146
              {% trans "Access" %}</a>
          </li>
147
          <li>
148
            <a href="#network" data-toggle="pill" data-target="#_network" class="text-center">
149
              <i class="fa fa-globe icon-2x"></i><br>
150 151
              {% trans "Network" %}</a>
          </li>
152
          <li>
153
            <a href="#activity" data-toggle="pill" data-target="#_activity" class="text-center">
154
              <i class="fa fa-time icon-2x"></i><br>
155 156
              {% trans "Activity" %}</a>
          </li>
157 158 159
        </ul>

        <div class="tab-content panel-body">
160 161 162 163 164 165
          <div class="tab-pane active" id="_home">{% include "dashboard/vm-detail/home.html" %}</div>
          <div class="tab-pane" id="_resources">{% include "dashboard/vm-detail/resources.html" %}</div>
          <div class="tab-pane" id="_console">{% include "dashboard/vm-detail/console.html" %}</div>
          <div class="tab-pane" id="_access">{% include "dashboard/vm-detail/access.html" %} </div>
          <div class="tab-pane" id="_network">{% include "dashboard/vm-detail/network.html" %}</div>
          <div class="tab-pane" id="_activity">{% include "dashboard/vm-detail/activity.html" %}</div>
166 167 168 169 170 171 172
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}
173 174

{% block extra_js %}
175
  <script src="{{ STATIC_URL }}dashboard/bootstrap-tour.min.js"></script>
176 177
  <script src="{{ STATIC_URL }}dashboard/vm-details.js"></script>
  <script src="{{ STATIC_URL }}dashboard/vm-common.js"></script>
178
  <script src="{{ STATIC_URL }}dashboard/vm-console.js"></script>
179
  <script src="{{ STATIC_URL }}dashboard/disk-list.js"></script>
180
  <script src="{{ STATIC_URL }}dashboard/vm-tour.js"></script>
181
{% endblock %}