Create component 'usage_progress_bar'.

musician/templates/musician/components/usage_progress_bar.html

@@ -0,0 +1,17 @@
+{% comment %}
+Resource usage rendered as bootstrap progress bar 
+
+Expected parameter: detail
+Expected structure: dictionary or object with attributes:
+    - usage (int): 125
+    - total (int): 200
+    - unit (string): 'MB'
+    - percent (int: [0, 25, 50, 75, 100]: 75
+{% endcomment %}
+<div class="text-center">
+    {{ detail.usage }} of {{ detail.total }}{{ detail.unit }}
+</div>
+<div class="progress">
+    <div class="progress-bar bg-secondary w-{{ detail.percent }}" role="progressbar" aria-valuenow="{{ detail.usage }}"
+        aria-valuemin="0" aria-valuemax="{{ detail.total }}"></div>
+</div>

musician/templates/musician/mail.html

@@ -28,14 +28,7 @@
             <td>{{ obj.type|capfirst }}</td>
             <td>
                 {% if obj.type == 'mailbox' %}
-                {% with obj.type_detail as detail %}
+                {% include "musician/components/usage_progress_bar.html" with detail=obj.type_detail %}
-                <div class="text-center">
-                    {{ detail.usage }} of {{ detail.total }}{{ detail.unit }}
-                </div>
-                <div class="progress">
-                    <div class="progress-bar bg-secondary w-{{ detail.percent }}" role="progressbar" aria-valuenow="{{ detail.usage }}" aria-valuemin="0" aria-valuemax="{{ detail.total }}"></div>
-                </div>
-                {% endwith %}
                 {% else %}
                 {{ obj.type_detail }}
                 {% endif %}