Added VM detail page, Added VM setting page, Added VM pricing page,Added VM orders page, Added VM status page

This commit is contained in:
Levi 2016-05-04 00:16:41 -05:00
parent 539117741e
commit a99ea335c8
9 changed files with 226 additions and 20 deletions

View file

@ -90,6 +90,15 @@ class VirtualMachinePlan(models.Model):
def hosting_company_name(self): def hosting_company_name(self):
return self.vm_type.get_hosting_company_display() 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 @classmethod
def create(cls, data, user): def create(cls, data, user):
instance = cls.objects.create(**data) instance = cls.objects.create(**data)

View file

@ -13,3 +13,8 @@
display: block; display: block;
color: transparent; color: transparent;
} }
.inline-headers h3, .inline-headers h4 {
display: inline-block;
vertical-align: baseline;
}

View file

@ -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;
}

View file

@ -18,9 +18,10 @@
<!-- Custom CSS --> <!-- Custom CSS -->
<link href="{% static 'hosting/css/landing-page.css' %}" rel="stylesheet"> <link href="{% static 'hosting/css/landing-page.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/payment.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/orders.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet"> <link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/virtual-machine.css' %}" rel="stylesheet">
<!-- Custom Fonts --> <!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

View file

@ -2,22 +2,6 @@
{% load staticfiles bootstrap3 %} {% load staticfiles bootstrap3 %}
{% block content %} {% block content %}
<style type="text/css">
.borderless td {
border: none !important;
}
.borderless thead {
}
.borderless tbody:before {
content: "-";
display: block;
color: transparent;
}
</style>
<div> <div>
<div class="container orders-container"> <div class="container orders-container">
<div class="row"> <div class="row">

View file

@ -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%}

View file

@ -19,11 +19,11 @@
<tbody> <tbody>
{% for vm in vms %} {% for vm in vms %}
<tr> <tr>
<td scope="row">{{vm.id}}</td> <td scope="row">{{vm.name}}</td>
<td>{{vm.hosting_company_name}}</td> <td>{{vm.hosting_company_name}}</td>
<td>{{vm.price}} CHF</td> <td>{{vm.price}} CHF</td>
<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> </td>
</tr> </tr>
{% endfor %} {% endfor %}

View file

@ -2,7 +2,8 @@ from django.conf.urls import url
from .views import DjangoHostingView, RailsHostingView, PaymentVMView, \ from .views import DjangoHostingView, RailsHostingView, PaymentVMView, \
NodeJSHostingView, LoginView, SignupView, IndexView, \ NodeJSHostingView, LoginView, SignupView, IndexView, \
OrdersHostingListView, OrdersHostingDetailView, VirtualMachinesPlanListView OrdersHostingListView, OrdersHostingDetailView, VirtualMachinesPlanListView,\
VirtualMachineDetailListView
urlpatterns = [ urlpatterns = [
url(r'index/?$', IndexView.as_view(), name='index'), url(r'index/?$', IndexView.as_view(), name='index'),
@ -13,6 +14,8 @@ urlpatterns = [
url(r'orders/?$', OrdersHostingListView.as_view(), name='orders'), url(r'orders/?$', OrdersHostingListView.as_view(), name='orders'),
url(r'orders/(?P<pk>\d+)/?$', OrdersHostingDetailView.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/?$', 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'login/?$', LoginView.as_view(), name='login'),
url(r'signup/?$', SignupView.as_view(), name='signup'), url(r'signup/?$', SignupView.as_view(), name='signup'),
url(r'^logout/?$', 'django.contrib.auth.views.logout', url(r'^logout/?$', 'django.contrib.auth.views.logout',

View file

@ -247,3 +247,10 @@ class VirtualMachinesPlanListView(LoginRequiredMixin, ListView):
user = self.request.user user = self.request.user
self.queryset = VirtualMachinePlan.objects.active(user) self.queryset = VirtualMachinePlan.objects.active(user)
return super(VirtualMachinesPlanListView, self).get_queryset() 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"