1 files changed, 43 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts
new file mode 100644
index 000000000..203f2c9e0
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts
@@ -0,0 +1,43 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+import _ from 'lodash';
+
+@Component({
+  selector: 'cd-usage-bar',
+  templateUrl: './usage-bar.component.html',
+  styleUrls: ['./usage-bar.component.scss']
+})
+export class UsageBarComponent implements OnChanges {
+  @Input()
+  total: number;
+  @Input()
+  used: any;
+  @Input()
+  warningThreshold: number;
+  @Input()
+  errorThreshold: number;
+  @Input()
+  isBinary = true;
+  @Input()
+  decimals = 0;
+  @Input()
+  calculatePerc = true;
+
+  usedPercentage: number;
+  freePercentage: number;
+
+  ngOnChanges() {
+    if (this.calculatePerc) {
+      this.usedPercentage = this.total > 0 ? (this.used / this.total) * 100 : 0;
+      this.freePercentage = 100 - this.usedPercentage;
+    } else {
+      if (this.used) {
+        this.used = this.used.slice(0, -1);
+        this.usedPercentage = Number(this.used);
+        this.freePercentage = 100 - this.usedPercentage;
+      } else {
+        this.usedPercentage = 0;
+      }
+    }
+  }
+}