142 lines
6.7 KiB
HTML
142 lines
6.7 KiB
HTML
{% extends "hosting/base_short.html" %}
|
|
{% load staticfiles bootstrap3 humanize %}
|
|
{% load i18n %}
|
|
|
|
{% block content %}
|
|
{% if messages %}
|
|
<div class="alert alert-warning">
|
|
{% for message in messages %}
|
|
<span>{{ message }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="virtual-machine-container dashboard-container">
|
|
<h1 class="dashboard-title-thin">{% trans "Your Virtual Machine Detail" %}</h1>
|
|
<div class="vm-detail-contain">
|
|
<div class="vm-detail-item">
|
|
<h2 class="vm-detail-title">{% trans "VM Settings" %} <img src="{% static 'hosting/img/settings.svg' %}" class="un-icon"></h2>
|
|
<h3 class="vm-name">{{virtual_machine.name}}</h3>
|
|
{% if virtual_machine.ipv6 %}
|
|
<div class="vm-detail-ip">
|
|
<p>
|
|
<span>IPv4:</span>
|
|
<span class="value">{{virtual_machine.ipv4}}</span>
|
|
<button data-clipboard-text="{{virtual_machine.ipv4}}" class="to_copy btn btn-link" data-toggle="tooltip" data-placement="left" title="{% trans 'Copied' %}" data-trigger="click">
|
|
<img class="un-icon" src="{% static 'hosting/img/copy.svg' %}">
|
|
</button>
|
|
</p>
|
|
<p>
|
|
<span>IPv6:</span>
|
|
<span class="value value-sm-block">{{virtual_machine.ipv6}}</span>
|
|
<button data-clipboard-text="{{virtual_machine.ipv6}}" class="to_copy btn btn-link" data-toggle="tooltip" data-placement="left" title="{% trans 'Copied' %}" data-trigger="click">
|
|
<img class="un-icon" src="{% static 'hosting/img/copy.svg' %}">
|
|
</button>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
<div class="vm-detail-config">
|
|
<p><span>{% trans "Cores" %}:</span><span class="value">{{virtual_machine.cores}}</span></p>
|
|
<p><span>{% trans "Memory" %}:</span><span class="value">{{virtual_machine.memory}} GB</span></p>
|
|
<p><span>{% trans "Disk" %}:</span><span class="value">{{virtual_machine.disk_size|floatformat:2|intcomma}} GB</span></p>
|
|
<p><span>{% trans "Configuration" %}:</span><span class="value">{{virtual_machine.configuration}}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="vm-detail-item">
|
|
<h2 class="vm-detail-title">{% trans "Billing" %} <img src="{% static 'hosting/img/billing.svg' %}" class="un-icon"></h2>
|
|
<div class="vm-vmid">
|
|
<div class="vm-item-subtitle">{% trans "Current Pricing" %}</div>
|
|
<div class="vm-item-lg">{{order.price|floatformat:2|intcomma}} CHF/{% if order.generic_product %}{% trans order.generic_product.product_subscription_interval %}{% else %}{% trans "Month" %}{% endif %}</div>
|
|
<a class="btn btn-vm-invoice" href="{% url 'hosting:orders' order.pk %}">{% trans "See Invoice" %}</a>
|
|
</div>
|
|
</div>
|
|
<div class="vm-detail-item">
|
|
<h2 class="vm-detail-title">{% trans "Status" %} <img src="{% static 'hosting/img/connected.svg' %}" class="un-icon"></h2>
|
|
<div class="vm-vmid vm-vmid-with-warning">
|
|
<div class="vm-item-subtitle">{% trans "Your VM is" %}</div>
|
|
<div id="terminate-VM" data-alt="{% trans 'Terminating' %}">
|
|
{% if virtual_machine.state == 'PENDING' %}
|
|
<div class="vm-item-lg vm-color-pending">{% trans "Pending" %}</div>
|
|
{% elif virtual_machine.state == 'ACTIVE' %}
|
|
<div class="vm-item-lg vm-color-online">{% trans "Online" %}</div>
|
|
{% elif virtual_machine.state == 'FAILED'%}
|
|
<div class="vm-item-lg vm-color-failed">{% trans "Failed" %}</div>
|
|
{% else %}
|
|
<div class="vm-item-lg"></div>
|
|
{% endif %}
|
|
{% if not virtual_machine.status == 'canceled' %}
|
|
<form method="POST" id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}">
|
|
{% csrf_token %}
|
|
</form>
|
|
<button data-toggle="modal" data-target="#confirm-cancel" class="btn btn-vm-term">{% trans "Terminate VM" %}</button>
|
|
<div class="alert alert-danger hide">
|
|
{% trans "Sorry, there was an unexpected error. Kindly retry." %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="vm-terminate-warning text-center">
|
|
<p>{% trans "Attention:" %}</p>
|
|
<p>{% trans "terminating VM can not be reverted." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="vm-contact-us">
|
|
<div>
|
|
<h2 class="vm-detail-title">{% trans "Support / Contact" %} <img class="un-icon visible-xs" src="{% static 'hosting/img/24-hours-support.svg' %}"></h2>
|
|
</div>
|
|
<div class="vm-contact-us-text text-center">
|
|
<img class="un-icon hidden-xs" src="{% static 'hosting/img/24-hours-support.svg' %}">
|
|
<div>
|
|
<span>{% trans "Something doesn't work?" %}</span> <span>{% trans "We are here to help you!" %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<a class="btn btn-vm-contact" href="mailto:support@datacenterlight.ch">{% trans "CONTACT" %}</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<a class="btn btn-vm-back" href="{% url 'hosting:virtual_machines' %}">{% trans "BACK TO LIST" %}</a>
|
|
</div>
|
|
</div>
|
|
<!-- Cancel Modal -->
|
|
<div class="modal fade" id="confirm-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">×</span></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div>
|
|
<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine" %}</h4>
|
|
<div class="modal-text">
|
|
<p>{% trans "Terminated VMs can not be revived and will not be refunded. Do you want to terminate your VM?" %}</p>
|
|
<p><strong>{{virtual_machine.name}}</strong></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="btn btn-danger btn-ok btn-wide">{% trans "OK" %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / Cancel Modal -->
|
|
<!-- Success Modal -->
|
|
<div class="modal fade" id="terminate-success" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-icon"><i class="checkmark" aria-hidden="true"></i></div>
|
|
<h4 class="modal-title"></h4>
|
|
<div class="modal-text" id="ModalLabel">{% blocktrans with machine_name=virtual_machine.name %}Your Virtual Machine <strong>{{machine_name}}</strong> is successfully terminated!{% endblocktrans %}</div>
|
|
<div class="modal-footer">
|
|
<a href="{% url 'hosting:virtual_machines' %}" class="btn btn-success btn-wide">{% trans "OK" %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / Cancel Modal -->
|
|
{%endblock%}
|