From 8bfdb073aca6a03da09809d3cb652d44a15d1872 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Fri, 9 Feb 2018 19:15:01 +0000
Subject: [PATCH] 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>
---
 .../src/app/ceph/block/block.module.ts        |  3 +-
 .../pool-detail/pool-detail.component.html    | 27 ++---------
 .../pool-detail/pool-detail.component.ts      | 45 ++++++++++---------
 .../app/shared/pipes/ellipsis.pipe.spec.ts    |  8 ----
 .../src/app/shared/pipes/ellipsis.pipe.ts     | 16 -------
 .../src/app/shared/pipes/pipes.module.ts      |  7 +--
 6 files changed, 32 insertions(+), 74 deletions(-)
 delete mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.spec.ts
 delete mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ellipsis.pipe.ts

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 da6c9c1f3a2..601b22f142e 100644
--- 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 6bad01787ce..09207242bc7 100644
--- 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 b93a98f4c47..3fd5812c493 100644
--- 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
index cda1a3c6925..00000000000
--- 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
index 4208fea5e48..00000000000
--- 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 02f7c0c93e1..0cb5bccf1ba 100644
--- 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,
-- 
2.39.5