diff --git a/.ci/end2end.groovy b/.ci/end2end.groovy index ed642f22cfeb4..97099c6f87448 100644 --- a/.ci/end2end.groovy +++ b/.ci/end2end.groovy @@ -14,6 +14,7 @@ pipeline { HOME = "${env.WORKSPACE}" E2E_DIR = 'x-pack/plugins/apm/e2e' PIPELINE_LOG_LEVEL = 'DEBUG' + KBN_OPTIMIZER_THEMES = 'v7light' } options { timeout(time: 1, unit: 'HOURS') diff --git a/package.json b/package.json index 3c15d9ee3c97b..8e51f9207eaf1 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "@babel/plugin-transform-modules-commonjs": "^7.10.1", "@babel/register": "^7.10.1", "@elastic/apm-rum": "^5.2.0", - "@elastic/charts": "19.6.3", + "@elastic/charts": "19.7.0", "@elastic/datemath": "5.0.3", "@elastic/ems-client": "7.9.3", "@elastic/eui": "24.1.0", diff --git a/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts b/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts index 93a7240849b94..abbeb72af784c 100644 --- a/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts +++ b/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts @@ -63,7 +63,8 @@ afterAll(async () => { await del(TMP_DIR); }); -it('builds expected bundles, saves bundle counts to metadata', async () => { +// FLAKY: https://github.com/elastic/kibana/issues/70762 +it.skip('builds expected bundles, saves bundle counts to metadata', async () => { const config = OptimizerConfig.create({ repoRoot: MOCK_REPO_DIR, pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')], @@ -167,7 +168,8 @@ it('builds expected bundles, saves bundle counts to metadata', async () => { `); }); -it('uses cache on second run and exist cleanly', async () => { +// FLAKY: https://github.com/elastic/kibana/issues/70764 +it.skip('uses cache on second run and exist cleanly', async () => { const config = OptimizerConfig.create({ repoRoot: MOCK_REPO_DIR, pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')], diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index ff09d8d4fc5ab..5f306cd5128b9 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -9,7 +9,7 @@ "kbn:watch": "node scripts/build --dev --watch" }, "dependencies": { - "@elastic/charts": "19.6.3", + "@elastic/charts": "19.7.0", "@elastic/eui": "24.1.0", "@elastic/numeral": "^2.5.0", "@kbn/i18n": "1.0.0", diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx index 5667220881df2..39b91a2e20b53 100644 --- a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx +++ b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx @@ -23,7 +23,7 @@ import { WithMultiContent, useMultiContentContext, HookProps } from '../multi_co export interface Props { onSave: (data: T) => void | Promise; - children: JSX.Element | JSX.Element[]; + children: JSX.Element | Array; isEditing?: boolean; defaultActiveStep?: number; defaultValue?: HookProps['defaultValue']; diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx index 5fbe3d2bbbdd4..210b0cedccd06 100644 --- a/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx +++ b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx @@ -54,7 +54,7 @@ export function useMultiContentContext(contentId: keyof T) { +export function useContent(contentId: K) { const { updateContentAt, saveSnapshotAndRemoveContent, getData } = useMultiContentContext(); const updateContent = useCallback( @@ -71,8 +71,11 @@ export function useContent(contentId: }; }, [contentId, saveSnapshotAndRemoveContent]); + const data = getData(); + const defaultValue = data[contentId]; + return { - defaultValue: getData()[contentId]!, + defaultValue, updateContent, getData, }; diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts index 0a2c7bb651959..adc68a39a4a5b 100644 --- a/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts +++ b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts @@ -150,6 +150,10 @@ export function useMultiContent({ * Validate the multi-content active content(s) in the DOM */ const validate = useCallback(async () => { + if (Object.keys(contents.current).length === 0) { + return Boolean(validation.isValid); + } + const updatedValidation = {} as { [key in keyof T]?: boolean | undefined }; for (const [id, _content] of Object.entries(contents.current)) { diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts index 28baa3d8372f0..67c1ee3c7d677 100644 --- a/src/plugins/es_ui_shared/public/index.ts +++ b/src/plugins/es_ui_shared/public/index.ts @@ -22,6 +22,7 @@ * In the future, each top level folder should be exported like that to avoid naming collision */ import * as Forms from './forms'; +import * as Monaco from './monaco'; export { JsonEditor, OnJsonEditorUpdateHandler } from './components/json_editor'; @@ -53,10 +54,6 @@ export { expandLiteralStrings, } from './console_lang'; -import * as Monaco from './monaco'; - -export { Monaco }; - export { AuthorizationContext, AuthorizationProvider, @@ -69,7 +66,7 @@ export { useAuthorizationContext, } from './authorization'; -export { Forms }; +export { Monaco, Forms }; /** dummy plugin, we just want esUiShared to have its own bundle */ export function plugin() { diff --git a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts index dc8321aa07004..019a0e8053d0d 100644 --- a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts +++ b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts @@ -21,12 +21,13 @@ import { ValidationFunc } from '../../hook_form_lib'; import { isJSON } from '../../../validators/string'; import { ERROR_CODE } from './types'; -export const isJsonField = (message: string) => ( - ...args: Parameters -): ReturnType> => { +export const isJsonField = ( + message: string, + { allowEmptyString = false }: { allowEmptyString?: boolean } = {} +) => (...args: Parameters): ReturnType> => { const [{ value }] = args; - if (typeof value !== 'string') { + if (typeof value !== 'string' || (allowEmptyString && value.trim() === '')) { return; } diff --git a/src/plugins/home/public/assets/googlecloud_metrics/screenshot.png b/src/plugins/home/public/assets/googlecloud_metrics/screenshot.png new file mode 100644 index 0000000000000..d4d90d27ad302 Binary files /dev/null and b/src/plugins/home/public/assets/googlecloud_metrics/screenshot.png differ diff --git a/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts b/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts index 3325240147640..210d563696667 100644 --- a/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts +++ b/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts @@ -82,7 +82,7 @@ export interface TutorialSchema { name: string; isBeta?: boolean; shortDescription: string; - euiIconType?: IconType; // EUI icon type string, one of https://elastic.github.io/eui/#/icon; + euiIconType?: IconType; // EUI icon type string, one of https://elastic.github.io/eui/#/display/icons; longDescription: string; completionTimeMinutes?: number; previewImagePath?: string; diff --git a/src/plugins/home/server/tutorials/googlecloud_metrics/index.ts b/src/plugins/home/server/tutorials/googlecloud_metrics/index.ts new file mode 100644 index 0000000000000..504ede04c12d8 --- /dev/null +++ b/src/plugins/home/server/tutorials/googlecloud_metrics/index.ts @@ -0,0 +1,77 @@ +/* + * 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 { i18n } from '@kbn/i18n'; +import { TutorialsCategory } from '../../services/tutorials'; +import { + onPremInstructions, + cloudInstructions, + onPremCloudInstructions, +} from '../instructions/metricbeat_instructions'; +import { + TutorialContext, + TutorialSchema, +} from '../../services/tutorials/lib/tutorials_registry_types'; + +export function googlecloudMetricsSpecProvider(context: TutorialContext): TutorialSchema { + const moduleName = 'googlecloud'; + return { + id: 'googlecloudMetrics', + name: i18n.translate('home.tutorials.googlecloudMetrics.nameTitle', { + defaultMessage: 'Google Cloud metrics', + }), + category: TutorialsCategory.METRICS, + shortDescription: i18n.translate('home.tutorials.googlecloudMetrics.shortDescription', { + defaultMessage: + 'Fetch monitoring metrics from Google Cloud Platform using Stackdriver Monitoring API.', + }), + longDescription: i18n.translate('home.tutorials.googlecloudMetrics.longDescription', { + defaultMessage: + 'The `googlecloud` Metricbeat module fetches monitoring metrics from Google Cloud Platform using Stackdriver Monitoring API. \ +[Learn more]({learnMoreLink}).', + values: { + learnMoreLink: '{config.docs.beats.metricbeat}/metricbeat-module-googlecloud.html', + }, + }), + euiIconType: 'logoGCP', + isBeta: false, + artifacts: { + dashboards: [ + { + id: 'f40ee870-5e4a-11ea-a4f6-717338406083', + linkLabel: i18n.translate( + 'home.tutorials.googlecloudMetrics.artifacts.dashboards.linkLabel', + { + defaultMessage: 'Google Cloud metrics dashboard', + } + ), + isOverview: true, + }, + ], + exportedFields: { + documentationUrl: '{config.docs.beats.metricbeat}/exported-fields-googlecloud.html', + }, + }, + completionTimeMinutes: 10, + previewImagePath: '/plugins/home/assets/googlecloud_metrics/screenshot.png', + onPrem: onPremInstructions(moduleName, context), + elasticCloud: cloudInstructions(moduleName), + onPremElasticCloud: onPremCloudInstructions(moduleName), + }; +} diff --git a/src/plugins/home/server/tutorials/register.ts b/src/plugins/home/server/tutorials/register.ts index d13cce1c22784..c48423edb2a07 100644 --- a/src/plugins/home/server/tutorials/register.ts +++ b/src/plugins/home/server/tutorials/register.ts @@ -91,6 +91,7 @@ import { openmetricsMetricsSpecProvider } from './openmetrics_metrics'; import { oracleMetricsSpecProvider } from './oracle_metrics'; import { iisMetricsSpecProvider } from './iis_metrics'; import { azureLogsSpecProvider } from './azure_logs'; +import { googlecloudMetricsSpecProvider } from './googlecloud_metrics'; export const builtInTutorials = [ systemLogsSpecProvider, @@ -168,4 +169,5 @@ export const builtInTutorials = [ oracleMetricsSpecProvider, iisMetricsSpecProvider, azureLogsSpecProvider, + googlecloudMetricsSpecProvider, ]; diff --git a/src/plugins/kibana_usage_collection/README.md b/src/plugins/kibana_usage_collection/README.md index 1aade472c2326..6ef4f19c1570f 100644 --- a/src/plugins/kibana_usage_collection/README.md +++ b/src/plugins/kibana_usage_collection/README.md @@ -2,7 +2,7 @@ This plugin registers the basic usage collectors from Kibana: -- Application Usage +- [Application Usage](./server/collectors/application_usage/README.md) - UI Metrics - Ops stats - Number of Saved Objects per type diff --git a/src/plugins/kibana_usage_collection/server/collectors/application_usage/README.md b/src/plugins/kibana_usage_collection/server/collectors/application_usage/README.md new file mode 100644 index 0000000000000..1ffd01fc6fde7 --- /dev/null +++ b/src/plugins/kibana_usage_collection/server/collectors/application_usage/README.md @@ -0,0 +1,37 @@ +# Application Usage + +This collector reports the number of general clicks and minutes on screen for each registered application in Kibana. + +The final payload matches the following contract: + +```JSON +{ + "application_usage": { + "application_ID": { + "clicks_7_days": 10, + "clicks_30_days": 100, + "clicks_90_days": 300, + "clicks_total": 600, + "minutes_on_screen_7_days": 10.40, + "minutes_on_screen_30_days": 20.0, + "minutes_on_screen_90_days": 110.1, + "minutes_on_screen_total": 112.5 + } + } +} +``` + +Where `application_ID` matches the `id` registered when calling the method `core.application.register`. +This collection occurs by default for every application registered via the mentioned method and there is no need to do anything else to enable it or _opt-in_ for your plugin. + +**Note to maintainers in the Kibana repo:** At the moment of writing, the `usageCollector.schema` is not updated automatically ([#70622](https://github.com/elastic/kibana/issues/70622)) so, if you are adding a new app to Kibana, you'll need to give the Kibana Telemetry team a heads up to update the mappings in the Telemetry Cluster accordingly. + +## Developer notes + +In order to keep the count of the events, this collector uses 2 Saved Objects: + +1. `application_usage_transactional`: It stores each individually reported event (up to 90 days old). Grouped by `timestamp` and `appId`. +2. `application_usage_totals`: It stores the sum of all the events older than 90 days old per `appId`. + +Both of them use the shared fields `appId: 'keyword'`, `numberOfClicks: 'long'` and `minutesOnScreen: 'float'`. `application_usage_transactional` also stores `timestamp: { type: 'date' }`. +but they are currently not added in the mappings because we don't use them for search purposes, and we need to be thoughtful with the number of mapped fields in the SavedObjects index ([#43673](https://github.com/elastic/kibana/issues/43673)). diff --git a/src/plugins/kibana_usage_collection/server/collectors/application_usage/saved_objects_types.ts b/src/plugins/kibana_usage_collection/server/collectors/application_usage/saved_objects_types.ts index 8d6a2d110efe0..551c6e230972e 100644 --- a/src/plugins/kibana_usage_collection/server/collectors/application_usage/saved_objects_types.ts +++ b/src/plugins/kibana_usage_collection/server/collectors/application_usage/saved_objects_types.ts @@ -35,13 +35,10 @@ export function registerMappings(registerType: SavedObjectsServiceSetup['registe hidden: false, namespaceType: 'agnostic', mappings: { + // Not indexing any of its contents because we use them "as-is" and don't search by these fields + // for more info, see the README.md for application_usage dynamic: false, - properties: { - // Disabled the mapping of these fields since they are not searched and we need to reduce the amount of indexed fields (#43673) - // appId: { type: 'keyword' }, - // numberOfClicks: { type: 'long' }, - // minutesOnScreen: { type: 'float' }, - }, + properties: {}, }, }); @@ -53,10 +50,6 @@ export function registerMappings(registerType: SavedObjectsServiceSetup['registe dynamic: false, properties: { timestamp: { type: 'date' }, - // Disabled the mapping of these fields since they are not searched and we need to reduce the amount of indexed fields (#43673) - // appId: { type: 'keyword' }, - // numberOfClicks: { type: 'long' }, - // minutesOnScreen: { type: 'float' }, }, }, }); diff --git a/test/functional/apps/dashboard/index.js b/test/functional/apps/dashboard/index.js index 1e310c1ddd268..5a30456bd59ab 100644 --- a/test/functional/apps/dashboard/index.js +++ b/test/functional/apps/dashboard/index.js @@ -49,6 +49,7 @@ export default function ({ getService, loadTestFile }) { after(unloadCurrentData); loadTestFile(require.resolve('./empty_dashboard')); + loadTestFile(require.resolve('./url_field_formatter')); loadTestFile(require.resolve('./embeddable_rendering')); loadTestFile(require.resolve('./create_and_add_embeddables')); loadTestFile(require.resolve('./edit_embeddable_redirects')); diff --git a/test/functional/apps/dashboard/url_field_formatter.ts b/test/functional/apps/dashboard/url_field_formatter.ts new file mode 100644 index 0000000000000..9b05b9b777b94 --- /dev/null +++ b/test/functional/apps/dashboard/url_field_formatter.ts @@ -0,0 +1,91 @@ +/* + * 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 expect from '@kbn/expect'; +import { WebElementWrapper } from 'test/functional/services/lib/web_element_wrapper'; +import { FtrProviderContext } from '../../ftr_provider_context'; + +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const { common, dashboard, settings, timePicker, visChart } = getPageObjects([ + 'common', + 'dashboard', + 'settings', + 'timePicker', + 'visChart', + ]); + const esArchiver = getService('esArchiver'); + const kibanaServer = getService('kibanaServer'); + const testSubjects = getService('testSubjects'); + const browser = getService('browser'); + const fieldName = 'clientip'; + + const clickFieldAndCheckUrl = async (fieldLink: WebElementWrapper) => { + const fieldValue = await fieldLink.getVisibleText(); + await fieldLink.click(); + const windowHandlers = await browser.getAllWindowHandles(); + expect(windowHandlers.length).to.equal(2); + await browser.switchToWindow(windowHandlers[1]); + const currentUrl = await browser.getCurrentUrl(); + const fieldUrl = common.getHostPort() + '/app/' + fieldValue; + expect(currentUrl).to.equal(fieldUrl); + }; + + describe('Changing field formatter to Url', () => { + before(async function () { + await esArchiver.load('dashboard/current/kibana'); + await kibanaServer.uiSettings.replace({ + defaultIndex: '0bf35f60-3dc9-11e8-8660-4d65aa086b3c', + }); + await common.navigateToApp('settings'); + await settings.clickKibanaIndexPatterns(); + await settings.clickIndexPatternLogstash(); + await settings.filterField(fieldName); + await settings.openControlsByName(fieldName); + await settings.setFieldFormat('url'); + await settings.controlChangeSave(); + }); + + it('applied on dashboard', async () => { + await common.navigateToApp('dashboard'); + await dashboard.loadSavedDashboard('dashboard with everything'); + await dashboard.waitForRenderComplete(); + const fieldLink = await visChart.getFieldLinkInVisTable(`${fieldName}: Descending`, 1); + await clickFieldAndCheckUrl(fieldLink); + }); + + it('applied on discover', async () => { + await common.navigateToApp('discover'); + await timePicker.setAbsoluteRange( + 'Sep 19, 2017 @ 06:31:44.000', + 'Sep 23, 2018 @ 18:31:44.000' + ); + await testSubjects.click('docTableExpandToggleColumn'); + const fieldLink = await testSubjects.find(`tableDocViewRow-${fieldName}-value`); + await clickFieldAndCheckUrl(fieldLink); + }); + + afterEach(async function () { + const windowHandlers = await browser.getAllWindowHandles(); + if (windowHandlers.length > 1) { + await browser.closeCurrentWindow(); + await browser.switchToWindow(windowHandlers[0]); + } + }); + }); +} diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index 673fba0c346b8..590631ad48b00 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -302,6 +302,20 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr return element.getVisibleText(); } + public async getFieldLinkInVisTable(fieldName: string, rowIndex: number = 1) { + const tableVis = await testSubjects.find('tableVis'); + const $ = await tableVis.parseDomContent(); + const headers = $('span[ng-bind="::col.title"]') + .toArray() + .map((header: any) => $(header).text()); + const fieldColumnIndex = headers.indexOf(fieldName); + return await find.byCssSelector( + `[data-test-subj="paginated-table-body"] tr:nth-of-type(${rowIndex}) td:nth-of-type(${ + fieldColumnIndex + 1 + }) a` + ); + } + /** * If you are writing new tests, you should rather look into getTableVisContent method instead. * @deprecated Use getTableVisContent instead. diff --git a/x-pack/plugins/apm/common/projections/services.ts b/x-pack/plugins/apm/common/projections/services.ts index 80a3471e9c30d..809caeeaf6088 100644 --- a/x-pack/plugins/apm/common/projections/services.ts +++ b/x-pack/plugins/apm/common/projections/services.ts @@ -16,25 +16,37 @@ import { rangeFilter } from '../utils/range_filter'; export function getServicesProjection({ setup, + noEvents, }: { setup: Setup & SetupTimeRange & SetupUIFilters; + noEvents?: boolean; }) { const { start, end, uiFiltersES, indices } = setup; return { - index: [ - indices['apm_oss.metricsIndices'], - indices['apm_oss.errorIndices'], - indices['apm_oss.transactionIndices'], - ], + ...(noEvents + ? {} + : { + index: [ + indices['apm_oss.metricsIndices'], + indices['apm_oss.errorIndices'], + indices['apm_oss.transactionIndices'], + ], + }), body: { size: 0, query: { bool: { filter: [ - { - terms: { [PROCESSOR_EVENT]: ['transaction', 'error', 'metric'] }, - }, + ...(noEvents + ? [] + : [ + { + terms: { + [PROCESSOR_EVENT]: ['transaction', 'error', 'metric'], + }, + }, + ]), { range: rangeFilter(start, end) }, ...uiFiltersES, ], diff --git a/x-pack/plugins/apm/common/utils/array_union_to_callable.ts b/x-pack/plugins/apm/common/utils/array_union_to_callable.ts new file mode 100644 index 0000000000000..23ea86006b888 --- /dev/null +++ b/x-pack/plugins/apm/common/utils/array_union_to_callable.ts @@ -0,0 +1,14 @@ +/* + * 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 { ValuesType } from 'utility-types'; + +// work around a TypeScript limitation described in https://stackoverflow.com/posts/49511416 + +export const arrayUnionToCallable = ( + array: T +): Array> => { + return array; +}; diff --git a/x-pack/plugins/apm/common/utils/join_by_key/index.test.ts b/x-pack/plugins/apm/common/utils/join_by_key/index.test.ts new file mode 100644 index 0000000000000..458d21bfea58f --- /dev/null +++ b/x-pack/plugins/apm/common/utils/join_by_key/index.test.ts @@ -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 { joinByKey } from './'; + +describe('joinByKey', () => { + it('joins by a string key', () => { + const joined = joinByKey( + [ + { + serviceName: 'opbeans-node', + avg: 10, + }, + { + serviceName: 'opbeans-node', + count: 12, + }, + { + serviceName: 'opbeans-java', + avg: 11, + }, + { + serviceName: 'opbeans-java', + p95: 18, + }, + ], + 'serviceName' + ); + + expect(joined.length).toBe(2); + + expect(joined).toEqual([ + { + serviceName: 'opbeans-node', + avg: 10, + count: 12, + }, + { + serviceName: 'opbeans-java', + avg: 11, + p95: 18, + }, + ]); + }); + + it('joins by a record key', () => { + const joined = joinByKey( + [ + { + key: { + serviceName: 'opbeans-node', + transactionName: '/api/opbeans-node', + }, + avg: 10, + }, + { + key: { + serviceName: 'opbeans-node', + transactionName: '/api/opbeans-node', + }, + count: 12, + }, + { + key: { + serviceName: 'opbeans-java', + transactionName: '/api/opbeans-java', + }, + avg: 11, + }, + { + key: { + serviceName: 'opbeans-java', + transactionName: '/api/opbeans-java', + }, + p95: 18, + }, + ], + 'key' + ); + + expect(joined.length).toBe(2); + + expect(joined).toEqual([ + { + key: { + serviceName: 'opbeans-node', + transactionName: '/api/opbeans-node', + }, + avg: 10, + count: 12, + }, + { + key: { + serviceName: 'opbeans-java', + transactionName: '/api/opbeans-java', + }, + avg: 11, + p95: 18, + }, + ]); + }); +}); diff --git a/x-pack/plugins/apm/common/utils/join_by_key/index.ts b/x-pack/plugins/apm/common/utils/join_by_key/index.ts new file mode 100644 index 0000000000000..b49f536400514 --- /dev/null +++ b/x-pack/plugins/apm/common/utils/join_by_key/index.ts @@ -0,0 +1,48 @@ +/* + * 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 { UnionToIntersection, ValuesType } from 'utility-types'; +import { isEqual } from 'lodash'; + +/** + * Joins a list of records by a given key. Key can be any type of value, from + * strings to plain objects, as long as it is present in all records. `isEqual` + * is used for comparing keys. + * + * UnionToIntersection is needed to get all keys of union types, see below for + * example. + * + const agentNames = [{ serviceName: '', agentName: '' }]; + const transactionRates = [{ serviceName: '', transactionsPerMinute: 1 }]; + const flattened = joinByKey( + [...agentNames, ...transactionRates], + 'serviceName' + ); +*/ + +type JoinedReturnType< + T extends Record, + U extends UnionToIntersection, + V extends keyof T & keyof U +> = Array & Record>; + +export function joinByKey< + T extends Record, + U extends UnionToIntersection, + V extends keyof T & keyof U +>(items: T[], key: V): JoinedReturnType { + return items.reduce>((prev, current) => { + let item = prev.find((prevItem) => isEqual(prevItem[key], current[key])); + + if (!item) { + item = { ...current } as ValuesType>; + prev.push(item); + } else { + Object.assign(item, current); + } + + return prev; + }, []); +} diff --git a/x-pack/plugins/apm/common/utils/left_join.ts b/x-pack/plugins/apm/common/utils/left_join.ts deleted file mode 100644 index f3c4e48df755b..0000000000000 --- a/x-pack/plugins/apm/common/utils/left_join.ts +++ /dev/null @@ -1,21 +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 { Assign, Omit } from 'utility-types'; - -export function leftJoin< - TL extends object, - K extends keyof TL, - TR extends Pick ->(leftRecords: TL[], matchKey: K, rightRecords: TR[]) { - const rightLookup = new Map( - rightRecords.map((record) => [record[matchKey], record]) - ); - return leftRecords.map((record) => { - const matchProp = (record[matchKey] as unknown) as TR[K]; - const matchingRightRecord = rightLookup.get(matchProp); - return { ...record, ...matchingRightRecord }; - }) as Array>>>; -} diff --git a/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature b/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature index bc807d596a272..c98e3f81b2bc6 100644 --- a/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature +++ b/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature @@ -37,3 +37,6 @@ Feature: RUM Dashboard When the user selected the breakdown Then breakdown series should appear in chart + Scenario: Service name filter + When a user changes the selected service name + Then it displays relevant client metrics diff --git a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js index acccd86f3e4d7..ac09e575a46ae 100644 --- a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js +++ b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js @@ -9,17 +9,17 @@ module.exports = { }, "RUM Dashboard": { "Client metrics": { - "1": "62 ", - "2": "0.07 sec", + "1": "55 ", + "2": "0.08 sec", "3": "0.01 sec" }, "Rum page filters (example #1)": { - "1": "15 ", - "2": "0.07 sec", + "1": "8 ", + "2": "0.08 sec", "3": "0.01 sec" }, "Rum page filters (example #2)": { - "1": "35 ", + "1": "28 ", "2": "0.07 sec", "3": "0.01 sec" }, @@ -31,6 +31,11 @@ module.exports = { }, "Page load distribution chart legends": { "1": "Overall" + }, + "Service name filter": { + "1": "7 ", + "2": "0.07 sec", + "3": "0.01 sec" } } } diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/page_load_dist.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/page_load_dist.ts index 809b22490abd6..89dc3437c3e69 100644 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/page_load_dist.ts +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/page_load_dist.ts @@ -18,7 +18,9 @@ Given(`a user click page load breakdown filter`, () => { }); When(`the user selected the breakdown`, () => { - cy.get('[data-cy=filter-breakdown-item_Browser]').click(); + cy.get('[data-cy=filter-breakdown-item_Browser]', { + timeout: DEFAULT_TIMEOUT, + }).click(); // click outside popover to close it cy.get('[data-cy=pageLoadDist]').click(); }); diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/rum_filters.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/rum_filters.ts index 439003351aedb..2600e5d073328 100644 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/rum_filters.ts +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/rum_filters.ts @@ -5,6 +5,7 @@ */ import { When, Then } from 'cypress-cucumber-preprocessor/steps'; +import { DEFAULT_TIMEOUT } from './rum_dashboard'; When(/^the user filters by "([^"]*)"$/, (filterName) => { // wait for all loading to finish @@ -13,9 +14,13 @@ When(/^the user filters by "([^"]*)"$/, (filterName) => { cy.get(`#local-filter-${filterName}`).click(); if (filterName === 'os') { - cy.get('button.euiSelectableListItem[title="Mac OS X"]').click(); + cy.get('button.euiSelectableListItem[title="Mac OS X"]', { + timeout: DEFAULT_TIMEOUT, + }).click(); } else { - cy.get('button.euiSelectableListItem[title="DE"]').click(); + cy.get('button.euiSelectableListItem[title="DE"]', { + timeout: DEFAULT_TIMEOUT, + }).click(); } cy.get('[data-cy=applyFilter]').click(); }); diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/service_name_filter.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/service_name_filter.ts new file mode 100644 index 0000000000000..9a3d7b52674b7 --- /dev/null +++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/service_name_filter.ts @@ -0,0 +1,30 @@ +/* + * 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 { When, Then } from 'cypress-cucumber-preprocessor/steps'; +import { DEFAULT_TIMEOUT } from '../apm'; + +When('a user changes the selected service name', (filterName) => { + // wait for all loading to finish + cy.get('kbnLoadingIndicator').should('not.be.visible'); + cy.get(`[data-cy=serviceNameFilter]`, { timeout: DEFAULT_TIMEOUT }).select( + 'opbean-client-rum' + ); +}); + +Then(`it displays relevant client metrics`, () => { + const clientMetrics = '[data-cy=client-metrics] .euiStat__title'; + + // wait for all loading to finish + cy.get('kbnLoadingIndicator').should('not.be.visible'); + cy.get('.euiStat__title-isLoading').should('not.be.visible'); + + cy.get(clientMetrics).eq(2).invoke('text').snapshot(); + + cy.get(clientMetrics).eq(1).invoke('text').snapshot(); + + cy.get(clientMetrics).eq(0).invoke('text').snapshot(); +}); diff --git a/x-pack/plugins/apm/e2e/ingest-data/replay.js b/x-pack/plugins/apm/e2e/ingest-data/replay.js index 483cc99df7470..6bab95635f558 100644 --- a/x-pack/plugins/apm/e2e/ingest-data/replay.js +++ b/x-pack/plugins/apm/e2e/ingest-data/replay.js @@ -69,6 +69,14 @@ function incrementSpinnerCount({ success }) { spinner.text = `Remaining: ${remaining}. Succeeded: ${requestProgress.succeeded}. Failed: ${requestProgress.failed}.`; } let iterIndex = 0; + +function setRumAgent(item) { + item.body = item.body.replace( + '"name":"client"', + '"name":"opbean-client-rum"' + ); +} + async function insertItem(item) { try { const url = `${APM_SERVER_URL}${item.url}`; @@ -78,6 +86,8 @@ async function insertItem(item) { if (item.url === '/intake/v2/rum/events') { if (iterIndex === userAgents.length) { + // set some event agent to opbean + setRumAgent(item); iterIndex = 0; } headers['User-Agent'] = userAgents[iterIndex]; diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx index 295f343b411a9..1625fb4c1409e 100644 --- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx @@ -259,4 +259,13 @@ export const routes: BreadcrumbRoute[] = [ }), name: RouteName.RUM_OVERVIEW, }, + { + exact: true, + path: '/services/:serviceName/rum-overview', + component: () => , + breadcrumb: i18n.translate('xpack.apm.home.rumOverview.title', { + defaultMessage: 'Real User Monitoring', + }), + name: RouteName.RUM_OVERVIEW, + }, ]; diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx index c9e475ef15316..3ddaa66b8de5e 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx @@ -11,6 +11,7 @@ import { EuiSpacer, } from '@elastic/eui'; import React, { useMemo } from 'react'; +import { useRouteMatch } from 'react-router-dom'; import { useTrackPageview } from '../../../../../observability/public'; import { LocalUIFilters } from '../../shared/LocalUIFilters'; import { PROJECTION } from '../../../../common/projections/typings'; @@ -37,6 +38,10 @@ export function RumOverview() { urlParams: { start, end }, } = useUrlParams(); + const isRumServiceRoute = useRouteMatch( + '/services/:serviceName/rum-overview' + ); + const { data } = useFetcher( (callApmApi) => { if (start && end) { @@ -61,13 +66,17 @@ export function RumOverview() { - service.serviceName) ?? [] - } - /> - - + {!isRumServiceRoute && ( + <> + service.serviceName) ?? [] + } + /> + + {' '} + + )} diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx index 81bdbdad805d6..ce60ffa4ba4e3 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx @@ -22,11 +22,17 @@ import { ServiceMap } from '../ServiceMap'; import { ServiceMetrics } from '../ServiceMetrics'; import { ServiceNodeOverview } from '../ServiceNodeOverview'; import { TransactionOverview } from '../TransactionOverview'; -import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink'; import { RumOverview } from '../RumDashboard'; +import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink'; interface Props { - tab: 'transactions' | 'errors' | 'metrics' | 'nodes' | 'service-map'; + tab: + | 'transactions' + | 'errors' + | 'metrics' + | 'nodes' + | 'service-map' + | 'rum-overview'; } export function ServiceDetailTabs({ tab }: Props) { @@ -115,7 +121,7 @@ export function ServiceDetailTabs({ tab }: Props) { if (isRumAgentName(agentName)) { tabs.push({ link: ( - + {i18n.translate('xpack.apm.home.rumTabLabel', { defaultMessage: 'Real User Monitoring', })} diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx index abca9817bd69d..729ed9b10f827 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx +++ b/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx @@ -11,21 +11,17 @@ */ import React from 'react'; import { APMLink, APMLinkExtendProps } from './APMLink'; -import { useUrlParams } from '../../../../hooks/useUrlParams'; -import { pickKeys } from '../../../../../common/utils/pick_keys'; -const RumOverviewLink = (props: APMLinkExtendProps) => { - const { urlParams } = useUrlParams(); +interface RumOverviewLinkProps extends APMLinkExtendProps { + serviceName?: string; +} +export function RumOverviewLink({ + serviceName, + ...rest +}: RumOverviewLinkProps) { + const path = serviceName + ? `/services/${serviceName}/rum-overview` + : '/rum-overview'; - const persistedFilters = pickKeys( - urlParams, - 'transactionResult', - 'host', - 'containerId', - 'podName' - ); - - return ; -}; - -export { RumOverviewLink }; + return ; +} diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx index e12a4a4831e17..0bb62bd8efcff 100644 --- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx @@ -60,6 +60,7 @@ const ServiceNameFilter = ({ serviceNames }: Props) => { ; -export async function getServicesItems( - setup: Setup & SetupTimeRange & SetupUIFilters -) { - const { start, end, client } = setup; - - const projection = getServicesProjection({ setup }); - - const params = mergeProjection(projection, { - body: { - size: 0, - aggs: { - services: { - terms: { - ...projection.body.aggs.services.terms, - size: 500, - }, - aggs: { - avg: { - avg: { field: TRANSACTION_DURATION }, - }, - agents: { - terms: { field: AGENT_NAME, size: 1 }, - }, - events: { - terms: { field: PROCESSOR_EVENT }, - }, - environments: { - terms: { field: SERVICE_ENVIRONMENT }, - }, - }, - }, - }, - }, - }); - - const resp = await client.search(params); - const aggs = resp.aggregations; - - const serviceBuckets = aggs?.services.buckets || []; - - const items = serviceBuckets.map((bucket) => { - const eventTypes = bucket.events.buckets; - - const transactions = eventTypes.find((e) => e.key === 'transaction'); - const totalTransactions = transactions?.doc_count || 0; - - const errors = eventTypes.find((e) => e.key === 'error'); - const totalErrors = errors?.doc_count || 0; - - const deltaAsMinutes = (end - start) / 1000 / 60; - const transactionsPerMinute = totalTransactions / deltaAsMinutes; - const errorsPerMinute = totalErrors / deltaAsMinutes; - - const environmentsBuckets = bucket.environments.buckets; - const environments = environmentsBuckets.map( - (environmentBucket) => environmentBucket.key as string - ); - - return { - serviceName: bucket.key as string, - agentName: bucket.agents.buckets[0]?.key as string | undefined, - transactionsPerMinute, - errorsPerMinute, - avgResponseTime: bucket.avg.value, - environments, - }; - }); - - return items; +export type ServicesItemsSetup = Setup & SetupTimeRange & SetupUIFilters; +export type ServicesItemsProjection = ReturnType; + +export async function getServicesItems(setup: ServicesItemsSetup) { + const params = { + projection: getServicesProjection({ setup, noEvents: true }), + setup, + }; + + const [ + transactionDurationAverages, + agentNames, + transactionRates, + errorRates, + environments, + ] = await Promise.all([ + getTransactionDurationAverages(params), + getAgentNames(params), + getTransactionRates(params), + getErrorRates(params), + getEnvironments(params), + ]); + + const allMetrics = [ + ...transactionDurationAverages, + ...agentNames, + ...transactionRates, + ...errorRates, + ...environments, + ]; + + return joinByKey(allMetrics, 'serviceName'); } diff --git a/x-pack/plugins/apm/server/lib/services/get_services/get_services_items_stats.ts b/x-pack/plugins/apm/server/lib/services/get_services/get_services_items_stats.ts new file mode 100644 index 0000000000000..c28bcad841ffd --- /dev/null +++ b/x-pack/plugins/apm/server/lib/services/get_services/get_services_items_stats.ts @@ -0,0 +1,309 @@ +/* + * 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 { arrayUnionToCallable } from '../../../../common/utils/array_union_to_callable'; +import { + PROCESSOR_EVENT, + TRANSACTION_DURATION, + AGENT_NAME, + SERVICE_ENVIRONMENT, +} from '../../../../common/elasticsearch_fieldnames'; +import { mergeProjection } from '../../../../common/projections/util/merge_projection'; +import { ProcessorEvent } from '../../../../common/processor_event'; +import { + ServicesItemsSetup, + ServicesItemsProjection, +} from './get_services_items'; + +const MAX_NUMBER_OF_SERVICES = 500; + +const getDeltaAsMinutes = (setup: ServicesItemsSetup) => + (setup.end - setup.start) / 1000 / 60; + +interface AggregationParams { + setup: ServicesItemsSetup; + projection: ServicesItemsProjection; +} + +export const getTransactionDurationAverages = async ({ + setup, + projection, +}: AggregationParams) => { + const { client, indices } = setup; + + const response = await client.search( + mergeProjection(projection, { + size: 0, + index: indices['apm_oss.transactionIndices'], + body: { + query: { + bool: { + filter: projection.body.query.bool.filter.concat({ + term: { + [PROCESSOR_EVENT]: ProcessorEvent.transaction, + }, + }), + }, + }, + aggs: { + services: { + terms: { + ...projection.body.aggs.services.terms, + size: MAX_NUMBER_OF_SERVICES, + }, + aggs: { + average: { + avg: { + field: TRANSACTION_DURATION, + }, + }, + }, + }, + }, + }, + }) + ); + + const { aggregations } = response; + + if (!aggregations) { + return []; + } + + return aggregations.services.buckets.map((bucket) => ({ + serviceName: bucket.key as string, + avgResponseTime: bucket.average.value, + })); +}; + +export const getAgentNames = async ({ + setup, + projection, +}: AggregationParams) => { + const { client, indices } = setup; + const response = await client.search( + mergeProjection(projection, { + index: [ + indices['apm_oss.metricsIndices'], + indices['apm_oss.errorIndices'], + indices['apm_oss.transactionIndices'], + ], + body: { + size: 0, + query: { + bool: { + filter: [ + ...projection.body.query.bool.filter, + { + terms: { + [PROCESSOR_EVENT]: [ + ProcessorEvent.metric, + ProcessorEvent.error, + ProcessorEvent.transaction, + ], + }, + }, + ], + }, + }, + aggs: { + services: { + terms: { + ...projection.body.aggs.services.terms, + size: MAX_NUMBER_OF_SERVICES, + }, + aggs: { + agent_name: { + top_hits: { + _source: [AGENT_NAME], + size: 1, + }, + }, + }, + }, + }, + }, + }) + ); + + const { aggregations } = response; + + if (!aggregations) { + return []; + } + + return aggregations.services.buckets.map((bucket) => ({ + serviceName: bucket.key as string, + agentName: (bucket.agent_name.hits.hits[0]?._source as { + agent: { + name: string; + }; + }).agent.name, + })); +}; + +export const getTransactionRates = async ({ + setup, + projection, +}: AggregationParams) => { + const { client, indices } = setup; + const response = await client.search( + mergeProjection(projection, { + index: indices['apm_oss.transactionIndices'], + body: { + size: 0, + query: { + bool: { + filter: [ + ...projection.body.query.bool.filter, + { + term: { + [PROCESSOR_EVENT]: ProcessorEvent.transaction, + }, + }, + ], + }, + }, + aggs: { + services: { + terms: { + ...projection.body.aggs.services.terms, + size: MAX_NUMBER_OF_SERVICES, + }, + }, + }, + }, + }) + ); + + const { aggregations } = response; + + if (!aggregations) { + return []; + } + + const deltaAsMinutes = getDeltaAsMinutes(setup); + + return arrayUnionToCallable(aggregations.services.buckets).map((bucket) => { + const transactionsPerMinute = bucket.doc_count / deltaAsMinutes; + return { + serviceName: bucket.key as string, + transactionsPerMinute, + }; + }); +}; + +export const getErrorRates = async ({ + setup, + projection, +}: AggregationParams) => { + const { client, indices } = setup; + const response = await client.search( + mergeProjection(projection, { + index: indices['apm_oss.errorIndices'], + body: { + size: 0, + query: { + bool: { + filter: [ + ...projection.body.query.bool.filter, + { + term: { + [PROCESSOR_EVENT]: ProcessorEvent.error, + }, + }, + ], + }, + }, + aggs: { + services: { + terms: { + ...projection.body.aggs.services.terms, + size: MAX_NUMBER_OF_SERVICES, + }, + }, + }, + }, + }) + ); + + const { aggregations } = response; + + if (!aggregations) { + return []; + } + + const deltaAsMinutes = getDeltaAsMinutes(setup); + + return aggregations.services.buckets.map((bucket) => { + const errorsPerMinute = bucket.doc_count / deltaAsMinutes; + return { + serviceName: bucket.key as string, + errorsPerMinute, + }; + }); +}; + +export const getEnvironments = async ({ + setup, + projection, +}: AggregationParams) => { + const { client, indices } = setup; + const response = await client.search( + mergeProjection(projection, { + index: [ + indices['apm_oss.metricsIndices'], + indices['apm_oss.errorIndices'], + indices['apm_oss.transactionIndices'], + ], + body: { + size: 0, + query: { + bool: { + filter: [ + ...projection.body.query.bool.filter, + { + terms: { + [PROCESSOR_EVENT]: [ + ProcessorEvent.transaction, + ProcessorEvent.error, + ProcessorEvent.metric, + ], + }, + }, + ], + }, + }, + aggs: { + services: { + terms: { + ...projection.body.aggs.services.terms, + size: MAX_NUMBER_OF_SERVICES, + }, + aggs: { + environments: { + terms: { + field: SERVICE_ENVIRONMENT, + }, + }, + }, + }, + }, + }, + }) + ); + + const { aggregations } = response; + + if (!aggregations) { + return []; + } + + return aggregations.services.buckets.map((bucket) => ({ + serviceName: bucket.key as string, + environments: bucket.environments.buckets.map((env) => env.key as string), + })); +}; diff --git a/x-pack/plugins/apm/server/lib/services/queries.test.ts b/x-pack/plugins/apm/server/lib/services/queries.test.ts index d90cd8bf13908..b2fe7efeaf959 100644 --- a/x-pack/plugins/apm/server/lib/services/queries.test.ts +++ b/x-pack/plugins/apm/server/lib/services/queries.test.ts @@ -40,7 +40,9 @@ describe('services queries', () => { it('fetches the service items', async () => { mock = await inspectSearchParams((setup) => getServicesItems(setup)); - expect(mock.params).toMatchSnapshot(); + const allParams = mock.spy.mock.calls.map((call) => call[0]); + + expect(allParams).toMatchSnapshot(); }); it('fetches the legacy data status', async () => { diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.tsx b/x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.tsx index 43d5d5f939ce0..701016d6bf0af 100644 --- a/x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.tsx @@ -24,7 +24,7 @@ import { EuiBasicTableColumn } from '@elastic/eui'; import { Paginate, PaginateChildProps } from '../paginate'; import { TagList } from '../tag_list'; import { getTagsFilter } from '../../lib/get_tags_filter'; -// @ts-ignore untyped local +// @ts-expect-error import { extractSearch } from '../../lib/extract_search'; import { ComponentStrings } from '../../../i18n'; import { CanvasTemplate } from '../../../types'; @@ -61,7 +61,7 @@ export class WorkpadTemplates extends React.PureComponent< WorkpadTemplatesState > { static propTypes = { - createFromTemplate: PropTypes.func.isRequired, + onCreateFromTemplate: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, templates: PropTypes.object, }; diff --git a/x-pack/plugins/canvas/server/templates/index.ts b/x-pack/plugins/canvas/server/templates/index.ts index bd0abed1912c3..c2723fbc87e17 100644 --- a/x-pack/plugins/canvas/server/templates/index.ts +++ b/x-pack/plugins/canvas/server/templates/index.ts @@ -13,20 +13,21 @@ import { light } from './theme_light'; import { TEMPLATE_TYPE } from '../../common/lib/constants'; -export const templates = [pitch, status, summary, dark, light]; +export const templates = [status, summary, dark, light, pitch]; export async function initializeTemplates( - client: Pick + client: Pick ) { const existingTemplates = await client.find({ type: TEMPLATE_TYPE, perPage: 1 }); if (existingTemplates.total === 0) { - const templateObjects = templates.map((template) => ({ - id: template.id, - type: TEMPLATE_TYPE, - attributes: template, - })); - - client.bulkCreate(templateObjects); + // Some devs were seeing timeouts that would cause an unhandled promise rejection + // likely because the pitch template is so huge. + // So, rather than doing a bulk create of templates, we're going to fire off individual + // creates and catch and throw-away any errors that happen. + // Once packages are ready, we should probably move that pitch that is so large to a package + for (const template of templates) { + client.create(TEMPLATE_TYPE, template, { id: template.id }).catch((err) => undefined); + } } } diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts index 98bd3077670a7..5eb4eaf6e2ca1 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts +++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ReactWrapper } from 'enzyme'; import { act } from 'react-dom/test-utils'; import { @@ -13,44 +12,21 @@ import { TestBedConfig, findTestSubject, } from '../../../../../test_utils'; -// NOTE: We have to use the Home component instead of the TemplateList component because we depend -// upon react router to provide the name of the template to load in the detail panel. -import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths -import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths +import { TemplateList } from '../../../public/application/sections/home/template_list'; // eslint-disable-line @kbn/eslint/no-restricted-paths import { TemplateDeserialized } from '../../../common'; -import { WithAppDependencies, services, TestSubjects } from '../helpers'; +import { WithAppDependencies, TestSubjects } from '../helpers'; const testBedConfig: TestBedConfig = { - store: () => indexManagementStore(services as any), memoryRouter: { - initialEntries: [`/indices`], - componentRoutePath: `/:section(indices|templates)`, + initialEntries: [`/templates`], + componentRoutePath: `/templates/:templateName?`, }, doMountAsync: true, }; -const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig); - -export interface IndexTemplatesTabTestBed extends TestBed { - findAction: (action: 'edit' | 'clone' | 'delete') => ReactWrapper; - actions: { - goToTemplatesList: () => void; - selectDetailsTab: (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => void; - clickReloadButton: () => void; - clickTemplateAction: ( - name: TemplateDeserialized['name'], - action: 'edit' | 'clone' | 'delete' - ) => void; - clickTemplateAt: (index: number) => void; - clickCloseDetailsButton: () => void; - clickActionMenu: (name: TemplateDeserialized['name']) => void; - toggleViewItem: (view: 'composable' | 'system') => void; - }; -} - -export const setup = async (): Promise => { - const testBed = await initTestBed(); +const initTestBed = registerTestBed(WithAppDependencies(TemplateList), testBedConfig); +const createActions = (testBed: TestBed) => { /** * Additional helpers */ @@ -64,11 +40,6 @@ export const setup = async (): Promise => { /** * User Actions */ - - const goToTemplatesList = () => { - testBed.find('templatesTab').simulate('click'); - }; - const selectDetailsTab = (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => { const tabs = ['summary', 'settings', 'mappings', 'aliases']; @@ -136,10 +107,8 @@ export const setup = async (): Promise => { }; return { - ...testBed, findAction, actions: { - goToTemplatesList, selectDetailsTab, clickReloadButton, clickTemplateAction, @@ -150,3 +119,14 @@ export const setup = async (): Promise => { }, }; }; + +export const setup = async (): Promise => { + const testBed = await initTestBed(); + + return { + ...testBed, + ...createActions(testBed), + }; +}; + +export type IndexTemplatesTabTestBed = TestBed & ReturnType; diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts index 2ff3743cd866c..fb3e16e5345cb 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts +++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts @@ -30,28 +30,15 @@ describe('Index Templates tab', () => { server.restore(); }); - beforeEach(async () => { - httpRequestsMockHelpers.setLoadIndicesResponse([]); - - await act(async () => { - testBed = await setup(); - }); - }); - describe('when there are no index templates', () => { - beforeEach(async () => { - const { actions, component } = testBed; - + test('should display an empty prompt', async () => { httpRequestsMockHelpers.setLoadTemplatesResponse({ templates: [], legacyTemplates: [] }); await act(async () => { - actions.goToTemplatesList(); + testBed = await setup(); }); + const { exists, component } = testBed; component.update(); - }); - - test('should display an empty prompt', async () => { - const { exists } = testBed; expect(exists('sectionLoading')).toBe(false); expect(exists('emptyPrompt')).toBe(true); @@ -119,14 +106,12 @@ describe('Index Templates tab', () => { const legacyTemplates = [template4, template5, template6]; beforeEach(async () => { - const { actions, component } = testBed; - httpRequestsMockHelpers.setLoadTemplatesResponse({ templates, legacyTemplates }); await act(async () => { - actions.goToTemplatesList(); + testBed = await setup(); }); - component.update(); + testBed.component.update(); }); test('should list them in the table', async () => { @@ -151,6 +136,7 @@ describe('Index Templates tab', () => { composedOfString, priorityFormatted, 'M S A', // Mappings Settings Aliases badges + '', // Column of actions ]); }); @@ -192,8 +178,10 @@ describe('Index Templates tab', () => { ); }); - test('should have a button to create a new template', () => { + test('should have a button to create a template', () => { const { exists } = testBed; + // Both composable and legacy templates + expect(exists('createTemplateButton')).toBe(true); expect(exists('createLegacyTemplateButton')).toBe(true); }); diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx index 07a27e2414aed..69d7a13edfcfb 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx +++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx @@ -7,7 +7,6 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import { CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../common'; import { setupEnvironment, nextTick } from '../helpers'; import { @@ -369,7 +368,7 @@ describe.skip('', () => { aliases: ALIASES, }, _kbnMeta: { - isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT, + isLegacy: false, isManaged: false, }, }; diff --git a/x-pack/plugins/index_management/common/constants/index.ts b/x-pack/plugins/index_management/common/constants/index.ts index 526b9fede2a67..d1700f0e611c0 100644 --- a/x-pack/plugins/index_management/common/constants/index.ts +++ b/x-pack/plugins/index_management/common/constants/index.ts @@ -9,7 +9,6 @@ export { BASE_PATH } from './base_path'; export { API_BASE_PATH } from './api_base_path'; export { INVALID_INDEX_PATTERN_CHARS, INVALID_TEMPLATE_NAME_CHARS } from './invalid_characters'; export * from './index_statuses'; -export { CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from './index_templates'; export { UIM_APP_NAME, diff --git a/x-pack/plugins/index_management/common/constants/index_templates.ts b/x-pack/plugins/index_management/common/constants/index_templates.ts deleted file mode 100644 index 7696b3832c51e..0000000000000 --- a/x-pack/plugins/index_management/common/constants/index_templates.ts +++ /dev/null @@ -1,12 +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. - */ - -/** - * Up until the end of the 8.x release cycle we need to support both - * legacy and composable index template formats. This constant keeps track of whether - * we create legacy index template format by default in the UI. - */ -export const CREATE_LEGACY_TEMPLATE_BY_DEFAULT = true; diff --git a/x-pack/plugins/index_management/common/index.ts b/x-pack/plugins/index_management/common/index.ts index 4ad428744deab..119d4e0c54edd 100644 --- a/x-pack/plugins/index_management/common/index.ts +++ b/x-pack/plugins/index_management/common/index.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export { PLUGIN, API_BASE_PATH, CREATE_LEGACY_TEMPLATE_BY_DEFAULT, BASE_PATH } from './constants'; +export { PLUGIN, API_BASE_PATH, BASE_PATH } from './constants'; export { getTemplateParameter } from './lib'; diff --git a/x-pack/plugins/index_management/common/lib/index.ts b/x-pack/plugins/index_management/common/lib/index.ts index 4e76a40ced524..6b1005b4faa05 100644 --- a/x-pack/plugins/index_management/common/lib/index.ts +++ b/x-pack/plugins/index_management/common/lib/index.ts @@ -7,9 +7,11 @@ export { deserializeDataStream, deserializeDataStreamList } from './data_stream_serialization'; export { - deserializeLegacyTemplateList, + deserializeTemplate, deserializeTemplateList, deserializeLegacyTemplate, + deserializeLegacyTemplateList, + serializeTemplate, serializeLegacyTemplate, } from './template_serialization'; diff --git a/x-pack/plugins/index_management/common/lib/template_serialization.ts b/x-pack/plugins/index_management/common/lib/template_serialization.ts index 249881f668d9f..608a8b8aca294 100644 --- a/x-pack/plugins/index_management/common/lib/template_serialization.ts +++ b/x-pack/plugins/index_management/common/lib/template_serialization.ts @@ -13,7 +13,7 @@ import { const hasEntries = (data: object = {}) => Object.entries(data).length > 0; export function serializeTemplate(templateDeserialized: TemplateDeserialized): TemplateSerialized { - const { version, priority, indexPatterns, template, composedOf } = templateDeserialized; + const { version, priority, indexPatterns, template, composedOf, _meta } = templateDeserialized; return { version, @@ -21,6 +21,7 @@ export function serializeTemplate(templateDeserialized: TemplateDeserialized): T template, index_patterns: indexPatterns, composed_of: composedOf, + _meta, }; } @@ -34,6 +35,7 @@ export function deserializeTemplate( index_patterns: indexPatterns, template = {}, priority, + _meta, composed_of: composedOf, } = templateEs; const { settings } = template; @@ -46,6 +48,7 @@ export function deserializeTemplate( template, ilmPolicy: settings?.index?.lifecycle, composedOf, + _meta, _kbnMeta: { isManaged: Boolean(managedTemplatePrefix && name.startsWith(managedTemplatePrefix)), }, diff --git a/x-pack/plugins/index_management/common/types/templates.ts b/x-pack/plugins/index_management/common/types/templates.ts index 006a2d9dea8f2..14318b5fa2a8d 100644 --- a/x-pack/plugins/index_management/common/types/templates.ts +++ b/x-pack/plugins/index_management/common/types/templates.ts @@ -21,6 +21,7 @@ export interface TemplateSerialized { composed_of?: string[]; version?: number; priority?: number; + _meta?: { [key: string]: any }; } /** @@ -43,6 +44,7 @@ export interface TemplateDeserialized { ilmPolicy?: { name: string; }; + _meta?: { [key: string]: any }; _kbnMeta: { isManaged: boolean; isLegacy?: boolean; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss new file mode 100644 index 0000000000000..51e8a829e81b1 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss @@ -0,0 +1,34 @@ + + +/** + * [1] Will center vertically the empty search result + */ + +$heightHeader: $euiSizeL * 2; + +.componentTemplates { + @include euiBottomShadowFlat; + height: 100%; + + &__header { + height: $heightHeader; + + .euiFormControlLayout { + max-width: initial; + } + } + + &__searchBox { + border-bottom: $euiBorderThin; + box-shadow: none; + max-width: initial; + } + + &__listWrapper { + height: calc(100% - #{$heightHeader}); + + &--is-empty { + display: flex; // [1] + } + } +} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx new file mode 100644 index 0000000000000..64c7cd400ba0d --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx @@ -0,0 +1,169 @@ +/* + * 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 classNames from 'classnames'; +import React, { useState, useMemo } from 'react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiEmptyPrompt, EuiButton } from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { FilterListButton } from './components'; +import { ComponentTemplatesList } from './component_templates_list'; +import { Props as ComponentTemplatesListItemProps } from './component_templates_list_item'; + +import './component_templates.scss'; + +interface Props { + isLoading: boolean; + components: ComponentTemplateListItem[]; + listItemProps: Omit; +} + +interface Filters { + [key: string]: { name: string; checked: 'on' | 'off' }; +} + +function fuzzyMatch(searchValue: string, text: string) { + const pattern = `.*${searchValue.split('').join('.*')}.*`; + const regex = new RegExp(pattern); + return regex.test(text); +} + +const i18nTexts = { + filters: { + settings: i18n.translate( + 'xpack.idxMgmt.componentTemplatesSelector.filters.indexSettingsLabel', + { defaultMessage: 'Index settings' } + ), + mappings: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.filters.mappingsLabel', { + defaultMessage: 'Mappings', + }), + aliases: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.filters.aliasesLabel', { + defaultMessage: 'Aliases', + }), + }, + searchBoxPlaceholder: i18n.translate( + 'xpack.idxMgmt.componentTemplatesSelector.searchBox.placeholder', + { + defaultMessage: 'Search components', + } + ), +}; + +const getInitialFilters = (): Filters => ({ + settings: { + name: i18nTexts.filters.settings, + checked: 'off', + }, + mappings: { + name: i18nTexts.filters.mappings, + checked: 'off', + }, + aliases: { + name: i18nTexts.filters.aliases, + checked: 'off', + }, +}); + +export const ComponentTemplates = ({ isLoading, components, listItemProps }: Props) => { + const [searchValue, setSearchValue] = useState(''); + + const [filters, setFilters] = useState(getInitialFilters); + + const filteredComponents = useMemo(() => { + if (isLoading) { + return []; + } + + return components.filter((component) => { + if (filters.settings.checked === 'on' && !component.hasSettings) { + return false; + } + if (filters.mappings.checked === 'on' && !component.hasMappings) { + return false; + } + if (filters.aliases.checked === 'on' && !component.hasAliases) { + return false; + } + + if (searchValue.trim() === '') { + return true; + } + + const match = fuzzyMatch(searchValue, component.name); + return match; + }); + }, [isLoading, components, searchValue, filters]); + + const isSearchResultEmpty = filteredComponents.length === 0 && components.length > 0; + + if (isLoading) { + return null; + } + + const clearSearch = () => { + setSearchValue(''); + setFilters(getInitialFilters()); + }; + + const renderEmptyResult = () => { + return ( + + + + } + actions={ + + + + } + /> + ); + }; + + return ( +
+
+ + + { + setSearchValue(e.target.value); + }} + aria-label={i18nTexts.searchBoxPlaceholder} + className="componentTemplates__searchBox" + /> + + + + + +
+
+ {isSearchResultEmpty ? ( + renderEmptyResult() + ) : ( + + )} +
+
+ ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx new file mode 100644 index 0000000000000..0c64c38c8963f --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx @@ -0,0 +1,28 @@ +/* + * 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 { ComponentTemplateListItem } from '../../../../../common'; +import { + ComponentTemplatesListItem, + Props as ComponentTemplatesListItemProps, +} from './component_templates_list_item'; + +interface Props { + components: ComponentTemplateListItem[]; + listItemProps: Omit; +} + +export const ComponentTemplatesList = ({ components, listItemProps }: Props) => { + return ( + <> + {components.map((component) => ( + + ))} + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss new file mode 100644 index 0000000000000..b454d8697c5fc --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss @@ -0,0 +1,31 @@ +.componentTemplatesListItem { + background-color: white; + padding: $euiSizeM; + border-bottom: $euiBorderThin; + position: relative; + height: $euiSizeL * 2; + + &--selected { + &::before { + content: ''; + background-color: rgba(255, 255, 255, 0.7); + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + } + + &__contentIndicator { + flex-direction: row; + } + + &__checkIcon { + position: absolute; + right: $euiSize; + top: $euiSize; + z-index: 2; + } +} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx new file mode 100644 index 0000000000000..ad75c8dcbcc54 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx @@ -0,0 +1,103 @@ +/* + * 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 classNames from 'classnames'; +import React from 'react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiButtonIcon, + EuiLink, + EuiIcon, + EuiToolTip, +} from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { TemplateContentIndicator } from '../../shared'; + +import './component_templates_list_item.scss'; + +interface Action { + label: string; + icon: string; + handler: (component: ComponentTemplateListItem) => void; +} +export interface Props { + component: ComponentTemplateListItem; + isSelected?: boolean | ((component: ComponentTemplateListItem) => boolean); + onViewDetail: (component: ComponentTemplateListItem) => void; + actions?: Action[]; + dragHandleProps?: { [key: string]: any }; +} + +export const ComponentTemplatesListItem = ({ + component, + onViewDetail, + actions, + isSelected = false, + dragHandleProps, +}: Props) => { + const hasActions = actions && actions.length > 0; + const isSelectedValue = typeof isSelected === 'function' ? isSelected(component) : isSelected; + const isDraggable = Boolean(dragHandleProps); + + return ( +
+ + + + {isDraggable && ( + +
+ +
+ + )} + + {/* {component.name} */} + onViewDetail(component)}>{component.name} + + + + + + + + {/* Actions */} + {hasActions && !isSelectedValue && ( + + + {actions!.map((action, i) => ( + + + action.handler(component)} + data-test-subj="addPropertyButton" + aria-label={action.label} + /> + + + ))} + + + )} + + + {/* Check icon when selected */} + {isSelectedValue && ( + + )} +
+ ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx new file mode 100644 index 0000000000000..0a305eec19180 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx @@ -0,0 +1,64 @@ +/* + * 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 { EuiDragDropContext, EuiDraggable, EuiDroppable, euiDragDropReorder } from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { + ComponentTemplatesListItem, + Props as ComponentTemplatesListItemProps, +} from './component_templates_list_item'; + +interface DraggableLocation { + droppableId: string; + index: number; +} + +interface Props { + components: ComponentTemplateListItem[]; + onReorder: (components: ComponentTemplateListItem[]) => void; + listItemProps: Omit; +} + +export const ComponentTemplatesSelection = ({ components, onReorder, listItemProps }: Props) => { + const onDragEnd = ({ + source, + destination, + }: { + source?: DraggableLocation; + destination?: DraggableLocation; + }) => { + if (source && destination) { + const items = euiDragDropReorder(components, source.index, destination.index); + onReorder(items); + } + }; + + return ( + + + {components.map((component, idx) => ( + + {(provided) => ( + + )} + + ))} + + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss new file mode 100644 index 0000000000000..6abbbe65790e7 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss @@ -0,0 +1,36 @@ +/* +[1] Height to align left and right column headers +*/ + +.componentTemplatesSelector { + height: 480px; + + &__selection { + @include euiBottomShadowFlat; + + padding: 0 $euiSize $euiSize; + color: $euiColorDarkShade; + + &--is-empty { + align-items: center; + justify-content: center; + } + + &__header { + background-color: $euiColorLightestShade; + border-bottom: $euiBorderThin; + color: $euiColorInk; + height: $euiSizeXXL; // [1] + line-height: $euiSizeXXL; // [1] + font-size: $euiSizeM; + margin-bottom: $euiSizeS; + margin-left: $euiSize * -1; + margin-right: $euiSize * -1; + padding-left: $euiSize; + + &__count { + font-weight: 600; + } + } + } +} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx new file mode 100644 index 0000000000000..af48c3c79379a --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx @@ -0,0 +1,263 @@ +/* + * 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 classNames from 'classnames'; +import React, { useState, useEffect, useRef } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { SectionError, SectionLoading } from '../shared_imports'; +import { ComponentTemplateDetailsFlyout } from '../component_template_details'; +import { CreateButtonPopOver } from './components'; +import { ComponentTemplates } from './component_templates'; +import { ComponentTemplatesSelection } from './component_templates_selection'; +import { useApi } from '../component_templates_context'; + +import './component_templates_selector.scss'; + +interface Props { + onChange: (components: string[]) => void; + onComponentsLoaded: (components: ComponentTemplateListItem[]) => void; + defaultValue: string[]; + docUri: string; + emptyPrompt?: { + text?: string | JSX.Element; + showCreateButton?: boolean; + }; +} + +const i18nTexts = { + icons: { + view: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.viewItemIconLabel', { + defaultMessage: 'View', + }), + select: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.selectItemIconLabel', { + defaultMessage: 'Select', + }), + remove: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.removeItemIconLabel', { + defaultMessage: 'Remove', + }), + }, +}; + +export const ComponentTemplatesSelector = ({ + onChange, + defaultValue, + onComponentsLoaded, + docUri, + emptyPrompt: { text, showCreateButton } = {}, +}: Props) => { + const { data: components, isLoading, error } = useApi().useLoadComponentTemplates(); + const [selectedComponent, setSelectedComponent] = useState(null); + const [componentsSelected, setComponentsSelected] = useState([]); + const isInitialized = useRef(false); + + const hasSelection = Object.keys(componentsSelected).length > 0; + const hasComponents = components && components.length > 0 ? true : false; + + useEffect(() => { + if (components) { + if ( + defaultValue.length > 0 && + componentsSelected.length === 0 && + isInitialized.current === false + ) { + // Once the components are loaded we check the ones selected + // from the defaultValue provided + const nextComponentsSelected = defaultValue + .map((name) => components.find((comp) => comp.name === name)) + .filter(Boolean) as ComponentTemplateListItem[]; + + setComponentsSelected(nextComponentsSelected); + onChange(nextComponentsSelected.map(({ name }) => name)); + isInitialized.current = true; + } else { + onChange(componentsSelected.map(({ name }) => name)); + } + } + }, [defaultValue, components, componentsSelected, onChange]); + + useEffect(() => { + if (!isLoading && !error) { + onComponentsLoaded(components ?? []); + } + }, [isLoading, error, components, onComponentsLoaded]); + + const onSelectionReorder = (reorderedComponents: ComponentTemplateListItem[]) => { + setComponentsSelected(reorderedComponents); + }; + + const renderLoading = () => ( + + + + ); + + const renderError = () => ( + + } + error={error!} + /> + ); + + const renderSelector = () => ( + + {/* Selection */} + + {hasSelection ? ( + <> +
+ + {componentsSelected.length} + + ), + }} + /> +
+
+ { + setSelectedComponent(component.name); + }, + actions: [ + { + label: i18nTexts.icons.remove, + icon: 'minusInCircle', + handler: (component: ComponentTemplateListItem) => { + setComponentsSelected((prev) => { + return prev.filter(({ name }) => component.name !== name); + }); + }, + }, + ], + }} + /> +
+ + ) : ( +
+ +
+ )} + + + {/* List of components */} + + { + setSelectedComponent(component.name); + }, + actions: [ + { + label: i18nTexts.icons.select, + icon: 'plusInCircle', + handler: (component: ComponentTemplateListItem) => { + setComponentsSelected((prev) => { + return [...prev, component]; + }); + }, + }, + ], + isSelected: (component: ComponentTemplateListItem) => { + return componentsSelected.find(({ name }) => component.name === name) !== undefined; + }, + }} + /> + + + ); + + const renderComponentDetails = () => { + if (!selectedComponent) { + return null; + } + + return ( + setSelectedComponent(null)} + componentTemplateName={selectedComponent} + /> + ); + }; + + if (isLoading) { + return renderLoading(); + } else if (error) { + return renderError(); + } else if (hasComponents) { + return ( + <> + {renderSelector()} + {renderComponentDetails()} + + ); + } + + // No components: render empty prompt + const emptyPromptBody = ( + +

+ {text ?? ( + + )} +
+ + + +

+ + ); + return ( + + + + } + body={emptyPromptBody} + actions={showCreateButton ? : undefined} + data-test-subj="emptyPrompt" + /> + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx new file mode 100644 index 0000000000000..941e8ec362de2 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx @@ -0,0 +1,85 @@ +/* + * 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 { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +import { EuiPopover, EuiButton, EuiContextMenu } from '@elastic/eui'; + +interface Props { + anchorPosition?: 'upCenter' | 'downCenter'; +} + +export const CreateButtonPopOver = ({ anchorPosition = 'upCenter' }: Props) => { + const [isPopoverOpen, setIsPopOverOpen] = useState(false); + + return ( + setIsPopOverOpen((prev) => !prev)} + > + + + } + isOpen={isPopoverOpen} + closePopover={() => setIsPopOverOpen(false)} + panelPaddingSize="none" + withTitle + anchorPosition={anchorPosition} + repositionOnScroll + > + { + // console.log('Create component template...'); + }, + }, + { + name: i18n.translate( + 'xpack.idxMgmt.componentTemplatesFlyout.createComponentTemplateFromExistingButtonLabel', + { + defaultMessage: 'From existing index template', + } + ), + icon: 'symlink', + onClick: () => { + // console.log('Create component template from index template...'); + }, + }, + ], + }, + ]} + /> + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx new file mode 100644 index 0000000000000..7236a385a704e --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx @@ -0,0 +1,91 @@ +/* + * 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 { FormattedMessage } from '@kbn/i18n/react'; +import { EuiFilterButton, EuiPopover, EuiFilterSelectItem } from '@elastic/eui'; + +interface Filter { + name: string; + checked: 'on' | 'off'; +} + +interface Props { + filters: Filters; + onChange(filters: Filters): void; +} + +export interface Filters { + [key: string]: Filter; +} + +export function FilterListButton({ onChange, filters }: Props) { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const activeFilters = Object.values(filters).filter((v) => (v as Filter).checked === 'on'); + + const onButtonClick = () => { + setIsPopoverOpen(!isPopoverOpen); + }; + + const closePopover = () => { + setIsPopoverOpen(false); + }; + + const toggleFilter = (filter: string) => { + const previousValue = filters[filter].checked; + const nextValue = previousValue === 'on' ? 'off' : 'on'; + + onChange({ + ...filters, + [filter]: { + ...filters[filter], + checked: nextValue, + }, + }); + }; + + const button = ( + 0} + numActiveFilters={activeFilters.length} + data-test-subj="viewButton" + > + + + ); + + return ( + +
+ {Object.entries(filters).map(([filter, item], index) => ( + toggleFilter(filter)} + data-test-subj="filterItem" + > + {(item as Filter).name} + + ))} +
+ + ); +} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts new file mode 100644 index 0000000000000..999b2e64cf133 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export * from './create_button_popover'; +export * from './filter_list_button'; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts new file mode 100644 index 0000000000000..261a3d50d4626 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { ComponentTemplatesSelector } from './component_templates_selector'; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx index c78d24f126e29..bfea8d39e1203 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx @@ -61,3 +61,5 @@ export const useComponentTemplatesContext = () => { } return ctx; }; + +export const useApi = () => useComponentTemplatesContext().api; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/index.ts index 72e79a57ae413..52235502e33df 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/index.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/index.ts @@ -9,3 +9,5 @@ export { ComponentTemplatesProvider } from './component_templates_context'; export { ComponentTemplateList } from './component_template_list'; export { ComponentTemplateDetailsFlyout } from './component_template_details'; + +export * from './component_template_selector'; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts b/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts index 4a8cf965adfb9..63fe127c6b2d7 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ComponentTemplateListItem, ComponentTemplateDeserialized } from '../shared_imports'; +import { ComponentTemplateListItem, ComponentTemplateDeserialized, Error } from '../shared_imports'; import { UIM_COMPONENT_TEMPLATE_DELETE_MANY, UIM_COMPONENT_TEMPLATE_DELETE } from '../constants'; import { UseRequestHook, SendRequestHook } from './request'; @@ -15,7 +15,7 @@ export const getApi = ( trackMetric: (type: 'loaded' | 'click' | 'count', eventName: string) => void ) => { function useLoadComponentTemplates() { - return useRequest({ + return useRequest({ path: `${apiBasePath}/component_templates`, method: 'get', }); diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts b/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts index 97ffa4d875ecb..27ee2bb81caf1 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts @@ -15,13 +15,15 @@ import { useRequest as _useRequest, } from '../shared_imports'; -export type UseRequestHook = (config: UseRequestConfig) => UseRequestResponse; +export type UseRequestHook = ( + config: UseRequestConfig +) => UseRequestResponse; export type SendRequestHook = (config: SendRequestConfig) => Promise; -export const getUseRequest = (httpClient: HttpSetup): UseRequestHook => ( +export const getUseRequest = (httpClient: HttpSetup): UseRequestHook => ( config: UseRequestConfig ) => { - return _useRequest(httpClient, config); + return _useRequest(httpClient, config); }; export const getSendRequest = (httpClient: HttpSetup): SendRequestHook => ( diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts b/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts index 4e56f4a8c9818..bd19c2004894c 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts @@ -18,6 +18,7 @@ export { Error, useAuthorizationContext, NotAuthorizedSection, + Forms, } from '../../../../../../../src/plugins/es_ui_shared/public'; export { TabMappings, TabSettings, TabAliases } from '../shared'; diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/index.ts b/x-pack/plugins/index_management/public/application/components/shared/components/index.ts index b67a9c355e723..b0a76b828449c 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/index.ts +++ b/x-pack/plugins/index_management/public/application/components/shared/components/index.ts @@ -12,3 +12,5 @@ export { StepSettingsContainer, CommonWizardSteps, } from './wizard_steps'; + +export { TemplateContentIndicator } from './template_content_indicator'; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/template_content_indicator.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx similarity index 100% rename from x-pack/plugins/index_management/public/application/sections/home/template_list/components/template_content_indicator.tsx rename to x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx index 0d28ec4b50c9a..d71d72d873c8e 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx @@ -23,13 +23,13 @@ import { Forms } from '../../../../../shared_imports'; import { useJsonStep } from './use_json_step'; interface Props { - defaultValue: { [key: string]: any }; + defaultValue?: { [key: string]: any }; onChange: (content: Forms.Content) => void; esDocsBase: string; } export const StepAliases: React.FunctionComponent = React.memo( - ({ defaultValue, onChange, esDocsBase }) => { + ({ defaultValue = {}, onChange, esDocsBase }) => { const { jsonContent, setJsonContent, error } = useJsonStep({ defaultValue, onChange, diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx index a5953ea00a106..c8297e6f298b6 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx @@ -14,7 +14,7 @@ interface Props { } export const StepAliasesContainer: React.FunctionComponent = ({ esDocsBase }) => { - const { defaultValue, updateContent } = Forms.useContent('aliases'); + const { defaultValue, updateContent } = Forms.useContent('aliases'); return ( diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx index 2b9b689e17cb9..bbf7a04080a28 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx @@ -24,14 +24,14 @@ import { } from '../../../mappings_editor'; interface Props { - defaultValue: { [key: string]: any }; onChange: (content: Forms.Content) => void; - indexSettings?: IndexSettings; esDocsBase: string; + defaultValue?: { [key: string]: any }; + indexSettings?: IndexSettings; } export const StepMappings: React.FunctionComponent = React.memo( - ({ defaultValue, onChange, indexSettings, esDocsBase }) => { + ({ defaultValue = {}, onChange, indexSettings, esDocsBase }) => { const [mappings, setMappings] = useState(defaultValue); const onMappingsEditorUpdate = useCallback( diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx index 34e05d88c651d..38c4a85bbe0ff 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx @@ -14,7 +14,9 @@ interface Props { } export const StepMappingsContainer: React.FunctionComponent = ({ esDocsBase }) => { - const { defaultValue, updateContent, getData } = Forms.useContent('mappings'); + const { defaultValue, updateContent, getData } = Forms.useContent( + 'mappings' + ); return ( void; esDocsBase: string; + defaultValue?: { [key: string]: any }; } export const StepSettings: React.FunctionComponent = React.memo( - ({ defaultValue, onChange, esDocsBase }) => { + ({ defaultValue = {}, onChange, esDocsBase }) => { const { jsonContent, setJsonContent, error } = useJsonStep({ defaultValue, onChange, diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx index c540ddceb95c2..42be2c4b28c10 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx @@ -14,7 +14,9 @@ interface Props { } export const StepSettingsContainer = React.memo(({ esDocsBase }: Props) => { - const { defaultValue, updateContent } = Forms.useContent('settings'); + const { defaultValue, updateContent } = Forms.useContent( + 'settings' + ); return ( diff --git a/x-pack/plugins/index_management/public/application/components/shared/index.ts b/x-pack/plugins/index_management/public/application/components/shared/index.ts index 897e86c99eca0..9b0eeb7d18f6e 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/index.ts +++ b/x-pack/plugins/index_management/public/application/components/shared/index.ts @@ -12,4 +12,5 @@ export { StepMappingsContainer, StepSettingsContainer, CommonWizardSteps, + TemplateContentIndicator, } from './components'; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts index b7e3e36e61814..d8baca2db78a0 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts @@ -5,4 +5,5 @@ */ export { StepLogisticsContainer } from './step_logistics_container'; +export { StepComponentContainer } from './step_components_container'; export { StepReviewContainer } from './step_review_container'; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx new file mode 100644 index 0000000000000..01771f40f89ea --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx @@ -0,0 +1,112 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React, { useState, useCallback } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { + EuiTitle, + EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiButtonEmpty, +} from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { Forms } from '../../../../shared_imports'; +import { ComponentTemplatesSelector } from '../../component_templates'; + +interface Props { + esDocsBase: string; + onChange: (content: Forms.Content) => void; + defaultValue?: string[]; +} + +const i18nTexts = { + description: ( + + ), +}; + +export const StepComponents = ({ defaultValue = [], onChange, esDocsBase }: Props) => { + const [state, setState] = useState<{ + isLoadingComponents: boolean; + components: ComponentTemplateListItem[]; + }>({ isLoadingComponents: true, components: [] }); + + const onComponentsLoaded = useCallback((components: ComponentTemplateListItem[]) => { + setState({ isLoadingComponents: false, components }); + }, []); + + const onComponentSelectionChange = useCallback( + (components: string[]) => { + onChange({ isValid: true, validate: async () => true, getData: () => components }); + }, + [onChange] + ); + + const showHeader = state.isLoadingComponents === true || state.components.length > 0; + const docUri = `${esDocsBase}/indices-component-template.html`; + + const renderHeader = () => { + if (!showHeader) { + return null; + } + + return ( + <> + + + +

+ +

+ + + + + +

{i18nTexts.description}

+ + + + + + + + + + + + + ); + }; + + return ( +
+ {renderHeader()} + + +
+ ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx new file mode 100644 index 0000000000000..b9b09bf0e3d9a --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx @@ -0,0 +1,25 @@ +/* + * 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 { Forms } from '../../../../shared_imports'; +import { documentationService } from '../../../services/documentation'; +import { WizardContent } from '../template_form'; +import { StepComponents } from './step_components'; + +export const StepComponentContainer = () => { + const { defaultValue, updateContent } = Forms.useContent( + 'components' + ); + + return ( + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx index d011b4b06546a..44ec4db0873f3 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx @@ -8,7 +8,15 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiButtonEmpty, EuiSpacer } from ' import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { useForm, Form, getUseField, getFormRow, Field, Forms } from '../../../../shared_imports'; +import { + useForm, + Form, + getUseField, + getFormRow, + Field, + Forms, + JsonEditorField, +} from '../../../../shared_imports'; import { documentationService } from '../../../services/documentation'; import { schemas, nameConfig, nameConfigWithoutValidations } from '../template_form_schemas'; @@ -47,6 +55,15 @@ const fieldsMeta = { }), testSubject: 'orderField', }, + priority: { + title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityTitle', { + defaultMessage: 'Merge priority', + }), + description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityDescription', { + defaultMessage: 'The merge priority when multiple templates match an index.', + }), + testSubject: 'priorityField', + }, version: { title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.versionTitle', { defaultMessage: 'Version', @@ -62,20 +79,26 @@ interface Props { defaultValue: { [key: string]: any }; onChange: (content: Forms.Content) => void; isEditing?: boolean; + isLegacy?: boolean; } export const StepLogistics: React.FunctionComponent = React.memo( - ({ defaultValue, isEditing, onChange }) => { + ({ defaultValue, isEditing = false, onChange, isLegacy = false }) => { const { form } = useForm({ schema: schemas.logistics, defaultValue, options: { stripEmptyFields: false }, }); + /** + * When the consumer call validate() on this step, we submit the form so it enters the "isSubmitted" state + * and we can display the form errors on top of the forms if there are any. + */ + const validate = async () => { + return (await form.submit()).isValid; + }; + useEffect(() => { - const validate = async () => { - return (await form.submit()).isValid; - }; onChange({ isValid: form.isValid, validate, @@ -83,10 +106,22 @@ export const StepLogistics: React.FunctionComponent = React.memo( }); }, [form.isValid, onChange]); // eslint-disable-line react-hooks/exhaustive-deps - const { name, indexPatterns, order, version } = fieldsMeta; + useEffect(() => { + const subscription = form.subscribe(({ data, isValid }) => { + onChange({ + isValid, + validate, + getData: data.format, + }); + }); + return subscription.unsubscribe; + }, [onChange]); // eslint-disable-line react-hooks/exhaustive-deps + + const { name, indexPatterns, order, priority, version } = fieldsMeta; return ( -
+ <> + {/* Header */} @@ -114,46 +149,106 @@ export const StepLogistics: React.FunctionComponent = React.memo( + - {/* Name */} - - - - {/* Index patterns */} - - - - {/* Order */} - - - - {/* Version */} - - - - + +
+ {/* Name */} + + + + + {/* Index patterns */} + + + + + {/* Order */} + {isLegacy && ( + + + + )} + + {/* Priority */} + {isLegacy === false && ( + + + + )} + + {/* Version */} + + + + + {/* _meta */} + {isLegacy === false && ( + + + + } + > + + + )} +
+ ); } ); diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx index 867ecff799858..68a3419499088 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx @@ -10,13 +10,19 @@ import { WizardContent } from '../template_form'; import { StepLogistics } from './step_logistics'; interface Props { + isLegacy?: boolean; isEditing?: boolean; } -export const StepLogisticsContainer = ({ isEditing = false }: Props) => { - const { defaultValue, updateContent } = Forms.useContent('logistics'); +export const StepLogisticsContainer = ({ isEditing, isLegacy }: Props) => { + const { defaultValue, updateContent } = Forms.useContent('logistics'); return ( - + ); }; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx index 7f301b0a9c282..880c7fbd7f23c 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx @@ -22,10 +22,7 @@ import { import { FormattedMessage } from '@kbn/i18n/react'; import { serializers } from '../../../../shared_imports'; -import { - serializeLegacyTemplate, - serializeTemplate, -} from '../../../../../common/lib/template_serialization'; +import { serializeLegacyTemplate, serializeTemplate } from '../../../../../common/lib'; import { TemplateDeserialized, getTemplateParameter } from '../../../../../common'; import { WizardSection } from '../template_form'; @@ -66,6 +63,9 @@ export const StepReview: React.FunctionComponent = React.memo( indexPatterns, version, order, + priority, + composedOf, + _meta, _kbnMeta: { isLegacy }, } = template!; @@ -96,6 +96,7 @@ export const StepReview: React.FunctionComponent = React.memo( + {/* Index patterns */} = React.memo( )} - - - - - {order ? order : } - + {/* Priority / Order */} + {isLegacy ? ( + <> + + + + + {order ? order : } + + + ) : ( + <> + + + + + {priority ? priority : } + + + )} + {/* Version */} = React.memo( {version ? version : } + + {/* components */} + {isLegacy !== true && ( + <> + + + + + {composedOf && composedOf.length > 0 ? ( + composedOf.length > 1 ? ( + +
    + {composedOf.map((component: string, i: number) => { + return ( +
  • + + {component} + +
    • + ); + })} +
+ + ) : ( + composedOf.toString() + ) + ) : ( + + )} + + + )} + {/* Index settings */} = React.memo( {getDescriptionText(serializedSettings)} + + {/* Mappings */} = React.memo( {getDescriptionText(serializedMappings)} + + {/* Aliases */} = React.memo( {getDescriptionText(serializedAliases)} + + {/* Metadata (optional) */} + {isLegacy !== true && _meta && ( + <> + + + + + {JSON.stringify(_meta, null, 2)} + + + )} @@ -181,7 +255,8 @@ export const StepReview: React.FunctionComponent = React.memo( ); const RequestTab = () => { - const endpoint = `PUT _template/${name || ''}`; + const esApiEndpoint = isLegacy ? '_template' : '_index_template'; + const endpoint = `PUT ${esApiEndpoint}/${name || ''}`; const templateString = JSON.stringify(serializedTemplate, null, 2); const request = `${endpoint}\n${templateString}`; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx index 8a2c991aea8d0..269ad94251074 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx @@ -8,10 +8,10 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiSpacer } from '@elastic/eui'; -import { TemplateDeserialized, CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../../common'; +import { TemplateDeserialized } from '../../../../common'; import { serializers, Forms } from '../../../shared_imports'; import { SectionError } from '../section_error'; -import { StepLogisticsContainer, StepReviewContainer } from './steps'; +import { StepLogisticsContainer, StepComponentContainer, StepReviewContainer } from './steps'; import { CommonWizardSteps, StepSettingsContainer, @@ -28,12 +28,14 @@ interface Props { clearSaveError: () => void; isSaving: boolean; saveError: any; + isLegacy?: boolean; defaultValue?: TemplateDeserialized; isEditing?: boolean; } export interface WizardContent extends CommonWizardSteps { logistics: Omit; + components: TemplateDeserialized['composedOf']; } export type WizardSection = keyof WizardContent | 'review'; @@ -45,6 +47,12 @@ const wizardSections: { [id: string]: { id: WizardSection; label: string } } = { defaultMessage: 'Logistics', }), }, + components: { + id: 'components', + label: i18n.translate('xpack.idxMgmt.templateForm.steps.componentsStepName', { + defaultMessage: 'Components', + }), + }, settings: { id: 'settings', label: i18n.translate('xpack.idxMgmt.templateForm.steps.settingsStepName', { @@ -72,9 +80,18 @@ const wizardSections: { [id: string]: { id: WizardSection; label: string } } = { }; export const TemplateForm = ({ - defaultValue = { + defaultValue, + isEditing, + isSaving, + isLegacy = false, + saveError, + clearSaveError, + onSave, +}: Props) => { + const indexTemplate = defaultValue ?? { name: '', indexPatterns: [], + composedOf: [], template: { settings: {}, mappings: {}, @@ -82,26 +99,23 @@ export const TemplateForm = ({ }, _kbnMeta: { isManaged: false, - isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT, + isLegacy, }, - }, - isEditing, - isSaving, - saveError, - clearSaveError, - onSave, -}: Props) => { + }; + const { template: { settings, mappings, aliases }, + composedOf, _kbnMeta, ...logistics - } = defaultValue; + } = indexTemplate; const wizardDefaultValue: WizardContent = { logistics, settings, mappings, aliases, + components: indexTemplate.composedOf, }; const i18nTexts = { @@ -139,6 +153,7 @@ export const TemplateForm = ({ ): TemplateDeserialized => ({ ...initialTemplate, ...wizardData.logistics, + composedOf: wizardData.components, template: { settings: wizardData.settings, mappings: wizardData.mappings, @@ -148,7 +163,7 @@ export const TemplateForm = ({ const onSaveTemplate = useCallback( async (wizardData: WizardContent) => { - const template = buildTemplateObject(defaultValue)(wizardData); + const template = buildTemplateObject(indexTemplate)(wizardData); // We need to strip empty string, otherwise if the "order" or "version" // are not set, they will be empty string and ES expect a number for those parameters. @@ -160,7 +175,7 @@ export const TemplateForm = ({ clearSaveError(); }, - [defaultValue, onSave, clearSaveError] + [indexTemplate, onSave, clearSaveError] ); return ( @@ -177,9 +192,15 @@ export const TemplateForm = ({ label={wizardSections.logistics.label} isRequired > - + + {indexTemplate._kbnMeta.isLegacy !== true && ( + + + + )} + @@ -193,7 +214,7 @@ export const TemplateForm = ({ - + ); diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx index 9ff73b71adf50..5af3b4dd00c4f 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiCode } from '@elastic/eui'; import { FormSchema, @@ -28,6 +29,7 @@ const { startsWithField, indexPatternField, lowerCaseStringField, + isJsonField, } = fieldValidators; const { toInt } = fieldFormatters; const indexPatternInvalidCharacters = INVALID_INDEX_PATTERN_CHARS.join(' '); @@ -133,6 +135,13 @@ export const schemas: Record = { }), formatters: [toInt], }, + priority: { + type: FIELD_TYPES.NUMBER, + label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.fieldPriorityLabel', { + defaultMessage: 'Priority (optional)', + }), + formatters: [toInt], + }, version: { type: FIELD_TYPES.NUMBER, label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.fieldVersionLabel', { @@ -140,5 +149,43 @@ export const schemas: Record = { }), formatters: [toInt], }, + _meta: { + label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorLabel', { + defaultMessage: '_meta field data (optional)', + }), + helpText: ( + {JSON.stringify({ arbitrary_data: 'anything_goes' })}, + }} + /> + ), + validations: [ + { + validator: isJsonField( + i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorJsonError', { + defaultMessage: 'The _meta field JSON is not valid.', + }), + { allowEmptyString: true } + ), + }, + ], + deserializer: (value: any) => { + if (value === '') { + return value; + } + return JSON.stringify(value, null, 2); + }, + serializer: (value: string) => { + try { + return JSON.parse(value); + } catch (error) { + // swallow error and return non-parsed value; + return value; + } + }, + }, }, }; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts b/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts index dcaba319bb21a..156d792c26f1d 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts @@ -5,4 +5,3 @@ */ export * from './filter_list_button'; -export * from './template_content_indicator'; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx index ab4ce6a61a9b6..f85b14ea0d2d5 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx @@ -46,7 +46,7 @@ import { TabSummary } from '../../template_details/tabs'; interface Props { template: { name: string; isLegacy?: boolean }; onClose: () => void; - editTemplate: (name: string, isLegacy?: boolean) => void; + editTemplate: (name: string, isLegacy: boolean) => void; cloneTemplate: (name: string, isLegacy?: boolean) => void; reload: () => Promise; } @@ -290,7 +290,7 @@ export const LegacyTemplateDetails: React.FunctionComponent = ({ } ), icon: 'pencil', - onClick: () => editTemplate(templateName, isLegacy), + onClick: () => editTemplate(templateName, true), disabled: isManaged, }, { diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx index edce05018ce39..99915c2b70e2a 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx @@ -19,7 +19,7 @@ import { useServices } from '../../../../../app_context'; interface Props { templates: TemplateListItem[]; reload: () => Promise; - editTemplate: (name: string, isLegacy?: boolean) => void; + editTemplate: (name: string, isLegacy: boolean) => void; cloneTemplate: (name: string, isLegacy?: boolean) => void; history: ScopedHistory; } @@ -150,8 +150,8 @@ export const LegacyTemplateTable: React.FunctionComponent = ({ ), icon: 'pencil', type: 'icon', - onClick: ({ name, _kbnMeta: { isLegacy } }: TemplateListItem) => { - editTemplate(name, isLegacy); + onClick: ({ name }: TemplateListItem) => { + editTemplate(name, true); }, enabled: ({ _kbnMeta: { isManaged } }: TemplateListItem) => !isManaged, }, @@ -252,7 +252,10 @@ export const LegacyTemplateTable: React.FunctionComponent = ({ iconType="plusInCircle" data-test-subj="createLegacyTemplateButton" key="createTemplateButton" - {...reactRouterNavigate(history, '/create_template')} + {...reactRouterNavigate(history, { + pathname: '/create_template', + search: 'legacy=true', + })} > - + ) : null; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx index 7c3f8c07a7e04..6a5328f76fb06 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx @@ -7,18 +7,27 @@ import React, { useState, Fragment } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiInMemoryTable, EuiBasicTableColumn } from '@elastic/eui'; +import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton } from '@elastic/eui'; +import { ScopedHistory } from 'kibana/public'; + import { TemplateListItem } from '../../../../../../common'; import { TemplateDeleteModal } from '../../../../components'; -import { SendRequestResponse } from '../../../../../shared_imports'; -import { TemplateContentIndicator } from '../components'; +import { SendRequestResponse, reactRouterNavigate } from '../../../../../shared_imports'; +import { TemplateContentIndicator } from '../../../../components/shared'; interface Props { templates: TemplateListItem[]; reload: () => Promise; + editTemplate: (name: string) => void; + history: ScopedHistory; } -export const TemplateTable: React.FunctionComponent = ({ templates, reload }) => { +export const TemplateTable: React.FunctionComponent = ({ + templates, + reload, + history, + editTemplate, +}) => { const [templatesToDelete, setTemplatesToDelete] = useState< Array<{ name: string; isLegacy?: boolean }> >([]); @@ -80,13 +89,11 @@ export const TemplateTable: React.FunctionComponent = ({ templates, reloa sortable: true, }, { - field: 'hasMappings', name: i18n.translate('xpack.idxMgmt.templateList.table.overridesColumnTitle', { defaultMessage: 'Overrides', }), truncateText: true, - sortable: false, - render: (_, item) => ( + render: (item: TemplateListItem) => ( = ({ templates, reloa /> ), }, + { + name: i18n.translate('xpack.idxMgmt.templateList.table.actionColumnTitle', { + defaultMessage: 'Actions', + }), + actions: [ + { + name: i18n.translate('xpack.idxMgmt.templateList.table.actionEditText', { + defaultMessage: 'Edit', + }), + isPrimary: true, + description: i18n.translate('xpack.idxMgmt.templateList.table.actionEditDecription', { + defaultMessage: 'Edit this template', + }), + icon: 'pencil', + type: 'icon', + onClick: ({ name }: TemplateListItem) => { + editTemplate(name); + }, + enabled: ({ _kbnMeta: { isManaged } }: TemplateListItem) => !isManaged, + }, + ], + }, ]; const pagination = { @@ -112,6 +141,20 @@ export const TemplateTable: React.FunctionComponent = ({ templates, reloa box: { incremental: true, }, + toolsRight: [ + + + , + ], }; return ( diff --git a/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx b/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx index f567b9835d53d..fb82f52968eb4 100644 --- a/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx +++ b/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx @@ -7,6 +7,8 @@ import React, { useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { useLocation } from 'react-router-dom'; +import { parse } from 'query-string'; import { TemplateForm } from '../../components'; import { breadcrumbService } from '../../services/breadcrumbs'; @@ -17,6 +19,8 @@ import { getTemplateDetailsLink } from '../../services/routing'; export const TemplateCreate: React.FunctionComponent = ({ history }) => { const [isSaving, setIsSaving] = useState(false); const [saveError, setSaveError] = useState(null); + const search = parse(useLocation().search.substring(1)); + const isLegacy = Boolean(search.legacy); const onSave = async (template: TemplateDeserialized) => { const { name } = template; @@ -49,10 +53,17 @@ export const TemplateCreate: React.FunctionComponent = ({ h

- + {isLegacy ? ( + + ) : ( + + )}

@@ -61,6 +72,7 @@ export const TemplateCreate: React.FunctionComponent = ({ h isSaving={isSaving} saveError={saveError} clearSaveError={clearSaveError} + isLegacy={isLegacy} /> diff --git a/x-pack/plugins/index_management/public/application/services/routing.ts b/x-pack/plugins/index_management/public/application/services/routing.ts index 2a895196189d0..8831fa2368f47 100644 --- a/x-pack/plugins/index_management/public/application/services/routing.ts +++ b/x-pack/plugins/index_management/public/application/services/routing.ts @@ -16,11 +16,19 @@ export const getTemplateDetailsLink = (name: string, isLegacy?: boolean, withHas }; export const getTemplateEditLink = (name: string, isLegacy?: boolean) => { - return encodeURI(`/edit_template/${encodePathForReactRouter(name)}?legacy=${isLegacy === true}`); + let url = `/edit_template/${encodePathForReactRouter(name)}`; + if (isLegacy) { + url = `${url}?legacy=true`; + } + return encodeURI(url); }; export const getTemplateCloneLink = (name: string, isLegacy?: boolean) => { - return encodeURI(`/clone_template/${encodePathForReactRouter(name)}?legacy=${isLegacy === true}`); + let url = `/clone_template/${encodePathForReactRouter(name)}`; + if (isLegacy) { + url = `${url}?legacy=true`; + } + return encodeURI(url); }; export const decodePathFromReactRouter = (pathname: string): string => { diff --git a/x-pack/plugins/index_management/public/shared_imports.ts b/x-pack/plugins/index_management/public/shared_imports.ts index 69cd07ba6dba0..ad221ae73fecf 100644 --- a/x-pack/plugins/index_management/public/shared_imports.ts +++ b/x-pack/plugins/index_management/public/shared_imports.ts @@ -29,7 +29,11 @@ export { serializers, } from '../../../../src/plugins/es_ui_shared/static/forms/helpers'; -export { getFormRow, Field } from '../../../../src/plugins/es_ui_shared/static/forms/components'; +export { + getFormRow, + Field, + JsonEditorField, +} from '../../../../src/plugins/es_ui_shared/static/forms/components'; export { isJSON } from '../../../../src/plugins/es_ui_shared/static/validators/string'; diff --git a/x-pack/plugins/index_management/server/client/elasticsearch.ts b/x-pack/plugins/index_management/server/client/elasticsearch.ts index 6c0fbe3dd6a65..9f8bce241ae69 100644 --- a/x-pack/plugins/index_management/server/client/elasticsearch.ts +++ b/x-pack/plugins/index_management/server/client/elasticsearch.ts @@ -126,6 +126,20 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any) method: 'GET', }); + dataManagement.getComposableIndexTemplate = ca({ + urls: [ + { + fmt: '/_index_template/<%=name%>', + req: { + name: { + type: 'string', + }, + }, + }, + ], + method: 'GET', + }); + dataManagement.saveComposableIndexTemplate = ca({ urls: [ { @@ -154,4 +168,18 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any) ], method: 'DELETE', }); + + dataManagement.existsTemplate = ca({ + urls: [ + { + fmt: '/_index_template/<%=name%>', + req: { + name: { + type: 'string', + }, + }, + }, + ], + method: 'HEAD', + }); }; diff --git a/x-pack/plugins/index_management/server/routes/api/templates/lib.ts b/x-pack/plugins/index_management/server/routes/api/templates/lib.ts new file mode 100644 index 0000000000000..fc5719cc04d0c --- /dev/null +++ b/x-pack/plugins/index_management/server/routes/api/templates/lib.ts @@ -0,0 +1,65 @@ +/* + * 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 { serializeTemplate, serializeLegacyTemplate } from '../../../../common/lib'; +import { TemplateDeserialized, LegacyTemplateSerialized } from '../../../../common'; +import { CallAsCurrentUser } from '../../../types'; + +export const doesTemplateExist = async ({ + name, + callAsCurrentUser, + isLegacy, +}: { + name: string; + callAsCurrentUser: CallAsCurrentUser; + isLegacy?: boolean; +}) => { + if (isLegacy) { + return await callAsCurrentUser('indices.existsTemplate', { name }); + } + return await callAsCurrentUser('dataManagement.existsTemplate', { name }); +}; + +export const saveTemplate = async ({ + template, + callAsCurrentUser, + isLegacy, +}: { + template: TemplateDeserialized; + callAsCurrentUser: CallAsCurrentUser; + isLegacy?: boolean; +}) => { + const serializedTemplate = isLegacy + ? serializeLegacyTemplate(template) + : serializeTemplate(template); + + if (isLegacy) { + const { + order, + index_patterns, + version, + settings, + mappings, + aliases, + } = serializedTemplate as LegacyTemplateSerialized; + + return await callAsCurrentUser('indices.putTemplate', { + name: template.name, + order, + body: { + index_patterns, + version, + settings, + mappings, + aliases, + }, + }); + } + + return await callAsCurrentUser('dataManagement.saveComposableIndexTemplate', { + name: template.name, + body: serializedTemplate, + }); +}; diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts index e0d92b3800785..4b735c941be70 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts @@ -7,10 +7,10 @@ import { i18n } from '@kbn/i18n'; import { TemplateDeserialized } from '../../../../common'; -import { serializeLegacyTemplate } from '../../../../common/lib'; import { RouteDependencies } from '../../../types'; import { addBasePath } from '../index'; import { templateSchema } from './validate_schemas'; +import { saveTemplate, doesTemplateExist } from './lib'; const bodySchema = templateSchema; @@ -18,22 +18,17 @@ export function registerCreateRoute({ router, license, lib }: RouteDependencies) router.post( { path: addBasePath('/index_templates'), validate: { body: bodySchema } }, license.guardApiRoute(async (ctx, req, res) => { - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; + const { callAsCurrentUser } = ctx.dataManagement!.client; const template = req.body as TemplateDeserialized; const { _kbnMeta: { isLegacy }, } = template; - if (!isLegacy) { - return res.badRequest({ body: 'Only legacy index templates can be created.' }); - } - - const serializedTemplate = serializeLegacyTemplate(template); - const { order, index_patterns, version, settings, mappings, aliases } = serializedTemplate; - // Check that template with the same name doesn't already exist - const templateExists = await callAsCurrentUser('indices.existsTemplate', { + const templateExists = await doesTemplateExist({ name: template.name, + callAsCurrentUser, + isLegacy, }); if (templateExists) { @@ -51,17 +46,7 @@ export function registerCreateRoute({ router, license, lib }: RouteDependencies) try { // Otherwise create new index template - const response = await callAsCurrentUser('indices.putTemplate', { - name: template.name, - order, - body: { - index_patterns, - version, - settings, - mappings, - aliases, - }, - }); + const response = await saveTemplate({ template, callAsCurrentUser, isLegacy }); return res.ok({ body: response }); } catch (e) { diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts index ae5f7802a8408..1d8645268dc25 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts @@ -6,9 +6,10 @@ import { schema, TypeOf } from '@kbn/config-schema'; import { + deserializeTemplate, + deserializeTemplateList, deserializeLegacyTemplate, deserializeLegacyTemplateList, - deserializeTemplateList, } from '../../../../common/lib'; import { getManagedTemplatePrefix } from '../../../lib/get_managed_templates'; import { RouteDependencies } from '../../../types'; @@ -18,20 +19,19 @@ export function registerGetAllRoute({ router, license }: RouteDependencies) { router.get( { path: addBasePath('/index_templates'), validate: false }, license.guardApiRoute(async (ctx, req, res) => { - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; + const { callAsCurrentUser } = ctx.dataManagement!.client; const managedTemplatePrefix = await getManagedTemplatePrefix(callAsCurrentUser); - const _legacyTemplates = await callAsCurrentUser('indices.getTemplate'); - const { index_templates: _templates } = await callAsCurrentUser('transport.request', { - path: '_index_template', - method: 'GET', - }); + const legacyTemplatesEs = await callAsCurrentUser('indices.getTemplate'); + const { index_templates: templatesEs } = await callAsCurrentUser( + 'dataManagement.getComposableIndexTemplates' + ); const legacyTemplates = deserializeLegacyTemplateList( - _legacyTemplates, + legacyTemplatesEs, managedTemplatePrefix ); - const templates = deserializeTemplateList(_templates, managedTemplatePrefix); + const templates = deserializeTemplateList(templatesEs, managedTemplatePrefix); const body = { templates, @@ -49,7 +49,7 @@ const paramsSchema = schema.object({ // Require the template format version (V1 or V2) to be provided as Query param const querySchema = schema.object({ - legacy: schema.maybe(schema.boolean()), + legacy: schema.maybe(schema.oneOf([schema.literal('true'), schema.literal('false')])), }); export function registerGetOneRoute({ router, license, lib }: RouteDependencies) { @@ -60,25 +60,37 @@ export function registerGetOneRoute({ router, license, lib }: RouteDependencies) }, license.guardApiRoute(async (ctx, req, res) => { const { name } = req.params as TypeOf; - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; - - const { legacy } = req.query as TypeOf; + const { callAsCurrentUser } = ctx.dataManagement!.client; - if (!legacy) { - return res.badRequest({ body: 'Only index template version 1 can be fetched.' }); - } + const isLegacy = (req.query as TypeOf).legacy === 'true'; try { const managedTemplatePrefix = await getManagedTemplatePrefix(callAsCurrentUser); - const indexTemplateByName = await callAsCurrentUser('indices.getTemplate', { name }); - if (indexTemplateByName[name]) { - return res.ok({ - body: deserializeLegacyTemplate( - { ...indexTemplateByName[name], name }, - managedTemplatePrefix - ), - }); + if (isLegacy) { + const indexTemplateByName = await callAsCurrentUser('indices.getTemplate', { name }); + + if (indexTemplateByName[name]) { + return res.ok({ + body: deserializeLegacyTemplate( + { ...indexTemplateByName[name], name }, + managedTemplatePrefix + ), + }); + } + } else { + const { + index_templates: indexTemplates, + } = await callAsCurrentUser('dataManagement.getComposableIndexTemplate', { name }); + + if (indexTemplates.length > 0) { + return res.ok({ + body: deserializeTemplate( + { ...indexTemplates[0].index_template, name }, + managedTemplatePrefix + ), + }); + } } return res.notFound(); diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts index 7e9c3174d0591..3055321d6b594 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts @@ -6,10 +6,10 @@ import { schema } from '@kbn/config-schema'; import { TemplateDeserialized } from '../../../../common'; -import { serializeLegacyTemplate } from '../../../../common/lib'; import { RouteDependencies } from '../../../types'; import { addBasePath } from '../index'; import { templateSchema } from './validate_schemas'; +import { saveTemplate, doesTemplateExist } from './lib'; const bodySchema = templateSchema; const paramsSchema = schema.object({ @@ -23,23 +23,15 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies) validate: { body: bodySchema, params: paramsSchema }, }, license.guardApiRoute(async (ctx, req, res) => { - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; + const { callAsCurrentUser } = ctx.dataManagement!.client; const { name } = req.params as typeof paramsSchema.type; const template = req.body as TemplateDeserialized; const { _kbnMeta: { isLegacy }, } = template; - if (!isLegacy) { - return res.badRequest({ body: 'Only legacy index template can be edited.' }); - } - - const serializedTemplate = serializeLegacyTemplate(template); - - const { order, index_patterns, version, settings, mappings, aliases } = serializedTemplate; - // Verify the template exists (ES will throw 404 if not) - const doesExist = await callAsCurrentUser('indices.existsTemplate', { name }); + const doesExist = await doesTemplateExist({ name, callAsCurrentUser, isLegacy }); if (!doesExist) { return res.notFound(); @@ -47,17 +39,7 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies) try { // Next, update index template - const response = await callAsCurrentUser('indices.putTemplate', { - name, - order, - body: { - index_patterns, - version, - settings, - mappings, - aliases, - }, - }); + const response = await saveTemplate({ template, callAsCurrentUser, isLegacy }); return res.ok({ body: response }); } catch (e) { diff --git a/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts b/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts index 6ab28e9021123..f82ea8f3cf152 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts @@ -11,6 +11,7 @@ export const templateSchema = schema.object({ indexPatterns: schema.arrayOf(schema.string()), version: schema.maybe(schema.number()), order: schema.maybe(schema.number()), + priority: schema.maybe(schema.number()), template: schema.maybe( schema.object({ settings: schema.maybe(schema.object({}, { unknowns: 'allow' })), @@ -18,6 +19,8 @@ export const templateSchema = schema.object({ mappings: schema.maybe(schema.object({}, { unknowns: 'allow' })), }) ), + composedOf: schema.maybe(schema.arrayOf(schema.string())), + _meta: schema.maybe(schema.object({}, { unknowns: 'allow' })), ilmPolicy: schema.maybe( schema.object({ name: schema.maybe(schema.string()), diff --git a/x-pack/plugins/infra/common/constants.ts b/x-pack/plugins/infra/common/constants.ts new file mode 100644 index 0000000000000..65dcb2e43c6f7 --- /dev/null +++ b/x-pack/plugins/infra/common/constants.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export const DEFAULT_SOURCE_ID = 'default'; diff --git a/x-pack/plugins/infra/common/http_api/log_analysis/results/index.ts b/x-pack/plugins/infra/common/http_api/log_analysis/results/index.ts index 15615046bdd6a..30b6be435837b 100644 --- a/x-pack/plugins/infra/common/http_api/log_analysis/results/index.ts +++ b/x-pack/plugins/infra/common/http_api/log_analysis/results/index.ts @@ -8,3 +8,4 @@ export * from './log_entry_categories'; export * from './log_entry_category_datasets'; export * from './log_entry_category_examples'; export * from './log_entry_rate'; +export * from './log_entry_rate_examples'; diff --git a/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts b/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts index dfc3d2aabd11a..b7e8a49735152 100644 --- a/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts +++ b/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts @@ -30,6 +30,7 @@ export type GetLogEntryRateRequestPayload = rt.TypeOf; + export const logEntryRatePartitionRT = rt.type({ analysisBucketCount: rt.number, anomalies: rt.array(logEntryRateAnomalyRT), diff --git a/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate_examples.ts b/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate_examples.ts new file mode 100644 index 0000000000000..700f87ec3beb1 --- /dev/null +++ b/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate_examples.ts @@ -0,0 +1,77 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import * as rt from 'io-ts'; + +import { + badRequestErrorRT, + forbiddenErrorRT, + timeRangeRT, + routeTimingMetadataRT, +} from '../../shared'; + +export const LOG_ANALYSIS_GET_LOG_ENTRY_RATE_EXAMPLES_PATH = + '/api/infra/log_analysis/results/log_entry_rate_examples'; + +/** + * request + */ + +export const getLogEntryRateExamplesRequestPayloadRT = rt.type({ + data: rt.type({ + // the dataset to fetch the log rate examples from + dataset: rt.string, + // the number of examples to fetch + exampleCount: rt.number, + // the id of the source configuration + sourceId: rt.string, + // the time range to fetch the log rate examples from + timeRange: timeRangeRT, + }), +}); + +export type GetLogEntryRateExamplesRequestPayload = rt.TypeOf< + typeof getLogEntryRateExamplesRequestPayloadRT +>; + +/** + * response + */ + +const logEntryRateExampleRT = rt.type({ + id: rt.string, + dataset: rt.string, + message: rt.string, + timestamp: rt.number, + tiebreaker: rt.number, +}); + +export type LogEntryRateExample = rt.TypeOf; + +export const getLogEntryRateExamplesSuccessReponsePayloadRT = rt.intersection([ + rt.type({ + data: rt.type({ + examples: rt.array(logEntryRateExampleRT), + }), + }), + rt.partial({ + timing: routeTimingMetadataRT, + }), +]); + +export type GetLogEntryRateExamplesSuccessReponsePayload = rt.TypeOf< + typeof getLogEntryRateExamplesSuccessReponsePayloadRT +>; + +export const getLogEntryRateExamplesResponsePayloadRT = rt.union([ + getLogEntryRateExamplesSuccessReponsePayloadRT, + badRequestErrorRT, + forbiddenErrorRT, +]); + +export type GetLogEntryRateExamplesResponsePayload = rt.TypeOf< + typeof getLogEntryRateExamplesResponsePayloadRT +>; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator.tsx b/x-pack/plugins/infra/public/components/logging/log_analysis_results/anomaly_severity_indicator.tsx similarity index 95% rename from x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator.tsx rename to x-pack/plugins/infra/public/components/logging/log_analysis_results/anomaly_severity_indicator.tsx index e50231316fb5a..e85145b83a30b 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_analysis_results/anomaly_severity_indicator.tsx @@ -10,7 +10,7 @@ import { formatAnomalyScore, getSeverityCategoryForScore, ML_SEVERITY_COLORS, -} from '../../../../../../common/log_analysis'; +} from '../../../../common/log_analysis'; export const AnomalySeverityIndicator: React.FunctionComponent<{ anomalyScore: number; diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx new file mode 100644 index 0000000000000..2ec9922d94555 --- /dev/null +++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx @@ -0,0 +1,49 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; + +import { euiStyled } from '../../../../../observability/public'; +import { LogEntryExampleMessagesEmptyIndicator } from './log_entry_examples_empty_indicator'; +import { LogEntryExampleMessagesFailureIndicator } from './log_entry_examples_failure_indicator'; +import { LogEntryExampleMessagesLoadingIndicator } from './log_entry_examples_loading_indicator'; + +interface Props { + isLoading: boolean; + hasFailedLoading: boolean; + hasResults: boolean; + exampleCount: number; + onReload: () => void; +} +export const LogEntryExampleMessages: React.FunctionComponent = ({ + isLoading, + hasFailedLoading, + exampleCount, + hasResults, + onReload, + children, +}) => { + return ( + + {isLoading ? ( + + ) : hasFailedLoading ? ( + + ) : !hasResults ? ( + + ) : ( + children + )} + + ); +}; + +const Wrapper = euiStyled.div` + align-items: stretch; + flex-direction: column; + flex: 1 0 0%; + overflow: hidden; +`; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_empty_indicator.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_empty_indicator.tsx similarity index 81% rename from x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_empty_indicator.tsx rename to x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_empty_indicator.tsx index ac572a5f6cf21..1d6028ed032a2 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_empty_indicator.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_empty_indicator.tsx @@ -7,20 +7,20 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; -export const CategoryExampleMessagesEmptyIndicator: React.FunctionComponent<{ +export const LogEntryExampleMessagesEmptyIndicator: React.FunctionComponent<{ onReload: () => void; }> = ({ onReload }) => ( diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_failure_indicator.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_failure_indicator.tsx similarity index 75% rename from x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_failure_indicator.tsx rename to x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_failure_indicator.tsx index 7865dcd0226e0..dca786bce3b71 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_failure_indicator.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_failure_indicator.tsx @@ -7,22 +7,22 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTextColor } from '@elastic/eui import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; -export const CategoryExampleMessagesFailureIndicator: React.FunctionComponent<{ +export const LogEntryExampleMessagesFailureIndicator: React.FunctionComponent<{ onRetry: () => void; }> = ({ onRetry }) => ( diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_loading_indicator.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx similarity index 89% rename from x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_loading_indicator.tsx rename to x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx index cad87a96a1326..8217b6ef80960 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_messages_loading_indicator.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx @@ -7,7 +7,7 @@ import { EuiLoadingContent } from '@elastic/eui'; import React from 'react'; -export const CategoryExampleMessagesLoadingIndicator: React.FunctionComponent<{ +export const LogEntryExampleMessagesLoadingIndicator: React.FunctionComponent<{ exampleCount: number; }> = ({ exampleCount }) => ( <> diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx index bc592c71898b0..c50a82006941a 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx @@ -68,7 +68,7 @@ export const LogColumnHeaders: React.FunctionComponent<{ ); }; -const LogColumnHeader: React.FunctionComponent<{ +export const LogColumnHeader: React.FunctionComponent<{ columnWidth: LogEntryColumnWidth; 'data-test-subj'?: string; }> = ({ children, columnWidth, 'data-test-subj': dataTestSubj }) => ( @@ -77,7 +77,7 @@ const LogColumnHeader: React.FunctionComponent<{ ); -const LogColumnHeadersWrapper = euiStyled.div.attrs((props) => ({ +export const LogColumnHeadersWrapper = euiStyled.div.attrs((props) => ({ role: props.role ?? 'row', }))` align-items: stretch; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/index.ts b/x-pack/plugins/infra/public/components/logging/log_text_stream/index.ts index dbf162171cac3..bc687baf7c466 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/index.ts +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/index.ts @@ -4,9 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ -export { LogEntryColumn, LogEntryColumnWidths, useColumnWidths } from './log_entry_column'; +export { + LogEntryColumn, + LogEntryColumnWidths, + useColumnWidths, + iconColumnId, +} from './log_entry_column'; export { LogEntryFieldColumn } from './log_entry_field_column'; export { LogEntryMessageColumn } from './log_entry_message_column'; export { LogEntryRowWrapper } from './log_entry_row'; export { LogEntryTimestampColumn } from './log_entry_timestamp_column'; export { ScrollableLogTextStreamView } from './scrollable_log_text_stream_view'; +export { LogEntryContextMenu } from './log_entry_context_menu'; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx index 4aa81846d90ef..adc1ce4d8c9fd 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx @@ -13,7 +13,8 @@ import { LogEntryColumnContent } from './log_entry_column'; interface LogEntryContextMenuItem { label: string; - onClick: () => void; + onClick: (e: React.MouseEvent) => void; + href?: string; } interface LogEntryContextMenuProps { @@ -40,9 +41,9 @@ export const LogEntryContextMenu: React.FC = ({ }) => { const closeMenuAndCall = useMemo(() => { return (callback: LogEntryContextMenuItem['onClick']) => { - return () => { + return (e: React.MouseEvent) => { onClose(); - callback(); + callback(e); }; }; }, [onClose]); @@ -60,7 +61,7 @@ export const LogEntryContextMenu: React.FC = ({ const wrappedItems = useMemo(() => { return items.map((item, i) => ( - + {item.label} )); diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator_list.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator_list.tsx index dafaa37006be0..47bb31ab4ae3e 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator_list.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator_list.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { LogEntryCategoryDataset } from '../../../../../../common/http_api/log_analysis'; import { getFriendlyNameForPartitionId } from '../../../../../../common/log_analysis'; -import { AnomalySeverityIndicator } from './anomaly_severity_indicator'; +import { AnomalySeverityIndicator } from '../../../../../components/logging/log_analysis_results/anomaly_severity_indicator'; export const AnomalySeverityIndicatorList: React.FunctionComponent<{ datasets: LogEntryCategoryDataset[]; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_details_row.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_details_row.tsx index c0728c0a55483..d939d6738c533 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_details_row.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_details_row.tsx @@ -5,14 +5,10 @@ */ import React, { useEffect } from 'react'; - -import { euiStyled } from '../../../../../../../observability/public'; -import { TimeRange } from '../../../../../../common/http_api/shared'; import { useLogEntryCategoryExamples } from '../../use_log_entry_category_examples'; +import { LogEntryExampleMessages } from '../../../../../components/logging/log_entry_examples/log_entry_examples'; +import { TimeRange } from '../../../../../../common/http_api/shared'; import { CategoryExampleMessage } from './category_example_message'; -import { CategoryExampleMessagesEmptyIndicator } from './category_example_messages_empty_indicator'; -import { CategoryExampleMessagesFailureIndicator } from './category_example_messages_failure_indicator'; -import { CategoryExampleMessagesLoadingIndicator } from './category_example_messages_loading_indicator'; const exampleCount = 5; @@ -39,30 +35,21 @@ export const CategoryDetailsRow: React.FunctionComponent<{ }, [getLogEntryCategoryExamples]); return ( - - {isLoadingLogEntryCategoryExamples ? ( - - ) : hasFailedLoadingLogEntryCategoryExamples ? ( - - ) : logEntryCategoryExamples.length === 0 ? ( - - ) : ( - logEntryCategoryExamples.map((categoryExample, categoryExampleIndex) => ( - - )) - )} - + 0} + exampleCount={exampleCount} + onReload={getLogEntryCategoryExamples} + > + {logEntryCategoryExamples.map((example, exampleIndex) => ( + + ))} + ); }; - -const CategoryExampleMessages = euiStyled.div` - align-items: stretch; - flex-direction: column; - flex: 1 0 0%; - overflow: hidden; -`; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx index a1d3d56beee2c..c527b8c49d099 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx @@ -4,86 +4,129 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiStat } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiStat } from '@elastic/eui'; import numeral from '@elastic/numeral'; import { i18n } from '@kbn/i18n'; -import React, { useMemo } from 'react'; - +import React from 'react'; +import { useMount } from 'react-use'; import { TimeRange } from '../../../../../../common/http_api/shared/time_range'; -import { AnalyzeInMlButton } from '../../../../../components/logging/log_analysis_results'; -import { LogEntryRateResults } from '../../use_log_entry_rate_results'; -import { - getAnnotationsForPartition, - getLogEntryRateSeriesForPartition, - getTotalNumberOfLogEntriesForPartition, -} from '../helpers/data_formatters'; -import { AnomaliesChart } from './chart'; +import { AnomalyRecord } from '../../use_log_entry_rate_results'; +import { useLogEntryRateModuleContext } from '../../use_log_entry_rate_module'; +import { useLogEntryRateExamples } from '../../use_log_entry_rate_examples'; +import { LogEntryExampleMessages } from '../../../../../components/logging/log_entry_examples/log_entry_examples'; +import { LogEntryRateExampleMessage, LogEntryRateExampleMessageHeaders } from './log_entry_example'; +import { euiStyled } from '../../../../../../../observability/public'; + +const EXAMPLE_COUNT = 5; + +const examplesTitle = i18n.translate('xpack.infra.logs.analysis.anomaliesTableExamplesTitle', { + defaultMessage: 'Example log entries', +}); export const AnomaliesTableExpandedRow: React.FunctionComponent<{ - partitionId: string; - results: LogEntryRateResults; - setTimeRange: (timeRange: TimeRange) => void; + anomaly: AnomalyRecord; timeRange: TimeRange; jobId: string; -}> = ({ results, timeRange, setTimeRange, partitionId, jobId }) => { - const logEntryRateSeries = useMemo( - () => - results?.histogramBuckets ? getLogEntryRateSeriesForPartition(results, partitionId) : [], - /* eslint-disable-next-line react-hooks/exhaustive-deps */ - [results, partitionId] - ); - const anomalyAnnotations = useMemo( - () => - results?.histogramBuckets - ? getAnnotationsForPartition(results, partitionId) - : { - warning: [], - minor: [], - major: [], - critical: [], - }, - /* eslint-disable-next-line react-hooks/exhaustive-deps */ - [results, partitionId] - ); - const totalNumberOfLogEntries = useMemo( - () => - results?.histogramBuckets - ? getTotalNumberOfLogEntriesForPartition(results, partitionId) - : undefined, - /* eslint-disable-next-line react-hooks/exhaustive-deps */ - [results, partitionId] - ); +}> = ({ anomaly, timeRange, jobId }) => { + const { + sourceConfiguration: { sourceId }, + } = useLogEntryRateModuleContext(); + + const { + getLogEntryRateExamples, + hasFailedLoadingLogEntryRateExamples, + isLoadingLogEntryRateExamples, + logEntryRateExamples, + } = useLogEntryRateExamples({ + dataset: anomaly.partitionId, + endTime: anomaly.startTime + anomaly.duration, + exampleCount: EXAMPLE_COUNT, + sourceId, + startTime: anomaly.startTime, + }); + + useMount(() => { + getLogEntryRateExamples(); + }); + return ( - - - - - - - - - - - - - - - + <> + + + +

{examplesTitle}

+ + 0} + exampleCount={EXAMPLE_COUNT} + onReload={getLogEntryRateExamples} + > + {logEntryRateExamples.length > 0 ? ( + <> + + {logEntryRateExamples.map((example, exampleIndex) => ( + + ))} + + ) : null} + + + + + + + + + + + + + + ); }; + +const ExpandedContentWrapper = euiStyled(EuiFlexGroup)` + overflow: hidden; +`; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx index 5ff3f318629f4..a2d37455eac1d 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx @@ -9,23 +9,15 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, - EuiStat, EuiTitle, EuiLoadingSpinner, } from '@elastic/eui'; -import numeral from '@elastic/numeral'; import { i18n } from '@kbn/i18n'; import React, { useMemo } from 'react'; - import { euiStyled } from '../../../../../../../observability/public'; import { LogEntryRateResults } from '../../use_log_entry_rate_results'; import { TimeRange } from '../../../../../../common/http_api/shared/time_range'; -import { formatAnomalyScore } from '../../../../../../common/log_analysis'; -import { - getAnnotationsForAll, - getLogEntryRateCombinedSeries, - getTopAnomalyScoreAcrossAllPartitions, -} from '../helpers/data_formatters'; +import { getAnnotationsForAll, getLogEntryRateCombinedSeries } from '../helpers/data_formatters'; import { AnomaliesChart } from './chart'; import { AnomaliesTable } from './table'; import { RecreateJobButton } from '../../../../../components/logging/log_analysis_job_status'; @@ -67,14 +59,6 @@ export const AnomaliesResults: React.FunctionComponent<{ [results] ); - const topAnomalyScore = useMemo( - () => - results && results.histogramBuckets - ? getTopAnomalyScoreAcrossAllPartitions(results) - : undefined, - [results] - ); - return ( <> @@ -124,7 +108,7 @@ export const AnomaliesResults: React.FunctionComponent<{ ) : ( <> - + - - - - ; + interface ParsedAnnotationDetails { anomalyScoresByPartition: Array<{ partitionName: string; maximumAnomalyScore: number }>; } @@ -222,10 +189,3 @@ const renderAnnotationTooltip = (details?: string) => { const TooltipWrapper = euiStyled('div')` white-space: nowrap; `; - -const loadingAriaLabel = i18n.translate( - 'xpack.infra.logs.analysis.anomaliesSectionLoadingAriaLabel', - { defaultMessage: 'Loading anomalies' } -); - -const LoadingOverlayContent = () => ; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx new file mode 100644 index 0000000000000..96f665b3693ca --- /dev/null +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx @@ -0,0 +1,291 @@ +/* + * 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, useCallback, useState } from 'react'; +import moment from 'moment'; +import { encode } from 'rison-node'; +import { i18n } from '@kbn/i18n'; +import { euiStyled } from '../../../../../../../observability/public'; +import { getFriendlyNameForPartitionId } from '../../../../../../common/log_analysis'; +import { + LogEntryColumn, + LogEntryFieldColumn, + LogEntryMessageColumn, + LogEntryRowWrapper, + LogEntryTimestampColumn, + LogEntryContextMenu, + LogEntryColumnWidths, + iconColumnId, +} from '../../../../../components/logging/log_text_stream'; +import { + LogColumnHeadersWrapper, + LogColumnHeader, +} from '../../../../../components/logging/log_text_stream/column_headers'; +import { useLinkProps } from '../../../../../hooks/use_link_props'; +import { TimeRange } from '../../../../../../common/http_api/shared/time_range'; +import { partitionField } from '../../../../../../common/log_analysis/job_parameters'; +import { getEntitySpecificSingleMetricViewerLink } from '../../../../../components/logging/log_analysis_results/analyze_in_ml_button'; +import { LogEntryRateExample } from '../../../../../../common/http_api/log_analysis/results'; +import { + LogColumnConfiguration, + isTimestampLogColumnConfiguration, + isFieldLogColumnConfiguration, + isMessageLogColumnConfiguration, +} from '../../../../../utils/source_configuration'; +import { localizedDate } from '../../../../../../common/formatters/datetime'; + +export const exampleMessageScale = 'medium' as const; +export const exampleTimestampFormat = 'time' as const; + +const MENU_LABEL = i18n.translate('xpack.infra.logAnomalies.logEntryExamplesMenuLabel', { + defaultMessage: 'View actions for log entry', +}); + +const VIEW_IN_STREAM_LABEL = i18n.translate( + 'xpack.infra.logs.analysis.logEntryExamplesViewInStreamLabel', + { + defaultMessage: 'View in stream', + } +); + +const VIEW_ANOMALY_IN_ML_LABEL = i18n.translate( + 'xpack.infra.logs.analysis.logEntryExamplesViewAnomalyInMlLabel', + { + defaultMessage: 'View anomaly in machine learning', + } +); + +type Props = LogEntryRateExample & { + timeRange: TimeRange; + jobId: string; +}; + +export const LogEntryRateExampleMessage: React.FunctionComponent = ({ + id, + dataset, + message, + timestamp, + tiebreaker, + timeRange, + jobId, +}) => { + const [isHovered, setIsHovered] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const openMenu = useCallback(() => setIsMenuOpen(true), []); + const closeMenu = useCallback(() => setIsMenuOpen(false), []); + const setItemIsHovered = useCallback(() => setIsHovered(true), []); + const setItemIsNotHovered = useCallback(() => setIsHovered(false), []); + + // the dataset must be encoded for the field column and the empty value must + // be turned into a user-friendly value + const encodedDatasetFieldValue = useMemo( + () => JSON.stringify(getFriendlyNameForPartitionId(dataset)), + [dataset] + ); + + const viewInStreamLinkProps = useLinkProps({ + app: 'logs', + pathname: 'stream', + search: { + logPosition: encode({ + end: moment(timeRange.endTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'), + position: { tiebreaker, time: timestamp }, + start: moment(timeRange.startTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'), + streamLive: false, + }), + flyoutOptions: encode({ + surroundingLogsId: id, + }), + logFilter: encode({ + expression: `${partitionField}: ${dataset}`, + kind: 'kuery', + }), + }, + }); + + const viewAnomalyInMachineLearningLinkProps = useLinkProps( + getEntitySpecificSingleMetricViewerLink(jobId, timeRange, { + [partitionField]: dataset, + }) + ); + + const menuItems = useMemo(() => { + if (!viewInStreamLinkProps.onClick || !viewAnomalyInMachineLearningLinkProps.onClick) { + return undefined; + } + + return [ + { + label: VIEW_IN_STREAM_LABEL, + onClick: viewInStreamLinkProps.onClick, + href: viewInStreamLinkProps.href, + }, + { + label: VIEW_ANOMALY_IN_ML_LABEL, + onClick: viewAnomalyInMachineLearningLinkProps.onClick, + href: viewAnomalyInMachineLearningLinkProps.href, + }, + ]; + }, [viewInStreamLinkProps, viewAnomalyInMachineLearningLinkProps]); + + return ( + + + + + + + + + + + + {(isHovered || isMenuOpen) && menuItems ? ( + + ) : null} + + + ); +}; + +const noHighlights: never[] = []; +const timestampColumnId = 'log-entry-example-timestamp-column' as const; +const messageColumnId = 'log-entry-examples-message-column' as const; +const datasetColumnId = 'log-entry-examples-dataset-column' as const; + +const DETAIL_FLYOUT_ICON_MIN_WIDTH = 32; +const COLUMN_PADDING = 8; + +export const columnWidths: LogEntryColumnWidths = { + [timestampColumnId]: { + growWeight: 0, + shrinkWeight: 0, + // w_score - w_padding = 130 px - 8 px + baseWidth: '122px', + }, + [messageColumnId]: { + growWeight: 1, + shrinkWeight: 0, + baseWidth: '0%', + }, + [datasetColumnId]: { + growWeight: 0, + shrinkWeight: 0, + baseWidth: '250px', + }, + [iconColumnId]: { + growWeight: 0, + shrinkWeight: 0, + baseWidth: `${DETAIL_FLYOUT_ICON_MIN_WIDTH + 2 * COLUMN_PADDING}px`, + }, +}; + +export const exampleMessageColumnConfigurations: LogColumnConfiguration[] = [ + { + timestampColumn: { + id: timestampColumnId, + }, + }, + { + messageColumn: { + id: messageColumnId, + }, + }, + { + fieldColumn: { + field: 'event.dataset', + id: datasetColumnId, + }, + }, +]; + +export const LogEntryRateExampleMessageHeaders: React.FunctionComponent<{ + dateTime: number; +}> = ({ dateTime }) => { + return ( + + <> + {exampleMessageColumnConfigurations.map((columnConfiguration) => { + if (isTimestampLogColumnConfiguration(columnConfiguration)) { + return ( + + {localizedDate(dateTime)} + + ); + } else if (isMessageLogColumnConfiguration(columnConfiguration)) { + return ( + + Message + + ); + } else if (isFieldLogColumnConfiguration(columnConfiguration)) { + return ( + + {columnConfiguration.fieldColumn.field} + + ); + } + })} + + {null} + + + + ); +}; + +const LogEntryRateExampleMessageHeadersWrapper = euiStyled(LogColumnHeadersWrapper)` + border-bottom: none; + box-shadow: none; + padding-right: 0; +`; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx index a9090a90c0b92..c70a456bfe06a 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx @@ -6,10 +6,10 @@ import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui'; import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services'; +import moment from 'moment'; import { i18n } from '@kbn/i18n'; import React, { useCallback, useMemo, useState } from 'react'; import { useSet } from 'react-use'; -import { euiStyled } from '../../../../../../../observability/public'; import { TimeRange } from '../../../../../../common/http_api/shared/time_range'; import { formatAnomalyScore, @@ -18,11 +18,16 @@ import { import { RowExpansionButton } from '../../../../../components/basic_table'; import { LogEntryRateResults } from '../../use_log_entry_rate_results'; import { AnomaliesTableExpandedRow } from './expanded_row'; +import { AnomalySeverityIndicator } from '../../../../../components/logging/log_analysis_results/anomaly_severity_indicator'; +import { useKibanaUiSetting } from '../../../../../utils/use_kibana_ui_setting'; interface TableItem { - partitionName: string; - partitionId: string; - topAnomalyScore: number; + id: string; + dataset: string; + datasetName: string; + anomalyScore: number; + anomalyMessage: string; + startTime: number; } interface SortingOptions { @@ -32,73 +37,132 @@ interface SortingOptions { }; } -const partitionColumnName = i18n.translate( - 'xpack.infra.logs.analysis.anomaliesTablePartitionColumnName', +interface PaginationOptions { + pageIndex: number; + pageSize: number; + totalItemCount: number; + pageSizeOptions: number[]; + hidePerPageOptions: boolean; +} + +const anomalyScoreColumnName = i18n.translate( + 'xpack.infra.logs.analysis.anomaliesTableAnomalyScoreColumnName', + { + defaultMessage: 'Anomaly score', + } +); + +const anomalyMessageColumnName = i18n.translate( + 'xpack.infra.logs.analysis.anomaliesTableAnomalyMessageName', { - defaultMessage: 'Partition', + defaultMessage: 'Anomaly', } ); -const maxAnomalyScoreColumnName = i18n.translate( - 'xpack.infra.logs.analysis.anomaliesTableMaxAnomalyScoreColumnName', +const anomalyStartTimeColumnName = i18n.translate( + 'xpack.infra.logs.analysis.anomaliesTableAnomalyStartTime', { - defaultMessage: 'Max anomaly score', + defaultMessage: 'Start time', } ); +const datasetColumnName = i18n.translate( + 'xpack.infra.logs.analysis.anomaliesTableAnomalyDatasetName', + { + defaultMessage: 'Dataset', + } +); + +const moreThanExpectedAnomalyMessage = i18n.translate( + 'xpack.infra.logs.analysis.anomaliesTableMoreThanExpectedAnomalyMessage', + { + defaultMessage: 'More log messages in this dataset than expected', + } +); + +const fewerThanExpectedAnomalyMessage = i18n.translate( + 'xpack.infra.logs.analysis.anomaliesTableFewerThanExpectedAnomalyMessage', + { + defaultMessage: 'Fewer log messages in this dataset than expected', + } +); + +const getAnomalyMessage = (actualRate: number, typicalRate: number): string => { + return actualRate < typicalRate + ? fewerThanExpectedAnomalyMessage + : moreThanExpectedAnomalyMessage; +}; + export const AnomaliesTable: React.FunctionComponent<{ results: LogEntryRateResults; setTimeRange: (timeRange: TimeRange) => void; timeRange: TimeRange; jobId: string; }> = ({ results, timeRange, setTimeRange, jobId }) => { + const [dateFormat] = useKibanaUiSetting('dateFormat', 'Y-MM-DD HH:mm:ss'); + const tableItems: TableItem[] = useMemo(() => { - return Object.entries(results.partitionBuckets).map(([key, value]) => { + return results.anomalies.map((anomaly) => { return { - // The real ID - partitionId: key, - // Note: EUI's table expanded rows won't work with a key of '' in itemIdToExpandedRowMap, so we have to use the friendly name here - partitionName: getFriendlyNameForPartitionId(key), - topAnomalyScore: formatAnomalyScore(value.topAnomalyScore), + id: anomaly.id, + dataset: anomaly.partitionId, + datasetName: getFriendlyNameForPartitionId(anomaly.partitionId), + anomalyScore: formatAnomalyScore(anomaly.anomalyScore), + anomalyMessage: getAnomalyMessage(anomaly.actualLogEntryRate, anomaly.typicalLogEntryRate), + startTime: anomaly.startTime, }; }); }, [results]); - const [expandedDatasetIds, { add: expandDataset, remove: collapseDataset }] = useSet( - new Set() - ); + const [expandedIds, { add: expandId, remove: collapseId }] = useSet(new Set()); const expandedDatasetRowContents = useMemo( () => - [...expandedDatasetIds].reduce>( - (aggregatedDatasetRows, datasetId) => { - return { - ...aggregatedDatasetRows, - [getFriendlyNameForPartitionId(datasetId)]: ( - - ), - }; - }, - {} - ), - [expandedDatasetIds, jobId, results, setTimeRange, timeRange] + [...expandedIds].reduce>((aggregatedDatasetRows, id) => { + const anomaly = results.anomalies.find((_anomaly) => _anomaly.id === id); + + return { + ...aggregatedDatasetRows, + [id]: anomaly ? ( + + ) : null, + }; + }, {}), + [expandedIds, results, timeRange, jobId] ); const [sorting, setSorting] = useState({ sort: { - field: 'topAnomalyScore', + field: 'anomalyScore', direction: 'desc', }, }); + const [_pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: 20, + totalItemCount: results.anomalies.length, + pageSizeOptions: [10, 20, 50], + hidePerPageOptions: false, + }); + + const paginationOptions = useMemo(() => { + return { + ..._pagination, + totalItemCount: results.anomalies.length, + }; + }, [_pagination, results]); + const handleTableChange = useCallback( - ({ sort = {} }) => { + ({ page = {}, sort = {} }) => { + const { index, size } = page; + setPagination((currentPagination) => { + return { + ...currentPagination, + pageIndex: index, + pageSize: size, + }; + }); const { field, direction } = sort; setSorting({ sort: { @@ -107,33 +171,58 @@ export const AnomaliesTable: React.FunctionComponent<{ }, }); }, - [setSorting] + [setSorting, setPagination] ); const sortedTableItems = useMemo(() => { let sortedItems: TableItem[] = []; - if (sorting.sort.field === 'partitionName') { - sortedItems = tableItems.sort((a, b) => (a.partitionId > b.partitionId ? 1 : -1)); - } else if (sorting.sort.field === 'topAnomalyScore') { - sortedItems = tableItems.sort((a, b) => a.topAnomalyScore - b.topAnomalyScore); + if (sorting.sort.field === 'datasetName') { + sortedItems = tableItems.sort((a, b) => (a.datasetName > b.datasetName ? 1 : -1)); + } else if (sorting.sort.field === 'anomalyScore') { + sortedItems = tableItems.sort((a, b) => a.anomalyScore - b.anomalyScore); + } else if (sorting.sort.field === 'startTime') { + sortedItems = tableItems.sort((a, b) => a.startTime - b.startTime); } + return sorting.sort.direction === 'asc' ? sortedItems : sortedItems.reverse(); }, [tableItems, sorting]); + const pageOfItems: TableItem[] = useMemo(() => { + const { pageIndex, pageSize } = paginationOptions; + return sortedTableItems.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize); + }, [paginationOptions, sortedTableItems]); + const columns: Array> = useMemo( () => [ { - field: 'partitionName', - name: partitionColumnName, + field: 'anomalyScore', + name: anomalyScoreColumnName, + sortable: true, + truncateText: true, + dataType: 'number' as const, + width: '130px', + render: (anomalyScore: number) => , + }, + { + field: 'anomalyMessage', + name: anomalyMessageColumnName, + sortable: false, + truncateText: true, + }, + { + field: 'startTime', + name: anomalyStartTimeColumnName, sortable: true, truncateText: true, + width: '230px', + render: (startTime: number) => moment(startTime).format(dateFormat), }, { - field: 'topAnomalyScore', - name: maxAnomalyScoreColumnName, + field: 'datasetName', + name: datasetColumnName, sortable: true, truncateText: true, - dataType: 'number' as const, + width: '200px', }, { align: RIGHT_ALIGNMENT, @@ -141,33 +230,28 @@ export const AnomaliesTable: React.FunctionComponent<{ isExpander: true, render: (item: TableItem) => ( ), }, ], - [collapseDataset, expandDataset, expandedDatasetIds] + [collapseId, expandId, expandedIds, dateFormat] ); return ( - ); }; - -const StyledEuiBasicTable: typeof EuiBasicTable = euiStyled(EuiBasicTable as any)` - & .euiTable { - table-layout: auto; - } -` as any; // eslint-disable-line @typescript-eslint/no-explicit-any diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/service_calls/get_log_entry_rate_examples.ts b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/service_calls/get_log_entry_rate_examples.ts new file mode 100644 index 0000000000000..d3b30da72af96 --- /dev/null +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/service_calls/get_log_entry_rate_examples.ts @@ -0,0 +1,47 @@ +/* + * 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 { fold } from 'fp-ts/lib/Either'; +import { pipe } from 'fp-ts/lib/pipeable'; +import { identity } from 'fp-ts/lib/function'; +import { npStart } from '../../../../legacy_singletons'; + +import { + getLogEntryRateExamplesRequestPayloadRT, + getLogEntryRateExamplesSuccessReponsePayloadRT, + LOG_ANALYSIS_GET_LOG_ENTRY_RATE_EXAMPLES_PATH, +} from '../../../../../common/http_api/log_analysis'; +import { createPlainError, throwErrors } from '../../../../../common/runtime_types'; + +export const callGetLogEntryRateExamplesAPI = async ( + sourceId: string, + startTime: number, + endTime: number, + dataset: string, + exampleCount: number +) => { + const response = await npStart.http.fetch(LOG_ANALYSIS_GET_LOG_ENTRY_RATE_EXAMPLES_PATH, { + method: 'POST', + body: JSON.stringify( + getLogEntryRateExamplesRequestPayloadRT.encode({ + data: { + dataset, + exampleCount, + sourceId, + timeRange: { + startTime, + endTime, + }, + }, + }) + ), + }); + + return pipe( + getLogEntryRateExamplesSuccessReponsePayloadRT.decode(response), + fold(throwErrors(createPlainError), identity) + ); +}; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_examples.ts b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_examples.ts new file mode 100644 index 0000000000000..12bcdb2a4b4d6 --- /dev/null +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_examples.ts @@ -0,0 +1,63 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { useMemo, useState } from 'react'; + +import { LogEntryRateExample } from '../../../../common/http_api'; +import { useTrackedPromise } from '../../../utils/use_tracked_promise'; +import { callGetLogEntryRateExamplesAPI } from './service_calls/get_log_entry_rate_examples'; + +export const useLogEntryRateExamples = ({ + dataset, + endTime, + exampleCount, + sourceId, + startTime, +}: { + dataset: string; + endTime: number; + exampleCount: number; + sourceId: string; + startTime: number; +}) => { + const [logEntryRateExamples, setLogEntryRateExamples] = useState([]); + + const [getLogEntryRateExamplesRequest, getLogEntryRateExamples] = useTrackedPromise( + { + cancelPreviousOn: 'creation', + createPromise: async () => { + return await callGetLogEntryRateExamplesAPI( + sourceId, + startTime, + endTime, + dataset, + exampleCount + ); + }, + onResolve: ({ data: { examples } }) => { + setLogEntryRateExamples(examples); + }, + }, + [dataset, endTime, exampleCount, sourceId, startTime] + ); + + const isLoadingLogEntryRateExamples = useMemo( + () => getLogEntryRateExamplesRequest.state === 'pending', + [getLogEntryRateExamplesRequest.state] + ); + + const hasFailedLoadingLogEntryRateExamples = useMemo( + () => getLogEntryRateExamplesRequest.state === 'rejected', + [getLogEntryRateExamplesRequest.state] + ); + + return { + getLogEntryRateExamples, + hasFailedLoadingLogEntryRateExamples, + isLoadingLogEntryRateExamples, + logEntryRateExamples, + }; +}; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_results.ts b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_results.ts index de2b873001cce..1cd27c64af53f 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_results.ts +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_results.ts @@ -10,6 +10,7 @@ import { GetLogEntryRateSuccessResponsePayload, LogEntryRateHistogramBucket, LogEntryRatePartition, + LogEntryRateAnomaly, } from '../../../../common/http_api/log_analysis'; import { useTrackedPromise } from '../../../utils/use_tracked_promise'; import { callGetLogEntryRateAPI } from './service_calls/get_log_entry_rate'; @@ -23,11 +24,16 @@ type PartitionRecord = Record< { buckets: PartitionBucket[]; topAnomalyScore: number; totalNumberOfLogEntries: number } >; +export type AnomalyRecord = LogEntryRateAnomaly & { + partitionId: string; +}; + export interface LogEntryRateResults { bucketDuration: number; totalNumberOfLogEntries: number; histogramBuckets: LogEntryRateHistogramBucket[]; partitionBuckets: PartitionRecord; + anomalies: AnomalyRecord[]; } export const useLogEntryRateResults = ({ @@ -55,6 +61,7 @@ export const useLogEntryRateResults = ({ totalNumberOfLogEntries: data.totalNumberOfLogEntries, histogramBuckets: data.histogramBuckets, partitionBuckets: formatLogEntryRateResultsByPartition(data), + anomalies: formatLogEntryRateResultsByAllAnomalies(data), }); }, onReject: () => { @@ -117,3 +124,23 @@ const formatLogEntryRateResultsByPartition = ( return resultsByPartition; }; + +const formatLogEntryRateResultsByAllAnomalies = ( + results: GetLogEntryRateSuccessResponsePayload['data'] +): AnomalyRecord[] => { + return results.histogramBuckets.reduce((anomalies, bucket) => { + return bucket.partitions.reduce((_anomalies, partition) => { + if (partition.anomalies.length > 0) { + partition.anomalies.forEach((anomaly) => { + _anomalies.push({ + partitionId: partition.partitionId, + ...anomaly, + }); + }); + return _anomalies; + } else { + return _anomalies; + } + }, anomalies); + }, []); +}; diff --git a/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts b/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts index 46a0edf75b756..65ea53a8465bb 100644 --- a/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts +++ b/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts @@ -4,90 +4,220 @@ * you may not use this file except in compliance with the Elastic License. */ -import { InfraClientCoreSetup } from '../types'; -import { LogsFetchDataResponse } from '../../../observability/public'; +import { encode } from 'rison-node'; +import { i18n } from '@kbn/i18n'; +import { DEFAULT_SOURCE_ID } from '../../common/constants'; +import { InfraClientCoreSetup, InfraClientStartDeps } from '../types'; +import { + FetchData, + LogsFetchDataResponse, + HasData, + FetchDataParams, +} from '../../../observability/public'; +import { callFetchLogSourceConfigurationAPI } from '../containers/logs/log_source/api/fetch_log_source_configuration'; +import { callFetchLogSourceStatusAPI } from '../containers/logs/log_source/api/fetch_log_source_status'; -export function getLogsHasDataFetcher(getStartServices: InfraClientCoreSetup['getStartServices']) { - return async () => { - // if you need the data plugin, this is how you get it - // const [, startPlugins] = await getStartServices(); - // const { data } = startPlugins; +interface StatsAggregation { + buckets: Array<{ key: string; doc_count: number }>; +} + +interface SeriesAggregation { + buckets: Array<{ + key_as_string: string; + key: number; + doc_count: number; + dataset: StatsAggregation; + }>; +} + +interface LogParams { + index: string; + timestampField: string; +} - // if you need a core dep, we need to pass in more than just getStartServices +type StatsAndSeries = Pick; - // perform query - return true; +export function getLogsHasDataFetcher( + getStartServices: InfraClientCoreSetup['getStartServices'] +): HasData { + return async () => { + const [core] = await getStartServices(); + const sourceStatus = await callFetchLogSourceStatusAPI(DEFAULT_SOURCE_ID, core.http.fetch); + return sourceStatus.data.logIndicesExist; }; } export function getLogsOverviewDataFetcher( getStartServices: InfraClientCoreSetup['getStartServices'] -) { - return async (): Promise => { - // if you need the data plugin, this is how you get it - // const [, startPlugins] = await getStartServices(); - // const { data } = startPlugins; +): FetchData { + return async (params) => { + const [core, startPlugins] = await getStartServices(); + const { data } = startPlugins; + + const sourceConfiguration = await callFetchLogSourceConfigurationAPI( + DEFAULT_SOURCE_ID, + core.http.fetch + ); + + const { stats, series } = await fetchLogsOverview( + { + index: sourceConfiguration.data.configuration.logAlias, + timestampField: sourceConfiguration.data.configuration.fields.timestamp, + }, + params, + data + ); - // if you need a core dep, we need to pass in more than just getStartServices + const timeSpanInMinutes = + (Date.parse(params.endTime).valueOf() - Date.parse(params.startTime).valueOf()) / (1000 * 60); - // perform query return { - title: 'Log rate', - appLink: 'TBD', // TODO: what format should this be in, relative I assume? - stats: { - nginx: { - type: 'number', - label: 'nginx', - value: 345341, - }, - 'elasticsearch.audit': { - type: 'number', - label: 'elasticsearch.audit', - value: 164929, + title: i18n.translate('xpack.infra.logs.logOverview.logOverviewTitle', { + defaultMessage: 'Logs', + }), + appLink: `/app/logs/stream?logPosition=(end:${encode(params.endTime)},start:${encode( + params.startTime + )})`, + stats: normalizeStats(stats, timeSpanInMinutes), + series: normalizeSeries(series), + }; + }; +} + +async function fetchLogsOverview( + logParams: LogParams, + params: FetchDataParams, + dataPlugin: InfraClientStartDeps['data'] +): Promise { + const esSearcher = dataPlugin.search.getSearchStrategy('es'); + return new Promise((resolve, reject) => { + esSearcher + .search({ + params: { + index: logParams.index, + body: { + size: 0, + query: buildLogOverviewQuery(logParams, params), + aggs: buildLogOverviewAggregations(logParams, params), + }, }, - 'haproxy.log': { - type: 'number', - label: 'haproxy.log', - value: 51101, + }) + .subscribe( + (response) => { + if (response.rawResponse.aggregations) { + resolve(processLogsOverviewAggregations(response.rawResponse.aggregations)); + } else { + resolve({ stats: {}, series: {} }); + } }, + (error) => reject(error) + ); + }); +} + +function buildLogOverviewQuery(logParams: LogParams, params: FetchDataParams) { + return { + range: { + [logParams.timestampField]: { + gt: params.startTime, + lte: params.endTime, + format: 'strict_date_optional_time', }, - // Note: My understanding is that these series coordinates will be - // combined into objects that look like: - // { x: timestamp, y: value, g: label (e.g. nginx) } - // so they fit the stacked bar chart API - // https://elastic.github.io/elastic-charts/?path=/story/bar-chart--stacked-with-axis-and-legend - series: { - nginx: { - label: 'nginx', - coordinates: [ - { x: 1593000000000, y: 10014 }, - { x: 1593000900000, y: 12827 }, - { x: 1593001800000, y: 2946 }, - { x: 1593002700000, y: 14298 }, - { x: 1593003600000, y: 4096 }, - ], - }, - 'elasticsearch.audit': { - label: 'elasticsearch.audit', - coordinates: [ - { x: 1593000000000, y: 5676 }, - { x: 1593000900000, y: 6783 }, - { x: 1593001800000, y: 2394 }, - { x: 1593002700000, y: 4554 }, - { x: 1593003600000, y: 5659 }, - ], - }, - 'haproxy.log': { - label: 'haproxy.log', - coordinates: [ - { x: 1593000000000, y: 9085 }, - { x: 1593000900000, y: 9002 }, - { x: 1593001800000, y: 3940 }, - { x: 1593002700000, y: 5451 }, - { x: 1593003600000, y: 9133 }, - ], + }, + }; +} + +function buildLogOverviewAggregations(logParams: LogParams, params: FetchDataParams) { + return { + stats: { + terms: { + field: 'event.dataset', + size: 4, + }, + }, + series: { + date_histogram: { + field: logParams.timestampField, + fixed_interval: params.bucketSize, + }, + aggs: { + dataset: { + terms: { + field: 'event.dataset', + size: 4, + }, }, }, - }; + }, + }; +} + +function processLogsOverviewAggregations(aggregations: { + stats: StatsAggregation; + series: SeriesAggregation; +}): StatsAndSeries { + const processedStats = aggregations.stats.buckets.reduce( + (result, bucket) => { + result[bucket.key] = { + type: 'number', + label: bucket.key, + value: bucket.doc_count, + }; + + return result; + }, + {} + ); + + const processedSeries = aggregations.series.buckets.reduce( + (result, bucket) => { + const x = bucket.key; // the timestamp of the bucket + bucket.dataset.buckets.forEach((b) => { + const label = b.key; + result[label] = result[label] || { label, coordinates: [] }; + result[label].coordinates.push({ x, y: b.doc_count }); + }); + + return result; + }, + {} + ); + + return { + stats: processedStats, + series: processedSeries, }; } + +function normalizeStats( + stats: LogsFetchDataResponse['stats'], + timeSpanInMinutes: number +): LogsFetchDataResponse['stats'] { + return Object.keys(stats).reduce((normalized, key) => { + normalized[key] = { + ...stats[key], + value: stats[key].value / timeSpanInMinutes, + }; + return normalized; + }, {}); +} + +function normalizeSeries(series: LogsFetchDataResponse['series']): LogsFetchDataResponse['series'] { + const seriesKeys = Object.keys(series); + const timestamps = seriesKeys.flatMap((key) => series[key].coordinates.map((c) => c.x)); + const [first, second] = [...new Set(timestamps)].sort(); + const timeSpanInMinutes = (second - first) / (1000 * 60); + + return seriesKeys.reduce((normalized, key) => { + normalized[key] = { + ...series[key], + coordinates: series[key].coordinates.map((c) => { + if (c.y) { + return { ...c, y: c.y / timeSpanInMinutes }; + } + return c; + }), + }; + return normalized; + }, {}); +} diff --git a/x-pack/plugins/infra/public/utils/logs_overview_fetches.test.ts b/x-pack/plugins/infra/public/utils/logs_overview_fetches.test.ts new file mode 100644 index 0000000000000..6f9e41fbd08f3 --- /dev/null +++ b/x-pack/plugins/infra/public/utils/logs_overview_fetches.test.ts @@ -0,0 +1,75 @@ +/* + * 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 { coreMock } from 'src/core/public/mocks'; +import { dataPluginMock } from 'src/plugins/data/public/mocks'; +import { CoreStart } from 'kibana/public'; +import { getLogsHasDataFetcher } from './logs_overview_fetchers'; +import { InfraClientStartDeps, InfraClientStartExports } from '../types'; +import { callFetchLogSourceStatusAPI } from '../containers/logs/log_source/api/fetch_log_source_status'; + +// Note +// Calls to `.mock*` functions will fail the typecheck because how jest does the mocking. +// The calls will be preluded with a `@ts-expect-error` +jest.mock('../containers/logs/log_source/api/fetch_log_source_status'); + +function setup() { + const core = coreMock.createStart(); + const data = dataPluginMock.createStartContract(); + + const mockedGetStartServices = jest.fn(() => { + const deps = { data }; + return Promise.resolve([ + core as CoreStart, + deps as InfraClientStartDeps, + void 0 as InfraClientStartExports, + ]) as Promise<[CoreStart, InfraClientStartDeps, InfraClientStartExports]>; + }); + return { core, mockedGetStartServices }; +} + +describe('Logs UI Observability Homepage Functions', () => { + describe('getLogsHasDataFetcher()', () => { + beforeEach(() => { + // @ts-expect-error + callFetchLogSourceStatusAPI.mockReset(); + }); + it('should return true when some index is present', async () => { + const { mockedGetStartServices } = setup(); + + // @ts-expect-error + callFetchLogSourceStatusAPI.mockResolvedValue({ + data: { logIndexFields: [], logIndicesExist: true }, + }); + + const hasData = getLogsHasDataFetcher(mockedGetStartServices); + const response = await hasData(); + + expect(callFetchLogSourceStatusAPI).toHaveBeenCalledTimes(1); + expect(response).toBe(true); + }); + + it('should return false when no index is present', async () => { + const { mockedGetStartServices } = setup(); + + // @ts-expect-error + callFetchLogSourceStatusAPI.mockResolvedValue({ + data: { logIndexFields: [], logIndicesExist: false }, + }); + + const hasData = getLogsHasDataFetcher(mockedGetStartServices); + const response = await hasData(); + + expect(callFetchLogSourceStatusAPI).toHaveBeenCalledTimes(1); + expect(response).toBe(false); + }); + }); + + describe('getLogsOverviewDataFetcher()', () => { + it.skip('should work', async () => { + // Pending + }); + }); +}); diff --git a/x-pack/plugins/infra/server/infra_server.ts b/x-pack/plugins/infra/server/infra_server.ts index 6fbdeff950d1a..8af37a36ef745 100644 --- a/x-pack/plugins/infra/server/infra_server.ts +++ b/x-pack/plugins/infra/server/infra_server.ts @@ -15,6 +15,7 @@ import { initGetLogEntryCategoryDatasetsRoute, initGetLogEntryCategoryExamplesRoute, initGetLogEntryRateRoute, + initGetLogEntryRateExamplesRoute, initValidateLogAnalysisDatasetsRoute, initValidateLogAnalysisIndicesRoute, } from './routes/log_analysis'; @@ -56,6 +57,7 @@ export const initInfraServer = (libs: InfraBackendLibs) => { initValidateLogAnalysisDatasetsRoute(libs); initValidateLogAnalysisIndicesRoute(libs); initLogEntriesRoute(libs); + initGetLogEntryRateExamplesRoute(libs); initLogEntriesHighlightsRoute(libs); initLogEntriesSummaryRoute(libs); initLogEntriesSummaryHighlightsRoute(libs); diff --git a/x-pack/plugins/infra/server/lib/log_analysis/log_entry_rate_analysis.ts b/x-pack/plugins/infra/server/lib/log_analysis/log_entry_rate_analysis.ts index 125cc2b196e09..290cf03b67365 100644 --- a/x-pack/plugins/infra/server/lib/log_analysis/log_entry_rate_analysis.ts +++ b/x-pack/plugins/infra/server/lib/log_analysis/log_entry_rate_analysis.ts @@ -7,16 +7,30 @@ import { pipe } from 'fp-ts/lib/pipeable'; import { map, fold } from 'fp-ts/lib/Either'; import { identity } from 'fp-ts/lib/function'; -import { getJobId } from '../../../common/log_analysis'; +import { RequestHandlerContext } from 'src/core/server'; import { throwErrors, createPlainError } from '../../../common/runtime_types'; -import { NoLogAnalysisResultsIndexError } from './errors'; import { logRateModelPlotResponseRT, createLogEntryRateQuery, LogRateModelPlotBucket, CompositeTimestampPartitionKey, } from './queries'; -import { MlSystem } from '../../types'; +import { startTracingSpan } from '../../../common/performance_tracing'; +import { decodeOrThrow } from '../../../common/runtime_types'; +import { getJobId, jobCustomSettingsRT } from '../../../common/log_analysis'; +import { + createLogEntryRateExamplesQuery, + logEntryRateExamplesResponseRT, +} from './queries/log_entry_rate_examples'; +import { + InsufficientLogAnalysisMlJobConfigurationError, + NoLogAnalysisMlJobError, + NoLogAnalysisResultsIndexError, +} from './errors'; +import { InfraSource } from '../sources'; +import type { MlSystem } from '../../types'; +import { InfraRequestHandlerContext } from '../../types'; +import { KibanaFramework } from '../adapters/framework/kibana_framework_adapter'; const COMPOSITE_AGGREGATION_BATCH_SIZE = 1000; @@ -73,6 +87,7 @@ export async function getLogEntryRateBuckets( partitions: Array<{ analysisBucketCount: number; anomalies: Array<{ + id: string; actualLogEntryRate: number; anomalyScore: number; duration: number; @@ -91,7 +106,8 @@ export async function getLogEntryRateBuckets( const partition = { analysisBucketCount: timestampPartitionBucket.filter_model_plot.doc_count, anomalies: timestampPartitionBucket.filter_records.top_hits_record.hits.hits.map( - ({ _source: record }) => ({ + ({ _id, _source: record }) => ({ + id: _id, actualLogEntryRate: record.actual[0], anomalyScore: record.record_score, duration: record.bucket_span * 1000, @@ -127,3 +143,130 @@ export async function getLogEntryRateBuckets( } }, []); } + +export async function getLogEntryRateExamples( + context: RequestHandlerContext & { infra: Required }, + sourceId: string, + startTime: number, + endTime: number, + dataset: string, + exampleCount: number, + sourceConfiguration: InfraSource, + callWithRequest: KibanaFramework['callWithRequest'] +) { + const finalizeLogEntryRateExamplesSpan = startTracingSpan( + 'get log entry rate example log entries' + ); + + const jobId = getJobId(context.infra.spaceId, sourceId, 'log-entry-rate'); + + const { + mlJob, + timing: { spans: fetchMlJobSpans }, + } = await fetchMlJob(context, jobId); + + const customSettings = decodeOrThrow(jobCustomSettingsRT)(mlJob.custom_settings); + const indices = customSettings?.logs_source_config?.indexPattern; + const timestampField = customSettings?.logs_source_config?.timestampField; + const tiebreakerField = sourceConfiguration.configuration.fields.tiebreaker; + + if (indices == null || timestampField == null) { + throw new InsufficientLogAnalysisMlJobConfigurationError( + `Failed to find index configuration for ml job ${jobId}` + ); + } + + const { + examples, + timing: { spans: fetchLogEntryRateExamplesSpans }, + } = await fetchLogEntryRateExamples( + context, + indices, + timestampField, + tiebreakerField, + startTime, + endTime, + dataset, + exampleCount, + callWithRequest + ); + + const logEntryRateExamplesSpan = finalizeLogEntryRateExamplesSpan(); + + return { + data: examples, + timing: { + spans: [logEntryRateExamplesSpan, ...fetchMlJobSpans, ...fetchLogEntryRateExamplesSpans], + }, + }; +} + +export async function fetchLogEntryRateExamples( + context: RequestHandlerContext & { infra: Required }, + indices: string, + timestampField: string, + tiebreakerField: string, + startTime: number, + endTime: number, + dataset: string, + exampleCount: number, + callWithRequest: KibanaFramework['callWithRequest'] +) { + const finalizeEsSearchSpan = startTracingSpan('Fetch log rate examples from ES'); + + const { + hits: { hits }, + } = decodeOrThrow(logEntryRateExamplesResponseRT)( + await callWithRequest( + context, + 'search', + createLogEntryRateExamplesQuery( + indices, + timestampField, + tiebreakerField, + startTime, + endTime, + dataset, + exampleCount + ) + ) + ); + + const esSearchSpan = finalizeEsSearchSpan(); + + return { + examples: hits.map((hit) => ({ + id: hit._id, + dataset, + message: hit._source.message ?? '', + timestamp: hit.sort[0], + tiebreaker: hit.sort[1], + })), + timing: { + spans: [esSearchSpan], + }, + }; +} + +async function fetchMlJob( + context: RequestHandlerContext & { infra: Required }, + logEntryRateJobId: string +) { + const finalizeMlGetJobSpan = startTracingSpan('Fetch ml job from ES'); + const { + jobs: [mlJob], + } = await context.infra.mlAnomalyDetectors.jobs(logEntryRateJobId); + + const mlGetJobSpan = finalizeMlGetJobSpan(); + + if (mlJob == null) { + throw new NoLogAnalysisMlJobError(`Failed to find ml job ${logEntryRateJobId}.`); + } + + return { + mlJob, + timing: { + spans: [mlGetJobSpan], + }, + }; +} diff --git a/x-pack/plugins/infra/server/lib/log_analysis/queries/log_entry_rate.ts b/x-pack/plugins/infra/server/lib/log_analysis/queries/log_entry_rate.ts index 269850e292636..8d9c586b2ef67 100644 --- a/x-pack/plugins/infra/server/lib/log_analysis/queries/log_entry_rate.ts +++ b/x-pack/plugins/infra/server/lib/log_analysis/queries/log_entry_rate.ts @@ -143,6 +143,7 @@ export const logRateModelPlotBucketRT = rt.type({ hits: rt.type({ hits: rt.array( rt.type({ + _id: rt.string, _source: logRateMlRecordRT, }) ), diff --git a/x-pack/plugins/infra/server/lib/log_analysis/queries/log_entry_rate_examples.ts b/x-pack/plugins/infra/server/lib/log_analysis/queries/log_entry_rate_examples.ts new file mode 100644 index 0000000000000..ef06641caf797 --- /dev/null +++ b/x-pack/plugins/infra/server/lib/log_analysis/queries/log_entry_rate_examples.ts @@ -0,0 +1,72 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import * as rt from 'io-ts'; + +import { commonSearchSuccessResponseFieldsRT } from '../../../utils/elasticsearch_runtime_types'; +import { defaultRequestParameters } from './common'; +import { partitionField } from '../../../../common/log_analysis'; + +export const createLogEntryRateExamplesQuery = ( + indices: string, + timestampField: string, + tiebreakerField: string, + startTime: number, + endTime: number, + dataset: string, + exampleCount: number +) => ({ + ...defaultRequestParameters, + body: { + query: { + bool: { + filter: [ + { + range: { + [timestampField]: { + gte: startTime, + lte: endTime, + }, + }, + }, + { + term: { + [partitionField]: dataset, + }, + }, + ], + }, + }, + sort: [{ [timestampField]: 'asc' }, { [tiebreakerField]: 'asc' }], + }, + _source: ['event.dataset', 'message'], + index: indices, + size: exampleCount, +}); + +export const logEntryRateExampleHitRT = rt.type({ + _id: rt.string, + _source: rt.partial({ + event: rt.partial({ + dataset: rt.string, + }), + message: rt.string, + }), + sort: rt.tuple([rt.number, rt.number]), +}); + +export type LogEntryRateExampleHit = rt.TypeOf; + +export const logEntryRateExamplesResponseRT = rt.intersection([ + commonSearchSuccessResponseFieldsRT, + rt.type({ + hits: rt.type({ + hits: rt.array(logEntryRateExampleHitRT), + }), + }), +]); + +export type LogEntryRateExamplesResponse = rt.TypeOf; diff --git a/x-pack/plugins/infra/server/routes/log_analysis/results/index.ts b/x-pack/plugins/infra/server/routes/log_analysis/results/index.ts index 15615046bdd6a..30b6be435837b 100644 --- a/x-pack/plugins/infra/server/routes/log_analysis/results/index.ts +++ b/x-pack/plugins/infra/server/routes/log_analysis/results/index.ts @@ -8,3 +8,4 @@ export * from './log_entry_categories'; export * from './log_entry_category_datasets'; export * from './log_entry_category_examples'; export * from './log_entry_rate'; +export * from './log_entry_rate_examples'; diff --git a/x-pack/plugins/infra/server/routes/log_analysis/results/log_entry_rate_examples.ts b/x-pack/plugins/infra/server/routes/log_analysis/results/log_entry_rate_examples.ts new file mode 100644 index 0000000000000..b8ebcc66911dc --- /dev/null +++ b/x-pack/plugins/infra/server/routes/log_analysis/results/log_entry_rate_examples.ts @@ -0,0 +1,82 @@ +/* + * 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 Boom from 'boom'; +import { createValidationFunction } from '../../../../common/runtime_types'; +import { InfraBackendLibs } from '../../../lib/infra_types'; +import { NoLogAnalysisResultsIndexError, getLogEntryRateExamples } from '../../../lib/log_analysis'; +import { assertHasInfraMlPlugins } from '../../../utils/request_context'; +import { + getLogEntryRateExamplesRequestPayloadRT, + getLogEntryRateExamplesSuccessReponsePayloadRT, + LOG_ANALYSIS_GET_LOG_ENTRY_RATE_EXAMPLES_PATH, +} from '../../../../common/http_api/log_analysis'; + +export const initGetLogEntryRateExamplesRoute = ({ framework, sources }: InfraBackendLibs) => { + framework.registerRoute( + { + method: 'post', + path: LOG_ANALYSIS_GET_LOG_ENTRY_RATE_EXAMPLES_PATH, + validate: { + body: createValidationFunction(getLogEntryRateExamplesRequestPayloadRT), + }, + }, + framework.router.handleLegacyErrors(async (requestContext, request, response) => { + const { + data: { + dataset, + exampleCount, + sourceId, + timeRange: { startTime, endTime }, + }, + } = request.body; + + const sourceConfiguration = await sources.getSourceConfiguration( + requestContext.core.savedObjects.client, + sourceId + ); + + try { + assertHasInfraMlPlugins(requestContext); + + const { data: logEntryRateExamples, timing } = await getLogEntryRateExamples( + requestContext, + sourceId, + startTime, + endTime, + dataset, + exampleCount, + sourceConfiguration, + framework.callWithRequest + ); + + return response.ok({ + body: getLogEntryRateExamplesSuccessReponsePayloadRT.encode({ + data: { + examples: logEntryRateExamples, + }, + timing, + }), + }); + } catch (error) { + if (Boom.isBoom(error)) { + throw error; + } + + if (error instanceof NoLogAnalysisResultsIndexError) { + return response.notFound({ body: { message: error.message } }); + } + + return response.customError({ + statusCode: error.statusCode ?? 500, + body: { + message: error.message ?? 'An unexpected error occurred', + }, + }); + } + }) + ); +}; diff --git a/x-pack/plugins/ingest_manager/common/constants/epm.ts b/x-pack/plugins/ingest_manager/common/constants/epm.ts index 97b5cca369298..3d3c91a4310f8 100644 --- a/x-pack/plugins/ingest_manager/common/constants/epm.ts +++ b/x-pack/plugins/ingest_manager/common/constants/epm.ts @@ -6,5 +6,5 @@ export const PACKAGES_SAVED_OBJECT_TYPE = 'epm-packages'; export const INDEX_PATTERN_SAVED_OBJECT_TYPE = 'index-pattern'; -export const DEFAULT_REGISTRY_URL = 'https://epr.elastic.co'; +export const DEFAULT_REGISTRY_URL = 'https://epr-snapshot.ea-web.elastic.dev'; export const INDEX_PATTERN_PLACEHOLDER_SUFFIX = '-index_pattern_placeholder'; diff --git a/x-pack/plugins/ingest_manager/common/openapi/spec_oas3.json b/x-pack/plugins/ingest_manager/common/openapi/spec_oas3.json index 9617173bd0c7b..c374cbb3bb146 100644 --- a/x-pack/plugins/ingest_manager/common/openapi/spec_oas3.json +++ b/x-pack/plugins/ingest_manager/common/openapi/spec_oas3.json @@ -3520,7 +3520,17 @@ ] } }, - "/fleet/agents/unenroll": { + "/fleet/agents/{agentId}/unenroll": { + "parameters": [ + { + "schema": { + "type": "string" + }, + "name": "agentId", + "in": "path", + "required": true + } + ], "post": { "summary": "Fleet - Agent - Unenroll", "tags": [], @@ -3530,7 +3540,26 @@ { "$ref": "#/components/parameters/xsrfHeader" } - ] + ], + "requestBody": { + "content": { + "application/json": { + "schema": { + "type": "object", + "properties": { + "force": { "type": "boolean" } + } + }, + "examples": { + "example-1": { + "value": { + "force": true + } + } + } + } + } + } } }, "/fleet/config/{configId}/agent-status": { @@ -4096,6 +4125,12 @@ "enrolled_at": { "type": "string" }, + "unenrolled_at": { + "type": "string" + }, + "unenrollment_started_at": { + "type": "string" + }, "shared_id": { "type": "string" }, diff --git a/x-pack/plugins/ingest_manager/common/services/agent_status.ts b/x-pack/plugins/ingest_manager/common/services/agent_status.ts index cc1c2da710516..b1d92d3a78e65 100644 --- a/x-pack/plugins/ingest_manager/common/services/agent_status.ts +++ b/x-pack/plugins/ingest_manager/common/services/agent_status.ts @@ -21,6 +21,9 @@ export function getAgentStatus(agent: Agent, now: number = Date.now()): AgentSta if (!agent.active) { return 'inactive'; } + if (agent.unenrollment_started_at && !agent.unenrolled_at) { + return 'unenrolling'; + } if (agent.current_error_events.length > 0) { return 'error'; } diff --git a/x-pack/plugins/ingest_manager/common/types/models/agent.ts b/x-pack/plugins/ingest_manager/common/types/models/agent.ts index d2a2a3f5705ae..27f0c61685fd4 100644 --- a/x-pack/plugins/ingest_manager/common/types/models/agent.ts +++ b/x-pack/plugins/ingest_manager/common/types/models/agent.ts @@ -11,10 +11,10 @@ export type AgentType = | typeof AGENT_TYPE_PERMANENT | typeof AGENT_TYPE_TEMPORARY; -export type AgentStatus = 'offline' | 'error' | 'online' | 'inactive' | 'warning'; - +export type AgentStatus = 'offline' | 'error' | 'online' | 'inactive' | 'warning' | 'unenrolling'; +export type AgentActionType = 'CONFIG_CHANGE' | 'DATA_DUMP' | 'RESUME' | 'PAUSE' | 'UNENROLL'; export interface NewAgentAction { - type: 'CONFIG_CHANGE' | 'DATA_DUMP' | 'RESUME' | 'PAUSE'; + type: AgentActionType; data?: any; sent_at?: string; } @@ -26,7 +26,7 @@ export interface AgentAction extends NewAgentAction { } export interface AgentActionSOAttributes { - type: 'CONFIG_CHANGE' | 'DATA_DUMP' | 'RESUME' | 'PAUSE'; + type: AgentActionType; sent_at?: string; timestamp?: string; created_at: string; @@ -73,6 +73,8 @@ interface AgentBase { type: AgentType; active: boolean; enrolled_at: string; + unenrolled_at?: string; + unenrollment_started_at?: string; shared_id?: string; access_api_key_id?: string; default_api_key?: string; diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx index 75d0556755149..6d04f63702c64 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx @@ -236,7 +236,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { }, { field: 'active', - width: '100px', + width: '120px', name: i18n.translate('xpack.ingestManager.agentList.statusColumnTitle', { defaultMessage: 'Status', }), diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_health.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_health.tsx index 181ebe3504222..e4dfa520259eb 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_health.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_health.tsx @@ -53,6 +53,14 @@ const Status = { /> ), + Unenrolling: ( + + + + ), }; function getStatusComponent(agent: Agent): React.ReactElement { @@ -65,6 +73,8 @@ function getStatusComponent(agent: Agent): React.ReactElement { return Status.Offline; case 'warning': return Status.Warning; + case 'unenrolling': + return Status.Unenrolling; default: return Status.Online; } diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_unenroll_provider.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_unenroll_provider.tsx index fec2253c0dd56..90d8ff545341d 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_unenroll_provider.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_unenroll_provider.tsx @@ -74,7 +74,7 @@ export const AgentUnenrollProvider: React.FunctionComponent = ({ children const successMessage = i18n.translate( 'xpack.ingestManager.unenrollAgents.successSingleNotificationTitle', { - defaultMessage: "Unenrolled agent '{id}'", + defaultMessage: "Unenrolling agent '{id}'", values: { id: agentId }, } ); diff --git a/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts b/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts index d31498599a2b6..d9a9572237126 100644 --- a/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts +++ b/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts @@ -13,7 +13,6 @@ import { GetOneAgentEventsResponse, PostAgentCheckinResponse, PostAgentEnrollResponse, - PostAgentUnenrollResponse, GetAgentStatusResponse, PutAgentReassignResponse, } from '../../../common/types'; @@ -25,7 +24,6 @@ import { GetOneAgentEventsRequestSchema, PostAgentCheckinRequestSchema, PostAgentEnrollRequestSchema, - PostAgentUnenrollRequestSchema, GetAgentStatusRequestSchema, PutAgentReassignRequestSchema, } from '../../types'; @@ -302,25 +300,6 @@ export const getAgentsHandler: RequestHandler< } }; -export const postAgentsUnenrollHandler: RequestHandler> = async (context, request, response) => { - const soClient = context.core.savedObjects.client; - try { - await AgentService.unenrollAgent(soClient, request.params.agentId); - - const body: PostAgentUnenrollResponse = { - success: true, - }; - return response.ok({ body }); - } catch (e) { - return response.customError({ - statusCode: 500, - body: { message: e.message }, - }); - } -}; - export const putAgentsReassignHandler: RequestHandler< TypeOf, undefined, diff --git a/x-pack/plugins/ingest_manager/server/routes/agent/index.ts b/x-pack/plugins/ingest_manager/server/routes/agent/index.ts index eaab46c7b455c..d7eec50eac3cf 100644 --- a/x-pack/plugins/ingest_manager/server/routes/agent/index.ts +++ b/x-pack/plugins/ingest_manager/server/routes/agent/index.ts @@ -33,7 +33,6 @@ import { getAgentEventsHandler, postAgentCheckinHandler, postAgentEnrollHandler, - postAgentsUnenrollHandler, getAgentStatusForConfigHandler, putAgentsReassignHandler, } from './handlers'; @@ -41,6 +40,7 @@ import { postAgentAcksHandlerBuilder } from './acks_handlers'; import * as AgentService from '../../services/agents'; import { postNewAgentActionHandlerBuilder } from './actions_handlers'; import { appContextService } from '../../services'; +import { postAgentsUnenrollHandler } from './unenroll_handler'; export const registerRoutes = (router: IRouter) => { // Get one diff --git a/x-pack/plugins/ingest_manager/server/routes/agent/unenroll_handler.ts b/x-pack/plugins/ingest_manager/server/routes/agent/unenroll_handler.ts new file mode 100644 index 0000000000000..d1e54fe4fb3a1 --- /dev/null +++ b/x-pack/plugins/ingest_manager/server/routes/agent/unenroll_handler.ts @@ -0,0 +1,36 @@ +/* + * 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 { RequestHandler } from 'src/core/server'; +import { TypeOf } from '@kbn/config-schema'; +import { PostAgentUnenrollResponse } from '../../../common/types'; +import { PostAgentUnenrollRequestSchema } from '../../types'; +import * as AgentService from '../../services/agents'; + +export const postAgentsUnenrollHandler: RequestHandler< + TypeOf, + undefined, + TypeOf +> = async (context, request, response) => { + const soClient = context.core.savedObjects.client; + try { + if (request.body?.force === true) { + await AgentService.forceUnenrollAgent(soClient, request.params.agentId); + } else { + await AgentService.unenrollAgent(soClient, request.params.agentId); + } + + const body: PostAgentUnenrollResponse = { + success: true, + }; + return response.ok({ body }); + } catch (e) { + return response.customError({ + statusCode: 500, + body: { message: e.message }, + }); + } +}; diff --git a/x-pack/plugins/ingest_manager/server/saved_objects/index.ts b/x-pack/plugins/ingest_manager/server/saved_objects/index.ts index 9819a4fa5d750..b47cf4f7e7c3b 100644 --- a/x-pack/plugins/ingest_manager/server/saved_objects/index.ts +++ b/x-pack/plugins/ingest_manager/server/saved_objects/index.ts @@ -54,6 +54,8 @@ const savedObjectTypes: { [key: string]: SavedObjectsType } = { type: { type: 'keyword' }, active: { type: 'boolean' }, enrolled_at: { type: 'date' }, + unenrolled_at: { type: 'date' }, + unenrollment_started_at: { type: 'date' }, access_api_key_id: { type: 'keyword' }, version: { type: 'keyword' }, user_provided_metadata: { type: 'flattened' }, @@ -313,6 +315,9 @@ export function registerEncryptedSavedObjects( 'config_newest_revision', 'updated_at', 'current_error_events', + 'unenrolled_at', + 'unenrollment_started_at', + 'packages', ]), }); encryptedSavedObjects.registerType({ diff --git a/x-pack/plugins/ingest_manager/server/services/agents/acks.ts b/x-pack/plugins/ingest_manager/server/services/agents/acks.ts index c59bac6a5469a..1dfe4e067dafe 100644 --- a/x-pack/plugins/ingest_manager/server/services/agents/acks.ts +++ b/x-pack/plugins/ingest_manager/server/services/agents/acks.ts @@ -26,6 +26,7 @@ import { AGENT_ACTION_SAVED_OBJECT_TYPE, } from '../../constants'; import { getAgentActionByIds } from './actions'; +import { forceUnenrollAgent } from './unenroll'; const ALLOWED_ACKNOWLEDGEMENT_TYPE: string[] = ['ACTION_RESULT']; @@ -63,6 +64,12 @@ export async function acknowledgeAgentActions( if (actions.length === 0) { return []; } + + const isAgentUnenrolled = actions.some((action) => action.type === 'UNENROLL'); + if (isAgentUnenrolled) { + await forceUnenrollAgent(soClient, agent.id); + } + const config = getLatestConfigIfUpdated(agent, actions); await soClient.bulkUpdate([ diff --git a/x-pack/plugins/ingest_manager/server/services/agents/unenroll.ts b/x-pack/plugins/ingest_manager/server/services/agents/unenroll.ts index ee7e08d741035..e0ac2620cafd3 100644 --- a/x-pack/plugins/ingest_manager/server/services/agents/unenroll.ts +++ b/x-pack/plugins/ingest_manager/server/services/agents/unenroll.ts @@ -9,8 +9,21 @@ import { AgentSOAttributes } from '../../types'; import { AGENT_SAVED_OBJECT_TYPE } from '../../constants'; import { getAgent } from './crud'; import * as APIKeyService from '../api_keys'; +import { createAgentAction } from './actions'; export async function unenrollAgent(soClient: SavedObjectsClientContract, agentId: string) { + const now = new Date().toISOString(); + await createAgentAction(soClient, { + agent_id: agentId, + created_at: now, + type: 'UNENROLL', + }); + await soClient.update(AGENT_SAVED_OBJECT_TYPE, agentId, { + unenrollment_started_at: now, + }); +} + +export async function forceUnenrollAgent(soClient: SavedObjectsClientContract, agentId: string) { const agent = await getAgent(soClient, agentId); await Promise.all([ @@ -21,7 +34,9 @@ export async function unenrollAgent(soClient: SavedObjectsClientContract, agentI ? APIKeyService.invalidateAPIKey(soClient, agent.default_api_key_id) : undefined, ]); + await soClient.update(AGENT_SAVED_OBJECT_TYPE, agentId, { active: false, + unenrolled_at: new Date().toISOString(), }); } diff --git a/x-pack/plugins/ingest_manager/server/types/rest_spec/agent.ts b/x-pack/plugins/ingest_manager/server/types/rest_spec/agent.ts index 5526e889124f9..a508c33e0347b 100644 --- a/x-pack/plugins/ingest_manager/server/types/rest_spec/agent.ts +++ b/x-pack/plugins/ingest_manager/server/types/rest_spec/agent.ts @@ -70,6 +70,11 @@ export const PostAgentUnenrollRequestSchema = { params: schema.object({ agentId: schema.string(), }), + body: schema.nullable( + schema.object({ + force: schema.boolean(), + }) + ), }; export const PutAgentReassignRequestSchema = { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx similarity index 95% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx index 251a2ffe95212..d223653442819 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx @@ -8,7 +8,7 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { usePipelineProcessorsContext } from '../context'; +import { usePipelineProcessorsContext } from '../pipeline_processors_editor/context'; export const OnFailureProcessorsTitle: FunctionComponent = () => { const { links } = usePipelineProcessorsContext(); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss similarity index 100% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx index a68e667f4ab43..341e15132d353 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx @@ -9,19 +9,18 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { useForm, Form, FormConfig } from '../../../shared_imports'; -import { Pipeline } from '../../../../common/types'; +import { Pipeline, Processor } from '../../../../common/types'; -import { - OnUpdateHandlerArg, - OnUpdateHandler, - SerializeResult, -} from '../pipeline_processors_editor'; +import './pipeline_form.scss'; + +import { OnUpdateHandlerArg, OnUpdateHandler } from '../pipeline_processors_editor'; import { PipelineRequestFlyout } from './pipeline_request_flyout'; import { PipelineTestFlyout } from './pipeline_test_flyout'; import { PipelineFormFields } from './pipeline_form_fields'; import { PipelineFormError } from './pipeline_form_error'; import { pipelineFormSchema } from './schema'; +import { PipelineForm as IPipelineForm } from './types'; export interface PipelineFormProps { onSave: (pipeline: Pipeline) => void; @@ -32,14 +31,15 @@ export interface PipelineFormProps { isEditing?: boolean; } +const defaultFormValue: Pipeline = Object.freeze({ + name: '', + description: '', + processors: [], + on_failure: [], +}); + export const PipelineForm: React.FunctionComponent = ({ - defaultValue = { - name: '', - description: '', - processors: [], - on_failure: [], - version: '', - }, + defaultValue = defaultFormValue, onSave, isSaving, saveError, @@ -50,34 +50,42 @@ export const PipelineForm: React.FunctionComponent = ({ const [isTestingPipeline, setIsTestingPipeline] = useState(false); - const processorStateRef = useRef(); + const { + processors: initialProcessors, + on_failure: initialOnFailureProcessors, + ...defaultFormValues + } = defaultValue; + + const [processorsState, setProcessorsState] = useState<{ + processors: Processor[]; + onFailure?: Processor[]; + }>({ + processors: initialProcessors, + onFailure: initialOnFailureProcessors, + }); - const handleSave: FormConfig['onSubmit'] = async (formData, isValid) => { - let override: SerializeResult | undefined; + const processorStateRef = useRef(); + const handleSave: FormConfig['onSubmit'] = async (formData, isValid) => { if (!isValid) { return; } if (processorStateRef.current) { - const processorsState = processorStateRef.current; - if (await processorsState.validate()) { - override = processorsState.getData(); - } else { - return; + const state = processorStateRef.current; + if (await state.validate()) { + onSave({ ...formData, ...state.getData() }); } } - - onSave({ ...formData, ...(override || {}) } as Pipeline); }; const handleTestPipelineClick = () => { setIsTestingPipeline(true); }; - const { form } = useForm({ + const { form } = useForm({ schema: pipelineFormSchema, - defaultValue, + defaultValue: defaultFormValues, onSubmit: handleSave, }); @@ -121,9 +129,12 @@ export const PipelineForm: React.FunctionComponent = ({ {/* All form fields */} { + setProcessorsState({ processors, onFailure }); + }} onEditorFlyoutOpen={onEditorFlyoutOpen} - initialProcessors={defaultValue.processors} - initialOnFailureProcessors={defaultValue.on_failure} + processors={processorsState.processors} + onFailure={processorsState.onFailure} onProcessorsUpdate={onProcessorsChangeHandler} hasVersion={Boolean(defaultValue.version)} isTestButtonDisabled={isTestingPipeline || form.isValid === false} diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx index 52d1a77c1df6d..0e7a45e8d07b9 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx @@ -6,17 +6,27 @@ import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiSpacer, EuiSwitch } from '@elastic/eui'; +import { EuiSpacer, EuiSwitch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { Processor } from '../../../../common/types'; -import { FormDataProvider } from '../../../shared_imports'; -import { PipelineProcessorsEditor, OnUpdateHandler } from '../pipeline_processors_editor'; import { getUseField, getFormRow, Field, useKibana } from '../../../shared_imports'; +import { + PipelineProcessorsContextProvider, + GlobalOnFailureProcessorsEditor, + ProcessorsEditor, + OnUpdateHandler, + OnDoneLoadJsonHandler, +} from '../pipeline_processors_editor'; + +import { ProcessorsHeader } from './processors_header'; +import { OnFailureProcessorsTitle } from './on_failure_processors_title'; + interface Props { - initialProcessors: Processor[]; - initialOnFailureProcessors?: Processor[]; + processors: Processor[]; + onFailure?: Processor[]; + onLoadJson: OnDoneLoadJsonHandler; onProcessorsUpdate: OnUpdateHandler; hasVersion: boolean; isTestButtonDisabled: boolean; @@ -29,8 +39,9 @@ const UseField = getUseField({ component: Field }); const FormRow = getFormRow({ titleTag: 'h3' }); export const PipelineFormFields: React.FunctionComponent = ({ - initialProcessors, - initialOnFailureProcessors, + processors, + onFailure, + onLoadJson, onProcessorsUpdate, isEditing, hasVersion, @@ -113,30 +124,37 @@ export const PipelineFormFields: React.FunctionComponent = ({ {/* Pipeline Processors Editor */} - - {({ processors, on_failure: onFailure }) => { - const processorProp = - typeof processors === 'string' && processors - ? JSON.parse(processors) - : initialProcessors ?? []; - - const onFailureProp = - typeof onFailure === 'string' && onFailure - ? JSON.parse(onFailure) - : initialOnFailureProcessors ?? []; - return ( - - ); - }} - + +
+ + + + + + + + + + + + + + + + + +
+ ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx similarity index 84% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx index 6d1e2610b5c2b..5e5cddbd36b92 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx @@ -9,22 +9,26 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { usePipelineProcessorsContext } from '../context'; +import { usePipelineProcessorsContext } from '../pipeline_processors_editor/context'; + +import { LoadFromJsonButton, OnDoneLoadJsonHandler } from '../pipeline_processors_editor'; export interface Props { onTestPipelineClick: () => void; isTestButtonDisabled: boolean; + onLoadJson: OnDoneLoadJsonHandler; } -export const ProcessorsTitleAndTestButton: FunctionComponent = ({ +export const ProcessorsHeader: FunctionComponent = ({ onTestPipelineClick, isTestButtonDisabled, + onLoadJson, }) => { const { links } = usePipelineProcessorsContext(); return ( @@ -55,6 +59,9 @@ export const ProcessorsTitleAndTestButton: FunctionComponent = ({ /> + + + = { + name: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.form.nameFieldLabel', { + defaultMessage: 'Name', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.form.pipelineNameRequiredError', { + defaultMessage: 'Name is required.', + }) + ), + }, + ], + }, + description: { + type: FIELD_TYPES.TEXTAREA, + label: i18n.translate('xpack.ingestPipelines.form.descriptionFieldLabel', { + defaultMessage: 'Description (optional)', + }), + }, + version: { + type: FIELD_TYPES.NUMBER, + label: i18n.translate('xpack.ingestPipelines.form.versionFieldLabel', { + defaultMessage: 'Version (optional)', + }), + formatters: [toInt], + }, +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/schema.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/schema.tsx deleted file mode 100644 index 5435f43a78acf..0000000000000 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/schema.tsx +++ /dev/null @@ -1,138 +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 { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiCode } from '@elastic/eui'; - -import { FormSchema, FIELD_TYPES, fieldValidators, fieldFormatters } from '../../../shared_imports'; -import { parseJson, stringifyJson } from '../../lib'; - -const { emptyField, isJsonField } = fieldValidators; -const { toInt } = fieldFormatters; - -export const pipelineFormSchema: FormSchema = { - name: { - type: FIELD_TYPES.TEXT, - label: i18n.translate('xpack.ingestPipelines.form.nameFieldLabel', { - defaultMessage: 'Name', - }), - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.form.pipelineNameRequiredError', { - defaultMessage: 'Name is required.', - }) - ), - }, - ], - }, - description: { - type: FIELD_TYPES.TEXTAREA, - label: i18n.translate('xpack.ingestPipelines.form.descriptionFieldLabel', { - defaultMessage: 'Description (optional)', - }), - }, - processors: { - label: i18n.translate('xpack.ingestPipelines.form.processorsFieldLabel', { - defaultMessage: 'Processors', - }), - helpText: ( - - {JSON.stringify([ - { - set: { - field: 'foo', - value: 'bar', - }, - }, - ])} - - ), - }} - /> - ), - serializer: parseJson, - deserializer: stringifyJson, - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.form.processorsRequiredError', { - defaultMessage: 'Processors are required.', - }) - ), - }, - { - validator: isJsonField( - i18n.translate('xpack.ingestPipelines.form.processorsJsonError', { - defaultMessage: 'The input is not valid.', - }) - ), - }, - ], - }, - on_failure: { - label: i18n.translate('xpack.ingestPipelines.form.onFailureFieldLabel', { - defaultMessage: 'Failure processors (optional)', - }), - helpText: ( - - {JSON.stringify([ - { - set: { - field: '_index', - value: 'failed-{{ _index }}', - }, - }, - ])} - - ), - }} - /> - ), - serializer: (value) => { - const result = parseJson(value); - // If an empty array was passed, strip out this value entirely. - if (!result.length) { - return undefined; - } - return result; - }, - deserializer: stringifyJson, - validations: [ - { - validator: (validationArg) => { - if (!validationArg.value) { - return; - } - return isJsonField( - i18n.translate('xpack.ingestPipelines.form.onFailureProcessorsJsonError', { - defaultMessage: 'The input is not valid.', - }) - )(validationArg); - }, - }, - ], - }, - version: { - type: FIELD_TYPES.NUMBER, - label: i18n.translate('xpack.ingestPipelines.form.versionFieldLabel', { - defaultMessage: 'Version (optional)', - }), - formatters: [toInt], - }, -}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts index bd74f09546ff4..aa52c14e61eae 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts @@ -7,3 +7,5 @@ import { Pipeline } from '../../../../common/types'; export type ReadProcessorsFunction = () => Pick; + +export type PipelineForm = Omit; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/README.md b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/README.md new file mode 100644 index 0000000000000..d29af67d3179c --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/README.md @@ -0,0 +1,24 @@ +# Pipeline Processors Editor + +This component provides a way to visually build and manage an ingest +pipeline. + +# API + +## Editor components + +The top-level API consists of 3 pieces that enable the maximum amount +of flexibility for consuming code to determine overall layout. + +- PipelineProcessorsEditorContext +- ProcessorsEditor +- GlobalOnFailureProcessorsEditor + +The editor components must be wrapped inside of the context component +as this is where the shared processors state is contained. + +## Load JSON button + +This component is totally standalone. It gives users a button that +presents a modal for loading a pipeline. It does some basic +validation on the JSON to ensure that it is correct. diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx index 7ad9aed3c44a4..cc3817d92d5e3 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx @@ -6,7 +6,12 @@ import { act } from 'react-dom/test-utils'; import React from 'react'; import { registerTestBed, TestBed } from '../../../../../../../test_utils'; -import { PipelineProcessorsEditor, Props } from '../pipeline_processors_editor.container'; +import { + PipelineProcessorsContextProvider, + Props, + ProcessorsEditor, + GlobalOnFailureProcessorsEditor, +} from '../'; jest.mock('@elastic/eui', () => { const original = jest.requireActual('@elastic/eui'); @@ -55,9 +60,16 @@ jest.mock('react-virtualized', () => { }; }); -const testBedSetup = registerTestBed(PipelineProcessorsEditor, { - doMountAsync: false, -}); +const testBedSetup = registerTestBed( + (props: Props) => ( + + + + ), + { + doMountAsync: false, + } +); export interface SetupResult extends TestBed { actions: ReturnType; @@ -146,10 +158,6 @@ const createActions = (testBed: TestBed) => { find(`${processorSelector}.moreMenu.duplicateButton`).simulate('click'); }); }, - - toggleOnFailure() { - find('pipelineEditorOnFailureToggle').simulate('click'); - }, }; }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx index 15121cc71c321..a4bbf840dff71 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx @@ -43,9 +43,9 @@ describe('Pipeline Editor', () => { }, onFlyoutOpen: jest.fn(), onUpdate, - isTestButtonDisabled: false, - onTestPipelineClick: jest.fn(), - esDocsBasePath: 'test', + links: { + esDocsBasePath: 'test', + }, }); }); @@ -57,13 +57,6 @@ describe('Pipeline Editor', () => { expect(arg.getData()).toEqual(testProcessors); }); - it('toggles the on-failure processors tree', () => { - const { actions, exists } = testBed; - expect(exists('pipelineEditorOnFailureTree')).toBe(false); - actions.toggleOnFailure(); - expect(exists('pipelineEditorOnFailureTree')).toBe(true); - }); - describe('processors', () => { it('adds a new processor', async () => { const { actions } = testBed; @@ -169,7 +162,6 @@ describe('Pipeline Editor', () => { it('moves to and from the global on-failure tree', async () => { const { actions } = testBed; - actions.toggleOnFailure(); await actions.addProcessor('onFailure', 'test', { if: '1 == 5' }); actions.moveProcessor('processors>0', 'dropButtonBelow-onFailure>0'); const [onUpdateResult1] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1]; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts index 2d512a6bfa2ed..de0621b187230 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts @@ -12,10 +12,10 @@ export { export { ProcessorsTree, ProcessorInfo, OnActionHandler } from './processors_tree'; -export { PipelineProcessorsEditorItem } from './pipeline_processors_editor_item/pipeline_processors_editor_item'; +export { PipelineProcessorsEditor } from './pipeline_processors_editor'; -export { ProcessorRemoveModal } from './processor_remove_modal'; +export { PipelineProcessorsEditorItem } from './pipeline_processors_editor_item'; -export { ProcessorsTitleAndTestButton } from './processors_title_and_test_button'; +export { ProcessorRemoveModal } from './processor_remove_modal'; -export { OnFailureProcessorsTitle } from './on_failure_processors_title'; +export { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx new file mode 100644 index 0000000000000..482878d1bda58 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx @@ -0,0 +1,34 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { i18n } from '@kbn/i18n'; +import React, { FunctionComponent } from 'react'; +import { EuiButton } from '@elastic/eui'; + +import { ModalProvider, OnDoneLoadJsonHandler } from './modal_provider'; + +interface Props { + onDone: OnDoneLoadJsonHandler; +} + +const i18nTexts = { + buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.buttonLabel', { + defaultMessage: 'Load JSON', + }), +}; + +export const LoadFromJsonButton: FunctionComponent = ({ onDone }) => { + return ( + + {(openModal) => { + return ( + + {i18nTexts.buttonLabel} + + ); + }} + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/index.ts new file mode 100644 index 0000000000000..c1c49f251d518 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { LoadFromJsonButton } from './button'; +export { OnDoneLoadJsonHandler } from './modal_provider'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/modal_provider.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/modal_provider.test.tsx new file mode 100644 index 0000000000000..2f4cdce1edd0b --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/modal_provider.test.tsx @@ -0,0 +1,127 @@ +/* + * 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 { ModalProvider, OnDoneLoadJsonHandler } from './modal_provider'; + +jest.mock('@elastic/eui', () => { + const original = jest.requireActual('@elastic/eui'); + + return { + ...original, + // Mocking EuiCodeEditor, which uses React Ace under the hood + EuiCodeEditor: (props: any) => ( + { + props.onChange(syntheticEvent.jsonString); + }} + /> + ), + }; +}); + +jest.mock('lodash', () => { + const original = jest.requireActual('lodash'); + + return { + ...original, + debounce: (fn: any) => fn, + }; +}); + +import { registerTestBed, TestBed } from '../../../../../../../../test_utils/testbed'; + +const setup = ({ onDone }: { onDone: OnDoneLoadJsonHandler }) => { + return registerTestBed( + () => ( + + {(openModal) => { + return ( + + ); + }} + + ), + { + memoryRouter: { + wrapComponent: false, + }, + } + )(); +}; + +describe('Load from JSON ModalProvider', () => { + let testBed: TestBed; + let onDone: jest.Mock; + + beforeEach(async () => { + onDone = jest.fn(); + testBed = await setup({ onDone }); + }); + + it('displays errors', () => { + const { find, exists } = testBed; + find('button').simulate('click'); + expect(exists('loadJsonConfirmationModal')); + const invalidPipeline = '{}'; + find('mockCodeEditor').simulate('change', { jsonString: invalidPipeline }); + find('confirmModalConfirmButton').simulate('click'); + const errorCallout = find('loadJsonConfirmationModal.errorCallOut'); + expect(errorCallout.text()).toContain('Please ensure the JSON is a valid pipeline object.'); + expect(onDone).toHaveBeenCalledTimes(0); + }); + + it('passes through a valid pipeline object', () => { + const { find, exists } = testBed; + find('button').simulate('click'); + expect(exists('loadJsonConfirmationModal')); + const validPipeline = JSON.stringify({ + processors: [{ set: { field: 'test', value: 123 } }, { badType1: null }, { badType2: 1 }], + on_failure: [ + { + gsub: { + field: '_index', + pattern: '(.monitoring-\\w+-)6(-.+)', + replacement: '$17$2', + }, + }, + ], + }); + find('mockCodeEditor').simulate('change', { jsonString: validPipeline }); + find('confirmModalConfirmButton').simulate('click'); + expect(!exists('loadJsonConfirmationModal')); + expect(onDone).toHaveBeenCalledTimes(1); + expect(onDone.mock.calls[0][0]).toMatchInlineSnapshot(` + Object { + "on_failure": Array [ + Object { + "gsub": Object { + "field": "_index", + "pattern": "(.monitoring-\\\\w+-)6(-.+)", + "replacement": "$17$2", + }, + }, + ], + "processors": Array [ + Object { + "set": Object { + "field": "test", + "value": 123, + }, + }, + Object { + "badType1": null, + }, + Object { + "badType2": 1, + }, + ], + } + `); + }); +}); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/modal_provider.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/modal_provider.tsx new file mode 100644 index 0000000000000..f183386d5927d --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/modal_provider.tsx @@ -0,0 +1,138 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import React, { FunctionComponent, useRef, useState } from 'react'; +import { EuiConfirmModal, EuiOverlayMask, EuiSpacer, EuiText, EuiCallOut } from '@elastic/eui'; + +import { JsonEditor, OnJsonEditorUpdateHandler } from '../../../../../shared_imports'; + +import { Processor } from '../../../../../../common/types'; + +import { deserialize } from '../../deserialize'; + +export type OnDoneLoadJsonHandler = (json: { + processors: Processor[]; + on_failure?: Processor[]; +}) => void; + +export interface Props { + onDone: OnDoneLoadJsonHandler; + children: (openModal: () => void) => React.ReactNode; +} + +const i18nTexts = { + modalTitle: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.modalTitle', { + defaultMessage: 'Load JSON', + }), + buttons: { + cancel: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.buttons.cancel', { + defaultMessage: 'Cancel', + }), + confirm: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.buttons.confirm', { + defaultMessage: 'Load and overwrite', + }), + }, + editor: { + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.editor', { + defaultMessage: 'Pipeline object', + }), + }, + error: { + title: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.error.title', { + defaultMessage: 'Invalid pipeline', + }), + body: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.error.body', { + defaultMessage: 'Please ensure the JSON is a valid pipeline object.', + }), + }, +}; + +const defaultValue = {}; +const defaultValueRaw = JSON.stringify(defaultValue, null, 2); + +export const ModalProvider: FunctionComponent = ({ onDone, children }) => { + const [isModalVisible, setIsModalVisible] = useState(false); + const [isValidJson, setIsValidJson] = useState(true); + const [error, setError] = useState(); + const jsonContent = useRef['0']>({ + isValid: true, + validate: () => true, + data: { + format: () => defaultValue, + raw: defaultValueRaw, + }, + }); + const onJsonUpdate: OnJsonEditorUpdateHandler = (jsonUpdateData) => { + setIsValidJson(jsonUpdateData.validate()); + jsonContent.current = jsonUpdateData; + }; + return ( + <> + {children(() => setIsModalVisible(true))} + {isModalVisible ? ( + + { + setIsModalVisible(false); + }} + onConfirm={async () => { + try { + const json = jsonContent.current.data.format(); + const { processors, on_failure: onFailure } = json; + // This function will throw if it cannot parse the pipeline object + deserialize({ processors, onFailure }); + onDone(json as any); + setIsModalVisible(false); + } catch (e) { + setError(e); + } + }} + cancelButtonText={i18nTexts.buttons.cancel} + confirmButtonDisabled={!isValidJson} + confirmButtonText={i18nTexts.buttons.confirm} + maxWidth={600} + > +
+ + + + + + + {error && ( + <> + + {i18nTexts.error.body} + + + + )} + + +
+ + + ) : undefined} + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor.tsx new file mode 100644 index 0000000000000..c89ff1d3d99ac --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor.tsx @@ -0,0 +1,33 @@ +/* + * 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, { FunctionComponent, memo, useMemo } from 'react'; +import { ProcessorsTree } from '.'; +import { usePipelineProcessorsContext } from '../context'; + +import { ON_FAILURE_STATE_SCOPE, PROCESSOR_STATE_SCOPE } from '../processors_reducer'; + +export interface Props { + stateSlice: typeof ON_FAILURE_STATE_SCOPE | typeof PROCESSOR_STATE_SCOPE; +} + +export const PipelineProcessorsEditor: FunctionComponent = memo( + function PipelineProcessorsEditor({ stateSlice }) { + const { + onTreeAction, + state: { editor, processors }, + } = usePipelineProcessorsContext(); + const baseSelector = useMemo(() => [stateSlice], [stateSlice]); + return ( + + ); + } +); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx index 5bbea4b89b053..5cee5311c62a9 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx @@ -9,7 +9,7 @@ import React, { FunctionComponent, useState } from 'react'; import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, EuiButtonIcon } from '@elastic/eui'; -import { editorItemMessages } from './messages'; +import { i18nTexts } from './i18n_texts'; interface Props { disabled: boolean; @@ -39,7 +39,7 @@ export const ContextMenu: FunctionComponent = (props) => { onDuplicate(); }} > - {editorItemMessages.duplicateButtonLabel} + {i18nTexts.duplicateButtonLabel} , showAddOnFailure ? ( = (props) => { onAddOnFailure(); }} > - {editorItemMessages.addOnFailureButtonLabel} + {i18nTexts.addOnFailureButtonLabel} ) : undefined, = (props) => { onDelete(); }} > - {editorItemMessages.deleteButtonLabel} + {i18nTexts.deleteButtonLabel} , ].filter(Boolean) as JSX.Element[]; @@ -82,7 +82,7 @@ export const ContextMenu: FunctionComponent = (props) => { disabled={disabled} onClick={() => setIsOpen((v) => !v)} iconType="boxesHorizontal" - aria-label={editorItemMessages.moreButtonAriaLabel} + aria-label={i18nTexts.moreButtonAriaLabel} /> } > diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/i18n_texts.ts similarity index 98% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/i18n_texts.ts index 913902d295503..ab080767b6029 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/i18n_texts.ts @@ -6,7 +6,7 @@ import { i18n } from '@kbn/i18n'; -export const editorItemMessages = { +export const i18nTexts = { moveButtonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moveButtonLabel', { defaultMessage: 'Move this processor', }), diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx index 0fe804adaeb48..09c047d1d51b7 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx @@ -25,7 +25,7 @@ import './pipeline_processors_editor_item.scss'; import { InlineTextInput } from './inline_text_input'; import { ContextMenu } from './context_menu'; -import { editorItemMessages } from './messages'; +import { i18nTexts } from './i18n_texts'; import { ProcessorInfo } from '../processors_tree'; export interface Handlers { @@ -52,7 +52,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( renderOnFailureHandlers, }) => { const { - state: { editor, processorsDispatch }, + state: { editor, processors }, } = usePipelineProcessorsContext(); const isDisabled = editor.mode.id !== 'idle'; @@ -115,7 +115,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( description: nextDescription, }; } - processorsDispatch({ + processors.dispatch({ type: 'updateProcessor', payload: { processor: { @@ -126,17 +126,17 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( }, }); }} - ariaLabel={editorItemMessages.processorTypeLabel({ type: processor.type })} + ariaLabel={i18nTexts.processorTypeLabel({ type: processor.type })} text={description} - placeholder={editorItemMessages.descriptionPlaceholder} + placeholder={i18nTexts.descriptionPlaceholder} /> {!isInMoveMode && ( - + { @@ -151,12 +151,12 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( {!isInMoveMode && ( - + @@ -165,7 +165,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( - {editorItemMessages.cancelMoveButtonLabel} + {i18nTexts.cancelMoveButtonLabel} @@ -183,7 +183,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( editor.setMode({ id: 'removingProcessor', arg: { selector } }); }} onDuplicate={() => { - processorsDispatch({ + processors.dispatch({ type: 'duplicateProcessor', payload: { source: selector, diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx index 9d284748a3d15..3eccda55fbb3a 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx @@ -9,11 +9,13 @@ import { FormattedMessage } from '@kbn/i18n/react'; import React, { FunctionComponent, memo, useEffect } from 'react'; import { EuiButton, + EuiButtonEmpty, EuiHorizontalRule, EuiFlyout, EuiFlyoutHeader, - EuiTitle, EuiFlyoutBody, + EuiFlyoutFooter, + EuiTitle, EuiFlexGroup, EuiFlexItem, } from '@elastic/eui'; @@ -44,6 +46,11 @@ const addButtonLabel = i18n.translate( { defaultMessage: 'Add' } ); +const cancelButtonLabel = i18n.translate( + 'xpack.ingestPipelines.settingsFormOnFailureFlyout.cancelButtonLabel', + { defaultMessage: 'Cancel' } +); + export const ProcessorSettingsForm: FunctionComponent = memo( ({ processor, form, isOnFailure, onClose, onOpen }) => { const { @@ -71,7 +78,7 @@ export const ProcessorSettingsForm: FunctionComponent = memo( return (
- + @@ -109,30 +116,19 @@ export const ProcessorSettingsForm: FunctionComponent = memo( {(arg: any) => { const { type } = arg; - let formContent: React.ReactNode | undefined; if (type?.length) { const formDescriptor = getProcessorFormDescriptor(type as any); if (formDescriptor?.FieldsComponent) { - formContent = ( + return ( <> ); - } else { - formContent = ; } - - return ( - <> - {formContent} - - {processor ? updateButtonLabel : addButtonLabel} - - - ); + return ; } // If the user has not yet defined a type, we do not show any settings fields @@ -140,6 +136,24 @@ export const ProcessorSettingsForm: FunctionComponent = memo( }} + + + + {cancelButtonLabel} + + + { + form.submit(); + }} + > + {processor ? updateButtonLabel : addButtonLabel} + + + + ); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/constants.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/constants.ts index 46e3d1c803fd5..87e6eb7f642a6 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/constants.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/constants.ts @@ -4,7 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ +import { ON_FAILURE_STATE_SCOPE, PROCESSOR_STATE_SCOPE } from './processors_reducer'; + export enum DropSpecialLocations { top = 'TOP', bottom = 'BOTTOM', } + +export const PROCESSORS_BASE_SELECTOR = [PROCESSOR_STATE_SCOPE]; +export const ON_FAILURE_BASE_SELECTOR = [ON_FAILURE_STATE_SCOPE]; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx index fbc06f41208fe..ec864d31d1986 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx @@ -4,41 +4,242 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { createContext, Dispatch, FunctionComponent, useContext, useState } from 'react'; -import { EditorMode } from './types'; -import { ProcessorsDispatch } from './processors_reducer'; +import React, { + createContext, + Dispatch, + FunctionComponent, + useCallback, + useContext, + useEffect, + useMemo, + useState, + useRef, +} from 'react'; + +import { Processor } from '../../../../common/types'; + +import { EditorMode, FormValidityState, OnFormUpdateArg, OnUpdateHandlerArg } from './types'; + +import { + ProcessorsDispatch, + useProcessorsState, + State as ProcessorsState, + isOnFailureSelector, +} from './processors_reducer'; + +import { deserialize } from './deserialize'; + +import { serialize } from './serialize'; + +import { OnSubmitHandler, ProcessorSettingsForm } from './components/processor_settings_form'; + +import { OnActionHandler } from './components/processors_tree'; + +import { ProcessorRemoveModal } from './components'; + +import { getValue } from './utils'; interface Links { esDocsBasePath: string; } -const PipelineProcessorsContext = createContext<{ +interface ContextValue { links: Links; + onTreeAction: OnActionHandler; state: { - processorsDispatch: ProcessorsDispatch; + processors: { + state: ProcessorsState; + dispatch: ProcessorsDispatch; + }; editor: { mode: EditorMode; setMode: Dispatch; }; }; -}>({} as any); +} -interface Props { +const PipelineProcessorsContext = createContext({} as any); + +export interface Props { links: Links; - processorsDispatch: ProcessorsDispatch; + value: { + processors: Processor[]; + onFailure?: Processor[]; + }; + /** + * Give users a way to react to this component opening a flyout + */ + onFlyoutOpen: () => void; + onUpdate: (arg: OnUpdateHandlerArg) => void; } export const PipelineProcessorsContextProvider: FunctionComponent = ({ links, + value: { processors: originalProcessors, onFailure: originalOnFailureProcessors }, + onUpdate, + onFlyoutOpen, children, - processorsDispatch, }) => { + const initRef = useRef(false); const [mode, setMode] = useState({ id: 'idle' }); + const deserializedResult = useMemo( + () => + deserialize({ + processors: originalProcessors, + onFailure: originalOnFailureProcessors, + }), + [originalProcessors, originalOnFailureProcessors] + ); + const [processorsState, processorsDispatch] = useProcessorsState(deserializedResult); + + useEffect(() => { + if (initRef.current) { + processorsDispatch({ + type: 'loadProcessors', + payload: { + newState: deserializedResult, + }, + }); + } else { + initRef.current = true; + } + }, [deserializedResult, processorsDispatch]); + + const { onFailure: onFailureProcessors, processors } = processorsState; + + const [formState, setFormState] = useState({ + validate: () => Promise.resolve(true), + }); + + const onFormUpdate = useCallback<(arg: OnFormUpdateArg) => void>( + ({ isValid, validate }) => { + setFormState({ + validate: async () => { + if (isValid === undefined) { + return validate(); + } + return isValid; + }, + }); + }, + [setFormState] + ); + + useEffect(() => { + onUpdate({ + validate: async () => { + const formValid = await formState.validate(); + return formValid && mode.id === 'idle'; + }, + getData: () => + serialize({ + onFailure: onFailureProcessors, + processors, + }), + }); + }, [processors, onFailureProcessors, onUpdate, formState, mode]); + + const onSubmit = useCallback( + (processorTypeAndOptions) => { + switch (mode.id) { + case 'creatingProcessor': + processorsDispatch({ + type: 'addProcessor', + payload: { + processor: { ...processorTypeAndOptions }, + targetSelector: mode.arg.selector, + }, + }); + break; + case 'editingProcessor': + processorsDispatch({ + type: 'updateProcessor', + payload: { + processor: { + ...mode.arg.processor, + ...processorTypeAndOptions, + }, + selector: mode.arg.selector, + }, + }); + break; + default: + } + setMode({ id: 'idle' }); + }, + [processorsDispatch, mode, setMode] + ); + + const onCloseSettingsForm = useCallback(() => { + setMode({ id: 'idle' }); + setFormState({ validate: () => Promise.resolve(true) }); + }, [setFormState, setMode]); + + const onTreeAction = useCallback( + (action) => { + switch (action.type) { + case 'addProcessor': + setMode({ id: 'creatingProcessor', arg: { selector: action.payload.target } }); + break; + case 'move': + setMode({ id: 'idle' }); + processorsDispatch({ + type: 'moveProcessor', + payload: action.payload, + }); + break; + case 'selectToMove': + setMode({ id: 'movingProcessor', arg: action.payload.info }); + break; + case 'cancelMove': + setMode({ id: 'idle' }); + break; + } + }, + [processorsDispatch, setMode] + ); + return ( {children} + + {mode.id === 'editingProcessor' || mode.id === 'creatingProcessor' ? ( + + ) : undefined} + {mode.id === 'removingProcessor' && ( + { + if (confirmed) { + processorsDispatch({ + type: 'removeProcessor', + payload: { selector }, + }); + } + setMode({ id: 'idle' }); + }} + /> + )} ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.test.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.test.ts new file mode 100644 index 0000000000000..9b7c2069fcddd --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.test.ts @@ -0,0 +1,74 @@ +/* + * 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 { deserialize } from './deserialize'; + +describe('deserialize', () => { + it('tolerates certain bad values correctly', () => { + expect( + deserialize({ + processors: [ + { set: { field: 'test', value: 123 } }, + { badType1: null } as any, + { badType2: 1 } as any, + ], + onFailure: [ + { + gsub: { + field: '_index', + pattern: '(.monitoring-\\w+-)6(-.+)', + replacement: '$17$2', + }, + }, + ], + }) + ).toEqual({ + processors: [ + { + id: expect.any(String), + type: 'set', + options: { + field: 'test', + value: 123, + }, + }, + { + id: expect.any(String), + onFailure: undefined, + type: 'badType1', + options: {}, + }, + { + id: expect.any(String), + onFailure: undefined, + type: 'badType2', + options: {}, + }, + ], + onFailure: [ + { + id: expect.any(String), + type: 'gsub', + onFailure: undefined, + options: { + field: '_index', + pattern: '(.monitoring-\\w+-)6(-.+)', + replacement: '$17$2', + }, + }, + ], + }); + }); + + it('throws for unacceptable values', () => { + expect(() => { + deserialize({ + processors: [{ reallyBad: undefined } as any, 1 as any], + onFailure: [], + }); + }).toThrow('Invalid processor type'); + }); +}); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.ts index fa1d041bdaba3..1e9a97e189a5e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.ts @@ -22,12 +22,16 @@ const getProcessorType = (processor: Processor): string => { * See the definition of {@link ProcessorInternal} for why this works to extract the * processor type. */ - return Object.keys(processor)[0]!; + const type: unknown = Object.keys(processor)[0]; + if (typeof type !== 'string') { + throw new Error(`Invalid processor type. Received "${type}"`); + } + return type; }; const convertToPipelineInternalProcessor = (processor: Processor): ProcessorInternal => { const type = getProcessorType(processor); - const { on_failure: originalOnFailure, ...options } = processor[type]; + const { on_failure: originalOnFailure, ...options } = processor[type] ?? {}; const onFailure = originalOnFailure?.length ? convertProcessors(originalOnFailure) : (originalOnFailure as ProcessorInternal[] | undefined); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/global_on_failure_processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/global_on_failure_processors_editor.tsx new file mode 100644 index 0000000000000..7c62383024cfe --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/global_on_failure_processors_editor.tsx @@ -0,0 +1,13 @@ +/* + * 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, { FunctionComponent } from 'react'; + +import { PipelineProcessorsEditor } from '../components'; + +export const GlobalOnFailureProcessorsEditor: FunctionComponent = () => { + return ; +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/index.ts new file mode 100644 index 0000000000000..6c544b31df439 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { GlobalOnFailureProcessorsEditor } from './global_on_failure_processors_editor'; +export { ProcessorsEditor } from './processors_editor'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/processors_editor.tsx new file mode 100644 index 0000000000000..108b22be43ca0 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/editors/processors_editor.tsx @@ -0,0 +1,13 @@ +/* + * 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, { FunctionComponent } from 'react'; + +import { PipelineProcessorsEditor } from '../components'; + +export const ProcessorsEditor: FunctionComponent = () => { + return ; +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts index 58d6e492b85e5..89bc50fc0600a 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts @@ -4,8 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -export { PipelineProcessorsEditor, OnUpdateHandler } from './pipeline_processors_editor.container'; +export { PipelineProcessorsContextProvider, Props } from './context'; -export { OnUpdateHandlerArg } from './types'; +export { ProcessorsEditor, GlobalOnFailureProcessorsEditor } from './editors'; + +export { OnUpdateHandlerArg, OnUpdateHandler } from './types'; export { SerializeResult } from './serialize'; + +export { LoadFromJsonButton, OnDoneLoadJsonHandler } from './components'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx deleted file mode 100644 index 7257677c08fc2..0000000000000 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx +++ /dev/null @@ -1,74 +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, { FunctionComponent, useMemo } from 'react'; - -import { Processor } from '../../../../common/types'; - -import { deserialize } from './deserialize'; - -import { useProcessorsState } from './processors_reducer'; - -import { PipelineProcessorsContextProvider } from './context'; - -import { OnUpdateHandlerArg } from './types'; - -import { PipelineProcessorsEditor as PipelineProcessorsEditorUI } from './pipeline_processors_editor'; - -export interface Props { - value: { - processors: Processor[]; - onFailure?: Processor[]; - }; - onUpdate: (arg: OnUpdateHandlerArg) => void; - isTestButtonDisabled: boolean; - onTestPipelineClick: () => void; - esDocsBasePath: string; - /** - * Give users a way to react to this component opening a flyout - */ - onFlyoutOpen: () => void; -} - -export type OnUpdateHandler = (arg: OnUpdateHandlerArg) => void; - -export const PipelineProcessorsEditor: FunctionComponent = ({ - value: { processors: originalProcessors, onFailure: originalOnFailureProcessors }, - onFlyoutOpen, - onUpdate, - isTestButtonDisabled, - esDocsBasePath, - onTestPipelineClick, -}) => { - const deserializedResult = useMemo( - () => - deserialize({ - processors: originalProcessors, - onFailure: originalOnFailureProcessors, - }), - // TODO: Re-add the dependency on the props and make the state set-able - // when new props come in so that this component will be controllable - [] // eslint-disable-line react-hooks/exhaustive-deps - ); - const [processorsState, processorsDispatch] = useProcessorsState(deserializedResult); - const { processors, onFailure } = processorsState; - - return ( - - - - ); -}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx deleted file mode 100644 index 09e77c5107754..0000000000000 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx +++ /dev/null @@ -1,239 +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 { FormattedMessage } from '@kbn/i18n/react'; -import React, { FunctionComponent, useCallback, memo, useState, useEffect } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch } from '@elastic/eui'; - -import './pipeline_processors_editor.scss'; - -import { - ProcessorsTitleAndTestButton, - OnFailureProcessorsTitle, - ProcessorsTree, - ProcessorRemoveModal, - OnActionHandler, - OnSubmitHandler, - ProcessorSettingsForm, -} from './components'; - -import { ProcessorInternal, OnUpdateHandlerArg, FormValidityState, OnFormUpdateArg } from './types'; - -import { - ON_FAILURE_STATE_SCOPE, - PROCESSOR_STATE_SCOPE, - isOnFailureSelector, -} from './processors_reducer'; - -const PROCESSORS_BASE_SELECTOR = [PROCESSOR_STATE_SCOPE]; -const ON_FAILURE_BASE_SELECTOR = [ON_FAILURE_STATE_SCOPE]; - -import { serialize } from './serialize'; -import { getValue } from './utils'; -import { usePipelineProcessorsContext } from './context'; - -export interface Props { - processors: ProcessorInternal[]; - onFailureProcessors: ProcessorInternal[]; - onUpdate: (arg: OnUpdateHandlerArg) => void; - isTestButtonDisabled: boolean; - onTestPipelineClick: () => void; - onFlyoutOpen: () => void; -} - -export const PipelineProcessorsEditor: FunctionComponent = memo( - function PipelineProcessorsEditor({ - processors, - onFailureProcessors, - onTestPipelineClick, - isTestButtonDisabled, - onUpdate, - onFlyoutOpen, - }) { - const { - state: { editor, processorsDispatch }, - } = usePipelineProcessorsContext(); - - const { mode: editorMode, setMode: setEditorMode } = editor; - - const [formState, setFormState] = useState({ - validate: () => Promise.resolve(true), - }); - - const onFormUpdate = useCallback<(arg: OnFormUpdateArg) => void>( - ({ isValid, validate }) => { - setFormState({ - validate: async () => { - if (isValid === undefined) { - return validate(); - } - return isValid; - }, - }); - }, - [setFormState] - ); - - const [showGlobalOnFailure, setShowGlobalOnFailure] = useState( - Boolean(onFailureProcessors.length) - ); - - useEffect(() => { - onUpdate({ - validate: async () => { - const formValid = await formState.validate(); - return formValid && editorMode.id === 'idle'; - }, - getData: () => - serialize({ - onFailure: showGlobalOnFailure ? onFailureProcessors : undefined, - processors, - }), - }); - }, [processors, onFailureProcessors, onUpdate, formState, editorMode, showGlobalOnFailure]); - - const onSubmit = useCallback( - (processorTypeAndOptions) => { - switch (editorMode.id) { - case 'creatingProcessor': - processorsDispatch({ - type: 'addProcessor', - payload: { - processor: { ...processorTypeAndOptions }, - targetSelector: editorMode.arg.selector, - }, - }); - break; - case 'editingProcessor': - processorsDispatch({ - type: 'updateProcessor', - payload: { - processor: { - ...editorMode.arg.processor, - ...processorTypeAndOptions, - }, - selector: editorMode.arg.selector, - }, - }); - break; - default: - } - setEditorMode({ id: 'idle' }); - }, - [processorsDispatch, editorMode, setEditorMode] - ); - - const onCloseSettingsForm = useCallback(() => { - setEditorMode({ id: 'idle' }); - setFormState({ validate: () => Promise.resolve(true) }); - }, [setFormState, setEditorMode]); - - const onTreeAction = useCallback( - (action) => { - switch (action.type) { - case 'addProcessor': - setEditorMode({ id: 'creatingProcessor', arg: { selector: action.payload.target } }); - break; - case 'move': - setEditorMode({ id: 'idle' }); - processorsDispatch({ - type: 'moveProcessor', - payload: action.payload, - }); - break; - case 'selectToMove': - setEditorMode({ id: 'movingProcessor', arg: action.payload.info }); - break; - case 'cancelMove': - setEditorMode({ id: 'idle' }); - break; - } - }, - [processorsDispatch, setEditorMode] - ); - - const movingProcessor = editorMode.id === 'movingProcessor' ? editorMode.arg : undefined; - - return ( -
- - - - - - - - - - - - - - - - } - checked={showGlobalOnFailure} - onChange={(e) => setShowGlobalOnFailure(e.target.checked)} - data-test-subj="pipelineEditorOnFailureToggle" - /> - - {showGlobalOnFailure ? ( - - - - ) : undefined} - - {editorMode.id === 'editingProcessor' || editorMode.id === 'creatingProcessor' ? ( - - ) : undefined} - {editorMode.id === 'removingProcessor' && ( - { - if (confirmed) { - processorsDispatch({ - type: 'removeProcessor', - payload: { selector }, - }); - } - setEditorMode({ id: 'idle' }); - }} - /> - )} -
- ); - } -); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts index 7265f63f45a5d..0e06b8d55d379 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts @@ -12,6 +12,6 @@ export { Action, } from './processors_reducer'; -export { ON_FAILURE_STATE_SCOPE, PROCESSOR_STATE_SCOPE } from './constants'; +export * from './constants'; export { isChildPath, isOnFailureSelector } from './utils'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/processors_reducer.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/processors_reducer.ts index 4e069aab8bdd1..295e7ff141117 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/processors_reducer.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/processors_reducer.ts @@ -38,6 +38,12 @@ export type Action = payload: { source: ProcessorSelector; }; + } + | { + type: 'loadProcessors'; + payload: { + newState: DeserializeResult; + }; }; export type ProcessorsDispatch = Dispatch; @@ -124,6 +130,14 @@ export const reducer: Reducer = (state, action) => { return setValue(sourceProcessorsArraySelector, state, sourceProcessorsArray); } + if (action.type === 'loadProcessors') { + return { + ...action.payload.newState, + onFailure: action.payload.newState.onFailure ?? [], + isRoot: true, + }; + } + return state; }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/types.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/types.ts index aa39fca29fa8b..aea8f0f0910f4 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/types.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/types.ts @@ -38,6 +38,8 @@ export interface OnUpdateHandlerArg extends FormValidityState { getData: () => SerializeResult; } +export type OnUpdateHandler = (arg: OnUpdateHandlerArg) => void; + /** * The editor can be in different modes. This enables us to hold * a reference to data dispatch to the reducer (like the {@link ProcessorSelector} diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts index 05e7d1e41c5fa..d2c4b73a48767 100644 --- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts +++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts @@ -22,6 +22,8 @@ export { UseRequestConfig, WithPrivileges, Monaco, + JsonEditor, + OnJsonEditorUpdateHandler, } from '../../../../src/plugins/es_ui_shared/public/'; export { diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 60c31e5d090e5..f21939b3a2895 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -68,29 +68,33 @@ export function WorkspacePanelWrapper({ return ( - + + + + + {activeVisualization && activeVisualization.renderToolbar && ( + + + + )} + - {activeVisualization && activeVisualization.renderToolbar && ( - - - - )} {(!emptyExpression || title) && ( diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap index c037aecde558b..d7d76bdd1f44a 100644 --- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap +++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap @@ -5,6 +5,9 @@ Object { "chain": Array [ Object { "arguments": Object { + "fittingFunction": Array [ + "Carry", + ], "layers": Array [ Object { "chain": Array [ diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap index 8cb30037379da..c7c173f87ad7c 100644 --- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap +++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap @@ -36,6 +36,7 @@ exports[`xy_expression XYChart component it renders area 1`] = ` title="a" /> { + if (layer.splitAccessor) { + return null; + } + return ( + layer?.yConfig?.find((yConfig: YConfig) => yConfig.forAccessor === accessor)?.color || null + ); +}; diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts index e9e0cfed909fb..31b34e41e82db 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts @@ -40,6 +40,7 @@ describe('#toExpression', () => { { legend: { position: Position.Bottom, isVisible: true }, preferredSeriesType: 'bar', + fittingFunction: 'Carry', layers: [ { layerId: 'first', @@ -55,6 +56,27 @@ describe('#toExpression', () => { ).toMatchSnapshot(); }); + it('should default the fitting function to None', () => { + expect( + (xyVisualization.toExpression( + { + legend: { position: Position.Bottom, isVisible: true }, + preferredSeriesType: 'bar', + layers: [ + { + layerId: 'first', + seriesType: 'area', + splitAccessor: 'd', + xAccessor: 'a', + accessors: ['b', 'c'], + }, + ], + }, + frame + ) as Ast).chain[0].arguments.fittingFunction[0] + ).toEqual('None'); + }); + it('should not generate an expression when missing x', () => { expect( xyVisualization.toExpression( diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts index 6ec22270d8b18..3b9406cedd499 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts @@ -133,6 +133,7 @@ export const buildExpression = ( ], }, ], + fittingFunction: [state.fittingFunction || 'None'], layers: validLayers.map((layer) => { const columnToLabel: Record = {}; @@ -188,7 +189,8 @@ export const buildExpression = ( function: 'lens_xy_yConfig', arguments: { forAccessor: [yConfig.forAccessor], - axisMode: [yConfig.axisMode], + axisMode: yConfig.axisMode ? [yConfig.axisMode] : [], + color: yConfig.color ? [yConfig.color] : [], }, }, ], diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index e62c5f60a58e1..08f29c65b26d0 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -16,6 +16,7 @@ import chartBarHorizontalStackedSVG from '../assets/chart_bar_horizontal_stacked import chartLineSVG from '../assets/chart_line.svg'; import { VisualizationType } from '../index'; +import { FittingFunction } from './fitting_functions'; export interface LegendConfig { isVisible: boolean; @@ -100,6 +101,10 @@ export const yAxisConfig: ExpressionFunctionDefinition< options: ['auto', 'left', 'right'], help: 'The axis mode of the metric', }, + color: { + types: ['string'], + help: 'The color of the series', + }, }, fn: function fn(input: unknown, args: YConfig) { return { @@ -195,6 +200,7 @@ export type YAxisMode = 'auto' | 'left' | 'right'; export interface YConfig { forAccessor: string; axisMode?: YAxisMode; + color?: string; } export interface LayerConfig { @@ -220,12 +226,14 @@ export interface XYArgs { yTitle: string; legend: LegendConfig & { type: 'lens_xy_legendConfig' }; layers: LayerArgs[]; + fittingFunction?: FittingFunction; } // Persisted parts of the state export interface XYState { preferredSeriesType: SeriesType; legend: LegendConfig; + fittingFunction?: FittingFunction; layers: LayerConfig[]; } diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss new file mode 100644 index 0000000000000..c353f3f370ee5 --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss @@ -0,0 +1,3 @@ +.lnsXyToolbar__popover { + width: 400px; +} diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx index 7544ed0f87b7d..981ce1cca5958 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx @@ -5,15 +5,15 @@ */ import React from 'react'; -import { mountWithIntl as mount } from 'test_utils/enzyme_helpers'; -import { EuiButtonGroupProps } from '@elastic/eui'; -import { LayerContextMenu } from './xy_config_panel'; +import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers'; +import { EuiButtonGroupProps, EuiSuperSelect } from '@elastic/eui'; +import { LayerContextMenu, XyToolbar } from './xy_config_panel'; import { FramePublicAPI } from '../types'; import { State } from './types'; import { Position } from '@elastic/charts'; import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks'; -describe('LayerContextMenu', () => { +describe('XY Config panels', () => { let frame: FramePublicAPI; function testState(): State { @@ -39,11 +39,6 @@ describe('LayerContextMenu', () => { }; }); - test.skip('allows toggling of legend visibility', () => {}); - test.skip('allows changing legend position', () => {}); - test.skip('allows toggling the y axis gridlines', () => {}); - test.skip('allows toggling the x axis gridlines', () => {}); - describe('LayerContextMenu', () => { test('enables stacked chart types even when there is no split series', () => { const state = testState(); @@ -92,4 +87,45 @@ describe('LayerContextMenu', () => { expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]); }); }); + + describe('XyToolbar', () => { + it('should show currently selected fitting function', () => { + const state = testState(); + + const component = shallow( + + ); + + expect(component.find(EuiSuperSelect).prop('valueOfSelected')).toEqual('Carry'); + }); + + it('should disable the select if there is no unstacked area or line series', () => { + const state = testState(); + + const component = shallow( + + ); + + expect(component.find(EuiSuperSelect).prop('disabled')).toEqual(true); + }); + }); }); diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx index 3e73cd256bdbf..84ea53fb4dc3d 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx @@ -4,13 +4,36 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiButtonGroup, EuiFormRow, htmlIdGenerator } from '@elastic/eui'; +import { debounce } from 'lodash'; +import { + EuiButtonEmpty, + EuiButtonGroup, + EuiFlexGroup, + EuiFlexItem, + EuiSuperSelect, + EuiFormRow, + EuiPopover, + EuiText, + htmlIdGenerator, + EuiForm, + EuiColorPicker, + EuiColorPickerProps, + EuiToolTip, + EuiIcon, +} from '@elastic/eui'; +import { + VisualizationLayerWidgetProps, + VisualizationDimensionEditorProps, + VisualizationToolbarProps, +} from '../types'; import { State, SeriesType, visualizationTypes, YAxisMode } from './types'; -import { VisualizationDimensionEditorProps, VisualizationLayerWidgetProps } from '../types'; -import { isHorizontalChart, isHorizontalSeries } from './state_helpers'; +import { isHorizontalChart, isHorizontalSeries, getSeriesColor } from './state_helpers'; import { trackUiEvent } from '../lens_ui_telemetry'; +import { fittingFunctionDefinitions } from './fitting_functions'; + +import './xy_config_panel.scss'; type UnwrapArray = T extends Array ? P : T; @@ -68,72 +91,247 @@ export function LayerContextMenu(props: VisualizationLayerWidgetProps) { ); } +export function XyToolbar(props: VisualizationToolbarProps) { + const [open, setOpen] = useState(false); + const hasNonBarSeries = props.state?.layers.some( + (layer) => layer.seriesType === 'line' || layer.seriesType === 'area' + ); + return ( + + + { + setOpen(!open); + }} + > + {i18n.translate('xpack.lens.xyChart.settingsLabel', { defaultMessage: 'Settings' })} + + } + isOpen={open} + closePopover={() => { + setOpen(false); + }} + anchorPosition="downRight" + > + + { + return { + value: id, + dropdownDisplay: ( + <> + {title} + +

{description}

+ + + ), + inputDisplay: title, + }; + })} + valueOfSelected={props.state?.fittingFunction || 'None'} + onChange={(value) => props.setState({ ...props.state, fittingFunction: value })} + itemLayoutAlign="top" + hasDividers + /> + + + + + ); +} const idPrefix = htmlIdGenerator()(); -export function DimensionEditor({ - state, - setState, - layerId, - accessor, -}: VisualizationDimensionEditorProps) { +export function DimensionEditor(props: VisualizationDimensionEditorProps) { + const { state, setState, layerId, accessor } = props; const index = state.layers.findIndex((l) => l.layerId === layerId); const layer = state.layers[index]; const axisMode = (layer.yConfig && layer.yConfig?.find((yAxisConfig) => yAxisConfig.forAccessor === accessor)?.axisMode) || 'auto'; + return ( - - + + + { - const newMode = id.replace(idPrefix, '') as YAxisMode; - const newYAxisConfigs = [...(layer.yConfig || [])]; - const existingIndex = newYAxisConfigs.findIndex( - (yAxisConfig) => yAxisConfig.forAccessor === accessor - ); - if (existingIndex !== -1) { - newYAxisConfigs[existingIndex].axisMode = newMode; + > + { + const newMode = id.replace(idPrefix, '') as YAxisMode; + const newYAxisConfigs = [...(layer.yConfig || [])]; + const existingIndex = newYAxisConfigs.findIndex( + (yAxisConfig) => yAxisConfig.forAccessor === accessor + ); + if (existingIndex !== -1) { + newYAxisConfigs[existingIndex].axisMode = newMode; + } else { + newYAxisConfigs.push({ + forAccessor: accessor, + axisMode: newMode, + }); + } + setState(updateLayer(state, { ...layer, yConfig: newYAxisConfigs }, index)); + }} + /> + + + ); +} + +const tooltipContent = { + auto: i18n.translate('xpack.lens.configPanel.color.tooltip.auto', { + defaultMessage: 'Lens automatically picks colors for you unless you specify a custom color.', + }), + custom: i18n.translate('xpack.lens.configPanel.color.tooltip.custom', { + defaultMessage: 'Clear the custom color to return to “Auto” mode.', + }), + disabled: i18n.translate('xpack.lens.configPanel.color.tooltip.disabled', { + defaultMessage: + 'Individual series cannot be custom colored when the layer includes a “Break down by“', + }), +}; + +const ColorPicker = ({ + state, + setState, + layerId, + accessor, +}: VisualizationDimensionEditorProps) => { + const index = state.layers.findIndex((l) => l.layerId === layerId); + const layer = state.layers[index]; + const disabled = !!layer.splitAccessor; + + const [color, setColor] = useState(getSeriesColor(layer, accessor)); + + const handleColor: EuiColorPickerProps['onChange'] = (text, output) => { + setColor(text); + if (output.isValid || text === '') { + updateColorInState(text, output); + } + }; + + const updateColorInState: EuiColorPickerProps['onChange'] = React.useMemo( + () => + debounce((text, output) => { + const newYConfigs = [...(layer.yConfig || [])]; + const existingIndex = newYConfigs.findIndex((yConfig) => yConfig.forAccessor === accessor); + if (existingIndex !== -1) { + if (text === '') { + delete newYConfigs[existingIndex].color; } else { - newYAxisConfigs.push({ - forAccessor: accessor, - axisMode: newMode, - }); + newYConfigs[existingIndex].color = output.hex; } - setState(updateLayer(state, { ...layer, yConfig: newYAxisConfigs }, index)); - }} - /> + } else { + newYConfigs.push({ + forAccessor: accessor, + color: output.hex, + }); + } + setState(updateLayer(state, { ...layer, yConfig: newYConfigs }, index)); + }, 256), + [state, layer, accessor, index] + ); + + return ( + + + {i18n.translate('xpack.lens.xyChart.seriesColor.label', { + defaultMessage: 'Series color', + })}{' '} + + + + } + > + {disabled ? ( + + + + ) : ( + + )} ); -} +}; diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx index f433a88e3bdbd..b7a50b3af640c 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx @@ -15,6 +15,7 @@ import { GeometryValue, XYChartSeriesIdentifier, SeriesNameFn, + Fit, } from '@elastic/charts'; import { xyChart, XYChart } from './xy_expression'; import { LensMultiTable } from '../types'; @@ -996,6 +997,75 @@ describe('xy_expression', () => { }); }); + describe('y series coloring', () => { + test('color is applied to chart for multiple series', () => { + const args = createArgsWithLayers(); + const newArgs = { + ...args, + layers: [ + { + ...args.layers[0], + splitAccessor: undefined, + accessors: ['a', 'b'], + yConfig: [ + { + forAccessor: 'a', + color: '#550000', + }, + { + forAccessor: 'b', + color: '#FFFF00', + }, + ], + }, + { + ...args.layers[0], + splitAccessor: undefined, + accessors: ['c'], + yConfig: [ + { + forAccessor: 'c', + color: '#FEECDF', + }, + ], + }, + ], + } as XYArgs; + + const component = getRenderedComponent(dataWithoutFormats, newArgs); + expect((component.find(LineSeries).at(0).prop('color') as Function)!()).toEqual('#550000'); + expect((component.find(LineSeries).at(1).prop('color') as Function)!()).toEqual('#FFFF00'); + expect((component.find(LineSeries).at(2).prop('color') as Function)!()).toEqual('#FEECDF'); + }); + test('color is not applied to chart when splitAccessor is defined or when yConfig is not configured', () => { + const args = createArgsWithLayers(); + const newArgs = { + ...args, + layers: [ + { + ...args.layers[0], + accessors: ['a'], + yConfig: [ + { + forAccessor: 'a', + color: '#550000', + }, + ], + }, + { + ...args.layers[0], + splitAccessor: undefined, + accessors: ['c'], + }, + ], + } as XYArgs; + + const component = getRenderedComponent(dataWithoutFormats, newArgs); + expect((component.find(LineSeries).at(0).prop('color') as Function)!()).toEqual(null); + expect((component.find(LineSeries).at(1).prop('color') as Function)!()).toEqual(null); + }); + }); + describe('provides correct series naming', () => { const nameFnArgs = { seriesKeys: [], @@ -1485,5 +1555,66 @@ describe('xy_expression', () => { expect(component.find(Settings).prop('showLegend')).toEqual(true); }); + + test('it should apply the fitting function to all non-bar series', () => { + const data: LensMultiTable = { + type: 'lens_multitable', + tables: { + first: createSampleDatatableWithRows([ + { a: 1, b: 2, c: 'I', d: 'Foo' }, + { a: 1, b: 5, c: 'J', d: 'Bar' }, + ]), + }, + }; + + const args: XYArgs = createArgsWithLayers([ + { ...sampleLayer, accessors: ['a'] }, + { ...sampleLayer, seriesType: 'bar', accessors: ['a'] }, + { ...sampleLayer, seriesType: 'area', accessors: ['a'] }, + { ...sampleLayer, seriesType: 'area_stacked', accessors: ['a'] }, + ]); + + const component = shallow( + + ); + + expect(component.find(LineSeries).prop('fit')).toEqual({ type: Fit.Carry }); + expect(component.find(BarSeries).prop('fit')).toEqual(undefined); + expect(component.find(AreaSeries).at(0).prop('fit')).toEqual({ type: Fit.Carry }); + expect(component.find(AreaSeries).at(0).prop('stackAccessors')).toEqual([]); + // stacked area series doesn't get the fit prop + expect(component.find(AreaSeries).at(1).prop('fit')).toEqual(undefined); + expect(component.find(AreaSeries).at(1).prop('stackAccessors')).toEqual(['c']); + }); + + test('it should apply None fitting function if not specified', () => { + const { data, args } = sampleArgs(); + + args.layers[0].accessors = ['a']; + + const component = shallow( + + ); + + expect(component.find(LineSeries).prop('fit')).toEqual({ type: Fit.None }); + }); }); }); diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx index 3ff7bd7fda304..3ab12aa0879b0 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx @@ -35,11 +35,12 @@ import { } from '../types'; import { XYArgs, SeriesType, visualizationTypes } from './types'; import { VisualizationContainer } from '../visualization_container'; -import { isHorizontalChart } from './state_helpers'; +import { isHorizontalChart, getSeriesColor } from './state_helpers'; import { parseInterval } from '../../../../../src/plugins/data/common'; import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public'; import { EmptyPlaceholder } from '../shared_components'; import { desanitizeFilterContext } from '../utils'; +import { fittingFunctionDefinitions, getFitOptions } from './fitting_functions'; import { getAxesConfiguration } from './axes_configuration'; type InferPropType = T extends React.FunctionComponent ? P : T; @@ -94,6 +95,13 @@ export const xyChart: ExpressionFunctionDefinition< defaultMessage: 'Configure the chart legend.', }), }, + fittingFunction: { + types: ['string'], + options: [...fittingFunctionDefinitions.map(({ id }) => id)], + help: i18n.translate('xpack.lens.xyChart.fittingFunction.help', { + defaultMessage: 'Define how missing values are treated', + }), + }, layers: { // eslint-disable-next-line @typescript-eslint/no-explicit-any types: ['lens_xy_layer'] as any, @@ -191,7 +199,7 @@ export function XYChart({ onClickValue, onSelectRange, }: XYChartRenderProps) { - const { legend, layers } = args; + const { legend, layers, fittingFunction } = args; const chartTheme = chartsThemeService.useChartsTheme(); const chartBaseTheme = chartsThemeService.useChartsBaseTheme(); @@ -433,6 +441,7 @@ export function XYChart({ data: rows, xScaleType, yScaleType, + color: () => getSeriesColor(layer, accessor), groupId: yAxesConfiguration.find((axisConfiguration) => axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor) )?.groupId, @@ -462,7 +471,7 @@ export function XYChart({ } // This handles both split and single-y cases: // * If split series without formatting, show the value literally - // * If single Y, the seriesKey will be the acccessor, so we show the human-readable name + // * If single Y, the seriesKey will be the accessor, so we show the human-readable name return splitAccessor ? d.seriesKeys[0] : columnToLabelMap[d.seriesKeys[0]] ?? ''; }, }; @@ -471,17 +480,29 @@ export function XYChart({ switch (seriesType) { case 'line': - return ; + return ( + + ); case 'bar': case 'bar_stacked': case 'bar_horizontal': case 'bar_horizontal_stacked': return ; - default: + case 'area_stacked': return ; + case 'area': + return ( + + ); + default: + return assertNever(seriesType); } }) )} ); } + +function assertNever(x: never): never { + throw new Error('Unexpected series type: ' + x); +} diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts index c107d8d368248..f301206355060 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts @@ -331,6 +331,7 @@ describe('xy_suggestions', () => { test('makes a visible seriesType suggestion for unchanged table without split', () => { const currentState: XYState = { legend: { isVisible: true, position: 'bottom' }, + fittingFunction: 'None', preferredSeriesType: 'bar', layers: [ { @@ -368,6 +369,7 @@ describe('xy_suggestions', () => { const currentState: XYState = { legend: { isVisible: true, position: 'bottom' }, preferredSeriesType: 'bar', + fittingFunction: 'None', layers: [ { accessors: ['price', 'quantity'], @@ -408,6 +410,7 @@ describe('xy_suggestions', () => { (generateId as jest.Mock).mockReturnValueOnce('dummyCol'); const currentState: XYState = { legend: { isVisible: true, position: 'bottom' }, + fittingFunction: 'None', preferredSeriesType: 'bar', layers: [ { @@ -440,6 +443,7 @@ describe('xy_suggestions', () => { const currentState: XYState = { legend: { isVisible: true, position: 'bottom' }, preferredSeriesType: 'bar', + fittingFunction: 'None', layers: [ { accessors: ['price'], @@ -474,6 +478,7 @@ describe('xy_suggestions', () => { const currentState: XYState = { legend: { isVisible: true, position: 'bottom' }, preferredSeriesType: 'bar', + fittingFunction: 'None', layers: [ { accessors: ['price', 'quantity'], @@ -512,6 +517,7 @@ describe('xy_suggestions', () => { const currentState: XYState = { legend: { isVisible: true, position: 'bottom' }, preferredSeriesType: 'bar', + fittingFunction: 'None', layers: [ { accessors: ['price'], @@ -551,6 +557,7 @@ describe('xy_suggestions', () => { const currentState: XYState = { legend: { isVisible: true, position: 'bottom' }, preferredSeriesType: 'bar', + fittingFunction: 'None', layers: [ { accessors: ['price', 'quantity'], diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts index 9d0ebbb389c07..e0bfbd266f8f1 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts @@ -402,6 +402,7 @@ function buildSuggestion({ const state: State = { legend: currentState ? currentState.legend : { isVisible: true, position: Position.Right }, + fittingFunction: currentState?.fittingFunction || 'None', preferredSeriesType: seriesType, layers: [...keptLayers, newLayer], }; diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx index d38f51cb1621a..f321e0962caa8 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx @@ -11,7 +11,7 @@ import { Position } from '@elastic/charts'; import { I18nProvider } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { getSuggestions } from './xy_suggestions'; -import { DimensionEditor, LayerContextMenu } from './xy_config_panel'; +import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel'; import { Visualization, OperationMetadata, VisualizationType } from '../types'; import { State, PersistableState, SeriesType, visualizationTypes, LayerConfig } from './types'; import chartBarStackedSVG from '../assets/chart_bar_stacked.svg'; @@ -264,6 +264,15 @@ export const xyVisualization: Visualization = { ); }, + renderToolbar(domElement, props) { + render( + + + , + domElement + ); + }, + renderDimensionEditor(domElement, props) { render( diff --git a/x-pack/plugins/security_solution/common/endpoint/schema/common.ts b/x-pack/plugins/security_solution/common/endpoint/schema/common.ts index 7f8c938d54feb..fdb2570314cd0 100644 --- a/x-pack/plugins/security_solution/common/endpoint/schema/common.ts +++ b/x-pack/plugins/security_solution/common/endpoint/schema/common.ts @@ -6,6 +6,15 @@ import * as t from 'io-ts'; +export const compressionAlgorithm = t.keyof({ + none: null, + zlib: null, +}); + +export const encryptionAlgorithm = t.keyof({ + none: null, +}); + export const identifier = t.string; export const manifestVersion = t.string; @@ -15,8 +24,8 @@ export const manifestSchemaVersion = t.keyof({ }); export type ManifestSchemaVersion = t.TypeOf; +export const relativeUrl = t.string; + export const sha256 = t.string; export const size = t.number; - -export const url = t.string; diff --git a/x-pack/plugins/security_solution/common/endpoint/schema/manifest.ts b/x-pack/plugins/security_solution/common/endpoint/schema/manifest.ts index 470e9b13ef78a..2f03895d91c74 100644 --- a/x-pack/plugins/security_solution/common/endpoint/schema/manifest.ts +++ b/x-pack/plugins/security_solution/common/endpoint/schema/manifest.ts @@ -5,13 +5,26 @@ */ import * as t from 'io-ts'; -import { identifier, manifestSchemaVersion, manifestVersion, sha256, size, url } from './common'; +import { + compressionAlgorithm, + encryptionAlgorithm, + identifier, + manifestSchemaVersion, + manifestVersion, + relativeUrl, + sha256, + size, +} from './common'; export const manifestEntrySchema = t.exact( t.type({ - url, - sha256, - size, + relative_url: relativeUrl, + precompress_sha256: sha256, + precompress_size: size, + postcompress_sha256: sha256, + postcompress_size: size, + compression_algorithm: compressionAlgorithm, + encryption_algorithm: encryptionAlgorithm, }) ); diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx index b6db6eb93d77f..b002700d7eff0 100644 --- a/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx +++ b/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx @@ -69,6 +69,7 @@ interface AlertsHistogramPanelProps { showLinkToAlerts?: boolean; showTotalAlertsCount?: boolean; stackByOptions?: AlertsHistogramOption[]; + timelineId?: string; title?: string; to: number; updateDateRange: UpdateDateRange; @@ -98,8 +99,9 @@ export const AlertsHistogramPanel = memo( showLinkToAlerts = false, showTotalAlertsCount = false, stackByOptions, - to, + timelineId, title = i18n.HISTOGRAM_HEADER, + to, updateDateRange, }) => { // create a unique, but stable (across re-renders) query id @@ -163,11 +165,12 @@ export const AlertsHistogramPanel = memo( `draggable-legend-item-${uuid.v4()}-${selectedStackByOption.value}-${bucket.key}` ), field: selectedStackByOption.value, + timelineId, value: bucket.key, })) : NO_LEGEND_DATA, // eslint-disable-next-line react-hooks/exhaustive-deps - [alertsData, selectedStackByOption.value] + [alertsData, selectedStackByOption.value, timelineId] ); useEffect(() => { diff --git a/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx index 42fc2ac9b8453..fba8c3faa9237 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx @@ -117,6 +117,7 @@ interface BarChartComponentProps { barChart: ChartSeriesData[] | null | undefined; configs?: ChartSeriesConfigs | undefined; stackByField?: string; + timelineId?: string; } const NO_LEGEND_DATA: LegendItem[] = []; @@ -125,6 +126,7 @@ export const BarChartComponent: React.FC = ({ barChart, configs, stackByField, + timelineId, }) => { const { ref: measureRef, width, height } = useThrottledResizeObserver(); const legendItems: LegendItem[] = useMemo( @@ -135,11 +137,12 @@ export const BarChartComponent: React.FC = ({ dataProviderId: escapeDataProviderId( `draggable-legend-item-${uuid.v4()}-${stackByField}-${d.key}` ), + timelineId, field: stackByField, value: d.key, })) : NO_LEGEND_DATA, - [barChart, stackByField] + [barChart, stackByField, timelineId] ); const customHeight = get('customHeight', configs); diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx index cdda1733932d5..bb71e5e73475d 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx @@ -21,13 +21,14 @@ export interface LegendItem { color?: string; dataProviderId: string; field: string; + timelineId?: string; value: string; } const DraggableLegendItemComponent: React.FC<{ legendItem: LegendItem; }> = ({ legendItem }) => { - const { color, dataProviderId, field, value } = legendItem; + const { color, dataProviderId, field, timelineId, value } = legendItem; return ( @@ -44,6 +45,7 @@ const DraggableLegendItemComponent: React.FC<{ data-test-subj={`legend-item-${dataProviderId}`} field={field} id={dataProviderId} + timelineId={timelineId} value={value} /> ) : ( diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx index 3edc1d0d84b69..74efe2d34fcca 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx @@ -18,11 +18,10 @@ import { IdToDataProvider } from '../../store/drag_and_drop/model'; import { State } from '../../store/types'; import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider'; import { reArrangeProviders } from '../../../timelines/components/timeline/data_providers/helpers'; -import { ACTIVE_TIMELINE_REDUX_ID } from '../top_n'; import { ADDED_TO_TIMELINE_MESSAGE } from '../../hooks/translations'; import { useAddToTimelineSensor } from '../../hooks/use_add_to_timeline'; import { displaySuccessToast, useStateToaster } from '../toasters'; - +import { TimelineId } from '../../../../common/types/timeline'; import { addFieldToTimelineColumns, addProviderToTimeline, @@ -35,7 +34,7 @@ import { userIsReArrangingProviders, } from './helpers'; -// @ts-ignore +// @ts-expect-error window['__react-beautiful-dnd-disable-dev-warnings'] = true; interface Props { @@ -67,7 +66,7 @@ const onDragEndHandler = ({ destination: result.destination, dispatch, source: result.source, - timelineId: ACTIVE_TIMELINE_REDUX_ID, + timelineId: TimelineId.active, }); } else if (providerWasDroppedOnTimeline(result)) { addProviderToTimeline({ @@ -76,7 +75,7 @@ const onDragEndHandler = ({ dispatch, onAddedToTimeline, result, - timelineId: ACTIVE_TIMELINE_REDUX_ID, + timelineId: TimelineId.active, }); } else if (fieldWasDroppedOnTimelineColumns(result)) { addFieldToTimelineColumns({ @@ -130,7 +129,6 @@ export const DragDropContextWrapperComponent = React.memo {children} @@ -152,7 +150,7 @@ const emptyActiveTimelineDataProviders: DataProvider[] = []; // stable reference const mapStateToProps = (state: State) => { const activeTimelineDataProviders = - timelineSelectors.getTimelineByIdSelector()(state, ACTIVE_TIMELINE_REDUX_ID)?.dataProviders ?? + timelineSelectors.getTimelineByIdSelector()(state, TimelineId.active)?.dataProviders ?? emptyActiveTimelineDataProviders; const dataProviders = dragAndDropSelectors.dataProvidersSelector(state) ?? emptyDataProviders; diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx index 22b95f0d0c0e9..e7594365e8103 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react'; import { Draggable, DraggableProvided, @@ -22,7 +22,7 @@ import { DataProvider } from '../../../timelines/components/timeline/data_provid import { TruncatableText } from '../truncatable_text'; import { WithHoverActions } from '../with_hover_actions'; -import { DraggableWrapperHoverContent } from './draggable_wrapper_hover_content'; +import { DraggableWrapperHoverContent, useGetTimelineId } from './draggable_wrapper_hover_content'; import { getDraggableId, getDroppableId } from './helpers'; import { ProviderContainer } from './provider_container'; @@ -76,6 +76,7 @@ interface Props { dataProvider: DataProvider; inline?: boolean; render: RenderFunctionProp; + timelineId?: string; truncate?: boolean; onFilterAdded?: () => void; } @@ -100,16 +101,31 @@ export const getStyle = ( }; export const DraggableWrapper = React.memo( - ({ dataProvider, onFilterAdded, render, truncate }) => { + ({ dataProvider, onFilterAdded, render, timelineId, truncate }) => { + const draggableRef = useRef(null); + const [closePopOverTrigger, setClosePopOverTrigger] = useState(false); const [showTopN, setShowTopN] = useState(false); - const toggleTopN = useCallback(() => { - setShowTopN(!showTopN); - }, [setShowTopN, showTopN]); - + const [goGetTimelineId, setGoGetTimelineId] = useState(false); + const timelineIdFind = useGetTimelineId(draggableRef, goGetTimelineId); const [providerRegistered, setProviderRegistered] = useState(false); const dispatch = useDispatch(); + const handleClosePopOverTrigger = useCallback( + () => setClosePopOverTrigger((prevClosePopOverTrigger) => !prevClosePopOverTrigger), + [] + ); + + const toggleTopN = useCallback(() => { + setShowTopN((prevShowTopN) => { + const newShowTopN = !prevShowTopN; + if (newShowTopN === false) { + handleClosePopOverTrigger(); + } + return newShowTopN; + }); + }, [handleClosePopOverTrigger]); + const registerProvider = useCallback(() => { if (!providerRegistered) { dispatch(dragAndDropActions.registerProvider({ provider: dataProvider })); @@ -126,17 +142,19 @@ export const DraggableWrapper = React.memo( () => () => { unRegisterProvider(); }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [] + [unRegisterProvider] ); const hoverContent = useMemo( () => ( ( } /> ), - [dataProvider, onFilterAdded, showTopN, toggleTopN] + [ + dataProvider, + handleClosePopOverTrigger, + onFilterAdded, + showTopN, + timelineId, + timelineIdFind, + toggleTopN, + ] ); const renderContent = useCallback( @@ -184,7 +210,10 @@ export const DraggableWrapper = React.memo( { + provided.innerRef(e); + draggableRef.current = e; + }} data-test-subj="providerContainer" isDragging={snapshot.isDragging} registerProvider={registerProvider} @@ -214,7 +243,12 @@ export const DraggableWrapper = React.memo( ); return ( - + ); }, (prevProps, nextProps) => diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx index ee1dc73b27fe2..3507b0f8c447d 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx @@ -52,6 +52,7 @@ jest.mock('../../../timelines/components/manage_timeline', () => { return { ...original, useManageTimeline: () => ({ + getManageTimelineById: jest.fn().mockReturnValue({ indexToAdd: [] }), getTimelineFilterManager: mockGetTimelineFilterManager, isManagedTimeline: jest.fn().mockReturnValue(false), }), @@ -63,8 +64,10 @@ const timelineId = TimelineId.active; const field = 'process.name'; const value = 'nice'; const toggleTopN = jest.fn(); +const goGetTimelineId = jest.fn(); const defaultProps = { field, + goGetTimelineId, showTopN: false, timelineId, toggleTopN, @@ -130,6 +133,18 @@ describe('DraggableWrapperHoverContent', () => { wrapper.find(`[data-test-subj="filter-${hoverAction}-value"]`).first().exists() ).toBe(false); }); + + test(`it should call goGetTimelineId when user is over the 'Filter ${hoverAction} value' button`, () => { + const wrapper = mount( + + + + ); + const button = wrapper.find(`[data-test-subj="filter-${hoverAction}-value"]`).first(); + button.simulate('mouseenter'); + expect(goGetTimelineId).toHaveBeenCalledWith(true); + }); + describe('when run in the context of a timeline', () => { let wrapper: ReactWrapper; let onFilterAdded: () => void; @@ -151,6 +166,7 @@ describe('DraggableWrapperHoverContent', () => { ); }); + test('when clicked, it adds a filter to the timeline when running in the context of a timeline', () => { wrapper.find(`[data-test-subj="filter-${hoverAction}-value"]`).first().simulate('click'); wrapper.update(); @@ -459,6 +475,24 @@ describe('DraggableWrapperHoverContent', () => { expect(wrapper.find('[data-test-subj="show-top-field"]').first().exists()).toBe(false); }); + test(`it should invokes goGetTimelineId when user is over the 'Show top field' button`, () => { + const whitelistedField = 'signal.rule.name'; + const wrapper = mount( + + + + ); + const button = wrapper.find(`[data-test-subj="show-top-field"]`).first(); + button.simulate('mouseenter'); + expect(goGetTimelineId).toHaveBeenCalledWith(true); + }); + test(`invokes the toggleTopN function when the 'Show top field' button is clicked`, async () => { const whitelistedField = 'signal.rule.name'; const wrapper = mount( diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx index 4efdea5eee43b..a951bfa98d64b 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx @@ -5,7 +5,7 @@ */ import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useMemo, useState, useEffect } from 'react'; import { DraggableId } from 'react-beautiful-dnd'; import { getAllFieldsByName, useWithSource } from '../../containers/source'; @@ -19,20 +19,25 @@ import { allowTopN } from './helpers'; import * as i18n from './translations'; import { useManageTimeline } from '../../../timelines/components/manage_timeline'; import { TimelineId } from '../../../../common/types/timeline'; +import { SELECTOR_TIMELINE_BODY_CLASS_NAME } from '../../../timelines/components/timeline/styles'; interface Props { + closePopOver?: () => void; draggableId?: DraggableId; field: string; + goGetTimelineId?: (args: boolean) => void; onFilterAdded?: () => void; showTopN: boolean; - timelineId?: string; + timelineId?: string | null; toggleTopN: () => void; value?: string[] | string | null; } const DraggableWrapperHoverContentComponent: React.FC = ({ + closePopOver, draggableId, field, + goGetTimelineId, onFilterAdded, showTopN, timelineId, @@ -44,17 +49,37 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ const filterManagerBackup = useMemo(() => kibana.services.data.query.filterManager, [ kibana.services.data.query.filterManager, ]); - const { getTimelineFilterManager } = useManageTimeline(); + const { getManageTimelineById, getTimelineFilterManager } = useManageTimeline(); const filterManager = useMemo( () => - timelineId === TimelineId.active || - (draggableId != null && draggableId?.includes(TimelineId.active)) + timelineId === TimelineId.active ? getTimelineFilterManager(TimelineId.active) : filterManagerBackup, - [draggableId, timelineId, getTimelineFilterManager, filterManagerBackup] + [timelineId, getTimelineFilterManager, filterManagerBackup] ); + // Regarding data from useManageTimeline: + // * `indexToAdd`, which enables the alerts index to be appended to + // the `indexPattern` returned by `useWithSource`, may only be populated when + // this component is rendered in the context of the active timeline. This + // behavior enables the 'All events' view by appending the alerts index + // to the index pattern. + const { indexToAdd } = useMemo( + () => + timelineId === TimelineId.active + ? getManageTimelineById(TimelineId.active) + : { indexToAdd: null }, + [getManageTimelineById, timelineId] + ); + + const handleStartDragToTimeline = useCallback(() => { + startDragToTimeline(); + if (closePopOver != null) { + closePopOver(); + } + }, [closePopOver, startDragToTimeline]); + const filterForValue = useCallback(() => { const filter = value?.length === 0 ? createFilter(field, undefined) : createFilter(field, value); @@ -62,13 +87,15 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ if (activeFilterManager != null) { activeFilterManager.addFilters(filter); - + if (closePopOver != null) { + closePopOver(); + } if (onFilterAdded != null) { onFilterAdded(); } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [field, value, filterManager, onFilterAdded]); + }, [closePopOver, field, value, filterManager, onFilterAdded]); const filterOutValue = useCallback(() => { const filter = @@ -78,14 +105,23 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ if (activeFilterManager != null) { activeFilterManager.addFilters(filter); + if (closePopOver != null) { + closePopOver(); + } if (onFilterAdded != null) { onFilterAdded(); } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [field, value, filterManager, onFilterAdded]); + }, [closePopOver, field, value, filterManager, onFilterAdded]); - const { browserFields } = useWithSource(); + const handleGoGetTimelineId = useCallback(() => { + if (goGetTimelineId != null && timelineId == null) { + goGetTimelineId(true); + } + }, [goGetTimelineId, timelineId]); + + const { browserFields, indexPattern } = useWithSource('default', indexToAdd); return ( <> @@ -97,6 +133,7 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ data-test-subj="filter-for-value" iconType="magnifyWithPlus" onClick={filterForValue} + onMouseEnter={handleGoGetTimelineId} /> )} @@ -109,6 +146,7 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ data-test-subj="filter-out-value" iconType="magnifyWithMinus" onClick={filterOutValue} + onMouseEnter={handleGoGetTimelineId} /> )} @@ -120,7 +158,7 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ color="text" data-test-subj="add-to-timeline" iconType="timeline" - onClick={startDragToTimeline} + onClick={handleStartDragToTimeline} /> )} @@ -139,6 +177,7 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ data-test-subj="show-top-field" iconType="visBarVertical" onClick={toggleTopN} + onMouseEnter={handleGoGetTimelineId} /> )} @@ -147,7 +186,10 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ @@ -172,3 +214,30 @@ const DraggableWrapperHoverContentComponent: React.FC = ({ DraggableWrapperHoverContentComponent.displayName = 'DraggableWrapperHoverContentComponent'; export const DraggableWrapperHoverContent = React.memo(DraggableWrapperHoverContentComponent); + +export const useGetTimelineId = function ( + elem: React.MutableRefObject, + getTimelineId: boolean = false +) { + const [timelineId, setTimelineId] = useState(null); + + useEffect(() => { + let startElem: Element | (Node & ParentNode) | null = elem.current; + if (startElem != null && getTimelineId) { + for (; startElem && startElem !== document; startElem = startElem.parentNode) { + const myElem: Element = startElem as Element; + if ( + myElem != null && + myElem.classList != null && + myElem.classList.contains(SELECTOR_TIMELINE_BODY_CLASS_NAME) && + myElem.hasAttribute('data-timeline-id') + ) { + setTimelineId(myElem.getAttribute('data-timeline-id')); + break; + } + } + } + }, [elem, getTimelineId]); + + return timelineId; +}; diff --git a/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx b/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx index fcf007a4cf1ba..62a07550650aa 100644 --- a/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx @@ -21,6 +21,7 @@ export interface DefaultDraggableType { name?: string | null; queryValue?: string | null; children?: React.ReactNode; + timelineId?: string; tooltipContent?: React.ReactNode; } @@ -83,7 +84,7 @@ Content.displayName = 'Content'; * @param queryValue - defaults to `value`, this query overrides the `queryMatch.value` used by the `DataProvider` that represents the data */ export const DefaultDraggable = React.memo( - ({ id, field, value, name, children, tooltipContent, queryValue }) => + ({ id, field, value, name, children, timelineId, tooltipContent, queryValue }) => value != null ? ( ( ) } + timelineId={timelineId} /> ) : null ); diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx index e01ccf1e544bb..7b6e9fb21a3e3 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx @@ -147,7 +147,6 @@ export const getColumns = ({ data-test-subj="field-name" fieldId={field} onUpdateColumns={onUpdateColumns} - timelineId={contextId} /> )} diff --git a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx index 3e196c4b7bad4..31f7e1b7fac7c 100644 --- a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx @@ -53,6 +53,7 @@ export interface OwnProps extends QueryTemplateProps { showLegend?: boolean; stackByOptions: MatrixHistogramOption[]; subtitle?: string | GetSubTitle; + timelineId?: string; title: string | GetTitle; type: hostsModel.HostsType | networkModel.NetworkType; } @@ -94,6 +95,7 @@ export const MatrixHistogramComponent: React.FC< stackByOptions, startDate, subtitle, + timelineId, title, titleSize, dispatchSetAbsoluteRangeDatePicker, @@ -242,6 +244,7 @@ export const MatrixHistogramComponent: React.FC< barChart={barChartData} configs={barchartConfigs} stackByField={selectedStackByOption.value} + timelineId={timelineId} /> )} diff --git a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/types.ts b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/types.ts index a9e6cdd19bb20..f388409b443db 100644 --- a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/types.ts +++ b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/types.ts @@ -80,11 +80,12 @@ export interface MatrixHistogramQueryProps { } export interface MatrixHistogramProps extends MatrixHistogramBasicProps { + legendPosition?: Position; scaleType?: ScaleType; - yTickFormatter?: (value: number) => string; showLegend?: boolean; showSpacer?: boolean; - legendPosition?: Position; + timelineId?: string; + yTickFormatter?: (value: number) => string; } export interface HistogramBucket { diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx index 336f906b3bed0..503e9983692f1 100644 --- a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx @@ -15,17 +15,19 @@ import { SUB_PLUGINS_REDUCER, kibanaObservable, createSecuritySolutionStorageMock, + mockIndexPattern, } from '../../mock'; import { createKibanaCoreStartMock } from '../../mock/kibana_core'; import { FilterManager } from '../../../../../../../src/plugins/data/public'; import { createStore, State } from '../../store'; import { Props } from './top_n'; -import { ACTIVE_TIMELINE_REDUX_ID, StatefulTopN } from '.'; +import { StatefulTopN } from '.'; import { ManageGlobalTimeline, timelineDefaults, } from '../../../timelines/components/manage_timeline'; +import { TimelineId } from '../../../../common/types/timeline'; jest.mock('react-router-dom', () => { const original = jest.requireActual('react-router-dom'); @@ -94,9 +96,9 @@ const state: State = { timeline: { ...mockGlobalState.timeline, timelineById: { - [ACTIVE_TIMELINE_REDUX_ID]: { + [TimelineId.active]: { ...mockGlobalState.timeline.timelineById.test, - id: ACTIVE_TIMELINE_REDUX_ID, + id: TimelineId.active, dataProviders: [ { id: @@ -189,6 +191,9 @@ describe('StatefulTopN', () => { { beforeEach(() => { filterManager = new FilterManager(mockUiSettingsForFilterManager); const manageTimelineForTesting = { - [ACTIVE_TIMELINE_REDUX_ID]: { + [TimelineId.active]: { ...timelineDefaults, - id: ACTIVE_TIMELINE_REDUX_ID, + id: TimelineId.active, filterManager, }, }; @@ -278,6 +283,9 @@ describe('StatefulTopN', () => { { const filterManager = new FilterManager(mockUiSettingsForFilterManager); const manageTimelineForTesting = { - [ACTIVE_TIMELINE_REDUX_ID]: { + [TimelineId.active]: { ...timelineDefaults, - id: ACTIVE_TIMELINE_REDUX_ID, + id: TimelineId.active, filterManager, documentType: 'alerts', }, @@ -356,6 +364,9 @@ describe('StatefulTopN', () => { { // filters that appear at the top of most views in the app, and all the // filters in the active timeline: const mapStateToProps = (state: State) => { - const activeTimeline: TimelineModel = - getTimeline(state, ACTIVE_TIMELINE_REDUX_ID) ?? timelineDefaults; + const activeTimeline: TimelineModel = getTimeline(state, TimelineId.active) ?? timelineDefaults; const activeTimelineFilters = activeTimeline.filters ?? EMPTY_FILTERS; const activeTimelineInput: inputsModel.InputsRange = getInputsTimeline(state); @@ -48,7 +49,7 @@ const makeMapStateToProps = () => { activeTimelineEventType: activeTimeline.eventType, activeTimelineFilters, activeTimelineFrom: activeTimelineInput.timerange.from, - activeTimelineKqlQueryExpression: getKqlQueryTimeline(state, ACTIVE_TIMELINE_REDUX_ID), + activeTimelineKqlQueryExpression: getKqlQueryTimeline(state, TimelineId.active), activeTimelineTo: activeTimelineInput.timerange.to, dataProviders: activeTimeline.dataProviders, globalQuery: getGlobalQuerySelector(state), @@ -64,9 +65,17 @@ const mapDispatchToProps = { setAbsoluteRangeDatePicker: dispatchSetAbsoluteRang const connector = connect(makeMapStateToProps, mapDispatchToProps); +// * `indexToAdd`, which enables the alerts index to be appended to +// the `indexPattern` returned by `useWithSource`, may only be populated when +// this component is rendered in the context of the active timeline. This +// behavior enables the 'All events' view by appending the alerts index +// to the index pattern. interface OwnProps { browserFields: BrowserFields; field: string; + indexPattern: IIndexPattern; + indexToAdd: string[] | null; + timelineId?: string; toggleTopN: () => void; onFilterAdded?: () => void; value?: string[] | string | null; @@ -83,48 +92,29 @@ const StatefulTopNComponent: React.FC = ({ browserFields, dataProviders, field, + indexPattern, + indexToAdd, globalFilters = EMPTY_FILTERS, globalQuery = EMPTY_QUERY, kqlMode, onFilterAdded, setAbsoluteRangeDatePicker, + timelineId, toggleTopN, value, }) => { const kibana = useKibana(); - // Regarding data from useTimelineTypeContext: - // * `documentType` (e.g. 'alerts') may only be populated in some views, - // e.g. the `Alerts` view on the `Detections` page. - // * `id` (`timelineId`) may only be populated when we are rendered in the - // context of the active timeline. - // * `indexToAdd`, which enables the alerts index to be appended to - // the `indexPattern` returned by `useWithSource`, may only be populated when - // this component is rendered in the context of the active timeline. This - // behavior enables the 'All events' view by appending the alerts index - // to the index pattern. - const { isManagedTimeline, getManageTimelineById } = useManageTimeline(); - const { documentType, id: timelineId, indexToAdd } = useMemo( - () => - isManagedTimeline(ACTIVE_TIMELINE_REDUX_ID) - ? getManageTimelineById(ACTIVE_TIMELINE_REDUX_ID) - : { documentType: null, id: null, indexToAdd: null }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [getManageTimelineById] - ); - const options = getOptions( - timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineEventType : undefined + timelineId === TimelineId.active ? activeTimelineEventType : undefined ); - const { indexPattern } = useWithSource('default', indexToAdd); - return ( {({ from, deleteQuery, setQuery, to }) => ( = ({ : undefined } data-test-subj="top-n" - defaultView={documentType?.toLocaleLowerCase() === 'alerts' ? 'alert' : options[0].value} - deleteQuery={timelineId === ACTIVE_TIMELINE_REDUX_ID ? undefined : deleteQuery} + defaultView={ + timelineId === TimelineId.alertsPage || timelineId === TimelineId.alertsRulesDetailsPage + ? 'alert' + : options[0].value + } + deleteQuery={timelineId === TimelineId.active ? undefined : deleteQuery} field={field} - filters={timelineId === ACTIVE_TIMELINE_REDUX_ID ? EMPTY_FILTERS : globalFilters} - from={timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineFrom : from} + filters={timelineId === TimelineId.active ? EMPTY_FILTERS : globalFilters} + from={timelineId === TimelineId.active ? activeTimelineFrom : from} indexPattern={indexPattern} indexToAdd={indexToAdd} options={options} - query={timelineId === ACTIVE_TIMELINE_REDUX_ID ? EMPTY_QUERY : globalQuery} + query={timelineId === TimelineId.active ? EMPTY_QUERY : globalQuery} setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} setAbsoluteRangeDatePickerTarget={ - timelineId === ACTIVE_TIMELINE_REDUX_ID ? 'timeline' : 'global' + timelineId === TimelineId.active ? 'timeline' : 'global' } setQuery={setQuery} - to={timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineTo : to} + timelineId={timelineId} + to={timelineId === TimelineId.active ? activeTimelineTo : to} toggleTopN={toggleTopN} onFilterAdded={onFilterAdded} value={value} diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.tsx index 0ccb7e1e72f1f..7d19bf21271aa 100644 --- a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.tsx +++ b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.tsx @@ -5,7 +5,7 @@ */ import { EuiButtonIcon, EuiSuperSelect } from '@elastic/eui'; -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { ActionCreator } from 'typescript-fsa'; @@ -67,6 +67,7 @@ export interface Props { refetch: inputsModel.Refetch; }) => void; to: number; + timelineId?: string; toggleTopN: () => void; onFilterAdded?: () => void; value?: string[] | string | null; @@ -89,12 +90,17 @@ const TopNComponent: React.FC = ({ setAbsoluteRangeDatePicker, setAbsoluteRangeDatePickerTarget, setQuery, + timelineId, to, toggleTopN, }) => { const [view, setView] = useState(defaultView); const onViewSelected = useCallback((value: string) => setView(value as EventType), [setView]); + useEffect(() => { + setView(defaultView); + }, [defaultView]); + const headerChildren = useMemo( () => ( = ({ setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget} setQuery={setQuery} showSpacer={false} + timelineId={timelineId} to={to} /> ) : ( @@ -145,6 +152,7 @@ const TopNComponent: React.FC = ({ setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget} setQuery={setQuery} + timelineId={timelineId} to={to} /> )} diff --git a/x-pack/plugins/security_solution/public/common/components/with_hover_actions/index.tsx b/x-pack/plugins/security_solution/public/common/components/with_hover_actions/index.tsx index 8679dae448332..361779a4a33b2 100644 --- a/x-pack/plugins/security_solution/public/common/components/with_hover_actions/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/with_hover_actions/index.tsx @@ -5,7 +5,7 @@ */ import { EuiPopover } from '@elastic/eui'; -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { IS_DRAGGING_CLASS_NAME } from '../drag_and_drop/helpers'; @@ -22,6 +22,7 @@ interface Props { * Always show the hover menu contents (default: false) */ alwaysShow?: boolean; + closePopOverTrigger?: boolean; /** * The contents of the hover menu. It is highly recommended you wrap this * content in a `div` with `position: absolute` to prevent it from effecting @@ -47,7 +48,8 @@ interface Props { * provides a signal to the content that the user is in a hover state. */ export const WithHoverActions = React.memo( - ({ alwaysShow = false, hoverContent, render }) => { + ({ alwaysShow = false, closePopOverTrigger, hoverContent, render }) => { + const [isOpen, setIsOpen] = useState(hoverContent != null && alwaysShow); const [showHoverContent, setShowHoverContent] = useState(false); const onMouseEnter = useCallback(() => { // NOTE: the following read from the DOM is expensive, but not as @@ -64,10 +66,16 @@ export const WithHoverActions = React.memo( const content = useMemo(() => <>{render(showHoverContent)}, [render, showHoverContent]); - const isOpen = hoverContent != null && (showHoverContent || alwaysShow); + useEffect(() => { + setIsOpen(hoverContent != null && (showHoverContent || alwaysShow)); + }, [hoverContent, showHoverContent, alwaysShow]); - const popover = useMemo(() => { - return ( + useEffect(() => { + setShowHoverContent(false); + }, [closePopOverTrigger]); + + return ( +
( isOpen={isOpen} panelPaddingSize={!alwaysShow ? 's' : 'none'} > - {isOpen ? hoverContent : null} + {isOpen ? <>{hoverContent} : null} - ); - }, [content, onMouseLeave, isOpen, alwaysShow, hoverContent]); - - return ( -
- {popover}
); } diff --git a/x-pack/plugins/security_solution/public/common/containers/source/index.tsx b/x-pack/plugins/security_solution/public/common/containers/source/index.tsx index 9aa3b007511a1..4f42f20c45ae1 100644 --- a/x-pack/plugins/security_solution/public/common/containers/source/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/source/index.tsx @@ -97,7 +97,7 @@ export const useWithSource = ( const [configIndex] = useUiSetting$(DEFAULT_INDEX_KEY); const defaultIndex = useMemo(() => { if (indexToAdd != null && !isEmpty(indexToAdd)) { - return [...(!onlyCheckIndexToAdd ? configIndex : []), ...indexToAdd]; + return onlyCheckIndexToAdd ? indexToAdd : [...configIndex, ...indexToAdd]; } return configIndex; }, [configIndex, indexToAdd, onlyCheckIndexToAdd]); @@ -135,41 +135,32 @@ export const useWithSource = ( }, }, }); - if (!isSubscribed) { - return setState((prevState) => ({ - ...prevState, + + if (isSubscribed) { + setState({ loading: false, - })); + indicesExist: indicesExistOrDataTemporarilyUnavailable( + get('data.source.status.indicesExist', result) + ), + browserFields: getBrowserFields( + defaultIndex.join(), + get('data.source.status.indexFields', result) + ), + indexPattern: getIndexFields( + defaultIndex.join(), + get('data.source.status.indexFields', result) + ), + errorMessage: null, + }); } - - setState({ - loading: false, - indicesExist: indicesExistOrDataTemporarilyUnavailable( - get('data.source.status.indicesExist', result) - ), - browserFields: getBrowserFields( - defaultIndex.join(), - get('data.source.status.indexFields', result) - ), - indexPattern: getIndexFields( - defaultIndex.join(), - get('data.source.status.indexFields', result) - ), - errorMessage: null, - }); } catch (error) { - if (!isSubscribed) { - return setState((prevState) => ({ + if (isSubscribed) { + setState((prevState) => ({ ...prevState, loading: false, + errorMessage: error.message, })); } - - setState((prevState) => ({ - ...prevState, - loading: false, - errorMessage: error.message, - })); } } diff --git a/x-pack/plugins/security_solution/public/common/lib/keury/index.test.ts b/x-pack/plugins/security_solution/public/common/lib/keury/index.test.ts index 4e2b11b24e5a9..e84438581fcde 100644 --- a/x-pack/plugins/security_solution/public/common/lib/keury/index.test.ts +++ b/x-pack/plugins/security_solution/public/common/lib/keury/index.test.ts @@ -26,33 +26,33 @@ describe('Kuery escape', () => { expect(escapeKuery(value)).to.be(expected); }); - it('should escape keywords', () => { + it('should NOT escape keywords', () => { const value = 'foo and bar or baz not qux'; - const expected = 'foo \\and bar \\or baz \\not qux'; + const expected = 'foo and bar or baz not qux'; expect(escapeKuery(value)).to.be(expected); }); - it('should escape keywords next to each other', () => { + it('should NOT escape keywords next to each other', () => { const value = 'foo and bar or not baz'; - const expected = 'foo \\and bar \\or \\not baz'; + const expected = 'foo and bar or not baz'; expect(escapeKuery(value)).to.be(expected); }); it('should not escape keywords without surrounding spaces', () => { const value = 'And this has keywords, or does it not?'; - const expected = 'And this has keywords, \\or does it not?'; + const expected = 'And this has keywords, or does it not?'; expect(escapeKuery(value)).to.be(expected); }); - it('should escape uppercase keywords', () => { + it('should NOT escape uppercase keywords', () => { const value = 'foo AND bar'; - const expected = 'foo \\AND bar'; + const expected = 'foo AND bar'; expect(escapeKuery(value)).to.be(expected); }); - it('should escape both keywords and special characters', () => { + it('should escape special characters and NOT keywords', () => { const value = 'Hello, "world", and to meet you!'; - const expected = 'Hello, \\"world\\", \\and to meet you!'; + const expected = 'Hello, \\"world\\", and to meet you!'; expect(escapeKuery(value)).to.be(expected); }); diff --git a/x-pack/plugins/security_solution/public/common/lib/keury/index.ts b/x-pack/plugins/security_solution/public/common/lib/keury/index.ts index bd4d96a98c815..b06a6ec10f48e 100644 --- a/x-pack/plugins/security_solution/public/common/lib/keury/index.ts +++ b/x-pack/plugins/security_solution/public/common/lib/keury/index.ts @@ -75,11 +75,12 @@ const escapeWhitespace = (val: string) => const escapeSpecialCharacters = (val: string) => val.replace(/["]/g, '\\$&'); // $& means the whole matched string // See the Keyword rule in kuery.peg -const escapeAndOr = (val: string) => val.replace(/(\s+)(and|or)(\s+)/gi, '$1\\$2$3'); +// I do not think that we need that anymore since we are doing a full match_phrase all the time now => return `"${escapeKuery(val)}"`; +// const escapeAndOr = (val: string) => val.replace(/(\s+)(and|or)(\s+)/gi, '$1\\$2$3'); -const escapeNot = (val: string) => val.replace(/not(\s+)/gi, '\\$&'); +// const escapeNot = (val: string) => val.replace(/not(\s+)/gi, '\\$&'); -export const escapeKuery = flow(escapeSpecialCharacters, escapeAndOr, escapeNot, escapeWhitespace); +export const escapeKuery = flow(escapeSpecialCharacters, escapeWhitespace); export const convertToBuildEsQuery = ({ config, diff --git a/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx b/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx index fe3f9f8ecda33..7d42f744a2613 100644 --- a/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx @@ -60,6 +60,7 @@ interface Props { refetch: inputsModel.Refetch; }) => void; showSpacer?: boolean; + timelineId?: string; to: number; } @@ -81,6 +82,7 @@ const EventsByDatasetComponent: React.FC = ({ setAbsoluteRangeDatePickerTarget, setQuery, showSpacer = true, + timelineId, to, }) => { // create a unique, but stable (across re-renders) query id @@ -177,6 +179,7 @@ const EventsByDatasetComponent: React.FC = ({ showSpacer={showSpacer} sourceId="default" startDate={from} + timelineId={timelineId} type={HostsType.page} {...eventsByDatasetHistogramConfigs} title={onlyField != null ? i18n.TOP(onlyField) : eventsByDatasetHistogramConfigs.title} diff --git a/x-pack/plugins/security_solution/public/overview/components/signals_by_category/index.tsx b/x-pack/plugins/security_solution/public/overview/components/signals_by_category/index.tsx index 5010fd9c06eb7..41152dabe2ad8 100644 --- a/x-pack/plugins/security_solution/public/overview/components/signals_by_category/index.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/signals_by_category/index.tsx @@ -37,6 +37,7 @@ interface Props { loading: boolean; refetch: inputsModel.Refetch; }) => void; + timelineId?: string; to: number; } @@ -50,6 +51,7 @@ const SignalsByCategoryComponent: React.FC = ({ setAbsoluteRangeDatePicker, setAbsoluteRangeDatePickerTarget = 'global', setQuery, + timelineId, to, }) => { const { signalIndexName } = useSignalIndex(); @@ -83,6 +85,7 @@ const SignalsByCategoryComponent: React.FC = ({ showLinkToAlerts={onlyField == null ? true : false} stackByOptions={onlyField == null ? alertsHistogramOptions : undefined} legendPosition={'right'} + timelineId={timelineId} to={to} title={i18n.ALERT_COUNT} updateDateRange={updateDateRangeCallback} diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_items.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_items.tsx index aaad9cf145ab7..8922434746234 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_items.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_items.tsx @@ -152,7 +152,6 @@ export const getFieldItems = ({ fieldId={field.name || ''} highlight={highlight} onUpdateColumns={onUpdateColumns} - timelineId={timelineId} /> diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx index da0cbb99b8671..1f917c664e813 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx @@ -24,7 +24,6 @@ const defaultProps = { }), fieldId: timestampFieldId, onUpdateColumns: jest.fn(), - timelineId: 'timeline-id', }; describe('FieldName', () => { @@ -46,8 +45,7 @@ describe('FieldName', () => { ); - - wrapper.simulate('mouseenter'); + wrapper.find('div').at(1).simulate('mouseenter'); wrapper.update(); expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.tsx index 985c8b35094ef..62e41d967cb9a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.tsx @@ -5,13 +5,16 @@ */ import { EuiHighlight, EuiText } from '@elastic/eui'; -import React, { useCallback, useState, useMemo } from 'react'; +import React, { useCallback, useState, useMemo, useRef } from 'react'; import styled from 'styled-components'; import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model'; import { OnUpdateColumns } from '../timeline/events'; import { WithHoverActions } from '../../../common/components/with_hover_actions'; -import { DraggableWrapperHoverContent } from '../../../common/components/drag_and_drop/draggable_wrapper_hover_content'; +import { + DraggableWrapperHoverContent, + useGetTimelineId, +} from '../../../common/components/drag_and_drop/draggable_wrapper_hover_content'; /** * The name of a (draggable) field @@ -77,23 +80,34 @@ export const FieldName = React.memo<{ fieldId: string; highlight?: string; onUpdateColumns: OnUpdateColumns; - timelineId: string; -}>(({ fieldId, highlight = '', timelineId }) => { +}>(({ fieldId, highlight = '' }) => { + const containerRef = useRef(null); + const [closePopOverTrigger, setClosePopOverTrigger] = useState(false); const [showTopN, setShowTopN] = useState(false); + const [goGetTimelineId, setGoGetTimelineId] = useState(false); + const timelineIdFind = useGetTimelineId(containerRef, goGetTimelineId); + const toggleTopN = useCallback(() => { - setShowTopN(!showTopN); - }, [setShowTopN, showTopN]); + setShowTopN((prevShowTopN) => !prevShowTopN); + }, []); + + const handleClosePopOverTrigger = useCallback( + () => setClosePopOverTrigger((prevClosePopOverTrigger) => !prevClosePopOverTrigger), + [] + ); const hoverContent = useMemo( () => ( ), - [fieldId, showTopN, toggleTopN, timelineId] + [fieldId, handleClosePopOverTrigger, showTopN, timelineIdFind, toggleTopN] ); const render = useCallback( @@ -109,7 +123,16 @@ export const FieldName = React.memo<{ [fieldId, highlight] ); - return ; + return ( +
+ +
+ ); }); FieldName.displayName = 'FieldName'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/manage_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/manage_timeline/index.tsx index be655f7465a1b..3b40c36fccd16 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/manage_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/manage_timeline/index.tsx @@ -57,6 +57,11 @@ type ActionManageTimeline = id: string; payload: boolean; } + | { + type: 'SET_INDEX_TO_ADD'; + id: string; + payload: string[]; + } | { type: 'SET_TIMELINE_ACTIONS'; id: string; @@ -81,7 +86,10 @@ export const timelineDefaults = { title: i18n.EVENTS, unit: (n: number) => i18n.UNIT(n), }; -const reducerManageTimeline = (state: ManageTimelineById, action: ActionManageTimeline) => { +const reducerManageTimeline = ( + state: ManageTimelineById, + action: ActionManageTimeline +): ManageTimelineById => { switch (action.type) { case 'INITIALIZE_TIMELINE': return { @@ -91,7 +99,15 @@ const reducerManageTimeline = (state: ManageTimelineById, action: ActionManageTi ...state[action.id], ...action.payload, }, - }; + } as ManageTimelineById; + case 'SET_INDEX_TO_ADD': + return { + ...state, + [action.id]: { + ...state[action.id], + indexToAdd: action.payload, + }, + } as ManageTimelineById; case 'SET_TIMELINE_ACTIONS': case 'SET_TIMELINE_FILTER_MANAGER': return { @@ -100,7 +116,7 @@ const reducerManageTimeline = (state: ManageTimelineById, action: ActionManageTi ...state[action.id], ...action.payload, }, - }; + } as ManageTimelineById; case 'SET_IS_LOADING': return { ...state, @@ -108,7 +124,7 @@ const reducerManageTimeline = (state: ManageTimelineById, action: ActionManageTi ...state[action.id], isLoading: action.payload, }, - }; + } as ManageTimelineById; default: return state; } @@ -119,6 +135,7 @@ interface UseTimelineManager { getTimelineFilterManager: (id: string) => FilterManager | undefined; initializeTimeline: (newTimeline: ManageTimelineInit) => void; isManagedTimeline: (id: string) => boolean; + setIndexToAdd: (indexToAddArgs: { id: string; indexToAdd: string[] }) => void; setIsTimelineLoading: (isLoadingArgs: { id: string; isLoading: boolean }) => void; setTimelineRowActions: (actionsArgs: { id: string; @@ -129,10 +146,9 @@ interface UseTimelineManager { } const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseTimelineManager => { - const [state, dispatch] = useReducer( - reducerManageTimeline, - manageTimelineForTesting ?? initManageTimeline - ); + const [state, dispatch] = useReducer< + (state: ManageTimelineById, action: ActionManageTimeline) => ManageTimelineById + >(reducerManageTimeline, manageTimelineForTesting ?? initManageTimeline); const initializeTimeline = useCallback((newTimeline: ManageTimelineInit) => { dispatch({ @@ -183,8 +199,16 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT [] ); + const setIndexToAdd = useCallback(({ id, indexToAdd }: { id: string; indexToAdd: string[] }) => { + dispatch({ + type: 'SET_INDEX_TO_ADD', + id, + payload: indexToAdd, + }); + }, []); + const getTimelineFilterManager = useCallback( - (id: string): FilterManager | undefined => state[id].filterManager, + (id: string): FilterManager | undefined => state[id]?.filterManager, [state] ); const getManageTimelineById = useCallback( @@ -195,8 +219,7 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT initializeTimeline({ id }); return { ...timelineDefaults, id }; }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [state] + [initializeTimeline, state] ); const isManagedTimeline = useCallback((id: string): boolean => state[id] != null, [state]); @@ -205,6 +228,7 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT getTimelineFilterManager, initializeTimeline, isManagedTimeline, + setIndexToAdd, setIsTimelineLoading, setTimelineRowActions, setTimelineFilterManager, @@ -214,6 +238,7 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT const init = { getManageTimelineById: (id: string) => ({ ...timelineDefaults, id }), getTimelineFilterManager: () => undefined, + setIndexToAdd: () => undefined, isManagedTimeline: () => false, initializeTimeline: () => noop, setIsTimelineLoading: () => noop, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx index 51bf883ed2d61..43ea5e905ca8b 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx @@ -17,6 +17,7 @@ import { columnRenderers, rowRenderers } from './renderers'; import { Sort } from './sort'; import { wait } from '../../../../common/lib/helpers'; import { useMountAppended } from '../../../../common/utils/use_mount_appended'; +import { SELECTOR_TIMELINE_BODY_CLASS_NAME } from '../styles'; const testBodyHeight = 700; const mockGetNotesByIds = (eventId: string[]) => []; @@ -133,6 +134,20 @@ describe('Body', () => { ).toEqual(true); }); }, 20000); + + test(`it add attribute data-timeline-id in ${SELECTOR_TIMELINE_BODY_CLASS_NAME}`, () => { + const wrapper = mount( + + + + ); + expect( + wrapper + .find(`[data-timeline-id="timeline-test"].${SELECTOR_TIMELINE_BODY_CLASS_NAME}`) + .first() + .exists() + ).toEqual(true); + }); }); describe('action on event', () => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx index 46895c86de084..6a296170fffde 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx @@ -139,6 +139,7 @@ export const Body = React.memo( )} ( pinnedEventIds={pinnedEventIds} rowRenderers={showRowRenderers ? rowRenderers : [plainRowRenderer]} selectedEventIds={selectedEventIds} - show={id === ACTIVE_TIMELINE_REDUX_ID ? show : true} + show={id === TimelineId.active ? show : true} showCheckboxes={showCheckboxes} sort={sort} toggleColumn={toggleColumn} diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx index d1a58dafcb328..47d848021ba43 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx @@ -14,16 +14,17 @@ import { IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME } from '../../../common/component /** * TIMELINE BODY */ +export const SELECTOR_TIMELINE_BODY_CLASS_NAME = 'securitySolutionTimeline__body'; // SIDE EFFECT: the following creates a global class selector export const TimelineBodyGlobalStyle = createGlobalStyle` - body.${IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME} .siemTimeline__body { + body.${IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME} .${SELECTOR_TIMELINE_BODY_CLASS_NAME} { overflow: hidden; } `; export const TimelineBody = styled.div.attrs(({ className = '' }) => ({ - className: `siemTimeline__body ${className}`, + className: `${SELECTOR_TIMELINE_BODY_CLASS_NAME} ${className}`, }))<{ bodyHeight?: number; visible: boolean }>` height: ${({ bodyHeight }) => (bodyHeight ? `${bodyHeight}px` : 'auto')}; overflow: auto; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx index 07d4b004d2eda..18deaf0158723 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx @@ -174,6 +174,7 @@ export const TimelineComponent: React.FC = ({ const [isQueryLoading, setIsQueryLoading] = useState(false); const { initializeTimeline, + setIndexToAdd, setIsTimelineLoading, setTimelineFilterManager, setTimelineRowActions, @@ -188,12 +189,14 @@ export const TimelineComponent: React.FC = ({ }, []); useEffect(() => { setIsTimelineLoading({ id, isLoading: isQueryLoading || loadingIndexName }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [loadingIndexName, isQueryLoading]); + }, [loadingIndexName, id, isQueryLoading, setIsTimelineLoading]); useEffect(() => { setTimelineFilterManager({ id, filterManager }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [filterManager]); + }, [filterManager, id, setTimelineFilterManager]); + + useEffect(() => { + setIndexToAdd({ id, indexToAdd }); + }, [id, indexToAdd, setIndexToAdd]); return ( diff --git a/x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts b/x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts index 67a331f4ba677..ace5aec77ed2c 100644 --- a/x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts +++ b/x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts @@ -57,6 +57,8 @@ export const getPackageConfigCreateCallback = ( try { return updatedPackageConfig; } finally { + // TODO: confirm creation of package config + // then commit. await manifestManager.commit(wrappedManifest); } }; diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/common.ts b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/common.ts index 4c3153ca0ef11..b6a5bed9078ab 100644 --- a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/common.ts +++ b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/common.ts @@ -6,12 +6,12 @@ export const ArtifactConstants = { GLOBAL_ALLOWLIST_NAME: 'endpoint-exceptionlist', - SAVED_OBJECT_TYPE: 'endpoint:exceptions-artifact', + SAVED_OBJECT_TYPE: 'endpoint:user-artifact', SUPPORTED_OPERATING_SYSTEMS: ['linux', 'macos', 'windows'], SCHEMA_VERSION: '1.0.0', }; export const ManifestConstants = { - SAVED_OBJECT_TYPE: 'endpoint:exceptions-manifest', + SAVED_OBJECT_TYPE: 'endpoint:user-artifact-manifest', SCHEMA_VERSION: '1.0.0', }; diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/lists.ts b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/lists.ts index 7fd057afdbd55..2abb72234fecd 100644 --- a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/lists.ts +++ b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/lists.ts @@ -7,22 +7,20 @@ import { createHash } from 'crypto'; import { validate } from '../../../../common/validate'; -import { - Entry, - EntryNested, - EntryMatch, - EntryMatchAny, -} from '../../../../../lists/common/schemas/types/entries'; +import { Entry, EntryNested } from '../../../../../lists/common/schemas/types/entries'; import { FoundExceptionListItemSchema } from '../../../../../lists/common/schemas/response/found_exception_list_item_schema'; import { ExceptionListClient } from '../../../../../lists/server'; import { InternalArtifactSchema, TranslatedEntry, - TranslatedEntryMatch, - TranslatedEntryMatchAny, - TranslatedEntryNested, WrappedTranslatedExceptionList, wrappedExceptionList, + TranslatedEntryNestedEntry, + translatedEntryNestedEntry, + translatedEntry as translatedEntryType, + TranslatedEntryMatcher, + translatedEntryMatchMatcher, + translatedEntryMatchAnyMatcher, } from '../../schemas'; import { ArtifactConstants } from './common'; @@ -36,11 +34,14 @@ export async function buildArtifact( return { identifier: `${ArtifactConstants.GLOBAL_ALLOWLIST_NAME}-${os}-${schemaVersion}`, - sha256, - encoding: 'application/json', + compressionAlgorithm: 'none', + encryptionAlgorithm: 'none', + decompressedSha256: sha256, + compressedSha256: sha256, + decompressedSize: exceptionsBuffer.byteLength, + compressedSize: exceptionsBuffer.byteLength, created: Date.now(), body: exceptionsBuffer.toString('base64'), - size: exceptionsBuffer.byteLength, }; } @@ -92,66 +93,80 @@ export function translateToEndpointExceptions( exc: FoundExceptionListItemSchema, schemaVersion: string ): TranslatedEntry[] { - const translatedList: TranslatedEntry[] = []; - if (schemaVersion === '1.0.0') { - exc.data.forEach((list) => { - list.entries.forEach((entry) => { - const tEntry = translateEntry(schemaVersion, entry); - if (tEntry !== undefined) { - translatedList.push(tEntry); + return exc.data + .flatMap((list) => { + return list.entries; + }) + .reduce((entries: TranslatedEntry[], entry) => { + const translatedEntry = translateEntry(schemaVersion, entry); + if (translatedEntry !== undefined && translatedEntryType.is(translatedEntry)) { + entries.push(translatedEntry); } - }); - }); + return entries; + }, []); } else { throw new Error('unsupported schemaVersion'); } - return translatedList; +} + +function getMatcherFunction(field: string, matchAny?: boolean): TranslatedEntryMatcher { + return matchAny + ? field.endsWith('.text') + ? 'exact_caseless_any' + : 'exact_cased_any' + : field.endsWith('.text') + ? 'exact_caseless' + : 'exact_cased'; +} + +function normalizeFieldName(field: string): string { + return field.endsWith('.text') ? field.substring(0, field.length - 5) : field; } function translateEntry( schemaVersion: string, entry: Entry | EntryNested ): TranslatedEntry | undefined { - let translatedEntry; switch (entry.type) { case 'nested': { - const e = (entry as unknown) as EntryNested; - const nestedEntries: TranslatedEntry[] = []; - for (const nestedEntry of e.entries) { - const translation = translateEntry(schemaVersion, nestedEntry); - if (translation !== undefined) { - nestedEntries.push(translation); - } - } - translatedEntry = { + const nestedEntries = entry.entries.reduce( + (entries: TranslatedEntryNestedEntry[], nestedEntry) => { + const translatedEntry = translateEntry(schemaVersion, nestedEntry); + if (nestedEntry !== undefined && translatedEntryNestedEntry.is(translatedEntry)) { + entries.push(translatedEntry); + } + return entries; + }, + [] + ); + return { entries: nestedEntries, - field: e.field, + field: entry.field, type: 'nested', - } as TranslatedEntryNested; - break; + }; } case 'match': { - const e = (entry as unknown) as EntryMatch; - translatedEntry = { - field: e.field.endsWith('.text') ? e.field.substring(0, e.field.length - 5) : e.field, - operator: e.operator, - type: e.field.endsWith('.text') ? 'exact_caseless' : 'exact_cased', - value: e.value, - } as TranslatedEntryMatch; - break; + const matcher = getMatcherFunction(entry.field); + return translatedEntryMatchMatcher.is(matcher) + ? { + field: normalizeFieldName(entry.field), + operator: entry.operator, + type: matcher, + value: entry.value, + } + : undefined; + } + case 'match_any': { + const matcher = getMatcherFunction(entry.field, true); + return translatedEntryMatchAnyMatcher.is(matcher) + ? { + field: normalizeFieldName(entry.field), + operator: entry.operator, + type: matcher, + value: entry.value, + } + : undefined; } - case 'match_any': - { - const e = (entry as unknown) as EntryMatchAny; - translatedEntry = { - field: e.field.endsWith('.text') ? e.field.substring(0, e.field.length - 5) : e.field, - operator: e.operator, - type: e.field.endsWith('.text') ? 'exact_caseless_any' : 'exact_cased_any', - value: e.value, - } as TranslatedEntryMatchAny; - } - break; } - return translatedEntry || undefined; } diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest.test.ts b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest.test.ts index 0434e3d8ffcb2..da8a449e1b026 100644 --- a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest.test.ts +++ b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest.test.ts @@ -55,21 +55,33 @@ describe('manifest', () => { expect(manifest1.toEndpointFormat()).toStrictEqual({ artifacts: { 'endpoint-exceptionlist-linux-1.0.0': { - sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', - size: 268, - url: + compression_algorithm: 'none', + encryption_algorithm: 'none', + precompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + postcompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + precompress_size: 268, + postcompress_size: 268, + relative_url: '/api/endpoint/artifacts/download/endpoint-exceptionlist-linux-1.0.0/70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', }, 'endpoint-exceptionlist-macos-1.0.0': { - sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', - size: 268, - url: + compression_algorithm: 'none', + encryption_algorithm: 'none', + precompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + postcompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + precompress_size: 268, + postcompress_size: 268, + relative_url: '/api/endpoint/artifacts/download/endpoint-exceptionlist-macos-1.0.0/70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', }, 'endpoint-exceptionlist-windows-1.0.0': { - sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', - size: 268, - url: + compression_algorithm: 'none', + encryption_algorithm: 'none', + precompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + postcompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + precompress_size: 268, + postcompress_size: 268, + relative_url: '/api/endpoint/artifacts/download/endpoint-exceptionlist-windows-1.0.0/70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', }, }, @@ -107,7 +119,7 @@ describe('manifest', () => { test('Manifest returns data for given artifact', async () => { const artifact = artifacts[0]; - const returned = manifest1.getArtifact(`${artifact.identifier}-${artifact.sha256}`); + const returned = manifest1.getArtifact(`${artifact.identifier}-${artifact.compressedSha256}`); expect(returned).toEqual(artifact); }); diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.test.ts b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.test.ts index 34bd2b0f388e1..c8cbdfc2fc5f4 100644 --- a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.test.ts +++ b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.test.ts @@ -33,13 +33,17 @@ describe('manifest_entry', () => { }); test('Correct sha256 is returned', () => { - expect(manifestEntry.getSha256()).toEqual( + expect(manifestEntry.getCompressedSha256()).toEqual( + '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c' + ); + expect(manifestEntry.getDecompressedSha256()).toEqual( '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c' ); }); test('Correct size is returned', () => { - expect(manifestEntry.getSize()).toEqual(268); + expect(manifestEntry.getCompressedSize()).toEqual(268); + expect(manifestEntry.getDecompressedSize()).toEqual(268); }); test('Correct url is returned', () => { @@ -54,9 +58,13 @@ describe('manifest_entry', () => { test('Correct record is returned', () => { expect(manifestEntry.getRecord()).toEqual({ - sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', - size: 268, - url: + compression_algorithm: 'none', + encryption_algorithm: 'none', + precompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + postcompress_sha256: '70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', + precompress_size: 268, + postcompress_size: 268, + relative_url: '/api/endpoint/artifacts/download/endpoint-exceptionlist-windows-1.0.0/70d2e0ee5db0073b242df9af32e64447b932b73c3e66de3a922c61a4077b1a9c', }); }); diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.ts b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.ts index 00fd446bf14b5..860c2d7d704b2 100644 --- a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.ts +++ b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/manifest_entry.ts @@ -15,23 +15,31 @@ export class ManifestEntry { } public getDocId(): string { - return `${this.getIdentifier()}-${this.getSha256()}`; + return `${this.getIdentifier()}-${this.getCompressedSha256()}`; } public getIdentifier(): string { return this.artifact.identifier; } - public getSha256(): string { - return this.artifact.sha256; + public getCompressedSha256(): string { + return this.artifact.compressedSha256; } - public getSize(): number { - return this.artifact.size; + public getDecompressedSha256(): string { + return this.artifact.decompressedSha256; + } + + public getCompressedSize(): number { + return this.artifact.compressedSize; + } + + public getDecompressedSize(): number { + return this.artifact.decompressedSize; } public getUrl(): string { - return `/api/endpoint/artifacts/download/${this.getIdentifier()}/${this.getSha256()}`; + return `/api/endpoint/artifacts/download/${this.getIdentifier()}/${this.getCompressedSha256()}`; } public getArtifact(): InternalArtifactSchema { @@ -40,9 +48,13 @@ export class ManifestEntry { public getRecord(): ManifestEntrySchema { return { - sha256: this.getSha256(), - size: this.getSize(), - url: this.getUrl(), + compression_algorithm: 'none', + encryption_algorithm: 'none', + precompress_sha256: this.getDecompressedSha256(), + precompress_size: this.getDecompressedSize(), + postcompress_sha256: this.getCompressedSha256(), + postcompress_size: this.getCompressedSize(), + relative_url: this.getUrl(), }; } } diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/saved_object_mappings.ts b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/saved_object_mappings.ts index d38026fbcbbd9..5e61b278e87e4 100644 --- a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/saved_object_mappings.ts +++ b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/saved_object_mappings.ts @@ -16,11 +16,27 @@ export const exceptionsArtifactSavedObjectMappings: SavedObjectsType['mappings'] identifier: { type: 'keyword', }, - sha256: { + compressionAlgorithm: { type: 'keyword', + index: false, + }, + encryptionAlgorithm: { + type: 'keyword', + index: false, }, - encoding: { + compressedSha256: { type: 'keyword', + }, + compressedSize: { + type: 'long', + index: false, + }, + decompressedSha256: { + type: 'keyword', + index: false, + }, + decompressedSize: { + type: 'long', index: false, }, created: { @@ -31,10 +47,6 @@ export const exceptionsArtifactSavedObjectMappings: SavedObjectsType['mappings'] type: 'binary', index: false, }, - size: { - type: 'long', - index: false, - }, }, }; diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/task.ts b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/task.ts index 08d02e70dac16..78b60e9e61f3e 100644 --- a/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/task.ts +++ b/x-pack/plugins/security_solution/server/endpoint/lib/artifacts/task.ts @@ -14,7 +14,7 @@ import { EndpointAppContext } from '../../types'; export const ManifestTaskConstants = { TIMEOUT: '1m', - TYPE: 'securitySolution:endpoint:exceptions-packager', + TYPE: 'endpoint:user-artifact-packager', VERSION: '1.0.0', }; diff --git a/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/lists.ts b/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/lists.ts index 21d1105a313e7..d071896c537bf 100644 --- a/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/lists.ts +++ b/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/lists.ts @@ -20,6 +20,9 @@ export const translatedEntryMatchAny = t.exact( ); export type TranslatedEntryMatchAny = t.TypeOf; +export const translatedEntryMatchAnyMatcher = translatedEntryMatchAny.type.props.type; +export type TranslatedEntryMatchAnyMatcher = t.TypeOf; + export const translatedEntryMatch = t.exact( t.type({ field: t.string, @@ -33,11 +36,23 @@ export const translatedEntryMatch = t.exact( ); export type TranslatedEntryMatch = t.TypeOf; +export const translatedEntryMatchMatcher = translatedEntryMatch.type.props.type; +export type TranslatedEntryMatchMatcher = t.TypeOf; + +export const translatedEntryMatcher = t.union([ + translatedEntryMatchMatcher, + translatedEntryMatchAnyMatcher, +]); +export type TranslatedEntryMatcher = t.TypeOf; + +export const translatedEntryNestedEntry = t.union([translatedEntryMatch, translatedEntryMatchAny]); +export type TranslatedEntryNestedEntry = t.TypeOf; + export const translatedEntryNested = t.exact( t.type({ field: t.string, type: t.keyof({ nested: null }), - entries: t.array(t.union([translatedEntryMatch, translatedEntryMatchAny])), + entries: t.array(translatedEntryNestedEntry), }) ); export type TranslatedEntryNested = t.TypeOf; diff --git a/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/saved_objects.ts b/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/saved_objects.ts index 2e71ef98387f1..fe032586dda56 100644 --- a/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/saved_objects.ts +++ b/x-pack/plugins/security_solution/server/endpoint/schemas/artifacts/saved_objects.ts @@ -5,17 +5,26 @@ */ import * as t from 'io-ts'; -import { identifier, sha256, size } from '../../../../common/endpoint/schema/common'; -import { body, created, encoding } from './common'; +import { + compressionAlgorithm, + encryptionAlgorithm, + identifier, + sha256, + size, +} from '../../../../common/endpoint/schema/common'; +import { body, created } from './common'; export const internalArtifactSchema = t.exact( t.type({ identifier, - sha256, - encoding, + compressionAlgorithm, + encryptionAlgorithm, + decompressedSha256: sha256, + decompressedSize: size, + compressedSha256: sha256, + compressedSize: size, created, body, - size, }) ); diff --git a/x-pack/plugins/security_solution/server/endpoint/services/artifacts/artifact_client.ts b/x-pack/plugins/security_solution/server/endpoint/services/artifacts/artifact_client.ts index 4a3dcaae1bd3d..00ae802ba6f32 100644 --- a/x-pack/plugins/security_solution/server/endpoint/services/artifacts/artifact_client.ts +++ b/x-pack/plugins/security_solution/server/endpoint/services/artifacts/artifact_client.ts @@ -16,7 +16,7 @@ export class ArtifactClient { } public getArtifactId(artifact: InternalArtifactSchema) { - return `${artifact.identifier}-${artifact.sha256}`; + return `${artifact.identifier}-${artifact.compressedSha256}`; } public async getArtifact(id: string): Promise> { diff --git a/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.test.ts b/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.test.ts index bbb6fdfd50810..ef4f921cb537e 100644 --- a/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.test.ts +++ b/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.test.ts @@ -38,9 +38,13 @@ describe('manifest_manager', () => { schema_version: '1.0.0', artifacts: { [artifact.identifier]: { - sha256: artifact.sha256, - size: artifact.size, - url: `/api/endpoint/artifacts/download/${artifact.identifier}/${artifact.sha256}`, + compression_algorithm: 'none', + encryption_algorithm: 'none', + precompress_sha256: artifact.decompressedSha256, + postcompress_sha256: artifact.compressedSha256, + precompress_size: artifact.decompressedSize, + postcompress_size: artifact.compressedSize, + relative_url: `/api/endpoint/artifacts/download/${artifact.identifier}/${artifact.compressedSha256}`, }, }, }); diff --git a/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.ts b/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.ts index 33b0d5db575c6..e47a23b893b71 100644 --- a/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.ts +++ b/x-pack/plugins/security_solution/server/endpoint/services/artifacts/manifest_manager/manifest_manager.ts @@ -180,17 +180,15 @@ export class ManifestManager { this.logger.info(`Dispatching new manifest with diffs: ${showDiffs(wrappedManifest.diffs)}`); let paging = true; + let page = 1; let success = true; while (paging) { - const { items, total, page } = await this.packageConfigService.list( - this.savedObjectsClient, - { - page: 1, - perPage: 20, - kuery: 'ingest-package-configs.package.name:endpoint', - } - ); + const { items, total } = await this.packageConfigService.list(this.savedObjectsClient, { + page, + perPage: 20, + kuery: 'ingest-package-configs.package.name:endpoint', + }); for (const packageConfig of items) { const { id, revision, updated_at, updated_by, ...newPackageConfig } = packageConfig; @@ -222,6 +220,7 @@ export class ManifestManager { } paging = page * items.length < total; + page++; } return success ? wrappedManifest : null; diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 5c5d270d324ff..683d83dde4e0f 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7473,12 +7473,9 @@ "xpack.infra.logs.alerting.threshold.documentCountActionVariableDescription": "指定された条件と一致したログエントリ数", "xpack.infra.logs.alerting.threshold.fired": "実行", "xpack.infra.logs.analysis.analyzeInMlButtonLabel": "ML で分析", - "xpack.infra.logs.analysis.anomaliesExpandedRowNumberOfLogEntriesDescription": "ログエントリーの数です", "xpack.infra.logs.analysis.anomaliesSectionLineSeriesName": "15 分ごとのログエントリー (平均)", "xpack.infra.logs.analysis.anomaliesSectionLoadingAriaLabel": "異常を読み込み中", "xpack.infra.logs.analysis.anomaliesSectionTitle": "異常", - "xpack.infra.logs.analysis.anomaliesTableMaxAnomalyScoreColumnName": "最高異常スコア", - "xpack.infra.logs.analysis.anomaliesTablePartitionColumnName": "パーティション", "xpack.infra.logs.analysis.anomalySectionNoAnomaliesTitle": "異常が検出されませんでした。", "xpack.infra.logs.analysis.anomalySectionNoDataBody": "時間範囲を調整する必要があるかもしれません。", "xpack.infra.logs.analysis.anomalySectionNoDataTitle": "表示するデータがありません。", @@ -7505,9 +7502,6 @@ "xpack.infra.logs.analysis.mlUnavailableTitle": "この機能には機械学習が必要です", "xpack.infra.logs.analysis.onboardingSuccessContent": "機械学習ロボットがデータの収集を開始するまでしばらくお待ちください。", "xpack.infra.logs.analysis.onboardingSuccessTitle": "成功！", - "xpack.infra.logs.analysis.overallAnomaliesNumberOfLogEntriesDescription": "ログエントリーの数です", - "xpack.infra.logs.analysis.overallAnomaliesTopAnomalyScoreDescription": "最高異常スコア", - "xpack.infra.logs.analysis.overallAnomalyChartMaxScoresLabel": "最高異常スコア", "xpack.infra.logs.analysis.partitionMaxAnomalyScoreAnnotationLabel": "最高異常スコア: {maxAnomalyScore}", "xpack.infra.logs.analysis.recreateJobButtonLabel": "ML ジョブを再作成", "xpack.infra.logs.analysis.setupStatusTryAgainButton": "再試行", @@ -7552,10 +7546,6 @@ "xpack.infra.logs.logEntryCategories.countColumnTitle": "メッセージ数", "xpack.infra.logs.logEntryCategories.datasetColumnTitle": "データセット", "xpack.infra.logs.logEntryCategories.datasetFilterPlaceholder": "データセットでフィルター", - "xpack.infra.logs.logEntryCategories.exampleEmptyDescription": "選択した時間範囲内に例は見つかりませんでした。ログエントリー保持期間を長くするとメッセージサンプルの可用性が向上します。", - "xpack.infra.logs.logEntryCategories.exampleEmptyReloadButtonLabel": "再読み込み", - "xpack.infra.logs.logEntryCategories.exampleLoadingFailureDescription": "カテゴリーの例を読み込めませんでした。", - "xpack.infra.logs.logEntryCategories.exampleLoadingFailureRetryButtonLabel": "再試行", "xpack.infra.logs.logEntryCategories.jobStatusLoadingMessage": "分類ジョブのステータスを確認中...", "xpack.infra.logs.logEntryCategories.loadDataErrorTitle": "カテゴリーデータを読み込めませんでした", "xpack.infra.logs.logEntryCategories.manyCategoriesWarningReasonDescription": "分析されたドキュメントごとのカテゴリ比率が{categoriesDocumentRatio, number }で、非常に高い値です。", @@ -8469,13 +8459,7 @@ "xpack.ingestPipelines.form.nameFieldLabel": "名前", "xpack.ingestPipelines.form.nameTitle": "名前", "xpack.ingestPipelines.form.onFailureFieldHelpText": "JSONフォーマットを使用：{code}", - "xpack.ingestPipelines.form.onFailureFieldLabel": "障害プロセッサー（任意）", - "xpack.ingestPipelines.form.onFailureProcessorsJsonError": "入力が無効です。", "xpack.ingestPipelines.form.pipelineNameRequiredError": "名前が必要です。", - "xpack.ingestPipelines.form.processorsFieldHelpText": "JSONフォーマットを使用：{code}", - "xpack.ingestPipelines.form.processorsFieldLabel": "プロセッサー", - "xpack.ingestPipelines.form.processorsJsonError": "入力が無効です。", - "xpack.ingestPipelines.form.processorsRequiredError": "プロセッサーが必要です。", "xpack.ingestPipelines.form.saveButtonLabel": "パイプラインを保存", "xpack.ingestPipelines.form.savePipelineError": "パイプラインを作成できません", "xpack.ingestPipelines.form.savingButtonLabel": "保存中…", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index c71215d2bfb74..ca065c9523637 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7477,12 +7477,9 @@ "xpack.infra.logs.alerting.threshold.documentCountActionVariableDescription": "匹配所提供条件的日志条目数", "xpack.infra.logs.alerting.threshold.fired": "已触发", "xpack.infra.logs.analysis.analyzeInMlButtonLabel": "在 ML 中分析", - "xpack.infra.logs.analysis.anomaliesExpandedRowNumberOfLogEntriesDescription": "日志条目数", "xpack.infra.logs.analysis.anomaliesSectionLineSeriesName": "每 15 分钟日志条目数（平均值）", "xpack.infra.logs.analysis.anomaliesSectionLoadingAriaLabel": "正在加载异常", "xpack.infra.logs.analysis.anomaliesSectionTitle": "异常", - "xpack.infra.logs.analysis.anomaliesTableMaxAnomalyScoreColumnName": "最大异常分数", - "xpack.infra.logs.analysis.anomaliesTablePartitionColumnName": "分区", "xpack.infra.logs.analysis.anomalySectionNoAnomaliesTitle": "未检测到任何异常。", "xpack.infra.logs.analysis.anomalySectionNoDataBody": "您可能想调整时间范围。", "xpack.infra.logs.analysis.anomalySectionNoDataTitle": "没有可显示的数据。", @@ -7509,9 +7506,6 @@ "xpack.infra.logs.analysis.mlUnavailableTitle": "此功能需要 Machine Learning", "xpack.infra.logs.analysis.onboardingSuccessContent": "请注意，我们的 Machine Learning 机器人若干分钟后才会开始收集数据。", "xpack.infra.logs.analysis.onboardingSuccessTitle": "成功！", - "xpack.infra.logs.analysis.overallAnomaliesNumberOfLogEntriesDescription": "日志条目数", - "xpack.infra.logs.analysis.overallAnomaliesTopAnomalyScoreDescription": "最大异常分数", - "xpack.infra.logs.analysis.overallAnomalyChartMaxScoresLabel": "最大异常分数：", "xpack.infra.logs.analysis.partitionMaxAnomalyScoreAnnotationLabel": "最大异常分数：{maxAnomalyScore}", "xpack.infra.logs.analysis.recreateJobButtonLabel": "重新创建 ML 作业", "xpack.infra.logs.analysis.setupStatusTryAgainButton": "重试", @@ -7556,10 +7550,6 @@ "xpack.infra.logs.logEntryCategories.countColumnTitle": "消息计数", "xpack.infra.logs.logEntryCategories.datasetColumnTitle": "数据集", "xpack.infra.logs.logEntryCategories.datasetFilterPlaceholder": "按数据集筛选", - "xpack.infra.logs.logEntryCategories.exampleEmptyDescription": "选定时间范围内未找到任何示例。增大日志条目保留期限以改善消息样例可用性。", - "xpack.infra.logs.logEntryCategories.exampleEmptyReloadButtonLabel": "重新加载", - "xpack.infra.logs.logEntryCategories.exampleLoadingFailureDescription": "无法加载类别示例。", - "xpack.infra.logs.logEntryCategories.exampleLoadingFailureRetryButtonLabel": "重试", "xpack.infra.logs.logEntryCategories.jobStatusLoadingMessage": "正在检查归类作业的状态......", "xpack.infra.logs.logEntryCategories.loadDataErrorTitle": "无法加载类别数据", "xpack.infra.logs.logEntryCategories.manyCategoriesWarningReasonDescription": "每个分析文档的类别比率非常高，达到 {categoriesDocumentRatio, number }。", @@ -8473,13 +8463,7 @@ "xpack.ingestPipelines.form.nameFieldLabel": "名称", "xpack.ingestPipelines.form.nameTitle": "名称", "xpack.ingestPipelines.form.onFailureFieldHelpText": "使用 JSON 格式：{code}", - "xpack.ingestPipelines.form.onFailureFieldLabel": "失败处理器（可选）", - "xpack.ingestPipelines.form.onFailureProcessorsJsonError": "输入无效。", "xpack.ingestPipelines.form.pipelineNameRequiredError": "“名称”必填。", - "xpack.ingestPipelines.form.processorsFieldHelpText": "使用 JSON 格式：{code}", - "xpack.ingestPipelines.form.processorsFieldLabel": "处理器", - "xpack.ingestPipelines.form.processorsJsonError": "输入无效。", - "xpack.ingestPipelines.form.processorsRequiredError": "需要指定处理器。", "xpack.ingestPipelines.form.saveButtonLabel": "保存管道", "xpack.ingestPipelines.form.savePipelineError": "无法创建管道", "xpack.ingestPipelines.form.savingButtonLabel": "正在保存......", diff --git a/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/chart_wrapper.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/chart_wrapper.test.tsx.snap index 71690432fd01b..d8235765bda2d 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/chart_wrapper.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/chart_wrapper.test.tsx.snap @@ -123,7 +123,6 @@ exports[`ChartWrapper component renders the component with loading false 1`] = ` down={8} height={144} up={4} - width={144} />
@@ -252,7 +251,6 @@ exports[`ChartWrapper component renders the component with loading true 1`] = ` down={8} height={144} up={4} - width={144} /> - + baseTheme={ + Object { + "arcSeriesStyle": Object { + "arc": Object { + "opacity": 1, + "stroke": "black", + "strokeWidth": 1, + "visible": true, + }, + }, + "areaSeriesStyle": Object { + "area": Object { + "opacity": 0.3, + "visible": true, + }, + "line": Object { + "opacity": 1, + "strokeWidth": 1, + "visible": true, + }, + "point": Object { + "fill": "white", + "opacity": 1, + "radius": 2, + "strokeWidth": 1, + "visible": false, + }, + }, + "axes": Object { + "axisLineStyle": Object { + "stroke": "#eaeaea", + "strokeWidth": 1, + }, + "axisTitleStyle": Object { + "fill": "#333", + "fontFamily": "sans-serif", + "fontSize": 12, + "fontStyle": "bold", + "padding": 8, + }, + "gridLineStyle": Object { + "horizontal": Object { + "dash": Array [ + 0, + 0, + ], + "opacity": 1, + "stroke": "#D3DAE6", + "strokeWidth": 1, + "visible": true, + }, + "vertical": Object { + "dash": Array [ + 0, + 0, + ], + "opacity": 1, + "stroke": "#D3DAE6", + "strokeWidth": 1, + "visible": true, + }, + }, + "tickLabelStyle": Object { + "fill": "#777", + "fontFamily": "sans-serif", + "fontSize": 10, + "fontStyle": "normal", + "padding": 4, + }, + "tickLineStyle": Object { + "stroke": "#eaeaea", + "strokeWidth": 1, + "visible": true, + }, + }, + "background": Object { + "color": "transparent", + }, + "barSeriesStyle": Object { + "displayValue": Object { + "fill": "#777", + "fontFamily": "sans-serif", + "fontSize": 8, + "fontStyle": "normal", + "offsetX": 0, + "offsetY": 0, + "padding": 0, + }, + "rect": Object { + "opacity": 1, + }, + "rectBorder": Object { + "strokeWidth": 0, + "visible": false, + }, + }, + "bubbleSeriesStyle": Object { + "point": Object { + "fill": "white", + "opacity": 1, + "radius": 2, + "strokeWidth": 1, + "visible": true, + }, + }, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + }, + "chartPaddings": Object { + "bottom": 0, + "left": 0, + "right": 0, + "top": 0, + }, + "colors": Object { + "defaultVizColor": "red", + "vizColors": Array [ + "#1EA593", + "#2B70F7", + "#CE0060", + "#38007E", + "#FCA5D3", + "#F37020", + "#E49E29", + "#B0916F", + "#7B000B", + "#34130C", + ], + }, + "crosshair": Object { + "band": Object { + "fill": "#F5F5F5", + "visible": true, + }, + "line": Object { + "dash": Array [ + 5, + 5, + ], + "stroke": "#777", + "strokeWidth": 1, + "visible": true, + }, + }, + "legend": Object { + "horizontalHeight": 64, + "spacingBuffer": 10, + "verticalWidth": 200, + }, + "lineSeriesStyle": Object { + "line": Object { + "opacity": 1, + "strokeWidth": 1, + "visible": true, + }, + "point": Object { + "fill": "white", + "opacity": 1, + "radius": 2, + "strokeWidth": 1, + "visible": true, + }, + }, + "scales": Object { + "barsPadding": 0.25, + "histogramPadding": 0.05, + }, + "sharedStyle": Object { + "default": Object { + "opacity": 1, + }, + "highlighted": Object { + "opacity": 1, + }, + "unhighlighted": Object { + "opacity": 0.25, + }, + }, + } + } + renderer="canvas" + size={125} + theme={ + Object { + "areaSeriesStyle": Object { + "area": Object { + "opacity": 0.3, + }, + "line": Object { + "strokeWidth": 2, + }, + "point": Object { + "fill": "rgba(255, 255, 255, 1)", + "radius": 3, + "strokeWidth": 2, + "visible": false, + }, + }, + "axes": Object { + "axisLineStyle": Object { + "stroke": "rgba(238, 240, 243, 1)", + }, + "axisTitleStyle": Object { + "fill": "rgba(52, 55, 65, 1)", + "fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "fontSize": 12, + "padding": 10, + }, + "gridLineStyle": Object { + "horizontal": Object { + "dash": Array [ + 0, + 0, + ], + "opacity": 1, + "stroke": "rgba(238, 240, 243, 1)", + "strokeWidth": 1, + "visible": true, + }, + "vertical": Object { + "dash": Array [ + 4, + 4, + ], + "opacity": 1, + "stroke": "rgba(238, 240, 243, 1)", + "strokeWidth": 1, + "visible": true, + }, + }, + "tickLabelStyle": Object { + "fill": "rgba(105, 112, 125, 1)", + "fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "fontSize": 10, + "padding": 8, + }, + "tickLineStyle": Object { + "stroke": "rgba(238, 240, 243, 1)", + "strokeWidth": 1, + "visible": false, + }, + }, + "barSeriesStyle": Object { + "displayValue": Object { + "fill": "rgba(105, 112, 125, 1)", + "fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "fontSize": 8, + }, + }, + "chartMargins": Object { + "bottom": 0, + "left": 0, + "right": 0, + "top": 0, + }, + "colors": Object { + "defaultVizColor": "#6092C0", + "vizColors": Array [ + "#54B399", + "#6092C0", + "#9170B8", + "#CA8EAE", + "#D36086", + "#E7664C", + "#AA6556", + "#DA8B45", + "#B9A888", + "#D6BF57", + ], + }, + "crosshair": Object { + "band": Object { + "fill": "rgba(245, 247, 250, 1)", + }, + "line": Object { + "dash": Array [ + 4, + 4, + ], + "stroke": "rgba(105, 112, 125, 1)", + "strokeWidth": 1, + }, + }, + "lineSeriesStyle": Object { + "line": Object { + "strokeWidth": 2, + }, + "point": Object { + "fill": "rgba(255, 255, 255, 1)", + "radius": 3, + "strokeWidth": 2, + }, + }, + "scales": Object { + "barsPadding": 0.25, + "histogramPadding": 0.05, + }, + } + } + > + + + - +
+
+
+
+
+
- +
+
+
+
+
+
{ it('renders the component with loading false', () => { @@ -20,7 +19,7 @@ describe('ChartWrapper component', () => { - + ); expect(component).toMatchSnapshot(); @@ -31,7 +30,7 @@ describe('ChartWrapper component', () => { - + ); expect(component).toMatchSnapshot(); @@ -42,7 +41,7 @@ describe('ChartWrapper component', () => { - + ); @@ -64,7 +63,7 @@ describe('ChartWrapper component', () => { - + ); diff --git a/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx b/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx index b4d6864423dfc..19716f0d3b1c9 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx @@ -5,10 +5,10 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; -import React, { useContext, useEffect, useRef } from 'react'; -import * as d3 from 'd3'; +import React, { useContext } from 'react'; import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; +import { Chart, Datum, Partition, Settings, PartitionLayout } from '@elastic/charts'; import { DonutChartLegend } from './donut_chart_legend'; import { UptimeThemeContext } from '../../../contexts'; @@ -16,7 +16,6 @@ interface DonutChartProps { down: number; height: number; up: number; - width: number; } export const GreenCheckIcon = styled(EuiIcon)` @@ -28,72 +27,56 @@ export const GreenCheckIcon = styled(EuiIcon)` position: absolute; `; -export const DonutChart = ({ height, down, up, width }: DonutChartProps) => { - const chartElement = useRef(null); - +export const DonutChart = ({ height, down, up }: DonutChartProps) => { const { colors: { danger, gray }, + chartTheme, } = useContext(UptimeThemeContext); - let upCount = up; - if (up === 0 && down === 0) { - upCount = 1; - } - useEffect(() => { - if (chartElement.current !== null) { - // we must remove any existing paths before painting - d3.select(chartElement.current).selectAll('g').remove(); - - const svgElement = d3 - .select(chartElement.current) - .append('g') - .attr('transform', `translate(${width / 2}, ${height / 2})`); - - const color = d3.scale.ordinal().domain(['up', 'down']).range([gray, danger]); - - const pieGenerator = d3.layout - .pie() - .value(({ value }: any) => value) - // these start/end angles will reverse the direction of the pie, - // which matches our design - .startAngle(2 * Math.PI) - .endAngle(0); - - svgElement - .selectAll('g') - .data( - // @ts-ignore pie generator expects param of type number[], but only works with - // output of d3.entries, which is like Array<{ key: string, value: number }> - pieGenerator(d3.entries({ up: upCount, down })) - ) - .enter() - .append('path') - .attr( - 'd', - // @ts-ignore attr does not expect a param of type Arc but it behaves as desired - d3.svg - .arc() - .innerRadius(width * 0.28) - .outerRadius(Math.min(width, height) / 2 - 10) - ) - .attr('fill', (d: any) => color(d.data.key) as any); - } - }, [danger, down, gray, height, upCount, width]); - return ( - - {/* When all monitors are up we show green check icon in middle of donut to indicate, all is well */} + {...chartTheme} + > + + d.value as number} + layers={[ + { + groupByRollup: (d: Datum) => d.label, + nodeLabel: (d: Datum) => d, + shape: { + fillColor: (d: Datum) => { + return d.dataName === 'Down' ? danger : gray; + }, + }, + }, + ]} + config={{ + partitionLayout: PartitionLayout.sunburst, + linkLabel: { + maximumSection: Infinity, + }, + margin: { top: 0, bottom: 0, left: 0, right: 0 }, + idealFontSizeJump: 1.1, + outerSizeRatio: 0.9, + emptySizeRatio: 0.4, + circlePadding: 4, + }} + /> + {down === 0 && } diff --git a/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx b/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx index a514013eeed98..cbbffdff745f8 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx @@ -12,7 +12,7 @@ import { DonutChartLegendRow } from './donut_chart_legend_row'; import { UptimeThemeContext } from '../../../contexts'; const LegendContainer = styled.div` - max-width: 260px; + max-width: 150px; min-width: 100px; @media (max-width: 767px) { min-width: 0px; diff --git a/x-pack/plugins/uptime/public/components/overview/__tests__/__snapshots__/snapshot.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/__tests__/__snapshots__/snapshot.test.tsx.snap index db41dfb0b04c4..2135fc32c2b5b 100644 --- a/x-pack/plugins/uptime/public/components/overview/__tests__/__snapshots__/snapshot.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/__tests__/__snapshots__/snapshot.test.tsx.snap @@ -14,7 +14,6 @@ exports[`Snapshot component renders without errors 1`] = ` down={2} height={144} up={8} - width={144} /> `; diff --git a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot.tsx b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot.tsx index 8d6933ad18ced..bc54f14e87822 100644 --- a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot.tsx +++ b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot.tsx @@ -11,7 +11,6 @@ import { ChartWrapper } from '../../common/charts/chart_wrapper'; import { SnapshotHeading } from './snapshot_heading'; import { Snapshot as SnapshotType } from '../../../../common/runtime_types'; -const SNAPSHOT_CHART_WIDTH = 144; const SNAPSHOT_CHART_HEIGHT = 144; interface SnapshotComponentProps { @@ -29,11 +28,6 @@ export const SnapshotComponent: React.FC = ({ count, hei - + ); diff --git a/x-pack/plugins/uptime/public/state/effects/index_status.ts b/x-pack/plugins/uptime/public/state/effects/index_status.ts index 793a671f5fed8..a4b85312849a2 100644 --- a/x-pack/plugins/uptime/public/state/effects/index_status.ts +++ b/x-pack/plugins/uptime/public/state/effects/index_status.ts @@ -4,13 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import { takeLatest } from 'redux-saga/effects'; +import { takeLeading } from 'redux-saga/effects'; import { indexStatusAction } from '../actions'; import { fetchIndexStatus } from '../api'; import { fetchEffectFactory } from './fetch_effect'; export function* fetchIndexStatusEffect() { - yield takeLatest( + yield takeLeading( indexStatusAction.get, fetchEffectFactory(fetchIndexStatus, indexStatusAction.success, indexStatusAction.fail) ); diff --git a/x-pack/test/api_integration/apis/fleet/agent_flow.ts b/x-pack/test/api_integration/apis/fleet/agent_flow.ts index a6a4003a554fc..e14a85d6e30c1 100644 --- a/x-pack/test/api_integration/apis/fleet/agent_flow.ts +++ b/x-pack/test/api_integration/apis/fleet/agent_flow.ts @@ -90,7 +90,7 @@ export default function (providerContext: FtrProviderContext) { events: [ { type: 'ACTION_RESULT', - subtype: 'CONFIG', + subtype: 'ACKNOWLEDGED', timestamp: '2019-01-04T14:32:03.36764-05:00', action_id: configChangeAction.id, agent_id: enrollmentResponse.item.id, @@ -132,7 +132,43 @@ export default function (providerContext: FtrProviderContext) { .expect(200); expect(unenrollResponse.success).to.eql(true); - // Checkin after unenrollment + // Checkin after unenrollment + const { body: checkinAfterUnenrollResponse } = await supertestWithoutAuth + .post(`/api/ingest_manager/fleet/agents/${enrollmentResponse.item.id}/checkin`) + .set('kbn-xsrf', 'xx') + .set('Authorization', `ApiKey ${agentAccessAPIKey}`) + .send({ + events: [], + }) + .expect(200); + + expect(checkinAfterUnenrollResponse.success).to.eql(true); + expect(checkinAfterUnenrollResponse.actions).length(1); + expect(checkinAfterUnenrollResponse.actions[0].type).be('UNENROLL'); + const unenrollAction = checkinAfterUnenrollResponse.actions[0]; + + // ack unenroll actions + const { body: ackUnenrollApiResponse } = await supertestWithoutAuth + .post(`/api/ingest_manager/fleet/agents/${enrollmentResponse.item.id}/acks`) + .set('Authorization', `ApiKey ${agentAccessAPIKey}`) + .set('kbn-xsrf', 'xx') + .send({ + events: [ + { + type: 'ACTION_RESULT', + subtype: 'ACKNOWLEDGED', + timestamp: '2019-01-04T14:32:03.36764-05:00', + action_id: unenrollAction.id, + agent_id: enrollmentResponse.item.id, + message: 'hello', + payload: 'payload', + }, + ], + }) + .expect(200); + expect(ackUnenrollApiResponse.success).to.eql(true); + + // Checkin after unenrollment acknowledged await supertestWithoutAuth .post(`/api/ingest_manager/fleet/agents/${enrollmentResponse.item.id}/checkin`) .set('kbn-xsrf', 'xx') diff --git a/x-pack/test/api_integration/apis/fleet/unenroll_agent.ts b/x-pack/test/api_integration/apis/fleet/unenroll_agent.ts index ecc39ea645589..bc6c44e590cc4 100644 --- a/x-pack/test/api_integration/apis/fleet/unenroll_agent.ts +++ b/x-pack/test/api_integration/apis/fleet/unenroll_agent.ts @@ -67,7 +67,7 @@ export default function (providerContext: FtrProviderContext) { .post(`/api/ingest_manager/fleet/agents/agent1/unenroll`) .set('kbn-xsrf', 'xxx') .send({ - ids: ['agent1'], + force: true, }) .expect(200); @@ -80,7 +80,7 @@ export default function (providerContext: FtrProviderContext) { .post(`/api/ingest_manager/fleet/agents/agent1/unenroll`) .set('kbn-xsrf', 'xxx') .send({ - ids: ['agent1'], + force: true, }) .expect(200); diff --git a/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js b/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js index 292aabad85054..a563b956df344 100644 --- a/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js +++ b/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js @@ -7,50 +7,63 @@ import { API_BASE_PATH, INDEX_PATTERNS } from './constants'; export const registerHelpers = ({ supertest }) => { + let templatesCreated = []; + const getAllTemplates = () => supertest.get(`${API_BASE_PATH}/index_templates`); - const getOneTemplate = (name, isLegacy = true) => + const getOneTemplate = (name, isLegacy = false) => supertest.get(`${API_BASE_PATH}/index_templates/${name}?legacy=${isLegacy}`); - const getTemplatePayload = (name, isLegacy = true) => ({ - name, - order: 1, - indexPatterns: INDEX_PATTERNS, - version: 1, - template: { - settings: { - number_of_shards: 1, - index: { - lifecycle: { - name: 'my_policy', + const getTemplatePayload = (name, indexPatterns = INDEX_PATTERNS, isLegacy = false) => { + const baseTemplate = { + name, + indexPatterns, + version: 1, + template: { + settings: { + number_of_shards: 1, + index: { + lifecycle: { + name: 'my_policy', + }, }, }, - }, - mappings: { - _source: { - enabled: false, - }, - properties: { - host_name: { - type: 'keyword', + mappings: { + _source: { + enabled: false, }, - created_at: { - type: 'date', - format: 'EEE MMM dd HH:mm:ss Z yyyy', + properties: { + host_name: { + type: 'keyword', + }, + created_at: { + type: 'date', + format: 'EEE MMM dd HH:mm:ss Z yyyy', + }, }, }, + aliases: { + alias1: {}, + }, }, - aliases: { - alias1: {}, + _kbnMeta: { + isLegacy, }, - }, - _kbnMeta: { - isLegacy, - }, - }); + }; + + if (isLegacy) { + baseTemplate.order = 1; + } else { + baseTemplate.priority = 1; + } - const createTemplate = (payload) => - supertest.post(`${API_BASE_PATH}/index_templates`).set('kbn-xsrf', 'xxx').send(payload); + return baseTemplate; + }; + + const createTemplate = (template) => { + templatesCreated.push({ name: template.name, isLegacy: template._kbnMeta.isLegacy }); + return supertest.post(`${API_BASE_PATH}/index_templates`).set('kbn-xsrf', 'xxx').send(template); + }; const deleteTemplates = (templates) => supertest @@ -64,6 +77,16 @@ export const registerHelpers = ({ supertest }) => { .set('kbn-xsrf', 'xxx') .send(payload); + // Delete all templates created during tests + const cleanUpTemplates = async () => { + try { + await deleteTemplates(templatesCreated); + templatesCreated = []; + } catch (e) { + // Silently swallow errors + } + }; + return { getAllTemplates, getOneTemplate, @@ -71,5 +94,6 @@ export const registerHelpers = ({ supertest }) => { createTemplate, updateTemplate, deleteTemplates, + cleanUpTemplates, }; }; diff --git a/x-pack/test/api_integration/apis/management/index_management/templates.js b/x-pack/test/api_integration/apis/management/index_management/templates.js index fcee8ed6a183f..3a3d73ab68412 100644 --- a/x-pack/test/api_integration/apis/management/index_management/templates.js +++ b/x-pack/test/api_integration/apis/management/index_management/templates.js @@ -22,33 +22,78 @@ export default function ({ getService }) { getTemplatePayload, deleteTemplates, updateTemplate, + cleanUpTemplates, } = registerHelpers({ supertest }); describe('index templates', () => { - after(() => Promise.all([cleanUpEsResources()])); + after(() => Promise.all([cleanUpEsResources(), cleanUpTemplates()])); describe('get all', () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const indexTemplate = getTemplatePayload(templateName, [getRandomString()]); + const legacyTemplate = getTemplatePayload(templateName, [getRandomString()], true); beforeEach(async () => { - await createTemplate(payload).expect(200); + const res1 = await createTemplate(indexTemplate); + if (res1.status !== 200) { + throw new Error(res1.body.message); + } + + const res2 = await createTemplate(legacyTemplate); + if (res2.status !== 200) { + throw new Error(res2.body.message); + } }); - // TODO: When the "Create" API handler is added for V2 template, - // update this test to list composable templates. it('should list all the index templates with the expected parameters', async () => { const { body: allTemplates } = await getAllTemplates().expect(200); - // Composable index templates may have been created by other apps, e.g. Ingest Manager, - // so we don't make any assertion about these contents. - expect(allTemplates.templates).to.be.an('array'); - - // Legacy templates - const legacyTemplate = allTemplates.legacyTemplates.find( - (template) => template.name === payload.name + // Index templates (composable) + const indexTemplateFound = allTemplates.templates.find( + (template) => template.name === indexTemplate.name ); + + if (!indexTemplateFound) { + throw new Error( + `Index template "${indexTemplate.name}" not found in ${JSON.stringify( + allTemplates.templates, + null, + 2 + )}` + ); + } + const expectedKeys = [ + 'name', + 'indexPatterns', + 'hasSettings', + 'hasAliases', + 'hasMappings', + 'ilmPolicy', + 'priority', + 'composedOf', + 'version', + '_kbnMeta', + ].sort(); + + expect(Object.keys(indexTemplateFound).sort()).to.eql(expectedKeys); + + // Legacy index templates + const legacyTemplateFound = allTemplates.legacyTemplates.find( + (template) => template.name === legacyTemplate.name + ); + + if (!legacyTemplateFound) { + throw new Error( + `Legacy template "${legacyTemplate.name}" not found in ${JSON.stringify( + allTemplates.legacyTemplates, + null, + 2 + )}` + ); + } + + const expectedLegacyKeys = [ 'name', 'indexPatterns', 'hasSettings', @@ -60,20 +105,40 @@ export default function ({ getService }) { '_kbnMeta', ].sort(); - expect(Object.keys(legacyTemplate).sort()).to.eql(expectedKeys); + expect(Object.keys(legacyTemplateFound).sort()).to.eql(expectedLegacyKeys); }); }); describe('get one', () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); - beforeEach(async () => { - await createTemplate(payload).expect(200); - }); + it('should return an index template with the expected parameters', async () => { + const template = getTemplatePayload(templateName, [getRandomString()]); + await createTemplate(template).expect(200); - it('should return the index template with the expected parameters', async () => { const { body } = await getOneTemplate(templateName).expect(200); + const expectedKeys = [ + 'name', + 'indexPatterns', + 'template', + 'composedOf', + 'ilmPolicy', + 'priority', + 'version', + '_kbnMeta', + ].sort(); + const expectedTemplateKeys = ['aliases', 'mappings', 'settings'].sort(); + + expect(body.name).to.equal(templateName); + expect(Object.keys(body).sort()).to.eql(expectedKeys); + expect(Object.keys(body.template).sort()).to.eql(expectedTemplateKeys); + }); + + it('should return a legacy index template with the expected parameters', async () => { + const legacyTemplate = getTemplatePayload(templateName, [getRandomString()], true); + await createTemplate(legacyTemplate).expect(200); + + const { body } = await getOneTemplate(templateName, true).expect(200); const expectedKeys = [ 'name', 'indexPatterns', @@ -94,14 +159,21 @@ export default function ({ getService }) { describe('create', () => { it('should create an index template', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()]); + + await createTemplate(payload).expect(200); + }); + + it('should create a legacy index template', async () => { + const templateName = `template-${getRandomString()}`; + const payload = getTemplatePayload(templateName, [getRandomString()], true); await createTemplate(payload).expect(200); }); it('should throw a 409 conflict when trying to create 2 templates with the same name', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()], true); await createTemplate(payload); @@ -110,7 +182,7 @@ export default function ({ getService }) { it('should validate the request payload', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()], true); delete payload.indexPatterns; // index patterns are required @@ -124,13 +196,40 @@ export default function ({ getService }) { describe('update', () => { it('should update an index template', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const indexTemplate = getTemplatePayload(templateName, [getRandomString()]); - await createTemplate(payload).expect(200); + await createTemplate(indexTemplate).expect(200); + + let catTemplateResponse = await catTemplate(templateName); + + const { name, version } = indexTemplate; + + expect( + catTemplateResponse.find(({ name: templateName }) => templateName === name).version + ).to.equal(version.toString()); + + // Update template with new version + const updatedVersion = 2; + await updateTemplate({ ...indexTemplate, version: updatedVersion }, templateName).expect( + 200 + ); + + catTemplateResponse = await catTemplate(templateName); + + expect( + catTemplateResponse.find(({ name: templateName }) => templateName === name).version + ).to.equal(updatedVersion.toString()); + }); + + it('should update a legacy index template', async () => { + const templateName = `template-${getRandomString()}`; + const legacyIndexTemplate = getTemplatePayload(templateName, [getRandomString()], true); + + await createTemplate(legacyIndexTemplate).expect(200); let catTemplateResponse = await catTemplate(templateName); - const { name, version } = payload; + const { name, version } = legacyIndexTemplate; expect( catTemplateResponse.find(({ name: templateName }) => templateName === name).version @@ -138,7 +237,10 @@ export default function ({ getService }) { // Update template with new version const updatedVersion = 2; - await updateTemplate({ ...payload, version: updatedVersion }, templateName).expect(200); + await updateTemplate( + { ...legacyIndexTemplate, version: updatedVersion }, + templateName + ).expect(200); catTemplateResponse = await catTemplate(templateName); @@ -151,7 +253,7 @@ export default function ({ getService }) { describe('delete', () => { it('should delete an index template', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()], true); await createTemplate(payload).expect(200); diff --git a/x-pack/test/functional/apps/transform/index.ts b/x-pack/test/functional/apps/transform/index.ts index 04a751279bf3c..6dd22a1f4a204 100644 --- a/x-pack/test/functional/apps/transform/index.ts +++ b/x-pack/test/functional/apps/transform/index.ts @@ -5,9 +5,10 @@ */ import { FtrProviderContext } from '../../ftr_provider_context'; -export default function ({ getService, loadTestFile }: FtrProviderContext) { +export default function ({ getService, loadTestFile, getPageObjects }: FtrProviderContext) { const esArchiver = getService('esArchiver'); const transform = getService('transform'); + const PageObjects = getPageObjects(['security']); describe('transform', function () { this.tags(['ciGroup9', 'transform']); @@ -30,6 +31,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) { await esArchiver.unload('ml/ecommerce'); await transform.testResources.resetKibanaTimeZone(); + await PageObjects.security.logout(); }); loadTestFile(require.resolve('./creation_index_pattern')); diff --git a/x-pack/test/functional/es_archives/endpoint/artifacts/api_feature/data.json b/x-pack/test/functional/es_archives/endpoint/artifacts/api_feature/data.json index a886b60e7e0dc..b156f2f6cc7bf 100644 --- a/x-pack/test/functional/es_archives/endpoint/artifacts/api_feature/data.json +++ b/x-pack/test/functional/es_archives/endpoint/artifacts/api_feature/data.json @@ -1,20 +1,23 @@ { "type": "doc", "value": { - "id": "endpoint:exceptions-artifact:endpoint-exceptionlist-linux-1.0.0-a4e4586e895fcb46dd25a25358b446f9a425279452afa3ef9a98bca39c39122d", + "id": "endpoint:user-artifact:endpoint-exceptionlist-linux-1.0.0-a4e4586e895fcb46dd25a25358b446f9a425279452afa3ef9a98bca39c39122d", "index": ".kibana", "source": { "references": [ ], - "endpoint:exceptions-artifact": { + "endpoint:user-artifact": { "body": "eyJleGNlcHRpb25zX2xpc3QiOltdfQ==", "created": 1593016187465, - "encoding": "application/json", + "compressionAlgorithm": "none", + "encryptionAlgorithm": "none", "identifier": "endpoint-exceptionlist-linux-1.0.0", - "sha256": "a4e4586e895fcb46dd25a25358b446f9a425279452afa3ef9a98bca39c39122d", - "size": 22 + "compressedSha256": "a4e4586e895fcb46dd25a25358b446f9a425279452afa3ef9a98bca39c39122d", + "compressedSize": 22, + "decompressedSha256": "a4e4586e895fcb46dd25a25358b446f9a425279452afa3ef9a98bca39c39122d", + "decompressedSize": 22 }, - "type": "endpoint:exceptions-artifact", + "type": "endpoint:user-artifact", "updated_at": "2020-06-24T16:29:47.584Z" } } @@ -23,12 +26,12 @@ { "type": "doc", "value": { - "id": "endpoint:exceptions-manifest:endpoint-manifest-1.0.0", + "id": "endpoint:user-artifact-manifest:endpoint-manifest-1.0.0", "index": ".kibana", "source": { "references": [ ], - "endpoint:exceptions-manifest": { + "endpoint:user-artifact-manifest": { "created": 1593183699663, "ids": [ "endpoint-exceptionlist-linux-1.0.0-a4e4586e895fcb46dd25a25358b446f9a425279452afa3ef9a98bca39c39122d", @@ -36,7 +39,7 @@ "endpoint-exceptionlist-windows-1.0.0-a4e4586e895fcb46dd25a25358b446f9a425279452afa3ef9a98bca39c39122d" ] }, - "type": "endpoint:exceptions-manifest", + "type": "endpoint:user-artifact-manifest", "updated_at": "2020-06-26T15:01:39.704Z" } } diff --git a/x-pack/test_utils/router_helpers.tsx b/x-pack/test_utils/router_helpers.tsx index 76c1e2259545b..f2099e1eb7c91 100644 --- a/x-pack/test_utils/router_helpers.tsx +++ b/x-pack/test_utils/router_helpers.tsx @@ -16,9 +16,10 @@ export const WithMemoryRouter = (initialEntries: string[] = ['/'], initialIndex: ); -export const WithRoute = (componentRoutePath = '/', onRouter = (router: any) => {}) => ( - WrappedComponent: ComponentType -) => { +export const WithRoute = ( + componentRoutePath: string | string[] = '/', + onRouter = (router: any) => {} +) => (WrappedComponent: ComponentType) => { // Create a class component that will catch the router // and forward it to our "onRouter()" handler. const CatchRouter = withRouter( diff --git a/x-pack/test_utils/testbed/types.ts b/x-pack/test_utils/testbed/types.ts index 4975e073eea1f..e2b6693ce77aa 100644 --- a/x-pack/test_utils/testbed/types.ts +++ b/x-pack/test_utils/testbed/types.ts @@ -163,7 +163,7 @@ export interface MemoryRouterConfig { /** The React Router **initial index** setting ([see documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md)) */ initialIndex?: number; /** The route **path** for the mounted component (defaults to `"/"`) */ - componentRoutePath?: string; + componentRoutePath?: string | string[]; /** A callBack that will be called with the React Router instance once mounted */ onRouter?: (router: any) => void; } diff --git a/yarn.lock b/yarn.lock index 02f7e90ab7d24..7e44780389531 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2144,10 +2144,10 @@ dependencies: "@elastic/apm-rum-core" "^5.3.0" -"@elastic/charts@19.6.3": - version "19.6.3" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.6.3.tgz#c23a1d7a8e245b1a800a3a4ef5fc4378b0da5e74" - integrity sha512-lB+rOODUKYZvsWCAcCxtAu8UxdZ2yIjZs+cjXwO1SlngY+jo+gc6XoEZG4kAczRPcr6cMdHesZ8LmFr3Enle5Q== +"@elastic/charts@19.7.0": + version "19.7.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.7.0.tgz#86cdee072d70e641135de99646c90359992bfdf0" + integrity sha512-oNAPOpI9OkuX/pWL+SGShcmdAUB1mwbOyJnp9/PHFqXtARg3aaiTDD0olZUuynGKd6DWnN8mEAiwoe7nsWGP9g== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0"