diff --git a/.eslintrc.js b/.eslintrc.js index dadebc922df9e..e85792c4f4ba6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1114,10 +1114,18 @@ module.exports = { * Enterprise Search overrides */ { + // All files files: ['x-pack/plugins/enterprise_search/**/*.{ts,tsx}'], - excludedFiles: ['x-pack/plugins/enterprise_search/**/*.{test,mock}.{ts,tsx}'], rules: { 'react-hooks/exhaustive-deps': 'off', + 'react/jsx-boolean-value': ['error', 'never'], + }, + }, + { + // Source files only - allow `any` in test/mock files + files: ['x-pack/plugins/enterprise_search/**/*.{ts,tsx}'], + excludedFiles: ['x-pack/plugins/enterprise_search/**/*.{test,mock}.{ts,tsx}'], + rules: { '@typescript-eslint/no-explicit-any': 'error', }, }, diff --git a/docs/developer/architecture/index.asciidoc b/docs/developer/architecture/index.asciidoc index 7fa7d80ef9729..4bdd693979b49 100644 --- a/docs/developer/architecture/index.asciidoc +++ b/docs/developer/architecture/index.asciidoc @@ -13,8 +13,8 @@ To begin plugin development, we recommend reading our overview of how plugins wo * <> Our developer services are changing all the time. One of the best ways to discover and learn about them is to read the available -READMEs from all the plugins inside our {kib-repo}tree/{branch}/src/plugins[open source plugins folder] and our -{kib-repo}/tree/{branch}/x-pack/plugins[commercial plugins folder]. +READMEs inside our plugins folders: {kib-repo}tree/{branch}/src/plugins[src/plugins] and +{kib-repo}/tree/{branch}/x-pack/plugins[x-pack/plugins]. A few services also automatically generate api documentation which can be browsed inside the {kib-repo}tree/{branch}/docs/development[docs/development section of our repo] diff --git a/docs/developer/getting-started/running-kibana-advanced.asciidoc b/docs/developer/getting-started/running-kibana-advanced.asciidoc index 277e52a3dc8e9..68a4951ea1c21 100644 --- a/docs/developer/getting-started/running-kibana-advanced.asciidoc +++ b/docs/developer/getting-started/running-kibana-advanced.asciidoc @@ -23,24 +23,6 @@ By default, you can log in with username `elastic` and password `changeme`. See the `--help` options on `yarn es ` if you’d like to configure a different password. -[discrete] -=== Running {kib} in Open-Source mode - -If you’re looking to only work with the open-source software, supply the -license type to `yarn es`: - -[source,bash] ----- -yarn es snapshot --license oss ----- - -And start {kib} with only open-source code: - -[source,bash] ----- -yarn start --oss ----- - [discrete] === Unsupported URL Type 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 51e8d1a0b6bef..fd46a8a0f82c1 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 @@ -21,6 +21,7 @@ readonly links: { readonly installation: string; readonly configuration: string; readonly elasticsearchOutput: string; + readonly elasticsearchModule: string; readonly startup: string; readonly exportedFields: string; }; @@ -29,6 +30,10 @@ readonly links: { }; readonly metricbeat: { readonly base: string; + readonly configure: string; + readonly httpEndpoint: string; + readonly install: string; + readonly start: string; }; readonly enterpriseSearch: { readonly base: string; diff --git a/docs/maps/connect-to-ems.asciidoc b/docs/maps/connect-to-ems.asciidoc index a5b8010f21f97..8e4695bfc6662 100644 --- a/docs/maps/connect-to-ems.asciidoc +++ b/docs/maps/connect-to-ems.asciidoc @@ -86,7 +86,7 @@ endif::[] [cols="2*<"] |=== -| [[ems-hostname]]`hostname` +| [[ems-host]]`host` | Specifies the host of the backend server. To allow remote users to connect, set the value to the IP address or DNS name of the {hosted-ems} container. *Default: _your-hostname_*. <>. | `port` @@ -199,7 +199,7 @@ TIP: The available basemaps and boundaries can be explored from the `/maps` endp [[elastic-maps-server-kibana]] ==== Kibana configuration -With {hosted-ems} running, add the `map.emsUrl` configuration key in your <> file pointing to the root of the service. This setting will point {kib} to request EMS basemaps and boundaries from {hosted-ems}. Typically this will be the URL to the <> of {hosted-ems}. For example, `map.emsUrl: https://my-ems-server:8080`. +With {hosted-ems} running, add the `map.emsUrl` configuration key in your <> file pointing to the root of the service. This setting will point {kib} to request EMS basemaps and boundaries from {hosted-ems}. Typically this will be the URL to the <> of {hosted-ems}. For example, `map.emsUrl: https://my-ems-server:8080`. [float] diff --git a/docs/maps/maps-aggregations.asciidoc b/docs/maps/maps-aggregations.asciidoc index 3c66e187bf59c..265bf6bfaea30 100644 --- a/docs/maps/maps-aggregations.asciidoc +++ b/docs/maps/maps-aggregations.asciidoc @@ -68,9 +68,9 @@ To enable a blended layer that dynamically shows clusters or documents: [role="xpack"] [[maps-top-hits-aggregation]] -=== Top hits per entity +=== Display the most relevant documents per entity -You can display the most relevant documents per entity, for example, the most recent GPS tracks per flight. +Use *Top hits per entity* to display the most relevant documents per entity, for example, the most recent GPS tracks per flight route. To get this data, {es} first groups your data using a {ref}/search-aggregations-bucket-terms-aggregation.html[terms aggregation], then accumulates the most relevant documents based on sort order for each entry using a {ref}/search-aggregations-metrics-top-hits-aggregation.html[top hits metric aggregation]. diff --git a/docs/setup/install/deb.asciidoc b/docs/setup/install/deb.asciidoc index 8edd2f9312168..6012ae394c832 100644 --- a/docs/setup/install/deb.asciidoc +++ b/docs/setup/install/deb.asciidoc @@ -8,12 +8,8 @@ The Debian package for Kibana can be <> or from our <>. It can be used to install Kibana on any Debian-based system such as Debian and Ubuntu. -This package is free to use under the Elastic license. It contains open source -and free commercial features and access to paid commercial features. -<> to try out all of the -paid commercial features. See the -https://www.elastic.co/subscriptions[Subscriptions] page for information about -Elastic license levels. +This package contains both free and subscription features. +<> to try out all of the features. The latest stable version of Kibana can be found on the link:/downloads/kibana[Download Kibana] page. Other versions can diff --git a/docs/setup/install/rpm.asciidoc b/docs/setup/install/rpm.asciidoc index 01a9c5718f14b..216ec849147b4 100644 --- a/docs/setup/install/rpm.asciidoc +++ b/docs/setup/install/rpm.asciidoc @@ -13,12 +13,8 @@ and Oracle Enterprise. NOTE: RPM install is not supported on distributions with old versions of RPM, such as SLES 11 and CentOS 5. Please see <> instead. -This package is free to use under the Elastic license. It contains open source -and free commercial features and access to paid commercial features. -<> to try out all of the -paid commercial features. See the -https://www.elastic.co/subscriptions[Subscriptions] page for information about -Elastic license levels. +This package contains both free and subscription features. +<> to try out all of the features. The latest stable version of Kibana can be found on the link:/downloads/kibana[Download Kibana] page. Other versions can diff --git a/docs/setup/install/targz.asciidoc b/docs/setup/install/targz.asciidoc index 8eef43f796167..bb51d98a4f922 100644 --- a/docs/setup/install/targz.asciidoc +++ b/docs/setup/install/targz.asciidoc @@ -7,12 +7,8 @@ Kibana is provided for Linux and Darwin as a `.tar.gz` package. These packages are the easiest formats to use when trying out Kibana. -These packages are free to use under the Elastic license. They contain open -source and free commercial features and access to paid commercial features. -<> to try out all of the -paid commercial features. See the -https://www.elastic.co/subscriptions[Subscriptions] page for information about -Elastic license levels. +This package contains both free and subscription features. +<> to try out all of the features. The latest stable version of Kibana can be found on the link:/downloads/kibana[Download Kibana] page. diff --git a/docs/setup/install/windows.asciidoc b/docs/setup/install/windows.asciidoc index 4a5a855e0bbcf..b4204cc623f0f 100644 --- a/docs/setup/install/windows.asciidoc +++ b/docs/setup/install/windows.asciidoc @@ -6,12 +6,8 @@ Kibana can be installed on Windows using the `.zip` package. -This package is free to use under the Elastic license. It contains open source -and free commercial features and access to paid commercial features. -<> to try out all of the -paid commercial features. See the -https://www.elastic.co/subscriptions[Subscriptions] page for information about -Elastic license levels. +This package contains both free and subscription features. +<> to try out all of the features. The latest stable version of Kibana can be found on the link:/downloads/kibana[Download Kibana] page. diff --git a/docs/user/alerting/geo-alert-types.asciidoc b/docs/user/alerting/geo-alert-types.asciidoc index c04cf4bca4320..f79885e3bc716 100644 --- a/docs/user/alerting/geo-alert-types.asciidoc +++ b/docs/user/alerting/geo-alert-types.asciidoc @@ -2,13 +2,8 @@ [[geo-alert-types]] == Geo alert types -experimental[] Two additional stack alerts are available: -<> and <>. To enable, -add the following configuration to your `kibana.yml`: - -```yml -xpack.stack_alerts.enableGeoAlerting: true -``` +Two additional stack alerts are available: +<> and <>. As with other stack alerts, you need `all` access to the *Stack Alerts* feature to be able to create and edit either of the geo alerts. diff --git a/package.json b/package.json index 27cbbf3fb1299..fc5cd02a03253 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@elastic/datemath": "link:packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary", "@elastic/ems-client": "7.11.0", - "@elastic/eui": "31.3.0", + "@elastic/eui": "31.4.0", "@elastic/filesaver": "1.1.2", "@elastic/good": "^9.0.1-kibana3", "@elastic/node-crypto": "1.2.1", diff --git a/packages/kbn-legacy-logging/src/utils/get_payload_size.test.ts b/packages/kbn-legacy-logging/src/utils/get_payload_size.test.ts index c70f95b9ddc11..3bb97e57ca0a3 100644 --- a/packages/kbn-legacy-logging/src/utils/get_payload_size.test.ts +++ b/packages/kbn-legacy-logging/src/utils/get_payload_size.test.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { createGunzip } from 'zlib'; import mockFs from 'mock-fs'; import { createReadStream } from 'fs'; @@ -54,6 +55,11 @@ describe('getPayloadSize', () => { const result = getResponsePayloadBytes(readStream); expect(result).toBe(Buffer.byteLength(data)); }); + + test('ignores streams that are not instances of ReadStream', async () => { + const result = getResponsePayloadBytes(createGunzip()); + expect(result).toBe(undefined); + }); }); describe('handles plain responses', () => { @@ -72,6 +78,11 @@ describe('getPayloadSize', () => { const result = getResponsePayloadBytes(payload); expect(result).toBe(JSON.stringify(payload).length); }); + + test('returns undefined when source is not plain object', () => { + const result = getResponsePayloadBytes([1, 2, 3]); + expect(result).toBe(undefined); + }); }); describe('handles content-length header', () => { diff --git a/packages/kbn-legacy-logging/src/utils/get_payload_size.ts b/packages/kbn-legacy-logging/src/utils/get_payload_size.ts index de96ad7002731..c7aeb0e8cac2b 100644 --- a/packages/kbn-legacy-logging/src/utils/get_payload_size.ts +++ b/packages/kbn-legacy-logging/src/utils/get_payload_size.ts @@ -6,14 +6,13 @@ * Side Public License, v 1. */ -import type { ReadStream } from 'fs'; +import { isPlainObject } from 'lodash'; +import { ReadStream } from 'fs'; import type { ResponseObject } from '@hapi/hapi'; const isBuffer = (obj: unknown): obj is Buffer => Buffer.isBuffer(obj); -const isObject = (obj: unknown): obj is Record => - typeof obj === 'object' && obj !== null; const isFsReadStream = (obj: unknown): obj is ReadStream => - typeof obj === 'object' && obj !== null && 'bytesRead' in obj; + typeof obj === 'object' && obj !== null && 'bytesRead' in obj && obj instanceof ReadStream; const isString = (obj: unknown): obj is string => typeof obj === 'string'; /** @@ -56,7 +55,7 @@ export function getResponsePayloadBytes( return Buffer.byteLength(payload); } - if (isObject(payload)) { + if (isPlainObject(payload)) { return Buffer.byteLength(JSON.stringify(payload)); } diff --git a/rfcs/images/api_doc_pick.png b/rfcs/images/api_doc_pick.png new file mode 100644 index 0000000000000..825fa47b266cb Binary files /dev/null and b/rfcs/images/api_doc_pick.png differ diff --git a/rfcs/images/api_doc_tech.png b/rfcs/images/api_doc_tech.png new file mode 100644 index 0000000000000..8c06d4ef3ebe8 Binary files /dev/null and b/rfcs/images/api_doc_tech.png differ diff --git a/rfcs/images/api_doc_tech_compare.png b/rfcs/images/api_doc_tech_compare.png new file mode 100644 index 0000000000000..46388b2a09a50 Binary files /dev/null and b/rfcs/images/api_doc_tech_compare.png differ diff --git a/rfcs/images/api_docs.png b/rfcs/images/api_docs.png new file mode 100644 index 0000000000000..d7e2e517e6465 Binary files /dev/null and b/rfcs/images/api_docs.png differ diff --git a/rfcs/images/api_docs_package_current.png b/rfcs/images/api_docs_package_current.png new file mode 100644 index 0000000000000..1a8f26dfad446 Binary files /dev/null and b/rfcs/images/api_docs_package_current.png differ diff --git a/rfcs/images/api_info.png b/rfcs/images/api_info.png new file mode 100644 index 0000000000000..dc5ecc845cb72 Binary files /dev/null and b/rfcs/images/api_info.png differ diff --git a/rfcs/images/current_api_doc_links.png b/rfcs/images/current_api_doc_links.png new file mode 100644 index 0000000000000..e52a273cf24e3 Binary files /dev/null and b/rfcs/images/current_api_doc_links.png differ diff --git a/rfcs/images/new_api_docs_with_links.png b/rfcs/images/new_api_docs_with_links.png new file mode 100644 index 0000000000000..bfa514b919533 Binary files /dev/null and b/rfcs/images/new_api_docs_with_links.png differ diff --git a/rfcs/images/repeat_primitive_signature.png b/rfcs/images/repeat_primitive_signature.png new file mode 100644 index 0000000000000..7c98eefbcf50d Binary files /dev/null and b/rfcs/images/repeat_primitive_signature.png differ diff --git a/rfcs/images/repeat_type_links.png b/rfcs/images/repeat_type_links.png new file mode 100644 index 0000000000000..bff54d90e9cae Binary files /dev/null and b/rfcs/images/repeat_type_links.png differ diff --git a/rfcs/text/0014_api_documentation.md b/rfcs/text/0014_api_documentation.md new file mode 100644 index 0000000000000..b70636c63aad3 --- /dev/null +++ b/rfcs/text/0014_api_documentation.md @@ -0,0 +1,442 @@ +- Start Date: 2020-12-21 +- RFC PR: (leave this empty) +- Kibana Issue: (leave this empty) +- [POC PR](https://github.com/elastic/kibana/pull/86232) + +# Goal + +Automatically generate API documentation for every plugin that exposes a public API within Kibana in order to help Kibana plugin developers +find and understand the services available to them. Automatic generation ensures the APIs are _always_ up to date. The system will make it easy to find +APIs that are lacking documentation. + +Note this does not cover REST API docs, but is targetted towards our javascript +plugin APIs. + +# Technology: ts-morph vs api-extractor + +[Api-extractor](https://api-extractor.com/) is a utility built from microsoft that parses typescript code into json files that can then be used in a custom [api-documenter](https://api-extractor.com/pages/setup/generating_docs/) in order to build documentation. This is what we [have now](https://github.com/elastic/kibana/tree/master/docs/development), except we use the default api-documenter. + +## Limitations with the current implementation using api-extractor & api-documenter + +The current implementation relies on the default api-documenter. It has the following limitations: + +- One page per API item +- Files are .md not .mdx +- There is no entry page per plugin (just an index.md per plugin/public and plugin/server) +- Incorrectly marks these entries as packages. + +![image](../images/api_docs_package_current.png) + +- Does not generate links to APIs exposed from other plugins, nor inside the same plugin. + +![image](../images/current_api_doc_links.png) + +## Options to improve + +We have two options to improve on the current implementation. We can use a custom api-documenter, or use ts-morph. + +### Custom Api-Documenter + +- According to the current maintainer of the sample api-documenter, it's a surprising amount of work to maintain. +- If we wish to re-use code from the sample api-documenter, we'll have to fork the rush-stack repo, or copy their code into our system. +- No verified ability to support cross plugin links. We do have some ideas (can explore creating a package.json for every page, and/or adding source file information to every node). +- More limited feature set, we wouldn't get thinks like references and source file paths. +- There are very few examples of other companies using custom api-documenters to drive their documentation systems (I could not find any on github). + +### Custom implementation using ts-morph + +[ts-morph](https://github.com/dsherret/ts-morph) is a utility built and maintained by a single person, which sits a layer above the raw typescript compiler. + +- Requires manually converting the types to how we want them to be displayed in the UI. Certain types have to be handled specially to show up +in the right way (for example, for arrow functions to be categorized as functions). This special handling is the bulk of the logic in the PR, and +may be a maintenance burden. +- Relies on a package maintained by a single person, albiet they have been very responsive and have a history of keeping the library up to date with +typescript upgrades. +- Affords us flexibility to do things like extract the setup and start types, grab source file paths to create links to github, and get +reference counts (reference counts not implemented in MVP). +- There are some issues with type links and signatures not working correctly (see https://github.com/dsherret/ts-morph/issues/923). + +![image](../images/new_api_docs_with_links.png) + +## Recommendation: ts-morph for the short term, switch to api-extractor when limitations can be worked around + +Both approaches will have a decent amount of code to maintain, but the api-extractor approach appears to be a more stable long term solution, since it's built and maintained by Microsoft and +is likely going to grow in popularity as more TypeScript API doc systems exist. +If we had a working example that supported cross plugin links, I would suggest continuing down that road. However, we don't, while we _do_ have a working ts-morph implementation. + +I recommend that we move ahead with ts-morph in the short term, because we have an implementation that offers a much improved experience over the current system, but that we continually +re-evaluate as time goes on and we learn more about the maintenance burden of the current approach, and see what happens with our priorities and the api-extractor library. + +Progress over perfection. + +![image](../images/api_doc_tech_compare.png) + +If we do switch, we can re-use all of the tests that take example TypeScript files and verify the resulting ApiDeclaration shapes. + +# Terminology + +**API** - A plugin's public API consists of every function, class, interface, type, variable, etc, that is exported from it's index.ts file, or returned from it's start or setup +contract. + +**API Declaration** - Each function, class, interface, type, variable, etc, that is part of a plugins public API is a "declaration". This +terminology is motivated by [these docs](https://www.typescriptlang.org/docs/handbook/modules.html#exporting-a-declaration). + +# MVP + +Every plugin will have one or more API reference pages. Every exported declaration will be listed in the page. It is first split by "scope" - client, server and common. Underneath +that, setup and start contracts are at the top, the remaining declarations are grouped by type (classes, functions, interfaces, etc). +Plugins may opt to have their API split into "service" sections (see [proposed manifest file changes](#manifest-file-changes)). If a plugin uses service folders, the API doc system will automatically group declarations that are defined inside the service folder name. This is a simple way to break down very large plugins. The start and setup contract will +always remain with the main plugin name. + +![image](../images/api_docs.png) + +- Cross plugin API links work inside `signature`. +- Github links with source file and line number +- using `serviceFolders` to split large plugins + +## Post MVP + +- Plugin `{@link AnApi}` links work. Will need to decide if we only support per plugin links, or if we should support a way to do this across plugins. +- Ingesting stats like number of public APIs, and number of those missing comments +- Include and expose API references +- Use namespaces to split large plugins + +# Information available for each API declaration + +We have the following pieces of information available from each declaration: + +- Label. The name of the function, class, interface, etc. + +- Description. Any comment that was able to be extracted. Currently it's not possible for this data to be formatted, for example if it has a code example with back tics. This +is dependent on the elastic-docs team moving the infrastructure to NextJS instead of Gatsby, but it will eventually be supported. + +- Tags. Any `@blahblah` tags that were extracted from comments. Known tags, like `beta`, will be show help text in a tooltip when hovered over. + +- Type. This can be thought of as the _kind_ of type (see [TypeKind](#typekind)). It allows us to group each type into a category. It can be a primitive, or a +more complex grouping. Possibilities are: array, string, number, boolean, object, class, interface, function, compound (unions or intersections) + +- Required or optional. (whether or not the type was written with `| undefined` or `?`). This terminology makes the most sense for function +parameters, not as much when thinking about an exported variable that might be undefined. + +- Signature. This is only relevant for some types: functions, objects, type, arrays and compound. Classes and interfaces would be too large. +For primitives, this is equivalent to "type". + +- Children. Only relevant for some types, this would include parameters for functions, class members and functions for classes, properties for +interfaces and objects. This makes the structure recursive. Each child is a nested API component. + +- Return comment. Only relevant for function types. + +![image](../images/api_info.png) + + +### ApiDeclaration type + +```ts +interface ApiDeclaration { + label: string; + type: TypeKind; // string, number, boolean, class, interface, function, type, etc. + description: TextWithLinks; + signature: TextWithLinks; + tags: string[]; // Declarations may be tagged as beta, or deprecated. + children: ApiDeclaration[]; // Recursive - this could be function parameters, class members, or interface/object properties. + returnComment?: TextWithLinks; + lifecycle?: Lifecycle.START | Lifecycle.SETUP; +} + +``` + +# Architecture design + +## Location + +The generated docs will reside inside the kibana repo, inside a top level `api_docs` folder. In the long term, we could investigate having the docs system run a script to generated the mdx files, so we don’t need to store them inside the repo. Every ci run should destroy and re-create this folder so removed plugins don't have lingering documentation files. + +They will be hosted online wherever the new docs system ends up. This can temporarily be accessed at https://elasticdocstest.netlify.app/docs/. + +## Algorithm overview + +The first stage is to collect the list of plugins using the existing `findPlugins` logic. + +For every plugin, the initial list of ts-morph api node declarations are collected from three "scope" files: + - plugin/public/index.ts + - plugin/server/index.ts + - plugin/common/index.ts + +Each ts-morph declaration is then transformed into an [ApiDeclaration](#ApiDeclaration-type) type, which is recursive due to the `children` property. Each +type of declaration is handled slightly differently, mainly in regard to whether or not a signature or return type is added, and how children are added. + +For example: + +```ts +if (node.isClassDeclaration()) { + // No signature or return. + return { + label, + description, + type: TypeKind.ClassKind, + // The class members are captured in the children array. + children: getApiDeclaration(node.getMembers()), + } +} else if (node.isFunctionDeclaration()) { + return { + label, + description, + signature: getSignature(node), + returnComment: getReturnComment(node), + type: TypeKind.FunctionKind, + // The function parameters are captured in the children array. This logic is more specific because + // the comments for a function parameter are captured in the function comment, with "@param" tags. + children: getParameterList(node.getParameters(), getParamTagComments(node)), + } +} if (...) +.... +``` + +The handling of each specific type is what encompasses the vast majority of the logic in the PR. + +The public and server scope have 0-2 special interfaces indicated by "lifecycle". This is determined by using ts-morph to extract the first two generic types +passed to `... extends Plugin` in the class defined inside the plugin's `plugin.ts` file. + +A [PluginApi](#pluginapi) is generated for each plugin, which is used to generate the json and mdx files. One or more json/mdx file pair + per plugin may be created, depending on the value of `serviceFolders` inside the plugin's manifest files. This is because some plugins have such huge APIs that + it is too large to render in a single page. + +![image](../images/api_doc_tech.png) + +## Types + +### TypeKind + +TypeKind is an enum that will identify what "category" or "group" name we can call this particular export. Is it a function, an interface, a class a variable, etc. +This list is likely incomplete, and we'll expand as needed. + +```ts +export enum TypeKind { + ClassKind = 'Class', + FunctionKind = 'Function', + ObjectKind = 'Object', + InterfaceKind = 'Interface', + TypeKind = 'Type', // For things like `export type Foo = ...` + UnknownKind = 'Unknown', // For the special "unknown" typescript type. + AnyKind = 'Any', // For the "any" kind, which should almost never be used in our public API. + UnCategorized = 'UnCategorized', // There are a lot of ts-morph types, if I encounter something not handled, I dump it in here. + StringKind = 'string', + NumberKind = 'number', + BooleanKind = 'boolean', + ArrayKind = 'Array', + CompoundTypeKind = 'CompoundType', // Unions & intersections, to handle things like `string | number`. +} +``` + + +### Text with reference links + +Signatures, descriptions and return comments may all contain links to other API declarations. This information needs to be serializable into json. This serializable type encompasses the information needed to build the DocLink components within these fields. The logic of building +the DocLink components currently resides inside the elastic-docs system. It's unclear if this will change. + +```ts +/** + * This is used for displaying code or comments that may contain reference links. For example, a function + * signature that is `(a: import("src/plugin_b").Bar) => void` will be parsed into the following Array: + * + * ```ts + * [ + * '(a: ', + * { docId: 'pluginB', section: 'Bar', text: 'Bar' }, + * ') => void' + * ] + * ``` + * + * This is then used to render text with nested DocLinks so it looks like this: + * + * `(a: => ) => void` + */ +export type TextWithLinks = Array; + +/** + * The information neccessary to build a DocLink. + */ +export interface Reference { + docId: string; + section: string; + text: string; +} +``` + +### ScopeApi + +Scope API is essentially just grouping an array of ApiDeclarations into different categories that makes building the mdx files from a +single json file easier. + +```ts +export interface ScopeApi { + setup?: ApiDeclaration; + start?: ApiDeclaration; + classes: ApiDeclaration[]; + functions: ApiDeclaration[]; + interfaces: ApiDeclaration[]; + objects: ApiDeclaration[]; + enums: ApiDeclaration[]; + misc: ApiDeclaration[]; + // We may add more here as we sit fit to pull out of `misc`. +} +``` + +With this structure, the mdx files end up looking like: + +``` +### Start + +### Functions + +### Interfaces + +``` + +### PluginApi + +A plugin API is the component that is serialized into the json file. It is broken into public, server and common components. `serviceFolders` is a way for the system to +write separate mdx files depending on where each declaration is defined. This is because certain plugins (and core) +are huge, and can't be rendered in a single page. + + +```ts +export interface PluginApi { + id: string; + serviceFolders?: readonly string[]; + client: ScopeApi; + server: ScopeApi; + common: ScopeApi; +} +``` + +## kibana.json Manifest file changes + +### Using a kibana.json file for core + +For the purpose of API infrastructure, core is treated like any other plugin. This means it has to specify serviceFolders section inside a manifest file to be split into sub folders. There are other ways to tackle this - like a hard coded array just for the core folder, but I kept the logic as similar to the other plugins as possible. + +### New parameters + +**serviceFolders?: string[]** + +Used by the system to group services into sub-pages. Some plugins, like data and core, have such huge APIs they are very slow to contain in a single page, and they are less consummable by solution developers. The addition of an optional list of services folders will cause the system to automatically create a separate page with every API that is defined within that folder. The caveat is that core will need to define a manifest file in order to define its service folders... + +**teamOwner: string** + +Team owner can be determined via github CODEOWNERS file, but we want to encourage single team ownership per plugin. Requiring a team owner string in the manifest file will help with this and will allow the API doc system to manually add a section to every page that has a link to the team owner. Additional ideas are teamSlackChannel or teamEmail for further contact. + +**summary: string** + + +A brief description of the plugin can then be displayed in the automatically generated API documentation. + +# Future features + +## Indexing stats + +Can we index statistics about our API as part of this system? For example, I'm dumping information about which api declarations are missing comments in the console. + +## Longer term approach to "plugin service folders" + +Using sub folders is a short term plan. A long term plan hasn't been established yet, but it should fit in with our folder structure hierarchy goals, along with +any support we have for sharing services among a related set of plugins, that are not exposed as part of the public API. +# Recommendations for writing comments + +## @link comments for the referenced type + +Core has a pattern of writing comments like this: + +```ts + /** {@link IUiSettingsClient} */ + uiSettings: IUiSettingsClient; +``` + +I don't see the value in this. In the IDE, I can click on the IUiSettingsClient type and get directed there, and in the API doc system, the +type will already be clickable. This ends up with a weird looking API: + +![image](../images/repeat_type_links.png) + +The plan is to make @link comments work like links, which means this is unneccessary information. + +I propose we avoid this kind of pattern. + +## Export every referenced type + +The docs system handles broken link warnings but to avoid breaking the ci, I suggest we turn this off initially. However, this will mean +we may miss situations where we are referencing a type that is not actually exported. This will cause a broken link in the docs +system + +For example if your index.ts file has: +```ts +export type foo: string | AnInterface; +``` + +and does not also export `AnInterface`, this will be a broken link in the docs system. + +Until we have better CI tools to catch these mistakes, developers will need to export every referenced type. + +## Avoid `Pick` pattern + +Connected to the above, if you use `Pick`, there are two problems. One is that it's difficult for a developer to see the functionality +available to them at a glance, since they would have to keep flipping from the interface definition to the properties that have been picked. + +The second potential problem is that you will have to export the referenced type, and in some situations, it's an internal type that isn't exported. + +![image](../images/api_doc_pick.png) + +# Open questions + +## Required attribute + +`isRequired` is an optional parameter that can be used to display a badge next to the API. +We can mark function parameters that do not use `?` or `| undefined` as required. Open questions: + +1. Are we okay with a badge showing for `required` rather than `optional` when marking a parameter as optional is extra work for a developer, and `required` is the default? + +2. Should we only mark function parameters as `required` or interface/class parameters? Essentially, should any declaration that is not nullable +have the `required` tag? + +## Signatures on primitive types + +1. Should we _always_ include a signature for variables and parameters, even if they are a repeat of the TypeKind? For example: + +![image](../images/repeat_primitive_signature.png) + +2. If no, should we include signatures when the only difference is `| undefined`? For function parameters this information is captured by +the absence of the `required` badge. Is this obvious? What about class members/interface props? + +## Out of scope + +### REST API + +This RFC does not cover REST API documentation, though it worth considering where +REST APIs registered by plugins should go in the docs. The docs team has a proposal for this but it is not inside the `Kibana Developer Docs` mission. + +### Package APIs + +Package APIs are not covered in this RFC. + +# Adoption strategy + +In order to generate useful API documentation, we need to approach this by two sides. + +1. Establish a habit of writing documentation. +2. Establish a habit of reading documentation. + +Currently what often happens is a developer asks another developer a question directly, and it is answered. Every time this happens, ask yourself if +there is a link you can share instead of a direct answer. If there isn't, file an issue for that documentation to be created. When we start responding +to questions with links, solution developers will naturally start to look in the documentation _first_, saving everyone time! + +The APIs WILL need to be well commented or they won't be useful. We can measure the amount of missing comments and set a goal of reducing this number. + +# External documentation system examples + +- [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/api/microsoft.visualbasic?view=netcore-3.1) +- [Android](https://developer.android.com/reference/androidx/packages) + +# Architecure review + +The primary concern coming out of the architecture review was over the technology choice of ts-morph vs api-extractor, and the potential maintenance +burdern of using ts-morph. For the short term, we've decide tech leads will own this section of code, we'll consider it experimental and + focus on deriving value out of it. Once we are confident of the value, we can focus on stabilizing the implementation details. \ No newline at end of file diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts index 7fd62d6f02e96..da35373f57322 100644 --- a/src/core/public/doc_links/doc_links_service.ts +++ b/src/core/public/doc_links/doc_links_service.ts @@ -39,6 +39,7 @@ export class DocLinksService { base: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}`, installation: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation-configuration.html`, configuration: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/configuring-howto-filebeat.html`, + elasticsearchModule: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-module-elasticsearch.html`, elasticsearchOutput: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/elasticsearch-output.html`, startup: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-starting.html`, exportedFields: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/exported-fields.html`, @@ -53,6 +54,10 @@ export class DocLinksService { }, metricbeat: { base: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}`, + configure: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/configuring-howto-metricbeat.html`, + httpEndpoint: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/http-endpoint.html`, + install: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation-configuration.html`, + start: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-starting.html`, }, heartbeat: { base: `${ELASTIC_WEBSITE_URL}guide/en/beats/heartbeat/${DOC_LINK_VERSION}`, @@ -116,6 +121,7 @@ export class DocLinksService { addData: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/connect-to-elasticsearch.html`, kibana: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/index.html`, elasticsearch: { + mapping: `${ELASTICSEARCH_DOCS}mapping.html`, remoteClusters: `${ELASTICSEARCH_DOCS}modules-remote-clusters.html`, remoteClustersProxy: `${ELASTICSEARCH_DOCS}modules-remote-clusters.html#proxy-mode`, remoteClusersProxySettings: `${ELASTICSEARCH_DOCS}modules-remote-clusters.html#remote-cluster-proxy-settings`, @@ -193,8 +199,11 @@ export class DocLinksService { alertsKibanaDiskThreshold: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/kibana-alerts.html#kibana-alerts-disk-usage-threshold`, alertsKibanaJvmThreshold: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/kibana-alerts.html#kibana-alerts-jvm-memory-threshold`, alertsKibanaMissingData: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/kibana-alerts.html#kibana-alerts-missing-monitoring-data`, + metricbeatBlog: `${ELASTIC_WEBSITE_URL}blog/external-collection-for-elastic-stack-monitoring-is-now-available-via-metricbeat`, monitorElasticsearch: `${ELASTICSEARCH_DOCS}configuring-metricbeat.html`, monitorKibana: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/monitoring-metricbeat.html`, + monitorLogstash: `${ELASTIC_WEBSITE_URL}guide/en/logstash/${DOC_LINK_VERSION}/monitoring-with-metricbeat.html`, + troubleshootKibana: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/monitor-troubleshooting.html`, }, security: { apiKeyServiceSettings: `${ELASTICSEARCH_DOCS}security-settings.html#api-key-service-settings`, @@ -257,6 +266,7 @@ export interface DocLinksStart { readonly installation: string; readonly configuration: string; readonly elasticsearchOutput: string; + readonly elasticsearchModule: string; readonly startup: string; readonly exportedFields: string; }; @@ -265,6 +275,10 @@ export interface DocLinksStart { }; readonly metricbeat: { readonly base: string; + readonly configure: string; + readonly httpEndpoint: string; + readonly install: string; + readonly start: string; }; readonly enterpriseSearch: { readonly base: string; diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index 37ebbcaa752af..75ed9aa5f150f 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -474,6 +474,7 @@ export interface DocLinksStart { readonly installation: string; readonly configuration: string; readonly elasticsearchOutput: string; + readonly elasticsearchModule: string; readonly startup: string; readonly exportedFields: string; }; @@ -482,6 +483,10 @@ export interface DocLinksStart { }; readonly metricbeat: { readonly base: string; + readonly configure: string; + readonly httpEndpoint: string; + readonly install: string; + readonly start: string; }; readonly enterpriseSearch: { readonly base: string; diff --git a/src/core/server/http/logging/get_payload_size.test.ts b/src/core/server/http/logging/get_payload_size.test.ts index a4ab8919e8b6d..dba5c7be30f3b 100644 --- a/src/core/server/http/logging/get_payload_size.test.ts +++ b/src/core/server/http/logging/get_payload_size.test.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { createGunzip } from 'zlib'; import type { Request } from '@hapi/hapi'; import Boom from '@hapi/boom'; @@ -96,6 +97,18 @@ describe('getPayloadSize', () => { expect(result).toBe(Buffer.byteLength(data)); }); + + test('ignores streams that are not instances of ReadStream', async () => { + const result = getResponsePayloadBytes( + { + variety: 'stream', + source: createGunzip(), + } as Response, + logger + ); + + expect(result).toBe(undefined); + }); }); describe('handles plain responses', () => { @@ -132,6 +145,17 @@ describe('getPayloadSize', () => { ); expect(result).toBe(JSON.stringify(payload).length); }); + + test('returns undefined when source is not a plain object', () => { + const result = getResponsePayloadBytes( + { + variety: 'plain', + source: [1, 2, 3], + } as Response, + logger + ); + expect(result).toBe(undefined); + }); }); describe('handles content-length header', () => { diff --git a/src/core/server/http/logging/get_payload_size.ts b/src/core/server/http/logging/get_payload_size.ts index 6dcaf3653d842..8e6dea13e1fa1 100644 --- a/src/core/server/http/logging/get_payload_size.ts +++ b/src/core/server/http/logging/get_payload_size.ts @@ -6,7 +6,8 @@ * Side Public License, v 1. */ -import type { ReadStream } from 'fs'; +import { isPlainObject } from 'lodash'; +import { ReadStream } from 'fs'; import { isBoom } from '@hapi/boom'; import type { Request } from '@hapi/hapi'; import { Logger } from '../../logging'; @@ -17,8 +18,15 @@ const isBuffer = (src: unknown, res: Response): src is Buffer => { return !isBoom(res) && res.variety === 'buffer' && res.source === src; }; const isFsReadStream = (src: unknown, res: Response): src is ReadStream => { - return !isBoom(res) && res.variety === 'stream' && res.source === src; + return ( + !isBoom(res) && + res.variety === 'stream' && + res.source === src && + res.source instanceof ReadStream + ); }; +const isString = (src: unknown, res: Response): src is string => + !isBoom(res) && res.variety === 'plain' && typeof src === 'string'; /** * Attempts to determine the size (in bytes) of a Hapi response @@ -57,10 +65,12 @@ export function getResponsePayloadBytes(response: Response, log: Logger): number return response.source.bytesRead; } - if (response.variety === 'plain') { - return typeof response.source === 'string' - ? Buffer.byteLength(response.source) - : Buffer.byteLength(JSON.stringify(response.source)); + if (isString(response.source, response)) { + return Buffer.byteLength(response.source); + } + + if (response.variety === 'plain' && isPlainObject(response.source)) { + return Buffer.byteLength(JSON.stringify(response.source)); } } catch (e) { // We intentionally swallow any errors as this information is diff --git a/src/plugins/dashboard/public/application/hooks/use_dashboard_container.test.tsx b/src/plugins/dashboard/public/application/hooks/use_dashboard_container.test.tsx new file mode 100644 index 0000000000000..d14b4056a64c6 --- /dev/null +++ b/src/plugins/dashboard/public/application/hooks/use_dashboard_container.test.tsx @@ -0,0 +1,173 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { useDashboardContainer } from './use_dashboard_container'; +import { renderHook, act } from '@testing-library/react-hooks'; +import { KibanaContextProvider } from '../../../../kibana_react/public'; +import React from 'react'; +import { DashboardStateManager } from '../dashboard_state_manager'; +import { getSavedDashboardMock } from '../test_helpers'; +import { createKbnUrlStateStorage, defer } from '../../../../kibana_utils/public'; +import { createBrowserHistory } from 'history'; +import { dataPluginMock } from '../../../../data/public/mocks'; +import { embeddablePluginMock } from '../../../../embeddable/public/mocks'; +import { DashboardCapabilities } from '../types'; +import { EmbeddableFactory } from '../../../../embeddable/public'; +import { HelloWorldEmbeddable } from '../../../../embeddable/public/tests/fixtures'; +import { DashboardContainer } from '../embeddable'; + +const savedDashboard = getSavedDashboardMock(); + +// TS is *very* picky with type guards / predicates. can't just use jest.fn() +function mockHasTaggingCapabilities(obj: any): obj is any { + return false; +} + +const history = createBrowserHistory(); +const createDashboardState = () => + new DashboardStateManager({ + savedDashboard, + hideWriteControls: false, + allowByValueEmbeddables: false, + kibanaVersion: '7.0.0', + kbnUrlStateStorage: createKbnUrlStateStorage(), + history: createBrowserHistory(), + hasTaggingCapabilities: mockHasTaggingCapabilities, + }); + +const defaultCapabilities: DashboardCapabilities = { + show: false, + createNew: false, + saveQuery: false, + createShortUrl: false, + hideWriteControls: true, + mapsCapabilities: { save: false }, + visualizeCapabilities: { save: false }, + storeSearchSession: true, +}; + +const services = { + dashboardCapabilities: defaultCapabilities, + data: dataPluginMock.createStartContract(), + embeddable: embeddablePluginMock.createStartContract(), + scopedHistory: history, +}; + +const setupEmbeddableFactory = () => { + const embeddable = new HelloWorldEmbeddable({ id: 'id' }); + const deferEmbeddableCreate = defer(); + services.embeddable.getEmbeddableFactory.mockImplementation( + () => + (({ + create: () => deferEmbeddableCreate.promise, + } as unknown) as EmbeddableFactory) + ); + const destroySpy = jest.spyOn(embeddable, 'destroy'); + + return { + destroySpy, + embeddable, + createEmbeddable: () => { + act(() => { + deferEmbeddableCreate.resolve(embeddable); + }); + }, + }; +}; + +test('container is destroyed on unmount', async () => { + const { createEmbeddable, destroySpy, embeddable } = setupEmbeddableFactory(); + + const state = createDashboardState(); + const { result, unmount, waitForNextUpdate } = renderHook( + () => useDashboardContainer(state, history, false), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); + + expect(result.current).toBeNull(); // null on initial render + + createEmbeddable(); + + await waitForNextUpdate(); + + expect(embeddable).toBe(result.current); + expect(destroySpy).not.toBeCalled(); + + unmount(); + + expect(destroySpy).toBeCalled(); +}); + +test('old container is destroyed on new dashboardStateManager', async () => { + const embeddableFactoryOld = setupEmbeddableFactory(); + + const { result, waitForNextUpdate, rerender } = renderHook< + DashboardStateManager, + DashboardContainer | null + >((dashboardState) => useDashboardContainer(dashboardState, history, false), { + wrapper: ({ children }) => ( + {children} + ), + initialProps: createDashboardState(), + }); + + expect(result.current).toBeNull(); // null on initial render + + embeddableFactoryOld.createEmbeddable(); + + await waitForNextUpdate(); + + expect(embeddableFactoryOld.embeddable).toBe(result.current); + expect(embeddableFactoryOld.destroySpy).not.toBeCalled(); + + const embeddableFactoryNew = setupEmbeddableFactory(); + rerender(createDashboardState()); + + embeddableFactoryNew.createEmbeddable(); + + await waitForNextUpdate(); + + expect(embeddableFactoryNew.embeddable).toBe(result.current); + + expect(embeddableFactoryNew.destroySpy).not.toBeCalled(); + expect(embeddableFactoryOld.destroySpy).toBeCalled(); +}); + +test('destroyed if rerendered before resolved', async () => { + const embeddableFactoryOld = setupEmbeddableFactory(); + + const { result, waitForNextUpdate, rerender } = renderHook< + DashboardStateManager, + DashboardContainer | null + >((dashboardState) => useDashboardContainer(dashboardState, history, false), { + wrapper: ({ children }) => ( + {children} + ), + initialProps: createDashboardState(), + }); + + expect(result.current).toBeNull(); // null on initial render + + const embeddableFactoryNew = setupEmbeddableFactory(); + rerender(createDashboardState()); + embeddableFactoryNew.createEmbeddable(); + await waitForNextUpdate(); + expect(embeddableFactoryNew.embeddable).toBe(result.current); + expect(embeddableFactoryNew.destroySpy).not.toBeCalled(); + + embeddableFactoryOld.createEmbeddable(); + + await act(() => Promise.resolve()); // Can't use waitFor from hooks, because there is no hook update + expect(embeddableFactoryNew.embeddable).toBe(result.current); + expect(embeddableFactoryNew.destroySpy).not.toBeCalled(); + expect(embeddableFactoryOld.destroySpy).toBeCalled(); +}); diff --git a/src/plugins/dashboard/public/application/hooks/use_dashboard_container.ts b/src/plugins/dashboard/public/application/hooks/use_dashboard_container.ts index a3a31ee52836f..b27322b6bec53 100644 --- a/src/plugins/dashboard/public/application/hooks/use_dashboard_container.ts +++ b/src/plugins/dashboard/public/application/hooks/use_dashboard_container.ts @@ -7,7 +7,6 @@ */ import { useEffect, useState } from 'react'; -import _ from 'lodash'; import { History } from 'history'; import { useKibana } from '../../services/kibana_react'; @@ -15,6 +14,7 @@ import { ContainerOutput, EmbeddableFactoryNotFoundError, EmbeddableInput, + ErrorEmbeddable, isErrorEmbeddable, ViewMode, } from '../../services/embeddable'; @@ -70,8 +70,10 @@ export const useDashboardContainer = ( const incomingEmbeddable = embeddable.getStateTransfer().getIncomingEmbeddablePackage(true); + let canceled = false; + let pendingContainer: DashboardContainer | ErrorEmbeddable | null | undefined; (async function createContainer() { - const newContainer = await dashboardFactory.create( + pendingContainer = await dashboardFactory.create( getDashboardContainerInput({ dashboardCapabilities, dashboardStateManager, @@ -82,12 +84,27 @@ export const useDashboardContainer = ( }) ); - if (!newContainer || isErrorEmbeddable(newContainer)) { + // already new container is being created + // no longer interested in the pending one + if (canceled) { + try { + pendingContainer?.destroy(); + pendingContainer = null; + } catch (e) { + // destroy could throw if something has already destroyed the container + // eslint-disable-next-line no-console + console.warn(e); + } + + return; + } + + if (!pendingContainer || isErrorEmbeddable(pendingContainer)) { return; } // inject switch view mode callback for the empty screen to use - newContainer.switchViewMode = (newViewMode: ViewMode) => + pendingContainer.switchViewMode = (newViewMode: ViewMode) => dashboardStateManager.switchViewMode(newViewMode); // If the incoming embeddable is newly created, or doesn't exist in the current panels list, @@ -96,17 +113,28 @@ export const useDashboardContainer = ( incomingEmbeddable && (!incomingEmbeddable?.embeddableId || (incomingEmbeddable.embeddableId && - !newContainer.getInput().panels[incomingEmbeddable.embeddableId])) + !pendingContainer.getInput().panels[incomingEmbeddable.embeddableId])) ) { dashboardStateManager.switchViewMode(ViewMode.EDIT); - newContainer.addNewEmbeddable( + pendingContainer.addNewEmbeddable( incomingEmbeddable.type, incomingEmbeddable.input ); } - setDashboardContainer(newContainer); + setDashboardContainer(pendingContainer); })(); - return () => setDashboardContainer(null); + return () => { + canceled = true; + try { + pendingContainer?.destroy(); + } catch (e) { + // destroy could throw if something has already destroyed the container + // eslint-disable-next-line no-console + console.warn(e); + } + + setDashboardContainer(null); + }; }, [ dashboardCapabilities, dashboardStateManager, diff --git a/src/plugins/data/server/search/mocks.ts b/src/plugins/data/server/search/mocks.ts index e32e3326dede0..248487f216a56 100644 --- a/src/plugins/data/server/search/mocks.ts +++ b/src/plugins/data/server/search/mocks.ts @@ -40,5 +40,6 @@ export function createSearchRequestHandlerContext() { updateSession: jest.fn(), extendSession: jest.fn(), cancelSession: jest.fn(), + deleteSession: jest.fn(), }; } diff --git a/src/plugins/data/server/search/search_service.ts b/src/plugins/data/server/search/search_service.ts index 91d9bd6e0d284..ce0771a1e9df8 100644 --- a/src/plugins/data/server/search/search_service.ts +++ b/src/plugins/data/server/search/search_service.ts @@ -307,9 +307,8 @@ export class SearchService implements Plugin { return strategy.extend(id, keepAlive, options, deps); }; - private cancelSession = async (deps: SearchStrategyDependencies, sessionId: string) => { + private cancelSessionSearches = async (deps: SearchStrategyDependencies, sessionId: string) => { const searchIdMapping = await deps.searchSessionsClient.getSearchIdMapping(sessionId); - const response = await deps.searchSessionsClient.cancel(sessionId); for (const [searchId, strategyName] of searchIdMapping.entries()) { const searchOptions = { @@ -319,10 +318,19 @@ export class SearchService implements Plugin { }; this.cancel(deps, searchId, searchOptions); } + }; + private cancelSession = async (deps: SearchStrategyDependencies, sessionId: string) => { + const response = await deps.searchSessionsClient.cancel(sessionId); + this.cancelSessionSearches(deps, sessionId); return response; }; + private deleteSession = async (deps: SearchStrategyDependencies, sessionId: string) => { + this.cancelSessionSearches(deps, sessionId); + return deps.searchSessionsClient.delete(sessionId); + }; + private extendSession = async ( deps: SearchStrategyDependencies, sessionId: string, @@ -372,6 +380,7 @@ export class SearchService implements Plugin { updateSession: searchSessionsClient.update, extendSession: this.extendSession.bind(this, deps), cancelSession: this.cancelSession.bind(this, deps), + deleteSession: this.deleteSession.bind(this, deps), }; }; }; diff --git a/src/plugins/data/server/search/session/mocks.ts b/src/plugins/data/server/search/session/mocks.ts index 5e940412d9abd..c173e1a1290ea 100644 --- a/src/plugins/data/server/search/session/mocks.ts +++ b/src/plugins/data/server/search/session/mocks.ts @@ -21,5 +21,6 @@ export function createSearchSessionsClientMock(): jest.Mocked< update: jest.fn(), cancel: jest.fn(), extend: jest.fn(), + delete: jest.fn(), }; } diff --git a/src/plugins/data/server/search/session/session_service.ts b/src/plugins/data/server/search/session/session_service.ts index 2ca580f50db0a..2ed44b4e57d94 100644 --- a/src/plugins/data/server/search/session/session_service.ts +++ b/src/plugins/data/server/search/session/session_service.ts @@ -41,6 +41,9 @@ export class SearchSessionService implements ISearchSessionService { cancel: async () => { throw new Error('cancel not implemented in OSS search session service'); }, + delete: async () => { + throw new Error('delete not implemented in OSS search session service'); + }, }); } } diff --git a/src/plugins/data/server/search/session/types.ts b/src/plugins/data/server/search/session/types.ts index 16079b51f4bff..816716360415d 100644 --- a/src/plugins/data/server/search/session/types.ts +++ b/src/plugins/data/server/search/session/types.ts @@ -29,6 +29,7 @@ export interface IScopedSearchSessionsClient { find: (options: Omit) => Promise>; update: (sessionId: string, attributes: Partial) => Promise>; cancel: (sessionId: string) => Promise<{}>; + delete: (sessionId: string) => Promise<{}>; extend: (sessionId: string, expires: Date) => Promise>; } diff --git a/src/plugins/data/server/search/types.ts b/src/plugins/data/server/search/types.ts index 854f5ed94eb48..e8548257c0167 100644 --- a/src/plugins/data/server/search/types.ts +++ b/src/plugins/data/server/search/types.ts @@ -92,6 +92,7 @@ export interface IScopedSearchClient extends ISearchClient { findSessions: IScopedSearchSessionsClient['find']; updateSession: IScopedSearchSessionsClient['update']; cancelSession: IScopedSearchSessionsClient['cancel']; + deleteSession: IScopedSearchSessionsClient['delete']; extendSession: IScopedSearchSessionsClient['extend']; } diff --git a/src/plugins/data/server/server.api.md b/src/plugins/data/server/server.api.md index beda5b3cea97e..68582a9d877e9 100644 --- a/src/plugins/data/server/server.api.md +++ b/src/plugins/data/server/server.api.md @@ -1254,6 +1254,7 @@ export class SearchSessionService implements ISearchSessionService { update: () => Promise; extend: () => Promise; cancel: () => Promise; + delete: () => Promise; }; } @@ -1430,7 +1431,7 @@ export function usageProvider(core: CoreSetup_2): SearchUsage; // src/plugins/data/server/index.ts:266:1 - (ae-forgotten-export) The symbol "calcAutoIntervalLessThan" needs to be exported by the entry point index.d.ts // src/plugins/data/server/index_patterns/index_patterns_service.ts:59:14 - (ae-forgotten-export) The symbol "IndexPatternsService" needs to be exported by the entry point index.d.ts // src/plugins/data/server/plugin.ts:79:74 - (ae-forgotten-export) The symbol "DataEnhancements" needs to be exported by the entry point index.d.ts -// src/plugins/data/server/search/types.ts:113:5 - (ae-forgotten-export) The symbol "ISearchStartSearchSource" needs to be exported by the entry point index.d.ts +// src/plugins/data/server/search/types.ts:114:5 - (ae-forgotten-export) The symbol "ISearchStartSearchSource" needs to be exported by the entry point index.d.ts // (No @packageDocumentation comment for this package) diff --git a/src/plugins/discover/public/application/angular/discover.js b/src/plugins/discover/public/application/angular/discover.js index 13ff8b14d9b43..b22bb6dc71342 100644 --- a/src/plugins/discover/public/application/angular/discover.js +++ b/src/plugins/discover/public/application/angular/discover.js @@ -56,7 +56,6 @@ import { SORT_DEFAULT_ORDER_SETTING, } from '../../../common'; import { loadIndexPattern, resolveIndexPattern } from '../helpers/resolve_index_pattern'; -import { getTopNavLinks } from '../components/top_nav/get_top_nav_links'; import { updateSearchSource } from '../helpers/update_search_source'; import { calcFieldCounts } from '../helpers/calc_field_counts'; import { getDefaultSort } from './doc_table/lib/get_default_sort'; @@ -198,7 +197,7 @@ function discoverController($route, $scope, Promise) { session: data.search.session, }); - const state = getState({ + const stateContainer = getState({ getStateDefaults, storeInSessionStorage: config.get('state:storeInSessionStorage'), history, @@ -213,7 +212,7 @@ function discoverController($route, $scope, Promise) { replaceUrlAppState, kbnUrlStateStorage, getPreviousAppState, - } = state; + } = stateContainer; if (appStateContainer.getState().index !== $scope.indexPattern.id) { //used index pattern is different than the given by url/state which is invalid @@ -323,10 +322,24 @@ function discoverController($route, $scope, Promise) { ) ); - const inspectorAdapters = { - requests: new RequestAdapter(), + $scope.opts = { + // number of records to fetch, then paginate through + sampleSize: config.get(SAMPLE_SIZE_SETTING), + timefield: getTimeField(), + savedSearch: savedSearch, + indexPatternList: $route.current.locals.savedObjects.ip.list, + config: config, + setHeaderActionMenu: getHeaderActionMenuMounter(), + filterManager, + setAppState, + data, + stateContainer, }; + const inspectorAdapters = ($scope.opts.inspectorAdapters = { + requests: new RequestAdapter(), + }); + $scope.timefilterUpdateHandler = (ranges) => { timefilter.setTime({ from: moment(ranges.from).toISOString(), @@ -358,7 +371,7 @@ function discoverController($route, $scope, Promise) { unlistenHistoryBasePath(); }); - const getFieldCounts = async () => { + $scope.opts.getFieldCounts = async () => { // the field counts aren't set until we have the data back, // so we wait for the fetch to be done before proceeding if ($scope.fetchStatus === fetchStatuses.COMPLETE) { @@ -374,20 +387,11 @@ function discoverController($route, $scope, Promise) { }); }); }; - - $scope.topNavMenu = getTopNavLinks({ - getFieldCounts, - indexPattern: $scope.indexPattern, - inspectorAdapters, - navigateTo: (path) => { - $scope.$evalAsync(() => { - history.push(path); - }); - }, - savedSearch, - services, - state, - }); + $scope.opts.navigateTo = (path) => { + $scope.$evalAsync(() => { + history.push(path); + }); + }; $scope.searchSource .setField('index', $scope.indexPattern) @@ -446,19 +450,6 @@ function discoverController($route, $scope, Promise) { $scope.state.index = $scope.indexPattern.id; $scope.state.sort = getSortArray($scope.state.sort, $scope.indexPattern); - $scope.opts = { - // number of records to fetch, then paginate through - sampleSize: config.get(SAMPLE_SIZE_SETTING), - timefield: getTimeField(), - savedSearch: savedSearch, - indexPatternList: $route.current.locals.savedObjects.ip.list, - config: config, - setHeaderActionMenu: getHeaderActionMenuMounter(), - filterManager, - setAppState, - data, - }; - const shouldSearchOnPageLoad = () => { // A saved search is created on every page load, so we check the ID to see if we're loading a // previously saved search or if it is just transient diff --git a/src/plugins/discover/public/application/components/discover.test.tsx b/src/plugins/discover/public/application/components/discover.test.tsx index 720b79f53a551..bb0014f4278a1 100644 --- a/src/plugins/discover/public/application/components/discover.test.tsx +++ b/src/plugins/discover/public/application/components/discover.test.tsx @@ -9,11 +9,8 @@ import React from 'react'; import { shallowWithIntl } from '@kbn/test/jest'; import { Discover } from './discover'; -import { inspectorPluginMock } from '../../../../inspector/public/mocks'; import { esHits } from '../../__mocks__/es_hits'; import { indexPatternMock } from '../../__mocks__/index_pattern'; -import { getTopNavLinks } from './top_nav/get_top_nav_links'; -import { DiscoverServices } from '../../build_services'; import { GetStateReturn } from '../angular/discover_state'; import { savedSearchMock } from '../../__mocks__/saved_search'; import { createSearchSourceMock } from '../../../../data/common/search/search_source/mocks'; @@ -25,6 +22,8 @@ import { SavedObject } from '../../../../../core/types'; import { navigationPluginMock } from '../../../../navigation/public/mocks'; import { indexPatternWithTimefieldMock } from '../../__mocks__/index_pattern_with_timefield'; import { calcFieldCounts } from '../helpers/calc_field_counts'; +import { DiscoverProps } from './types'; +import { RequestAdapter } from '../../../../inspector/common'; const mockNavigation = navigationPluginMock.createStartContract(); @@ -45,17 +44,9 @@ jest.mock('../../kibana_services', () => { }; }); -function getProps(indexPattern: IndexPattern) { +function getProps(indexPattern: IndexPattern): DiscoverProps { const searchSourceMock = createSearchSourceMock({}); const state = ({} as unknown) as GetStateReturn; - const services = ({ - capabilities: { - discover: { - save: true, - }, - }, - uiSettings: mockUiSettings, - } as unknown) as DiscoverServices; return { fetch: jest.fn(), @@ -76,32 +67,25 @@ function getProps(indexPattern: IndexPattern) { opts: { config: mockUiSettings, data: dataPluginMock.createStartContract(), - fixedScroll: jest.fn(), filterManager: createFilterManagerMock(), + getFieldCounts: jest.fn(), indexPatternList: (indexPattern as unknown) as Array>, + inspectorAdapters: { requests: {} as RequestAdapter }, + navigateTo: jest.fn(), sampleSize: 10, savedSearch: savedSearchMock, + setAppState: jest.fn(), setHeaderActionMenu: jest.fn(), + stateContainer: state, timefield: indexPattern.timeFieldName || '', - setAppState: jest.fn(), }, resetQuery: jest.fn(), resultState: 'ready', rows: esHits, searchSource: searchSourceMock, setIndexPattern: jest.fn(), - showSaveQuery: true, state: { columns: [] }, timefilterUpdateHandler: jest.fn(), - topNavMenu: getTopNavLinks({ - getFieldCounts: jest.fn(), - indexPattern, - inspectorAdapters: inspectorPluginMock, - navigateTo: jest.fn(), - savedSearch: savedSearchMock, - services, - state, - }), updateQuery: jest.fn(), updateSavedQueryId: jest.fn(), }; diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index e6c4524f81f56..baee0623f0b5a 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -41,6 +41,8 @@ import { getDisplayedColumns } from '../helpers/columns'; import { SortPairArr } from '../angular/doc_table/lib/get_sort'; import { DiscoverGrid, DiscoverGridProps } from './discover_grid/discover_grid'; import { SEARCH_FIELDS_FROM_SOURCE } from '../../../common'; +import { ElasticSearchHit } from '../doc_views/doc_views_types'; +import { getTopNavLinks } from './top_nav/get_top_nav_links'; const DocTableLegacyMemoized = React.memo((props: DocTableLegacyProps) => ( @@ -77,11 +79,11 @@ export function Discover({ state, timefilterUpdateHandler, timeRange, - topNavMenu, updateQuery, updateSavedQueryId, unmappedFieldsConfig, }: DiscoverProps) { + const [expandedDoc, setExpandedDoc] = useState(undefined); const scrollableDesktop = useRef(null); const collapseIcon = useRef(null); const isMobile = () => { @@ -91,7 +93,24 @@ export function Discover({ const [toggleOn, toggleChart] = useState(true); const [isSidebarClosed, setIsSidebarClosed] = useState(false); - const services = getServices(); + const services = useMemo(() => getServices(), []); + const topNavMenu = useMemo( + () => + getTopNavLinks({ + getFieldCounts: opts.getFieldCounts, + indexPattern, + inspectorAdapters: opts.inspectorAdapters, + navigateTo: opts.navigateTo, + savedSearch: opts.savedSearch, + services, + state: opts.stateContainer, + onOpenInspector: () => { + // prevent overlapping + setExpandedDoc(undefined); + }, + }), + [indexPattern, opts, services] + ); const { TopNavMenu } = services.navigation.ui; const { trackUiMetric } = services; const { savedSearch, indexPatternList, config } = opts; @@ -318,12 +337,14 @@ export function Discover({ void; /** * Grid display settings persisted in Elasticsearch (e.g. column width) */ @@ -121,6 +129,7 @@ export const DiscoverGrid = ({ ariaLabelledBy, columns, indexPattern, + expandedDoc, onAddColumn, onFilter, onRemoveColumn, @@ -132,11 +141,11 @@ export const DiscoverGrid = ({ searchDescription, searchTitle, services, + setExpandedDoc, settings, showTimeCol, sort, }: DiscoverGridProps) => { - const [expanded, setExpanded] = useState(undefined); const defaultColumns = columns.includes('_source'); /** @@ -233,8 +242,8 @@ export const DiscoverGrid = ({ return ( )} - {expanded && ( + {expandedDoc && ( setExpanded(undefined)} + onClose={() => setExpandedDoc(undefined)} services={services} /> )} diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index 6ead2aff67452..684a7d4fd467c 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -101,9 +101,8 @@ export function DocViewTable({ ? 'nested' : indexPattern.fields.getByName(field)?.type; return ( - + { indexPattern: indexPatternMock, inspectorAdapters: inspectorPluginMock, navigateTo: jest.fn(), + onOpenInspector: jest.fn(), savedSearch: savedSearchMock, services, state, diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.ts b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.ts index 0b23c31ac03c4..513508c478aa9 100644 --- a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.ts +++ b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.ts @@ -28,6 +28,7 @@ export const getTopNavLinks = ({ savedSearch, services, state, + onOpenInspector, }: { getFieldCounts: () => Promise>; indexPattern: IndexPattern; @@ -36,6 +37,7 @@ export const getTopNavLinks = ({ savedSearch: SavedSearch; services: DiscoverServices; state: GetStateReturn; + onOpenInspector: () => void; }) => { const newSearch = { id: 'new', @@ -123,6 +125,7 @@ export const getTopNavLinks = ({ }), testId: 'openInspectorButton', run: () => { + onOpenInspector(); services.inspector.open(inspectorAdapters, { title: savedSearch.title, }); diff --git a/src/plugins/discover/public/application/components/types.ts b/src/plugins/discover/public/application/components/types.ts index abc8086e72712..b73f7391bf22a 100644 --- a/src/plugins/discover/public/application/components/types.ts +++ b/src/plugins/discover/public/application/components/types.ts @@ -21,8 +21,8 @@ import { TimeRange, } from '../../../../data/public'; import { SavedSearch } from '../../saved_searches'; -import { AppState } from '../angular/discover_state'; -import { TopNavMenuData } from '../../../../navigation/public'; +import { AppState, GetStateReturn } from '../angular/discover_state'; +import { RequestAdapter } from '../../../../inspector/common'; export interface DiscoverProps { /** @@ -100,6 +100,22 @@ export interface DiscoverProps { * Client of uiSettings */ config: IUiSettingsClient; + /** + * returns field statistics based on the loaded data sample + */ + getFieldCounts: () => Promise>; + /** + * Use angular router for navigation + */ + navigateTo: () => void; + /** + * Functions to get/mutate state + */ + stateContainer: GetStateReturn; + /** + * Inspect, for analyzing requests and responses + */ + inspectorAdapters: { requests: RequestAdapter }; /** * Data plugin */ @@ -165,10 +181,6 @@ export interface DiscoverProps { * Currently selected time range */ timeRange?: { from: string; to: string }; - /** - * Menu data of top navigation (New, save ...) - */ - topNavMenu: TopNavMenuData[]; /** * Function to update the actual query */ diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable.ts b/src/plugins/discover/public/application/embeddable/search_embeddable.ts index d04d482c7aade..658734aa46cb0 100644 --- a/src/plugins/discover/public/application/embeddable/search_embeddable.ts +++ b/src/plugins/discover/public/application/embeddable/search_embeddable.ts @@ -308,9 +308,9 @@ export class SearchEmbeddable ); if (useNewFieldsApi) { searchSource.removeField('fieldsFromSource'); - const fields: Record = { field: '*' }; + const fields: Record = { field: '*' }; if (pre712) { - fields.include_unmapped = true; + fields.include_unmapped = 'true'; } searchSource.setField('fields', [fields]); } else { diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx index 4f34bc6aa73b4..4dff5f1e0b598 100644 --- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx +++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx @@ -149,7 +149,8 @@ export const EditIndexPattern = withRouter( chrome.docTitle.change(indexPattern.title); const showTagsSection = Boolean(indexPattern.timeFieldName || (tags && tags.length > 0)); - + const kibana = useKibana(); + const docsUrl = kibana.services.docLinks!.links.elasticsearch.mapping; return (
@@ -182,11 +183,7 @@ export const EditIndexPattern = withRouter( defaultMessage="This page lists every field in the {indexPatternTitle} index and the field's associated core type as recorded by Elasticsearch. To change a field type, use the Elasticsearch" values={{ indexPatternTitle: {indexPattern.title} }} />{' '} - + {mappingAPILink}

diff --git a/src/plugins/maps_legacy/public/components/wms_options.tsx b/src/plugins/maps_legacy/public/components/wms_options.tsx index b30f20d355262..d4ed5abd896e4 100644 --- a/src/plugins/maps_legacy/public/components/wms_options.tsx +++ b/src/plugins/maps_legacy/public/components/wms_options.tsx @@ -11,7 +11,6 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { TmsLayer } from '../index'; -import { Vis } from '../../../visualizations/public'; import { SelectOption, SwitchOption } from '../../../vis_default_editor/public'; import { WmsInternalOptions } from './wms_internal_options'; import { WMSOptions } from '../common/types'; @@ -19,14 +18,13 @@ import { WMSOptions } from '../common/types'; interface Props { stateParams: K; setValue: (title: 'wms', options: WMSOptions) => void; - vis: Vis; + tmsLayers: TmsLayer[]; } const mapLayerForOption = ({ id }: TmsLayer) => ({ text: id, value: id }); -function WmsOptions({ stateParams, setValue, vis }: Props) { +function WmsOptions({ stateParams, setValue, tmsLayers }: Props) { const { wms } = stateParams; - const { tmsLayers } = vis.type.editorConfig.collections; const tmsLayerOptions = useMemo(() => tmsLayers.map(mapLayerForOption), [tmsLayers]); const setWmsOption = (paramName: T, value: WMSOptions[T]) => diff --git a/src/plugins/newsfeed/public/plugin.tsx b/src/plugins/newsfeed/public/plugin.tsx index 94a113a2786c2..a788b3c4d0b59 100644 --- a/src/plugins/newsfeed/public/plugin.tsx +++ b/src/plugins/newsfeed/public/plugin.tsx @@ -51,7 +51,10 @@ export class NewsfeedPublicPlugin return { createNewsFeed$: (endpoint: NewsfeedApiEndpoint) => { const config = Object.assign({}, this.config, { - service: { pathTemplate: `/${endpoint}/v{VERSION}.json` }, + service: { + ...this.config.service, + pathTemplate: `/${endpoint}/v{VERSION}.json`, + }, }); return this.fetchNewsfeed(core, config); }, diff --git a/src/plugins/region_map/public/components/region_map_options.tsx b/src/plugins/region_map/public/components/region_map_options.tsx index 5b5b71c9e9f4e..2bf13e46f70de 100644 --- a/src/plugins/region_map/public/components/region_map_options.tsx +++ b/src/plugins/region_map/public/components/region_map_options.tsx @@ -11,10 +11,12 @@ import { EuiIcon, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elast import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { VisEditorOptionsProps } from 'src/plugins/visualizations/public'; +import { truncatedColorSchemas } from '../../../charts/public'; import { FileLayerField, VectorLayer, IServiceSettings } from '../../../maps_legacy/public'; import { SelectOption, SwitchOption, NumberInputOption } from '../../../vis_default_editor/public'; import { WmsOptions } from '../../../maps_legacy/public'; import { RegionMapVisParams } from '../region_map_types'; +import { getTmsLayers, getVectorLayers } from '../kibana_services'; const mapLayerForOption = ({ layerId, name }: VectorLayer) => ({ text: name, @@ -26,14 +28,16 @@ const mapFieldForOption = ({ description, name }: FileLayerField) => ({ value: name, }); +const tmsLayers = getTmsLayers(); +const vectorLayers = getVectorLayers(); +const vectorLayerOptions = vectorLayers.map(mapLayerForOption); + export type RegionMapOptionsProps = { getServiceSettings: () => Promise; } & VisEditorOptionsProps; function RegionMapOptions(props: RegionMapOptionsProps) { - const { getServiceSettings, stateParams, vis, setValue } = props; - const { vectorLayers } = vis.type.editorConfig.collections; - const vectorLayerOptions = useMemo(() => vectorLayers.map(mapLayerForOption), [vectorLayers]); + const { getServiceSettings, stateParams, setValue } = props; const fieldOptions = useMemo( () => ((stateParams.selectedLayer && stateParams.selectedLayer.fields) || []).map( @@ -61,7 +65,7 @@ function RegionMapOptions(props: RegionMapOptionsProps) { setEmsHotLink(newLayer); } }, - [vectorLayers, setEmsHotLink, setValue] + [setEmsHotLink, setValue] ); const setField = useCallback( @@ -178,7 +182,7 @@ function RegionMapOptions(props: RegionMapOptionsProps) { label={i18n.translate('regionMap.visParams.colorSchemaLabel', { defaultMessage: 'Color schema', })} - options={vis.type.editorConfig.collections.colorSchemas} + options={truncatedColorSchemas} paramName="colorSchema" value={stateParams.colorSchema} setValue={setValue} @@ -197,7 +201,7 @@ function RegionMapOptions(props: RegionMapOptionsProps) { - + ); } diff --git a/src/plugins/region_map/public/kibana_services.ts b/src/plugins/region_map/public/kibana_services.ts index 60465e2e0c251..77bc472e3b140 100644 --- a/src/plugins/region_map/public/kibana_services.ts +++ b/src/plugins/region_map/public/kibana_services.ts @@ -12,6 +12,7 @@ import { createGetterSetter } from '../../kibana_utils/public'; import { DataPublicPluginStart } from '../../data/public'; import { KibanaLegacyStart } from '../../kibana_legacy/public'; import { SharePluginStart } from '../../share/public'; +import { VectorLayer, TmsLayer } from '../../maps_legacy/public'; export const [getCoreService, setCoreService] = createGetterSetter('Core'); @@ -32,3 +33,7 @@ export const [getShareService, setShareService] = createGetterSetter( 'KibanaLegacy' ); + +export const [getTmsLayers, setTmsLayers] = createGetterSetter('TmsLayers'); + +export const [getVectorLayers, setVectorLayers] = createGetterSetter('VectorLayers'); diff --git a/src/plugins/region_map/public/region_map_type.ts b/src/plugins/region_map/public/region_map_type.ts index 0e8df51b17c79..35f4cffca18d4 100644 --- a/src/plugins/region_map/public/region_map_type.ts +++ b/src/plugins/region_map/public/region_map_type.ts @@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n'; import { VisTypeDefinition } from '../../visualizations/public'; -import { truncatedColorSchemas } from '../../charts/public'; import { ORIGIN } from '../../maps_legacy/public'; import { getDeprecationMessage } from './get_deprecation_message'; @@ -18,6 +17,7 @@ import { createRegionMapOptions } from './components'; import { toExpressionAst } from './to_ast'; import { RegionMapVisParams } from './region_map_types'; import { mapToLayerWithId } from './util'; +import { setTmsLayers, setVectorLayers } from './kibana_services'; export function createRegionMapTypeDefinition({ uiSettings, @@ -50,11 +50,6 @@ provided base maps, or add your own. Darker colors represent higher values.', }, editorConfig: { optionsTemplate: createRegionMapOptions(getServiceSettings), - collections: { - colorSchemas: truncatedColorSchemas, - vectorLayers: [], - tmsLayers: [], - }, schemas: [ { group: 'metrics', @@ -95,7 +90,9 @@ provided base maps, or add your own. Darker colors represent higher values.', setup: async (vis) => { const serviceSettings = await getServiceSettings(); const tmsLayers = await serviceSettings.getTMSServices(); - vis.type.editorConfig.collections.tmsLayers = tmsLayers; + setTmsLayers(tmsLayers); + setVectorLayers([]); + if (!vis.params.wms.selectedTmsLayer && tmsLayers.length) { vis.params.wms.selectedTmsLayer = tmsLayers[0]; } @@ -122,9 +119,10 @@ provided base maps, or add your own. Darker colors represent higher values.', } }); - vis.type.editorConfig.collections.vectorLayers = [...vectorLayers, ...newLayers]; + const allVectorLayers = [...vectorLayers, ...newLayers]; + setVectorLayers(allVectorLayers); - [selectedLayer] = vis.type.editorConfig.collections.vectorLayers; + [selectedLayer] = allVectorLayers; selectedJoinField = selectedLayer ? selectedLayer.fields[0] : undefined; if (selectedLayer && !vis.params.selectedLayer && selectedLayer.isEMS) { diff --git a/src/plugins/tile_map/public/components/collections.ts b/src/plugins/tile_map/public/components/collections.ts new file mode 100644 index 0000000000000..f75d83c4a055f --- /dev/null +++ b/src/plugins/tile_map/public/components/collections.ts @@ -0,0 +1,65 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 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 { i18n } from '@kbn/i18n'; +import { MapTypes } from '../utils/map_types'; + +export const collections = { + mapTypes: [ + { + value: MapTypes.ScaledCircleMarkers, + text: i18n.translate('tileMap.mapTypes.scaledCircleMarkersText', { + defaultMessage: 'Scaled circle markers', + }), + }, + { + value: MapTypes.ShadedCircleMarkers, + text: i18n.translate('tileMap.mapTypes.shadedCircleMarkersText', { + defaultMessage: 'Shaded circle markers', + }), + }, + { + value: MapTypes.ShadedGeohashGrid, + text: i18n.translate('tileMap.mapTypes.shadedGeohashGridText', { + defaultMessage: 'Shaded geohash grid', + }), + }, + { + value: MapTypes.Heatmap, + text: i18n.translate('tileMap.mapTypes.heatmapText', { + defaultMessage: 'Heatmap', + }), + }, + ], + legendPositions: [ + { + value: 'bottomleft', + text: i18n.translate('tileMap.legendPositions.bottomLeftText', { + defaultMessage: 'Bottom left', + }), + }, + { + value: 'bottomright', + text: i18n.translate('tileMap.legendPositions.bottomRightText', { + defaultMessage: 'Bottom right', + }), + }, + { + value: 'topleft', + text: i18n.translate('tileMap.legendPositions.topLeftText', { + defaultMessage: 'Top left', + }), + }, + { + value: 'topright', + text: i18n.translate('tileMap.legendPositions.topRightText', { + defaultMessage: 'Top right', + }), + }, + ], +}; diff --git a/src/plugins/tile_map/public/components/tile_map_options.tsx b/src/plugins/tile_map/public/components/tile_map_options.tsx index 9164a4b0d6300..dbe28f0e2c2dd 100644 --- a/src/plugins/tile_map/public/components/tile_map_options.tsx +++ b/src/plugins/tile_map/public/components/tile_map_options.tsx @@ -17,20 +17,25 @@ import { SwitchOption, RangeOption, } from '../../../vis_default_editor/public'; +import { truncatedColorSchemas } from '../../../charts/public'; import { WmsOptions } from '../../../maps_legacy/public'; import { TileMapVisParams } from '../types'; import { MapTypes } from '../utils/map_types'; +import { getTmsLayers } from '../services'; +import { collections } from './collections'; export type TileMapOptionsProps = VisEditorOptionsProps; +const tmsLayers = getTmsLayers(); + function TileMapOptions(props: TileMapOptionsProps) { const { stateParams, setValue, vis } = props; useEffect(() => { if (!stateParams.mapType) { - setValue('mapType', vis.type.editorConfig.collections.mapTypes[0]); + setValue('mapType', collections.mapTypes[0].value); } - }, [setValue, stateParams.mapType, vis.type.editorConfig.collections.mapTypes]); + }, [setValue, stateParams.mapType]); return ( <> @@ -39,7 +44,7 @@ function TileMapOptions(props: TileMapOptionsProps) { label={i18n.translate('tileMap.visParams.mapTypeLabel', { defaultMessage: 'Map type', })} - options={vis.type.editorConfig.collections.mapTypes} + options={collections.mapTypes} paramName="mapType" value={stateParams.mapType} setValue={setValue} @@ -62,14 +67,14 @@ function TileMapOptions(props: TileMapOptionsProps) { label={i18n.translate('tileMap.visParams.colorSchemaLabel', { defaultMessage: 'Color schema', })} - options={vis.type.editorConfig.collections.colorSchemas} + options={truncatedColorSchemas} paramName="colorSchema" value={stateParams.colorSchema} setValue={setValue} /> )} - + - + ); } diff --git a/src/plugins/tile_map/public/services.ts b/src/plugins/tile_map/public/services.ts index 3e6dbb69c9403..af23daf24f7f5 100644 --- a/src/plugins/tile_map/public/services.ts +++ b/src/plugins/tile_map/public/services.ts @@ -11,6 +11,7 @@ import { createGetterSetter } from '../../kibana_utils/public'; import { DataPublicPluginStart } from '../../data/public'; import { KibanaLegacyStart } from '../../kibana_legacy/public'; import { SharePluginStart } from '../../share/public'; +import { TmsLayer } from '../../maps_legacy/public'; export const [getCoreService, setCoreService] = createGetterSetter('Core'); @@ -27,3 +28,5 @@ export const [getShareService, setShareService] = createGetterSetter( 'KibanaLegacy' ); + +export const [getTmsLayers, setTmsLayers] = createGetterSetter('TmsLayers'); diff --git a/src/plugins/tile_map/public/tile_map_type.ts b/src/plugins/tile_map/public/tile_map_type.ts index dc2cd418c28e2..5e71351f1bd56 100644 --- a/src/plugins/tile_map/public/tile_map_type.ts +++ b/src/plugins/tile_map/public/tile_map_type.ts @@ -8,7 +8,6 @@ import { i18n } from '@kbn/i18n'; import { VisTypeDefinition } from 'src/plugins/visualizations/public'; -import { truncatedColorSchemas } from '../../charts/public'; // @ts-expect-error import { supportsCssFilters } from './css_filters'; @@ -17,7 +16,7 @@ import { getDeprecationMessage } from './get_deprecation_message'; import { TileMapVisualizationDependencies } from './plugin'; import { toExpressionAst } from './to_ast'; import { TileMapVisParams } from './types'; -import { MapTypes } from './utils/map_types'; +import { setTmsLayers } from './services'; export function createTileMapTypeDefinition( dependencies: TileMapVisualizationDependencies @@ -50,62 +49,6 @@ export function createTileMapTypeDefinition( }, toExpressionAst, editorConfig: { - collections: { - colorSchemas: truncatedColorSchemas, - legendPositions: [ - { - value: 'bottomleft', - text: i18n.translate('tileMap.vis.editorConfig.legendPositions.bottomLeftText', { - defaultMessage: 'Bottom left', - }), - }, - { - value: 'bottomright', - text: i18n.translate('tileMap.vis.editorConfig.legendPositions.bottomRightText', { - defaultMessage: 'Bottom right', - }), - }, - { - value: 'topleft', - text: i18n.translate('tileMap.vis.editorConfig.legendPositions.topLeftText', { - defaultMessage: 'Top left', - }), - }, - { - value: 'topright', - text: i18n.translate('tileMap.vis.editorConfig.legendPositions.topRightText', { - defaultMessage: 'Top right', - }), - }, - ], - mapTypes: [ - { - value: MapTypes.ScaledCircleMarkers, - text: i18n.translate('tileMap.vis.editorConfig.mapTypes.scaledCircleMarkersText', { - defaultMessage: 'Scaled circle markers', - }), - }, - { - value: MapTypes.ShadedCircleMarkers, - text: i18n.translate('tileMap.vis.editorConfig.mapTypes.shadedCircleMarkersText', { - defaultMessage: 'Shaded circle markers', - }), - }, - { - value: MapTypes.ShadedGeohashGrid, - text: i18n.translate('tileMap.vis.editorConfig.mapTypes.shadedGeohashGridText', { - defaultMessage: 'Shaded geohash grid', - }), - }, - { - value: MapTypes.Heatmap, - text: i18n.translate('tileMap.vis.editorConfig.mapTypes.heatmapText', { - defaultMessage: 'Heatmap', - }), - }, - ], - tmsLayers: [], - }, optionsTemplate: TileMapOptionsLazy, schemas: [ { @@ -141,7 +84,7 @@ export function createTileMapTypeDefinition( return vis; } - vis.type.editorConfig.collections.tmsLayers = tmsLayers; + setTmsLayers(tmsLayers); if (!vis.params.wms.selectedTmsLayer && tmsLayers.length) { vis.params.wms.selectedTmsLayer = tmsLayers[0]; } diff --git a/src/plugins/vis_default_editor/public/components/options/basic_options.tsx b/src/plugins/vis_default_editor/public/components/options/basic_options.tsx index 5d19b6dab4b82..5cec0743b94fd 100644 --- a/src/plugins/vis_default_editor/public/components/options/basic_options.tsx +++ b/src/plugins/vis_default_editor/public/components/options/basic_options.tsx @@ -19,18 +19,23 @@ interface BasicOptionsParams { legendPosition: string; } +type LegendPositions = Array<{ + value: string; + text: string; +}>; + function BasicOptions({ stateParams, setValue, - vis, -}: VisEditorOptionsProps) { + legendPositions, +}: VisEditorOptionsProps & { legendPositions: LegendPositions }) { return ( <> ) { const setMetricValue: ( @@ -137,14 +157,14 @@ function MetricVisOptions({ isDisabled={stateParams.metric.colorsRange.length === 1} isFullWidth={true} legend={metricColorModeLabel} - options={vis.type.editorConfig.collections.metricColorMode} + options={metricColorMode} onChange={setColorMode} /> => }, }, editorConfig: { - collections: { - metricColorMode: [ - { - id: ColorMode.None, - label: i18n.translate('visTypeMetric.colorModes.noneOptionLabel', { - defaultMessage: 'None', - }), - }, - { - id: ColorMode.Labels, - label: i18n.translate('visTypeMetric.colorModes.labelsOptionLabel', { - defaultMessage: 'Labels', - }), - }, - { - id: ColorMode.Background, - label: i18n.translate('visTypeMetric.colorModes.backgroundOptionLabel', { - defaultMessage: 'Background', - }), - }, - ], - colorSchemas, - }, optionsTemplate: MetricVisOptions, schemas: [ { diff --git a/src/plugins/vis_type_tagcloud/public/components/collections.ts b/src/plugins/vis_type_tagcloud/public/components/collections.ts new file mode 100644 index 0000000000000..d5dd3c7f2d252 --- /dev/null +++ b/src/plugins/vis_type_tagcloud/public/components/collections.ts @@ -0,0 +1,68 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { i18n } from '@kbn/i18n'; +import { TagCloudVisParams } from '../types'; + +interface Scales { + text: string; + value: TagCloudVisParams['scale']; +} + +interface Orientation { + text: string; + value: TagCloudVisParams['orientation']; +} + +interface Collections { + scales: Scales[]; + orientations: Orientation[]; +} + +export const collections: Collections = { + scales: [ + { + text: i18n.translate('visTypeTagCloud.scales.linearText', { + defaultMessage: 'Linear', + }), + value: 'linear', + }, + { + text: i18n.translate('visTypeTagCloud.scales.logText', { + defaultMessage: 'Log', + }), + value: 'log', + }, + { + text: i18n.translate('visTypeTagCloud.scales.squareRootText', { + defaultMessage: 'Square root', + }), + value: 'square root', + }, + ], + orientations: [ + { + text: i18n.translate('visTypeTagCloud.orientations.singleText', { + defaultMessage: 'Single', + }), + value: 'single', + }, + { + text: i18n.translate('visTypeTagCloud.orientations.rightAngledText', { + defaultMessage: 'Right angled', + }), + value: 'right angled', + }, + { + text: i18n.translate('visTypeTagCloud.orientations.multipleText', { + defaultMessage: 'Multiple', + }), + value: 'multiple', + }, + ], +}; diff --git a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx index 549cbc8bfec84..d5e005a638680 100644 --- a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx +++ b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx @@ -13,8 +13,9 @@ import { VisEditorOptionsProps } from 'src/plugins/visualizations/public'; import { SelectOption, SwitchOption } from '../../../vis_default_editor/public'; import { ValidatedDualRange } from '../../../kibana_react/public'; import { TagCloudVisParams } from '../types'; +import { collections } from './collections'; -function TagCloudOptions({ stateParams, setValue, vis }: VisEditorOptionsProps) { +function TagCloudOptions({ stateParams, setValue }: VisEditorOptionsProps) { const handleFontSizeChange = ([minFontSize, maxFontSize]: [string | number, string | number]) => { setValue('minFontSize', Number(minFontSize)); setValue('maxFontSize', Number(maxFontSize)); @@ -29,7 +30,7 @@ function TagCloudOptions({ stateParams, setValue, vis }: VisEditorOptionsProps(paramName: T, value: ColorSchemaParams[T]) => { @@ -91,7 +90,7 @@ function RangesPanel({ ) { - const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props; + const { stateParams, uiState, setValue, setValidity, setTouched } = props; const [valueAxis] = stateParams.valueAxes; const isColorsNumberInvalid = stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10; const [isColorRangesValid, setIsColorRangesValid] = useState(false); @@ -65,7 +68,7 @@ function HeatmapOptions(props: VisEditorOptionsProps) { - + ) { ) { label={i18n.translate('visTypeVislib.controls.heatmapOptions.colorScaleLabel', { defaultMessage: 'Color scale', })} - options={vis.type.editorConfig.collections.scales} + options={heatmapCollections.scales} paramName="type" value={valueAxis.scale.type} setValue={setValueAxisScale} diff --git a/src/plugins/vis_type_vislib/public/editor/components/pie.tsx b/src/plugins/vis_type_vislib/public/editor/components/pie.tsx index 9acadd4252a95..6c84bc744676a 100644 --- a/src/plugins/vis_type_vislib/public/editor/components/pie.tsx +++ b/src/plugins/vis_type_vislib/public/editor/components/pie.tsx @@ -14,10 +14,12 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { VisEditorOptionsProps } from 'src/plugins/visualizations/public'; import { BasicOptions, SwitchOption } from '../../../../vis_default_editor/public'; -import { TruncateLabelsOption } from '../../../../vis_type_xy/public'; +import { TruncateLabelsOption, getPositions } from '../../../../vis_type_xy/public'; import { PieVisParams } from '../../pie'; +const legendPositions = getPositions(); + function PieOptions(props: VisEditorOptionsProps) { const { stateParams, setValue } = props; const setLabels = ( @@ -45,7 +47,7 @@ function PieOptions(props: VisEditorOptionsProps) { value={stateParams.isDonut} setValue={setValue} /> - + diff --git a/src/plugins/vis_type_vislib/public/gauge.ts b/src/plugins/vis_type_vislib/public/gauge.ts index cd4c03e5a84d1..315c4388a5cd3 100644 --- a/src/plugins/vis_type_vislib/public/gauge.ts +++ b/src/plugins/vis_type_vislib/public/gauge.ts @@ -14,7 +14,6 @@ import { AggGroupNames } from '../../data/public'; import { VisTypeDefinition, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public'; import { Alignment, GaugeType, VislibChartType } from './types'; -import { getGaugeCollections } from './editor'; import { toExpressionAst } from './to_ast'; import { GaugeOptions } from './editor/components'; @@ -102,7 +101,6 @@ export const gaugeVisTypeDefinition: VisTypeDefinition = { }, }, editorConfig: { - collections: getGaugeCollections(), optionsTemplate: GaugeOptions, schemas: [ { diff --git a/src/plugins/vis_type_vislib/public/goal.ts b/src/plugins/vis_type_vislib/public/goal.ts index a31ba48704d50..aaeae4f675f3f 100644 --- a/src/plugins/vis_type_vislib/public/goal.ts +++ b/src/plugins/vis_type_vislib/public/goal.ts @@ -12,7 +12,7 @@ import { AggGroupNames } from '../../data/public'; import { ColorMode, ColorSchemas } from '../../charts/public'; import { VisTypeDefinition } from '../../visualizations/public'; -import { getGaugeCollections, GaugeOptions } from './editor'; +import { GaugeOptions } from './editor'; import { toExpressionAst } from './to_ast'; import { GaugeType } from './types'; import { GaugeVisParams } from './gauge'; @@ -66,7 +66,6 @@ export const goalVisTypeDefinition: VisTypeDefinition = { }, }, editorConfig: { - collections: getGaugeCollections(), optionsTemplate: GaugeOptions, schemas: [ { diff --git a/src/plugins/vis_type_vislib/public/heatmap.ts b/src/plugins/vis_type_vislib/public/heatmap.ts index ca6dda547571c..f804a78cbe453 100644 --- a/src/plugins/vis_type_vislib/public/heatmap.ts +++ b/src/plugins/vis_type_vislib/public/heatmap.ts @@ -15,7 +15,7 @@ import { ColorSchemas, ColorSchemaParams } from '../../charts/public'; import { VIS_EVENT_TO_TRIGGER, VisTypeDefinition } from '../../visualizations/public'; import { ValueAxis, ScaleType, AxisType } from '../../vis_type_xy/public'; -import { HeatmapOptions, getHeatmapCollections } from './editor'; +import { HeatmapOptions } from './editor'; import { TimeMarker } from './vislib/visualizations/time_marker'; import { CommonVislibParams, VislibChartType } from './types'; import { toExpressionAst } from './to_ast'; @@ -75,7 +75,6 @@ export const heatmapVisTypeDefinition: VisTypeDefinition = { }, }, editorConfig: { - collections: getHeatmapCollections(), optionsTemplate: HeatmapOptions, schemas: [ { diff --git a/src/plugins/vis_type_vislib/public/pie.ts b/src/plugins/vis_type_vislib/public/pie.ts index e00fae7c32f06..d1d8d2a5279fe 100644 --- a/src/plugins/vis_type_vislib/public/pie.ts +++ b/src/plugins/vis_type_vislib/public/pie.ts @@ -11,7 +11,6 @@ import { Position } from '@elastic/charts'; import { AggGroupNames } from '../../data/public'; import { VisTypeDefinition, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public'; -import { getPositions } from '../../vis_type_xy/public'; import { CommonVislibParams } from './types'; import { PieOptions } from './editor'; @@ -53,9 +52,6 @@ export const pieVisTypeDefinition: VisTypeDefinition = { }, }, editorConfig: { - collections: { - legendPositions: getPositions(), - }, optionsTemplate: PieOptions, schemas: [ { diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap index e9cd2b737b879..56f35ae021173 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap @@ -31,6 +31,22 @@ exports[`ChartOptions component should init with the default set of props 1`] = `; diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap index 594511010b745..abcbf1a4fd7d9 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap @@ -150,80 +150,6 @@ exports[`ValueAxesPanel component should init with the default set of props 1`] "type": "value", } } - vis={ - Object { - "type": Object { - "editorConfig": Object { - "collections": Object { - "axisModes": Array [ - Object { - "text": "Normal", - "value": "normal", - }, - Object { - "text": "Percentage", - "value": "percentage", - }, - Object { - "text": "Wiggle", - "value": "wiggle", - }, - Object { - "text": "Silhouette", - "value": "silhouette", - }, - ], - "interpolationModes": Array [ - Object { - "text": "Straight", - "value": "linear", - }, - Object { - "text": "Smoothed", - "value": "cardinal", - }, - Object { - "text": "Stepped", - "value": "step-after", - }, - ], - "positions": Array [ - Object { - "text": "Top", - "value": "top", - }, - Object { - "text": "Left", - "value": "left", - }, - Object { - "text": "Right", - "value": "right", - }, - Object { - "text": "Bottom", - "value": "bottom", - }, - ], - "scaleTypes": Array [ - Object { - "text": "Linear", - "value": "linear", - }, - Object { - "text": "Log", - "value": "log", - }, - Object { - "text": "Square root", - "value": "square root", - }, - ], - }, - }, - }, - } - } /> diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx index 17a504a25b05f..066f053d4e186 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx @@ -11,7 +11,7 @@ import { shallow } from 'enzyme'; import { CategoryAxisPanel, CategoryAxisPanelProps } from './category_axis_panel'; import { CategoryAxis } from '../../../../types'; import { LabelOptions } from './label_options'; -import { categoryAxis, vis } from './mocks'; +import { categoryAxis } from './mocks'; import { Position } from '@elastic/charts'; describe('CategoryAxisPanel component', () => { @@ -27,7 +27,6 @@ describe('CategoryAxisPanel component', () => { defaultProps = { axis, - vis, onPositionChanged, setCategoryAxis, }; diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx index 6c261137d9eb6..5ba35717e46f3 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx @@ -13,25 +13,21 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui'; import { Position } from '@elastic/charts'; -import { VisEditorOptionsProps } from 'src/plugins/visualizations/public'; import { SelectOption, SwitchOption } from '../../../../../../vis_default_editor/public'; import { LabelOptions, SetAxisLabel } from './label_options'; import { CategoryAxis } from '../../../../types'; +import { getPositions } from '../../../collections'; + +const positions = getPositions(); export interface CategoryAxisPanelProps { axis: CategoryAxis; onPositionChanged: (position: Position) => void; setCategoryAxis: (value: CategoryAxis) => void; - vis: VisEditorOptionsProps['vis']; } -function CategoryAxisPanel({ - axis, - onPositionChanged, - vis, - setCategoryAxis, -}: CategoryAxisPanelProps) { +function CategoryAxisPanel({ axis, onPositionChanged, setCategoryAxis }: CategoryAxisPanelProps) { const setAxis = useCallback( (paramName: T, value: CategoryAxis[T]) => { const updatedAxis = { @@ -78,7 +74,7 @@ function CategoryAxisPanel({ label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.positionLabel', { defaultMessage: 'Position', })} - options={vis.type.editorConfig.collections.positions} + options={positions} paramName="position" value={axis.position} setValue={setPosition} diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx index 1e274dce7c2a8..caf14e57fef7e 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx @@ -12,7 +12,7 @@ import { shallow } from 'enzyme'; import { ChartOptions, ChartOptionsParams } from './chart_options'; import { SeriesParam, ChartMode } from '../../../../types'; import { LineOptions } from './line_options'; -import { valueAxis, seriesParam, vis } from './mocks'; +import { valueAxis, seriesParam } from './mocks'; import { ChartType } from '../../../../../common'; describe('ChartOptions component', () => { @@ -29,7 +29,6 @@ describe('ChartOptions component', () => { defaultProps = { index: 0, chart, - vis, valueAxes: [valueAxis], setParamByIndex, changeValueAxis, diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx index 76604383db8c5..6f0b4fc5c9d22 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx @@ -11,13 +11,15 @@ import React, { useMemo, useCallback } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; -import { Vis } from '../../../../../../visualizations/public'; import { SelectOption } from '../../../../../../vis_default_editor/public'; import { SeriesParam, ValueAxis } from '../../../../types'; import { LineOptions } from './line_options'; import { SetParamByIndex, ChangeValueAxis } from '.'; import { ChartType } from '../../../../../common'; +import { getConfigCollections } from '../../../collections'; + +const collections = getConfigCollections(); export type SetChart = (paramName: T, value: SeriesParam[T]) => void; @@ -27,14 +29,12 @@ export interface ChartOptionsParams { changeValueAxis: ChangeValueAxis; setParamByIndex: SetParamByIndex; valueAxes: ValueAxis[]; - vis: Vis; } function ChartOptions({ chart, index, valueAxes, - vis, changeValueAxis, setParamByIndex, }: ChartOptionsParams) { @@ -90,7 +90,7 @@ function ChartOptions({ label={i18n.translate('visTypeXy.controls.pointSeries.series.chartTypeLabel', { defaultMessage: 'Chart type', })} - options={vis.type.editorConfig.collections.chartTypes} + options={collections.chartTypes} paramName="type" value={chart.type} setValue={setChart} @@ -102,7 +102,7 @@ function ChartOptions({ label={i18n.translate('visTypeXy.controls.pointSeries.series.modeLabel', { defaultMessage: 'Mode', })} - options={vis.type.editorConfig.collections.chartModes} + options={collections.chartModes} paramName="mode" value={chart.mode} setValue={setChart} @@ -118,7 +118,7 @@ function ChartOptions({ label={i18n.translate('visTypeXy.controls.pointSeries.series.lineModeLabel', { defaultMessage: 'Line mode', })} - options={vis.type.editorConfig.collections.interpolationModes} + options={collections.interpolationModes} paramName="interpolate" value={chart.interpolate} setValue={setChart} @@ -126,7 +126,7 @@ function ChartOptions({ )} - {chart.type === ChartType.Line && } + {chart.type === ChartType.Line && } ); } diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx index c295d909863dc..d25845f02e7a7 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx @@ -326,14 +326,12 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps) { setMultipleValidity={props.setMultipleValidity} seriesParams={stateParams.seriesParams} valueAxes={stateParams.valueAxes} - vis={vis} /> ) : null; diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx index c8a5e6f17b1ed..5497c46c1dd34 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx @@ -12,7 +12,7 @@ import { shallow } from 'enzyme'; import { NumberInputOption } from '../../../../../../vis_default_editor/public'; import { LineOptions, LineOptionsParams } from './line_options'; -import { seriesParam, vis } from './mocks'; +import { seriesParam } from './mocks'; const LINE_WIDTH = 'lineWidth'; const DRAW_LINES = 'drawLinesBetweenPoints'; @@ -26,7 +26,6 @@ describe('LineOptions component', () => { defaultProps = { chart: { ...seriesParam }, - vis, setChart, }; }); diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx index b101ed1553a24..140f190c77181 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx @@ -11,7 +11,6 @@ import React, { useCallback } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; -import { Vis } from '../../../../../../visualizations/public'; import { NumberInputOption, SelectOption, @@ -20,14 +19,16 @@ import { import { SeriesParam } from '../../../../types'; import { SetChart } from './chart_options'; +import { getInterpolationModes } from '../../../collections'; + +const interpolationModes = getInterpolationModes(); export interface LineOptionsParams { chart: SeriesParam; - vis: Vis; setChart: SetChart; } -function LineOptions({ chart, vis, setChart }: LineOptionsParams) { +function LineOptions({ chart, setChart }: LineOptionsParams) { const setLineWidth = useCallback( (paramName: 'lineWidth', value: number | '') => { setChart(paramName, value === '' ? undefined : value); @@ -57,7 +58,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) { label={i18n.translate('visTypeXy.controls.pointSeries.series.lineModeLabel', { defaultMessage: 'Line mode', })} - options={vis.type.editorConfig.collections.interpolationModes} + options={interpolationModes} paramName="interpolate" value={chart.interpolate} setValue={setChart} diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts index 33e2af174753e..7451f6dea9039 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts @@ -20,12 +20,6 @@ import { AxisType, CategoryAxis, } from '../../../../types'; -import { - getScaleTypes, - getAxisModes, - getPositions, - getInterpolationModes, -} from '../../../collections'; import { ChartType } from '../../../../../common'; const defaultValueAxisId = 'ValueAxis-1'; @@ -85,16 +79,9 @@ const seriesParam: SeriesParam = { valueAxis: defaultValueAxisId, }; -const positions = getPositions(); -const axisModes = getAxisModes(); -const scaleTypes = getScaleTypes(); -const interpolationModes = getInterpolationModes(); - const vis = ({ type: { - editorConfig: { - collections: { scaleTypes, axisModes, positions, interpolationModes }, - }, + editorConfig: {}, }, } as any) as Vis; diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx index 13dab168e586c..3e1a44993235b 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx @@ -14,7 +14,7 @@ import { Position } from '@elastic/charts'; import { ValueAxis, SeriesParam } from '../../../../types'; import { ValueAxesPanel, ValueAxesPanelProps } from './value_axes_panel'; -import { valueAxis, seriesParam, vis } from './mocks'; +import { valueAxis, seriesParam } from './mocks'; describe('ValueAxesPanel component', () => { let setParamByIndex: jest.Mock; @@ -53,7 +53,6 @@ describe('ValueAxesPanel component', () => { defaultProps = { seriesParams: [seriesParamCount, seriesParamAverage], valueAxes: [axisLeft, axisRight], - vis, setParamByIndex, onValueAxisPositionChanged, addValueAxis, diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx index 5f874e0489370..02bdb7b185288 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx @@ -20,8 +20,6 @@ import { import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { Vis } from '../../../../../../visualizations/public'; - import { SeriesParam, ValueAxis } from '../../../../types'; import { ValueAxisOptions } from './value_axis_options'; import { SetParamByIndex } from '.'; @@ -33,7 +31,6 @@ export interface ValueAxesPanelProps { setParamByIndex: SetParamByIndex; seriesParams: SeriesParam[]; valueAxes: ValueAxis[]; - vis: Vis; setMultipleValidity: (paramName: string, isValid: boolean) => void; } @@ -152,7 +149,6 @@ function ValueAxesPanel(props: ValueAxesPanelProps) { onValueAxisPositionChanged={props.onValueAxisPositionChanged} setParamByIndex={props.setParamByIndex} setMultipleValidity={props.setMultipleValidity} - vis={props.vis} /> diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx index b843e7b5ab064..f2d689126166f 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx @@ -16,7 +16,7 @@ import { TextInputOption } from '../../../../../../vis_default_editor/public'; import { ValueAxis, ScaleType } from '../../../../types'; import { LabelOptions } from './label_options'; import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options'; -import { valueAxis, vis } from './mocks'; +import { valueAxis } from './mocks'; const POSITION = 'position'; @@ -37,7 +37,6 @@ describe('ValueAxisOptions component', () => { axis, index: 0, valueAxis, - vis, setParamByIndex, onValueAxisPositionChanged, setMultipleValidity, diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx index d9e0302cbe516..1a38be83b9fc5 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx @@ -10,7 +10,6 @@ import React, { useCallback } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiSpacer, EuiAccordion, EuiHorizontalRule } from '@elastic/eui'; -import { Vis } from '../../../../../../visualizations/public'; import { SelectOption, SwitchOption, @@ -21,6 +20,9 @@ import { ValueAxis } from '../../../../types'; import { LabelOptions, SetAxisLabel } from './label_options'; import { CustomExtentsOptions } from './custom_extents_options'; import { SetParamByIndex } from '.'; +import { getConfigCollections } from '../../../collections'; + +const collections = getConfigCollections(); export type SetScale = ( paramName: T, @@ -33,7 +35,6 @@ export interface ValueAxisOptionsParams { onValueAxisPositionChanged: (index: number, value: ValueAxis['position']) => void; setParamByIndex: SetParamByIndex; valueAxis: ValueAxis; - vis: Vis; setMultipleValidity: (paramName: string, isValid: boolean) => void; } @@ -41,7 +42,6 @@ export function ValueAxisOptions({ axis, index, valueAxis, - vis, onValueAxisPositionChanged, setParamByIndex, setMultipleValidity, @@ -101,7 +101,7 @@ export function ValueAxisOptions({ label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.positionLabel', { defaultMessage: 'Position', })} - options={vis.type.editorConfig.collections.positions} + options={collections.positions} paramName="position" value={axis.position} setValue={onPositionChanged} @@ -112,7 +112,7 @@ export function ValueAxisOptions({ label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.modeLabel', { defaultMessage: 'Mode', })} - options={vis.type.editorConfig.collections.axisModes} + options={collections.axisModes} paramName="mode" value={axis.scale.mode} setValue={setValueAxisScale} @@ -123,7 +123,7 @@ export function ValueAxisOptions({ label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.scaleTypeLabel', { defaultMessage: 'Scale type', })} - options={vis.type.editorConfig.collections.scaleTypes} + options={collections.scaleTypes} paramName="type" value={axis.scale.type} setValue={setValueAxisScale} diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx index ecfbdf5b60528..5398980e268d4 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx @@ -22,11 +22,14 @@ import { ChartType } from '../../../../../common'; import { VisParams } from '../../../../types'; import { ValidationVisOptionsProps } from '../../common'; import { getPalettesService, getTrackUiMetric } from '../../../../services'; +import { getFittingFunctions } from '../../../collections'; + +const fittingFunctions = getFittingFunctions(); export function ElasticChartsOptions(props: ValidationVisOptionsProps) { const trackUiMetric = getTrackUiMetric(); const [palettesRegistry, setPalettesRegistry] = useState(null); - const { stateParams, setValue, vis, aggs } = props; + const { stateParams, setValue, aggs } = props; const hasLineChart = stateParams.seriesParams.some( ({ type, data: { id: paramId } }) => @@ -69,7 +72,7 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps label={i18n.translate('visTypeXy.editors.elasticChartsOptions.missingValuesLabel', { defaultMessage: 'Fill missing values', })} - options={vis.type.editorConfig.collections.fittingFunctions} + options={fittingFunctions} paramName="fittingFunction" value={stateParams.fittingFunction} setValue={(paramName, value) => { diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx index 27e940e62489a..343976651d21e 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx @@ -20,6 +20,9 @@ import { ThresholdPanel } from './threshold_panel'; import { ChartType } from '../../../../../common'; import { ValidationVisOptionsProps } from '../../common'; import { ElasticChartsOptions } from './elastic_charts_options'; +import { getPositions } from '../../../collections'; + +const legendPositions = getPositions(); export function PointSeriesOptions( props: ValidationVisOptionsProps< @@ -54,7 +57,7 @@ export function PointSeriesOptions( - + {vis.data.aggs!.aggs.some( (agg) => agg.schema === 'segment' && agg.type.name === BUCKET_TYPES.DATE_HISTOGRAM diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx index 943280b1373fb..dadbe4dd1fc76 100644 --- a/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx +++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx @@ -19,12 +19,14 @@ import { } from '../../../../../../vis_default_editor/public'; import { ValidationVisOptionsProps } from '../../common'; import { VisParams } from '../../../../types'; +import { getThresholdLineStyles } from '../../../collections'; + +const thresholdLineStyles = getThresholdLineStyles(); function ThresholdPanel({ stateParams, setValue, setMultipleValidity, - vis, }: ValidationVisOptionsProps) { const setThresholdLine = useCallback( ( @@ -94,7 +96,7 @@ function ThresholdPanel({ label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.styleLabel', { defaultMessage: 'Line style', })} - options={vis.type.editorConfig.collections.thresholdLineStyles} + options={thresholdLineStyles} paramName="style" value={stateParams.thresholdLine.style} setValue={setThresholdLine} diff --git a/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts b/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts index b45c30b46c79e..c425eb71117e8 100644 --- a/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts +++ b/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts @@ -1417,128 +1417,6 @@ export const sampleAreaVis = { }, }, editorConfig: { - collections: { - legendPositions: [ - { - text: 'Top', - value: 'top', - }, - { - text: 'Left', - value: 'left', - }, - { - text: 'Right', - value: 'right', - }, - { - text: 'Bottom', - value: 'bottom', - }, - ], - positions: [ - { - text: 'Top', - value: 'top', - }, - { - text: 'Left', - value: 'left', - }, - { - text: 'Right', - value: 'right', - }, - { - text: 'Bottom', - value: 'bottom', - }, - ], - chartTypes: [ - { - text: 'Line', - value: 'line', - }, - { - text: 'Area', - value: 'area', - }, - { - text: 'Bar', - value: 'histogram', - }, - ], - axisModes: [ - { - text: 'Normal', - value: 'normal', - }, - { - text: 'Percentage', - value: 'percentage', - }, - { - text: 'Wiggle', - value: 'wiggle', - }, - { - text: 'Silhouette', - value: 'silhouette', - }, - ], - scaleTypes: [ - { - text: 'Linear', - value: 'linear', - }, - { - text: 'Log', - value: 'log', - }, - { - text: 'Square root', - value: 'square root', - }, - ], - chartModes: [ - { - text: 'Normal', - value: 'normal', - }, - { - text: 'Stacked', - value: 'stacked', - }, - ], - interpolationModes: [ - { - text: 'Straight', - value: 'linear', - }, - { - text: 'Smoothed', - value: 'cardinal', - }, - { - text: 'Stepped', - value: 'step-after', - }, - ], - thresholdLineStyles: [ - { - value: 'full', - text: 'Full', - }, - { - value: 'dashed', - text: 'Dashed', - }, - { - value: 'dot-dashed', - text: 'Dot-dashed', - }, - ], - }, optionTabs: [ { name: 'advanced', diff --git a/src/plugins/vis_type_xy/public/vis_types/area.ts b/src/plugins/vis_type_xy/public/vis_types/area.ts index a118afb12d249..a61c25bbc075a 100644 --- a/src/plugins/vis_type_xy/public/vis_types/area.ts +++ b/src/plugins/vis_type_xy/public/vis_types/area.ts @@ -26,7 +26,6 @@ import { } from '../types'; import { toExpressionAst } from '../to_ast'; import { ChartType } from '../../common'; -import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; export const getAreaVisTypeDefinition = ( @@ -126,7 +125,6 @@ export const getAreaVisTypeDefinition = ( }, }, editorConfig: { - collections: getConfigCollections(), optionTabs: getOptionTabs(showElasticChartsOptions), schemas: [ { diff --git a/src/plugins/vis_type_xy/public/vis_types/histogram.ts b/src/plugins/vis_type_xy/public/vis_types/histogram.ts index 72d34f70b1a13..2c2a83b48802d 100644 --- a/src/plugins/vis_type_xy/public/vis_types/histogram.ts +++ b/src/plugins/vis_type_xy/public/vis_types/histogram.ts @@ -25,7 +25,6 @@ import { } from '../types'; import { toExpressionAst } from '../to_ast'; import { ChartType } from '../../common'; -import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; import { defaultCountLabel, LabelRotation } from '../../../charts/public'; @@ -129,7 +128,6 @@ export const getHistogramVisTypeDefinition = ( }, }, editorConfig: { - collections: getConfigCollections(), optionTabs: getOptionTabs(showElasticChartsOptions), schemas: [ { diff --git a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts index 751803c07aa8d..75c4ddd75d0b3 100644 --- a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts +++ b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts @@ -25,7 +25,6 @@ import { } from '../types'; import { toExpressionAst } from '../to_ast'; import { ChartType } from '../../common'; -import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; import { defaultCountLabel, LabelRotation } from '../../../charts/public'; @@ -128,7 +127,6 @@ export const getHorizontalBarVisTypeDefinition = ( }, }, editorConfig: { - collections: getConfigCollections(), optionTabs: getOptionTabs(showElasticChartsOptions), schemas: [ { diff --git a/src/plugins/vis_type_xy/public/vis_types/line.ts b/src/plugins/vis_type_xy/public/vis_types/line.ts index 75e4ebe09e3f7..87165a20592e5 100644 --- a/src/plugins/vis_type_xy/public/vis_types/line.ts +++ b/src/plugins/vis_type_xy/public/vis_types/line.ts @@ -26,7 +26,6 @@ import { } from '../types'; import { toExpressionAst } from '../to_ast'; import { ChartType } from '../../common'; -import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; export const getLineVisTypeDefinition = ( @@ -126,7 +125,6 @@ export const getLineVisTypeDefinition = ( }, }, editorConfig: { - collections: getConfigCollections(), optionTabs: getOptionTabs(showElasticChartsOptions), schemas: [ { diff --git a/src/plugins/visualizations/public/types.ts b/src/plugins/visualizations/public/types.ts index 8dceee8e0010a..6241f9ee4ae12 100644 --- a/src/plugins/visualizations/public/types.ts +++ b/src/plugins/visualizations/public/types.ts @@ -20,7 +20,6 @@ import { PersistedState } from './persisted_state'; import { VisParams } from '../common'; export { Vis, SerializedVis, VisParams }; - export interface SavedVisState { title: string; type: string; diff --git a/src/plugins/visualize/public/application/components/visualize_listing.tsx b/src/plugins/visualize/public/application/components/visualize_listing.tsx index c13c5d9accef3..c772554344cb2 100644 --- a/src/plugins/visualize/public/application/components/visualize_listing.tsx +++ b/src/plugins/visualize/public/application/components/visualize_listing.tsx @@ -40,6 +40,7 @@ export const VisualizeListing = () => { savedObjectsTagging, uiSettings, visualizeCapabilities, + dashboardCapabilities, kbnUrlStateStorage, }, } = useKibana(); @@ -172,11 +173,12 @@ export const VisualizeListing = () => { return ( <> - {dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables && ( -
- -
- )} + {dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables && + dashboardCapabilities.createNew && ( +
+ +
+ )} diff --git a/src/plugins/visualize/public/application/types.ts b/src/plugins/visualize/public/application/types.ts index d20553ee73e9c..67c3d22d95426 100644 --- a/src/plugins/visualize/public/application/types.ts +++ b/src/plugins/visualize/public/application/types.ts @@ -83,7 +83,8 @@ export interface VisualizeServices extends CoreStart { navigation: NavigationStart; toastNotifications: ToastsStart; share?: SharePluginStart; - visualizeCapabilities: any; + visualizeCapabilities: Record>; + dashboardCapabilities: Record>; visualizations: VisualizationsStart; savedObjectsPublic: SavedObjectsStart; savedVisualizations: VisualizationsStart['savedVisualizationsLoader']; diff --git a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx index 3fd6fd15e3667..9ea42e8b56559 100644 --- a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx +++ b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx @@ -250,7 +250,7 @@ export const getTopNavConfig = ( share.toggleShareContextMenu({ anchorElement, allowEmbed: true, - allowShortUrl: visualizeCapabilities.createShortUrl, + allowShortUrl: Boolean(visualizeCapabilities.createShortUrl), shareableUrl: unhashUrl(window.location.href), objectId: savedVis?.id, objectType: 'visualization', diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts index d93601ccd673e..39074735e2aeb 100644 --- a/src/plugins/visualize/public/plugin.ts +++ b/src/plugins/visualize/public/plugin.ts @@ -172,6 +172,7 @@ export class VisualizePlugin share: pluginsStart.share, toastNotifications: coreStart.notifications.toasts, visualizeCapabilities: coreStart.application.capabilities.visualize, + dashboardCapabilities: coreStart.application.capabilities.dashboard, visualizations: pluginsStart.visualizations, embeddable: pluginsStart.embeddable, stateTransferService: pluginsStart.embeddable.getStateTransfer(), diff --git a/test/accessibility/services/a11y/analyze_with_axe.js b/test/accessibility/services/a11y/analyze_with_axe.js index 301d03ec17fb1..3d1e257235f55 100644 --- a/test/accessibility/services/a11y/analyze_with_axe.js +++ b/test/accessibility/services/a11y/analyze_with_axe.js @@ -30,6 +30,10 @@ export function analyzeWithAxe(context, options, callback) { id: 'aria-roles', selector: '[data-test-subj="comboBoxSearchInput"] *', }, + { + id: 'aria-required-parent', + selector: '[class=*"euiDataGridRowCell"][role="gridcell"] ', + }, ], }); return window.axe.run(context, options); diff --git a/test/api_integration/apis/ui_counters/ui_counters.ts b/test/api_integration/apis/ui_counters/ui_counters.ts index 881fa33f5fbc0..c2286f8ea3dce 100644 --- a/test/api_integration/apis/ui_counters/ui_counters.ts +++ b/test/api_integration/apis/ui_counters/ui_counters.ts @@ -22,7 +22,8 @@ export default function ({ getService }: FtrProviderContext) { count, }); - describe('UI Counters API', () => { + // FLAKY: https://github.com/elastic/kibana/issues/85086 + describe.skip('UI Counters API', () => { const dayDate = moment().format('DDMMYYYY'); it('stores ui counter events in savedObjects', async () => { diff --git a/test/functional/apps/dashboard/embeddable_data_grid.ts b/test/functional/apps/dashboard/embeddable_data_grid.ts index a81f855198843..54fa9f08c5763 100644 --- a/test/functional/apps/dashboard/embeddable_data_grid.ts +++ b/test/functional/apps/dashboard/embeddable_data_grid.ts @@ -36,10 +36,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { describe('saved search filters', function () { it('are added when a cell filter is clicked', async function () { await dashboardAddPanel.addSavedSearch('Rendering-Test:-saved-search'); - await find.clickByCssSelector(`[role="gridcell"]:nth-child(2)`); + await find.clickByCssSelector(`[role="gridcell"]:nth-child(3)`); + // needs a short delay between becoming visible & being clickable + await PageObjects.common.sleep(250); await find.clickByCssSelector(`[data-test-subj="filterOutButton"]`); await PageObjects.header.waitUntilLoadingHasFinished(); - await find.clickByCssSelector(`[role="gridcell"]:nth-child(2)`); + await find.clickByCssSelector(`[role="gridcell"]:nth-child(3)`); + await PageObjects.common.sleep(250); await find.clickByCssSelector(`[data-test-subj="filterForButton"]`); const filterCount = await filterBar.getFilterCount(); expect(filterCount).to.equal(2); diff --git a/test/functional/apps/discover/_data_grid_context.ts b/test/functional/apps/discover/_data_grid_context.ts index 898efff558702..8f817dbea35c3 100644 --- a/test/functional/apps/discover/_data_grid_context.ts +++ b/test/functional/apps/discover/_data_grid_context.ts @@ -27,6 +27,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { describe('discover data grid context tests', () => { before(async () => { + await esArchiver.load('discover'); await esArchiver.loadIfNeeded('logstash_functional'); await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings(); await kibanaServer.uiSettings.update(defaultSettings); diff --git a/test/functional/apps/discover/_data_grid_doc_table.ts b/test/functional/apps/discover/_data_grid_doc_table.ts index 1775b096fecd8..5eeafc4d78f67 100644 --- a/test/functional/apps/discover/_data_grid_doc_table.ts +++ b/test/functional/apps/discover/_data_grid_doc_table.ts @@ -22,8 +22,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }; describe('discover data grid doc table', function describeIndexTests() { - const defaultRowsLimit = 25; - before(async function () { log.debug('load kibana index with default index pattern'); await esArchiver.load('discover'); @@ -38,10 +36,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await kibanaServer.uiSettings.replace({}); }); - it('should show the first 50 rows by default', async function () { + it('should show the first 12 rows by default', async function () { // with the default range the number of hits is ~14000 const rows = await dataGrid.getDocTableRows(); - expect(rows.length).to.be(defaultRowsLimit); + expect(rows.length).to.be(12); }); it('should refresh the table content when changing time window', async function () { diff --git a/test/functional/apps/discover/_data_grid_field_data.ts b/test/functional/apps/discover/_data_grid_field_data.ts index 068ed82a7c603..e8fcb06d06193 100644 --- a/test/functional/apps/discover/_data_grid_field_data.ts +++ b/test/functional/apps/discover/_data_grid_field_data.ts @@ -67,9 +67,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await dataGrid.clickDocSortAsc(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await retry.try(async function tryingForTime() { - const rowData = await dataGrid.getFields(); - expect(rowData[0][0].startsWith(expectedTimeStamp)).to.be.ok(); + await retry.waitFor('first cell contains expected timestamp', async () => { + const cell = await dataGrid.getCellElement(1, 2); + const text = await cell.getVisibleText(); + return text === expectedTimeStamp; }); }); diff --git a/test/functional/apps/discover/_indexpattern_with_unmapped_fields.ts b/test/functional/apps/discover/_indexpattern_with_unmapped_fields.ts index bad7afacc1245..0990b3fa29f70 100644 --- a/test/functional/apps/discover/_indexpattern_with_unmapped_fields.ts +++ b/test/functional/apps/discover/_indexpattern_with_unmapped_fields.ts @@ -22,8 +22,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { before(async () => { await esArchiver.loadIfNeeded('unmapped_fields'); - await kibanaServer.uiSettings.replace({ defaultIndex: 'test-index-unmapped-fields' }); - await kibanaServer.uiSettings.update({ + await kibanaServer.uiSettings.replace({ + defaultIndex: 'test-index-unmapped-fields', 'discover:searchFieldsFromSource': false, }); log.debug('discover'); diff --git a/test/functional/apps/visualize/_data_table.ts b/test/functional/apps/visualize/_data_table.ts index c98126dd01843..0b9cedd0ca94c 100644 --- a/test/functional/apps/visualize/_data_table.ts +++ b/test/functional/apps/visualize/_data_table.ts @@ -267,14 +267,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('should apply correct filter', async () => { - await PageObjects.visChart.filterOnTableCell(1, 3); - await PageObjects.visChart.waitForVisualizationRenderingStabilized(); - const data = await PageObjects.visChart.getTableVisContent(); - expect(data).to.be.eql([ - ['png', '1,373'], - ['gif', '918'], - ['Other', '445'], - ]); + await retry.try(async () => { + await PageObjects.visChart.filterOnTableCell(1, 3); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); + const data = await PageObjects.visChart.getTableVisContent(); + expect(data).to.be.eql([ + ['png', '1,373'], + ['gif', '918'], + ['Other', '445'], + ]); + }); }); }); diff --git a/test/functional/apps/visualize/_data_table_notimeindex_filters.ts b/test/functional/apps/visualize/_data_table_notimeindex_filters.ts index df3af20fca613..df219edc1d2d5 100644 --- a/test/functional/apps/visualize/_data_table_notimeindex_filters.ts +++ b/test/functional/apps/visualize/_data_table_notimeindex_filters.ts @@ -14,6 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const log = getService('log'); const filterBar = getService('filterBar'); const renderable = getService('renderable'); + const retry = getService('retry'); const dashboardAddPanel = getService('dashboardAddPanel'); const PageObjects = getPageObjects([ 'common', @@ -66,13 +67,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.dashboard.clickNewDashboard(); await dashboardAddPanel.addVisualization(vizName1); - // hover and click on cell to filter - await PageObjects.visChart.filterOnTableCell(1, 2); + await retry.try(async () => { + // hover and click on cell to filter + await PageObjects.visChart.filterOnTableCell(1, 2); - await PageObjects.header.waitUntilLoadingHasFinished(); - await renderable.waitForRender(); - const filterCount = await filterBar.getFilterCount(); - expect(filterCount).to.be(1); + await PageObjects.header.waitUntilLoadingHasFinished(); + await renderable.waitForRender(); + const filterCount = await filterBar.getFilterCount(); + expect(filterCount).to.be(1); + }); await filterBar.removeAllFilters(); }); diff --git a/test/functional/apps/visualize/_embedding_chart.ts b/test/functional/apps/visualize/_embedding_chart.ts index 6bf42d5948d4e..a6f0b21f96b35 100644 --- a/test/functional/apps/visualize/_embedding_chart.ts +++ b/test/functional/apps/visualize/_embedding_chart.ts @@ -14,6 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const filterBar = getService('filterBar'); const renderable = getService('renderable'); const embedding = getService('embedding'); + const retry = getService('retry'); const PageObjects = getPageObjects([ 'visualize', 'visEditor', @@ -80,23 +81,25 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('should allow to change timerange from the visualization in embedded mode', async () => { - await PageObjects.visChart.filterOnTableCell(1, 7); - await PageObjects.header.waitUntilLoadingHasFinished(); - await renderable.waitForRender(); + await retry.try(async () => { + await PageObjects.visChart.filterOnTableCell(1, 7); + await PageObjects.header.waitUntilLoadingHasFinished(); + await renderable.waitForRender(); - const data = await PageObjects.visChart.getTableVisContent(); - expect(data).to.be.eql([ - ['03:00', '0B', '1'], - ['03:00', '1.953KB', '1'], - ['03:00', '3.906KB', '1'], - ['03:00', '5.859KB', '2'], - ['03:10', '0B', '1'], - ['03:10', '5.859KB', '1'], - ['03:10', '7.813KB', '1'], - ['03:15', '0B', '1'], - ['03:15', '1.953KB', '1'], - ['03:20', '1.953KB', '1'], - ]); + const data = await PageObjects.visChart.getTableVisContent(); + expect(data).to.be.eql([ + ['03:00', '0B', '1'], + ['03:00', '1.953KB', '1'], + ['03:00', '3.906KB', '1'], + ['03:00', '5.859KB', '2'], + ['03:10', '0B', '1'], + ['03:10', '5.859KB', '1'], + ['03:10', '7.813KB', '1'], + ['03:15', '0B', '1'], + ['03:15', '1.953KB', '1'], + ['03:20', '1.953KB', '1'], + ]); + }); }); }); }); diff --git a/test/functional/fixtures/es_archiver/data/data.json.gz b/test/functional/fixtures/es_archiver/data/data.json.gz deleted file mode 100644 index 629276ccd186e..0000000000000 Binary files a/test/functional/fixtures/es_archiver/data/data.json.gz and /dev/null differ diff --git a/test/functional/fixtures/es_archiver/data/mappings.json b/test/functional/fixtures/es_archiver/data/mappings.json deleted file mode 100644 index 256978162b981..0000000000000 --- a/test/functional/fixtures/es_archiver/data/mappings.json +++ /dev/null @@ -1,450 +0,0 @@ -{ - "type": "index", - "value": { - "aliases": { - ".kibana": { - } - }, - "index": ".kibana_1", - "mappings": { - "_meta": { - "migrationMappingPropertyHashes": { - "application_usage_daily": "43b8830d5d0df85a6823d290885fc9fd", - "application_usage_totals": "3d1b76c39bfb2cc8296b024d73854724", - "application_usage_transactional": "3d1b76c39bfb2cc8296b024d73854724", - "config": "c63748b75f39d0c54de12d12c1ccbc20", - "core-usage-stats": "3d1b76c39bfb2cc8296b024d73854724", - "coreMigrationVersion": "2f4316de49999235636386fe51dc06c1", - "dashboard": "40554caf09725935e2c02e02563a2d07", - "index-pattern": "45915a1ad866812242df474eb0479052", - "kql-telemetry": "d12a98a6f19a2d273696597547e064ee", - "legacy-url-alias": "3d1b76c39bfb2cc8296b024d73854724", - "migrationVersion": "4a1746014a75ade3a714e1db5763276f", - "namespace": "2f4316de49999235636386fe51dc06c1", - "namespaces": "2f4316de49999235636386fe51dc06c1", - "originId": "2f4316de49999235636386fe51dc06c1", - "query": "11aaeb7f5f7fa5bb43f25e18ce26e7d9", - "references": "7997cf5a56cc02bdc9c93361bde732b0", - "sample-data-telemetry": "7d3cfeb915303c9641c59681967ffeb4", - "search": "e5b843b43566421ffa75fb499271dc34", - "search-telemetry": "3d1b76c39bfb2cc8296b024d73854724", - "telemetry": "36a616f7026dfa617d6655df850fe16d", - "timelion-sheet": "9a2a2748877c7a7b582fef201ab1d4cf", - "type": "2f4316de49999235636386fe51dc06c1", - "ui-counter": "0d409297dc5ebe1e3a1da691c6ee32e3", - "ui-metric": "0d409297dc5ebe1e3a1da691c6ee32e3", - "updated_at": "00da57df13e94e9d98437d13ace4bfe0", - "url": "c7f66a0df8b1b52f17c28c4adb111105", - "visualization": "f819cf6636b75c9e76ba733a0c6ef355" - } - }, - "dynamic": "strict", - "properties": { - "application_usage_daily": { - "dynamic": "false", - "properties": { - "timestamp": { - "type": "date" - } - } - }, - "application_usage_totals": { - "dynamic": "false", - "type": "object" - }, - "application_usage_transactional": { - "dynamic": "false", - "type": "object" - }, - "config": { - "dynamic": "false", - "properties": { - "buildNum": { - "type": "keyword" - } - } - }, - "core-usage-stats": { - "dynamic": "false", - "type": "object" - }, - "coreMigrationVersion": { - "type": "keyword" - }, - "dashboard": { - "properties": { - "description": { - "type": "text" - }, - "hits": { - "doc_values": false, - "index": false, - "type": "integer" - }, - "kibanaSavedObjectMeta": { - "properties": { - "searchSourceJSON": { - "index": false, - "type": "text" - } - } - }, - "optionsJSON": { - "index": false, - "type": "text" - }, - "panelsJSON": { - "index": false, - "type": "text" - }, - "refreshInterval": { - "properties": { - "display": { - "doc_values": false, - "index": false, - "type": "keyword" - }, - "pause": { - "doc_values": false, - "index": false, - "type": "boolean" - }, - "section": { - "doc_values": false, - "index": false, - "type": "integer" - }, - "value": { - "doc_values": false, - "index": false, - "type": "integer" - } - } - }, - "timeFrom": { - "doc_values": false, - "index": false, - "type": "keyword" - }, - "timeRestore": { - "doc_values": false, - "index": false, - "type": "boolean" - }, - "timeTo": { - "doc_values": false, - "index": false, - "type": "keyword" - }, - "title": { - "type": "text" - }, - "version": { - "type": "integer" - } - } - }, - "index-pattern": { - "dynamic": "false", - "properties": { - "title": { - "type": "text" - }, - "type": { - "type": "keyword" - } - } - }, - "kql-telemetry": { - "properties": { - "optInCount": { - "type": "long" - }, - "optOutCount": { - "type": "long" - } - } - }, - "legacy-url-alias": { - "dynamic": "false", - "type": "object" - }, - "migrationVersion": { - "dynamic": "true", - "properties": { - "config": { - "fields": { - "keyword": { - "ignore_above": 256, - "type": "keyword" - } - }, - "type": "text" - } - } - }, - "namespace": { - "type": "keyword" - }, - "namespaces": { - "type": "keyword" - }, - "originId": { - "type": "keyword" - }, - "query": { - "properties": { - "description": { - "type": "text" - }, - "filters": { - "enabled": false, - "type": "object" - }, - "query": { - "properties": { - "language": { - "type": "keyword" - }, - "query": { - "index": false, - "type": "keyword" - } - } - }, - "timefilter": { - "enabled": false, - "type": "object" - }, - "title": { - "type": "text" - } - } - }, - "references": { - "properties": { - "id": { - "type": "keyword" - }, - "name": { - "type": "keyword" - }, - "type": { - "type": "keyword" - } - }, - "type": "nested" - }, - "sample-data-telemetry": { - "properties": { - "installCount": { - "type": "long" - }, - "unInstallCount": { - "type": "long" - } - } - }, - "search": { - "properties": { - "columns": { - "doc_values": false, - "index": false, - "type": "keyword" - }, - "description": { - "type": "text" - }, - "grid": { - "enabled": false, - "type": "object" - }, - "hits": { - "doc_values": false, - "index": false, - "type": "integer" - }, - "kibanaSavedObjectMeta": { - "properties": { - "searchSourceJSON": { - "index": false, - "type": "text" - } - } - }, - "pre712": { - "type": "boolean" - }, - "sort": { - "doc_values": false, - "index": false, - "type": "keyword" - }, - "title": { - "type": "text" - }, - "version": { - "type": "integer" - } - } - }, - "search-telemetry": { - "dynamic": "false", - "type": "object" - }, - "telemetry": { - "properties": { - "allowChangingOptInStatus": { - "type": "boolean" - }, - "enabled": { - "type": "boolean" - }, - "lastReported": { - "type": "date" - }, - "lastVersionChecked": { - "type": "keyword" - }, - "reportFailureCount": { - "type": "integer" - }, - "reportFailureVersion": { - "type": "keyword" - }, - "sendUsageFrom": { - "type": "keyword" - }, - "userHasSeenNotice": { - "type": "boolean" - } - } - }, - "timelion-sheet": { - "properties": { - "description": { - "type": "text" - }, - "hits": { - "type": "integer" - }, - "kibanaSavedObjectMeta": { - "properties": { - "searchSourceJSON": { - "type": "text" - } - } - }, - "timelion_chart_height": { - "type": "integer" - }, - "timelion_columns": { - "type": "integer" - }, - "timelion_interval": { - "type": "keyword" - }, - "timelion_other_interval": { - "type": "keyword" - }, - "timelion_rows": { - "type": "integer" - }, - "timelion_sheet": { - "type": "text" - }, - "title": { - "type": "text" - }, - "version": { - "type": "integer" - } - } - }, - "type": { - "type": "keyword" - }, - "ui-counter": { - "properties": { - "count": { - "type": "integer" - } - } - }, - "ui-metric": { - "properties": { - "count": { - "type": "integer" - } - } - }, - "updated_at": { - "type": "date" - }, - "url": { - "properties": { - "accessCount": { - "type": "long" - }, - "accessDate": { - "type": "date" - }, - "createDate": { - "type": "date" - }, - "url": { - "fields": { - "keyword": { - "ignore_above": 2048, - "type": "keyword" - } - }, - "type": "text" - } - } - }, - "visualization": { - "properties": { - "description": { - "type": "text" - }, - "kibanaSavedObjectMeta": { - "properties": { - "searchSourceJSON": { - "index": false, - "type": "text" - } - } - }, - "savedSearchRefName": { - "doc_values": false, - "index": false, - "type": "keyword" - }, - "title": { - "type": "text" - }, - "uiStateJSON": { - "index": false, - "type": "text" - }, - "version": { - "type": "integer" - }, - "visState": { - "index": false, - "type": "text" - } - } - } - } - }, - "settings": { - "index": { - "auto_expand_replicas": "0-1", - "number_of_replicas": "0", - "number_of_shards": "1" - } - } - } -} \ No newline at end of file diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index 87ec9ac27902f..abd5975b95d0a 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -418,7 +418,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr public async filterOnTableCell(columnIndex: number, rowIndex: number) { await retry.try(async () => { const cell = await dataGrid.getCellElement(rowIndex, columnIndex); - await cell.moveMouseTo(); + await cell.focus(); const filterBtn = await testSubjects.findDescendant( 'tbvChartCell__filterForCellValue', cell diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts index 60f75b692ff0e..c0a7e0f82e692 100644 --- a/test/functional/services/data_grid.ts +++ b/test/functional/services/data_grid.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { chunk } from 'lodash'; import { FtrProviderContext } from '../ftr_provider_context'; import { WebElementWrapper } from './lib/web_element_wrapper'; @@ -31,14 +32,11 @@ export function DataGridProvider({ getService, getPageObjects }: FtrProviderCont const columns = $('.euiDataGridHeaderCell__content') .toArray() .map((cell) => $(cell).text()); - const rows = $.findTestSubjects('dataGridRow') + const cells = $.findTestSubjects('dataGridRowCell') .toArray() - .map((row) => - $(row) - .find('.euiDataGridRowCell__truncate') - .toArray() - .map((cell) => $(cell).text()) - ); + .map((cell) => $(cell).text()); + + const rows = chunk(cells, columns.length); return { columns, @@ -56,20 +54,18 @@ export function DataGridProvider({ getService, getPageObjects }: FtrProviderCont cellDataTestSubj: string ): Promise { const $ = await element.parseDomContent(); - return $('[data-test-subj="dataGridRow"]') + const columnNumber = $('.euiDataGridHeaderCell__content').length; + const cells = $.findTestSubjects('dataGridRowCell') .toArray() - .map((row) => - $(row) - .findTestSubjects('dataGridRowCell') - .toArray() - .map((cell) => - $(cell) - .findTestSubject(cellDataTestSubj) - .text() - .replace(/ /g, '') - .trim() - ) + .map((cell) => + $(cell) + .findTestSubject(cellDataTestSubj) + .text() + .replace(/ /g, '') + .trim() ); + + return chunk(cells, columnNumber); } /** @@ -90,62 +86,72 @@ export function DataGridProvider({ getService, getPageObjects }: FtrProviderCont * @param columnIndex column index starting from 1 (1 means 1st column) */ public async getCellElement(rowIndex: number, columnIndex: number) { + const table = await find.byCssSelector('.euiDataGrid'); + const $ = await table.parseDomContent(); + const columnNumber = $('.euiDataGridHeaderCell__content').length; return await find.byCssSelector( - `[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRow"]:nth-of-type(${ - rowIndex + 1 - }) - [data-test-subj="dataGridRowCell"]:nth-of-type(${columnIndex})` + `[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRowCell"]:nth-of-type(${ + columnNumber * (rowIndex - 1) + columnIndex + 1 + })` ); } public async getFields() { - const rows = await find.allByCssSelector('.euiDataGridRow'); - - const result = []; - for (const row of rows) { - const cells = await row.findAllByClassName('euiDataGridRowCell__truncate'); - const cellsText = []; - let cellIdx = 0; - for (const cell of cells) { - if (cellIdx > 0) { - cellsText.push(await cell.getVisibleText()); - } - cellIdx++; + const cells = await find.allByCssSelector('.euiDataGridRowCell'); + + const rows: string[][] = []; + let rowIdx = -1; + for (const cell of cells) { + if (await cell.elementHasClass('euiDataGridRowCell--firstColumn')) { + // first column contains expand icon + rowIdx++; + rows[rowIdx] = []; + } + if (!(await cell.elementHasClass('euiDataGridRowCell--controlColumn'))) { + rows[rowIdx].push(await cell.getVisibleText()); } - result.push(cellsText); } - return result; + return rows; } public async getTable(selector: string = 'docTable') { return await testSubjects.find(selector); } - public async getBodyRows(): Promise { - const table = await this.getTable(); - return await table.findAllByTestSubject('dataGridRow'); + public async getBodyRows(): Promise { + return this.getDocTableRows(); } + /** + * Returns an array of rows (which are array of cells) + */ public async getDocTableRows() { const table = await this.getTable(); - return await table.findAllByTestSubject('dataGridRow'); - } - - public async getAnchorRow(): Promise { - const table = await this.getTable(); - return await table.findByTestSubject('~docTableAnchorRow'); + const cells = await table.findAllByCssSelector('.euiDataGridRowCell'); + + const rows: WebElementWrapper[][] = []; + let rowIdx = -1; + for (const cell of cells) { + if (await cell.elementHasClass('euiDataGridRowCell--firstColumn')) { + rowIdx++; + rows[rowIdx] = []; + } + rows[rowIdx].push(cell); + } + return rows; } - public async getRow(options: SelectOptions): Promise { - return options.isAnchorRow - ? await this.getAnchorRow() - : (await this.getBodyRows())[options.rowIndex]; + /** + * Returns an array of cells for that row + */ + public async getRow(options: SelectOptions): Promise { + return (await this.getBodyRows())[options.rowIndex]; } public async clickRowToggle( options: SelectOptions = { isAnchorRow: false, rowIndex: 0 } ): Promise { const row = await this.getRow(options); - const toggle = await row.findByTestSubject('~docTableExpandToggleColumn'); + const toggle = await row[0]; await toggle.click(); } diff --git a/x-pack/plugins/apm/common/projections.ts b/x-pack/plugins/apm/common/projections.ts deleted file mode 100644 index dab9dfce5e58a..0000000000000 --- a/x-pack/plugins/apm/common/projections.ts +++ /dev/null @@ -1,17 +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. - */ - -export enum Projection { - services = 'services', - transactionGroups = 'transactionGroups', - traces = 'traces', - transactions = 'transactions', - metrics = 'metrics', - errorGroups = 'errorGroups', - serviceNodes = 'serviceNodes', - rumOverview = 'rumOverview', -} diff --git a/x-pack/plugins/apm/common/utils/formatters/datetime.test.ts b/x-pack/plugins/apm/common/utils/formatters/datetime.test.ts index 6aee1e2b9842d..9efb7184f3927 100644 --- a/x-pack/plugins/apm/common/utils/formatters/datetime.test.ts +++ b/x-pack/plugins/apm/common/utils/formatters/datetime.test.ts @@ -170,37 +170,52 @@ describe('date time formatters', () => { it('milliseconds', () => { const start = moment('2019-10-29 08:00:00.001'); const end = moment('2019-10-29 08:00:00.005'); - expect(getDateDifference(start, end, 'milliseconds')).toEqual(4); + expect( + getDateDifference({ start, end, unitOfTime: 'milliseconds' }) + ).toEqual(4); }); it('seconds', () => { const start = moment('2019-10-29 08:00:00'); const end = moment('2019-10-29 08:00:10'); - expect(getDateDifference(start, end, 'seconds')).toEqual(10); + expect(getDateDifference({ start, end, unitOfTime: 'seconds' })).toEqual( + 10 + ); }); it('minutes', () => { const start = moment('2019-10-29 08:00:00'); const end = moment('2019-10-29 08:15:00'); - expect(getDateDifference(start, end, 'minutes')).toEqual(15); + expect(getDateDifference({ start, end, unitOfTime: 'minutes' })).toEqual( + 15 + ); }); it('hours', () => { const start = moment('2019-10-29 08:00:00'); const end = moment('2019-10-29 10:00:00'); - expect(getDateDifference(start, end, 'hours')).toEqual(2); + expect(getDateDifference({ start, end, unitOfTime: 'hours' })).toEqual(2); }); it('days', () => { const start = moment('2019-10-29 08:00:00'); const end = moment('2019-10-30 10:00:00'); - expect(getDateDifference(start, end, 'days')).toEqual(1); + expect(getDateDifference({ start, end, unitOfTime: 'days' })).toEqual(1); }); it('months', () => { const start = moment('2019-10-29 08:00:00'); const end = moment('2019-12-29 08:00:00'); - expect(getDateDifference(start, end, 'months')).toEqual(2); + expect(getDateDifference({ start, end, unitOfTime: 'months' })).toEqual( + 2 + ); }); it('years', () => { const start = moment('2019-10-29 08:00:00'); const end = moment('2020-10-29 08:00:00'); - expect(getDateDifference(start, end, 'years')).toEqual(1); + expect(getDateDifference({ start, end, unitOfTime: 'years' })).toEqual(1); + }); + it('precise days', () => { + const start = moment('2019-10-29 08:00:00'); + const end = moment('2019-10-30 10:00:00'); + expect( + getDateDifference({ start, end, unitOfTime: 'days', precise: true }) + ).toEqual(1.0833333333333333); }); }); }); diff --git a/x-pack/plugins/apm/common/utils/formatters/datetime.ts b/x-pack/plugins/apm/common/utils/formatters/datetime.ts index 624a0b8a664bc..88f70753f47c8 100644 --- a/x-pack/plugins/apm/common/utils/formatters/datetime.ts +++ b/x-pack/plugins/apm/common/utils/formatters/datetime.ts @@ -58,37 +58,43 @@ function getDateFormat(dateUnit: DateUnit) { } } -export const getDateDifference = ( - start: moment.Moment, - end: moment.Moment, - unitOfTime: DateUnit | TimeUnit -) => end.diff(start, unitOfTime); +export const getDateDifference = ({ + start, + end, + unitOfTime, + precise, +}: { + start: moment.Moment; + end: moment.Moment; + unitOfTime: DateUnit | TimeUnit; + precise?: boolean; +}) => end.diff(start, unitOfTime, precise); function getFormatsAccordingToDateDifference( start: moment.Moment, end: moment.Moment ) { - if (getDateDifference(start, end, 'years') >= 5) { + if (getDateDifference({ start, end, unitOfTime: 'years' }) >= 5) { return { dateFormat: getDateFormat('years') }; } - if (getDateDifference(start, end, 'months') >= 5) { + if (getDateDifference({ start, end, unitOfTime: 'months' }) >= 5) { return { dateFormat: getDateFormat('months') }; } const dateFormatWithDays = getDateFormat('days'); - if (getDateDifference(start, end, 'days') > 1) { + if (getDateDifference({ start, end, unitOfTime: 'days' }) > 1) { return { dateFormat: dateFormatWithDays }; } - if (getDateDifference(start, end, 'minutes') >= 1) { + if (getDateDifference({ start, end, unitOfTime: 'minutes' }) >= 1) { return { dateFormat: dateFormatWithDays, timeFormat: getTimeFormat('minutes'), }; } - if (getDateDifference(start, end, 'seconds') >= 10) { + if (getDateDifference({ start, end, unitOfTime: 'seconds' }) >= 10) { return { dateFormat: dateFormatWithDays, timeFormat: getTimeFormat('seconds'), diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx index bb3903727f509..834c2d5c40bce 100644 --- a/x-pack/plugins/apm/public/components/app/Home/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Home/index.tsx @@ -16,7 +16,7 @@ import { useTraceOverviewHref } from '../../shared/Links/apm/TraceOverviewLink'; import { MainTabs } from '../../shared/main_tabs'; import { ServiceMap } from '../ServiceMap'; import { ServiceInventory } from '../service_inventory'; -import { TraceOverview } from '../TraceOverview'; +import { TraceOverview } from '../trace_overview'; interface Tab { key: string; diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx index 0fd85df37bb78..08d95aca24714 100644 --- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx @@ -23,7 +23,7 @@ import { AnomalyDetection } from '../../Settings/anomaly_detection'; import { ApmIndices } from '../../Settings/ApmIndices'; import { CustomizeUI } from '../../Settings/CustomizeUI'; import { TraceLink } from '../../TraceLink'; -import { TransactionDetails } from '../../TransactionDetails'; +import { TransactionDetails } from '../../transaction_details'; import { CreateAgentConfigurationRouteHandler, EditAgentConfigurationRouteHandler, diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx similarity index 95% rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx index 6423d295da469..6bc345ea5bd87 100644 --- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { EuiFlexGrid, EuiFlexItem, EuiBadge } from '@elastic/eui'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; -import { unit, px, truncate } from '../../../../style/variables'; +import { unit, px, truncate } from '../../../../../style/variables'; const BadgeText = styled.div` display: inline-block; diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterTitleButton.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterTitleButton.tsx diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx similarity index 98% rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx index 59ec3b683b4d3..e1debde1117f9 100644 --- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx @@ -21,7 +21,7 @@ import { import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; import { FilterBadgeList } from './FilterBadgeList'; -import { unit, px } from '../../../../style/variables'; +import { unit, px } from '../../../../../style/variables'; import { FilterTitleButton } from './FilterTitleButton'; const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs( diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx similarity index 89% rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx index 0cab58bc5f448..a07997fb74921 100644 --- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx @@ -15,12 +15,10 @@ import { import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; import { Filter } from './Filter'; -import { useLocalUIFilters } from '../../../hooks/useLocalUIFilters'; -import { Projection } from '../../../../common/projections'; -import { LocalUIFilterName } from '../../../../common/ui_filter'; +import { useLocalUIFilters } from '../hooks/useLocalUIFilters'; +import { LocalUIFilterName } from '../../../../../common/ui_filter'; interface Props { - projection: Projection; filterNames: LocalUIFilterName[]; params?: Record; showCount?: boolean; @@ -33,7 +31,6 @@ const ButtonWrapper = styled.div` `; function LocalUIFilters({ - projection, params, filterNames, children, @@ -42,7 +39,6 @@ function LocalUIFilters({ }: Props) { const { filters, setFilterValue, clearValues } = useLocalUIFilters({ filterNames, - projection, params, shouldFetch, }); diff --git a/x-pack/plugins/apm/public/hooks/useLocalUIFilters.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts similarity index 76% rename from x-pack/plugins/apm/public/hooks/useLocalUIFilters.ts rename to x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts index 1e0aa4fd96171..3f366300792ac 100644 --- a/x-pack/plugins/apm/public/hooks/useLocalUIFilters.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts @@ -7,19 +7,21 @@ import { omit } from 'lodash'; import { useHistory } from 'react-router-dom'; -import { Projection } from '../../common/projections'; -import { pickKeys } from '../../common/utils/pick_keys'; +import { LocalUIFilterName } from '../../../../../common/ui_filter'; +import { pickKeys } from '../../../../../common/utils/pick_keys'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { LocalUIFiltersAPIResponse } from '../../server/lib/ui_filters/local_ui_filters'; +import { LocalUIFiltersAPIResponse } from '../../../../../server/lib/ui_filters/local_ui_filters'; import { localUIFilters, // eslint-disable-next-line @kbn/eslint/no-restricted-paths -} from '../../server/lib/ui_filters/local_ui_filters/config'; -import { fromQuery, toQuery } from '../components/shared/Links/url_helpers'; -import { removeUndefinedProps } from '../context/url_params_context/helpers'; -import { useFetcher } from './use_fetcher'; -import { useUrlParams } from '../context/url_params_context/use_url_params'; -import { LocalUIFilterName } from '../../common/ui_filter'; +} from '../../../../../server/lib/ui_filters/local_ui_filters/config'; +import { + fromQuery, + toQuery, +} from '../../../../components/shared/Links/url_helpers'; +import { removeUndefinedProps } from '../../../../context/url_params_context/helpers'; +import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; +import { useFetcher } from '../../../../hooks/use_fetcher'; const getInitialData = ( filterNames: LocalUIFilterName[] @@ -31,12 +33,10 @@ const getInitialData = ( }; export function useLocalUIFilters({ - projection, filterNames, params, shouldFetch, }: { - projection: Projection; filterNames: LocalUIFilterName[]; params?: Record; shouldFetch: boolean; @@ -72,7 +72,7 @@ export function useLocalUIFilters({ (callApmApi) => { if (shouldFetch && urlParams.start && urlParams.end) { return callApmApi({ - endpoint: `GET /api/apm/ui_filters/local_filters/${projection}` as const, + endpoint: `GET /api/apm/ui_filters/local_filters/rumOverview`, params: { query: { uiFilters: JSON.stringify(uiFilters), @@ -87,7 +87,6 @@ export function useLocalUIFilters({ } }, [ - projection, uiFilters, urlParams.start, urlParams.end, diff --git a/x-pack/plugins/apm/public/hooks/useCallApi.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts similarity index 68% rename from x-pack/plugins/apm/public/hooks/useCallApi.ts rename to x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts index a2bb77c6ad6fc..5b448871804eb 100644 --- a/x-pack/plugins/apm/public/hooks/useCallApi.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts @@ -6,9 +6,9 @@ */ import { useMemo } from 'react'; -import { callApi } from '../services/rest/callApi'; -import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context'; -import { FetchOptions } from '../../common/fetch_options'; +import { callApi } from '../../../../services/rest/callApi'; +import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; +import { FetchOptions } from '../../../../../common/fetch_options'; export function useCallApi() { const { http } = useApmPluginContext().core; diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx index 7b0b1d204ac4d..9bdad14eb8a18 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx @@ -5,13 +5,11 @@ * 2.0. */ -import React, { useMemo } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; +import React, { useMemo } from 'react'; import { useTrackPageview } from '../../../../../observability/public'; -import { Projection } from '../../../../common/projections'; +import { LocalUIFilters } from './LocalUIFilters'; import { RumDashboard } from './RumDashboard'; - -import { LocalUIFilters } from '../../shared/LocalUIFilters'; import { URLFilter } from './URLFilter'; export function RumOverview() { @@ -21,7 +19,6 @@ export function RumOverview() { const localUIFiltersConfig = useMemo(() => { const config: React.ComponentProps = { filterNames: ['location', 'device', 'os', 'browser'], - projection: Projection.rumOverview, }; return config; diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/List.test.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/List.test.tsx rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__fixtures__/props.json b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__fixtures__/props.json similarity index 100% rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__fixtures__/props.json rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/__fixtures__/props.json diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap similarity index 100% rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__snapshots__/List.test.tsx.snap rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx similarity index 59% rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx rename to x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx index 58fea5e985fae..29bdf6467e544 100644 --- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx @@ -7,29 +7,26 @@ import { EuiFlexGroup, - EuiFlexItem, EuiPage, EuiPanel, EuiSpacer, EuiTitle, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React, { useMemo } from 'react'; +import React from 'react'; import { useTrackPageview } from '../../../../../observability/public'; -import { Projection } from '../../../../common/projections'; -import { useFetcher } from '../../../hooks/use_fetcher'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { LocalUIFilters } from '../../shared/LocalUIFilters'; +import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher'; +import { useFetcher } from '../../../hooks/use_fetcher'; import { SearchBar } from '../../shared/search_bar'; import { ErrorDistribution } from '../ErrorGroupDetails/Distribution'; import { ErrorGroupList } from './List'; -import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher'; interface ErrorGroupOverviewProps { serviceName: string; } -function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) { +export function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) { const { urlParams, uiFilters } = useUrlParams(); const { start, end, sortField, sortDirection } = urlParams; const { errorDistributionData } = useErrorGroupDistributionFetcher({ @@ -68,18 +65,6 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) { }); useTrackPageview({ app: 'apm', path: 'error_group_overview', delay: 15000 }); - const localUIFiltersConfig = useMemo(() => { - const config: React.ComponentProps = { - filterNames: ['host', 'containerId', 'podName', 'serviceVersion'], - params: { - serviceName, - }, - projection: Projection.errorGroups, - }; - - return config; - }, [serviceName]); - if (!errorDistributionData || !errorGroupListData) { return null; } @@ -88,41 +73,34 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) { <> - - - - - - - - + + + + - + - - -

Errors

- - + + +

Errors

+ + - - - + + ); } - -export { ErrorGroupOverview }; diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx index 1c8a33d1968b1..23f699b63d207 100644 --- a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx +++ b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx @@ -20,9 +20,9 @@ import { useServiceNodeOverviewHref } from '../../shared/Links/apm/ServiceNodeOv import { useServiceOverviewHref } from '../../shared/Links/apm/service_overview_link'; import { useTransactionsOverviewHref } from '../../shared/Links/apm/transaction_overview_link'; import { MainTabs } from '../../shared/main_tabs'; -import { ErrorGroupOverview } from '../ErrorGroupOverview'; +import { ErrorGroupOverview } from '../error_group_overview'; import { ServiceMap } from '../ServiceMap'; -import { ServiceNodeOverview } from '../ServiceNodeOverview'; +import { ServiceNodeOverview } from '../service_node_overview'; import { ServiceMetrics } from '../service_metrics'; import { ServiceOverview } from '../service_overview'; import { TransactionOverview } from '../transaction_overview'; diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx index 4ba96b63c91f4..1cb420a8ac194 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx @@ -13,21 +13,19 @@ import { EuiPanel, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React, { useEffect, useMemo } from 'react'; +import React, { useEffect } from 'react'; import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public'; import { useTrackPageview } from '../../../../../observability/public'; -import { Projection } from '../../../../common/projections'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; -import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; -import { useLocalStorage } from '../../../hooks/useLocalStorage'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { LocalUIFilters } from '../../shared/LocalUIFilters'; +import { useLocalStorage } from '../../../hooks/useLocalStorage'; +import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; +import { useUpgradeAssistantHref } from '../../shared/Links/kibana'; import { SearchBar } from '../../shared/search_bar'; import { NoServicesMessage } from './no_services_message'; import { ServiceList } from './ServiceList'; import { MLCallout } from './ServiceList/MLCallout'; import { useAnomalyDetectionJobsFetcher } from './use_anomaly_detection_jobs_fetcher'; -import { useUpgradeAssistantHref } from '../../shared/Links/kibana'; const initialData = { items: [], @@ -100,16 +98,6 @@ export function ServiceInventory() { useTrackPageview({ app: 'apm', path: 'services_overview' }); useTrackPageview({ app: 'apm', path: 'services_overview', delay: 15000 }); - const localFiltersConfig: React.ComponentProps< - typeof LocalUIFilters - > = useMemo( - () => ({ - filterNames: ['host', 'agentName'], - projection: Projection.services, - }), - [] - ); - const { anomalyDetectionJobsData, anomalyDetectionJobsStatus, @@ -132,33 +120,24 @@ export function ServiceInventory() { <> - - - - - - - {displayMlCallout ? ( - - setUserHasDismissedCallout(true)} + + {displayMlCallout ? ( + + setUserHasDismissedCallout(true)} /> + + ) : null} + + + - - ) : null} - - - - } - /> - - - + } + /> + diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx index 647792bb13046..69b4149625824 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx @@ -20,7 +20,6 @@ import { MockApmPluginContextWrapper, } from '../../../context/apm_plugin/mock_apm_plugin_context'; import { FETCH_STATUS } from '../../../hooks/use_fetcher'; -import * as useLocalUIFilters from '../../../hooks/useLocalUIFilters'; import * as useDynamicIndexPatternHooks from '../../../hooks/use_dynamic_index_pattern'; import { SessionStorageMock } from '../../../services/__mocks__/SessionStorageMock'; import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider'; @@ -76,13 +75,6 @@ describe('ServiceInventory', () => { // @ts-expect-error global.sessionStorage = new SessionStorageMock(); - jest.spyOn(useLocalUIFilters, 'useLocalUIFilters').mockReturnValue({ - filters: [], - setFilterValue: () => null, - clearValues: () => null, - status: FETCH_STATUS.SUCCESS, - }); - jest.spyOn(hook, 'useAnomalyDetectionJobsFetcher').mockReturnValue({ anomalyDetectionJobsStatus: FETCH_STATUS.SUCCESS, anomalyDetectionJobsData: { jobs: [], hasLegacyJobs: false }, diff --git a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx index d1e6cc0d84ac4..44a5adf31d0b6 100644 --- a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx @@ -7,19 +7,17 @@ import { EuiFlexGrid, + EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel, EuiSpacer, - EuiFlexGroup, } from '@elastic/eui'; -import React, { useMemo } from 'react'; +import React from 'react'; +import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; +import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { useServiceMetricChartsFetcher } from '../../../hooks/use_service_metric_charts_fetcher'; import { MetricsChart } from '../../shared/charts/metrics_chart'; -import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; -import { Projection } from '../../../../common/projections'; -import { LocalUIFilters } from '../../shared/LocalUIFilters'; import { SearchBar } from '../../shared/search_bar'; interface ServiceMetricsProps { @@ -37,47 +35,28 @@ export function ServiceMetrics({ }); const { start, end } = urlParams; - const localFiltersConfig: React.ComponentProps< - typeof LocalUIFilters - > = useMemo( - () => ({ - filterNames: ['host', 'containerId', 'podName', 'serviceVersion'], - params: { - serviceName, - }, - projection: Projection.metrics, - showCount: false, - }), - [serviceName] - ); - return ( <> - - - - - - - - {data.charts.map((chart) => ( - - - - - - ))} - - - - + + + + {data.charts.map((chart) => ( + + + + + + ))} + + + diff --git a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx similarity index 78% rename from x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx rename to x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx index 01874c956e8f9..00d184f692e3b 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx @@ -4,30 +4,21 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - -import { - EuiFlexGroup, - EuiFlexItem, - EuiPage, - EuiPanel, - EuiToolTip, -} from '@elastic/eui'; +import { EuiFlexGroup, EuiPage, EuiPanel, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React, { useMemo } from 'react'; +import React from 'react'; import styled from 'styled-components'; import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../common/i18n'; -import { Projection } from '../../../../common/projections'; import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes'; import { asDynamicBytes, asInteger, asPercent, } from '../../../../common/utils/formatters'; -import { useFetcher } from '../../../hooks/use_fetcher'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; +import { useFetcher } from '../../../hooks/use_fetcher'; import { px, truncate, unit } from '../../../style/variables'; import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink'; -import { LocalUIFilters } from '../../shared/LocalUIFilters'; import { ITableColumn, ManagedTable } from '../../shared/ManagedTable'; import { SearchBar } from '../../shared/search_bar'; @@ -47,19 +38,6 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) { const { uiFilters, urlParams } = useUrlParams(); const { start, end } = urlParams; - const localFiltersConfig: React.ComponentProps< - typeof LocalUIFilters - > = useMemo( - () => ({ - filterNames: ['host', 'containerId', 'podName'], - params: { - serviceName, - }, - projection: Projection.serviceNodes, - }), - [serviceName] - ); - const { data: items = [] } = useFetcher( (callApmApi) => { if (!start || !end) { @@ -164,27 +142,22 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) { <> - - - - - - - - - + + + + diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx rename to x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx similarity index 66% rename from x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx rename to x-pack/plugins/apm/public/components/app/trace_overview/index.tsx index 624aee1e92472..d29dad7a7e3de 100644 --- a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx @@ -6,16 +6,14 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel } from '@elastic/eui'; -import React, { useMemo } from 'react'; +import React from 'react'; import { useTrackPageview } from '../../../../../observability/public'; -import { Projection } from '../../../../common/projections'; -import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; +import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; import { APIReturnType } from '../../../services/rest/createCallApmApi'; -import { LocalUIFilters } from '../../shared/LocalUIFilters'; import { SearchBar } from '../../shared/search_bar'; -import { TraceList } from './TraceList'; import { Correlations } from '../Correlations'; +import { TraceList } from './TraceList'; type TracesAPIResponse = APIReturnType<'GET /api/apm/traces'>; const DEFAULT_RESPONSE: TracesAPIResponse = { @@ -48,32 +46,22 @@ export function TraceOverview() { useTrackPageview({ app: 'apm', path: 'traces_overview' }); useTrackPageview({ app: 'apm', path: 'traces_overview', delay: 15000 }); - const localUIFiltersConfig = useMemo(() => { - const config: React.ComponentProps = { - filterNames: ['transactionResult', 'host', 'containerId', 'podName'], - projection: Projection.traces, - }; - - return config; - }, []); - return ( <> - - - - - - - - - - + + + + + + + + + diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/distribution.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/distribution.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/distribution.test.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/Distribution/distribution.test.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.test.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.test.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.test.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/MaybeViewTraceLink.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/MaybeViewTraceLink.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfParent.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/PercentOfParent.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfParent.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/PercentOfParent.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TransactionTabs.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/TransactionTabs.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TransactionTabs.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/TransactionTabs.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx similarity index 59% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/index.tsx index b155672405b9f..d5f5eed311de8 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx @@ -14,26 +14,23 @@ import { EuiSpacer, EuiTitle, } from '@elastic/eui'; -import React, { useMemo } from 'react'; -import { isEmpty, flatten } from 'lodash'; -import { useHistory } from 'react-router-dom'; -import { RouteComponentProps } from 'react-router-dom'; +import { flatten, isEmpty } from 'lodash'; +import React from 'react'; +import { RouteComponentProps, useHistory } from 'react-router-dom'; +import { useTrackPageview } from '../../../../../observability/public'; +import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; +import { useUrlParams } from '../../../context/url_params_context/use_url_params'; +import { FETCH_STATUS } from '../../../hooks/use_fetcher'; import { useTransactionDistributionFetcher } from '../../../hooks/use_transaction_distribution_fetcher'; -import { useWaterfallFetcher } from './use_waterfall_fetcher'; import { ApmHeader } from '../../shared/ApmHeader'; import { TransactionCharts } from '../../shared/charts/transaction_charts'; -import { TransactionDistribution } from './Distribution'; -import { WaterfallWithSummmary } from './WaterfallWithSummmary'; -import { FETCH_STATUS } from '../../../hooks/use_fetcher'; -import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; -import { useTrackPageview } from '../../../../../observability/public'; -import { Projection } from '../../../../common/projections'; -import { fromQuery, toQuery } from '../../shared/Links/url_helpers'; -import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { LocalUIFilters } from '../../shared/LocalUIFilters'; import { HeightRetainer } from '../../shared/HeightRetainer'; -import { Correlations } from '../Correlations'; +import { fromQuery, toQuery } from '../../shared/Links/url_helpers'; import { SearchBar } from '../../shared/search_bar'; +import { Correlations } from '../Correlations'; +import { TransactionDistribution } from './Distribution'; +import { useWaterfallFetcher } from './use_waterfall_fetcher'; +import { WaterfallWithSummmary } from './WaterfallWithSummmary'; interface Sample { traceId: string; @@ -46,7 +43,6 @@ export function TransactionDetails({ location, match, }: TransactionDetailsProps) { - const { serviceName } = match.params; const { urlParams } = useUrlParams(); const history = useHistory(); const { @@ -59,24 +55,11 @@ export function TransactionDetails({ exceedsMax, status: waterfallStatus, } = useWaterfallFetcher(); - const { transactionName, transactionType } = urlParams; + const { transactionName } = urlParams; useTrackPageview({ app: 'apm', path: 'transaction_details' }); useTrackPageview({ app: 'apm', path: 'transaction_details', delay: 15000 }); - const localUIFiltersConfig = useMemo(() => { - const config: React.ComponentProps = { - filterNames: ['transactionResult', 'serviceVersion'], - projection: Projection.transactions, - params: { - transactionName, - transactionType, - serviceName, - }, - }; - return config; - }, [transactionName, transactionType, serviceName]); - const selectedSample = flatten( distributionData.buckets.map((bucket) => bucket.samples) ).find( @@ -116,45 +99,45 @@ export function TransactionDetails({ - - - - - - - - - - - - - - { - if (!isEmpty(bucket.samples)) { - selectSampleFromBucketClick(bucket.samples[0]); - } - }} - /> - - - - - - - - + + + + + + + + + + + + + + + { + if (!isEmpty(bucket.samples)) { + selectSampleFromBucketClick(bucket.samples[0]); + } + }} + /> + + + + + + + diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/use_waterfall_fetcher.ts b/x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/TransactionDetails/use_waterfall_fetcher.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx index 08904da396678..1f8b431d072b7 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx @@ -10,7 +10,6 @@ import { EuiCode, EuiFlexGroup, EuiFlexItem, - EuiHorizontalRule, EuiPage, EuiPanel, EuiSpacer, @@ -19,25 +18,23 @@ import { import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { Location } from 'history'; -import React, { useMemo } from 'react'; +import React from 'react'; import { useLocation } from 'react-router-dom'; import { useTrackPageview } from '../../../../../observability/public'; -import { Projection } from '../../../../common/projections'; import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types'; +import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; import { IUrlParams } from '../../../context/url_params_context/types'; -import { useTransactionListFetcher } from './use_transaction_list'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { TransactionCharts } from '../../shared/charts/transaction_charts'; import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink'; import { fromQuery, toQuery } from '../../shared/Links/url_helpers'; -import { LocalUIFilters } from '../../shared/LocalUIFilters'; -import { TransactionTypeFilter } from '../../shared/LocalUIFilters/TransactionTypeFilter'; import { SearchBar } from '../../shared/search_bar'; +import { TransactionTypeSelect } from '../../shared/transaction_type_select'; import { Correlations } from '../Correlations'; import { TransactionList } from './TransactionList'; import { useRedirect } from './useRedirect'; import { UserExperienceCallout } from './user_experience_callout'; -import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; +import { useTransactionListFetcher } from './use_transaction_list'; function getRedirectLocation({ location, @@ -68,7 +65,7 @@ interface TransactionOverviewProps { export function TransactionOverview({ serviceName }: TransactionOverviewProps) { const location = useLocation(); const { urlParams } = useUrlParams(); - const { transactionType, transactionTypes } = useApmServiceContext(); + const { transactionType } = useApmServiceContext(); // redirect to first transaction type useRedirect(getRedirectLocation({ location, transactionType, urlParams })); @@ -80,27 +77,6 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) { transactionListStatus, } = useTransactionListFetcher(); - const localFiltersConfig: React.ComponentProps< - typeof LocalUIFilters - > = useMemo( - () => ({ - shouldFetch: !!transactionType, - filterNames: [ - 'transactionResult', - 'host', - 'containerId', - 'podName', - 'serviceVersion', - ], - params: { - serviceName, - transactionType, - }, - projection: Projection.transactionGroups, - }), - [serviceName, transactionType] - ); - // TODO: improve urlParams typings. // `serviceName` or `transactionType` will never be undefined here, and this check should not be needed if (!serviceName) { @@ -112,74 +88,92 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) { - - - - - + + + + + + + +

+ {i18n.translate('xpack.apm.transactionOverviewTitle', { + defaultMessage: 'Transactions', + })} +

+ + + + + + - - - - - {transactionType === TRANSACTION_PAGE_LOAD && ( - <> - - - - )} - - - - -

Transactions

- - - {!transactionListData.isAggregationAccurate && ( - -

- - xpack.apm.ui.transactionGroupBucketSize - - ), - }} - /> + + + + + - - {i18n.translate( - 'xpack.apm.transactionCardinalityWarning.docsLink', - { defaultMessage: 'Learn more in the docs' } - )} - -

- - )} + {transactionType === TRANSACTION_PAGE_LOAD && ( + <> + - - - + + )} + + + + +

Transactions

+ + + {!transactionListData.isAggregationAccurate && ( + +

+ + xpack.apm.ui.transactionGroupBucketSize + + ), + }} + /> + + + {i18n.translate( + 'xpack.apm.transactionCardinalityWarning.docsLink', + { defaultMessage: 'Learn more in the docs' } + )} + +

+ + )} + + + diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx index e0b1a4cbd05d5..7d0ada3e31bff 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx @@ -136,7 +136,9 @@ describe('TransactionOverview', () => { expect(getByText(container, 'firstType')).toBeInTheDocument(); expect(getByText(container, 'secondType')).toBeInTheDocument(); - fireEvent.click(getByText(container, 'firstType')); + fireEvent.change(getByText(container, 'firstType').parentElement!, { + target: { value: 'firstType' }, + }); expect(history.push).toHaveBeenCalled(); expect(history.location.search).toEqual( diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx deleted file mode 100644 index 19eefca5ee27e..0000000000000 --- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { - EuiHorizontalRule, - EuiRadioGroup, - EuiSpacer, - EuiTitle, -} from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import React from 'react'; -import { useHistory } from 'react-router-dom'; -import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; -import { fromQuery, toQuery } from '../../Links/url_helpers'; - -interface Props { - transactionTypes: string[]; -} - -function TransactionTypeFilter({ transactionTypes }: Props) { - const history = useHistory(); - const { - urlParams: { transactionType }, - } = useUrlParams(); - - const options = transactionTypes.map((type) => ({ - id: type, - label: type, - })); - - return ( - <> - -

- {i18n.translate('xpack.apm.localFilters.titles.transactionType', { - defaultMessage: 'Transaction type', - })} -

- - - - - { - const newLocation = { - ...history.location, - search: fromQuery({ - ...toQuery(history.location.search), - transactionType: selectedTransactionType, - }), - }; - history.push(newLocation); - }} - /> - - ); -} - -export { TransactionTypeFilter }; diff --git a/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx b/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx index 94fc79dd2164e..1ceccc5203fb2 100644 --- a/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx +++ b/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiToolTip, EuiText } from '@elastic/eui'; import { asDuration } from '../../../../common/utils/formatters'; -import { PercentOfParent } from '../../app/TransactionDetails/WaterfallWithSummmary/PercentOfParent'; +import { PercentOfParent } from '../../app/transaction_details/WaterfallWithSummmary/PercentOfParent'; interface Props { duration: number; diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx index 28a581d09908e..1411a264b065e 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx @@ -8,7 +8,7 @@ import { shallow } from 'enzyme'; import React from 'react'; import { AgentMarker } from './AgentMarker'; -import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; +import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common'; describe('AgentMarker', () => { diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx index f669063f07545..ad8b85ba70c9b 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx @@ -12,7 +12,7 @@ import { asDuration } from '../../../../../../common/utils/formatters'; import { useTheme } from '../../../../../hooks/use_theme'; import { px, units } from '../../../../../style/variables'; import { Legend } from '../../Legend'; -import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; +import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; const NameContainer = styled.div` border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade}; diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx index 29e553235e57b..36634f97a3a45 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx @@ -14,7 +14,7 @@ import { expectTextsInDocument, renderWithTheme, } from '../../../../../utils/testHelpers'; -import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; import { ErrorMarker } from './ErrorMarker'; function Wrapper({ children }: { children?: ReactNode }) { diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx index c38cc07955996..393281b2bf848 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx @@ -16,7 +16,7 @@ import { } from '../../../../../../common/elasticsearch_fieldnames'; import { useUrlParams } from '../../../../../context/url_params_context/use_url_params'; import { px, unit, units } from '../../../../../style/variables'; -import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; import { ErrorDetailLink } from '../../../Links/apm/ErrorDetailLink'; import { Legend, Shape } from '../../Legend'; diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx index 16ded0b2402c4..f156d82f05a51 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx @@ -8,8 +8,8 @@ import { shallow } from 'enzyme'; import React from 'react'; import { Marker } from './'; -import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; -import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; +import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; describe('Marker', () => { it('renders agent marker', () => { diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx index 14688fe7e0c61..b426a10a7562d 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx @@ -10,8 +10,8 @@ import styled from 'styled-components'; import { px } from '../../../../../style/variables'; import { AgentMarker } from './AgentMarker'; import { ErrorMarker } from './ErrorMarker'; -import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; -import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; +import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; interface Props { mark: ErrorMark | AgentMark; diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx index 218bdde37abd0..428da80fb808a 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { VerticalGridLines, XYPlot } from 'react-vis'; import { useTheme } from '../../../../hooks/use_theme'; -import { Mark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks'; +import { Mark } from '../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks'; import { PlotValues } from './plotUtils'; interface VerticalLinesProps { diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx index 84bdd7998cfad..650faa195271c 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx @@ -11,8 +11,8 @@ import { makeWidthFlexible } from 'react-vis'; import { getPlotValues } from './plotUtils'; import { TimelineAxis } from './TimelineAxis'; import { VerticalLines } from './VerticalLines'; -import { ErrorMark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; -import { AgentMark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; +import { ErrorMark } from '../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { AgentMark } from '../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; export type Mark = AgentMark | ErrorMark; diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx index 296ec3c2d32e9..34ba1d86264c1 100644 --- a/x-pack/plugins/apm/public/components/shared/search_bar.tsx +++ b/x-pack/plugins/apm/public/components/shared/search_bar.tsx @@ -16,7 +16,7 @@ import { useBreakPoints } from '../../hooks/use_break_points'; const SearchBarFlexGroup = styled(EuiFlexGroup)` margin: ${({ theme }) => - `${theme.eui.euiSizeM} ${theme.eui.euiSizeM} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeM}`}; + `${theme.eui.euiSizeS} ${theme.eui.euiSizeS} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeS}`}; `; interface Props { diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx index 52d971a551144..4ace78f74ee79 100644 --- a/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx @@ -17,6 +17,7 @@ import { } from '../../../utils/testHelpers'; import { TimeComparison } from './'; import * as urlHelpers from '../../shared/Links/url_helpers'; +import moment from 'moment'; function getWrapper(params?: IUrlParams) { return ({ children }: { children?: ReactNode }) => { @@ -31,6 +32,10 @@ function getWrapper(params?: IUrlParams) { } describe('TimeComparison', () => { + beforeAll(() => { + moment.tz.setDefault('Europe/Amsterdam'); + }); + afterAll(() => moment.tz.setDefault('')); const spy = jest.spyOn(urlHelpers, 'replace'); beforeEach(() => { jest.resetAllMocks(); @@ -40,6 +45,7 @@ describe('TimeComparison', () => { const Wrapper = getWrapper({ start: '2021-01-28T14:45:00.000Z', end: '2021-01-28T15:00:00.000Z', + rangeTo: 'now', }); render(, { wrapper: Wrapper, @@ -57,6 +63,7 @@ describe('TimeComparison', () => { end: '2021-01-28T15:00:00.000Z', comparisonEnabled: true, comparisonType: 'yesterday', + rangeTo: 'now', }); const component = render(, { wrapper: Wrapper, @@ -67,13 +74,64 @@ describe('TimeComparison', () => { .selectedIndex ).toEqual(0); }); + + it('enables yesterday option when date difference is equal to 24 hours', () => { + const Wrapper = getWrapper({ + start: '2021-01-28T10:00:00.000Z', + end: '2021-01-29T10:00:00.000Z', + comparisonEnabled: true, + comparisonType: 'yesterday', + rangeTo: 'now', + }); + const component = render(, { + wrapper: Wrapper, + }); + expectTextsInDocument(component, ['Yesterday', 'A week ago']); + expect( + (component.getByTestId('comparisonSelect') as HTMLSelectElement) + .selectedIndex + ).toEqual(0); + }); + + it('selects previous period when rangeTo is different than now', () => { + const Wrapper = getWrapper({ + start: '2021-01-28T10:00:00.000Z', + end: '2021-01-29T10:00:00.000Z', + comparisonEnabled: true, + comparisonType: 'previousPeriod', + rangeTo: 'now-15m', + }); + const component = render(, { + wrapper: Wrapper, + }); + expectTextsInDocument(component, ['28/01 11:00 - 29/01 11:00']); + expect( + (component.getByTestId('comparisonSelect') as HTMLSelectElement) + .selectedIndex + ).toEqual(0); + }); }); describe('Time range is between 24 hours - 1 week', () => { + it("doesn't show yesterday option when date difference is greater than 24 hours", () => { + const Wrapper = getWrapper({ + start: '2021-01-28T10:00:00.000Z', + end: '2021-01-29T11:00:00.000Z', + comparisonEnabled: true, + comparisonType: 'week', + rangeTo: 'now', + }); + const component = render(, { + wrapper: Wrapper, + }); + expectTextsNotInDocument(component, ['Yesterday']); + expectTextsInDocument(component, ['A week ago']); + }); it('sets default values', () => { const Wrapper = getWrapper({ start: '2021-01-26T15:00:00.000Z', end: '2021-01-28T15:00:00.000Z', + rangeTo: 'now', }); render(, { wrapper: Wrapper, @@ -91,6 +149,7 @@ describe('TimeComparison', () => { end: '2021-01-28T15:00:00.000Z', comparisonEnabled: true, comparisonType: 'week', + rangeTo: 'now', }); const component = render(, { wrapper: Wrapper, @@ -102,6 +161,24 @@ describe('TimeComparison', () => { .selectedIndex ).toEqual(0); }); + + it('selects previous period when rangeTo is different than now', () => { + const Wrapper = getWrapper({ + start: '2021-01-26T15:00:00.000Z', + end: '2021-01-28T15:00:00.000Z', + comparisonEnabled: true, + comparisonType: 'previousPeriod', + rangeTo: '2021-01-28T15:00:00.000Z', + }); + const component = render(, { + wrapper: Wrapper, + }); + expectTextsInDocument(component, ['26/01 16:00 - 28/01 16:00']); + expect( + (component.getByTestId('comparisonSelect') as HTMLSelectElement) + .selectedIndex + ).toEqual(0); + }); }); describe('Time range is greater than 7 days', () => { @@ -111,12 +188,13 @@ describe('TimeComparison', () => { end: '2021-01-28T15:00:00.000Z', comparisonEnabled: true, comparisonType: 'previousPeriod', + rangeTo: 'now', }); const component = render(, { wrapper: Wrapper, }); expect(spy).not.toHaveBeenCalled(); - expectTextsInDocument(component, ['20/01 - 28/01']); + expectTextsInDocument(component, ['20/01 16:00 - 28/01 16:00']); expect( (component.getByTestId('comparisonSelect') as HTMLSelectElement) .selectedIndex @@ -129,12 +207,13 @@ describe('TimeComparison', () => { end: '2021-01-28T15:00:00.000Z', comparisonEnabled: true, comparisonType: 'previousPeriod', + rangeTo: 'now', }); const component = render(, { wrapper: Wrapper, }); expect(spy).not.toHaveBeenCalled(); - expectTextsInDocument(component, ['20/12/20 - 28/01/21']); + expectTextsInDocument(component, ['20/12/20 16:00 - 28/01/21 16:00']); expect( (component.getByTestId('comparisonSelect') as HTMLSelectElement) .selectedIndex diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx index bb50ca1a45e8c..02064ea786fb0 100644 --- a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx @@ -33,14 +33,21 @@ function formatPreviousPeriodDates({ momentEnd: moment.Moment; }) { const isDifferentYears = momentStart.get('year') !== momentEnd.get('year'); - const dateFormat = isDifferentYears ? 'DD/MM/YY' : 'DD/MM'; + const dateFormat = isDifferentYears ? 'DD/MM/YY HH:mm' : 'DD/MM HH:mm'; return `${momentStart.format(dateFormat)} - ${momentEnd.format(dateFormat)}`; } -function getSelectOptions({ start, end }: { start?: string; end?: string }) { +function getSelectOptions({ + start, + end, + rangeTo, +}: { + start?: string; + end?: string; + rangeTo?: string; +}) { const momentStart = moment(start); const momentEnd = moment(end); - const dateDiff = getDateDifference(momentStart, momentEnd, 'days'); const yesterdayOption = { value: 'yesterday', @@ -56,22 +63,32 @@ function getSelectOptions({ start, end }: { start?: string; end?: string }) { }), }; + const dateDiff = getDateDifference({ + start: momentStart, + end: momentEnd, + unitOfTime: 'days', + precise: true, + }); + const isRangeToNow = rangeTo === 'now'; + + if (isRangeToNow) { + // Less than or equals to one day + if (dateDiff <= 1) { + return [yesterdayOption, aWeekAgoOption]; + } + + // Less than or equals to one week + if (dateDiff <= 7) { + return [aWeekAgoOption]; + } + } + const prevPeriodOption = { value: 'previousPeriod', text: formatPreviousPeriodDates({ momentStart, momentEnd }), }; - // Less than one day - if (dateDiff < 1) { - return [yesterdayOption, aWeekAgoOption]; - } - - // Less than one week - if (dateDiff <= 7) { - return [aWeekAgoOption]; - } - - // above one week + // above one week or when rangeTo is not "now" return [prevPeriodOption]; } @@ -79,10 +96,10 @@ export function TimeComparison() { const history = useHistory(); const { isMedium, isLarge } = useBreakPoints(); const { - urlParams: { start, end, comparisonEnabled, comparisonType }, + urlParams: { start, end, comparisonEnabled, comparisonType, rangeTo }, } = useUrlParams(); - const selectOptions = getSelectOptions({ start, end }); + const selectOptions = getSelectOptions({ start, end, rangeTo }); // Sets default values if (comparisonEnabled === undefined || comparisonType === undefined) { @@ -113,7 +130,7 @@ export function TimeComparison() { 0} + checked={comparisonEnabled} onChange={() => { urlHelpers.push(history, { query: { diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx new file mode 100644 index 0000000000000..772b42ed13577 --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx @@ -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 { EuiSelect } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React, { FormEvent, useCallback } from 'react'; +import { useHistory } from 'react-router-dom'; +import styled from 'styled-components'; +import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context'; +import { useUrlParams } from '../../context/url_params_context/use_url_params'; +import * as urlHelpers from './Links/url_helpers'; + +// The default transaction type (for non-RUM services) is "request". Set the +// min-width on here to the width when "request" is loaded so it doesn't start +// out collapsed and change its width when the list of transaction types is loaded. +const EuiSelectWithWidth = styled(EuiSelect)` + min-width: 157px; +`; + +export function TransactionTypeSelect() { + const { transactionTypes } = useApmServiceContext(); + const history = useHistory(); + const { + urlParams: { transactionType }, + } = useUrlParams(); + + const handleChange = useCallback( + (event: FormEvent) => { + const selectedTransactionType = event.currentTarget.value; + urlHelpers.push(history, { + query: { transactionType: selectedTransactionType }, + }); + }, + [history] + ); + + const options = transactionTypes.map((t) => ({ text: t, value: t })); + + return ( + <> + + + ); +} 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 610442d4ff614..5d580fc0e253a 100644 --- a/x-pack/plugins/apm/server/routes/create_apm_api.ts +++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts @@ -66,15 +66,8 @@ import { transactionThroughputChatsRoute, } from './transactions'; import { - errorGroupsLocalFiltersRoute, - metricsLocalFiltersRoute, - servicesLocalFiltersRoute, - tracesLocalFiltersRoute, - transactionGroupsLocalFiltersRoute, - transactionsLocalFiltersRoute, - serviceNodesLocalFiltersRoute, - uiFiltersEnvironmentsRoute, rumOverviewLocalFiltersRoute, + uiFiltersEnvironmentsRoute, } from './ui_filters'; import { serviceMapRoute, serviceMapServiceNodeRoute } from './service_map'; import { @@ -176,13 +169,6 @@ const createApmApi = () => { .add(transactionThroughputChatsRoute) // UI filters - .add(errorGroupsLocalFiltersRoute) - .add(metricsLocalFiltersRoute) - .add(servicesLocalFiltersRoute) - .add(tracesLocalFiltersRoute) - .add(transactionGroupsLocalFiltersRoute) - .add(transactionsLocalFiltersRoute) - .add(serviceNodesLocalFiltersRoute) .add(uiFiltersEnvironmentsRoute) // Service map diff --git a/x-pack/plugins/apm/server/routes/ui_filters.ts b/x-pack/plugins/apm/server/routes/ui_filters.ts index 9cedbf16e161b..b14a47e302caa 100644 --- a/x-pack/plugins/apm/server/routes/ui_filters.ts +++ b/x-pack/plugins/apm/server/routes/ui_filters.ts @@ -7,29 +7,23 @@ import * as t from 'io-ts'; import { omit } from 'lodash'; +import { jsonRt } from '../../common/runtime_types/json_rt'; +import { LocalUIFilterName } from '../../common/ui_filter'; +import { getSearchAggregatedTransactions } from '../lib/helpers/aggregated_transactions'; +import { getEsFilter } from '../lib/helpers/convert_ui_filters/get_es_filter'; import { - setupRequest, Setup, + setupRequest, SetupTimeRange, } from '../lib/helpers/setup_request'; import { getEnvironments } from '../lib/ui_filters/get_environments'; -import { Projection } from '../projections/typings'; -import { localUIFilterNames } from '../lib/ui_filters/local_ui_filters/config'; -import { getEsFilter } from '../lib/helpers/convert_ui_filters/get_es_filter'; import { getLocalUIFilters } from '../lib/ui_filters/local_ui_filters'; -import { getServicesProjection } from '../projections/services'; -import { getTransactionGroupsProjection } from '../projections/transaction_groups'; -import { getMetricsProjection } from '../projections/metrics'; -import { getErrorGroupsProjection } from '../projections/errors'; -import { getTransactionsProjection } from '../projections/transactions'; -import { createRoute } from './create_route'; -import { uiFiltersRt, rangeRt } from './default_api_types'; -import { jsonRt } from '../../common/runtime_types/json_rt'; -import { getServiceNodesProjection } from '../projections/service_nodes'; +import { localUIFilterNames } from '../lib/ui_filters/local_ui_filters/config'; import { getRumPageLoadTransactionsProjection } from '../projections/rum_page_load_transactions'; -import { getSearchAggregatedTransactions } from '../lib/helpers/aggregated_transactions'; +import { Projection } from '../projections/typings'; +import { createRoute } from './create_route'; +import { rangeRt, uiFiltersRt } from './default_api_types'; import { APMRequestHandlerContext } from './typings'; -import { LocalUIFilterName } from '../../common/ui_filter'; export const uiFiltersEnvironmentsRoute = createRoute({ endpoint: 'GET /api/apm/ui_filters/environments', @@ -122,136 +116,6 @@ function createLocalFiltersRoute< }); } -export const servicesLocalFiltersRoute = createLocalFiltersRoute({ - endpoint: `GET /api/apm/ui_filters/local_filters/services`, - getProjection: async ({ context, setup }) => { - const searchAggregatedTransactions = await getSearchAggregatedTransactions( - setup - ); - - return getServicesProjection({ setup, searchAggregatedTransactions }); - }, - queryRt: t.type({}), -}); - -export const transactionGroupsLocalFiltersRoute = createLocalFiltersRoute({ - endpoint: 'GET /api/apm/ui_filters/local_filters/transactionGroups', - getProjection: async ({ context, setup, query }) => { - const { transactionType, serviceName, transactionName } = query; - - const searchAggregatedTransactions = await getSearchAggregatedTransactions( - setup - ); - - return getTransactionGroupsProjection({ - setup, - options: { - type: 'top_transactions', - transactionType, - serviceName, - transactionName, - searchAggregatedTransactions, - }, - }); - }, - queryRt: t.intersection([ - t.type({ - serviceName: t.string, - transactionType: t.string, - }), - t.partial({ - transactionName: t.string, - }), - ]), -}); - -export const tracesLocalFiltersRoute = createLocalFiltersRoute({ - endpoint: 'GET /api/apm/ui_filters/local_filters/traces', - getProjection: async ({ setup, context }) => { - const searchAggregatedTransactions = await getSearchAggregatedTransactions( - setup - ); - - return getTransactionGroupsProjection({ - setup, - options: { type: 'top_traces', searchAggregatedTransactions }, - }); - }, - queryRt: t.type({}), -}); - -export const transactionsLocalFiltersRoute = createLocalFiltersRoute({ - endpoint: 'GET /api/apm/ui_filters/local_filters/transactions', - getProjection: async ({ context, setup, query }) => { - const { transactionType, serviceName, transactionName } = query; - - const searchAggregatedTransactions = await getSearchAggregatedTransactions( - setup - ); - - return getTransactionsProjection({ - setup, - transactionType, - serviceName, - transactionName, - searchAggregatedTransactions, - }); - }, - queryRt: t.type({ - transactionType: t.string, - transactionName: t.string, - serviceName: t.string, - }), -}); - -export const metricsLocalFiltersRoute = createLocalFiltersRoute({ - endpoint: 'GET /api/apm/ui_filters/local_filters/metrics', - getProjection: ({ setup, query }) => { - const { serviceName, serviceNodeName } = query; - return getMetricsProjection({ - setup, - serviceName, - serviceNodeName, - }); - }, - queryRt: t.intersection([ - t.type({ - serviceName: t.string, - }), - t.partial({ - serviceNodeName: t.string, - }), - ]), -}); - -export const errorGroupsLocalFiltersRoute = createLocalFiltersRoute({ - endpoint: 'GET /api/apm/ui_filters/local_filters/errorGroups', - getProjection: ({ setup, query }) => { - const { serviceName } = query; - return getErrorGroupsProjection({ - setup, - serviceName, - }); - }, - queryRt: t.type({ - serviceName: t.string, - }), -}); - -export const serviceNodesLocalFiltersRoute = createLocalFiltersRoute({ - endpoint: 'GET /api/apm/ui_filters/local_filters/serviceNodes', - getProjection: ({ setup, query }) => { - const { serviceName } = query; - return getServiceNodesProjection({ - setup, - serviceName, - }); - }, - queryRt: t.type({ - serviceName: t.string, - }), -}); - export const rumOverviewLocalFiltersRoute = createLocalFiltersRoute({ endpoint: 'GET /api/apm/ui_filters/local_filters/rumOverview', getProjection: async ({ setup }) => { diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/cancel_button.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/delete_button.tsx similarity index 70% rename from x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/cancel_button.tsx rename to x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/delete_button.tsx index 5edbc7b08985c..d505752ec3fad 100644 --- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/cancel_button.tsx +++ b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/delete_button.tsx @@ -13,31 +13,31 @@ import { SearchSessionsMgmtAPI } from '../../lib/api'; import { TableText } from '../'; import { OnActionComplete } from './types'; -interface CancelButtonProps { +interface DeleteButtonProps { id: string; name: string; api: SearchSessionsMgmtAPI; onActionComplete: OnActionComplete; } -const CancelConfirm = ({ - onConfirmDismiss, +const DeleteConfirm = ({ + onConfirmCancel, ...props -}: CancelButtonProps & { onConfirmDismiss: () => void }) => { +}: DeleteButtonProps & { onConfirmCancel: () => void }) => { const { id, name, api, onActionComplete } = props; const [isLoading, setIsLoading] = useState(false); const title = i18n.translate('xpack.data.mgmt.searchSessions.cancelModal.title', { - defaultMessage: 'Cancel search session', + defaultMessage: 'Delete search session', }); - const confirm = i18n.translate('xpack.data.mgmt.searchSessions.cancelModal.cancelButton', { - defaultMessage: 'Cancel', + const confirm = i18n.translate('xpack.data.mgmt.searchSessions.cancelModal.deleteButton', { + defaultMessage: 'Delete', }); - const cancel = i18n.translate('xpack.data.mgmt.searchSessions.cancelModal.dontCancelButton', { - defaultMessage: 'Dismiss', + const cancel = i18n.translate('xpack.data.mgmt.searchSessions.cancelModal.cancelButton', { + defaultMessage: 'Cancel', }); const message = i18n.translate('xpack.data.mgmt.searchSessions.cancelModal.message', { - defaultMessage: `Canceling the search session \'{name}\' will expire any cached results, so that quick restore will no longer be available. You will still be able to re-run it, using the reload action.`, + defaultMessage: `Deleting the search session \'{name}\' deletes all cached results.`, values: { name, }, @@ -47,7 +47,7 @@ const CancelConfirm = ({ { setIsLoading(true); await api.sendCancel(id); @@ -65,14 +65,14 @@ const CancelConfirm = ({ ); }; -export const CancelButton = (props: CancelButtonProps) => { +export const DeleteButton = (props: DeleteButtonProps) => { const [showConfirm, setShowConfirm] = useState(false); const onClick = () => { setShowConfirm(true); }; - const onConfirmDismiss = () => { + const onConfirmCancel = () => { setShowConfirm(false); }; @@ -80,11 +80,11 @@ export const CancelButton = (props: CancelButtonProps) => { <> - {showConfirm ? : null} + {showConfirm ? : null} ); }; diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/get_action.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/get_action.tsx index bc849abf125c1..edc5037f1dbec 100644 --- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/get_action.tsx +++ b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/get_action.tsx @@ -10,30 +10,22 @@ import { IClickActionDescriptor } from '../'; import extendSessionIcon from '../../icons/extend_session.svg'; import { SearchSessionsMgmtAPI } from '../../lib/api'; import { UISession } from '../../types'; -import { CancelButton } from './cancel_button'; +import { DeleteButton } from './delete_button'; import { ExtendButton } from './extend_button'; -import { ReloadButton } from './reload_button'; import { ACTION, OnActionComplete } from './types'; export const getAction = ( api: SearchSessionsMgmtAPI, actionType: string, - { id, name, expires, reloadUrl }: UISession, + { id, name, expires }: UISession, onActionComplete: OnActionComplete ): IClickActionDescriptor | null => { switch (actionType) { - case ACTION.CANCEL: + case ACTION.DELETE: return { iconType: 'crossInACircleFilled', textColor: 'default', - label: , - }; - - case ACTION.RELOAD: - return { - iconType: 'refresh', - textColor: 'default', - label: , + label: , }; case ACTION.EXTEND: diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/popover_actions.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/popover_actions.tsx index e47a9a5944b24..fe71b5125dfbb 100644 --- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/popover_actions.tsx +++ b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/popover_actions.tsx @@ -90,7 +90,7 @@ export const PopoverActionsMenu = ({ api, onActionComplete, session }: PopoverAc // add a line above the delete action (when there are multiple) // NOTE: Delete action MUST be the final action[] item - if (actions.length > 1 && actionType === ACTION.CANCEL) { + if (actions.length > 1 && actionType === ACTION.DELETE) { itemSet.push({ isSeparator: true, key: 'separadorable' }); } diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/reload_button.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/reload_button.tsx deleted file mode 100644 index 70ca279c2450d..0000000000000 --- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/reload_button.tsx +++ /dev/null @@ -1,33 +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 { FormattedMessage } from '@kbn/i18n/react'; -import React from 'react'; -import { TableText } from '../'; -import { SearchSessionsMgmtAPI } from '../../lib/api'; - -interface ReloadButtonProps { - api: SearchSessionsMgmtAPI; - reloadUrl: string; -} - -export const ReloadButton = (props: ReloadButtonProps) => { - function onClick() { - props.api.reloadSearchSession(props.reloadUrl); - } - - return ( - <> - - - - - ); -}; diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/types.ts b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/types.ts index 97e67909baea2..5f82f16adcbb6 100644 --- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/types.ts +++ b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/types.ts @@ -9,6 +9,5 @@ export type OnActionComplete = () => void; export enum ACTION { EXTEND = 'extend', - CANCEL = 'cancel', - RELOAD = 'reload', + DELETE = 'delete', } diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.test.ts b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.test.ts index 2ec9d588d7fd7..86acbcdb53001 100644 --- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.test.ts +++ b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.test.ts @@ -61,9 +61,8 @@ describe('Search Sessions Management API', () => { Array [ Object { "actions": Array [ - "reload", "extend", - "cancel", + "delete", ], "appId": "pizza", "created": undefined, @@ -146,7 +145,7 @@ describe('Search Sessions Management API', () => { await api.sendCancel('abc-123-cool-session-ID'); expect(mockCoreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ - title: 'The search session was canceled and expired.', + title: 'The search session was deleted.', }); }); @@ -162,37 +161,11 @@ describe('Search Sessions Management API', () => { expect(mockCoreStart.notifications.toasts.addError).toHaveBeenCalledWith( new Error('implementation is so bad'), - { title: 'Failed to cancel the search session!' } + { title: 'Failed to delete the search session!' } ); }); }); - describe('reload', () => { - beforeEach(() => { - sessionsClient.find = jest.fn().mockImplementation(async () => { - return { - saved_objects: [ - { - id: 'hello-pizza-123', - attributes: { name: 'Veggie', appId: 'pizza', status: SearchSessionStatus.COMPLETE }, - }, - ], - } as SavedObjectsFindResponse; - }); - }); - - test('send cancel calls the cancel endpoint with a session ID', async () => { - const api = new SearchSessionsMgmtAPI(sessionsClient, mockConfig, { - urls: mockUrls, - notifications: mockCoreStart.notifications, - application: mockCoreStart.application, - }); - await api.reloadSearchSession('www.myurl.com'); - - expect(mockCoreStart.application.navigateToUrl).toHaveBeenCalledWith('www.myurl.com'); - }); - }); - describe('extend', () => { beforeEach(() => { sessionsClient.find = jest.fn().mockImplementation(async () => { diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.ts b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.ts index 1b024dae1bfca..264556f91cc37 100644 --- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.ts +++ b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.ts @@ -21,10 +21,9 @@ type UrlGeneratorsStart = SharePluginStart['urlGenerators']; function getActions(status: SearchSessionStatus) { const actions: ACTION[] = []; - actions.push(ACTION.RELOAD); if (status === SearchSessionStatus.IN_PROGRESS || status === SearchSessionStatus.COMPLETE) { actions.push(ACTION.EXTEND); - actions.push(ACTION.CANCEL); + actions.push(ACTION.DELETE); } return actions; } @@ -162,8 +161,8 @@ export class SearchSessionsMgmtAPI { await this.sessionsClient.delete(id); this.deps.notifications.toasts.addSuccess({ - title: i18n.translate('xpack.data.mgmt.searchSessions.api.canceled', { - defaultMessage: 'The search session was canceled and expired.', + title: i18n.translate('xpack.data.mgmt.searchSessions.api.deleted', { + defaultMessage: 'The search session was deleted.', }), }); } catch (err) { @@ -171,8 +170,8 @@ export class SearchSessionsMgmtAPI { console.error(err); this.deps.notifications.toasts.addError(err, { - title: i18n.translate('xpack.data.mgmt.searchSessions.api.cancelError', { - defaultMessage: 'Failed to cancel the search session!', + title: i18n.translate('xpack.data.mgmt.searchSessions.api.deletedError', { + defaultMessage: 'Failed to delete the search session!', }), }); } diff --git a/x-pack/plugins/data_enhanced/server/routes/session.test.ts b/x-pack/plugins/data_enhanced/server/routes/session.test.ts index 830524da0fb97..ebc501346aed2 100644 --- a/x-pack/plugins/data_enhanced/server/routes/session.test.ts +++ b/x-pack/plugins/data_enhanced/server/routes/session.test.ts @@ -16,6 +16,13 @@ import type { import { dataPluginMock } from '../../../../../src/plugins/data/server/mocks'; import { registerSessionRoutes } from './session'; +enum PostHandlerIndex { + SAVE, + FIND, + CANCEL, + EXTEND, +} + describe('registerSessionRoutes', () => { let mockCoreSetup: MockedKeys>; let mockContext: jest.Mocked; @@ -37,7 +44,7 @@ describe('registerSessionRoutes', () => { const mockResponse = httpServerMock.createResponseFactory(); const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value; - const [[, saveHandler]] = mockRouter.post.mock.calls; + const [, saveHandler] = mockRouter.post.mock.calls[PostHandlerIndex.SAVE]; saveHandler(mockContext, mockRequest, mockResponse); @@ -71,7 +78,7 @@ describe('registerSessionRoutes', () => { const mockResponse = httpServerMock.createResponseFactory(); const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value; - const [, [, findHandler]] = mockRouter.post.mock.calls; + const [, findHandler] = mockRouter.post.mock.calls[PostHandlerIndex.FIND]; findHandler(mockContext, mockRequest, mockResponse); @@ -89,14 +96,14 @@ describe('registerSessionRoutes', () => { const mockResponse = httpServerMock.createResponseFactory(); const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value; - const [[, updateHandler]] = mockRouter.put.mock.calls; + const [, updateHandler] = mockRouter.put.mock.calls[0]; updateHandler(mockContext, mockRequest, mockResponse); expect(mockContext.search!.updateSession).toHaveBeenCalledWith(id, body); }); - it('delete calls cancelSession with id', async () => { + it('cancel calls cancelSession with id', async () => { const id = 'd7170a35-7e2c-48d6-8dec-9a056721b489'; const params = { id }; @@ -104,13 +111,28 @@ describe('registerSessionRoutes', () => { const mockResponse = httpServerMock.createResponseFactory(); const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value; - const [[, deleteHandler]] = mockRouter.delete.mock.calls; + const [, cancelHandler] = mockRouter.post.mock.calls[PostHandlerIndex.CANCEL]; - deleteHandler(mockContext, mockRequest, mockResponse); + cancelHandler(mockContext, mockRequest, mockResponse); expect(mockContext.search!.cancelSession).toHaveBeenCalledWith(id); }); + it('delete calls deleteSession with id', async () => { + const id = 'd7170a35-7e2c-48d6-8dec-9a056721b489'; + const params = { id }; + + const mockRequest = httpServerMock.createKibanaRequest({ params }); + const mockResponse = httpServerMock.createResponseFactory(); + + const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value; + const [, deleteHandler] = mockRouter.delete.mock.calls[0]; + + await deleteHandler(mockContext, mockRequest, mockResponse); + + expect(mockContext.search!.deleteSession).toHaveBeenCalledWith(id); + }); + it('extend calls extendSession with id', async () => { const id = 'd7170a35-7e2c-48d6-8dec-9a056721b489'; const expires = new Date().toISOString(); @@ -121,7 +143,7 @@ describe('registerSessionRoutes', () => { const mockResponse = httpServerMock.createResponseFactory(); const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value; - const [, , [, extendHandler]] = mockRouter.post.mock.calls; + const [, extendHandler] = mockRouter.post.mock.calls[PostHandlerIndex.EXTEND]; extendHandler(mockContext, mockRequest, mockResponse); diff --git a/x-pack/plugins/data_enhanced/server/routes/session.ts b/x-pack/plugins/data_enhanced/server/routes/session.ts index 0b953f8201ece..80388a84d98f8 100644 --- a/x-pack/plugins/data_enhanced/server/routes/session.ts +++ b/x-pack/plugins/data_enhanced/server/routes/session.ts @@ -129,6 +129,29 @@ export function registerSessionRoutes(router: DataEnhancedPluginRouter, logger: }), }, }, + async (context, request, res) => { + const { id } = request.params; + try { + await context.search!.deleteSession(id); + + return res.ok(); + } catch (e) { + const err = e.output?.payload || e; + logger.error(err); + return reportServerError(res, err); + } + } + ); + + router.post( + { + path: '/internal/session/{id}/cancel', + validate: { + params: schema.object({ + id: schema.string(), + }), + }, + }, async (context, request, res) => { const { id } = request.params; try { diff --git a/x-pack/plugins/data_enhanced/server/search/session/session_service.ts b/x-pack/plugins/data_enhanced/server/search/session/session_service.ts index 9d8a730004e1b..059edd5edf1de 100644 --- a/x-pack/plugins/data_enhanced/server/search/session/session_service.ts +++ b/x-pack/plugins/data_enhanced/server/search/session/session_service.ts @@ -226,6 +226,11 @@ export class SearchSessionService }); }; + // TODO: Throw an error if this session doesn't belong to this user + public delete = ({ savedObjectsClient }: SearchSessionDependencies, sessionId: string) => { + return savedObjectsClient.delete(SEARCH_SESSION_TYPE, sessionId); + }; + /** * Tracks the given search request/search ID in the saved session. * @internal @@ -308,6 +313,7 @@ export class SearchSessionService update: this.update.bind(this, deps), extend: this.extend.bind(this, deps), cancel: this.cancel.bind(this, deps), + delete: this.delete.bind(this, deps), }; }; }; 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 e21a01d2b97ec..0266b64f97104 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 @@ -106,7 +106,7 @@ export const Credentials: React.FC = () => { showCredentialsForm()} > {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/footer.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/footer.tsx index 68fae9d942e9d..dc2d52a073b36 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/footer.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/footer.tsx @@ -35,7 +35,7 @@ export const CredentialsFlyoutFooter: React.FC = () => { { const { activeApiToken } = useValues(CredentialsLogic); return ( - +

{activeApiToken.id diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/index.tsx index 1e0c2d3eb822c..1335a3cdeea18 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/index.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/index.tsx @@ -22,8 +22,8 @@ export const CredentialsFlyout: React.FC = () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx index 3c3f02106fe12..dd3d8ef8069ba 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx @@ -207,7 +207,7 @@ describe('Credentials', () => { isHidden: expect.any(Boolean), text: ( - ••••••• + ••••••• ), }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx index b26a244397cba..a05005fefa082 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx @@ -19,7 +19,7 @@ export const DocumentCreationButton: React.FC = () => { return ( <> = ({ defaultMessage: 'Filter fields', } )} - fullWidth={true} + fullWidth helpText={i18n.translate( 'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.filterFields', { @@ -93,7 +93,7 @@ export const CustomizationModal: React.FC = ({ > = ({ defaultMessage: 'Sort fields', } )} - fullWidth={true} + fullWidth helpText={i18n.translate( 'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.sortFields', { @@ -117,7 +117,7 @@ export const CustomizationModal: React.FC = ({ > {
= ({ options={checkboxGroupOptions} idToSelectedMap={idToSelectedMap} onChange={onChange} - compressed={true} + compressed /> {showMore && ( <> diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx index 0eb0861ee3b02..e06603894c288 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx @@ -34,7 +34,7 @@ describe('ResultView', () => { it('renders', () => { const wrapper = shallow( - + ); expect(wrapper.find(Result).props()).toEqual({ result, diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx index 441216f75a40c..9dd3fcea5f754 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx @@ -22,7 +22,7 @@ export const ResultView: React.FC = ({ result, schemaForTypeHighlights, i
  • diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx index a828747788f77..b1b31c245eb99 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx @@ -105,7 +105,7 @@ export const EngineNav: React.FC = () => { {canViewEngineAnalytics && ( {ANALYTICS_TITLE} @@ -114,7 +114,7 @@ export const EngineNav: React.FC = () => { {canViewEngineDocuments && ( {DOCUMENTS_TITLE} 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 9d7b05e68baf4..2d39b5a9aa05c 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 @@ -198,7 +198,7 @@ export const Library: React.FC = () => {

    With a link

    - + diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/index.ts index 909d10aae6823..07e53d0d29282 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/index.ts +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/index.ts @@ -7,3 +7,4 @@ export { RELEVANCE_TUNING_TITLE } from './constants'; export { RelevanceTuning } from './relevance_tuning'; +export { RelevanceTuningLogic } from './relevance_tuning_logic'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.test.ts new file mode 100644 index 0000000000000..586a845ce382a --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.test.ts @@ -0,0 +1,297 @@ +/* + * 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 { LogicMounter } from '../../../__mocks__'; + +import { BoostType } from './types'; + +import { RelevanceTuningLogic } from './relevance_tuning_logic'; + +describe('RelevanceTuningLogic', () => { + const { mount } = new LogicMounter(RelevanceTuningLogic); + + const searchSettings = { + boosts: { + foo: [ + { + type: 'value' as BoostType, + factor: 5, + }, + ], + }, + search_fields: {}, + }; + const schema = {}; + const schemaConflicts = {}; + const relevanceTuningProps = { + searchSettings, + schema, + schemaConflicts, + }; + const searchResults = [{}, {}]; + + const DEFAULT_VALUES = { + dataLoading: true, + schema: {}, + schemaConflicts: {}, + searchSettings: {}, + unsavedChanges: false, + filterInputValue: '', + query: '', + resultsLoading: false, + searchResults: null, + showSchemaConflictCallout: true, + engineHasSchemaFields: false, + schemaFields: [], + schemaFieldsWithConflicts: [], + filteredSchemaFields: [], + filteredSchemaFieldsWithConflicts: [], + }; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('has expected default values', () => { + mount(); + expect(RelevanceTuningLogic.values).toEqual(DEFAULT_VALUES); + }); + + describe('actions', () => { + describe('onInitializeRelevanceTuning', () => { + it('should set searchSettings, schema, & schemaConflicts from the API response, and set dataLoading to false', () => { + mount({ + dataLoading: true, + }); + RelevanceTuningLogic.actions.onInitializeRelevanceTuning(relevanceTuningProps); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + searchSettings, + schema, + dataLoading: false, + schemaConflicts, + }); + }); + }); + + describe('setSearchSettings', () => { + it('should set setSearchSettings and set unsavedChanges to true', () => { + mount({ + unsavedChanges: false, + }); + RelevanceTuningLogic.actions.setSearchSettings(searchSettings); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + searchSettings, + unsavedChanges: true, + }); + }); + }); + + describe('setFilterValue', () => { + it('should set filterInputValue', () => { + mount(); + RelevanceTuningLogic.actions.setFilterValue('foo'); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + filterInputValue: 'foo', + }); + }); + }); + + describe('setSearchQuery', () => { + it('should set query', () => { + mount(); + RelevanceTuningLogic.actions.setSearchQuery('foo'); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + query: 'foo', + }); + }); + }); + + describe('setSearchResults', () => { + it('should set searchResults and set resultLoading to false', () => { + mount({ + resultsLoading: true, + }); + RelevanceTuningLogic.actions.setSearchResults(searchResults); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + searchResults, + resultsLoading: false, + }); + }); + }); + + describe('setResultsLoading', () => { + it('should set resultsLoading', () => { + mount({ + resultsLoading: false, + }); + RelevanceTuningLogic.actions.setResultsLoading(true); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + resultsLoading: true, + }); + }); + }); + + describe('clearSearchResults', () => { + it('should set searchResults', () => { + mount({ + searchResults: [{}], + }); + RelevanceTuningLogic.actions.clearSearchResults(); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + searchResults: null, + }); + }); + }); + + describe('resetSearchSettingsState', () => { + it('should set dataLoading', () => { + mount({ + dataLoading: false, + }); + RelevanceTuningLogic.actions.resetSearchSettingsState(); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + dataLoading: true, + }); + }); + }); + + describe('dismissSchemaConflictCallout', () => { + it('should set showSchemaConflictCallout to false', () => { + mount({ + showSchemaConflictCallout: true, + }); + RelevanceTuningLogic.actions.dismissSchemaConflictCallout(); + + expect(RelevanceTuningLogic.values).toEqual({ + ...DEFAULT_VALUES, + showSchemaConflictCallout: false, + }); + }); + }); + }); + + describe('selectors', () => { + describe('engineHasSchemaFields', () => { + it('should return false if there is only a single field in a schema', () => { + // This is because if a schema only has a single field, it is "id", which we do not + // consider a tunable field. + mount({ + schema: { + id: 'foo', + }, + }); + expect(RelevanceTuningLogic.values.engineHasSchemaFields).toEqual(false); + }); + + it('should return true otherwise', () => { + mount({ + schema: { + id: 'foo', + bar: 'bar', + }, + }); + expect(RelevanceTuningLogic.values.engineHasSchemaFields).toEqual(true); + }); + }); + + describe('schemaFields', () => { + it('should return the list of field names from the schema', () => { + mount({ + schema: { + id: 'foo', + bar: 'bar', + }, + }); + expect(RelevanceTuningLogic.values.schemaFields).toEqual(['id', 'bar']); + }); + }); + + describe('schemaFieldsWithConflicts', () => { + it('should return the list of field names that have schema conflicts', () => { + mount({ + schemaConflicts: { + foo: { + text: ['source_engine_1'], + number: ['source_engine_2'], + }, + }, + }); + expect(RelevanceTuningLogic.values.schemaFieldsWithConflicts).toEqual(['foo']); + }); + }); + + describe('filteredSchemaFields', () => { + it('should return a list of schema field names that contain the text from filterInputValue ', () => { + mount({ + filterInputValue: 'ba', + schema: { + id: 'string', + foo: 'string', + bar: 'string', + baz: 'string', + }, + }); + expect(RelevanceTuningLogic.values.filteredSchemaFields).toEqual(['bar', 'baz']); + }); + + it('should return all schema fields if there is no filter applied', () => { + mount({ + filterTerm: '', + schema: { + id: 'string', + foo: 'string', + bar: 'string', + baz: 'string', + }, + }); + expect(RelevanceTuningLogic.values.filteredSchemaFields).toEqual([ + 'id', + 'foo', + 'bar', + 'baz', + ]); + }); + }); + + describe('filteredSchemaFieldsWithConflicts', () => { + it('should return a list of schema field names that contain the text from filterInputValue, and if that field has a schema conflict', () => { + mount({ + filterInputValue: 'ba', + schema: { + id: 'string', + foo: 'string', + bar: 'string', + baz: 'string', + }, + schemaConflicts: { + bar: { + text: ['source_engine_1'], + number: ['source_engine_2'], + }, + }, + }); + expect(RelevanceTuningLogic.values.filteredSchemaFieldsWithConflicts).toEqual(['bar']); + }); + }); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.ts new file mode 100644 index 0000000000000..d4ec5e37f6ce5 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.ts @@ -0,0 +1,158 @@ +/* + * 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 { kea, MakeLogicType } from 'kea'; + +import { Schema, SchemaConflicts } from '../../../shared/types'; + +import { SearchSettings } from './types'; + +interface RelevanceTuningProps { + searchSettings: SearchSettings; + schema: Schema; + schemaConflicts: SchemaConflicts; +} + +interface RelevanceTuningActions { + onInitializeRelevanceTuning(props: RelevanceTuningProps): RelevanceTuningProps; + setSearchSettings(searchSettings: SearchSettings): { searchSettings: SearchSettings }; + setFilterValue(value: string): string; + setSearchQuery(value: string): string; + setSearchResults(searchResults: object[]): object[]; + setResultsLoading(resultsLoading: boolean): boolean; + clearSearchResults(): void; + resetSearchSettingsState(): void; + dismissSchemaConflictCallout(): void; +} + +interface RelevanceTuningValues { + searchSettings: Partial; + schema: Schema; + schemaFields: string[]; + schemaFieldsWithConflicts: string[]; + filteredSchemaFields: string[]; + filteredSchemaFieldsWithConflicts: string[]; + schemaConflicts: SchemaConflicts; + showSchemaConflictCallout: boolean; + engineHasSchemaFields: boolean; + filterInputValue: string; + query: string; + unsavedChanges: boolean; + dataLoading: boolean; + searchResults: object[] | null; + resultsLoading: boolean; +} + +// If the user hasn't entered a filter, then we can skip filtering the array entirely +const filterIfTerm = (array: string[], filterTerm: string): string[] => { + return filterTerm === '' ? array : array.filter((item) => item.includes(filterTerm)); +}; + +export const RelevanceTuningLogic = kea< + MakeLogicType +>({ + path: ['enterprise_search', 'app_search', 'relevance_tuning_logic'], + actions: () => ({ + onInitializeRelevanceTuning: (props) => props, + setSearchSettings: (searchSettings) => ({ searchSettings }), + setFilterValue: (value) => value, + setSearchQuery: (query) => query, + setSearchResults: (searchResults) => searchResults, + setResultsLoading: (resultsLoading) => resultsLoading, + clearSearchResults: true, + resetSearchSettingsState: true, + dismissSchemaConflictCallout: true, + }), + reducers: () => ({ + searchSettings: [ + {}, + { + onInitializeRelevanceTuning: (_, { searchSettings }) => searchSettings, + setSearchSettings: (_, { searchSettings }) => searchSettings, + }, + ], + schema: [ + {}, + { + onInitializeRelevanceTuning: (_, { schema }) => schema, + }, + ], + schemaConflicts: [ + {}, + { + onInitializeRelevanceTuning: (_, { schemaConflicts }) => schemaConflicts, + }, + ], + showSchemaConflictCallout: [ + true, + { + dismissSchemaConflictCallout: () => false, + }, + ], + filterInputValue: [ + '', + { + setFilterValue: (_, filterInputValue) => filterInputValue, + }, + ], + query: [ + '', + { + setSearchQuery: (_, query) => query, + }, + ], + unsavedChanges: [ + false, + { + setSearchSettings: () => true, + }, + ], + + dataLoading: [ + true, + { + onInitializeRelevanceTuning: () => false, + resetSearchSettingsState: () => true, + }, + ], + searchResults: [ + null, + { + clearSearchResults: () => null, + setSearchResults: (_, searchResults) => searchResults, + }, + ], + resultsLoading: [ + false, + { + setResultsLoading: (_, resultsLoading) => resultsLoading, + setSearchResults: () => false, + }, + ], + }), + selectors: ({ selectors }) => ({ + schemaFields: [() => [selectors.schema], (schema: Schema) => Object.keys(schema)], + schemaFieldsWithConflicts: [ + () => [selectors.schemaConflicts], + (schemaConflicts: SchemaConflicts) => Object.keys(schemaConflicts), + ], + filteredSchemaFields: [ + () => [selectors.schemaFields, selectors.filterInputValue], + (schemaFields: string[], filterInputValue: string): string[] => + filterIfTerm(schemaFields, filterInputValue), + ], + filteredSchemaFieldsWithConflicts: [ + () => [selectors.schemaFieldsWithConflicts, selectors.filterInputValue], + (schemaFieldsWithConflicts: string[], filterInputValue: string): string[] => + filterIfTerm(schemaFieldsWithConflicts, filterInputValue), + ], + engineHasSchemaFields: [ + () => [selectors.schema], + (schema: Schema): boolean => Object.keys(schema).length >= 2, + ], + }), +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/types.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/types.ts new file mode 100644 index 0000000000000..25187df89d64c --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/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. + */ + +export type BoostType = 'value' | 'functional' | 'proximity'; + +export interface Boost { + type: BoostType; + operation?: string; + function?: string; + newBoost?: boolean; + center?: string | number; + value?: string | number | string[] | number[]; + factor: number; +} + +export interface SearchSettings { + boosts: Record; + search_fields: object; +} diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx index cbec65ec9f884..0c3749d1ccb3d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx @@ -62,7 +62,7 @@ describe('Result', () => { }); it('passes showScore, resultMeta, and isMetaEngine to ResultHeader', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(ResultHeader).props()).toEqual({ isMetaEngine: true, showScore: true, @@ -76,7 +76,7 @@ describe('Result', () => { describe('document detail link', () => { it('will render a link if shouldLinkToDetailPage is true', () => { - const wrapper = shallow(); + const wrapper = shallow(); wrapper.find(ReactRouterHelper).forEach((link) => { expect(link.prop('to')).toEqual('/engines/my-engine/documents/1'); }); @@ -96,7 +96,7 @@ describe('Result', () => { it('will render field details with type highlights if schemaForTypeHighlights has been provided', () => { const wrapper = shallow( - + ); expect(wrapper.find(ResultField).map((rf) => rf.prop('type'))).toEqual([ 'text', diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.test.tsx index 1e7be7027f7b3..9d90b3ae35a8f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.test.tsx @@ -34,7 +34,7 @@ describe('ResultHeader', () => { describe('score', () => { it('renders score if showScore is true ', () => { const wrapper = shallow( - + ); expect(wrapper.find('[data-test-subj="ResultScore"]').prop('value')).toEqual(100); }); @@ -51,12 +51,12 @@ describe('ResultHeader', () => { it('renders engine name if this is a meta engine', () => { const wrapper = shallow( ); expect(wrapper.find('[data-test-subj="ResultEngine"]').prop('value')).toBe('my-engine'); @@ -65,7 +65,7 @@ describe('ResultHeader', () => { it('does not render an engine if this is not a meta engine', () => { const wrapper = shallow( { const initializeAppData = jest.fn(); setMockActions({ initializeAppData }); - shallow(); + shallow(); expect(initializeAppData).toHaveBeenCalledWith({ ilmEnabled: true }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx index d4e879ebc11ce..162ea7f427306 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx @@ -67,7 +67,7 @@ export const ProductCard: React.FC = ({ product, image }) => { sendEnterpriseSearchTelemetry({ action: 'clicked', diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/hidden_text/hidden_text.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/hidden_text/hidden_text.tsx index 1886afb468404..5503baf0bdae4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/hidden_text/hidden_text.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/hidden_text/hidden_text.tsx @@ -27,7 +27,7 @@ export const HiddenText: React.FC = ({ text, children }) => { }); const hiddenText = isHidden ? ( - {text.replace(/./g, '•')} + {text.replace(/./g, '•')} ) : ( text diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx index 6bcdc9623cb91..3898eda126415 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx @@ -41,7 +41,7 @@ export const IndexingStatus: React.FC = ({ return ( <> {percentageComplete < 100 && ( - + )} diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.test.tsx index 3f6d4e781cda1..c67518e977de2 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.test.tsx @@ -57,7 +57,7 @@ describe('Layout', () => { }); it('renders a read-only mode callout', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(EuiCallOut)).toHaveLength(1); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx index f9269e425f84a..4de43ce997b48 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx @@ -53,7 +53,7 @@ describe('EUI & React Router Component Helpers', () => { }); it('passes down all ...rest props', () => { - const wrapper = shallow(); + const wrapper = shallow(); const link = wrapper.find(EuiLink); expect(link.prop('external')).toEqual(true); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.tsx index 1ef665a52c782..bbde6c5d3b55d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.tsx @@ -94,7 +94,7 @@ export const SchemaAddFieldModal: React.FC = ({ = ({ placeholder="name" type="text" onChange={handleChange} - required={true} + required value={rawFieldName} - fullWidth={true} - autoFocus={true} + fullWidth + autoFocus isLoading={loading} data-test-subj="SchemaAddFieldNameField" /> @@ -132,7 +132,7 @@ export const SchemaAddFieldModal: React.FC = ({ {FIELD_NAME_MODAL_CANCEL} = ({ {!isVisible ? ( - + ) : ( )} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx index 2b09babbb03fc..73ee7662888bb 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx @@ -63,7 +63,7 @@ describe('WorkplaceSearchConfigured', () => { }); it('initializes app data with passed props', () => { - shallow(); + shallow(); expect(initializeAppData).toHaveBeenCalledWith({ isFederatedAuth: true }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_header.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_header.tsx index 39c432eb27491..f12c24feb8e1a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_header.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_header.tsx @@ -36,7 +36,7 @@ export const AddSourceHeader: React.FC = ({ diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx index 0dd3850b86de8..3a0db0f44047d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx @@ -109,7 +109,7 @@ export const AddSourceList: React.FC = () => { data-test-subj="FilterSourcesInput" value={filterValue} onChange={handleFilterChange} - fullWidth={true} + fullWidth placeholder={ADD_SOURCE_PLACEHOLDER} /> diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.tsx index bc697a39984c0..62beb4e40793b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.tsx @@ -118,7 +118,7 @@ export const DisplaySettings: React.FC = ({ tabId }) => { description={DISPLAY_SETTINGS_DESCRIPTION} action={ hasDocuments ? ( - + {SAVE_BUTTON} ) : null diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/field_editor_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/field_editor_modal.tsx index 6171bddbd1527..9a6af035c1c8d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/field_editor_modal.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/field_editor_modal.tsx @@ -73,9 +73,9 @@ export const FieldEditorModal: React.FC = () => { { setLabel(e.target.value)} @@ -95,7 +95,7 @@ export const FieldEditorModal: React.FC = () => { {CANCEL_BUTTON} - + {ACTION_LABEL} {FIELD_LABEL} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.tsx index 3930768628aba..8382ddc9e82b3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.tsx @@ -79,7 +79,7 @@ export const ResultDetail: React.FC = () => { <> {detailFields.map(({ fieldName, label }, index) => ( @@ -87,7 +87,7 @@ export const ResultDetail: React.FC = () => { key={`${fieldName}-${index}`} index={index} draggableId={`${fieldName}-${index}`} - customDragHandle={true} + customDragHandle spacing="m" > {(provided) => ( diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/search_results.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/search_results.tsx index f7491ae8778c3..b2ba2b13e5ec3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/search_results.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/search_results.tsx @@ -76,10 +76,10 @@ export const SearchResults: React.FC = () => { > setTitleField(e.target.value)} @@ -88,9 +88,9 @@ export const SearchResults: React.FC = () => { setUrlField(e.target.value)} @@ -110,7 +110,7 @@ export const SearchResults: React.FC = () => { @@ -129,7 +129,7 @@ export const SearchResults: React.FC = () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema.tsx index 936dceba89e56..fe48e1c14ff41 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema.tsx @@ -122,7 +122,7 @@ export const Schema: React.FC = () => { {addFieldButton} {percentageComplete < 100 ? ( - + {SCHEMA_UPDATING} ) : ( @@ -130,7 +130,7 @@ export const Schema: React.FC = () => { disabled={formUnchanged} data-test-subj="UpdateTypesButton" onClick={updateFields} - fill={true} + fill > {SCHEMA_SAVE_BUTTON} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx index d93bafe6b972e..a683d9384f636 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx @@ -57,7 +57,7 @@ export const SchemaFieldsTable: React.FC = () => { disabled={fieldName === 'id'} key={fieldName} fieldName={fieldName} - hideName={true} + hideName fieldType={filteredSchemaFields[fieldName]} updateExistingFieldType={updateExistingFieldType} /> diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_settings.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_settings.tsx index dbde764a56861..2fa00c7f029f1 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_settings.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_settings.tsx @@ -48,30 +48,31 @@ import { ViewContentHeader } from '../../../components/shared/view_content_heade import { SourceDataItem } from '../../../types'; import { AppLogic } from '../../../app_logic'; +import { AddSourceLogic } from '../components/add_source/add_source_logic'; import { staticSourceData } from '../source_data'; import { SourceLogic } from '../source_logic'; export const SourceSettings: React.FC = () => { - const { - updateContentSource, - removeContentSource, - resetSourceState, - getSourceConfigData, - } = useActions(SourceLogic); + const { updateContentSource, removeContentSource, resetSourceState } = useActions(SourceLogic); + const { getSourceConfigData } = useActions(AddSourceLogic); const { contentSource: { name, id, serviceType }, buttonLoading, - sourceConfigData: { configuredFields }, } = useValues(SourceLogic); + const { + sourceConfigData: { configuredFields }, + } = useValues(AddSourceLogic); + const { isOrganization } = useValues(AppLogic); useEffect(() => { getSourceConfigData(serviceType); return resetSourceState; }, []); + const { configuration: { isPublicKey }, editPath, diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/private_sources.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/private_sources.tsx index 6dcc4379515a3..d68b451ffa6f5 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/private_sources.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/private_sources.tsx @@ -109,7 +109,7 @@ export const PrivateSources: React.FC = () => { const privateSourcesTable = ( diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.test.ts index bf5ec5a949b8d..15df7ddc99395 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.test.ts +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.test.ts @@ -18,11 +18,7 @@ jest.mock('../../app_logic', () => ({ AppLogic: { values: { isOrganization: true } }, })); -import { - fullContentSources, - sourceConfigData, - contentItems, -} from '../../__mocks__/content_sources.mock'; +import { fullContentSources, contentItems } from '../../__mocks__/content_sources.mock'; import { meta } from '../../__mocks__/meta.mock'; import { DEFAULT_META } from '../../../shared/constants'; @@ -46,7 +42,6 @@ describe('SourceLogic', () => { const defaultValues = { contentSource: {}, contentItems: [], - sourceConfigData: {}, dataLoading: true, sectionLoading: true, buttonLoading: false, @@ -88,13 +83,6 @@ describe('SourceLogic', () => { expect(setSuccessMessage).toHaveBeenCalled(); }); - it('setSourceConfigData', () => { - SourceLogic.actions.setSourceConfigData(sourceConfigData); - - expect(SourceLogic.values.sourceConfigData).toEqual(sourceConfigData); - expect(SourceLogic.values.dataLoading).toEqual(false); - }); - it('setSearchResults', () => { SourceLogic.actions.setSearchResults(searchServerResponse); @@ -402,40 +390,6 @@ describe('SourceLogic', () => { }); }); - describe('getSourceConfigData', () => { - const serviceType = 'github'; - - it('calls API and sets values', async () => { - AppLogic.values.isOrganization = true; - - const setSourceConfigDataSpy = jest.spyOn(SourceLogic.actions, 'setSourceConfigData'); - const promise = Promise.resolve(contentSource); - http.get.mockReturnValue(promise); - SourceLogic.actions.getSourceConfigData(serviceType); - - expect(http.get).toHaveBeenCalledWith( - `/api/workplace_search/org/settings/connectors/${serviceType}` - ); - await promise; - expect(setSourceConfigDataSpy).toHaveBeenCalled(); - }); - - it('handles error', async () => { - const error = { - response: { - error: 'this is an error', - status: 400, - }, - }; - const promise = Promise.reject(error); - http.get.mockReturnValue(promise); - SourceLogic.actions.getSourceConfigData(serviceType); - await expectedAsyncError(promise); - - expect(flashAPIErrors).toHaveBeenCalledWith(error); - }); - }); - it('resetSourceState', () => { SourceLogic.actions.resetSourceState(); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.ts index 1eef715350848..c1f5d6033543f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_logic.ts @@ -27,7 +27,6 @@ import { ContentSourceFullData, Meta, DocumentSummaryItem, SourceContentItem } f export interface SourceActions { onInitializeSource(contentSource: ContentSourceFullData): ContentSourceFullData; onUpdateSourceName(name: string): string; - setSourceConfigData(sourceConfigData: SourceConfigData): SourceConfigData; setSearchResults(searchResultsResponse: SearchResultsResponse): SearchResultsResponse; initializeFederatedSummary(sourceId: string): { sourceId: string }; onUpdateSummary(summary: DocumentSummaryItem[]): DocumentSummaryItem[]; @@ -41,28 +40,9 @@ export interface SourceActions { resetSourceState(): void; removeContentSource(sourceId: string): { sourceId: string }; initializeSource(sourceId: string): { sourceId: string }; - getSourceConfigData(serviceType: string): { serviceType: string }; setButtonNotLoading(): void; } -interface SourceConfigData { - serviceType: string; - name: string; - configured: boolean; - categories: string[]; - needsPermissions?: boolean; - privateSourcesEnabled: boolean; - configuredFields: { - publicKey: string; - privateKey: string; - consumerKey: string; - baseUrl?: string; - clientId?: string; - clientSecret?: string; - }; - accountContextOnly?: boolean; -} - interface SourceValues { contentSource: ContentSourceFullData; dataLoading: boolean; @@ -71,7 +51,6 @@ interface SourceValues { contentItems: SourceContentItem[]; contentMeta: Meta; contentFilterValue: string; - sourceConfigData: SourceConfigData; } interface SearchResultsResponse { @@ -84,7 +63,6 @@ export const SourceLogic = kea>({ actions: { onInitializeSource: (contentSource: ContentSourceFullData) => contentSource, onUpdateSourceName: (name: string) => name, - setSourceConfigData: (sourceConfigData: SourceConfigData) => sourceConfigData, onUpdateSummary: (summary: object[]) => summary, setSearchResults: (searchResultsResponse: SearchResultsResponse) => searchResultsResponse, setContentFilterValue: (contentFilterValue: string) => contentFilterValue, @@ -96,7 +74,6 @@ export const SourceLogic = kea>({ removeContentSource: (sourceId: string) => ({ sourceId, }), - getSourceConfigData: (serviceType: string) => ({ serviceType }), resetSourceState: () => true, setButtonNotLoading: () => false, }, @@ -115,17 +92,10 @@ export const SourceLogic = kea>({ }), }, ], - sourceConfigData: [ - {} as SourceConfigData, - { - setSourceConfigData: (_, sourceConfigData) => sourceConfigData, - }, - ], dataLoading: [ true, { onInitializeSource: () => false, - setSourceConfigData: () => false, resetSourceState: () => false, }, ], @@ -133,7 +103,6 @@ export const SourceLogic = kea>({ false, { setButtonNotLoading: () => false, - setSourceConfigData: () => false, resetSourceState: () => false, removeContentSource: () => true, }, @@ -181,7 +150,6 @@ export const SourceLogic = kea>({ actions.initializeFederatedSummary(sourceId); } } catch (e) { - // TODO: Verify this works once components are there. Not sure if the catch gives a status code. if (e.response.status === 404) { KibanaLogic.values.navigateToUrl(NOT_FOUND_PATH); } else { @@ -260,16 +228,6 @@ export const SourceLogic = kea>({ actions.setButtonNotLoading(); } }, - getSourceConfigData: async ({ serviceType }) => { - const route = `/api/workplace_search/org/settings/connectors/${serviceType}`; - - try { - const response = await HttpLogic.values.http.get(route); - actions.setSourceConfigData(response); - } catch (e) { - flashAPIErrors(e); - } - }, onUpdateSourceName: (name: string) => { setSuccessMessage( i18n.translate( diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/add_group_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/add_group_modal.tsx index b19003e431ee5..f49c978d06e90 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/add_group_modal.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/add_group_modal.tsx @@ -73,7 +73,7 @@ export const AddGroupModal: React.FC<{}> = () => { {ADD_GROUP_SUBMIT} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/filterable_users_popover.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/filterable_users_popover.tsx index 6cba9fcb509ea..b47232197c47f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/filterable_users_popover.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/filterable_users_popover.tsx @@ -41,7 +41,7 @@ export const FilterableUsersPopover: React.FC = ({ return ( = ({ addFilteredUser={addFilteredUser} allGroupUsersLoading={allGroupUsersLoading} removeFilteredUser={removeFilteredUser} - isPopover={true} + isPopover /> diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx index 4fb9350d0b362..6907618e40b46 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx @@ -96,7 +96,7 @@ export const GroupSourcePrioritization: React.FC = () => { {HEADER_ACTION_TEXT} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/groups_table.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/groups_table.tsx index ff596e41f5538..31f549c3e2065 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/groups_table.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/groups_table.tsx @@ -91,7 +91,7 @@ export const GroupsTable: React.FC<{}> = () => { - {showPagination && } + {showPagination && } ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/table_filter_users_dropdown.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/table_filter_users_dropdown.tsx index 49dc3bfa671d9..9ddb955767c14 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/table_filter_users_dropdown.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/table_filter_users_dropdown.tsx @@ -44,7 +44,7 @@ export const TableFilterUsersDropdown: React.FC<{}> = () => { { diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx index 144aaabba407d..7a8b9343691f9 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx @@ -86,7 +86,7 @@ export const Groups: React.FC = () => { const headerAction = ( - + {i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.addGroupForm.action', { defaultMessage: 'Create a group', })} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx index 79f418a48dabc..4b59e0f3401c5 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx @@ -15,7 +15,6 @@ import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui'; import { Loading } from '../../../../shared/loading'; import { SourceDataItem } from '../../../types'; import { staticSourceData } from '../../content_sources/source_data'; -import { SourceLogic } from '../../content_sources/source_logic'; import { AddSourceLogic } from '../../content_sources/components/add_source/add_source_logic'; import { AddSourceHeader } from '../../content_sources/components/add_source/add_source_header'; @@ -31,18 +30,18 @@ export const SourceConfig: React.FC = ({ sourceIndex }) => { const [confirmModalVisible, setConfirmModalVisibility] = useState(false); const { configuration, serviceType } = staticSourceData[sourceIndex] as SourceDataItem; const { deleteSourceConfig } = useActions(SettingsLogic); - const { getSourceConfigData } = useActions(SourceLogic); - const { saveSourceConfig } = useActions(AddSourceLogic); + const { saveSourceConfig, getSourceConfigData } = useActions(AddSourceLogic); const { sourceConfigData: { name, categories }, - dataLoading: sourceDataLoading, - } = useValues(SourceLogic); + dataLoading, + } = useValues(AddSourceLogic); useEffect(() => { getSourceConfigData(serviceType); }, []); - if (sourceDataLoading) return ; + if (dataLoading) return ; + const hideConfirmModal = () => setConfirmModalVisibility(false); const showConfirmModal = () => setConfirmModalVisibility(true); const saveUpdatedConfig = () => saveSourceConfig(true); diff --git a/x-pack/plugins/enterprise_search/server/__mocks__/router.mock.ts b/x-pack/plugins/enterprise_search/server/__mocks__/router.mock.ts index 7fde7934cf7ad..88cf30bb2a549 100644 --- a/x-pack/plugins/enterprise_search/server/__mocks__/router.mock.ts +++ b/x-pack/plugins/enterprise_search/server/__mocks__/router.mock.ts @@ -23,7 +23,6 @@ type PayloadType = 'params' | 'query' | 'body'; interface IMockRouter { method: MethodType; path: string; - payload?: PayloadType; } interface IMockRouterRequest { body?: object; @@ -39,11 +38,10 @@ export class MockRouter { public payload?: PayloadType; public response = httpServerMock.createResponseFactory(); - constructor({ method, path, payload }: IMockRouter) { + constructor({ method, path }: IMockRouter) { this.createRouter(); this.method = method; this.path = path; - this.payload = payload; } public createRouter = () => { @@ -62,16 +60,17 @@ export class MockRouter { */ public validateRoute = (request: MockRouterRequest) => { - if (!this.payload) throw new Error('Cannot validate wihout a payload type specified.'); - const route = this.findRouteRegistration(); const [config] = route; const validate = config.validate as RouteValidatorConfig<{}, {}, {}>; + const payloads = Object.keys(request) as PayloadType[]; - const payloadValidation = validate[this.payload] as { validate(request: KibanaRequest): void }; - const payloadRequest = request[this.payload] as KibanaRequest; + payloads.forEach((payload: PayloadType) => { + const payloadValidation = validate[payload] as { validate(request: KibanaRequest): void }; + const payloadRequest = request[payload] as KibanaRequest; - payloadValidation.validate(payloadRequest); + payloadValidation.validate(payloadRequest); + }); }; public shouldValidate = (request: MockRouterRequest) => { @@ -99,7 +98,6 @@ export class MockRouter { // const mockRouter = new MockRouter({ // method: 'get', // path: '/api/app_search/test', -// payload: 'body' // }); // // beforeEach(() => { diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/analytics.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/analytics.test.ts index 3d63e4044e75b..8e4a7dba165b1 100644 --- a/x-pack/plugins/enterprise_search/server/routes/app_search/analytics.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/app_search/analytics.test.ts @@ -18,7 +18,6 @@ describe('analytics routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/app_search/engines/{engineName}/analytics/queries', - payload: 'query', }); registerAnalyticsRoutes({ @@ -71,7 +70,6 @@ describe('analytics routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/app_search/engines/{engineName}/analytics/queries/{query}', - payload: 'query', }); registerAnalyticsRoutes({ diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts index 7a513b1c76b4e..d9e84d3e62f28 100644 --- a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts @@ -18,7 +18,6 @@ describe('credentials routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/app_search/credentials', - payload: 'query', }); registerCredentialsRoutes({ @@ -54,7 +53,6 @@ describe('credentials routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/app_search/credentials', - payload: 'body', }); registerCredentialsRoutes({ @@ -167,7 +165,6 @@ describe('credentials routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/app_search/credentials/details', - payload: 'query', }); registerCredentialsRoutes({ @@ -191,7 +188,6 @@ describe('credentials routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/app_search/credentials/{name}', - payload: 'body', }); registerCredentialsRoutes({ diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/documents.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/documents.test.ts index fdae51444bb54..af54d340ad150 100644 --- a/x-pack/plugins/enterprise_search/server/routes/app_search/documents.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/app_search/documents.test.ts @@ -18,7 +18,6 @@ describe('documents routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/app_search/engines/{engineName}/documents', - payload: 'body', }); registerDocumentsRoutes({ diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/engines.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/engines.test.ts index e874a188a10f7..abd26e18c7b9d 100644 --- a/x-pack/plugins/enterprise_search/server/routes/app_search/engines.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/app_search/engines.test.ts @@ -29,7 +29,6 @@ describe('engine routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/app_search/engines', - payload: 'query', }); registerEnginesRoutes({ diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/search_settings.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/search_settings.test.ts index 92a695af12aaa..d8f677e2f0d82 100644 --- a/x-pack/plugins/enterprise_search/server/routes/app_search/search_settings.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/app_search/search_settings.test.ts @@ -87,7 +87,6 @@ describe('search settings routes', () => { const mockRouter = new MockRouter({ method: 'put', path: '/api/app_search/engines/{engineName}/search_settings', - payload: 'body', }); beforeEach(() => { @@ -149,7 +148,6 @@ describe('search settings routes', () => { const mockRouter = new MockRouter({ method: 'post', path: '/api/app_search/engines/{engineName}/search_settings_search', - payload: 'body', }); beforeEach(() => { @@ -188,29 +186,18 @@ describe('search settings routes', () => { }); describe('validates query', () => { - const queryRouter = new MockRouter({ - method: 'post', - path: '/api/app_search/engines/{engineName}/search_settings_search', - payload: 'query', - }); - it('correctly', () => { - registerSearchSettingsRoutes({ - ...mockDependencies, - router: queryRouter.router, - }); - const request = { query: { query: 'foo', }, }; - queryRouter.shouldValidate(request); + mockRouter.shouldValidate(request); }); it('missing required fields', () => { const request = { query: {} }; - queryRouter.shouldThrow(request); + mockRouter.shouldThrow(request); }); }); }); diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/settings.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/settings.test.ts index 5d56bbf4fcd11..6df9a4f16d710 100644 --- a/x-pack/plugins/enterprise_search/server/routes/app_search/settings.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/app_search/settings.test.ts @@ -41,7 +41,6 @@ describe('log settings routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/app_search/log_settings', - payload: 'body', }); registerSettingsRoutes({ diff --git a/x-pack/plugins/enterprise_search/server/routes/enterprise_search/telemetry.test.ts b/x-pack/plugins/enterprise_search/server/routes/enterprise_search/telemetry.test.ts index f41ad367839c3..08c398ba3eb0d 100644 --- a/x-pack/plugins/enterprise_search/server/routes/enterprise_search/telemetry.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/enterprise_search/telemetry.test.ts @@ -29,7 +29,6 @@ describe('Enterprise Search Telemetry API', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/enterprise_search/stats', - payload: 'body', }); registerTelemetryRoute({ diff --git a/x-pack/plugins/enterprise_search/server/routes/workplace_search/groups.test.ts b/x-pack/plugins/enterprise_search/server/routes/workplace_search/groups.test.ts index e67ca4c064886..68a9ae725f8a4 100644 --- a/x-pack/plugins/enterprise_search/server/routes/workplace_search/groups.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/workplace_search/groups.test.ts @@ -26,7 +26,6 @@ describe('groups routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/workplace_search/groups', - payload: 'query', }); registerGroupsRoute({ @@ -50,7 +49,6 @@ describe('groups routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/groups', - payload: 'body', }); registerGroupsRoute({ @@ -85,7 +83,6 @@ describe('groups routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/groups/search', - payload: 'body', }); registerSearchGroupsRoute({ @@ -163,7 +160,6 @@ describe('groups routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/groups/{id}', - payload: 'body', }); registerGroupRoute({ @@ -246,7 +242,6 @@ describe('groups routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/groups/{id}/share', - payload: 'body', }); registerShareGroupRoute({ @@ -282,7 +277,6 @@ describe('groups routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/groups/{id}/assign', - payload: 'body', }); registerAssignGroupRoute({ @@ -318,7 +312,6 @@ describe('groups routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/groups/{id}/boosts', - payload: 'body', }); registerBoostsGroupRoute({ diff --git a/x-pack/plugins/enterprise_search/server/routes/workplace_search/overview.test.ts b/x-pack/plugins/enterprise_search/server/routes/workplace_search/overview.test.ts index 1afb85b389b42..bdf885648dff7 100644 --- a/x-pack/plugins/enterprise_search/server/routes/workplace_search/overview.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/workplace_search/overview.test.ts @@ -18,7 +18,6 @@ describe('Overview route', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/workplace_search/overview', - payload: 'query', }); registerOverviewRoute({ diff --git a/x-pack/plugins/enterprise_search/server/routes/workplace_search/security.test.ts b/x-pack/plugins/enterprise_search/server/routes/workplace_search/security.test.ts index f2117a8bc948a..a1615499c56a2 100644 --- a/x-pack/plugins/enterprise_search/server/routes/workplace_search/security.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/workplace_search/security.test.ts @@ -45,7 +45,6 @@ describe('security routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/workplace_search/org/security/source_restrictions', - payload: 'body', }); registerSecuritySourceRestrictionsRoute({ @@ -72,7 +71,6 @@ describe('security routes', () => { mockRouter = new MockRouter({ method: 'patch', path: '/api/workplace_search/org/security/source_restrictions', - payload: 'body', }); registerSecuritySourceRestrictionsRoute({ diff --git a/x-pack/plugins/enterprise_search/server/routes/workplace_search/settings.test.ts b/x-pack/plugins/enterprise_search/server/routes/workplace_search/settings.test.ts index cf654918beb49..00a5b6c75df0a 100644 --- a/x-pack/plugins/enterprise_search/server/routes/workplace_search/settings.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/workplace_search/settings.test.ts @@ -45,7 +45,6 @@ describe('settings routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/org/settings/customize', - payload: 'body', }); registerOrgSettingsCustomizeRoute({ @@ -76,7 +75,6 @@ describe('settings routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/org/settings/oauth_application', - payload: 'body', }); registerOrgSettingsOauthApplicationRoute({ diff --git a/x-pack/plugins/enterprise_search/server/routes/workplace_search/sources.test.ts b/x-pack/plugins/enterprise_search/server/routes/workplace_search/sources.test.ts index 2ae10e85ea9c0..a2fbe759f1a11 100644 --- a/x-pack/plugins/enterprise_search/server/routes/workplace_search/sources.test.ts +++ b/x-pack/plugins/enterprise_search/server/routes/workplace_search/sources.test.ts @@ -154,7 +154,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/account/create_source', - payload: 'body', }); registerAccountCreateSourceRoute({ @@ -194,7 +193,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/account/sources/{id}/documents', - payload: 'body', }); registerAccountSourceDocumentsRoute({ @@ -281,7 +279,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'patch', path: '/api/workplace_search/account/sources/{id}/settings', - payload: 'body', }); registerAccountSourceSettingsRoute({ @@ -364,7 +361,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/account/sources/{id}/searchable', - payload: 'body', }); registerAccountSourceSearchableRoute({ @@ -422,7 +418,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/account/sources/{id}/display_settings/config', - payload: 'body', }); registerAccountSourceDisplaySettingsConfig({ @@ -489,7 +484,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/account/sources/{id}/schemas', - payload: 'body', }); registerAccountSourceSchemasRoute({ @@ -667,7 +661,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/org/create_source', - payload: 'body', }); registerOrgCreateSourceRoute({ @@ -707,7 +700,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/org/sources/{id}/documents', - payload: 'body', }); registerOrgSourceDocumentsRoute({ @@ -794,7 +786,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'patch', path: '/api/workplace_search/org/sources/{id}/settings', - payload: 'body', }); registerOrgSourceSettingsRoute({ @@ -877,7 +868,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/org/sources/{id}/searchable', - payload: 'body', }); registerOrgSourceSearchableRoute({ @@ -935,7 +925,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/org/sources/{id}/display_settings/config', - payload: 'body', }); registerOrgSourceDisplaySettingsConfig({ @@ -1002,7 +991,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/org/sources/{id}/schemas', - payload: 'body', }); registerOrgSourceSchemasRoute({ @@ -1102,7 +1090,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/org/settings/connectors', - payload: 'body', }); registerOrgSourceOauthConfigurationsRoute({ @@ -1133,7 +1120,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/org/settings/connectors', - payload: 'body', }); registerOrgSourceOauthConfigurationsRoute({ @@ -1187,7 +1173,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'post', path: '/api/workplace_search/org/settings/connectors/{serviceType}', - payload: 'body', }); registerOrgSourceOauthConfigurationRoute({ @@ -1218,7 +1203,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'put', path: '/api/workplace_search/org/settings/connectors/{serviceType}', - payload: 'body', }); registerOrgSourceOauthConfigurationRoute({ @@ -1272,7 +1256,6 @@ describe('sources routes', () => { mockRouter = new MockRouter({ method: 'get', path: '/api/workplace_search/sources/create', - payload: 'query', }); registerOauthConnectorParamsRoute({ diff --git a/x-pack/plugins/fleet/common/constants/agent_policy.ts b/x-pack/plugins/fleet/common/constants/agent_policy.ts index 363607aae2b46..96b6249585bfc 100644 --- a/x-pack/plugins/fleet/common/constants/agent_policy.ts +++ b/x-pack/plugins/fleet/common/constants/agent_policy.ts @@ -24,6 +24,7 @@ export const DEFAULT_AGENT_POLICY: Omit< status: agentPolicyStatuses.Active, package_policies: [], is_default: true, + is_managed: false, monitoring_enabled: ['logs', 'metrics'] as Array<'logs' | 'metrics'>, }; 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 5e86e8e6acb70..5f41b0f70ca74 100644 --- a/x-pack/plugins/fleet/common/types/models/agent_policy.ts +++ b/x-pack/plugins/fleet/common/types/models/agent_policy.ts @@ -17,6 +17,7 @@ export interface NewAgentPolicy { namespace: string; description?: string; is_default?: boolean; + is_managed?: boolean; // Optional when creating a policy monitoring_enabled?: Array>; } @@ -24,6 +25,7 @@ export interface AgentPolicy extends NewAgentPolicy { id: string; status: ValueOf; package_policies: string[] | PackagePolicy[]; + is_managed: boolean; // required for created policy updated_at: string; updated_by: string; revision: number; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.test.tsx index 30588c10178da..b60d3b5eb1f2d 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.test.tsx @@ -687,6 +687,7 @@ On Windows, the module was tested with Nginx installed from the Chocolatey repos 'e8a37031-2907-44f6-89d2-98bd493f60dc', ], is_default: true, + is_managed: false, monitoring_enabled: ['logs', 'metrics'], revision: 6, updated_at: '2020-12-09T13:46:31.840Z', @@ -701,6 +702,7 @@ On Windows, the module was tested with Nginx installed from the Chocolatey repos status: 'active', package_policies: ['e8a37031-2907-44f6-89d2-98bd493f60cd'], is_default: false, + is_managed: false, monitoring_enabled: ['logs', 'metrics'], revision: 2, updated_at: '2020-12-09T13:46:31.840Z', diff --git a/x-pack/plugins/fleet/server/errors/index.ts b/x-pack/plugins/fleet/server/errors/index.ts index ee30c01ac8eec..a903de0138039 100644 --- a/x-pack/plugins/fleet/server/errors/index.ts +++ b/x-pack/plugins/fleet/server/errors/index.ts @@ -32,3 +32,5 @@ export class PackageCacheError extends IngestManagerError {} export class PackageOperationNotSupportedError extends IngestManagerError {} export class FleetAdminUserInvalidError extends IngestManagerError {} export class ConcurrentInstallOperationError extends IngestManagerError {} +export class AgentReassignmentError extends IngestManagerError {} +export class AgentUnenrollmentError extends IngestManagerError {} 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 0365d9f5a29fe..614ccd8a26624 100644 --- a/x-pack/plugins/fleet/server/routes/agent/unenroll_handler.ts +++ b/x-pack/plugins/fleet/server/routes/agent/unenroll_handler.ts @@ -24,7 +24,7 @@ export const postAgentUnenrollHandler: RequestHandler< if (request.body?.force === true) { await AgentService.forceUnenrollAgent(soClient, esClient, request.params.agentId); } else { - await AgentService.unenrollAgent(soClient, request.params.agentId); + await AgentService.unenrollAgent(soClient, esClient, request.params.agentId); } const body: PostAgentUnenrollResponse = {}; diff --git a/x-pack/plugins/fleet/server/saved_objects/index.ts b/x-pack/plugins/fleet/server/saved_objects/index.ts index c61dd1b8e4a19..d50db8d9809f4 100644 --- a/x-pack/plugins/fleet/server/saved_objects/index.ts +++ b/x-pack/plugins/fleet/server/saved_objects/index.ts @@ -32,7 +32,7 @@ import { migrateSettingsToV7100, migrateAgentActionToV7100, } from './migrations/to_v7_10_0'; -import { migrateAgentToV7120 } from './migrations/to_v7_12_0'; +import { migrateAgentToV7120, migrateAgentPolicyToV7120 } from './migrations/to_v7_12_0'; /* * Saved object types and mappings @@ -161,6 +161,7 @@ const getSavedObjectTypes = ( description: { type: 'text' }, namespace: { type: 'keyword' }, is_default: { type: 'boolean' }, + is_managed: { type: 'boolean' }, status: { type: 'keyword' }, package_policies: { type: 'keyword' }, updated_at: { type: 'date' }, @@ -171,6 +172,7 @@ const getSavedObjectTypes = ( }, migrations: { '7.10.0': migrateAgentPolicyToV7100, + '7.12.0': migrateAgentPolicyToV7120, }, }, [ENROLLMENT_API_KEYS_SAVED_OBJECT_TYPE]: { diff --git a/x-pack/plugins/fleet/server/saved_objects/migrations/to_v7_12_0.ts b/x-pack/plugins/fleet/server/saved_objects/migrations/to_v7_12_0.ts index 1635f38cd5522..49a0d6fc7737f 100644 --- a/x-pack/plugins/fleet/server/saved_objects/migrations/to_v7_12_0.ts +++ b/x-pack/plugins/fleet/server/saved_objects/migrations/to_v7_12_0.ts @@ -5,8 +5,8 @@ * 2.0. */ -import { SavedObjectMigrationFn } from 'kibana/server'; -import { Agent } from '../../types'; +import type { SavedObjectMigrationFn } from 'kibana/server'; +import type { Agent, AgentPolicy } from '../../types'; export const migrateAgentToV7120: SavedObjectMigrationFn = ( agentDoc @@ -15,3 +15,14 @@ export const migrateAgentToV7120: SavedObjectMigrationFn, + AgentPolicy +> = (agentPolicyDoc) => { + const isV12 = 'is_managed' in agentPolicyDoc.attributes; + if (!isV12) { + agentPolicyDoc.attributes.is_managed = false; + } + return agentPolicyDoc; +}; 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 b70041e66dcd9..800d4f479bfde 100644 --- a/x-pack/plugins/fleet/server/services/agent_policy.test.ts +++ b/x-pack/plugins/fleet/server/services/agent_policy.test.ts @@ -8,17 +8,16 @@ import { elasticsearchServiceMock, savedObjectsClientMock } from 'src/core/server/mocks'; import { agentPolicyService } from './agent_policy'; import { agentPolicyUpdateEventHandler } from './agent_policy_update'; -import { Output } from '../types'; +import type { AgentPolicy, NewAgentPolicy, Output } from '../types'; function getSavedObjectMock(agentPolicyAttributes: any) { const mock = savedObjectsClientMock.create(); - mock.get.mockImplementation(async (type: string, id: string) => { return { type, id, references: [], - attributes: agentPolicyAttributes, + attributes: agentPolicyAttributes as AgentPolicy, }; }); mock.find.mockImplementation(async (options) => { @@ -69,10 +68,59 @@ function getAgentPolicyUpdateMock() { >; } +function getAgentPolicyCreateMock() { + const soClient = savedObjectsClientMock.create(); + soClient.create.mockImplementation(async (type, attributes) => { + return { + attributes: (attributes as unknown) as NewAgentPolicy, + id: 'mocked', + type: 'mocked', + references: [], + }; + }); + return soClient; +} describe('agent policy', () => { beforeEach(() => { getAgentPolicyUpdateMock().mockClear(); }); + + describe('create', () => { + it('is_managed present and false by default', async () => { + // ignore unrelated unique name constraint + agentPolicyService.requireUniqueName = async () => {}; + const soClient = getAgentPolicyCreateMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + + await expect( + agentPolicyService.create(soClient, esClient, { + name: 'No is_managed provided', + namespace: 'default', + }) + ).resolves.toHaveProperty('is_managed', false); + + const [, attributes] = soClient.create.mock.calls[0]; + expect(attributes).toHaveProperty('is_managed', false); + }); + + it('should set is_managed property, if given', async () => { + // ignore unrelated unique name constraint + agentPolicyService.requireUniqueName = async () => {}; + const soClient = getAgentPolicyCreateMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + await expect( + agentPolicyService.create(soClient, esClient, { + name: 'is_managed: true provided', + namespace: 'default', + is_managed: true, + }) + ).resolves.toHaveProperty('is_managed', true); + + const [, attributes] = soClient.create.mock.calls[0]; + expect(attributes).toHaveProperty('is_managed', true); + }); + }); + describe('bumpRevision', () => { it('should call agentPolicyUpdateEventHandler with updated event once', async () => { const soClient = getSavedObjectMock({ @@ -208,4 +256,37 @@ describe('agent policy', () => { }); }); }); + + describe('update', () => { + it('should update is_managed property, if given', async () => { + // ignore unrelated unique name constraint + agentPolicyService.requireUniqueName = async () => {}; + const soClient = savedObjectsClientMock.create(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + + soClient.get.mockResolvedValue({ + attributes: {}, + id: 'mocked', + type: 'mocked', + references: [], + }); + await agentPolicyService.update(soClient, esClient, 'mocked', { + name: 'mocked', + namespace: 'default', + is_managed: false, + }); + // soClient.update is called with updated values + let calledWith = soClient.update.mock.calls[0]; + expect(calledWith[2]).toHaveProperty('is_managed', false); + + await agentPolicyService.update(soClient, esClient, 'mocked', { + name: 'is_managed: true provided', + namespace: 'default', + is_managed: true, + }); + // soClient.update is called with updated values + calledWith = soClient.update.mock.calls[1]; + expect(calledWith[2]).toHaveProperty('is_managed', true); + }); + }); }); diff --git a/x-pack/plugins/fleet/server/services/agent_policy.ts b/x-pack/plugins/fleet/server/services/agent_policy.ts index 4a3319941b575..dfe5c19bc417b 100644 --- a/x-pack/plugins/fleet/server/services/agent_policy.ts +++ b/x-pack/plugins/fleet/server/services/agent_policy.ts @@ -140,6 +140,7 @@ class AgentPolicyService { SAVED_OBJECT_TYPE, { ...agentPolicy, + is_managed: agentPolicy.is_managed ?? false, revision: 1, updated_at: new Date().toISOString(), updated_by: options?.user?.username || 'system', diff --git a/x-pack/plugins/fleet/server/services/agents/crud.ts b/x-pack/plugins/fleet/server/services/agents/crud.ts index 9382a8bb61647..36506d0590595 100644 --- a/x-pack/plugins/fleet/server/services/agents/crud.ts +++ b/x-pack/plugins/fleet/server/services/agents/crud.ts @@ -12,7 +12,7 @@ import { AGENT_SAVED_OBJECT_TYPE } from '../../constants'; import { AgentSOAttributes, Agent, ListWithKuery } from '../../types'; import { escapeSearchQueryPhrase } from '../saved_object'; import { savedObjectToAgent } from './saved_objects'; -import { appContextService } from '../../services'; +import { appContextService, agentPolicyService } from '../../services'; import * as crudServiceSO from './crud_so'; import * as crudServiceFleetServer from './crud_fleet_server'; @@ -86,6 +86,22 @@ export async function getAgents(soClient: SavedObjectsClientContract, agentIds: return agents; } +export async function getAgentPolicyForAgent( + soClient: SavedObjectsClientContract, + esClient: ElasticsearchClient, + agentId: string +) { + const agent = await getAgent(soClient, esClient, agentId); + if (!agent.policy_id) { + return; + } + + const agentPolicy = await agentPolicyService.get(soClient, agent.policy_id, false); + if (agentPolicy) { + return agentPolicy; + } +} + export async function getAgentByAccessAPIKeyId( soClient: SavedObjectsClientContract, accessAPIKeyId: string diff --git a/x-pack/plugins/fleet/server/services/agents/reassign.test.ts b/x-pack/plugins/fleet/server/services/agents/reassign.test.ts new file mode 100644 index 0000000000000..7338c440483ea --- /dev/null +++ b/x-pack/plugins/fleet/server/services/agents/reassign.test.ts @@ -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 { elasticsearchServiceMock, savedObjectsClientMock } from 'src/core/server/mocks'; +import type { SavedObject } from 'kibana/server'; +import type { Agent, AgentPolicy } from '../../types'; +import { AgentReassignmentError } from '../../errors'; +import { reassignAgent, reassignAgents } from './reassign'; + +const agentInManagedSO = { + id: 'agent-in-managed-policy', + attributes: { policy_id: 'managed-agent-policy' }, +} as SavedObject; +const agentInManagedSO2 = { + id: 'agent-in-managed-policy2', + attributes: { policy_id: 'managed-agent-policy' }, +} as SavedObject; +const agentInUnmanagedSO = { + id: 'agent-in-unmanaged-policy', + attributes: { policy_id: 'unmanaged-agent-policy' }, +} as SavedObject; +const agentInUnmanagedSO2 = { + id: 'agent-in-unmanaged-policy2', + attributes: { policy_id: 'unmanaged-agent-policy' }, +} as SavedObject; +const unmanagedAgentPolicySO = { + id: 'unmanaged-agent-policy', + attributes: { is_managed: false }, +} as SavedObject; +const managedAgentPolicySO = { + id: 'managed-agent-policy', + attributes: { is_managed: true }, +} as SavedObject; + +describe('reassignAgent (singular)', () => { + it('can reassign from unmanaged policy to unmanaged', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + await reassignAgent(soClient, esClient, agentInUnmanagedSO.id, agentInUnmanagedSO2.id); + + // calls ES update with correct values + expect(soClient.update).toBeCalledTimes(1); + const calledWith = soClient.update.mock.calls[0]; + expect(calledWith[1]).toBe(agentInUnmanagedSO.id); + expect(calledWith[2]).toHaveProperty('policy_id', agentInUnmanagedSO2.id); + }); + + it('cannot reassign from unmanaged policy to managed', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + await expect( + reassignAgent( + soClient, + esClient, + agentInUnmanagedSO.id, + agentInManagedSO.attributes.policy_id! + ) + ).rejects.toThrowError(AgentReassignmentError); + + // does not call ES update + expect(soClient.update).toBeCalledTimes(0); + }); + + it('cannot reassign from managed policy', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + await expect( + reassignAgent(soClient, esClient, agentInManagedSO.id, agentInManagedSO2.id) + ).rejects.toThrowError(AgentReassignmentError); + // does not call ES update + expect(soClient.update).toBeCalledTimes(0); + + await expect( + reassignAgent(soClient, esClient, agentInManagedSO.id, agentInUnmanagedSO.id) + ).rejects.toThrowError(AgentReassignmentError); + // does not call ES update + expect(soClient.update).toBeCalledTimes(0); + }); +}); + +describe('reassignAgents (plural)', () => { + it('agents in managed policies are not updated', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + const idsToReassign = [agentInUnmanagedSO.id, agentInManagedSO.id, agentInUnmanagedSO.id]; + await reassignAgents(soClient, esClient, { agentIds: idsToReassign }, agentInUnmanagedSO.id); + + // calls ES update with correct values + const calledWith = soClient.bulkUpdate.mock.calls[0][0]; + const expectedResults = [agentInUnmanagedSO.id, agentInUnmanagedSO.id]; + expect(calledWith.length).toBe(expectedResults.length); // only 2 are unmanaged + expect(calledWith.map(({ id }) => id)).toEqual(expectedResults); + }); +}); + +function createClientMock() { + const soClientMock = savedObjectsClientMock.create(); + + // need to mock .create & bulkCreate due to (bulk)createAgentAction(s) in reassignAgent(s) + soClientMock.create.mockResolvedValue(agentInUnmanagedSO); + soClientMock.bulkCreate.mockImplementation(async ([{ type, attributes }]) => { + return { + saved_objects: [await soClientMock.create(type, attributes)], + }; + }); + + soClientMock.get.mockImplementation(async (_, id) => { + switch (id) { + case unmanagedAgentPolicySO.id: + return unmanagedAgentPolicySO; + case managedAgentPolicySO.id: + return managedAgentPolicySO; + case agentInManagedSO.id: + return agentInManagedSO; + case agentInUnmanagedSO.id: + default: + return agentInUnmanagedSO; + } + }); + + soClientMock.bulkGet.mockImplementation(async (options) => { + return { + saved_objects: await Promise.all(options!.map(({ type, id }) => soClientMock.get(type, id))), + }; + }); + + return soClientMock; +} diff --git a/x-pack/plugins/fleet/server/services/agents/reassign.ts b/x-pack/plugins/fleet/server/services/agents/reassign.ts index fbd91c05dfb4a..9f4373ab553ec 100644 --- a/x-pack/plugins/fleet/server/services/agents/reassign.ts +++ b/x-pack/plugins/fleet/server/services/agents/reassign.ts @@ -5,12 +5,13 @@ * 2.0. */ -import { SavedObjectsClientContract, ElasticsearchClient } from 'kibana/server'; +import type { SavedObjectsClientContract, ElasticsearchClient } from 'kibana/server'; import Boom from '@hapi/boom'; import { AGENT_SAVED_OBJECT_TYPE } from '../../constants'; -import { AgentSOAttributes } from '../../types'; +import type { AgentSOAttributes } from '../../types'; +import { AgentReassignmentError } from '../../errors'; import { agentPolicyService } from '../agent_policy'; -import { getAgents, listAllAgents } from './crud'; +import { getAgentPolicyForAgent, getAgents, listAllAgents } from './crud'; import { createAgentAction, bulkCreateAgentActions } from './actions'; export async function reassignAgent( @@ -19,11 +20,13 @@ export async function reassignAgent( agentId: string, newAgentPolicyId: string ) { - const agentPolicy = await agentPolicyService.get(soClient, newAgentPolicyId); - if (!agentPolicy) { + const newAgentPolicy = await agentPolicyService.get(soClient, newAgentPolicyId); + if (!newAgentPolicy) { throw Boom.notFound(`Agent policy not found: ${newAgentPolicyId}`); } + await reassignAgentIsAllowed(soClient, esClient, agentId, newAgentPolicyId); + await soClient.update(AGENT_SAVED_OBJECT_TYPE, agentId, { policy_id: newAgentPolicyId, policy_revision: null, @@ -36,6 +39,29 @@ export async function reassignAgent( }); } +export async function reassignAgentIsAllowed( + soClient: SavedObjectsClientContract, + esClient: ElasticsearchClient, + agentId: string, + newAgentPolicyId: string +) { + const agentPolicy = await getAgentPolicyForAgent(soClient, esClient, agentId); + if (agentPolicy?.is_managed) { + throw new AgentReassignmentError( + `Cannot reassign an agent from managed agent policy ${agentPolicy.id}` + ); + } + + const newAgentPolicy = await agentPolicyService.get(soClient, newAgentPolicyId); + if (newAgentPolicy?.is_managed) { + throw new AgentReassignmentError( + `Cannot reassign an agent to managed agent policy ${newAgentPolicy.id}` + ); + } + + return true; +} + export async function reassignAgents( soClient: SavedObjectsClientContract, esClient: ElasticsearchClient, @@ -63,7 +89,15 @@ export async function reassignAgents( showInactive: false, }) ).agents; - const agentsToUpdate = agents.filter((agent) => agent.policy_id !== newAgentPolicyId); + // And which are allowed to unenroll + const settled = await Promise.allSettled( + agents.map((agent) => + reassignAgentIsAllowed(soClient, esClient, agent.id, newAgentPolicyId).then((_) => agent) + ) + ); + const agentsToUpdate = agents.filter( + (agent, index) => settled[index].status === 'fulfilled' && agent.policy_id !== newAgentPolicyId + ); // Update the necessary agents const res = await soClient.bulkUpdate( diff --git a/x-pack/plugins/fleet/server/services/agents/unenroll.test.ts b/x-pack/plugins/fleet/server/services/agents/unenroll.test.ts new file mode 100644 index 0000000000000..b8c1b7befb443 --- /dev/null +++ b/x-pack/plugins/fleet/server/services/agents/unenroll.test.ts @@ -0,0 +1,125 @@ +/* + * 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 { elasticsearchServiceMock, savedObjectsClientMock } from 'src/core/server/mocks'; +import type { SavedObject } from 'kibana/server'; +import type { Agent, AgentPolicy } from '../../types'; +import { AgentUnenrollmentError } from '../../errors'; +import { unenrollAgent, unenrollAgents } from './unenroll'; + +const agentInManagedSO = { + id: 'agent-in-managed-policy', + attributes: { policy_id: 'managed-agent-policy' }, +} as SavedObject; +const agentInUnmanagedSO = { + id: 'agent-in-unmanaged-policy', + attributes: { policy_id: 'unmanaged-agent-policy' }, +} as SavedObject; +const agentInUnmanagedSO2 = { + id: 'agent-in-unmanaged-policy2', + attributes: { policy_id: 'unmanaged-agent-policy' }, +} as SavedObject; +const unmanagedAgentPolicySO = { + id: 'unmanaged-agent-policy', + attributes: { is_managed: false }, +} as SavedObject; +const managedAgentPolicySO = { + id: 'managed-agent-policy', + attributes: { is_managed: true }, +} as SavedObject; + +describe('unenrollAgent (singular)', () => { + it('can unenroll from unmanaged policy', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + await unenrollAgent(soClient, esClient, agentInUnmanagedSO.id); + + // calls ES update with correct values + expect(soClient.update).toBeCalledTimes(1); + const calledWith = soClient.update.mock.calls[0]; + expect(calledWith[1]).toBe(agentInUnmanagedSO.id); + expect(calledWith[2]).toHaveProperty('unenrollment_started_at'); + }); + + it('cannot unenroll from managed policy', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + await expect(unenrollAgent(soClient, esClient, agentInManagedSO.id)).rejects.toThrowError( + AgentUnenrollmentError + ); + // does not call ES update + expect(soClient.update).toBeCalledTimes(0); + }); +}); + +describe('unenrollAgents (plural)', () => { + it('can unenroll from an unmanaged policy', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + const idsToUnenroll = [agentInUnmanagedSO.id, agentInUnmanagedSO2.id]; + await unenrollAgents(soClient, esClient, { agentIds: idsToUnenroll }); + + // calls ES update with correct values + const calledWith = soClient.bulkUpdate.mock.calls[0][0]; + expect(calledWith.length).toBe(idsToUnenroll.length); + expect(calledWith.map(({ id }) => id)).toEqual(idsToUnenroll); + for (const params of calledWith) { + expect(params.attributes).toHaveProperty('unenrollment_started_at'); + } + }); + it('cannot unenroll from a managed policy', async () => { + const soClient = createClientMock(); + const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser; + const idsToUnenroll = [agentInUnmanagedSO.id, agentInManagedSO.id, agentInUnmanagedSO2.id]; + await unenrollAgents(soClient, esClient, { agentIds: idsToUnenroll }); + + // calls ES update with correct values + const calledWith = soClient.bulkUpdate.mock.calls[0][0]; + const onlyUnmanaged = [agentInUnmanagedSO.id, agentInUnmanagedSO2.id]; + expect(calledWith.length).toBe(onlyUnmanaged.length); + expect(calledWith.map(({ id }) => id)).toEqual(onlyUnmanaged); + for (const params of calledWith) { + expect(params.attributes).toHaveProperty('unenrollment_started_at'); + } + }); +}); + +function createClientMock() { + const soClientMock = savedObjectsClientMock.create(); + + // need to mock .create & bulkCreate due to (bulk)createAgentAction(s) in unenrollAgent(s) + soClientMock.create.mockResolvedValue(agentInUnmanagedSO); + soClientMock.bulkCreate.mockImplementation(async ([{ type, attributes }]) => { + return { + saved_objects: [await soClientMock.create(type, attributes)], + }; + }); + + soClientMock.get.mockImplementation(async (_, id) => { + switch (id) { + case unmanagedAgentPolicySO.id: + return unmanagedAgentPolicySO; + case managedAgentPolicySO.id: + return managedAgentPolicySO; + case agentInManagedSO.id: + return agentInManagedSO; + case agentInUnmanagedSO2.id: + return agentInUnmanagedSO2; + case agentInUnmanagedSO.id: + default: + return agentInUnmanagedSO; + } + }); + + soClientMock.bulkGet.mockImplementation(async (options) => { + return { + saved_objects: await Promise.all(options!.map(({ type, id }) => soClientMock.get(type, id))), + }; + }); + + return soClientMock; +} diff --git a/x-pack/plugins/fleet/server/services/agents/unenroll.ts b/x-pack/plugins/fleet/server/services/agents/unenroll.ts index a20b742d1425e..e2fa83cf32b63 100644 --- a/x-pack/plugins/fleet/server/services/agents/unenroll.ts +++ b/x-pack/plugins/fleet/server/services/agents/unenroll.ts @@ -4,16 +4,36 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - -import { ElasticsearchClient, SavedObjectsClientContract } from 'src/core/server'; -import { AgentSOAttributes } from '../../types'; +import type { ElasticsearchClient, SavedObjectsClientContract } from 'src/core/server'; +import type { AgentSOAttributes } from '../../types'; +import { AgentUnenrollmentError } from '../../errors'; import { AGENT_SAVED_OBJECT_TYPE } from '../../constants'; -import { getAgent } from './crud'; import * as APIKeyService from '../api_keys'; import { createAgentAction, bulkCreateAgentActions } from './actions'; -import { getAgents, listAllAgents } from './crud'; +import { getAgent, getAgentPolicyForAgent, getAgents, listAllAgents } from './crud'; + +async function unenrollAgentIsAllowed( + soClient: SavedObjectsClientContract, + esClient: ElasticsearchClient, + agentId: string +) { + const agentPolicy = await getAgentPolicyForAgent(soClient, esClient, agentId); + if (agentPolicy?.is_managed) { + throw new AgentUnenrollmentError( + `Cannot unenroll ${agentId} from a managed agent policy ${agentPolicy.id}` + ); + } + + return true; +} + +export async function unenrollAgent( + soClient: SavedObjectsClientContract, + esClient: ElasticsearchClient, + agentId: string +) { + await unenrollAgentIsAllowed(soClient, esClient, agentId); -export async function unenrollAgent(soClient: SavedObjectsClientContract, agentId: string) { const now = new Date().toISOString(); await createAgentAction(soClient, { agent_id: agentId, @@ -36,7 +56,6 @@ export async function unenrollAgents( kuery: string; } ) { - // Filter to agents that do not already unenrolled, or unenrolling const agents = 'agentIds' in options ? await getAgents(soClient, options.agentIds) @@ -46,9 +65,19 @@ export async function unenrollAgents( showInactive: false, }) ).agents; - const agentsToUpdate = agents.filter( + + // Filter to agents that are not already unenrolled, or unenrolling + const agentsEnrolled = agents.filter( (agent) => !agent.unenrollment_started_at && !agent.unenrolled_at ); + // And which are allowed to unenroll + const settled = 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(); // Create unenroll action for each agent diff --git a/x-pack/plugins/fleet/server/services/agents/update.ts b/x-pack/plugins/fleet/server/services/agents/update.ts index f6b4b44004761..21087be392bcd 100644 --- a/x-pack/plugins/fleet/server/services/agents/update.ts +++ b/x-pack/plugins/fleet/server/services/agents/update.ts @@ -29,7 +29,7 @@ export async function unenrollForAgentPolicyId( hasMore = false; } for (const agent of agents) { - await unenrollAgent(soClient, agent.id); + await unenrollAgent(soClient, esClient, agent.id); } } } diff --git a/x-pack/plugins/fleet/server/types/models/agent_policy.ts b/x-pack/plugins/fleet/server/types/models/agent_policy.ts index 209bfb4b7398a..5891320c2544b 100644 --- a/x-pack/plugins/fleet/server/types/models/agent_policy.ts +++ b/x-pack/plugins/fleet/server/types/models/agent_policy.ts @@ -13,6 +13,7 @@ const AgentPolicyBaseSchema = { name: schema.string({ minLength: 1 }), namespace: NamespaceSchema, description: schema.maybe(schema.string()), + is_managed: schema.maybe(schema.boolean()), monitoring_enabled: schema.maybe( schema.arrayOf( schema.oneOf([schema.literal(dataTypes.Logs), schema.literal(dataTypes.Metrics)]) @@ -27,6 +28,7 @@ export const NewAgentPolicySchema = schema.object({ export const AgentPolicySchema = schema.object({ ...AgentPolicyBaseSchema, id: schema.string(), + is_managed: schema.boolean(), status: schema.oneOf([ schema.literal(agentPolicyStatuses.Active), schema.literal(agentPolicyStatuses.Inactive), diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap b/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap index a4eb99a972b9b..d69af298018e7 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap +++ b/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap @@ -93,6 +93,15 @@ exports[`DatatableComponent it renders actions column when there are row actions "onClick": [Function], "size": "xs", }, + Object { + "color": "text", + "data-test-subj": "lensDatatableHide", + "iconType": "eyeClosed", + "isDisabled": false, + "label": "Hide", + "onClick": [Function], + "size": "xs", + }, ], "showHide": false, "showMoveLeft": false, @@ -121,6 +130,15 @@ exports[`DatatableComponent it renders actions column when there are row actions "onClick": [Function], "size": "xs", }, + Object { + "color": "text", + "data-test-subj": "lensDatatableHide", + "iconType": "eyeClosed", + "isDisabled": false, + "label": "Hide", + "onClick": [Function], + "size": "xs", + }, ], "showHide": false, "showMoveLeft": false, @@ -149,6 +167,15 @@ exports[`DatatableComponent it renders actions column when there are row actions "onClick": [Function], "size": "xs", }, + Object { + "color": "text", + "data-test-subj": "lensDatatableHide", + "iconType": "eyeClosed", + "isDisabled": false, + "label": "Hide", + "onClick": [Function], + "size": "xs", + }, ], "showHide": false, "showMoveLeft": false, @@ -288,6 +315,15 @@ exports[`DatatableComponent it renders the title and value 1`] = ` "onClick": [Function], "size": "xs", }, + Object { + "color": "text", + "data-test-subj": "lensDatatableHide", + "iconType": "eyeClosed", + "isDisabled": false, + "label": "Hide", + "onClick": [Function], + "size": "xs", + }, ], "showHide": false, "showMoveLeft": false, @@ -316,6 +352,15 @@ exports[`DatatableComponent it renders the title and value 1`] = ` "onClick": [Function], "size": "xs", }, + Object { + "color": "text", + "data-test-subj": "lensDatatableHide", + "iconType": "eyeClosed", + "isDisabled": false, + "label": "Hide", + "onClick": [Function], + "size": "xs", + }, ], "showHide": false, "showMoveLeft": false, @@ -344,6 +389,15 @@ exports[`DatatableComponent it renders the title and value 1`] = ` "onClick": [Function], "size": "xs", }, + Object { + "color": "text", + "data-test-subj": "lensDatatableHide", + "iconType": "eyeClosed", + "isDisabled": false, + "label": "Hide", + "onClick": [Function], + "size": "xs", + }, ], "showHide": false, "showMoveLeft": false, diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx index 366e002f50cd8..5ff1e84276ba7 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { EuiDataGridColumn, EuiDataGridColumnCellActionProps } from '@elastic/eui'; import type { Datatable, DatatableColumnMeta } from 'src/plugins/expressions'; import type { FormatFactory } from '../../types'; -import type { DatatableColumns } from './types'; +import { ColumnConfig } from './table_basic'; export const createGridColumns = ( bucketColumns: string[], @@ -23,10 +23,11 @@ export const createGridColumns = ( negate?: boolean ) => void, isReadOnly: boolean, - columnConfig: DatatableColumns & { type: 'lens_datatable_columns' }, + columnConfig: ColumnConfig, visibleColumns: string[], formatFactory: FormatFactory, - onColumnResize: (eventData: { columnId: string; width: number | undefined }) => void + onColumnResize: (eventData: { columnId: string; width: number | undefined }) => void, + onColumnHide: (eventData: { columnId: string }) => void ) => { const columnsReverseLookup = table.columns.reduce< Record @@ -134,8 +135,9 @@ export const createGridColumns = ( ] : undefined; - const initialWidth = columnConfig.columnWidth?.find(({ columnId }) => columnId === field) - ?.width; + const column = columnConfig.columns.find(({ columnId }) => columnId === field); + const initialWidth = column?.width; + const isHidden = column?.hidden; const columnDefinition: EuiDataGridColumn = { id: field, @@ -174,6 +176,17 @@ export const createGridColumns = ( 'data-test-subj': 'lensDatatableResetWidth', isDisabled: initialWidth == null, }, + { + color: 'text', + size: 'xs', + onClick: () => onColumnHide({ columnId: field }), + iconType: 'eyeClosed', + label: i18n.translate('xpack.lens.table.hide.hideLabel', { + defaultMessage: 'Hide', + }), + 'data-test-subj': 'lensDatatableHide', + isDisabled: !isHidden && visibleColumns.length <= 1, + }, ], }, }; diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/constants.ts b/x-pack/plugins/lens/public/datatable_visualization/components/constants.ts index db72f8a4e4a92..84ee4f0e8a18e 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/constants.ts +++ b/x-pack/plugins/lens/public/datatable_visualization/components/constants.ts @@ -7,3 +7,4 @@ export const LENS_EDIT_SORT_ACTION = 'sort'; export const LENS_EDIT_RESIZE_ACTION = 'resize'; +export const LENS_TOGGLE_ACTION = 'toggle'; diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx new file mode 100644 index 0000000000000..008b805bc8fed --- /dev/null +++ b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx @@ -0,0 +1,61 @@ +/* + * 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 { EuiSwitch, EuiFormRow } from '@elastic/eui'; +import { VisualizationDimensionEditorProps } from '../../types'; +import { DatatableVisualizationState } from '../visualization'; + +export function TableDimensionEditor( + props: VisualizationDimensionEditorProps +) { + const { state, setState, accessor } = props; + const column = state.columns.find((c) => c.columnId === accessor); + + const visibleColumnsCount = state.columns.filter((c) => !c.hidden).length; + + if (!column) { + return null; + } + + return ( + + ); +} diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.test.ts b/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.test.ts index b0b7d46e4c3b7..68416ac9a60aa 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.test.ts +++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.test.ts @@ -14,17 +14,19 @@ import { createGridFilterHandler, createGridResizeHandler, createGridSortingConfig, + createGridHideHandler, } from './table_actions'; -import { DatatableColumns, LensGridDirection } from './types'; +import { LensGridDirection } from './types'; +import { ColumnConfig } from './table_basic'; -function getDefaultConfig(): DatatableColumns & { - type: 'lens_datatable_columns'; -} { +function getDefaultConfig(): ColumnConfig { return { - columnIds: [], - sortBy: '', - sortDirection: 'none', - type: 'lens_datatable_columns', + columns: [ + { columnId: 'a', type: 'lens_datatable_column' }, + { columnId: 'b', type: 'lens_datatable_column' }, + ], + sortingColumnId: '', + sortingDirection: 'none', }; } @@ -207,7 +209,13 @@ describe('Table actions', () => { expect(setColumnConfig).toHaveBeenCalledWith({ ...columnConfig, - columnWidth: [{ columnId: 'a', width: 100, type: 'lens_datatable_column_width' }], + columns: [ + { columnId: 'a', width: 100, type: 'lens_datatable_column' }, + { + columnId: 'b', + type: 'lens_datatable_column', + }, + ], }); expect(onEditAction).toHaveBeenCalledWith({ action: 'resize', columnId: 'a', width: 100 }); @@ -215,16 +223,14 @@ describe('Table actions', () => { it('should pull out the table custom width from the local state when passing undefined', () => { const columnConfig = getDefaultConfig(); - columnConfig.columnWidth = [ - { columnId: 'a', width: 100, type: 'lens_datatable_column_width' }, - ]; + columnConfig.columns = [{ columnId: 'a', width: 100, type: 'lens_datatable_column' }]; const resizer = createGridResizeHandler(columnConfig, setColumnConfig, onEditAction); resizer({ columnId: 'a', width: undefined }); expect(setColumnConfig).toHaveBeenCalledWith({ ...columnConfig, - columnWidth: [], + columns: [{ columnId: 'a', width: undefined, type: 'lens_datatable_column' }], }); expect(onEditAction).toHaveBeenCalledWith({ @@ -234,4 +240,23 @@ describe('Table actions', () => { }); }); }); + describe('Column hiding', () => { + const setColumnConfig = jest.fn(); + + it('should allow to hide column', () => { + const columnConfig = getDefaultConfig(); + const hiding = createGridHideHandler(columnConfig, setColumnConfig, onEditAction); + hiding({ columnId: 'a' }); + + expect(setColumnConfig).toHaveBeenCalledWith({ + ...columnConfig, + columns: [ + { columnId: 'a', hidden: true, type: 'lens_datatable_column' }, + { columnId: 'b', type: 'lens_datatable_column' }, + ], + }); + + expect(onEditAction).toHaveBeenCalledWith({ action: 'toggle', columnId: 'a' }); + }); + }); }); diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts b/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts index ca4ec7f3a8d0c..4f0271b758ffb 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts +++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts @@ -9,43 +9,30 @@ import type { EuiDataGridSorting } from '@elastic/eui'; import type { Datatable } from 'src/plugins/expressions'; import type { LensFilterEvent } from '../../types'; import type { - DatatableColumns, LensGridDirection, LensResizeAction, LensSortAction, + LensToggleAction, } from './types'; +import { ColumnConfig } from './table_basic'; import { desanitizeFilterContext } from '../../utils'; export const createGridResizeHandler = ( - columnConfig: DatatableColumns & { - type: 'lens_datatable_columns'; - }, - setColumnConfig: React.Dispatch< - React.SetStateAction< - DatatableColumns & { - type: 'lens_datatable_columns'; - } - > - >, + columnConfig: ColumnConfig, + setColumnConfig: React.Dispatch>, onEditAction: (data: LensResizeAction['data']) => void ) => (eventData: { columnId: string; width: number | undefined }) => { // directly set the local state of the component to make sure the visualization re-renders immediately, // re-layouting and taking up all of the available space. setColumnConfig({ ...columnConfig, - columnWidth: [ - ...(columnConfig.columnWidth || []).filter(({ columnId }) => columnId !== eventData.columnId), - ...(eventData.width !== undefined - ? [ - { - columnId: eventData.columnId, - width: eventData.width, - type: 'lens_datatable_column_width' as const, - }, - ] - : []), - ], + columns: columnConfig.columns.map((column) => { + if (column.columnId === eventData.columnId) { + return { ...column, width: eventData.width }; + } + return column; + }), }); return onEditAction({ action: 'resize', @@ -54,6 +41,27 @@ export const createGridResizeHandler = ( }); }; +export const createGridHideHandler = ( + columnConfig: ColumnConfig, + setColumnConfig: React.Dispatch>, + onEditAction: (data: LensToggleAction['data']) => void +) => (eventData: { columnId: string }) => { + // directly set the local state of the component to make sure the visualization re-renders immediately + setColumnConfig({ + ...columnConfig, + columns: columnConfig.columns.map((column) => { + if (column.columnId === eventData.columnId) { + return { ...column, hidden: true }; + } + return column; + }), + }); + return onEditAction({ + action: 'toggle', + columnId: eventData.columnId, + }); +}; + export const createGridFilterHandler = ( tableRef: React.MutableRefObject, onClickValue: (data: LensFilterEvent['data']) => void @@ -85,7 +93,7 @@ export const createGridFilterHandler = ( }; export const createGridSortingConfig = ( - sortBy: string, + sortBy: string | undefined, sortDirection: LensGridDirection, onEditAction: (data: LensSortAction['data']) => void ): EuiDataGridSorting => ({ diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx index 6935e8313afb0..588340fbe97fa 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx @@ -65,12 +65,13 @@ function sampleArgs() { const args: DatatableProps['args'] = { title: 'My fanci metric chart', - columns: { - columnIds: ['a', 'b', 'c'], - sortBy: '', - sortDirection: 'none', - type: 'lens_datatable_columns', - }, + columns: [ + { columnId: 'a', type: 'lens_datatable_column' }, + { columnId: 'b', type: 'lens_datatable_column' }, + { columnId: 'c', type: 'lens_datatable_column' }, + ], + sortingColumnId: '', + sortingDirection: 'none', }; return { data, args }; @@ -160,6 +161,8 @@ describe('DatatableComponent', () => { /> ); + wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus'); + wrapper.find('[data-test-subj="lensDatatableFilterOut"]').first().simulate('click'); expect(onDispatchEvent).toHaveBeenCalledWith({ @@ -199,7 +202,9 @@ describe('DatatableComponent', () => { /> ); - wrapper.find('[data-test-subj="lensDatatableFilterFor"]').at(3).simulate('click'); + wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('focus'); + + wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click'); expect(onDispatchEvent).toHaveBeenCalledWith({ name: 'filter', @@ -252,12 +257,12 @@ describe('DatatableComponent', () => { const args: DatatableProps['args'] = { title: '', - columns: { - columnIds: ['a', 'b'], - sortBy: '', - sortDirection: 'none', - type: 'lens_datatable_columns', - }, + columns: [ + { columnId: 'a', type: 'lens_datatable_column' }, + { columnId: 'b', type: 'lens_datatable_column' }, + ], + sortingColumnId: '', + sortingDirection: 'none', }; const wrapper = mountWithIntl( @@ -277,7 +282,9 @@ describe('DatatableComponent', () => { /> ); - wrapper.find('[data-test-subj="lensDatatableFilterFor"]').at(1).simulate('click'); + wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('focus'); + + wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click'); expect(onDispatchEvent).toHaveBeenCalledWith({ name: 'filter', @@ -331,11 +338,8 @@ describe('DatatableComponent', () => { data={data} args={{ ...args, - columns: { - ...args.columns, - sortBy: 'b', - sortDirection: 'desc', - }, + sortingColumnId: 'b', + sortingDirection: 'desc', }} formatFactory={() => ({ convert: (x) => x } as IFieldFormat)} dispatchEvent={onDispatchEvent} @@ -382,11 +386,8 @@ describe('DatatableComponent', () => { data={data} args={{ ...args, - columns: { - ...args.columns, - sortBy: 'b', - sortDirection: 'desc', - }, + sortingColumnId: 'b', + sortingDirection: 'desc', }} formatFactory={() => ({ convert: (x) => x } as IFieldFormat)} dispatchEvent={onDispatchEvent} @@ -400,6 +401,32 @@ describe('DatatableComponent', () => { ]); }); + test('it does not render a hidden column', () => { + const { data, args } = sampleArgs(); + + const wrapper = mountWithIntl( + ({ convert: (x) => x } as IFieldFormat)} + dispatchEvent={onDispatchEvent} + getType={jest.fn()} + renderMode="display" + /> + ); + + expect(wrapper.find(EuiDataGrid).prop('columns')!.length).toEqual(2); + }); + test('it should refresh the table header when the datatable data changes', () => { const { data, args } = sampleArgs(); diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx index b4852895a1e20..f685990f12dd2 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx @@ -22,17 +22,20 @@ import { FormatFactory, LensFilterEvent, LensTableRowContextMenuEvent } from '.. import { VisualizationContainer } from '../../visualization_container'; import { EmptyPlaceholder } from '../../shared_components'; import { LensIconChartDatatable } from '../../assets/chart_datatable'; +import { ColumnState } from '../visualization'; import { DataContextType, DatatableRenderProps, LensSortAction, LensResizeAction, LensGridDirection, + LensToggleAction, } from './types'; import { createGridColumns } from './columns'; import { createGridCell } from './cell_value'; import { createGridFilterHandler, + createGridHideHandler, createGridResizeHandler, createGridSortingConfig, } from './table_actions'; @@ -44,15 +47,33 @@ const gridStyle: EuiDataGridStyle = { header: 'underline', }; +export interface ColumnConfig { + columns: Array< + ColumnState & { + type: 'lens_datatable_column'; + } + >; + sortingColumnId: string | undefined; + sortingDirection: LensGridDirection; +} + export const DatatableComponent = (props: DatatableRenderProps) => { const [firstTable] = Object.values(props.data.tables); - const [columnConfig, setColumnConfig] = useState(props.args.columns); + const [columnConfig, setColumnConfig] = useState({ + columns: props.args.columns, + sortingColumnId: props.args.sortingColumnId, + sortingDirection: props.args.sortingDirection, + }); const [firstLocalTable, updateTable] = useState(firstTable); useDeepCompareEffect(() => { - setColumnConfig(props.args.columns); - }, [props.args.columns]); + setColumnConfig({ + columns: props.args.columns, + sortingColumnId: props.args.sortingColumnId, + sortingDirection: props.args.sortingDirection, + }); + }, [props.args.columns, props.args.sortingColumnId, props.args.sortingDirection]); useDeepCompareEffect(() => { updateTable(firstTable); @@ -85,7 +106,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => { ); const onEditAction = useCallback( - (data: LensSortAction['data'] | LensResizeAction['data']) => { + (data: LensSortAction['data'] | LensResizeAction['data'] | LensToggleAction['data']) => { if (renderMode === 'edit') { dispatchEvent({ name: 'edit', data }); } @@ -106,13 +127,15 @@ export const DatatableComponent = (props: DatatableRenderProps) => { const bucketColumns = useMemo( () => - columnConfig.columnIds.filter((_colId, index) => { - const col = firstTableRef.current.columns[index]; - return ( - col?.meta?.sourceParams?.type && - getType(col.meta.sourceParams.type as string)?.type === 'buckets' - ); - }), + columnConfig.columns + .filter((_col, index) => { + const col = firstTableRef.current.columns[index]; + return ( + col?.meta?.sourceParams?.type && + getType(col.meta.sourceParams.type as string)?.type === 'buckets' + ); + }) + .map((col) => col.columnId), [firstTableRef, columnConfig, getType] ); @@ -121,11 +144,15 @@ export const DatatableComponent = (props: DatatableRenderProps) => { (bucketColumns.length && firstTable.rows.every((row) => bucketColumns.every((col) => row[col] == null))); - const visibleColumns = useMemo(() => columnConfig.columnIds.filter((field) => !!field), [ - columnConfig, - ]); + const visibleColumns = useMemo( + () => + columnConfig.columns + .filter((col) => !!col.columnId && !col.hidden) + .map((col) => col.columnId), + [columnConfig] + ); - const { sortBy, sortDirection } = columnConfig; + const { sortingColumnId: sortBy, sortingDirection: sortDirection } = props.args; const isReadOnlySorted = renderMode !== 'edit'; @@ -134,6 +161,11 @@ export const DatatableComponent = (props: DatatableRenderProps) => { [onEditAction, setColumnConfig, columnConfig] ); + const onColumnHide = useMemo( + () => createGridHideHandler(columnConfig, setColumnConfig, onEditAction), + [onEditAction, setColumnConfig, columnConfig] + ); + const columns: EuiDataGridColumn[] = useMemo( () => createGridColumns( @@ -144,7 +176,8 @@ export const DatatableComponent = (props: DatatableRenderProps) => { columnConfig, visibleColumns, formatFactory, - onColumnResize + onColumnResize, + onColumnHide ), [ bucketColumns, @@ -155,6 +188,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => { visibleColumns, formatFactory, onColumnResize, + onColumnHide, ] ); @@ -184,7 +218,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => { onRowContextMenuClick({ rowIndex, table: firstTableRef.current, - columns: columnConfig.columnIds, + columns: columnConfig.columns.map((col) => col.columnId), }); }} /> diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/types.ts b/x-pack/plugins/lens/public/datatable_visualization/components/types.ts index e2cc1daf0f900..8a280b3d15bca 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/types.ts +++ b/x-pack/plugins/lens/public/datatable_visualization/components/types.ts @@ -10,7 +10,7 @@ import type { IAggType } from 'src/plugins/data/public'; import type { Datatable, RenderMode } from 'src/plugins/expressions'; import type { FormatFactory, ILensInterpreterRenderHandlers, LensEditEvent } from '../../types'; import type { DatatableProps } from '../expression'; -import { LENS_EDIT_SORT_ACTION, LENS_EDIT_RESIZE_ACTION } from './constants'; +import { LENS_EDIT_SORT_ACTION, LENS_EDIT_RESIZE_ACTION, LENS_TOGGLE_ACTION } from './constants'; export type LensGridDirection = 'none' | Direction; @@ -24,24 +24,13 @@ export interface LensResizeActionData { width: number | undefined; } -export type LensSortAction = LensEditEvent; -export type LensResizeAction = LensEditEvent; - -export interface DatatableColumns { - columnIds: string[]; - sortBy: string; - sortDirection: string; - columnWidth?: DatatableColumnWidthResult[]; -} - -export interface DatatableColumnWidth { +export interface LensToggleActionData { columnId: string; - width: number; } -export type DatatableColumnWidthResult = DatatableColumnWidth & { - type: 'lens_datatable_column_width'; -}; +export type LensSortAction = LensEditEvent; +export type LensResizeAction = LensEditEvent; +export type LensToggleAction = LensEditEvent; export type DatatableRenderProps = DatatableProps & { formatFactory: FormatFactory; diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx index 5e51cb2c93c7c..3ee41d4e9aeed 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx @@ -59,12 +59,22 @@ function sampleArgs() { const args: DatatableProps['args'] = { title: 'My fanci metric chart', - columns: { - columnIds: ['a', 'b', 'c'], - sortBy: '', - sortDirection: 'none', - type: 'lens_datatable_columns', - }, + columns: [ + { + columnId: 'a', + type: 'lens_datatable_column', + }, + { + columnId: 'b', + type: 'lens_datatable_column', + }, + { + columnId: 'c', + type: 'lens_datatable_column', + }, + ], + sortingColumnId: '', + sortingDirection: 'none', }; return { data, args }; diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx index 82964a03e29e5..7ead7be67947c 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx @@ -19,19 +19,17 @@ import type { import { getSortingCriteria } from './sorting'; import { DatatableComponent } from './components/table_basic'; +import { ColumnState } from './visualization'; import type { FormatFactory, ILensInterpreterRenderHandlers, LensMultiTable } from '../types'; -import type { - DatatableRender, - DatatableColumns, - DatatableColumnWidth, - DatatableColumnWidthResult, -} from './components/types'; +import type { DatatableRender } from './components/types'; interface Args { title: string; description?: string; - columns: DatatableColumns & { type: 'lens_datatable_columns' }; + columns: Array; + sortingColumnId: string | undefined; + sortingDirection: 'asc' | 'desc' | 'none'; } export interface DatatableProps { @@ -66,7 +64,16 @@ export const getDatatable = ({ help: '', }, columns: { - types: ['lens_datatable_columns'], + types: ['lens_datatable_column'], + help: '', + multi: true, + }, + sortingColumnId: { + types: ['string'], + help: '', + }, + sortingDirection: { + types: ['string'], help: '', }, }, @@ -79,7 +86,7 @@ export const getDatatable = ({ firstTable.columns.forEach((column) => { formatters[column.id] = formatFactory(column.meta?.params); }); - const { sortBy, sortDirection } = args.columns; + const { sortingColumnId: sortBy, sortingDirection: sortDirection } = args; const columnsReverseLookup = firstTable.columns.reduce< Record @@ -116,65 +123,27 @@ export const getDatatable = ({ }, }); -type DatatableColumnsResult = DatatableColumns & { type: 'lens_datatable_columns' }; +type DatatableColumnResult = ColumnState & { type: 'lens_datatable_column' }; -export const datatableColumns: ExpressionFunctionDefinition< - 'lens_datatable_columns', +export const datatableColumn: ExpressionFunctionDefinition< + 'lens_datatable_column', null, - DatatableColumns, - DatatableColumnsResult + ColumnState, + DatatableColumnResult > = { - name: 'lens_datatable_columns', + name: 'lens_datatable_column', aliases: [], - type: 'lens_datatable_columns', + type: 'lens_datatable_column', help: '', inputTypes: ['null'], args: { - sortBy: { types: ['string'], help: '' }, - sortDirection: { types: ['string'], help: '' }, - columnIds: { - types: ['string'], - multi: true, - help: '', - }, - columnWidth: { - types: ['lens_datatable_column_width'], - multi: true, - help: '', - }, - }, - fn: function fn(input: unknown, args: DatatableColumns) { - return { - type: 'lens_datatable_columns', - ...args, - }; - }, -}; - -export const datatableColumnWidth: ExpressionFunctionDefinition< - 'lens_datatable_column_width', - null, - DatatableColumnWidth, - DatatableColumnWidthResult -> = { - name: 'lens_datatable_column_width', - aliases: [], - type: 'lens_datatable_column_width', - help: '', - inputTypes: ['null'], - args: { - columnId: { - types: ['string'], - help: '', - }, - width: { - types: ['number'], - help: '', - }, + columnId: { types: ['string'], help: '' }, + hidden: { types: ['boolean'], help: '' }, + width: { types: ['number'], help: '' }, }, - fn: function fn(input: unknown, args: DatatableColumnWidth) { + fn: function fn(input: unknown, args: ColumnState) { return { - type: 'lens_datatable_column_width', + type: 'lens_datatable_column', ...args, }; }, @@ -213,7 +182,7 @@ export const getDatatableRenderer = (dependencies: { data: { rowIndex, table, - columns: config.args.columns.columnIds, + columns: config.args.columns.map((column) => column.columnId), }, }); diff --git a/x-pack/plugins/lens/public/datatable_visualization/index.ts b/x-pack/plugins/lens/public/datatable_visualization/index.ts index 23e0a2b7918a4..f0939f6195229 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/index.ts +++ b/x-pack/plugins/lens/public/datatable_visualization/index.ts @@ -29,15 +29,13 @@ export class DatatableVisualization { editorFrame.registerVisualization(async () => { const { getDatatable, - datatableColumns, - datatableColumnWidth, + datatableColumn, getDatatableRenderer, datatableVisualization, } = await import('../async_services'); const resolvedFormatFactory = await formatFactory; - expressions.registerFunction(() => datatableColumns); - expressions.registerFunction(() => datatableColumnWidth); + expressions.registerFunction(() => datatableColumn); expressions.registerFunction(() => getDatatable({ formatFactory: resolvedFormatFactory })); expressions.registerRenderer(() => getDatatableRenderer({ diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx index 0627effa30be7..25275ba8e2249 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx @@ -30,23 +30,15 @@ describe('Datatable Visualization', () => { describe('#initialize', () => { it('should initialize from the empty state', () => { expect(datatableVisualization.initialize(mockFrame(), undefined)).toEqual({ - layers: [ - { - layerId: 'aaa', - columns: [], - }, - ], + layerId: 'aaa', + columns: [], }); }); it('should initialize from a persisted state', () => { const expectedState: DatatableVisualizationState = { - layers: [ - { - layerId: 'foo', - columns: ['saved'], - }, - ], + layerId: 'foo', + columns: [{ columnId: 'saved' }], }; expect(datatableVisualization.initialize(mockFrame(), expectedState)).toEqual(expectedState); }); @@ -55,12 +47,8 @@ describe('Datatable Visualization', () => { describe('#getLayerIds', () => { it('return the layer ids', () => { const state: DatatableVisualizationState = { - layers: [ - { - layerId: 'baz', - columns: ['a', 'b', 'c'], - }, - ], + layerId: 'baz', + columns: [{ columnId: 'a' }, { columnId: 'b' }, { columnId: 'c' }], }; expect(datatableVisualization.getLayerIds(state)).toEqual(['baz']); }); @@ -69,20 +57,12 @@ describe('Datatable Visualization', () => { describe('#clearLayer', () => { it('should reset the layer', () => { const state: DatatableVisualizationState = { - layers: [ - { - layerId: 'baz', - columns: ['a', 'b', 'c'], - }, - ], + layerId: 'baz', + columns: [{ columnId: 'a' }, { columnId: 'b' }, { columnId: 'c' }], }; expect(datatableVisualization.clearLayer(state, 'baz')).toMatchObject({ - layers: [ - { - layerId: 'baz', - columns: [], - }, - ], + layerId: 'baz', + columns: [], }); }); }); @@ -113,7 +93,8 @@ describe('Datatable Visualization', () => { it('should accept a single-layer suggestion', () => { const suggestions = datatableVisualization.getSuggestions({ state: { - layers: [{ layerId: 'first', columns: ['col1'] }], + layerId: 'first', + columns: [{ columnId: 'col1' }], }, table: { isMultiRow: true, @@ -130,7 +111,8 @@ describe('Datatable Visualization', () => { it('should not make suggestions when the table is unchanged', () => { const suggestions = datatableVisualization.getSuggestions({ state: { - layers: [{ layerId: 'first', columns: ['col1'] }], + layerId: 'first', + columns: [{ columnId: 'col1' }], }, table: { isMultiRow: true, @@ -147,7 +129,8 @@ describe('Datatable Visualization', () => { it('should not make suggestions when multiple layers are involved', () => { const suggestions = datatableVisualization.getSuggestions({ state: { - layers: [{ layerId: 'first', columns: ['col1'] }], + layerId: 'first', + columns: [{ columnId: 'col1' }], }, table: { isMultiRow: true, @@ -164,7 +147,8 @@ describe('Datatable Visualization', () => { it('should not make suggestions when the suggestion keeps a different layer', () => { const suggestions = datatableVisualization.getSuggestions({ state: { - layers: [{ layerId: 'older', columns: ['col1'] }], + layerId: 'older', + columns: [{ columnId: 'col1' }], }, table: { isMultiRow: true, @@ -203,7 +187,8 @@ describe('Datatable Visualization', () => { datatableVisualization.getConfiguration({ layerId: 'first', state: { - layers: [{ layerId: 'first', columns: [] }], + layerId: 'first', + columns: [], }, frame, }).groups @@ -218,7 +203,8 @@ describe('Datatable Visualization', () => { const filterOperations = datatableVisualization.getConfiguration({ layerId: 'first', state: { - layers: [{ layerId: 'first', columns: [] }], + layerId: 'first', + columns: [], }, frame, }).groups[0].filterOperations; @@ -249,7 +235,8 @@ describe('Datatable Visualization', () => { const filterOperations = datatableVisualization.getConfiguration({ layerId: 'first', state: { - layers: [{ layerId: 'first', columns: [] }], + layerId: 'first', + columns: [], }, frame, }).groups[1].filterOperations; @@ -274,7 +261,6 @@ describe('Datatable Visualization', () => { it('reorders the rendered colums based on the order from the datasource', () => { const datasource = createMockDatasource('test'); - const layer = { layerId: 'a', columns: ['b', 'c'] }; const frame = mockFrame(); frame.datasourceLayers = { a: datasource.publicAPIMock }; datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]); @@ -282,7 +268,10 @@ describe('Datatable Visualization', () => { expect( datatableVisualization.getConfiguration({ layerId: 'a', - state: { layers: [layer] }, + state: { + layerId: 'a', + columns: [{ columnId: 'b' }, { columnId: 'c' }], + }, frame, }).groups[1].accessors ).toEqual([{ columnId: 'c' }, { columnId: 'b' }]); @@ -291,95 +280,75 @@ describe('Datatable Visualization', () => { describe('#removeDimension', () => { it('allows columns to be removed', () => { - const layer = { layerId: 'layer1', columns: ['b', 'c'] }; expect( datatableVisualization.removeDimension({ - prevState: { layers: [layer] }, + prevState: { + layerId: 'layer1', + columns: [{ columnId: 'b' }, { columnId: 'c' }], + }, layerId: 'layer1', columnId: 'b', }) ).toEqual({ - layers: [ - { - layerId: 'layer1', - columns: ['c'], - }, - ], + layerId: 'layer1', + columns: [{ columnId: 'c' }], }); }); it('should handle correctly the sorting state on removing dimension', () => { - const layer = { layerId: 'layer1', columns: ['b', 'c'] }; + const state = { layerId: 'layer1', columns: [{ columnId: 'b' }, { columnId: 'c' }] }; expect( datatableVisualization.removeDimension({ - prevState: { layers: [layer], sorting: { columnId: 'b', direction: 'asc' } }, + prevState: { ...state, sorting: { columnId: 'b', direction: 'asc' } }, layerId: 'layer1', columnId: 'b', }) ).toEqual({ sorting: undefined, - layers: [ - { - layerId: 'layer1', - columns: ['c'], - }, - ], + layerId: 'layer1', + columns: [{ columnId: 'c' }], }); expect( datatableVisualization.removeDimension({ - prevState: { layers: [layer], sorting: { columnId: 'c', direction: 'asc' } }, + prevState: { ...state, sorting: { columnId: 'c', direction: 'asc' } }, layerId: 'layer1', columnId: 'b', }) ).toEqual({ sorting: { columnId: 'c', direction: 'asc' }, - layers: [ - { - layerId: 'layer1', - columns: ['c'], - }, - ], + layerId: 'layer1', + columns: [{ columnId: 'c' }], }); }); }); describe('#setDimension', () => { it('allows columns to be added', () => { - const layer = { layerId: 'layer1', columns: ['b', 'c'] }; expect( datatableVisualization.setDimension({ - prevState: { layers: [layer] }, + prevState: { layerId: 'layer1', columns: [{ columnId: 'b' }, { columnId: 'c' }] }, layerId: 'layer1', columnId: 'd', groupId: '', }) ).toEqual({ - layers: [ - { - layerId: 'layer1', - columns: ['b', 'c', 'd'], - }, - ], + layerId: 'layer1', + columns: [{ columnId: 'b' }, { columnId: 'c' }, { columnId: 'd' }], }); }); it('does not set a duplicate dimension', () => { - const layer = { layerId: 'layer1', columns: ['b', 'c'] }; expect( datatableVisualization.setDimension({ - prevState: { layers: [layer] }, + prevState: { layerId: 'layer1', columns: [{ columnId: 'b' }, { columnId: 'c' }] }, layerId: 'layer1', columnId: 'b', groupId: '', }) ).toEqual({ - layers: [ - { - layerId: 'layer1', - columns: ['b', 'c'], - }, - ], + layerId: 'layer1', + columns: [{ columnId: 'b' }, { columnId: 'c' }], }); }); }); @@ -387,7 +356,6 @@ describe('Datatable Visualization', () => { describe('#toExpression', () => { it('reorders the rendered colums based on the order from the datasource', () => { const datasource = createMockDatasource('test'); - const layer = { layerId: 'a', columns: ['b', 'c'] }; const frame = mockFrame(); frame.datasourceLayers = { a: datasource.publicAPIMock }; datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]); @@ -398,24 +366,35 @@ describe('Datatable Visualization', () => { }); const expression = datatableVisualization.toExpression( - { layers: [layer] }, + { layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] }, frame.datasourceLayers ) as Ast; - const tableArgs = buildExpression(expression).findFunction('lens_datatable_columns'); + const tableArgs = buildExpression(expression).findFunction('lens_datatable'); expect(tableArgs).toHaveLength(1); - expect(tableArgs[0].arguments).toEqual({ - columnIds: ['c', 'b'], - sortBy: [''], - sortDirection: ['none'], - columnWidth: [], + expect(tableArgs[0].arguments).toEqual( + expect.objectContaining({ + sortingColumnId: [''], + sortingDirection: ['none'], + }) + ); + const columnArgs = buildExpression(expression).findFunction('lens_datatable_column'); + expect(columnArgs).toHaveLength(2); + expect(columnArgs[0].arguments).toEqual({ + columnId: ['c'], + hidden: [], + width: [], + }); + expect(columnArgs[1].arguments).toEqual({ + columnId: ['b'], + hidden: [], + width: [], }); }); it('returns no expression if the metric dimension is not defined', () => { const datasource = createMockDatasource('test'); - const layer = { layerId: 'a', columns: ['b', 'c'] }; const frame = mockFrame(); frame.datasourceLayers = { a: datasource.publicAPIMock }; datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]); @@ -426,7 +405,7 @@ describe('Datatable Visualization', () => { }); const expression = datatableVisualization.toExpression( - { layers: [layer] }, + { layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] }, frame.datasourceLayers ); @@ -437,7 +416,6 @@ describe('Datatable Visualization', () => { describe('#getErrorMessages', () => { it('returns undefined if the datasource is missing a metric dimension', () => { const datasource = createMockDatasource('test'); - const layer = { layerId: 'a', columns: ['b', 'c'] }; const frame = mockFrame(); frame.datasourceLayers = { a: datasource.publicAPIMock }; datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]); @@ -447,14 +425,16 @@ describe('Datatable Visualization', () => { label: 'label', }); - const error = datatableVisualization.getErrorMessages({ layers: [layer] }, frame); + const error = datatableVisualization.getErrorMessages( + { layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] }, + frame + ); expect(error).toBeUndefined(); }); it('returns undefined if the metric dimension is defined', () => { const datasource = createMockDatasource('test'); - const layer = { layerId: 'a', columns: ['b', 'c'] }; const frame = mockFrame(); frame.datasourceLayers = { a: datasource.publicAPIMock }; datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]); @@ -464,7 +444,10 @@ describe('Datatable Visualization', () => { label: 'label', }); - const error = datatableVisualization.getErrorMessages({ layers: [layer] }, frame); + const error = datatableVisualization.getErrorMessages( + { layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] }, + frame + ); expect(error).toBeUndefined(); }); @@ -473,12 +456,8 @@ describe('Datatable Visualization', () => { describe('#onEditAction', () => { it('should add a sort column to the state', () => { const currentState: DatatableVisualizationState = { - layers: [ - { - layerId: 'foo', - columns: ['saved'], - }, - ], + layerId: 'foo', + columns: [{ columnId: 'saved' }], }; expect( datatableVisualization.onEditAction!(currentState, { @@ -496,12 +475,8 @@ describe('Datatable Visualization', () => { it('should add a custom width to a column in the state', () => { const currentState: DatatableVisualizationState = { - layers: [ - { - layerId: 'foo', - columns: ['saved'], - }, - ], + layerId: 'foo', + columns: [{ columnId: 'saved' }], }; expect( datatableVisualization.onEditAction!(currentState, { @@ -510,29 +485,14 @@ describe('Datatable Visualization', () => { }) ).toEqual({ ...currentState, - columnWidth: [ - { - columnId: 'saved', - width: 500, - }, - ], + columns: [{ columnId: 'saved', width: 500 }], }); }); it('should clear custom width value for the column from the state', () => { const currentState: DatatableVisualizationState = { - layers: [ - { - layerId: 'foo', - columns: ['saved'], - }, - ], - columnWidth: [ - { - columnId: 'saved', - width: 500, - }, - ], + layerId: 'foo', + columns: [{ columnId: 'saved', width: 5000 }], }; expect( datatableVisualization.onEditAction!(currentState, { @@ -541,7 +501,7 @@ describe('Datatable Visualization', () => { }) ).toEqual({ ...currentState, - columnWidth: [], + columns: [{ columnId: 'saved', width: undefined }], }); }); }); diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index 6a221396b8a84..77fda43c37fef 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx @@ -5,37 +5,35 @@ * 2.0. */ +import React from 'react'; +import { render } from 'react-dom'; import { Ast } from '@kbn/interpreter/common'; +import { I18nProvider } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import type { SuggestionRequest, Visualization, VisualizationSuggestion, - Operation, DatasourcePublicAPI, } from '../types'; -import type { DatatableColumnWidth } from './components/types'; import { LensIconChartDatatable } from '../assets/chart_datatable'; +import { TableDimensionEditor } from './components/dimension_editor'; -export interface DatatableLayerState { - layerId: string; - columns: string[]; +export interface ColumnState { + columnId: string; + width?: number; + hidden?: boolean; } -export interface DatatableVisualizationState { - layers: DatatableLayerState[]; - sorting?: { - columnId: string | undefined; - direction: 'asc' | 'desc' | 'none'; - }; - columnWidth?: DatatableColumnWidth[]; +export interface SortingState { + columnId: string | undefined; + direction: 'asc' | 'desc' | 'none'; } -function newLayerState(layerId: string): DatatableLayerState { - return { - layerId, - columns: [], - }; +export interface DatatableVisualizationState { + columns: ColumnState[]; + layerId: string; + sorting?: SortingState; } export const datatableVisualization: Visualization = { @@ -56,12 +54,13 @@ export const datatableVisualization: Visualization }, getLayerIds(state) { - return state.layers.map((l) => l.layerId); + return [state.layerId]; }, clearLayer(state) { return { - layers: state.layers.map((l) => newLayerState(l.layerId)), + ...state, + columns: [], }; }, @@ -79,7 +78,8 @@ export const datatableVisualization: Visualization initialize(frame, state) { return ( state || { - layers: [newLayerState(frame.addNewLayer())], + columns: [], + layerId: frame.addNewLayer(), } ); }, @@ -126,12 +126,8 @@ export const datatableVisualization: Visualization // table with >= 10 columns will have a score of 0.4, fewer columns reduce score score: (Math.min(table.columns.length, 10) / 10) * 0.4, state: { - layers: [ - { - layerId: table.layerId, - columns: table.columns.map((col) => col.columnId), - }, - ], + layerId: table.layerId, + columns: table.columns.map((col) => ({ columnId: col.columnId })), }, previewIcon: LensIconChartDatatable, // tables are hidden from suggestion bar, but used for drag & drop and chart switching @@ -144,6 +140,11 @@ export const datatableVisualization: Visualization const { sortedColumns, datasource } = getDataSourceAndSortedColumns(state, frame.datasourceLayers, layerId) || {}; + const columnMap: Record = {}; + state.columns.forEach((column) => { + columnMap[column.columnId] = column; + }); + if (!sortedColumns) { return { groups: [] }; } @@ -155,61 +156,68 @@ export const datatableVisualization: Visualization groupLabel: i18n.translate('xpack.lens.datatable.breakdown', { defaultMessage: 'Break down by', }), - layerId: state.layers[0].layerId, + layerId: state.layerId, accessors: sortedColumns .filter((c) => datasource!.getOperationForColumnId(c)?.isBucketed) - .map((accessor) => ({ columnId: accessor })), + .map((accessor) => ({ + columnId: accessor, + triggerIcon: columnMap[accessor].hidden ? 'invisible' : undefined, + })), supportsMoreColumns: true, filterOperations: (op) => op.isBucketed, dataTestSubj: 'lnsDatatable_column', + enableDimensionEditor: true, }, { groupId: 'metrics', groupLabel: i18n.translate('xpack.lens.datatable.metrics', { defaultMessage: 'Metrics', }), - layerId: state.layers[0].layerId, + layerId: state.layerId, accessors: sortedColumns .filter((c) => !datasource!.getOperationForColumnId(c)?.isBucketed) - .map((accessor) => ({ columnId: accessor })), + .map((accessor) => ({ + columnId: accessor, + triggerIcon: columnMap[accessor].hidden ? 'invisible' : undefined, + })), supportsMoreColumns: true, filterOperations: (op) => !op.isBucketed, required: true, dataTestSubj: 'lnsDatatable_metrics', + enableDimensionEditor: true, }, ], }; }, - setDimension({ prevState, layerId, columnId }) { + setDimension({ prevState, columnId }) { + if (prevState.columns.some((column) => column.columnId === columnId)) { + return prevState; + } return { ...prevState, - layers: prevState.layers.map((l) => { - if (l.layerId !== layerId || l.columns.includes(columnId)) { - return l; - } - return { ...l, columns: [...l.columns, columnId] }; - }), + columns: [...prevState.columns, { columnId }], }; }, - removeDimension({ prevState, layerId, columnId }) { + removeDimension({ prevState, columnId }) { return { ...prevState, - layers: prevState.layers.map((l) => - l.layerId === layerId - ? { - ...l, - columns: l.columns.filter((c) => c !== columnId), - } - : l - ), + columns: prevState.columns.filter((column) => column.columnId !== columnId), sorting: prevState.sorting?.columnId === columnId ? undefined : prevState.sorting, }; }, + renderDimensionEditor(domElement, props) { + render( + + + , + domElement + ); + }, toExpression(state, datasourceLayers, { title, description } = {}): Ast | null { const { sortedColumns, datasource } = - getDataSourceAndSortedColumns(state, datasourceLayers, state.layers[0].layerId) || {}; + getDataSourceAndSortedColumns(state, datasourceLayers, state.layerId) || {}; if ( sortedColumns?.length && @@ -218,9 +226,14 @@ export const datatableVisualization: Visualization return null; } - const operations = sortedColumns! - .map((columnId) => ({ columnId, operation: datasource!.getOperationForColumnId(columnId) })) - .filter((o): o is { columnId: string; operation: Operation } => !!o.operation); + const columnMap: Record = {}; + state.columns.forEach((column) => { + columnMap[column.columnId] = column; + }); + + const columns = sortedColumns! + .filter((columnId) => datasource!.getOperationForColumnId(columnId)) + .map((columnId) => columnMap[columnId]); return { type: 'expression', @@ -231,35 +244,22 @@ export const datatableVisualization: Visualization arguments: { title: [title || ''], description: [description || ''], - columns: [ - { - type: 'expression', - chain: [ - { - type: 'function', - function: 'lens_datatable_columns', - arguments: { - columnIds: operations.map((o) => o.columnId), - sortBy: [state.sorting?.columnId || ''], - sortDirection: [state.sorting?.direction || 'none'], - columnWidth: (state.columnWidth || []).map((columnWidth) => ({ - type: 'expression', - chain: [ - { - type: 'function', - function: 'lens_datatable_column_width', - arguments: { - columnId: [columnWidth.columnId], - width: [columnWidth.width], - }, - }, - ], - })), - }, + columns: columns.map((column) => ({ + type: 'expression', + chain: [ + { + type: 'function', + function: 'lens_datatable_column', + arguments: { + columnId: [column.columnId], + hidden: typeof column.hidden === 'undefined' ? [] : [column.hidden], + width: typeof column.width === 'undefined' ? [] : [column.width], }, - ], - }, - ], + }, + ], + })), + sortingColumnId: [state.sorting?.columnId || ''], + sortingDirection: [state.sorting?.direction || 'none'], }, }, ], @@ -280,15 +280,34 @@ export const datatableVisualization: Visualization direction: event.data.direction, }, }; + case 'toggle': + return { + ...state, + columns: state.columns.map((column) => { + if (column.columnId === event.data.columnId) { + return { + ...column, + hidden: !column.hidden, + }; + } else { + return column; + } + }), + }; case 'resize': + const targetWidth = event.data.width; return { ...state, - columnWidth: [ - ...(state.columnWidth || []).filter(({ columnId }) => columnId !== event.data.columnId), - ...(event.data.width !== undefined - ? [{ columnId: event.data.columnId, width: event.data.width }] - : []), - ], + columns: state.columns.map((column) => { + if (column.columnId === event.data.columnId) { + return { + ...column, + width: targetWidth, + }; + } else { + return column; + } + }), }; default: return state; @@ -301,13 +320,11 @@ function getDataSourceAndSortedColumns( datasourceLayers: Record, layerId: string ) { - const layer = state.layers.find((l: DatatableLayerState) => l.layerId === layerId); - if (!layer) { - return undefined; - } - const datasource = datasourceLayers[layer.layerId]; + const datasource = datasourceLayers[state.layerId]; const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId); // When we add a column it could be empty, and therefore have no order - const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns))); + const sortedColumns = Array.from( + new Set(originalOrder.concat(state.columns.map(({ columnId }) => columnId))) + ); return { datasource, sortedColumns }; } diff --git a/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap b/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap index 6423a9f6190a7..b3b695b22ad71 100644 --- a/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap +++ b/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DragDrop droppable is reflected in the className 1`] = ` +exports[`DragDrop defined dropType is reflected in the className 1`] = ` ); @@ -46,10 +48,10 @@ describe('DragDrop', () => { expect(component).toMatchSnapshot(); }); - test('dragover calls preventDefault if droppable is true', () => { + test('dragover calls preventDefault if dropType is defined', () => { const preventDefault = jest.fn(); const component = mount( - + ); @@ -59,10 +61,10 @@ describe('DragDrop', () => { expect(preventDefault).toBeCalled(); }); - test('dragover does not call preventDefault if droppable is false', () => { + test('dragover does not call preventDefault if dropType is undefined', () => { const preventDefault = jest.fn(); const component = mount( - + ); @@ -75,9 +77,15 @@ describe('DragDrop', () => { test('dragstart sets dragging in the context', async () => { const setDragging = jest.fn(); + const setA11yMessage = jest.fn(); const component = mount( - - + + @@ -87,8 +95,9 @@ describe('DragDrop', () => { jest.runAllTimers(); - expect(dataTransfer.setData).toBeCalledWith('text', 'drag label'); + expect(dataTransfer.setData).toBeCalledWith('text', 'hello'); expect(setDragging).toBeCalledWith(value); + expect(setA11yMessage).toBeCalledWith('Lifted hello'); }); test('drop resets all the things', async () => { @@ -100,10 +109,10 @@ describe('DragDrop', () => { const component = mount( - + @@ -116,18 +125,22 @@ describe('DragDrop', () => { expect(preventDefault).toBeCalled(); expect(stopPropagation).toBeCalled(); expect(setDragging).toBeCalledWith(undefined); - expect(onDrop).toBeCalledWith({ id: '2', label: 'hi' }, { id: '1', label: 'hello' }); + expect(onDrop).toBeCalledWith({ id: '2', humanData: { label: 'label1' } }, 'field_add'); }); - test('drop function is not called on droppable=false', async () => { + test('drop function is not called on dropType undefined', async () => { const preventDefault = jest.fn(); const stopPropagation = jest.fn(); const setDragging = jest.fn(); const onDrop = jest.fn(); const component = mount( - - + + @@ -143,14 +156,15 @@ describe('DragDrop', () => { expect(onDrop).not.toHaveBeenCalled(); }); - test('droppable is reflected in the className', () => { + test('defined dropType is reflected in the className', () => { const component = render( { throw x; }} - droppable + dropType="field_add" value={value} + order={[2, 0, 1, 0]} > @@ -159,13 +173,18 @@ describe('DragDrop', () => { expect(component).toMatchSnapshot(); }); - test('items that have droppable=false get special styling when another item is dragged', () => { + test('items that has dropType=undefined get special styling when another item is dragged', () => { const component = mount( - + - {}} droppable={false} value={{ id: '2' }}> + {}} + dropType={undefined} + value={{ id: '2', humanData: { label: 'label2' } }} + > @@ -175,30 +194,39 @@ describe('DragDrop', () => { }); test('additional styles are reflected in the className until drop', () => { - let dragging: { id: '1' } | undefined; - const getAdditionalClasses = jest.fn().mockReturnValue('additional'); + let dragging: { id: '1'; humanData: { label: 'label1' } } | undefined; + const getAdditionalClassesOnEnter = jest.fn().mockReturnValue('additional'); + const getAdditionalClassesOnDroppable = jest.fn().mockReturnValue('droppable'); + const setA11yMessage = jest.fn(); let activeDropTarget; const component = mount( { - dragging = { id: '1' }; + dragging = { id: '1', humanData: { label: 'label1' } }; }} setActiveDropTarget={(val) => { activeDropTarget = { activeDropTarget: val }; }} activeDropTarget={activeDropTarget} > - + {}} - droppable - getAdditionalClassesOnEnter={getAdditionalClasses} + dropType="field_add" + getAdditionalClassesOnEnter={getAdditionalClassesOnEnter} + getAdditionalClassesOnDroppable={getAdditionalClassesOnDroppable} > @@ -210,6 +238,7 @@ describe('DragDrop', () => { .first() .simulate('dragstart', { dataTransfer }); jest.runAllTimers(); + expect(setA11yMessage).toBeCalledWith('Lifted ignored'); component.find('[data-test-subj="lnsDragDrop"]').at(1).simulate('dragover'); component.find('[data-test-subj="lnsDragDrop"]').at(1).simulate('drop'); @@ -217,8 +246,9 @@ describe('DragDrop', () => { }); test('additional enter styles are reflected in the className until dragleave', () => { - let dragging: { id: '1' } | undefined; + let dragging: { id: '1'; humanData: { label: 'label1' } } | undefined; const getAdditionalClasses = jest.fn().mockReturnValue('additional'); + const getAdditionalClassesOnDroppable = jest.fn().mockReturnValue('droppable'); const setActiveDropTarget = jest.fn(); const component = mount( @@ -226,7 +256,7 @@ describe('DragDrop', () => { setA11yMessage={jest.fn()} dragging={dragging} setDragging={() => { - dragging = { id: '1' }; + dragging = { id: '1', humanData: { label: 'label1' } }; }} setActiveDropTarget={setActiveDropTarget} activeDropTarget={ @@ -234,15 +264,22 @@ describe('DragDrop', () => { } keyboardMode={false} setKeyboardMode={(keyboardMode) => true} + registerDropTarget={jest.fn()} > - + {}} - droppable + dropType="field_add" getAdditionalClassesOnEnter={getAdditionalClasses} + getAdditionalClassesOnDroppable={getAdditionalClassesOnDroppable} > @@ -257,19 +294,137 @@ describe('DragDrop', () => { component.find('[data-test-subj="lnsDragDrop"]').at(1).simulate('dragover'); expect(component.find('.additional')).toHaveLength(1); - component.find('[data-test-subj="lnsDragDrop"]').at(1).simulate('dragleave'); expect(setActiveDropTarget).toBeCalledWith(undefined); }); + test('Keyboard navigation: User receives proper drop Targets highlighted when pressing arrow keys', () => { + const onDrop = jest.fn(); + const setActiveDropTarget = jest.fn(); + const setA11yMessage = jest.fn(); + const items = [ + { + draggable: true, + value: { + id: '1', + humanData: { label: 'label1', position: 1 }, + }, + children: '1', + order: [2, 0, 0, 0], + }, + { + draggable: true, + dragType: 'move' as 'copy' | 'move', + + value: { + id: '2', + + humanData: { label: 'label2', position: 1 }, + }, + onDrop, + dropType: 'move_compatible' as DropType, + order: [2, 0, 1, 0], + }, + { + draggable: true, + dragType: 'move' as 'copy' | 'move', + value: { + id: '3', + humanData: { label: 'label3', position: 1 }, + }, + onDrop, + dropType: 'replace_compatible' as DropType, + order: [2, 0, 2, 0], + }, + { + draggable: true, + dragType: 'move' as 'copy' | 'move', + value: { + id: '4', + humanData: { label: 'label4', position: 2 }, + }, + order: [2, 0, 2, 1], + }, + ]; + const component = mount( + + {items.map((props) => ( + +
    + + ))} + + ); + const keyboardHandler = component + .find('[data-test-subj="lnsDragDrop-keyboardHandler"]') + .first() + .simulate('focus'); + act(() => { + keyboardHandler.simulate('keydown', { key: 'ArrowRight' }); + expect(setActiveDropTarget).toBeCalledWith({ + ...items[2].value, + onDrop, + dropType: items[2].dropType, + }); + keyboardHandler.simulate('keydown', { key: 'Enter' }); + expect(setA11yMessage).toBeCalledWith( + 'Selected label3 in group at position 1. Press space or enter to replace label3 with label1.' + ); + expect(setActiveDropTarget).toBeCalledWith(undefined); + expect(onDrop).toBeCalledWith( + { humanData: { label: 'label1', position: 1 }, id: '1' }, + 'move_compatible' + ); + }); + }); + describe('reordering', () => { + const onDrop = jest.fn(); + const items = [ + { + id: '1', + humanData: { label: 'label1', position: 1 }, + onDrop, + dropType: 'reorder' as DropType, + }, + { + id: '2', + humanData: { label: 'label2', position: 2 }, + onDrop, + dropType: 'reorder' as DropType, + }, + { + id: '3', + humanData: { label: 'label3', position: 3 }, + onDrop, + dropType: 'reorder' as DropType, + }, + ]; const mountComponent = ( dragContext: Partial | undefined, - onDrop: DropHandler = jest.fn() + onDropHandler?: () => void ) => { let dragging = dragContext?.dragging; let keyboardMode = !!dragContext?.keyboardMode; let activeDropTarget = dragContext?.activeDropTarget; + + const setA11yMessage = jest.fn(); + const registerDropTarget = jest.fn(); const baseContext = { dragging, setDragging: (val?: DragDropIdentifier) => { @@ -280,70 +435,51 @@ describe('DragDrop', () => { keyboardMode = mode; }), setActiveDropTarget: (target?: DragDropIdentifier) => { - activeDropTarget = { activeDropTarget: target } as ActiveDropTarget; + activeDropTarget = { activeDropTarget: target } as DropTargets; }, activeDropTarget, - setA11yMessage: jest.fn(), + setA11yMessage, + registerDropTarget, + }; + + const dragDropSharedProps = { + draggable: true, + dragType: 'move' as 'copy' | 'move', + dropType: 'reorder' as DropType, + reorderableGroup: items.map(({ id }) => ({ id })), + onDrop: onDropHandler || onDrop, }; + return mount( 1 - + 2 - + 3 ); }; - test(`Inactive reorderable group renders properly`, () => { - const component = mountComponent(undefined, jest.fn()); - expect(component.find('.lnsDragDrop-reorderable')).toHaveLength(3); + test(`Inactive group renders properly`, () => { + const component = mountComponent(undefined); + expect(component.find('[data-test-subj="lnsDragDrop"]')).toHaveLength(3); }); test(`Reorderable group with lifted element renders properly`, () => { - const setDragging = jest.fn(); const setA11yMessage = jest.fn(); - const component = mountComponent( - { dragging: { id: '1' }, setA11yMessage, setDragging }, - jest.fn() - ); + const setDragging = jest.fn(); + const component = mountComponent({ dragging: items[0], setDragging, setA11yMessage }); act(() => { component .find('[data-test-subj="lnsDragDrop"]') @@ -352,8 +488,8 @@ describe('DragDrop', () => { jest.runAllTimers(); }); - expect(setDragging).toBeCalledWith({ id: '1' }); - expect(setA11yMessage).toBeCalledWith('You have lifted an item 1 in position 1'); + expect(setDragging).toBeCalledWith(items[0]); + expect(setA11yMessage).toBeCalledWith('Lifted label1'); expect( component .find('[data-test-subj="lnsDragDrop-reorderableGroup"]') @@ -362,7 +498,7 @@ describe('DragDrop', () => { }); test(`Reordered elements get extra styles to show the reorder effect when dragging`, () => { - const component = mountComponent({ dragging: { id: '1' } }, jest.fn()); + const component = mountComponent({ dragging: items[0] }); act(() => { component @@ -403,16 +539,13 @@ describe('DragDrop', () => { }); test(`Dropping an item runs onDrop function`, () => { - const setDragging = jest.fn(); - const setA11yMessage = jest.fn(); const preventDefault = jest.fn(); const stopPropagation = jest.fn(); - const onDrop = jest.fn(); - const component = mountComponent( - { dragging: { id: '1' }, setA11yMessage, setDragging }, - onDrop - ); + const setA11yMessage = jest.fn(); + const setDragging = jest.fn(); + + const component = mountComponent({ dragging: items[0], setDragging, setA11yMessage }); component .find('[data-test-subj="lnsDragDrop-reorderableDropLayer"]') @@ -421,23 +554,58 @@ describe('DragDrop', () => { jest.runAllTimers(); expect(setA11yMessage).toBeCalledWith( - 'You have dropped the item. You have moved the item from position 1 to positon 3' + 'You have dropped the item label1. You have moved the item from position 1 to positon 3' ); expect(preventDefault).toBeCalled(); expect(stopPropagation).toBeCalled(); - expect(onDrop).toBeCalledWith({ id: '1' }, { id: '3' }); + expect(onDrop).toBeCalledWith(items[0], 'reorder'); }); - test(`Keyboard navigation: user can drop element to an activeDropTarget`, () => { - const onDrop = jest.fn(); - const component = mountComponent( - { - dragging: { id: '1' }, - activeDropTarget: { activeDropTarget: { id: '3' } } as ActiveDropTarget, - keyboardMode: true, + test(`Keyboard Navigation: User cannot move an element outside of the group`, () => { + const setA11yMessage = jest.fn(); + const setActiveDropTarget = jest.fn(); + const component = mountComponent({ + dragging: items[0], + keyboardMode: true, + activeDropTarget: { + activeDropTarget: undefined, + dropTargetsByOrder: { + '2,0,0': undefined, + '2,0,1': { ...items[1], onDrop, dropType: 'reorder' }, + '2,0,2': { ...items[2], onDrop, dropType: 'reorder' }, + }, }, - onDrop + setActiveDropTarget, + setA11yMessage, + }); + const keyboardHandler = component.find('[data-test-subj="lnsDragDrop-keyboardHandler"]'); + + keyboardHandler.simulate('keydown', { key: 'Space' }); + keyboardHandler.simulate('keydown', { key: 'ArrowUp' }); + expect(setActiveDropTarget).not.toHaveBeenCalled(); + + keyboardHandler.simulate('keydown', { key: 'Space' }); + keyboardHandler.simulate('keydown', { key: 'ArrowDown' }); + + expect(setActiveDropTarget).toBeCalledWith(items[1]); + expect(setA11yMessage).toBeCalledWith( + 'You have moved the item label1 from position 1 to position 2' ); + }); + test(`Keyboard navigation: user can drop element to an activeDropTarget`, () => { + const component = mountComponent({ + dragging: items[0], + activeDropTarget: { + activeDropTarget: { ...items[2], dropType: 'reorder', onDrop }, + dropTargetsByOrder: { + '2,0,0': { ...items[0], onDrop, dropType: 'reorder' }, + '2,0,1': { ...items[1], onDrop, dropType: 'reorder' }, + '2,0,2': { ...items[2], onDrop, dropType: 'reorder' }, + }, + }, + + keyboardMode: true, + }); const keyboardHandler = component .find('[data-test-subj="lnsDragDrop-keyboardHandler"]') .simulate('focus'); @@ -447,15 +615,43 @@ describe('DragDrop', () => { keyboardHandler.simulate('keydown', { key: 'ArrowDown' }); keyboardHandler.simulate('keydown', { key: 'Enter' }); }); - expect(onDrop).toBeCalledWith({ id: '1' }, { id: '3' }); + expect(onDrop).toBeCalledWith(items[0], 'reorder'); + }); + + test(`Keyboard Navigation: Doesn't call onDrop when movement is cancelled`, () => { + const setA11yMessage = jest.fn(); + const onDropHandler = jest.fn(); + const component = mountComponent({ dragging: items[0], setA11yMessage }, onDropHandler); + const keyboardHandler = component.find('[data-test-subj="lnsDragDrop-keyboardHandler"]'); + keyboardHandler.simulate('keydown', { key: 'Space' }); + keyboardHandler.simulate('keydown', { key: 'Escape' }); + jest.runAllTimers(); + + expect(onDropHandler).not.toHaveBeenCalled(); + expect(setA11yMessage).toBeCalledWith('Movement cancelled'); + keyboardHandler.simulate('keydown', { key: 'Space' }); + keyboardHandler.simulate('keydown', { key: 'ArrowDown' }); + keyboardHandler.simulate('blur'); + + expect(onDropHandler).not.toHaveBeenCalled(); + expect(setA11yMessage).toBeCalledWith('Movement cancelled'); }); test(`Keyboard Navigation: Reordered elements get extra styles to show the reorder effect`, () => { const setA11yMessage = jest.fn(); - const component = mountComponent( - { dragging: { id: '1' }, keyboardMode: true, setA11yMessage }, - jest.fn() - ); + const component = mountComponent({ + dragging: items[0], + keyboardMode: true, + activeDropTarget: { + activeDropTarget: undefined, + dropTargetsByOrder: { + '2,0,0': undefined, + '2,0,1': { ...items[1], onDrop, dropType: 'reorder' }, + '2,0,2': { ...items[2], onDrop, dropType: 'reorder' }, + }, + }, + setA11yMessage, + }); const keyboardHandler = component.find('[data-test-subj="lnsDragDrop-keyboardHandler"]'); keyboardHandler.simulate('keydown', { key: 'Space' }); @@ -475,7 +671,7 @@ describe('DragDrop', () => { component.find('[data-test-subj="lnsDragDrop-translatableDrop"]').at(1).prop('style') ).toEqual(undefined); expect(setA11yMessage).toBeCalledWith( - 'You have moved the item 1 from position 1 to position 2' + 'You have moved the item label1 from position 1 to position 2' ); component @@ -490,63 +686,45 @@ describe('DragDrop', () => { ).toEqual(undefined); }); - test(`Keyboard Navigation: User cannot move an element outside of the group`, () => { - const onDrop = jest.fn(); - const setActiveDropTarget = jest.fn(); - const setA11yMessage = jest.fn(); - const component = mountComponent( - { dragging: { id: '1' }, keyboardMode: true, setActiveDropTarget, setA11yMessage }, - onDrop - ); - const keyboardHandler = component.find('[data-test-subj="lnsDragDrop-keyboardHandler"]'); - - keyboardHandler.simulate('keydown', { key: 'Space' }); - keyboardHandler.simulate('keydown', { key: 'ArrowUp' }); - expect(setActiveDropTarget).not.toHaveBeenCalled(); - - keyboardHandler.simulate('keydown', { key: 'Space' }); - keyboardHandler.simulate('keydown', { key: 'ArrowDown' }); - - expect(setActiveDropTarget).toBeCalledWith({ id: '2' }); - expect(setA11yMessage).toBeCalledWith( - 'You have moved the item 1 from position 1 to position 2' - ); - }); - test(`Keyboard Navigation: User cannot drop element to itself`, () => { - const setActiveDropTarget = jest.fn(); const setA11yMessage = jest.fn(); + const setActiveDropTarget = jest.fn(); const component = mount( 1 2 @@ -557,33 +735,8 @@ describe('DragDrop', () => { keyboardHandler.simulate('keydown', { key: 'Space' }); keyboardHandler.simulate('keydown', { key: 'ArrowUp' }); - expect(setActiveDropTarget).toBeCalledWith({ id: '1' }); - expect(setA11yMessage).toBeCalledWith('You have moved back the item 1 to position 1'); - }); - - test(`Keyboard Navigation: Doesn't call onDrop when movement is cancelled`, () => { - const setA11yMessage = jest.fn(); - const onDrop = jest.fn(); - - const component = mountComponent({ dragging: { id: '1' }, setA11yMessage }, onDrop); - const keyboardHandler = component.find('[data-test-subj="lnsDragDrop-keyboardHandler"]'); - keyboardHandler.simulate('keydown', { key: 'Space' }); - keyboardHandler.simulate('keydown', { key: 'Escape' }); - - jest.runAllTimers(); - - expect(onDrop).not.toHaveBeenCalled(); - expect(setA11yMessage).toBeCalledWith( - 'Movement cancelled. The item has returned to its starting position 1' - ); - keyboardHandler.simulate('keydown', { key: 'Space' }); - keyboardHandler.simulate('keydown', { key: 'ArrowDown' }); - keyboardHandler.simulate('blur'); - - expect(onDrop).not.toHaveBeenCalled(); - expect(setA11yMessage).toBeCalledWith( - 'Movement cancelled. The item has returned to its starting position 1' - ); + expect(setActiveDropTarget).toBeCalledWith(undefined); + expect(setA11yMessage).toBeCalledWith('You have moved the item label1 back to position 1'); }); }); }); diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx index e006e4f5af49e..898071e85ea79 100644 --- a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx +++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx @@ -9,23 +9,23 @@ import './drag_drop.scss'; import React, { useContext, useEffect, memo } from 'react'; import classNames from 'classnames'; import { keys, EuiScreenReaderOnly } from '@elastic/eui'; +import useShallowCompareEffect from 'react-use/lib/useShallowCompareEffect'; import { DragDropIdentifier, + DropIdentifier, DragContext, DragContextState, + nextValidDropTarget, ReorderContext, ReorderState, - reorderAnnouncements, + DropHandler, } from './providers'; +import { announce } from './announcements'; import { trackUiEvent } from '../lens_ui_telemetry'; +import { DropType } from '../types'; export type DroppableEvent = React.DragEvent; -/** - * A function that handles a drop event. - */ -export type DropHandler = (dropped: DragDropIdentifier, dropTarget: DragDropIdentifier) => void; - /** * The base props to the DragDrop component. */ @@ -34,10 +34,6 @@ interface BaseProps { * The CSS class(es) for the root element. */ className?: string; - /** - * The label for accessibility - */ - label?: string; /** * The event handler that fires when an item @@ -62,16 +58,15 @@ interface BaseProps { * Indicates whether or not this component is draggable. */ draggable?: boolean; - /** - * Indicates whether or not the currently dragged item - * can be dropped onto this component. - */ - droppable?: boolean; /** * Additional class names to apply when another element is over the drop target */ - getAdditionalClassesOnEnter?: () => string; + getAdditionalClassesOnEnter?: (dropType?: DropType) => string | undefined; + /** + * Additional class names to apply when another element is droppable for a currently dragged item + */ + getAdditionalClassesOnDroppable?: (dropType?: DropType) => string | undefined; /** * The optional test subject associated with this DOM element. @@ -81,35 +76,29 @@ interface BaseProps { /** * items belonging to the same group that can be reordered */ - reorderableGroup?: DragDropIdentifier[]; + reorderableGroup?: Array<{ id: string }>; /** * Indicates to the user whether the currently dragged item * will be moved or copied */ - dragType?: 'copy' | 'move' | 'reorder'; + dragType?: 'copy' | 'move'; /** - * Indicates to the user whether the drop action will - * replace something that is existing or add a new one + * Indicates the type of a drop - when undefined, the currently dragged item + * cannot be dropped onto this component. */ - dropType?: 'add' | 'replace' | 'reorder'; - + dropType?: DropType; /** - * temporary flag to exclude the draggable elements that don't have keyboard nav yet. To be removed along with the feature development + * Order for keyboard dragging. This takes an array of numbers which will be used to order hierarchically */ - noKeyboardSupportYet?: boolean; + order: number[]; } /** * The props for a draggable instance of that component. */ interface DragInnerProps extends BaseProps { - /** - * The label, which should be attached to the drag event, and which will e.g. - * be used if the element will be dropped into a text field. - */ - label?: string; isDragging: boolean; keyboardMode: boolean; setKeyboardMode: DragContextState['setKeyboardMode']; @@ -124,6 +113,7 @@ interface DragInnerProps extends BaseProps { ) => void; onDragEnd?: () => void; extraKeyboardHandler?: (e: React.KeyboardEvent) => void; + ariaDescribedBy?: string; } /** @@ -131,23 +121,16 @@ interface DragInnerProps extends BaseProps { */ interface DropInnerProps extends BaseProps, DragContextState { isDragging: boolean; - isNotDroppable: boolean; } -/** - * A draggable / droppable item. Items can be both draggable and droppable at - * the same time. - * - * @param props - */ - const lnsLayerPanelDimensionMargin = 8; export const DragDrop = (props: BaseProps) => { const { dragging, setDragging, + registerDropTarget, keyboardMode, setKeyboardMode, activeDropTarget, @@ -155,8 +138,7 @@ export const DragDrop = (props: BaseProps) => { setA11yMessage, } = useContext(DragContext); - const { value, draggable, droppable, reorderableGroup } = props; - + const { value, draggable, dropType, reorderableGroup } = props; const isDragging = !!(draggable && value.id === dragging?.id); const dragProps = { @@ -178,16 +160,17 @@ export const DragDrop = (props: BaseProps) => { setDragging, activeDropTarget, setActiveDropTarget, + registerDropTarget, isDragging, setA11yMessage, isNotDroppable: // If the configuration has provided a droppable flag, but this particular item is not // droppable, then it should be less prominent. Ignores items that are both // draggable and drop targets - !!(droppable === false && dragging && value.id !== dragging.id), + !!(!dropType && dragging && value.id !== dragging.id), }; - if (draggable && !droppable) { + if (draggable && !dropType) { if (reorderableGroup && reorderableGroup.length > 1) { return ( { if ( reorderableGroup && reorderableGroup.length > 1 && - reorderableGroup?.some((i) => i.id === value.id) + reorderableGroup?.some((i) => i.id === dragging?.id) ) { - return ; + return ; } return ; }; -const DragInner = memo(function DragDropInner({ +const DragInner = memo(function DragInner({ dataTestSubj, className, value, @@ -219,16 +202,16 @@ const DragInner = memo(function DragDropInner({ setDragging, setKeyboardMode, setActiveDropTarget, - label = '', + order, keyboardMode, isDragging, activeDropTarget, - onDrop, dragType, onDragStart, onDragEnd, extraKeyboardHandler, - noKeyboardSupportYet, + ariaDescribedBy, + setA11yMessage, }: DragInnerProps) { const dragStart = (e?: DroppableEvent | React.KeyboardEvent) => { // Setting stopPropgagation causes Chrome failures, so @@ -241,7 +224,7 @@ const DragInner = memo(function DragDropInner({ // We only can reach the dragStart method if the element is draggable, // so we know we have DraggableProps if we reach this code. if (e && 'dataTransfer' in e) { - e.dataTransfer.setData('text', label); + e.dataTransfer.setData('text', value.humanData.label); } // Chrome causes issues if you try to render from within a @@ -250,6 +233,7 @@ const DragInner = memo(function DragDropInner({ const currentTarget = e?.currentTarget; setTimeout(() => { setDragging(value); + setA11yMessage(announce.lifted(value.humanData)); if (onDragStart) { onDragStart(currentTarget); } @@ -261,53 +245,78 @@ const DragInner = memo(function DragDropInner({ setDragging(undefined); setActiveDropTarget(undefined); setKeyboardMode(false); + setA11yMessage(announce.cancelled()); if (onDragEnd) { onDragEnd(); } }; - const dropToActiveDropTarget = () => { if (isDragging && activeDropTarget?.activeDropTarget) { trackUiEvent('drop_total'); - if (onDrop) { - onDrop(value, activeDropTarget.activeDropTarget); - } + const { dropType, humanData, onDrop: onTargetDrop } = activeDropTarget.activeDropTarget; + setTimeout(() => setA11yMessage(announce.dropped(value.humanData, humanData, dropType))); + onTargetDrop(value, dropType); } }; + const setNextTarget = (reversed = false) => { + if (!order) { + return; + } + + const nextTarget = nextValidDropTarget( + activeDropTarget, + [order.join(',')], + (el) => el?.dropType !== 'reorder', + reversed + ); + + setActiveDropTarget(nextTarget); + setA11yMessage( + nextTarget + ? announce.selectedTarget(value.humanData, nextTarget?.humanData, nextTarget?.dropType) + : announce.noTarget() + ); + }; return ( -
    - {!noKeyboardSupportYet && ( - -
    ); }); const ReorderableDrop = memo(function ReorderableDrop( - props: DropInnerProps & { reorderableGroup: DragDropIdentifier[] } + props: DropInnerProps & { reorderableGroup: Array<{ id: string }> } ) { const { onDrop, value, - droppable, dragging, setDragging, setKeyboardMode, @@ -595,6 +606,7 @@ const ReorderableDrop = memo(function ReorderableDrop( setActiveDropTarget, reorderableGroup, setA11yMessage, + dropType, } = props; const currentIndex = reorderableGroup.findIndex((i) => i.id === value.id); @@ -628,15 +640,14 @@ const ReorderableDrop = memo(function ReorderableDrop( }, [isReordered, setReorderState, value.id]); const onReorderableDragOver = (e: DroppableEvent) => { - if (!droppable) { + if (!dropType) { return; } e.preventDefault(); // An optimization to prevent a bunch of React churn. - // todo: replace with custom function ? - if (!activeDropTargetMatches) { - setActiveDropTarget(value); + if (!activeDropTargetMatches && dropType && onDrop) { + setActiveDropTarget({ ...value, dropType, onDrop }); } const draggingIndex = reorderableGroup.findIndex((i) => i.id === dragging?.id); @@ -675,14 +686,12 @@ const ReorderableDrop = memo(function ReorderableDrop( setDragging(undefined); setKeyboardMode(false); - if (onDrop && droppable && dragging) { + if (onDrop && dropType && dragging) { trackUiEvent('drop_total'); - - onDrop(dragging, value); - const draggingIndex = reorderableGroup.findIndex((i) => i.id === dragging.id); + onDrop(dragging, 'reorder'); // setTimeout ensures it will run after dragEnd messaging setTimeout(() => - setA11yMessage(reorderAnnouncements.dropped(currentIndex + 1, draggingIndex + 1)) + setA11yMessage(announce.dropped(dragging.humanData, value.humanData, 'reorder')) ); } }; @@ -707,7 +716,7 @@ const ReorderableDrop = memo(function ReorderableDrop(
    void; export type DragDropIdentifier = Record & { id: string; + /** + * The data for accessibility, consists of required label and not required groupLabel and position in group + */ + humanData: HumanData; }; -export interface ActiveDropTarget { - activeDropTarget?: DragDropIdentifier; +export type DropIdentifier = DragDropIdentifier & { + dropType: DropType; + onDrop: DropHandler; +}; + +export interface DropTargets { + activeDropTarget?: DropIdentifier; + dropTargetsByOrder: Record; } /** * The shape of the drag / drop context. @@ -39,11 +56,12 @@ export interface DragContextState { */ setDragging: (dragging?: DragDropIdentifier) => void; - activeDropTarget?: ActiveDropTarget; + activeDropTarget?: DropTargets; - setActiveDropTarget: (newTarget?: DragDropIdentifier) => void; + setActiveDropTarget: (newTarget?: DropIdentifier) => void; setA11yMessage: (message: string) => void; + registerDropTarget: (order: number[], dropTarget?: DropIdentifier) => void; } /** @@ -59,6 +77,7 @@ export const DragContext = React.createContext({ activeDropTarget: undefined, setActiveDropTarget: () => {}, setA11yMessage: () => {}, + registerDropTarget: () => {}, }); /** @@ -89,10 +108,13 @@ export interface ProviderProps { setDragging: (dragging?: DragDropIdentifier) => void; activeDropTarget?: { - activeDropTarget?: DragDropIdentifier; + activeDropTarget?: DropIdentifier; + dropTargetsByOrder: Record; }; - setActiveDropTarget: (newTarget?: DragDropIdentifier) => void; + setActiveDropTarget: (newTarget?: DropIdentifier) => void; + + registerDropTarget: (order: number[], dropTarget?: DropIdentifier) => void; /** * The React children. @@ -116,9 +138,11 @@ export function RootDragDropProvider({ children }: { children: React.ReactNode } const [keyboardModeState, setKeyboardModeState] = useState(false); const [a11yMessageState, setA11yMessageState] = useState(''); const [activeDropTargetState, setActiveDropTargetState] = useState<{ - activeDropTarget?: DragDropIdentifier; + activeDropTarget?: DropIdentifier; + dropTargetsByOrder: Record; }>({ activeDropTarget: undefined, + dropTargetsByOrder: {}, }); const setDragging = useMemo( @@ -131,11 +155,26 @@ export function RootDragDropProvider({ children }: { children: React.ReactNode } ]); const setActiveDropTarget = useMemo( - () => (activeDropTarget?: DragDropIdentifier) => + () => (activeDropTarget?: DropIdentifier) => setActiveDropTargetState((s) => ({ ...s, activeDropTarget })), [setActiveDropTargetState] ); + const registerDropTarget = useMemo( + () => (order: number[], dropTarget?: DropIdentifier) => { + return setActiveDropTargetState((s) => { + return { + ...s, + dropTargetsByOrder: { + ...s.dropTargetsByOrder, + [order.join(',')]: dropTarget, + }, + }; + }); + }, + [setActiveDropTargetState] + ); + return (
    {children} @@ -155,9 +195,14 @@ export function RootDragDropProvider({ children }: { children: React.ReactNode }

    {a11yMessageState}

    +

    + {i18n.translate('xpack.lens.dragDrop.keyboardInstructionsReorder', { + defaultMessage: `Press enter or space to dragging. When dragging, use the up/down arrow keys to reorder items in the group and left/right arrow keys to choose drop targets outside of the group. Press enter or space again to finish.`, + })} +

    {i18n.translate('xpack.lens.dragDrop.keyboardInstructions', { - defaultMessage: `Press enter or space to start reordering the dimension group. When dragging, use arrow keys to reorder. Press enter or space again to finish.`, + defaultMessage: `Press enter or space to start dragging. When dragging, use the left/right arrow keys to move between drop targets. Press enter or space again to finish.`, })}

    @@ -167,6 +212,45 @@ export function RootDragDropProvider({ children }: { children: React.ReactNode } ); } +export function nextValidDropTarget( + activeDropTarget: DropTargets | undefined, + draggingOrder: [string], + filterElements: (el: DragDropIdentifier) => boolean = () => true, + reverse = false +) { + if (!activeDropTarget) { + return; + } + + const filteredTargets = [...Object.entries(activeDropTarget.dropTargetsByOrder)].filter( + ([, dropTarget]) => dropTarget && filterElements(dropTarget) + ); + + const nextDropTargets = [...filteredTargets, draggingOrder].sort(([orderA], [orderB]) => { + const parsedOrderA = orderA.split(',').map((v) => Number(v)); + const parsedOrderB = orderB.split(',').map((v) => Number(v)); + + const relevantLevel = parsedOrderA.findIndex((v, i) => parsedOrderA[i] !== parsedOrderB[i]); + return parsedOrderA[relevantLevel] - parsedOrderB[relevantLevel]; + }); + + let currentActiveDropIndex = nextDropTargets.findIndex( + ([_, dropTarget]) => dropTarget?.id === activeDropTarget?.activeDropTarget?.id + ); + + if (currentActiveDropIndex === -1) { + currentActiveDropIndex = nextDropTargets.findIndex( + ([targetOrder]) => targetOrder === draggingOrder[0] + ); + } + + const previousElement = + (nextDropTargets.length + currentActiveDropIndex - 1) % nextDropTargets.length; + const nextElement = (currentActiveDropIndex + 1) % nextDropTargets.length; + + return nextDropTargets[reverse ? previousElement : nextElement][1]; +} + /** * A React drag / drop provider that derives its state from a RootDragDropProvider. If * part of a React application is rendered separately from the root, this provider can @@ -182,6 +266,7 @@ export function ChildDragDropProvider({ activeDropTarget, setActiveDropTarget, setA11yMessage, + registerDropTarget, children, }: ProviderProps) { const value = useMemo( @@ -193,6 +278,7 @@ export function ChildDragDropProvider({ activeDropTarget, setActiveDropTarget, setA11yMessage, + registerDropTarget, }), [ setDragging, @@ -202,6 +288,7 @@ export function ChildDragDropProvider({ setKeyboardMode, keyboardMode, setA11yMessage, + registerDropTarget, ] ); return {children}; @@ -211,7 +298,7 @@ export interface ReorderState { /** * Ids of the elements that are translated up or down */ - reorderedItems: DragDropIdentifier[]; + reorderedItems: Array<{ id: string; height?: number }>; /** * Direction of the move of dragged element in the reordered list @@ -282,51 +369,3 @@ export function ReorderProvider({
    ); } - -export const reorderAnnouncements = { - moved: (itemLabel: string, position: number, prevPosition: number) => { - return prevPosition === position - ? i18n.translate('xpack.lens.dragDrop.elementMovedBack', { - defaultMessage: `You have moved back the item {itemLabel} to position {prevPosition}`, - values: { - itemLabel, - prevPosition, - }, - }) - : i18n.translate('xpack.lens.dragDrop.elementMoved', { - defaultMessage: `You have moved the item {itemLabel} from position {prevPosition} to position {position}`, - values: { - itemLabel, - position, - prevPosition, - }, - }); - }, - - lifted: (itemLabel: string, position: number) => - i18n.translate('xpack.lens.dragDrop.elementLifted', { - defaultMessage: `You have lifted an item {itemLabel} in position {position}`, - values: { - itemLabel, - position, - }, - }), - - cancelled: (position: number) => - i18n.translate('xpack.lens.dragDrop.abortMessageReorder', { - defaultMessage: - 'Movement cancelled. The item has returned to its starting position {position}', - values: { - position, - }, - }), - dropped: (position: number, prevPosition: number) => - i18n.translate('xpack.lens.dragDrop.dropMessageReorder', { - defaultMessage: - 'You have dropped the item. You have moved the item from position {prevPosition} to positon {position}', - values: { - position, - prevPosition, - }, - }), -}; diff --git a/x-pack/plugins/lens/public/drag_drop/readme.md b/x-pack/plugins/lens/public/drag_drop/readme.md index e48564a074986..55a9e3157c247 100644 --- a/x-pack/plugins/lens/public/drag_drop/readme.md +++ b/x-pack/plugins/lens/public/drag_drop/readme.md @@ -56,7 +56,7 @@ const { dragging } = useContext(DragContext); return ( onChange([...items, item])} > {items.map((x) => ( @@ -86,11 +86,14 @@ The children `DragDrop` components must have props defined as in the example: key={f.id} draggable droppable - dragType="reorder" + dragType="move" dropType="reorder" reorderableGroup={fields} // consists all reorderable elements in the group, eg. [{id:'3'}, {id:'5'}, {id:'1'}] value={{ id: f.id, + humanData: { + label: 'Label' + } }} onDrop={/*handler*/} > diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx index e3a30883a2209..a3d5c6fd22fcd 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx @@ -49,6 +49,16 @@ export function ColorIndicator({ })} /> )} + {accessorConfig.triggerIcon === 'invisible' && ( + + )} {accessorConfig.triggerIcon === 'colorBy' && ( - el2 && isDraggedOperation(el2) && el1.groupId === el2.groupId && el1.columnId !== el2.columnId; +const getAdditionalClassesOnEnter = (dropType?: string) => { + if ( + dropType === 'field_replace' || + dropType === 'replace_compatible' || + dropType === 'replace_incompatible' + ) { + return 'lnsDragDrop-isReplacing'; + } +}; -const isSelf = (el1: DragDropIdentifier, el2?: DragDropIdentifier) => - isDraggedOperation(el2) && el1.columnId === el2.columnId; +const getAdditionalClassesOnDroppable = (dropType?: string) => { + if (dropType === 'move_incompatible' || dropType === 'replace_incompatible') { + return 'lnsDragDrop-notCompatible'; + } +}; export function DraggableDimensionButton({ layerId, @@ -34,7 +49,11 @@ export function DraggableDimensionButton({ layerId: string; groupIndex: number; layerIndex: number; - onDrop: (droppedItem: DragDropIdentifier, dropTarget: DragDropIdentifier) => void; + onDrop: ( + droppedItem: DragDropIdentifier, + dropTarget: DragDropIdentifier, + dropType?: DropType + ) => void; group: VisualizationDimensionGroupConfig; label: string; children: React.ReactElement; @@ -43,66 +62,52 @@ export function DraggableDimensionButton({ accessorIndex: number; columnId: string; }) { - const value = useMemo(() => { - return { + const dropType = layerDatasource.getDropTypes({ + ...layerDatasourceDropProps, + columnId, + filterOperations: group.filterOperations, + groupId: group.groupId, + }); + + const value = useMemo( + () => ({ columnId, groupId: group.groupId, layerId, id: columnId, - }; - }, [columnId, group.groupId, layerId]); - - const { dragging } = dragDropContext; - - const isCurrentGroup = group.groupId === dragging?.groupId; - const isOperationDragged = isDraggedOperation(dragging); - const canHandleDrop = - Boolean(dragDropContext.dragging) && - layerDatasource.canHandleDrop({ - ...layerDatasourceDropProps, - columnId, - filterOperations: group.filterOperations, - }); - - const dragType = isSelf(value, dragging) - ? 'move' - : isOperationDragged && isCurrentGroup - ? 'reorder' - : 'copy'; - - const dropType = isOperationDragged ? (!isCurrentGroup ? 'replace' : 'reorder') : 'add'; - - const isCompatibleFromOtherGroup = !isCurrentGroup && canHandleDrop; - - const isDroppable = isOperationDragged - ? dragType === 'reorder' - ? isFromTheSameGroup(value, dragging) - : isCompatibleFromOtherGroup - : canHandleDrop; + dropType, + humanData: { + label, + groupLabel: group.groupLabel, + position: accessorIndex + 1, + }, + }), + [columnId, group.groupId, accessorIndex, layerId, dropType, label, group.groupLabel] + ); + // todo: simplify by id and use drop targets? const reorderableGroup = useMemo( () => - group.accessors.map((a) => ({ - columnId: a.columnId, - id: a.columnId, - groupId: group.groupId, - layerId, + group.accessors.map((g) => ({ + id: g.columnId, })), - [group, layerId] + [group.accessors] ); return (
    1 ? reorderableGroup : undefined} value={value} - label={label} - droppable={dragging && isDroppable} - onDrop={onDrop} + onDrop={(drag: DragDropIdentifier, selectedDropType?: DropType) => + onDrop(drag, value, selectedDropType) + } > {children} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/empty_dimension_button.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/empty_dimension_button.tsx index 1116cef1aa3ef..a83d4bde0383c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/empty_dimension_button.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/empty_dimension_button.tsx @@ -5,17 +5,26 @@ * 2.0. */ -import React, { useMemo } from 'react'; +import React, { useMemo, useState, useEffect } from 'react'; import { EuiButtonEmpty } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { generateId } from '../../../id_generator'; -import { DragDrop, DragDropIdentifier, DragContextState } from '../../../drag_drop'; -import { Datasource, VisualizationDimensionGroupConfig, isDraggedOperation } from '../../../types'; +import { DragDrop, DragDropIdentifier } from '../../../drag_drop'; +import { Datasource, VisualizationDimensionGroupConfig, DropType } from '../../../types'; import { LayerDatasourceDropProps } from './types'; +const label = i18n.translate('xpack.lens.indexPattern.emptyDimensionButton', { + defaultMessage: 'Empty dimension', +}); + +const getAdditionalClassesOnDroppable = (dropType?: string) => { + if (dropType === 'move_incompatible' || dropType === 'replace_incompatible') { + return 'lnsDragDrop-notCompatible'; + } +}; + export function EmptyDimensionButton({ - dragDropContext, group, layerDatasource, layerDatasourceDropProps, @@ -25,48 +34,58 @@ export function EmptyDimensionButton({ onClick, onDrop, }: { - dragDropContext: DragContextState; layerId: string; groupIndex: number; layerIndex: number; onClick: (id: string) => void; - onDrop: (droppedItem: DragDropIdentifier, dropTarget: DragDropIdentifier) => void; + onDrop: ( + droppedItem: DragDropIdentifier, + dropTarget: DragDropIdentifier, + dropType?: DropType + ) => void; group: VisualizationDimensionGroupConfig; - layerDatasource: Datasource; layerDatasourceDropProps: LayerDatasourceDropProps; }) { - const handleDrop = (droppedItem: DragDropIdentifier) => onDrop(droppedItem, value); + const itemIndex = group.accessors.length; - const value = useMemo(() => { - const newId = generateId(); - return { - columnId: newId, + const [newColumnId, setNewColumnId] = useState(generateId()); + useEffect(() => { + setNewColumnId(generateId()); + }, [itemIndex]); + + const dropType = layerDatasource.getDropTypes({ + ...layerDatasourceDropProps, + columnId: newColumnId, + filterOperations: group.filterOperations, + groupId: group.groupId, + }); + + const value = useMemo( + () => ({ + columnId: newColumnId, groupId: group.groupId, layerId, - isNew: true, - id: newId, - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [group.accessors.length, group.groupId, layerId]); + id: newColumnId, + dropType, + humanData: { + label, + groupLabel: group.groupLabel, + position: itemIndex + 1, + }, + }), + [dropType, newColumnId, group.groupId, layerId, group.groupLabel, itemIndex] + ); return (
    onDrop(droppedItem, value, selectedDropType)} + dropType={dropType} >
    {}, setA11yMessage: jest.fn(), + registerDropTarget: jest.fn(), }; describe('LayerPanel', () => { @@ -224,7 +225,7 @@ describe('LayerPanel', () => { }); it('should not update the visualization if the datasource is incomplete', () => { - (generateId as jest.Mock).mockReturnValueOnce(`newid`); + (generateId as jest.Mock).mockReturnValue(`newid`); const updateAll = jest.fn(); const updateDatasource = jest.fn(); @@ -439,9 +440,14 @@ describe('LayerPanel', () => { ], }); - mockDatasource.canHandleDrop.mockReturnValue(true); + mockDatasource.getDropTypes.mockReturnValue('field_add'); - const draggingField = { field: { name: 'dragged' }, indexPatternId: 'a', id: '1' }; + const draggingField = { + field: { name: 'dragged' }, + indexPatternId: 'a', + id: '1', + humanData: { label: 'Label' }, + }; const component = mountWithIntl( @@ -449,7 +455,7 @@ describe('LayerPanel', () => { ); - expect(mockDatasource.canHandleDrop).toHaveBeenCalledWith( + expect(mockDatasource.getDropTypes).toHaveBeenCalledWith( expect.objectContaining({ dragDropContext: expect.objectContaining({ dragging: draggingField, @@ -482,9 +488,16 @@ describe('LayerPanel', () => { ], }); - mockDatasource.canHandleDrop.mockImplementation(({ columnId }) => columnId !== 'a'); + mockDatasource.getDropTypes.mockImplementation(({ columnId }) => + columnId !== 'a' ? 'field_replace' : undefined + ); - const draggingField = { field: { name: 'dragged' }, indexPatternId: 'a', id: '1' }; + const draggingField = { + field: { name: 'dragged' }, + indexPatternId: 'a', + id: '1', + humanData: { label: 'Label' }, + }; const component = mountWithIntl( @@ -492,13 +505,13 @@ describe('LayerPanel', () => { ); - expect(mockDatasource.canHandleDrop).toHaveBeenCalledWith( + expect(mockDatasource.getDropTypes).toHaveBeenCalledWith( expect.objectContaining({ columnId: 'a' }) ); expect( - component.find('[data-test-subj="lnsGroup"] DragDrop').first().prop('droppable') - ).toEqual(false); + component.find('[data-test-subj="lnsGroup"] DragDrop').first().prop('dropType') + ).toEqual(undefined); component .find('[data-test-subj="lnsGroup"] DragDrop') @@ -533,9 +546,15 @@ describe('LayerPanel', () => { ], }); - mockDatasource.canHandleDrop.mockReturnValue(true); + mockDatasource.getDropTypes.mockReturnValue('replace_compatible'); - const draggingOperation = { layerId: 'first', columnId: 'a', groupId: 'a', id: 'a' }; + const draggingOperation = { + layerId: 'first', + columnId: 'a', + groupId: 'a', + id: 'a', + humanData: { label: 'Label' }, + }; const component = mountWithIntl( @@ -543,7 +562,7 @@ describe('LayerPanel', () => { ); - expect(mockDatasource.canHandleDrop).toHaveBeenCalledWith( + expect(mockDatasource.getDropTypes).toHaveBeenCalledWith( expect.objectContaining({ dragDropContext: expect.objectContaining({ dragging: draggingOperation, @@ -588,7 +607,13 @@ describe('LayerPanel', () => { ], }); - const draggingOperation = { layerId: 'first', columnId: 'a', groupId: 'a', id: 'a' }; + const draggingOperation = { + layerId: 'first', + columnId: 'a', + groupId: 'a', + id: 'a', + humanData: { label: 'Label' }, + }; const component = mountWithIntl( @@ -596,15 +621,10 @@ describe('LayerPanel', () => { ); - component.find(DragDrop).at(1).prop('onDrop')!(draggingOperation, { - layerId: 'first', - columnId: 'b', - groupId: 'a', - id: 'b', - }); + component.find(DragDrop).at(1).prop('onDrop')!(draggingOperation, 'reorder'); expect(mockDatasource.onDrop).toHaveBeenCalledWith( expect.objectContaining({ - groupId: 'a', + dropType: 'reorder', droppedItem: draggingOperation, }) ); @@ -624,22 +644,24 @@ describe('LayerPanel', () => { ], }); - const draggingOperation = { layerId: 'first', columnId: 'a', groupId: 'a', id: 'a' }; + const draggingOperation = { + layerId: 'first', + columnId: 'a', + groupId: 'a', + id: 'a', + humanData: { label: 'Label' }, + }; const component = mountWithIntl( ); - - component.find('[data-test-subj="lnsGroup"] DragDrop').at(2).prop('onDrop')!( - (draggingOperation as unknown) as DroppableEvent - ); + component.find(DragDrop).at(2).prop('onDrop')!(draggingOperation, 'duplicate_in_group'); expect(mockDatasource.onDrop).toHaveBeenCalledWith( expect.objectContaining({ - groupId: 'a', + dropType: 'duplicate_in_group', droppedItem: draggingOperation, - isNew: true, }) ); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index bfdd3ec3bb59a..80e9ed05b982d 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -11,7 +11,7 @@ import React, { useContext, useState, useEffect, useMemo, useCallback } from 're import { EuiPanel, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { NativeRenderer } from '../../../native_renderer'; -import { StateSetter, Visualization } from '../../../types'; +import { StateSetter, Visualization, DraggedOperation, DropType } from '../../../types'; import { DragContext, DragDropIdentifier, @@ -115,13 +115,19 @@ export function LayerPanel( const layerDatasourceOnDrop = layerDatasource.onDrop; const onDrop = useMemo(() => { - return (droppedItem: DragDropIdentifier, targetItem: DragDropIdentifier) => { - const { columnId, groupId, layerId: targetLayerId, isNew } = (targetItem as unknown) as { - groupId: string; - columnId: string; - layerId: string; - isNew?: boolean; - }; + return ( + droppedItem: DragDropIdentifier, + targetItem: DragDropIdentifier, + dropType?: DropType + ) => { + if (!dropType) { + return; + } + const { + columnId, + groupId, + layerId: targetLayerId, + } = (targetItem as unknown) as DraggedOperation; // TODO: correct misleading name const filterOperations = groups.find(({ groupId: gId }) => gId === targetItem.groupId)?.filterOperations || @@ -131,10 +137,9 @@ export function LayerPanel( ...layerDatasourceDropProps, droppedItem, columnId, - groupId, layerId: targetLayerId, - isNew, filterOperations, + dropType, }); if (dropResult) { updateVisualization( @@ -317,7 +322,6 @@ export function LayerPanel( {group.supportsMoreColumns ? ( { getDatasourceSuggestionsForVisualizeField: () => [generateSuggestion()], renderDataPanel: (_element, { dragDropContext: { setDragging, dragging } }) => { if (!dragging || dragging.id !== 'draggedField') { - setDragging({ id: 'draggedField' }); + setDragging({ id: 'draggedField', humanData: { label: 'draggedField' } }); } }, }, @@ -1344,8 +1344,9 @@ describe('editor_frame', () => { indexPatternId: '1', field: {}, id: '1', + humanData: { label: 'draggedField' }, }, - { id: 'lnsWorkspace' } + 'field_replace' ); }); @@ -1424,7 +1425,7 @@ describe('editor_frame', () => { getDatasourceSuggestionsForVisualizeField: () => [generateSuggestion()], renderDataPanel: (_element, { dragDropContext: { setDragging, dragging } }) => { if (!dragging || dragging.id !== 'draggedField') { - setDragging({ id: 'draggedField' }); + setDragging({ id: 'draggedField', humanData: { label: '1' } }); } }, }, @@ -1445,8 +1446,11 @@ describe('editor_frame', () => { indexPatternId: '1', field: {}, id: '1', + humanData: { + label: 'label', + }, }, - { id: 'lnsWorkspace' } + 'field_replace' ); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts index bc2abb694eefe..0e8c9b962b995 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts @@ -532,7 +532,7 @@ describe('suggestion helpers', () => { { mockindexpattern: { state: mockDatasourceState, isLoading: false }, }, - { id: 'myfield' }, + { id: 'myfield', humanData: { label: 'myfieldLabel' } }, ]; }); @@ -543,6 +543,9 @@ describe('suggestion helpers', () => { mockDatasourceState, { id: 'myfield', + humanData: { + label: 'myfieldLabel', + }, } ); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx index e3385f504763c..48aa56efdb3cc 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx @@ -775,7 +775,7 @@ describe('workspace_panel', () => { let mockGetSuggestionForField: jest.Mock; let frame: jest.Mocked; - const draggedField = { id: 'field' }; + const draggedField = { id: 'field', humanData: { label: 'Label' } }; beforeEach(() => { frame = createMockFramePublicAPI(); @@ -793,6 +793,7 @@ describe('workspace_panel', () => { keyboardMode={false} setKeyboardMode={() => {}} setA11yMessage={() => {}} + registerDropTarget={jest.fn()} > { }); initComponent(); - instance.find(DragDrop).prop('onDrop')!(draggedField, { id: 'lnsWorkspace' }); + instance.find(DragDrop).prop('onDrop')!(draggedField, 'field_replace'); expect(mockDispatch).toHaveBeenCalledWith({ type: 'SWITCH_VISUALIZATION', @@ -850,12 +851,12 @@ describe('workspace_panel', () => { visualizationState: {}, }); initComponent(); - expect(instance.find(DragDrop).prop('droppable')).toBeTruthy(); + expect(instance.find(DragDrop).prop('dropType')).toBeTruthy(); }); it('should refuse to drop if there are no suggestions', () => { initComponent(); - expect(instance.find(DragDrop).prop('droppable')).toBeFalsy(); + expect(instance.find(DragDrop).prop('dropType')).toBeFalsy(); }); }); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 208dc823c314c..2c4cecd356ced 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -84,7 +84,17 @@ interface WorkspaceState { expandError: boolean; } -const workspaceDropValue = { id: 'lnsWorkspace' }; +const dropProps = { + value: { + id: 'lnsWorkspace', + humanData: { + label: i18n.translate('xpack.lens.editorFrame.workspaceLabel', { + defaultMessage: 'Workspace', + }), + }, + }, + order: [1, 0, 0, 0], +}; // Exported for testing purposes only. export const WorkspacePanel = React.memo(function WorkspacePanel({ @@ -302,9 +312,10 @@ export const WorkspacePanel = React.memo(function WorkspacePanel({ className="lnsWorkspacePanel__dragDrop" dataTestSubj="lnsWorkspace" draggable={false} - droppable={Boolean(suggestionForDraggedField)} + dropType={suggestionForDraggedField ? 'field_add' : undefined} onDrop={onDrop} - value={workspaceDropValue} + value={dropProps.value} + order={dropProps.order} >
    {renderVisualization()} diff --git a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx index 9bc4e5401f070..61404dd1b71be 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx @@ -88,7 +88,7 @@ export function createMockDatasource(id: string): DatasourceMock { uniqueLabels: jest.fn((_state) => ({})), renderDimensionTrigger: jest.fn(), renderDimensionEditor: jest.fn(), - canHandleDrop: jest.fn(), + getDropTypes: jest.fn(), onDrop: jest.fn(), // this is an additional property which doesn't exist on real datasources diff --git a/x-pack/plugins/lens/public/index.ts b/x-pack/plugins/lens/public/index.ts index cd18c66437da8..fa5a9f9289e92 100644 --- a/x-pack/plugins/lens/public/index.ts +++ b/x-pack/plugins/lens/public/index.ts @@ -25,10 +25,7 @@ export type { PieLayerState, SharedPieLayerState, } from './pie_visualization/types'; -export type { - DatatableVisualizationState, - DatatableLayerState, -} from './datatable_visualization/visualization'; +export type { DatatableVisualizationState } from './datatable_visualization/visualization'; export type { MetricState } from './metric_visualization/types'; export type { IndexPatternPersistedState, diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx index e062c152f8ec4..03f281e90f6b5 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx @@ -281,7 +281,7 @@ describe('IndexPattern Data Panel', () => { setState={setStateSpy} dragDropContext={{ ...createMockedDragDropContext(), - dragging: { id: '1' }, + dragging: { id: '1', humanData: { label: 'Label' } }, }} /> ); @@ -303,7 +303,7 @@ describe('IndexPattern Data Panel', () => { setState={jest.fn()} dragDropContext={{ ...createMockedDragDropContext(), - dragging: { id: '1' }, + dragging: { id: '1', humanData: { label: 'Label' } }, }} changeIndexPattern={jest.fn()} /> @@ -338,7 +338,7 @@ describe('IndexPattern Data Panel', () => { setState, dragDropContext: { ...createMockedDragDropContext(), - dragging: { id: '1' }, + dragging: { id: '1', humanData: { label: 'Label' } }, }, dateRange: { fromDate: '2019-01-01', toDate: '2020-01-01' }, state: { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx index 3273cdbfe1742..c26d35c4d9a5d 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx @@ -106,9 +106,6 @@ const bytesColumn: IndexPatternColumn = { * * - Dimension trigger: Not tested here * - Dimension editor component: First half of the tests - * - * - canHandleDrop: Tests for dropping of fields or other dimensions - * - onDrop: Correct application of drop logic */ describe('IndexPatternDimensionEditorPanel', () => { let state: IndexPatternPrivateState; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.test.ts index 8c411aa3a5a6c..b374be98748f0 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.test.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.test.ts @@ -7,14 +7,14 @@ import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public'; import { IndexPatternDimensionEditorProps } from './dimension_panel'; -import { onDrop, canHandleDrop } from './droppable'; +import { onDrop, getDropTypes } from './droppable'; import { DragContextState } from '../../drag_drop'; import { createMockedDragDropContext } from '../mocks'; import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup, CoreSetup } from 'kibana/public'; import { IStorageWrapper } from 'src/plugins/kibana_utils/public'; import { IndexPatternPrivateState } from '../types'; import { documentField } from '../document_field'; -import { OperationMetadata } from '../../types'; +import { OperationMetadata, DropType } from '../../types'; import { IndexPatternColumn } from '../operations'; import { getFieldByNameFactory } from '../pure_helpers'; @@ -66,6 +66,23 @@ const expectedIndexPatterns = { }, }; +const defaultDragging = { + columnId: 'col2', + groupId: 'a', + layerId: 'first', + id: 'col2', + humanData: { + label: 'Column 2', + }, +}; + +const draggingField = { + field: { type: 'number', name: 'bytes', aggregatable: true }, + indexPatternId: 'foo', + id: 'bar', + humanData: { label: 'Label' }, +}; + /** * The datasource exposes four main pieces of code which are tested at * an integration test level. The main reason for this fairly high level @@ -75,7 +92,7 @@ const expectedIndexPatterns = { * - Dimension trigger: Not tested here * - Dimension editor component: First half of the tests * - * - canHandleDrop: Tests for dropping of fields or other dimensions + * - getDropTypes: Returns drop types that are possible for the current dragging field or other dimension * - onDrop: Correct application of drop logic */ describe('IndexPatternDimensionEditorPanel', () => { @@ -157,522 +174,671 @@ describe('IndexPatternDimensionEditorPanel', () => { jest.clearAllMocks(); }); - it('is not droppable if no drag is happening', () => { - expect(canHandleDrop({ ...defaultProps, dragDropContext })).toBe(false); - }); + const groupId = 'a'; + describe('getDropTypes', () => { + it('returns undefined if no drag is happening', () => { + expect(getDropTypes({ ...defaultProps, groupId, dragDropContext })).toBe(undefined); + }); - it('is not droppable if the dragged item has no field', () => { - expect( - canHandleDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging: { name: 'bar', id: 'bar' }, - }, - }) - ).toBe(false); - }); + it('returns undefined if the dragged item has no field', () => { + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: { name: 'bar', id: 'bar', humanData: { label: 'Label' } }, + }, + }) + ).toBe(undefined); + }); - it('is not droppable if field is not supported by filterOperations', () => { - expect( - canHandleDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging: { - indexPatternId: 'foo', - field: { type: 'string', name: 'mystring', aggregatable: true }, - id: 'mystring', + it('returns undefined if field is not supported by filterOperations', () => { + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: { + indexPatternId: 'foo', + field: { type: 'string', name: 'mystring', aggregatable: true }, + id: 'mystring', + humanData: { label: 'Label' }, + }, + }, + filterOperations: () => false, + }) + ).toBe(undefined); + }); + + it('returns remove_add if the field is supported by filterOperations and the dropTarget is an existing column', () => { + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: draggingField, + }, + filterOperations: (op: OperationMetadata) => op.dataType === 'number', + }) + ).toBe('field_replace'); + }); + + it('returns undefined if the field belongs to another index pattern', () => { + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: { + field: { type: 'number', name: 'bar', aggregatable: true }, + indexPatternId: 'foo2', + id: 'bar', + humanData: { label: 'Label' }, + }, + }, + filterOperations: (op: OperationMetadata) => op.dataType === 'number', + }) + ).toBe(undefined); + }); + + it('returns undefined if the dragged field is already in use by this operation', () => { + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: { + field: { + name: 'timestamp', + displayName: 'timestampLabel', + type: 'date', + aggregatable: true, + searchable: true, + exists: true, + }, + indexPatternId: 'foo', + id: 'bar', + humanData: { label: 'Label' }, + }, + }, + }) + ).toBe(undefined); + }); + + it('returns move if the dragged column is compatible', () => { + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: { + columnId: 'col1', + groupId: 'b', + layerId: 'first', + id: 'col1', + humanData: { label: 'Label' }, + }, + }, + columnId: 'col2', + }) + ).toBe('move_compatible'); + }); + + it('returns undefined if the dragged column from different group uses the same field as the dropTarget', () => { + const testState = { ...state }; + testState.layers.first = { + indexPatternId: 'foo', + columnOrder: ['col1', 'col2', 'col3'], + columns: { + col1: testState.layers.first.columns.col1, + + col2: { + label: 'Date histogram of timestamp (1)', + customLabel: true, + dataType: 'date', + isBucketed: true, + + // Private + operationType: 'date_histogram', + params: { + interval: '1d', + }, + sourceField: 'timestamp', }, }, - filterOperations: () => false, - }) - ).toBe(false); - }); + }; - it('is droppable if the field is supported by filterOperations', () => { - expect( - canHandleDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging: { - field: { type: 'number', name: 'bytes', aggregatable: true }, - indexPatternId: 'foo', - id: 'bar', + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: { + columnId: 'col1', + groupId: 'b', + layerId: 'first', + id: 'col1', + humanData: { label: 'Label' }, + }, + }, + columnId: 'col2', + }) + ).toEqual(undefined); + }); + + it('returns replace_incompatible if dropping column to existing incompatible column', () => { + const testState = { ...state }; + testState.layers.first = { + indexPatternId: 'foo', + columnOrder: ['col1', 'col2', 'col3'], + columns: { + col1: testState.layers.first.columns.col1, + + col2: { + label: 'Sum of bytes', + dataType: 'number', + isBucketed: false, + + // Private + operationType: 'sum', + sourceField: 'bytes', }, }, - filterOperations: (op: OperationMetadata) => op.dataType === 'number', - }) - ).toBe(true); - }); + }; - it('is not droppable if the field belongs to another index pattern', () => { - expect( - canHandleDrop({ + expect( + getDropTypes({ + ...defaultProps, + groupId, + dragDropContext: { + ...dragDropContext, + dragging: { + columnId: 'col1', + groupId: 'b', + layerId: 'first', + id: 'col1', + humanData: { label: 'Label' }, + }, + }, + columnId: 'col2', + filterOperations: (op: OperationMetadata) => op.isBucketed === false, + }) + ).toEqual('replace_incompatible'); + }); + }); + describe('onDrop', () => { + it('appends the dropped column when a field is dropped', () => { + onDrop({ ...defaultProps, dragDropContext: { ...dragDropContext, - dragging: { - field: { type: 'number', name: 'bar', aggregatable: true }, - indexPatternId: 'foo2', - id: 'bar', - }, + dragging: draggingField, }, + droppedItem: draggingField, + dropType: 'field_replace', + columnId: 'col2', filterOperations: (op: OperationMetadata) => op.dataType === 'number', - }) - ).toBe(false); - }); + }); - it('is not droppable if the dragged field is already in use by this operation', () => { - expect( - canHandleDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging: { - field: { - name: 'timestamp', - displayName: 'timestampLabel', - type: 'date', - aggregatable: true, - searchable: true, - exists: true, + expect(setState).toBeCalledTimes(1); + expect(setState).toHaveBeenCalledWith({ + ...state, + layers: { + first: { + ...state.layers.first, + columnOrder: ['col1', 'col2'], + columns: { + ...state.layers.first.columns, + col2: expect.objectContaining({ + dataType: 'number', + sourceField: 'bytes', + }), }, - indexPatternId: 'foo', - id: 'bar', }, }, - }) - ).toBe(false); - }); + }); + }); - it('is droppable if the dragged column is compatible', () => { - expect( - canHandleDrop({ + it('selects the specific operation that was valid on drop', () => { + onDrop({ ...defaultProps, dragDropContext: { ...dragDropContext, - dragging: { - columnId: 'col1', - groupId: 'a', - layerId: 'first', - id: 'col1', - }, + dragging: draggingField, }, + droppedItem: draggingField, columnId: 'col2', - }) - ).toBe(true); - }); + filterOperations: (op: OperationMetadata) => op.isBucketed, + dropType: 'field_replace', + }); - it('is not droppable if the dragged column is the same as the current column', () => { - expect( - canHandleDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging: { - columnId: 'col1', - groupId: 'a', - layerId: 'first', - id: 'bar', + expect(setState).toBeCalledTimes(1); + expect(setState).toHaveBeenCalledWith({ + ...state, + layers: { + first: { + ...state.layers.first, + columnOrder: ['col1', 'col2'], + columns: { + ...state.layers.first.columns, + col2: expect.objectContaining({ + dataType: 'number', + sourceField: 'bytes', + }), + }, }, }, - }) - ).toBe(false); - }); + }); + }); - it('is not droppable if the dragged column is incompatible', () => { - expect( - canHandleDrop({ + it('updates a column when a field is dropped', () => { + onDrop({ ...defaultProps, dragDropContext: { ...dragDropContext, - dragging: { - columnId: 'col1', - groupId: 'a', - layerId: 'first', - id: 'bar', - }, + dragging: draggingField, }, - columnId: 'col2', + droppedItem: draggingField, filterOperations: (op: OperationMetadata) => op.dataType === 'number', - }) - ).toBe(false); - }); - - it('appends the dropped column when a field is dropped', () => { - const dragging = { - field: { type: 'number', name: 'bytes', aggregatable: true }, - indexPatternId: 'foo', - id: 'bar', - }; - - onDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging, - }, - droppedItem: dragging, - columnId: 'col2', - filterOperations: (op: OperationMetadata) => op.dataType === 'number', - groupId: '1', - }); + dropType: 'field_replace', + }); - expect(setState).toBeCalledTimes(1); - expect(setState).toHaveBeenCalledWith({ - ...state, - layers: { - first: { - ...state.layers.first, - columnOrder: ['col1', 'col2'], - columns: { - ...state.layers.first.columns, - col2: expect.objectContaining({ - dataType: 'number', - sourceField: 'bytes', + expect(setState).toBeCalledTimes(1); + expect(setState).toHaveBeenCalledWith({ + ...state, + layers: { + first: expect.objectContaining({ + columns: expect.objectContaining({ + col1: expect.objectContaining({ + dataType: 'number', + sourceField: 'bytes', + }), }), - }, + }), }, - }, + }); }); - }); - it('selects the specific operation that was valid on drop', () => { - const dragging = { - field: { type: 'string', name: 'source', aggregatable: true }, - indexPatternId: 'foo', - id: 'bar', - }; - onDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging, - }, - droppedItem: dragging, - columnId: 'col2', - filterOperations: (op: OperationMetadata) => op.isBucketed, - groupId: '1', - }); - - expect(setState).toBeCalledTimes(1); - expect(setState).toHaveBeenCalledWith({ - ...state, - layers: { - first: { - ...state.layers.first, - columnOrder: ['col2', 'col1'], - columns: { - ...state.layers.first.columns, - col2: expect.objectContaining({ - dataType: 'string', - sourceField: 'source', - }), + it('keeps the operation when dropping a different compatible field', () => { + const dragging = { + field: { name: 'memory', type: 'number', aggregatable: true }, + indexPatternId: 'foo', + id: '1', + humanData: { label: 'Label' }, + }; + onDrop({ + ...defaultProps, + dragDropContext: { + ...dragDropContext, + dragging, + }, + droppedItem: { + field: { name: 'memory', type: 'number', aggregatable: true }, + indexPatternId: 'foo', + id: '1', + }, + state: { + ...state, + layers: { + first: { + indexPatternId: 'foo', + columnOrder: ['col1'], + columns: { + col1: { + label: 'Sum of bytes', + dataType: 'number', + isBucketed: false, + + // Private + operationType: 'sum', + sourceField: 'bytes', + }, + }, + }, }, }, - }, - }); - }); + dropType: 'field_replace', + }); - it('updates a column when a field is dropped', () => { - const dragging = { - field: { type: 'number', name: 'bytes', aggregatable: true }, - indexPatternId: 'foo', - id: 'bar', - }; - onDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging, - }, - droppedItem: dragging, - filterOperations: (op: OperationMetadata) => op.dataType === 'number', - groupId: '1', - }); - - expect(setState).toBeCalledTimes(1); - expect(setState).toHaveBeenCalledWith({ - ...state, - layers: { - first: expect.objectContaining({ - columns: expect.objectContaining({ - col1: expect.objectContaining({ - dataType: 'number', - sourceField: 'bytes', + expect(setState).toBeCalledTimes(1); + expect(setState).toHaveBeenCalledWith({ + ...state, + layers: { + first: expect.objectContaining({ + columns: expect.objectContaining({ + col1: expect.objectContaining({ + operationType: 'sum', + dataType: 'number', + sourceField: 'memory', + }), }), }), - }), - }, + }, + }); }); - }); - it('keeps the operation when dropping a different compatible field', () => { - const dragging = { - field: { name: 'memory', type: 'number', aggregatable: true }, - indexPatternId: 'foo', - id: '1', - }; - onDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging, - }, - droppedItem: dragging, - state: { + it('updates the column id when moving an operation to an empty dimension', () => { + const dragging = { + columnId: 'col1', + groupId: 'a', + layerId: 'first', + id: 'bar', + humanData: { label: 'Label' }, + }; + + onDrop({ + ...defaultProps, + dragDropContext: { + ...dragDropContext, + dragging, + }, + droppedItem: dragging, + columnId: 'col2', + dropType: 'move_compatible', + }); + + expect(setState).toBeCalledTimes(1); + expect(setState).toHaveBeenCalledWith({ ...state, layers: { first: { - indexPatternId: 'foo', - columnOrder: ['col1'], + ...state.layers.first, + columnOrder: ['col2'], columns: { - col1: { - label: 'Sum of bytes', - dataType: 'number', - isBucketed: false, - - // Private - operationType: 'sum', - sourceField: 'bytes', - }, + col2: state.layers.first.columns.col1, }, }, }, - }, - groupId: '1', + }); }); - expect(setState).toBeCalledTimes(1); - expect(setState).toHaveBeenCalledWith({ - ...state, - layers: { - first: expect.objectContaining({ - columns: expect.objectContaining({ - col1: expect.objectContaining({ - operationType: 'sum', - dataType: 'number', - sourceField: 'memory', - }), - }), - }), - }, - }); - }); - - it('updates the column id when moving an operation to an empty dimension', () => { - const dragging = { - columnId: 'col1', - groupId: 'a', - layerId: 'first', - id: 'bar', - }; - - onDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging, - }, - droppedItem: dragging, - columnId: 'col2', - groupId: '1', - }); - - expect(setState).toBeCalledTimes(1); - expect(setState).toHaveBeenCalledWith({ - ...state, - layers: { - first: { - ...state.layers.first, - columnOrder: ['col2'], - columns: { - col2: state.layers.first.columns.col1, + it('replaces an operation when moving to a populated dimension', () => { + const testState = { ...state }; + testState.layers.first = { + indexPatternId: 'foo', + columnOrder: ['col1', 'col2', 'col3'], + columns: { + col1: testState.layers.first.columns.col1, + + col2: { + label: 'Top values of src', + dataType: 'string', + isBucketed: true, + + // Private + operationType: 'terms', + params: { + orderBy: { type: 'column', columnId: 'col3' }, + orderDirection: 'desc', + size: 10, + }, + sourceField: 'src', }, - }, - }, - }); - }); - - it('replaces an operation when moving to a populated dimension', () => { - const dragging = { - columnId: 'col2', - groupId: 'a', - layerId: 'first', - id: 'col2', - }; - const testState = { ...state }; - testState.layers.first = { - indexPatternId: 'foo', - columnOrder: ['col1', 'col2', 'col3'], - columns: { - col1: testState.layers.first.columns.col1, - - col2: { - label: 'Top values of src', - dataType: 'string', - isBucketed: true, - - // Private - operationType: 'terms', - params: { - orderBy: { type: 'column', columnId: 'col3' }, - orderDirection: 'desc', - size: 10, + col3: { + label: 'Count', + dataType: 'number', + isBucketed: false, + + // Private + operationType: 'count', + sourceField: 'Records', }, - sourceField: 'src', }, - col3: { - label: 'Count', - dataType: 'number', - isBucketed: false, - - // Private - operationType: 'count', - sourceField: 'Records', - }, - }, - }; + }; - onDrop({ - ...defaultProps, - dragDropContext: { - ...dragDropContext, - dragging, - }, - droppedItem: dragging, - state: testState, - groupId: '1', - }); + onDrop({ + ...defaultProps, + dragDropContext: { + ...dragDropContext, + dragging: defaultDragging, + }, + droppedItem: defaultDragging, + state: testState, + dropType: 'replace_compatible', + }); - expect(setState).toBeCalledTimes(1); - expect(setState).toHaveBeenCalledWith({ - ...testState, - layers: { - first: { - ...testState.layers.first, - columnOrder: ['col1', 'col3'], - columns: { - col1: testState.layers.first.columns.col2, - col3: testState.layers.first.columns.col3, + expect(setState).toBeCalledTimes(1); + expect(setState).toHaveBeenCalledWith({ + ...testState, + layers: { + first: { + ...testState.layers.first, + columnOrder: ['col1', 'col3'], + columns: { + col1: testState.layers.first.columns.col2, + col3: testState.layers.first.columns.col3, + }, }, }, - }, + }); }); - }); - it('if dnd is reorder, it correctly reorders columns', () => { - const dragging = { - columnId: 'col1', - groupId: 'a', - layerId: 'first', - id: 'col1', - }; - const testState = { - ...state, - layers: { - first: { - indexPatternId: 'foo', - columnOrder: ['col1', 'col2', 'col3'], - columns: { - col1: { - label: 'Date histogram of timestamp', - dataType: 'date', - isBucketed: true, - } as IndexPatternColumn, - col2: { - label: 'Top values of bar', - dataType: 'number', - isBucketed: true, - } as IndexPatternColumn, - col3: { - label: 'Top values of memory', - dataType: 'number', - isBucketed: true, - } as IndexPatternColumn, + it('copies a dimension if dropType is duplicate_in_group, respecting bucket metric order', () => { + const testState = { ...state }; + testState.layers.first = { + indexPatternId: 'foo', + columnOrder: ['col1', 'col2', 'col3'], + columns: { + col1: testState.layers.first.columns.col1, + + col2: { + label: 'Top values of src', + dataType: 'string', + isBucketed: true, + + // Private + operationType: 'terms', + params: { + orderBy: { type: 'column', columnId: 'col3' }, + orderDirection: 'desc', + size: 10, + }, + sourceField: 'src', + }, + col3: { + label: 'Count', + dataType: 'number', + isBucketed: false, + + // Private + operationType: 'count', + sourceField: 'Records', }, }, - }, - }; + }; - const defaultReorderDropParams = { - ...defaultProps, - isReorder: true, - dragDropContext: { - ...dragDropContext, - dragging, - }, - droppedItem: dragging, - state: testState, - filterOperations: (op: OperationMetadata) => op.dataType === 'number', - groupId: 'a', - }; + const metricDragging = { + columnId: 'col3', + groupId: 'a', + layerId: 'first', + id: 'col3', + humanData: { label: 'Label' }, + }; - const stateWithColumnOrder = (columnOrder: string[]) => { - return { + onDrop({ + ...defaultProps, + dragDropContext: { + ...dragDropContext, + dragging: metricDragging, + }, + droppedItem: metricDragging, + state: testState, + dropType: 'duplicate_in_group', + columnId: 'newCol', + }); + // metric is appended + expect(setState).toHaveBeenCalledWith({ ...testState, layers: { first: { ...testState.layers.first, - columnOrder, + columnOrder: ['col1', 'col2', 'col3', 'newCol'], columns: { - ...testState.layers.first.columns, + col1: testState.layers.first.columns.col1, + col2: testState.layers.first.columns.col2, + col3: testState.layers.first.columns.col3, + newCol: testState.layers.first.columns.col3, }, }, }, - }; - }; - - // first element to last - onDrop({ - ...defaultReorderDropParams, - columnId: 'col3', - }); - expect(setState).toBeCalledTimes(1); - expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col2', 'col3', 'col1'])); + }); - // last element to first - onDrop({ - ...defaultReorderDropParams, - columnId: 'col1', - droppedItem: { - columnId: 'col3', - groupId: 'a', - layerId: 'first', - id: 'col3', - }, - }); - expect(setState).toBeCalledTimes(2); - expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col3', 'col1', 'col2'])); - - // middle column to first - onDrop({ - ...defaultReorderDropParams, - columnId: 'col1', - droppedItem: { + const bucketDragging = { columnId: 'col2', groupId: 'a', layerId: 'first', id: 'col2', - }, + humanData: { label: 'Label' }, + }; + + onDrop({ + ...defaultProps, + dragDropContext: { + ...dragDropContext, + dragging: bucketDragging, + }, + droppedItem: bucketDragging, + state: testState, + dropType: 'duplicate_in_group', + columnId: 'newCol', + }); + + // bucket is placed after the last existing bucket + expect(setState).toHaveBeenCalledWith({ + ...testState, + layers: { + first: { + ...testState.layers.first, + columnOrder: ['col1', 'col2', 'newCol', 'col3'], + columns: { + col1: testState.layers.first.columns.col1, + col2: testState.layers.first.columns.col2, + newCol: testState.layers.first.columns.col2, + col3: testState.layers.first.columns.col3, + }, + }, + }, + }); }); - expect(setState).toBeCalledTimes(3); - expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col2', 'col1', 'col3'])); - - // middle column to last - onDrop({ - ...defaultReorderDropParams, - columnId: 'col3', - droppedItem: { - columnId: 'col2', + + it('if dropType is reorder, it correctly reorders columns', () => { + const dragging = { + columnId: 'col1', groupId: 'a', layerId: 'first', - id: 'col2', - }, + id: 'col1', + humanData: { label: 'Label' }, + }; + const testState = { + ...state, + layers: { + first: { + indexPatternId: 'foo', + columnOrder: ['col1', 'col2', 'col3'], + columns: { + col1: { + label: 'Date histogram of timestamp', + dataType: 'date', + isBucketed: true, + } as IndexPatternColumn, + col2: { + label: 'Top values of bar', + dataType: 'number', + isBucketed: true, + } as IndexPatternColumn, + col3: { + label: 'Top values of memory', + dataType: 'number', + isBucketed: true, + } as IndexPatternColumn, + }, + }, + }, + }; + + const defaultReorderDropParams = { + ...defaultProps, + dragDropContext: { + ...dragDropContext, + dragging, + }, + droppedItem: dragging, + state: testState, + filterOperations: (op: OperationMetadata) => op.dataType === 'number', + dropType: 'reorder' as DropType, + }; + + const stateWithColumnOrder = (columnOrder: string[]) => { + return { + ...testState, + layers: { + first: { + ...testState.layers.first, + columnOrder, + columns: { + ...testState.layers.first.columns, + }, + }, + }, + }; + }; + + // first element to last + onDrop({ + ...defaultReorderDropParams, + columnId: 'col3', + }); + expect(setState).toBeCalledTimes(1); + expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col2', 'col3', 'col1'])); + + // last element to first + onDrop({ + ...defaultReorderDropParams, + columnId: 'col1', + droppedItem: { + columnId: 'col3', + groupId: 'a', + layerId: 'first', + id: 'col3', + }, + }); + expect(setState).toBeCalledTimes(2); + expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col3', 'col1', 'col2'])); + + // middle column to first + onDrop({ + ...defaultReorderDropParams, + columnId: 'col1', + droppedItem: { + columnId: 'col2', + groupId: 'a', + layerId: 'first', + id: 'col2', + }, + }); + expect(setState).toBeCalledTimes(3); + expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col2', 'col1', 'col3'])); + + // middle column to last + onDrop({ + ...defaultReorderDropParams, + columnId: 'col3', + droppedItem: { + columnId: 'col2', + groupId: 'a', + layerId: 'first', + id: 'col2', + }, + }); + expect(setState).toBeCalledTimes(4); + expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col1', 'col3', 'col2'])); }); - expect(setState).toBeCalledTimes(4); - expect(setState).toHaveBeenCalledWith(stateWithColumnOrder(['col1', 'col3', 'col2'])); }); }); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.ts b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.ts index 3fa40911062cf..cbd599743f813 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.ts @@ -12,39 +12,46 @@ import { DraggedOperation, } from '../../types'; import { IndexPatternColumn } from '../indexpattern'; -import { insertOrReplaceColumn } from '../operations'; +import { insertOrReplaceColumn, deleteColumn } from '../operations'; import { mergeLayer } from '../state_helpers'; import { hasField, isDraggedField } from '../utils'; -import { IndexPatternPrivateState, IndexPatternField } from '../types'; +import { IndexPatternPrivateState, IndexPatternField, DraggedField } from '../types'; import { trackUiEvent } from '../../lens_ui_telemetry'; -import { getOperationSupportMatrix, OperationSupportMatrix } from './operation_support'; +import { getOperationSupportMatrix } from './operation_support'; -type DropHandlerProps = Pick< - DatasourceDimensionDropHandlerProps, - 'columnId' | 'setState' | 'state' | 'layerId' | 'droppedItem' -> & { +type DropHandlerProps = DatasourceDimensionDropHandlerProps & { droppedItem: T; - operationSupportMatrix: OperationSupportMatrix; }; -export function canHandleDrop(props: DatasourceDimensionDropProps) { - const operationSupportMatrix = getOperationSupportMatrix(props); - +export function getDropTypes( + props: DatasourceDimensionDropProps & { groupId: string } +) { const { dragging } = props.dragDropContext; + if (!dragging) { + return; + } + const layerIndexPatternId = props.state.layers[props.layerId].indexPatternId; function hasOperationForField(field: IndexPatternField) { - return Boolean(operationSupportMatrix.operationByField[field.name]); + return !!getOperationSupportMatrix(props).operationByField[field.name]; } + const currentColumn = props.state.layers[props.layerId].columns[props.columnId]; if (isDraggedField(dragging)) { - const currentColumn = props.state.layers[props.layerId].columns[props.columnId]; - return Boolean( - layerIndexPatternId === dragging.indexPatternId && - Boolean(hasOperationForField(dragging.field)) && - (!currentColumn || - (hasField(currentColumn) && currentColumn.sourceField !== dragging.field.name)) - ); + if ( + !!(layerIndexPatternId === dragging.indexPatternId && hasOperationForField(dragging.field)) + ) { + if (!currentColumn) { + return 'field_add'; + } else if ( + (hasField(currentColumn) && currentColumn.sourceField !== dragging.field.name) || + !hasField(currentColumn) + ) { + return 'field_replace'; + } + } + return; } if ( @@ -52,12 +59,72 @@ export function canHandleDrop(props: DatasourceDimensionDropProps) { + const { droppedItem, dropType } = props; + + if (dropType === 'field_add' || dropType === 'field_replace') { + return operationOnDropMap[dropType]({ + ...props, + droppedItem: droppedItem as DraggedField, + }); + } + return operationOnDropMap[dropType]({ + ...props, + droppedItem: droppedItem as DraggedOperation, + }); +} + +const operationOnDropMap = { + field_add: onFieldDrop, + field_replace: onFieldDrop, + reorder: onReorderDrop, + duplicate_in_group: onSameGroupDuplicateDrop, + move_compatible: onMoveDropToCompatibleGroup, + replace_compatible: onMoveDropToCompatibleGroup, + move_incompatible: onMoveDropToNonCompatibleGroup, + replace_incompatible: onMoveDropToNonCompatibleGroup, +}; + function reorderElements(items: string[], dest: string, src: string) { const result = items.filter((c) => c !== src); const destIndex = items.findIndex((c) => c === src); @@ -69,7 +136,13 @@ function reorderElements(items: string[], dest: string, src: string) { return result; } -const onReorderDrop = ({ columnId, setState, state, layerId, droppedItem }: DropHandlerProps) => { +function onReorderDrop({ + columnId, + setState, + state, + layerId, + droppedItem, +}: DropHandlerProps) { setState( mergeLayer({ state, @@ -85,15 +158,98 @@ const onReorderDrop = ({ columnId, setState, state, layerId, droppedItem }: Drop ); return true; -}; +} + +function onMoveDropToNonCompatibleGroup(props: DropHandlerProps) { + const { columnId, setState, state, layerId, droppedItem } = props; + + const layer = state.layers[layerId]; + const op = { ...layer.columns[droppedItem.columnId] }; + const field = + hasField(op) && state.indexPatterns[layer.indexPatternId].getFieldByName(op.sourceField); + if (!field) { + return false; + } + + const operationSupportMatrix = getOperationSupportMatrix(props); + const operationsForNewField = operationSupportMatrix.operationByField[field.name]; + + if (!operationsForNewField || operationsForNewField.size === 0) { + return false; + } + + const currentIndexPattern = state.indexPatterns[layer.indexPatternId]; + + const newLayer = insertOrReplaceColumn({ + layer: deleteColumn({ + layer, + columnId: droppedItem.columnId, + indexPattern: currentIndexPattern, + }), + columnId, + indexPattern: currentIndexPattern, + op: operationsForNewField.values().next().value, + field, + }); + + trackUiEvent('drop_onto_dimension'); + setState( + mergeLayer({ + state, + layerId, + newLayer: { + ...newLayer, + }, + }) + ); + + return { deleted: droppedItem.columnId }; +} -const onMoveDropToCompatibleGroup = ({ +function onSameGroupDuplicateDrop({ columnId, setState, state, layerId, droppedItem, -}: DropHandlerProps) => { +}: DropHandlerProps) { + const layer = state.layers[layerId]; + + const op = { ...layer.columns[droppedItem.columnId] }; + const newColumns = { + ...layer.columns, + [columnId]: op, + }; + + const newColumnOrder = [...layer.columnOrder]; + // put a new bucketed dimension just in front of the metric dimensions, a metric dimension in the back of the array + // TODO this logic does not take into account groups - we probably need to pass the current + // group config to this position to place the column right + const insertionIndex = op.isBucketed + ? newColumnOrder.findIndex((id) => !newColumns[id].isBucketed) + : newColumnOrder.length; + newColumnOrder.splice(insertionIndex, 0, columnId); + // Time to replace + setState( + mergeLayer({ + state, + layerId, + newLayer: { + columnOrder: newColumnOrder, + columns: newColumns, + }, + }) + ); + return true; +} + +function onMoveDropToCompatibleGroup({ + columnId, + setState, + state, + layerId, + droppedItem, +}: DropHandlerProps) { const layer = state.layers[layerId]; const op = { ...layer.columns[droppedItem.columnId] }; const newColumns = { ...layer.columns }; @@ -122,18 +278,14 @@ const onMoveDropToCompatibleGroup = ({ }) ); return { deleted: droppedItem.columnId }; -}; +} + +function onFieldDrop(props: DropHandlerProps) { + const { columnId, setState, state, layerId, droppedItem } = props; + const operationSupportMatrix = getOperationSupportMatrix(props); -const onFieldDrop = ({ - columnId, - setState, - state, - layerId, - droppedItem, - operationSupportMatrix, -}: DropHandlerProps) => { function hasOperationForField(field: IndexPatternField) { - return Boolean(operationSupportMatrix.operationByField[field.name]); + return !!operationSupportMatrix.operationByField[field.name]; } if (!isDraggedField(droppedItem) || !hasOperationForField(droppedItem.field)) { @@ -176,55 +328,4 @@ const onFieldDrop = ({ trackUiEvent(hasData ? 'drop_non_empty' : 'drop_empty'); setState(mergeLayer({ state, layerId, newLayer })); return true; -}; - -export function onDrop(props: DatasourceDimensionDropHandlerProps) { - const operationSupportMatrix = getOperationSupportMatrix(props); - const { setState, state, droppedItem, columnId, layerId, groupId, isNew } = props; - - if (!isDraggedOperation(droppedItem)) { - return onFieldDrop({ - columnId, - setState, - state, - layerId, - droppedItem, - operationSupportMatrix, - }); - } - const isExistingFromSameGroup = - droppedItem.groupId === groupId && droppedItem.columnId !== columnId && !isNew; - - // reorder in the same group - if (isExistingFromSameGroup) { - return onReorderDrop({ - columnId, - setState, - state, - layerId, - droppedItem, - operationSupportMatrix, - }); - } - - // replace or move to compatible group - const isFromOtherGroup = droppedItem.groupId !== groupId && droppedItem.layerId === layerId; - - if (isFromOtherGroup) { - const layer = state.layers[layerId]; - const op = { ...layer.columns[droppedItem.columnId] }; - - if (props.filterOperations(op)) { - return onMoveDropToCompatibleGroup({ - columnId, - setState, - state, - layerId, - droppedItem, - operationSupportMatrix, - }); - } - } - - return false; } diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss index 8c10ca9d30b73..8a6e10c8be6e4 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss @@ -1,4 +1,5 @@ .lnsFieldItem { + width: 100%; .lnsFieldItem__infoIcon { visibility: hidden; opacity: 0; @@ -13,6 +14,23 @@ transition: opacity $euiAnimSpeedFast ease-in-out 1s; } } + + &:focus, + &:focus-within, + &.kbnFieldButton-isActive { + animation: none !important; // sass-lint:disable-line no-important + } + + &:focus .kbnFieldButton__name span, + &:focus-within .kbnFieldButton__name span, + &.kbnFieldButton-isActive .kbnFieldButton__name span { + background-color: transparentize($euiColorVis1, .9) !important; + text-decoration: underline !important; + } +} + +.kbnFieldButton__name { + transition: background-color $euiAnimSpeedFast ease-in-out; } .lnsFieldItem--missing { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx index e598e85f2ff17..e0198d6d7903e 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx @@ -48,11 +48,10 @@ import { } from '../../../../../src/plugins/data/public'; import { FieldButton } from '../../../../../src/plugins/kibana_react/public'; import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public'; -import { DraggedField } from './indexpattern'; import { DragDrop, DragDropIdentifier } from '../drag_drop'; import { DatasourceDataPanelProps, DataType } from '../types'; import { BucketedAggregation, FieldStatsResponse } from '../../common'; -import { IndexPattern, IndexPatternField } from './types'; +import { IndexPattern, IndexPatternField, DraggedField } from './types'; import { LensFieldIcon } from './lens_field_icon'; import { trackUiEvent } from '../lens_ui_telemetry'; @@ -103,6 +102,8 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) { dateRange, filters, hideDetails, + itemIndex, + groupIndex, dropOntoWorkspace, } = props; @@ -167,9 +168,18 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) { } const value = useMemo( - () => ({ field, indexPatternId: indexPattern.id, id: field.name } as DraggedField), - [field, indexPattern.id] + () => ({ + field, + indexPatternId: indexPattern.id, + id: field.name, + humanData: { + label: field.displayName, + position: itemIndex + 1, + }, + }), + [field, indexPattern.id, itemIndex] ); + const order = useMemo(() => [0, groupIndex, itemIndex], [groupIndex, itemIndex]); const lensFieldIcon = ; const lensInfoIcon = ( @@ -204,9 +214,8 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) { container={document.querySelector('.application') || undefined} button={ @@ -271,6 +280,9 @@ function FieldPanelHeader({ indexPatternId, id: field.name, field, + humanData: { + label: field.displayName, + }, }; return ( @@ -641,11 +653,7 @@ const DragToWorkspaceButton = ({ dropOntoWorkspace, isEnabled, }: { - field: { - indexPatternId: string; - id: string; - field: IndexPatternField; - }; + field: DraggedField; dropOntoWorkspace: DatasourceDataPanelProps['dropOntoWorkspace']; isEnabled: boolean; }) => { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts index 3f842792c20cf..4e7e07b99904f 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts @@ -14,11 +14,8 @@ import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; import { Ast } from '@kbn/interpreter/common'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; import { getFieldByNameFactory } from './pure_helpers'; -import { - operationDefinitionMap, - getErrorMessages, - createMockedReferenceOperation, -} from './operations'; +import { operationDefinitionMap, getErrorMessages } from './operations'; +import { createMockedReferenceOperation } from './operations/mocks'; jest.mock('./loader'); jest.mock('../id_generator'); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx index 5571700b15b61..6cc89d3dab119 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx @@ -31,7 +31,7 @@ import { toExpression } from './to_expression'; import { IndexPatternDimensionTrigger, IndexPatternDimensionEditor, - canHandleDrop, + getDropTypes, onDrop, } from './dimension_panel'; import { IndexPatternDataPanel } from './datapanel'; @@ -44,7 +44,7 @@ import { import { isDraggedField, normalizeOperationDataType } from './utils'; import { LayerPanel } from './layerpanel'; import { IndexPatternColumn, getErrorMessages, IncompleteColumn } from './operations'; -import { IndexPatternField, IndexPatternPrivateState, IndexPatternPersistedState } from './types'; +import { IndexPatternPrivateState, IndexPatternPersistedState } from './types'; import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; import { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; import { VisualizeFieldContext } from '../../../../../src/plugins/ui_actions/public'; @@ -52,15 +52,9 @@ import { mergeLayer } from './state_helpers'; import { Datasource, StateSetter } from '../types'; import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public'; import { deleteColumn, isReferenced } from './operations'; -import { DragDropIdentifier } from '../drag_drop/providers'; export { OperationType, IndexPatternColumn, deleteColumn } from './operations'; -export type DraggedField = DragDropIdentifier & { - field: IndexPatternField; - indexPatternId: string; -}; - export function columnToOperation(column: IndexPatternColumn, uniqueLabel?: string): Operation { const { dataType, label, isBucketed, scale } = column; return { @@ -314,8 +308,7 @@ export function getIndexPatternDatasource({ domElement ); }, - - canHandleDrop, + getDropTypes, onDrop, // Reset the temporary invalid state when closing the editor, but don't diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts b/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts index 306c87fa765e5..06560bb0fa244 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts @@ -253,5 +253,6 @@ export function createMockedDragDropContext(): jest.Mocked { keyboardMode: false, setKeyboardMode: jest.fn(), setA11yMessage: jest.fn(), + registerDropTarget: jest.fn(), }; } diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts index 2677c16c566f5..aa46dd765bd8b 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts @@ -32,5 +32,3 @@ export { DerivativeIndexPatternColumn, MovingAverageIndexPatternColumn, } from './definitions'; - -export { createMockedReferenceOperation } from './mocks'; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts index 10b1f7f1799da..f45f963ee174f 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts @@ -8,6 +8,7 @@ import { IFieldType } from 'src/plugins/data/common'; import { IndexPatternColumn, IncompleteColumn } from './operations'; import { IndexPatternAggRestrictions } from '../../../../../src/plugins/data/public'; +import { DragDropIdentifier } from '../drag_drop/providers'; export { IndexPatternColumn, @@ -32,6 +33,10 @@ export { MovingAverageIndexPatternColumn, } from './operations'; +export type DraggedField = DragDropIdentifier & { + field: IndexPatternField; + indexPatternId: string; +}; export interface IndexPattern { id: string; fields: IndexPatternField[]; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts b/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts index 515d205637505..d4c9da188be61 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/utils.ts @@ -6,8 +6,7 @@ */ import { DataType } from '../types'; -import { IndexPattern, IndexPatternLayer } from './types'; -import { DraggedField } from './indexpattern'; +import { IndexPattern, IndexPatternLayer, DraggedField } from './types'; import type { BaseIndexPatternColumn, FieldBasedIndexPatternColumn, 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 7d7ba1598cade..c0788e6f67dfe 100644 --- a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx +++ b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx @@ -14,6 +14,7 @@ const typeToIconMap: { [type: string]: string | IconType } = { legend: EuiIconLegend as IconType, labels: 'visText', values: 'number', + list: 'list', }; export interface ToolbarPopoverProps { diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index ed1a34eac8c42..cccc35acb3fca 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -26,10 +26,12 @@ import { RangeSelectContext, ValueClickContext } from '../../../../src/plugins/e import { LENS_EDIT_SORT_ACTION, LENS_EDIT_RESIZE_ACTION, + LENS_TOGGLE_ACTION, } from './datatable_visualization/components/constants'; import type { LensSortActionData, LensResizeActionData, + LensToggleActionData, } from './datatable_visualization/components/types'; export type ErrorCallback = (e: { message: string }) => void; @@ -136,6 +138,16 @@ export type TableChangeType = | 'reorder' | 'layers'; +export type DropType = + | 'field_add' + | 'field_replace' + | 'reorder' + | 'duplicate_in_group' + | 'move_compatible' + | 'replace_compatible' + | 'move_incompatible' + | 'replace_incompatible'; + export interface DatasourceSuggestion { state: T; table: TableSuggestion; @@ -177,7 +189,9 @@ export interface Datasource { renderDimensionTrigger: (domElement: Element, props: DatasourceDimensionTriggerProps) => void; renderDimensionEditor: (domElement: Element, props: DatasourceDimensionEditorProps) => void; renderLayerPanel: (domElement: Element, props: DatasourceLayerPanelProps) => void; - canHandleDrop: (props: DatasourceDimensionDropProps) => boolean; + getDropTypes: ( + props: DatasourceDimensionDropProps & { groupId: string } + ) => DropType | undefined; onDrop: (props: DatasourceDimensionDropHandlerProps) => false | true | { deleted: string }; updateStateOnCloseDimension?: (props: { layerId: string; @@ -297,13 +311,11 @@ export type DatasourceDimensionDropProps = SharedDimensionProps & { state: T; setState: StateSetter; dragDropContext: DragContextState; - isReorder?: boolean; }; export type DatasourceDimensionDropHandlerProps = DatasourceDimensionDropProps & { droppedItem: unknown; - groupId: string; - isNew?: boolean; + dropType: DropType; }; export type DataType = 'document' | 'string' | 'number' | 'date' | 'boolean' | 'ip'; @@ -368,7 +380,7 @@ export type VisualizationDimensionEditorProps = VisualizationConfig export interface AccessorConfig { columnId: string; - triggerIcon?: 'color' | 'disabled' | 'colorBy' | 'none'; + triggerIcon?: 'color' | 'disabled' | 'colorBy' | 'none' | 'invisible'; color?: string; palette?: string[]; } @@ -649,6 +661,7 @@ export interface LensBrushEvent { interface LensEditContextMapping { [LENS_EDIT_SORT_ACTION]: LensSortActionData; [LENS_EDIT_RESIZE_ACTION]: LensResizeActionData; + [LENS_TOGGLE_ACTION]: LensToggleActionData; } type LensEditSupportedActions = keyof LensEditContextMapping; diff --git a/x-pack/plugins/lens/server/migrations.test.ts b/x-pack/plugins/lens/server/migrations.test.ts index 077204b07ed73..01329d85baf00 100644 --- a/x-pack/plugins/lens/server/migrations.test.ts +++ b/x-pack/plugins/lens/server/migrations.test.ts @@ -597,4 +597,77 @@ describe('Lens migrations', () => { expect(layersWithSuggestedPriority).toEqual(0); }); }); + + describe('7.12.0 restructure datatable state', () => { + const context = ({ log: { warning: () => {} } } as unknown) as SavedObjectMigrationContext; + const example = { + type: 'lens', + id: 'mock-saved-object-id', + attributes: { + state: { + datasourceStates: { + indexpattern: {}, + }, + visualization: { + layers: [ + { + layerId: 'first', + columns: ['a', 'b', 'c'], + }, + ], + sorting: { + columnId: 'a', + direction: 'asc', + }, + }, + query: { query: '', language: 'kuery' }, + filters: [], + }, + title: 'Table', + visualizationType: 'lnsDatatable', + }, + }; + + it('should not touch non datatable visualization', () => { + const xyChart = { + ...example, + attributes: { ...example.attributes, visualizationType: 'xy' }, + }; + const result = migrations['7.12.0'](xyChart, context) as ReturnType< + SavedObjectMigrationFn + >; + expect(result).toBe(xyChart); + }); + + it('should remove layer array and reshape state', () => { + const result = migrations['7.12.0'](example, context) as ReturnType< + SavedObjectMigrationFn + >; + expect(result.attributes.state.visualization).toEqual({ + layerId: 'first', + columns: [ + { + columnId: 'a', + }, + { + columnId: 'b', + }, + { + columnId: 'c', + }, + ], + sorting: { + columnId: 'a', + direction: 'asc', + }, + }); + // should leave other parts alone + expect(result.attributes.state.datasourceStates).toEqual( + example.attributes.state.datasourceStates + ); + expect(result.attributes.state.query).toEqual(example.attributes.state.query); + expect(result.attributes.state.filters).toEqual(example.attributes.state.filters); + expect(result.attributes.title).toEqual(example.attributes.title); + }); + }); }); diff --git a/x-pack/plugins/lens/server/migrations.ts b/x-pack/plugins/lens/server/migrations.ts index bb078ff204f2b..4c6dfcd7949be 100644 --- a/x-pack/plugins/lens/server/migrations.ts +++ b/x-pack/plugins/lens/server/migrations.ts @@ -83,6 +83,29 @@ interface XYStatePost77 { layers: Array>; } +interface DatatableStatePre711 { + layers: Array<{ + layerId: string; + columns: string[]; + }>; + sorting?: { + columnId: string | undefined; + direction: 'asc' | 'desc' | 'none'; + }; +} +interface DatatableStatePost711 { + layerId: string; + columns: Array<{ + columnId: string; + width?: number; + hidden?: boolean; + }>; + sorting?: { + columnId: string | undefined; + direction: 'asc' | 'desc' | 'none'; + }; +} + /** * Removes the `lens_auto_date` subexpression from a stored expression * string. For example: aggConfigs={lens_auto_date aggConfigs="JSON string"} @@ -334,6 +357,36 @@ const removeSuggestedPriority: SavedObjectMigrationFn, + LensDocShape +> = (doc) => { + // nothing to do for non-datatable visualizations + if (doc.attributes.visualizationType !== 'lnsDatatable') + return (doc as unknown) as SavedObjectUnsanitizedDoc>; + const oldState = doc.attributes.state.visualization; + const layer = oldState.layers[0] || { + layerId: '', + columns: [], + }; + // put together new saved object format + const newDoc: SavedObjectUnsanitizedDoc> = { + ...doc, + attributes: { + ...doc.attributes, + state: { + ...doc.attributes.state, + visualization: { + sorting: oldState.sorting, + layerId: layer.layerId, + columns: layer.columns.map((columnId) => ({ columnId })), + }, + }, + }, + }; + return newDoc; +}; + export const migrations: SavedObjectMigrationMap = { '7.7.0': removeInvalidAccessors, // The order of these migrations matter, since the timefield migration relies on the aggConfigs @@ -341,4 +394,5 @@ export const migrations: SavedObjectMigrationMap = { '7.8.0': (doc, context) => addTimeFieldToEsaggs(removeLensAutoDate(doc, context), context), '7.10.0': extractReferences, '7.11.0': removeSuggestedPriority, + '7.12.0': transformTableState, }; diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js index 6b869d042ed7f..f1093fd0b16a1 100644 --- a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js +++ b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js @@ -249,7 +249,6 @@ export function getColumns( name: i18n.translate('xpack.ml.anomaliesTable.categoryExamplesColumnName', { defaultMessage: 'category examples', }), - sortable: false, truncateText: true, render: (item) => { const examples = get(examplesByJobId, [item.jobId, item.entityValue], []); @@ -268,7 +267,6 @@ export function getColumns( ); }, - textOnly: true, width: '13%', }); } diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx b/x-pack/plugins/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx index 7b7912f2a9fa5..b761599a447b7 100644 --- a/x-pack/plugins/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx +++ b/x-pack/plugins/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx @@ -8,7 +8,10 @@ import React, { FC, memo } from 'react'; import { EuiHealth, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { MULTI_BUCKET_IMPACT } from '../../../../../common/constants/multi_bucket_impact'; -import { getSeverityColor } from '../../../../../common/util/anomaly_utils'; +import { + getSeverityColor, + getFormattedSeverityScore, +} from '../../../../../common/util/anomaly_utils'; interface SeverityCellProps { /** @@ -27,7 +30,7 @@ interface SeverityCellProps { * Renders anomaly severity score with single or multi-bucket impact marker. */ export const SeverityCell: FC = memo(({ score, multiBucketImpact }) => { - const severity = score >= 1 ? Math.floor(score) : '< 1'; + const severity = getFormattedSeverityScore(score); const color = getSeverityColor(score); const isMultiBucket = multiBucketImpact >= MULTI_BUCKET_IMPACT.MEDIUM; return isMultiBucket ? ( diff --git a/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.test.js b/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.test.tsx similarity index 100% rename from x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.test.js rename to x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.test.tsx diff --git a/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.js b/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx similarity index 59% rename from x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.js rename to x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx index f6cfe486d65f8..650a9d3deb539 100644 --- a/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.js +++ b/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx @@ -5,8 +5,7 @@ * 2.0. */ -import PropTypes from 'prop-types'; -import React from 'react'; +import React, { FC } from 'react'; import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -14,50 +13,67 @@ import { i18n } from '@kbn/i18n'; import { EMPTY_FIELD_VALUE_LABEL } from '../../timeseriesexplorer/components/entity_control/entity_control'; import { MLCATEGORY } from '../../../../common/constants/field_types'; -function getAddFilter({ entityName, entityValue, filter }) { - return ( - void; + +interface EntityCellProps { + entityName: string; + entityValue: string; + filter?: EntityCellFilter; + wrapText?: boolean; +} + +function getAddFilter({ entityName, entityValue, filter }: EntityCellProps) { + if (filter !== undefined) { + return ( + + } + > + filter(entityName, entityValue, '+')} + iconType="plusInCircle" + aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', { + defaultMessage: 'Add filter', + })} /> - } - > - filter(entityName, entityValue, '+')} - iconType="plusInCircle" - aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', { - defaultMessage: 'Add filter', - })} - /> - - ); + + ); + } } -function getRemoveFilter({ entityName, entityValue, filter }) { - return ( - + } + > + filter(entityName, entityValue, '-')} + iconType="minusInCircle" + aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', { + defaultMessage: 'Remove filter', + })} /> - } - > - filter(entityName, entityValue, '-')} - iconType="minusInCircle" - aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', { - defaultMessage: 'Remove filter', - })} - /> - - ); + + ); + } } /* @@ -65,12 +81,12 @@ function getRemoveFilter({ entityName, entityValue, filter }) { * of the entity, such as a partitioning or influencer field value, and optionally links for * adding or removing a filter on this entity. */ -export const EntityCell = function EntityCell({ +export const EntityCell: FC = ({ entityName, entityValue, filter, wrapText = false, -}) { +}) => { let valueText = entityValue === '' ? {EMPTY_FIELD_VALUE_LABEL} : entityValue; if (entityName === MLCATEGORY) { valueText = `${MLCATEGORY} ${valueText}`; @@ -117,10 +133,3 @@ export const EntityCell = function EntityCell({ ); } }; - -EntityCell.propTypes = { - entityName: PropTypes.string, - entityValue: PropTypes.any, - filter: PropTypes.func, - wrapText: PropTypes.bool, -}; diff --git a/x-pack/plugins/ml/public/application/components/entity_cell/index.js b/x-pack/plugins/ml/public/application/components/entity_cell/index.ts similarity index 80% rename from x-pack/plugins/ml/public/application/components/entity_cell/index.js rename to x-pack/plugins/ml/public/application/components/entity_cell/index.ts index f1fbb8ede4ee2..d29e2adf66bfe 100644 --- a/x-pack/plugins/ml/public/application/components/entity_cell/index.js +++ b/x-pack/plugins/ml/public/application/components/entity_cell/index.ts @@ -5,4 +5,4 @@ * 2.0. */ -export { EntityCell } from './entity_cell'; +export { EntityCell, EntityCellFilter } from './entity_cell'; diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/index.js b/x-pack/plugins/ml/public/application/components/influencers_list/index.ts similarity index 100% rename from x-pack/plugins/ml/public/application/components/influencers_list/index.js rename to x-pack/plugins/ml/public/application/components/influencers_list/index.ts diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.js b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx similarity index 71% rename from x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.js rename to x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx index ee562428114ce..a4c0aab282d15 100644 --- a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.js +++ b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx @@ -9,17 +9,39 @@ * React component for rendering a list of Machine Learning influencers. */ -import PropTypes from 'prop-types'; -import React from 'react'; +import React, { FC } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { abbreviateWholeNumber } from '../../formatters/abbreviate_whole_number'; -import { getSeverity } from '../../../../common/util/anomaly_utils'; -import { EntityCell } from '../entity_cell'; +import { getSeverity, getFormattedSeverityScore } from '../../../../common/util/anomaly_utils'; +import { EntityCell, EntityCellFilter } from '../entity_cell'; -function getTooltipContent(maxScoreLabel, totalScoreLabel) { +interface InfluencerValueData { + influencerFieldValue: string; + maxAnomalyScore: number; + sumAnomalyScore: number; +} + +interface InfluencerProps { + influencerFieldName: string; + influencerFilter: EntityCellFilter; + valueData: InfluencerValueData; +} + +interface InfluencersByNameProps { + influencerFieldName: string; + influencerFilter: EntityCellFilter; + fieldValues: InfluencerValueData[]; +} + +interface InfluencersListProps { + influencers: { [id: string]: InfluencerValueData[] }; + influencerFilter: EntityCellFilter; +} + +function getTooltipContent(maxScoreLabel: string, totalScoreLabel: string) { return (

    @@ -40,13 +62,12 @@ function getTooltipContent(maxScoreLabel, totalScoreLabel) { ); } -function Influencer({ influencerFieldName, influencerFilter, valueData }) { - const maxScorePrecise = valueData.maxAnomalyScore; - const maxScore = parseInt(maxScorePrecise); - const maxScoreLabel = maxScore !== 0 ? maxScore : '< 1'; +const Influencer: FC = ({ influencerFieldName, influencerFilter, valueData }) => { + const maxScore = Math.floor(valueData.maxAnomalyScore); + const maxScoreLabel = getFormattedSeverityScore(valueData.maxAnomalyScore); const severity = getSeverity(maxScore); - const totalScore = parseInt(valueData.sumAnomalyScore); - const totalScoreLabel = totalScore !== 0 ? totalScore : '< 1'; + const totalScore = Math.floor(valueData.sumAnomalyScore); + const totalScoreLabel = getFormattedSeverityScore(valueData.sumAnomalyScore); // Ensure the bar has some width for 0 scores. const barScore = maxScore !== 0 ? maxScore : 1; @@ -59,17 +80,13 @@ function Influencer({ influencerFieldName, influencerFilter, valueData }) { return (

    - {influencerFieldName !== 'mlcategory' ? ( - - ) : ( -
    mlcategory {valueData.influencerFieldValue}
    - )} +
    -
    +
    @@ -96,14 +113,13 @@ function Influencer({ influencerFieldName, influencerFilter, valueData }) {
    ); -} -Influencer.propTypes = { - influencerFieldName: PropTypes.string.isRequired, - influencerFilter: PropTypes.func, - valueData: PropTypes.object.isRequired, }; -function InfluencersByName({ influencerFieldName, influencerFilter, fieldValues }) { +const InfluencersByName: FC = ({ + influencerFieldName, + influencerFilter, + fieldValues, +}) => { const influencerValues = fieldValues.map((valueData) => ( ); -} -InfluencersByName.propTypes = { - influencerFieldName: PropTypes.string.isRequired, - influencerFilter: PropTypes.func, - fieldValues: PropTypes.array.isRequired, }; -export function InfluencersList({ influencers, influencerFilter }) { +export const InfluencersList: FC = ({ influencers, influencerFilter }) => { if (influencers === undefined || Object.keys(influencers).length === 0) { return ( @@ -158,8 +169,4 @@ export function InfluencersList({ influencers, influencerFilter }) { )); return
    {influencersByName}
    ; -} -InfluencersList.propTypes = { - influencers: PropTypes.object, - influencerFilter: PropTypes.func, }; diff --git a/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx b/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx index 5f451339746bb..79d17a7846b8c 100644 --- a/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx +++ b/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx @@ -137,7 +137,7 @@ export const DatavisualizerSelector: FC = () => { > } @@ -167,7 +167,7 @@ export const DatavisualizerSelector: FC = () => { > } 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 d0cfe55e8d01e..4607ac65c87a6 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 @@ -20,7 +20,11 @@ import moment from 'moment'; import { formatHumanReadableDateTime } from '../../../../common/util/date_utils'; import { formatValue } from '../../formatters/format_value'; -import { getSeverityColor, getSeverityWithLow } from '../../../../common/util/anomaly_utils'; +import { + getFormattedSeverityScore, + getSeverityColor, + getSeverityWithLow, +} from '../../../../common/util/anomaly_utils'; import { getChartType, getTickValues, @@ -458,7 +462,7 @@ export class ExplorerChartDistribution extends React.Component { if (marker.anomalyScore !== undefined) { const score = parseInt(marker.anomalyScore); - const displayScore = score > 0 ? score : '< 1'; + const displayScore = getFormattedSeverityScore(score); tooltipData.push({ label: i18n.translate('xpack.ml.explorer.distributionChart.anomalyScoreLabel', { defaultMessage: 'anomaly score', 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 109592c207940..d2d81e0349c68 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 @@ -21,6 +21,7 @@ import { i18n } from '@kbn/i18n'; import { formatHumanReadableDateTime } from '../../../../common/util/date_utils'; import { formatValue } from '../../formatters/format_value'; import { + getFormattedSeverityScore, getSeverityColor, getSeverityWithLow, getMultiBucketImpactLabel, @@ -380,12 +381,11 @@ export class ExplorerChartSingleMetric extends React.Component { if (marker.anomalyScore !== undefined) { const score = parseInt(marker.anomalyScore); - const displayScore = score > 0 ? score : '< 1'; tooltipData.push({ label: i18n.translate('xpack.ml.explorer.singleMetricChart.anomalyScoreLabel', { defaultMessage: 'anomaly score', }), - value: displayScore, + value: getFormattedSeverityScore(score), color: getSeverityColor(score), seriesIdentifier: { key: seriesKey, diff --git a/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx b/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx index b62df648d1931..7c6b109f059f2 100644 --- a/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx +++ b/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx @@ -30,7 +30,10 @@ import { StatsBar, JobStatsBarStats } from '../../../components/stats_bar'; // @ts-ignore import { JobSelectorBadge } from '../../../components/job_selector/job_selector_badge/index'; import { toLocaleString } from '../../../util/string_utils'; -import { getSeverityColor } from '../../../../../common/util/anomaly_utils'; +import { + getFormattedSeverityScore, + getSeverityColor, +} from '../../../../../common/util/anomaly_utils'; // Used to pass on attribute names to table columns export enum AnomalyDetectionListColumns { @@ -125,7 +128,7 @@ export const AnomalyDetectionTable: FC = ({ items, jobsList, statsBarData return ( // @ts-ignore - {score >= 1 ? Math.floor(score) : '< 1'} + {getFormattedSeverityScore(score)} ); } diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js index 74c9a6117e566..fa172fa0c2190 100644 --- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js +++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js @@ -19,6 +19,7 @@ import moment from 'moment'; import { i18n } from '@kbn/i18n'; import { + getFormattedSeverityScore, getSeverityWithLow, getMultiBucketImpactLabel, } from '../../../../../common/util/anomaly_utils'; @@ -1442,12 +1443,11 @@ class TimeseriesChartIntl extends Component { if (marker.anomalyScore !== undefined) { const score = parseInt(marker.anomalyScore); - const displayScore = score > 0 ? score : '< 1'; tooltipData.push({ label: i18n.translate('xpack.ml.timeSeriesExplorer.timeSeriesChart.anomalyScoreLabel', { defaultMessage: 'anomaly score', }), - value: displayScore, + value: getFormattedSeverityScore(score), color: anomalyColorScale(score), seriesIdentifier: { key: seriesKey, diff --git a/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx b/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx index 8d889a7a4dc2a..026f172147192 100644 --- a/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx +++ b/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx @@ -19,7 +19,7 @@ export interface EnableAlertResponse { } const showTlsAndEncryptionError = () => { - const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = Legacy.shims.docLinks; + const settingsUrl = Legacy.shims.docLinks.links.alerting.generalSettings; Legacy.shims.toastNotifications.addWarning({ title: toMountPoint( @@ -36,11 +36,7 @@ const showTlsAndEncryptionError = () => { })}

    - + {i18n.translate('xpack.monitoring.healthCheck.encryptionErrorAction', { defaultMessage: 'Learn how.', })} @@ -51,7 +47,7 @@ const showTlsAndEncryptionError = () => { }; const showUnableToDisableWatcherClusterAlertsError = () => { - const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = Legacy.shims.docLinks; + const settingsUrl = Legacy.shims.docLinks.links.alerting.generalSettings; Legacy.shims.toastNotifications.addWarning({ title: toMountPoint( @@ -68,11 +64,7 @@ const showUnableToDisableWatcherClusterAlertsError = () => { })}

    - + {i18n.translate('xpack.monitoring.healthCheck.unableToDisableWatches.action', { defaultMessage: 'Learn more.', })} diff --git a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap index c925ecd1c98ff..40541aeaad4c1 100644 --- a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap @@ -13,7 +13,7 @@ exports[`Logs should render a default message 1`] = ` values={ Object { "link": Click here for more information @@ -67,7 +67,7 @@ exports[`Logs should render with a no cluster found reason 1`] = ` values={ Object { "link": setup @@ -92,7 +92,7 @@ exports[`Logs should render with a no index found reason 1`] = ` values={ Object { "link": setup @@ -117,7 +117,7 @@ exports[`Logs should render with a no index pattern found reason 1`] = ` values={ Object { "link": Filebeat @@ -142,7 +142,7 @@ exports[`Logs should render with a no node found reason 1`] = ` values={ Object { "link": setup @@ -167,7 +167,7 @@ exports[`Logs should render with a no structured logs reason 1`] = ` values={ Object { "link": points to JSON logs @@ -195,7 +195,7 @@ exports[`Logs should render with a no type found reason 1`] = ` values={ Object { "link": these directions diff --git a/x-pack/plugins/monitoring/public/components/logs/reason.js b/x-pack/plugins/monitoring/public/components/logs/reason.js index 538c8934cdaef..512b44c8165b1 100644 --- a/x-pack/plugins/monitoring/public/components/logs/reason.js +++ b/x-pack/plugins/monitoring/public/components/logs/reason.js @@ -13,7 +13,9 @@ import { Legacy } from '../../legacy_shims'; import { Monospace } from '../metricbeat_migration/instruction_steps/components/monospace/monospace'; export const Reason = ({ reason }) => { - const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = Legacy.shims.docLinks; + const filebeatUrl = Legacy.shims.docLinks.links.filebeat.installation; + const elasticsearchUrl = Legacy.shims.docLinks.links.filebeat.elasticsearchModule; + const troubleshootUrl = Legacy.shims.docLinks.links.monitoring.troubleshootKibana; let title = i18n.translate('xpack.monitoring.logs.reason.defaultTitle', { defaultMessage: 'No log data found', }); @@ -23,10 +25,7 @@ export const Reason = ({ reason }) => { defaultMessage="We did not find any log data and we are unable to diagnose why. {link}" values={{ link: ( - + { defaultMessage="Set up {link}, then configure your Elasticsearch output to your monitoring cluster." values={{ link: ( - + {i18n.translate('xpack.monitoring.logs.reason.noIndexPatternLink', { defaultMessage: 'Filebeat', })} @@ -82,10 +78,7 @@ export const Reason = ({ reason }) => { defaultMessage="Follow {link} to set up Elasticsearch." values={{ link: ( - + {i18n.translate('xpack.monitoring.logs.reason.noTypeLink', { defaultMessage: 'these directions', })} @@ -105,10 +98,7 @@ export const Reason = ({ reason }) => { values={{ varPaths: var.paths, link: ( - + {i18n.translate('xpack.monitoring.logs.reason.notUsingStructuredLogsLink', { defaultMessage: 'points to JSON logs', })} @@ -127,10 +117,7 @@ export const Reason = ({ reason }) => { defaultMessage="Check that your {link} is correct." values={{ link: ( - + {i18n.translate('xpack.monitoring.logs.reason.noClusterLink', { defaultMessage: 'setup', })} @@ -149,10 +136,7 @@ export const Reason = ({ reason }) => { defaultMessage="Check that your {link} is correct." values={{ link: ( - + {i18n.translate('xpack.monitoring.logs.reason.noNodeLink', { defaultMessage: 'setup', })} @@ -171,10 +155,7 @@ export const Reason = ({ reason }) => { defaultMessage="We found logs, but none for this index. If this problem continues, check that your {link} is correct." values={{ link: ( - + {i18n.translate('xpack.monitoring.logs.reason.noIndexLink', { defaultMessage: 'setup', })} @@ -193,10 +174,7 @@ export const Reason = ({ reason }) => { defaultMessage="There is an issue reading from your filebeat indices. {link}." values={{ link: ( - + {i18n.translate('xpack.monitoring.logs.reason.correctIndexNameLink', { defaultMessage: 'Click here for more information', })} diff --git a/x-pack/plugins/monitoring/public/components/logs/reason.test.js b/x-pack/plugins/monitoring/public/components/logs/reason.test.js index 53aad5511e0ae..0d75af1d1048f 100644 --- a/x-pack/plugins/monitoring/public/components/logs/reason.test.js +++ b/x-pack/plugins/monitoring/public/components/logs/reason.test.js @@ -15,6 +15,15 @@ jest.mock('../../legacy_shims', () => ({ docLinks: { ELASTIC_WEBSITE_URL: 'https://www.elastic.co/', DOC_LINK_VERSION: 'current', + links: { + filebeat: { + elasticsearchModule: 'jest-metadata-mock-url', + installation: 'jest-metadata-mock-url', + }, + monitoring: { + troubleshootKibana: 'jest-metadata-mock-url', + }, + }, }, }, }, diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap b/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap index 2f29cd9122a61..1173f36d620d6 100644 --- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap @@ -156,7 +156,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1 "children":

    ({ shims: { kfetch: jest.fn(), docLinks: { - ELASTIC_WEBSITE_URL: 'https://www.elastic.co/', - DOC_LINK_VERSION: 'current', + links: { + monitoring: { + monitorKibana: 'jest-metadata-mock-url', + monitorElasticsearch: 'jest-metadata-mock-url', + }, + metricbeat: { + install: 'jest-metadata-mock-url', + configure: 'jest-metadata-mock-url', + }, + }, }, }, }, diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js index 1006468d0c736..a0b5468cb9c77 100644 --- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js +++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js @@ -14,10 +14,10 @@ import { Legacy } from '../../../../legacy_shims'; import { getMigrationStatusStep, getSecurityStep } from '../common_instructions'; export function getApmInstructionsForEnablingMetricbeat(product, _meta, { esMonitoringUrl }) { - const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = Legacy.shims.docLinks; - const securitySetup = getSecurityStep( - `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/configuring-howto-metricbeat.html` - ); + const metricbeatConfigUrl = Legacy.shims.docLinks.links.metricbeat.configure; + const metricbeatInstallUrl = Legacy.shims.docLinks.links.metricbeat.install; + const metricbeatStartUrl = Legacy.shims.docLinks.links.metricbeat.start; + const securitySetup = getSecurityStep(metricbeatConfigUrl); const installMetricbeatStep = { title: i18n.translate( @@ -29,10 +29,7 @@ export function getApmInstructionsForEnablingMetricbeat(product, _meta, { esMoni children: (

    - +

    - +

    - +

    - +

    - +

    - +

    - +

    - +

    - +

    - + }); const showIfLegacyOnlyIndices = () => { - const { ELASTIC_WEBSITE_URL } = Legacy.shims.docLinks; + const blogUrl = Legacy.shims.docLinks.links.monitoring.metricbeatBlog; const toast = Legacy.shims.toastNotifications.addWarning({ title: toMountPoint( { - + {learnMoreLabel()}

    @@ -69,7 +65,7 @@ const showIfLegacyOnlyIndices = () => { }; const showIfLegacyAndMetricbeatIndices = () => { - const { ELASTIC_WEBSITE_URL } = Legacy.shims.docLinks; + const blogUrl = Legacy.shims.docLinks.links.monitoring.metricbeatBlog; const toast = Legacy.shims.toastNotifications.addWarning({ title: toMountPoint( { - + {learnMoreLabel()}
    diff --git a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.js index 7c01eea57e723..325215d08af5f 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.js +++ b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.js @@ -528,7 +528,7 @@ export class RemoteClusterForm extends Component { title={ } > diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/validate_es_response.test.ts.snap b/x-pack/plugins/security/server/authorization/__snapshots__/validate_es_response.test.ts.snap index 226002545a378..76d284a21984e 100644 --- a/x-pack/plugins/security/server/authorization/__snapshots__/validate_es_response.test.ts.snap +++ b/x-pack/plugins/security/server/authorization/__snapshots__/validate_es_response.test.ts.snap @@ -1,21 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`validateEsPrivilegeResponse fails validation when an action is malformed in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [child \\"foo-resource\\" fails because [child \\"action3\\" fails because [\\"action3\\" must be a boolean]]]]"`; +exports[`validateEsPrivilegeResponse fails validation when an action is malformed in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: [action3]: expected value of type [boolean] but got [string]"`; -exports[`validateEsPrivilegeResponse fails validation when an action is missing in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [child \\"foo-resource\\" fails because [child \\"action2\\" fails because [\\"action2\\" is required]]]]"`; +exports[`validateEsPrivilegeResponse fails validation when an action is missing in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: [action2]: expected value of type [boolean] but got [undefined]"`; -exports[`validateEsPrivilegeResponse fails validation when an expected resource property is missing from the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [child \\"bar-resource\\" fails because [\\"bar-resource\\" is required]]]"`; +exports[`validateEsPrivilegeResponse fails validation when an expected resource property is missing from the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: Payload did not match expected resources"`; -exports[`validateEsPrivilegeResponse fails validation when an extra action is present in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [child \\"foo-resource\\" fails because [\\"action4\\" is not allowed]]]"`; +exports[`validateEsPrivilegeResponse fails validation when an extra action is present in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: [action4]: definition for this key is missing"`; -exports[`validateEsPrivilegeResponse fails validation when an extra application is present in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [\\"otherApplication\\" is not allowed]"`; +exports[`validateEsPrivilegeResponse fails validation when an extra application is present in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.otherApplication]: definition for this key is missing"`; -exports[`validateEsPrivilegeResponse fails validation when an unexpected resource property is present in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [child \\"bar-resource\\" fails because [\\"bar-resource\\" is required]]]"`; +exports[`validateEsPrivilegeResponse fails validation when an unexpected resource property is present in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: Payload did not match expected resources"`; -exports[`validateEsPrivilegeResponse fails validation when the "application" property is missing from the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [\\"application\\" is required]"`; +exports[`validateEsPrivilegeResponse fails validation when the "application" property is missing from the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: Payload did not match expected resources"`; -exports[`validateEsPrivilegeResponse fails validation when the requested application is missing from the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [\\"foo-application\\" is required]]"`; +exports[`validateEsPrivilegeResponse fails validation when the requested application is missing from the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: Payload did not match expected resources"`; -exports[`validateEsPrivilegeResponse fails validation when the resource propertry is malformed in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [child \\"foo-resource\\" fails because [\\"foo-resource\\" must be an object]]]"`; +exports[`validateEsPrivilegeResponse fails validation when the resource propertry is malformed in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: could not parse object value from json input"`; -exports[`validateEsPrivilegeResponse fails validation when there are no resource properties in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child \\"application\\" fails because [child \\"foo-application\\" fails because [child \\"foo-resource\\" fails because [\\"foo-resource\\" is required]]]"`; +exports[`validateEsPrivilegeResponse fails validation when there are no resource properties in the response 1`] = `"Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.foo-application]: Payload did not match expected resources"`; diff --git a/x-pack/plugins/security/server/authorization/check_privileges.test.ts b/x-pack/plugins/security/server/authorization/check_privileges.test.ts index cfa6153c1b164..93f5efed58fb8 100644 --- a/x-pack/plugins/security/server/authorization/check_privileges.test.ts +++ b/x-pack/plugins/security/server/authorization/check_privileges.test.ts @@ -316,7 +316,7 @@ describe('#atSpace', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "space:space_1" fails because ["saved_object:bar-type/get" is not allowed]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: [saved_object:bar-type/get]: definition for this key is missing]` ); }); @@ -338,7 +338,7 @@ describe('#atSpace', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "space:space_1" fails because [child "saved_object:foo-type/get" fails because ["saved_object:foo-type/get" is required]]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: [saved_object:foo-type/get]: expected value of type [boolean] but got [undefined]]` ); }); }); @@ -1092,7 +1092,7 @@ describe('#atSpaces', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "space:space_1" fails because [child "mock-action:version" fails because ["mock-action:version" is required]]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: [mock-action:version]: expected value of type [boolean] but got [undefined]]` ); }); @@ -1379,7 +1379,7 @@ describe('#atSpaces', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "space:space_2" fails because ["space:space_2" is required]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: Payload did not match expected resources]` ); }); @@ -1407,7 +1407,7 @@ describe('#atSpaces', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "space:space_2" fails because ["space:space_2" is required]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: Payload did not match expected resources]` ); }); @@ -1440,7 +1440,7 @@ describe('#atSpaces', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because ["space:space_3" is not allowed]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: Payload did not match expected resources]` ); }); @@ -1463,7 +1463,7 @@ describe('#atSpaces', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "space:space_2" fails because ["space:space_2" is required]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: Payload did not match expected resources]` ); }); }); @@ -2266,7 +2266,7 @@ describe('#globally', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "*" fails because [child "mock-action:version" fails because ["mock-action:version" is required]]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: [mock-action:version]: expected value of type [boolean] but got [undefined]]` ); }); @@ -2384,7 +2384,7 @@ describe('#globally', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "*" fails because ["saved_object:bar-type/get" is not allowed]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: [saved_object:bar-type/get]: definition for this key is missing]` ); }); @@ -2405,7 +2405,7 @@ describe('#globally', () => { }, }); expect(result).toMatchInlineSnapshot( - `[Error: Invalid response received from Elasticsearch has_privilege endpoint. ValidationError: child "application" fails because [child "kibana-our_application" fails because [child "*" fails because [child "saved_object:foo-type/get" fails because ["saved_object:foo-type/get" is required]]]]]` + `[Error: Invalid response received from Elasticsearch has_privilege endpoint. Error: [application.kibana-our_application]: [saved_object:foo-type/get]: expected value of type [boolean] but got [undefined]]` ); }); }); diff --git a/x-pack/plugins/security/server/authorization/validate_es_response.ts b/x-pack/plugins/security/server/authorization/validate_es_response.ts index dbc5bdee8f250..19afaaf035c15 100644 --- a/x-pack/plugins/security/server/authorization/validate_es_response.ts +++ b/x-pack/plugins/security/server/authorization/validate_es_response.ts @@ -5,7 +5,7 @@ * 2.0. */ -import Joi from 'joi'; +import { schema } from '@kbn/config-schema'; import { HasPrivilegesResponse } from './types'; export function validateEsPrivilegeResponse( @@ -14,48 +14,57 @@ export function validateEsPrivilegeResponse( actions: string[], resources: string[] ) { - const schema = buildValidationSchema(application, actions, resources); - const { error, value } = schema.validate(response); - - if (error) { - throw new Error( - `Invalid response received from Elasticsearch has_privilege endpoint. ${error}` - ); + const validationSchema = buildValidationSchema(application, actions, resources); + try { + validationSchema.validate(response); + } catch (e) { + throw new Error(`Invalid response received from Elasticsearch has_privilege endpoint. ${e}`); } - return value; + return response; } function buildActionsValidationSchema(actions: string[]) { - return Joi.object({ + return schema.object({ ...actions.reduce>((acc, action) => { return { ...acc, - [action]: Joi.bool().required(), + [action]: schema.boolean(), }; }, {}), - }).required(); + }); } function buildValidationSchema(application: string, actions: string[], resources: string[]) { const actionValidationSchema = buildActionsValidationSchema(actions); - const resourceValidationSchema = Joi.object({ - ...resources.reduce((acc, resource) => { - return { - ...acc, - [resource]: actionValidationSchema, - }; - }, {}), - }).required(); + const resourceValidationSchema = schema.object( + {}, + { + unknowns: 'allow', + validate: (value) => { + const actualResources = Object.keys(value).sort(); + if ( + resources.length !== actualResources.length || + !resources.sort().every((x, i) => x === actualResources[i]) + ) { + throw new Error('Payload did not match expected resources'); + } + + Object.values(value).forEach((actionResult) => { + actionValidationSchema.validate(actionResult); + }); + }, + } + ); - return Joi.object({ - username: Joi.string().required(), - has_all_requested: Joi.bool(), - cluster: Joi.object(), - application: Joi.object({ + return schema.object({ + username: schema.string(), + has_all_requested: schema.boolean(), + cluster: schema.object({}, { unknowns: 'allow' }), + application: schema.object({ [application]: resourceValidationSchema, - }).required(), - index: Joi.object(), - }).required(); + }), + index: schema.object({}, { unknowns: 'allow' }), + }); } diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts index d4bae9d88d262..ba64814cd1daf 100644 --- a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts +++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts @@ -1277,6 +1277,7 @@ export class EndpointDocGenerator { status: agentPolicyStatuses.Active, description: 'Some description', namespace: 'default', + is_managed: false, monitoring_enabled: ['logs', 'metrics'], revision: 2, updated_at: '2020-07-22T16:36:49.196Z', diff --git a/x-pack/plugins/security_solution/public/common/lib/lib.ts b/x-pack/plugins/security_solution/public/common/lib/lib.ts index e953fb1a341a3..7919ef78fff0b 100644 --- a/x-pack/plugins/security_solution/public/common/lib/lib.ts +++ b/x-pack/plugins/security_solution/public/common/lib/lib.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { IScope } from 'angular'; import { NormalizedCacheObject } from 'apollo-cache-inmemory'; import ApolloClient from 'apollo-client'; @@ -38,10 +37,3 @@ export interface AppKibanaUIConfig { // eslint-disable-next-line @typescript-eslint/no-explicit-any set(key: string, value: any): Promise; } - -export interface AppKibanaAdapterServiceRefs { - config: AppKibanaUIConfig; - rootScope: IScope; -} - -export type AppBufferedKibanaServiceCall = (serviceRefs: ServiceRefs) => void; diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts index 5a99728f83b57..40900fdccdb28 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts @@ -38,7 +38,7 @@ export const updateRules = async ({ const enabled = ruleUpdate.enabled ?? true; const newInternalRule: InternalRuleUpdate = { name: ruleUpdate.name, - tags: addTags(ruleUpdate.tags ?? [], existingRule.params.ruleId, false), + tags: addTags(ruleUpdate.tags ?? [], existingRule.params.ruleId, existingRule.params.immutable), params: { author: ruleUpdate.author ?? [], buildingBlockType: ruleUpdate.building_block_type, diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts index eb38c58d82ea1..6011c67376973 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts @@ -166,6 +166,12 @@ export const sampleDocWithSortId = ( ip: destIp ?? '127.0.0.1', }, }, + fields: { + someKey: ['someValue'], + '@timestamp': ['2020-04-20T21:27:45+0000'], + 'source.ip': ip ? (Array.isArray(ip) ? ip : [ip]) : ['127.0.0.1'], + 'destination.ip': destIp ? (Array.isArray(destIp) ? destIp : [destIp]) : ['127.0.0.1'], + }, sort: ['1234567891111'], }); @@ -185,6 +191,11 @@ export const sampleDocNoSortId = ( ip: ip ?? '127.0.0.1', }, }, + fields: { + someKey: ['someValue'], + '@timestamp': ['2020-04-20T21:27:45+0000'], + 'source.ip': [ip ?? '127.0.0.1'], + }, sort: [], }); diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.test.ts index dc8ed156d8dea..8597667f64657 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.test.ts @@ -56,7 +56,12 @@ describe('create_signals', () => { ], }, }, - + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], sort: [ { '@timestamp': { @@ -115,7 +120,12 @@ describe('create_signals', () => { ], }, }, - + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], sort: [ { '@timestamp': { @@ -175,7 +185,12 @@ describe('create_signals', () => { ], }, }, - + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], sort: [ { '@timestamp': { @@ -236,7 +251,12 @@ describe('create_signals', () => { ], }, }, - + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], sort: [ { '@timestamp': { @@ -296,7 +316,12 @@ describe('create_signals', () => { ], }, }, - + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], sort: [ { '@timestamp': { @@ -358,6 +383,12 @@ describe('create_signals', () => { ], }, }, + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], aggregations: { tags: { terms: { diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.ts index dde284ed3beab..f8fd4ed30d6ee 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_events_query.ts @@ -89,6 +89,12 @@ export const buildEventsSearchQuery = ({ ], }, }, + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], ...(aggregations ? { aggregations } : {}), sort: [ { diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts index f3da37c198ac2..713178345361d 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts @@ -67,7 +67,7 @@ describe('transformThresholdResultsToEcs', () => { _id, _index: 'test', _source: { - '@timestamp': '2020-04-20T21:27:45+0000', + '@timestamp': ['2020-04-20T21:27:45+0000'], threshold_result: { count: 1, value: '127.0.0.1', diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts index e0494c2e92b1c..dd9e1e97a2b73 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts @@ -75,7 +75,7 @@ const getTransformedHits = ( } const source = { - '@timestamp': get(timestampOverride ?? '@timestamp', hit._source), + '@timestamp': get(timestampOverride ?? '@timestamp', hit.fields), threshold_result: { count: totalResults, value: ruleId, @@ -104,10 +104,10 @@ const getTransformedHits = ( } const source = { - '@timestamp': get(timestampOverride ?? '@timestamp', hit._source), + '@timestamp': get(timestampOverride ?? '@timestamp', hit.fields), threshold_result: { count: docCount, - value: get(threshold.field, hit._source), + value: key, }, }; diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_field_and_set_tuples.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_field_and_set_tuples.test.ts index 6f744de469d5c..aac0f47c28295 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_field_and_set_tuples.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_field_and_set_tuples.test.ts @@ -120,7 +120,7 @@ describe('filterEventsAgainstList', () => { exceptionItem, buildRuleMessage, }); - expect([...matchedSet]).toEqual([JSON.stringify('1.1.1.1')]); + expect([...matchedSet]).toEqual([JSON.stringify(['1.1.1.1'])]); }); test('it returns two matched sets as a JSON.stringify() set from the "events"', async () => { @@ -133,7 +133,7 @@ describe('filterEventsAgainstList', () => { exceptionItem, buildRuleMessage, }); - expect([...matchedSet]).toEqual([JSON.stringify('1.1.1.1'), JSON.stringify('2.2.2.2')]); + expect([...matchedSet]).toEqual([JSON.stringify(['1.1.1.1']), JSON.stringify(['2.2.2.2'])]); }); test('it returns an array as a set as a JSON.stringify() array from the "events"', async () => { @@ -282,7 +282,7 @@ describe('filterEventsAgainstList', () => { exceptionItem, buildRuleMessage, }); - expect([...matchedSet1]).toEqual([JSON.stringify('1.1.1.1'), JSON.stringify('2.2.2.2')]); - expect([...matchedSet2]).toEqual([JSON.stringify('3.3.3.3'), JSON.stringify('5.5.5.5')]); + expect([...matchedSet1]).toEqual([JSON.stringify(['1.1.1.1']), JSON.stringify(['2.2.2.2'])]); + expect([...matchedSet2]).toEqual([JSON.stringify(['3.3.3.3']), JSON.stringify(['5.5.5.5'])]); }); }); diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.test.ts index aff372dc5bf3b..aae4a7aae2b9e 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.test.ts @@ -62,9 +62,9 @@ describe('createSetToFilterAgainst', () => { expect(listClient.searchListItemByValues).toHaveBeenCalledWith({ listId: 'list-123', type: 'ip', - value: ['1.1.1.1'], + value: [['1.1.1.1']], }); - expect([...field]).toEqual([JSON.stringify('1.1.1.1')]); + expect([...field]).toEqual([JSON.stringify(['1.1.1.1'])]); }); test('it returns 2 fields if the list returns 2 items', async () => { @@ -81,9 +81,9 @@ describe('createSetToFilterAgainst', () => { expect(listClient.searchListItemByValues).toHaveBeenCalledWith({ listId: 'list-123', type: 'ip', - value: ['1.1.1.1', '2.2.2.2'], + value: [['1.1.1.1'], ['2.2.2.2']], }); - expect([...field]).toEqual([JSON.stringify('1.1.1.1'), JSON.stringify('2.2.2.2')]); + expect([...field]).toEqual([JSON.stringify(['1.1.1.1']), JSON.stringify(['2.2.2.2'])]); }); test('it returns 0 fields if the field does not match up to a valid field within the event', async () => { diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.ts index c9f98e1b1e4e3..d400cc901a3ed 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/create_set_to_filter_against.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { get } from 'lodash/fp'; import { CreateSetToFilterAgainstOptions } from './types'; /** @@ -31,7 +30,7 @@ export const createSetToFilterAgainst = async ({ buildRuleMessage, }: CreateSetToFilterAgainstOptions): Promise> => { const valuesFromSearchResultField = events.reduce((acc, searchResultItem) => { - const valueField = get(field, searchResultItem._source); + const valueField = searchResultItem.fields ? searchResultItem.fields[field] : undefined; if (valueField != null) { acc.add(valueField); } diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.test.ts index 092a684756ea3..eb5c69e8abfe8 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.test.ts @@ -40,7 +40,7 @@ describe('filterEvents', () => { { field: 'source.ip', operator: 'included', - matchedSet: new Set([JSON.stringify('1.1.1.1')]), + matchedSet: new Set([JSON.stringify(['1.1.1.1'])]), }, ]; const field = filterEvents({ @@ -56,7 +56,7 @@ describe('filterEvents', () => { { field: 'source.ip', operator: 'excluded', - matchedSet: new Set([JSON.stringify('1.1.1.1')]), + matchedSet: new Set([JSON.stringify(['1.1.1.1'])]), }, ]; const field = filterEvents({ @@ -72,7 +72,7 @@ describe('filterEvents', () => { { field: 'madeup.nonexistent', // field does not exist operator: 'included', - matchedSet: new Set([JSON.stringify('1.1.1.1')]), + matchedSet: new Set([JSON.stringify(['1.1.1.1'])]), }, ]; const field = filterEvents({ @@ -88,12 +88,12 @@ describe('filterEvents', () => { { field: 'source.ip', operator: 'included', - matchedSet: new Set([JSON.stringify('1.1.1.1')]), + matchedSet: new Set([JSON.stringify(['1.1.1.1'])]), }, { field: 'source.ip', operator: 'excluded', - matchedSet: new Set([JSON.stringify('1.1.1.1')]), + matchedSet: new Set([JSON.stringify(['1.1.1.1'])]), }, ]; diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.ts index 316ef5eb74f41..421ed91278f4c 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { get } from 'lodash/fp'; import { SearchResponse } from '../../../types'; import { FilterEventsOptions } from './types'; @@ -22,13 +21,17 @@ export const filterEvents = ({ return events.filter((item) => { return fieldAndSetTuples .map((tuple) => { - const eventItem = get(tuple.field, item._source); - if (eventItem == null) { - return true; - } else if (tuple.operator === 'included') { + const eventItem = item.fields ? item.fields[tuple.field] : undefined; + if (tuple.operator === 'included') { + if (eventItem == null) { + return true; + } // only create a signal if the event is not in the value list return !tuple.matchedSet.has(JSON.stringify(eventItem)); } else if (tuple.operator === 'excluded') { + if (eventItem == null) { + return false; + } // only create a signal if the event is in the value list return tuple.matchedSet.has(JSON.stringify(eventItem)); } else { diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events_against_list.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events_against_list.test.ts index c1ba8eabf7110..5b2f3426cd8aa 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events_against_list.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/filters/filter_events_against_list.test.ts @@ -162,12 +162,12 @@ describe('filterEventsAgainstList', () => { // this call represents an exception list with a value list containing ['2.2.2.2', '4.4.4.4'] (listClient.searchListItemByValues as jest.Mock).mockResolvedValueOnce([ - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, - { ...getSearchListItemResponseMock(), value: '4.4.4.4' }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, + { ...getSearchListItemResponseMock(), value: ['4.4.4.4'] }, ]); // this call represents an exception list with a value list containing ['6.6.6.6'] (listClient.searchListItemByValues as jest.Mock).mockResolvedValueOnce([ - { ...getSearchListItemResponseMock(), value: '6.6.6.6' }, + { ...getSearchListItemResponseMock(), value: ['6.6.6.6'] }, ]); const res = await filterEventsAgainstList({ @@ -224,11 +224,11 @@ describe('filterEventsAgainstList', () => { // this call represents an exception list with a value list containing ['2.2.2.2', '4.4.4.4'] (listClient.searchListItemByValues as jest.Mock).mockResolvedValueOnce([ - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, ]); // this call represents an exception list with a value list containing ['6.6.6.6'] (listClient.searchListItemByValues as jest.Mock).mockResolvedValueOnce([ - { ...getSearchListItemResponseMock(), value: '6.6.6.6' }, + { ...getSearchListItemResponseMock(), value: ['6.6.6.6'] }, ]); const res = await filterEventsAgainstList({ @@ -283,11 +283,11 @@ describe('filterEventsAgainstList', () => { // this call represents an exception list with a value list containing ['2.2.2.2'] (listClient.searchListItemByValues as jest.Mock).mockResolvedValueOnce([ - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, ]); // this call represents an exception list with a value list containing ['4.4.4.4'] (listClient.searchListItemByValues as jest.Mock).mockResolvedValueOnce([ - { ...getSearchListItemResponseMock(), value: '4.4.4.4' }, + { ...getSearchListItemResponseMock(), value: ['4.4.4.4'] }, ]); const res = await filterEventsAgainstList({ @@ -365,7 +365,7 @@ describe('filterEventsAgainstList', () => { // this call represents an exception list with a value list containing ['2.2.2.2', '4.4.4.4'] (listClient.searchListItemByValues as jest.Mock).mockResolvedValue([ - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, ]); const res = await filterEventsAgainstList({ diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/find_threshold_signals.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/find_threshold_signals.ts index 7d32ac6873eb2..6144f1f4b3823 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/find_threshold_signals.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/find_threshold_signals.ts @@ -69,6 +69,12 @@ export const findThresholdSignals = async ({ }, }, ], + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], size: 1, }, }, diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts index 418d30711169e..b506a2463a311 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts @@ -310,9 +310,9 @@ describe('searchAfterAndBulkCreate', () => { test('should return success when all search results are in the allowlist and with sortId present', async () => { const searchListItems: SearchListItemArraySchema = [ - { ...getSearchListItemResponseMock(), value: '1.1.1.1' }, - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, - { ...getSearchListItemResponseMock(), value: '3.3.3.3' }, + { ...getSearchListItemResponseMock(), value: ['1.1.1.1'] }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, + { ...getSearchListItemResponseMock(), value: ['3.3.3.3'] }, ]; listClient.searchListItemByValues = jest.fn().mockResolvedValue(searchListItems); const sampleParams = sampleRuleAlertParams(30); @@ -374,10 +374,10 @@ describe('searchAfterAndBulkCreate', () => { test('should return success when all search results are in the allowlist and no sortId present', async () => { const searchListItems: SearchListItemArraySchema = [ - { ...getSearchListItemResponseMock(), value: '1.1.1.1' }, - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, - { ...getSearchListItemResponseMock(), value: '2.2.2.2' }, + { ...getSearchListItemResponseMock(), value: ['1.1.1.1'] }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, + { ...getSearchListItemResponseMock(), value: ['2.2.2.2'] }, ]; listClient.searchListItemByValues = jest.fn().mockResolvedValue(searchListItems); diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/single_bulk_create.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/single_bulk_create.test.ts index 942db1e3b1aaa..19aba907f0c84 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/single_bulk_create.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/single_bulk_create.test.ts @@ -316,19 +316,9 @@ describe('singleBulkCreate', () => { }); test('filter duplicate rules will return back search responses if they do not have a signal and will NOT filter the source out', () => { - const ancestors = sampleDocWithAncestors(); - ancestors.hits.hits[0]._source = { '@timestamp': '2020-04-20T21:27:45+0000' }; + const ancestors = sampleDocSearchResultsNoSortId(); const filtered = filterDuplicateRules('04128c15-0d1b-4716-a4c5-46997ac7f3bd', ancestors); - expect(filtered).toEqual([ - { - _index: 'myFakeSignalIndex', - _type: 'doc', - _score: 100, - _version: 1, - _id: 'e1e08ddc-5e37-49ff-a258-5393aa44435a', - _source: { '@timestamp': '2020-04-20T21:27:45+0000' }, - }, - ]); + expect(filtered).toEqual(ancestors.hits.hits); }); test('filter duplicate rules does not attempt filters when the signal is not an event type of signal but rather a "clash" from the source index having its own numeric signal type', () => { diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.mock.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.mock.ts index a88d9061f7a1f..12865e4dd47a9 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.mock.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.mock.ts @@ -81,6 +81,7 @@ export const getThreatListSearchResponseMock = (): SearchResponse ({ }, }); +export const getThreatListItemFieldsMock = () => ({ + '@timestamp': ['2020-09-09T21:59:13Z'], + 'host.name': ['host-1'], + 'host.ip': ['192.168.0.0.1'], + 'source.ip': ['127.0.0.1'], + 'source.port': [1], + 'destination.ip': ['127.0.0.1'], + 'destination.port': [1], +}); + export const getFilterThreatMapping = (): ThreatMapping => [ { entries: [ diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.test.ts index 792fa889e395d..7a9c4b43b8f7a 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.test.ts @@ -133,10 +133,16 @@ describe('build_threat_mapping_filter', () => { }, ], threatListItem: { - '@timestamp': '2020-09-09T21:59:13Z', - host: { - name: 'host-1', - // since ip is missing this entire AND clause should be dropped + _source: { + '@timestamp': '2020-09-09T21:59:13Z', + host: { + name: 'host-1', + // since ip is missing this entire AND clause should be dropped + }, + }, + fields: { + '@timestamp': ['2020-09-09T21:59:13Z'], + 'host.name': ['host-1'], }, }, }); @@ -177,6 +183,10 @@ describe('build_threat_mapping_filter', () => { name: 'host-1', }, }, + fields: { + '@timestamp': ['2020-09-09T21:59:13Z'], + 'host.name': ['host-1'], + }, }, }); expect(item).toEqual([ diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.ts index 180895877bdd2..cab01a602b8a9 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/build_threat_mapping_filter.ts @@ -55,7 +55,8 @@ export const filterThreatMapping = ({ threatMapping .map((threatMap) => { const atLeastOneItemMissingInThreatList = threatMap.entries.some((entry) => { - return get(entry.value, threatListItem._source) == null; + const itemValue = get(entry.value, threatListItem.fields); + return itemValue == null || itemValue.length !== 1; }); if (atLeastOneItemMissingInThreatList) { return { ...threatMap, entries: [] }; @@ -70,15 +71,15 @@ export const createInnerAndClauses = ({ threatListItem, }: CreateInnerAndClausesOptions): BooleanFilter[] => { return threatMappingEntries.reduce((accum, threatMappingEntry) => { - const value = get(threatMappingEntry.value, threatListItem._source); - if (value != null) { + const value = get(threatMappingEntry.value, threatListItem.fields); + if (value != null && value.length === 1) { // These values could be potentially 10k+ large so mutating the array intentionally accum.push({ bool: { should: [ { match: { - [threatMappingEntry.field]: value, + [threatMappingEntry.field]: value[0], }, }, ], diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/get_threat_list.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/get_threat_list.ts index c646fee81f1b1..92d4e5cf8a93b 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/get_threat_list.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/get_threat_list.ts @@ -55,6 +55,12 @@ export const getThreatList = async ({ const response: SearchResponse = await callCluster('search', { body: { query: queryFilter, + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], search_after: searchAfter, sort: getSortWithTieBreaker({ sortField, diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts index 5444f08474053..75bd9f593a6ac 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts @@ -1166,6 +1166,9 @@ describe('utils', () => { test('It will not set an invalid date time stamp from a non-existent @timestamp when the index is not 100% ECS compliant', () => { const searchResult = sampleDocSearchResultsNoSortId(); (searchResult.hits.hits[0]._source['@timestamp'] as unknown) = undefined; + if (searchResult.hits.hits[0].fields != null) { + (searchResult.hits.hits[0].fields['@timestamp'] as unknown) = undefined; + } const { lastLookBackDate } = createSearchAfterReturnTypeFromResponse({ searchResult, timestampOverride: undefined, @@ -1176,6 +1179,9 @@ describe('utils', () => { test('It will not set an invalid date time stamp from a null @timestamp when the index is not 100% ECS compliant', () => { const searchResult = sampleDocSearchResultsNoSortId(); (searchResult.hits.hits[0]._source['@timestamp'] as unknown) = null; + if (searchResult.hits.hits[0].fields != null) { + (searchResult.hits.hits[0].fields['@timestamp'] as unknown) = null; + } const { lastLookBackDate } = createSearchAfterReturnTypeFromResponse({ searchResult, timestampOverride: undefined, @@ -1186,6 +1192,9 @@ describe('utils', () => { test('It will not set an invalid date time stamp from an invalid @timestamp string', () => { const searchResult = sampleDocSearchResultsNoSortId(); (searchResult.hits.hits[0]._source['@timestamp'] as unknown) = 'invalid'; + if (searchResult.hits.hits[0].fields != null) { + (searchResult.hits.hits[0].fields['@timestamp'] as unknown) = ['invalid']; + } const { lastLookBackDate } = createSearchAfterReturnTypeFromResponse({ searchResult, timestampOverride: undefined, @@ -1198,6 +1207,9 @@ describe('utils', () => { test('It returns undefined if the search result contains a null timestamp', () => { const searchResult = sampleDocSearchResultsNoSortId(); (searchResult.hits.hits[0]._source['@timestamp'] as unknown) = null; + if (searchResult.hits.hits[0].fields != null) { + (searchResult.hits.hits[0].fields['@timestamp'] as unknown) = null; + } const date = lastValidDate({ searchResult, timestampOverride: undefined }); expect(date).toEqual(undefined); }); @@ -1205,6 +1217,9 @@ describe('utils', () => { test('It returns undefined if the search result contains a undefined timestamp', () => { const searchResult = sampleDocSearchResultsNoSortId(); (searchResult.hits.hits[0]._source['@timestamp'] as unknown) = undefined; + if (searchResult.hits.hits[0].fields != null) { + (searchResult.hits.hits[0].fields['@timestamp'] as unknown) = undefined; + } const date = lastValidDate({ searchResult, timestampOverride: undefined }); expect(date).toEqual(undefined); }); @@ -1212,13 +1227,9 @@ describe('utils', () => { test('It returns undefined if the search result contains an invalid string value', () => { const searchResult = sampleDocSearchResultsNoSortId(); (searchResult.hits.hits[0]._source['@timestamp'] as unknown) = 'invalid value'; - const date = lastValidDate({ searchResult, timestampOverride: undefined }); - expect(date).toEqual(undefined); - }); - - test('It returns correct date time stamp if the search result contains an invalid string value', () => { - const searchResult = sampleDocSearchResultsNoSortId(); - (searchResult.hits.hits[0]._source['@timestamp'] as unknown) = 'invalid value'; + if (searchResult.hits.hits[0].fields != null) { + (searchResult.hits.hits[0].fields['@timestamp'] as unknown) = ['invalid value']; + } const date = lastValidDate({ searchResult, timestampOverride: undefined }); expect(date).toEqual(undefined); }); diff --git a/x-pack/plugins/security_solution/server/lib/machine_learning/index.ts b/x-pack/plugins/security_solution/server/lib/machine_learning/index.ts index a6f4c2086e47b..962c44174d891 100644 --- a/x-pack/plugins/security_solution/server/lib/machine_learning/index.ts +++ b/x-pack/plugins/security_solution/server/lib/machine_learning/index.ts @@ -60,6 +60,12 @@ export const getAnomalies = async ( })?.query, }, }, + fields: [ + { + field: '*', + include_unmapped: true, + }, + ], sort: [{ record_score: { order: 'desc' } }], }, }, diff --git a/x-pack/plugins/security_solution/server/lib/machine_learning/mocks.ts b/x-pack/plugins/security_solution/server/lib/machine_learning/mocks.ts index 630e9c9c88489..5d1b090e98a79 100644 --- a/x-pack/plugins/security_solution/server/lib/machine_learning/mocks.ts +++ b/x-pack/plugins/security_solution/server/lib/machine_learning/mocks.ts @@ -19,6 +19,7 @@ export const mlServicesMock = { (({ modulesProvider: jest.fn(), jobServiceProvider: jest.fn(), + anomalyDetectorsProvider: jest.fn(), mlSystemProvider: createMockMlSystemProvider(), mlClient: createMockClient(), } as unknown) as jest.Mocked), diff --git a/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/index.ts b/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/index.ts index 40867e566a730..f5deb258fc1f4 100644 --- a/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/index.ts +++ b/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/index.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { cloneDeep, merge, unionBy } from 'lodash/fp'; +import { cloneDeep, merge } from 'lodash/fp'; import { IEsSearchResponse } from '../../../../../../../../../src/plugins/data/common'; import { @@ -17,7 +17,7 @@ import { import { inspectStringifyObject } from '../../../../../utils/build_query'; import { SecuritySolutionTimelineFactory } from '../../types'; import { buildTimelineDetailsQuery } from './query.events_details.dsl'; -import { getDataFromFieldsHits, getDataFromSourceHits } from './helpers'; +import { getDataFromSourceHits } from './helpers'; export const timelineEventsDetails: SecuritySolutionTimelineFactory = { buildDsl: (options: TimelineEventsDetailsRequestOptions) => { @@ -29,7 +29,7 @@ export const timelineEventsDetails: SecuritySolutionTimelineFactory ): Promise => { const { indexName, eventId, docValueFields = [] } = options; - const { _source, fields, ...hitsData } = cloneDeep(response.rawResponse.hits.hits[0] ?? {}); + const { _source, ...hitsData } = cloneDeep(response.rawResponse.hits.hits[0] ?? {}); const inspect = { dsl: [inspectStringifyObject(buildTimelineDetailsQuery(indexName, eventId, docValueFields))], }; @@ -42,13 +42,11 @@ export const timelineEventsDetails: SecuritySolutionTimelineFactory { + it('returns the expected query', () => { + const indexName = '.siem-signals-default'; + const eventId = 'f0a936d50b5b3a5a193d415459c14587fe633f7e519df7b5dc151d56142680e3'; + const docValueFields = [ + { field: '@timestamp' }, + { field: 'agent.ephemeral_id' }, + { field: 'agent.id' }, + { field: 'agent.name' }, + ]; + + const query = buildTimelineDetailsQuery(indexName, eventId, docValueFields); + + expect(query).toMatchInlineSnapshot(` + Object { + "allowNoIndices": true, + "body": Object { + "docvalue_fields": Array [ + Object { + "field": "@timestamp", + }, + Object { + "field": "agent.ephemeral_id", + }, + Object { + "field": "agent.id", + }, + Object { + "field": "agent.name", + }, + ], + "query": Object { + "terms": Object { + "_id": Array [ + "f0a936d50b5b3a5a193d415459c14587fe633f7e519df7b5dc151d56142680e3", + ], + }, + }, + }, + "ignoreUnavailable": true, + "index": ".siem-signals-default", + "size": 1, + } + `); + }); +}); diff --git a/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/query.events_details.dsl.ts b/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/query.events_details.dsl.ts index a1265750271fa..e8890072c1aff 100644 --- a/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/query.events_details.dsl.ts +++ b/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/details/query.events_details.dsl.ts @@ -22,8 +22,6 @@ export const buildTimelineDetailsQuery = ( _id: [id], }, }, - fields: ['*'], - _source: ['signal.*'], }, size: 1, }); diff --git a/x-pack/plugins/security_solution/server/usage/collector.ts b/x-pack/plugins/security_solution/server/usage/collector.ts index 9126029139ef4..981101bf733c7 100644 --- a/x-pack/plugins/security_solution/server/usage/collector.ts +++ b/x-pack/plugins/security_solution/server/usage/collector.ts @@ -8,13 +8,19 @@ import { CoreSetup, SavedObjectsClientContract } from '../../../../../src/core/server'; import { CollectorFetchContext } from '../../../../../src/plugins/usage_collection/server'; import { CollectorDependencies } from './types'; -import { DetectionsUsage, fetchDetectionsUsage, defaultDetectionsUsage } from './detections'; +import { + DetectionsUsage, + fetchDetectionsUsage, + defaultDetectionsUsage, + fetchDetectionsMetrics, +} from './detections'; import { EndpointUsage, getEndpointTelemetryFromFleet } from './endpoints'; export type RegisterCollector = (deps: CollectorDependencies) => void; export interface UsageData { detections: DetectionsUsage; endpoints: EndpointUsage | {}; + detectionMetrics: {}; } export async function getInternalSavedObjectsClient(core: CoreSetup) { @@ -57,6 +63,53 @@ export const registerCollector: RegisterCollector = ({ }, }, }, + detectionMetrics: { + ml_jobs: { + type: 'array', + items: { + job_id: { type: 'keyword' }, + open_time: { type: 'keyword' }, + create_time: { type: 'keyword' }, + finished_time: { type: 'keyword' }, + state: { type: 'keyword' }, + data_counts: { + bucket_count: { type: 'long' }, + empty_bucket_count: { type: 'long' }, + input_bytes: { type: 'long' }, + input_record_count: { type: 'long' }, + last_data_time: { type: 'long' }, + processed_record_count: { type: 'long' }, + }, + model_size_stats: { + bucket_allocation_failures_count: { type: 'long' }, + model_bytes: { type: 'long' }, + model_bytes_exceeded: { type: 'long' }, + model_bytes_memory_limit: { type: 'long' }, + peak_model_bytes: { type: 'long' }, + }, + timing_stats: { + average_bucket_processing_time_ms: { type: 'long' }, + bucket_count: { type: 'long' }, + exponential_average_bucket_processing_time_ms: { type: 'long' }, + exponential_average_bucket_processing_time_per_hour_ms: { type: 'long' }, + maximum_bucket_processing_time_ms: { type: 'long' }, + minimum_bucket_processing_time_ms: { type: 'long' }, + total_bucket_processing_time_ms: { type: 'long' }, + }, + datafeed: { + datafeed_id: { type: 'keyword' }, + state: { type: 'keyword' }, + timing_stats: { + average_search_time_per_bucket_ms: { type: 'long' }, + bucket_count: { type: 'long' }, + exponential_average_search_time_per_hour_ms: { type: 'long' }, + search_count: { type: 'long' }, + total_search_time_ms: { type: 'long' }, + }, + }, + }, + }, + }, endpoints: { total_installed: { type: 'long' }, active_within_last_24_hours: { type: 'long' }, @@ -80,19 +133,17 @@ export const registerCollector: RegisterCollector = ({ }, isReady: () => kibanaIndex.length > 0, fetch: async ({ esClient }: CollectorFetchContext): Promise => { - const savedObjectsClient = await getInternalSavedObjectsClient(core); - const [detections, endpoints] = await Promise.allSettled([ - fetchDetectionsUsage( - kibanaIndex, - esClient, - ml, - (savedObjectsClient as unknown) as SavedObjectsClientContract - ), - getEndpointTelemetryFromFleet(savedObjectsClient), + const internalSavedObjectsClient = await getInternalSavedObjectsClient(core); + const savedObjectsClient = (internalSavedObjectsClient as unknown) as SavedObjectsClientContract; + const [detections, detectionMetrics, endpoints] = await Promise.allSettled([ + fetchDetectionsUsage(kibanaIndex, esClient, ml, savedObjectsClient), + fetchDetectionsMetrics(ml, savedObjectsClient), + getEndpointTelemetryFromFleet(internalSavedObjectsClient), ]); return { detections: detections.status === 'fulfilled' ? detections.value : defaultDetectionsUsage, + detectionMetrics: detectionMetrics.status === 'fulfilled' ? detectionMetrics.value : {}, endpoints: endpoints.status === 'fulfilled' ? endpoints.value : {}, }; }, diff --git a/x-pack/plugins/security_solution/server/usage/detections/detections.mocks.ts b/x-pack/plugins/security_solution/server/usage/detections/detections.mocks.ts index 5601250ac1ecd..f7fa59958abae 100644 --- a/x-pack/plugins/security_solution/server/usage/detections/detections.mocks.ts +++ b/x-pack/plugins/security_solution/server/usage/detections/detections.mocks.ts @@ -175,3 +175,130 @@ export const getMockRulesResponse = () => ({ ], }, }); + +export const getMockMlJobDetailsResponse = () => ({ + count: 20, + jobs: [ + { + job_id: 'high_distinct_count_error_message', + job_type: 'anomaly_detector', + job_version: '8.0.0', + create_time: 1603838214983, + finished_time: 1611739871669, + model_snapshot_id: '1611740107', + custom_settings: { + created_by: undefined, + }, + groups: ['cloudtrail', 'security'], + description: + 'Security: Cloudtrail - Looks for a spike in the rate of an error message which may simply indicate an impending service failure but these can also be byproducts of attempted or successful persistence, privilege escalation, defense evasion, discovery, lateral movement, or collection activity by a threat actor.', + analysis_config: { + bucket_span: '15m', + detectors: [ + { + detector_description: 'high_distinct_count("aws.cloudtrail.error_message")', + function: 'high_distinct_count', + field_name: 'aws.cloudtrail.error_message', + detector_index: 0, + }, + ], + influencers: ['aws.cloudtrail.user_identity.arn', 'source.ip', 'source.geo.city_name'], + }, + analysis_limits: { + model_memory_limit: '16mb', + categorization_examples_limit: 4, + }, + data_description: { + time_field: '@timestamp', + time_format: 'epoch_ms', + }, + model_snapshot_retention_days: 10, + daily_model_snapshot_retention_after_days: 1, + results_index_name: 'custom-high_distinct_count_error_message', + }, + ], +}); + +export const getMockMlJobStatsResponse = () => ({ + count: 1, + jobs: [ + { + job_id: 'high_distinct_count_error_message', + data_counts: { + job_id: 'high_distinct_count_error_message', + processed_record_count: 162, + processed_field_count: 476, + input_bytes: 45957, + input_field_count: 476, + invalid_date_count: 0, + missing_field_count: 172, + out_of_order_timestamp_count: 0, + empty_bucket_count: 8590, + sparse_bucket_count: 0, + bucket_count: 8612, + earliest_record_timestamp: 1602648289000, + latest_record_timestamp: 1610399348000, + last_data_time: 1610470367123, + latest_empty_bucket_timestamp: 1610397900000, + input_record_count: 162, + log_time: 1610470367123, + }, + model_size_stats: { + job_id: 'high_distinct_count_error_message', + result_type: 'model_size_stats', + model_bytes: 72574, + peak_model_bytes: 78682, + model_bytes_exceeded: 0, + model_bytes_memory_limit: 16777216, + total_by_field_count: 4, + total_over_field_count: 0, + total_partition_field_count: 3, + bucket_allocation_failures_count: 0, + memory_status: 'ok', + assignment_memory_basis: 'current_model_bytes', + categorized_doc_count: 0, + total_category_count: 0, + frequent_category_count: 0, + rare_category_count: 0, + dead_category_count: 0, + failed_category_count: 0, + categorization_status: 'ok', + log_time: 1611740107843, + timestamp: 1611738900000, + }, + forecasts_stats: { + total: 0, + forecasted_jobs: 0, + }, + state: 'closed', + timing_stats: { + job_id: 'high_distinct_count_error_message', + bucket_count: 16236, + total_bucket_processing_time_ms: 7957.00000000008, + minimum_bucket_processing_time_ms: 0, + maximum_bucket_processing_time_ms: 392, + average_bucket_processing_time_ms: 0.4900837644740133, + exponential_average_bucket_processing_time_ms: 0.23614068552903306, + exponential_average_bucket_processing_time_per_hour_ms: 1.5551298175461634, + }, + }, + ], +}); + +export const getMockMlDatafeedStatsResponse = () => ({ + count: 1, + datafeeds: [ + { + datafeed_id: 'datafeed-high_distinct_count_error_message', + state: 'stopped', + timing_stats: { + job_id: 'high_distinct_count_error_message', + search_count: 7202, + bucket_count: 8612, + total_search_time_ms: 3107147, + average_search_time_per_bucket_ms: 360.7927310729215, + exponential_average_search_time_per_hour_ms: 86145.39799630083, + }, + }, + ], +}); diff --git a/x-pack/plugins/security_solution/server/usage/detections/detections.test.ts b/x-pack/plugins/security_solution/server/usage/detections/detections.test.ts index 1804d7c756e53..b53f90f40f621 100644 --- a/x-pack/plugins/security_solution/server/usage/detections/detections.test.ts +++ b/x-pack/plugins/security_solution/server/usage/detections/detections.test.ts @@ -12,15 +12,18 @@ import { getMockJobSummaryResponse, getMockListModulesResponse, getMockRulesResponse, + getMockMlJobDetailsResponse, + getMockMlJobStatsResponse, + getMockMlDatafeedStatsResponse, } from './detections.mocks'; -import { fetchDetectionsUsage } from './index'; +import { fetchDetectionsUsage, fetchDetectionsMetrics } from './index'; -describe('Detections Usage', () => { - describe('fetchDetectionsUsage()', () => { - let esClientMock: jest.Mocked; - let savedObjectsClientMock: jest.Mocked; - let mlMock: ReturnType; +describe('Detections Usage and Metrics', () => { + let esClientMock: jest.Mocked; + let savedObjectsClientMock: jest.Mocked; + let mlMock: ReturnType; + describe('fetchDetectionsUsage()', () => { beforeEach(() => { esClientMock = elasticsearchServiceMock.createClusterClient().asInternalUser; mlMock = mlServicesMock.create(); @@ -102,4 +105,89 @@ describe('Detections Usage', () => { ); }); }); + + describe('fetchDetectionsMetrics()', () => { + beforeEach(() => { + mlMock = mlServicesMock.create(); + }); + + it('returns an empty array if there is no data', async () => { + mlMock.anomalyDetectorsProvider.mockReturnValue(({ + jobs: null, + jobStats: null, + } as unknown) as ReturnType); + const result = await fetchDetectionsMetrics(mlMock, savedObjectsClientMock); + + expect(result).toEqual( + expect.objectContaining({ + ml_jobs: [], + }) + ); + }); + + it('returns an ml job telemetry object from anomaly detectors provider', async () => { + const mockJobsResponse = jest.fn().mockResolvedValue(getMockMlJobDetailsResponse()); + const mockJobStatsResponse = jest.fn().mockResolvedValue(getMockMlJobStatsResponse()); + const mockDatafeedStatsResponse = jest + .fn() + .mockResolvedValue(getMockMlDatafeedStatsResponse()); + + mlMock.anomalyDetectorsProvider.mockReturnValue(({ + jobs: mockJobsResponse, + jobStats: mockJobStatsResponse, + datafeedStats: mockDatafeedStatsResponse, + } as unknown) as ReturnType); + + const result = await fetchDetectionsMetrics(mlMock, savedObjectsClientMock); + + expect(result).toEqual( + expect.objectContaining({ + ml_jobs: [ + { + job_id: 'high_distinct_count_error_message', + create_time: 1603838214983, + finished_time: 1611739871669, + state: 'closed', + data_counts: { + bucket_count: 8612, + empty_bucket_count: 8590, + input_bytes: 45957, + input_record_count: 162, + last_data_time: 1610470367123, + processed_record_count: 162, + }, + model_size_stats: { + bucket_allocation_failures_count: 0, + memory_status: 'ok', + model_bytes: 72574, + model_bytes_exceeded: 0, + model_bytes_memory_limit: 16777216, + peak_model_bytes: 78682, + }, + timing_stats: { + average_bucket_processing_time_ms: 0.4900837644740133, + bucket_count: 16236, + exponential_average_bucket_processing_time_ms: 0.23614068552903306, + exponential_average_bucket_processing_time_per_hour_ms: 1.5551298175461634, + maximum_bucket_processing_time_ms: 392, + minimum_bucket_processing_time_ms: 0, + total_bucket_processing_time_ms: 7957.00000000008, + }, + datafeed: { + datafeed_id: 'datafeed-high_distinct_count_error_message', + state: 'stopped', + timing_stats: { + average_search_time_per_bucket_ms: 360.7927310729215, + bucket_count: 8612, + exponential_average_search_time_per_hour_ms: 86145.39799630083, + search_count: 7202, + total_search_time_ms: 3107147, + }, + }, + }, + ], + }) + ); + }); + }); }); diff --git a/x-pack/plugins/security_solution/server/usage/detections/detections_helpers.ts b/x-pack/plugins/security_solution/server/usage/detections/detections_helpers.ts index 9ffd3e0911779..4236c782d6c68 100644 --- a/x-pack/plugins/security_solution/server/usage/detections/detections_helpers.ts +++ b/x-pack/plugins/security_solution/server/usage/detections/detections_helpers.ts @@ -13,7 +13,7 @@ import { } from '../../../../../../src/core/server'; import { MlPluginSetup } from '../../../../ml/server'; import { SIGNALS_ID, INTERNAL_IMMUTABLE_KEY } from '../../../common/constants'; -import { DetectionRulesUsage, MlJobsUsage } from './index'; +import { DetectionRulesUsage, MlJobsUsage, MlJobMetric } from './index'; import { isJobStarted } from '../../../common/machine_learning/helpers'; import { isSecurityJob } from '../../../common/machine_learning/is_security_job'; @@ -213,3 +213,93 @@ export const getMlJobsUsage = async ( return jobsUsage; }; + +export const getMlJobMetrics = async ( + ml: MlPluginSetup | undefined, + savedObjectClient: SavedObjectsClientContract +): Promise => { + if (ml) { + try { + const fakeRequest = { headers: {} } as KibanaRequest; + const jobsType = 'security'; + const securityJobStats = await ml + .anomalyDetectorsProvider(fakeRequest, savedObjectClient) + .jobStats(jobsType); + + const jobDetails = await ml + .anomalyDetectorsProvider(fakeRequest, savedObjectClient) + .jobs(jobsType); + + const jobDetailsCache = new Map(); + jobDetails.jobs.forEach((detail) => jobDetailsCache.set(detail.job_id, detail)); + + const datafeedStats = await ml + .anomalyDetectorsProvider(fakeRequest, savedObjectClient) + .datafeedStats(); + + const datafeedStatsCache = new Map(); + datafeedStats.datafeeds.forEach((datafeedStat) => + datafeedStatsCache.set(`${datafeedStat.datafeed_id}`, datafeedStat) + ); + + return securityJobStats.jobs.map((stat) => { + const jobId = stat.job_id; + const jobDetail = jobDetailsCache.get(stat.job_id); + const datafeed = datafeedStatsCache.get(`datafeed-${jobId}`); + + return { + job_id: jobId, + open_time: stat.open_time, + create_time: jobDetail?.create_time, + finished_time: jobDetail?.finished_time, + state: stat.state, + data_counts: { + bucket_count: stat.data_counts.bucket_count, + empty_bucket_count: stat.data_counts.empty_bucket_count, + input_bytes: stat.data_counts.input_bytes, + input_record_count: stat.data_counts.input_record_count, + last_data_time: stat.data_counts.last_data_time, + processed_record_count: stat.data_counts.processed_record_count, + }, + model_size_stats: { + bucket_allocation_failures_count: + stat.model_size_stats.bucket_allocation_failures_count, + memory_status: stat.model_size_stats.memory_status, + model_bytes: stat.model_size_stats.model_bytes, + model_bytes_exceeded: stat.model_size_stats.model_bytes_exceeded, + model_bytes_memory_limit: stat.model_size_stats.model_bytes_memory_limit, + peak_model_bytes: stat.model_size_stats.peak_model_bytes, + }, + timing_stats: { + average_bucket_processing_time_ms: stat.timing_stats.average_bucket_processing_time_ms, + bucket_count: stat.timing_stats.bucket_count, + exponential_average_bucket_processing_time_ms: + stat.timing_stats.exponential_average_bucket_processing_time_ms, + exponential_average_bucket_processing_time_per_hour_ms: + stat.timing_stats.exponential_average_bucket_processing_time_per_hour_ms, + maximum_bucket_processing_time_ms: stat.timing_stats.maximum_bucket_processing_time_ms, + minimum_bucket_processing_time_ms: stat.timing_stats.minimum_bucket_processing_time_ms, + total_bucket_processing_time_ms: stat.timing_stats.total_bucket_processing_time_ms, + }, + datafeed: { + datafeed_id: datafeed?.datafeed_id, + state: datafeed?.state, + timing_stats: { + average_search_time_per_bucket_ms: + datafeed?.timing_stats.average_search_time_per_bucket_ms, + bucket_count: datafeed?.timing_stats.bucket_count, + exponential_average_search_time_per_hour_ms: + datafeed?.timing_stats.exponential_average_search_time_per_hour_ms, + search_count: datafeed?.timing_stats.search_count, + total_search_time_ms: datafeed?.timing_stats.total_search_time_ms, + }, + }, + } as MlJobMetric; + }); + } catch (e) { + // ignore failure, usage will be zeroed + } + } + + return []; +}; diff --git a/x-pack/plugins/security_solution/server/usage/detections/index.ts b/x-pack/plugins/security_solution/server/usage/detections/index.ts index 27f0b1acb2ee9..39c8f3159fe03 100644 --- a/x-pack/plugins/security_solution/server/usage/detections/index.ts +++ b/x-pack/plugins/security_solution/server/usage/detections/index.ts @@ -8,6 +8,7 @@ import { ElasticsearchClient, SavedObjectsClientContract } from '../../../../../../src/core/server'; import { getMlJobsUsage, + getMlJobMetrics, getRulesUsage, initialRulesUsage, initialMlJobsUsage, @@ -34,6 +35,47 @@ export interface DetectionsUsage { ml_jobs: MlJobsUsage; } +export interface DetectionMetrics { + ml_jobs: MlJobMetric[]; +} + +export interface MlJobDataCount { + bucket_count: number; + empty_bucket_count: number; + input_bytes: number; + input_record_count: number; + last_data_time: number; + processed_record_count: number; +} + +export interface MlJobModelSize { + bucket_allocation_failures_count: number; + memory_status: string; + model_bytes: number; + model_bytes_exceeded: number; + model_bytes_memory_limit: number; + peak_model_bytes: number; +} + +export interface MlTimingStats { + average_bucket_processing_time_ms: number; + bucket_count: number; + exponential_average_bucket_processing_time_ms: number; + exponential_average_bucket_processing_time_per_hour_ms: number; + maximum_bucket_processing_time_ms: number; + minimum_bucket_processing_time_ms: number; + total_bucket_processing_time_ms: number; +} + +export interface MlJobMetric { + job_id: string; + open_time: string; + state: string; + data_counts: MlJobDataCount; + model_size_stats: MlJobModelSize; + timing_stats: MlTimingStats; +} + export const defaultDetectionsUsage = { detection_rules: initialRulesUsage, ml_jobs: initialMlJobsUsage, @@ -55,3 +97,14 @@ export const fetchDetectionsUsage = async ( ml_jobs: mlJobsUsage.status === 'fulfilled' ? mlJobsUsage.value : initialMlJobsUsage, }; }; + +export const fetchDetectionsMetrics = async ( + ml: MlPluginSetup | undefined, + savedObjectClient: SavedObjectsClientContract +): Promise => { + const [mlJobMetrics] = await Promise.allSettled([getMlJobMetrics(ml, savedObjectClient)]); + + return { + ml_jobs: mlJobMetrics.status === 'fulfilled' ? mlJobMetrics.value : [], + }; +}; diff --git a/x-pack/plugins/stack_alerts/common/config.ts b/x-pack/plugins/stack_alerts/common/config.ts index 1bd7b2728a95c..ebc12ee563350 100644 --- a/x-pack/plugins/stack_alerts/common/config.ts +++ b/x-pack/plugins/stack_alerts/common/config.ts @@ -9,7 +9,6 @@ import { schema, TypeOf } from '@kbn/config-schema'; export const configSchema = schema.object({ enabled: schema.boolean({ defaultValue: true }), - enableGeoAlerting: schema.boolean({ defaultValue: false }), }); export type Config = TypeOf; diff --git a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/readme.md b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/readme.md new file mode 100644 index 0000000000000..b48a28fbdf99b --- /dev/null +++ b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/readme.md @@ -0,0 +1,121 @@ +## Instructions for loading & observing data + +There are several steps required to set up geo containment alerts for testing in a way +that allows you to view triggered alerts as they happen. These instructions outline +how to load test data, but really these steps can be used to load any data for geo +containment alerts so long as you have the following data: +- An index containing a`geo_point` field and a `date` field. This data is presumed to +be dynamic (updated). +- An index containing `geo_shape` data, such as boundary data, bounding box data, etc. +This data is presumed to be static (not updated). Shape data matching the query is +harvested once when the alert is created and anytime after when alert is re-enabled +after disablement +The ability for containment alerts to monitor data requires there be somewhat "real time" +data streaming in as indicated by the `date` field. + +### 1. Set experimental flag to enable containment alerts +- Your `kibana.yml` config file is located in the `config/` dir in the base of your kibana +project. To edit it, open this file in your editor of choice, add the line described in +the next step to the bottom of the file (or really anywhere) and save. For more details +on different config modifications or on how to make production config modifications, +see [the current docs](https://www.elastic.co/guide/en/kibana/current/settings.html) + +### 2. Run ES/Kibana dev env with ssl enabled +- In two terminals, run the normal commands to launch both elasticsearch and kibana but +append `--ssl` to the end of each as an arg, i.e.: + - `yarn es snapshot --ssl # Runs Elasticsearch` + - `yarn start --ssl # Runs Kibana` + +### 3. Get an MTA data api key +- You'll need to obtain an NYC MTA api key, you can request this + key [here](https://docs.google.com/forms/d/e/1FAIpQLSfGUZA6h4eHd2-ImaK5Q_I5Gb7C3UEP5vYDALyGd7r3h08YKg/viewform?hl=en&formkey=dG9kcGIxRFpSS0NhQWM4UjA0V0VkNGc6MQ#gid=0) + +### 4. Get trackable point data (MTA bus data) into elasticsearch +- You'll be using the script: `https://github.com/thomasneirynck/mtatracks` to harvest +live bus data to populate the system. Clone the repo and follow the instructions in +the readme to set up. +- Using the MTA key you obtained in the previous step, the final command to run +in a local terminal should look something like the following. This script loads large +quantities of data the frequency listed below (20000ms = 20s) or higher: +`node ./load_tracks.js -a -f 20000` + +### 5. Open required Kibana tabs +There are 3 separate tabs you'll need for a combination of loading and viewing the +data. Since you'll be jumping between them, it might be easiest to just open them +upfront. Each is preceded by `https://localhost:5601//app/`: +- Stack Management > Index Patterns: `management/kibana/indexPatterns` +- Stack Management > Alerts & Actions: `management/insightsAndAlerting/triggersActions/alerts` +- Maps: `maps` + +### 6 Create map to monitor alerts +- Go to the Maps app and create a new map +- Using GeoJSON Upload, upload the GeoJSON file located in the folder of the previously +cloned `mta_tracks` repo: `nyc-neighborhoods.geo.json`. Accept all of the default +settings and add the layer. +- You may want to click your newly added layer and select "Fit to data" so you can see the +boundaries you've added. +_ When finished uploading and adding the layer, save the map using a name of your +choice. +- Keep the Maps tab open, you'll come back to this + +### 7. Create index pattern for generated tracks +- Go to the index pattern tab to create a new index pattern. +- Give it the index name `mtatracks*` +- For `Time field` select `@timestamp` +- Click `Create index pattern` +- Leave this tab open, you'll come back to this + +### 8. Create containment alert +- Go to the Alerts tab and click `Create Alert` > `Tracking containment` +- Fill the side bar form top to bottom. This _should_ flow somewhat logically. In the top +section, set both `Check every` and `Notify every` to `1 minute`. + For `Notify`, leave +on default selected option `Only on status change`, this will notify only on newly +contained entities. + **Please note that `2 seconds` is an unusually quick interval but done here for demo + purposes. With real world data, setting an appropriate interval speed is highly dependent + upon the quantity, update frequency and complexity of data handled.** +- The default settings for `Select Entity` will mostly be correct. Select `mta_tracks*` +as the index you'd like to track. Use the defaults populated under +`Select entity` > `INDEX`, update `Select entity` > `BY` to `vehicle_ref`. +- For `Select boundary` > `INDEX`, select `nyc-neighborhoods` and all populated defaults. +- Under `Actions`, create an `Server log` action, then create a `Connector` which you can simply name +`Log test`. +- For `Run when`, the default `Tracking containment met` will work here. This will track +only points that are newly contained in the boundaries. +- Leave the log level at `Info` +- For the message, use the following sample message or one of your own: +``` +Entity: {{context.entityId}} with document ID: {{context.entityDocumentId}} has been recorded at location: {{context.entityLocation}} in boundary: {{context.containingBoundaryName}}({{context.containingBoundaryId}}) at {{context.entityDateTime}}. This was detected by the alerting framework at: {{context.detectionDateTime}}. +``` +- At the bottom right, click `Save`. Your alert should now be created! +- You should now be able to see alerts generated in your Kibana console log. + +### 9. Visually confirm your alerts with Maps +- Creating layers + - Using the source data below, you can create the following layers: + - Boundary data (`nyc-neighborhoods`) + - Boundary layer + - Original tracks data (`mtatracks*`) + - Last known location + - Geo-line track + - Boundary layer + - This layer should already be added from when you uploaded the GeoJSON + file earlier. If it's not already added, it can be added by selecting `Documents` + > `Index patterns` > `nyc-neighborhoods` then accept the defaults and add the layer. + - Vehicle tracks + - Add `Tracks` > `Index patterns` > `mtatracks*`, accept the defaults selected and set `Entity` > `entity_id`. Add the layer and style appropriately. + - Last known location + - Add `Documents` > `Index patterns` > `mtatracks*` and select `Show top hits per entity` + - For `Entity` select `entity_id` and add the layer. + - The only required setting on the following screen is to set `Sorting` to sort on `@timestamp` +- Update time scope of data + - Changing the refresh rate `Refresh every`: `4 seconds` keeps the layers updated and in particular + shows the latest values obtained in the `Top hits` layer + - The time picker should already be set to the default `15 minutes`, this is a good default but + can be adjusted up or down to see more or less data respectively +- General tips + - Style layers with contrasting colors to clearly see each + - Consider using icons for the `Top hits` vehicle movement layer + - Consider adding tooltips to layers to better understand the data in your layers. + - Save your Map anytime you've made any layer adjustments diff --git a/x-pack/plugins/stack_alerts/public/alert_types/index.ts b/x-pack/plugins/stack_alerts/public/alert_types/index.ts index 55819785d628b..d6f9f97939b79 100644 --- a/x-pack/plugins/stack_alerts/public/alert_types/index.ts +++ b/x-pack/plugins/stack_alerts/public/alert_types/index.ts @@ -18,9 +18,7 @@ export function registerAlertTypes({ alertTypeRegistry: TriggersAndActionsUIPublicPluginSetup['alertTypeRegistry']; config: Config; }) { - if (config.enableGeoAlerting) { - alertTypeRegistry.register(getGeoContainmentAlertType()); - } + alertTypeRegistry.register(getGeoContainmentAlertType()); alertTypeRegistry.register(getThresholdAlertType()); alertTypeRegistry.register(getEsQueryAlertType()); } diff --git a/x-pack/plugins/stack_alerts/server/index.ts b/x-pack/plugins/stack_alerts/server/index.ts index 4834749ab5917..bd10a486fa531 100644 --- a/x-pack/plugins/stack_alerts/server/index.ts +++ b/x-pack/plugins/stack_alerts/server/index.ts @@ -11,16 +11,8 @@ import { configSchema, Config } from '../common/config'; export { ID as INDEX_THRESHOLD_ID } from './alert_types/index_threshold/alert_type'; export const config: PluginConfigDescriptor = { - exposeToBrowser: { - enableGeoAlerting: true, - }, + exposeToBrowser: {}, schema: configSchema, - deprecations: ({ renameFromRoot }) => [ - renameFromRoot( - 'xpack.triggers_actions_ui.enableGeoTrackingThresholdAlert', - 'xpack.stack_alerts.enableGeoAlerting' - ), - ], }; export const plugin = (ctx: PluginInitializerContext) => new AlertingBuiltinsPlugin(ctx); diff --git a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json index c1674f8a92669..9e6a0c06808bc 100644 --- a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json +++ b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json @@ -3244,6 +3244,127 @@ } } }, + "detectionMetrics": { + "properties": { + "ml_jobs": { + "type": "array", + "items": { + "properties": { + "job_id": { + "type": "keyword" + }, + "open_time": { + "type": "keyword" + }, + "create_time": { + "type": "keyword" + }, + "finished_time": { + "type": "keyword" + }, + "state": { + "type": "keyword" + }, + "data_counts": { + "properties": { + "bucket_count": { + "type": "long" + }, + "empty_bucket_count": { + "type": "long" + }, + "input_bytes": { + "type": "long" + }, + "input_record_count": { + "type": "long" + }, + "last_data_time": { + "type": "long" + }, + "processed_record_count": { + "type": "long" + } + } + }, + "model_size_stats": { + "properties": { + "bucket_allocation_failures_count": { + "type": "long" + }, + "model_bytes": { + "type": "long" + }, + "model_bytes_exceeded": { + "type": "long" + }, + "model_bytes_memory_limit": { + "type": "long" + }, + "peak_model_bytes": { + "type": "long" + } + } + }, + "timing_stats": { + "properties": { + "average_bucket_processing_time_ms": { + "type": "long" + }, + "bucket_count": { + "type": "long" + }, + "exponential_average_bucket_processing_time_ms": { + "type": "long" + }, + "exponential_average_bucket_processing_time_per_hour_ms": { + "type": "long" + }, + "maximum_bucket_processing_time_ms": { + "type": "long" + }, + "minimum_bucket_processing_time_ms": { + "type": "long" + }, + "total_bucket_processing_time_ms": { + "type": "long" + } + } + }, + "datafeed": { + "properties": { + "datafeed_id": { + "type": "keyword" + }, + "state": { + "type": "keyword" + }, + "timing_stats": { + "properties": { + "average_search_time_per_bucket_ms": { + "type": "long" + }, + "bucket_count": { + "type": "long" + }, + "exponential_average_search_time_per_hour_ms": { + "type": "long" + }, + "search_count": { + "type": "long" + }, + "total_search_time_ms": { + "type": "long" + } + } + } + } + } + } + } + } + } + }, "endpoints": { "properties": { "total_installed": { diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 4f1349e4ba1d6..168eb14966493 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -3367,14 +3367,14 @@ "tileMap.geohashLayer.mapTitle": "{mapType} マップタイプが認識されません", "tileMap.tooltipFormatter.latitudeLabel": "緯度", "tileMap.tooltipFormatter.longitudeLabel": "経度", - "tileMap.vis.editorConfig.legendPositions.bottomLeftText": "左下", - "tileMap.vis.editorConfig.legendPositions.bottomRightText": "右下", - "tileMap.vis.editorConfig.legendPositions.topLeftText": "左上", - "tileMap.vis.editorConfig.legendPositions.topRightText": "右上", - "tileMap.vis.editorConfig.mapTypes.heatmapText": "ヒートマップ", - "tileMap.vis.editorConfig.mapTypes.scaledCircleMarkersText": "スケーリングされた円マーカー", - "tileMap.vis.editorConfig.mapTypes.shadedCircleMarkersText": "影付き円マーカー", - "tileMap.vis.editorConfig.mapTypes.shadedGeohashGridText": "影付きジオハッシュグリッド", + "tileMap.legendPositions.bottomLeftText": "左下", + "tileMap.legendPositions.bottomRightText": "右下", + "tileMap.legendPositions.topLeftText": "左上", + "tileMap.legendPositions.topRightText": "右上", + "tileMap.mapTypes.heatmapText": "ヒートマップ", + "tileMap.mapTypes.scaledCircleMarkersText": "スケーリングされた円マーカー", + "tileMap.mapTypes.shadedCircleMarkersText": "影付き円マーカー", + "tileMap.mapTypes.shadedGeohashGridText": "影付きジオハッシュグリッド", "tileMap.vis.map.editorConfig.schemas.geoCoordinatesTitle": "座標", "tileMap.vis.map.editorConfig.schemas.metricTitle": "値", "tileMap.vis.mapDescription": "マップ上に緯度と経度の座標を表示します。", @@ -3967,12 +3967,12 @@ "visTypeTagCloud.function.metric.help": "メトリックディメンションの構成です。", "visTypeTagCloud.function.orientation.help": "タグクラウド内の単語の方向です。", "visTypeTagCloud.function.scale.help": "単語のフォントサイズを決定するスケールです", - "visTypeTagCloud.vis.editorConfig.orientations.multipleText": "複数", - "visTypeTagCloud.vis.editorConfig.orientations.rightAngledText": "直角", - "visTypeTagCloud.vis.editorConfig.orientations.singleText": "単一", - "visTypeTagCloud.vis.editorConfig.scales.linearText": "線形", - "visTypeTagCloud.vis.editorConfig.scales.logText": "ログ", - "visTypeTagCloud.vis.editorConfig.scales.squareRootText": "平方根", + "visTypeTagCloud.orientations.multipleText": "複数", + "visTypeTagCloud.orientations.rightAngledText": "直角", + "visTypeTagCloud.orientations.singleText": "単一", + "visTypeTagCloud.scales.linearText": "線形", + "visTypeTagCloud.scales.logText": "ログ", + "visTypeTagCloud.scales.squareRootText": "平方根", "visTypeTagCloud.vis.schemas.metricTitle": "タグサイズ", "visTypeTagCloud.vis.schemas.segmentTitle": "タグ", "visTypeTagCloud.vis.tagCloudDescription": "単語の頻度とフォントサイズを表示します。", @@ -5104,7 +5104,6 @@ "xpack.apm.localFilters.titles.serviceName": "サービス名", "xpack.apm.localFilters.titles.serviceVersion": "サービスバージョン", "xpack.apm.localFilters.titles.transactionResult": "トランザクション結果", - "xpack.apm.localFilters.titles.transactionType": "トランザクションタイプ", "xpack.apm.localFilters.titles.transactionUrl": "Url", "xpack.apm.localFiltersTitle": "フィルター", "xpack.apm.metadataTable.section.agentLabel": "エージェント", @@ -11184,8 +11183,6 @@ "xpack.lens.dimensionContainer.close": "閉じる", "xpack.lens.dimensionContainer.closeConfiguration": "構成を閉じる", "xpack.lens.discover.visualizeFieldLegend": "Visualize フィールド", - "xpack.lens.dragDrop.elementLifted": "位置 {position} のアイテム {itemLabel} を持ち上げました。", - "xpack.lens.dragDrop.elementMoved": "位置 {prevPosition} から位置 {position} までアイテム {itemLabel} を移動しました", "xpack.lens.editLayerSettings": "レイヤー設定を編集", "xpack.lens.editLayerSettingsChartType": "レイヤー設定を編集、{chartType}", "xpack.lens.editorFrame.buildExpressionError": "グラフの準備中に予期しないエラーが発生しました", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 67b0dc91c3ca5..129deb575a52f 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -3371,14 +3371,14 @@ "tileMap.geohashLayer.mapTitle": "{mapType} 地图类型无法识别", "tileMap.tooltipFormatter.latitudeLabel": "纬度", "tileMap.tooltipFormatter.longitudeLabel": "经度", - "tileMap.vis.editorConfig.legendPositions.bottomLeftText": "左下方", - "tileMap.vis.editorConfig.legendPositions.bottomRightText": "右下方", - "tileMap.vis.editorConfig.legendPositions.topLeftText": "左上方", - "tileMap.vis.editorConfig.legendPositions.topRightText": "右上方", - "tileMap.vis.editorConfig.mapTypes.heatmapText": "热图", - "tileMap.vis.editorConfig.mapTypes.scaledCircleMarkersText": "缩放式圆形标记", - "tileMap.vis.editorConfig.mapTypes.shadedCircleMarkersText": "带阴影圆形标记", - "tileMap.vis.editorConfig.mapTypes.shadedGeohashGridText": "带阴影 geohash 网格", + "tileMap.legendPositions.bottomLeftText": "左下方", + "tileMap.legendPositions.bottomRightText": "右下方", + "tileMap.legendPositions.topLeftText": "左上方", + "tileMap.legendPositions.topRightText": "右上方", + "tileMap.mapTypes.heatmapText": "热图", + "tileMap.mapTypes.scaledCircleMarkersText": "缩放式圆形标记", + "tileMap.mapTypes.shadedCircleMarkersText": "带阴影圆形标记", + "tileMap.mapTypes.shadedGeohashGridText": "带阴影 geohash 网格", "tileMap.vis.map.editorConfig.schemas.geoCoordinatesTitle": "地理坐标", "tileMap.vis.map.editorConfig.schemas.metricTitle": "值", "tileMap.vis.mapDescription": "在地图上绘制纬度和经度坐标", @@ -3971,12 +3971,12 @@ "visTypeTagCloud.function.metric.help": "指标维度配置", "visTypeTagCloud.function.orientation.help": "标签云图内的字方向", "visTypeTagCloud.function.scale.help": "缩放以确定字体大小", - "visTypeTagCloud.vis.editorConfig.orientations.multipleText": "多个", - "visTypeTagCloud.vis.editorConfig.orientations.rightAngledText": "直角", - "visTypeTagCloud.vis.editorConfig.orientations.singleText": "单个", - "visTypeTagCloud.vis.editorConfig.scales.linearText": "线性", - "visTypeTagCloud.vis.editorConfig.scales.logText": "对数", - "visTypeTagCloud.vis.editorConfig.scales.squareRootText": "平方根", + "visTypeTagCloud.orientations.multipleText": "多个", + "visTypeTagCloud.orientations.rightAngledText": "直角", + "visTypeTagCloud.orientations.singleText": "单个", + "visTypeTagCloud.scales.linearText": "线性", + "visTypeTagCloud.scales.logText": "对数", + "visTypeTagCloud.scales.squareRootText": "平方根", "visTypeTagCloud.vis.schemas.metricTitle": "标签大小", "visTypeTagCloud.vis.schemas.segmentTitle": "标签", "visTypeTagCloud.vis.tagCloudDescription": "使用字体大小显示词频。", @@ -5112,7 +5112,6 @@ "xpack.apm.localFilters.titles.serviceName": "服务名称", "xpack.apm.localFilters.titles.serviceVersion": "服务版本", "xpack.apm.localFilters.titles.transactionResult": "事务结果", - "xpack.apm.localFilters.titles.transactionType": "事务类型", "xpack.apm.localFilters.titles.transactionUrl": "URL", "xpack.apm.localFiltersTitle": "筛选", "xpack.apm.metadataTable.section.agentLabel": "代理", @@ -11213,8 +11212,6 @@ "xpack.lens.dimensionContainer.close": "关闭", "xpack.lens.dimensionContainer.closeConfiguration": "关闭配置", "xpack.lens.discover.visualizeFieldLegend": "可视化字段", - "xpack.lens.dragDrop.elementLifted": "您已将项目 {itemLabel} 提升到位置 {position}", - "xpack.lens.dragDrop.elementMoved": "您已将项目 {itemLabel} 从位置 {prevPosition} 移到位置 {position}", "xpack.lens.editLayerSettings": "编辑图层设置", "xpack.lens.editLayerSettingsChartType": "编辑图层设置 {chartType}", "xpack.lens.editorFrame.buildExpressionError": "准备图表时发生意外错误", diff --git a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx index 85f3818484a13..0a59cff98ce26 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx @@ -10,6 +10,7 @@ import { Switch, Route, Redirect, Router } from 'react-router-dom'; import { ChromeBreadcrumb, CoreStart, ScopedHistory } from 'kibana/public'; import { render, unmountComponentAtNode } from 'react-dom'; import { I18nProvider } from '@kbn/i18n/react'; +import useObservable from 'react-use/lib/useObservable'; import { KibanaFeature } from '../../../features/common'; import { Section, routeToAlertDetails } from './constants'; import { ActionTypeRegistryContract, AlertTypeRegistryContract } from '../types'; @@ -18,6 +19,7 @@ import { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; import { PluginStartContract as AlertingStart } from '../../../alerts/public'; import { suspendedComponentWithProps } from './lib/suspended_component_with_props'; import { Storage } from '../../../../../src/plugins/kibana_utils/public'; +import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common'; import { setSavedObjectsClient } from '../common/lib/data_apis'; import { KibanaContextProvider } from '../common/lib/kibana'; @@ -41,25 +43,31 @@ export interface TriggersAndActionsUiServices extends CoreStart { } export const renderApp = (deps: TriggersAndActionsUiServices) => { - const { element, savedObjects } = deps; + const { element } = deps; + render(, element); + return () => { + unmountComponentAtNode(element); + }; +}; + +export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => { + const { savedObjects, uiSettings } = deps; const sections: Section[] = ['alerts', 'connectors']; + const isDarkMode = useObservable(uiSettings.get$('theme:darkMode')); const sectionsRegex = sections.join('|'); setSavedObjectsClient(savedObjects.client); - - render( + return ( - - - - - - , - element + + + + + + + + ); - return () => { - unmountComponentAtNode(element); - }; }; export const AppWithoutRouter = ({ sectionsRegex }: { sectionsRegex: string }) => { diff --git a/x-pack/test/accessibility/apps/lens.ts b/x-pack/test/accessibility/apps/lens.ts index 229bc76a229ee..2f5ebe3c1a2dc 100644 --- a/x-pack/test/accessibility/apps/lens.ts +++ b/x-pack/test/accessibility/apps/lens.ts @@ -44,8 +44,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.configureDimension({ dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', - operation: 'date_histogram', - field: 'timestamp', + operation: 'terms', + field: 'DestCityName', }); await PageObjects.lens.configureDimension({ diff --git a/x-pack/test/accessibility/apps/ml.ts b/x-pack/test/accessibility/apps/ml.ts index baa5e9df61768..0dbc7cbb041d7 100644 --- a/x-pack/test/accessibility/apps/ml.ts +++ b/x-pack/test/accessibility/apps/ml.ts @@ -235,7 +235,9 @@ export default function ({ getService }: FtrProviderContext) { await ml.dataFrameAnalyticsResults.assertOutlierTablePanelExists(); await ml.dataFrameAnalyticsResults.assertResultsTableExists(); await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty(); - await a11y.testAppSnapshot(); + // EuiDataGrid does not have row roles + // https://github.com/elastic/eui/issues/4471 + // await a11y.testAppSnapshot(); }); it('data frame analytics create job select index pattern modal', async () => { @@ -251,7 +253,9 @@ export default function ({ getService }: FtrProviderContext) { ); await ml.jobSourceSelection.selectSourceForAnalyticsJob(ihpIndexPattern); await ml.dataFrameAnalyticsCreation.assertConfigurationStepActive(); - await a11y.testAppSnapshot(); + // EuiDataGrid does not have row roles + // https://github.com/elastic/eui/issues/4471 + // await a11y.testAppSnapshot(); }); it('data frame analytics create job configuration step for outlier job', async () => { @@ -264,7 +268,9 @@ export default function ({ getService }: FtrProviderContext) { await ml.dataFrameAnalyticsCreation.enableSourceDataPreviewHistogramCharts(); await ml.testExecution.logTestStep('displays the include fields selection'); await ml.dataFrameAnalyticsCreation.assertIncludeFieldsSelectionExists(); - await a11y.testAppSnapshot(); + // EuiDataGrid does not have row roles + // https://github.com/elastic/eui/issues/4471 + // await a11y.testAppSnapshot(); }); it('data frame analytics create job additional options step for outlier job', async () => { diff --git a/x-pack/test/api_integration/apis/search/session.ts b/x-pack/test/api_integration/apis/search/session.ts index 28b63788a8cfb..984f3e3f7dd4e 100644 --- a/x-pack/test/api_integration/apis/search/session.ts +++ b/x-pack/test/api_integration/apis/search/session.ts @@ -45,11 +45,11 @@ export default function ({ getService }: FtrProviderContext) { await supertest.get(`/internal/session/${sessionId}`).set('kbn-xsrf', 'foo').expect(200); }); - it('should fail to cancel an unknown session', async () => { + it('should fail to delete an unknown session', async () => { await supertest.delete(`/internal/session/123`).set('kbn-xsrf', 'foo').expect(404); }); - it('should create and cancel a session', async () => { + it('should create and delete a session', async () => { const sessionId = `my-session-${Math.random()}`; await supertest .post(`/internal/session`) @@ -65,6 +65,28 @@ export default function ({ getService }: FtrProviderContext) { await supertest.delete(`/internal/session/${sessionId}`).set('kbn-xsrf', 'foo').expect(200); + await supertest.get(`/internal/session/${sessionId}`).set('kbn-xsrf', 'foo').expect(404); + }); + + it('should create and cancel a session', async () => { + const sessionId = `my-session-${Math.random()}`; + await supertest + .post(`/internal/session`) + .set('kbn-xsrf', 'foo') + .send({ + sessionId, + name: 'My Session', + appId: 'discover', + expires: '123', + urlGeneratorId: 'discover', + }) + .expect(200); + + await supertest + .post(`/internal/session/${sessionId}/cancel`) + .set('kbn-xsrf', 'foo') + .expect(200); + const resp = await supertest .get(`/internal/session/${sessionId}`) .set('kbn-xsrf', 'foo') diff --git a/x-pack/test/api_integration/apis/security_solution/timeline_details.ts b/x-pack/test/api_integration/apis/security_solution/timeline_details.ts index c204ec3b28cf0..2705406009062 100644 --- a/x-pack/test/api_integration/apis/security_solution/timeline_details.ts +++ b/x-pack/test/api_integration/apis/security_solution/timeline_details.ts @@ -16,464 +16,373 @@ const INDEX_NAME = 'filebeat-7.0.0-iot-2019.06'; const ID = 'QRhG1WgBqd-n62SwZYDT'; const EXPECTED_DATA = [ { - category: 'file', - field: 'file.path', - values: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], - originalValue: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], - }, - { - category: 'traefik', - field: 'traefik.access.geoip.region_iso_code', - values: ['US-WA'], - originalValue: ['US-WA'], - }, - { - category: 'host', - field: 'host.hostname', - values: ['raspberrypi'], - originalValue: ['raspberrypi'], - }, - { - category: 'traefik', - field: 'traefik.access.geoip.location', - values: ['{"long":-122.3341,"lat":47.6103}'], - originalValue: ['{"coordinates":[-122.3341,47.6103],"type":"Point"}'], + category: 'base', + field: '@timestamp', + values: ['2019-02-10T02:39:44.107Z'], + originalValue: '2019-02-10T02:39:44.107Z', }, { - category: 'suricata', - field: 'suricata.eve.src_port', - values: ['80'], - originalValue: ['80'], + category: '@version', + field: '@version', + values: ['1'], + originalValue: '1', }, { - category: 'traefik', - field: 'traefik.access.geoip.city_name', - values: ['Seattle'], - originalValue: ['Seattle'], + category: 'agent', + field: 'agent.ephemeral_id', + values: ['909cd6a1-527d-41a5-9585-a7fb5386f851'], + originalValue: '909cd6a1-527d-41a5-9585-a7fb5386f851', }, { - category: 'service', - field: 'service.type', - values: ['suricata'], - originalValue: ['suricata'], + category: 'agent', + field: 'agent.hostname', + values: ['raspberrypi'], + originalValue: 'raspberrypi', }, { - category: 'http', - field: 'http.request.method', - values: ['get'], - originalValue: ['get'], + category: 'agent', + field: 'agent.id', + values: ['4d3ea604-27e5-4ec7-ab64-44f82285d776'], + originalValue: '4d3ea604-27e5-4ec7-ab64-44f82285d776', }, { - category: 'host', - field: 'host.os.version', - values: ['9 (stretch)'], - originalValue: ['9 (stretch)'], + category: 'agent', + field: 'agent.type', + values: ['filebeat'], + originalValue: 'filebeat', }, { - category: 'source', - field: 'source.geo.region_name', - values: ['Washington'], - originalValue: ['Washington'], + category: 'agent', + field: 'agent.version', + values: ['7.0.0'], + originalValue: '7.0.0', }, { - category: 'suricata', - field: 'suricata.eve.http.protocol', - values: ['HTTP/1.1'], - originalValue: ['HTTP/1.1'], + category: 'destination', + field: 'destination.domain', + values: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], + originalValue: 's3-iad-2.cf.dash.row.aiv-cdn.net', }, { - category: 'host', - field: 'host.os.name', - values: ['Raspbian GNU/Linux'], - originalValue: ['Raspbian GNU/Linux'], + category: 'destination', + field: 'destination.ip', + values: ['10.100.7.196'], + originalValue: '10.100.7.196', }, { - category: 'source', - field: 'source.ip', - values: ['54.239.219.210'], - originalValue: ['54.239.219.210'], + category: 'destination', + field: 'destination.port', + values: [40684], + originalValue: 40684, }, { - category: 'host', - field: 'host.name', - values: ['raspberrypi'], - originalValue: ['raspberrypi'], + category: 'ecs', + field: 'ecs.version', + values: ['1.0.0-beta2'], + originalValue: '1.0.0-beta2', }, { - category: 'source', - field: 'source.geo.region_iso_code', - values: ['US-WA'], - originalValue: ['US-WA'], + category: 'event', + field: 'event.dataset', + values: ['suricata.eve'], + originalValue: 'suricata.eve', }, { - category: 'http', - field: 'http.response.status_code', - values: ['206'], - originalValue: ['206'], + category: 'event', + field: 'event.end', + values: ['2019-02-10T02:39:44.107Z'], + originalValue: '2019-02-10T02:39:44.107Z', }, { category: 'event', field: 'event.kind', values: ['event'], - originalValue: ['event'], + originalValue: 'event', }, { - category: 'suricata', - field: 'suricata.eve.flow_id', - values: ['196625917175466'], - originalValue: ['196625917175466'], - }, - { - category: 'source', - field: 'source.geo.city_name', - values: ['Seattle'], - originalValue: ['Seattle'], + category: 'event', + field: 'event.module', + values: ['suricata'], + originalValue: 'suricata', }, { - category: 'suricata', - field: 'suricata.eve.proto', - values: ['tcp'], - originalValue: ['tcp'], + category: 'event', + field: 'event.type', + values: ['fileinfo'], + originalValue: 'fileinfo', }, { - category: 'flow', - field: 'flow.locality', - values: ['public'], - originalValue: ['public'], + category: 'file', + field: 'file.path', + values: [ + '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', + ], + originalValue: + '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', }, { - category: 'traefik', - field: 'traefik.access.geoip.country_iso_code', - values: ['US'], - originalValue: ['US'], + category: 'file', + field: 'file.size', + values: [48277], + originalValue: 48277, }, { category: 'fileset', field: 'fileset.name', values: ['eve'], - originalValue: ['eve'], + originalValue: 'eve', }, { - category: 'input', - field: 'input.type', - values: ['log'], - originalValue: ['log'], - }, - { - category: 'log', - field: 'log.offset', - values: ['1856288115'], - originalValue: ['1856288115'], + category: 'flow', + field: 'flow.locality', + values: ['public'], + originalValue: 'public', }, { - category: 'destination', - field: 'destination.domain', - values: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], - originalValue: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], + category: 'host', + field: 'host.architecture', + values: ['armv7l'], + originalValue: 'armv7l', }, { - category: 'agent', - field: 'agent.hostname', + category: 'host', + field: 'host.hostname', values: ['raspberrypi'], - originalValue: ['raspberrypi'], - }, - { - category: 'suricata', - field: 'suricata.eve.http.hostname', - values: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], - originalValue: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], + originalValue: 'raspberrypi', }, { - category: 'suricata', - field: 'suricata.eve.in_iface', - values: ['eth0'], - originalValue: ['eth0'], - }, - { - category: 'base', - field: 'tags', - values: ['suricata'], - originalValue: ['suricata'], + category: 'host', + field: 'host.id', + values: ['b19a781f683541a7a25ee345133aa399'], + originalValue: 'b19a781f683541a7a25ee345133aa399', }, { category: 'host', - field: 'host.architecture', - values: ['armv7l'], - originalValue: ['armv7l'], + field: 'host.name', + values: ['raspberrypi'], + originalValue: 'raspberrypi', }, { - category: 'suricata', - field: 'suricata.eve.http.status', - values: ['206'], - originalValue: ['206'], + category: 'host', + field: 'host.os.codename', + values: ['stretch'], + originalValue: 'stretch', }, { - category: 'suricata', - field: 'suricata.eve.http.url', - values: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], - originalValue: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], + category: 'host', + field: 'host.os.family', + values: [''], + originalValue: '', }, { - category: 'url', - field: 'url.path', - values: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], - originalValue: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], + category: 'host', + field: 'host.os.kernel', + values: ['4.14.50-v7+'], + originalValue: '4.14.50-v7+', }, { - category: 'source', - field: 'source.port', - values: ['80'], - originalValue: ['80'], + category: 'host', + field: 'host.os.name', + values: ['Raspbian GNU/Linux'], + originalValue: 'Raspbian GNU/Linux', }, { - category: 'agent', - field: 'agent.id', - values: ['4d3ea604-27e5-4ec7-ab64-44f82285d776'], - originalValue: ['4d3ea604-27e5-4ec7-ab64-44f82285d776'], + category: 'host', + field: 'host.os.platform', + values: ['raspbian'], + originalValue: 'raspbian', }, { category: 'host', - field: 'host.containerized', - values: ['false'], - originalValue: ['false'], + field: 'host.os.version', + values: ['9 (stretch)'], + originalValue: '9 (stretch)', }, { - category: 'ecs', - field: 'ecs.version', - values: ['1.0.0-beta2'], - originalValue: ['1.0.0-beta2'], + category: 'http', + field: 'http.request.method', + values: ['get'], + originalValue: 'get', }, { - category: 'agent', - field: 'agent.version', - values: ['7.0.0'], - originalValue: ['7.0.0'], + category: 'http', + field: 'http.response.body.bytes', + values: [48277], + originalValue: 48277, }, { - category: 'suricata', - field: 'suricata.eve.fileinfo.stored', - values: ['false'], - originalValue: ['false'], + category: 'http', + field: 'http.response.status_code', + values: [206], + originalValue: 206, }, { - category: 'host', - field: 'host.os.family', - values: [''], - originalValue: [''], + category: 'input', + field: 'input.type', + values: ['log'], + originalValue: 'log', }, { category: 'base', field: 'labels.pipeline', values: ['filebeat-7.0.0-suricata-eve-pipeline'], - originalValue: ['filebeat-7.0.0-suricata-eve-pipeline'], + originalValue: 'filebeat-7.0.0-suricata-eve-pipeline', }, { - category: 'suricata', - field: 'suricata.eve.src_ip', - values: ['54.239.219.210'], - originalValue: ['54.239.219.210'], + category: 'log', + field: 'log.file.path', + values: ['/var/log/suricata/eve.json'], + originalValue: '/var/log/suricata/eve.json', }, { - category: 'suricata', - field: 'suricata.eve.fileinfo.state', - values: ['CLOSED'], - originalValue: ['CLOSED'], + category: 'log', + field: 'log.offset', + values: [1856288115], + originalValue: 1856288115, }, { - category: 'destination', - field: 'destination.port', - values: ['40684'], - originalValue: ['40684'], + category: 'network', + field: 'network.name', + values: ['iot'], + originalValue: 'iot', }, { - category: 'traefik', - field: 'traefik.access.geoip.region_name', - values: ['Washington'], - originalValue: ['Washington'], + category: 'network', + field: 'network.protocol', + values: ['http'], + originalValue: 'http', }, { - category: 'source', - field: 'source.as.num', - values: ['16509'], - originalValue: ['16509'], + category: 'network', + field: 'network.transport', + values: ['tcp'], + originalValue: 'tcp', }, { - category: 'event', - field: 'event.end', - values: ['2019-02-10T02:39:44.107Z'], - originalValue: ['2019-02-10T02:39:44.107Z'], + category: 'service', + field: 'service.type', + values: ['suricata'], + originalValue: 'suricata', }, { category: 'source', - field: 'source.geo.location', - values: ['{"long":-122.3341,"lat":47.6103}'], - originalValue: ['{"coordinates":[-122.3341,47.6103],"type":"Point"}'], + field: 'source.as.num', + values: [16509], + originalValue: 16509, }, { category: 'source', - field: 'source.domain', - values: ['server-54-239-219-210.jfk51.r.cloudfront.net'], - originalValue: ['server-54-239-219-210.jfk51.r.cloudfront.net'], - }, - { - category: 'suricata', - field: 'suricata.eve.fileinfo.size', - values: ['48277'], - originalValue: ['48277'], - }, - { - category: 'suricata', - field: 'suricata.eve.app_proto', - values: ['http'], - originalValue: ['http'], - }, - { - category: 'agent', - field: 'agent.type', - values: ['filebeat'], - originalValue: ['filebeat'], - }, - { - category: 'suricata', - field: 'suricata.eve.fileinfo.tx_id', - values: ['301'], - originalValue: ['301'], + field: 'source.as.org', + values: ['Amazon.com, Inc.'], + originalValue: 'Amazon.com, Inc.', }, { - category: 'event', - field: 'event.module', - values: ['suricata'], - originalValue: ['suricata'], + category: 'source', + field: 'source.domain', + values: ['server-54-239-219-210.jfk51.r.cloudfront.net'], + originalValue: 'server-54-239-219-210.jfk51.r.cloudfront.net', }, { - category: 'network', - field: 'network.protocol', - values: ['http'], - originalValue: ['http'], + category: 'source', + field: 'source.geo.city_name', + values: ['Seattle'], + originalValue: 'Seattle', }, { - category: 'host', - field: 'host.os.kernel', - values: ['4.14.50-v7+'], - originalValue: ['4.14.50-v7+'], + category: 'source', + field: 'source.geo.continent_name', + values: ['North America'], + originalValue: 'North America', }, { category: 'source', field: 'source.geo.country_iso_code', values: ['US'], - originalValue: ['US'], + originalValue: 'US', }, { - category: '@version', - field: '@version', - values: ['1'], - originalValue: ['1'], - }, - { - category: 'host', - field: 'host.id', - values: ['b19a781f683541a7a25ee345133aa399'], - originalValue: ['b19a781f683541a7a25ee345133aa399'], + category: 'source', + field: 'source.geo.location.lat', + values: [47.6103], + originalValue: 47.6103, }, { category: 'source', - field: 'source.as.org', - values: ['Amazon.com, Inc.'], - originalValue: ['Amazon.com, Inc.'], + field: 'source.geo.location.lon', + values: [-122.3341], + originalValue: -122.3341, }, { - category: 'suricata', - field: 'suricata.eve.timestamp', - values: ['2019-02-10T02:39:44.107Z'], - originalValue: ['2019-02-10T02:39:44.107Z'], + category: 'source', + field: 'source.geo.region_iso_code', + values: ['US-WA'], + originalValue: 'US-WA', }, { - category: 'host', - field: 'host.os.codename', - values: ['stretch'], - originalValue: ['stretch'], + category: 'source', + field: 'source.geo.region_name', + values: ['Washington'], + originalValue: 'Washington', }, { category: 'source', - field: 'source.geo.continent_name', - values: ['North America'], - originalValue: ['North America'], + field: 'source.ip', + values: ['54.239.219.210'], + originalValue: '54.239.219.210', }, { - category: 'network', - field: 'network.name', - values: ['iot'], - originalValue: ['iot'], + category: 'source', + field: 'source.port', + values: [80], + originalValue: 80, }, { category: 'suricata', - field: 'suricata.eve.http.http_method', - values: ['get'], - originalValue: ['get'], - }, - { - category: 'traefik', - field: 'traefik.access.geoip.continent_name', - values: ['North America'], - originalValue: ['North America'], + field: 'suricata.eve.fileinfo.state', + values: ['CLOSED'], + originalValue: 'CLOSED', }, { - category: 'file', - field: 'file.size', - values: ['48277'], - originalValue: ['48277'], + category: 'suricata', + field: 'suricata.eve.fileinfo.tx_id', + values: [301], + originalValue: 301, }, { - category: 'destination', - field: 'destination.ip', - values: ['10.100.7.196'], - originalValue: ['10.100.7.196'], + category: 'suricata', + field: 'suricata.eve.flow_id', + values: [196625917175466], + originalValue: 196625917175466, }, { category: 'suricata', - field: 'suricata.eve.http.length', - values: ['48277'], - originalValue: ['48277'], + field: 'suricata.eve.http.http_content_type', + values: ['video/mp4'], + originalValue: 'video/mp4', }, { - category: 'http', - field: 'http.response.body.bytes', - values: ['48277'], - originalValue: ['48277'], + category: 'suricata', + field: 'suricata.eve.http.protocol', + values: ['HTTP/1.1'], + originalValue: 'HTTP/1.1', }, { category: 'suricata', - field: 'suricata.eve.fileinfo.filename', - values: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], - originalValue: [ - '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], + field: 'suricata.eve.in_iface', + values: ['eth0'], + originalValue: 'eth0', }, { - category: 'suricata', - field: 'suricata.eve.dest_ip', - values: ['10.100.7.196'], - originalValue: ['10.100.7.196'], + category: 'base', + field: 'tags', + values: ['suricata'], + originalValue: ['suricata'], }, { - category: 'network', - field: 'network.transport', - values: ['tcp'], - originalValue: ['tcp'], + category: 'url', + field: 'url.domain', + values: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], + originalValue: 's3-iad-2.cf.dash.row.aiv-cdn.net', }, { category: 'url', @@ -481,81 +390,35 @@ const EXPECTED_DATA = [ values: [ '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', ], - originalValue: [ + originalValue: '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', - ], - }, - { - category: 'base', - field: '@timestamp', - values: ['2019-02-10T02:39:44.107Z'], - originalValue: ['2019-02-10T02:39:44.107Z'], - }, - { - category: 'host', - field: 'host.os.platform', - values: ['raspbian'], - originalValue: ['raspbian'], - }, - { - category: 'suricata', - field: 'suricata.eve.dest_port', - values: ['40684'], - originalValue: ['40684'], - }, - { - category: 'event', - field: 'event.type', - values: ['fileinfo'], - originalValue: ['fileinfo'], - }, - { - category: 'log', - field: 'log.file.path', - values: ['/var/log/suricata/eve.json'], - originalValue: ['/var/log/suricata/eve.json'], }, { category: 'url', - field: 'url.domain', - values: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], - originalValue: ['s3-iad-2.cf.dash.row.aiv-cdn.net'], - }, - { - category: 'agent', - field: 'agent.ephemeral_id', - values: ['909cd6a1-527d-41a5-9585-a7fb5386f851'], - originalValue: ['909cd6a1-527d-41a5-9585-a7fb5386f851'], - }, - { - category: 'suricata', - field: 'suricata.eve.http.http_content_type', - values: ['video/mp4'], - originalValue: ['video/mp4'], - }, - { - category: 'event', - field: 'event.dataset', - values: ['suricata.eve'], - originalValue: ['suricata.eve'], + field: 'url.path', + values: [ + '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', + ], + originalValue: + '/dm/2$XTMWANo0Q2RZKlH-95UoAahZrOg~/0a9a/bf72/e1da/4c20-919e-0cbabcf7bfe8/75f50c57-d25f-4e97-9e37-01b9f5caa293_audio_13.mp4', }, { category: '_index', field: '_index', values: ['filebeat-7.0.0-iot-2019.06'], - originalValue: ['filebeat-7.0.0-iot-2019.06'], + originalValue: 'filebeat-7.0.0-iot-2019.06', }, { category: '_id', field: '_id', values: ['QRhG1WgBqd-n62SwZYDT'], - originalValue: ['QRhG1WgBqd-n62SwZYDT'], + originalValue: 'QRhG1WgBqd-n62SwZYDT', }, { category: '_score', field: '_score', - values: ['1'], - originalValue: ['1'], + values: [1], + originalValue: 1, }, ]; @@ -589,12 +452,8 @@ export default function ({ getService }: FtrProviderContext) { eventId: ID, }) .expect(200); - expect( - sortBy(detailsData, 'name').map((item) => { - const { __typename, ...rest } = item; - return rest; - }) - ).to.eql(sortBy(EXPECTED_DATA, 'name')); + + expect(sortBy(detailsData, 'name')).to.eql(sortBy(EXPECTED_DATA, 'name')); }); it('Make sure that we get kpi data', async () => { diff --git a/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/create_exceptions.ts b/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/create_exceptions.ts index b1d6a13b77300..1ae6aa80b219f 100644 --- a/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/create_exceptions.ts +++ b/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/create_exceptions.ts @@ -34,6 +34,8 @@ import { createExceptionListItem, waitForSignalsToBePresent, getSignalsByIds, + findImmutableRuleById, + getPrePackagedRulesStatus, } from '../../utils'; // eslint-disable-next-line import/no-default-export @@ -394,6 +396,83 @@ export default ({ getService }: FtrProviderContext) => { ]); }); + it('should not change the immutable tags when adding a second exception list to an immutable rule through patch', async () => { + await installPrePackagedRules(supertest); + + const { id, list_id, namespace_type, type } = await createExceptionList( + supertest, + getCreateExceptionListMinimalSchemaMock() + ); + + // Rule id of "9a1a2dae-0b5f-4c3d-8305-a268d404c306" is from the file: + // x-pack/plugins/security_solution/server/lib/detection_engine/rules/prepackaged_rules/elastic_endpoint.json + // This rule has an existing exceptions_list that we are going to use + const immutableRule = await getRule(supertest, '9a1a2dae-0b5f-4c3d-8305-a268d404c306'); + expect(immutableRule.exceptions_list.length).greaterThan(0); // make sure we have at least one + + // add a second exceptions list as a user is allowed to add a second list to an immutable rule + await supertest + .patch(DETECTION_ENGINE_RULES_URL) + .set('kbn-xsrf', 'true') + .send({ + rule_id: '9a1a2dae-0b5f-4c3d-8305-a268d404c306', + exceptions_list: [ + ...immutableRule.exceptions_list, + { + id, + list_id, + namespace_type, + type, + }, + ], + }) + .expect(200); + + const body = await findImmutableRuleById(supertest, '9a1a2dae-0b5f-4c3d-8305-a268d404c306'); + expect(body.data.length).to.eql(1); // should have only one length to the data set, otherwise we have duplicates or the tags were removed and that is incredibly bad. + + const bodyToCompare = removeServerGeneratedProperties(body.data[0]); + expect(bodyToCompare.rule_id).to.eql(immutableRule.rule_id); // Rule id should not change with a a patch + expect(bodyToCompare.immutable).to.eql(immutableRule.immutable); // Immutable should always stay the same which is true and never flip to false. + expect(bodyToCompare.version).to.eql(immutableRule.version); // The version should never update on a patch + }); + + it('should not change count of prepacked rules when adding a second exception list to an immutable rule through patch. If this fails, suspect the immutable tags are not staying on the rule correctly.', async () => { + await installPrePackagedRules(supertest); + + const { id, list_id, namespace_type, type } = await createExceptionList( + supertest, + getCreateExceptionListMinimalSchemaMock() + ); + + // Rule id of "9a1a2dae-0b5f-4c3d-8305-a268d404c306" is from the file: + // x-pack/plugins/security_solution/server/lib/detection_engine/rules/prepackaged_rules/elastic_endpoint.json + // This rule has an existing exceptions_list that we are going to use + const immutableRule = await getRule(supertest, '9a1a2dae-0b5f-4c3d-8305-a268d404c306'); + expect(immutableRule.exceptions_list.length).greaterThan(0); // make sure we have at least one + + // add a second exceptions list as a user is allowed to add a second list to an immutable rule + await supertest + .patch(DETECTION_ENGINE_RULES_URL) + .set('kbn-xsrf', 'true') + .send({ + rule_id: '9a1a2dae-0b5f-4c3d-8305-a268d404c306', + exceptions_list: [ + ...immutableRule.exceptions_list, + { + id, + list_id, + namespace_type, + type, + }, + ], + }) + .expect(200); + + const status = await getPrePackagedRulesStatus(supertest); + expect(status.rules_not_installed).to.eql(0); + }); + describe('tests with auditbeat data', () => { beforeEach(async () => { await createSignalsIndex(supertest); diff --git a/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/index.ts b/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/index.ts index 7f299fc580138..b6d88b657f25c 100644 --- a/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/index.ts +++ b/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/index.ts @@ -14,6 +14,7 @@ export default ({ loadTestFile }: FtrProviderContext): void => { this.tags('ciGroup11'); loadTestFile(require.resolve('./add_actions')); + loadTestFile(require.resolve('./update_actions')); loadTestFile(require.resolve('./add_prepackaged_rules')); loadTestFile(require.resolve('./create_rules')); loadTestFile(require.resolve('./create_rules_bulk')); diff --git a/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/update_actions.ts b/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/update_actions.ts new file mode 100644 index 0000000000000..257c6a4286982 --- /dev/null +++ b/x-pack/test/detection_engine_api_integration/security_and_spaces/tests/update_actions.ts @@ -0,0 +1,158 @@ +/* + * 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 expect from '@kbn/expect'; + +import { CreateRulesSchema } from '../../../../plugins/security_solution/common/detection_engine/schemas/request'; +import { DETECTION_ENGINE_RULES_URL } from '../../../../plugins/security_solution/common/constants'; +import { FtrProviderContext } from '../../common/ftr_provider_context'; +import { + createSignalsIndex, + deleteAllAlerts, + deleteSignalsIndex, + removeServerGeneratedProperties, + getRuleWithWebHookAction, + getSimpleRuleOutputWithWebHookAction, + waitForRuleSuccessOrStatus, + createRule, + getSimpleRule, + updateRule, + installPrePackagedRules, + getRule, + createNewAction, + findImmutableRuleById, + getPrePackagedRulesStatus, +} from '../../utils'; + +// eslint-disable-next-line import/no-default-export +export default ({ getService }: FtrProviderContext) => { + const supertest = getService('supertest'); + const esArchiver = getService('esArchiver'); + + describe('update_actions', () => { + describe('updating actions', () => { + beforeEach(async () => { + await esArchiver.load('auditbeat/hosts'); + await createSignalsIndex(supertest); + }); + + afterEach(async () => { + await deleteSignalsIndex(supertest); + await deleteAllAlerts(supertest); + await esArchiver.unload('auditbeat/hosts'); + }); + + it('should be able to create a new webhook action and update a rule with the webhook action', async () => { + const hookAction = await createNewAction(supertest); + const rule = getSimpleRule(); + await createRule(supertest, rule); + const ruleToUpdate = getRuleWithWebHookAction(hookAction.id, false, rule); + const updatedRule = await updateRule(supertest, ruleToUpdate); + const bodyToCompare = removeServerGeneratedProperties(updatedRule); + + const expected = { + ...getSimpleRuleOutputWithWebHookAction(`${bodyToCompare.actions?.[0].id}`), + version: 2, // version bump is required since this is an updated rule and this is part of the testing that we do bump the version number on update + }; + expect(bodyToCompare).to.eql(expected); + }); + + it('should be able to create a new webhook action and attach it to a rule without a meta field and run it correctly', async () => { + const hookAction = await createNewAction(supertest); + const rule = getSimpleRule(); + await createRule(supertest, rule); + const ruleToUpdate = getRuleWithWebHookAction(hookAction.id, true, rule); + const updatedRule = await updateRule(supertest, ruleToUpdate); + await waitForRuleSuccessOrStatus(supertest, updatedRule.id); + + // expected result for status should be 'succeeded' + const { body } = await supertest + .post(`${DETECTION_ENGINE_RULES_URL}/_find_statuses`) + .set('kbn-xsrf', 'true') + .send({ ids: [updatedRule.id] }) + .expect(200); + expect(body[updatedRule.id].current_status.status).to.eql('succeeded'); + }); + + it('should be able to create a new webhook action and attach it to a rule with a meta field and run it correctly', async () => { + const hookAction = await createNewAction(supertest); + const rule = getSimpleRule(); + await createRule(supertest, rule); + const ruleToUpdate: CreateRulesSchema = { + ...getRuleWithWebHookAction(hookAction.id, true, rule), + meta: {}, // create a rule with the action attached and a meta field + }; + const updatedRule = await updateRule(supertest, ruleToUpdate); + await waitForRuleSuccessOrStatus(supertest, updatedRule.id); + + // expected result for status should be 'succeeded' + const { body } = await supertest + .post(`${DETECTION_ENGINE_RULES_URL}/_find_statuses`) + .set('kbn-xsrf', 'true') + .send({ ids: [updatedRule.id] }) + .expect(200); + expect(body[updatedRule.id].current_status.status).to.eql('succeeded'); + }); + + it('should be able to create a new webhook action and attach it to an immutable rule', async () => { + await installPrePackagedRules(supertest); + // Rule id of "9a1a2dae-0b5f-4c3d-8305-a268d404c306" is from the file: + // x-pack/plugins/security_solution/server/lib/detection_engine/rules/prepackaged_rules/elastic_endpoint.json + const immutableRule = await getRule(supertest, '9a1a2dae-0b5f-4c3d-8305-a268d404c306'); + const hookAction = await createNewAction(supertest); + const newRuleToUpdate = getSimpleRule(immutableRule.rule_id); + const ruleToUpdate = getRuleWithWebHookAction(hookAction.id, false, newRuleToUpdate); + const updatedRule = await updateRule(supertest, ruleToUpdate); + const bodyToCompare = removeServerGeneratedProperties(updatedRule); + + const expected = { + ...getSimpleRuleOutputWithWebHookAction(`${bodyToCompare.actions?.[0].id}`), + rule_id: immutableRule.rule_id, // Rule id should match the same as the immutable rule + version: immutableRule.version, // This version number should not change when an immutable rule is updated + immutable: true, // It should stay immutable true when returning + }; + expect(bodyToCompare).to.eql(expected); + }); + + it('should be able to create a new webhook action, attach it to an immutable rule and the count of prepackaged rules should not increase. If this fails, suspect the immutable tags are not staying on the rule correctly.', async () => { + await installPrePackagedRules(supertest); + // Rule id of "9a1a2dae-0b5f-4c3d-8305-a268d404c306" is from the file: + // x-pack/plugins/security_solution/server/lib/detection_engine/rules/prepackaged_rules/elastic_endpoint.json + const immutableRule = await getRule(supertest, '9a1a2dae-0b5f-4c3d-8305-a268d404c306'); + const hookAction = await createNewAction(supertest); + const newRuleToUpdate = getSimpleRule(immutableRule.rule_id); + const ruleToUpdate = getRuleWithWebHookAction(hookAction.id, false, newRuleToUpdate); + await updateRule(supertest, ruleToUpdate); + + const status = await getPrePackagedRulesStatus(supertest); + expect(status.rules_not_installed).to.eql(0); + }); + + it('should be able to create a new webhook action, attach it to an immutable rule and the rule should stay immutable when searching against immutable tags', async () => { + await installPrePackagedRules(supertest); + // Rule id of "9a1a2dae-0b5f-4c3d-8305-a268d404c306" is from the file: + // x-pack/plugins/security_solution/server/lib/detection_engine/rules/prepackaged_rules/elastic_endpoint.json + const immutableRule = await getRule(supertest, '9a1a2dae-0b5f-4c3d-8305-a268d404c306'); + const hookAction = await createNewAction(supertest); + const newRuleToUpdate = getSimpleRule(immutableRule.rule_id); + const ruleToUpdate = getRuleWithWebHookAction(hookAction.id, false, newRuleToUpdate); + await updateRule(supertest, ruleToUpdate); + const body = await findImmutableRuleById(supertest, '9a1a2dae-0b5f-4c3d-8305-a268d404c306'); + + expect(body.data.length).to.eql(1); // should have only one length to the data set, otherwise we have duplicates or the tags were removed and that is incredibly bad. + const bodyToCompare = removeServerGeneratedProperties(body.data[0]); + const expected = { + ...getSimpleRuleOutputWithWebHookAction(`${bodyToCompare.actions?.[0].id}`), + rule_id: immutableRule.rule_id, // Rule id should match the same as the immutable rule + version: immutableRule.version, // This version number should not change when an immutable rule is updated + immutable: true, // It should stay immutable true when returning + }; + expect(bodyToCompare).to.eql(expected); + }); + }); + }); +}; diff --git a/x-pack/test/detection_engine_api_integration/utils.ts b/x-pack/test/detection_engine_api_integration/utils.ts index 71390400c359b..158247ee244dd 100644 --- a/x-pack/test/detection_engine_api_integration/utils.ts +++ b/x-pack/test/detection_engine_api_integration/utils.ts @@ -11,6 +11,7 @@ import { SuperTest } from 'supertest'; import supertestAsPromised from 'supertest-as-promised'; import { Context } from '@elastic/elasticsearch/lib/Transport'; import { SearchResponse } from 'elasticsearch'; +import { PrePackagedRulesAndTimelinesStatusSchema } from '../../plugins/security_solution/common/detection_engine/schemas/response'; import { NonEmptyEntriesArray } from '../../plugins/lists/common/schemas'; import { getCreateExceptionListDetectionSchemaMock } from '../../plugins/lists/common/schemas/request/create_exception_list_schema.mock'; import { @@ -38,6 +39,7 @@ import { DETECTION_ENGINE_PREPACKAGED_URL, DETECTION_ENGINE_QUERY_SIGNALS_URL, DETECTION_ENGINE_RULES_URL, + INTERNAL_IMMUTABLE_KEY, INTERNAL_RULE_ID_KEY, } from '../../plugins/security_solution/common/constants'; import { getCreateExceptionListItemMinimalSchemaMockWithoutId } from '../../plugins/lists/common/schemas/request/create_exception_list_item_schema.mock'; @@ -674,20 +676,27 @@ export const getWebHookAction = () => ({ name: 'Some connector', }); -export const getRuleWithWebHookAction = (id: string, enabled = false): CreateRulesSchema => ({ - ...getSimpleRule('rule-1', enabled), - throttle: 'rule', - actions: [ - { - group: 'default', - id, - params: { - body: '{}', +export const getRuleWithWebHookAction = ( + id: string, + enabled = false, + rule?: QueryCreateSchema +): CreateRulesSchema | UpdateRulesSchema => { + const finalRule = rule != null ? { ...rule, enabled } : getSimpleRule('rule-1', enabled); + return { + ...finalRule, + throttle: 'rule', + actions: [ + { + group: 'default', + id, + params: { + body: '{}', + }, + action_type_id: '.webhook', }, - action_type_id: '.webhook', - }, - ], -}); + ], + }; +}; export const getSimpleRuleOutputWithWebHookAction = (actionId: string): Partial => ({ ...getSimpleRuleOutput(), @@ -830,6 +839,78 @@ export const createRule = async ( return body; }; +/** + * Helper to cut down on the noise in some of the tests. This checks for + * an expected 200 still and does not do any retries. + * @param supertest The supertest deps + * @param rule The rule to create + */ +export const updateRule = async ( + supertest: SuperTest, + updatedRule: UpdateRulesSchema +): Promise => { + const { body } = await supertest + .put(DETECTION_ENGINE_RULES_URL) + .set('kbn-xsrf', 'true') + .send(updatedRule) + .expect(200); + return body; +}; + +/** + * Helper to cut down on the noise in some of the tests. This + * creates a new action and expects a 200 and does not do any retries. + * @param supertest The supertest deps + */ +export const createNewAction = async (supertest: SuperTest) => { + const { body } = await supertest + .post('/api/actions/action') + .set('kbn-xsrf', 'true') + .send(getWebHookAction()) + .expect(200); + return body; +}; + +/** + * Helper to cut down on the noise in some of the tests. This + * creates a new action and expects a 200 and does not do any retries. + * @param supertest The supertest deps + */ +export const findImmutableRuleById = async ( + supertest: SuperTest, + ruleId: string +): Promise<{ + page: number; + perPage: number; + total: number; + data: FullResponseSchema[]; +}> => { + const { body } = await supertest + .get( + `${DETECTION_ENGINE_RULES_URL}/_find?filter=alert.attributes.tags: "${INTERNAL_IMMUTABLE_KEY}:true" AND alert.attributes.tags: "${INTERNAL_RULE_ID_KEY}:${ruleId}"` + ) + .set('kbn-xsrf', 'true') + .send() + .expect(200); + return body; +}; + +/** + * Helper to cut down on the noise in some of the tests. This + * creates a new action and expects a 200 and does not do any retries. + * @param supertest The supertest deps + */ +export const getPrePackagedRulesStatus = async ( + supertest: SuperTest +): Promise => { + const { body } = await supertest + .get(`${DETECTION_ENGINE_PREPACKAGED_URL}/_status`) + .set('kbn-xsrf', 'true') + .send() + .expect(200); + return body; +}; + /** * Helper to cut down on the noise in some of the tests. This checks for * an expected 200 still and does not try to any retries. Creates exception lists diff --git a/x-pack/test/fleet_api_integration/apis/agent_policy/agent_policy.ts b/x-pack/test/fleet_api_integration/apis/agent_policy/agent_policy.ts index 0d0749aa8e913..9f016ab044a90 100644 --- a/x-pack/test/fleet_api_integration/apis/agent_policy/agent_policy.ts +++ b/x-pack/test/fleet_api_integration/apis/agent_policy/agent_policy.ts @@ -26,8 +26,10 @@ export default function ({ getService }: FtrProviderContext) { }); describe('POST /api/fleet/agent_policies', () => { - it('should work with valid values', async () => { - await supertest + it('should work with valid minimum required values', async () => { + const { + body: { item: createdPolicy }, + } = await supertest .post(`/api/fleet/agent_policies`) .set('kbn-xsrf', 'xxxx') .send({ @@ -35,6 +37,28 @@ export default function ({ getService }: FtrProviderContext) { namespace: 'default', }) .expect(200); + + const getRes = await supertest.get(`/api/fleet/agent_policies/${createdPolicy.id}`); + const json = getRes.body; + expect(json.item.is_managed).to.equal(false); + }); + + it('sets given is_managed value', async () => { + const { + body: { item: createdPolicy }, + } = await supertest + .post(`/api/fleet/agent_policies`) + .set('kbn-xsrf', 'xxxx') + .send({ + name: 'TEST2', + namespace: 'default', + is_managed: true, + }) + .expect(200); + + const getRes = await supertest.get(`/api/fleet/agent_policies/${createdPolicy.id}`); + const json = getRes.body; + expect(json.item.is_managed).to.equal(true); }); it('should return a 400 with an empty namespace', async () => { @@ -108,6 +132,7 @@ export default function ({ getService }: FtrProviderContext) { expect(newPolicy).to.eql({ name: 'Copied policy', description: 'Test', + is_managed: false, namespace: 'default', monitoring_enabled: ['logs', 'metrics'], revision: 1, @@ -161,6 +186,7 @@ export default function ({ getService }: FtrProviderContext) { }); describe('PUT /api/fleet/agent_policies/{agentPolicyId}', () => { + let agentPolicyId: undefined | string; it('should work with valid values', async () => { const { body: { item: originalPolicy }, @@ -173,11 +199,11 @@ export default function ({ getService }: FtrProviderContext) { namespace: 'default', }) .expect(200); - + agentPolicyId = originalPolicy.id; const { body: { item: updatedPolicy }, } = await supertest - .put(`/api/fleet/agent_policies/${originalPolicy.id}`) + .put(`/api/fleet/agent_policies/${agentPolicyId}`) .set('kbn-xsrf', 'xxxx') .send({ name: 'Updated name', @@ -193,12 +219,31 @@ export default function ({ getService }: FtrProviderContext) { name: 'Updated name', description: 'Updated description', namespace: 'default', + is_managed: false, revision: 2, updated_by: 'elastic', package_policies: [], }); }); + it('sets given is_managed value', async () => { + const { + body: { item: createdPolicy }, + } = await supertest + .put(`/api/fleet/agent_policies/${agentPolicyId}`) + .set('kbn-xsrf', 'xxxx') + .send({ + name: 'TEST2', + namespace: 'default', + is_managed: true, + }) + .expect(200); + + const getRes = await supertest.get(`/api/fleet/agent_policies/${createdPolicy.id}`); + const json = getRes.body; + expect(json.item.is_managed).to.equal(true); + }); + it('should return a 409 if policy already exists with name given', async () => { const sharedBody = { name: 'Initial name', diff --git a/x-pack/test/fleet_api_integration/apis/agents/reassign.ts b/x-pack/test/fleet_api_integration/apis/agents/reassign.ts index e17e779e4217b..a31fa862f7420 100644 --- a/x-pack/test/fleet_api_integration/apis/agents/reassign.ts +++ b/x-pack/test/fleet_api_integration/apis/agents/reassign.ts @@ -16,10 +16,10 @@ export default function (providerContext: FtrProviderContext) { describe('fleet_reassign_agent', () => { setupFleetAndAgents(providerContext); - before(async () => { + beforeEach(async () => { await esArchiver.loadIfNeeded('fleet/agents'); }); - after(async () => { + afterEach(async () => { await esArchiver.unload('fleet/agents'); }); @@ -31,7 +31,7 @@ export default function (providerContext: FtrProviderContext) { policy_id: 'policy2', }) .expect(200); - const { body } = await supertest.get(`/api/fleet/agents/agent1`).set('kbn-xsrf', 'xxx'); + const { body } = await supertest.get(`/api/fleet/agents/agent1`); expect(body.item.policy_id).to.eql('policy2'); }); @@ -88,5 +88,34 @@ export default function (providerContext: FtrProviderContext) { }) .expect(404); }); + + it('can reassign from unmanaged policy to unmanaged', async () => { + // policy2 is not managed + // reassign succeeds + await supertest + .put(`/api/fleet/agents/agent1/reassign`) + .set('kbn-xsrf', 'xxx') + .send({ + policy_id: 'policy2', + }) + .expect(200); + }); + it('cannot reassign from unmanaged policy to managed', async () => { + // agent1 is enrolled in policy1. set policy1 to managed + await supertest + .put(`/api/fleet/agent_policies/policy1`) + .set('kbn-xsrf', 'xxx') + .send({ name: 'Test policy', namespace: 'default', is_managed: true }) + .expect(200); + + // reassign fails + await supertest + .put(`/api/fleet/agents/agent1/reassign`) + .set('kbn-xsrf', 'xxx') + .send({ + policy_id: 'policy2', + }) + .expect(400); + }); }); } diff --git a/x-pack/test/fleet_api_integration/apis/agents/unenroll.ts b/x-pack/test/fleet_api_integration/apis/agents/unenroll.ts index 3cafc86602d3b..85bcce824dd51 100644 --- a/x-pack/test/fleet_api_integration/apis/agents/unenroll.ts +++ b/x-pack/test/fleet_api_integration/apis/agents/unenroll.ts @@ -65,17 +65,28 @@ export default function (providerContext: FtrProviderContext) { await esArchiver.unload('fleet/agents'); }); - it('should allow to unenroll single agent', async () => { + it('/agents/{agent_id}/unenroll should fail for managed policy', async () => { + // set policy to managed await supertest - .post(`/api/fleet/agents/agent1/unenroll`) + .put(`/api/fleet/agent_policies/policy1`) .set('kbn-xsrf', 'xxx') - .send({ - force: true, - }) + .send({ name: 'Test policy', namespace: 'default', is_managed: true }) + .expect(200); + + await supertest.post(`/api/fleet/agents/agent1/unenroll`).set('kbn-xsrf', 'xxx').expect(400); + }); + + it('/agents/{agent_id}/unenroll should allow from unmanaged policy', async () => { + // set policy to unmanaged + await supertest + .put(`/api/fleet/agent_policies/policy1`) + .set('kbn-xsrf', 'xxx') + .send({ name: 'Test policy', namespace: 'default', is_managed: false }) .expect(200); + await supertest.post(`/api/fleet/agents/agent1/unenroll`).set('kbn-xsrf', 'xxx').expect(200); }); - it('should invalidate related API keys', async () => { + it('/agents/{agent_id}/unenroll { force: true } should invalidate related API keys', async () => { await supertest .post(`/api/fleet/agents/agent1/unenroll`) .set('kbn-xsrf', 'xxx') @@ -97,7 +108,44 @@ export default function (providerContext: FtrProviderContext) { expect(outputAPIKeys[0].invalidated).eql(true); }); - it('should allow to unenroll multiple agents by id', async () => { + it('/agents/{agent_id}/bulk_unenroll should not allow unenroll from managed policy', async () => { + // set policy to managed + await supertest + .put(`/api/fleet/agent_policies/policy1`) + .set('kbn-xsrf', 'xxx') + .send({ name: 'Test policy', namespace: 'default', is_managed: true }) + .expect(200); + + // try to unenroll + await supertest + .post(`/api/fleet/agents/bulk_unenroll`) + .set('kbn-xsrf', 'xxx') + .send({ + agents: ['agent2', 'agent3'], + }) + // http request succeeds + .expect(200); + + // but agents are still enrolled + const [agent2data, agent3data] = await Promise.all([ + supertest.get(`/api/fleet/agents/agent2`), + supertest.get(`/api/fleet/agents/agent3`), + ]); + expect(typeof agent2data.body.item.unenrollment_started_at).to.eql('undefined'); + expect(typeof agent2data.body.item.unenrolled_at).to.eql('undefined'); + expect(agent2data.body.item.active).to.eql(true); + expect(typeof agent3data.body.item.unenrollment_started_at).to.be('undefined'); + expect(typeof agent3data.body.item.unenrolled_at).to.be('undefined'); + expect(agent2data.body.item.active).to.eql(true); + }); + + it('/agents/{agent_id}/bulk_unenroll should allow to unenroll multiple agents by id from an unmanaged policy', async () => { + // set policy to unmanaged + await supertest + .put(`/api/fleet/agent_policies/policy1`) + .set('kbn-xsrf', 'xxx') + .send({ name: 'Test policy', namespace: 'default', is_managed: false }) + .expect(200); await supertest .post(`/api/fleet/agents/bulk_unenroll`) .set('kbn-xsrf', 'xxx') @@ -106,8 +154,8 @@ export default function (providerContext: FtrProviderContext) { }) .expect(200); const [agent2data, agent3data] = await Promise.all([ - supertest.get(`/api/fleet/agents/agent2`).set('kbn-xsrf', 'xxx'), - supertest.get(`/api/fleet/agents/agent3`).set('kbn-xsrf', 'xxx'), + supertest.get(`/api/fleet/agents/agent2`), + supertest.get(`/api/fleet/agents/agent3`), ]); expect(typeof agent2data.body.item.unenrollment_started_at).to.eql('string'); expect(agent2data.body.item.active).to.eql(true); @@ -115,7 +163,7 @@ export default function (providerContext: FtrProviderContext) { expect(agent2data.body.item.active).to.eql(true); }); - it('should allow to unenroll multiple agents by kuery', async () => { + it('/agents/{agent_id}/bulk_unenroll should allow to unenroll multiple agents by kuery', async () => { await supertest .post(`/api/fleet/agents/bulk_unenroll`) .set('kbn-xsrf', 'xxx') @@ -125,7 +173,7 @@ export default function (providerContext: FtrProviderContext) { }) .expect(200); - const { body } = await supertest.get(`/api/fleet/agents`).set('kbn-xsrf', 'xxx'); + const { body } = await supertest.get(`/api/fleet/agents`); expect(body.total).to.eql(0); }); }); diff --git a/x-pack/test/functional/apps/lens/drag_and_drop.ts b/x-pack/test/functional/apps/lens/drag_and_drop.ts index 7f8d60f9ffccf..5b3a984f00519 100644 --- a/x-pack/test/functional/apps/lens/drag_and_drop.ts +++ b/x-pack/test/functional/apps/lens/drag_and_drop.ts @@ -53,7 +53,7 @@ export default function ({ getPageObjects }: FtrProviderContext) { }); it('should reorder the elements for the table', async () => { - await PageObjects.lens.reorderDimensions('lnsDatatable_column', 2, 0); + await PageObjects.lens.reorderDimensions('lnsDatatable_column', 3, 1); await PageObjects.header.waitUntilLoadingHasFinished(); expect(await PageObjects.lens.getDimensionTriggersTexts('lnsDatatable_column')).to.eql([ 'Top values of @message.raw', @@ -83,6 +83,129 @@ export default function ({ getPageObjects }: FtrProviderContext) { await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') ).to.eql(['Top values of @message.raw']); }); + + it('should move the column to non-compatible dimension group', async () => { + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql(['Top values of @message.raw']); + + await PageObjects.lens.dragDimensionToDimension( + 'lnsXY_splitDimensionPanel > lns-dimensionTrigger', + 'lnsXY_yDimensionPanel > lns-dimensionTrigger' + ); + + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql([]); + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql([]); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([ + 'Unique count of @message.raw', + ]); + }); + it('should duplicate the column when dragging to empty dimension in the same group', async () => { + await PageObjects.lens.dragDimensionToDimension( + 'lnsXY_yDimensionPanel > lns-dimensionTrigger', + 'lnsXY_yDimensionPanel > lns-empty-dimension' + ); + await PageObjects.lens.dragDimensionToDimension( + 'lnsXY_yDimensionPanel > lns-dimensionTrigger', + 'lnsXY_yDimensionPanel > lns-empty-dimension' + ); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([ + 'Unique count of @message.raw', + 'Unique count of @message.raw [1]', + 'Unique count of @message.raw [2]', + ]); + }); + it('should duplicate the column when dragging to empty dimension in the same group', async () => { + await PageObjects.lens.dragDimensionToDimension( + 'lnsXY_yDimensionPanel > lns-dimensionTrigger', + 'lnsXY_xDimensionPanel > lns-empty-dimension' + ); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([ + 'Unique count of @message.raw', + 'Unique count of @message.raw [1]', + ]); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_xDimensionPanel')).to.eql([ + 'Top values of @message.raw', + ]); + }); + }); + describe('keyboard drag and drop', () => { + it('should drop a field to workspace', async () => { + await PageObjects.visualize.navigateToNewVisualization(); + await PageObjects.visualize.clickVisType('lens'); + await PageObjects.lens.goToTimeRange(); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.lens.dragFieldWithKeyboard('@timestamp'); + expect(await PageObjects.lens.getDimensionTriggerText('lnsXY_xDimensionPanel')).to.eql( + '@timestamp' + ); + }); + it('should drop a field to empty dimension', async () => { + await PageObjects.lens.dragFieldWithKeyboard('bytes', 4); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([ + 'Count of records', + 'Average of bytes', + ]); + await PageObjects.lens.dragFieldWithKeyboard('@message.raw', 1, true); + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql(['Top values of @message.raw']); + }); + it('should drop a field to an existing dimension replacing the old one', async () => { + await PageObjects.lens.dragFieldWithKeyboard('clientip', 1, true); + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql(['Top values of clientip']); + }); + it('should duplicate an element in a group', async () => { + await PageObjects.lens.dimensionKeyboardDragDrop('lnsXY_yDimensionPanel', 0, 1); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([ + 'Count of records', + 'Average of bytes', + 'Count of records [1]', + ]); + }); + + it('should move dimension to compatible dimension', async () => { + await PageObjects.lens.dimensionKeyboardDragDrop('lnsXY_xDimensionPanel', 0, 5); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_xDimensionPanel')).to.eql( + [] + ); + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql(['@timestamp']); + + await PageObjects.lens.dimensionKeyboardDragDrop('lnsXY_splitDimensionPanel', 0, 5, true); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_xDimensionPanel')).to.eql([ + '@timestamp', + ]); + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql([]); + }); + it('should move dimension to incompatible dimension', async () => { + await PageObjects.lens.dimensionKeyboardDragDrop('lnsXY_yDimensionPanel', 1, 2); + expect( + await PageObjects.lens.getDimensionTriggersTexts('lnsXY_splitDimensionPanel') + ).to.eql(['bytes']); + + await PageObjects.lens.dimensionKeyboardDragDrop('lnsXY_xDimensionPanel', 0, 2); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([ + 'Count of records', + 'Unique count of @timestamp', + ]); + }); + it('should reorder elements with keyboard', async () => { + await PageObjects.lens.dimensionKeyboardReorder('lnsXY_yDimensionPanel', 0, 1); + expect(await PageObjects.lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([ + 'Unique count of @timestamp', + 'Count of records', + ]); + }); }); describe('workspace drop', () => { diff --git a/x-pack/test/functional/apps/lens/index.ts b/x-pack/test/functional/apps/lens/index.ts index 6cbd18bdeef04..10b1f4d30145f 100644 --- a/x-pack/test/functional/apps/lens/index.ts +++ b/x-pack/test/functional/apps/lens/index.ts @@ -29,6 +29,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) { this.tags(['ciGroup4', 'skipFirefox']); loadTestFile(require.resolve('./smokescreen')); + loadTestFile(require.resolve('./table')); loadTestFile(require.resolve('./dashboard')); loadTestFile(require.resolve('./persistent_context')); loadTestFile(require.resolve('./colors')); diff --git a/x-pack/test/functional/apps/lens/smokescreen.ts b/x-pack/test/functional/apps/lens/smokescreen.ts index 73c5838259f6e..a86a67d7c8d0d 100644 --- a/x-pack/test/functional/apps/lens/smokescreen.ts +++ b/x-pack/test/functional/apps/lens/smokescreen.ts @@ -11,6 +11,7 @@ import { FtrProviderContext } from '../../ftr_provider_context'; export default function ({ getService, getPageObjects }: FtrProviderContext) { const PageObjects = getPageObjects(['visualize', 'lens', 'common', 'header']); const find = getService('find'); + const retry = getService('retry'); const listingTable = getService('listingTable'); const testSubjects = getService('testSubjects'); const elasticChart = getService('elasticChart'); @@ -589,13 +590,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should able to use filters cell actions in table', async () => { const firstCellContent = await PageObjects.lens.getDatatableCellText(0, 0); - await PageObjects.lens.clickTableCellAction(0, 0, 'lensDatatableFilterOut'); - await PageObjects.header.waitUntilLoadingHasFinished(); - expect( - await find.existsByCssSelector( - `[data-test-subj*="filter-value-${firstCellContent}"][data-test-subj*="filter-negated"]` - ) - ).to.eql(true); + await retry.try(async () => { + await PageObjects.lens.clickTableCellAction(0, 0, 'lensDatatableFilterOut'); + await PageObjects.header.waitUntilLoadingHasFinished(); + expect( + await find.existsByCssSelector( + `[data-test-subj*="filter-value-${firstCellContent}"][data-test-subj*="filter-negated"]` + ) + ).to.eql(true); + }); }); }); } diff --git a/x-pack/test/functional/apps/lens/table.ts b/x-pack/test/functional/apps/lens/table.ts new file mode 100644 index 0000000000000..3f9cdf06da8ab --- /dev/null +++ b/x-pack/test/functional/apps/lens/table.ts @@ -0,0 +1,72 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import expect from '@kbn/expect'; +import { FtrProviderContext } from '../../ftr_provider_context'; + +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const PageObjects = getPageObjects(['visualize', 'lens', 'common', 'header']); + const listingTable = getService('listingTable'); + const find = getService('find'); + const retry = getService('retry'); + + describe('lens datatable', () => { + it('should able to sort a table by a column', async () => { + await PageObjects.visualize.gotoVisualizationLandingPage(); + await listingTable.searchForItemWithName('lnsXYvis'); + await PageObjects.lens.clickVisualizeListItemTitle('lnsXYvis'); + await PageObjects.lens.goToTimeRange(); + await PageObjects.lens.switchToVisualization('lnsDatatable'); + // Sort by number + await PageObjects.lens.changeTableSortingBy(2, 'asc'); + await PageObjects.header.waitUntilLoadingHasFinished(); + expect(await PageObjects.lens.getDatatableCellText(0, 2)).to.eql('17,246'); + // Now sort by IP + await PageObjects.lens.changeTableSortingBy(0, 'asc'); + await PageObjects.header.waitUntilLoadingHasFinished(); + expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('78.83.247.30'); + // Change the sorting + await PageObjects.lens.changeTableSortingBy(0, 'desc'); + await PageObjects.header.waitUntilLoadingHasFinished(); + expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120'); + // Remove the sorting + await PageObjects.lens.changeTableSortingBy(0, 'none'); + await PageObjects.header.waitUntilLoadingHasFinished(); + expect(await PageObjects.lens.isDatatableHeaderSorted(0)).to.eql(false); + }); + + it('should able to use filters cell actions in table', async () => { + const firstCellContent = await PageObjects.lens.getDatatableCellText(0, 0); + await retry.try(async () => { + await PageObjects.lens.clickTableCellAction(0, 0, 'lensDatatableFilterOut'); + await PageObjects.header.waitUntilLoadingHasFinished(); + expect( + await find.existsByCssSelector( + `[data-test-subj*="filter-value-${firstCellContent}"][data-test-subj*="filter-negated"]` + ) + ).to.eql(true); + }); + }); + + it('should allow to configure column visibility', async () => { + expect(await PageObjects.lens.getDatatableHeaderText(0)).to.equal('Top values of ip'); + expect(await PageObjects.lens.getDatatableHeaderText(1)).to.equal('@timestamp per 3 hours'); + expect(await PageObjects.lens.getDatatableHeaderText(2)).to.equal('Average of bytes'); + + await PageObjects.lens.toggleColumnVisibility('lnsDatatable_column > lns-dimensionTrigger'); + + expect(await PageObjects.lens.getDatatableHeaderText(0)).to.equal('@timestamp per 3 hours'); + expect(await PageObjects.lens.getDatatableHeaderText(1)).to.equal('Average of bytes'); + + await PageObjects.lens.toggleColumnVisibility('lnsDatatable_column > lns-dimensionTrigger'); + + expect(await PageObjects.lens.getDatatableHeaderText(0)).to.equal('Top values of ip'); + expect(await PageObjects.lens.getDatatableHeaderText(1)).to.equal('@timestamp per 3 hours'); + expect(await PageObjects.lens.getDatatableHeaderText(2)).to.equal('Average of bytes'); + }); + }); +} diff --git a/x-pack/test/functional/apps/maps/import_geojson/add_layer_import_panel.js b/x-pack/test/functional/apps/maps/import_geojson/add_layer_import_panel.js index 390c7af98c653..46b87b1c4195c 100644 --- a/x-pack/test/functional/apps/maps/import_geojson/add_layer_import_panel.js +++ b/x-pack/test/functional/apps/maps/import_geojson/add_layer_import_panel.js @@ -8,18 +8,24 @@ import expect from '@kbn/expect'; import path from 'path'; -export default function ({ getPageObjects }) { +export default function ({ getPageObjects, getService }) { const PageObjects = getPageObjects(['maps', 'common']); const IMPORT_FILE_PREVIEW_NAME = 'Import File'; const FILE_LOAD_DIR = 'test_upload_files'; const DEFAULT_LOAD_FILE_NAME = 'point.json'; + const security = getService('security'); describe('GeoJSON import layer panel', () => { before(async () => { + await security.testUser.setRoles(['global_maps_all', 'geoall_data_writer']); await PageObjects.maps.openNewMap(); }); + after(async () => { + await security.testUser.restoreDefaults(); + }); + beforeEach(async () => { await PageObjects.maps.clickAddLayer(); await PageObjects.maps.selectGeoJsonUploadSource(); diff --git a/x-pack/test/functional/apps/maps/import_geojson/file_indexing_panel.js b/x-pack/test/functional/apps/maps/import_geojson/file_indexing_panel.js index ea8366d809fb7..4496b59393eec 100644 --- a/x-pack/test/functional/apps/maps/import_geojson/file_indexing_panel.js +++ b/x-pack/test/functional/apps/maps/import_geojson/file_indexing_panel.js @@ -13,6 +13,7 @@ export default function ({ getService, getPageObjects }) { const PageObjects = getPageObjects(['maps', 'common']); const testSubjects = getService('testSubjects'); const log = getService('log'); + const security = getService('security'); const IMPORT_FILE_PREVIEW_NAME = 'Import File'; const FILE_LOAD_DIR = 'test_upload_files'; @@ -37,9 +38,17 @@ export default function ({ getService, getPageObjects }) { describe('On GeoJSON index name & pattern operation complete', () => { before(async () => { + await security.testUser.setRoles( + ['global_maps_all', 'geoall_data_writer', 'global_index_pattern_management_all'], + false + ); await PageObjects.maps.openNewMap(); }); + after(async () => { + await security.testUser.restoreDefaults(); + }); + beforeEach(async () => { await PageObjects.maps.clickAddLayer(); await PageObjects.maps.selectGeoJsonUploadSource(); diff --git a/x-pack/test/functional/apps/transform/creation_index_pattern.ts b/x-pack/test/functional/apps/transform/creation_index_pattern.ts index 9c8b22803ccbe..c28b3cfec85ac 100644 --- a/x-pack/test/functional/apps/transform/creation_index_pattern.ts +++ b/x-pack/test/functional/apps/transform/creation_index_pattern.ts @@ -453,10 +453,12 @@ export default function ({ getService }: FtrProviderContext) { await transform.testExecution.logTestStep('shows the transform preview'); await transform.wizard.assertPivotPreviewChartHistogramButtonMissing(); - await transform.wizard.assertPivotPreviewColumnValues( - testData.expected.transformPreview.column, - testData.expected.transformPreview.values - ); + // cell virtualization means the last column is cutoff in the functional tests + // https://github.com/elastic/eui/issues/4470 + // await transform.wizard.assertPivotPreviewColumnValues( + // testData.expected.transformPreview.column, + // testData.expected.transformPreview.values + // ); await transform.testExecution.logTestStep('loads the details step'); await transform.wizard.advanceToDetailsStep(); diff --git a/x-pack/test/functional/apps/transform/creation_saved_search.ts b/x-pack/test/functional/apps/transform/creation_saved_search.ts index 620dd6e0823ac..673f5b3217fb5 100644 --- a/x-pack/test/functional/apps/transform/creation_saved_search.ts +++ b/x-pack/test/functional/apps/transform/creation_saved_search.ts @@ -292,10 +292,12 @@ export default function ({ getService }: FtrProviderContext) { await transform.testExecution.logTestStep( 'displays the transform preview in the expanded row' ); - await transform.table.assertTransformsExpandedRowPreviewColumnValues( - testData.expected.transformPreview.column, - testData.expected.transformPreview.values - ); + // cell virtualization means the last column is cutoff in the functional tests + // https://github.com/elastic/eui/issues/4470 + // await transform.table.assertTransformsExpandedRowPreviewColumnValues( + // testData.expected.transformPreview.column, + // testData.expected.transformPreview.values + // ); }); }); } diff --git a/x-pack/test/functional/config.js b/x-pack/test/functional/config.js index f2be2974986fb..4d63f033f8756 100644 --- a/x-pack/test/functional/config.js +++ b/x-pack/test/functional/config.js @@ -377,6 +377,28 @@ export default async function ({ readConfigFile }) { }, }, + geoall_data_writer: { + elasticsearch: { + indices: [ + { + names: ['*'], + privileges: ['create', 'read', 'view_index_metadata', 'monitor', 'create_index'], + }, + ], + }, + }, + + global_index_pattern_management_all: { + kibana: [ + { + feature: { + indexPatterns: ['all'], + }, + spaces: ['*'], + }, + ], + }, + global_devtools_read: { kibana: [ { diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 37d97cd014c9f..aae161ef9fcf1 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -163,6 +163,73 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont await PageObjects.header.waitUntilLoadingHasFinished(); }, + /** + * Copies field to chosen destination that is defined by distance of `steps` + * (right arrow presses) from it + * + * @param fieldName - the desired field for the dimension + * @param steps - number of steps user has to press right + * @param reverse - defines the direction of going through drops + * */ + async dragFieldWithKeyboard(fieldName: string, steps = 1, reverse = false) { + const field = await find.byCssSelector( + `[data-test-subj="lnsDragDrop_draggable-${fieldName}"] [data-test-subj="lnsDragDrop-keyboardHandler"]` + ); + await field.focus(); + await browser.pressKeys(browser.keys.ENTER); + for (let i = 0; i < steps; i++) { + await browser.pressKeys(reverse ? browser.keys.LEFT : browser.keys.RIGHT); + } + await browser.pressKeys(browser.keys.ENTER); + + await PageObjects.header.waitUntilLoadingHasFinished(); + }, + + /** + * Selects draggable element and moves it by number of `steps` + * + * @param group - the group of the element + * @param index - the index of the element in the group + * @param steps - number of steps of presses right or left + * @param reverse - defines the direction of going through drops + * */ + async dimensionKeyboardDragDrop(group: string, index = 0, steps = 1, reverse = false) { + const elements = await find.allByCssSelector( + `[data-test-subj="${group}"] [data-test-subj="lnsDragDrop-keyboardHandler"]` + ); + const el = elements[index]; + await el.focus(); + await browser.pressKeys(browser.keys.ENTER); + for (let i = 0; i < steps; i++) { + await browser.pressKeys(reverse ? browser.keys.LEFT : browser.keys.RIGHT); + } + await browser.pressKeys(browser.keys.ENTER); + + await PageObjects.header.waitUntilLoadingHasFinished(); + }, + /** + * Selects draggable element and reorders it by number of `steps` + * + * @param group - the group of the element + * @param index - the index of the element in the group + * @param steps - number of steps of presses right or left + * @param reverse - defines the direction of going through drops + * */ + async dimensionKeyboardReorder(group: string, index = 0, steps = 1, reverse = false) { + const elements = await find.allByCssSelector( + `[data-test-subj="${group}"] [data-test-subj="lnsDragDrop-keyboardHandler"]` + ); + const el = elements[index]; + await el.focus(); + await browser.pressKeys(browser.keys.ENTER); + for (let i = 0; i < steps; i++) { + await browser.pressKeys(reverse ? browser.keys.ARROW_UP : browser.keys.ARROW_DOWN); + } + await browser.pressKeys(browser.keys.ENTER); + + await PageObjects.header.waitUntilLoadingHasFinished(); + }, + /** * Drags field to dimension trigger * @@ -194,16 +261,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont /** * Reorder elements within the group * - * @param startIndex - the index of dragging element - * @param endIndex - the index of drop + * @param startIndex - the index of dragging element starting from 1 + * @param endIndex - the index of drop starting from 1 * */ async reorderDimensions(dimension: string, startIndex: number, endIndex: number) { - const dragging = `[data-test-subj='${dimension}']:nth-of-type(${ - startIndex + 1 - }) .lnsDragDrop`; - const dropping = `[data-test-subj='${dimension}']:nth-of-type(${ - endIndex + 1 - }) [data-test-subj='lnsDragDrop-reorderableDropLayer'`; + const dragging = `[data-test-subj='${dimension}']:nth-of-type(${startIndex}) .lnsDragDrop`; + const dropping = `[data-test-subj='${dimension}']:nth-of-type(${endIndex}) [data-test-subj='lnsDragDrop-reorderableDropLayer'`; await browser.html5DragAndDrop(dragging, dropping); await PageObjects.header.waitUntilLoadingHasFinished(); }, @@ -350,6 +413,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async switchToVisualization(subVisualizationId: string) { await this.openChartSwitchPopover(); await testSubjects.click(`lnsChartSwitchPopover_${subVisualizationId}`); + await PageObjects.header.waitUntilLoadingHasFinished(); }, async openChartSwitchPopover() { @@ -531,10 +595,13 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont }, async getDatatableCell(rowIndex = 0, colIndex = 0) { + const table = await find.byCssSelector('.euiDataGrid'); + const $ = await table.parseDomContent(); + const columnNumber = $('.euiDataGridHeaderCell__content').length; return await find.byCssSelector( - `[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRow"]:nth-child(${ - rowIndex + 2 // this is a bit specific for EuiDataGrid: the first row is the Header - }) [data-test-subj="dataGridRowCell"]:nth-child(${colIndex + 1})` + `[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRowCell"]:nth-child(${ + rowIndex * columnNumber + colIndex + 2 + })` ); }, @@ -562,6 +629,15 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont return buttonEl.click(); }, + async toggleColumnVisibility(dimension: string) { + await this.openDimensionEditor(dimension); + const id = 'lns-table-column-hidden'; + const isChecked = await testSubjects.isEuiSwitchChecked(id); + await testSubjects.setEuiSwitch(id, isChecked ? 'uncheck' : 'check'); + await this.closeDimensionEditor(); + await PageObjects.header.waitUntilLoadingHasFinished(); + }, + async clickTableCellAction(rowIndex = 0, colIndex = 0, actionTestSub: string) { const el = await this.getDatatableCell(rowIndex, colIndex); await el.focus(); diff --git a/x-pack/test/functional/page_objects/search_sessions_management_page.ts b/x-pack/test/functional/page_objects/search_sessions_management_page.ts index a5ffa914eac22..df4e99dd595d9 100644 --- a/x-pack/test/functional/page_objects/search_sessions_management_page.ts +++ b/x-pack/test/functional/page_objects/search_sessions_management_page.ts @@ -49,11 +49,11 @@ export function SearchSessionsPageProvider({ getService, getPageObjects }: FtrPr '[data-test-subj="sessionManagementPopoverAction-reload"]' ); }, - cancel: async () => { - log.debug('management ui: cancel the session'); + delete: async () => { + log.debug('management ui: delete the session'); await actionsCell.click(); await find.clickByCssSelector( - '[data-test-subj="sessionManagementPopoverAction-cancel"]' + '[data-test-subj="sessionManagementPopoverAction-delete"]' ); await PageObjects.common.clickConfirmOnModal(); }, diff --git a/x-pack/test/functional/services/ml/data_frame_analytics_results.ts b/x-pack/test/functional/services/ml/data_frame_analytics_results.ts index f1d9b08cc2438..b6aba13054f75 100644 --- a/x-pack/test/functional/services/ml/data_frame_analytics_results.ts +++ b/x-pack/test/functional/services/ml/data_frame_analytics_results.ts @@ -53,7 +53,9 @@ export function MachineLearningDataFrameAnalyticsResultsProvider({ }, async getResultTableRows() { - return await testSubjects.findAll('mlExplorationDataGrid loaded > dataGridRow'); + return (await testSubjects.find('mlExplorationDataGrid loaded')).findAllByTestSubject( + 'dataGridRowCell' + ); }, async assertResultsTableNotEmpty() { @@ -88,6 +90,7 @@ export function MachineLearningDataFrameAnalyticsResultsProvider({ this.assertResultsTableNotEmpty(); const featureImportanceCell = await this.getFirstFeatureImportanceCell(); + await featureImportanceCell.focus(); const interactionButton = await featureImportanceCell.findByTagName('button'); // simulate hover and wait for button to appear @@ -101,11 +104,9 @@ export function MachineLearningDataFrameAnalyticsResultsProvider({ async getFirstFeatureImportanceCell(): Promise { // get first row of the data grid - const firstDataGridRow = await testSubjects.find( - 'mlExplorationDataGrid loaded > dataGridRow' - ); + const dataGrid = await testSubjects.find('mlExplorationDataGrid loaded'); // find the feature importance cell in that row - const featureImportanceCell = await firstDataGridRow.findByCssSelector( + const featureImportanceCell = await dataGrid.findByCssSelector( '[data-test-subj="dataGridRowCell"][class*="featureImportance"]' ); return featureImportanceCell; diff --git a/x-pack/test/functional/services/transform/wizard.ts b/x-pack/test/functional/services/transform/wizard.ts index 7223d210cfb15..518accdeaf47e 100644 --- a/x-pack/test/functional/services/transform/wizard.ts +++ b/x-pack/test/functional/services/transform/wizard.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { chunk } from 'lodash'; import expect from '@kbn/expect'; import { FtrProviderContext } from '../../ftr_provider_context'; @@ -88,18 +89,24 @@ export function TransformWizardProvider({ getService }: FtrProviderContext) { async parseEuiDataGrid(tableSubj: string) { const table = await testSubjects.find(`~${tableSubj}`); const $ = await table.parseDomContent(); - const rows = []; - - // For each row, get the content of each cell and - // add its values as an array to each row. - for (const tr of $.findTestSubjects(`~dataGridRow`).toArray()) { - rows.push( - $(tr) - .find('.euiDataGridRowCell__truncate') - .toArray() - .map((cell) => $(cell).text().trim()) + + // find columns to help determine number of rows + const columns = $('.euiDataGridHeaderCell__content') + .toArray() + .map((cell) => $(cell).text()); + + // Get the content of each cell and divide them up into rows + const cells = $.findTestSubjects('dataGridRowCell') + .find('.euiDataGridRowCell__truncate') + .toArray() + .map((cell) => + $(cell) + .text() + .trim() + .replace(/Row: \d+, Column: \d+:$/g, '') ); - } + + const rows = chunk(cells, columns.length); return rows; }, @@ -139,12 +146,14 @@ export function TransformWizardProvider({ getService }: FtrProviderContext) { `EuiDataGrid rows should be '${expectedNumberOfRows}' (got '${rowsData.length}')` ); - rowsData.map((r, i) => - expect(r).to.length( - columns, - `EuiDataGrid row #${i + 1} column count should be '${columns}' (got '${r.length}')` - ) - ); + // cell virtualization means the last column is cutoff in the functional tests + // https://github.com/elastic/eui/issues/4470 + // rowsData.map((r, i) => + // expect(r).to.length( + // columns, + // `EuiDataGrid row #${i + 1} column count should be '${columns}' (got '${r.length}')` + // ) + // ); }); }, diff --git a/x-pack/test/send_search_to_background_integration/tests/apps/management/search_sessions/sessions_management.ts b/x-pack/test/send_search_to_background_integration/tests/apps/management/search_sessions/sessions_management.ts index 7e09c6b0fe05c..f925cfb78a8c6 100644 --- a/x-pack/test/send_search_to_background_integration/tests/apps/management/search_sessions/sessions_management.ts +++ b/x-pack/test/send_search_to_background_integration/tests/apps/management/search_sessions/sessions_management.ts @@ -88,15 +88,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await searchSessions.expectState('completed'); }); - it('Cancels a session from management', async () => { + it('Deletes a session from management', async () => { await PageObjects.searchSessionsManagement.goTo(); const searchSessionList = await PageObjects.searchSessionsManagement.getList(); expect(searchSessionList.length).to.be(1); - await searchSessionList[0].cancel(); + await searchSessionList[0].delete(); - // TODO: update this once canceling doesn't delete the object! await retry.waitFor(`wait for list to be empty`, async function () { const s = await PageObjects.searchSessionsManagement.getList(); diff --git a/yarn.lock b/yarn.lock index 9be907922c2a6..24fe6463fa41c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2204,10 +2204,10 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@31.3.0": - version "31.3.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-31.3.0.tgz#f39eecc09d588e4b22150faceb67e5e169afbbd8" - integrity sha512-1Sjhf5HVakx7VGWQkKP8wzGUf7HzyoNnAxjg5P3NH8k+ctJFagS1Wlz9zogwClEuj3FMTMC4tzbJyo06OgHECw== +"@elastic/eui@31.4.0": + version "31.4.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-31.4.0.tgz#d2c8cc91fc538f7b1c5e5229663e186fa0c9207c" + integrity sha512-ADdUeNxj2uiN13U7AkF0ishLAN0xcqFWHC+xjEmx8Wedyaj5DFrmmJEuH9aXv+XSQG5l8ppMgZQb3pMDjR2mKw== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.160"