dashboard/storage: Add a glossary

This explains the meaning of the different statistics taken.

Signed-off-by: Ryan Gonzalez <ryan.gonzalez@collabora.com>

templates/base.html.jinja2

@@ -45,7 +45,7 @@
 
       <hr />
 
-      <div class="d-flex align-items-baseline">
+      <div class="d-flex align-items-baseline justify-content-between">
         {% block summary %}{% endblock %}
       </div>
 

templates/storage.html.jinja2

@@ -7,23 +7,42 @@
     .snapshots-header {
       display: inline;
     }
-    .snapshots-collapse {
+
+    .collapse {
       display: none;
     }
-    .snapshots-collapse-label {
+    .collapse-label {
       display: inline !important;
     }
+    .collapse:not(:checked) + .collapse-label + .collapse-content {
+      display: none;
+    }
 
-    .snapshots-collapse:not(:checked) + .snapshots-collapse-label::after {
+    .collapse:not(:checked) + .snapshot-collapse-label::after {
       content: 'Show';
     }
-    .snapshots-collapse:checked + .snapshots-collapse-label::after {
+    .collapse:checked + .snapshot-collapse-label::after {
       content: 'Hide';
     }
 
-    .snapshots-collapse:not(:checked) + .snapshots-collapse-label + .snapshots-listing {
-      display: none;
+    .collapse:not(:checked) + .defs-collapse-label::after {
+      content: 'Show Glossary';
+    }
+    .collapse:checked + .defs-collapse-label::after {
+      content: 'Hide Glossary';
+    }
+
+    .defs-card {
+      position: relative;
+    }
+
+    .defs-card .card {
+      position: absolute !important;
+      right: 0;
+      width: min(80vw, 500px);
+      z-index: 10;
     }
+
   </style>
 {% endblock %}
 
@@ -36,6 +55,45 @@
       {{ storage_stats|sum(attribute='snapshots', start=[])|length }} snapshots
     </li>
   </ul>
+
+  <div class="d-flex flex-column align-items-end">
+    <input id="defs-collapse" class="collapse" class="toggle" type="checkbox">
+    <label for="defs-collapse" class="badge badge-info collapse-label defs-collapse-label"></label>
+    <div class="collapse-content defs-card">
+      <div class="card">
+        <div class="card-body">
+          <table class="table table-borderless table-sm">
+            <tbody>
+              <tr>
+                <th scope="row">Direct:</th>
+                <td>
+                  Amount of space used directly by this repository or snapshot, including
+                  packages that are also used by other repositories or snapshots.
+                </td>
+              </tr>
+
+              <tr>
+                <th scope="row">Unique:</th>
+                <td>
+                  Space used by files exclusive to this snapshot or repository, i.e. space
+                  that would be freed if the snapshot or repository were deleted.
+                </td>
+              </tr>
+
+              <tr>
+                <th scope="row">History:</th>
+                <td>
+                  Space used by files exclusive to the snapshots older than the current
+                  one, i.e. space that would be freed if all snapshots older than the
+                  current one were deleted.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+      </div>
+    </div>
+    </div>
+  </div>
 {% endblock %}
 
 {% block content %}
@@ -57,9 +115,9 @@
       <h6 class="snapshots-header">
         <strong class="text-dark">Snapshots</strong>
       </h6>
-      <input id="{{suite.id}}-collapse" class="snapshots-collapse" class="toggle" type="checkbox">
-      <label for="{{suite.id}}-collapse" class="badge badge-info snapshots-collapse-label"></label>
-      <div class="mt-2 snapshots-listing">
+      <input id="{{suite.id}}-collapse" class="collapse" class="toggle" type="checkbox">
+      <label for="{{suite.id}}-collapse" class="badge badge-info collapse-label snapshot-collapse-label"></label>
+      <div class="mt-2 collapse-content">
       {% for snapshot in suite.snapshots %}
         <div class="mb-1">
           <div class="container">