1 files changed, 27 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
new file mode 100644
index 000000000..0602a4e59
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
@@ -0,0 +1,27 @@
+<ng-template #usageTooltipTpl>
+  <table>
+    <tr>
+      <td class="text-left">Used:&nbsp;</td>
+      <td class="text-right"><strong> {{ isBinary ? (used | dimlessBinary) : (used | dimless) }}</strong></td>
+    </tr>
+    <tr *ngIf="calculatePerc">
+      <td class="text-left">Free:&nbsp;</td>
+      <td class="'text-right"><strong>{{ isBinary ? (total - used | dimlessBinary) : (total - used | dimless) }}</strong></td>
+    </tr>
+  </table>
+</ng-template>
+
+<div class="progress"
+     data-placement="left"
+     [ngbTooltip]="usageTooltipTpl">
+  <div class="progress-bar bg-info"
+       [ngClass]="{'bg-warning': usedPercentage/100 >= warningThreshold, 'bg-danger': usedPercentage/100 >= errorThreshold}"
+       role="progressbar"
+       [style.width]="usedPercentage + '%'">
+    <span>{{ usedPercentage | number: '1.0-' + decimals }}%</span>
+  </div>
+  <div class="progress-bar bg-freespace"
+       role="progressbar"
+       [style.width]="freePercentage + '%'">
+  </div>
+</div>