mgr/dashboard: Use ng-bootstrap for Progressbar

Fixes: https://tracker.ceph.com/issues/45752
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
index f63bb3d53d63a29604111be0d3f0a6603585aa6c..c1357864d5dcee0bf17adb5f3c74f4625bdfd950 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
@@ -9,7 +9,6 @@ import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
 import { FeatureTogglesGuardService } from '../../shared/services/feature-toggles-guard.service';
@@ -60,7 +59,6 @@ import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-tra
     FormsModule,
     ReactiveFormsModule,
     NgbNavModule,
-    ProgressbarModule.forRoot(),
     BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
     NgbTooltipModule,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts
index 3bd0d8c899c3208e13686014c783e2fa2c5dcb23..5bfd945963a0060dcdb39e8aff4b6c6b22c99faa 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -20,7 +19,6 @@ describe('DaemonListComponent', () => {
       BrowserAnimationsModule,
       SharedModule,
       BsDropdownModule.forRoot(),
-      ProgressbarModule.forRoot(),
       HttpClientTestingModule
     ],
     providers: i18nProviders

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
index 51f82e647afc101eec8895d32d98243d49d3baa7..584a09a9ad717e2933bd8578505bedae213db889 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
@@ -54,7 +54,7 @@
 
 <ng-template #progressTmpl
              let-value="value">
-  <progressbar type="info"
-               [value]="value">
-  </progressbar>
+  <ngb-progressbar type="info"
+                   [value]="value"
+                   [showValue]="true"></ngb-progressbar>
 </ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts
index 786c98949f5eb1f05b63f47eff6818eaf208fb14..207d148682f1d01c43b00a90628f40d52762d524 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts
@@ -2,9 +2,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -22,7 +21,7 @@ describe('ImageListComponent', () => {
       SharedModule,
       BsDropdownModule.forRoot(),
       NgbNavModule,
-      ProgressbarModule.forRoot(),
+      NgbProgressbarModule,
       HttpClientTestingModule
     ],
     providers: i18nProviders

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
index ecbf6c41ada94a27b5664ea0f3987099fcc9b4ab..917de076da08b75d2af02ca82ed9dee2944edd7d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
@@ -3,11 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 
 import { SharedModule } from '../../../shared/shared.module';
 
@@ -38,7 +37,7 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     RouterModule,
     FormsModule,
     ReactiveFormsModule,
-    ProgressbarModule.forRoot(),
+    NgbProgressbarModule,
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
     NgBootstrapFormValidationModule

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts
index d3e06ecb3e37fa56eaeda7560c5a82cbc1a65fbb..128a8c811956daebeda32a211f917e254e90c8d0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts
@@ -3,9 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
@@ -33,7 +32,7 @@ describe('OverviewComponent', () => {
       SharedModule,
       BsDropdownModule.forRoot(),
       NgbNavModule,
-      ProgressbarModule.forRoot(),
+      NgbProgressbarModule,
       HttpClientTestingModule,
       RouterTestingModule,
       ToastrModule.forRoot()

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts
index a9be82b7633f018f7b476c4511a4d50a878d7d96..5978425b8203e24313c3816d83a3863e66ea50da 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts
@@ -4,7 +4,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
@@ -22,7 +21,6 @@ describe('PoolListComponent', () => {
       BrowserAnimationsModule,
       SharedModule,
       BsDropdownModule.forRoot(),
-      ProgressbarModule.forRoot(),
       HttpClientTestingModule,
       RouterTestingModule,
       ToastrModule.forRoot()

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts
index 24a1cd98340841ea17287afc6559b6a7caea9a68..d09dd252c50bd9301d6d111156be1d0330e8da79 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts
@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeModule } from 'angular-tree-component';
 import { ChartsModule } from 'ng2-charts';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 
 import { AppRoutingModule } from '../../app-routing.module';
 import { SharedModule } from '../../shared/shared.module';
@@ -22,7 +21,6 @@ import { CephfsTabsComponent } from './cephfs-tabs/cephfs-tabs.component';
     AppRoutingModule,
     ChartsModule,
     TreeModule.forRoot(),
-    ProgressbarModule.forRoot(),
     NgbNavModule
   ],
   declarations: [

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 c9f851e7f211a4ad8aea36ca1fa63f7c3ee273b2..2368cb1e231938eacd9fb5078fa29e41c41266c7 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
@@ -3,13 +3,17 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbAlertModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbAlertModule,
+  NgbPopoverModule,
+  NgbProgressbarModule,
+  NgbTooltipModule
+} from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { ClickOutsideModule } from 'ng-click-outside';
 import { ChartsModule } from 'ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
 import { DirectivesModule } from '../directives/directives.module';
@@ -44,7 +48,7 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     ReactiveFormsModule,
     NgbAlertModule,
     NgbPopoverModule,
-    ProgressbarModule.forRoot(),
+    NgbProgressbarModule,
     NgbTooltipModule,
     ChartsModule,
     ReactiveFormsModule,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
index 16771427f3dcdc1742e4e51b5cbbfe3ca5fd968b..6fdb46bd776f4f727687de7ff3ae177fc85338f6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@@ -14,12 +14,11 @@
           <div class="card-body p-0">
             <h6 class="card-title bold">{{ executingTask.description }}</h6>
 
-            <div class="progress mb-1">
-              <progressbar class="progress-striped active"
-                           max="100"
-                           [value]="executingTask.progress"
-                           [striped]="true"
-                           [animate]="true"></progressbar>
+            <div class="mb-1">
+              <ngb-progressbar type="info"
+                               [value]="executingTask?.progress"
+                               [striped]="true"
+                               [animated]="true"></ngb-progressbar>
             </div>
 
             <p class="card-text text-muted">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts
index 9bc198d34a91e7320d6c798b272d9c1554f13b3f..f75b00f99da183012a3fa07cc415f5494962e72b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts
@@ -2,8 +2,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
 import { ClickOutsideModule } from 'ng-click-outside';
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { ToastrModule } from 'ngx-toastr';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
@@ -31,7 +31,7 @@ describe('NotificationsSidebarComponent', () => {
     imports: [
       HttpClientTestingModule,
       PipesModule,
-      ProgressbarModule.forRoot(),
+      NgbProgressbarModule,
       RouterTestingModule,
       ToastrModule.forRoot(),
       NoopAnimationsModule,