From: Pere Diaz Bou Date: Thu, 16 Jun 2022 09:15:35 +0000 (+0200) Subject: mgr/dashboard: bind serverSide to externalPaging X-Git-Tag: v16.2.11~407^2~15 X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=ca97d107a046b0f08a5cc5611389dc350f00bdbb;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) --- 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 8b97634f1397..115987f0315d 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 7946a7191cea..f3d587034199 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 37eb0ee3c773..d14b2bc40654 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 dbf396b1f591..6525f3926b1a 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 0cf99bdbb7be..28ce2d622750 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 0d4a87135640..0ff0c57e4567 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 @@ -111,7 +111,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'. @@ -152,14 +152,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 @@ -621,10 +621,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) { @@ -654,7 +654,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 dc7a46d1ff92..bbd1ada04439 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 c0d5842907a4..3693b527d24f 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 8e68a25b6cdc..c4c08039650c 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 bfc4573c00ad..e6a54cac7b7d 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); }