From 5d06380af2a40e90e02c62cd893c9778caa55214 Mon Sep 17 00:00:00 2001 From: Volker Theile Date: Mon, 9 Nov 2020 14:51:53 +0100 Subject: [PATCH] mgr/dashboard: Use pipe instead of calling function within template This PR introduces the 'ngx-pipe-function' package to call functions in templates. Fixes: https://tracker.ceph.com/issues/48051 Signed-off-by: Volker Theile (cherry picked from commit 946b14c580b1d4445c56f7eb08d224dd67c4fd89) Conflicts: src/pybind/mgr/dashboard/frontend/package-lock.json src/pybind/mgr/dashboard/frontend/package.json - The master has different packages dependencies. src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts - Imports are refactored: https://github.com/ceph/ceph/pull/37918. src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/ceph-shared.module.ts src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.spec.ts - We migrated from ngx-bootstrap to ng-bootstrap. src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.ts - I18n services is replaced with $localize function. --- src/pybind/mgr/dashboard/frontend/package-lock.json | 8 ++++++++ src/pybind/mgr/dashboard/frontend/package.json | 1 + .../osd/osd-details/osd-details.component.spec.ts | 7 ++----- .../src/app/ceph/shared/ceph-shared.module.ts | 5 ++++- .../ceph/shared/smart-list/smart-list.component.html | 12 ++++++------ .../shared/smart-list/smart-list.component.spec.ts | 9 ++++++++- .../ceph/shared/smart-list/smart-list.component.ts | 6 ++---- 7 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json index 1604704ec3f6a..4e6d4f9da9938 100644 --- a/src/pybind/mgr/dashboard/frontend/package-lock.json +++ b/src/pybind/mgr/dashboard/frontend/package-lock.json @@ -12668,6 +12668,14 @@ "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.5.0.tgz", "integrity": "sha512-BJeghbkKFQl49sg3GIYQyjvwaHn64xFOsinBVD8HWKOVpRJSnuafrjXByGDtfq35jGY4R+7iBLksM1IYLUPshg==" }, + "ngx-pipe-function": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ngx-pipe-function/-/ngx-pipe-function-1.0.0.tgz", + "integrity": "sha512-AFWZ3icsq+0/nxFZtqRGZ03nRFoHcxVkZNGIi4ZQbdl5QLP3FmNTHGMmigohSeCV785l3YmPDUEx+6qwdGynMw==", + "requires": { + "tslib": "^1.9.0" + } + }, "ngx-toastr": { "version": "11.3.3", "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-11.3.3.tgz", diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json index 209324ede1575..6d32c44353a59 100644 --- a/src/pybind/mgr/dashboard/frontend/package.json +++ b/src/pybind/mgr/dashboard/frontend/package.json @@ -103,6 +103,7 @@ "ng-click-outside": "6.0.0", "ng2-charts": "2.3.0", "ngx-bootstrap": "5.5.0", + "ngx-pipe-function": "^1.0.0", "ngx-toastr": "11.3.3", "rxjs": "6.5.4", "simplebar-angular": "2.1.0", diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts index 0a9bc9d49a0e6..e83b574f68143 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts @@ -9,8 +9,7 @@ import { configureTestBed, i18nProviders } from '../../../../../testing/unit-tes import { OsdService } from '../../../../shared/api/osd.service'; import { SharedModule } from '../../../../shared/shared.module'; import { TablePerformanceCounterComponent } from '../../../performance-counter/table-performance-counter/table-performance-counter.component'; -import { DeviceListComponent } from '../../../shared/device-list/device-list.component'; -import { SmartListComponent } from '../../../shared/smart-list/smart-list.component'; +import { CephSharedModule } from '../../../shared/ceph-shared.module'; import { OsdPerformanceHistogramComponent } from '../osd-performance-histogram/osd-performance-histogram.component'; import { OsdDetailsComponent } from './osd-details.component'; @@ -22,11 +21,9 @@ describe('OsdDetailsComponent', () => { let getDetailsSpy: jasmine.Spy; configureTestBed({ - imports: [HttpClientTestingModule, TabsModule.forRoot(), SharedModule], + imports: [HttpClientTestingModule, TabsModule.forRoot(), SharedModule, CephSharedModule], declarations: [ OsdDetailsComponent, - DeviceListComponent, - SmartListComponent, TablePerformanceCounterComponent, OsdPerformanceHistogramComponent ], diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/ceph-shared.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/ceph-shared.module.ts index 9f523ca232b50..ea9ec5b28cec2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/ceph-shared.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/ceph-shared.module.ts @@ -1,12 +1,15 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; + import { TabsModule } from 'ngx-bootstrap/tabs'; +import { NgxPipeFunctionModule } from 'ngx-pipe-function'; + import { DataTableModule } from '../../shared/datatable/datatable.module'; import { SharedModule } from '../../shared/shared.module'; import { DeviceListComponent } from './device-list/device-list.component'; import { SmartListComponent } from './smart-list/smart-list.component'; @NgModule({ - imports: [CommonModule, DataTableModule, SharedModule, TabsModule], + imports: [CommonModule, DataTableModule, SharedModule, TabsModule, NgxPipeFunctionModule], exports: [DeviceListComponent, SmartListComponent], declarations: [DeviceListComponent, SmartListComponent] }) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html index b67dfd9ab9dfd..328d1a0a9ff29 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html @@ -7,11 +7,11 @@ i18n>The data received has the JSON format version 2.x and is currently incompatible with the dashboard. - No SMART data available. - + @@ -21,7 +21,7 @@ - + *ngIf="!(device.value.info | pipeFunction:isEmpty) || !(device.value.smart | pipeFunction:isEmpty)"> - - No device information available for this device. diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.spec.ts index a0b57203ba486..c7d2f15f86018 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.spec.ts @@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import * as _ from 'lodash'; import { TabsetComponent, TabsetConfig, TabsModule } from 'ngx-bootstrap/tabs'; +import { NgxPipeFunctionModule } from 'ngx-pipe-function'; import { of } from 'rxjs'; import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper'; @@ -109,7 +110,13 @@ describe('OsdSmartListComponent', () => { configureTestBed({ declarations: [SmartListComponent], - imports: [BrowserAnimationsModule, TabsModule, SharedModule, HttpClientTestingModule], + imports: [ + BrowserAnimationsModule, + TabsModule, + SharedModule, + HttpClientTestingModule, + NgxPipeFunctionModule + ], providers: [i18nProviders, TabsetComponent, TabsetConfig] }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.ts index 232b7eef40c66..5f228a8f88624 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.ts @@ -37,6 +37,8 @@ export class SmartListComponent implements OnInit, OnChanges { smartDataColumns: CdTableColumn[]; + isEmpty = _.isEmpty; + constructor( private i18n: I18n, private osdService: OsdService, @@ -148,10 +150,6 @@ smartmontools is required to successfully retrieve data.`, } } - isEmpty(value: any) { - return _.isEmpty(value); - } - ngOnInit() { this.smartDataColumns = [ { prop: 'id', name: this.i18n('ID') }, -- 2.39.5