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 <[email protected]>
joskid · Nov 12, 2020 · 946b14c · 946b14c
1 parent a79d895
commit 946b14c
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 21 deletions.
diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
@@ -100,6 +100,7 @@
     "ng-block-ui": "3.0.2",
     "ng-click-outside": "7.0.0",
     "ng2-charts": "2.3.0",
+    "ngx-pipe-function": "^1.0.0",
     "ngx-toastr": "13.1.0",
     "rxjs": "6.6.3",
     "simplebar-angular": "2.3.0",

diff --git a/...mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts b/...mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts
@@ -4,8 +4,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { TablePerformanceCounterComponent } from '~/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component';
-import { DeviceListComponent } from '~/app/ceph/shared/device-list/device-list.component';
-import { SmartListComponent } from '~/app/ceph/shared/smart-list/smart-list.component';
+import { CephSharedModule } from '~/app/ceph/shared/ceph-shared.module';
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { OsdDetailsComponent } from './osd-details.component';
@@ -15,13 +14,8 @@ describe('OsdDetailsComponent', () => {
   let fixture: ComponentFixture<OsdDetailsComponent>;
 
   configureTestBed({
-    imports: [HttpClientTestingModule, NgbNavModule, SharedModule],
-    declarations: [
-      OsdDetailsComponent,
-      DeviceListComponent,
-      SmartListComponent,
-      TablePerformanceCounterComponent
-    ]
+    imports: [HttpClientTestingModule, NgbNavModule, SharedModule, CephSharedModule],
+    declarations: [OsdDetailsComponent, TablePerformanceCounterComponent]
   });
 
   beforeEach(() => {

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
@@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { DataTableModule } from '~/app/shared/datatable/datatable.module';
 import { SharedModule } from '~/app/shared/shared.module';
 import { DeviceListComponent } from './device-list/device-list.component';
 import { SmartListComponent } from './smart-list/smart-list.component';
 
 @NgModule({
-  imports: [CommonModule, DataTableModule, SharedModule, NgbNavModule],
+  imports: [CommonModule, DataTableModule, SharedModule, NgbNavModule, 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
@@ -8,11 +8,11 @@
     dashboard.</cd-alert-panel>
 
   <ng-container *ngIf="!error && !incompatible">
-    <cd-alert-panel *ngIf="isEmpty(data)"
+    <cd-alert-panel *ngIf="data | pipeFunction:isEmpty"
                     type="info"
                     i18n>No SMART data available.</cd-alert-panel>
 
-    <ng-container *ngIf="!isEmpty(data)">
+    <ng-container *ngIf="!(data | pipeFunction:isEmpty)">
       <ul ngbNav
           #nav="ngbNav"
           class="nav-tabs">
@@ -26,7 +26,7 @@
             </ng-container>
 
             <ng-template #noError>
-              <cd-alert-panel *ngIf="isEmpty(device.value.info?.smart_status); else hasSmartStatus"
+              <cd-alert-panel *ngIf="device.value.info?.smart_status | pipeFunction:isEmpty; else hasSmartStatus"
                               id="alert-self-test-unknown"
                               size="slim"
                               type="warning"
@@ -54,18 +54,18 @@
               </ng-template>
             </ng-template>
 
-            <ng-container *ngIf="!isEmpty(device.value.info) || !isEmpty(device.value.smart)">
+            <ng-container *ngIf="!(device.value.info | pipeFunction:isEmpty) || !(device.value.smart | pipeFunction:isEmpty)">
               <ul ngbNav
                   #innerNav="ngbNav"
                   class="nav-tabs">
                 <li [ngbNavItem]="1">
                   <a ngbNavLink
                      i18n>Device Information</a>
                   <ng-template ngbNavContent>
-                    <cd-table-key-value *ngIf="!isEmpty(device.value.info)"
+                    <cd-table-key-value *ngIf="!(device.value.info | pipeFunction:isEmpty)"
                                         [renderObjects]="true"
                                         [data]="device.value.info"></cd-table-key-value>
-                    <cd-alert-panel *ngIf="isEmpty(device.value.info)"
+                    <cd-alert-panel *ngIf="device.value.info | pipeFunction:isEmpty"
                                     id="alert-device-info-unavailable"
                                     type="info"
                                     i18n>No device information available for this device.</cd-alert-panel>

diff --git a/...pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.spec.ts b/...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 { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 import { of } from 'rxjs';
 
 import { OsdService } from '~/app/shared/api/osd.service';
@@ -109,7 +110,13 @@ describe('OsdSmartListComponent', () => {
 
   configureTestBed({
     declarations: [SmartListComponent],
-    imports: [BrowserAnimationsModule, SharedModule, HttpClientTestingModule, NgbNavModule]
+    imports: [
+      BrowserAnimationsModule,
+      SharedModule,
+      HttpClientTestingModule,
+      NgbNavModule,
+      NgxPipeFunctionModule
+    ]
   });
 
   beforeEach(() => {

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
@@ -36,6 +36,8 @@ export class SmartListComponent implements OnInit, OnChanges {
 
   smartDataColumns: CdTableColumn[];
 
+  isEmpty = _.isEmpty;
+
   constructor(private osdService: OsdService, private hostService: HostService) {}
 
   isSmartError(data: any): data is SmartError {
@@ -145,10 +147,6 @@ smartmontools is required to successfully retrieve data.`;
     }
   }
 
-  isEmpty(value: any) {
-    return _.isEmpty(value);
-  }
-
   ngOnInit() {
     this.smartDataColumns = [
       { prop: 'id', name: $localize`ID` },