diff --git a/.eslintrc.js b/.eslintrc.js index b70090a50e64d..ab868c29b7bed 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -89,6 +89,72 @@ const SAFER_LODASH_SET_DEFINITELYTYPED_HEADER = ` */ `; +/** Packages which should not be included within production code. */ +const DEV_PACKAGES = [ + 'kbn-babel-code-parser', + 'kbn-dev-utils', + 'kbn-docs-utils', + 'kbn-es*', + 'kbn-eslint*', + 'kbn-optimizer', + 'kbn-plugin-generator', + 'kbn-plugin-helpers', + 'kbn-pm', + 'kbn-storybook', + 'kbn-telemetry-tools', + 'kbn-test', +]; + +/** Directories (at any depth) which include dev-only code. */ +const DEV_DIRECTORIES = [ + '.storybook', + '__tests__', + '__test__', + '__jest__', + '__fixtures__', + '__mocks__', + '__stories__', + 'e2e', + 'fixtures', + 'ftr_e2e', + 'integration_tests', + 'manual_tests', + 'mock', + 'storybook', + 'scripts', + 'test', + 'test-d', + 'test_utils', + 'test_utilities', + 'test_helpers', + 'tests_client_integration', +]; + +/** File patterns for dev-only code. */ +const DEV_FILE_PATTERNS = [ + '*.mock.{js,ts,tsx}', + '*.test.{js,ts,tsx}', + '*.test.helpers.{js,ts,tsx}', + '*.stories.{js,ts,tsx}', + '*.story.{js,ts,tsx}', + '*.stub.{js,ts,tsx}', + 'mock.{js,ts,tsx}', + '_stubs.{js,ts,tsx}', + '{testHelpers,test_helper,test_utils}.{js,ts,tsx}', + '{postcss,webpack}.config.js', +]; + +/** Glob patterns which describe dev-only code. */ +const DEV_PATTERNS = [ + ...DEV_PACKAGES.map((pkg) => `packages/${pkg}/**/*`), + ...DEV_DIRECTORIES.map((dir) => `{packages,src,x-pack}/**/${dir}/**/*`), + ...DEV_FILE_PATTERNS.map((file) => `{packages,src,x-pack}/**/${file}`), + 'packages/kbn-interpreter/tasks/**/*', + 'src/dev/**/*', + 'x-pack/{dev-tools,tasks,scripts,test,build_chromium}/**/*', + 'x-pack/plugins/*/server/scripts/**/*', +]; + module.exports = { root: true, @@ -491,43 +557,17 @@ module.exports = { }, /** - * Files that ARE NOT allowed to use devDependencies - */ - { - files: ['x-pack/**/*.js', 'packages/kbn-interpreter/**/*.js'], - rules: { - 'import/no-extraneous-dependencies': [ - 'error', - { - devDependencies: false, - peerDependencies: true, - packageDir: '.', - }, - ], - }, - }, - - /** - * Files that ARE allowed to use devDependencies + * Single package.json rules, it tells eslint to ignore the child package.json files + * and look for dependencies declarations in the single and root level package.json */ { - files: [ - 'packages/kbn-es/src/**/*.js', - 'packages/kbn-interpreter/tasks/**/*.js', - 'packages/kbn-interpreter/src/plugin/**/*.js', - 'x-pack/{dev-tools,tasks,scripts,test,build_chromium}/**/*.js', - 'x-pack/**/{__tests__,__test__,__jest__,__fixtures__,__mocks__,public}/**/*.js', - 'x-pack/**/*.test.js', - 'x-pack/test_utils/**/*', - 'x-pack/gulpfile.js', - 'x-pack/plugins/apm/public/utils/testHelpers.js', - 'x-pack/plugins/canvas/shareable_runtime/postcss.config.js', - ], + files: ['{src,x-pack,packages}/**/*.{js,mjs,ts,tsx}'], rules: { 'import/no-extraneous-dependencies': [ 'error', { - devDependencies: true, + /* Files that ARE allowed to use devDependencies */ + devDependencies: [...DEV_PATTERNS], peerDependencies: true, packageDir: '.', }, @@ -1420,21 +1460,5 @@ module.exports = { ], }, }, - - /** - * Single package.json rules, it tells eslint to ignore the child package.json files - * and look for dependencies declarations in the single and root level package.json - */ - { - files: ['**/*.{js,mjs,ts,tsx}'], - rules: { - 'import/no-extraneous-dependencies': [ - 'error', - { - packageDir: '.', - }, - ], - }, - }, ], }; diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 2f2f260addb35..33b3e4a7dede6 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -59,6 +59,7 @@ /x-pack/plugins/embeddable_enhanced/ @elastic/kibana-app-services /x-pack/plugins/ui_actions_enhanced/ @elastic/kibana-app-services /x-pack/plugins/runtime_fields @elastic/kibana-app-services +/x-pack/test/search_sessions_integration/ @elastic/kibana-app-services #CC# /src/plugins/bfetch/ @elastic/kibana-app-services #CC# /src/plugins/index_pattern_management/ @elastic/kibana-app-services #CC# /src/plugins/inspector/ @elastic/kibana-app-services diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index aa68db29974a8..348d756c141b0 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,4 +1,4 @@ -blank_issues_enabled: false +blank_issues_enabled: true contact_links: - name: Question url: https://discuss.elastic.co/c/kibana diff --git a/docs/api/actions-and-connectors.asciidoc b/docs/api/actions-and-connectors.asciidoc index 5480cdd57f691..ff4cb8401091e 100644 --- a/docs/api/actions-and-connectors.asciidoc +++ b/docs/api/actions-and-connectors.asciidoc @@ -5,19 +5,19 @@ Manage Actions and Connectors. The following connector APIs are available: -* <> to retrieve a single connector by ID +* <> to retrieve a single connector by ID -* <> to retrieve all connectors +* <> to retrieve all connectors -* <> to retrieve a list of all connector types +* <> to retrieve a list of all connector types -* <> to create connectors +* <> to create connectors -* <> to update the attributes for an existing connector +* <> to update the attributes for an existing connector -* <> to execute a connector by ID +* <> to execute a connector by ID -* <> to delete a connector by ID +* <> to delete a connector by ID For deprecated APIs, refer to <>. diff --git a/docs/api/actions-and-connectors/create.asciidoc b/docs/api/actions-and-connectors/create.asciidoc index c9a09e890ea6d..554e84615d568 100644 --- a/docs/api/actions-and-connectors/create.asciidoc +++ b/docs/api/actions-and-connectors/create.asciidoc @@ -1,25 +1,25 @@ -[[actions-and-connectors-api-create]] +[[create-connector-api]] === Create connector API ++++ -Create connector API +Create connector ++++ Creates a connector. -[[actions-and-connectors-api-create-request]] +[[create-connector-api-request]] ==== Request `POST :/api/actions/connector` `POST :/s//api/actions/connector` -[[actions-and-connectors-api-create-path-params]] +[[create-connector-api-path-params]] ==== Path parameters `space_id`:: (Optional, string) An identifier for the space. If `space_id` is not provided in the URL, the default space is used. -[[actions-and-connectors-api-create-request-body]] +[[create-connector-api-request-body]] ==== Request body `name`:: @@ -36,15 +36,15 @@ Creates a connector. (Required, object) The secrets configuration for the connector. Secrets configuration properties vary depending on the connector type. For information about the secrets configuration properties, refer to <>. + -WARNING: Remember these values. You must provide them each time you call the <> API. +WARNING: Remember these values. You must provide them each time you call the <> API. -[[actions-and-connectors-api-create-request-codes]] +[[create-connector-api-request-codes]] ==== Response code `200`:: Indicates a successful call. -[[actions-and-connectors-api-create-example]] +[[create-connector-api-example]] ==== Example [source,sh] diff --git a/docs/api/actions-and-connectors/delete.asciidoc b/docs/api/actions-and-connectors/delete.asciidoc index a9f9e658613e0..021a3f7cdf3f7 100644 --- a/docs/api/actions-and-connectors/delete.asciidoc +++ b/docs/api/actions-and-connectors/delete.asciidoc @@ -1,21 +1,21 @@ -[[actions-and-connectors-api-delete]] +[[delete-connector-api]] === Delete connector API ++++ -Delete connector API +Delete connector ++++ Deletes an connector by ID. WARNING: When you delete a connector, _it cannot be recovered_. -[[actions-and-connectors-api-delete-request]] +[[delete-connector-api-request]] ==== Request `DELETE :/api/actions/connector/` `DELETE :/s//api/actions/connector/` -[[actions-and-connectors-api-delete-path-params]] +[[delete-connector-api-path-params]] ==== Path parameters `id`:: @@ -24,7 +24,7 @@ WARNING: When you delete a connector, _it cannot be recovered_. `space_id`:: (Optional, string) An identifier for the space. If `space_id` is not provided in the URL, the default space is used. -[[actions-and-connectors-api-delete-response-codes]] +[[delete-connector-api-response-codes]] ==== Response code `200`:: diff --git a/docs/api/actions-and-connectors/execute.asciidoc b/docs/api/actions-and-connectors/execute.asciidoc index b87380907f7bb..e830c9b4bbf88 100644 --- a/docs/api/actions-and-connectors/execute.asciidoc +++ b/docs/api/actions-and-connectors/execute.asciidoc @@ -1,19 +1,19 @@ -[[actions-and-connectors-api-execute]] +[[execute-connector-api]] === Execute connector API ++++ -Execute connector API +Execute connector ++++ Executes a connector by ID. -[[actions-and-connectors-api-execute-request]] +[[execute-connector-api-request]] ==== Request `POST :/api/actions/connector//_execute` `POST :/s//api/actions/connector//_execute` -[[actions-and-connectors-api-execute-params]] +[[execute-connector-api-params]] ==== Path parameters `id`:: @@ -22,20 +22,20 @@ Executes a connector by ID. `space_id`:: (Optional, string) An identifier for the space. If `space_id` is not provided in the URL, the default space is used. -[[actions-and-connectors-api-execute-request-body]] +[[execute-connector-api-request-body]] ==== Request body `params`:: (Required, object) The parameters of the connector. Parameter properties vary depending on the connector type. For information about the parameter properties, refer to <>. -[[actions-and-connectors-api-execute-codes]] +[[execute-connector-api-codes]] ==== Response code `200`:: Indicates a successful call. -[[actions-and-connectors-api-execute-example]] +[[execute-connector-api-example]] ==== Example [source,sh] diff --git a/docs/api/actions-and-connectors/get.asciidoc b/docs/api/actions-and-connectors/get.asciidoc index 33d37a4add4dd..0d9af45c4ef0c 100644 --- a/docs/api/actions-and-connectors/get.asciidoc +++ b/docs/api/actions-and-connectors/get.asciidoc @@ -1,19 +1,19 @@ -[[actions-and-connectors-api-get]] +[[get-connector-api]] === Get connector API ++++ -Get connector API +Get connector ++++ Retrieves a connector by ID. -[[actions-and-connectors-api-get-request]] +[[get-connector-api-request]] ==== Request `GET :/api/actions/connector/` `GET :/s//api/actions/connector/` -[[actions-and-connectors-api-get-params]] +[[get-connector-api-params]] ==== Path parameters `id`:: @@ -22,13 +22,13 @@ Retrieves a connector by ID. `space_id`:: (Optional, string) An identifier for the space. If `space_id` is not provided in the URL, the default space is used. -[[actions-and-connectors-api-get-codes]] +[[get-connector-api-codes]] ==== Response code `200`:: Indicates a successful call. -[[actions-and-connectors-api-get-example]] +[[get-connector-api-example]] ==== Example [source,sh] diff --git a/docs/api/actions-and-connectors/get_all.asciidoc b/docs/api/actions-and-connectors/get_all.asciidoc index 8b4977d61e741..e4e67a9bbde73 100644 --- a/docs/api/actions-and-connectors/get_all.asciidoc +++ b/docs/api/actions-and-connectors/get_all.asciidoc @@ -1,31 +1,31 @@ -[[actions-and-connectors-api-get-all]] -=== Get all actions API +[[get-all-connectors-api]] +=== Get all connectors API ++++ -Get all actions API +Get all connectors ++++ Retrieves all connectors. -[[actions-and-connectors-api-get-all-request]] +[[get-all-connectors-api-request]] ==== Request `GET :/api/actions/connectors` `GET :/s//api/actions/connectors` -[[actions-and-connectors-api-get-all-path-params]] +[[get-all-connectors-api-path-params]] ==== Path parameters `space_id`:: (Optional, string) An identifier for the space. If `space_id` is not provided in the URL, the default space is used. -[[actions-and-connectors-api-get-all-codes]] +[[get-all-connectors-api-codes]] ==== Response code `200`:: Indicates a successful call. -[[actions-and-connectors-api-get-all-example]] +[[get-all-connectors-api-example]] ==== Example [source,sh] diff --git a/docs/api/actions-and-connectors/legacy/create.asciidoc b/docs/api/actions-and-connectors/legacy/create.asciidoc index faf6227f01947..af4feddcb80fb 100644 --- a/docs/api/actions-and-connectors/legacy/create.asciidoc +++ b/docs/api/actions-and-connectors/legacy/create.asciidoc @@ -1,12 +1,10 @@ [[actions-and-connectors-legacy-api-create]] ==== Legacy Create connector API ++++ -Legacy Create connector API +Legacy Create connector ++++ -deprecated::[7.13.0] - -Please use the <> instead. +WARNING: Deprecated in 7.13.0. Use <> instead. Creates a connector. diff --git a/docs/api/actions-and-connectors/legacy/delete.asciidoc b/docs/api/actions-and-connectors/legacy/delete.asciidoc index b02f1011fd9b4..170fceba2d157 100644 --- a/docs/api/actions-and-connectors/legacy/delete.asciidoc +++ b/docs/api/actions-and-connectors/legacy/delete.asciidoc @@ -1,12 +1,10 @@ [[actions-and-connectors-legacy-api-delete]] ==== Legacy Delete connector API ++++ -Legacy Delete connector API +Legacy Delete connector ++++ -deprecated::[7.13.0] - -Please use the <> instead. +WARNING: Deprecated in 7.13.0. Use <> instead. Deletes a connector by ID. diff --git a/docs/api/actions-and-connectors/legacy/execute.asciidoc b/docs/api/actions-and-connectors/legacy/execute.asciidoc index 30cb18c54aa69..200844ab72f17 100644 --- a/docs/api/actions-and-connectors/legacy/execute.asciidoc +++ b/docs/api/actions-and-connectors/legacy/execute.asciidoc @@ -1,12 +1,10 @@ [[actions-and-connectors-legacy-api-execute]] ==== Legacy Execute connector API ++++ -Legacy Execute connector API +Legacy Execute connector ++++ -deprecated::[7.13.0] - -Please use the <> instead. +WARNING: Deprecated in 7.13.0. Use <> instead. Executes a connector by ID. diff --git a/docs/api/actions-and-connectors/legacy/get.asciidoc b/docs/api/actions-and-connectors/legacy/get.asciidoc index cf8cc1b6b677e..1b138fb7032e0 100644 --- a/docs/api/actions-and-connectors/legacy/get.asciidoc +++ b/docs/api/actions-and-connectors/legacy/get.asciidoc @@ -1,12 +1,10 @@ [[actions-and-connectors-legacy-api-get]] ==== Legacy Get connector API ++++ -Legacy Get connector API +Legacy Get connector ++++ -deprecated::[7.13.0] - -Please use the <> instead. +WARNING: Deprecated in 7.13.0. Use <> instead. Retrieves a connector by ID. diff --git a/docs/api/actions-and-connectors/legacy/get_all.asciidoc b/docs/api/actions-and-connectors/legacy/get_all.asciidoc index 24ad446d95d95..ba235955c005e 100644 --- a/docs/api/actions-and-connectors/legacy/get_all.asciidoc +++ b/docs/api/actions-and-connectors/legacy/get_all.asciidoc @@ -1,12 +1,10 @@ [[actions-and-connectors-legacy-api-get-all]] ==== Legacy Get all connector API ++++ -Legacy Get all connector API +Legacy Get all connector ++++ -deprecated::[7.13.0] - -Please use the <> instead. +WARNING: Deprecated in 7.13.0. Use <> instead. Retrieves all connectors. diff --git a/docs/api/actions-and-connectors/legacy/list.asciidoc b/docs/api/actions-and-connectors/legacy/list.asciidoc index 86026f332d917..8acfd5415af57 100644 --- a/docs/api/actions-and-connectors/legacy/list.asciidoc +++ b/docs/api/actions-and-connectors/legacy/list.asciidoc @@ -1,12 +1,10 @@ [[actions-and-connectors-legacy-api-list]] ==== Legacy List connector types API ++++ -Legacy List all connector types API +Legacy List all connector types ++++ -deprecated::[7.13.0] - -Please use the <> instead. +WARNING: Deprecated in 7.13.0. Use <> instead. Retrieves a list of all connector types. diff --git a/docs/api/actions-and-connectors/legacy/update.asciidoc b/docs/api/actions-and-connectors/legacy/update.asciidoc index c2e841988717a..517daf9a40dca 100644 --- a/docs/api/actions-and-connectors/legacy/update.asciidoc +++ b/docs/api/actions-and-connectors/legacy/update.asciidoc @@ -1,12 +1,10 @@ [[actions-and-connectors-legacy-api-update]] ==== Legacy Update connector API ++++ -Legacy Update connector API +Legacy Update connector ++++ -deprecated::[7.13.0] - -Please use the <> instead. +WARNING: Deprecated in 7.13.0. Use <> instead. Updates the attributes for an existing connector. diff --git a/docs/api/actions-and-connectors/list.asciidoc b/docs/api/actions-and-connectors/list.asciidoc index 941f7b4376e91..bd1ccb777b9ae 100644 --- a/docs/api/actions-and-connectors/list.asciidoc +++ b/docs/api/actions-and-connectors/list.asciidoc @@ -1,31 +1,31 @@ -[[actions-and-connectors-api-list]] +[[list-connector-types-api]] === List connector types API ++++ -List all connector types API +List all connector types ++++ Retrieves a list of all connector types. -[[actions-and-connectors-api-list-request]] +[[list-connector-types-api-request]] ==== Request `GET :/api/actions/connector_types` `GET :/s//api/actions/connector_types` -[[actions-and-connectors-api-list-path-params]] +[[list-connector-types-api-path-params]] ==== Path parameters `space_id`:: (Optional, string) An identifier for the space. If `space_id` is not provided in the URL, the default space is used. -[[actions-and-connectors-api-list-codes]] +[[list-connector-types-api-codes]] ==== Response code `200`:: Indicates a successful call. -[[actions-and-connectors-api-list-example]] +[[list-connector-types-api-example]] ==== Example [source,sh] diff --git a/docs/api/actions-and-connectors/update.asciidoc b/docs/api/actions-and-connectors/update.asciidoc index 6c4e6040bdfb5..f522cb8d048e0 100644 --- a/docs/api/actions-and-connectors/update.asciidoc +++ b/docs/api/actions-and-connectors/update.asciidoc @@ -1,19 +1,19 @@ -[[actions-and-connectors-api-update]] +[[update-connector-api]] === Update connector API ++++ -Update connector API +Update connector ++++ Updates the attributes for an existing connector. -[[actions-and-connectors-api-update-request]] +[[update-connector-api-request]] ==== Request `PUT :/api/actions/connector/` `PUT :/s//api/actions/connector/` -[[actions-and-connectors-api-update-params]] +[[update-connector-api-params]] ==== Path parameters `id`:: @@ -22,7 +22,7 @@ Updates the attributes for an existing connector. `space_id`:: (Optional, string) An identifier for the space. If `space_id` is not provided in the URL, the default space is used. -[[actions-and-connectors-api-update-request-body]] +[[update-connector-api-request-body]] ==== Request body `name`:: @@ -34,13 +34,13 @@ Updates the attributes for an existing connector. `secrets`:: (Required, object) The updated secrets configuration for the connector. Secrets properties vary depending on the connector type. For information about the secrets configuration properties, refer to <>. -[[actions-and-connectors-api-update-codes]] +[[update-connector-api-codes]] ==== Response code `200`:: Indicates a successful call. -[[actions-and-connectors-api-update-example]] +[[update-connector-api-example]] ==== Example [source,sh] diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md index df5ce62cc07af..6ca7a83ac0a03 100644 --- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md +++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md @@ -87,7 +87,9 @@ readonly links: { readonly sum: string; readonly top_hits: string; }; - readonly runtimeFields: string; + readonly runtimeFields: { + readonly mapping: string; + }; readonly scriptedFields: { readonly scriptFields: string; readonly scriptAggs: string; diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md index da3ae17171c81..3847ab0c6183a 100644 --- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md +++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md @@ -17,5 +17,5 @@ export interface DocLinksStart | --- | --- | --- | | [DOC\_LINK\_VERSION](./kibana-plugin-core-public.doclinksstart.doc_link_version.md) | string | | | [ELASTIC\_WEBSITE\_URL](./kibana-plugin-core-public.doclinksstart.elastic_website_url.md) | string | | -| [links](./kibana-plugin-core-public.doclinksstart.links.md) | {
readonly dashboard: {
readonly guide: string;
readonly drilldowns: string;
readonly drilldownsTriggerPicker: string;
readonly urlDrilldownTemplateSyntax: string;
readonly urlDrilldownVariables: string;
};
readonly discover: Record<string, string>;
readonly filebeat: {
readonly base: string;
readonly installation: string;
readonly configuration: string;
readonly elasticsearchOutput: string;
readonly elasticsearchModule: string;
readonly startup: string;
readonly exportedFields: string;
};
readonly auditbeat: {
readonly base: string;
};
readonly metricbeat: {
readonly base: string;
readonly configure: string;
readonly httpEndpoint: string;
readonly install: string;
readonly start: string;
};
readonly enterpriseSearch: {
readonly base: string;
readonly appSearchBase: string;
readonly workplaceSearchBase: string;
};
readonly heartbeat: {
readonly base: string;
};
readonly logstash: {
readonly base: string;
};
readonly functionbeat: {
readonly base: string;
};
readonly winlogbeat: {
readonly base: string;
};
readonly aggs: {
readonly composite: string;
readonly composite_missing_bucket: string;
readonly date_histogram: string;
readonly date_range: string;
readonly date_format_pattern: string;
readonly filter: string;
readonly filters: string;
readonly geohash_grid: string;
readonly histogram: string;
readonly ip_range: string;
readonly range: string;
readonly significant_terms: string;
readonly terms: string;
readonly avg: string;
readonly avg_bucket: string;
readonly max_bucket: string;
readonly min_bucket: string;
readonly sum_bucket: string;
readonly cardinality: string;
readonly count: string;
readonly cumulative_sum: string;
readonly derivative: string;
readonly geo_bounds: string;
readonly geo_centroid: string;
readonly max: string;
readonly median: string;
readonly min: string;
readonly moving_avg: string;
readonly percentile_ranks: string;
readonly serial_diff: string;
readonly std_dev: string;
readonly sum: string;
readonly top_hits: string;
};
readonly runtimeFields: string;
readonly scriptedFields: {
readonly scriptFields: string;
readonly scriptAggs: string;
readonly painless: string;
readonly painlessApi: string;
readonly painlessLangSpec: string;
readonly painlessSyntax: string;
readonly painlessWalkthrough: string;
readonly luceneExpressions: string;
};
readonly indexPatterns: {
readonly introduction: string;
readonly fieldFormattersNumber: string;
readonly fieldFormattersString: string;
};
readonly addData: string;
readonly kibana: string;
readonly elasticsearch: Record<string, string>;
readonly siem: {
readonly guide: string;
readonly gettingStarted: string;
};
readonly query: {
readonly eql: string;
readonly luceneQuerySyntax: string;
readonly queryDsl: string;
readonly kueryQuerySyntax: string;
};
readonly date: {
readonly dateMath: string;
readonly dateMathIndexNames: string;
};
readonly management: Record<string, string>;
readonly ml: Record<string, string>;
readonly transforms: Record<string, string>;
readonly visualize: Record<string, string>;
readonly apis: Readonly<{
createIndex: string;
createSnapshotLifecyclePolicy: string;
createRoleMapping: string;
createRoleMappingTemplates: string;
createApiKey: string;
createPipeline: string;
createTransformRequest: string;
cronExpressions: string;
executeWatchActionModes: string;
indexExists: string;
openIndex: string;
putComponentTemplate: string;
painlessExecute: string;
painlessExecuteAPIContexts: string;
putComponentTemplateMetadata: string;
putSnapshotLifecyclePolicy: string;
putWatch: string;
updateTransform: string;
}>;
readonly observability: Record<string, string>;
readonly alerting: Record<string, string>;
readonly maps: Record<string, string>;
readonly monitoring: Record<string, string>;
readonly security: Readonly<{
apiKeyServiceSettings: string;
clusterPrivileges: string;
elasticsearchSettings: string;
elasticsearchEnableSecurity: string;
indicesPrivileges: string;
kibanaTLS: string;
kibanaPrivileges: string;
mappingRoles: string;
mappingRolesFieldRules: string;
runAsPrivilege: string;
}>;
readonly watcher: Record<string, string>;
readonly ccs: Record<string, string>;
readonly plugins: Record<string, string>;
readonly snapshotRestore: Record<string, string>;
readonly ingest: Record<string, string>;
} | | +| [links](./kibana-plugin-core-public.doclinksstart.links.md) | {
readonly dashboard: {
readonly guide: string;
readonly drilldowns: string;
readonly drilldownsTriggerPicker: string;
readonly urlDrilldownTemplateSyntax: string;
readonly urlDrilldownVariables: string;
};
readonly discover: Record<string, string>;
readonly filebeat: {
readonly base: string;
readonly installation: string;
readonly configuration: string;
readonly elasticsearchOutput: string;
readonly elasticsearchModule: string;
readonly startup: string;
readonly exportedFields: string;
};
readonly auditbeat: {
readonly base: string;
};
readonly metricbeat: {
readonly base: string;
readonly configure: string;
readonly httpEndpoint: string;
readonly install: string;
readonly start: string;
};
readonly enterpriseSearch: {
readonly base: string;
readonly appSearchBase: string;
readonly workplaceSearchBase: string;
};
readonly heartbeat: {
readonly base: string;
};
readonly logstash: {
readonly base: string;
};
readonly functionbeat: {
readonly base: string;
};
readonly winlogbeat: {
readonly base: string;
};
readonly aggs: {
readonly composite: string;
readonly composite_missing_bucket: string;
readonly date_histogram: string;
readonly date_range: string;
readonly date_format_pattern: string;
readonly filter: string;
readonly filters: string;
readonly geohash_grid: string;
readonly histogram: string;
readonly ip_range: string;
readonly range: string;
readonly significant_terms: string;
readonly terms: string;
readonly avg: string;
readonly avg_bucket: string;
readonly max_bucket: string;
readonly min_bucket: string;
readonly sum_bucket: string;
readonly cardinality: string;
readonly count: string;
readonly cumulative_sum: string;
readonly derivative: string;
readonly geo_bounds: string;
readonly geo_centroid: string;
readonly max: string;
readonly median: string;
readonly min: string;
readonly moving_avg: string;
readonly percentile_ranks: string;
readonly serial_diff: string;
readonly std_dev: string;
readonly sum: string;
readonly top_hits: string;
};
readonly runtimeFields: {
readonly mapping: string;
};
readonly scriptedFields: {
readonly scriptFields: string;
readonly scriptAggs: string;
readonly painless: string;
readonly painlessApi: string;
readonly painlessLangSpec: string;
readonly painlessSyntax: string;
readonly painlessWalkthrough: string;
readonly luceneExpressions: string;
};
readonly indexPatterns: {
readonly introduction: string;
readonly fieldFormattersNumber: string;
readonly fieldFormattersString: string;
};
readonly addData: string;
readonly kibana: string;
readonly elasticsearch: Record<string, string>;
readonly siem: {
readonly guide: string;
readonly gettingStarted: string;
};
readonly query: {
readonly eql: string;
readonly luceneQuerySyntax: string;
readonly queryDsl: string;
readonly kueryQuerySyntax: string;
};
readonly date: {
readonly dateMath: string;
readonly dateMathIndexNames: string;
};
readonly management: Record<string, string>;
readonly ml: Record<string, string>;
readonly transforms: Record<string, string>;
readonly visualize: Record<string, string>;
readonly apis: Readonly<{
createIndex: string;
createSnapshotLifecyclePolicy: string;
createRoleMapping: string;
createRoleMappingTemplates: string;
createApiKey: string;
createPipeline: string;
createTransformRequest: string;
cronExpressions: string;
executeWatchActionModes: string;
indexExists: string;
openIndex: string;
putComponentTemplate: string;
painlessExecute: string;
painlessExecuteAPIContexts: string;
putComponentTemplateMetadata: string;
putSnapshotLifecyclePolicy: string;
putWatch: string;
updateTransform: string;
}>;
readonly observability: Record<string, string>;
readonly alerting: Record<string, string>;
readonly maps: Record<string, string>;
readonly monitoring: Record<string, string>;
readonly security: Readonly<{
apiKeyServiceSettings: string;
clusterPrivileges: string;
elasticsearchSettings: string;
elasticsearchEnableSecurity: string;
indicesPrivileges: string;
kibanaTLS: string;
kibanaPrivileges: string;
mappingRoles: string;
mappingRolesFieldRules: string;
runAsPrivilege: string;
}>;
readonly watcher: Record<string, string>;
readonly ccs: Record<string, string>;
readonly plugins: Record<string, string>;
readonly snapshotRestore: Record<string, string>;
readonly ingest: Record<string, string>;
} | | diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchsource.fetch_.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchsource.fetch_.md index bcf220a9a27e6..d5641107a88aa 100644 --- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchsource.fetch_.md +++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchsource.fetch_.md @@ -9,7 +9,7 @@ Fetch this source from Elasticsearch, returning an observable over the response( Signature: ```typescript -fetch$(options?: ISearchOptions): import("rxjs").Observable>; +fetch$(options?: ISearchOptions): import("rxjs").Observable>; ``` ## Parameters @@ -20,5 +20,5 @@ fetch$(options?: ISearchOptions): import("rxjs").ObservableReturns: -`import("rxjs").Observable>` +`import("rxjs").Observable>` diff --git a/docs/maps/images/gs_add_cloropeth_layer.png b/docs/maps/images/gs_add_cloropeth_layer.png index 1528f404026f2..42e00ccc5dd24 100644 Binary files a/docs/maps/images/gs_add_cloropeth_layer.png and b/docs/maps/images/gs_add_cloropeth_layer.png differ diff --git a/docs/maps/images/gs_add_es_document_layer.png b/docs/maps/images/gs_add_es_document_layer.png index f4ffbc581745d..d7616c4b11fe0 100644 Binary files a/docs/maps/images/gs_add_es_document_layer.png and b/docs/maps/images/gs_add_es_document_layer.png differ diff --git a/docs/maps/images/sample_data_web_logs.png b/docs/maps/images/sample_data_web_logs.png index 3b0c2ba3f12c0..f4f4de88f1992 100644 Binary files a/docs/maps/images/sample_data_web_logs.png and b/docs/maps/images/sample_data_web_logs.png differ diff --git a/docs/maps/maps-getting-started.asciidoc b/docs/maps/maps-getting-started.asciidoc index c62aafac00d3f..39ea4daf2ba33 100644 --- a/docs/maps/maps-getting-started.asciidoc +++ b/docs/maps/maps-getting-started.asciidoc @@ -67,8 +67,9 @@ and lighter shades will symbolize countries with less traffic. . In **Layer style**, set: -** **Fill color** to the grey color ramp +** **Fill color: As number** to the grey color ramp ** **Border color** to white +** **Label** to symbol label . Click **Save & close**. + @@ -102,7 +103,7 @@ The layer is only visible when users zoom in. . In **Layer settings**, set: ** **Name** to `Actual Requests` -** **Visibilty** to the range [9, 24] +** **Visibility** to the range [9, 24] ** **Opacity** to 100% . Add a tooltip field and select **agent**, **bytes**, **clientip**, **host**, @@ -134,9 +135,9 @@ grids with less bytes transferred. ** **Name** to `Total Requests and Bytes` ** **Visibility** to the range [0, 9] ** **Opacity** to 100% -. Add a metric with: -** **Aggregation** set to **Sum** -** **Field** set to **bytes** +. In **Metrics**, use: +** **Agregation** set to **Count**, and +** **Aggregation** set to **Sum** with **Field** set to **bytes** . In **Layer style**, change **Symbol size**: ** Set the field select to *sum bytes*. ** Set the min size to 7 and the max size to 25 px. diff --git a/docs/user/production-considerations/task-manager-troubleshooting.asciidoc b/docs/user/production-considerations/task-manager-troubleshooting.asciidoc index c96b294c0c50d..5e75aef0d9570 100644 --- a/docs/user/production-considerations/task-manager-troubleshooting.asciidoc +++ b/docs/user/production-considerations/task-manager-troubleshooting.asciidoc @@ -706,3 +706,21 @@ These rough calculations give you a lower bound to the required throughput, whic Given these inferred attributes, it would be safe to assume that a single {kib} instance with default settings **would not** provide the required throughput. It is possible that scaling horizontally by adding a couple more {kib} instances will. For details on scaling Task Manager, see <>. + +[float] +[[task-manager-cannot-operate-when-inline-scripts-are-disabled]] +==== Inline scripts are disabled in {es} + +*Problem*: + +Tasks are not running, and the server logs contain the following error message: + +[source, txt] +-------------------------------------------------- +[warning][plugins][taskManager] Task Manager cannot operate when inline scripts are disabled in {es} +-------------------------------------------------- + +*Solution*: + +Inline scripts are a hard requirement for Task Manager to function. +To enable inline scripting, see the Elasticsearch documentation for {ref}/modules-scripting-security.html#allowed-script-types-setting[configuring allowed script types setting]. diff --git a/package.json b/package.json index 66a6ef1d4558b..32def9e2e9fc6 100644 --- a/package.json +++ b/package.json @@ -95,18 +95,23 @@ "yarn": "^1.21.1" }, "dependencies": { + "@elastic/apm-rum": "^5.6.1", + "@elastic/apm-rum-react": "^1.2.5", + "@elastic/charts": "26.0.0", "@elastic/datemath": "link:packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.4", "@elastic/ems-client": "7.12.0", "@elastic/eui": "31.7.0", "@elastic/filesaver": "1.1.2", "@elastic/good": "^9.0.1-kibana3", + "@elastic/maki": "6.3.0", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.0", "@elastic/react-search-ui": "^1.5.1", "@elastic/request-crypto": "1.1.4", "@elastic/safer-lodash-set": "link:packages/elastic-safer-lodash-set", "@elastic/search-ui-app-search-connector": "^1.5.0", + "@elastic/ui-ace": "0.2.3", "@hapi/boom": "^9.1.1", "@hapi/cookie": "^11.0.2", "@hapi/good-squeeze": "6.0.0", @@ -131,9 +136,15 @@ "@kbn/tinymath": "link:packages/kbn-tinymath", "@kbn/ui-framework": "link:packages/kbn-ui-framework", "@kbn/ui-shared-deps": "link:packages/kbn-ui-shared-deps", + "@kbn/utility-types": "link:packages/kbn-utility-types", "@kbn/utils": "link:packages/kbn-utils", "@loaders.gl/core": "^2.3.1", "@loaders.gl/json": "^2.3.1", + "@mapbox/geojson-rewind": "^0.5.0", + "@mapbox/mapbox-gl-draw": "^1.2.0", + "@mapbox/mapbox-gl-rtl-text": "^0.2.3", + "@mapbox/vector-tile": "1.3.1", + "@scant/router": "^0.1.1", "@slack/webhook": "^5.0.4", "@turf/along": "6.0.1", "@turf/area": "6.0.1", @@ -151,41 +162,59 @@ "accept": "3.0.2", "ajv": "^6.12.4", "angular": "^1.8.0", + "angular-aria": "^1.8.0", "angular-elastic": "^2.5.1", + "angular-recursion": "^1.0.5", "angular-resource": "1.8.0", + "angular-route": "^1.8.0", "angular-sanitize": "^1.8.0", + "angular-sortable-view": "^0.0.17", "angular-ui-ace": "0.2.3", "antlr4ts": "^0.5.0-alpha.3", "apollo-cache-inmemory": "1.6.2", "apollo-client": "^2.3.8", + "apollo-link": "^1.2.3", + "apollo-link-error": "^1.1.7", "apollo-link-http": "^1.5.16", "apollo-link-http-common": "^0.2.15", "apollo-link-schema": "^1.1.0", + "apollo-link-state": "^0.4.1", "apollo-server-core": "^1.3.6", "apollo-server-errors": "^2.0.2", "apollo-server-hapi": "^1.3.6", "archiver": "^5.2.0", "axios": "^0.21.1", + "base64-js": "^1.3.1", "bluebird": "3.5.5", "brace": "0.11.1", + "broadcast-channel": "^3.0.3", "chalk": "^4.1.0", "check-disk-space": "^2.1.0", + "cheerio": "0.22.0", "chokidar": "^3.4.3", "chroma-js": "^1.4.1", "classnames": "2.2.6", "color": "1.0.3", "commander": "^3.0.2", + "compare-versions": "3.5.1", "concat-stream": "1.6.2", + "constate": "^1.3.2", + "cronstrue": "^1.51.0", "content-disposition": "0.5.3", + "copy-to-clipboard": "^3.0.8", "core-js": "^3.6.5", "custom-event-polyfill": "^0.3.0", "cytoscape": "^3.10.0", "cytoscape-dagre": "^2.2.2", + "d3": "3.5.17", "d3-array": "1.2.4", + "d3-cloud": "1.2.5", + "d3-scale": "1.0.7", "d3-shape": "^1.1.0", "d3-time": "^1.1.0", "dedent": "^0.7.0", "deep-freeze-strict": "^1.1.1", + "deepmerge": "^4.2.2", "del": "^5.1.0", "elastic-apm-node": "^3.10.0", "elasticsearch": "^16.7.0", @@ -194,9 +223,11 @@ "expiry-js": "0.1.7", "extract-zip": "^2.0.1", "fast-deep-equal": "^3.1.1", + "file-saver": "^1.3.8", "file-type": "^10.9.0", "focus-trap-react": "^3.1.1", "font-awesome": "4.7.0", + "formsy-react": "^1.1.5", "fp-ts": "^2.3.1", "geojson-vt": "^3.2.1", "get-port": "^5.0.0", @@ -212,31 +243,51 @@ "graphql-tag": "^2.10.3", "graphql-tools": "^3.0.2", "handlebars": "4.7.7", + "he": "^1.2.0", "history": "^4.9.0", + "history-extra": "^5.0.1", "hjson": "3.2.1", "http-proxy-agent": "^2.1.0", "https-proxy-agent": "^5.0.0", + "i18n-iso-countries": "^4.3.1", + "icalendar": "0.7.1", "idx": "^2.5.6", "immer": "^8.0.1", "inline-style": "^2.0.0", "intl": "^1.2.5", "intl-format-cache": "^2.1.0", "intl-messageformat": "^2.2.0", + "intl-messageformat-parser": "^1.4.0", "intl-relativeformat": "^2.1.0", "io-ts": "^2.0.5", "ipaddr.js": "2.0.0", "isbinaryfile": "4.0.2", "joi": "^13.5.2", "jquery": "^3.5.0", + "js-levenshtein": "^1.1.6", + "js-search": "^1.4.3", "js-yaml": "^3.14.0", "json-stable-stringify": "^1.0.1", + "json-stringify-pretty-compact": "1.2.0", "json-stringify-safe": "5.0.1", "jsonwebtoken": "^8.5.1", + "jsts": "^1.6.2", + "kea": "^2.3.0", + "leaflet": "1.5.1", + "leaflet-draw": "0.4.14", + "leaflet-responsive-popup": "0.6.4", + "leaflet.heat": "0.2.0", + "less": "npm:@elastic/less@2.7.3-kibana", "load-json-file": "^6.2.0", + "loader-utils": "^1.2.3", "lodash": "^4.17.21", "lru-cache": "^4.1.5", + "lz-string": "^1.4.4", "markdown-it": "^10.0.0", + "mapbox-gl": "1.13.1", + "mapbox-gl-draw-rectangle-mode": "^1.0.4", "md5": "^2.1.0", + "memoize-one": "^5.0.0", "mime": "^2.4.4", "mime-types": "^2.1.27", "mini-css-extract-plugin": "0.8.0", @@ -261,38 +312,69 @@ "papaparse": "^5.2.0", "pdfmake": "^0.1.65", "pegjs": "0.10.0", + "p-limit": "^3.0.1", + "pluralize": "3.1.0", "pngjs": "^3.4.0", + "polished": "^1.9.2", "prop-types": "^15.7.2", "proper-lockfile": "^3.2.0", "proxy-from-env": "1.0.0", + "proxyquire": "1.8.0", "puid": "1.0.7", "puppeteer": "npm:@elastic/puppeteer@5.4.1-patch.1", "query-string": "^6.13.2", "raw-loader": "^3.1.0", + "rbush": "^3.0.1", + "re-resizable": "^6.1.1", "re2": "^1.15.4", "react": "^16.12.0", "react-ace": "^5.9.0", + "react-apollo": "^2.1.4", + "react-beautiful-dnd": "^13.0.0", "react-color": "^2.13.8", "react-datetime": "^2.14.0", "react-dom": "^16.12.0", + "react-dropzone": "^4.2.9", + "react-fast-compare": "^2.0.4", + "react-grid-layout": "^0.16.2", "react-input-range": "^1.3.0", "react-intl": "^2.8.0", "react-is": "^16.8.0", + "react-markdown": "^4.3.1", "react-moment-proptypes": "^1.7.0", + "react-monaco-editor": "^0.41.2", + "react-popper-tooltip": "^2.10.1", "react-query": "^3.12.0", + "react-resize-detector": "^4.2.0", + "react-reverse-portal": "^1.0.4", + "react-router-redux": "^4.0.8", + "react-shortcuts": "^2.0.0", + "react-sizeme": "^2.3.6", + "react-syntax-highlighter": "^15.3.1", "react-redux": "^7.2.0", "react-resizable": "^1.7.5", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", + "react-tiny-virtual-list": "^2.2.0", + "react-virtualized": "^9.21.2", "react-use": "^15.3.8", + "react-vis": "^1.8.1", + "react-visibility-sensor": "^5.1.1", + "reactcss": "1.2.3", "recompose": "^0.26.0", + "reduce-reducers": "^1.0.4", "redux": "^4.0.5", "redux-actions": "^2.6.5", + "redux-devtools-extension": "^2.13.8", "redux-observable": "^1.2.0", + "redux-saga": "^1.1.3", "redux-thunk": "^2.3.0", + "redux-thunks": "^1.0.0", "regenerator-runtime": "^0.13.3", "request": "^2.88.0", "require-in-the-middle": "^5.0.2", + "reselect": "^4.0.0", + "resize-observer-polyfill": "^1.5.0", "rison-node": "1.0.2", "rxjs": "^6.5.5", "seedrandom": "^3.0.5", @@ -305,17 +387,30 @@ "style-it": "^2.1.3", "styled-components": "^5.1.0", "symbol-observable": "^1.2.0", + "suricata-sid-db": "^1.0.2", "tabbable": "1.1.3", "tar": "4.4.13", + "tinycolor2": "1.4.1", "tinygradient": "0.4.3", + "topojson-client": "3.0.0", "tree-kill": "^1.2.2", "ts-easing": "^0.2.0", "tslib": "^2.0.0", "type-detect": "^4.0.8", + "typescript-fsa": "^3.0.0", + "typescript-fsa-reducers": "^1.2.2", "ui-select": "0.19.8", "unified": "^9.2.1", + "unstated": "^2.1.1", + "use-resize-observer": "^6.0.0", "utility-types": "^3.10.0", "uuid": "3.3.2", + "vega": "^5.19.1", + "vega-lite": "^4.17.0", + "vega-schema-url-parser": "^2.1.0", + "vega-spec-injector": "^0.0.2", + "vega-tooltip": "^0.25.0", + "venn.js": "0.2.20", "vinyl": "^2.2.0", "vt-pbf": "^3.1.1", "wellknown": "^0.5.0", @@ -347,13 +442,10 @@ "@cypress/webpack-preprocessor": "^5.5.0", "@elastic/apm-rum": "^5.6.1", "@elastic/apm-rum-react": "^1.2.5", - "@elastic/charts": "25.3.0", "@elastic/eslint-config-kibana": "link:packages/elastic-eslint-config-kibana", "@elastic/eslint-plugin-eui": "0.0.2", "@elastic/github-checks-reporter": "0.0.20b3", "@elastic/makelogs": "^6.0.0", - "@elastic/maki": "6.3.0", - "@elastic/ui-ace": "0.2.3", "@istanbuljs/schema": "^0.1.2", "@jest/reporters": "^26.5.2", "@kbn/babel-code-parser": "link:packages/kbn-babel-code-parser", @@ -373,17 +465,11 @@ "@kbn/telemetry-tools": "link:packages/kbn-telemetry-tools", "@kbn/test": "link:packages/kbn-test", "@kbn/test-subj-selector": "link:packages/kbn-test-subj-selector", - "@kbn/utility-types": "link:packages/kbn-utility-types", "@loaders.gl/polyfills": "^2.3.5", - "@mapbox/geojson-rewind": "^0.5.0", - "@mapbox/mapbox-gl-draw": "^1.2.0", - "@mapbox/mapbox-gl-rtl-text": "^0.2.3", - "@mapbox/vector-tile": "1.3.1", "@microsoft/api-documenter": "7.7.2", "@microsoft/api-extractor": "7.7.0", "@octokit/rest": "^16.35.0", "@percy/agent": "^0.28.6", - "@scant/router": "^0.1.0", "@storybook/addon-a11y": "^6.1.20", "@storybook/addon-actions": "^6.1.20", "@storybook/addon-docs": "^6.1.20", @@ -456,7 +542,6 @@ "@types/he": "^1.1.1", "@types/history": "^4.7.3", "@types/hjson": "^2.4.2", - "@types/hoist-non-react-statics": "^3.3.1", "@types/http-proxy": "^1.17.4", "@types/http-proxy-agent": "^2.0.2", "@types/inquirer": "^7.3.1", @@ -476,7 +561,6 @@ "@types/listr": "^0.14.0", "@types/loader-utils": "^1.1.3", "@types/lodash": "^4.14.159", - "@types/log-symbols": "^2.0.0", "@types/lru-cache": "^5.1.0", "@types/mapbox-gl": "^1.9.1", "@types/markdown-it": "^0.0.7", @@ -563,21 +647,13 @@ "@types/zen-observable": "^0.8.0", "@typescript-eslint/eslint-plugin": "^4.14.1", "@typescript-eslint/parser": "^4.14.1", - "@welldone-software/why-did-you-render": "^5.0.0", "@yarnpkg/lockfile": "^1.1.0", "abab": "^2.0.4", "aggregate-error": "^3.1.0", - "angular-aria": "^1.8.0", "angular-mocks": "^1.7.9", - "angular-recursion": "^1.0.5", - "angular-route": "^1.8.0", - "angular-sortable-view": "^0.0.17", "antlr4ts-cli": "^0.5.0-alpha.3", "apidoc": "^0.25.0", "apidoc-markdown": "^5.1.8", - "apollo-link": "^1.2.3", - "apollo-link-error": "^1.1.7", - "apollo-link-state": "^0.4.1", "argsplit": "^1.0.5", "autoprefixer": "^9.7.4", "axe-core": "^4.0.2", @@ -590,34 +666,23 @@ "babel-plugin-styled-components": "^1.10.7", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "backport": "^5.6.6", - "base64-js": "^1.3.1", "base64url": "^3.0.1", - "broadcast-channel": "^3.0.3", "callsites": "^3.1.0", "chai": "3.5.0", "chance": "1.0.18", - "cheerio": "0.22.0", "chromedriver": "^89.0.0", "clean-webpack-plugin": "^3.0.0", "cmd-shim": "^2.1.0", - "compare-versions": "3.5.1", "compression-webpack-plugin": "^4.0.0", - "constate": "^1.3.2", - "copy-to-clipboard": "^3.0.8", "copy-webpack-plugin": "^6.0.2", "cpy": "^8.1.1", - "cronstrue": "^1.51.0", "css-loader": "^3.4.2", "cypress": "^6.2.1", "cypress-cucumber-preprocessor": "^2.5.2", "cypress-multi-reporters": "^1.4.0", "cypress-pipe": "^2.0.0", "cypress-promise": "^1.1.0", - "d3": "3.5.17", - "d3-cloud": "1.2.5", - "d3-scale": "1.0.7", "debug": "^2.6.9", - "deepmerge": "^4.2.2", "del-cli": "^3.0.1", "delete-empty": "^2.0.0", "dependency-check": "^4.1.0", @@ -654,9 +719,7 @@ "fast-glob": "2.2.7", "fetch-mock": "^7.3.9", "file-loader": "^4.2.0", - "file-saver": "^1.3.8", "form-data": "^4.0.0", - "formsy-react": "^1.1.5", "geckodriver": "^1.22.2", "glob-watcher": "5.0.3", "graphql-code-generator": "^0.18.2", @@ -675,19 +738,10 @@ "gulp-zip": "^5.0.2", "has-ansi": "^3.0.0", "hdr-histogram-js": "^1.2.0", - "he": "^1.2.0", - "highlight.js": "^9.18.5", - "history-extra": "^5.0.1", - "hoist-non-react-statics": "^3.3.2", "html": "1.0.0", "html-loader": "^0.5.5", "http-proxy": "^1.18.1", - "i18n-iso-countries": "^4.3.1", - "icalendar": "0.7.1", - "iedriver": "^3.14.2", - "imports-loader": "^0.8.0", "inquirer": "^7.3.3", - "intl-messageformat-parser": "^1.4.0", "is-glob": "^4.0.1", "is-path-inside": "^3.0.2", "istanbul-instrumenter-loader": "^3.0.1", @@ -705,31 +759,14 @@ "jest-styled-components": "^7.0.2", "jest-when": "^2.7.2", "jimp": "^0.14.0", - "js-levenshtein": "^1.1.6", - "js-search": "^1.4.3", "jsdom": "13.1.0", - "json-stringify-pretty-compact": "1.2.0", "json5": "^1.0.1", "jsondiffpatch": "0.4.1", - "jsts": "^1.6.2", - "kea": "^2.3.0", - "keymirror": "0.1.1", - "leaflet": "1.5.1", - "leaflet-draw": "0.4.14", - "leaflet-responsive-popup": "0.6.4", - "leaflet.heat": "0.2.0", - "less": "npm:@elastic/less@2.7.3-kibana", "license-checker": "^16.0.0", "listr": "^0.14.1", "lmdb-store": "^0.9.0", "load-grunt-config": "^3.0.1", - "loader-utils": "^1.2.3", - "log-symbols": "^2.2.0", - "lz-string": "^1.4.4", - "mapbox-gl": "1.13.1", - "mapbox-gl-draw-rectangle-mode": "^1.0.4", "marge": "^1.0.1", - "memoize-one": "^5.0.0", "micromatch": "3.1.10", "minimist": "^1.2.5", "mkdirp": "0.5.1", @@ -741,8 +778,6 @@ "mock-http-server": "1.3.0", "ms-chromium-edge-driver": "^0.2.3", "multimatch": "^4.0.0", - "multistream": "^2.1.1", - "murmurhash3js": "3.0.1", "mutation-observer": "^1.0.3", "ncp": "^2.0.0", "node-sass": "^4.14.1", @@ -750,53 +785,19 @@ "nyc": "^15.0.1", "oboe": "^2.1.4", "ora": "^4.0.4", - "p-limit": "^3.0.1", "parse-link-header": "^1.0.1", "pbf": "3.2.1", "pirates": "^4.0.1", "pixelmatch": "^5.1.0", - "pkg-up": "^2.0.0", - "pluralize": "3.1.0", - "polished": "^1.9.2", "postcss": "^7.0.32", "postcss-loader": "^3.0.0", "postcss-prefix-selector": "^1.7.2", "prettier": "^2.2.0", "pretty-ms": "5.0.0", - "proxyquire": "1.8.0", "q": "^1.5.1", - "querystring": "^0.2.0", - "rbush": "^3.0.1", - "re-resizable": "^6.1.1", - "react-apollo": "^2.1.4", - "react-beautiful-dnd": "^13.0.0", - "react-docgen-typescript-loader": "^3.1.1", - "react-dropzone": "^4.2.9", - "react-fast-compare": "^2.0.4", - "react-grid-layout": "^0.16.2", - "react-markdown": "^4.3.1", - "react-monaco-editor": "^0.41.2", - "react-popper-tooltip": "^2.10.1", - "react-resize-detector": "^4.2.0", - "react-reverse-portal": "^1.0.4", - "react-router-redux": "^4.0.8", - "react-shortcuts": "^2.0.0", - "react-sizeme": "^2.3.6", - "react-syntax-highlighter": "^15.3.1", "react-test-renderer": "^16.12.0", - "react-tiny-virtual-list": "^2.2.0", - "react-virtualized": "^9.21.2", - "react-vis": "^1.8.1", - "react-visibility-sensor": "^5.1.1", - "reactcss": "1.2.3", "read-pkg": "^5.2.0", - "reduce-reducers": "^1.0.4", - "redux-devtools-extension": "^2.13.8", - "redux-saga": "^1.1.3", - "redux-thunks": "^1.0.0", "regenerate": "^1.4.0", - "reselect": "^4.0.0", - "resize-observer-polyfill": "^1.5.0", "resolve": "^1.7.1", "rxjs-marbles": "^5.0.6", "sass-loader": "^8.0.2", @@ -816,31 +817,18 @@ "supertest": "^3.1.0", "supertest-as-promised": "^4.0.2", "supports-color": "^7.0.0", - "suricata-sid-db": "^1.0.2", "tape": "^5.0.1", "tar-fs": "^2.1.0", "tempy": "^0.3.0", "terminal-link": "^2.1.1", "terser-webpack-plugin": "^2.1.2", - "tinycolor2": "1.4.1", - "topojson-client": "3.0.0", "ts-loader": "^7.0.5", "ts-morph": "^9.1.0", "tsd": "^0.13.1", "typescript": "4.1.3", - "typescript-fsa": "^3.0.0", - "typescript-fsa-reducers": "^1.2.2", "unlazy-loader": "^0.1.3", - "unstated": "^2.1.1", "url-loader": "^2.2.0", - "use-resize-observer": "^6.0.0", "val-loader": "^1.1.1", - "vega": "^5.19.1", - "vega-lite": "^4.17.0", - "vega-schema-url-parser": "^2.1.0", - "vega-spec-injector": "^0.0.2", - "vega-tooltip": "^0.25.0", - "venn.js": "0.2.20", "vinyl-fs": "^3.0.3", "wait-on": "^5.2.1", "watchpack": "^1.6.0", diff --git a/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx b/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx index f517565434c18..686a201761dcd 100644 --- a/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx +++ b/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx @@ -85,6 +85,7 @@ export function mountWithIntl( childContextTypes, ...props }: { + attachTo?: HTMLElement; context?: any; childContextTypes?: ValidationMap; } = {} diff --git a/packages/kbn-utility-types/package.json b/packages/kbn-utility-types/package.json index a8f6e25276cec..33419ee0f1ec4 100644 --- a/packages/kbn-utility-types/package.json +++ b/packages/kbn-utility-types/package.json @@ -6,7 +6,7 @@ "main": "target", "types": "target/index.d.ts", "kibana": { - "devOnly": true + "devOnly": false }, "scripts": { "build": "../../node_modules/.bin/tsc", diff --git a/src/cli/serve/serve.js b/src/cli/serve/serve.js index 13c16691bf12a..34b78bbd7e51e 100644 --- a/src/cli/serve/serve.js +++ b/src/cli/serve/serve.js @@ -68,6 +68,7 @@ function applyConfigOverrides(rawConfig, opts, extraCliOptions) { if (opts.ssl) { // @kbn/dev-utils is part of devDependencies + // eslint-disable-next-line import/no-extraneous-dependencies const { CA_CERT_PATH, KBN_KEY_PATH, KBN_CERT_PATH } = require('@kbn/dev-utils'); const customElasticsearchHosts = opts.elasticsearch ? opts.elasticsearch.split(',') diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts index 0bb5ddd29609e..cfc2dae0b1c67 100644 --- a/src/core/public/doc_links/doc_links_service.ts +++ b/src/core/public/doc_links/doc_links_service.ts @@ -108,7 +108,9 @@ export class DocLinksService { sum: `${ELASTICSEARCH_DOCS}search-aggregations-metrics-sum-aggregation.html`, top_hits: `${ELASTICSEARCH_DOCS}search-aggregations-metrics-top-hits-aggregation.html`, }, - runtimeFields: `${ELASTICSEARCH_DOCS}runtime.html`, + runtimeFields: { + mapping: `${ELASTICSEARCH_DOCS}runtime-mapping-fields.html`, + }, scriptedFields: { scriptFields: `${ELASTICSEARCH_DOCS}search-request-script-fields.html`, scriptAggs: `${ELASTICSEARCH_DOCS}search-aggregations.html`, @@ -381,7 +383,9 @@ export interface DocLinksStart { readonly sum: string; readonly top_hits: string; }; - readonly runtimeFields: string; + readonly runtimeFields: { + readonly mapping: string; + }; readonly scriptedFields: { readonly scriptFields: string; readonly scriptAggs: string; diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index 5c034e68a3736..5a5ae253bac7f 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -559,7 +559,9 @@ export interface DocLinksStart { readonly sum: string; readonly top_hits: string; }; - readonly runtimeFields: string; + readonly runtimeFields: { + readonly mapping: string; + }; readonly scriptedFields: { readonly scriptFields: string; readonly scriptAggs: string; diff --git a/src/plugins/data/README.mdx b/src/plugins/data/README.mdx index 145aaa64fa3ad..60e74a3fa126c 100644 --- a/src/plugins/data/README.mdx +++ b/src/plugins/data/README.mdx @@ -21,7 +21,6 @@ It is wired into the `TopNavMenu` component, but can be used independently. ### Fetch Query Suggestions The `getQuerySuggestions` function helps to construct a query. -KQL suggestion functions are registered in X-Pack, so this API does not return results in OSS. ```.ts diff --git a/src/plugins/data/public/autocomplete/autocomplete_service.ts b/src/plugins/data/public/autocomplete/autocomplete_service.ts index 6b288c4507f06..eb9d859664c4d 100644 --- a/src/plugins/data/public/autocomplete/autocomplete_service.ts +++ b/src/plugins/data/public/autocomplete/autocomplete_service.ts @@ -18,6 +18,11 @@ import { import { ConfigSchema } from '../../config'; import { UsageCollectionSetup } from '../../../usage_collection/public'; import { createUsageCollector } from './collectors'; +import { + KUERY_LANGUAGE_NAME, + setupKqlQuerySuggestionProvider, +} from './providers/kql_query_suggestion'; +import { DataPublicPluginStart, DataStartDependencies } from '../types'; export class AutocompleteService { autocompleteConfig: ConfigSchema['autocomplete']; @@ -31,12 +36,6 @@ export class AutocompleteService { private readonly querySuggestionProviders: Map = new Map(); private getValueSuggestions?: ValueSuggestionsGetFn; - private addQuerySuggestionProvider = (language: string, provider: QuerySuggestionGetFn): void => { - if (language && provider && this.autocompleteConfig.querySuggestions.enabled) { - this.querySuggestionProviders.set(language, provider); - } - }; - private getQuerySuggestions: QuerySuggestionGetFn = (args) => { const { language } = args; const provider = this.querySuggestionProviders.get(language); @@ -50,7 +49,7 @@ export class AutocompleteService { /** @public **/ public setup( - core: CoreSetup, + core: CoreSetup, { timefilter, usageCollection, @@ -62,11 +61,15 @@ export class AutocompleteService { ? setupValueSuggestionProvider(core, { timefilter, usageCollector }) : getEmptyValueSuggestions; - return { - addQuerySuggestionProvider: this.addQuerySuggestionProvider, + if (this.autocompleteConfig.querySuggestions.enabled) { + this.querySuggestionProviders.set(KUERY_LANGUAGE_NAME, setupKqlQuerySuggestionProvider(core)); + } - /** @obsolete **/ - /** please use "getProvider" only from the start contract **/ + return { + /** + * @deprecated + * please use "getQuerySuggestions" from the start contract + */ getQuerySuggestions: this.getQuerySuggestions, }; } diff --git a/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/README.md b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/README.md new file mode 100644 index 0000000000000..2ab87a7a490c1 --- /dev/null +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/README.md @@ -0,0 +1 @@ +This is implementation of KQL query suggestions diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/__fixtures__/index_pattern_response.json b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/__fixtures__/index_pattern_response.json similarity index 100% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/__fixtures__/index_pattern_response.json rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/__fixtures__/index_pattern_response.json diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/conjunction.test.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/conjunction.test.ts similarity index 92% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/conjunction.test.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/conjunction.test.ts index 5e562ae63e91b..c1c44f1f55548 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/conjunction.test.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/conjunction.test.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { setupGetConjunctionSuggestions } from './conjunction'; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/conjunction.tsx b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/conjunction.tsx similarity index 67% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/conjunction.tsx rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/conjunction.tsx index 7efc2ea193abe..345f9f8051e5d 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/conjunction.tsx +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/conjunction.tsx @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import React from 'react'; @@ -16,17 +17,17 @@ import { const bothArgumentsText = ( ); const oneOrMoreArgumentsText = ( ); @@ -34,20 +35,20 @@ const conjunctions: Record = { and: (

{bothArgumentsText}, }} description="Full text: ' Requires both arguments to be true'. See - 'xpack.data.kueryAutocomplete.andOperatorDescription.bothArgumentsText' for 'both arguments' part." + 'data.kueryAutocomplete.andOperatorDescription.bothArgumentsText' for 'both arguments' part." />

), or: (

= { ), }} description="Full text: 'Requires one or more arguments to be true'. See - 'xpack.data.kueryAutocomplete.orOperatorDescription.oneOrMoreArgumentsText' for 'one or more arguments' part." + 'data.kueryAutocomplete.orOperatorDescription.oneOrMoreArgumentsText' for 'one or more arguments' part." />

), diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/field.test.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/field.test.ts similarity index 97% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/field.test.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/field.test.ts index afc55d13af9d9..f1eced06a33ea 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/field.test.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/field.test.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import indexPatternResponse from './__fixtures__/index_pattern_response.json'; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/field.tsx b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/field.tsx similarity index 92% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/field.tsx rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/field.tsx index ac6f7de888320..5cafca168dfa2 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/field.tsx +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/field.tsx @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import React from 'react'; @@ -22,7 +23,7 @@ const getDescription = (field: IFieldType) => { return (

{field.name} }} /> diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/index.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/index.ts similarity index 85% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/index.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/index.ts index 8b36480a35b17..c5c1626ae74f6 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/index.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/index.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { CoreSetup } from 'kibana/public'; @@ -17,6 +18,7 @@ import { QuerySuggestion, QuerySuggestionGetFnArgs, QuerySuggestionGetFn, + DataPublicPluginStart, } from '../../../../../../../src/plugins/data/public'; const cursorSymbol = '@kuery-cursor@'; @@ -26,7 +28,9 @@ const dedup = (suggestions: QuerySuggestion[]): QuerySuggestion[] => export const KUERY_LANGUAGE_NAME = 'kuery'; -export const setupKqlQuerySuggestionProvider = (core: CoreSetup): QuerySuggestionGetFn => { +export const setupKqlQuerySuggestionProvider = ( + core: CoreSetup +): QuerySuggestionGetFn => { const providers = { field: setupGetFieldSuggestions(core), value: setupGetValueSuggestions(core), diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.test.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.test.ts similarity index 92% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.test.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.test.ts index 0173617a99b1b..933449e779ef7 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.test.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.test.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { escapeQuotes, escapeKuery } from './escape_kuery'; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.ts similarity index 85% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.ts index 901e61bde455d..54f03803a893e 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/lib/escape_kuery.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { flow } from 'lodash'; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/operator.test.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/operator.test.ts similarity index 95% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/operator.test.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/operator.test.ts index bd021b0d0dac5..4debbc0843d51 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/operator.test.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/operator.test.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import indexPatternResponse from './__fixtures__/index_pattern_response.json'; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/operator.tsx b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/operator.tsx similarity index 65% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/operator.tsx rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/operator.tsx index cfe935e4b1990..618e33ddf345a 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/operator.tsx +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/operator.tsx @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import React from 'react'; @@ -15,44 +16,44 @@ import { QuerySuggestionTypes } from '../../../../../../../src/plugins/data/publ const equalsText = ( ); const lessThanOrEqualToText = ( ); const greaterThanOrEqualToText = ( ); const lessThanText = ( ); const greaterThanText = ( ); const existsText = ( ); @@ -60,11 +61,11 @@ const operators = { ':': { description: ( {equalsText} }} description="Full text: 'equals some value'. See - 'xpack.data.kueryAutocomplete.equalOperatorDescription.equalsText' for 'equals' part." + 'data.kueryAutocomplete.equalOperatorDescription.equalsText' for 'equals' part." /> ), fieldTypes: [ @@ -83,7 +84,7 @@ const operators = { '<=': { description: ( ), fieldTypes: ['number', 'number_range', 'date', 'date_range', 'ip', 'ip_range'], @@ -99,7 +100,7 @@ const operators = { '>=': { description: ( ), fieldTypes: ['number', 'number_range', 'date', 'date_range', 'ip', 'ip_range'], @@ -115,11 +116,11 @@ const operators = { '<': { description: ( {lessThanText} }} description="Full text: 'is less than some value'. See - 'xpack.data.kueryAutocomplete.lessThanOperatorDescription.lessThanText' for 'less than' part." + 'data.kueryAutocomplete.lessThanOperatorDescription.lessThanText' for 'less than' part." /> ), fieldTypes: ['number', 'number_range', 'date', 'date_range', 'ip', 'ip_range'], @@ -127,13 +128,13 @@ const operators = { '>': { description: ( {greaterThanText}, }} description="Full text: 'is greater than some value'. See - 'xpack.data.kueryAutocomplete.greaterThanOperatorDescription.greaterThanText' for 'greater than' part." + 'data.kueryAutocomplete.greaterThanOperatorDescription.greaterThanText' for 'greater than' part." /> ), fieldTypes: ['number', 'number_range', 'date', 'date_range', 'ip', 'ip_range'], @@ -141,11 +142,11 @@ const operators = { ': *': { description: ( {existsText} }} description="Full text: 'exists in any form'. See - 'xpack.data.kueryAutocomplete.existOperatorDescription.existsText' for 'exists' part." + 'data.kueryAutocomplete.existOperatorDescription.existsText' for 'exists' part." /> ), fieldTypes: undefined, diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.test.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.test.ts similarity index 92% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.test.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.test.ts index aa236a45fa93c..f72fb75684105 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.test.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.test.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { sortPrefixFirst } from './sort_prefix_first'; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.ts similarity index 76% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.ts index c344197641ef4..25bc32d47f338 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/sort_prefix_first.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { partition } from 'lodash'; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/types.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/types.ts similarity index 65% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/types.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/types.ts index b5abdbee51832..48e87a73f3671 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/types.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/types.ts @@ -1,17 +1,19 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { CoreSetup } from 'kibana/public'; import { + DataPublicPluginStart, KueryNode, QuerySuggestionBasic, QuerySuggestionGetFnArgs, } from '../../../../../../../src/plugins/data/public'; export type KqlQuerySuggestionProvider = ( - core: CoreSetup + core: CoreSetup ) => (querySuggestionsGetFnArgs: QuerySuggestionGetFnArgs, kueryNode: KueryNode) => Promise; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/value.test.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/value.test.ts similarity index 93% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/value.test.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/value.test.ts index 5744dad43dcdd..c434d9a8ef365 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/value.test.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/value.test.ts @@ -1,15 +1,15 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { setupGetValueSuggestions } from './value'; import indexPatternResponse from './__fixtures__/index_pattern_response.json'; import { coreMock } from '../../../../../../../src/core/public/mocks'; import { QuerySuggestionGetFnArgs, KueryNode } from '../../../../../../../src/plugins/data/public'; -import { setAutocompleteService } from '../../../services'; const mockKueryNode = (kueryNode: Partial) => (kueryNode as unknown) as KueryNode; @@ -19,11 +19,6 @@ describe('Kuery value suggestions', () => { let autocompleteServiceMock: any; beforeEach(() => { - getSuggestions = setupGetValueSuggestions(coreMock.createSetup()); - querySuggestionsArgs = ({ - indexPatterns: [indexPatternResponse], - } as unknown) as QuerySuggestionGetFnArgs; - autocompleteServiceMock = { getValueSuggestions: jest.fn(({ field }) => { let res: any[]; @@ -40,7 +35,16 @@ describe('Kuery value suggestions', () => { return Promise.resolve(res); }), }; - setAutocompleteService(autocompleteServiceMock); + + const coreSetup = coreMock.createSetup({ + pluginStartContract: { + autocomplete: autocompleteServiceMock, + }, + }); + getSuggestions = setupGetValueSuggestions(coreSetup); + querySuggestionsArgs = ({ + indexPatterns: [indexPatternResponse], + } as unknown) as QuerySuggestionGetFnArgs; jest.clearAllMocks(); }); diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/value.ts b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/value.ts similarity index 79% rename from x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/value.ts rename to src/plugins/data/public/autocomplete/providers/kql_query_suggestion/value.ts index 92fd4d7b71bdc..f8fc9d165fc6b 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/value.ts +++ b/src/plugins/data/public/autocomplete/providers/kql_query_suggestion/value.ts @@ -1,15 +1,17 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { flatten } from 'lodash'; +import { CoreSetup } from 'kibana/public'; import { escapeQuotes } from './lib/escape_kuery'; import { KqlQuerySuggestionProvider } from './types'; -import { getAutocompleteService } from '../../../services'; import { + DataPublicPluginStart, IFieldType, IIndexPattern, QuerySuggestion, @@ -26,7 +28,12 @@ const wrapAsSuggestions = (start: number, end: number, query: string, values: st end, })); -export const setupGetValueSuggestions: KqlQuerySuggestionProvider = () => { +export const setupGetValueSuggestions: KqlQuerySuggestionProvider = ( + core: CoreSetup +) => { + const autoCompleteServicePromise = core + .getStartServices() + .then(([_, __, dataStart]) => dataStart.autocomplete); return async ( { indexPatterns, boolFilter, useTimeRange, signal }, { start, end, prefix, suffix, fieldName, nestedPath } @@ -41,7 +48,7 @@ export const setupGetValueSuggestions: KqlQuerySuggestionProvider = () => { }); const query = `${prefix}${suffix}`.trim(); - const { getValueSuggestions } = getAutocompleteService(); + const { getValueSuggestions } = await autoCompleteServicePromise; const data = await Promise.all( indexPatternFieldEntries.map(([indexPattern, field]) => diff --git a/src/plugins/data/public/mocks.ts b/src/plugins/data/public/mocks.ts index a3676c5116927..573820890de71 100644 --- a/src/plugins/data/public/mocks.ts +++ b/src/plugins/data/public/mocks.ts @@ -17,7 +17,6 @@ export type Setup = jest.Mocked>; export type Start = jest.Mocked>; const automcompleteSetupMock: jest.Mocked = { - addQuerySuggestionProvider: jest.fn(), getQuerySuggestions: jest.fn(), }; diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md index 4eae5629af3a6..95d7a35a45320 100644 --- a/src/plugins/data/public/public.api.md +++ b/src/plugins/data/public/public.api.md @@ -23,7 +23,7 @@ import * as CSS from 'csstype'; import { Datatable as Datatable_2 } from 'src/plugins/expressions'; import { Datatable as Datatable_3 } from 'src/plugins/expressions/common'; import { DatatableColumn as DatatableColumn_2 } from 'src/plugins/expressions'; -import { DatatableColumnType } from 'src/plugins/expressions/common'; +import { DatatableColumnType as DatatableColumnType_2 } from 'src/plugins/expressions/common'; import { DetailedPeerCertificate } from 'tls'; import { Ensure } from '@kbn/utility-types'; import { EnvironmentMode } from '@kbn/config'; @@ -85,8 +85,8 @@ import { RequestAdapter } from 'src/plugins/inspector/common'; import { RequestStatistics as RequestStatistics_2 } from 'src/plugins/inspector/common'; import { Required } from '@kbn/utility-types'; import * as Rx from 'rxjs'; -import { SavedObject } from 'kibana/server'; -import { SavedObject as SavedObject_2 } from 'src/core/server'; +import { SavedObject } from 'src/core/server'; +import { SavedObject as SavedObject_2 } from 'kibana/server'; import { SavedObjectReference } from 'src/core/types'; import { SavedObjectsClientContract } from 'src/core/public'; import { SavedObjectsFindOptions } from 'kibana/public'; @@ -188,7 +188,7 @@ export class AggConfig { // @deprecated (undocumented) toJSON(): AggConfigSerialized; // Warning: (ae-forgotten-export) The symbol "SerializableState" needs to be exported by the entry point index.d.ts - toSerializedFieldFormat(): {} | Ensure, SerializableState>; + toSerializedFieldFormat(): {} | Ensure, SerializableState_2>; // (undocumented) get type(): IAggType; set type(type: IAggType); @@ -272,9 +272,9 @@ export type AggConfigSerialized = Ensure<{ type: string; enabled?: boolean; id?: string; - params?: {} | SerializableState; + params?: {} | SerializableState_2; schema?: string; -}, SerializableState>; +}, SerializableState_2>; // Warning: (ae-missing-release-tag) "AggFunctionsMapping" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1604,7 +1604,7 @@ export class IndexPatternsService { // Warning: (ae-forgotten-export) The symbol "IndexPatternSavedObjectAttrs" needs to be exported by the entry point index.d.ts // // (undocumented) - getCache: () => Promise[] | null | undefined>; + getCache: () => Promise[] | null | undefined>; getDefault: () => Promise; getFieldsForIndexPattern: (indexPattern: IndexPattern | IndexPatternSpec, options?: GetFieldsOptions | undefined) => Promise; // Warning: (ae-forgotten-export) The symbol "GetFieldsOptions" needs to be exported by the entry point index.d.ts @@ -1616,7 +1616,7 @@ export class IndexPatternsService { }>>; getTitles: (refresh?: boolean) => Promise; refreshFields: (indexPattern: IndexPattern) => Promise; - savedObjectToSpec: (savedObject: SavedObject_2) => IndexPatternSpec; + savedObjectToSpec: (savedObject: SavedObject) => IndexPatternSpec; setDefault: (id: string, force?: boolean) => Promise; updateSavedObject(indexPattern: IndexPattern, saveAttempts?: number, ignoreErrors?: boolean): Promise; } diff --git a/src/plugins/data/tsconfig.json b/src/plugins/data/tsconfig.json index 21560b1328840..9c95878af631e 100644 --- a/src/plugins/data/tsconfig.json +++ b/src/plugins/data/tsconfig.json @@ -7,7 +7,14 @@ "declaration": true, "declarationMap": true }, - "include": ["common/**/*", "public/**/*", "server/**/*", "config.ts", "common/**/*.json"], + "include": [ + "common/**/*", + "public/**/*", + "server/**/*", + "config.ts", + "common/**/*.json", + "public/**/*.json" + ], "references": [ { "path": "../../core/tsconfig.json" }, { "path": "../bfetch/tsconfig.json" }, @@ -16,6 +23,6 @@ { "path": "../inspector/tsconfig.json" }, { "path": "../usage_collection/tsconfig.json" }, { "path": "../kibana_utils/tsconfig.json" }, - { "path": "../kibana_react/tsconfig.json" }, + { "path": "../kibana_react/tsconfig.json" } ] } diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/shared_imports.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/shared_imports.ts index 18eccb4e87090..c57333d788ef5 100644 --- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/shared_imports.ts +++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/shared_imports.ts @@ -6,6 +6,8 @@ * Side Public License, v 1. */ +// eslint-disable-next-line import/no-extraneous-dependencies export { registerTestBed, TestBed } from '@kbn/test/jest'; +// eslint-disable-next-line import/no-extraneous-dependencies export { getRandomString } from '@kbn/test/jest'; diff --git a/src/plugins/index_pattern_field_editor/public/components/delete_field_modal.tsx b/src/plugins/index_pattern_field_editor/public/components/delete_field_modal.tsx index fca3eaf10b1ef..73a4837d6e0cc 100644 --- a/src/plugins/index_pattern_field_editor/public/components/delete_field_modal.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/delete_field_modal.tsx @@ -6,12 +6,13 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiConfirmModal } from '@elastic/eui'; +import { EuiCallOut, EuiConfirmModal, EuiFieldText, EuiFormRow, EuiSpacer } from '@elastic/eui'; const geti18nTexts = (fieldsToDelete?: string[]) => { let modalTitle = ''; + let confirmButtonText = ''; if (fieldsToDelete) { const isSingle = fieldsToDelete.length === 1; @@ -19,27 +20,35 @@ const geti18nTexts = (fieldsToDelete?: string[]) => { ? i18n.translate( 'indexPatternFieldEditor.deleteRuntimeField.confirmModal.deleteSingleTitle', { - defaultMessage: `Remove field '{name}'?`, + defaultMessage: `Remove field '{name}'`, values: { name: fieldsToDelete[0] }, } ) : i18n.translate( 'indexPatternFieldEditor.deleteRuntimeField.confirmModal.deleteMultipleTitle', { - defaultMessage: `Remove {count} fields?`, + defaultMessage: `Remove {count} fields`, values: { count: fieldsToDelete.length }, } ); + confirmButtonText = isSingle + ? i18n.translate( + 'indexPatternFieldEditor.deleteRuntimeField.confirmationModal.removeButtonLabel', + { + defaultMessage: `Remove field`, + } + ) + : i18n.translate( + 'indexPatternFieldEditor.deleteRuntimeField.confirmationModal.removeMultipleButtonLabel', + { + defaultMessage: `Remove fields`, + } + ); } return { modalTitle, - confirmButtonText: i18n.translate( - 'indexPatternFieldEditor.deleteRuntimeField.confirmationModal.removeButtonLabel', - { - defaultMessage: 'Remove', - } - ), + confirmButtonText, cancelButtonText: i18n.translate( 'indexPatternFieldEditor.deleteRuntimeField.confirmationModal.cancelButtonLabel', { @@ -52,6 +61,19 @@ const geti18nTexts = (fieldsToDelete?: string[]) => { defaultMessage: 'You are about to remove these runtime fields:', } ), + typeConfirm: i18n.translate( + 'indexPatternFieldEditor.deleteRuntimeField.confirmModal.typeConfirm', + { + defaultMessage: "Type 'REMOVE' to confirm", + } + ), + warningRemovingFields: i18n.translate( + 'indexPatternFieldEditor.deleteRuntimeField.confirmModal.warningRemovingFields', + { + defaultMessage: + 'Warning: Removing fields may break searches or visualizations that rely on this field.', + } + ), }; }; @@ -65,6 +87,7 @@ export function DeleteFieldModal({ fieldsToDelete, closeModal, confirmDelete }: const i18nTexts = geti18nTexts(fieldsToDelete); const { modalTitle, confirmButtonText, cancelButtonText, warningMultipleFields } = i18nTexts; const isMultiple = Boolean(fieldsToDelete.length > 1); + const [confirmContent, setConfirmContent] = useState(); return ( - {isMultiple && ( - <> -

{warningMultipleFields}

-
    - {fieldsToDelete.map((fieldName) => ( -
  • {fieldName}
    • - ))} -
- - )} + + {isMultiple && ( + <> +

{warningMultipleFields}

+
    + {fieldsToDelete.map((fieldName) => ( +
  • {fieldName}
    • + ))} +
+ + )} + + + + setConfirmContent(e.target.value)} + data-test-subj="deleteModalConfirmText" + /> + ); } diff --git a/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.test.ts b/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.test.ts index e943dbdda998d..46414c264c6b7 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.test.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.test.ts @@ -68,7 +68,7 @@ describe('', () => { const { find } = setup({ ...defaultProps, field }); - expect(find('flyoutTitle').text()).toBe(`Edit ${field.name} field`); + expect(find('flyoutTitle').text()).toBe(`Edit field 'foo'`); expect(find('nameField.input').props().value).toBe(field.name); expect(find('typeField').props().value).toBe(field.type); expect(find('scriptField').props().value).toBe(field.script.source); diff --git a/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.tsx b/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.tsx index 1511836da85e7..486df1a7707af 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.tsx @@ -8,6 +8,7 @@ import React, { useState, useCallback, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFlyoutHeader, EuiFlyoutBody, @@ -19,6 +20,10 @@ import { EuiButton, EuiCallOut, EuiSpacer, + EuiText, + EuiConfirmModal, + EuiFieldText, + EuiFormRow, } from '@elastic/eui'; import { DocLinksStart, CoreStart } from 'src/core/public'; @@ -30,16 +35,6 @@ import type { Props as FieldEditorProps, FieldEditorFormState } from './field_ed const geti18nTexts = (field?: Field) => { return { - flyoutTitle: field - ? i18n.translate('indexPatternFieldEditor.editor.flyoutEditFieldTitle', { - defaultMessage: 'Edit {fieldName} field', - values: { - fieldName: field.name, - }, - }) - : i18n.translate('indexPatternFieldEditor.editor.flyoutDefaultTitle', { - defaultMessage: 'Create field', - }), closeButtonLabel: i18n.translate('indexPatternFieldEditor.editor.flyoutCloseButtonLabel', { defaultMessage: 'Close', }), @@ -49,6 +44,31 @@ const geti18nTexts = (field?: Field) => { formErrorsCalloutTitle: i18n.translate('indexPatternFieldEditor.editor.validationErrorTitle', { defaultMessage: 'Fix errors in form before continuing.', }), + cancelButtonText: i18n.translate( + 'indexPatternFieldEditor.saveRuntimeField.confirmationModal.cancelButtonLabel', + { + defaultMessage: 'Cancel', + } + ), + confirmButtonText: i18n.translate( + 'indexPatternFieldEditor.deleteRuntimeField.confirmationModal.saveButtonLabel', + { + defaultMessage: 'Save', + } + ), + warningChangingFields: i18n.translate( + 'indexPatternFieldEditor.deleteRuntimeField.confirmModal.warningChangingFields', + { + defaultMessage: + 'Warning: Changing name or type may break searches or visualizations that rely on this field.', + } + ), + typeConfirm: i18n.translate( + 'indexPatternFieldEditor.saveRuntimeField.confirmModal.typeConfirm', + { + defaultMessage: "Type 'CHANGE' to continue:", + } + ), }; }; @@ -97,6 +117,7 @@ const FieldEditorFlyoutContentComponent = ({ runtimeFieldValidator, isSavingField, }: Props) => { + const isEditingExistingField = !!field; const i18nTexts = geti18nTexts(field); const [formState, setFormState] = useState({ @@ -112,6 +133,8 @@ const FieldEditorFlyoutContentComponent = ({ ); const [isValidating, setIsValidating] = useState(false); + const [isModalVisible, setIsModalVisible] = useState(false); + const [confirmContent, setConfirmContent] = useState(); const { submit, isValid: isFormValid, isSubmitted } = formState; const { fields } = indexPattern; @@ -129,6 +152,8 @@ const FieldEditorFlyoutContentComponent = ({ const onClickSave = useCallback(async () => { const { isValid, data } = await submit(); + const nameChange = field?.name !== data.name; + const typeChange = field?.type !== data.type; if (isValid) { if (data.script) { @@ -147,9 +172,13 @@ const FieldEditorFlyoutContentComponent = ({ } } - onSave(data); + if (isEditingExistingField && (nameChange || typeChange)) { + setIsModalVisible(true); + } else { + onSave(data); + } } - }, [onSave, submit, runtimeFieldValidator]); + }, [onSave, submit, runtimeFieldValidator, field, isEditingExistingField]); const namesNotAllowed = useMemo(() => fields.map((fld) => fld.name), [fields]); @@ -180,12 +209,70 @@ const FieldEditorFlyoutContentComponent = ({ [fieldTypeToProcess, namesNotAllowed, existingConcreteFields] ); + const modal = isModalVisible ? ( + { + setIsModalVisible(false); + setConfirmContent(''); + }} + onConfirm={async () => { + const { data } = await submit(); + onSave(data); + }} + > + + + + setConfirmContent(e.target.value)} + data-test-subj="saveModalConfirmText" + /> + + + ) : null; return ( <> - -

{i18nTexts.flyoutTitle}

+ +

+ {field ? ( + + ) : ( + + )} +

+ +

+ {indexPattern.title}, + }} + /> +

+ @@ -246,6 +333,7 @@ const FieldEditorFlyoutContentComponent = ({ )} + {modal} ); }; diff --git a/src/setup_node_env/index.js b/src/setup_node_env/index.js index 08664344db393..9ce60766997cc 100644 --- a/src/setup_node_env/index.js +++ b/src/setup_node_env/index.js @@ -7,4 +7,5 @@ */ require('./no_transpilation'); +// eslint-disable-next-line import/no-extraneous-dependencies require('@kbn/optimizer').registerNodeAutoTranspilation(); diff --git a/test/functional/apps/management/_runtime_fields.js b/test/functional/apps/management/_runtime_fields.js index 4b3533f20c8dc..e3ff1819aed13 100644 --- a/test/functional/apps/management/_runtime_fields.js +++ b/test/functional/apps/management/_runtime_fields.js @@ -15,6 +15,7 @@ export default function ({ getService, getPageObjects }) { const browser = getService('browser'); const retry = getService('retry'); const PageObjects = getPageObjects(['settings']); + const testSubjects = getService('testSubjects'); describe('runtime fields', function () { this.tags(['skipFirefox']); @@ -47,6 +48,20 @@ export default function ({ getService, getPageObjects }) { expect(parseInt(await PageObjects.settings.getFieldsTabCount())).to.be(startingCount + 1); }); }); + + it('should modify runtime field', async function () { + await PageObjects.settings.filterField(fieldName); + await testSubjects.click('editFieldFormat'); + await PageObjects.settings.setFieldType('Long'); + await PageObjects.settings.changeFieldScript('emit(6);'); + await PageObjects.settings.clickSaveField(); + await PageObjects.settings.confirmSave(); + }); + + it('should delete runtime field', async function () { + await testSubjects.click('deleteField'); + await PageObjects.settings.confirmDelete(); + }); }); }); } diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts index 4151a8c1a1893..14bd002ec9487 100644 --- a/test/functional/page_objects/settings_page.ts +++ b/test/functional/page_objects/settings_page.ts @@ -502,6 +502,16 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider await this.closeIndexPatternFieldEditor(); } + public async confirmSave() { + await testSubjects.setValue('saveModalConfirmText', 'change'); + await testSubjects.click('confirmModalConfirmButton'); + } + + public async confirmDelete() { + await testSubjects.setValue('deleteModalConfirmText', 'remove'); + await testSubjects.click('confirmModalConfirmButton'); + } + async closeIndexPatternFieldEditor() { await retry.waitFor('field editor flyout to close', async () => { return !(await testSubjects.exists('euiFlyoutCloseButton')); @@ -543,6 +553,17 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider browser.pressKeys(script); } + async changeFieldScript(script: string) { + log.debug('set script = ' + script); + const formatRow = await testSubjects.find('valueRow'); + const getMonacoTextArea = async () => (await formatRow.findAllByCssSelector('textarea'))[0]; + retry.waitFor('monaco editor is ready', async () => !!(await getMonacoTextArea())); + const monacoTextArea = await getMonacoTextArea(); + await monacoTextArea.focus(); + browser.pressKeys(browser.keys.DELETE.repeat(30)); + browser.pressKeys(script); + } + async clickAddScriptedField() { log.debug('click Add Scripted Field'); await testSubjects.click('addScriptedFieldLink'); diff --git a/test/functional/services/field_editor.ts b/test/functional/services/field_editor.ts index 5cd1f2c4f6202..7d6dad4f7858e 100644 --- a/test/functional/services/field_editor.ts +++ b/test/functional/services/field_editor.ts @@ -10,7 +10,6 @@ import { FtrProviderContext } from '../ftr_provider_context'; export function FieldEditorProvider({ getService }: FtrProviderContext) { const browser = getService('browser'); - const retry = getService('retry'); const testSubjects = getService('testSubjects'); class FieldEditor { @@ -33,10 +32,17 @@ export function FieldEditorProvider({ getService }: FtrProviderContext) { await browser.pressKeys(script); } public async save() { - await retry.try(async () => { - await testSubjects.click('fieldSaveButton'); - await testSubjects.missingOrFail('fieldSaveButton', { timeout: 2000 }); - }); + await testSubjects.click('fieldSaveButton'); + } + + public async confirmSave() { + await testSubjects.setValue('saveModalConfirmText', 'change'); + await testSubjects.click('confirmModalConfirmButton'); + } + + public async confirmDelete() { + await testSubjects.setValue('deleteModalConfirmText', 'remove'); + await testSubjects.click('confirmModalConfirmButton'); } } diff --git a/x-pack/plugins/actions/server/usage/actions_usage_collector.ts b/x-pack/plugins/actions/server/usage/actions_usage_collector.ts index f8a91e3a0a67a..c338bbc998c49 100644 --- a/x-pack/plugins/actions/server/usage/actions_usage_collector.ts +++ b/x-pack/plugins/actions/server/usage/actions_usage_collector.ts @@ -23,6 +23,7 @@ const byTypeSchema: MakeSchemaFrom['count_by_type'] = { __servicenow: { type: 'long' }, __jira: { type: 'long' }, __resilient: { type: 'long' }, + __teams: { type: 'long' }, }; export function createActionsUsageCollector( diff --git a/x-pack/plugins/alerting/server/usage/alerts_usage_collector.ts b/x-pack/plugins/alerting/server/usage/alerts_usage_collector.ts index 884120d3d03df..59aeb4854d9f0 100644 --- a/x-pack/plugins/alerting/server/usage/alerts_usage_collector.ts +++ b/x-pack/plugins/alerting/server/usage/alerts_usage_collector.ts @@ -16,6 +16,7 @@ const byTypeSchema: MakeSchemaFrom['count_by_type'] = { // Known alerts (searching the use of the alerts API `registerType`: // Built-in '__index-threshold': { type: 'long' }, + '__es-query': { type: 'long' }, // APM apm__error_rate: { type: 'long' }, // eslint-disable-line @typescript-eslint/naming-convention apm__transaction_error_rate: { type: 'long' }, // eslint-disable-line @typescript-eslint/naming-convention @@ -41,6 +42,10 @@ const byTypeSchema: MakeSchemaFrom['count_by_type'] = { xpack__uptime__alerts__monitorStatus: { type: 'long' }, // eslint-disable-line @typescript-eslint/naming-convention xpack__uptime__alerts__tls: { type: 'long' }, // eslint-disable-line @typescript-eslint/naming-convention xpack__uptime__alerts__durationAnomaly: { type: 'long' }, // eslint-disable-line @typescript-eslint/naming-convention + // Maps + '__geo-containment': { type: 'long' }, + // ML + xpack_ml_anomaly_detection_alert: { type: 'long' }, }; export function createAlertsUsageCollector( diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx index f6ffec46f9f51..b30faac7a65af 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx @@ -91,7 +91,7 @@ describe('ServiceOverview', () => { isAggregationAccurate: true, }, 'GET /api/apm/services/{serviceName}/dependencies': [], - 'GET /api/apm/services/{serviceName}/service_overview_instances': [], + 'GET /api/apm/services/{serviceName}/service_overview_instances/primary_statistics': [], }; /* eslint-enable @typescript-eslint/naming-convention */ diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx index 435def8bb9a91..c10ec1052f2a2 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx @@ -6,11 +6,17 @@ */ import { EuiFlexItem, EuiPanel } from '@elastic/eui'; -import React from 'react'; +import { orderBy } from 'lodash'; +import React, { useState } from 'react'; +import uuid from 'uuid'; import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { useFetcher } from '../../../hooks/use_fetcher'; -import { ServiceOverviewInstancesTable } from './service_overview_instances_table'; +import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; +import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison'; +import { + ServiceOverviewInstancesTable, + TableOptions, +} from './service_overview_instances_table'; // We're hiding this chart until these issues are resolved in the 7.13 timeframe: // @@ -24,17 +30,70 @@ interface ServiceOverviewInstancesChartAndTableProps { serviceName: string; } +const INITIAL_STATE = { + items: [] as Array<{ + serviceNodeName: string; + errorRate: number; + throughput: number; + latency: number; + cpuUsage: number; + memoryUsage: number; + }>, + requestId: undefined, + totalItems: 0, +}; + +const INITIAL_STATE_COMPARISON_STATISTICS = { + currentPeriod: {}, + previousPeriod: {}, +}; + +export type SortField = + | 'serviceNodeName' + | 'latency' + | 'throughput' + | 'errorRate' + | 'cpuUsage' + | 'memoryUsage'; + +export type SortDirection = 'asc' | 'desc'; +export const PAGE_SIZE = 5; +const DEFAULT_SORT = { + direction: 'desc' as const, + field: 'throughput' as const, +}; + export function ServiceOverviewInstancesChartAndTable({ chartHeight, serviceName, }: ServiceOverviewInstancesChartAndTableProps) { const { transactionType } = useApmServiceContext(); + const [tableOptions, setTableOptions] = useState({ + pageIndex: 0, + sort: DEFAULT_SORT, + }); + + const { pageIndex, sort } = tableOptions; + const { direction, field } = sort; const { - urlParams: { environment, kuery, latencyAggregationType, start, end }, + urlParams: { + environment, + kuery, + latencyAggregationType, + start, + end, + comparisonType, + }, } = useUrlParams(); - const { data = [], status } = useFetcher( + const { comparisonStart, comparisonEnd } = getTimeRangeComparison({ + start, + end, + comparisonType, + }); + + const { data = INITIAL_STATE, status } = useFetcher( (callApmApi) => { if (!start || !end || !transactionType || !latencyAggregationType) { return; @@ -42,7 +101,7 @@ export function ServiceOverviewInstancesChartAndTable({ return callApmApi({ endpoint: - 'GET /api/apm/services/{serviceName}/service_overview_instances', + 'GET /api/apm/services/{serviceName}/service_overview_instances/primary_statistics', params: { path: { serviceName, @@ -54,11 +113,32 @@ export function ServiceOverviewInstancesChartAndTable({ start, end, transactionType, - numBuckets: 20, }, }, + }).then((response) => { + const tableItems = orderBy( + // need top-level sortable fields for the managed table + response.map((item) => ({ + ...item, + latency: item.latency ?? 0, + throughput: item.throughput ?? 0, + errorRate: item.errorRate ?? 0, + cpuUsage: item.cpuUsage ?? 0, + memoryUsage: item.memoryUsage ?? 0, + })), + field, + direction + ).slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE); + + return { + requestId: uuid(), + items: tableItems, + totalItems: response.length, + }; }); }, + // comparisonType is listed as dependency even thought it is not used. This is needed to trigger the comparison api when it is changed. + // eslint-disable-next-line react-hooks/exhaustive-deps [ environment, kuery, @@ -67,24 +147,93 @@ export function ServiceOverviewInstancesChartAndTable({ end, serviceName, transactionType, + pageIndex, + field, + direction, + comparisonType, ] ); + const { items, requestId, totalItems } = data; + + const { + data: comparisonStatistics = INITIAL_STATE_COMPARISON_STATISTICS, + status: comparisonStatisticsStatus, + } = useFetcher( + (callApmApi) => { + if ( + !start || + !end || + !transactionType || + !latencyAggregationType || + !totalItems + ) { + return; + } + + return callApmApi({ + endpoint: + 'GET /api/apm/services/{serviceName}/service_overview_instances/comparison_statistics', + params: { + path: { + serviceName, + }, + query: { + environment, + kuery, + latencyAggregationType, + start, + end, + numBuckets: 20, + transactionType, + serviceNodeIds: JSON.stringify( + items.map((item) => item.serviceNodeName) + ), + comparisonStart, + comparisonEnd, + }, + }, + }); + }, + // only fetches comparison statistics when requestId is invalidated by primary statistics api call + // eslint-disable-next-line react-hooks/exhaustive-deps + [requestId], + { preservePreviousData: false } + ); + return ( <> {/* */} { + setTableOptions({ + pageIndex: newTableOptions.page?.index ?? 0, + sort: newTableOptions.sort + ? { + field: newTableOptions.sort.field as SortField, + direction: newTableOptions.sort.direction, + } + : DEFAULT_SORT, + }); + }} /> diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx new file mode 100644 index 0000000000000..f2a169eb31f98 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx @@ -0,0 +1,225 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiBasicTableColumn } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { ValuesType } from 'utility-types'; +import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types'; +import { isJavaAgentName } from '../../../../../common/agent_name'; +import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../../common/i18n'; +import { SERVICE_NODE_NAME_MISSING } from '../../../../../common/service_nodes'; +import { + asMillisecondDuration, + asPercent, + asTransactionRate, +} from '../../../../../common/utils/formatters'; +import { APIReturnType } from '../../../../services/rest/createCallApmApi'; +import { px, unit } from '../../../../style/variables'; +import { SparkPlot } from '../../../shared/charts/spark_plot'; +import { MetricOverviewLink } from '../../../shared/Links/apm/MetricOverviewLink'; +import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/ServiceNodeMetricOverviewLink'; +import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip'; +import { getLatencyColumnLabel } from '../get_latency_column_label'; + +type ServiceInstancePrimaryStatisticItem = ValuesType< + APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/primary_statistics'> +>; + +type ServiceInstanceComparisonStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/comparison_statistics'>; + +export function getColumns({ + serviceName, + agentName, + latencyAggregationType, + serviceInstanceComparisonStatistics, + comparisonEnabled, +}: { + serviceName: string; + agentName?: string; + latencyAggregationType?: LatencyAggregationType; + serviceInstanceComparisonStatistics?: ServiceInstanceComparisonStatistics; + comparisonEnabled?: boolean; +}): Array> { + return [ + { + field: 'serviceNodeName', + name: i18n.translate( + 'xpack.apm.serviceOverview.instancesTableColumnNodeName', + { defaultMessage: 'Node name' } + ), + render: (_, item) => { + const { serviceNodeName } = item; + const isMissingServiceNodeName = + serviceNodeName === SERVICE_NODE_NAME_MISSING; + const text = isMissingServiceNodeName + ? UNIDENTIFIED_SERVICE_NODES_LABEL + : serviceNodeName; + + const link = isJavaAgentName(agentName) ? ( + + {text} + + ) : ( + ({ + ...query, + kuery: isMissingServiceNodeName + ? `NOT (service.node.name:*)` + : `service.node.name:"${item.serviceNodeName}"`, + })} + > + {text} + + ); + + return ; + }, + sortable: true, + }, + { + field: 'latencyValue', + name: getLatencyColumnLabel(latencyAggregationType), + width: px(unit * 10), + render: (_, { serviceNodeName, latency }) => { + const currentPeriodTimestamp = + serviceInstanceComparisonStatistics?.currentPeriod?.[serviceNodeName] + ?.latency; + const previousPeriodTimestamp = + serviceInstanceComparisonStatistics?.previousPeriod?.[serviceNodeName] + ?.latency; + return ( + + ); + }, + sortable: true, + }, + { + field: 'throughputValue', + name: i18n.translate( + 'xpack.apm.serviceOverview.instancesTableColumnThroughput', + { defaultMessage: 'Throughput' } + ), + width: px(unit * 10), + render: (_, { serviceNodeName, throughput }) => { + const currentPeriodTimestamp = + serviceInstanceComparisonStatistics?.currentPeriod?.[serviceNodeName] + ?.throughput; + const previousPeriodTimestamp = + serviceInstanceComparisonStatistics?.previousPeriod?.[serviceNodeName] + ?.throughput; + return ( + + ); + }, + sortable: true, + }, + { + field: 'errorRateValue', + name: i18n.translate( + 'xpack.apm.serviceOverview.instancesTableColumnErrorRate', + { defaultMessage: 'Error rate' } + ), + width: px(unit * 8), + render: (_, { serviceNodeName, errorRate }) => { + const currentPeriodTimestamp = + serviceInstanceComparisonStatistics?.currentPeriod?.[serviceNodeName] + ?.errorRate; + const previousPeriodTimestamp = + serviceInstanceComparisonStatistics?.previousPeriod?.[serviceNodeName] + ?.errorRate; + return ( + + ); + }, + sortable: true, + }, + { + field: 'cpuUsageValue', + name: i18n.translate( + 'xpack.apm.serviceOverview.instancesTableColumnCpuUsage', + { defaultMessage: 'CPU usage (avg.)' } + ), + width: px(unit * 8), + render: (_, { serviceNodeName, cpuUsage }) => { + const currentPeriodTimestamp = + serviceInstanceComparisonStatistics?.currentPeriod?.[serviceNodeName] + ?.cpuUsage; + const previousPeriodTimestamp = + serviceInstanceComparisonStatistics?.previousPeriod?.[serviceNodeName] + ?.cpuUsage; + return ( + + ); + }, + sortable: true, + }, + { + field: 'memoryUsageValue', + name: i18n.translate( + 'xpack.apm.serviceOverview.instancesTableColumnMemoryUsage', + { defaultMessage: 'Memory usage (avg.)' } + ), + width: px(unit * 9), + render: (_, { serviceNodeName, memoryUsage }) => { + const currentPeriodTimestamp = + serviceInstanceComparisonStatistics?.currentPeriod?.[serviceNodeName] + ?.memoryUsage; + const previousPeriodTimestamp = + serviceInstanceComparisonStatistics?.previousPeriod?.[serviceNodeName] + ?.memoryUsage; + return ( + + ); + }, + sortable: true, + }, + ]; +} diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx index 83ad506e8659b..3ca5f657795a7 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx @@ -6,208 +6,86 @@ */ import { - EuiBasicTableColumn, + EuiBasicTable, EuiFlexGroup, EuiFlexItem, - EuiInMemoryTable, EuiTitle, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { ValuesType } from 'utility-types'; -import { isJavaAgentName } from '../../../../../common/agent_name'; -import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../../common/i18n'; -import { SERVICE_NODE_NAME_MISSING } from '../../../../../common/service_nodes'; -import { - asMillisecondDuration, - asPercent, - asTransactionRate, -} from '../../../../../common/utils/formatters'; import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context'; import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; import { APIReturnType } from '../../../../services/rest/createCallApmApi'; -import { px, unit } from '../../../../style/variables'; -import { SparkPlot } from '../../../shared/charts/spark_plot'; -import { MetricOverviewLink } from '../../../shared/Links/apm/MetricOverviewLink'; -import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/ServiceNodeMetricOverviewLink'; import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper'; -import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip'; -import { getLatencyColumnLabel } from '../get_latency_column_label'; +import { + PAGE_SIZE, + SortDirection, + SortField, +} from '../service_overview_instances_chart_and_table'; import { ServiceOverviewTableContainer } from '../service_overview_table_container'; +import { getColumns } from './get_columns'; type ServiceInstanceItem = ValuesType< - APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances'> + APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/primary_statistics'> >; +type ServiceInstanceComparisonStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/comparison_statistics'>; + +export interface TableOptions { + pageIndex: number; + sort: { + direction: SortDirection; + field: SortField; + }; +} + interface Props { items?: ServiceInstanceItem[]; serviceName: string; status: FETCH_STATUS; + totalItems: number; + tableOptions: TableOptions; + onChangeTableOptions: (newTableOptions: { + page?: { index: number }; + sort?: { field: string; direction: SortDirection }; + }) => void; + serviceInstanceComparisonStatistics?: ServiceInstanceComparisonStatistics; + isLoading: boolean; } - export function ServiceOverviewInstancesTable({ items = [], + totalItems, serviceName, status, + tableOptions, + onChangeTableOptions, + serviceInstanceComparisonStatistics, + isLoading, }: Props) { const { agentName } = useApmServiceContext(); const { - urlParams: { latencyAggregationType }, + urlParams: { latencyAggregationType, comparisonEnabled }, } = useUrlParams(); - const columns: Array> = [ - { - field: 'name', - name: i18n.translate( - 'xpack.apm.serviceOverview.instancesTableColumnNodeName', - { - defaultMessage: 'Node name', - } - ), - render: (_, item) => { - const { serviceNodeName } = item; - const isMissingServiceNodeName = - serviceNodeName === SERVICE_NODE_NAME_MISSING; - const text = isMissingServiceNodeName - ? UNIDENTIFIED_SERVICE_NODES_LABEL - : serviceNodeName; + const { pageIndex, sort } = tableOptions; + const { direction, field } = sort; - const link = isJavaAgentName(agentName) ? ( - - {text} - - ) : ( - ({ - ...query, - kuery: isMissingServiceNodeName - ? `NOT (service.node.name:*)` - : `service.node.name:"${item.serviceNodeName}"`, - })} - > - {text} - - ); - - return ; - }, - sortable: true, - }, - { - field: 'latencyValue', - name: getLatencyColumnLabel(latencyAggregationType), - width: px(unit * 10), - render: (_, { latency }) => { - return ( - - ); - }, - sortable: true, - }, - { - field: 'throughputValue', - name: i18n.translate( - 'xpack.apm.serviceOverview.instancesTableColumnThroughput', - { defaultMessage: 'Throughput' } - ), - width: px(unit * 10), - render: (_, { throughput }) => { - return ( - - ); - }, - sortable: true, - }, - { - field: 'errorRateValue', - name: i18n.translate( - 'xpack.apm.serviceOverview.instancesTableColumnErrorRate', - { - defaultMessage: 'Error rate', - } - ), - width: px(unit * 8), - render: (_, { errorRate }) => { - return ( - - ); - }, - sortable: true, - }, - { - field: 'cpuUsageValue', - name: i18n.translate( - 'xpack.apm.serviceOverview.instancesTableColumnCpuUsage', - { - defaultMessage: 'CPU usage (avg.)', - } - ), - width: px(unit * 8), - render: (_, { cpuUsage }) => { - return ( - - ); - }, - sortable: true, - }, - { - field: 'memoryUsageValue', - name: i18n.translate( - 'xpack.apm.serviceOverview.instancesTableColumnMemoryUsage', - { - defaultMessage: 'Memory usage (avg.)', - } - ), - width: px(unit * 9), - render: (_, { memoryUsage }) => { - return ( - - ); - }, - sortable: true, - }, - ]; + const columns = getColumns({ + agentName, + serviceName, + latencyAggregationType, + serviceInstanceComparisonStatistics, + comparisonEnabled, + }); - // need top-level sortable fields for the managed table - const tableItems = items.map((item) => ({ - ...item, - latencyValue: item.latency?.value ?? 0, - throughputValue: item.throughput?.value ?? 0, - errorRateValue: item.errorRate?.value ?? 0, - cpuUsageValue: item.cpuUsage?.value ?? 0, - memoryUsageValue: item.memoryUsage?.value ?? 0, - })); - - const isLoading = status === FETCH_STATUS.LOADING; + const pagination = { + pageIndex, + pageSize: PAGE_SIZE, + totalItemCount: totalItems, + hidePerPageOptions: true, + }; return ( @@ -223,24 +101,15 @@ export function ServiceOverviewInstancesTable({ - diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx index aa353b40d464a..5f24c1ee2495b 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx @@ -29,7 +29,7 @@ import { getResponseTimeTickFormatter } from '../transaction_charts/helper'; interface InstancesLatencyDistributionChartProps { height: number; - items?: APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances'>; + items?: APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/primary_statistics'>; status: FETCH_STATUS; } @@ -44,15 +44,11 @@ export function InstancesLatencyDistributionChart({ const chartTheme = { ...useChartTheme(), bubbleSeriesStyle: { - point: { - strokeWidth: 0, - fill: theme.eui.euiColorVis1, - radius: 4, - }, + point: { strokeWidth: 0, fill: theme.eui.euiColorVis1, radius: 4 }, }, }; - const maxLatency = Math.max(...items.map((item) => item.latency?.value ?? 0)); + const maxLatency = Math.max(...items.map((item) => item.latency ?? 0)); const latencyFormatter = getDurationFormatter(maxLatency); return ( @@ -79,9 +75,9 @@ export function InstancesLatencyDistributionChart({ 'xpack.apm.instancesLatencyDistributionChartLegend', { defaultMessage: 'Instances' } )} - xAccessor={(item) => item.throughput?.value} + xAccessor={(item) => item.throughput} xScaleType={ScaleType.Linear} - yAccessors={[(item) => item.latency?.value]} + yAccessors={[(item) => item.latency]} yScaleType={ScaleType.Linear} /> ; + sigTermAggs: Record; }) { - const significantTerms = Object.entries(sigTermAggs).flatMap( - ([fieldName, agg]) => { + const significantTerms = Object.entries(sigTermAggs) + // filter entries with buckets, i.e. Significant terms aggs + .filter((entry): entry is [string, SigTermAgg] => { + const [, agg] = entry; + return 'buckets' in agg; + }) + .flatMap(([fieldName, agg]) => { return agg.buckets.map((bucket) => ({ fieldName, fieldValue: bucket.key, @@ -58,8 +63,7 @@ export function processSignificantTermAggs({ valueCount: bucket.doc_count, score: bucket.score, })); - } - ); + }); const maxImpactScore = getMaxImpactScore( significantTerms.map(({ score }) => score) diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/comparison_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/comparison_statistics.ts new file mode 100644 index 0000000000000..6fca42723b9cc --- /dev/null +++ b/x-pack/plugins/apm/server/lib/services/get_service_instances/comparison_statistics.ts @@ -0,0 +1,166 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { keyBy } from 'lodash'; +import { Coordinate } from '../../../../typings/timeseries'; +import { LatencyAggregationType } from '../../../../common/latency_aggregation_types'; +import { joinByKey } from '../../../../common/utils/join_by_key'; +import { offsetPreviousPeriodCoordinates } from '../../../utils/offset_previous_period_coordinate'; +import { withApmSpan } from '../../../utils/with_apm_span'; +import { Setup, SetupTimeRange } from '../../helpers/setup_request'; +import { getServiceInstancesSystemMetricStatistics } from './get_service_instances_system_metric_statistics'; +import { getServiceInstancesTransactionStatistics } from './get_service_instances_transaction_statistics'; + +interface ServiceInstanceComparisonStatisticsParams { + environment?: string; + kuery?: string; + latencyAggregationType: LatencyAggregationType; + setup: Setup; + serviceName: string; + transactionType: string; + searchAggregatedTransactions: boolean; + numBuckets: number; + start: number; + end: number; + serviceNodeIds: string[]; +} + +async function getServiceInstancesComparisonStatistics( + params: ServiceInstanceComparisonStatisticsParams +): Promise< + Array<{ + serviceNodeName: string; + errorRate?: Coordinate[]; + latency?: Coordinate[]; + throughput?: Coordinate[]; + cpuUsage?: Coordinate[]; + memoryUsage?: Coordinate[]; + }> +> { + return withApmSpan( + 'get_service_instances_comparison_statistics', + async () => { + const [transactionStats, systemMetricStats = []] = await Promise.all([ + getServiceInstancesTransactionStatistics({ + ...params, + isComparisonSearch: true, + }), + getServiceInstancesSystemMetricStatistics({ + ...params, + isComparisonSearch: true, + }), + ]); + + const stats = joinByKey( + [...transactionStats, ...systemMetricStats], + 'serviceNodeName' + ); + + return stats; + } + ); +} + +export async function getServiceInstancesComparisonStatisticsPeriods({ + environment, + kuery, + latencyAggregationType, + setup, + serviceName, + transactionType, + searchAggregatedTransactions, + numBuckets, + serviceNodeIds, + comparisonStart, + comparisonEnd, +}: { + environment?: string; + kuery?: string; + latencyAggregationType: LatencyAggregationType; + setup: Setup & SetupTimeRange; + serviceName: string; + transactionType: string; + searchAggregatedTransactions: boolean; + numBuckets: number; + serviceNodeIds: string[]; + comparisonStart?: number; + comparisonEnd?: number; +}) { + return withApmSpan( + 'get_service_instances_comparison_statistics_periods', + async () => { + const { start, end } = setup; + + const commonParams = { + environment, + kuery, + latencyAggregationType, + setup, + serviceName, + transactionType, + searchAggregatedTransactions, + numBuckets, + serviceNodeIds, + }; + + const currentPeriodPromise = getServiceInstancesComparisonStatistics({ + ...commonParams, + start, + end, + }); + + const previousPeriodPromise = + comparisonStart && comparisonEnd + ? getServiceInstancesComparisonStatistics({ + ...commonParams, + start: comparisonStart, + end: comparisonEnd, + }) + : []; + const [currentPeriod, previousPeriod] = await Promise.all([ + currentPeriodPromise, + previousPeriodPromise, + ]); + + const firtCurrentPeriod = currentPeriod.length + ? currentPeriod[0] + : undefined; + + return { + currentPeriod: keyBy(currentPeriod, 'serviceNodeName'), + previousPeriod: keyBy( + previousPeriod.map((data) => { + return { + ...data, + cpuUsage: offsetPreviousPeriodCoordinates({ + currentPeriodTimeseries: firtCurrentPeriod?.cpuUsage, + previousPeriodTimeseries: data.cpuUsage, + }), + errorRate: offsetPreviousPeriodCoordinates({ + currentPeriodTimeseries: firtCurrentPeriod?.errorRate, + previousPeriodTimeseries: data.errorRate, + }), + latency: offsetPreviousPeriodCoordinates({ + currentPeriodTimeseries: firtCurrentPeriod?.latency, + previousPeriodTimeseries: data.latency, + }), + memoryUsage: offsetPreviousPeriodCoordinates({ + currentPeriodTimeseries: firtCurrentPeriod?.memoryUsage, + previousPeriodTimeseries: data.memoryUsage, + }), + throughput: offsetPreviousPeriodCoordinates({ + currentPeriodTimeseries: firtCurrentPeriod?.throughput, + previousPeriodTimeseries: data.throughput, + }), + }; + }), + 'serviceNodeName' + ), + }; + } + ); +} diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instance_system_metric_stats.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instance_system_metric_stats.ts deleted file mode 100644 index 6a72f817b3f69..0000000000000 --- a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instance_system_metric_stats.ts +++ /dev/null @@ -1,161 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { AggregationOptionsByType } from '../../../../../../../typings/elasticsearch'; -import { - environmentQuery, - rangeQuery, - kqlQuery, -} from '../../../../server/utils/queries'; -import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes'; -import { - METRIC_CGROUP_MEMORY_USAGE_BYTES, - METRIC_PROCESS_CPU_PERCENT, - METRIC_SYSTEM_FREE_MEMORY, - METRIC_SYSTEM_TOTAL_MEMORY, - SERVICE_NAME, - SERVICE_NODE_NAME, -} from '../../../../common/elasticsearch_fieldnames'; -import { ProcessorEvent } from '../../../../common/processor_event'; -import { ServiceInstanceParams } from '.'; -import { getBucketSize } from '../../helpers/get_bucket_size'; -import { - percentCgroupMemoryUsedScript, - percentSystemMemoryUsedScript, -} from '../../metrics/by_agent/shared/memory'; -import { withApmSpan } from '../../../utils/with_apm_span'; - -export async function getServiceInstanceSystemMetricStats({ - environment, - kuery, - setup, - serviceName, - size, - numBuckets, -}: ServiceInstanceParams) { - return withApmSpan('get_service_instance_system_metric_stats', async () => { - const { apmEventClient, start, end } = setup; - - const { intervalString } = getBucketSize({ start, end, numBuckets }); - - const systemMemoryFilter = { - bool: { - filter: [ - { exists: { field: METRIC_SYSTEM_FREE_MEMORY } }, - { exists: { field: METRIC_SYSTEM_TOTAL_MEMORY } }, - ], - }, - }; - - const cgroupMemoryFilter = { - exists: { field: METRIC_CGROUP_MEMORY_USAGE_BYTES }, - }; - - const cpuUsageFilter = { exists: { field: METRIC_PROCESS_CPU_PERCENT } }; - - function withTimeseries(agg: T) { - return { - avg: { avg: agg }, - timeseries: { - date_histogram: { - field: '@timestamp', - fixed_interval: intervalString, - min_doc_count: 0, - extended_bounds: { - min: start, - max: end, - }, - }, - aggs: { - avg: { avg: agg }, - }, - }, - }; - } - - const subAggs = { - memory_usage_cgroup: { - filter: cgroupMemoryFilter, - aggs: withTimeseries({ script: percentCgroupMemoryUsedScript }), - }, - memory_usage_system: { - filter: systemMemoryFilter, - aggs: withTimeseries({ script: percentSystemMemoryUsedScript }), - }, - cpu_usage: { - filter: cpuUsageFilter, - aggs: withTimeseries({ field: METRIC_PROCESS_CPU_PERCENT }), - }, - }; - - const response = await apmEventClient.search({ - apm: { - events: [ProcessorEvent.metric], - }, - body: { - size: 0, - query: { - bool: { - filter: [ - { term: { [SERVICE_NAME]: serviceName } }, - ...rangeQuery(start, end), - ...environmentQuery(environment), - ...kqlQuery(kuery), - ], - should: [cgroupMemoryFilter, systemMemoryFilter, cpuUsageFilter], - minimum_should_match: 1, - }, - }, - aggs: { - [SERVICE_NODE_NAME]: { - terms: { - field: SERVICE_NODE_NAME, - missing: SERVICE_NODE_NAME_MISSING, - size, - }, - aggs: subAggs, - }, - }, - }, - }); - - return ( - response.aggregations?.[SERVICE_NODE_NAME].buckets.map( - (serviceNodeBucket) => { - const hasCGroupData = - serviceNodeBucket.memory_usage_cgroup.avg.value !== null; - - const memoryMetricsKey = hasCGroupData - ? 'memory_usage_cgroup' - : 'memory_usage_system'; - - return { - serviceNodeName: String(serviceNodeBucket.key), - cpuUsage: { - value: serviceNodeBucket.cpu_usage.avg.value, - timeseries: serviceNodeBucket.cpu_usage.timeseries.buckets.map( - (dateBucket) => ({ - x: dateBucket.key, - y: dateBucket.avg.value, - }) - ), - }, - memoryUsage: { - value: serviceNodeBucket[memoryMetricsKey].avg.value, - timeseries: serviceNodeBucket[ - memoryMetricsKey - ].timeseries.buckets.map((dateBucket) => ({ - x: dateBucket.key, - y: dateBucket.avg.value, - })), - }, - }; - } - ) ?? [] - ); - }); -} diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instance_transaction_stats.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instance_transaction_stats.ts deleted file mode 100644 index 94a5e54e9ace5..0000000000000 --- a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instance_transaction_stats.ts +++ /dev/null @@ -1,166 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { EventOutcome } from '../../../../common/event_outcome'; -import { - environmentQuery, - rangeQuery, - kqlQuery, -} from '../../../../server/utils/queries'; -import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes'; -import { - EVENT_OUTCOME, - SERVICE_NAME, - SERVICE_NODE_NAME, - TRANSACTION_TYPE, -} from '../../../../common/elasticsearch_fieldnames'; -import { ServiceInstanceParams } from '.'; -import { getBucketSize } from '../../helpers/get_bucket_size'; -import { - getProcessorEventForAggregatedTransactions, - getTransactionDurationFieldForAggregatedTransactions, -} from '../../helpers/aggregated_transactions'; -import { calculateThroughput } from '../../helpers/calculate_throughput'; -import { withApmSpan } from '../../../utils/with_apm_span'; -import { - getLatencyAggregation, - getLatencyValue, -} from '../../helpers/latency_aggregation_type'; - -export async function getServiceInstanceTransactionStats({ - environment, - kuery, - latencyAggregationType, - setup, - transactionType, - serviceName, - size, - searchAggregatedTransactions, - numBuckets, -}: ServiceInstanceParams) { - return withApmSpan('get_service_instance_transaction_stats', async () => { - const { apmEventClient, start, end } = setup; - - const { intervalString, bucketSize } = getBucketSize({ - start, - end, - numBuckets, - }); - - const field = getTransactionDurationFieldForAggregatedTransactions( - searchAggregatedTransactions - ); - - const subAggs = { - ...getLatencyAggregation(latencyAggregationType, field), - failures: { - filter: { - term: { - [EVENT_OUTCOME]: EventOutcome.failure, - }, - }, - }, - }; - - const response = await apmEventClient.search({ - apm: { - events: [ - getProcessorEventForAggregatedTransactions( - searchAggregatedTransactions - ), - ], - }, - body: { - size: 0, - query: { - bool: { - filter: [ - { term: { [SERVICE_NAME]: serviceName } }, - { term: { [TRANSACTION_TYPE]: transactionType } }, - ...rangeQuery(start, end), - ...environmentQuery(environment), - ...kqlQuery(kuery), - ], - }, - }, - aggs: { - [SERVICE_NODE_NAME]: { - terms: { - field: SERVICE_NODE_NAME, - missing: SERVICE_NODE_NAME_MISSING, - size, - }, - aggs: { - ...subAggs, - timeseries: { - date_histogram: { - field: '@timestamp', - fixed_interval: intervalString, - min_doc_count: 0, - extended_bounds: { - min: start, - max: end, - }, - }, - aggs: { - ...subAggs, - }, - }, - }, - }, - }, - }, - }); - - const bucketSizeInMinutes = bucketSize / 60; - - return ( - response.aggregations?.[SERVICE_NODE_NAME].buckets.map( - (serviceNodeBucket) => { - const { - doc_count: count, - latency, - key, - failures, - timeseries, - } = serviceNodeBucket; - - return { - serviceNodeName: String(key), - errorRate: { - value: failures.doc_count / count, - timeseries: timeseries.buckets.map((dateBucket) => ({ - x: dateBucket.key, - y: dateBucket.failures.doc_count / dateBucket.doc_count, - })), - }, - throughput: { - value: calculateThroughput({ start, end, value: count }), - timeseries: timeseries.buckets.map((dateBucket) => ({ - x: dateBucket.key, - y: dateBucket.doc_count / bucketSizeInMinutes, - })), - }, - latency: { - value: getLatencyValue({ - aggregation: latency, - latencyAggregationType, - }), - timeseries: timeseries.buckets.map((dateBucket) => ({ - x: dateBucket.key, - y: getLatencyValue({ - aggregation: dateBucket.latency, - latencyAggregationType, - }), - })), - }, - }; - } - ) ?? [] - ); - }); -} diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_system_metric_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_system_metric_statistics.ts new file mode 100644 index 0000000000000..1a33e9810dd5e --- /dev/null +++ b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_system_metric_statistics.ts @@ -0,0 +1,208 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { AggregationOptionsByType } from 'typings/elasticsearch'; +import { + METRIC_CGROUP_MEMORY_USAGE_BYTES, + METRIC_PROCESS_CPU_PERCENT, + METRIC_SYSTEM_FREE_MEMORY, + METRIC_SYSTEM_TOTAL_MEMORY, + SERVICE_NAME, + SERVICE_NODE_NAME, +} from '../../../../common/elasticsearch_fieldnames'; +import { ProcessorEvent } from '../../../../common/processor_event'; +import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes'; +import { Coordinate } from '../../../../typings/timeseries'; +import { environmentQuery, kqlQuery, rangeQuery } from '../../../utils/queries'; +import { getBucketSize } from '../../helpers/get_bucket_size'; +import { Setup } from '../../helpers/setup_request'; +import { + percentCgroupMemoryUsedScript, + percentSystemMemoryUsedScript, +} from '../../metrics/by_agent/shared/memory'; +import { withApmSpan } from '../../../utils/with_apm_span'; + +interface ServiceInstanceSystemMetricPrimaryStatistics { + serviceNodeName: string; + cpuUsage: number | null; + memoryUsage: number | null; +} + +interface ServiceInstanceSystemMetricComparisonStatistics { + serviceNodeName: string; + cpuUsage: Coordinate[]; + memoryUsage: Coordinate[]; +} + +type ServiceInstanceSystemMetricStatistics = T extends true + ? ServiceInstanceSystemMetricComparisonStatistics + : ServiceInstanceSystemMetricPrimaryStatistics; + +export async function getServiceInstancesSystemMetricStatistics< + T extends true | false +>({ + environment, + kuery, + setup, + serviceName, + size, + start, + end, + serviceNodeIds, + numBuckets, + isComparisonSearch, +}: { + setup: Setup; + serviceName: string; + start: number; + end: number; + numBuckets?: number; + serviceNodeIds?: string[]; + environment?: string; + kuery?: string; + size?: number; + isComparisonSearch: T; +}): Promise>> { + return withApmSpan( + 'get_service_instances_system_metric_statistics', + async () => { + const { apmEventClient } = setup; + + const { intervalString } = getBucketSize({ start, end, numBuckets }); + + const systemMemoryFilter = { + bool: { + filter: [ + { exists: { field: METRIC_SYSTEM_FREE_MEMORY } }, + { exists: { field: METRIC_SYSTEM_TOTAL_MEMORY } }, + ], + }, + }; + + const cgroupMemoryFilter = { + exists: { field: METRIC_CGROUP_MEMORY_USAGE_BYTES }, + }; + + const cpuUsageFilter = { exists: { field: METRIC_PROCESS_CPU_PERCENT } }; + + function withTimeseries( + agg: TParams + ) { + return { + ...(isComparisonSearch + ? { + avg: { avg: agg }, + timeseries: { + date_histogram: { + field: '@timestamp', + fixed_interval: intervalString, + min_doc_count: 0, + extended_bounds: { + min: start, + max: end, + }, + }, + aggs: { avg: { avg: agg } }, + }, + } + : { avg: { avg: agg } }), + }; + } + + const subAggs = { + memory_usage_cgroup: { + filter: cgroupMemoryFilter, + aggs: withTimeseries({ script: percentCgroupMemoryUsedScript }), + }, + memory_usage_system: { + filter: systemMemoryFilter, + aggs: withTimeseries({ script: percentSystemMemoryUsedScript }), + }, + cpu_usage: { + filter: cpuUsageFilter, + aggs: withTimeseries({ field: METRIC_PROCESS_CPU_PERCENT }), + }, + }; + + const response = await apmEventClient.search({ + apm: { + events: [ProcessorEvent.metric], + }, + body: { + size: 0, + query: { + bool: { + filter: [ + { term: { [SERVICE_NAME]: serviceName } }, + ...rangeQuery(start, end), + ...environmentQuery(environment), + ...kqlQuery(kuery), + ...(isComparisonSearch && serviceNodeIds + ? [{ terms: { [SERVICE_NODE_NAME]: serviceNodeIds } }] + : []), + ], + should: [cgroupMemoryFilter, systemMemoryFilter, cpuUsageFilter], + minimum_should_match: 1, + }, + }, + aggs: { + [SERVICE_NODE_NAME]: { + terms: { + field: SERVICE_NODE_NAME, + missing: SERVICE_NODE_NAME_MISSING, + ...(size ? { size } : {}), + ...(isComparisonSearch ? { include: serviceNodeIds } : {}), + }, + aggs: subAggs, + }, + }, + }, + }); + + return ( + (response.aggregations?.[SERVICE_NODE_NAME].buckets.map( + (serviceNodeBucket) => { + const serviceNodeName = String(serviceNodeBucket.key); + const hasCGroupData = + serviceNodeBucket.memory_usage_cgroup.avg.value !== null; + + const memoryMetricsKey = hasCGroupData + ? 'memory_usage_cgroup' + : 'memory_usage_system'; + + const cpuUsage = + // Timeseries is available when isComparisonSearch is true + 'timeseries' in serviceNodeBucket.cpu_usage + ? serviceNodeBucket.cpu_usage.timeseries.buckets.map( + (dateBucket) => ({ + x: dateBucket.key, + y: dateBucket.avg.value, + }) + ) + : serviceNodeBucket.cpu_usage.avg.value; + + const memoryUsageValue = serviceNodeBucket[memoryMetricsKey]; + const memoryUsage = + // Timeseries is available when isComparisonSearch is true + 'timeseries' in memoryUsageValue + ? memoryUsageValue.timeseries.buckets.map((dateBucket) => ({ + x: dateBucket.key, + y: dateBucket.avg.value, + })) + : serviceNodeBucket[memoryMetricsKey].avg.value; + + return { + serviceNodeName, + cpuUsage, + memoryUsage, + }; + } + ) as Array>) || [] + ); + } + ); +} diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts new file mode 100644 index 0000000000000..ad54a231b52ef --- /dev/null +++ b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts @@ -0,0 +1,202 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { + EVENT_OUTCOME, + SERVICE_NAME, + SERVICE_NODE_NAME, + TRANSACTION_TYPE, +} from '../../../../common/elasticsearch_fieldnames'; +import { EventOutcome } from '../../../../common/event_outcome'; +import { LatencyAggregationType } from '../../../../common/latency_aggregation_types'; +import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes'; +import { Coordinate } from '../../../../typings/timeseries'; +import { environmentQuery, kqlQuery, rangeQuery } from '../../../utils/queries'; +import { + getProcessorEventForAggregatedTransactions, + getTransactionDurationFieldForAggregatedTransactions, +} from '../../helpers/aggregated_transactions'; +import { calculateThroughput } from '../../helpers/calculate_throughput'; +import { getBucketSize } from '../../helpers/get_bucket_size'; +import { + getLatencyAggregation, + getLatencyValue, +} from '../../helpers/latency_aggregation_type'; +import { Setup } from '../../helpers/setup_request'; +import { withApmSpan } from '../../../utils/with_apm_span'; + +interface ServiceInstanceTransactionPrimaryStatistics { + serviceNodeName: string; + errorRate: number; + latency: number; + throughput: number; +} + +interface ServiceInstanceTransactionComparisonStatistics { + serviceNodeName: string; + errorRate: Coordinate[]; + latency: Coordinate[]; + throughput: Coordinate[]; +} + +type ServiceInstanceTransactionStatistics = T extends true + ? ServiceInstanceTransactionComparisonStatistics + : ServiceInstanceTransactionPrimaryStatistics; + +export async function getServiceInstancesTransactionStatistics< + T extends true | false +>({ + environment, + kuery, + latencyAggregationType, + setup, + transactionType, + serviceName, + size, + searchAggregatedTransactions, + start, + end, + serviceNodeIds, + numBuckets, + isComparisonSearch, +}: { + latencyAggregationType: LatencyAggregationType; + setup: Setup; + serviceName: string; + transactionType: string; + searchAggregatedTransactions: boolean; + start: number; + end: number; + isComparisonSearch: T; + serviceNodeIds?: string[]; + environment?: string; + kuery?: string; + size?: number; + numBuckets?: number; +}): Promise>> { + return withApmSpan( + 'get_service_instances_transaction_statistics', + async () => { + const { apmEventClient } = setup; + + const { intervalString, bucketSize } = getBucketSize({ + start, + end, + numBuckets, + }); + + const field = getTransactionDurationFieldForAggregatedTransactions( + searchAggregatedTransactions + ); + + const subAggs = { + ...getLatencyAggregation(latencyAggregationType, field), + failures: { + filter: { + term: { + [EVENT_OUTCOME]: EventOutcome.failure, + }, + }, + }, + }; + + const query = { + bool: { + filter: [ + { term: { [SERVICE_NAME]: serviceName } }, + { term: { [TRANSACTION_TYPE]: transactionType } }, + ...rangeQuery(start, end), + ...environmentQuery(environment), + ...kqlQuery(kuery), + ...(isComparisonSearch && serviceNodeIds + ? [{ terms: { [SERVICE_NODE_NAME]: serviceNodeIds } }] + : []), + ], + }, + }; + + const aggs = { + [SERVICE_NODE_NAME]: { + terms: { + field: SERVICE_NODE_NAME, + missing: SERVICE_NODE_NAME_MISSING, + ...(size ? { size } : {}), + ...(isComparisonSearch ? { include: serviceNodeIds } : {}), + }, + aggs: isComparisonSearch + ? { + timeseries: { + date_histogram: { + field: '@timestamp', + fixed_interval: intervalString, + min_doc_count: 0, + extended_bounds: { min: start, max: end }, + }, + aggs: subAggs, + }, + } + : subAggs, + }, + }; + + const response = await apmEventClient.search({ + apm: { + events: [ + getProcessorEventForAggregatedTransactions( + searchAggregatedTransactions + ), + ], + }, + body: { size: 0, query, aggs }, + }); + + const bucketSizeInMinutes = bucketSize / 60; + + return ( + (response.aggregations?.[SERVICE_NODE_NAME].buckets.map( + (serviceNodeBucket) => { + const { doc_count: count, key } = serviceNodeBucket; + const serviceNodeName = String(key); + + // Timeseries is returned when isComparisonSearch is true + if ('timeseries' in serviceNodeBucket) { + const { timeseries } = serviceNodeBucket; + return { + serviceNodeName, + errorRate: timeseries.buckets.map((dateBucket) => ({ + x: dateBucket.key, + y: dateBucket.failures.doc_count / dateBucket.doc_count, + })), + throughput: timeseries.buckets.map((dateBucket) => ({ + x: dateBucket.key, + y: dateBucket.doc_count / bucketSizeInMinutes, + })), + latency: timeseries.buckets.map((dateBucket) => ({ + x: dateBucket.key, + y: getLatencyValue({ + aggregation: dateBucket.latency, + latencyAggregationType, + }), + })), + }; + } else { + const { failures, latency } = serviceNodeBucket; + return { + serviceNodeName, + errorRate: failures.doc_count / count, + latency: getLatencyValue({ + aggregation: latency, + latencyAggregationType, + }), + throughput: calculateThroughput({ start, end, value: count }), + }; + } + } + ) as Array>) || [] + ); + } + ); +} diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/index.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/primary_statistics.ts similarity index 52% rename from x-pack/plugins/apm/server/lib/services/get_service_instances/index.ts rename to x-pack/plugins/apm/server/lib/services/get_service_instances/primary_statistics.ts index 838753890a8cd..3cd98558eff02 100644 --- a/x-pack/plugins/apm/server/lib/services/get_service_instances/index.ts +++ b/x-pack/plugins/apm/server/lib/services/get_service_instances/primary_statistics.ts @@ -9,10 +9,10 @@ import { LatencyAggregationType } from '../../../../common/latency_aggregation_t import { joinByKey } from '../../../../common/utils/join_by_key'; import { withApmSpan } from '../../../utils/with_apm_span'; import { Setup, SetupTimeRange } from '../../helpers/setup_request'; -import { getServiceInstanceSystemMetricStats } from './get_service_instance_system_metric_stats'; -import { getServiceInstanceTransactionStats } from './get_service_instance_transaction_stats'; +import { getServiceInstancesSystemMetricStatistics } from './get_service_instances_system_metric_statistics'; +import { getServiceInstancesTransactionStatistics } from './get_service_instances_transaction_statistics'; -export interface ServiceInstanceParams { +interface ServiceInstancePrimaryStatisticsParams { environment?: string; kuery?: string; latencyAggregationType: LatencyAggregationType; @@ -21,21 +21,37 @@ export interface ServiceInstanceParams { transactionType: string; searchAggregatedTransactions: boolean; size: number; - numBuckets: number; + start: number; + end: number; } -export async function getServiceInstances( - params: Omit -) { - return withApmSpan('get_service_instances', async () => { +export async function getServiceInstancesPrimaryStatistics( + params: Omit +): Promise< + Array<{ + serviceNodeName: string; + errorRate?: number; + latency?: number; + throughput?: number; + cpuUsage?: number | null; + memoryUsage?: number | null; + }> +> { + return withApmSpan('get_service_instances_primary_statistics', async () => { const paramsForSubQueries = { ...params, size: 50, }; const [transactionStats, systemMetricStats] = await Promise.all([ - getServiceInstanceTransactionStats(paramsForSubQueries), - getServiceInstanceSystemMetricStats(paramsForSubQueries), + getServiceInstancesTransactionStatistics({ + ...paramsForSubQueries, + isComparisonSearch: false, + }), + getServiceInstancesSystemMetricStatistics({ + ...paramsForSubQueries, + isComparisonSearch: false, + }), ]); const stats = joinByKey( diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts index 2bd7e25e848c8..2b5fb0b516ab5 100644 --- a/x-pack/plugins/apm/server/routes/create_apm_api.ts +++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts @@ -30,7 +30,8 @@ import { serviceDependenciesRoute, serviceMetadataDetailsRoute, serviceMetadataIconsRoute, - serviceInstancesRoute, + serviceInstancesPrimaryStatisticsRoute, + serviceInstancesComparisonStatisticsRoute, serviceProfilingStatisticsRoute, serviceProfilingTimelineRoute, } from './services'; @@ -134,7 +135,8 @@ const createApmApi = () => { .add(serviceDependenciesRoute) .add(serviceMetadataDetailsRoute) .add(serviceMetadataIconsRoute) - .add(serviceInstancesRoute) + .add(serviceInstancesPrimaryStatisticsRoute) + .add(serviceInstancesComparisonStatisticsRoute) .add(serviceErrorGroupsComparisonStatisticsRoute) .add(serviceProfilingTimelineRoute) .add(serviceProfilingStatisticsRoute) diff --git a/x-pack/plugins/apm/server/routes/services.ts b/x-pack/plugins/apm/server/routes/services.ts index bac970416792b..7ba19035a90b0 100644 --- a/x-pack/plugins/apm/server/routes/services.ts +++ b/x-pack/plugins/apm/server/routes/services.ts @@ -8,7 +8,13 @@ import Boom from '@hapi/boom'; import * as t from 'io-ts'; import { uniq } from 'lodash'; +import { + LatencyAggregationType, + latencyAggregationTypeRt, +} from '../../common/latency_aggregation_types'; +import { ProfilingValueType } from '../../common/profiling'; import { isoToEpochRt } from '../../common/runtime_types/iso_to_epoch_rt'; +import { jsonRt } from '../../common/runtime_types/json_rt'; import { toNumberRt } from '../../common/runtime_types/to_number_rt'; import { getSearchAggregatedTransactions } from '../lib/helpers/aggregated_transactions'; import { setupRequest } from '../lib/helpers/setup_request'; @@ -16,31 +22,26 @@ import { getServiceAnnotations } from '../lib/services/annotations'; import { getServices } from '../lib/services/get_services'; import { getServiceAgentName } from '../lib/services/get_service_agent_name'; import { getServiceDependencies } from '../lib/services/get_service_dependencies'; -import { getServiceErrorGroupPrimaryStatistics } from '../lib/services/get_service_error_groups/get_service_error_group_primary_statistics'; import { getServiceErrorGroupPeriods } from '../lib/services/get_service_error_groups/get_service_error_group_comparison_statistics'; -import { getServiceInstances } from '../lib/services/get_service_instances'; +import { getServiceErrorGroupPrimaryStatistics } from '../lib/services/get_service_error_groups/get_service_error_group_primary_statistics'; +import { getServiceInstancesComparisonStatisticsPeriods } from '../lib/services/get_service_instances/comparison_statistics'; +import { getServiceInstancesPrimaryStatistics } from '../lib/services/get_service_instances/primary_statistics'; import { getServiceMetadataDetails } from '../lib/services/get_service_metadata_details'; import { getServiceMetadataIcons } from '../lib/services/get_service_metadata_icons'; import { getServiceNodeMetadata } from '../lib/services/get_service_node_metadata'; import { getServiceTransactionTypes } from '../lib/services/get_service_transaction_types'; import { getThroughput } from '../lib/services/get_throughput'; -import { createRoute } from './create_route'; +import { getServiceProfilingStatistics } from '../lib/services/profiling/get_service_profiling_statistics'; +import { getServiceProfilingTimeline } from '../lib/services/profiling/get_service_profiling_timeline'; import { offsetPreviousPeriodCoordinates } from '../utils/offset_previous_period_coordinate'; -import { jsonRt } from '../../common/runtime_types/json_rt'; +import { withApmSpan } from '../utils/with_apm_span'; +import { createRoute } from './create_route'; import { comparisonRangeRt, environmentRt, kueryRt, rangeRt, } from './default_api_types'; -import { withApmSpan } from '../utils/with_apm_span'; -import { getServiceProfilingStatistics } from '../lib/services/profiling/get_service_profiling_statistics'; -import { getServiceProfilingTimeline } from '../lib/services/profiling/get_service_profiling_timeline'; -import { ProfilingValueType } from '../../common/profiling'; -import { - latencyAggregationTypeRt, - LatencyAggregationType, -} from '../../common/latency_aggregation_types'; export const servicesRoute = createRoute({ endpoint: 'GET /api/apm/services', @@ -433,8 +434,9 @@ export const serviceThroughputRoute = createRoute({ }, }); -export const serviceInstancesRoute = createRoute({ - endpoint: 'GET /api/apm/services/{serviceName}/service_overview_instances', +export const serviceInstancesPrimaryStatisticsRoute = createRoute({ + endpoint: + 'GET /api/apm/services/{serviceName}/service_overview_instances/primary_statistics', params: t.type({ path: t.type({ serviceName: t.string, @@ -443,11 +445,58 @@ export const serviceInstancesRoute = createRoute({ t.type({ latencyAggregationType: latencyAggregationTypeRt, transactionType: t.string, + }), + environmentRt, + kueryRt, + rangeRt, + ]), + }), + options: { tags: ['access:apm'] }, + handler: async ({ context, request }) => { + const setup = await setupRequest(context, request); + const { serviceName } = context.params.path; + const { environment, kuery, transactionType } = context.params.query; + const latencyAggregationType = (context.params.query + .latencyAggregationType as unknown) as LatencyAggregationType; + + const searchAggregatedTransactions = await getSearchAggregatedTransactions( + setup + ); + + const { start, end } = setup; + + return getServiceInstancesPrimaryStatistics({ + environment, + kuery, + latencyAggregationType, + serviceName, + setup, + transactionType, + searchAggregatedTransactions, + start, + end, + }); + }, +}); + +export const serviceInstancesComparisonStatisticsRoute = createRoute({ + endpoint: + 'GET /api/apm/services/{serviceName}/service_overview_instances/comparison_statistics', + params: t.type({ + path: t.type({ + serviceName: t.string, + }), + query: t.intersection([ + t.type({ + latencyAggregationType: latencyAggregationTypeRt, + transactionType: t.string, + serviceNodeIds: jsonRt.pipe(t.array(t.string)), numBuckets: toNumberRt, }), environmentRt, kueryRt, rangeRt, + comparisonRangeRt, ]), }), options: { tags: ['access:apm'] }, @@ -458,6 +507,9 @@ export const serviceInstancesRoute = createRoute({ environment, kuery, transactionType, + comparisonStart, + comparisonEnd, + serviceNodeIds, numBuckets, } = context.params.query; const latencyAggregationType = (context.params.query @@ -467,7 +519,7 @@ export const serviceInstancesRoute = createRoute({ setup ); - return getServiceInstances({ + return getServiceInstancesComparisonStatisticsPeriods({ environment, kuery, latencyAggregationType, @@ -476,6 +528,9 @@ export const serviceInstancesRoute = createRoute({ transactionType, searchAggregatedTransactions, numBuckets, + serviceNodeIds, + comparisonStart, + comparisonEnd, }); }, }); diff --git a/x-pack/plugins/data_enhanced/public/plugin.ts b/x-pack/plugins/data_enhanced/public/plugin.ts index 056135b34cf9f..439cae4f414f7 100644 --- a/x-pack/plugins/data_enhanced/public/plugin.ts +++ b/x-pack/plugins/data_enhanced/public/plugin.ts @@ -17,8 +17,6 @@ import { BfetchPublicSetup } from '../../../../src/plugins/bfetch/public'; import { ManagementSetup } from '../../../../src/plugins/management/public'; import { SharePluginStart } from '../../../../src/plugins/share/public'; -import { setAutocompleteService } from './services'; -import { setupKqlQuerySuggestionProvider, KUERY_LANGUAGE_NAME } from './autocomplete'; import { EnhancedSearchInterceptor } from './search/search_interceptor'; import { registerSearchSessionsMgmt } from './search/sessions_mgmt'; import { toMountPoint } from '../../../../src/plugins/kibana_react/public'; @@ -52,11 +50,6 @@ export class DataEnhancedPlugin core: CoreSetup, { bfetch, data, management }: DataEnhancedSetupDependencies ) { - data.autocomplete.addQuerySuggestionProvider( - KUERY_LANGUAGE_NAME, - setupKqlQuerySuggestionProvider(core) - ); - this.enhancedSearchInterceptor = new EnhancedSearchInterceptor({ bfetch, toasts: core.notifications.toasts, @@ -83,8 +76,6 @@ export class DataEnhancedPlugin } public start(core: CoreStart, plugins: DataEnhancedStartDependencies) { - setAutocompleteService(plugins.data.autocomplete); - if (this.config.search.sessions.enabled) { core.chrome.setBreadcrumbsAppendExtension({ content: toMountPoint( diff --git a/x-pack/plugins/data_enhanced/public/services.ts b/x-pack/plugins/data_enhanced/public/services.ts deleted file mode 100644 index 5eef7e391bdd4..0000000000000 --- a/x-pack/plugins/data_enhanced/public/services.ts +++ /dev/null @@ -1,13 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { createGetterSetter } from '../../../../src/plugins/kibana_utils/public'; -import { DataPublicPluginStart } from '../../../../src/plugins/data/public'; - -export const [getAutocompleteService, setAutocompleteService] = createGetterSetter< - DataPublicPluginStart['autocomplete'] ->('Autocomplete'); diff --git a/x-pack/plugins/data_enhanced/tsconfig.json b/x-pack/plugins/data_enhanced/tsconfig.json index 216c115545a45..047b9b06516ba 100644 --- a/x-pack/plugins/data_enhanced/tsconfig.json +++ b/x-pack/plugins/data_enhanced/tsconfig.json @@ -13,8 +13,6 @@ "server/**/*", "config.ts", "../../../typings/**/*", - // have to declare *.json explicitly due to https://github.com/microsoft/TypeScript/issues/25636 - "public/autocomplete/providers/kql_query_suggestion/__fixtures__/*.json", "common/search/test_data/*.json" ], "references": [ diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/analytics_table.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/analytics_table.test.tsx index a0b0e4402c1e4..624cc57e1eb22 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/analytics_table.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/analytics_table.test.tsx @@ -12,7 +12,7 @@ import React from 'react'; import { EuiBasicTable, EuiBadge, EuiEmptyPrompt } from '@elastic/eui'; -import { runActionColumnTests } from './shared_columns_tests'; +import { runActionColumnTests } from './test_helpers/shared_columns_tests'; import { AnalyticsTable } from './'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/recent_queries_table.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/recent_queries_table.test.tsx index 0670624492db5..6021363183098 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/recent_queries_table.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/recent_queries_table.test.tsx @@ -12,7 +12,7 @@ import React from 'react'; import { EuiBasicTable, EuiBadge, EuiEmptyPrompt } from '@elastic/eui'; -import { runActionColumnTests } from './shared_columns_tests'; +import { runActionColumnTests } from './test_helpers/shared_columns_tests'; import { RecentQueriesTable } from './'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/shared_columns_tests.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/test_helpers/shared_columns_tests.tsx similarity index 96% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/shared_columns_tests.tsx rename to x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/test_helpers/shared_columns_tests.tsx index cb78a6585e43c..95af7b52487d4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/shared_columns_tests.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/test_helpers/shared_columns_tests.tsx @@ -9,8 +9,8 @@ import { mockHttpValues, mockKibanaValues, mockFlashMessageHelpers, -} from '../../../../../__mocks__'; -import '../../../../__mocks__/engine_logic.mock'; +} from '../../../../../../__mocks__'; +import '../../../../../__mocks__/engine_logic.mock'; import { ReactWrapper } from 'enzyme'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx index fc411c3dff866..72cbe5bdd898c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx @@ -11,7 +11,6 @@ import { useActions, useValues } from 'kea'; import { EuiPageHeader, - EuiPageHeaderSection, EuiTitle, EuiPageContentBody, EuiPanel, @@ -55,13 +54,7 @@ export const Credentials: React.FC = () => { return ( <> - - - -

{CREDENTIALS_TITLE}

- - - + {shouldShowCredentialsForm && } diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.test.tsx index d06144023e170..e680579f7b0b7 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { shallow, ReactWrapper } from 'enzyme'; -import { EuiBasicTable, EuiEmptyPrompt } from '@elastic/eui'; +import { EuiPageHeader, EuiBasicTable, EuiEmptyPrompt } from '@elastic/eui'; import { Loading } from '../../../../shared/loading'; @@ -64,7 +64,7 @@ describe('Curations', () => { it('renders', () => { const wrapper = shallow(); - expect(wrapper.find('h1').text()).toEqual('Curated results'); + expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Curated results'); expect(wrapper.find(CurationsTable)).toHaveLength(1); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.tsx index fd0a36dfebec7..42b030328ce9a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.tsx @@ -11,9 +11,7 @@ import { useValues, useActions } from 'kea'; import { EuiPageHeader, - EuiPageHeaderSection, EuiPageContent, - EuiTitle, EuiBasicTable, EuiBasicTableColumn, EuiEmptyPrompt, @@ -47,18 +45,14 @@ export const Curations: React.FC = () => { return ( <> - - - -

{CURATIONS_OVERVIEW_TITLE}

- - - + {CREATE_NEW_CURATION_TITLE} - - - + , + ]} + /> diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.test.tsx index ba060b7497270..a33161918c7f5 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.test.tsx @@ -14,7 +14,7 @@ import { useParams } from 'react-router-dom'; import { shallow } from 'enzyme'; -import { EuiPageContent, EuiBasicTable } from '@elastic/eui'; +import { EuiPageHeader, EuiPageContent, EuiBasicTable } from '@elastic/eui'; import { Loading } from '../../../shared/loading'; import { ResultFieldValue } from '../result'; @@ -102,7 +102,8 @@ describe('DocumentDetail', () => { it('will delete the document when the delete button is pressed', () => { const wrapper = shallow(); - const button = wrapper.find('[data-test-subj="DeleteDocumentButton"]'); + const header = wrapper.find(EuiPageHeader).dive().children().dive(); + const button = header.find('[data-test-subj="DeleteDocumentButton"]'); button.simulate('click'); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.tsx index 8f80978c29002..0ad000d289d2c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.tsx @@ -13,8 +13,6 @@ import { useActions, useValues } from 'kea'; import { EuiButton, EuiPageHeader, - EuiPageHeaderSection, - EuiTitle, EuiPageContentBody, EuiPageContent, EuiBasicTable, @@ -79,13 +77,9 @@ export const DocumentDetail: React.FC = ({ engineBreadcrumb }) => { return ( <> - - - -

{DOCUMENT_DETAIL_TITLE(documentTitle)}

- - - + = ({ engineBreadcrumb }) => { {i18n.translate('xpack.enterpriseSearch.appSearch.documentDetail.deleteButton', { defaultMessage: 'Delete', })} - - - + , + ]} + /> diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.test.tsx index ace76ae55c046..ed4773e257a2b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.test.tsx @@ -9,7 +9,9 @@ import { setMockValues } from '../../../__mocks__/kea.mock'; import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, ShallowWrapper } from 'enzyme'; + +import { EuiPageHeader } from '@elastic/eui'; import { DocumentCreationButton } from './document_creation_button'; import { SearchExperience } from './search_experience'; @@ -32,46 +34,61 @@ describe('Documents', () => { expect(wrapper.find(SearchExperience).exists()).toBe(true); }); - it('renders a DocumentCreationButton if the user can manage engine documents', () => { - setMockValues({ - ...values, - myRole: { canManageEngineDocuments: true }, + describe('DocumentCreationButton', () => { + const getHeader = (wrapper: ShallowWrapper) => + wrapper.find(EuiPageHeader).dive().children().dive(); + + it('renders a DocumentCreationButton if the user can manage engine documents', () => { + setMockValues({ + ...values, + myRole: { canManageEngineDocuments: true }, + }); + + const wrapper = shallow(); + expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(true); }); - const wrapper = shallow(); - expect(wrapper.find(DocumentCreationButton).exists()).toBe(true); - }); + it('does not render a DocumentCreationButton if the user cannot manage engine documents', () => { + setMockValues({ + ...values, + myRole: { canManageEngineDocuments: false }, + }); - describe('Meta Engines', () => { - it('renders a Meta Engines message if this is a meta engine', () => { + const wrapper = shallow(); + expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(false); + }); + + it('does not render a DocumentCreationButton for meta engines even if the user can manage engine documents', () => { setMockValues({ ...values, + myRole: { canManageEngineDocuments: true }, isMetaEngine: true, }); const wrapper = shallow(); - expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(true); + expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(false); }); + }); - it('does not render a Meta Engines message if this is not a meta engine', () => { + describe('Meta Engines', () => { + it('renders a Meta Engines message if this is a meta engine', () => { setMockValues({ ...values, - isMetaEngine: false, + isMetaEngine: true, }); const wrapper = shallow(); - expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(false); + expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(true); }); - it('does not render a DocumentCreationButton even if the user can manage engine documents', () => { + it('does not render a Meta Engines message if this is not a meta engine', () => { setMockValues({ ...values, - myRole: { canManageEngineDocuments: true }, - isMetaEngine: true, + isMetaEngine: false, }); const wrapper = shallow(); - expect(wrapper.find(DocumentCreationButton).exists()).toBe(false); + expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(false); }); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx index 8c3ae7fd24f6d..84fcab53e9604 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { useValues } from 'kea'; -import { EuiPageHeader, EuiPageHeaderSection, EuiTitle, EuiCallOut, EuiSpacer } from '@elastic/eui'; +import { EuiPageHeader, EuiCallOut, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FlashMessages } from '../../../shared/flash_messages'; @@ -33,18 +33,14 @@ export const Documents: React.FC = ({ engineBreadcrumb }) => { return ( <> - - - -

{DOCUMENTS_TITLE}

- - - {myRole.canManageEngineDocuments && !isMetaEngine && ( - - - - )} - + ] + : undefined + } + /> {isMetaEngine && ( <> diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx index 497c00d1f9144..bab31d0fccc40 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx @@ -18,9 +18,7 @@ import { EuiSelect, EuiPageBody, EuiPageHeader, - EuiPageHeaderSection, EuiSpacer, - EuiText, EuiTitle, EuiButton, EuiPanel, @@ -49,13 +47,7 @@ export const EngineCreation: React.FC = () => { return (
- - - -

{ENGINE_CREATION_TITLE}

- - - + @@ -68,7 +60,7 @@ export const EngineCreation: React.FC = () => { }} > - {ENGINE_CREATION_FORM_TITLE} +

{ENGINE_CREATION_FORM_TITLE}

 diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx index 9066283229a04..ea47dc8956ddd 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; -import { EuiButton } from '@elastic/eui'; +import { EuiPageHeader, EuiButton } from '@elastic/eui'; import { docLinks } from '../../../shared/doc_links'; @@ -25,11 +25,12 @@ describe('EmptyEngineOverview', () => { }); it('renders', () => { - expect(wrapper.find('h1').text()).toEqual('Engine setup'); + expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Engine setup'); }); it('renders a documentation link', () => { - expect(wrapper.find(EuiButton).prop('href')).toEqual(`${docLinks.appSearchBase}/index.html`); + const header = wrapper.find(EuiPageHeader).dive().children().dive(); + expect(header.find(EuiButton).prop('href')).toEqual(`${docLinks.appSearchBase}/index.html`); }); it('renders document creation components', () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx index f505f08a3531a..d48664febb5f7 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx @@ -7,13 +7,7 @@ import React from 'react'; -import { - EuiPageHeader, - EuiPageHeaderSection, - EuiPageContentBody, - EuiTitle, - EuiButton, -} from '@elastic/eui'; +import { EuiPageHeader, EuiPageContentBody, EuiButton } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FlashMessages } from '../../../shared/flash_messages'; @@ -23,25 +17,20 @@ import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_cre export const EmptyEngineOverview: React.FC = () => { return ( <> - - - -

- {i18n.translate('xpack.enterpriseSearch.appSearch.engine.overview.empty.heading', { - defaultMessage: 'Engine setup', - })} -

- - - + {i18n.translate( 'xpack.enterpriseSearch.appSearch.engine.overview.empty.headingAction', { defaultMessage: 'View documentation' } )} - - - + , + ]} + /> diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx index 638c8b0da87ce..d51bef3b29761 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx @@ -11,13 +11,15 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { EuiPageHeader } from '@elastic/eui'; + import { UnavailablePrompt, TotalStats, TotalCharts, RecentApiLogs } from './components'; import { EngineOverviewMetrics } from './engine_overview_metrics'; describe('EngineOverviewMetrics', () => { it('renders', () => { const wrapper = shallow(); - expect(wrapper.find('h1').text()).toEqual('Engine overview'); + expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Engine overview'); }); it('renders an unavailable prompt if engine data is still indexing', () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.tsx index c60cf70f435c5..8d376ff1971a3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_metrics.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { useValues } from 'kea'; -import { EuiFlexGroup, EuiFlexItem, EuiPageHeader, EuiTitle, EuiSpacer } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiPageHeader, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FlashMessages } from '../../../shared/flash_messages'; @@ -23,15 +23,11 @@ export const EngineOverviewMetrics: React.FC = () => { return ( <> - - -

- {i18n.translate('xpack.enterpriseSearch.appSearch.engine.overview.heading', { - defaultMessage: 'Engine overview', - })} -

- - + {apiLogsUnavailable ? ( diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx index 5ccd2c552ef02..3ffe2f3d43a77 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import '../../../../__mocks__/kea.mock'; import '../../../../__mocks__/enterprise_search_url.mock'; import { mockTelemetryActions } from '../../../../__mocks__'; @@ -16,13 +15,16 @@ import { shallow } from 'enzyme'; import { EnginesOverviewHeader } from './'; describe('EnginesOverviewHeader', () => { + const wrapper = shallow() + .dive() + .children() + .dive(); + it('renders', () => { - const wrapper = shallow(); - expect(wrapper.find('h1')).toHaveLength(1); + expect(wrapper.find('h1').text()).toEqual('Engines overview'); }); it('renders a launch app search button that sends telemetry on click', () => { - const wrapper = shallow(); const button = wrapper.find('[data-test-subj="launchButton"]'); expect(button.prop('href')).toBe('http://localhost:3002/as'); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx index 290270c08258c..fb3b771850a31 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx @@ -9,15 +9,8 @@ import React from 'react'; import { useActions } from 'kea'; -import { - EuiPageHeader, - EuiPageHeaderSection, - EuiTitle, - EuiButton, - EuiButtonProps, - EuiLinkProps, -} from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiPageHeader, EuiButton } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { getAppSearchUrl } from '../../../../shared/enterprise_search_url'; import { TelemetryLogic } from '../../../../shared/telemetry'; @@ -25,39 +18,31 @@ import { TelemetryLogic } from '../../../../shared/telemetry'; export const EnginesOverviewHeader: React.FC = () => { const { sendAppSearchTelemetry } = useActions(TelemetryLogic); - const buttonProps = { - fill: true, - iconType: 'popout', - 'data-test-subj': 'launchButton', - href: getAppSearchUrl(), - target: '_blank', - onClick: () => - sendAppSearchTelemetry({ - action: 'clicked', - metric: 'header_launch_button', - }), - } as EuiButtonProps & EuiLinkProps; - return ( - - - -

- -

- - - - - - - - + + sendAppSearchTelemetry({ + action: 'clicked', + metric: 'header_launch_button', + }) + } + data-test-subj="launchButton" + > + {i18n.translate('xpack.enterpriseSearch.appSearch.productCta', { + defaultMessage: 'Launch App Search', + })} + , + ]} + /> ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx index 594584d9ba101..5e268cc0fd214 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx @@ -10,7 +10,6 @@ import React, { useState } from 'react'; import { EuiSpacer, EuiPageHeader, - EuiPageHeaderSection, EuiTitle, EuiPageContentBody, EuiPageContent, @@ -86,13 +85,7 @@ export const Library: React.FC = () => { return ( <> - - - -

Library

- - - + diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx index d701ee37a1658..a3dbf7259975b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx @@ -20,9 +20,7 @@ import { EuiFieldText, EuiPageContent, EuiPageHeader, - EuiPageHeaderSection, EuiSpacer, - EuiText, EuiTitle, EuiButton, } from '@elastic/eui'; @@ -78,15 +76,16 @@ export const MetaEngineCreation: React.FC = () => { return (
- - - -

{META_ENGINE_CREATION_TITLE}

- - {META_ENGINE_CREATION_FORM_META_ENGINE_DESCRIPTION} - {META_ENGINE_CREATION_FORM_DOCUMENTATION_DESCRIPTION} - - + + {META_ENGINE_CREATION_FORM_META_ENGINE_DESCRIPTION} +
+ {META_ENGINE_CREATION_FORM_DOCUMENTATION_DESCRIPTION} + + } + /> { }} > - {META_ENGINE_CREATION_FORM_TITLE} +

{META_ENGINE_CREATION_FORM_TITLE}

 @@ -140,14 +139,16 @@ export const MetaEngineCreation: React.FC = () => { }} /> - {selectedIndexedEngineNames.length > maxEnginesPerMetaEngine && ( - + <> + + + )} { return ( <> - - - -

{SETTINGS_TITLE}

- - - + diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.test.ts index 82fc00923202f..34e67acc870ee 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.test.ts +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.test.ts @@ -82,4 +82,14 @@ describe('AppLogic', () => { expect(AppLogic.values.account.canCreatePersonalSources).toEqual(true); }); }); + + describe('setOrgName', () => { + it('sets property', () => { + const NAME = 'new name'; + mount(DEFAULT_INITIAL_APP_DATA); + AppLogic.actions.setOrgName(NAME); + + expect(AppLogic.values.organization.name).toEqual(NAME); + }); + }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.ts index b81f538bd4709..26e1d7fbb93fd 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/app_logic.ts @@ -22,6 +22,7 @@ interface AppValues extends WorkplaceSearchInitialData { interface AppActions { initializeAppData(props: InitialAppData): InitialAppData; setContext(isOrganization: boolean): boolean; + setOrgName(name: string): string; setSourceRestriction(canCreatePersonalSources: boolean): boolean; } @@ -36,6 +37,7 @@ export const AppLogic = kea>({ isFederatedAuth, }), setContext: (isOrganization) => isOrganization, + setOrgName: (name: string) => name, setSourceRestriction: (canCreatePersonalSources: boolean) => canCreatePersonalSources, }, reducers: { @@ -61,6 +63,10 @@ export const AppLogic = kea>({ emptyOrg, { initializeAppData: (_, { workplaceSearch }) => workplaceSearch?.organization || emptyOrg, + setOrgName: (state, name) => ({ + ...state, + name, + }), }, ], account: [ diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.test.tsx index a7a788b48789a..2cd47f1c1b597 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.test.tsx @@ -9,13 +9,14 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { EuiButtonEmpty } from '@elastic/eui'; - import { externalUrl } from '../../../shared/enterprise_search_url'; +import { WORKPLACE_SEARCH_URL_PREFIX } from '../../constants'; import { WorkplaceSearchHeaderActions } from './'; describe('WorkplaceSearchHeaderActions', () => { + const ENT_SEARCH_URL = 'http://localhost:3002'; + it('does not render without an Enterprise Search URL set', () => { const wrapper = shallow(); @@ -23,22 +24,32 @@ describe('WorkplaceSearchHeaderActions', () => { }); it('renders a link to the personal dashboard', () => { - externalUrl.enterpriseSearchUrl = 'http://localhost:3002'; - + externalUrl.enterpriseSearchUrl = ENT_SEARCH_URL; const wrapper = shallow(); - expect(wrapper.find(EuiButtonEmpty).first().prop('href')).toEqual( - 'http://localhost:3002/ws/sources' + expect(wrapper.find('[data-test-subj="PersonalDashboardButton"]').prop('to')).toEqual( + '/p/sources' ); + expect(wrapper.find('[data-test-subj="PersonalDashboardMVPButton"]')).toHaveLength(0); }); it('renders a link to the search application', () => { - externalUrl.enterpriseSearchUrl = 'http://localhost:3002'; - + externalUrl.enterpriseSearchUrl = ENT_SEARCH_URL; const wrapper = shallow(); - expect(wrapper.find(EuiButtonEmpty).last().prop('href')).toEqual( + expect(wrapper.find('[data-test-subj="HeaderSearchButton"]').prop('href')).toEqual( 'http://localhost:3002/ws/search' ); }); + + it('renders an MVP link back to the legacy dashboard on the MVP page', () => { + window.history.pushState({}, 'Overview', WORKPLACE_SEARCH_URL_PREFIX); + externalUrl.enterpriseSearchUrl = ENT_SEARCH_URL; + const wrapper = shallow(); + + expect(wrapper.find('[data-test-subj="PersonalDashboardMVPButton"]').prop('href')).toEqual( + `${ENT_SEARCH_URL}/ws/sources` + ); + expect(wrapper.find('[data-test-subj="PersonalDashboardButton"]')).toHaveLength(0); + }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx index 95d7920ae0435..7d594ce66aea1 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx @@ -10,20 +10,46 @@ import React from 'react'; import { EuiButtonEmpty, EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { externalUrl, getWorkplaceSearchUrl } from '../../../shared/enterprise_search_url'; -import { NAV } from '../../constants'; +import { EuiButtonEmptyTo } from '../../../shared/react_router_helpers'; +import { NAV, WORKPLACE_SEARCH_URL_PREFIX } from '../../constants'; +import { PERSONAL_SOURCES_PATH } from '../../routes'; export const WorkplaceSearchHeaderActions: React.FC = () => { if (!externalUrl.enterpriseSearchUrl) return null; + const isMVP = window.location.pathname.endsWith(WORKPLACE_SEARCH_URL_PREFIX); + + const personalDashboardMVPButton = ( + + {NAV.PERSONAL_DASHBOARD} + + ); + + const personalDashboardButton = ( + + {NAV.PERSONAL_DASHBOARD} + + ); + return ( + {isMVP ? personalDashboardMVPButton : personalDashboardButton} - - {NAV.PERSONAL_DASHBOARD} - - - - + {NAV.SEARCH} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx index d9c2d70e78c08..d37af01287c46 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx @@ -47,8 +47,7 @@ describe('ContentSection', () => { /> ); - expect(wrapper.find(EuiSpacer).first().prop('size')).toEqual('s'); - expect(wrapper.find(EuiSpacer)).toHaveLength(2); + expect(wrapper.find(EuiSpacer)).toHaveLength(1); expect(wrapper.find('.header')).toHaveLength(1); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx index d9a4ed7eee8b8..f0b86e0cc925b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx @@ -30,7 +30,6 @@ export const ContentSection: React.FC = ({ description, action, headerChildren, - headerSpacer, testSubj, }) => (
@@ -38,10 +37,9 @@ export const ContentSection: React.FC = ({ <> {headerChildren} - {headerSpacer && } )} {children} - +
); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx index 2d9e5580c6f40..338eda0214ea2 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx @@ -18,7 +18,7 @@ import { IconType, } from '@elastic/eui'; -import { EuiButtonTo, EuiButtonEmptyTo } from '../../../shared/react_router_helpers'; +import { EuiButtonTo } from '../../../shared/react_router_helpers'; import { TelemetryLogic } from '../../../shared/telemetry'; interface OnboardingCardProps { @@ -49,15 +49,15 @@ export const OnboardingCard: React.FC = ({ }); const completeButton = actionPath ? ( - + {actionTitle} - + ) : ( {actionTitle} ); const incompleteButton = actionPath ? ( - + {actionTitle} ) : ( @@ -66,7 +66,7 @@ export const OnboardingCard: React.FC = ({ return ( - + { }); return ( - + - + @@ -158,16 +158,17 @@ export const OrgNameOnboarding: React.FC = () => { - - + diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx index 525035030b8cc..d1f0f6a030421 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { useValues } from 'kea'; -import { EuiFlexGrid } from '@elastic/eui'; +import { EuiFlexGrid, EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -35,45 +35,46 @@ export const OrganizationStats: React.FC = () => { defaultMessage="Usage statistics" /> } - headerSpacer="m" > - - + + + {!isFederatedAuth && ( + <> + + + )} - count={sourcesCount} - actionPath={SOURCES_PATH} - /> - {!isFederatedAuth && ( - <> - - - - )} - - + + + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx index 62b96442b9ba0..8bda7c2843b9e 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx @@ -41,7 +41,7 @@ export const RecentActivity: React.FC = () => { return ( - + {activityFeed.length > 0 ? ( <> {activityFeed.map((props: FeedActivity, index) => ( diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx index 136901f840b89..9b134b511b34e 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx @@ -24,6 +24,7 @@ export const StatisticCard: React.FC = ({ title, count = 0, layout="horizontal" title={title} titleSize="xs" + display="plain" description={ {count} @@ -36,6 +37,7 @@ export const StatisticCard: React.FC = ({ title, count = 0, layout="horizontal" title={title} titleSize="xs" + display="plain" description={ {count} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_logic.ts index ad552ff8f5a41..e07adbde15939 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_logic.ts @@ -17,6 +17,7 @@ import { } from '../../../shared/flash_messages'; import { HttpLogic } from '../../../shared/http'; import { KibanaLogic } from '../../../shared/kibana'; +import { AppLogic } from '../../app_logic'; import { ORG_UPDATED_MESSAGE, OAUTH_APP_UPDATED_MESSAGE } from '../../constants'; import { ORG_SETTINGS_CONNECTORS_PATH } from '../../routes'; import { Connector } from '../../types'; @@ -150,6 +151,7 @@ export const SettingsLogic = kea> const response = await http.put(route, { body }); actions.setUpdatedName(response); setSuccessMessage(ORG_UPDATED_MESSAGE); + AppLogic.actions.setOrgName(name); } catch (e) { flashAPIErrors(e); } diff --git a/x-pack/plugins/fleet/common/services/is_agent_upgradeable.ts b/x-pack/plugins/fleet/common/services/is_agent_upgradeable.ts index 0350c47816f6d..bb117dd5c5071 100644 --- a/x-pack/plugins/fleet/common/services/is_agent_upgradeable.ts +++ b/x-pack/plugins/fleet/common/services/is_agent_upgradeable.ts @@ -17,13 +17,19 @@ export function isAgentUpgradeable(agent: Agent, kibanaVersion: string) { } else { return false; } - if (agent.unenrollment_started_at || agent.unenrolled_at) return false; - if (!agent.local_metadata.elastic.agent.upgradeable) return false; + if (agent.unenrollment_started_at || agent.unenrolled_at) { + return false; + } + if (!agent.local_metadata.elastic.agent.upgradeable) { + return false; + } // make sure versions are only the number before comparison const agentVersionNumber = semverCoerce(agentVersion); if (!agentVersionNumber) throw new Error('agent version is invalid'); const kibanaVersionNumber = semverCoerce(kibanaVersion); if (!kibanaVersionNumber) throw new Error('kibana version is invalid'); - return semverLt(agentVersionNumber, kibanaVersionNumber); + const isAgentLessThanKibana = semverLt(agentVersionNumber, kibanaVersionNumber); + + return isAgentLessThanKibana; } diff --git a/x-pack/plugins/fleet/common/types/index.ts b/x-pack/plugins/fleet/common/types/index.ts index 5c385f938a69e..1984de79a6357 100644 --- a/x-pack/plugins/fleet/common/types/index.ts +++ b/x-pack/plugins/fleet/common/types/index.ts @@ -26,6 +26,9 @@ export interface FleetConfigType { host?: string; ca_sha256?: string; }; + fleet_server?: { + hosts?: string[]; + }; agentPolicyRolloutRateLimitIntervalMs: number; agentPolicyRolloutRateLimitRequestPerInterval: number; }; diff --git a/x-pack/plugins/fleet/common/types/models/agent_policy.ts b/x-pack/plugins/fleet/common/types/models/agent_policy.ts index 7e5b799e484d6..6e984b2d0b3da 100644 --- a/x-pack/plugins/fleet/common/types/models/agent_policy.ts +++ b/x-pack/plugins/fleet/common/types/models/agent_policy.ts @@ -66,9 +66,13 @@ export interface FullAgentPolicy { [key: string]: any; }; }; - fleet?: { - kibana: FullAgentPolicyKibanaConfig; - }; + fleet?: + | { + hosts: string[]; + } + | { + kibana: FullAgentPolicyKibanaConfig; + }; inputs: FullAgentPolicyInput[]; revision?: number; agent?: { diff --git a/x-pack/plugins/fleet/common/types/models/settings.ts b/x-pack/plugins/fleet/common/types/models/settings.ts index bb345a67bec41..d6932f9a4d83f 100644 --- a/x-pack/plugins/fleet/common/types/models/settings.ts +++ b/x-pack/plugins/fleet/common/types/models/settings.ts @@ -8,9 +8,11 @@ import type { SavedObjectAttributes } from 'src/core/public'; export interface BaseSettings { + has_seen_add_data_notice?: boolean; + fleet_server_hosts: string[]; + // TODO remove as part of https://github.com/elastic/kibana/issues/94303 kibana_urls: string[]; kibana_ca_sha256?: string; - has_seen_add_data_notice?: boolean; } export interface Settings extends BaseSettings { diff --git a/x-pack/plugins/fleet/common/types/rest_spec/agent.ts b/x-pack/plugins/fleet/common/types/rest_spec/agent.ts index b654c513e0afb..4616e92925b3a 100644 --- a/x-pack/plugins/fleet/common/types/rest_spec/agent.ts +++ b/x-pack/plugins/fleet/common/types/rest_spec/agent.ts @@ -121,8 +121,13 @@ export interface PostBulkAgentUnenrollRequest { }; } -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface PostBulkAgentUnenrollResponse {} +export type PostBulkAgentUnenrollResponse = Record< + Agent['id'], + { + success: boolean; + error?: string; + } +>; export interface PostAgentUpgradeRequest { params: { @@ -141,8 +146,14 @@ export interface PostBulkAgentUpgradeRequest { version: string; }; } -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface PostBulkAgentUpgradeResponse {} + +export type PostBulkAgentUpgradeResponse = Record< + Agent['id'], + { + success: boolean; + error?: string; + } +>; // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface PostAgentUpgradeResponse {} diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx index 6f1adfc8cf9c1..a46e49233cc99 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx @@ -13,6 +13,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import type { EnrollmentAPIKey } from '../../../types'; interface Props { + fleetServerHosts: string[]; kibanaUrl: string; apiKey: EnrollmentAPIKey; kibanaCASha256?: string; @@ -23,14 +24,32 @@ const CommandCode = styled.pre({ overflow: 'scroll', }); +function getfleetServerHostsEnrollArgs(apiKey: EnrollmentAPIKey, fleetServerHosts: string[]) { + return `--url=${fleetServerHosts[0]} --enrollment-token=${apiKey.api_key}`; +} + +function getKibanaUrlEnrollArgs( + apiKey: EnrollmentAPIKey, + kibanaUrl: string, + kibanaCASha256?: string +) { + return `--kibana-url=${kibanaUrl} --enrollment-token=${apiKey.api_key}${ + kibanaCASha256 ? ` --ca_sha256=${kibanaCASha256}` : '' + }`; +} + export const ManualInstructions: React.FunctionComponent = ({ kibanaUrl, apiKey, kibanaCASha256, + fleetServerHosts, }) => { - const enrollArgs = `--kibana-url=${kibanaUrl} --enrollment-token=${apiKey.api_key}${ - kibanaCASha256 ? ` --ca_sha256=${kibanaCASha256}` : '' - }`; + const fleetServerHostsNotEmpty = fleetServerHosts.length > 0; + + const enrollArgs = fleetServerHostsNotEmpty + ? getfleetServerHostsEnrollArgs(apiKey, fleetServerHosts) + : // TODO remove as part of https://github.com/elastic/kibana/issues/94303 + getKibanaUrlEnrollArgs(apiKey, kibanaUrl, kibanaCASha256); const linuxMacCommand = `./elastic-agent install -f ${enrollArgs}`; diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout.tsx deleted file mode 100644 index 146f40cd75d49..0000000000000 --- a/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout.tsx +++ /dev/null @@ -1,272 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React, { useEffect } from 'react'; -import { i18n } from '@kbn/i18n'; -import { - EuiFlyout, - EuiFlyoutBody, - EuiFlyoutHeader, - EuiTitle, - EuiFlexGroup, - EuiFlexItem, - EuiButtonEmpty, - EuiSpacer, - EuiButton, - EuiFlyoutFooter, - EuiForm, - EuiFormRow, - EuiComboBox, - EuiCodeEditor, -} from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiText } from '@elastic/eui'; -import { safeLoad } from 'js-yaml'; - -import { - useComboInput, - useStartServices, - useGetSettings, - useInput, - sendPutSettings, -} from '../hooks'; -import { useGetOutputs, sendPutOutput } from '../hooks/use_request/outputs'; -import { isDiffPathProtocol } from '../../../../common/'; - -const URL_REGEX = /^(https?):\/\/[^\s$.?#].[^\s]*$/gm; - -interface Props { - onClose: () => void; -} - -function useSettingsForm(outputId: string | undefined, onSuccess: () => void) { - const [isLoading, setIsloading] = React.useState(false); - const { notifications } = useStartServices(); - const kibanaUrlsInput = useComboInput([], (value) => { - if (value.length === 0) { - return [ - i18n.translate('xpack.fleet.settings.kibanaUrlEmptyError', { - defaultMessage: 'At least one URL is required', - }), - ]; - } - if (value.some((v) => !v.match(URL_REGEX))) { - return [ - i18n.translate('xpack.fleet.settings.kibanaUrlError', { - defaultMessage: 'Invalid URL', - }), - ]; - } - if (isDiffPathProtocol(value)) { - return [ - i18n.translate('xpack.fleet.settings.kibanaUrlDifferentPathOrProtocolError', { - defaultMessage: 'Protocol and path must be the same for each URL', - }), - ]; - } - }); - const elasticsearchUrlInput = useComboInput([], (value) => { - if (value.some((v) => !v.match(URL_REGEX))) { - return [ - i18n.translate('xpack.fleet.settings.elasticHostError', { - defaultMessage: 'Invalid URL', - }), - ]; - } - }); - - const additionalYamlConfigInput = useInput('', (value) => { - try { - safeLoad(value); - return; - } catch (error) { - return [ - i18n.translate('xpack.fleet.settings.invalidYamlFormatErrorMessage', { - defaultMessage: 'Invalid YAML: {reason}', - values: { reason: error.message }, - }), - ]; - } - }); - return { - isLoading, - onSubmit: async () => { - if ( - !kibanaUrlsInput.validate() || - !elasticsearchUrlInput.validate() || - !additionalYamlConfigInput.validate() - ) { - return; - } - - try { - setIsloading(true); - if (!outputId) { - throw new Error('Unable to load outputs'); - } - const outputResponse = await sendPutOutput(outputId, { - hosts: elasticsearchUrlInput.value, - config_yaml: additionalYamlConfigInput.value, - }); - if (outputResponse.error) { - throw outputResponse.error; - } - const settingsResponse = await sendPutSettings({ - kibana_urls: kibanaUrlsInput.value, - }); - if (settingsResponse.error) { - throw settingsResponse.error; - } - notifications.toasts.addSuccess( - i18n.translate('xpack.fleet.settings.success.message', { - defaultMessage: 'Settings saved', - }) - ); - setIsloading(false); - onSuccess(); - } catch (error) { - setIsloading(false); - notifications.toasts.addError(error, { - title: 'Error', - }); - } - }, - inputs: { - kibanaUrls: kibanaUrlsInput, - elasticsearchUrl: elasticsearchUrlInput, - additionalYamlConfig: additionalYamlConfigInput, - }, - }; -} - -export const SettingFlyout: React.FunctionComponent = ({ onClose }) => { - const settingsRequest = useGetSettings(); - const settings = settingsRequest?.data?.item; - const outputsRequest = useGetOutputs(); - const output = outputsRequest.data?.items?.[0]; - const { inputs, onSubmit, isLoading } = useSettingsForm(output?.id, onClose); - - useEffect(() => { - if (output) { - inputs.elasticsearchUrl.setValue(output.hosts || []); - inputs.additionalYamlConfig.setValue( - output.config_yaml || - `# YAML settings here will be added to the Elasticsearch output section of each policy` - ); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [output]); - - useEffect(() => { - if (settings) { - inputs.kibanaUrls.setValue(settings.kibana_urls); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [settings]); - - const body = ( - - -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - ); - - return ( - - - -

- -

- - - {body} - - - - - - - - - - - - - - - - ); -}; diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout/confirm_modal.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout/confirm_modal.tsx new file mode 100644 index 0000000000000..8bef32916452f --- /dev/null +++ b/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout/confirm_modal.tsx @@ -0,0 +1,188 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { + EuiModal, + EuiModalHeader, + EuiModalHeaderTitle, + EuiModalFooter, + EuiModalBody, + EuiCallOut, + EuiButton, + EuiButtonEmpty, + EuiBasicTable, + EuiText, + EuiSpacer, +} from '@elastic/eui'; +import type { EuiBasicTableProps } from '@elastic/eui'; + +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + +export interface SettingsConfirmModalProps { + changes: Array<{ + type: 'elasticsearch' | 'fleet_server'; + direction: 'removed' | 'added'; + urls: string[]; + }>; + onConfirm: () => void; + onClose: () => void; +} + +type Change = SettingsConfirmModalProps['changes'][0]; + +const TABLE_COLUMNS: EuiBasicTableProps['columns'] = [ + { + name: i18n.translate('xpack.fleet.settingsConfirmModal.fieldLabel', { + defaultMessage: 'Field', + }), + field: 'label', + render: (_, item) => getLabel(item), + width: '180px', + }, + { + field: 'urls', + name: i18n.translate('xpack.fleet.settingsConfirmModal.valueLabel', { + defaultMessage: 'Value', + }), + render: (_, item) => { + return ( + + {item.urls.map((url) => ( +
{url}
+ ))} + + ); + }, + }, +]; + +function getLabel(change: Change) { + if (change.type === 'elasticsearch' && change.direction === 'removed') { + return i18n.translate('xpack.fleet.settingsConfirmModal.elasticsearchRemovedLabel', { + defaultMessage: 'Elasticsearch hosts (old)', + }); + } + + if (change.type === 'elasticsearch' && change.direction === 'added') { + return i18n.translate('xpack.fleet.settingsConfirmModal.elasticsearchAddedLabel', { + defaultMessage: 'Elasticsearch hosts (new)', + }); + } + + if (change.type === 'fleet_server' && change.direction === 'removed') { + return i18n.translate('xpack.fleet.settingsConfirmModal.fleetServerRemovedLabel', { + defaultMessage: 'Fleet Server hosts (old)', + }); + } + + if (change.type === 'fleet_server' && change.direction === 'added') { + return i18n.translate('xpack.fleet.settingsConfirmModal.fleetServerAddedLabel', { + defaultMessage: 'Fleet Server hosts (new)', + }); + } + + return i18n.translate('xpack.fleet.settingsConfirmModal.defaultChangeLabel', { + defaultMessage: 'Unknown setting', + }); +} + +export const SettingsConfirmModal = React.memo( + ({ changes, onConfirm, onClose }) => { + const hasESChanges = changes.some((change) => change.type === 'elasticsearch'); + const hasFleetServerChanges = changes.some((change) => change.type === 'fleet_server'); + + return ( + + + + + + + + + + } + color="warning" + iconType="alert" + > + + {hasFleetServerChanges && ( +

+ + + + ), + }} + /> +

+ )} + + {hasESChanges && ( +

+ + + + ), + }} + /> +

+ )} + + + + {changes.length > 0 && ( + <> + + + + )} + + + + + + + + + + + + ); + } +); diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout/index.tsx new file mode 100644 index 0000000000000..faf8707f2efc1 --- /dev/null +++ b/x-pack/plugins/fleet/public/applications/fleet/components/settings_flyout/index.tsx @@ -0,0 +1,439 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useEffect, useCallback } from 'react'; +import { i18n } from '@kbn/i18n'; +import { + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiSpacer, + EuiButton, + EuiFlyoutFooter, + EuiForm, + EuiFormRow, + EuiComboBox, + EuiCode, + EuiCodeEditor, + EuiLink, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiText } from '@elastic/eui'; +import { safeLoad } from 'js-yaml'; + +import { + useComboInput, + useStartServices, + useGetSettings, + useInput, + sendPutSettings, +} from '../../hooks'; +import { useGetOutputs, sendPutOutput } from '../../hooks/use_request/outputs'; +import { isDiffPathProtocol } from '../../../../../common/'; + +import { SettingsConfirmModal } from './confirm_modal'; +import type { SettingsConfirmModalProps } from './confirm_modal'; + +const URL_REGEX = /^(https?):\/\/[^\s$.?#].[^\s]*$/gm; + +interface Props { + onClose: () => void; +} + +function isSameArrayValue(arrayA: string[] = [], arrayB: string[] = []) { + return arrayA.length === arrayB.length && arrayA.every((val, index) => val === arrayB[index]); +} + +function useSettingsForm(outputId: string | undefined, onSuccess: () => void) { + const [isLoading, setIsloading] = React.useState(false); + const { notifications } = useStartServices(); + const kibanaUrlsInput = useComboInput([], (value) => { + if (value.length === 0) { + return [ + i18n.translate('xpack.fleet.settings.kibanaUrlEmptyError', { + defaultMessage: 'At least one URL is required', + }), + ]; + } + if (value.some((v) => !v.match(URL_REGEX))) { + return [ + i18n.translate('xpack.fleet.settings.kibanaUrlError', { + defaultMessage: 'Invalid URL', + }), + ]; + } + if (isDiffPathProtocol(value)) { + return [ + i18n.translate('xpack.fleet.settings.kibanaUrlDifferentPathOrProtocolError', { + defaultMessage: 'Protocol and path must be the same for each URL', + }), + ]; + } + }); + const fleetServerHostsInput = useComboInput([], (value) => { + // TODO enable as part of https://github.com/elastic/kibana/issues/94303 + // if (value.length === 0) { + // return [ + // i18n.translate('xpack.fleet.settings.fleetServerHostsEmptyError', { + // defaultMessage: 'At least one URL is required', + // }), + // ]; + // } + if (value.some((v) => !v.match(URL_REGEX))) { + return [ + i18n.translate('xpack.fleet.settings.fleetServerHostsError', { + defaultMessage: 'Invalid URL', + }), + ]; + } + if (value.length && isDiffPathProtocol(value)) { + return [ + i18n.translate('xpack.fleet.settings.fleetServerHostsDifferentPathOrProtocolError', { + defaultMessage: 'Protocol and path must be the same for each URL', + }), + ]; + } + }); + + const elasticsearchUrlInput = useComboInput([], (value) => { + if (value.some((v) => !v.match(URL_REGEX))) { + return [ + i18n.translate('xpack.fleet.settings.elasticHostError', { + defaultMessage: 'Invalid URL', + }), + ]; + } + }); + + const additionalYamlConfigInput = useInput('', (value) => { + try { + safeLoad(value); + return; + } catch (error) { + return [ + i18n.translate('xpack.fleet.settings.invalidYamlFormatErrorMessage', { + defaultMessage: 'Invalid YAML: {reason}', + values: { reason: error.message }, + }), + ]; + } + }); + + const validate = useCallback(() => { + if ( + !kibanaUrlsInput.validate() || + !fleetServerHostsInput.validate() || + !elasticsearchUrlInput.validate() || + !additionalYamlConfigInput.validate() + ) { + return false; + } + + return true; + }, [kibanaUrlsInput, fleetServerHostsInput, elasticsearchUrlInput, additionalYamlConfigInput]); + + return { + isLoading, + validate, + submit: async () => { + try { + setIsloading(true); + if (!outputId) { + throw new Error('Unable to load outputs'); + } + const outputResponse = await sendPutOutput(outputId, { + hosts: elasticsearchUrlInput.value, + config_yaml: additionalYamlConfigInput.value, + }); + if (outputResponse.error) { + throw outputResponse.error; + } + const settingsResponse = await sendPutSettings({ + kibana_urls: kibanaUrlsInput.value, + fleet_server_hosts: fleetServerHostsInput.value, + }); + if (settingsResponse.error) { + throw settingsResponse.error; + } + notifications.toasts.addSuccess( + i18n.translate('xpack.fleet.settings.success.message', { + defaultMessage: 'Settings saved', + }) + ); + setIsloading(false); + onSuccess(); + } catch (error) { + setIsloading(false); + notifications.toasts.addError(error, { + title: 'Error', + }); + } + }, + inputs: { + fleetServerHosts: fleetServerHostsInput, + kibanaUrls: kibanaUrlsInput, + elasticsearchUrl: elasticsearchUrlInput, + additionalYamlConfig: additionalYamlConfigInput, + }, + }; +} + +export const SettingFlyout: React.FunctionComponent = ({ onClose }) => { + const settingsRequest = useGetSettings(); + const settings = settingsRequest?.data?.item; + const outputsRequest = useGetOutputs(); + const output = outputsRequest.data?.items?.[0]; + const { inputs, submit, validate, isLoading } = useSettingsForm(output?.id, onClose); + + const [isConfirmModalVisible, setConfirmModalVisible] = React.useState(false); + + const onSubmit = useCallback(() => { + if (validate()) { + setConfirmModalVisible(true); + } + }, [validate, setConfirmModalVisible]); + + const onConfirm = useCallback(() => { + setConfirmModalVisible(false); + submit(); + }, [submit]); + + const onConfirmModalClose = useCallback(() => { + setConfirmModalVisible(false); + }, [setConfirmModalVisible]); + + useEffect(() => { + if (output) { + inputs.elasticsearchUrl.setValue(output.hosts || []); + inputs.additionalYamlConfig.setValue(output.config_yaml || ''); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [output]); + + useEffect(() => { + if (settings) { + inputs.kibanaUrls.setValue([...settings.kibana_urls]); + inputs.fleetServerHosts.setValue([...settings.fleet_server_hosts]); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [settings]); + + const isUpdated = React.useMemo(() => { + if (!settings || !output) { + return false; + } + return ( + !isSameArrayValue(settings.kibana_urls, inputs.kibanaUrls.value) || + !isSameArrayValue(settings.fleet_server_hosts, inputs.fleetServerHosts.value) || + !isSameArrayValue(output.hosts, inputs.elasticsearchUrl.value) || + (output.config_yaml || '') !== inputs.additionalYamlConfig.value + ); + }, [settings, inputs, output]); + + const changes = React.useMemo(() => { + if (!settings || !output || !isConfirmModalVisible) { + return []; + } + + const tmpChanges: SettingsConfirmModalProps['changes'] = []; + if (!isSameArrayValue(output.hosts, inputs.elasticsearchUrl.value)) { + tmpChanges.push( + { + type: 'elasticsearch', + direction: 'removed', + urls: output.hosts || [], + }, + { + type: 'elasticsearch', + direction: 'added', + urls: inputs.elasticsearchUrl.value, + } + ); + } + + if (!isSameArrayValue(settings.fleet_server_hosts, inputs.fleetServerHosts.value)) { + tmpChanges.push( + { + type: 'fleet_server', + direction: 'removed', + urls: settings.fleet_server_hosts, + }, + { + type: 'fleet_server', + direction: 'added', + urls: inputs.fleetServerHosts.value, + } + ); + } + + return tmpChanges; + }, [settings, inputs, output, isConfirmModalVisible]); + + const body = settings && ( + + +

+ +

+ + + + outputs, + }} + /> + + + + + + + ), + }} + /> + } + {...inputs.fleetServerHosts.formRowProps} + > + + + + + {/* // TODO remove as part of https://github.com/elastic/kibana/issues/94303 */} + + + + + + + + + + + + + ); + + return ( + <> + {isConfirmModalVisible && ( + + )} + + + +

+ +

+ + + {body} + + + + + + + + + + {isLoading ? ( + + ) : ( + + )} + + + + + + + ); +}; diff --git a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx index ba6367a861e9d..4a7e738ec540a 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx @@ -125,7 +125,7 @@ export const DefaultLayout: React.FunctionComponent = ({ setIsSettingsFlyoutOpen(true)}> diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx index 4925f60f19e26..0ca6b223b3492 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx @@ -56,6 +56,7 @@ export const ManagedInstructions = React.memo(({ agentPolicies }) => { apiKey={apiKey.data.item} kibanaUrl={kibanaUrl} kibanaCASha256={kibanaCASha256} + fleetServerHosts={settings.data?.item?.fleet_server_hosts || []} /> ), }, diff --git a/x-pack/plugins/fleet/server/index.ts b/x-pack/plugins/fleet/server/index.ts index 8bad868b813ac..0178b801f4d2f 100644 --- a/x-pack/plugins/fleet/server/index.ts +++ b/x-pack/plugins/fleet/server/index.ts @@ -65,6 +65,11 @@ export const config: PluginConfigDescriptor = { host: schema.maybe(schema.string()), ca_sha256: schema.maybe(schema.string()), }), + fleet_server: schema.maybe( + schema.object({ + hosts: schema.maybe(schema.arrayOf(schema.uri({ scheme: ['http', 'https'] }))), + }) + ), agentPolicyRolloutRateLimitIntervalMs: schema.number({ defaultValue: AGENT_POLICY_ROLLOUT_RATE_LIMIT_INTERVAL_MS, }), diff --git a/x-pack/plugins/fleet/server/routes/agent/unenroll_handler.ts b/x-pack/plugins/fleet/server/routes/agent/unenroll_handler.ts index 558a9a8afbb0b..1505955215515 100644 --- a/x-pack/plugins/fleet/server/routes/agent/unenroll_handler.ts +++ b/x-pack/plugins/fleet/server/routes/agent/unenroll_handler.ts @@ -60,11 +60,17 @@ export const postBulkAgentsUnenrollHandler: RequestHandler< : { kuery: request.body.agents }; try { - await AgentService.unenrollAgents(soClient, esClient, { + const results = await AgentService.unenrollAgents(soClient, esClient, { ...agentOptions, force: request.body?.force, }); - const body: PostBulkAgentUnenrollResponse = {}; + const body = results.items.reduce((acc, so) => { + acc[so.id] = { + success: !so.error, + error: so.error?.message, + }; + return acc; + }, {}); return response.ok({ body }); } catch (error) { diff --git a/x-pack/plugins/fleet/server/routes/agent/upgrade_handler.ts b/x-pack/plugins/fleet/server/routes/agent/upgrade_handler.ts index b8af265883091..52f62037f61e6 100644 --- a/x-pack/plugins/fleet/server/routes/agent/upgrade_handler.ts +++ b/x-pack/plugins/fleet/server/routes/agent/upgrade_handler.ts @@ -99,9 +99,15 @@ export const postBulkAgentsUpgradeHandler: RequestHandler< version, force, }; - await AgentService.sendUpgradeAgentsActions(soClient, esClient, upgradeOptions); + const results = await AgentService.sendUpgradeAgentsActions(soClient, esClient, upgradeOptions); + const body = results.items.reduce((acc, so) => { + acc[so.id] = { + success: !so.error, + error: so.error?.message, + }; + return acc; + }, {}); - const body: PostBulkAgentUpgradeResponse = {}; return response.ok({ body }); } catch (error) { return defaultIngestErrorHandler({ error, response }); diff --git a/x-pack/plugins/fleet/server/saved_objects/index.ts b/x-pack/plugins/fleet/server/saved_objects/index.ts index e5f0537a8c27a..87ca9782ab698 100644 --- a/x-pack/plugins/fleet/server/saved_objects/index.ts +++ b/x-pack/plugins/fleet/server/saved_objects/index.ts @@ -58,9 +58,11 @@ const getSavedObjectTypes = ( }, mappings: { properties: { + fleet_server_hosts: { type: 'keyword' }, + has_seen_add_data_notice: { type: 'boolean', index: false }, + // TODO remove as part of https://github.com/elastic/kibana/issues/94303 kibana_urls: { type: 'keyword' }, kibana_ca_sha256: { type: 'keyword' }, - has_seen_add_data_notice: { type: 'boolean', index: false }, }, }, migrations: { diff --git a/x-pack/plugins/fleet/server/services/agent_policy.test.ts b/x-pack/plugins/fleet/server/services/agent_policy.test.ts index 515d2b1195638..56e76130538cf 100644 --- a/x-pack/plugins/fleet/server/services/agent_policy.test.ts +++ b/x-pack/plugins/fleet/server/services/agent_policy.test.ts @@ -171,6 +171,7 @@ describe('agent policy', () => { inputs: [], revision: 1, fleet: { + hosts: ['http://localhost:5603'], kibana: { hosts: ['localhost:5603'], protocol: 'http', @@ -206,6 +207,7 @@ describe('agent policy', () => { inputs: [], revision: 1, fleet: { + hosts: ['http://localhost:5603'], kibana: { hosts: ['localhost:5603'], protocol: 'http', @@ -242,6 +244,7 @@ describe('agent policy', () => { inputs: [], revision: 1, fleet: { + hosts: ['http://localhost:5603'], kibana: { hosts: ['localhost:5603'], protocol: 'http', diff --git a/x-pack/plugins/fleet/server/services/agent_policy.ts b/x-pack/plugins/fleet/server/services/agent_policy.ts index 2cafe2fe57c01..357b9150407ef 100644 --- a/x-pack/plugins/fleet/server/services/agent_policy.ts +++ b/x-pack/plugins/fleet/server/services/agent_policy.ts @@ -706,12 +706,20 @@ class AgentPolicyService { } catch (error) { throw new Error('Default settings is not setup'); } - if (!settings.kibana_urls || !settings.kibana_urls.length) - throw new Error('kibana_urls is missing'); - - fullAgentPolicy.fleet = { - kibana: getFullAgentPolicyKibanaConfig(settings.kibana_urls), - }; + if (settings.fleet_server_hosts && settings.fleet_server_hosts.length) { + fullAgentPolicy.fleet = { + hosts: settings.fleet_server_hosts, + }; + } // TODO remove as part of https://github.com/elastic/kibana/issues/94303 + else { + if (!settings.kibana_urls || !settings.kibana_urls.length) + throw new Error('kibana_urls is missing'); + + fullAgentPolicy.fleet = { + hosts: settings.kibana_urls, + kibana: getFullAgentPolicyKibanaConfig(settings.kibana_urls), + }; + } } return fullAgentPolicy; } diff --git a/x-pack/plugins/fleet/server/services/agents/crud.ts b/x-pack/plugins/fleet/server/services/agents/crud.ts index b89b2b6d351b8..ecf18430da668 100644 --- a/x-pack/plugins/fleet/server/services/agents/crud.ts +++ b/x-pack/plugins/fleet/server/services/agents/crud.ts @@ -10,7 +10,6 @@ import type { estypes } from '@elastic/elasticsearch'; import type { SavedObjectsClientContract, ElasticsearchClient } from 'src/core/server'; import type { AgentSOAttributes, Agent, BulkActionResult, ListWithKuery } from '../../types'; - import { appContextService, agentPolicyService } from '../../services'; import type { FleetServerAgent } from '../../../common'; import { isAgentUpgradeable, SO_SEARCH_LIMIT } from '../../../common'; diff --git a/x-pack/plugins/fleet/server/services/agents/unenroll.ts b/x-pack/plugins/fleet/server/services/agents/unenroll.ts index 8cf7396eaa8de..ff243eff11570 100644 --- a/x-pack/plugins/fleet/server/services/agents/unenroll.ts +++ b/x-pack/plugins/fleet/server/services/agents/unenroll.ts @@ -7,6 +7,7 @@ import type { ElasticsearchClient, SavedObjectsClientContract } from 'src/core/server'; +import type { Agent, BulkActionResult } from '../../types'; import * as APIKeyService from '../api_keys'; import { AgentUnenrollmentError } from '../../errors'; @@ -57,26 +58,35 @@ export async function unenrollAgents( soClient: SavedObjectsClientContract, esClient: ElasticsearchClient, options: GetAgentsOptions & { force?: boolean } -) { +): Promise<{ items: BulkActionResult[] }> { // start with all agents specified - const agents = await getAgents(esClient, options); + const givenAgents = await getAgents(esClient, options); + const outgoingErrors: Record = {}; // Filter to those not already unenrolled, or unenrolling - const agentsEnrolled = agents.filter((agent) => { + const agentsEnrolled = givenAgents.filter((agent) => { if (options.force) { return !agent.unenrolled_at; } return !agent.unenrollment_started_at && !agent.unenrolled_at; }); // And which are allowed to unenroll - const settled = await Promise.allSettled( + const agentResults = await Promise.allSettled( agentsEnrolled.map((agent) => unenrollAgentIsAllowed(soClient, esClient, agent.id).then((_) => agent) ) ); - const agentsToUpdate = agentsEnrolled.filter((_, index) => settled[index].status === 'fulfilled'); - const now = new Date().toISOString(); + const agentsToUpdate = agentResults.reduce((agents, result, index) => { + if (result.status === 'fulfilled') { + agents.push(result.value); + } else { + const id = givenAgents[index].id; + outgoingErrors[id] = result.reason; + } + return agents; + }, []); + const now = new Date().toISOString(); if (options.force) { // Get all API keys that need to be invalidated const apiKeys = agentsToUpdate.reduce((keys, agent) => { @@ -94,17 +104,6 @@ export async function unenrollAgents( if (apiKeys.length) { await APIKeyService.invalidateAPIKeys(soClient, apiKeys); } - // Update the necessary agents - return bulkUpdateAgents( - esClient, - agentsToUpdate.map((agent) => ({ - agentId: agent.id, - data: { - active: false, - unenrolled_at: now, - }, - })) - ); } else { // Create unenroll action for each agent await bulkCreateAgentActions( @@ -116,18 +115,32 @@ export async function unenrollAgents( type: 'UNENROLL', })) ); - - // Update the necessary agents - return bulkUpdateAgents( - esClient, - agentsToUpdate.map((agent) => ({ - agentId: agent.id, - data: { - unenrollment_started_at: now, - }, - })) - ); } + + // Update the necessary agents + const updateData = options.force + ? { unenrolled_at: now, active: false } + : { unenrollment_started_at: now }; + + await bulkUpdateAgents( + esClient, + agentsToUpdate.map(({ id }) => ({ agentId: id, data: updateData })) + ); + + const out = { + items: givenAgents.map((agent, index) => { + const hasError = agent.id in outgoingErrors; + const result: BulkActionResult = { + id: agent.id, + success: !hasError, + }; + if (hasError) { + result.error = outgoingErrors[agent.id]; + } + return result; + }), + }; + return out; } export async function forceUnenrollAgent( diff --git a/x-pack/plugins/fleet/server/services/agents/upgrade.ts b/x-pack/plugins/fleet/server/services/agents/upgrade.ts index 6c3b404a5b6f3..14b8dfaed4d91 100644 --- a/x-pack/plugins/fleet/server/services/agents/upgrade.ts +++ b/x-pack/plugins/fleet/server/services/agents/upgrade.ts @@ -7,16 +7,23 @@ import type { ElasticsearchClient, SavedObjectsClientContract } from 'src/core/server'; -import type { AgentAction, AgentActionSOAttributes } from '../../types'; +import type { Agent, AgentAction, AgentActionSOAttributes, BulkActionResult } from '../../types'; import { AGENT_ACTION_SAVED_OBJECT_TYPE } from '../../constants'; import { agentPolicyService } from '../../services'; -import { IngestManagerError } from '../../errors'; +import { AgentReassignmentError, IngestManagerError } from '../../errors'; import { isAgentUpgradeable } from '../../../common/services'; import { appContextService } from '../app_context'; import { bulkCreateAgentActions, createAgentAction } from './actions'; import type { GetAgentsOptions } from './crud'; -import { getAgents, updateAgent, bulkUpdateAgents, getAgentPolicyForAgent } from './crud'; +import { + getAgentDocuments, + getAgents, + updateAgent, + bulkUpdateAgents, + getAgentPolicyForAgent, +} from './crud'; +import { searchHitToAgent } from './helpers'; export async function sendUpgradeAgentAction({ soClient, @@ -77,39 +84,75 @@ export async function ackAgentUpgraded( export async function sendUpgradeAgentsActions( soClient: SavedObjectsClientContract, esClient: ElasticsearchClient, - options: GetAgentsOptions & { + options: ({ agents: Agent[] } | GetAgentsOptions) & { sourceUri: string | undefined; version: string; force?: boolean; } ) { // Full set of agents - const agentsGiven = await getAgents(esClient, options); + const outgoingErrors: Record = {}; + let givenAgents: Agent[] = []; + if ('agents' in options) { + givenAgents = options.agents; + } else if ('agentIds' in options) { + const givenAgentsResults = await getAgentDocuments(esClient, options.agentIds); + for (const agentResult of givenAgentsResults) { + if (agentResult.found === false) { + outgoingErrors[agentResult._id] = new AgentReassignmentError( + `Cannot find agent ${agentResult._id}` + ); + } else { + givenAgents.push(searchHitToAgent(agentResult)); + } + } + } else if ('kuery' in options) { + givenAgents = await getAgents(esClient, options); + } + const givenOrder = + 'agentIds' in options ? options.agentIds : givenAgents.map((agent) => agent.id); + + // get any policy ids from upgradable agents + const policyIdsToGet = new Set( + givenAgents.filter((agent) => agent.policy_id).map((agent) => agent.policy_id!) + ); + + // get the agent policies for those ids + const agentPolicies = await agentPolicyService.getByIDs(soClient, Array.from(policyIdsToGet), { + fields: ['is_managed'], + }); + const managedPolicies = agentPolicies.reduce>((acc, policy) => { + acc[policy.id] = policy.is_managed; + return acc; + }, {}); // Filter out agents currently unenrolling, unenrolled, or not upgradeable b/c of version check const kibanaVersion = appContextService.getKibanaVersion(); - const upgradeableAgents = options.force - ? agentsGiven - : agentsGiven.filter((agent) => isAgentUpgradeable(agent, kibanaVersion)); - - if (!options.force) { - // get any policy ids from upgradable agents - const policyIdsToGet = new Set( - upgradeableAgents.filter((agent) => agent.policy_id).map((agent) => agent.policy_id!) - ); - - // get the agent policies for those ids - const agentPolicies = await agentPolicyService.getByIDs(soClient, Array.from(policyIdsToGet), { - fields: ['is_managed'], - }); + const agentResults = await Promise.allSettled( + givenAgents.map(async (agent) => { + const isAllowed = options.force || isAgentUpgradeable(agent, kibanaVersion); + if (!isAllowed) { + throw new IngestManagerError(`${agent.id} is not upgradeable`); + } - // throw if any of those agent policies are managed - for (const policy of agentPolicies) { - if (policy.is_managed) { - throw new IngestManagerError(`Cannot upgrade agent in managed policy ${policy.id}`); + if (!options.force && agent.policy_id && managedPolicies[agent.policy_id]) { + throw new IngestManagerError(`Cannot upgrade agent in managed policy ${agent.policy_id}`); } + return agent; + }) + ); + + // Filter to agents that do not already use the new agent policy ID + const agentsToUpdate = agentResults.reduce((agents, result, index) => { + if (result.status === 'fulfilled') { + agents.push(result.value); + } else { + const id = givenAgents[index].id; + outgoingErrors[id] = result.reason; } - } + return agents; + }, []); + // Create upgrade action for each agent const now = new Date().toISOString(); const data = { @@ -120,7 +163,7 @@ export async function sendUpgradeAgentsActions( await bulkCreateAgentActions( soClient, esClient, - upgradeableAgents.map((agent) => ({ + agentsToUpdate.map((agent) => ({ agent_id: agent.id, created_at: now, data, @@ -129,9 +172,9 @@ export async function sendUpgradeAgentsActions( })) ); - return await bulkUpdateAgents( + await bulkUpdateAgents( esClient, - upgradeableAgents.map((agent) => ({ + agentsToUpdate.map((agent) => ({ agentId: agent.id, data: { upgraded_at: null, @@ -139,4 +182,17 @@ export async function sendUpgradeAgentsActions( }, })) ); + const orderedOut = givenOrder.map((agentId) => { + const hasError = agentId in outgoingErrors; + const result: BulkActionResult = { + id: agentId, + success: !hasError, + }; + if (hasError) { + result.error = outgoingErrors[agentId]; + } + return result; + }); + + return { items: orderedOut }; } diff --git a/x-pack/plugins/fleet/server/services/fleet_server/elasticsearch/fleet_agents.json b/x-pack/plugins/fleet/server/services/fleet_server/elasticsearch/fleet_agents.json index 9937e9ad66e56..58ae1a2e00ea4 100644 --- a/x-pack/plugins/fleet/server/services/fleet_server/elasticsearch/fleet_agents.json +++ b/x-pack/plugins/fleet/server/services/fleet_server/elasticsearch/fleet_agents.json @@ -187,6 +187,9 @@ "policy_id": { "type": "keyword" }, + "policy_output_permissions_hash": { + "type": "keyword" + }, "policy_revision_idx": { "type": "integer" }, diff --git a/x-pack/plugins/fleet/server/services/settings.ts b/x-pack/plugins/fleet/server/services/settings.ts index 03348a2fcc4bb..7658a8d71839e 100644 --- a/x-pack/plugins/fleet/server/services/settings.ts +++ b/x-pack/plugins/fleet/server/services/settings.ts @@ -27,6 +27,7 @@ export async function getSettings(soClient: SavedObjectsClientContract): Promise return { id: settingsSo.id, ...settingsSo.attributes, + fleet_server_hosts: settingsSo.attributes.fleet_server_hosts || [], }; } @@ -81,7 +82,10 @@ export function createDefaultSettings(): BaseSettings { pathname: basePath.serverBasePath, }); + const fleetServerHosts = appContextService.getConfig()?.agents?.fleet_server?.hosts ?? []; + return { kibana_urls: [cloudUrl || flagsUrl || defaultUrl].flat(), + fleet_server_hosts: fleetServerHosts, }; } diff --git a/x-pack/plugins/fleet/server/types/rest_spec/settings.ts b/x-pack/plugins/fleet/server/types/rest_spec/settings.ts index 9bbebbe86ccaa..9051d7a06efff 100644 --- a/x-pack/plugins/fleet/server/types/rest_spec/settings.ts +++ b/x-pack/plugins/fleet/server/types/rest_spec/settings.ts @@ -13,6 +13,15 @@ export const GetSettingsRequestSchema = {}; export const PutSettingsRequestSchema = { body: schema.object({ + fleet_server_hosts: schema.maybe( + schema.arrayOf(schema.uri({ scheme: ['http', 'https'] }), { + validate: (value) => { + if (value.length && isDiffPathProtocol(value)) { + return 'Protocol and path must be the same for each URL'; + } + }, + }) + ), kibana_urls: schema.maybe( schema.arrayOf(schema.uri({ scheme: ['http', 'https'] }), { validate: (value) => { diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx index 6b3982cb50c59..b2647b175b324 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx @@ -7,7 +7,10 @@ import React from 'react'; import { GlobalFlyout } from '../../../../../../../../../../src/plugins/es_ui_shared/public'; -import { uiSettingsServiceMock } from '../../../../../../../../../../src/core/public/mocks'; +import { + docLinksServiceMock, + uiSettingsServiceMock, +} from '../../../../../../../../../../src/core/public/mocks'; import { MappingsEditorProvider } from '../../../mappings_editor_context'; import { createKibanaReactContext } from '../../../shared_imports'; @@ -80,10 +83,7 @@ const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ }); const defaultProps = { - docLinks: { - DOC_LINK_VERSION: 'master', - ELASTIC_WEBSITE_URL: 'https://jest.elastic.co', - }, + docLinks: docLinksServiceMock.createStartContract(), }; export const WithAppDependencies = (Comp: any) => (props: any) => ( diff --git a/x-pack/plugins/infra/public/types.ts b/x-pack/plugins/infra/public/types.ts index 4d70676d25e40..068abd0e0f20f 100644 --- a/x-pack/plugins/infra/public/types.ts +++ b/x-pack/plugins/infra/public/types.ts @@ -19,8 +19,8 @@ import type { } from '../../../plugins/triggers_actions_ui/public'; import type { DataEnhancedSetup, DataEnhancedStart } from '../../data_enhanced/public'; import type { - ObservabilityPluginSetup, - ObservabilityPluginStart, + ObservabilityPublicSetup, + ObservabilityPublicStart, } from '../../observability/public'; import type { SpacesPluginStart } from '../../spaces/public'; import { MlPluginStart, MlPluginSetup } from '../../ml/public'; @@ -33,7 +33,7 @@ export type InfraClientStartExports = void; export interface InfraClientSetupDeps { dataEnhanced: DataEnhancedSetup; home?: HomePublicPluginSetup; - observability: ObservabilityPluginSetup; + observability: ObservabilityPublicSetup; triggersActionsUi: TriggersAndActionsUIPublicPluginSetup; usageCollection: UsageCollectionSetup; ml: MlPluginSetup; @@ -43,7 +43,7 @@ export interface InfraClientSetupDeps { export interface InfraClientStartDeps { data: DataPublicPluginStart; dataEnhanced: DataEnhancedStart; - observability: ObservabilityPluginStart; + observability: ObservabilityPublicStart; spaces: SpacesPluginStart; triggersActionsUi: TriggersAndActionsUIPublicPluginStart; usageCollection: UsageCollectionStart; diff --git a/x-pack/plugins/infra/public/utils/enzyme_helpers.tsx b/x-pack/plugins/infra/public/utils/enzyme_helpers.tsx index 124b6b8f13bf9..33fbbd03d790a 100644 --- a/x-pack/plugins/infra/public/utils/enzyme_helpers.tsx +++ b/x-pack/plugins/infra/public/utils/enzyme_helpers.tsx @@ -5,6 +5,7 @@ * 2.0. */ +// eslint-disable-next-line import/no-extraneous-dependencies import { mount, ReactWrapper } from 'enzyme'; import React from 'react'; import { act as reactAct } from 'react-dom/test-utils'; diff --git a/x-pack/plugins/infra/server/services/log_entries/message/builtin_rules/generic.ts b/x-pack/plugins/infra/server/services/log_entries/message/builtin_rules/generic.ts index b06752ee0a80d..c16d65a75b3e0 100644 --- a/x-pack/plugins/infra/server/services/log_entries/message/builtin_rules/generic.ts +++ b/x-pack/plugins/infra/server/services/log_entries/message/builtin_rules/generic.ts @@ -45,6 +45,37 @@ export const getGenericRules = (genericMessageFields: string[]) => [ ]; const createGenericRulesForField = (fieldName: string) => [ + { + when: { + exists: ['event.dataset', 'log.level', fieldName, 'error.stack_trace.text'], + }, + format: [ + { + constant: '[', + }, + { + field: 'event.dataset', + }, + { + constant: '][', + }, + { + field: 'log.level', + }, + { + constant: '] ', + }, + { + field: fieldName, + }, + { + constant: '\n', + }, + { + field: 'error.stack_trace.text', + }, + ], + }, { when: { exists: ['event.dataset', 'log.level', fieldName], @@ -70,6 +101,31 @@ const createGenericRulesForField = (fieldName: string) => [ }, ], }, + { + when: { + exists: ['log.level', fieldName, 'error.stack_trace.text'], + }, + format: [ + { + constant: '[', + }, + { + field: 'log.level', + }, + { + constant: '] ', + }, + { + field: fieldName, + }, + { + constant: '\n', + }, + { + field: 'error.stack_trace.text', + }, + ], + }, { when: { exists: ['log.level', fieldName], @@ -89,6 +145,22 @@ const createGenericRulesForField = (fieldName: string) => [ }, ], }, + { + when: { + exists: [fieldName, 'error.stack_trace.text'], + }, + format: [ + { + field: fieldName, + }, + { + constant: '\n', + }, + { + field: 'error.stack_trace.text', + }, + ], + }, { when: { exists: [fieldName], diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/bytes.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/bytes.test.tsx new file mode 100644 index 0000000000000..c6449dbd7a93e --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/bytes.test.tsx @@ -0,0 +1,124 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { act } from 'react-dom/test-utils'; +import { setup, SetupResult, getProcessorValue } from './processor.helpers'; + +// Default parameter values automatically added to the Bytes processor when saved +const defaultBytesParameters = { + ignore_failure: undefined, + description: undefined, +}; + +const BYTES_TYPE = 'bytes'; + +describe('Processor: Bytes', () => { + let onUpdate: jest.Mock; + let testBed: SetupResult; + + beforeAll(() => { + jest.useFakeTimers(); + }); + + afterAll(() => { + jest.useRealTimers(); + }); + + beforeEach(async () => { + onUpdate = jest.fn(); + + await act(async () => { + testBed = await setup({ + value: { + processors: [], + }, + onFlyoutOpen: jest.fn(), + onUpdate, + }); + }); + testBed.component.update(); + }); + + test('prevents form submission if required fields are not provided', async () => { + const { + actions: { addProcessor, saveNewProcessor, addProcessorType }, + form, + } = testBed; + + // Open flyout to add new processor + addProcessor(); + // Click submit button without entering any fields + await saveNewProcessor(); + + // Expect form error as a processor type is required + expect(form.getErrorsMessages()).toEqual(['A type is required.']); + + // Add type (the other fields are not visible until a type is selected) + await addProcessorType(BYTES_TYPE); + + // Click submit button with only the type defined + await saveNewProcessor(); + + // Expect form error as "field" is required parameter + expect(form.getErrorsMessages()).toEqual(['A field value is required.']); + }); + + test('saves with default parameter values', async () => { + const { + actions: { addProcessor, saveNewProcessor, addProcessorType }, + form, + } = testBed; + + // Open flyout to add new processor + addProcessor(); + // Add type (the other fields are not visible until a type is selected) + await addProcessorType(BYTES_TYPE); + // Add "field" value (required) + form.setInputValue('fieldNameField.input', 'field_1'); + // Save the field + await saveNewProcessor(); + + const processors = getProcessorValue(onUpdate, BYTES_TYPE); + expect(processors[0].bytes).toEqual({ + field: 'field_1', + ...defaultBytesParameters, + }); + }); + + test('allows optional parameters to be set', async () => { + const { + actions: { addProcessor, addProcessorType, saveNewProcessor }, + form, + } = testBed; + + // Open flyout to add new processor + addProcessor(); + // Add type (the other fields are not visible until a type is selected) + await addProcessorType(BYTES_TYPE); + // Add "field" value (required) + form.setInputValue('fieldNameField.input', 'field_1'); + + // Set optional parameteres + form.setInputValue('targetField.input', 'target_field'); + + form.toggleEuiSwitch('ignoreMissingSwitch.input'); + + // Save the field with new changes + await saveNewProcessor(); + + const processors = getProcessorValue(onUpdate, BYTES_TYPE); + expect(processors[0].bytes).toEqual({ + description: undefined, + field: 'field_1', + ignore_failure: undefined, + target_field: 'target_field', + ignore_missing: true, + tag: undefined, + if: undefined, + }); + }); +}); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx index c08627de636d7..8340cf45b1f1b 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx @@ -90,9 +90,9 @@ const createActions = (testBed: TestBed) => { component.update(); }, - async addProcessorType({ type, label }: { type: string; label: string }) { + async addProcessorType(type: string) { await act(async () => { - find('processorTypeSelector.input').simulate('change', [{ value: type, label }]); + find('processorTypeSelector.input').simulate('change', [{ value: type }]); }); component.update(); }, @@ -127,12 +127,19 @@ export const setupEnvironment = () => { }; }; +export const getProcessorValue = (onUpdate: jest.Mock, type: string) => { + const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1]; + const { processors } = onUpdateResult.getData(); + return processors; +}; + type TestSubject = | 'addProcessorForm.submitButton' | 'addProcessorButton' | 'addProcessorForm.submitButton' | 'processorTypeSelector.input' | 'fieldNameField.input' + | 'ignoreMissingSwitch.input' | 'targetField.input' | 'keepOriginalField.input' | 'removeIfSuccessfulField.input'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor_form.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor_form.test.tsx new file mode 100644 index 0000000000000..de0061dcb0407 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor_form.test.tsx @@ -0,0 +1,52 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { act } from 'react-dom/test-utils'; +import { setup, SetupResult } from './processor.helpers'; + +describe('Processor: Bytes', () => { + let onUpdate: jest.Mock; + let testBed: SetupResult; + + beforeAll(() => { + jest.useFakeTimers(); + }); + + afterAll(() => { + jest.useRealTimers(); + }); + + beforeEach(async () => { + onUpdate = jest.fn(); + + await act(async () => { + testBed = await setup({ + value: { + processors: [], + }, + onFlyoutOpen: jest.fn(), + onUpdate, + }); + }); + testBed.component.update(); + }); + + test('Prevents form submission if processor type not selected', async () => { + const { + actions: { addProcessor, saveNewProcessor }, + form, + } = testBed; + + // Open flyout to add new processor + addProcessor(); + // Click submit button without entering any fields + await saveNewProcessor(); + + // Expect form error as a processor type is required + expect(form.getErrorsMessages()).toEqual(['A type is required.']); + }); +}); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/uri_parts.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/uri_parts.test.tsx index 41078b7e96df9..573adad3247f5 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/uri_parts.test.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/uri_parts.test.tsx @@ -6,7 +6,7 @@ */ import { act } from 'react-dom/test-utils'; -import { setup, SetupResult } from './processor.helpers'; +import { setup, SetupResult, getProcessorValue } from './processor.helpers'; // Default parameter values automatically added to the URI parts processor when saved const defaultUriPartsParameters = { @@ -16,6 +16,8 @@ const defaultUriPartsParameters = { description: undefined, }; +const URI_PARTS_TYPE = 'uri_parts'; + describe('Processor: URI parts', () => { let onUpdate: jest.Mock; let testBed: SetupResult; @@ -51,14 +53,9 @@ describe('Processor: URI parts', () => { // Open flyout to add new processor addProcessor(); - // Click submit button without entering any fields - await saveNewProcessor(); - - // Expect form error as a processor type is required - expect(form.getErrorsMessages()).toEqual(['A type is required.']); // Add type (the other fields are not visible until a type is selected) - await addProcessorType({ type: 'uri_parts', label: 'URI parts' }); + await addProcessorType(URI_PARTS_TYPE); // Click submit button with only the type defined await saveNewProcessor(); @@ -76,14 +73,13 @@ describe('Processor: URI parts', () => { // Open flyout to add new processor addProcessor(); // Add type (the other fields are not visible until a type is selected) - await addProcessorType({ type: 'uri_parts', label: 'URI parts' }); + await addProcessorType(URI_PARTS_TYPE); // Add "field" value (required) form.setInputValue('fieldNameField.input', 'field_1'); // Save the field await saveNewProcessor(); - const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1]; - const { processors } = onUpdateResult.getData(); + const processors = getProcessorValue(onUpdate, URI_PARTS_TYPE); expect(processors[0].uri_parts).toEqual({ field: 'field_1', ...defaultUriPartsParameters, @@ -99,7 +95,7 @@ describe('Processor: URI parts', () => { // Open flyout to add new processor addProcessor(); // Add type (the other fields are not visible until a type is selected) - await addProcessorType({ type: 'uri_parts', label: 'URI parts' }); + await addProcessorType(URI_PARTS_TYPE); // Add "field" value (required) form.setInputValue('fieldNameField.input', 'field_1'); @@ -111,8 +107,7 @@ describe('Processor: URI parts', () => { // Save the field with new changes await saveNewProcessor(); - const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1]; - const { processors } = onUpdateResult.getData(); + const processors = getProcessorValue(onUpdate, URI_PARTS_TYPE); expect(processors[0].uri_parts).toEqual({ description: undefined, field: 'field_1', diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/common_fields/ignore_missing_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/common_fields/ignore_missing_field.tsx index 82e086102b488..744e9798c4fb0 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/common_fields/ignore_missing_field.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/common_fields/ignore_missing_field.tsx @@ -50,5 +50,6 @@ export const IgnoreMissingField: FunctionComponent = (props) => ( config={{ ...fieldsConfig.ignore_missing, ...props }} component={ToggleField} path="fields.ignore_missing" + data-test-subj="ignoreMissingSwitch" /> ); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx index 3d499b7b7b45a..e171c457c541e 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx @@ -22,6 +22,22 @@ import { generateId } from '../../../id_generator'; jest.mock('../../../id_generator'); +let container: HTMLDivElement | undefined; + +beforeEach(() => { + container = document.createElement('div'); + container.id = 'lensContainer'; + document.body.appendChild(container); +}); + +afterEach(() => { + if (container && container.parentNode) { + container.parentNode.removeChild(container); + } + + container = undefined; +}); + describe('ConfigPanel', () => { let mockVisualization: jest.Mocked; let mockVisualization2: jest.Mocked; @@ -105,7 +121,9 @@ describe('ConfigPanel', () => { describe('focus behavior when adding or removing layers', () => { it('should focus the only layer when resetting the layer', () => { - const component = mountWithIntl(); + const component = mountWithIntl(, { + attachTo: container, + }); const firstLayerFocusable = component .find(LayerPanel) .first() @@ -126,7 +144,7 @@ describe('ConfigPanel', () => { first: mockDatasource.publicAPIMock, second: mockDatasource.publicAPIMock, }; - const component = mountWithIntl(); + const component = mountWithIntl(, { attachTo: container }); const secondLayerFocusable = component .find(LayerPanel) .at(1) @@ -147,7 +165,7 @@ describe('ConfigPanel', () => { first: mockDatasource.publicAPIMock, second: mockDatasource.publicAPIMock, }; - const component = mountWithIntl(); + const component = mountWithIntl(, { attachTo: container }); const firstLayerFocusable = component .find(LayerPanel) .first() @@ -169,7 +187,9 @@ describe('ConfigPanel', () => { } }); - const component = mountWithIntl(); + const component = mountWithIntl(, { + attachTo: container, + }); act(() => { component.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click'); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index 30740bbd6b217..2c850d0b4472c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -7,22 +7,38 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; +import { EuiFormRow } from '@elastic/eui'; +import { mountWithIntl } from '@kbn/test/jest'; +import { Visualization } from '../../../types'; +import { LayerPanel } from './layer_panel'; +import { ChildDragDropProvider, DragDrop } from '../../../drag_drop'; +import { coreMock } from '../../../../../../../src/core/public/mocks'; +import { generateId } from '../../../id_generator'; import { createMockVisualization, createMockFramePublicAPI, createMockDatasource, DatasourceMock, } from '../../mocks'; -import { ChildDragDropProvider, DragDrop } from '../../../drag_drop'; -import { EuiFormRow } from '@elastic/eui'; -import { mountWithIntl } from '@kbn/test/jest'; -import { Visualization } from '../../../types'; -import { LayerPanel } from './layer_panel'; -import { coreMock } from 'src/core/public/mocks'; -import { generateId } from '../../../id_generator'; jest.mock('../../../id_generator'); +let container: HTMLDivElement | undefined; + +beforeEach(() => { + container = document.createElement('div'); + container.id = 'lensContainer'; + document.body.appendChild(container); +}); + +afterEach(() => { + if (container && container.parentNode) { + container.parentNode.removeChild(container); + } + + container = undefined; +}); + const defaultContext = { dragging: undefined, setDragging: jest.fn(), @@ -642,7 +658,8 @@ describe('LayerPanel', () => { const component = mountWithIntl( - + , + { attachTo: container } ); act(() => { component.find(DragDrop).at(1).prop('onDrop')!(draggingOperation, 'reorder'); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx index 3b0cb67cbce41..a4a061db04797 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useState } from 'react'; +import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFormRow, @@ -13,9 +13,7 @@ import { EuiSwitch, EuiSwitchEvent, EuiSpacer, - EuiPopover, - EuiButtonEmpty, - EuiText, + EuiAccordion, EuiIconTip, } from '@elastic/eui'; import { AggFunctionsMapping } from '../../../../../../../../src/plugins/data/public'; @@ -24,7 +22,7 @@ import { updateColumnParam, isReferenced } from '../../layer_helpers'; import { DataType } from '../../../../types'; import { OperationDefinition } from '../index'; import { FieldBasedIndexPatternColumn } from '../column_types'; -import { ValuesRangeInput } from './values_range_input'; +import { ValuesInput } from './values_input'; import { getEsAggsSuffix, getInvalidFieldMessage } from '../helpers'; import type { IndexPatternLayer } from '../../../types'; @@ -193,8 +191,6 @@ export const termsOperation: OperationDefinition - { updateLayer( @@ -251,71 +247,6 @@ export const termsOperation: OperationDefinition - {!hasRestrictions && ( - - { - setPopoverOpen(!popoverOpen); - }} - > - {i18n.translate('xpack.lens.indexPattern.terms.advancedSettings', { - defaultMessage: 'Advanced', - })} - - } - isOpen={popoverOpen} - closePopover={() => { - setPopoverOpen(false); - }} - > - - updateLayer( - updateColumnParam({ - layer, - columnId, - paramName: 'otherBucket', - value: e.target.checked, - }) - ) - } - /> - - - updateLayer( - updateColumnParam({ - layer, - columnId, - paramName: 'missingBucket', - value: e.target.checked, - }) - ) - } - /> - - - - )} @@ -415,6 +346,57 @@ export const termsOperation: OperationDefinition + {!hasRestrictions && ( + <> + + + + + updateLayer( + updateColumnParam({ + layer, + columnId, + paramName: 'otherBucket', + value: e.target.checked, + }) + ) + } + /> + + + updateLayer( + updateColumnParam({ + layer, + columnId, + paramName: 'missingBucket', + value: e.target.checked, + }) + ) + } + /> + + + )} ); }, diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx index 0ed611e9726ef..97b57dee2fde7 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx @@ -8,12 +8,12 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { shallow, mount } from 'enzyme'; -import { EuiRange, EuiSelect, EuiSwitch, EuiSwitchEvent } from '@elastic/eui'; +import { EuiFieldNumber, EuiSelect, EuiSwitch, EuiSwitchEvent } from '@elastic/eui'; import type { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public'; import type { IStorageWrapper } from 'src/plugins/kibana_utils/public'; import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks'; import { createMockedIndexPattern } from '../../../mocks'; -import { ValuesRangeInput } from './values_range_input'; +import { ValuesInput } from './values_input'; import type { TermsIndexPatternColumn } from '.'; import { termsOperation } from '../index'; import { IndexPattern, IndexPatternLayer } from '../../../types'; @@ -888,7 +888,7 @@ describe('terms', () => { /> ); - expect(instance.find(EuiRange).prop('value')).toEqual('3'); + expect(instance.find(EuiFieldNumber).prop('value')).toEqual('3'); }); it('should update state with the size value', () => { @@ -904,7 +904,7 @@ describe('terms', () => { ); act(() => { - instance.find(ValuesRangeInput).prop('onChange')!(7); + instance.find(ValuesInput).prop('onChange')!(7); }); expect(updateLayerSpy).toHaveBeenCalledWith({ diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.test.tsx similarity index 50% rename from x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx rename to x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.test.tsx index 3603188ba30e5..4303695d6e293 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.test.tsx @@ -8,52 +8,50 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { shallow } from 'enzyme'; -import { EuiRange } from '@elastic/eui'; -import { ValuesRangeInput } from './values_range_input'; +import { EuiFieldNumber } from '@elastic/eui'; +import { ValuesInput } from './values_input'; jest.mock('react-use/lib/useDebounce', () => (fn: () => void) => fn()); -describe('ValuesRangeInput', () => { - it('should render EuiRange correctly', () => { +describe('Values', () => { + it('should render EuiFieldNumber correctly', () => { const onChangeSpy = jest.fn(); - const instance = shallow(); + const instance = shallow(); - expect(instance.find(EuiRange).prop('value')).toEqual('5'); + expect(instance.find(EuiFieldNumber).prop('value')).toEqual('5'); }); it('should not run onChange function on mount', () => { const onChangeSpy = jest.fn(); - shallow(); + shallow(); expect(onChangeSpy.mock.calls.length).toBe(0); }); it('should run onChange function on update', () => { const onChangeSpy = jest.fn(); - const instance = shallow(); + const instance = shallow(); act(() => { - instance.find(EuiRange).prop('onChange')!( - { currentTarget: { value: '7' } } as React.ChangeEvent, - true - ); + instance.find(EuiFieldNumber).prop('onChange')!({ + currentTarget: { value: '7' }, + } as React.ChangeEvent); }); - expect(instance.find(EuiRange).prop('value')).toEqual('7'); + expect(instance.find(EuiFieldNumber).prop('value')).toEqual('7'); expect(onChangeSpy.mock.calls.length).toBe(1); expect(onChangeSpy.mock.calls[0][0]).toBe(7); }); it('should not run onChange function on update when value is out of 1-100 range', () => { const onChangeSpy = jest.fn(); - const instance = shallow(); + const instance = shallow(); act(() => { - instance.find(EuiRange).prop('onChange')!( - { currentTarget: { value: '107' } } as React.ChangeEvent, - true - ); + instance.find(EuiFieldNumber).prop('onChange')!({ + currentTarget: { value: '1007' }, + } as React.ChangeEvent); }); instance.update(); - expect(instance.find(EuiRange).prop('value')).toEqual('107'); + expect(instance.find(EuiFieldNumber).prop('value')).toEqual('1007'); expect(onChangeSpy.mock.calls.length).toBe(1); - expect(onChangeSpy.mock.calls[0][0]).toBe(100); + expect(onChangeSpy.mock.calls[0][0]).toBe(1000); }); }); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.tsx similarity index 88% rename from x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx rename to x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.tsx index 068e13429527f..915e67c4eba0b 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.tsx @@ -7,10 +7,10 @@ import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiRange } from '@elastic/eui'; +import { EuiFieldNumber } from '@elastic/eui'; import { useDebounceWithOptions } from '../helpers'; -export const ValuesRangeInput = ({ +export const ValuesInput = ({ value, onChange, }: { @@ -18,7 +18,7 @@ export const ValuesRangeInput = ({ onChange: (value: number) => void; }) => { const MIN_NUMBER_OF_VALUES = 1; - const MAX_NUMBER_OF_VALUES = 100; + const MAX_NUMBER_OF_VALUES = 1000; const [inputValue, setInputValue] = useState(String(value)); @@ -36,13 +36,11 @@ export const ValuesRangeInput = ({ ); return ( - setInputValue(currentTarget.value)} aria-label={i18n.translate('xpack.lens.indexPattern.terms.size', { diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx index c0788e6f67dfe..18c73a01cf784 100644 --- a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx +++ b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx @@ -15,6 +15,7 @@ const typeToIconMap: { [type: string]: string | IconType } = { labels: 'visText', values: 'number', list: 'list', + visualOptions: 'brush', }; export interface ToolbarPopoverProps { 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 982f513ae1019..1130bd7a95d88 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 @@ -27,6 +27,9 @@ Object { "type": "expression", }, ], + "curveType": Array [ + "LINEAR", + ], "description": Array [ "", ], diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index 0bf5c139e2403..5615a9ac34898 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx @@ -24,6 +24,7 @@ import { HorizontalAlignment, ElementClickListener, BrushEndListener, + CurveType, } from '@elastic/charts'; import { I18nProvider } from '@kbn/i18n/react'; import { @@ -179,6 +180,13 @@ export const xyChart: ExpressionFunctionDefinition< help: 'Layers of visual series', multi: true, }, + curveType: { + types: ['string'], + options: ['LINEAR', 'CURVE_MONOTONE_X'], + help: i18n.translate('xpack.lens.xyChart.curveType.help', { + defaultMessage: 'Define how curve type is rendered for a line chart', + }), + }, }, fn(data: LensMultiTable, args: XYArgs) { return { @@ -773,10 +781,17 @@ export function XYChart({ const index = `${layerIndex}-${accessorIndex}`; + const curveType = args.curveType ? CurveType[args.curveType] : undefined; + switch (seriesType) { case 'line': return ( - + ); case 'bar': case 'bar_stacked': @@ -804,11 +819,17 @@ export function XYChart({ key={index} {...seriesProps} fit={isPercentage ? 'zero' : getFitOptions(fittingFunction)} + curve={curveType} /> ); case 'area': return ( - + ); default: return assertNever(seriesType); 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 331e27a8efdb0..6a1882edde949 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts @@ -148,6 +148,7 @@ export const buildExpression = ( }, ], fittingFunction: [state.fittingFunction || 'None'], + curveType: [state.curveType || 'LINEAR'], axisTitlesVisibilitySettings: [ { type: 'expression', diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 126be41e7b129..6f1a01acd6e76 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -413,8 +413,11 @@ export interface XYArgs { }; tickLabelsVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_tickLabelsConfig' }; gridlinesVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_gridlinesConfig' }; + curveType?: XYCurveType; } +export type XYCurveType = 'LINEAR' | 'CURVE_MONOTONE_X'; + // Persisted parts of the state export interface XYState { preferredSeriesType: SeriesType; @@ -428,6 +431,7 @@ export interface XYState { axisTitlesVisibilitySettings?: AxesSettingsConfig; tickLabelsVisibilitySettings?: AxesSettingsConfig; gridlinesVisibilitySettings?: AxesSettingsConfig; + curveType?: XYCurveType; } export type State = XYState; diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/line_curve_option.test.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/line_curve_option.test.tsx new file mode 100644 index 0000000000000..c37a36a42fa47 --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/line_curve_option.test.tsx @@ -0,0 +1,41 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { mountWithIntl as mount, shallowWithIntl as shallow } from '@kbn/test/jest'; +import { EuiSwitch } from '@elastic/eui'; +import { LineCurveOption } from './line_curve_option'; + +describe('Line curve option', () => { + it('should show currently selected line curve option', () => { + const component = shallow(); + + expect(component.find(EuiSwitch).prop('checked')).toEqual(true); + }); + + it('should show currently curving disabled', () => { + const component = shallow(); + + expect(component.find(EuiSwitch).prop('checked')).toEqual(false); + }); + + it('should show curving option when enabled', () => { + const component = mount( + + ); + + expect(component.exists('[data-test-subj="lnsCurveStyleToggle"]')).toEqual(true); + }); + + it('should hide curve option when disabled', () => { + const component = mount( + + ); + + expect(component.exists('[data-test-subj="lnsCurveStyleToggle"]')).toEqual(false); + }); +}); diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/line_curve_option.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/line_curve_option.tsx new file mode 100644 index 0000000000000..ea0a1553ba5e5 --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/line_curve_option.tsx @@ -0,0 +1,56 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui'; +import { XYCurveType } from '../types'; + +export interface LineCurveOptionProps { + /** + * Currently selected value + */ + value?: XYCurveType; + /** + * Callback on display option change + */ + onChange: (id: XYCurveType) => void; + isCurveTypeEnabled?: boolean; +} + +export const LineCurveOption: React.FC = ({ + onChange, + value, + isCurveTypeEnabled = true, +}) => { + return isCurveTypeEnabled ? ( + <> + + { + if (e.target.checked) { + onChange('CURVE_MONOTONE_X'); + } else { + onChange('LINEAR'); + } + }} + data-test-subj="lnsCurveStyleToggle" + /> + + + + ) : null; +}; diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_value_option.test.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_value_option.test.tsx new file mode 100644 index 0000000000000..851b14839d7f7 --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_value_option.test.tsx @@ -0,0 +1,94 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { shallowWithIntl as shallow, mountWithIntl as mount } from '@kbn/test/jest'; +import { EuiSuperSelect, EuiButtonGroup } from '@elastic/eui'; +import { MissingValuesOptions } from './missing_values_option'; + +describe('Missing values option', () => { + it('should show currently selected fitting function', () => { + const component = shallow( + + ); + + expect(component.find(EuiSuperSelect).prop('valueOfSelected')).toEqual('Carry'); + }); + + it('should show currently selected value labels display setting', () => { + const component = mount( + + ); + + expect(component.find(EuiButtonGroup).prop('idSelected')).toEqual('value_labels_inside'); + }); + + it('should show display field when enabled', () => { + const component = mount( + + ); + + expect(component.exists('[data-test-subj="lnsValueLabelsDisplay"]')).toEqual(true); + }); + + it('should hide in display value label option when disabled', () => { + const component = mount( + + ); + + expect(component.exists('[data-test-subj="lnsValueLabelsDisplay"]')).toEqual(false); + }); + + it('should show the fitting option when enabled', () => { + const component = mount( + + ); + + expect(component.exists('[data-test-subj="lnsMissingValuesSelect"]')).toEqual(true); + }); + + it('should hide the fitting option when disabled', () => { + const component = mount( + + ); + + expect(component.exists('[data-test-subj="lnsMissingValuesSelect"]')).toEqual(false); + }); +}); diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_values_option.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_values_option.tsx new file mode 100644 index 0000000000000..fb6ecec4d2801 --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_values_option.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiButtonGroup, EuiFormRow, EuiIconTip, EuiSuperSelect, EuiText } from '@elastic/eui'; +import { FittingFunction, fittingFunctionDefinitions } from '../fitting_functions'; +import { ValueLabelConfig } from '../types'; + +export interface MissingValuesOptionProps { + valueLabels?: ValueLabelConfig; + fittingFunction?: FittingFunction; + onValueLabelChange: (newMode: ValueLabelConfig) => void; + onFittingFnChange: (newMode: FittingFunction) => void; + isValueLabelsEnabled?: boolean; + isFittingEnabled?: boolean; +} + +const valueLabelsOptions: Array<{ + id: string; + value: 'hide' | 'inside' | 'outside'; + label: string; + 'data-test-subj': string; +}> = [ + { + id: `value_labels_hide`, + value: 'hide', + label: i18n.translate('xpack.lens.xyChart.valueLabelsVisibility.auto', { + defaultMessage: 'Hide', + }), + 'data-test-subj': 'lnsXY_valueLabels_hide', + }, + { + id: `value_labels_inside`, + value: 'inside', + label: i18n.translate('xpack.lens.xyChart.valueLabelsVisibility.inside', { + defaultMessage: 'Show', + }), + 'data-test-subj': 'lnsXY_valueLabels_inside', + }, +]; + +export const MissingValuesOptions: React.FC = ({ + onValueLabelChange, + onFittingFnChange, + valueLabels, + fittingFunction, + isValueLabelsEnabled = true, + isFittingEnabled = true, +}) => { + const valueLabelsVisibilityMode = valueLabels || 'hide'; + + return ( + <> + {isValueLabelsEnabled && ( + + {i18n.translate('xpack.lens.shared.chartValueLabelVisibilityLabel', { + defaultMessage: 'Labels', + })} + + } + > + value === valueLabelsVisibilityMode)!.id + } + onChange={(modeId) => { + const newMode = valueLabelsOptions.find(({ id }) => id === modeId)!.value; + onValueLabelChange(newMode); + }} + /> + + )} + {isFittingEnabled && ( + + {i18n.translate('xpack.lens.xyChart.missingValuesLabel', { + defaultMessage: 'Missing values', + })}{' '} + + + } + > + { + return { + value: id, + dropdownDisplay: ( + <> + {title} + +

{description}

+ + + ), + inputDisplay: title, + }; + })} + valueOfSelected={fittingFunction || 'None'} + onChange={(value) => onFittingFnChange(value)} + itemLayoutAlign="top" + hasDividers + /> + + )} + + ); +}; diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx new file mode 100644 index 0000000000000..e7ec395312bff --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx @@ -0,0 +1,196 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { shallowWithIntl as shallow } from '@kbn/test/jest'; +import { Position } from '@elastic/charts'; +import { FramePublicAPI } from '../../types'; +import { createMockDatasource, createMockFramePublicAPI } from '../../editor_frame_service/mocks'; +import { State } from '../types'; +import { VisualOptionsPopover } from './visual_options_popover'; +import { ToolbarPopover } from '../../shared_components'; +import { MissingValuesOptions } from './missing_values_option'; + +describe('Visual options popover', () => { + let frame: FramePublicAPI; + + function testState(): State { + return { + legend: { isVisible: true, position: Position.Right }, + valueLabels: 'hide', + preferredSeriesType: 'bar', + layers: [ + { + seriesType: 'bar', + layerId: 'first', + splitAccessor: 'baz', + xAccessor: 'foo', + accessors: ['bar'], + }, + ], + }; + } + + beforeEach(() => { + frame = createMockFramePublicAPI(); + frame.datasourceLayers = { + first: createMockDatasource('test').publicAPIMock, + }; + }); + it('should disable the visual options for stacked bar charts', () => { + const state = testState(); + const component = shallow( + + ); + + expect(component.find(ToolbarPopover).prop('isDisabled')).toEqual(true); + }); + + it('should disable the values and fitting for percentage area charts', () => { + const state = testState(); + const component = shallow( + + ); + + expect(component.find(MissingValuesOptions).prop('isValueLabelsEnabled')).toEqual(false); + expect(component.find(MissingValuesOptions).prop('isFittingEnabled')).toEqual(false); + }); + + it('should not disable the visual options for percentage area charts', () => { + const state = testState(); + const component = shallow( + + ); + + expect(component.find(ToolbarPopover).prop('isDisabled')).toEqual(false); + }); + + it('should disabled the popover if there is histogram series', () => { + // make it detect an histogram series + frame.datasourceLayers.first.getOperationForColumnId = jest.fn().mockReturnValueOnce({ + isBucketed: true, + scale: 'interval', + }); + const state = testState(); + const component = shallow( + + ); + + expect(component.find(ToolbarPopover).prop('isDisabled')).toEqual(true); + }); + + it('should hide the fitting option for bar series', () => { + const state = testState(); + const component = shallow( + + ); + + expect(component.find(MissingValuesOptions).prop('isFittingEnabled')).toEqual(false); + }); + + it('should show the popover and display field enabled for bar and horizontal_bar series', () => { + const state = testState(); + + const component = shallow( + + ); + + expect(component.find(MissingValuesOptions).prop('isValueLabelsEnabled')).toEqual(true); + }); + + it('should hide in the popover the display option for area and line series', () => { + const state = testState(); + const component = shallow( + + ); + + expect(component.find(MissingValuesOptions).prop('isValueLabelsEnabled')).toEqual(false); + }); + + it('should keep the display option for bar series with multiple layers', () => { + frame.datasourceLayers = { + ...frame.datasourceLayers, + second: createMockDatasource('test').publicAPIMock, + }; + + const state = testState(); + const component = shallow( + + ); + + expect(component.find(MissingValuesOptions).prop('isValueLabelsEnabled')).toEqual(true); + }); +}); diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.tsx new file mode 100644 index 0000000000000..fcdef86cc5d0e --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.tsx @@ -0,0 +1,116 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { ToolbarPopover } from '../../shared_components'; +import { MissingValuesOptions } from './missing_values_option'; +import { LineCurveOption } from './line_curve_option'; +import { XYState } from '../types'; +import { hasHistogramSeries } from '../state_helpers'; +import { ValidLayer } from '../types'; +import { TooltipWrapper } from '../tooltip_wrapper'; +import { FramePublicAPI } from '../../types'; + +function getValueLabelDisableReason({ + isAreaPercentage, + isHistogramSeries, +}: { + isAreaPercentage: boolean; + isHistogramSeries: boolean; +}): string { + if (isHistogramSeries) { + return i18n.translate('xpack.lens.xyChart.valuesHistogramDisabledHelpText', { + defaultMessage: 'This setting cannot be changed on histograms.', + }); + } + if (isAreaPercentage) { + return i18n.translate('xpack.lens.xyChart.valuesPercentageDisabledHelpText', { + defaultMessage: 'This setting cannot be changed on percentage area charts.', + }); + } + return i18n.translate('xpack.lens.xyChart.valuesStackedDisabledHelpText', { + defaultMessage: 'This setting cannot be changed on stacked or percentage bar charts', + }); +} + +export interface VisualOptionsPopoverProps { + state: XYState; + setState: (newState: XYState) => void; + datasourceLayers: FramePublicAPI['datasourceLayers']; +} + +export const VisualOptionsPopover: React.FC = ({ + state, + setState, + datasourceLayers, +}) => { + const isAreaPercentage = state?.layers.some( + ({ seriesType }) => seriesType === 'area_percentage_stacked' + ); + + const hasNonBarSeries = state?.layers.some(({ seriesType }) => + ['area_stacked', 'area', 'line'].includes(seriesType) + ); + + const hasBarNotStacked = state?.layers.some(({ seriesType }) => + ['bar', 'bar_horizontal'].includes(seriesType) + ); + + const isHistogramSeries = Boolean( + hasHistogramSeries(state?.layers as ValidLayer[], datasourceLayers) + ); + + const isValueLabelsEnabled = !hasNonBarSeries && hasBarNotStacked && !isHistogramSeries; + const isFittingEnabled = hasNonBarSeries; + const isCurveTypeEnabled = hasNonBarSeries || isAreaPercentage; + + const valueLabelsDisabledReason = getValueLabelDisableReason({ + isAreaPercentage, + isHistogramSeries, + }); + + const isDisabled = !isValueLabelsEnabled && !isFittingEnabled && !isCurveTypeEnabled; + + return ( + + + { + setState({ + ...state, + curveType: id, + }); + }} + /> + + { + setState({ ...state, valueLabels: newMode }); + }} + onFittingFnChange={(newVal) => { + setState({ ...state, fittingFunction: newVal }); + }} + /> + + + ); +}; 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 40ac4958aefb9..f965140a48ca0 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 @@ -7,9 +7,8 @@ import React from 'react'; import { mountWithIntl as mount, shallowWithIntl as shallow } from '@kbn/test/jest'; -import { EuiButtonGroupProps, EuiSuperSelect, EuiButtonGroup } from '@elastic/eui'; +import { EuiButtonGroupProps, EuiButtonGroup } from '@elastic/eui'; import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel'; -import { ToolbarPopover } from '../shared_components'; import { AxisSettingsPopover } from './axis_settings_popover'; import { FramePublicAPI } from '../types'; import { State } from './types'; @@ -101,179 +100,6 @@ describe('XY Config panels', () => { }); 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 show currently selected value labels display setting', () => { - const state = testState(); - - const component = shallow( - - ); - - expect(component.find(EuiButtonGroup).prop('idSelected')).toEqual('value_labels_inside'); - }); - - it('should disable the popover for stacked bar charts', () => { - const state = testState(); - const component = shallow( - - ); - - expect(component.find(ToolbarPopover).prop('isDisabled')).toEqual(true); - }); - - it('should disable the popover for percentage area charts', () => { - const state = testState(); - const component = shallow( - - ); - - expect(component.find(ToolbarPopover).prop('isDisabled')).toEqual(true); - }); - - it('should disabled the popover if there is histogram series', () => { - // make it detect an histogram series - frame.datasourceLayers.first.getOperationForColumnId = jest.fn().mockReturnValueOnce({ - isBucketed: true, - scale: 'interval', - }); - const state = testState(); - const component = shallow( - - ); - - expect(component.find(ToolbarPopover).prop('isDisabled')).toEqual(true); - }); - - it('should show the popover and display field enabled for bar and horizontal_bar series', () => { - const state = testState(); - - const component = shallow( - - ); - - expect(component.exists('[data-test-subj="lnsValueLabelsDisplay"]')).toEqual(true); - }); - - it('should hide the fitting option for bar series', () => { - const state = testState(); - const component = shallow( - - ); - - expect(component.exists('[data-test-subj="lnsMissingValuesSelect"]')).toEqual(false); - }); - - it('should hide in the popover the display option for area and line series', () => { - const state = testState(); - const component = shallow( - - ); - - expect(component.exists('[data-test-subj="lnsValueLabelsDisplay"]')).toEqual(false); - }); - - it('should keep the display option for bar series with multiple layers', () => { - frame.datasourceLayers = { - ...frame.datasourceLayers, - second: createMockDatasource('test').publicAPIMock, - }; - - const state = testState(); - const component = shallow( - - ); - - expect(component.exists('[data-test-subj="lnsValueLabelsDisplay"]')).toEqual(true); - }); - it('should disable the popover if there is no right axis', () => { const state = testState(); const component = shallow(); 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 ac08c55eeadbf..d7868a17bf9db 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 @@ -14,15 +14,12 @@ import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, - EuiSuperSelect, EuiFormRow, - EuiText, htmlIdGenerator, EuiColorPicker, EuiColorPickerProps, EuiToolTip, EuiIcon, - EuiIconTip, } from '@elastic/eui'; import { PaletteRegistry } from 'src/plugins/charts/public'; import { @@ -31,29 +28,17 @@ import { VisualizationDimensionEditorProps, FormatFactory, } from '../types'; -import { - State, - SeriesType, - visualizationTypes, - YAxisMode, - AxesSettingsConfig, - ValidLayer, -} from './types'; -import { - isHorizontalChart, - isHorizontalSeries, - getSeriesColor, - hasHistogramSeries, -} from './state_helpers'; +import { State, SeriesType, visualizationTypes, YAxisMode, AxesSettingsConfig } from './types'; +import { isHorizontalChart, isHorizontalSeries, getSeriesColor } from './state_helpers'; import { trackUiEvent } from '../lens_ui_telemetry'; -import { fittingFunctionDefinitions } from './fitting_functions'; -import { ToolbarPopover, LegendSettingsPopover } from '../shared_components'; +import { LegendSettingsPopover } from '../shared_components'; import { AxisSettingsPopover } from './axis_settings_popover'; import { TooltipWrapper } from './tooltip_wrapper'; import { getAxesConfiguration } from './axes_configuration'; import { PalettePicker } from '../shared_components'; import { getAccessorColorConfig, getColorAssignments } from './color_assignment'; import { getSortedAccessors } from './to_expression'; +import { VisualOptionsPopover } from './visual_options_popover/visual_options_popover'; type UnwrapArray = T extends Array ? P : T; type AxesSettingsConfigKeys = keyof AxesSettingsConfig; @@ -92,30 +77,6 @@ const legendOptions: Array<{ id: string; value: 'auto' | 'show' | 'hide'; label: }, ]; -const valueLabelsOptions: Array<{ - id: string; - value: 'hide' | 'inside' | 'outside'; - label: string; - 'data-test-subj': string; -}> = [ - { - id: `value_labels_hide`, - value: 'hide', - label: i18n.translate('xpack.lens.xyChart.valueLabelsVisibility.auto', { - defaultMessage: 'Hide', - }), - 'data-test-subj': 'lnsXY_valueLabels_hide', - }, - { - id: `value_labels_inside`, - value: 'inside', - label: i18n.translate('xpack.lens.xyChart.valueLabelsVisibility.inside', { - defaultMessage: 'Show', - }), - 'data-test-subj': 'lnsXY_valueLabels_inside', - }, -]; - export function LayerContextMenu(props: VisualizationLayerWidgetProps) { const { state, layerId } = props; const horizontalOnly = isHorizontalChart(state.layers); @@ -159,46 +120,9 @@ export function LayerContextMenu(props: VisualizationLayerWidgetProps) { ); } -function getValueLabelDisableReason({ - isAreaPercentage, - isHistogramSeries, -}: { - isAreaPercentage: boolean; - isHistogramSeries: boolean; -}): string { - if (isHistogramSeries) { - return i18n.translate('xpack.lens.xyChart.valuesHistogramDisabledHelpText', { - defaultMessage: 'This setting cannot be changed on histograms.', - }); - } - if (isAreaPercentage) { - return i18n.translate('xpack.lens.xyChart.valuesPercentageDisabledHelpText', { - defaultMessage: 'This setting cannot be changed on percentage area charts.', - }); - } - return i18n.translate('xpack.lens.xyChart.valuesStackedDisabledHelpText', { - defaultMessage: 'This setting cannot be changed on stacked or percentage bar charts', - }); -} export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProps) { const { state, setState, frame } = props; - const hasNonBarSeries = state?.layers.some(({ seriesType }) => - ['area_stacked', 'area', 'line'].includes(seriesType) - ); - - const hasBarNotStacked = state?.layers.some(({ seriesType }) => - ['bar', 'bar_horizontal'].includes(seriesType) - ); - - const isAreaPercentage = state?.layers.some( - ({ seriesType }) => seriesType === 'area_percentage_stacked' - ); - - const isHistogramSeries = Boolean( - hasHistogramSeries(state?.layers as ValidLayer[], frame.datasourceLayers) - ); - const shouldRotate = state?.layers.length ? isHorizontalChart(state.layers) : false; const axisGroups = getAxesConfiguration(state?.layers, shouldRotate); @@ -267,113 +191,15 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp ? 'hide' : 'show'; - const valueLabelsVisibilityMode = state?.valueLabels || 'hide'; - - const isValueLabelsEnabled = !hasNonBarSeries && hasBarNotStacked && !isHistogramSeries; - const isFittingEnabled = hasNonBarSeries; - - const valueLabelsDisabledReason = getValueLabelDisableReason({ - isAreaPercentage, - isHistogramSeries, - }); - return ( - - - {isValueLabelsEnabled ? ( - - {i18n.translate('xpack.lens.shared.chartValueLabelVisibilityLabel', { - defaultMessage: 'Labels', - })} - - } - > - value === valueLabelsVisibilityMode)! - .id - } - onChange={(modeId) => { - const newMode = valueLabelsOptions.find(({ id }) => id === modeId)!.value; - setState({ ...state, valueLabels: newMode }); - }} - /> - - ) : null} - {isFittingEnabled ? ( - - {i18n.translate('xpack.lens.xyChart.missingValuesLabel', { - defaultMessage: 'Missing values', - })}{' '} - - - } - > - { - return { - value: id, - dropdownDisplay: ( - <> - {title} - -

{description}

- - - ), - inputDisplay: title, - }; - })} - valueOfSelected={state?.fittingFunction || 'None'} - onChange={(value) => setState({ ...state, fittingFunction: value })} - itemLayoutAlign="top" - hasDividers - /> - - ) : null} - - + '—'; diff --git a/x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts b/x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts new file mode 100644 index 0000000000000..1516ca9128893 --- /dev/null +++ b/x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { RecursivePartial } from '@elastic/eui/src/components/common'; + +import { EuiTheme } from '../../../../../../src/plugins/kibana_react/common'; + +export const getMockTheme = (partialTheme: RecursivePartial): EuiTheme => + partialTheme as EuiTheme; diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx new file mode 100644 index 0000000000000..8272ca9683a4f --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx @@ -0,0 +1,79 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { Story, addDecorator } from '@storybook/react'; +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; + +import { getMockTheme } from '../../../common/test_utils/kibana_react.mock'; + +import { AndOrBadge, AndOrBadgeProps } from '.'; + +const sampleText = + 'Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys. You are doing me the shock smol borking doggo with a long snoot for pats wow very biscit, length boy. Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys.'; + +const mockTheme = getMockTheme({ + darkMode: false, + eui: euiLightVars, +}); + +addDecorator((storyFn) => {storyFn()}); + +export default { + argTypes: { + includeAntennas: { + control: { + type: 'boolean', + }, + description: 'Determines whether extending vertical lines appear extended off of round badge', + table: { + defaultValue: { + summary: false, + }, + }, + type: { + required: false, + }, + }, + type: { + control: { + options: ['and', 'or'], + type: 'select', + }, + description: '`and | or` - determines text displayed in badge.', + table: { + defaultValue: { + summary: 'and', + }, + }, + type: { + required: true, + }, + }, + }, + component: AndOrBadge, + title: 'AndOrBadge', +}; + +const AndOrBadgeTemplate: Story = (args) => ( + + + + + +

{sampleText}

+ + +); + +export const Default = AndOrBadgeTemplate.bind({}); +Default.args = { + includeAntennas: false, + type: 'and', +}; diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx new file mode 100644 index 0000000000000..47282d061a65d --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx @@ -0,0 +1,62 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { mount } from 'enzyme'; + +import { getMockTheme } from '../../../common/test_utils/kibana_react.mock'; + +import { AndOrBadge } from './'; + +const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } }); + +describe('AndOrBadge', () => { + test('it renders top and bottom antenna bars when "includeAntennas" is true', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); + expect(wrapper.find('[data-test-subj="andOrBadgeBarTop"]').exists()).toBeTruthy(); + expect(wrapper.find('[data-test-subj="andOrBadgeBarBottom"]').exists()).toBeTruthy(); + }); + + test('it does not render top and bottom antenna bars when "includeAntennas" is false', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR'); + expect(wrapper.find('[data-test-subj="andOrBadgeBarTop"]').exists()).toBeFalsy(); + expect(wrapper.find('[data-test-subj="andOrBadgeBarBottom"]').exists()).toBeFalsy(); + }); + + test('it renders "and" when "type" is "and"', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); + }); + + test('it renders "or" when "type" is "or"', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR'); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.tsx new file mode 100644 index 0000000000000..a7cbe66c16935 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +import { RoundedBadge } from './rounded_badge'; +import { RoundedBadgeAntenna } from './rounded_badge_antenna'; + +export type AndOr = 'and' | 'or'; +export interface AndOrBadgeProps { + type: AndOr; + includeAntennas?: boolean; +} +/** Displays AND / OR in a round badge */ +// This ticket is closed, however, as of 3/23/21 no round badge yet +// Ref: https://github.com/elastic/eui/issues/1655 +export const AndOrBadge = React.memo(({ type, includeAntennas = false }) => { + return includeAntennas ? : ; +}); + +AndOrBadge.displayName = 'AndOrBadge'; diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.test.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.test.tsx new file mode 100644 index 0000000000000..489d02990b1f4 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.test.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { mount } from 'enzyme'; + +import { RoundedBadge } from './rounded_badge'; + +describe('RoundedBadge', () => { + test('it renders "and" when "type" is "and"', () => { + const wrapper = mount(); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); + }); + + test('it renders "or" when "type" is "or"', () => { + const wrapper = mount(); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR'); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.tsx new file mode 100644 index 0000000000000..0e8a8ee823593 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.tsx @@ -0,0 +1,44 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiBadge } from '@elastic/eui'; +import React from 'react'; +import styled from 'styled-components'; + +import * as i18n from './translations'; + +import { AndOr } from '.'; + +const RoundBadge = (styled(EuiBadge)` + align-items: center; + border-radius: 100%; + display: inline-flex; + font-size: 9px; + height: 34px; + justify-content: center; + margin: 0 5px 0 5px; + padding: 7px 6px 4px 6px; + user-select: none; + width: 34px; + .euiBadge__content { + position: relative; + top: -1px; + } + .euiBadge__text { + text-overflow: clip; + } +` as unknown) as typeof EuiBadge; + +RoundBadge.displayName = 'RoundBadge'; + +export const RoundedBadge: React.FC<{ type: AndOr }> = ({ type }) => ( + + {type === 'and' ? i18n.AND : i18n.OR} + +); + +RoundedBadge.displayName = 'RoundedBadge'; diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx new file mode 100644 index 0000000000000..472345b9c9f19 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx @@ -0,0 +1,50 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { mount } from 'enzyme'; + +import { getMockTheme } from '../../../common/test_utils/kibana_react.mock'; + +import { RoundedBadgeAntenna } from './rounded_badge_antenna'; + +const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } }); + +describe('RoundedBadgeAntenna', () => { + test('it renders top and bottom antenna bars', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); + expect(wrapper.find('[data-test-subj="andOrBadgeBarTop"]').exists()).toBeTruthy(); + expect(wrapper.find('[data-test-subj="andOrBadgeBarBottom"]').exists()).toBeTruthy(); + }); + + test('it renders "and" when "type" is "and"', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); + }); + + test('it renders "or" when "type" is "or"', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR'); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.tsx new file mode 100644 index 0000000000000..3e9d850db33b7 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.tsx @@ -0,0 +1,59 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import React from 'react'; +import styled, { css } from 'styled-components'; + +import { RoundedBadge } from './rounded_badge'; + +import { AndOr } from '.'; + +const antennaStyles = css` + background: ${({ theme }): string => theme.eui.euiColorLightShade}; + position: relative; + width: 2px; + &:after { + background: ${({ theme }): string => theme.eui.euiColorLightShade}; + content: ''; + height: 8px; + right: -4px; + position: absolute; + width: 10px; + clip-path: circle(); + } +`; + +const TopAntenna = styled(EuiFlexItem)` + ${antennaStyles} + &:after { + top: 0; + } +`; +const BottomAntenna = styled(EuiFlexItem)` + ${antennaStyles} + &:after { + bottom: 0; + } +`; + +export const RoundedBadgeAntenna: React.FC<{ type: AndOr }> = ({ type }) => ( + + + + + + + +); + +RoundedBadgeAntenna.displayName = 'RoundedBadgeAntenna'; diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/translations.ts b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/translations.ts new file mode 100644 index 0000000000000..0a0a46b224db1 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/translations.ts @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +export const AND = i18n.translate('xpack.lists.andOrBadge.andLabel', { + defaultMessage: 'AND', +}); + +export const OR = i18n.translate('xpack.lists.andOrBadge.orLabel', { + defaultMessage: 'OR', +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/README.md b/x-pack/plugins/lists/public/exceptions/components/autocomplete/README.md new file mode 100644 index 0000000000000..fb500ca0761e3 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/README.md @@ -0,0 +1,122 @@ +# Autocomplete Fields + +Need an input that shows available index fields? Or an input that autocompletes based on a selected indexPattern field? Bingo! That's what these components are for. They are generalized enough so that they can be reused throughout and repurposed based on your needs. + +All three of the available components rely on Eui's combo box. + +## useFieldValueAutocomplete + +This hook uses the kibana `services.data.autocomplete.getValueSuggestions()` service to return possible autocomplete fields based on the passed in `indexPattern` and `selectedField`. + +## FieldComponent + +This component can be used to display available indexPattern fields. It requires an indexPattern to be passed in and will show an error state if value is not one of the available indexPattern fields. Users will be able to select only one option. + +The `onChange` handler is passed `IFieldType[]`. + +```js + +``` + +## OperatorComponent + +This component can be used to display available operators. If you want to pass in your own operators, you can use `operatorOptions` prop. If a `operatorOptions` is provided, those will be used and it will ignore any of the built in logic that determines which operators to show. The operators within `operatorOptions` will still need to be of type `OperatorOption`. + +If no `operatorOptions` is provided, then the following behavior is observed: + +- if `selectedField` type is `boolean`, only `is`, `is not`, `exists`, `does not exist` operators will show +- if `selectedField` type is `nested`, only `is` operator will show +- if not one of the above, all operators will show (see `operators.ts`) + +The `onChange` handler is passed `OperatorOption[]`. + +```js + +``` + +## AutocompleteFieldExistsComponent + +This field value component is used when the selected operator is `exists` or `does not exist`. When these operators are selected, they are equivalent to using a wildcard. The combo box will be displayed as disabled. + +```js + +``` + +## AutocompleteFieldListsComponent + +This component can be used to display available large value lists - when operator selected is `is in list` or `is not in list`. It relies on hooks from the `lists` plugin. Users can only select one list and an error is shown if value is not one of available lists. + +The `selectedValue` should be the `id` of the selected list. + +This component relies on `selectedField` to render available lists. The reason being that it relies on the `selectedField` type to determine which lists to show as each large value list has a type as well. So if a user selects a field of type `ip`, it will only display lists of type `ip`. + +The `onChange` handler is passed `ListSchema`. + +```js + +``` + +## AutocompleteFieldMatchComponent + +This component can be used to allow users to select one single value. It uses the autocomplete hook to display any autocomplete options based on the passed in `indexPattern`, but also allows a user to add their own value. + +It does some minor validation, assuring that field value is a date if `selectedField` type is `date`, a number if `selectedField` type is `number`, an ip if `selectedField` type is `ip`. + +The `onChange` handler is passed selected `string`. + +```js + +``` + +## AutocompleteFieldMatchAnyComponent + +This component can be used to allow users to select multiple values. It uses the autocomplete hook to display any autocomplete options based on the passed in `indexPattern`, but also allows a user to add their own values. + +It does some minor validation, assuring that field values are a date if `selectedField` type is `date`, numbers if `selectedField` type is `number`, ips if `selectedField` type is `ip`. + +The `onChange` handler is passed selected `string[]`. + +```js + +``` \ No newline at end of file diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field.test.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field.test.tsx new file mode 100644 index 0000000000000..416852b469a79 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field.test.tsx @@ -0,0 +1,147 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { mount } from 'enzyme'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; + +import { + fields, + getField, +} from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; + +import { FieldComponent } from './field'; + +describe('FieldComponent', () => { + test('it renders disabled if "isDisabled" is true', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="fieldAutocompleteComboBox"] input`).prop('disabled') + ).toBeTruthy(); + }); + + test('it renders loading if "isLoading" is true', () => { + const wrapper = mount( + + ); + wrapper.find(`[data-test-subj="fieldAutocompleteComboBox"] button`).at(0).simulate('click'); + expect( + wrapper + .find(`EuiComboBoxOptionsList[data-test-subj="fieldAutocompleteComboBox-optionsList"]`) + .prop('isLoading') + ).toBeTruthy(); + }); + + test('it allows user to clear values if "isClearable" is true', () => { + const wrapper = mount( + + ); + + expect( + wrapper + .find(`[data-test-subj="comboBoxInput"]`) + .hasClass('euiComboBox__inputWrap-isClearable') + ).toBeTruthy(); + }); + + test('it correctly displays selected field', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="fieldAutocompleteComboBox"] EuiComboBoxPill`).at(0).text() + ).toEqual('machine.os.raw'); + }); + + test('it invokes "onChange" when option selected', () => { + const mockOnChange = jest.fn(); + const wrapper = mount( + + ); + + ((wrapper.find(EuiComboBox).props() as unknown) as { + onChange: (a: EuiComboBoxOptionOption[]) => void; + }).onChange([{ label: 'machine.os' }]); + + expect(mockOnChange).toHaveBeenCalledWith([ + { + aggregatable: true, + count: 0, + esTypes: ['text'], + name: 'machine.os', + readFromDocValues: false, + scripted: false, + searchable: true, + type: 'string', + }, + ]); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field.tsx new file mode 100644 index 0000000000000..b3a5e36f12e40 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field.tsx @@ -0,0 +1,146 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useCallback, useMemo, useState } from 'react'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; + +import { IFieldType, IIndexPattern } from '../../../../../../../src/plugins/data/common'; + +import { getGenericComboBoxProps } from './helpers'; +import { GetGenericComboBoxPropsReturn } from './types'; + +const AS_PLAIN_TEXT = { asPlainText: true }; + +interface OperatorProps { + fieldInputWidth?: number; + fieldTypeFilter?: string[]; + indexPattern: IIndexPattern | undefined; + isClearable: boolean; + isDisabled: boolean; + isLoading: boolean; + isRequired?: boolean; + onChange: (a: IFieldType[]) => void; + placeholder: string; + selectedField: IFieldType | undefined; +} + +export const FieldComponent: React.FC = ({ + fieldInputWidth, + fieldTypeFilter = [], + indexPattern, + isClearable = false, + isDisabled = false, + isLoading = false, + isRequired = false, + onChange, + placeholder, + selectedField, +}): JSX.Element => { + const [touched, setIsTouched] = useState(false); + + const { availableFields, selectedFields } = useMemo( + () => getComboBoxFields(indexPattern, selectedField, fieldTypeFilter), + [indexPattern, selectedField, fieldTypeFilter] + ); + + const { comboOptions, labels, selectedComboOptions } = useMemo( + () => getComboBoxProps({ availableFields, selectedFields }), + [availableFields, selectedFields] + ); + + const handleValuesChange = useCallback( + (newOptions: EuiComboBoxOptionOption[]): void => { + const newValues: IFieldType[] = newOptions.map( + ({ label }) => availableFields[labels.indexOf(label)] + ); + onChange(newValues); + }, + [availableFields, labels, onChange] + ); + + const handleTouch = useCallback((): void => { + setIsTouched(true); + }, [setIsTouched]); + + const fieldWidth = useMemo(() => { + return fieldInputWidth ? { width: `${fieldInputWidth}px` } : {}; + }, [fieldInputWidth]); + + return ( + + ); +}; + +FieldComponent.displayName = 'Field'; + +interface ComboBoxFields { + availableFields: IFieldType[]; + selectedFields: IFieldType[]; +} + +const getComboBoxFields = ( + indexPattern: IIndexPattern | undefined, + selectedField: IFieldType | undefined, + fieldTypeFilter: string[] +): ComboBoxFields => { + const existingFields = getExistingFields(indexPattern); + const selectedFields = getSelectedFields(selectedField); + const availableFields = getAvailableFields(existingFields, selectedFields, fieldTypeFilter); + + return { availableFields, selectedFields }; +}; + +const getComboBoxProps = (fields: ComboBoxFields): GetGenericComboBoxPropsReturn => { + const { availableFields, selectedFields } = fields; + + return getGenericComboBoxProps({ + getLabel: (field) => field.name, + options: availableFields, + selectedOptions: selectedFields, + }); +}; + +const getExistingFields = (indexPattern: IIndexPattern | undefined): IFieldType[] => { + return indexPattern != null ? indexPattern.fields : []; +}; + +const getSelectedFields = (selectedField: IFieldType | undefined): IFieldType[] => { + return selectedField ? [selectedField] : []; +}; + +const getAvailableFields = ( + existingFields: IFieldType[], + selectedFields: IFieldType[], + fieldTypeFilter: string[] +): IFieldType[] => { + const fieldsByName = new Map(); + + existingFields.forEach((f) => fieldsByName.set(f.name, f)); + selectedFields.forEach((f) => fieldsByName.set(f.name, f)); + + const uniqueFields = Array.from(fieldsByName.values()); + + if (fieldTypeFilter.length > 0) { + return uniqueFields.filter(({ type }) => fieldTypeFilter.includes(type)); + } + + return uniqueFields; +}; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_exists.test.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_exists.test.tsx new file mode 100644 index 0000000000000..b6300581f12dd --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_exists.test.tsx @@ -0,0 +1,23 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { mount } from 'enzyme'; + +import { AutocompleteFieldExistsComponent } from './field_value_exists'; + +describe('AutocompleteFieldExistsComponent', () => { + test('it renders field disabled', () => { + const wrapper = mount(); + + expect( + wrapper + .find(`[data-test-subj="valuesAutocompleteComboBox existsComboxBox"] input`) + .prop('disabled') + ).toBeTruthy(); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_exists.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_exists.tsx new file mode 100644 index 0000000000000..ff70204e53483 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_exists.tsx @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui'; + +const NO_OPTIONS_FOR_EXIST: EuiComboBoxOptionOption[] = []; + +interface AutocompleteFieldExistsProps { + placeholder: string; + rowLabel?: string; +} + +export const AutocompleteFieldExistsComponent: React.FC = ({ + placeholder, + rowLabel, +}): JSX.Element => ( + + + +); + +AutocompleteFieldExistsComponent.displayName = 'AutocompleteFieldExists'; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_lists.test.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_lists.test.tsx new file mode 100644 index 0000000000000..a5588b36aae03 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_lists.test.tsx @@ -0,0 +1,224 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { mount } from 'enzyme'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; +import { waitFor } from '@testing-library/react'; + +import { coreMock } from '../../../../../../../src/core/public/mocks'; +import { getField } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; +import { ListSchema } from '../../../../common'; +import { getFoundListSchemaMock } from '../../../../../lists/common/schemas/response/found_list_schema.mock'; +import { getListResponseMock } from '../../../../../lists/common/schemas/response/list_schema.mock'; +import { DATE_NOW, IMMUTABLE, VERSION } from '../../../../../lists/common/constants.mock'; + +import { AutocompleteFieldListsComponent } from './field_value_lists'; + +const mockKibanaHttpService = coreMock.createStart().http; + +const mockStart = jest.fn(); +const mockKeywordList: ListSchema = { + ...getListResponseMock(), + id: 'keyword_list', + name: 'keyword list', + type: 'keyword', +}; +const mockResult = { ...getFoundListSchemaMock() }; +mockResult.data = [...mockResult.data, mockKeywordList]; +jest.mock('../../..', () => { + const originalModule = jest.requireActual('../../..'); + + return { + ...originalModule, + // eslint-disable-next-line @typescript-eslint/explicit-function-return-type + useFindLists: () => ({ + error: undefined, + loading: false, + result: mockResult, + start: mockStart.mockReturnValue(mockResult), + }), + }; +}); + +describe('AutocompleteFieldListsComponent', () => { + test('it renders disabled if "isDisabled" is true', async () => { + const wrapper = mount( + + ); + + expect( + wrapper + .find(`[data-test-subj="valuesAutocompleteComboBox listsComboxBox"] input`) + .prop('disabled') + ).toBeTruthy(); + }); + + test('it renders loading if "isLoading" is true', async () => { + const wrapper = mount( + + ); + + wrapper + .find(`[data-test-subj="valuesAutocompleteComboBox listsComboxBox"] button`) + .at(0) + .simulate('click'); + expect( + wrapper + .find( + `EuiComboBoxOptionsList[data-test-subj="valuesAutocompleteComboBox listsComboxBox-optionsList"]` + ) + .prop('isLoading') + ).toBeTruthy(); + }); + + test('it allows user to clear values if "isClearable" is true', async () => { + const wrapper = mount( + + ); + expect( + wrapper + .find('EuiComboBox[data-test-subj="valuesAutocompleteComboBox listsComboxBox"]') + .prop('options') + ).toEqual([{ label: 'some name' }]); + }); + + test('it correctly displays lists that match the selected "keyword" field esType', () => { + const wrapper = mount( + + ); + + wrapper.find('[data-test-subj="comboBoxToggleListButton"] button').simulate('click'); + + expect( + wrapper + .find('EuiComboBox[data-test-subj="valuesAutocompleteComboBox listsComboxBox"]') + .prop('options') + ).toEqual([{ label: 'keyword list' }]); + }); + + test('it correctly displays lists that match the selected "ip" field esType', () => { + const wrapper = mount( + + ); + + wrapper.find('[data-test-subj="comboBoxToggleListButton"] button').simulate('click'); + + expect( + wrapper + .find('EuiComboBox[data-test-subj="valuesAutocompleteComboBox listsComboxBox"]') + .prop('options') + ).toEqual([{ label: 'some name' }]); + }); + + test('it correctly displays selected list', async () => { + const wrapper = mount( + + ); + + expect( + wrapper + .find(`[data-test-subj="valuesAutocompleteComboBox listsComboxBox"] EuiComboBoxPill`) + .at(0) + .text() + ).toEqual('some name'); + }); + + test('it invokes "onChange" when option selected', async () => { + const mockOnChange = jest.fn(); + const wrapper = mount( + + ); + + ((wrapper.find(EuiComboBox).props() as unknown) as { + onChange: (a: EuiComboBoxOptionOption[]) => void; + }).onChange([{ label: 'some name' }]); + + await waitFor(() => { + expect(mockOnChange).toHaveBeenCalledWith({ + _version: undefined, + created_at: DATE_NOW, + created_by: 'some user', + description: 'some description', + deserializer: undefined, + id: 'some-list-id', + immutable: IMMUTABLE, + meta: {}, + name: 'some name', + serializer: undefined, + tie_breaker_id: '6a76b69d-80df-4ab2-8c3e-85f466b06a0e', + type: 'ip', + updated_at: DATE_NOW, + updated_by: 'some user', + version: VERSION, + }); + }); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_lists.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_lists.tsx new file mode 100644 index 0000000000000..3d910403d4843 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_lists.tsx @@ -0,0 +1,123 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui'; +import { HttpStart } from 'kibana/public'; + +import { ListSchema } from '../../../../common'; +import { IFieldType } from '../../../../../../../src/plugins/data/common'; +import { useFindLists } from '../../..'; + +import { filterFieldToList, getGenericComboBoxProps } from './helpers'; +import * as i18n from './translations'; + +const SINGLE_SELECTION = { asPlainText: true }; + +interface AutocompleteFieldListsProps { + httpService: HttpStart; + isClearable: boolean; + isDisabled: boolean; + isLoading: boolean; + onChange: (arg: ListSchema) => void; + placeholder: string; + rowLabel?: string; + selectedField: IFieldType | undefined; + selectedValue: string | undefined; +} + +export const AutocompleteFieldListsComponent: React.FC = ({ + httpService, + isClearable = false, + isDisabled = false, + isLoading = false, + onChange, + placeholder, + rowLabel, + selectedField, + selectedValue, +}): JSX.Element => { + const [error, setError] = useState(undefined); + const [lists, setLists] = useState([]); + const { loading, result, start } = useFindLists(); + const getLabel = useCallback(({ name }) => name, []); + + const optionsMemo = useMemo(() => filterFieldToList(lists, selectedField), [ + lists, + selectedField, + ]); + const selectedOptionsMemo = useMemo(() => { + if (selectedValue != null) { + const list = lists.filter(({ id }) => id === selectedValue); + return list ?? []; + } else { + return []; + } + }, [selectedValue, lists]); + const { comboOptions, labels, selectedComboOptions } = useMemo( + () => + getGenericComboBoxProps({ + getLabel, + options: optionsMemo, + selectedOptions: selectedOptionsMemo, + }), + [optionsMemo, selectedOptionsMemo, getLabel] + ); + + const handleValuesChange = useCallback( + (newOptions: EuiComboBoxOptionOption[]) => { + const [newValue] = newOptions.map(({ label }) => optionsMemo[labels.indexOf(label)]); + onChange(newValue ?? ''); + }, + [labels, optionsMemo, onChange] + ); + + const setIsTouchedValue = useCallback((): void => { + setError(selectedValue == null ? i18n.FIELD_REQUIRED_ERR : undefined); + }, [selectedValue]); + + useEffect(() => { + if (result != null) { + setLists(result.data); + } + }, [result]); + + useEffect(() => { + if (selectedField != null && httpService != null) { + start({ + http: httpService, + pageIndex: 1, + pageSize: 500, + }); + } + }, [selectedField, start, httpService]); + + const isLoadingState = useMemo((): boolean => isLoading || loading, [isLoading, loading]); + + return ( + + + + ); +}; + +AutocompleteFieldListsComponent.displayName = 'AutocompleteFieldList'; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match.test.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match.test.tsx new file mode 100644 index 0000000000000..c1ffb008e8563 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match.test.tsx @@ -0,0 +1,443 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { ReactWrapper, mount } from 'enzyme'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiSuperSelect } from '@elastic/eui'; +import { act } from '@testing-library/react'; + +import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks'; +import { + fields, + getField, +} from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; + +import { AutocompleteFieldMatchComponent } from './field_value_match'; +import { useFieldValueAutocomplete } from './hooks/use_field_value_autocomplete'; + +jest.mock('./hooks/use_field_value_autocomplete'); + +const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract(); + +describe('AutocompleteFieldMatchComponent', () => { + let wrapper: ReactWrapper; + + const getValueSuggestionsMock = jest + .fn() + .mockResolvedValue([false, true, ['value 3', 'value 4'], jest.fn()]); + + beforeEach(() => { + (useFieldValueAutocomplete as jest.Mock).mockReturnValue([ + false, + true, + ['value 1', 'value 2'], + getValueSuggestionsMock, + ]); + }); + + afterEach(() => { + jest.clearAllMocks(); + wrapper.unmount(); + }); + + test('it renders row label if one passed in', () => { + wrapper = mount( + + ); + + expect( + wrapper.find('[data-test-subj="valuesAutocompleteMatchLabel"] label').at(0).text() + ).toEqual('Row Label'); + }); + + test('it renders disabled if "isDisabled" is true', () => { + wrapper = mount( + + ); + + expect( + wrapper.find('[data-test-subj="valuesAutocompleteMatch"] input').prop('disabled') + ).toBeTruthy(); + }); + + test('it renders loading if "isLoading" is true', () => { + wrapper = mount( + + ); + wrapper.find('[data-test-subj="valuesAutocompleteMatch"] button').at(0).simulate('click'); + expect( + wrapper + .find('EuiComboBoxOptionsList[data-test-subj="valuesAutocompleteMatch-optionsList"]') + .prop('isLoading') + ).toBeTruthy(); + }); + + test('it allows user to clear values if "isClearable" is true', () => { + wrapper = mount( + + ); + + expect( + wrapper + .find('[data-test-subj="comboBoxInput"]') + .hasClass('euiComboBox__inputWrap-isClearable') + ).toBeTruthy(); + }); + + test('it correctly displays selected value', () => { + wrapper = mount( + + ); + + expect( + wrapper.find('[data-test-subj="valuesAutocompleteMatch"] EuiComboBoxPill').at(0).text() + ).toEqual('126.45.211.34'); + }); + + test('it invokes "onChange" when new value created', async () => { + const mockOnChange = jest.fn(); + wrapper = mount( + + ); + + ((wrapper.find(EuiComboBox).props() as unknown) as { + onCreateOption: (a: string) => void; + }).onCreateOption('126.45.211.34'); + + expect(mockOnChange).toHaveBeenCalledWith('126.45.211.34'); + }); + + test('it invokes "onChange" when new value selected', async () => { + const mockOnChange = jest.fn(); + wrapper = mount( + + ); + + ((wrapper.find(EuiComboBox).props() as unknown) as { + onChange: (a: EuiComboBoxOptionOption[]) => void; + }).onChange([{ label: 'value 1' }]); + + expect(mockOnChange).toHaveBeenCalledWith('value 1'); + }); + + test('it refreshes autocomplete with search query when new value searched', () => { + wrapper = mount( + + ); + act(() => { + ((wrapper.find(EuiComboBox).props() as unknown) as { + onSearchChange: (a: string) => void; + }).onSearchChange('value 1'); + }); + + expect(useFieldValueAutocomplete).toHaveBeenCalledWith({ + autocompleteService: autocompleteStartMock, + fieldValue: '', + indexPattern: { + fields, + id: '1234', + title: 'logstash-*', + }, + operatorType: 'match', + query: 'value 1', + selectedField: getField('machine.os.raw'), + }); + }); + + describe('boolean type', () => { + const valueSuggestionsMock = jest.fn().mockResolvedValue([false, false, [], jest.fn()]); + + beforeEach(() => { + (useFieldValueAutocomplete as jest.Mock).mockReturnValue([ + false, + false, + [], + valueSuggestionsMock, + ]); + }); + + test('it displays only two options - "true" or "false"', () => { + wrapper = mount( + + ); + + expect( + wrapper.find('[data-test-subj="valuesAutocompleteMatchBoolean"]').exists() + ).toBeTruthy(); + expect( + wrapper.find('[data-test-subj="valuesAutocompleteMatchBoolean"]').at(0).prop('options') + ).toEqual([ + { + inputDisplay: 'true', + value: 'true', + }, + { + inputDisplay: 'false', + value: 'false', + }, + ]); + }); + + test('it invokes "onChange" with "true" when selected', () => { + const mockOnChange = jest.fn(); + wrapper = mount( + + ); + + ((wrapper.find(EuiSuperSelect).props() as unknown) as { + onChange: (a: string) => void; + }).onChange('true'); + + expect(mockOnChange).toHaveBeenCalledWith('true'); + }); + + test('it invokes "onChange" with "false" when selected', () => { + const mockOnChange = jest.fn(); + wrapper = mount( + + ); + + ((wrapper.find(EuiSuperSelect).props() as unknown) as { + onChange: (a: string) => void; + }).onChange('false'); + + expect(mockOnChange).toHaveBeenCalledWith('false'); + }); + }); + + describe('number type', () => { + const valueSuggestionsMock = jest.fn().mockResolvedValue([false, false, [], jest.fn()]); + + beforeEach(() => { + (useFieldValueAutocomplete as jest.Mock).mockReturnValue([ + false, + false, + [], + valueSuggestionsMock, + ]); + }); + + test('it number input when field type is number', () => { + wrapper = mount( + + ); + + expect( + wrapper.find('[data-test-subj="valueAutocompleteFieldMatchNumber"]').exists() + ).toBeTruthy(); + }); + + test('it invokes "onChange" with numeric value when inputted', () => { + const mockOnChange = jest.fn(); + wrapper = mount( + + ); + + wrapper + .find('[data-test-subj="valueAutocompleteFieldMatchNumber"] input') + .at(0) + .simulate('change', { target: { value: '8' } }); + + expect(mockOnChange).toHaveBeenCalledWith('8'); + }); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match.tsx new file mode 100644 index 0000000000000..a0994871808d1 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match.tsx @@ -0,0 +1,300 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { + EuiComboBox, + EuiComboBoxOptionOption, + EuiFieldNumber, + EuiFormRow, + EuiSuperSelect, +} from '@elastic/eui'; +import { uniq } from 'lodash'; + +import { OperatorTypeEnum } from '../../../../common'; +import { IFieldType, IIndexPattern } from '../../../../../../../src/plugins/data/common'; +import { AutocompleteStart } from '../../../../../../../src/plugins/data/public'; + +import { useFieldValueAutocomplete } from './hooks/use_field_value_autocomplete'; +import { getGenericComboBoxProps, paramIsValid } from './helpers'; +import { GetGenericComboBoxPropsReturn } from './types'; +import * as i18n from './translations'; + +const BOOLEAN_OPTIONS = [ + { inputDisplay: 'true', value: 'true' }, + { inputDisplay: 'false', value: 'false' }, +]; + +const SINGLE_SELECTION = { asPlainText: true }; + +interface AutocompleteFieldMatchProps { + placeholder: string; + selectedField: IFieldType | undefined; + selectedValue: string | undefined; + indexPattern: IIndexPattern | undefined; + isLoading: boolean; + isDisabled: boolean; + isClearable: boolean; + isRequired?: boolean; + fieldInputWidth?: number; + rowLabel?: string; + autocompleteService: AutocompleteStart; + onChange: (arg: string) => void; + onError?: (arg: boolean) => void; +} + +export const AutocompleteFieldMatchComponent: React.FC = ({ + placeholder, + rowLabel, + selectedField, + selectedValue, + indexPattern, + isLoading, + isDisabled = false, + isClearable = false, + isRequired = false, + fieldInputWidth, + onChange, + onError, + autocompleteService, +}): JSX.Element => { + const [searchQuery, setSearchQuery] = useState(''); + const [touched, setIsTouched] = useState(false); + const [error, setError] = useState(undefined); + const [isLoadingSuggestions, isSuggestingValues, suggestions] = useFieldValueAutocomplete({ + autocompleteService, + fieldValue: selectedValue, + indexPattern, + operatorType: OperatorTypeEnum.MATCH, + query: searchQuery, + selectedField, + }); + const getLabel = useCallback((option: string): string => option, []); + const optionsMemo = useMemo((): string[] => { + const valueAsStr = String(selectedValue); + return selectedValue != null && selectedValue.trim() !== '' + ? uniq([valueAsStr, ...suggestions]) + : suggestions; + }, [suggestions, selectedValue]); + const selectedOptionsMemo = useMemo((): string[] => { + const valueAsStr = String(selectedValue); + return selectedValue ? [valueAsStr] : []; + }, [selectedValue]); + + const handleError = useCallback( + (err: string | undefined): void => { + setError((existingErr): string | undefined => { + const oldErr = existingErr != null; + const newErr = err != null; + if (oldErr !== newErr && onError != null) { + onError(newErr); + } + + return err; + }); + }, + [setError, onError] + ); + + const { comboOptions, labels, selectedComboOptions } = useMemo( + (): GetGenericComboBoxPropsReturn => + getGenericComboBoxProps({ + getLabel, + options: optionsMemo, + selectedOptions: selectedOptionsMemo, + }), + [optionsMemo, selectedOptionsMemo, getLabel] + ); + + const handleValuesChange = useCallback( + (newOptions: EuiComboBoxOptionOption[]): void => { + const [newValue] = newOptions.map(({ label }) => optionsMemo[labels.indexOf(label)]); + handleError(undefined); + onChange(newValue ?? ''); + }, + [handleError, labels, onChange, optionsMemo] + ); + + const handleSearchChange = useCallback( + (searchVal: string): void => { + if (searchVal !== '' && selectedField != null) { + const err = paramIsValid(searchVal, selectedField, isRequired, touched); + handleError(err); + + setSearchQuery(searchVal); + } + }, + [handleError, isRequired, selectedField, touched] + ); + + const handleCreateOption = useCallback( + (option: string): boolean | undefined => { + const err = paramIsValid(option, selectedField, isRequired, touched); + handleError(err); + + if (err != null) { + // Explicitly reject the user's input + return false; + } else { + onChange(option); + return undefined; + } + }, + [isRequired, onChange, selectedField, touched, handleError] + ); + + const handleNonComboBoxInputChange = useCallback( + (event: React.ChangeEvent): void => { + const newValue = event.target.value; + onChange(newValue); + }, + [onChange] + ); + + const handleBooleanInputChange = useCallback( + (newOption: string): void => { + onChange(newOption); + }, + [onChange] + ); + + const setIsTouchedValue = useCallback((): void => { + setIsTouched(true); + + const err = paramIsValid(selectedValue, selectedField, isRequired, true); + handleError(err); + }, [setIsTouched, handleError, selectedValue, selectedField, isRequired]); + + const inputPlaceholder = useMemo((): string => { + if (isLoading || isLoadingSuggestions) { + return i18n.LOADING; + } else if (selectedField == null) { + return i18n.SELECT_FIELD_FIRST; + } else { + return placeholder; + } + }, [isLoading, selectedField, isLoadingSuggestions, placeholder]); + + const isLoadingState = useMemo((): boolean => isLoading || isLoadingSuggestions, [ + isLoading, + isLoadingSuggestions, + ]); + + const fieldInputWidths = useMemo( + () => (fieldInputWidth ? { width: `${fieldInputWidth}px` } : {}), + [fieldInputWidth] + ); + + useEffect((): void => { + setError(undefined); + if (onError != null) { + onError(false); + } + }, [selectedField, onError]); + + const defaultInput = useMemo((): JSX.Element => { + return ( + + + + ); + }, [ + comboOptions, + error, + fieldInputWidths, + handleCreateOption, + handleSearchChange, + handleValuesChange, + inputPlaceholder, + isClearable, + isDisabled, + isLoadingState, + rowLabel, + selectedComboOptions, + selectedField, + setIsTouchedValue, + ]); + + if (!isSuggestingValues && selectedField != null) { + switch (selectedField.type) { + case 'number': + return ( + + 0 + ? parseFloat(selectedValue) + : selectedValue ?? '' + } + onChange={handleNonComboBoxInputChange} + data-test-subj="valueAutocompleteFieldMatchNumber" + style={fieldInputWidths} + fullWidth + /> + + ); + case 'boolean': + return ( + + + + ); + default: + return defaultInput; + } + } else { + return defaultInput; + } +}; + +AutocompleteFieldMatchComponent.displayName = 'AutocompleteFieldMatch'; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match_any.test.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match_any.test.tsx new file mode 100644 index 0000000000000..8aa1f18b695a0 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match_any.test.tsx @@ -0,0 +1,269 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { ReactWrapper, mount } from 'enzyme'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; +import { act } from '@testing-library/react'; + +import { + fields, + getField, +} from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; +import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks'; + +import { AutocompleteFieldMatchAnyComponent } from './field_value_match_any'; +import { useFieldValueAutocomplete } from './hooks/use_field_value_autocomplete'; + +const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract(); + +jest.mock('./hooks/use_field_value_autocomplete'); + +describe('AutocompleteFieldMatchAnyComponent', () => { + let wrapper: ReactWrapper; + const getValueSuggestionsMock = jest + .fn() + .mockResolvedValue([false, true, ['value 3', 'value 4'], jest.fn()]); + + beforeEach(() => { + (useFieldValueAutocomplete as jest.Mock).mockReturnValue([ + false, + true, + ['value 1', 'value 2'], + getValueSuggestionsMock, + ]); + }); + + afterEach(() => { + jest.clearAllMocks(); + wrapper.unmount(); + }); + + test('it renders disabled if "isDisabled" is true', () => { + wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="valuesAutocompleteMatchAny"] input`).prop('disabled') + ).toBeTruthy(); + }); + + test('it renders loading if "isLoading" is true', () => { + wrapper = mount( + + ); + wrapper.find(`[data-test-subj="valuesAutocompleteMatchAny"] button`).at(0).simulate('click'); + expect( + wrapper + .find(`EuiComboBoxOptionsList[data-test-subj="valuesAutocompleteMatchAny-optionsList"]`) + .prop('isLoading') + ).toBeTruthy(); + }); + + test('it allows user to clear values if "isClearable" is true', () => { + wrapper = mount( + + ); + + expect( + wrapper + .find(`[data-test-subj="comboBoxInput"]`) + .hasClass('euiComboBox__inputWrap-isClearable') + ).toBeTruthy(); + }); + + test('it correctly displays selected value', () => { + wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="valuesAutocompleteMatchAny"] EuiComboBoxPill`).at(0).text() + ).toEqual('126.45.211.34'); + }); + + test('it invokes "onChange" when new value created', async () => { + const mockOnChange = jest.fn(); + wrapper = mount( + + ); + + ((wrapper.find(EuiComboBox).props() as unknown) as { + onCreateOption: (a: string) => void; + }).onCreateOption('126.45.211.34'); + + expect(mockOnChange).toHaveBeenCalledWith(['126.45.211.34']); + }); + + test('it invokes "onChange" when new value selected', async () => { + const mockOnChange = jest.fn(); + wrapper = mount( + + ); + + ((wrapper.find(EuiComboBox).props() as unknown) as { + onChange: (a: EuiComboBoxOptionOption[]) => void; + }).onChange([{ label: 'value 1' }]); + + expect(mockOnChange).toHaveBeenCalledWith(['value 1']); + }); + + test('it refreshes autocomplete with search query when new value searched', () => { + wrapper = mount( + + ); + act(() => { + ((wrapper.find(EuiComboBox).props() as unknown) as { + onSearchChange: (a: string) => void; + }).onSearchChange('value 1'); + }); + expect(useFieldValueAutocomplete).toHaveBeenCalledWith({ + autocompleteService: autocompleteStartMock, + fieldValue: [], + indexPattern: { + fields, + id: '1234', + title: 'logstash-*', + }, + operatorType: 'match_any', + query: 'value 1', + selectedField: getField('machine.os.raw'), + }); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match_any.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match_any.tsx new file mode 100644 index 0000000000000..08958f6d99aab --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/field_value_match_any.tsx @@ -0,0 +1,226 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useCallback, useMemo, useState } from 'react'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui'; +import { uniq } from 'lodash'; + +import { OperatorTypeEnum } from '../../../../common'; +import { IFieldType, IIndexPattern } from '../../../../../../../src/plugins/data/common'; +import { AutocompleteStart } from '../../../../../../../src/plugins/data/public'; + +import { useFieldValueAutocomplete } from './hooks/use_field_value_autocomplete'; +import { getGenericComboBoxProps, paramIsValid } from './helpers'; +import { GetGenericComboBoxPropsReturn } from './types'; +import * as i18n from './translations'; + +interface AutocompleteFieldMatchAnyProps { + placeholder: string; + selectedField: IFieldType | undefined; + selectedValue: string[]; + indexPattern: IIndexPattern | undefined; + isLoading: boolean; + isDisabled: boolean; + isClearable: boolean; + isRequired?: boolean; + rowLabel?: string; + autocompleteService: AutocompleteStart; + onChange: (arg: string[]) => void; + onError?: (arg: boolean) => void; +} + +export const AutocompleteFieldMatchAnyComponent: React.FC = ({ + placeholder, + rowLabel, + selectedField, + selectedValue, + indexPattern, + isLoading, + isDisabled = false, + isClearable = false, + isRequired = false, + onChange, + onError, + autocompleteService, +}): JSX.Element => { + const [searchQuery, setSearchQuery] = useState(''); + const [touched, setIsTouched] = useState(false); + const [error, setError] = useState(undefined); + const [isLoadingSuggestions, isSuggestingValues, suggestions] = useFieldValueAutocomplete({ + autocompleteService, + fieldValue: selectedValue, + indexPattern, + operatorType: OperatorTypeEnum.MATCH_ANY, + query: searchQuery, + selectedField, + }); + const getLabel = useCallback((option: string): string => option, []); + const optionsMemo = useMemo( + (): string[] => (selectedValue ? uniq([...selectedValue, ...suggestions]) : suggestions), + [suggestions, selectedValue] + ); + const { comboOptions, labels, selectedComboOptions } = useMemo( + (): GetGenericComboBoxPropsReturn => + getGenericComboBoxProps({ + getLabel, + options: optionsMemo, + selectedOptions: selectedValue, + }), + [optionsMemo, selectedValue, getLabel] + ); + + const handleError = useCallback( + (err: string | undefined): void => { + setError((existingErr): string | undefined => { + const oldErr = existingErr != null; + const newErr = err != null; + if (oldErr !== newErr && onError != null) { + onError(newErr); + } + + return err; + }); + }, + [setError, onError] + ); + + const handleValuesChange = useCallback( + (newOptions: EuiComboBoxOptionOption[]): void => { + const newValues: string[] = newOptions.map(({ label }) => optionsMemo[labels.indexOf(label)]); + handleError(undefined); + onChange(newValues); + }, + [handleError, labels, onChange, optionsMemo] + ); + + const handleSearchChange = useCallback( + (searchVal: string) => { + if (searchVal === '') { + handleError(undefined); + } + + if (searchVal !== '' && selectedField != null) { + const err = paramIsValid(searchVal, selectedField, isRequired, touched); + handleError(err); + + setSearchQuery(searchVal); + } + }, + [handleError, isRequired, selectedField, touched] + ); + + const handleCreateOption = useCallback( + (option: string): boolean => { + const err = paramIsValid(option, selectedField, isRequired, touched); + handleError(err); + + if (err != null) { + // Explicitly reject the user's input + return false; + } else { + onChange([...(selectedValue || []), option]); + return true; + } + }, + [handleError, isRequired, onChange, selectedField, selectedValue, touched] + ); + + const setIsTouchedValue = useCallback((): void => { + handleError(selectedComboOptions.length === 0 ? i18n.FIELD_REQUIRED_ERR : undefined); + setIsTouched(true); + }, [setIsTouched, handleError, selectedComboOptions]); + + const inputPlaceholder = useMemo( + (): string => (isLoading || isLoadingSuggestions ? i18n.LOADING : placeholder), + [isLoading, isLoadingSuggestions, placeholder] + ); + + const isLoadingState = useMemo((): boolean => isLoading || isLoadingSuggestions, [ + isLoading, + isLoadingSuggestions, + ]); + + const defaultInput = useMemo((): JSX.Element => { + return ( + + + + ); + }, [ + comboOptions, + error, + handleCreateOption, + handleSearchChange, + handleValuesChange, + inputPlaceholder, + isClearable, + isDisabled, + isLoadingState, + rowLabel, + selectedComboOptions, + selectedField, + setIsTouchedValue, + ]); + + if (!isSuggestingValues && selectedField != null) { + switch (selectedField.type) { + case 'number': + return ( + + + + ); + default: + return defaultInput; + } + } + + return defaultInput; +}; + +AutocompleteFieldMatchAnyComponent.displayName = 'AutocompleteFieldMatchAny'; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/helpers.test.ts b/x-pack/plugins/lists/public/exceptions/components/autocomplete/helpers.test.ts new file mode 100644 index 0000000000000..2fed462974a26 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/helpers.test.ts @@ -0,0 +1,388 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import moment from 'moment'; + +import { getField } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; +import { IFieldType } from '../../../../../../../src/plugins/data/common'; +import { getListResponseMock } from '../../../../../lists/common/schemas/response/list_schema.mock'; +import { ListSchema } from '../../../../common'; + +import * as i18n from './translations'; +import { + EXCEPTION_OPERATORS, + doesNotExistOperator, + existsOperator, + isNotOperator, + isOperator, +} from './operators'; +import { + checkEmptyValue, + filterFieldToList, + getGenericComboBoxProps, + getOperators, + paramIsValid, + typeMatch, +} from './helpers'; + +describe('helpers', () => { + // @ts-ignore + moment.suppressDeprecationWarnings = true; + describe('#getOperators', () => { + test('it returns "isOperator" if passed in field is "undefined"', () => { + const operator = getOperators(undefined); + + expect(operator).toEqual([isOperator]); + }); + + test('it returns expected operators when field type is "boolean"', () => { + const operator = getOperators(getField('ssl')); + + expect(operator).toEqual([isOperator, isNotOperator, existsOperator, doesNotExistOperator]); + }); + + test('it returns "isOperator" when field type is "nested"', () => { + const operator = getOperators({ + aggregatable: false, + count: 0, + esTypes: ['text'], + name: 'nestedField', + readFromDocValues: false, + scripted: false, + searchable: true, + subType: { nested: { path: 'nestedField' } }, + type: 'nested', + }); + + expect(operator).toEqual([isOperator]); + }); + + test('it returns all operator types when field type is not null, boolean, or nested', () => { + const operator = getOperators(getField('machine.os.raw')); + + expect(operator).toEqual(EXCEPTION_OPERATORS); + }); + }); + + describe('#checkEmptyValue', () => { + test('returns no errors if no field has been selected', () => { + const isValid = checkEmptyValue('', undefined, true, false); + + expect(isValid).toBeUndefined(); + }); + + test('returns error string if user has touched a required input and left empty', () => { + const isValid = checkEmptyValue(undefined, getField('@timestamp'), true, true); + + expect(isValid).toEqual(i18n.FIELD_REQUIRED_ERR); + }); + + test('returns no errors if required input is empty but user has not yet touched it', () => { + const isValid = checkEmptyValue(undefined, getField('@timestamp'), true, false); + + expect(isValid).toBeUndefined(); + }); + + test('returns no errors if user has touched an input that is not required and left empty', () => { + const isValid = checkEmptyValue(undefined, getField('@timestamp'), false, true); + + expect(isValid).toBeUndefined(); + }); + + test('returns no errors if user has touched an input that is not required and left empty string', () => { + const isValid = checkEmptyValue('', getField('@timestamp'), false, true); + + expect(isValid).toBeUndefined(); + }); + + test('returns null if input value is not empty string or undefined', () => { + const isValid = checkEmptyValue('hellooo', getField('@timestamp'), false, true); + + expect(isValid).toBeNull(); + }); + }); + + describe('#paramIsValid', () => { + test('returns no errors if no field has been selected', () => { + const isValid = paramIsValid('', undefined, true, false); + + expect(isValid).toBeUndefined(); + }); + + test('returns error string if user has touched a required input and left empty', () => { + const isValid = paramIsValid(undefined, getField('@timestamp'), true, true); + + expect(isValid).toEqual(i18n.FIELD_REQUIRED_ERR); + }); + + test('returns no errors if required input is empty but user has not yet touched it', () => { + const isValid = paramIsValid(undefined, getField('@timestamp'), true, false); + + expect(isValid).toBeUndefined(); + }); + + test('returns no errors if user has touched an input that is not required and left empty', () => { + const isValid = paramIsValid(undefined, getField('@timestamp'), false, true); + + expect(isValid).toBeUndefined(); + }); + + test('returns no errors if user has touched an input that is not required and left empty string', () => { + const isValid = paramIsValid('', getField('@timestamp'), false, true); + + expect(isValid).toBeUndefined(); + }); + + test('returns no errors if field is of type date and value is valid', () => { + const isValid = paramIsValid( + '1994-11-05T08:15:30-05:00', + getField('@timestamp'), + false, + true + ); + + expect(isValid).toBeUndefined(); + }); + + test('returns errors if filed is of type date and value is not valid', () => { + const isValid = paramIsValid('1593478826', getField('@timestamp'), false, true); + + expect(isValid).toEqual(i18n.DATE_ERR); + }); + + test('returns no errors if field is of type number and value is an integer', () => { + const isValid = paramIsValid('4', getField('bytes'), true, true); + + expect(isValid).toBeUndefined(); + }); + + test('returns no errors if field is of type number and value is a float', () => { + const isValid = paramIsValid('4.3', getField('bytes'), true, true); + + expect(isValid).toBeUndefined(); + }); + + test('returns no errors if field is of type number and value is a long', () => { + const isValid = paramIsValid('-9223372036854775808', getField('bytes'), true, true); + + expect(isValid).toBeUndefined(); + }); + + test('returns errors if field is of type number and value is "hello"', () => { + const isValid = paramIsValid('hello', getField('bytes'), true, true); + + expect(isValid).toEqual(i18n.NUMBER_ERR); + }); + + test('returns errors if field is of type number and value is "123abc"', () => { + const isValid = paramIsValid('123abc', getField('bytes'), true, true); + + expect(isValid).toEqual(i18n.NUMBER_ERR); + }); + }); + + describe('#getGenericComboBoxProps', () => { + test('it returns empty arrays if "options" is empty array', () => { + const result = getGenericComboBoxProps({ + getLabel: (t: string) => t, + options: [], + selectedOptions: ['option1'], + }); + + expect(result).toEqual({ comboOptions: [], labels: [], selectedComboOptions: [] }); + }); + + test('it returns formatted props if "options" array is not empty', () => { + const result = getGenericComboBoxProps({ + getLabel: (t: string) => t, + options: ['option1', 'option2', 'option3'], + selectedOptions: [], + }); + + expect(result).toEqual({ + comboOptions: [ + { + label: 'option1', + }, + { + label: 'option2', + }, + { + label: 'option3', + }, + ], + labels: ['option1', 'option2', 'option3'], + selectedComboOptions: [], + }); + }); + + test('it does not return "selectedOptions" items that do not appear in "options"', () => { + const result = getGenericComboBoxProps({ + getLabel: (t: string) => t, + options: ['option1', 'option2', 'option3'], + selectedOptions: ['option4'], + }); + + expect(result).toEqual({ + comboOptions: [ + { + label: 'option1', + }, + { + label: 'option2', + }, + { + label: 'option3', + }, + ], + labels: ['option1', 'option2', 'option3'], + selectedComboOptions: [], + }); + }); + + test('it return "selectedOptions" items that do appear in "options"', () => { + const result = getGenericComboBoxProps({ + getLabel: (t: string) => t, + options: ['option1', 'option2', 'option3'], + selectedOptions: ['option2'], + }); + + expect(result).toEqual({ + comboOptions: [ + { + label: 'option1', + }, + { + label: 'option2', + }, + { + label: 'option3', + }, + ], + labels: ['option1', 'option2', 'option3'], + selectedComboOptions: [ + { + label: 'option2', + }, + ], + }); + }); + }); + + describe('#typeMatch', () => { + test('ip -> ip is true', () => { + expect(typeMatch('ip', 'ip')).toEqual(true); + }); + + test('keyword -> keyword is true', () => { + expect(typeMatch('keyword', 'keyword')).toEqual(true); + }); + + test('text -> text is true', () => { + expect(typeMatch('text', 'text')).toEqual(true); + }); + + test('ip_range -> ip is true', () => { + expect(typeMatch('ip_range', 'ip')).toEqual(true); + }); + + test('date_range -> date is true', () => { + expect(typeMatch('date_range', 'date')).toEqual(true); + }); + + test('double_range -> double is true', () => { + expect(typeMatch('double_range', 'double')).toEqual(true); + }); + + test('float_range -> float is true', () => { + expect(typeMatch('float_range', 'float')).toEqual(true); + }); + + test('integer_range -> integer is true', () => { + expect(typeMatch('integer_range', 'integer')).toEqual(true); + }); + + test('long_range -> long is true', () => { + expect(typeMatch('long_range', 'long')).toEqual(true); + }); + + test('ip -> date is false', () => { + expect(typeMatch('ip', 'date')).toEqual(false); + }); + + test('long -> float is false', () => { + expect(typeMatch('long', 'float')).toEqual(false); + }); + + test('integer -> long is false', () => { + expect(typeMatch('integer', 'long')).toEqual(false); + }); + }); + + describe('#filterFieldToList', () => { + test('it returns empty array if given a undefined for field', () => { + const filter = filterFieldToList([], undefined); + expect(filter).toEqual([]); + }); + + test('it returns empty array if filed does not contain esTypes', () => { + const field: IFieldType = { name: 'some-name', type: 'some-type' }; + const filter = filterFieldToList([], field); + expect(filter).toEqual([]); + }); + + test('it returns single filtered list of ip_range -> ip', () => { + const field: IFieldType = { esTypes: ['ip'], name: 'some-name', type: 'ip' }; + const listItem: ListSchema = { ...getListResponseMock(), type: 'ip_range' }; + const filter = filterFieldToList([listItem], field); + const expected: ListSchema[] = [listItem]; + expect(filter).toEqual(expected); + }); + + test('it returns single filtered list of ip -> ip', () => { + const field: IFieldType = { esTypes: ['ip'], name: 'some-name', type: 'ip' }; + const listItem: ListSchema = { ...getListResponseMock(), type: 'ip' }; + const filter = filterFieldToList([listItem], field); + const expected: ListSchema[] = [listItem]; + expect(filter).toEqual(expected); + }); + + test('it returns single filtered list of keyword -> keyword', () => { + const field: IFieldType = { esTypes: ['keyword'], name: 'some-name', type: 'keyword' }; + const listItem: ListSchema = { ...getListResponseMock(), type: 'keyword' }; + const filter = filterFieldToList([listItem], field); + const expected: ListSchema[] = [listItem]; + expect(filter).toEqual(expected); + }); + + test('it returns single filtered list of text -> text', () => { + const field: IFieldType = { esTypes: ['text'], name: 'some-name', type: 'text' }; + const listItem: ListSchema = { ...getListResponseMock(), type: 'text' }; + const filter = filterFieldToList([listItem], field); + const expected: ListSchema[] = [listItem]; + expect(filter).toEqual(expected); + }); + + test('it returns 2 filtered lists of ip_range -> ip', () => { + const field: IFieldType = { esTypes: ['ip'], name: 'some-name', type: 'ip' }; + const listItem1: ListSchema = { ...getListResponseMock(), type: 'ip_range' }; + const listItem2: ListSchema = { ...getListResponseMock(), type: 'ip_range' }; + const filter = filterFieldToList([listItem1, listItem2], field); + const expected: ListSchema[] = [listItem1, listItem2]; + expect(filter).toEqual(expected); + }); + + test('it returns 1 filtered lists of ip_range -> ip if the 2nd is not compatible type', () => { + const field: IFieldType = { esTypes: ['ip'], name: 'some-name', type: 'ip' }; + const listItem1: ListSchema = { ...getListResponseMock(), type: 'ip_range' }; + const listItem2: ListSchema = { ...getListResponseMock(), type: 'text' }; + const filter = filterFieldToList([listItem1, listItem2], field); + const expected: ListSchema[] = [listItem1]; + expect(filter).toEqual(expected); + }); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/helpers.ts b/x-pack/plugins/lists/public/exceptions/components/autocomplete/helpers.ts new file mode 100644 index 0000000000000..4f25bec3b38dc --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/helpers.ts @@ -0,0 +1,175 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import dateMath from '@elastic/datemath'; +import { EuiComboBoxOptionOption } from '@elastic/eui'; + +import { ListSchema, Type } from '../../../../common'; +import { IFieldType } from '../../../../../../../src/plugins/data/common'; + +import { + EXCEPTION_OPERATORS, + doesNotExistOperator, + existsOperator, + isNotOperator, + isOperator, +} from './operators'; +import { GetGenericComboBoxPropsReturn, OperatorOption } from './types'; +import * as i18n from './translations'; + +/** + * Returns the appropriate operators given a field type + * + * @param field IFieldType selected field + * + */ +export const getOperators = (field: IFieldType | undefined): OperatorOption[] => { + if (field == null) { + return [isOperator]; + } else if (field.type === 'boolean') { + return [isOperator, isNotOperator, existsOperator, doesNotExistOperator]; + } else if (field.type === 'nested') { + return [isOperator]; + } else { + return EXCEPTION_OPERATORS; + } +}; + +/** + * Determines if empty value is ok + * + * @param param the value being checked + * @param field the selected field + * @param isRequired whether or not an empty value is allowed + * @param touched has field been touched by user + * @returns undefined if valid, string with error message if invalid, + * null if no checks matched + */ +export const checkEmptyValue = ( + param: string | undefined, + field: IFieldType | undefined, + isRequired: boolean, + touched: boolean +): string | undefined | null => { + if (isRequired && touched && (param == null || param.trim() === '')) { + return i18n.FIELD_REQUIRED_ERR; + } + + if ( + field == null || + (isRequired && !touched) || + (!isRequired && (param == null || param === '')) + ) { + return undefined; + } + + return null; +}; + +/** + * Very basic validation for values + * + * @param param the value being checked + * @param field the selected field + * @param isRequired whether or not an empty value is allowed + * @param touched has field been touched by user + * @returns undefined if valid, string with error message if invalid + */ +export const paramIsValid = ( + param: string | undefined, + field: IFieldType | undefined, + isRequired: boolean, + touched: boolean +): string | undefined => { + if (field == null) { + return undefined; + } + + const emptyValueError = checkEmptyValue(param, field, isRequired, touched); + if (emptyValueError !== null) { + return emptyValueError; + } + + switch (field.type) { + case 'date': + const moment = dateMath.parse(param ?? ''); + const isDate = Boolean(moment && moment.isValid()); + return isDate ? undefined : i18n.DATE_ERR; + case 'number': + const isNum = param != null && param.trim() !== '' && !isNaN(+param); + return isNum ? undefined : i18n.NUMBER_ERR; + default: + return undefined; + } +}; + +/** + * Determines the options, selected values and option labels for EUI combo box + * + * @param options options user can select from + * @param selectedOptions user selection if any + * @param getLabel helper function to know which property to use for labels + */ +export const getGenericComboBoxProps = ({ + getLabel, + options, + selectedOptions, +}: { + getLabel: (value: T) => string; + options: T[]; + selectedOptions: T[]; +}): GetGenericComboBoxPropsReturn => { + const newLabels = options.map(getLabel); + const newComboOptions: EuiComboBoxOptionOption[] = newLabels.map((label) => ({ label })); + const newSelectedComboOptions = selectedOptions + .map(getLabel) + .filter((option) => { + return newLabels.indexOf(option) !== -1; + }) + .map((option) => { + return newComboOptions[newLabels.indexOf(option)]; + }); + + return { + comboOptions: newComboOptions, + labels: newLabels, + selectedComboOptions: newSelectedComboOptions, + }; +}; + +/** + * Given an array of lists and optionally a field this will return all + * the lists that match against the field based on the types from the field + * @param lists The lists to match against the field + * @param field The field to check against the list to see if they are compatible + */ +export const filterFieldToList = (lists: ListSchema[], field?: IFieldType): ListSchema[] => { + if (field != null) { + const { esTypes = [] } = field; + return lists.filter(({ type }) => esTypes.some((esType) => typeMatch(type, esType))); + } else { + return []; + } +}; + +/** + * Given an input list type and a string based ES type this will match + * if they're exact or if they are compatible with a range + * @param type The type to match against the esType + * @param esType The ES type to match with + */ +export const typeMatch = (type: Type, esType: string): boolean => { + return ( + type === esType || + (type === 'ip_range' && esType === 'ip') || + (type === 'date_range' && esType === 'date') || + (type === 'double_range' && esType === 'double') || + (type === 'float_range' && esType === 'float') || + (type === 'integer_range' && esType === 'integer') || + (type === 'long_range' && esType === 'long') + ); +}; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/hooks/use_field_value_autocomplete.test.ts b/x-pack/plugins/lists/public/exceptions/components/autocomplete/hooks/use_field_value_autocomplete.test.ts new file mode 100644 index 0000000000000..4e3fb2179d786 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/hooks/use_field_value_autocomplete.test.ts @@ -0,0 +1,334 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { act, renderHook } from '@testing-library/react-hooks'; + +import { stubIndexPatternWithFields } from '../../../../../../../../src/plugins/data/common/index_patterns/index_pattern.stub'; +import { getField } from '../../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; +import { OperatorTypeEnum } from '../../../../../common'; +import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks'; + +import { + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn, + useFieldValueAutocomplete, +} from './use_field_value_autocomplete'; + +const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract(); + +jest.mock('../../../../../../../../src/plugins/kibana_react/public'); + +describe('useFieldValueAutocomplete', () => { + const onErrorMock = jest.fn(); + const getValueSuggestionsMock = jest.fn().mockResolvedValue(['value 1', 'value 2']); + + afterEach(() => { + onErrorMock.mockClear(); + getValueSuggestionsMock.mockClear(); + }); + + test('initializes hook', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: getValueSuggestionsMock, + }, + fieldValue: '', + indexPattern: undefined, + operatorType: OperatorTypeEnum.MATCH, + query: '', + selectedField: undefined, + }) + ); + await waitForNextUpdate(); + + expect(result.current).toEqual([false, true, [], result.current[3]]); + }); + }); + + test('does not call autocomplete service if "operatorType" is "exists"', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: getValueSuggestionsMock, + }, + fieldValue: '', + indexPattern: stubIndexPatternWithFields, + operatorType: OperatorTypeEnum.EXISTS, + query: '', + selectedField: getField('machine.os'), + }) + ); + await waitForNextUpdate(); + + const expectedResult: UseFieldValueAutocompleteReturn = [false, true, [], result.current[3]]; + + expect(getValueSuggestionsMock).not.toHaveBeenCalled(); + expect(result.current).toEqual(expectedResult); + }); + }); + + test('does not call autocomplete service if "selectedField" is undefined', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: getValueSuggestionsMock, + }, + fieldValue: '', + indexPattern: stubIndexPatternWithFields, + operatorType: OperatorTypeEnum.EXISTS, + query: '', + selectedField: undefined, + }) + ); + await waitForNextUpdate(); + + const expectedResult: UseFieldValueAutocompleteReturn = [false, true, [], result.current[3]]; + + expect(getValueSuggestionsMock).not.toHaveBeenCalled(); + expect(result.current).toEqual(expectedResult); + }); + }); + + test('does not call autocomplete service if "indexPattern" is undefined', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: getValueSuggestionsMock, + }, + fieldValue: '', + indexPattern: undefined, + operatorType: OperatorTypeEnum.EXISTS, + query: '', + selectedField: getField('machine.os'), + }) + ); + await waitForNextUpdate(); + + const expectedResult: UseFieldValueAutocompleteReturn = [false, true, [], result.current[3]]; + + expect(getValueSuggestionsMock).not.toHaveBeenCalled(); + expect(result.current).toEqual(expectedResult); + }); + }); + + test('it uses full path name for nested fields to fetch suggestions', async () => { + const suggestionsMock = jest.fn().mockResolvedValue([]); + + await act(async () => { + const { signal } = new AbortController(); + const { waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: suggestionsMock, + }, + fieldValue: '', + indexPattern: stubIndexPatternWithFields, + operatorType: OperatorTypeEnum.MATCH, + query: '', + selectedField: { ...getField('nestedField.child'), name: 'child' }, + }) + ); + // Note: initial `waitForNextUpdate` is hook initialization + await waitForNextUpdate(); + await waitForNextUpdate(); + + expect(suggestionsMock).toHaveBeenCalledWith({ + field: { ...getField('nestedField.child'), name: 'nestedField.child' }, + indexPattern: { + fields: [ + { + aggregatable: true, + esTypes: ['integer'], + filterable: true, + name: 'response', + searchable: true, + type: 'number', + }, + ], + id: '1234', + title: 'logstash-*', + }, + query: '', + signal, + }); + }); + }); + + test('returns "isSuggestingValues" of false if field type is boolean', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: getValueSuggestionsMock, + }, + fieldValue: '', + indexPattern: stubIndexPatternWithFields, + operatorType: OperatorTypeEnum.MATCH, + query: '', + selectedField: getField('ssl'), + }) + ); + // Note: initial `waitForNextUpdate` is hook initialization + await waitForNextUpdate(); + await waitForNextUpdate(); + + const expectedResult: UseFieldValueAutocompleteReturn = [false, false, [], result.current[3]]; + + expect(getValueSuggestionsMock).not.toHaveBeenCalled(); + expect(result.current).toEqual(expectedResult); + }); + }); + + test('returns "isSuggestingValues" of false to note that autocomplete service is not in use if no autocomplete suggestions available', async () => { + const suggestionsMock = jest.fn().mockResolvedValue([]); + + await act(async () => { + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: suggestionsMock, + }, + fieldValue: '', + indexPattern: stubIndexPatternWithFields, + operatorType: OperatorTypeEnum.MATCH, + query: '', + selectedField: getField('bytes'), + }) + ); + // Note: initial `waitForNextUpdate` is hook initialization + await waitForNextUpdate(); + await waitForNextUpdate(); + + const expectedResult: UseFieldValueAutocompleteReturn = [false, false, [], result.current[3]]; + + expect(suggestionsMock).toHaveBeenCalled(); + expect(result.current).toEqual(expectedResult); + }); + }); + + test('returns suggestions', async () => { + await act(async () => { + const { signal } = new AbortController(); + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: getValueSuggestionsMock, + }, + fieldValue: '', + indexPattern: stubIndexPatternWithFields, + operatorType: OperatorTypeEnum.MATCH, + query: '', + selectedField: getField('@tags'), + }) + ); + // Note: initial `waitForNextUpdate` is hook initialization + await waitForNextUpdate(); + await waitForNextUpdate(); + + const expectedResult: UseFieldValueAutocompleteReturn = [ + false, + true, + ['value 1', 'value 2'], + result.current[3], + ]; + + expect(getValueSuggestionsMock).toHaveBeenCalledWith({ + field: getField('@tags'), + indexPattern: stubIndexPatternWithFields, + query: '', + signal, + }); + expect(result.current).toEqual(expectedResult); + }); + }); + + test('returns new suggestions on subsequent calls', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook< + UseFieldValueAutocompleteProps, + UseFieldValueAutocompleteReturn + >(() => + useFieldValueAutocomplete({ + autocompleteService: { + ...autocompleteStartMock, + getValueSuggestions: getValueSuggestionsMock, + }, + fieldValue: '', + indexPattern: stubIndexPatternWithFields, + operatorType: OperatorTypeEnum.MATCH, + query: '', + selectedField: getField('@tags'), + }) + ); + // Note: initial `waitForNextUpdate` is hook initialization + await waitForNextUpdate(); + await waitForNextUpdate(); + + expect(result.current[3]).not.toBeNull(); + + // Added check for typescripts sake, if null, + // would not reach below logic as test would stop above + if (result.current[3] != null) { + result.current[3]({ + fieldSelected: getField('@tags'), + patterns: stubIndexPatternWithFields, + searchQuery: '', + value: 'hello', + }); + } + + await waitForNextUpdate(); + + const expectedResult: UseFieldValueAutocompleteReturn = [ + false, + true, + ['value 1', 'value 2'], + result.current[3], + ]; + + expect(getValueSuggestionsMock).toHaveBeenCalledTimes(2); + expect(result.current).toEqual(expectedResult); + }); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/hooks/use_field_value_autocomplete.ts b/x-pack/plugins/lists/public/exceptions/components/autocomplete/hooks/use_field_value_autocomplete.ts new file mode 100644 index 0000000000000..6c6198ac55a0f --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/hooks/use_field_value_autocomplete.ts @@ -0,0 +1,120 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useEffect, useRef, useState } from 'react'; +import { debounce } from 'lodash'; + +import { AutocompleteStart } from '../../../../../../../../src/plugins/data/public'; +import { IFieldType, IIndexPattern } from '../../../../../../../../src/plugins/data/common'; +import { OperatorTypeEnum } from '../../../../../common'; + +interface FuncArgs { + fieldSelected: IFieldType | undefined; + patterns: IIndexPattern | undefined; + searchQuery: string; + value: string | string[] | undefined; +} + +type Func = (args: FuncArgs) => void; + +export type UseFieldValueAutocompleteReturn = [boolean, boolean, string[], Func | null]; + +export interface UseFieldValueAutocompleteProps { + autocompleteService: AutocompleteStart; + fieldValue: string | string[] | undefined; + indexPattern: IIndexPattern | undefined; + operatorType: OperatorTypeEnum; + query: string; + selectedField: IFieldType | undefined; +} +/** + * Hook for using the field value autocomplete service + * + */ +export const useFieldValueAutocomplete = ({ + selectedField, + operatorType, + fieldValue, + query, + indexPattern, + autocompleteService, +}: UseFieldValueAutocompleteProps): UseFieldValueAutocompleteReturn => { + const [isLoading, setIsLoading] = useState(false); + const [isSuggestingValues, setIsSuggestingValues] = useState(true); + const [suggestions, setSuggestions] = useState([]); + const updateSuggestions = useRef(null); + + useEffect(() => { + let isSubscribed = true; + const abortCtrl = new AbortController(); + + const fetchSuggestions = debounce( + async ({ fieldSelected, patterns, searchQuery }: FuncArgs) => { + try { + if (isSubscribed) { + if (fieldSelected == null || patterns == null) { + return; + } + + if (fieldSelected.type === 'boolean') { + setIsSuggestingValues(false); + return; + } + + setIsLoading(true); + + const field = + fieldSelected.subType != null && fieldSelected.subType.nested != null + ? { + ...fieldSelected, + name: `${fieldSelected.subType.nested.path}.${fieldSelected.name}`, + } + : fieldSelected; + + const newSuggestions = await autocompleteService.getValueSuggestions({ + field, + indexPattern: patterns, + query: searchQuery, + signal: abortCtrl.signal, + }); + + if (newSuggestions.length === 0) { + setIsSuggestingValues(false); + } + + setIsLoading(false); + setSuggestions([...newSuggestions]); + } + } catch (error) { + if (isSubscribed) { + setSuggestions([]); + setIsLoading(false); + } + } + }, + 500 + ); + + if (operatorType !== OperatorTypeEnum.EXISTS) { + fetchSuggestions({ + fieldSelected: selectedField, + patterns: indexPattern, + searchQuery: query, + value: fieldValue, + }); + } + + updateSuggestions.current = fetchSuggestions; + + return (): void => { + isSubscribed = false; + abortCtrl.abort(); + }; + }, [selectedField, operatorType, fieldValue, indexPattern, query, autocompleteService]); + + return [isLoading, isSuggestingValues, suggestions, updateSuggestions.current]; +}; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/index.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/index.tsx new file mode 100644 index 0000000000000..1623683f25ed5 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/index.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export { AutocompleteFieldExistsComponent } from './field_value_exists'; +export { AutocompleteFieldListsComponent } from './field_value_lists'; +export { AutocompleteFieldMatchAnyComponent } from './field_value_match_any'; +export { AutocompleteFieldMatchComponent } from './field_value_match'; +export { FieldComponent } from './field'; +export { OperatorComponent } from './operator'; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/operator.test.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/operator.test.tsx new file mode 100644 index 0000000000000..1d033272197ca --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/operator.test.tsx @@ -0,0 +1,226 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { mount } from 'enzyme'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; + +import { getField } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; + +import { OperatorComponent } from './operator'; +import { isNotOperator, isOperator } from './operators'; + +describe('OperatorComponent', () => { + test('it renders disabled if "isDisabled" is true', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"] input`).prop('disabled') + ).toBeTruthy(); + }); + + test('it renders loading if "isLoading" is true', () => { + const wrapper = mount( + + ); + wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"] button`).at(0).simulate('click'); + expect( + wrapper + .find(`EuiComboBoxOptionsList[data-test-subj="operatorAutocompleteComboBox-optionsList"]`) + .prop('isLoading') + ).toBeTruthy(); + }); + + test('it allows user to clear values if "isClearable" is true', () => { + const wrapper = mount( + + ); + + expect(wrapper.find(`button[data-test-subj="comboBoxClearButton"]`).exists()).toBeTruthy(); + }); + + test('it displays "operatorOptions" if param is passed in with items', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"]`).at(0).prop('options') + ).toEqual([{ label: 'is not' }]); + }); + + test('it does not display "operatorOptions" if param is passed in with no items', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"]`).at(0).prop('options') + ).toEqual([ + { + label: 'is', + }, + { + label: 'is not', + }, + { + label: 'is one of', + }, + { + label: 'is not one of', + }, + { + label: 'exists', + }, + { + label: 'does not exist', + }, + { + label: 'is in list', + }, + { + label: 'is not in list', + }, + ]); + }); + + test('it correctly displays selected operator', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"] EuiComboBoxPill`).at(0).text() + ).toEqual('is'); + }); + + test('it only displays subset of operators if field type is nested', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"]`).at(0).prop('options') + ).toEqual([{ label: 'is' }]); + }); + + test('it only displays subset of operators if field type is boolean', () => { + const wrapper = mount( + + ); + + expect( + wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"]`).at(0).prop('options') + ).toEqual([ + { label: 'is' }, + { label: 'is not' }, + { label: 'exists' }, + { label: 'does not exist' }, + ]); + }); + + test('it invokes "onChange" when option selected', () => { + const mockOnChange = jest.fn(); + const wrapper = mount( + + ); + + ((wrapper.find(EuiComboBox).props() as unknown) as { + onChange: (a: EuiComboBoxOptionOption[]) => void; + }).onChange([{ label: 'is not' }]); + + expect(mockOnChange).toHaveBeenCalledWith([ + { message: 'is not', operator: 'excluded', type: 'match', value: 'is_not' }, + ]); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/operator.tsx b/x-pack/plugins/lists/public/exceptions/components/autocomplete/operator.tsx new file mode 100644 index 0000000000000..7fc221c5a097c --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/operator.tsx @@ -0,0 +1,92 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useCallback, useMemo } from 'react'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; + +import { IFieldType } from '../../../../../../../src/plugins/data/common'; + +import { getGenericComboBoxProps, getOperators } from './helpers'; +import { GetGenericComboBoxPropsReturn, OperatorOption } from './types'; + +const AS_PLAIN_TEXT = { asPlainText: true }; + +interface OperatorState { + isClearable: boolean; + isDisabled: boolean; + isLoading: boolean; + onChange: (arg: OperatorOption[]) => void; + operator: OperatorOption; + operatorInputWidth?: number; + operatorOptions?: OperatorOption[]; + placeholder: string; + selectedField: IFieldType | undefined; +} + +export const OperatorComponent: React.FC = ({ + isClearable = false, + isDisabled = false, + isLoading = false, + onChange, + operator, + operatorOptions, + operatorInputWidth = 150, + placeholder, + selectedField, +}): JSX.Element => { + const getLabel = useCallback(({ message }): string => message, []); + const optionsMemo = useMemo( + (): OperatorOption[] => + operatorOptions != null && operatorOptions.length > 0 + ? operatorOptions + : getOperators(selectedField), + [operatorOptions, selectedField] + ); + const selectedOptionsMemo = useMemo((): OperatorOption[] => (operator ? [operator] : []), [ + operator, + ]); + const { comboOptions, labels, selectedComboOptions } = useMemo( + (): GetGenericComboBoxPropsReturn => + getGenericComboBoxProps({ + getLabel, + options: optionsMemo, + selectedOptions: selectedOptionsMemo, + }), + [optionsMemo, selectedOptionsMemo, getLabel] + ); + + const handleValuesChange = useCallback( + (newOptions: EuiComboBoxOptionOption[]): void => { + const newValues: OperatorOption[] = newOptions.map( + ({ label }) => optionsMemo[labels.indexOf(label)] + ); + onChange(newValues); + }, + [labels, onChange, optionsMemo] + ); + + const inputWidth = useMemo(() => { + return { width: `${operatorInputWidth}px` }; + }, [operatorInputWidth]); + + return ( + + ); +}; + +OperatorComponent.displayName = 'Operator'; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/operators.ts b/x-pack/plugins/lists/public/exceptions/components/autocomplete/operators.ts new file mode 100644 index 0000000000000..551dfcb61e3ad --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/operators.ts @@ -0,0 +1,109 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +import { OperatorEnum, OperatorTypeEnum } from '../../../../common'; + +import { OperatorOption } from './types'; + +export const isOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.isOperatorLabel', { + defaultMessage: 'is', + }), + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'is', +}; + +export const isNotOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.isNotOperatorLabel', { + defaultMessage: 'is not', + }), + operator: OperatorEnum.EXCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'is_not', +}; + +export const isOneOfOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.isOneOfOperatorLabel', { + defaultMessage: 'is one of', + }), + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: 'is_one_of', +}; + +export const isNotOneOfOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.isNotOneOfOperatorLabel', { + defaultMessage: 'is not one of', + }), + operator: OperatorEnum.EXCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: 'is_not_one_of', +}; + +export const existsOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.existsOperatorLabel', { + defaultMessage: 'exists', + }), + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.EXISTS, + value: 'exists', +}; + +export const doesNotExistOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.doesNotExistOperatorLabel', { + defaultMessage: 'does not exist', + }), + operator: OperatorEnum.EXCLUDED, + type: OperatorTypeEnum.EXISTS, + value: 'does_not_exist', +}; + +export const isInListOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.isInListOperatorLabel', { + defaultMessage: 'is in list', + }), + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.LIST, + value: 'is_in_list', +}; + +export const isNotInListOperator: OperatorOption = { + message: i18n.translate('xpack.lists.exceptions.isNotInListOperatorLabel', { + defaultMessage: 'is not in list', + }), + operator: OperatorEnum.EXCLUDED, + type: OperatorTypeEnum.LIST, + value: 'is_not_in_list', +}; + +export const EXCEPTION_OPERATORS: OperatorOption[] = [ + isOperator, + isNotOperator, + isOneOfOperator, + isNotOneOfOperator, + existsOperator, + doesNotExistOperator, + isInListOperator, + isNotInListOperator, +]; + +export const EXCEPTION_OPERATORS_SANS_LISTS: OperatorOption[] = [ + isOperator, + isNotOperator, + isOneOfOperator, + isNotOneOfOperator, + existsOperator, + doesNotExistOperator, +]; + +export const EXCEPTION_OPERATORS_ONLY_LISTS: OperatorOption[] = [ + isInListOperator, + isNotInListOperator, +]; diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/translations.ts b/x-pack/plugins/lists/public/exceptions/components/autocomplete/translations.ts new file mode 100644 index 0000000000000..065239246d329 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/translations.ts @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +export const LOADING = i18n.translate('xpack.lists.autocomplete.loadingDescription', { + defaultMessage: 'Loading...', +}); + +export const SELECT_FIELD_FIRST = i18n.translate('xpack.lists.autocomplete.selectField', { + defaultMessage: 'Please select a field first...', +}); + +export const FIELD_REQUIRED_ERR = i18n.translate('xpack.lists.autocomplete.fieldRequiredError', { + defaultMessage: 'Value cannot be empty', +}); + +export const NUMBER_ERR = i18n.translate('xpack.lists.autocomplete.invalidNumberError', { + defaultMessage: 'Not a valid number', +}); + +export const DATE_ERR = i18n.translate('xpack.lists.autocomplete.invalidDateError', { + defaultMessage: 'Not a valid date', +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/autocomplete/types.ts b/x-pack/plugins/lists/public/exceptions/components/autocomplete/types.ts new file mode 100644 index 0000000000000..8ea3e8d927d68 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/autocomplete/types.ts @@ -0,0 +1,23 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiComboBoxOptionOption } from '@elastic/eui'; + +import { OperatorEnum, OperatorTypeEnum } from '../../../../common'; + +export interface GetGenericComboBoxPropsReturn { + comboOptions: EuiComboBoxOptionOption[]; + labels: string[]; + selectedComboOptions: EuiComboBoxOptionOption[]; +} + +export interface OperatorOption { + message: string; + value: string; + operator: OperatorEnum; + type: OperatorTypeEnum; +} diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.test.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/and_badge.test.tsx similarity index 95% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.test.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/and_badge.test.tsx index 16678e4da2a1d..dc773e222776b 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.test.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/and_badge.test.tsx @@ -9,8 +9,9 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; +import { getMockTheme } from '../../../common/test_utils/kibana_react.mock'; + import { BuilderAndBadgeComponent } from './and_badge'; -import { getMockTheme } from '../../../lib/kibana/kibana_react.mock'; const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } }); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/and_badge.tsx similarity index 96% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/and_badge.tsx index fd561110d885f..6f867d772072f 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/and_badge.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { EuiFlexItem } from '@elastic/eui'; import styled from 'styled-components'; -import { AndOrBadge } from '../../and_or_badge'; +import { AndOrBadge } from '../and_or_badge'; const MyInvisibleAndBadge = styled(EuiFlexItem)` visibility: hidden; diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_delete_button.test.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_delete_button.test.tsx similarity index 95% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_delete_button.test.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/entry_delete_button.test.tsx index d86e668a93ad6..9ed8b2c41b4ba 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_delete_button.test.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/entry_delete_button.test.tsx @@ -8,8 +8,8 @@ import { mount } from 'enzyme'; import React from 'react'; -import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock'; -import { getEntryMatchMock } from '../../../../../../lists/common/schemas/types/entry_match.mock'; +import { getExceptionListItemSchemaMock } from '../../../../common/schemas/response/exception_list_item_schema.mock'; +import { getEntryMatchMock } from '../../../../common/schemas/types/entry_match.mock'; import { BuilderEntryDeleteButtonComponent } from './entry_delete_button'; diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_delete_button.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_delete_button.tsx similarity index 98% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_delete_button.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/entry_delete_button.tsx index 48bdeb4d5b044..01739bd3f85cb 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_delete_button.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/entry_delete_button.tsx @@ -9,7 +9,7 @@ import React, { useCallback } from 'react'; import { EuiButtonIcon, EuiFlexItem } from '@elastic/eui'; import styled from 'styled-components'; -import { BuilderEntry } from '../types'; +import { BuilderEntry } from './types'; const MyFirstRowContainer = styled(EuiFlexItem)` padding-top: 20px; diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx new file mode 100644 index 0000000000000..8408fb7a6a4f1 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx @@ -0,0 +1,201 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { Story, addDecorator } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import { HttpStart } from 'kibana/public'; + +import { OperatorEnum, OperatorTypeEnum } from '../../../../common'; +import { AutocompleteStart } from '../../../../../../../src/plugins/data/public'; +import { fields } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; +import { getMockTheme } from '../../../common/test_utils/kibana_react.mock'; + +import { BuilderEntryItem, EntryItemProps } from './entry_renderer'; + +const mockTheme = getMockTheme({ + darkMode: false, + eui: euiLightVars, +}); +const mockAutocompleteService = ({ + getValueSuggestions: () => + new Promise((resolve) => { + setTimeout(() => { + resolve([ + { + field: { + aggregatable: true, + count: 30, + esTypes: ['date'], + name: '@timestamp', + readFromDocValues: true, + scripted: false, + searchable: true, + type: 'date', + }, + type: 'field', + }, + { + field: { + aggregatable: true, + count: 0, + esTypes: ['ip'], + name: 'ip', + readFromDocValues: true, + scripted: false, + searchable: true, + type: 'ip', + }, + type: 'field', + }, + ]); + }, 300); + }), +} as unknown) as AutocompleteStart; + +addDecorator((storyFn) => {storyFn()}); + +export default { + argTypes: { + allowLargeValueLists: { + control: { + type: 'boolean', + }, + description: '`boolean` - set to true to allow large value lists.', + table: { + defaultValue: { + summary: false, + }, + }, + type: { + required: false, + }, + }, + autoCompleteService: { + control: { + type: 'object', + }, + description: + '`AutocompleteStart` - Kibana data plugin autocomplete service used for field value autocomplete.', + type: { + required: true, + }, + }, + entry: { + control: { + type: 'object', + }, + description: '`FormattedBuilderEntry` - A single exception item entry.', + type: { + required: true, + }, + }, + httpService: { + control: { + type: 'object', + }, + description: '`HttpStart` - Kibana service.', + type: { + required: true, + }, + }, + indexPattern: { + description: + '`IIndexPattern` - index patterns used to populate field options and value autocomplete.', + type: { + required: true, + }, + }, + listType: { + control: { + options: ['detection', 'endpoint'], + type: 'select', + }, + description: + '`ExceptionListType` - Depending on the list type, certain validations may apply.', + type: { + required: true, + }, + }, + + onChange: { + description: + '`(arg: BuilderEntry, i: number) => void` - callback invoked any time field, operator or value is updated.', + type: { + required: true, + }, + }, + onlyShowListOperators: { + description: + '`boolean` - set to true to display to user only operators related to large value lists. This is currently used due to limitations around combining large value list exceptions and non-large value list exceptions.', + table: { + defaultValue: { + summary: false, + }, + }, + type: { + required: false, + }, + }, + setErrorsExist: { + description: '`(arg: boolean) => void` - callback invoked to bubble up input errors.', + type: { + required: true, + }, + }, + showLabel: { + description: + '`boolean` - whether or not to show the input labels (normally just wanted for the first entry item).', + table: { + defaultValue: { + summary: false, + }, + }, + type: { + required: false, + }, + }, + }, + component: BuilderEntryItem, + title: 'BuilderEntryItem', +}; + +const BuilderEntryItemTemplate: Story = (args) => ; + +export const Default = BuilderEntryItemTemplate.bind({}); +Default.args = { + autocompleteService: mockAutocompleteService, + + entry: { + correspondingKeywordField: undefined, + entryIndex: 0, + field: undefined, + id: 'e37ad550-05d2-470e-9a95-487db201ab56', + nested: undefined, + operator: { + message: 'is', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'is', + }, + parent: undefined, + value: '', + }, + httpService: {} as HttpStart, + indexPattern: { + fields, + id: '1234', + title: 'logstash-*', + }, + listType: 'detection', + onChange: action('onClick'), + onlyShowListOperators: false, + setErrorsExist: action('onClick'), + showLabel: false, +}; diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.test.tsx similarity index 86% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.test.tsx index 9c9035d7e66e9..8f6f9329f2974 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.test.tsx @@ -8,47 +8,46 @@ import { ReactWrapper, mount } from 'enzyme'; import React from 'react'; import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; +import { waitFor } from '@testing-library/dom'; -import { BuilderEntryItem } from './entry_item'; import { - isOperator, - isNotOperator, - isOneOfOperator, - isNotOneOfOperator, + doesNotExistOperator, + existsOperator, isInListOperator, isNotInListOperator, - existsOperator, - doesNotExistOperator, -} from '../../autocomplete/operators'; + isNotOneOfOperator, + isNotOperator, + isOneOfOperator, + isOperator, +} from '../autocomplete/operators'; import { fields, getField, -} from '../../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; -import { getFoundListSchemaMock } from '../../../../../../lists/common/schemas/response/found_list_schema.mock'; -import { getEmptyValue } from '../../empty_value'; -import { waitFor } from '@testing-library/dom'; +} from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; +import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks'; +import { coreMock } from '../../../../../../../src/core/public/mocks'; +import { getFoundListSchemaMock } from '../../../../common/schemas/response/found_list_schema.mock'; +import { useFindLists } from '../../../lists/hooks/use_find_lists'; -// mock out lists hook -const mockStart = jest.fn(); -const mockResult = getFoundListSchemaMock(); -jest.mock('../../../../common/lib/kibana'); -jest.mock('../../../../lists_plugin_deps', () => { - const originalModule = jest.requireActual('../../../../lists_plugin_deps'); +import { BuilderEntryItem } from './entry_renderer'; - return { - ...originalModule, - useFindLists: () => ({ - loading: false, - start: mockStart.mockReturnValue(mockResult), - result: mockResult, - error: undefined, - }), - }; -}); +jest.mock('../../../lists/hooks/use_find_lists'); + +const mockKibanaHttpService = coreMock.createStart().http; +const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract(); describe('BuilderEntryItem', () => { let wrapper: ReactWrapper; + beforeEach(() => { + (useFindLists as jest.Mock).mockReturnValue({ + error: undefined, + loading: false, + result: getFoundListSchemaMock(), + start: jest.fn(), + }); + }); + afterEach(() => { jest.clearAllMocks(); wrapper.unmount(); @@ -57,25 +56,27 @@ describe('BuilderEntryItem', () => { test('it renders field labels if "showLabel" is "true"', () => { wrapper = mount( ); @@ -85,25 +86,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "isOperator"', () => { wrapper = mount( ); @@ -117,25 +120,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "isNotOperator"', () => { wrapper = mount( ); @@ -151,25 +156,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "isOneOfOperator"', () => { wrapper = mount( ); @@ -185,25 +192,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "isNotOneOfOperator"', () => { wrapper = mount( ); @@ -219,25 +228,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "isInListOperator"', () => { wrapper = mount( ); @@ -253,25 +264,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "isNotInListOperator"', () => { wrapper = mount( ); @@ -287,25 +300,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "existsOperator"', () => { wrapper = mount( ); @@ -313,9 +328,7 @@ describe('BuilderEntryItem', () => { expect(wrapper.find('[data-test-subj="exceptionBuilderEntryOperator"]').text()).toEqual( 'exists' ); - expect(wrapper.find('[data-test-subj="exceptionBuilderEntryFieldExists"]').text()).toEqual( - getEmptyValue() - ); + expect(wrapper.find('[data-test-subj="exceptionBuilderEntryFieldExists"]').text()).toEqual('—'); expect( wrapper.find('[data-test-subj="exceptionBuilderEntryFieldExists"] input').props().disabled ).toBeTruthy(); @@ -324,25 +337,27 @@ describe('BuilderEntryItem', () => { test('it renders field values correctly when operator is "doesNotExistOperator"', () => { wrapper = mount( ); @@ -350,9 +365,7 @@ describe('BuilderEntryItem', () => { expect(wrapper.find('[data-test-subj="exceptionBuilderEntryOperator"]').text()).toEqual( 'does not exist' ); - expect(wrapper.find('[data-test-subj="exceptionBuilderEntryFieldExists"]').text()).toEqual( - getEmptyValue() - ); + expect(wrapper.find('[data-test-subj="exceptionBuilderEntryFieldExists"]').text()).toEqual('—'); expect( wrapper.find('[data-test-subj="exceptionBuilderEntryFieldExists"] input').props().disabled ).toBeTruthy(); @@ -361,57 +374,59 @@ describe('BuilderEntryItem', () => { test('it uses "correspondingKeywordField" if it exists', () => { wrapper = mount( ); expect( wrapper.find('[data-test-subj="exceptionBuilderEntryFieldMatchAny"]').prop('selectedField') ).toEqual({ - name: 'extension', - type: 'string', - esTypes: ['keyword'], + aggregatable: true, count: 0, + esTypes: ['keyword'], + name: 'extension', + readFromDocValues: true, scripted: false, searchable: true, - aggregatable: true, - readFromDocValues: true, + type: 'string', }); }); @@ -419,25 +434,27 @@ describe('BuilderEntryItem', () => { const mockOnChange = jest.fn(); wrapper = mount( ); @@ -446,7 +463,7 @@ describe('BuilderEntryItem', () => { }).onChange([{ label: 'machine.os' }]); expect(mockOnChange).toHaveBeenCalledWith( - { id: '123', field: 'machine.os', operator: 'included', type: 'match', value: '' }, + { field: 'machine.os', id: '123', operator: 'included', type: 'match', value: '' }, 0 ); }); @@ -455,25 +472,27 @@ describe('BuilderEntryItem', () => { const mockOnChange = jest.fn(); wrapper = mount( ); @@ -482,7 +501,7 @@ describe('BuilderEntryItem', () => { }).onChange([{ label: 'is not' }]); expect(mockOnChange).toHaveBeenCalledWith( - { id: '123', field: 'ip', operator: 'excluded', type: 'match', value: '1234' }, + { field: 'ip', id: '123', operator: 'excluded', type: 'match', value: '1234' }, 0 ); }); @@ -491,25 +510,27 @@ describe('BuilderEntryItem', () => { const mockOnChange = jest.fn(); wrapper = mount( ); @@ -518,7 +539,7 @@ describe('BuilderEntryItem', () => { }).onCreateOption('126.45.211.34'); expect(mockOnChange).toHaveBeenCalledWith( - { id: '123', field: 'ip', operator: 'excluded', type: 'match', value: '126.45.211.34' }, + { field: 'ip', id: '123', operator: 'excluded', type: 'match', value: '126.45.211.34' }, 0 ); }); @@ -527,25 +548,27 @@ describe('BuilderEntryItem', () => { const mockOnChange = jest.fn(); wrapper = mount( ); @@ -554,7 +577,7 @@ describe('BuilderEntryItem', () => { }).onCreateOption('126.45.211.34'); expect(mockOnChange).toHaveBeenCalledWith( - { id: '123', field: 'ip', operator: 'included', type: 'match_any', value: ['126.45.211.34'] }, + { field: 'ip', id: '123', operator: 'included', type: 'match_any', value: ['126.45.211.34'] }, 0 ); }); @@ -563,25 +586,27 @@ describe('BuilderEntryItem', () => { const mockOnChange = jest.fn(); wrapper = mount( ); @@ -591,11 +616,11 @@ describe('BuilderEntryItem', () => { expect(mockOnChange).toHaveBeenCalledWith( { - id: '123', field: 'ip', + id: '123', + list: { id: 'some-list-id', type: 'ip' }, operator: 'excluded', type: 'list', - list: { id: 'some-list-id', type: 'ip' }, }, 0 ); @@ -605,25 +630,27 @@ describe('BuilderEntryItem', () => { const mockSetErrorExists = jest.fn(); wrapper = mount( ); @@ -640,25 +667,27 @@ describe('BuilderEntryItem', () => { const mockSetErrorExists = jest.fn(); wrapper = mount( ); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx similarity index 82% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx index af3b5362cbbf2..7c45f1c35c55e 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx @@ -6,58 +6,65 @@ */ import React, { useCallback } from 'react'; -import { EuiFormRow, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui'; import styled from 'styled-components'; -import { isEqlRule, isThresholdRule } from '../../../../../common/detection_engine/utils'; -import { Type } from '../../../../../common/detection_engine/schemas/common/schemas'; -import { IFieldType, IIndexPattern } from '../../../../../../../../src/plugins/data/common'; -import { FieldComponent } from '../../autocomplete/field'; -import { OperatorComponent } from '../../autocomplete/operator'; -import { OperatorOption } from '../../autocomplete/types'; -import { AutocompleteFieldMatchComponent } from '../../autocomplete/field_value_match'; -import { AutocompleteFieldMatchAnyComponent } from '../../autocomplete/field_value_match_any'; -import { AutocompleteFieldExistsComponent } from '../../autocomplete/field_value_exists'; -import { FormattedBuilderEntry, BuilderEntry } from '../types'; -import { AutocompleteFieldListsComponent } from '../../autocomplete/field_value_lists'; -import { ListSchema, OperatorTypeEnum, ExceptionListType } from '../../../../lists_plugin_deps'; -import { getEmptyValue } from '../../empty_value'; -import * as i18n from './translations'; +import { AutocompleteStart } from '../../../../../../../src/plugins/data/public'; +import { IFieldType, IIndexPattern } from '../../../../../../../src/plugins/data/common'; +import { HttpStart } from '../../../../../../../src/core/public'; +import { FieldComponent } from '../autocomplete/field'; +import { OperatorComponent } from '../autocomplete/operator'; +import { OperatorOption } from '../autocomplete/types'; +import { EXCEPTION_OPERATORS_ONLY_LISTS } from '../autocomplete/operators'; +import { AutocompleteFieldExistsComponent } from '../autocomplete/field_value_exists'; +import { AutocompleteFieldMatchComponent } from '../autocomplete/field_value_match'; +import { AutocompleteFieldMatchAnyComponent } from '../autocomplete/field_value_match_any'; +import { AutocompleteFieldListsComponent } from '../autocomplete/field_value_lists'; +import { ExceptionListType, ListSchema, OperatorTypeEnum } from '../../../../common'; +import { getEmptyValue } from '../../../common/empty_value'; + import { - getFilteredIndexPatterns, - getOperatorOptions, getEntryOnFieldChange, - getEntryOnOperatorChange, - getEntryOnMatchChange, - getEntryOnMatchAnyChange, getEntryOnListChange, + getEntryOnMatchAnyChange, + getEntryOnMatchChange, + getEntryOnOperatorChange, + getFilteredIndexPatterns, + getOperatorOptions, } from './helpers'; -import { EXCEPTION_OPERATORS_ONLY_LISTS } from '../../autocomplete/operators'; +import { BuilderEntry, FormattedBuilderEntry } from './types'; +import * as i18n from './translations'; const MyValuesInput = styled(EuiFlexItem)` overflow: hidden; `; -interface EntryItemProps { +export interface EntryItemProps { + allowLargeValueLists?: boolean; + autocompleteService: AutocompleteStart; entry: FormattedBuilderEntry; + httpService: HttpStart; indexPattern: IIndexPattern; - showLabel: boolean; listType: ExceptionListType; + listTypeSpecificFilter?: (pattern: IIndexPattern, type: ExceptionListType) => IIndexPattern; onChange: (arg: BuilderEntry, i: number) => void; - setErrorsExist: (arg: boolean) => void; onlyShowListOperators?: boolean; - ruleType?: Type; + setErrorsExist: (arg: boolean) => void; + showLabel: boolean; } export const BuilderEntryItem: React.FC = ({ + allowLargeValueLists = false, + autocompleteService, entry, + httpService, indexPattern, listType, - showLabel, + listTypeSpecificFilter, onChange, - setErrorsExist, onlyShowListOperators = false, - ruleType, + setErrorsExist, + showLabel, }): JSX.Element => { const handleError = useCallback( (err: boolean): void => { @@ -112,7 +119,12 @@ export const BuilderEntryItem: React.FC = ({ const renderFieldInput = useCallback( (isFirst: boolean): JSX.Element => { - const filteredIndexPatterns = getFilteredIndexPatterns(indexPattern, entry, listType); + const filteredIndexPatterns = getFilteredIndexPatterns( + indexPattern, + entry, + listType, + listTypeSpecificFilter + ); const comboBox = ( = ({ ); } }, - [handleFieldChange, indexPattern, entry, listType] + [indexPattern, entry, listType, listTypeSpecificFilter, handleFieldChange] ); const renderOperatorInput = (isFirst: boolean): JSX.Element => { @@ -155,7 +167,7 @@ export const BuilderEntryItem: React.FC = ({ entry, listType, entry.field != null && entry.field.type === 'boolean', - isFirst && !isEqlRule(ruleType) && !isThresholdRule(ruleType) + isFirst && !allowLargeValueLists ); const comboBox = ( = ({ const value = typeof entry.value === 'string' ? entry.value : undefined; return ( = ({ const values: string[] = Array.isArray(entry.value) ? entry.value : []; return ( = ({ const id = typeof entry.value === 'string' ? entry.value : undefined; return ( = ({ } isClearable={false} onChange={handleFieldListValueChange} - isRequired data-test-subj="exceptionBuilderEntryFieldList" /> ); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx similarity index 82% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx index cbeb987f49b7b..0fd886bdc742a 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx @@ -8,39 +8,28 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; +import { dataPluginMock } from 'src/plugins/data/public/mocks'; -import { useKibana } from '../../../../common/lib/kibana'; -import { fields } from '../../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; -import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock'; -import { getEntryMatchMock } from '../../../../../../lists/common/schemas/types/entry_match.mock'; -import { getEntryMatchAnyMock } from '../../../../../../lists/common/schemas/types/entry_match_any.mock'; +import { fields } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; +import { getExceptionListItemSchemaMock } from '../../../../common/schemas/response/exception_list_item_schema.mock'; +import { getEntryMatchMock } from '../../../../common/schemas/types/entry_match.mock'; +import { getEntryMatchAnyMock } from '../../../../common/schemas/types/entry_match_any.mock'; +import { coreMock } from '../../../../../../../src/core/public/mocks'; +import { getMockTheme } from '../../../common/test_utils/kibana_react.mock'; -import { BuilderExceptionListItemComponent } from './exception_item'; -import { getMockTheme } from '../../../lib/kibana/kibana_react.mock'; +import { BuilderExceptionListItemComponent } from './exception_item_renderer'; const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece', }, }); - -jest.mock('../../../../common/lib/kibana'); +const mockKibanaHttpService = coreMock.createStart().http; +const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract(); describe('BuilderExceptionListItemComponent', () => { const getValueSuggestionsMock = jest.fn().mockResolvedValue(['value 1', 'value 2']); - beforeAll(() => { - (useKibana as jest.Mock).mockReturnValue({ - services: { - data: { - autocomplete: { - getValueSuggestions: getValueSuggestionsMock, - }, - }, - }, - }); - }); - afterEach(() => { getValueSuggestionsMock.mockClear(); }); @@ -54,20 +43,22 @@ describe('BuilderExceptionListItemComponent', () => { const wrapper = mount( ); @@ -83,20 +74,22 @@ describe('BuilderExceptionListItemComponent', () => { const wrapper = mount( ); @@ -110,20 +103,22 @@ describe('BuilderExceptionListItemComponent', () => { const wrapper = mount( ); @@ -139,20 +134,22 @@ describe('BuilderExceptionListItemComponent', () => { const wrapper = mount( ); @@ -175,20 +172,22 @@ describe('BuilderExceptionListItemComponent', () => { }; const wrapper = mount( ); @@ -203,20 +202,22 @@ describe('BuilderExceptionListItemComponent', () => { const wrapper = mount( ); @@ -230,22 +231,24 @@ describe('BuilderExceptionListItemComponent', () => { exceptionItem.entries = [getEntryMatchMock()]; const wrapper = mount( ); @@ -259,20 +262,22 @@ describe('BuilderExceptionListItemComponent', () => { exceptionItem.entries = [getEntryMatchMock(), getEntryMatchMock()]; const wrapper = mount( ); @@ -288,20 +293,22 @@ describe('BuilderExceptionListItemComponent', () => { exceptionItem.entries = [getEntryMatchMock(), getEntryMatchAnyMock()]; const wrapper = mount( ); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.tsx similarity index 85% rename from x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.tsx rename to x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.tsx index f9afa48408e39..d151ec5a81ec3 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.tsx @@ -5,22 +5,24 @@ * 2.0. */ -import React, { useMemo, useCallback } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import styled from 'styled-components'; +import { HttpStart } from 'kibana/public'; +import { AutocompleteStart } from 'src/plugins/data/public'; -import { Type } from '../../../../../common/detection_engine/schemas/common/schemas'; -import { IIndexPattern } from '../../../../../../../../src/plugins/data/common'; -import { getFormattedBuilderEntries, getUpdatedEntriesOnDelete } from './helpers'; -import { FormattedBuilderEntry, ExceptionsBuilderExceptionItem, BuilderEntry } from '../types'; -import { ExceptionListType } from '../../../../../public/lists_plugin_deps'; -import { BuilderEntryItem } from './entry_item'; -import { BuilderEntryDeleteButtonComponent } from './entry_delete_button'; +import { ExceptionListType } from '../../../../common'; +import { IIndexPattern } from '../../../../../../../src/plugins/data/common'; + +import { BuilderEntry, ExceptionsBuilderExceptionItem, FormattedBuilderEntry } from './types'; import { BuilderAndBadgeComponent } from './and_badge'; +import { BuilderEntryDeleteButtonComponent } from './entry_delete_button'; +import { BuilderEntryItem } from './entry_renderer'; +import { getFormattedBuilderEntries, getUpdatedEntriesOnDelete } from './helpers'; const MyBeautifulLine = styled(EuiFlexItem)` &:after { - background: ${({ theme }) => theme.eui.euiColorLightShade}; + background: ${({ theme }): string => theme.eui.euiColorLightShade}; content: ''; width: 2px; height: 40px; @@ -34,8 +36,10 @@ const MyOverflowContainer = styled(EuiFlexItem)` `; interface BuilderExceptionListItemProps { + allowLargeValueLists: boolean; + httpService: HttpStart; + autocompleteService: AutocompleteStart; exceptionItem: ExceptionsBuilderExceptionItem; - exceptionId: string; exceptionItemIndex: number; indexPattern: IIndexPattern; andLogicIncluded: boolean; @@ -45,13 +49,14 @@ interface BuilderExceptionListItemProps { onChangeExceptionItem: (item: ExceptionsBuilderExceptionItem, index: number) => void; setErrorsExist: (arg: boolean) => void; onlyShowListOperators?: boolean; - ruleType?: Type; } export const BuilderExceptionListItemComponent = React.memo( ({ + allowLargeValueLists, + httpService, + autocompleteService, exceptionItem, - exceptionId, exceptionItemIndex, indexPattern, isOnlyItem, @@ -61,7 +66,6 @@ export const BuilderExceptionListItemComponent = React.memo { const handleEntryChange = useCallback( (entry: BuilderEntry, entryIndex: number): void => { @@ -119,6 +123,9 @@ export const BuilderExceptionListItemComponent = React.memo} ({ + v4: jest.fn().mockReturnValue('123'), +})); + +const getEntryExistsWithIdMock = (): EntryExists & { id: string } => ({ + ...getEntryExistsMock(), + id: '123', +}); + +const getEntryNestedWithIdMock = (): EntryNested & { id: string } => ({ + ...getEntryNestedMock(), + id: '123', +}); + +const getEntryMatchWithIdMock = (): EntryMatch & { id: string } => ({ + ...getEntryMatchMock(), + id: '123', +}); + +const getEntryMatchAnyWithIdMock = (): EntryMatchAny & { id: string } => ({ + ...getEntryMatchAnyMock(), + id: '123', +}); + +const getMockIndexPattern = (): IIndexPattern => ({ + fields, + id: '1234', + title: 'logstash-*', +}); + +const getMockBuilderEntry = (): FormattedBuilderEntry => ({ + correspondingKeywordField: undefined, + entryIndex: 0, + field: getField('ip'), + id: '123', + nested: undefined, + operator: isOperator, + parent: undefined, + value: 'some value', +}); + +const getMockNestedBuilderEntry = (): FormattedBuilderEntry => ({ + correspondingKeywordField: undefined, + entryIndex: 0, + field: getField('nestedField.child'), + id: '123', + nested: 'child', + operator: isOperator, + parent: { + parent: { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], + field: 'nestedField', + }, + parentIndex: 0, + }, + value: 'some value', +}); + +const getMockNestedParentBuilderEntry = (): FormattedBuilderEntry => ({ + correspondingKeywordField: undefined, + entryIndex: 0, + field: { ...getField('nestedField.child'), esTypes: ['nested'], name: 'nestedField' }, + id: '123', + nested: 'parent', + operator: isOperator, + parent: undefined, + value: undefined, +}); + +const mockEndpointFields = [ + { + aggregatable: false, + count: 0, + esTypes: ['keyword'], + name: 'file.path.caseless', + readFromDocValues: false, + scripted: false, + searchable: true, + type: 'string', + }, + { + aggregatable: false, + count: 0, + esTypes: ['text'], + name: 'file.Ext.code_signature.status', + readFromDocValues: false, + scripted: false, + searchable: true, + subType: { nested: { path: 'file.Ext.code_signature' } }, + type: 'string', + }, +]; + +export const getEndpointField = (name: string): IFieldType => + mockEndpointFields.find((field) => field.name === name) as IFieldType; + +const filterIndexPatterns = (patterns: IIndexPattern, type: ExceptionListType): IIndexPattern => { + return type === 'endpoint' + ? { + ...patterns, + fields: patterns.fields.filter(({ name }) => + ['file.path.caseless', 'file.Ext.code_signature.status'].includes(name) + ), + } + : patterns; +}; + +describe('Exception builder helpers', () => { + describe('#getFilteredIndexPatterns', () => { + describe('list type detections', () => { + test('it returns nested fields that match parent value when "item.nested" is "child"', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); + const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); + const expected: IIndexPattern = { + fields: [{ ...getField('nestedField.child'), name: 'child' }], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + + test('it returns only parent nested field when "item.nested" is "parent" and nested parent field is not undefined', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItem: FormattedBuilderEntry = getMockNestedParentBuilderEntry(); + const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); + const expected: IIndexPattern = { + fields: [{ ...getField('nestedField.child'), esTypes: ['nested'], name: 'nestedField' }], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + + test('it returns only nested fields when "item.nested" is "parent" and nested parent field is undefined', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItem: FormattedBuilderEntry = { + ...getMockNestedParentBuilderEntry(), + field: undefined, + }; + const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); + const expected: IIndexPattern = { + fields: [ + { ...getField('nestedField.child') }, + { ...getField('nestedField.nestedChild.doublyNestedChild') }, + ], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + + test('it returns all fields unfiletered if "item.nested" is not "child" or "parent"', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); + const expected: IIndexPattern = { + fields: [...fields], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + }); + + describe('list type endpoint', () => { + let payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + + beforeAll(() => { + payloadIndexPattern = { + ...payloadIndexPattern, + fields: [...payloadIndexPattern.fields, ...mockEndpointFields], + }; + }); + + test('it returns nested fields that match parent value when "item.nested" is "child"', () => { + const payloadItem: FormattedBuilderEntry = { + correspondingKeywordField: undefined, + entryIndex: 0, + field: getEndpointField('file.Ext.code_signature.status'), + id: '123', + nested: 'child', + operator: isOperator, + parent: { + parent: { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], + field: 'file.Ext.code_signature', + }, + parentIndex: 0, + }, + value: 'some value', + }; + const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'endpoint'); + const expected: IIndexPattern = { + fields: [{ ...getEndpointField('file.Ext.code_signature.status'), name: 'status' }], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + + test('it returns only parent nested field when "item.nested" is "parent" and nested parent field is not undefined', () => { + const payloadItem: FormattedBuilderEntry = { + ...getMockNestedParentBuilderEntry(), + field: { + ...getEndpointField('file.Ext.code_signature.status'), + esTypes: ['nested'], + name: 'file.Ext.code_signature', + }, + }; + const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'endpoint'); + const expected: IIndexPattern = { + fields: [ + { + aggregatable: false, + count: 0, + esTypes: ['nested'], + name: 'file.Ext.code_signature', + readFromDocValues: false, + scripted: false, + searchable: true, + subType: { + nested: { + path: 'file.Ext.code_signature', + }, + }, + type: 'string', + }, + ], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + + test('it returns only nested fields when "item.nested" is "parent" and nested parent field is undefined', () => { + const payloadItem: FormattedBuilderEntry = { + ...getMockNestedParentBuilderEntry(), + field: undefined, + }; + const output = getFilteredIndexPatterns( + payloadIndexPattern, + payloadItem, + 'endpoint', + filterIndexPatterns + ); + const expected: IIndexPattern = { + fields: [getEndpointField('file.Ext.code_signature.status')], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + + test('it returns all fields that matched those in "exceptionable_fields.json" with no further filtering if "item.nested" is not "child" or "parent"', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getFilteredIndexPatterns( + payloadIndexPattern, + payloadItem, + 'endpoint', + filterIndexPatterns + ); + const expected: IIndexPattern = { + fields: [ + { + aggregatable: false, + count: 0, + esTypes: ['keyword'], + name: 'file.path.caseless', + readFromDocValues: false, + scripted: false, + searchable: true, + type: 'string', + }, + { + aggregatable: false, + count: 0, + esTypes: ['text'], + name: 'file.Ext.code_signature.status', + readFromDocValues: false, + scripted: false, + searchable: true, + subType: { nested: { path: 'file.Ext.code_signature' } }, + type: 'string', + }, + ], + id: '1234', + title: 'logstash-*', + }; + expect(output).toEqual(expected); + }); + }); + }); + + describe('#getEntryFromOperator', () => { + test('it returns current value when switching from "is" to "is not"', () => { + const payloadOperator: OperatorOption = isNotOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + value: 'I should stay the same', + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryMatch & { id?: string } = { + field: 'ip', + id: '123', + operator: 'excluded', + type: OperatorTypeEnum.MATCH, + value: 'I should stay the same', + }; + expect(output).toEqual(expected); + }); + + test('it returns current value when switching from "is not" to "is"', () => { + const payloadOperator: OperatorOption = isOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isNotOperator, + value: 'I should stay the same', + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryMatch & { id?: string } = { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'I should stay the same', + }; + expect(output).toEqual(expected); + }); + + test('it returns empty value when switching operator types to "match"', () => { + const payloadOperator: OperatorOption = isOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isNotOneOfOperator, + value: ['I should stay the same'], + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryMatch & { id?: string } = { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: '', + }; + expect(output).toEqual(expected); + }); + + test('it returns current value when switching from "is one of" to "is not one of"', () => { + const payloadOperator: OperatorOption = isNotOneOfOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isOneOfOperator, + value: ['I should stay the same'], + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryMatchAny & { id?: string } = { + field: 'ip', + id: '123', + operator: 'excluded', + type: OperatorTypeEnum.MATCH_ANY, + value: ['I should stay the same'], + }; + expect(output).toEqual(expected); + }); + + test('it returns current value when switching from "is not one of" to "is one of"', () => { + const payloadOperator: OperatorOption = isOneOfOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isNotOneOfOperator, + value: ['I should stay the same'], + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryMatchAny & { id?: string } = { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: ['I should stay the same'], + }; + expect(output).toEqual(expected); + }); + + test('it returns empty value when switching operator types to "match_any"', () => { + const payloadOperator: OperatorOption = isOneOfOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isOperator, + value: 'I should stay the same', + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryMatchAny & { id?: string } = { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: [], + }; + expect(output).toEqual(expected); + }); + + test('it returns current value when switching from "exists" to "does not exist"', () => { + const payloadOperator: OperatorOption = doesNotExistOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: existsOperator, + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryExists & { id?: string } = { + field: 'ip', + id: '123', + operator: 'excluded', + type: 'exists', + }; + expect(output).toEqual(expected); + }); + + test('it returns current value when switching from "does not exist" to "exists"', () => { + const payloadOperator: OperatorOption = existsOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: doesNotExistOperator, + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryExists & { id?: string } = { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: 'exists', + }; + expect(output).toEqual(expected); + }); + + test('it returns empty value when switching operator types to "exists"', () => { + const payloadOperator: OperatorOption = existsOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isOperator, + value: 'I should stay the same', + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryExists & { id?: string } = { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: 'exists', + }; + expect(output).toEqual(expected); + }); + + test('it returns empty value when switching operator types to "list"', () => { + const payloadOperator: OperatorOption = isInListOperator; + const payloadEntry: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isOperator, + value: 'I should stay the same', + }; + const output = getEntryFromOperator(payloadOperator, payloadEntry); + const expected: EntryList & { id?: string } = { + field: 'ip', + id: '123', + list: { id: '', type: 'ip' }, + operator: OperatorEnum.INCLUDED, + type: 'list', + }; + expect(output).toEqual(expected); + }); + }); + + describe('#getOperatorOptions', () => { + test('it returns "isOperator" when field type is nested but field itself has not yet been selected', () => { + const payloadItem: FormattedBuilderEntry = getMockNestedParentBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'endpoint', false); + const expected: OperatorOption[] = [isOperator]; + expect(output).toEqual(expected); + }); + + test('it returns "isOperator" if no field selected', () => { + const payloadItem: FormattedBuilderEntry = { ...getMockBuilderEntry(), field: undefined }; + const output = getOperatorOptions(payloadItem, 'endpoint', false); + const expected: OperatorOption[] = [isOperator]; + expect(output).toEqual(expected); + }); + + test('it returns "isOperator" and "isOneOfOperator" if item is nested and "listType" is "endpoint"', () => { + const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'endpoint', false); + const expected: OperatorOption[] = [isOperator, isOneOfOperator]; + expect(output).toEqual(expected); + }); + + test('it returns "isOperator" and "isOneOfOperator" if "listType" is "endpoint"', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'endpoint', false); + const expected: OperatorOption[] = [isOperator, isOneOfOperator]; + expect(output).toEqual(expected); + }); + + test('it returns "isOperator" if "listType" is "endpoint" and field type is boolean', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'endpoint', true); + const expected: OperatorOption[] = [isOperator]; + expect(output).toEqual(expected); + }); + + test('it returns "isOperator", "isOneOfOperator", and "existsOperator" if item is nested and "listType" is "detection"', () => { + const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'detection', false); + const expected: OperatorOption[] = [isOperator, isOneOfOperator, existsOperator]; + expect(output).toEqual(expected); + }); + + test('it returns "isOperator" and "existsOperator" if item is nested, "listType" is "detection", and field type is boolean', () => { + const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'detection', true); + const expected: OperatorOption[] = [isOperator, existsOperator]; + expect(output).toEqual(expected); + }); + + test('it returns all operator options if "listType" is "detection"', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'detection', false); + const expected: OperatorOption[] = EXCEPTION_OPERATORS; + expect(output).toEqual(expected); + }); + + test('it returns "isOperator", "isNotOperator", "doesNotExistOperator" and "existsOperator" if field type is boolean', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'detection', true); + const expected: OperatorOption[] = [ + isOperator, + isNotOperator, + existsOperator, + doesNotExistOperator, + ]; + expect(output).toEqual(expected); + }); + + test('it returns list operators if specified to', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'detection', false, true); + expect(output).toEqual(EXCEPTION_OPERATORS); + }); + + test('it does not return list operators if specified not to', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getOperatorOptions(payloadItem, 'detection', false, false); + expect(output).toEqual(EXCEPTION_OPERATORS_SANS_LISTS); + }); + }); + + describe('#getEntryOnFieldChange', () => { + test('it returns nested entry with single new subentry when "item.nested" is "parent"', () => { + const payloadItem: FormattedBuilderEntry = getMockNestedParentBuilderEntry(); + const payloadIFieldType: IFieldType = getField('nestedField.child'); + const output = getEntryOnFieldChange(payloadItem, payloadIFieldType); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: 'child', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: '', + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns nested entry with newly selected field value when "item.nested" is "child"', () => { + const payloadItem: FormattedBuilderEntry = { + ...getMockNestedBuilderEntry(), + parent: { + parent: { + ...getEntryNestedWithIdMock(), + entries: [ + { ...getEntryMatchWithIdMock(), field: 'child' }, + getEntryMatchAnyWithIdMock(), + ], + field: 'nestedField', + }, + parentIndex: 0, + }, + }; + const payloadIFieldType: IFieldType = getField('nestedField.child'); + const output = getEntryOnFieldChange(payloadItem, payloadIFieldType); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: 'child', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: '', + }, + getEntryMatchAnyWithIdMock(), + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns field of type "match" with updated field if not a nested entry', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const payloadIFieldType: IFieldType = getField('ip'); + const output = getEntryOnFieldChange(payloadItem, payloadIFieldType); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: '', + }, + }; + expect(output).toEqual(expected); + }); + }); + + describe('#getEntryOnOperatorChange', () => { + test('it returns updated subentry preserving its value when entry is not switching operator types', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const payloadOperator: OperatorOption = isNotOperator; + const output = getEntryOnOperatorChange(payloadItem, payloadOperator); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: 'ip', + id: '123', + operator: 'excluded', + type: OperatorTypeEnum.MATCH, + value: 'some value', + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns updated subentry resetting its value when entry is switching operator types', () => { + const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); + const payloadOperator: OperatorOption = isOneOfOperator; + const output = getEntryOnOperatorChange(payloadItem, payloadOperator); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: [], + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns updated subentry preserving its value when entry is nested and not switching operator types', () => { + const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); + const payloadOperator: OperatorOption = isNotOperator; + const output = getEntryOnOperatorChange(payloadItem, payloadOperator); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: 'child', + id: '123', + operator: OperatorEnum.EXCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'some value', + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns updated subentry resetting its value when entry is nested and switching operator types', () => { + const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); + const payloadOperator: OperatorOption = isOneOfOperator; + const output = getEntryOnOperatorChange(payloadItem, payloadOperator); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: 'child', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: [], + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + }); + + describe('#getEntryOnMatchChange', () => { + test('it returns entry with updated value', () => { + const payload: FormattedBuilderEntry = getMockBuilderEntry(); + const output = getEntryOnMatchChange(payload, 'jibber jabber'); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'jibber jabber', + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { + const payload: FormattedBuilderEntry = { ...getMockBuilderEntry(), field: undefined }; + const output = getEntryOnMatchChange(payload, 'jibber jabber'); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: '', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'jibber jabber', + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns nested entry with updated value', () => { + const payload: FormattedBuilderEntry = getMockNestedBuilderEntry(); + const output = getEntryOnMatchChange(payload, 'jibber jabber'); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: 'child', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'jibber jabber', + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns nested entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { + const payload: FormattedBuilderEntry = { ...getMockNestedBuilderEntry(), field: undefined }; + const output = getEntryOnMatchChange(payload, 'jibber jabber'); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: '', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'jibber jabber', + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + }); + + describe('#getEntryOnMatchAnyChange', () => { + test('it returns entry with updated value', () => { + const payload: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isOneOfOperator, + value: ['some value'], + }; + const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: 'ip', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: ['jibber jabber'], + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { + const payload: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + field: undefined, + operator: isOneOfOperator, + value: ['some value'], + }; + const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: '', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: ['jibber jabber'], + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns nested entry with updated value', () => { + const payload: FormattedBuilderEntry = { + ...getMockNestedBuilderEntry(), + parent: { + parent: { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryMatchAnyWithIdMock(), field: 'child' }], + field: 'nestedField', + }, + parentIndex: 0, + }, + }; + const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: 'child', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: ['jibber jabber'], + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns nested entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { + const payload: FormattedBuilderEntry = { + ...getMockNestedBuilderEntry(), + field: undefined, + parent: { + parent: { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryMatchAnyWithIdMock(), field: 'child' }], + field: 'nestedField', + }, + parentIndex: 0, + }, + }; + const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + entries: [ + { + field: '', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH_ANY, + value: ['jibber jabber'], + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + }; + expect(output).toEqual(expected); + }); + }); + + describe('#getEntryOnListChange', () => { + test('it returns entry with updated value', () => { + const payload: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + operator: isOneOfOperator, + value: '1234', + }; + const output = getEntryOnListChange(payload, getListResponseMock()); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: 'ip', + id: '123', + list: { id: 'some-list-id', type: 'ip' }, + operator: OperatorEnum.INCLUDED, + type: 'list', + }, + }; + expect(output).toEqual(expected); + }); + + test('it returns entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { + const payload: FormattedBuilderEntry = { + ...getMockBuilderEntry(), + field: undefined, + operator: isOneOfOperator, + value: '1234', + }; + const output = getEntryOnListChange(payload, getListResponseMock()); + const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { + index: 0, + updatedEntry: { + field: '', + id: '123', + list: { id: 'some-list-id', type: 'ip' }, + operator: OperatorEnum.INCLUDED, + type: 'list', + }, + }; + expect(output).toEqual(expected); + }); + }); + + describe('#getFormattedBuilderEntries', () => { + test('it returns formatted entry with field undefined if it unable to find a matching index pattern field', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItems: BuilderEntry[] = [getEntryMatchWithIdMock()]; + const output = getFormattedBuilderEntries(payloadIndexPattern, payloadItems); + const expected: FormattedBuilderEntry[] = [ + { + correspondingKeywordField: undefined, + entryIndex: 0, + field: undefined, + id: '123', + nested: undefined, + operator: isOperator, + parent: undefined, + value: 'some host name', + }, + ]; + expect(output).toEqual(expected); + }); + + test('it returns formatted entries when no nested entries exist', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItems: BuilderEntry[] = [ + { ...getEntryMatchWithIdMock(), field: 'ip', value: 'some ip' }, + { ...getEntryMatchAnyWithIdMock(), field: 'extension', value: ['some extension'] }, + ]; + const output = getFormattedBuilderEntries(payloadIndexPattern, payloadItems); + const expected: FormattedBuilderEntry[] = [ + { + correspondingKeywordField: undefined, + entryIndex: 0, + field: { + aggregatable: true, + count: 0, + esTypes: ['ip'], + name: 'ip', + readFromDocValues: true, + scripted: false, + searchable: true, + type: 'ip', + }, + id: '123', + nested: undefined, + operator: isOperator, + parent: undefined, + value: 'some ip', + }, + { + correspondingKeywordField: undefined, + entryIndex: 1, + field: { + aggregatable: true, + count: 0, + esTypes: ['keyword'], + name: 'extension', + readFromDocValues: true, + scripted: false, + searchable: true, + type: 'string', + }, + id: '123', + nested: undefined, + operator: isOneOfOperator, + parent: undefined, + value: ['some extension'], + }, + ]; + expect(output).toEqual(expected); + }); + + test('it returns formatted entries when nested entries exist', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadParent: EntryNested = { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], + field: 'nestedField', + }; + const payloadItems: BuilderEntry[] = [ + { ...getEntryMatchWithIdMock(), field: 'ip', value: 'some ip' }, + { ...payloadParent }, + ]; + + const output = getFormattedBuilderEntries(payloadIndexPattern, payloadItems); + const expected: FormattedBuilderEntry[] = [ + { + correspondingKeywordField: undefined, + entryIndex: 0, + field: { + aggregatable: true, + count: 0, + esTypes: ['ip'], + name: 'ip', + readFromDocValues: true, + scripted: false, + searchable: true, + type: 'ip', + }, + id: '123', + nested: undefined, + operator: isOperator, + parent: undefined, + value: 'some ip', + }, + { + correspondingKeywordField: undefined, + entryIndex: 1, + field: { + aggregatable: false, + esTypes: ['nested'], + name: 'nestedField', + searchable: false, + type: 'string', + }, + id: '123', + nested: 'parent', + operator: isOperator, + parent: undefined, + value: undefined, + }, + { + correspondingKeywordField: undefined, + entryIndex: 0, + field: { + aggregatable: false, + count: 0, + esTypes: ['text'], + name: 'child', + readFromDocValues: false, + scripted: false, + searchable: true, + subType: { + nested: { + path: 'nestedField', + }, + }, + type: 'string', + }, + id: '123', + nested: 'child', + operator: isOperator, + parent: { + parent: { + entries: [ + { + field: 'child', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'some host name', + }, + ], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + parentIndex: 1, + }, + value: 'some host name', + }, + ]; + expect(output).toEqual(expected); + }); + }); + + describe('#getUpdatedEntriesOnDelete', () => { + test('it removes entry corresponding to "entryIndex"', () => { + const payloadItem: ExceptionsBuilderExceptionItem = { + ...getExceptionListItemSchemaMock(), + entries: ENTRIES_WITH_IDS, + }; + const output = getUpdatedEntriesOnDelete(payloadItem, 0, null); + const expected: ExceptionsBuilderExceptionItem = { + ...getExceptionListItemSchemaMock(), + entries: [ + { + field: 'some.not.nested.field', + id: '123', + operator: OperatorEnum.INCLUDED, + type: OperatorTypeEnum.MATCH, + value: 'some value', + }, + ], + }; + expect(output).toEqual(expected); + }); + + test('it removes nested entry of "entryIndex" with corresponding parent index', () => { + const payloadItem: ExceptionsBuilderExceptionItem = { + ...getExceptionListItemSchemaMock(), + entries: [ + { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryExistsWithIdMock() }, { ...getEntryMatchAnyWithIdMock() }], + }, + ], + }; + const output = getUpdatedEntriesOnDelete(payloadItem, 0, 0); + const expected: ExceptionsBuilderExceptionItem = { + ...getExceptionListItemSchemaMock(), + entries: [ + { ...getEntryNestedWithIdMock(), entries: [{ ...getEntryMatchAnyWithIdMock() }] }, + ], + }; + expect(output).toEqual(expected); + }); + + test('it removes entire nested entry if after deleting specified nested entry, there are no more nested entries left', () => { + const payloadItem: ExceptionsBuilderExceptionItem = { + ...getExceptionListItemSchemaMock(), + entries: [ + { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryExistsWithIdMock() }], + }, + ], + }; + const output = getUpdatedEntriesOnDelete(payloadItem, 0, 0); + const expected: ExceptionsBuilderExceptionItem = { + ...getExceptionListItemSchemaMock(), + entries: [], + }; + expect(output).toEqual(expected); + }); + }); + + describe('#getFormattedBuilderEntry', () => { + test('it returns entry with a value for "correspondingKeywordField" when "item.field" is of type "text" and matching keyword field exists', () => { + const payloadIndexPattern: IIndexPattern = { + ...getMockIndexPattern(), + fields: [ + ...fields, + { + aggregatable: false, + count: 0, + esTypes: ['text'], + name: 'machine.os.raw.text', + readFromDocValues: true, + scripted: false, + searchable: false, + type: 'string', + }, + ], + }; + const payloadItem: BuilderEntry = { + ...getEntryMatchWithIdMock(), + field: 'machine.os.raw.text', + value: 'some os', + }; + const output = getFormattedBuilderEntry( + payloadIndexPattern, + payloadItem, + 0, + undefined, + undefined + ); + const expected: FormattedBuilderEntry = { + correspondingKeywordField: getField('machine.os.raw'), + entryIndex: 0, + field: { + aggregatable: false, + count: 0, + esTypes: ['text'], + name: 'machine.os.raw.text', + readFromDocValues: true, + scripted: false, + searchable: false, + type: 'string', + }, + id: '123', + nested: undefined, + operator: isOperator, + parent: undefined, + value: 'some os', + }; + expect(output).toEqual(expected); + }); + + test('it returns "FormattedBuilderEntry" with value "nested" of "child" when "parent" and "parentIndex" are defined', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItem: BuilderEntry = { ...getEntryMatchWithIdMock(), field: 'child' }; + const payloadParent: EntryNested = { + ...getEntryNestedWithIdMock(), + entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], + field: 'nestedField', + }; + const output = getFormattedBuilderEntry( + payloadIndexPattern, + payloadItem, + 0, + payloadParent, + 1 + ); + const expected: FormattedBuilderEntry = { + correspondingKeywordField: undefined, + entryIndex: 0, + field: { + aggregatable: false, + count: 0, + esTypes: ['text'], + name: 'child', + readFromDocValues: false, + scripted: false, + searchable: true, + subType: { + nested: { + path: 'nestedField', + }, + }, + type: 'string', + }, + id: '123', + nested: 'child', + operator: isOperator, + parent: { + parent: { + entries: [{ ...payloadItem }], + field: 'nestedField', + id: '123', + type: OperatorTypeEnum.NESTED, + }, + parentIndex: 1, + }, + value: 'some host name', + }; + expect(output).toEqual(expected); + }); + + test('it returns non nested "FormattedBuilderEntry" when "parent" and "parentIndex" are not defined', () => { + const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); + const payloadItem: BuilderEntry = { + ...getEntryMatchWithIdMock(), + field: 'ip', + value: 'some ip', + }; + const output = getFormattedBuilderEntry( + payloadIndexPattern, + payloadItem, + 0, + undefined, + undefined + ); + const expected: FormattedBuilderEntry = { + correspondingKeywordField: undefined, + entryIndex: 0, + field: { + aggregatable: true, + count: 0, + esTypes: ['ip'], + name: 'ip', + readFromDocValues: true, + scripted: false, + searchable: true, + type: 'ip', + }, + id: '123', + nested: undefined, + operator: isOperator, + parent: undefined, + value: 'some ip', + }; + expect(output).toEqual(expected); + }); + }); + + describe('#isEntryNested', () => { + test('it returns "false" if payload is not of type EntryNested', () => { + const payload: BuilderEntry = getEntryMatchWithIdMock(); + const output = isEntryNested(payload); + const expected = false; + expect(output).toEqual(expected); + }); + + test('it returns "true if payload is of type EntryNested', () => { + const payload: EntryNested = getEntryNestedWithIdMock(); + const output = isEntryNested(payload); + const expected = true; + expect(output).toEqual(expected); + }); + }); + + describe('#getCorrespondingKeywordField', () => { + test('it returns matching keyword field if "selectedFieldIsTextType" is true and keyword field exists', () => { + const output = getCorrespondingKeywordField({ + fields, + selectedField: 'machine.os.raw.text', + }); + + expect(output).toEqual(getField('machine.os.raw')); + }); + + test('it returns undefined if "selectedFieldIsTextType" is false', () => { + const output = getCorrespondingKeywordField({ + fields, + selectedField: 'machine.os.raw', + }); + + expect(output).toEqual(undefined); + }); + + test('it returns undefined if "selectedField" is empty string', () => { + const output = getCorrespondingKeywordField({ + fields, + selectedField: '', + }); + + expect(output).toEqual(undefined); + }); + + test('it returns undefined if "selectedField" is undefined', () => { + const output = getCorrespondingKeywordField({ + fields, + selectedField: undefined, + }); + + expect(output).toEqual(undefined); + }); + }); +}); diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/helpers.ts b/x-pack/plugins/lists/public/exceptions/components/builder/helpers.ts new file mode 100644 index 0000000000000..b3ed9d296a218 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/builder/helpers.ts @@ -0,0 +1,667 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { IFieldType, IIndexPattern } from '../../../../../../../src/plugins/data/public'; +import { addIdToItem } from '../../../../common/shared_imports'; +import { + Entry, + EntryNested, + ExceptionListType, + ListSchema, + OperatorTypeEnum, + entriesList, +} from '../../../../common'; +import { + EXCEPTION_OPERATORS, + EXCEPTION_OPERATORS_SANS_LISTS, + doesNotExistOperator, + existsOperator, + isNotOperator, + isOneOfOperator, + isOperator, +} from '../autocomplete/operators'; +import { OperatorOption } from '../autocomplete/types'; + +import { + BuilderEntry, + EmptyNestedEntry, + ExceptionsBuilderExceptionItem, + FormattedBuilderEntry, +} from './types'; + +export const isEntryNested = (item: BuilderEntry): item is EntryNested => { + return (item as EntryNested).entries != null; +}; + +/** + * Returns the operator type, may not need this if using io-ts types + * + * @param item a single ExceptionItem entry + */ +export const getOperatorType = (item: BuilderEntry): OperatorTypeEnum => { + switch (item.type) { + case 'match': + return OperatorTypeEnum.MATCH; + case 'match_any': + return OperatorTypeEnum.MATCH_ANY; + case 'list': + return OperatorTypeEnum.LIST; + default: + return OperatorTypeEnum.EXISTS; + } +}; + +/** + * Determines operator selection (is/is not/is one of, etc.) + * Default operator is "is" + * + * @param item a single ExceptionItem entry + */ +export const getExceptionOperatorSelect = (item: BuilderEntry): OperatorOption => { + if (item.type === 'nested') { + return isOperator; + } else { + const operatorType = getOperatorType(item); + const foundOperator = EXCEPTION_OPERATORS.find((operatorOption) => { + return item.operator === operatorOption.operator && operatorType === operatorOption.type; + }); + + return foundOperator ?? isOperator; + } +}; + +/** + * Returns the fields corresponding value for an entry + * + * @param item a single ExceptionItem entry + */ +export const getEntryValue = (item: BuilderEntry): string | string[] | undefined => { + switch (item.type) { + case OperatorTypeEnum.MATCH: + case OperatorTypeEnum.MATCH_ANY: + return item.value; + case OperatorTypeEnum.EXISTS: + return undefined; + case OperatorTypeEnum.LIST: + return item.list.id; + default: + return undefined; + } +}; + +/** + * Determines whether an entire entry, exception item, or entry within a nested + * entry needs to be removed + * + * @param exceptionItem + * @param entryIndex index of given entry, for nested entries, this will correspond + * to their parent index + * @param nestedEntryIndex index of nested entry + * + */ +export const getUpdatedEntriesOnDelete = ( + exceptionItem: ExceptionsBuilderExceptionItem, + entryIndex: number, + nestedParentIndex: number | null +): ExceptionsBuilderExceptionItem => { + const itemOfInterest: BuilderEntry = exceptionItem.entries[nestedParentIndex ?? entryIndex]; + + if (nestedParentIndex != null && itemOfInterest.type === OperatorTypeEnum.NESTED) { + const updatedEntryEntries = [ + ...itemOfInterest.entries.slice(0, entryIndex), + ...itemOfInterest.entries.slice(entryIndex + 1), + ]; + + if (updatedEntryEntries.length === 0) { + return { + ...exceptionItem, + entries: [ + ...exceptionItem.entries.slice(0, nestedParentIndex), + ...exceptionItem.entries.slice(nestedParentIndex + 1), + ], + }; + } else { + const { field } = itemOfInterest; + const updatedItemOfInterest: EntryNested | EmptyNestedEntry = { + entries: updatedEntryEntries, + field, + id: itemOfInterest.id ?? `${entryIndex}`, + type: OperatorTypeEnum.NESTED, + }; + + return { + ...exceptionItem, + entries: [ + ...exceptionItem.entries.slice(0, nestedParentIndex), + updatedItemOfInterest, + ...exceptionItem.entries.slice(nestedParentIndex + 1), + ], + }; + } + } else { + return { + ...exceptionItem, + entries: [ + ...exceptionItem.entries.slice(0, entryIndex), + ...exceptionItem.entries.slice(entryIndex + 1), + ], + }; + } +}; + +/** + * Returns filtered index patterns based on the field - if a user selects to + * add nested entry, should only show nested fields, if item is the parent + * field of a nested entry, we only display the parent field + * + * @param patterns IIndexPattern containing available fields on rule index + * @param item exception item entry + * set to add a nested field + */ +export const getFilteredIndexPatterns = ( + patterns: IIndexPattern, + item: FormattedBuilderEntry, + type: ExceptionListType, + preFilter?: (i: IIndexPattern, t: ExceptionListType) => IIndexPattern +): IIndexPattern => { + const indexPatterns = preFilter != null ? preFilter(patterns, type) : patterns; + + if (item.nested === 'child' && item.parent != null) { + // when user has selected a nested entry, only fields with the common parent are shown + return { + ...indexPatterns, + fields: indexPatterns.fields + .filter((indexField) => { + const fieldHasCommonParentPath = + indexField.subType != null && + indexField.subType.nested != null && + item.parent != null && + indexField.subType.nested.path === item.parent.parent.field; + + return fieldHasCommonParentPath; + }) + .map((f) => { + const [fieldNameWithoutParentPath] = f.name.split('.').slice(-1); + return { ...f, name: fieldNameWithoutParentPath }; + }), + }; + } else if (item.nested === 'parent' && item.field != null) { + // when user has selected a nested entry, right above it we show the common parent + return { ...indexPatterns, fields: [item.field] }; + } else if (item.nested === 'parent' && item.field == null) { + // when user selects to add a nested entry, only nested fields are shown as options + return { + ...indexPatterns, + fields: indexPatterns.fields.filter( + (field) => field.subType != null && field.subType.nested != null + ), + }; + } else { + return indexPatterns; + } +}; + +/** + * Determines proper entry update when user selects new field + * + * @param item - current exception item entry values + * @param newField - newly selected field + * + */ +export const getEntryOnFieldChange = ( + item: FormattedBuilderEntry, + newField: IFieldType +): { index: number; updatedEntry: BuilderEntry } => { + const { parent, entryIndex, nested } = item; + const newChildFieldValue = newField != null ? newField.name.split('.').slice(-1)[0] : ''; + + if (nested === 'parent') { + // For nested entries, when user first selects to add a nested + // entry, they first see a row similar to what is shown for when + // a user selects "exists", as soon as they make a selection + // we can now identify the 'parent' and 'child' this is where + // we first convert the entry into type "nested" + const newParentFieldValue = + newField.subType != null && newField.subType.nested != null + ? newField.subType.nested.path + : ''; + + return { + index: entryIndex, + updatedEntry: { + entries: [ + addIdToItem({ + field: newChildFieldValue ?? '', + operator: isOperator.operator, + type: OperatorTypeEnum.MATCH, + value: '', + }), + ], + field: newParentFieldValue, + id: item.id, + type: OperatorTypeEnum.NESTED, + }, + }; + } else if (nested === 'child' && parent != null) { + return { + index: parent.parentIndex, + updatedEntry: { + ...parent.parent, + entries: [ + ...parent.parent.entries.slice(0, entryIndex), + { + field: newChildFieldValue ?? '', + id: item.id, + operator: isOperator.operator, + type: OperatorTypeEnum.MATCH, + value: '', + }, + ...parent.parent.entries.slice(entryIndex + 1), + ], + }, + }; + } else { + return { + index: entryIndex, + updatedEntry: { + field: newField != null ? newField.name : '', + id: item.id, + operator: isOperator.operator, + type: OperatorTypeEnum.MATCH, + value: '', + }, + }; + } +}; + +/** + * Determines proper entry update when user updates value + * when operator is of type "list" + * + * @param item - current exception item entry values + * @param newField - newly selected list + * + */ +export const getEntryOnListChange = ( + item: FormattedBuilderEntry, + newField: ListSchema +): { index: number; updatedEntry: BuilderEntry } => { + const { entryIndex, field, operator } = item; + const { id, type } = newField; + + return { + index: entryIndex, + updatedEntry: { + field: field != null ? field.name : '', + id: item.id, + list: { id, type }, + operator: operator.operator, + type: OperatorTypeEnum.LIST, + }, + }; +}; + +/** + * Determines proper entry update when user updates value + * when operator is of type "match_any" + * + * @param item - current exception item entry values + * @param newField - newly entered value + * + */ +export const getEntryOnMatchAnyChange = ( + item: FormattedBuilderEntry, + newField: string[] +): { index: number; updatedEntry: BuilderEntry } => { + const { nested, parent, entryIndex, field, operator } = item; + + if (nested != null && parent != null) { + const fieldName = field != null ? field.name.split('.').slice(-1)[0] : ''; + + return { + index: parent.parentIndex, + updatedEntry: { + ...parent.parent, + entries: [ + ...parent.parent.entries.slice(0, entryIndex), + { + field: fieldName, + id: item.id, + operator: operator.operator, + type: OperatorTypeEnum.MATCH_ANY, + value: newField, + }, + ...parent.parent.entries.slice(entryIndex + 1), + ], + }, + }; + } else { + return { + index: entryIndex, + updatedEntry: { + field: field != null ? field.name : '', + id: item.id, + operator: operator.operator, + type: OperatorTypeEnum.MATCH_ANY, + value: newField, + }, + }; + } +}; + +/** + * Determines proper entry update when user updates value + * when operator is of type "match" + * + * @param item - current exception item entry values + * @param newField - newly entered value + * + */ +export const getEntryOnMatchChange = ( + item: FormattedBuilderEntry, + newField: string +): { index: number; updatedEntry: BuilderEntry } => { + const { nested, parent, entryIndex, field, operator } = item; + + if (nested != null && parent != null) { + const fieldName = field != null ? field.name.split('.').slice(-1)[0] : ''; + + return { + index: parent.parentIndex, + updatedEntry: { + ...parent.parent, + entries: [ + ...parent.parent.entries.slice(0, entryIndex), + { + field: fieldName, + id: item.id, + operator: operator.operator, + type: OperatorTypeEnum.MATCH, + value: newField, + }, + ...parent.parent.entries.slice(entryIndex + 1), + ], + }, + }; + } else { + return { + index: entryIndex, + updatedEntry: { + field: field != null ? field.name : '', + id: item.id, + operator: operator.operator, + type: OperatorTypeEnum.MATCH, + value: newField, + }, + }; + } +}; + +/** + * On operator change, determines whether value needs to be cleared or not + * + * @param field + * @param selectedOperator + * @param currentEntry + * + */ +export const getEntryFromOperator = ( + selectedOperator: OperatorOption, + currentEntry: FormattedBuilderEntry +): Entry & { id?: string } => { + const isSameOperatorType = currentEntry.operator.type === selectedOperator.type; + const fieldValue = currentEntry.field != null ? currentEntry.field.name : ''; + switch (selectedOperator.type) { + case 'match': + return { + field: fieldValue, + id: currentEntry.id, + operator: selectedOperator.operator, + type: OperatorTypeEnum.MATCH, + value: + isSameOperatorType && typeof currentEntry.value === 'string' ? currentEntry.value : '', + }; + case 'match_any': + return { + field: fieldValue, + id: currentEntry.id, + operator: selectedOperator.operator, + type: OperatorTypeEnum.MATCH_ANY, + value: isSameOperatorType && Array.isArray(currentEntry.value) ? currentEntry.value : [], + }; + case 'list': + return { + field: fieldValue, + id: currentEntry.id, + list: { id: '', type: 'ip' }, + operator: selectedOperator.operator, + type: OperatorTypeEnum.LIST, + }; + default: + return { + field: fieldValue, + id: currentEntry.id, + operator: selectedOperator.operator, + type: OperatorTypeEnum.EXISTS, + }; + } +}; + +/** + * Determines proper entry update when user selects new operator + * + * @param item - current exception item entry values + * @param newOperator - newly selected operator + * + */ +export const getEntryOnOperatorChange = ( + item: FormattedBuilderEntry, + newOperator: OperatorOption +): { updatedEntry: BuilderEntry; index: number } => { + const { parent, entryIndex, field, nested } = item; + const newEntry = getEntryFromOperator(newOperator, item); + + if (!entriesList.is(newEntry) && nested != null && parent != null) { + return { + index: parent.parentIndex, + updatedEntry: { + ...parent.parent, + entries: [ + ...parent.parent.entries.slice(0, entryIndex), + { + ...newEntry, + field: field != null ? field.name.split('.').slice(-1)[0] : '', + }, + ...parent.parent.entries.slice(entryIndex + 1), + ], + }, + }; + } else { + return { index: entryIndex, updatedEntry: newEntry }; + } +}; + +/** + * Determines which operators to make available + * + * @param item + * @param listType + * @param isBoolean + * @param includeValueListOperators whether or not to include the 'is in list' and 'is not in list' operators + */ +export const getOperatorOptions = ( + item: FormattedBuilderEntry, + listType: ExceptionListType, + isBoolean: boolean, + includeValueListOperators = true +): OperatorOption[] => { + if (item.nested === 'parent' || item.field == null) { + return [isOperator]; + } else if ((item.nested != null && listType === 'endpoint') || listType === 'endpoint') { + return isBoolean ? [isOperator] : [isOperator, isOneOfOperator]; + } else if (item.nested != null && listType === 'detection') { + return isBoolean ? [isOperator, existsOperator] : [isOperator, isOneOfOperator, existsOperator]; + } else { + return isBoolean + ? [isOperator, isNotOperator, existsOperator, doesNotExistOperator] + : includeValueListOperators + ? EXCEPTION_OPERATORS + : EXCEPTION_OPERATORS_SANS_LISTS; + } +}; + +/** + * Fields of type 'text' do not generate autocomplete values, we want + * to find it's corresponding keyword type (if available) which does + * generate autocomplete values + * + * @param fields IFieldType fields + * @param selectedField the field name that was selected + * @param isTextType we only want a corresponding keyword field if + * the selected field is of type 'text' + * + */ +export const getCorrespondingKeywordField = ({ + fields, + selectedField, +}: { + fields: IFieldType[]; + selectedField: string | undefined; +}): IFieldType | undefined => { + const selectedFieldBits = + selectedField != null && selectedField !== '' ? selectedField.split('.') : []; + const selectedFieldIsTextType = selectedFieldBits.slice(-1)[0] === 'text'; + + if (selectedFieldIsTextType && selectedFieldBits.length > 0) { + const keywordField = selectedFieldBits.slice(0, selectedFieldBits.length - 1).join('.'); + const [foundKeywordField] = fields.filter( + ({ name }) => keywordField !== '' && keywordField === name + ); + return foundKeywordField; + } + + return undefined; +}; + +/** + * Formats the entry into one that is easily usable for the UI, most of the + * complexity was introduced with nested fields + * + * @param patterns IIndexPattern containing available fields on rule index + * @param item exception item entry + * @param itemIndex entry index + * @param parent nested entries hold copy of their parent for use in various logic + * @param parentIndex corresponds to the entry index, this might seem obvious, but + * was added to ensure that nested items could be identified with their parent entry + */ +export const getFormattedBuilderEntry = ( + indexPattern: IIndexPattern, + item: BuilderEntry, + itemIndex: number, + parent: EntryNested | undefined, + parentIndex: number | undefined +): FormattedBuilderEntry => { + const { fields } = indexPattern; + const field = parent != null ? `${parent.field}.${item.field}` : item.field; + const [foundField] = fields.filter(({ name }) => field != null && field === name); + const correspondingKeywordField = getCorrespondingKeywordField({ + fields, + selectedField: field, + }); + + if (parent != null && parentIndex != null) { + return { + correspondingKeywordField, + entryIndex: itemIndex, + field: + foundField != null + ? { ...foundField, name: foundField.name.split('.').slice(-1)[0] } + : foundField, + id: item.id ?? `${itemIndex}`, + nested: 'child', + operator: getExceptionOperatorSelect(item), + parent: { parent, parentIndex }, + value: getEntryValue(item), + }; + } else { + return { + correspondingKeywordField, + entryIndex: itemIndex, + field: foundField, + id: item.id ?? `${itemIndex}`, + nested: undefined, + operator: getExceptionOperatorSelect(item), + parent: undefined, + value: getEntryValue(item), + }; + } +}; + +/** + * Formats the entries to be easily usable for the UI, most of the + * complexity was introduced with nested fields + * + * @param patterns IIndexPattern containing available fields on rule index + * @param entries exception item entries + * @param addNested boolean noting whether or not UI is currently + * set to add a nested field + * @param parent nested entries hold copy of their parent for use in various logic + * @param parentIndex corresponds to the entry index, this might seem obvious, but + * was added to ensure that nested items could be identified with their parent entry + */ +export const getFormattedBuilderEntries = ( + indexPattern: IIndexPattern, + entries: BuilderEntry[], + parent?: EntryNested, + parentIndex?: number +): FormattedBuilderEntry[] => { + return entries.reduce((acc, item, index) => { + const isNewNestedEntry = item.type === 'nested' && item.entries.length === 0; + if (item.type !== 'nested' && !isNewNestedEntry) { + const newItemEntry: FormattedBuilderEntry = getFormattedBuilderEntry( + indexPattern, + item, + index, + parent, + parentIndex + ); + return [...acc, newItemEntry]; + } else { + const parentEntry: FormattedBuilderEntry = { + correspondingKeywordField: undefined, + entryIndex: index, + field: isNewNestedEntry + ? undefined + : { + aggregatable: false, + esTypes: ['nested'], + name: item.field ?? '', + searchable: false, + type: 'string', + }, + id: item.id ?? `${index}`, + nested: 'parent', + operator: isOperator, + parent: undefined, + value: undefined, + }; + + // User has selected to add a nested field, but not yet selected the field + if (isNewNestedEntry) { + return [...acc, parentEntry]; + } + + if (isEntryNested(item)) { + const nestedItems = getFormattedBuilderEntries(indexPattern, item.entries, item, index); + + return [...acc, parentEntry, ...nestedItems]; + } + + return [...acc]; + } + }, []); +}; diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/translations.ts b/x-pack/plugins/lists/public/exceptions/components/builder/translations.ts new file mode 100644 index 0000000000000..9da598c08bd83 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/builder/translations.ts @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +export const FIELD = i18n.translate('xpack.lists.exceptions.builder.fieldLabel', { + defaultMessage: 'Field', +}); + +export const OPERATOR = i18n.translate('xpack.lists.exceptions.builder.operatorLabel', { + defaultMessage: 'Operator', +}); + +export const VALUE = i18n.translate('xpack.lists.exceptions.builder.valueLabel', { + defaultMessage: 'Value', +}); + +export const EXCEPTION_FIELD_VALUE_PLACEHOLDER = i18n.translate( + 'xpack.lists.exceptions.builder.exceptionFieldValuePlaceholder', + { + defaultMessage: 'Search field value...', + } +); + +export const EXCEPTION_FIELD_NESTED_PLACEHOLDER = i18n.translate( + 'xpack.lists.exceptions.builder.exceptionFieldNestedPlaceholder', + { + defaultMessage: 'Search nested field', + } +); + +export const EXCEPTION_FIELD_LISTS_PLACEHOLDER = i18n.translate( + 'xpack.lists.exceptions.builder.exceptionListsPlaceholder', + { + defaultMessage: 'Search for list...', + } +); + +export const EXCEPTION_FIELD_PLACEHOLDER = i18n.translate( + 'xpack.lists.exceptions.builder.exceptionFieldPlaceholder', + { + defaultMessage: 'Search', + } +); + +export const EXCEPTION_OPERATOR_PLACEHOLDER = i18n.translate( + 'xpack.lists.exceptions.builder.exceptionOperatorPlaceholder', + { + defaultMessage: 'Operator', + } +); diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/types.ts b/x-pack/plugins/lists/public/exceptions/components/builder/types.ts new file mode 100644 index 0000000000000..cdb4f735aa103 --- /dev/null +++ b/x-pack/plugins/lists/public/exceptions/components/builder/types.ts @@ -0,0 +1,90 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { IFieldType } from '../../../../../../../src/plugins/data/common'; +import { OperatorOption } from '../autocomplete/types'; +import { + CreateExceptionListItemSchema, + Entry, + EntryExists, + EntryMatch, + EntryMatchAny, + EntryNested, + ExceptionListItemSchema, + OperatorEnum, + OperatorTypeEnum, +} from '../../../../common'; + +export interface FormattedBuilderEntry { + id: string; + field: IFieldType | undefined; + operator: OperatorOption; + value: string | string[] | undefined; + nested: 'parent' | 'child' | undefined; + entryIndex: number; + parent: { parent: BuilderEntryNested; parentIndex: number } | undefined; + correspondingKeywordField: IFieldType | undefined; +} + +export interface EmptyEntry { + id: string; + field: string | undefined; + operator: OperatorEnum; + type: OperatorTypeEnum.MATCH | OperatorTypeEnum.MATCH_ANY; + value: string | string[] | undefined; +} + +export interface EmptyListEntry { + id: string; + field: string | undefined; + operator: OperatorEnum; + type: OperatorTypeEnum.LIST; + list: { id: string | undefined; type: string | undefined }; +} + +export interface EmptyNestedEntry { + id: string; + field: string | undefined; + type: OperatorTypeEnum.NESTED; + entries: Array< + | (EntryMatch & { id?: string }) + | (EntryMatchAny & { id?: string }) + | (EntryExists & { id?: string }) + >; +} + +export type BuilderEntry = + | (Entry & { id?: string }) + | EmptyListEntry + | EmptyEntry + | BuilderEntryNested + | EmptyNestedEntry; + +export type BuilderEntryNested = Omit & { + id?: string; + entries: Array< + | (EntryMatch & { id?: string }) + | (EntryMatchAny & { id?: string }) + | (EntryExists & { id?: string }) + >; +}; + +export type ExceptionListItemBuilderSchema = Omit & { + entries: BuilderEntry[]; +}; + +export type CreateExceptionListItemBuilderSchema = Omit< + CreateExceptionListItemSchema, + 'meta' | 'entries' +> & { + meta: { temporaryUuid: string }; + entries: BuilderEntry[]; +}; + +export type ExceptionsBuilderExceptionItem = + | ExceptionListItemBuilderSchema + | CreateExceptionListItemBuilderSchema; diff --git a/x-pack/plugins/lists/public/shared_exports.ts b/x-pack/plugins/lists/public/shared_exports.ts index c9938897b5093..d35fe5bb06c0c 100644 --- a/x-pack/plugins/lists/public/shared_exports.ts +++ b/x-pack/plugins/lists/public/shared_exports.ts @@ -38,3 +38,7 @@ export { UseExceptionListItemsSuccess, UseExceptionListsSuccess, } from './exceptions/types'; +export { BuilderEntryItem } from './exceptions/components/builder/entry_renderer'; +export { BuilderAndBadgeComponent } from './exceptions/components/builder/and_badge'; +export { BuilderEntryDeleteButtonComponent } from './exceptions/components/builder/entry_delete_button'; +export { BuilderExceptionListItemComponent } from './exceptions/components/builder/exception_item_renderer'; diff --git a/x-pack/plugins/lists/scripts/storybook.js b/x-pack/plugins/lists/scripts/storybook.js new file mode 100644 index 0000000000000..9a15d01b66af1 --- /dev/null +++ b/x-pack/plugins/lists/scripts/storybook.js @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { join } from 'path'; + +// eslint-disable-next-line +require('@kbn/storybook').runStorybookCli({ + name: 'lists', + storyGlobs: [join(__dirname, '..', 'public', '**', '*.stories.tsx')], +}); diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts index 070ad6ee98f00..ecdf94a076809 100644 --- a/x-pack/plugins/maps/common/constants.ts +++ b/x-pack/plugins/maps/common/constants.ts @@ -298,3 +298,5 @@ export type RawValue = string | number | boolean | undefined | null; export type FieldFormatter = (value: RawValue) => string | number; export const INDEX_META_DATA_CREATED_BY = 'maps-drawing-data-ingest'; + +export const MAX_DRAWING_SIZE_BYTES = 10485760; // 10MB diff --git a/x-pack/plugins/maps/common/types.ts b/x-pack/plugins/maps/common/types.ts index 806eac597ac57..6f2bd72c80896 100644 --- a/x-pack/plugins/maps/common/types.ts +++ b/x-pack/plugins/maps/common/types.ts @@ -22,3 +22,9 @@ export interface IndexSourceMappings { export interface BodySettings { [key: string]: any; } + +export interface WriteSettings { + index: string; + body: object; + [key: string]: any; +} diff --git a/x-pack/plugins/maps/server/create_doc_source.ts b/x-pack/plugins/maps/server/data_indexing/create_doc_source.ts similarity index 84% rename from x-pack/plugins/maps/server/create_doc_source.ts rename to x-pack/plugins/maps/server/data_indexing/create_doc_source.ts index 641a2acf42384..2b8984aa1534a 100644 --- a/x-pack/plugins/maps/server/create_doc_source.ts +++ b/x-pack/plugins/maps/server/data_indexing/create_doc_source.ts @@ -11,8 +11,8 @@ import { CreateDocSourceResp, IndexSourceMappings, BodySettings, -} from '../common'; -import { IndexPatternsService } from '../../../../src/plugins/data/common'; +} from '../../common'; +import { IndexPatternsCommonService } from '../../../../../src/plugins/data/server'; const DEFAULT_SETTINGS = { number_of_shards: 1 }; const DEFAULT_MAPPINGS = { @@ -25,16 +25,11 @@ export async function createDocSource( index: string, mappings: IndexSourceMappings, { asCurrentUser }: IScopedClusterClient, - indexPatternsService: IndexPatternsService + indexPatternsService: IndexPatternsCommonService ): Promise { try { await createIndex(index, mappings, asCurrentUser); - await indexPatternsService.createAndSave( - { - title: index, - }, - true - ); + await indexPatternsService.createAndSave({ title: index }, true); return { success: true, diff --git a/x-pack/plugins/maps/server/data_indexing/index_data.ts b/x-pack/plugins/maps/server/data_indexing/index_data.ts new file mode 100644 index 0000000000000..b87cd53a3dfd2 --- /dev/null +++ b/x-pack/plugins/maps/server/data_indexing/index_data.ts @@ -0,0 +1,45 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; +import { ElasticsearchClient } from 'kibana/server'; +import { WriteSettings } from '../../common'; + +export async function writeDataToIndex( + index: string, + data: object, + asCurrentUser: ElasticsearchClient +) { + try { + const { body: indexExists } = await asCurrentUser.indices.exists({ index }); + if (!indexExists) { + throw new Error( + i18n.translate('xpack.maps.indexData.indexExists', { + defaultMessage: `Index: '{index}' not found. A valid index must be provided`, + values: { + index, + }, + }) + ); + } + const settings: WriteSettings = { index, body: data }; + const { body: resp } = await asCurrentUser.index(settings); + if (resp.result === 'Error') { + throw resp; + } else { + return { + success: true, + data, + }; + } + } catch (error) { + return { + success: false, + error, + }; + } +} diff --git a/x-pack/plugins/maps/server/data_indexing/indexing_routes.ts b/x-pack/plugins/maps/server/data_indexing/indexing_routes.ts new file mode 100644 index 0000000000000..e6e6471ff9af6 --- /dev/null +++ b/x-pack/plugins/maps/server/data_indexing/indexing_routes.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { schema } from '@kbn/config-schema'; +import { Logger } from 'src/core/server'; +import { IRouter } from 'src/core/server'; +import type { DataRequestHandlerContext } from 'src/plugins/data/server'; +import { + INDEX_SOURCE_API_PATH, + GIS_API_PATH, + MAX_DRAWING_SIZE_BYTES, +} from '../../common/constants'; +import { createDocSource } from './create_doc_source'; +import { writeDataToIndex } from './index_data'; +import { PluginStart as DataPluginStart } from '../../../../../src/plugins/data/server'; + +export function initIndexingRoutes({ + router, + logger, + dataPlugin, +}: { + router: IRouter; + logger: Logger; + dataPlugin: DataPluginStart; +}) { + router.post( + { + path: `/${INDEX_SOURCE_API_PATH}`, + validate: { + body: schema.object({ + index: schema.string(), + mappings: schema.any(), + }), + }, + options: { + body: { + accepts: ['application/json'], + }, + }, + }, + async (context, request, response) => { + const { index, mappings } = request.body; + const indexPatternsService = await dataPlugin.indexPatterns.indexPatternsServiceFactory( + context.core.savedObjects.client, + context.core.elasticsearch.client.asCurrentUser + ); + const result = await createDocSource( + index, + mappings, + context.core.elasticsearch.client, + indexPatternsService + ); + if (result.success) { + return response.ok({ body: result }); + } else { + if (result.error) { + logger.error(result.error); + } + return response.custom({ + body: result?.error?.message, + statusCode: 500, + }); + } + } + ); + + router.post( + { + path: `/${GIS_API_PATH}/feature`, + validate: { + body: schema.object({ + index: schema.string(), + data: schema.any(), + }), + }, + options: { + body: { + accepts: ['application/json'], + maxBytes: MAX_DRAWING_SIZE_BYTES, + }, + }, + }, + async (context, request, response) => { + const result = await writeDataToIndex( + request.body.index, + request.body.data, + context.core.elasticsearch.client.asCurrentUser + ); + if (result.success) { + return response.ok({ body: result }); + } else { + logger.error(result.error); + return response.custom({ + body: result.error.message, + statusCode: 500, + }); + } + } + ); +} diff --git a/x-pack/plugins/maps/server/routes.js b/x-pack/plugins/maps/server/routes.js index f18bb29ed453d..39ce9979870c5 100644 --- a/x-pack/plugins/maps/server/routes.js +++ b/x-pack/plugins/maps/server/routes.js @@ -24,8 +24,7 @@ import { INDEX_SETTINGS_API_PATH, FONTS_API_PATH, API_ROOT_PATH, - INDEX_SOURCE_API_PATH, -} from '../common/constants'; +} from '../common'; import { EMSClient } from '@elastic/ems-client'; import fetch from 'node-fetch'; import { i18n } from '@kbn/i18n'; @@ -34,7 +33,7 @@ import { schema } from '@kbn/config-schema'; import fs from 'fs'; import path from 'path'; import { initMVTRoutes } from './mvt/mvt_routes'; -import { createDocSource } from './create_doc_source'; +import { initIndexingRoutes } from './data_indexing/indexing_routes'; const EMPTY_EMS_CLIENT = { async getFileLayers() { @@ -594,47 +593,6 @@ export async function initRoutes( } ); - if (drawingFeatureEnabled) { - router.post( - { - path: `/${INDEX_SOURCE_API_PATH}`, - validate: { - body: schema.object({ - index: schema.string(), - mappings: schema.any(), - }), - }, - options: { - body: { - accepts: ['application/json'], - }, - }, - }, - async (context, request, response) => { - const { index, mappings } = request.body; - const indexPatternsService = await dataPlugin.indexPatterns.indexPatternsServiceFactory( - context.core.savedObjects.client, - context.core.elasticsearch.client.asCurrentUser - ); - const result = await createDocSource( - index, - mappings, - context.core.elasticsearch.client, - indexPatternsService - ); - if (result.success) { - return response.ok({ body: result }); - } else { - logger.error(result.error); - return response.custom({ - body: result.error.message, - statusCode: 500, - }); - } - } - ); - } - function checkEMSProxyEnabled() { const proxyEMSInMaps = emsSettings.isProxyElasticMapsServiceInMaps(); if (!proxyEMSInMaps) { @@ -666,4 +624,7 @@ export async function initRoutes( } initMVTRoutes({ router, logger }); + if (drawingFeatureEnabled) { + initIndexingRoutes({ router, logger, dataPlugin }); + } } diff --git a/x-pack/plugins/ml/common/types/es_client.ts b/x-pack/plugins/ml/common/types/es_client.ts index 0674ec6001159..f6db736db2519 100644 --- a/x-pack/plugins/ml/common/types/es_client.ts +++ b/x-pack/plugins/ml/common/types/es_client.ts @@ -5,7 +5,10 @@ * 2.0. */ -import { SearchResponse, ShardsResponse } from 'elasticsearch'; +import type { SearchResponse, ShardsResponse } from 'elasticsearch'; +import { buildEsQuery } from '../../../../../src/plugins/data/common/es_query/es_query'; +import type { DslQuery } from '../../../../../src/plugins/data/common/es_query/kuery'; +import type { JsonObject } from '../../../../../src/plugins/kibana_utils/common'; export const HITS_TOTAL_RELATION = { EQ: 'eq', @@ -30,3 +33,5 @@ export interface SearchResponse7 { hits: SearchResponse7Hits; aggregations?: any; } + +export type InfluencersFilterQuery = ReturnType | DslQuery | JsonObject; diff --git a/x-pack/plugins/ml/common/types/ml_url_generator.ts b/x-pack/plugins/ml/common/types/ml_url_generator.ts index 766b714abcc98..c7c3f3ae9b280 100644 --- a/x-pack/plugins/ml/common/types/ml_url_generator.ts +++ b/x-pack/plugins/ml/common/types/ml_url_generator.ts @@ -15,6 +15,7 @@ import { ML_PAGES } from '../constants/ml_url_generator'; import type { DataFrameAnalysisConfigType } from './data_frame_analytics'; import type { SearchQueryLanguage } from '../constants/search'; import type { ListingPageUrlState } from './common'; +import type { InfluencersFilterQuery } from './es_client'; type OptionalPageState = object | undefined; @@ -113,9 +114,9 @@ export interface ExplorerAppState { viewByFromPage?: number; }; mlExplorerFilter: { - influencersFilterQuery?: unknown; + influencersFilterQuery?: InfluencersFilterQuery; filterActive?: boolean; - filteredFields?: string[]; + filteredFields?: Array; queryString?: string; }; query?: any; diff --git a/x-pack/plugins/ml/common/util/anomaly_utils.ts b/x-pack/plugins/ml/common/util/anomaly_utils.ts index de1adfabcd7da..d8da7b8252771 100644 --- a/x-pack/plugins/ml/common/util/anomaly_utils.ts +++ b/x-pack/plugins/ml/common/util/anomaly_utils.ts @@ -27,10 +27,18 @@ export enum ENTITY_FIELD_TYPE { PARTITON = 'partition', } +export const ENTITY_FIELD_OPERATIONS = { + ADD: '+', + REMOVE: '-', +} as const; + +export type EntityFieldOperation = typeof ENTITY_FIELD_OPERATIONS[keyof typeof ENTITY_FIELD_OPERATIONS]; + export interface EntityField { fieldName: string; fieldValue: string | number | undefined; fieldType?: ENTITY_FIELD_TYPE; + operation?: EntityFieldOperation; } // List of function descriptions for which actual values from record level results should be displayed. diff --git a/x-pack/plugins/ml/public/__mocks__/core_start.ts b/x-pack/plugins/ml/public/__mocks__/core_start.ts new file mode 100644 index 0000000000000..1fd988c887dda --- /dev/null +++ b/x-pack/plugins/ml/public/__mocks__/core_start.ts @@ -0,0 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { coreMock } from '../../../../../src/core/public/mocks'; +import { createMlStartDepsMock } from './ml_start_deps'; + +export const createCoreStartMock = () => + coreMock.createSetup({ pluginStartDeps: createMlStartDepsMock() }); diff --git a/x-pack/plugins/ml/public/__mocks__/ml_start_deps.ts b/x-pack/plugins/ml/public/__mocks__/ml_start_deps.ts new file mode 100644 index 0000000000000..77381c8728a48 --- /dev/null +++ b/x-pack/plugins/ml/public/__mocks__/ml_start_deps.ts @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { uiActionsPluginMock } from '../../../../../src/plugins/ui_actions/public/mocks'; +import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; +import { kibanaLegacyPluginMock } from '../../../../../src/plugins/kibana_legacy/public/mocks'; +import { embeddablePluginMock } from '../../../../../src/plugins/embeddable/public/mocks'; +import { lensPluginMock } from '../../../lens/public/mocks'; +import { triggersActionsUiMock } from '../../../triggers_actions_ui/public/mocks'; + +export const createMlStartDepsMock = () => ({ + data: dataPluginMock.createStartContract(), + share: { + urlGenerators: { getUrlGenerator: jest.fn() }, + }, + kibanaLegacy: kibanaLegacyPluginMock.createStartContract(), + uiActions: uiActionsPluginMock.createStartContract(), + spaces: jest.fn(), + embeddable: embeddablePluginMock.createStartContract(), + maps: jest.fn(), + lens: lensPluginMock.createStartContract(), + triggersActionsUi: triggersActionsUiMock.createStart(), + fileUpload: jest.fn(), +}); diff --git a/x-pack/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx b/x-pack/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx index e1c4e6b1e53d5..348c400b6d5a9 100644 --- a/x-pack/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx +++ b/x-pack/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx @@ -10,7 +10,7 @@ import { EuiSelect } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { usePageUrlState } from '../../../util/url_state'; -interface TableInterval { +export interface TableInterval { display: string; val: string; } @@ -64,8 +64,16 @@ export const useTableInterval = (): [TableInterval, (v: TableInterval) => void] export const SelectInterval: FC = () => { const [interval, setInterval] = useTableInterval(); - const onChange = (e: React.ChangeEvent) => { - setInterval(optionValueToInterval(e.target.value)); + return ; +}; + +interface SelectIntervalUIProps { + interval: TableInterval; + onChange: (interval: TableInterval) => void; +} +export const SelectIntervalUI: FC = ({ interval, onChange }) => { + const handleOnChange = (e: React.ChangeEvent) => { + onChange(optionValueToInterval(e.target.value)); }; return ( @@ -73,7 +81,7 @@ export const SelectInterval: FC = () => { options={OPTIONS} className="ml-select-interval" value={interval.val} - onChange={onChange} + onChange={handleOnChange} /> ); }; diff --git a/x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.tsx b/x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.tsx index 22076c8215154..e8766ea16c002 100644 --- a/x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.tsx +++ b/x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.tsx @@ -38,7 +38,7 @@ const optionsMap = { [criticalLabel]: ANOMALY_THRESHOLD.CRITICAL, }; -interface TableSeverity { +export interface TableSeverity { val: number; display: string; color: string; @@ -67,7 +67,7 @@ export const SEVERITY_OPTIONS: TableSeverity[] = [ }, ]; -function optionValueToThreshold(value: number) { +export function optionValueToThreshold(value: number) { // Get corresponding threshold object with required display and val properties from the specified value. let threshold = SEVERITY_OPTIONS.find((opt) => opt.val === value); @@ -121,17 +121,26 @@ interface Props { export const SelectSeverity: FC = ({ classNames } = { classNames: '' }) => { const [severity, setSeverity] = useTableSeverity(); - const onChange = (valueDisplay: string) => { - setSeverity(optionValueToThreshold(optionsMap[valueDisplay])); + return ; +}; + +export const SelectSeverityUI: FC<{ + classNames?: string; + severity: TableSeverity; + onChange: (s: TableSeverity) => void; +}> = ({ classNames = '', severity, onChange }) => { + const handleOnChange = (valueDisplay: string) => { + onChange(optionValueToThreshold(optionsMap[valueDisplay])); }; return ( ); }; diff --git a/x-pack/plugins/ml/public/application/components/custom_hooks/use_time_buckets.ts b/x-pack/plugins/ml/public/application/components/custom_hooks/use_time_buckets.ts new file mode 100644 index 0000000000000..337a49ada6f31 --- /dev/null +++ b/x-pack/plugins/ml/public/application/components/custom_hooks/use_time_buckets.ts @@ -0,0 +1,23 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useMemo } from 'react'; +import { useUiSettings } from '../../contexts/kibana'; +import { TimeBuckets } from '../../util/time_buckets'; +import { UI_SETTINGS } from '../../../../../../../src/plugins/data/common'; + +export const useTimeBuckets = () => { + const uiSettings = useUiSettings(); + return useMemo(() => { + return new TimeBuckets({ + 'histogram:maxBars': uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS), + 'histogram:barTarget': uiSettings.get(UI_SETTINGS.HISTOGRAM_BAR_TARGET), + dateFormat: uiSettings.get('dateFormat'), + 'dateFormat:scaled': uiSettings.get('dateFormat:scaled'), + }); + }, [uiSettings]); +}; diff --git a/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js b/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js index 9a580c179001d..d52d22f6b4aa7 100644 --- a/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js +++ b/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js @@ -324,7 +324,7 @@ export function CustomSelectionTable({ isSelected={isItemSelected(item[tableItemId])} isSelectable={true} hasActions={true} - data-test-subj="mlCustomSelectionTableRow" + data-test-subj={`mlCustomSelectionTableRow row-${item[tableItemId]}`} > {cells} diff --git a/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx b/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx index 650a9d3deb539..a79c8a63b3bc6 100644 --- a/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx +++ b/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx @@ -12,6 +12,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { EMPTY_FIELD_VALUE_LABEL } from '../../timeseriesexplorer/components/entity_control/entity_control'; import { MLCATEGORY } from '../../../../common/constants/field_types'; +import { ENTITY_FIELD_OPERATIONS } from '../../../../common/util/anomaly_utils'; export type EntityCellFilter = ( entityName: string, @@ -40,7 +41,7 @@ function getAddFilter({ entityName, entityValue, filter }: EntityCellProps) { filter(entityName, entityValue, '+')} + onClick={() => filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.ADD)} iconType="plusInCircle" aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', { defaultMessage: 'Add filter', @@ -65,7 +66,7 @@ function getRemoveFilter({ entityName, entityValue, filter }: EntityCellProps) { filter(entityName, entityValue, '-')} + onClick={() => filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.REMOVE)} iconType="minusInCircle" aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', { defaultMessage: 'Remove filter', diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts index 80575118e71dc..a1d846c065dce 100644 --- a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts +++ b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts @@ -5,12 +5,21 @@ * 2.0. */ -export const useMlKibana = jest.fn(() => { - return { - services: { - application: { - navigateToApp: jest.fn(), +export const kibanaContextMock = { + services: { + chrome: { recentlyAccessed: { add: jest.fn() } }, + application: { navigateToApp: jest.fn() }, + http: { + basePath: { + get: jest.fn(), }, }, - }; + share: { + urlGenerators: { getUrlGenerator: jest.fn() }, + }, + }, +}; + +export const useMlKibana = jest.fn(() => { + return kibanaContextMock; }); diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts index dbf78f314b78d..a9ee49fcbadd8 100644 --- a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts +++ b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts @@ -7,7 +7,7 @@ import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks'; -const timefilterMock = dataPluginMock.createStartContract().query.timefilter.timefilter; +export const timefilterMock = dataPluginMock.createStartContract().query.timefilter.timefilter; export const useTimefilter = jest.fn(() => { return timefilterMock; diff --git a/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts b/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts index 258ffc887325d..e09e9f3d2c1ae 100644 --- a/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts +++ b/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts @@ -13,7 +13,6 @@ import { forkJoin, of, Observable, Subject } from 'rxjs'; import { mergeMap, switchMap, tap } from 'rxjs/operators'; import { useCallback, useMemo } from 'react'; -import { anomalyDataChange } from '../explorer_charts/explorer_charts_container_service'; import { explorerService } from '../explorer_dashboard_service'; import { getDateFormatTz, @@ -31,10 +30,14 @@ import { import { ExplorerState } from '../reducers'; import { useMlKibana, useTimefilter } from '../../contexts/kibana'; import { AnomalyTimelineService } from '../../services/anomaly_timeline_service'; -import { mlResultsServiceProvider } from '../../services/results_service'; +import { MlResultsService, mlResultsServiceProvider } from '../../services/results_service'; import { isViewBySwimLaneData } from '../swimlane_container'; import { ANOMALY_SWIM_LANE_HARD_LIMIT } from '../explorer_constants'; import { TimefilterContract } from '../../../../../../../src/plugins/data/public'; +import { AnomalyExplorerChartsService } from '../../services/anomaly_explorer_charts_service'; +import { CombinedJob } from '../../../../common/types/anomaly_detection_jobs'; +import { mlJobService } from '../../services/job_service'; +import { InfluencersFilterQuery } from '../../../../common/types/es_client'; // Memoize the data fetching methods. // wrapWithLastRefreshArg() wraps any given function and preprends a `lastRefresh` argument @@ -52,7 +55,6 @@ const memoize = any>(func: T, context?: any) => { return memoizeOne(wrapWithLastRefreshArg(func, context) as any, memoizeIsEqual); }; -const memoizedAnomalyDataChange = memoize(anomalyDataChange); const memoizedLoadAnnotationsTableData = memoize( loadAnnotationsTableData ); @@ -64,7 +66,7 @@ const memoizedLoadTopInfluencers = memoize(loadTopInfluencers); const memoizedLoadAnomaliesTableData = memoize(loadAnomaliesTableData); export interface LoadExplorerDataConfig { - influencersFilterQuery: any; + influencersFilterQuery: InfluencersFilterQuery; lastRefresh: number; noInfluencersConfigured: boolean; selectedCells: AppStateSelectedCells | undefined; @@ -92,7 +94,9 @@ export const isLoadExplorerDataConfig = (arg: any): arg is LoadExplorerDataConfi * Fetches the data necessary for the Anomaly Explorer using observables. */ const loadExplorerDataProvider = ( + mlResultsService: MlResultsService, anomalyTimelineService: AnomalyTimelineService, + anomalyExplorerService: AnomalyExplorerChartsService, timefilter: TimefilterContract ) => { const memoizedLoadOverallData = memoize( @@ -103,6 +107,11 @@ const loadExplorerDataProvider = ( anomalyTimelineService.loadViewBySwimlane, anomalyTimelineService ); + const memoizedAnomalyDataChange = memoize( + anomalyExplorerService.getAnomalyData, + anomalyExplorerService + ); + return (config: LoadExplorerDataConfig): Observable> => { if (!isLoadExplorerDataConfig(config)) { return of({}); @@ -124,6 +133,10 @@ const loadExplorerDataProvider = ( viewByPerPage, } = config; + const combinedJobRecords: Record = selectedJobs.reduce((acc, job) => { + return { ...acc, [job.id]: mlJobService.getJob(job.id) }; + }, {}); + const selectionInfluencers = getSelectionInfluencers(selectedCells, viewBySwimlaneFieldName); const jobIds = getSelectionJobIds(selectedCells, selectedJobs); @@ -149,6 +162,7 @@ const loadExplorerDataProvider = ( ), anomalyChartRecords: memoizedLoadDataForCharts( lastRefresh, + mlResultsService, jobIds, timerange.earliestMs, timerange.latestMs, @@ -160,6 +174,7 @@ const loadExplorerDataProvider = ( selectionInfluencers.length === 0 ? memoizedLoadTopInfluencers( lastRefresh, + mlResultsService, jobIds, timerange.earliestMs, timerange.latestMs, @@ -200,23 +215,29 @@ const loadExplorerDataProvider = ( // and pass on the data we already fetched. tap(explorerService.setViewBySwimlaneLoading), // Trigger a side-effect to update the charts. - tap(({ anomalyChartRecords }) => { + tap(({ anomalyChartRecords, topFieldValues }) => { if (selectedCells !== undefined && Array.isArray(anomalyChartRecords)) { memoizedAnomalyDataChange( lastRefresh, + explorerService, + combinedJobRecords, swimlaneContainerWidth, anomalyChartRecords, timerange.earliestMs, timerange.latestMs, + timefilter, tableSeverity ); } else { memoizedAnomalyDataChange( lastRefresh, + explorerService, + combinedJobRecords, swimlaneContainerWidth, [], timerange.earliestMs, timerange.latestMs, + timefilter, tableSeverity ); } @@ -234,6 +255,7 @@ const loadExplorerDataProvider = ( anomalyChartRecords.length > 0 ? memoizedLoadFilteredTopInfluencers( lastRefresh, + mlResultsService, jobIds, timerange.earliestMs, timerange.latestMs, @@ -291,12 +313,23 @@ export const useExplorerData = (): [Partial | undefined, (d: any) } = useMlKibana(); const loadExplorerData = useMemo(() => { + const mlResultsService = mlResultsServiceProvider(mlApiServices); const anomalyTimelineService = new AnomalyTimelineService( timefilter, uiSettings, - mlResultsServiceProvider(mlApiServices) + mlResultsService + ); + const anomalyExplorerService = new AnomalyExplorerChartsService( + timefilter, + mlApiServices, + mlResultsService + ); + return loadExplorerDataProvider( + mlResultsService, + anomalyTimelineService, + anomalyExplorerService, + timefilter ); - return loadExplorerDataProvider(anomalyTimelineService, timefilter); }, []); const loadExplorerData$ = useMemo(() => new Subject(), []); diff --git a/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx b/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx index 2330eafd87825..8fe2c32b766b4 100644 --- a/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx +++ b/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx @@ -25,7 +25,7 @@ import { EuiInMemoryTable } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useMlKibana } from '../contexts/kibana'; import { DashboardSavedObject } from '../../../../../../src/plugins/dashboard/public'; -import { getDefaultPanelTitle } from '../../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; +import { getDefaultSwimlanePanelTitle } from '../../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; import { useDashboardService } from '../services/dashboard_service'; import { SWIMLANE_TYPE, SwimlaneType } from './explorer_constants'; import { JobId } from '../../../common/types/anomaly_detection_jobs'; @@ -40,10 +40,10 @@ export interface DashboardItem { export type EuiTableProps = EuiInMemoryTableProps; -function getDefaultEmbeddablepaPanelConfig(jobIds: JobId[]) { +function getDefaultEmbeddablePanelConfig(jobIds: JobId[]) { return { type: ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, - title: getDefaultPanelTitle(jobIds), + title: getDefaultSwimlanePanelTitle(jobIds), }; } @@ -129,7 +129,7 @@ export const AddToDashboardControl: FC = ({ for (const selectedDashboard of selectedItems) { const panelsData = swimlanes.map((swimlaneType) => { - const config = getDefaultEmbeddablepaPanelConfig(jobIds); + const config = getDefaultEmbeddablePanelConfig(jobIds); if (swimlaneType === SWIMLANE_TYPE.VIEW_BY) { return { ...config, diff --git a/x-pack/plugins/ml/public/application/explorer/components/explorer_query_bar/explorer_query_bar.tsx b/x-pack/plugins/ml/public/application/explorer/components/explorer_query_bar/explorer_query_bar.tsx index 33ab2b227009c..6f5ae5e17590a 100644 --- a/x-pack/plugins/ml/public/application/explorer/components/explorer_query_bar/explorer_query_bar.tsx +++ b/x-pack/plugins/ml/public/application/explorer/components/explorer_query_bar/explorer_query_bar.tsx @@ -17,6 +17,7 @@ import { import { IIndexPattern } from '../../../../../../../../src/plugins/data/common/index_patterns'; import { SEARCH_QUERY_LANGUAGE, ErrorMessage } from '../../../../../common/constants/search'; import { explorerService } from '../../explorer_dashboard_service'; +import { InfluencersFilterQuery } from '../../../../../common/types/es_client'; export const DEFAULT_QUERY_LANG = SEARCH_QUERY_LANGUAGE.KUERY; @@ -29,7 +30,7 @@ export function getKqlQueryValues({ queryLanguage: string; indexPattern: IIndexPattern; }): { clearSettings: boolean; settings: any } { - let influencersFilterQuery: any = {}; + let influencersFilterQuery: InfluencersFilterQuery = {}; const filteredFields: string[] = []; const ast = esKuery.fromKueryExpression(inputString); const isAndOperator = ast && ast.function === 'and'; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.js b/x-pack/plugins/ml/public/application/explorer/explorer.js index abf8197f51634..6979277c43077 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer.js @@ -68,8 +68,10 @@ import { ExplorerChartsContainer } from './explorer_charts/explorer_charts_conta // Anomalies Table import { AnomaliesTable } from '../components/anomalies_table/anomalies_table'; -import { getTimefilter, getToastNotifications } from '../util/dependency_cache'; +import { getToastNotifications } from '../util/dependency_cache'; import { ANOMALY_DETECTION_DEFAULT_TIME_RANGE } from '../../../common/constants/settings'; +import { withKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { ML_APP_URL_GENERATOR } from '../../../common/constants/ml_url_generator'; const ExplorerPage = ({ children, @@ -136,7 +138,7 @@ const ExplorerPage = ({
); -export class Explorer extends React.Component { +export class ExplorerUI extends React.Component { static propTypes = { explorerState: PropTypes.object.isRequired, setSelectedCells: PropTypes.func.isRequired, @@ -224,7 +226,22 @@ export class Explorer extends React.Component { updateLanguage = (language) => this.setState({ language }); render() { - const { showCharts, severity, stoppedPartitions, selectedJobsRunning } = this.props; + const { + share: { + urlGenerators: { getUrlGenerator }, + }, + } = this.props.kibana.services; + + const mlUrlGenerator = getUrlGenerator(ML_APP_URL_GENERATOR); + + const { + showCharts, + severity, + stoppedPartitions, + selectedJobsRunning, + timefilter, + timeBuckets, + } = this.props; const { annotations, @@ -274,7 +291,6 @@ export class Explorer extends React.Component { const mainColumnWidthClassName = noInfluencersConfigured === true ? 'col-xs-12' : 'col-xs-10'; const mainColumnClasses = `column ${mainColumnWidthClassName}`; - const timefilter = getTimefilter(); const bounds = timefilter.getActiveBounds(); const selectedJobIds = Array.isArray(selectedJobs) ? selectedJobs.map((job) => job.id) : []; return ( @@ -460,7 +476,18 @@ export class Explorer extends React.Component {
- {showCharts && } + {showCharts && ( + + )}
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.scss b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.scss new file mode 100644 index 0000000000000..732b71d056536 --- /dev/null +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.scss @@ -0,0 +1,14 @@ +.filter-button { + opacity: .3; + min-width: 14px; + padding-right: 0; + + .euiIcon { + width: $euiFontSizeXS; + height: $euiFontSizeXS; + } +} + +.filter-button:hover { + opacity: 1; +} diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx new file mode 100644 index 0000000000000..079af5827a4b5 --- /dev/null +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx @@ -0,0 +1,87 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import React, { FC } from 'react'; +import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { + ENTITY_FIELD_OPERATIONS, + EntityFieldOperation, +} from '../../../../../../../common/util/anomaly_utils'; +import './entity_filter.scss'; + +interface EntityFilterProps { + onFilter: (params: { + influencerFieldName: string; + influencerFieldValue: string; + action: EntityFieldOperation; + }) => void; + influencerFieldName: string; + influencerFieldValue: string; +} +export const EntityFilter: FC = ({ + onFilter, + influencerFieldName, + influencerFieldValue, +}) => { + return ( + + + } + > + + onFilter({ + influencerFieldName, + influencerFieldValue, + action: ENTITY_FIELD_OPERATIONS.ADD, + }) + } + iconType="plusInCircle" + aria-label={i18n.translate('xpack.ml.entityFilter.addFilterAriaLabel', { + defaultMessage: 'Add filter for {influencerFieldName} {influencerFieldValue}', + values: { influencerFieldName, influencerFieldValue }, + })} + /> + + + } + > + + onFilter({ + influencerFieldName, + influencerFieldValue, + action: ENTITY_FIELD_OPERATIONS.REMOVE, + }) + } + iconType="minusInCircle" + aria-label={i18n.translate('xpack.ml.entityFilter.removeFilterAriaLabel', { + defaultMessage: 'Remove filter for {influencerFieldName} {influencerFieldValue}', + values: { influencerFieldName, influencerFieldValue }, + })} + /> + + + ); +}; diff --git a/x-pack/plugins/data_enhanced/public/autocomplete/index.ts b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/index.ts similarity index 69% rename from x-pack/plugins/data_enhanced/public/autocomplete/index.ts rename to x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/index.ts index 7910ce3ffb237..69e1a632b5ffd 100644 --- a/x-pack/plugins/data_enhanced/public/autocomplete/index.ts +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/index.ts @@ -5,7 +5,4 @@ * 2.0. */ -export { - setupKqlQuerySuggestionProvider, - KUERY_LANGUAGE_NAME, -} from './providers/kql_query_suggestion'; +export { EntityFilter } from './entity_filter'; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js index 97eb73906e8de..ad07d1a75bdb5 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js @@ -7,18 +7,20 @@ import './_explorer_chart_label.scss'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, { Fragment, useCallback } from 'react'; import { EuiIconTip } from '@elastic/eui'; import { ExplorerChartLabelBadge } from './explorer_chart_label_badge'; import { ExplorerChartInfoTooltip } from '../../explorer_chart_info_tooltip'; +import { EntityFilter } from './entity_filter'; export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, wrapLabel = false, + onSelectEntity, }) { // Depending on whether we wrap the entityField badges to a new line, we render this differently: // @@ -37,9 +39,27 @@ export function ExplorerChartLabel({  –  ); - const entityFieldBadges = entityFields.map((entity) => ( - - )); + const applyFilter = useCallback( + ({ influencerFieldName, influencerFieldValue, action }) => + onSelectEntity(influencerFieldName, influencerFieldValue, action), + [onSelectEntity] + ); + + const entityFieldBadges = entityFields.map((entity) => { + const key = `${infoTooltip.chartFunction}-${entity.fieldName}-${entity.fieldType}-${entity.fieldValue}`; + return ( + + + {onSelectEntity !== undefined && ( + + )} + + ); + }); const infoIcon = ( diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx new file mode 100644 index 0000000000000..d1e22ef21de25 --- /dev/null +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx @@ -0,0 +1,105 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React, { FC } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +// @ts-ignore +import { ExplorerChartsContainer } from './explorer_charts_container'; +import { + SelectSeverityUI, + TableSeverity, +} from '../../components/controls/select_severity/select_severity'; +import type { UrlGeneratorContract } from '../../../../../../../src/plugins/share/public'; +import type { TimeBuckets } from '../../util/time_buckets'; +import type { TimefilterContract } from '../../../../../../../src/plugins/data/public'; +import type { EntityFieldOperation } from '../../../../common/util/anomaly_utils'; +import type { ExplorerChartsData } from './explorer_charts_container_service'; + +interface ExplorerAnomaliesContainerProps { + id: string; + chartsData: ExplorerChartsData; + showCharts: boolean; + severity: TableSeverity; + setSeverity: (severity: TableSeverity) => void; + mlUrlGenerator: UrlGeneratorContract<'ML_APP_URL_GENERATOR'>; + timeBuckets: TimeBuckets; + timefilter: TimefilterContract; + onSelectEntity: (fieldName: string, fieldValue: string, operation: EntityFieldOperation) => void; +} + +const tooManyBucketsCalloutMsg = i18n.translate( + 'xpack.ml.explorer.charts.dashboardTooManyBucketsDescription', + { + defaultMessage: + 'This selection contains too many buckets to be displayed. You should shorten the time range of the view.', + } +); + +export const ExplorerAnomaliesContainer: FC = ({ + id, + chartsData, + showCharts, + severity, + setSeverity, + mlUrlGenerator, + timeBuckets, + timefilter, + onSelectEntity, +}) => { + return ( + <> + + + + + + + + + + {Array.isArray(chartsData.seriesToPlot) && + chartsData.seriesToPlot.length === 0 && + chartsData.errorMessages === undefined && ( + +

+ +

+ + )} +
+ {showCharts && ( + + )} +
+ + ); +}; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js index 4607ac65c87a6..fa6d8acfb0e00 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js @@ -33,7 +33,6 @@ import { chartExtendedLimits, } from '../../util/chart_utils'; import { LoadingIndicator } from '../../components/loading_indicator/loading_indicator'; -import { getTimeBucketsFromCache } from '../../util/time_buckets'; import { mlFieldFormatService } from '../../services/field_format_service'; import { CHART_TYPE } from '../explorer_constants'; @@ -63,7 +62,7 @@ export class ExplorerChartDistribution extends React.Component { } renderChart() { - const { tooManyBuckets, tooltipService } = this.props; + const { tooManyBuckets, tooltipService, timeBuckets } = this.props; const element = this.rootNode; const config = this.props.seriesConfig; @@ -263,7 +262,6 @@ export class ExplorerChartDistribution extends React.Component { function drawRareChartAxes() { // Get the scaled date format to use for x axis tick labels. - const timeBuckets = getTimeBucketsFromCache(); const bounds = { min: moment(config.plotEarliest), max: moment(config.plotLatest) }; timeBuckets.setBounds(bounds); timeBuckets.setInterval('auto'); diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js index ca8d832e6b43b..11a15b192fc52 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js @@ -7,18 +7,6 @@ import { chartData as mockChartData } from './__mocks__/mock_chart_data_rare'; import seriesConfig from './__mocks__/mock_series_config_rare.json'; - -// Mock TimeBuckets and mlFieldFormatService, they don't play well -// with the jest based test setup yet. -jest.mock('../../util/time_buckets', () => ({ - getTimeBucketsFromCache: jest.fn(() => { - return { - setBounds: jest.fn(), - setInterval: jest.fn(), - getScaledDateFormat: jest.fn(), - }; - }), -})); jest.mock('../../services/field_format_service', () => ({ mlFieldFormatService: { getFieldFormat: jest.fn(), @@ -30,7 +18,10 @@ import React from 'react'; import { ExplorerChartDistribution } from './explorer_chart_distribution'; import { chartLimits } from '../../util/chart_utils'; - +import { timeBucketsMock } from '../../util/__mocks__/time_buckets'; +const utilityProps = { + timeBuckets: timeBucketsMock, +}; describe('ExplorerChart', () => { const mlSelectSeverityServiceMock = { state: { @@ -55,6 +46,7 @@ describe('ExplorerChart', () => { ); @@ -80,6 +72,7 @@ describe('ExplorerChart', () => { seriesConfig={config} mlSelectSeverityService={mlSelectSeverityServiceMock} tooltipService={mockTooltipService} + {...utilityProps} /> ); @@ -112,6 +105,7 @@ describe('ExplorerChart', () => { seriesConfig={config} mlSelectSeverityService={mlSelectSeverityServiceMock} tooltipService={mockTooltipService} + {...utilityProps} />
); diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js index d2d81e0349c68..39a3f83961d3a 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js @@ -38,7 +38,6 @@ import { showMultiBucketAnomalyTooltip, } from '../../util/chart_utils'; import { LoadingIndicator } from '../../components/loading_indicator/loading_indicator'; -import { getTimeBucketsFromCache } from '../../util/time_buckets'; import { mlFieldFormatService } from '../../services/field_format_service'; const CONTENT_WRAPPER_HEIGHT = 215; @@ -50,6 +49,7 @@ export class ExplorerChartSingleMetric extends React.Component { seriesConfig: PropTypes.object, severity: PropTypes.number.isRequired, tooltipService: PropTypes.object.isRequired, + timeBuckets: PropTypes.object.isRequired, }; componentDidMount() { @@ -61,7 +61,7 @@ export class ExplorerChartSingleMetric extends React.Component { } renderChart() { - const { tooManyBuckets, tooltipService } = this.props; + const { tooManyBuckets, tooltipService, timeBuckets } = this.props; const element = this.rootNode; const config = this.props.seriesConfig; @@ -188,7 +188,6 @@ export class ExplorerChartSingleMetric extends React.Component { function drawLineChartAxes() { // Get the scaled date format to use for x axis tick labels. - const timeBuckets = getTimeBucketsFromCache(); const bounds = { min: moment(config.plotEarliest), max: moment(config.plotLatest) }; timeBuckets.setBounds(bounds); timeBuckets.setInterval('auto'); diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js index 25b2251b45435..981f7515d3d70 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js @@ -7,18 +7,6 @@ import { chartData as mockChartData } from './__mocks__/mock_chart_data'; import seriesConfig from './__mocks__/mock_series_config_filebeat.json'; - -// Mock TimeBuckets and mlFieldFormatService, they don't play well -// with the jest based test setup yet. -jest.mock('../../util/time_buckets', () => ({ - getTimeBucketsFromCache: jest.fn(() => { - return { - setBounds: jest.fn(), - setInterval: jest.fn(), - getScaledDateFormat: jest.fn(), - }; - }), -})); jest.mock('../../services/field_format_service', () => ({ mlFieldFormatService: { getFieldFormat: jest.fn(), @@ -30,6 +18,11 @@ import React from 'react'; import { ExplorerChartSingleMetric } from './explorer_chart_single_metric'; import { chartLimits } from '../../util/chart_utils'; +import { timeBucketsMock } from '../../util/__mocks__/time_buckets'; + +const utilityProps = { + timeBuckets: timeBucketsMock, +}; describe('ExplorerChart', () => { const mlSelectSeverityServiceMock = { @@ -56,6 +49,7 @@ describe('ExplorerChart', () => { mlSelectSeverityService={mlSelectSeverityServiceMock} tooltipService={mockTooltipService} severity={0} + {...utilityProps} /> ); @@ -82,6 +76,7 @@ describe('ExplorerChart', () => { mlSelectSeverityService={mlSelectSeverityServiceMock} tooltipService={mockTooltipService} severity={0} + {...utilityProps} /> ); @@ -115,6 +110,7 @@ describe('ExplorerChart', () => { mlSelectSeverityService={mlSelectSeverityServiceMock} tooltipService={mockTooltipService} severity={0} + {...utilityProps} /> ); diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js index 5bdae2427c103..2432c6671827e 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js @@ -4,8 +4,9 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ +import './_index.scss'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useState, useCallback } from 'react'; import { EuiButtonEmpty, @@ -23,7 +24,6 @@ import { } from '../../util/chart_utils'; import { ExplorerChartDistribution } from './explorer_chart_distribution'; import { ExplorerChartSingleMetric } from './explorer_chart_single_metric'; -import { EmbeddedMapComponentWrapper } from './explorer_chart_embedded_map'; import { ExplorerChartLabel } from './components/explorer_chart_label'; import { CHART_TYPE } from '../explorer_constants'; @@ -31,15 +31,15 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { MlTooltipComponent } from '../../components/chart_tooltip'; import { withKibana } from '../../../../../../../src/plugins/kibana_react/public'; -import { ML_APP_URL_GENERATOR } from '../../../../common/constants/ml_url_generator'; import { ML_JOB_AGGREGATION } from '../../../../common/constants/aggregation_types'; -import { addItemToRecentlyAccessed } from '../../util/recently_accessed'; import { ExplorerChartsErrorCallOuts } from './explorer_charts_error_callouts'; - +import { addItemToRecentlyAccessed } from '../../util/recently_accessed'; +import { EmbeddedMapComponentWrapper } from './explorer_chart_embedded_map'; const textTooManyBuckets = i18n.translate('xpack.ml.explorer.charts.tooManyBucketsDescription', { defaultMessage: 'This selection contains too many buckets to be displayed. You should shorten the time range of the view or narrow the selection in the timeline.', }); + const textViewButton = i18n.translate( 'xpack.ml.explorer.charts.openInSingleMetricViewerButtonLabel', { @@ -67,14 +67,23 @@ function ExplorerChartContainer({ wrapLabel, mlUrlGenerator, basePath, + timeBuckets, + timefilter, + onSelectEntity, + recentlyAccessed, + tooManyBucketsCalloutMsg, }) { - const [explorerSeriesLink, setExplorerSeriesLink] = useState(); + const [explorerSeriesLink, setExplorerSeriesLink] = useState(''); useEffect(() => { let isCancelled = false; const generateLink = async () => { if (!isCancelled && series.functionDescription !== ML_JOB_AGGREGATION.LAT_LONG) { - const singleMetricViewerLink = await getExploreSeriesLink(mlUrlGenerator, series); + const singleMetricViewerLink = await getExploreSeriesLink( + mlUrlGenerator, + series, + timefilter + ); setExplorerSeriesLink(singleMetricViewerLink); } }; @@ -85,8 +94,15 @@ function ExplorerChartContainer({ }, [mlUrlGenerator, series]); const addToRecentlyAccessed = useCallback(() => { - addItemToRecentlyAccessed('timeseriesexplorer', series.jobId, explorerSeriesLink); - }, [explorerSeriesLink]); + if (recentlyAccessed) { + addItemToRecentlyAccessed( + 'timeseriesexplorer', + series.jobId, + explorerSeriesLink, + recentlyAccessed + ); + } + }, [explorerSeriesLink, recentlyAccessed]); const { detectorLabel, entityFields } = series; const chartType = getChartType(series); @@ -121,6 +137,7 @@ function ExplorerChartContainer({ entityFields={entityFields} infoTooltip={{ ...series.infoTooltip, chartType }} wrapLabel={wrapLabel} + onSelectEntity={onSelectEntity} /> @@ -128,7 +145,7 @@ function ExplorerChartContainer({ {tooManyBuckets && ( ); } + if ( chartType === CHART_TYPE.EVENT_DISTRIBUTION || chartType === CHART_TYPE.POPULATION_DISTRIBUTION @@ -176,6 +194,7 @@ function ExplorerChartContainer({ {(tooltipService) => ( {(tooltipService) => ( { const { services: { + chrome: { recentlyAccessed }, http: { basePath }, - share: { - urlGenerators: { getUrlGenerator }, - }, embeddable: embeddablePlugin, maps: mapsPlugin, }, @@ -244,8 +267,6 @@ export const ExplorerChartsContainerUI = ({ const seriesToUse = seriesToPlotFiltered !== undefined ? seriesToPlotFiltered : seriesToPlot; - const mlUrlGenerator = useMemo(() => getUrlGenerator(ML_APP_URL_GENERATOR), [getUrlGenerator]); - // doesn't allow a setting of `columns={1}` when chartsPerRow would be 1. // If that's the case we trick it doing that with the following settings: const chartsWidth = chartsPerRow === 1 ? 'calc(100% - 20px)' : 'auto'; @@ -270,6 +291,11 @@ export const ExplorerChartsContainerUI = ({ wrapLabel={wrapLabel} mlUrlGenerator={mlUrlGenerator} basePath={basePath.get()} + timeBuckets={timeBuckets} + timefilter={timefilter} + onSelectEntity={onSelectEntity} + recentlyAccessed={recentlyAccessed} + tooManyBucketsCalloutMsg={tooManyBucketsCalloutMsg} /> ))} diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js index 70b46046aa7ce..53d06e7253f00 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js @@ -18,18 +18,10 @@ import { ExplorerChartsContainer } from './explorer_charts_container'; import { chartData } from './__mocks__/mock_chart_data'; import seriesConfig from './__mocks__/mock_series_config_filebeat.json'; import seriesConfigRare from './__mocks__/mock_series_config_rare.json'; +import { kibanaContextMock } from '../../contexts/kibana/__mocks__/kibana_context'; +import { timeBucketsMock } from '../../util/__mocks__/time_buckets'; +import { timefilterMock } from '../../contexts/kibana/__mocks__/use_timefilter'; -// Mock TimeBuckets and mlFieldFormatService, they don't play well -// with the jest based test setup yet. -jest.mock('../../util/time_buckets', () => ({ - getTimeBucketsFromCache: jest.fn(() => { - return { - setBounds: jest.fn(), - setInterval: jest.fn(), - getScaledDateFormat: jest.fn(), - }; - }), -})); jest.mock('../../services/field_format_service', () => ({ mlFieldFormatService: { getFieldFormat: jest.fn(), @@ -47,6 +39,18 @@ jest.mock('../../../../../../../src/plugins/kibana_react/public', () => ({ }, })); +const getUtilityProps = () => { + const mlUrlGenerator = { + createUrl: jest.fn(), + }; + return { + mlUrlGenerator, + timefilter: timefilterMock, + timeBuckets: timeBucketsMock, + kibana: kibanaContextMock, + }; +}; + describe('ExplorerChartsContainer', () => { const mockedGetBBox = { x: 0, y: -11.5, width: 12.1875, height: 14.5 }; const originalGetBBox = SVGElement.prototype.getBBox; @@ -54,27 +58,10 @@ describe('ExplorerChartsContainer', () => { beforeEach(() => (SVGElement.prototype.getBBox = () => mockedGetBBox)); afterEach(() => (SVGElement.prototype.getBBox = originalGetBBox)); - const kibanaContextMock = { - services: { - application: { navigateToApp: jest.fn() }, - http: { - basePath: { - get: jest.fn(), - }, - }, - share: { - urlGenerators: { getUrlGenerator: jest.fn() }, - }, - }, - }; test('Minimal Initialization', () => { const wrapper = shallow( - + ); @@ -99,7 +86,7 @@ describe('ExplorerChartsContainer', () => { }; const wrapper = mount( - + ); @@ -127,7 +114,7 @@ describe('ExplorerChartsContainer', () => { }; const wrapper = mount( - + ); diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.d.ts b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.d.ts deleted file mode 100644 index a384a38899587..0000000000000 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.d.ts +++ /dev/null @@ -1,29 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import type { JobId } from '../../../../common/types/anomaly_detection_jobs'; - -export interface ExplorerChartSeriesErrorMessages { - [key: string]: Set; -} -export declare interface ExplorerChartsData { - chartsPerRow: number; - seriesToPlot: any[]; - tooManyBuckets: boolean; - timeFieldName: string; - errorMessages: ExplorerChartSeriesErrorMessages; -} - -export declare const getDefaultChartsData: () => ExplorerChartsData; - -export declare const anomalyDataChange: ( - chartsContainerWidth: number, - anomalyRecords: any[], - earliestMs: number, - latestMs: number, - severity?: number -) => void; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js deleted file mode 100644 index 7eef548bc2d1c..0000000000000 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js +++ /dev/null @@ -1,765 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -/* - * Service for the container for the anomaly charts in the - * Machine Learning Explorer dashboard. - * The service processes the data required to draw each of the charts - * and manages the layout of the charts in the containing div. - */ - -import { get, each, find, sortBy, map, reduce } from 'lodash'; - -import { buildConfig } from './explorer_chart_config_builder'; -import { chartLimits, getChartType } from '../../util/chart_utils'; -import { getTimefilter } from '../../util/dependency_cache'; - -import { getEntityFieldList } from '../../../../common/util/anomaly_utils'; -import { - isSourceDataChartableForDetector, - isModelPlotChartableForDetector, - isModelPlotEnabled, - isMappableJob, -} from '../../../../common/util/job_utils'; -import { mlResultsService } from '../../services/results_service'; -import { mlJobService } from '../../services/job_service'; -import { explorerService } from '../explorer_dashboard_service'; - -import { CHART_TYPE } from '../explorer_constants'; -import { ML_JOB_AGGREGATION } from '../../../../common/constants/aggregation_types'; -import { i18n } from '@kbn/i18n'; -import { SWIM_LANE_LABEL_WIDTH } from '../swimlane_container'; - -export function getDefaultChartsData() { - return { - chartsPerRow: 1, - errorMessages: undefined, - seriesToPlot: [], - // default values, will update on every re-render - tooManyBuckets: false, - timeFieldName: 'timestamp', - }; -} - -const CHART_MAX_POINTS = 500; -const ANOMALIES_MAX_RESULTS = 500; -const MAX_SCHEDULED_EVENTS = 10; // Max number of scheduled events displayed per bucket. -const ML_TIME_FIELD_NAME = 'timestamp'; -const USE_OVERALL_CHART_LIMITS = false; -const MAX_CHARTS_PER_ROW = 4; - -export const anomalyDataChange = function ( - chartsContainerWidth, - anomalyRecords, - selectedEarliestMs, - selectedLatestMs, - severity = 0 -) { - const data = getDefaultChartsData(); - - const containerWith = chartsContainerWidth + SWIM_LANE_LABEL_WIDTH; - - const filteredRecords = anomalyRecords.filter((record) => { - return Number(record.record_score) >= severity; - }); - const [allSeriesRecords, errorMessages] = processRecordsForDisplay(filteredRecords); - // Calculate the number of charts per row, depending on the width available, to a max of 4. - let chartsPerRow = Math.min(Math.max(Math.floor(containerWith / 550), 1), MAX_CHARTS_PER_ROW); - if (allSeriesRecords.length === 1) { - chartsPerRow = 1; - } - - data.chartsPerRow = chartsPerRow; - - // Build the data configs of the anomalies to be displayed. - // TODO - implement paging? - // For now just take first 6 (or 8 if 4 charts per row). - const maxSeriesToPlot = Math.max(chartsPerRow * 2, 6); - const recordsToPlot = allSeriesRecords.slice(0, maxSeriesToPlot); - const hasGeoData = recordsToPlot.find( - (record) => - (record.function_description || recordsToPlot.function) === ML_JOB_AGGREGATION.LAT_LONG - ); - - const seriesConfigs = recordsToPlot.map(buildConfig); - const seriesConfigsNoGeoData = []; - - // initialize the charts with loading indicators - data.seriesToPlot = seriesConfigs.map((config) => ({ - ...config, - loading: true, - chartData: null, - })); - - const mapData = []; - - if (hasGeoData !== undefined) { - for (let i = 0; i < seriesConfigs.length; i++) { - const config = seriesConfigs[i]; - let records; - if (config.detectorLabel.includes(ML_JOB_AGGREGATION.LAT_LONG)) { - if (config.entityFields.length) { - records = [ - recordsToPlot.find((record) => { - const entityFieldName = config.entityFields[0].fieldName; - const entityFieldValue = config.entityFields[0].fieldValue; - return (record[entityFieldName] && record[entityFieldName][0]) === entityFieldValue; - }), - ]; - } else { - records = recordsToPlot; - } - - mapData.push({ - ...config, - loading: false, - mapData: records, - }); - } else { - seriesConfigsNoGeoData.push(config); - } - } - } - - // Calculate the time range of the charts, which is a function of the chart width and max job bucket span. - data.tooManyBuckets = false; - const chartWidth = Math.floor(containerWith / chartsPerRow); - const { chartRange, tooManyBuckets } = calculateChartRange( - seriesConfigs, - selectedEarliestMs, - selectedLatestMs, - chartWidth, - recordsToPlot, - data.timeFieldName - ); - data.tooManyBuckets = tooManyBuckets; - - data.errorMessages = errorMessages; - - explorerService.setCharts({ ...data }); - - if (seriesConfigs.length === 0) { - return data; - } - - // Query 1 - load the raw metric data. - function getMetricData(config, range) { - const { jobId, detectorIndex, entityFields, bucketSpanSeconds } = config; - - const job = mlJobService.getJob(jobId); - - // If the job uses aggregation or scripted fields, and if it's a config we don't support - // use model plot data if model plot is enabled - // else if source data can be plotted, use that, otherwise model plot will be available. - const useSourceData = isSourceDataChartableForDetector(job, detectorIndex); - if (useSourceData === true) { - const datafeedQuery = get(config, 'datafeedConfig.query', null); - return mlResultsService - .getMetricData( - config.datafeedConfig.indices, - entityFields, - datafeedQuery, - config.metricFunction, - config.metricFieldName, - config.summaryCountFieldName, - config.timeField, - range.min, - range.max, - bucketSpanSeconds * 1000, - config.datafeedConfig - ) - .toPromise(); - } else { - // Extract the partition, by, over fields on which to filter. - const criteriaFields = []; - const detector = job.analysis_config.detectors[detectorIndex]; - if (detector.partition_field_name !== undefined) { - const partitionEntity = find(entityFields, { - fieldName: detector.partition_field_name, - }); - if (partitionEntity !== undefined) { - criteriaFields.push( - { fieldName: 'partition_field_name', fieldValue: partitionEntity.fieldName }, - { fieldName: 'partition_field_value', fieldValue: partitionEntity.fieldValue } - ); - } - } - - if (detector.over_field_name !== undefined) { - const overEntity = find(entityFields, { fieldName: detector.over_field_name }); - if (overEntity !== undefined) { - criteriaFields.push( - { fieldName: 'over_field_name', fieldValue: overEntity.fieldName }, - { fieldName: 'over_field_value', fieldValue: overEntity.fieldValue } - ); - } - } - - if (detector.by_field_name !== undefined) { - const byEntity = find(entityFields, { fieldName: detector.by_field_name }); - if (byEntity !== undefined) { - criteriaFields.push( - { fieldName: 'by_field_name', fieldValue: byEntity.fieldName }, - { fieldName: 'by_field_value', fieldValue: byEntity.fieldValue } - ); - } - } - - return new Promise((resolve, reject) => { - const obj = { - success: true, - results: {}, - }; - - return mlResultsService - .getModelPlotOutput( - jobId, - detectorIndex, - criteriaFields, - range.min, - range.max, - bucketSpanSeconds * 1000 - ) - .toPromise() - .then((resp) => { - // Return data in format required by the explorer charts. - const results = resp.results; - Object.keys(results).forEach((time) => { - obj.results[time] = results[time].actual; - }); - resolve(obj); - }) - .catch((resp) => { - reject(resp); - }); - }); - } - } - - // Query 2 - load the anomalies. - // Criteria to return the records for this series are the detector_index plus - // the specific combination of 'entity' fields i.e. the partition / by / over fields. - function getRecordsForCriteria(config, range) { - let criteria = []; - criteria.push({ fieldName: 'detector_index', fieldValue: config.detectorIndex }); - criteria = criteria.concat(config.entityFields); - return mlResultsService - .getRecordsForCriteria( - [config.jobId], - criteria, - 0, - range.min, - range.max, - ANOMALIES_MAX_RESULTS - ) - .toPromise(); - } - - // Query 3 - load any scheduled events for the job. - function getScheduledEvents(config, range) { - return mlResultsService - .getScheduledEventsByBucket( - [config.jobId], - range.min, - range.max, - config.bucketSpanSeconds * 1000, - 1, - MAX_SCHEDULED_EVENTS - ) - .toPromise(); - } - - // Query 4 - load context data distribution - function getEventDistribution(config, range) { - const chartType = getChartType(config); - - let splitField; - let filterField = null; - - // Define splitField and filterField based on chartType - if (chartType === CHART_TYPE.EVENT_DISTRIBUTION) { - splitField = config.entityFields.find((f) => f.fieldType === 'by'); - filterField = config.entityFields.find((f) => f.fieldType === 'partition'); - } else if (chartType === CHART_TYPE.POPULATION_DISTRIBUTION) { - splitField = config.entityFields.find((f) => f.fieldType === 'over'); - filterField = config.entityFields.find((f) => f.fieldType === 'partition'); - } - - const datafeedQuery = get(config, 'datafeedConfig.query', null); - return mlResultsService.getEventDistributionData( - config.datafeedConfig.indices, - splitField, - filterField, - datafeedQuery, - config.metricFunction, - config.metricFieldName, - config.timeField, - range.min, - range.max, - config.bucketSpanSeconds * 1000 - ); - } - - // first load and wait for required data, - // only after that trigger data processing and page render. - // TODO - if query returns no results e.g. source data has been deleted, - // display a message saying 'No data between earliest/latest'. - const seriesPromises = []; - // Use seriesConfigs list without geo data config so indices match up after seriesPromises are resolved and we map through the responses - const seriesCongifsForPromises = hasGeoData ? seriesConfigsNoGeoData : seriesConfigs; - seriesCongifsForPromises.forEach((seriesConfig) => { - seriesPromises.push( - Promise.all([ - getMetricData(seriesConfig, chartRange), - getRecordsForCriteria(seriesConfig, chartRange), - getScheduledEvents(seriesConfig, chartRange), - getEventDistribution(seriesConfig, chartRange), - ]) - ); - }); - - function processChartData(response, seriesIndex) { - const metricData = response[0].results; - const records = response[1].records; - const jobId = seriesCongifsForPromises[seriesIndex].jobId; - const scheduledEvents = response[2].events[jobId]; - const eventDistribution = response[3]; - const chartType = getChartType(seriesCongifsForPromises[seriesIndex]); - - // Sort records in ascending time order matching up with chart data - records.sort((recordA, recordB) => { - return recordA[ML_TIME_FIELD_NAME] - recordB[ML_TIME_FIELD_NAME]; - }); - - // Return dataset in format used by the chart. - // i.e. array of Objects with keys date (timestamp), value, - // plus anomalyScore for points with anomaly markers. - let chartData = []; - if (metricData !== undefined) { - if (eventDistribution.length > 0 && records.length > 0) { - const filterField = records[0].by_field_value || records[0].over_field_value; - chartData = eventDistribution.filter((d) => d.entity !== filterField); - map(metricData, (value, time) => { - // The filtering for rare/event_distribution charts needs to be handled - // differently because of how the source data is structured. - // For rare chart values we are only interested wether a value is either `0` or not, - // `0` acts like a flag in the chart whether to display the dot/marker. - // All other charts (single metric, population) are metric based and with - // those a value of `null` acts as the flag to hide a data point. - if ( - (chartType === CHART_TYPE.EVENT_DISTRIBUTION && value > 0) || - (chartType !== CHART_TYPE.EVENT_DISTRIBUTION && value !== null) - ) { - chartData.push({ - date: +time, - value: value, - entity: filterField, - }); - } - }); - } else { - chartData = map(metricData, (value, time) => ({ - date: +time, - value: value, - })); - } - } - - // Iterate through the anomaly records, adding anomalyScore properties - // to the chartData entries for anomalous buckets. - const chartDataForPointSearch = getChartDataForPointSearch(chartData, records[0], chartType); - each(records, (record) => { - // Look for a chart point with the same time as the record. - // If none found, insert a point for anomalies due to a gap in the data. - const recordTime = record[ML_TIME_FIELD_NAME]; - let chartPoint = findChartPointForTime(chartDataForPointSearch, recordTime); - if (chartPoint === undefined) { - chartPoint = { date: new Date(recordTime), value: null }; - chartData.push(chartPoint); - } - - chartPoint.anomalyScore = record.record_score; - - if (record.actual !== undefined) { - chartPoint.actual = record.actual; - chartPoint.typical = record.typical; - } else { - const causes = get(record, 'causes', []); - if (causes.length > 0) { - chartPoint.byFieldName = record.by_field_name; - chartPoint.numberOfCauses = causes.length; - if (causes.length === 1) { - // If only a single cause, copy actual and typical values to the top level. - const cause = record.causes[0]; - chartPoint.actual = cause.actual; - chartPoint.typical = cause.typical; - } - } - } - - if (record.multi_bucket_impact !== undefined) { - chartPoint.multiBucketImpact = record.multi_bucket_impact; - } - }); - - // Add a scheduledEvents property to any points in the chart data set - // which correspond to times of scheduled events for the job. - if (scheduledEvents !== undefined) { - each(scheduledEvents, (events, time) => { - const chartPoint = findChartPointForTime(chartDataForPointSearch, Number(time)); - if (chartPoint !== undefined) { - // Note if the scheduled event coincides with an absence of the underlying metric data, - // we don't worry about plotting the event. - chartPoint.scheduledEvents = events; - } - }); - } - - return chartData; - } - - function getChartDataForPointSearch(chartData, record, chartType) { - if ( - chartType === CHART_TYPE.EVENT_DISTRIBUTION || - chartType === CHART_TYPE.POPULATION_DISTRIBUTION - ) { - return chartData.filter((d) => { - return d.entity === (record && (record.by_field_value || record.over_field_value)); - }); - } - - return chartData; - } - - function findChartPointForTime(chartData, time) { - return chartData.find((point) => point.date === time); - } - - Promise.all(seriesPromises) - .then((response) => { - // calculate an overall min/max for all series - const processedData = response.map(processChartData); - const allDataPoints = reduce( - processedData, - (datapoints, series) => { - each(series, (d) => datapoints.push(d)); - return datapoints; - }, - [] - ); - const overallChartLimits = chartLimits(allDataPoints); - - data.seriesToPlot = response.map((d, i) => { - return { - ...seriesCongifsForPromises[i], - loading: false, - chartData: processedData[i], - plotEarliest: chartRange.min, - plotLatest: chartRange.max, - selectedEarliest: selectedEarliestMs, - selectedLatest: selectedLatestMs, - chartLimits: USE_OVERALL_CHART_LIMITS - ? overallChartLimits - : chartLimits(processedData[i]), - }; - }); - - if (mapData.length) { - // push map data in if it's available - data.seriesToPlot.push(...mapData); - } - explorerService.setCharts({ ...data }); - }) - .catch((error) => { - console.error(error); - }); -}; - -function processRecordsForDisplay(anomalyRecords) { - // Aggregate the anomaly data by detector, and entity (by/over/partition). - if (anomalyRecords.length === 0) { - return [[], undefined]; - } - - // Aggregate by job, detector, and analysis fields (partition, by, over). - const aggregatedData = {}; - - const jobsErrorMessage = {}; - each(anomalyRecords, (record) => { - // Check if we can plot a chart for this record, depending on whether the source data - // is chartable, and if model plot is enabled for the job. - const job = mlJobService.getJob(record.job_id); - - // if we already know this job has datafeed aggregations we cannot support - // no need to do more checks - if (jobsErrorMessage[record.job_id] !== undefined) { - return; - } - - let isChartable = - isSourceDataChartableForDetector(job, record.detector_index) || - isMappableJob(job, record.detector_index); - - if (isChartable === false) { - if (isModelPlotChartableForDetector(job, record.detector_index)) { - // Check if model plot is enabled for this job. - // Need to check the entity fields for the record in case the model plot config has a terms list. - const entityFields = getEntityFieldList(record); - if (isModelPlotEnabled(job, record.detector_index, entityFields)) { - isChartable = true; - } else { - isChartable = false; - jobsErrorMessage[record.job_id] = i18n.translate( - 'xpack.ml.timeSeriesJob.sourceDataNotChartableWithDisabledModelPlotMessage', - { - defaultMessage: - 'source data is not viewable for this detector and model plot is disabled', - } - ); - } - } else { - jobsErrorMessage[record.job_id] = i18n.translate( - 'xpack.ml.timeSeriesJob.sourceDataModelPlotNotChartableMessage', - { - defaultMessage: 'both source data and model plot are not chartable for this detector', - } - ); - } - } - - if (isChartable === false) { - return; - } - const jobId = record.job_id; - if (aggregatedData[jobId] === undefined) { - aggregatedData[jobId] = {}; - } - const detectorsForJob = aggregatedData[jobId]; - - const detectorIndex = record.detector_index; - if (detectorsForJob[detectorIndex] === undefined) { - detectorsForJob[detectorIndex] = {}; - } - - // TODO - work out how best to display results from detectors with just an over field. - const firstFieldName = - record.partition_field_name || record.by_field_name || record.over_field_name; - const firstFieldValue = - record.partition_field_value || record.by_field_value || record.over_field_value; - if (firstFieldName !== undefined) { - const groupsForDetector = detectorsForJob[detectorIndex]; - - if (groupsForDetector[firstFieldName] === undefined) { - groupsForDetector[firstFieldName] = {}; - } - const valuesForGroup = groupsForDetector[firstFieldName]; - if (valuesForGroup[firstFieldValue] === undefined) { - valuesForGroup[firstFieldValue] = {}; - } - - const dataForGroupValue = valuesForGroup[firstFieldValue]; - - let isSecondSplit = false; - if (record.partition_field_name !== undefined) { - const splitFieldName = record.over_field_name || record.by_field_name; - if (splitFieldName !== undefined) { - isSecondSplit = true; - } - } - - if (isSecondSplit === false) { - if (dataForGroupValue.maxScoreRecord === undefined) { - dataForGroupValue.maxScore = record.record_score; - dataForGroupValue.maxScoreRecord = record; - } else { - if (record.record_score > dataForGroupValue.maxScore) { - dataForGroupValue.maxScore = record.record_score; - dataForGroupValue.maxScoreRecord = record; - } - } - } else { - // Aggregate another level for the over or by field. - const secondFieldName = record.over_field_name || record.by_field_name; - const secondFieldValue = record.over_field_value || record.by_field_value; - - if (dataForGroupValue[secondFieldName] === undefined) { - dataForGroupValue[secondFieldName] = {}; - } - - const splitsForGroup = dataForGroupValue[secondFieldName]; - if (splitsForGroup[secondFieldValue] === undefined) { - splitsForGroup[secondFieldValue] = {}; - } - - const dataForSplitValue = splitsForGroup[secondFieldValue]; - if (dataForSplitValue.maxScoreRecord === undefined) { - dataForSplitValue.maxScore = record.record_score; - dataForSplitValue.maxScoreRecord = record; - } else { - if (record.record_score > dataForSplitValue.maxScore) { - dataForSplitValue.maxScore = record.record_score; - dataForSplitValue.maxScoreRecord = record; - } - } - } - } else { - // Detector with no partition or by field. - const dataForDetector = detectorsForJob[detectorIndex]; - if (dataForDetector.maxScoreRecord === undefined) { - dataForDetector.maxScore = record.record_score; - dataForDetector.maxScoreRecord = record; - } else { - if (record.record_score > dataForDetector.maxScore) { - dataForDetector.maxScore = record.record_score; - dataForDetector.maxScoreRecord = record; - } - } - } - }); - - // Group job id by error message instead of by job: - const errorMessages = {}; - Object.keys(jobsErrorMessage).forEach((jobId) => { - const msg = jobsErrorMessage[jobId]; - if (errorMessages[msg] === undefined) { - errorMessages[msg] = new Set([jobId]); - } else { - errorMessages[msg].add(jobId); - } - }); - let recordsForSeries = []; - // Convert to an array of the records with the highest record_score per unique series. - each(aggregatedData, (detectorsForJob) => { - each(detectorsForJob, (groupsForDetector) => { - if (groupsForDetector.errorMessage !== undefined) { - recordsForSeries.push(groupsForDetector.errorMessage); - } else { - if (groupsForDetector.maxScoreRecord !== undefined) { - // Detector with no partition / by field. - recordsForSeries.push(groupsForDetector.maxScoreRecord); - } else { - each(groupsForDetector, (valuesForGroup) => { - each(valuesForGroup, (dataForGroupValue) => { - if (dataForGroupValue.maxScoreRecord !== undefined) { - recordsForSeries.push(dataForGroupValue.maxScoreRecord); - } else { - // Second level of aggregation for partition and by/over. - each(dataForGroupValue, (splitsForGroup) => { - each(splitsForGroup, (dataForSplitValue) => { - recordsForSeries.push(dataForSplitValue.maxScoreRecord); - }); - }); - } - }); - }); - } - } - }); - }); - recordsForSeries = sortBy(recordsForSeries, 'record_score').reverse(); - - return [recordsForSeries, errorMessages]; -} - -function calculateChartRange( - seriesConfigs, - selectedEarliestMs, - selectedLatestMs, - chartWidth, - recordsToPlot, - timeFieldName -) { - let tooManyBuckets = false; - // Calculate the time range for the charts. - // Fit in as many points in the available container width plotted at the job bucket span. - // Look for the chart with the shortest bucket span as this determines - // the length of the time range that can be plotted. - const midpointMs = Math.ceil((selectedEarliestMs + selectedLatestMs) / 2); - const minBucketSpanMs = Math.min.apply(null, map(seriesConfigs, 'bucketSpanSeconds')) * 1000; - const maxBucketSpanMs = Math.max.apply(null, map(seriesConfigs, 'bucketSpanSeconds')) * 1000; - - const pointsToPlotFullSelection = Math.ceil( - (selectedLatestMs - selectedEarliestMs) / minBucketSpanMs - ); - - // Optimally space points 5px apart. - const optimumPointSpacing = 5; - const optimumNumPoints = chartWidth / optimumPointSpacing; - - // Increase actual number of points if we can't plot the selected range - // at optimal point spacing. - const plotPoints = Math.max(optimumNumPoints, pointsToPlotFullSelection); - const halfPoints = Math.ceil(plotPoints / 2); - const timefilter = getTimefilter(); - const bounds = timefilter.getActiveBounds(); - const boundsMin = bounds.min.valueOf(); - - let chartRange = { - min: Math.max(midpointMs - halfPoints * minBucketSpanMs, boundsMin), - max: Math.min(midpointMs + halfPoints * minBucketSpanMs, bounds.max.valueOf()), - }; - - if (plotPoints > CHART_MAX_POINTS) { - // For each series being plotted, display the record with the highest score if possible. - const maxTimeSpan = minBucketSpanMs * CHART_MAX_POINTS; - let minMs = recordsToPlot[0][timeFieldName]; - let maxMs = recordsToPlot[0][timeFieldName]; - - each(recordsToPlot, (record) => { - const diffMs = maxMs - minMs; - if (diffMs < maxTimeSpan) { - const recordTime = record[timeFieldName]; - if (recordTime < minMs) { - if (maxMs - recordTime <= maxTimeSpan) { - minMs = recordTime; - } - } - - if (recordTime > maxMs) { - if (recordTime - minMs <= maxTimeSpan) { - maxMs = recordTime; - } - } - } - }); - - if (maxMs - minMs < maxTimeSpan) { - // Expand out before and after the span with the highest scoring anomalies, - // covering as much as the requested time span as possible. - // Work out if the high scoring region is nearer the start or end of the selected time span. - const diff = maxTimeSpan - (maxMs - minMs); - if (minMs - 0.5 * diff <= selectedEarliestMs) { - minMs = Math.max(selectedEarliestMs, minMs - 0.5 * diff); - maxMs = minMs + maxTimeSpan; - } else { - maxMs = Math.min(selectedLatestMs, maxMs + 0.5 * diff); - minMs = maxMs - maxTimeSpan; - } - } - - chartRange = { min: minMs, max: maxMs }; - } - - // Elasticsearch aggregation returns points at start of bucket, - // so align the min to the length of the longest bucket. - chartRange.min = Math.floor(chartRange.min / maxBucketSpanMs) * maxBucketSpanMs; - if (chartRange.min < boundsMin) { - chartRange.min = chartRange.min + maxBucketSpanMs; - } - - if ( - (chartRange.min > selectedEarliestMs || chartRange.max < selectedLatestMs) && - chartRange.max - chartRange.min < selectedLatestMs - selectedEarliestMs - ) { - tooManyBuckets = true; - } - - return { - chartRange, - tooManyBuckets, - }; -} diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.test.js deleted file mode 100644 index a2ad8efac67b4..0000000000000 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.test.js +++ /dev/null @@ -1,194 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { cloneDeep } from 'lodash'; - -import mockAnomalyChartRecords from './__mocks__/mock_anomaly_chart_records.json'; -import mockDetectorsByJob from './__mocks__/mock_detectors_by_job.json'; -import mockJobConfig from './__mocks__/mock_job_config.json'; -import mockSeriesPromisesResponse from './__mocks__/mock_series_promises_response.json'; - -// Some notes on the tests and mocks: -// -// 'call anomalyChangeListener with actual series config' -// This test uses the standard mocks and uses the data as is provided via the mock files. -// The mocked services check for values in the data (e.g. 'mock-job-id', 'farequote-2017') -// and return the mock data from the files. -// -// 'filtering should skip values of null' -// This is is used to verify that values of `null` get filtered out but `0` is kept. -// The test clones mock data from files and adjusts job_id and indices to trigger -// suitable responses from the mocked services. The mocked services check against the -// provided alternative values and return specific modified mock responses for the test case. - -const mockJobConfigClone = cloneDeep(mockJobConfig); - -// adjust mock data to tests against null/0 values -const mockMetricClone = cloneDeep(mockSeriesPromisesResponse[0][0]); -mockMetricClone.results['1486712700000'] = null; -mockMetricClone.results['1486713600000'] = 0; - -jest.mock('../../services/job_service', () => ({ - mlJobService: { - getJob(jobId) { - // this is for 'call anomalyChangeListener with actual series config' - if (jobId === 'mock-job-id') { - return mockJobConfig; - } - // this is for 'filtering should skip values of null' - mockJobConfigClone.datafeed_config.indices = [`farequote-2017-${jobId}`]; - return mockJobConfigClone; - }, - detectorsByJob: mockDetectorsByJob, - }, -})); - -jest.mock('../../services/results_service', () => { - const { of } = require('rxjs'); - return { - mlResultsService: { - getMetricData(indices) { - // this is for 'call anomalyChangeListener with actual series config' - if (indices[0] === 'farequote-2017') { - return of(mockSeriesPromisesResponse[0][0]); - } - // this is for 'filtering should skip values of null' - return of(mockMetricClone); - }, - getRecordsForCriteria() { - return of(mockSeriesPromisesResponse[0][1]); - }, - getScheduledEventsByBucket() { - return of(mockSeriesPromisesResponse[0][2]); - }, - getEventDistributionData(indices) { - // this is for 'call anomalyChangeListener with actual series config' - if (indices[0] === 'farequote-2017') { - return Promise.resolve([]); - } - // this is for 'filtering should skip values of null' and - // resolves with a dummy object to trigger the processing - // of the event distribution chartdata filtering - return Promise.resolve([ - { - entity: 'mock', - }, - ]); - }, - }, - }; -}); - -jest.mock('../../util/string_utils', () => ({ - mlEscape(d) { - return d; - }, -})); - -jest.mock('../../util/dependency_cache', () => { - const dateMath = require('@elastic/datemath'); - let _time = undefined; - const timefilter = { - setTime: (time) => { - _time = time; - }, - getActiveBounds: () => { - return { - min: dateMath.parse(_time.from), - max: dateMath.parse(_time.to), - }; - }, - }; - return { - getTimefilter: () => timefilter, - }; -}); - -jest.mock('../explorer_dashboard_service', () => ({ - explorerService: { - setCharts: jest.fn(), - }, -})); - -import moment from 'moment'; -import { anomalyDataChange, getDefaultChartsData } from './explorer_charts_container_service'; -import { explorerService } from '../explorer_dashboard_service'; -import { getTimefilter } from '../../util/dependency_cache'; - -const timefilter = getTimefilter(); -timefilter.setTime({ - from: moment(1486425600000).toISOString(), // Feb 07 2017 - to: moment(1486857600000).toISOString(), // Feb 12 2017 -}); - -describe('explorerChartsContainerService', () => { - afterEach(() => { - explorerService.setCharts.mockClear(); - }); - - test('call anomalyChangeListener with empty series config', (done) => { - anomalyDataChange(1140, [], 1486656000000, 1486670399999); - - setImmediate(() => { - expect(explorerService.setCharts.mock.calls.length).toBe(1); - expect(explorerService.setCharts.mock.calls[0][0]).toStrictEqual({ - ...getDefaultChartsData(), - chartsPerRow: 2, - }); - done(); - }); - }); - - test('call anomalyChangeListener with actual series config', (done) => { - anomalyDataChange(1140, mockAnomalyChartRecords, 1486656000000, 1486670399999); - - setImmediate(() => { - expect(explorerService.setCharts.mock.calls.length).toBe(2); - expect(explorerService.setCharts.mock.calls[0][0]).toMatchSnapshot(); - expect(explorerService.setCharts.mock.calls[1][0]).toMatchSnapshot(); - done(); - }); - }); - - test('filtering should skip values of null', (done) => { - const mockAnomalyChartRecordsClone = cloneDeep(mockAnomalyChartRecords).map((d) => { - d.job_id = 'mock-job-id-distribution'; - return d; - }); - - anomalyDataChange(1140, mockAnomalyChartRecordsClone, 1486656000000, 1486670399999); - - setImmediate(() => { - expect(explorerService.setCharts.mock.calls.length).toBe(2); - expect(explorerService.setCharts.mock.calls[0][0].seriesToPlot.length).toBe(1); - expect(explorerService.setCharts.mock.calls[1][0].seriesToPlot.length).toBe(1); - - // the mock source dataset has a length of 115. one data point has a value of `null`, - // and another one `0`. the received dataset should have a length of 114, - // it should remove the datapoint with `null` and keep the one with `0`. - const chartData = explorerService.setCharts.mock.calls[1][0].seriesToPlot[0].chartData; - expect(chartData).toHaveLength(114); - expect(chartData.filter((d) => d.value === 0)).toHaveLength(1); - expect(chartData.filter((d) => d.value === null)).toHaveLength(0); - done(); - }); - }); - - test('field value with trailing dot should not throw an error', (done) => { - const mockAnomalyChartRecordsClone = cloneDeep(mockAnomalyChartRecords); - mockAnomalyChartRecordsClone[1].partition_field_value = 'AAL.'; - - expect(() => { - anomalyDataChange(1140, mockAnomalyChartRecordsClone, 1486656000000, 1486670399999); - }).not.toThrow(); - - setImmediate(() => { - expect(explorerService.setCharts.mock.calls.length).toBe(2); - done(); - }); - }); -}); diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.ts b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.ts new file mode 100644 index 0000000000000..aa2eabbd4a38e --- /dev/null +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.ts @@ -0,0 +1,38 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +/* + * Service for the container for the anomaly charts in the + * Machine Learning Explorer dashboard. + * The service processes the data required to draw each of the charts + * and manages the layout of the charts in the containing div. + */ + +import type { JobId } from '../../../../common/types/anomaly_detection_jobs'; +import { SeriesConfigWithMetadata } from '../../services/anomaly_explorer_charts_service'; + +export interface ExplorerChartSeriesErrorMessages { + [key: string]: Set; +} +export declare interface ExplorerChartsData { + chartsPerRow: number; + seriesToPlot: SeriesConfigWithMetadata[]; + tooManyBuckets: boolean; + timeFieldName: string; + errorMessages: ExplorerChartSeriesErrorMessages | undefined; +} + +export function getDefaultChartsData(): ExplorerChartsData { + return { + chartsPerRow: 1, + errorMessages: undefined, + seriesToPlot: [], + // default values, will update on every re-render + tooManyBuckets: false, + timeFieldName: 'timestamp', + }; +} diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts b/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts index 4ad0041df73e4..125ccf38b784d 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts +++ b/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts @@ -50,7 +50,9 @@ export const CHART_TYPE = { POPULATION_DISTRIBUTION: 'population_distribution', SINGLE_METRIC: 'single_metric', GEO_MAP: 'geo_map', -}; +} as const; + +export type ChartType = typeof CHART_TYPE[keyof typeof CHART_TYPE]; export const MAX_CATEGORY_EXAMPLES = 10; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_dashboard_service.ts b/x-pack/plugins/ml/public/application/explorer/explorer_dashboard_service.ts index cf632ce41ae3f..49707bc927361 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_dashboard_service.ts +++ b/x-pack/plugins/ml/public/application/explorer/explorer_dashboard_service.ts @@ -156,3 +156,5 @@ export const explorerService = { explorerAction$.next({ type: EXPLORER_ACTION.SET_VIEW_BY_PER_PAGE, payload }); }, }; + +export type ExplorerService = typeof explorerService; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_utils.d.ts b/x-pack/plugins/ml/public/application/explorer/explorer_utils.d.ts index 855106801cbb1..9e24a4349584e 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_utils.d.ts +++ b/x-pack/plugins/ml/public/application/explorer/explorer_utils.d.ts @@ -5,11 +5,13 @@ * 2.0. */ -import { Moment } from 'moment'; - import { AnnotationsTable } from '../../../common/types/annotations'; import { CombinedJob } from '../../../common/types/anomaly_detection_jobs'; import { SwimlaneType } from './explorer_constants'; +import { TimeRangeBounds } from '../util/time_buckets'; +import { RecordForInfluencer } from '../services/results_service/results_service'; +import { InfluencersFilterQuery } from '../../../common/types/es_client'; +import { MlResultsService } from '../services/results_service'; interface ClearedSelectedAnomaliesState { selectedCells: undefined; @@ -31,6 +33,10 @@ export declare interface SwimlaneData { interval: number; } +interface ChartRecord extends RecordForInfluencer { + function: string; +} + export declare interface OverallSwimlaneData extends SwimlaneData { earliest: number; latest: number; @@ -98,11 +104,6 @@ export declare interface ExplorerJob { export declare const createJobs: (jobs: CombinedJob[]) => ExplorerJob[]; -export declare interface TimeRangeBounds { - min: Moment | undefined; - max: Moment | undefined; -} - declare interface SwimlaneBounds { earliest: number; latest: number; @@ -132,17 +133,20 @@ export declare const loadAnomaliesTableData: ( fieldName: string, tableInterval: string, tableSeverity: number, - influencersFilterQuery: any + influencersFilterQuery: InfluencersFilterQuery ) => Promise; export declare const loadDataForCharts: ( + mlResultsService: MlResultsService, jobIds: string[], earliestMs: number, latestMs: number, influencers: any[], selectedCells: AppStateSelectedCells | undefined, - influencersFilterQuery: any -) => Promise; + influencersFilterQuery: InfluencersFilterQuery, + // choose whether or not to keep track of the request that could be out of date + takeLatestOnly: boolean +) => Promise; export declare const loadFilteredTopInfluencers: ( jobIds: string[], @@ -151,10 +155,11 @@ export declare const loadFilteredTopInfluencers: ( records: any[], influencers: any[], noInfluencersConfigured: boolean, - influencersFilterQuery: any + influencersFilterQuery: InfluencersFilterQuery ) => Promise; export declare const loadTopInfluencers: ( + mlResultsService: MlResultsService, selectedJobIds: string[], earliestMs: number, latestMs: number, @@ -178,7 +183,7 @@ export declare const loadViewByTopFieldValuesForSelectedTime: ( ) => Promise; export declare interface FilterData { - influencersFilterQuery: any; + influencersFilterQuery: InfluencersFilterQuery; filterActive: boolean; filteredFields: string[]; queryString: string; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_utils.js b/x-pack/plugins/ml/public/application/explorer/explorer_utils.js index 2f19cbc80f055..ea101d104f783 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_utils.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_utils.js @@ -26,7 +26,6 @@ import { import { parseInterval } from '../../../common/util/parse_interval'; import { ml } from '../services/ml_api_service'; import { mlJobService } from '../services/job_service'; -import { mlResultsService } from '../services/results_service'; import { getTimeBucketsFromCache } from '../util/time_buckets'; import { getTimefilter, getUiSettings } from '../util/dependency_cache'; @@ -65,6 +64,7 @@ export function getDefaultSwimlaneData() { } export async function loadFilteredTopInfluencers( + mlResultsService, jobIds, earliestMs, latestMs, @@ -125,6 +125,7 @@ export async function loadFilteredTopInfluencers( }); return await loadTopInfluencers( + mlResultsService, jobIds, earliestMs, latestMs, @@ -539,12 +540,17 @@ export async function loadAnomaliesTableData( // and avoid race conditions ending up with the wrong charts. let requestCount = 0; export async function loadDataForCharts( + mlResultsService, jobIds, earliestMs, latestMs, influencers = [], selectedCells, - influencersFilterQuery + influencersFilterQuery, + // choose whether or not to keep track of the request that could be out of date + // in Anomaly Explorer this is being used to ignore any request that are out of date + // but in embeddables, we might have multiple requests coming from multiple different panels + takeLatestOnly = true ) { return new Promise((resolve) => { // Just skip doing the request when this function @@ -573,7 +579,7 @@ export async function loadDataForCharts( ) .then((resp) => { // Ignore this response if it's returned by an out of date promise - if (newRequestCount < requestCount) { + if (takeLatestOnly && newRequestCount < requestCount) { resolve([]); } @@ -590,6 +596,7 @@ export async function loadDataForCharts( } export async function loadTopInfluencers( + mlResultsService, selectedJobIds, earliestMs, latestMs, diff --git a/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts b/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts index 5d168c7827525..bb90fedfc2315 100644 --- a/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts +++ b/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts @@ -24,6 +24,7 @@ import { } from '../../explorer_utils'; import { AnnotationsTable } from '../../../../../common/types/annotations'; import { SWIM_LANE_DEFAULT_PAGE_SIZE } from '../../explorer_constants'; +import { InfluencersFilterQuery } from '../../../../../common/types/es_client'; export interface ExplorerState { annotations: AnnotationsTable; @@ -33,7 +34,7 @@ export interface ExplorerState { filteredFields: any[]; filterPlaceHolder: any; indexPattern: { title: string; fields: any[] }; - influencersFilterQuery: any; + influencersFilterQuery: InfluencersFilterQuery; influencers: Dictionary; isAndOperator: boolean; loading: boolean; diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx index c108257094b6a..4adb79f065cd4 100644 --- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx +++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx @@ -361,7 +361,7 @@ export const SwimlaneContainer: FC = ({ diff --git a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx index e65ca22effd76..b651b311f13aa 100644 --- a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx +++ b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx @@ -37,6 +37,7 @@ import { JOB_ID } from '../../../../common/constants/anomalies'; import { MlAnnotationUpdatesContext } from '../../contexts/ml/ml_annotation_updates_context'; import { AnnotationUpdatesService } from '../../services/annotations_service'; import { useExplorerUrlState } from '../../explorer/hooks/use_explorer_url_state'; +import { useTimeBuckets } from '../../components/custom_hooks/use_time_buckets'; export const explorerRouteFactory = ( navigateToPath: NavigateToPath, @@ -84,6 +85,8 @@ const ExplorerUrlStateManager: FC = ({ jobsWithTim const [lastRefresh, setLastRefresh] = useState(0); const [stoppedPartitions, setStoppedPartitions] = useState(); const [invalidTimeRangeError, setInValidTimeRangeError] = useState(false); + + const timeBuckets = useTimeBuckets(); const timefilter = useTimefilter({ timeRangeSelector: true, autoRefreshSelector: true }); const { jobIds } = useJobSelection(jobsWithTimeRange); @@ -265,6 +268,8 @@ const ExplorerUrlStateManager: FC = ({ jobsWithTim stoppedPartitions, invalidTimeRangeError, selectedJobsRunning, + timeBuckets, + timefilter, }} /> diff --git a/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx index b6ad6b015a085..c06094b44f4a0 100644 --- a/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx +++ b/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx @@ -17,7 +17,7 @@ import { NavigateToPath, useNotifications } from '../../contexts/kibana'; import { MlJobWithTimeRange } from '../../../../common/types/anomaly_detection_jobs'; import { TimeSeriesExplorer } from '../../timeseriesexplorer'; -import { getDateFormatTz, TimeRangeBounds } from '../../explorer/explorer_utils'; +import { getDateFormatTz } from '../../explorer/explorer_utils'; import { ml } from '../../services/ml_api_service'; import { mlJobService } from '../../services/job_service'; import { mlForecastService } from '../../services/forecast_service'; @@ -43,7 +43,8 @@ import { useToastNotificationService } from '../../services/toast_notification_s import { AnnotationUpdatesService } from '../../services/annotations_service'; import { MlAnnotationUpdatesContext } from '../../contexts/ml/ml_annotation_updates_context'; import { useTimeSeriesExplorerUrlState } from '../../timeseriesexplorer/hooks/use_timeseriesexplorer_url_state'; -import { TimeSeriesExplorerAppState } from '../../../../common/types/ml_url_generator'; +import type { TimeSeriesExplorerAppState } from '../../../../common/types/ml_url_generator'; +import type { TimeRangeBounds } from '../../util/time_buckets'; export const timeSeriesExplorerRouteFactory = ( navigateToPath: NavigateToPath, diff --git a/x-pack/plugins/ml/public/application/services/__mocks__/anomaly_detector_service.ts b/x-pack/plugins/ml/public/application/services/__mocks__/anomaly_detector_service.ts new file mode 100644 index 0000000000000..e36f8985f8ffe --- /dev/null +++ b/x-pack/plugins/ml/public/application/services/__mocks__/anomaly_detector_service.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export const createAnomalyDetectorServiceMock = () => ({ + getJobs$: jest.fn(), +}); diff --git a/x-pack/plugins/ml/public/application/services/__mocks__/anomaly_explorer_charts_service.ts b/x-pack/plugins/ml/public/application/services/__mocks__/anomaly_explorer_charts_service.ts new file mode 100644 index 0000000000000..21f07ed9e5a3c --- /dev/null +++ b/x-pack/plugins/ml/public/application/services/__mocks__/anomaly_explorer_charts_service.ts @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export const createAnomalyExplorerChartsServiceMock = () => ({ + getCombinedJobs: jest.fn(), + getAnomalyData: jest.fn(), + setTimeRange: jest.fn(), + getTimeBounds: jest.fn(), +}); diff --git a/x-pack/plugins/ml/public/application/services/__mocks__/ml_api_services.ts b/x-pack/plugins/ml/public/application/services/__mocks__/ml_api_services.ts new file mode 100644 index 0000000000000..b63ae2f859b65 --- /dev/null +++ b/x-pack/plugins/ml/public/application/services/__mocks__/ml_api_services.ts @@ -0,0 +1,12 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export const mlApiServicesMock = { + jobs: { + jobForCloning: jest.fn(), + }, +}; diff --git a/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.test.ts b/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.test.ts new file mode 100644 index 0000000000000..36e18b49cfa84 --- /dev/null +++ b/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.test.ts @@ -0,0 +1,183 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { AnomalyExplorerChartsService } from './anomaly_explorer_charts_service'; +import mockAnomalyChartRecords from '../explorer/explorer_charts/__mocks__/mock_anomaly_chart_records.json'; +import mockJobConfig from '../explorer/explorer_charts/__mocks__/mock_job_config.json'; +import mockSeriesPromisesResponse from '../explorer/explorer_charts/__mocks__/mock_series_promises_response.json'; +import { of } from 'rxjs'; +import { cloneDeep } from 'lodash'; +import type { CombinedJob } from '../../../common/types/anomaly_detection_jobs'; +import type { ExplorerChartsData } from '../explorer/explorer_charts/explorer_charts_container_service'; +import type { ExplorerService } from '../explorer/explorer_dashboard_service'; +import type { MlApiServices } from './ml_api_service'; +import type { MlResultsService } from './results_service'; +import { getDefaultChartsData } from '../explorer/explorer_charts/explorer_charts_container_service'; +import { timefilterMock } from '../contexts/kibana/__mocks__/use_timefilter'; +import { mlApiServicesMock } from './__mocks__/ml_api_services'; + +// Some notes on the tests and mocks: +// +// 'call anomalyChangeListener with actual series config' +// This test uses the standard mocks and uses the data as is provided via the mock files. +// The mocked services check for values in the data (e.g. 'mock-job-id', 'farequote-2017') +// and return the mock data from the files. +// +// 'filtering should skip values of null' +// This is is used to verify that values of `null` get filtered out but `0` is kept. +// The test clones mock data from files and adjusts job_id and indices to trigger +// suitable responses from the mocked services. The mocked services check against the +// provided alternative values and return specific modified mock responses for the test case. + +const mockJobConfigClone = cloneDeep(mockJobConfig); + +// adjust mock data to tests against null/0 values +const mockMetricClone = cloneDeep(mockSeriesPromisesResponse[0][0]); +// @ts-ignore +mockMetricClone.results['1486712700000'] = null; +// @ts-ignore +mockMetricClone.results['1486713600000'] = 0; + +export const mlResultsServiceMock = { + getMetricData: jest.fn((indices) => { + // this is for 'call anomalyChangeListener with actual series config' + if (indices[0] === 'farequote-2017') { + return of(mockSeriesPromisesResponse[0][0]); + } + // this is for 'filtering should skip values of null' + return of(mockMetricClone); + }), + getRecordsForCriteria: jest.fn(() => { + return of(mockSeriesPromisesResponse[0][1]); + }), + getScheduledEventsByBucket: jest.fn(() => of(mockSeriesPromisesResponse[0][2])), + getEventDistributionData: jest.fn((indices) => { + // this is for 'call anomalyChangeListener with actual series config' + if (indices[0] === 'farequote-2017') { + return Promise.resolve([]); + } + // this is for 'filtering should skip values of null' and + // resolves with a dummy object to trigger the processing + // of the event distribution chartdata filtering + return Promise.resolve([ + { + entity: 'mock', + }, + ]); + }), +}; + +const assertAnomalyDataResult = (anomalyData: ExplorerChartsData) => { + expect(anomalyData.chartsPerRow).toBe(1); + expect(Array.isArray(anomalyData.seriesToPlot)).toBe(true); + expect(anomalyData.seriesToPlot.length).toBe(1); + expect(anomalyData.errorMessages).toMatchObject({}); + expect(anomalyData.tooManyBuckets).toBe(false); + expect(anomalyData.timeFieldName).toBe('timestamp'); +}; +describe('AnomalyExplorerChartsService', () => { + const jobId = 'mock-job-id'; + const combinedJobRecords = { + [jobId]: mockJobConfigClone, + }; + const anomalyExplorerService = new AnomalyExplorerChartsService( + timefilterMock, + (mlApiServicesMock as unknown) as MlApiServices, + (mlResultsServiceMock as unknown) as MlResultsService + ); + const explorerService = { + setCharts: jest.fn(), + }; + + const timeRange = { + earliestMs: 1486656000000, + latestMs: 1486670399999, + }; + + beforeEach(() => { + mlApiServicesMock.jobs.jobForCloning.mockImplementation(() => + Promise.resolve({ job: mockJobConfigClone, datafeed: mockJobConfigClone.datafeed_config }) + ); + }); + + afterEach(() => { + explorerService.setCharts.mockClear(); + }); + + test('should return anomaly data without explorer service', async () => { + const anomalyData = (await anomalyExplorerService.getAnomalyData( + undefined, + (combinedJobRecords as unknown) as Record, + 1000, + mockAnomalyChartRecords, + timeRange.earliestMs, + timeRange.latestMs, + timefilterMock, + 0, + 12 + )) as ExplorerChartsData; + assertAnomalyDataResult(anomalyData); + }); + + test('should set anomaly data with explorer service side effects', async () => { + await anomalyExplorerService.getAnomalyData( + (explorerService as unknown) as ExplorerService, + (combinedJobRecords as unknown) as Record, + 1000, + mockAnomalyChartRecords, + timeRange.earliestMs, + timeRange.latestMs, + timefilterMock, + 0, + 12 + ); + + expect(explorerService.setCharts.mock.calls.length).toBe(2); + assertAnomalyDataResult(explorerService.setCharts.mock.calls[0][0]); + assertAnomalyDataResult(explorerService.setCharts.mock.calls[1][0]); + }); + + test('call anomalyChangeListener with empty series config', async () => { + const anomalyData = (await anomalyExplorerService.getAnomalyData( + undefined, + // @ts-ignore + (combinedJobRecords as unknown) as Record, + 1000, + [], + timeRange.earliestMs, + timeRange.latestMs, + timefilterMock, + 0, + 12 + )) as ExplorerChartsData; + expect(anomalyData).toStrictEqual({ + ...getDefaultChartsData(), + chartsPerRow: 2, + }); + }); + + test('field value with trailing dot should not throw an error', async () => { + const mockAnomalyChartRecordsClone = cloneDeep(mockAnomalyChartRecords); + mockAnomalyChartRecordsClone[1].partition_field_value = 'AAL.'; + + const anomalyData = (await anomalyExplorerService.getAnomalyData( + undefined, + (combinedJobRecords as unknown) as Record, + 1000, + mockAnomalyChartRecordsClone, + timeRange.earliestMs, + timeRange.latestMs, + timefilterMock, + 0, + 12 + )) as ExplorerChartsData; + expect(anomalyData).toBeDefined(); + expect(anomalyData!.chartsPerRow).toBe(2); + expect(Array.isArray(anomalyData!.seriesToPlot)).toBe(true); + expect(anomalyData!.seriesToPlot.length).toBe(2); + }); +}); diff --git a/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.ts b/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.ts new file mode 100644 index 0000000000000..59b6860cb65b7 --- /dev/null +++ b/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.ts @@ -0,0 +1,1056 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { each, find, get, map, reduce, sortBy } from 'lodash'; +import { i18n } from '@kbn/i18n'; +import { RecordForInfluencer } from './results_service/results_service'; +import { + isMappableJob, + isModelPlotChartableForDetector, + isModelPlotEnabled, + isSourceDataChartableForDetector, + mlFunctionToESAggregation, +} from '../../../common/util/job_utils'; +import { EntityField, getEntityFieldList } from '../../../common/util/anomaly_utils'; +import { CombinedJob, Datafeed, JobId } from '../../../common/types/anomaly_detection_jobs'; +import { MlApiServices } from './ml_api_service'; +import { SWIM_LANE_LABEL_WIDTH } from '../explorer/swimlane_container'; +import { ES_AGGREGATION, ML_JOB_AGGREGATION } from '../../../common/constants/aggregation_types'; +import { parseInterval } from '../../../common/util/parse_interval'; +import { _DOC_COUNT, DOC_COUNT } from '../../../common/constants/field_types'; +import { getChartType, chartLimits } from '../util/chart_utils'; +import { CriteriaField, MlResultsService } from './results_service'; +import { TimefilterContract, TimeRange } from '../../../../../../src/plugins/data/public'; +import { CHART_TYPE, ChartType } from '../explorer/explorer_constants'; +import type { ChartRecord } from '../explorer/explorer_utils'; +import { RecordsForCriteria, ScheduledEventsByBucket } from './results_service/result_service_rx'; +import { isPopulatedObject } from '../../../common/util/object_utils'; +import type { ExplorerService } from '../explorer/explorer_dashboard_service'; +import { AnomalyRecordDoc } from '../../../common/types/anomalies'; +import { + ExplorerChartsData, + getDefaultChartsData, +} from '../explorer/explorer_charts/explorer_charts_container_service'; +import { TimeRangeBounds } from '../util/time_buckets'; +import { isDefined } from '../../../common/types/guards'; +const CHART_MAX_POINTS = 500; +const ANOMALIES_MAX_RESULTS = 500; +const MAX_SCHEDULED_EVENTS = 10; // Max number of scheduled events displayed per bucket. +const ML_TIME_FIELD_NAME = 'timestamp'; +const USE_OVERALL_CHART_LIMITS = false; +const MAX_CHARTS_PER_ROW = 4; + +interface ChartPoint { + date: number; + anomalyScore?: number; + actual?: number[]; + multiBucketImpact?: number; + typical?: number[]; + value?: number | null; + entity?: string; + byFieldName?: string; + numberOfCauses?: number; + scheduledEvents?: any[]; +} +interface MetricData { + results: Record; + success: boolean; +} +interface SeriesConfig { + jobId: JobId; + detectorIndex: number; + metricFunction: ML_JOB_AGGREGATION.LAT_LONG | ES_AGGREGATION | null; + timeField: string; + interval: string; + datafeedConfig: Datafeed; + summaryCountFieldName?: string; + metricFieldName?: string; +} + +interface InfoTooltip { + jobId: JobId; + aggregationInterval?: string; + chartFunction: string; + entityFields: EntityField[]; +} +export interface SeriesConfigWithMetadata extends SeriesConfig { + functionDescription?: string; + bucketSpanSeconds: number; + detectorLabel?: string; + fieldName: string; + entityFields: EntityField[]; + infoTooltip?: InfoTooltip; + loading?: boolean; + chartData?: ChartPoint[] | null; + mapData?: Array; +} + +export const isSeriesConfigWithMetadata = (arg: unknown): arg is SeriesConfigWithMetadata => { + return ( + isPopulatedObject(arg) && + {}.hasOwnProperty.call(arg, 'bucketSpanSeconds') && + {}.hasOwnProperty.call(arg, 'detectorLabel') + ); +}; + +interface ChartRange { + min: number; + max: number; +} + +export const DEFAULT_MAX_SERIES_TO_PLOT = 6; + +/** + * Service for retrieving anomaly explorer charts data. + */ +export class AnomalyExplorerChartsService { + private _customTimeRange: TimeRange | undefined; + + constructor( + private timeFilter: TimefilterContract, + private mlApiServices: MlApiServices, + private mlResultsService: MlResultsService + ) { + this.timeFilter.enableTimeRangeSelector(); + } + + public setTimeRange(timeRange: TimeRange) { + this._customTimeRange = timeRange; + } + + public getTimeBounds(): TimeRangeBounds { + return this._customTimeRange !== undefined + ? this.timeFilter.calculateBounds(this._customTimeRange) + : this.timeFilter.getBounds(); + } + + public calculateChartRange( + seriesConfigs: SeriesConfigWithMetadata[], + selectedEarliestMs: number, + selectedLatestMs: number, + chartWidth: number, + recordsToPlot: ChartRecord[], + timeFieldName: string, + timeFilter: TimefilterContract + ) { + let tooManyBuckets = false; + // Calculate the time range for the charts. + // Fit in as many points in the available container width plotted at the job bucket span. + // Look for the chart with the shortest bucket span as this determines + // the length of the time range that can be plotted. + const midpointMs = Math.ceil((selectedEarliestMs + selectedLatestMs) / 2); + const minBucketSpanMs = Math.min.apply(null, map(seriesConfigs, 'bucketSpanSeconds')) * 1000; + const maxBucketSpanMs = Math.max.apply(null, map(seriesConfigs, 'bucketSpanSeconds')) * 1000; + + const pointsToPlotFullSelection = Math.ceil( + (selectedLatestMs - selectedEarliestMs) / minBucketSpanMs + ); + + // Optimally space points 5px apart. + const optimumPointSpacing = 5; + const optimumNumPoints = chartWidth / optimumPointSpacing; + + // Increase actual number of points if we can't plot the selected range + // at optimal point spacing. + const plotPoints = Math.max(optimumNumPoints, pointsToPlotFullSelection); + const halfPoints = Math.ceil(plotPoints / 2); + const bounds = timeFilter.getActiveBounds(); + const boundsMin = bounds?.min ? bounds.min.valueOf() : undefined; + let chartRange: ChartRange = { + min: boundsMin + ? Math.max(midpointMs - halfPoints * minBucketSpanMs, boundsMin) + : midpointMs - halfPoints * minBucketSpanMs, + max: bounds?.max + ? Math.min(midpointMs + halfPoints * minBucketSpanMs, bounds.max.valueOf()) + : midpointMs + halfPoints * minBucketSpanMs, + }; + + if (plotPoints > CHART_MAX_POINTS) { + // For each series being plotted, display the record with the highest score if possible. + const maxTimeSpan = minBucketSpanMs * CHART_MAX_POINTS; + let minMs = recordsToPlot[0][timeFieldName]; + let maxMs = recordsToPlot[0][timeFieldName]; + + each(recordsToPlot, (record) => { + const diffMs = maxMs - minMs; + if (diffMs < maxTimeSpan) { + const recordTime = record[timeFieldName]; + if (recordTime < minMs) { + if (maxMs - recordTime <= maxTimeSpan) { + minMs = recordTime; + } + } + + if (recordTime > maxMs) { + if (recordTime - minMs <= maxTimeSpan) { + maxMs = recordTime; + } + } + } + }); + + if (maxMs - minMs < maxTimeSpan) { + // Expand out before and after the span with the highest scoring anomalies, + // covering as much as the requested time span as possible. + // Work out if the high scoring region is nearer the start or end of the selected time span. + const diff = maxTimeSpan - (maxMs - minMs); + if (minMs - 0.5 * diff <= selectedEarliestMs) { + minMs = Math.max(selectedEarliestMs, minMs - 0.5 * diff); + maxMs = minMs + maxTimeSpan; + } else { + maxMs = Math.min(selectedLatestMs, maxMs + 0.5 * diff); + minMs = maxMs - maxTimeSpan; + } + } + + chartRange = { min: minMs, max: maxMs }; + } + + // Elasticsearch aggregation returns points at start of bucket, + // so align the min to the length of the longest bucket. + chartRange.min = Math.floor(chartRange.min / maxBucketSpanMs) * maxBucketSpanMs; + if (boundsMin !== undefined && chartRange.min < boundsMin) { + chartRange.min = chartRange.min + maxBucketSpanMs; + } + + if ( + (chartRange.min > selectedEarliestMs || chartRange.max < selectedLatestMs) && + chartRange.max - chartRange.min < selectedLatestMs - selectedEarliestMs + ) { + tooManyBuckets = true; + } + + return { + chartRange, + tooManyBuckets, + }; + } + + public buildConfigFromDetector(job: CombinedJob, detectorIndex: number) { + const analysisConfig = job.analysis_config; + const detector = analysisConfig.detectors[detectorIndex]; + + const config: SeriesConfig = { + jobId: job.job_id, + detectorIndex, + metricFunction: + detector.function === ML_JOB_AGGREGATION.LAT_LONG + ? ML_JOB_AGGREGATION.LAT_LONG + : mlFunctionToESAggregation(detector.function), + timeField: job.data_description.time_field, + interval: job.analysis_config.bucket_span, + datafeedConfig: job.datafeed_config, + summaryCountFieldName: job.analysis_config.summary_count_field_name, + metricFieldName: undefined, + }; + + if (detector.field_name !== undefined) { + config.metricFieldName = detector.field_name; + } + + // Extra checks if the job config uses a summary count field. + const summaryCountFieldName = analysisConfig.summary_count_field_name; + if ( + config.metricFunction === ES_AGGREGATION.COUNT && + summaryCountFieldName !== undefined && + summaryCountFieldName !== DOC_COUNT && + summaryCountFieldName !== _DOC_COUNT + ) { + // Check for a detector looking at cardinality (distinct count) using an aggregation. + // The cardinality field will be in: + // aggregations//aggregations//cardinality/field + // or aggs//aggs//cardinality/field + let cardinalityField; + const topAgg = get(job.datafeed_config, 'aggregations') || get(job.datafeed_config, 'aggs'); + if (topAgg !== undefined && Object.values(topAgg).length > 0) { + cardinalityField = + get(Object.values(topAgg)[0], [ + 'aggregations', + summaryCountFieldName, + ES_AGGREGATION.CARDINALITY, + 'field', + ]) || + get(Object.values(topAgg)[0], [ + 'aggs', + summaryCountFieldName, + ES_AGGREGATION.CARDINALITY, + 'field', + ]); + } + if ( + (detector.function === ML_JOB_AGGREGATION.NON_ZERO_COUNT || + detector.function === ML_JOB_AGGREGATION.LOW_NON_ZERO_COUNT || + detector.function === ML_JOB_AGGREGATION.HIGH_NON_ZERO_COUNT || + detector.function === ML_JOB_AGGREGATION.COUNT || + detector.function === ML_JOB_AGGREGATION.HIGH_COUNT || + detector.function === ML_JOB_AGGREGATION.LOW_COUNT) && + cardinalityField !== undefined + ) { + config.metricFunction = ES_AGGREGATION.CARDINALITY; + config.metricFieldName = undefined; + } else { + // For count detectors using summary_count_field, plot sum(summary_count_field_name) + config.metricFunction = ES_AGGREGATION.SUM; + config.metricFieldName = summaryCountFieldName; + } + } + + return config; + } + + public buildConfig(record: ChartRecord, job: CombinedJob): SeriesConfigWithMetadata { + const detectorIndex = record.detector_index; + const config: Omit< + SeriesConfigWithMetadata, + 'bucketSpanSeconds' | 'detectorLabel' | 'fieldName' | 'entityFields' | 'infoTooltip' + > = { + ...this.buildConfigFromDetector(job, detectorIndex), + }; + + const fullSeriesConfig: SeriesConfigWithMetadata = { + bucketSpanSeconds: 0, + entityFields: [], + fieldName: '', + ...config, + }; + // Add extra properties used by the explorer dashboard charts. + fullSeriesConfig.functionDescription = record.function_description; + + const parsedBucketSpan = parseInterval(job.analysis_config.bucket_span); + if (parsedBucketSpan !== null) { + fullSeriesConfig.bucketSpanSeconds = parsedBucketSpan.asSeconds(); + } + + fullSeriesConfig.detectorLabel = record.function; + const jobDetectors = job.analysis_config.detectors; + if (jobDetectors) { + fullSeriesConfig.detectorLabel = jobDetectors[detectorIndex].detector_description; + } else { + if (record.field_name !== undefined) { + fullSeriesConfig.detectorLabel += ` ${fullSeriesConfig.fieldName}`; + } + } + + if (record.field_name !== undefined) { + fullSeriesConfig.fieldName = record.field_name; + fullSeriesConfig.metricFieldName = record.field_name; + } + + // Add the 'entity_fields' i.e. the partition, by, over fields which + // define the metric series to be plotted. + fullSeriesConfig.entityFields = getEntityFieldList(record); + + if (record.function === ML_JOB_AGGREGATION.METRIC) { + fullSeriesConfig.metricFunction = mlFunctionToESAggregation(record.function_description); + } + + // Build the tooltip data for the chart info icon, showing further details on what is being plotted. + let functionLabel = `${config.metricFunction}`; + if ( + fullSeriesConfig.metricFieldName !== undefined && + fullSeriesConfig.metricFieldName !== null + ) { + functionLabel += ` ${fullSeriesConfig.metricFieldName}`; + } + + fullSeriesConfig.infoTooltip = { + jobId: record.job_id, + aggregationInterval: fullSeriesConfig.interval, + chartFunction: functionLabel, + entityFields: fullSeriesConfig.entityFields.map((f) => ({ + fieldName: f.fieldName, + fieldValue: f.fieldValue, + })), + }; + + return fullSeriesConfig; + } + public async getCombinedJobs(jobIds: string[]): Promise { + const combinedResults = await Promise.all( + // Getting only necessary job config and datafeed config without the stats + jobIds.map((jobId) => this.mlApiServices.jobs.jobForCloning(jobId)) + ); + const combinedJobs = combinedResults + .filter(isDefined) + .filter((r) => r.job !== undefined && r.datafeed !== undefined) + .map(({ job, datafeed }) => ({ ...job, datafeed_config: datafeed } as CombinedJob)); + return combinedJobs; + } + + public async getAnomalyData( + explorerService: ExplorerService | undefined, + combinedJobRecords: Record, + chartsContainerWidth: number, + anomalyRecords: ChartRecord[] | undefined, + selectedEarliestMs: number, + selectedLatestMs: number, + timefilter: TimefilterContract, + severity = 0, + maxSeries = DEFAULT_MAX_SERIES_TO_PLOT + ): Promise { + const data = getDefaultChartsData(); + + const containerWith = chartsContainerWidth + SWIM_LANE_LABEL_WIDTH; + if (anomalyRecords === undefined) return; + const filteredRecords = anomalyRecords.filter((record) => { + return Number(record.record_score) >= severity; + }); + const { records: allSeriesRecords, errors: errorMessages } = this.processRecordsForDisplay( + combinedJobRecords, + filteredRecords + ); + + if (!Array.isArray(allSeriesRecords)) return; + // Calculate the number of charts per row, depending on the width available, to a max of 4. + let chartsPerRow = Math.min(Math.max(Math.floor(containerWith / 550), 1), MAX_CHARTS_PER_ROW); + + // Expand the chart to full size if there's only one viewable chart + if (allSeriesRecords.length === 1 || maxSeries === 1) { + chartsPerRow = 1; + } + + // Expand the charts to not have blank space in the row if necessary + if (maxSeries < chartsPerRow) { + chartsPerRow = maxSeries; + } + + data.chartsPerRow = chartsPerRow; + + // Build the data configs of the anomalies to be displayed. + // TODO - implement paging? + // For now just take first 6 (or 8 if 4 charts per row). + const maxSeriesToPlot = maxSeries ?? Math.max(chartsPerRow * 2, 6); + const recordsToPlot = allSeriesRecords.slice(0, maxSeriesToPlot); + const hasGeoData = recordsToPlot.find( + (record) => (record.function_description || record.function) === ML_JOB_AGGREGATION.LAT_LONG + ); + const seriesConfigs = recordsToPlot.map((record) => + this.buildConfig(record, combinedJobRecords[record.job_id]) + ); + const seriesConfigsNoGeoData = []; + // initialize the charts with loading indicators + data.seriesToPlot = seriesConfigs.map((config) => ({ + ...config, + loading: true, + chartData: null, + })); + + const mapData: SeriesConfigWithMetadata[] = []; + + if (hasGeoData !== undefined) { + for (let i = 0; i < seriesConfigs.length; i++) { + const config = seriesConfigs[i]; + let records; + if ( + config.detectorLabel !== undefined && + config.detectorLabel.includes(ML_JOB_AGGREGATION.LAT_LONG) + ) { + if (config.entityFields.length) { + records = [ + recordsToPlot.find((record) => { + const entityFieldName = config.entityFields[0].fieldName; + const entityFieldValue = config.entityFields[0].fieldValue; + return (record[entityFieldName] && record[entityFieldName][0]) === entityFieldValue; + }), + ]; + } else { + records = recordsToPlot; + } + + mapData.push({ + ...config, + loading: false, + mapData: records, + }); + } else { + seriesConfigsNoGeoData.push(config); + } + } + } + + // Calculate the time range of the charts, which is a function of the chart width and max job bucket span. + data.tooManyBuckets = false; + const chartWidth = Math.floor(containerWith / chartsPerRow); + const { chartRange, tooManyBuckets } = this.calculateChartRange( + seriesConfigs as SeriesConfigWithMetadata[], + selectedEarliestMs, + selectedLatestMs, + chartWidth, + recordsToPlot, + data.timeFieldName, + timefilter + ); + data.tooManyBuckets = tooManyBuckets; + + if (errorMessages) { + data.errorMessages = errorMessages; + } + + if (explorerService) { + explorerService.setCharts({ ...data }); + } + if (seriesConfigs.length === 0) { + return data; + } + + // Query 1 - load the raw metric data. + function getMetricData( + mlResultsService: MlResultsService, + config: SeriesConfigWithMetadata, + range: ChartRange + ): Promise { + const { jobId, detectorIndex, entityFields, bucketSpanSeconds } = config; + + const job = combinedJobRecords[jobId]; + + // If the job uses aggregation or scripted fields, and if it's a config we don't support + // use model plot data if model plot is enabled + // else if source data can be plotted, use that, otherwise model plot will be available. + const useSourceData = isSourceDataChartableForDetector(job, detectorIndex); + if (useSourceData === true) { + const datafeedQuery = get(config, 'datafeedConfig.query', null); + return mlResultsService + .getMetricData( + Array.isArray(config.datafeedConfig.indices) + ? config.datafeedConfig.indices[0] + : config.datafeedConfig.indices, + entityFields, + datafeedQuery, + config.metricFunction, + config.metricFieldName, + config.summaryCountFieldName, + config.timeField, + range.min, + range.max, + bucketSpanSeconds * 1000, + config.datafeedConfig + ) + .toPromise(); + } else { + // Extract the partition, by, over fields on which to filter. + const criteriaFields: CriteriaField[] = []; + const detector = job.analysis_config.detectors[detectorIndex]; + if (detector.partition_field_name !== undefined) { + const partitionEntity = find(entityFields, { + fieldName: detector.partition_field_name, + }); + if (partitionEntity !== undefined) { + criteriaFields.push( + { fieldName: 'partition_field_name', fieldValue: partitionEntity.fieldName }, + { fieldName: 'partition_field_value', fieldValue: partitionEntity.fieldValue } + ); + } + } + + if (detector.over_field_name !== undefined) { + const overEntity = find(entityFields, { fieldName: detector.over_field_name }); + if (overEntity !== undefined) { + criteriaFields.push( + { fieldName: 'over_field_name', fieldValue: overEntity.fieldName }, + { fieldName: 'over_field_value', fieldValue: overEntity.fieldValue } + ); + } + } + + if (detector.by_field_name !== undefined) { + const byEntity = find(entityFields, { fieldName: detector.by_field_name }); + if (byEntity !== undefined) { + criteriaFields.push( + { fieldName: 'by_field_name', fieldValue: byEntity.fieldName }, + { fieldName: 'by_field_value', fieldValue: byEntity.fieldValue } + ); + } + } + + return new Promise((resolve, reject) => { + const obj = { + success: true, + results: {} as Record, + }; + + return mlResultsService + .getModelPlotOutput( + jobId, + detectorIndex, + criteriaFields, + range.min, + range.max, + bucketSpanSeconds * 1000 + ) + .toPromise() + .then((resp) => { + // Return data in format required by the explorer charts. + const results = resp.results; + Object.keys(results).forEach((time) => { + obj.results[time] = results[time].actual; + }); + resolve(obj); + }) + .catch((resp) => { + reject(resp); + }); + }); + } + } + + // Query 2 - load the anomalies. + // Criteria to return the records for this series are the detector_index plus + // the specific combination of 'entity' fields i.e. the partition / by / over fields. + function getRecordsForCriteria( + mlResultsService: MlResultsService, + config: SeriesConfigWithMetadata, + range: ChartRange + ) { + let criteria: EntityField[] = []; + criteria.push({ fieldName: 'detector_index', fieldValue: config.detectorIndex }); + criteria = criteria.concat(config.entityFields); + return mlResultsService + .getRecordsForCriteria( + [config.jobId], + criteria, + 0, + range.min, + range.max, + ANOMALIES_MAX_RESULTS + ) + .toPromise(); + } + + // Query 3 - load any scheduled events for the job. + function getScheduledEvents( + mlResultsService: MlResultsService, + config: SeriesConfigWithMetadata, + range: ChartRange + ) { + return mlResultsService + .getScheduledEventsByBucket( + [config.jobId], + range.min, + range.max, + config.bucketSpanSeconds * 1000, + 1, + MAX_SCHEDULED_EVENTS + ) + .toPromise(); + } + + // Query 4 - load context data distribution + function getEventDistribution( + mlResultsService: MlResultsService, + config: SeriesConfigWithMetadata, + range: ChartRange + ) { + const chartType = getChartType(config); + + let splitField; + let filterField = null; + + // Define splitField and filterField based on chartType + if (chartType === CHART_TYPE.EVENT_DISTRIBUTION) { + splitField = config.entityFields.find((f) => f.fieldType === 'by'); + filterField = config.entityFields.find((f) => f.fieldType === 'partition'); + } else if (chartType === CHART_TYPE.POPULATION_DISTRIBUTION) { + splitField = config.entityFields.find((f) => f.fieldType === 'over'); + filterField = config.entityFields.find((f) => f.fieldType === 'partition'); + } + + const datafeedQuery = get(config, 'datafeedConfig.query', null); + return mlResultsService.getEventDistributionData( + Array.isArray(config.datafeedConfig.indices) + ? config.datafeedConfig.indices[0] + : config.datafeedConfig.indices, + splitField, + filterField, + datafeedQuery, + config.metricFunction, + config.metricFieldName, + config.timeField, + range.min, + range.max, + config.bucketSpanSeconds * 1000 + ); + } + + // first load and wait for required data, + // only after that trigger data processing and page render. + // TODO - if query returns no results e.g. source data has been deleted, + // display a message saying 'No data between earliest/latest'. + const seriesPromises: Array< + Promise<[MetricData, RecordsForCriteria, ScheduledEventsByBucket, any]> + > = []; + // Use seriesConfigs list without geo data config so indices match up after seriesPromises are resolved and we map through the responses + const seriesConfigsForPromises = hasGeoData ? seriesConfigsNoGeoData : seriesConfigs; + seriesConfigsForPromises.forEach((seriesConfig) => { + seriesPromises.push( + Promise.all([ + getMetricData(this.mlResultsService, seriesConfig, chartRange), + getRecordsForCriteria(this.mlResultsService, seriesConfig, chartRange), + getScheduledEvents(this.mlResultsService, seriesConfig, chartRange), + getEventDistribution(this.mlResultsService, seriesConfig, chartRange), + ]) + ); + }); + function processChartData( + response: [MetricData, RecordsForCriteria, ScheduledEventsByBucket, any], + seriesIndex: number + ) { + const metricData = response[0].results; + const records = response[1].records; + const jobId = seriesConfigsForPromises[seriesIndex].jobId; + const scheduledEvents = response[2].events[jobId]; + const eventDistribution = response[3]; + const chartType = getChartType(seriesConfigsForPromises[seriesIndex]); + + // Sort records in ascending time order matching up with chart data + records.sort((recordA, recordB) => { + return recordA[ML_TIME_FIELD_NAME] - recordB[ML_TIME_FIELD_NAME]; + }); + + // Return dataset in format used by the chart. + // i.e. array of Objects with keys date (timestamp), value, + // plus anomalyScore for points with anomaly markers. + let chartData: ChartPoint[] = []; + if (metricData !== undefined) { + if (eventDistribution.length > 0 && records.length > 0) { + const filterField = records[0].by_field_value || records[0].over_field_value; + chartData = eventDistribution.filter((d: { entity: any }) => d.entity !== filterField); + map(metricData, (value, time) => { + // The filtering for rare/event_distribution charts needs to be handled + // differently because of how the source data is structured. + // For rare chart values we are only interested wether a value is either `0` or not, + // `0` acts like a flag in the chart whether to display the dot/marker. + // All other charts (single metric, population) are metric based and with + // those a value of `null` acts as the flag to hide a data point. + if ( + (chartType === CHART_TYPE.EVENT_DISTRIBUTION && value > 0) || + (chartType !== CHART_TYPE.EVENT_DISTRIBUTION && value !== null) + ) { + chartData.push({ + date: +time, + value, + entity: filterField, + }); + } + }); + } else { + chartData = map(metricData, (value, time) => ({ + date: +time, + value, + })); + } + } + + // Iterate through the anomaly records, adding anomalyScore properties + // to the chartData entries for anomalous buckets. + const chartDataForPointSearch = getChartDataForPointSearch(chartData, records[0], chartType); + each(records, (record) => { + // Look for a chart point with the same time as the record. + // If none found, insert a point for anomalies due to a gap in the data. + const recordTime = record[ML_TIME_FIELD_NAME]; + let chartPoint = findChartPointForTime(chartDataForPointSearch, recordTime); + if (chartPoint === undefined) { + chartPoint = { date: recordTime, value: null }; + chartData.push(chartPoint); + } + if (chartPoint !== undefined) { + chartPoint.anomalyScore = record.record_score; + + if (record.actual !== undefined) { + chartPoint.actual = record.actual; + chartPoint.typical = record.typical; + } else { + const causes = get(record, 'causes', []); + if (causes.length > 0) { + chartPoint.byFieldName = record.by_field_name; + chartPoint.numberOfCauses = causes.length; + if (causes.length === 1) { + // If only a single cause, copy actual and typical values to the top level. + const cause = record.causes[0]; + chartPoint.actual = cause.actual; + chartPoint.typical = cause.typical; + } + } + } + + if (record.multi_bucket_impact !== undefined) { + chartPoint.multiBucketImpact = record.multi_bucket_impact; + } + } + }); + + // Add a scheduledEvents property to any points in the chart data set + // which correspond to times of scheduled events for the job. + if (scheduledEvents !== undefined) { + each(scheduledEvents, (events, time) => { + const chartPoint = findChartPointForTime(chartDataForPointSearch, Number(time)); + if (chartPoint !== undefined) { + // Note if the scheduled event coincides with an absence of the underlying metric data, + // we don't worry about plotting the event. + chartPoint.scheduledEvents = events; + } + }); + } + + return chartData; + } + + function getChartDataForPointSearch( + chartData: ChartPoint[], + record: AnomalyRecordDoc, + chartType: ChartType + ) { + if ( + chartType === CHART_TYPE.EVENT_DISTRIBUTION || + chartType === CHART_TYPE.POPULATION_DISTRIBUTION + ) { + return chartData.filter((d) => { + return d.entity === (record && (record.by_field_value || record.over_field_value)); + }); + } + + return chartData; + } + + function findChartPointForTime(chartData: ChartPoint[], time: number) { + return chartData.find((point) => point.date === time); + } + + return Promise.all(seriesPromises) + .then((response) => { + // calculate an overall min/max for all series + const processedData = response.map(processChartData); + const allDataPoints = reduce( + processedData, + (datapoints, series) => { + each(series, (d) => datapoints.push(d)); + return datapoints; + }, + [] as ChartPoint[] + ); + const overallChartLimits = chartLimits(allDataPoints); + + data.seriesToPlot = response.map((d, i) => { + return { + ...seriesConfigsForPromises[i], + loading: false, + chartData: processedData[i], + plotEarliest: chartRange.min, + plotLatest: chartRange.max, + selectedEarliest: selectedEarliestMs, + selectedLatest: selectedLatestMs, + chartLimits: USE_OVERALL_CHART_LIMITS + ? overallChartLimits + : chartLimits(processedData[i]), + }; + }); + + if (mapData.length) { + // push map data in if it's available + data.seriesToPlot.push(...mapData); + } + if (explorerService) { + explorerService.setCharts({ ...data }); + } + return Promise.resolve(data); + }) + .catch((error) => { + // eslint-disable-next-line no-console + console.error(error); + }); + } + + public processRecordsForDisplay( + jobRecords: Record, + anomalyRecords: RecordForInfluencer[] + ): { records: ChartRecord[]; errors: Record> | undefined } { + // Aggregate the anomaly data by detector, and entity (by/over/partition). + if (anomalyRecords.length === 0) { + return { records: [], errors: undefined }; + } + // Aggregate by job, detector, and analysis fields (partition, by, over). + const aggregatedData: Record = {}; + + const jobsErrorMessage: Record = {}; + each(anomalyRecords, (record) => { + // Check if we can plot a chart for this record, depending on whether the source data + // is chartable, and if model plot is enabled for the job. + + const job = jobRecords[record.job_id]; + + // if we already know this job has datafeed aggregations we cannot support + // no need to do more checks + if (jobsErrorMessage[record.job_id] !== undefined) { + return; + } + + let isChartable = + isSourceDataChartableForDetector(job, record.detector_index) || + isMappableJob(job, record.detector_index); + + if (isChartable === false) { + if (isModelPlotChartableForDetector(job, record.detector_index)) { + // Check if model plot is enabled for this job. + // Need to check the entity fields for the record in case the model plot config has a terms list. + const entityFields = getEntityFieldList(record); + if (isModelPlotEnabled(job, record.detector_index, entityFields)) { + isChartable = true; + } else { + isChartable = false; + jobsErrorMessage[record.job_id] = i18n.translate( + 'xpack.ml.timeSeriesJob.sourceDataNotChartableWithDisabledModelPlotMessage', + { + defaultMessage: + 'source data is not viewable for this detector and model plot is disabled', + } + ); + } + } else { + jobsErrorMessage[record.job_id] = i18n.translate( + 'xpack.ml.timeSeriesJob.sourceDataModelPlotNotChartableMessage', + { + defaultMessage: 'both source data and model plot are not chartable for this detector', + } + ); + } + } + + if (isChartable === false) { + return; + } + const jobId = record.job_id; + if (aggregatedData[jobId] === undefined) { + aggregatedData[jobId] = {}; + } + const detectorsForJob = aggregatedData[jobId]; + + const detectorIndex = record.detector_index; + if (detectorsForJob[detectorIndex] === undefined) { + detectorsForJob[detectorIndex] = {}; + } + + // TODO - work out how best to display results from detectors with just an over field. + const firstFieldName = + record.partition_field_name || record.by_field_name || record.over_field_name; + const firstFieldValue = + record.partition_field_value || record.by_field_value || record.over_field_value; + if (firstFieldName !== undefined && firstFieldValue !== undefined) { + const groupsForDetector = detectorsForJob[detectorIndex]; + + if (groupsForDetector[firstFieldName] === undefined) { + groupsForDetector[firstFieldName] = {}; + } + const valuesForGroup: Record = groupsForDetector[firstFieldName]; + if (valuesForGroup[firstFieldValue] === undefined) { + valuesForGroup[firstFieldValue] = {}; + } + + const dataForGroupValue = valuesForGroup[firstFieldValue]; + + let isSecondSplit = false; + if (record.partition_field_name !== undefined) { + const splitFieldName = record.over_field_name || record.by_field_name; + if (splitFieldName !== undefined) { + isSecondSplit = true; + } + } + + if (isSecondSplit === false) { + if (dataForGroupValue.maxScoreRecord === undefined) { + dataForGroupValue.maxScore = record.record_score; + dataForGroupValue.maxScoreRecord = record; + } else { + if (record.record_score > dataForGroupValue.maxScore) { + dataForGroupValue.maxScore = record.record_score; + dataForGroupValue.maxScoreRecord = record; + } + } + } else { + // Aggregate another level for the over or by field. + const secondFieldName = record.over_field_name || record.by_field_name; + const secondFieldValue = record.over_field_value || record.by_field_value; + + if (secondFieldName !== undefined && secondFieldValue !== undefined) { + if (dataForGroupValue[secondFieldName] === undefined) { + dataForGroupValue[secondFieldName] = {}; + } + + const splitsForGroup = dataForGroupValue[secondFieldName]; + if (splitsForGroup[secondFieldValue] === undefined) { + splitsForGroup[secondFieldValue] = {}; + } + + const dataForSplitValue = splitsForGroup[secondFieldValue]; + if (dataForSplitValue.maxScoreRecord === undefined) { + dataForSplitValue.maxScore = record.record_score; + dataForSplitValue.maxScoreRecord = record; + } else { + if (record.record_score > dataForSplitValue.maxScore) { + dataForSplitValue.maxScore = record.record_score; + dataForSplitValue.maxScoreRecord = record; + } + } + } + } + } else { + // Detector with no partition or by field. + const dataForDetector = detectorsForJob[detectorIndex]; + if (dataForDetector.maxScoreRecord === undefined) { + dataForDetector.maxScore = record.record_score; + dataForDetector.maxScoreRecord = record; + } else { + if (record.record_score > dataForDetector.maxScore) { + dataForDetector.maxScore = record.record_score; + dataForDetector.maxScoreRecord = record; + } + } + } + }); + + // Group job id by error message instead of by job: + const errorMessages: Record> | undefined = {}; + Object.keys(jobsErrorMessage).forEach((jobId) => { + const msg = jobsErrorMessage[jobId]; + if (errorMessages[msg] === undefined) { + errorMessages[msg] = new Set([jobId]); + } else { + errorMessages[msg].add(jobId); + } + }); + let recordsForSeries: ChartRecord[] = []; + // Convert to an array of the records with the highest record_score per unique series. + each(aggregatedData, (detectorsForJob) => { + each(detectorsForJob, (groupsForDetector) => { + if (groupsForDetector.errorMessage !== undefined) { + recordsForSeries.push(groupsForDetector.errorMessage); + } else { + if (groupsForDetector.maxScoreRecord !== undefined) { + // Detector with no partition / by field. + recordsForSeries.push(groupsForDetector.maxScoreRecord); + } else { + each(groupsForDetector, (valuesForGroup) => { + each(valuesForGroup, (dataForGroupValue) => { + if (dataForGroupValue.maxScoreRecord !== undefined) { + recordsForSeries.push(dataForGroupValue.maxScoreRecord); + } else { + // Second level of aggregation for partition and by/over. + each(dataForGroupValue, (splitsForGroup) => { + each(splitsForGroup, (dataForSplitValue) => { + recordsForSeries.push(dataForSplitValue.maxScoreRecord); + }); + }); + } + }); + }); + } + } + }); + }); + recordsForSeries = sortBy(recordsForSeries, 'record_score').reverse(); + + return { records: recordsForSeries, errors: errorMessages }; + } +} diff --git a/x-pack/plugins/ml/public/application/services/ml_results_service.ts b/x-pack/plugins/ml/public/application/services/ml_results_service.ts new file mode 100644 index 0000000000000..aafeb23f11f65 --- /dev/null +++ b/x-pack/plugins/ml/public/application/services/ml_results_service.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +export const createMlResultsServiceMock = () => ({ + getMetricData: jest.fn(), + getModelPlotOutput: jest.fn(), + getRecordsForCriteria: jest.fn(), + getScheduledEventsByBucket: jest.fn(), + fetchPartitionFieldsValues: jest.fn(), + getEventDistributionData: jest.fn(), +}); diff --git a/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts b/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts index a8ae42658f368..e07d49ca23d3b 100644 --- a/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts +++ b/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts @@ -69,8 +69,8 @@ export function resultsServiceRxProvider(mlApiServices: MlApiServices) { index: string, entityFields: any[], query: object | undefined, - metricFunction: string, // ES aggregation name - metricFieldName: string, + metricFunction: string | null, // ES aggregation name + metricFieldName: string | undefined, summaryCountFieldName: string | undefined, timeFieldName: string, earliestMs: number, @@ -243,7 +243,7 @@ export function resultsServiceRxProvider(mlApiServices: MlApiServices) { getModelPlotOutput( jobId: string, detectorIndex: number, - criteriaFields: any[], + criteriaFields: CriteriaField[], earliestMs: number, latestMs: number, intervalMs: number, diff --git a/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts b/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts index f9a2c1389c828..bb0cdc89904f8 100644 --- a/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts +++ b/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts @@ -7,7 +7,11 @@ import { IndicesOptions } from '../../../../common/types/anomaly_detection_jobs'; import { MlApiServices } from '../ml_api_service'; +import type { AnomalyRecordDoc } from '../../../../common/types/anomalies'; +import { InfluencersFilterQuery } from '../../../../common/types/es_client'; +import { EntityField } from '../../../../common/util/anomaly_utils'; +type RecordForInfluencer = AnomalyRecordDoc; export function resultsServiceProvider( mlApiServices: MlApiServices ): { @@ -27,7 +31,7 @@ export function resultsServiceProvider( perPage?: number, fromPage?: number, influencers?: any[], - influencersFilterQuery?: any + influencersFilterQuery?: InfluencersFilterQuery ): Promise; getTopInfluencerValues(): Promise; getOverallBucketScores( @@ -47,10 +51,10 @@ export function resultsServiceProvider( maxResults: number, perPage: number, fromPage: number, - influencersFilterQuery: any + influencersFilterQuery: InfluencersFilterQuery ): Promise; getRecordInfluencers(): Promise; - getRecordsForInfluencer(): Promise; + getRecordsForInfluencer(): Promise; getRecordsForDetector(): Promise; getRecords(): Promise; getEventRateData( @@ -64,11 +68,11 @@ export function resultsServiceProvider( ): Promise; getEventDistributionData( index: string, - splitField: string, - filterField: string, + splitField: EntityField | undefined | null, + filterField: EntityField | undefined | null, query: any, - metricFunction: string, // ES aggregation name - metricFieldName: string, + metricFunction: string | undefined | null, // ES aggregation name + metricFieldName: string | undefined, timeFieldName: string, earliestMs: number, latestMs: number, diff --git a/x-pack/plugins/ml/public/application/services/results_service/results_service.js b/x-pack/plugins/ml/public/application/services/results_service/results_service.js index 502692da39c96..fa0bcd6ea987d 100644 --- a/x-pack/plugins/ml/public/application/services/results_service/results_service.js +++ b/x-pack/plugins/ml/public/application/services/results_service/results_service.js @@ -1232,7 +1232,11 @@ export function resultsServiceProvider(mlApiServices) { }, }; - if (metricFieldName !== undefined && metricFieldName !== '') { + if ( + metricFieldName !== undefined && + metricFieldName !== '' && + typeof metricFunction === 'string' + ) { body.aggs.sample.aggs.byTime.aggs.entities.aggs = {}; const metricAgg = { diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.d.ts b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.d.ts index 9c4e56e292ed0..658926a5a96a9 100644 --- a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.d.ts +++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.d.ts @@ -6,8 +6,7 @@ */ import React from 'react'; - -import { TimeRangeBounds } from '../explorer/explorer_utils'; +import { TimeRangeBounds } from '../util/time_buckets'; interface Props { appStateHandler: (action: string, payload: any) => void; diff --git a/x-pack/plugins/ml/public/application/util/__mocks__/time_buckets.ts b/x-pack/plugins/ml/public/application/util/__mocks__/time_buckets.ts new file mode 100644 index 0000000000000..70e756933b86e --- /dev/null +++ b/x-pack/plugins/ml/public/application/util/__mocks__/time_buckets.ts @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export const timeBucketsMock = { + setBarTarget: jest.fn(), + setMaxBars: jest.fn(), + setInterval: jest.fn(), + setBounds: jest.fn(), + getBounds: jest.fn(), + getInterval: jest.fn(), + getScaledDateFormat: jest.fn(), +}; diff --git a/x-pack/plugins/ml/public/application/util/chart_utils.d.ts b/x-pack/plugins/ml/public/application/util/chart_utils.d.ts index 1c94cc6e82f8b..ee85525ec00f4 100644 --- a/x-pack/plugins/ml/public/application/util/chart_utils.d.ts +++ b/x-pack/plugins/ml/public/application/util/chart_utils.d.ts @@ -5,4 +5,13 @@ * 2.0. */ +import type { ChartType } from '../explorer/explorer_constants'; + export declare function numTicksForDateFormat(axisWidth: number, dateFormat: string): number; +export declare function getChartType(config: any): ChartType; +export declare function chartLimits( + data: any[] +): { + min: number; + max: number; +}; diff --git a/x-pack/plugins/ml/public/application/util/chart_utils.js b/x-pack/plugins/ml/public/application/util/chart_utils.js index 5ffe2fe86ec32..9b5cab41f24e2 100644 --- a/x-pack/plugins/ml/public/application/util/chart_utils.js +++ b/x-pack/plugins/ml/public/application/util/chart_utils.js @@ -9,7 +9,6 @@ import d3 from 'd3'; import { calculateTextWidth } from './string_utils'; import { MULTI_BUCKET_IMPACT } from '../../../common/constants/multi_bucket_impact'; import moment from 'moment'; -import { getTimefilter } from './dependency_cache'; import { CHART_TYPE } from '../explorer/explorer_constants'; import { ML_PAGES } from '../../../common/constants/ml_url_generator'; @@ -220,10 +219,9 @@ export function getChartType(config) { return chartType; } -export async function getExploreSeriesLink(mlUrlGenerator, series) { +export async function getExploreSeriesLink(mlUrlGenerator, series, timefilter) { // Open the Single Metric dashboard over the same overall bounds and // zoomed in to the same time as the current chart. - const timefilter = getTimefilter(); const bounds = timefilter.getActiveBounds(); const from = bounds.min.toISOString(); // e.g. 2016-02-08T16:00:00.000Z const to = bounds.max.toISOString(); diff --git a/x-pack/plugins/ml/public/application/util/recently_accessed.ts b/x-pack/plugins/ml/public/application/util/recently_accessed.ts index 0967d4a0587e3..88f78946bf7b4 100644 --- a/x-pack/plugins/ml/public/application/util/recently_accessed.ts +++ b/x-pack/plugins/ml/public/application/util/recently_accessed.ts @@ -9,9 +9,15 @@ import { i18n } from '@kbn/i18n'; +import type { ChromeRecentlyAccessed } from 'kibana/public'; import { getRecentlyAccessed } from './dependency_cache'; -export function addItemToRecentlyAccessed(page: string, itemId: string, url: string) { +export function addItemToRecentlyAccessed( + page: string, + itemId: string, + url: string, + recentlyAccessedService?: ChromeRecentlyAccessed +) { let pageLabel = ''; let id = `ml-job-${itemId}`; @@ -39,6 +45,6 @@ export function addItemToRecentlyAccessed(page: string, itemId: string, url: str } url = url.startsWith('/') ? `/app/ml${url}` : `/app/ml/${page}/${url}`; - const recentlyAccessed = getRecentlyAccessed(); + const recentlyAccessed = recentlyAccessedService ?? getRecentlyAccessed(); recentlyAccessed.add(url, `ML - ${itemId} - ${pageLabel}`, id); } diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap b/x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap new file mode 100644 index 0000000000000..375b041c4db73 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap @@ -0,0 +1,58 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EmbeddableAnomalyChartsContainer should render explorer charts with a valid embeddable input 1`] = ` +Object { + "chartsData": Object { + "chartsPerRow": 2, + "errorMessages": undefined, + "seriesToPlot": Array [], + "timeFieldName": "@timestamp", + "tooManyBuckets": false, + }, + "id": "test-explorer-charts-embeddable", + "mlUrlGenerator": undefined, + "onSelectEntity": [Function], + "setSeverity": [Function], + "severity": Object { + "color": "#fe5050", + "display": "critical", + "val": 75, + }, + "showCharts": true, + "timeBuckets": TimeBuckets { + "_timeBucketsConfig": Object { + "dateFormat": undefined, + "dateFormat:scaled": undefined, + "histogram:barTarget": undefined, + "histogram:maxBars": undefined, + }, + "barTarget": undefined, + "maxBars": undefined, + }, + "timefilter": Object { + "calculateBounds": [MockFunction], + "createFilter": [MockFunction], + "disableAutoRefreshSelector": [MockFunction], + "disableTimeRangeSelector": [MockFunction], + "enableAutoRefreshSelector": [MockFunction], + "enableTimeRangeSelector": [MockFunction], + "getAbsoluteTime": [MockFunction], + "getActiveBounds": [MockFunction], + "getAutoRefreshFetch$": [MockFunction], + "getBounds": [MockFunction], + "getEnabledUpdated$": [MockFunction], + "getFetch$": [MockFunction], + "getRefreshInterval": [MockFunction], + "getRefreshIntervalDefaults": [MockFunction], + "getRefreshIntervalUpdate$": [MockFunction], + "getTime": [MockFunction], + "getTimeDefaults": [MockFunction], + "getTimeUpdate$": [MockFunction], + "isAutoRefreshSelectorEnabled": [MockFunction], + "isTimeRangeSelectorEnabled": [MockFunction], + "isTimeTouched": [MockFunction], + "setRefreshInterval": [MockFunction], + "setTime": [MockFunction], + }, +} +`; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable.tsx new file mode 100644 index 0000000000000..298abd4dcc241 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable.tsx @@ -0,0 +1,135 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { Suspense } from 'react'; +import ReactDOM from 'react-dom'; +import { CoreStart } from 'kibana/public'; +import { i18n } from '@kbn/i18n'; +import { Subject } from 'rxjs'; +import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; +import { Embeddable, IContainer } from '../../../../../../src/plugins/embeddable/public'; +import { EmbeddableAnomalyChartsContainer } from './embeddable_anomaly_charts_container_lazy'; +import type { JobId } from '../../../common/types/anomaly_detection_jobs'; +import type { MlDependencies } from '../../application/app'; +import { + ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE, + AnomalyChartsEmbeddableInput, + AnomalyChartsEmbeddableOutput, + AnomalyChartsServices, +} from '..'; +import type { IndexPattern } from '../../../../../../src/plugins/data/common/index_patterns'; +import { EmbeddableLoading } from '../common/components/embeddable_loading_fallback'; +export const getDefaultExplorerChartsPanelTitle = (jobIds: JobId[]) => + i18n.translate('xpack.ml.anomalyChartsEmbeddable.title', { + defaultMessage: 'ML anomaly charts for {jobIds}', + values: { jobIds: jobIds.join(', ') }, + }); + +export type IAnomalyChartsEmbeddable = typeof AnomalyChartsEmbeddable; + +export class AnomalyChartsEmbeddable extends Embeddable< + AnomalyChartsEmbeddableInput, + AnomalyChartsEmbeddableOutput +> { + private node?: HTMLElement; + private reload$ = new Subject(); + public readonly type: string = ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE; + + constructor( + initialInput: AnomalyChartsEmbeddableInput, + public services: [CoreStart, MlDependencies, AnomalyChartsServices], + parent?: IContainer + ) { + super( + initialInput, + { + defaultTitle: initialInput.title, + }, + parent + ); + this.initializeOutput(initialInput); + } + + private async initializeOutput(initialInput: AnomalyChartsEmbeddableInput) { + const { anomalyExplorerService } = this.services[2]; + const { jobIds } = initialInput; + + try { + const jobs = await anomalyExplorerService.getCombinedJobs(jobIds); + const indexPatternsService = this.services[1].data.indexPatterns; + + // First get list of unique indices from the selected jobs + const indices = new Set(jobs.map((j) => j.datafeed_config.indices).flat()); + + // Then find the index patterns assuming the index pattern title matches the index name + const indexPatterns: Record = {}; + for (const indexName of indices) { + const response = await indexPatternsService.find(`"${indexName}"`); + + const indexPattern = response.find( + (obj) => obj.title.toLowerCase() === indexName.toLowerCase() + ); + if (indexPattern !== undefined) { + indexPatterns[indexPattern.id!] = indexPattern; + } + } + + this.updateOutput({ + ...this.getOutput(), + indexPatterns: Object.values(indexPatterns), + }); + } catch (e) { + // Unable to find and load index pattern but we can ignore the error + // as we only load it to support the filter & query bar + // the visualizations should still work correctly + + // eslint-disable-next-line no-console + console.error(`Unable to load index patterns for ${jobIds}`, e); + } + } + + public render(node: HTMLElement) { + super.render(node); + this.node = node; + + const I18nContext = this.services[0].i18n.Context; + + ReactDOM.render( + + + }> + + + + , + node + ); + } + + public destroy() { + super.destroy(); + if (this.node) { + ReactDOM.unmountComponentAtNode(this.node); + } + } + + public reload() { + this.reload$.next(); + } + + public supportedTriggers() { + return []; + } +} diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable_factory.test.ts b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable_factory.test.ts new file mode 100644 index 0000000000000..441ac145e1bd4 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable_factory.test.ts @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { AnomalyChartsEmbeddableFactory } from './anomaly_charts_embeddable_factory'; +import { coreMock } from '../../../../../../src/core/public/mocks'; +import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks'; +import { AnomalyChartsEmbeddable } from './anomaly_charts_embeddable'; +import { AnomalyChartsEmbeddableInput } from '..'; + +jest.mock('./anomaly_charts_embeddable', () => ({ + AnomalyChartsEmbeddable: jest.fn(), +})); + +describe('AnomalyChartsEmbeddableFactory', () => { + test('should provide required services on create', async () => { + // arrange + const pluginStartDeps = { data: dataPluginMock.createStartContract() }; + + const getStartServices = coreMock.createSetup({ + pluginStartDeps, + }).getStartServices; + + const [coreStart, pluginsStart] = await getStartServices(); + + // act + const factory = new AnomalyChartsEmbeddableFactory(getStartServices); + + await factory.create({ + jobIds: ['test-job'], + maxSeriesToPlot: 4, + } as AnomalyChartsEmbeddableInput); + + // assert + const mockCalls = ((AnomalyChartsEmbeddable as unknown) as jest.Mock) + .mock.calls[0]; + const input = mockCalls[0]; + const createServices = mockCalls[1]; + + expect(input).toEqual({ + jobIds: ['test-job'], + maxSeriesToPlot: 4, + }); + expect(Object.keys(createServices[0])).toEqual(Object.keys(coreStart)); + expect(createServices[1]).toMatchObject(pluginsStart); + expect(Object.keys(createServices[2])).toEqual([ + 'anomalyDetectorService', + 'anomalyExplorerService', + 'mlResultsService', + ]); + }); +}); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable_factory.ts b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable_factory.ts new file mode 100644 index 0000000000000..ac5ff2094e22b --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_embeddable_factory.ts @@ -0,0 +1,89 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +import type { StartServicesAccessor } from 'kibana/public'; + +import type { + EmbeddableFactoryDefinition, + IContainer, +} from '../../../../../../src/plugins/embeddable/public'; +import { HttpService } from '../../application/services/http_service'; +import type { MlPluginStart, MlStartDependencies } from '../../plugin'; +import type { MlDependencies } from '../../application/app'; +import { + ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE, + AnomalyChartsEmbeddableInput, + AnomalyChartsEmbeddableServices, +} from '..'; +import { AnomalyExplorerChartsService } from '../../application/services/anomaly_explorer_charts_service'; + +export class AnomalyChartsEmbeddableFactory + implements EmbeddableFactoryDefinition { + public readonly type = ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE; + + constructor( + private getStartServices: StartServicesAccessor + ) {} + + public async isEditable() { + return true; + } + + public getDisplayName() { + return i18n.translate('xpack.ml.components.mlAnomalyExplorerEmbeddable.displayName', { + defaultMessage: 'ML anomaly chart', + }); + } + + public async getExplicitInput(): Promise> { + const [coreStart] = await this.getServices(); + + try { + const { resolveEmbeddableAnomalyChartsUserInput } = await import( + './anomaly_charts_setup_flyout' + ); + return await resolveEmbeddableAnomalyChartsUserInput(coreStart); + } catch (e) { + return Promise.reject(); + } + } + + private async getServices(): Promise { + const [coreStart, pluginsStart] = await this.getStartServices(); + + const { AnomalyDetectorService } = await import( + '../../application/services/anomaly_detector_service' + ); + const { mlApiServicesProvider } = await import('../../application/services/ml_api_service'); + const { mlResultsServiceProvider } = await import('../../application/services/results_service'); + + const httpService = new HttpService(coreStart.http); + const anomalyDetectorService = new AnomalyDetectorService(httpService); + const mlApiServices = mlApiServicesProvider(httpService); + const mlResultsService = mlResultsServiceProvider(mlApiServices); + + const anomalyExplorerService = new AnomalyExplorerChartsService( + pluginsStart.data.query.timefilter.timefilter, + mlApiServices, + mlResultsService + ); + + return [ + coreStart, + pluginsStart as MlDependencies, + { anomalyDetectorService, anomalyExplorerService, mlResultsService }, + ]; + } + + public async create(initialInput: AnomalyChartsEmbeddableInput, parent?: IContainer) { + const services = await this.getServices(); + const { AnomalyChartsEmbeddable } = await import('./anomaly_charts_embeddable'); + return new AnomalyChartsEmbeddable(initialInput, services, parent); + } +} diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.test.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.test.tsx new file mode 100644 index 0000000000000..1473a599c2c4b --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.test.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { AnomalyChartsInitializer } from './anomaly_charts_initializer'; +import { I18nProvider } from '@kbn/i18n/react'; +import React from 'react'; +import { getDefaultExplorerChartsPanelTitle } from './anomaly_charts_embeddable'; +const defaultOptions = { wrapper: I18nProvider }; + +describe('AnomalyChartsInitializer', () => { + test('should render anomaly charts initializer', async () => { + const onCreate = jest.fn(); + const onCancel = jest.fn(); + + const jobIds = ['test-job']; + const defaultTitle = getDefaultExplorerChartsPanelTitle(jobIds); + const input = { + maxSeriesToPlot: 12, + }; + const { getByTestId } = render( + onCreate(params)} + onCancel={onCancel} + />, + defaultOptions + ); + const confirmButton = screen.getByText(/Confirm/i).closest('button'); + expect(confirmButton).toBeDefined(); + expect(onCreate).toHaveBeenCalledTimes(0); + + userEvent.click(confirmButton!); + expect(onCreate).toHaveBeenCalledWith({ + panelTitle: defaultTitle, + maxSeriesToPlot: input.maxSeriesToPlot, + }); + + userEvent.clear(await getByTestId('panelTitleInput')); + expect(confirmButton).toHaveAttribute('disabled'); + }); +}); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.tsx new file mode 100644 index 0000000000000..f32446fd6d9ab --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.tsx @@ -0,0 +1,132 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { FC, useState } from 'react'; +import { + EuiButton, + EuiButtonEmpty, + EuiForm, + EuiFormRow, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiFieldNumber, + EuiFieldText, + EuiModal, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { AnomalyChartsEmbeddableInput } from '..'; +import { DEFAULT_MAX_SERIES_TO_PLOT } from '../../application/services/anomaly_explorer_charts_service'; + +const MAX_SERIES_ALLOWED = 48; +export interface AnomalyChartsInitializerProps { + defaultTitle: string; + initialInput?: Partial>; + onCreate: (props: { panelTitle: string; maxSeriesToPlot?: number }) => void; + onCancel: () => void; +} + +export const AnomalyChartsInitializer: FC = ({ + defaultTitle, + initialInput, + onCreate, + onCancel, +}) => { + const [panelTitle, setPanelTitle] = useState(defaultTitle); + const [maxSeriesToPlot, setMaxSeriesToPlot] = useState( + initialInput?.maxSeriesToPlot ?? DEFAULT_MAX_SERIES_TO_PLOT + ); + + const isPanelTitleValid = panelTitle.length > 0; + + const isFormValid = isPanelTitleValid && maxSeriesToPlot > 0; + return ( + + + +

+ +

+ + + + + + + } + isInvalid={!isPanelTitleValid} + > + setPanelTitle(e.target.value)} + isInvalid={!isPanelTitleValid} + /> + + + + } + > + setMaxSeriesToPlot(parseInt(e.target.value, 10))} + min={0} + max={MAX_SERIES_ALLOWED} + /> + + + + + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_setup_flyout.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_setup_flyout.tsx new file mode 100644 index 0000000000000..eb39ba4ab29aa --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_setup_flyout.tsx @@ -0,0 +1,57 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { CoreStart } from 'kibana/public'; +import { VIEW_BY_JOB_LABEL } from '../../application/explorer/explorer_constants'; +import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public'; +import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service'; +import { getDefaultExplorerChartsPanelTitle } from './anomaly_charts_embeddable'; +import { HttpService } from '../../application/services/http_service'; +import { AnomalyChartsEmbeddableInput } from '..'; +import { resolveJobSelection } from '../common/resolve_job_selection'; +import { AnomalyChartsInitializer } from './anomaly_charts_initializer'; + +export async function resolveEmbeddableAnomalyChartsUserInput( + coreStart: CoreStart, + input?: AnomalyChartsEmbeddableInput +): Promise> { + const { http, overlays } = coreStart; + + const anomalyDetectorService = new AnomalyDetectorService(new HttpService(http)); + + return new Promise(async (resolve, reject) => { + const { jobIds } = await resolveJobSelection(coreStart, input?.jobIds); + + const title = input?.title ?? getDefaultExplorerChartsPanelTitle(jobIds); + const jobs = await anomalyDetectorService.getJobs$(jobIds).toPromise(); + const influencers = anomalyDetectorService.extractInfluencers(jobs); + influencers.push(VIEW_BY_JOB_LABEL); + + const modalSession = overlays.openModal( + toMountPoint( + { + modalSession.close(); + + resolve({ + jobIds, + title: panelTitle, + maxSeriesToPlot, + }); + }} + onCancel={() => { + modalSession.close(); + reject(); + }} + /> + ) + ); + }); +} diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.test.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.test.tsx new file mode 100644 index 0000000000000..7e4e91eb2ad0e --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.test.tsx @@ -0,0 +1,181 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { render } from '@testing-library/react'; +import { + EmbeddableAnomalyChartsContainer, + EmbeddableAnomalyChartsContainerProps, +} from './embeddable_anomaly_charts_container'; +import { BehaviorSubject, Observable, of } from 'rxjs'; +import { I18nProvider } from '@kbn/i18n/react'; +import { AnomalyChartsEmbeddable } from './anomaly_charts_embeddable'; +import { CoreStart } from 'kibana/public'; +import { useAnomalyChartsInputResolver } from './use_anomaly_charts_input_resolver'; +import { MlDependencies } from '../../application/app'; +import { TriggerContract } from 'src/plugins/ui_actions/public/triggers'; +import { AnomalyChartsEmbeddableInput, AnomalyChartsServices } from '..'; +import { ExplorerAnomaliesContainer } from '../../application/explorer/explorer_charts/explorer_anomalies_container'; +import { createMlResultsServiceMock } from '../../application/services/ml_results_service'; +import { createCoreStartMock } from '../../__mocks__/core_start'; +import { createMlStartDepsMock } from '../../__mocks__/ml_start_deps'; +import { createAnomalyExplorerChartsServiceMock } from '../../application/services/__mocks__/anomaly_explorer_charts_service'; +import { createAnomalyDetectorServiceMock } from '../../application/services/__mocks__/anomaly_detector_service'; + +jest.mock('./use_anomaly_charts_input_resolver', () => ({ + useAnomalyChartsInputResolver: jest.fn(() => { + return []; + }), +})); + +jest.mock('../../application/explorer/explorer_charts/explorer_anomalies_container', () => ({ + ExplorerAnomaliesContainer: jest.fn(() => { + return null; + }), +})); + +const defaultOptions = { wrapper: I18nProvider }; + +describe('EmbeddableAnomalyChartsContainer', () => { + let embeddableInput: BehaviorSubject>; + let refresh: BehaviorSubject; + let services: jest.Mocked<[CoreStart, MlDependencies, AnomalyChartsServices]>; + let embeddableContext: jest.Mocked; + let trigger: jest.Mocked; + + const onInputChange = jest.fn(); + const onOutputChange = jest.fn(); + + const mockedInput = { + viewMode: 'view', + filters: [], + hidePanelTitles: false, + query: { + language: 'lucene', + query: 'instance:i-d**', + }, + timeRange: { + from: 'now-3y', + to: 'now', + }, + refreshConfig: { + value: 0, + pause: true, + }, + id: 'b5b2f600-9c7e-4f7d-8b82-ee156fffad27', + searchSessionId: 'e8d052f8-0d9a-4d80-819d-fe18d9b314fa', + syncColors: true, + title: 'ML anomaly explorer charts for cw_multi_1', + jobIds: ['cw_multi_1'], + maxSeriesToPlot: 12, + enhancements: {}, + severity: 50, + severityThreshold: 75, + } as AnomalyChartsEmbeddableInput; + + beforeEach(() => { + // we only want to mock some of the functions needed + // @ts-ignore + embeddableContext = { + id: 'test-id', + getInput: jest.fn(), + }; + embeddableContext.getInput.mockReturnValue(mockedInput); + + embeddableInput = new BehaviorSubject({ + id: 'test-explorer-charts-embeddable', + } as Partial); + + trigger = ({ exec: jest.fn() } as unknown) as jest.Mocked; + + const mlStartMock = createMlStartDepsMock(); + mlStartMock.uiActions.getTrigger.mockReturnValue(trigger); + + const coreStartMock = createCoreStartMock(); + const anomalyDetectorServiceMock = createAnomalyDetectorServiceMock(); + + anomalyDetectorServiceMock.getJobs$.mockImplementation((jobId: string[]) => { + if (jobId.includes('invalid-job-id')) { + throw new Error('Invalid job'); + } + return of([ + { + job_id: 'cw_multi_1', + analysis_config: { bucket_span: '15m' }, + }, + ]); + }); + + services = ([ + coreStartMock, + mlStartMock, + { + anomalyDetectorService: anomalyDetectorServiceMock, + anomalyExplorerChartsService: createAnomalyExplorerChartsServiceMock(), + mlResultsService: createMlResultsServiceMock(), + }, + ] as unknown) as EmbeddableAnomalyChartsContainerProps['services']; + }); + + test('should render explorer charts with a valid embeddable input', async () => { + const chartsData = { + chartsPerRow: 2, + seriesToPlot: [], + tooManyBuckets: false, + timeFieldName: '@timestamp', + errorMessages: undefined, + }; + + (useAnomalyChartsInputResolver as jest.Mock).mockReturnValueOnce({ + chartsData, + isLoading: false, + error: undefined, + }); + + render( + } + services={services} + refresh={refresh} + onInputChange={onInputChange} + onOutputChange={onOutputChange} + />, + defaultOptions + ); + + const calledWith = ((ExplorerAnomaliesContainer as unknown) as jest.Mock< + typeof ExplorerAnomaliesContainer + >).mock.calls[0][0]; + + expect(calledWith).toMatchSnapshot(); + }); + + test('should render an error in case it could not fetch the ML charts data', async () => { + (useAnomalyChartsInputResolver as jest.Mock).mockReturnValueOnce({ + chartsData: undefined, + isLoading: false, + error: 'No anomalies', + }); + + const { findByText } = render( + } + services={services} + refresh={refresh} + onInputChange={onInputChange} + onOutputChange={onOutputChange} + />, + defaultOptions + ); + const errorMessage = await findByText('Unable to load the ML anomaly explorer data'); + expect(errorMessage).toBeDefined(); + }); +}); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx new file mode 100644 index 0000000000000..e1748bd21855b --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx @@ -0,0 +1,194 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { FC, useCallback, useState, useMemo, useEffect } from 'react'; +import { EuiCallOut, EuiLoadingChart, EuiResizeObserver, EuiText } from '@elastic/eui'; +import { Observable } from 'rxjs'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { throttle } from 'lodash'; +import { useAnomalyChartsInputResolver } from './use_anomaly_charts_input_resolver'; +import type { IAnomalyChartsEmbeddable } from './anomaly_charts_embeddable'; +import type { + AnomalyChartsEmbeddableInput, + AnomalyChartsEmbeddableOutput, + AnomalyChartsEmbeddableServices, +} from '..'; +import type { EntityField, EntityFieldOperation } from '../../../common/util/anomaly_utils'; + +import { ExplorerAnomaliesContainer } from '../../application/explorer/explorer_charts/explorer_anomalies_container'; +import { ML_APP_URL_GENERATOR } from '../../../common/constants/ml_url_generator'; +import { optionValueToThreshold } from '../../application/components/controls/select_severity/select_severity'; +import { ANOMALY_THRESHOLD } from '../../../common'; +import { UI_SETTINGS } from '../../../../../../src/plugins/data/common'; +import { TimeBuckets } from '../../application/util/time_buckets'; +import { EXPLORER_ENTITY_FIELD_SELECTION_TRIGGER } from '../../ui_actions/triggers'; + +const RESIZE_THROTTLE_TIME_MS = 500; + +export interface EmbeddableAnomalyChartsContainerProps { + id: string; + embeddableContext: InstanceType; + embeddableInput: Observable; + services: AnomalyChartsEmbeddableServices; + refresh: Observable; + onInputChange: (input: Partial) => void; + onOutputChange: (output: Partial) => void; +} + +export const EmbeddableAnomalyChartsContainer: FC = ({ + id, + embeddableContext, + embeddableInput, + services, + refresh, + onInputChange, + onOutputChange, +}) => { + const [chartWidth, setChartWidth] = useState(0); + const [severity, setSeverity] = useState( + optionValueToThreshold( + embeddableContext.getInput().severityThreshold ?? ANOMALY_THRESHOLD.WARNING + ) + ); + const [selectedEntities, setSelectedEntities] = useState(); + const [ + { uiSettings }, + { + data: dataServices, + share: { + urlGenerators: { getUrlGenerator }, + }, + uiActions, + }, + ] = services; + const { timefilter } = dataServices.query.timefilter; + + const mlUrlGenerator = useMemo(() => getUrlGenerator(ML_APP_URL_GENERATOR), [getUrlGenerator]); + + const timeBuckets = useMemo(() => { + return new TimeBuckets({ + 'histogram:maxBars': uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS), + 'histogram:barTarget': uiSettings.get(UI_SETTINGS.HISTOGRAM_BAR_TARGET), + dateFormat: uiSettings.get('dateFormat'), + 'dateFormat:scaled': uiSettings.get('dateFormat:scaled'), + }); + }, []); + + useEffect(() => { + onInputChange({ + severityThreshold: severity.val, + }); + onOutputChange({ + severity: severity.val, + entityFields: selectedEntities, + }); + }, [severity, selectedEntities]); + + const { chartsData, isLoading: isExplorerLoading, error } = useAnomalyChartsInputResolver( + embeddableInput, + onInputChange, + refresh, + services, + chartWidth, + severity.val + ); + const resizeHandler = useCallback( + throttle((e: { width: number; height: number }) => { + setChartWidth(e.width); + }, RESIZE_THROTTLE_TIME_MS), + [] + ); + + if (error) { + return ( + + } + color="danger" + iconType="alert" + style={{ width: '100%' }} + > +

{error.message}

+ + ); + } + + const addEntityFieldFilter = ( + fieldName: string, + fieldValue: string, + operation: EntityFieldOperation + ) => { + const entity: EntityField = { + fieldName, + fieldValue, + operation, + }; + const uniqueSelectedEntities = [entity]; + setSelectedEntities(uniqueSelectedEntities); + uiActions.getTrigger(EXPLORER_ENTITY_FIELD_SELECTION_TRIGGER).exec({ + embeddable: embeddableContext, + data: uniqueSelectedEntities, + }); + }; + + return ( + + {(resizeRef) => ( +
+ {isExplorerLoading && ( + + + + )} + {chartsData !== undefined && isExplorerLoading === false && ( + + )} +
+ )} + + ); +}; + +// required for dynamic import using React.lazy() +// eslint-disable-next-line import/no-default-export +export default EmbeddableAnomalyChartsContainer; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container_lazy.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container_lazy.tsx new file mode 100644 index 0000000000000..38f48ea4a018b --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container_lazy.tsx @@ -0,0 +1,12 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +export const EmbeddableAnomalyChartsContainer = React.lazy( + () => import('./embeddable_anomaly_charts_container') +); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/index.ts b/x-pack/plugins/ml/public/embeddables/anomaly_charts/index.ts new file mode 100644 index 0000000000000..7ee763b893367 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export { AnomalyChartsEmbeddableFactory } from './anomaly_charts_embeddable_factory'; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/use_anomaly_charts_input_resolver.test.ts b/x-pack/plugins/ml/public/embeddables/anomaly_charts/use_anomaly_charts_input_resolver.test.ts new file mode 100644 index 0000000000000..efac51edda69f --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/use_anomaly_charts_input_resolver.test.ts @@ -0,0 +1,219 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { renderHook, act } from '@testing-library/react-hooks'; +import { BehaviorSubject, Observable, of, Subject } from 'rxjs'; +import { AnomalyChartsEmbeddableInput, AnomalyChartsServices } from '../types'; +import { CoreStart } from 'kibana/public'; +import { MlStartDependencies } from '../../plugin'; +import { useAnomalyChartsInputResolver } from './use_anomaly_charts_input_resolver'; +import { EmbeddableAnomalyChartsContainerProps } from './embeddable_anomaly_charts_container'; +import moment from 'moment'; +import { createMlResultsServiceMock } from '../../application/services/ml_results_service'; +import { createCoreStartMock } from '../../__mocks__/core_start'; +import { createMlStartDepsMock } from '../../__mocks__/ml_start_deps'; +import { createAnomalyExplorerChartsServiceMock } from '../../application/services/__mocks__/anomaly_explorer_charts_service'; +import { createAnomalyDetectorServiceMock } from '../../application/services/__mocks__/anomaly_detector_service'; + +jest.mock('../common/process_filters', () => ({ + processFilters: jest.fn(), +})); + +jest.mock('../../application/explorer/explorer_utils', () => ({ + getSelectionInfluencers: jest.fn(() => { + return []; + }), + getSelectionJobIds: jest.fn(() => ['test-job']), + getSelectionTimeRange: jest.fn(() => ({ earliestMs: 1521309543000, latestMs: 1616003942999 })), + loadDataForCharts: jest.fn().mockImplementation(() => + Promise.resolve([ + { + job_id: 'cw_multi_1', + result_type: 'record', + probability: 6.057139142746412e-13, + multi_bucket_impact: -5, + record_score: 89.71961, + initial_record_score: 98.36826274948001, + bucket_span: 900, + detector_index: 0, + is_interim: false, + timestamp: 1572892200000, + partition_field_name: 'instance', + partition_field_value: 'i-d17dcd4c', + function: 'mean', + function_description: 'mean', + typical: [1.6177685422858146], + actual: [7.235333333333333], + field_name: 'CPUUtilization', + influencers: [ + { + influencer_field_name: 'region', + influencer_field_values: ['sa-east-1'], + }, + { + influencer_field_name: 'instance', + influencer_field_values: ['i-d17dcd4c'], + }, + ], + instance: ['i-d17dcd4c'], + region: ['sa-east-1'], + }, + ]) + ), +})); + +describe('useAnomalyChartsInputResolver', () => { + let embeddableInput: BehaviorSubject>; + let refresh: Subject; + let services: [CoreStart, MlStartDependencies, AnomalyChartsServices]; + let onInputChange: jest.Mock; + + const start = moment().subtract(1, 'years'); + const end = moment(); + + beforeEach(() => { + jest.useFakeTimers(); + + const jobIds = ['test-job']; + embeddableInput = new BehaviorSubject({ + id: 'test-explorer-charts-embeddable', + jobIds, + filters: [], + query: { language: 'kuery', query: '' }, + maxSeriesToPlot: 12, + timeRange: { + from: 'now-3y', + to: 'now', + }, + } as Partial); + + refresh = new Subject(); + const anomalyExplorerChartsServiceMock = createAnomalyExplorerChartsServiceMock(); + + anomalyExplorerChartsServiceMock.getTimeBounds.mockReturnValue({ + min: start, + max: end, + }); + + anomalyExplorerChartsServiceMock.getCombinedJobs.mockImplementation(() => + Promise.resolve( + jobIds.map((jobId) => ({ job_id: jobId, analysis_config: {}, datafeed_config: {} })) + ) + ); + + anomalyExplorerChartsServiceMock.getAnomalyData.mockImplementation(() => + Promise.resolve({ + chartsPerRow: 2, + seriesToPlot: [], + tooManyBuckets: false, + timeFieldName: '@timestamp', + errorMessages: undefined, + }) + ); + + const coreStartMock = createCoreStartMock(); + const mlStartMock = createMlStartDepsMock(); + + const anomalyDetectorServiceMock = createAnomalyDetectorServiceMock(); + anomalyDetectorServiceMock.getJobs$.mockImplementation((jobId: string[]) => { + if (jobId.includes('invalid-job-id')) { + throw new Error('Invalid job'); + } + return of([ + { + job_id: 'cw_multi_1', + analysis_config: { bucket_span: '15m' }, + }, + ]); + }); + + services = ([ + coreStartMock, + mlStartMock, + { + anomalyDetectorService: anomalyDetectorServiceMock, + anomalyExplorerService: anomalyExplorerChartsServiceMock, + mlResultsService: createMlResultsServiceMock(), + }, + ] as unknown) as EmbeddableAnomalyChartsContainerProps['services']; + + onInputChange = jest.fn(); + }); + afterEach(() => { + jest.useRealTimers(); + jest.clearAllMocks(); + }); + + test('should fetch jobs only when input job ids have been changed', async () => { + const { result, waitForNextUpdate } = renderHook(() => + useAnomalyChartsInputResolver( + embeddableInput as Observable, + onInputChange, + refresh, + services, + 1000, + 0 + ) + ); + + expect(result.current.chartsData).toBe(undefined); + expect(result.current.error).toBe(undefined); + expect(result.current.isLoading).toBe(true); + + await act(async () => { + jest.advanceTimersByTime(501); + await waitForNextUpdate(); + }); + + const explorerServices = services[2]; + + expect(explorerServices.anomalyDetectorService.getJobs$).toHaveBeenCalledTimes(1); + expect(explorerServices.anomalyExplorerService.getAnomalyData).toHaveBeenCalledTimes(1); + + await act(async () => { + embeddableInput.next({ + id: 'test-explorer-charts-embeddable', + jobIds: ['anotherJobId'], + filters: [], + query: { language: 'kuery', query: '' }, + maxSeriesToPlot: 6, + timeRange: { + from: 'now-3y', + to: 'now', + }, + }); + jest.advanceTimersByTime(501); + await waitForNextUpdate(); + }); + + expect(explorerServices.anomalyDetectorService.getJobs$).toHaveBeenCalledTimes(2); + expect(explorerServices.anomalyExplorerService.getAnomalyData).toHaveBeenCalledTimes(2); + }); + + test('should not complete the observable on error', async () => { + const { result } = renderHook(() => + useAnomalyChartsInputResolver( + embeddableInput as Observable, + onInputChange, + refresh, + services, + 1000, + 1 + ) + ); + + await act(async () => { + embeddableInput.next({ + id: 'test-explorer-charts-embeddable', + jobIds: ['invalid-job-id'], + filters: [], + query: { language: 'kuery', query: '' }, + } as Partial); + }); + expect(result.current.error).toBeDefined(); + }); +}); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/use_anomaly_charts_input_resolver.ts b/x-pack/plugins/ml/public/embeddables/anomaly_charts/use_anomaly_charts_input_resolver.ts new file mode 100644 index 0000000000000..b114ca89a3288 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/use_anomaly_charts_input_resolver.ts @@ -0,0 +1,192 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useEffect, useMemo, useState } from 'react'; +import { combineLatest, forkJoin, from, Observable, of, Subject } from 'rxjs'; +import { catchError, debounceTime, skipWhile, startWith, switchMap, tap } from 'rxjs/operators'; +import { CoreStart } from 'kibana/public'; +import { TimeBuckets } from '../../application/util/time_buckets'; +import { MlStartDependencies } from '../../plugin'; +import { UI_SETTINGS } from '../../../../../../src/plugins/data/public'; +import { + AppStateSelectedCells, + ExplorerJob, + getSelectionInfluencers, + getSelectionJobIds, + getSelectionTimeRange, + loadDataForCharts, +} from '../../application/explorer/explorer_utils'; +import { OVERALL_LABEL, SWIMLANE_TYPE } from '../../application/explorer/explorer_constants'; +import { parseInterval } from '../../../common/util/parse_interval'; +import { + AnomalyChartsEmbeddableInput, + AnomalyChartsEmbeddableOutput, + AnomalyChartsServices, +} from '..'; +import type { CombinedJob } from '../../../common/types/anomaly_detection_jobs'; +import type { ExplorerChartsData } from '../../application/explorer/explorer_charts/explorer_charts_container_service'; +import { processFilters } from '../common/process_filters'; +import { InfluencersFilterQuery } from '../../../common/types/es_client'; +import { getJobsObservable } from '../common/get_jobs_observable'; + +const FETCH_RESULTS_DEBOUNCE_MS = 500; + +export function useAnomalyChartsInputResolver( + embeddableInput: Observable, + onInputChange: (output: Partial) => void, + refresh: Observable, + services: [CoreStart, MlStartDependencies, AnomalyChartsServices], + chartWidth: number, + severity: number +): { chartsData: ExplorerChartsData; isLoading: boolean; error: Error | null | undefined } { + const [ + { uiSettings }, + { data: dataServices }, + { anomalyDetectorService, anomalyExplorerService, mlResultsService }, + ] = services; + const { timefilter } = dataServices.query.timefilter; + + const [chartsData, setChartsData] = useState(); + const [error, setError] = useState(); + const [isLoading, setIsLoading] = useState(false); + + const chartWidth$ = useMemo(() => new Subject(), []); + const severity$ = useMemo(() => new Subject(), []); + + const timeBuckets = useMemo(() => { + return new TimeBuckets({ + 'histogram:maxBars': uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS), + 'histogram:barTarget': uiSettings.get(UI_SETTINGS.HISTOGRAM_BAR_TARGET), + dateFormat: uiSettings.get('dateFormat'), + 'dateFormat:scaled': uiSettings.get('dateFormat:scaled'), + }); + }, []); + + useEffect(() => { + const subscription = combineLatest([ + getJobsObservable(embeddableInput, anomalyDetectorService, setError), + embeddableInput, + chartWidth$.pipe(skipWhile((v) => !v)), + severity$, + refresh.pipe(startWith(null)), + ]) + .pipe( + tap(setIsLoading.bind(null, true)), + debounceTime(FETCH_RESULTS_DEBOUNCE_MS), + switchMap(([jobs, input, embeddableContainerWidth, severityValue]) => { + if (!jobs) { + // couldn't load the list of jobs + return of(undefined); + } + + const { maxSeriesToPlot, timeRange: timeRangeInput, filters, query } = input; + + const viewBySwimlaneFieldName = OVERALL_LABEL; + + anomalyExplorerService.setTimeRange(timeRangeInput); + + const explorerJobs: ExplorerJob[] = jobs.map((job) => { + const bucketSpan = parseInterval(job.analysis_config.bucket_span); + return { + id: job.job_id, + selected: true, + bucketSpanSeconds: bucketSpan!.asSeconds(), + }; + }); + + let influencersFilterQuery: InfluencersFilterQuery; + try { + influencersFilterQuery = processFilters(filters, query); + } catch (e) { + // handle query syntax errors + setError(e); + return of(undefined); + } + + const bounds = anomalyExplorerService.getTimeBounds(); + + // Can be from input time range or from the timefilter bar + const selections: AppStateSelectedCells = { + lanes: [OVERALL_LABEL], + times: [bounds.min?.unix()!, bounds.max?.unix()!], + type: SWIMLANE_TYPE.OVERALL, + }; + + const selectionInfluencers = getSelectionInfluencers(selections, viewBySwimlaneFieldName); + + const jobIds = getSelectionJobIds(selections, explorerJobs); + + const bucketInterval = timeBuckets.getInterval(); + + const timeRange = getSelectionTimeRange(selections, bucketInterval.asSeconds(), bounds); + return forkJoin({ + combinedJobs: anomalyExplorerService.getCombinedJobs(jobIds), + anomalyChartRecords: loadDataForCharts( + mlResultsService, + jobIds, + timeRange.earliestMs, + timeRange.latestMs, + selectionInfluencers, + selections, + influencersFilterQuery, + false + ), + }).pipe( + switchMap(({ combinedJobs, anomalyChartRecords }) => { + const combinedJobRecords: Record< + string, + CombinedJob + > = (combinedJobs as CombinedJob[]).reduce((acc, job) => { + return { ...acc, [job.job_id]: job }; + }, {}); + + return forkJoin({ + chartsData: from( + anomalyExplorerService.getAnomalyData( + undefined, + combinedJobRecords, + embeddableContainerWidth, + anomalyChartRecords, + timeRange.earliestMs, + timeRange.latestMs, + timefilter, + severityValue, + maxSeriesToPlot + ) + ), + }); + }) + ); + }), + catchError((e) => { + setError(e.body); + return of(undefined); + }) + ) + .subscribe((results) => { + if (results !== undefined) { + setError(null); + setChartsData(results.chartsData); + setIsLoading(false); + } + }); + + return () => { + subscription.unsubscribe(); + }; + }, []); + + useEffect(() => { + chartWidth$.next(chartWidth); + }, [chartWidth]); + + useEffect(() => { + severity$.next(severity); + }, [severity]); + + return { chartsData, isLoading, error }; +} diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx index 50aa99e2b8d17..7f9e99f3a0c8e 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx @@ -22,8 +22,8 @@ import { AnomalySwimlaneEmbeddableOutput, AnomalySwimlaneServices, } from '..'; - -export const getDefaultPanelTitle = (jobIds: JobId[]) => +import { EmbeddableLoading } from '../common/components/embeddable_loading_fallback'; +export const getDefaultSwimlanePanelTitle = (jobIds: JobId[]) => i18n.translate('xpack.ml.swimlaneEmbeddable.title', { defaultMessage: 'ML anomaly swim lane for {jobIds}', values: { jobIds: jobIds.join(', ') }, @@ -62,7 +62,7 @@ export class AnomalySwimlaneEmbeddable extends Embeddable< ReactDOM.render( - + }> { const { jobIds } = await resolveJobSelection(coreStart, input?.jobIds); - const title = input?.title ?? getDefaultPanelTitle(jobIds); + const title = input?.title ?? getDefaultSwimlanePanelTitle(jobIds); const jobs = await anomalyDetectorService.getJobs$(jobIds).toPromise(); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.test.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.test.tsx index 560e373eb281c..00f4da09bbe0e 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.test.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.test.tsx @@ -19,9 +19,10 @@ import { useSwimlaneInputResolver } from './swimlane_input_resolver'; import { SWIMLANE_TYPE } from '../../application/explorer/explorer_constants'; import { SwimlaneContainer } from '../../application/explorer/swimlane_container'; import { MlDependencies } from '../../application/app'; -import { uiActionsPluginMock } from 'src/plugins/ui_actions/public/mocks'; import { TriggerContract } from 'src/plugins/ui_actions/public/triggers'; import { AnomalySwimlaneEmbeddableInput, AnomalySwimlaneServices } from '..'; +import { createCoreStartMock } from '../../__mocks__/core_start'; +import { createMlStartDepsMock } from '../../__mocks__/ml_start_deps'; jest.mock('./swimlane_input_resolver', () => ({ useSwimlaneInputResolver: jest.fn(() => { @@ -56,14 +57,12 @@ describe('ExplorerSwimlaneContainer', () => { trigger = ({ exec: jest.fn() } as unknown) as jest.Mocked; - const uiActionsMock = uiActionsPluginMock.createStartContract(); - uiActionsMock.getTrigger.mockReturnValue(trigger); + const mlStartMock = createMlStartDepsMock(); + mlStartMock.uiActions.getTrigger.mockReturnValue(trigger); services = ([ - {}, - { - uiActions: uiActionsMock, - }, + createCoreStartMock(), + mlStartMock, ] as unknown) as ExplorerSwimlaneContainerProps['services']; }); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx index fb47a2684a015..d671bff90b31f 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx @@ -47,6 +47,7 @@ export const EmbeddableSwimLaneContainer: FC = ( onOutputChange, }) => { const [chartWidth, setChartWidth] = useState(0); + const [fromPage, setFromPage] = useState(1); const [{}, { uiActions }] = services; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts index 3fffd1588b9b9..4d2e2406376e2 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts @@ -6,7 +6,7 @@ */ import { renderHook, act } from '@testing-library/react-hooks'; -import { processFilters, useSwimlaneInputResolver } from './swimlane_input_resolver'; +import { useSwimlaneInputResolver } from './swimlane_input_resolver'; import { BehaviorSubject, Observable, of, Subject } from 'rxjs'; import { SWIMLANE_TYPE } from '../../application/explorer/explorer_constants'; import { CoreStart, IUiSettingsClient } from 'kibana/public'; @@ -157,146 +157,3 @@ describe('useSwimlaneInputResolver', () => { expect(result.current[6]?.message).toBe('Invalid job'); }); }); - -describe('processFilters', () => { - test('should format embeddable input to es query', () => { - expect( - processFilters( - [ - { - meta: { - index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', - type: 'phrases', - key: 'instance', - value: 'i-20d061fa', - params: ['i-20d061fa'], - alias: null, - negate: false, - disabled: false, - }, - query: { - bool: { - should: [ - { - match_phrase: { - instance: 'i-20d061fa', - }, - }, - ], - minimum_should_match: 1, - }, - }, - $state: { - // @ts-ignore - store: 'appState', - }, - }, - { - meta: { - index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', - alias: null, - negate: true, - disabled: false, - type: 'phrase', - key: 'instance', - params: { - query: 'i-16fd8d2a', - }, - }, - query: { - match_phrase: { - instance: 'i-16fd8d2a', - }, - }, - - $state: { - // @ts-ignore - store: 'appState', - }, - }, - { - meta: { - index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', - alias: null, - negate: false, - disabled: false, - type: 'exists', - key: 'instance', - value: 'exists', - }, - exists: { - field: 'instance', - }, - $state: { - // @ts-ignore - store: 'appState', - }, - }, - { - meta: { - index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', - alias: null, - negate: false, - disabled: true, - type: 'exists', - key: 'instance', - value: 'exists', - }, - exists: { - field: 'region', - }, - $state: { - // @ts-ignore - store: 'appState', - }, - }, - ], - { - language: 'kuery', - query: 'instance : "i-088147ac"', - } - ) - ).toEqual({ - bool: { - must: [ - { - bool: { - minimum_should_match: 1, - should: [ - { - match_phrase: { - instance: 'i-088147ac', - }, - }, - ], - }, - }, - { - bool: { - should: [ - { - match_phrase: { - instance: 'i-20d061fa', - }, - }, - ], - minimum_should_match: 1, - }, - }, - { - exists: { - field: 'instance', - }, - }, - ], - must_not: [ - { - match_phrase: { - instance: 'i-16fd8d2a', - }, - }, - ], - }, - }); - }); -}); diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts index fa0cccda99d22..4574c7e859c08 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts @@ -7,13 +7,11 @@ import { useEffect, useMemo, useState } from 'react'; import { combineLatest, from, Observable, of, Subject } from 'rxjs'; -import { isEqual } from 'lodash'; import { catchError, debounceTime, distinctUntilChanged, map, - pluck, skipWhile, startWith, switchMap, @@ -28,39 +26,22 @@ import { SWIMLANE_TYPE, SwimlaneType, } from '../../application/explorer/explorer_constants'; -import { Filter } from '../../../../../../src/plugins/data/common/es_query/filters'; -import { Query } from '../../../../../../src/plugins/data/common/query'; -import { esKuery, UI_SETTINGS } from '../../../../../../src/plugins/data/public'; +import { UI_SETTINGS } from '../../../../../../src/plugins/data/public'; import { ExplorerJob, OverallSwimlaneData } from '../../application/explorer/explorer_utils'; import { parseInterval } from '../../../common/util/parse_interval'; -import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service'; import { isViewBySwimLaneData } from '../../application/explorer/swimlane_container'; import { ViewMode } from '../../../../../../src/plugins/embeddable/public'; -import { CONTROLLED_BY_SWIM_LANE_FILTER } from '../../ui_actions/constants'; import { AnomalySwimlaneEmbeddableInput, AnomalySwimlaneEmbeddableOutput, AnomalySwimlaneServices, } from '..'; +import { processFilters } from '../common/process_filters'; +import { CONTROLLED_BY_SWIM_LANE_FILTER } from '../..'; +import { getJobsObservable } from '../common/get_jobs_observable'; const FETCH_RESULTS_DEBOUNCE_MS = 500; -function getJobsObservable( - embeddableInput: Observable, - anomalyDetectorService: AnomalyDetectorService, - setErrorHandler: (e: Error) => void -) { - return embeddableInput.pipe( - pluck('jobIds'), - distinctUntilChanged(isEqual), - switchMap((jobsIds) => anomalyDetectorService.getJobs$(jobsIds)), - catchError((e) => { - setErrorHandler(e.body ?? e); - return of(undefined); - }) - ); -} - export function useSwimlaneInputResolver( embeddableInput: Observable, onInputChange: (output: Partial) => void, @@ -149,7 +130,7 @@ export function useSwimlaneInputResolver( let appliedFilters: any; try { - appliedFilters = processFilters(filters, query); + appliedFilters = processFilters(filters, query, CONTROLLED_BY_SWIM_LANE_FILTER); } catch (e) { // handle query syntax errors setError(e); @@ -242,44 +223,3 @@ export function useSwimlaneInputResolver( error, ]; } - -export function processFilters(filters: Filter[], query: Query) { - const inputQuery = - query.language === 'kuery' - ? esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(query.query as string)) - : query.query; - - const must = [inputQuery]; - const mustNot = []; - for (const filter of filters) { - // ignore disabled filters as well as created by swim lane selection - if (filter.meta.disabled || filter.meta.controlledBy === CONTROLLED_BY_SWIM_LANE_FILTER) - continue; - - const { - meta: { negate, type, key: fieldName }, - } = filter; - - let filterQuery = filter.query; - - if (filterQuery === undefined && type === 'exists') { - filterQuery = { - exists: { - field: fieldName, - }, - }; - } - - if (negate) { - mustNot.push(filterQuery); - } else { - must.push(filterQuery); - } - } - return { - bool: { - must, - must_not: mustNot, - }, - }; -} diff --git a/x-pack/plugins/ml/public/embeddables/common/components/embeddable_loading_fallback.tsx b/x-pack/plugins/ml/public/embeddables/common/components/embeddable_loading_fallback.tsx new file mode 100644 index 0000000000000..01644efd6652c --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/common/components/embeddable_loading_fallback.tsx @@ -0,0 +1,20 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +import { EuiLoadingSpinner, EuiSpacer, EuiText } from '@elastic/eui'; + +export const EmbeddableLoading = () => { + return ( + + + + + + ); +}; diff --git a/x-pack/plugins/ml/public/embeddables/common/get_jobs_observable.ts b/x-pack/plugins/ml/public/embeddables/common/get_jobs_observable.ts new file mode 100644 index 0000000000000..6bdec30340b76 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/common/get_jobs_observable.ts @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { Observable, of } from 'rxjs'; +import { catchError, distinctUntilChanged, pluck, switchMap } from 'rxjs/operators'; +import { isEqual } from 'lodash'; +import { AnomalyChartsEmbeddableInput, AnomalySwimlaneEmbeddableInput } from '../types'; +import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service'; + +export function getJobsObservable( + embeddableInput: Observable, + anomalyDetectorService: AnomalyDetectorService, + setErrorHandler: (e: Error) => void +) { + return embeddableInput.pipe( + pluck('jobIds'), + distinctUntilChanged(isEqual), + switchMap((jobsIds) => anomalyDetectorService.getJobs$(jobsIds)), + catchError((e) => { + setErrorHandler(e.body ?? e); + return of(undefined); + }) + ); +} diff --git a/x-pack/plugins/ml/public/embeddables/common/process_filters.test.ts b/x-pack/plugins/ml/public/embeddables/common/process_filters.test.ts new file mode 100644 index 0000000000000..262b744786d97 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/common/process_filters.test.ts @@ -0,0 +1,288 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { processFilters } from './process_filters'; +import { CONTROLLED_BY_SWIM_LANE_FILTER } from '../..'; + +describe('processFilters', () => { + test('should format kql embeddable input to es query', () => { + expect( + processFilters( + [ + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + type: 'phrases', + key: 'instance', + value: 'i-20d061fa', + params: ['i-20d061fa'], + alias: null, + negate: false, + disabled: false, + }, + query: { + bool: { + should: [ + { + match_phrase: { + instance: 'i-20d061fa', + }, + }, + ], + minimum_should_match: 1, + }, + }, + $state: { + // @ts-ignore + store: 'appState', + }, + }, + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + alias: null, + negate: true, + disabled: false, + type: 'phrase', + key: 'instance', + params: { + query: 'i-16fd8d2a', + }, + }, + query: { + match_phrase: { + instance: 'i-16fd8d2a', + }, + }, + + $state: { + // @ts-ignore + store: 'appState', + }, + }, + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + alias: null, + negate: false, + disabled: false, + type: 'exists', + key: 'instance', + value: 'exists', + }, + exists: { + field: 'instance', + }, + $state: { + // @ts-ignore + store: 'appState', + }, + }, + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + alias: null, + negate: false, + disabled: true, + type: 'exists', + key: 'instance', + value: 'exists', + }, + exists: { + field: 'region', + }, + $state: { + // @ts-ignore + store: 'appState', + }, + }, + ], + { + language: 'kuery', + query: 'instance : "i-088147ac"', + }, + CONTROLLED_BY_SWIM_LANE_FILTER + ) + ).toEqual({ + bool: { + must: [ + { + bool: { + minimum_should_match: 1, + should: [ + { + match_phrase: { + instance: 'i-088147ac', + }, + }, + ], + }, + }, + { + bool: { + should: [ + { + match_phrase: { + instance: 'i-20d061fa', + }, + }, + ], + minimum_should_match: 1, + }, + }, + { + exists: { + field: 'instance', + }, + }, + ], + must_not: [ + { + match_phrase: { + instance: 'i-16fd8d2a', + }, + }, + ], + }, + }); + }); + + test('should format lucene embeddable input to es query', () => { + expect( + processFilters( + [ + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + type: 'phrases', + key: 'instance', + value: 'i-20d061fa', + params: ['i-20d061fa'], + alias: null, + negate: false, + disabled: false, + }, + query: { + bool: { + should: [ + { + match_phrase: { + instance: 'i-20d061fa', + }, + }, + ], + minimum_should_match: 1, + }, + }, + $state: { + // @ts-ignore + store: 'appState', + }, + }, + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + alias: null, + negate: true, + disabled: false, + type: 'phrase', + key: 'instance', + params: { + query: 'i-16fd8d2a', + }, + }, + query: { + match_phrase: { + instance: 'i-16fd8d2a', + }, + }, + + $state: { + // @ts-ignore + store: 'appState', + }, + }, + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + alias: null, + negate: false, + disabled: false, + type: 'exists', + key: 'instance', + value: 'exists', + }, + exists: { + field: 'instance', + }, + $state: { + // @ts-ignore + store: 'appState', + }, + }, + { + meta: { + index: 'c01fcbd0-8936-11ea-a70f-9f68bc175114', + alias: null, + negate: false, + disabled: true, + type: 'exists', + key: 'instance', + value: 'exists', + }, + exists: { + field: 'region', + }, + $state: { + // @ts-ignore + store: 'appState', + }, + }, + ], + { + language: 'lucene', + query: 'instance:i-d**', + }, + CONTROLLED_BY_SWIM_LANE_FILTER + ) + ).toEqual({ + bool: { + must: [ + { + query_string: { + query: 'instance:i-d**', + }, + }, + { + bool: { + should: [ + { + match_phrase: { + instance: 'i-20d061fa', + }, + }, + ], + minimum_should_match: 1, + }, + }, + { + exists: { + field: 'instance', + }, + }, + ], + must_not: [ + { + match_phrase: { + instance: 'i-16fd8d2a', + }, + }, + ], + }, + }); + }); +}); diff --git a/x-pack/plugins/ml/public/embeddables/common/process_filters.ts b/x-pack/plugins/ml/public/embeddables/common/process_filters.ts new file mode 100644 index 0000000000000..8ff75205b4d48 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/common/process_filters.ts @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { Filter } from '../../../../../../src/plugins/data/common/es_query/filters'; +import { Query } from '../../../../../../src/plugins/data/common/query'; +import { esKuery, esQuery } from '../../../../../../src/plugins/data/public'; + +export function processFilters(filters: Filter[], query: Query, controlledBy?: string) { + const inputQuery = + query.language === 'kuery' + ? esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(query.query as string)) + : esQuery.luceneStringToDsl(query.query); + + const must = [inputQuery]; + const mustNot = []; + + for (const filter of filters) { + // ignore disabled filters as well as created by swim lane selection + if ( + filter.meta.disabled || + (controlledBy !== undefined && filter.meta.controlledBy === controlledBy) + ) + continue; + + const { + meta: { negate, type, key: fieldName }, + } = filter; + + let filterQuery = filter.query; + + if (filterQuery === undefined && type === 'exists') { + filterQuery = { + exists: { + field: fieldName, + }, + }; + } + + if (negate) { + mustNot.push(filterQuery); + } else { + must.push(filterQuery); + } + } + return { + bool: { + must, + must_not: mustNot, + }, + }; +} diff --git a/x-pack/plugins/ml/public/embeddables/constants.ts b/x-pack/plugins/ml/public/embeddables/constants.ts index c50264ccccd97..8307eeda23ec6 100644 --- a/x-pack/plugins/ml/public/embeddables/constants.ts +++ b/x-pack/plugins/ml/public/embeddables/constants.ts @@ -6,3 +6,4 @@ */ export const ANOMALY_SWIMLANE_EMBEDDABLE_TYPE = 'ml_anomaly_swimlane'; +export const ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE = 'ml_anomaly_charts'; diff --git a/x-pack/plugins/ml/public/embeddables/index.ts b/x-pack/plugins/ml/public/embeddables/index.ts index b1dd3ac0a4a17..2011d7217094b 100644 --- a/x-pack/plugins/ml/public/embeddables/index.ts +++ b/x-pack/plugins/ml/public/embeddables/index.ts @@ -8,6 +8,7 @@ import { AnomalySwimlaneEmbeddableFactory } from './anomaly_swimlane'; import type { MlCoreSetup } from '../plugin'; import type { EmbeddableSetup } from '../../../../../src/plugins/embeddable/public'; +import { AnomalyChartsEmbeddableFactory } from './anomaly_charts'; export * from './constants'; export * from './types'; @@ -20,4 +21,8 @@ export function registerEmbeddables(embeddable: EmbeddableSetup, core: MlCoreSet anomalySwimlaneEmbeddableFactory.type, anomalySwimlaneEmbeddableFactory ); + + const anomalyChartsFactory = new AnomalyChartsEmbeddableFactory(core.getStartServices); + + embeddable.registerEmbeddableFactory(anomalyChartsFactory.type, anomalyChartsFactory); } diff --git a/x-pack/plugins/ml/public/embeddables/types.ts b/x-pack/plugins/ml/public/embeddables/types.ts index 712aba707f4c7..05aea1770a415 100644 --- a/x-pack/plugins/ml/public/embeddables/types.ts +++ b/x-pack/plugins/ml/public/embeddables/types.ts @@ -23,6 +23,15 @@ import type { AnomalyDetectorService } from '../application/services/anomaly_det import type { AnomalyTimelineService } from '../application/services/anomaly_timeline_service'; import type { MlDependencies } from '../application/app'; import type { AppStateSelectedCells } from '../application/explorer/explorer_utils'; +import { AnomalyExplorerChartsService } from '../application/services/anomaly_explorer_charts_service'; +import { EntityField } from '../../common/util/anomaly_utils'; +import { isPopulatedObject } from '../../common/util/object_utils'; +import { + ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE, + ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, +} from './constants'; +import { MlResultsService } from '../application/services/results_service'; +import { IndexPattern } from '../../../../../src/plugins/data/common/index_patterns/index_patterns'; export interface AnomalySwimlaneEmbeddableCustomInput { jobIds: JobId[]; @@ -69,3 +78,60 @@ export interface SwimLaneDrilldownContext extends EditSwimlanePanelContext { */ data?: AppStateSelectedCells; } + +export function isSwimLaneEmbeddable(arg: unknown): arg is SwimLaneDrilldownContext { + return ( + isPopulatedObject(arg) && + arg.hasOwnProperty('embeddable') && + arg.embeddable.type === ANOMALY_SWIMLANE_EMBEDDABLE_TYPE + ); +} + +/** + * Anomaly Explorer + */ +export interface AnomalyChartsEmbeddableCustomInput { + jobIds: JobId[]; + maxSeriesToPlot: number; + + // Embeddable inputs which are not included in the default interface + filters: Filter[]; + query: Query; + refreshConfig: RefreshInterval; + timeRange: TimeRange; + severityThreshold?: number; +} + +export type AnomalyChartsEmbeddableInput = EmbeddableInput & AnomalyChartsEmbeddableCustomInput; + +export interface AnomalyChartsServices { + anomalyDetectorService: AnomalyDetectorService; + anomalyExplorerService: AnomalyExplorerChartsService; + mlResultsService: MlResultsService; +} + +export type AnomalyChartsEmbeddableServices = [CoreStart, MlDependencies, AnomalyChartsServices]; +export interface AnomalyChartsCustomOutput { + entityFields?: EntityField[]; + severity?: number; + indexPatterns?: IndexPattern[]; +} +export type AnomalyChartsEmbeddableOutput = EmbeddableOutput & AnomalyChartsCustomOutput; +export interface EditAnomalyChartsPanelContext { + embeddable: IEmbeddable; +} +export interface AnomalyChartsFieldSelectionContext extends EditAnomalyChartsPanelContext { + /** + * Optional fields selected using anomaly charts + */ + data?: EntityField[]; +} +export function isAnomalyExplorerEmbeddable( + arg: unknown +): arg is AnomalyChartsFieldSelectionContext { + return ( + isPopulatedObject(arg) && + arg.hasOwnProperty('embeddable') && + arg.embeddable.type === ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE + ); +} diff --git a/x-pack/plugins/ml/public/ui_actions/apply_entity_filters_action.tsx b/x-pack/plugins/ml/public/ui_actions/apply_entity_filters_action.tsx new file mode 100644 index 0000000000000..03b6459f82f58 --- /dev/null +++ b/x-pack/plugins/ml/public/ui_actions/apply_entity_filters_action.tsx @@ -0,0 +1,92 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; +import { createAction } from '../../../../../src/plugins/ui_actions/public'; +import { MlCoreSetup } from '../plugin'; +import { Filter, FilterStateStore } from '../../../../../src/plugins/data/common'; +import { + ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE, + AnomalyChartsFieldSelectionContext, +} from '../embeddables'; +import { CONTROLLED_BY_ANOMALY_CHARTS_FILTER } from './constants'; +import { ENTITY_FIELD_OPERATIONS } from '../../common/util/anomaly_utils'; + +export const APPLY_ENTITY_FIELD_FILTERS_ACTION = 'applyEntityFieldFiltersAction'; + +export function createApplyEntityFieldFiltersAction( + getStartServices: MlCoreSetup['getStartServices'] +) { + return createAction({ + id: 'apply-entity-field-filters', + type: APPLY_ENTITY_FIELD_FILTERS_ACTION, + getIconType(context: AnomalyChartsFieldSelectionContext): string { + return 'filter'; + }, + getDisplayName() { + return i18n.translate('xpack.ml.actions.applyEntityFieldsFiltersTitle', { + defaultMessage: 'Filter for value', + }); + }, + async execute({ data }) { + if (!data) { + throw new Error('No entities provided'); + } + const [, pluginStart] = await getStartServices(); + const filterManager = pluginStart.data.query.filterManager; + + filterManager.addFilters( + data + .filter((d) => d.operation === ENTITY_FIELD_OPERATIONS.ADD) + .map(({ fieldName, fieldValue }) => { + return { + $state: { + store: FilterStateStore.APP_STATE, + }, + meta: { + alias: i18n.translate('xpack.ml.actions.entityFieldFilterAliasLabel', { + defaultMessage: '{labelValue}', + values: { + labelValue: `${fieldName}:${fieldValue}`, + }, + }), + controlledBy: CONTROLLED_BY_ANOMALY_CHARTS_FILTER, + negate: false, + disabled: false, + type: 'phrase', + key: fieldName, + params: { + query: fieldValue, + }, + }, + query: { + match_phrase: { + [fieldName]: fieldValue, + }, + }, + }; + }) + ); + + data + .filter((field) => field.operation === ENTITY_FIELD_OPERATIONS.REMOVE) + .forEach((field) => { + const filter = filterManager + .getFilters() + .find( + (f) => f.meta.key === field.fieldName && f.meta.params.query === field.fieldValue + ); + if (filter) { + filterManager.removeFilter(filter); + } + }); + }, + async isCompatible({ embeddable, data }) { + return embeddable.type === ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE && data !== undefined; + }, + }); +} diff --git a/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx b/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx index e3d2ca4ce0de1..0642687e2926c 100644 --- a/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx +++ b/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx @@ -44,7 +44,7 @@ export function createApplyInfluencerFiltersAction( }, meta: { alias: i18n.translate('xpack.ml.actions.influencerFilterAliasLabel', { - defaultMessage: 'Influencer {labelValue}', + defaultMessage: '{labelValue}', values: { labelValue: `${data.viewByFieldName}:${influencerValue}`, }, diff --git a/x-pack/plugins/ml/public/ui_actions/constants.ts b/x-pack/plugins/ml/public/ui_actions/constants.ts index 6dc3f03d10fd9..459f342dc4527 100644 --- a/x-pack/plugins/ml/public/ui_actions/constants.ts +++ b/x-pack/plugins/ml/public/ui_actions/constants.ts @@ -6,3 +6,4 @@ */ export const CONTROLLED_BY_SWIM_LANE_FILTER = 'anomaly-swim-lane'; +export const CONTROLLED_BY_ANOMALY_CHARTS_FILTER = 'anomaly-charts'; diff --git a/x-pack/plugins/ml/public/ui_actions/edit_anomaly_charts_panel_action.tsx b/x-pack/plugins/ml/public/ui_actions/edit_anomaly_charts_panel_action.tsx new file mode 100644 index 0000000000000..1895ed3acf981 --- /dev/null +++ b/x-pack/plugins/ml/public/ui_actions/edit_anomaly_charts_panel_action.tsx @@ -0,0 +1,60 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; +import { createAction } from '../../../../../src/plugins/ui_actions/public'; +import { ViewMode } from '../../../../../src/plugins/embeddable/public'; +import { MlCoreSetup } from '../plugin'; +import { + ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE, + EditAnomalyChartsPanelContext, +} from '../embeddables'; + +export const EDIT_ANOMALY_CHARTS_PANEL_ACTION = 'editAnomalyChartsPanelAction'; + +export function createEditAnomalyChartsPanelAction( + getStartServices: MlCoreSetup['getStartServices'] +) { + return createAction({ + id: 'edit-anomaly-charts', + type: EDIT_ANOMALY_CHARTS_PANEL_ACTION, + getIconType(context): string { + return 'pencil'; + }, + getDisplayName: () => + i18n.translate('xpack.ml.actions.editAnomalyChartsTitle', { + defaultMessage: 'Edit anomaly charts', + }), + async execute({ embeddable }) { + if (!embeddable) { + throw new Error('Not possible to execute an action without the embeddable context'); + } + + const [coreStart] = await getStartServices(); + + try { + const { resolveEmbeddableAnomalyChartsUserInput } = await import( + '../embeddables/anomaly_charts/anomaly_charts_setup_flyout' + ); + + const result = await resolveEmbeddableAnomalyChartsUserInput( + coreStart, + embeddable.getInput() + ); + embeddable.updateInput(result); + } catch (e) { + return Promise.reject(); + } + }, + async isCompatible({ embeddable }) { + return ( + embeddable.type === ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE && + embeddable.getInput().viewMode === ViewMode.EDIT + ); + }, + }); +} diff --git a/x-pack/plugins/ml/public/ui_actions/index.ts b/x-pack/plugins/ml/public/ui_actions/index.ts index 6fec66382e3f9..46e928e5f55eb 100644 --- a/x-pack/plugins/ml/public/ui_actions/index.ts +++ b/x-pack/plugins/ml/public/ui_actions/index.ts @@ -12,17 +12,21 @@ import { UiActionsSetup } from '../../../../../src/plugins/ui_actions/public'; import { MlPluginStart, MlStartDependencies } from '../plugin'; import { CONTEXT_MENU_TRIGGER } from '../../../../../src/plugins/embeddable/public'; import { createApplyInfluencerFiltersAction } from './apply_influencer_filters_action'; -import { SWIM_LANE_SELECTION_TRIGGER, swimLaneSelectionTrigger } from './triggers'; +import { + entityFieldSelectionTrigger, + EXPLORER_ENTITY_FIELD_SELECTION_TRIGGER, + SWIM_LANE_SELECTION_TRIGGER, + swimLaneSelectionTrigger, +} from './triggers'; import { createApplyTimeRangeSelectionAction } from './apply_time_range_action'; import { createClearSelectionAction } from './clear_selection_action'; - +import { createEditAnomalyChartsPanelAction } from './edit_anomaly_charts_panel_action'; +import { createApplyEntityFieldFiltersAction } from './apply_entity_filters_action'; export { APPLY_TIME_RANGE_SELECTION_ACTION } from './apply_time_range_action'; export { EDIT_SWIMLANE_PANEL_ACTION } from './edit_swimlane_panel_action'; export { APPLY_INFLUENCER_FILTERS_ACTION } from './apply_influencer_filters_action'; export { OPEN_IN_ANOMALY_EXPLORER_ACTION } from './open_in_anomaly_explorer_action'; - -export { SWIM_LANE_SELECTION_TRIGGER } from './triggers'; - +export { SWIM_LANE_SELECTION_TRIGGER }; /** * Register ML UI actions */ @@ -34,24 +38,31 @@ export function registerMlUiActions( const editSwimlanePanelAction = createEditSwimlanePanelAction(core.getStartServices); const openInExplorerAction = createOpenInExplorerAction(core.getStartServices); const applyInfluencerFiltersAction = createApplyInfluencerFiltersAction(core.getStartServices); + const applyEntityFieldFilterAction = createApplyEntityFieldFiltersAction(core.getStartServices); const applyTimeRangeSelectionAction = createApplyTimeRangeSelectionAction(core.getStartServices); const clearSelectionAction = createClearSelectionAction(core.getStartServices); + const editExplorerPanelAction = createEditAnomalyChartsPanelAction(core.getStartServices); // Register actions uiActions.registerAction(editSwimlanePanelAction); uiActions.registerAction(openInExplorerAction); uiActions.registerAction(applyInfluencerFiltersAction); + uiActions.registerAction(applyEntityFieldFilterAction); uiActions.registerAction(applyTimeRangeSelectionAction); uiActions.registerAction(clearSelectionAction); + uiActions.registerAction(editExplorerPanelAction); // Assign triggers uiActions.attachAction(CONTEXT_MENU_TRIGGER, editSwimlanePanelAction.id); + uiActions.attachAction(CONTEXT_MENU_TRIGGER, editExplorerPanelAction.id); uiActions.attachAction(CONTEXT_MENU_TRIGGER, openInExplorerAction.id); uiActions.registerTrigger(swimLaneSelectionTrigger); + uiActions.registerTrigger(entityFieldSelectionTrigger); uiActions.addTriggerAction(SWIM_LANE_SELECTION_TRIGGER, applyInfluencerFiltersAction); uiActions.addTriggerAction(SWIM_LANE_SELECTION_TRIGGER, applyTimeRangeSelectionAction); uiActions.addTriggerAction(SWIM_LANE_SELECTION_TRIGGER, openInExplorerAction); uiActions.addTriggerAction(SWIM_LANE_SELECTION_TRIGGER, clearSelectionAction); + uiActions.addTriggerAction(EXPLORER_ENTITY_FIELD_SELECTION_TRIGGER, applyEntityFieldFilterAction); } diff --git a/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx b/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx index 614df96b59963..7353502f95b47 100644 --- a/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx +++ b/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx @@ -9,12 +9,21 @@ import { i18n } from '@kbn/i18n'; import { createAction } from '../../../../../src/plugins/ui_actions/public'; import { MlCoreSetup } from '../plugin'; import { ML_APP_URL_GENERATOR } from '../../common/constants/ml_url_generator'; -import { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, SwimLaneDrilldownContext } from '../embeddables'; +import { + ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE, + ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, + AnomalyChartsFieldSelectionContext, + isAnomalyExplorerEmbeddable, + isSwimLaneEmbeddable, + SwimLaneDrilldownContext, +} from '../embeddables'; +import { ENTITY_FIELD_OPERATIONS } from '../../common/util/anomaly_utils'; +import { ExplorerAppState } from '../../common/types/ml_url_generator'; export const OPEN_IN_ANOMALY_EXPLORER_ACTION = 'openInAnomalyExplorerAction'; export function createOpenInExplorerAction(getStartServices: MlCoreSetup['getStartServices']) { - return createAction({ + return createAction({ id: 'open-in-anomaly-explorer', type: OPEN_IN_ANOMALY_EXPLORER_ACTION, getIconType(context): string { @@ -25,42 +34,98 @@ export function createOpenInExplorerAction(getStartServices: MlCoreSetup['getSta defaultMessage: 'Open in Anomaly Explorer', }); }, - async getHref({ embeddable, data }): Promise { + async getHref(context): Promise { const [, pluginsStart] = await getStartServices(); const urlGenerator = pluginsStart.share.urlGenerators.getUrlGenerator(ML_APP_URL_GENERATOR); - const { jobIds, timeRange, viewBy } = embeddable.getInput(); - const { perPage, fromPage } = embeddable.getOutput(); - return urlGenerator.createUrl({ - page: 'explorer', - pageState: { - jobIds, - timeRange, - mlExplorerSwimlane: { - viewByFromPage: fromPage, - viewByPerPage: perPage, - viewByFieldName: viewBy, - ...(data - ? { - selectedType: data.type, - selectedTimes: data.times, - selectedLanes: data.lanes, - } - : {}), + if (isSwimLaneEmbeddable(context)) { + const { embeddable, data } = context; + + const { jobIds, timeRange, viewBy } = embeddable.getInput(); + const { perPage, fromPage } = embeddable.getOutput(); + + return urlGenerator.createUrl({ + page: 'explorer', + pageState: { + jobIds, + timeRange, + mlExplorerSwimlane: { + viewByFromPage: fromPage, + viewByPerPage: perPage, + viewByFieldName: viewBy, + ...(data + ? { + selectedType: data.type, + selectedTimes: data.times, + selectedLanes: data.lanes, + } + : {}), + }, }, - }, - }); + }); + } else if (isAnomalyExplorerEmbeddable(context)) { + const { embeddable } = context; + + const { jobIds, timeRange } = embeddable.getInput(); + const { entityFields } = embeddable.getOutput(); + + let mlExplorerFilter: ExplorerAppState['mlExplorerFilter'] | undefined; + if ( + Array.isArray(entityFields) && + entityFields.length === 1 && + entityFields[0].operation === ENTITY_FIELD_OPERATIONS.ADD + ) { + const { fieldName, fieldValue } = entityFields[0]; + if (fieldName !== undefined && fieldValue !== undefined) { + const influencersFilterQuery = { + bool: { + should: [ + { + match_phrase: { + [fieldName]: fieldValue, + }, + }, + ], + minimum_should_match: 1, + }, + }; + const filteredFields = [fieldName, fieldValue]; + mlExplorerFilter = { + influencersFilterQuery, + filterActive: true, + queryString: `${fieldName}:"${fieldValue}"`, + ...(Array.isArray(filteredFields) ? { filteredFields } : {}), + }; + } + } + return urlGenerator.createUrl({ + page: 'explorer', + pageState: { + jobIds, + timeRange, + ...(mlExplorerFilter ? { mlExplorerFilter } : {}), + query: {}, + }, + }); + } }, - async execute({ embeddable, data }) { - if (!embeddable) { + async execute(context) { + if (!context.embeddable) { throw new Error('Not possible to execute an action without the embeddable context'); } const [{ application }] = await getStartServices(); - const anomalyExplorerUrl = await this.getHref!({ embeddable, data }); - await application.navigateToUrl(anomalyExplorerUrl!); + const anomalyExplorerUrl = await this.getHref!(context); + if (anomalyExplorerUrl) { + await application.navigateToUrl(anomalyExplorerUrl!); + } }, - async isCompatible({ embeddable }: SwimLaneDrilldownContext) { - return embeddable.type === ANOMALY_SWIMLANE_EMBEDDABLE_TYPE; + async isCompatible({ + embeddable, + }: SwimLaneDrilldownContext | AnomalyChartsFieldSelectionContext) { + return ( + embeddable.type === ANOMALY_SWIMLANE_EMBEDDABLE_TYPE || + embeddable.type === ANOMALY_EXPLORER_CHARTS_EMBEDDABLE_TYPE + ); }, }); } diff --git a/x-pack/plugins/ml/public/ui_actions/triggers.ts b/x-pack/plugins/ml/public/ui_actions/triggers.ts index 7763facbdc158..05074ce6df271 100644 --- a/x-pack/plugins/ml/public/ui_actions/triggers.ts +++ b/x-pack/plugins/ml/public/ui_actions/triggers.ts @@ -16,3 +16,12 @@ export const swimLaneSelectionTrigger: Trigger = { title: '', description: 'Swim lane selection triggered', }; + +export const EXPLORER_ENTITY_FIELD_SELECTION_TRIGGER = 'EXPLORER_ENTITY_FIELD_SELECTION_TRIGGER'; +export const entityFieldSelectionTrigger: Trigger = { + id: EXPLORER_ENTITY_FIELD_SELECTION_TRIGGER, + // This is empty string to hide title of ui_actions context menu that appears + // when this trigger is executed. + title: '', + description: 'Entity field selection triggered', +}; diff --git a/x-pack/plugins/ml/server/routes/apidoc_scripts/schema_extractor.ts b/x-pack/plugins/ml/server/routes/apidoc_scripts/schema_extractor.ts index 3a30a141f88f5..f94aaffc41a7b 100644 --- a/x-pack/plugins/ml/server/routes/apidoc_scripts/schema_extractor.ts +++ b/x-pack/plugins/ml/server/routes/apidoc_scripts/schema_extractor.ts @@ -5,6 +5,7 @@ * 2.0. */ +// eslint-disable-next-line import/no-extraneous-dependencies import * as ts from 'typescript'; export interface DocEntry { diff --git a/x-pack/plugins/observability/public/application/application.test.tsx b/x-pack/plugins/observability/public/application/application.test.tsx index 33cc6d24397d6..d06b3822c2571 100644 --- a/x-pack/plugins/observability/public/application/application.test.tsx +++ b/x-pack/plugins/observability/public/application/application.test.tsx @@ -9,7 +9,7 @@ import { createMemoryHistory } from 'history'; import React from 'react'; import { Observable } from 'rxjs'; import { AppMountParameters, CoreStart } from 'src/core/public'; -import { ObservabilityPluginSetupDeps } from '../plugin'; +import { ObservabilityPublicPluginsStart } from '../plugin'; import { renderApp } from './'; describe('renderApp', () => { @@ -32,7 +32,7 @@ describe('renderApp', () => { }, }, }, - } as unknown) as ObservabilityPluginSetupDeps; + } as unknown) as ObservabilityPublicPluginsStart; const core = ({ application: { currentAppId$: new Observable(), navigateToUrl: () => {} }, chrome: { diff --git a/x-pack/plugins/observability/public/application/index.tsx b/x-pack/plugins/observability/public/application/index.tsx index 9628a5cc61ba9..c8a8d877380e3 100644 --- a/x-pack/plugins/observability/public/application/index.tsx +++ b/x-pack/plugins/observability/public/application/index.tsx @@ -18,7 +18,7 @@ import { import { PluginContext } from '../context/plugin_context'; import { usePluginContext } from '../hooks/use_plugin_context'; import { useRouteParams } from '../hooks/use_route_params'; -import { ObservabilityPluginSetupDeps } from '../plugin'; +import { ObservabilityPublicPluginsStart } from '../plugin'; import { HasDataContextProvider } from '../context/has_data_context'; import { Breadcrumbs, routes } from '../routes'; import { Storage } from '../../../../../src/plugins/kibana_utils/public'; @@ -68,7 +68,7 @@ function App() { export const renderApp = ( core: CoreStart, - plugins: ObservabilityPluginSetupDeps, + plugins: ObservabilityPublicPluginsStart, appMountParameters: AppMountParameters ) => { const { element, history } = appMountParameters; diff --git a/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx b/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx index 8f7961e13f80b..e5f100be285e1 100644 --- a/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx +++ b/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx @@ -14,7 +14,7 @@ import * as hasDataHook from '../../../../hooks/use_has_data'; import * as pluginContext from '../../../../hooks/use_plugin_context'; import { HasDataContextValue } from '../../../../context/has_data_context'; import { AppMountParameters, CoreStart } from 'kibana/public'; -import { ObservabilityPluginSetupDeps } from '../../../../plugin'; +import { ObservabilityPublicPluginsStart } from '../../../../plugin'; jest.mock('react-router-dom', () => ({ useLocation: () => ({ @@ -53,7 +53,7 @@ describe('APMSection', () => { }, }, }, - } as unknown) as ObservabilityPluginSetupDeps, + } as unknown) as ObservabilityPublicPluginsStart, })); }); it('renders with transaction series and stats', () => { diff --git a/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx b/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx index 3d0e1618d0c3e..d76e6d1b3e551 100644 --- a/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx +++ b/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx @@ -11,7 +11,7 @@ import { HasDataContextValue } from '../../../../context/has_data_context'; import * as fetcherHook from '../../../../hooks/use_fetcher'; import * as hasDataHook from '../../../../hooks/use_has_data'; import * as pluginContext from '../../../../hooks/use_plugin_context'; -import { ObservabilityPluginSetupDeps } from '../../../../plugin'; +import { ObservabilityPublicPluginsStart } from '../../../../plugin'; import { render } from '../../../../utils/test_helper'; import { UXSection } from './'; import { response } from './mock_data/ux.mock'; @@ -52,7 +52,7 @@ describe('UXSection', () => { }, }, }, - } as unknown) as ObservabilityPluginSetupDeps, + } as unknown) as ObservabilityPublicPluginsStart, })); }); it('renders with core web vitals', () => { diff --git a/x-pack/plugins/observability/public/context/plugin_context.tsx b/x-pack/plugins/observability/public/context/plugin_context.tsx index d47915feb7b48..771968861a6bb 100644 --- a/x-pack/plugins/observability/public/context/plugin_context.tsx +++ b/x-pack/plugins/observability/public/context/plugin_context.tsx @@ -7,12 +7,12 @@ import { createContext } from 'react'; import { AppMountParameters, CoreStart } from 'kibana/public'; -import { ObservabilityPluginSetupDeps } from '../plugin'; +import { ObservabilityPublicPluginsStart } from '../plugin'; export interface PluginContextValue { appMountParameters: AppMountParameters; core: CoreStart; - plugins: ObservabilityPluginSetupDeps; + plugins: ObservabilityPublicPluginsStart; } export const PluginContext = createContext({} as PluginContextValue); diff --git a/x-pack/plugins/observability/public/hooks/use_time_range.test.ts b/x-pack/plugins/observability/public/hooks/use_time_range.test.ts index 7e065efbf2937..184ec4f3390f4 100644 --- a/x-pack/plugins/observability/public/hooks/use_time_range.test.ts +++ b/x-pack/plugins/observability/public/hooks/use_time_range.test.ts @@ -8,7 +8,7 @@ import { useTimeRange } from './use_time_range'; import * as pluginContext from './use_plugin_context'; import { AppMountParameters, CoreStart } from 'kibana/public'; -import { ObservabilityPluginSetupDeps } from '../plugin'; +import { ObservabilityPublicPluginsStart } from '../plugin'; import * as kibanaUISettings from './use_kibana_ui_settings'; jest.mock('react-router-dom', () => ({ @@ -36,7 +36,7 @@ describe('useTimeRange', () => { }, }, }, - } as unknown) as ObservabilityPluginSetupDeps, + } as unknown) as ObservabilityPublicPluginsStart, })); jest.spyOn(kibanaUISettings, 'useKibanaUISettings').mockImplementation(() => ({ from: '2020-10-08T05:00:00.000Z', @@ -76,7 +76,7 @@ describe('useTimeRange', () => { }, }, }, - } as unknown) as ObservabilityPluginSetupDeps, + } as unknown) as ObservabilityPublicPluginsStart, })); }); it('returns ranges and absolute times from kibana default settings', () => { diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index dfe454ccc7b87..f473ed963c75a 100644 --- a/x-pack/plugins/observability/public/index.ts +++ b/x-pack/plugins/observability/public/index.ts @@ -6,12 +6,26 @@ */ import { PluginInitializerContext, PluginInitializer } from 'kibana/public'; -import { Plugin, ObservabilityPluginSetup, ObservabilityPluginStart } from './plugin'; -export type { ObservabilityPluginSetup, ObservabilityPluginStart }; +import { + Plugin, + ObservabilityPublicPluginsStart, + ObservabilityPublicPluginsSetup, + ObservabilityPublicStart, + ObservabilityPublicSetup, +} from './plugin'; +export type { + ObservabilityPublicSetup, + ObservabilityPublicStart, + ObservabilityPublicPluginsSetup, + ObservabilityPublicPluginsStart, +}; -export const plugin: PluginInitializer = ( - context: PluginInitializerContext -) => { +export const plugin: PluginInitializer< + ObservabilityPublicSetup, + ObservabilityPublicStart, + ObservabilityPublicPluginsSetup, + ObservabilityPublicPluginsStart +> = (context: PluginInitializerContext) => { return new Plugin(context); }; diff --git a/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx b/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx index b5aaeea3367c1..56019eeccfd5a 100644 --- a/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx +++ b/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx @@ -15,7 +15,7 @@ import { UI_SETTINGS } from '../../../../../../src/plugins/data/public'; import { HasDataContextProvider } from '../../context/has_data_context'; import { PluginContext } from '../../context/plugin_context'; import { registerDataHandler, unregisterDataHandler } from '../../data_handler'; -import { ObservabilityPluginSetupDeps } from '../../plugin'; +import { ObservabilityPublicPluginsStart } from '../../plugin'; import { OverviewPage } from './'; import { alertsFetchData } from './mock/alerts.mock'; import { emptyResponse as emptyAPMResponse, fetchApmData } from './mock/apm.mock'; @@ -51,7 +51,7 @@ const withCore = makeDecorator({ timefilter: { timefilter: { setTime: () => {}, getTime: () => ({}) } }, }, }, - } as unknown) as ObservabilityPluginSetupDeps, + } as unknown) as ObservabilityPublicPluginsStart, }} > diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index 5978c28b4e939..cd3cb66187c6f 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -7,7 +7,7 @@ import { BehaviorSubject } from 'rxjs'; import { i18n } from '@kbn/i18n'; -import { DataPublicPluginSetup } from '../../../../src/plugins/data/public'; +import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public'; import { AppMountParameters, AppUpdater, @@ -17,36 +17,53 @@ import { PluginInitializerContext, CoreStart, } from '../../../../src/core/public'; -import { HomePublicPluginSetup } from '../../../../src/plugins/home/public'; +import { HomePublicPluginSetup, HomePublicPluginStart } from '../../../../src/plugins/home/public'; import { registerDataHandler } from './data_handler'; import { toggleOverviewLinkInNav } from './toggle_overview_link_in_nav'; +import { LensPublicStart } from '../../lens/public'; -export interface ObservabilityPluginSetup { +export interface ObservabilityPublicSetup { dashboard: { register: typeof registerDataHandler }; } -export interface ObservabilityPluginSetupDeps { - home?: HomePublicPluginSetup; +export interface ObservabilityPublicPluginsSetup { data: DataPublicPluginSetup; + home?: HomePublicPluginSetup; +} + +export interface ObservabilityPublicPluginsStart { + home?: HomePublicPluginStart; + data: DataPublicPluginStart; + lens: LensPublicStart; } -export type ObservabilityPluginStart = void; +export type ObservabilityPublicStart = void; -export class Plugin implements PluginClass { +export class Plugin + implements + PluginClass< + ObservabilityPublicSetup, + ObservabilityPublicStart, + ObservabilityPublicPluginsSetup, + ObservabilityPublicPluginsStart + > { private readonly appUpdater$ = new BehaviorSubject(() => ({})); constructor(context: PluginInitializerContext) {} - public setup(core: CoreSetup, plugins: ObservabilityPluginSetupDeps) { + public setup( + core: CoreSetup, + plugins: ObservabilityPublicPluginsSetup + ) { const category = DEFAULT_APP_CATEGORIES.observability; const euiIconType = 'logoObservability'; const mount = async (params: AppMountParameters) => { // Load application bundle const { renderApp } = await import('./application'); // Get start services - const [coreStart] = await core.getStartServices(); + const [coreStart, startPlugins] = await core.getStartServices(); - return renderApp(coreStart, plugins, params); + return renderApp(coreStart, startPlugins, params); }; const updater$ = this.appUpdater$; diff --git a/x-pack/plugins/observability/public/utils/test_helper.tsx b/x-pack/plugins/observability/public/utils/test_helper.tsx index b7dd70acb91bd..885303ea0c54b 100644 --- a/x-pack/plugins/observability/public/utils/test_helper.tsx +++ b/x-pack/plugins/observability/public/utils/test_helper.tsx @@ -13,7 +13,7 @@ import { of } from 'rxjs'; import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; import translations from '../../../translations/translations/ja-JP.json'; import { PluginContext } from '../context/plugin_context'; -import { ObservabilityPluginSetupDeps } from '../plugin'; +import { ObservabilityPublicPluginsStart } from '../plugin'; import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common'; const appMountParameters = ({ setHeaderActionMenu: () => {} } as unknown) as AppMountParameters; @@ -32,7 +32,7 @@ export const core = ({ const plugins = ({ data: { query: { timefilter: { timefilter: { setTime: jest.fn() } } } }, -} as unknown) as ObservabilityPluginSetupDeps; +} as unknown) as ObservabilityPublicPluginsStart; export const render = (component: React.ReactNode) => { return testLibRender( diff --git a/x-pack/plugins/observability/tsconfig.json b/x-pack/plugins/observability/tsconfig.json index 5c7528610a0b1..6833948b86b18 100644 --- a/x-pack/plugins/observability/tsconfig.json +++ b/x-pack/plugins/observability/tsconfig.json @@ -17,6 +17,7 @@ { "path": "../../../src/plugins/usage_collection/tsconfig.json" }, { "path": "../alerting/tsconfig.json" }, { "path": "../licensing/tsconfig.json" }, + { "path": "../lens/tsconfig.json" }, { "path": "../translations/tsconfig.json" } ] } diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx index f16655f048ed6..9767ee90fc14c 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx @@ -24,7 +24,10 @@ const setup = (props?: Props) => const docLinks: DocLinksStart = { ELASTIC_WEBSITE_URL: 'https://jestTest.elastic.co', DOC_LINK_VERSION: 'jest', - links: {} as any, + links: { + runtimeFields: { mapping: 'https://jestTest.elastic.co/to-be-defined.html' }, + scriptedFields: {} as any, + } as any, }; describe('Runtime field editor', () => { diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx index f8f276f1754ac..abcff4a79a475 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx @@ -23,7 +23,10 @@ const setup = (props?: Props) => const docLinks: DocLinksStart = { ELASTIC_WEBSITE_URL: 'htts://jestTest.elastic.co', DOC_LINK_VERSION: 'jest', - links: {} as any, + links: { + runtimeFields: { mapping: 'https://jestTest.elastic.co/to-be-defined.html' }, + scriptedFields: {} as any, + } as any, }; const noop = () => {}; diff --git a/x-pack/plugins/runtime_fields/public/lib/documentation.ts b/x-pack/plugins/runtime_fields/public/lib/documentation.ts index 14f3e825d14ab..dfdd50b07d769 100644 --- a/x-pack/plugins/runtime_fields/public/lib/documentation.ts +++ b/x-pack/plugins/runtime_fields/public/lib/documentation.ts @@ -7,14 +7,11 @@ import { DocLinksStart } from 'src/core/public'; -export const getLinks = (docLinks: DocLinksStart) => { - const { DOC_LINK_VERSION, ELASTIC_WEBSITE_URL } = docLinks; - const docsBase = `${ELASTIC_WEBSITE_URL}guide/en`; - const esDocsBase = `${docsBase}/elasticsearch/reference/${DOC_LINK_VERSION}`; - const painlessDocsBase = `${docsBase}/elasticsearch/painless/${DOC_LINK_VERSION}`; - +export const getLinks = ({ links }: DocLinksStart) => { + const runtimePainless = `${links.runtimeFields.mapping}`; + const painlessSyntax = `${links.scriptedFields.painlessLangSpec}`; return { - runtimePainless: `${esDocsBase}/runtime.html#runtime-mapping-fields`, - painlessSyntax: `${painlessDocsBase}/painless-lang-spec.html`, + runtimePainless, + painlessSyntax, }; }; diff --git a/x-pack/plugins/security_solution/common/detection_engine/get_query_filter.ts b/x-pack/plugins/security_solution/common/detection_engine/get_query_filter.ts index 8234c3a9a599d..70fe2b6187aa6 100644 --- a/x-pack/plugins/security_solution/common/detection_engine/get_query_filter.ts +++ b/x-pack/plugins/security_solution/common/detection_engine/get_query_filter.ts @@ -22,7 +22,7 @@ import { Query, Language, Index, TimestampOverrideOrUndefined } from './schemas/ export const getQueryFilter = ( query: Query, language: Language, - filters: Array>, + filters: unknown, index: Index, lists: Array, excludeExceptions: boolean = true @@ -48,7 +48,7 @@ export const getQueryFilter = ( chunkSize: 1024, }); const initialQuery = { query, language }; - const allFilters = getAllFilters((filters as unknown) as Filter[], exceptionFilter); + const allFilters = getAllFilters(filters as Filter[], exceptionFilter); return buildEsQuery(indexPattern, initialQuery, allFilters, config); }; diff --git a/x-pack/plugins/security_solution/common/endpoint/index_data.ts b/x-pack/plugins/security_solution/common/endpoint/index_data.ts index cf2b234451f50..b35504fc88659 100644 --- a/x-pack/plugins/security_solution/common/endpoint/index_data.ts +++ b/x-pack/plugins/security_solution/common/endpoint/index_data.ts @@ -7,6 +7,7 @@ import { Client } from '@elastic/elasticsearch'; import seedrandom from 'seedrandom'; +// eslint-disable-next-line import/no-extraneous-dependencies import { KbnClient } from '@kbn/test'; import { AxiosResponse } from 'axios'; import { EndpointDocGenerator, TreeOptions, Event } from './generate_data'; diff --git a/x-pack/plugins/security_solution/common/endpoint/types/index.ts b/x-pack/plugins/security_solution/common/endpoint/types/index.ts index 0b41dc5608fe9..bed9c2880440a 100644 --- a/x-pack/plugins/security_solution/common/endpoint/types/index.ts +++ b/x-pack/plugins/security_solution/common/endpoint/types/index.ts @@ -380,12 +380,12 @@ export enum HostStatus { * Default state of the host when no host information is present or host information cannot * be retrieved. e.g. API error */ - ERROR = 'error', + UNHEALTHY = 'unhealthy', /** * Host is online as indicated by its checkin status during the last checkin window */ - ONLINE = 'online', + HEALTHY = 'healthy', /** * Host is offline as indicated by its checkin status during the last checkin window @@ -393,9 +393,14 @@ export enum HostStatus { OFFLINE = 'offline', /** - * Host is unenrolling as indicated by its checkin status during the last checkin window + * Host is unenrolling, enrolling or updating as indicated by its checkin status during the last checkin window */ - UNENROLLING = 'unenrolling', + UPDATING = 'updating', + + /** + * Host is inactive as indicated by its checkin status during the last checkin window + */ + INACTIVE = 'inactive', } export enum MetadataQueryStrategyVersions { diff --git a/x-pack/plugins/security_solution/common/validate.ts b/x-pack/plugins/security_solution/common/validate.ts index 22e4179ae7050..79a0351b824e8 100644 --- a/x-pack/plugins/security_solution/common/validate.ts +++ b/x-pack/plugins/security_solution/common/validate.ts @@ -26,6 +26,19 @@ export const validate = ( return pipe(checked, fold(left, right)); }; +export const validateNonExact = ( + obj: object, + schema: T +): [t.TypeOf | null, string | null] => { + const decoded = schema.decode(obj); + const left = (errors: t.Errors): [T | null, string | null] => [ + null, + formatErrors(errors).join(','), + ]; + const right = (output: T): [T | null, string | null] => [output, null]; + return pipe(decoded, fold(left, right)); +}; + export const validateEither = ( schema: T, obj: A diff --git a/x-pack/plugins/security_solution/cypress/integration/exceptions/exceptions_modal.spec.ts b/x-pack/plugins/security_solution/cypress/integration/exceptions/exceptions_modal.spec.ts index 2e0599dfcae21..dee921b0c668a 100644 --- a/x-pack/plugins/security_solution/cypress/integration/exceptions/exceptions_modal.spec.ts +++ b/x-pack/plugins/security_solution/cypress/integration/exceptions/exceptions_modal.spec.ts @@ -133,7 +133,7 @@ describe('Exceptions modal', () => { closeExceptionBuilderModal(); }); - it.skip('Does not overwrite values of nested entry items', () => { + it('Does not overwrite values of nested entry items', () => { openExceptionModalFromRuleSettings(); cy.get(LOADING_SPINNER).should('not.exist'); @@ -144,13 +144,14 @@ describe('Exceptions modal', () => { // exception item 2 with nested field cy.get(ADD_OR_BTN).click(); - addExceptionEntryFieldValueOfItemX('c', 1, 0); + addExceptionEntryFieldValueOfItemX('agent.name', 1, 0); cy.get(ADD_NESTED_BTN).click(); addExceptionEntryFieldValueOfItemX('user.id{downarrow}{enter}', 1, 1); cy.get(ADD_AND_BTN).click(); addExceptionEntryFieldValueOfItemX('last{downarrow}{enter}', 1, 3); // This button will now read `Add non-nested button` - cy.get(ADD_NESTED_BTN).click(); + cy.get(ADD_NESTED_BTN).scrollIntoView(); + cy.get(ADD_NESTED_BTN).focus().click(); addExceptionEntryFieldValueOfItemX('@timestamp', 1, 4); // should have only deleted `user.id` @@ -161,7 +162,11 @@ describe('Exceptions modal', () => { .eq(0) .should('have.text', 'agent.name'); cy.get(EXCEPTION_ITEM_CONTAINER).eq(0).find(FIELD_INPUT).eq(1).should('have.text', 'b'); - cy.get(EXCEPTION_ITEM_CONTAINER).eq(1).find(FIELD_INPUT).eq(0).should('have.text', 'c'); + cy.get(EXCEPTION_ITEM_CONTAINER) + .eq(1) + .find(FIELD_INPUT) + .eq(0) + .should('have.text', 'agent.name'); cy.get(EXCEPTION_ITEM_CONTAINER).eq(1).find(FIELD_INPUT).eq(1).should('have.text', 'user'); cy.get(EXCEPTION_ITEM_CONTAINER).eq(1).find(FIELD_INPUT).eq(2).should('have.text', 'last'); cy.get(EXCEPTION_ITEM_CONTAINER) @@ -178,7 +183,11 @@ describe('Exceptions modal', () => { .eq(0) .should('have.text', 'agent.name'); cy.get(EXCEPTION_ITEM_CONTAINER).eq(0).find(FIELD_INPUT).eq(1).should('have.text', 'b'); - cy.get(EXCEPTION_ITEM_CONTAINER).eq(1).find(FIELD_INPUT).eq(0).should('have.text', 'c'); + cy.get(EXCEPTION_ITEM_CONTAINER) + .eq(1) + .find(FIELD_INPUT) + .eq(0) + .should('have.text', 'agent.name'); cy.get(EXCEPTION_ITEM_CONTAINER) .eq(1) .find(FIELD_INPUT) diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx index b0ffcb8c5b5b8..7e9e7c40258da 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx @@ -115,7 +115,7 @@ export const AddExceptionModal = memo(function AddExceptionModal({ onRuleChange, alertStatus, }: AddExceptionModalProps) { - const { http } = useKibana().services; + const { http, data } = useKibana().services; const [errorsExist, setErrorExists] = useState(false); const [comment, setComment] = useState(''); const { rule: maybeRule, loading: isRuleLoading } = useRuleAsync(ruleId); @@ -394,6 +394,8 @@ export const AddExceptionModal = memo(function AddExceptionModal({ {i18n.EXCEPTION_BUILDER_INFO} ({ v4: jest.fn().mockReturnValue('123'), })); -const getEntryNestedWithIdMock = () => ({ - id: '123', - ...getEntryNestedMock(), -}); - -const getEntryExistsWithIdMock = () => ({ - id: '123', - ...getEntryExistsMock(), -}); - -const getEntryMatchWithIdMock = () => ({ - id: '123', - ...getEntryMatchMock(), -}); - -const getEntryMatchAnyWithIdMock = () => ({ - id: '123', - ...getEntryMatchAnyMock(), -}); - const getMockIndexPattern = (): IIndexPattern => ({ id: '1234', title: 'logstash-*', fields, }); -const getMockBuilderEntry = (): FormattedBuilderEntry => ({ - id: '123', - field: getField('ip'), - operator: isOperator, - value: 'some value', - nested: undefined, - parent: undefined, - entryIndex: 0, - correspondingKeywordField: undefined, -}); - -const getMockNestedBuilderEntry = (): FormattedBuilderEntry => ({ - id: '123', - field: getField('nestedField.child'), - operator: isOperator, - value: 'some value', - nested: 'child', - parent: { - parent: { - ...getEntryNestedWithIdMock(), - field: 'nestedField', - entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], - }, - parentIndex: 0, - }, - entryIndex: 0, - correspondingKeywordField: undefined, -}); - -const getMockNestedParentBuilderEntry = (): FormattedBuilderEntry => ({ - id: '123', - field: { ...getField('nestedField.child'), name: 'nestedField', esTypes: ['nested'] }, - operator: isOperator, - value: undefined, - nested: 'parent', - parent: undefined, - entryIndex: 0, - correspondingKeywordField: undefined, -}); - const mockEndpointFields = [ { name: 'file.path.caseless', @@ -154,1254 +48,22 @@ export const getEndpointField = (name: string) => mockEndpointFields.find((field) => field.name === name) as IFieldType; describe('Exception builder helpers', () => { - describe('#getCorrespondingKeywordField', () => { - test('it returns matching keyword field if "selectedFieldIsTextType" is true and keyword field exists', () => { - const output = getCorrespondingKeywordField({ - fields, - selectedField: 'machine.os.raw.text', - }); + describe('#filterIndexPatterns', () => { + test('it returns index patterns without filtering if list type is "detection"', () => { + const mockIndexPatterns = getMockIndexPattern(); + const output = filterIndexPatterns(mockIndexPatterns, 'detection'); - expect(output).toEqual(getField('machine.os.raw')); + expect(output).toEqual(mockIndexPatterns); }); - test('it returns undefined if "selectedFieldIsTextType" is false', () => { - const output = getCorrespondingKeywordField({ - fields, - selectedField: 'machine.os.raw', - }); - - expect(output).toEqual(undefined); - }); - - test('it returns undefined if "selectedField" is empty string', () => { - const output = getCorrespondingKeywordField({ - fields, - selectedField: '', - }); - - expect(output).toEqual(undefined); - }); - - test('it returns undefined if "selectedField" is undefined', () => { - const output = getCorrespondingKeywordField({ - fields, - selectedField: undefined, - }); - - expect(output).toEqual(undefined); - }); - }); - - describe('#getFilteredIndexPatterns', () => { - describe('list type detections', () => { - test('it returns nested fields that match parent value when "item.nested" is "child"', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); - const expected: IIndexPattern = { - fields: [{ ...getField('nestedField.child'), name: 'child' }], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - - test('it returns only parent nested field when "item.nested" is "parent" and nested parent field is not undefined', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItem: FormattedBuilderEntry = getMockNestedParentBuilderEntry(); - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); - const expected: IIndexPattern = { - fields: [{ ...getField('nestedField.child'), name: 'nestedField', esTypes: ['nested'] }], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - - test('it returns only nested fields when "item.nested" is "parent" and nested parent field is undefined', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItem: FormattedBuilderEntry = { - ...getMockNestedParentBuilderEntry(), - field: undefined, - }; - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); - const expected: IIndexPattern = { - fields: [ - { ...getField('nestedField.child') }, - { ...getField('nestedField.nestedChild.doublyNestedChild') }, - ], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - - test('it returns all fields unfiletered if "item.nested" is not "child" or "parent"', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'detection'); - const expected: IIndexPattern = { - fields: [...fields], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - }); - - describe('list type endpoint', () => { - let payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - - beforeAll(() => { - payloadIndexPattern = { - ...payloadIndexPattern, - fields: [...payloadIndexPattern.fields, ...mockEndpointFields], - }; - }); - - test('it returns nested fields that match parent value when "item.nested" is "child"', () => { - const payloadItem: FormattedBuilderEntry = { - id: '123', - field: getEndpointField('file.Ext.code_signature.status'), - operator: isOperator, - value: 'some value', - nested: 'child', - parent: { - parent: { - ...getEntryNestedWithIdMock(), - field: 'file.Ext.code_signature', - entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], - }, - parentIndex: 0, - }, - entryIndex: 0, - correspondingKeywordField: undefined, - }; - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'endpoint'); - const expected: IIndexPattern = { - fields: [{ ...getEndpointField('file.Ext.code_signature.status'), name: 'status' }], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - - test('it returns only parent nested field when "item.nested" is "parent" and nested parent field is not undefined', () => { - const payloadItem: FormattedBuilderEntry = { - ...getMockNestedParentBuilderEntry(), - field: { - ...getEndpointField('file.Ext.code_signature.status'), - name: 'file.Ext.code_signature', - esTypes: ['nested'], - }, - }; - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'endpoint'); - const expected: IIndexPattern = { - fields: [ - { - aggregatable: false, - count: 0, - esTypes: ['nested'], - name: 'file.Ext.code_signature', - readFromDocValues: false, - scripted: false, - searchable: true, - subType: { - nested: { - path: 'file.Ext.code_signature', - }, - }, - type: 'string', - }, - ], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - - test('it returns only nested fields when "item.nested" is "parent" and nested parent field is undefined', () => { - const payloadItem: FormattedBuilderEntry = { - ...getMockNestedParentBuilderEntry(), - field: undefined, - }; - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'endpoint'); - const expected: IIndexPattern = { - fields: [getEndpointField('file.Ext.code_signature.status')], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - - test('it returns all fields that matched those in "exceptionable_fields.json" with no further filtering if "item.nested" is not "child" or "parent"', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getFilteredIndexPatterns(payloadIndexPattern, payloadItem, 'endpoint'); - const expected: IIndexPattern = { - fields: [ - { - aggregatable: false, - count: 0, - esTypes: ['keyword'], - name: 'file.path.caseless', - readFromDocValues: false, - scripted: false, - searchable: true, - type: 'string', - }, - { - name: 'file.Ext.code_signature.status', - type: 'string', - esTypes: ['text'], - count: 0, - scripted: false, - searchable: true, - aggregatable: false, - readFromDocValues: false, - subType: { nested: { path: 'file.Ext.code_signature' } }, - }, - ], - id: '1234', - title: 'logstash-*', - }; - expect(output).toEqual(expected); - }); - }); - }); - - describe('#getFormattedBuilderEntry', () => { - test('it returns entry with a value for "correspondingKeywordField" when "item.field" is of type "text" and matching keyword field exists', () => { - const payloadIndexPattern: IIndexPattern = { + test('it returns filtered index patterns if list type is "endpoint"', () => { + const mockIndexPatterns = { ...getMockIndexPattern(), - fields: [ - ...fields, - { - name: 'machine.os.raw.text', - type: 'string', - esTypes: ['text'], - count: 0, - scripted: false, - searchable: false, - aggregatable: false, - readFromDocValues: true, - }, - ], - }; - const payloadItem: BuilderEntry = { - ...getEntryMatchWithIdMock(), - field: 'machine.os.raw.text', - value: 'some os', - }; - const output = getFormattedBuilderEntry( - payloadIndexPattern, - payloadItem, - 0, - undefined, - undefined - ); - const expected: FormattedBuilderEntry = { - id: '123', - entryIndex: 0, - field: { - name: 'machine.os.raw.text', - type: 'string', - esTypes: ['text'], - count: 0, - scripted: false, - searchable: false, - aggregatable: false, - readFromDocValues: true, - }, - nested: undefined, - operator: isOperator, - parent: undefined, - value: 'some os', - correspondingKeywordField: getField('machine.os.raw'), - }; - expect(output).toEqual(expected); - }); - - test('it returns "FormattedBuilderEntry" with value "nested" of "child" when "parent" and "parentIndex" are defined', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItem: BuilderEntry = { ...getEntryMatchWithIdMock(), field: 'child' }; - const payloadParent: EntryNested = { - ...getEntryNestedWithIdMock(), - field: 'nestedField', - entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], - }; - const output = getFormattedBuilderEntry( - payloadIndexPattern, - payloadItem, - 0, - payloadParent, - 1 - ); - const expected: FormattedBuilderEntry = { - id: '123', - entryIndex: 0, - field: { - aggregatable: false, - count: 0, - esTypes: ['text'], - name: 'child', - readFromDocValues: false, - scripted: false, - searchable: true, - subType: { - nested: { - path: 'nestedField', - }, - }, - type: 'string', - }, - nested: 'child', - operator: isOperator, - parent: { - parent: { - id: '123', - entries: [{ ...payloadItem }], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - parentIndex: 1, - }, - value: 'some host name', - correspondingKeywordField: undefined, - }; - expect(output).toEqual(expected); - }); - - test('it returns non nested "FormattedBuilderEntry" when "parent" and "parentIndex" are not defined', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItem: BuilderEntry = { - ...getEntryMatchWithIdMock(), - field: 'ip', - value: 'some ip', - }; - const output = getFormattedBuilderEntry( - payloadIndexPattern, - payloadItem, - 0, - undefined, - undefined - ); - const expected: FormattedBuilderEntry = { - id: '123', - entryIndex: 0, - field: { - aggregatable: true, - count: 0, - esTypes: ['ip'], - name: 'ip', - readFromDocValues: true, - scripted: false, - searchable: true, - type: 'ip', - }, - nested: undefined, - operator: isOperator, - parent: undefined, - value: 'some ip', - correspondingKeywordField: undefined, - }; - expect(output).toEqual(expected); - }); - }); - - describe('#isEntryNested', () => { - test('it returns "false" if payload is not of type EntryNested', () => { - const payload: BuilderEntry = getEntryMatchWithIdMock(); - const output = isEntryNested(payload); - const expected = false; - expect(output).toEqual(expected); - }); - - test('it returns "true if payload is of type EntryNested', () => { - const payload: EntryNested = getEntryNestedWithIdMock(); - const output = isEntryNested(payload); - const expected = true; - expect(output).toEqual(expected); - }); - }); - - describe('#getFormattedBuilderEntries', () => { - test('it returns formatted entry with field undefined if it unable to find a matching index pattern field', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItems: BuilderEntry[] = [getEntryMatchWithIdMock()]; - const output = getFormattedBuilderEntries(payloadIndexPattern, payloadItems); - const expected: FormattedBuilderEntry[] = [ - { - id: '123', - entryIndex: 0, - field: undefined, - nested: undefined, - operator: isOperator, - parent: undefined, - value: 'some host name', - correspondingKeywordField: undefined, - }, - ]; - expect(output).toEqual(expected); - }); - - test('it returns formatted entries when no nested entries exist', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadItems: BuilderEntry[] = [ - { ...getEntryMatchWithIdMock(), field: 'ip', value: 'some ip' }, - { ...getEntryMatchAnyWithIdMock(), field: 'extension', value: ['some extension'] }, - ]; - const output = getFormattedBuilderEntries(payloadIndexPattern, payloadItems); - const expected: FormattedBuilderEntry[] = [ - { - id: '123', - entryIndex: 0, - field: { - aggregatable: true, - count: 0, - esTypes: ['ip'], - name: 'ip', - readFromDocValues: true, - scripted: false, - searchable: true, - type: 'ip', - }, - nested: undefined, - operator: isOperator, - parent: undefined, - value: 'some ip', - correspondingKeywordField: undefined, - }, - { - id: '123', - entryIndex: 1, - field: { - aggregatable: true, - count: 0, - esTypes: ['keyword'], - name: 'extension', - readFromDocValues: true, - scripted: false, - searchable: true, - type: 'string', - }, - nested: undefined, - operator: isOneOfOperator, - parent: undefined, - value: ['some extension'], - correspondingKeywordField: undefined, - }, - ]; - expect(output).toEqual(expected); - }); - - test('it returns formatted entries when nested entries exist', () => { - const payloadIndexPattern: IIndexPattern = getMockIndexPattern(); - const payloadParent: EntryNested = { - ...getEntryNestedWithIdMock(), - field: 'nestedField', - entries: [{ ...getEntryMatchWithIdMock(), field: 'child' }], - }; - const payloadItems: BuilderEntry[] = [ - { ...getEntryMatchWithIdMock(), field: 'ip', value: 'some ip' }, - { ...payloadParent }, - ]; - - const output = getFormattedBuilderEntries(payloadIndexPattern, payloadItems); - const expected: FormattedBuilderEntry[] = [ - { - id: '123', - entryIndex: 0, - field: { - aggregatable: true, - count: 0, - esTypes: ['ip'], - name: 'ip', - readFromDocValues: true, - scripted: false, - searchable: true, - type: 'ip', - }, - nested: undefined, - operator: isOperator, - parent: undefined, - value: 'some ip', - correspondingKeywordField: undefined, - }, - { - id: '123', - entryIndex: 1, - field: { - aggregatable: false, - esTypes: ['nested'], - name: 'nestedField', - searchable: false, - type: 'string', - }, - nested: 'parent', - operator: isOperator, - parent: undefined, - value: undefined, - correspondingKeywordField: undefined, - }, - { - id: '123', - entryIndex: 0, - field: { - aggregatable: false, - count: 0, - esTypes: ['text'], - name: 'child', - readFromDocValues: false, - scripted: false, - searchable: true, - subType: { - nested: { - path: 'nestedField', - }, - }, - type: 'string', - }, - nested: 'child', - operator: isOperator, - parent: { - parent: { - id: '123', - entries: [ - { - id: '123', - field: 'child', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: 'some host name', - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - parentIndex: 1, - }, - value: 'some host name', - correspondingKeywordField: undefined, - }, - ]; - expect(output).toEqual(expected); - }); - }); - - describe('#getUpdatedEntriesOnDelete', () => { - test('it removes entry corresponding to "entryIndex"', () => { - const payloadItem: ExceptionsBuilderExceptionItem = { - ...getExceptionListItemSchemaMock(), - entries: ENTRIES_WITH_IDS, - }; - const output = getUpdatedEntriesOnDelete(payloadItem, 0, null); - const expected: ExceptionsBuilderExceptionItem = { - ...getExceptionListItemSchemaMock(), - entries: [ - { - id: '123', - field: 'some.not.nested.field', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: 'some value', - }, - ], - }; - expect(output).toEqual(expected); - }); - - test('it removes nested entry of "entryIndex" with corresponding parent index', () => { - const payloadItem: ExceptionsBuilderExceptionItem = { - ...getExceptionListItemSchemaMock(), - entries: [ - { - ...getEntryNestedWithIdMock(), - entries: [{ ...getEntryExistsWithIdMock() }, { ...getEntryMatchAnyWithIdMock() }], - }, - ], - }; - const output = getUpdatedEntriesOnDelete(payloadItem, 0, 0); - const expected: ExceptionsBuilderExceptionItem = { - ...getExceptionListItemSchemaMock(), - entries: [ - { ...getEntryNestedWithIdMock(), entries: [{ ...getEntryMatchAnyWithIdMock() }] }, - ], - }; - expect(output).toEqual(expected); - }); - - test('it removes entire nested entry if after deleting specified nested entry, there are no more nested entries left', () => { - const payloadItem: ExceptionsBuilderExceptionItem = { - ...getExceptionListItemSchemaMock(), - entries: [ - { - ...getEntryNestedWithIdMock(), - entries: [{ ...getEntryExistsWithIdMock() }], - }, - ], - }; - const output = getUpdatedEntriesOnDelete(payloadItem, 0, 0); - const expected: ExceptionsBuilderExceptionItem = { - ...getExceptionListItemSchemaMock(), - entries: [], - }; - expect(output).toEqual(expected); - }); - }); - - describe('#getEntryFromOperator', () => { - test('it returns current value when switching from "is" to "is not"', () => { - const payloadOperator: OperatorOption = isNotOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - value: 'I should stay the same', - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryMatch & { id?: string } = { - id: '123', - field: 'ip', - operator: 'excluded', - type: OperatorTypeEnum.MATCH, - value: 'I should stay the same', - }; - expect(output).toEqual(expected); - }); - - test('it returns current value when switching from "is not" to "is"', () => { - const payloadOperator: OperatorOption = isOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isNotOperator, - value: 'I should stay the same', - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryMatch & { id?: string } = { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: 'I should stay the same', - }; - expect(output).toEqual(expected); - }); - - test('it returns empty value when switching operator types to "match"', () => { - const payloadOperator: OperatorOption = isOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isNotOneOfOperator, - value: ['I should stay the same'], - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryMatch & { id?: string } = { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: '', - }; - expect(output).toEqual(expected); - }); - - test('it returns current value when switching from "is one of" to "is not one of"', () => { - const payloadOperator: OperatorOption = isNotOneOfOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOneOfOperator, - value: ['I should stay the same'], - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryMatchAny & { id?: string } = { - id: '123', - field: 'ip', - operator: 'excluded', - type: OperatorTypeEnum.MATCH_ANY, - value: ['I should stay the same'], - }; - expect(output).toEqual(expected); - }); - - test('it returns current value when switching from "is not one of" to "is one of"', () => { - const payloadOperator: OperatorOption = isOneOfOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isNotOneOfOperator, - value: ['I should stay the same'], - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryMatchAny & { id?: string } = { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH_ANY, - value: ['I should stay the same'], - }; - expect(output).toEqual(expected); - }); - - test('it returns empty value when switching operator types to "match_any"', () => { - const payloadOperator: OperatorOption = isOneOfOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOperator, - value: 'I should stay the same', - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryMatchAny & { id?: string } = { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH_ANY, - value: [], + fields: [...fields, ...mockEndpointFields], }; - expect(output).toEqual(expected); - }); - - test('it returns current value when switching from "exists" to "does not exist"', () => { - const payloadOperator: OperatorOption = doesNotExistOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: existsOperator, - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryExists & { id?: string } = { - id: '123', - field: 'ip', - operator: 'excluded', - type: 'exists', - }; - expect(output).toEqual(expected); - }); - - test('it returns current value when switching from "does not exist" to "exists"', () => { - const payloadOperator: OperatorOption = existsOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: doesNotExistOperator, - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryExists & { id?: string } = { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: 'exists', - }; - expect(output).toEqual(expected); - }); - - test('it returns empty value when switching operator types to "exists"', () => { - const payloadOperator: OperatorOption = existsOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOperator, - value: 'I should stay the same', - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryExists & { id?: string } = { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: 'exists', - }; - expect(output).toEqual(expected); - }); - - test('it returns empty value when switching operator types to "list"', () => { - const payloadOperator: OperatorOption = isInListOperator; - const payloadEntry: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOperator, - value: 'I should stay the same', - }; - const output = getEntryFromOperator(payloadOperator, payloadEntry); - const expected: EntryList & { id?: string } = { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: 'list', - list: { id: '', type: 'ip' }, - }; - expect(output).toEqual(expected); - }); - }); - - describe('#getOperatorOptions', () => { - test('it returns "isOperator" when field type is nested but field itself has not yet been selected', () => { - const payloadItem: FormattedBuilderEntry = getMockNestedParentBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'endpoint', false); - const expected: OperatorOption[] = [isOperator]; - expect(output).toEqual(expected); - }); - - test('it returns "isOperator" if no field selected', () => { - const payloadItem: FormattedBuilderEntry = { ...getMockBuilderEntry(), field: undefined }; - const output = getOperatorOptions(payloadItem, 'endpoint', false); - const expected: OperatorOption[] = [isOperator]; - expect(output).toEqual(expected); - }); - - test('it returns "isOperator" and "isOneOfOperator" if item is nested and "listType" is "endpoint"', () => { - const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'endpoint', false); - const expected: OperatorOption[] = [isOperator, isOneOfOperator]; - expect(output).toEqual(expected); - }); - - test('it returns "isOperator" and "isOneOfOperator" if "listType" is "endpoint"', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'endpoint', false); - const expected: OperatorOption[] = [isOperator, isOneOfOperator]; - expect(output).toEqual(expected); - }); + const output = filterIndexPatterns(mockIndexPatterns, 'endpoint'); - test('it returns "isOperator" if "listType" is "endpoint" and field type is boolean', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'endpoint', true); - const expected: OperatorOption[] = [isOperator]; - expect(output).toEqual(expected); - }); - - test('it returns "isOperator", "isOneOfOperator", and "existsOperator" if item is nested and "listType" is "detection"', () => { - const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'detection', false); - const expected: OperatorOption[] = [isOperator, isOneOfOperator, existsOperator]; - expect(output).toEqual(expected); - }); - - test('it returns "isOperator" and "existsOperator" if item is nested, "listType" is "detection", and field type is boolean', () => { - const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'detection', true); - const expected: OperatorOption[] = [isOperator, existsOperator]; - expect(output).toEqual(expected); - }); - - test('it returns all operator options if "listType" is "detection"', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'detection', false); - const expected: OperatorOption[] = EXCEPTION_OPERATORS; - expect(output).toEqual(expected); - }); - - test('it returns "isOperator", "isNotOperator", "doesNotExistOperator" and "existsOperator" if field type is boolean', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'detection', true); - const expected: OperatorOption[] = [ - isOperator, - isNotOperator, - existsOperator, - doesNotExistOperator, - ]; - expect(output).toEqual(expected); - }); - - test('it returns list operators if specified to', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'detection', false, true); - expect(output).toEqual(EXCEPTION_OPERATORS); - }); - - test('it does not return list operators if specified not to', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getOperatorOptions(payloadItem, 'detection', false, false); - expect(output).toEqual(EXCEPTION_OPERATORS_SANS_LISTS); - }); - }); - - describe('#getEntryOnFieldChange', () => { - test('it returns nested entry with single new subentry when "item.nested" is "parent"', () => { - const payloadItem: FormattedBuilderEntry = getMockNestedParentBuilderEntry(); - const payloadIFieldType: IFieldType = getField('nestedField.child'); - const output = getEntryOnFieldChange(payloadItem, payloadIFieldType); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: 'child', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: '', - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - - test('it returns nested entry with newly selected field value when "item.nested" is "child"', () => { - const payloadItem: FormattedBuilderEntry = { - ...getMockNestedBuilderEntry(), - parent: { - parent: { - ...getEntryNestedWithIdMock(), - field: 'nestedField', - entries: [ - { ...getEntryMatchWithIdMock(), field: 'child' }, - getEntryMatchAnyWithIdMock(), - ], - }, - parentIndex: 0, - }, - }; - const payloadIFieldType: IFieldType = getField('nestedField.child'); - const output = getEntryOnFieldChange(payloadItem, payloadIFieldType); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: 'child', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: '', - }, - getEntryMatchAnyWithIdMock(), - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - - test('it returns field of type "match" with updated field if not a nested entry', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const payloadIFieldType: IFieldType = getField('ip'); - const output = getEntryOnFieldChange(payloadItem, payloadIFieldType); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - field: 'ip', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: '', - }, - }; - expect(output).toEqual(expected); - }); - }); - - describe('#getEntryOnOperatorChange', () => { - test('it returns updated subentry preserving its value when entry is not switching operator types', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const payloadOperator: OperatorOption = isNotOperator; - const output = getEntryOnOperatorChange(payloadItem, payloadOperator); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: 'ip', - type: OperatorTypeEnum.MATCH, - value: 'some value', - operator: 'excluded', - }, - index: 0, - }; - expect(output).toEqual(expected); - }); - - test('it returns updated subentry resetting its value when entry is switching operator types', () => { - const payloadItem: FormattedBuilderEntry = getMockBuilderEntry(); - const payloadOperator: OperatorOption = isOneOfOperator; - const output = getEntryOnOperatorChange(payloadItem, payloadOperator); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: 'ip', - type: OperatorTypeEnum.MATCH_ANY, - value: [], - operator: OperatorEnum.INCLUDED, - }, - index: 0, - }; - expect(output).toEqual(expected); - }); - - test('it returns updated subentry preserving its value when entry is nested and not switching operator types', () => { - const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); - const payloadOperator: OperatorOption = isNotOperator; - const output = getEntryOnOperatorChange(payloadItem, payloadOperator); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: 'child', - operator: OperatorEnum.EXCLUDED, - type: OperatorTypeEnum.MATCH, - value: 'some value', - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - - test('it returns updated subentry resetting its value when entry is nested and switching operator types', () => { - const payloadItem: FormattedBuilderEntry = getMockNestedBuilderEntry(); - const payloadOperator: OperatorOption = isOneOfOperator; - const output = getEntryOnOperatorChange(payloadItem, payloadOperator); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: 'child', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH_ANY, - value: [], - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - }); - - describe('#getEntryOnMatchChange', () => { - test('it returns entry with updated value', () => { - const payload: FormattedBuilderEntry = getMockBuilderEntry(); - const output = getEntryOnMatchChange(payload, 'jibber jabber'); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: 'ip', - type: OperatorTypeEnum.MATCH, - value: 'jibber jabber', - operator: OperatorEnum.INCLUDED, - }, - index: 0, - }; - expect(output).toEqual(expected); - }); - - test('it returns entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { - const payload: FormattedBuilderEntry = { ...getMockBuilderEntry(), field: undefined }; - const output = getEntryOnMatchChange(payload, 'jibber jabber'); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: '', - type: OperatorTypeEnum.MATCH, - value: 'jibber jabber', - operator: OperatorEnum.INCLUDED, - }, - index: 0, - }; - expect(output).toEqual(expected); - }); - - test('it returns nested entry with updated value', () => { - const payload: FormattedBuilderEntry = getMockNestedBuilderEntry(); - const output = getEntryOnMatchChange(payload, 'jibber jabber'); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: 'child', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: 'jibber jabber', - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - - test('it returns nested entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { - const payload: FormattedBuilderEntry = { ...getMockNestedBuilderEntry(), field: undefined }; - const output = getEntryOnMatchChange(payload, 'jibber jabber'); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: '', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH, - value: 'jibber jabber', - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - }); - - describe('#getEntryOnMatchAnyChange', () => { - test('it returns entry with updated value', () => { - const payload: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOneOfOperator, - value: ['some value'], - }; - const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: 'ip', - type: OperatorTypeEnum.MATCH_ANY, - value: ['jibber jabber'], - operator: OperatorEnum.INCLUDED, - }, - index: 0, - }; - expect(output).toEqual(expected); - }); - - test('it returns entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { - const payload: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOneOfOperator, - value: ['some value'], - field: undefined, - }; - const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: '', - type: OperatorTypeEnum.MATCH_ANY, - value: ['jibber jabber'], - operator: OperatorEnum.INCLUDED, - }, - index: 0, - }; - expect(output).toEqual(expected); - }); - - test('it returns nested entry with updated value', () => { - const payload: FormattedBuilderEntry = { - ...getMockNestedBuilderEntry(), - parent: { - parent: { - ...getEntryNestedWithIdMock(), - field: 'nestedField', - entries: [{ ...getEntryMatchAnyWithIdMock(), field: 'child' }], - }, - parentIndex: 0, - }, - }; - const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: 'child', - type: OperatorTypeEnum.MATCH_ANY, - value: ['jibber jabber'], - operator: OperatorEnum.INCLUDED, - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - - test('it returns nested entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { - const payload: FormattedBuilderEntry = { - ...getMockNestedBuilderEntry(), - field: undefined, - parent: { - parent: { - ...getEntryNestedWithIdMock(), - field: 'nestedField', - entries: [{ ...getEntryMatchAnyWithIdMock(), field: 'child' }], - }, - parentIndex: 0, - }, - }; - const output = getEntryOnMatchAnyChange(payload, ['jibber jabber']); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - index: 0, - updatedEntry: { - id: '123', - entries: [ - { - id: '123', - field: '', - operator: OperatorEnum.INCLUDED, - type: OperatorTypeEnum.MATCH_ANY, - value: ['jibber jabber'], - }, - ], - field: 'nestedField', - type: OperatorTypeEnum.NESTED, - }, - }; - expect(output).toEqual(expected); - }); - }); - - describe('#getEntryOnListChange', () => { - test('it returns entry with updated value', () => { - const payload: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOneOfOperator, - value: '1234', - }; - const output = getEntryOnListChange(payload, getListResponseMock()); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: 'ip', - type: 'list', - list: { id: 'some-list-id', type: 'ip' }, - operator: OperatorEnum.INCLUDED, - }, - index: 0, - }; - expect(output).toEqual(expected); - }); - - test('it returns entry with updated value and "field" of empty string if entry does not have a "field" defined', () => { - const payload: FormattedBuilderEntry = { - ...getMockBuilderEntry(), - operator: isOneOfOperator, - value: '1234', - field: undefined, - }; - const output = getEntryOnListChange(payload, getListResponseMock()); - const expected: { updatedEntry: BuilderEntry & { id?: string }; index: number } = { - updatedEntry: { - id: '123', - field: '', - type: 'list', - list: { id: 'some-list-id', type: 'ip' }, - operator: OperatorEnum.INCLUDED, - }, - index: 0, - }; - expect(output).toEqual(expected); + expect(output).toEqual({ ...getMockIndexPattern(), fields: [...mockEndpointFields] }); }); }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/helpers.tsx index 8afdbce68c69a..0ad9814484a2f 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/helpers.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/helpers.tsx @@ -7,616 +7,21 @@ import uuid from 'uuid'; -import { addIdToItem } from '../../../../../common/add_remove_id_to_item'; -import { IIndexPattern, IFieldType } from '../../../../../../../../src/plugins/data/common'; -import { - Entry, - OperatorTypeEnum, - EntryNested, - ExceptionListType, - entriesList, - ListSchema, - OperatorEnum, -} from '../../../../lists_plugin_deps'; -import { - isOperator, - existsOperator, - isOneOfOperator, - EXCEPTION_OPERATORS, - EXCEPTION_OPERATORS_SANS_LISTS, - isNotOperator, - doesNotExistOperator, -} from '../../autocomplete/operators'; -import { OperatorOption } from '../../autocomplete/types'; -import { - BuilderEntry, - FormattedBuilderEntry, - ExceptionsBuilderExceptionItem, - EmptyEntry, - EmptyNestedEntry, -} from '../types'; -import { getEntryValue, getExceptionOperatorSelect } from '../helpers'; +import { IIndexPattern } from '../../../../../../../../src/plugins/data/common'; +import { OperatorTypeEnum, ExceptionListType, OperatorEnum } from '../../../../lists_plugin_deps'; +import { ExceptionsBuilderExceptionItem, EmptyEntry, EmptyNestedEntry } from '../types'; import exceptionableFields from '../exceptionable_fields.json'; -/** - * Returns filtered index patterns based on the field - if a user selects to - * add nested entry, should only show nested fields, if item is the parent - * field of a nested entry, we only display the parent field - * - * @param patterns IIndexPattern containing available fields on rule index - * @param item exception item entry - * set to add a nested field - */ -export const getFilteredIndexPatterns = ( +export const filterIndexPatterns = ( patterns: IIndexPattern, - item: FormattedBuilderEntry, type: ExceptionListType ): IIndexPattern => { - const indexPatterns = { - ...patterns, - fields: patterns.fields.filter(({ name }) => - type === 'endpoint' ? exceptionableFields.includes(name) : true - ), - }; - - if (item.nested === 'child' && item.parent != null) { - // when user has selected a nested entry, only fields with the common parent are shown - return { - ...indexPatterns, - fields: indexPatterns.fields - .filter((indexField) => { - const fieldHasCommonParentPath = - indexField.subType != null && - indexField.subType.nested != null && - item.parent != null && - indexField.subType.nested.path === item.parent.parent.field; - - return fieldHasCommonParentPath; - }) - .map((f) => { - const fieldNameWithoutParentPath = f.name.split('.').slice(-1)[0]; - return { ...f, name: fieldNameWithoutParentPath }; - }), - }; - } else if (item.nested === 'parent' && item.field != null) { - // when user has selected a nested entry, right above it we show the common parent - return { ...indexPatterns, fields: [item.field] }; - } else if (item.nested === 'parent' && item.field == null) { - // when user selects to add a nested entry, only nested fields are shown as options - return { - ...indexPatterns, - fields: indexPatterns.fields.filter( - (field) => field.subType != null && field.subType.nested != null - ), - }; - } else { - return indexPatterns; - } -}; - -/** - * Fields of type 'text' do not generate autocomplete values, we want - * to find it's corresponding keyword type (if available) which does - * generate autocomplete values - * - * @param fields IFieldType fields - * @param selectedField the field name that was selected - * @param isTextType we only want a corresponding keyword field if - * the selected field is of type 'text' - * - */ -export const getCorrespondingKeywordField = ({ - fields, - selectedField, -}: { - fields: IFieldType[]; - selectedField: string | undefined; -}): IFieldType | undefined => { - const selectedFieldBits = - selectedField != null && selectedField !== '' ? selectedField.split('.') : []; - const selectedFieldIsTextType = selectedFieldBits.slice(-1)[0] === 'text'; - - if (selectedFieldIsTextType && selectedFieldBits.length > 0) { - const keywordField = selectedFieldBits.slice(0, selectedFieldBits.length - 1).join('.'); - const [foundKeywordField] = fields.filter( - ({ name }) => keywordField !== '' && keywordField === name - ); - return foundKeywordField; - } - - return undefined; -}; - -/** - * Formats the entry into one that is easily usable for the UI, most of the - * complexity was introduced with nested fields - * - * @param patterns IIndexPattern containing available fields on rule index - * @param item exception item entry - * @param itemIndex entry index - * @param parent nested entries hold copy of their parent for use in various logic - * @param parentIndex corresponds to the entry index, this might seem obvious, but - * was added to ensure that nested items could be identified with their parent entry - */ -export const getFormattedBuilderEntry = ( - indexPattern: IIndexPattern, - item: BuilderEntry, - itemIndex: number, - parent: EntryNested | undefined, - parentIndex: number | undefined -): FormattedBuilderEntry => { - const { fields } = indexPattern; - const field = parent != null ? `${parent.field}.${item.field}` : item.field; - const [foundField] = fields.filter(({ name }) => field != null && field === name); - const correspondingKeywordField = getCorrespondingKeywordField({ - fields, - selectedField: field, - }); - - if (parent != null && parentIndex != null) { - return { - field: - foundField != null - ? { ...foundField, name: foundField.name.split('.').slice(-1)[0] } - : foundField, - correspondingKeywordField, - id: item.id ?? `${itemIndex}`, - operator: getExceptionOperatorSelect(item), - value: getEntryValue(item), - nested: 'child', - parent: { parent, parentIndex }, - entryIndex: itemIndex, - }; - } else { - return { - field: foundField, - id: item.id ?? `${itemIndex}`, - correspondingKeywordField, - operator: getExceptionOperatorSelect(item), - value: getEntryValue(item), - nested: undefined, - parent: undefined, - entryIndex: itemIndex, - }; - } -}; - -export const isEntryNested = (item: BuilderEntry): item is EntryNested => { - return (item as EntryNested).entries != null; -}; - -/** - * Formats the entries to be easily usable for the UI, most of the - * complexity was introduced with nested fields - * - * @param patterns IIndexPattern containing available fields on rule index - * @param entries exception item entries - * @param addNested boolean noting whether or not UI is currently - * set to add a nested field - * @param parent nested entries hold copy of their parent for use in various logic - * @param parentIndex corresponds to the entry index, this might seem obvious, but - * was added to ensure that nested items could be identified with their parent entry - */ -export const getFormattedBuilderEntries = ( - indexPattern: IIndexPattern, - entries: BuilderEntry[], - parent?: EntryNested, - parentIndex?: number -): FormattedBuilderEntry[] => { - return entries.reduce((acc, item, index) => { - const isNewNestedEntry = item.type === 'nested' && item.entries.length === 0; - if (item.type !== 'nested' && !isNewNestedEntry) { - const newItemEntry: FormattedBuilderEntry = getFormattedBuilderEntry( - indexPattern, - item, - index, - parent, - parentIndex - ); - return [...acc, newItemEntry]; - } else { - const parentEntry: FormattedBuilderEntry = { - operator: isOperator, - id: item.id ?? `${index}`, - nested: 'parent', - field: isNewNestedEntry - ? undefined - : { - name: item.field ?? '', - aggregatable: false, - searchable: false, - type: 'string', - esTypes: ['nested'], - }, - value: undefined, - entryIndex: index, - parent: undefined, - correspondingKeywordField: undefined, - }; - - // User has selected to add a nested field, but not yet selected the field - if (isNewNestedEntry) { - return [...acc, parentEntry]; + return type === 'endpoint' + ? { + ...patterns, + fields: patterns.fields.filter(({ name }) => exceptionableFields.includes(name)), } - - if (isEntryNested(item)) { - const nestedItems = getFormattedBuilderEntries(indexPattern, item.entries, item, index); - - return [...acc, parentEntry, ...nestedItems]; - } - - return [...acc]; - } - }, []); -}; - -/** - * Determines whether an entire entry, exception item, or entry within a nested - * entry needs to be removed - * - * @param exceptionItem - * @param entryIndex index of given entry, for nested entries, this will correspond - * to their parent index - * @param nestedEntryIndex index of nested entry - * - */ -export const getUpdatedEntriesOnDelete = ( - exceptionItem: ExceptionsBuilderExceptionItem, - entryIndex: number, - nestedParentIndex: number | null -): ExceptionsBuilderExceptionItem => { - const itemOfInterest: BuilderEntry = exceptionItem.entries[nestedParentIndex ?? entryIndex]; - - if (nestedParentIndex != null && itemOfInterest.type === OperatorTypeEnum.NESTED) { - const updatedEntryEntries = [ - ...itemOfInterest.entries.slice(0, entryIndex), - ...itemOfInterest.entries.slice(entryIndex + 1), - ]; - - if (updatedEntryEntries.length === 0) { - return { - ...exceptionItem, - entries: [ - ...exceptionItem.entries.slice(0, nestedParentIndex), - ...exceptionItem.entries.slice(nestedParentIndex + 1), - ], - }; - } else { - const { field } = itemOfInterest; - const updatedItemOfInterest: EntryNested | EmptyNestedEntry = { - field, - id: itemOfInterest.id ?? `${entryIndex}`, - type: OperatorTypeEnum.NESTED, - entries: updatedEntryEntries, - }; - - return { - ...exceptionItem, - entries: [ - ...exceptionItem.entries.slice(0, nestedParentIndex), - updatedItemOfInterest, - ...exceptionItem.entries.slice(nestedParentIndex + 1), - ], - }; - } - } else { - return { - ...exceptionItem, - entries: [ - ...exceptionItem.entries.slice(0, entryIndex), - ...exceptionItem.entries.slice(entryIndex + 1), - ], - }; - } -}; - -/** - * On operator change, determines whether value needs to be cleared or not - * - * @param field - * @param selectedOperator - * @param currentEntry - * - */ -export const getEntryFromOperator = ( - selectedOperator: OperatorOption, - currentEntry: FormattedBuilderEntry -): Entry & { id?: string } => { - const isSameOperatorType = currentEntry.operator.type === selectedOperator.type; - const fieldValue = currentEntry.field != null ? currentEntry.field.name : ''; - switch (selectedOperator.type) { - case 'match': - return { - id: currentEntry.id, - field: fieldValue, - type: OperatorTypeEnum.MATCH, - operator: selectedOperator.operator, - value: - isSameOperatorType && typeof currentEntry.value === 'string' ? currentEntry.value : '', - }; - case 'match_any': - return { - id: currentEntry.id, - field: fieldValue, - type: OperatorTypeEnum.MATCH_ANY, - operator: selectedOperator.operator, - value: isSameOperatorType && Array.isArray(currentEntry.value) ? currentEntry.value : [], - }; - case 'list': - return { - id: currentEntry.id, - field: fieldValue, - type: OperatorTypeEnum.LIST, - operator: selectedOperator.operator, - list: { id: '', type: 'ip' }, - }; - default: - return { - id: currentEntry.id, - field: fieldValue, - type: OperatorTypeEnum.EXISTS, - operator: selectedOperator.operator, - }; - } -}; - -/** - * Determines which operators to make available - * - * @param item - * @param listType - * @param isBoolean - * @param includeValueListOperators whether or not to include the 'is in list' and 'is not in list' operators - */ -export const getOperatorOptions = ( - item: FormattedBuilderEntry, - listType: ExceptionListType, - isBoolean: boolean, - includeValueListOperators = true -): OperatorOption[] => { - if (item.nested === 'parent' || item.field == null) { - return [isOperator]; - } else if ((item.nested != null && listType === 'endpoint') || listType === 'endpoint') { - return isBoolean ? [isOperator] : [isOperator, isOneOfOperator]; - } else if (item.nested != null && listType === 'detection') { - return isBoolean ? [isOperator, existsOperator] : [isOperator, isOneOfOperator, existsOperator]; - } else { - return isBoolean - ? [isOperator, isNotOperator, existsOperator, doesNotExistOperator] - : includeValueListOperators - ? EXCEPTION_OPERATORS - : EXCEPTION_OPERATORS_SANS_LISTS; - } -}; - -/** - * Determines proper entry update when user selects new field - * - * @param item - current exception item entry values - * @param newField - newly selected field - * - */ -export const getEntryOnFieldChange = ( - item: FormattedBuilderEntry, - newField: IFieldType -): { updatedEntry: BuilderEntry; index: number } => { - const { parent, entryIndex, nested } = item; - const newChildFieldValue = newField != null ? newField.name.split('.').slice(-1)[0] : ''; - - if (nested === 'parent') { - // For nested entries, when user first selects to add a nested - // entry, they first see a row similar to what is shown for when - // a user selects "exists", as soon as they make a selection - // we can now identify the 'parent' and 'child' this is where - // we first convert the entry into type "nested" - const newParentFieldValue = - newField.subType != null && newField.subType.nested != null - ? newField.subType.nested.path - : ''; - - return { - updatedEntry: { - id: item.id, - field: newParentFieldValue, - type: OperatorTypeEnum.NESTED, - entries: [ - addIdToItem({ - field: newChildFieldValue ?? '', - type: OperatorTypeEnum.MATCH, - operator: isOperator.operator, - value: '', - }), - ], - }, - index: entryIndex, - }; - } else if (nested === 'child' && parent != null) { - return { - updatedEntry: { - ...parent.parent, - entries: [ - ...parent.parent.entries.slice(0, entryIndex), - { - id: item.id, - field: newChildFieldValue ?? '', - type: OperatorTypeEnum.MATCH, - operator: isOperator.operator, - value: '', - }, - ...parent.parent.entries.slice(entryIndex + 1), - ], - }, - index: parent.parentIndex, - }; - } else { - return { - updatedEntry: { - id: item.id, - field: newField != null ? newField.name : '', - type: OperatorTypeEnum.MATCH, - operator: isOperator.operator, - value: '', - }, - index: entryIndex, - }; - } -}; - -/** - * Determines proper entry update when user selects new operator - * - * @param item - current exception item entry values - * @param newOperator - newly selected operator - * - */ -export const getEntryOnOperatorChange = ( - item: FormattedBuilderEntry, - newOperator: OperatorOption -): { updatedEntry: BuilderEntry; index: number } => { - const { parent, entryIndex, field, nested } = item; - const newEntry = getEntryFromOperator(newOperator, item); - - if (!entriesList.is(newEntry) && nested != null && parent != null) { - return { - updatedEntry: { - ...parent.parent, - entries: [ - ...parent.parent.entries.slice(0, entryIndex), - { - ...newEntry, - field: field != null ? field.name.split('.').slice(-1)[0] : '', - }, - ...parent.parent.entries.slice(entryIndex + 1), - ], - }, - index: parent.parentIndex, - }; - } else { - return { updatedEntry: newEntry, index: entryIndex }; - } -}; - -/** - * Determines proper entry update when user updates value - * when operator is of type "match" - * - * @param item - current exception item entry values - * @param newField - newly entered value - * - */ -export const getEntryOnMatchChange = ( - item: FormattedBuilderEntry, - newField: string -): { updatedEntry: BuilderEntry; index: number } => { - const { nested, parent, entryIndex, field, operator } = item; - - if (nested != null && parent != null) { - const fieldName = field != null ? field.name.split('.').slice(-1)[0] : ''; - - return { - updatedEntry: { - ...parent.parent, - entries: [ - ...parent.parent.entries.slice(0, entryIndex), - { - id: item.id, - field: fieldName, - type: OperatorTypeEnum.MATCH, - operator: operator.operator, - value: newField, - }, - ...parent.parent.entries.slice(entryIndex + 1), - ], - }, - index: parent.parentIndex, - }; - } else { - return { - updatedEntry: { - id: item.id, - field: field != null ? field.name : '', - type: OperatorTypeEnum.MATCH, - operator: operator.operator, - value: newField, - }, - index: entryIndex, - }; - } -}; - -/** - * Determines proper entry update when user updates value - * when operator is of type "match_any" - * - * @param item - current exception item entry values - * @param newField - newly entered value - * - */ -export const getEntryOnMatchAnyChange = ( - item: FormattedBuilderEntry, - newField: string[] -): { updatedEntry: BuilderEntry; index: number } => { - const { nested, parent, entryIndex, field, operator } = item; - - if (nested != null && parent != null) { - const fieldName = field != null ? field.name.split('.').slice(-1)[0] : ''; - - return { - updatedEntry: { - ...parent.parent, - entries: [ - ...parent.parent.entries.slice(0, entryIndex), - { - id: item.id, - field: fieldName, - type: OperatorTypeEnum.MATCH_ANY, - operator: operator.operator, - value: newField, - }, - ...parent.parent.entries.slice(entryIndex + 1), - ], - }, - index: parent.parentIndex, - }; - } else { - return { - updatedEntry: { - id: item.id, - field: field != null ? field.name : '', - type: OperatorTypeEnum.MATCH_ANY, - operator: operator.operator, - value: newField, - }, - index: entryIndex, - }; - } -}; - -/** - * Determines proper entry update when user updates value - * when operator is of type "list" - * - * @param item - current exception item entry values - * @param newField - newly selected list - * - */ -export const getEntryOnListChange = ( - item: FormattedBuilderEntry, - newField: ListSchema -): { updatedEntry: BuilderEntry; index: number } => { - const { entryIndex, field, operator } = item; - const { id, type } = newField; - - return { - updatedEntry: { - id: item.id, - field: field != null ? field.name : '', - type: OperatorTypeEnum.LIST, - operator: operator.operator, - list: { id, type }, - }, - index: entryIndex, - }; + : patterns; }; export const getDefaultEmptyEntry = (): EmptyEntry => ({ diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx index 4d0e3306e3315..2863b92ca68ab 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx @@ -17,37 +17,26 @@ import { import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock'; import { getEntryMatchAnyMock } from '../../../../../../lists/common/schemas/types/entry_match_any.mock'; -import { useKibana } from '../../../../common/lib/kibana'; import { getEmptyValue } from '../../empty_value'; import { ExceptionBuilderComponent } from './'; import { getMockTheme } from '../../../lib/kibana/kibana_react.mock'; +import { coreMock } from 'src/core/public/mocks'; +import { dataPluginMock } from 'src/plugins/data/public/mocks'; const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece', }, }); - -jest.mock('../../../../common/lib/kibana'); +const mockKibanaHttpService = coreMock.createStart().http; +const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract(); describe('ExceptionBuilderComponent', () => { let wrapper: ReactWrapper; const getValueSuggestionsMock = jest.fn().mockResolvedValue(['value 1', 'value 2']); - beforeEach(() => { - (useKibana as jest.Mock).mockReturnValue({ - services: { - data: { - autocomplete: { - getValueSuggestions: getValueSuggestionsMock, - }, - }, - }, - }); - }); - afterEach(() => { getValueSuggestionsMock.mockClear(); jest.clearAllMocks(); @@ -58,6 +47,8 @@ describe('ExceptionBuilderComponent', () => { wrapper = mount( { wrapper = mount( { wrapper = mount( { wrapper = mount( { wrapper = mount( { wrapper = mount( { wrapper = mount( { wrapper = mount( { wrapper = mount( diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx index 954a75fc370bd..e33478ad99660 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx @@ -98,7 +98,7 @@ export const EditExceptionModal = memo(function EditExceptionModal({ onConfirm, onRuleChange, }: EditExceptionModalProps) { - const { http } = useKibana().services; + const { http, data } = useKibana().services; const [comment, setComment] = useState(''); const [errorsExist, setErrorExists] = useState(false); const { rule: maybeRule, loading: isRuleLoading } = useRuleAsync(ruleId); @@ -313,6 +313,8 @@ export const EditExceptionModal = memo(function EditExceptionModal({ {i18n.EXCEPTION_BUILDER_INFO} any> = (...args: Parameters) => ReturnType; // eslint-disable-line diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/mock_endpoint_result_list.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/mock_endpoint_result_list.ts index 404ee0cd4aa2c..40b843a676d9c 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/mock_endpoint_result_list.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/mock_endpoint_result_list.ts @@ -54,7 +54,7 @@ export const mockEndpointResultList: (options?: { for (let index = 0; index < actualCountToReturn; index++) { hosts.push({ metadata: generator.generateHostMetadata(), - host_status: HostStatus.ERROR, + host_status: HostStatus.UNHEALTHY, query_strategy_version: queryStrategyVersion, }); } @@ -74,7 +74,7 @@ export const mockEndpointResultList: (options?: { export const mockEndpointDetailsApiResult = (): HostInfo => { return { metadata: generator.generateHostMetadata(), - host_status: HostStatus.ERROR, + host_status: HostStatus.UNHEALTHY, query_strategy_version: MetadataQueryStrategyVersions.VERSION_2, }; }; diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts index 17ce24e7cda7f..eec4de6400145 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts @@ -231,7 +231,7 @@ export const showView: (state: EndpointState) => 'policy_response' | 'details' = export const hostStatusInfo: (state: Immutable) => HostStatus = createSelector( (state) => state.hostStatus, (hostStatus) => { - return hostStatus ? hostStatus : HostStatus.ERROR; + return hostStatus ? hostStatus : HostStatus.UNHEALTHY; } ); diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx index eb3e534ba427f..c97e097ea9b72 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx @@ -8,7 +8,6 @@ import styled from 'styled-components'; import { EuiDescriptionList, - EuiHealth, EuiHorizontalRule, EuiListGroup, EuiListGroupItem, @@ -17,6 +16,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiBadge, + EuiSpacer, } from '@elastic/eui'; import React, { memo, useMemo } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -26,11 +26,7 @@ import { HostInfo, HostMetadata, HostStatus } from '../../../../../../common/end import { useEndpointSelector, useAgentDetailsIngestUrl } from '../hooks'; import { useNavigateToAppEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_to_app_event_handler'; import { policyResponseStatus, uiQueryParams } from '../../store/selectors'; -import { - POLICY_STATUS_TO_HEALTH_COLOR, - POLICY_STATUS_TO_BADGE_COLOR, - HOST_STATUS_TO_HEALTH_COLOR, -} from '../host_constants'; +import { POLICY_STATUS_TO_BADGE_COLOR, HOST_STATUS_TO_BADGE_COLOR } from '../host_constants'; import { FormattedDateAndTime } from '../../../../../common/components/endpoint/formatted_date_time'; import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler'; import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app'; @@ -48,17 +44,6 @@ const HostIds = styled(EuiListGroupItem)` } `; -const LinkToExternalApp = styled.div` - margin-top: ${(props) => props.theme.eui.ruleMargins.marginMedium}; - .linkToAppIcon { - margin-right: ${(props) => props.theme.eui.ruleMargins.marginXSmall}; - vertical-align: top; - } - .linkToAppPopoutIcon { - margin-left: ${(props) => props.theme.eui.ruleMargins.marginXSmall}; - } -`; - const openReassignFlyoutSearch = '?openReassignFlyout=true'; export const EndpointDetails = memo( @@ -80,7 +65,7 @@ export const EndpointDetails = memo( const queryParams = useEndpointSelector(uiQueryParams); const policyStatus = useEndpointSelector( policyResponseStatus - ) as keyof typeof POLICY_STATUS_TO_HEALTH_COLOR; + ) as keyof typeof POLICY_STATUS_TO_BADGE_COLOR; const { formatUrl } = useFormatUrl(SecurityPageName.administration); const detailsResultsUpper = useMemo(() => { @@ -89,32 +74,37 @@ export const EndpointDetails = memo( title: i18n.translate('xpack.securitySolution.endpoint.details.os', { defaultMessage: 'OS', }), - description: details.host.os.full, + description: {details.host.os.full}, }, { title: i18n.translate('xpack.securitySolution.endpoint.details.agentStatus', { defaultMessage: 'Agent Status', }), description: ( - - + ), }, { title: i18n.translate('xpack.securitySolution.endpoint.details.lastSeen', { defaultMessage: 'Last Seen', }), - description: , + description: ( + + {' '} + + + ), }, ]; }, [details, hostStatus]); @@ -169,12 +159,14 @@ export const EndpointDetails = memo( description: ( - - {details.Endpoint.policy.applied.name} - + + + {details.Endpoint.policy.applied.name} + + {details.Endpoint.policy.applied.endpoint_policy_version && ( @@ -241,9 +233,11 @@ export const EndpointDetails = memo( }), description: ( - {details.host.ip.map((ip: string, index: number) => ( - - ))} + + {details.host.ip.map((ip: string, index: number) => ( + + ))} + ), }, @@ -251,13 +245,13 @@ export const EndpointDetails = memo( title: i18n.translate('xpack.securitySolution.endpoint.details.hostname', { defaultMessage: 'Hostname', }), - description: details.host.hostname, + description: {details.host.hostname}, }, { title: i18n.translate('xpack.securitySolution.endpoint.details.endpointVersion', { defaultMessage: 'Endpoint Version', }), - description: details.agent.version, + description: {details.agent.version}, }, ]; }, [details.agent.version, details.host.hostname, details.host.ip]); @@ -275,22 +269,36 @@ export const EndpointDetails = memo( listItems={detailsResultsPolicy} data-test-subj="endpointDetailsPolicyList" /> - - + + - - - - - + + + + + + + + + + + + + ({ - [HostStatus.ERROR]: 'danger', - [HostStatus.ONLINE]: 'success', - [HostStatus.OFFLINE]: 'subdued', - [HostStatus.UNENROLLING]: 'warning', + [HostStatus.HEALTHY]: 'secondary', + [HostStatus.UNHEALTHY]: 'warning', + [HostStatus.UPDATING]: 'primary', + [HostStatus.OFFLINE]: 'default', + [HostStatus.INACTIVE]: 'default', }); export const POLICY_STATUS_TO_HEALTH_COLOR = Object.freeze< { [key in keyof typeof HostPolicyResponseActionStatus]: string } >({ - success: 'success', + success: 'secondary', warning: 'warning', failure: 'danger', - unsupported: 'subdued', + unsupported: 'default', }); export const POLICY_STATUS_TO_BADGE_COLOR = Object.freeze< diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx index 79e91fdeb813a..17ebff603ccfb 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx @@ -25,7 +25,7 @@ import { MetadataQueryStrategyVersions, } from '../../../../../common/endpoint/types'; import { EndpointDocGenerator } from '../../../../../common/endpoint/generate_data'; -import { POLICY_STATUS_TO_HEALTH_COLOR, POLICY_STATUS_TO_TEXT } from './host_constants'; +import { POLICY_STATUS_TO_TEXT } from './host_constants'; import { mockPolicyResultList } from '../../policy/store/test_mock_utils'; // not sure why this can't be imported from '../../../../common/mock/formatted_relative'; @@ -232,9 +232,10 @@ describe('when on the list page', () => { > = []; let firstPolicyID: string; let firstPolicyRev: number; + beforeEach(() => { reactTestingLibrary.act(() => { - const mockedEndpointData = mockEndpointResultList({ total: 4 }); + const mockedEndpointData = mockEndpointResultList({ total: 5 }); const hostListData = mockedEndpointData.hosts; const queryStrategyVersion = mockedEndpointData.query_strategy_version; @@ -259,9 +260,9 @@ describe('when on the list page', () => { }; [ - { status: HostStatus.ERROR, policy: (p: Policy) => p }, + { status: HostStatus.UNHEALTHY, policy: (p: Policy) => p }, { - status: HostStatus.ONLINE, + status: HostStatus.HEALTHY, policy: (p: Policy) => { p.endpoint.id = 'xyz'; // represents change in endpoint policy assignment p.endpoint.revision = 1; @@ -276,7 +277,14 @@ describe('when on the list page', () => { }, }, { - status: HostStatus.UNENROLLING, + status: HostStatus.UPDATING, + policy: (p: Policy) => { + p.agent.configured.revision += 1; // agent policy change, not propagated to agent yet + return p; + }, + }, + { + status: HostStatus.INACTIVE, policy: (p: Policy) => { p.agent.configured.revision += 1; // agent policy change, not propagated to agent yet return p; @@ -317,7 +325,7 @@ describe('when on the list page', () => { await middlewareSpy.waitForAction('serverReturnedEndpointList'); }); const rows = await renderResult.findAllByRole('row'); - expect(rows).toHaveLength(5); + expect(rows).toHaveLength(6); }); it('should show total', async () => { const renderResult = render(); @@ -325,7 +333,7 @@ describe('when on the list page', () => { await middlewareSpy.waitForAction('serverReturnedEndpointList'); }); const total = await renderResult.findByTestId('endpointListTableTotal'); - expect(total.textContent).toEqual('4 Hosts'); + expect(total.textContent).toEqual('5 Hosts'); }); it('should display correct status', async () => { const renderResult = render(); @@ -334,23 +342,30 @@ describe('when on the list page', () => { }); const hostStatuses = await renderResult.findAllByTestId('rowHostStatus'); - expect(hostStatuses[0].textContent).toEqual('Error'); - expect(hostStatuses[0].querySelector('[data-euiicon-type][color="danger"]')).not.toBeNull(); + expect(hostStatuses[0].textContent).toEqual('Unhealthy'); + expect(hostStatuses[0].getAttribute('style')).toMatch( + /background-color\: rgb\(241\, 216\, 111\)\;/ + ); - expect(hostStatuses[1].textContent).toEqual('Online'); - expect( - hostStatuses[1].querySelector('[data-euiicon-type][color="success"]') - ).not.toBeNull(); + expect(hostStatuses[1].textContent).toEqual('Healthy'); + expect(hostStatuses[1].getAttribute('style')).toMatch( + /background-color\: rgb\(109\, 204\, 177\)\;/ + ); expect(hostStatuses[2].textContent).toEqual('Offline'); - expect( - hostStatuses[2].querySelector('[data-euiicon-type][color="subdued"]') - ).not.toBeNull(); + expect(hostStatuses[2].getAttribute('style')).toMatch( + /background-color\: rgb\(211\, 218\, 230\)\;/ + ); - expect(hostStatuses[3].textContent).toEqual('Unenrolling'); - expect( - hostStatuses[3].querySelector('[data-euiicon-type][color="warning"]') - ).not.toBeNull(); + expect(hostStatuses[3].textContent).toEqual('Updating'); + expect(hostStatuses[3].getAttribute('style')).toMatch( + /background-color\: rgb\(121\, 170\, 217\)\;/ + ); + + expect(hostStatuses[4].textContent).toEqual('Inactive'); + expect(hostStatuses[4].getAttribute('style')).toMatch( + /background-color\: rgb\(211\, 218\, 230\)\;/ + ); }); it('should display correct policy status', async () => { @@ -361,14 +376,18 @@ describe('when on the list page', () => { const policyStatuses = await renderResult.findAllByTestId('rowPolicyStatus'); policyStatuses.forEach((status, index) => { + const policyStatusToRGBColor: Array<[string, string]> = [ + ['Success', 'background-color: rgb(109, 204, 177);'], + ['Warning', 'background-color: rgb(241, 216, 111);'], + ['Failure', 'background-color: rgb(255, 126, 98);'], + ['Unsupported', 'background-color: rgb(211, 218, 230);'], + ]; + const policyStatusStyleMap: ReadonlyMap = new Map( + policyStatusToRGBColor + ); + const expectedStatusColor: string = policyStatusStyleMap.get(status.textContent!) ?? ''; expect(status.textContent).toEqual(POLICY_STATUS_TO_TEXT[generatedPolicyStatuses[index]]); - expect( - status.querySelector( - `[data-euiicon-type][color=${ - POLICY_STATUS_TO_HEALTH_COLOR[generatedPolicyStatuses[index]] - }]` - ) - ).not.toBeNull(); + expect(status.getAttribute('style')).toMatch(expectedStatusColor); }); }); @@ -378,7 +397,7 @@ describe('when on the list page', () => { await middlewareSpy.waitForAction('serverReturnedEndpointList'); }); const outOfDates = await renderResult.findAllByTestId('rowPolicyOutOfDate'); - expect(outOfDates).toHaveLength(3); + expect(outOfDates).toHaveLength(4); outOfDates.forEach((item, index) => { expect(item.textContent).toEqual('Out-of-date'); diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx index c4c27bd493950..d28bf6b38fd31 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx @@ -5,14 +5,14 @@ * 2.0. */ -import React, { useMemo, useCallback, memo, useState } from 'react'; +import React, { useMemo, useCallback, memo, useState, useContext } from 'react'; import { EuiHorizontalRule, EuiBasicTable, EuiBasicTableColumn, EuiText, EuiLink, - EuiHealth, + EuiBadge, EuiToolTip, EuiSelectableProps, EuiSuperDatePicker, @@ -33,13 +33,14 @@ import { createStructuredSelector } from 'reselect'; import { useDispatch } from 'react-redux'; import { EuiContextMenuItemProps } from '@elastic/eui/src/components/context_menu/context_menu_item'; import { NavigateToAppOptions } from 'kibana/public'; +import { ThemeContext } from 'styled-components'; import { EndpointDetailsFlyout } from './details'; import * as selectors from '../store/selectors'; import { useEndpointSelector } from './hooks'; import { isPolicyOutOfDate } from '../utils'; import { - HOST_STATUS_TO_HEALTH_COLOR, - POLICY_STATUS_TO_HEALTH_COLOR, + HOST_STATUS_TO_BADGE_COLOR, + POLICY_STATUS_TO_BADGE_COLOR, POLICY_STATUS_TO_TEXT, } from './host_constants'; import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler'; @@ -72,11 +73,24 @@ const EndpointListNavLink = memo<{ name: string; href: string; route: string; + isBadge?: boolean; dataTestSubj: string; -}>(({ name, href, route, dataTestSubj }) => { +}>(({ name, href, route, isBadge = false, dataTestSubj }) => { const clickHandler = useNavigateByRouterEventHandler(route); + const theme = useContext(ThemeContext); - return ( + return isBadge ? ( + // eslint-disable-next-line @elastic/eui/href-or-on-click + + {name} + + ) : ( // eslint-disable-next-line @elastic/eui/href-or-on-click { // eslint-disable-next-line react/display-name render: (hostStatus: HostInfo['host_status']) => { return ( - - + ); }, }, @@ -375,8 +389,8 @@ export const EndpointList = () => { }); const toRouteUrl = formatUrl(toRoutePath); return ( - @@ -384,9 +398,10 @@ export const EndpointList = () => { name={POLICY_STATUS_TO_TEXT[policy.status]} href={toRouteUrl} route={toRoutePath} + isBadge dataTestSubj="policyStatusCellLink" /> - + ); }, }, diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap index 35fc520558d6a..f0831815fb65c 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap @@ -1512,13 +1512,13 @@ Object { data-test-subj="trustedAppsListPage" >