[YUNIKORN-2055] upgrade angular

.nvmrc

@@ -1 +1 @@
-18.16
+18.18

Dockerfile

@@ -35,4 +35,3 @@ EXPOSE 9889
 ENV DOCUMENT_ROOT /html
 USER 4444:4444
 ENTRYPOINT [ "/yunikorn-web" ]
-

Makefile

@@ -164,7 +164,7 @@ build:
 # Run JS unit tests
 .PHONY: test_js
 test_js: build
-	yarn test:singleRun
+	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 && yarn test:singleRun
 
 # Run Go unit tests
 .PHONY: test_go

package.json

@@ -27,47 +27,48 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "^16.0.1",
-    "@angular/cdk": "^16.0.1",
-    "@angular/common": "^16.0.1",
-    "@angular/compiler": "^16.0.1",
-    "@angular/core": "^16.0.1",
-    "@angular/forms": "^16.0.1",
-    "@angular/material": "^16.0.1",
-    "@angular/platform-browser": "^16.0.1",
-    "@angular/platform-browser-dynamic": "^16.0.1",
-    "@angular/router": "^16.0.1",
-    "chart.js": "^3.7.1",
-    "chartjs-adapter-date-fns": "^2.0.0",
-    "date-fns": "^2.28.0",
+    "@angular/animations": "^16.2.10",
+    "@angular/cdk": "^16.2.9",
+    "@angular/common": "^16.2.10",
+    "@angular/compiler": "^16.2.10",
+    "@angular/core": "^16.2.10",
+    "@angular/forms": "^16.2.10",
+    "@angular/material": "^16.2.9",
+    "angular-material-expansion-panel": "^0.7.2",
+    "@angular/platform-browser": "^16.2.10",
+    "@angular/platform-browser-dynamic": "^16.2.10",
+    "@angular/router": "^16.2.10",
+    "chart.js": "^4.4.0",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "date-fns": "^2.30.0",
     "moment": "^2.29.4",
     "ngx-spinner": "^16.0.2",
-    "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.1",
-    "@angular/cli": "^16.0.1",
-    "@angular/compiler-cli": "^16.0.1",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
-    "husky": "^7.0.4",
-    "jasmine-core": "~4.0.0",
-    "json-server": "^0.17.3",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
+    "@angular-devkit/build-angular": "^16.2.7",
+    "@angular/cli": "^16.2.7",
+    "@angular/compiler-cli": "^16.2.10",
+    "@types/jasmine": "~5.1.1",
+    "@types/node": "^20.8.7",
+    "husky": "^8.0.3",
+    "jasmine-core": "~5.1.1",
+    "json-server": "^0.17.4",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "karma-spec-reporter": "^0.0.33",
+    "karma-jasmine": "~4.0.2",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "karma-spec-reporter": "^0.0.36",
     "karma-super-dots-reporter": "^0.2.0",
-    "lint-staged": "^12.3.7",
+    "lint-staged": "^15.0.2",
     "ng-bullet": "^1.0.3",
-    "ng-mocks": "^14.10.1",
-    "prettier": "^2.6.1",
-    "puppeteer": "^13.5.1",
-    "typescript": "~4.9.5"
+    "ng-mocks": "^14.11.0",
+    "prettier": "^3.0.3",
+    "puppeteer": "^21.3.8",
+    "typescript": "5.1.6"
   }
 }

src/app/components/app-history/app-history.component.spec.ts

@@ -16,13 +16,13 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatCardModule } from '@angular/material/card';
-import { configureTestSuite } from 'ng-bullet';
-import { MockComponent } from 'ng-mocks';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatCardModule} from '@angular/material/card';
+import {AreaChartComponent} from '@app/components/area-chart/area-chart.component';
+import {configureTestSuite} from 'ng-bullet';
+import {MockComponent} from 'ng-mocks';
 
-import { AppHistoryComponent } from './app-history.component';
-import { AreaChartComponent } from '@app/components/area-chart/area-chart.component';
+import {AppHistoryComponent} from './app-history.component';
 
 describe('AppHistoryComponent', () => {
   let component: AppHistoryComponent;

src/app/components/app-status/app-status.component.spec.ts

@@ -16,13 +16,13 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatCardModule } from '@angular/material/card';
-import { configureTestSuite } from 'ng-bullet';
-import { MockComponent } from 'ng-mocks';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatCardModule} from '@angular/material/card';
+import {DonutChartComponent} from '@app/components/donut-chart/donut-chart.component';
+import {configureTestSuite} from 'ng-bullet';
+import {MockComponent} from 'ng-mocks';
 
-import { AppStatusComponent } from './app-status.component';
-import { DonutChartComponent } from '@app/components/donut-chart/donut-chart.component';
+import {AppStatusComponent} from './app-status.component';
 
 describe('AppStatusComponent', () => {
   let component: AppStatusComponent;

src/app/components/apps-view/apps-view.component.spec.ts

@@ -16,34 +16,32 @@
  * limitations under the License.
  */
 
-import { DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HAMMER_LOADER } from '@angular/platform-browser';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { FormsModule } from '@angular/forms';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatSortModule } from '@angular/material/sort';
-import { MatInputModule } from '@angular/material/input';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSelectModule } from '@angular/material/select';
-import { of } from 'rxjs';
+import {DebugElement} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSortModule} from '@angular/material/sort';
+import {MatTableModule} from '@angular/material/table';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {By, HAMMER_LOADER} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterTestingModule} from '@angular/router/testing';
+import {AppInfo} from '@app/models/app-info.model';
+import {SchedulerService} from '@app/services/scheduler/scheduler.service';
+import {MockNgxSpinnerService, MockSchedulerService} from '@app/testing/mocks';
+import {NgxSpinnerService} from 'ngx-spinner';
+import {of} from 'rxjs';
 
-import { AppsViewComponent } from './apps-view.component';
-import { AppInfo } from '@app/models/app-info.model';
-import { AllocationInfo } from '@app/models/alloc-info.model';
-import { SchedulerService } from '@app/services/scheduler/scheduler.service';
-import { MockSchedulerService, MockNgxSpinnerService } from '@app/testing/mocks';
+import {AppsViewComponent} from './apps-view.component';
 
 describe('AppsViewComponent', () => {
   let component: AppsViewComponent;
   let fixture: ComponentFixture<AppsViewComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [AppsViewComponent],
       imports: [
@@ -64,9 +62,6 @@ describe('AppsViewComponent', () => {
         { provide: HAMMER_LOADER, useValue: () => new Promise(() => {}) },
       ],
     }).compileComponents();
-  }));
-
-  beforeEach(() => {
     fixture = TestBed.createComponent(AppsViewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/components/area-chart/area-chart.component.spec.ts

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { configureTestSuite } from 'ng-bullet';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {configureTestSuite} from 'ng-bullet';
 
-import { AreaChartComponent } from './area-chart.component';
+import {AreaChartComponent} from './area-chart.component';
 
 describe('AreaChartComponent', () => {
   let component: AreaChartComponent;

src/app/components/container-history/container-history.component.spec.ts

@@ -16,13 +16,13 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { configureTestSuite } from 'ng-bullet';
-import { MatCardModule } from '@angular/material/card';
-import { MockComponent } from 'ng-mocks';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatCardModule} from '@angular/material/card';
+import {AreaChartComponent} from '@app/components/area-chart/area-chart.component';
+import {configureTestSuite} from 'ng-bullet';
+import {MockComponent} from 'ng-mocks';
 
-import { ContainerHistoryComponent } from './container-history.component';
-import { AreaChartComponent } from '@app/components/area-chart/area-chart.component';
+import {ContainerHistoryComponent} from './container-history.component';
 
 describe('ContainerHistoryComponent', () => {
   let component: ContainerHistoryComponent;

src/app/components/container-status/container-status.component.spec.ts

@@ -16,13 +16,13 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { configureTestSuite } from 'ng-bullet';
-import { MockComponent } from 'ng-mocks';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatCardModule} from '@angular/material/card';
+import {DonutChartComponent} from '@app/components/donut-chart/donut-chart.component';
+import {configureTestSuite} from 'ng-bullet';
+import {MockComponent} from 'ng-mocks';
 
-import { ContainerStatusComponent } from './container-status.component';
-import { DonutChartComponent } from '@app/components/donut-chart/donut-chart.component';
-import { MatCardModule } from '@angular/material/card';
+import {ContainerStatusComponent} from './container-status.component';
 
 describe('ContainerStatusComponent', () => {
   let component: ContainerStatusComponent;

src/app/components/donut-chart/donut-chart.component.spec.ts

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { configureTestSuite } from 'ng-bullet';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {configureTestSuite} from 'ng-bullet';
 
-import { DonutChartComponent } from './donut-chart.component';
+import {DonutChartComponent} from './donut-chart.component';
 
 describe('DonutChartComponent', () => {
   let component: DonutChartComponent;

src/app/components/error-view/error-view.component.spec.ts

@@ -16,12 +16,12 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { configureTestSuite } from 'ng-bullet';
-import { MatCardModule } from '@angular/material/card';
-import { RouterTestingModule } from '@angular/router/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatCardModule} from '@angular/material/card';
+import {RouterTestingModule} from '@angular/router/testing';
+import {configureTestSuite} from 'ng-bullet';
 
-import { ErrorViewComponent } from './error-view.component';
+import {ErrorViewComponent} from './error-view.component';
 
 describe('ErrorViewComponent', () => {
   let component: ErrorViewComponent;

src/app/components/healthchecks/healthchecks.component.spec.ts

@@ -16,22 +16,29 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatIconModule} from "@angular/material/icon";
+import {NoopAnimationsModule} from "@angular/platform-browser/animations";
+import {RouterTestingModule} from "@angular/router/testing";
 
-import { HealthchecksComponent } from './healthchecks.component';
+import {HealthchecksComponent} from './healthchecks.component';
 
 describe('HealthchecksComponent', () => {
   let component: HealthchecksComponent;
   let fixture: ComponentFixture<HealthchecksComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ HealthchecksComponent ]
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+        declarations: [ HealthchecksComponent ],
+        imports: [
+            NoopAnimationsModule,
+            RouterTestingModule,
+            MatIconModule,
+            MatExpansionModule,
+        ],
     })
     .compileComponents();
-  });
-
-  beforeEach(() => {
     fixture = TestBed.createComponent(HealthchecksComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/components/queues-view/queues-view.component.spec.ts

@@ -16,20 +16,20 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-import { configureTestSuite } from 'ng-bullet';
-import { MockComponent } from 'ng-mocks';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterTestingModule} from '@angular/router/testing';
+import {QueueRackComponent} from '@app/components/queue-rack/queue-rack.component';
+import {SchedulerService} from '@app/services/scheduler/scheduler.service';
+import {MockNgxSpinnerService, MockSchedulerService} from '@app/testing/mocks';
+import {configureTestSuite} from 'ng-bullet';
+import {MockComponent} from 'ng-mocks';
+import {NgxSpinnerService} from 'ngx-spinner';
 
-import { QueuesViewComponent } from './queues-view.component';
-import { QueueRackComponent } from '@app/components/queue-rack/queue-rack.component';
-import { SchedulerService } from '@app/services/scheduler/scheduler.service';
-import { MockSchedulerService, MockNgxSpinnerService } from '@app/testing/mocks';
+import {QueuesViewComponent} from './queues-view.component';
 
 describe('QueuesViewComponent', () => {
   let component: QueuesViewComponent;

src/app/components/status-view/status-view.component.spec.ts

@@ -16,22 +16,22 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockComponent } from 'ng-mocks';
-import { NgxSpinnerService } from 'ngx-spinner';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { StatusViewComponent } from './status-view.component';
+import {SchedulerService} from '@app/services/scheduler/scheduler.service';
+import {MockNgxSpinnerService, MockSchedulerService} from '@app/testing/mocks';
+import {MockComponent} from 'ng-mocks';
+import {NgxSpinnerService} from 'ngx-spinner';
 
-import { SchedulerService } from '@app/services/scheduler/scheduler.service';
-import { MockSchedulerService, MockNgxSpinnerService } from '@app/testing/mocks';
+import {StatusViewComponent} from './status-view.component';
 
 describe('StatusViewComponent', () => {
   let component: StatusViewComponent;
   let fixture: ComponentFixture<StatusViewComponent>;
 
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach( () => {
+    TestBed.configureTestingModule({
       declarations: [ StatusViewComponent, MockComponent(StatusViewComponent) ],
       providers: [
         { provide: SchedulerService, useValue: MockSchedulerService },