): void {
diff --git a/src/app/components/columns-modify-dialog.component.html b/src/app/components/columns-modify-dialog.component.html
index b84fda977..71e77f76a 100644
--- a/src/app/components/columns-modify-dialog.component.html
+++ b/src/app/components/columns-modify-dialog.component.html
@@ -5,41 +5,42 @@ Modify Columns
@for(column of availableColumns; track column) {
-
- {{ columnToLabel(column) }}
-
+
+ {{ columnsLabels[column] }}
+
}
@if (availableOptionsColumns.length) {
-
- Options
-
-
-
- @for(column of availableOptionsColumns; track column) {
-
- {{ columnToLabel(column) }}
-
- }
-
+
+ Options
+
+
+
+ @for(column of availableOptionsColumns; track column) {
+
+ {{ columnsLabels[column] }}
+
+ }
+
}
@if (availableCustomColumns.length) {
-
- Custom Columns
-
-
-
- @for(column of availableCustomColumns; track column) {
-
- {{ columnToLabel(column) }}
-
- }
-
+
+ Custom Columns
+
+
+
+ @for(column of availableCustomColumns; track column) {
+
+ {{ column }}
+
+ }
+
}
-
-
-
-
\ No newline at end of file
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/columns-modify-dialog.component.spec.ts b/src/app/components/columns-modify-dialog.component.spec.ts
index 13b297a18..05f27d022 100644
--- a/src/app/components/columns-modify-dialog.component.spec.ts
+++ b/src/app/components/columns-modify-dialog.component.spec.ts
@@ -1,29 +1,35 @@
import { TestBed } from '@angular/core/testing';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ColumnKey } from '@app/types/data';
+import { TaskOptions, TaskSummary } from '@app/tasks/types';
+import { ColumnKey, CustomColumn, PrefixedOptions } from '@app/types/data';
import { ColumnsModifyDialogData } from '@app/types/dialog';
import { ColumnsModifyDialogComponent } from './columns-modify-dialog.component';
describe('', () => {
- let component: ColumnsModifyDialogComponent;
+ let component: ColumnsModifyDialogComponent;
const mockMatDialogRef = {
close: jest.fn()
- } as unknown as MatDialogRef>;
+ } as unknown as MatDialogRef>;
+
+ const currentColumns: ColumnKey[] = ['id', 'createdAt'];
+ const columnsLabels = {
+ 'id': 'ID',
+ 'createdAt': 'Creation time',
+ 'options.engineType': 'Engine Type',
+ 'options.partitionId': 'Partition Ids',
+ 'actions': 'Actions'
+ } as Record, string>;
+ const columns: ColumnKey[] = ['id', 'createdAt', 'actions'];
+ const optionsColumns: PrefixedOptions[] = ['options.engineType', 'options.partitionId'];
+ const customColumns: CustomColumn[] = ['options.options.FastCompute', 'options.options.EngineReady'];
const mockMatDialogData = {
- currentColumns: ['id', 'created_time'],
- columnsLabels: {
- 'id': 'ID',
- 'created_time': 'Creation time',
- 'name': 'Name',
- 'duration': 'Duration',
- 'options.task_id': 'Task ID',
- 'actions': 'Actions'
- } as Record, string>,
- availableColumns: ['name', 'duration', 'options.task_id', 'actions', 'options.options.FastCompute']
- } as ColumnsModifyDialogData;
+ currentColumns: currentColumns,
+ columnsLabels: columnsLabels,
+ availableColumns: [...columns, ...optionsColumns, ...customColumns]
+ } as ColumnsModifyDialogData;
beforeEach(() => {
component = TestBed.configureTestingModule({
@@ -40,102 +46,68 @@ describe('', () => {
expect(component).toBeTruthy();
});
- describe('on init', () => {
- it('should load columns', () => {
+ describe('initialisation', () => {
+ it('should get current columns', () => {
expect(component.columns).toEqual(mockMatDialogData.currentColumns);
});
- it('should copy the columns', () => {
+ it('should copy current columns', () => {
expect(component.columns).not.toBe(mockMatDialogData.currentColumns);
});
- it('should load columns labels', () => {
- expect(component.columnsLabels).toEqual(mockMatDialogData.columnsLabels);
+ it('should set and sort alphabetically the "normal" columns', () => {
+ expect(component.availableColumns).toEqual(columns.sort((a: string, b: string) => a.localeCompare(b)));
});
- });
-
- test('optionsColumnValue should add "options." to any provided string', () => {
- expect(component.optionsColumnValue('nameColumn')).toEqual('options.nameColumn');
- });
- describe('columnToLabel', () => {
- it('should get the label of the specified column', () => {
- expect(component.columnToLabel('name' as ColumnKey))
- .toEqual('Name');
+ it('should set and sort alphabetically the "options" columns', () => {
+ expect(component.availableOptionsColumns).toEqual(optionsColumns.sort((a: string, b: string) => a.localeCompare(b)));
});
- it('should return the stringified key in case of non-existing label', () => {
- expect(component.columnToLabel('nonExistingLabel' as ColumnKey))
- .toEqual('nonExistingLabel');
+ it('should set, sort alphabetically and map the "customs" columns', () => {
+ expect(component.availableCustomColumns).toEqual(customColumns.sort((a: string, b: string) => a.localeCompare(b)).map(c => c.replace('options.options.', '')));
});
+ });
- it('should remove the "options.options." key from custom columns', () => {
- expect(component.columnToLabel('options.options.FastCompute')).toEqual('FastCompute');
- });
+ test('toCustom should turn a string into a custom column', () => {
+ const value = 'column';
+ expect(component.toCustom(value)).toEqual(`options.options.${value}`);
});
describe('isCustomColumn', () => {
- it('should be true in case of a custom column', () => {
- expect(component.isCustomColumn('options.options.FastCompute')).toBeTruthy();
+ it('should return true in case of a custom column', () => {
+ expect(component.isCustomColumn(customColumns[0])).toBeTruthy();
});
- it('should be false in case of a non-custom column', () => {
- expect(component.isCustomColumn('actions')).toBeFalsy();
+ it('should return false in case of a normal column', () => {
+ expect(component.isCustomColumn(columns[0])).toBeFalsy();
});
});
- describe('Getting available columns', () => {
- it('should return every column without the "options." prefix', () => {
- expect(component.availableColumns).toEqual(['actions', 'duration', 'name']);
- });
-
- it('should return every column with the "options." prefix', () => {
- expect(component.availableOptionsColumns).toEqual(['options.task_id']);
+ describe('isSelected', () => {
+ it('should return true in case of a selected normal column', () => {
+ expect(component.isSelected(currentColumns[0])).toBeTruthy();
});
- it('should return every custom column', () => {
- expect(component.availableCustomColumns).toEqual(['options.options.FastCompute']);
+ it('should return false in case of unselected normal column', () => {
+ expect(component.isSelected(optionsColumns[0])).toBeFalsy();
});
});
describe('updateColumn', () => {
- it('should push a new column', () => {
- component.updateColumn({checked: true} as MatCheckboxChange, 'duration' as ColumnKey);
- expect(component.columns).toEqual(['id', 'created_time', 'duration']);
- });
-
- it('should remove a column if parameter is unchecked', () => {
- component.updateColumn({checked: false} as MatCheckboxChange, 'id' as ColumnKey);
- expect(component.columns).toEqual(['created_time']);
- });
-
- it('should not push a column that is already in the column list', () => {
- component.updateColumn({checked: true} as MatCheckboxChange, 'id' as ColumnKey);
- expect(component.columns).toEqual(['id', 'created_time']);
- });
-
- it('should not push a column that is not in the available columns', () => {
- component.updateColumn({checked: true} as MatCheckboxChange, 'someColumn' as ColumnKey);
- expect(component.columns).toEqual(['id', 'created_time']);
- });
-
- it('should not do remove a column that is not in the column list', () => {
- component.updateColumn({checked: false} as MatCheckboxChange, 'someColumn' as ColumnKey);
- expect(component.columns).toEqual(['id', 'created_time']);
- });
- });
-
- describe('isSelected', () => {
- it('should return true if a column is selected', () => {
- expect(component.isSelected('id' as ColumnKey)).toBeTruthy();
+ it('should add a column on check', () => {
+ const checkEvent = { checked: true } as MatCheckboxChange;
+ component.updateColumn(checkEvent, optionsColumns[1]);
+ expect(component.columns).toContain(optionsColumns[1]);
});
- it('should return false if a column is not selected', () => {
- expect(component.isSelected('duration' as ColumnKey)).toBeFalsy();
+ it('should add a column on unchecked', () => {
+ const checkEvent = { checked: false } as MatCheckboxChange;
+ component.updateColumn(checkEvent, 'id');
+ expect(component.columns).not.toContain('id');
});
});
- test('onNoClick should call dialogref.close', () => {
+ it('should close on "No Click"', () => {
component.onNoClick();
expect(mockMatDialogRef.close).toHaveBeenCalled();
});
diff --git a/src/app/components/columns-modify-dialog.component.ts b/src/app/components/columns-modify-dialog.component.ts
index 5cab4819d..f313587b0 100644
--- a/src/app/components/columns-modify-dialog.component.ts
+++ b/src/app/components/columns-modify-dialog.component.ts
@@ -3,7 +3,8 @@ import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatGridListModule } from '@angular/material/grid-list';
-import { ColumnKey, CustomColumn, PrefixedOptions, RawColumnKey } from '@app/types/data';
+import { TaskOptions } from '@app/tasks/types';
+import { ColumnKey, CustomColumn, DataRaw, PrefixedOptions } from '@app/types/data';
import { ColumnsModifyDialogData } from '@app/types/dialog';
@Component({
@@ -27,37 +28,39 @@ import { ColumnsModifyDialogData } from '@app/types/dialog';
MatCheckboxModule
]
})
-export class ColumnsModifyDialogComponent implements OnInit {
- columns: RawColumnKey[] = [];
+export class ColumnsModifyDialogComponent implements OnInit {
+ columns: ColumnKey[] = [];
columnsLabels: Record, string>;
+
+ private _availableColumns: (keyof T | 'actions')[] = [];
+ private _availableOptionsColumns: PrefixedOptions[] = [];
+ private _availableCustomColumns: string[] = [];
- _availableColumns: (keyof T | 'actions')[] = [];
+ /* Setters */
- set availableColumns(value: RawColumnKey[]) {
+ set availableColumns(value: ColumnKey[]) {
this._availableColumns = value.filter(column => !column.toString().includes('.')).sort((a, b) => a.toString().localeCompare(b.toString())) as (keyof T | 'actions')[];
}
- get availableColumns(): (keyof T | 'actions')[] {
- return this._availableColumns;
+ set availableOptionsColumns(value: ColumnKey[]) {
+ this._availableOptionsColumns = value.filter(column => !this.isCustomColumn(column) && column.toString().startsWith('options.')).sort((a, b) => a.toString().localeCompare(b.toString())) as PrefixedOptions[];
}
- _availableOptionsColumns: PrefixedOptions[] = [];
+ set availableCustomColumns(value: ColumnKey[]) {
+ this._availableCustomColumns = value.filter(column => this.isCustomColumn(column)).sort((a, b) => a.toString().localeCompare(b.toString())).map((column) => column.toString().replace('options.options.', ''));
+ }
- set availableOptionsColumns(value: RawColumnKey[]) {
- this._availableOptionsColumns = value.filter(column => !this.isCustomColumn(column as ColumnKey) && column.toString().startsWith('options.')).sort((a, b) => a.toString().localeCompare(b.toString())) as PrefixedOptions[];
+ /* Getters */
+
+ get availableColumns(): (keyof T | 'actions')[] {
+ return this._availableColumns;
}
get availableOptionsColumns(): PrefixedOptions[] {
return this._availableOptionsColumns;
}
- _availableCustomColumns: CustomColumn[] = [];
-
- set availableCustomColumns(value: RawColumnKey[]) {
- this._availableCustomColumns = value.filter(column => this.isCustomColumn(column as ColumnKey)).sort((a, b) => a.toString().localeCompare(b.toString())) as CustomColumn[];
- }
-
- get availableCustomColumns(): CustomColumn[] {
+ get availableCustomColumns(): string[] {
return this._availableCustomColumns;
}
@@ -65,25 +68,25 @@ export class ColumnsModifyDialogComponent imp
ngOnInit(): void {
// Create a copy in order to not modify the original array
- this.columns = Array.from(this.data.currentColumns);
+ this.columns = [...this.data.currentColumns];
this.columnsLabels = this.data.columnsLabels;
this.availableColumns = this.data.availableColumns;
this.availableOptionsColumns = this.data.availableColumns;
this.availableCustomColumns = this.data.availableColumns;
}
- optionsColumnValue(column: string): string {
- return `options.${column}`;
- }
-
- columnToLabel(column: ColumnKey): string {
- return !this.isCustomColumn(column) ? this.columnsLabels[column] ?? column.toString() : column.toString().replace('options.options.', '');
+ toCustom(column: string): CustomColumn {
+ return `options.options.${column}`;
}
isCustomColumn(column: ColumnKey): boolean {
return column.toString().startsWith('options.options.');
}
+ isSelected(column: ColumnKey): boolean {
+ return this.columns.includes(column);
+ }
+
/**
* Update the columns array when a checkbox is checked or unchecked
* checked: add the column.
@@ -91,21 +94,14 @@ export class ColumnsModifyDialogComponent imp
*/
updateColumn({ checked }: MatCheckboxChange, column: ColumnKey): void {
if (checked) {
- if (!this.columns.includes(column as RawColumnKey) && this.data.availableColumns.includes(column as RawColumnKey)) {
- this.columns.push(column as RawColumnKey);
+ if (!this.columns.includes(column) && this.data.availableColumns.includes(column)) {
+ this.columns.push(column);
}
- } else if(this.columns.includes(column as RawColumnKey)) {
+ } else if(this.columns.includes(column)) {
this.columns = this.columns.filter(currentColumn => currentColumn !== column);
}
}
- /**
- * Check if a column is selected
- */
- isSelected(column: ColumnKey): boolean {
- return this.data.currentColumns.includes(column as RawColumnKey);
- }
-
onNoClick(): void {
this.dialogRef.close();
}
diff --git a/src/app/components/count-tasks-by-status.component.spec.ts b/src/app/components/count-tasks-by-status.component.spec.ts
index ab2ee6a91..d9cfaa29f 100644
--- a/src/app/components/count-tasks-by-status.component.spec.ts
+++ b/src/app/components/count-tasks-by-status.component.spec.ts
@@ -5,7 +5,6 @@ import { TasksStatusesGroup } from '@app/dashboard/types';
import { TasksFiltersService } from '@app/tasks/services/tasks-filters.service';
import { TasksGrpcService } from '@app/tasks/services/tasks-grpc.service';
import { StatusCount, TaskSummaryFilters } from '@app/tasks/types';
-import { CacheService } from '@services/cache.service';
import { CountTasksByStatusComponent } from './count-tasks-by-status.component';
describe('CountTasksByStatusComponent', () => {
@@ -44,42 +43,37 @@ describe('CountTasksByStatusComponent', () => {
const refresh$ = new Subject();
const refreshSpy = jest.spyOn(refresh$, 'next');
- const cachedData: StatusCount[] = [{ status: TaskStatus.TASK_STATUS_CREATING, count: 3 }];
- const mockCacheService = {
- getStatuses: jest.fn((): StatusCount[] | undefined => cachedData),
- saveStatuses: jest.fn()
- };
-
beforeEach(() => {
component = TestBed.configureTestingModule({
providers: [
CountTasksByStatusComponent,
{ provide: TasksGrpcService, useValue: mockTasksGrpcService },
- TasksFiltersService,
- { provide: CacheService, useValue: mockCacheService }
+ TasksFiltersService
]
}).inject(CountTasksByStatusComponent);
component.refresh = refresh$;
component.filters = filters;
component.statusesGroups = statusesGroups;
+ component.ngOnInit();
});
it('Should run', () => {
expect(component).toBeTruthy();
});
- describe('initCount', () => {
- it('should set id', () => {
- expect(component.id).toEqual(filters[0][0].value);
+ describe('initialisation', () => {
+ it('should subscribe to refresh', () => {
+ expect(refresh$.observed).toBeTruthy();
});
- it('should load data', () => {
- expect(mockCacheService.getStatuses).toHaveBeenCalled();
+ it('should set id', () => {
+ expect(component.id).toEqual(filters[0][0].value);
});
it('should not set id if there is no filter value', () => {
- component.initCount([]);
+ component.filters = [];
+ component.initId();
expect(component.id).toEqual(undefined);
});
});
@@ -95,37 +89,20 @@ describe('CountTasksByStatusComponent', () => {
});
describe('setting filters', () => {
- it('should subscribe to refresh', () => {
- expect(refresh$.observed).toBeTruthy();
- });
-
- it('should refresh counts', () => {
- expect(refreshSpy).toHaveBeenCalled();
+ it('should set filters', () => {
+ expect(component.filters).toEqual(filters);
});
});
describe('Refreshing', () => {
it('should update statusesCounts', () => {
- component.refresh.next();
+ refresh$.next();
expect(component.statusesCount()).toEqual(finalStatusesCount);
});
it('should set null if there is no response status', () => {
mockTasksGrpcService.countByStatus$.mockReturnValue(of({ status: undefined }));
- component.refresh.next();
- expect(component.statusesCount()).toEqual([]);
- });
- });
-
- describe('loadFromCache', () => {
- it('should load cached data', () => {
- component.loadFromCache();
- expect(component.statusesCount()).toEqual(cachedData);
- });
-
- it('should load a null value if there is no cache', () => {
- mockCacheService.getStatuses.mockReturnValueOnce(undefined);
- component.loadFromCache();
+ refresh$.next();
expect(component.statusesCount()).toEqual([]);
});
});
diff --git a/src/app/components/count-tasks-by-status.component.ts b/src/app/components/count-tasks-by-status.component.ts
index 0293a79e6..d8398d79e 100644
--- a/src/app/components/count-tasks-by-status.component.ts
+++ b/src/app/components/count-tasks-by-status.component.ts
@@ -1,11 +1,10 @@
-import { Component, Input, WritableSignal, inject, signal } from '@angular/core';
-import { Subject, Subscription, switchMap } from 'rxjs';
+import { Component, Input, OnInit, WritableSignal, inject, signal } from '@angular/core';
+import { Subject, switchMap } from 'rxjs';
import { TasksStatusesGroup } from '@app/dashboard/types';
import { TasksFiltersService } from '@app/tasks/services/tasks-filters.service';
import { TasksGrpcService } from '@app/tasks/services/tasks-grpc.service';
import { StatusCount, TaskSummaryFilters } from '@app/tasks/types';
import { ViewTasksByStatusComponent } from '@components/view-tasks-by-status.component';
-import { CacheService } from '@services/cache.service';
@Component({
selector: 'app-count-tasks-by-status',
@@ -29,60 +28,56 @@ import { CacheService } from '@services/cache.service';
ViewTasksByStatusComponent,
]
})
-export class CountTasksByStatusComponent {
+export class CountTasksByStatusComponent implements OnInit {
+ private readonly tasksGrpcService = inject(TasksGrpcService);
+
+ id: string | undefined;
+ statusesCount: WritableSignal = signal([]);
+ loading = true;
+
+ private _statusesGroups: TasksStatusesGroup[] = [];
+ private _filters: TaskSummaryFilters;
+ private _refresh$: Subject;
+
@Input({ required: true }) queryParams: Record = {};
- @Input({ required: true }) refresh: Subject;
+
+ @Input({ required: true }) set refresh(subject: Subject) {
+ this._refresh$ = subject;
+ this.initRefresh();
+ }
@Input({ required: true }) set statusesGroups(entries: TasksStatusesGroup[]) {
this._statusesGroups = entries;
- if (this.refresh) {
- this.refresh.next();
- }
+ this._refresh$.next();
}
- id: string | undefined;
- private _statusesGroups: TasksStatusesGroup[] = [];
-
get statusesGroups(): TasksStatusesGroup[] {
return this._statusesGroups;
}
- statusesCount: WritableSignal = signal([]);
-
- loading = true;
-
- #tasksGrpcService = inject(TasksGrpcService);
- readonly cacheService = inject(CacheService);
-
- subscription = new Subscription();
+ get filters(): TaskSummaryFilters {
+ return this._filters;
+ }
@Input({ required: true }) set filters(entries: TaskSummaryFilters) {
- this.initCount(entries);
- this.refresh.pipe(
- switchMap(() => this.#tasksGrpcService.countByStatus$(entries)),
- ).subscribe(response => {
- this.loading = false;
- this.statusesCount.set(response.status ?? []);
- this.saveData(response.status);
- });
- this.refresh.next();
+ this._filters = entries;
}
- initCount(filters: TaskSummaryFilters) {
- this.#setId(filters);
- this.loadFromCache();
+ ngOnInit(): void {
+ this.initId();
}
- loadFromCache() {
- if (this.id) {
- this.statusesCount.set(this.cacheService.getStatuses(this.id) ?? []);
- }
+ initId() {
+ this.#setId(this.filters);
}
- saveData(data: StatusCount[] | undefined) {
- if (this.id && data) {
- this.cacheService.saveStatuses(this.id, data);
- }
+ initRefresh() {
+ this._refresh$.pipe(
+ switchMap(() => this.tasksGrpcService.countByStatus$(this.filters)),
+ ).subscribe(response => {
+ this.loading = false;
+ this.statusesCount.set(response.status ?? []);
+ });
}
#setId(filter: TaskSummaryFilters) {
diff --git a/src/app/components/inspect-list.component.html b/src/app/components/inspect-list.component.html
new file mode 100644
index 000000000..ad81f9c4a
--- /dev/null
+++ b/src/app/components/inspect-list.component.html
@@ -0,0 +1,26 @@
+
+
+ @if (list.length === 0) {
+ No data
+ } @else {
+ @for(item of list; track item) {
+
+ @if(redirectLink) {
+
+ } @else {
+ {{item}}
+ }
+
+ @if(!$last) {
+
+ }
+ }
+ }
+
\ No newline at end of file
diff --git a/src/app/components/inspect-list.component.spec.ts b/src/app/components/inspect-list.component.spec.ts
new file mode 100644
index 000000000..762e822c9
--- /dev/null
+++ b/src/app/components/inspect-list.component.spec.ts
@@ -0,0 +1,63 @@
+import { TestBed } from '@angular/core/testing';
+import { InspectListComponent } from './inspect-list.component';
+
+describe('InspectListComponent', () => {
+ let component: InspectListComponent;
+ const list = ['item1', 'item2', 'item3'];
+ const queryParams = '0-root-1-0';
+ const finalParams = {
+ '0-root-1-0': list[0],
+ '1-root-1-0': list[1],
+ '2-root-1-0': list[2]
+ };
+
+ beforeEach(() => {
+ component = TestBed.configureTestingModule({
+ providers: [
+ InspectListComponent
+ ]
+ }).inject(InspectListComponent);
+ component.list = list;
+ component.queryParams = queryParams;
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('setting list', () => {
+ it('should set list', () => {
+ expect(component.list).toEqual(list);
+ });
+
+ it('should not update list if it is undefined', () => {
+ component.list = undefined;
+ expect(component.list).toEqual(list);
+ });
+
+ it('should update list if a new one is provided', () => {
+ component.list = [];
+ expect(component.list).toEqual([]);
+ });
+ });
+
+ describe('setting queryParams', () => {
+ it('should create a correct Params object', () => {
+ expect(component.queryParams).toEqual(finalParams);
+ });
+
+ it('should not update queryParams if it is undefined', () => {
+ component.queryParams = undefined;
+ expect(component.queryParams).toEqual(finalParams);
+ });
+
+ it('should update queryParams if a new one is provided', () => {
+ component.queryParams = '0-options-2-0';
+ expect(component.queryParams).toEqual({
+ '0-options-2-0': list[0],
+ '1-options-2-0': list[1],
+ '2-options-2-0': list[2]
+ });
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspect-list.component.ts b/src/app/components/inspect-list.component.ts
new file mode 100644
index 000000000..dcc6c4513
--- /dev/null
+++ b/src/app/components/inspect-list.component.ts
@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDivider } from '@angular/material/divider';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { Params, RouterModule } from '@angular/router';
+
+/**
+ * The inspect list component provide a way to display lists inside a Mat-Card.
+ * @property { string[] | undefined } list - Displayed list
+ * @property { string | undefined } redirectLink - Where lists items redirect
+ */
+@Component({
+ selector: 'app-inspect-list',
+ templateUrl: 'inspect-list.component.html',
+ standalone: true,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [
+ MatToolbarModule,
+ MatCardModule,
+ MatButtonModule,
+ RouterModule,
+ MatDivider,
+ ],
+ styles: [`
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .no-data {
+ text-align: center;
+ margin: 1rem;
+ font-style: italic;
+ }
+
+ button {
+ width: fit-content;
+ }
+
+ .item {
+ width: 100%;
+ margin: 0.5rem;
+ }
+
+ mat-divider {
+ margin-right: 0.5rem;
+ }
+
+ mat-toolbar {
+ padding: 1rem;
+ }
+ `]
+})
+export class InspectListComponent {
+ private _list: string[] = [];
+ private _queryParams: Params;
+
+ @Input({ required: true }) set list(entries: string[] | undefined) {
+ if (entries) {
+ this._list = entries;
+ }
+ }
+
+ @Input({ required: false }) set queryParams(entry: string | undefined) {
+ if (entry && this.list.length !== 0) {
+ this._queryParams = {};
+ const paramsKey = entry.slice(1);
+ this.list.forEach((value, index) => {
+ const key = `${index}${paramsKey}`;
+ this._queryParams[key] = value;
+ });
+ }
+ }
+
+ @Input({ required: false }) redirectLink: string | undefined;
+
+ get list(): string[] {
+ return this._list;
+ }
+
+ get queryParams(): Params {
+ return this._queryParams;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/inspection-header.component.html b/src/app/components/inspection-header.component.html
new file mode 100644
index 000000000..20ea31694
--- /dev/null
+++ b/src/app/components/inspection-header.component.html
@@ -0,0 +1,12 @@
+
+
+ {{ id }}
+
+ @if(status) {
+
+ {{ status }}
+
+ }
+
\ No newline at end of file
diff --git a/src/app/components/inspection-header.component.spec.ts b/src/app/components/inspection-header.component.spec.ts
new file mode 100644
index 000000000..7b666c4e8
--- /dev/null
+++ b/src/app/components/inspection-header.component.spec.ts
@@ -0,0 +1,76 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { TestBed } from '@angular/core/testing';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+import { InspectionHeaderComponent } from './inspection-header.component';
+
+describe('InspectionHeaderComponent', () => {
+ let component: InspectionHeaderComponent;
+
+ const id = 'id';
+
+ const mockNotificationService = {
+ success: jest.fn()
+ };
+
+ const mockClipboard = {
+ copy: jest.fn()
+ };
+
+ beforeEach(() => {
+ component = TestBed.configureTestingModule({
+ providers: [
+ InspectionHeaderComponent,
+ IconsService,
+ { provide: NotificationService, useValue: mockNotificationService },
+ { provide: Clipboard, useValue: mockClipboard }
+ ]
+ }).inject(InspectionHeaderComponent);
+ component.id = id;
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('id', () => {
+ it('should have set "id"', () => {
+ expect(component.id).toEqual(id);
+ });
+
+ it('should not change "id" if a null value is provided', () => {
+ component.id = null;
+ expect(component.id).toEqual(id);
+ });
+ });
+
+ it('should set "status"', () => {
+ const status = 'Completed';
+ component.status = status;
+ expect(component.status).toEqual(status);
+ });
+
+ it('should set "sharableURL"', () => {
+ const url = 'https://localhost';
+ component.sharableURL = url;
+ expect(component.sharableURL).toEqual(url);
+ });
+
+ it('should get icons', () => {
+ expect(component.getIcon('share')).toBeDefined();
+ });
+
+ describe('onCopyId', () => {
+ beforeEach(() => {
+ component.onCopyId();
+ });
+
+ it('should call copyService "copy"', () => {
+ expect(mockClipboard.copy).toHaveBeenCalledWith(id);
+ });
+
+ it('should call notificationService "success"', () => {
+ expect(mockNotificationService.success).toHaveBeenCalled();
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspection-header.component.ts b/src/app/components/inspection-header.component.ts
new file mode 100644
index 000000000..be7433c4d
--- /dev/null
+++ b/src/app/components/inspection-header.component.ts
@@ -0,0 +1,64 @@
+import { CdkCopyToClipboard, Clipboard } from '@angular/cdk/clipboard';
+import { Component, Input, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+import { PageHeaderComponent } from './page-header.component';
+
+@Component({
+ selector: 'app-inspection-header',
+ templateUrl: 'inspection-header.component.html',
+ standalone: true,
+ imports: [
+ MatToolbarModule,
+ PageHeaderComponent,
+ MatButtonModule,
+ MatIconModule,
+ CdkCopyToClipboard,
+ MatTooltipModule,
+ MatChipsModule,
+ ],
+ providers: [
+ IconsService,
+ Clipboard,
+ NotificationService,
+ ],
+ styles: [`
+ #status {
+ font-size: 18px;
+ }
+ `]
+})
+export class InspectionHeaderComponent {
+ private readonly iconsService = inject(IconsService);
+ private readonly copyService = inject(Clipboard);
+ private readonly notificationService = inject(NotificationService);
+
+ private _id = '';
+
+ @Input({ required: true }) set id(entry: string | null) {
+ if (entry) {
+ this._id = entry;
+ }
+ }
+
+ @Input({ required: false }) status: string | undefined;
+ @Input({ required: false }) sharableURL: string | null;
+
+ get id() {
+ return this._id;
+ }
+
+ getIcon(name: string) {
+ return this.iconsService.getIcon(name);
+ }
+
+ onCopyId() {
+ this.copyService.copy(this._id);
+ this.notificationService.success($localize`Id copy to Clipboard`);
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/inspection-toolbar.component.html b/src/app/components/inspection-toolbar.component.html
new file mode 100644
index 000000000..9fad6bf42
--- /dev/null
+++ b/src/app/components/inspection-toolbar.component.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/inspection-toolbar.component.spec.ts b/src/app/components/inspection-toolbar.component.spec.ts
new file mode 100644
index 000000000..39f981baf
--- /dev/null
+++ b/src/app/components/inspection-toolbar.component.spec.ts
@@ -0,0 +1,28 @@
+import { TestBed } from '@angular/core/testing';
+import { IconsService } from '@services/icons.service';
+import { InspectionToolbarComponent } from './inspection-toolbar.component';
+
+describe('InspectionToolbar', () => {
+ let component: InspectionToolbarComponent;
+
+ beforeEach(() => {
+ component = TestBed.configureTestingModule({
+ providers: [
+ InspectionToolbarComponent,
+ IconsService
+ ]
+ }).inject(InspectionToolbarComponent);
+ });
+
+ it('should run', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should have a defined refresh', () => {
+ expect(component.refresh).toBeDefined();
+ });
+
+ it('should have a defined refreshIcon', () => {
+ expect(component.refreshIcon).toBeDefined();
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspection-toolbar.component.ts b/src/app/components/inspection-toolbar.component.ts
new file mode 100644
index 000000000..e2df094c4
--- /dev/null
+++ b/src/app/components/inspection-toolbar.component.ts
@@ -0,0 +1,45 @@
+import { Component, Output, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { Subject } from 'rxjs';
+import { IconsService } from '@services/icons.service';
+
+@Component({
+ selector: 'app-inspection-toolbar',
+ templateUrl: 'inspection-toolbar.component.html',
+ standalone: true,
+ imports: [
+ MatToolbarModule,
+ MatIconModule,
+ MatButtonModule,
+ ],
+ providers: [
+ IconsService
+ ],
+ styles: [`
+ section {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%
+ }
+
+ mat-toolbar {
+ justify-content: center;
+ gap: 1rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+
+ mat-toolbar-row {
+ height: fit-content;
+ }
+ `]
+})
+export class InspectionToolbarComponent {
+ private readonly iconsService = inject(IconsService);
+ readonly refreshIcon = this.iconsService.getIcon('refresh');
+
+ @Output() refresh = new Subject();
+}
\ No newline at end of file
diff --git a/src/app/components/inspection/field-content.component.html b/src/app/components/inspection/field-content.component.html
new file mode 100644
index 000000000..15545d03f
--- /dev/null
+++ b/src/app/components/inspection/field-content.component.html
@@ -0,0 +1,45 @@
+
+ {{ key | pretty }}:
+ @if (type !== 'array') {
+
+ @switch (type) {
+ @case ('date') {
+ {{ date | date: 'yyyy-MM-dd HH:mm:ss' | emptyCell }}
+ }
+ @case('duration') {
+ {{ duration | duration | emptyCell }}
+ }
+ @case('object') {
+ {{ object | json }}
+ }
+ @default {
+ {{ value | emptyCell }}
+ }
+ }
+ @if (value) {
+
+ }
+ @if (field.link && value) {
+
+ }
+
+ } @else {
+ @if (array.length !== 0) {
+
+ @for (item of array; track $index) {
+ -
+
+ {{ item | emptyCell }}
+
+ @if (field.link) {
+
+ }
+
+
+ }
+
+ } @else {
+ -
+ }
+ }
+
\ No newline at end of file
diff --git a/src/app/components/inspection/field-content.component.spec.ts b/src/app/components/inspection/field-content.component.spec.ts
new file mode 100644
index 000000000..b9f50d18b
--- /dev/null
+++ b/src/app/components/inspection/field-content.component.spec.ts
@@ -0,0 +1,264 @@
+import { TaskStatus } from '@aneoconsultingfr/armonik.api.angular';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { TestBed } from '@angular/core/testing';
+import { Duration, Timestamp } from '@ngx-grpc/well-known-types';
+import { TaskOptions, TaskRaw } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { Status } from '@app/types/data';
+import { DurationPipe } from '@pipes/duration.pipe';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+import { FieldContentComponent } from './field-content.component';
+
+describe('FieldContentComponent', () => {
+ let component: FieldContentComponent;
+
+ const mockNotificationService = {
+ success: jest.fn(),
+ };
+
+ const mockClipboard = {
+ copy: jest.fn(),
+ };
+
+ const statuses = {
+ [TaskStatus.TASK_STATUS_COMPLETED]: 'Completed',
+ [TaskStatus.TASK_STATUS_CANCELLING]: 'Cancelling',
+ } as Record;
+
+ const data: TaskRaw = {
+ id: 'taskId',
+ status: TaskStatus.TASK_STATUS_CANCELLING,
+ createdAt: {
+ seconds: '13343490',
+ nanos: 0
+ },
+ creationToEndDuration: {
+ seconds: '1230',
+ nanos: 0
+ },
+ parentTaskIds: [],
+ options: {
+ applicationName: 'string',
+ }
+ } as unknown as TaskRaw;
+
+ const field: Field = {
+ key: 'id',
+ };
+
+ const statusField: Field = {
+ key: 'status',
+ type: 'status',
+ };
+
+ const dateField: Field = {
+ key: 'createdAt',
+ type: 'date',
+ };
+
+ const emptyDateField: Field = {
+ key: 'acquiredAt',
+ type: 'date'
+ };
+
+ const durationField: Field = {
+ key: 'creationToEndDuration',
+ type: 'duration',
+ };
+
+ const objectField: Field = {
+ key: 'options',
+ type: 'object'
+ };
+
+ const arrayField: Field = {
+ key: 'parentTaskIds'
+ };
+
+ beforeEach(() => {
+ component = TestBed.configureTestingModule({
+ providers: [
+ { provide: NotificationService, useValue: mockNotificationService },
+ { provide: Clipboard, useValue: mockClipboard },
+ IconsService,
+ FieldContentComponent
+ ]
+ }).inject(FieldContentComponent);
+ component.statuses = statuses;
+ });
+
+ it('should run', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('Basics', () => {
+ beforeEach(() => {
+ component.field = field;
+ component.data = data;
+ });
+
+ it('should get the value', () => {
+ expect(component.value).toEqual(data.id);
+ });
+
+ it('should get the key', () => {
+ expect(component.key).toEqual(field.key);
+ });
+
+ it('should copy the raw value', () => {
+ component.copy();
+ expect(mockClipboard.copy).toHaveBeenCalledWith(data.id);
+ });
+
+ it('should notify on copy', () => {
+ component.copy();
+ expect(mockNotificationService.success).toHaveBeenCalled();
+ });
+ });
+
+ describe('Statuses', () => {
+ beforeEach(() => {
+ component.field = statusField;
+ component.data = data;
+ });
+
+ it('should get the status', () => {
+ expect(component.value).toEqual(statuses[data.status]);
+ });
+
+ it('should get the key', () => {
+ expect(component.key).toEqual(statusField.key);
+ });
+
+ it('should copy the status', () => {
+ component.copy();
+ expect(mockClipboard.copy).toHaveBeenCalledWith(statuses[data.status]);
+ });
+
+ it('should notify on copy', () => {
+ component.copy();
+ expect(mockNotificationService.success).toHaveBeenCalled();
+ });
+ });
+
+ describe('Dates', () => {
+ beforeEach(() => {
+ component.field = dateField;
+ component.data = data;
+ });
+
+ it('should get the value as a date', () => {
+ expect(component.date).toEqual((new Timestamp(data.createdAt)).toDate());
+ });
+
+ it('should get the key', () => {
+ expect(component.key).toEqual(dateField.key);
+ });
+
+ it('should copy the date', () => {
+ component.copy();
+ expect(mockClipboard.copy).toHaveBeenCalledWith((new Timestamp(data.createdAt)).toDate().toLocaleString());
+ });
+
+ it('should notify on copy', () => {
+ component.copy();
+ expect(mockNotificationService.success).toHaveBeenCalled();
+ });
+
+ it('should set undefined is the date is undefined too', () => {
+ component.field = emptyDateField;
+ component.data = data;
+ expect(component.date).toBeUndefined();
+ });
+ });
+
+ describe('Durations', () => {
+ beforeEach(() => {
+ component.field = durationField;
+ component.data = data;
+ });
+
+ it('should get the value as a duration', () => {
+ expect(component.value).toEqual(data.creationToEndDuration);
+ });
+
+ it('should get the key', () => {
+ expect(component.key).toEqual(durationField.key);
+ });
+
+ it('should copy the duration', () => {
+ component.copy();
+ const durationPipe = new DurationPipe();
+ expect(mockClipboard.copy).toHaveBeenCalledWith(durationPipe.transform(data.creationToEndDuration as Duration));
+ });
+
+ it('should notify on copy', () => {
+ component.copy();
+ expect(mockNotificationService.success).toHaveBeenCalled();
+ });
+
+ it('should not copy if there is no duration', () => {
+ component.data = {} as TaskRaw;
+ component.copy();
+ expect(mockClipboard.copy).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Objects', () => {
+ beforeEach(() => {
+ component.field = objectField;
+ component.data = data;
+ });
+
+ it('should get the value as an object', () => {
+ expect(component.object).toEqual(data.options);
+ });
+
+ it('should get the key', () => {
+ expect(component.key).toEqual(objectField.key);
+ });
+ });
+
+ describe('guessType', () => {
+ it('should guess a date', () => {
+ component.field = { key: 'acquiredAt' };
+ expect(component.type).toEqual('date');
+ });
+
+ it('should guess a duration', () => {
+ component.field = { key: 'creationToEndDuration' };
+ expect(component.type).toEqual('duration');
+ });
+
+ it('should guess an object with "options"', () => {
+ component.field = { key: 'options' };
+ expect(component.type).toEqual('object');
+ });
+
+ it('should guess an object with "options.options"', () => {
+ component.field = { key: 'options' };
+ expect(component.type).toEqual('object');
+ });
+
+ it('should return raw if it cannot guess anything', () => {
+ component.field = { key: 'id' };
+ expect(component.type).toEqual('raw');
+ });
+ });
+
+ describe('array', () => {
+ beforeEach(() => {
+ component.field = arrayField;
+ component.data = data;
+ });
+
+ it('should set the type to "array" in case of an array', () => {
+ expect(component.type).toEqual('array');
+ });
+
+ it('should get the array', () => {
+ expect(component.array).toEqual(data.parentTaskIds);
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspection/field-content.component.ts b/src/app/components/inspection/field-content.component.ts
new file mode 100644
index 000000000..9ee7950db
--- /dev/null
+++ b/src/app/components/inspection/field-content.component.ts
@@ -0,0 +1,174 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { DatePipe, JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { Duration, Timestamp } from '@ngx-grpc/well-known-types';
+import { TaskOptions } from '@app/tasks/types';
+import { ColumnType, Field } from '@app/types/column.type';
+import { DataRaw, Status } from '@app/types/data';
+import { DurationPipe } from '@pipes/duration.pipe';
+import { EmptyCellPipe } from '@pipes/empty-cell.pipe';
+import { PrettyPipe } from '@pipes/pretty.pipe';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+
+@Component({
+ selector: 'app-field-content',
+ templateUrl: 'field-content.component.html',
+ standalone: true,
+ imports: [
+ MatChipsModule,
+ DatePipe,
+ DurationPipe,
+ EmptyCellPipe,
+ JsonPipe,
+ MatButtonModule,
+ MatIconModule,
+ RouterLink,
+ MatTooltipModule,
+ PrettyPipe,
+ ],
+ providers: [
+ NotificationService,
+ IconsService
+ ],
+ styleUrl: '../../../inspections.css',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FieldContentComponent {
+ private readonly clipboard = inject(Clipboard);
+ private readonly notificationService = inject(NotificationService);
+ private readonly iconsService = inject(IconsService);
+
+ type: ColumnType | undefined;
+ private _field: Field | Field;
+ private _value: unknown;
+
+ readonly viewIcon = this.iconsService.getIcon('view');
+ readonly copyIcon = this.iconsService.getIcon('copy');
+
+ @Input({ required: true }) set field(entry: Field | Field) {
+ this._field = entry;
+ if (entry.type) {
+ this.type = entry.type;
+ } else {
+ this.type = this.guessType(entry.key);
+ }
+ }
+
+ @Input({ required: true }) set data(entry: T | NonNullable | null) {
+ if (entry) {
+ switch (this.type) {
+ case 'status': {
+ this._value = this.statuses[entry[this.field.key as keyof (T |O)] as S];
+ break;
+ }
+ case 'date': {
+ const value = entry[this.field.key as keyof (T |O)] as Partial | undefined;
+ if (value) {
+ const date = new Timestamp(value);
+ this._value = date.toDate();
+ } else {
+ this._value = undefined;
+ }
+ break;
+ }
+ default: {
+ this._value = entry[this.field.key as keyof (T |O)];
+ this.checkIfArray();
+ }
+ }
+ }
+ }
+
+ @Input({ required: false }) statuses: Record;
+
+ get key(): string {
+ return this._field.key.toString();
+ }
+
+ get field(): Field | Field {
+ return this._field;
+ }
+
+ /**
+ * Can be a string, number, status label
+ */
+ get value(): string {
+ return this._value as string;
+ }
+
+ get duration(): Duration {
+ return this._value as Duration;
+ }
+
+ get date(): Date {
+ return this._value as Date;
+ }
+
+ get object(): object {
+ return this._value as object;
+ }
+
+ get array(): Array {
+ return this._value as Array;
+ }
+
+ /**
+ * When the type is not provided by the `field` object, for display purpose, the component has to find the correct type.
+ * @param value - key of the field.
+ * @returns The guessed type of the field.
+ */
+ private guessType(value: keyof T | keyof O): ColumnType {
+ const key = value.toString().toLowerCase().replace('_', '');
+ if (key.endsWith('at')) {
+ return 'date';
+ } else if (key.includes('duration') || key.includes('ttl')) {
+ return 'duration';
+ } else if (key === 'options' || key === 'options.options' || key === 'output') {
+ return 'object';
+ } else {
+ return 'raw';
+ }
+ }
+
+ /**
+ * Check if the received data is an Array.
+ * If `true`, then the type is set to `array`.
+ * If `false`, the provided type does not change.
+ */
+ private checkIfArray() {
+ if (this._value instanceof Array) {
+ this.type = 'array';
+ }
+ }
+
+ copy() {
+ switch (this.field.type) {
+ case 'date': {
+ this.clipboardCopy(this.date.toLocaleString());
+ break;
+ }
+ case 'duration': {
+ const durationPipe = new DurationPipe();
+ const durationString = durationPipe.transform(this.duration);
+ if (durationString) {
+ this.clipboardCopy(durationString);
+ }
+ break;
+ }
+ default: {
+ this.clipboardCopy(this.value);
+ }
+ }
+ }
+
+ clipboardCopy(value: string) {
+ this.clipboard.copy(value);
+ this.notificationService.success('Value copied');
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-card.component.html b/src/app/components/inspection/inspection-card.component.html
new file mode 100644
index 000000000..714b1c4d0
--- /dev/null
+++ b/src/app/components/inspection/inspection-card.component.html
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-card.component.spec.ts b/src/app/components/inspection/inspection-card.component.spec.ts
new file mode 100644
index 000000000..01e9b4173
--- /dev/null
+++ b/src/app/components/inspection/inspection-card.component.spec.ts
@@ -0,0 +1,81 @@
+import { TaskStatus } from '@aneoconsultingfr/armonik.api.angular';
+import { TaskOptions, TaskRaw } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { Status } from '@app/types/data';
+import { InspectionCardComponent } from './inspection-card.component';
+
+describe('InspectionCardComponent', () => {
+ const component = new InspectionCardComponent();
+
+ const data: TaskRaw = {
+ id: 'taskId',
+ options: {
+ applicationName: 'string',
+ }
+ } as TaskRaw;
+
+ const fields: Field[] = [
+ {
+ key: 'id',
+ type: 'link',
+ link: 'tasks'
+ },
+ {
+ key: 'sessionId',
+ type: 'link',
+ link: 'sessions'
+ },
+ {
+ key: 'options',
+ type: 'object'
+ },
+ {
+ key: 'createdAt',
+ type: 'date'
+ }
+ ];
+
+ const optionsFields: Field[] = [
+ {
+ key: 'applicationName',
+ },
+ {
+ key: 'options',
+ type: 'object'
+ }
+ ];
+
+ const statuses = {
+ [TaskStatus.TASK_STATUS_COMPLETED]: 'Completed',
+ [TaskStatus.TASK_STATUS_CANCELLING]: 'Cancelling',
+ } as Record;
+
+ beforeEach(() => {
+ component.fields = fields;
+ component.optionsFields = optionsFields;
+ component.data = data;
+ component.statuses = statuses;
+ });
+
+ it('should run', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('initialisation', () => {
+ it('should init fields', () => {
+ expect(component.fields).toEqual(fields);
+ });
+
+ it('should init options fields', () => {
+ expect(component.optionsFields).toEqual(optionsFields);
+ });
+
+ it('should init data', () => {
+ expect(component.data).toEqual(data);
+ });
+
+ it('should init statuses', () => {
+ expect(component.statuses).toEqual(statuses);
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-card.component.ts b/src/app/components/inspection/inspection-card.component.ts
new file mode 100644
index 000000000..ab0981e43
--- /dev/null
+++ b/src/app/components/inspection/inspection-card.component.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { TaskOptions } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { DataRaw, Status } from '@app/types/data';
+import { InspectionComponent } from './inspection.component';
+
+@Component({
+ selector: 'app-inspection-card',
+ templateUrl: 'inspection-card.component.html',
+ standalone: true,
+ imports: [
+ MatCardModule,
+ InspectionComponent
+ ],
+ styleUrl: '../../../inspections.css',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InspectionCardComponent {
+ @Input({ required: false }) fields: Field[];
+ @Input({ required: false }) optionsFields: Field[];
+ @Input({ required: false }) statuses: Record;
+ @Input({ required: true }) data: T | null;
+}
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-list-grid.component.html b/src/app/components/inspection/inspection-list-grid.component.html
new file mode 100644
index 000000000..2c70e623a
--- /dev/null
+++ b/src/app/components/inspection/inspection-list-grid.component.html
@@ -0,0 +1,7 @@
+
+ @for (array of arrays; track array.key) {
+
+ {{ array.key | pretty }}
+
+ }
+
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-list-grid.component.spec.ts b/src/app/components/inspection/inspection-list-grid.component.spec.ts
new file mode 100644
index 000000000..c6a90e1a2
--- /dev/null
+++ b/src/app/components/inspection/inspection-list-grid.component.spec.ts
@@ -0,0 +1,47 @@
+import { TaskRaw } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { InspectionListGridComponent } from './inspection-list-grid.component';
+
+describe('InspectionListGridComponent', () => {
+ const component = new InspectionListGridComponent();
+
+ const data: TaskRaw = {
+ id: 'taskId',
+ dataDependencies: ['1', '2', '3'],
+ expectedOutputIds: ['4', '5', '6']
+ } as TaskRaw;
+
+ const arrays: Field[] = [
+ {
+ key: 'dataDependencies'
+ },
+ {
+ key: 'expectedOutputIds'
+ }
+ ];
+
+ beforeEach(() => {
+ component.data = data;
+ component.arrays = arrays;
+ });
+
+ it('should run', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('initialisation', () => {
+ it('should set data', () => {
+ expect(component.data).toEqual(data);
+ });
+
+ it('should set arrays', () => {
+ expect(component.arrays).toEqual(arrays);
+ });
+ });
+
+ describe('get Array', () => {
+ it('should return the correct array', () => {
+ expect(component.getArray(arrays[0].key)).toEqual(data.dataDependencies);
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-list-grid.component.ts b/src/app/components/inspection/inspection-list-grid.component.ts
new file mode 100644
index 000000000..f79dc52da
--- /dev/null
+++ b/src/app/components/inspection/inspection-list-grid.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Field } from '@app/types/column.type';
+import { DataRaw } from '@app/types/data';
+import { InspectListComponent } from '@components/inspect-list.component';
+import { PrettyPipe } from '@pipes/pretty.pipe';
+
+@Component({
+ selector: 'app-inspection-list-grid',
+ templateUrl: 'inspection-list-grid.component.html',
+ standalone: true,
+ styleUrl: '../../../inspections.css',
+ imports: [
+ InspectListComponent,
+ PrettyPipe
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InspectionListGridComponent {
+ @Input({ required: true }) data: T;
+ @Input({ required: true }) arrays: Field[];
+
+ getArray(key: keyof T) {
+ return this.data[key] as string[];
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-object.component.html b/src/app/components/inspection/inspection-object.component.html
new file mode 100644
index 000000000..fa42e4c7e
--- /dev/null
+++ b/src/app/components/inspection/inspection-object.component.html
@@ -0,0 +1,20 @@
+@if(data && !isEmpty) {
+
+ @for (field of fields; track field.key) {
+ @if (field.type === 'object') {
+
+
+
+ {{ field.key | pretty }}
+
+
+
+
+ } @else {
+
+ }
+ }
+
+} @else {
+ No data
+}
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-object.component.spec.ts b/src/app/components/inspection/inspection-object.component.spec.ts
new file mode 100644
index 000000000..5db1319bd
--- /dev/null
+++ b/src/app/components/inspection/inspection-object.component.spec.ts
@@ -0,0 +1,75 @@
+import { TaskStatus } from '@aneoconsultingfr/armonik.api.angular';
+import { TaskRaw } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { InspectionObjectComponent } from './inspection-object.component';
+
+describe('InspectionObjectComponent', () => {
+ const component = new InspectionObjectComponent();
+
+ const data: TaskRaw = {
+ id: 'taskId',
+ options: {
+ applicationName: 'string',
+ }
+ } as TaskRaw;
+
+ const fields: Field[] = [
+ {
+ key: 'id',
+ type: 'link',
+ link: 'tasks'
+ },
+ {
+ key: 'sessionId',
+ type: 'link',
+ link: 'sessions'
+ },
+ {
+ key: 'options',
+ type: 'object'
+ },
+ {
+ key: 'createdAt',
+ type: 'date'
+ }
+ ];
+
+ const statuses: Record = {
+ 0: 'Undefined',
+ 1: 'completed'
+ } as Record;
+
+ beforeEach(() => {
+ component.data = data;
+ component.fields = fields;
+ component.statuses = statuses;
+ });
+
+ it('should run', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('initialisation', () => {
+ it('should set data', () => {
+ expect(component.data).toEqual(data);
+ });
+
+ it('should set fields', () => {
+ expect(component.fields).toEqual(fields);
+ });
+
+ it('should set statuses', () => {
+ expect(component.statuses).toEqual(statuses);
+ });
+
+ it('should set data keys as fields if none are provided', () => {
+ component.fields = [];
+ component.data = data;
+ expect(component.fields).toEqual([{ key: 'id' }, { key: 'options' }]);
+ });
+ });
+
+ it('should get an object', () => {
+ expect(component.getObject(fields[2])).toEqual(data.options);
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection-object.component.ts b/src/app/components/inspection/inspection-object.component.ts
new file mode 100644
index 000000000..8fc59e2bb
--- /dev/null
+++ b/src/app/components/inspection/inspection-object.component.ts
@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { TaskOptions } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { DataRaw, Status } from '@app/types/data';
+import { PrettyPipe } from '@pipes/pretty.pipe';
+import { FieldContentComponent } from './field-content.component';
+
+@Component({
+ selector: 'app-inspection-object',
+ templateUrl: 'inspection-object.component.html',
+ standalone: true,
+ imports: [
+ MatExpansionModule,
+ PrettyPipe,
+ FieldContentComponent,
+ ],
+ styleUrl: '../../../inspections.css',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InspectionObjectComponent {
+ private _data: T | NonNullable | null;
+ private _fields: Field[] | Field[] = [];
+
+ isEmpty: boolean = true;
+
+ @Input({ required: false }) set fields(entries: Field[] | Field[] | undefined) {
+ if (entries) {
+ this._fields = entries;
+ }
+ }
+
+ @Input({ required: true }) set data(entry: T | NonNullable | null) {
+ this._data = entry;
+ if (entry) {
+ this.isEmpty = Object.keys(entry).length === 0;
+ }
+ if (this.fields?.length === 0 && this.data) {
+ this.setFieldsFromData(this.data);
+ }
+ }
+
+ @Input({ required: false }) statuses: Record;
+
+ get data() {
+ return this._data;
+ }
+
+ get fields() {
+ return this._fields;
+ }
+
+ getObject(field: Field | Field): T {
+ return (this.data as T | NonNullable)[field.key as keyof (T | O)] as T;
+ }
+
+ private setFieldsFromData(data: T | NonNullable) {
+ this.fields = Object.keys(data).map((d) => {
+ return {
+ key: d as keyof (T | O)
+ };
+ }).toSorted((a, b) => a.key.toString().localeCompare(b.key.toString()));
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection.component.html b/src/app/components/inspection/inspection.component.html
new file mode 100644
index 000000000..b42f72c44
--- /dev/null
+++ b/src/app/components/inspection/inspection.component.html
@@ -0,0 +1,11 @@
+
+@if(optionsFields) {
+
+
+
+ Options
+
+
+
+
+}
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection.component.spec.ts b/src/app/components/inspection/inspection.component.spec.ts
new file mode 100644
index 000000000..a6c6e3c2a
--- /dev/null
+++ b/src/app/components/inspection/inspection.component.spec.ts
@@ -0,0 +1,80 @@
+import { TaskStatus } from '@aneoconsultingfr/armonik.api.angular';
+import { TaskOptions, TaskRaw } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { InspectionComponent } from './inspection.component';
+
+describe('InspectionComponent', () => {
+ const component = new InspectionComponent();
+
+ const data: TaskRaw = {
+ id: 'taskId',
+ options: {
+ applicationName: 'string',
+ }
+ } as TaskRaw;
+
+ const optionsFields: Field[] = [
+ {
+ key: 'applicationName',
+ },
+ {
+ key: 'options',
+ type: 'object'
+ }
+ ];
+
+ const fields: Field[] = [
+ {
+ key: 'id',
+ type: 'link',
+ link: 'tasks'
+ },
+ {
+ key: 'sessionId',
+ type: 'link',
+ link: 'sessions'
+ },
+ {
+ key: 'options',
+ type: 'object'
+ },
+ {
+ key: 'createdAt',
+ type: 'date'
+ }
+ ];
+
+ const statuses: Record = {
+ 0: 'Undefined',
+ 1: 'completed'
+ } as Record;
+
+ beforeEach(() => {
+ component.fields = fields;
+ component.optionsFields = optionsFields;
+ component.data = data;
+ component.statuses = statuses;
+ });
+
+ describe('initialisation', () => {
+ it('should set fields without options fields', () => {
+ expect(component.fields).toEqual(fields);
+ });
+
+ it('should set optionsFields', () => {
+ expect(component.optionsFields).toEqual(optionsFields);
+ });
+
+ it('should set data', () => {
+ expect(component.data).toEqual(data);
+ });
+
+ it('should set "options" object', () => {
+ expect(component.options).toEqual(data.options);
+ });
+
+ it('should set statuses', () => {
+ expect(component.statuses).toEqual(statuses);
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/inspection/inspection.component.ts b/src/app/components/inspection/inspection.component.ts
new file mode 100644
index 000000000..82820482a
--- /dev/null
+++ b/src/app/components/inspection/inspection.component.ts
@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { TaskOptions } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { DataRaw, Status } from '@app/types/data';
+import { InspectionObjectComponent } from './inspection-object.component';
+
+@Component({
+ selector: 'app-inspection',
+ templateUrl: 'inspection.component.html',
+ standalone: true,
+ imports: [
+ InspectionObjectComponent,
+ MatExpansionModule,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ styleUrl: '../../../inspections.css',
+})
+export class InspectionComponent {
+ private _data: T = {} as T;
+ private _options: NonNullable = {} as NonNullable;
+
+ /**
+ * Displayed fields and their types.
+ * If none are provided, every field will be displayed as a "string".
+ */
+ @Input({ required: false }) fields: Field[] | undefined;
+
+ @Input({ required: false }) optionsFields: Field[] | undefined;
+
+ @Input({ required: true }) set data(entry: T | null) {
+ if (entry) {
+ this._data = entry;
+ if (entry['options' as keyof (T | O)]) {
+ this._options = entry['options' as keyof (T | O)] as NonNullable;
+ }
+ }
+ }
+
+ /**
+ * Required to display a status label.
+ */
+ @Input({ required: false }) statuses: Record;
+
+ get data(): T {
+ return this._data;
+ }
+
+ get options() {
+ return this._options;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/navigation/external-services.component.html b/src/app/components/navigation/external-services.component.html
new file mode 100644
index 000000000..692e92ebe
--- /dev/null
+++ b/src/app/components/navigation/external-services.component.html
@@ -0,0 +1,19 @@
+
+
+ @if (!hasService) {
+
+ } @else {
+ @for(service of externalServices; track service.name) {
+
+ }
+
+ }
+
+
\ No newline at end of file
diff --git a/src/app/components/navigation/external-services.component.spec.ts b/src/app/components/navigation/external-services.component.spec.ts
new file mode 100644
index 000000000..cc35f1459
--- /dev/null
+++ b/src/app/components/navigation/external-services.component.spec.ts
@@ -0,0 +1,103 @@
+import { URL } from 'url';
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { of } from 'rxjs';
+import { ExternalService } from '@app/types/external-service';
+import { IconsService } from '@services/icons.service';
+import { NavigationService } from '@services/navigation.service';
+import { ExternalServicesComponent } from './external-services.component';
+
+describe('ExternalServicesComponent', () => {
+ let component: ExternalServicesComponent;
+
+ const savedServices: ExternalService[] = [{name: 'grafana', url: 'https://grafana'}, {name: 'seq', url: 'https://seq'}];
+ const mockNavigationService = {
+ saveExternalServices: jest.fn(),
+ restoreExternalServices: jest.fn(() => savedServices)
+ };
+
+ let dialogResult: ExternalService[];
+ const mockMatDialog = {
+ open: () => {
+ return {
+ afterClosed: () => {
+ return of(dialogResult);
+ }
+ };
+ }
+ };
+
+ beforeEach(() => {
+ component = TestBed.configureTestingModule({
+ providers: [
+ ExternalServicesComponent,
+ IconsService,
+ { provide: NavigationService, useValue: mockNavigationService },
+ { provide: MatDialog, useValue: mockMatDialog }
+ ]
+ }).inject(ExternalServicesComponent);
+ component.ngOnInit();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('initialisation', () => {
+ it('should load saved services', () => {
+ expect(mockNavigationService.restoreExternalServices).toHaveBeenCalled();
+ });
+
+ it('should retrieve saved services', () => {
+ expect(component.externalServices).toEqual(savedServices);
+ });
+
+ it('should check if it has a service', () => {
+ expect(component.hasService).toBeTruthy();
+ });
+ });
+
+ it('should check if there is no service', () => {
+ component.externalServices = [];
+ expect(component.hasService).toBeFalsy();
+ });
+
+ it('should get icon', () => {
+ expect(component.getIcon('heart')).toEqual('favorite');
+ });
+
+ describe('manageExternalService', () => {
+ const newServices: ExternalService[] = [{name: 'api', url: 'https://url'}];
+ dialogResult = newServices;
+
+ beforeEach(() => {
+ component.manageExternalServices();
+ });
+
+ it('should update "externalServices"', () => {
+ expect(component.externalServices).toEqual(newServices);
+ });
+
+ it('should update "hasServices"', () => {
+ expect(component.hasService).toBeTruthy();
+ });
+
+ it('should save services', () => {
+ expect(mockNavigationService.saveExternalServices).toHaveBeenCalled();
+ });
+ });
+
+ test('saveServices should save local services', () => {
+ component.saveServices();
+ expect(mockNavigationService.saveExternalServices).toHaveBeenCalled();
+ });
+
+ it('should allow to navigate to an url', () => {
+ const windowSpy = jest.spyOn(window, 'open');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ windowSpy.mockImplementationOnce((url?: string | URL | null, target?: string | null, features?: string | undefined) => null);
+ const url = 'https://url';
+ component.navigate(url);
+ expect(windowSpy).toHaveBeenCalledWith(url, '_blank');
+ });
+});
\ No newline at end of file
diff --git a/src/app/components/navigation/external-services.component.ts b/src/app/components/navigation/external-services.component.ts
new file mode 100644
index 000000000..9a3abf847
--- /dev/null
+++ b/src/app/components/navigation/external-services.component.ts
@@ -0,0 +1,87 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { MatButtonModule, MatIconButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ExternalService } from '@app/types/external-service';
+import { IconsService } from '@services/icons.service';
+import { NavigationService } from '@services/navigation.service';
+import { ManageExternalServicesDialogComponent } from './manage-external-services-dialog.component';
+
+@Component({
+ selector: 'app-external-services',
+ templateUrl: 'external-services.component.html',
+ imports: [
+ MatIconModule,
+ MatIconButton,
+ MatTooltipModule,
+ MatButtonModule,
+ MatDividerModule,
+ ],
+ providers: [
+ IconsService,
+ NavigationService
+ ],
+ standalone: true,
+ styles: [`
+ article {
+ display: flex;
+ }
+
+ mat-divider {
+ margin-left: 0.75rem;
+ margin-right: 0.75rem;
+ }
+ `]
+})
+export class ExternalServicesComponent implements OnInit {
+ readonly navigationService = inject(NavigationService);
+ readonly iconsService = inject(IconsService);
+ readonly dialog = inject(MatDialog);
+
+ hasService: boolean = false;
+ private _externalServices: ExternalService[] = [];
+
+ set externalServices(entries: ExternalService[] | undefined) {
+ if (entries) {
+ this._externalServices = entries;
+ this.hasService = entries.length > 0;
+ }
+ }
+
+ get externalServices(): ExternalService[] {
+ return this._externalServices;
+ }
+
+ ngOnInit(): void {
+ this.externalServices = this.navigationService.restoreExternalServices();
+ }
+
+ getIcon(name: string | undefined) {
+ return this.iconsService.getIcon(name);
+ }
+
+ manageExternalServices() {
+ const dialogRef = this.dialog.open(ManageExternalServicesDialogComponent, {
+ data: {
+ externalServices: this.externalServices,
+ }
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ if (result) {
+ this.externalServices = result;
+ this.saveServices();
+ }
+ });
+ }
+
+ saveServices() {
+ this.navigationService.saveExternalServices(this.externalServices);
+ }
+
+ navigate(url: string) {
+ window.open(url, '_blank');
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/navigation/navigation.component.html b/src/app/components/navigation/navigation.component.html
index fc0670338..b838db3e0 100644
--- a/src/app/components/navigation/navigation.component.html
+++ b/src/app/components/navigation/navigation.component.html
@@ -23,29 +23,7 @@
-
-
- @for (service of externalServices; track service.url) {
-
- @if (service.icon) {
-
- }
- {{ service.name }}
-
- }
- @if (externalServices.length) {
-
- }
-
-
+