show.html

{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block js %}
<script type="text/javascript">
    {% if booting or state == 'PENDING' or i.waiting %}
    var timer=setInterval(function(){
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '{% url one.views.vm_ajax_instance_status id %}',
            success: function(data){
                if (!data.waiting && !data.booting  && data.state != 'PENDING'){
                    window.location.reload();
                } else if (!data.waiting) {
                   // window.location.reload();
                }
            }
        });
    }, 5000);
    {% endif %}
    {% if i.template.state == 'SAVING' %}
    var savingTimer=setInterval(function(){
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '{% url one.views.vm_ajax_instance_status id %}',
            success: function(data){
                if(data.template.state == 'READY'){
                    window.location.href='{% url one.views.home %}';
                }
            }
        });
    }, 10000);
    {% endif %}
</script>
{% endblock %}

{% block title %}
{% blocktrans with name=i.name %}Details of {{name}}{% endblocktrans %}
- {{block.super}}
{% endblock %}
{% block content %}

{% if i.template.state != "READY" %}
<div class="contentblock wide note big">
    <p>
        {% blocktrans %}This is a master image for your new template.{% endblocktrans %}
    </p>
    <form action="{% url one.views.vm_saveas id %}" method="POST">
        {% csrf_token %}
        {% if i.template.state == "NEW" %}
        <p style="float: right; margin-top:2em;margin-right:1em;">
            <input type="submit" value="{% trans "Save" %}" class="big" style="background-color:rgba(102, 255, 0, 0.4)" />
        </p>
        {% endif %}
    </form>
    <ol>
        <li{% if i.template.state != "NEW" %} class="done"{%endif%}>{% blocktrans %}Connect to the machine.{% endblocktrans %}</li>
        <li{% if i.template.state != "NEW" %} class="done"{%endif%}>
            {% blocktrans %}Do all the needed installation/customization.{% endblocktrans %}
        </li>
        <li{% if i.template.state != "NEW" %} class="done"{%endif%}>
            {% blocktrans %}Log off (keep the machine running).{% endblocktrans %}
        </li>
        <li{% if i.template.state != "NEW" %} class="done"{%endif%}>
            {% blocktrans %}Click on the "save" button on the right.{% endblocktrans %}
        </li>
        <li{% if i.template.state == "READY" %} class="done"{%endif%}>
            {% blocktrans %}The machine will be shut down and its disk saved.{% endblocktrans %}
        </li>
        <li>
            {% blocktrans %}You can share the template with your groups.{% endblocktrans %}
        </li>
    </ol>
</div>
{% endif %}
<div class="boxes">
    <div class="contentblock wm" id="state">
        <h2>{{name}}</h2>
        <div class="content">
            {% if state == "PENDING" or state == "ACTIVE" and booting %}
            <p style="font-size:25px; line-height:2em;text-align:center;">
            <img src="{% static "image/load.gif" %}" />
                {% trans "Starting..." %}
            </p>
            {% elif i.template.state == "SAVING" %}
            <p style="font-size:25px; line-height:2em;text-align:center;">
            <img src="{% static "image/load.gif" %}" />
                {% trans "Saving..." %}
            </p>
            {% elif state == "ACTIVE" and not booting and not i.waiting %}
            <p id="connect" style="display:block; font-size:25px; line-height:2em;text-align:center;">
                <a href="{{uri}}" class="button" onclick="return connectbutton();">
                    <img src="{% static "image/load.gif" %}" id="connecting" style="display:none;" />
                    {% trans "Running" %}
                </a>
            </p>
            {% elif state == "ACTIVE" and not booting and i.waiting %}
            <p style="display:block; font-size:25px; line-height:2em;text-align:center;">
                {% trans "Stopping..." %}
            </p>
            {% elif state == "STOPPED" and i.waiting %}
            <p style="font-size:25px; line-height:2em;text-align:center;">{% trans "Starting..." %}</p>
            {% elif state == "STOPPED"%}
            <p style="font-size:25px; line-height:2em;text-align:center;">{% trans "Stopped" %}</p>
            {% endif %}
        {% if state == "DONE" %}
            <p style="font-size:25px; line-height:2em;text-align:center;">{% trans "Deleted" %}</p>
            {% endif %}
        {% if state == "FAILED" %}
            <p style="font-size:25px; line-height:2em;text-align:center;">{% trans "Unexpected error occured" %}</p>
            {% endif %}
        </div>
    </div>
    <div class="contentblock" id="vm-credentials">
        <h2>{% trans "Login credentials" %}</h2>
        {% include "vm-credentials.html" %}
    </div>
    {% if i.firewall_host %}
    <div class="contentblock" id="ports">
        <h2>
            <div class="boxhelp">
                <div class="help">
                    <div class="icon">
                        <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
                    </div>
                    <div class="boxhelp-box">
                        <p>{% blocktrans %}This is a list about the network ports
                        forwarded to the public internet.{% endblocktrans %}</p>
                        <p>{% blocktrans %}You can access the given private port of
                        the VM trough the public address of the network.
                        {% endblocktrans %}</p>
                        <p>{% blocktrans %}On the IPV6 network you can access the
                        listed private ports direcly using the VM's global IPV6
                        address (connections to other ports are dropped).
                        {% endblocktrans %}</p>
                    </div>
                </div>
            </div>
            {% trans "Port administration" %}</h2>
        <div class="content">
            <form action="{% url one.views.vm_port_add i.id %}" method="post">
                {% csrf_token %}
                <table>
                    <tr>
                        <th>{% trans "Protocol" %}</th>
                        <th>{% trans "Public port" %}</th>
                        {% if i.template.network.nat %}<th colspan="2">{% trans "Private port" %}</th>{%endif%}
                    </tr>
                    {% for port in ports %}
                    <tr>
                        <td>{{port.proto}}</td>
                        <td>{{port.public}}</td>
                        {% if i.template.network.nat %}<td>{{port.private}}</td>{%endif%}
                        <td>
                            <a href="{% url one.views.vm_port_del i.id port.proto port.public %}">{% trans "Delete" %}</a>
                        </td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td>
                            <select style="min-width:50px;" name=proto>
                                <option value="tcp">tcp</option>
                                <option value="udp">udp</option>
                            </select>
                        </td>
                        <td>
                            <input style="min-width:70px;width:70px;" type="text" name="public"/>
                        </td>
                        {% if i.template.network.nat %}
                        <td>
                            <input style="min-width:70px;width:70px;" type="text" name="private"/>
                        </td>
                        {% endif %}
                        <td>
                            <input type="submit" style="min-width:3em" value="{% trans "Add" %}" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    {% endif %}
</div>
<div class="boxes">
    {% include "box/vm/box.html" with just_list_vms=1 %}
</div>
{% endblock %}