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:
		
					parent
					
						
							
								bbddb48ecc
							
						
					
				
			
			
				commit
				
					
						1486843af0
					
				
			
		
					 9 changed files with 226 additions and 20 deletions
				
			
		| 
						 | 
				
			
			@ -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)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -13,3 +13,8 @@
 | 
			
		|||
    display: block;
 | 
			
		||||
    color: transparent;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.inline-headers h3, .inline-headers h4 {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  vertical-align: baseline;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										42
									
								
								hosting/static/hosting/css/virtual-machine.css
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										42
									
								
								hosting/static/hosting/css/virtual-machine.css
									
										
									
									
									
										Normal 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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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'>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										155
									
								
								hosting/templates/hosting/virtual_machine_detail.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										155
									
								
								hosting/templates/hosting/virtual_machine_detail.html
									
										
									
									
									
										Normal 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%}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -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 %}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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',
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue