Fixed some bugs and redesigned html

computes/templates/overview.html

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

computes/views.py

@@ -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 = UserInstance.objects.filter(instance__compute_id=compute_id)
-                del_user_inst_on_host.save()
+                del_user_inst_on_host.delete()
             finally:
                 try:
                     del_inst_on_host = Instance.objects.filter(compute_id=compute_id)

instances/templates/instance.html

@@ -3,12 +3,12 @@
 {% block title %}{% trans "Instance" %} - {{ vname }}{% endblock %}
 {% block content %}
                 <!-- Page Heading -->
+                 <div class="row">
+                    <h2 class="page-header">{{ vname }}</h2>
+                </div>
+<!--
                 <div class="row">
-                    <div class="col-lg-12">
+                    <div class="col-sm-1 pull-right">
-                        <h1 class="page-header">{{ vname }}</h1>
-                    </div>
-                    <h4 class="page-header">
-                        {% trans "Status:" %}
                         {% 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:" %}
+                    </div>
-                        {% if cur_vcpu %}{{ cur_vcpu }}{% else %}{{ vcpu }}{% endif %}
+                    <div class="col-sm-1 pull-right">
-                        {% trans "Ram:" %}
+                        {% if cur_vcpu %}
-                        {{ cur_memory }}{% trans "MB" %}
+                            {{ cur_vcpu }} {% trans "Vcpu" %}
-                        {% trans "Disk:" %}
+                        {% 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 }}
+                            {{ disk.size|filesizeformat }} {% trans "Disk" %}
                         {% endfor %}
-                    </h4>
+                    </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>

instances/templates/instances.html

@@ -9,10 +9,12 @@
                 <!-- Page Heading -->
                 <div class="row">
                     <div class="col-lg-12">
-                        {% include 'create_inst_block.html' %}
+                        {% if all_host_vms %}
-                        <div class="pull-right search">
+                            {% include 'create_inst_block.html' %}
-                            <input id="filter" class="form-control" type="text" placeholder="Search">
+                            <div class="pull-right search">
-                        </div>
+                                <input id="filter" class="form-control" type="text" placeholder="Search">
+                            </div>
+                        {% endif %}
                         <h1 class="page-header">{% trans "Instances" %}</h1>
                     </div>
                 </div>

static/css/sb-admin.css

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

static/css/webvirtcloud.css

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

storages/templates/storage.html

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

templates/base.html

@@ -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>
 
-<body>
+    {% include 'navbar.html' %}
 
-    <div id="wrapper">
+    <div class="container">
 
-        {% include 'navbar.html' %}
+    {% block content %}{% endblock %}
 
-        <div id="page-wrapper">
+    </div> <!-- /container -->
 
-            <div class="container-fluid">
-
-            {% block content %}{% endblock %}
-
-            </div>
-            <!-- /.container-fluid -->
-
-        </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>

templates/navbar.html

@@ -1,32 +1,48 @@
-        <!-- Navigation -->
+{% load i18n %}
-        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+{% load tags_active %}
-            <!-- Brand and toggle get grouped for better mobile display -->
+        <!-- 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="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
-                </button>
+              </button>
-                <a class="navbar-brand" href="{% url 'index' %}">WebVirtCloud</a>
+              <a class="navbar-brand" href="{% url 'index' %}">WebVirtCloud</a>
             </div>
-            <!-- Top Menu Items -->
+            <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-right top-nav">
+              <ul class="nav navbar-nav">
-                <li class="dropdown">
+                <li {% class_active request "^/instance" %}>
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> {{ request.user.username }} <b class="caret"></b></a>
+                    <a href="{% url 'instances' %}"><i class="fa fa-fw fa-desktop"></i> {% trans "Instances" %}</a>
-                    <ul class="dropdown-menu">
-                        <li>
-                            <a href="{% url 'profile' %}"><i class="fa fa-fw fa-user"></i> Profile</a>
-                        </li>
-                        <li class="divider"></li>
-                        <li>
-                            <a href="{% url 'logout' %}"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
-                        </li>
-                    </ul>
                 </li>
-            </ul>
+                {% if request.user.is_superuser %}
-
+                    <li {% class_active request "^/compute" %}{% class_active request "^/create" %}>
-            {% include 'sidebar.html' %}
+                        <a href="{% url 'computes' %}"><i class="fa fa-fw fa-tasks"></i> {% trans "Computes" %}</a>
-
+                    </li>
-            <!-- /.navbar-collapse -->
+                    <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" 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>
+                    <li class="divider"></li>
+                    <li>
+                        <a href="{% url 'logout' %}"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div><!--/.nav-collapse -->
+          </div>
         </nav>

templates/sidebar.html

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