mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-25 15:45:23 +00:00
Fixed some bugs and redesigned html
This commit is contained in:
Retspen
parent
2aa5558df7
commit
86e1915a49
10 changed files with 93 additions and 377 deletions
|
|
@ -51,7 +51,7 @@
|
|||
<p>{{ uri_conn }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="max-width-page">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h3 class="page-header">{% trans "Performance" %}</h3>
|
||||
<div class="panel panel-success">
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div class="panel-body">
|
||||
<div class="flot-chart">
|
||||
<div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
|
||||
<canvas id="cpuChart" width="735" height="250"></canvas>
|
||||
<canvas id="cpuChart" width="735" height="160"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
<div class="panel-body">
|
||||
<div class="flot-chart">
|
||||
<div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
|
||||
<canvas id="memChart" width="735" height="250"></canvas>
|
||||
<canvas id="memChart" width="735" height="160"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@ def computes(request):
|
|||
if 'host_del' in request.POST:
|
||||
compute_id = request.POST.get('host_id', '')
|
||||
try:
|
||||
del_user_inst_on_host = UserInstance.objects.filter(compute_id=compute_id)
|
||||
del_user_inst_on_host.save()
|
||||
del_user_inst_on_host = UserInstance.objects.filter(instance__compute_id=compute_id)
|
||||
del_user_inst_on_host.delete()
|
||||
finally:
|
||||
try:
|
||||
del_inst_on_host = Instance.objects.filter(compute_id=compute_id)
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
{% block content %}
|
||||
<!-- Page Heading -->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h1 class="page-header">{{ vname }}</h1>
|
||||
<h2 class="page-header">{{ vname }}</h2>
|
||||
</div>
|
||||
<h4 class="page-header">
|
||||
{% trans "Status:" %}
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="col-sm-1 pull-right">
|
||||
{% ifequal status 5 %}
|
||||
<span class="text-danger">{% trans "Off" %}</span>
|
||||
{% endifequal %}
|
||||
|
|
@ -18,16 +18,24 @@
|
|||
{% ifequal status 3 %}
|
||||
<span class="text-warning">{% trans "Suspend" %}</span>
|
||||
{% endifequal %}
|
||||
{% trans "Vcpu:" %}
|
||||
{% if cur_vcpu %}{{ cur_vcpu }}{% else %}{{ vcpu }}{% endif %}
|
||||
{% trans "Ram:" %}
|
||||
{{ cur_memory }}{% trans "MB" %}
|
||||
{% trans "Disk:" %}
|
||||
{% for disk in disks %}
|
||||
{{ disk.size|filesizeformat }}
|
||||
{% endfor %}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="col-sm-1 pull-right">
|
||||
{% if cur_vcpu %}
|
||||
{{ cur_vcpu }} {% trans "Vcpu" %}
|
||||
{% else %}
|
||||
{{ vcpu }} {% trans "Vcpu" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-sm-2 pull-right">
|
||||
{{ cur_memory }} {% trans "MB" %} {% trans "Ram" %}
|
||||
</div>
|
||||
<div class="col-sm-2 pull-right">
|
||||
{% for disk in disks %}
|
||||
{{ disk.size|filesizeformat }} {% trans "Disk" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- /.row -->
|
||||
|
||||
{% include 'errors_block.html' %}
|
||||
|
|
@ -328,7 +336,7 @@
|
|||
<p>{% trans "This may take more than an hour, depending on how much content is on your droplet and how large the disk is." %}</p>
|
||||
<form class="form-inline" method="post" role="form">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<div class="col-sm-6">
|
||||
<div class="col-sm-12">
|
||||
<input type="text" class="form-control input-lg" name="name" placeholder="{% trans "Enter Snapshot Name" %}" maxlength="14">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -716,7 +724,7 @@
|
|||
<div class="panel-body">
|
||||
<div class="flot-chart">
|
||||
<div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
|
||||
<canvas id="cpuChart" width="735" height="250"></canvas>
|
||||
<canvas id="cpuChart" width="735" height="160"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -729,7 +737,7 @@
|
|||
<div class="panel-body">
|
||||
<div class="flot-chart">
|
||||
<div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
|
||||
<canvas id="netEth{{ forloop.counter0 }}Chart" width="735" height="250"></canvas>
|
||||
<canvas id="netEth{{ forloop.counter0 }}Chart" width="735" height="160"></canvas>
|
||||
<span class="netIN">{% trans "In" %}</span>
|
||||
<span class="netOUT">{% trans "Out" %}</span>
|
||||
</div>
|
||||
|
|
@ -745,7 +753,7 @@
|
|||
<div class="panel-body">
|
||||
<div class="flot-chart">
|
||||
<div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
|
||||
<canvas id="blk{{ disk.dev }}Chart" width="735" height="250"></canvas>
|
||||
<canvas id="blk{{ disk.dev }}Chart" width="735" height="160"></canvas>
|
||||
<span class="diskRD">{% trans "Read" %}</span>
|
||||
<span class="diskWR">{% trans "Write" %}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,12 @@
|
|||
<!-- Page Heading -->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
{% if all_host_vms %}
|
||||
{% include 'create_inst_block.html' %}
|
||||
<div class="pull-right search">
|
||||
<input id="filter" class="form-control" type="text" placeholder="Search">
|
||||
</div>
|
||||
{% endif %}
|
||||
<h1 class="page-header">{% trans "Instances" %}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,224 +0,0 @@
|
|||
/*!
|
||||
* Start Bootstrap - SB Admin Bootstrap Admin Template (http://startbootstrap.com)
|
||||
* Code licensed under the Apache License v2.0.
|
||||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*/
|
||||
|
||||
/* Global Styles */
|
||||
|
||||
body {
|
||||
margin-top: 100px;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
body {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#page-wrapper {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.huge {
|
||||
font-size: 50px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#wrapper {
|
||||
padding-left: 225px;
|
||||
}
|
||||
|
||||
#page-wrapper {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Top Navigation */
|
||||
|
||||
.top-nav {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.top-nav>li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top-nav>li>a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.top-nav>li>a:hover,
|
||||
.top-nav>li>a:focus,
|
||||
.top-nav>.open>a,
|
||||
.top-nav>.open>a:hover,
|
||||
.top-nav>.open>a:focus {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.top-nav>.open>.dropdown-menu {
|
||||
float: left;
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
||||
}
|
||||
|
||||
.top-nav>.open>.dropdown-menu>li>a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
ul.message-dropdown {
|
||||
padding: 0;
|
||||
max-height: 250px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
li.message-preview {
|
||||
width: 275px;
|
||||
border-bottom: 1px solid rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
li.message-preview>a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
li.message-footer {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
ul.alert-dropdown {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* Side Navigation */
|
||||
|
||||
@media(min-width:768px) {
|
||||
.side-nav {
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
left: 225px;
|
||||
width: 225px;
|
||||
margin-left: -225px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
overflow-y: auto;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.side-nav>li>a {
|
||||
width: 225px;
|
||||
}
|
||||
|
||||
.side-nav li a:hover,
|
||||
.side-nav li a:focus {
|
||||
outline: none;
|
||||
background-color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav>li>ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.side-nav>li>ul>li>a {
|
||||
display: block;
|
||||
padding: 10px 15px 10px 38px;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.side-nav>li>ul>li>a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Flot Chart Containers */
|
||||
|
||||
.flot-chart {
|
||||
display: block;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.flot-chart-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Custom Colored Panels */
|
||||
|
||||
.huge {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.panel-green {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green .panel-heading {
|
||||
border-color: #5cb85c;
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green a {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green a:hover {
|
||||
color: #3d8b3d;
|
||||
}
|
||||
|
||||
.panel-red {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red .panel-heading {
|
||||
border-color: #d9534f;
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red a {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red a:hover {
|
||||
color: #b52b27;
|
||||
}
|
||||
|
||||
.panel-yellow {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow .panel-heading {
|
||||
border-color: #f0ad4e;
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow a {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow a:hover {
|
||||
color: #df8a13;
|
||||
}
|
||||
|
|
@ -7,63 +7,14 @@
|
|||
/* Global Styles */
|
||||
|
||||
body {
|
||||
padding-top: 70px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
#max-width-page {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
background-color: #FFF;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.side-nav li a:hover,
|
||||
.side-nav li a:focus {
|
||||
color: #FFF;
|
||||
background-color: #5CD062 !important;
|
||||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: #6F5499;
|
||||
border-color: #6F5499;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand {
|
||||
color: #FFF;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a:focus,
|
||||
.navbar-inverse .navbar-nav>li>a:hover {
|
||||
color: #FFF;
|
||||
background-color: #5CD062;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav>.active>a,
|
||||
.navbar-inverse .navbar-nav>.active>a:focus,
|
||||
.navbar-inverse .navbar-nav>.active>a:hover {
|
||||
color: #FFF;
|
||||
background-color: #5CD062;
|
||||
}
|
||||
|
||||
.top-nav>li>a {
|
||||
color: #FFF6F6;
|
||||
}
|
||||
|
||||
.top-nav>li>a:hover,
|
||||
.top-nav>li>a:focus,
|
||||
.top-nav>.open>a,
|
||||
.top-nav>.open>a:hover,
|
||||
.top-nav>.open>a:focus {
|
||||
background-color: #5CD062;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin: 5px 5px 20px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
<div class="col-lg-12">
|
||||
{% if state %}
|
||||
<div class="row">
|
||||
<div class="pull-right search">
|
||||
<div class="pull-right">
|
||||
<input id="filter" class="form-control" type="text" placeholder="Search">
|
||||
</div>
|
||||
<h3 class="page-header">{% trans "Volumes" %}</h3>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -15,9 +13,6 @@
|
|||
<!-- Bootstrap Core CSS -->
|
||||
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
|
||||
|
||||
<!-- SB admin CSS -->
|
||||
<link href="{% static "css/sb-admin.css" %}" rel="stylesheet">
|
||||
|
||||
<!-- WebVirtCloud CSS -->
|
||||
<link href="{% static "css/webvirtcloud.css" %}" rel="stylesheet">
|
||||
|
||||
|
|
@ -33,37 +28,26 @@
|
|||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="wrapper">
|
||||
<body>
|
||||
|
||||
{% include 'navbar.html' %}
|
||||
|
||||
<div id="page-wrapper">
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="container">
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
</div> <!-- /container -->
|
||||
|
||||
</div>
|
||||
<!-- /#page-wrapper -->
|
||||
|
||||
</div>
|
||||
<!-- /#wrapper -->
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- jQuery -->
|
||||
<script src="{% static "js/jquery.js" %}"></script>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="{% static "js/bootstrap.min.js" %}"></script>
|
||||
|
||||
{% block script %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
{% load i18n %}
|
||||
{% load tags_active %}
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
|
|
@ -10,11 +12,27 @@
|
|||
</button>
|
||||
<a class="navbar-brand" href="{% url 'index' %}">WebVirtCloud</a>
|
||||
</div>
|
||||
<!-- Top Menu Items -->
|
||||
<ul class="nav navbar-right top-nav">
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li {% class_active request "^/instance" %}>
|
||||
<a href="{% url 'instances' %}"><i class="fa fa-fw fa-desktop"></i> {% trans "Instances" %}</a>
|
||||
</li>
|
||||
{% if request.user.is_superuser %}
|
||||
<li {% class_active request "^/compute" %}{% class_active request "^/create" %}>
|
||||
<a href="{% url 'computes' %}"><i class="fa fa-fw fa-tasks"></i> {% trans "Computes" %}</a>
|
||||
</li>
|
||||
<li {% class_active request "^/account" %}>
|
||||
<a href="{% url 'accounts' %}"><i class="fa fa-fw fa-users"></i> {% trans "Users" %}</a>
|
||||
</li>
|
||||
<li {% class_active request "^/log" %}>
|
||||
<a href="{% url 'showlogs' %}"><i class="fa fa-fw fa-list-alt"></i> {% trans "Logs" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> {{ request.user.username }} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ request.user.username }} <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<a href="{% url 'profile' %}"><i class="fa fa-fw fa-user"></i> Profile</a>
|
||||
</li>
|
||||
|
|
@ -25,8 +43,6 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% include 'sidebar.html' %}
|
||||
|
||||
<!-- /.navbar-collapse -->
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{% load i18n %}
|
||||
{% load tags_active %}
|
||||
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
|
||||
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
||||
<ul class="nav navbar-nav side-nav">
|
||||
<li {% class_active request "^/instance" %}>
|
||||
<a href="{% url 'instances' %}"><i class="fa fa-fw fa-desktop"></i> {% trans "Instances" %}</a>
|
||||
</li>
|
||||
{% if request.user.is_superuser %}
|
||||
<li {% class_active request "^/compute" %}{% class_active request "^/create" %}>
|
||||
<a href="{% url 'computes' %}"><i class="fa fa-fw fa-tasks"></i> {% trans "Computes" %}</a>
|
||||
</li>
|
||||
<li {% class_active request "^/account" %}>
|
||||
<a href="{% url 'accounts' %}"><i class="fa fa-fw fa-users"></i> {% trans "Users" %}</a>
|
||||
</li>
|
||||
<li {% class_active request "^/log" %}>
|
||||
<a href="{% url 'showlogs' %}"><i class="fa fa-fw fa-list-alt"></i> {% trans "Logs" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
Loading…
Reference in a new issue