From: Pere Diaz Bou Date: Thu, 16 Jun 2022 09:15:35 +0000 (+0200) Subject: mgr/dashboard: bind serverSide to externalPaging X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=c90da2b5bcb1a73d16ed58f80e7596f0d675f902;p=ceph.git mgr/dashboard: bind serverSide to externalPaging 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 (cherry picked from commit dbf2552ca57d90f6551553d25ca493375eb1e700) (cherry picked from commit d154d4383c9a2196daabcc906e6077129dd1db04) Resolves: rhbz#2125432 --- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.ts index 8b97634f13972..115987f0315da 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.ts @@ -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() diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html index 7946a7191cead..f3d5870341996 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html @@ -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)"> @@ -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) - - - */ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.model.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.model.ts index 37eb0ee3c7737..d14b2bc40654f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.model.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.model.ts @@ -4,7 +4,7 @@ export interface RbdPool { pool_name: string; status: number; value: RbdImage[]; - headers: any; + headers: any; } export interface RbdImage { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.service.ts index dbf396b1f5915..6525f3926b1aa 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rbd.service.ts @@ -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('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('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) { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html index 1ba4db6e2c8a8..0042d9f2757a8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html @@ -173,6 +173,7 @@ [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)" diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts index bcc6f306e6ec5..03babdb100e8d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts @@ -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 @@ -622,10 +622,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) { @@ -655,7 +655,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) { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-fetch-data-context.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-fetch-data-context.ts index dc7a46d1ff927..bbd1ada04439c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-fetch-data-context.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-fetch-data-context.ts @@ -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) + } + }); + } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-paging.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-paging.ts index c0d5842907a44..3693b527d24f7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-paging.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-paging.ts @@ -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; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/cd-table-server-side.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/cd-table-server-side.service.ts index 8e68a25b6cdc2..c4c08039650cd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/cd-table-server-side.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/cd-table-server-side.service.ts @@ -5,10 +5,9 @@ import { Injectable } from '@angular/core'; providedIn: 'root' }) export class CdTableServerSideService { - - constructor() { } + constructor() {} static getCount(resp: HttpResponse): number { - return Number(resp.headers.get('X-Total-Count')) + return Number(resp.headers.get('X-Total-Count')); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-list.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-list.service.ts index bfc4573c00ad4..e6a54cac7b7dd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-list.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-list.service.ts @@ -11,7 +11,7 @@ import { TaskMessageService } from './task-message.service'; export class TaskListService implements OnDestroy { summaryDataSubscription: Subscription; - getUpdate: () => Observable; + getUpdate: (context?: any) => Observable; preProcessing: (_: any) => any[]; setList: (_: any[]) => void; onFetchError: (error: any) => void; @@ -42,7 +42,7 @@ export class TaskListService implements OnDestroy { * @memberof TaskListService */ init( - getUpdate: () => Observable, + getUpdate: (context?: any) => Observable, 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); }