Merge pull request #453 from tiwariav/task/3697/vm_details_page

Task/3697 vm details page design
This commit is contained in:
Arvind Tiwari 2017-08-24 00:01:08 +05:30 committed by GitHub
commit b2a0e0a385
9 changed files with 536 additions and 205 deletions

View file

@ -8,7 +8,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: PACKAGE VERSION\n" "Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-08-16 04:19+0530\n" "POT-Creation-Date: 2017-08-20 00:22+0530\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
@ -399,38 +399,76 @@ msgstr "Möchtest Du den Schlüssel löschen?"
msgid "Show" msgid "Show"
msgstr "Anzeigen" msgstr "Anzeigen"
msgid "Public SSH Key" #, fuzzy
#| msgid "Public SSH Key"
msgid "Public SSH key"
msgstr "Public SSH Key" msgstr "Public SSH Key"
msgid "Download" msgid "Download"
msgstr "" msgstr ""
msgid "Settings" msgid "Your Virtual Machine Detail"
msgstr "Einstellungen" msgstr "Virtuelle Maschinen Detail"
msgid "Billing" msgid "VM Settings"
msgstr "Abrechnungen" msgstr "VM Einstellungen"
msgid "Ip not assigned yet" msgid "Copied"
msgstr "Ip nicht zugewiesen" msgstr "Kopiert"
msgid "Disk" msgid "Disk"
msgstr "Festplatte" msgstr "Festplatte"
msgid "Current pricing" msgid "Billing"
msgstr "Abrechnungen"
msgid "Current Pricing"
msgstr "Aktueller Preis" msgstr "Aktueller Preis"
msgid "Current status" msgid "Month"
msgstr "Aktueller Status" msgstr "Monat"
msgid "Terminate Virtual Machine" msgid "See Invoice"
msgstr "Virtuelle Maschine beenden" msgstr "Rechnung"
msgid "Your VM is"
msgstr "Deine VM ist"
msgid "Pending"
msgstr "In Vorbereitung"
msgid "Online"
msgstr ""
msgid "Failed"
msgstr "Fehlgeschlagen"
msgid "Terminate VM"
msgstr "VM Beenden"
msgid "Support / Contact"
msgstr "Support / Kontakt"
msgid "Something doesn't work?"
msgstr "Etwas funktioniert nicht?"
msgid "We are here to help you!"
msgstr "Wir sind hier, um Dir zu helfen!"
msgid "CONTACT"
msgstr "KONTACT"
msgid "BACK TO LIST"
msgstr "ZURÜCK ZUR LISTE"
msgid "Terminate your Virtual Machine" msgid "Terminate your Virtual Machine"
msgstr "Ihre virtuelle Maschine beenden" msgstr "Ihre virtuelle Maschine beenden"
msgid "Are you sure do you want to cancel your Virtual Machine " msgid "Do you want to cancel your Virtual Machine"
msgstr "Sind Sie sicher, dass Sie ihre virtuelle Maschine beenden wollen " msgstr "Bist Du sicher, dass Du Deine virtuelle Maschine beenden willst"
msgid "OK"
msgstr ""
msgid "Virtual Machines" msgid "Virtual Machines"
msgstr "Virtuelle Maschinen" msgstr "Virtuelle Maschinen"
@ -482,6 +520,15 @@ msgid ""
"contact Data Center Light Support." "contact Data Center Light Support."
msgstr "" msgstr ""
#~ msgid "Ip not assigned yet"
#~ msgstr "Ip nicht zugewiesen"
#~ msgid "Current status"
#~ msgstr "Aktueller Status"
#~ msgid "Terminate Virtual Machine"
#~ msgstr "Virtuelle Maschine beenden"
#~ msgid "Ipv4" #~ msgid "Ipv4"
#~ msgstr "IPv4" #~ msgstr "IPv4"

View file

@ -1,3 +1,6 @@
.virtual-machine-container {
max-width: 900px;
}
.virtual-machine-container .tabs-left, .virtual-machine-container .tabs-right { .virtual-machine-container .tabs-left, .virtual-machine-container .tabs-right {
border-bottom: none; border-bottom: none;
padding-top: 2px; padding-top: 2px;
@ -229,6 +232,204 @@
} }
} }
/* Vm Details */
.vm-detail-item, .vm-contact-us {
overflow: hidden;
border: 1px solid #ccc;
padding: 15px;
color: #555;
font-weight: 300;
margin-bottom: 15px;
}
.vm-detail-title {
margin-top: 0;
font-size: 20px;
font-weight: 300;
}
.vm-detail-title .un-icon {
float: right;
height: 24px;
width: 21px;
margin-top: 0;
}
.vm-detail-item .vm-name {
font-size: 16px;
margin-bottom: 15px;
}
.vm-detail-item p {
margin-bottom: 5px;
position: relative;
}
.vm-detail-ip {
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}
.vm-detail-ip .un-icon {
height: 14px;
width: 14px;
}
.vm-detail-ip .to_copy {
position: absolute;
right: 0;
top: 1px;
padding: 0;
line-height: 1;
}
.vm-vmid {
padding: 50px 0 70px;
text-align: center;
}
.vm-item-lg {
font-size: 22px;
margin-top: 5px;
margin-bottom: 15px;
letter-spacing: 0.6px;
}
.vm-color-online {
color: #37B07B;
}
.vm-color-pending {
color: #e47f2f;
}
.vm-detail-item .value{
font-weight: 400;
}
.vm-detail-config .value {
float: right;
font-weight: 600;
}
.vm-detail-contain {
margin-top: 25px;
}
.vm-contact-us {
margin: 25px 0 30px;
/* text-align: center; */
}
@media(min-width: 768px) {
.vm-detail-contain {
display: flex;
margin-left: -15px;
margin-right: -15px;
}
.vm-detail-item {
width: 33.333333%;
margin: 0 15px;
}
.vm-contact-us {
display: flex;
align-items: center;
justify-content: space-between;
}
.vm-contact-us .vm-detail-title {
margin-bottom: 0;
}
.vm-contact-us .un-icon {
width: 22px;
height: 22px;
margin-right: 5px;
}
.vm-contact-us div {
padding: 0 15px;
position: relative;
}
.vm-contact-us-text {
display: flex;
align-items: center;
}
}
.value-sm-block {
display: block;
padding-top: 2px;
}
@media(max-width: 767px) {
.vm-contact-us div {
margin-bottom: 30px;
}
.vm-contact-us div span {
display: block;
margin-bottom: 3px;
}
.dashboard-title-thin {
font-size: 22px;
}
}
.btn-vm-invoice {
color: #87B6EA;
border: 2px solid #87B6EA;
padding: 4px 18px;
letter-spacing: 0.6px;
}
.btn-vm-invoice:hover, .btn-vm-invoice:focus {
color : #fff;
background: #87B6EA;
}
.btn-vm-term {
color: #aaa;
border: 2px solid #ccc;
background: #fff;
padding: 4px 18px;
letter-spacing: 0.6px;
}
.btn-vm-term:hover, .btn-vm-term:focus, .btn-vm-term:active {
color: #eb4d5c;
border-color: #eb4d5c;
}
.btn-vm-contact {
color: #fff;
background: #A3C0E2;
border: 2px solid #A3C0E2;
padding: 5px 25px;
font-size: 12px;
letter-spacing: 1.3px;
}
.btn-vm-contact:hover, .btn-vm-contact:focus {
background: #fff;
color: #a3c0e2;
}
.btn-vm-back {
color: #fff;
background: #C4CEDA;
border: 2px solid #C4CEDA;
padding: 5px 25px;
font-size: 12px;
letter-spacing: 1.3px;
}
.btn-vm-back:hover, .btn-vm-back:focus {
color: #fff;
background: #8da4c0;
border-color: #8da4c0;
}
.vm-contact-us-text {
letter-spacing: 0.4px;
}
/* New styles */ /* New styles */
.dashboard-container-head { .dashboard-container-head {
padding: 0 8px; padding: 0 8px;

View file

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 279.525 279.525" style="enable-background:new 0 0 279.525 279.525;" xml:space="preserve">
<g>
<path d="M165.066,1.544c-29.272,0-56.007,11.05-76.268,29.191c4.494,7.146,7.047,15.46,7.287,24.042l0.001,0.025l0.001,0.025
c0.102,3.867,0.333,7.735,0.664,11.597c15.368-21.117,40.258-34.88,68.315-34.88c46.571,0,84.459,37.888,84.459,84.459
c0,46.08-37.098,83.634-82.994,84.422c4.191,3.502,8.518,6.84,12.976,9.974l0.02,0.015l0.021,0.014
c6.07,4.282,11.014,9.896,14.483,16.317c49.133-12.861,85.493-57.633,85.493-110.742C279.525,52.89,228.18,1.544,165.066,1.544z"/>
<path d="M162.256,234.942c-13.076-10.438-21.234-17.389-32.909-28.204c-3.435-3.182-7.633-5.164-11.944-5.164
c-3.299,0-6.557,1.051-9.239,3.252c-2.768,2.33-5.536,4.66-8.305,6.989c-22.499-26.738-39.206-57.895-49.027-91.431
c3.472-1.016,6.945-2.033,10.417-3.049c7.652-2.343,11.252-10.512,10.129-18.701c-2.443-17.824-3.77-26.679-5.282-43.018
c-0.775-8.375-6.349-15.65-14.338-16.085c-1.246-0.121-2.491-0.181-3.726-0.181c-29.71,0-55.578,34.436-46.009,76.564
c11.907,52.172,37.684,100.243,74.551,139.031c15.102,15.856,33.603,23.036,50.312,23.036c17.627,0,33.261-7.984,40.833-22.195
C171.778,248.891,168.83,240.19,162.256,234.942z"/>
<path d="M130.645,118.121c-7.912,7.341-13.089,13.113-15.823,17.643c-1.93,3.195-3.338,6.573-4.187,10.04
c-0.399,1.632-0.032,3.326,1.007,4.649c1.038,1.321,2.596,2.079,4.276,2.079h37.758c4.626,0,8.39-3.764,8.39-8.39
c0-4.626-3.764-8.39-8.39-8.39h-17.051c0.139-0.164,0.282-0.328,0.428-0.493c1.114-1.254,3.842-3.874,8.107-7.785
c4.473-4.105,7.493-7.179,9.232-9.398c2.621-3.336,4.571-6.593,5.794-9.679c1.247-3.145,1.88-6.498,1.88-9.967
c0-6.224-2.254-11.507-6.699-15.705c-4.416-4.164-10.495-6.274-18.071-6.274c-6.884,0-12.731,1.802-17.377,5.356
c-2.803,2.146-4.961,5.119-6.415,8.839c-0.982,2.513-0.728,5.388,0.68,7.689c1.408,2.302,3.852,3.837,6.537,4.105
c0.299,0.03,0.597,0.045,0.891,0.045c3.779,0,7.149-2.403,8.387-5.979c0.388-1.121,0.901-2.012,1.527-2.65
c1.318-1.343,3.093-1.997,5.428-1.997c2.373,0,4.146,0.618,5.418,1.889c1.269,1.269,1.886,3.12,1.886,5.66
c0,2.359-0.843,4.819-2.505,7.314C140.862,108.028,138.199,111.083,130.645,118.121z"/>
<path d="M206.235,76.451h-6.307c-1.797,0-3.475,0.886-4.489,2.37l-29.168,42.698c-0.851,1.246-1.301,2.703-1.301,4.212v6.919
c0,2.997,2.439,5.436,5.436,5.436h23.945v5.787c0,4.775,3.885,8.66,8.66,8.66c4.775,0,8.66-3.885,8.66-8.66v-5.787h0.865
c4.437,0,8.047-3.61,8.047-8.047c0-4.437-3.61-8.047-8.047-8.047h-0.865V81.887C211.671,78.89,209.232,76.451,206.235,76.451z
M194.352,121.992h-10.748l10.748-15.978V121.992z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="symbol symbol-billing" aria-labelledby="title" role="img"><title id="title">billing icon</title><g data-name="Layer 1"><path class="cls-1" d="M.37.023v15.954l2.775-1.387 2.775 1.387L8 14.59l2.775 1.387 2.081-1.387 2.775 1.387V.023zm13.873 13.709l-1.487-.744-2.081 1.387L7.9 12.989l-2.08 1.387-2.675-1.337-1.387.694V1.41h12.485z" role="presentation"/><path class="cls-1" d="M4.206 3.617h7.741v1.348H4.206zm0 2.697h7.741v1.349H4.206zm0 2.697h7.741v1.349H4.206z" role="presentation"/></g></svg>

After

Width:  |  Height:  |  Size: 558 B

View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 278.898 278.898" style="enable-background:new 0 0 278.898 278.898;" xml:space="preserve">
<g>
<path d="M269.898,175.773h-20.373V64.751c0-4.971-4.029-9-9-9h-62.702V35.377c0-4.971-4.029-9-9-9h-58.748c-4.971,0-9,4.029-9,9
v20.374H38.373c-4.971,0-9,4.029-9,9v111.022H9c-4.971,0-9,4.029-9,9v58.748c0,4.971,4.029,9,9,9h58.747c4.971,0,9-4.029,9-9
v-58.748c0-4.971-4.029-9-9-9H47.373V73.751h53.702v20.374c0,4.971,4.029,9,9,9h20.374v72.648h-20.374c-4.971,0-9,4.029-9,9v58.748
c0,4.971,4.029,9,9,9h58.748c4.971,0,9-4.029,9-9v-58.748c0-4.971-4.029-9-9-9h-20.374v-72.648h20.374c4.971,0,9-4.029,9-9V73.751
h53.702v102.022h-20.374c-4.971,0-9,4.029-9,9v58.748c0,4.971,4.029,9,9,9h58.747c4.971,0,9-4.029,9-9v-58.748
C278.898,179.803,274.869,175.773,269.898,175.773z M58.747,234.521H18v-40.748h40.747V234.521z M159.823,234.521h-40.748v-40.748
h40.748V234.521z M159.823,85.125h-40.748V44.377h40.748V85.125z M260.898,234.521h-40.747v-40.748h40.747V234.521z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340.274px" height="340.274px" viewBox="0 0 340.274 340.274" style="enable-background:new 0 0 340.274 340.274;"
xml:space="preserve">
<g>
<g>
<g>
<path d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937
c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765
c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032
c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127
l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516
l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74
c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702
c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474
c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315
C229.552,202.287,202.902,228.474,170.128,228.474z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -3,149 +3,6 @@
{% load i18n %} {% load i18n %}
{% block content %} {% block content %}
<div>
<div class="virtual-machine-container dashboard-container ">
<div class="row">
<div class="col-md-9 col-md-offset-2">
<div class="col-sm-12">
<h3><i class="fa fa-cloud fa-separate" aria-hidden="true"></i> {{virtual_machine.name}}</h3>
<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>
{% trans "Settings"%}
</a>
</li>
<li>
<a href="#billing-v" data-toggle="tab">
<i class="fa fa-money" aria-hidden="true"></i>
{% trans "Billing"%}
</a>
</li>
<li>
<a href="#status-v" data-toggle="tab">
<i class="fa fa-signal" aria-hidden="true"></i> {% trans "Status"%}
</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">
<div class="col-md-12 inline-headers">
<h3>{{virtual_machine.hosting_company_name}}</h3>
{% if virtual_machine.ipv6 %}
<div class="pull-right right-place">
<button type="link"
data-clipboard-text="{{virtual_machine.ipv4}}" id="copy_vm_id" class="to_copy btn btn-link"
data-toggle="tooltip" data-placement="bottom" title="Copied" data-trigger="click">
Ipv4: {{virtual_machine.ipv4}} <i class="fa fa-files-o" aria-hidden="true"></i>
</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">
Ipv6: {{virtual_machine.ipv6}} <i class="fa fa-files-o" aria-hidden="true"></i>
</button>
</div>
{% else %}
<div class="pull-right right-place">
<span class="label label-warning"><strong>{% trans "Ip not assigned yet"%}</strong></span>
<i data-toggle="tooltip" title="Your ip will be assigned soon" class="fa fa-info-circle" aria-hidden="true"></i>
</div>
{% endif %}
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="well text-center box-setting">
<i class="fa fa-cubes" aria-hidden="true"></i>
<span>{% trans "Cores"%}</span>
<span class="label label-success">{{virtual_machine.cores}}</span>
</div>
</div>
<div class="col-md-3">
<div class="well text-center box-setting">
<i class="fa fa-tachometer" aria-hidden="true"></i> {% trans "Memory"%} <br/>
<span class="label label-success">{{virtual_machine.memory}} GB</span>
</div>
</div>
<div class="col-md-3">
<div class="well text-center box-setting">
<i class="fa fa-hdd-o" aria-hidden="true"></i>
<span>{% trans "Disk"%}</span>
<span class="label label-success">{{virtual_machine.disk_size|floatformat:2}} GB</span>
</div>
</div>
</div><!--/row-->
</div><!--/col-12-->
</div><!--/row-->
<div class="row">
<div class="col-md-12">
{% trans "Configuration"%}: {{virtual_machine.configuration}}
</div>
</div>
</div>
<div class="tab-pane" id="billing-v">
<div class="row ">
<div class="col-md-12 inline-headers">
<h3>{% trans "Current pricing"%}</h3>
<span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/month</span>
<hr>
</div>
</div>
</div>
<div class="tab-pane" id="status-v">
<div class="row ">
<div class="col-md-12 inline-headers">
<h3>{% trans "Current status"%}</h3>
<div class="pull-right space-above">
{% 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>
{% endif %}
</div>
</div>
</div>
{% if not virtual_machine.status == 'canceled' %}
<div class="row">
<div class="col-md-12 separate-md">
<div class="pull-right">
<form method="POST"
id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}">
{% csrf_token %}
</form>
<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>
</div>
</div>
<div class="col-md-12">
<br/>
{% if messages %} {% if messages %}
<div class="alert alert-warning"> <div class="alert alert-warning">
{% for message in messages %} {% for message in messages %}
@ -153,43 +10,103 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% 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}} 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="{% 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">
<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' %}">
<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> </div>
<!-- Cancel Modal --> <!-- Cancel Modal -->
<div class="modal fade" id="confirm-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal fade" id="confirm-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">&times;</span></button>
aria-label="Confirm"><span
aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div> <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> <h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4>
<p class="modal-text">{% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?</p> <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>
<div class="modal-footer"> <div class="modal-footer">
<a class="btn btn-danger btn-ok">OK</a> <a class="btn btn-danger btn-ok">{% trans "OK" %}</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- / Cancel Modal --> <!-- / Cancel Modal -->
</div>
{% endif %}
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
{%endblock%} {%endblock%}

View file

@ -20,9 +20,12 @@ urlpatterns = [
url(r'orders/(?P<pk>\d+)/?$', OrdersHostingDetailView.as_view(), name='orders'), url(r'orders/(?P<pk>\d+)/?$', OrdersHostingDetailView.as_view(), name='orders'),
url(r'bills/?$', HostingBillListView.as_view(), name='bills'), url(r'bills/?$', HostingBillListView.as_view(), name='bills'),
url(r'bills/(?P<pk>\d+)/?$', HostingBillDetailView.as_view(), name='bills'), url(r'bills/(?P<pk>\d+)/?$', HostingBillDetailView.as_view(), name='bills'),
url(r'cancel_order/(?P<pk>\d+)/?$', OrdersHostingDeleteView.as_view(), name='delete_order'), url(r'cancel_order/(?P<pk>\d+)/?$',
url(r'create_virtual_machine/?$', CreateVirtualMachinesView.as_view(), name='create_virtual_machine'), OrdersHostingDeleteView.as_view(), name='delete_order'),
url(r'my-virtual-machines/?$', VirtualMachinesPlanListView.as_view(), name='virtual_machines'), url(r'create_virtual_machine/?$', CreateVirtualMachinesView.as_view(),
name='create_virtual_machine'),
url(r'my-virtual-machines/?$',
VirtualMachinesPlanListView.as_view(), name='virtual_machines'),
url(r'my-virtual-machines/(?P<pk>\d+)/?$', VirtualMachineView.as_view(), url(r'my-virtual-machines/(?P<pk>\d+)/?$', VirtualMachineView.as_view(),
name='virtual_machines'), name='virtual_machines'),
url(r'ssh_keys/?$', SSHKeyListView.as_view(), url(r'ssh_keys/?$', SSHKeyListView.as_view(),
@ -44,5 +47,6 @@ urlpatterns = [
PasswordResetConfirmView.as_view(), name='reset_password_confirm'), PasswordResetConfirmView.as_view(), name='reset_password_confirm'),
url(r'^logout/?$', auth_views.logout, url(r'^logout/?$', auth_views.logout,
{'next_page': '/hosting/login?logged_out=true'}, name='logout'), {'next_page': '/hosting/login?logged_out=true'}, name='logout'),
url(r'^validate/(?P<validate_slug>.*)/$', SignupValidatedView.as_view(), name='validate') url(r'^validate/(?P<validate_slug>.*)/$',
SignupValidatedView.as_view(), name='validate')
] ]

View file

@ -244,7 +244,8 @@ class SignupValidatedView(SignupValidateView):
lurl=login_url) lurl=login_url)
else: else:
home_url = '<a href="' + \ home_url = '<a href="' + \
reverse('datacenterlight:index') + '">Data Center Light</a>' reverse('datacenterlight:index') + \
'">Data Center Light</a>'
message = '{sorry_message} <br />{go_back_to} {hurl}'.format( message = '{sorry_message} <br />{go_back_to} {hurl}'.format(
sorry_message=_("Sorry. Your request is invalid."), sorry_message=_("Sorry. Your request is invalid."),
go_back_to=_('Go back to'), go_back_to=_('Go back to'),
@ -831,6 +832,7 @@ class VirtualMachineView(LoginRequiredMixin, View):
serializer = VirtualMachineSerializer(vm) serializer = VirtualMachineSerializer(vm)
context = { context = {
'virtual_machine': serializer.data, 'virtual_machine': serializer.data,
'order': HostingOrder.objects.get(vm_id=serializer.data['vm_id'])
} }
except: except:
pass pass