From 0776bf7a3ebb6f5639b32a145887d22f31393f9e Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 1 Oct 2020 07:40:27 +0200 Subject: [PATCH 01/39] [UX] Improve page responsive (#78759) * WIP * add resizeable panel * Improve page responsiveness * Improve page responsiveness * fix types Co-authored-by: Elastic Machine --- .../RumDashboard/Charts/PageLoadDistChart.tsx | 5 +- .../RumDashboard/Charts/PageViewsChart.tsx | 2 +- .../Charts/VisitorBreakdownChart.tsx | 7 ++- .../app/RumDashboard/CoreVitals/index.tsx | 8 +-- .../ImpactfulMetrics/JSErrors.tsx | 10 ++-- .../PercentileAnnotations.tsx | 12 ++-- .../PageLoadDistribution/index.tsx | 3 +- .../app/RumDashboard/PageViewsTrend/index.tsx | 3 +- .../RumDashboard/Panels/PageLoadAndViews.tsx | 39 +++++++++++++ .../RumDashboard/Panels/VisitorBreakdowns.tsx | 39 +++++++++++++ .../app/RumDashboard/RumDashboard.tsx | 55 +++++++++---------- .../components/app/RumDashboard/RumHome.tsx | 32 +++++------ .../RumDashboard/UXMetrics/KeyUXMetrics.tsx | 2 +- .../app/RumDashboard/UXMetrics/index.tsx | 4 +- .../RumDashboard/VisitorBreakdown/index.tsx | 2 +- .../app/RumDashboard/hooks/useBreakPoints.ts | 38 +++++++++++++ .../app/RumDashboard/translations.ts | 3 + .../lib/rum_client/get_visitor_breakdown.ts | 20 ++++--- 18 files changed, 203 insertions(+), 81 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx index 79cd1c5753ae5..4a5f43dacedf4 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx @@ -89,7 +89,10 @@ export function PageLoadDistChart({ const [darkMode] = useUiSetting$('theme:darkMode'); return ( - + {(!loading || data) && ( + {(!loading || data) && ( + d.count as number} valueGetter="percent" percentFormatter={(d: number) => diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx index cd7fd0af6d683..fcc7b214943ff 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx @@ -25,8 +25,8 @@ export function CoreVitals({ data, loading }: Props) { const { lcp, lcpRanks, fid, fidRanks, cls, clsRanks } = data || {}; return ( - - + + - + - + 0 + ? ((data?.totalErrorPages ?? 0) / totalPageViews) * 100 + : 0; + return ( <> @@ -109,10 +114,7 @@ export function JSErrors() { title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', { defaultMessage: '{errorRate} %', values: { - errorRate: ( - ((data?.totalErrorPages ?? 0) / totalPageViews) * - 100 - ).toFixed(0), + errorRate: errorRate.toFixed(0), }, })} description={I18LABELS.errorRate} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx index 7e81dc011bdb5..2abbcb8239aa8 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx @@ -10,9 +10,9 @@ import { LineAnnotation, LineAnnotationDatum, LineAnnotationStyle, + Position, } from '@elastic/charts'; import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; -import styled from 'styled-components'; import { EuiToolTip } from '@elastic/eui'; interface Props { @@ -28,11 +28,6 @@ function generateAnnotationData( })); } -const PercentileMarker = styled.span` - position: relative; - bottom: 205px; -`; - export function PercentileAnnotations({ percentiles }: Props) { const dataValues = generateAnnotationData(percentiles) ?? []; @@ -66,8 +61,9 @@ export function PercentileAnnotations({ percentiles }: Props) { dataValues={[annotation]} style={style} hideTooltips={true} + markerPosition={Position.Top} marker={ - + } content={ @@ -76,7 +72,7 @@ export function PercentileAnnotations({ percentiles }: Props) { > <>{annotation.details}th - + } /> ))} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx index 88d14a0213a96..45a40712f90fb 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx @@ -13,6 +13,7 @@ import { BreakdownFilter } from '../Breakdowns/BreakdownFilter'; import { PageLoadDistChart } from '../Charts/PageLoadDistChart'; import { BreakdownItem } from '../../../../../typings/ui_filters'; import { ResetPercentileZoom } from './ResetPercentileZoom'; +import { FULL_HEIGHT } from '../RumDashboard'; export interface PercentileRange { min?: number | null; @@ -71,7 +72,7 @@ export function PageLoadDistribution() { }; return ( -
+
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx index 621098b6028cb..7492096b93898 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx @@ -12,6 +12,7 @@ import { I18LABELS } from '../translations'; import { BreakdownFilter } from '../Breakdowns/BreakdownFilter'; import { PageViewsChart } from '../Charts/PageViewsChart'; import { BreakdownItem } from '../../../../../typings/ui_filters'; +import { FULL_HEIGHT } from '../RumDashboard'; export function PageViewsTrend() { const { urlParams, uiFilters } = useUrlParams(); @@ -48,7 +49,7 @@ export function PageViewsTrend() { ); return ( -
+
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx new file mode 100644 index 0000000000000..cdc52c98de971 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.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 React from 'react'; +import { EuiPanel, EuiResizableContainer } from '@elastic/eui'; +import { FULL_HEIGHT } from '../RumDashboard'; +import { PageLoadDistribution } from '../PageLoadDistribution'; +import { PageViewsTrend } from '../PageViewsTrend'; +import { useBreakPoints } from '../hooks/useBreakPoints'; + +export function PageLoadAndViews() { + const { isLarge } = useBreakPoints(); + + return ( + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + + + + + + + + + + + + )} + + ); +} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx new file mode 100644 index 0000000000000..87ffacbf56f96 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.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 React from 'react'; +import { EuiPanel, EuiResizableContainer } from '@elastic/eui'; +import { VisitorBreakdown } from '../VisitorBreakdown'; +import { VisitorBreakdownMap } from '../VisitorBreakdownMap'; +import { FULL_HEIGHT } from '../RumDashboard'; +import { useBreakPoints } from '../hooks/useBreakPoints'; + +export function VisitorBreakdownsPanel() { + const { isLarge } = useBreakPoints(); + + return ( + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + + + + + + + + + + + + )} + + ); +} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx index 37522b06970c1..0004599b1821b 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx @@ -10,20 +10,24 @@ import { EuiTitle, EuiSpacer, EuiPanel, + EuiResizableContainer, } from '@elastic/eui'; import React from 'react'; import { ClientMetrics } from './ClientMetrics'; -import { PageViewsTrend } from './PageViewsTrend'; -import { PageLoadDistribution } from './PageLoadDistribution'; import { I18LABELS } from './translations'; -import { VisitorBreakdown } from './VisitorBreakdown'; import { UXMetrics } from './UXMetrics'; -import { VisitorBreakdownMap } from './VisitorBreakdownMap'; import { ImpactfulMetrics } from './ImpactfulMetrics'; +import { PageLoadAndViews } from './Panels/PageLoadAndViews'; +import { VisitorBreakdownsPanel } from './Panels/VisitorBreakdowns'; +import { useBreakPoints } from './hooks/useBreakPoints'; + +export const FULL_HEIGHT = { height: '100%' }; export function RumDashboard() { + const { isLarge, isSmall } = useBreakPoints(); + return ( - + @@ -41,31 +45,22 @@ export function RumDashboard() { - - - - - - - - - - - - - - - - - - - - - - - - - + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + + + + + + + + )} + diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx index 71a992ae4df82..f30f9ba5af257 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx @@ -18,22 +18,20 @@ export const UX_LABEL = i18n.translate('xpack.apm.ux.title', { export function RumHome() { return ( -
- - - - - -

{UX_LABEL}

- - - - - - - - - -
+ + + + + +

{UX_LABEL}

+ + + + + + + + + ); } diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx index 37836a2c47d64..53722658cafef 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx @@ -57,7 +57,7 @@ export function KeyUXMetrics({ data, loading }: Props) { // Note: FCP value is in ms unit return ( - + - +

{I18LABELS.userExperienceMetrics}

@@ -70,7 +70,7 @@ export function UXMetrics() { - +

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx index 092c416303bb5..67127f9c2fd81 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx @@ -44,7 +44,7 @@ export function VisitorBreakdown() {

{VisitorBreakdownLabel}

 - +

{I18LABELS.browser}

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts new file mode 100644 index 0000000000000..ea7b155045fdc --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts @@ -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 { useState } from 'react'; +import useWindowSize from 'react-use/lib/useWindowSize'; +import useDebounce from 'react-use/lib/useDebounce'; +import { isWithinMaxBreakpoint } from '@elastic/eui'; + +export function useBreakPoints() { + const [screenSizes, setScreenSizes] = useState({ + isSmall: false, + isMedium: false, + isLarge: false, + isXl: false, + }); + + const { width } = useWindowSize(); + + useDebounce( + () => { + const windowWidth = window.innerWidth; + + setScreenSizes({ + isSmall: isWithinMaxBreakpoint(windowWidth, 's'), + isMedium: isWithinMaxBreakpoint(windowWidth, 'm'), + isLarge: isWithinMaxBreakpoint(windowWidth, 'l'), + isXl: isWithinMaxBreakpoint(windowWidth, 'xl'), + }); + }, + 50, + [width] + ); + + return screenSizes; +} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts index dd7721d9f7129..fd118096526d7 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts @@ -150,6 +150,9 @@ export const I18LABELS = { percentile99th: i18n.translate('xpack.apm.ux.percentile.99th', { defaultMessage: '99th', }), + noData: i18n.translate('xpack.apm.ux.visitorBreakdown.noData', { + defaultMessage: 'No data.', + }), }; export const VisitorBreakdownLabel = i18n.translate( diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts b/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts index 7345d6acc0f82..52d089e4e29c9 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts +++ b/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts @@ -74,20 +74,24 @@ export async function getVisitorBreakdown({ name: bucket.key as string, })); - browserItems.push({ - count: totalItems - browserTotal, - name: 'Others', - }); + if (totalItems > 0) { + browserItems.push({ + count: totalItems - browserTotal, + name: 'Others', + }); + } const osItems = os.buckets.map((bucket) => ({ count: bucket.doc_count, name: bucket.key as string, })); - osItems.push({ - count: totalItems - osTotal, - name: 'Others', - }); + if (totalItems > 0) { + osItems.push({ + count: totalItems - osTotal, + name: 'Others', + }); + } return { os: osItems, From 42b5d787e654bca0c1e0b789cd7f6f27065b7109 Mon Sep 17 00:00:00 2001 From: Robert Oskamp Date: Thu, 1 Oct 2020 07:46:07 +0200 Subject: [PATCH 02/39] [ML] Functional tests - stabilize calendar edit tests (#78950) This PR stabilizes the calendar edit test by making sure the correct calendar form is displayed on the edit page. --- .../__snapshots__/calendar_form.test.js.snap | 9 +++++++-- .../calendars/edit/calendar_form/calendar_form.js | 4 ++-- .../functional/apps/ml/settings/calendar_edit.ts | 11 ++++++++--- x-pack/test/functional/apps/ml/settings/index.ts | 2 +- .../functional/services/ml/settings_calendar.ts | 15 ++++++++++++--- 5 files changed, 30 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap index ad76bb9115617..49caddfd29f82 100644 --- a/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap +++ b/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap @@ -1,9 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CalendarForm CalendarId shown as title when editing 1`] = ` - +

+

- +

+ {isEdit === true ? ( ) : ( diff --git a/x-pack/test/functional/apps/ml/settings/calendar_edit.ts b/x-pack/test/functional/apps/ml/settings/calendar_edit.ts index e738b50a2fe05..f9ba8fccd3c1c 100644 --- a/x-pack/test/functional/apps/ml/settings/calendar_edit.ts +++ b/x-pack/test/functional/apps/ml/settings/calendar_edit.ts @@ -20,8 +20,7 @@ export default function ({ getService }: FtrProviderContext) { const jobConfigs = [createJobConfig('test_calendar_ad_1'), createJobConfig('test_calendar_ad_2')]; const newJobGroups = ['farequote']; - // FLAKY: https://github.com/elastic/kibana/issues/78288 - describe.skip('calendar edit', function () { + describe('calendar edit', function () { before(async () => { await esArchiver.loadIfNeeded('ml/farequote'); await ml.testResources.createIndexPatternIfNeeded('ft_farequote', '@timestamp'); @@ -56,6 +55,7 @@ export default function ({ getService }: FtrProviderContext) { await ml.testExecution.logTestStep('calendar edit opens existing calendar'); await ml.settingsCalendar.openCalendarEditForm(calendarId); + await ml.settingsCalendar.assertCalendarTitleValue(calendarId); await ml.testExecution.logTestStep( 'calendar edit deselects previous job selection and assigns new job groups' @@ -85,14 +85,19 @@ export default function ({ getService }: FtrProviderContext) { await ml.testExecution.logTestStep('calendar edit re-opens the updated calendar'); await ml.settingsCalendar.openCalendarEditForm(calendarId); + await ml.settingsCalendar.assertCalendarTitleValue(calendarId); + await ml.testExecution.logTestStep('calendar edit verifies the job selection is empty'); await ml.settingsCalendar.assertJobSelection([]); + await ml.testExecution.logTestStep( 'calendar edit verifies the job group selection was updated' ); await ml.settingsCalendar.assertJobGroupSelection(newJobGroups); - await ml.testExecution.logTestStep('calendar edit verifies calendar updated correctly'); + await ml.testExecution.logTestStep( + 'calendar edit verifies calendar events updated correctly' + ); await asyncForEach(testEvents, async ({ description }) => { await ml.settingsCalendar.assertEventRowMissing(description); }); diff --git a/x-pack/test/functional/apps/ml/settings/index.ts b/x-pack/test/functional/apps/ml/settings/index.ts index 5b2c7d15e1959..eb91e005ebd71 100644 --- a/x-pack/test/functional/apps/ml/settings/index.ts +++ b/x-pack/test/functional/apps/ml/settings/index.ts @@ -7,7 +7,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context'; export default function ({ loadTestFile }: FtrProviderContext) { describe('settings', function () { - this.tags(['quynh', 'skipFirefox']); + this.tags(['mlqa', 'skipFirefox']); loadTestFile(require.resolve('./calendar_creation')); loadTestFile(require.resolve('./calendar_edit')); diff --git a/x-pack/test/functional/services/ml/settings_calendar.ts b/x-pack/test/functional/services/ml/settings_calendar.ts index c269636522923..3a2c9149a0634 100644 --- a/x-pack/test/functional/services/ml/settings_calendar.ts +++ b/x-pack/test/functional/services/ml/settings_calendar.ts @@ -121,7 +121,7 @@ export function MachineLearningSettingsCalendarProvider( async openCalendarEditForm(calendarId: string) { await testSubjects.click(this.rowSelector(calendarId, 'mlEditCalendarLink')); - await testSubjects.existOrFail('mlPageCalendarEdit'); + await testSubjects.existOrFail('mlPageCalendarEdit > mlCalendarFormEdit', { timeout: 5000 }); }, async assertApplyToAllJobsSwitchEnabled(expectedValue: boolean) { @@ -224,6 +224,15 @@ export function MachineLearningSettingsCalendarProvider( ); }, + async assertCalendarTitleValue(expectedCalendarId: string) { + const actualValue = await testSubjects.getVisibleText('mlCalendarTitle'); + const expectedValue = `Calendar ${expectedCalendarId}`; + expect(actualValue).to.eql( + expectedValue, + `Calendar title should be '${expectedValue}' (got '${actualValue}')` + ); + }, + async setCalendarId(calendarId: string) { await mlCommonUI.setValueWithChecks('mlCalendarIdInput', calendarId, { clearWithKeyboard: true, @@ -271,13 +280,13 @@ export function MachineLearningSettingsCalendarProvider( async navigateToCalendarCreationPage() { await testSubjects.existOrFail('mlCalendarButtonCreate'); await testSubjects.click('mlCalendarButtonCreate'); - await testSubjects.existOrFail('mlPageCalendarEdit'); + await testSubjects.existOrFail('mlPageCalendarEdit > mlCalendarFormNew', { timeout: 5000 }); }, async openNewCalendarEventForm() { await testSubjects.existOrFail('mlCalendarNewEventButton'); await testSubjects.click('mlCalendarNewEventButton'); - await testSubjects.existOrFail('mlPageCalendarEdit'); + await testSubjects.existOrFail('mlCalendarEventForm'); }, async assertCalendarEventDescriptionValue(expectedValue: string) { From ec9d220b3c22d45a8a71b10920eedae122053b81 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 1 Oct 2020 08:23:07 +0200 Subject: [PATCH 03/39] [Discover] Unskip doc link functional test (#78600) * Flaky test runner confirmed it's not flaky --- test/functional/apps/discover/_doc_navigation.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/functional/apps/discover/_doc_navigation.js b/test/functional/apps/discover/_doc_navigation.js index 31aef96918ffa..87a150c7d6961 100644 --- a/test/functional/apps/discover/_doc_navigation.js +++ b/test/functional/apps/discover/_doc_navigation.js @@ -28,8 +28,7 @@ export default function ({ getService, getPageObjects }) { const esArchiver = getService('esArchiver'); const retry = getService('retry'); - // FLAKY: https://github.com/elastic/kibana/issues/78373 - describe.skip('doc link in discover', function contextSize() { + describe('doc link in discover', function contextSize() { beforeEach(async function () { log.debug('load kibana index with default index pattern'); await esArchiver.loadIfNeeded('discover'); From 3d9ea52803f433d3103ba62464b8157ac5541a24 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 1 Oct 2020 09:34:25 +0300 Subject: [PATCH 04/39] [Actions][Jira] Set parent issue for Sub-task issue type (#78772) --- docs/user/alerting/action-types/jira.asciidoc | 2 + x-pack/plugins/actions/README.md | 25 ++-- .../builtin_action_types/jira/api.test.ts | 32 +++++ .../server/builtin_action_types/jira/api.ts | 20 +++- .../server/builtin_action_types/jira/index.ts | 26 ++++- .../server/builtin_action_types/jira/mocks.ts | 13 +++ .../builtin_action_types/jira/schema.ts | 11 ++ .../builtin_action_types/jira/service.test.ts | 109 ++++++++++++++++++ .../builtin_action_types/jira/service.ts | 67 +++++++++++ .../server/builtin_action_types/jira/types.ts | 35 +++++- .../builtin_action_types/jira/api.ts | 38 ++++++ .../jira/jira_params.test.tsx | 3 + .../builtin_action_types/jira/jira_params.tsx | 32 ++++- .../jira/search_issues.tsx | 104 +++++++++++++++++ .../builtin_action_types/jira/translations.ts | 37 ++++++ .../builtin_action_types/jira/types.ts | 1 + .../jira/use_get_issues.tsx | 94 +++++++++++++++ .../jira/use_get_single_issue.tsx | 96 +++++++++++++++ .../actions/builtin_action_types/jira.ts | 12 +- 19 files changed, 733 insertions(+), 24 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx diff --git a/docs/user/alerting/action-types/jira.asciidoc b/docs/user/alerting/action-types/jira.asciidoc index 48bd6c8501b9f..65e5ee4fc4a01 100644 --- a/docs/user/alerting/action-types/jira.asciidoc +++ b/docs/user/alerting/action-types/jira.asciidoc @@ -69,6 +69,8 @@ Priority:: The priority of the incident. Labels:: The labels of the incident. Title:: A title for the issue, used for searching the contents of the knowledge base. Description:: The details about the incident. +Parent:: The parent issue id or key. Only for `Sub-task` issue types. +Priority:: The priority of the incident. Additional comments:: Additional information for the client, such as how to troubleshoot the issue. [[configuring-jira]] diff --git a/x-pack/plugins/actions/README.md b/x-pack/plugins/actions/README.md index af29a1d537499..02e8e91c987d8 100644 --- a/x-pack/plugins/actions/README.md +++ b/x-pack/plugins/actions/README.md @@ -274,12 +274,12 @@ Running the action by scheduling a task means that we will no longer have a user The following table describes the properties of the `options` object. -| Property | Description | Type | -| -------- | ------------------------------------------------------------------------------------------------------ | ------ | -| id | The id of the action you want to execute. | string | -| params | The `params` value to give the action type executor. | object | -| spaceId | The space id the action is within. | string | -| apiKey | The Elasticsearch API key to use for context. (Note: only required and used when security is enabled). | string | +| Property | Description | Type | +| -------- | ------------------------------------------------------------------------------------------------------ | ---------------- | +| id | The id of the action you want to execute. | string | +| params | The `params` value to give the action type executor. | object | +| spaceId | The space id the action is within. | string | +| apiKey | The Elasticsearch API key to use for context. (Note: only required and used when security is enabled). | string | | source | The source of the execution, either an HTTP request or a reference to a Saved Object. | object, optional | ## Example @@ -308,11 +308,11 @@ This api runs the action and asynchronously returns the result of running the ac The following table describes the properties of the `options` object. -| Property | Description | Type | -| -------- | ------------------------------------------------------------------------------------ | ------ | -| id | The id of the action you want to execute. | string | -| params | The `params` value to give the action type executor. | object | -| source | The source of the execution, either an HTTP request or a reference to a Saved Object.| object, optional | +| Property | Description | Type | +| -------- | ------------------------------------------------------------------------------------- | ---------------- | +| id | The id of the action you want to execute. | string | +| params | The `params` value to give the action type executor. | object | +| source | The source of the execution, either an HTTP request or a reference to a Saved Object. | object, optional | ## Example @@ -330,7 +330,7 @@ const result = await actionsClient.execute({ }, source: asSavedObjectExecutionSource({ id: '573891ae-8c48-49cb-a197-0cd5ec34a88b', - type: 'alert' + type: 'alert', }), }); ``` @@ -620,6 +620,7 @@ The Jira action uses the [V2 API](https://developer.atlassian.com/cloud/jira/pla | issueType | The id of the issue type in Jira. | string _(optional)_ | | priority | The name of the priority in Jira. Example: `Medium`. | string _(optional)_ | | labels | An array of labels. | string[] _(optional)_ | +| parent | The parent issue id or key. Only for `Sub-task` issue types. | string _(optional)_ | | comments | The comments of the case. A comment is of the form `{ commentId: string, version: string, comment: string }` | object[] _(optional)_ | #### `subActionParams (issueTypes)` diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/api.test.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/api.test.ts index 4495c37f758ee..3948a19d40dae 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/api.test.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/api.test.ts @@ -93,6 +93,7 @@ describe('api', () => { issueType: '10006', labels: ['kibana', 'elastic'], priority: 'High', + parent: null, }, }); expect(externalService.updateIncident).not.toHaveBeenCalled(); @@ -252,6 +253,7 @@ describe('api', () => { issueType: '10006', labels: ['kibana', 'elastic'], priority: 'High', + parent: null, }, }); expect(externalService.createIncident).not.toHaveBeenCalled(); @@ -380,6 +382,36 @@ describe('api', () => { }); }); + describe('getIssues', () => { + test('it returns the issues correctly', async () => { + const res = await api.issues({ + externalService, + params: { title: 'Title test' }, + }); + expect(res).toEqual([ + { + id: '10267', + key: 'RJ-107', + title: 'Test title', + }, + ]); + }); + }); + + describe('getIssue', () => { + test('it returns the issue correctly', async () => { + const res = await api.issue({ + externalService, + params: { id: 'RJ-107' }, + }); + expect(res).toEqual({ + id: '10267', + key: 'RJ-107', + title: 'Test title', + }); + }); + }); + describe('mapping variations', () => { test('overwrite & append', async () => { mapping.set('title', { diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/api.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/api.ts index a64eb7a2036ca..559bbc047b134 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/api.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/api.ts @@ -13,8 +13,10 @@ import { Incident, GetFieldsByIssueTypeHandlerArgs, GetIssueTypesHandlerArgs, + GetIssuesHandlerArgs, PushToServiceApiParams, PushToServiceResponse, + GetIssueHandlerArgs, } from './types'; // TODO: to remove, need to support Case @@ -46,6 +48,18 @@ const getFieldsByIssueTypeHandler = async ({ return res; }; +const getIssuesHandler = async ({ externalService, params }: GetIssuesHandlerArgs) => { + const { title } = params; + const res = await externalService.getIssues(title); + return res; +}; + +const getIssueHandler = async ({ externalService, params }: GetIssueHandlerArgs) => { + const { id } = params; + const res = await externalService.getIssue(id); + return res; +}; + const pushToServiceHandler = async ({ externalService, mapping, @@ -83,8 +97,8 @@ const pushToServiceHandler = async ({ currentIncident, }); } else { - const { title, description, priority, labels, issueType } = params; - incident = { summary: title, description, priority, labels, issueType }; + const { title, description, priority, labels, issueType, parent } = params; + incident = { summary: title, description, priority, labels, issueType, parent }; } if (externalId != null) { @@ -134,4 +148,6 @@ export const api: ExternalServiceApi = { getIncident: getIncidentHandler, issueTypes: getIssueTypesHandler, fieldsByIssueType: getFieldsByIssueTypeHandler, + issues: getIssuesHandler, + issue: getIssueHandler, }; diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/index.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/index.ts index d3346557f3684..9d6ff90c33700 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/index.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/index.ts @@ -25,6 +25,8 @@ import { JiraExecutorResultData, ExecutorSubActionGetFieldsByIssueTypeParams, ExecutorSubActionGetIssueTypesParams, + ExecutorSubActionGetIssuesParams, + ExecutorSubActionGetIssueParams, } from './types'; import * as i18n from './translations'; import { Logger } from '../../../../../../src/core/server'; @@ -37,7 +39,13 @@ interface GetActionTypeParams { configurationUtilities: ActionsConfigurationUtilities; } -const supportedSubActions: string[] = ['pushToService', 'issueTypes', 'fieldsByIssueType']; +const supportedSubActions: string[] = [ + 'pushToService', + 'issueTypes', + 'fieldsByIssueType', + 'issues', + 'issue', +]; // action type definition export function getActionType( @@ -137,5 +145,21 @@ async function executor( }); } + if (subAction === 'issues') { + const getIssuesParams = subActionParams as ExecutorSubActionGetIssuesParams; + data = await api.issues({ + externalService, + params: getIssuesParams, + }); + } + + if (subAction === 'issue') { + const getIssueParams = subActionParams as ExecutorSubActionGetIssueParams; + data = await api.issue({ + externalService, + params: getIssueParams, + }); + } + return { status: 'ok', data: data ?? {}, actionId }; } diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/mocks.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/mocks.ts index 53f8d43ebc2d8..b98eda799e3aa 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/mocks.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/mocks.ts @@ -61,6 +61,18 @@ const createMock = (): jest.Mocked => { defaultValue: { name: 'Medium', id: '3' }, }, })), + getIssues: jest.fn().mockImplementation(() => [ + { + id: '10267', + key: 'RJ-107', + title: 'Test title', + }, + ]), + getIssue: jest.fn().mockImplementation(() => ({ + id: '10267', + key: 'RJ-107', + title: 'Test title', + })), }; service.createComment.mockImplementationOnce(() => @@ -120,6 +132,7 @@ const executorParams: ExecutorSubActionPushParams = { labels: ['kibana', 'elastic'], priority: 'High', issueType: '10006', + parent: null, comments: [ { commentId: 'case-comment-1', diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/schema.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/schema.ts index 9fee465e72efc..4c31691280c2c 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/schema.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/schema.ts @@ -44,6 +44,7 @@ export const ExecutorSubActionPushParamsSchema = schema.object({ issueType: schema.nullable(schema.string()), priority: schema.nullable(schema.string()), labels: schema.nullable(schema.arrayOf(schema.string())), + parent: schema.nullable(schema.string()), // TODO: modify later to string[] - need for support Case schema comments: schema.nullable(schema.arrayOf(CommentSchema)), ...EntityInformation, @@ -60,6 +61,8 @@ export const ExecutorSubActionGetIssueTypesParamsSchema = schema.object({}); export const ExecutorSubActionGetFieldsByIssueTypeParamsSchema = schema.object({ id: schema.string(), }); +export const ExecutorSubActionGetIssuesParamsSchema = schema.object({ title: schema.string() }); +export const ExecutorSubActionGetIssueParamsSchema = schema.object({ id: schema.string() }); export const ExecutorParamsSchema = schema.oneOf([ schema.object({ @@ -82,4 +85,12 @@ export const ExecutorParamsSchema = schema.oneOf([ subAction: schema.literal('fieldsByIssueType'), subActionParams: ExecutorSubActionGetFieldsByIssueTypeParamsSchema, }), + schema.object({ + subAction: schema.literal('issues'), + subActionParams: ExecutorSubActionGetIssuesParamsSchema, + }), + schema.object({ + subAction: schema.literal('issue'), + subActionParams: ExecutorSubActionGetIssueParamsSchema, + }), ]); diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts index 2439c507c3328..605c05e2a9f25 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts @@ -95,6 +95,14 @@ const fieldsResponse = { }, }; +const issueResponse = { + id: '10267', + key: 'RJ-107', + fields: { summary: 'Test title' }, +}; + +const issuesResponse = [issueResponse]; + describe('Jira service', () => { let service: ExternalService; @@ -219,6 +227,7 @@ describe('Jira service', () => { labels: [], issueType: '10006', priority: 'High', + parent: null, }, }); @@ -264,6 +273,7 @@ describe('Jira service', () => { labels: [], priority: 'High', issueType: null, + parent: null, }, }); @@ -308,6 +318,7 @@ describe('Jira service', () => { labels: [], issueType: '10006', priority: 'High', + parent: 'RJ-107', }, }); @@ -324,6 +335,7 @@ describe('Jira service', () => { issuetype: { id: '10006' }, labels: [], priority: { name: 'High' }, + parent: { key: 'RJ-107' }, }, }, }); @@ -344,6 +356,7 @@ describe('Jira service', () => { labels: [], issueType: '10006', priority: 'High', + parent: null, }, }) ).rejects.toThrow( @@ -370,6 +383,7 @@ describe('Jira service', () => { labels: [], issueType: '10006', priority: 'High', + parent: null, }, }); @@ -398,6 +412,7 @@ describe('Jira service', () => { labels: [], issueType: '10006', priority: 'High', + parent: 'RJ-107', }, }); @@ -414,6 +429,7 @@ describe('Jira service', () => { priority: { name: 'High' }, issuetype: { id: '10006' }, project: { key: 'CK' }, + parent: { key: 'RJ-107' }, }, }, }); @@ -435,6 +451,7 @@ describe('Jira service', () => { labels: [], issueType: '10006', priority: 'High', + parent: null, }, }) ).rejects.toThrow( @@ -916,4 +933,96 @@ describe('Jira service', () => { }); }); }); + + describe('getIssues', () => { + test('it should return the issues', async () => { + requestMock.mockImplementation(() => ({ + data: { + issues: issuesResponse, + }, + })); + + const res = await service.getIssues('Test title'); + + expect(res).toEqual([ + { + id: '10267', + key: 'RJ-107', + title: 'Test title', + }, + ]); + }); + + test('it should call request with correct arguments', async () => { + requestMock.mockImplementation(() => ({ + data: { + issues: issuesResponse, + }, + })); + + await service.getIssues('Test title'); + expect(requestMock).toHaveBeenLastCalledWith({ + axios, + logger, + method: 'get', + url: `https://siem-kibana.atlassian.net/rest/api/2/search?jql=project=CK and summary ~"Test title"`, + }); + }); + + test('it should throw an error', async () => { + requestMock.mockImplementation(() => { + const error: ResponseError = new Error('An error has occurred'); + error.response = { data: { errors: { issuetypes: 'Could not get issue types' } } }; + throw error; + }); + + expect(service.getIssues('Test title')).rejects.toThrow( + '[Action][Jira]: Unable to get issues. Error: An error has occurred. Reason: Could not get issue types' + ); + }); + }); + + describe('getIssue', () => { + test('it should return a single issue', async () => { + requestMock.mockImplementation(() => ({ + data: issueResponse, + })); + + const res = await service.getIssue('RJ-107'); + + expect(res).toEqual({ + id: '10267', + key: 'RJ-107', + title: 'Test title', + }); + }); + + test('it should call request with correct arguments', async () => { + requestMock.mockImplementation(() => ({ + data: { + issues: issuesResponse, + }, + })); + + await service.getIssue('RJ-107'); + expect(requestMock).toHaveBeenLastCalledWith({ + axios, + logger, + method: 'get', + url: `https://siem-kibana.atlassian.net/rest/api/2/issue/RJ-107`, + }); + }); + + test('it should throw an error', async () => { + requestMock.mockImplementation(() => { + const error: ResponseError = new Error('An error has occurred'); + error.response = { data: { errors: { issuetypes: 'Could not get issue types' } } }; + throw error; + }); + + expect(service.getIssue('RJ-107')).rejects.toThrow( + '[Action][Jira]: Unable to get issue with id RJ-107. Error: An error has occurred. Reason: Could not get issue types' + ); + }); + }); }); diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts index 84b6e70d2a100..7429c3d36d7b0 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts @@ -53,6 +53,8 @@ export const createExternalService = ( const getIssueTypeFieldsOldAPIURL = `${url}/${BASE_URL}/issue/createmeta?projectKeys=${projectKey}&issuetypeIds={issueTypeId}&expand=projects.issuetypes.fields`; const getIssueTypesUrl = `${url}/${BASE_URL}/issue/createmeta/${projectKey}/issuetypes`; const getIssueTypeFieldsUrl = `${url}/${BASE_URL}/issue/createmeta/${projectKey}/issuetypes/{issueTypeId}`; + const searchUrl = `${url}/${BASE_URL}/search`; + const axiosInstance = axios.create({ auth: { username: email, password: apiToken }, }); @@ -90,6 +92,10 @@ export const createExternalService = ( fields = { ...fields, priority: { name: incident.priority } }; } + if (incident.parent) { + fields = { ...fields, parent: { key: incident.parent } }; + } + return fields; }; @@ -119,6 +125,17 @@ export const createExternalService = ( }; }, {}); + const normalizeSearchResults = ( + issues: Array<{ id: string; key: string; fields: { summary: string } }> + ) => + issues.map((issue) => ({ id: issue.id, key: issue.key, title: issue.fields?.summary ?? null })); + + const normalizeIssue = (issue: { id: string; key: string; fields: { summary: string } }) => ({ + id: issue.id, + key: issue.key, + title: issue.fields?.summary ?? null, + }); + const getIncident = async (id: string) => { try { const res = await request({ @@ -378,6 +395,54 @@ export const createExternalService = ( } }; + const getIssues = async (title: string) => { + const query = `${searchUrl}?jql=project=${projectKey} and summary ~"${title}"`; + try { + const res = await request({ + axios: axiosInstance, + method: 'get', + url: query, + logger, + proxySettings, + }); + + return normalizeSearchResults(res.data?.issues ?? []); + } catch (error) { + throw new Error( + getErrorMessage( + i18n.NAME, + `Unable to get issues. Error: ${error.message}. Reason: ${createErrorMessage( + error.response?.data?.errors ?? {} + )}` + ) + ); + } + }; + + const getIssue = async (id: string) => { + const getIssueUrl = `${incidentUrl}/${id}`; + try { + const res = await request({ + axios: axiosInstance, + method: 'get', + url: getIssueUrl, + logger, + proxySettings, + }); + + return normalizeIssue(res.data ?? {}); + } catch (error) { + throw new Error( + getErrorMessage( + i18n.NAME, + `Unable to get issue with id ${id}. Error: ${error.message}. Reason: ${createErrorMessage( + error.response?.data?.errors ?? {} + )}` + ) + ); + } + }; + return { getIncident, createIncident, @@ -386,5 +451,7 @@ export const createExternalService = ( getCapabilities, getIssueTypes, getFieldsByIssueType, + getIssues, + getIssue, }; }; diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/types.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/types.ts index 6fe7c62976f22..050ec195d74c1 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/types.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/types.ts @@ -17,6 +17,8 @@ import { ExecutorSubActionGetCapabilitiesParamsSchema, ExecutorSubActionGetIssueTypesParamsSchema, ExecutorSubActionGetFieldsByIssueTypeParamsSchema, + ExecutorSubActionGetIssuesParamsSchema, + ExecutorSubActionGetIssueParamsSchema, } from './schema'; import { ActionsConfigurationUtilities } from '../../actions_config'; import { IncidentConfigurationSchema } from '../case/schema'; @@ -60,7 +62,7 @@ export type ExternalServiceParams = Record; export type Incident = Pick< ExecutorSubActionPushParams, - 'description' | 'priority' | 'labels' | 'issueType' + 'description' | 'priority' | 'labels' | 'issueType' | 'parent' > & { summary: string }; export interface CreateIncidentParams { @@ -83,6 +85,13 @@ export type GetFieldsByIssueTypeResponse = Record< { allowedValues: Array<{}>; defaultValue: {} } >; +export type GetIssuesResponse = Array<{ id: string; key: string; title: string }>; +export interface GetIssueResponse { + id: string; + key: string; + title: string; +} + export interface ExternalService { getIncident: (id: string) => Promise; createIncident: (params: CreateIncidentParams) => Promise; @@ -91,6 +100,8 @@ export interface ExternalService { getCapabilities: () => Promise; getIssueTypes: () => Promise; getFieldsByIssueType: (issueTypeId: string) => Promise; + getIssues: (title: string) => Promise; + getIssue: (id: string) => Promise; } export interface PushToServiceApiParams extends ExecutorSubActionPushParams { @@ -117,6 +128,12 @@ export type ExecutorSubActionGetFieldsByIssueTypeParams = TypeOf< typeof ExecutorSubActionGetFieldsByIssueTypeParamsSchema >; +export type ExecutorSubActionGetIssuesParams = TypeOf< + typeof ExecutorSubActionGetIssuesParamsSchema +>; + +export type ExecutorSubActionGetIssueParams = TypeOf; + export interface ExternalServiceApiHandlerArgs { externalService: ExternalService; mapping: Map | null; @@ -149,6 +166,16 @@ export interface PushToServiceResponse extends ExternalServiceIncidentResponse { comments?: ExternalServiceCommentResponse[]; } +export interface GetIssuesHandlerArgs { + externalService: ExternalService; + params: ExecutorSubActionGetIssuesParams; +} + +export interface GetIssueHandlerArgs { + externalService: ExternalService; + params: ExecutorSubActionGetIssueParams; +} + export interface ExternalServiceApi { handshake: (args: HandshakeApiHandlerArgs) => Promise; pushToService: (args: PushToServiceApiHandlerArgs) => Promise; @@ -157,12 +184,16 @@ export interface ExternalServiceApi { fieldsByIssueType: ( args: GetFieldsByIssueTypeHandlerArgs ) => Promise; + issues: (args: GetIssuesHandlerArgs) => Promise; + issue: (args: GetIssueHandlerArgs) => Promise; } export type JiraExecutorResultData = | PushToServiceResponse | GetIssueTypesResponse - | GetFieldsByIssueTypeResponse; + | GetFieldsByIssueTypeResponse + | GetIssuesResponse + | GetIssueResponse; export interface Fields { [key: string]: string | string[] | { name: string } | { key: string } | { id: string }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts index 86893e5b87ddf..bc9fee042a9a6 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts @@ -42,3 +42,41 @@ export async function getFieldsByIssueType({ signal, }); } + +export async function getIssues({ + http, + signal, + connectorId, + title, +}: { + http: HttpSetup; + signal: AbortSignal; + connectorId: string; + title: string; +}): Promise> { + return await http.post(`${BASE_ACTION_API_PATH}/action/${connectorId}/_execute`, { + body: JSON.stringify({ + params: { subAction: 'issues', subActionParams: { title } }, + }), + signal, + }); +} + +export async function getIssue({ + http, + signal, + connectorId, + id, +}: { + http: HttpSetup; + signal: AbortSignal; + connectorId: string; + id: string; +}): Promise> { + return await http.post(`${BASE_ACTION_API_PATH}/action/${connectorId}/_execute`, { + body: JSON.stringify({ + params: { subAction: 'getIncident', subActionParams: { id } }, + }), + signal, + }); +} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx index d96657f8ca407..416f6f7b18755 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx @@ -31,8 +31,10 @@ const actionParams = { priority: 'High', savedObjectId: '123', externalId: null, + parent: null, }, }; + const connector = { secrets: {}, config: {}, @@ -237,5 +239,6 @@ describe('JiraParamsFields renders', () => { expect(wrapper.find('[data-test-subj="prioritySelect"]').exists()).toBeFalsy(); expect(wrapper.find('[data-test-subj="descriptionTextArea"]').exists()).toBeFalsy(); expect(wrapper.find('[data-test-subj="labelsComboBox"]').exists()).toBeFalsy(); + expect(wrapper.find('[data-test-subj="search-parent-issues"]').exists()).toBeFalsy(); }); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx index b457dcc60a43f..c19d2c4048665 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx @@ -19,6 +19,7 @@ import { TextFieldWithMessageVariables } from '../../text_field_with_message_var import { JiraActionParams } from './types'; import { useGetIssueTypes } from './use_get_issue_types'; import { useGetFieldsByIssueType } from './use_get_fields_by_issue_type'; +import { SearchIssues } from './search_issues'; const JiraParamsFields: React.FunctionComponent> = ({ actionParams, @@ -30,7 +31,7 @@ const JiraParamsFields: React.FunctionComponent { - const { title, description, comments, issueType, priority, labels, savedObjectId } = + const { title, description, comments, issueType, priority, labels, parent, savedObjectId } = actionParams.subActionParams || {}; const [issueTypesSelectOptions, setIssueTypesSelectOptions] = useState([]); @@ -62,6 +63,7 @@ const JiraParamsFields: React.FunctionComponent Object.prototype.hasOwnProperty.call(fields, 'priority'), [ fields, ]); + const hasParent = useMemo(() => Object.prototype.hasOwnProperty.call(fields, 'parent'), [fields]); useEffect(() => { const options = issueTypes.map((type) => ({ @@ -179,6 +181,34 @@ const JiraParamsFields: React.FunctionComponent + {hasParent && ( + <> + + + + { + editSubActionProperty('parent', parentIssueKey); + }} + /> + + + + + + )} <> {hasPriority && ( <> diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx new file mode 100644 index 0000000000000..fff606982677a --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx @@ -0,0 +1,104 @@ +/* + * 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, { useMemo, useEffect, useCallback, useState, memo } from 'react'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; + +import { HttpSetup, ToastsApi } from 'kibana/public'; +import { ActionConnector } from '../../../../types'; +import { useGetIssues } from './use_get_issues'; +import { useGetSingleIssue } from './use_get_single_issue'; +import * as i18n from './translations'; + +interface Props { + selectedValue: string | null; + http: HttpSetup; + toastNotifications: Pick< + ToastsApi, + 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' + >; + actionConnector?: ActionConnector; + onChange: (parentIssueKey: string) => void; +} + +const SearchIssuesComponent: React.FC = ({ + selectedValue, + http, + toastNotifications, + actionConnector, + onChange, +}) => { + const [query, setQuery] = useState(null); + const [selectedOptions, setSelectedOptions] = useState>>( + [] + ); + const [options, setOptions] = useState>>([]); + + const { isLoading: isLoadingIssues, issues } = useGetIssues({ + http, + toastNotifications, + actionConnector, + query, + }); + + const { isLoading: isLoadingSingleIssue, issue: singleIssue } = useGetSingleIssue({ + http, + toastNotifications, + actionConnector, + id: selectedValue, + }); + + useEffect(() => setOptions(issues.map((issue) => ({ label: issue.title, value: issue.key }))), [ + issues, + ]); + + useEffect(() => { + if (isLoadingSingleIssue || singleIssue == null) { + return; + } + + const singleIssueAsOptions = [{ label: singleIssue.title, value: singleIssue.key }]; + setOptions(singleIssueAsOptions); + setSelectedOptions(singleIssueAsOptions); + }, [singleIssue, isLoadingSingleIssue]); + + const onSearchChange = useCallback((searchVal: string) => { + setQuery(searchVal); + }, []); + + const onChangeComboBox = useCallback( + (changedOptions) => { + setSelectedOptions(changedOptions); + onChange(changedOptions[0].value); + }, + [onChange] + ); + + const inputPlaceholder = useMemo( + (): string => + isLoadingIssues || isLoadingSingleIssue + ? i18n.SEARCH_ISSUES_LOADING + : i18n.SEARCH_ISSUES_PLACEHOLDER, + [isLoadingIssues, isLoadingSingleIssue] + ); + + return ( + + ); +}; + +export const SearchIssues = memo(SearchIssuesComponent); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/translations.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/translations.ts index bfcb72d1cb977..2517552304d8d 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/translations.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/translations.ts @@ -131,3 +131,40 @@ export const FIELDS_API_ERROR = i18n.translate( defaultMessage: 'Unable to get fields', } ); + +export const ISSUES_API_ERROR = i18n.translate( + 'xpack.triggersActionsUI.components.builtinActionTypes.jira.unableToGetIssuesMessage', + { + defaultMessage: 'Unable to get issues', + } +); + +export const GET_ISSUE_API_ERROR = (id: string) => + i18n.translate( + 'xpack.triggersActionsUI.components.builtinActionTypes.jira.unableToGetIssueMessage', + { + defaultMessage: 'Unable to get issue with id {id}', + values: { id }, + } + ); + +export const SEARCH_ISSUES_COMBO_BOX_ARIA_LABEL = i18n.translate( + 'xpack.triggersActionsUI.components.builtinActionTypes.jira.searchIssuesComboBoxAriaLabel', + { + defaultMessage: 'Select parent issue', + } +); + +export const SEARCH_ISSUES_PLACEHOLDER = i18n.translate( + 'xpack.triggersActionsUI.components.builtinActionTypes.jira.searchIssuesComboBoxPlaceholder', + { + defaultMessage: 'Select parent issue', + } +); + +export const SEARCH_ISSUES_LOADING = i18n.translate( + 'xpack.triggersActionsUI.components.builtinActionTypes.jira.searchIssuesLoading', + { + defaultMessage: 'Loading...', + } +); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts index ff11199f35fea..4c13d067913f2 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts @@ -22,6 +22,7 @@ export interface JiraActionParams { issueType: string; priority: string; labels: string[]; + parent: string | null; }; } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx new file mode 100644 index 0000000000000..d6590b8c70939 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx @@ -0,0 +1,94 @@ +/* + * 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 { isEmpty, debounce } from 'lodash/fp'; +import { useState, useEffect, useRef } from 'react'; +import { HttpSetup, ToastsApi } from 'kibana/public'; +import { ActionConnector } from '../../../../types'; +import { getIssues } from './api'; +import * as i18n from './translations'; + +type Issues = Array<{ id: string; key: string; title: string }>; + +interface Props { + http: HttpSetup; + toastNotifications: Pick< + ToastsApi, + 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' + >; + actionConnector?: ActionConnector; + query: string | null; +} + +export interface UseGetIssues { + issues: Issues; + isLoading: boolean; +} + +export const useGetIssues = ({ + http, + actionConnector, + toastNotifications, + query, +}: Props): UseGetIssues => { + const [isLoading, setIsLoading] = useState(false); + const [issues, setIssues] = useState([]); + const abortCtrl = useRef(new AbortController()); + + useEffect(() => { + let didCancel = false; + const fetchData = debounce(500, async () => { + if (!actionConnector || isEmpty(query)) { + setIsLoading(false); + return; + } + + abortCtrl.current = new AbortController(); + setIsLoading(true); + + try { + const res = await getIssues({ + http, + signal: abortCtrl.current.signal, + connectorId: actionConnector.id, + title: query ?? '', + }); + + if (!didCancel) { + setIsLoading(false); + setIssues(res.data ?? []); + if (res.status && res.status === 'error') { + toastNotifications.addDanger({ + title: i18n.ISSUES_API_ERROR, + text: `${res.serviceMessage ?? res.message}`, + }); + } + } + } catch (error) { + if (!didCancel) { + toastNotifications.addDanger({ + title: i18n.ISSUES_API_ERROR, + text: error.message, + }); + } + } + }); + + abortCtrl.current.abort(); + fetchData(); + + return () => { + didCancel = true; + setIsLoading(false); + abortCtrl.current.abort(); + }; + }, [http, actionConnector, toastNotifications, query]); + + return { + issues, + isLoading, + }; +}; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx new file mode 100644 index 0000000000000..7df9834f1bd85 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx @@ -0,0 +1,96 @@ +/* + * 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, useEffect, useRef } from 'react'; +import { HttpSetup, ToastsApi } from 'kibana/public'; +import { ActionConnector } from '../../../../types'; +import { getIssue } from './api'; +import * as i18n from './translations'; + +interface Issue { + id: string; + key: string; + title: string; +} + +interface Props { + http: HttpSetup; + toastNotifications: Pick< + ToastsApi, + 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' + >; + id: string | null; + actionConnector?: ActionConnector; +} + +export interface UseGetSingleIssue { + issue: Issue | null; + isLoading: boolean; +} + +export const useGetSingleIssue = ({ + http, + toastNotifications, + actionConnector, + id, +}: Props): UseGetSingleIssue => { + const [isLoading, setIsLoading] = useState(false); + const [issue, setIssue] = useState(null); + const abortCtrl = useRef(new AbortController()); + + useEffect(() => { + let didCancel = false; + const fetchData = async () => { + if (!actionConnector || !id) { + setIsLoading(false); + return; + } + + abortCtrl.current = new AbortController(); + setIsLoading(true); + try { + const res = await getIssue({ + http, + signal: abortCtrl.current.signal, + connectorId: actionConnector.id, + id, + }); + + if (!didCancel) { + setIsLoading(false); + setIssue(res.data ?? {}); + if (res.status && res.status === 'error') { + toastNotifications.addDanger({ + title: i18n.GET_ISSUE_API_ERROR(id), + text: `${res.serviceMessage ?? res.message}`, + }); + } + } + } catch (error) { + if (!didCancel) { + toastNotifications.addDanger({ + title: i18n.GET_ISSUE_API_ERROR(id), + text: error.message, + }); + } + } + }; + + abortCtrl.current.abort(); + fetchData(); + + return () => { + didCancel = true; + setIsLoading(false); + abortCtrl.current.abort(); + }; + }, [http, actionConnector, id, toastNotifications]); + + return { + isLoading, + issue, + }; +}; diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/jira.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/jira.ts index 84fad699525a9..1a56a9dfcb4db 100644 --- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/jira.ts +++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/jira.ts @@ -333,7 +333,7 @@ export default function jiraTest({ getService }: FtrProviderContext) { status: 'error', retry: false, message: - 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subAction]: expected value to equal [pushToService]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]', + 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subAction]: expected value to equal [pushToService]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]\n- [5.subAction]: expected value to equal [issues]\n- [6.subAction]: expected value to equal [issue]', }); }); }); @@ -351,7 +351,7 @@ export default function jiraTest({ getService }: FtrProviderContext) { status: 'error', retry: false, message: - 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.savedObjectId]: expected value of type [string] but got [undefined]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]', + 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.savedObjectId]: expected value of type [string] but got [undefined]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]\n- [5.subAction]: expected value to equal [issues]\n- [6.subAction]: expected value to equal [issue]', }); }); }); @@ -369,7 +369,7 @@ export default function jiraTest({ getService }: FtrProviderContext) { status: 'error', retry: false, message: - 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.savedObjectId]: expected value of type [string] but got [undefined]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]', + 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.savedObjectId]: expected value of type [string] but got [undefined]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]\n- [5.subAction]: expected value to equal [issues]\n- [6.subAction]: expected value to equal [issue]', }); }); }); @@ -392,7 +392,7 @@ export default function jiraTest({ getService }: FtrProviderContext) { status: 'error', retry: false, message: - 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.title]: expected value of type [string] but got [undefined]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]', + 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.title]: expected value of type [string] but got [undefined]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]\n- [5.subAction]: expected value to equal [issues]\n- [6.subAction]: expected value to equal [issue]', }); }); }); @@ -420,7 +420,7 @@ export default function jiraTest({ getService }: FtrProviderContext) { status: 'error', retry: false, message: - 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.comments]: types that failed validation:\n - [subActionParams.comments.0.0.commentId]: expected value of type [string] but got [undefined]\n - [subActionParams.comments.1]: expected value to equal [null]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]', + 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.comments]: types that failed validation:\n - [subActionParams.comments.0.0.commentId]: expected value of type [string] but got [undefined]\n - [subActionParams.comments.1]: expected value to equal [null]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]\n- [5.subAction]: expected value to equal [issues]\n- [6.subAction]: expected value to equal [issue]', }); }); }); @@ -448,7 +448,7 @@ export default function jiraTest({ getService }: FtrProviderContext) { status: 'error', retry: false, message: - 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.comments]: types that failed validation:\n - [subActionParams.comments.0.0.comment]: expected value of type [string] but got [undefined]\n - [subActionParams.comments.1]: expected value to equal [null]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]', + 'error validating action params: types that failed validation:\n- [0.subAction]: expected value to equal [getIncident]\n- [1.subAction]: expected value to equal [handshake]\n- [2.subActionParams.comments]: types that failed validation:\n - [subActionParams.comments.0.0.comment]: expected value of type [string] but got [undefined]\n - [subActionParams.comments.1]: expected value to equal [null]\n- [3.subAction]: expected value to equal [issueTypes]\n- [4.subAction]: expected value to equal [fieldsByIssueType]\n- [5.subAction]: expected value to equal [issues]\n- [6.subAction]: expected value to equal [issue]', }); }); }); From 4c9a7bdf4872b6cb73e4bf8524bab0816279cdb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Thu, 1 Oct 2020 08:22:51 +0100 Subject: [PATCH 05/39] [Usage Collection] [schema] `ui_metric` (#78827) --- .telemetryrc.json | 3 +- .../server/collectors/ui_metric/schema.ts | 103 +++ .../telemetry_ui_metric_collector.ts | 13 +- src/plugins/telemetry/schema/oss_plugins.json | 745 ++++++++++++++++++ 4 files changed, 860 insertions(+), 4 deletions(-) create mode 100644 src/plugins/kibana_usage_collection/server/collectors/ui_metric/schema.ts diff --git a/.telemetryrc.json b/.telemetryrc.json index d3446b45033ee..3d1b0df1d8f93 100644 --- a/.telemetryrc.json +++ b/.telemetryrc.json @@ -5,8 +5,7 @@ "exclude": [ "src/plugins/kibana_react/", "src/plugins/testbed/", - "src/plugins/kibana_utils/", - "src/plugins/kibana_usage_collection/server/collectors/ui_metric/telemetry_ui_metric_collector.ts" + "src/plugins/kibana_utils/" ] } ] diff --git a/src/plugins/kibana_usage_collection/server/collectors/ui_metric/schema.ts b/src/plugins/kibana_usage_collection/server/collectors/ui_metric/schema.ts new file mode 100644 index 0000000000000..53bb1f9b93949 --- /dev/null +++ b/src/plugins/kibana_usage_collection/server/collectors/ui_metric/schema.ts @@ -0,0 +1,103 @@ +/* + * 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. + */ +import { MakeSchemaFrom } from 'src/plugins/usage_collection/server'; +import { UIMetricUsage } from './telemetry_ui_metric_collector'; + +const commonSchema: MakeSchemaFrom[string] = { + type: 'array', + items: { + key: { type: 'keyword' }, + value: { type: 'long' }, + }, +}; + +// TODO: Find a way to retrieve it automatically +// plugin `data` registers all UI Metric for each appId where searches are performed (keys below are copy-pasted from application_usage) +const uiMetricFromDataPluginSchema: MakeSchemaFrom = { + // OSS + dashboards: commonSchema, + dev_tools: commonSchema, + discover: commonSchema, + home: commonSchema, + kibana: commonSchema, // It's a forward app so we'll likely never report it + management: commonSchema, + short_url_redirect: commonSchema, // It's a forward app so we'll likely never report it + timelion: commonSchema, + visualize: commonSchema, + + // X-Pack + apm: commonSchema, + csm: commonSchema, + canvas: commonSchema, + dashboard_mode: commonSchema, // It's a forward app so we'll likely never report it + enterpriseSearch: commonSchema, + appSearch: commonSchema, + workplaceSearch: commonSchema, + graph: commonSchema, + logs: commonSchema, + metrics: commonSchema, + infra: commonSchema, // It's a forward app so we'll likely never report it + ingestManager: commonSchema, + lens: commonSchema, + maps: commonSchema, + ml: commonSchema, + monitoring: commonSchema, + 'observability-overview': commonSchema, + security_account: commonSchema, + security_access_agreement: commonSchema, + security_capture_url: commonSchema, // It's a forward app so we'll likely never report it + security_logged_out: commonSchema, + security_login: commonSchema, + security_logout: commonSchema, + security_overwritten_session: commonSchema, + securitySolution: commonSchema, + 'securitySolution:overview': commonSchema, + 'securitySolution:detections': commonSchema, + 'securitySolution:hosts': commonSchema, + 'securitySolution:network': commonSchema, + 'securitySolution:timelines': commonSchema, + 'securitySolution:case': commonSchema, + 'securitySolution:administration': commonSchema, + siem: commonSchema, + space_selector: commonSchema, + uptime: commonSchema, +}; + +// TODO: Find a way to retrieve it automatically +// Searching `reportUiStats` across Kibana +export const uiMetricSchema: MakeSchemaFrom = { + console: commonSchema, + DashboardPanelVersionInUrl: commonSchema, + Kibana_home: commonSchema, // eslint-disable-line @typescript-eslint/naming-convention + visualize: commonSchema, + canvas: commonSchema, + cross_cluster_replication: commonSchema, + index_lifecycle_management: commonSchema, + index_management: commonSchema, + ingest_pipelines: commonSchema, + apm: commonSchema, + infra_logs: commonSchema, + infra_metrics: commonSchema, + stack_monitoring: commonSchema, + remote_clusters: commonSchema, + rollup_jobs: commonSchema, + securitySolution: commonSchema, + snapshot_restore: commonSchema, + ...uiMetricFromDataPluginSchema, +}; diff --git a/src/plugins/kibana_usage_collection/server/collectors/ui_metric/telemetry_ui_metric_collector.ts b/src/plugins/kibana_usage_collection/server/collectors/ui_metric/telemetry_ui_metric_collector.ts index 9c02a9cbf3204..4cae892d30b5d 100644 --- a/src/plugins/kibana_usage_collection/server/collectors/ui_metric/telemetry_ui_metric_collector.ts +++ b/src/plugins/kibana_usage_collection/server/collectors/ui_metric/telemetry_ui_metric_collector.ts @@ -23,11 +23,19 @@ import { SavedObjectsServiceSetup, } from 'kibana/server'; import { UsageCollectionSetup } from 'src/plugins/usage_collection/server'; +import { uiMetricSchema } from './schema'; interface UIMetricsSavedObjects extends SavedObjectAttributes { count: number; } +interface UIMetricElement { + key: string; + value: number; +} + +export type UIMetricUsage = Record; + export function registerUiMetricUsageCollector( usageCollection: UsageCollectionSetup, registerType: SavedObjectsServiceSetup['registerType'], @@ -46,8 +54,9 @@ export function registerUiMetricUsageCollector( }, }); - const collector = usageCollection.makeUsageCollector({ + const collector = usageCollection.makeUsageCollector({ type: 'ui_metric', + schema: uiMetricSchema, fetch: async () => { const savedObjectsClient = getSavedObjectsClient(); if (typeof savedObjectsClient === 'undefined') { @@ -73,7 +82,7 @@ export function registerUiMetricUsageCollector( ...accum, [appName]: [...(accum[appName] || []), pair], }; - }, {} as Record>); + }, {} as UIMetricUsage); return uiMetricsByAppName; }, diff --git a/src/plugins/telemetry/schema/oss_plugins.json b/src/plugins/telemetry/schema/oss_plugins.json index 6531262b6f1da..1f474dcbb8ff4 100644 --- a/src/plugins/telemetry/schema/oss_plugins.json +++ b/src/plugins/telemetry/schema/oss_plugins.json @@ -1623,6 +1623,751 @@ } } }, + "ui_metric": { + "properties": { + "console": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "DashboardPanelVersionInUrl": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "Kibana_home": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "visualize": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "canvas": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "cross_cluster_replication": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "index_lifecycle_management": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "index_management": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "ingest_pipelines": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "apm": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "infra_logs": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "infra_metrics": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "stack_monitoring": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "remote_clusters": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "rollup_jobs": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "snapshot_restore": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "dashboards": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "dev_tools": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "discover": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "home": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "kibana": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "management": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "short_url_redirect": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "timelion": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "csm": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "dashboard_mode": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "enterpriseSearch": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "appSearch": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "workplaceSearch": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "graph": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "logs": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "metrics": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "infra": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "ingestManager": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "lens": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "maps": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "ml": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "monitoring": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "observability-overview": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "security_account": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "security_access_agreement": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "security_capture_url": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "security_logged_out": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "security_login": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "security_logout": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "security_overwritten_session": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution:overview": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution:detections": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution:hosts": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution:network": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution:timelines": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution:case": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "securitySolution:administration": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "siem": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "space_selector": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + }, + "uptime": { + "type": "array", + "items": { + "properties": { + "key": { + "type": "keyword" + }, + "value": { + "type": "long" + } + } + } + } + } + }, "telemetry": { "properties": { "opt_in_status": { From 9fdb23769bbe8ac621df7e335a55d4a91e74465d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Thu, 1 Oct 2020 08:25:05 +0100 Subject: [PATCH 06/39] [Loggers] Rename "telemetry" to "usage" (#78130) Co-authored-by: Elastic Machine --- .../home/server/services/sample_data/sample_data_registry.ts | 2 +- x-pack/plugins/actions/server/plugin.ts | 2 +- x-pack/plugins/alerts/server/plugin.ts | 2 +- x-pack/plugins/lens/server/plugin.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/home/server/services/sample_data/sample_data_registry.ts b/src/plugins/home/server/services/sample_data/sample_data_registry.ts index 356c886436413..c9e65b292a00d 100644 --- a/src/plugins/home/server/services/sample_data/sample_data_registry.ts +++ b/src/plugins/home/server/services/sample_data/sample_data_registry.ts @@ -52,7 +52,7 @@ export class SampleDataRegistry { } const usageTracker = usage( core.getStartServices().then(([coreStart]) => coreStart.savedObjects), - this.initContext.logger.get('sample_data', 'telemetry') + this.initContext.logger.get('sample_data', 'usage') ); const router = core.http.createRouter(); createListRoute(router, this.sampleDatasets); diff --git a/x-pack/plugins/actions/server/plugin.ts b/x-pack/plugins/actions/server/plugin.ts index dca1114f0ae44..1a15a5a815195 100644 --- a/x-pack/plugins/actions/server/plugin.ts +++ b/x-pack/plugins/actions/server/plugin.ts @@ -151,7 +151,7 @@ export class ActionsPlugin implements Plugin, Plugi .toPromise(); this.logger = initContext.logger.get('actions'); - this.telemetryLogger = initContext.logger.get('telemetry'); + this.telemetryLogger = initContext.logger.get('usage'); this.preconfiguredActions = []; } diff --git a/x-pack/plugins/alerts/server/plugin.ts b/x-pack/plugins/alerts/server/plugin.ts index 8f09d55c9a0e0..e9caf4b78e627 100644 --- a/x-pack/plugins/alerts/server/plugin.ts +++ b/x-pack/plugins/alerts/server/plugin.ts @@ -117,7 +117,7 @@ export class AlertingPlugin { this.logger = initializerContext.logger.get('plugins', 'alerting'); this.taskRunnerFactory = new TaskRunnerFactory(); this.alertsClientFactory = new AlertsClientFactory(); - this.telemetryLogger = initializerContext.logger.get('telemetry'); + this.telemetryLogger = initializerContext.logger.get('usage'); this.kibanaIndex = initializerContext.config.legacy.globalConfig$ .pipe( first(), diff --git a/x-pack/plugins/lens/server/plugin.tsx b/x-pack/plugins/lens/server/plugin.tsx index 3611658fbbcd9..b801d30f5ba9b 100644 --- a/x-pack/plugins/lens/server/plugin.tsx +++ b/x-pack/plugins/lens/server/plugin.tsx @@ -31,7 +31,7 @@ export class LensServerPlugin implements Plugin<{}, {}, {}, {}> { constructor(initializerContext: PluginInitializerContext) { this.kibanaIndexConfig = initializerContext.config.legacy.globalConfig$; - this.telemetryLogger = initializerContext.logger.get('telemetry'); + this.telemetryLogger = initializerContext.logger.get('usage'); } setup(core: CoreSetup, plugins: PluginSetupContract) { setupSavedObjects(core); From 65cf6393c770af89567685980313e464e69745d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Thu, 1 Oct 2020 08:26:14 +0100 Subject: [PATCH 07/39] [Task names in TaskManager] Rename "telemetry" to "usage" (#78129) * [Task names in TaskManager] Rename "telemetry" to "usage" * Revert task IDs but leaving renamed titles Co-authored-by: Elastic Machine --- x-pack/plugins/actions/server/usage/task.ts | 2 +- x-pack/plugins/alerts/server/usage/task.ts | 2 +- x-pack/plugins/apm/server/lib/apm_telemetry/index.ts | 2 +- x-pack/plugins/lens/server/usage/task.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/actions/server/usage/task.ts b/x-pack/plugins/actions/server/usage/task.ts index 050f0021a32c1..efa695cdc2667 100644 --- a/x-pack/plugins/actions/server/usage/task.ts +++ b/x-pack/plugins/actions/server/usage/task.ts @@ -38,7 +38,7 @@ function registerActionsTelemetryTask( ) { taskManager.registerTaskDefinitions({ [TELEMETRY_TASK_TYPE]: { - title: 'Actions telemetry fetch task', + title: 'Actions usage fetch task', type: TELEMETRY_TASK_TYPE, timeout: '5m', createTaskRunner: telemetryTaskRunner(logger, core, kibanaIndex), diff --git a/x-pack/plugins/alerts/server/usage/task.ts b/x-pack/plugins/alerts/server/usage/task.ts index 5909351321385..daf3ac246adad 100644 --- a/x-pack/plugins/alerts/server/usage/task.ts +++ b/x-pack/plugins/alerts/server/usage/task.ts @@ -41,7 +41,7 @@ function registerAlertingTelemetryTask( ) { taskManager.registerTaskDefinitions({ [TELEMETRY_TASK_TYPE]: { - title: 'Alerting telemetry fetch task', + title: 'Alerting usage fetch task', type: TELEMETRY_TASK_TYPE, timeout: '5m', createTaskRunner: telemetryTaskRunner(logger, core, kibanaIndex), diff --git a/x-pack/plugins/apm/server/lib/apm_telemetry/index.ts b/x-pack/plugins/apm/server/lib/apm_telemetry/index.ts index 3463865d326b0..f78280aa7428e 100644 --- a/x-pack/plugins/apm/server/lib/apm_telemetry/index.ts +++ b/x-pack/plugins/apm/server/lib/apm_telemetry/index.ts @@ -49,7 +49,7 @@ export async function createApmTelemetry({ }) { taskManager.registerTaskDefinitions({ [APM_TELEMETRY_TASK_NAME]: { - title: 'Collect APM telemetry', + title: 'Collect APM usage', type: APM_TELEMETRY_TASK_NAME, createTaskRunner: () => { return { diff --git a/x-pack/plugins/lens/server/usage/task.ts b/x-pack/plugins/lens/server/usage/task.ts index edc5a778749af..9fee72b59b44c 100644 --- a/x-pack/plugins/lens/server/usage/task.ts +++ b/x-pack/plugins/lens/server/usage/task.ts @@ -47,7 +47,7 @@ function registerLensTelemetryTask( ) { taskManager.registerTaskDefinitions({ [TELEMETRY_TASK_TYPE]: { - title: 'Lens telemetry fetch task', + title: 'Lens usage fetch task', type: TELEMETRY_TASK_TYPE, timeout: '1m', createTaskRunner: telemetryTaskRunner(logger, core, config), From ad134b296b4fd1f62f93f6719caec7d83b256dcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cau=C3=AA=20Marcondes?= <55978943+cauemarcondes@users.noreply.github.com> Date: Thu, 1 Oct 2020 08:42:23 +0100 Subject: [PATCH 08/39] fixing api test (#78964) --- .../tests/transaction_groups/distribution.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/x-pack/test/apm_api_integration/basic/tests/transaction_groups/distribution.ts b/x-pack/test/apm_api_integration/basic/tests/transaction_groups/distribution.ts index bd669600afc14..c72d48094ca8d 100644 --- a/x-pack/test/apm_api_integration/basic/tests/transaction_groups/distribution.ts +++ b/x-pack/test/apm_api_integration/basic/tests/transaction_groups/distribution.ts @@ -37,8 +37,7 @@ export default function ApiTest({ getService }: FtrProviderContext) { }); }); - // SKIP FAILING TEST to unblock CI: https://github.com/elastic/kibana/issues/78942 - describe.skip('when data is loaded', () => { + describe('when data is loaded', () => { let response: any; before(async () => { await esArchiver.load(archiveName); @@ -61,7 +60,7 @@ export default function ApiTest({ getService }: FtrProviderContext) { }); it('returns the correct number of buckets', () => { - expectSnapshot(response.body.buckets.length).toMatchInline(`19`); + expectSnapshot(response.body.buckets.length).toMatchInline(`45`); }); it('returns the correct bucket size', () => { @@ -73,18 +72,14 @@ export default function ApiTest({ getService }: FtrProviderContext) { (bucket: any) => !isEmpty(bucket.samples) ); - expectSnapshot(bucketWithSamples.count).toMatchInline(`2`); + expectSnapshot(bucketWithSamples.count).toMatchInline(`1`); expectSnapshot(bucketWithSamples.samples.sort((sample: any) => sample.traceId)) .toMatchInline(` Array [ Object { - "traceId": "a1333547d1257c636154290cddd38c3a", - "transactionId": "3e656b390989133d", - }, - Object { - "traceId": "c799c34f4ee2b0f9998745ea7354d599", - "transactionId": "69b6251b239abb46", + "traceId": "3dd90c5c2035f5bcb2728a34cb48d796", + "transactionId": "69f3ff7d35056f63", }, ] `); From 4bd0d3bf8724db1e197eb8ff7604c24a9cd7a662 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Thu, 1 Oct 2020 10:54:37 +0300 Subject: [PATCH 09/39] [TSVB] Request validation error: [panels.0.series.0.metrics.0.percentiles.1.value] (#79009) Closes: #79006 --- src/plugins/vis_type_timeseries/common/vis_schema.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/vis_type_timeseries/common/vis_schema.ts b/src/plugins/vis_type_timeseries/common/vis_schema.ts index d3d863df8617f..b33215934c5df 100644 --- a/src/plugins/vis_type_timeseries/common/vis_schema.ts +++ b/src/plugins/vis_type_timeseries/common/vis_schema.ts @@ -111,7 +111,7 @@ export const metricsItems = schema.object({ field: stringOptionalNullable, mode: schema.oneOf([schema.literal('line'), schema.literal('band')]), shade: schema.oneOf([numberOptional, stringOptionalNullable]), - value: schema.oneOf([numberOptional, stringOptionalNullable]), + value: schema.maybe(schema.oneOf([numberOptional, stringOptionalNullable])), percentile: stringOptionalNullable, }) ) From 09226db99c8823a0fec5fe5fa87e33909f95621a Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 1 Oct 2020 10:56:17 +0300 Subject: [PATCH 10/39] Data plugin README (#78750) * data readme * Delete old readme (other folders don't have a README of their own. * generate asciidoc * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update README.md * Update plugin-list.asciidoc * gen plugin list * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/data/README.md Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> Co-authored-by: Elastic Machine Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> --- docs/developer/plugin-list.asciidoc | 2 +- src/plugins/data/README.md | 140 ++++++++++++++++++++++- src/plugins/data/public/search/README.md | 23 ---- 3 files changed, 135 insertions(+), 30 deletions(-) delete mode 100644 src/plugins/data/public/search/README.md diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index e314e55c34085..ed58e77427d47 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/docs/developer/plugin-list.asciidoc @@ -48,7 +48,7 @@ NOTE: |{kib-repo}blob/{branch}/src/plugins/data/README.md[data] -|data plugin provides common data access services. +|The data plugin provides common data access services, such as search and query, for solutions and application developers. |{kib-repo}blob/{branch}/src/plugins/dev_tools/README.md[devTools] diff --git a/src/plugins/data/README.md b/src/plugins/data/README.md index da0b71122fd9e..33c07078c5348 100644 --- a/src/plugins/data/README.md +++ b/src/plugins/data/README.md @@ -1,9 +1,137 @@ # data -`data` plugin provides common data access services. +The data plugin provides common data access services, such as `search` and `query`, for solutions and application developers. -- `expressions` — run pipeline functions and render results. -- `filter` -- `index_patterns` -- `query` -- `search`: Elasticsearch API service and strategies \ No newline at end of file +## Autocomplete + +The autocomplete service provides suggestions for field names and values. + +It is wired into the `TopNavMenu` component, but can be used independently. + +### Fetch Query Suggestions + +The `getQuerySuggestions` function helps to construct a query. +KQL suggestion functions are registered in X-Pack, so this API does not return results in OSS. + +```.ts + + // `inputValue` is the user input + const querySuggestions = await autocomplete.getQuerySuggestions({ + language: 'kuery', + indexPatterns: [indexPattern], + query: inputValue, + }); + +``` + +### Fetch Value Suggestions + +The `getValueSuggestions` function returns suggestions for field values. +This is helpful when you want to provide a user with options, for example when constructing a filter. + +```.ts + + // `inputValue` is the user input + const valueSuggestions = await autocomplete.getValueSuggestions({ + indexPattern, + field, + query: inputValue, + }); + +``` + +## Field Formats + +Coming soon. + +## Index Patterns + +Coming soon. + +## Query + +The query service is responsible for managing the configuration of a search query (`QueryState`): filters, time range, query string, and settings such as the auto refresh behavior and saved queries. + +It contains sub-services for each of those configurations: + - `data.query.filterManager` - Manages the `filters` component of a `QueryState`. The global filter state (filters that are persisted between applications) are owned by this service. + - `data.query.timefilter` - Responsible for the time range filter and the auto refresh behavior settings. + - `data.query.queryString` - Responsible for the query string and query language settings. + - `data.query.savedQueries` - Responsible for persisting a `QueryState` into a `SavedObject`, so it can be restored and used by other applications. + + Any changes to the `QueryState` are published on the `data.query.state$`, which is useful when wanting to persist global state or run a search upon data changes. + + A simple use case is: + + ```.ts + function searchOnChange(indexPattern: IndexPattern, aggConfigs: AggConfigs) { + data.query.state$.subscribe(() => { + + // Constuct the query portion of the search request + const query = data.query.getEsQuery(indexPattern); + + // Construct a request + const request = { + params: { + index: indexPattern.title, + body: { + aggs: aggConfigs.toDsl(), + query, + }, + }, + }; + + // Search with the `data.query` config + const search$ = data.search.search(request); + + ... + }); + } + + ``` + +## Search + +Provides access to Elasticsearch using the high-level `SearchSource` API or low-level `Search Strategies`. + +### SearchSource + +The `SearchSource` API is a convenient way to construct and run an Elasticsearch search query. + +```.tsx + + const searchSource = await data.search.searchSource.create(); + const searchResponse = await searchSource + .setParent(undefined) + .setField('index', indexPattern) + .setField('filter', filters) + .fetch(); + +``` + +### Low-level search + +#### Default Search Strategy + +One benefit of using the low-level search API, is partial response support in X-Pack, allowing for a better and more responsive user experience. +In OSS only the final result is returned. + +```.ts + import { isCompleteResponse } from '../plugins/data/public'; + + const search$ = data.search.search(request) + .subscribe({ + next: (response) => { + if (isCompleteResponse(response)) { + // Final result + search$.unsubscribe(); + } else { + // Partial result - you can update the UI, but data is still loading + } + }, + error: (e: Error) => { + // Show customized toast notifications. + // You may choose to handle errors differently if you prefer. + data.search.showError(e); + }, + }); +``` diff --git a/src/plugins/data/public/search/README.md b/src/plugins/data/public/search/README.md deleted file mode 100644 index 0a123ffa3f1e9..0000000000000 --- a/src/plugins/data/public/search/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# search - -The `search` service provides you with APIs to query Elasticsearch. - -The services are split into two parts: (1) low-level API; and (2) high-level API. - -## Low-level API - -With low level API you work directly with elasticsearch DSL - -```typescript -const results = await data.search.search(request, params); -``` - -## High-level API - -Using high-level API you work with Kibana abstractions around Elasticsearch DSL: filters, queries, and aggregations. Provided by the *Search Source* service. - -```typescript -const search = data.search.searchSource.createEmpty(); -search.setField('query', data.query.queryString); -const results = await search.fetch(); -``` From 29da04551dea22179a9771b0bd9c7e848118cbd1 Mon Sep 17 00:00:00 2001 From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com> Date: Thu, 1 Oct 2020 04:09:06 -0400 Subject: [PATCH 11/39] [SECURITY SOLUTIONS] Map embeddable working with index patterns selection (#78610) * map working with sourcerer * clean up * fix types * fix unit tests * fix incorrect hight for map * show prompt when no index exists * update unit test * fix update with no index available * fixup * unit test * add unit test Co-authored-by: Angela Chuang Co-authored-by: Elastic Machine --- .../__snapshots__/embedded_map.test.tsx.snap | 42 ++--- .../embeddables/embedded_map.test.tsx | 155 ++++++++++++++++-- .../components/embeddables/embedded_map.tsx | 108 ++++++++---- .../components/embeddables/selector.test.tsx | 24 +++ .../components/embeddables/selector.tsx | 35 ++++ 5 files changed, 289 insertions(+), 75 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/network/components/embeddables/selector.test.tsx create mode 100644 x-pack/plugins/security_solution/public/network/components/embeddables/selector.tsx diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/__snapshots__/embedded_map.test.tsx.snap b/x-pack/plugins/security_solution/public/network/components/embeddables/__snapshots__/embedded_map.test.tsx.snap index 456e07cf9cd15..4c3cbecc7593d 100644 --- a/x-pack/plugins/security_solution/public/network/components/embeddables/__snapshots__/embedded_map.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/network/components/embeddables/__snapshots__/embedded_map.test.tsx.snap @@ -1,34 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EmbeddedMapComponent renders correctly against snapshot 1`] = ` - - - - - Map configuration help - - - - } - > - - - - - - + `; diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.test.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.test.tsx index ae0d3c2256e07..219409b10be6c 100644 --- a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.test.tsx @@ -4,36 +4,169 @@ * you may not use this file except in compliance with the Elastic License. */ -import { shallow } from 'enzyme'; +import { mount, ReactWrapper, shallow } from 'enzyme'; import React from 'react'; +import * as redux from 'react-redux'; +import { act } from 'react-dom/test-utils'; import '../../../common/mock/match_media'; import { useIndexPatterns } from '../../../common/hooks/use_index_patterns'; +import { TestProviders } from '../../../common/mock'; + import { EmbeddedMapComponent } from './embedded_map'; +import { createEmbeddable } from './embedded_map_helpers'; const mockUseIndexPatterns = useIndexPatterns as jest.Mock; jest.mock('../../../common/hooks/use_index_patterns'); mockUseIndexPatterns.mockImplementation(() => [true, []]); jest.mock('../../../common/lib/kibana'); +jest.mock('./embedded_map_helpers', () => ({ + createEmbeddable: jest.fn(), +})); +jest.mock('../../../common/lib/kibana', () => { + return { + useKibana: jest.fn().mockReturnValue({ + services: { + embeddable: { + EmbeddablePanel: jest.fn(() =>
), + }, + docLinks: { ELASTIC_WEBSITE_URL: 'ELASTIC_WEBSITE_URL' }, + }, + }), + }; +}); + +jest.mock('./index_patterns_missing_prompt', () => { + return { + IndexPatternsMissingPrompt: jest.fn(() =>
), + }; +}); describe('EmbeddedMapComponent', () => { - let setQuery: jest.Mock; + const setQuery: jest.Mock = jest.fn(); + const mockSelector = { + kibanaIndexPatterns: [ + { id: '6f1eeb50-023d-11eb-bcb6-6ba0578012a9', title: 'filebeat-*' }, + { id: '28995490-023d-11eb-bcb6-6ba0578012a9', title: 'auditbeat-*' }, + ], + sourcererScope: { selectedPatterns: ['filebeat-*', 'packetbeat-*'] }, + }; + const mockCreateEmbeddable = { + destroyed: false, + enhancements: { dynamicActions: {} }, + getActionContext: jest.fn(), + getFilterActions: jest.fn(), + id: '70969ddc-4d01-4048-8073-4ea63d595638', + input: { + viewMode: 'view', + title: 'Source -> Destination Point-to-Point Map', + id: '70969ddc-4d01-4048-8073-4ea63d595638', + filters: Array(0), + hidePanelTitles: true, + }, + input$: {}, + isContainer: false, + output: {}, + output$: {}, + parent: undefined, + parentSubscription: undefined, + renderComplete: {}, + runtimeId: 1, + reload: jest.fn(), + setLayerList: jest.fn(), + setEventHandlers: jest.fn(), + setRenderTooltipContent: jest.fn(), + type: 'map', + updateInput: jest.fn(), + }; + const testProps = { + endDate: '2019-08-28T05:50:57.877Z', + filters: [], + query: { query: '', language: 'kuery' }, + setQuery, + startDate: '2019-08-28T05:50:47.877Z', + }; beforeEach(() => { - setQuery = jest.fn(); + setQuery.mockClear(); }); test('renders correctly against snapshot', () => { const wrapper = shallow( - + + + ); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.find('EmbeddedMapComponent')).toMatchSnapshot(); + }); + + test('renders services.embeddable.EmbeddablePanel', async () => { + const spy = jest.spyOn(redux, 'useSelector'); + spy.mockReturnValue(mockSelector); + + (createEmbeddable as jest.Mock).mockResolvedValue(mockCreateEmbeddable); + + let wrapper: ReactWrapper; + await act(async () => { + wrapper = mount( + + + + ); + }); + + wrapper!.update(); + + expect(wrapper!.find('[data-test-subj="EmbeddablePanel"]').exists()).toEqual(true); + expect(wrapper!.find('[data-test-subj="IndexPatternsMissingPrompt"]').exists()).toEqual(false); + expect(wrapper!.find('[data-test-subj="loading-panel"]').exists()).toEqual(false); + }); + + test('renders IndexPatternsMissingPrompt', async () => { + const spy = jest.spyOn(redux, 'useSelector'); + spy.mockReturnValue({ + ...mockSelector, + kibanaIndexPatterns: [], + }); + + (createEmbeddable as jest.Mock).mockResolvedValue(mockCreateEmbeddable); + + let wrapper: ReactWrapper; + await act(async () => { + wrapper = mount( + + + + ); + }); + + wrapper!.update(); + + expect(wrapper!.find('[data-test-subj="EmbeddablePanel"]').exists()).toEqual(false); + expect(wrapper!.find('[data-test-subj="IndexPatternsMissingPrompt"]').exists()).toEqual(true); + expect(wrapper!.find('[data-test-subj="loading-panel"]').exists()).toEqual(false); + }); + + test('renders Loader', async () => { + const spy = jest.spyOn(redux, 'useSelector'); + spy.mockReturnValue(mockSelector); + + (createEmbeddable as jest.Mock).mockResolvedValue(null); + + let wrapper: ReactWrapper; + await act(async () => { + wrapper = mount( + + + + ); + }); + + wrapper!.update(); + + expect(wrapper!.find('[data-test-subj="EmbeddablePanel"]').exists()).toEqual(false); + expect(wrapper!.find('[data-test-subj="IndexPatternsMissingPrompt"]').exists()).toEqual(false); + expect(wrapper!.find('[data-test-subj="loading-panel"]').exists()).toEqual(true); }); }); diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx index 4d96c213818aa..7ae8aecdab606 100644 --- a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx +++ b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx @@ -5,27 +5,31 @@ */ import { EuiLink, EuiText } from '@elastic/eui'; -import React, { useEffect, useState } from 'react'; +import deepEqual from 'fast-deep-equal'; +import React, { useEffect, useState, useMemo } from 'react'; import { createPortalNode, InPortal } from 'react-reverse-portal'; import styled, { css } from 'styled-components'; -import { ErrorEmbeddable } from '../../../../../../../src/plugins/embeddable/public'; -import { DEFAULT_INDEX_KEY } from '../../../../common/constants'; -import { getIndexPatternTitleIdMapping } from '../../../common/hooks/api/helpers'; -import { useIndexPatterns } from '../../../common/hooks/use_index_patterns'; +import { useSelector } from 'react-redux'; +import { + ErrorEmbeddable, + isErrorEmbeddable, +} from '../../../../../../../src/plugins/embeddable/public'; import { Loader } from '../../../common/components/loader'; import { displayErrorToast, useStateToaster } from '../../../common/components/toasters'; import { GlobalTimeArgs } from '../../../common/containers/use_global_time'; import { Embeddable } from './embeddable'; import { EmbeddableHeader } from './embeddable_header'; -import { createEmbeddable, findMatchingIndexPatterns } from './embedded_map_helpers'; +import { createEmbeddable } from './embedded_map_helpers'; import { IndexPatternsMissingPrompt } from './index_patterns_missing_prompt'; import { MapToolTip } from './map_tool_tip/map_tool_tip'; import * as i18n from './translations'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { MapEmbeddable } from '../../../../../../plugins/maps/public/embeddable'; import { Query, Filter } from '../../../../../../../src/plugins/data/public'; -import { useKibana, useUiSetting$ } from '../../../common/lib/kibana'; +import { useKibana } from '../../../common/lib/kibana'; +import { getDefaultSourcererSelector } from './selector'; +import { getLayerList } from './map_config'; interface EmbeddableMapProps { maintainRatio?: boolean; @@ -86,13 +90,19 @@ export const EmbeddedMapComponent = ({ const [embeddable, setEmbeddable] = React.useState( undefined ); - const [isLoading, setIsLoading] = useState(true); const [isError, setIsError] = useState(false); const [isIndexError, setIsIndexError] = useState(false); const [, dispatchToaster] = useStateToaster(); - const [loadingKibanaIndexPatterns, kibanaIndexPatterns] = useIndexPatterns(); - const [siemDefaultIndices] = useUiSetting$(DEFAULT_INDEX_KEY); + const defaultSourcererScopeSelector = useMemo(getDefaultSourcererSelector, []); + const { kibanaIndexPatterns, sourcererScope } = useSelector( + defaultSourcererScopeSelector, + deepEqual + ); + + const [mapIndexPatterns, setMapIndexPatterns] = useState( + kibanaIndexPatterns.filter((kip) => sourcererScope.selectedPatterns.includes(kip.title)) + ); // This portalNode provided by react-reverse-portal allows us re-parent the MapToolTip within our // own component tree instead of the embeddables (default). This is necessary to have access to @@ -102,27 +112,30 @@ export const EmbeddedMapComponent = ({ const { services } = useKibana(); + useEffect(() => { + setMapIndexPatterns((prevMapIndexPatterns) => { + const newIndexPatterns = kibanaIndexPatterns.filter((kip) => + sourcererScope.selectedPatterns.includes(kip.title) + ); + if (!deepEqual(newIndexPatterns, prevMapIndexPatterns)) { + if (newIndexPatterns.length === 0) { + setIsError(true); + } + return newIndexPatterns; + } + return prevMapIndexPatterns; + }); + }, [kibanaIndexPatterns, sourcererScope.selectedPatterns]); + // Initial Load useEffect useEffect(() => { let isSubscribed = true; async function setupEmbeddable() { - // Ensure at least one `securitySolution:defaultIndex` kibana index pattern exists before creating embeddable - const matchingIndexPatterns = findMatchingIndexPatterns({ - kibanaIndexPatterns, - siemDefaultIndices, - }); - - if (matchingIndexPatterns.length === 0 && isSubscribed) { - setIsLoading(false); - setIsIndexError(true); - return; - } - // Create & set Embeddable try { const embeddableObject = await createEmbeddable( filters, - getIndexPatternTitleIdMapping(matchingIndexPatterns), + mapIndexPatterns, query, startDate, endDate, @@ -131,7 +144,12 @@ export const EmbeddedMapComponent = ({ services.embeddable ); if (isSubscribed) { - setEmbeddable(embeddableObject); + if (mapIndexPatterns.length === 0) { + setIsIndexError(true); + } else { + setEmbeddable(embeddableObject); + setIsIndexError(false); + } } } catch (e) { if (isSubscribed) { @@ -139,19 +157,41 @@ export const EmbeddedMapComponent = ({ setIsError(true); } } - if (isSubscribed) { - setIsLoading(false); - } } - - if (!loadingKibanaIndexPatterns) { + if (embeddable == null && sourcererScope.selectedPatterns.length > 0) { setupEmbeddable(); } + return () => { isSubscribed = false; }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [loadingKibanaIndexPatterns, kibanaIndexPatterns]); + }, [ + dispatchToaster, + endDate, + embeddable, + filters, + mapIndexPatterns, + query, + portalNode, + services.embeddable, + sourcererScope.selectedPatterns, + setQuery, + startDate, + ]); + + // update layer with new index patterns + useEffect(() => { + const setLayerList = async () => { + if (embeddable != null) { + // @ts-expect-error + await embeddable.setLayerList(getLayerList(mapIndexPatterns)); + embeddable.reload(); + } + }; + if (embeddable != null && !isErrorEmbeddable(embeddable)) { + setLayerList(); + } + }, [embeddable, mapIndexPatterns]); // queryExpression updated useEffect useEffect(() => { @@ -198,10 +238,10 @@ export const EmbeddedMapComponent = ({ - {embeddable != null ? ( - - ) : !isLoading && isIndexError ? ( + {isIndexError ? ( + ) : embeddable != null ? ( + ) : ( )} diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/selector.test.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/selector.test.tsx new file mode 100644 index 0000000000000..d5b105dd32798 --- /dev/null +++ b/x-pack/plugins/security_solution/public/network/components/embeddables/selector.test.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 { State } from '../../../common/store'; + +import { getDefaultSourcererSelector } from './selector'; + +jest.mock('../../../common/store/sourcerer', () => ({ + sourcererSelectors: { + kibanaIndexPatternsSelector: jest.fn().mockReturnValue(jest.fn()), + scopesSelector: jest.fn().mockReturnValue(jest.fn().mockReturnValue({ default: '' })), + }, +})); + +describe('getDefaultSourcererSelector', () => { + test('Returns correct format', () => { + const mockMapStateToProps = getDefaultSourcererSelector(); + const result = mockMapStateToProps({} as State); + expect(result).toHaveProperty('kibanaIndexPatterns'); + expect(result).toHaveProperty('sourcererScope'); + }); +}); diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/selector.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/selector.tsx new file mode 100644 index 0000000000000..2d0bc970f0a51 --- /dev/null +++ b/x-pack/plugins/security_solution/public/network/components/embeddables/selector.tsx @@ -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 { State } from '../../../common/store'; +import { sourcererSelectors } from '../../../common/store/sourcerer'; +import { + KibanaIndexPatterns, + ManageScope, + SourcererScopeName, +} from '../../../common/store/sourcerer/model'; + +export interface DefaultSourcererSelector { + kibanaIndexPatterns: KibanaIndexPatterns; + sourcererScope: ManageScope; +} + +export const getDefaultSourcererSelector = () => { + const getKibanaIndexPatternsSelector = sourcererSelectors.kibanaIndexPatternsSelector(); + const getScopesSelector = sourcererSelectors.scopesSelector(); + + const mapStateToProps = (state: State): DefaultSourcererSelector => { + const kibanaIndexPatterns = getKibanaIndexPatternsSelector(state); + const scope = getScopesSelector(state)[SourcererScopeName.default]; + + return { + kibanaIndexPatterns, + sourcererScope: scope, + }; + }; + + return mapStateToProps; +}; From 07ebb81a79d323445e089d43e9bef04b4578f44d Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 1 Oct 2020 10:16:30 +0200 Subject: [PATCH 12/39] [UX] Improve page-load axis (#78392) Co-authored-by: Elastic Machine --- .../step_definitions/csm/breakdown_filter.ts | 2 +- .../step_definitions/csm/csm_dashboard.ts | 2 +- .../step_definitions/csm/csm_filters.ts | 2 +- .../step_definitions/csm/percentile_select.ts | 2 +- .../csm/service_name_filter.ts | 2 +- .../RumDashboard/Charts/PageLoadDistChart.tsx | 20 +- .../RumDashboard/Charts/PageViewsChart.tsx | 17 +- .../app/RumDashboard/ClientMetrics/index.tsx | 19 +- .../PageLoadDistribution/BreakdownSeries.tsx | 20 +- .../RumDashboard/UXMetrics/KeyUXMetrics.tsx | 3 +- .../__snapshots__/queries.test.ts.snap | 210 +++++++++++++++++- .../lib/rum_client/get_client_metrics.ts | 6 +- .../rum_client/get_page_load_distribution.ts | 110 ++++++--- .../lib/rum_client/get_pl_dist_breakdown.ts | 12 +- .../plugins/apm/server/routes/rum_client.ts | 4 +- 15 files changed, 357 insertions(+), 74 deletions(-) diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts index acfbe6e0a4e78..342f3e0aa5267 100644 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts @@ -36,7 +36,7 @@ Then(`breakdown series should appear in chart`, () => { cy.get('div.echLegendItem__label', DEFAULT_TIMEOUT).should( 'have.text', - 'ChromeChrome Mobile WebViewSafariFirefoxMobile SafariChrome MobileChrome Mobile iOSOverall' + 'OverallChromeChrome Mobile WebViewSafariFirefoxMobile SafariChrome MobileChrome Mobile iOS' ); }); }); diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts index 28af4fd5d8a56..a8edf862ab256 100644 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts @@ -26,7 +26,7 @@ Given(`a user browses the APM UI application for RUM Data`, () => { }); Then(`should have correct client metrics`, () => { - const metrics = ['4 ms', '0.06 s', '55 ']; + const metrics = ['4 ms', '58 ms', '55']; verifyClientMetrics(metrics, true); }); diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts index 75974ef9c202c..5c2109bb518c2 100644 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts @@ -56,7 +56,7 @@ Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => { cy.get('.euiStat__title-isLoading').should('not.be.visible'); const data = - filterName === 'os' ? ['5 ms', '0.06 s', '8 '] : ['4 ms', '0.05 s', '28 ']; + filterName === 'os' ? ['5 ms', '64 ms', '8'] : ['4 ms', '55 ms', '28']; verifyClientMetrics(data, true); diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts index 4d2ba4d01ae6c..55c980d5edeb4 100644 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts @@ -18,7 +18,7 @@ When('the user changes the selected percentile', () => { }); Then(`it displays client metric related to that percentile`, () => { - const metrics = ['14 ms', '0.13 s', '55 ']; + const metrics = ['14 ms', '131 ms', '55']; verifyClientMetrics(metrics, false); diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts index b3899a5649b72..20c6a3fb72aa9 100644 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts @@ -15,7 +15,7 @@ When('the user changes the selected service name', () => { }); Then(`it displays relevant client metrics`, () => { - const metrics = ['4 ms', '0.06 s', '55 ']; + const metrics = ['4 ms', '58 ms', '55']; verifyClientMetrics(metrics, false); }); diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx index 4a5f43dacedf4..4eb24f8c80b9a 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx @@ -88,6 +88,10 @@ export function PageLoadDistChart({ const [darkMode] = useUiSetting$('theme:darkMode'); + const euiChartTheme = darkMode + ? EUI_CHARTS_THEME_DARK + : EUI_CHARTS_THEME_LIGHT; + return ( numeral(d).format('0.0') + '%'} + labelFormat={(d) => d + ' %'} /> numeral(d).format('0.0') + ' %'} /> {breakdown && ( ('theme:darkMode'); @@ -83,17 +85,17 @@ export function PageViewsChart({ data, loading }: Props) { return yAccessor; }; + const euiChartTheme = darkMode + ? EUI_CHARTS_THEME_DARK + : EUI_CHARTS_THEME_LIGHT; + return ( {(!loading || data) && ( )} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx index 03f2f31f35817..310c01291aea4 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx @@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiToolTip } from '@elastic/eui'; import { useFetcher } from '../../../../hooks/useFetcher'; import { I18LABELS } from '../translations'; import { useUxQuery } from '../hooks/useUxQuery'; +import { formatToSec } from '../UXMetrics/KeyUXMetrics'; import { CsmSharedContext } from '../CsmSharedContext'; const ClFlexGroup = styled(EuiFlexGroup)` @@ -49,14 +50,14 @@ export function ClientMetrics() { const STAT_STYLE = { width: '240px' }; + const pageViewsTotal = data?.pageViews?.value ?? 0; + return ( @@ -64,7 +65,7 @@ export function ClientMetrics() { @@ -73,9 +74,13 @@ export function ClientMetrics() { - <>{numeral(data?.pageViews?.value).format('0 a') ?? '-'} - + pageViewsTotal < 10000 ? ( + numeral(pageViewsTotal).format('0,0') + ) : ( + + <>{numeral(pageViewsTotal).format('0 a')} + + ) } description={I18LABELS.pageViews} isLoading={status !== 'success'} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx index 3463327441b7b..f348aca495c71 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx @@ -6,8 +6,13 @@ import { CurveType, Fit, LineSeries, ScaleType } from '@elastic/charts'; import React, { useEffect } from 'react'; +import { + EUI_CHARTS_THEME_DARK, + EUI_CHARTS_THEME_LIGHT, +} from '@elastic/eui/dist/eui_charts_theme'; import { PercentileRange } from './index'; import { useBreakdowns } from './use_breakdowns'; +import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public'; interface Props { field: string; @@ -22,6 +27,12 @@ export function BreakdownSeries({ percentileRange, onLoadingChange, }: Props) { + const [darkMode] = useUiSetting$('theme:darkMode'); + + const euiChartTheme = darkMode + ? EUI_CHARTS_THEME_DARK + : EUI_CHARTS_THEME_LIGHT; + const { data, status } = useBreakdowns({ field, value, @@ -32,9 +43,11 @@ export function BreakdownSeries({ onLoadingChange(status !== 'success'); }, [status, onLoadingChange]); + // sort index 1 color vizColors1 is already used for overall, + // so don't user that here return ( <> - {data?.map(({ data: seriesData, name }) => ( + {data?.map(({ data: seriesData, name }, sortIndex) => ( ))} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx index 53722658cafef..5b0e9709d4fa3 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { EuiFlexItem, EuiStat, EuiFlexGroup } from '@elastic/eui'; +import numeral from '@elastic/numeral'; import { UXMetrics } from './index'; import { FCP_LABEL, @@ -77,7 +78,7 @@ export function KeyUXMetrics({ data, loading }: Props) { diff --git a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap index 66cfa954965d2..1c724efac37b2 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap +++ b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap @@ -245,10 +245,214 @@ Object { ], }, }, - "minDuration": Object { - "min": Object { + "loadDistribution": Object { + "percentile_ranks": Object { "field": "transaction.duration.us", - "missing": 0, + "hdr": Object { + "number_of_significant_value_digits": 3, + }, + "keyed": false, + "values": Array [ + 0, + 500000, + 1000000, + 1500000, + 2000000, + 2500000, + 3000000, + 3500000, + 4000000, + 4500000, + 5000000, + 5500000, + 6000000, + 6500000, + 7000000, + 7500000, + 8000000, + 8500000, + 9000000, + 9500000, + 10000000, + 10500000, + 11000000, + 11500000, + 12000000, + 12500000, + 13000000, + 13500000, + 14000000, + 14500000, + 15000000, + 15500000, + 16000000, + 16500000, + 17000000, + 17500000, + 18000000, + 18500000, + 19000000, + 19500000, + 20000000, + 20500000, + 21000000, + 21500000, + 22000000, + 22500000, + 23000000, + 23500000, + 24000000, + 24500000, + 25000000, + 25500000, + 26000000, + 26500000, + 27000000, + 27500000, + 28000000, + 28500000, + 29000000, + 29500000, + 30000000, + 30500000, + 31000000, + 31500000, + 32000000, + 32500000, + 33000000, + 33500000, + 34000000, + 34500000, + 35000000, + 35500000, + 36000000, + 36500000, + 37000000, + 37500000, + 38000000, + 38500000, + 39000000, + 39500000, + 40000000, + 40500000, + 41000000, + 41500000, + 42000000, + 42500000, + 43000000, + 43500000, + 44000000, + 44500000, + 45000000, + 45500000, + 46000000, + 46500000, + 47000000, + 47500000, + 48000000, + 48500000, + 49000000, + 49500000, + 50000000, + 50500000, + 51000000, + 51500000, + 52000000, + 52500000, + 53000000, + 53500000, + 54000000, + 54500000, + 55000000, + 55500000, + 56000000, + 56500000, + 57000000, + 57500000, + 58000000, + 58500000, + 59000000, + 59500000, + 60000000, + 60500000, + 61000000, + 61500000, + 62000000, + 62500000, + 63000000, + 63500000, + 64000000, + 64500000, + 65000000, + 65500000, + 66000000, + 66500000, + 67000000, + 67500000, + 68000000, + 68500000, + 69000000, + 69500000, + 70000000, + 70500000, + 71000000, + 71500000, + 72000000, + 72500000, + 73000000, + 73500000, + 74000000, + 74500000, + 75000000, + 75500000, + 76000000, + 76500000, + 77000000, + 77500000, + 78000000, + 78500000, + 79000000, + 79500000, + 80000000, + 80500000, + 81000000, + 81500000, + 82000000, + 82500000, + 83000000, + 83500000, + 84000000, + 84500000, + 85000000, + 85500000, + 86000000, + 86500000, + 87000000, + 87500000, + 88000000, + 88500000, + 89000000, + 89500000, + 90000000, + 90500000, + 91000000, + 91500000, + 92000000, + 92500000, + 93000000, + 93500000, + 94000000, + 94500000, + 95000000, + 95500000, + 96000000, + 96500000, + 97000000, + 97500000, + 98000000, + 98500000, + 99000000, + ], }, }, }, diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts index a210c32ceb44e..6566ea4f5e29b 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts +++ b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts @@ -72,11 +72,9 @@ export async function getClientMetrics({ // Divide by 1000 to convert ms into seconds return { pageViews, - backEnd: { value: (backEnd.values[pkey] || 0) / 1000 }, + backEnd: { value: backEnd.values[pkey] || 0 }, frontEnd: { - value: - ((domInteractive.values[pkey] || 0) - (backEnd.values[pkey] || 0)) / - 1000, + value: (domInteractive.values[pkey] || 0) - (backEnd.values[pkey] || 0), }, }; } diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts index 25de9f06fefc4..5f666feb8a18f 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts +++ b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts @@ -15,8 +15,6 @@ import { export const MICRO_TO_SEC = 1000000; -const NUMBER_OF_PLD_STEPS = 100; - export function microToSec(val: number) { return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100; } @@ -24,15 +22,31 @@ export function microToSec(val: number) { export const getPLDChartSteps = ({ maxDuration, minDuration, + initStepValue, }: { maxDuration: number; minDuration: number; + initStepValue?: number; }) => { - const stepValue = (maxDuration - minDuration) / NUMBER_OF_PLD_STEPS; - const stepValues = []; - for (let i = 1; i < NUMBER_OF_PLD_STEPS + 1; i++) { - stepValues.push((stepValue * i + minDuration).toFixed(2)); + let stepValue = 0.5; + // if diff is too low, let's lower + // down the steps value to increase steps + if (maxDuration - minDuration <= 5 * MICRO_TO_SEC) { + stepValue = 0.1; + } + + if (initStepValue) { + stepValue = initStepValue; + } + + let initValue = minDuration; + const stepValues = [initValue]; + + while (initValue < maxDuration) { + initValue += stepValue * MICRO_TO_SEC; + stepValues.push(initValue); } + return stepValues; }; @@ -52,16 +66,21 @@ export async function getPageLoadDistribution({ urlQuery, }); + // we will first get 100 steps using 0sec and 50sec duration, + // most web apps will cover this use case + // if 99th percentile is greater than 50sec, + // we will fetch additional 5 steps beyond 99th percentile + let maxDuration = (maxPercentile ? +maxPercentile : 50) * MICRO_TO_SEC; + const minDuration = minPercentile ? +minPercentile * MICRO_TO_SEC : 0; + const stepValues = getPLDChartSteps({ + maxDuration, + minDuration, + }); + const params = mergeProjection(projection, { body: { size: 0, aggs: { - minDuration: { - min: { - field: TRANSACTION_DURATION, - missing: 0, - }, - }, durPercentiles: { percentiles: { field: TRANSACTION_DURATION, @@ -71,6 +90,16 @@ export async function getPageLoadDistribution({ }, }, }, + loadDistribution: { + percentile_ranks: { + field: TRANSACTION_DURATION, + values: stepValues, + keyed: false, + hdr: { + number_of_significant_value_digits: 3, + }, + }, + }, }, }, }); @@ -86,22 +115,40 @@ export async function getPageLoadDistribution({ return null; } - const { durPercentiles, minDuration } = aggregations ?? {}; + const { durPercentiles, loadDistribution } = aggregations ?? {}; - const minPerc = minPercentile - ? +minPercentile * MICRO_TO_SEC - : minDuration?.value ?? 0; + let pageDistVals = loadDistribution?.values ?? []; - const maxPercQuery = durPercentiles?.values['99.0'] ?? 10000; + const maxPercQuery = durPercentiles?.values['99.0'] ?? 0; - const maxPerc = maxPercentile ? +maxPercentile * MICRO_TO_SEC : maxPercQuery; + // we assumed that page load will never exceed 50secs, if 99th percentile is + // greater then let's fetch additional 10 steps, to cover that on the chart + if (maxPercQuery > maxDuration && !maxPercentile) { + const additionalStepsPageVals = await getPercentilesDistribution({ + setup, + maxDuration: maxPercQuery, + // we pass 50sec as min to get next steps + minDuration: maxDuration, + }); - const pageDist = await getPercentilesDistribution({ - setup, - minDuration: minPerc, - maxDuration: maxPerc, + pageDistVals = pageDistVals.concat(additionalStepsPageVals); + maxDuration = maxPercQuery; + } + + // calculate the diff to get actual page load on specific duration value + const pageDist = pageDistVals.map(({ key, value }, index: number, arr) => { + return { + x: microToSec(key), + y: index === 0 ? value : value - arr[index - 1].value, + }; }); + if (pageDist.length > 0) { + while (pageDist[pageDist.length - 1].y === 0) { + pageDist.pop(); + } + } + Object.entries(durPercentiles?.values ?? {}).forEach(([key, val]) => { if (durPercentiles?.values?.[key]) { durPercentiles.values[key] = microToSec(val as number); @@ -111,8 +158,8 @@ export async function getPageLoadDistribution({ return { pageLoadDistribution: pageDist, percentiles: durPercentiles?.values, - minDuration: microToSec(minPerc), - maxDuration: microToSec(maxPerc), + minDuration: microToSec(minDuration), + maxDuration: microToSec(maxDuration), }; } @@ -125,7 +172,11 @@ const getPercentilesDistribution = async ({ minDuration: number; maxDuration: number; }) => { - const stepValues = getPLDChartSteps({ maxDuration, minDuration }); + const stepValues = getPLDChartSteps({ + minDuration: minDuration + 0.5 * MICRO_TO_SEC, + maxDuration, + initStepValue: 0.5, + }); const projection = getRumPageLoadTransactionsProjection({ setup, @@ -153,12 +204,5 @@ const getPercentilesDistribution = async ({ const { aggregations } = await apmEventClient.search(params); - const pageDist = aggregations?.loadDistribution.values ?? []; - - return pageDist.map(({ key, value }, index: number, arr) => { - return { - x: microToSec(key), - y: index === 0 ? value : value - arr[index - 1].value, - }; - }); + return aggregations?.loadDistribution.values ?? []; }; diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_pl_dist_breakdown.ts b/x-pack/plugins/apm/server/lib/rum_client/get_pl_dist_breakdown.ts index d59817cc682a9..bebf9c0bc99c9 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/get_pl_dist_breakdown.ts +++ b/x-pack/plugins/apm/server/lib/rum_client/get_pl_dist_breakdown.ts @@ -41,21 +41,21 @@ export const getBreakdownField = (breakdown: string) => { export const getPageLoadDistBreakdown = async ({ setup, - minDuration, - maxDuration, + minPercentile, + maxPercentile, breakdown, urlQuery, }: { setup: Setup & SetupTimeRange & SetupUIFilters; - minDuration: number; - maxDuration: number; + minPercentile: number; + maxPercentile: number; breakdown: string; urlQuery?: string; }) => { // convert secs to micros const stepValues = getPLDChartSteps({ - minDuration: minDuration * MICRO_TO_SEC, - maxDuration: maxDuration * MICRO_TO_SEC, + maxDuration: (maxPercentile ? +maxPercentile : 50) * MICRO_TO_SEC, + minDuration: minPercentile ? +minPercentile * MICRO_TO_SEC : 0, }); const projection = getRumPageLoadTransactionsProjection({ diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts index d86069a3ec27a..2bdfaa1421eea 100644 --- a/x-pack/plugins/apm/server/routes/rum_client.ts +++ b/x-pack/plugins/apm/server/routes/rum_client.ts @@ -89,8 +89,8 @@ export const rumPageLoadDistBreakdownRoute = createRoute(() => ({ return getPageLoadDistBreakdown({ setup, - minDuration: Number(minPercentile), - maxDuration: Number(maxPercentile), + minPercentile: Number(minPercentile), + maxPercentile: Number(maxPercentile), breakdown, urlQuery, }); From addbdf7cb608ef1b1aeda1d31d0341f6ace02c98 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 1 Oct 2020 10:29:51 +0200 Subject: [PATCH 13/39] [Drilldowns][Docs] Communicate the visualization types that support drilldowns (#78761) --- .../dashboard/dashboard-drilldown.asciidoc | 21 +++++++++++++++++++ docs/user/dashboard/url-drilldown.asciidoc | 16 ++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/docs/user/dashboard/dashboard-drilldown.asciidoc b/docs/user/dashboard/dashboard-drilldown.asciidoc index 84701cae2ecc6..e50c1281beede 100644 --- a/docs/user/dashboard/dashboard-drilldown.asciidoc +++ b/docs/user/dashboard/dashboard-drilldown.asciidoc @@ -11,6 +11,26 @@ This example shows a dashboard panel that contains a pie chart with a configured [role="screenshot"] image::images/drilldown_on_piechart.gif[Drilldown on pie chart that navigates to another dashboard] +[float] +[[dashboard-drilldown-supported-panels]] +==== Supported panels + +The following panels support dashboard drilldowns: + +* Lens +* Area +* Data table +* Heat map +* Horizontal bar +* Line +* Maps +* Pie +* TSVB +* Tag cloud +* Timelion +* Vega +* Vertical bar + [float] [[drilldowns-example]] ==== Try it: Create a dashboard drilldown @@ -74,3 +94,4 @@ image::images/drilldown_on_panel.png[Drilldown on pie chart that navigates to an + You are navigated to your destination dashboard. Verify that the search query, filters, and time range are carried over. + diff --git a/docs/user/dashboard/url-drilldown.asciidoc b/docs/user/dashboard/url-drilldown.asciidoc index ee879256a1fae..620a2d2056bf1 100644 --- a/docs/user/dashboard/url-drilldown.asciidoc +++ b/docs/user/dashboard/url-drilldown.asciidoc @@ -14,6 +14,22 @@ image:images/url_drilldown_go_to_github.gif[Drilldown on pie chart that navigate NOTE: URL drilldown is available with the https://www.elastic.co/subscriptions[Gold subscription] and higher. +[float] +[[url-drilldown-supported-panels]] +==== Supported panels + +The following panels support URL drilldowns: + +* Lens +* Area +* Data table +* Heat map +* Horizontal bar +* Line +* Pie +* Tag cloud +* Vertical bar + [float] [[try-it]] ==== Try it: Create a URL drilldown From d8ded4df6cc173dae624da2408b4657b541f7f1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopyci=C5=84ski?= Date: Thu, 1 Oct 2020 10:56:52 +0200 Subject: [PATCH 14/39] Fix ML conditionals links Cypress tests (#78568) --- .../integration/ml_conditional_links.spec.ts | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts b/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts index 3b89163392626..7bdc461a7c73d 100644 --- a/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts +++ b/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts @@ -24,20 +24,7 @@ import { mlNetworkSingleIpNullKqlQuery, } from '../urls/ml_conditional_links'; -// FLAKY: https://github.com/elastic/kibana/issues/78512 -// FLAKY: https://github.com/elastic/kibana/issues/78511 -// FLAKY: https://github.com/elastic/kibana/issues/78510 -// FLAKY: https://github.com/elastic/kibana/issues/78509 -// FLAKY: https://github.com/elastic/kibana/issues/78508 -// FLAKY: https://github.com/elastic/kibana/issues/78507 -// FLAKY: https://github.com/elastic/kibana/issues/78506 -// FLAKY: https://github.com/elastic/kibana/issues/78505 -// FLAKY: https://github.com/elastic/kibana/issues/78504 -// FLAKY: https://github.com/elastic/kibana/issues/78503 -// FLAKY: https://github.com/elastic/kibana/issues/78502 -// FLAKY: https://github.com/elastic/kibana/issues/78501 -// FLAKY: https://github.com/elastic/kibana/issues/78500 -describe.skip('ml conditional links', () => { +describe('ml conditional links', () => { it('sets the KQL from a single IP with a value for the query', () => { loginAndWaitForPageWithoutDateRange(mlNetworkSingleIpKqlQuery); cy.get(KQL_INPUT) From 9b187c5f81297d6d662a24266594494d7ef628ae Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 1 Oct 2020 11:10:15 +0200 Subject: [PATCH 15/39] Make the actual Vislib import async (#78949) Co-authored-by: Elastic Machine --- src/plugins/vis_type_vislib/public/vis_controller.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/vis_controller.tsx b/src/plugins/vis_type_vislib/public/vis_controller.tsx index c422e9f4f3a0a..3a05030f804ca 100644 --- a/src/plugins/vis_type_vislib/public/vis_controller.tsx +++ b/src/plugins/vis_type_vislib/public/vis_controller.tsx @@ -20,8 +20,6 @@ import $ from 'jquery'; import React, { RefObject } from 'react'; -// @ts-ignore -import { Vis as Vislib } from './vislib/vis'; import { Positions } from './utils/collections'; import { VisTypeVislibDependencies } from './plugin'; import { mountReactNode } from '../../../core/public/utils'; @@ -80,6 +78,9 @@ export const createVislibVisController = (deps: VisTypeVislibDependencies) => { return resolve(); } + // @ts-expect-error + const { Vis: Vislib } = await import('./vislib/vis'); + this.vislibVis = new Vislib(this.chartEl, visParams, deps); this.vislibVis.on('brush', this.vis.API.events.brush); this.vislibVis.on('click', this.vis.API.events.filter); From e836efc3e0f89470d2d207f78b08ce74b5f995fd Mon Sep 17 00:00:00 2001 From: Bohdan Tsymbala Date: Thu, 1 Oct 2020 11:31:11 +0200 Subject: [PATCH 16/39] Changed the color of the confirm button in trusted app deletion dialog. (#78768) * Changed the color of the confirm button in trusted app deletion dialog. * Updated the snapshots. --- .../trusted_app_deletion_dialog.test.tsx.snap | 6 +++--- .../trusted_apps/view/trusted_app_deletion_dialog.tsx | 8 +++++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap index fdb20f229f144..89f81948e166b 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap @@ -85,7 +85,7 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion failed 1`] = `
} > - + , this.el From 36814aa1ef5e8b1e593bbcbfc915075f62bc38c0 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Thu, 1 Oct 2020 13:30:10 +0300 Subject: [PATCH 21/39] Change implementation on TSVB functional when testing the indexPattern switch (#78754) Co-authored-by: Elastic Machine --- test/functional/apps/visualize/_tsvb_chart.ts | 4 ++-- test/functional/page_objects/visual_builder_page.ts | 8 ++++++++ test/functional/services/combo_box.ts | 11 +++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts index bfe0da7a5b24f..3e325d5e6b907 100644 --- a/test/functional/apps/visualize/_tsvb_chart.ts +++ b/test/functional/apps/visualize/_tsvb_chart.ts @@ -135,11 +135,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.visualBuilder.clickPanelOptions('metric'); const fromTime = 'Oct 22, 2018 @ 00:00:00.000'; const toTime = 'Oct 28, 2018 @ 23:59:59.999'; + await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); // Sometimes popovers take some time to appear in Firefox (#71979) await retry.tryForTime(20000, async () => { - await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); await PageObjects.visualBuilder.setIndexPatternValue('kibana_sample_data_flights'); - await PageObjects.common.sleep(3000); + await PageObjects.visualBuilder.waitForIndexPatternTimeFieldOptionsLoaded(); await PageObjects.visualBuilder.selectIndexPatternTimeField('timestamp'); }); const newValue = await PageObjects.visualBuilder.getMetricValue(); diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts index 6e49fd3b03494..37634d0248b04 100644 --- a/test/functional/page_objects/visual_builder_page.ts +++ b/test/functional/page_objects/visual_builder_page.ts @@ -453,6 +453,14 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro await PageObjects.header.waitUntilLoadingHasFinished(); } + public async waitForIndexPatternTimeFieldOptionsLoaded() { + await retry.waitFor('combobox options loaded', async () => { + const options = await comboBox.getOptions('metricsIndexPatternFieldsSelect'); + log.debug(`-- optionsCount=${options.length}`); + return options.length > 0; + }); + } + public async selectIndexPatternTimeField(timeField: string) { await retry.try(async () => { await comboBox.clearInputField('metricsIndexPatternFieldsSelect'); diff --git a/test/functional/services/combo_box.ts b/test/functional/services/combo_box.ts index ac7a40361d065..57e1857989950 100644 --- a/test/functional/services/combo_box.ts +++ b/test/functional/services/combo_box.ts @@ -58,6 +58,17 @@ export function ComboBoxProvider({ getService, getPageObjects }: FtrProviderCont return isMouseClick ? await element.clickMouseButton() : await element._webElement.click(); } + /** + * Finds combobox element options + * + * @param comboBoxSelector data-test-subj selector + */ + public async getOptions(comboBoxSelector: string) { + const comboBoxElement = await testSubjects.find(comboBoxSelector); + await this.openOptionsList(comboBoxElement); + return await find.allByCssSelector('.euiFilterSelectItem', WAIT_FOR_EXISTS_TIME); + } + /** * Sets value for specified combobox element * From d11da3275d0b829fa48f76df9864e4913fe0cf22 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Thu, 1 Oct 2020 12:54:40 +0200 Subject: [PATCH 22/39] [Lens] Don't allow values outside of range for number of top values (#78734) --- .../{terms.tsx => terms/index.tsx} | 46 ++++----------- .../definitions/{ => terms}/terms.test.tsx | 32 +++++------ .../terms/values_range_input.test.tsx | 56 +++++++++++++++++++ .../definitions/terms/values_range_input.tsx | 50 +++++++++++++++++ 4 files changed, 133 insertions(+), 51 deletions(-) rename x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/{terms.tsx => terms/index.tsx} (87%) rename x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/{ => terms}/terms.test.tsx (95%) create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx similarity index 87% rename from x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx rename to x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx index c147029bbd3c7..85deb2bac25ca 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx @@ -6,24 +6,13 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiRange, EuiSelect } from '@elastic/eui'; -import { IndexPatternColumn } from '../../indexpattern'; -import { updateColumnParam } from '../../state_helpers'; -import { DataType } from '../../../types'; -import { OperationDefinition } from './index'; -import { FieldBasedIndexPatternColumn } from './column_types'; - -type PropType = C extends React.ComponentType ? P : unknown; - -// Add ticks to EuiRange component props -const FixedEuiRange = (EuiRange as unknown) as React.ComponentType< - PropType & { - ticks?: Array<{ - label: string; - value: number; - }>; - } ->; +import { EuiFormRow, EuiSelect } from '@elastic/eui'; +import { IndexPatternColumn } from '../../../indexpattern'; +import { updateColumnParam } from '../../../state_helpers'; +import { DataType } from '../../../../types'; +import { OperationDefinition } from '../index'; +import { FieldBasedIndexPatternColumn } from '../column_types'; +import { ValuesRangeInput } from './values_range_input'; function ofName(name: string) { return i18n.translate('xpack.lens.indexPattern.termsOf', { @@ -182,30 +171,19 @@ export const termsOperation: OperationDefinition - | React.MouseEvent - ) => + onChange={(value) => { setState( updateColumnParam({ state, layerId, currentColumn, paramName: 'size', - value: Number((e.target as HTMLInputElement).value), + value, }) - ) - } - aria-label={i18n.translate('xpack.lens.indexPattern.terms.size', { - defaultMessage: 'Number of values', - })} + ); + }} /> { it('should render current size value', () => { const setStateSpy = jest.fn(); - const instance = shallow( + const instance = mount( { /> ); - expect(instance.find(EuiRange).prop('value')).toEqual(3); + expect(instance.find(EuiRange).prop('value')).toEqual('3'); }); it('should update state with the size value', () => { const setStateSpy = jest.fn(); - const instance = shallow( + const instance = mount( { /> ); - instance.find(EuiRange).prop('onChange')!( - { - target: { - value: '7', - }, - } as React.ChangeEvent, - true - ); + act(() => { + instance.find(ValuesRangeInput).prop('onChange')!(7); + }); + expect(setStateSpy).toHaveBeenCalledWith({ ...state, layers: { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx new file mode 100644 index 0000000000000..c1620dd316a60 --- /dev/null +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx @@ -0,0 +1,56 @@ +/* + * 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 { act } from 'react-dom/test-utils'; +import { shallow } from 'enzyme'; +import { EuiRange } from '@elastic/eui'; +import { ValuesRangeInput } from './values_range_input'; + +jest.mock('react-use', () => ({ + useDebounce: (fn: () => void) => fn(), +})); + +describe('ValuesRangeInput', () => { + it('should render EuiRange correctly', () => { + const onChangeSpy = jest.fn(); + const instance = shallow(); + + expect(instance.find(EuiRange).prop('value')).toEqual('5'); + }); + + it('should run onChange function on update', () => { + const onChangeSpy = jest.fn(); + const instance = shallow(); + act(() => { + instance.find(EuiRange).prop('onChange')!( + { currentTarget: { value: '7' } } as React.ChangeEvent, + true + ); + }); + expect(instance.find(EuiRange).prop('value')).toEqual('7'); + // useDebounce runs on initialization and on change + expect(onChangeSpy.mock.calls.length).toBe(2); + expect(onChangeSpy.mock.calls[0][0]).toBe(5); + expect(onChangeSpy.mock.calls[1][0]).toBe(7); + }); + it('should not run onChange function on update when value is out of 1-100 range', () => { + const onChangeSpy = jest.fn(); + const instance = shallow(); + act(() => { + instance.find(EuiRange).prop('onChange')!( + { currentTarget: { value: '107' } } as React.ChangeEvent, + true + ); + }); + instance.update(); + expect(instance.find(EuiRange).prop('value')).toEqual('107'); + // useDebounce only runs on initialization + expect(onChangeSpy.mock.calls.length).toBe(2); + expect(onChangeSpy.mock.calls[0][0]).toBe(5); + expect(onChangeSpy.mock.calls[1][0]).toBe(100); + }); +}); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx new file mode 100644 index 0000000000000..6bfde4b652571 --- /dev/null +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx @@ -0,0 +1,50 @@ +/* + * 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, { useState } from 'react'; +import { useDebounce } from 'react-use'; +import { i18n } from '@kbn/i18n'; +import { EuiRange } from '@elastic/eui'; + +export const ValuesRangeInput = ({ + value, + onChange, +}: { + value: number; + onChange: (value: number) => void; +}) => { + const MIN_NUMBER_OF_VALUES = 1; + const MAX_NUMBER_OF_VALUES = 100; + + const [inputValue, setInputValue] = useState(String(value)); + useDebounce( + () => { + if (inputValue === '') { + return; + } + const inputNumber = Number(inputValue); + onChange(Math.min(MAX_NUMBER_OF_VALUES, Math.max(inputNumber, MIN_NUMBER_OF_VALUES))); + }, + 256, + [inputValue] + ); + + return ( + setInputValue(currentTarget.value)} + aria-label={i18n.translate('xpack.lens.indexPattern.terms.size', { + defaultMessage: 'Number of values', + })} + /> + ); +}; From 8948811c634ba2e4c7a4c9881b6834f7577440a0 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Thu, 1 Oct 2020 12:54:48 +0200 Subject: [PATCH 23/39] fix: add EuiOutsideClickDetector (#78733) Co-authored-by: Elastic Machine --- .../config_panel/dimension_container.tsx | 63 ++++++++++--------- 1 file changed, 33 insertions(+), 30 deletions(-) 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 d6b395ac74cce..a415eb44cf196 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 @@ -13,6 +13,7 @@ import { EuiButtonEmpty, EuiFlexItem, EuiFocusTrap, + EuiOutsideClickDetector, } from '@elastic/eui'; import classNames from 'classnames'; @@ -91,37 +92,39 @@ export function DimensionContainer({ const flyout = flyoutIsVisible && ( -
- - - - {panelTitle} + +
+ + + + {panelTitle} + + + + + {panel} + + + + {i18n.translate('xpack.lens.dimensionContainer.close', { + defaultMessage: 'Close', + })} - - - - {panel} - - - - {i18n.translate('xpack.lens.dimensionContainer.close', { - defaultMessage: 'Close', - })} - - -
+ +
+ ); From 3024513e107a7411a0a6b4aadc5ba362f13ce0e2 Mon Sep 17 00:00:00 2001 From: Mikhail Shustov Date: Thu, 1 Oct 2020 14:05:59 +0300 Subject: [PATCH 24/39] [KP] instrument platform server-side code with apm agent (#70919) * instrument platform server-side code with apm agent: setup, start lifecycles and SO migration * add span type * span should have name: saved_objects.migration * remove migration reports * put migration span back --- src/core/server/server.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/core/server/server.ts b/src/core/server/server.ts index 5935636d54f9d..4e5a7a328bed4 100644 --- a/src/core/server/server.ts +++ b/src/core/server/server.ts @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ - +import apm from 'elastic-apm-node'; import { config as pathConfig } from '@kbn/utils'; import { mapToObject } from '@kbn/std'; import { ConfigService, Env, RawConfigurationProvider, coreDeprecationProvider } from './config'; @@ -106,6 +106,7 @@ export class Server { public async setup() { this.log.debug('setting up server'); + const setupTransaction = apm.startTransaction('server_setup', 'kibana_platform'); const environmentSetup = await this.environment.setup(); @@ -207,20 +208,25 @@ export class Server { this.registerCoreContext(coreSetup); this.coreApp.setup(coreSetup); + setupTransaction?.end(); return coreSetup; } public async start() { this.log.debug('starting server'); + const startTransaction = apm.startTransaction('server_start', 'kibana_platform'); + const auditTrailStart = this.auditTrail.start(); const elasticsearchStart = await this.elasticsearch.start({ auditTrail: auditTrailStart, }); + const soStartSpan = startTransaction?.startSpan('saved_objects.migration', 'migration'); const savedObjectsStart = await this.savedObjects.start({ elasticsearch: elasticsearchStart, pluginsInitialized: this.#pluginsInitialized, }); + soStartSpan?.end(); const capabilitiesStart = this.capabilities.start(); const uiSettingsStart = await this.uiSettings.start(); const metricsStart = await this.metrics.start(); @@ -248,6 +254,7 @@ export class Server { await this.http.start(); + startTransaction?.end(); return this.coreStart; } From cbc83003d35a3b0016d241100fb12d357c4bbc09 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 1 Oct 2020 14:21:34 +0300 Subject: [PATCH 25/39] [Actions][Jira] Fix bug with Jira sub-task (#79070) --- .../builtin_action_types/jira/service.test.ts | 2 +- .../builtin_action_types/jira/service.ts | 5 +- .../builtin_action_types/jira/api.test.ts | 159 ++++++++++++++++++ .../builtin_action_types/jira/api.ts | 2 +- .../jira/use_get_fields_by_issue_type.tsx | 1 + .../jira/use_get_issue_types.tsx | 1 + .../jira/use_get_issues.tsx | 1 + .../jira/use_get_single_issue.tsx | 3 +- .../resilient/use_get_incident_types.tsx | 1 + .../resilient/use_get_severity.tsx | 1 + 10 files changed, 172 insertions(+), 4 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.test.ts diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts index 605c05e2a9f25..fe4e135c76fc3 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/service.test.ts @@ -965,7 +965,7 @@ describe('Jira service', () => { axios, logger, method: 'get', - url: `https://siem-kibana.atlassian.net/rest/api/2/search?jql=project=CK and summary ~"Test title"`, + url: `https://siem-kibana.atlassian.net/rest/api/2/search?jql=project%3D%22CK%22%20and%20summary%20~%22Test%20title%22`, }); }); diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts index 7429c3d36d7b0..f52d3fa2efd37 100644 --- a/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts +++ b/x-pack/plugins/actions/server/builtin_action_types/jira/service.ts @@ -396,7 +396,10 @@ export const createExternalService = ( }; const getIssues = async (title: string) => { - const query = `${searchUrl}?jql=project=${projectKey} and summary ~"${title}"`; + const query = `${searchUrl}?jql=${encodeURIComponent( + `project="${projectKey}" and summary ~"${title}"` + )}`; + try { const res = await request({ axios: axiosInstance, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.test.ts new file mode 100644 index 0000000000000..d5474aaceaa48 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.test.ts @@ -0,0 +1,159 @@ +/* + * 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 { httpServiceMock } from '../../../../../../../../src/core/public/mocks'; +import { getIssueTypes, getFieldsByIssueType, getIssues, getIssue } from './api'; + +const issueTypesResponse = { + data: { + projects: [ + { + issuetypes: [ + { + id: '10006', + name: 'Task', + }, + { + id: '10007', + name: 'Bug', + }, + ], + }, + ], + }, +}; + +const fieldsResponse = { + data: { + projects: [ + { + issuetypes: [ + { + id: '10006', + name: 'Task', + fields: { + summary: { fieldId: 'summary' }, + priority: { + fieldId: 'priority', + allowedValues: [ + { + name: 'Highest', + id: '1', + }, + { + name: 'High', + id: '2', + }, + { + name: 'Medium', + id: '3', + }, + { + name: 'Low', + id: '4', + }, + { + name: 'Lowest', + id: '5', + }, + ], + defaultValue: { + name: 'Medium', + id: '3', + }, + }, + }, + }, + ], + }, + ], + }, +}; + +const issueResponse = { + id: '10267', + key: 'RJ-107', + fields: { summary: 'Test title' }, +}; + +const issuesResponse = [issueResponse]; + +describe('Jira API', () => { + const http = httpServiceMock.createStartContract(); + + beforeEach(() => jest.resetAllMocks()); + + describe('getIssueTypes', () => { + test('should call get issue types API', async () => { + const abortCtrl = new AbortController(); + http.post.mockResolvedValueOnce(issueTypesResponse); + const res = await getIssueTypes({ http, signal: abortCtrl.signal, connectorId: 'test' }); + + expect(res).toEqual(issueTypesResponse); + expect(http.post).toHaveBeenCalledWith('/api/actions/action/test/_execute', { + body: '{"params":{"subAction":"issueTypes","subActionParams":{}}}', + signal: abortCtrl.signal, + }); + }); + }); + + describe('getFieldsByIssueType', () => { + test('should call get fields API', async () => { + const abortCtrl = new AbortController(); + http.post.mockResolvedValueOnce(fieldsResponse); + const res = await getFieldsByIssueType({ + http, + signal: abortCtrl.signal, + connectorId: 'test', + id: '10006', + }); + + expect(res).toEqual(fieldsResponse); + expect(http.post).toHaveBeenCalledWith('/api/actions/action/test/_execute', { + body: '{"params":{"subAction":"fieldsByIssueType","subActionParams":{"id":"10006"}}}', + signal: abortCtrl.signal, + }); + }); + }); + + describe('getIssues', () => { + test('should call get fields API', async () => { + const abortCtrl = new AbortController(); + http.post.mockResolvedValueOnce(issuesResponse); + const res = await getIssues({ + http, + signal: abortCtrl.signal, + connectorId: 'test', + title: 'test issue', + }); + + expect(res).toEqual(issuesResponse); + expect(http.post).toHaveBeenCalledWith('/api/actions/action/test/_execute', { + body: '{"params":{"subAction":"issues","subActionParams":{"title":"test issue"}}}', + signal: abortCtrl.signal, + }); + }); + }); + + describe('getIssue', () => { + test('should call get fields API', async () => { + const abortCtrl = new AbortController(); + http.post.mockResolvedValueOnce(issuesResponse); + const res = await getIssue({ + http, + signal: abortCtrl.signal, + connectorId: 'test', + id: 'RJ-107', + }); + + expect(res).toEqual(issuesResponse); + expect(http.post).toHaveBeenCalledWith('/api/actions/action/test/_execute', { + body: '{"params":{"subAction":"issue","subActionParams":{"id":"RJ-107"}}}', + signal: abortCtrl.signal, + }); + }); + }); +}); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts index bc9fee042a9a6..c209244c64404 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts @@ -75,7 +75,7 @@ export async function getIssue({ }): Promise> { return await http.post(`${BASE_ACTION_API_PATH}/action/${connectorId}/_execute`, { body: JSON.stringify({ - params: { subAction: 'getIncident', subActionParams: { id } }, + params: { subAction: 'issue', subActionParams: { id } }, }), signal, }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx index 08715822e5277..8685ee1e615b0 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx @@ -72,6 +72,7 @@ export const useGetFieldsByIssueType = ({ } } catch (error) { if (!didCancel) { + setIsLoading(false); toastNotifications.addDanger({ title: i18n.FIELDS_API_ERROR, text: error.message, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issue_types.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issue_types.tsx index 9ebaf5882d9b9..bdc9a57507441 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issue_types.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issue_types.tsx @@ -65,6 +65,7 @@ export const useGetIssueTypes = ({ } } catch (error) { if (!didCancel) { + setIsLoading(false); toastNotifications.addDanger({ title: i18n.ISSUE_TYPES_API_ERROR, text: error.message, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx index d6590b8c70939..8015390d29e3c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_issues.tsx @@ -69,6 +69,7 @@ export const useGetIssues = ({ } } catch (error) { if (!didCancel) { + setIsLoading(false); toastNotifications.addDanger({ title: i18n.ISSUES_API_ERROR, text: error.message, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx index 7df9834f1bd85..c0d2eae14bead 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx @@ -61,7 +61,7 @@ export const useGetSingleIssue = ({ if (!didCancel) { setIsLoading(false); - setIssue(res.data ?? {}); + setIssue(res.data ?? null); if (res.status && res.status === 'error') { toastNotifications.addDanger({ title: i18n.GET_ISSUE_API_ERROR(id), @@ -71,6 +71,7 @@ export const useGetSingleIssue = ({ } } catch (error) { if (!didCancel) { + setIsLoading(false); toastNotifications.addDanger({ title: i18n.GET_ISSUE_API_ERROR(id), text: error.message, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_incident_types.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_incident_types.tsx index 219c6ac77d08d..c2a2268ddb736 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_incident_types.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_incident_types.tsx @@ -65,6 +65,7 @@ export const useGetIncidentTypes = ({ } } catch (error) { if (!didCancel) { + setIsLoading(false); toastNotifications.addDanger({ title: i18n.INCIDENT_TYPES_API_ERROR, text: error.message, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_severity.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_severity.tsx index 83689254f000f..a06fafcf8c10e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_severity.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/use_get_severity.tsx @@ -66,6 +66,7 @@ export const useGetSeverity = ({ } } catch (error) { if (!didCancel) { + setIsLoading(false); toastNotifications.addDanger({ title: i18n.SEVERITY_API_ERROR, text: error.message, From 8d7f2d0828e463b2dadaf10bdff23910401fb134 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Thu, 1 Oct 2020 13:39:10 +0200 Subject: [PATCH 26/39] [Lens] Handle missing fields gracefully (#78173) --- .../dimension_panel/bucket_nesting_editor.tsx | 9 +- .../dimension_panel/dimension_editor.tsx | 210 ++++++++++-------- .../dimension_panel/dimension_panel.test.tsx | 30 +++ .../dimension_panel/dimension_panel.tsx | 61 ++++- .../dimension_panel/field_select.tsx | 8 +- .../indexpattern_suggestions.test.tsx | 42 +++- .../indexpattern_suggestions.ts | 4 +- .../public/indexpattern_datasource/utils.ts | 36 +++ 8 files changed, 295 insertions(+), 105 deletions(-) diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx index 3d692b1f7f5a8..962abd8d943db 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx @@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n'; import { EuiFormRow, EuiHorizontalRule, EuiRadio, EuiSelect, htmlIdGenerator } from '@elastic/eui'; import { IndexPatternLayer, IndexPatternField } from '../types'; import { hasField } from '../utils'; +import { IndexPatternColumn } from '../operations'; const generator = htmlIdGenerator('lens-nesting'); @@ -21,6 +22,10 @@ function nestColumn(columnOrder: string[], outer: string, inner: string) { return result; } +function getFieldName(fieldMap: Record, column: IndexPatternColumn) { + return hasField(column) ? fieldMap[column.sourceField]?.displayName || column.sourceField : ''; +} + export function BucketNestingEditor({ columnId, layer, @@ -39,7 +44,7 @@ export function BucketNestingEditor({ .map(([value, c]) => ({ value, text: c.label, - fieldName: hasField(c) ? fieldMap[c.sourceField].displayName : '', + fieldName: getFieldName(fieldMap, c), operationType: c.operationType, })); @@ -47,7 +52,7 @@ export function BucketNestingEditor({ return null; } - const fieldName = hasField(column) ? fieldMap[column.sourceField].displayName : ''; + const fieldName = getFieldName(fieldMap, column); const prevColumn = layer.columnOrder[layer.columnOrder.indexOf(columnId) - 1]; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx index bd99bd16a63a8..b0d24928b794e 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx @@ -26,7 +26,7 @@ import { } from '../operations'; import { deleteColumn, changeColumn, updateColumnParam } from '../state_helpers'; import { FieldSelect } from './field_select'; -import { hasField } from '../utils'; +import { hasField, fieldIsInvalid } from '../utils'; import { BucketNestingEditor } from './bucket_nesting_editor'; import { IndexPattern, IndexPatternField } from '../types'; import { trackUiEvent } from '../../lens_ui_telemetry'; @@ -132,6 +132,15 @@ export function DimensionEditor(props: DimensionEditorProps) { }; }); + const selectedColumnSourceField = + selectedColumn && 'sourceField' in selectedColumn ? selectedColumn.sourceField : undefined; + + const currentFieldIsInvalid = useMemo( + () => + fieldIsInvalid(selectedColumnSourceField, selectedColumn?.operationType, currentIndexPattern), + [selectedColumnSourceField, selectedColumn?.operationType, currentIndexPattern] + ); + const sideNavItems: EuiListGroupItemProps[] = operationsWithCompatibility.map( ({ operationType, compatibleWithCurrentField }) => { const isActive = Boolean( @@ -271,20 +280,16 @@ export function DimensionEditor(props: DimensionEditorProps) { defaultMessage: 'Choose a field', })} fullWidth - isInvalid={Boolean(incompatibleSelectedOperationType)} - error={ - selectedColumn && incompatibleSelectedOperationType - ? selectedOperationDefinition?.input === 'field' - ? i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', { - defaultMessage: 'To use this function, select a different field.', - }) - : i18n.translate('xpack.lens.indexPattern.chooseFieldLabel', { - defaultMessage: 'To use this function, select a field.', - }) - : undefined - } + isInvalid={Boolean(incompatibleSelectedOperationType || currentFieldIsInvalid)} + error={getErrorMessage( + selectedColumn, + Boolean(incompatibleSelectedOperationType), + selectedOperationDefinition?.input, + currentFieldIsInvalid + )} > ) : null} - {!incompatibleSelectedOperationType && selectedColumn && ParamEditor && ( - <> - - - )} + {!currentFieldIsInvalid && + !incompatibleSelectedOperationType && + selectedColumn && + ParamEditor && ( + <> + + + )}
-
- {!incompatibleSelectedOperationType && selectedColumn && ( - { - setState({ - ...state, - layers: { - ...state.layers, - [layerId]: { - ...state.layers[layerId], - columns: { - ...state.layers[layerId].columns, - [columnId]: { - ...selectedColumn, - label: value, - customLabel: true, + {!currentFieldIsInvalid && ( +
+ {!incompatibleSelectedOperationType && selectedColumn && ( + { + setState({ + ...state, + layers: { + ...state.layers, + [layerId]: { + ...state.layers[layerId], + columns: { + ...state.layers[layerId].columns, + [columnId]: { + ...selectedColumn, + label: value, + customLabel: true, + }, }, }, }, - }, - }); - }} - /> - )} - - {!hideGrouping && ( - { - setState({ - ...state, - layers: { - ...state.layers, - [props.layerId]: { - ...state.layers[props.layerId], - columnOrder, + }); + }} + /> + )} + + {!hideGrouping && ( + { + setState({ + ...state, + layers: { + ...state.layers, + [props.layerId]: { + ...state.layers[props.layerId], + columnOrder, + }, }, - }, - }); - }} - /> - )} - - {selectedColumn && selectedColumn.dataType === 'number' ? ( - { - setState( - updateColumnParam({ - state, - layerId, - currentColumn: selectedColumn, - paramName: 'format', - value: newFormat, - }) - ); - }} - /> - ) : null} -
+ }); + }} + /> + )} + + {selectedColumn && selectedColumn.dataType === 'number' ? ( + { + setState( + updateColumnParam({ + state, + layerId, + currentColumn: selectedColumn, + paramName: 'format', + value: newFormat, + }) + ); + }} + /> + ) : null} +
+ )}

); } +function getErrorMessage( + selectedColumn: IndexPatternColumn | undefined, + incompatibleSelectedOperationType: boolean, + input: 'none' | 'field' | undefined, + fieldInvalid: boolean +) { + if (selectedColumn && incompatibleSelectedOperationType) { + if (input === 'field') { + return i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', { + defaultMessage: 'To use this function, select a different field.', + }); + } + return i18n.translate('xpack.lens.indexPattern.chooseFieldLabel', { + defaultMessage: 'To use this function, select a field.', + }); + } + if (fieldInvalid) { + return i18n.translate('xpack.lens.indexPattern.invalidFieldLabel', { + defaultMessage: 'Invalid field. Check your index pattern or pick another field.', + }); + } +} diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx index 270f9d9f67063..d15825718682c 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx @@ -25,6 +25,7 @@ import { IndexPatternPrivateState } from '../types'; import { IndexPatternColumn } from '../operations'; import { documentField } from '../document_field'; import { OperationMetadata } from '../../types'; +import { DateHistogramIndexPatternColumn } from '../operations/definitions/date_histogram'; jest.mock('../loader'); jest.mock('../state_helpers'); @@ -801,6 +802,35 @@ describe('IndexPatternDimensionEditorPanel', () => { }); }); + it('should render invalid field if field reference is broken', () => { + wrapper = mount( + + ); + + expect(wrapper.find(EuiComboBox).prop('selectedOptions')).toEqual([ + { + label: 'nonexistent', + value: { type: 'field', field: 'nonexistent' }, + }, + ]); + }); + it('should support selecting the operation before the field', () => { wrapper = mount(); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx index c4d8300722f83..6f0a9c2a86acd 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx @@ -5,9 +5,9 @@ */ import _ from 'lodash'; -import React, { memo } from 'react'; +import React, { memo, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiLink } from '@elastic/eui'; +import { EuiLink, EuiIcon, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public'; import { IStorageWrapper } from 'src/plugins/kibana_utils/public'; import { @@ -22,7 +22,7 @@ import { IndexPatternColumn, OperationType } from '../indexpattern'; import { getAvailableOperationsByMetadata, buildColumn, changeField } from '../operations'; import { DimensionEditor } from './dimension_editor'; import { changeColumn } from '../state_helpers'; -import { isDraggedField, hasField } from '../utils'; +import { isDraggedField, hasField, fieldIsInvalid } from '../utils'; import { IndexPatternPrivateState, IndexPatternField } from '../types'; import { trackUiEvent } from '../../lens_ui_telemetry'; import { DateRange } from '../../../common'; @@ -233,14 +233,63 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens props: IndexPatternDimensionTriggerProps ) { const layerId = props.layerId; - - const selectedColumn: IndexPatternColumn | null = - props.state.layers[layerId].columns[props.columnId] || null; + const layer = props.state.layers[layerId]; + const selectedColumn: IndexPatternColumn | null = layer.columns[props.columnId] || null; + const currentIndexPattern = props.state.indexPatterns[layer.indexPatternId]; + + const selectedColumnSourceField = + selectedColumn && 'sourceField' in selectedColumn ? selectedColumn.sourceField : undefined; + const currentFieldIsInvalid = useMemo( + () => + fieldIsInvalid(selectedColumnSourceField, selectedColumn?.operationType, currentIndexPattern), + [selectedColumnSourceField, selectedColumn?.operationType, currentIndexPattern] + ); const { columnId, uniqueLabel } = props; if (!selectedColumn) { return null; } + + if (currentFieldIsInvalid) { + return ( + + {i18n.translate('xpack.lens.configure.invalidConfigTooltip', { + defaultMessage: 'Invalid configuration.', + })} +
+ {i18n.translate('xpack.lens.configure.invalidConfigTooltipClick', { + defaultMessage: 'Click for more details.', + })} +

+ } + anchorClassName="lnsLayerPanel__anchor" + > + + + + + + {selectedColumn.label} + + + + ); + } + return ( { onChoose: (choice: FieldChoice) => void; onDeleteColumn: () => void; existingFields: IndexPatternPrivateState['existingFields']; + fieldIsInvalid: boolean; } export function FieldSelect({ @@ -53,6 +54,7 @@ export function FieldSelect({ onChoose, onDeleteColumn, existingFields, + fieldIsInvalid, ...rest }: FieldSelectProps) { const { operationByField } = operationSupportMatrix; @@ -171,12 +173,14 @@ export function FieldSelect({ defaultMessage: 'Field', })} options={(memoizedFieldOptions as unknown) as EuiComboBoxOptionOption[]} - isInvalid={Boolean(incompatibleSelectedOperationType)} + isInvalid={Boolean(incompatibleSelectedOperationType || fieldIsInvalid)} selectedOptions={ ((selectedColumnOperationType && selectedColumnSourceField ? [ { - label: fieldMap[selectedColumnSourceField].displayName, + label: fieldIsInvalid + ? selectedColumnSourceField + : fieldMap[selectedColumnSourceField]?.displayName, value: { type: 'field', field: selectedColumnSourceField }, }, ] diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.test.tsx index 663d7c18bb370..80765627c1fc2 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.test.tsx @@ -147,7 +147,7 @@ function testInitialState(): IndexPatternPrivateState { // Private operationType: 'terms', - sourceField: 'op', + sourceField: 'dest', params: { size: 5, orderBy: { type: 'alphabetical' }, @@ -1115,7 +1115,7 @@ describe('IndexPattern Data Source suggestions', () => { // Private operationType: 'terms', - sourceField: 'op', + sourceField: 'dest', params: { size: 5, orderBy: { type: 'alphabetical' }, @@ -1615,7 +1615,7 @@ describe('IndexPattern Data Source suggestions', () => { isBucketed: true, operationType: 'date_histogram', - sourceField: 'field2', + sourceField: 'timestamp', params: { interval: 'd', }, @@ -1626,7 +1626,7 @@ describe('IndexPattern Data Source suggestions', () => { isBucketed: true, operationType: 'terms', - sourceField: 'field1', + sourceField: 'dest', params: { size: 5, orderBy: { type: 'alphabetical' }, orderDirection: 'asc' }, }, id3: { @@ -1635,7 +1635,7 @@ describe('IndexPattern Data Source suggestions', () => { isBucketed: false, operationType: 'avg', - sourceField: 'field1', + sourceField: 'bytes', }, }, columnOrder: ['id1', 'id2', 'id3'], @@ -1652,6 +1652,38 @@ describe('IndexPattern Data Source suggestions', () => { }) ); }); + + it('does not generate suggestions if invalid fields are referenced', () => { + const initialState = testInitialState(); + const state: IndexPatternPrivateState = { + indexPatternRefs: [], + existingFields: {}, + currentIndexPatternId: '1', + indexPatterns: expectedIndexPatterns, + isFirstExistenceFetch: false, + layers: { + first: { + ...initialState.layers.first, + columns: { + ...initialState.layers.first.columns, + col2: { + label: 'Top 5', + dataType: 'string', + isBucketed: true, + + operationType: 'terms', + sourceField: 'nonExistingField', + params: { size: 5, orderBy: { type: 'alphabetical' }, orderDirection: 'asc' }, + }, + }, + columnOrder: ['col1', 'col2'], + }, + }, + }; + + const suggestions = getDatasourceSuggestionsFromCurrentState(state); + expect(suggestions).toEqual([]); + }); }); }); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.ts b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.ts index f5e64149c2c76..75945529ffb34 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.ts @@ -18,7 +18,7 @@ import { } from './operations'; import { operationDefinitions } from './operations/definitions'; import { TermsIndexPatternColumn } from './operations/definitions/terms'; -import { hasField } from './utils'; +import { hasField, hasInvalidReference } from './utils'; import { IndexPattern, IndexPatternPrivateState, @@ -90,6 +90,7 @@ export function getDatasourceSuggestionsForField( indexPatternId: string, field: IndexPatternField ): IndexPatternSugestion[] { + if (hasInvalidReference(state)) return []; const layers = Object.keys(state.layers); const layerIds = layers.filter((id) => state.layers[id].indexPatternId === indexPatternId); @@ -380,6 +381,7 @@ function createNewLayerWithMetricAggregation( export function getDatasourceSuggestionsFromCurrentState( state: IndexPatternPrivateState ): Array> { + if (hasInvalidReference(state)) return []; const layers = Object.entries(state.layers || {}); if (layers.length > 1) { // Return suggestions that reduce the data to each layer individually diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts b/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts index 374dbe77b4ca3..f1d2e7765d99f 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts @@ -5,11 +5,13 @@ */ import { DataType } from '../types'; +import { IndexPatternPrivateState, IndexPattern } from './types'; import { DraggedField } from './indexpattern'; import { BaseIndexPatternColumn, FieldBasedIndexPatternColumn, } from './operations/definitions/column_types'; +import { operationDefinitionMap, OperationType } from './operations'; /** * Normalizes the specified operation type. (e.g. document operations @@ -40,3 +42,37 @@ export function isDraggedField(fieldCandidate: unknown): fieldCandidate is Dragg 'indexPatternId' in fieldCandidate ); } + +export function hasInvalidReference(state: IndexPatternPrivateState) { + return Object.values(state.layers).some((layer) => { + return layer.columnOrder.some((columnId) => { + const column = layer.columns[columnId]; + return ( + hasField(column) && + fieldIsInvalid( + column.sourceField, + column.operationType, + state.indexPatterns[layer.indexPatternId] + ) + ); + }); + }); +} + +export function fieldIsInvalid( + sourceField: string | undefined, + operationType: OperationType | undefined, + indexPattern: IndexPattern +) { + const operationDefinition = operationType && operationDefinitionMap[operationType]; + return Boolean( + sourceField && + operationDefinition && + !indexPattern.fields.some( + (field) => + field.name === sourceField && + operationDefinition.input === 'field' && + operationDefinition.getPossibleOperationForField(field) !== undefined + ) + ); +} From 4d5a9df76c8aa37b19ace411d72d1cbf941fcb9a Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 1 Oct 2020 13:49:05 +0200 Subject: [PATCH 27/39] @testing-library remove "pure" hack (#78742) Co-authored-by: Elastic Machine --- src/dev/jest/setup/react_testing_library.js | 11 +++++------ .../lib/embeddables/embeddable_renderer.test.tsx | 4 +--- .../public/lib/embeddables/error_embeddable.test.tsx | 5 +---- .../public/markdown_vis_controller.test.tsx | 5 +---- .../actions/flyout_edit_drilldown/menu_item.test.tsx | 4 +--- .../components/action_wizard/action_wizard.test.tsx | 6 +----- .../connected_flyout_manage_drilldowns.test.tsx | 5 +---- .../components/flyout_frame/flyout_frame.test.tsx | 4 +--- .../form_drilldown_wizard.test.tsx | 4 +--- .../list_manage_drilldowns.test.tsx | 6 +----- .../url_drilldown_collect_config.test.tsx | 4 +--- 11 files changed, 15 insertions(+), 43 deletions(-) diff --git a/src/dev/jest/setup/react_testing_library.js b/src/dev/jest/setup/react_testing_library.js index 84b5b6096e79b..90f73b04dc210 100644 --- a/src/dev/jest/setup/react_testing_library.js +++ b/src/dev/jest/setup/react_testing_library.js @@ -19,14 +19,13 @@ import '@testing-library/jest-dom'; /** - * Have to import "/pure" here to not register afterEach() hook clean up - * in the very beginning. There are couple tests which fail with clean up hook. - * On CI they run before first test which imports '@testing-library/react' - * and registers afterEach hook so the whole suite is passing. - * This have to be fixed as we depend on test order execution + * PLEASE NOTE: + * Importing '@testing-library/react' registers an `afterEach(cleanup)` side effect. + * It has tricky code that flushes pending promises, that previously led to unpredictable test failures * https://github.com/elastic/kibana/issues/59469 + * But since newer versions it has stabilised itself */ -import { configure } from '@testing-library/react/pure'; +import { configure } from '@testing-library/react'; // instead of default 'data-testid', use kibana's 'data-test-subj' configure({ testIdAttribute: 'data-test-subj', asyncUtilTimeout: 4500 }); diff --git a/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx b/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx index 51213288e47a7..f9be9d5bfade7 100644 --- a/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx +++ b/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { wait } from '@testing-library/dom'; -import { cleanup, render } from '@testing-library/react/pure'; +import { render } from '@testing-library/react'; import { HelloWorldEmbeddable, HelloWorldEmbeddableFactoryDefinition, @@ -29,8 +29,6 @@ import { EmbeddableRenderer } from './embeddable_renderer'; import { embeddablePluginMock } from '../../mocks'; describe('', () => { - afterEach(cleanup); - test('Render embeddable', () => { const embeddable = new HelloWorldEmbeddable({ id: 'hello' }); const { getByTestId } = render(); diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx index 17a2ac3b2a32b..cb14d7ed11dc9 100644 --- a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx +++ b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx @@ -17,13 +17,10 @@ * under the License. */ import React from 'react'; -import { wait } from '@testing-library/dom'; -import { cleanup, render } from '@testing-library/react/pure'; +import { wait, render } from '@testing-library/react'; import { ErrorEmbeddable } from './error_embeddable'; import { EmbeddableRoot } from './embeddable_root'; -afterEach(cleanup); - test('ErrorEmbeddable renders an embeddable', async () => { const embeddable = new ErrorEmbeddable('some error occurred', { id: '123', title: 'Error' }); const { getByTestId, getByText } = render(); diff --git a/src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx b/src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx index 36850fc820ded..7bc8cdbd14170 100644 --- a/src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx +++ b/src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx @@ -18,12 +18,9 @@ */ import React from 'react'; -import { wait } from '@testing-library/dom'; -import { render, cleanup } from '@testing-library/react/pure'; +import { wait, render } from '@testing-library/react'; import MarkdownVisComponent from './markdown_vis_controller'; -afterEach(cleanup); - describe('markdown vis controller', () => { it('should set html from markdown params', async () => { const vis = { diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx index 771b15e46ad25..27a8d73f32944 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx @@ -5,14 +5,12 @@ */ import React from 'react'; -import { render, cleanup, act } from '@testing-library/react/pure'; +import { render, act } from '@testing-library/react'; import { MenuItem } from './menu_item'; import { createStateContainer } from '../../../../../../../../src/plugins/kibana_utils/public'; import { UiActionsEnhancedDynamicActionManager as DynamicActionManager } from '../../../../../../ui_actions_enhanced/public'; import { EnhancedEmbeddable } from '../../../../../../embeddable_enhanced/public'; -afterEach(cleanup); - test('', () => { const state = createStateContainer<{ events: object[] }>({ events: [] }); const { getByText, queryByText } = render( diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx index 26033b7f020ad..11ccb0d5f0c2d 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx @@ -5,7 +5,7 @@ */ import React from 'react'; -import { cleanup, fireEvent, render } from '@testing-library/react/pure'; +import { fireEvent, render } from '@testing-library/react'; import { TEST_SUBJ_ACTION_FACTORY_ITEM, TEST_SUBJ_SELECTED_ACTION_FACTORY } from './action_wizard'; import { dashboardFactory, @@ -17,10 +17,6 @@ import { import { ActionFactory } from '../../dynamic_actions'; import { licensingMock } from '../../../../licensing/public/mocks'; -// TODO: afterEach is not available for it globally during setup -// https://github.com/elastic/kibana/issues/59469 -afterEach(cleanup); - test('Pick and configure action', () => { const screen = render(); 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 a546fabfbbc01..48dbd5a864170 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 @@ -5,7 +5,7 @@ */ import React from 'react'; -import { cleanup, fireEvent, render, wait } from '@testing-library/react/pure'; +import { fireEvent, render, wait, cleanup } from '@testing-library/react'; import { createFlyoutManageDrilldowns } from './connected_flyout_manage_drilldowns'; import { mockGetTriggerInfo, @@ -30,9 +30,6 @@ const FlyoutManageDrilldowns = createFlyoutManageDrilldowns({ getTrigger: mockGetTriggerInfo, }); -// https://github.com/elastic/kibana/issues/59469 -afterEach(cleanup); - beforeEach(() => { storage.clear(); mockDynamicActionManager.state.set({ ...mockDynamicActionManager.state.get(), events: [] }); diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx index cdbf36d81de33..86679d393b17f 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx @@ -6,11 +6,9 @@ import React from 'react'; import { render } from 'react-dom'; -import { render as renderTestingLibrary, fireEvent, cleanup } from '@testing-library/react/pure'; +import { render as renderTestingLibrary, fireEvent } from '@testing-library/react'; import { FlyoutFrame } from './index'; -afterEach(cleanup); - describe('', () => { test('renders without crashing', () => { const div = document.createElement('div'); 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 0dcca84ede3bf..614679ed02a41 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 @@ -7,12 +7,10 @@ import React from 'react'; import { render } from 'react-dom'; import { FormDrilldownWizard } from './form_drilldown_wizard'; -import { render as renderTestingLibrary, fireEvent, cleanup } from '@testing-library/react/pure'; +import { render as renderTestingLibrary, fireEvent } from '@testing-library/react'; import { txtNameOfDrilldown } from './i18n'; import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public'; -afterEach(cleanup); - const otherProps = { actionFactoryContext: { triggers: [] as TriggerId[] }, supportedTriggers: [ diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx index 889f8983254d5..5bf11e31aee89 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx @@ -5,17 +5,13 @@ */ import React from 'react'; -import { cleanup, fireEvent, render } from '@testing-library/react/pure'; +import { fireEvent, render } from '@testing-library/react'; import { DrilldownListItem, ListManageDrilldowns, TEST_SUBJ_DRILLDOWN_ITEM, } from './list_manage_drilldowns'; -// TODO: for some reason global cleanup from RTL doesn't work -// afterEach is not available for it globally during setup -afterEach(cleanup); - const drilldowns: DrilldownListItem[] = [ { id: '1', actionName: 'Dashboard', drilldownName: 'Drilldown 1' }, { id: '2', actionName: 'Dashboard', drilldownName: 'Drilldown 2' }, diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx index f55818379ef3f..a30c880c3d430 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx @@ -5,11 +5,9 @@ */ import { Demo } from './test_samples/demo'; -import { cleanup, fireEvent, render } from '@testing-library/react/pure'; +import { fireEvent, render } from '@testing-library/react'; import React from 'react'; -afterEach(cleanup); - test('configure valid URL template', () => { const screen = render(); From d793040082040c02a30a12c6fcdc27d740467001 Mon Sep 17 00:00:00 2001 From: Marco Liberati Date: Thu, 1 Oct 2020 14:25:59 +0200 Subject: [PATCH 28/39] [Lens] Histogram/range operation new copy (#78328) * :speech_balloon: New copy revision for histogram/range operation in lens * :ok_hand: Updated panel copy * :ok_hand: Change copy based on feedback --- .../dimension_panel/dimension_editor.tsx | 4 +-- .../definitions/ranges/advanced_editor.tsx | 12 ++++----- .../definitions/ranges/range_editor.tsx | 25 ++++++++++++++++--- .../operations/definitions/ranges/ranges.tsx | 4 +-- 4 files changed, 31 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx index b0d24928b794e..0e33c20faff7e 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx @@ -257,7 +257,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
{i18n.translate('xpack.lens.indexPattern.functionsLabel', { - defaultMessage: 'Choose a function', + defaultMessage: 'Select a function', })} @@ -277,7 +277,7 @@ export function DimensionEditor(props: DimensionEditorProps) { {' '} - {i18n.translate('xpack.lens.indexPattern.ranges.customIntervalsRemoval', { - defaultMessage: 'Remove custom intervals', + {i18n.translate('xpack.lens.indexPattern.ranges.customRangesRemoval', { + defaultMessage: 'Remove custom ranges', })} @@ -286,8 +286,8 @@ export const AdvancedRangeEditor = ({ addNewRange(); setIsOpenByCreation(true); }} - label={i18n.translate('xpack.lens.indexPattern.ranges.addInterval', { - defaultMessage: 'Add interval', + label={i18n.translate('xpack.lens.indexPattern.ranges.addRange', { + defaultMessage: 'Add range', })} /> diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/range_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/range_editor.tsx index 5d5acf7778973..8ed17a813e7fd 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/range_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/range_editor.tsx @@ -15,6 +15,7 @@ import { EuiFlexGroup, EuiButtonIcon, EuiToolTip, + EuiIconTip, } from '@elastic/eui'; import { IFieldFormat } from 'src/plugins/data/public'; import { RangeColumnParams, UpdateParamsFnType, MODES_TYPES } from './ranges'; @@ -45,8 +46,14 @@ const BaseRangeEditor = ({ ); const granularityLabel = i18n.translate('xpack.lens.indexPattern.ranges.granularity', { - defaultMessage: 'Granularity', + defaultMessage: 'Intervals granularity', }); + const granularityLabelDescription = i18n.translate( + 'xpack.lens.indexPattern.ranges.granularityDescription', + { + defaultMessage: 'Divides the field into evenly spaced intervals.', + } + ); const decreaseButtonLabel = i18n.translate('xpack.lens.indexPattern.ranges.decreaseButtonLabel', { defaultMessage: 'Decrease granularity', }); @@ -57,7 +64,17 @@ const BaseRangeEditor = ({ return ( <> + {granularityLabel}{' '} + + + } data-test-subj="indexPattern-ranges-section-label" labelType="legend" fullWidth @@ -91,7 +108,7 @@ const BaseRangeEditor = ({ /> - + onToggleEditor()}> {i18n.translate('xpack.lens.indexPattern.ranges.customIntervalsToggle', { - defaultMessage: 'Create custom intervals', + defaultMessage: 'Create custom ranges', })} diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx index 1971fb2875bed..a59780ef59939 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx @@ -78,8 +78,8 @@ function getEsAggsParams({ sourceField, params }: RangeIndexPatternColumn) { export const rangeOperation: OperationDefinition = { type: 'range', - displayName: i18n.translate('xpack.lens.indexPattern.ranges', { - defaultMessage: 'Ranges', + displayName: i18n.translate('xpack.lens.indexPattern.intervals', { + defaultMessage: 'Intervals', }), priority: 4, // Higher than terms, so numbers get histogram input: 'field', From 4525f0cfab2045ee9e54bff813a9614f31313602 Mon Sep 17 00:00:00 2001 From: Larry Gregory Date: Thu, 1 Oct 2020 08:26:26 -0400 Subject: [PATCH 29/39] Omit runtime fields from FLS suggestions (#78330) Co-authored-by: Aleh Zasypkin Co-authored-by: Elastic Machine --- .../server/routes/indices/get_fields.test.ts | 58 +++++++++++++++++++ .../server/routes/indices/get_fields.ts | 46 ++++++++++++--- .../apis/security/index_fields.ts | 58 +++++++++++++++++++ .../security/flstest/data/mappings.json | 7 +++ 4 files changed, 160 insertions(+), 9 deletions(-) create mode 100644 x-pack/plugins/security/server/routes/indices/get_fields.test.ts diff --git a/x-pack/plugins/security/server/routes/indices/get_fields.test.ts b/x-pack/plugins/security/server/routes/indices/get_fields.test.ts new file mode 100644 index 0000000000000..4c6182e99431d --- /dev/null +++ b/x-pack/plugins/security/server/routes/indices/get_fields.test.ts @@ -0,0 +1,58 @@ +/* + * 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 { httpServerMock, elasticsearchServiceMock } from '../../../../../../src/core/server/mocks'; +import { kibanaResponseFactory } from '../../../../../../src/core/server'; + +import { routeDefinitionParamsMock } from '../index.mock'; +import { defineGetFieldsRoutes } from './get_fields'; + +const createFieldMapping = (field: string, type: string) => ({ + [field]: { mapping: { [field]: { type } } }, +}); + +const createEmptyFieldMapping = (field: string) => ({ [field]: { mapping: {} } }); + +const mockFieldMappingResponse = { + foo: { + mappings: { + ...createFieldMapping('fooField', 'keyword'), + ...createFieldMapping('commonField', 'keyword'), + ...createEmptyFieldMapping('emptyField'), + }, + }, + bar: { + mappings: { + ...createFieldMapping('commonField', 'keyword'), + ...createFieldMapping('barField', 'keyword'), + ...createFieldMapping('runtimeField', 'runtime'), + }, + }, +}; + +describe('GET /internal/security/fields/{query}', () => { + it('returns a list of deduplicated fields, omitting empty and runtime fields', async () => { + const mockRouteDefinitionParams = routeDefinitionParamsMock.create(); + + const scopedClient = elasticsearchServiceMock.createLegacyScopedClusterClient(); + scopedClient.callAsCurrentUser.mockResolvedValue(mockFieldMappingResponse); + mockRouteDefinitionParams.clusterClient.asScoped.mockReturnValue(scopedClient); + + defineGetFieldsRoutes(mockRouteDefinitionParams); + + const [[, handler]] = mockRouteDefinitionParams.router.get.mock.calls; + + const headers = { authorization: 'foo' }; + const mockRequest = httpServerMock.createKibanaRequest({ + method: 'get', + path: `/internal/security/fields/foo`, + headers, + }); + const response = await handler({} as any, mockRequest, kibanaResponseFactory); + expect(response.status).toBe(200); + expect(response.payload).toEqual(['fooField', 'commonField', 'barField']); + }); +}); diff --git a/x-pack/plugins/security/server/routes/indices/get_fields.ts b/x-pack/plugins/security/server/routes/indices/get_fields.ts index 356b78aa33879..44b8804ed8d6e 100644 --- a/x-pack/plugins/security/server/routes/indices/get_fields.ts +++ b/x-pack/plugins/security/server/routes/indices/get_fields.ts @@ -8,6 +8,20 @@ import { schema } from '@kbn/config-schema'; import { RouteDefinitionParams } from '../index'; import { wrapIntoCustomErrorResponse } from '../../errors'; +interface FieldMappingResponse { + [indexName: string]: { + mappings: { + [fieldName: string]: { + mapping: { + [fieldName: string]: { + type: string; + }; + }; + }; + }; + }; +} + export function defineGetFieldsRoutes({ router, clusterClient }: RouteDefinitionParams) { router.get( { @@ -23,21 +37,35 @@ export function defineGetFieldsRoutes({ router, clusterClient }: RouteDefinition fields: '*', allowNoIndices: false, includeDefaults: true, - })) as Record }>; + })) as FieldMappingResponse; // The flow is the following (see response format at https://www.elastic.co/guide/en/elasticsearch/reference/current/indices-get-field-mapping.html): // 1. Iterate over all matched indices. // 2. Extract all the field names from the `mappings` field of the particular index. - // 3. Collect and flatten the list of the field names. + // 3. Collect and flatten the list of the field names, omitting any fields without mappings, and any runtime fields // 4. Use `Set` to get only unique field names. + const fields = Array.from( + new Set( + Object.values(indexMappings).flatMap((indexMapping) => { + return Object.keys(indexMapping.mappings).filter((fieldName) => { + const mappingValues = Object.values(indexMapping.mappings[fieldName].mapping); + const hasMapping = mappingValues.length > 0; + + const isRuntimeField = hasMapping && mappingValues[0]?.type === 'runtime'; + + // fields without mappings are internal fields such as `_routing` and `_index`, + // and therefore don't make sense as autocomplete suggestions for FLS. + + // Runtime fields are not securable via FLS. + // Administrators should instead secure access to the fields which derive this information. + return hasMapping && !isRuntimeField; + }); + }) + ) + ); + return response.ok({ - body: Array.from( - new Set( - Object.values(indexMappings) - .map((indexMapping) => Object.keys(indexMapping.mappings)) - .flat() - ) - ), + body: fields, }); } catch (error) { return response.customError(wrapIntoCustomErrorResponse(error)); diff --git a/x-pack/test/api_integration/apis/security/index_fields.ts b/x-pack/test/api_integration/apis/security/index_fields.ts index 795da7dbe8835..193d0eea1590e 100644 --- a/x-pack/test/api_integration/apis/security/index_fields.ts +++ b/x-pack/test/api_integration/apis/security/index_fields.ts @@ -7,10 +7,33 @@ import expect from '@kbn/expect/expect.js'; import { FtrProviderContext } from '../../ftr_provider_context'; +interface FLSFieldMappingResponse { + flstest: { + mappings: { + [fieldName: string]: { + mapping: { + [fieldName: string]: { + type: string; + }; + }; + }; + }; + }; +} + export default function ({ getService }: FtrProviderContext) { const supertest = getService('supertest'); + const esArchiver = getService('esArchiver'); + const es = getService('legacyEs'); describe('Index Fields', () => { + before(async () => { + await esArchiver.load('security/flstest/data'); + }); + after(async () => { + await esArchiver.unload('security/flstest/data'); + }); + describe('GET /internal/security/fields/{query}', () => { it('should return a list of available index mapping fields', async () => { await supertest @@ -30,6 +53,41 @@ export default function ({ getService }: FtrProviderContext) { sampleOfExpectedFields.forEach((field) => expect(response.body).to.contain(field)); }); }); + + it('should not include runtime fields', async () => { + // First, make sure the mapping actually includes a runtime field + const fieldMapping = (await es.indices.getFieldMapping({ + index: 'flstest', + fields: '*', + includeDefaults: true, + })) as FLSFieldMappingResponse; + + expect(Object.keys(fieldMapping.flstest.mappings)).to.contain('runtime_customer_ssn'); + expect( + fieldMapping.flstest.mappings.runtime_customer_ssn.mapping.runtime_customer_ssn.type + ).to.eql('runtime'); + + // Now, make sure it's not returned here + const { body: actualFields } = (await supertest + .get('/internal/security/fields/flstest') + .set('kbn-xsrf', 'xxx') + .send() + .expect(200)) as { body: string[] }; + + const expectedFields = [ + 'customer_ssn', + 'customer_ssn.keyword', + 'customer_region', + 'customer_region.keyword', + 'customer_name', + 'customer_name.keyword', + ]; + + actualFields.sort(); + expectedFields.sort(); + + expect(actualFields).to.eql(expectedFields); + }); }); }); } diff --git a/x-pack/test/functional/es_archives/security/flstest/data/mappings.json b/x-pack/test/functional/es_archives/security/flstest/data/mappings.json index c6f11ea26f647..3605533618a93 100644 --- a/x-pack/test/functional/es_archives/security/flstest/data/mappings.json +++ b/x-pack/test/functional/es_archives/security/flstest/data/mappings.json @@ -30,6 +30,13 @@ } }, "type": "text" + }, + "runtime_customer_ssn": { + "type": "runtime", + "runtime_type": "keyword", + "script": { + "source": "emit(doc['customer_ssn'].value + ' calculated at runtime')" + } } } }, From 97ac553d0319cde7abd63b8052b38a90bb0a44b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Thu, 1 Oct 2020 13:30:39 +0100 Subject: [PATCH 30/39] [Usage Collection] [schema] `infra` (#78581) --- x-pack/.telemetryrc.json | 1 - .../infra/server/usage/usage_collector.ts | 23 +++++++++++++++++- .../schema/xpack_plugins.json | 24 +++++++++++++++++++ 3 files changed, 46 insertions(+), 2 deletions(-) diff --git a/x-pack/.telemetryrc.json b/x-pack/.telemetryrc.json index 9140dbdaf00ae..d0e56bbed9f47 100644 --- a/x-pack/.telemetryrc.json +++ b/x-pack/.telemetryrc.json @@ -5,7 +5,6 @@ "plugins/actions/server/usage/actions_usage_collector.ts", "plugins/alerts/server/usage/alerts_usage_collector.ts", "plugins/apm/server/lib/apm_telemetry/index.ts", - "plugins/infra/server/usage/usage_collector.ts", "plugins/maps/server/maps_telemetry/collectors/register.ts" ] } diff --git a/x-pack/plugins/infra/server/usage/usage_collector.ts b/x-pack/plugins/infra/server/usage/usage_collector.ts index 598ee21e6f273..54f6d2f6121db 100644 --- a/x-pack/plugins/infra/server/usage/usage_collector.ts +++ b/x-pack/plugins/infra/server/usage/usage_collector.ts @@ -14,6 +14,17 @@ interface InfraopsSum { logs: number; } +interface Usage { + last_24_hours: { + hits: { + infraops_hosts: number; + infraops_docker: number; + infraops_kubernetes: number; + logs: number; + }; + }; +} + export class UsageCollector { public static registerUsageCollector(usageCollection: UsageCollectionSetup): void { const collector = UsageCollector.getUsageCollector(usageCollection); @@ -21,12 +32,22 @@ export class UsageCollector { } public static getUsageCollector(usageCollection: UsageCollectionSetup) { - return usageCollection.makeUsageCollector({ + return usageCollection.makeUsageCollector({ type: 'infraops', isReady: () => true, fetch: async () => { return this.getReport(); }, + schema: { + last_24_hours: { + hits: { + infraops_hosts: { type: 'long' }, + infraops_docker: { type: 'long' }, + infraops_kubernetes: { type: 'long' }, + logs: { type: 'long' }, + }, + }, + }, }); } diff --git a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json index 9acffa1f6c78e..816d6828381ee 100644 --- a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json +++ b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json @@ -242,6 +242,30 @@ } } }, + "infraops": { + "properties": { + "last_24_hours": { + "properties": { + "hits": { + "properties": { + "infraops_hosts": { + "type": "long" + }, + "infraops_docker": { + "type": "long" + }, + "infraops_kubernetes": { + "type": "long" + }, + "logs": { + "type": "long" + } + } + } + } + } + } + }, "ingest_manager": { "properties": { "fleet_enabled": { From cba458e4567d32250aa1e4d9748e7b4ecefc294a Mon Sep 17 00:00:00 2001 From: Alison Goryachev Date: Thu, 1 Oct 2020 08:43:12 -0400 Subject: [PATCH 31/39] [Mappings editor] Fix bug when switching between mapping tabs (#78707) --- .../mappings_editor.test.tsx | 27 +++++++++++++++++++ .../templates_form/templates_form.tsx | 9 +++---- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx index 68933ddc9a935..f5fcff9f96254 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx @@ -223,6 +223,33 @@ describe('Mappings editor: core', () => { isNumericDetectionVisible = exists('advancedConfiguration.numericDetection'); expect(isNumericDetectionVisible).toBe(false); }); + + test('should keep default dynamic templates value when switching tabs', async () => { + await act(async () => { + testBed = setup({ + value: { ...defaultMappings, dynamic_templates: [] }, // by default, the UI will provide an empty array for dynamic templates + onChange: onChangeHandler, + }); + }); + testBed.component.update(); + + const { + actions: { selectTab, getJsonEditorValue }, + } = testBed; + + // Navigate to dynamic templates tab and verify empty array + await selectTab('templates'); + let templatesValue = getJsonEditorValue('dynamicTemplatesEditor'); + expect(templatesValue).toEqual([]); + + // Navigate to advanced tab + await selectTab('advanced'); + + // Navigate back to dynamic templates tab and verify empty array persists + await selectTab('templates'); + templatesValue = getJsonEditorValue('dynamicTemplatesEditor'); + expect(templatesValue).toEqual([]); + }); }); describe('component props', () => { diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx index 4b813b4edbabd..46e7bbd5e094a 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx @@ -36,11 +36,10 @@ const formSerializer: SerializerFunc = (formData) // Silently swallow errors } - return Array.isArray(parsedTemplates) && parsedTemplates.length > 0 - ? { - dynamic_templates: parsedTemplates, - } - : undefined; + return { + dynamic_templates: + Array.isArray(parsedTemplates) && parsedTemplates.length > 0 ? parsedTemplates : [], + }; }; const formDeserializer = (formData: { [key: string]: any }) => { From 4fe7625f584a6d2969fa10427e5bc339b943a404 Mon Sep 17 00:00:00 2001 From: Alison Goryachev Date: Thu, 1 Oct 2020 08:44:29 -0400 Subject: [PATCH 32/39] [Mappings editor] Add support for version field type (#78206) --- .../datatypes/version_datatype.test.tsx | 95 +++++++++++++++++++ .../fields/field_types/index.ts | 2 + .../fields/field_types/version_type.tsx | 27 ++++++ .../constants/data_types_definition.tsx | 30 ++++++ .../mappings_editor/types/document_fields.ts | 1 + 5 files changed, 155 insertions(+) create mode 100644 x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/version_datatype.test.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/version_type.tsx diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/version_datatype.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/version_datatype.test.tsx new file mode 100644 index 0000000000000..61f67b04ec3cd --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/version_datatype.test.tsx @@ -0,0 +1,95 @@ +/* + * 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; + +// Parameters automatically added to the version datatype when saved (with the default values) +export const defaultVersionParameters = { + type: 'version', +}; + +describe('Mappings editor: version 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('supports meta parameter', async () => { + const defaultMappings = { + properties: { + myField: { + type: 'version', + }, + }, + }; + + const updatedMappings = { ...defaultMappings }; + + const metaParameter = { + meta: { + my_metadata: 'foobar', + }, + }; + + await act(async () => { + testBed = setup({ value: defaultMappings, onChange: onChangeHandler }); + }); + testBed.component.update(); + + const { + component, + actions: { + startEditField, + updateFieldAndCloseFlyout, + showAdvancedSettings, + toggleFormRow, + updateJsonEditor, + }, + } = testBed; + + // Open the flyout to edit the field + await startEditField('myField'); + await showAdvancedSettings(); + + // Enable the meta parameter and provide a valid object + toggleFormRow('metaParameter'); + await act(async () => { + updateJsonEditor('metaParameterEditor', metaParameter.meta); + }); + component.update(); + + // Save the field and close the flyout + await updateFieldAndCloseFlyout(); + + // It should have the default parameters values added, plus metadata + updatedMappings.properties.myField = { + ...defaultVersionParameters, + ...metaParameter, + }; + + ({ data } = await getMappingsEditorData(component)); + expect(data).toEqual(updatedMappings); + }); +}); diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts index 4d36b4dd2578d..d135d1b81419c 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts @@ -34,6 +34,7 @@ import { RankFeatureType } from './rank_feature_type'; import { RuntimeType } from './runtime_type'; import { WildcardType } from './wildcard_type'; import { PointType } from './point_type'; +import { VersionType } from './version_type'; const typeToParametersFormMap: { [key in DataType]?: ComponentType } = { alias: AliasType, @@ -64,6 +65,7 @@ const typeToParametersFormMap: { [key in DataType]?: ComponentType } = { runtime: RuntimeType, wildcard: WildcardType, point: PointType, + version: VersionType, }; export const getParametersFormForType = ( diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/version_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/version_type.tsx new file mode 100644 index 0000000000000..24ee356c5db77 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/version_type.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 React from 'react'; + +import { NormalizedField, Field as FieldType, ParameterName } from '../../../../types'; +import { getFieldConfig } from '../../../../lib'; +import { MetaParameter } from '../../field_parameters'; +import { AdvancedParametersSection } from '../edit_field'; + +interface Props { + field: NormalizedField; +} + +const getDefaultToggleValue = (param: ParameterName, field: FieldType) => { + return field[param] !== undefined && field[param] !== getFieldConfig(param).defaultValue; +}; + +export const VersionType = ({ field }: Props) => { + return ( + + + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx index 7bcd8f32f1a7d..07ca0a69afefb 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx @@ -860,6 +860,35 @@ export const TYPE_DEFINITION: { [key in DataType]: DataTypeDefinition } = {

), }, + version: { + label: i18n.translate('xpack.idxMgmt.mappingsEditor.dataType.versionDescription', { + defaultMessage: 'Version', + }), + value: 'version', + documentation: { + main: '/version.html', + }, + description: () => ( +

+ + {i18n.translate( + 'xpack.idxMgmt.mappingsEditor.dataType.versionLongDescription.keywordTypeLink', + { + defaultMessage: 'keyword data type', + } + )} + + ), + }} + /> +

+ ), + }, wildcard: { label: i18n.translate('xpack.idxMgmt.mappingsEditor.dataType.wildcardDescription', { defaultMessage: 'Wildcard', @@ -923,6 +952,7 @@ export const MAIN_TYPES: MainType[] = [ 'histogram', 'wildcard', 'point', + 'version', 'other', ]; diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/types/document_fields.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/types/document_fields.ts index 48282abd1d799..926b4c9d12bee 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/types/document_fields.ts +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/types/document_fields.ts @@ -64,6 +64,7 @@ export type MainType = | 'point' | 'histogram' | 'constant_keyword' + | 'version' | 'wildcard' /** * 'other' is a special type that only exists inside of MappingsEditor as a placeholder From 9e5bf0f92f7a25df92372c52e9d7f1f9e39aa870 Mon Sep 17 00:00:00 2001 From: Corey Robertson Date: Thu, 1 Oct 2020 09:10:02 -0400 Subject: [PATCH 33/39] [Canvas] Move Handlebars and Flot dependencies out of main bundle (#78542) * Move Handlebars and Flot dependencies out of main bundle * Fix unit test Co-authored-by: Elastic Machine --- .../functions/browser/markdown.test.js | 28 +++++++++---------- .../functions/browser/markdown.ts | 8 +++--- .../canvas_plugin_src/renderers/pie/index.tsx | 6 ++-- .../canvas_plugin_src/renderers/plot/index.ts | 6 ++-- x-pack/plugins/canvas/common/lib/index.ts | 2 -- 5 files changed, 26 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js index 71b6af6739408..1c75f5b7e0fbc 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js @@ -12,16 +12,16 @@ import { markdown } from './markdown'; describe('markdown', () => { const fn = functionWrapper(markdown); - it('returns a render as markdown', () => { - const result = fn(null, { content: [''], font: fontStyle }); + it('returns a render as markdown', async () => { + const result = await fn(null, { content: [''], font: fontStyle }); expect(result).toHaveProperty('type', 'render'); expect(result).toHaveProperty('as', 'markdown'); }); describe('args', () => { describe('content', () => { - it('sets the content to all strings in expression concatenated', () => { - const result = fn(null, { + it('sets the content to all strings in expression concatenated', async () => { + const result = await fn(null, { content: ['# this ', 'is ', 'some ', 'markdown'], font: fontStyle, }); @@ -29,11 +29,11 @@ describe('markdown', () => { expect(result.value).toHaveProperty('content', '# this is some markdown'); }); - it('compiles and concatenates handlebars expressions using context', () => { + it('compiles and concatenates handlebars expressions using context', async () => { let expectedContent = 'Columns:'; testTable.columns.map((col) => (expectedContent += ` ${col.name}`)); - const result = fn(testTable, { + const result = await fn(testTable, { content: ['Columns:', '{{#each columns}} {{name}}{{/each}}'], }); @@ -42,8 +42,8 @@ describe('markdown', () => { }); describe('font', () => { - it('sets the font style for the markdown', () => { - const result = fn(null, { + it('sets the font style for the markdown', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], font: fontStyle, }); @@ -55,8 +55,8 @@ describe('markdown', () => { // it("defaults to the expression '{font}'", () => {}); }); describe('openLinksInNewTab', () => { - it('sets the value of openLinksInNewTab to true ', () => { - const result = fn(null, { + it('sets the value of openLinksInNewTab to true ', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], openLinksInNewTab: true, }); @@ -64,8 +64,8 @@ describe('markdown', () => { expect(result.value).toHaveProperty('openLinksInNewTab', true); }); - it('sets the value of openLinksInNewTab to false ', () => { - const result = fn(null, { + it('sets the value of openLinksInNewTab to false ', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], openLinksInNewTab: false, }); @@ -73,8 +73,8 @@ describe('markdown', () => { expect(result.value).toHaveProperty('openLinksInNewTab', false); }); - it('defaults the value of openLinksInNewTab to false ', () => { - const result = fn(null, { + it('defaults the value of openLinksInNewTab to false ', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], }); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts index 947106fd9397a..aa73eba456481 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts @@ -10,8 +10,6 @@ import { Style, ExpressionFunctionDefinition, } from 'src/plugins/expressions/common'; -// @ts-expect-error untyped local -import { Handlebars } from '../../../common/lib/handlebars'; import { getFunctionHelp } from '../../../i18n'; type Context = Datatable | null; @@ -32,7 +30,7 @@ export function markdown(): ExpressionFunctionDefinition< 'markdown', Context, Arguments, - Render + Promise> > { const { help, args: argHelp } = getFunctionHelp().markdown; @@ -61,7 +59,9 @@ export function markdown(): ExpressionFunctionDefinition< default: false, }, }, - fn: (input, args) => { + fn: async (input, args) => { + // @ts-expect-error untyped local + const { Handlebars } = await import('../../../common/lib/handlebars'); const compileFunctions = args.content.map((str) => Handlebars.compile(String(str), { knownHelpersOnly: true }) ); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx index 622e73ccf2223..29e823e0a373b 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx @@ -6,7 +6,6 @@ // This bit of hackiness is required because this isn't part of the main kibana bundle import 'jquery'; -import '../../lib/flot-charts'; import { debounce, includes } from 'lodash'; import { RendererStrings } from '../../../i18n'; @@ -22,7 +21,10 @@ export const pie: RendererFactory = () => ({ displayName: strings.getDisplayName(), help: strings.getHelpDescription(), reuseDomNode: false, - render(domNode, config, handlers) { + render: async (domNode, config, handlers) => { + // @ts-expect-error + await import('../../lib/flot-charts'); + if (!includes($.plot.plugins, piePlugin)) { $.plot.plugins.push(piePlugin); } diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts index 8c84f54f8746b..9d70ca418f491 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts @@ -6,7 +6,6 @@ // This bit of hackiness is required because this isn't part of the main kibana bundle import 'jquery'; -import '../../lib/flot-charts'; import { debounce, includes } from 'lodash'; import { RendererStrings } from '../../../i18n'; @@ -18,7 +17,10 @@ import { text } from './plugins/text'; const { plot: strings } = RendererStrings; -const render: RendererSpec['render'] = (domNode, config, handlers) => { +const render: RendererSpec['render'] = async (domNode, config, handlers) => { + // @ts-expect-error + await import('../../lib/flot-charts'); + // TODO: OH NOES if (!includes($.plot.plugins, size)) { $.plot.plugins.push(size); diff --git a/x-pack/plugins/canvas/common/lib/index.ts b/x-pack/plugins/canvas/common/lib/index.ts index 055f6ce7739b7..c8ae53917c9e4 100644 --- a/x-pack/plugins/canvas/common/lib/index.ts +++ b/x-pack/plugins/canvas/common/lib/index.ts @@ -20,8 +20,6 @@ export * from './get_colors_from_palette'; export * from './get_field_type'; // @ts-expect-error missing local definition export * from './get_legend_config'; -// @ts-expect-error missing local definition -export * from './handlebars'; export * from './hex_to_rgb'; export * from './httpurl'; export * from './missing_asset'; From 727d62611b8f6f23ac163f0a2af2ab6f96e38f00 Mon Sep 17 00:00:00 2001 From: Gidi Meir Morris Date: Thu, 1 Oct 2020 14:24:10 +0100 Subject: [PATCH 34/39] [Actions] fixes error in UI in the Edit Flyout for PreConfigured Connectors (#78994) Ensures only User Configured Connectors can be validated and edited by the UI to avoid these kinds of errors in the future. --- .../builtin_action_types/email/email.tsx | 4 +- .../es_index/es_index.tsx | 4 +- .../builtin_action_types/jira/jira.tsx | 19 ++++---- .../jira/jira_params.test.tsx | 3 +- .../builtin_action_types/jira/types.ts | 10 ++--- .../pagerduty/pagerduty.tsx | 14 +++++- .../resilient/resilient.tsx | 13 +++++- .../builtin_action_types/resilient/types.ts | 13 +++--- .../server_log/server_log.test.tsx | 7 +-- .../server_log/server_log.tsx | 2 +- .../servicenow/servicenow.tsx | 10 ++++- .../builtin_action_types/servicenow/types.ts | 13 +++--- .../builtin_action_types/slack/slack.tsx | 4 +- .../components/builtin_action_types/types.ts | 44 +++++++------------ .../builtin_action_types/webhook/webhook.tsx | 13 +++++- .../lib/action_connector_api.test.ts | 4 +- .../lib/check_action_type_enabled.test.tsx | 8 +--- .../action_connector_form.test.tsx | 9 ++-- .../action_connector_form.tsx | 14 ++++-- .../connector_edit_flyout.tsx | 10 +++-- .../triggers_actions_ui/public/types.ts | 43 ++++++++++++++---- .../apps/triggers_actions_ui/connectors.ts | 2 +- x-pack/test/functional_with_es_ssl/config.ts | 9 ++++ 23 files changed, 171 insertions(+), 101 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email.tsx index abb102c04b054..3e8e71991a594 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email.tsx @@ -6,9 +6,9 @@ import { lazy } from 'react'; import { i18n } from '@kbn/i18n'; import { ActionTypeModel, ValidationResult } from '../../../../types'; -import { EmailActionParams, EmailActionConnector } from '../types'; +import { EmailActionParams, EmailConfig, EmailSecrets, EmailActionConnector } from '../types'; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel { const mailformat = /^[^@\s]+@[^@\s]+$/; return { id: '.email', diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index.tsx index c0255650e0f37..de611d6a043a7 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index.tsx @@ -6,9 +6,9 @@ import { lazy } from 'react'; import { i18n } from '@kbn/i18n'; import { ActionTypeModel, ValidationResult } from '../../../../types'; -import { EsIndexActionConnector, IndexActionParams } from '../types'; +import { EsIndexActionConnector, EsIndexConfig, IndexActionParams } from '../types'; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel { return { id: '.index', iconClass: 'indexOpen', diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx index fd36bd6aeab0a..0179cfbffdfea 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx @@ -8,19 +8,20 @@ import { lazy } from 'react'; import { ValidationResult, ActionTypeModel } from '../../../../types'; import { connectorConfiguration } from './config'; import logo from './logo.svg'; -import { JiraActionConnector, JiraActionParams } from './types'; +import { JiraActionConnector, JiraConfig, JiraSecrets, JiraActionParams } from './types'; import * as i18n from './translations'; import { isValidUrl } from '../../../lib/value_validators'; const validateConnector = (action: JiraActionConnector): ValidationResult => { - const validationResult = { errors: {} }; - const errors = { - apiUrl: new Array(), - projectKey: new Array(), - email: new Array(), - apiToken: new Array(), + const validationResult = { + errors: { + apiUrl: new Array(), + projectKey: new Array(), + email: new Array(), + apiToken: new Array(), + }, }; - validationResult.errors = errors; + const { errors } = validationResult; if (!action.config.apiUrl) { errors.apiUrl = [...errors.apiUrl, i18n.API_URL_REQUIRED]; @@ -45,7 +46,7 @@ const validateConnector = (action: JiraActionConnector): ValidationResult => { return validationResult; }; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel { return { id: connectorConfiguration.id, iconClass: logo, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx index 416f6f7b18755..a0194ed5c81e4 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.test.tsx @@ -11,6 +11,7 @@ import { coreMock } from 'src/core/public/mocks'; import { useGetIssueTypes } from './use_get_issue_types'; import { useGetFieldsByIssueType } from './use_get_fields_by_issue_type'; +import { ActionConnector } from '../../../../types'; jest.mock('./use_get_issue_types'); jest.mock('./use_get_fields_by_issue_type'); @@ -35,7 +36,7 @@ const actionParams = { }, }; -const connector = { +const connector: ActionConnector = { secrets: {}, config: {}, id: 'test', diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts index 4c13d067913f2..e72aa1f7fc037 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/types.ts @@ -5,11 +5,9 @@ */ import { CasesConfigurationMapping } from '../case_mappings'; +import { UserConfiguredActionConnector } from '../../../../types'; -export interface JiraActionConnector { - config: JiraConfig; - secrets: JiraSecrets; -} +export type JiraActionConnector = UserConfiguredActionConnector; export interface JiraActionParams { subAction: string; @@ -30,14 +28,14 @@ interface IncidentConfiguration { mapping: CasesConfigurationMapping[]; } -interface JiraConfig { +export interface JiraConfig { apiUrl: string; projectKey: string; incidentConfiguration?: IncidentConfiguration; isCaseOwned?: boolean; } -interface JiraSecrets { +export interface JiraSecrets { email: string; apiToken: string; } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx index 03bfbb38da6f2..ed2bd39d88dc4 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx @@ -7,11 +7,20 @@ import { lazy } from 'react'; import { i18n } from '@kbn/i18n'; import moment from 'moment'; import { ActionTypeModel, ValidationResult } from '../../../../types'; -import { PagerDutyActionParams, PagerDutyActionConnector } from '.././types'; +import { + PagerDutyActionConnector, + PagerDutyConfig, + PagerDutySecrets, + PagerDutyActionParams, +} from '.././types'; import pagerDutySvg from './pagerduty.svg'; import { hasMustacheTokens } from '../../../lib/has_mustache_tokens'; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel< + PagerDutyConfig, + PagerDutySecrets, + PagerDutyActionParams +> { return { id: '.pagerduty', iconClass: pagerDutySvg, @@ -33,6 +42,7 @@ export function getActionType(): ActionTypeModel { routingKey: new Array(), }; validationResult.errors = errors; + if (!action.secrets.routingKey) { errors.routingKey.push( i18n.translate( diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx index cda6935f3b73d..1b27968c04fd3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx @@ -8,7 +8,12 @@ import { lazy } from 'react'; import { ValidationResult, ActionTypeModel } from '../../../../types'; import { connectorConfiguration } from './config'; import logo from './logo.svg'; -import { ResilientActionConnector, ResilientActionParams } from './types'; +import { + ResilientActionConnector, + ResilientConfig, + ResilientSecrets, + ResilientActionParams, +} from './types'; import * as i18n from './translations'; import { isValidUrl } from '../../../lib/value_validators'; @@ -45,7 +50,11 @@ const validateConnector = (action: ResilientActionConnector): ValidationResult = return validationResult; }; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel< + ResilientConfig, + ResilientSecrets, + ResilientActionParams +> { return { id: connectorConfiguration.id, iconClass: logo, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/types.ts index 37516f5bac372..38019205fbfc9 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/types.ts @@ -5,11 +5,12 @@ */ import { CasesConfigurationMapping } from '../case_mappings'; +import { UserConfiguredActionConnector } from '../../../../types'; -export interface ResilientActionConnector { - config: ResilientConfig; - secrets: ResilientSecrets; -} +export type ResilientActionConnector = UserConfiguredActionConnector< + ResilientConfig, + ResilientSecrets +>; export interface ResilientActionParams { subAction: string; @@ -28,14 +29,14 @@ interface IncidentConfiguration { mapping: CasesConfigurationMapping[]; } -interface ResilientConfig { +export interface ResilientConfig { apiUrl: string; orgId: string; incidentConfiguration?: IncidentConfiguration; isCaseOwned?: boolean; } -interface ResilientSecrets { +export interface ResilientSecrets { apiKeyId: string; apiKeySecret: string; } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.test.tsx index 3bb5ea68a3040..15143eb6513eb 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.test.tsx @@ -5,7 +5,7 @@ */ import { TypeRegistry } from '../../../type_registry'; import { registerBuiltInActionTypes } from '.././index'; -import { ActionTypeModel, ActionConnector } from '../../../../types'; +import { ActionTypeModel, UserConfiguredActionConnector } from '../../../../types'; const ACTION_TYPE_ID = '.server-log'; let actionTypeModel: ActionTypeModel; @@ -28,13 +28,14 @@ describe('actionTypeRegistry.get() works', () => { describe('server-log connector validation', () => { test('connector validation succeeds when connector config is valid', () => { - const actionConnector = { + const actionConnector: UserConfiguredActionConnector<{}, {}> = { secrets: {}, id: 'test', actionTypeId: '.server-log', name: 'server-log', config: {}, - } as ActionConnector; + isPreconfigured: false, + }; expect(actionTypeModel.validateConnector(actionConnector)).toEqual({ errors: {}, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.tsx index 390ccf6a494e9..057e9cf375f96 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log.tsx @@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n'; import { ActionTypeModel, ValidationResult } from '../../../../types'; import { ServerLogActionParams } from '../types'; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel { return { id: '.server-log', iconClass: 'logsApp', diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx index 0f7b83ed84fb4..8396497a6e284 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx @@ -8,7 +8,12 @@ import { lazy } from 'react'; import { ValidationResult, ActionTypeModel } from '../../../../types'; import { connectorConfiguration } from './config'; import logo from './logo.svg'; -import { ServiceNowActionConnector, ServiceNowActionParams } from './types'; +import { + ServiceNowActionConnector, + ServiceNowConfig, + ServiceNowSecrets, + ServiceNowActionParams, +} from './types'; import * as i18n from './translations'; import { isValidUrl } from '../../../lib/value_validators'; @@ -41,7 +46,8 @@ const validateConnector = (action: ServiceNowActionConnector): ValidationResult }; export function getActionType(): ActionTypeModel< - ServiceNowActionConnector, + ServiceNowConfig, + ServiceNowSecrets, ServiceNowActionParams > { return { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/types.ts index a4f1ff2be0f69..92753dfcba76c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/types.ts @@ -5,11 +5,12 @@ */ import { CasesConfigurationMapping } from '../case_mappings'; +import { UserConfiguredActionConnector } from '../../../../types'; -export interface ServiceNowActionConnector { - config: ServiceNowConfig; - secrets: ServiceNowSecrets; -} +export type ServiceNowActionConnector = UserConfiguredActionConnector< + ServiceNowConfig, + ServiceNowSecrets +>; export interface ServiceNowActionParams { subAction: string; @@ -29,13 +30,13 @@ interface IncidentConfiguration { mapping: CasesConfigurationMapping[]; } -interface ServiceNowConfig { +export interface ServiceNowConfig { apiUrl: string; incidentConfiguration?: IncidentConfiguration; isCaseOwned?: boolean; } -interface ServiceNowSecrets { +export interface ServiceNowSecrets { username: string; password: string; } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack.tsx index 5d39cdb5ac387..23c76f327008b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack.tsx @@ -6,9 +6,9 @@ import { lazy } from 'react'; import { i18n } from '@kbn/i18n'; import { ActionTypeModel, ValidationResult } from '../../../../types'; -import { SlackActionParams, SlackActionConnector } from '../types'; +import { SlackActionParams, SlackSecrets, SlackActionConnector } from '../types'; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel { return { id: '.slack', iconClass: 'logoSlack', diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/types.ts index 84d8b6e8caede..f6bb08148b3cb 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/types.ts @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { ActionConnector } from '../../../types'; +import { UserConfiguredActionConnector } from '../../../types'; export interface EmailActionParams { to: string[]; @@ -64,66 +64,56 @@ export interface WebhookActionParams { body?: string; } -interface EmailConfig { +export interface EmailConfig { from: string; host: string; port: number; secure?: boolean; } -interface EmailSecrets { +export interface EmailSecrets { user: string | null; password: string | null; } -export interface EmailActionConnector extends ActionConnector { - config: EmailConfig; - secrets: EmailSecrets; -} +export type EmailActionConnector = UserConfiguredActionConnector; -interface EsIndexConfig { +export interface EsIndexConfig { index: string; executionTimeField?: string | null; refresh?: boolean; } -export interface EsIndexActionConnector extends ActionConnector { - config: EsIndexConfig; -} +export type EsIndexActionConnector = UserConfiguredActionConnector; -interface PagerDutyConfig { +export interface PagerDutyConfig { apiUrl?: string; } -interface PagerDutySecrets { +export interface PagerDutySecrets { routingKey: string; } -export interface PagerDutyActionConnector extends ActionConnector { - config: PagerDutyConfig; - secrets: PagerDutySecrets; -} +export type PagerDutyActionConnector = UserConfiguredActionConnector< + PagerDutyConfig, + PagerDutySecrets +>; -interface SlackSecrets { +export interface SlackSecrets { webhookUrl: string; } -export interface SlackActionConnector extends ActionConnector { - secrets: SlackSecrets; -} +export type SlackActionConnector = UserConfiguredActionConnector; -interface WebhookConfig { +export interface WebhookConfig { method: string; url: string; headers: Record; } -interface WebhookSecrets { +export interface WebhookSecrets { user: string; password: string; } -export interface WebhookActionConnector extends ActionConnector { - config: WebhookConfig; - secrets: WebhookSecrets; -} +export type WebhookActionConnector = UserConfiguredActionConnector; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook.tsx index 2c51b21d70034..04077738e6015 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook.tsx @@ -6,10 +6,19 @@ import { lazy } from 'react'; import { i18n } from '@kbn/i18n'; import { ActionTypeModel, ValidationResult } from '../../../../types'; -import { WebhookActionParams, WebhookActionConnector } from '../types'; +import { + WebhookActionParams, + WebhookConfig, + WebhookSecrets, + WebhookActionConnector, +} from '../types'; import { isValidUrl } from '../../../lib/value_validators'; -export function getActionType(): ActionTypeModel { +export function getActionType(): ActionTypeModel< + WebhookConfig, + WebhookSecrets, + WebhookActionParams +> { return { id: '.webhook', iconClass: 'logoWebhook', diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/action_connector_api.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/action_connector_api.test.ts index ad3a5b40bd00d..c4a09b6b8f46d 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/lib/action_connector_api.test.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/action_connector_api.test.ts @@ -59,7 +59,7 @@ describe('loadAllActions', () => { describe('createActionConnector', () => { test('should call create action API', async () => { - const connector: ActionConnectorWithoutId = { + const connector: ActionConnectorWithoutId<{}, {}> = { actionTypeId: 'test', isPreconfigured: false, name: 'My test', @@ -85,7 +85,7 @@ describe('createActionConnector', () => { describe('updateActionConnector', () => { test('should call the update API', async () => { const id = '123'; - const connector: ActionConnectorWithoutId = { + const connector: ActionConnectorWithoutId<{}, {}> = { actionTypeId: 'test', isPreconfigured: false, name: 'My test', diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx index 2917be943d276..ab44520d2954a 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ActionType, ActionConnector } from '../../types'; +import { ActionType, PreConfiguredActionConnector } from '../../types'; import { checkActionTypeEnabled, checkActionFormActionTypeEnabled, @@ -93,23 +93,19 @@ describe('checkActionTypeEnabled', () => { }); describe('checkActionFormActionTypeEnabled', () => { - const preconfiguredConnectors: ActionConnector[] = [ + const preconfiguredConnectors: PreConfiguredActionConnector[] = [ { actionTypeId: '1', - config: {}, id: 'test1', isPreconfigured: true, name: 'test', - secrets: {}, referencedByCount: 0, }, { actionTypeId: '2', - config: {}, id: 'test2', isPreconfigured: true, name: 'test', - secrets: {}, referencedByCount: 0, }, ]; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.test.tsx index b7c9865cbd9d0..60ec8004983a3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.test.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import { mountWithIntl } from 'test_utils/enzyme_helpers'; import { coreMock } from '../../../../../../../src/core/public/mocks'; import { actionTypeRegistryMock } from '../../action_type_registry.mock'; -import { ValidationResult, ActionConnector } from '../../../types'; +import { ValidationResult, UserConfiguredActionConnector } from '../../../types'; import { ActionConnectorForm } from './action_connector_form'; const actionTypeRegistry = actionTypeRegistryMock.create(); @@ -46,11 +46,14 @@ describe('action_connector_form', () => { actionTypeRegistry.get.mockReturnValue(actionType); actionTypeRegistry.has.mockReturnValue(true); - const initialConnector = { + const initialConnector: UserConfiguredActionConnector<{}, {}> = { + id: '123', + name: '', actionTypeId: actionType.id, config: {}, secrets: {}, - } as ActionConnector; + isPreconfigured: false, + }; let wrapper; if (deps) { wrapper = mountWithIntl( diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx index ed4edb0229c2b..ef6621f98fac2 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx @@ -20,7 +20,12 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { HttpSetup, ApplicationStart, DocLinksStart } from 'kibana/public'; import { ReducerAction } from './connector_reducer'; -import { ActionConnector, IErrorObject, ActionTypeModel } from '../../../types'; +import { + ActionConnector, + IErrorObject, + ActionTypeModel, + UserConfiguredActionConnector, +} from '../../../types'; import { TypeRegistry } from '../../type_registry'; import { hasSaveActionsCapability } from '../../lib/capabilities'; @@ -43,8 +48,11 @@ export function validateBaseProperties(actionObject: ActionConnector) { return validationResult; } -interface ActionConnectorProps { - connector: ActionConnector; +interface ActionConnectorProps< + ConnectorConfig = Record, + ConnectorSecrets = Record +> { + connector: UserConfiguredActionConnector; dispatch: React.Dispatch; actionTypeName: string; serverError?: { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx index 7b985ab85cd4e..6c7a1cbdc3c70 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx @@ -96,10 +96,12 @@ export const ConnectorEditFlyout = ({ } const actionTypeModel = actionTypeRegistry.get(connector.actionTypeId); - const errorsInConnectorConfig = { - ...actionTypeModel?.validateConnector(connector).errors, - ...validateBaseProperties(connector).errors, - } as IErrorObject; + const errorsInConnectorConfig = (!connector.isPreconfigured + ? { + ...actionTypeModel?.validateConnector(connector).errors, + ...validateBaseProperties(connector).errors, + } + : {}) as IErrorObject; const hasErrorsInConnectorConfig = !!Object.keys(errorsInConnectorConfig).find( (errorKey) => errorsInConnectorConfig[errorKey].length >= 1 ); diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts index e147f035fbb86..c551746fdec0c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/types.ts @@ -64,15 +64,19 @@ export interface Pagination { size: number; } -export interface ActionTypeModel { +export interface ActionTypeModel { id: string; iconClass: string; selectMessage: string; actionTypeTitle?: string; - validateConnector: (connector: any) => ValidationResult; + validateConnector: ( + connector: UserConfiguredActionConnector + ) => ValidationResult; validateParams: (actionParams: any) => ValidationResult; actionConnectorFields: React.LazyExoticComponent< - ComponentType> + ComponentType< + ActionConnectorFieldsProps> + > > | null; actionParamsFields: React.LazyExoticComponent< ComponentType> @@ -83,21 +87,42 @@ export interface ValidationResult { errors: Record; } -export interface ActionConnector { - secrets: Record; +interface ActionConnectorProps { + secrets: Secrets; id: string; actionTypeId: string; name: string; referencedByCount?: number; - config: Record; + config: Config; isPreconfigured: boolean; } -export type ActionConnectorWithoutId = Omit; +export type PreConfiguredActionConnector = Omit< + ActionConnectorProps, + 'config' | 'secrets' +> & { + isPreconfigured: true; +}; + +export type UserConfiguredActionConnector = ActionConnectorProps< + Config, + Secrets +> & { + isPreconfigured: false; +}; + +export type ActionConnector, Secrets = Record> = + | PreConfiguredActionConnector + | UserConfiguredActionConnector; -export interface ActionConnectorTableItem extends ActionConnector { +export type ActionConnectorWithoutId< + Config = Record, + Secrets = Record +> = Omit, 'id'>; + +export type ActionConnectorTableItem = ActionConnector & { actionType: ActionType['name']; -} +}; export interface ActionVariable { name: string; diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/connectors.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/connectors.ts index 151c837640228..f56e0e2629d40 100644 --- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/connectors.ts +++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/connectors.ts @@ -245,7 +245,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { }); it('should not be able to edit a preconfigured connector', async () => { - const preconfiguredConnectorName = 'xyztest'; + const preconfiguredConnectorName = 'test-preconfigured-email'; await pageObjects.triggersActionsUI.searchConnectors(preconfiguredConnectorName); diff --git a/x-pack/test/functional_with_es_ssl/config.ts b/x-pack/test/functional_with_es_ssl/config.ts index 5df5a4155efd3..eedc39b09a8e4 100644 --- a/x-pack/test/functional_with_es_ssl/config.ts +++ b/x-pack/test/functional_with_es_ssl/config.ts @@ -76,6 +76,15 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) { actionTypeId: '.server-log', name: 'Serverlog#xyz', }, + 'my-email-connector': { + actionTypeId: '.email', + name: 'Email#test-preconfigured-email', + config: { + from: 'me@example.com', + host: 'localhost', + port: '1025', + }, + }, })}`, ], }, From af517a078a03160caa4f3498eca654d9f49e5147 Mon Sep 17 00:00:00 2001 From: Brandon Kobel Date: Thu, 1 Oct 2020 06:39:41 -0700 Subject: [PATCH 35/39] core route handler context is now lazy (#78957) * Core route handler context is now lazy * Removing `coreStart` intermediate variable * Adding unit tests for CoreRouteHandlerContext Co-authored-by: Elastic Machine --- .../server/core_route_handler_context.test.ts | 239 ++++++++++++++++++ src/core/server/core_route_handler_context.ts | 132 ++++++++++ src/core/server/server.ts | 21 +- 3 files changed, 373 insertions(+), 19 deletions(-) create mode 100644 src/core/server/core_route_handler_context.test.ts create mode 100644 src/core/server/core_route_handler_context.ts diff --git a/src/core/server/core_route_handler_context.test.ts b/src/core/server/core_route_handler_context.test.ts new file mode 100644 index 0000000000000..563e337e6c7e0 --- /dev/null +++ b/src/core/server/core_route_handler_context.test.ts @@ -0,0 +1,239 @@ +/* + * 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. + */ +import { CoreRouteHandlerContext } from './core_route_handler_context'; +import { coreMock, httpServerMock } from './mocks'; + +describe('#auditor', () => { + test('returns the results of coreStart.audiTrail.asScoped', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const auditor = context.auditor; + expect(auditor).toBe(coreStart.auditTrail.asScoped.mock.results[0].value); + }); + + test('lazily created', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + expect(coreStart.auditTrail.asScoped).not.toHaveBeenCalled(); + const auditor = context.auditor; + expect(coreStart.auditTrail.asScoped).toHaveBeenCalled(); + expect(auditor).toBeDefined(); + }); + + test('only creates one instance', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const auditor1 = context.auditor; + const auditor2 = context.auditor; + expect(coreStart.auditTrail.asScoped.mock.calls.length).toBe(1); + const mockResult = coreStart.auditTrail.asScoped.mock.results[0].value; + expect(auditor1).toBe(mockResult); + expect(auditor2).toBe(mockResult); + }); +}); + +describe('#elasticsearch', () => { + describe('#client', () => { + test('returns the results of coreStart.elasticsearch.client.asScoped', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client = context.elasticsearch.client; + expect(client).toBe(coreStart.elasticsearch.client.asScoped.mock.results[0].value); + }); + + test('lazily created', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + expect(coreStart.elasticsearch.client.asScoped).not.toHaveBeenCalled(); + const client = context.elasticsearch.client; + expect(coreStart.elasticsearch.client.asScoped).toHaveBeenCalled(); + expect(client).toBeDefined(); + }); + + test('only creates one instance', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client1 = context.elasticsearch.client; + const client2 = context.elasticsearch.client; + expect(coreStart.elasticsearch.client.asScoped.mock.calls.length).toBe(1); + const mockResult = coreStart.elasticsearch.client.asScoped.mock.results[0].value; + expect(client1).toBe(mockResult); + expect(client2).toBe(mockResult); + }); + }); + + describe('#legacy', () => { + describe('#client', () => { + test('returns the results of coreStart.elasticsearch.legacy.client.asScoped', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client = context.elasticsearch.legacy.client; + expect(client).toBe(coreStart.elasticsearch.legacy.client.asScoped.mock.results[0].value); + }); + + test('lazily created', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + expect(coreStart.elasticsearch.legacy.client.asScoped).not.toHaveBeenCalled(); + const client = context.elasticsearch.legacy.client; + expect(coreStart.elasticsearch.legacy.client.asScoped).toHaveBeenCalled(); + expect(client).toBeDefined(); + }); + + test('only creates one instance', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client1 = context.elasticsearch.legacy.client; + const client2 = context.elasticsearch.legacy.client; + expect(coreStart.elasticsearch.legacy.client.asScoped.mock.calls.length).toBe(1); + const mockResult = coreStart.elasticsearch.legacy.client.asScoped.mock.results[0].value; + expect(client1).toBe(mockResult); + expect(client2).toBe(mockResult); + }); + }); + }); +}); + +describe('#savedObjects', () => { + describe('#client', () => { + test('returns the results of coreStart.savedObjects.getScopedClient', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client = context.savedObjects.client; + expect(client).toBe(coreStart.savedObjects.getScopedClient.mock.results[0].value); + }); + + test('lazily created', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const savedObjects = context.savedObjects; + expect(coreStart.savedObjects.getScopedClient).not.toHaveBeenCalled(); + const client = savedObjects.client; + expect(coreStart.savedObjects.getScopedClient).toHaveBeenCalled(); + expect(client).toBeDefined(); + }); + + test('only creates one instance', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client1 = context.savedObjects.client; + const client2 = context.savedObjects.client; + expect(coreStart.savedObjects.getScopedClient.mock.calls.length).toBe(1); + const mockResult = coreStart.savedObjects.getScopedClient.mock.results[0].value; + expect(client1).toBe(mockResult); + expect(client2).toBe(mockResult); + }); + }); + + describe('#typeRegistry', () => { + test('returns the results of coreStart.savedObjects.getTypeRegistry', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const typeRegistry = context.savedObjects.typeRegistry; + expect(typeRegistry).toBe(coreStart.savedObjects.getTypeRegistry.mock.results[0].value); + }); + + test('lazily created', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + expect(coreStart.savedObjects.getTypeRegistry).not.toHaveBeenCalled(); + const typeRegistry = context.savedObjects.typeRegistry; + expect(coreStart.savedObjects.getTypeRegistry).toHaveBeenCalled(); + expect(typeRegistry).toBeDefined(); + }); + + test('only creates one instance', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const typeRegistry1 = context.savedObjects.typeRegistry; + const typeRegistry2 = context.savedObjects.typeRegistry; + expect(coreStart.savedObjects.getTypeRegistry.mock.calls.length).toBe(1); + const mockResult = coreStart.savedObjects.getTypeRegistry.mock.results[0].value; + expect(typeRegistry1).toBe(mockResult); + expect(typeRegistry2).toBe(mockResult); + }); + }); +}); + +describe('#uiSettings', () => { + describe('#client', () => { + test('returns the results of coreStart.uiSettings.asScopedToClient', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client = context.uiSettings.client; + expect(client).toBe(coreStart.uiSettings.asScopedToClient.mock.results[0].value); + }); + + test('lazily created', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + expect(coreStart.uiSettings.asScopedToClient).not.toHaveBeenCalled(); + const client = context.uiSettings.client; + expect(coreStart.uiSettings.asScopedToClient).toHaveBeenCalled(); + expect(client).toBeDefined(); + }); + + test('only creates one instance', () => { + const request = httpServerMock.createKibanaRequest(); + const coreStart = coreMock.createInternalStart(); + const context = new CoreRouteHandlerContext(coreStart, request); + + const client1 = context.uiSettings.client; + const client2 = context.uiSettings.client; + expect(coreStart.uiSettings.asScopedToClient.mock.calls.length).toBe(1); + const mockResult = coreStart.uiSettings.asScopedToClient.mock.results[0].value; + expect(client1).toBe(mockResult); + expect(client2).toBe(mockResult); + }); + }); +}); diff --git a/src/core/server/core_route_handler_context.ts b/src/core/server/core_route_handler_context.ts new file mode 100644 index 0000000000000..8a182a523f52c --- /dev/null +++ b/src/core/server/core_route_handler_context.ts @@ -0,0 +1,132 @@ +/* + * 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. + */ + +// eslint-disable-next-line max-classes-per-file +import { InternalCoreStart } from './internal_types'; +import { KibanaRequest } from './http/router'; +import { SavedObjectsClientContract } from './saved_objects/types'; +import { InternalSavedObjectsServiceStart, ISavedObjectTypeRegistry } from './saved_objects'; +import { + InternalElasticsearchServiceStart, + IScopedClusterClient, + LegacyScopedClusterClient, +} from './elasticsearch'; +import { Auditor } from './audit_trail'; +import { InternalUiSettingsServiceStart, IUiSettingsClient } from './ui_settings'; + +class CoreElasticsearchRouteHandlerContext { + #client?: IScopedClusterClient; + #legacy?: { + client: Pick; + }; + + constructor( + private readonly elasticsearchStart: InternalElasticsearchServiceStart, + private readonly request: KibanaRequest + ) {} + + public get client() { + if (this.#client == null) { + this.#client = this.elasticsearchStart.client.asScoped(this.request); + } + return this.#client; + } + + public get legacy() { + if (this.#legacy == null) { + this.#legacy = { + client: this.elasticsearchStart.legacy.client.asScoped(this.request), + }; + } + return this.#legacy; + } +} + +class CoreSavedObjectsRouteHandlerContext { + constructor( + private readonly savedObjectsStart: InternalSavedObjectsServiceStart, + private readonly request: KibanaRequest + ) {} + #scopedSavedObjectsClient?: SavedObjectsClientContract; + #typeRegistry?: ISavedObjectTypeRegistry; + + public get client() { + if (this.#scopedSavedObjectsClient == null) { + this.#scopedSavedObjectsClient = this.savedObjectsStart.getScopedClient(this.request); + } + return this.#scopedSavedObjectsClient; + } + + public get typeRegistry() { + if (this.#typeRegistry == null) { + this.#typeRegistry = this.savedObjectsStart.getTypeRegistry(); + } + return this.#typeRegistry; + } +} + +class CoreUiSettingsRouteHandlerContext { + #client?: IUiSettingsClient; + constructor( + private readonly uiSettingsStart: InternalUiSettingsServiceStart, + private readonly savedObjectsRouterHandlerContext: CoreSavedObjectsRouteHandlerContext + ) {} + + public get client() { + if (this.#client == null) { + this.#client = this.uiSettingsStart.asScopedToClient( + this.savedObjectsRouterHandlerContext.client + ); + } + return this.#client; + } +} + +export class CoreRouteHandlerContext { + #auditor?: Auditor; + + readonly elasticsearch: CoreElasticsearchRouteHandlerContext; + readonly savedObjects: CoreSavedObjectsRouteHandlerContext; + readonly uiSettings: CoreUiSettingsRouteHandlerContext; + + constructor( + private readonly coreStart: InternalCoreStart, + private readonly request: KibanaRequest + ) { + this.elasticsearch = new CoreElasticsearchRouteHandlerContext( + this.coreStart.elasticsearch, + this.request + ); + this.savedObjects = new CoreSavedObjectsRouteHandlerContext( + this.coreStart.savedObjects, + this.request + ); + this.uiSettings = new CoreUiSettingsRouteHandlerContext( + this.coreStart.uiSettings, + this.savedObjects + ); + } + + public get auditor() { + if (this.#auditor == null) { + this.#auditor = this.coreStart.auditTrail.asScoped(this.request); + } + return this.#auditor; + } +} diff --git a/src/core/server/server.ts b/src/core/server/server.ts index 4e5a7a328bed4..ece10db41962d 100644 --- a/src/core/server/server.ts +++ b/src/core/server/server.ts @@ -48,6 +48,7 @@ import { config as statusConfig } from './status'; import { ContextService } from './context'; import { RequestHandlerContext } from '.'; import { InternalCoreSetup, InternalCoreStart, ServiceConfigDescriptor } from './internal_types'; +import { CoreRouteHandlerContext } from './core_route_handler_context'; const coreId = Symbol('core'); const rootConfigPath = ''; @@ -279,25 +280,7 @@ export class Server { coreId, 'core', async (context, req, res): Promise => { - const coreStart = this.coreStart!; - const savedObjectsClient = coreStart.savedObjects.getScopedClient(req); - - return { - savedObjects: { - client: savedObjectsClient, - typeRegistry: coreStart.savedObjects.getTypeRegistry(), - }, - elasticsearch: { - client: coreStart.elasticsearch.client.asScoped(req), - legacy: { - client: coreStart.elasticsearch.legacy.client.asScoped(req), - }, - }, - uiSettings: { - client: coreStart.uiSettings.asScopedToClient(savedObjectsClient), - }, - auditor: coreStart.auditTrail.asScoped(req), - }; + return new CoreRouteHandlerContext(this.coreStart!, req); } ); } From 9f5033354d2a8d8cb264827a7ab6d38b36a8a532 Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Thu, 1 Oct 2020 08:57:52 -0500 Subject: [PATCH 36/39] Remove APM-specific loading indicator (#79042) Kibana now has its own loading indicator. Remove the one we were using. Also remove the old service map loading indicator that was used back when we had background jobs. Fixes #78769. --- .../plugins/apm/public/application/csmApp.tsx | 5 +- .../plugins/apm/public/application/index.tsx | 9 +- .../app/ServiceMap/LoadingOverlay.tsx | 61 ------------ .../Delayed/index.test.tsx | 96 ------------------- .../useDelayedVisibility/Delayed/index.ts | 66 ------------- .../useDelayedVisibility/index.test.tsx | 86 ----------------- .../shared/useDelayedVisibility/index.ts | 48 ---------- .../context/LoadingIndicatorContext.tsx | 65 ------------- .../plugins/apm/public/hooks/useFetcher.tsx | 14 +-- .../apm/public/hooks/useLoadingIndicator.ts | 28 ------ .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 12 files changed, 5 insertions(+), 475 deletions(-) delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx delete mode 100644 x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.test.tsx delete mode 100644 x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.ts delete mode 100644 x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.test.tsx delete mode 100644 x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.ts delete mode 100644 x-pack/plugins/apm/public/context/LoadingIndicatorContext.tsx delete mode 100644 x-pack/plugins/apm/public/hooks/useLoadingIndicator.ts diff --git a/x-pack/plugins/apm/public/application/csmApp.tsx b/x-pack/plugins/apm/public/application/csmApp.tsx index 5ebe14b663f56..2baddbe572a52 100644 --- a/x-pack/plugins/apm/public/application/csmApp.tsx +++ b/x-pack/plugins/apm/public/application/csmApp.tsx @@ -22,7 +22,6 @@ import { renderAsRedirectTo } from '../components/app/Main/route_config'; import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange'; import { RumHome, UX_LABEL } from '../components/app/RumDashboard/RumHome'; import { ApmPluginContext } from '../context/ApmPluginContext'; -import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext'; import { UrlParamsProvider } from '../context/UrlParamsContext'; import { useBreadcrumbs } from '../hooks/use_breadcrumbs'; import { ConfigSchema } from '../index'; @@ -92,9 +91,7 @@ export function CsmAppRoot({ - - - + diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx index 9843f73dafdbb..24505951c9d71 100644 --- a/x-pack/plugins/apm/public/application/index.tsx +++ b/x-pack/plugins/apm/public/application/index.tsx @@ -24,7 +24,6 @@ import { routes } from '../components/app/Main/route_config'; import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange'; import { ApmPluginContext } from '../context/ApmPluginContext'; import { LicenseProvider } from '../context/LicenseContext'; -import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext'; import { UrlParamsProvider } from '../context/UrlParamsContext'; import { useBreadcrumbs } from '../hooks/use_breadcrumbs'; import { ApmPluginSetupDeps } from '../plugin'; @@ -99,11 +98,9 @@ export function ApmAppRoot({ - - - - - + + + diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx deleted file mode 100644 index 8557c3f0c0798..0000000000000 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx +++ /dev/null @@ -1,61 +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 { EuiProgress, EuiText, EuiSpacer } from '@elastic/eui'; -import styled from 'styled-components'; -import { i18n } from '@kbn/i18n'; - -const Container = styled.div` - position: relative; -`; - -const Overlay = styled.div` - position: absolute; - top: 0; - z-index: 1; - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - padding: ${({ theme }) => theme.eui.gutterTypes.gutterMedium}; -`; - -const ProgressBarContainer = styled.div` - width: 50%; - max-width: 600px; -`; - -interface Props { - isLoading: boolean; - percentageLoaded: number; -} - -export function LoadingOverlay({ isLoading, percentageLoaded }: Props) { - return ( - - {isLoading && ( - - - - - - - {i18n.translate('xpack.apm.loadingServiceMap', { - defaultMessage: - 'Loading service map... This might take a short while.', - })} - - - )} - - ); -} diff --git a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.test.tsx b/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.test.tsx deleted file mode 100644 index 47c439bdd746d..0000000000000 --- a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.test.tsx +++ /dev/null @@ -1,96 +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 { Delayed } from './index'; - -// Advanced time like setTimeout and mocks Date.now() to stay in sync -class AdvanceTimer { - public nowTime = 0; - public advance(ms: number) { - this.nowTime += ms; - jest.spyOn(Date, 'now').mockReturnValue(this.nowTime); - jest.advanceTimersByTime(ms); - } -} - -describe('Delayed', () => { - it('should not flicker between show/hide when the hide interval is very short', async () => { - jest.useFakeTimers(); - const visibilityChanges: boolean[] = []; - const advanceTimer = new AdvanceTimer(); - const delayed = new Delayed(); - - delayed.onChange((isVisible) => visibilityChanges.push(isVisible)); - - for (let i = 1; i < 100; i += 2) { - delayed.show(); - advanceTimer.advance(1000); - delayed.hide(); - advanceTimer.advance(20); - } - advanceTimer.advance(100); - - expect(visibilityChanges).toEqual([true, false]); - }); - - it('should not be shown at all when the duration is very short', async () => { - jest.useFakeTimers(); - const advanceTimer = new AdvanceTimer(); - const visibilityChanges: boolean[] = []; - const delayed = new Delayed(); - - delayed.onChange((isVisible) => visibilityChanges.push(isVisible)); - - delayed.show(); - advanceTimer.advance(30); - delayed.hide(); - advanceTimer.advance(1000); - - expect(visibilityChanges).toEqual([]); - }); - - it('should be displayed for minimum 1000ms', async () => { - jest.useFakeTimers(); - const visibilityChanges: boolean[] = []; - const advanceTimer = new AdvanceTimer(); - const delayed = new Delayed(); - - delayed.onChange((isVisible) => visibilityChanges.push(isVisible)); - - delayed.show(); - advanceTimer.advance(200); - delayed.hide(); - advanceTimer.advance(950); - expect(visibilityChanges).toEqual([true]); - advanceTimer.advance(100); - expect(visibilityChanges).toEqual([true, false]); - delayed.show(); - advanceTimer.advance(50); - expect(visibilityChanges).toEqual([true, false, true]); - delayed.hide(); - advanceTimer.advance(950); - expect(visibilityChanges).toEqual([true, false, true]); - advanceTimer.advance(100); - expect(visibilityChanges).toEqual([true, false, true, false]); - }); - - it('should be displayed for minimum 2000ms', async () => { - jest.useFakeTimers(); - const visibilityChanges: boolean[] = []; - const advanceTimer = new AdvanceTimer(); - const delayed = new Delayed({ minimumVisibleDuration: 2000 }); - - delayed.onChange((isVisible) => visibilityChanges.push(isVisible)); - - delayed.show(); - advanceTimer.advance(200); - delayed.hide(); - advanceTimer.advance(1950); - expect(visibilityChanges).toEqual([true]); - advanceTimer.advance(100); - expect(visibilityChanges).toEqual([true, false]); - }); -}); diff --git a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.ts b/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.ts deleted file mode 100644 index daab721f64b1a..0000000000000 --- a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/Delayed/index.ts +++ /dev/null @@ -1,66 +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. - */ - -type Callback = (isVisible: boolean) => void; - -export class Delayed { - private displayedAt = 0; - private hideDelayMs: number; - private isVisible = false; - private minimumVisibleDuration: number; - private showDelayMs: number; - private timeoutId?: number; - - constructor({ - minimumVisibleDuration = 1000, - showDelayMs = 50, - hideDelayMs = 50, - } = {}) { - this.minimumVisibleDuration = minimumVisibleDuration; - this.hideDelayMs = hideDelayMs; - this.showDelayMs = showDelayMs; - } - - private onChangeCallback: Callback = () => null; - - private updateState(isVisible: boolean) { - window.clearTimeout(this.timeoutId); - const ms = !isVisible - ? Math.max( - this.displayedAt + this.minimumVisibleDuration - Date.now(), - this.hideDelayMs - ) - : this.showDelayMs; - - this.timeoutId = window.setTimeout(() => { - if (this.isVisible !== isVisible) { - this.isVisible = isVisible; - this.onChangeCallback(isVisible); - if (isVisible) { - this.displayedAt = Date.now(); - } - } - }, ms); - } - - public show() { - this.updateState(true); - } - - public hide() { - this.updateState(false); - } - - public onChange(onChangeCallback: Callback) { - this.onChangeCallback = onChangeCallback; - } - - public destroy() { - if (this.timeoutId) { - window.clearTimeout(this.timeoutId); - } - } -} diff --git a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.test.tsx b/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.test.tsx deleted file mode 100644 index 447e11eab5e41..0000000000000 --- a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.test.tsx +++ /dev/null @@ -1,86 +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 { - renderHook, - act, - RenderHookResult, -} from '@testing-library/react-hooks'; -import { useDelayedVisibility } from '.'; - -// Failing: See https://github.com/elastic/kibana/issues/66389 -describe.skip('useFetcher', () => { - let hook: RenderHookResult; - - beforeEach(() => { - jest.useFakeTimers(); - }); - - it('is initially false', () => { - hook = renderHook((isLoading) => useDelayedVisibility(isLoading), { - initialProps: false, - }); - expect(hook.result.current).toEqual(false); - }); - - it('does not change to true immediately', () => { - hook = renderHook((isLoading) => useDelayedVisibility(isLoading), { - initialProps: false, - }); - - hook.rerender(true); - act(() => { - jest.advanceTimersByTime(10); - }); - - expect(hook.result.current).toEqual(false); - act(() => { - jest.advanceTimersByTime(50); - }); - - expect(hook.result.current).toEqual(true); - }); - - it('does not change to false immediately', () => { - hook = renderHook((isLoading) => useDelayedVisibility(isLoading), { - initialProps: false, - }); - - hook.rerender(true); - act(() => { - jest.advanceTimersByTime(100); - }); - hook.rerender(false); - - expect(hook.result.current).toEqual(true); - }); - - // Disabled because it's flaky: https://github.com/elastic/kibana/issues/66389 - // it('is true for minimum 1000ms', () => { - // hook = renderHook((isLoading) => useDelayedVisibility(isLoading), { - // initialProps: false, - // }); - - // hook.rerender(true); - - // act(() => { - // jest.advanceTimersByTime(100); - // }); - - // hook.rerender(false); - // act(() => { - // jest.advanceTimersByTime(900); - // }); - - // expect(hook.result.current).toEqual(true); - - // act(() => { - // jest.advanceTimersByTime(100); - // }); - - // expect(hook.result.current).toEqual(false); - // }); -}); diff --git a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.ts b/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.ts deleted file mode 100644 index bd5708494d641..0000000000000 --- a/x-pack/plugins/apm/public/components/shared/useDelayedVisibility/index.ts +++ /dev/null @@ -1,48 +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 { useEffect, useRef, useState } from 'react'; -import { Delayed } from './Delayed'; - -export function useDelayedVisibility( - visible: boolean, - hideDelayMs?: number, - showDelayMs?: number, - minimumVisibleDuration?: number -) { - const [isVisible, setIsVisible] = useState(false); - const delayedRef = useRef(null); - - useEffect(() => { - const delayed = new Delayed({ - hideDelayMs, - showDelayMs, - minimumVisibleDuration, - }); - delayed.onChange((visibility) => { - setIsVisible(visibility); - }); - delayedRef.current = delayed; - - return () => { - delayed.destroy(); - }; - }, [hideDelayMs, showDelayMs, minimumVisibleDuration]); - - useEffect(() => { - if (!delayedRef.current) { - return; - } - - if (visible) { - delayedRef.current.show(); - } else { - delayedRef.current.hide(); - } - }, [visible]); - - return isVisible; -} diff --git a/x-pack/plugins/apm/public/context/LoadingIndicatorContext.tsx b/x-pack/plugins/apm/public/context/LoadingIndicatorContext.tsx deleted file mode 100644 index 99822c0bbc5ca..0000000000000 --- a/x-pack/plugins/apm/public/context/LoadingIndicatorContext.tsx +++ /dev/null @@ -1,65 +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 { EuiPortal, EuiProgress } from '@elastic/eui'; -import { pickBy } from 'lodash'; -import React, { Fragment, useMemo, useReducer } from 'react'; -import { useDelayedVisibility } from '../components/shared/useDelayedVisibility'; - -export const LoadingIndicatorContext = React.createContext({ - statuses: {}, - dispatchStatus: (_action: Action) => {}, -}); - -interface State { - [key: string]: boolean; -} - -interface Action { - isLoading: boolean; - id: number; -} - -function reducer(statuses: State, action: Action) { - // Return an object with only the ids with `true` as their value, so that ids - // that previously had `false` are removed and do not remain hanging around in - // the object. - return pickBy( - { ...statuses, [action.id.toString()]: action.isLoading }, - Boolean - ); -} - -function getIsAnyLoading(statuses: State) { - return Object.values(statuses).some((isLoading) => isLoading); -} - -export function LoadingIndicatorProvider({ - children, -}: { - children: React.ReactNode; -}) { - const [statuses, dispatchStatus] = useReducer(reducer, {}); - const isLoading = useMemo(() => getIsAnyLoading(statuses), [statuses]); - const shouldShowLoadingIndicator = useDelayedVisibility(isLoading); - const contextValue = React.useMemo(() => ({ statuses, dispatchStatus }), [ - statuses, - ]); - - return ( - - {shouldShowLoadingIndicator && ( - - - - )} - - - - ); -} diff --git a/x-pack/plugins/apm/public/hooks/useFetcher.tsx b/x-pack/plugins/apm/public/hooks/useFetcher.tsx index 68b197c46e888..5d65424844c5a 100644 --- a/x-pack/plugins/apm/public/hooks/useFetcher.tsx +++ b/x-pack/plugins/apm/public/hooks/useFetcher.tsx @@ -4,14 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useContext, useEffect, useState, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; +import React, { useEffect, useMemo, useState } from 'react'; import { IHttpFetchError } from 'src/core/public'; import { toMountPoint } from '../../../../../src/plugins/kibana_react/public'; -import { LoadingIndicatorContext } from '../context/LoadingIndicatorContext'; import { APMClient, callApmApi } from '../services/rest/createCallApmApi'; import { useApmPluginContext } from './useApmPluginContext'; -import { useLoadingIndicator } from './useLoadingIndicator'; export enum FETCH_STATUS { LOADING = 'loading', @@ -44,9 +42,6 @@ export function useFetcher( ): FetcherResult> & { refetch: () => void } { const { notifications } = useApmPluginContext().core; const { preservePreviousData = true, showToastOnError = true } = options; - const { setIsLoading } = useLoadingIndicator(); - - const { dispatchStatus } = useContext(LoadingIndicatorContext); const [result, setResult] = useState< FetcherResult> >({ @@ -67,8 +62,6 @@ export function useFetcher( return; } - setIsLoading(true); - setResult((prevResult) => ({ data: preservePreviousData ? prevResult.data : undefined, // preserve data from previous state while loading next state status: FETCH_STATUS.LOADING, @@ -78,7 +71,6 @@ export function useFetcher( try { const data = await promise; if (!didCancel) { - setIsLoading(false); setResult({ data, status: FETCH_STATUS.SUCCESS, @@ -122,7 +114,6 @@ export function useFetcher( ), }); } - setIsLoading(false); setResult({ data: undefined, status: FETCH_STATUS.FAILURE, @@ -135,7 +126,6 @@ export function useFetcher( doFetch(); return () => { - setIsLoading(false); didCancel = true; }; /* eslint-disable react-hooks/exhaustive-deps */ @@ -143,8 +133,6 @@ export function useFetcher( counter, preservePreviousData, showToastOnError, - dispatchStatus, - setIsLoading, ...fnDeps, /* eslint-enable react-hooks/exhaustive-deps */ ]); diff --git a/x-pack/plugins/apm/public/hooks/useLoadingIndicator.ts b/x-pack/plugins/apm/public/hooks/useLoadingIndicator.ts deleted file mode 100644 index 6742efb0ffbae..0000000000000 --- a/x-pack/plugins/apm/public/hooks/useLoadingIndicator.ts +++ /dev/null @@ -1,28 +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 { useContext, useMemo, useEffect } from 'react'; -import { LoadingIndicatorContext } from '../context/LoadingIndicatorContext'; -import { useComponentId } from './useComponentId'; - -export function useLoadingIndicator() { - const { dispatchStatus } = useContext(LoadingIndicatorContext); - const id = useComponentId(); - - useEffect(() => { - return () => { - dispatchStatus({ id, isLoading: false }); - }; - }, [dispatchStatus, id]); - - return useMemo(() => { - return { - setIsLoading: (loading: boolean) => { - dispatchStatus({ id, isLoading: loading }); - }, - }; - }, [dispatchStatus, id]); -} diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 34ff32244035a..0ebb10d30c010 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -4712,7 +4712,6 @@ "xpack.apm.license.betaTooltipMessage": "現在、この機能はベータです。不具合を見つけた場合やご意見がある場合、サポートに問い合わせるか、またはディスカッションフォーラムにご報告ください。", "xpack.apm.license.button": "トライアルを開始", "xpack.apm.license.title": "無料の 30 日トライアルを開始", - "xpack.apm.loadingServiceMap": "サービスマップを読み込み中...多少時間がかかる場合があります。", "xpack.apm.localFilters.titles.agentName": "エージェント名", "xpack.apm.localFilters.titles.browser": "ブラウザー", "xpack.apm.localFilters.titles.containerId": "コンテナー ID", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index db59493002987..acd6db3b758b1 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -4714,7 +4714,6 @@ "xpack.apm.license.betaTooltipMessage": "此功能当前为公测版。如果遇到任何错误或有任何反馈，请报告问题或访问我们的论坛。", "xpack.apm.license.button": "开始试用", "xpack.apm.license.title": "开始为期 30 天的免费试用", - "xpack.apm.loadingServiceMap": "正在加载服务地图......这可能需要一会儿时间。", "xpack.apm.localFilters.titles.agentName": "代理名称", "xpack.apm.localFilters.titles.browser": "浏览器", "xpack.apm.localFilters.titles.containerId": "容器 ID", From b692c374a2b0240b27d8077b3a14de435d492851 Mon Sep 17 00:00:00 2001 From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com> Date: Thu, 1 Oct 2020 17:08:12 +0300 Subject: [PATCH 37/39] Timelion visualization renderer (#78540) * Update styles * Implement toExpressionAst fn * Implement renderer * Update unit tests * Add unit tests * Update types * Remove unused vars * Fix types * Update types * Show error message when no data * Update ExpressionRenderDefinition api * Update renderer when there is no data * Make options component lazy Co-authored-by: Elastic Machine --- ....expressionrenderdefinition.displayname.md | 2 +- ....expressionrenderdefinition.displayname.md | 2 +- .../common/expression_renderers/types.ts | 2 +- src/plugins/expressions/public/public.api.md | 2 +- src/plugins/expressions/server/server.api.md | 2 +- src/plugins/timelion/public/index.scss | 6 ++ .../public/tag_cloud_vis_renderer.tsx | 1 - .../public/__snapshots__/to_ast.test.ts.snap | 21 ++++++ .../public/_timelion_editor.scss | 15 ----- .../public/_timelion_vis.scss | 12 ---- .../{_panel.scss => _timelion_vis.scss} | 8 +++ .../components/{_index.scss => index.scss} | 2 +- .../public/components/index.ts | 1 - .../public/components/timelion_vis.tsx | 50 -------------- .../{panel.tsx => timelion_vis_component.tsx} | 57 ++++++++++------ .../helpers/timelion_request_handler.ts | 4 +- .../vis_type_timelion/public/index.scss | 3 - .../vis_type_timelion/public/plugin.ts | 5 +- .../public/timelion_options.tsx | 47 +++++++++----- .../public/timelion_vis_fn.ts | 26 +++++--- .../public/timelion_vis_renderer.tsx | 65 +++++++++++++++++++ .../public/timelion_vis_type.tsx | 19 ++---- .../{components/chart.tsx => to_ast.test.ts} | 37 +++++------ .../vis_type_timelion/public/to_ast.ts | 37 +++++++++++ .../__snapshots__/build_pipeline.test.ts.snap | 2 - .../public/legacy/build_pipeline.test.ts | 6 -- .../public/legacy/build_pipeline.ts | 5 -- 27 files changed, 258 insertions(+), 181 deletions(-) create mode 100644 src/plugins/vis_type_timelion/public/__snapshots__/to_ast.test.ts.snap delete mode 100644 src/plugins/vis_type_timelion/public/_timelion_editor.scss delete mode 100644 src/plugins/vis_type_timelion/public/_timelion_vis.scss rename src/plugins/vis_type_timelion/public/components/{_panel.scss => _timelion_vis.scss} (88%) rename src/plugins/vis_type_timelion/public/components/{_index.scss => index.scss} (60%) delete mode 100644 src/plugins/vis_type_timelion/public/components/timelion_vis.tsx rename src/plugins/vis_type_timelion/public/components/{panel.tsx => timelion_vis_component.tsx} (90%) delete mode 100644 src/plugins/vis_type_timelion/public/index.scss create mode 100644 src/plugins/vis_type_timelion/public/timelion_vis_renderer.tsx rename src/plugins/vis_type_timelion/public/{components/chart.tsx => to_ast.test.ts} (60%) create mode 100644 src/plugins/vis_type_timelion/public/to_ast.ts diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionrenderdefinition.displayname.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionrenderdefinition.displayname.md index 9d5f7609ee6cd..a957ecd63f043 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionrenderdefinition.displayname.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionrenderdefinition.displayname.md @@ -9,5 +9,5 @@ A user friendly name of the renderer as will be displayed to user in UI. Signature: ```typescript -displayName: string; +displayName?: string; ``` diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.expressionrenderdefinition.displayname.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.expressionrenderdefinition.displayname.md index e936e25cee6ca..8ae5aa2f1790e 100644 --- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.expressionrenderdefinition.displayname.md +++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.expressionrenderdefinition.displayname.md @@ -9,5 +9,5 @@ A user friendly name of the renderer as will be displayed to user in UI. Signature: ```typescript -displayName: string; +displayName?: string; ``` diff --git a/src/plugins/expressions/common/expression_renderers/types.ts b/src/plugins/expressions/common/expression_renderers/types.ts index 7b3e812eafedd..b760e7b32a7d2 100644 --- a/src/plugins/expressions/common/expression_renderers/types.ts +++ b/src/plugins/expressions/common/expression_renderers/types.ts @@ -28,7 +28,7 @@ export interface ExpressionRenderDefinition { /** * A user friendly name of the renderer as will be displayed to user in UI. */ - displayName: string; + displayName?: string; /** * Help text as will be displayed to user. A sentence or few about what this diff --git a/src/plugins/expressions/public/public.api.md b/src/plugins/expressions/public/public.api.md index 162f0ef6824f5..5c0fd8ab1a572 100644 --- a/src/plugins/expressions/public/public.api.md +++ b/src/plugins/expressions/public/public.api.md @@ -429,7 +429,7 @@ export interface ExpressionImage { // // @public (undocumented) export interface ExpressionRenderDefinition { - displayName: string; + displayName?: string; help?: string; name: string; render: (domNode: HTMLElement, config: Config, handlers: IInterpreterRenderHandlers) => void | Promise; diff --git a/src/plugins/expressions/server/server.api.md b/src/plugins/expressions/server/server.api.md index 6ac251ea005b4..d8872ee416017 100644 --- a/src/plugins/expressions/server/server.api.md +++ b/src/plugins/expressions/server/server.api.md @@ -401,7 +401,7 @@ export interface ExpressionImage { // // @public (undocumented) export interface ExpressionRenderDefinition { - displayName: string; + displayName?: string; help?: string; name: string; render: (domNode: HTMLElement, config: Config, handlers: IInterpreterRenderHandlers) => void | Promise; diff --git a/src/plugins/timelion/public/index.scss b/src/plugins/timelion/public/index.scss index 6bf7133287c51..f39e0c18a2870 100644 --- a/src/plugins/timelion/public/index.scss +++ b/src/plugins/timelion/public/index.scss @@ -10,3 +10,9 @@ @import './app'; @import './base'; @import './directives/index'; + +// these styles is needed to be loaded here explicitly if the timelion visualization was not opened in browser +// styles for timelion visualization are lazy loaded only while a vis is opened +// this will duplicate styles only if both Timelion app and timelion visualization are loaded +// could be left here as it is since the Timelion app is deprecated +@import '../../vis_type_timelion/public/components/index.scss'; diff --git a/src/plugins/vis_type_tagcloud/public/tag_cloud_vis_renderer.tsx b/src/plugins/vis_type_tagcloud/public/tag_cloud_vis_renderer.tsx index d37aa5f6fe409..b433ed9cbed21 100644 --- a/src/plugins/vis_type_tagcloud/public/tag_cloud_vis_renderer.tsx +++ b/src/plugins/vis_type_tagcloud/public/tag_cloud_vis_renderer.tsx @@ -25,7 +25,6 @@ import { ExpressionRenderDefinition } from '../../expressions/common/expression_ import { TagCloudVisDependencies } from './plugin'; import { TagCloudVisRenderValue } from './tag_cloud_fn'; -// @ts-ignore const TagCloudChart = lazy(() => import('./components/tag_cloud_chart')); export const getTagCloudVisRenderer: ( diff --git a/src/plugins/vis_type_timelion/public/__snapshots__/to_ast.test.ts.snap b/src/plugins/vis_type_timelion/public/__snapshots__/to_ast.test.ts.snap new file mode 100644 index 0000000000000..9e32a6c4ae17c --- /dev/null +++ b/src/plugins/vis_type_timelion/public/__snapshots__/to_ast.test.ts.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`timelion vis toExpressionAst function should match basic snapshot 1`] = ` +Object { + "chain": Array [ + Object { + "arguments": Object { + "expression": Array [ + ".es(*)", + ], + "interval": Array [ + "auto", + ], + }, + "function": "timelion_vis", + "type": "function", + }, + ], + "type": "expression", +} +`; diff --git a/src/plugins/vis_type_timelion/public/_timelion_editor.scss b/src/plugins/vis_type_timelion/public/_timelion_editor.scss deleted file mode 100644 index a9331930a86ff..0000000000000 --- a/src/plugins/vis_type_timelion/public/_timelion_editor.scss +++ /dev/null @@ -1,15 +0,0 @@ -.visEditor--timelion { - vis-options-react-wrapper, - .visEditorSidebar__options, - .visEditorSidebar__timelionOptions { - flex: 1 1 auto; - display: flex; - flex-direction: column; - } - - .visEditor__sidebar { - @include euiBreakpoint('xs', 's', 'm') { - width: 100%; - } - } -} diff --git a/src/plugins/vis_type_timelion/public/_timelion_vis.scss b/src/plugins/vis_type_timelion/public/_timelion_vis.scss deleted file mode 100644 index e7175bf3c0c2a..0000000000000 --- a/src/plugins/vis_type_timelion/public/_timelion_vis.scss +++ /dev/null @@ -1,12 +0,0 @@ -.timVis { - min-width: 100%; - display: flex; - flex-direction: column; - - .timChart { - min-width: 100%; - flex: 1; - display: flex; - flex-direction: column; - } -} diff --git a/src/plugins/vis_type_timelion/public/components/_panel.scss b/src/plugins/vis_type_timelion/public/components/_timelion_vis.scss similarity index 88% rename from src/plugins/vis_type_timelion/public/components/_panel.scss rename to src/plugins/vis_type_timelion/public/components/_timelion_vis.scss index c4d591bc82cad..6729d400523cd 100644 --- a/src/plugins/vis_type_timelion/public/components/_panel.scss +++ b/src/plugins/vis_type_timelion/public/components/_timelion_vis.scss @@ -58,3 +58,11 @@ white-space: nowrap; font-weight: $euiFontWeightBold; } + +.visEditor--timelion { + .visEditorSidebar__timelionOptions { + flex: 1 1 auto; + display: flex; + flex-direction: column; + } +} diff --git a/src/plugins/vis_type_timelion/public/components/_index.scss b/src/plugins/vis_type_timelion/public/components/index.scss similarity index 60% rename from src/plugins/vis_type_timelion/public/components/_index.scss rename to src/plugins/vis_type_timelion/public/components/index.scss index 707c9dafebe2b..a541c66e6e913 100644 --- a/src/plugins/vis_type_timelion/public/components/_index.scss +++ b/src/plugins/vis_type_timelion/public/components/index.scss @@ -1,2 +1,2 @@ -@import 'panel'; +@import 'timelion_vis'; @import 'timelion_expression_input'; diff --git a/src/plugins/vis_type_timelion/public/components/index.ts b/src/plugins/vis_type_timelion/public/components/index.ts index c70caab8dd70c..8d7d32a3ba262 100644 --- a/src/plugins/vis_type_timelion/public/components/index.ts +++ b/src/plugins/vis_type_timelion/public/components/index.ts @@ -19,4 +19,3 @@ export * from './timelion_expression_input'; export * from './timelion_interval'; -export * from './timelion_vis'; diff --git a/src/plugins/vis_type_timelion/public/components/timelion_vis.tsx b/src/plugins/vis_type_timelion/public/components/timelion_vis.tsx deleted file mode 100644 index aa594c749b600..0000000000000 --- a/src/plugins/vis_type_timelion/public/components/timelion_vis.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * 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. - */ - -import React from 'react'; - -import { IUiSettingsClient } from 'kibana/public'; -import { ChartComponent } from './chart'; -import { VisParams } from '../timelion_vis_fn'; -import { TimelionSuccessResponse } from '../helpers/timelion_request_handler'; -import { ExprVis } from '../../../visualizations/public'; - -export interface TimelionVisComponentProp { - config: IUiSettingsClient; - renderComplete(): void; - updateStatus: object; - vis: ExprVis; - visData: TimelionSuccessResponse; - visParams: VisParams; -} - -function TimelionVisComponent(props: TimelionVisComponentProp) { - return ( -
- -
- ); -} - -export { TimelionVisComponent }; diff --git a/src/plugins/vis_type_timelion/public/components/panel.tsx b/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx similarity index 90% rename from src/plugins/vis_type_timelion/public/components/panel.tsx rename to src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx index 9c30a6b75d6db..a7b623ac8680c 100644 --- a/src/plugins/vis_type_timelion/public/components/panel.tsx +++ b/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx @@ -21,7 +21,9 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react'; import $ from 'jquery'; import moment from 'moment-timezone'; import { debounce, compact, get, each, cloneDeep, last, map } from 'lodash'; +import { useResizeObserver } from '@elastic/eui'; +import { IInterpreterRenderHandlers } from 'src/plugins/expressions'; import { useKibana } from '../../../kibana_react/public'; import '../flot'; import { DEFAULT_TIME_FORMAT } from '../../common/lib'; @@ -38,18 +40,19 @@ import { Series, Sheet } from '../helpers/timelion_request_handler'; import { tickFormatters } from '../helpers/tick_formatters'; import { generateTicksProvider } from '../helpers/tick_generator'; import { TimelionVisDependencies } from '../plugin'; -import { ExprVisAPIEvents } from '../../../visualizations/public'; + +import './index.scss'; interface CrosshairPlot extends jquery.flot.plot { setCrosshair: (pos: Position) => void; clearCrosshair: () => void; } -interface PanelProps { - applyFilter: ExprVisAPIEvents['applyFilter']; +interface TimelionVisComponentProps { + fireEvent: IInterpreterRenderHandlers['event']; interval: string; seriesList: Sheet; - renderComplete(): void; + renderComplete: IInterpreterRenderHandlers['done']; } interface Position { @@ -75,11 +78,16 @@ const DEBOUNCE_DELAY = 50; // ensure legend is the same height with or without a caption so legend items do not move around const emptyCaption = '
'; -function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps) { +function TimelionVisComponent({ + interval, + seriesList, + renderComplete, + fireEvent, +}: TimelionVisComponentProps) { const kibana = useKibana(); const [chart, setChart] = useState(() => cloneDeep(seriesList.list)); const [canvasElem, setCanvasElem] = useState(); - const [chartElem, setChartElem] = useState(); + const [chartElem, setChartElem] = useState(null); const [originalColorMap, setOriginalColorMap] = useState(() => new Map()); @@ -191,7 +199,7 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps interval, kibana.services.timefilter, kibana.services.uiSettings, - chartElem && chartElem.clientWidth, + chartElem?.clientWidth, grid ); const updatedSeries = buildSeriesData(chartValue, options); @@ -216,12 +224,14 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps updateCaption(newPlot.getData()); } }, - [canvasElem, chartElem, renderComplete, kibana.services, interval, updateCaption] + [canvasElem, chartElem?.clientWidth, renderComplete, kibana.services, interval, updateCaption] ); + const dimensions = useResizeObserver(chartElem); + useEffect(() => { updatePlot(chart, seriesList.render && seriesList.render.grid); - }, [chart, updatePlot, seriesList.render]); + }, [chart, updatePlot, seriesList.render, dimensions]); useEffect(() => { const colorsSet: Array<[Series, string]> = []; @@ -349,21 +359,24 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps const plotSelectedHandler = useCallback( (event: JQuery.TriggeredEvent, ranges: Ranges) => { - applyFilter({ - timeFieldName: '*', - filters: [ - { - range: { - '*': { - gte: ranges.xaxis.from, - lte: ranges.xaxis.to, + fireEvent({ + name: 'applyFilter', + data: { + timeFieldName: '*', + filters: [ + { + range: { + '*': { + gte: ranges.xaxis.from, + lte: ranges.xaxis.to, + }, }, }, - }, - ], + ], + }, }); }, - [applyFilter] + [fireEvent] ); useEffect(() => { @@ -396,4 +409,6 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps ); } -export { Panel }; +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { TimelionVisComponent as default }; diff --git a/src/plugins/vis_type_timelion/public/helpers/timelion_request_handler.ts b/src/plugins/vis_type_timelion/public/helpers/timelion_request_handler.ts index 3442f84599fb8..975d12a152d89 100644 --- a/src/plugins/vis_type_timelion/public/helpers/timelion_request_handler.ts +++ b/src/plugins/vis_type_timelion/public/helpers/timelion_request_handler.ts @@ -19,10 +19,10 @@ import { i18n } from '@kbn/i18n'; import { KIBANA_CONTEXT_NAME } from 'src/plugins/expressions/public'; -import { VisParams } from '../../../visualizations/public'; import { TimeRange, Filter, esQuery, Query } from '../../../data/public'; import { TimelionVisDependencies } from '../plugin'; import { getTimezone } from './get_timezone'; +import { TimelionVisParams } from '../timelion_vis_fn'; interface Stats { cacheCount: number; @@ -77,7 +77,7 @@ export function getTimelionRequestHandler({ timeRange: TimeRange; filters: Filter[]; query: Query; - visParams: VisParams; + visParams: TimelionVisParams; }): Promise { const expression = visParams.expression; diff --git a/src/plugins/vis_type_timelion/public/index.scss b/src/plugins/vis_type_timelion/public/index.scss deleted file mode 100644 index 00e9a88520961..0000000000000 --- a/src/plugins/vis_type_timelion/public/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import './timelion_vis'; -@import './timelion_editor'; -@import './components/index'; diff --git a/src/plugins/vis_type_timelion/public/plugin.ts b/src/plugins/vis_type_timelion/public/plugin.ts index e2c7efec34c7f..bb8fb6b298a07 100644 --- a/src/plugins/vis_type_timelion/public/plugin.ts +++ b/src/plugins/vis_type_timelion/public/plugin.ts @@ -39,8 +39,8 @@ import { getTimelionVisDefinition } from './timelion_vis_type'; import { setIndexPatterns, setSavedObjectsClient } from './helpers/plugin_services'; import { ConfigSchema } from '../config'; -import './index.scss'; import { getArgValueSuggestions } from './helpers/arg_value_suggestions'; +import { getTimelionVisRenderer } from './timelion_vis_renderer'; /** @internal */ export interface TimelionVisDependencies extends Partial { @@ -93,7 +93,8 @@ export class TimelionVisPlugin }; expressions.registerFunction(() => getTimelionVisualizationConfig(dependencies)); - visualizations.createReactVisualization(getTimelionVisDefinition(dependencies)); + expressions.registerRenderer(getTimelionVisRenderer(dependencies)); + visualizations.createBaseVisualization(getTimelionVisDefinition(dependencies)); return { isUiEnabled: this.initializerContext.config.get().ui.enabled, diff --git a/src/plugins/vis_type_timelion/public/timelion_options.tsx b/src/plugins/vis_type_timelion/public/timelion_options.tsx index dfe017d3a273f..1ef8088c7a714 100644 --- a/src/plugins/vis_type_timelion/public/timelion_options.tsx +++ b/src/plugins/vis_type_timelion/public/timelion_options.tsx @@ -21,30 +21,45 @@ import React, { useCallback } from 'react'; import { EuiPanel } from '@elastic/eui'; import { VisOptionsProps } from 'src/plugins/vis_default_editor/public'; -import { VisParams } from './timelion_vis_fn'; +import { KibanaContextProvider } from '../../kibana_react/public'; + +import { TimelionVisParams } from './timelion_vis_fn'; import { TimelionInterval, TimelionExpressionInput } from './components'; +import { TimelionVisDependencies } from './plugin'; -export type TimelionOptionsProps = VisOptionsProps; +export type TimelionOptionsProps = VisOptionsProps; -function TimelionOptions({ stateParams, setValue, setValidity }: TimelionOptionsProps) { - const setInterval = useCallback((value: VisParams['interval']) => setValue('interval', value), [ - setValue, - ]); +function TimelionOptions({ + services, + stateParams, + setValue, + setValidity, +}: TimelionOptionsProps & { + services: TimelionVisDependencies; +}) { + const setInterval = useCallback( + (value: TimelionVisParams['interval']) => setValue('interval', value), + [setValue] + ); const setExpressionInput = useCallback( - (value: VisParams['expression']) => setValue('expression', value), + (value: TimelionVisParams['expression']) => setValue('expression', value), [setValue] ); return ( - - - - + + + + + + ); } -export { TimelionOptions }; +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { TimelionOptions as default }; diff --git a/src/plugins/vis_type_timelion/public/timelion_vis_fn.ts b/src/plugins/vis_type_timelion/public/timelion_vis_fn.ts index d3c6ca5d90371..a0cd410e197ff 100644 --- a/src/plugins/vis_type_timelion/public/timelion_vis_fn.ts +++ b/src/plugins/vis_type_timelion/public/timelion_vis_fn.ts @@ -24,29 +24,39 @@ import { KibanaContext, Render, } from 'src/plugins/expressions/public'; -import { getTimelionRequestHandler } from './helpers/timelion_request_handler'; +import { + getTimelionRequestHandler, + TimelionSuccessResponse, +} from './helpers/timelion_request_handler'; import { TIMELION_VIS_NAME } from './timelion_vis_type'; import { TimelionVisDependencies } from './plugin'; import { Filter, Query, TimeRange } from '../../data/common'; type Input = KibanaContext | null; -type Output = Promise>; +type Output = Promise>; interface Arguments { expression: string; interval: string; } -interface RenderValue { - visData: Input; +export interface TimelionRenderValue { + visData: TimelionSuccessResponse; visType: 'timelion'; - visParams: VisParams; + visParams: TimelionVisParams; } -export type VisParams = Arguments; +export type TimelionVisParams = Arguments; + +export type TimelionExpressionFunctionDefinition = ExpressionFunctionDefinition< + 'timelion_vis', + Input, + Arguments, + Output +>; export const getTimelionVisualizationConfig = ( dependencies: TimelionVisDependencies -): ExpressionFunctionDefinition<'timelion_vis', Input, Arguments, Output> => ({ +): TimelionExpressionFunctionDefinition => ({ name: 'timelion_vis', type: 'render', inputTypes: ['kibana_context', 'null'], @@ -82,7 +92,7 @@ export const getTimelionVisualizationConfig = ( return { type: 'render', - as: 'visualization', + as: 'timelion_vis', value: { visParams, visType: TIMELION_VIS_NAME, diff --git a/src/plugins/vis_type_timelion/public/timelion_vis_renderer.tsx b/src/plugins/vis_type_timelion/public/timelion_vis_renderer.tsx new file mode 100644 index 0000000000000..13a279138a8e4 --- /dev/null +++ b/src/plugins/vis_type_timelion/public/timelion_vis_renderer.tsx @@ -0,0 +1,65 @@ +/* + * 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. + */ + +import React, { lazy } from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; + +import { ExpressionRenderDefinition } from 'src/plugins/expressions'; +import { KibanaContextProvider } from '../../kibana_react/public'; +import { VisualizationContainer } from '../../visualizations/public'; +import { TimelionVisDependencies } from './plugin'; +import { TimelionRenderValue } from './timelion_vis_fn'; +// @ts-ignore +const TimelionVisComponent = lazy(() => import('./components/timelion_vis_component')); + +export const getTimelionVisRenderer: ( + deps: TimelionVisDependencies +) => ExpressionRenderDefinition = (deps) => ({ + name: 'timelion_vis', + displayName: 'Timelion visualization', + reuseDomNode: true, + render: (domNode, { visData, visParams }, handlers) => { + handlers.onDestroy(() => { + unmountComponentAtNode(domNode); + }); + + const [seriesList] = visData.sheet; + const showNoResult = !seriesList || !seriesList.list.length; + + if (showNoResult) { + // send the render complete event when there is no data to show + // to notify that a chart is updated + handlers.done(); + } + + render( + + + + + , + domNode + ); + }, +}); diff --git a/src/plugins/vis_type_timelion/public/timelion_vis_type.tsx b/src/plugins/vis_type_timelion/public/timelion_vis_type.tsx index 8fdde175708e0..a5425478e46ac 100644 --- a/src/plugins/vis_type_timelion/public/timelion_vis_type.tsx +++ b/src/plugins/vis_type_timelion/public/timelion_vis_type.tsx @@ -17,18 +17,19 @@ * under the License. */ -import React from 'react'; +import React, { lazy } from 'react'; import { i18n } from '@kbn/i18n'; -import { KibanaContextProvider } from '../../kibana_react/public'; import { DefaultEditorSize } from '../../vis_default_editor/public'; import { getTimelionRequestHandler } from './helpers/timelion_request_handler'; -import { TimelionVisComponent, TimelionVisComponentProp } from './components'; -import { TimelionOptions, TimelionOptionsProps } from './timelion_options'; +import { TimelionOptionsProps } from './timelion_options'; import { TimelionVisDependencies } from './plugin'; +import { toExpressionAst } from './to_ast'; import { VIS_EVENT_TO_TRIGGER } from '../../visualizations/public'; +const TimelionOptions = lazy(() => import('./timelion_options')); + export const TIMELION_VIS_NAME = 'timelion'; export function getTimelionVisDefinition(dependencies: TimelionVisDependencies) { @@ -48,21 +49,15 @@ export function getTimelionVisDefinition(dependencies: TimelionVisDependencies) expression: '.es(*)', interval: 'auto', }, - component: (props: TimelionVisComponentProp) => ( - - - - ), }, editorConfig: { optionsTemplate: (props: TimelionOptionsProps) => ( - - - + ), defaultSize: DefaultEditorSize.MEDIUM, }, requestHandler: timelionRequestHandler, + toExpressionAst, responseHandler: 'none', inspectorAdapters: {}, getSupportedTriggers: () => { diff --git a/src/plugins/vis_type_timelion/public/components/chart.tsx b/src/plugins/vis_type_timelion/public/to_ast.test.ts similarity index 60% rename from src/plugins/vis_type_timelion/public/components/chart.tsx rename to src/plugins/vis_type_timelion/public/to_ast.test.ts index 15a376d4e9638..8a9d4b83f94d2 100644 --- a/src/plugins/vis_type_timelion/public/components/chart.tsx +++ b/src/plugins/vis_type_timelion/public/to_ast.test.ts @@ -17,25 +17,24 @@ * under the License. */ -import React from 'react'; +import { Vis } from 'src/plugins/visualizations/public'; +import { TimelionVisParams } from './timelion_vis_fn'; +import { toExpressionAst } from './to_ast'; -import { Sheet } from '../helpers/timelion_request_handler'; -import { Panel } from './panel'; -import { ExprVisAPIEvents } from '../../../visualizations/public'; +describe('timelion vis toExpressionAst function', () => { + let vis: Vis; -interface ChartComponentProp { - applyFilter: ExprVisAPIEvents['applyFilter']; - interval: string; - renderComplete(): void; - seriesList: Sheet; -} + beforeEach(() => { + vis = { + params: { + expression: '.es(*)', + interval: 'auto', + }, + } as any; + }); -function ChartComponent(props: ChartComponentProp) { - if (!props.seriesList) { - return null; - } - - return ; -} - -export { ChartComponent }; + it('should match basic snapshot', () => { + const actual = toExpressionAst(vis); + expect(actual).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/vis_type_timelion/public/to_ast.ts b/src/plugins/vis_type_timelion/public/to_ast.ts new file mode 100644 index 0000000000000..7044bbf4e5831 --- /dev/null +++ b/src/plugins/vis_type_timelion/public/to_ast.ts @@ -0,0 +1,37 @@ +/* + * 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. + */ + +import { buildExpression, buildExpressionFunction } from '../../expressions/public'; +import { Vis } from '../../visualizations/public'; +import { TimelionExpressionFunctionDefinition, TimelionVisParams } from './timelion_vis_fn'; + +const escapeString = (data: string): string => { + return data.replace(/\\/g, `\\\\`).replace(/'/g, `\\'`); +}; + +export const toExpressionAst = (vis: Vis) => { + const timelion = buildExpressionFunction('timelion_vis', { + expression: escapeString(vis.params.expression), + interval: escapeString(vis.params.interval), + }); + + const ast = buildExpression([timelion]); + + return ast.toAst(); +}; diff --git a/src/plugins/visualizations/public/legacy/__snapshots__/build_pipeline.test.ts.snap b/src/plugins/visualizations/public/legacy/__snapshots__/build_pipeline.test.ts.snap index 654ac78cdaa02..c0c37e2262f9c 100644 --- a/src/plugins/visualizations/public/legacy/__snapshots__/build_pipeline.test.ts.snap +++ b/src/plugins/visualizations/public/legacy/__snapshots__/build_pipeline.test.ts.snap @@ -24,6 +24,4 @@ exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunct exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles tile_map function 1`] = `"tilemap visConfig='{\\"metric\\":{},\\"dimensions\\":{\\"metric\\":{\\"accessor\\":0,\\"label\\":\\"\\",\\"format\\":{},\\"params\\":{},\\"aggType\\":\\"\\"},\\"geohash\\":1,\\"geocentroid\\":3}}' "`; -exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles timelion function 1`] = `"timelion_vis expression='foo' interval='bar' "`; - exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles vega function 1`] = `"vega spec='this is a test' "`; diff --git a/src/plugins/visualizations/public/legacy/build_pipeline.test.ts b/src/plugins/visualizations/public/legacy/build_pipeline.test.ts index 8cac76726b13b..a1fea45f51781 100644 --- a/src/plugins/visualizations/public/legacy/build_pipeline.test.ts +++ b/src/plugins/visualizations/public/legacy/build_pipeline.test.ts @@ -117,12 +117,6 @@ describe('visualize loader pipeline helpers: build pipeline', () => { expect(actual).toMatchSnapshot(); }); - it('handles timelion function', () => { - const params = { expression: 'foo', interval: 'bar' }; - const actual = buildPipelineVisFunction.timelion(params, schemasDef, uiState); - expect(actual).toMatchSnapshot(); - }); - describe('handles table function', () => { it('without splits or buckets', () => { const params = { foo: 'bar' }; diff --git a/src/plugins/visualizations/public/legacy/build_pipeline.ts b/src/plugins/visualizations/public/legacy/build_pipeline.ts index dcc384a191858..79e1c1cca2155 100644 --- a/src/plugins/visualizations/public/legacy/build_pipeline.ts +++ b/src/plugins/visualizations/public/legacy/build_pipeline.ts @@ -263,11 +263,6 @@ export const buildPipelineVisFunction: BuildPipelineVisFunction = { const paramsArray = [paramsJson, uiStateJson].filter((param) => Boolean(param)); return `tsvb ${paramsArray.join(' ')}`; }, - timelion: (params) => { - const expression = prepareString('expression', params.expression); - const interval = prepareString('interval', params.interval); - return `timelion_vis ${expression}${interval}`; - }, table: (params, schemas) => { const visConfig = { ...params, From 21353403b8bc84bf84971c5b92fb2fcaa09b2f59 Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Thu, 1 Oct 2020 15:16:17 +0100 Subject: [PATCH 38/39] [ML] Improve calendar ics file parsing (#78986) --- .../settings/calendars/edit/import_modal/utils.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/utils.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/utils.js index 07bf49ea6d7db..e93abc8eb67b5 100644 --- a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/utils.js +++ b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/utils.js @@ -42,7 +42,10 @@ export function filterEvents(events) { } export function parseICSFile(data) { - const cal = icalendar.parse_calendar(data); + // force a new line char on the end of the data + // icalendar must split on new lines and so parsing fails + // if there isn't at least one new line at the end. + const cal = icalendar.parse_calendar(data + '\n'); return createEvents(cal); } From bad59f4fb4cc1c2c2420b6f81cc1fde18ae44721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Thu, 1 Oct 2020 15:16:49 +0100 Subject: [PATCH 39/39] [Usage Collection] [schema] `maps` (#78952) --- x-pack/.telemetryrc.json | 3 +- .../maps_telemetry/collectors/register.ts | 34 ++++++- .../collectors/register_collector.test.js | 1 + .../server/maps_telemetry/maps_telemetry.ts | 82 ++++++++++------ .../schema/xpack_plugins.json | 93 +++++++++++++++++++ 5 files changed, 180 insertions(+), 33 deletions(-) diff --git a/x-pack/.telemetryrc.json b/x-pack/.telemetryrc.json index d0e56bbed9f47..c7430666c538f 100644 --- a/x-pack/.telemetryrc.json +++ b/x-pack/.telemetryrc.json @@ -4,7 +4,6 @@ "exclude": [ "plugins/actions/server/usage/actions_usage_collector.ts", "plugins/alerts/server/usage/alerts_usage_collector.ts", - "plugins/apm/server/lib/apm_telemetry/index.ts", - "plugins/maps/server/maps_telemetry/collectors/register.ts" + "plugins/apm/server/lib/apm_telemetry/index.ts" ] } diff --git a/x-pack/plugins/maps/server/maps_telemetry/collectors/register.ts b/x-pack/plugins/maps/server/maps_telemetry/collectors/register.ts index f54776f5ab629..e0ab2cf77f084 100644 --- a/x-pack/plugins/maps/server/maps_telemetry/collectors/register.ts +++ b/x-pack/plugins/maps/server/maps_telemetry/collectors/register.ts @@ -5,7 +5,7 @@ */ import { UsageCollectionSetup } from 'src/plugins/usage_collection/server'; -import { getMapsTelemetry } from '../maps_telemetry'; +import { getMapsTelemetry, MapsUsage } from '../maps_telemetry'; import { MapsConfigType } from '../../../config'; export function registerMapsUsageCollector( @@ -16,10 +16,40 @@ export function registerMapsUsageCollector( return; } - const mapsUsageCollector = usageCollection.makeUsageCollector({ + const mapsUsageCollector = usageCollection.makeUsageCollector({ type: 'maps', isReady: () => true, fetch: async () => await getMapsTelemetry(config), + schema: { + settings: { + showMapVisualizationTypes: { type: 'boolean' }, + }, + indexPatternsWithGeoFieldCount: { type: 'long' }, + indexPatternsWithGeoPointFieldCount: { type: 'long' }, + indexPatternsWithGeoShapeFieldCount: { type: 'long' }, + geoShapeAggLayersCount: { type: 'long' }, + mapsTotalCount: { type: 'long' }, + timeCaptured: { type: 'date' }, + attributesPerMap: { + dataSourcesCount: { + min: { type: 'long' }, + max: { type: 'long' }, + avg: { type: 'float' }, + }, + layersCount: { + min: { type: 'long' }, + max: { type: 'long' }, + avg: { type: 'float' }, + }, + // TODO: Find out all the possible values for DYNAMIC_KEY or reformat into an array + layerTypesCount: { + DYNAMIC_KEY: { min: { type: 'long' }, max: { type: 'long' }, avg: { type: 'float' } }, + }, + emsVectorLayersCount: { + DYNAMIC_KEY: { min: { type: 'long' }, max: { type: 'long' }, avg: { type: 'float' } }, + }, + }, + }, }); usageCollection.registerCollector(mapsUsageCollector); diff --git a/x-pack/plugins/maps/server/maps_telemetry/collectors/register_collector.test.js b/x-pack/plugins/maps/server/maps_telemetry/collectors/register_collector.test.js index 33eb33100acdf..61f4629b00712 100644 --- a/x-pack/plugins/maps/server/maps_telemetry/collectors/register_collector.test.js +++ b/x-pack/plugins/maps/server/maps_telemetry/collectors/register_collector.test.js @@ -33,6 +33,7 @@ describe('buildCollectorObj#fetch', () => { type: expect.any(String), isReady: expect.any(Function), fetch: expect.any(Function), + schema: expect.any(Object), }); }); }); diff --git a/x-pack/plugins/maps/server/maps_telemetry/maps_telemetry.ts b/x-pack/plugins/maps/server/maps_telemetry/maps_telemetry.ts index 2af6413da039b..56ccc7baea283 100644 --- a/x-pack/plugins/maps/server/maps_telemetry/maps_telemetry.ts +++ b/x-pack/plugins/maps/server/maps_telemetry/maps_telemetry.ts @@ -5,12 +5,7 @@ */ import _ from 'lodash'; -import { - SavedObject, - SavedObjectAttribute, - SavedObjectAttributes, - SavedObjectsClientContract, -} from 'kibana/server'; +import { ISavedObjectsRepository, SavedObject, SavedObjectsClientContract } from 'kibana/server'; import { IFieldType, IndexPatternAttributes } from 'src/plugins/data/public'; import { ES_GEO_FIELD_TYPE, @@ -25,11 +20,14 @@ import { ESSearchSourceDescriptor, LayerDescriptor, } from '../../common/descriptor_types'; -import { MapSavedObject } from '../../common/map_saved_object_type'; -// @ts-ignore +import { MapSavedObject, MapSavedObjectAttributes } from '../../common/map_saved_object_type'; import { getInternalRepository } from '../kibana_server_services'; import { MapsConfigType } from '../../config'; +interface Settings { + showMapVisualizationTypes: boolean; +} + interface IStats { [key: string]: { min: number; @@ -42,6 +40,30 @@ interface ILayerTypeCount { [key: string]: number; } +export interface MapsUsage { + settings: Settings; + indexPatternsWithGeoFieldCount: number; + indexPatternsWithGeoPointFieldCount: number; + indexPatternsWithGeoShapeFieldCount: number; + geoShapeAggLayersCount: number; + mapsTotalCount: number; + timeCaptured: string; + attributesPerMap: { + dataSourcesCount: { + min: number; + max: number; + avg: number; + }; + layersCount: { + min: number; + max: number; + avg: number; + }; + layerTypesCount: IStats; + emsVectorLayersCount: IStats; + }; +} + function getUniqueLayerCounts(layerCountsList: ILayerTypeCount[], mapsCount: number) { const uniqueLayerTypes = _.uniq(_.flatten(layerCountsList.map((lTypes) => Object.keys(lTypes)))); @@ -213,8 +235,8 @@ export function buildMapsTelemetry({ }: { mapSavedObjects: MapSavedObject[]; indexPatternSavedObjects: Array>; - settings: SavedObjectAttribute; -}): SavedObjectAttributes { + settings: Settings; +}): MapsUsage { const layerLists: LayerDescriptor[][] = getLayerLists(mapSavedObjects); const mapsCount = layerLists.length; @@ -256,14 +278,14 @@ export function buildMapsTelemetry({ attributesPerMap: { // Count of data sources per map dataSourcesCount: { - min: dataSourcesCount.length ? _.min(dataSourcesCount) : 0, - max: dataSourcesCount.length ? _.max(dataSourcesCount) : 0, + min: dataSourcesCount.length ? _.min(dataSourcesCount)! : 0, + max: dataSourcesCount.length ? _.max(dataSourcesCount)! : 0, avg: dataSourcesCountSum ? layersCountSum / mapsCount : 0, }, // Total count of layers per map layersCount: { - min: layersCount.length ? _.min(layersCount) : 0, - max: layersCount.length ? _.max(layersCount) : 0, + min: layersCount.length ? _.min(layersCount)! : 0, + max: layersCount.length ? _.max(layersCount)! : 0, avg: layersCountSum ? layersCountSum / mapsCount : 0, }, // Count of layers by type @@ -277,27 +299,29 @@ export function buildMapsTelemetry({ }, }; } -async function getMapSavedObjects(savedObjectsClient: SavedObjectsClientContract) { - const mapsSavedObjects = await savedObjectsClient.find({ type: MAP_SAVED_OBJECT_TYPE }); - return _.get(mapsSavedObjects, 'saved_objects', []); +async function getMapSavedObjects( + savedObjectsClient: SavedObjectsClientContract | ISavedObjectsRepository +) { + const mapsSavedObjects = await savedObjectsClient.find({ + type: MAP_SAVED_OBJECT_TYPE, + }); + return mapsSavedObjects.saved_objects; } -async function getIndexPatternSavedObjects(savedObjectsClient: SavedObjectsClientContract) { - const indexPatternSavedObjects = await savedObjectsClient.find({ type: 'index-pattern' }); - return _.get(indexPatternSavedObjects, 'saved_objects', []); +async function getIndexPatternSavedObjects( + savedObjectsClient: SavedObjectsClientContract | ISavedObjectsRepository +) { + const indexPatternSavedObjects = await savedObjectsClient.find({ + type: 'index-pattern', + }); + return indexPatternSavedObjects.saved_objects; } export async function getMapsTelemetry(config: MapsConfigType) { const savedObjectsClient = getInternalRepository(); - // @ts-ignore - const mapSavedObjects: MapSavedObject[] = await getMapSavedObjects(savedObjectsClient); - const indexPatternSavedObjects: Array> = (await getIndexPatternSavedObjects( - // @ts-ignore - savedObjectsClient - )) as Array>; - const settings: SavedObjectAttribute = { + const mapSavedObjects = await getMapSavedObjects(savedObjectsClient); + const indexPatternSavedObjects = await getIndexPatternSavedObjects(savedObjectsClient); + const settings = { showMapVisualizationTypes: config.showMapVisualizationTypes, }; return buildMapsTelemetry({ mapSavedObjects, indexPatternSavedObjects, settings }); diff --git a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json index 816d6828381ee..b08585066f100 100644 --- a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json +++ b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json @@ -679,6 +679,99 @@ } } }, + "maps": { + "properties": { + "settings": { + "properties": { + "showMapVisualizationTypes": { + "type": "boolean" + } + } + }, + "indexPatternsWithGeoFieldCount": { + "type": "long" + }, + "indexPatternsWithGeoPointFieldCount": { + "type": "long" + }, + "indexPatternsWithGeoShapeFieldCount": { + "type": "long" + }, + "geoShapeAggLayersCount": { + "type": "long" + }, + "mapsTotalCount": { + "type": "long" + }, + "timeCaptured": { + "type": "date" + }, + "attributesPerMap": { + "properties": { + "dataSourcesCount": { + "properties": { + "min": { + "type": "long" + }, + "max": { + "type": "long" + }, + "avg": { + "type": "float" + } + } + }, + "layersCount": { + "properties": { + "min": { + "type": "long" + }, + "max": { + "type": "long" + }, + "avg": { + "type": "float" + } + } + }, + "layerTypesCount": { + "properties": { + "DYNAMIC_KEY": { + "properties": { + "min": { + "type": "long" + }, + "max": { + "type": "long" + }, + "avg": { + "type": "float" + } + } + } + } + }, + "emsVectorLayersCount": { + "properties": { + "DYNAMIC_KEY": { + "properties": { + "min": { + "type": "long" + }, + "max": { + "type": "long" + }, + "avg": { + "type": "float" + } + } + } + } + } + } + } + } + }, "mlTelemetry": { "properties": { "file_data_visualizer": {