From c8cf49bf6caaaf632b6ea7a9687270ac46a5ea56 Mon Sep 17 00:00:00 2001
From: Javier Sánchez Parra <jsanchez@soleta.eu>
Date: Thu, 17 Mar 2022 08:20:03 +0100
Subject: Summarize dashboard information

* Rename "ogLives" to "ogLive images".

* Move "Number of images" table to take less space.

* Show storage data as "Storage size | Used (%) | Available (%)".

* Move "Latest images" an "ogLive images" to the bottom.
---
 ogcp/templates/dashboard.html | 102 +++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 52 deletions(-)

(limited to 'ogcp/templates/dashboard.html')

diff --git a/ogcp/templates/dashboard.html b/ogcp/templates/dashboard.html
index 9e644a2..5187b15 100644
--- a/ogcp/templates/dashboard.html
+++ b/ogcp/templates/dashboard.html
@@ -29,25 +29,14 @@
         <p class="card-text">{{ clients['clients'] | length }}</p>
       </li>
     </ul>
-  </div>
-
-  <!-- latest images -->
-  <div class="col-{{ colsize }}">
-    <div class="card text-center">
-      <div class="card-header">
-        {{ _('Latest images') }}
-      </div>
-        {% for image in images[:10] %}
-          <ul class="list-group list-group-horizontal">
-            <li class="list-group-item w-50">
-              {{ image['name'] }}
-            </li>
-            <li class="list-group-item w-50">
-              {{ image['modified'] }}
-            </li>
-          </ul>
-        {% endfor %}
-    </div>
+    <ul class="list-group list-group-horizontal">
+      <li class="list-group-item w-50">
+        {{ _('Number of images') }}
+      </li>
+      <li class="list-group-item w-50">
+        <p class="card-text">{{ images | length }}</p>
+      </li>
+    </ul>
   </div>
 
   <!-- disk stats -->
@@ -63,13 +52,10 @@
             {{ _('Disk size') }}
           </li>
           <li class="list-group-item w-50">
-            {{ _('used') }}
-          </li>
-          <li class="list-group-item w-50">
-            {{ _('available') }}
+            {{ _('used') }} (%)
           </li>
           <li class="list-group-item w-50">
-            {{ _('use') }}(%)
+            {{ _('available') }} (%)
           </li>
         </ul>
         <ul class="list-group list-group-horizontal">
@@ -78,40 +64,14 @@
           </li>
           <li class="list-group-item w-50">
             {{ (disk['total'] - disk['free']) // 2**30 }} Gbytes
+            ({{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%)
           </li>
           <li class="list-group-item w-50">
             {{ disk['free'] // 2**30 }} Gbytes
-          </li>
-          <li class="list-group-item w-50">
-            {{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%
+            ({{ ((disk['free'] / disk['total']) * 100)|int }}%)
           </li>
         </ul>
       </div>
-      <div class="card-header">
-        {{ _('Number of images') }}
-      </div>
-      <div class="card-body">
-        <p class="card-text">{{ images | length }}</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- ogLives -->
-  <div class="col-{{ colsize }}">
-    <div class="card text-center">
-      <div class="card-header">
-        ogLives
-      </div>
-        <ul class="list-group">
-          {% for oglive in oglive_list['oglive'] %}
-            <li class="list-group-item">
-              {{ oglive['directory'] }}
-            {% if loop.index0 == oglive_list['default'] %}
-              ({{ _('default') }})
-            {% endif %}
-            </li>
-          {% endfor %}
-        </ul>
     </div>
   </div>
 
@@ -186,6 +146,44 @@
       </div>
     </div>
   </div>
+
+  <!-- latest images -->
+  <div class="col-{{ colsize }}">
+    <div class="card text-center">
+      <div class="card-header">
+        {{ _('Latest images') }}
+      </div>
+        {% for image in images[:10] %}
+          <ul class="list-group list-group-horizontal">
+            <li class="list-group-item w-50">
+              {{ image['name'] }}
+            </li>
+            <li class="list-group-item w-50">
+              {{ image['modified'] }}
+            </li>
+          </ul>
+        {% endfor %}
+    </div>
+  </div>
+
+  <!-- ogLives -->
+  <div class="col-{{ colsize }}">
+    <div class="card text-center">
+      <div class="card-header">
+        {{ _('ogLive images') }}
+      </div>
+        <ul class="list-group">
+          {% for oglive in oglive_list['oglive'] %}
+            <li class="list-group-item">
+              {{ oglive['directory'] }}
+            {% if loop.index0 == oglive_list['default'] %}
+              ({{ _('default') }})
+            {% endif %}
+            </li>
+          {% endfor %}
+        </ul>
+    </div>
+  </div>
 </div>
 {% endblock %}
 
-- 
cgit v1.2.3-18-g5258