-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend: Implement executions list enhacements
Executions list highlighting is in sync with duration chart focus on event (execution). Change label text on filter by period. Added caret next to text from time period filter. Implement synchronization between time period filter, duration zoom, grid filters and grid sort criteria. Whenever change occurs it is reflected on the other components/charts and everything is sharable through URL. Signed-off-by: Goran Kokinovski <[email protected]>
- Loading branch information
1 parent
4fe3ef8
commit dda244a
Showing
51 changed files
with
2,310 additions
and
482 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
136 changes: 136 additions & 0 deletions
136
...cutions/data-job-executions-grid/comparators/default/execution-default.comparator.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| /* | ||
| * Copyright 2021-2023 VMware, Inc. | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { DatePipe } from '@angular/common'; | ||
|
|
||
| import { TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { DATA_PIPELINES_DATE_TIME_FORMAT } from '../../../../../../../model'; | ||
|
|
||
| import { GridDataJobExecution } from '../../../model'; | ||
|
|
||
| import { ExecutionDefaultComparator } from './execution-default.comparator'; | ||
|
|
||
| describe('ExecutionDefaultComparator', () => { | ||
| let datePipe: DatePipe; | ||
| let dataJobExecutions: GridDataJobExecution[]; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| providers: [DatePipe] | ||
| }); | ||
|
|
||
| datePipe = TestBed.inject(DatePipe); | ||
|
|
||
| const aStartTime = new Date(); | ||
| const aEndTime = new Date(aStartTime.getTime() + 100); | ||
| const bStartTime = new Date(); | ||
| const bEndTime = new Date(bStartTime.getTime() + 110); | ||
|
|
||
| dataJobExecutions = [ | ||
| { | ||
| id: 'aJob', | ||
| startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| startTime: aStartTime.toISOString(), | ||
| endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| endTime: aEndTime.toISOString(), | ||
| duration: '100', | ||
| jobVersion: 'version-10' | ||
| }, | ||
| { | ||
| id: 'bJob', | ||
| startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| startTime: bStartTime.toISOString(), | ||
| endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| endTime: bEndTime.toISOString(), | ||
| duration: '110', | ||
| jobVersion: 'version-11' | ||
| } | ||
| ]; | ||
| }); | ||
|
|
||
| describe('Properties::', () => { | ||
| describe('|direction|', () => { | ||
| it('should verify value', () => { | ||
| // Given | ||
| const instance = new ExecutionDefaultComparator('jobVersion', 'ASC'); | ||
|
|
||
| // Then | ||
| expect(instance.property).toEqual('jobVersion'); | ||
| expect(instance.direction).toEqual('ASC'); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Methods::', () => { | ||
| describe('|compare|', () => { | ||
| it('should verify will return -1 because of ascending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDefaultComparator('jobVersion', 'ASC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(-1); | ||
| }); | ||
|
|
||
| it('should verify will return 1 because of ascending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDefaultComparator('endTime', 'ASC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[1], dataJobExecutions[0]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(1); | ||
| }); | ||
|
|
||
| it('should verify will return 1 because of descending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDefaultComparator('jobVersion', 'DESC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(1); | ||
| }); | ||
|
|
||
| it('should verify will return -1 because of descending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDefaultComparator('endTime', 'DESC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[1], dataJobExecutions[0]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(-1); | ||
| }); | ||
|
|
||
| it('should verify will return 0 because of ascending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDefaultComparator('startTime', 'ASC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(-0); | ||
| }); | ||
|
|
||
| it('should verify will return 0 because of descending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDefaultComparator('startTime', 'DESC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(0); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
44 changes: 44 additions & 0 deletions
44
...s/executions/data-job-executions-grid/comparators/default/execution-default.comparator.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* | ||
| * Copyright 2021-2023 VMware, Inc. | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { get } from 'lodash'; | ||
|
|
||
| import { Comparator } from '@versatiledatakit/shared'; | ||
|
|
||
| import { GridDataJobExecution } from '../../../model/data-job-execution'; | ||
|
|
||
| /** | ||
| * ** Execution default comparator. | ||
| */ | ||
| export class ExecutionDefaultComparator implements Comparator<GridDataJobExecution> { | ||
| /** | ||
| * ** Property path to value from GridDataJobExecution object. | ||
| */ | ||
| public readonly property: keyof GridDataJobExecution; | ||
|
|
||
| /** | ||
| * ** Sort direction. | ||
| */ | ||
| public readonly direction: 'ASC' | 'DESC'; | ||
|
|
||
| /** | ||
| * ** Constructor. | ||
| */ | ||
| constructor(property: keyof GridDataJobExecution, direction: 'ASC' | 'DESC') { | ||
| this.property = property; | ||
| this.direction = direction; | ||
| } | ||
|
|
||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| compare(exec1: GridDataJobExecution, exec2: GridDataJobExecution) { | ||
| const value1 = get<GridDataJobExecution, keyof GridDataJobExecution>(exec1, this.property); | ||
| const value2 = get<GridDataJobExecution, keyof GridDataJobExecution>(exec2, this.property); | ||
| const directionModifier = this.direction === 'DESC' ? 1 : -1; | ||
|
|
||
| return (value1 > value2 ? -1 : value2 > value1 ? 1 : 0) * directionModifier; | ||
| } | ||
| } |
6 changes: 6 additions & 0 deletions
6
...omponents/data-job/pages/executions/data-job-executions-grid/comparators/default/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /* | ||
| * Copyright 2023 VMware, Inc. | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| export * from './execution-default.comparator'; |
91 changes: 91 additions & 0 deletions
91
...tions/data-job-executions-grid/comparators/duration/execution-duration.comparator.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /* | ||
| * Copyright 2021-2023 VMware, Inc. | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { DatePipe } from '@angular/common'; | ||
|
|
||
| import { TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { DATA_PIPELINES_DATE_TIME_FORMAT } from '../../../../../../../model'; | ||
|
|
||
| import { GridDataJobExecution } from '../../../model'; | ||
|
|
||
| import { ExecutionDurationComparator } from './execution-duration.comparator'; | ||
|
|
||
| describe('ExecutionDurationComparator', () => { | ||
| let datePipe: DatePipe; | ||
| let dataJobExecutions: GridDataJobExecution[]; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| providers: [DatePipe] | ||
| }); | ||
|
|
||
| datePipe = TestBed.inject(DatePipe); | ||
|
|
||
| const aStartTime = new Date(); | ||
| const aEndTime = new Date(aStartTime.getTime() + 100); | ||
| const bStartTime = new Date(); | ||
| const bEndTime = new Date(bStartTime.getTime() + 110); | ||
|
|
||
| dataJobExecutions = [ | ||
| { | ||
| id: 'aJob', | ||
| startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| startTime: aStartTime.toISOString(), | ||
| endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| endTime: aEndTime.toISOString(), | ||
| duration: '100', | ||
| jobVersion: '' | ||
| }, | ||
| { | ||
| id: 'bJob', | ||
| startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| startTime: bStartTime.toISOString(), | ||
| endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), | ||
| endTime: bEndTime.toISOString(), | ||
| duration: '110', | ||
| jobVersion: '' | ||
| } | ||
| ]; | ||
| }); | ||
|
|
||
| describe('Properties::', () => { | ||
| describe('|direction|', () => { | ||
| it('should verify value', () => { | ||
| // Given | ||
| const instance = new ExecutionDurationComparator('ASC'); | ||
|
|
||
| // Then | ||
| expect(instance.direction).toEqual('ASC'); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Methods::', () => { | ||
| describe('|compare|', () => { | ||
| it('should verify will return -10 because of ascending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDurationComparator('ASC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(-10); | ||
| }); | ||
|
|
||
| it('should verify will return 10 because of descending sort', () => { | ||
| // Given | ||
| const instance = new ExecutionDurationComparator('DESC'); | ||
|
|
||
| // When | ||
| const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); | ||
|
|
||
| // Then | ||
| expect(res).toEqual(10); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.