mgr/dashboard: upgrade angular to v16

ivoalmeida · ivoalmeida · commit 484e3105cd73 · 2025-01-29T10:04:51.000Z
Fixes: https://tracker.ceph.com/issues/68896 Signed-off-by: Ivo Almeida <ialmeida@redhat.com>
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
@@ -39,20 +39,19 @@
     "fix": "run-p -csl --aggregate-output fix:*",
     "compodoc": "compodoc",
     "doc-build": "compodoc -p tsconfig.app.json",
-    "doc-serve": "compodoc --port 8444 -s tsconfig.app.json",
-    "postinstall": "ngcc --properties es2015 browser module main --async false --first-only --tsconfig 'tsconfig.app.json'"
+    "doc-serve": "compodoc --port 8444 -s tsconfig.app.json"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.2.9",
-    "@angular/common": "15.2.9",
-    "@angular/compiler": "15.2.9",
-    "@angular/core": "15.2.9",
-    "@angular/forms": "15.2.9",
-    "@angular/localize": "15.2.9",
-    "@angular/platform-browser": "15.2.9",
-    "@angular/platform-browser-dynamic": "15.2.9",
-    "@angular/router": "15.2.9",
+    "@angular/animations": "16.2.12",
+    "@angular/common": "16.2.12",
+    "@angular/compiler": "16.2.12",
+    "@angular/core": "16.2.12",
+    "@angular/forms": "16.2.12",
+    "@angular/localize": "16.2.12",
+    "@angular/platform-browser": "16.2.12",
+    "@angular/platform-browser-dynamic": "16.2.12",
+    "@angular/router": "16.2.12",
     "@carbon/icons": "11.41.0",
     "@carbon/styles": "1.57.0",
     "@ibm/plex": "6.4.0",
@@ -71,31 +70,30 @@
     "fork-awesome": "1.1.7",
     "lodash": "4.17.21",
     "moment": "2.29.4",
-    "ng-block-ui": "3.0.2",
-    "ng-click-outside": "7.0.0",
+    "ng-block-ui": "4.0.1",
+    "ng-click-outside": "9.0.1",
     "ng2-charts": "4.1.1",
-    "ngx-cookie-service": "17.1.0",
-    "ngx-pipe-function": "1.0.0",
+    "ngx-cookie-service": "18.0.0",
     "ngx-toastr": "17.0.2",
     "rxjs": "6.6.3",
-    "simplebar-angular": "2.3.6",
+    "simplebar-angular": "3.2.6",
     "stream-browserify": "3.0.0",
     "swagger-ui": "4.12.0",
     "timers-browserify": "2.0.12",
     "tslib": "2.3.1",
     "xml2js": "0.6.2",
-    "zone.js": "0.11.8"
+    "zone.js": "0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.2.9",
+    "@angular-devkit/build-angular": "16.2.16",
     "@angular-eslint/builder": "13.5.0",
     "@angular-eslint/eslint-plugin": "13.5.0",
     "@angular-eslint/eslint-plugin-template": "13.5.0",
-    "@angular-eslint/schematics": "13.5.0",
+    "@angular-eslint/schematics": "18.3.1",
     "@angular-eslint/template-parser": "13.5.0",
-    "@angular/cli": "15.2.9",
-    "@angular/compiler-cli": "15.2.9",
-    "@angular/language-service": "15.2.9",
+    "@angular/cli": "16.2.16",
+    "@angular/compiler-cli": "16.2.12",
+    "@angular/language-service": "16.2.12",
     "@applitools/eyes-cypress": "3.22.5",
     "@compodoc/compodoc": "1.1.18",
     "@cypress/browserify-preprocessor": "3.0.2",
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
 import { NgbNavModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 
 import { ActionLabels, URLVerbs } from '~/app/shared/constants/app.constants';
 import { FeatureTogglesGuardService } from '~/app/shared/services/feature-toggles-guard.service';
@@ -82,7 +82,7 @@ import Reset from '@carbon/icons/es/reset/32';
     NgbNavModule,
     NgbPopoverModule,
     NgbTooltipModule,
-    NgxPipeFunctionModule,
+    PipesModule,
     SharedModule,
     RouterModule,
     TreeviewModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.spec.ts
@@ -6,7 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import moment from 'moment';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
 
@@ -35,7 +35,7 @@ describe('RbdTrashListComponent', () => {
       RouterTestingModule,
       SharedModule,
       NgbNavModule,
-      NgxPipeFunctionModule,
+      PipesModule,
       ToastrModule.forRoot()
     ],
     providers: [TaskListService]
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -26,7 +26,7 @@ import {
   NgbTooltipModule,
   NgbTypeaheadModule
 } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 
 import { SharedModule } from '~/app/shared/shared.module';
 import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
@@ -96,7 +96,7 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     NgbDatepickerModule,
     NgbPopoverModule,
     NgbDropdownModule,
-    NgxPipeFunctionModule,
+    PipesModule,
     NgbProgressbarModule,
     DashboardV3Module,
     ComboBoxModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.spec.ts
@@ -3,7 +3,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import _ from 'lodash';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
 
@@ -135,7 +135,7 @@ describe('ServiceDaemonListComponent', () => {
       HttpClientTestingModule,
       CephModule,
       CoreModule,
-      NgxPipeFunctionModule,
+      PipesModule,
       SharedModule,
       ToastrModule.forRoot()
     ]
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 import { ToastrModule } from 'ngx-toastr';
 
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
@@ -23,7 +23,7 @@ describe('ServiceDetailsComponent', () => {
       RouterTestingModule,
       SharedModule,
       NgbNavModule,
-      NgxPipeFunctionModule,
+      PipesModule,
       ToastrModule.forRoot()
     ],
     declarations: [ServiceDetailsComponent, ServiceDaemonListComponent],
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts
@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 import { ToastrModule } from 'ngx-toastr';
 import { of as observableOf, throwError } from 'rxjs';
 
@@ -35,7 +35,7 @@ describe('RgwUserFormComponent', () => {
       SharedModule,
       ToastrModule.forRoot(),
       NgbTooltipModule,
-      NgxPipeFunctionModule
+      PipesModule
     ]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -10,7 +10,7 @@ import {
   NgbTooltipModule,
   NgbTypeaheadModule
 } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 
 import { ActionLabels, URLVerbs } from '~/app/shared/constants/app.constants';
 import { CRUDTableComponent } from '~/app/shared/datatable/crud-table/crud-table.component';
@@ -94,7 +94,7 @@ import { RgwUserAccountsDetailsComponent } from './rgw-user-accounts-details/rgw
     RouterModule,
     NgbTooltipModule,
     NgbPopoverModule,
-    NgxPipeFunctionModule,
+    PipesModule,
     TreeviewModule,
     DataTableModule,
     DashboardV3Module,
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,7 +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 { PipesModule } from '~/app/shared/pipes/pipes.module';
 
 import { DataTableModule } from '~/app/shared/datatable/datatable.module';
 import { SharedModule } from '~/app/shared/shared.module';
@@ -11,7 +11,7 @@ import { SmartListComponent } from './smart-list/smart-list.component';
 import { HealthChecksComponent } from './health-checks/health-checks.component';
 
 @NgModule({
-  imports: [CommonModule, DataTableModule, SharedModule, NgbNavModule, NgxPipeFunctionModule],
+  imports: [CommonModule, DataTableModule, SharedModule, NgbNavModule, PipesModule],
   exports: [DeviceListComponent, SmartListComponent, HealthChecksComponent],
   declarations: [DeviceListComponent, SmartListComponent, HealthChecksComponent]
 })
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
@@ -6,7 +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 { PipesModule } from '~/app/shared/pipes/pipes.module';
 import { of } from 'rxjs';
 
 import { OsdService } from '~/app/shared/api/osd.service';
@@ -124,7 +124,7 @@ describe('OsdSmartListComponent', () => {
       SharedModule,
       HttpClientTestingModule,
       NgbNavModule,
-      NgxPipeFunctionModule
+      PipesModule
     ]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
 import { NgbModule, NgbNavModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 
 import { ActionLabels, URLVerbs } from '~/app/shared/constants/app.constants';
 import { SharedModule } from '~/app/shared/shared.module';
@@ -61,7 +61,7 @@ import EyeIcon from '@carbon/icons/es/view/16';
     TimePickerModule,
     NgbNavModule,
     NgbPopoverModule,
-    NgxPipeFunctionModule,
+    PipesModule,
     RouterModule,
     NgbModule,
     IconModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router, RouterEvent } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -47,7 +47,7 @@ export class ErrorComponent implements OnDestroy, OnInit {
   ngOnInit() {
     this.fetchData();
     this.routerSubscription = this.router.events
-      .pipe(filter((event: RouterEvent) => event instanceof NavigationEnd))
+      .pipe(filter((event: any) => event instanceof NavigationEnd))
       .subscribe(() => {
         this.fetchData();
       });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.spec.ts
@@ -5,7 +5,6 @@ import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 import { ToastrModule } from 'ngx-toastr';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
@@ -34,7 +33,6 @@ describe('CRUDTableComponent', () => {
       PipesModule,
       NgbTooltipModule,
       RouterTestingModule,
-      NgxPipeFunctionModule,
       HttpClientTestingModule,
       ToastrModule.forRoot()
     ]
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import {
   TableModule,
@@ -51,7 +50,6 @@ import { TableDetailDirective } from './directives/table-detail.directive';
 @NgModule({
   imports: [
     CommonModule,
-    NgxPipeFunctionModule,
     FormsModule,
     NgbDropdownModule,
     NgbTooltipModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
@@ -23,7 +23,7 @@ describe('TableActionsComponent', () => {
 
   configureTestBed({
     declarations: [TableActionsComponent],
-    imports: [ComponentsModule, NgxPipeFunctionModule, RouterTestingModule]
+    imports: [ComponentsModule, PipesModule, RouterTestingModule]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -3,7 +3,6 @@ import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
@@ -28,7 +27,6 @@ describe('TableKeyValueComponent', () => {
       NgbDropdownModule,
       PipesModule,
       NgbTooltipModule,
-      NgxPipeFunctionModule
     ]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -6,7 +6,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
-import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
@@ -44,7 +43,6 @@ describe('TableComponent', () => {
     declarations: [TableComponent, TablePaginationComponent],
     imports: [
       BrowserAnimationsModule,
-      NgxPipeFunctionModule,
       FormsModule,
       ComponentsModule,
       RouterTestingModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/breadcrumbs.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/breadcrumbs.ts
@@ -22,11 +22,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
  */
 
-import { ActivatedRouteSnapshot, Resolve, UrlSegment } from '@angular/router';
+import { ActivatedRouteSnapshot, UrlSegment } from '@angular/router';
 
 import { Observable, of } from 'rxjs';
 
-export class BreadcrumbsResolver implements Resolve<IBreadcrumb[]> {
+export class BreadcrumbsResolver  {
   public resolve(
     route: ActivatedRouteSnapshot
   ): Observable<IBreadcrumb[]> | Promise<IBreadcrumb[]> | IBreadcrumb[] {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipe-function.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipe-function.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { PipeFunctionPipe } from './pipe-function.pipe';
+
+describe('PipeFunctionPipe', () => {
+  it('create an instance', () => {
+    const pipe = new PipeFunctionPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipe-function.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipe-function.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'pipeFunction'
+})
+export class PipeFunctionPipe implements PipeTransform {
+  public transform(value: any, handler: (value: any) => any, context?: any): any {
+    if (context) {
+      return handler.call(context, value);
+    }
+
+    return handler(value);
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/auth-guard.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/auth-guard.service.ts
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/change-password-guard.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/change-password-guard.service.ts
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/feature-toggles-guard.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/feature-toggles-guard.service.ts
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/module-status-guard.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/module-status-guard.service.ts
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/no-sso-guard.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/no-sso-guard.service.ts
