Merge branch 'main' into feat/user-documentation

.github/workflows/ci.yml

@@ -4,8 +4,11 @@ on:
   push:
     branches:
       - 'main'
-    tags:
-      - '*'
+      - 'v**'
+  pull_request:
+    branches:
+      - 'main'
+      - 'v**'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
@@ -18,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
 
-      - run: npm install -g pnpm@9.1.4
+      - run: npm install -g pnpm@9.7.0
       - run: corepack enable
 
       - name: Setup Node
@@ -40,7 +43,7 @@ jobs:
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
 
-      - run: npm install -g pnpm@9.1.4
+      - run: npm install -g pnpm@9.7.0
       - run: corepack enable
 
       - uses: actions/setup-node@v4 # v4
@@ -61,7 +64,7 @@ jobs:
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
 
-      - run: npm install -g pnpm@9.1.4
+      - run: npm install -g pnpm@9.7.0
       - run: corepack enable
 
       - uses: actions/setup-node@v4 # v4
@@ -93,7 +96,7 @@ jobs:
 
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
 
-      - run: npm install -g pnpm@9.1.4
+      - run: npm install -g pnpm@9.7.0
       - run: corepack enable
 
       - uses: actions/setup-node@v4 # v4

.github/workflows/release-pr.yml

@@ -3,7 +3,8 @@ name: CD Release PR
 on:
   pull_request:
     branches:
-      - main
+      - 'main'
+      - 'v**'
 
 permissions:
   contents: write

Dockerfile

@@ -2,7 +2,7 @@ FROM node:lts-alpine AS build
 
 WORKDIR /usr/src/app
 
-RUN npm install --ignore-scripts -g pnpm@9.1.4
+RUN npm install --ignore-scripts -g pnpm@9.7.0
 
 COPY package.json ./
 COPY pnpm-lock.yaml ./

angular.json

@@ -44,9 +44,6 @@
               "base": "dist/admin"
             },
             "index": "src/index.html",
-            "polyfills": [
-              "zone.js"
-            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "armonik-admin-gui",
   "version": "0.10.7",
-  "packageManager": "pnpm@9.1.4",
+  "packageManager": "pnpm@9.7.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -18,39 +18,38 @@
   },
   "private": true,
   "dependencies": {
-    "@aneoconsultingfr/armonik.api.angular": "^3.18.1",
+    "@aneoconsultingfr/armonik.api.angular": "^3.19.0",
     "@angular-material-components/datetime-picker": "^16.0.1",
-    "@angular/animations": "^18.0.3",
-    "@angular/cdk": "18.0.4",
-    "@angular/common": "^18.0.3",
-    "@angular/compiler": "^18.0.3",
-    "@angular/core": "^18.0.3",
-    "@angular/forms": "^18.0.3",
-    "@angular/material": "18.0.4",
-    "@angular/material-luxon-adapter": "^18.0.4",
-    "@angular/platform-browser": "^18.0.3",
-    "@angular/platform-browser-dynamic": "^18.0.3",
-    "@angular/router": "^18.0.3",
+    "@angular/animations": "^18.1.0",
+    "@angular/cdk": "18.1.0",
+    "@angular/common": "^18.1.0",
+    "@angular/compiler": "^18.1.0",
+    "@angular/core": "^18.1.0",
+    "@angular/forms": "^18.1.0",
+    "@angular/material": "18.1.0",
+    "@angular/material-luxon-adapter": "^18.1.0",
+    "@angular/platform-browser": "^18.1.0",
+    "@angular/platform-browser-dynamic": "^18.1.0",
+    "@angular/router": "^18.1.0",
     "@ngx-grpc/common": "^3.1.2",
     "@ngx-grpc/core": "^3.1.2",
     "@ngx-grpc/grpc-web-client": "^3.1.2",
     "@ungap/structured-clone": "^1.2.0",
     "jest-junit": "^16.0.0",
     "luxon": "^3.4.4",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.4"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "18.0.1",
-    "@angular-eslint/eslint-plugin": "18.0.1",
-    "@angular-eslint/eslint-plugin-template": "18.0.1",
-    "@angular-eslint/schematics": "18.0.1",
-    "@angular-eslint/template-parser": "18.0.1",
-    "@angular/build": "^18.0.4",
-    "@angular/cli": "~18.0.4",
-    "@angular/compiler-cli": "^18.0.3",
-    "@angular/localize": "18.0.3",
+    "@angular-eslint/builder": "18.1.0",
+    "@angular-eslint/eslint-plugin": "18.1.0",
+    "@angular-eslint/eslint-plugin-template": "18.1.0",
+    "@angular-eslint/schematics": "18.1.0",
+    "@angular-eslint/template-parser": "18.1.0",
+    "@angular/build": "^18.1.0",
+    "@angular/cli": "~18.1.0",
+    "@angular/compiler-cli": "^18.1.0",
+    "@angular/localize": "18.1.0",
     "@types/google-protobuf": "^3.15.12",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",

src/app/app.config.ts

@@ -1,5 +1,5 @@
 import { HttpClient, provideHttpClient } from '@angular/common/http';
-import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
 import { GrpcCoreModule } from '@ngx-grpc/core';
@@ -96,6 +96,7 @@ export const appConfig: ApplicationConfig = {
       deps: [UserGrpcService, UserService, VersionsGrpcService, VersionsService, HttpClient, EnvironmentService, StorageService],
       multi: true
     },
+    provideExperimentalZonelessChangeDetection(),
     provideRouter(routes),
     importProvidersFrom(BrowserAnimationsModule),
     provideHttpClient(),

src/app/applications/components/table.component.html

@@ -1,3 +1,3 @@
-<app-table [columns]="displayedColumns" [data]="data()" [total]="total" [options]="options" [lockColumns]="lockColumns"
+<app-table [trackBy]="trackBy" [columns]="displayedColumns" [data]="data()" [total]="total" [options]="options" [lockColumns]="lockColumns"
   [actions]="actions" [statusesGroups]="statusesGroups" (optionsChange)="onOptionsChange()"
   (personnalizeTasksByStatus)="personalizeTasksByStatus()" (columnDrop)="onDrop($event)" />

src/app/applications/components/table.component.spec.ts

@@ -7,7 +7,8 @@ import { Router } from '@angular/router';
 import { BehaviorSubject, Subject, of, throwError } from 'rxjs';
 import { ManageGroupsDialogResult, TasksStatusesGroup } from '@app/dashboard/types';
 import { TableColumn } from '@app/types/column.type';
-import { ApplicationData } from '@app/types/data';
+import { ApplicationData, ColumnKey } from '@app/types/data';
+import { FiltersOr } from '@app/types/filters';
 import { CacheService } from '@services/cache.service';
 import { FiltersService } from '@services/filters.service';
 import { IconsService } from '@services/icons.service';
@@ -16,12 +17,12 @@ import { TasksByStatusService } from '@services/tasks-by-status.service';
 import { ApplicationsTableComponent } from './table.component';
 import { ApplicationsGrpcService } from '../services/applications-grpc.service';
 import { ApplicationsIndexService } from '../services/applications-index.service';
-import { ApplicationRaw, ApplicationRawColumnKey, ApplicationRawFilters } from '../types';
+import { ApplicationRaw } from '../types';
 
 describe('TasksTableComponent', () => {
   let component: ApplicationsTableComponent;
 
-  const displayedColumns: TableColumn<ApplicationRawColumnKey>[] = [
+  const displayedColumns: TableColumn<ApplicationRaw>[] = [
     {
       name: 'Namespace',
       key: 'namespace',
@@ -60,7 +61,8 @@ describe('TasksTableComponent', () => {
     isSimpleColumn: jest.fn(),
     isNotSortableColumn: jest.fn(),
     columnToLabel: jest.fn(),
-    saveColumns: jest.fn()
+    saveColumns: jest.fn(),
+    saveOptions: jest.fn(),
   };
 
   const mockNotificationService = {
@@ -147,7 +149,7 @@ describe('TasksTableComponent', () => {
     }).inject(ApplicationsTableComponent);
 
     component.displayedColumns = displayedColumns;
-    component.filters$ = new BehaviorSubject<ApplicationRawFilters>([]);
+    component.filters$ = new BehaviorSubject<FiltersOr<ApplicationRawEnumField>>([]);
     component.options = {
       pageIndex: 0,
       pageSize: 10,
@@ -294,14 +296,21 @@ describe('TasksTableComponent', () => {
     });
   });
 
-  it('should refresh data on options changes', () => {
-    const spy = jest.spyOn(component.refresh$, 'next');
-    component.onOptionsChange();
-    expect(spy).toHaveBeenCalled();
+  describe('options changes', () => {
+    it('should refresh data', () => {
+      const spy = jest.spyOn(component.refresh$, 'next');
+      component.onOptionsChange();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should save options', () => {
+      component.onOptionsChange();
+      expect(mockApplicationsIndexService.saveOptions).toHaveBeenCalled();
+    });
   });
 
   test('onDrop should call ApplicationsIndexService', () => {
-    const newColumns: ApplicationRawColumnKey[] = ['actions', 'name', 'namespace', 'version'];
+    const newColumns: ColumnKey<ApplicationRaw>[] = ['actions', 'name', 'namespace', 'version'];
     component.onDrop(newColumns);
     expect(mockApplicationsIndexService.saveColumns).toHaveBeenCalledWith(newColumns);
   });
@@ -455,4 +464,9 @@ describe('TasksTableComponent', () => {
       expect(component.isDataRawEqual(application1, application2)).toBeFalsy();
     });
   });
+
+  it('should track an application by its name and version', () => {
+    const application = {raw: { name: 'application', version: '0.1.2'}} as ApplicationData;
+    expect(component.trackBy(0, application)).toEqual(`${application.raw.name}-${application.raw.version}`);
+  });
 });

src/app/applications/components/table.component.ts

@@ -6,7 +6,7 @@ import { Subject } from 'rxjs';
 import { TaskSummaryFilters } from '@app/tasks/types';
 import { AbstractTaskByStatusTableComponent } from '@app/types/components/table';
 import { Scope } from '@app/types/config';
-import { ApplicationData } from '@app/types/data';
+import { ApplicationData, ArmonikData } from '@app/types/data';
 import { Filter } from '@app/types/filters';
 import { ActionTable } from '@app/types/table';
 import { TableComponent } from '@components/table/table.component';
@@ -17,7 +17,7 @@ import { NotificationService } from '@services/notification.service';
 import { TableTasksByStatus, TasksByStatusService } from '@services/tasks-by-status.service';
 import { ApplicationsGrpcService } from '../services/applications-grpc.service';
 import { ApplicationsIndexService } from '../services/applications-index.service';
-import { ApplicationRaw, ApplicationRawColumnKey, ApplicationRawFieldKey, ApplicationRawListOptions } from '../types';
+import { ApplicationRaw } from '../types';
 
 @Component({
   selector: 'app-application-table',
@@ -36,7 +36,7 @@ import { ApplicationRaw, ApplicationRawColumnKey, ApplicationRawFieldKey, Applic
     TableComponent,
   ]
 })
-export class ApplicationsTableComponent extends AbstractTaskByStatusTableComponent<ApplicationRaw, ApplicationRawColumnKey, ApplicationRawFieldKey, ApplicationRawListOptions, ApplicationRawEnumField>
+export class ApplicationsTableComponent extends AbstractTaskByStatusTableComponent<ApplicationRaw, ApplicationRawEnumField>
   implements OnInit, AfterViewInit {
   scope: Scope = 'applications';
   table: TableTasksByStatus = 'applications';
@@ -46,10 +46,10 @@ export class ApplicationsTableComponent extends AbstractTaskByStatusTableCompone
   readonly iconsService = inject(IconsService);
   readonly router = inject(Router);
 
-  seeSessions$ = new Subject<ApplicationData>();
+  seeSessions$ = new Subject<ArmonikData<ApplicationRaw>>();
   seeSessionsSubscription = this.seeSessions$.subscribe(data => this.router.navigate(['/sessions'], { queryParams: this.createViewSessionsQueryParams(data.raw.name, data.raw.version) }));
 
-  actions: ActionTable<ApplicationData>[] = [
+  actions: ActionTable<ApplicationRaw>[] = [
     {
       label: $localize`See session`,
       icon: this.getIcon('sessions'),
@@ -160,4 +160,8 @@ export class ApplicationsTableComponent extends AbstractTaskByStatusTableCompone
       ]
     ];
   }
+
+  trackBy(index: number, item: ArmonikData<ApplicationRaw>) {
+    return `${item.raw.name}-${item.raw.version}`;
+  }
 }

src/app/applications/index.component.spec.ts

@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { Subject, of } from 'rxjs';
 import { DashboardIndexService } from '@app/dashboard/services/dashboard-index.service';
 import { TableColumn } from '@app/types/column.type';
+import { ColumnKey } from '@app/types/data';
 import { FiltersOr } from '@app/types/filters';
 import { AutoRefreshService } from '@services/auto-refresh.service';
 import { DefaultConfigService } from '@services/default-config.service';
@@ -11,13 +12,13 @@ import { ShareUrlService } from '@services/share-url.service';
 import { IndexComponent } from './index.component';
 import { ApplicationsFiltersService } from './services/applications-filters.service';
 import { ApplicationsIndexService } from './services/applications-index.service';
-import { ApplicationRawColumnKey, ApplicationRawFilters, ApplicationRawListOptions } from './types';
+import { ApplicationRaw, ApplicationRawFilters, ApplicationRawListOptions } from './types';
 
 describe('Application component', () => {
 
   let component: IndexComponent;
 
-  const displayedColumns: TableColumn<ApplicationRawColumnKey>[] = [
+  const displayedColumns: TableColumn<ApplicationRaw>[] = [
     {
       name: 'Name',
       key: 'name',
@@ -209,7 +210,7 @@ describe('Application component', () => {
   });
 
   it('should change columns', () => {
-    const newColumns: ApplicationRawColumnKey[] = ['name', 'count', 'service'];
+    const newColumns: ColumnKey<ApplicationRaw>[] = ['name', 'count', 'service'];
     component.onColumnsChange(newColumns);
     expect(component.displayedColumnsKeys).toEqual(newColumns);
     expect(mockApplicationIndexService.saveColumns).toHaveBeenCalledWith(newColumns);

src/app/applications/index.component.ts

@@ -26,7 +26,7 @@ import { UtilsService } from '@services/utils.service';
 import { ApplicationsTableComponent } from './components/table.component';
 import { ApplicationsFiltersService } from './services/applications-filters.service';
 import { ApplicationsIndexService } from './services/applications-index.service';
-import { ApplicationRawColumnKey, ApplicationRawFilters, ApplicationRawListOptions } from './types';
+import { ApplicationRaw } from './types';
 
 @Component({
   selector: 'app-applications-index',
@@ -64,7 +64,7 @@ import { ApplicationRawColumnKey, ApplicationRawFilters, ApplicationRawListOptio
     ApplicationsTableComponent
   ]
 })
-export class IndexComponent extends TableHandler<ApplicationRawColumnKey, ApplicationRawListOptions, ApplicationRawFilters, ApplicationRawEnumField> implements OnInit, AfterViewInit, OnDestroy {
+export class IndexComponent extends TableHandler<ApplicationRaw, ApplicationRawEnumField> implements OnInit, AfterViewInit, OnDestroy {
 
   readonly filtersService = inject(ApplicationsFiltersService);
   readonly indexService = inject(ApplicationsIndexService);

src/app/applications/services/applications-filters.service.ts

@@ -9,7 +9,7 @@ import { ApplicationFilterField, ApplicationRawFilters, ApplicationsFiltersDefin
 @Injectable({
   providedIn: 'root'
 })
-export class ApplicationsFiltersService implements FiltersServiceInterface<ApplicationRawFilters, ApplicationRawEnumField> {
+export class ApplicationsFiltersService implements FiltersServiceInterface<ApplicationRawEnumField> {
   readonly defaultConfigService = inject(DefaultConfigService);
   readonly tableService = inject(TableService);
 

src/app/applications/services/applications-grpc.service.ts

@@ -5,10 +5,10 @@ import { Filter, FilterType } from '@app/types/filters';
 import { GrpcTableService, ListApplicationSortField, RequestFilterField } from '@app/types/services/grpcService';
 import { FilterField, buildStringFilter } from '@services/grpc-build-request.service';
 import { ApplicationsFiltersService } from './applications-filters.service';
-import { ApplicationRawFieldKey, ApplicationRawFilters, ApplicationRawListOptions } from '../types';
+import { ApplicationRaw, ApplicationRawFieldKey, ApplicationRawFilters, ApplicationRawListOptions } from '../types';
 
 @Injectable()
-export class ApplicationsGrpcService extends GrpcTableService<ApplicationRawFieldKey, ApplicationRawListOptions, ApplicationRawEnumField> {
+export class ApplicationsGrpcService extends GrpcTableService<ApplicationRaw, ApplicationRawEnumField> {
   readonly filterService = inject(ApplicationsFiltersService);
   readonly grpcClient = inject(ApplicationsClient);
 

src/app/applications/services/applications-index.service.ts

@@ -6,7 +6,7 @@ import { TableService } from '@services/table.service';
 import { ApplicationRaw, ApplicationRawColumnKey, ApplicationRawListOptions } from '../types';
 
 @Injectable()
-export class ApplicationsIndexService implements IndexServiceInterface<ApplicationRawColumnKey, ApplicationRawListOptions> {
+export class ApplicationsIndexService implements IndexServiceInterface<ApplicationRaw> {
   readonly tableService = inject(TableService);
   readonly defaultConfigService = inject(DefaultConfigService);
 
@@ -15,7 +15,7 @@ export class ApplicationsIndexService implements IndexServiceInterface<Applicati
   readonly defaultIntervalValue = this.defaultConfigService.defaultApplications.interval;
   readonly defaultLockColumns = this.defaultConfigService.defaultApplications.lockColumns;
 
-  readonly availableTableColumns: TableColumn<ApplicationRawColumnKey>[] = [
+  readonly availableTableColumns: TableColumn<ApplicationRaw>[] = [
     {
       name: $localize`Name`,
       key: 'name',