forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[embeddable rebuild][controls] control group chaining (elastic#187877)
PR implements chaining for refactored control group --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
- Loading branch information
1 parent
b1abffb
commit 4043c7d
Showing
12 changed files
with
450 additions
and
46 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
253 changes: 253 additions & 0 deletions
253
examples/controls_example/public/react_controls/control_group/control_fetch/chaining.test.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,253 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import { ControlGroupChainingSystem } from '@kbn/controls-plugin/common'; | ||
import { Filter } from '@kbn/es-query'; | ||
import { BehaviorSubject, skip } from 'rxjs'; | ||
import { chaining$ } from './chaining'; | ||
|
||
const FILTER_ALPHA = { | ||
meta: { | ||
alias: 'filterAlpha', | ||
}, | ||
}; | ||
const FILTER_BRAVO = { | ||
meta: { | ||
alias: 'filterBravo', | ||
}, | ||
}; | ||
const FILTER_CHARLIE = { | ||
meta: { | ||
alias: 'filterCharlie', | ||
}, | ||
}; | ||
const FILTER_DELTA = { | ||
meta: { | ||
alias: 'filterDelta', | ||
}, | ||
}; | ||
|
||
describe('chaining$', () => { | ||
const onFireMock = jest.fn(); | ||
const chainingSystem$ = new BehaviorSubject<ControlGroupChainingSystem>('HIERARCHICAL'); | ||
const controlsInOrder$ = new BehaviorSubject<Array<{ id: string; type: string }>>([]); | ||
const alphaControlApi = { | ||
filters$: new BehaviorSubject<Filter[] | undefined>(undefined), | ||
}; | ||
const bravoControlApi = { | ||
filters$: new BehaviorSubject<Filter[] | undefined>(undefined), | ||
timeslice$: new BehaviorSubject<[number, number] | undefined>(undefined), | ||
}; | ||
const charlieControlApi = { | ||
filters$: new BehaviorSubject<Filter[] | undefined>(undefined), | ||
}; | ||
const deltaControlApi = { | ||
filters$: new BehaviorSubject<Filter[] | undefined>([FILTER_DELTA]), | ||
}; | ||
const getControlApi = (uuid: string) => { | ||
if (uuid === 'alpha') { | ||
return alphaControlApi; | ||
} | ||
if (uuid === 'bravo') { | ||
return bravoControlApi; | ||
} | ||
if (uuid === 'charlie') { | ||
return charlieControlApi; | ||
} | ||
if (uuid === 'delta') { | ||
return deltaControlApi; | ||
} | ||
return undefined; | ||
}; | ||
|
||
beforeEach(() => { | ||
onFireMock.mockReset(); | ||
alphaControlApi.filters$.next([FILTER_ALPHA]); | ||
bravoControlApi.filters$.next([FILTER_BRAVO]); | ||
bravoControlApi.timeslice$.next([ | ||
Date.parse('2024-06-09T06:00:00.000Z'), | ||
Date.parse('2024-06-09T12:00:00.000Z'), | ||
]); | ||
charlieControlApi.filters$.next([FILTER_CHARLIE]); | ||
deltaControlApi.filters$.next([FILTER_DELTA]); | ||
chainingSystem$.next('HIERARCHICAL'); | ||
controlsInOrder$.next([ | ||
{ id: 'alpha', type: 'whatever' }, | ||
{ id: 'bravo', type: 'whatever' }, | ||
{ id: 'charlie', type: 'whatever' }, | ||
{ id: 'delta', type: 'whatever' }, | ||
]); | ||
}); | ||
|
||
describe('hierarchical chaining', () => { | ||
test('should contain values from controls to the left', async () => { | ||
const subscription = chaining$( | ||
'charlie', | ||
chainingSystem$, | ||
controlsInOrder$, | ||
getControlApi | ||
).subscribe(onFireMock); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
expect(onFireMock.mock.calls).toHaveLength(1); | ||
const chainingContext = onFireMock.mock.calls[0][0]; | ||
expect(chainingContext).toEqual({ | ||
chainingFilters: [FILTER_ALPHA, FILTER_BRAVO], | ||
timeRange: { | ||
from: '2024-06-09T06:00:00.000Z', | ||
to: '2024-06-09T12:00:00.000Z', | ||
mode: 'absolute', | ||
}, | ||
}); | ||
subscription.unsubscribe(); | ||
}); | ||
|
||
test('should fire on chaining system change', async () => { | ||
const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi) | ||
.pipe(skip(1)) | ||
.subscribe(onFireMock); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
expect(onFireMock.mock.calls).toHaveLength(0); | ||
|
||
chainingSystem$.next('NONE'); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
|
||
expect(onFireMock.mock.calls).toHaveLength(1); | ||
const chainingContext = onFireMock.mock.calls[0][0]; | ||
expect(chainingContext).toEqual({ | ||
chainingFilters: [], | ||
timeRange: undefined, | ||
}); | ||
subscription.unsubscribe(); | ||
}); | ||
|
||
test('should fire when controls are moved', async () => { | ||
const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi) | ||
.pipe(skip(1)) | ||
.subscribe(onFireMock); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
expect(onFireMock.mock.calls).toHaveLength(0); | ||
|
||
// Move control to right of 'delta' control | ||
controlsInOrder$.next([ | ||
{ id: 'alpha', type: 'whatever' }, | ||
{ id: 'bravo', type: 'whatever' }, | ||
{ id: 'delta', type: 'whatever' }, | ||
{ id: 'charlie', type: 'whatever' }, | ||
]); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
|
||
expect(onFireMock.mock.calls).toHaveLength(1); | ||
const chainingContext = onFireMock.mock.calls[0][0]; | ||
expect(chainingContext).toEqual({ | ||
chainingFilters: [FILTER_ALPHA, FILTER_BRAVO, FILTER_DELTA], | ||
timeRange: { | ||
from: '2024-06-09T06:00:00.000Z', | ||
to: '2024-06-09T12:00:00.000Z', | ||
mode: 'absolute', | ||
}, | ||
}); | ||
subscription.unsubscribe(); | ||
}); | ||
|
||
test('should fire when controls are removed', async () => { | ||
const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi) | ||
.pipe(skip(1)) | ||
.subscribe(onFireMock); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
expect(onFireMock.mock.calls).toHaveLength(0); | ||
|
||
// remove 'bravo' control | ||
controlsInOrder$.next([ | ||
{ id: 'alpha', type: 'whatever' }, | ||
{ id: 'charlie', type: 'whatever' }, | ||
{ id: 'delta', type: 'whatever' }, | ||
]); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
|
||
expect(onFireMock.mock.calls).toHaveLength(1); | ||
const chainingContext = onFireMock.mock.calls[0][0]; | ||
expect(chainingContext).toEqual({ | ||
chainingFilters: [FILTER_ALPHA], | ||
timeRange: undefined, | ||
}); | ||
subscription.unsubscribe(); | ||
}); | ||
|
||
test('should fire when chained filter changes', async () => { | ||
const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi) | ||
.pipe(skip(1)) | ||
.subscribe(onFireMock); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
expect(onFireMock.mock.calls).toHaveLength(0); | ||
|
||
alphaControlApi.filters$.next([ | ||
{ | ||
meta: { | ||
alias: 'filterAlpha_version2', | ||
}, | ||
}, | ||
]); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
|
||
expect(onFireMock.mock.calls).toHaveLength(1); | ||
const chainingContext = onFireMock.mock.calls[0][0]; | ||
expect(chainingContext.chainingFilters).toEqual([ | ||
{ | ||
meta: { | ||
alias: 'filterAlpha_version2', | ||
}, | ||
}, | ||
FILTER_BRAVO, | ||
]); | ||
subscription.unsubscribe(); | ||
}); | ||
|
||
test('should not fire when unchained filter changes', async () => { | ||
const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi) | ||
.pipe(skip(1)) | ||
.subscribe(onFireMock); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
expect(onFireMock.mock.calls).toHaveLength(0); | ||
|
||
deltaControlApi.filters$.next([ | ||
{ | ||
meta: { | ||
alias: 'filterDelta_version2', | ||
}, | ||
}, | ||
]); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
|
||
expect(onFireMock.mock.calls).toHaveLength(0); | ||
subscription.unsubscribe(); | ||
}); | ||
|
||
test('should fire when chained timeslice changes', async () => { | ||
const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi) | ||
.pipe(skip(1)) | ||
.subscribe(onFireMock); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
expect(onFireMock.mock.calls).toHaveLength(0); | ||
|
||
bravoControlApi.timeslice$.next([ | ||
Date.parse('2024-06-09T12:00:00.000Z'), | ||
Date.parse('2024-06-09T18:00:00.000Z'), | ||
]); | ||
await new Promise((resolve) => setTimeout(resolve, 0)); | ||
|
||
expect(onFireMock.mock.calls).toHaveLength(1); | ||
const chainingContext = onFireMock.mock.calls[0][0]; | ||
expect(chainingContext.timeRange).toEqual({ | ||
from: '2024-06-09T12:00:00.000Z', | ||
to: '2024-06-09T18:00:00.000Z', | ||
mode: 'absolute', | ||
}); | ||
subscription.unsubscribe(); | ||
}); | ||
}); | ||
}); |
88 changes: 88 additions & 0 deletions
88
examples/controls_example/public/react_controls/control_group/control_fetch/chaining.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,88 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import { ControlGroupChainingSystem } from '@kbn/controls-plugin/common'; | ||
import { Filter, TimeRange } from '@kbn/es-query'; | ||
import { | ||
apiPublishesFilters, | ||
apiPublishesTimeslice, | ||
PublishingSubject, | ||
} from '@kbn/presentation-publishing'; | ||
import { BehaviorSubject, combineLatest, debounceTime, map, Observable, switchMap } from 'rxjs'; | ||
|
||
export interface ChainingContext { | ||
chainingFilters?: Filter[] | undefined; | ||
timeRange?: TimeRange | undefined; | ||
} | ||
|
||
export function chaining$( | ||
uuid: string, | ||
chainingSystem$: PublishingSubject<ControlGroupChainingSystem>, | ||
controlsInOrder$: PublishingSubject<Array<{ id: string; type: string }>>, | ||
getControlApi: (uuid: string) => undefined | unknown | ||
) { | ||
return combineLatest([chainingSystem$, controlsInOrder$]).pipe( | ||
switchMap(([chainingSystem, controlsInOrder]) => { | ||
const observables: Array<Observable<unknown>> = []; | ||
if (chainingSystem === 'HIERARCHICAL') { | ||
for (let i = 0; i < controlsInOrder.length; i++) { | ||
if (controlsInOrder[i].id === uuid) { | ||
break; | ||
} | ||
|
||
const chainedControlApi = getControlApi(controlsInOrder[i].id); | ||
|
||
const chainedControl$ = combineLatest([ | ||
apiPublishesFilters(chainedControlApi) | ||
? chainedControlApi.filters$ | ||
: new BehaviorSubject(undefined), | ||
apiPublishesTimeslice(chainedControlApi) | ||
? chainedControlApi.timeslice$ | ||
: new BehaviorSubject(undefined), | ||
]).pipe( | ||
map(([filters, timeslice]) => { | ||
return { | ||
filters, | ||
timeslice, | ||
}; | ||
}) | ||
); | ||
observables.push(chainedControl$); | ||
} | ||
} | ||
|
||
return observables.length ? combineLatest(observables) : new BehaviorSubject([]); | ||
}), | ||
debounceTime(0), | ||
map((chainedControlValues) => { | ||
const chainingFilters: Filter[] = []; | ||
let timeRange: undefined | TimeRange; | ||
( | ||
chainedControlValues as Array<{ | ||
filters: undefined | Filter[]; | ||
timeslice: undefined | [number, number]; | ||
}> | ||
).forEach((chainedControlValue) => { | ||
if (chainedControlValue.filters && chainedControlValue.filters.length) { | ||
chainingFilters.push(...chainedControlValue.filters); | ||
} | ||
if (chainedControlValue.timeslice) { | ||
timeRange = { | ||
from: new Date(chainedControlValue.timeslice[0]).toISOString(), | ||
to: new Date(chainedControlValue.timeslice[1]).toISOString(), | ||
mode: 'absolute' as 'absolute', | ||
}; | ||
} | ||
}); | ||
return { | ||
chainingFilters, | ||
timeRange, | ||
}; | ||
}) | ||
); | ||
} |
Oops, something went wrong.