feat: lock and unlock columns for tables

src/app/applications/index.component.ts

@@ -62,11 +62,13 @@ import { ApplicationRaw, ApplicationRawColumnKey, ApplicationRawFieldKey, Applic
       [columnsLabels]="columnsLabels()"
       [displayedColumns]="displayedColumns"
       [availableColumns]="availableColumns"
+      [lockColumns]="lockColumns"
       (refresh)="onRefresh()"
       (intervalValueChange)="onIntervalValueChange($event)"
       (displayedColumnsChange)="onColumnsChange($event)"
       (resetColumns)="onColumnsReset()"
       (resetFilters)="onFiltersReset()"
+      (lockColumnsChange)="onLockColumnsChange()"
     >
       <ng-container extra-menu-items>
         <button mat-menu-item (click)="personalizeTasksByStatus()">
@@ -85,7 +87,7 @@ import { ApplicationRaw, ApplicationRawColumnKey, ApplicationRawFieldKey, Applic
 </mat-toolbar>
 
 <app-table-container>
-  <table mat-table matSort [matSortActive]="options.sort.active" matSortDisableClear [matSortDirection]="options.sort.direction" [dataSource]="data" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
+  <table mat-table matSort [matSortActive]="options.sort.active" matSortDisableClear [matSortDirection]="options.sort.direction" [dataSource]="data" cdkDropList cdkDropListOrientation="horizontal" [cdkDropListDisabled]="lockColumns" (cdkDropListDropped)="onDrop($event)">
 
     <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
       <!-- Header -->
@@ -210,6 +212,7 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
 
   displayedColumns: ApplicationRawColumnKey[] = [];
   availableColumns: ApplicationRawColumnKey[] = [];
+  lockColumns: boolean = false;
 
   isLoading = true;
   data: ApplicationRaw[] = [];
@@ -243,6 +246,7 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit(): void {
     this.displayedColumns = this._applicationsIndexService.restoreColumns();
     this.availableColumns = this._applicationsIndexService.availableColumns;
+    this.lockColumns = this._applicationsIndexService.restoreLockColumns();
 
     this.options = this._applicationsIndexService.restoreOptions();
 
@@ -380,6 +384,11 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
     this.refresh.next();
   }
 
+  onLockColumnsChange() {
+    this.lockColumns = !this.lockColumns;
+    this._applicationsIndexService.saveLockColumns(this.lockColumns);
+  }
+
   autoRefreshTooltip() {
     return this._autoRefreshService.autoRefreshTooltip(this.intervalValue);
   }

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

@@ -24,6 +24,7 @@ export class ApplicationsIndexService {
   readonly defaultOptions: ApplicationRawListOptions = this.#defaultConfigService.defaultApplications.options;
 
   readonly defaultIntervalValue = this.#defaultConfigService.defaultApplications.interval;
+  readonly defaultLockColumnValue = this.#defaultConfigService.defaultApplications.lockColumns;
 
   #tableService = inject(TableService);
 
@@ -62,6 +63,18 @@ export class ApplicationsIndexService {
     return this.#tableService.restoreIntervalValue('applications-interval') ?? this.defaultIntervalValue;
   }
 
+  /**
+   * Lock columns
+   */
+
+  saveLockColumns(value: boolean): void {
+    this.#tableService.saveLockColumns('applications-lock-columns', value);
+  }
+
+  restoreLockColumns(): boolean {
+    return this.#tableService.restoreLockColumns('applications-lock-columns') ?? this.defaultLockColumnValue;
+  }
+
   /**
    * Options
    */

src/app/components/columns-button.component.ts

@@ -10,7 +10,7 @@ import { ColumnsModifyDialogComponent } from './columns-modify-dialog.component'
 @Component({
   selector: 'app-columns-button',
   template: `
-<button mat-stroked-button (click)="openModifyColumnsDialog()">
+<button [disabled]="disabled" mat-stroked-button (click)="openModifyColumnsDialog()">
   <mat-icon aria-hidden="true" [fontIcon]="getIcon('modify-columns')"></mat-icon>
   <span i18n="Open a dialog on click">Modify Columns</span>
 </button>
@@ -31,6 +31,7 @@ export class ColumnsButtonComponent<T extends object, O extends object> {
   @Input({ required: true }) columnsLabels: Record<ColumnKey<T, O>, string>;
   @Input({ required: true }) displayedColumns: ColumnKey<T, O>[] = [];
   @Input({ required: true }) availableColumns: ColumnKey<T, O>[];
+  @Input({ required: true}) disabled: boolean = false;
 
   @Output() displayedColumnsChange: EventEmitter<ColumnKey<T, O>[]> = new EventEmitter<ColumnKey<T, O>[]>();
 

src/app/components/table-actions-toolbar.component.spec.ts

@@ -65,4 +65,10 @@ describe('TableActionsToolbarComponent', () => {
     component.onResetFilters();
     expect(spyOnEventEmitter).toHaveBeenCalled();
   });
+
+  test('onLockColumns should emit', () => {
+    spyOnEventEmitter = jest.spyOn(component.lockColumnsChange, 'emit');
+    component.onLockColumnsChange();
+    expect(spyOnEventEmitter).toHaveBeenCalled();
+  });
 });

src/app/components/table-actions-toolbar.component.ts

@@ -32,13 +32,23 @@ import { SpinnerComponent } from './spinner.component';
       [displayedColumns]="displayedColumns"
       [availableColumns]="availableColumns"
       (displayedColumnsChange)="onDisplayedColumnsChange($event)"
+      [disabled]="lockColumns"
     >
     </app-columns-button>
 
     <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Show more options" i18n-aria-label matTooltip="More Options" i18n-matTooltip>
       <mat-icon aria-hidden="true" [fontIcon]="getIcon('more')"></mat-icon>
     </button>
     <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="onLockColumnsChange()">
+        <mat-icon aria-hidden="true" [fontIcon]="lockColumns ? getIcon('unlock') : getIcon('lock')"></mat-icon>
+        <span *ngIf="!lockColumns" i18n>
+          Lock columns
+        </span>
+        <span *ngIf="lockColumns" i18n>
+          Unlock columns
+        </span>
+      </button>
       <button mat-menu-item (click)="onResetColumns()">
         <mat-icon aria-hidden="true" [fontIcon]="getIcon('format-clear')"></mat-icon>
         <span i18n>
@@ -83,12 +93,14 @@ export class TableActionsToolbarComponent<T extends object, O extends object> {
   @Input({ required: true }) columnsLabels: Record<ColumnKey<T, O>, string>;
   @Input({ required: true }) displayedColumns: ColumnKey<T, O>[] = [];
   @Input({ required: true }) availableColumns: ColumnKey<T, O>[] = [];
+  @Input({ required: true }) lockColumns = false;
 
   @Output() refresh: EventEmitter<void> = new EventEmitter<void>();
   @Output() intervalValueChange: EventEmitter<number> = new EventEmitter<number>();
   @Output() displayedColumnsChange: EventEmitter<ColumnKey<T, O>[]> = new EventEmitter<ColumnKey<T, O>[]>();
   @Output() resetColumns: EventEmitter<void> = new EventEmitter<void>();
   @Output() resetFilters: EventEmitter<void> = new EventEmitter<void>();
+  @Output() lockColumnsChange = new EventEmitter<void>();
 
   getIcon(name: string): string {
     return this.#iconsService.getIcon(name);
@@ -113,4 +125,8 @@ export class TableActionsToolbarComponent<T extends object, O extends object> {
   onResetFilters(): void {
     this.resetFilters.emit();
   }
+
+  onLockColumnsChange(): void {
+    this.lockColumnsChange.emit();
+  }
 }

src/app/partitions/index.component.ts

@@ -63,11 +63,14 @@ import { PartitionRaw, PartitionRawColumnKey, PartitionRawFieldKey, PartitionRaw
       [columnsLabels]="columnsLabels()"
       [displayedColumns]="displayedColumns"
       [availableColumns]="availableColumns"
+      [lockColumns]="lockColumns"
       (refresh)="onRefresh()"
       (intervalValueChange)="onIntervalValueChange($event)"
       (displayedColumnsChange)="onColumnsChange($event)"
       (resetColumns)="onColumnsReset()"
-      (resetFilters)="onFiltersReset()">
+      (resetFilters)="onFiltersReset()"
+      (lockColumnsChange)="onLockColumnsChange()"
+      >
       <ng-container extra-menu-items>
         <button mat-menu-item (click)="personalizeTasksByStatus()">
           <mat-icon aria-hidden="true" [fontIcon]="getIcon('tune')"></mat-icon>
@@ -85,7 +88,7 @@ import { PartitionRaw, PartitionRawColumnKey, PartitionRawFieldKey, PartitionRaw
 </mat-toolbar>
 
 <app-table-container>
-  <table mat-table matSort [matSortActive]="options.sort.active" matSortDisableClear [matSortDirection]="options.sort.direction" [dataSource]="data" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
+  <table mat-table matSort [matSortActive]="options.sort.active" matSortDisableClear [matSortDirection]="options.sort.direction" [dataSource]="data" cdkDropList cdkDropListOrientation="horizontal" [cdkDropListDisabled]="lockColumns" (cdkDropListDropped)="onDrop($event)">
 
     <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
       <!-- Header -->
@@ -228,6 +231,7 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
 
   displayedColumns: PartitionRawColumnKey[] = [];
   availableColumns: PartitionRawColumnKey[] = [];
+  lockColumns: boolean;
 
   isLoading = true;
   data: PartitionRaw[] = [];
@@ -254,6 +258,7 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit() {
     this.displayedColumns = this.#partitionsIndexService.restoreColumns();
     this.availableColumns = this.#partitionsIndexService.availableColumns;
+    this.lockColumns = this.#partitionsIndexService.restoreLockColumns();
 
     this.options = this.#partitionsIndexService.restoreOptions();
 
@@ -398,6 +403,11 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
     this.paginator.pageIndex = 0;
     this.refresh.next();
   }
+
+  onLockColumnsChange() {
+    this.lockColumns = !this.lockColumns;
+    this.#partitionsIndexService.saveLockColumns(this.lockColumns);
+  }
 
   autoRefreshTooltip() {
     return this.#autoRefreshService.autoRefreshTooltip(this.intervalValue);

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

@@ -11,6 +11,7 @@ export class PartitionsIndexService {
   readonly tableName: string = 'partitions';
 
   readonly defaultColumns: PartitionRawColumnKey[] = this.#defaultConfigService.defaultPartitions.columns;
+  readonly defaultLockColumns: boolean = this.#defaultConfigService.defaultPartitions.lockColumns;
   readonly availableColumns: PartitionRawColumnKey[] = ['id', 'priority', 'parentPartitionIds', 'podConfiguration', 'podMax', 'podReserved', 'preemptionPercentage', 'actions', 'count'];
 
   // TODO: We could use a custom type to know which columns are objects
@@ -77,6 +78,18 @@ export class PartitionsIndexService {
     return this.#tableService.restoreIntervalValue('partitions-interval') ?? this.defaultIntervalValue;
   }
 
+  /**
+   * Lock columns
+   */
+
+  saveLockColumns(value: boolean): void {
+    this.#tableService.saveLockColumns('partitions-lock-columns', value);
+  }
+
+  restoreLockColumns(): boolean {
+    return this.#tableService.restoreLockColumns('partitions-lock-columns') ?? this.defaultLockColumns;
+  }
+
   /**
    * Options
    */

src/app/results/index.component.ts

@@ -56,11 +56,14 @@ import { ResultRaw, ResultRawColumnKey, ResultRawFieldKey, ResultRawFiltersOr, R
       [columnsLabels]="columnsLabels()"
       [displayedColumns]="displayedColumns"
       [availableColumns]="availableColumns"
+      [lockColumns]="lockColumns"
       (refresh)="onRefresh()"
       (intervalValueChange)="onIntervalValueChange($event)"
       (displayedColumnsChange)="onColumnsChange($event)"
       (resetColumns)="onColumnsReset()"
-      (resetFilters)="onFiltersReset()">
+      (resetFilters)="onFiltersReset()"
+      (lockColumnsChange)="onLockColumnsChange()"
+      >
     </app-table-actions-toolbar>
   </mat-toolbar-row>
 
@@ -70,7 +73,7 @@ import { ResultRaw, ResultRawColumnKey, ResultRawFieldKey, ResultRawFiltersOr, R
 </mat-toolbar>
 
 <app-table-container>
-  <table mat-table matSort [matSortActive]="options.sort.active" matSortDisableClear [matSortDirection]="options.sort.direction" [dataSource]="data" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
+  <table mat-table matSort [matSortActive]="options.sort.active" matSortDisableClear [matSortDirection]="options.sort.direction" [dataSource]="data" cdkDropList cdkDropListOrientation="horizontal" [cdkDropListDisabled]="lockColumns" (cdkDropListDropped)="onDrop($event)">
 
     <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
       <!-- Header -->
@@ -202,6 +205,7 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
 
   displayedColumns: ResultRawColumnKey[] = [];
   availableColumns: ResultRawColumnKey[] = [];
+  lockColumns: boolean = false;
 
   isLoading = true;
   data: ResultRaw[] = [];
@@ -234,6 +238,7 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit(): void {
     this.displayedColumns = this._resultsIndexService.restoreColumns();
     this.availableColumns = this._resultsIndexService.availableColumns;
+    this.lockColumns = this._resultsIndexService.restoreLockColumns();
 
     this.options = this._resultsIndexService.restoreOptions();
 
@@ -392,6 +397,11 @@ export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
     this.paginator.pageIndex = 0;
     this.refresh.next();
   }
+
+  onLockColumnsChange() {
+    this.lockColumns = !this.lockColumns;
+    this._resultsIndexService.saveLockColumns(this.lockColumns);
+  }
 
   autoRefreshTooltip() {
     return this._autoRefreshService.autoRefreshTooltip(this.intervalValue);

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

@@ -10,6 +10,7 @@ export class ResultsIndexService {
   #resultsStatusesService = inject(ResultsStatusesService);
 
   readonly defaultColumns: ResultRawColumnKey[] = this.#defaultConfigService.defaultResults.columns;
+  readonly defaultLockColumns: boolean = this.#defaultConfigService.defaultResults.lockColumns;
   readonly availableColumns: ResultRawColumnKey[] = ['name', 'status', 'ownerTaskId', 'createdAt', 'sessionId', 'actions'];
 
   readonly dateColumns: ResultRawColumnKey[] = ['createdAt'];
@@ -75,6 +76,18 @@ export class ResultsIndexService {
     return this.#tableService.restoreIntervalValue('results-interval') ?? this.defaultIntervalValue;
   }
 
+  /**
+   * Lock columns
+   */
+
+  saveLockColumns(value: boolean): void {
+    this.#tableService.saveLockColumns('results-lock-columns', value);
+  }
+
+  restoreLockColumns(): boolean {
+    return this.#tableService.restoreLockColumns('results-lock-columns') ?? this.defaultLockColumns;
+  }
+
   /**
    * Options
    */

src/app/services/default-config.service.ts

@@ -71,6 +71,7 @@ export class DefaultConfigService {
 
   readonly #defaultApplications: ScopeConfig<ApplicationRawColumnKey, ApplicationRawListOptions, ApplicationRawFilter> = {
     interval: 10,
+    lockColumns: false,
     columns: [
       'name',
       'version',
@@ -108,6 +109,7 @@ export class DefaultConfigService {
 
   readonly #defaultPartitions: ScopeConfig<PartitionRawColumnKey, PartitionRawListOptions, PartitionRawFiltersOr> = {
     interval: 10,
+    lockColumns: false,
     columns: [
       'id',
       'actions',
@@ -125,6 +127,7 @@ export class DefaultConfigService {
 
   readonly #defaultSessions: ScopeConfig<SessionRawColumnKey, SessionRawListOptions, SessionRawFiltersOr> = {
     interval: 10,
+    lockColumns: false,
     columns: [
       'sessionId',
       'count',
@@ -143,6 +146,7 @@ export class DefaultConfigService {
 
   readonly #defaultResults: ScopeConfig<ResultRawColumnKey, ResultRawListOptions, ResultRawFiltersOr> = {
     interval: 10,
+    lockColumns: false,
     columns: [
       'name',
       'actions',
@@ -160,6 +164,7 @@ export class DefaultConfigService {
 
   readonly #defaultTasks: ScopeConfig<TaskSummaryColumnKey, TaskSummaryListOptions, TaskSummaryFiltersOr> = {
     interval: 10,
+    lockColumns: false,
     columns: [
       'id',
       'status',
@@ -246,23 +251,28 @@ export class DefaultConfigService {
     'applications-options': this.#defaultApplications.options,
     'applications-filters': this.#defaultApplications.filters,
     'applications-interval': this.#defaultApplications.interval,
+    'applications-lock-columns': this.#defaultApplications.lockColumns,
     'partitions-columns': this.#defaultPartitions.columns,
     'partitions-options': this.#defaultPartitions.options,
     'partitions-filters': this.#defaultPartitions.filters,
     'partitions-interval': this.#defaultPartitions.interval,
+    'partitions-lock-columns': this.#defaultPartitions.lockColumns,
     'sessions-columns': this.#defaultSessions.columns,
     'sessions-options': this.#defaultSessions.options,
     'sessions-filters': this.#defaultSessions.filters,
     'sessions-interval': this.#defaultSessions.interval,
+    'sessions-lock-columns': this.#defaultSessions.lockColumns,
     'results-columns': this.#defaultResults.columns,
     'results-options': this.#defaultResults.options,
     'results-filters': this.#defaultResults.filters,
     'results-interval': this.#defaultResults.interval,
+    'results-lock-columns': this.#defaultResults.lockColumns,
     'tasks-columns': this.#defaultTasks.columns,
     'tasks-options': this.#defaultTasks.options,
     'tasks-filters': this.#defaultTasks.filters,
     'tasks-interval': this.#defaultTasks.interval,
     'tasks-view-in-logs': this.#defaultTasksViewInLogs,
+    'tasks-lock-columns': this.#defaultTasks.lockColumns
   };
 
   get exportedDefaultConfig(): ExportedDefaultConfig {

src/app/services/icons.service.ts

@@ -50,6 +50,8 @@ export class IconsService {
     'list': 'view_list',
     'vertical-split': 'vertical_split',
     'find-logs': 'plagiarism',
+    'lock': 'lock',
+    'unlock': 'lock_open'
   };
 
   getIcon(name: string): string {