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 <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index f18990cc0c00e6c9a0f0263d017619367ef665d1..b12e6fbcc0a1a29263cd8f83fd707923c866d479 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package-lock.json
+++ b/src/pybind/mgr/dashboard/frontend/package-lock.json
@@ -14930,6 +14930,21 @@
         }
       }
     },
+    "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "ngx-toastr": {
       "version": "13.1.0",
       "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-13.1.0.tgz",

diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index 8ef91ae374db1ccfad215dae34534f2801c40ae0..ef75886fe296de1286302226b6bcd605100241a0 100644 (file)
--- 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/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 03041b2fd9b42bad98959599f5c4b92d2cab379e..ebb1ef04481d4429319e785d88427427c7676013 100644 (file)
--- 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
@@ -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
index 010bc573ea559c3945f5a235d17813ae30037fc7..9e9f2917a47499b21c39ac453f2c470c4f5aa960 100644 (file)
--- 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,6 +2,7 @@ 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';
@@ -9,7 +10,7 @@ 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
index 78e0c157850371d16cd83cdc305c659042886913..063d0c29af81d71a9fef8943147ea54e43c17cdb 100644 (file)
--- 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,7 +54,7 @@
               </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">
@@ -62,10 +62,10 @@
                   <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/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 899030ba59105e46dc7800d41e22105a3789a61f..2827d67ec87f819ba30d9ac396ffae04c6cf66e6 100644 (file)
--- 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 { 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
index 8b3790e43a544408f7f77701389114bd82ea840b..298e22b86d02fb75aa304535ec4e6ca575cf5397 100644 (file)
--- 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` },