2016-05-04 05:16:41 +00:00
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 %}
2016-07-19 02:24:44 +00:00
{% load i18n %}
2017-07-24 13:22:23 +00:00
{% block content %}
2017-08-16 21:18:35 +00:00
{% 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 >
< img class = "un-icon" src = "{% static 'hosting/img/copy.svg' %}" >
< / p >
< p >
< span > IPv6:< / span >
< span class = "value value-sm-block" > {{virtual_machine.ipv6}}< / span >
< img class = "un-icon" src = "{% static 'hosting/img/copy.svg' %}" >
< / 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}} 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" > {{virtual_machine.price|floatformat}} CHF/{% trans "Month" %}< / div >
< a class = "btn btn-vm-invoice" href = "" > {% 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" >
< div class = "vm-item-subtitle" > {% trans "Your VM is" %}< / div >
{% 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 >
{% 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-href = "{% url 'hosting:virtual_machines' virtual_machine.vm_id %}" data-toggle = "modal" data-target = "#confirm-cancel" class = "btn btn-vm-term" > {% trans "Terminate VM" %}< / button >
{% endif %}
< / 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' %}" > < span > {% trans "Something doesn't work?" %}< / span > < span > {% trans "We are here to help you!" %}< / span >
< / div >
< div class = "text-center" >
< a class = "btn btn-vm-contact" href = "" > {% trans "CONTACT" %}< / a >
< / div >
< / div >
< div class = "text-center" >
< a class = "btn btn-vm-back" href = "" > {% 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 "Do you want to cancel your Virtual Machine" %} ?< / p >
< p > < strong > {{virtual_machine.name}}< / strong > < / p >
< / div >
< / div >
< div class = "modal-footer" >
< a class = "btn btn-danger btn-ok" > {% trans "OK" %}< / a >
< / div >
< / div >
< / div >
< / div >
<!-- / Cancel Modal -->
{% comment %}
2016-05-04 05:16:41 +00:00
< div >
2017-06-01 16:24:50 +00:00
< div class = "virtual-machine-container dashboard-container " >
2016-05-04 05:16:41 +00:00
< div class = "row" >
< div class = "col-md-9 col-md-offset-2" >
< div class = "col-sm-12" >
2017-06-01 16:24:50 +00:00
< h3 > < i class = "fa fa-cloud fa-separate" aria-hidden = "true" > < / i > {{virtual_machine.name}}< / h3 >
2016-05-04 05:16:41 +00:00
< hr / >
< div class = "col-md-3" > <!-- required for floating -->
<!-- Nav tabs -->
< ul class = "nav nav-tabs tabs-left sideways" >
< li class = "active" >
< a href = "#settings-v" data-toggle = "tab" >
< i class = "fa fa-cogs" aria-hidden = "true" > < / i >
2016-07-19 02:24:44 +00:00
{% trans "Settings"%}
2016-05-04 05:16:41 +00:00
< / a >
< / li >
< li >
< a href = "#billing-v" data-toggle = "tab" >
< i class = "fa fa-money" aria-hidden = "true" > < / i >
2016-07-19 02:24:44 +00:00
{% trans "Billing"%}
2016-05-04 05:16:41 +00:00
< / a >
< / li >
< li >
< a href = "#status-v" data-toggle = "tab" >
2016-07-19 02:24:44 +00:00
< i class = "fa fa-signal" aria-hidden = "true" > < / i > {% trans "Status"%}
2016-05-04 05:16:41 +00:00
< / a >
< / li >
< / ul >
< / div >
< div class = "col-md-9" >
<!-- Tab panes -->
< div class = "tab-content" >
< div class = "tab-pane active" id = "settings-v" >
< div class = "row" >
2016-06-07 05:29:22 +00:00
< div class = "col-md-12 inline-headers" >
2016-05-04 05:16:41 +00:00
< h3 > {{virtual_machine.hosting_company_name}}< / h3 >
2016-06-07 05:29:22 +00:00
2017-05-23 09:30:10 +00:00
{% if virtual_machine.ipv6 %}
2016-06-07 05:29:22 +00:00
< div class = "pull-right right-place" >
2017-05-23 09:30:10 +00:00
< button type = "link"
data-clipboard-text="{{virtual_machine.ipv4}}" id="copy_vm_id" class="to_copy btn btn-link"
2016-06-07 05:29:22 +00:00
data-toggle="tooltip" data-placement="bottom" title="Copied" data-trigger="click">
2017-07-24 13:22:23 +00:00
Ipv4: {{virtual_machine.ipv4}} < i class = "fa fa-files-o" aria-hidden = "true" > < / i >
2017-05-23 09:30:10 +00:00
< / button >
< button type = "link"
data-clipboard-text="{{virtual_machine.ipv6}}" id="copy_vm_id" class="to_copy btn btn-link"
data-toggle="tooltip" data-placement="bottom" title="Copied" data-trigger="click">
2017-07-24 13:22:23 +00:00
Ipv6: {{virtual_machine.ipv6}} < i class = "fa fa-files-o" aria-hidden = "true" > < / i >
2016-06-07 05:29:22 +00:00
< / button >
< / div >
{% else %}
< div class = "pull-right right-place" >
2016-07-19 02:24:44 +00:00
< span class = "label label-warning" > < strong > {% trans "Ip not assigned yet"%}< / strong > < / span >
2017-07-24 13:22:23 +00:00
< i data-toggle = "tooltip" title = "Your ip will be assigned soon" class = "fa fa-info-circle" aria-hidden = "true" > < / i >
2016-06-07 05:29:22 +00:00
< / div >
{% endif %}
2016-05-04 05:16:41 +00:00
< hr >
2016-06-07 05:29:22 +00:00
2016-05-04 05:16:41 +00:00
< / div >
< / div >
< div class = "row" >
< div class = "col-md-12" >
< div class = "row" >
< div class = "col-md-3" >
2017-06-01 16:24:50 +00:00
< div class = "well text-center box-setting" >
< i class = "fa fa-cubes" aria-hidden = "true" > < / i >
< span > {% trans "Cores"%}< / span >
2016-05-04 05:16:41 +00:00
< span class = "label label-success" > {{virtual_machine.cores}}< / span >
< / div >
< / div >
< div class = "col-md-3" >
2017-06-01 16:24:50 +00:00
< div class = "well text-center box-setting" >
2016-07-19 02:24:44 +00:00
< i class = "fa fa-tachometer" aria-hidden = "true" > < / i > {% trans "Memory"%} < br / >
2017-06-15 06:48:38 +00:00
< span class = "label label-success" > {{virtual_machine.memory}} GB< / span >
2016-05-04 05:16:41 +00:00
< / div >
< / div >
< div class = "col-md-3" >
2017-06-01 16:24:50 +00:00
< div class = "well text-center box-setting" >
2017-07-24 13:22:23 +00:00
< i class = "fa fa-hdd-o" aria-hidden = "true" > < / i >
2017-06-01 16:24:50 +00:00
< span > {% trans "Disk"%}< / span >
2017-06-15 06:48:38 +00:00
< span class = "label label-success" > {{virtual_machine.disk_size|floatformat:2}} GB< / span >
2016-05-04 05:16:41 +00:00
< / div >
< / div >
2017-07-24 13:22:23 +00:00
< / div > <!-- /row -->
2016-05-04 05:16:41 +00:00
< / div > <!-- /col - 12 -->
< / div > <!-- /row -->
2016-06-30 06:23:14 +00:00
< div class = "row" >
< div class = "col-md-12" >
2017-05-14 01:41:30 +00:00
{% trans "Configuration"%}: {{virtual_machine.configuration}}
2016-06-30 06:23:14 +00:00
< / div >
< / div >
2016-05-04 05:16:41 +00:00
< / div >
< div class = "tab-pane" id = "billing-v" >
< div class = "row " >
< div class = "col-md-12 inline-headers" >
2016-07-19 02:24:44 +00:00
< h3 > {% trans "Current pricing"%}< / h3 >
2017-07-24 13:22:23 +00:00
< span class = "h3 pull-right" > < strong > {{virtual_machine.price|floatformat}} CHF< / strong > /month< / span >
2016-05-04 05:16:41 +00:00
< hr >
< / div >
< / div >
< / div >
< div class = "tab-pane" id = "status-v" >
< div class = "row " >
< div class = "col-md-12 inline-headers" >
2016-07-19 02:24:44 +00:00
< h3 > {% trans "Current status"%}< / h3 >
2017-05-11 05:38:53 +00:00
2016-06-10 04:50:49 +00:00
< div class = "pull-right space-above" >
2017-05-12 10:07:05 +00:00
{% if virtual_machine.state == 'PENDING' %}
< span class = "label
label-warning">< strong > Pending< / strong > < / span >
{% elif virtual_machine.state == 'ACTIVE' %}
< span class = "label
label-success">< strong > Online< / strong > < / span >
{% elif virtual_machine.state == 'FAILED'%}
< span class = "label
label-danger">< strong > Failed< / strong > < / span >
2016-06-10 04:50:49 +00:00
{% endif %}
< / div >
< / div >
< / div >
{% if not virtual_machine.status == 'canceled' %}
< div class = "row" >
2017-06-01 16:24:50 +00:00
< div class = "col-md-12 separate-md" >
2016-06-10 04:50:49 +00:00
< div class = "pull-right" >
2017-05-12 10:07:05 +00:00
< form method = "POST"
id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}">
2017-07-24 13:22:23 +00:00
{% csrf_token %}
< / form >
2017-05-12 17:13:18 +00:00
< button type = "text" data-href = "{% url 'hosting:virtual_machines' virtual_machine.vm_id %}" data-toggle = "modal" data-target = "#confirm-cancel" class = "btn btn-danger" > {% trans "Terminate Virtual Machine"%}< / button >
2017-07-24 13:22:23 +00:00
2016-06-10 04:50:49 +00:00
< / div >
2017-07-24 13:22:23 +00:00
2016-06-10 04:50:49 +00:00
< / div >
2017-05-12 05:56:35 +00:00
< div class = "col-md-12" >
< br / >
{% if messages %}
< div class = "alert alert-warning" >
{% for message in messages %}
< span > {{ message }}< / span >
{% endfor %}
< / div >
{% endif %}
< / div >
2016-06-10 04:50:49 +00:00
<!-- 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" >
2017-07-03 17:04:39 +00:00
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal"
aria-label="Confirm">< span
aria-hidden="true">× < / span >
< / button >
< / div >
2016-06-10 04:50:49 +00:00
< div class = "modal-body" >
2017-07-24 13:22:23 +00:00
< div class = "modal-icon" > < i class = "fa fa-ban" aria-hidden = "true" > < / i > < / div >
2017-07-03 17:04:39 +00:00
< h4 class = "modal-title" id = "ModalLabel" > {% trans "Terminate your Virtual Machine"%}< / h4 >
2017-07-03 19:26:49 +00:00
< p class = "modal-text" > {% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?< / p >
2016-06-10 04:50:49 +00:00
< / div >
< div class = "modal-footer" >
2016-06-10 04:59:05 +00:00
< a class = "btn btn-danger btn-ok" > OK< / a >
2016-06-10 04:50:49 +00:00
< / div >
< / div >
< / div >
2016-05-04 05:16:41 +00:00
< / div >
2016-06-10 04:50:49 +00:00
<!-- / Cancel Modal -->
2016-05-04 05:16:41 +00:00
< / div >
2016-06-10 04:50:49 +00:00
{% endif %}
2016-05-04 05:16:41 +00:00
< / div >
< / div >
< / div >
< div class = "clearfix" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
2017-08-16 21:18:35 +00:00
{% endcomment %}
2016-05-04 05:16:41 +00:00
{%endblock%}
