From: Pere Diaz Bou Date: Thu, 16 Jun 2022 09:15:35 +0000 (+0200) Subject: mgr/dashboard: bind serverSide to externalPaging X-Git-Tag: v18.0.0~511^2~15 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=dbf2552ca57d90f6551553d25ca493375eb1e700;p=ceph-ci.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 --- 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 8b97634f139..115987f0315 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 7946a7191ce..f3d58703419 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 37eb0ee3c77..d14b2bc4065 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 dbf396b1f59..6525f3926b1 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 1ba4db6e2c8..0042d9f2757 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 096cbb35df1..6099d82d1a5 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 @@ -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) { 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 dc7a46d1ff9..bbd1ada0443 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 c0d5842907a..3693b527d24 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 8e68a25b6cd..c4c08039650 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 bfc4573c00a..e6a54cac7b7 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); }