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>
(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.

diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index 1604704ec3f6a1bdf0a31c4af48cc33954cbef25..4e6d4f9da993802aa30005e3e7e0c6677d824fbb 100644 (file)
--- 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 209324ede1575855823a0a3ddcfeaa7ffce4a19c..6d32c44353a599157320ed0f310cbbf063b1af3f 100644 (file)
--- 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 0a9bc9d49a0e6dc53e47dce0ca57db967e0a5443..e83b574f6814385f85fd56bbcd48dadd02343635 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
@@ -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 9f523ca232b50c8ae635a2c4eef23f3c48827f6f..ea9ec5b28cec26fdbf478297a7e15f284e5581e0 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
@@ -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 b67dfd9ab9dfdf01a862611e2cff3da656b10454..328d1a0a9ff29302963eee4dbf5ffebfa7343e91 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
@@ -7,11 +7,11 @@
                   i18n>The data received has the JSON format version 2.x and is currently incompatible with the 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)">
       <tabset>
         <tab *ngFor="let device of data | keyvalue"
              [heading]="device.value.device + ' (' + device.value.identifier + ')'">
@@ -21,7 +21,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"
@@ -50,13 +50,13 @@
           </ng-template>
 
           <tabset #innerTabset
-                  *ngIf="!isEmpty(device.value.info) || !isEmpty(device.value.smart)">
+                  *ngIf="!(device.value.info | pipeFunction:isEmpty) || !(device.value.smart | pipeFunction:isEmpty)">
             <tab i18n-heading
                  heading="Device Information">
-              <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 a0b57203ba4866e87c8658f5d09c20091a629277..c7d2f15f86018a491daa969978c43d8159269046 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 * 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 232b7eef40c66c77221cca793200807991863c6a..5f228a8f886240a11c4bd09465a0fa6703f343ed 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
@@ -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') },