From 70032fc2e1a8cf2dd11062889b9355c987eae54d Mon Sep 17 00:00:00 2001
From: catborise <catborise@yahoo.com>
Date: Mon, 20 Jan 2020 15:47:14 +0300
Subject: [PATCH] re organize instance overview. add snapshot indicator if
 there is... add bottom bar for navigation.

---
 instances/templates/instance.html | 124 ++++++++++++++++++------------
 1 file changed, 74 insertions(+), 50 deletions(-)

diff --git a/instances/templates/instance.html b/instances/templates/instance.html
index 968d307..6cc510f 100644
--- a/instances/templates/instance.html
+++ b/instances/templates/instance.html
@@ -4,61 +4,85 @@
 {% block title %}{% trans "Instance" %} - {{ vname }}{% endblock %}
 {% block content %}
     {% include 'pleasewaitdialog.html' %}
+    <nav class="navbar navbar-default navba navbar-fixed-bottom">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_bottom" aria-expanded="false" aria-controls="navbar">
+                    <span class="sr-only">{% trans 'Toggle navigation' %}</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">{% trans 'HOST' %}</a>
+            </div>
+            <div id="navbar_bottom" class="navbar-collapse collapse">
+                <ul class="nav navbar-nav">
+                    <li>
+                        <a class="navbar-link" href="{% url 'overview' compute.id %}">
+                            <i class="fa fa-dashboard"></i>
+                            {{ compute.name }} {% if compute.name != compute.hostname %} - {{ compute.hostname }}{% endif %}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{% url 'instances' compute.id %}"><i class="fa fa-server"></i> {% trans "Instances" %}</a>
+                    </li>
+                    <li class="active">
+                        <a href="{% url 'instance' compute.id vname %}"><i class="fa fa-hdd-o"></i> {{ vname }}</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
     <!-- Page Heading -->
-     <div class="row">
+     <div>
         <div>
-            <h3>
-                {{ vname }}{% if title %}&nbsp;({{ title }}){% endif %}
-            </h3>
+            <h3>{{ vname }}{% if title %}&nbsp;({{ title }}){% endif %}</h3>
         </div>
         <div>
-            <div>
-                {% if status == 5 %}
-                   <span class="label label-danger">{% trans "Off" %}</span>
-                {% endif %}
-                {% if status == 1 %}
-                    <span class="label label-success">{% trans "Active" %}</span>
-                {% endif %}
-                {% if status == 3 %}
-                    <span class="label label-warning">{% trans "Suspend" %}</span>
-                {% endif %}
-                |
-                {% if cur_vcpu %}
-                    {{ cur_vcpu }} {% trans "Vcpu" %}
-                {% else %}
-                    {{ vcpu }} {% trans "Vcpu" %}
-                {% endif %}
-                |
-                {{ cur_memory }} {% trans "MB" %} {% trans "Ram" %}
-                |
-                {% for disk in disks %}
-                    {{ disk.size|filesizeformat }} {% trans "Disk" %} |
-                {% endfor %}
-                {% for net in networks %}
-                   {% for ipv4 in net.ipv4|default:"-" %}
-                       {{ ipv4 }} |
-                   {% endfor %}
-                {% endfor %}
-                <button
-                    {% if guest_agent == True %}
-                        {% if guest_agent_ready == True %}
-                            class="btn btn-xs btn-success"
-                            title="Guest Agent Enabled & Connected"
-                        {% else %}
-                            class="btn btn-xs btn-default"
-                            title="Guest Agent Enabled but not Connected"
-                        {% endif %}
+            {% if status == 5 %}
+               <span class="label label-danger">{% trans "Off" %}</span>
+            {% endif %}
+            {% if status == 1 %}
+                <span class="label label-success">{% trans "Active" %}</span>
+            {% endif %}
+            {% if status == 3 %}
+                <span class="label label-warning">{% trans "Suspend" %}</span>
+            {% endif %}
+            |
+            <i {%if guest_agent == True %}
+                    {% if guest_agent_ready == True %}
+                        class="fa fa-plug text-success"
+                        title="Guest Agent Enabled & Connected"
                     {% else %}
-                        class="btn btn-xs btn-danger"
-                        title="Guest Agent Not Enabled & Not Connected"
-                    {% endif %} disabled>
-                        <span class="glyphicon glyphicon-flash"></span>
-                </button>
-                |
-                <a href="{% url 'instance' compute.id vname %}" type="button" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-refresh"></span></a>
-                <em>on</em>
-                <a href="{% url 'overview' compute.id %}"><span class="label label-primary">{{ compute.name }}{% if compute.name != compute.hostname %} - {{ compute.hostname }}{% endif %} </span></a>
-            </div>
+                        class="fa fa-plug text-warning"
+                        title="Guest Agent Enabled but not Connected"
+                    {% endif %}
+                {% else %}
+                    class="fa fa-plug text-danger"
+                    title="Guest Agent Not Enabled & Not Connected"
+                {% endif %}>
+            </i>
+            |
+            {% if snapshots %}
+                <i class="fa fa-camera text-primary" title="There are {{ snapshots|length }} snapshot(s)"></i> |
+            {% endif %}
+            {% if cur_vcpu %}
+                {{ cur_vcpu }} {% trans "Vcpu" %}
+            {% else %}
+                {{ vcpu }} {% trans "Vcpu" %}
+            {% endif %}
+            |
+            {{ cur_memory }} {% trans "MB" %} {% trans "Ram" %}
+            |
+            {% for disk in disks %}
+                {{ disk.size|filesizeformat }} {% trans "Disk" %} |
+            {% endfor %}
+            {% for net in networks %}
+               {% for ipv4 in net.ipv4 %}
+                   {{ ipv4 }} |
+               {% endfor %}
+            {% endfor %}
+            <a href="{% url 'instance' compute.id vname %}" title="{% trans 'refresh instance info' %}"><span class="fa fa-refresh"></span></a>
         </div>
         {% if user_quota_msg %}
             <span class="label label-warning">{{ user_quota_msg|capfirst }} {% trans "quota reached" %}.</span>