]> git.apps.os.sepia.ceph.com Git - ceph.git/commitdiff
mgr/dashboard: bind serverSide to externalPaging
authorPere Diaz Bou <pdiazbou@redhat.com>
Thu, 16 Jun 2022 09:15:35 +0000 (11:15 +0200)
committerPere Diaz Bou <pdiazbou@redhat.com>
Tue, 12 Jul 2022 17:09:02 +0000 (19:09 +0200)
Count won't be used unless externalPaging is set to true.
remove paginated import

task list service needed to be updated in order to have extra
params. This commit introduces that param.

Signed-off-by: Pere Diaz Bou <pdiazbou@redhat.com>
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.model.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.service.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-fetch-data-context.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-paging.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/services/cd-table-server-side.service.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-list.service.ts

index 8b97634f139722cbaeece9b3ffd563ba0a36ade5..115987f0315da99c227d16c4f57d29f2ed87c9dd 100644 (file)
@@ -88,7 +88,7 @@ export class IscsiTargetFormComponent extends CdForm implements OnInit {
   ngOnInit() {
     const promises: any[] = [
       this.iscsiService.listTargets(),
-                               this.rbdService.list({'offset': 0, 'limit': 5}),
+      this.rbdService.list({ offset: 0, limit: 5 }),
       this.iscsiService.portals(),
       this.iscsiService.settings(),
       this.iscsiService.version()
index 7946a7191cead7dc99d402f53f627985a448a80f..f3d587034199629d04919de7c9797909e0d0a082 100644 (file)
@@ -6,14 +6,14 @@
           [columns]="columns"
           identifier="unique_id"
           [searchableObjects]="true"
-                                       [serverSide]="true"
-                                       [count]="count"
+          [serverSide]="true"
+          [count]="count"
           forceIdentifier="true"
           selectionType="single"
           [hasDetails]="true"
           [status]="tableStatus"
           [autoReload]="5000"
-          (fetchData)="getRbdImages($event)"
+          (fetchData)="taskListService.fetch($event)"
           (setExpandedRow)="setExpandedRow($event)"
           (updateSelection)="updateSelection($event)">
   <cd-table-actions class="table-actions"
index e432f389e5c72357f9113bc5b2c90a6ac609995b..15aa06ab8960e2c0df0dfcd1e851b0cf639374ab 100644 (file)
@@ -4,8 +4,6 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
 import { Observable, Subscriber } from 'rxjs';
 
-import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
-import { CdTableServerSideService } from '~/app/shared/services/cd-table-server-side.service';
 import { RbdService } from '~/app/shared/api/rbd.service';
 import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
 import { TableStatusViewCache } from '~/app/shared/classes/table-status-view-cache';
@@ -17,6 +15,7 @@ import { Icons } from '~/app/shared/enum/icons.enum';
 import { ViewCacheStatus } from '~/app/shared/enum/view-cache-status.enum';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
+import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { ImageSpec } from '~/app/shared/models/image-spec';
@@ -25,6 +24,7 @@ import { Task } from '~/app/shared/models/task';
 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
 import { DimlessPipe } from '~/app/shared/pipes/dimless.pipe';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
+import { CdTableServerSideService } from '~/app/shared/services/cd-table-server-side.service';
 import { ModalService } from '~/app/shared/services/modal.service';
 import { TaskListService } from '~/app/shared/services/task-list.service';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
@@ -75,8 +75,8 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
   tableStatus = new TableStatusViewCache();
   selection = new CdTableSelection();
   icons = Icons;
-       count: number = 0;
-       private tableContext: CdTableFetchDataContext = null;
+  count = 0;
+  private tableContext: CdTableFetchDataContext = null;
 
   modalRef: NgbModalRef;
 
@@ -125,7 +125,7 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
     public taskListService: TaskListService,
     private urlBuilder: URLBuilderService,
     public actionLabels: ActionLabelsI18n
-       ) {
+  ) {
     super();
     this.permission = this.authStorageService.getPermissions().rbdImage;
     const getImageUri = () =>
@@ -348,18 +348,15 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
       ].includes(task.name);
     };
 
-               console.log(taskFilter);
-               console.log(itemFilter);
-               console.log(this.builders);
-    // this.taskListService.init(
-               //      (context: CdTableFetchDataContext) => this.rbdService.list(context.toParams()),
-               //      (resp) => this.prepareResponse(resp),
-    //   (images) => (this.images = images),
-    //   () => this.onFetchError(),
-    //   taskFilter,
-    //   itemFilter,
-    //   this.builders
-    // );
+    this.taskListService.init(
+      (context) => this.getRbdImages(context),
+      (resp) => this.prepareResponse(resp),
+      (images) => (this.images = images),
+      () => this.onFetchError(),
+      taskFilter,
+      itemFilter,
+      this.builders
+    );
   }
 
   onFetchError() {
@@ -367,48 +364,19 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
     this.tableStatus = new TableStatusViewCache(ViewCacheStatus.ValueException);
   }
 
-       getRbdImages(context: CdTableFetchDataContext = null){
-               if(context !== null) {
-                       this.tableContext = context;
-               }
-               console.log(context);
-               this.rbdService.list(this.tableContext.toParams()).
-                       subscribe((resp: any) => {
-                               console.log(resp);
-                               this.prepareResponse(resp);
-                       });
-       }
-       prepareResponse(resp: any[]): any[] {
-               let images: any[] = [];
-    const viewCacheStatusMap = {};
-
-               console.log(resp);
-    resp.forEach((pool) => {
-      if (_.isUndefined(viewCacheStatusMap[pool.status])) {
-        viewCacheStatusMap[pool.status] = [];
-      }
-      viewCacheStatusMap[pool.status].push(pool.pool_name);
-      images = images.concat(pool.value);
-    });
-
-    let status: number;
-    if (viewCacheStatusMap[ViewCacheStatus.ValueException]) {
-      status = ViewCacheStatus.ValueException;
-    } else if (viewCacheStatusMap[ViewCacheStatus.ValueStale]) {
-      status = ViewCacheStatus.ValueStale;
-    } else if (viewCacheStatusMap[ViewCacheStatus.ValueNone]) {
-      status = ViewCacheStatus.ValueNone;
+  getRbdImages(context: CdTableFetchDataContext = null) {
+    if (context !== null) {
+      this.tableContext = context;
     }
+    return this.rbdService.list(this.tableContext.toParams());
+  }
 
-    if (status) {
-      const statusFor =
-        (viewCacheStatusMap[status].length > 1 ? 'pools ' : 'pool ') +
-        viewCacheStatusMap[status].join();
+  prepareResponse(resp: any[]): any[] {
+    let images: any[] = [];
 
-      this.tableStatus = new TableStatusViewCache(status, statusFor);
-    } else {
-      this.tableStatus = new TableStatusViewCache();
-    }
+    resp.forEach((pool) => {
+      images = images.concat(pool.value);
+    });
 
     images.forEach((image) => {
       if (image.schedule_info !== undefined) {
@@ -423,13 +391,8 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
       }
     });
 
-               console.group('reponse');
-               console.log(resp);
-               console.log(resp[0].headers);
-               this.count = CdTableServerSideService.getCount(resp[0]);
-               console.log(this.count);
-               this.images = images;
-               console.groupEnd();
+    this.count = CdTableServerSideService.getCount(resp[0]);
+    this.images = images;
     return images;
   }
 
@@ -653,14 +616,13 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
   }
 }
 
-
 /*
        for pool in pools
          for namespace in namespaces
                  refs = get_image_refs
                        for ref in refs:
                           get_data(ref)
-        
+
 @ttl_cache(5)
 def get_refs();
   joint_refs = []
@@ -675,7 +637,4 @@ sort(joint_refs)
                for ref in joint_refs[offset:offset+limit]:
 get_data(ref)
 
-
-
-         
 */
index 37eb0ee3c773792d6a3ba988a4d96334179cd2e3..d14b2bc40654fd148892ca2bd414be99319335e0 100644 (file)
@@ -4,7 +4,7 @@ export interface RbdPool {
   pool_name: string;
   status: number;
   value: RbdImage[];
-       headers: any;
+  headers: any;
 }
 
 export interface RbdImage {
index dbf396b1f5915f4bbf89fe5196a7dbc7500521e2..6525f3926b1aac7547418ed09c252f9517d68b55 100644 (file)
@@ -36,30 +36,30 @@ export class RbdService {
     });
   }
 
-       get(imageSpec: ImageSpec) {
-               return this.http.get(`api/block/image/${imageSpec.toStringEncoded()}`);
+  get(imageSpec: ImageSpec) {
+    return this.http.get(`api/block/image/${imageSpec.toStringEncoded()}`);
   }
 
   list(params: any) {
-               return this.http.get<RbdPool[]>('api/block/image', {params: params, observe: 'response'}).pipe(
-                       map((response: any) => {
-                               console.log(response);
-        return response['body'].map((pool: any) => {
-          pool.value.map((image: any) => {
-            if (!image.configuration) {
+    return this.http
+      .get<RbdPool[]>('api/block/image', { params: params, observe: 'response' })
+      .pipe(
+        map((response: any) => {
+          return response['body'].map((pool: any) => {
+            pool.value.map((image: any) => {
+              if (!image.configuration) {
+                return image;
+              }
+              image.configuration.map((option: any) =>
+                Object.assign(option, this.rbdConfigurationService.getOptionByName(option.name))
+              );
               return image;
-            }
-            image.configuration.map((option: any) =>
-              Object.assign(option, this.rbdConfigurationService.getOptionByName(option.name))
-            );
-            return image;
+            });
+            pool['headers'] = response.headers;
+            return pool;
           });
-                                       pool['headers'] = response.headers;
-          return pool;
         })
-                       }
-                                )
-               );
+      );
   }
 
   copy(imageSpec: ImageSpec, rbd: any) {
index 1ba4db6e2c8a895e41009a6c510a0ad906097f4f..0042d9f2757a8760894ab3eb4803bcabbf449872 100644 (file)
                  [headerHeight]="header ? 'auto' : 0"
                  [footerHeight]="footer ? 'auto' : 0"
                                                                 [count]="count"
+                                                                [externalPaging]="serverSide"
                  [limit]="userConfig.limit > 0 ? userConfig.limit : undefined"
                  [offset]="userConfig.offset >= 0 ? userConfig.offset : 0"
                  (page)="changePage($event)"
index 096cbb35df1d7766cc1399ced000c4167af7acd4..6099d82d1a575b68aba3836eb8b8fe22c18eb150 100644 (file)
@@ -113,7 +113,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
    * prevent triggering fetchData when initializing the table.
    */
   @Input()
-  autoReload: number = 5000;
+  autoReload = 5000;
 
   // Which row property is unique for a row. If the identifier is not specified in any
   // column, then the property name of the first column is used. Defaults to 'id'.
@@ -154,14 +154,14 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
 
   // Support server-side pagination/sorting/etc.
   @Input()
-  serverSide: boolean = false;
+  serverSide = false;
 
   /*
   Only required when serverSide is enabled.
   It should be provided by the server via "X-Total-Count" HTTP Header
   */
   @Input()
-  count: number = 0;
+  count = 0;
 
   /**
    * Should be a function to update the input data if undefined nothing will be triggered
@@ -624,10 +624,10 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     if (value > 0) {
       this.userConfig.limit = value;
     }
-               if (this.serverSide) {
-                       this.reloadData();
-               }
-       }
+    if (this.serverSide) {
+      this.reloadData();
+    }
+  }
 
   reloadData() {
     if (!this.updating) {
@@ -657,7 +657,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     this.reloadData();
   }
 
- changePage(pageInfo: PageInfo) {
 changePage(pageInfo: PageInfo) {
     this.userConfig.offset = pageInfo.offset;
     this.userConfig.limit = pageInfo.limit;
     if (this.serverSide) {
index dc7a46d1ff9276e5522666c0a351907fe965d052..bbd1ada04439cfb38c3018404f4ac6f1fc8226b1 100644 (file)
@@ -1,5 +1,6 @@
-import { HttpParams } from "@angular/common/http";
-import { PageInfo } from "./cd-table-paging";
+import { HttpParams } from '@angular/common/http';
+
+import { PageInfo } from './cd-table-paging';
 
 export class CdTableFetchDataContext {
   errorConfig = {
@@ -13,22 +14,21 @@ export class CdTableFetchDataContext {
    * reset the data table to the correct state.
    */
   error: Function;
-  pageInfo: PageInfo = new PageInfo;
+  pageInfo: PageInfo = new PageInfo();
 
   constructor(error: () => void) {
     this.error = error;
   }
 
-       toParams(): HttpParams {
-               if (this.pageInfo.limit === null) {
-                       this.pageInfo.limit = 0;
-               }
-               return new HttpParams({
-                       fromObject: {
-                               offset: String(this.pageInfo.offset * this.pageInfo.limit),
-                               limit: String(this.pageInfo.limit)
-                       }
-               });
-
-       }
+  toParams(): HttpParams {
+    if (this.pageInfo.limit === null) {
+      this.pageInfo.limit = 0;
+    }
+    return new HttpParams({
+      fromObject: {
+        offset: String(this.pageInfo.offset * this.pageInfo.limit),
+        limit: String(this.pageInfo.limit)
+      }
+    });
+  }
 }
index c0d5842907a44143bc7d06a6200c96dddcbd5065..3693b527d24f7c6965534ff787b34be7b3ec1dce 100644 (file)
@@ -5,7 +5,7 @@ export class PageInfo {
   count: number;
 
   // Current page (current row = offset x limit or pageSize)
-  offset: number = 0;
+  offset = 0;
 
   // Max. number of rows fetched from the server
   limit: number = PAGE_LIMIT;
index 8e68a25b6cdc289b3d9346cc51a114c552891176..c4c08039650cde640604d5a11215b4760aa39ec3 100644 (file)
@@ -5,10 +5,9 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class CdTableServerSideService {
-
-  constructor() { }
+  constructor() {}
 
   static getCount(resp: HttpResponse<any>): number {
-    return Number(resp.headers.get('X-Total-Count'))
+    return Number(resp.headers.get('X-Total-Count'));
   }
 }
index bfc4573c00ad49c7fcf6d0a89440a4b226b7befb..e6a54cac7b7dd4cbc32655245d01717cbfa4d96e 100644 (file)
@@ -11,7 +11,7 @@ import { TaskMessageService } from './task-message.service';
 export class TaskListService implements OnDestroy {
   summaryDataSubscription: Subscription;
 
-  getUpdate: () => Observable<object>;
+  getUpdate: (context?: any) => Observable<object>;
   preProcessing: (_: any) => any[];
   setList: (_: any[]) => void;
   onFetchError: (error: any) => void;
@@ -42,7 +42,7 @@ export class TaskListService implements OnDestroy {
    * @memberof TaskListService
    */
   init(
-    getUpdate: () => Observable<object>,
+    getUpdate: (context?: any) => Observable<object>,
     preProcessing: (_: any) => any[],
     setList: (_: any[]) => void,
     onFetchError: (error: any) => void,
@@ -64,8 +64,8 @@ export class TaskListService implements OnDestroy {
     }, this.onFetchError);
   }
 
-  fetch() {
-    this.getUpdate().subscribe((resp: any) => {
+  fetch(context: any = null) {
+    this.getUpdate(context).subscribe((resp: any) => {
       this.updateData(resp, this.summary['executing_tasks'].filter(this.taskFilter));
     }, this.onFetchError);
   }