mgr/dashboard: Add usage bar component

Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index efa9144bc5706cee1442242efa0995ae1993f454..0eb5fbc0a15f375a89cb9e6f3206912aecfc1698 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -2,11 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ChartsModule } from 'ng2-charts/ng2-charts';
-import { AlertModule, PopoverModule } from 'ngx-bootstrap';
+import { AlertModule, PopoverModule, TooltipModule } from 'ngx-bootstrap';
 
+import { PipesModule } from '../pipes/pipes.module';
 import { HelperComponent } from './helper/helper.component';
 import { SparklineComponent } from './sparkline/sparkline.component';
 import { SubmitButtonComponent } from './submit-button/submit-button.component';
+import { UsageBarComponent } from './usage-bar/usage-bar.component';
 import { ViewCacheComponent } from './view-cache/view-cache.component';
 
 @NgModule({
@@ -14,20 +16,24 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     CommonModule,
     AlertModule.forRoot(),
     PopoverModule.forRoot(),
-    ChartsModule
+    TooltipModule.forRoot(),
+    ChartsModule,
+    PipesModule
   ],
   declarations: [
     ViewCacheComponent,
     SparklineComponent,
     HelperComponent,
-    SubmitButtonComponent
+    SubmitButtonComponent,
+    UsageBarComponent
   ],
   providers: [],
   exports: [
     ViewCacheComponent,
     SparklineComponent,
     HelperComponent,
-    SubmitButtonComponent
+    SubmitButtonComponent,
+    UsageBarComponent
   ]
 })
 export class ComponentsModule { }

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 (file)
index 0000000..93348f1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
@@ -0,0 +1,26 @@
+<ng-template #usageTooltipTpl>
+  <table>
+    <tr>
+      <td class="text-left">Used:&nbsp;</td>
+      <td class="text-right"><strong> {{ usedBytes | dimlessBinary }}</strong></td>
+    </tr>
+    <tr>
+      <td class="text-left">Free:&nbsp;</td>
+      <td class="'text-right"><strong>{{ freeBytes | dimlessBinary }}</strong></td>
+    </tr>
+  </table>
+</ng-template>
+
+<div class="progress oaprogress"
+     data-placement="left"
+     [tooltip]="usageTooltipTpl">
+  <div class="progress-bar progress-bar-info"
+       role="progressbar"
+       [style.width]="usedPercentage + '%'">
+    <span>{{ usedPercentage }}%</span>
+  </div>
+  <div class="progress-bar progress-bar-freespace"
+       role="progressbar"
+       [style.width]="freePercentage + '%'">
+  </div>
+</div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.spec.ts
new file mode 100644 (file)
index 0000000..a5f133f
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.spec.ts
@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TooltipModule } from 'ngx-bootstrap';
+
+import { PipesModule } from '../../pipes/pipes.module';
+import { ServicesModule } from '../../services/services.module';
+import { UsageBarComponent } from './usage-bar.component';
+
+describe('UsageBarComponent', () => {
+  let component: UsageBarComponent;
+  let fixture: ComponentFixture<UsageBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        PipesModule,
+        ServicesModule,
+        TooltipModule.forRoot()
+      ],
+      declarations: [ UsageBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsageBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 (file)
index 0000000..35d6f3e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cd-usage-bar',
+  templateUrl: './usage-bar.component.html',
+  styleUrls: ['./usage-bar.component.scss']
+})
+export class UsageBarComponent implements OnChanges {
+
+  @Input() totalBytes: number;
+  @Input() usedBytes: number;
+
+  usedPercentage: number;
+  freePercentage: number;
+  freeBytes: number;
+
+  constructor() { }
+
+  ngOnChanges() {
+    this.usedPercentage = Math.round(this.usedBytes / this.totalBytes * 100);
+    this.freePercentage = 100 - this.usedPercentage;
+    this.freeBytes = this.totalBytes - this.usedBytes;
+  }
+
+}