vm-detail.html 10.7 KB
Newer Older
1
{% extends "dashboard/base.html" %}
2
{% load staticfiles %}
3
{% load i18n %}
4
{% load compressed %}
5

6 7
{% block title-page %}{{ instance.name }} | vm{% endblock %}

8
{% block content %}
9 10

{% if instance.is_base %}
11
<div class="alert alert-info alert-new-template" id="alert-new-template" style="position: relative;">
12 13 14
  <form action="{% url "dashboard.views.vm-toggle-tutorial" pk=instance.pk %}"
    method="POST">
    {% csrf_token %}
15
    <input name="hidden" type="hidden"
16
     value="{{ hide_tutorial|yesno:"false,true" }}"/>
17
    <button type="submit"
18
      id="dashboard-tutorial-toggle" class="btn btn-sm pull-right btn-success">
19
      <i class="fa fa-caret-{% if hide_tutorial %}down{% else %}up{% endif %}"></i>
20 21 22
      {% trans "Toggle tutorial panel" %}
    </button>

23
    <a href="#" class="btn btn-default btn-sm pull-right"
24
      id="vm-details-start-template-tour">
25
      <i class="fa fa-play"></i> {% trans "Start template tutorial" %}
26
    </a>
27 28 29
  </form>
  <strong>{% trans "This is the master vm of your new template" %}</strong>
  <ol {% if hide_tutorial %}style="display: none;"{% endif %}>
30
    <li>{% trans "Modify the virtual machine to suit your needs <strong>(optional)</strong>" %}
31
      <ul>
32 33
        <li>{% trans "Change the description" %}</li>
        <li>{% trans "Change resources (CPU and RAM)" %}</li>
34 35
        <li>{% trans "Attach or detach disks" %}</li>
        <li>{% trans "Add or remove network interfaces" %}</li>
36 37
      </ul>
    </li>
38
    <li>{% trans "Deploy the virtual machine" %}</li>
39 40 41
    <li>{% trans "Connect to the machine" %}</li>
    <li>{% trans "Do all the needed installations/customizations" %}</li>
    <li>{% trans "Log off from the machine" %}</li>
42
    <li>
43
      {% trans "Press the Save as template button" %}
44
    </li>
45 46 47
    <li>
      {% trans "Delete this virtual machine <strong>(optional)</strong>" %}
    </li>
48 49 50
  </ol>
</div>
{% endif %}
51 52
<div class="body-content">
  <div class="page-header">
53
    <div class="pull-right" id="ops">
54
      {% include "dashboard/vm-detail/_operations.html" %}
55
    </div>
56
    <h1>
57
      <div id="vm-details-rename" class="vm-details-home-rename-form-div">
58 59
        <form action="" method="POST" id="vm-details-rename-form">
          {% csrf_token %}
60
          <div class="input-group vm-details-home-name">
61
            <input id="vm-details-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ instance.name }}"/>
62
            <span class="input-group-btn">
63 64 65 66
              <button type="submit" class="btn btn-sm vm-details-rename-submit
                {% if not is_operator %}disabled{% endif %}">
                {% trans "Rename" %}
              </button>
67 68
            </span>
          </div>
69 70
        </form>
      </div>
71
      <div id="vm-details-h1-name" class="vm-details-home-edit-name">
72
        {{ instance.name }}
73
      </div>
74
      <small>{{ instance.primary_host.get_fqdn }}</small>
75 76 77 78 79 80 81
      <small class="dashboard-vm-favourite" style="line-height: 39.6px;" data-vm="{{ instance.pk }}">
        {% if fav %}
          <i class="fa fa-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
        {% else %}
          <i class="fa fa-star-o text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
        {% endif %}
      </small>
82 83
    </h1>
    <div style="clear: both;"></div>
84 85
  </div>
  <div class="row">
86
    <div class="col-md-4" id="vm-info-pane">
87
      <div class="big">
88
        <span id="vm-details-state" class="label label-success" data-status="{{ instance.status }}">
89 90 91 92 93
          <i class="fa
            {% if is_new_state %}
            fa-spinner fa-spin
            {% else %}
            {{ instance.get_status_icon }}{% endif %}"></i>
94 95
          <span>{{ instance.get_status_display|upper }}</span>
        </span>
96
      </div>
97

98 99 100 101
      <h3>{% trans "Connection details" %}</h3>
      <dl class="dl-horizontal vm-details-connection">
        <dt>{% trans "Protocol" %}</dt>
        <dd>{{ instance.access_method|upper }}</dd>
102 103 104 105
          <dt>{% trans "Host" %}</dt>
          <dd>
            {% if instance.get_connect_port %}
              {{ instance.get_connect_host }}:<strong>{{ instance.get_connect_port }}</strong>
106 107
            {% elif instance.interface_set.count < 1%}
              <strong>{% trans "The VM doesn't have any network interface." %}</strong>
108
            {% else %}
109
              <strong>{% trans "The required port for this protocol is not forwarded." %}</strong>
110 111 112
            {% endif %}
          </dd>

113
        {% if instance.ipv6 and instance.get_connect_port %}
114
          <dt>{% trans "Host (IPv6)" %}</dt>
115
          <dd>{{ ipv6_host }}:<strong>{{ ipv6_port }}</strong></dd>
116 117
        {% endif %}

118 119 120
        <dt>{% trans "Username" %}</dt>
        <dd>cloud</dd>
        <dt>{% trans "Password" %}</dt>
121 122
        <dd>
          <div class="input-group">
123
            <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags"
124
            value="{{ instance.pw }}" spellcheck="false"/>
125 126 127
            <span class="input-group-addon input-tags" id="vm-details-pw-show"
              title="{% trans "Show password" %}" data-container="body">
              <i class="fa fa-eye" id="vm-details-pw-eye"></i>
128 129 130 131
            </span>
          </div>
        </dd>
        <dd style="font-size: 10px; text-align: right; padding-top: 8px;">
132 133
          <div id="vm-details-pw-reset">
          {% with op=op.password_reset %}{% if op %}
134 135 136 137 138 139 140 141
          <a href="{% if op.disabled %}#{% else %}{{op.get_url}}{% endif %}"
            class="operation operation-{{op.op}}"
            {% if op.disabled %}
            data-disabled="true"
            title="{% if instance.has_agent %}{% trans "Start the VM to change the password." %}{% else %}{% trans "This machine has no agent installed." %}{% endif %}"
            {% endif %}>
            {% trans "Generate new password!" %}
          </a>
142 143
          {% endif %}{% endwith %}
          </div>
144
        </dd>
145
      </dl>
146
      {% for c in connect_commands %}
147
      <div class="input-group dashboard-vm-details-connect-command">
148
        <span class="input-group-addon input-tags">{% trans "Command" %}</span>
149
        <input type="text" spellcheck="false"
150 151
        value="{{ c }}"
        id="vm-details-connection-string" class="form-control input-tags" />
152 153 154
        <span class="input-group-addon input-tags vm-details-connection-string-copy"
          title="{% trans "Select all" %}" data-container="body">
          <i class="fa fa-copy"></i>
155 156 157 158
        </span>
      </div>

      {% empty %}
159
      <div class="input-group dashboard-vm-details-connect-command">
160 161
        <span class="input-group-addon input-tags">{% trans "Command" %}</span>
        <input type="text" spellcheck="false" value="{% trans "Connection is not possible." %}"
162
        id="vm-details-connection-string" class="form-control input-tags" />
163
        <span class="input-group-addon input-tags" id="vm-details-connection-string-copy">
164
          <i class="fa fa-copy" title="{% trans "Select all" %}"></i>
165 166
        </span>
      </div>
167
      {% endfor %}
168
      {% if instance.get_connect_uri %}
169
      <div id="dashboard-vm-details-connect" class="operation-wrapper">
170 171
        {% if client_download %}
        <a id="dashboard-vm-details-connect-button" class="btn btn-xs btn-default operation " href="{{ instance.get_connect_uri}}" title="{% trans "Connect via the CIRCLE Client" %}">
172
                <i class="fa fa-external-link"></i> {% trans "Connect" %}
173
        </a>
174 175 176 177 178 179
        <a href="{% url "dashboard.views.client-check" %}?vm={{ instance.pk }}">{% trans "Download client" %}</a>
        {% else %}
        <a id="dashboard-vm-details-connect-download-button" class="btn btn-xs btn-default operation " href="{% url "dashboard.views.client-check" %}?vm={{ instance.pk }}" title="{% trans "Download the CIRCLE Client" %}">
                <i class="fa fa-external-link"></i> {% trans "Connect (download client)" %}
        </a>
        {% endif %}
180
      </div>
181
      {% endif %}
182
    </div>
183
    <div class="col-md-8" id="vm-detail-pane">
184 185 186 187 188 189
      <div class="big" id="vm-detail-successfull-boot">
        <span class="label label-info" data-status="{{ instance.status }}">
          <i class="fa fa-check"></i>
          {% trans "The virtual machine successfully started, you can connect now." %}
        </span>
      </div>
190 191 192
      <div class="panel panel-default" id="vm-detail-panel">
        <ul class="nav nav-pills panel-heading">
          <li class="active">
193
            <a href="#home" data-toggle="pill" data-target="#_home" class="text-center">
194
              <i class="fa fa-compass fa-2x"></i><br>
195 196
              {% trans "Home" %}</a>
          </li>
197
          <li>
198
            <a href="#resources" data-toggle="pill" data-target="#_resources" class="text-center">
199
              <i class="fa fa-tasks fa-2x"></i><br>
200 201
              {% trans "Resources" %}</a>
          </li>
202
          <li{% if not instance.is_console_available %} class="disabled"{% endif %}>
203
            <a href="#console" data-toggle="pill" data-target="#_console" class="text-center">
204
              <i class="fa fa-desktop fa-2x"></i><br>
205 206
              {% trans "Console" %}</a></li>
          <li>
207
            <a href="#access" data-toggle="pill" data-target="#_access" class="text-center">
208
              <i class="fa fa-group fa-2x"></i><br>
209 210
              {% trans "Access" %}</a>
          </li>
211
          <li>
212
            <a href="#network" data-toggle="pill" data-target="#_network" class="text-center">
213
              <i class="fa fa-globe fa-2x"></i><br>
214 215
              {% trans "Network" %}</a>
          </li>
216
          <li>
217 218
            <a href="#activity" data-toggle="pill" data-target="#_activity" class="text-center"
               data-activity-url="{% url "dashboard.views.vm-activity-list" instance.pk %}">
219
              <i class="fa fa-clock-o fa-2x"></i><br>
220 221
              {% trans "Activity" %}</a>
          </li>
222 223 224
        </ul>

        <div class="tab-content panel-body">
225 226 227
          <div class="not-tab-pane active" id="_home">{% include "dashboard/vm-detail/home.html" %}</div>
          <hr class="js-hidden"/>
          <div class="not-tab-pane" id="_resources">{% include "dashboard/vm-detail/resources.html" %}</div>
228
          <div class="tab-pane" id="_console">{% include "dashboard/vm-detail/console.html" %}</div>
229 230 231 232 233 234 235
          <hr class="js-hidden"/>
          <div class="not-tab-pane" id="_access">{% include "dashboard/vm-detail/access.html" %} </div>
          <hr class="js-hidden"/>
          <div class="not-tab-pane" id="_network">{% include "dashboard/vm-detail/network.html" %}</div>
          <hr class="js-hidden"/>
          <div class="not-tab-pane" id="_activity">{% include "dashboard/vm-detail/activity.html" %}</div>
          <hr class="js-hidden"/>
236 237 238 239 240 241 242
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}
243 244

{% block extra_js %}
245
  {% compressed_js 'vm-detail' %}
246
{% endblock %}