From a99ea335c8ccc8a4de236f3d8ba568ea74595505 Mon Sep 17 00:00:00 2001
From: Levi <levinoelvm@gmail.com>
Date: Wed, 4 May 2016 00:16:41 -0500
Subject: [PATCH] Added VM detail page, Added VM setting page, Added VM pricing
page,Added VM orders page, Added VM status page
---
hosting/models.py | 9 +
hosting/static/hosting/css/commons.css | 5 +
.../static/hosting/css/virtual-machine.css | 42 +++++
hosting/templates/hosting/base_short.html | 3 +-
hosting/templates/hosting/orders.html | 16 --
.../hosting/virtual_machine_detail.html | 155 ++++++++++++++++++
.../templates/hosting/virtual_machines.html | 4 +-
hosting/urls.py | 5 +-
hosting/views.py | 7 +
9 files changed, 226 insertions(+), 20 deletions(-)
create mode 100644 hosting/static/hosting/css/virtual-machine.css
create mode 100644 hosting/templates/hosting/virtual_machine_detail.html
diff --git a/hosting/models.py b/hosting/models.py
index edee580d..ea650ebb 100644
--- a/hosting/models.py
+++ b/hosting/models.py
@@ -90,6 +90,15 @@ class VirtualMachinePlan(models.Model):
def hosting_company_name(self):
return self.vm_type.get_hosting_company_display()
+ @cached_property
+ def name(self):
+ name = 'vm-%s' % self.id
+ return name
+
+ @cached_property
+ def orders(self):
+ return [self.hostingorder]
+
@classmethod
def create(cls, data, user):
instance = cls.objects.create(**data)
diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index e77ddfa2..f386cfd6 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -13,3 +13,8 @@
display: block;
color: transparent;
}
+
+.inline-headers h3, .inline-headers h4 {
+ display: inline-block;
+ vertical-align: baseline;
+}
diff --git a/hosting/static/hosting/css/virtual-machine.css b/hosting/static/hosting/css/virtual-machine.css
new file mode 100644
index 00000000..570d5118
--- /dev/null
+++ b/hosting/static/hosting/css/virtual-machine.css
@@ -0,0 +1,42 @@
+.virtual-machine-container .tabs-left, .virtual-machine-container .tabs-right {
+ border-bottom: none;
+ padding-top: 2px;
+}
+.virtual-machine-container .tabs-left {
+ border-right: 1px solid #ddd;
+}
+.virtual-machine-container .tabs-right {
+ border-left: 1px solid #ddd;
+}
+.virtual-machine-container .tabs-left>li, .virtual-machine-container .tabs-right>li {
+ float: none;
+ margin-bottom: 2px;
+}
+.virtual-machine-container .tabs-left>li {
+ margin-right: -1px;
+}
+.virtual-machine-container .tabs-right>li {
+ margin-left: -1px;
+}
+.virtual-machine-container .tabs-left>li.active>a,
+.virtual-machine-container .tabs-left>li.active>a:hover,
+.virtual-machine-container .tabs-left>li.active>a:focus {
+ border-bottom-color: #ddd;
+ border-right-color: transparent;
+}
+
+.virtual-machine-container .tabs-right>li.active>a,
+.virtual-machine-container .tabs-right>li.active>a:hover,
+.virtual-machine-container .tabs-right>li.active>a:focus {
+ border-bottom: 1px solid #ddd;
+ border-left-color: transparent;
+}
+.virtual-machine-container .tabs-left>li>a {
+ border-radius: 4px 0 0 4px;
+ margin-right: 0;
+ display:block;
+}
+.virtual-machine-container .tabs-right>li>a {
+ border-radius: 0 4px 4px 0;
+ margin-right: 0;
+}
\ No newline at end of file
diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html
index 266ee484..339020de 100644
--- a/hosting/templates/hosting/base_short.html
+++ b/hosting/templates/hosting/base_short.html
@@ -18,9 +18,10 @@
<!-- Custom CSS -->
<link href="{% static 'hosting/css/landing-page.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/payment.css' %}" rel="stylesheet">
- <link href="{% static 'hosting/css/orders.css' %}" rel="stylesheet">
+ <link href="{% static 'hosting/css/order.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/orders.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
+ <link href="{% static 'hosting/css/virtual-machine.css' %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
diff --git a/hosting/templates/hosting/orders.html b/hosting/templates/hosting/orders.html
index 819dec4d..99c6464f 100644
--- a/hosting/templates/hosting/orders.html
+++ b/hosting/templates/hosting/orders.html
@@ -2,22 +2,6 @@
{% load staticfiles bootstrap3 %}
{% block content %}
-<style type="text/css">
-
-.borderless td {
- border: none !important;
-}
-.borderless thead {
-}
-
-.borderless tbody:before {
- content: "-";
- display: block;
- color: transparent;
-}
-
-</style>
-
<div>
<div class="container orders-container">
<div class="row">
diff --git a/hosting/templates/hosting/virtual_machine_detail.html b/hosting/templates/hosting/virtual_machine_detail.html
new file mode 100644
index 00000000..87edd71f
--- /dev/null
+++ b/hosting/templates/hosting/virtual_machine_detail.html
@@ -0,0 +1,155 @@
+{% extends "hosting/base_short.html" %}
+{% load staticfiles bootstrap3 %}
+{% block content %}
+<div>
+ <div class="container 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" 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>
+ Settings
+ </a>
+ </li>
+ <li>
+ <a href="#billing-v" data-toggle="tab">
+ <i class="fa fa-money" aria-hidden="true"></i>
+ Billing
+ </a>
+ </li>
+ <li>
+ <a href="#orders-v" data-toggle="tab">
+ <i class="fa fa-credit-card"></i>
+ Orders
+ </a>
+ </li>
+ <li>
+ <a href="#status-v" data-toggle="tab">
+ <i class="fa fa-signal" aria-hidden="true"></i> 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">
+ <h3>{{virtual_machine.hosting_company_name}}</h3>
+ <hr>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="row">
+ <div class="col-md-3">
+ <div class="well text-center">
+ <i class="fa fa-cubes" aria-hidden="true"></i> Cores <br/>
+ <span class="label label-success">{{virtual_machine.cores}}</span>
+ </div>
+ </div>
+ <div class="col-md-3">
+ <div class="well text-center">
+ <i class="fa fa-tachometer" aria-hidden="true"></i> Memory <br/>
+ <span class="label label-success">{{virtual_machine.memory}} GiB</span>
+ </div>
+ </div>
+ <div class="col-md-3">
+ <div class="well text-center">
+ <i class="fa fa-hdd-o" aria-hidden="true"></i> Disk <br/>
+ <span class="label label-success">{{virtual_machine.disk_size}} GiB</span>
+ </div>
+ </div>
+ </div><!--/row-->
+ </div><!--/col-12-->
+ </div><!--/row-->
+
+
+ </div>
+ <div class="tab-pane" id="billing-v">
+
+ <div class="row ">
+ <div class="col-md-12 inline-headers">
+ <h3>Current pricing</h3>
+ <span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/mo</span>
+ <hr>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane" id="orders-v">
+ <div class="row">
+ <div class="col-md-12">
+ <table class="table borderless table-hover">
+ <h3>Orders</h3>
+ <br/>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Date</th>
+ <th>Amount</th>
+ <th>Status</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for order in virtual_machine.orders %}
+ <tr>
+ <td scope="row">{{order.id}}</td>
+ <td>{{order.created_at}}</td>
+ <td>{{order.VMPlan.price}} CHF</td>
+ <td>{% if order.approved %}
+ <span class="text-success strong">Approved</span>
+ {% else%}
+ <span class="text-danger strong">Declined</span>
+ {% endif%}
+ </td>
+ <td>
+ <button type="button" class="btn btn-default"><a href="{% url 'hosting:orders' order.id %}">View Detail</a></button>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div><!--/col-12-->
+ </div><!--/row-->
+ </div>
+ <div class="tab-pane" id="status-v">
+
+ <div class="row ">
+ <div class="col-md-12 inline-headers">
+ <h3>Current status</h3>
+ <span class="h3 pull-right label label-success"><strong>Online</strong></span>
+ <hr>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="clearfix"></div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+</div>
+
+{%endblock%}
+
+
+
+
+
+
+
+
+
diff --git a/hosting/templates/hosting/virtual_machines.html b/hosting/templates/hosting/virtual_machines.html
index 47eb23b1..fa673c99 100644
--- a/hosting/templates/hosting/virtual_machines.html
+++ b/hosting/templates/hosting/virtual_machines.html
@@ -19,11 +19,11 @@
<tbody>
{% for vm in vms %}
<tr>
- <td scope="row">{{vm.id}}</td>
+ <td scope="row">{{vm.name}}</td>
<td>{{vm.hosting_company_name}}</td>
<td>{{vm.price}} CHF</td>
<td>
- <button type="button" class="btn btn-default"><a href="">View Detail</a></button>
+ <button type="button" class="btn btn-default"><a href="{% url 'hosting:virtual_machines' vm.id %}">View Detail</a></button>
</td>
</tr>
{% endfor %}
diff --git a/hosting/urls.py b/hosting/urls.py
index 31a3eaea..15aa4008 100644
--- a/hosting/urls.py
+++ b/hosting/urls.py
@@ -2,7 +2,8 @@ from django.conf.urls import url
from .views import DjangoHostingView, RailsHostingView, PaymentVMView, \
NodeJSHostingView, LoginView, SignupView, IndexView, \
- OrdersHostingListView, OrdersHostingDetailView, VirtualMachinesPlanListView
+ OrdersHostingListView, OrdersHostingDetailView, VirtualMachinesPlanListView,\
+ VirtualMachineDetailListView
urlpatterns = [
url(r'index/?$', IndexView.as_view(), name='index'),
@@ -13,6 +14,8 @@ urlpatterns = [
url(r'orders/?$', OrdersHostingListView.as_view(), name='orders'),
url(r'orders/(?P<pk>\d+)/?$', OrdersHostingDetailView.as_view(), name='orders'),
url(r'my-virtual-machines/?$', VirtualMachinesPlanListView.as_view(), name='virtual_machines'),
+ url(r'my-virtual-machines/(?P<pk>\d+)/?$', VirtualMachineDetailListView.as_view(),
+ name='virtual_machines'),
url(r'login/?$', LoginView.as_view(), name='login'),
url(r'signup/?$', SignupView.as_view(), name='signup'),
url(r'^logout/?$', 'django.contrib.auth.views.logout',
diff --git a/hosting/views.py b/hosting/views.py
index 3494c983..b0e76028 100644
--- a/hosting/views.py
+++ b/hosting/views.py
@@ -247,3 +247,10 @@ class VirtualMachinesPlanListView(LoginRequiredMixin, ListView):
user = self.request.user
self.queryset = VirtualMachinePlan.objects.active(user)
return super(VirtualMachinesPlanListView, self).get_queryset()
+
+
+class VirtualMachineDetailListView(LoginRequiredMixin, DetailView):
+ template_name = "hosting/virtual_machine_detail.html"
+ login_url = reverse_lazy('hosting:login')
+ model = VirtualMachinePlan
+ context_object_name = "virtual_machine"