From 3a83a27afd18b4539c523b3da66b203e2cef60ab Mon Sep 17 00:00:00 2001
From: Mateusz Kowalski <mateusz.kowalski@cern.ch>
Date: Tue, 19 Sep 2017 11:44:01 +0200
Subject: [PATCH] Fix quota bars in Create Share panel

Make quota bars render in the same way as in horizon-base, so they
are shown correctly and their style is consistent with the one used
when creating new volume.

Change-Id: I96e52f91c56e907ee15a3dbdb296f3b1f978e558
Closes-Bug: #1718160
---
 .../shares/templates/shares/_limits.html      | 51 ++++++++++++++-----
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/manila_ui/dashboards/project/shares/templates/shares/_limits.html b/manila_ui/dashboards/project/shares/templates/shares/_limits.html
index 5fdd6b4c..46029ce9 100644
--- a/manila_ui/dashboards/project/shares/templates/shares/_limits.html
+++ b/manila_ui/dashboards/project/shares/templates/shares/_limits.html
@@ -1,4 +1,4 @@
-{% load i18n horizon humanize %}
+{% load i18n horizon humanize bootstrap %}
 
 <h3>{% trans "Description" %}:</h3>
 
@@ -13,22 +13,49 @@
 
 <h3>{% trans "Share Limits" %}</h3>
 
-<div class="quota_title clearfix">
-  <strong>{% trans "Total Gibibytes" %} <span>({{ usages.totalGigabytesUsed|intcomma }} {% trans "GiB" %})</span></strong>
-  <p>{{ usages.maxTotalShareGigabytes|quota:_("GiB")|intcomma }}</p>
+<div class="quota_title">
+  <div class="pull-left">
+    <strong>{% trans "Total Gibibytes" %}</strong>
+  </div>
+  <span class="pull-right">
+    {% blocktrans with used=usages.totalShareGigabytesUsed|intcomma quota=usages.maxTotalShareGigabytes|intcomma|quotainf %}{{ used }} of {{ quota }} GiB Used{% endblocktrans %}
+  </span>
 </div>
 
-<div id="quota_size" data-progress-indicator-for="id_size" data-quota-limit="{{ usages.maxTotalShareGigabytes }}" data-quota-used="{{ usages.totalGigabytesUsed }}" class="quota_bar">
+{{ minifyspace }}
+<div id="quota_size"
+     data-progress-indicator-for="id_size"
+     data-quota-limit="{{ usages.maxTotalShareGigabytes }}"
+     data-quota-used={% block gigabytes_used_progress %}"{{ usages.totalShareGigabytesUsed }}"{% endblock %}
+     class="quota_bar">
+  {% widthratio usages.totalShareGigabytesUsed usages.maxTotalShareGigabytes 100 as gigabytes_percent %}
+  {% bs_progress_bar gigabytes_percent 0 %}
+</div>
+{{ endminifyspace }}
+
+<div class="quota_title">
+  <div class="pull-left">
+    <strong>{% block type_title %}{% trans "Number of Shares" %}{% endblock %}</strong>
+  </div>
+  <span class="pull-right">
+    {% block used_of_quota %}
+      {% blocktrans with used=usages.totalSharesUsed|intcomma quota=usages.maxTotalShares|intcomma|quotainf %}{{ used }} of {{ quota }} Used{% endblocktrans %}
+    {% endblock %}
+  </span>
 </div>
 
-<div class="quota_title clearfix">
-  <strong>{% trans "Number of Shares" %} <span>({{ usages.totalSharesUsed|intcomma }})</span></strong>
-  <p>{{ usages.maxTotalShares|quota|intcomma }}</p>
+{{ minifyspace }}
+<div id={% block type_id %}"quota_shares"{% endblock %}
+     data-quota-limit={% block total_progress %}"{{ usages.maxTotalShares }}"{% endblock %}
+     data-quota-used={% block used_progress %}"{{ usages.totalSharesUsed }}"{% endblock %}
+     class="quota_bar">
+  {% block show_progress_bar %}
+    {% widthratio usages.totalSharesUsed usages.maxTotalShares 100 as shares_percent %}
+    {% widthratio 100 usages.maxTotalShares 1 as single_step %}
+    {% bs_progress_bar shares_percent single_step %}
+  {% endblock %}
 </div>
-
-<div id="quota_shares" data-progress-indicator-step-by="1" data-quota-limit="{{ usages.maxTotalShares}}" data-quota-used="{{ usages.totalSharesUsed }}" class="quota_bar">
-</div>
-
+{{ endminifyspace }}
 
 <script type="text/javascript" charset="utf-8">
   if(typeof horizon.Quota !== 'undefined') {