From ce97982522cfb2b1e6b69810e72310d30ba00120 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Mon, 5 Oct 2020 12:41:09 +0200 Subject: [PATCH 01/16] [Lens] refactor DimensionContainer and fix flyout bug (#79277) --- .../config_panel/dimension_container.scss | 10 - .../config_panel/dimension_container.tsx | 97 ++----- .../config_panel/layer_panel.test.tsx | 23 +- .../editor_frame/config_panel/layer_panel.tsx | 252 ++++++++---------- .../editor_frame/config_panel/types.ts | 9 +- 5 files changed, 146 insertions(+), 245 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss index f200e25453a2..bd2789cf645c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss @@ -13,17 +13,7 @@ animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } -.lnsDimensionContainer--noAnimation { - animation: none; -} - .lnsDimensionContainer__footer, .lnsDimensionContainer__header { padding: $euiSizeS; } - -.lnsDimensionContainer__trigger { - width: 100%; - display: block; - word-break: break-word; -} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx index 19f4c0428260..8f1b441d1d28 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx @@ -16,89 +16,42 @@ import { EuiOutsideClickDetector, } from '@elastic/eui'; -import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; -import { VisualizationDimensionGroupConfig } from '../../../types'; -import { DimensionContainerState } from './types'; export function DimensionContainer({ - dimensionContainerState, - setDimensionContainerState, - groups, - accessor, - groupId, - trigger, + isOpen, + groupLabel, + handleClose, panel, - panelTitle, }: { - dimensionContainerState: DimensionContainerState; - setDimensionContainerState: (newState: DimensionContainerState) => void; - groups: VisualizationDimensionGroupConfig[]; - accessor: string; - groupId: string; - trigger: React.ReactElement; + isOpen: boolean; + handleClose: () => void; panel: React.ReactElement; - panelTitle: React.ReactNode; + groupLabel: string; }) { - const [openByCreation, setIsOpenByCreation] = useState( - dimensionContainerState.openId === accessor - ); const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false); - const [flyoutIsVisible, setFlyoutIsVisible] = useState(false); - - const noMatch = dimensionContainerState.isOpen - ? !groups.some((d) => d.accessors.includes(accessor)) - : false; const closeFlyout = () => { - setDimensionContainerState({ - isOpen: false, - openId: null, - addingToGroupId: null, - }); - setIsOpenByCreation(false); + handleClose(); setFocusTrapIsEnabled(false); - setFlyoutIsVisible(false); - }; - - const openFlyout = () => { - setFlyoutIsVisible(true); - setTimeout(() => { - setFocusTrapIsEnabled(true); - }, 255); }; - const flyoutShouldBeOpen = - dimensionContainerState.isOpen && - (dimensionContainerState.openId === accessor || - (noMatch && dimensionContainerState.addingToGroupId === groupId)); - useEffect(() => { - if (flyoutShouldBeOpen) { - openFlyout(); + if (isOpen) { + // without setTimeout here the flyout pushes content when animating + setTimeout(() => { + setFocusTrapIsEnabled(true); + }, 255); } - }); + }, [isOpen]); - useEffect(() => { - if (!flyoutShouldBeOpen) { - if (flyoutIsVisible) { - setFlyoutIsVisible(false); - } - if (focusTrapIsEnabled) { - setFocusTrapIsEnabled(false); - } - } - }, [flyoutShouldBeOpen, flyoutIsVisible, focusTrapIsEnabled]); - - const flyout = flyoutIsVisible && ( + return isOpen ? ( - +
@@ -109,7 +62,14 @@ export function DimensionContainer({ iconType="sortLeft" flush="left" > - {panelTitle} + + {i18n.translate('xpack.lens.configure.configurePanelTitle', { + defaultMessage: '{groupLabel} configuration', + values: { + groupLabel, + }, + })} + @@ -126,12 +86,5 @@ export function DimensionContainer({
- ); - - return ( - <> - {trigger} - {flyout} - - ); + ) : null; } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index a9e2d6dc696a..44dc22d20a4f 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -14,7 +14,6 @@ import { } from '../../mocks'; import { ChildDragDropProvider } from '../../../drag_drop'; import { EuiFormRow } from '@elastic/eui'; -import { mount } from 'enzyme'; import { mountWithIntl } from 'test_utils/enzyme_helpers'; import { Visualization } from '../../../types'; import { LayerPanel } from './layer_panel'; @@ -211,7 +210,7 @@ describe('LayerPanel', () => { groupId: 'a', accessors: ['newid'], filterOperations: () => true, - supportsMoreColumns: false, + supportsMoreColumns: true, dataTestSubj: 'lnsGroup', enableDimensionEditor: true, }, @@ -220,11 +219,14 @@ describe('LayerPanel', () => { mockVisualization.renderDimensionEditor = jest.fn(); const component = mountWithIntl(); + act(() => { + component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); + }); + component.update(); - const group = component.find('DimensionContainer'); - const panel = mount(group.prop('panel')); - - expect(panel.children()).toHaveLength(2); + const group = component.find('DimensionContainer').first(); + const panel: React.ReactElement = group.prop('panel'); + expect(panel.props.children).toHaveLength(2); }); it('should keep the DimensionContainer open when configuring a new dimension', () => { @@ -263,11 +265,8 @@ describe('LayerPanel', () => { }); const component = mountWithIntl(); - - const group = component.find('DimensionContainer'); - const triggerButton = mountWithIntl(group.prop('trigger')); act(() => { - triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); + component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); }); component.update(); @@ -312,10 +311,8 @@ describe('LayerPanel', () => { const component = mountWithIntl(); - const group = component.find('DimensionContainer'); - const triggerButton = mountWithIntl(group.prop('trigger')); act(() => { - triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); + component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); }); component.update(); expect(component.find('EuiFlyoutHeader').exists()).toBe(true); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index ce2955da890d..e72bf75b010c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -23,13 +23,11 @@ import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop import { LayerSettings } from './layer_settings'; import { trackUiEvent } from '../../../lens_ui_telemetry'; import { generateId } from '../../../id_generator'; -import { ConfigPanelWrapperProps, DimensionContainerState } from './types'; +import { ConfigPanelWrapperProps, ActiveDimensionState } from './types'; import { DimensionContainer } from './dimension_container'; -const initialDimensionContainerState = { - isOpen: false, - openId: null, - addingToGroupId: null, +const initialActiveDimensionState = { + isNew: false, }; function isConfiguration( @@ -70,15 +68,15 @@ export function LayerPanel( } ) { const dragDropContext = useContext(DragContext); - const [dimensionContainerState, setDimensionContainerState] = useState( - initialDimensionContainerState + const [activeDimension, setActiveDimension] = useState( + initialActiveDimensionState ); const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props; const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId]; useEffect(() => { - setDimensionContainerState(initialDimensionContainerState); + setActiveDimension(initialActiveDimensionState); }, [props.activeVisualizationId]); if ( @@ -117,7 +115,7 @@ export function LayerPanel( const { groups } = activeVisualization.getConfiguration(layerVisualizationConfigProps); const isEmptyLayer = !groups.some((d) => d.accessors.length > 0); - + const { activeId, activeGroup } = activeDimension; return ( @@ -196,31 +194,6 @@ export function LayerPanel( > <> {group.accessors.map((accessor) => { - const datasourceDimensionEditor = ( - - ); - const visDimensionEditor = - activeVisualization.renderDimensionEditor && group.enableDimensionEditor ? ( -
- -
- ) : null; return (
- { - if (dimensionContainerState.isOpen) { - setDimensionContainerState(initialDimensionContainerState); - } else { - setDimensionContainerState({ - isOpen: true, - openId: accessor, - addingToGroupId: null, // not set for existing dimension - }); - } - }, - }} - /> - } - panel={ - <> - {datasourceDimensionEditor} - {visDimensionEditor} - - } - panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', { - defaultMessage: '{groupLabel} configuration', - values: { - groupLabel: group.groupLabel, + { + if (activeId) { + setActiveDimension(initialActiveDimensionState); + } else { + setActiveDimension({ + isNew: false, + activeGroup: group, + activeId: accessor, + }); + } }, - })} + }} /> -
- { - if (dimensionContainerState.isOpen) { - setDimensionContainerState(initialDimensionContainerState); - } else { - setDimensionContainerState({ - isOpen: true, - openId: newId, - addingToGroupId: group.groupId, - }); - } - }} - > - - - } - panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', { - defaultMessage: '{groupLabel} configuration', - values: { - groupLabel: group.groupLabel, - }, - })} - panel={ - { - props.updateAll( - datasourceId, - newState, - activeVisualization.setDimension({ - layerId, - groupId: group.groupId, - columnId: newId, - prevState: props.visualizationState, - }) - ); - setDimensionContainerState({ - isOpen: true, - openId: newId, - addingToGroupId: null, // clear now that dimension exists - }); - }, - }} - /> - } - /> + { + if (activeId) { + setActiveDimension(initialActiveDimensionState); + } else { + setActiveDimension({ + isNew: true, + activeGroup: group, + activeId: newId, + }); + } + }} + > + +
) : null} @@ -472,6 +378,60 @@ export function LayerPanel( ); })} + setActiveDimension(initialActiveDimensionState)} + panel={ + <> + {activeGroup && activeId && ( + { + props.updateAll( + datasourceId, + newState, + activeVisualization.setDimension({ + layerId, + groupId: activeGroup.groupId, + columnId: activeId, + prevState: props.visualizationState, + }) + ); + setActiveDimension({ + ...activeDimension, + isNew: false, + }); + }, + }} + /> + )} + {activeGroup && + activeId && + !activeDimension.isNew && + activeVisualization.renderDimensionEditor && + activeGroup?.enableDimensionEditor && ( +
+ +
+ )} + + } + /> diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts index d42c5c3b99e5..c172c6da6848 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts @@ -10,6 +10,7 @@ import { FramePublicAPI, Datasource, DatasourceDimensionEditorProps, + VisualizationDimensionGroupConfig, } from '../../../types'; export interface ConfigPanelWrapperProps { @@ -30,8 +31,8 @@ export interface ConfigPanelWrapperProps { core: DatasourceDimensionEditorProps['core']; } -export interface DimensionContainerState { - isOpen: boolean; - openId: string | null; - addingToGroupId: string | null; +export interface ActiveDimensionState { + isNew: boolean; + activeId?: string; + activeGroup?: VisualizationDimensionGroupConfig; } From 3ff90ce709d019d52c15ba3ba390d9ceb5015d53 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 5 Oct 2020 14:34:31 +0300 Subject: [PATCH 02/16] [Discover] "View surrounding documents" encodes spaces in filters (#79283) * [Discover] "View surrounding documents" encodes spaces in filters Closes: #72958 * fix CI Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../angular/doc_table/components/table_row.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts b/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts index e7fafde2e68d..4911f207f0a5 100644 --- a/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts +++ b/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts @@ -18,6 +18,7 @@ */ import { find, template } from 'lodash'; +import { stringify } from 'query-string'; import $ from 'jquery'; import rison from 'rison-node'; import '../../doc_viewer'; @@ -25,7 +26,7 @@ import '../../doc_viewer'; import openRowHtml from './table_row/open.html'; import detailsHtml from './table_row/details.html'; -import { dispatchRenderComplete } from '../../../../../../kibana_utils/public'; +import { dispatchRenderComplete, url } from '../../../../../../kibana_utils/public'; import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../../common'; import cellTemplateHtml from '../components/table_row/cell.html'; import truncateByHeightTemplateHtml from '../components/table_row/truncate_by_height.html'; @@ -49,7 +50,7 @@ interface LazyScope extends ng.IScope { [key: string]: any; } -export function createTableRowDirective($compile: ng.ICompileService, $httpParamSerializer: any) { +export function createTableRowDirective($compile: ng.ICompileService) { const cellTemplate = template(noWhiteSpace(cellTemplateHtml)); const truncateByHeightTemplate = template(noWhiteSpace(truncateByHeightTemplateHtml)); @@ -114,26 +115,25 @@ export function createTableRowDirective($compile: ng.ICompileService, $httpParam }; $scope.getContextAppHref = () => { - const path = `#/context/${encodeURIComponent($scope.indexPattern.id)}/${encodeURIComponent( - $scope.row._id - )}`; const globalFilters: any = getServices().filterManager.getGlobalFilters(); const appFilters: any = getServices().filterManager.getAppFilters(); - const hash = $httpParamSerializer({ - _g: encodeURI( - rison.encode({ + + const hash = stringify( + url.encodeQuery({ + _g: rison.encode({ filters: globalFilters || [], - }) - ), - _a: encodeURI( - rison.encode({ + }), + _a: rison.encode({ columns: $scope.columns, filters: (appFilters || []).map(esFilters.disableFilter), - }) - ), - }); + }), + }), + { encode: false, sort: false } + ); - return `${path}?${hash}`; + return `#/context/${encodeURIComponent($scope.indexPattern.id)}/${encodeURIComponent( + $scope.row._id + )}?${hash}`; }; // create a tr element that lists the value for each *column* From 43493bb0d98b948dd254d9698b9fd98fe53e0307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Mon, 5 Oct 2020 12:40:00 +0100 Subject: [PATCH 03/16] [`/api/stats`] Add documentation + small improvement (#79330) Co-authored-by: Christiane (Tina) Heiligers Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Ahmad Bamieh --- src/plugins/usage_collection/README.md | 5 +++++ .../server/routes/stats/README.md | 20 +++++++++++++++++++ .../server/routes/stats/index.ts | 20 +++++++++++++++++++ .../server/routes/{ => stats}/stats.ts | 19 +++++++++--------- 4 files changed, 55 insertions(+), 9 deletions(-) create mode 100644 src/plugins/usage_collection/server/routes/stats/README.md create mode 100644 src/plugins/usage_collection/server/routes/stats/index.ts rename src/plugins/usage_collection/server/routes/{ => stats}/stats.ts (91%) diff --git a/src/plugins/usage_collection/README.md b/src/plugins/usage_collection/README.md index 9955f9fac81c..aae633a956c4 100644 --- a/src/plugins/usage_collection/README.md +++ b/src/plugins/usage_collection/README.md @@ -325,3 +325,8 @@ By storing these metrics and their counts as key-value pairs, we can add more me to worry about exceeding the 1000-field soft limit in Elasticsearch. The only caveat is that it makes it harder to consume in Kibana when analysing each entry in the array separately. In the telemetry team we are working to find a solution to this. + +# Routes registered by this plugin + +- `/api/ui_metric/report`: Used by `ui_metrics` usage collector instances to report their usage data to the server +- `/api/stats`: Get the metrics and usage ([details](./server/routes/stats/README.md)) diff --git a/src/plugins/usage_collection/server/routes/stats/README.md b/src/plugins/usage_collection/server/routes/stats/README.md new file mode 100644 index 000000000000..09dabefbab44 --- /dev/null +++ b/src/plugins/usage_collection/server/routes/stats/README.md @@ -0,0 +1,20 @@ +# `/api/stats` + +This API returns the metrics for the Kibana server and usage stats. It allows the [Metricbeat Kibana module](https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-module-kibana.html) to collect the [stats metricset](https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-metricset-kibana-stats.html). + +By default, it returns the simplest level of stats; consisting of the Kibana server's ops metrics, version, status, and basic config like the server name, host, port, and locale. + +However, the information detailed above can be extended, with the combination of the following 3 query parameters: + +| Query Parameter | Default value | Description | +|:----------------|:-------------:|:------------| +|`extended`|`false`|When `true`, it adds `clusterUuid` and `usage`. The latter contains the information reported by all the Usage Collectors registered in the Kibana server. It may throw `503 Stats not ready` if any of the collectors is not fully initialized yet.| +|`legacy`|`false`|By default, when `extended=true`, the key names of the data in `usage` are transformed into API-friendlier `snake_case` format (i.e.: `clusterUuid` is transformed to `cluster_uuid`). When this parameter is `true`, the data is returned as-is.| +|`exclude_usage`|`false`|When `true`, and `extended=true`, it will report `clusterUuid` but no `usage`.| + +## Known use cases + +Metricbeat Kibana' stats metricset ([code](https://github.com/elastic/beats/blob/master/metricbeat/module/kibana/stats/stats.go)) uses this API to collect the metrics (every 10s) and usage (only once every 24h), and then reports them to the Monitoring cluster. They call this API in 2 ways: + +1. Metrics-only collection (every 10 seconds): `GET /api/stats?extended=true&legacy=true&exclude_usage=true` +2. Metrics+usage (every 24 hours): `GET /api/stats?extended=true&legacy=true&exclude_usage=false` diff --git a/src/plugins/usage_collection/server/routes/stats/index.ts b/src/plugins/usage_collection/server/routes/stats/index.ts new file mode 100644 index 000000000000..8871ee599e56 --- /dev/null +++ b/src/plugins/usage_collection/server/routes/stats/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { registerStatsRoute } from './stats'; diff --git a/src/plugins/usage_collection/server/routes/stats.ts b/src/plugins/usage_collection/server/routes/stats/stats.ts similarity index 91% rename from src/plugins/usage_collection/server/routes/stats.ts rename to src/plugins/usage_collection/server/routes/stats/stats.ts index ef5da2eb11ba..bee25fef669f 100644 --- a/src/plugins/usage_collection/server/routes/stats.ts +++ b/src/plugins/usage_collection/server/routes/stats/stats.ts @@ -30,8 +30,8 @@ import { MetricsServiceSetup, ServiceStatus, ServiceStatusLevels, -} from '../../../../core/server'; -import { CollectorSet } from '../collector'; +} from '../../../../../core/server'; +import { CollectorSet } from '../../collector'; const STATS_NOT_READY_MESSAGE = i18n.translate('usageCollection.stats.notReadyMessage', { defaultMessage: 'Stats are not ready yet. Please try again later.', @@ -101,10 +101,12 @@ export function registerStatsRoute({ if (isExtended) { const callCluster = context.core.elasticsearch.legacy.client.callAsCurrentUser; const esClient = context.core.elasticsearch.client.asCurrentUser; - const collectorsReady = await collectorSet.areAllCollectorsReady(); - if (shouldGetUsage && !collectorsReady) { - return res.customError({ statusCode: 503, body: { message: STATS_NOT_READY_MESSAGE } }); + if (shouldGetUsage) { + const collectorsReady = await collectorSet.areAllCollectorsReady(); + if (!collectorsReady) { + return res.customError({ statusCode: 503, body: { message: STATS_NOT_READY_MESSAGE } }); + } } const usagePromise = shouldGetUsage ? getUsage(callCluster, esClient) : Promise.resolve({}); @@ -152,9 +154,8 @@ export function registerStatsRoute({ } } - // Guranteed to resolve immediately due to replay effect on getOpsMetrics$ - // eslint-disable-next-line @typescript-eslint/naming-convention - const { collected_at, ...lastMetrics } = await metrics + // Guaranteed to resolve immediately due to replay effect on getOpsMetrics$ + const { collected_at: collectedAt, ...lastMetrics } = await metrics .getOpsMetrics$() .pipe(first()) .toPromise(); @@ -173,7 +174,7 @@ export function registerStatsRoute({ snapshot: SNAPSHOT_REGEX.test(config.kibanaVersion), status: ServiceStatusToLegacyState[overallStatus.level.toString()], }, - last_updated: collected_at.toISOString(), + last_updated: collectedAt.toISOString(), collection_interval_in_millis: metrics.collectionInterval, }); From 519d4905bce5a563f104fa2161b93cc0ae065093 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Mon, 5 Oct 2020 15:15:38 +0200 Subject: [PATCH 04/16] [Mappings editor] Fix app crash when selecting "other" field type (#79434) --- .../forms/hook_form_lib/hooks/use_field.ts | 48 ++++++-- .../datatypes/other_datatype.test.tsx | 112 ++++++++++++++++++ .../helpers/mappings_editor.helpers.tsx | 13 +- .../other_type_name_parameter.tsx | 70 ++++++++--- .../fields/edit_field/edit_field.tsx | 4 +- .../constants/parameters_definition.tsx | 2 +- 6 files changed, 224 insertions(+), 25 deletions(-) create mode 100644 x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts index bb4aae6eccae..0119d86e92a3 100644 --- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts +++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts @@ -464,24 +464,58 @@ export const useField = ( [errors] ); + /** + * Handler to update the state and make sure the component is still mounted. + * When resetting the form, some field might get unmounted (e.g. a toggle on "true" becomes "false" and now certain fields should not be in the DOM). + * In that scenario there is a race condition in the "reset" method below, because the useState() hook is not synchronous. + * + * A better approach would be to have the state in a reducer and being able to update all values in a single dispatch action. + */ + const updateStateIfMounted = useCallback( + ( + state: 'isPristine' | 'isValidating' | 'isChangingValue' | 'isValidated' | 'errors' | 'value', + nextValue: any + ) => { + if (isMounted.current === false) { + return; + } + + switch (state) { + case 'value': + return setValue(nextValue); + case 'errors': + return setErrors(nextValue); + case 'isChangingValue': + return setIsChangingValue(nextValue); + case 'isPristine': + return setPristine(nextValue); + case 'isValidated': + return setIsValidated(nextValue); + case 'isValidating': + return setValidating(nextValue); + } + }, + [setValue] + ); + const reset: FieldHook['reset'] = useCallback( (resetOptions = { resetValue: true }) => { const { resetValue = true, defaultValue: updatedDefaultValue } = resetOptions; - setPristine(true); - setValidating(false); - setIsChangingValue(false); - setIsValidated(false); - setErrors([]); + updateStateIfMounted('isPristine', true); + updateStateIfMounted('isValidating', false); + updateStateIfMounted('isChangingValue', false); + updateStateIfMounted('isValidated', false); + updateStateIfMounted('errors', []); if (resetValue) { hasBeenReset.current = true; const newValue = deserializeValue(updatedDefaultValue ?? defaultValue); - setValue(newValue); + updateStateIfMounted('value', newValue); return newValue; } }, - [setValue, deserializeValue, defaultValue] + [updateStateIfMounted, deserializeValue, defaultValue] ); // Don't take into account non blocker validation. Some are just warning (like trying to add a wrong ComboBox item) diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx new file mode 100644 index 000000000000..c1474b0ec678 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx @@ -0,0 +1,112 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { act } from 'react-dom/test-utils'; + +import { componentHelpers, MappingsEditorTestBed } from '../helpers'; + +const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor; + +describe('Mappings editor: other datatype', () => { + /** + * Variable to store the mappings data forwarded to the consumer component + */ + let data: any; + let onChangeHandler: jest.Mock = jest.fn(); + let getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler); + let testBed: MappingsEditorTestBed; + + beforeAll(() => { + jest.useFakeTimers(); + }); + + afterAll(() => { + jest.useRealTimers(); + }); + + beforeEach(() => { + onChangeHandler = jest.fn(); + getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler); + }); + + test('allow to add custom field type', async () => { + await act(async () => { + testBed = setup({ onChange: onChangeHandler }); + }); + testBed.component.update(); + + const { + component, + actions: { addField }, + } = testBed; + + await addField('myField', 'other', 'customType'); + + const mappings = { + properties: { + myField: { + type: 'customType', + }, + }, + }; + + ({ data } = await getMappingsEditorData(component)); + expect(data).toEqual(mappings); + }); + + test('allow to change a field type to a custom type', async () => { + const defaultMappings = { + properties: { + myField: { + type: 'text', + }, + }, + }; + + let updatedMappings = { ...defaultMappings }; + + await act(async () => { + testBed = setup({ value: defaultMappings, onChange: onChangeHandler }); + }); + testBed.component.update(); + + const { + component, + find, + form, + actions: { startEditField, updateFieldAndCloseFlyout }, + } = testBed; + + // Open the flyout to edit the field + await startEditField('myField'); + + // Change the field type + await act(async () => { + find('mappingsEditorFieldEdit.fieldType').simulate('change', [ + { + label: 'other', + value: 'other', + }, + ]); + }); + component.update(); + + form.setInputValue('mappingsEditorFieldEdit.fieldSubType', 'customType'); + + // Save the field and close the flyout + await updateFieldAndCloseFlyout(); + + updatedMappings = { + properties: { + myField: { + type: 'customType', + }, + }, + }; + + ({ data } = await getMappingsEditorData(component)); + expect(data).toEqual(updatedMappings); + }); +}); diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx index e123dea6ff2f..2eb56a97dc3a 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx @@ -149,7 +149,7 @@ const createActions = (testBed: TestBed) => { return { field: find(testSubject as TestSubjects), testSubject }; }; - const addField = async (name: string, type: string) => { + const addField = async (name: string, type: string, subType?: string) => { await act(async () => { form.setInputValue('nameParameterInput', name); find('createFieldForm.fieldType').simulate('change', [ @@ -160,6 +160,17 @@ const createActions = (testBed: TestBed) => { ]); }); + component.update(); + + if (subType !== undefined) { + await act(async () => { + if (type === 'other') { + // subType is a text input + form.setInputValue('createFieldForm.fieldSubType', subType); + } + }); + } + await act(async () => { find('createFieldForm.addButton').simulate('click'); }); diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx index 6004e484323a..8043a0deaf8d 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx @@ -4,13 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useCallback } from 'react'; import { i18n } from '@kbn/i18n'; -import { UseField, TextField, FieldConfig } from '../../../shared_imports'; -import { fieldValidators } from '../../../shared_imports'; - -const { emptyField } = fieldValidators; +import { UseField, TextField, FieldConfig, FieldHook } from '../../../shared_imports'; +import { getFieldConfig } from '../../../lib'; /** * This is a special component that does not have an explicit entry in {@link PARAMETERS_DEFINITION}. @@ -18,25 +16,69 @@ const { emptyField } = fieldValidators; * We use it to store the name of types unknown to the mappings editor in the "subType" path. */ +type FieldType = [{ value: string }]; + +const typeParameterConfig = getFieldConfig('type'); + const fieldConfig: FieldConfig = { label: i18n.translate('xpack.idxMgmt.mappingsEditor.otherTypeNameFieldLabel', { defaultMessage: 'Type Name', }), defaultValue: '', + deserializer: typeParameterConfig.deserializer, + serializer: typeParameterConfig.serializer, validations: [ { - validator: emptyField( - i18n.translate( - 'xpack.idxMgmt.mappingsEditor.parameters.validations.otherTypeNameIsRequiredErrorMessage', - { - defaultMessage: 'The type name is required.', - } - ) - ), + validator: ({ value: fieldValue }) => { + if ((fieldValue as FieldType)[0].value.trim() === '') { + return { + message: i18n.translate( + 'xpack.idxMgmt.mappingsEditor.parameters.validations.otherTypeNameIsRequiredErrorMessage', + { + defaultMessage: 'The type name is required.', + } + ), + }; + } + }, }, ], }; +interface Props { + field: FieldHook; +} + +/** + * The "subType" parameter can be configured either with a ComboBox (when the type is known) + * or with a TextField (when the type is unknown). This causes its value to have different type + * (either an array of object either a string). In order to align both value and let the consumer of + * the value worry about a single type, we will create a custom TextField component that works with the + * array of object that the ComboBox works with. + */ +const CustomTextField = ({ field }: Props) => { + const { setValue } = field; + + const transformedField: FieldHook = { + ...field, + value: field.value[0]?.value ?? '', + }; + + const onChange = useCallback( + (e: React.ChangeEvent) => { + setValue([{ value: e.target.value }]); + }, + [setValue] + ); + + return ( + + ); +}; + export const OtherTypeNameParameter = () => ( - + ); diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx index 95575124b6ab..faa0c8c9dc79 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx @@ -91,8 +91,8 @@ export const EditField = React.memo(({ form, field, allFields, exitEdit, updateF {({ type, subType }) => { const linkDocumentation = - documentationService.getTypeDocLink(subType?.[0].value) || - documentationService.getTypeDocLink(type?.[0].value); + documentationService.getTypeDocLink(subType?.[0]?.value) || + documentationService.getTypeDocLink(type?.[0]?.value); if (!linkDocumentation) { return null; diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx index 4c9786d88bfa..74cca4dae781 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx @@ -168,7 +168,7 @@ export const PARAMETERS_DEFINITION: { [key in ParameterName]: ParameterDefinitio }, ]; } - return []; + return [{ value: '' }]; }, serializer: (fieldType: ComboBoxOption[] | undefined) => fieldType && fieldType.length ? fieldType[0].value : fieldType, From f960e89ef6a9f17c9da0bb73e369e179a673c453 Mon Sep 17 00:00:00 2001 From: Ahmad Bamieh Date: Mon, 5 Oct 2020 16:16:07 +0300 Subject: [PATCH 05/16] [Telemetry] server fetcher check all collectors ready before sending (#79398) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alejandro Fernández Haro --- src/plugins/telemetry/server/fetcher.test.ts | 84 +++++++++++++++++-- src/plugins/telemetry/server/fetcher.ts | 30 +++++-- .../server/index.ts | 1 + .../server/plugin.ts | 6 ++ .../server/types.ts | 2 + .../server/collector/collector_set.ts | 29 ++++--- 6 files changed, 130 insertions(+), 22 deletions(-) diff --git a/src/plugins/telemetry/server/fetcher.test.ts b/src/plugins/telemetry/server/fetcher.test.ts index 245adf59799c..45712df772e1 100644 --- a/src/plugins/telemetry/server/fetcher.test.ts +++ b/src/plugins/telemetry/server/fetcher.test.ts @@ -23,19 +23,93 @@ import { coreMock } from '../../../core/server/mocks'; describe('FetcherTask', () => { describe('sendIfDue', () => { - it('returns undefined and warns when it fails to get telemetry configs', async () => { + it('stops when it fails to get telemetry configs', async () => { const initializerContext = coreMock.createPluginInitializerContext({}); const fetcherTask = new FetcherTask(initializerContext); const mockError = new Error('Some message.'); - fetcherTask['getCurrentConfigs'] = async () => { - throw mockError; - }; + const getCurrentConfigs = jest.fn().mockRejectedValue(mockError); + const fetchTelemetry = jest.fn(); + const sendTelemetry = jest.fn(); + Object.assign(fetcherTask, { + getCurrentConfigs, + fetchTelemetry, + sendTelemetry, + }); const result = await fetcherTask['sendIfDue'](); expect(result).toBe(undefined); + expect(getCurrentConfigs).toBeCalledTimes(1); + expect(fetchTelemetry).toBeCalledTimes(0); + expect(sendTelemetry).toBeCalledTimes(0); expect(fetcherTask['logger'].warn).toBeCalledTimes(1); expect(fetcherTask['logger'].warn).toHaveBeenCalledWith( - `Error fetching telemetry configs: ${mockError}` + `Error getting telemetry configs. (${mockError})` ); }); + + it('stops when all collectors are not ready', async () => { + const initializerContext = coreMock.createPluginInitializerContext({}); + const fetcherTask = new FetcherTask(initializerContext); + const getCurrentConfigs = jest.fn().mockResolvedValue({}); + const areAllCollectorsReady = jest.fn().mockResolvedValue(false); + const shouldSendReport = jest.fn().mockReturnValue(true); + const fetchTelemetry = jest.fn(); + const sendTelemetry = jest.fn(); + const updateReportFailure = jest.fn(); + + Object.assign(fetcherTask, { + getCurrentConfigs, + areAllCollectorsReady, + shouldSendReport, + fetchTelemetry, + updateReportFailure, + sendTelemetry, + }); + + await fetcherTask['sendIfDue'](); + + expect(fetchTelemetry).toBeCalledTimes(0); + expect(sendTelemetry).toBeCalledTimes(0); + + expect(areAllCollectorsReady).toBeCalledTimes(1); + expect(updateReportFailure).toBeCalledTimes(0); + expect(fetcherTask['logger'].warn).toBeCalledTimes(1); + expect(fetcherTask['logger'].warn).toHaveBeenCalledWith( + `Error fetching usage. (Error: Not all collectors are ready.)` + ); + }); + + it('fetches usage and send telemetry', async () => { + const initializerContext = coreMock.createPluginInitializerContext({}); + const fetcherTask = new FetcherTask(initializerContext); + const mockTelemetryUrl = 'mock_telemetry_url'; + const mockClusters = ['cluster_1', 'cluster_2']; + const getCurrentConfigs = jest.fn().mockResolvedValue({ + telemetryUrl: mockTelemetryUrl, + }); + const areAllCollectorsReady = jest.fn().mockResolvedValue(true); + const shouldSendReport = jest.fn().mockReturnValue(true); + + const fetchTelemetry = jest.fn().mockResolvedValue(mockClusters); + const sendTelemetry = jest.fn(); + const updateReportFailure = jest.fn(); + + Object.assign(fetcherTask, { + getCurrentConfigs, + areAllCollectorsReady, + shouldSendReport, + fetchTelemetry, + updateReportFailure, + sendTelemetry, + }); + + await fetcherTask['sendIfDue'](); + + expect(areAllCollectorsReady).toBeCalledTimes(1); + expect(fetchTelemetry).toBeCalledTimes(1); + expect(sendTelemetry).toBeCalledTimes(2); + expect(sendTelemetry).toHaveBeenNthCalledWith(1, mockTelemetryUrl, mockClusters[0]); + expect(sendTelemetry).toHaveBeenNthCalledWith(2, mockTelemetryUrl, mockClusters[1]); + expect(updateReportFailure).toBeCalledTimes(0); + }); }); }); diff --git a/src/plugins/telemetry/server/fetcher.ts b/src/plugins/telemetry/server/fetcher.ts index 75cfac721bcd..e6d909965f5f 100644 --- a/src/plugins/telemetry/server/fetcher.ts +++ b/src/plugins/telemetry/server/fetcher.ts @@ -22,7 +22,10 @@ import { Observable } from 'rxjs'; import { take } from 'rxjs/operators'; // @ts-ignore import fetch from 'node-fetch'; -import { TelemetryCollectionManagerPluginStart } from 'src/plugins/telemetry_collection_manager/server'; +import { + TelemetryCollectionManagerPluginStart, + UsageStatsPayload, +} from 'src/plugins/telemetry_collection_manager/server'; import { PluginInitializerContext, Logger, @@ -94,6 +97,10 @@ export class FetcherTask { } } + private async areAllCollectorsReady() { + return (await this.telemetryCollectionManager?.areAllCollectorsReady()) ?? false; + } + private async sendIfDue() { if (this.isSending) { return; @@ -103,7 +110,7 @@ export class FetcherTask { try { telemetryConfig = await this.getCurrentConfigs(); } catch (err) { - this.logger.warn(`Error fetching telemetry configs: ${err}`); + this.logger.warn(`Error getting telemetry configs. (${err})`); return; } @@ -111,9 +118,22 @@ export class FetcherTask { return; } + let clusters: Array = []; + this.isSending = true; + + try { + const allCollectorsReady = await this.areAllCollectorsReady(); + if (!allCollectorsReady) { + throw new Error('Not all collectors are ready.'); + } + clusters = await this.fetchTelemetry(); + } catch (err) { + this.logger.warn(`Error fetching usage. (${err})`); + this.isSending = false; + return; + } + try { - this.isSending = true; - const clusters = await this.fetchTelemetry(); const { telemetryUrl } = telemetryConfig; for (const cluster of clusters) { await this.sendTelemetry(telemetryUrl, cluster); @@ -123,7 +143,7 @@ export class FetcherTask { } catch (err) { await this.updateReportFailure(telemetryConfig); - this.logger.warn(`Error sending telemetry usage data: ${err}`); + this.logger.warn(`Error sending telemetry usage data. (${err})`); } this.isSending = false; } diff --git a/src/plugins/telemetry_collection_manager/server/index.ts b/src/plugins/telemetry_collection_manager/server/index.ts index 8761c28e1409..36ab64731fe5 100644 --- a/src/plugins/telemetry_collection_manager/server/index.ts +++ b/src/plugins/telemetry_collection_manager/server/index.ts @@ -38,4 +38,5 @@ export { ClusterDetails, ClusterDetailsGetter, LicenseGetter, + UsageStatsPayload, } from './types'; diff --git a/src/plugins/telemetry_collection_manager/server/plugin.ts b/src/plugins/telemetry_collection_manager/server/plugin.ts index e54e7451a670..ff63262004cf 100644 --- a/src/plugins/telemetry_collection_manager/server/plugin.ts +++ b/src/plugins/telemetry_collection_manager/server/plugin.ts @@ -67,6 +67,7 @@ export class TelemetryCollectionManagerPlugin setCollection: this.setCollection.bind(this), getOptInStats: this.getOptInStats.bind(this), getStats: this.getStats.bind(this), + areAllCollectorsReady: this.areAllCollectorsReady.bind(this), }; } @@ -75,6 +76,7 @@ export class TelemetryCollectionManagerPlugin setCollection: this.setCollection.bind(this), getOptInStats: this.getOptInStats.bind(this), getStats: this.getStats.bind(this), + areAllCollectorsReady: this.areAllCollectorsReady.bind(this), }; } @@ -185,6 +187,10 @@ export class TelemetryCollectionManagerPlugin return []; } + private areAllCollectorsReady = async () => { + return await this.usageCollection?.areAllCollectorsReady(); + }; + private getOptInStatsForCollection = async ( collection: Collection, optInStatus: boolean, diff --git a/src/plugins/telemetry_collection_manager/server/types.ts b/src/plugins/telemetry_collection_manager/server/types.ts index 44970df30fd1..3b0936fb73a6 100644 --- a/src/plugins/telemetry_collection_manager/server/types.ts +++ b/src/plugins/telemetry_collection_manager/server/types.ts @@ -34,6 +34,7 @@ export interface TelemetryCollectionManagerPluginSetup { ) => void; getOptInStats: TelemetryCollectionManagerPlugin['getOptInStats']; getStats: TelemetryCollectionManagerPlugin['getStats']; + areAllCollectorsReady: TelemetryCollectionManagerPlugin['areAllCollectorsReady']; } export interface TelemetryCollectionManagerPluginStart { @@ -42,6 +43,7 @@ export interface TelemetryCollectionManagerPluginStart { ) => void; getOptInStats: TelemetryCollectionManagerPlugin['getOptInStats']; getStats: TelemetryCollectionManagerPlugin['getStats']; + areAllCollectorsReady: TelemetryCollectionManagerPlugin['areAllCollectorsReady']; } export interface TelemetryOptInStats { diff --git a/src/plugins/usage_collection/server/collector/collector_set.ts b/src/plugins/usage_collection/server/collector/collector_set.ts index 6861be7f4f76..7bf4e19c72cc 100644 --- a/src/plugins/usage_collection/server/collector/collector_set.ts +++ b/src/plugins/usage_collection/server/collector/collector_set.ts @@ -76,23 +76,27 @@ export class CollectorSet { }; public areAllCollectorsReady = async (collectorSet: CollectorSet = this) => { - // Kept this for runtime validation in JS code. if (!(collectorSet instanceof CollectorSet)) { throw new Error( `areAllCollectorsReady method given bad collectorSet parameter: ` + typeof collectorSet ); } - const collectorTypesNotReady = ( - await Promise.all( - [...collectorSet.collectors.values()].map(async (collector) => { - if (!(await collector.isReady())) { - return collector.type; - } - }) - ) - ).filter((collectorType): collectorType is string => !!collectorType); - const allReady = collectorTypesNotReady.length === 0; + const collectors = [...collectorSet.collectors.values()]; + const collectorsWithStatus = await Promise.all( + collectors.map(async (collector) => { + return { + isReady: await collector.isReady(), + collector, + }; + }) + ); + + const collectorsTypesNotReady = collectorsWithStatus + .filter((collectorWithStatus) => collectorWithStatus.isReady === false) + .map((collectorWithStatus) => collectorWithStatus.collector.type); + + const allReady = collectorsTypesNotReady.length === 0; if (!allReady && this.maximumWaitTimeForAllCollectorsInS >= 0) { const nowTimestamp = +new Date(); @@ -102,10 +106,11 @@ export class CollectorSet { const timeLeftInMS = this.maximumWaitTimeForAllCollectorsInS * 1000 - timeWaitedInMS; if (timeLeftInMS <= 0) { this.logger.debug( - `All collectors are not ready (waiting for ${collectorTypesNotReady.join(',')}) ` + + `All collectors are not ready (waiting for ${collectorsTypesNotReady.join(',')}) ` + `but we have waited the required ` + `${this.maximumWaitTimeForAllCollectorsInS}s and will return data from all collectors that are ready.` ); + return true; } else { this.logger.debug(`All collectors are not ready. Waiting for ${timeLeftInMS}ms longer.`); From a8b1b9e281cc24f97781bc0c3b91f0d09a607060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Mon, 5 Oct 2020 15:19:36 +0200 Subject: [PATCH 06/16] [Index management] Update TemplateDeserialized interface (#78913) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../home/index_templates_tab.test.ts | 4 +-- .../template_clone.test.tsx | 2 +- .../common/lib/template_serialization.ts | 4 +-- .../common/types/templates.ts | 4 +-- .../template_form/template_form.tsx | 27 ++++++++++--------- .../template_details_content.tsx | 4 +-- 6 files changed, 22 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts index 06f57896d490..37df55f78425 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts +++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts @@ -127,7 +127,7 @@ describe('Index Templates tab', () => { const indexTemplate = templates[i]; const { name, indexPatterns, ilmPolicy, composedOf, template } = indexTemplate; - const hasContent = !!template.settings || !!template.mappings || !!template.aliases; + const hasContent = !!template?.settings || !!template?.mappings || !!template?.aliases; const ilmPolicyName = ilmPolicy && ilmPolicy.name ? ilmPolicy.name : ''; const composedOfString = composedOf ? composedOf.join(',') : ''; @@ -152,7 +152,7 @@ describe('Index Templates tab', () => { const legacyIndexTemplate = legacyTemplates[i]; const { name, indexPatterns, ilmPolicy, template } = legacyIndexTemplate; - const hasContent = !!template.settings || !!template.mappings || !!template.aliases; + const hasContent = !!template?.settings || !!template?.mappings || !!template?.aliases; const ilmPolicyName = ilmPolicy && ilmPolicy.name ? ilmPolicy.name : ''; try { diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx index 8b74e9fb0cdf..f0c0128fd646 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx +++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx @@ -112,7 +112,7 @@ describe('', () => { name: `${templateToClone.name}-copy`, indexPatterns: DEFAULT_INDEX_PATTERNS, }; - // @ts-expect-error + delete expected.template; // As no settings, mappings or aliases have been defined, no "template" param is sent expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected); diff --git a/x-pack/plugins/index_management/common/lib/template_serialization.ts b/x-pack/plugins/index_management/common/lib/template_serialization.ts index 1803d89a4001..bb7604f06c30 100644 --- a/x-pack/plugins/index_management/common/lib/template_serialization.ts +++ b/x-pack/plugins/index_management/common/lib/template_serialization.ts @@ -85,7 +85,7 @@ export function deserializeTemplateList( ): TemplateListItem[] { return indexTemplates.map(({ name, index_template: templateSerialized }) => { const { - template: { mappings, settings, aliases }, + template: { mappings, settings, aliases } = {}, ...deserializedTemplate } = deserializeTemplate({ name, ...templateSerialized }, cloudManagedTemplatePrefix); @@ -149,7 +149,7 @@ export function deserializeLegacyTemplateList( ): TemplateListItem[] { return Object.entries(indexTemplatesByName).map(([name, templateSerialized]) => { const { - template: { mappings, settings, aliases }, + template: { mappings, settings, aliases } = {}, ...deserializedTemplate } = deserializeLegacyTemplate({ name, ...templateSerialized }, cloudManagedTemplatePrefix); diff --git a/x-pack/plugins/index_management/common/types/templates.ts b/x-pack/plugins/index_management/common/types/templates.ts index eda00ec81915..d1b51fe5b89b 100644 --- a/x-pack/plugins/index_management/common/types/templates.ts +++ b/x-pack/plugins/index_management/common/types/templates.ts @@ -13,7 +13,7 @@ import { Mappings } from './mappings'; */ export interface TemplateSerialized { index_patterns: string[]; - template: { + template?: { settings?: IndexSettings; aliases?: Aliases; mappings?: Mappings; @@ -33,7 +33,7 @@ export interface TemplateSerialized { export interface TemplateDeserialized { name: string; indexPatterns: string[]; - template: { + template?: { settings?: IndexSettings; aliases?: Aliases; mappings?: Mappings; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx index 3a03835e8597..8e84abb5ce49 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx @@ -117,7 +117,7 @@ export const TemplateForm = ({ }; const { - template: { settings, mappings, aliases }, + template: { settings, mappings, aliases } = {}, composedOf, _kbnMeta, ...logistics @@ -170,18 +170,19 @@ export const TemplateForm = ({ const cleanupTemplateObject = (template: TemplateDeserialized) => { const outputTemplate = { ...template }; - if (outputTemplate.template.settings === undefined) { - delete outputTemplate.template.settings; - } - if (outputTemplate.template.mappings === undefined) { - delete outputTemplate.template.mappings; - } - if (outputTemplate.template.aliases === undefined) { - delete outputTemplate.template.aliases; - } - if (Object.keys(outputTemplate.template).length === 0) { - // @ts-expect-error - delete outputTemplate.template; + if (outputTemplate.template) { + if (outputTemplate.template.settings === undefined) { + delete outputTemplate.template.settings; + } + if (outputTemplate.template.mappings === undefined) { + delete outputTemplate.template.mappings; + } + if (outputTemplate.template.aliases === undefined) { + delete outputTemplate.template.aliases; + } + if (Object.keys(outputTemplate.template).length === 0) { + delete outputTemplate.template; + } } return outputTemplate; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx index 94891297c857..48083f324de3 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx @@ -161,9 +161,7 @@ export const TemplateDetailsContent = ({ } if (templateDetails) { - const { - template: { settings, mappings, aliases }, - } = templateDetails; + const { template: { settings, mappings, aliases } = {} } = templateDetails; const tabToComponentMap: Record = { [SUMMARY_TAB_ID]: , From 5ca87308eac4b4971521b894534dccfbabc55893 Mon Sep 17 00:00:00 2001 From: Mikhail Shustov Date: Mon, 5 Oct 2020 17:00:27 +0300 Subject: [PATCH 07/16] global search to ts refs (#79446) --- x-pack/plugins/global_search/tsconfig.json | 21 +++++++++++++++++++++ x-pack/test/tsconfig.json | 3 ++- x-pack/tsconfig.json | 6 ++++-- x-pack/tsconfig.refs.json | 3 ++- 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 x-pack/plugins/global_search/tsconfig.json diff --git a/x-pack/plugins/global_search/tsconfig.json b/x-pack/plugins/global_search/tsconfig.json new file mode 100644 index 000000000000..2d05328f445d --- /dev/null +++ b/x-pack/plugins/global_search/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "composite": true, + "outDir": "./target/types", + "emitDeclarationOnly": true, + "declaration": true, + "declarationMap": true + }, + "include": [ + "public/**/*", + "server/**/*", + "common/**/*", + "../../../typings/**/*" + ], + "references": [ + { "path": "../../../src/core/tsconfig.json" }, + { "path": "../licensing/tsconfig.json" } + ] +} + diff --git a/x-pack/test/tsconfig.json b/x-pack/test/tsconfig.json index 628f2edefb07..8e378ff1f4a6 100644 --- a/x-pack/test/tsconfig.json +++ b/x-pack/test/tsconfig.json @@ -20,6 +20,7 @@ { "path": "../../src/core/tsconfig.json" }, { "path": "../../src/plugins/kibana_utils/tsconfig.json" }, { "path": "../../src/plugins/kibana_react/tsconfig.json" }, - { "path": "../plugins/licensing/tsconfig.json" } + { "path": "../plugins/licensing/tsconfig.json" }, + { "path": "../plugins/global_search/tsconfig.json" }, ] } diff --git a/x-pack/tsconfig.json b/x-pack/tsconfig.json index 9a52aca381e8..f751aac1806d 100644 --- a/x-pack/tsconfig.json +++ b/x-pack/tsconfig.json @@ -12,7 +12,8 @@ "plugins/security_solution/cypress/**/*", "plugins/apm/e2e/cypress/**/*", "plugins/apm/scripts/**/*", - "plugins/licensing/**/*" + "plugins/licensing/**/*", + "plugins/global_search/**/*", ], "compilerOptions": { "paths": { @@ -28,6 +29,7 @@ { "path": "../src/core/tsconfig.json" }, { "path": "../src/plugins/kibana_utils/tsconfig.json" }, { "path": "../src/plugins/kibana_react/tsconfig.json" }, - { "path": "./plugins/licensing/tsconfig.json" } + { "path": "./plugins/licensing/tsconfig.json" }, + { "path": "./plugins/global_search/tsconfig.json" }, ] } diff --git a/x-pack/tsconfig.refs.json b/x-pack/tsconfig.refs.json index 0b4c46b893aa..a389bbcf0272 100644 --- a/x-pack/tsconfig.refs.json +++ b/x-pack/tsconfig.refs.json @@ -1,6 +1,7 @@ { "include": [], "references": [ - { "path": "./plugins/licensing/tsconfig.json" } + { "path": "./plugins/licensing/tsconfig.json" }, + { "path": "./plugins/global_search/tsconfig.json" }, ] } From e067604d7800a76ab99440405e291e8b2764842f Mon Sep 17 00:00:00 2001 From: Quynh Nguyen <43350163+qn895@users.noreply.github.com> Date: Mon, 5 Oct 2020 09:06:55 -0500 Subject: [PATCH 08/16] [ML] Only adjust the bounds of SMV if annotations are visible (#79210) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/timeseries_chart/timeseries_chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js index 4c87c3b374ff..448d39db3e44 100644 --- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js +++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js @@ -672,7 +672,7 @@ class TimeseriesChartIntl extends Component { // if annotations are present, we extend yMax to avoid overlap // between annotation labels, chart lines and anomalies. - if (focusAnnotationData && focusAnnotationData.length > 0) { + if (showAnnotations && focusAnnotationData && focusAnnotationData.length > 0) { const levels = getAnnotationLevels(focusAnnotationData); const maxLevel = d3.max(Object.keys(levels).map((key) => levels[key])); // TODO needs revisiting to be a more robust normalization From cc633a4a915ed59339af6ea79e7779dff2afed04 Mon Sep 17 00:00:00 2001 From: Jonathan Buttner <56361221+jonathan-buttner@users.noreply.github.com> Date: Mon, 5 Oct 2020 10:11:28 -0400 Subject: [PATCH 09/16] [Security Solution] Adding tests for dns pipeline in the endpoint package (#79177) * Adding tests for dns pipeline in the endpoint package * Adding test to make sure non dns events are ingested correctly * Bring the docker container with the new endpoint package Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../common/endpoint/types/index.ts | 5 +- .../endpoint/pipeline/dns/data.json.gz | Bin 0 -> 1256 bytes .../ingest_manager_api_integration/config.ts | 2 +- .../apis/package.ts | 74 ++++++++++++++++++ 4 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 x-pack/test/functional/es_archives/endpoint/pipeline/dns/data.json.gz diff --git a/x-pack/plugins/security_solution/common/endpoint/types/index.ts b/x-pack/plugins/security_solution/common/endpoint/types/index.ts index abb0ccee8d90..0054c1f1abdd 100644 --- a/x-pack/plugins/security_solution/common/endpoint/types/index.ts +++ b/x-pack/plugins/security_solution/common/endpoint/types/index.ts @@ -718,7 +718,10 @@ export type SafeEndpointEvent = Partial<{ forwarded_ip: ECSField; }>; dns: Partial<{ - question: Partial<{ name: ECSField }>; + question: Partial<{ + name: ECSField; + type: ECSField; + }>; }>; process: Partial<{ entity_id: ECSField; diff --git a/x-pack/test/functional/es_archives/endpoint/pipeline/dns/data.json.gz b/x-pack/test/functional/es_archives/endpoint/pipeline/dns/data.json.gz new file mode 100644 index 0000000000000000000000000000000000000000..5caab4767dbec92b37150a272b3a7e0f1b232db3 GIT binary patch literal 1256 zcmVQOZ*BnXS6gr5MihR}udsM()!3Tx6&$TpHjv$H zV@L`lB4rf~_5cpX+w~EtNdx zmX5{30|`>G@(5qxtM7^3PH@eQ&sQJusOEAW_M=bUC=(YFp+{#zC}6`xrlA)xKjaF1 zpdn9`kn$;u$FfHUBn|jlDPd{ses=>azjJ>=6HX?Pu%#ju$r#B9x3Oj$$i{|(bFf$kc{#!RjZ>+th?4>V4E z7K&|4sVJJItsUvip7l2OiRP2|n&GJ(&gl{P{Ygv_oVG+6r zZ91JQL&k;yRa`bH6>P7=KW|)DFV1Us@b1)0-`(tFMBS~7axKA%p`hI&(11XEZc%M_ zTs8xPR*$^rwSImW;=|4)5_eS~=o1^K(Opcls!=cBOP6puWbqv2{wfr5H5Qw-uX!by zFk$D_C*{o}xU9-We9>xNf4)x6x)r@$^?%DAdX|?Q0{~=3vkK%kCd^BNXHQikiV*IOWz$z0}9#G4aD=O;Co@Z8Mtf_rd)lGF^Sp}_VJ29+U3W7ge z%*?j&{?1Q`yKMp?d-=h5`Pr}eilkVweK>ZZBfBDEpJdZsx`F1iX#yxBUB4H!82xxI`H2MB7zGrLvIMRrKBAI{Q4;7$SRkPDSQ6(! z!pAG66>{frTblZOBrO3O;9B~VCU9RQ;C17EeZY%%l0fi~>_hR0#iG52wio+1htXbM zHappZfC~w~cnc9Y|8QGwV;}6?e)=+Lv`7AJt;@Ujow;+0P_x~|7wsYL-Z;FgHb&j{ z*{FHbMcqXQ*4A(}zG${xknK#Hr#fofpX-gqaOzY)d?nzAUTY3F-9%G+J;!%rmaqY@dqaA9sesZp z*%8_=h(%dOSVe}pGjC}^-=Mp@gZ{pB_wpU+E=xJI zJljrEH@h95CByhYh7V-;K!%?u!)ke(4Xdhw%LtXrmQhwMwaAIlh7t>HTapZELOq|z zF`P;o%U~QUaHu>bTUO>|#F%h*@{;@zX-jFiLj { + describe('network processors', () => { + let networkIndexData: InsertedEvents; + + after(async () => { + await resolver.deleteData(networkIndexData); + }); + + it('handles events without the `network.protocol` field being defined', async () => { + const eventWithoutNetworkObject = generator.generateEvent(); + // ensure that `network.protocol` does not exist in the event to test that the pipeline handles those type of events + delete eventWithoutNetworkObject.network; + + // this call will fail if the pipeline fails + networkIndexData = await resolver.insertEvents([eventWithoutNetworkObject], networkIndex); + const eventWithBothIPs = await searchForID( + networkIndexData.eventsInfo[0]._id + ); + + // ensure that the event was inserted into ES + expect(eventWithBothIPs.body.hits.hits[0]._source.event?.id).to.be( + eventWithoutNetworkObject.event?.id + ); + }); + }); + + describe('dns processor', () => { + before(async () => { + await esArchiver.load('endpoint/pipeline/dns', { useCreate: true }); + }); + + after(async () => { + await deleteEventsStream(getService); + }); + + it('does not set dns.question.type if it is already populated', async () => { + // this id comes from the es archive file endpoint/pipeline/dns + const id = 'LrLSOVHVsFY94TAi++++++eF'; + const { body }: { body: ResolverPaginatedEvents } = await supertest + .post(`/api/endpoint/resolver/events?limit=1`) + .set('kbn-xsrf', 'xxx') + .send({ + filter: `event.id:"${id}"`, + }) + .expect(200); + expect(body.events.length).to.eql(1); + expect((body.events[0] as SafeEndpointEvent).dns?.question?.name).to.eql('www.google.com'); + expect((body.events[0] as SafeEndpointEvent).dns?.question?.type).to.eql('INVALID_VALUE'); + }); + + it('sets dns.question.type if it is not populated', async () => { + // this id comes from the es archive file endpoint/pipeline/dns + const id = 'LrLSOVHVsFY94TAi++++++eP'; + const { body }: { body: ResolverPaginatedEvents } = await supertest + .post(`/api/endpoint/resolver/events?limit=1`) + .set('kbn-xsrf', 'xxx') + .send({ + filter: `event.id:"${id}"`, + }) + .expect(200); + expect(body.events.length).to.eql(1); + expect((body.events[0] as SafeEndpointEvent).dns?.question?.name).to.eql('www.aol.com'); + // This value is parsed out of the message field in the event. type 28 = AAAA + expect((body.events[0] as SafeEndpointEvent).dns?.question?.type).to.eql('AAAA'); + }); + }); + describe('ingested processor', () => { let event: Event; let genData: InsertedEvents; @@ -92,6 +165,7 @@ export default function ({ getService }: FtrProviderContext) { const eventWithSourceOnly = generator.generateEvent({ extensions: { source: { ip: '8.8.8.8' } }, }); + networkIndexData = await resolver.insertEvents( [eventWithBothIPs, eventWithSourceOnly], networkIndex From a66259aaa10f51f27583788d5f0711e9983e5c59 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 5 Oct 2020 10:16:06 -0400 Subject: [PATCH 10/16] PR template a11y checklist item improvement (#79243) --- .github/PULL_REQUEST_TEMPLATE.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 534b1cea6242..c366819c49dd 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -9,8 +9,9 @@ Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios -- [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist) -- [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server) +- [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) +- [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) +- [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers From fdc6562350a83511da49c2beaafee17740a1a655 Mon Sep 17 00:00:00 2001 From: MadameSheema Date: Mon, 5 Oct 2020 16:17:48 +0200 Subject: [PATCH 11/16] adds EQL sequence rule test (#79287) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../alerts_detection_rules_eql.spec.ts | 42 ++++++++++++++++++- .../security_solution/cypress/objects/rule.ts | 19 +++++++++ .../cypress/tasks/create_new_rule.ts | 1 - 3 files changed, 60 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts b/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts index ca7832603f13..a7ddba94bffd 100644 --- a/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts +++ b/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { eqlRule, indexPatterns } from '../objects/rule'; +import { eqlRule, eqlSequenceRule, indexPatterns } from '../objects/rule'; import { ALERT_RULE_METHOD, @@ -85,6 +85,7 @@ const expectedMitre = eqlRule.mitre .join(''); const expectedNumberOfRules = 1; const expectedNumberOfAlerts = 7; +const expectedNumberOfSequenceAlerts = 1; describe('Detection rules, EQL', () => { before(() => { @@ -172,4 +173,43 @@ describe('Detection rules, EQL', () => { cy.get(ALERT_RULE_SEVERITY).first().should('have.text', eqlRule.severity.toLowerCase()); cy.get(ALERT_RULE_RISK_SCORE).first().should('have.text', eqlRule.riskScore); }); + + it('Creates and activates a new EQL rule with a sequence', () => { + loginAndWaitForPageWithoutDateRange(DETECTIONS_URL); + waitForAlertsPanelToBeLoaded(); + waitForAlertsIndexToBeCreated(); + goToManageAlertsDetectionRules(); + waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded(); + goToCreateNewRule(); + selectEqlRuleType(); + fillDefineEqlRuleAndContinue(eqlSequenceRule); + fillAboutRuleAndContinue(eqlSequenceRule); + fillScheduleRuleAndContinue(eqlSequenceRule); + createAndActivateRule(); + + cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)'); + + changeToThreeHundredRowsPerPage(); + waitForRulesToBeLoaded(); + + cy.get(RULES_TABLE).then(($table) => { + cy.wrap($table.find(RULES_ROW).length).should('eql', expectedNumberOfRules); + }); + + filterByCustomRules(); + goToRuleDetails(); + refreshPage(); + waitForTheRuleToBeExecuted(); + + cy.get(NUMBER_OF_ALERTS) + .invoke('text') + .then((numberOfAlertsText) => { + cy.wrap(parseInt(numberOfAlertsText, 10)).should('eql', expectedNumberOfSequenceAlerts); + }); + cy.get(ALERT_RULE_NAME).first().should('have.text', eqlSequenceRule.name); + cy.get(ALERT_RULE_VERSION).first().should('have.text', '1'); + cy.get(ALERT_RULE_METHOD).first().should('have.text', 'eql'); + cy.get(ALERT_RULE_SEVERITY).first().should('have.text', eqlSequenceRule.severity.toLowerCase()); + cy.get(ALERT_RULE_RISK_SCORE).first().should('have.text', eqlSequenceRule.riskScore); + }); }); diff --git a/x-pack/plugins/security_solution/cypress/objects/rule.ts b/x-pack/plugins/security_solution/cypress/objects/rule.ts index f375eccd902c..0bb4c8e35609 100644 --- a/x-pack/plugins/security_solution/cypress/objects/rule.ts +++ b/x-pack/plugins/security_solution/cypress/objects/rule.ts @@ -230,6 +230,25 @@ export const eqlRule: CustomRule = { lookBack, }; +export const eqlSequenceRule: CustomRule = { + customQuery: + 'sequence with maxspan=30s\ + [any where process.name == "which"]\ + [any where process.name == "xargs"]', + name: 'New EQL Sequence Rule', + description: 'New EQL rule description.', + severity: 'High', + riskScore: '17', + tags: ['test', 'newRule'], + referenceUrls: ['https://www.google.com/', 'https://elastic.co/'], + falsePositivesExamples: ['False1', 'False2'], + mitre: [mitre1, mitre2], + note: '# test markdown', + timelineId: '0162c130-78be-11ea-9718-118a926974a4', + runsEvery, + lookBack, +}; + export const indexPatterns = [ 'apm-*-transaction*', 'auditbeat-*', diff --git a/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts b/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts index 914566a13a9a..079c18b6abe6 100644 --- a/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts +++ b/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts @@ -223,7 +223,6 @@ export const fillDefineThresholdRuleAndContinue = (rule: ThresholdRule) => { export const fillDefineEqlRuleAndContinue = (rule: CustomRule) => { cy.get(EQL_QUERY_INPUT).type(rule.customQuery); - cy.get(EQL_QUERY_INPUT).invoke('text').should('eq', rule.customQuery); cy.get(DEFINE_CONTINUE_BUTTON).should('exist').click({ force: true }); cy.get(EQL_QUERY_INPUT).should('not.exist'); From 13a737e67530d98afb3bb0384968205e522392a6 Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Mon, 5 Oct 2020 09:18:24 -0500 Subject: [PATCH 12/16] Storybook and Jest cleanup (#79305) * Fix all broken stories * Get rid of all Jest warnings * Remove `@ts-expect-error`s added for JSON imports and fix their type errors * Convert some stories to [Component Story Format](https://storybook.js.org/docs/react/api/csf) * Replace story for Service Map with many external services with one for the popover with many external services * Center and fit cytoscape maps in stories * Rename some files to snake_case --- .../ErrorCountAlertTrigger/index.stories.tsx | 55 +- .../components/alerting/fields.test.tsx | 2 +- .../apm/public/components/alerting/fields.tsx | 4 +- .../List/__test__/List.test.tsx | 1 - .../__test__/__snapshots__/List.test.tsx.snap | 60 +- .../List/__test__/props.json | 16 +- .../__stories__/CoreVitals.stories.tsx | 152 +- .../ServiceMap/Popover/Popover.stories.tsx | 176 +- .../Popover/service_stats_list.stories.tsx | 63 + .../__stories__/Cytoscape.stories.tsx | 623 +++-- .../CytoscapeExampleData.stories.tsx | 275 --- .../app/ServiceMap/__stories__/centerer.tsx | 27 + .../cytoscape_example_data.stories.tsx | 228 ++ .../example_grouped_connections.json | 875 +++++++ .../example_response_one_domain_many_ips.json | 2122 ----------------- ...yBanner.test.tsx => empty_banner.test.tsx} | 4 +- ...sx.snap => service_overview.test.tsx.snap} | 0 ...iew.test.tsx => service_overview.test.tsx} | 32 +- ...Preview.test.tsx => link_preview.test.tsx} | 4 +- .../CustomizeUI/CustomLink/index.test.tsx | 9 +- ...TraceLink.test.tsx => trace_link.test.tsx} | 23 +- .../WaterfallContainer.stories.tsx | 159 +- .../TransactionList.stories.tsx | 58 +- .../shared/ApmHeader/ApmHeader.stories.tsx | 30 - .../shared/ApmHeader/apm_header.stories.tsx | 49 + ...tePicker.test.tsx => date_picker.test.tsx} | 14 +- .../LicensePrompt/LicensePrompt.stories.tsx | 40 +- ...discover_transaction_button.test.tsx.snap} | 0 ...x => discover_transaction_button.test.tsx} | 8 +- ...Transaction.json => mock_transaction.json} | 5 +- ... => anomaly_detection_setup_link.test.tsx} | 4 +- ...t.test.tsx => url_params_context.test.tsx} | 16 +- ...t.tsx => use_fetcher.integration.test.tsx} | 10 +- .../plugins/apm/public/utils/testHelpers.tsx | 6 +- .../service_map/group_resource_nodes.test.ts | 8 +- .../annotations/__fixtures__/no_versions.json | 2 +- .../annotations/__fixtures__/one_version.json | 2 +- .../lib/services/annotations/index.test.ts | 40 +- 38 files changed, 2010 insertions(+), 3192 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/centerer.tsx create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_grouped_connections.json delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json rename x-pack/plugins/apm/public/components/app/ServiceMap/{EmptyBanner.test.tsx => empty_banner.test.tsx} (95%) rename x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/{ServiceOverview.test.tsx.snap => service_overview.test.tsx.snap} (100%) rename x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/{ServiceOverview.test.tsx => service_overview.test.tsx} (87%) rename x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/{LinkPreview.test.tsx => link_preview.test.tsx} (97%) rename x-pack/plugins/apm/public/components/app/TraceLink/{__test__/TraceLink.test.tsx => trace_link.test.tsx} (83%) delete mode 100644 x-pack/plugins/apm/public/components/shared/ApmHeader/ApmHeader.stories.tsx create mode 100644 x-pack/plugins/apm/public/components/shared/ApmHeader/apm_header.stories.tsx rename x-pack/plugins/apm/public/components/shared/DatePicker/{__test__/DatePicker.test.tsx => date_picker.test.tsx} (91%) rename x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/{DiscoverTransactionButton.test.tsx.snap => discover_transaction_button.test.tsx.snap} (100%) rename x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/{DiscoverTransactionButton.test.tsx => discover_transaction_button.test.tsx} (78%) rename x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/{mockTransaction.json => mock_transaction.json} (98%) rename x-pack/plugins/apm/public/components/shared/Links/apm/{AnomalyDetectionSetupLink.test.tsx => anomaly_detection_setup_link.test.tsx} (96%) rename x-pack/plugins/apm/public/context/UrlParamsContext/{__tests__/UrlParamsContext.test.tsx => url_params_context.test.tsx} (94%) rename x-pack/plugins/apm/public/hooks/{useFetcher.integration.test.tsx => use_fetcher.integration.test.tsx} (94%) diff --git a/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx b/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx index c30cef7210a4..1a565ab8708b 100644 --- a/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx +++ b/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx @@ -4,8 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { ErrorCountAlertTrigger } from '.'; import { ApmPluginContextValue } from '../../../context/ApmPluginContext'; import { @@ -13,32 +13,35 @@ import { MockApmPluginContextWrapper, } from '../../../context/ApmPluginContext/MockApmPluginContext'; -storiesOf('app/ErrorCountAlertTrigger', module).add( - 'example', - () => { - const params = { - threshold: 2, - window: '5m', - }; - - return ( +export default { + title: 'app/ErrorCountAlertTrigger', + component: ErrorCountAlertTrigger, + decorators: [ + (Story: React.ComponentClass) => ( -
- undefined} - setAlertProperty={() => undefined} - /> -
+ +
+ +
+ - ); - }, - { - info: { - propTablesExclude: [ErrorCountAlertTrigger, MockApmPluginContextWrapper], - source: false, - }, - } -); + ), + ], +}; + +export function Example() { + const params = { + threshold: 2, + window: '5m', + }; + + return ( + undefined} + setAlertProperty={() => undefined} + /> + ); +} diff --git a/x-pack/plugins/apm/public/components/alerting/fields.test.tsx b/x-pack/plugins/apm/public/components/alerting/fields.test.tsx index 7ffb46d3dda4..5af05cedf7fa 100644 --- a/x-pack/plugins/apm/public/components/alerting/fields.test.tsx +++ b/x-pack/plugins/apm/public/components/alerting/fields.test.tsx @@ -9,7 +9,7 @@ import { act, fireEvent, render } from '@testing-library/react'; import { expectTextsInDocument } from '../../utils/testHelpers'; describe('alerting fields', () => { - describe('Service Fiels', () => { + describe('Service Field', () => { it('renders with value', () => { const component = render(); expectTextsInDocument(component, ['foo']); diff --git a/x-pack/plugins/apm/public/components/alerting/fields.tsx b/x-pack/plugins/apm/public/components/alerting/fields.tsx index aac64649546c..858604d2baa2 100644 --- a/x-pack/plugins/apm/public/components/alerting/fields.tsx +++ b/x-pack/plugins/apm/public/components/alerting/fields.tsx @@ -43,7 +43,7 @@ export function EnvironmentField({ })} > List', () => { - {/* @ts-expect-error invalid json props */} diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap index 5183432b4ae0..f45b4913243e 100644 --- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap +++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap @@ -454,30 +454,38 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` Object { "culprit": "elasticapm.contrib.django.client.capture", "groupId": "a0ce2c8978ef92cdf2ff163ae28576ee", + "handled": true, "latestOccurrenceAt": "2018-01-10T10:06:37.561Z", "message": "About to blow up!", "occurrenceCount": 75, + "type": "AssertionError", }, Object { "culprit": "opbeans.views.oopsie", "groupId": "f3ac95493913cc7a3cfec30a19d2120a", + "handled": true, "latestOccurrenceAt": "2018-01-10T10:06:37.630Z", "message": "AssertionError: ", "occurrenceCount": 75, + "type": "AssertionError", }, Object { "culprit": "opbeans.tasks.update_stats", "groupId": "e90863d04b7a692435305f09bbe8c840", + "handled": true, "latestOccurrenceAt": "2018-01-10T10:06:36.859Z", "message": "AssertionError: Bad luck!", "occurrenceCount": 24, + "type": "AssertionError", }, Object { "culprit": "opbeans.views.customer", "groupId": "8673d8bf7a032e387c101bafbab0d2bc", + "handled": true, "latestOccurrenceAt": "2018-01-10T10:06:13.211Z", "message": "Customer with ID 8517 not found", "occurrenceCount": 15, + "type": "AssertionError", }, ] } @@ -818,7 +826,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` query={ Object { "end": "2018-01-10T10:06:41.050Z", - "kuery": "error.exception.type:undefined", + "kuery": "error.exception.type:AssertionError", "page": 0, "serviceName": "opbeans-python", "start": "2018-01-10T09:51:41.050Z", @@ -826,16 +834,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` } } serviceName="opbeans-python" + title="AssertionError" > + title="AssertionError" + > + AssertionError +
@@ -1052,7 +1065,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` query={ Object { "end": "2018-01-10T10:06:41.050Z", - "kuery": "error.exception.type:undefined", + "kuery": "error.exception.type:AssertionError", "page": 0, "serviceName": "opbeans-python", "start": "2018-01-10T09:51:41.050Z", @@ -1060,16 +1073,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` } } serviceName="opbeans-python" + title="AssertionError" > + title="AssertionError" + > + AssertionError + @@ -1286,7 +1304,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` query={ Object { "end": "2018-01-10T10:06:41.050Z", - "kuery": "error.exception.type:undefined", + "kuery": "error.exception.type:AssertionError", "page": 0, "serviceName": "opbeans-python", "start": "2018-01-10T09:51:41.050Z", @@ -1294,16 +1312,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` } } serviceName="opbeans-python" + title="AssertionError" > + title="AssertionError" + > + AssertionError + @@ -1520,7 +1543,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` query={ Object { "end": "2018-01-10T10:06:41.050Z", - "kuery": "error.exception.type:undefined", + "kuery": "error.exception.type:AssertionError", "page": 0, "serviceName": "opbeans-python", "start": "2018-01-10T09:51:41.050Z", @@ -1528,16 +1551,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` } } serviceName="opbeans-python" + title="AssertionError" > + title="AssertionError" + > + AssertionError + diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json index 431a6c71b103..ad49cd048aee 100644 --- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json +++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json @@ -2,31 +2,39 @@ "items": [ { "message": "About to blow up!", + "type": "AssertionError", "occurrenceCount": 75, "culprit": "elasticapm.contrib.django.client.capture", "groupId": "a0ce2c8978ef92cdf2ff163ae28576ee", - "latestOccurrenceAt": "2018-01-10T10:06:37.561Z" + "latestOccurrenceAt": "2018-01-10T10:06:37.561Z", + "handled": true }, { "message": "AssertionError: ", + "type": "AssertionError", "occurrenceCount": 75, "culprit": "opbeans.views.oopsie", "groupId": "f3ac95493913cc7a3cfec30a19d2120a", - "latestOccurrenceAt": "2018-01-10T10:06:37.630Z" + "latestOccurrenceAt": "2018-01-10T10:06:37.630Z", + "handled": true }, { "message": "AssertionError: Bad luck!", + "type": "AssertionError", "occurrenceCount": 24, "culprit": "opbeans.tasks.update_stats", "groupId": "e90863d04b7a692435305f09bbe8c840", - "latestOccurrenceAt": "2018-01-10T10:06:36.859Z" + "latestOccurrenceAt": "2018-01-10T10:06:36.859Z", + "handled": true }, { "message": "Customer with ID 8517 not found", + "type": "AssertionError", "occurrenceCount": 15, "culprit": "opbeans.views.customer", "groupId": "8673d8bf7a032e387c101bafbab0d2bc", - "latestOccurrenceAt": "2018-01-10T10:06:13.211Z" + "latestOccurrenceAt": "2018-01-10T10:06:13.211Z", + "handled": true } ], "location": { diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx index a611df00f1e6..6ab75469e2b1 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx @@ -4,90 +4,78 @@ * you may not use this file except in compliance with the Elastic License. */ -import { storiesOf } from '@storybook/react'; -import React from 'react'; +import React, { ComponentType } from 'react'; +import { IntlProvider } from 'react-intl'; +import { Observable } from 'rxjs'; +import { CoreStart } from 'src/core/public'; +import { createKibanaReactContext } from '../../../../../../../../../src/plugins/kibana_react/public'; import { EuiThemeProvider } from '../../../../../../../observability/public'; import { CoreVitalItem } from '../CoreVitalItem'; import { LCP_LABEL } from '../translations'; -storiesOf('app/RumDashboard/WebCoreVitals', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'Basic', - () => { - return ( - - ); - }, - { - info: { - propTables: false, - source: false, - }, - } - ) - .add( - '50% Good', - () => { - return ( - - ); - }, - { - info: { - propTables: false, - source: false, - }, - } - ) - .add( - '100% Bad', - () => { - return ( - - ); - }, - { - info: { - propTables: false, - source: false, - }, - } - ) - .add( - '100% Average', - () => { - return ( - - ); - }, - { - info: { - propTables: false, - source: false, - }, - } +const KibanaReactContext = createKibanaReactContext(({ + uiSettings: { get: () => {}, get$: () => new Observable() }, +} as unknown) as Partial); + +export default { + title: 'app/RumDashboard/CoreVitalItem', + component: CoreVitalItem, + decorators: [ + (Story: ComponentType) => ( + + + + + + + + ), + ], +}; + +export function Basic() { + return ( + + ); +} + +export function FiftyPercentGood() { + return ( + + ); +} + +export function OneHundredPercentBad() { + return ( + + ); +} + +export function OneHundredPercentAverage() { + return ( + ); +} diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx index 55a0bddcc781..70eb5eaf8e57 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx @@ -4,132 +4,92 @@ * you may not use this file except in compliance with the Elastic License. */ -import { storiesOf } from '@storybook/react'; import cytoscape from 'cytoscape'; import { HttpSetup } from 'kibana/public'; -import React from 'react'; +import React, { ComponentType } from 'react'; import { EuiThemeProvider } from '../../../../../../observability/public'; import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; import { MockUrlParamsContextProvider } from '../../../../context/UrlParamsContext/MockUrlParamsContextProvider'; import { createCallApmApi } from '../../../../services/rest/createCallApmApi'; import { CytoscapeContext } from '../Cytoscape'; import { Popover } from './'; -import { ServiceStatsList } from './ServiceStatsList'; +import exampleGroupedConnectionsData from '../__stories__/example_grouped_connections.json'; -storiesOf('app/ServiceMap/Popover', module) - .addDecorator((storyFn) => { +export default { + title: 'app/ServiceMap/Popover', + component: Popover, + decorators: [ + (Story: ComponentType) => { + const httpMock = ({ + get: async () => ({ + avgCpuUsage: 0.32809666568309237, + avgErrorRate: 0.556068173242986, + avgMemoryUsage: 0.5504868173242986, + transactionStats: { + avgRequestsPerMinute: 164.47222031860858, + avgTransactionDuration: 61634.38905590272, + }, + }), + } as unknown) as HttpSetup; + + createCallApmApi(httpMock); + + return ( + + + +
+ +
+ + + + ); + }, + ], +}; + +export function Example() { + return ; +} +Example.decorators = [ + (Story: ComponentType) => { const node = { data: { id: 'example service', 'service.name': 'example service' }, }; - const cy = cytoscape({ elements: [node] }); - const httpMock = ({ - get: async () => ({ - avgCpuUsage: 0.32809666568309237, - avgErrorRate: 0.556068173242986, - avgMemoryUsage: 0.5504868173242986, - transactionStats: { - avgRequestsPerMinute: 164.47222031860858, - avgTransactionDuration: 61634.38905590272, - }, - }), - } as unknown) as HttpSetup; - createCallApmApi(httpMock); + const cy = cytoscape({ elements: [node] }); setTimeout(() => { cy.$id('example service').select(); }, 0); return ( - - - - -
{storyFn()}
- - - - + + + ); - }) - .add( - 'example', - () => { - return ; - }, - { - info: { - propTablesExclude: [ - CytoscapeContext.Provider, - EuiThemeProvider, - MockApmPluginContextWrapper, - MockUrlParamsContextProvider, - Popover, - ], - source: false, - }, - } - ); + }, +]; + +export function Externals() { + return ; +} +Externals.decorators = [ + (Story: ComponentType) => { + const node = { + data: exampleGroupedConnectionsData, + }; + const cy = cytoscape({ elements: [node] }); + + setTimeout(() => { + cy.$id(exampleGroupedConnectionsData.id).select(); + }, 0); -storiesOf('app/ServiceMap/Popover/ServiceStatsList', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'example', - () => ( - - ), - { info: { propTablesExclude: [EuiThemeProvider] } } - ) - .add( - 'loading', - () => ( - - ), - { info: { propTablesExclude: [EuiThemeProvider] } } - ) - .add( - 'some null values', - () => ( - - ), - { info: { propTablesExclude: [EuiThemeProvider] } } - ) - .add( - 'all null values', - () => ( - - ), - { info: { propTablesExclude: [EuiThemeProvider] } } - ); + return ( + + + + ); + }, +]; diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx new file mode 100644 index 000000000000..052f9e951575 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx @@ -0,0 +1,63 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { ComponentType } from 'react'; +import { EuiThemeProvider } from '../../../../../../observability/public'; +import { ServiceStatsList } from './ServiceStatsList'; + +export default { + title: 'app/ServiceMap/Popover/ServiceStatsList', + component: ServiceStatsList, + decorators: [ + (Story: ComponentType) => ( + + + + ), + ], +}; + +export function Example() { + return ( + + ); +} + +export function SomeNullValues() { + return ( + + ); +} + +export function AllNullValues() { + return ( + + ); +} diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx index 5b50eb953d89..ee334e2ae956 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx @@ -5,332 +5,315 @@ */ import { EuiCard, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { storiesOf } from '@storybook/react'; import cytoscape from 'cytoscape'; -import React from 'react'; +import React, { ComponentType } from 'react'; +import { EuiThemeProvider } from '../../../../../../observability/public'; import { Cytoscape } from '../Cytoscape'; import { iconForNode } from '../icons'; -import { EuiThemeProvider } from '../../../../../../observability/public'; +import { Centerer } from './centerer'; + +export default { + title: 'app/ServiceMap/Cytoscape', + component: Cytoscape, + decorators: [ + (Story: ComponentType) => ( + + + + ), + ], +}; + +export function Example() { + const elements: cytoscape.ElementDefinition[] = [ + { + data: { + id: 'opbeans-python', + 'service.name': 'opbeans-python', + 'agent.name': 'python', + }, + }, + { + data: { + id: 'opbeans-node', + 'service.name': 'opbeans-node', + 'agent.name': 'nodejs', + }, + }, + { + data: { + id: 'opbeans-ruby', + 'service.name': 'opbeans-ruby', + 'agent.name': 'ruby', + }, + }, + { data: { source: 'opbeans-python', target: 'opbeans-node' } }, + { + data: { + bidirectional: true, + source: 'opbeans-python', + target: 'opbeans-ruby', + }, + }, + ]; + const serviceName = 'opbeans-python'; -storiesOf('app/ServiceMap/Cytoscape', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'example', - () => { - const elements: cytoscape.ElementDefinition[] = [ - { - data: { - id: 'opbeans-python', - 'service.name': 'opbeans-python', - 'agent.name': 'python', - }, - }, - { - data: { - id: 'opbeans-node', - 'service.name': 'opbeans-node', - 'agent.name': 'nodejs', - }, - }, - { - data: { - id: 'opbeans-ruby', - 'service.name': 'opbeans-ruby', - 'agent.name': 'ruby', - }, - }, - { data: { source: 'opbeans-python', target: 'opbeans-node' } }, - { - data: { - bidirectional: true, - source: 'opbeans-python', - target: 'opbeans-ruby', - }, - }, - ]; - const height = 300; - const serviceName = 'opbeans-python'; - return ( - - ); - }, - { - info: { - propTables: false, - source: false, - }, - } + return ( + + + ); +} -storiesOf('app/ServiceMap/Cytoscape', module).add( - 'node icons', - () => { - const cy = cytoscape(); - const elements = [ - { data: { id: 'default' } }, - { - data: { - id: 'aws', - 'span.type': 'aws', - 'span.subtype': 'servicename', - }, - }, - { data: { id: 'cache', 'span.type': 'cache' } }, - { data: { id: 'database', 'span.type': 'db' } }, - { - data: { - id: 'cassandra', - 'span.type': 'db', - 'span.subtype': 'cassandra', - }, - }, - { - data: { - id: 'elasticsearch', - 'span.type': 'db', - 'span.subtype': 'elasticsearch', - }, - }, - { - data: { - id: 'mongodb', - 'span.type': 'db', - 'span.subtype': 'mongodb', - }, - }, - { - data: { - id: 'mysql', - 'span.type': 'db', - 'span.subtype': 'mysql', - }, - }, - { - data: { - id: 'postgresql', - 'span.type': 'db', - 'span.subtype': 'postgresql', - }, - }, - { - data: { - id: 'redis', - 'span.type': 'db', - 'span.subtype': 'redis', - }, - }, - { data: { id: 'external', 'span.type': 'external' } }, - { data: { id: 'ext', 'span.type': 'ext' } }, - { - data: { - id: 'graphql', - 'span.type': 'external', - 'span.subtype': 'graphql', - }, - }, - { - data: { - id: 'grpc', - 'span.type': 'external', - 'span.subtype': 'grpc', - }, - }, - { - data: { - id: 'websocket', - 'span.type': 'external', - 'span.subtype': 'websocket', - }, - }, - { data: { id: 'messaging', 'span.type': 'messaging' } }, - { - data: { - id: 'jms', - 'span.type': 'messaging', - 'span.subtype': 'jms', - }, - }, - { - data: { - id: 'kafka', - 'span.type': 'messaging', - 'span.subtype': 'kafka', - }, - }, - { data: { id: 'template', 'span.type': 'template' } }, - { - data: { - id: 'handlebars', - 'span.type': 'template', - 'span.subtype': 'handlebars', - }, - }, - { - data: { - id: 'dark', - 'service.name': 'dark service', - 'agent.name': 'dark', - }, - }, - { - data: { - id: 'dotnet', - 'service.name': 'dotnet service', - 'agent.name': 'dotnet', - }, - }, - { - data: { - id: 'dotNet', - 'service.name': 'dotNet service', - 'agent.name': 'dotNet', - }, - }, - { - data: { - id: 'go', - 'service.name': 'go service', - 'agent.name': 'go', - }, - }, - { - data: { - id: 'java', - 'service.name': 'java service', - 'agent.name': 'java', - }, - }, - { - data: { - id: 'RUM (js-base)', - 'service.name': 'RUM service', - 'agent.name': 'js-base', - }, - }, - { - data: { - id: 'RUM (rum-js)', - 'service.name': 'RUM service', - 'agent.name': 'rum-js', - }, - }, - { - data: { - id: 'nodejs', - 'service.name': 'nodejs service', - 'agent.name': 'nodejs', - }, - }, - { - data: { - id: 'php', - 'service.name': 'php service', - 'agent.name': 'php', - }, - }, - { - data: { - id: 'python', - 'service.name': 'python service', - 'agent.name': 'python', - }, - }, - { - data: { - id: 'ruby', - 'service.name': 'ruby service', - 'agent.name': 'ruby', - }, - }, - ]; - cy.add(elements); +export function NodeIcons() { + const cy = cytoscape(); + const elements = [ + { data: { id: 'default' } }, + { + data: { + id: 'aws', + 'span.type': 'aws', + 'span.subtype': 'servicename', + }, + }, + { data: { id: 'cache', 'span.type': 'cache' } }, + { data: { id: 'database', 'span.type': 'db' } }, + { + data: { + id: 'cassandra', + 'span.type': 'db', + 'span.subtype': 'cassandra', + }, + }, + { + data: { + id: 'elasticsearch', + 'span.type': 'db', + 'span.subtype': 'elasticsearch', + }, + }, + { + data: { + id: 'mongodb', + 'span.type': 'db', + 'span.subtype': 'mongodb', + }, + }, + { + data: { + id: 'mysql', + 'span.type': 'db', + 'span.subtype': 'mysql', + }, + }, + { + data: { + id: 'postgresql', + 'span.type': 'db', + 'span.subtype': 'postgresql', + }, + }, + { + data: { + id: 'redis', + 'span.type': 'db', + 'span.subtype': 'redis', + }, + }, + { data: { id: 'external', 'span.type': 'external' } }, + { data: { id: 'ext', 'span.type': 'ext' } }, + { + data: { + id: 'graphql', + 'span.type': 'external', + 'span.subtype': 'graphql', + }, + }, + { + data: { + id: 'grpc', + 'span.type': 'external', + 'span.subtype': 'grpc', + }, + }, + { + data: { + id: 'websocket', + 'span.type': 'external', + 'span.subtype': 'websocket', + }, + }, + { data: { id: 'messaging', 'span.type': 'messaging' } }, + { + data: { + id: 'jms', + 'span.type': 'messaging', + 'span.subtype': 'jms', + }, + }, + { + data: { + id: 'kafka', + 'span.type': 'messaging', + 'span.subtype': 'kafka', + }, + }, + { data: { id: 'template', 'span.type': 'template' } }, + { + data: { + id: 'handlebars', + 'span.type': 'template', + 'span.subtype': 'handlebars', + }, + }, + { + data: { + id: 'dotnet', + 'service.name': 'dotnet service', + 'agent.name': 'dotnet', + }, + }, + { + data: { + id: 'dotNet', + 'service.name': 'dotNet service', + 'agent.name': 'dotNet', + }, + }, + { + data: { + id: 'go', + 'service.name': 'go service', + 'agent.name': 'go', + }, + }, + { + data: { + id: 'java', + 'service.name': 'java service', + 'agent.name': 'java', + }, + }, + { + data: { + id: 'RUM (js-base)', + 'service.name': 'RUM service', + 'agent.name': 'js-base', + }, + }, + { + data: { + id: 'RUM (rum-js)', + 'service.name': 'RUM service', + 'agent.name': 'rum-js', + }, + }, + { + data: { + id: 'nodejs', + 'service.name': 'nodejs service', + 'agent.name': 'nodejs', + }, + }, + { + data: { + id: 'opentelemetry', + 'service.name': 'OpenTelemetry service', + 'agent.name': 'otlp', + }, + }, + { + data: { + id: 'php', + 'service.name': 'php service', + 'agent.name': 'php', + }, + }, + { + data: { + id: 'python', + 'service.name': 'python service', + 'agent.name': 'python', + }, + }, + { + data: { + id: 'ruby', + 'service.name': 'ruby service', + 'agent.name': 'ruby', + }, + }, + ]; + cy.add(elements); - return ( - - {cy.nodes().map((node) => ( - - - agent.name: {node.data('agent.name') || 'undefined'} -
- span.type: {node.data('span.type') || 'undefined'} -
- span.subtype: {node.data('span.subtype') || 'undefined'} - - } - icon={ - {node.data('label')} - } - title={node.data('id')} - /> - - ))} - - ); - }, - { - info: { - propTables: false, - source: false, - }, - } -); + return ( + + {cy.nodes().map((node) => ( + + + agent.name: {node.data('agent.name') || 'undefined'} +
+ span.type: {node.data('span.type') || 'undefined'} +
+ span.subtype: {node.data('span.subtype') || 'undefined'} + + } + icon={ + {node.data('label')} + } + title={node.data('id')} + /> + + ))} + + ); +} -storiesOf('app/ServiceMap/Cytoscape', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'node severity', - () => { - const elements = [ - { - data: { - id: 'undefined', - 'service.name': 'severity: undefined', - serviceAnomalyStats: { anomalyScore: undefined }, - }, - }, - { - data: { - id: 'warning', - 'service.name': 'severity: warning', - serviceAnomalyStats: { anomalyScore: 0 }, - }, - }, - { - data: { - id: 'minor', - 'service.name': 'severity: minor', - serviceAnomalyStats: { anomalyScore: 40 }, - }, - }, - { - data: { - id: 'major', - 'service.name': 'severity: major', - serviceAnomalyStats: { anomalyScore: 60 }, - }, - }, - { - data: { - id: 'critical', - 'service.name': 'severity: critical', - serviceAnomalyStats: { anomalyScore: 80 }, - }, - }, - ]; - return ; - }, - { - info: { propTables: false, source: false }, - } +export function NodeHealthStatus() { + const elements = [ + { + data: { + id: 'undefined', + 'service.name': 'undefined', + serviceAnomalyStats: { healthStatus: undefined }, + }, + }, + { + data: { + id: 'healthy', + 'service.name': 'healthy', + serviceAnomalyStats: { healthStatus: 'healthy' }, + }, + }, + { + data: { + id: 'warning', + 'service.name': 'warning', + serviceAnomalyStats: { healthStatus: 'warning' }, + }, + }, + { + data: { + id: 'critical', + 'service.name': 'critical', + serviceAnomalyStats: { healthStatus: 'critical' }, + }, + }, + ]; + return ( + + + ); +} diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx deleted file mode 100644 index d8dcc71f5051..000000000000 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx +++ /dev/null @@ -1,275 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { - EuiButton, - EuiCodeEditor, - EuiFieldNumber, - EuiFilePicker, - EuiFlexGroup, - EuiFlexItem, - EuiForm, - EuiSpacer, - EuiToolTip, -} from '@elastic/eui'; -import { storiesOf } from '@storybook/react'; -import React, { useEffect, useState } from 'react'; -import { EuiThemeProvider } from '../../../../../../observability/public'; -import { Cytoscape } from '../Cytoscape'; -import exampleResponseHipsterStore from './example_response_hipster_store.json'; -import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json'; -import exampleResponseTodo from './example_response_todo.json'; -import exampleResponseOneDomainManyIPs from './example_response_one_domain_many_ips.json'; -import { generateServiceMapElements } from './generate_service_map_elements'; - -const STORYBOOK_PATH = 'app/ServiceMap/Cytoscape/Example data'; - -const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`; -function getSessionJson() { - return window.sessionStorage.getItem(SESSION_STORAGE_KEY); -} -function setSessionJson(json: string) { - window.sessionStorage.setItem(SESSION_STORAGE_KEY, json); -} - -const getCytoscapeHeight = () => window.innerHeight - 300; - -storiesOf(STORYBOOK_PATH, module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'Generate map', - () => { - const [size, setSize] = useState(10); - const [json, setJson] = useState(''); - const [elements, setElements] = useState( - generateServiceMapElements({ size, hasAnomalies: true }) - ); - return ( -
- - - { - setElements( - generateServiceMapElements({ size, hasAnomalies: true }) - ); - setJson(''); - }} - > - Generate service map - - - - - setSize(e.target.valueAsNumber)} - /> - - - - { - setJson(JSON.stringify({ elements }, null, 2)); - }} - > - Get JSON - - - - - - - {json && ( - - )} -
- ); - }, - { - info: { propTables: false, source: false }, - } - ); - -storiesOf(STORYBOOK_PATH, module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'Map from JSON', - () => { - const [json, setJson] = useState( - getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2) - ); - const [error, setError] = useState(); - - const [elements, setElements] = useState([]); - useEffect(() => { - try { - setElements(JSON.parse(json).elements); - } catch (e) { - setError(e.message); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( -
- - - - - { - setJson(value); - }} - /> - - - - { - const item = event?.item(0); - - if (item) { - const f = new FileReader(); - f.onload = (onloadEvent) => { - const result = onloadEvent?.target?.result; - if (typeof result === 'string') { - setJson(result); - } - }; - f.readAsText(item); - } - }} - /> - - { - try { - setElements(JSON.parse(json).elements); - setSessionJson(json); - setError(undefined); - } catch (e) { - setError(e.message); - } - }} - > - Render JSON - - - - - -
- ); - }, - { - info: { - propTables: false, - source: false, - text: ` - Enter JSON map data into the text box or upload a file and click "Render JSON" to see the results. You can enable a download button on the service map by putting - - \`\`\` - sessionStorage.setItem('apm_debug', 'true') - \`\`\` - - into the JavaScript console and reloading the page.`, - }, - } - ); - -storiesOf(STORYBOOK_PATH, module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'Todo app', - () => { - return ( -
- -
- ); - }, - { - info: { propTables: false, source: false }, - } - ); - -storiesOf(STORYBOOK_PATH, module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'Opbeans + beats', - () => { - return ( -
- -
- ); - }, - { - info: { propTables: false, source: false }, - } - ); - -storiesOf(STORYBOOK_PATH, module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'Hipster store', - () => { - return ( -
- -
- ); - }, - { - info: { propTables: false, source: false }, - } - ); - -storiesOf(STORYBOOK_PATH, module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'Node resolves one domain name to many IPs', - () => { - return ( -
- -
- ); - }, - { - info: { propTables: false, source: false }, - } - ); diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/centerer.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/centerer.tsx new file mode 100644 index 000000000000..16dad1e03b5a --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/centerer.tsx @@ -0,0 +1,27 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { useContext, useEffect } from 'react'; +import { CytoscapeContext } from '../Cytoscape'; + +// Component to center map on load +export function Centerer() { + const cy = useContext(CytoscapeContext); + + useEffect(() => { + if (cy) { + cy.one('layoutstop', (event) => { + event.cy.animate({ + duration: 50, + center: { eles: '' }, + fit: { eles: '', padding: 50 }, + }); + }); + } + }, [cy]); + + return null; +} diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx new file mode 100644 index 000000000000..0673735ba0ad --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx @@ -0,0 +1,228 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + EuiButton, + EuiCodeEditor, + EuiFieldNumber, + EuiFilePicker, + EuiFlexGroup, + EuiFlexItem, + EuiForm, + EuiSpacer, + EuiToolTip, +} from '@elastic/eui'; +import React, { ComponentType, useEffect, useState } from 'react'; +import { EuiThemeProvider } from '../../../../../../observability/public'; +import { Cytoscape } from '../Cytoscape'; +import { Centerer } from './centerer'; +import exampleResponseHipsterStore from './example_response_hipster_store.json'; +import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json'; +import exampleResponseTodo from './example_response_todo.json'; +import { generateServiceMapElements } from './generate_service_map_elements'; + +const STORYBOOK_PATH = 'app/ServiceMap/Cytoscape/Example data'; + +const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`; +function getSessionJson() { + return window.sessionStorage.getItem(SESSION_STORAGE_KEY); +} +function setSessionJson(json: string) { + window.sessionStorage.setItem(SESSION_STORAGE_KEY, json); +} + +function getHeight() { + return window.innerHeight - 300; +} + +export default { + title: 'app/ServiceMap/Cytoscape/Example data', + component: Cytoscape, + decorators: [ + (Story: ComponentType) => ( + + + + ), + ], +}; + +export function GenerateMap() { + const [size, setSize] = useState(10); + const [json, setJson] = useState(''); + const [elements, setElements] = useState( + generateServiceMapElements({ size, hasAnomalies: true }) + ); + return ( +
+ + + { + setElements( + generateServiceMapElements({ size, hasAnomalies: true }) + ); + setJson(''); + }} + > + Generate service map + + + + + setSize(e.target.valueAsNumber)} + /> + + + + { + setJson(JSON.stringify({ elements }, null, 2)); + }} + > + Get JSON + + + + + + + + + {json && ( + + )} +
+ ); +} + +export function MapFromJSON() { + const [json, setJson] = useState( + getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2) + ); + const [error, setError] = useState(); + + const [elements, setElements] = useState([]); + useEffect(() => { + try { + setElements(JSON.parse(json).elements); + } catch (e) { + setError(e.message); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( +
+ + + + + + + { + setJson(value); + }} + /> + + + + { + const item = event?.item(0); + + if (item) { + const f = new FileReader(); + f.onload = (onloadEvent) => { + const result = onloadEvent?.target?.result; + if (typeof result === 'string') { + setJson(result); + } + }; + f.readAsText(item); + } + }} + /> + + { + try { + setElements(JSON.parse(json).elements); + setSessionJson(json); + setError(undefined); + } catch (e) { + setError(e.message); + } + }} + > + Render JSON + + + + + +
+ ); +} + +export function TodoApp() { + return ( +
+ + + +
+ ); +} + +export function OpbeansAndBeats() { + return ( +
+ + + +
+ ); +} + +export function HipsterStore() { + return ( +
+ + + +
+ ); +} diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_grouped_connections.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_grouped_connections.json new file mode 100644 index 000000000000..55686f99f388 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_grouped_connections.json @@ -0,0 +1,875 @@ +{ + "id": "resourceGroup{elastic-co-frontend}", + "span.type": "external", + "label": "124 resources", + "groupedConnections": [ + { + "label": "813-mam-392.mktoresp.com:443", + "span.subtype": "http", + "span.destination.service.resource": "813-mam-392.mktoresp.com:443", + "span.type": "external", + "id": ">813-mam-392.mktoresp.com:443" + }, + { + "label": "813-mam-392.mktoutil.com:443", + "span.subtype": "http", + "span.destination.service.resource": "813-mam-392.mktoutil.com:443", + "span.type": "external", + "id": ">813-mam-392.mktoutil.com:443" + }, + { + "label": "8d1f.com:443", + "span.subtype": "link", + "span.destination.service.resource": "8d1f.com:443", + "span.type": "resource", + "id": ">8d1f.com:443" + }, + { + "label": "a.ssl-checking.com:443", + "span.subtype": "xmlhttprequest", + "span.destination.service.resource": "a.ssl-checking.com:443", + "span.type": "resource", + "id": ">a.ssl-checking.com:443" + }, + { + "label": "a18132920325.cdn.optimizely.com:443", + "span.subtype": "iframe", + "span.destination.service.resource": "a18132920325.cdn.optimizely.com:443", + "span.type": "resource", + "id": ">a18132920325.cdn.optimizely.com:443" + }, + { + "label": "api.contentstack.io:443", + "span.subtype": "img", + "span.destination.service.resource": "api.contentstack.io:443", + "span.type": "resource", + "id": ">api.contentstack.io:443" + }, + { + "label": "assets.website-files.com:443", + "span.subtype": "css", + "span.destination.service.resource": "assets.website-files.com:443", + "span.type": "resource", + "id": ">assets.website-files.com:443" + }, + { + "label": "bat.bing.com:443", + "span.subtype": "img", + "span.destination.service.resource": "bat.bing.com:443", + "span.type": "resource", + "id": ">bat.bing.com:443" + }, + { + "label": "bid.g.doubleclick.net:443", + "span.subtype": "iframe", + "span.destination.service.resource": "bid.g.doubleclick.net:443", + "span.type": "resource", + "id": ">bid.g.doubleclick.net:443" + }, + { + "label": "cdn.iubenda.com:443", + "span.subtype": "iframe", + "span.destination.service.resource": "cdn.iubenda.com:443", + "span.type": "resource", + "id": ">cdn.iubenda.com:443" + }, + { + "label": "cdn.loom.com:443", + "span.subtype": "css", + "span.destination.service.resource": "cdn.loom.com:443", + "span.type": "resource", + "id": ">cdn.loom.com:443" + }, + { + "label": "cdn.optimizely.com:443", + "span.subtype": "script", + "span.destination.service.resource": "cdn.optimizely.com:443", + "span.type": "resource", + "id": ">cdn.optimizely.com:443" + }, + { + "label": "cdncache-a.akamaihd.net:443", + "span.subtype": "http", + "span.destination.service.resource": "cdncache-a.akamaihd.net:443", + "span.type": "external", + "id": ">cdncache-a.akamaihd.net:443" + }, + { + "label": "cloud.githubusercontent.com:443", + "span.subtype": "img", + "span.destination.service.resource": "cloud.githubusercontent.com:443", + "span.type": "resource", + "id": ">cloud.githubusercontent.com:443" + }, + { + "label": "config.privoxy.org:443", + "span.subtype": "script", + "span.destination.service.resource": "config.privoxy.org:443", + "span.type": "resource", + "id": ">config.privoxy.org:443" + }, + { + "label": "connect.facebook.net:443", + "span.subtype": "script", + "span.destination.service.resource": "connect.facebook.net:443", + "span.type": "resource", + "id": ">connect.facebook.net:443" + }, + { + "label": "dpx.airpr.com:443", + "span.subtype": "img", + "span.destination.service.resource": "dpx.airpr.com:443", + "span.type": "resource", + "id": ">dpx.airpr.com:443" + }, + { + "label": "errors.client.optimizely.com:443", + "span.subtype": "http", + "span.destination.service.resource": "errors.client.optimizely.com:443", + "span.type": "external", + "id": ">errors.client.optimizely.com:443" + }, + { + "label": "fonts.googleapis.com:443", + "span.subtype": "css", + "span.destination.service.resource": "fonts.googleapis.com:443", + "span.type": "resource", + "id": ">fonts.googleapis.com:443" + }, + { + "label": "fonts.gstatic.com:443", + "span.subtype": "css", + "span.destination.service.resource": "fonts.gstatic.com:443", + "span.type": "resource", + "id": ">fonts.gstatic.com:443" + }, + { + "label": "ga.clearbit.com:443", + "span.subtype": "script", + "span.destination.service.resource": "ga.clearbit.com:443", + "span.type": "resource", + "id": ">ga.clearbit.com:443" + }, + { + "label": "gc.kis.v2.scr.kaspersky-labs.com:443", + "span.subtype": "script", + "span.destination.service.resource": "gc.kis.v2.scr.kaspersky-labs.com:443", + "span.type": "resource", + "id": ">gc.kis.v2.scr.kaspersky-labs.com:443" + }, + { + "label": "googleads.g.doubleclick.net:443", + "span.subtype": "script", + "span.destination.service.resource": "googleads.g.doubleclick.net:443", + "span.type": "resource", + "id": ">googleads.g.doubleclick.net:443" + }, + { + "label": "hits-i.iubenda.com:443", + "span.subtype": "http", + "span.destination.service.resource": "hits-i.iubenda.com:443", + "span.type": "external", + "id": ">hits-i.iubenda.com:443" + }, + { + "label": "host-1r8dhi.api.swiftype.com:443", + "span.subtype": "http", + "span.destination.service.resource": "host-1r8dhi.api.swiftype.com:443", + "span.type": "external", + "id": ">host-1r8dhi.api.swiftype.com:443" + }, + { + "label": "host-nm1h2z.api.swiftype.com:443", + "span.subtype": "http", + "span.destination.service.resource": "host-nm1h2z.api.swiftype.com:443", + "span.type": "external", + "id": ">host-nm1h2z.api.swiftype.com:443" + }, + { + "label": "images.contentstack.io:443", + "span.subtype": "css", + "span.destination.service.resource": "images.contentstack.io:443", + "span.type": "resource", + "id": ">images.contentstack.io:443" + }, + { + "label": "info.elastic.co:443", + "span.subtype": "iframe", + "span.destination.service.resource": "info.elastic.co:443", + "span.type": "resource", + "id": ">info.elastic.co:443" + }, + { + "label": "info.elastic.co:80", + "span.subtype": "img", + "span.destination.service.resource": "info.elastic.co:80", + "span.type": "resource", + "id": ">info.elastic.co:80" + }, + { + "label": "js.clearbit.com:443", + "span.subtype": "script", + "span.destination.service.resource": "js.clearbit.com:443", + "span.type": "resource", + "id": ">js.clearbit.com:443" + }, + { + "label": "lh4.googleusercontent.com:443", + "span.subtype": "img", + "span.destination.service.resource": "lh4.googleusercontent.com:443", + "span.type": "resource", + "id": ">lh4.googleusercontent.com:443" + }, + { + "label": "lh6.googleusercontent.com:443", + "span.subtype": "img", + "span.destination.service.resource": "lh6.googleusercontent.com:443", + "span.type": "resource", + "id": ">lh6.googleusercontent.com:443" + }, + { + "label": "logx.optimizely.com:443", + "span.subtype": "http", + "span.destination.service.resource": "logx.optimizely.com:443", + "span.type": "external", + "id": ">logx.optimizely.com:443" + }, + { + "label": "m98.prod2016.com:443", + "span.subtype": "http", + "span.destination.service.resource": "m98.prod2016.com:443", + "span.type": "external", + "id": ">m98.prod2016.com:443" + }, + { + "label": "maps.googleapis.com:443", + "span.subtype": "img", + "span.destination.service.resource": "maps.googleapis.com:443", + "span.type": "resource", + "id": ">maps.googleapis.com:443" + }, + { + "label": "maps.gstatic.com:443", + "span.subtype": "css", + "span.destination.service.resource": "maps.gstatic.com:443", + "span.type": "resource", + "id": ">maps.gstatic.com:443" + }, + { + "label": "munchkin.marketo.net:443", + "span.subtype": "script", + "span.destination.service.resource": "munchkin.marketo.net:443", + "span.type": "resource", + "id": ">munchkin.marketo.net:443" + }, + { + "label": "negbar.ad-blocker.org:443", + "span.subtype": "script", + "span.destination.service.resource": "negbar.ad-blocker.org:443", + "span.type": "resource", + "id": ">negbar.ad-blocker.org:443" + }, + { + "label": "p.typekit.net:443", + "span.subtype": "css", + "span.destination.service.resource": "p.typekit.net:443", + "span.type": "resource", + "id": ">p.typekit.net:443" + }, + { + "label": "platform.twitter.com:443", + "span.subtype": "iframe", + "span.destination.service.resource": "platform.twitter.com:443", + "span.type": "resource", + "id": ">platform.twitter.com:443" + }, + { + "label": "play.vidyard.com:443", + "span.subtype": "iframe", + "span.destination.service.resource": "play.vidyard.com:443", + "span.type": "resource", + "id": ">play.vidyard.com:443" + }, + { + "label": "px.ads.linkedin.com:443", + "span.subtype": "img", + "span.destination.service.resource": "px.ads.linkedin.com:443", + "span.type": "resource", + "id": ">px.ads.linkedin.com:443" + }, + { + "label": "px.airpr.com:443", + "span.subtype": "script", + "span.destination.service.resource": "px.airpr.com:443", + "span.type": "resource", + "id": ">px.airpr.com:443" + }, + { + "label": "q.quora.com:443", + "span.subtype": "img", + "span.destination.service.resource": "q.quora.com:443", + "span.type": "resource", + "id": ">q.quora.com:443" + }, + { + "label": "risk.clearbit.com:443", + "span.subtype": "http", + "span.destination.service.resource": "risk.clearbit.com:443", + "span.type": "external", + "id": ">risk.clearbit.com:443" + }, + { + "label": "rtp-static.marketo.com:443", + "span.subtype": "http", + "span.destination.service.resource": "rtp-static.marketo.com:443", + "span.type": "external", + "id": ">rtp-static.marketo.com:443" + }, + { + "label": "rum.optimizely.com:443", + "span.subtype": "http", + "span.destination.service.resource": "rum.optimizely.com:443", + "span.type": "external", + "id": ">rum.optimizely.com:443" + }, + { + "label": "s3-us-west-1.amazonaws.com:443", + "span.subtype": "script", + "span.destination.service.resource": "s3-us-west-1.amazonaws.com:443", + "span.type": "resource", + "id": ">s3-us-west-1.amazonaws.com:443" + }, + { + "label": "sjrtp2-cdn.marketo.com:443", + "span.subtype": "script", + "span.destination.service.resource": "sjrtp2-cdn.marketo.com:443", + "span.type": "resource", + "id": ">sjrtp2-cdn.marketo.com:443" + }, + { + "label": "sjrtp2.marketo.com:443", + "span.subtype": "http", + "span.destination.service.resource": "sjrtp2.marketo.com:443", + "span.type": "external", + "id": ">sjrtp2.marketo.com:443" + }, + { + "label": "snap.licdn.com:443", + "span.subtype": "script", + "span.destination.service.resource": "snap.licdn.com:443", + "span.type": "resource", + "id": ">snap.licdn.com:443" + }, + { + "label": "speakerdeck.com:443", + "span.subtype": "iframe", + "span.destination.service.resource": "speakerdeck.com:443", + "span.type": "resource", + "id": ">speakerdeck.com:443" + }, + { + "label": "stag-static-www.elastic.co:443", + "span.subtype": "img", + "span.destination.service.resource": "stag-static-www.elastic.co:443", + "span.type": "resource", + "id": ">stag-static-www.elastic.co:443" + }, + { + "label": "static-www.elastic.co:443", + "span.subtype": "css", + "span.destination.service.resource": "static-www.elastic.co:443", + "span.type": "resource", + "id": ">static-www.elastic.co:443" + }, + { + "label": "stats.g.doubleclick.net:443", + "span.subtype": "http", + "span.destination.service.resource": "stats.g.doubleclick.net:443", + "span.type": "external", + "id": ">stats.g.doubleclick.net:443" + }, + { + "label": "translate.google.com:443", + "span.subtype": "img", + "span.destination.service.resource": "translate.google.com:443", + "span.type": "resource", + "id": ">translate.google.com:443" + }, + { + "label": "translate.googleapis.com:443", + "span.subtype": "link", + "span.destination.service.resource": "translate.googleapis.com:443", + "span.type": "resource", + "id": ">translate.googleapis.com:443" + }, + { + "label": "use.typekit.net:443", + "span.subtype": "link", + "span.destination.service.resource": "use.typekit.net:443", + "span.type": "resource", + "id": ">use.typekit.net:443" + }, + { + "label": "www.elastic.co:443", + "span.subtype": "browser-timing", + "span.destination.service.resource": "www.elastic.co:443", + "span.type": "external", + "id": ">www.elastic.co:443" + }, + { + "label": "www.facebook.com:443", + "span.subtype": "beacon", + "span.destination.service.resource": "www.facebook.com:443", + "span.type": "resource", + "id": ">www.facebook.com:443" + }, + { + "label": "www.google-analytics.com:443", + "span.subtype": "beacon", + "span.destination.service.resource": "www.google-analytics.com:443", + "span.type": "external", + "id": ">www.google-analytics.com:443" + }, + { + "label": "www.google.ae:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.ae:443", + "span.type": "resource", + "id": ">www.google.ae:443" + }, + { + "label": "www.google.al:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.al:443", + "span.type": "resource", + "id": ">www.google.al:443" + }, + { + "label": "www.google.at:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.at:443", + "span.type": "resource", + "id": ">www.google.at:443" + }, + { + "label": "www.google.ba:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.ba:443", + "span.type": "resource", + "id": ">www.google.ba:443" + }, + { + "label": "www.google.be:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.be:443", + "span.type": "resource", + "id": ">www.google.be:443" + }, + { + "label": "www.google.bg:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.bg:443", + "span.type": "resource", + "id": ">www.google.bg:443" + }, + { + "label": "www.google.by:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.by:443", + "span.type": "resource", + "id": ">www.google.by:443" + }, + { + "label": "www.google.ca:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.ca:443", + "span.type": "resource", + "id": ">www.google.ca:443" + }, + { + "label": "www.google.ch:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.ch:443", + "span.type": "resource", + "id": ">www.google.ch:443" + }, + { + "label": "www.google.cl:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.cl:443", + "span.type": "resource", + "id": ">www.google.cl:443" + }, + { + "label": "www.google.co.cr:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.cr:443", + "span.type": "resource", + "id": ">www.google.co.cr:443" + }, + { + "label": "www.google.co.id:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.id:443", + "span.type": "resource", + "id": ">www.google.co.id:443" + }, + { + "label": "www.google.co.il:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.il:443", + "span.type": "resource", + "id": ">www.google.co.il:443" + }, + { + "label": "www.google.co.in:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.in:443", + "span.type": "resource", + "id": ">www.google.co.in:443" + }, + { + "label": "www.google.co.jp:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.jp:443", + "span.type": "resource", + "id": ">www.google.co.jp:443" + }, + { + "label": "www.google.co.kr:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.kr:443", + "span.type": "resource", + "id": ">www.google.co.kr:443" + }, + { + "label": "www.google.co.ma:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.ma:443", + "span.type": "resource", + "id": ">www.google.co.ma:443" + }, + { + "label": "www.google.co.uk:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.uk:443", + "span.type": "resource", + "id": ">www.google.co.uk:443" + }, + { + "label": "www.google.co.za:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.co.za:443", + "span.type": "resource", + "id": ">www.google.co.za:443" + }, + { + "label": "www.google.com.ar:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.ar:443", + "span.type": "resource", + "id": ">www.google.com.ar:443" + }, + { + "label": "www.google.com.au:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.au:443", + "span.type": "resource", + "id": ">www.google.com.au:443" + }, + { + "label": "www.google.com.bo:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.bo:443", + "span.type": "resource", + "id": ">www.google.com.bo:443" + }, + { + "label": "www.google.com.br:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.br:443", + "span.type": "resource", + "id": ">www.google.com.br:443" + }, + { + "label": "www.google.com.co:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.co:443", + "span.type": "resource", + "id": ">www.google.com.co:443" + }, + { + "label": "www.google.com.eg:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.eg:443", + "span.type": "resource", + "id": ">www.google.com.eg:443" + }, + { + "label": "www.google.com.mm:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.mm:443", + "span.type": "resource", + "id": ">www.google.com.mm:443" + }, + { + "label": "www.google.com.mx:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.mx:443", + "span.type": "resource", + "id": ">www.google.com.mx:443" + }, + { + "label": "www.google.com.my:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.my:443", + "span.type": "resource", + "id": ">www.google.com.my:443" + }, + { + "label": "www.google.com.pe:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.pe:443", + "span.type": "resource", + "id": ">www.google.com.pe:443" + }, + { + "label": "www.google.com.sa:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.sa:443", + "span.type": "resource", + "id": ">www.google.com.sa:443" + }, + { + "label": "www.google.com.sg:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.sg:443", + "span.type": "resource", + "id": ">www.google.com.sg:443" + }, + { + "label": "www.google.com.tr:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.tr:443", + "span.type": "resource", + "id": ">www.google.com.tr:443" + }, + { + "label": "www.google.com.ua:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.ua:443", + "span.type": "resource", + "id": ">www.google.com.ua:443" + }, + { + "label": "www.google.com.uy:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.com.uy:443", + "span.type": "resource", + "id": ">www.google.com.uy:443" + }, + { + "label": "www.google.com:443", + "span.subtype": "beacon", + "span.destination.service.resource": "www.google.com:443", + "span.type": "resource", + "id": ">www.google.com:443" + }, + { + "label": "www.google.cz:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.cz:443", + "span.type": "resource", + "id": ">www.google.cz:443" + }, + { + "label": "www.google.de:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.de:443", + "span.type": "resource", + "id": ">www.google.de:443" + }, + { + "label": "www.google.dk:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.dk:443", + "span.type": "resource", + "id": ">www.google.dk:443" + }, + { + "label": "www.google.es:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.es:443", + "span.type": "resource", + "id": ">www.google.es:443" + }, + { + "label": "www.google.fr:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.fr:443", + "span.type": "resource", + "id": ">www.google.fr:443" + }, + { + "label": "www.google.gr:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.gr:443", + "span.type": "resource", + "id": ">www.google.gr:443" + }, + { + "label": "www.google.hu:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.hu:443", + "span.type": "resource", + "id": ">www.google.hu:443" + }, + { + "label": "www.google.is:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.is:443", + "span.type": "resource", + "id": ">www.google.is:443" + }, + { + "label": "www.google.it:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.it:443", + "span.type": "resource", + "id": ">www.google.it:443" + }, + { + "label": "www.google.lk:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.lk:443", + "span.type": "resource", + "id": ">www.google.lk:443" + }, + { + "label": "www.google.md:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.md:443", + "span.type": "resource", + "id": ">www.google.md:443" + }, + { + "label": "www.google.mk:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.mk:443", + "span.type": "resource", + "id": ">www.google.mk:443" + }, + { + "label": "www.google.nl:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.nl:443", + "span.type": "resource", + "id": ">www.google.nl:443" + }, + { + "label": "www.google.no:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.no:443", + "span.type": "resource", + "id": ">www.google.no:443" + }, + { + "label": "www.google.pl:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.pl:443", + "span.type": "resource", + "id": ">www.google.pl:443" + }, + { + "label": "www.google.pt:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.pt:443", + "span.type": "resource", + "id": ">www.google.pt:443" + }, + { + "label": "www.google.ro:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.ro:443", + "span.type": "resource", + "id": ">www.google.ro:443" + }, + { + "label": "www.google.rs:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.rs:443", + "span.type": "resource", + "id": ">www.google.rs:443" + }, + { + "label": "www.google.ru:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.ru:443", + "span.type": "resource", + "id": ">www.google.ru:443" + }, + { + "label": "www.google.se:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.se:443", + "span.type": "resource", + "id": ">www.google.se:443" + }, + { + "label": "www.google.tn:443", + "span.subtype": "img", + "span.destination.service.resource": "www.google.tn:443", + "span.type": "resource", + "id": ">www.google.tn:443" + }, + { + "label": "www.googleadservices.com:443", + "span.subtype": "script", + "span.destination.service.resource": "www.googleadservices.com:443", + "span.type": "resource", + "id": ">www.googleadservices.com:443" + }, + { + "label": "www.googletagmanager.com:443", + "span.subtype": "script", + "span.destination.service.resource": "www.googletagmanager.com:443", + "span.type": "resource", + "id": ">www.googletagmanager.com:443" + }, + { + "label": "www.gstatic.com:443", + "span.subtype": "css", + "span.destination.service.resource": "www.gstatic.com:443", + "span.type": "resource", + "id": ">www.gstatic.com:443" + }, + { + "label": "www.iubenda.com:443", + "span.subtype": "script", + "span.destination.service.resource": "www.iubenda.com:443", + "span.type": "resource", + "id": ">www.iubenda.com:443" + }, + { + "label": "www.slideshare.net:443", + "span.subtype": "iframe", + "span.destination.service.resource": "www.slideshare.net:443", + "span.type": "resource", + "id": ">www.slideshare.net:443" + }, + { + "label": "www.youtube.com:443", + "span.subtype": "iframe", + "span.destination.service.resource": "www.youtube.com:443", + "span.type": "resource", + "id": ">www.youtube.com:443" + }, + { + "label": "x.clearbit.com:443", + "span.subtype": "http", + "span.destination.service.resource": "x.clearbit.com:443", + "span.type": "external", + "id": ">x.clearbit.com:443" + } + ] +} diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json deleted file mode 100644 index f9b8a273d857..000000000000 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json +++ /dev/null @@ -1,2122 +0,0 @@ -{ - "elements": [ - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.99:80", - "id": "artifact_api~>192.0.2.99:80", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "http", - "span.destination.service.resource": "192.0.2.99:80", - "span.type": "external", - "id": ">192.0.2.99:80", - "label": ">192.0.2.99:80" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.47:443", - "id": "artifact_api~>192.0.2.47:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.47:443", - "span.type": "external", - "id": ">192.0.2.47:443", - "label": ">192.0.2.47:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.13:443", - "id": "artifact_api~>192.0.2.13:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.13:443", - "span.type": "external", - "id": ">192.0.2.13:443", - "label": ">192.0.2.13:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.106:443", - "id": "artifact_api~>192.0.2.106:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.106:443", - "span.type": "external", - "id": ">192.0.2.106:443", - "label": ">192.0.2.106:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.83:443", - "id": "artifact_api~>192.0.2.83:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.83:443", - "span.type": "external", - "id": ">192.0.2.83:443", - "label": ">192.0.2.83:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.111:443", - "id": "artifact_api~>192.0.2.111:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.111:443", - "span.type": "external", - "id": ">192.0.2.111:443", - "label": ">192.0.2.111:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.189:443", - "id": "artifact_api~>192.0.2.189:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.189:443", - "span.type": "external", - "id": ">192.0.2.189:443", - "label": ">192.0.2.189:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.148:443", - "id": "artifact_api~>192.0.2.148:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.148:443", - "span.type": "external", - "id": ">192.0.2.148:443", - "label": ">192.0.2.148:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.39:443", - "id": "artifact_api~>192.0.2.39:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.39:443", - "span.type": "external", - "id": ">192.0.2.39:443", - "label": ">192.0.2.39:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.42:443", - "id": "artifact_api~>192.0.2.42:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.42:443", - "span.type": "external", - "id": ">192.0.2.42:443", - "label": ">192.0.2.42:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.240:443", - "id": "artifact_api~>192.0.2.240:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.240:443", - "span.type": "external", - "id": ">192.0.2.240:443", - "label": ">192.0.2.240:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.156:443", - "id": "artifact_api~>192.0.2.156:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.156:443", - "span.type": "external", - "id": ">192.0.2.156:443", - "label": ">192.0.2.156:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.245:443", - "id": "artifact_api~>192.0.2.245:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.245:443", - "span.type": "external", - "id": ">192.0.2.245:443", - "label": ">192.0.2.245:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.198:443", - "id": "artifact_api~>192.0.2.198:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.198:443", - "span.type": "external", - "id": ">192.0.2.198:443", - "label": ">192.0.2.198:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.77:443", - "id": "artifact_api~>192.0.2.77:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.77:443", - "span.type": "external", - "id": ">192.0.2.77:443", - "label": ">192.0.2.77:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.8:443", - "id": "artifact_api~>192.0.2.8:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.8:443", - "span.type": "external", - "id": ">192.0.2.8:443", - "label": ">192.0.2.8:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.69:443", - "id": "artifact_api~>192.0.2.69:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.69:443", - "span.type": "external", - "id": ">192.0.2.69:443", - "label": ">192.0.2.69:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.5:443", - "id": "artifact_api~>192.0.2.5:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.5:443", - "span.type": "external", - "id": ">192.0.2.5:443", - "label": ">192.0.2.5:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.139:443", - "id": "artifact_api~>192.0.2.139:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.139:443", - "span.type": "external", - "id": ">192.0.2.139:443", - "label": ">192.0.2.139:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.113:443", - "id": "artifact_api~>192.0.2.113:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.113:443", - "span.type": "external", - "id": ">192.0.2.113:443", - "label": ">192.0.2.113:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.2:443", - "id": "artifact_api~>192.0.2.2:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.2:443", - "span.type": "external", - "id": ">192.0.2.2:443", - "label": ">192.0.2.2:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.213:443", - "id": "artifact_api~>192.0.2.213:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.213:443", - "span.type": "external", - "id": ">192.0.2.213:443", - "label": ">192.0.2.213:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.153:443", - "id": "artifact_api~>192.0.2.153:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.153:443", - "span.type": "external", - "id": ">192.0.2.153:443", - "label": ">192.0.2.153:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.36:443", - "id": "artifact_api~>192.0.2.36:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.36:443", - "span.type": "external", - "id": ">192.0.2.36:443", - "label": ">192.0.2.36:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.164:443", - "id": "artifact_api~>192.0.2.164:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.164:443", - "span.type": "external", - "id": ">192.0.2.164:443", - "label": ">192.0.2.164:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.190:443", - "id": "artifact_api~>192.0.2.190:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.190:443", - "span.type": "external", - "id": ">192.0.2.190:443", - "label": ">192.0.2.190:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.9:443", - "id": "artifact_api~>192.0.2.9:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.9:443", - "span.type": "external", - "id": ">192.0.2.9:443", - "label": ">192.0.2.9:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.210:443", - "id": "artifact_api~>192.0.2.210:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.210:443", - "span.type": "external", - "id": ">192.0.2.210:443", - "label": ">192.0.2.210:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.21:443", - "id": "artifact_api~>192.0.2.21:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.21:443", - "span.type": "external", - "id": ">192.0.2.21:443", - "label": ">192.0.2.21:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.176:443", - "id": "artifact_api~>192.0.2.176:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.176:443", - "span.type": "external", - "id": ">192.0.2.176:443", - "label": ">192.0.2.176:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.81:443", - "id": "artifact_api~>192.0.2.81:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.81:443", - "span.type": "external", - "id": ">192.0.2.81:443", - "label": ">192.0.2.81:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.118:443", - "id": "artifact_api~>192.0.2.118:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.118:443", - "span.type": "external", - "id": ">192.0.2.118:443", - "label": ">192.0.2.118:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.103:443", - "id": "artifact_api~>192.0.2.103:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.103:443", - "span.type": "external", - "id": ">192.0.2.103:443", - "label": ">192.0.2.103:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.3:443", - "id": "artifact_api~>192.0.2.3:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.3:443", - "span.type": "external", - "id": ">192.0.2.3:443", - "label": ">192.0.2.3:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.135:443", - "id": "artifact_api~>192.0.2.135:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.135:443", - "span.type": "external", - "id": ">192.0.2.135:443", - "label": ">192.0.2.135:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.26:443", - "id": "artifact_api~>192.0.2.26:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.26:443", - "span.type": "external", - "id": ">192.0.2.26:443", - "label": ">192.0.2.26:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.185:443", - "id": "artifact_api~>192.0.2.185:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.185:443", - "span.type": "external", - "id": ">192.0.2.185:443", - "label": ">192.0.2.185:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.173:443", - "id": "artifact_api~>192.0.2.173:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.173:443", - "span.type": "external", - "id": ">192.0.2.173:443", - "label": ">192.0.2.173:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.45:443", - "id": "artifact_api~>192.0.2.45:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.45:443", - "span.type": "external", - "id": ">192.0.2.45:443", - "label": ">192.0.2.45:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.144:443", - "id": "artifact_api~>192.0.2.144:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.144:443", - "span.type": "external", - "id": ">192.0.2.144:443", - "label": ">192.0.2.144:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.165:443", - "id": "artifact_api~>192.0.2.165:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.165:443", - "span.type": "external", - "id": ">192.0.2.165:443", - "label": ">192.0.2.165:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.119:443", - "id": "artifact_api~>192.0.2.119:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.119:443", - "span.type": "external", - "id": ">192.0.2.119:443", - "label": ">192.0.2.119:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.186:443", - "id": "artifact_api~>192.0.2.186:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.186:443", - "span.type": "external", - "id": ">192.0.2.186:443", - "label": ">192.0.2.186:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.54:443", - "id": "artifact_api~>192.0.2.54:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.54:443", - "span.type": "external", - "id": ">192.0.2.54:443", - "label": ">192.0.2.54:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.23:443", - "id": "artifact_api~>192.0.2.23:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.23:443", - "span.type": "external", - "id": ">192.0.2.23:443", - "label": ">192.0.2.23:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.34:443", - "id": "artifact_api~>192.0.2.34:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.34:443", - "span.type": "external", - "id": ">192.0.2.34:443", - "label": ">192.0.2.34:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.169:443", - "id": "artifact_api~>192.0.2.169:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.169:443", - "span.type": "external", - "id": ">192.0.2.169:443", - "label": ">192.0.2.169:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.226:443", - "id": "artifact_api~>192.0.2.226:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.226:443", - "span.type": "external", - "id": ">192.0.2.226:443", - "label": ">192.0.2.226:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.82:443", - "id": "artifact_api~>192.0.2.82:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.82:443", - "span.type": "external", - "id": ">192.0.2.82:443", - "label": ">192.0.2.82:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.132:443", - "id": "artifact_api~>192.0.2.132:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.132:443", - "span.type": "external", - "id": ">192.0.2.132:443", - "label": ">192.0.2.132:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.78:443", - "id": "artifact_api~>192.0.2.78:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.78:443", - "span.type": "external", - "id": ">192.0.2.78:443", - "label": ">192.0.2.78:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.71:443", - "id": "artifact_api~>192.0.2.71:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.71:443", - "span.type": "external", - "id": ">192.0.2.71:443", - "label": ">192.0.2.71:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.48:443", - "id": "artifact_api~>192.0.2.48:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.48:443", - "span.type": "external", - "id": ">192.0.2.48:443", - "label": ">192.0.2.48:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.107:443", - "id": "artifact_api~>192.0.2.107:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.107:443", - "span.type": "external", - "id": ">192.0.2.107:443", - "label": ">192.0.2.107:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.239:443", - "id": "artifact_api~>192.0.2.239:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.239:443", - "span.type": "external", - "id": ">192.0.2.239:443", - "label": ">192.0.2.239:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.209:443", - "id": "artifact_api~>192.0.2.209:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.209:443", - "span.type": "external", - "id": ">192.0.2.209:443", - "label": ">192.0.2.209:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.248:443", - "id": "artifact_api~>192.0.2.248:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.248:443", - "span.type": "external", - "id": ">192.0.2.248:443", - "label": ">192.0.2.248:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.18:443", - "id": "artifact_api~>192.0.2.18:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.18:443", - "span.type": "external", - "id": ">192.0.2.18:443", - "label": ">192.0.2.18:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.228:443", - "id": "artifact_api~>192.0.2.228:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.228:443", - "span.type": "external", - "id": ">192.0.2.228:443", - "label": ">192.0.2.228:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.145:443", - "id": "artifact_api~>192.0.2.145:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.145:443", - "span.type": "external", - "id": ">192.0.2.145:443", - "label": ">192.0.2.145:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.25:443", - "id": "artifact_api~>192.0.2.25:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.25:443", - "span.type": "external", - "id": ">192.0.2.25:443", - "label": ">192.0.2.25:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.162:443", - "id": "artifact_api~>192.0.2.162:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.162:443", - "span.type": "external", - "id": ">192.0.2.162:443", - "label": ">192.0.2.162:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.202:443", - "id": "artifact_api~>192.0.2.202:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.202:443", - "span.type": "external", - "id": ">192.0.2.202:443", - "label": ">192.0.2.202:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.60:443", - "id": "artifact_api~>192.0.2.60:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.60:443", - "span.type": "external", - "id": ">192.0.2.60:443", - "label": ">192.0.2.60:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.59:443", - "id": "artifact_api~>192.0.2.59:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.59:443", - "span.type": "external", - "id": ">192.0.2.59:443", - "label": ">192.0.2.59:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.114:443", - "id": "artifact_api~>192.0.2.114:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.114:443", - "span.type": "external", - "id": ">192.0.2.114:443", - "label": ">192.0.2.114:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.215:443", - "id": "artifact_api~>192.0.2.215:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.215:443", - "span.type": "external", - "id": ">192.0.2.215:443", - "label": ">192.0.2.215:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.238:443", - "id": "artifact_api~>192.0.2.238:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.238:443", - "span.type": "external", - "id": ">192.0.2.238:443", - "label": ">192.0.2.238:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.160:443", - "id": "artifact_api~>192.0.2.160:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.160:443", - "span.type": "external", - "id": ">192.0.2.160:443", - "label": ">192.0.2.160:443" - } - } - }, - { - "data": { - "source": "artifact_api", - "target": ">192.0.2.70:443", - "id": "artifact_api~>192.0.2.70:443", - "sourceData": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - }, - "targetData": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.70:443", - "span.type": "external", - "id": ">192.0.2.70:443", - "label": ">192.0.2.70:443" - } - } - }, - { - "data": { - "id": "artifact_api", - "service.environment": "development", - "service.name": "artifact_api", - "agent.name": "nodejs", - "service.framework.name": "express" - } - }, - { - "data": { - "span.subtype": "http", - "span.destination.service.resource": "192.0.2.99:80", - "span.type": "external", - "id": ">192.0.2.99:80", - "label": ">192.0.2.99:80" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.186:443", - "span.type": "external", - "id": ">192.0.2.186:443", - "label": ">192.0.2.186:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.78:443", - "span.type": "external", - "id": ">192.0.2.78:443", - "label": ">192.0.2.78:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.226:443", - "span.type": "external", - "id": ">192.0.2.226:443", - "label": ">192.0.2.226:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.245:443", - "span.type": "external", - "id": ">192.0.2.245:443", - "label": ">192.0.2.245:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.77:443", - "span.type": "external", - "id": ">192.0.2.77:443", - "label": ">192.0.2.77:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.2:443", - "span.type": "external", - "id": ">192.0.2.2:443", - "label": ">192.0.2.2:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.198:443", - "span.type": "external", - "id": ">192.0.2.198:443", - "label": ">192.0.2.198:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.113:443", - "span.type": "external", - "id": ">192.0.2.113:443", - "label": ">192.0.2.113:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.39:443", - "span.type": "external", - "id": ">192.0.2.39:443", - "label": ">192.0.2.39:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.83:443", - "span.type": "external", - "id": ">192.0.2.83:443", - "label": ">192.0.2.83:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.5:443", - "span.type": "external", - "id": ">192.0.2.5:443", - "label": ">192.0.2.5:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.165:443", - "span.type": "external", - "id": ">192.0.2.165:443", - "label": ">192.0.2.165:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.156:443", - "span.type": "external", - "id": ">192.0.2.156:443", - "label": ">192.0.2.156:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.132:443", - "span.type": "external", - "id": ">192.0.2.132:443", - "label": ">192.0.2.132:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.240:443", - "span.type": "external", - "id": ">192.0.2.240:443", - "label": ">192.0.2.240:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.54:443", - "span.type": "external", - "id": ">192.0.2.54:443", - "label": ">192.0.2.54:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.213:443", - "span.type": "external", - "id": ">192.0.2.213:443", - "label": ">192.0.2.213:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.81:443", - "span.type": "external", - "id": ">192.0.2.81:443", - "label": ">192.0.2.81:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.176:443", - "span.type": "external", - "id": ">192.0.2.176:443", - "label": ">192.0.2.176:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.82:443", - "span.type": "external", - "id": ">192.0.2.82:443", - "label": ">192.0.2.82:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.23:443", - "span.type": "external", - "id": ">192.0.2.23:443", - "label": ">192.0.2.23:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.189:443", - "span.type": "external", - "id": ">192.0.2.189:443", - "label": ">192.0.2.189:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.190:443", - "span.type": "external", - "id": ">192.0.2.190:443", - "label": ">192.0.2.190:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.119:443", - "span.type": "external", - "id": ">192.0.2.119:443", - "label": ">192.0.2.119:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.169:443", - "span.type": "external", - "id": ">192.0.2.169:443", - "label": ">192.0.2.169:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.210:443", - "span.type": "external", - "id": ">192.0.2.210:443", - "label": ">192.0.2.210:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.148:443", - "span.type": "external", - "id": ">192.0.2.148:443", - "label": ">192.0.2.148:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.26:443", - "span.type": "external", - "id": ">192.0.2.26:443", - "label": ">192.0.2.26:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.139:443", - "span.type": "external", - "id": ">192.0.2.139:443", - "label": ">192.0.2.139:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.111:443", - "span.type": "external", - "id": ">192.0.2.111:443", - "label": ">192.0.2.111:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.13:443", - "span.type": "external", - "id": ">192.0.2.13:443", - "label": ">192.0.2.13:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.36:443", - "span.type": "external", - "id": ">192.0.2.36:443", - "label": ">192.0.2.36:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.69:443", - "span.type": "external", - "id": ">192.0.2.69:443", - "label": ">192.0.2.69:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.173:443", - "span.type": "external", - "id": ">192.0.2.173:443", - "label": ">192.0.2.173:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.144:443", - "span.type": "external", - "id": ">192.0.2.144:443", - "label": ">192.0.2.144:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.135:443", - "span.type": "external", - "id": ">192.0.2.135:443", - "label": ">192.0.2.135:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.21:443", - "span.type": "external", - "id": ">192.0.2.21:443", - "label": ">192.0.2.21:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.118:443", - "span.type": "external", - "id": ">192.0.2.118:443", - "label": ">192.0.2.118:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.42:443", - "span.type": "external", - "id": ">192.0.2.42:443", - "label": ">192.0.2.42:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.106:443", - "span.type": "external", - "id": ">192.0.2.106:443", - "label": ">192.0.2.106:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.3:443", - "span.type": "external", - "id": ">192.0.2.3:443", - "label": ">192.0.2.3:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.34:443", - "span.type": "external", - "id": ">192.0.2.34:443", - "label": ">192.0.2.34:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.185:443", - "span.type": "external", - "id": ">192.0.2.185:443", - "label": ">192.0.2.185:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.153:443", - "span.type": "external", - "id": ">192.0.2.153:443", - "label": ">192.0.2.153:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.9:443", - "span.type": "external", - "id": ">192.0.2.9:443", - "label": ">192.0.2.9:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.164:443", - "span.type": "external", - "id": ">192.0.2.164:443", - "label": ">192.0.2.164:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.47:443", - "span.type": "external", - "id": ">192.0.2.47:443", - "label": ">192.0.2.47:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.45:443", - "span.type": "external", - "id": ">192.0.2.45:443", - "label": ">192.0.2.45:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.8:443", - "span.type": "external", - "id": ">192.0.2.8:443", - "label": ">192.0.2.8:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.103:443", - "span.type": "external", - "id": ">192.0.2.103:443", - "label": ">192.0.2.103:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.60:443", - "span.type": "external", - "id": ">192.0.2.60:443", - "label": ">192.0.2.60:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.202:443", - "span.type": "external", - "id": ">192.0.2.202:443", - "label": ">192.0.2.202:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.70:443", - "span.type": "external", - "id": ">192.0.2.70:443", - "label": ">192.0.2.70:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.114:443", - "span.type": "external", - "id": ">192.0.2.114:443", - "label": ">192.0.2.114:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.25:443", - "span.type": "external", - "id": ">192.0.2.25:443", - "label": ">192.0.2.25:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.209:443", - "span.type": "external", - "id": ">192.0.2.209:443", - "label": ">192.0.2.209:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.248:443", - "span.type": "external", - "id": ">192.0.2.248:443", - "label": ">192.0.2.248:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.18:443", - "span.type": "external", - "id": ">192.0.2.18:443", - "label": ">192.0.2.18:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.107:443", - "span.type": "external", - "id": ">192.0.2.107:443", - "label": ">192.0.2.107:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.160:443", - "span.type": "external", - "id": ">192.0.2.160:443", - "label": ">192.0.2.160:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.228:443", - "span.type": "external", - "id": ">192.0.2.228:443", - "label": ">192.0.2.228:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.215:443", - "span.type": "external", - "id": ">192.0.2.215:443", - "label": ">192.0.2.215:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.162:443", - "span.type": "external", - "id": ">192.0.2.162:443", - "label": ">192.0.2.162:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.238:443", - "span.type": "external", - "id": ">192.0.2.238:443", - "label": ">192.0.2.238:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.145:443", - "span.type": "external", - "id": ">192.0.2.145:443", - "label": ">192.0.2.145:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.239:443", - "span.type": "external", - "id": ">192.0.2.239:443", - "label": ">192.0.2.239:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.59:443", - "span.type": "external", - "id": ">192.0.2.59:443", - "label": ">192.0.2.59:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.71:443", - "span.type": "external", - "id": ">192.0.2.71:443", - "label": ">192.0.2.71:443" - } - }, - { - "data": { - "span.subtype": "https", - "span.destination.service.resource": "192.0.2.48:443", - "span.type": "external", - "id": ">192.0.2.48:443", - "label": ">192.0.2.48:443" - } - }, - { - "data": { - "service.name": "graphics-worker", - "agent.name": "nodejs", - "service.environment": null, - "service.framework.name": null, - "id": "graphics-worker" - } - } - ] -} diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/empty_banner.test.tsx similarity index 95% rename from x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx rename to x-pack/plugins/apm/public/components/app/ServiceMap/empty_banner.test.tsx index f314fbbb1fba..ae27d4d3baf7 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/empty_banner.test.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { act, wait } from '@testing-library/react'; +import { act, waitFor } from '@testing-library/react'; import cytoscape from 'cytoscape'; import React, { ReactNode } from 'react'; import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext'; @@ -60,7 +60,7 @@ describe('EmptyBanner', () => { await act(async () => { cy.add({ data: { id: 'test id' } }); - await wait(() => { + await waitFor(() => { expect(component.container.children.length).toBeGreaterThan(0); }); }); diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap similarity index 100% rename from x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap rename to x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/service_overview.test.tsx similarity index 87% rename from x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx rename to x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/service_overview.test.tsx index d8c8f2561656..06e9008d5aeb 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/service_overview.test.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { render, wait, waitForElement } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; import { CoreStart } from 'kibana/public'; import { merge } from 'lodash'; import React, { FunctionComponent, ReactChild } from 'react'; @@ -129,11 +129,11 @@ describe('Service Overview -> View', () => { ], }); - const { container, getByText } = renderServiceOverview(); + const { container, findByText } = renderServiceOverview(); // wait for requests to be made - await wait(() => expect(httpGet).toHaveBeenCalledTimes(1)); - await waitForElement(() => getByText('My Python Service')); + await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1)); + await findByText('My Python Service'); expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot(); }); @@ -145,16 +145,14 @@ describe('Service Overview -> View', () => { items: [], }); - const { container, getByText } = renderServiceOverview(); + const { container, findByText } = renderServiceOverview(); // wait for requests to be made - await wait(() => expect(httpGet).toHaveBeenCalledTimes(1)); + await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1)); // wait for elements to be rendered - await waitForElement(() => - getByText( - "Looks like you don't have any APM services installed. Let's add some!" - ) + await findByText( + "Looks like you don't have any APM services installed. Let's add some!" ); expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot(); @@ -167,11 +165,11 @@ describe('Service Overview -> View', () => { items: [], }); - const { container, getByText } = renderServiceOverview(); + const { container, findByText } = renderServiceOverview(); // wait for requests to be made - await wait(() => expect(httpGet).toHaveBeenCalledTimes(1)); - await waitForElement(() => getByText('No services found')); + await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1)); + await findByText('No services found'); expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot(); }); @@ -187,7 +185,7 @@ describe('Service Overview -> View', () => { renderServiceOverview(); // wait for requests to be made - await wait(() => expect(httpGet).toHaveBeenCalledTimes(1)); + await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1)); expect(addWarning).toHaveBeenLastCalledWith( expect.objectContaining({ @@ -208,7 +206,7 @@ describe('Service Overview -> View', () => { renderServiceOverview(); // wait for requests to be made - await wait(() => expect(httpGet).toHaveBeenCalledTimes(1)); + await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1)); expect(addWarning).not.toHaveBeenCalled(); }); @@ -234,7 +232,7 @@ describe('Service Overview -> View', () => { const { queryByText } = renderServiceOverview(); // wait for requests to be made - await wait(() => expect(httpGet).toHaveBeenCalledTimes(1)); + await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1)); expect(queryByText('Health')).toBeNull(); }); @@ -261,7 +259,7 @@ describe('Service Overview -> View', () => { const { queryAllByText } = renderServiceOverview(); // wait for requests to be made - await wait(() => expect(httpGet).toHaveBeenCalledTimes(1)); + await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1)); expect(queryAllByText('Health').length).toBeGreaterThan(1); }); diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/link_preview.test.tsx similarity index 97% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx rename to x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/link_preview.test.tsx index 62aa08c223bd..4ccfc5b3013e 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/link_preview.test.tsx @@ -10,7 +10,7 @@ import { getNodeText, getByTestId, act, - wait, + waitFor, } from '@testing-library/react'; import * as apmApi from '../../../../../../services/rest/createCallApmApi'; @@ -82,7 +82,7 @@ describe('LinkPreview', () => { filters={[{ key: '', value: '' }]} /> ); - await wait(() => expect(callApmApiSpy).toHaveBeenCalled()); + await waitFor(() => expect(callApmApiSpy).toHaveBeenCalled()); expect(getElementValue(container, 'preview-label')).toEqual('foo'); expect( (getByTestId(container, 'preview-link') as HTMLAnchorElement).text diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx index 56c420878cdb..fea22e890dc1 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx @@ -4,7 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import { fireEvent, render, wait, RenderResult } from '@testing-library/react'; +import { + fireEvent, + render, + waitFor, + RenderResult, +} from '@testing-library/react'; import React from 'react'; import { act } from 'react-dom/test-utils'; import * as apmApi from '../../../../../services/rest/createCallApmApi'; @@ -181,7 +186,7 @@ describe('CustomLink', () => { act(() => { fireEvent.click(editButtons[0]); }); - await wait(() => + await waitFor(() => expect(component.queryByText('Create link')).toBeInTheDocument() ); await act(async () => { diff --git a/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx b/x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx similarity index 83% rename from x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx rename to x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx index 8d37a8e54d87..e7c0400290dc 100644 --- a/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx +++ b/x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx @@ -3,18 +3,18 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { render } from '@testing-library/react'; +import { act, render, waitFor } from '@testing-library/react'; import { shallow } from 'enzyme'; import React, { ReactNode } from 'react'; import { MemoryRouter, RouteComponentProps } from 'react-router-dom'; -import { TraceLink } from '../'; -import { ApmPluginContextValue } from '../../../../context/ApmPluginContext'; +import { TraceLink } from './'; +import { ApmPluginContextValue } from '../../../context/ApmPluginContext'; import { mockApmPluginContextValue, MockApmPluginContextWrapper, -} from '../../../../context/ApmPluginContext/MockApmPluginContext'; -import * as hooks from '../../../../hooks/useFetcher'; -import * as urlParamsHooks from '../../../../hooks/useUrlParams'; +} from '../../../context/ApmPluginContext/MockApmPluginContext'; +import * as hooks from '../../../hooks/useFetcher'; +import * as urlParamsHooks from '../../../hooks/useUrlParams'; function Wrapper({ children }: { children?: ReactNode }) { return ( @@ -43,13 +43,18 @@ describe('TraceLink', () => { jest.clearAllMocks(); }); - it('renders a transition page', () => { + it('renders a transition page', async () => { const props = ({ match: { params: { traceId: 'x' } }, } as unknown) as RouteComponentProps<{ traceId: string }>; - const component = render(, renderOptions); + let result; + act(() => { + const component = render(, renderOptions); - expect(component.getByText('Fetching trace...')).toBeDefined(); + result = component.getByText('Fetching trace...'); + }); + await waitFor(() => {}); + expect(result).toBeDefined(); }); describe('when no transaction is found', () => { diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx index 8e3d0effb97a..e3ba02ce42c2 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx @@ -4,102 +4,95 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; -import { storiesOf } from '@storybook/react'; +import React, { ComponentType } from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { EuiThemeProvider } from '../../../../../../../observability/public'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { TraceAPIResponse } from '../../../../../../server/lib/traces/get_trace'; +import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; import { WaterfallContainer } from './index'; +import { getWaterfall } from './Waterfall/waterfall_helpers/waterfall_helpers'; import { + inferredSpans, location, - urlParams, simpleTrace, - traceWithErrors, traceChildStartBeforeParent, - inferredSpans, + traceWithErrors, + urlParams, } from './waterfallContainer.stories.data'; -import { getWaterfall } from './Waterfall/waterfall_helpers/waterfall_helpers'; -import { EuiThemeProvider } from '../../../../../../../observability/public'; -storiesOf('app/TransactionDetails/Waterfall', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'example', - () => { - const waterfall = getWaterfall( - simpleTrace as TraceAPIResponse, - '975c8d5bfd1dd20b' - ); - return ( - - ); - }, - { info: { propTablesExclude: [EuiThemeProvider], source: false } } +export default { + title: 'app/TransactionDetails/Waterfall', + component: WaterfallContainer, + decorators: [ + (Story: ComponentType) => ( + + + + + + + + ), + ], +}; + +export function Example() { + const waterfall = getWaterfall( + simpleTrace as TraceAPIResponse, + '975c8d5bfd1dd20b' + ); + return ( + ); +} -storiesOf('app/TransactionDetails/Waterfall', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'with errors', - () => { - const waterfall = getWaterfall( - (traceWithErrors as unknown) as TraceAPIResponse, - '975c8d5bfd1dd20b' - ); - return ( - - ); - }, - { info: { propTablesExclude: [EuiThemeProvider], source: false } } +export function WithErrors() { + const waterfall = getWaterfall( + (traceWithErrors as unknown) as TraceAPIResponse, + '975c8d5bfd1dd20b' ); + return ( + + ); +} -storiesOf('app/TransactionDetails/Waterfall', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'child starts before parent', - () => { - const waterfall = getWaterfall( - traceChildStartBeforeParent as TraceAPIResponse, - '975c8d5bfd1dd20b' - ); - return ( - - ); - }, - { info: { propTablesExclude: [EuiThemeProvider], source: false } } +export function ChildStartsBeforeParent() { + const waterfall = getWaterfall( + traceChildStartBeforeParent as TraceAPIResponse, + '975c8d5bfd1dd20b' + ); + return ( + ); +} -storiesOf('app/TransactionDetails/Waterfall', module) - .addDecorator((storyFn) => {storyFn()}) - .add( - 'inferred spans', - () => { - const waterfall = getWaterfall( - inferredSpans as TraceAPIResponse, - 'f2387d37260d00bd' - ); - return ( - - ); - }, - { info: { propTablesExclude: [EuiThemeProvider], source: false } } +export function InferredSpans() { + const waterfall = getWaterfall( + inferredSpans as TraceAPIResponse, + 'f2387d37260d00bd' + ); + return ( + ); +} diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx index a65589bdd147..049c5934813a 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx @@ -4,33 +4,45 @@ * you may not use this file except in compliance with the Elastic License. */ -import { storiesOf } from '@storybook/react'; -import React from 'react'; +import React, { ComponentType } from 'react'; +import { MemoryRouter } from 'react-router-dom'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { TransactionGroup } from '../../../../../server/lib/transaction_groups/fetcher'; +import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; import { TransactionList } from './'; -storiesOf('app/TransactionOverview/TransactionList', module).add( - 'Single Row', - () => { - const items: TransactionGroup[] = [ - { - key: { - ['service.name']: 'adminconsole', - ['transaction.name']: - 'GET /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all', - }, - transactionName: +export default { + title: 'app/TransactionOverview/TransactionList', + component: TransactionList, + decorators: [ + (Story: ComponentType) => ( + + + + + + ), + ], +}; + +export function SingleRow() { + const items: TransactionGroup[] = [ + { + key: { + ['service.name']: 'adminconsole', + ['transaction.name']: 'GET /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all', - serviceName: 'adminconsole', - transactionType: 'request', - p95: 11974156, - averageResponseTime: 8087434.558974359, - transactionsPerMinute: 0.40625, - impact: 100, }, - ]; + transactionName: + 'GET /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all', + serviceName: 'adminconsole', + transactionType: 'request', + p95: 11974156, + averageResponseTime: 8087434.558974359, + transactionsPerMinute: 0.40625, + impact: 100, + }, + ]; - return ; - } -); + return ; +} diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/ApmHeader.stories.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/ApmHeader.stories.tsx deleted file mode 100644 index c9b7c7740984..000000000000 --- a/x-pack/plugins/apm/public/components/shared/ApmHeader/ApmHeader.stories.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { EuiTitle } from '@elastic/eui'; -import { storiesOf } from '@storybook/react'; -import React from 'react'; -import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext'; -import { ApmHeader } from './'; - -storiesOf('shared/ApmHeader', module) - .addDecorator((storyFn) => { - return ( - {storyFn()} - ); - }) - .add('Example', () => { - return ( - - -

- GET - /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all -

- - - ); - }); diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/apm_header.stories.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/apm_header.stories.tsx new file mode 100644 index 000000000000..4078998bc7e3 --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/ApmHeader/apm_header.stories.tsx @@ -0,0 +1,49 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiTitle } from '@elastic/eui'; +import React, { ComponentType } from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { HttpSetup } from '../../../../../../../src/core/public'; +import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext'; +import { MockUrlParamsContextProvider } from '../../../context/UrlParamsContext/MockUrlParamsContextProvider'; +import { createCallApmApi } from '../../../services/rest/createCallApmApi'; +import { ApmHeader } from './'; + +export default { + title: 'shared/ApmHeader', + component: ApmHeader, + decorators: [ + (Story: ComponentType) => { + createCallApmApi(({} as unknown) as HttpSetup); + + return ( + + + + + + + + ); + }, + ], +}; + +export function Example() { + return ( + + +

+ GET + /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all +

+ + + ); +} diff --git a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx b/x-pack/plugins/apm/public/components/shared/DatePicker/date_picker.test.tsx similarity index 91% rename from x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx rename to x-pack/plugins/apm/public/components/shared/DatePicker/date_picker.test.tsx index 9de70d50b25e..efa827a0e5df 100644 --- a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/DatePicker/date_picker.test.tsx @@ -5,18 +5,18 @@ */ import { EuiSuperDatePicker } from '@elastic/eui'; -import { wait } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import { mount } from 'enzyme'; import { createMemoryHistory } from 'history'; import React, { ReactNode } from 'react'; import { Router } from 'react-router-dom'; -import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; +import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext'; import { UrlParamsContext, useUiFilters, -} from '../../../../context/UrlParamsContext'; -import { IUrlParams } from '../../../../context/UrlParamsContext/types'; -import { DatePicker } from '../index'; +} from '../../../context/UrlParamsContext'; +import { IUrlParams } from '../../../context/UrlParamsContext/types'; +import { DatePicker } from './'; const history = createMemoryHistory(); const mockHistoryPush = jest.spyOn(history, 'push'); @@ -124,7 +124,7 @@ describe('DatePicker', () => { }); expect(mockRefreshTimeRange).not.toHaveBeenCalled(); jest.advanceTimersByTime(1000); - await wait(); + await waitFor(() => {}); expect(mockRefreshTimeRange).toHaveBeenCalled(); wrapper.unmount(); }); @@ -134,7 +134,7 @@ describe('DatePicker', () => { mountDatePicker({ refreshPaused: true, refreshInterval: 1000 }); expect(mockRefreshTimeRange).not.toHaveBeenCalled(); jest.advanceTimersByTime(1000); - await wait(); + await waitFor(() => {}); expect(mockRefreshTimeRange).not.toHaveBeenCalled(); }); }); diff --git a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx b/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx index 45fa3dd38226..1819e71a4975 100644 --- a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx @@ -4,31 +4,31 @@ * you may not use this file except in compliance with the Elastic License. */ -import { storiesOf } from '@storybook/react'; -import React from 'react'; +import React, { ComponentType } from 'react'; +import { LicensePrompt } from '.'; import { ApmPluginContext, ApmPluginContextValue, } from '../../../context/ApmPluginContext'; -import { LicensePrompt } from '.'; -storiesOf('app/LicensePrompt', module).add( - 'example', - () => { - const contextMock = ({ - core: { http: { basePath: { prepend: () => {} } } }, - } as unknown) as ApmPluginContextValue; +const contextMock = ({ + core: { http: { basePath: { prepend: () => {} } } }, +} as unknown) as ApmPluginContextValue; - return ( +export default { + title: 'app/LicensePrompt', + component: LicensePrompt, + decorators: [ + (Story: ComponentType) => ( - + {' '} - ); - }, - { - info: { - propTablesExclude: [ApmPluginContext.Provider, LicensePrompt], - source: false, - }, - } -); + ), + ], +}; + +export function Example() { + return ( + + ); +} diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/DiscoverTransactionButton.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/discover_transaction_button.test.tsx.snap similarity index 100% rename from x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/DiscoverTransactionButton.test.tsx.snap rename to x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/discover_transaction_button.test.tsx.snap diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/discover_transaction_button.test.tsx similarity index 78% rename from x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx rename to x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/discover_transaction_button.test.tsx index 17dca4796ec7..4a68a5c0b490 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/discover_transaction_button.test.tsx @@ -11,12 +11,11 @@ import { DiscoverTransactionLink, getDiscoverQuery, } from '../DiscoverTransactionLink'; -import mockTransaction from './mockTransaction.json'; +import mockTransaction from './mock_transaction.json'; describe('DiscoverTransactionLink component', () => { it('should render with data', () => { - // @ts-expect-error invalid json mock - const transaction: Transaction = mockTransaction; + const transaction = mockTransaction as Transaction; expect( shallow() @@ -26,8 +25,7 @@ describe('DiscoverTransactionLink component', () => { describe('getDiscoverQuery', () => { it('should return the correct query params object', () => { - // @ts-expect-error invalid json mock - const transaction: Transaction = mockTransaction; + const transaction = mockTransaction as Transaction; const result = getDiscoverQuery(transaction); expect(result).toMatchSnapshot(); }); diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mockTransaction.json b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mock_transaction.json similarity index 98% rename from x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mockTransaction.json rename to x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mock_transaction.json index 4d038cd7e839..6c08eedf50b0 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mockTransaction.json +++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mock_transaction.json @@ -1,6 +1,7 @@ { "agent": { "hostname": "227453131a17", + "name": "go", "type": "apm-server", "version": "7.0.0" }, @@ -91,9 +92,7 @@ }, "name": "GET /api/products/:id/customers", "span_count": { - "dropped": { - "total": 0 - }, + "dropped": 0, "started": 1 }, "id": "8b60bd32ecc6e150", diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.test.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/anomaly_detection_setup_link.test.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.test.tsx rename to x-pack/plugins/apm/public/components/shared/Links/apm/anomaly_detection_setup_link.test.tsx index 585ab22b5fb2..3f675f494a66 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/Links/apm/anomaly_detection_setup_link.test.tsx @@ -5,7 +5,7 @@ */ import React from 'react'; -import { render, fireEvent, wait } from '@testing-library/react'; +import { render, fireEvent, waitFor } from '@testing-library/react'; import { MissingJobsAlert } from './AnomalyDetectionSetupLink'; import * as hooks from '../../../../hooks/useFetcher'; @@ -33,7 +33,7 @@ async function renderTooltipAnchor({ fireEvent.mouseOver(toolTipAnchor); // wait for tooltip text to be in the DOM - await wait(() => { + await waitFor(() => { const toolTipText = baseElement.querySelector('.euiToolTipPopover') ?.textContent; expect(toolTipText).not.toBe(undefined); diff --git a/x-pack/plugins/apm/public/context/UrlParamsContext/__tests__/UrlParamsContext.test.tsx b/x-pack/plugins/apm/public/context/UrlParamsContext/url_params_context.test.tsx similarity index 94% rename from x-pack/plugins/apm/public/context/UrlParamsContext/__tests__/UrlParamsContext.test.tsx rename to x-pack/plugins/apm/public/context/UrlParamsContext/url_params_context.test.tsx index 9989e568953f..3a6ccce178cd 100644 --- a/x-pack/plugins/apm/public/context/UrlParamsContext/__tests__/UrlParamsContext.test.tsx +++ b/x-pack/plugins/apm/public/context/UrlParamsContext/url_params_context.test.tsx @@ -5,14 +5,14 @@ */ import * as React from 'react'; -import { UrlParamsContext, UrlParamsProvider } from '..'; +import { UrlParamsContext, UrlParamsProvider } from './'; import { mount } from 'enzyme'; import { Location, History } from 'history'; import { MemoryRouter, Router } from 'react-router-dom'; import moment from 'moment-timezone'; -import { IUrlParams } from '../types'; -import { getParsedDate } from '../helpers'; -import { wait } from '@testing-library/react'; +import { IUrlParams } from './types'; +import { getParsedDate } from './helpers'; +import { waitFor } from '@testing-library/react'; function mountParams(location: Location) { return mount( @@ -119,13 +119,13 @@ describe('UrlParamsContext', () => { ); - await wait(); + await waitFor(() => {}); expect(calls.length).toBe(1); wrapper.find('button').simulate('click'); - await wait(); + await waitFor(() => {}); expect(calls.length).toBe(2); @@ -170,11 +170,11 @@ describe('UrlParamsContext', () => { ); - await wait(); + await waitFor(() => {}); wrapper.find('button').simulate('click'); - await wait(); + await waitFor(() => {}); const params = getDataFromOutput(wrapper); expect(params.start).toEqual('2000-06-14T00:00:00.000Z'); diff --git a/x-pack/plugins/apm/public/hooks/useFetcher.integration.test.tsx b/x-pack/plugins/apm/public/hooks/use_fetcher.integration.test.tsx similarity index 94% rename from x-pack/plugins/apm/public/hooks/useFetcher.integration.test.tsx rename to x-pack/plugins/apm/public/hooks/use_fetcher.integration.test.tsx index 0081662200b9..e837851828d9 100644 --- a/x-pack/plugins/apm/public/hooks/useFetcher.integration.test.tsx +++ b/x-pack/plugins/apm/public/hooks/use_fetcher.integration.test.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { render, wait } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; import React from 'react'; import { delay } from '../utils/testHelpers'; import { useFetcher } from './useFetcher'; @@ -65,7 +65,7 @@ describe('when simulating race condition', () => { it('should render "Hello from Peter" after 200ms', async () => { jest.advanceTimersByTime(200); - await wait(); + await waitFor(() => {}); expect(renderSpy).lastCalledWith({ data: 'Hello from Peter', @@ -76,7 +76,7 @@ describe('when simulating race condition', () => { it('should render "Hello from Peter" after 600ms', async () => { jest.advanceTimersByTime(600); - await wait(); + await waitFor(() => {}); expect(renderSpy).lastCalledWith({ data: 'Hello from Peter', @@ -87,7 +87,7 @@ describe('when simulating race condition', () => { it('should should NOT have rendered "Hello from John" at any point', async () => { jest.advanceTimersByTime(600); - await wait(); + await waitFor(() => {}); expect(renderSpy).not.toHaveBeenCalledWith({ data: 'Hello from John', @@ -98,7 +98,7 @@ describe('when simulating race condition', () => { it('should send and receive calls in the right order', async () => { jest.advanceTimersByTime(600); - await wait(); + await waitFor(() => {}); expect(requestCallOrder).toEqual([ ['request', 'John', 500], diff --git a/x-pack/plugins/apm/public/utils/testHelpers.tsx b/x-pack/plugins/apm/public/utils/testHelpers.tsx index 7826e9672a3b..f990c4387ddf 100644 --- a/x-pack/plugins/apm/public/utils/testHelpers.tsx +++ b/x-pack/plugins/apm/public/utils/testHelpers.tsx @@ -12,7 +12,7 @@ import enzymeToJson from 'enzyme-to-json'; import { Location } from 'history'; import moment from 'moment'; import { Moment } from 'moment-timezone'; -import { render, waitForElement } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { APMConfig } from '../../server'; @@ -75,10 +75,10 @@ export async function getRenderedHref(Component: React.FC, location: Location) { ); + const a = el.container.querySelector('a'); - await waitForElement(() => el.container.querySelector('a')); + await waitFor(() => {}, { container: a! }); - const a = el.container.querySelector('a'); return a ? a.getAttribute('href') : ''; } diff --git a/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts b/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts index 23ef3f92e21a..c3238963eede 100644 --- a/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts +++ b/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts @@ -4,14 +4,16 @@ * you may not use this file except in compliance with the Elastic License. */ +import { ConnectionElement } from '../../../common/service_map'; import { groupResourceNodes } from './group_resource_nodes'; -import preGroupedData from './mock_responses/group_resource_nodes_pregrouped.json'; import expectedGroupedData from './mock_responses/group_resource_nodes_grouped.json'; +import preGroupedData from './mock_responses/group_resource_nodes_pregrouped.json'; describe('groupResourceNodes', () => { it('should group external nodes', () => { - // @ts-expect-error invalid json mock - const responseWithGroups = groupResourceNodes(preGroupedData); + const responseWithGroups = groupResourceNodes( + preGroupedData as { elements: ConnectionElement[] } + ); expect(responseWithGroups.elements).toHaveLength( expectedGroupedData.elements.length ); diff --git a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json index fa5c63f1b9a5..863d4bed998e 100644 --- a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json +++ b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json @@ -12,7 +12,7 @@ "value": 10000, "relation": "gte" }, - "max_score": null, + "max_score": 0, "hits": [] }, "aggregations": { diff --git a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json index 56303909bcd6..d74f7bf82c2b 100644 --- a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json +++ b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json @@ -12,7 +12,7 @@ "value": 10000, "relation": "gte" }, - "max_score": null, + "max_score": 0, "hits": [] }, "aggregations": { diff --git a/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts b/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts index 9bd9c7b7a104..f30b77f14771 100644 --- a/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts +++ b/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts @@ -3,14 +3,18 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { getDerivedServiceAnnotations } from './get_derived_service_annotations'; import { - SearchParamsMock, + ESSearchRequest, + ESSearchResponse, +} from '../../../../typings/elasticsearch'; +import { inspectSearchParams, + SearchParamsMock, } from '../../../utils/test_helpers'; +import { getDerivedServiceAnnotations } from './get_derived_service_annotations'; +import multipleVersions from './__fixtures__/multiple_versions.json'; import noVersions from './__fixtures__/no_versions.json'; import oneVersion from './__fixtures__/one_version.json'; -import multipleVersions from './__fixtures__/multiple_versions.json'; import versionsFirstSeen from './__fixtures__/versions_first_seen.json'; describe('getServiceAnnotations', () => { @@ -31,8 +35,14 @@ describe('getServiceAnnotations', () => { searchAggregatedTransactions: false, }), { - // @ts-expect-error invalid json mock - mockResponse: () => noVersions, + mockResponse: () => + noVersions as ESSearchResponse< + unknown, + ESSearchRequest, + { + restTotalHitsAsInt: false; + } + >, } ); @@ -51,8 +61,14 @@ describe('getServiceAnnotations', () => { searchAggregatedTransactions: false, }), { - // @ts-expect-error invalid json mock - mockResponse: () => oneVersion, + mockResponse: () => + oneVersion as ESSearchResponse< + unknown, + ESSearchRequest, + { + restTotalHitsAsInt: false; + } + >, } ); @@ -76,8 +92,14 @@ describe('getServiceAnnotations', () => { searchAggregatedTransactions: false, }), { - // @ts-expect-error invalid json mock - mockResponse: () => responses.shift(), + mockResponse: () => + (responses.shift() as unknown) as ESSearchResponse< + unknown, + ESSearchRequest, + { + restTotalHitsAsInt: false; + } + >, } ); From 59e4e0631608ae58d933864a5b968511a13f2ec9 Mon Sep 17 00:00:00 2001 From: Vadim Dalecky Date: Mon, 5 Oct 2020 16:31:30 +0200 Subject: [PATCH 13/16] Drilldowns in examples (#75640) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 add telemetry for in-chart "Explore underlying data" * feat: 🎸 add telemetry for in-chart "Explore underlying data" * refactor: 💡 move all drilldowns into a sub-folder * feat: 🎸 setup example app section for ui_actions_enhanced * feat: 🎸 set up Drilldown Manager section * feat: 🎸 open drilldown manager from example plugin * refactor: 💡 rename supportedTriggers -> triggers prop * feat: 🎸 show dev warning if triggers prop is empty * refactor: 💡 rename "supportedTriggers" -> "triggers" props * feat: 🎸 open and close drilldown manager from example plugin * feat: 🎸 add sample ML job trigger * feat: 🎸 add sample ML URL drilldown * refactor: 💡 move KibanaURL to share plugin * refactor: 💡 add index file to ml drilldown * feat: 🎸 add AbstractDashboardDrilldown * refactor: 💡 make dashboard drilldown use abstract drilldown * refactor: 💡 rename dashboard drilldown to embeddable drilldown * feat: 🎸 add Dashboard drilldown to sample plugin * feat: 🎸 open dashboard drilldown in list view * feat: 🎸 add drilldown execute button * refactor: 💡 move drilldown React hooks into /hooks folder * test: 💍 fix tests after renaming triggers * chore: 🤖 populate "requireBundles" * fix: 🐛 fix TypeScript errors * fix: 🐛 fix Kibana plugin dependency * chore: 🤖 remoe unused import * feat: 🎸 persist drilldown manager state across app navigations * refactor: 💡 move no-embeddable example into a seprate file * feat: 🎸 set up example with embeddable * feat: 🎸 improve embeddable example * refactor: 💡 rename without embeddable example * feat: 🎸 set up no-embeddable single click example * feat: 🎸 add dashboard drilldown to single button example * fix: 🐛 remove unused margin * fix: 🐛 make "Get more actions" translation static * chore: 🤖 remove old dashboard drilldown definition * refactor: 💡 rename samples to generic names * refactor: 💡 make app 1 example drilldown "hello world" * chore: 🤖 remove unused required bundle * chore: 🤖 add dashboardEnhanced back * [kbn/optimizer] only build xpack examples when building xpack plugins * move alerting_example into x-pack/examples * remove filter for alertingExample plugin in oss plugins CI step * revert unrelated change * fix: 🐛 use correct prop name * test: 💍 fix embeddable-to-dashboard drilldown mock * test: 💍 fix a test after refactor * chore: 🤖 remove unused import * chore: 🤖 add dashboard_enahcned to example plugin * chore: 🤖 address review comments * feat: 🎸 add description to UI Actions Enhanced examples * docs: ✏️ improve docs of example plugin Co-authored-by: spalger Co-authored-by: Elastic Machine Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- src/plugins/dashboard/public/index.ts | 7 +- src/plugins/dashboard/public/plugin.tsx | 17 +- src/plugins/share/public/index.ts | 2 + src/plugins/share/public/kibana_url.ts | 44 ++++++ .../ui_actions_enhanced_examples/README.md | 74 ++++++++- .../ui_actions_enhanced_examples/kibana.json | 15 +- .../public/components/page/index.tsx | 38 +++++ .../public/components/section/index.tsx | 7 + .../public/components/section/section.tsx | 24 +++ .../public/containers/app/app.tsx | 20 +++ .../public/containers/app/index.tsx | 7 + .../drilldowns_manager/drilldowns_manager.tsx | 39 +++++ .../containers/drilldowns_manager/index.tsx | 7 + .../drilldowns_with_embeddable_example.tsx | 134 ++++++++++++++++ .../index.tsx | 7 + .../drilldowns_without_embeddable_example.tsx | 129 ++++++++++++++++ .../index.tsx | 7 + ...thout_embeddable_single_button_example.tsx | 62 ++++++++ .../index.tsx | 7 + .../public/context/context.ts | 22 +++ .../public/context}/index.ts | 2 +- .../app1_hello_world_drilldown.tsx | 66 ++++++++ .../app1_hello_world_drilldown/index.tsx | 7 + .../app1_to_dashboard_drilldown.ts | 32 ++++ .../app1_to_dashboard_drilldown/index.tsx | 7 + .../app2_to_dashboard_drilldown.ts | 32 ++++ .../app2_to_dashboard_drilldown/index.tsx | 7 + .../dashboard_hello_world_drilldown/README.md | 0 .../dashboard_hello_world_drilldown/index.tsx | 10 +- .../README.md | 0 .../index.tsx | 12 +- .../collect_config_container.tsx | 0 .../discover_drilldown_config.tsx | 0 .../discover_drilldown_config/i18n.ts | 0 .../discover_drilldown_config/index.ts | 0 .../components/index.ts | 0 .../constants.ts | 0 .../drilldown.tsx | 10 +- .../dashboard_to_discover_drilldown/i18n.ts | 0 .../dashboard_to_discover_drilldown/index.ts | 0 .../dashboard_to_discover_drilldown/types.ts | 4 +- .../button_embeddable/button_embeddable.ts | 53 +++++++ .../button_embeddable_component.tsx | 27 ++++ .../embeddables/button_embeddable/index.ts | 7 + .../public/mount.tsx | 38 +++++ .../public/plugin.ts | 146 +++++++++++++++++- .../public/triggers/index.ts | 8 + .../public/triggers/sample_app1_trigger.ts | 31 ++++ .../public/triggers/sample_app2_trigger.ts | 31 ++++ x-pack/plugins/dashboard_enhanced/kibana.json | 1 + .../dashboard_enhanced/public/index.ts | 6 + .../abstract_dashboard_drilldown.tsx | 89 +++++++++++ .../components/collect_config_container.tsx | 6 +- .../dashboard_drilldown_config.story.tsx} | 0 .../dashboard_drilldown_config.test.tsx | 0 .../dashboard_drilldown_config.tsx | 0 .../dashboard_drilldown_config/i18n.ts | 0 .../dashboard_drilldown_config/index.ts | 0 .../components/i18n.ts | 0 .../components}/index.ts | 8 +- .../i18n.ts | 0 .../abstract_dashboard_drilldown/index.ts | 11 ++ .../types.ts | 0 .../flyout_create_drilldown.tsx | 2 +- .../flyout_edit_drilldown.tsx | 2 +- .../dashboard_drilldowns_services.ts | 13 +- .../drilldown.tsx | 125 --------------- .../constants.ts | 8 +- ...mbeddable_to_dashboard_drilldown.test.tsx} | 42 ++--- .../embeddable_to_dashboard_drilldown.tsx | 83 ++++++++++ .../index.ts | 11 ++ x-pack/plugins/discover_enhanced/kibana.json | 2 +- .../abstract_explore_data_action.ts | 2 +- .../explore_data/explore_data_chart_action.ts | 2 +- .../explore_data_context_menu_action.ts | 2 +- .../public/actions/explore_data/kibana_url.ts | 31 ---- .../embeddable_action_storage.test.ts | 3 +- .../action_wizard/action_wizard.tsx | 12 +- .../components/action_wizard/test_data.tsx | 2 +- ...ected_flyout_manage_drilldowns.stories.tsx | 4 +- ...onnected_flyout_manage_drilldowns.test.tsx | 20 +-- .../connected_flyout_manage_drilldowns.tsx | 135 ++-------------- .../i18n.ts | 81 ---------- .../flyout_drilldown_wizard.tsx | 2 +- .../form_drilldown_wizard.stories.tsx | 6 +- .../form_drilldown_wizard.test.tsx | 6 +- .../form_drilldown_wizard.tsx | 26 +++- .../components/form_drilldown_wizard/i18n.ts | 7 + .../public/drilldowns/hooks/i18n.ts | 88 +++++++++++ ...le_action_factories_for_current_context.ts | 35 +++++ .../hooks/use_drilldown_state_manager.tsx | 86 +++++++++++ .../drilldowns/hooks/use_welcome_message.ts | 22 +++ 92 files changed, 1687 insertions(+), 493 deletions(-) create mode 100644 src/plugins/share/public/kibana_url.ts create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/components/section/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/components/section/section.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/app/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/drilldowns_manager.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/context/context.ts rename x-pack/{plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components => examples/ui_actions_enhanced_examples/public/context}/index.ts (77%) create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/app1_hello_world_drilldown.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/app1_to_dashboard_drilldown.ts create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/index.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/app2_to_dashboard_drilldown.ts create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/index.tsx rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_hello_world_drilldown/README.md (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_hello_world_drilldown/index.tsx (83%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_hello_world_only_range_select_drilldown/README.md (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_hello_world_only_range_select_drilldown/index.tsx (81%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/collect_config_container.tsx (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/components/index.ts (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/constants.ts (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/drilldown.tsx (88%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/i18n.ts (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/index.ts (100%) rename x-pack/examples/ui_actions_enhanced_examples/public/{ => drilldowns}/dashboard_to_discover_drilldown/types.ts (87%) create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable_component.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/index.ts create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/mount.tsx create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/triggers/index.ts create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app1_trigger.ts create mode 100644 x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app2_trigger.ts create mode 100644 x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/abstract_dashboard_drilldown.tsx rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/components/collect_config_container.tsx (96%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.stories.tsx => abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.story.tsx} (100%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx (100%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx (100%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/components/dashboard_drilldown_config/i18n.ts (100%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/components/dashboard_drilldown_config/index.ts (100%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/components/i18n.ts (100%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown/components}/index.ts (55%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/i18n.ts (100%) create mode 100644 x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/index.ts rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => abstract_dashboard_drilldown}/types.ts (100%) delete mode 100644 x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown => embeddable_to_dashboard_drilldown}/constants.ts (68%) rename x-pack/plugins/dashboard_enhanced/public/services/drilldowns/{dashboard_to_dashboard_drilldown/drilldown.test.tsx => embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx} (88%) create mode 100644 x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx create mode 100644 x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/index.ts delete mode 100644 x-pack/plugins/discover_enhanced/public/actions/explore_data/kibana_url.ts create mode 100644 x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/i18n.ts create mode 100644 x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_compatible_action_factories_for_current_context.ts create mode 100644 x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_drilldown_state_manager.tsx create mode 100644 x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_welcome_message.ts diff --git a/src/plugins/dashboard/public/index.ts b/src/plugins/dashboard/public/index.ts index 315afd61c7c4..bf9a3b2b8a21 100644 --- a/src/plugins/dashboard/public/index.ts +++ b/src/plugins/dashboard/public/index.ts @@ -31,7 +31,12 @@ export { } from './application'; export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants'; -export { DashboardStart, DashboardUrlGenerator, DashboardFeatureFlagConfig } from './plugin'; +export { + DashboardSetup, + DashboardStart, + DashboardUrlGenerator, + DashboardFeatureFlagConfig, +} from './plugin'; export { DASHBOARD_APP_URL_GENERATOR, createDashboardUrlGenerator, diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index eadb3cd207e4..52318ce2e39f 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -145,7 +145,7 @@ interface StartDependencies { savedObjects: SavedObjectsStart; } -export type Setup = void; +export type DashboardSetup = void; export interface DashboardStart { getSavedDashboardLoader: () => SavedObjectLoader; @@ -180,7 +180,7 @@ declare module '../../../plugins/ui_actions/public' { } export class DashboardPlugin - implements Plugin { + implements Plugin { constructor(private initializerContext: PluginInitializerContext) {} private appStateUpdater = new BehaviorSubject(() => ({})); @@ -193,17 +193,8 @@ export class DashboardPlugin public setup( core: CoreSetup, - { - share, - uiActions, - embeddable, - home, - kibanaLegacy, - urlForwarding, - data, - usageCollection, - }: SetupDependencies - ): Setup { + { share, uiActions, embeddable, home, urlForwarding, data, usageCollection }: SetupDependencies + ): DashboardSetup { this.dashboardFeatureFlagConfig = this.initializerContext.config.get< DashboardFeatureFlagConfig >(); diff --git a/src/plugins/share/public/index.ts b/src/plugins/share/public/index.ts index e3d6c41a278c..950ecebeaadc 100644 --- a/src/plugins/share/public/index.ts +++ b/src/plugins/share/public/index.ts @@ -40,4 +40,6 @@ export { import { SharePlugin } from './plugin'; +export { KibanaURL } from './kibana_url'; + export const plugin = () => new SharePlugin(); diff --git a/src/plugins/share/public/kibana_url.ts b/src/plugins/share/public/kibana_url.ts new file mode 100644 index 000000000000..40c3372579f6 --- /dev/null +++ b/src/plugins/share/public/kibana_url.ts @@ -0,0 +1,44 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +// TODO: Replace this logic with KibanaURL once it is available. +// https://github.com/elastic/kibana/issues/64497 +export class KibanaURL { + public readonly path: string; + public readonly appName: string; + public readonly appPath: string; + + constructor(path: string) { + const match = path.match(/^.*\/app\/([^\/#]+)(.+)$/); + + if (!match) { + throw new Error('Unexpected URL path.'); + } + + const [, appName, appPath] = match; + + if (!appName || !appPath) { + throw new Error('Could not parse URL path.'); + } + + this.path = path; + this.appName = appName; + this.appPath = appPath; + } +} diff --git a/x-pack/examples/ui_actions_enhanced_examples/README.md b/x-pack/examples/ui_actions_enhanced_examples/README.md index ec049bbd33de..8096fdbf13cf 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/README.md +++ b/x-pack/examples/ui_actions_enhanced_examples/README.md @@ -5,7 +5,8 @@ To run this example plugin, use the command `yarn start --run-examples`. ## Drilldown examples -This plugin holds few examples on how to add drilldown types to dashboard. +This plugin holds few examples on how to add drilldown types to dashboard. See +`./public/drilldowns/` folder. To play with drilldowns, open any dashboard, click "Edit" to put it in *edit mode*. Now when opening context menu of dashboard panels you should see "Create drilldown" option. @@ -34,3 +35,74 @@ One can see how middle-click or Ctrl + click behavior could be supported using ### `dashboard_to_discover_drilldown` `dashboard_to_discover_drilldown` shows how a real-world drilldown could look like. + + +## Drilldown Manager examples + +*Drilldown Manager* is a collectio of code and React components that allows you +to add drilldowns to any app. To see examples of how drilldows can be added to +your app, run Kibana with `--run-examples` flag: + +``` +yarn start --run-examples +``` + +Then go to "Developer examples" and "UI Actions Enhanced", where you can see examples +where *Drilldown Manager* is used outside of the Dashboard app: + +![image](https://user-images.githubusercontent.com/9773803/94044547-969a3400-fdce-11ea-826a-cbd0773a4000.png) + +These examples show how you can create your custom UI Actions triggers and add +drilldowns to them, or use an embeddable in your app and add drilldows to it. + + +### Trigger examples + +The `/public/triggers` folder shows how you can create custom triggers for your app. +Triggers are things that trigger some action in UI, like "user click". + +Once you have defined your triggers, you need to register them in your plugin: + +```ts +export class MyPlugin implements Plugin { + public setup(core, { uiActionsEnhanced: uiActions }: SetupDependencies) { + uiActions.registerTrigger(myTrigger); + } +} +``` + +### `app1_hello_world_drilldown` + +`app1_hello_world_drilldown` is a basic example that shows how you can add the most +basic drilldown to your custom trigger. + +### `appx_to_dashboard_drilldown` + +`app1_to_dashboard_drilldown` and `app2_to_dashboard_drilldown` show how the Dashboard +drilldown can be used in other apps, outside of Dashboard. + +Basically you define it: + +```ts +type Trigger = typeof MY_TRIGGER_TRIGGER; +type Context = MyAppClickContext; + +export class App1ToDashboardDrilldown extends AbstractDashboardDrilldown { + public readonly supportedTriggers = () => [MY_TRIGGER] as Trigger[]; + + protected async getURL(config: Config, context: Context): Promise { + return 'https://...'; + } +} +``` + +and then you register it in your plugin: + +```ts +export class MyPlugin implements Plugin { + public setup(core, { uiActionsEnhanced: uiActions }: SetupDependencies) { + const drilldown = new App2ToDashboardDrilldown(/* You can pass in dependencies here. */); + uiActions.registerDrilldown(drilldown); + } +} +``` diff --git a/x-pack/examples/ui_actions_enhanced_examples/kibana.json b/x-pack/examples/ui_actions_enhanced_examples/kibana.json index 1bae09b488a2..4f5ac8519fe5 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/kibana.json +++ b/x-pack/examples/ui_actions_enhanced_examples/kibana.json @@ -5,10 +5,21 @@ "configPath": ["ui_actions_enhanced_examples"], "server": false, "ui": true, - "requiredPlugins": ["uiActions","uiActionsEnhanced", "data", "discover"], + "requiredPlugins": [ + "uiActions", + "uiActionsEnhanced", + "data", + "discover", + "dashboard", + "dashboardEnhanced", + "developerExamples" + ], "optionalPlugins": [], "requiredBundles": [ + "dashboardEnhanced", + "embeddable", "kibanaUtils", - "kibanaReact" + "kibanaReact", + "share" ] } diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx new file mode 100644 index 000000000000..7b3e19ff94f0 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx @@ -0,0 +1,38 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import * as React from 'react'; +import { + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageHeader, + EuiPageHeaderSection, + EuiTitle, +} from '@elastic/eui'; + +export interface PageProps { + title?: React.ReactNode; +} + +export const Page: React.FC = ({ title = 'Untitled', children }) => { + return ( + + + + +

{title}

+ + + + + + {children} + + + + ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/components/section/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/index.tsx new file mode 100644 index 000000000000..399f44df5d40 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './section'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/components/section/section.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/section.tsx new file mode 100644 index 000000000000..2f210ad53ef7 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/section.tsx @@ -0,0 +1,24 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { EuiTitle, EuiSpacer } from '@elastic/eui'; + +export interface Props { + title: React.ReactNode; +} + +export const Section: React.FC = ({ title, children }) => { + return ( +
+ +

{title}

+ + + {children} +
+ ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx new file mode 100644 index 000000000000..33f55a1c35bb --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx @@ -0,0 +1,20 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { EuiPage } from '@elastic/eui'; +import { Page } from '../../components/page'; +import { DrilldownsManager } from '../drilldowns_manager'; + +export const App: React.FC = () => { + return ( + + + + + + ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/index.tsx new file mode 100644 index 000000000000..1460fdfef37e --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './app'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/drilldowns_manager.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/drilldowns_manager.tsx new file mode 100644 index 000000000000..3376e8b2df76 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/drilldowns_manager.tsx @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiHorizontalRule } from '@elastic/eui'; +import React from 'react'; +import { Section } from '../../components/section/section'; +import { SampleMlJob, SampleApp1ClickContext } from '../../triggers'; +import { DrilldownsWithoutEmbeddableExample } from '../drilldowns_without_embeddable_example'; +import { DrilldownsWithoutEmbeddableSingleButtonExample } from '../drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example'; +import { DrilldownsWithEmbeddableExample } from '../drilldowns_with_embeddable_example'; + +export const job: SampleMlJob = { + job_id: '123', + job_type: 'anomaly_detector', + description: 'This is some ML job.', +}; + +export const context: SampleApp1ClickContext = { job }; + +export const DrilldownsManager: React.FC = () => { + return ( +
+
+ + + + + + + + + +
+
+ ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/index.tsx new file mode 100644 index 000000000000..1964b32c2d21 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './drilldowns_manager'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx new file mode 100644 index 000000000000..a90147d01e8b --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx @@ -0,0 +1,134 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { + EuiText, + EuiSpacer, + EuiContextMenuPanelDescriptor, + EuiButton, + EuiPopover, + EuiContextMenu, + EuiFlyout, + EuiCode, + EuiFlexItem, + EuiFlexGroup, +} from '@elastic/eui'; +import { SampleMlJob, SampleApp1ClickContext } from '../../triggers'; +import { EmbeddableRoot } from '../../../../../../src/plugins/embeddable/public'; +import { ButtonEmbeddable } from '../../embeddables/button_embeddable'; +import { useUiActions } from '../../context'; +import { VALUE_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public'; + +export const job: SampleMlJob = { + job_id: '123', + job_type: 'anomaly_detector', + description: 'This is some ML job.', +}; + +export const context: SampleApp1ClickContext = { job }; + +export const DrilldownsWithEmbeddableExample: React.FC = () => { + const { plugins, managerWithEmbeddable } = useUiActions(); + const embeddable = React.useMemo( + () => + new ButtonEmbeddable( + { id: 'DrilldownsWithEmbeddableExample' }, + { uiActions: plugins.uiActionsEnhanced } + ), + [plugins.uiActionsEnhanced] + ); + const [showManager, setShowManager] = React.useState(false); + const [openPopup, setOpenPopup] = React.useState(false); + const viewRef = React.useRef<'create' | 'manage'>('create'); + + const panels: EuiContextMenuPanelDescriptor[] = [ + { + id: 0, + items: [ + { + name: 'Create new view', + icon: 'plusInCircle', + onClick: () => { + setOpenPopup(false); + viewRef.current = 'create'; + setShowManager((x) => !x); + }, + }, + { + name: 'Drilldown list view', + icon: 'list', + onClick: () => { + setOpenPopup(false); + viewRef.current = 'manage'; + setShowManager((x) => !x); + }, + }, + ], + }, + ]; + + const openManagerButton = showManager ? ( + setShowManager(false)}>Close + ) : ( + setOpenPopup((x) => !x)} + > + Open Drilldown Manager + + } + isOpen={openPopup} + closePopover={() => setOpenPopup(false)} + panelPaddingSize="none" + withTitle + anchorPosition="downLeft" + > + + + ); + + return ( + <> + +

With embeddable example

+

+ This example shows how drilldown manager can be added to an embeddable which executes{' '} + VALUE_CLICK_TRIGGER trigger. Below card is an embeddable which executes + VALUE_CLICK_TRIGGER when it is clicked on. +

+ + + + + + {openManagerButton} + +
+ +
+ + + + {showManager && ( + setShowManager(false)} aria-labelledby="Drilldown Manager"> + setShowManager(false)} + viewMode={viewRef.current} + dynamicActionManager={managerWithEmbeddable} + triggers={[VALUE_CLICK_TRIGGER]} + placeContext={{ embeddable }} + /> + + )} + + ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/index.tsx new file mode 100644 index 000000000000..ca2f7b1060f1 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './drilldowns_with_embeddable_example'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx new file mode 100644 index 000000000000..fb22e98e4a6d --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx @@ -0,0 +1,129 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { + EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiButton, + EuiSpacer, + EuiFlyout, + EuiPopover, + EuiContextMenu, + EuiContextMenuPanelDescriptor, +} from '@elastic/eui'; +import { useUiActions } from '../../context'; +import { SAMPLE_APP1_CLICK_TRIGGER, SampleMlJob, SampleApp1ClickContext } from '../../triggers'; + +export const job: SampleMlJob = { + job_id: '123', + job_type: 'anomaly_detector', + description: 'This is some ML job.', +}; + +export const context: SampleApp1ClickContext = { job }; + +export const DrilldownsWithoutEmbeddableExample: React.FC = () => { + const { plugins, managerWithoutEmbeddable } = useUiActions(); + const [showManager, setShowManager] = React.useState(false); + const [openPopup, setOpenPopup] = React.useState(false); + const viewRef = React.useRef<'create' | 'manage'>('create'); + + const panels: EuiContextMenuPanelDescriptor[] = [ + { + id: 0, + items: [ + { + name: 'Create new view', + icon: 'plusInCircle', + onClick: () => { + setOpenPopup(false); + viewRef.current = 'create'; + setShowManager((x) => !x); + }, + }, + { + name: 'Drilldown list view', + icon: 'list', + onClick: () => { + setOpenPopup(false); + viewRef.current = 'manage'; + setShowManager((x) => !x); + }, + }, + ], + }, + ]; + + const openManagerButton = showManager ? ( + setShowManager(false)}>Close + ) : ( + setOpenPopup((x) => !x)} + > + Open Drilldown Manager + + } + isOpen={openPopup} + closePopover={() => setOpenPopup(false)} + panelPaddingSize="none" + withTitle + anchorPosition="downLeft" + > + + + ); + + return ( + <> + +

Without embeddable example (app 1)

+

+ Drilldown Manager can be integrated into any app in Kibana. This example shows + that drilldown manager can be used in an app which does not use embeddables and executes + its custom UI Actions triggers. +

+ + + + + + {openManagerButton} + + + plugins.uiActionsEnhanced.executeTriggerActions(SAMPLE_APP1_CLICK_TRIGGER, context) + } + > + Execute click action + + + + + {showManager && ( + setShowManager(false)} aria-labelledby="Drilldown Manager"> + setShowManager(false)} + viewMode={viewRef.current} + dynamicActionManager={managerWithoutEmbeddable} + triggers={[SAMPLE_APP1_CLICK_TRIGGER]} + /> + + )} + + ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/index.tsx new file mode 100644 index 000000000000..0dee7cf367b0 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './drilldowns_without_embeddable_example'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example.tsx new file mode 100644 index 000000000000..58d382fdc2a7 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example.tsx @@ -0,0 +1,62 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { EuiText, EuiFlexGroup, EuiFlexItem, EuiButton, EuiSpacer, EuiFlyout } from '@elastic/eui'; +import { useUiActions } from '../../context'; +import { sampleApp2ClickContext, SAMPLE_APP2_CLICK_TRIGGER } from '../../triggers'; + +export const DrilldownsWithoutEmbeddableSingleButtonExample: React.FC = () => { + const { plugins, managerWithoutEmbeddableSingleButton } = useUiActions(); + const [showManager, setShowManager] = React.useState(false); + const viewRef = React.useRef<'create' | 'manage'>('create'); + + return ( + <> + +

Without embeddable example, single button (app 2)

+

+ This example is the same as Without embeddable example but it shows that + drilldown manager actions and user created drilldowns can be combined in one menu, this is + useful, for example, for Canvas where clicking on a Canvas element would show the combined + menu of drilldown manager actions and drilldown actions. +

+ + + + + + + + plugins.uiActionsEnhanced.executeTriggerActions( + SAMPLE_APP2_CLICK_TRIGGER, + sampleApp2ClickContext + ) + } + > + Click this element + + + + + {showManager && ( + setShowManager(false)} aria-labelledby="Drilldown Manager"> + setShowManager(false)} + viewMode={viewRef.current} + dynamicActionManager={managerWithoutEmbeddableSingleButton} + triggers={[SAMPLE_APP2_CLICK_TRIGGER]} + /> + + )} + + ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/index.tsx new file mode 100644 index 000000000000..74766309dc72 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './drilldowns_without_embeddable_single_button_example'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/context/context.ts b/x-pack/examples/ui_actions_enhanced_examples/public/context/context.ts new file mode 100644 index 000000000000..2edb29eb5b28 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/context/context.ts @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { createContext, useContext } from 'react'; +import { CoreStart } from 'src/core/public'; +import { UiActionsEnhancedDynamicActionManager } from '../../../../plugins/ui_actions_enhanced/public'; +import { StartDependencies } from '../plugin'; + +export interface UiActionsExampleAppContextValue { + appBasePath: string; + core: CoreStart; + plugins: StartDependencies; + managerWithoutEmbeddable: UiActionsEnhancedDynamicActionManager; + managerWithoutEmbeddableSingleButton: UiActionsEnhancedDynamicActionManager; + managerWithEmbeddable: UiActionsEnhancedDynamicActionManager; +} + +export const context = createContext(null); +export const useUiActions = () => useContext(context)!; diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/context/index.ts similarity index 77% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/index.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/context/index.ts index c34290528d91..94b697705053 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/index.ts +++ b/x-pack/examples/ui_actions_enhanced_examples/public/context/index.ts @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { CollectConfigContainer } from './collect_config_container'; +export * from './context'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/app1_hello_world_drilldown.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/app1_hello_world_drilldown.tsx new file mode 100644 index 000000000000..25de2f5953f3 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/app1_hello_world_drilldown.tsx @@ -0,0 +1,66 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { EuiFieldText, EuiFormRow } from '@elastic/eui'; +import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public'; +import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public'; +import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../../src/plugins/kibana_utils/public'; +import { SAMPLE_APP1_CLICK_TRIGGER, SampleApp1ClickContext } from '../../triggers'; +import { SerializableState } from '../../../../../../src/plugins/kibana_utils/common'; + +export interface Config extends SerializableState { + name: string; +} + +type Trigger = typeof SAMPLE_APP1_CLICK_TRIGGER; +type Context = SampleApp1ClickContext; + +export type CollectConfigProps = CollectConfigPropsBase; + +export const APP1_HELLO_WORLD_DRILLDOWN = 'APP1_HELLO_WORLD_DRILLDOWN'; + +export class App1HelloWorldDrilldown implements Drilldown { + public readonly id = APP1_HELLO_WORLD_DRILLDOWN; + + public readonly order = 8; + + public readonly getDisplayName = () => 'Hello world (app 1)'; + + public readonly euiIcon = 'cheer'; + + supportedTriggers(): Trigger[] { + return [SAMPLE_APP1_CLICK_TRIGGER]; + } + + private readonly ReactCollectConfig: React.FC = ({ + config, + onConfig, + context, + }) => ( + + onConfig({ ...config, name: event.target.value })} + /> + + ); + + public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig); + + public readonly createConfig = () => ({ + name: '', + }); + + public readonly isConfigValid = (config: Config): config is Config => { + return !!config.name; + }; + + public readonly execute = async (config: Config, context: Context) => { + alert(`Hello, ${config.name}`); + }; +} diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/index.tsx new file mode 100644 index 000000000000..a92ba24d3f34 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './app1_hello_world_drilldown'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/app1_to_dashboard_drilldown.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/app1_to_dashboard_drilldown.ts new file mode 100644 index 000000000000..058b52c78b42 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/app1_to_dashboard_drilldown.ts @@ -0,0 +1,32 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + DashboardEnhancedAbstractDashboardDrilldown as AbstractDashboardDrilldown, + DashboardEnhancedAbstractDashboardDrilldownConfig as Config, +} from '../../../../../plugins/dashboard_enhanced/public'; +import { SAMPLE_APP1_CLICK_TRIGGER, SampleApp1ClickContext } from '../../triggers'; +import { KibanaURL } from '../../../../../../src/plugins/share/public'; + +export const APP1_TO_DASHBOARD_DRILLDOWN = 'APP1_TO_DASHBOARD_DRILLDOWN'; + +type Trigger = typeof SAMPLE_APP1_CLICK_TRIGGER; +type Context = SampleApp1ClickContext; + +export class App1ToDashboardDrilldown extends AbstractDashboardDrilldown { + public readonly id = APP1_TO_DASHBOARD_DRILLDOWN; + + public readonly supportedTriggers = () => [SAMPLE_APP1_CLICK_TRIGGER] as Trigger[]; + + protected async getURL(config: Config, context: Context): Promise { + const path = await this.urlGenerator.createUrl({ + dashboardId: config.dashboardId, + }); + const url = new KibanaURL(path); + + return url; + } +} diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/index.tsx new file mode 100644 index 000000000000..4c0c2c221496 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './app1_to_dashboard_drilldown'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/app2_to_dashboard_drilldown.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/app2_to_dashboard_drilldown.ts new file mode 100644 index 000000000000..33bf54d4b4cc --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/app2_to_dashboard_drilldown.ts @@ -0,0 +1,32 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + DashboardEnhancedAbstractDashboardDrilldown as AbstractDashboardDrilldown, + DashboardEnhancedAbstractDashboardDrilldownConfig as Config, +} from '../../../../../plugins/dashboard_enhanced/public'; +import { SAMPLE_APP2_CLICK_TRIGGER, SampleApp2ClickContext } from '../../triggers'; +import { KibanaURL } from '../../../../../../src/plugins/share/public'; + +export const APP2_TO_DASHBOARD_DRILLDOWN = 'APP2_TO_DASHBOARD_DRILLDOWN'; + +type Trigger = typeof SAMPLE_APP2_CLICK_TRIGGER; +type Context = SampleApp2ClickContext; + +export class App2ToDashboardDrilldown extends AbstractDashboardDrilldown { + public readonly id = APP2_TO_DASHBOARD_DRILLDOWN; + + public readonly supportedTriggers = () => [SAMPLE_APP2_CLICK_TRIGGER] as Trigger[]; + + protected async getURL(config: Config, context: Context): Promise { + const path = await this.urlGenerator.createUrl({ + dashboardId: config.dashboardId, + }); + const url = new KibanaURL(path); + + return url; + } +} diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/index.tsx new file mode 100644 index 000000000000..ef09061115f4 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/index.tsx @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './app2_to_dashboard_drilldown'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/README.md b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/README.md similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/README.md rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/README.md diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx similarity index 83% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/index.tsx rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx index cac5f0b29dc6..a7324f553013 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/index.tsx +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx @@ -6,14 +6,14 @@ import React from 'react'; import { EuiFormRow, EuiFieldText } from '@elastic/eui'; -import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public'; -import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public'; -import { ChartActionContext } from '../../../../../src/plugins/embeddable/public'; -import { CollectConfigProps } from '../../../../../src/plugins/kibana_utils/public'; +import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public'; +import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public'; +import { ChartActionContext } from '../../../../../../src/plugins/embeddable/public'; +import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public'; import { SELECT_RANGE_TRIGGER, VALUE_CLICK_TRIGGER, -} from '../../../../../src/plugins/ui_actions/public'; +} from '../../../../../../src/plugins/ui_actions/public'; export type ActionContext = ChartActionContext; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/README.md b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/README.md similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/README.md rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/README.md diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx similarity index 81% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/index.tsx rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx index fa2f0825f933..24385bd6baa4 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/index.tsx +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx @@ -6,12 +6,12 @@ import React from 'react'; import { EuiFormRow, EuiFieldText } from '@elastic/eui'; -import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public'; -import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public'; -import { RangeSelectContext } from '../../../../../src/plugins/embeddable/public'; -import { CollectConfigProps } from '../../../../../src/plugins/kibana_utils/public'; -import { SELECT_RANGE_TRIGGER } from '../../../../../src/plugins/ui_actions/public'; -import { BaseActionFactoryContext } from '../../../../plugins/ui_actions_enhanced/public/dynamic_actions'; +import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public'; +import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public'; +import { RangeSelectContext } from '../../../../../../src/plugins/embeddable/public'; +import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public'; +import { SELECT_RANGE_TRIGGER } from '../../../../../../src/plugins/ui_actions/public'; +import { BaseActionFactoryContext } from '../../../../../plugins/ui_actions_enhanced/public/dynamic_actions'; export type Config = { name: string; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/collect_config_container.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/collect_config_container.tsx similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/collect_config_container.tsx rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/collect_config_container.tsx diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/index.ts similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/index.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/index.ts diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/constants.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/constants.ts similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/constants.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/constants.ts diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/drilldown.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx similarity index 88% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/drilldown.tsx rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx index ba8d7f395e73..9cda534a340d 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/drilldown.tsx +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx @@ -5,15 +5,15 @@ */ import React from 'react'; -import { StartDependencies as Start } from '../plugin'; -import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public'; -import { StartServicesGetter } from '../../../../../src/plugins/kibana_utils/public'; +import { StartDependencies as Start } from '../../plugin'; +import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public'; +import { StartServicesGetter } from '../../../../../../src/plugins/kibana_utils/public'; import { ActionContext, Config, CollectConfigProps } from './types'; import { CollectConfigContainer } from './collect_config_container'; import { SAMPLE_DASHBOARD_TO_DISCOVER_DRILLDOWN } from './constants'; -import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public'; +import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public'; import { txtGoToDiscover } from './i18n'; -import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/ui_actions/public'; +import { APPLY_FILTER_TRIGGER } from '../../../../../../src/plugins/ui_actions/public'; const isOutputWithIndexPatterns = ( output: unknown diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/i18n.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/i18n.ts similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/i18n.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/i18n.ts diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/index.ts similarity index 100% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/index.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/index.ts diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/types.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts similarity index 87% rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/types.ts rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts index 692de571e8a0..f0497780430d 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/types.ts +++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts @@ -4,8 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ -import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../src/plugins/kibana_utils/public'; -import { ApplyGlobalFilterActionContext } from '../../../../../src/plugins/data/public'; +import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../../src/plugins/kibana_utils/public'; +import { ApplyGlobalFilterActionContext } from '../../../../../../src/plugins/data/public'; export type ActionContext = ApplyGlobalFilterActionContext; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts new file mode 100644 index 000000000000..fcd0c9b94c98 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts @@ -0,0 +1,53 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { createElement } from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { AdvancedUiActionsStart } from '../../../../../plugins/ui_actions_enhanced/public'; +import { Embeddable, EmbeddableInput } from '../../../../../../src/plugins/embeddable/public'; +import { ButtonEmbeddableComponent } from './button_embeddable_component'; +import { VALUE_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public'; + +export const BUTTON_EMBEDDABLE = 'BUTTON_EMBEDDABLE'; + +export interface ButtonEmbeddableParams { + uiActions: AdvancedUiActionsStart; +} + +export class ButtonEmbeddable extends Embeddable { + type = BUTTON_EMBEDDABLE; + + constructor(input: EmbeddableInput, private readonly params: ButtonEmbeddableParams) { + super(input, {}); + } + + reload() {} + + private el?: HTMLElement; + + public render(el: HTMLElement): void { + super.render(el); + this.el = el; + render( + createElement(ButtonEmbeddableComponent, { + onClick: () => { + this.params.uiActions.getTrigger(VALUE_CLICK_TRIGGER).exec({ + embeddable: this, + data: { + data: [], + }, + }); + }, + }), + el + ); + } + + public destroy() { + super.destroy(); + if (this.el) unmountComponentAtNode(this.el); + } +} diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable_component.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable_component.tsx new file mode 100644 index 000000000000..d810870de467 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable_component.tsx @@ -0,0 +1,27 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import * as React from 'react'; +import { EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui'; + +export interface ButtonEmbeddableComponentProps { + onClick: () => void; +} + +export const ButtonEmbeddableComponent: React.FC = ({ + onClick, +}) => { + return ( + + } + title={`Click me!`} + description={'This embeddable fires "VALUE_CLICK" trigger on click'} + onClick={onClick} + /> + + ); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/index.ts new file mode 100644 index 000000000000..e3bfc9c7da42 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './button_embeddable'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/mount.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/mount.tsx new file mode 100644 index 000000000000..b2909c636b52 --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/mount.tsx @@ -0,0 +1,38 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import * as React from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { CoreSetup, AppMountParameters } from 'kibana/public'; +import { StartDependencies, UiActionsEnhancedExamplesStart } from './plugin'; +import { UiActionsExampleAppContextValue, context } from './context'; + +export const mount = ( + coreSetup: CoreSetup +) => async ({ appBasePath, element }: AppMountParameters) => { + const [ + core, + plugins, + { managerWithoutEmbeddable, managerWithoutEmbeddableSingleButton, managerWithEmbeddable }, + ] = await coreSetup.getStartServices(); + const { App } = await import('./containers/app'); + + const deps: UiActionsExampleAppContextValue = { + appBasePath, + core, + plugins, + managerWithoutEmbeddable, + managerWithoutEmbeddableSingleButton, + managerWithEmbeddable, + }; + const reactElement = ( + + + + ); + render(reactElement, element); + return () => unmountComponentAtNode(element); +}; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts b/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts index 3f0b64a2ac9e..c09f64f7b110 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts +++ b/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts @@ -4,44 +4,174 @@ * you may not use this file except in compliance with the Elastic License. */ -import { Plugin, CoreSetup, CoreStart } from '../../../../src/core/public'; +import { createElement as h } from 'react'; +import { toMountPoint } from '../../../../src/plugins/kibana_react/public'; +import { Plugin, CoreSetup, CoreStart, AppNavLinkStatus } from '../../../../src/core/public'; import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public'; import { AdvancedUiActionsSetup, AdvancedUiActionsStart, } from '../../../../x-pack/plugins/ui_actions_enhanced/public'; -import { DashboardHelloWorldDrilldown } from './dashboard_hello_world_drilldown'; -import { DashboardToDiscoverDrilldown } from './dashboard_to_discover_drilldown'; +import { DashboardHelloWorldDrilldown } from './drilldowns/dashboard_hello_world_drilldown'; +import { DashboardToDiscoverDrilldown } from './drilldowns/dashboard_to_discover_drilldown'; +import { App1ToDashboardDrilldown } from './drilldowns/app1_to_dashboard_drilldown'; +import { App1HelloWorldDrilldown } from './drilldowns/app1_hello_world_drilldown'; import { createStartServicesGetter } from '../../../../src/plugins/kibana_utils/public'; import { DiscoverSetup, DiscoverStart } from '../../../../src/plugins/discover/public'; -import { DashboardHelloWorldOnlyRangeSelectDrilldown } from './dashboard_hello_world_only_range_select_drilldown'; +import { DashboardSetup, DashboardStart } from '../../../../src/plugins/dashboard/public'; +import { DashboardHelloWorldOnlyRangeSelectDrilldown } from './drilldowns/dashboard_hello_world_only_range_select_drilldown'; +import { DeveloperExamplesSetup } from '../../../../examples/developer_examples/public'; +import { + sampleApp1ClickTrigger, + sampleApp2ClickTrigger, + SAMPLE_APP2_CLICK_TRIGGER, + SampleApp2ClickContext, + sampleApp2ClickContext, +} from './triggers'; +import { mount } from './mount'; +import { + UiActionsEnhancedMemoryActionStorage, + UiActionsEnhancedDynamicActionManager, +} from '../../../plugins/ui_actions_enhanced/public'; +import { App2ToDashboardDrilldown } from './drilldowns/app2_to_dashboard_drilldown'; export interface SetupDependencies { + dashboard: DashboardSetup; data: DataPublicPluginSetup; + developerExamples: DeveloperExamplesSetup; discover: DiscoverSetup; uiActionsEnhanced: AdvancedUiActionsSetup; } export interface StartDependencies { + dashboard: DashboardStart; data: DataPublicPluginStart; discover: DiscoverStart; uiActionsEnhanced: AdvancedUiActionsStart; } +export interface UiActionsEnhancedExamplesStart { + managerWithoutEmbeddable: UiActionsEnhancedDynamicActionManager; + managerWithoutEmbeddableSingleButton: UiActionsEnhancedDynamicActionManager; + managerWithEmbeddable: UiActionsEnhancedDynamicActionManager; +} + export class UiActionsEnhancedExamplesPlugin - implements Plugin { + implements Plugin { public setup( - core: CoreSetup, - { uiActionsEnhanced: uiActions }: SetupDependencies + core: CoreSetup, + { uiActionsEnhanced: uiActions, developerExamples }: SetupDependencies ) { const start = createStartServicesGetter(core.getStartServices); uiActions.registerDrilldown(new DashboardHelloWorldDrilldown()); uiActions.registerDrilldown(new DashboardHelloWorldOnlyRangeSelectDrilldown()); uiActions.registerDrilldown(new DashboardToDiscoverDrilldown({ start })); + uiActions.registerDrilldown(new App1HelloWorldDrilldown()); + uiActions.registerDrilldown(new App1ToDashboardDrilldown({ start })); + uiActions.registerDrilldown(new App2ToDashboardDrilldown({ start })); + + uiActions.registerTrigger(sampleApp1ClickTrigger); + uiActions.registerTrigger(sampleApp2ClickTrigger); + + uiActions.addTriggerAction(SAMPLE_APP2_CLICK_TRIGGER, { + id: 'SINGLE_ELEMENT_EXAMPLE_OPEN_FLYOUT_AT_CREATE', + order: 2, + getDisplayName: () => 'Add drilldown', + getIconType: () => 'plusInCircle', + isCompatible: async ({ workpadId, elementId }: SampleApp2ClickContext) => + workpadId === '123' && elementId === '456', + execute: async () => { + const { core: coreStart, plugins: pluginsStart, self } = start(); + const handle = coreStart.overlays.openFlyout( + toMountPoint( + h(pluginsStart.uiActionsEnhanced.FlyoutManageDrilldowns, { + onClose: () => handle.close(), + viewMode: 'create', + dynamicActionManager: self.managerWithoutEmbeddableSingleButton, + triggers: [SAMPLE_APP2_CLICK_TRIGGER], + placeContext: {}, + }) + ), + { + ownFocus: true, + } + ); + }, + }); + uiActions.addTriggerAction(SAMPLE_APP2_CLICK_TRIGGER, { + id: 'SINGLE_ELEMENT_EXAMPLE_OPEN_FLYOUT_AT_MANAGE', + order: 1, + getDisplayName: () => 'Manage drilldowns', + getIconType: () => 'list', + isCompatible: async ({ workpadId, elementId }: SampleApp2ClickContext) => + workpadId === '123' && elementId === '456', + execute: async () => { + const { core: coreStart, plugins: pluginsStart, self } = start(); + const handle = coreStart.overlays.openFlyout( + toMountPoint( + h(pluginsStart.uiActionsEnhanced.FlyoutManageDrilldowns, { + onClose: () => handle.close(), + viewMode: 'manage', + dynamicActionManager: self.managerWithoutEmbeddableSingleButton, + triggers: [SAMPLE_APP2_CLICK_TRIGGER], + placeContext: { sampleApp2ClickContext }, + }) + ), + { + ownFocus: true, + } + ); + }, + }); + + core.application.register({ + id: 'ui_actions_enhanced-explorer', + title: 'UI Actions Enhanced Explorer', + navLinkStatus: AppNavLinkStatus.hidden, + mount: mount(core), + }); + + developerExamples.register({ + appId: 'ui_actions_enhanced-explorer', + title: 'UI Actions Enhanced', + description: 'Examples of how to use drilldowns.', + links: [ + { + label: 'README', + href: + 'https://github.com/elastic/kibana/tree/master/x-pack/examples/ui_actions_enhanced_examples#ui-actions-enhanced-examples', + iconType: 'logoGithub', + size: 's', + target: '_blank', + }, + ], + }); } - public start(core: CoreStart, plugins: StartDependencies) {} + public start(core: CoreStart, plugins: StartDependencies): UiActionsEnhancedExamplesStart { + const managerWithoutEmbeddable = new UiActionsEnhancedDynamicActionManager({ + storage: new UiActionsEnhancedMemoryActionStorage(), + isCompatible: async () => true, + uiActions: plugins.uiActionsEnhanced, + }); + const managerWithoutEmbeddableSingleButton = new UiActionsEnhancedDynamicActionManager({ + storage: new UiActionsEnhancedMemoryActionStorage(), + isCompatible: async () => true, + uiActions: plugins.uiActionsEnhanced, + }); + const managerWithEmbeddable = new UiActionsEnhancedDynamicActionManager({ + storage: new UiActionsEnhancedMemoryActionStorage(), + isCompatible: async () => true, + uiActions: plugins.uiActionsEnhanced, + }); + + return { + managerWithoutEmbeddable, + managerWithoutEmbeddableSingleButton, + managerWithEmbeddable, + }; + } public stop() {} } diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/triggers/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/index.ts new file mode 100644 index 000000000000..554cb778934c --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './sample_app1_trigger'; +export * from './sample_app2_trigger'; diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app1_trigger.ts b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app1_trigger.ts new file mode 100644 index 000000000000..93a985626c6c --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app1_trigger.ts @@ -0,0 +1,31 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { Trigger } from '../../../../../src/plugins/ui_actions/public'; + +export const SAMPLE_APP1_CLICK_TRIGGER = 'SAMPLE_APP1_CLICK_TRIGGER'; + +export const sampleApp1ClickTrigger: Trigger<'SAMPLE_APP1_CLICK_TRIGGER'> = { + id: SAMPLE_APP1_CLICK_TRIGGER, + title: 'App 1 trigger fired on click', + description: 'Could be a click on a ML job in ML app.', +}; + +declare module '../../../../../src/plugins/ui_actions/public' { + export interface TriggerContextMapping { + [SAMPLE_APP1_CLICK_TRIGGER]: SampleApp1ClickContext; + } +} + +export interface SampleApp1ClickContext { + job: SampleMlJob; +} + +export interface SampleMlJob { + job_id: string; + job_type: 'anomaly_detector'; + description: string; +} diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app2_trigger.ts b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app2_trigger.ts new file mode 100644 index 000000000000..664c99afc94a --- /dev/null +++ b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app2_trigger.ts @@ -0,0 +1,31 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { Trigger } from '../../../../../src/plugins/ui_actions/public'; + +export const SAMPLE_APP2_CLICK_TRIGGER = 'SAMPLE_APP2_CLICK_TRIGGER'; + +export const sampleApp2ClickTrigger: Trigger<'SAMPLE_APP2_CLICK_TRIGGER'> = { + id: SAMPLE_APP2_CLICK_TRIGGER, + title: 'App 2 trigger fired on click', + description: 'Could be a click on an element in Canvas app.', +}; + +declare module '../../../../../src/plugins/ui_actions/public' { + export interface TriggerContextMapping { + [SAMPLE_APP2_CLICK_TRIGGER]: SampleApp2ClickContext; + } +} + +export interface SampleApp2ClickContext { + workpadId: string; + elementId: string; +} + +export const sampleApp2ClickContext: SampleApp2ClickContext = { + workpadId: '123', + elementId: '456', +}; diff --git a/x-pack/plugins/dashboard_enhanced/kibana.json b/x-pack/plugins/dashboard_enhanced/kibana.json index 264fa0438ea1..f79a69c9f4ab 100644 --- a/x-pack/plugins/dashboard_enhanced/kibana.json +++ b/x-pack/plugins/dashboard_enhanced/kibana.json @@ -6,6 +6,7 @@ "requiredPlugins": ["data", "uiActionsEnhanced", "embeddable", "dashboard", "share"], "configPath": ["xpack", "dashboardEnhanced"], "requiredBundles": [ + "embeddable", "kibanaUtils", "embeddableEnhanced", "kibanaReact", diff --git a/x-pack/plugins/dashboard_enhanced/public/index.ts b/x-pack/plugins/dashboard_enhanced/public/index.ts index 53540a4a1ad2..8bc1dfc9d6c5 100644 --- a/x-pack/plugins/dashboard_enhanced/public/index.ts +++ b/x-pack/plugins/dashboard_enhanced/public/index.ts @@ -14,6 +14,12 @@ export { StartDependencies as DashboardEnhancedStartDependencies, } from './plugin'; +export { + AbstractDashboardDrilldown as DashboardEnhancedAbstractDashboardDrilldown, + AbstractDashboardDrilldownConfig as DashboardEnhancedAbstractDashboardDrilldownConfig, + AbstractDashboardDrilldownParams as DashboardEnhancedAbstractDashboardDrilldownParams, +} from './services/drilldowns/abstract_dashboard_drilldown'; + export function plugin(context: PluginInitializerContext) { return new DashboardEnhancedPlugin(context); } diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/abstract_dashboard_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/abstract_dashboard_drilldown.tsx new file mode 100644 index 000000000000..b098d6661981 --- /dev/null +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/abstract_dashboard_drilldown.tsx @@ -0,0 +1,89 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { DataPublicPluginStart } from 'src/plugins/data/public'; +import { DashboardStart } from 'src/plugins/dashboard/public'; +import { reactToUiComponent } from '../../../../../../../src/plugins/kibana_react/public'; +import { + TriggerId, + TriggerContextMapping, +} from '../../../../../../../src/plugins/ui_actions/public'; +import { CollectConfigContainer } from './components'; +import { + UiActionsEnhancedDrilldownDefinition as Drilldown, + UiActionsEnhancedBaseActionFactoryContext as BaseActionFactoryContext, + AdvancedUiActionsStart, +} from '../../../../../ui_actions_enhanced/public'; +import { txtGoToDashboard } from './i18n'; +import { + StartServicesGetter, + CollectConfigProps, +} from '../../../../../../../src/plugins/kibana_utils/public'; +import { KibanaURL } from '../../../../../../../src/plugins/share/public'; +import { Config } from './types'; + +export interface Params { + start: StartServicesGetter<{ + uiActionsEnhanced: AdvancedUiActionsStart; + data: DataPublicPluginStart; + dashboard: DashboardStart; + }>; +} + +export abstract class AbstractDashboardDrilldown + implements Drilldown> { + constructor(protected readonly params: Params) {} + + public abstract readonly id: string; + + public abstract readonly supportedTriggers: () => T[]; + + protected abstract getURL(config: Config, context: TriggerContextMapping[T]): Promise; + + public readonly order = 100; + + public readonly getDisplayName = () => txtGoToDashboard; + + public readonly euiIcon = 'dashboardApp'; + + private readonly ReactCollectConfig: React.FC< + CollectConfigProps> + > = (props) => ; + + public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig); + + public readonly createConfig = () => ({ + dashboardId: '', + useCurrentFilters: true, + useCurrentDateRange: true, + }); + + public readonly isConfigValid = (config: Config): config is Config => { + if (!config.dashboardId) return false; + return true; + }; + + public readonly getHref = async ( + config: Config, + context: TriggerContextMapping[T] + ): Promise => { + const url = await this.getURL(config, context); + return url.path; + }; + + public readonly execute = async (config: Config, context: TriggerContextMapping[T]) => { + const url = await this.getURL(config, context); + await this.params.start().core.application.navigateToApp(url.appName, { path: url.appPath }); + }; + + protected get urlGenerator() { + const urlGenerator = this.params.start().plugins.dashboard.dashboardUrlGenerator; + if (!urlGenerator) + throw new Error('Dashboard URL generator is required for dashboard drilldown.'); + return urlGenerator; + } +} diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/collect_config_container.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/collect_config_container.tsx similarity index 96% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/collect_config_container.tsx rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/collect_config_container.tsx index 5cbf65f7645d..ddae64d1c0e4 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/collect_config_container.tsx +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/collect_config_container.tsx @@ -11,8 +11,8 @@ import { SimpleSavedObject } from '../../../../../../../../src/core/public'; import { DashboardDrilldownConfig } from './dashboard_drilldown_config'; import { txtDestinationDashboardNotFound } from './i18n'; import { CollectConfigProps } from '../../../../../../../../src/plugins/kibana_utils/public'; -import { Config, FactoryContext } from '../types'; -import { Params } from '../drilldown'; +import { Config } from '../types'; +import { Params } from '../abstract_dashboard_drilldown'; const mergeDashboards = ( dashboards: Array>, @@ -34,7 +34,7 @@ const dashboardSavedObjectToMenuItem = ( label: savedObject.attributes.title, }); -interface DashboardDrilldownCollectConfigProps extends CollectConfigProps { +export interface DashboardDrilldownCollectConfigProps extends CollectConfigProps { params: Params; } diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.stories.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.story.tsx similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.stories.tsx rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.story.tsx diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/index.ts similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/index.ts rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/index.ts diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/i18n.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/i18n.ts similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/i18n.ts rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/i18n.ts diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/index.ts similarity index 55% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/index.ts rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/index.ts index 49065a96b4f7..5ec560a55bda 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/index.ts +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/index.ts @@ -4,9 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export { DASHBOARD_TO_DASHBOARD_DRILLDOWN } from './constants'; export { - DashboardToDashboardDrilldown, - Params as DashboardToDashboardDrilldownParams, -} from './drilldown'; -export { Config } from './types'; + CollectConfigContainer, + DashboardDrilldownCollectConfigProps, +} from './collect_config_container'; diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/i18n.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/i18n.ts similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/i18n.ts rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/i18n.ts diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/index.ts new file mode 100644 index 000000000000..5fc823e34109 --- /dev/null +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/index.ts @@ -0,0 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { + AbstractDashboardDrilldown, + Params as AbstractDashboardDrilldownParams, +} from './abstract_dashboard_drilldown'; +export { Config as AbstractDashboardDrilldownConfig } from './types'; diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/types.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts similarity index 100% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/types.ts rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx index cd800baaf026..a2192808c2d4 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx @@ -83,7 +83,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType handle.close()} viewMode={'create'} dynamicActionManager={embeddable.enhancements.dynamicActions} - supportedTriggers={ensureNestedTriggers(embeddable.supportedTriggers())} + triggers={ensureNestedTriggers(embeddable.supportedTriggers())} placeContext={{ embeddable }} /> ), diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx index 046903409462..56ef25005078 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx @@ -67,7 +67,7 @@ export class FlyoutEditDrilldownAction implements ActionByType handle.close()} viewMode={'manage'} dynamicActionManager={embeddable.enhancements.dynamicActions} - supportedTriggers={ensureNestedTriggers(embeddable.supportedTriggers())} + triggers={ensureNestedTriggers(embeddable.supportedTriggers())} placeContext={{ embeddable }} /> ), diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts index 4325e3309b89..e1b6493be520 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts @@ -14,7 +14,7 @@ import { OPEN_FLYOUT_ADD_DRILLDOWN, OPEN_FLYOUT_EDIT_DRILLDOWN, } from './actions'; -import { DashboardToDashboardDrilldown } from './dashboard_to_dashboard_drilldown'; +import { EmbeddableToDashboardDrilldown } from './embeddable_to_dashboard_drilldown'; import { createStartServicesGetter } from '../../../../../../src/plugins/kibana_utils/public'; declare module '../../../../../../src/plugins/ui_actions/public' { @@ -44,12 +44,6 @@ export class DashboardDrilldownsService { { uiActionsEnhanced: uiActions }: SetupDependencies ) { const start = createStartServicesGetter(core.getStartServices); - const getDashboardUrlGenerator = () => { - const urlGenerator = start().plugins.dashboard.dashboardUrlGenerator; - if (!urlGenerator) - throw new Error('dashboardUrlGenerator is required for dashboard to dashboard drilldown'); - return urlGenerator; - }; const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({ start }); uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, actionFlyoutCreateDrilldown); @@ -57,10 +51,7 @@ export class DashboardDrilldownsService { const actionFlyoutEditDrilldown = new FlyoutEditDrilldownAction({ start }); uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, actionFlyoutEditDrilldown); - const dashboardToDashboardDrilldown = new DashboardToDashboardDrilldown({ - start, - getDashboardUrlGenerator, - }); + const dashboardToDashboardDrilldown = new EmbeddableToDashboardDrilldown({ start }); uiActions.registerDrilldown(dashboardToDashboardDrilldown); } } diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx deleted file mode 100644 index 056feeb2b216..000000000000 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx +++ /dev/null @@ -1,125 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import { reactToUiComponent } from '../../../../../../../src/plugins/kibana_react/public'; -import { APPLY_FILTER_TRIGGER } from '../../../../../../../src/plugins/ui_actions/public'; -import { - DashboardUrlGenerator, - DashboardUrlGeneratorState, -} from '../../../../../../../src/plugins/dashboard/public'; -import { CollectConfigContainer } from './components'; -import { DASHBOARD_TO_DASHBOARD_DRILLDOWN } from './constants'; -import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../ui_actions_enhanced/public'; -import { txtGoToDashboard } from './i18n'; -import { - ApplyGlobalFilterActionContext, - esFilters, - isFilters, - isQuery, - isTimeRange, -} from '../../../../../../../src/plugins/data/public'; -import { StartServicesGetter } from '../../../../../../../src/plugins/kibana_utils/public'; -import { StartDependencies } from '../../../plugin'; -import { Config, FactoryContext } from './types'; -import { SearchInput } from '../../../../../../../src/plugins/discover/public'; - -export interface Params { - start: StartServicesGetter>; - getDashboardUrlGenerator: () => DashboardUrlGenerator; -} - -export class DashboardToDashboardDrilldown - implements Drilldown { - constructor(protected readonly params: Params) {} - - public readonly id = DASHBOARD_TO_DASHBOARD_DRILLDOWN; - - public readonly order = 100; - - public readonly getDisplayName = () => txtGoToDashboard; - - public readonly euiIcon = 'dashboardApp'; - - private readonly ReactCollectConfig: React.FC = (props) => ( - - ); - - public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig); - - public readonly createConfig = () => ({ - dashboardId: '', - useCurrentFilters: true, - useCurrentDateRange: true, - }); - - public readonly isConfigValid = (config: Config): config is Config => { - if (!config.dashboardId) return false; - return true; - }; - - public supportedTriggers(): Array { - return [APPLY_FILTER_TRIGGER]; - } - - public readonly getHref = async ( - config: Config, - context: ApplyGlobalFilterActionContext - ): Promise => { - return this.getDestinationUrl(config, context); - }; - - public readonly execute = async (config: Config, context: ApplyGlobalFilterActionContext) => { - const dashboardPath = await this.getDestinationUrl(config, context); - const dashboardHash = dashboardPath.split('#')[1]; - - await this.params.start().core.application.navigateToApp('dashboards', { - path: `#${dashboardHash}`, - }); - }; - - private getDestinationUrl = async ( - config: Config, - context: ApplyGlobalFilterActionContext - ): Promise => { - const state: DashboardUrlGeneratorState = { - dashboardId: config.dashboardId, - }; - - if (context.embeddable) { - const input = context.embeddable.getInput() as Readonly; - if (isQuery(input.query) && config.useCurrentFilters) state.query = input.query; - - // if useCurrentDashboardDataRange is enabled, then preserve current time range - // if undefined is passed, then destination dashboard will figure out time range itself - // for brush event this time range would be overwritten - if (isTimeRange(input.timeRange) && config.useCurrentDateRange) - state.timeRange = input.timeRange; - - // if useCurrentDashboardFilters enabled, then preserve all the filters (pinned and unpinned) - // otherwise preserve only pinned - if (isFilters(input.filters)) - state.filters = config.useCurrentFilters - ? input.filters - : input.filters?.filter((f) => esFilters.isFilterPinned(f)); - } - - const { - restOfFilters: filtersFromEvent, - timeRange: timeRangeFromEvent, - } = esFilters.extractTimeRange(context.filters, context.timeFieldName); - - if (filtersFromEvent) { - state.filters = [...(state.filters ?? []), ...filtersFromEvent]; - } - - if (timeRangeFromEvent) { - state.timeRange = timeRangeFromEvent; - } - - return this.params.getDashboardUrlGenerator().createUrl(state); - }; -} diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/constants.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/constants.ts similarity index 68% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/constants.ts rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/constants.ts index daefcf2d68cc..922ec36619a4 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/constants.ts +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/constants.ts @@ -5,10 +5,10 @@ */ /** - * note: - * don't change this string without carefull consideration, - * because it is stored in saved objects. + * NOTE: DO NOT CHANGE THIS STRING WITHOUT CAREFUL CONSIDERATOIN, BECAUSE IT IS + * STORED IN SAVED OBJECTS. + * * Also temporary dashboard drilldown migration code inside embeddable plugin relies on it * x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.ts */ -export const DASHBOARD_TO_DASHBOARD_DRILLDOWN = 'DASHBOARD_TO_DASHBOARD_DRILLDOWN'; +export const EMBEDDABLE_TO_DASHBOARD_DRILLDOWN = 'DASHBOARD_TO_DASHBOARD_DRILLDOWN'; diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx similarity index 88% rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.test.tsx rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx index 40fa469feb34..f6de2ba931c5 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.test.tsx +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx @@ -4,8 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ -import { DashboardToDashboardDrilldown } from './drilldown'; -import { Config } from './types'; +import { EmbeddableToDashboardDrilldown } from './embeddable_to_dashboard_drilldown'; +import { AbstractDashboardDrilldownConfig as Config } from '../abstract_dashboard_drilldown'; import { coreMock, savedObjectsServiceMock } from '../../../../../../../src/core/public/mocks'; import { Filter, @@ -18,7 +18,6 @@ import { ApplyGlobalFilterActionContext, esFilters, } from '../../../../../../../src/plugins/data/public'; -// convenient to use real implementation here. import { createDashboardUrlGenerator } from '../../../../../../../src/plugins/dashboard/public/url_generator'; import { UrlGeneratorsService } from '../../../../../../../src/plugins/share/public/url_generators'; import { StartDependencies } from '../../../plugin'; @@ -26,7 +25,7 @@ import { SavedObjectLoader } from '../../../../../../../src/plugins/saved_object import { StartServicesGetter } from '../../../../../../../src/plugins/kibana_utils/public/core'; describe('.isConfigValid()', () => { - const drilldown = new DashboardToDashboardDrilldown({} as any); + const drilldown = new EmbeddableToDashboardDrilldown({} as any); test('returns false for invalid config with missing dashboard id', () => { expect( @@ -50,19 +49,19 @@ describe('.isConfigValid()', () => { }); test('config component exist', () => { - const drilldown = new DashboardToDashboardDrilldown({} as any); + const drilldown = new EmbeddableToDashboardDrilldown({} as any); expect(drilldown.CollectConfig).toEqual(expect.any(Function)); }); test('initial config: switches are ON', () => { - const drilldown = new DashboardToDashboardDrilldown({} as any); + const drilldown = new EmbeddableToDashboardDrilldown({} as any); const { useCurrentDateRange, useCurrentFilters } = drilldown.createConfig(); expect(useCurrentDateRange).toBe(true); expect(useCurrentFilters).toBe(true); }); test('getHref is defined', () => { - const drilldown = new DashboardToDashboardDrilldown({} as any); + const drilldown = new EmbeddableToDashboardDrilldown({} as any); expect(drilldown.getHref).toBeDefined(); }); @@ -84,7 +83,7 @@ describe('.execute() & getHref', () => { const getUrlForApp = jest.fn((app, opt) => `${app}/${opt.path}`); const savedObjectsClient = savedObjectsServiceMock.createStartContract().client; - const drilldown = new DashboardToDashboardDrilldown({ + const drilldown = new EmbeddableToDashboardDrilldown({ start: ((() => ({ core: { application: { @@ -97,19 +96,24 @@ describe('.execute() & getHref', () => { }, plugins: { uiActionsEnhanced: {}, + dashboard: { + dashboardUrlGenerator: new UrlGeneratorsService() + .setup(coreMock.createSetup()) + .registerUrlGenerator( + createDashboardUrlGenerator(() => + Promise.resolve({ + appBasePath: 'xyz/app/dashboards', + useHashedUrl: false, + savedDashboardLoader: ({} as unknown) as SavedObjectLoader, + }) + ) + ), + }, }, self: {}, - })) as unknown) as StartServicesGetter>, - getDashboardUrlGenerator: () => - new UrlGeneratorsService().setup(coreMock.createSetup()).registerUrlGenerator( - createDashboardUrlGenerator(() => - Promise.resolve({ - appBasePath: 'test', - useHashedUrl: false, - savedDashboardLoader: ({} as unknown) as SavedObjectLoader, - }) - ) - ), + })) as unknown) as StartServicesGetter< + Pick + >, }); const completeConfig: Config = { diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx new file mode 100644 index 000000000000..25bc93ad38b3 --- /dev/null +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx @@ -0,0 +1,83 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + TriggerContextMapping, + APPLY_FILTER_TRIGGER, +} from '../../../../../../../src/plugins/ui_actions/public'; +import { DashboardUrlGeneratorState } from '../../../../../../../src/plugins/dashboard/public'; +import { + esFilters, + isFilters, + isQuery, + isTimeRange, +} from '../../../../../../../src/plugins/data/public'; +import { + AbstractDashboardDrilldown, + AbstractDashboardDrilldownParams, + AbstractDashboardDrilldownConfig as Config, +} from '../abstract_dashboard_drilldown'; +import { KibanaURL } from '../../../../../../../src/plugins/share/public'; +import { EMBEDDABLE_TO_DASHBOARD_DRILLDOWN } from './constants'; + +type Trigger = typeof APPLY_FILTER_TRIGGER; +type Context = TriggerContextMapping[Trigger]; +export type Params = AbstractDashboardDrilldownParams; + +/** + * This drilldown is the "Go to Dashboard" you can find in Dashboard app panles. + * This drilldown can be used on any embeddable and it is tied to embeddables + * in two ways: (1) it works with APPLY_FILTER_TRIGGER, which is usually executed + * by embeddables (but not necessarily); (2) its `getURL` method depends on + * `embeddable` field being present in `context`. + */ +export class EmbeddableToDashboardDrilldown extends AbstractDashboardDrilldown { + public readonly id = EMBEDDABLE_TO_DASHBOARD_DRILLDOWN; + + public readonly supportedTriggers = () => [APPLY_FILTER_TRIGGER] as Trigger[]; + + protected async getURL(config: Config, context: Context): Promise { + const state: DashboardUrlGeneratorState = { + dashboardId: config.dashboardId, + }; + + if (context.embeddable) { + const input = context.embeddable.getInput(); + if (isQuery(input.query) && config.useCurrentFilters) state.query = input.query; + + // if useCurrentDashboardDataRange is enabled, then preserve current time range + // if undefined is passed, then destination dashboard will figure out time range itself + // for brush event this time range would be overwritten + if (isTimeRange(input.timeRange) && config.useCurrentDateRange) + state.timeRange = input.timeRange; + + // if useCurrentDashboardFilters enabled, then preserve all the filters (pinned and unpinned) + // otherwise preserve only pinned + if (isFilters(input.filters)) + state.filters = config.useCurrentFilters + ? input.filters + : input.filters?.filter((f) => esFilters.isFilterPinned(f)); + } + + const { + restOfFilters: filtersFromEvent, + timeRange: timeRangeFromEvent, + } = esFilters.extractTimeRange(context.filters, context.timeFieldName); + + if (filtersFromEvent) { + state.filters = [...(state.filters ?? []), ...filtersFromEvent]; + } + + if (timeRangeFromEvent) { + state.timeRange = timeRangeFromEvent; + } + + const path = await this.urlGenerator.createUrl(state); + const url = new KibanaURL(path); + + return url; + } +} diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/index.ts new file mode 100644 index 000000000000..a48ab0222424 --- /dev/null +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/index.ts @@ -0,0 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { EMBEDDABLE_TO_DASHBOARD_DRILLDOWN } from './constants'; +export { + EmbeddableToDashboardDrilldown, + Params as EmbeddableToDashboardDrilldownParams, +} from './embeddable_to_dashboard_drilldown'; diff --git a/x-pack/plugins/discover_enhanced/kibana.json b/x-pack/plugins/discover_enhanced/kibana.json index da95a0f21a02..01a3624d3e32 100644 --- a/x-pack/plugins/discover_enhanced/kibana.json +++ b/x-pack/plugins/discover_enhanced/kibana.json @@ -7,5 +7,5 @@ "requiredPlugins": ["uiActions", "embeddable", "discover"], "optionalPlugins": ["share", "kibanaLegacy", "usageCollection"], "configPath": ["xpack", "discoverEnhanced"], - "requiredBundles": ["kibanaUtils", "data"] + "requiredBundles": ["kibanaUtils", "data", "share"] } diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts index 36a844752a1c..40e7691e621f 100644 --- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts +++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts @@ -10,7 +10,7 @@ import { ViewMode, IEmbeddable } from '../../../../../../src/plugins/embeddable/ import { StartServicesGetter } from '../../../../../../src/plugins/kibana_utils/public'; import { KibanaLegacyStart } from '../../../../../../src/plugins/kibana_legacy/public'; import { CoreStart } from '../../../../../../src/core/public'; -import { KibanaURL } from './kibana_url'; +import { KibanaURL } from '../../../../../../src/plugins/share/public'; import * as shared from './shared'; export const ACTION_EXPLORE_DATA = 'ACTION_EXPLORE_DATA'; diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts index 0a7be858691a..52946b3dca7a 100644 --- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts +++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts @@ -13,7 +13,7 @@ import { ApplyGlobalFilterActionContext, esFilters, } from '../../../../../../src/plugins/data/public'; -import { KibanaURL } from './kibana_url'; +import { KibanaURL } from '../../../../../../src/plugins/share/public'; import * as shared from './shared'; import { AbstractExploreDataAction } from './abstract_explore_data_action'; diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts index 6e748030fe10..fdd096e71833 100644 --- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts +++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts @@ -7,7 +7,7 @@ import { Action } from '../../../../../../src/plugins/ui_actions/public'; import { EmbeddableContext } from '../../../../../../src/plugins/embeddable/public'; import { DiscoverUrlGeneratorState } from '../../../../../../src/plugins/discover/public'; -import { KibanaURL } from './kibana_url'; +import { KibanaURL } from '../../../../../../src/plugins/share/public'; import * as shared from './shared'; import { AbstractExploreDataAction } from './abstract_explore_data_action'; diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/kibana_url.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/kibana_url.ts deleted file mode 100644 index 3c25fc2b3c3d..000000000000 --- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/kibana_url.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -// TODO: Replace this logic with KibanaURL once it is available. -// https://github.com/elastic/kibana/issues/64497 -export class KibanaURL { - public readonly path: string; - public readonly appName: string; - public readonly appPath: string; - - constructor(path: string) { - const match = path.match(/^.*\/app\/([^\/#]+)(.+)$/); - - if (!match) { - throw new Error('Unexpected Discover URL path.'); - } - - const [, appName, appPath] = match; - - if (!appName || !appPath) { - throw new Error('Could not parse Discover URL path.'); - } - - this.path = path; - this.appName = appName; - this.appPath = appPath; - } -} diff --git a/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts b/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts index fffb75451f8a..9856d3a558e2 100644 --- a/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts +++ b/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts @@ -12,7 +12,6 @@ import { import { UiActionsEnhancedSerializedEvent } from '../../../ui_actions_enhanced/public'; import { of } from '../../../../../src/plugins/kibana_utils/public'; // use real const to make test fail in case someone accidentally changes it -import { DASHBOARD_TO_DASHBOARD_DRILLDOWN } from '../../../dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown'; import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/ui_actions/public'; class TestEmbeddable extends Embeddable { @@ -555,7 +554,7 @@ describe('EmbeddableActionStorage', () => { eventId: '1', triggers: [OTHER_TRIGGER], action: { - factoryId: DASHBOARD_TO_DASHBOARD_DRILLDOWN, + factoryId: 'DASHBOARD_TO_DASHBOARD_DRILLDOWN', name: '', config: {}, }, diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx index e93579817940..7a705f03c065 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx @@ -80,7 +80,7 @@ export interface ActionWizardProps< /** * List of possible triggers in current context */ - supportedTriggers: TriggerId[]; + triggers: TriggerId[]; triggerPickerDocsLink?: string; } @@ -94,7 +94,7 @@ export const ActionWizard: React.FC = ({ context, onSelectedTriggersChange, getTriggerInfo, - supportedTriggers, + triggers, triggerPickerDocsLink, }) => { // auto pick action factory if there is only 1 available @@ -108,14 +108,14 @@ export const ActionWizard: React.FC = ({ // auto pick selected trigger if none is picked if (currentActionFactory && !((context.triggers?.length ?? 0) > 0)) { - const triggers = getTriggersForActionFactory(currentActionFactory, supportedTriggers); - if (triggers.length > 0) { - onSelectedTriggersChange([triggers[0]]); + const actionTriggers = getTriggersForActionFactory(currentActionFactory, triggers); + if (actionTriggers.length > 0) { + onSelectedTriggersChange([actionTriggers[0]]); } } if (currentActionFactory && config) { - const allTriggers = getTriggersForActionFactory(currentActionFactory, supportedTriggers); + const allTriggers = getTriggersForActionFactory(currentActionFactory, triggers); return (
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx index daa56354289c..a909d2a27f45 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx @@ -34,7 +34,7 @@ storiesOf('components/FlyoutManageDrilldowns', module) {}}> )) @@ -42,7 +42,7 @@ storiesOf('components/FlyoutManageDrilldowns', module) {}}> )); diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx index 48dbd5a86417..bef6834ed4c4 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx @@ -19,7 +19,7 @@ import { TEST_SUBJ_DRILLDOWN_ITEM } from '../list_manage_drilldowns'; import { WELCOME_MESSAGE_TEST_SUBJ } from '../drilldown_hello_bar'; import { coreMock } from '../../../../../../../src/core/public/mocks'; import { NotificationsStart } from 'kibana/public'; -import { toastDrilldownsCRUDError } from './i18n'; +import { toastDrilldownsCRUDError } from '../../hooks/i18n'; const storage = new Storage(new StubBrowserStorage()); const toasts = coreMock.createStart().notifications.toasts; @@ -41,7 +41,7 @@ test('Allows to manage drilldowns', async () => { const screen = render( ); @@ -115,7 +115,7 @@ test('Can delete multiple drilldowns', async () => { const screen = render( ); // wait for initial render. It is async because resolving compatible action factories is async @@ -157,7 +157,7 @@ test('Create only mode', async () => { dynamicActionManager={mockDynamicActionManager} viewMode={'create'} onClose={onClose} - supportedTriggers={mockSupportedTriggers} + triggers={mockSupportedTriggers} /> ); // wait for initial render. It is async because resolving compatible action factories is async @@ -181,7 +181,7 @@ test('After switching between action factories state is restored', async () => { ); // wait for initial render. It is async because resolving compatible action factories is async @@ -222,7 +222,7 @@ test("Error when can't save drilldown changes", async () => { const screen = render( ); // wait for initial render. It is async because resolving compatible action factories is async @@ -245,7 +245,7 @@ test('Should show drilldown welcome message. Should be able to dismiss it', asyn let screen = render( ); @@ -260,7 +260,7 @@ test('Should show drilldown welcome message. Should be able to dismiss it', asyn screen = render( ); // wait for initial render. It is async because resolving compatible action factories is async @@ -272,7 +272,7 @@ test('Drilldown type is not shown if no supported trigger', async () => { const screen = render( ); @@ -286,7 +286,7 @@ test('Can pick a trigger', async () => { const screen = render( ); diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx index 272ec3edc9d2..1f148de7b517 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx @@ -4,33 +4,25 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect, useState, useMemo } from 'react'; +import React, { useState, useMemo } from 'react'; import { ToastsStart } from 'kibana/public'; -import useMountedState from 'react-use/lib/useMountedState'; import { intersection } from 'lodash'; import { DrilldownWizardConfig, FlyoutDrilldownWizard } from '../flyout_drilldown_wizard'; import { FlyoutListManageDrilldowns } from '../flyout_list_manage_drilldowns'; import { IStorageWrapper } from '../../../../../../../src/plugins/kibana_utils/public'; import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public'; -import { useContainerState } from '../../../../../../../src/plugins/kibana_utils/public'; import { DrilldownListItem } from '../list_manage_drilldowns'; -import { - insufficientLicenseLevel, - invalidDrilldownType, - toastDrilldownCreated, - toastDrilldownDeleted, - toastDrilldownEdited, - toastDrilldownsCRUDError, - toastDrilldownsDeleted, -} from './i18n'; +import { insufficientLicenseLevel, invalidDrilldownType } from './i18n'; import { ActionFactory, BaseActionConfig, BaseActionFactoryContext, DynamicActionManager, - SerializedAction, SerializedEvent, } from '../../../dynamic_actions'; +import { useWelcomeMessage } from '../../hooks/use_welcome_message'; +import { useCompatibleActionFactoriesForCurrentContext } from '../../hooks/use_compatible_action_factories_for_current_context'; +import { useDrilldownsStateManager } from '../../hooks/use_drilldown_state_manager'; import { ActionFactoryPlaceContext } from '../types'; interface ConnectedFlyoutManageDrilldownsProps< @@ -43,7 +35,7 @@ interface ConnectedFlyoutManageDrilldownsProps< /** * List of possible triggers in current context */ - supportedTriggers: TriggerId[]; + triggers: TriggerId[]; /** * Extra action factory context passed into action factories CollectConfig, getIconType, getDisplayName and etc... @@ -74,7 +66,7 @@ export function createFlyoutManageDrilldowns({ toastService: ToastsStart; docsLink?: string; triggerPickerDocsLink?: string; -}) { +}): React.FC { const allActionFactoriesById = allActionFactories.reduce((acc, next) => { acc[next.id] = next; return acc; @@ -84,8 +76,8 @@ export function createFlyoutManageDrilldowns({ const isCreateOnly = props.viewMode === 'create'; const factoryContext: BaseActionFactoryContext = useMemo( - () => ({ ...props.placeContext, triggers: props.supportedTriggers }), - [props.placeContext, props.supportedTriggers] + () => ({ ...props.placeContext, triggers: props.triggers }), + [props.placeContext, props.triggers] ); const actionFactories = useCompatibleActionFactoriesForCurrentContext( allActionFactories, @@ -210,7 +202,7 @@ export function createFlyoutManageDrilldowns({ }} actionFactoryPlaceContext={props.placeContext} initialDrilldownWizardConfig={resolveInitialDrilldownWizardConfig()} - supportedTriggers={props.supportedTriggers} + supportedTriggers={props.triggers} getTrigger={getTrigger} /> ); @@ -220,7 +212,7 @@ export function createFlyoutManageDrilldowns({ // show trigger column in case if there is more then 1 possible trigger in current context const showTriggerColumn = intersection( - props.supportedTriggers, + props.triggers, actionFactories .map((factory) => factory.supportedTriggers()) .reduce((res, next) => res.concat(next), []) @@ -250,108 +242,3 @@ export function createFlyoutManageDrilldowns({ } }; } - -function useCompatibleActionFactoriesForCurrentContext< - Context extends BaseActionFactoryContext = BaseActionFactoryContext ->(actionFactories: ActionFactory[], context: Context) { - const [compatibleActionFactories, setCompatibleActionFactories] = useState(); - useEffect(() => { - let canceled = false; - async function updateCompatibleFactoriesForContext() { - const compatibility = await Promise.all( - actionFactories.map((factory) => factory.isCompatible(context)) - ); - if (canceled) return; - - const compatibleFactories = actionFactories.filter((_, i) => compatibility[i]); - const triggerSupportedFactories = compatibleFactories.filter((factory) => - factory.supportedTriggers().some((trigger) => context.triggers.includes(trigger)) - ); - setCompatibleActionFactories(triggerSupportedFactories); - } - updateCompatibleFactoriesForContext(); - return () => { - canceled = true; - }; - }, [context, actionFactories, context.triggers]); - - return compatibleActionFactories; -} - -function useWelcomeMessage(storage: IStorageWrapper): [boolean, () => void] { - const key = `drilldowns:hidWelcomeMessage`; - const [hidWelcomeMessage, setHidWelcomeMessage] = useState(storage.get(key) ?? false); - - return [ - !hidWelcomeMessage, - () => { - if (hidWelcomeMessage) return; - setHidWelcomeMessage(true); - storage.set(key, true); - }, - ]; -} - -function useDrilldownsStateManager(actionManager: DynamicActionManager, toastService: ToastsStart) { - const { events: drilldowns } = useContainerState(actionManager.state); - const [isLoading, setIsLoading] = useState(false); - const isMounted = useMountedState(); - - async function run(op: () => Promise) { - setIsLoading(true); - try { - await op(); - } catch (e) { - toastService.addError(e, { - title: toastDrilldownsCRUDError, - }); - if (!isMounted) return; - setIsLoading(false); - return; - } - } - - async function createDrilldown(action: SerializedAction, selectedTriggers: TriggerId[]) { - await run(async () => { - await actionManager.createEvent(action, selectedTriggers); - toastService.addSuccess({ - title: toastDrilldownCreated.title(action.name), - text: toastDrilldownCreated.text, - }); - }); - } - - async function editDrilldown( - drilldownId: string, - action: SerializedAction, - selectedTriggers: TriggerId[] - ) { - await run(async () => { - await actionManager.updateEvent(drilldownId, action, selectedTriggers); - toastService.addSuccess({ - title: toastDrilldownEdited.title(action.name), - text: toastDrilldownEdited.text, - }); - }); - } - - async function deleteDrilldown(drilldownIds: string | string[]) { - await run(async () => { - drilldownIds = Array.isArray(drilldownIds) ? drilldownIds : [drilldownIds]; - await actionManager.deleteEvents(drilldownIds); - toastService.addSuccess( - drilldownIds.length === 1 - ? { - title: toastDrilldownDeleted.title, - text: toastDrilldownDeleted.text, - } - : { - title: toastDrilldownsDeleted.title(drilldownIds.length), - text: toastDrilldownsDeleted.text, - } - ); - }); - } - - return { drilldowns, isLoading, createDrilldown, editDrilldown, deleteDrilldown }; -} diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts index 4b2be5db0c55..b684189a60fe 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts @@ -6,87 +6,6 @@ import { i18n } from '@kbn/i18n'; -export const toastDrilldownCreated = { - title: (drilldownName: string) => - i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedTitle', - { - defaultMessage: 'Drilldown "{drilldownName}" created', - values: { - drilldownName, - }, - } - ), - text: i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedText', - { - // TODO: remove `Save your dashboard before testing.` part - // when drilldowns are used not only in dashboard - // or after https://github.com/elastic/kibana/issues/65179 implemented - defaultMessage: 'Save your dashboard before testing.', - } - ), -}; - -export const toastDrilldownEdited = { - title: (drilldownName: string) => - i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedTitle', - { - defaultMessage: 'Drilldown "{drilldownName}" updated', - values: { - drilldownName, - }, - } - ), - text: i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedText', - { - defaultMessage: 'Save your dashboard before testing.', - } - ), -}; - -export const toastDrilldownDeleted = { - title: i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle', - { - defaultMessage: 'Drilldown deleted', - } - ), - text: i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText', - { - defaultMessage: 'Save your dashboard before testing.', - } - ), -}; - -export const toastDrilldownsDeleted = { - title: (n: number) => - i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedTitle', - { - defaultMessage: '{n} drilldowns deleted', - values: { n }, - } - ), - text: i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedText', - { - defaultMessage: 'Save your dashboard before testing.', - } - ), -}; - -export const toastDrilldownsCRUDError = i18n.translate( - 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle', - { - defaultMessage: 'Error saving drilldown', - description: 'Title for generic error toast when persisting drilldown updates failed', - } -); - export const insufficientLicenseLevel = i18n.translate( 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.insufficientLicenseLevelError', { diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx index c67a6bbdd30b..d54bfe0af3b8 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx @@ -230,7 +230,7 @@ export function FlyoutDrilldownWizard< actionFactories={drilldownActionFactories} actionFactoryContext={actionFactoryContext} onSelectedTriggersChange={setSelectedTriggers} - supportedTriggers={supportedTriggers} + triggers={supportedTriggers} getTriggerInfo={getTrigger} triggerPickerDocsLink={triggerPickerDocsLink} /> diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx index 9ab893f23b39..386ec0fb0e62 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx @@ -10,11 +10,7 @@ import { FormDrilldownWizard } from './index'; import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public'; const otherProps = { - supportedTriggers: [ - 'VALUE_CLICK_TRIGGER', - 'SELECT_RANGE_TRIGGER', - 'FILTER_TRIGGER', - ] as TriggerId[], + triggers: ['VALUE_CLICK_TRIGGER', 'SELECT_RANGE_TRIGGER', 'FILTER_TRIGGER'] as TriggerId[], getTriggerInfo: (id: TriggerId) => ({ id } as Trigger), onSelectedTriggersChange: () => {}, actionFactoryContext: { triggers: [] as TriggerId[] }, diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx index 614679ed02a4..35a897913b53 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx @@ -13,11 +13,7 @@ import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/ const otherProps = { actionFactoryContext: { triggers: [] as TriggerId[] }, - supportedTriggers: [ - 'VALUE_CLICK_TRIGGER', - 'SELECT_RANGE_TRIGGER', - 'FILTER_TRIGGER', - ] as TriggerId[], + triggers: ['VALUE_CLICK_TRIGGER', 'SELECT_RANGE_TRIGGER', 'FILTER_TRIGGER'] as TriggerId[], getTriggerInfo: (id: TriggerId) => ({ id } as Trigger), onSelectedTriggersChange: () => {}, }; diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx index 45655c2634fe..5f5b577706cf 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx @@ -6,7 +6,8 @@ import React from 'react'; import { EuiFieldText, EuiForm, EuiFormRow, EuiLink, EuiSpacer, EuiText } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiCallOut } from '@elastic/eui'; +import { EuiCode } from '@elastic/eui'; import { txtDrilldownAction, txtNameOfDrilldown, txtUntitledDrilldown } from './i18n'; import { ActionFactory, @@ -15,6 +16,7 @@ import { } from '../../../dynamic_actions'; import { ActionWizard } from '../../../components/action_wizard'; import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public'; +import { txtGetMoreActions } from './i18n'; const GET_MORE_ACTIONS_LINK = 'https://www.elastic.co/subscriptions'; @@ -46,7 +48,7 @@ export interface FormDrilldownWizardProps< /** * List of possible triggers in current context */ - supportedTriggers: TriggerId[]; + triggers: TriggerId[]; triggerPickerDocsLink?: string; } @@ -62,9 +64,20 @@ export const FormDrilldownWizard: React.FC = ({ actionFactoryContext, onSelectedTriggersChange, getTriggerInfo, - supportedTriggers, + triggers, triggerPickerDocsLink, }) => { + if (!triggers || !triggers.length) { + // Below callout is not translated, because this message is only for developers. + return ( + +

+ No triggers provided in trigger prop. +

+ + ); + } + const nameFragment = ( = ({ external data-test-subj={'getMoreActionsLink'} > - + {txtGetMoreActions} ); @@ -114,7 +124,7 @@ export const FormDrilldownWizard: React.FC = ({ context={actionFactoryContext} onSelectedTriggersChange={onSelectedTriggersChange} getTriggerInfo={getTriggerInfo} - supportedTriggers={supportedTriggers} + triggers={triggers} triggerPickerDocsLink={triggerPickerDocsLink} /> diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts index 9636b6e8a74e..bf0a012f559f 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts @@ -26,3 +26,10 @@ export const txtDrilldownAction = i18n.translate( defaultMessage: 'Action', } ); + +export const txtGetMoreActions = i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.FormDrilldownWizard.getMoreActionsLinkLabel', + { + defaultMessage: 'Get more actions', + } +); diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/i18n.ts new file mode 100644 index 000000000000..e75ee2634aa4 --- /dev/null +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/i18n.ts @@ -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; + * you may not use this file except in compliance with the Elastic License. + */ + +import { i18n } from '@kbn/i18n'; + +export const toastDrilldownCreated = { + title: (drilldownName: string) => + i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedTitle', + { + defaultMessage: 'Drilldown "{drilldownName}" created', + values: { + drilldownName, + }, + } + ), + text: i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedText', + { + // TODO: remove `Save your dashboard before testing.` part + // when drilldowns are used not only in dashboard + // or after https://github.com/elastic/kibana/issues/65179 implemented + defaultMessage: 'Save your dashboard before testing.', + } + ), +}; + +export const toastDrilldownEdited = { + title: (drilldownName: string) => + i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedTitle', + { + defaultMessage: 'Drilldown "{drilldownName}" updated', + values: { + drilldownName, + }, + } + ), + text: i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedText', + { + defaultMessage: 'Save your dashboard before testing.', + } + ), +}; + +export const toastDrilldownDeleted = { + title: i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle', + { + defaultMessage: 'Drilldown deleted', + } + ), + text: i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText', + { + defaultMessage: 'Save your dashboard before testing.', + } + ), +}; + +export const toastDrilldownsDeleted = { + title: (n: number) => + i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedTitle', + { + defaultMessage: '{n} drilldowns deleted', + values: { n }, + } + ), + text: i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedText', + { + defaultMessage: 'Save your dashboard before testing.', + } + ), +}; + +export const toastDrilldownsCRUDError = i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle', + { + defaultMessage: 'Error saving drilldown', + description: 'Title for generic error toast when persisting drilldown updates failed', + } +); diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_compatible_action_factories_for_current_context.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_compatible_action_factories_for_current_context.ts new file mode 100644 index 000000000000..d99889045d46 --- /dev/null +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_compatible_action_factories_for_current_context.ts @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { useEffect, useState } from 'react'; +import { ActionFactory, BaseActionFactoryContext } from '../../dynamic_actions'; + +export function useCompatibleActionFactoriesForCurrentContext< + Context extends BaseActionFactoryContext = BaseActionFactoryContext +>(actionFactories: ActionFactory[], context: Context) { + const [compatibleActionFactories, setCompatibleActionFactories] = useState(); + useEffect(() => { + let canceled = false; + async function updateCompatibleFactoriesForContext() { + const compatibility = await Promise.all( + actionFactories.map((factory) => factory.isCompatible(context)) + ); + if (canceled) return; + + const compatibleFactories = actionFactories.filter((_, i) => compatibility[i]); + const triggerSupportedFactories = compatibleFactories.filter((factory) => + factory.supportedTriggers().some((trigger) => context.triggers.includes(trigger)) + ); + setCompatibleActionFactories(triggerSupportedFactories); + } + updateCompatibleFactoriesForContext(); + return () => { + canceled = true; + }; + }, [context, actionFactories, context.triggers]); + + return compatibleActionFactories; +} diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_drilldown_state_manager.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_drilldown_state_manager.tsx new file mode 100644 index 000000000000..b578e36ba060 --- /dev/null +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_drilldown_state_manager.tsx @@ -0,0 +1,86 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { useState } from 'react'; +import { ToastsStart } from 'kibana/public'; +import useMountedState from 'react-use/lib/useMountedState'; +import { TriggerId } from '../../../../../../src/plugins/ui_actions/public'; +import { useContainerState } from '../../../../../../src/plugins/kibana_utils/public'; +import { + toastDrilldownCreated, + toastDrilldownDeleted, + toastDrilldownEdited, + toastDrilldownsCRUDError, + toastDrilldownsDeleted, +} from './i18n'; +import { DynamicActionManager, SerializedAction } from '../../dynamic_actions'; + +export function useDrilldownsStateManager( + actionManager: DynamicActionManager, + toastService: ToastsStart +) { + const { events: drilldowns } = useContainerState(actionManager.state); + const [isLoading, setIsLoading] = useState(false); + const isMounted = useMountedState(); + + async function run(op: () => Promise) { + setIsLoading(true); + try { + await op(); + } catch (e) { + toastService.addError(e, { + title: toastDrilldownsCRUDError, + }); + if (!isMounted) return; + setIsLoading(false); + return; + } + } + + async function createDrilldown(action: SerializedAction, selectedTriggers: TriggerId[]) { + await run(async () => { + await actionManager.createEvent(action, selectedTriggers); + toastService.addSuccess({ + title: toastDrilldownCreated.title(action.name), + text: toastDrilldownCreated.text, + }); + }); + } + + async function editDrilldown( + drilldownId: string, + action: SerializedAction, + selectedTriggers: TriggerId[] + ) { + await run(async () => { + await actionManager.updateEvent(drilldownId, action, selectedTriggers); + toastService.addSuccess({ + title: toastDrilldownEdited.title(action.name), + text: toastDrilldownEdited.text, + }); + }); + } + + async function deleteDrilldown(drilldownIds: string | string[]) { + await run(async () => { + drilldownIds = Array.isArray(drilldownIds) ? drilldownIds : [drilldownIds]; + await actionManager.deleteEvents(drilldownIds); + toastService.addSuccess( + drilldownIds.length === 1 + ? { + title: toastDrilldownDeleted.title, + text: toastDrilldownDeleted.text, + } + : { + title: toastDrilldownsDeleted.title(drilldownIds.length), + text: toastDrilldownsDeleted.text, + } + ); + }); + } + + return { drilldowns, isLoading, createDrilldown, editDrilldown, deleteDrilldown }; +} diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_welcome_message.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_welcome_message.ts new file mode 100644 index 000000000000..89c9445b09a4 --- /dev/null +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_welcome_message.ts @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { useState } from 'react'; +import { IStorageWrapper } from '../../../../../../src/plugins/kibana_utils/public'; + +export function useWelcomeMessage(storage: IStorageWrapper): [boolean, () => void] { + const key = `drilldowns:hidWelcomeMessage`; + const [hideWelcomeMessage, setHideWelcomeMessage] = useState(storage.get(key) ?? false); + + return [ + !hideWelcomeMessage, + () => { + if (hideWelcomeMessage) return; + setHideWelcomeMessage(true); + storage.set(key, true); + }, + ]; +} From 18a67b68b1c7a5e1b2cfba0fb8b3c3d6f7a41b24 Mon Sep 17 00:00:00 2001 From: Alison Goryachev Date: Mon, 5 Oct 2020 10:52:08 -0400 Subject: [PATCH 14/16] [Ingest pipelines] Clean up component integration tests (#78838) --- .../helpers/pipeline_form.helpers.ts | 32 ++++---- .../helpers/pipelines_list.helpers.ts | 30 ++++--- .../helpers/setup_environment.tsx | 15 ++-- .../ingest_pipelines_clone.test.tsx | 19 ++--- .../ingest_pipelines_create.test.tsx | 82 +++++++++---------- .../ingest_pipelines_edit.test.tsx | 16 ++-- .../ingest_pipelines_list.test.ts | 62 ++++++-------- .../pipeline_processors_editor.helpers.tsx | 36 +------- .../__jest__/processors_editor.tsx | 43 ++++++++++ .../__jest__/test_pipeline.helpers.tsx | 45 +--------- 10 files changed, 170 insertions(+), 210 deletions(-) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/processors_editor.tsx diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts index 752ffef51b43..dd354b492783 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts @@ -3,38 +3,42 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +import { act } from 'react-dom/test-utils'; + import { TestBed } from '../../../../../test_utils'; export const getFormActions = (testBed: TestBed) => { - const { find, form } = testBed; + const { find, form, component } = testBed; // User actions - const clickSubmitButton = () => { - find('submitButton').simulate('click'); - }; + const clickSubmitButton = async () => { + await act(async () => { + find('submitButton').simulate('click'); + }); - const clickAddDocumentsButton = () => { - find('addDocumentsButton').simulate('click'); + component.update(); }; - const clickShowRequestLink = () => { - find('showRequestLink').simulate('click'); + const clickShowRequestLink = async () => { + await act(async () => { + find('showRequestLink').simulate('click'); + }); + + component.update(); }; const toggleVersionSwitch = () => { - form.toggleEuiSwitch('versionToggle'); - }; + act(() => { + form.toggleEuiSwitch('versionToggle'); + }); - const toggleOnFailureSwitch = () => { - form.toggleEuiSwitch('onFailureToggle'); + component.update(); }; return { clickSubmitButton, clickShowRequestLink, toggleVersionSwitch, - toggleOnFailureSwitch, - clickAddDocumentsButton, }; }; diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts index 43ca849e61ae..6c446e8254f6 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts @@ -11,7 +11,6 @@ import { TestBed, TestBedConfig, findTestSubject, - nextTick, } from '../../../../../test_utils'; import { PipelinesList } from '../../../public/application/sections/pipelines_list'; import { WithAppDependencies } from './setup_environment'; @@ -32,13 +31,17 @@ export type PipelineListTestBed = TestBed & { }; const createActions = (testBed: TestBed) => { - const { find } = testBed; - /** * User Actions */ - const clickReloadButton = () => { - find('reloadButton').simulate('click'); + const clickReloadButton = async () => { + const { component, find } = testBed; + + await act(async () => { + find('reloadButton').simulate('click'); + }); + + component.update(); }; const clickPipelineAt = async (index: number) => { @@ -49,16 +52,19 @@ const createActions = (testBed: TestBed) => { await act(async () => { const { href } = pipelineLink.props(); router.navigateTo(href!); - await nextTick(); - component.update(); }); + component.update(); }; const clickActionMenu = (pipelineName: string) => { const { component } = testBed; - // When a table has > 2 actions, EUI displays an overflow menu with an id "-actions" - component.find(`div[id="${pipelineName}-actions"] button`).simulate('click'); + act(() => { + // When a table has > 2 actions, EUI displays an overflow menu with an id "-actions" + component.find(`div[id="${pipelineName}-actions"] button`).simulate('click'); + }); + + component.update(); }; const clickPipelineAction = (pipelineName: string, action: 'edit' | 'clone' | 'delete') => { @@ -67,7 +73,11 @@ const createActions = (testBed: TestBed) => { clickActionMenu(pipelineName); - component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click'); + act(() => { + component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click'); + }); + + component.update(); }; return { diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx index d9a0ac411538..eff2572aea38 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx @@ -4,20 +4,20 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; +import axios from 'axios'; +import axiosXhrAdapter from 'axios/lib/adapters/xhr'; import { LocationDescriptorObject } from 'history'; +import { HttpSetup } from 'kibana/public'; + import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; import { notificationServiceMock, - fatalErrorsServiceMock, docLinksServiceMock, - injectedMetadataServiceMock, scopedHistoryMock, } from '../../../../../../src/core/public/mocks'; import { usageCollectionPluginMock } from '../../../../../../src/plugins/usage_collection/public/mocks'; -import { HttpService } from '../../../../../../src/core/public/http'; - import { breadcrumbService, documentationService, @@ -27,10 +27,7 @@ import { import { init as initHttpRequests } from './http_requests'; -const httpServiceSetupMock = new HttpService().setup({ - injectedMetadata: injectedMetadataServiceMock.createSetupContract(), - fatalErrors: fatalErrorsServiceMock.createSetupContract(), -}); +const mockHttpClient = axios.create({ adapter: axiosXhrAdapter }); const history = scopedHistoryMock.create(); history.createHref.mockImplementation((location: LocationDescriptorObject) => { @@ -53,7 +50,7 @@ const appServices = { export const setupEnvironment = () => { uiMetricService.setup(usageCollectionPluginMock.createSetupContract()); - apiService.setup(httpServiceSetupMock, uiMetricService); + apiService.setup((mockHttpClient as unknown) as HttpSetup, uiMetricService); documentationService.setup(docLinksServiceMock.createStartContract()); breadcrumbService.setup(() => {}); diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx index f8e0030441ba..6e0889ac55d4 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx @@ -28,8 +28,7 @@ jest.mock('@elastic/eui', () => { }; }); -// FLAKY: https://github.com/elastic/kibana/issues/66856 -describe.skip('', () => { +describe('', () => { let testBed: PipelinesCloneTestBed; const { server, httpRequestsMockHelpers } = setupEnvironment(); @@ -38,13 +37,14 @@ describe.skip('', () => { server.restore(); }); - beforeEach(async () => { - httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE); + httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE); + beforeEach(async () => { await act(async () => { testBed = await setup(); - await testBed.waitFor('pipelineForm'); }); + + testBed.component.update(); }); test('should render the correct page header', () => { @@ -61,12 +61,9 @@ describe.skip('', () => { describe('form submission', () => { it('should send the correct payload', async () => { - const { actions, waitFor } = testBed; + const { actions } = testBed; - await act(async () => { - actions.clickSubmitButton(); - await waitFor('pipelineForm', 0); - }); + await actions.clickSubmitButton(); const latestRequest = server.requests[server.requests.length - 1]; @@ -75,7 +72,7 @@ describe.skip('', () => { name: `${PIPELINE_TO_CLONE.name}-copy`, }; - expect(JSON.parse(latestRequest.requestBody)).toEqual(expected); + expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected); }); }); }); diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx index 18ca71f2bb73..976627b1fa8a 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import { setupEnvironment, pageHelpers, nextTick } from './helpers'; +import { setupEnvironment, pageHelpers } from './helpers'; import { PipelinesCreateTestBed } from './helpers/pipelines_create.helpers'; import { nestedProcessorsErrorFixture } from './fixtures'; @@ -43,8 +43,9 @@ describe('', () => { beforeEach(async () => { await act(async () => { testBed = await setup(); - await testBed.waitFor('pipelineForm'); }); + + testBed.component.update(); }); test('should render the correct page header', () => { @@ -60,28 +61,20 @@ describe('', () => { }); test('should toggle the version field', async () => { - const { actions, component, exists } = testBed; + const { actions, exists } = testBed; // Version field should be hidden by default expect(exists('versionField')).toBe(false); - await act(async () => { - actions.toggleVersionSwitch(); - await nextTick(); - component.update(); - }); + actions.toggleVersionSwitch(); expect(exists('versionField')).toBe(true); }); test('should show the request flyout', async () => { - const { actions, component, find, exists } = testBed; + const { actions, find, exists } = testBed; - await act(async () => { - actions.clickShowRequestLink(); - await nextTick(); - component.update(); - }); + await actions.clickShowRequestLink(); // Verify request flyout opens expect(exists('requestFlyout')).toBe(true); @@ -92,23 +85,18 @@ describe('', () => { test('should prevent form submission if required fields are missing', async () => { const { form, actions, component, find } = testBed; - await act(async () => { - actions.clickSubmitButton(); - await nextTick(); - component.update(); - }); + await actions.clickSubmitButton(); expect(form.getErrorsMessages()).toEqual(['Name is required.']); expect(find('submitButton').props().disabled).toEqual(true); - // Add required fields and verify button is enabled again - form.setInputValue('nameField.input', 'my_pipeline'); - await act(async () => { - await nextTick(); - component.update(); + // Add required fields and verify button is enabled again + form.setInputValue('nameField.input', 'my_pipeline'); }); + component.update(); + expect(find('submitButton').props().disabled).toEqual(false); }); }); @@ -117,23 +105,27 @@ describe('', () => { beforeEach(async () => { await act(async () => { testBed = await setup(); + }); - const { waitFor, form } = testBed; + testBed.component.update(); + + await act(async () => { + testBed.form.setInputValue('nameField.input', 'my_pipeline'); + }); - await waitFor('pipelineForm'); + testBed.component.update(); - form.setInputValue('nameField.input', 'my_pipeline'); - form.setInputValue('descriptionField.input', 'pipeline description'); + await act(async () => { + testBed.form.setInputValue('descriptionField.input', 'pipeline description'); }); + + testBed.component.update(); }); test('should send the correct payload', async () => { - const { actions, waitFor } = testBed; + const { actions } = testBed; - await act(async () => { - actions.clickSubmitButton(); - await waitFor('pipelineForm', 0); - }); + await actions.clickSubmitButton(); const latestRequest = server.requests[server.requests.length - 1]; @@ -143,11 +135,11 @@ describe('', () => { processors: [], }; - expect(JSON.parse(latestRequest.requestBody)).toEqual(expected); + expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected); }); test('should surface API errors from the request', async () => { - const { actions, find, exists, waitFor } = testBed; + const { actions, find, exists } = testBed; const error = { status: 409, @@ -157,29 +149,29 @@ describe('', () => { httpRequestsMockHelpers.setCreatePipelineResponse(undefined, { body: error }); - await act(async () => { - actions.clickSubmitButton(); - await waitFor('savePipelineError'); - }); + await actions.clickSubmitButton(); expect(exists('savePipelineError')).toBe(true); expect(find('savePipelineError').text()).toContain(error.message); }); test('displays nested pipeline errors as a flat list', async () => { - const { actions, find, exists, waitFor } = testBed; + const { actions, find, exists, component } = testBed; httpRequestsMockHelpers.setCreatePipelineResponse(undefined, { body: nestedProcessorsErrorFixture, }); - await act(async () => { - actions.clickSubmitButton(); - await waitFor('savePipelineError'); - }); + await actions.clickSubmitButton(); expect(exists('savePipelineError')).toBe(true); expect(exists('savePipelineError.showErrorsButton')).toBe(true); - find('savePipelineError.showErrorsButton').simulate('click'); + + await act(async () => { + find('savePipelineError.showErrorsButton').simulate('click'); + }); + + component.update(); + expect(exists('savePipelineError.hideErrorsButton')).toBe(true); expect(exists('savePipelineError.showErrorsButton')).toBe(false); expect(find('savePipelineError').find('li').length).toBe(8); diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx index 6c89216e3473..3fe7f5ec4271 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx @@ -37,13 +37,14 @@ describe('', () => { server.restore(); }); - beforeEach(async () => { - httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_EDIT); + httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_EDIT); + beforeEach(async () => { await act(async () => { testBed = await setup(); - await testBed.waitFor('pipelineForm'); }); + + testBed.component.update(); }); test('should render the correct page header', () => { @@ -68,15 +69,12 @@ describe('', () => { describe('form submission', () => { it('should send the correct payload with changed values', async () => { const UPDATED_DESCRIPTION = 'updated pipeline description'; - const { actions, form, waitFor } = testBed; + const { actions, form } = testBed; // Make change to description field form.setInputValue('descriptionField.input', UPDATED_DESCRIPTION); - await act(async () => { - actions.clickSubmitButton(); - await waitFor('pipelineForm', 0); - }); + await actions.clickSubmitButton(); const latestRequest = server.requests[server.requests.length - 1]; @@ -87,7 +85,7 @@ describe('', () => { description: UPDATED_DESCRIPTION, }; - expect(JSON.parse(latestRequest.requestBody)).toEqual(expected); + expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected); }); }); }); diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts index c0acc39ca35a..d29d38da80e4 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts @@ -8,7 +8,7 @@ import { act } from 'react-dom/test-utils'; import { API_BASE_PATH } from '../../common/constants'; -import { setupEnvironment, pageHelpers, nextTick } from './helpers'; +import { setupEnvironment, pageHelpers } from './helpers'; import { PipelineListTestBed } from './helpers/pipelines_list.helpers'; const { setup } = pageHelpers.pipelinesList; @@ -22,6 +22,14 @@ describe('', () => { }); describe('With pipelines', () => { + beforeEach(async () => { + await act(async () => { + testBed = await setup(); + }); + + testBed.component.update(); + }); + const pipeline1 = { name: 'test_pipeline1', description: 'test_pipeline1 description', @@ -38,16 +46,6 @@ describe('', () => { httpRequestsMockHelpers.setLoadPipelinesResponse(pipelines); - beforeEach(async () => { - testBed = await setup(); - - await act(async () => { - const { waitFor } = testBed; - - await waitFor('pipelinesTable'); - }); - }); - test('should render the list view', async () => { const { exists, find, table } = testBed; @@ -72,14 +70,10 @@ describe('', () => { }); test('should reload the pipeline data', async () => { - const { component, actions } = testBed; + const { actions } = testBed; const totalRequests = server.requests.length; - await act(async () => { - actions.clickReloadButton(); - await nextTick(100); - component.update(); - }); + await actions.clickReloadButton(); expect(server.requests.length).toBe(totalRequests + 1); expect(server.requests[server.requests.length - 1].url).toBe(API_BASE_PATH); @@ -118,33 +112,27 @@ describe('', () => { await act(async () => { confirmButton!.click(); - await nextTick(); - component.update(); }); - const latestRequest = server.requests[server.requests.length - 1]; + component.update(); + + const deleteRequest = server.requests[server.requests.length - 2]; - expect(latestRequest.method).toBe('DELETE'); - expect(latestRequest.url).toBe(`${API_BASE_PATH}/${pipelineName}`); - expect(latestRequest.status).toEqual(200); + expect(deleteRequest.method).toBe('DELETE'); + expect(deleteRequest.url).toBe(`${API_BASE_PATH}/${pipelineName}`); + expect(deleteRequest.status).toEqual(200); }); }); describe('No pipelines', () => { - beforeEach(async () => { + test('should display an empty prompt', async () => { httpRequestsMockHelpers.setLoadPipelinesResponse([]); - testBed = await setup(); - await act(async () => { - const { waitFor } = testBed; - - await waitFor('emptyList'); + testBed = await setup(); }); - }); - - test('should display an empty prompt', async () => { - const { exists, find } = testBed; + const { exists, component, find } = testBed; + component.update(); expect(exists('sectionLoading')).toBe(false); expect(exists('emptyList')).toBe(true); @@ -162,13 +150,11 @@ describe('', () => { httpRequestsMockHelpers.setLoadPipelinesResponse(undefined, { body: error }); - testBed = await setup(); - await act(async () => { - const { waitFor } = testBed; - - await waitFor('pipelineLoadError'); + testBed = await setup(); }); + + testBed.component.update(); }); test('should render an error message if error fetching pipelines', async () => { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx index 10fb73df1ce1..72c25d6dff72 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx @@ -6,19 +6,9 @@ import { act } from 'react-dom/test-utils'; import React from 'react'; -import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mocks'; - -import { LocationDescriptorObject } from 'history'; -import { KibanaContextProvider } from 'src/plugins/kibana_react/public'; import { registerTestBed, TestBed } from '../../../../../../../test_utils'; -import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../'; - -import { - breadcrumbService, - uiMetricService, - documentationService, - apiService, -} from '../../../services'; +import { Props } from '../'; +import { ProcessorsEditorWithDeps } from './processors_editor'; jest.mock('@elastic/eui', () => { const original = jest.requireActual('@elastic/eui'); @@ -67,28 +57,8 @@ jest.mock('react-virtualized', () => { }; }); -const history = scopedHistoryMock.create(); -history.createHref.mockImplementation((location: LocationDescriptorObject) => { - return `${location.pathname}?${location.search}`; -}); - -const appServices = { - breadcrumbs: breadcrumbService, - metric: uiMetricService, - documentation: documentationService, - api: apiService, - notifications: notificationServiceMock.createSetupContract(), - history, -}; - const testBedSetup = registerTestBed( - (props: Props) => ( - - - - - - ), + (props: Props) => , { doMountAsync: false, } diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/processors_editor.tsx new file mode 100644 index 000000000000..8fb51ade921a --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/processors_editor.tsx @@ -0,0 +1,43 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React from 'react'; + +import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mocks'; + +import { LocationDescriptorObject } from 'history'; +import { KibanaContextProvider } from 'src/plugins/kibana_react/public'; +import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../'; + +import { + breadcrumbService, + uiMetricService, + documentationService, + apiService, +} from '../../../services'; + +const history = scopedHistoryMock.create(); +history.createHref.mockImplementation((location: LocationDescriptorObject) => { + return `${location.pathname}?${location.search}`; +}); + +const appServices = { + breadcrumbs: breadcrumbService, + metric: uiMetricService, + documentation: documentationService, + api: apiService, + notifications: notificationServiceMock.createSetupContract(), + history, +}; + +export const ProcessorsEditorWithDeps: React.FunctionComponent = (props) => { + return ( + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx index 222e0a491e0d..570d9878f763 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx @@ -8,26 +8,15 @@ import React from 'react'; import axios from 'axios'; import axiosXhrAdapter from 'axios/lib/adapters/xhr'; -import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mocks'; - -import { LocationDescriptorObject } from 'history'; -import { KibanaContextProvider } from 'src/plugins/kibana_react/public'; /* eslint-disable @kbn/eslint/no-restricted-paths */ import { usageCollectionPluginMock } from 'src/plugins/usage_collection/public/mocks'; import { registerTestBed, TestBed } from '../../../../../../../test_utils'; import { stubWebWorker } from '../../../../../../../test_utils/stub_web_worker'; - -import { - breadcrumbService, - uiMetricService, - documentationService, - apiService, -} from '../../../services'; - -import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../'; - +import { uiMetricService, apiService } from '../../../services'; +import { Props } from '../'; import { initHttpRequests } from './http_requests.helpers'; +import { ProcessorsEditorWithDeps } from './processors_editor'; stubWebWorker(); @@ -75,34 +64,8 @@ jest.mock('react-virtualized', () => { }; }); -const history = scopedHistoryMock.create(); -history.createHref.mockImplementation((location: LocationDescriptorObject) => { - return `${location.pathname}?${location.search}`; -}); - -const appServices = { - breadcrumbs: breadcrumbService, - metric: uiMetricService, - documentation: documentationService, - api: apiService, - notifications: notificationServiceMock.createSetupContract(), - history, - uiSettings: {}, - urlGenerators: { - getUrlGenerator: jest.fn().mockReturnValue({ - createUrl: jest.fn(), - }), - }, -}; - const testBedSetup = registerTestBed( - (props: Props) => ( - - - - - - ), + (props: Props) => , { doMountAsync: false, } From f6729dc3f4e7d679c280a02955e134e10e7b0097 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 5 Oct 2020 17:05:10 +0200 Subject: [PATCH 15/16] [Ingest Pipelines] Processors editor a11y focus states (#79122) * Fix showing of accessibility border - fix use of flex items (removed unnecessary use thereof) - also fixed overflow when tabbing through drop zones (compressed) * refactor isLast to compressed * optimize keyboard focus states in move mode * fix jest test Co-authored-by: Elastic Machine Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../inline_text_input.tsx | 18 ++- .../pipeline_processors_editor_item.tsx | 1 + .../components/drop_zone_button.tsx | 25 ++- .../components/private_tree.tsx | 151 +++++++++--------- .../processors_tree/processors_tree.scss | 9 +- .../processors_tree/processors_tree.tsx | 17 +- 6 files changed, 117 insertions(+), 104 deletions(-) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx index e91974adca20..833888e9062d 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx @@ -11,15 +11,23 @@ export interface Props { placeholder: string; ariaLabel: string; onChange: (value: string) => void; - disabled: boolean; + /** + * Whether the containing element of the text input can be focused. + * + * If it cannot be focused, this component cannot switch to showing + * the text input field. + * + * Defaults to false. + */ + disabled?: boolean; text?: string; } export const InlineTextInput: FunctionComponent = ({ - disabled, placeholder, text, ariaLabel, + disabled = false, onChange, }) => { const [isShowingTextInput, setIsShowingTextInput] = useState(false); @@ -71,7 +79,11 @@ export const InlineTextInput: FunctionComponent = ({ />
) : ( -
setIsShowingTextInput(true)}> +
setIsShowingTextInput(true)} + >
{text || {placeholder}} diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx index bf69f817183a..aa76f6741330 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx @@ -159,6 +159,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( color={isDimmed ? 'subdued' : undefined} > { editor.setMode({ diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx index 57ecb6f7f118..cd32e2ec5472 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx @@ -7,11 +7,15 @@ import { i18n } from '@kbn/i18n'; import React, { FunctionComponent } from 'react'; import classNames from 'classnames'; -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; +import { EuiButtonIcon } from '@elastic/eui'; export interface Props { isVisible: boolean; isDisabled: boolean; + /** + * Useful for buttons at the very top or bottom of lists to avoid any overflow. + */ + compressed?: boolean; onClick: (event: React.MouseEvent) => void; 'data-test-subj'?: string; } @@ -29,7 +33,7 @@ const cannotMoveHereLabel = i18n.translate( ); export const DropZoneButton: FunctionComponent = (props) => { - const { onClick, isDisabled, isVisible } = props; + const { onClick, isDisabled, isVisible, compressed } = props; const isUnavailable = isVisible && isDisabled; const containerClasses = classNames({ // eslint-disable-next-line @typescript-eslint/naming-convention @@ -40,14 +44,16 @@ export const DropZoneButton: FunctionComponent = (props) => { const buttonClasses = classNames({ // eslint-disable-next-line @typescript-eslint/naming-convention 'pipelineProcessorsEditor__tree__dropZoneButton--visible': isVisible, + // eslint-disable-next-line @typescript-eslint/naming-convention + 'pipelineProcessorsEditor__tree__dropZoneButton--compressed': compressed, }); - const content = ( + return (
{} : onClick} @@ -55,15 +61,4 @@ export const DropZoneButton: FunctionComponent = (props) => { />
); - - return isUnavailable ? ( - - {content} - - ) : ( - content - ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx index 89407fd4366d..27e612f19666 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx @@ -5,7 +5,7 @@ */ import React, { FunctionComponent, MutableRefObject, useEffect } from 'react'; -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup } from '@elastic/eui'; import { AutoSizer, List, WindowScroller } from 'react-virtualized'; import { DropSpecialLocations } from '../../../constants'; @@ -78,50 +78,45 @@ export const PrivateTree: FunctionComponent = ({ return ( <> {idx === 0 ? ( - - { - event.preventDefault(); - onAction({ - type: 'move', - payload: { - destination: selector.concat(DropSpecialLocations.top), - source: movingProcessor!.selector, - }, - }); - }} - isVisible={Boolean(movingProcessor)} - isDisabled={!movingProcessor || isDropZoneAboveDisabled(info, movingProcessor)} - /> - - ) : undefined} - - - - { event.preventDefault(); onAction({ type: 'move', payload: { - destination: selector.concat(String(idx + 1)), + destination: selector.concat(DropSpecialLocations.top), source: movingProcessor!.selector, }, }); }} + isVisible={Boolean(movingProcessor)} + isDisabled={!movingProcessor || isDropZoneAboveDisabled(info, movingProcessor)} /> - + ) : undefined} + + { + event.preventDefault(); + onAction({ + type: 'move', + payload: { + destination: selector.concat(String(idx + 1)), + source: movingProcessor!.selector, + }, + }); + }} + /> ); }; @@ -141,52 +136,50 @@ export const PrivateTree: FunctionComponent = ({ {({ height, registerChild, isScrolling, onChildScroll, scrollTop }: any) => { return ( - - - {({ width }) => { - return ( -
- { - const processor = processors[index]; - return calculateItemHeight({ - processor, - isFirstInArray: index === 0, - }); - }} - rowRenderer={({ index: idx, style }) => { - const processor = processors[idx]; - const above = processors[idx - 1]; - const below = processors[idx + 1]; - const info: ProcessorInfo = { - id: processor.id, - selector: selector.concat(String(idx)), - aboveId: above?.id, - belowId: below?.id, - }; + + {({ width }) => { + return ( +
+ { + const processor = processors[index]; + return calculateItemHeight({ + processor, + isFirstInArray: index === 0, + }); + }} + rowRenderer={({ index: idx, style }) => { + const processor = processors[idx]; + const above = processors[idx - 1]; + const below = processors[idx + 1]; + const info: ProcessorInfo = { + id: processor.id, + selector: selector.concat(String(idx)), + aboveId: above?.id, + belowId: below?.id, + }; - return ( -
- {renderRow({ processor, info, idx })} -
- ); - }} - processors={processors} - /> -
- ); - }} - - + return ( +
+ {renderRow({ processor, info, idx })} +
+ ); + }} + processors={processors} + /> +
+ ); + }} + ); }} diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss index 25e4eb7320bf..f1e399428cdf 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss @@ -31,15 +31,14 @@ } } $dropZoneButtonHeight: 60px; - $dropZoneButtonOffsetY: $dropZoneButtonHeight * -0.5; + $dropZoneButtonOffsetY: $dropZoneButtonHeight * 0.5; &__dropZoneButton { position: absolute; padding: 0; height: $dropZoneButtonHeight; - margin-top: $dropZoneButtonOffsetY; + margin-top: -$dropZoneButtonOffsetY; width: 100%; - opacity: 0; text-decoration: none !important; z-index: $dropZoneZIndex; @@ -49,6 +48,10 @@ transform: none !important; } } + + &--compressed { + height: $dropZoneButtonOffsetY; + } } &__addProcessorButton { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx index ffc0a1459b79..46d237e1467e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx @@ -98,9 +98,16 @@ export const ProcessorsTree: FunctionComponent = memo((props) => { /> - - - {!processors.length && ( + + {!processors.length && ( + // We want to make this dropzone the max length of its container + = memo((props) => { }); }} /> - )} + + )} + { onAction({ type: 'addProcessor', payload: { target: baseSelector } }); From 14e58fbadb55d71a5aecd5d9e257506eac75aac4 Mon Sep 17 00:00:00 2001 From: Bhavya RM Date: Mon, 5 Oct 2020 11:09:14 -0400 Subject: [PATCH 16/16] A11y tests for user page (#79199) --- .../users/edit_user/edit_user_page.tsx | 2 +- .../users/users_grid/users_grid_page.tsx | 1 + x-pack/test/accessibility/apps/users.ts | 106 ++++++++++++++++++ x-pack/test/accessibility/config.ts | 1 + 4 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 x-pack/test/accessibility/apps/users.ts diff --git a/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx b/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx index 9eb2616cebb1..9a62187cffd3 100644 --- a/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx +++ b/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx @@ -536,7 +536,7 @@ export class EditUserPage extends Component { {isNewUser || showChangePasswordForm ? null : ( - + { toolsRight: this.renderToolsRight(), box: { incremental: true, + 'data-test-subj': 'searchUsers', }, onChange: (query: any) => { this.setState({ diff --git a/x-pack/test/accessibility/apps/users.ts b/x-pack/test/accessibility/apps/users.ts new file mode 100644 index 000000000000..b3426410962a --- /dev/null +++ b/x-pack/test/accessibility/apps/users.ts @@ -0,0 +1,106 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +// a11y tests for spaces, space selection and spacce creation and feature controls + +import { FtrProviderContext } from '../ftr_provider_context'; + +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const PageObjects = getPageObjects(['security', 'settings']); + const a11y = getService('a11y'); + const esArchiver = getService('esArchiver'); + const testSubjects = getService('testSubjects'); + const retry = getService('retry'); + + describe('Kibana users page a11y tests', () => { + before(async () => { + await esArchiver.load('empty_kibana'); + await PageObjects.security.clickElasticsearchUsers(); + }); + + it('a11y test for user page', async () => { + await a11y.testAppSnapshot(); + }); + + it('a11y test for search user bar', async () => { + await testSubjects.click('searchUsers'); + await a11y.testAppSnapshot(); + }); + + it('a11y test for searching a user', async () => { + await testSubjects.setValue('searchUsers', 'test'); + await a11y.testAppSnapshot(); + await testSubjects.setValue('searchUsers', ''); + }); + + it('a11y test for toggle button for show reserved users only', async () => { + await retry.waitFor( + 'show reserved users toggle button is visible', + async () => await testSubjects.exists('showReservedUsersSwitch') + ); + await testSubjects.click('showReservedUsersSwitch'); + await a11y.testAppSnapshot(); + await testSubjects.click('showReservedUsersSwitch'); + }); + + it('a11y test for toggle button for show reserved users only', async () => { + await retry.waitFor( + 'show reserved users toggle button is visible', + async () => await testSubjects.exists('showReservedUsersSwitch') + ); + await testSubjects.click('showReservedUsersSwitch'); + await a11y.testAppSnapshot(); + await testSubjects.click('showReservedUsersSwitch'); + }); + + it('a11y test for create user panel', async () => { + await testSubjects.click('createUserButton'); + await a11y.testAppSnapshot(); + }); + + // https://github.com/elastic/eui/issues/2841 + it.skip('a11y test for roles drop down', async () => { + await testSubjects.setValue('userFormUserNameInput', 'a11y'); + await testSubjects.setValue('passwordInput', 'password'); + await testSubjects.setValue('passwordConfirmationInput', 'password'); + await testSubjects.setValue('userFormFullNameInput', 'a11y user'); + await testSubjects.setValue('userFormEmailInput', 'example@example.com'); + await testSubjects.click('rolesDropdown'); + await a11y.testAppSnapshot(); + }); + + it('a11y test for display of delete button on users page ', async () => { + await testSubjects.setValue('userFormUserNameInput', 'deleteA11y'); + await testSubjects.setValue('passwordInput', 'password'); + await testSubjects.setValue('passwordConfirmationInput', 'password'); + await testSubjects.setValue('userFormFullNameInput', 'DeleteA11y user'); + await testSubjects.setValue('userFormEmailInput', 'example@example.com'); + await testSubjects.click('rolesDropdown'); + await testSubjects.setValue('rolesDropdown', 'roleOption-apm_user'); + await testSubjects.click('userFormSaveButton'); + await testSubjects.click('checkboxSelectRow-deleteA11y'); + await a11y.testAppSnapshot(); + }); + + it('a11y test for delete user panel ', async () => { + await testSubjects.click('deleteUserButton'); + await a11y.testAppSnapshot(); + }); + + it('a11y test for edit user panel', async () => { + await testSubjects.click('confirmModalCancelButton'); + await PageObjects.settings.clickLinkText('deleteA11y'); + await a11y.testAppSnapshot(); + }); + + // https://github.com/elastic/eui/issues/2841 + it.skip('a11y test for Change password screen', async () => { + await PageObjects.settings.clickLinkText('deleteA11y'); + await testSubjects.click('changePassword'); + await a11y.testAppSnapshot(); + }); + }); +} diff --git a/x-pack/test/accessibility/config.ts b/x-pack/test/accessibility/config.ts index 915872d8b3fb..5ea5c0369647 100644 --- a/x-pack/test/accessibility/config.ts +++ b/x-pack/test/accessibility/config.ts @@ -23,6 +23,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) { require.resolve('./apps/spaces'), require.resolve('./apps/advanced_settings'), require.resolve('./apps/dashboard_edit_panel'), + require.resolve('./apps/users'), ], pageObjects,