mgr/dashboard_v2: adapt pool detail with cache view component

This modifies how pool detail show the cache information to the user
and implements a continuous update of the images information.

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/block.module.ts
index da6c9c1f3a2ad59aeec083c090bfe13dc5cb0114..601b22f142e181fe7d339d59890c829e75da124f 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/block.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/block.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { AlertModule, TabsModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap';
 
 import { ComponentsModule } from '../../shared/components/components.module';
 import { PipesModule } from '../../shared/pipes/pipes.module';
@@ -14,7 +14,6 @@ import { PoolDetailComponent } from './pool-detail/pool-detail.component';
     CommonModule,
     FormsModule,
     TabsModule.forRoot(),
-    AlertModule.forRoot(),
     SharedModule,
     ComponentsModule,
     PipesModule

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.html
index 6bad01787ce92b1509c6403a7911c7228ed367ab..09207242bc7c0d5fd57a77bbe56d769f7cbca791 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.html
@@ -2,33 +2,14 @@
   <ol class="breadcrumb">
     <li class="breadcrumb-item">Block</li>
     <li class="breadcrumb-item">Pools</li>
-    <li class="breadcrumb-item active" aria-current="page">{{ name }}</li>
+    <li class="breadcrumb-item active"
+        aria-current="page">{{ name }}</li>
   </ol>
 </nav>
 
-<legend>
-  Images
-  <small>
-    <i class="fa fa-spinner fa-spin fa-fw"
-       aria-hidden="true"
-       *ngIf="images === null && retries <= maxRetries"></i>
-  </small>
-</legend>
-
-<alert type="warning" *ngIf="images === null && retries > 0 && retries <= maxRetries">
-  Still working, please wait{{ retries | ellipsis }}
-</alert>
-
-<alert type="danger" *ngIf="images === null && retries > maxRetries">
-  Cannot load images within {{ name }}.
-</alert>
-
-<div *ngIf="images !== null && images.length === 0">
-  There are no images within {{ name }} pool.
-</div>
+<cd-view-cache [status]="viewCacheStatus"></cd-view-cache>
 
 <cd-table [data]="images"
           [columns]="columns"
-          (fetchData)="loadImages()"
-          *ngIf="images !== null && images.length > 0">
+          (fetchData)="loadImages()">
 </cd-table>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.ts
index b93a98f4c47330fca1756869c6692d9ff568fcfa..3fd5812c493d0cbfeb674d63227fb578f15b9f06 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.ts
@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
+import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
 import { DimlessPipe } from '../../../shared/pipes/dimless.pipe';
 import { FormatterService } from '../../../shared/services/formatter.service';
@@ -13,18 +14,21 @@ import { PoolService } from '../../../shared/services/pool.service';
   styleUrls: ['./pool-detail.component.scss']
 })
 export class PoolDetailComponent implements OnInit, OnDestroy {
-
   name: string;
   images: any;
-  columns: any;
+  columns: CdTableColumn[];
   retries: number;
   maxRetries = 5;
   routeParamsSubscribe: any;
+  viewCacheStatus: ViewCacheStatus;
+  interval: any;
 
-  constructor(private route: ActivatedRoute,
-              private poolService: PoolService,
-              dimlessBinaryPipe: DimlessBinaryPipe,
-              dimlessPipe: DimlessPipe) {
+  constructor(
+    private route: ActivatedRoute,
+    private poolService: PoolService,
+    dimlessBinaryPipe: DimlessBinaryPipe,
+    dimlessPipe: DimlessPipe
+  ) {
     this.columns = [
       {
         name: 'Name',
@@ -55,7 +59,8 @@ export class PoolDetailComponent implements OnInit, OnDestroy {
       {
         name: 'Features',
         prop: 'features_name',
-        width: 150},
+        width: 150
+      },
       {
         name: 'Parent',
         prop: 'parent',
@@ -67,29 +72,29 @@ export class PoolDetailComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.routeParamsSubscribe = this.route.params.subscribe((params: { name: string }) => {
       this.name = params.name;
-      this.images = null;
+      this.images = [];
       this.retries = 0;
-      this.loadImages();
     });
+
+    this.interval = setInterval(() => {
+      this.loadImages();
+    }, 5000);
   }
 
   ngOnDestroy() {
     this.routeParamsSubscribe.unsubscribe();
+    clearInterval(this.interval);
   }
 
   loadImages() {
-    this.poolService.rbdPoolImages(this.name).then((resp) => {
-      if (resp.status === ViewCacheStatus.ValueNone) {
-        setTimeout(() => {
-          this.retries++;
-          if (this.retries <= this.maxRetries) {
-            this.loadImages();
-          }
-        }, 1000);
-      } else {
-        this.retries = 0;
+    this.poolService.rbdPoolImages(this.name).then(
+      resp => {
+        this.viewCacheStatus = resp.status;
         this.images = resp.value;
+      },
+      () => {
+        this.viewCacheStatus = ViewCacheStatus.ValueException;
       }
-    });
+    );
   }
 }

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.spec.ts
deleted file mode 100644 (file)
index cda1a3c..0000000
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { EllipsisPipe } from './ellipsis.pipe';
-
-describe('EllipsisPipe', () => {
-  it('create an instance', () => {
-    const pipe = new EllipsisPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.ts
deleted file mode 100644 (file)
index 4208fea..0000000
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'ellipsis'
-})
-export class EllipsisPipe implements PipeTransform {
-
-  transform(value: any, args?: any): any {
-    let result = '';
-    for (let i = 0; i < value; i++) {
-      result += '...';
-    }
-    return result;
-  }
-
-}

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts
index 02f7c0c93e137ed63d00e40ceba5970050fd5d6d..0cb5bccf1ba9dc82448b74f440e7f53f230e2d00 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts
@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
 import { CephShortVersionPipe } from './ceph-short-version.pipe';
 import { DimlessBinaryPipe } from './dimless-binary.pipe';
 import { DimlessPipe } from './dimless.pipe';
-import { EllipsisPipe } from './ellipsis.pipe';
 import { HealthColorPipe } from './health-color.pipe';
 
 @NgModule({
@@ -13,15 +12,13 @@ import { HealthColorPipe } from './health-color.pipe';
     DimlessBinaryPipe,
     HealthColorPipe,
     DimlessPipe,
-    CephShortVersionPipe,
-    EllipsisPipe
+    CephShortVersionPipe
   ],
   exports: [
     DimlessBinaryPipe,
     HealthColorPipe,
     DimlessPipe,
-    CephShortVersionPipe,
-    EllipsisPipe
+    CephShortVersionPipe
   ],
   providers: [
     CephShortVersionPipe,