diff --git a/.bazelrc.common b/.bazelrc.common index 115c0214b1a53..3de2bceaad3a6 100644 --- a/.bazelrc.common +++ b/.bazelrc.common @@ -94,6 +94,12 @@ build --nolegacy_external_runfiles run --nolegacy_external_runfiles test --nolegacy_external_runfiles +# Runfiles should be enabled un order to use `exports_directories_only` in the yarn_install rule +# https://bazelbuild.github.io/rules_nodejs/Built-ins.html#yarn_install-exports_directories_only +build --enable_runfiles +run --enable_runfiles +test --enable_runfiles + # Turn on --incompatible_strict_action_env which was on by default # in Bazel 0.21.0 but turned off again in 0.22.0. Follow # https://github.com/bazelbuild/bazel/issues/7026 for more details. @@ -104,10 +110,11 @@ build --incompatible_strict_action_env run --incompatible_strict_action_env test --incompatible_strict_action_env +# DISABLED for now due to https://bazelbuild.github.io/rules_nodejs/Built-ins.html#yarn_install-exports_directories_only # Do not build runfile trees by default. If an execution strategy relies on runfile # symlink tree, the tree is created on-demand. See: https://github.com/bazelbuild/bazel/issues/6627 # and https://github.com/bazelbuild/bazel/commit/03246077f948f2790a83520e7dccc2625650e6df -build --nobuild_runfile_links +# build --nobuild_runfile_links # When running `bazel coverage` --instrument_test_targets needs to be set in order to # collect coverage information from test targets diff --git a/.eslintrc.js b/.eslintrc.js index 2eea41984b30e..09de32a91bca3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -445,6 +445,7 @@ module.exports = { '(src|x-pack)/plugins/**/(public|server)/**/*', '!(src|x-pack)/plugins/**/(public|server)/mocks/index.{js,mjs,ts}', '!(src|x-pack)/plugins/**/(public|server)/(index|mocks).{js,mjs,ts,tsx}', + '!(src|x-pack)/plugins/**/__stories__/index.{js,mjs,ts,tsx}', ], allowSameFolder: true, errorMessage: 'Plugins may only import from top-level public and server modules.', diff --git a/.i18nrc.json b/.i18nrc.json index 0926f73722731..390e5e917d08e 100644 --- a/.i18nrc.json +++ b/.i18nrc.json @@ -16,6 +16,7 @@ "esUi": "src/plugins/es_ui_shared", "devTools": "src/plugins/dev_tools", "expressions": "src/plugins/expressions", + "expressionRevealImage": "src/plugins/expression_reveal_image", "inputControl": "src/plugins/input_control_vis", "inspector": "src/plugins/inspector", "inspectorViews": "src/legacy/core_plugins/inspector_views", diff --git a/.node-version b/.node-version index 62df50f1eefe1..0a9f3027ffc44 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -14.17.0 +14.17.2 diff --git a/.nvmrc b/.nvmrc index 62df50f1eefe1..0a9f3027ffc44 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14.17.0 +14.17.2 diff --git a/WORKSPACE.bazel b/WORKSPACE.bazel index ebf7bbc8488ac..f63eb0ed8a671 100644 --- a/WORKSPACE.bazel +++ b/WORKSPACE.bazel @@ -27,13 +27,13 @@ check_rules_nodejs_version(minimum_version_string = "3.6.0") # we can update that rule. node_repositories( node_repositories = { - "14.17.0-darwin_amd64": ("node-v14.17.0-darwin-x64.tar.gz", "node-v14.17.0-darwin-x64", "7b210652e11d1ee25650c164cf32381895e1dcb3e0ff1d0841d8abc1f47ac73e"), - "14.17.0-linux_arm64": ("node-v14.17.0-linux-arm64.tar.xz", "node-v14.17.0-linux-arm64", "712e5575cee20570a0a56f4d4b4572cb0f2ee2f4bce49433de18be0393e7df22"), - "14.17.0-linux_s390x": ("node-v14.17.0-linux-s390x.tar.xz", "node-v14.17.0-linux-s390x", "6419372b9e9ad37e0bce188dc5740f2f060aaa44454418e462b4088a310a1c0b"), - "14.17.0-linux_amd64": ("node-v14.17.0-linux-x64.tar.xz", "node-v14.17.0-linux-x64", "494b161759a3d19c70e3172d33ce1918dd8df9ad20d29d1652a8387a84e2d308"), - "14.17.0-windows_amd64": ("node-v14.17.0-win-x64.zip", "node-v14.17.0-win-x64", "6582a7259c433e9f667dcc4ed3e5d68bc514caba2eed40e4626c8b4c7e5ecd5c"), + "14.17.2-darwin_amd64": ("node-v14.17.2-darwin-x64.tar.gz", "node-v14.17.2-darwin-x64", "e45db91fc2136202868a5eb7c6d08b0a2b75394fafdf8538f650fa945b7dee16"), + "14.17.2-linux_arm64": ("node-v14.17.2-linux-arm64.tar.xz", "node-v14.17.2-linux-arm64", "3aff08c49b8c0c3443e7a9ea9bfe607867d79e6e5ccf204a5c8f13fb92a48abd"), + "14.17.2-linux_s390x": ("node-v14.17.2-linux-s390x.tar.xz", "node-v14.17.2-linux-s390x", "76f955856626a3e596b438855fdfe438937623dc71af9a25a8466409be470877"), + "14.17.2-linux_amd64": ("node-v14.17.2-linux-x64.tar.xz", "node-v14.17.2-linux-x64", "6cf9db7349407c177b36205feec949729d0ee9db485e19b10b0b1ffca65a3a46"), + "14.17.2-windows_amd64": ("node-v14.17.2-win-x64.zip", "node-v14.17.2-win-x64", "0e27897578752865fa61546d75b20f7cd62957726caab3c03f82c57a4aef5636"), }, - node_version = "14.17.0", + node_version = "14.17.2", node_urls = [ "https://nodejs.org/dist/v{version}/{filename}", ], @@ -59,6 +59,7 @@ yarn_install( "//:preinstall_check.js", "//:node_modules/.yarn-integrity", ], + exports_directories_only = True, symlink_node_modules = True, quiet = False, frozen_lockfile = False, diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index 231e089950a28..b4be27eee5ed2 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/docs/developer/plugin-list.asciidoc @@ -72,6 +72,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a |This plugin contains reusable code in the form of self-contained modules (or libraries). Each of these modules exports a set of functionality relevant to the domain of the module. +|{kib-repo}blob/{branch}/src/plugins/expression_reveal_image/README.md[expressionRevealImage] +|Expression Reveal Image plugin adds a revealImage function to the expression plugin and an associated renderer. The renderer will display the given percentage of a given image. + + |<> |Expression pipeline is a chain of functions that *pipe* its output to the input of the next function. Functions can be configured using arguments provided diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.interpret.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.interpret.md index 46934e119aee0..434f2660e7eff 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.interpret.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.interpret.md @@ -7,7 +7,7 @@ Signature: ```typescript -interpret(ast: ExpressionAstNode, input: T): Observable; +interpret(ast: ExpressionAstNode, input: T): Observable>; ``` ## Parameters @@ -19,5 +19,5 @@ interpret(ast: ExpressionAstNode, input: T): Observable; Returns: -`Observable` +`Observable>` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.md index 30fe9f497f7ee..edaf1c9a9ce9e 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.md @@ -26,8 +26,8 @@ export declare class Executionstring | | | [input](./kibana-plugin-plugins-expressions-public.execution.input.md) | | Input | Initial input of the execution.N.B. It is initialized to null rather than undefined for legacy reasons, because in legacy interpreter it was set to null by default. | | [inspectorAdapters](./kibana-plugin-plugins-expressions-public.execution.inspectoradapters.md) | | InspectorAdapters | | -| [result](./kibana-plugin-plugins-expressions-public.execution.result.md) | | Observable<Output | ExpressionValueError> | Future that tracks result or error of this execution. | -| [state](./kibana-plugin-plugins-expressions-public.execution.state.md) | | ExecutionContainer<Output | ExpressionValueError> | Dynamic state of the execution. | +| [result](./kibana-plugin-plugins-expressions-public.execution.result.md) | | Observable<ExecutionResult<Output | ExpressionValueError>> | Future that tracks result or error of this execution. | +| [state](./kibana-plugin-plugins-expressions-public.execution.state.md) | | ExecutionContainer<ExecutionResult<Output | ExpressionValueError>> | Dynamic state of the execution. | ## Methods diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.result.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.result.md index 94f60ccee0f00..a386302a62805 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.result.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.result.md @@ -9,5 +9,5 @@ Future that tracks result or error of this execution. Signature: ```typescript -readonly result: Observable; +readonly result: Observable>; ``` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.start.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.start.md index 64cf81b376948..352226da6d72a 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.start.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.start.md @@ -11,7 +11,7 @@ N.B. `input` is initialized to `null` rather than `undefined` for legacy reasons Signature: ```typescript -start(input?: Input): Observable; +start(input?: Input): Observable>; ``` ## Parameters @@ -22,5 +22,5 @@ start(input?: Input): Observable; Returns: -`Observable` +`Observable>` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.state.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.state.md index ca8b57b760f29..61aa0cf4c5b5d 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.state.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.execution.state.md @@ -9,5 +9,5 @@ Dynamic state of the execution. Signature: ```typescript -readonly state: ExecutionContainer; +readonly state: ExecutionContainer>; ``` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.getdata.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.getdata.md index dcd96cf5767bf..852e1f58cc6f3 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.getdata.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.getdata.md @@ -9,5 +9,5 @@ Returns the final output of expression, if any error happens still wraps that er Signature: ```typescript -getData: () => Promise; +getData: () => Observable>; ``` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.md index f2c050bbfe0ba..0ac776e4be2b8 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontract.md @@ -25,7 +25,7 @@ export declare class ExecutionContract() => void | Cancel the execution of the expression. This will set abort signal (available in execution context) to aborted state, letting expression functions to stop their execution. | | [execution](./kibana-plugin-plugins-expressions-public.executioncontract.execution.md) | | Execution<Input, Output, InspectorAdapters> | | | [getAst](./kibana-plugin-plugins-expressions-public.executioncontract.getast.md) | | () => ExpressionAstExpression | Get AST used to execute the expression. | -| [getData](./kibana-plugin-plugins-expressions-public.executioncontract.getdata.md) | | () => Promise<Output | ExpressionValueError> | Returns the final output of expression, if any error happens still wraps that error into ExpressionValueError type and returns that. This function never throws. | +| [getData](./kibana-plugin-plugins-expressions-public.executioncontract.getdata.md) | | () => Observable<ExecutionResult<Output | ExpressionValueError>> | Returns the final output of expression, if any error happens still wraps that error into ExpressionValueError type and returns that. This function never throws. | | [getExpression](./kibana-plugin-plugins-expressions-public.executioncontract.getexpression.md) | | () => string | Get string representation of the expression. Returns the original string if execution was started from a string. If execution was started from an AST this method returns a string generated from AST. | | [inspect](./kibana-plugin-plugins-expressions-public.executioncontract.inspect.md) | | () => InspectorAdapters | Get Inspector adapters provided to all functions of expression through execution context. | | [isPending](./kibana-plugin-plugins-expressions-public.executioncontract.ispending.md) | | boolean | | diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executor.run.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executor.run.md index 307e6b6bcd5c8..4eefc63d714d1 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executor.run.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executor.run.md @@ -9,7 +9,7 @@ Execute expression and return result. Signature: ```typescript -run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable; +run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable>; ``` ## Parameters @@ -22,5 +22,5 @@ run(ast: string | ExpressionAstExpression, input: Input, params?: Returns: -`Observable` +`Observable>` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.md index 6b678fc4fbc26..9821f0f921e4d 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.md @@ -21,7 +21,7 @@ export interface ExpressionsServiceStart | [getFunction](./kibana-plugin-plugins-expressions-public.expressionsservicestart.getfunction.md) | (name: string) => ReturnType<Executor['getFunction']> | Get a registered ExpressionFunction by its name, which was registered using the registerFunction method. The returned ExpressionFunction instance is an internal representation of the function in Expressions service - do not mutate that object. | | [getRenderer](./kibana-plugin-plugins-expressions-public.expressionsservicestart.getrenderer.md) | (name: string) => ReturnType<ExpressionRendererRegistry['get']> | Get a registered ExpressionRenderer by its name, which was registered using the registerRenderer method. The returned ExpressionRenderer instance is an internal representation of the renderer in Expressions service - do not mutate that object. | | [getType](./kibana-plugin-plugins-expressions-public.expressionsservicestart.gettype.md) | (name: string) => ReturnType<Executor['getType']> | Get a registered ExpressionType by its name, which was registered using the registerType method. The returned ExpressionType instance is an internal representation of the type in Expressions service - do not mutate that object. | -| [run](./kibana-plugin-plugins-expressions-public.expressionsservicestart.run.md) | <Input, Output>(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams) => Promise<Output> | Executes expression string or a parsed expression AST and immediately returns the result.Below example will execute sleep 100 | clog expression with 123 initial input to the first function. +| [run](./kibana-plugin-plugins-expressions-public.expressionsservicestart.run.md) | <Input, Output>(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams) => Observable<ExecutionResult<Output | ExpressionValueError>> | Executes expression string or a parsed expression AST and immediately returns the result.Below example will execute sleep 100 | clog expression with 123 initial input to the first function. ```ts expressions.run('sleep 100 | clog', 123); diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.run.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.run.md index 9efca0011174c..0838d640d54e4 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.run.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionsservicestart.run.md @@ -24,5 +24,5 @@ expressions.run('...', null, { elasticsearchClient }); Signature: ```typescript -run: (ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams) => Promise; +run: (ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams) => Observable>; ``` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iexpressionloaderparams.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iexpressionloaderparams.md index 4ef1225ae0d7e..69f9d380422b6 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iexpressionloaderparams.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iexpressionloaderparams.md @@ -22,6 +22,7 @@ export interface IExpressionLoaderParams | [hasCompatibleActions](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.hascompatibleactions.md) | ExpressionRenderHandlerParams['hasCompatibleActions'] | | | [inspectorAdapters](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.inspectoradapters.md) | Adapters | | | [onRenderError](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.onrendererror.md) | RenderErrorHandlerFnType | | +| [partial](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.partial.md) | boolean | | | [renderMode](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.rendermode.md) | RenderMode | | | [searchContext](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.searchcontext.md) | SerializableState | | | [searchSessionId](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.searchsessionid.md) | string | | diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iexpressionloaderparams.partial.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iexpressionloaderparams.partial.md new file mode 100644 index 0000000000000..84c42c3f59f26 --- /dev/null +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iexpressionloaderparams.partial.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-plugins-expressions-public](./kibana-plugin-plugins-expressions-public.md) > [IExpressionLoaderParams](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.md) > [partial](./kibana-plugin-plugins-expressions-public.iexpressionloaderparams.partial.md) + +## IExpressionLoaderParams.partial property + +Signature: + +```typescript +partial?: boolean; +``` diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.md index 92ea071b23dfc..d38027753a6ff 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.md @@ -18,7 +18,7 @@ export interface ReactExpressionRendererProps extends IExpressionLoaderParams | [dataAttrs](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.dataattrs.md) | string[] | | | [debounce](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.debounce.md) | number | | | [expression](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.expression.md) | string | ExpressionAstExpression | | -| [onData$](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.ondata_.md) | <TData, TInspectorAdapters>(data: TData, adapters?: TInspectorAdapters) => void | | +| [onData$](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.ondata_.md) | <TData, TInspectorAdapters>(data: TData, adapters?: TInspectorAdapters, partial?: boolean) => void | | | [onEvent](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.onevent.md) | (event: ExpressionRendererEvent) => void | | | [padding](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.padding.md) | 'xs' | 's' | 'm' | 'l' | 'xl' | | | [reload$](./kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.reload_.md) | Observable<unknown> | An observable which can be used to re-run the expression without destroying the component | diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.ondata_.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.ondata_.md index 05ddb0b13a5be..47559d0f7653c 100644 --- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.ondata_.md +++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.reactexpressionrendererprops.ondata_.md @@ -7,5 +7,5 @@ Signature: ```typescript -onData$?: (data: TData, adapters?: TInspectorAdapters) => void; +onData$?: (data: TData, adapters?: TInspectorAdapters, partial?: boolean) => void; ``` diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.interpret.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.interpret.md index 936e98be589a3..99804dd20841d 100644 --- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.interpret.md +++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.interpret.md @@ -7,7 +7,7 @@ Signature: ```typescript -interpret(ast: ExpressionAstNode, input: T): Observable; +interpret(ast: ExpressionAstNode, input: T): Observable>; ``` ## Parameters @@ -19,5 +19,5 @@ interpret(ast: ExpressionAstNode, input: T): Observable; Returns: -`Observable` +`Observable>` diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.md index a4e324eef6674..47963e5e5ef46 100644 --- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.md +++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.md @@ -26,8 +26,8 @@ export declare class Executionstring | | | [input](./kibana-plugin-plugins-expressions-server.execution.input.md) | | Input | Initial input of the execution.N.B. It is initialized to null rather than undefined for legacy reasons, because in legacy interpreter it was set to null by default. | | [inspectorAdapters](./kibana-plugin-plugins-expressions-server.execution.inspectoradapters.md) | | InspectorAdapters | | -| [result](./kibana-plugin-plugins-expressions-server.execution.result.md) | | Observable<Output | ExpressionValueError> | Future that tracks result or error of this execution. | -| [state](./kibana-plugin-plugins-expressions-server.execution.state.md) | | ExecutionContainer<Output | ExpressionValueError> | Dynamic state of the execution. | +| [result](./kibana-plugin-plugins-expressions-server.execution.result.md) | | Observable<ExecutionResult<Output | ExpressionValueError>> | Future that tracks result or error of this execution. | +| [state](./kibana-plugin-plugins-expressions-server.execution.state.md) | | ExecutionContainer<ExecutionResult<Output | ExpressionValueError>> | Dynamic state of the execution. | ## Methods diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.result.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.result.md index 06cf047ac4160..b3baac5be2fa3 100644 --- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.result.md +++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.result.md @@ -9,5 +9,5 @@ Future that tracks result or error of this execution. Signature: ```typescript -readonly result: Observable; +readonly result: Observable>; ``` diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.start.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.start.md index dd0456ac09950..0eef7013cb3c6 100644 --- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.start.md +++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.start.md @@ -11,7 +11,7 @@ N.B. `input` is initialized to `null` rather than `undefined` for legacy reasons Signature: ```typescript -start(input?: Input): Observable; +start(input?: Input): Observable>; ``` ## Parameters @@ -22,5 +22,5 @@ start(input?: Input): Observable; Returns: -`Observable` +`Observable>` diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.state.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.state.md index 41e7e693a1da4..b7c26e9dee85a 100644 --- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.state.md +++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.execution.state.md @@ -9,5 +9,5 @@ Dynamic state of the execution. Signature: ```typescript -readonly state: ExecutionContainer; +readonly state: ExecutionContainer>; ``` diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.executor.run.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.executor.run.md index 2ab534eac2f3a..7b169d05dc31d 100644 --- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.executor.run.md +++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.executor.run.md @@ -9,7 +9,7 @@ Execute expression and return result. Signature: ```typescript -run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable; +run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable>; ``` ## Parameters @@ -22,5 +22,5 @@ run(ast: string | ExpressionAstExpression, input: Input, params?: Returns: -`Observable` +`Observable>` diff --git a/docs/maps/images/enable_filter_by_map_extent.png b/docs/maps/images/enable_filter_by_map_extent.png new file mode 100644 index 0000000000000..5132dc8f73dbe Binary files /dev/null and b/docs/maps/images/enable_filter_by_map_extent.png differ diff --git a/docs/maps/images/timeslider.gif b/docs/maps/images/timeslider.gif new file mode 100644 index 0000000000000..463adf9a9300d Binary files /dev/null and b/docs/maps/images/timeslider.gif differ diff --git a/docs/maps/index.asciidoc b/docs/maps/index.asciidoc index 20320c5a938c9..0922a4cc94c22 100644 --- a/docs/maps/index.asciidoc +++ b/docs/maps/index.asciidoc @@ -11,6 +11,7 @@ Create beautiful maps from your geographical data. With **Maps**, you can: * Build maps with multiple layers and indices. +* Animate spatial temporal data. * Upload GeoJSON. * Embed your map in dashboards. * Symbolize features using data values. @@ -39,6 +40,15 @@ Use multiple layers and indices to show all your data in a single map. Show how [role="screenshot"] image::maps/images/sample_data_ecommerce.png[] +[float] +=== Animate spatial temporal data +Data comes to life with animation. Hard to detect patterns in static data pop out with movement. Use time slider to animate your data and gain deeper insights. + +This animated map uses the time slider to show Portland buses over a period of 15 minutes. The routes come alive as the bus locations update with time. + +[role="screenshot"] +image::maps/images/timeslider.gif[] + [float] === Upload GeoJSON Use **Maps** to drag and drop your GeoJSON points, lines, and polygons into Elasticsearch, and then use them as layers in your map. diff --git a/docs/maps/search.asciidoc b/docs/maps/search.asciidoc index 031c7be077f52..ada7551f3e57d 100644 --- a/docs/maps/search.asciidoc +++ b/docs/maps/search.asciidoc @@ -8,7 +8,8 @@ Layers that request data from {es} are narrowed when you submit a <> with a configured time field are narrowed by the <>. -Layers narrowed by the time filter contain the clock icon image:maps/images/clock_icon.png[] next to the layer name in the legend. +These layers contain the clock icon image:maps/images/clock_icon.png[clock icon] next to the layer name in the legend. Use the time slider to quickly select time slices within the global time filter range. +Click previous and next buttons to advance the time slice backward or forward. Click play to animate your spatial temporal data. You can create a layer that requests data from {es} from the following: @@ -35,13 +36,30 @@ image::maps/images/global_search_bar.png[] [[maps-create-filter-from-map]] === Create filters from a map -You can create two types of filters by interacting with your map: +Create filters from your map to focus in on just the data you want. *Maps* provides three ways to create filters: -* <> -* <> +* <> +* <> +* <> + +[float] +[[maps-map-extent-filter]] +==== Filter dashboard by map extent + +A map extent shows uniform data across all panels. +As you pan and zoom your map, all panels will update to only include data that is visable in your map. + +To enable filtering your dashboard by map extent: + +* Open the main menu, and then click *Dashboard*. +* Select your dashboard from the list or click *Create dashboard*. +* If your dashboard does not have a map, add a map panel. +* Click the gear icon image:maps/images/gear_icon.png[gear icon] to open the map panel menu. +* Select *More* to view all panel options. +* Select *Enable filter by map extent*. [role="screenshot"] -image::maps/images/create_spatial_filter.png[] +image::maps/images/enable_filter_by_map_extent.png[] [float] [[maps-spatial-filters]] @@ -57,10 +75,12 @@ You can create spatial filters in two ways: Spatial filters have the following properties: * *Geometry label* enables you to provide a meaningful name for your spatial filter. -* *Spatial field* specifies the geo_point or geo_shape field used to determine if a document matches the spatial relation with the specified geometry. * *Spatial relation* determines the {ref}/query-dsl-geo-shape-query.html#_spatial_relations[spatial relation operator] to use at search time. * *Action* specifies whether to apply the filter to the current view or to a drilldown action. Only available when the map is a panel in a {kibana-ref}/dashboard.html[dashboard] with {kibana-ref}/drilldowns.html[drilldowns]. +[role="screenshot"] +image::maps/images/create_spatial_filter.png[] + [float] [[maps-phrase-filter]] ==== Phrase filters diff --git a/docs/spaces/index.asciidoc b/docs/spaces/index.asciidoc index 81f3945779503..8eea3b1ee4552 100644 --- a/docs/spaces/index.asciidoc +++ b/docs/spaces/index.asciidoc @@ -30,6 +30,8 @@ Kibana supports spaces in several ways. You can: The `kibana_admin` role or equivilent is required to manage **Spaces**. +TIP: Looking to support multiple tenants? See <> for more information. + [float] [[spaces-managing]] === View, create, and delete spaces diff --git a/docs/user/dashboard/dashboard.asciidoc b/docs/user/dashboard/dashboard.asciidoc index af67b3016454b..516f4c66d47bb 100644 --- a/docs/user/dashboard/dashboard.asciidoc +++ b/docs/user/dashboard/dashboard.asciidoc @@ -27,12 +27,12 @@ Panels display your data in charts, tables, maps, and more, which allow you to c | Display the results from machine learning anomaly detection jobs. | <> -| Display an anomaly chart from the *Anomaly Explorer. +| Display an anomaly chart from the *Anomaly Explorer*. | <> | Display a table of live streaming logs. -| <> +| <> | Add context to your panels with <>, or add dynamic filters with <>. |=== @@ -131,6 +131,38 @@ If you change your mind and want to add the panel to the *Visualize Library*: . Enter the panel title, then click *Save*. +[float] +[[add-text]] +== Add context to panels + +To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more. + +You create *Text* panels using GitHub-flavored Markdown text. For information about GitHub-flavored Markdown text, click *Help*. + +. From the dashboard, click *All types*, then select *Text*. + +. In the *Markdown* field, enter the text, then click *Update*. + +For example, when you enter: + +[role="screenshot"] +image::images/markdown_example_1.png[] + +The following instructions are displayed: + +[role="screenshot"] +image::images/markdown_example_2.png[] + +Or when you enter: + +[role="screenshot"] +image::images/markdown_example_3.png[] + +The following image is displayed: + +[role="screenshot"] +image::images/markdown_example_4.png[] + [float] [[edit-panels]] == Edit panels @@ -316,8 +348,6 @@ include::lens-advanced.asciidoc[] include::create-panels-with-editors.asciidoc[] -include::enhance-dashboards.asciidoc[] - -include::drilldowns.asciidoc[] +include::make-dashboards-interactive.asciidoc[] include::aggregation-reference.asciidoc[] diff --git a/docs/user/dashboard/enhance-dashboards.asciidoc b/docs/user/dashboard/enhance-dashboards.asciidoc index c999ec9b68251..de8af34e6d32e 100644 --- a/docs/user/dashboard/enhance-dashboards.asciidoc +++ b/docs/user/dashboard/enhance-dashboards.asciidoc @@ -8,7 +8,7 @@ To make your dashboard look the way you want, use the editing options. [[add-controls]] === Add controls -To filter the data on your dashboard in real-time, add a *Controls* panel. +To filter the data on your dashboard in real-time, add a *Controls* panel or use a map panel to <>. {kib} supports two types of *Controls*: diff --git a/docs/user/dashboard/images/drilldown_on_data_table.gif b/docs/user/dashboard/images/drilldown_on_data_table.gif new file mode 100644 index 0000000000000..926b0ff43aea6 Binary files /dev/null and b/docs/user/dashboard/images/drilldown_on_data_table.gif differ diff --git a/docs/user/dashboard/images/drilldown_on_panel.png b/docs/user/dashboard/images/drilldown_on_panel.png index 591f3280c7eca..71b83ae457062 100644 Binary files a/docs/user/dashboard/images/drilldown_on_panel.png and b/docs/user/dashboard/images/drilldown_on_panel.png differ diff --git a/docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png b/docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png new file mode 100644 index 0000000000000..ef72f291850e4 Binary files /dev/null and b/docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png differ diff --git a/docs/user/dashboard/make-dashboards-interactive.asciidoc b/docs/user/dashboard/make-dashboards-interactive.asciidoc new file mode 100644 index 0000000000000..3c2397d0241bb --- /dev/null +++ b/docs/user/dashboard/make-dashboards-interactive.asciidoc @@ -0,0 +1,241 @@ +[[role="xpack"]] +[[drilldowns]] +== Make dashboards interactive + +:keywords: administrator, analyst, concept, task, analyze, dashboard, controls, drilldowns +:description: Add interactive capabilities to your dashboard, such as controls that allow \ +you to apply dashboard-level filters, and drilldowns that allow you to navigate to other \ +dashboards and external websites. + +Add interactive capabilities to your dashboard, such as controls that allow you to apply dashboard-level filters, and drilldowns that allow you to navigate to other dashboards and external websites. + +*Controls* panels allow you to apply dashboard-level filters based on values from a list, or a range of values. + +{kib} supports two types of *Controls*: + +* *Options list* — Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation. +For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city. + +* *Range slider* — Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a +min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price. ++ +[role="screenshot"] +image::images/dashboard-controls.png[] + +Panels have built-in interactive capabilities that apply filters to the dashboard data. For example, when you drag a time range or click a pie slice, a filter for the time range or pie slice is applied. Drilldowns let you customize the interactive behavior while keeping the context of the interaction. + +{kib} supports two types of drilldowns: + +* *Dashboard* — Navigates you from one dashboard to another dashboard. For example, when can create a drilldown for a *Lens* panel that navigates you from a summary dashboard to a dashboard with a filter for a specific host name. + +* *URL* — Navigates you from a dashboard to an external website. For example, a website with the specific host name as a parameter. + +++++ + + +
+++++ + +Third-party developers can create drilldowns. To learn how to code drilldowns, refer to {kib-repo}blob/{branch}/x-pack/examples/ui_actions_enhanced_examples[this example plugin]. + +[float] +[[add-controls]] +=== Add Controls panels + +Add interactive dashboard-level filter panels to your dashboard. + +. On the dashboard, click *All types*, then select *Controls*. + +. Click *Options*, then configure the following options: + +* *Update {kib} filters on each change* — When selected, all interactive inputs create filters that refresh the dashboard. When unselected, + {kib} filters are created only when you click *Apply changes*. + +* *Use time filter* — When selected, the aggregations that generate the options list and time range are connected to the <>. + +* *Pin filters for all applications* — When selected, all filters created by interacting with the inputs are automatically pinned. + +. Click *Update* + +[float] +[[dashboard-drilldowns]] +=== Create dashboard drilldowns + +Dashboard drilldowns enable you to open a dashboard from another dashboard, taking the time range, filters, and other parameters with you so the context remains the same. Dashboard drilldowns help you to continue your analysis from a new perspective. + +For example, if you have a dashboard that shows the logs and metrics for multiple data centers, you can create a drilldown that navigates from the dashboard that shows multiple data centers, to a dashboard that shows a single data center or server. + +[role="screenshot"] +image:images/drilldown_on_data_table.gif[Drilldown on data table that navigates to another dashboard] + +The panels you create using the following editors support dashboard drilldowns: + +* *Lens* +* *Maps* +* *TSVB* +* *Vega* +* *Aggregation-based* area chart, data table, heat map, horitizontal bar chart, line chart, pie chart, tag cloud, and vertical bar chart +* *Timelion* + +[float] +==== Create and set up the dashboards you want to connect + +Use the <> data to create a dashboard and add panels, then set a search and filter on the *[Logs] Web traffic* dashboard. + +. Add the *Sample web logs* data. + +. Create a new dashboard, click *Add from Library*, then add the following panels: + +* *[Logs] Heatmap* +* *[Logs] Host, Visits, and Bytes Table* +* *[Logs] Total Requests and Bytes* +* *[Logs] Visitors by OS* + +. Set the <> to *Last 30 days*. + +. Save the dashboard. In the *Title* field, enter `Host Overview`. + +. Open the *[Logs] Web traffic* dashboard. + +. Create a data table. + +.. In the toolbar, click *Edit*. + +.. Click *Create visualization*. + +.. From the *Chart type* dropdown, select *Table*. + +.. From the *Available fields* list, drag and drop the following fields onto the visualization builder: + +* *agent.keyword* + +* *bytes* + +* *geo.src* + +* *ip* + +.. In the editor, remove *Count of records*, then click *Save and return*. + +. On the *[Logs] Web traffic* dashboard, set a search and filter. ++ +[%hardbreaks] +Search: `extension.keyword: ("gz" or "css" or "deb")` +Filter: `geo.src: CN` + +[float] +==== Create the drilldown + +Create a drilldown that opens the *Host Overview* dashboard from the *[Logs] Web traffic* dashboard. + +. Open the panel menu for the data table you created, then select *Create drilldown*. + +. Click *Go to dashboard*. + +.. Give the drilldown a name. For example, `My Drilldown`. + +.. From the *Choose a destination dashboard* dropdown, select *Host Overview*. + +.. To use the geo.src filter, KQL query, and time filter, select *Use filters and query from origin dashboard* and *Use date range from origin dashboard*. + +.. Click *Create drilldown*. + +. Save the dashboard. + +. In the data table panel, hover over a value, click *+*, then select `My Drilldown`. ++ +[role="screenshot"] +image::images/drilldown_on_panel.png[Drilldown on data table that navigates to another dashboard] + +[float] +[[url-drilldowns]] +=== Create URL drilldowns + +URL drilldowns enable you to navigate from a dashboard to external websites. Destination URLs can be dynamic, depending on the dashboard context or user interaction with a panel. To create URL drilldowns, you add <> to a URL template, which configures the behavior of the drilldown. + +[role="screenshot"] +image:images/url_drilldown_go_to_github.gif[Drilldown on pie chart that navigates to Github] + +Some panels support multiple interactions, also known as triggers. +The <> you use to create a <> depends on the trigger you choose. URL drilldowns support these types of triggers: + +* *Single click* — A single data point in the panel. + +* *Range selection* — A range of values in a panel. + +For example, *Single click* has `{{event.value}}` and *Range selection* has `{{event.from}}` and `{{event.to}}`. + +The panels you create using the following editors support dashboard drilldowns: + +* *Lens* +* *Maps* +* *TSVB* +* *Aggregation-based* area chart, data table, heat map, horitizontal bar chart, line chart, pie chart, tag cloud, and vertical bar chart + +[float] +==== Create a URL drilldown + +For example, if you have a dashboard that shows data from a Github repository, you can create a URL drilldown that opens Github from the dashboard panel. + +. Add the *Sample web logs* data. + +. Open the *[Logs] Web traffic* dashboard. + +. In the toolbar, click *Edit*. + +. Open the *[Logs] Visitors by OS* panel menu, then select *Create drilldown*. + +. Click *Go to URL*. + +.. Give the drilldown a name. For example, `Show on Github`. + +.. For the *Trigger*, select *Single click*. + +.. To navigate to the {kib} repository Github issues, enter the following in the *Enter URL* field: ++ +[source, bash] +---- +https://github.com/elastic/kibana/issues?q=is:issue+is:open+{{event.value}} +---- ++ +{kib} substitutes `{{event.value}}` with a value associated with the selected pie slice. + +.. Click *Create drilldown*. + +. Save the dashboard. + +. On the *[Logs] Visitors by OS* panel, click any chart slice, then select *Show on Github*. ++ +[role="screenshot"] +image:images/url_drilldown_popup.png[URL drilldown popup] + +. In the list of {kib} repository issues, verify that the slice value appears. ++ +[role="screenshot"] +image:images/url_drilldown_github.png[Github] + +[float] +[[manage-drilldowns]] +=== Manage drilldowns + +Make changes to your drilldowns, make a copy of your drilldowns for another panel, and delete drilldowns. + +. Open the panel menu that includes the drilldown, then click *Manage drilldowns*. + +. On the *Manage* tab, use the following options: + +* To change drilldowns, click *Edit* next to the drilldown you want to change, make your changes, then click *Save*. + +* To make a copy, click *Copy* next to the drilldown you want to change, enter the drilldown name, then click *Create drilldown*. + +* To delete a drilldown, select the drilldown you want to delete, then click *Delete*. + +include::url-drilldown.asciidoc[] diff --git a/docs/user/dashboard/tsvb.asciidoc b/docs/user/dashboard/tsvb.asciidoc index 93ee3627bd8a0..9320b062a8ba9 100644 --- a/docs/user/dashboard/tsvb.asciidoc +++ b/docs/user/dashboard/tsvb.asciidoc @@ -30,6 +30,29 @@ By default, *TSVB* drops the last bucket because the time filter intersects the .. In the *Panel filter* field, enter <> to view specific documents. +[float] +[[tsvb-index-pattern-mode]] +==== Index pattern mode +Create *TSVB* visualizations with {kib} index patterns. + +IMPORTANT: Creating *TSVB* visualizations with an {es} index string is deprecated and will be removed in a future release. +It is the default one for new visualizations but it can also be switched for the old implementations: + +. Click *Panel options*, then click the gear icon to open the *Index pattern selection mode* options. +. Select *Use only Kibana index patterns*. +. Reselect the index pattern from the dropdown, then select the *Time field*. + +image::images/tsvb_index_pattern_selection_mode.png[Change index pattern selection mode action] + +The index pattern mode unlocks many new features, such as: +* Runtime fields + +* URL drilldowns + +* Interactive filters for time series visualizations + +* Better performance + [float] [[configure-the-data-series]] ==== Configure the series @@ -177,4 +200,4 @@ To group with multiple fields, create runtime fields in the index pattern you ar [role="screenshot"] image::images/tsvb_group_by_multiple_fields.png[Group by multiple fields] -. Create a new TSVB visualization and group by this field. \ No newline at end of file +. Create a new TSVB visualization and group by this field. diff --git a/docs/user/production-considerations/task-manager-troubleshooting.asciidoc b/docs/user/production-considerations/task-manager-troubleshooting.asciidoc index 363562d4cd193..98201087b9aae 100644 --- a/docs/user/production-considerations/task-manager-troubleshooting.asciidoc +++ b/docs/user/production-considerations/task-manager-troubleshooting.asciidoc @@ -248,7 +248,7 @@ The API returns the following: "overdue": 10, "overdue_non_recurring": 10, "estimated_schedule_density": [0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 3, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0], - "capacity_requirments": { + "capacity_requirements": { "per_minute": 6, "per_hour": 28, "per_day": 2 @@ -737,7 +737,7 @@ Evaluating the preceding health stats in the previous example, you see the follo 0, 3, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0 ], - "capacity_requirments": { # <10> + "capacity_requirements": { # <10> "per_minute": 14, "per_hour": 240, "per_day": 0 @@ -819,7 +819,7 @@ Suppose the output of `stats.workload.value` looked something like this: 0, 31, 0, 12, 16, 31, 0, 10, 0, 10, 3, 22, 0, 10, 0, 2, 10, 10, 1, 0 ], - "capacity_requirments": { + "capacity_requirements": { "per_minute": 329, # <4> "per_hour": 4272, # <5> "per_day": 61 # <6> diff --git a/docs/user/security/authorization/index.asciidoc b/docs/user/security/authorization/index.asciidoc index c62f137f98528..523a90bdf07ce 100644 --- a/docs/user/security/authorization/index.asciidoc +++ b/docs/user/security/authorization/index.asciidoc @@ -6,7 +6,21 @@ The Elastic Stack comes with the `kibana_admin` {ref}/built-in-roles.html[built- When you assign a user multiple roles, the user receives a union of the roles’ privileges. Therefore, assigning the `kibana_admin` role in addition to a custom role that grants {kib} privileges is ineffective because `kibana_admin` has access to all the features in all spaces. -NOTE: When running multiple tenants of {kib} by changing the `kibana.index` in your `kibana.yml`, you cannot use `kibana_admin` to grant access. You must create custom roles that authorize the user for that specific tenant. Although multi-tenant installations are supported, the recommended approach to securing access to {kib} segments is to grant users access to specific spaces. +[[xpack-security-multiple-tenants]] +==== Supporting multiple tenants + +There are two approaches to supporting multi-tenancy in {kib}: + +1. *Recommended:* Create a space and a limited role for each tenant, and configure each user with the appropriate role. See +<> for more details. +2. deprecated:[7.13.0,"In 8.0 and later, the `kibana.index` setting will no longer be supported."] Set up separate {kib} instances to work +with a single {es} cluster by changing the `kibana.index` setting in your `kibana.yml` file. ++ +NOTE: When using multiple {kib} instances this way, you cannot use the `kibana_admin` role to grant access. You must create custom roles +that authorize the user for each specific instance. + +Whichever approach you use, be careful when granting cluster privileges and index privileges. Both of these approaches share the same {es} +cluster, and {kib} spaces do not prevent you from granting users of two different tenants access to the same index. [role="xpack"] [[xpack-kibana-role-management]] diff --git a/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc b/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc index 63b83712e3e6e..199f138347fa0 100644 --- a/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc +++ b/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc @@ -11,7 +11,7 @@ This guide introduces you to three of {kib}'s security features: spaces, roles, [float] === Spaces -Do you have multiple teams using {kib}? Do you want a “playground” to experiment with new visualizations or alerts? If so, then <> can help. +Do you have multiple teams or tenants using {kib}? Do you want a “playground” to experiment with new visualizations or alerts? If so, then <> can help. Think of a space as another instance of {kib}. A space allows you to organize your <>, <>, <>, and much more into their own categories. For example, you might have a Marketing space for your marketeers to track the results of their campaigns, and an Engineering space for your developers to {apm-get-started-ref}/overview.html[monitor application performance]. diff --git a/examples/expressions_explorer/public/run_expressions.tsx b/examples/expressions_explorer/public/run_expressions.tsx index 05749a0e89735..a635fab7ec8ae 100644 --- a/examples/expressions_explorer/public/run_expressions.tsx +++ b/examples/expressions_explorer/public/run_expressions.tsx @@ -7,6 +7,7 @@ */ import React, { useState, useEffect, useMemo } from 'react'; +import { pluck } from 'rxjs/operators'; import { EuiCodeBlock, EuiFlexItem, @@ -35,7 +36,7 @@ interface Props { export function RunExpressionsExample({ expressions, inspector }: Props) { const [expression, updateExpression] = useState('markdown "## expressions explorer"'); - const [result, updateResult] = useState({}); + const [result, updateResult] = useState({}); const expressionChanged = (value: string) => { updateExpression(value); @@ -49,17 +50,13 @@ export function RunExpressionsExample({ expressions, inspector }: Props) { ); useEffect(() => { - const runExpression = async () => { - const execution = expressions.execute(expression, null, { - debug: true, - inspectorAdapters, - }); + const execution = expressions.execute(expression, null, { + debug: true, + inspectorAdapters, + }); + const subscription = execution.getData().pipe(pluck('result')).subscribe(updateResult); - const data: any = await execution.getData(); - updateResult(data); - }; - - runExpression(); + return () => subscription.unsubscribe(); }, [expression, expressions, inspectorAdapters]); return ( diff --git a/package.json b/package.json index 1cc379fb807d0..de7df7fea3d8d 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "**/underscore": "^1.13.1" }, "engines": { - "node": "14.17.0", + "node": "14.17.2", "yarn": "^1.21.1" }, "dependencies": { diff --git a/packages/kbn-i18n/GUIDELINE.md b/packages/kbn-i18n/GUIDELINE.md index 437e73bb27019..806e799bd1106 100644 --- a/packages/kbn-i18n/GUIDELINE.md +++ b/packages/kbn-i18n/GUIDELINE.md @@ -19,6 +19,7 @@ Ids should end with: - ErrorMessage (if it's an error message), - LinkText (if it's `` tag), - ToggleSwitch and etc. +- `.markdown` (if it's markdown) There is one more complex case, when we have to divide a single expression into different labels. @@ -110,7 +111,7 @@ Currently, we support the following AngluarJS `i18n` tools, but they will be rem ### Naming convention The message ids chosen for message keys should always be descriptive of the string, and its role in the interface (button label, title, etc.). Think of them as long variable names. When you have to change a message id, adding a progressive number to the existing key should always be used as a last resort. -Here's a rule of id maning: +Here's a rule of id naming: `{plugin}.{area}.[{sub-area}].{element}` @@ -138,6 +139,7 @@ Here's a rule of id maning: 'kbn.management.createIndexPattern.includeSystemIndicesToggleSwitch' 'kbn.management.editIndexPattern.wrongTypeErrorMessage' 'kbn.management.editIndexPattern.scripted.table.nameDescription' + 'xpack.lens.formulaDocumentation.filterRatioDescription.markdown' ``` - For complex messages, which are divided into several parts, use the following approach: @@ -192,6 +194,7 @@ Each message id should end with a type of the message. | tooltip | `kbn.management.editIndexPattern.removeTooltip` | | error message | `kbn.management.createIndexPattern.step.invalidCharactersErrorMessage` | | toggleSwitch | `kbn.management.createIndexPattern.includeSystemIndicesToggleSwitch` | +| markdown | `xpack.lens.formulaDocumentation.filterRatioDescription.markdown` | For example: @@ -281,6 +284,27 @@ For example: /> ``` +- for markdown + ```js + import { Markdown } from '@elastic/eui'; + + + ``` + ### Variety of `values` - Variables @@ -372,6 +396,82 @@ Here is an example of message translation depending on a plural category: When `conflictFieldsLength` equals 1, the result string will be `"A field is defined as several types (string, integer, etc) across the indices that match this pattern."`. In cases when `conflictFieldsLength` has value of 2 or more, the result string - `"2 fields are defined as several types (string, integer, etc) across the indices that match this pattern."`. +### Text with markdown + +There is some support for using markdown and you can use any of the following syntax: + +#### Headers + +```md +# This is an

tag +## This is an

tag +###### This is an

tag +``` + +#### Emphasis + +```md +*This text will be italic* +_This will also be italic_ + +**This text will be bold** +__This will also be bold__ + +_You **can** combine them_ +``` + +#### Lists + ##### Unordered + +```md +* Item 1 +* Item 2 + * Item 2a + * Item 2b +``` + ##### Ordered + +```md +1. Item 1 +1. Item 2 +1. Item 3 + 1. Item 3a + 1. Item 3b +``` +#### Images + +```md +![Github Logo](/images/logo.png) +Format: ![Alt Text](url) +``` + +#### Links + +```md +http://github.com - automatic! +[GitHub](http://github.com) +``` + +#### Blockquotes + +```md +As Kanye West said: + +> We're living the future so +> the present is our past. +``` +#### Code Blocks + +```md +var a = 13; +``` + +#### Inline code + +```md +I think you should use an +`` element here instead +``` ### Splitting Splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. @@ -385,6 +485,12 @@ Splitting sentences into several keys often inadvertently presumes a grammar, a If this group of sentences is separated it’s possible that the context of the `'it'` in `'close it'` will be lost. +### Large paragraphs + +Try to avoid using large paragraphs of text. They are difficult to maintain and often need small changes when the information becomes out of date. + +If you have no other choice, you can split paragraphs into a _few_ i18n chunks. Chunks should be split at logical points to ensure they contain enough context to be intelligible on their own. + ### Unit tests #### How to test `FormattedMessage` and `i18n.translate()` components. diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index c6960621359c7..6627b644daec7 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -99,7 +99,7 @@ pageLoadAssetSize: watcher: 43598 runtimeFields: 41752 stackAlerts: 29684 - presentationUtil: 49767 + presentationUtil: 94301 spacesOss: 18817 indexPatternFieldEditor: 90489 osquery: 107090 @@ -110,4 +110,5 @@ pageLoadAssetSize: timelines: 230410 screenshotMode: 17856 visTypePie: 35583 + expressionRevealImage: 25675 cases: 144442 diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts index 9ab5480b809bc..6bb714e913838 100644 --- a/src/core/public/doc_links/doc_links_service.ts +++ b/src/core/public/doc_links/doc_links_service.ts @@ -263,6 +263,7 @@ export class DocLinksService { lensPanels: `${KIBANA_DOCS}lens.html`, maps: `${ELASTIC_WEBSITE_URL}maps`, vega: `${KIBANA_DOCS}vega.html`, + tsvbIndexPatternMode: `${KIBANA_DOCS}tsvb.html#tsvb-index-pattern-mode`, }, observability: { guide: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/index.html`, diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts index e0f0432c61463..6fc0841551fad 100644 --- a/src/dev/storybook/aliases.ts +++ b/src/dev/storybook/aliases.ts @@ -17,6 +17,7 @@ export const storybookAliases = { dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook', data_enhanced: 'x-pack/plugins/data_enhanced/.storybook', embeddable: 'src/plugins/embeddable/.storybook', + expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook', infra: 'x-pack/plugins/infra/.storybook', security_solution: 'x-pack/plugins/security_solution/.storybook', ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook', diff --git a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss index 139230fbdb66a..9ef123fa1a60f 100644 --- a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss @@ -1,4 +1,5 @@ .dscSidebar { + overflow: hidden; margin: 0 !important; flex-grow: 1; padding-left: $euiSize; diff --git a/src/plugins/expression_reveal_image/.i18nrc.json b/src/plugins/expression_reveal_image/.i18nrc.json new file mode 100755 index 0000000000000..5b073e4374519 --- /dev/null +++ b/src/plugins/expression_reveal_image/.i18nrc.json @@ -0,0 +1,7 @@ +{ + "prefix": "expressionRevealImage", + "paths": { + "expressionRevealImage": "." + }, + "translations": ["translations/ja-JP.json"] +} diff --git a/src/plugins/expression_reveal_image/.storybook/main.js b/src/plugins/expression_reveal_image/.storybook/main.js new file mode 100644 index 0000000000000..742239e638b8a --- /dev/null +++ b/src/plugins/expression_reveal_image/.storybook/main.js @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +// eslint-disable-next-line import/no-commonjs +module.exports = require('@kbn/storybook').defaultConfig; diff --git a/src/plugins/expression_reveal_image/README.md b/src/plugins/expression_reveal_image/README.md new file mode 100755 index 0000000000000..21c27a6eee05b --- /dev/null +++ b/src/plugins/expression_reveal_image/README.md @@ -0,0 +1,9 @@ +# expressionRevealImage + +Expression Reveal Image plugin adds a `revealImage` function to the expression plugin and an associated renderer. The renderer will display the given percentage of a given image. + +--- + +## Development + +See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment. diff --git a/src/plugins/expression_reveal_image/common/constants.ts b/src/plugins/expression_reveal_image/common/constants.ts new file mode 100644 index 0000000000000..68ac53171ee7f --- /dev/null +++ b/src/plugins/expression_reveal_image/common/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ +export const PLUGIN_ID = 'expressionRevealImage'; +export const PLUGIN_NAME = 'expressionRevealImage'; diff --git a/src/plugins/expression_reveal_image/common/expression_functions/index.ts b/src/plugins/expression_reveal_image/common/expression_functions/index.ts new file mode 100644 index 0000000000000..dba24e8a0cb0a --- /dev/null +++ b/src/plugins/expression_reveal_image/common/expression_functions/index.ts @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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 { revealImageFunction } from './reveal_image_function'; + +export const functions = [revealImageFunction]; + +export { revealImageFunction }; diff --git a/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts new file mode 100644 index 0000000000000..633a132fea5e3 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts @@ -0,0 +1,168 @@ +/* + * 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 { + functionWrapper, + elasticOutline, + elasticLogo, +} from '../../../presentation_util/common/lib'; +import { getFunctionErrors } from '../i18n'; +import { revealImageFunction } from './reveal_image_function'; +import { Origin } from '../types'; +import { ExecutionContext } from 'src/plugins/expressions'; + +const errors = getFunctionErrors().revealImage; + +describe('revealImageFunction', () => { + const fn = functionWrapper(revealImageFunction); + + it('returns a render as revealImage', () => { + const result = fn( + 0.5, + { + image: null, + emptyImage: null, + origin: Origin.BOTTOM, + }, + {} as ExecutionContext + ); + expect(result).toHaveProperty('type', 'render'); + expect(result).toHaveProperty('as', 'revealImage'); + }); + + describe('context', () => { + it('throws when context is not a number between 0 and 1', () => { + expect(() => { + fn( + 10, + { + image: elasticLogo, + emptyImage: elasticOutline, + origin: Origin.TOP, + }, + {} as ExecutionContext + ); + }).toThrow(new RegExp(errors.invalidPercent(10).message)); + + expect(() => { + fn( + -0.1, + { + image: elasticLogo, + emptyImage: elasticOutline, + origin: Origin.TOP, + }, + {} as ExecutionContext + ); + }).toThrow(new RegExp(errors.invalidPercent(-0.1).message)); + }); + }); + + describe('args', () => { + describe('image', () => { + it('sets the image', () => { + const result = fn( + 0.89, + { + emptyImage: null, + origin: Origin.TOP, + image: elasticLogo, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('image', elasticLogo); + }); + + it('defaults to the Elastic outline logo', () => { + const result = fn( + 0.89, + { + emptyImage: null, + origin: Origin.TOP, + image: null, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('image', elasticOutline); + }); + }); + + describe('emptyImage', () => { + it('sets the background image', () => { + const result = fn( + 0, + { + emptyImage: elasticLogo, + origin: Origin.TOP, + image: null, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('emptyImage', elasticLogo); + }); + + it('sets emptyImage to null', () => { + const result = fn( + 0, + { + emptyImage: null, + origin: Origin.TOP, + image: null, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('emptyImage', null); + }); + }); + + describe('origin', () => { + it('sets which side to start the reveal from', () => { + let result = fn( + 1, + { + emptyImage: null, + origin: Origin.TOP, + image: null, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('origin', 'top'); + result = fn( + 1, + { + emptyImage: null, + origin: Origin.LEFT, + image: null, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('origin', 'left'); + result = fn( + 1, + { + emptyImage: null, + origin: Origin.BOTTOM, + image: null, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('origin', 'bottom'); + result = fn( + 1, + { + emptyImage: null, + origin: Origin.RIGHT, + image: null, + }, + {} as ExecutionContext + ).value; + expect(result).toHaveProperty('origin', 'right'); + }); + }); + }); +}); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts similarity index 59% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts rename to src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts index 91d70609ab708..33e61e85f9531 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts +++ b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts @@ -1,41 +1,16 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 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 { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions'; -import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl'; -import { elasticOutline } from '../../lib/elastic_outline'; -import { getFunctionHelp, getFunctionErrors } from '../../../i18n'; +import { resolveWithMissingImage, elasticOutline } from '../../../presentation_util/common/lib'; +import { getFunctionHelp, getFunctionErrors } from '../i18n'; +import { ExpressionRevealImageFunction, Origin } from '../types'; -export enum Origin { - TOP = 'top', - LEFT = 'left', - BOTTOM = 'bottom', - RIGHT = 'right', -} - -interface Arguments { - image: string | null; - emptyImage: string | null; - origin: Origin; -} - -export interface Output { - image: string; - emptyImage: string; - origin: Origin; - percent: number; -} - -export function revealImage(): ExpressionFunctionDefinition< - 'revealImage', - number, - Arguments, - ExpressionValueRender -> { +export const revealImageFunction: ExpressionRevealImageFunction = () => { const { help, args: argHelp } = getFunctionHelp().revealImage; const errors = getFunctionErrors().revealImage; @@ -80,4 +55,4 @@ export function revealImage(): ExpressionFunctionDefinition< }; }, }; -} +}; diff --git a/src/plugins/expression_reveal_image/common/i18n/constants.ts b/src/plugins/expression_reveal_image/common/i18n/constants.ts new file mode 100644 index 0000000000000..413f376515a33 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/constants.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export const BASE64 = '`base64`'; +export const URL = 'URL'; diff --git a/x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/dict/reveal_image.ts similarity index 52% rename from x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts rename to src/plugins/expression_reveal_image/common/i18n/expression_functions/dict/reveal_image.ts index 374334824d61a..ccf9967bd6a65 100644 --- a/x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts +++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/dict/reveal_image.ts @@ -1,23 +1,21 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { i18n } from '@kbn/i18n'; -import { revealImage } from '../../../canvas_plugin_src/functions/common/revealImage'; -import { FunctionHelp } from '../function_help'; -import { FunctionFactory } from '../../../types'; import { Position } from '../../../types'; import { BASE64, URL } from '../../constants'; -export const help: FunctionHelp> = { - help: i18n.translate('xpack.canvas.functions.revealImageHelpText', { +export const help = { + help: i18n.translate('expressionRevealImage.functions.revealImageHelpText', { defaultMessage: 'Configures an image reveal element.', }), args: { - image: i18n.translate('xpack.canvas.functions.revealImage.args.imageHelpText', { + image: i18n.translate('expressionRevealImage.functions.revealImage.args.imageHelpText', { defaultMessage: 'The image to reveal. Provide an image asset as a {BASE64} data {URL}, ' + 'or pass in a sub-expression.', @@ -26,16 +24,19 @@ export const help: FunctionHelp> = { URL, }, }), - emptyImage: i18n.translate('xpack.canvas.functions.revealImage.args.emptyImageHelpText', { - defaultMessage: - 'An optional background image to reveal over. ' + - 'Provide an image asset as a `{BASE64}` data {URL}, or pass in a sub-expression.', - values: { - BASE64, - URL, - }, - }), - origin: i18n.translate('xpack.canvas.functions.revealImage.args.originHelpText', { + emptyImage: i18n.translate( + 'expressionRevealImage.functions.revealImage.args.emptyImageHelpText', + { + defaultMessage: + 'An optional background image to reveal over. ' + + 'Provide an image asset as a `{BASE64}` data {URL}, or pass in a sub-expression.', + values: { + BASE64, + URL, + }, + } + ), + origin: i18n.translate('expressionRevealImage.functions.revealImage.args.originHelpText', { defaultMessage: 'The position to start the image fill. For example, {list}, or {end}.', values: { list: Object.values(Position) @@ -50,7 +51,7 @@ export const help: FunctionHelp> = { export const errors = { invalidPercent: (percent: number) => new Error( - i18n.translate('xpack.canvas.functions.revealImage.invalidPercentErrorMessage', { + i18n.translate('expressionRevealImage.functions.revealImage.invalidPercentErrorMessage', { defaultMessage: "Invalid value: '{percent}'. Percentage must be between 0 and 1", values: { percent, diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_errors.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_errors.ts new file mode 100644 index 0000000000000..09cd26c9e620b --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_errors.ts @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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 { errors as revealImage } from './dict/reveal_image'; + +export const getFunctionErrors = () => ({ + revealImage, +}); diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_help.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_help.ts new file mode 100644 index 0000000000000..30e79b120771b --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_help.ts @@ -0,0 +1,21 @@ +/* + * 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 { help as revealImage } from './dict/reveal_image'; + +/** + * Help text for Canvas Functions should be properly localized. This function will + * return a dictionary of help strings, organized by `ExpressionFunctionDefinition` + * specification and then by available arguments within each `ExpressionFunctionDefinition`. + * + * This a function, rather than an object, to future-proof string initialization, + * if ever necessary. + */ +export const getFunctionHelp = () => ({ + revealImage, +}); diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_functions/index.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/index.ts new file mode 100644 index 0000000000000..3d36b123421f4 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './function_help'; +export * from './function_errors'; diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/index.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/index.ts new file mode 100644 index 0000000000000..4f70f9d30b74b --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export { strings as revealImage } from './reveal_image'; diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/reveal_image.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/reveal_image.ts new file mode 100644 index 0000000000000..a32fdbd4c0b50 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/reveal_image.ts @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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'; + +export const strings = { + getDisplayName: () => + i18n.translate('expressionRevealImage.renderer.revealImage.displayName', { + defaultMessage: 'Image reveal', + }), + getHelpDescription: () => + i18n.translate('expressionRevealImage.renderer.revealImage.helpDescription', { + defaultMessage: 'Reveal a percentage of an image to make a custom gauge-style chart', + }), +}; diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/index.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/index.ts new file mode 100644 index 0000000000000..7e637f240d15c --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './renderer_strings'; diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/renderer_strings.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/renderer_strings.ts new file mode 100644 index 0000000000000..b74230a2a5d76 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/renderer_strings.ts @@ -0,0 +1,21 @@ +/* + * 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 { revealImage } from './dict'; + +/** + * Help text for Canvas Functions should be properly localized. This function will + * return a dictionary of help strings, organized by `ExpressionFunctionDefinition` + * specification and then by available arguments within each `ExpressionFunctionDefinition`. + * + * This a function, rather than an object, to future-proof string initialization, + * if ever necessary. + */ +export const getRendererStrings = () => ({ + revealImage, +}); diff --git a/src/plugins/expression_reveal_image/common/i18n/index.ts b/src/plugins/expression_reveal_image/common/i18n/index.ts new file mode 100644 index 0000000000000..9c50bfab1305d --- /dev/null +++ b/src/plugins/expression_reveal_image/common/i18n/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './expression_functions'; +export * from './expression_renderers'; diff --git a/src/plugins/expression_reveal_image/common/index.ts b/src/plugins/expression_reveal_image/common/index.ts new file mode 100755 index 0000000000000..95503b36acdb6 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './constants'; +export * from './expression_functions'; diff --git a/src/plugins/expression_reveal_image/common/types/expression_functions.ts b/src/plugins/expression_reveal_image/common/types/expression_functions.ts new file mode 100644 index 0000000000000..ee291e204acfb --- /dev/null +++ b/src/plugins/expression_reveal_image/common/types/expression_functions.ts @@ -0,0 +1,42 @@ +/* + * 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 { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions'; + +export enum Origin { + TOP = 'top', + LEFT = 'left', + BOTTOM = 'bottom', + RIGHT = 'right', +} + +interface Arguments { + image: string | null; + emptyImage: string | null; + origin: Origin; +} + +export interface Output { + image: string; + emptyImage: string; + origin: Origin; + percent: number; +} + +export type ExpressionRevealImageFunction = () => ExpressionFunctionDefinition< + 'revealImage', + number, + Arguments, + ExpressionValueRender +>; + +export enum Position { + TOP = 'top', + BOTTOM = 'bottom', + LEFT = 'left', + RIGHT = 'right', +} diff --git a/src/plugins/expression_reveal_image/common/types/expression_renderers.ts b/src/plugins/expression_reveal_image/common/types/expression_renderers.ts new file mode 100644 index 0000000000000..77dacaefc1bd1 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/types/expression_renderers.ts @@ -0,0 +1,21 @@ +/* + * 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. + */ + +export type OriginString = 'bottom' | 'left' | 'top' | 'right'; + +export interface RevealImageRendererConfig { + percent: number; + origin?: OriginString; + image?: string; + emptyImage?: string; +} + +export interface NodeDimensions { + width: number; + height: number; +} diff --git a/src/plugins/expression_reveal_image/common/types/index.ts b/src/plugins/expression_reveal_image/common/types/index.ts new file mode 100644 index 0000000000000..ec934e7affe88 --- /dev/null +++ b/src/plugins/expression_reveal_image/common/types/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ +export * from './expression_functions'; +export * from './expression_renderers'; diff --git a/src/plugins/expression_reveal_image/jest.config.js b/src/plugins/expression_reveal_image/jest.config.js new file mode 100644 index 0000000000000..aac5fad293846 --- /dev/null +++ b/src/plugins/expression_reveal_image/jest.config.js @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +module.exports = { + preset: '@kbn/test', + rootDir: '../../..', + roots: ['/src/plugins/expression_reveal_image'], +}; diff --git a/src/plugins/expression_reveal_image/kibana.json b/src/plugins/expression_reveal_image/kibana.json new file mode 100755 index 0000000000000..9af9a5857dcfb --- /dev/null +++ b/src/plugins/expression_reveal_image/kibana.json @@ -0,0 +1,10 @@ +{ + "id": "expressionRevealImage", + "version": "1.0.0", + "kibanaVersion": "kibana", + "server": true, + "ui": true, + "requiredPlugins": ["expressions", "presentationUtil"], + "optionalPlugins": [], + "requiredBundles": [] +} diff --git a/src/plugins/expression_reveal_image/public/components/index.ts b/src/plugins/expression_reveal_image/public/components/index.ts new file mode 100644 index 0000000000000..23cb4d7a20cb8 --- /dev/null +++ b/src/plugins/expression_reveal_image/public/components/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './reveal_image_component'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss b/src/plugins/expression_reveal_image/public/components/reveal_image.scss similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss rename to src/plugins/expression_reveal_image/public/components/reveal_image.scss diff --git a/src/plugins/expression_reveal_image/public/components/reveal_image_component.tsx b/src/plugins/expression_reveal_image/public/components/reveal_image_component.tsx new file mode 100644 index 0000000000000..a9c24fca78d9b --- /dev/null +++ b/src/plugins/expression_reveal_image/public/components/reveal_image_component.tsx @@ -0,0 +1,136 @@ +/* + * 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 React, { useRef, useState, useEffect, useCallback } from 'react'; +import { useResizeObserver } from '@elastic/eui'; +import { IInterpreterRenderHandlers } from 'src/plugins/expressions'; +import { NodeDimensions, RevealImageRendererConfig, OriginString } from '../../common/types'; +import { isValidUrl, elasticOutline } from '../../../presentation_util/public'; +import './reveal_image.scss'; + +interface RevealImageComponentProps extends RevealImageRendererConfig { + onLoaded: IInterpreterRenderHandlers['done']; + parentNode: HTMLElement; +} + +interface ImageStyles { + width?: string; + height?: string; + clipPath?: string; +} + +interface AlignerStyles { + backgroundImage?: string; +} + +function RevealImageComponent({ + onLoaded, + parentNode, + percent, + origin, + image, + emptyImage, +}: RevealImageComponentProps) { + const [loaded, setLoaded] = useState(false); + const [dimensions, setDimensions] = useState({ + width: 1, + height: 1, + }); + + const imgRef = useRef(null); + + const parentNodeDimensions = useResizeObserver(parentNode); + + // modify the top-level container class + parentNode.className = 'revealImage'; + + // set up the overlay image + const updateImageView = useCallback(() => { + if (imgRef.current) { + setDimensions({ + height: imgRef.current.naturalHeight, + width: imgRef.current.naturalWidth, + }); + + setLoaded(true); + onLoaded(); + } + }, [imgRef, onLoaded]); + + useEffect(() => { + updateImageView(); + }, [parentNodeDimensions, updateImageView]); + + function getClipPath(percentParam: number, originParam: OriginString = 'bottom') { + const directions: Record = { bottom: 0, left: 1, top: 2, right: 3 }; + const values: Array = [0, 0, 0, 0]; + values[directions[originParam]] = `${100 - percentParam * 100}%`; + return `inset(${values.join(' ')})`; + } + + function getImageSizeStyle() { + const imgStyles: ImageStyles = {}; + + const imgDimensions = { + height: dimensions.height, + width: dimensions.width, + ratio: dimensions.height / dimensions.width, + }; + + const domNodeDimensions = { + width: parentNode.clientWidth, + height: parentNode.clientHeight, + ratio: parentNode.clientHeight / parentNode.clientWidth, + }; + + if (imgDimensions.ratio > domNodeDimensions.ratio) { + imgStyles.height = `${domNodeDimensions.height}px`; + imgStyles.width = 'initial'; + } else { + imgStyles.width = `${domNodeDimensions.width}px`; + imgStyles.height = 'initial'; + } + + return imgStyles; + } + + const imgSrc = isValidUrl(image ?? '') ? image : elasticOutline; + + const alignerStyles: AlignerStyles = {}; + + if (isValidUrl(emptyImage ?? '')) { + // only use empty image if one is provided + alignerStyles.backgroundImage = `url(${emptyImage})`; + } + + let imgStyles: ImageStyles = {}; + if (imgRef.current && loaded) imgStyles = getImageSizeStyle(); + + imgStyles.clipPath = getClipPath(percent, origin); + if (imgRef.current && loaded) { + imgRef.current.style.setProperty('-webkit-clip-path', getClipPath(percent, origin)); + } + + return ( +
+ +
+ ); +} + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { RevealImageComponent as default }; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/__snapshots__/reveal_image.stories.storyshot b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/__snapshots__/reveal_image.stories.storyshot rename to src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx new file mode 100644 index 0000000000000..bc70b3685e24e --- /dev/null +++ b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx @@ -0,0 +1,26 @@ +/* + * 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 React from 'react'; +import { storiesOf } from '@storybook/react'; +import { revealImageRenderer } from '../'; +import { elasticOutline, elasticLogo } from '../../../../presentation_util/public'; +import { Render } from '../../../../presentation_util/public/__stories__'; + +import { Origin } from '../../../common/types/expression_functions'; + +storiesOf('renderers/revealImage', module).add('default', () => { + const config = { + image: elasticLogo, + emptyImage: elasticOutline, + origin: Origin.LEFT, + percent: 0.45, + }; + + return ; +}); diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/index.ts b/src/plugins/expression_reveal_image/public/expression_renderers/index.ts new file mode 100644 index 0000000000000..433a81884f157 --- /dev/null +++ b/src/plugins/expression_reveal_image/public/expression_renderers/index.ts @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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 { revealImageRenderer } from './reveal_image_renderer'; + +export const renderers = [revealImageRenderer]; + +export { revealImageRenderer }; diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx b/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx new file mode 100644 index 0000000000000..4d84de3da994c --- /dev/null +++ b/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx @@ -0,0 +1,42 @@ +/* + * 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 React, { lazy } from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { I18nProvider } from '@kbn/i18n/react'; +import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions'; +import { withSuspense } from '../../../presentation_util/public'; +import { getRendererStrings } from '../../common/i18n'; +import { RevealImageRendererConfig } from '../../common/types'; + +const { revealImage: revealImageStrings } = getRendererStrings(); + +const LazyRevealImageComponent = lazy(() => import('../components/reveal_image_component')); +const RevealImageComponent = withSuspense(LazyRevealImageComponent, null); + +export const revealImageRenderer = (): ExpressionRenderDefinition => ({ + name: 'revealImage', + displayName: revealImageStrings.getDisplayName(), + help: revealImageStrings.getHelpDescription(), + reuseDomNode: true, + render: async ( + domNode: HTMLElement, + config: RevealImageRendererConfig, + handlers: IInterpreterRenderHandlers + ) => { + handlers.onDestroy(() => { + unmountComponentAtNode(domNode); + }); + + render( + + + , + domNode + ); + }, +}); diff --git a/src/plugins/expression_reveal_image/public/index.ts b/src/plugins/expression_reveal_image/public/index.ts new file mode 100755 index 0000000000000..00cb14e0fc064 --- /dev/null +++ b/src/plugins/expression_reveal_image/public/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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 { ExpressionRevealImagePlugin } from './plugin'; + +export type { ExpressionRevealImagePluginSetup, ExpressionRevealImagePluginStart } from './plugin'; + +export function plugin() { + return new ExpressionRevealImagePlugin(); +} + +export * from './expression_renderers'; diff --git a/src/plugins/expression_reveal_image/public/plugin.ts b/src/plugins/expression_reveal_image/public/plugin.ts new file mode 100755 index 0000000000000..5f6496a25f820 --- /dev/null +++ b/src/plugins/expression_reveal_image/public/plugin.ts @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { CoreSetup, CoreStart, Plugin } from '../../../core/public'; +import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public'; +import { revealImageRenderer } from './expression_renderers'; + +interface SetupDeps { + expressions: ExpressionsSetup; +} + +interface StartDeps { + expression: ExpressionsStart; +} + +export type ExpressionRevealImagePluginSetup = void; +export type ExpressionRevealImagePluginStart = void; + +export class ExpressionRevealImagePlugin + implements + Plugin< + ExpressionRevealImagePluginSetup, + ExpressionRevealImagePluginStart, + SetupDeps, + StartDeps + > { + public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionRevealImagePluginSetup { + expressions.registerRenderer(revealImageRenderer); + } + + public start(core: CoreStart): ExpressionRevealImagePluginStart {} + + public stop() {} +} diff --git a/src/plugins/expression_reveal_image/server/index.ts b/src/plugins/expression_reveal_image/server/index.ts new file mode 100644 index 0000000000000..b86c356974321 --- /dev/null +++ b/src/plugins/expression_reveal_image/server/index.ts @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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 { ExpressionRevealImagePlugin } from './plugin'; + +export type { ExpressionRevealImagePluginSetup, ExpressionRevealImagePluginStart } from './plugin'; + +export function plugin() { + return new ExpressionRevealImagePlugin(); +} diff --git a/src/plugins/expression_reveal_image/server/plugin.ts b/src/plugins/expression_reveal_image/server/plugin.ts new file mode 100644 index 0000000000000..446ef018eb7d3 --- /dev/null +++ b/src/plugins/expression_reveal_image/server/plugin.ts @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { CoreSetup, CoreStart, Plugin } from '../../../core/public'; +import { ExpressionsServerStart, ExpressionsServerSetup } from '../../expressions/server'; +import { revealImageFunction } from '../common'; + +interface SetupDeps { + expressions: ExpressionsServerSetup; +} + +interface StartDeps { + expression: ExpressionsServerStart; +} + +export type ExpressionRevealImagePluginSetup = void; +export type ExpressionRevealImagePluginStart = void; + +export class ExpressionRevealImagePlugin + implements + Plugin< + ExpressionRevealImagePluginSetup, + ExpressionRevealImagePluginStart, + SetupDeps, + StartDeps + > { + public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionRevealImagePluginSetup { + expressions.registerFunction(revealImageFunction); + } + + public start(core: CoreStart): ExpressionRevealImagePluginStart {} + + public stop() {} +} diff --git a/src/plugins/expression_reveal_image/tsconfig.json b/src/plugins/expression_reveal_image/tsconfig.json new file mode 100644 index 0000000000000..aa4562ec73576 --- /dev/null +++ b/src/plugins/expression_reveal_image/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "composite": true, + "outDir": "./target/types", + "emitDeclarationOnly": true, + "declaration": true, + "declarationMap": true, + "isolatedModules": true + }, + "include": [ + "common/**/*", + "public/**/*", + "server/**/*", + ], + "references": [ + { "path": "../../core/tsconfig.json" }, + { "path": "../presentation_util/tsconfig.json" }, + { "path": "../expressions/tsconfig.json" }, + ] +} diff --git a/src/plugins/expressions/common/execution/execution.abortion.test.ts b/src/plugins/expressions/common/execution/execution.abortion.test.ts index 514086e9b19ee..798558ba7ffb6 100644 --- a/src/plugins/expressions/common/execution/execution.abortion.test.ts +++ b/src/plugins/expressions/common/execution/execution.abortion.test.ts @@ -6,7 +6,6 @@ * Side Public License, v 1. */ -import { first } from 'rxjs/operators'; import { waitFor } from '@testing-library/react'; import { Execution } from './execution'; import { parseExpression } from '../ast'; @@ -40,9 +39,9 @@ describe('Execution abortion tests', () => { execution.start(); execution.cancel(); - const result = await execution.result.pipe(first()).toPromise(); + const result = await execution.result.toPromise(); - expect(result).toMatchObject({ + expect(result).toHaveProperty('result', { type: 'error', error: { message: 'The expression was aborted.', @@ -58,9 +57,9 @@ describe('Execution abortion tests', () => { jest.advanceTimersByTime(100); execution.cancel(); - const result = await execution.result.pipe(first()).toPromise(); + const result = await execution.result.toPromise(); - expect(result).toMatchObject({ + expect(result).toHaveProperty('result', { type: 'error', error: { message: 'The expression was aborted.', @@ -76,7 +75,7 @@ describe('Execution abortion tests', () => { execution.start(); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); execution.cancel(); @@ -136,7 +135,7 @@ describe('Execution abortion tests', () => { await waitFor(() => expect(started).toHaveBeenCalledTimes(1)); execution.cancel(); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toMatchObject({ type: 'error', error: { diff --git a/src/plugins/expressions/common/execution/execution.test.ts b/src/plugins/expressions/common/execution/execution.test.ts index feff425cc48ed..8c6f457105d42 100644 --- a/src/plugins/expressions/common/execution/execution.test.ts +++ b/src/plugins/expressions/common/execution/execution.test.ts @@ -7,7 +7,7 @@ */ import { of } from 'rxjs'; -import { first, scan } from 'rxjs/operators'; +import { scan } from 'rxjs/operators'; import { TestScheduler } from 'rxjs/testing'; import { Execution } from './execution'; import { parseExpression, ExpressionAstExpression } from '../ast'; @@ -45,7 +45,7 @@ const run = async ( ) => { const execution = createExecution(expression, context); execution.start(input); - return await execution.result.pipe(first()).toPromise(); + return await execution.result.toPromise(); }; let testScheduler: TestScheduler; @@ -84,7 +84,7 @@ describe('Execution', () => { /* eslint-enable no-console */ execution.start(123); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toBe(123); expect(spy).toHaveBeenCalledTimes(1); @@ -102,7 +102,7 @@ describe('Execution', () => { value: -1, }); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -117,7 +117,7 @@ describe('Execution', () => { value: 0, }); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -131,7 +131,7 @@ describe('Execution', () => { // Below 1 is cast to { type: 'num', value: 1 }. execution.start(1); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -143,7 +143,7 @@ describe('Execution', () => { const execution = createExecution('add val=1'); execution.start(Promise.resolve(1)); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -155,7 +155,7 @@ describe('Execution', () => { const execution = createExecution('add val=1'); execution.start(of(1)); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -167,14 +167,14 @@ describe('Execution', () => { const execution = createExecution('add val=1'); testScheduler.run(({ cold, expectObservable }) => { - const input = cold(' -a--b-c-', { a: 1, b: 2, c: 3 }); + const input = cold(' -a--b-c|', { a: 1, b: 2, c: 3 }); const subscription = ' ---^---!'; - const expected = ' ---ab-c-'; + const expected = ' ---ab-c|'; expectObservable(execution.start(input), subscription).toBe(expected, { - a: { type: 'num', value: 2 }, - b: { type: 'num', value: 3 }, - c: { type: 'num', value: 4 }, + a: { partial: false, result: { type: 'num', value: 2 } }, + b: { partial: false, result: { type: 'num', value: 3 } }, + c: { partial: false, result: { type: 'num', value: 4 } }, }); }); }); @@ -187,21 +187,21 @@ describe('Execution', () => { const expected = ' -a-#'; expectObservable(execution.start(input)).toBe(expected, { - a: { type: 'num', value: 2 }, + a: { partial: false, result: { type: 'num', value: 2 } }, }); }); }); - test('does not complete when input completes', () => { + test('completes when input completes', () => { const execution = createExecution('add val=1'); testScheduler.run(({ cold, expectObservable }) => { const input = cold('-a-b|', { a: 1, b: 2 }); - const expected = ' -a-b-'; + const expected = ' -a-b|'; expectObservable(execution.start(input)).toBe(expected, { - a: { type: 'num', value: 2 }, - b: { type: 'num', value: 3 }, + a: expect.objectContaining({ result: { type: 'num', value: 2 } }), + b: expect.objectContaining({ result: { type: 'num', value: 3 } }), }); }); }); @@ -216,9 +216,9 @@ describe('Execution', () => { const input = items.pipe(scan((result, value) => [...result, value], new Array())); expectObservable(execution.start(input), subscription).toBe(expected, { - a: { type: 'num', value: 1 }, - b: { type: 'num', value: 3 }, - c: { type: 'num', value: 6 }, + a: { partial: false, result: { type: 'num', value: 1 } }, + b: { partial: false, result: { type: 'num', value: 3 } }, + c: { partial: false, result: { type: 'num', value: 6 } }, }); }); }); @@ -263,44 +263,51 @@ describe('Execution', () => { describe('execution context', () => { test('context.variables is an object', async () => { const { result } = (await run('introspectContext key="variables"')) as any; - expect(typeof result).toBe('object'); + + expect(result).toHaveProperty('result', expect.any(Object)); }); test('context.types is an object', async () => { const { result } = (await run('introspectContext key="types"')) as any; - expect(typeof result).toBe('object'); + + expect(result).toHaveProperty('result', expect.any(Object)); }); test('context.abortSignal is an object', async () => { const { result } = (await run('introspectContext key="abortSignal"')) as any; - expect(typeof result).toBe('object'); + + expect(result).toHaveProperty('result', expect.any(Object)); }); test('context.inspectorAdapters is an object', async () => { const { result } = (await run('introspectContext key="inspectorAdapters"')) as any; - expect(typeof result).toBe('object'); + + expect(result).toHaveProperty('result', expect.any(Object)); }); test('context.getKibanaRequest is a function if provided', async () => { const { result } = (await run('introspectContext key="getKibanaRequest"', { kibanaRequest: {}, })) as any; - expect(typeof result).toBe('function'); + + expect(result).toHaveProperty('result', expect.any(Function)); }); test('context.getKibanaRequest is undefined if not provided', async () => { const { result } = (await run('introspectContext key="getKibanaRequest"')) as any; - expect(typeof result).toBe('undefined'); + + expect(result).toHaveProperty('result', undefined); }); test('unknown context key is undefined', async () => { const { result } = (await run('introspectContext key="foo"')) as any; - expect(typeof result).toBe('undefined'); + + expect(result).toHaveProperty('result', undefined); }); test('can set context variables', async () => { const variables = { foo: 'bar' }; - const result = await run('var name="foo"', { variables }); + const { result } = await run('var name="foo"', { variables }); expect(result).toBe('bar'); }); }); @@ -308,10 +315,13 @@ describe('Execution', () => { describe('inspector adapters', () => { test('by default, "tables" and "requests" inspector adapters are available', async () => { const { result } = (await run('introspectContext key="inspectorAdapters"')) as any; - expect(result).toMatchObject({ - tables: expect.any(Object), - requests: expect.any(Object), - }); + expect(result).toHaveProperty( + 'result', + expect.objectContaining({ + tables: expect.any(Object), + requests: expect.any(Object), + }) + ); }); test('can set custom inspector adapters', async () => { @@ -319,7 +329,7 @@ describe('Execution', () => { const { result } = (await run('introspectContext key="inspectorAdapters"', { inspectorAdapters, })) as any; - expect(result).toBe(inspectorAdapters); + expect(result).toHaveProperty('result', inspectorAdapters); }); test('can access custom inspector adapters on Execution object', async () => { @@ -335,8 +345,7 @@ describe('Execution', () => { test('context has abortSignal object', async () => { const { result } = (await run('introspectContext key="abortSignal"')) as any; - expect(typeof result).toBe('object'); - expect((result as AbortSignal).aborted).toBe(false); + expect(result).toHaveProperty('result.aborted', false); }); }); @@ -348,7 +357,7 @@ describe('Execution', () => { value: 0, }); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -357,8 +366,8 @@ describe('Execution', () => { }); test('can execute async functions', async () => { - const res = await run('sleep 10 | sleep 10'); - expect(res).toBe(null); + const { result } = await run('sleep 10 | sleep 10'); + expect(result).toBe(null); }); test('result is undefined until execution completes', async () => { @@ -374,7 +383,7 @@ describe('Execution', () => { jest.advanceTimersByTime(10); await new Promise(process.nextTick); - expect(execution.state.get().result).toBe(null); + expect(execution.state.get().result).toHaveProperty('result', null); jest.useRealTimers(); }); @@ -382,7 +391,7 @@ describe('Execution', () => { test('handles functions returning observables', () => { testScheduler.run(({ cold, expectObservable }) => { const arg = cold(' -a-b-c|', { a: 1, b: 2, c: 3 }); - const expected = ' -a-b-c-'; + const expected = ' -a-b-c|'; const observable: ExpressionFunctionDefinition<'observable', any, {}, any> = { name: 'observable', args: {}, @@ -394,14 +403,18 @@ describe('Execution', () => { const result = executor.run('observable', null, {}); - expectObservable(result).toBe(expected, { a: 1, b: 2, c: 3 }); + expectObservable(result).toBe(expected, { + a: { result: 1, partial: true }, + b: { result: 2, partial: true }, + c: { result: 3, partial: false }, + }); }); }); }); describe('when function throws', () => { test('error is reported in output object', async () => { - const result = await run('error "foobar"'); + const { result } = await run('error "foobar"'); expect(result).toMatchObject({ type: 'error', @@ -409,7 +422,7 @@ describe('Execution', () => { }); test('error message is prefixed with function name', async () => { - const result = await run('error "foobar"'); + const { result } = await run('error "foobar"'); expect(result).toMatchObject({ error: { @@ -419,7 +432,7 @@ describe('Execution', () => { }); test('returns error of the first function that throws', async () => { - const result = await run('error "foo" | error "bar"'); + const { result } = await run('error "foo" | error "bar"'); expect(result).toMatchObject({ error: { @@ -432,15 +445,18 @@ describe('Execution', () => { const execution = await createExecution('error "foo"'); execution.start(null); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toMatchObject({ type: 'error', }); expect(execution.state.get().state).toBe('result'); - expect(execution.state.get().result).toMatchObject({ - type: 'error', - }); + expect(execution.state.get().result).toHaveProperty( + 'result', + expect.objectContaining({ + type: 'error', + }) + ); }); test('does not execute remaining functions in pipeline', async () => { @@ -453,7 +469,7 @@ describe('Execution', () => { const executor = createUnitTestExecutor(); executor.registerFunction(spy); - await executor.run('error "..." | spy', null).pipe(first()).toPromise(); + await executor.run('error "..." | spy', null).toPromise(); expect(spy.fn).toHaveBeenCalledTimes(0); }); @@ -483,21 +499,21 @@ describe('Execution', () => { test('execution state is "result" when execution successfully completes', async () => { const execution = createExecution('sleep 1'); execution.start(null); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); expect(execution.state.get().state).toBe('result'); }); test('execution state is "result" when execution successfully completes - 2', async () => { const execution = createExecution('var foo'); execution.start(null); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); expect(execution.state.get().state).toBe('result'); }); }); describe('sub-expressions', () => { test('executes sub-expressions', async () => { - const result = await run('add val={add 5 | access "value"}', {}, null); + const { result } = await run('add val={add 5 | access "value"}', {}, null); expect(result).toMatchObject({ type: 'num', @@ -506,7 +522,7 @@ describe('Execution', () => { }); test('can use global variables', async () => { - const result = await run( + const { result } = await run( 'add val={var foo}', { variables: { @@ -523,7 +539,7 @@ describe('Execution', () => { }); test('can modify global variables', async () => { - const result = await run( + const { result } = await run( 'add val={var_set name=foo value=66 | var bar} | var foo', { variables: { @@ -547,18 +563,20 @@ describe('Execution', () => { const executor = createUnitTestExecutor(); executor.registerFunction(observable); - expect( - executor.run('add val={observable}', 1, {}).pipe(first()).toPromise() - ).resolves.toEqual({ - type: 'num', - value: 2, - }); + expect(executor.run('add val={observable}', 1, {}).toPromise()).resolves.toEqual( + expect.objectContaining({ + result: { + type: 'num', + value: 2, + }, + }) + ); }); test('supports observables in arguments emitting multiple values', () => { testScheduler.run(({ cold, expectObservable }) => { - const arg = cold('-a-b-c-', { a: 1, b: 2, c: 3 }); - const expected = '-a-b-c-'; + const arg = cold('-a-b-c|', { a: 1, b: 2, c: 3 }); + const expected = '-a-b-c|'; const observable = { name: 'observable', args: {}, @@ -571,18 +589,18 @@ describe('Execution', () => { const result = executor.run('add val={observable}', 1, {}); expectObservable(result).toBe(expected, { - a: { type: 'num', value: 2 }, - b: { type: 'num', value: 3 }, - c: { type: 'num', value: 4 }, + a: { partial: true, result: { type: 'num', value: 2 } }, + b: { partial: true, result: { type: 'num', value: 3 } }, + c: { partial: false, result: { type: 'num', value: 4 } }, }); }); }); test('combines multiple observables in arguments', () => { testScheduler.run(({ cold, expectObservable }) => { - const arg1 = cold('--ab-c-', { a: 0, b: 2, c: 4 }); - const arg2 = cold('-a--bc-', { a: 1, b: 3, c: 5 }); - const expected = ' --abc(de)-'; + const arg1 = cold('--ab-c---|', { a: 0, b: 2, c: 4 }); + const arg2 = cold('-a--bc---|', { a: 1, b: 3, c: 5 }); + const expected = ' --abc(de)|'; const observable1 = { name: 'observable1', args: {}, @@ -612,32 +630,11 @@ describe('Execution', () => { const result = executor.run('max val1={observable1} val2={observable2}', {}); expectObservable(result).toBe(expected, { - a: { type: 'num', value: 1 }, - b: { type: 'num', value: 2 }, - c: { type: 'num', value: 3 }, - d: { type: 'num', value: 4 }, - e: { type: 'num', value: 5 }, - }); - }); - }); - - test('does not complete when an argument completes', () => { - testScheduler.run(({ cold, expectObservable }) => { - const arg = cold('-a|', { a: 1 }); - const expected = '-a-'; - const observable = { - name: 'observable', - args: {}, - help: '', - fn: () => arg, - }; - const executor = createUnitTestExecutor(); - executor.registerFunction(observable); - - const result = executor.run('add val={observable}', 1, {}); - - expectObservable(result).toBe(expected, { - a: { type: 'num', value: 2 }, + a: { partial: true, result: { type: 'num', value: 1 } }, + b: { partial: true, result: { type: 'num', value: 2 } }, + c: { partial: true, result: { type: 'num', value: 3 } }, + d: { partial: true, result: { type: 'num', value: 4 } }, + e: { partial: false, result: { type: 'num', value: 5 } }, }); }); }); @@ -645,7 +642,7 @@ describe('Execution', () => { test('handles error in observable arguments', () => { testScheduler.run(({ cold, expectObservable }) => { const arg = cold('-a-#', { a: 1 }, new Error('some error')); - const expected = '-a-b'; + const expected = '-a-(b|)'; const observable = { name: 'observable', args: {}, @@ -658,13 +655,15 @@ describe('Execution', () => { const result = executor.run('add val={observable}', 1, {}); expectObservable(result).toBe(expected, { - a: { type: 'num', value: 2 }, - b: { - error: expect.objectContaining({ - message: '[add] > [observable] > some error', - }), - type: 'error', - }, + a: expect.objectContaining({ result: { type: 'num', value: 2 } }), + b: expect.objectContaining({ + result: { + error: expect.objectContaining({ + message: '[add] > [observable] > some error', + }), + type: 'error', + }, + }), }); }); }); @@ -685,7 +684,7 @@ describe('Execution', () => { }; const executor = createUnitTestExecutor(); executor.registerFunction(requiredArg); - const result = await executor.run('requiredArg', null, {}).pipe(first()).toPromise(); + const { result } = await executor.run('requiredArg', null, {}).toPromise(); expect(result).toMatchObject({ type: 'error', @@ -696,7 +695,7 @@ describe('Execution', () => { }); test('when required argument is missing and has alias, returns error', async () => { - const result = await run('var_set', {}); + const { result } = await run('var_set', {}); expect(result).toMatchObject({ type: 'error', @@ -711,7 +710,7 @@ describe('Execution', () => { test('can execute expression in debug mode', async () => { const execution = createExecution('add val=1 | add val=2 | add val=3', {}, true); execution.start(-1); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -726,7 +725,7 @@ describe('Execution', () => { true ); execution.start(0); - const result = await execution.result.pipe(first()).toPromise(); + const { result } = await execution.result.toPromise(); expect(result).toEqual({ type: 'num', @@ -738,7 +737,7 @@ describe('Execution', () => { test('sets "success" flag on all functions to true', async () => { const execution = createExecution('add val=1 | add val=2 | add val=3', {}, true); execution.start(-1); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); for (const node of execution.state.get().ast.chain) { expect(node.debug?.success).toBe(true); @@ -748,7 +747,7 @@ describe('Execution', () => { test('stores "fn" reference to the function', async () => { const execution = createExecution('add val=1 | add val=2 | add val=3', {}, true); execution.start(-1); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); for (const node of execution.state.get().ast.chain) { expect(node.debug?.fn).toBe('add'); @@ -758,7 +757,7 @@ describe('Execution', () => { test('saves duration it took to execute each function', async () => { const execution = createExecution('add val=1 | add val=2 | add val=3', {}, true); execution.start(-1); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); for (const node of execution.state.get().ast.chain) { expect(typeof node.debug?.duration).toBe('number'); @@ -770,7 +769,7 @@ describe('Execution', () => { test('adds .debug field in expression AST on each executed function', async () => { const execution = createExecution('add val=1 | add val=2 | add val=3', {}, true); execution.start(-1); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); for (const node of execution.state.get().ast.chain) { expect(typeof node.debug).toBe('object'); @@ -781,7 +780,7 @@ describe('Execution', () => { test('stores input of each function', async () => { const execution = createExecution('add val=1 | add val=2 | add val=3', {}, true); execution.start(-1); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); const { chain } = execution.state.get().ast; @@ -799,7 +798,7 @@ describe('Execution', () => { test('stores output of each function', async () => { const execution = createExecution('add val=1 | add val=2 | add val=3', {}, true); execution.start(-1); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); const { chain } = execution.state.get().ast; @@ -824,7 +823,7 @@ describe('Execution', () => { true ); execution.start(-1); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); const { chain } = execution.state.get().ast; @@ -847,7 +846,7 @@ describe('Execution', () => { true ); execution.start(0); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); const { chain } = execution.state.get().ast.chain[0].arguments .val[0] as ExpressionAstExpression; @@ -882,7 +881,7 @@ describe('Execution', () => { params: { debug: true }, }); execution.start(0); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); const node1 = execution.state.get().ast.chain[0]; const node2 = execution.state.get().ast.chain[1]; @@ -900,7 +899,7 @@ describe('Execution', () => { params: { debug: true }, }); execution.start(0); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); const node2 = execution.state.get().ast.chain[1]; @@ -921,7 +920,7 @@ describe('Execution', () => { params: { debug: true }, }); execution.start(0); - await execution.result.pipe(first()).toPromise(); + await execution.result.toPromise(); const node2 = execution.state.get().ast.chain[1]; diff --git a/src/plugins/expressions/common/execution/execution.ts b/src/plugins/expressions/common/execution/execution.ts index b70f261ea4b20..47209c348257e 100644 --- a/src/plugins/expressions/common/execution/execution.ts +++ b/src/plugins/expressions/common/execution/execution.ts @@ -20,7 +20,7 @@ import { Observable, ReplaySubject, } from 'rxjs'; -import { catchError, finalize, map, shareReplay, switchMap, tap } from 'rxjs/operators'; +import { catchError, finalize, map, pluck, shareReplay, switchMap, tap } from 'rxjs/operators'; import { Executor } from '../executor'; import { createExecutionContainer, ExecutionContainer } from './container'; import { createError } from '../util'; @@ -45,6 +45,21 @@ import { ExpressionExecutionParams } from '../service'; import { TablesAdapter } from '../util/tables_adapter'; import { ExpressionsInspectorAdapter } from '../util/expressions_inspector_adapter'; +/** + * The result returned after an expression function execution. + */ +export interface ExecutionResult { + /** + * Partial result flag. + */ + partial: boolean; + + /** + * The expression function result. + */ + result: Output; +} + /** * AbortController is not available in Node until v15, so we * need to temporarily mock it for plugins using expressions @@ -91,7 +106,7 @@ export class Execution< /** * Dynamic state of the execution. */ - public readonly state: ExecutionContainer; + public readonly state: ExecutionContainer>; /** * Initial input of the execution. @@ -137,7 +152,7 @@ export class Execution< /** * Future that tracks result or error of this execution. */ - public readonly result: Observable; + public readonly result: Observable>; /** * Keeping track of any child executions @@ -174,7 +189,7 @@ export class Execution< this.expression = execution.expression || formatExpression(execution.ast!); const ast = execution.ast || parseExpression(this.expression); - this.state = createExecutionContainer({ + this.state = createExecutionContainer({ ...executor.state.get(), state: 'not-started', ast, @@ -201,12 +216,40 @@ export class Execution< }; this.result = this.input$.pipe( - switchMap((input) => this.race(this.invokeChain(this.state.get().ast.chain, input))), + switchMap((input) => + this.race(this.invokeChain(this.state.get().ast.chain, input)).pipe( + (source) => + new Observable>((subscriber) => { + let latest: ExecutionResult | undefined; + + subscriber.add( + source.subscribe({ + next: (result) => { + latest = { result, partial: true }; + subscriber.next(latest); + }, + error: (error) => subscriber.error(error), + complete: () => { + if (latest) { + latest.partial = false; + } + + subscriber.complete(); + }, + }) + ); + + subscriber.add(() => { + latest = undefined; + }); + }) + ) + ), catchError((error) => { if (this.abortController.signal.aborted) { this.childExecutions.forEach((childExecution) => childExecution.cancel()); - return of(createAbortErrorValue()); + return of({ result: createAbortErrorValue(), partial: false }); } return throwError(error); @@ -236,25 +279,20 @@ export class Execution< * N.B. `input` is initialized to `null` rather than `undefined` for legacy reasons, * because in legacy interpreter it was set to `null` by default. */ - public start(input: Input = null as any): Observable { + public start( + input: Input = null as any + ): Observable> { if (this.hasStarted) throw new Error('Execution already started.'); this.hasStarted = true; this.input = input; this.state.transitions.start(); if (isObservable(input)) { - // `input$` should never complete - input.subscribe( - (value) => this.input$.next(value), - (error) => this.input$.error(error) - ); + input.subscribe(this.input$); } else if (isPromise(input)) { - input.then( - (value) => this.input$.next(value), - (error) => this.input$.error(error) - ); + from(input).subscribe(this.input$); } else { - this.input$.next(input); + of(input).subscribe(this.input$); } return this.result; @@ -439,6 +477,7 @@ export class Execution< const resolveArgFns = mapValues(dealiasedArgAsts, (asts, argName) => asts.map((item) => (subInput = input) => this.interpret(item, subInput).pipe( + pluck('result'), map((output) => { if (isExpressionValueError(output)) { throw output.error; @@ -486,7 +525,7 @@ export class Execution< }); } - public interpret(ast: ExpressionAstNode, input: T): Observable { + public interpret(ast: ExpressionAstNode, input: T): Observable> { switch (getType(ast)) { case 'expression': const execution = this.execution.executor.createExecution( @@ -494,12 +533,13 @@ export class Execution< this.execution.params ); this.childExecutions.push(execution); + return execution.start(input); case 'string': case 'number': case 'null': case 'boolean': - return of(ast); + return of({ result: ast, partial: false }); default: return throwError(new Error(`Unknown AST object: ${JSON.stringify(ast)}`)); } diff --git a/src/plugins/expressions/common/execution/execution_contract.test.ts b/src/plugins/expressions/common/execution/execution_contract.test.ts index 99a5c80de3c46..de209f1dfb4a1 100644 --- a/src/plugins/expressions/common/execution/execution_contract.test.ts +++ b/src/plugins/expressions/common/execution/execution_contract.test.ts @@ -66,26 +66,23 @@ describe('ExecutionContract', () => { }); }); - test('can get error result of the expression execution', async () => { + test('can get error result of the expression execution', () => { const execution = createExecution('foo bar=123'); const contract = new ExecutionContract(execution); execution.start(); - const result = await contract.getData(); - - expect(result).toMatchObject({ - type: 'error', - }); + expect(contract.getData().toPromise()).resolves.toHaveProperty( + 'result', + expect.objectContaining({ type: 'error' }) + ); }); - test('can get result of the expression execution', async () => { + test('can get result of the expression execution', () => { const execution = createExecution('var_set name="foo" value="bar" | var name="foo"'); const contract = new ExecutionContract(execution); execution.start(); - const result = await contract.getData(); - - expect(result).toBe('bar'); + expect(contract.getData().toPromise()).resolves.toHaveProperty('result', 'bar'); }); describe('isPending', () => { diff --git a/src/plugins/expressions/common/execution/execution_contract.ts b/src/plugins/expressions/common/execution/execution_contract.ts index 3cad9cef5e09a..445ceb30b58db 100644 --- a/src/plugins/expressions/common/execution/execution_contract.ts +++ b/src/plugins/expressions/common/execution/execution_contract.ts @@ -6,9 +6,9 @@ * Side Public License, v 1. */ -import { of } from 'rxjs'; -import { catchError, take } from 'rxjs/operators'; -import { Execution } from './execution'; +import { of, Observable } from 'rxjs'; +import { catchError } from 'rxjs/operators'; +import { Execution, ExecutionResult } from './execution'; import { ExpressionValueError } from '../expression_types/specs'; import { ExpressionAstExpression } from '../ast'; @@ -39,22 +39,22 @@ export class ExecutionContract => { - return this.execution.result - .pipe( - take(1), - catchError(({ name, message, stack }) => - of({ + getData = (): Observable> => { + return this.execution.result.pipe( + catchError(({ name, message, stack }) => + of({ + partial: false, + result: { type: 'error', error: { name, message, stack, }, - } as ExpressionValueError) - ) + } as ExpressionValueError, + }) ) - .toPromise(); + ); }; /** diff --git a/src/plugins/expressions/common/executor/executor.ts b/src/plugins/expressions/common/executor/executor.ts index a307172aff973..7ca5a005991bd 100644 --- a/src/plugins/expressions/common/executor/executor.ts +++ b/src/plugins/expressions/common/executor/executor.ts @@ -13,7 +13,7 @@ import { Observable } from 'rxjs'; import { ExecutorState, ExecutorContainer } from './container'; import { createExecutorContainer } from './container'; import { AnyExpressionFunctionDefinition, ExpressionFunction } from '../expression_functions'; -import { Execution, ExecutionParams } from '../execution/execution'; +import { Execution, ExecutionParams, ExecutionResult } from '../execution/execution'; import { IRegistry } from '../types'; import { ExpressionType } from '../expression_types/expression_type'; import { AnyExpressionTypeDefinition } from '../expression_types/types'; @@ -160,7 +160,7 @@ export class Executor = Record { + ): Observable> { return this.createExecution(ast, params).start(input); } diff --git a/src/plugins/expressions/common/expression_functions/specs/tests/var_set.test.ts b/src/plugins/expressions/common/expression_functions/specs/tests/var_set.test.ts index cdcae61215fa4..1b060cde7482d 100644 --- a/src/plugins/expressions/common/expression_functions/specs/tests/var_set.test.ts +++ b/src/plugins/expressions/common/expression_functions/specs/tests/var_set.test.ts @@ -65,7 +65,7 @@ describe('expression_functions', () => { it('sets the variables', async () => { const vars = {}; - const result = await executor + const { result } = await executor .run('var_set name=test1 name=test2 value=1', 2, { variables: vars }) .pipe(first()) .toPromise(); diff --git a/src/plugins/expressions/common/service/expressions_services.test.ts b/src/plugins/expressions/common/service/expressions_services.test.ts index 8f86e81f9d1d5..db73d300e1273 100644 --- a/src/plugins/expressions/common/service/expressions_services.test.ts +++ b/src/plugins/expressions/common/service/expressions_services.test.ts @@ -114,7 +114,7 @@ describe('ExpressionsService', () => { }, }); - const result = await fork.run('__test__', null); + const { result } = await fork.run('__test__', null).toPromise(); expect(result).toBe('123'); }); diff --git a/src/plugins/expressions/common/service/expressions_services.ts b/src/plugins/expressions/common/service/expressions_services.ts index b3c0167262661..9e569c66bbe16 100644 --- a/src/plugins/expressions/common/service/expressions_services.ts +++ b/src/plugins/expressions/common/service/expressions_services.ts @@ -6,15 +6,15 @@ * Side Public License, v 1. */ -import { take } from 'rxjs/operators'; +import { Observable } from 'rxjs'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import type { KibanaRequest } from 'src/core/server'; import { Executor } from '../executor'; import { AnyExpressionRenderDefinition, ExpressionRendererRegistry } from '../expression_renderers'; import { ExpressionAstExpression } from '../ast'; -import { ExecutionContract } from '../execution/execution_contract'; -import { AnyExpressionTypeDefinition } from '../expression_types'; +import { ExecutionContract, ExecutionResult } from '../execution'; +import { AnyExpressionTypeDefinition, ExpressionValueError } from '../expression_types'; import { AnyExpressionFunctionDefinition } from '../expression_functions'; import { SavedObjectReference } from '../../../../core/types'; import { PersistableStateService, SerializableState } from '../../../kibana_utils/common'; @@ -136,7 +136,7 @@ export interface ExpressionsServiceStart { ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams - ) => Promise; + ) => Observable>; /** * Starts expression execution and immediately returns `ExecutionContract` @@ -243,7 +243,7 @@ export class ExpressionsService implements PersistableStateService this.renderers.register(definition); public readonly run: ExpressionsServiceStart['run'] = (ast, input, params) => - this.executor.run(ast, input, params).pipe(take(1)).toPromise(); + this.executor.run(ast, input, params); public readonly getFunction: ExpressionsServiceStart['getFunction'] = (name) => this.executor.getFunction(name); diff --git a/src/plugins/expressions/public/loader.test.ts b/src/plugins/expressions/public/loader.test.ts index 98adec285afd5..86477e53dc1a1 100644 --- a/src/plugins/expressions/public/loader.test.ts +++ b/src/plugins/expressions/public/loader.test.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { of } from 'rxjs'; import { first, skip, toArray } from 'rxjs/operators'; import { loader, ExpressionLoader } from './loader'; import { Observable } from 'rxjs'; @@ -111,8 +112,29 @@ describe('ExpressionLoader', () => { it('emits on $data when data is available', async () => { const expressionLoader = new ExpressionLoader(element, 'var foo', { variables: { foo: 123 } }); - const response = await expressionLoader.data$.pipe(first()).toPromise(); - expect(response).toBe(123); + const { result } = await expressionLoader.data$.pipe(first()).toPromise(); + expect(result).toBe(123); + }); + + it('ignores partial results by default', async () => { + const expressionLoader = new ExpressionLoader(element, 'var foo', { + variables: { foo: of(1, 2) }, + }); + const { result, partial } = await expressionLoader.data$.pipe(first()).toPromise(); + + expect(partial).toBe(false); + expect(result).toBe(2); + }); + + it('emits partial results if enabled', async () => { + const expressionLoader = new ExpressionLoader(element, 'var foo', { + variables: { foo: of(1, 2) }, + partial: true, + }); + const { result, partial } = await expressionLoader.data$.pipe(first()).toPromise(); + + expect(partial).toBe(true); + expect(result).toBe(1); }); it('emits on loading$ on initial load and on updates', async () => { diff --git a/src/plugins/expressions/public/loader.ts b/src/plugins/expressions/public/loader.ts index 4165b8906a20e..a51ce35c68180 100644 --- a/src/plugins/expressions/public/loader.ts +++ b/src/plugins/expressions/public/loader.ts @@ -6,9 +6,10 @@ * Side Public License, v 1. */ -import { BehaviorSubject, Observable, Subject } from 'rxjs'; -import { filter, map } from 'rxjs/operators'; +import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs'; +import { filter, map, delay } from 'rxjs/operators'; import { defaults } from 'lodash'; +import { UnwrapObservable } from '@kbn/utility-types'; import { Adapters } from '../../inspector/public'; import { IExpressionLoaderParams } from './types'; import { ExpressionAstExpression } from '../common'; @@ -20,7 +21,7 @@ import { getExpressionsService } from './services'; type Data = any; export class ExpressionLoader { - data$: Observable; + data$: ReturnType; update$: ExpressionRenderHandler['update$']; render$: ExpressionRenderHandler['render$']; events$: ExpressionRenderHandler['events$']; @@ -28,10 +29,11 @@ export class ExpressionLoader { private execution: ExecutionContract | undefined; private renderHandler: ExpressionRenderHandler; - private dataSubject: Subject; + private dataSubject: Subject>; private loadingSubject: Subject; private data: Data; private params: IExpressionLoaderParams = {}; + private subscription?: Subscription; constructor( element: HTMLElement, @@ -67,8 +69,8 @@ export class ExpressionLoader { } }); - this.data$.subscribe((data) => { - this.render(data); + this.data$.subscribe(({ result }) => { + this.render(result); }); this.render$.subscribe(() => { @@ -87,27 +89,20 @@ export class ExpressionLoader { this.dataSubject.complete(); this.loadingSubject.complete(); this.renderHandler.destroy(); - if (this.execution) { - this.execution.cancel(); - } + this.cancel(); + this.subscription?.unsubscribe(); } cancel() { - if (this.execution) { - this.execution.cancel(); - } + this.execution?.cancel(); } getExpression(): string | undefined { - if (this.execution) { - return this.execution.getExpression(); - } + return this.execution?.getExpression(); } getAst(): ExpressionAstExpression | undefined { - if (this.execution) { - return this.execution.getAst(); - } + return this.execution?.getAst(); } getElement(): HTMLElement { @@ -115,27 +110,25 @@ export class ExpressionLoader { } inspect(): Adapters | undefined { - return this.execution ? (this.execution.inspect() as Adapters) : undefined; + return this.execution?.inspect() as Adapters; } - async update( - expression?: string | ExpressionAstExpression, - params?: IExpressionLoaderParams - ): Promise { + update(expression?: string | ExpressionAstExpression, params?: IExpressionLoaderParams): void { this.setParams(params); this.loadingSubject.next(true); if (expression) { - await this.loadData(expression, this.params); + this.loadData(expression, this.params); } else if (this.data) { this.render(this.data); } } - private loadData = async ( + private loadData = ( expression: string | ExpressionAstExpression, params: IExpressionLoaderParams - ): Promise => { + ) => { + this.subscription?.unsubscribe(); if (this.execution && this.execution.isPending) { this.execution.cancel(); } @@ -148,13 +141,13 @@ export class ExpressionLoader { debug: params.debug, syncColors: params.syncColors, }); - - const prevDataHandler = this.execution; - const data = await prevDataHandler.getData(); - if (this.execution !== prevDataHandler) { - return; - } - this.dataSubject.next(data); + this.subscription = this.execution + .getData() + .pipe( + delay(0), // delaying until the next tick since we execute the expression in the constructor + filter(({ partial }) => params.partial || !partial) + ) + .subscribe((value) => this.dataSubject.next(value)); }; private render(data: Data): void { @@ -184,6 +177,7 @@ export class ExpressionLoader { } this.params.syncColors = params.syncColors; this.params.debug = Boolean(params.debug); + this.params.partial = Boolean(params.partial); this.params.inspectorAdapters = (params.inspectorAdapters || this.execution?.inspect()) as Adapters; diff --git a/src/plugins/expressions/public/plugin.test.ts b/src/plugins/expressions/public/plugin.test.ts index 93353ebbb51b6..1963eb1f1b3f7 100644 --- a/src/plugins/expressions/public/plugin.test.ts +++ b/src/plugins/expressions/public/plugin.test.ts @@ -36,8 +36,10 @@ describe('ExpressionsPublicPlugin', () => { describe('.run()', () => { test('can execute simple expression', async () => { const { setup } = await expressionsPluginMock.createPlugin(); - const bar = await setup.run('var_set name="foo" value="bar" | var name="foo"', null); - expect(bar).toBe('bar'); + const { result } = await setup + .run('var_set name="foo" value="bar" | var name="foo"', null) + .toPromise(); + expect(result).toBe('bar'); }); }); }); diff --git a/src/plugins/expressions/public/public.api.md b/src/plugins/expressions/public/public.api.md index 97009ae543b97..2d9c6d94cfa6d 100644 --- a/src/plugins/expressions/public/public.api.md +++ b/src/plugins/expressions/public/public.api.md @@ -112,16 +112,17 @@ export class Execution(ast: ExpressionAstNode, input: T): Observable; + interpret(ast: ExpressionAstNode, input: T): Observable>; // (undocumented) invokeChain(chainArr: ExpressionAstFunction[], input: unknown): Observable; // (undocumented) invokeFunction(fn: ExpressionFunction, input: unknown, args: Record): Observable; // (undocumented) resolveArgs(fnDef: ExpressionFunction, input: unknown, argAsts: any): Observable; - readonly result: Observable; - start(input?: Input): Observable; - readonly state: ExecutionContainer; + readonly result: Observable>; + start(input?: Input): Observable>; + // Warning: (ae-forgotten-export) The symbol "ExecutionResult" needs to be exported by the entry point index.d.ts + readonly state: ExecutionContainer>; } // Warning: (ae-forgotten-export) The symbol "StateContainer" needs to be exported by the entry point index.d.ts @@ -155,7 +156,7 @@ export class ExecutionContract; getAst: () => ExpressionAstExpression; - getData: () => Promise; + getData: () => Observable>; getExpression: () => string; inspect: () => InspectorAdapters; // (undocumented) @@ -230,7 +231,7 @@ export class Executor = Record AnyExpressionFunctionDefinition)): void; // (undocumented) registerType(typeDefinition: AnyExpressionTypeDefinition | (() => AnyExpressionTypeDefinition)): void; - run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable; + run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable>; // (undocumented) readonly state: ExecutorContainer; // (undocumented) @@ -637,7 +638,7 @@ export interface ExpressionsServiceStart { getFunction: (name: string) => ReturnType; getRenderer: (name: string) => ReturnType; getType: (name: string) => ReturnType; - run: (ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams) => Promise; + run: (ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams) => Observable>; } // Warning: (ae-missing-release-tag) "ExpressionsSetup" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -907,6 +908,8 @@ export interface IExpressionLoaderParams { // // (undocumented) onRenderError?: RenderErrorHandlerFnType; + // (undocumented) + partial?: boolean; // Warning: (ae-forgotten-export) The symbol "RenderMode" needs to be exported by the entry point index.d.ts // // (undocumented) @@ -1073,7 +1076,7 @@ export interface ReactExpressionRendererProps extends IExpressionLoaderParams { // (undocumented) expression: string | ExpressionAstExpression; // (undocumented) - onData$?: (data: TData, adapters?: TInspectorAdapters) => void; + onData$?: (data: TData, adapters?: TInspectorAdapters, partial?: boolean) => void; // (undocumented) onEvent?: (event: ExpressionRendererEvent) => void; // (undocumented) diff --git a/src/plugins/expressions/public/react_expression_renderer.test.tsx b/src/plugins/expressions/public/react_expression_renderer.test.tsx index e7ae6ee45ab60..d31a4c947b09d 100644 --- a/src/plugins/expressions/public/react_expression_renderer.test.tsx +++ b/src/plugins/expressions/public/react_expression_renderer.test.tsx @@ -255,7 +255,7 @@ describe('ExpressionRenderer', () => { const dataSubject = new Subject(); const data$ = dataSubject.asObservable().pipe(share()); - const newData = {}; + const result = {}; const inspectData = {}; const onData$ = jest.fn(); @@ -275,11 +275,11 @@ describe('ExpressionRenderer', () => { expect(onData$).toHaveBeenCalledTimes(0); act(() => { - dataSubject.next(newData); + dataSubject.next({ result }); }); expect(onData$).toHaveBeenCalledTimes(1); - expect(onData$.mock.calls[0][0]).toBe(newData); + expect(onData$.mock.calls[0][0]).toBe(result); expect(onData$.mock.calls[0][1]).toBe(inspectData); }); diff --git a/src/plugins/expressions/public/react_expression_renderer.tsx b/src/plugins/expressions/public/react_expression_renderer.tsx index ce8547f132c27..719af1b39f89e 100644 --- a/src/plugins/expressions/public/react_expression_renderer.tsx +++ b/src/plugins/expressions/public/react_expression_renderer.tsx @@ -30,7 +30,11 @@ export interface ReactExpressionRendererProps extends IExpressionLoaderParams { ) => React.ReactElement | React.ReactElement[]; padding?: 'xs' | 's' | 'm' | 'l' | 'xl'; onEvent?: (event: ExpressionRendererEvent) => void; - onData$?: (data: TData, adapters?: TInspectorAdapters) => void; + onData$?: ( + data: TData, + adapters?: TInspectorAdapters, + partial?: boolean + ) => void; /** * An observable which can be used to re-run the expression without destroying the component */ @@ -135,8 +139,8 @@ export const ReactExpressionRenderer = ({ } if (onData$) { subs.push( - expressionLoaderRef.current.data$.subscribe((newData) => { - onData$(newData, expressionLoaderRef.current?.inspect()); + expressionLoaderRef.current.data$.subscribe(({ partial, result }) => { + onData$(result, expressionLoaderRef.current?.inspect(), partial); }) ); } diff --git a/src/plugins/expressions/public/types/index.ts b/src/plugins/expressions/public/types/index.ts index 947b84ec152ac..2375252e82784 100644 --- a/src/plugins/expressions/public/types/index.ts +++ b/src/plugins/expressions/public/types/index.ts @@ -48,6 +48,7 @@ export interface IExpressionLoaderParams { renderMode?: RenderMode; syncColors?: boolean; hasCompatibleActions?: ExpressionRenderHandlerParams['hasCompatibleActions']; + partial?: boolean; } export interface ExpressionRenderError extends Error { diff --git a/src/plugins/expressions/server/plugin.test.ts b/src/plugins/expressions/server/plugin.test.ts index d967f9e614678..c41cda36e7623 100644 --- a/src/plugins/expressions/server/plugin.test.ts +++ b/src/plugins/expressions/server/plugin.test.ts @@ -28,8 +28,10 @@ describe('ExpressionsServerPlugin', () => { describe('.run()', () => { test('can execute simple expression', async () => { const { setup } = await expressionsPluginMock.createPlugin(); - const bar = await setup.run('var_set name="foo" value="bar" | var name="foo"', null); - expect(bar).toBe('bar'); + const { result } = await setup + .run('var_set name="foo" value="bar" | var name="foo"', null) + .toPromise(); + expect(result).toBe('bar'); }); }); }); diff --git a/src/plugins/expressions/server/server.api.md b/src/plugins/expressions/server/server.api.md index 8d2e113e6b6ed..ec16d95ea8a3f 100644 --- a/src/plugins/expressions/server/server.api.md +++ b/src/plugins/expressions/server/server.api.md @@ -110,16 +110,17 @@ export class Execution(ast: ExpressionAstNode, input: T): Observable; + interpret(ast: ExpressionAstNode, input: T): Observable>; // (undocumented) invokeChain(chainArr: ExpressionAstFunction[], input: unknown): Observable; // (undocumented) invokeFunction(fn: ExpressionFunction, input: unknown, args: Record): Observable; // (undocumented) resolveArgs(fnDef: ExpressionFunction, input: unknown, argAsts: any): Observable; - readonly result: Observable; - start(input?: Input): Observable; - readonly state: ExecutionContainer; + readonly result: Observable>; + start(input?: Input): Observable>; + // Warning: (ae-forgotten-export) The symbol "ExecutionResult" needs to be exported by the entry point index.d.ts + readonly state: ExecutionContainer>; } // Warning: (ae-forgotten-export) The symbol "StateContainer" needs to be exported by the entry point index.d.ts @@ -212,7 +213,7 @@ export class Executor = Record AnyExpressionFunctionDefinition)): void; // (undocumented) registerType(typeDefinition: AnyExpressionTypeDefinition | (() => AnyExpressionTypeDefinition)): void; - run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable; + run(ast: string | ExpressionAstExpression, input: Input, params?: ExpressionExecutionParams): Observable>; // (undocumented) readonly state: ExecutorContainer; // (undocumented) diff --git a/src/plugins/presentation_util/common/lib/index.ts b/src/plugins/presentation_util/common/lib/index.ts new file mode 100644 index 0000000000000..3fe90009ad8df --- /dev/null +++ b/src/plugins/presentation_util/common/lib/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './utils'; +export * from './test_helpers'; diff --git a/src/plugins/presentation_util/common/lib/test_helpers/function_wrapper.ts b/src/plugins/presentation_util/common/lib/test_helpers/function_wrapper.ts new file mode 100644 index 0000000000000..4ec02fd622cf7 --- /dev/null +++ b/src/plugins/presentation_util/common/lib/test_helpers/function_wrapper.ts @@ -0,0 +1,27 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 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 { mapValues } from 'lodash'; +import { + ExpressionValueBoxed, + typeSpecs, + ExpressionFunctionDefinition, +} from '../../../../expressions/common'; + +type FnType = () => typeof typeSpecs[number] & + ExpressionFunctionDefinition, ExpressionValueBoxed>; + +// It takes a function spec and passes in default args into the spec fn +export const functionWrapper = (fnSpec: FnType): ReturnType['fn'] => { + const spec = fnSpec(); + const defaultArgs = mapValues(spec.args, (argSpec) => { + return argSpec.default; + }); + + return (context, args, handlers) => spec.fn(context, { ...defaultArgs, ...args }, handlers); +}; diff --git a/src/plugins/presentation_util/common/lib/test_helpers/index.ts b/src/plugins/presentation_util/common/lib/test_helpers/index.ts new file mode 100644 index 0000000000000..a6ea8da6ac6e9 --- /dev/null +++ b/src/plugins/presentation_util/common/lib/test_helpers/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './function_wrapper'; diff --git a/x-pack/plugins/canvas/common/lib/dataurl.test.ts b/src/plugins/presentation_util/common/lib/utils/dataurl.test.ts similarity index 94% rename from x-pack/plugins/canvas/common/lib/dataurl.test.ts rename to src/plugins/presentation_util/common/lib/utils/dataurl.test.ts index 9ddd0a50ea9d5..5820b10f589fe 100644 --- a/x-pack/plugins/canvas/common/lib/dataurl.test.ts +++ b/src/plugins/presentation_util/common/lib/utils/dataurl.test.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { isValidDataUrl, parseDataUrl } from './dataurl'; diff --git a/x-pack/plugins/canvas/common/lib/dataurl.ts b/src/plugins/presentation_util/common/lib/utils/dataurl.ts similarity index 90% rename from x-pack/plugins/canvas/common/lib/dataurl.ts rename to src/plugins/presentation_util/common/lib/utils/dataurl.ts index 2ae28b621c425..9ac232369cdc1 100644 --- a/x-pack/plugins/canvas/common/lib/dataurl.ts +++ b/src/plugins/presentation_util/common/lib/utils/dataurl.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { fromByteArray } from 'base64-js'; diff --git a/x-pack/plugins/canvas/public/lib/elastic_logo.ts b/src/plugins/presentation_util/common/lib/utils/elastic_logo.ts similarity index 96% rename from x-pack/plugins/canvas/public/lib/elastic_logo.ts rename to src/plugins/presentation_util/common/lib/utils/elastic_logo.ts index 81c79c39143d6..9a789d1a5fb03 100644 --- a/x-pack/plugins/canvas/public/lib/elastic_logo.ts +++ b/src/plugins/presentation_util/common/lib/utils/elastic_logo.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ export const elasticLogo = diff --git a/src/plugins/presentation_util/common/lib/utils/elastic_outline.ts b/src/plugins/presentation_util/common/lib/utils/elastic_outline.ts new file mode 100644 index 0000000000000..4747be58127f7 --- /dev/null +++ b/src/plugins/presentation_util/common/lib/utils/elastic_outline.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export const elasticOutline = + 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%22-3.948730230331421%20-1.7549896240234375%20245.25946044921875%20241.40370178222656%22%20width%3D%22245.25946044921875%22%20height%3D%22241.40370178222656%22%20style%3D%22enable-background%3Anew%200%200%20686.2%20235.7%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%232D2D2D%3B%7D%0A%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%200%2C%200%29%22%3E%0A%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M329.4%2C160.3l4.7-0.5l0.3%2C9.6c-12.4%2C1.7-23%2C2.6-31.8%2C2.6c-11.7%2C0-20-3.4-24.9-10.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-4.9-6.8-7.3-17.4-7.3-31.7c0-28.6%2C11.4-42.9%2C34.1-42.9c11%2C0%2C19.2%2C3.1%2C24.6%2C9.2c5.4%2C6.1%2C8.1%2C15.8%2C8.1%2C28.9l-0.7%2C9.3h-53.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0%2C9%2C1.6%2C15.7%2C4.9%2C20c3.3%2C4.3%2C8.9%2C6.5%2C17%2C6.5C312.8%2C161.2%2C321.1%2C160.9%2C329.4%2C160.3z%20M325%2C124.9c0-10-1.6-17.1-4.8-21.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.2-4.1-8.4-6.2-15.6-6.2c-7.2%2C0-12.7%2C2.2-16.3%2C6.5c-3.6%2C4.3-5.5%2C11.3-5.6%2C20.9H325z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M354.3%2C171.4V64h12.2v107.4H354.3z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.5%2C113.5v41.1c0%2C4.1%2C10.1%2C3.9%2C10.1%2C3.9l-0.6%2C10.8c-8.6%2C0-15.7%2C0.7-20-3.4c-9.8%2C4.3-19.5%2C6.1-29.3%2C6.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.5%2C0-13.2-2.1-17.1-6.4c-3.9-4.2-5.9-10.3-5.9-18.3c0-7.9%2C2-13.8%2C6-17.5c4-3.7%2C10.3-6.1%2C18.9-6.9l25.6-2.4v-7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0-5.5-1.2-9.5-3.6-11.9c-2.4-2.4-5.7-3.6-9.8-3.6l-32.1%2C0V87.2h31.3c9.2%2C0%2C15.9%2C2.1%2C20.1%2C6.4C441.4%2C97.8%2C443.5%2C104.5%2C443.5%2C113.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bz%20M393.3%2C146.7c0%2C10%2C4.1%2C15%2C12.4%2C15c7.4%2C0%2C14.7-1.2%2C21.8-3.7l3.7-1.3v-26.9l-24.1%2C2.3c-4.9%2C0.4-8.4%2C1.8-10.6%2C4.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3BC394.4%2C138.7%2C393.3%2C142.2%2C393.3%2C146.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M491.2%2C98.2c-11.8%2C0-17.8%2C4.1-17.8%2C12.4c0%2C3.8%2C1.4%2C6.5%2C4.1%2C8.1c2.7%2C1.6%2C8.9%2C3.2%2C18.6%2C4.9%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc9.7%2C1.7%2C16.5%2C4%2C20.5%2C7.1c4%2C3%2C6%2C8.7%2C6%2C17.1c0%2C8.4-2.7%2C14.5-8.1%2C18.4c-5.4%2C3.9-13.2%2C5.9-23.6%2C5.9c-6.7%2C0-29.2-2.5-29.2-2.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bl0.7-10.6c12.9%2C1.2%2C22.3%2C2.2%2C28.6%2C2.2c6.3%2C0%2C11.1-1%2C14.4-3c3.3-2%2C5-5.4%2C5-10.1c0-4.7-1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-9.6-1.5-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3c0-7.9%2C2.8-13.8%2C8.4-17.6c5.6-3.8%2C12.6-5.7%2C20.9-5.7c6.6%2C0%2C29.6%2C1.7%2C29.6%2C1.7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bv10.7C508.1%2C99%2C498.2%2C98.2%2C491.2%2C98.2z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M581.7%2C99.5h-25.9v39c0%2C9.3%2C0.7%2C15.5%2C2%2C18.4c1.4%2C2.9%2C4.6%2C4.4%2C9.7%2C4.4l14.5-1l0.8%2C10.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.3%2C1.2-12.8%2C1.8-16.6%2C1.8c-8.5%2C0-14.3-2.1-17.6-6.2c-3.3-4.1-4.9-12-4.9-23.6V99.5h-11.6V88.9h11.6V63.9h12.1v24.9h25.9V99.5z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M598.7%2C78.4V64.3h12.2v14.2H598.7z%20M598.7%2C171.4V88.9h12.2v82.5H598.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M663.8%2C87.2c3.6%2C0%2C9.7%2C0.7%2C18.3%2C2l3.9%2C0.5l-0.5%2C9.9c-8.7-1-15.1-1.5-19.2-1.5c-9.2%2C0-15.5%2C2.2-18.8%2C6.6%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.3%2C4.4-5%2C12.6-5%2C24.5c0%2C11.9%2C1.5%2C20.2%2C4.6%2C24.9c3.1%2C4.7%2C9.5%2C7%2C19.3%2C7l19.2-1.5l0.5%2C10.1c-10.1%2C1.5-17.7%2C2.3-22.7%2C2.3%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-12.7%2C0-21.5-3.3-26.3-9.8c-4.8-6.5-7.3-17.5-7.3-33c0-15.5%2C2.6-26.4%2C7.8-32.6C643%2C90.4%2C651.7%2C87.2%2C663.8%2C87.2z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M236.6%2C123.5c0-19.8-12.3-37.2-30.8-43.9c0.8-4.2%2C1.2-8.4%2C1.2-12.7C207%2C30%2C177%2C0%2C140.2%2C0%26%2310%3B%26%239%3B%26%239%3BC118.6%2C0%2C98.6%2C10.3%2C86%2C27.7c-6.2-4.8-13.8-7.4-21.7-7.4c-19.6%2C0-35.5%2C15.9-35.5%2C35.5c0%2C4.3%2C0.8%2C8.5%2C2.2%2C12.4%26%2310%3B%26%239%3B%26%239%3BC12.6%2C74.8%2C0%2C92.5%2C0%2C112.2c0%2C19.9%2C12.4%2C37.3%2C30.9%2C44c-0.8%2C4.1-1.2%2C8.4-1.2%2C12.7c0%2C36.8%2C29.9%2C66.7%2C66.7%2C66.7%26%2310%3B%26%239%3B%26%239%3Bc21.6%2C0%2C41.6-10.4%2C54.1-27.8c6.2%2C4.9%2C13.8%2C7.6%2C21.7%2C7.6c19.6%2C0%2C35.5-15.9%2C35.5-35.5c0-4.3-0.8-8.5-2.2-12.4%26%2310%3B%26%239%3B%26%239%3BC223.9%2C160.9%2C236.6%2C143.2%2C236.6%2C123.5z%20M91.6%2C34.8c10.9-15.9%2C28.9-25.4%2C48.1-25.4c32.2%2C0%2C58.4%2C26.2%2C58.4%2C58.4%26%2310%3B%26%239%3B%26%239%3Bc0%2C3.9-0.4%2C7.7-1.1%2C11.5l-52.2%2C45.8L93%2C101.5L82.9%2C79.9L91.6%2C34.8z%20M65.4%2C29c6.2%2C0%2C12.1%2C2%2C17%2C5.7l-7.8%2C40.3l-35.5-8.4%26%2310%3B%26%239%3B%26%239%3Bc-1.1-3.1-1.7-6.3-1.7-9.7C37.4%2C41.6%2C49.9%2C29%2C65.4%2C29z%20M9.1%2C112.3c0-16.7%2C11-31.9%2C26.9-37.2L75%2C84.4l9.1%2C19.5l-49.8%2C45%26%2310%3B%26%239%3B%26%239%3BC19.2%2C143.1%2C9.1%2C128.6%2C9.1%2C112.3z%20M145.2%2C200.9c-10.9%2C16.1-29%2C25.6-48.4%2C25.6c-32.3%2C0-58.6-26.3-58.6-58.5c0-4%2C0.4-7.9%2C1.1-11.7%26%2310%3B%26%239%3B%26%239%3Bl50.9-46l52%2C23.7l11.5%2C22L145.2%2C200.9z%20M171.2%2C206.6c-6.1%2C0-12-2-16.9-5.8l7.7-40.2l35.4%2C8.3c1.1%2C3.1%2C1.7%2C6.3%2C1.7%2C9.7%26%2310%3B%26%239%3B%26%239%3BC199.2%2C194.1%2C186.6%2C206.6%2C171.2%2C206.6z%20M200.5%2C160.5l-39-9.1l-10.4-19.8l51-44.7c15.1%2C5.7%2C25.2%2C20.2%2C25.2%2C36.5%26%2310%3B%26%239%3B%26%239%3BC227.4%2C140.1%2C216.4%2C155.3%2C200.5%2C160.5z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E'; diff --git a/x-pack/plugins/canvas/common/lib/httpurl.test.ts b/src/plugins/presentation_util/common/lib/utils/httpurl.test.ts similarity index 89% rename from x-pack/plugins/canvas/common/lib/httpurl.test.ts rename to src/plugins/presentation_util/common/lib/utils/httpurl.test.ts index 1cd00114bf7ca..20cd40480691d 100644 --- a/x-pack/plugins/canvas/common/lib/httpurl.test.ts +++ b/src/plugins/presentation_util/common/lib/utils/httpurl.test.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ import { isValidHttpUrl } from './httpurl'; diff --git a/x-pack/plugins/canvas/common/lib/httpurl.ts b/src/plugins/presentation_util/common/lib/utils/httpurl.ts similarity index 67% rename from x-pack/plugins/canvas/common/lib/httpurl.ts rename to src/plugins/presentation_util/common/lib/utils/httpurl.ts index 4f8b03aa2a062..4777eb4c8128d 100644 --- a/x-pack/plugins/canvas/common/lib/httpurl.ts +++ b/src/plugins/presentation_util/common/lib/utils/httpurl.ts @@ -1,8 +1,9 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. */ // A cheap regex to distinguish an HTTP URL string from a data URL string diff --git a/src/plugins/presentation_util/common/lib/utils/index.ts b/src/plugins/presentation_util/common/lib/utils/index.ts new file mode 100644 index 0000000000000..eed4acf78b2be --- /dev/null +++ b/src/plugins/presentation_util/common/lib/utils/index.ts @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './dataurl'; +export * from './elastic_logo'; +export * from './elastic_outline'; +export * from './httpurl'; +export * from './missing_asset'; +export * from './resolve_dataurl'; +export * from './url'; diff --git a/src/plugins/presentation_util/common/lib/utils/missing_asset.ts b/src/plugins/presentation_util/common/lib/utils/missing_asset.ts new file mode 100644 index 0000000000000..10d429870c88c --- /dev/null +++ b/src/plugins/presentation_util/common/lib/utils/missing_asset.ts @@ -0,0 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +// CC0, source: https://pixabay.com/en/question-mark-confirmation-question-838656/ +export const missingImage = + 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJiIiB4PSItLjM2IiB5PSItLjM2IiB3aWR0aD0iMS43MiIgaGVpZ2h0PSIxLjcyIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNDY0Ii8+PC9maWx0ZXI+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMTU5LjM0IiB4Mj0iMTg0LjQ4IiB5MT0iNzI3LjM2IiB5Mj0iNzQ5Ljg5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEuNTMgLTU0OS42OCkgc2NhbGUoLjc3MDAyKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNlYmYwZWQiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmYWZhZmEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xNS40MzcgMi42OTVsMTQuNTA2IDI0LjQ3NkgxLjI4N2wxNC4xNS0yNC40NzZ6IiBmaWxsPSJ1cmwoI2EpIiBzdHJva2U9InJlZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjgzMTk3IDAgMCAuNTU0NjYgLTc4LjU4MyAtMzgzLjUxKSIgZD0iTTExMS4zMSA3MzEuMmMtMy4yODMtMy45MjUtMy41OTUtNi4xNDgtMi4wMjQtMTAuNDM4IDMuMzM2LTYuMTQ1IDQuNDk2LTguMDY4IDUuNDEtOS40MDUgMS45MDEgNS4xNjIgMi4xMjYgMTkuMTQtMy4zODYgMTkuODQzeiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIuODc2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbHRlcj0idXJsKCNiKSIvPjxnIGZpbGwtb3BhY2l0eT0iLjgyIj48cGF0aCBkPSJNMTUuMDQ2IDIwLjIyN2gtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY3IDAtLjg5Ni0uMTc1LTEuNTU3LS41MjYtMS45ODItLjM1LS40MjUtLjc2NS0uNjM3LTEuMjQ0LS42MzctLjM2NCAwLS42Ny4wOTgtLjkyLjI5My0uMTg5LjE0OS0uMjgzLjMwNC0uMjgzLjQ2NiAwIC4xMDcuMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDk0IDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNTEuNTQtMS4wMjkgMS4xNC0yLjAzMyAxLjgtLjY3NC40NDUtMS4xMi44NDMtMS4zMzUgMS4xOTQtLjIxLjM0My0uMzM3Ljg3My0uMzg0IDEuNTg3bS0uMTEyIDEuNDc3Yy40NTIgMCAuODM2LjE1OCAxLjE1My40NzUuMzE3LjMxNy40NzYuNzAxLjQ3NiAxLjE1MyAwIC40NTItLjE1OS44NC0uNDc2IDEuMTYzYTEuNTcgMS41NyAwIDAgMS0xLjE1My40NzUgMS41NyAxLjU3IDAgMCAxLTEuMTUzLS40NzUgMS42MDQgMS42MDQgMCAwIDEtLjQ3NS0xLjE2M2MwLS40NTIuMTU5LS44MzYuNDc1LTEuMTUzYTEuNTcgMS41NyAwIDAgMSAxLjE1My0uNDc1IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9Ii40ODYiLz48cGF0aCBkPSJNMTUuMzI3IDIwLjUwOGgtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY2IDAtLjg5Ny0uMTc1LTEuNTU4LS41MjYtMS45ODMtLjM1LS40MjQtLjc2NS0uNjM3LTEuMjQzLS42MzctLjM2NSAwLS42NzEuMDk4LS45Mi4yOTMtLjE5LjE0OS0uMjg0LjMwNC0uMjg0LjQ2NiAwIC4xMDguMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDkzIDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNS41NC0xLjAyOCAxLjE0LTIuMDMzIDEuOC0uNjc0LjQ0NS0uODUzLjg0My0xLjA2OCAxLjE5NC0uMjEuMzQzLS4zMzcuODczLS4zODUgMS41ODdtLS4zNzggMS40NzdjLjQ1MiAwIC44MzYuMTU4IDEuMTUzLjQ3NS4zMTcuMzE3LjQ3Ni43MDEuNDc2IDEuMTUzIDAgLjQ1Mi0uMTU5Ljg0LS40NzYgMS4xNjNhMS41NyAxLjU3IDAgMCAxLTEuMTUzLjQ3NiAxLjU3IDEuNTcgMCAwIDEtMS4xNTMtLjQ3NiAxLjYwNCAxLjYwNCAwIDAgMS0uNDc1LTEuMTYzYzAtLjQ1Mi4xNTktLjgzNi40NzUtMS4xNTNhMS41NyAxLjU3IDAgMCAxIDEuMTUzLS40NzUiIGZpbGwtb3BhY2l0eT0iLjgyIi8+PC9nPjwvc3ZnPg=='; diff --git a/x-pack/plugins/canvas/common/lib/resolve_dataurl.test.js b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.test.ts similarity index 84% rename from x-pack/plugins/canvas/common/lib/resolve_dataurl.test.js rename to src/plugins/presentation_util/common/lib/utils/resolve_dataurl.test.ts index 72aaa1dfbd502..c2b9a444d20ef 100644 --- a/x-pack/plugins/canvas/common/lib/resolve_dataurl.test.js +++ b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.test.ts @@ -1,11 +1,12 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 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 { missingImage } from '../../common/lib/missing_asset'; +import { missingImage } from './missing_asset'; import { resolveFromArgs, resolveWithMissingImage } from './resolve_dataurl'; describe('resolve_dataurl', () => { diff --git a/x-pack/plugins/canvas/common/lib/resolve_dataurl.ts b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.ts similarity index 75% rename from x-pack/plugins/canvas/common/lib/resolve_dataurl.ts rename to src/plugins/presentation_util/common/lib/utils/resolve_dataurl.ts index 79e49c0595355..db94bdf04c32b 100644 --- a/x-pack/plugins/canvas/common/lib/resolve_dataurl.ts +++ b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.ts @@ -1,13 +1,14 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 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 { get } from 'lodash'; -import { isValidUrl } from '../../common/lib/url'; -import { missingImage } from '../../common/lib/missing_asset'; +import { isValidUrl } from './url'; +import { missingImage } from './missing_asset'; /* * NOTE: args.dataurl can come as an expression here. diff --git a/x-pack/plugins/canvas/common/lib/url.test.ts b/src/plugins/presentation_util/common/lib/utils/url.test.ts similarity index 70% rename from x-pack/plugins/canvas/common/lib/url.test.ts rename to src/plugins/presentation_util/common/lib/utils/url.test.ts index 654602eea2093..4599e776a6266 100644 --- a/x-pack/plugins/canvas/common/lib/url.test.ts +++ b/src/plugins/presentation_util/common/lib/utils/url.test.ts @@ -1,11 +1,12 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. + * 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 { missingImage } from '../../common/lib/missing_asset'; +import { missingImage } from './missing_asset'; import { isValidUrl } from './url'; describe('resolve_dataurl', () => { diff --git a/src/plugins/presentation_util/common/lib/utils/url.ts b/src/plugins/presentation_util/common/lib/utils/url.ts new file mode 100644 index 0000000000000..e6a1064200cc1 --- /dev/null +++ b/src/plugins/presentation_util/common/lib/utils/url.ts @@ -0,0 +1,14 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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 { isValidDataUrl } from './dataurl'; +import { isValidHttpUrl } from './httpurl'; + +export function isValidUrl(url: string) { + return isValidDataUrl(url) || isValidHttpUrl(url); +} diff --git a/src/plugins/presentation_util/jest.config.js b/src/plugins/presentation_util/jest.config.js new file mode 100644 index 0000000000000..2250d70acb475 --- /dev/null +++ b/src/plugins/presentation_util/jest.config.js @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +module.exports = { + preset: '@kbn/test', + rootDir: '../../..', + roots: ['/src/plugins/presentation_util'], +}; diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json index c7d272dcd02a1..22ec919457cce 100644 --- a/src/plugins/presentation_util/kibana.json +++ b/src/plugins/presentation_util/kibana.json @@ -4,6 +4,9 @@ "kibanaVersion": "kibana", "server": true, "ui": true, + "extraPublicDirs": [ + "common/lib" + ], "requiredPlugins": [ "savedObjects" ], diff --git a/src/plugins/presentation_util/public/__stories__/index.tsx b/src/plugins/presentation_util/public/__stories__/index.tsx new file mode 100644 index 0000000000000..078a16cb8cab2 --- /dev/null +++ b/src/plugins/presentation_util/public/__stories__/index.tsx @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 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. + */ + +export * from './render'; diff --git a/src/plugins/presentation_util/public/__stories__/render.tsx b/src/plugins/presentation_util/public/__stories__/render.tsx new file mode 100644 index 0000000000000..29d95e6bf2819 --- /dev/null +++ b/src/plugins/presentation_util/public/__stories__/render.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 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 { action } from '@storybook/addon-actions'; +import React, { useRef, useEffect } from 'react'; +import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions'; + +export const defaultHandlers: IInterpreterRenderHandlers = { + getRenderMode: () => 'display', + isSyncColorsEnabled: () => false, + done: action('done'), + onDestroy: action('onDestroy'), + reload: action('reload'), + update: action('update'), + event: action('event'), +}; + +/* + Uses a RenderDefinitionFactory and Config to render into an element. + + Intended to be used for stories for RenderDefinitionFactory +*/ +interface RenderAdditionalProps { + height?: string; + width?: string; + handlers?: IInterpreterRenderHandlers; +} + +export const Render = ({ + renderer, + config, + ...rest +}: Renderer extends () => ExpressionRenderDefinition + ? { renderer: Renderer; config: Config } & RenderAdditionalProps + : { renderer: undefined; config: undefined } & RenderAdditionalProps) => { + const { height, width, handlers } = { + height: '200px', + width: '200px', + handlers: defaultHandlers, + ...rest, + }; + + const containerRef = useRef(null); + + useEffect(() => { + if (renderer && containerRef.current !== null) { + renderer().render(containerRef.current, config, handlers); + } + }, [renderer, config, handlers]); + + return ( +
+ {' '} +
+ ); +}; diff --git a/src/plugins/presentation_util/public/index.ts b/src/plugins/presentation_util/public/index.ts index 9f17133c5b35a..1e26011ff58ae 100644 --- a/src/plugins/presentation_util/public/index.ts +++ b/src/plugins/presentation_util/public/index.ts @@ -28,6 +28,7 @@ export { export { PresentationUtilPluginSetup, PresentationUtilPluginStart } from './types'; export { SaveModalDashboardProps } from './components/types'; export { projectIDs, ProjectID, Project } from '../common/labs'; +export * from '../common/lib'; export { LazyLabsBeakerButton, diff --git a/src/plugins/presentation_util/tsconfig.json b/src/plugins/presentation_util/tsconfig.json index c0fafe8c3aaba..b389d94b19413 100644 --- a/src/plugins/presentation_util/tsconfig.json +++ b/src/plugins/presentation_util/tsconfig.json @@ -7,6 +7,9 @@ "declaration": true, "declarationMap": true }, + "extraPublicDirs": [ + "common" + ], "include": [ "common/**/*", "public/**/*", diff --git a/src/plugins/saved_objects/public/finder/saved_object_finder.tsx b/src/plugins/saved_objects/public/finder/saved_object_finder.tsx index da65b5b9fdda8..0a2e4ff78be26 100644 --- a/src/plugins/saved_objects/public/finder/saved_object_finder.tsx +++ b/src/plugins/saved_objects/public/finder/saved_object_finder.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import _ from 'lodash'; +import { debounce } from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; @@ -116,7 +116,7 @@ class SavedObjectFinderUi extends React.Component< private isComponentMounted: boolean = false; - private debouncedFetch = _.debounce(async (query: string) => { + private debouncedFetch = debounce(async (query: string) => { const metaDataMap = this.getSavedObjectMetaDataMap(); const fields = Object.values(metaDataMap) diff --git a/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts b/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts index 1f2f7dc573dc7..40baff22f52c8 100644 --- a/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts +++ b/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import _ from 'lodash'; +import { cloneDeep, defaults, forOwn, assign } from 'lodash'; import { EsResponse, SavedObject, SavedObjectConfig, SavedObjectKibanaServices } from '../../types'; import { SavedObjectNotFound } from '../../../../kibana_utils/public'; import { @@ -28,7 +28,7 @@ export async function applyESResp( ) { const mapping = expandShorthand(config.mapping ?? {}); const savedObjectType = config.type || ''; - savedObject._source = _.cloneDeep(resp._source); + savedObject._source = cloneDeep(resp._source); if (typeof resp.found === 'boolean' && !resp.found) { throw new SavedObjectNotFound(savedObjectType, savedObject.id || ''); } @@ -42,10 +42,10 @@ export async function applyESResp( } // assign the defaults to the response - _.defaults(savedObject._source, savedObject.defaults); + defaults(savedObject._source, savedObject.defaults); // transform the source using _deserializers - _.forOwn(mapping, (fieldMapping, fieldName) => { + forOwn(mapping, (fieldMapping, fieldName) => { if (fieldMapping._deserialize && typeof fieldName === 'string') { savedObject._source[fieldName] = fieldMapping._deserialize( savedObject._source[fieldName] as string @@ -54,7 +54,7 @@ export async function applyESResp( }); // Give obj all of the values in _source.fields - _.assign(savedObject, savedObject._source); + assign(savedObject, savedObject._source); savedObject.lastSavedTitle = savedObject.title; if (meta.searchSourceJSON) { diff --git a/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts b/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts index f1bc614dd1197..7ed729b4b7a0f 100644 --- a/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts +++ b/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import _ from 'lodash'; +import { get } from 'lodash'; import { i18n } from '@kbn/i18n'; import { SavedObjectAttributes } from 'kibana/public'; import { SavedObject, SavedObjectKibanaServices } from '../../types'; @@ -40,7 +40,7 @@ export async function createSource( return await savedObjectsClient.create(esType, source, options); } catch (err) { // record exists, confirm overwriting - if (_.get(err, 'res.status') === 409) { + if (get(err, 'res.status') === 409) { const confirmMessage = i18n.translate( 'savedObjects.confirmModal.overwriteConfirmationMessage', { diff --git a/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts b/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts index cf0cea8d368da..b6dddf8d82b72 100644 --- a/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts +++ b/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import _ from 'lodash'; +import { cloneDeep, assign } from 'lodash'; import { SavedObjectsClientContract } from 'kibana/public'; import { SavedObject, SavedObjectConfig } from '../../types'; @@ -24,7 +24,7 @@ export async function intializeSavedObject( if (!savedObject.id) { // just assign the defaults and be done - _.assign(savedObject, savedObject.defaults); + assign(savedObject, savedObject.defaults); await savedObject.hydrateIndexPattern!(); if (typeof config.afterESResp === 'function') { savedObject = await config.afterESResp(savedObject); @@ -36,7 +36,7 @@ export async function intializeSavedObject( const respMapped = { _id: resp.id, _type: resp.type, - _source: _.cloneDeep(resp.attributes), + _source: cloneDeep(resp.attributes), references: resp.references, found: !!resp._version, }; diff --git a/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts b/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts index eb9bef788fcdc..efe7a85f8f1e1 100644 --- a/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts +++ b/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import _ from 'lodash'; +import { forOwn } from 'lodash'; import { SavedObject, SavedObjectConfig } from '../../types'; import { extractSearchSourceReferences } from '../../../../data/public'; import { expandShorthand } from './field_mapping'; @@ -17,7 +17,7 @@ export function serializeSavedObject(savedObject: SavedObject, config: SavedObje const attributes = {} as Record; const references = []; - _.forOwn(mapping, (fieldMapping, fieldName) => { + forOwn(mapping, (fieldMapping, fieldName) => { if (typeof fieldName !== 'string') { return; } diff --git a/src/plugins/vis_type_timeseries/public/application/components/use_index_patter_mode_callout.tsx b/src/plugins/vis_type_timeseries/public/application/components/use_index_patter_mode_callout.tsx new file mode 100644 index 0000000000000..6191df2ecce5b --- /dev/null +++ b/src/plugins/vis_type_timeseries/public/application/components/use_index_patter_mode_callout.tsx @@ -0,0 +1,69 @@ +/* + * 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 React, { useMemo, useCallback } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import useLocalStorage from 'react-use/lib/useLocalStorage'; +import { EuiButton, EuiCallOut, EuiFlexGroup, EuiLink } from '@elastic/eui'; +import { getCoreStart } from '../../services'; + +const LOCAL_STORAGE_KEY = 'TSVB_INDEX_PATTERN_CALLOUT_HIDDEN'; + +export const UseIndexPatternModeCallout = () => { + const [dismissed, setDismissed] = useLocalStorage(LOCAL_STORAGE_KEY, false); + const indexPatternModeLink = useMemo( + () => getCoreStart().docLinks.links.visualize.tsvbIndexPatternMode, + [] + ); + + const dismissNotice = useCallback(() => { + setDismissed(true); + }, [setDismissed]); + + if (dismissed) { + return null; + } + + return ( + + } + iconType="cheer" + size="s" + > +

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

+ + + + + + + ); +}; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx index d11b5a60b31b7..424b39feff836 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx @@ -12,7 +12,6 @@ import uuid from 'uuid/v4'; import { share } from 'rxjs/operators'; import { isEqual, isEmpty, debounce } from 'lodash'; import { EventEmitter } from 'events'; - import type { IUiSettingsClient } from 'kibana/public'; import { Vis, @@ -35,6 +34,7 @@ import { VisPicker } from './vis_picker'; import { fetchFields, VisFields } from '../lib/fetch_fields'; import { getDataStart, getCoreStart } from '../../services'; import { TimeseriesVisParams } from '../../types'; +import { UseIndexPatternModeCallout } from './use_index_patter_mode_callout'; const VIS_STATE_DEBOUNCE_DELAY = 200; const APP_NAME = 'VisEditor'; @@ -182,6 +182,7 @@ export class VisEditor extends Component
+ {!this.props.vis.params.use_kibana_indexes && }
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor_visualization.js b/src/plugins/vis_type_timeseries/public/application/components/vis_editor_visualization.js index bb264aaacbfbf..801681dbd531f 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor_visualization.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_editor_visualization.js @@ -10,6 +10,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { keys, EuiFlexGroup, EuiFlexItem, EuiButton, EuiText, EuiSwitch } from '@elastic/eui'; import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; +import { pluck } from 'rxjs/operators'; const MIN_CHART_HEIGHT = 300; @@ -55,7 +56,9 @@ class VisEditorVisualizationUI extends Component { await this._handler.render(this._visEl.current); this.props.eventEmitter.emit('embeddableRendered'); - this._subscription = this._handler.handler.data$.subscribe((data) => onDataChange(data.value)); + this._subscription = this._handler.handler.data$ + .pipe(pluck('result')) + .subscribe((data) => onDataChange(data.value)); } /** diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx index cf720657291f8..b03451bdebad2 100644 --- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx +++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx @@ -9,7 +9,7 @@ import './main.scss'; import React from 'react'; import { EuiPage, EuiPageBody, EuiPageContent, EuiPageContentHeader } from '@elastic/eui'; -import { first } from 'rxjs/operators'; +import { first, pluck } from 'rxjs/operators'; import { IInterpreterRenderHandlers, ExpressionValue, @@ -59,7 +59,9 @@ class Main extends React.Component<{}, State> { inspectorAdapters: adapters, searchContext: initialContext as any, }) - .getData(); + .getData() + .pipe(pluck('result')) + .toPromise(); }; let lastRenderHandler: ExpressionRenderHandler; diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/server/plugin.ts b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/server/plugin.ts index 923113cc99ba8..a4903fedd22d5 100644 --- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/server/plugin.ts +++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/server/plugin.ts @@ -7,6 +7,7 @@ */ import { schema } from '@kbn/config-schema'; +import { pluck } from 'rxjs/operators'; import { CoreSetup, Plugin, HttpResponsePayload } from '../../../../../src/core/server'; import { PluginStart as DataPluginStart } from '../../../../../src/plugins/data/server'; import { ExpressionsServerStart } from '../../../../../src/plugins/expressions/server'; @@ -32,13 +33,12 @@ export class TestPlugin implements Plugin { const [, { expressions }] = await core.getStartServices(); - const output = await expressions.run( - req.body.expression, - req.body.input, - { + const output = await expressions + .run(req.body.expression, req.body.input, { kibanaRequest: req, - } - ); + }) + .pipe(pluck('result')) + .toPromise(); return res.ok({ body: output }); } ); diff --git a/x-pack/examples/embedded_lens_example/public/app.tsx b/x-pack/examples/embedded_lens_example/public/app.tsx index a13ddbbd79ef0..bf43e200b902d 100644 --- a/x-pack/examples/embedded_lens_example/public/app.tsx +++ b/x-pack/examples/embedded_lens_example/public/app.tsx @@ -17,6 +17,7 @@ import { EuiPageHeader, EuiPageHeaderSection, EuiTitle, + EuiCallOut, } from '@elastic/eui'; import { IndexPattern } from 'src/plugins/data/public'; import { CoreStart } from 'kibana/public'; @@ -149,6 +150,7 @@ export const App = (props: { { // eslint-disable-next-line no-bitwise @@ -177,12 +179,32 @@ export const App = (props: { setColor(newColor); }} > - Edit in Lens + Edit in Lens (new tab) + + + + { + props.plugins.lens.navigateToPrefilledEditor( + { + id: '', + timeRange: time, + attributes: getLensAttributes(props.defaultIndexPattern!, color), + }, + false + ); + }} + > + Edit in Lens (same tab) { setIsSaveModalVisible(true); @@ -191,6 +213,21 @@ export const App = (props: { Save Visualization + + { + setTime({ + from: '2015-09-18T06:31:44.000Z', + to: '2015-09-23T18:31:44.000Z', + }); + }} + > + Change time range + + {}} onClose={() => setIsSaveModalVisible(false)} /> )} ) : ( -

This demo only works if your default index pattern is set and time based

+ +

This demo only works if your default index pattern is set and time based

+ )} diff --git a/x-pack/plugins/actions/server/plugin.ts b/x-pack/plugins/actions/server/plugin.ts index 65b28015f7f93..2c5287525c597 100644 --- a/x-pack/plugins/actions/server/plugin.ts +++ b/x-pack/plugins/actions/server/plugin.ts @@ -152,7 +152,7 @@ export class ActionsPlugin implements Plugin()) diff --git a/x-pack/plugins/alerting/server/plugin.ts b/x-pack/plugins/alerting/server/plugin.ts index df63625bf242d..b906983017ff6 100644 --- a/x-pack/plugins/alerting/server/plugin.ts +++ b/x-pack/plugins/alerting/server/plugin.ts @@ -153,7 +153,7 @@ export class AlertingPlugin { constructor(initializerContext: PluginInitializerContext) { this.config = initializerContext.config.create().pipe(first()).toPromise(); - this.logger = initializerContext.logger.get('plugins', 'alerting'); + this.logger = initializerContext.logger.get(); this.taskRunnerFactory = new TaskRunnerFactory(); this.alertsClientFactory = new AlertsClientFactory(); this.alertingAuthorizationClientFactory = new AlertingAuthorizationClientFactory(); diff --git a/x-pack/plugins/apm/kibana.json b/x-pack/plugins/apm/kibana.json index 21aef379715c7..ae4510b10acd4 100644 --- a/x-pack/plugins/apm/kibana.json +++ b/x-pack/plugins/apm/kibana.json @@ -3,39 +3,34 @@ "version": "8.0.0", "kibanaVersion": "kibana", "requiredPlugins": [ - "features", "apmOss", "data", - "licensing", - "triggersActionsUi", "embeddable", + "features", + "fleet", "infra", + "licensing", "observability", - "ruleRegistry" + "ruleRegistry", + "triggersActionsUi" ], "optionalPlugins": [ - "spaces", - "cloud", - "usageCollection", - "taskManager", "actions", "alerting", - "security", - "ml", + "cloud", "home", "maps", - "fleet" + "ml", + "security", + "spaces", + "taskManager", + "usageCollection" ], "server": true, "ui": true, - "configPath": [ - "xpack", - "apm" - ], - "extraPublicDirs": [ - "public/style/variables" - ], + "configPath": ["xpack", "apm"], "requiredBundles": [ + "fleet", "home", "kibanaReact", "kibanaUtils", @@ -43,4 +38,4 @@ "ml", "observability" ] -} \ No newline at end of file +} diff --git a/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx b/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx index d069d4a11b494..16b8cc34e9752 100644 --- a/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx +++ b/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx @@ -17,7 +17,7 @@ import { import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider'; export default { - title: 'app/TransactionDurationAlertTrigger', + title: 'alerting/TransactionDurationAlertTrigger', component: TransactionDurationAlertTrigger, decorators: [ (Story: ComponentType) => { @@ -26,7 +26,7 @@ export default { http: { get: (endpoint: string) => { if (endpoint === '/api/apm/environments') { - return Promise.resolve(['production']); + return Promise.resolve({ environments: ['production'] }); } else { return Promise.resolve({ transactionTypes: ['request'], diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/FormRowSelect.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/ServicePage/FormRowSelect.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/FormRowSelect.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/ServicePage/FormRowSelect.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingFormRow.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/SettingsPage/SettingFormRow.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingFormRow.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/SettingsPage/SettingFormRow.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/saveConfig.ts b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/SettingsPage/saveConfig.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/saveConfig.ts rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/SettingsPage/saveConfig.ts diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/index.stories.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/index.stories.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/AgentConfigurationCreateEdit/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/ConfirmDeleteModal.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/ConfirmDeleteModal.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/ConfirmDeleteModal.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/ConfirmDeleteModal.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx rename to x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx index c098be41968dd..93ae8b270b5de 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx @@ -22,13 +22,12 @@ import { getOptionLabel } from '../../../../../../common/agent_configuration/all import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context'; import { FETCH_STATUS } from '../../../../../hooks/use_fetcher'; import { useTheme } from '../../../../../hooks/use_theme'; -import { px, units } from '../../../../../style/variables'; import { createAgentConfigurationHref, editAgentConfigurationHref, } from '../../../../shared/Links/apm/agentConfigurationLinks'; import { LoadingStatePrompt } from '../../../../shared/LoadingStatePrompt'; -import { ITableColumn, ManagedTable } from '../../../../shared/ManagedTable'; +import { ITableColumn, ManagedTable } from '../../../../shared/managed_table'; import { TimestampTooltip } from '../../../../shared/TimestampTooltip'; import { ConfirmDeleteModal } from './ConfirmDeleteModal'; @@ -125,7 +124,7 @@ export function AgentConfigurationList({ { field: 'applied_by_agent', align: 'center', - width: px(units.double), + width: theme.eui.euiSizeXL, name: '', sortable: true, render: (isApplied: boolean) => ( @@ -190,7 +189,7 @@ export function AgentConfigurationList({ ...(canSave ? [ { - width: px(units.double), + width: theme.eui.euiSizeXL, name: '', render: (config: Config) => ( ( { +function Wrapper({ children }: { children?: ReactNode }) { + return ( + + {children} + + ); +} + +describe('DeleteButton', () => { beforeAll(() => { jest.spyOn(apmApi, 'callApmApi').mockResolvedValue({}); }); + it('deletes a custom link', async () => { const onDeleteMock = jest.fn(); const { getByText } = render( - - - + , + { wrapper: Wrapper } ); + await act(async () => { fireEvent.click(getByText('Delete')); }); + expect(onDeleteMock).toHaveBeenCalledTimes(1); }); }); diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/DeleteButton.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/DeleteButton.tsx similarity index 93% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/DeleteButton.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/DeleteButton.tsx index eb6dfdd763ac4..c6547aaff0671 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/DeleteButton.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/DeleteButton.tsx @@ -9,9 +9,9 @@ import { EuiButtonEmpty } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { NotificationsStart } from 'kibana/public'; import React, { useState } from 'react'; -import { px, unit } from '../../../../../../style/variables'; import { callApmApi } from '../../../../../../services/rest/createCallApmApi'; import { useApmPluginContext } from '../../../../../../context/apm_plugin/use_apm_plugin_context'; +import { useTheme } from '../../../../../../hooks/use_theme'; interface Props { onDelete: () => void; @@ -21,6 +21,7 @@ interface Props { export function DeleteButton({ onDelete, customLinkId }: Props) { const [isDeleting, setIsDeleting] = useState(false); const { toasts } = useApmPluginContext().core.notifications; + const theme = useTheme(); return ( {i18n.translate('xpack.apm.settings.customizeUI.customLink.delete', { defaultMessage: 'Delete', diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/Documentation.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/Documentation.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/Documentation.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/Documentation.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/FiltersSection.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/FiltersSection.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/FiltersSection.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/FiltersSection.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/FlyoutFooter.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/FlyoutFooter.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/FlyoutFooter.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/FlyoutFooter.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkSection.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/LinkSection.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkSection.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/LinkSection.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/helper.test.ts b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/helper.test.ts similarity index 98% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/helper.test.ts rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/helper.test.ts index c4420f3a59c81..449968b82943f 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/helper.test.ts +++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/helper.test.ts @@ -8,7 +8,7 @@ import { getSelectOptions, replaceTemplateVariables, -} from '../CreateEditCustomLinkFlyout/helper'; +} from '../create_edit_custom_link_flyout/helper'; import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction'; describe('Custom link helper', () => { diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/helper.ts b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/helper.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/helper.ts rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/helper.ts diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/link_preview.stories.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/link_preview.stories.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/link_preview.test.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/link_preview.test.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/link_preview.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/link_preview.tsx diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/saveCustomLink.ts b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/saveCustomLink.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/saveCustomLink.ts rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/saveCustomLink.ts diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkTable.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx similarity index 95% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkTable.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx index bb948ea665b1e..9593802407193 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkTable.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx @@ -5,22 +5,21 @@ * 2.0. */ -import React, { useState } from 'react'; -import { i18n } from '@kbn/i18n'; import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, - EuiText, EuiSpacer, + EuiText, } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; -import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context'; +import React, { useState } from 'react'; import { CustomLink } from '../../../../../../common/custom_link/custom_link_types'; -import { units, px } from '../../../../../style/variables'; -import { ManagedTable } from '../../../../shared/ManagedTable'; -import { TimestampTooltip } from '../../../../shared/TimestampTooltip'; +import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context'; import { LoadingStatePrompt } from '../../../../shared/LoadingStatePrompt'; +import { ManagedTable } from '../../../../shared/managed_table'; +import { TimestampTooltip } from '../../../../shared/TimestampTooltip'; interface Props { items: CustomLink[]; @@ -50,7 +49,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) { truncateText: true, }, { - width: px(160), + width: 160, align: 'right', field: '@timestamp', name: i18n.translate( @@ -63,7 +62,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) { ), }, { - width: px(units.triple), + width: '48px', name: '', actions: [ ...(canSave diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.test.tsx similarity index 99% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.test.tsx index 7d119b8c406da..22fbfb04734ba 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.test.tsx @@ -22,7 +22,7 @@ import { expectTextsInDocument, expectTextsNotInDocument, } from '../../../../../utils/testHelpers'; -import * as saveCustomLink from './CreateEditCustomLinkFlyout/saveCustomLink'; +import * as saveCustomLink from './create_edit_custom_link_flyout/saveCustomLink'; const data = { customLinks: [ diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.tsx index c1315f165abdb..beea1d8276846 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.tsx @@ -8,21 +8,21 @@ import { EuiFlexGroup, EuiFlexItem, - EuiTitle, - EuiText, EuiSpacer, + EuiText, + EuiTitle, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; import React, { useEffect, useState } from 'react'; import { INVALID_LICENSE } from '../../../../../../common/custom_link'; import { CustomLink } from '../../../../../../common/custom_link/custom_link_types'; -import { FETCH_STATUS, useFetcher } from '../../../../../hooks/use_fetcher'; import { useLicenseContext } from '../../../../../context/license/use_license_context'; +import { FETCH_STATUS, useFetcher } from '../../../../../hooks/use_fetcher'; import { LicensePrompt } from '../../../../shared/license_prompt'; import { CreateCustomLinkButton } from './CreateCustomLinkButton'; -import { CreateEditCustomLinkFlyout } from './CreateEditCustomLinkFlyout'; -import { CustomLinkTable } from './CustomLinkTable'; +import { CreateEditCustomLinkFlyout } from './create_edit_custom_link_flyout'; +import { CustomLinkTable } from './custom_link_table'; import { EmptyPrompt } from './EmptyPrompt'; export function CustomLinkOverview() { diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/index.tsx similarity index 87% rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx rename to x-pack/plugins/apm/public/components/app/Settings/customize_ui/index.tsx index 9ce1f1325bb2c..9d3ee3fa47c1a 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/index.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { CustomLinkOverview } from './CustomLink'; +import { CustomLinkOverview } from './custom_link'; export function CustomizeUI() { return ; diff --git a/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx index 526aad56e743e..f0d7f8d60eb6c 100644 --- a/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx +++ b/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx @@ -6,33 +6,32 @@ */ import { - ScaleType, - Chart, - LineSeries, Axis, + Chart, CurveType, + LineSeries, Position, - timeFormatter, + ScaleType, Settings, + timeFormatter, } from '@elastic/charts'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; import { useParams } from 'react-router-dom'; -import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; +import { useUiTracker } from '../../../../../observability/public'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; +import { useLocalStorage } from '../../../hooks/useLocalStorage'; import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; +import { useTheme } from '../../../hooks/use_theme'; import { APIReturnType } from '../../../services/rest/createCallApmApi'; -import { px } from '../../../style/variables'; +import { ChartContainer } from '../../shared/charts/chart_container'; import { CorrelationsTable, SelectedSignificantTerm, } from './correlations_table'; -import { ChartContainer } from '../../shared/charts/chart_container'; -import { useTheme } from '../../../hooks/use_theme'; import { CustomFields } from './custom_fields'; import { useFieldNames } from './use_field_names'; -import { useLocalStorage } from '../../../hooks/useLocalStorage'; -import { useUiTracker } from '../../../../../observability/public'; type OverallErrorsApiResponse = NonNullable< APIReturnType<'GET /api/apm/correlations/errors/overall_timeseries'> @@ -221,7 +220,7 @@ function ErrorTimeseriesChart({ return ( - + theme.eui.euiSize}; `; const TransactionLinkName = euiStyled.div` - margin-left: ${px(units.half)}; + margin-left: ${({ theme }) => theme.eui.euiSizeS}; display: inline-block; vertical-align: middle; `; diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/index.tsx similarity index 92% rename from x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx rename to x-pack/plugins/apm/public/components/app/error_group_details/index.tsx index 3d22c3863c100..344393d42506f 100644 --- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_details/index.tsx @@ -19,32 +19,31 @@ import React from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { useTrackPageview } from '../../../../../observability/public'; import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n'; -import { useFetcher } from '../../../hooks/use_fetcher'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables'; -import { DetailView } from './DetailView'; -import { ErrorDistribution } from './Distribution'; import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher'; +import { useFetcher } from '../../../hooks/use_fetcher'; +import { DetailView } from './detail_view'; +import { ErrorDistribution } from './Distribution'; const Titles = euiStyled.div` - margin-bottom: ${px(units.plus)}; + margin-bottom: ${({ theme }) => theme.eui.euiSizeL}; `; const Label = euiStyled.div` - margin-bottom: ${px(units.quarter)}; - font-size: ${fontSizes.small}; + margin-bottom: ${({ theme }) => theme.eui.euiSizeXS}; + font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; color: ${({ theme }) => theme.eui.euiColorDarkShade}; `; const Message = euiStyled.div` - font-family: ${fontFamilyCode}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; font-weight: bold; - font-size: ${fontSizes.large}; - margin-bottom: ${px(units.half)}; + font-size: ${({ theme }) => theme.eui.euiFontSizeM}; + margin-bottom: ${({ theme }) => theme.eui.euiSizeS}; `; const Culprit = euiStyled.div` - font-family: ${fontFamilyCode}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; `; function getShortGroupId(errorGroupId?: string) { diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx index e368230fbc77e..a2a92b7e16f8e 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx @@ -13,6 +13,7 @@ import { mockMoment, toJson } from '../../../../utils/testHelpers'; import { ErrorGroupList } from './index'; import props from './__fixtures__/props.json'; import { MemoryRouter } from 'react-router-dom'; +import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common'; jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => { return { @@ -41,13 +42,18 @@ describe('ErrorGroupOverview -> List', () => { it('should render with data', () => { const wrapper = mount( - - - - - - - + + + + + + + + + ); expect(toJson(wrapper)).toMatchSnapshot(); diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap index 92337a97573e4..2b85d6bb3c229 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap @@ -268,7 +268,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = ` exports[`ErrorGroupOverview -> List should render with data 1`] = ` .c0 { - font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace; + font-family: 'Roboto Mono','Consolas','Menlo','Courier',monospace; } .c2 { @@ -286,8 +286,8 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` } .c3 { - font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace; - font-size: 16px; + font-family: 'Roboto Mono','Consolas','Menlo','Courier',monospace; + font-size: 18px; max-width: 100%; white-space: nowrap; overflow: hidden; @@ -295,7 +295,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` } .c4 { - font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace; + font-family: 'Roboto Mono','Consolas','Menlo','Courier',monospace; }
theme.eui.euiCodeFontFamily}; `; const MessageAndCulpritCell = euiStyled.div` @@ -40,13 +33,13 @@ const ErrorLink = euiStyled(ErrorOverviewLink)` `; const MessageLink = euiStyled(ErrorDetailLink)` - font-family: ${fontFamilyCode}; - font-size: ${fontSizes.large}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; + font-size: ${({ theme }) => theme.eui.euiFontSizeM}; ${truncate('100%')}; `; const Culprit = euiStyled.div` - font-family: ${fontFamilyCode}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; `; type ErrorGroupItem = APIReturnType<'GET /api/apm/services/{serviceName}/errors'>['errorGroups'][0]; @@ -86,7 +79,7 @@ function ErrorGroupList({ items, serviceName }: Props) { ), field: 'groupId', sortable: false, - width: px(unit * 6), + width: unit * 6, render: (groupId: string) => { return ( diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx index 886ef8412f35b..4c622758e6c8b 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx @@ -18,7 +18,7 @@ import { useTrackPageview } from '../../../../../observability/public'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher'; import { useFetcher } from '../../../hooks/use_fetcher'; -import { ErrorDistribution } from '../ErrorGroupDetails/Distribution'; +import { ErrorDistribution } from '../error_group_details/Distribution'; import { ErrorGroupList } from './List'; interface ErrorGroupOverviewProps { 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 e4a0ef3ef09f1..cac94885511c1 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 @@ -18,8 +18,8 @@ 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 { ServiceList } from './service_list'; +import { MLCallout } from './service_list/MLCallout'; const initialData = { items: [], diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/HealthBadge.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/HealthBadge.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/HealthBadge.tsx rename to x-pack/plugins/apm/public/components/app/service_inventory/service_list/HealthBadge.tsx diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/MLCallout.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/MLCallout.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/MLCallout.tsx rename to x-pack/plugins/apm/public/components/app/service_inventory/service_list/MLCallout.tsx diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/ServiceListMetric.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/ServiceListMetric.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/ServiceListMetric.tsx rename to x-pack/plugins/apm/public/components/app/service_inventory/service_list/ServiceListMetric.tsx diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/__fixtures__/service_api_mock_data.ts b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/__fixtures__/service_api_mock_data.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/__fixtures__/service_api_mock_data.ts rename to x-pack/plugins/apm/public/components/app/service_inventory/service_list/__fixtures__/service_api_mock_data.ts diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx similarity index 95% rename from x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx rename to x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx index 6c40639594adf..b4644068fd782 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx @@ -5,31 +5,35 @@ * 2.0. */ -import { EuiFlexItem, EuiFlexGroup, EuiToolTip } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiText, + EuiToolTip, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { orderBy } from 'lodash'; import React, { useMemo } from 'react'; import { ValuesType } from 'utility-types'; -import { orderBy } from 'lodash'; -import { EuiIcon } from '@elastic/eui'; -import { EuiText } from '@elastic/eui'; import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common'; +import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n'; +import { ServiceHealthStatus } from '../../../../../common/service_health_status'; import { TRANSACTION_PAGE_LOAD, TRANSACTION_REQUEST, } from '../../../../../common/transaction_types'; -import { APIReturnType } from '../../../../services/rest/createCallApmApi'; -import { ServiceHealthStatus } from '../../../../../common/service_health_status'; import { - asPercent, asMillisecondDuration, + asPercent, asTransactionRate, } from '../../../../../common/utils/formatters'; -import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n'; -import { fontSizes, px, truncate, unit } from '../../../../style/variables'; -import { ManagedTable, ITableColumn } from '../../../shared/ManagedTable'; +import { APIReturnType } from '../../../../services/rest/createCallApmApi'; +import { truncate, unit } from '../../../../utils/style'; +import { AgentIcon } from '../../../shared/agent_icon'; import { EnvironmentBadge } from '../../../shared/EnvironmentBadge'; import { ServiceOrTransactionsOverviewLink } from '../../../shared/Links/apm/service_transactions_overview_link'; -import { AgentIcon } from '../../../shared/agent_icon'; +import { ITableColumn, ManagedTable } from '../../../shared/managed_table'; import { HealthBadge } from './HealthBadge'; import { ServiceListMetric } from './ServiceListMetric'; @@ -47,7 +51,7 @@ function formatString(value?: string | null) { } const AppLink = euiStyled(ServiceOrTransactionsOverviewLink)` - font-size: ${fontSizes.large}; + font-size: ${({ theme }) => theme.eui.euiFontSizeM} ${truncate('100%')}; `; @@ -80,7 +84,7 @@ export function getServiceColumns({ name: i18n.translate('xpack.apm.servicesTable.healthColumnLabel', { defaultMessage: 'Health', }), - width: px(unit * 6), + width: unit * 6, sortable: true, render: (_, { healthStatus }) => { return ( @@ -130,7 +134,7 @@ export function getServiceColumns({ name: i18n.translate('xpack.apm.servicesTable.environmentColumnLabel', { defaultMessage: 'Environment', }), - width: px(unit * 10), + width: unit * 10, sortable: true, render: (_, { environments }) => ( @@ -144,7 +148,7 @@ export function getServiceColumns({ 'xpack.apm.servicesTable.transactionColumnLabel', { defaultMessage: 'Transaction type' } ), - width: px(unit * 10), + width: unit * 10, sortable: true, }, ] @@ -164,7 +168,7 @@ export function getServiceColumns({ /> ), align: 'left', - width: px(unit * 10), + width: unit * 10, }, { field: 'transactionsPerMinute', @@ -181,7 +185,7 @@ export function getServiceColumns({ /> ), align: 'left', - width: px(unit * 10), + width: unit * 10, }, { field: 'transactionErrorRate', @@ -204,7 +208,7 @@ export function getServiceColumns({ ); }, align: 'left', - width: px(unit * 10), + width: unit * 10, }, ]; } diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/service_list.test.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.test.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/service_list.test.tsx rename to x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.test.tsx diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx index fe3922060533a..6b7626514d03f 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx @@ -17,7 +17,7 @@ import { Popover } from '.'; import exampleGroupedConnectionsData from '../__stories__/example_grouped_connections.json'; export default { - title: 'app/service_map/Popover', + title: 'app/ServiceMap/Popover', component: Popover, decorators: [ (Story: ComponentType) => { diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/ServiceStatsFetcher.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/ServiceStatsFetcher.tsx index a71f299ab296c..3155a65b06aca 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/Popover/ServiceStatsFetcher.tsx +++ b/x-pack/plugins/apm/public/components/app/service_map/Popover/ServiceStatsFetcher.tsx @@ -18,7 +18,7 @@ import { ServiceNodeStats } from '../../../../../common/service_map'; import { ServiceStatsList } from './ServiceStatsList'; import { useFetcher, FETCH_STATUS } from '../../../../hooks/use_fetcher'; import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; -import { AnomalyDetection } from './AnomalyDetection'; +import { AnomalyDetection } from './anomaly_detection'; import { ServiceAnomalyStats } from '../../../../../common/anomaly_detection'; interface ServiceStatsFetcherProps { diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/AnomalyDetection.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/anomaly_detection.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/app/service_map/Popover/AnomalyDetection.tsx rename to x-pack/plugins/apm/public/components/app/service_map/Popover/anomaly_detection.tsx index c98116a69da66..1ceb90ff838ad 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/Popover/AnomalyDetection.tsx +++ b/x-pack/plugins/apm/public/components/app/service_map/Popover/anomaly_detection.tsx @@ -5,30 +5,29 @@ * 2.0. */ -import { i18n } from '@kbn/i18n'; -import React from 'react'; import { EuiFlexGroup, EuiFlexItem, - EuiTitle, - EuiIconTip, EuiHealth, + EuiIconTip, + EuiTitle, } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common'; +import { + getSeverity, + ServiceAnomalyStats, +} from '../../../../../common/anomaly_detection'; import { getServiceHealthStatus, getServiceHealthStatusColor, } from '../../../../../common/service_health_status'; +import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types'; +import { asDuration, asInteger } from '../../../../../common/utils/formatters'; import { useTheme } from '../../../../hooks/use_theme'; -import { fontSize, px } from '../../../../style/variables'; -import { asInteger, asDuration } from '../../../../../common/utils/formatters'; import { MLSingleMetricLink } from '../../../shared/Links/MachineLearningLinks/MLSingleMetricLink'; import { popoverWidth } from '../cytoscape_options'; -import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types'; -import { - getSeverity, - ServiceAnomalyStats, -} from '../../../../../common/anomaly_detection'; const HealthStatusTitle = euiStyled(EuiTitle)` display: inline; @@ -47,8 +46,8 @@ const SubduedText = euiStyled.span` const EnableText = euiStyled.section` color: ${({ theme }) => theme.eui.euiTextSubduedColor}; line-height: 1.4; - font-size: ${fontSize}; - width: ${px(popoverWidth)}; + font-size: ${({ theme }) => theme.eui.euiFontSizeS}; + width: ${popoverWidth}px; `; export const ContentLine = euiStyled.section` diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/service_stats_list.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/service_stats_list.stories.tsx index 83f0a3ea7e4b9..a8f004a7295d9 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/Popover/service_stats_list.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/service_map/Popover/service_stats_list.stories.tsx @@ -10,7 +10,7 @@ import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_rea import { ServiceStatsList } from './ServiceStatsList'; export default { - title: 'app/service_map/Popover/ServiceStatsList', + title: 'app/ServiceMap/Popover/ServiceStatsList', component: ServiceStatsList, decorators: [ (Story: ComponentType) => ( diff --git a/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx index dbab10d7b93b6..8bc0d7239e9c5 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx @@ -12,7 +12,7 @@ import { Cytoscape } from '../Cytoscape'; import { Centerer } from './centerer'; export default { - title: 'app/service_map/Cytoscape', + title: 'app/ServiceMap/Cytoscape', component: Cytoscape, decorators: [ (Story: ComponentType) => ( diff --git a/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx index 84351d5716edb..45de632a152d4 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx @@ -25,7 +25,7 @@ import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json'; import exampleResponseTodo from './example_response_todo.json'; import { generateServiceMapElements } from './generate_service_map_elements'; -const STORYBOOK_PATH = 'app/service_map/Cytoscape/Example data'; +const STORYBOOK_PATH = 'app/ServiceMap/Example data'; const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`; function getSessionJson() { @@ -40,7 +40,7 @@ function getHeight() { } export default { - title: 'app/service_map/Cytoscape/Example data', + title: 'app/ServiceMap/Example data', component: Cytoscape, decorators: [ (Story: ComponentType) => ( diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx index a147528d42cae..07afcbc9c4682 100644 --- a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx @@ -20,12 +20,12 @@ import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes'; +import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; +import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; import { useServiceMetricChartsFetcher } from '../../../hooks/use_service_metric_charts_fetcher'; -import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; -import { px, truncate, unit } from '../../../style/variables'; +import { truncate, unit } from '../../../utils/style'; import { MetricsChart } from '../../shared/charts/metrics_chart'; import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink'; @@ -36,7 +36,7 @@ const INITIAL_DATA = { const Truncate = euiStyled.span` display: block; - ${truncate(px(unit * 12))} + ${truncate(unit * 12)} `; interface ServiceNodeMetricsProps { diff --git a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx index 1a432f90f1e3a..58541e2c5501b 100644 --- a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx @@ -19,16 +19,16 @@ import { } from '../../../../common/utils/formatters'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { useFetcher } from '../../../hooks/use_fetcher'; -import { px, truncate, unit } from '../../../style/variables'; +import { truncate, unit } from '../../../utils/style'; import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink'; -import { ITableColumn, ManagedTable } from '../../shared/ManagedTable'; +import { ITableColumn, ManagedTable } from '../../shared/managed_table'; const INITIAL_PAGE_SIZE = 25; const INITIAL_SORT_FIELD = 'cpu'; const INITIAL_SORT_DIRECTION = 'desc'; const ServiceNodeName = euiStyled.div` - ${truncate(px(8 * unit))} + ${truncate(8 * unit)} `; interface ServiceNodeOverviewProps { diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx index b1a4d5ca5fda7..0067558865bd6 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx @@ -15,19 +15,19 @@ import { import { i18n } from '@kbn/i18n'; import { keyBy } from 'lodash'; import React from 'react'; -import { offsetPreviousPeriodCoordinates } from '../../../../../common/utils/offset_previous_period_coordinate'; -import { Coordinate } from '../../../../../typings/timeseries'; import { getNextEnvironmentUrlParam } from '../../../../../common/environment_filter_values'; import { asMillisecondDuration, asPercent, asTransactionRate, } from '../../../../../common/utils/formatters'; +import { offsetPreviousPeriodCoordinates } from '../../../../../common/utils/offset_previous_period_coordinate'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { ServiceDependencyItem } from '../../../../../server/lib/services/get_service_dependencies'; +import { Coordinate } from '../../../../../typings/timeseries'; import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher'; -import { px, unit } from '../../../../style/variables'; +import { unit } from '../../../../utils/style'; import { AgentIcon } from '../../../shared/agent_icon'; import { SparkPlot } from '../../../shared/charts/spark_plot'; import { ImpactBar } from '../../../shared/ImpactBar'; @@ -156,7 +156,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) { defaultMessage: 'Latency (avg.)', } ), - width: px(unit * 10), + width: `${unit * 10}px`, render: (_, { latency }) => { return ( { return ( { return ( { return ( diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx index 4ad83f7d87426..b458f6147b3f1 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx @@ -9,12 +9,12 @@ import { EuiBasicTableColumn } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { asInteger } from '../../../../../common/utils/formatters'; -import { px, unit } from '../../../../style/variables'; +import { APIReturnType } from '../../../../services/rest/createCallApmApi'; +import { unit } from '../../../../utils/style'; import { SparkPlot } from '../../../shared/charts/spark_plot'; import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink'; import { TimestampTooltip } from '../../../shared/TimestampTooltip'; import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip'; -import { APIReturnType } from '../../../../services/rest/createCallApmApi'; type ErrorGroupMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/main_statistics'>; type ErrorGroupDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/detailed_statistics'>; @@ -61,7 +61,7 @@ export function getColumns({ render: (_, { last_seen: lastSeen }) => { return ; }, - width: px(unit * 9), + width: `${unit * 9}px`, }, { field: 'occurrences', @@ -71,7 +71,7 @@ export function getColumns({ defaultMessage: 'Occurrences', } ), - width: px(unit * 12), + width: `${unit * 12}px`, render: (_, { occurrences, group_id: errorGroupId }) => { const currentPeriodTimeseries = errorGroupDetailedStatistics?.currentPeriod?.[errorGroupId] diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx index a92efff103910..f9600b9d7f418 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx @@ -25,14 +25,14 @@ import { asTransactionRate, } from '../../../../../common/utils/formatters'; import { APIReturnType } from '../../../../services/rest/createCallApmApi'; -import { px, unit } from '../../../../style/variables'; +import { unit } from '../../../../utils/style'; import { SparkPlot } from '../../../shared/charts/spark_plot'; import { MetricOverviewLink } from '../../../shared/Links/apm/MetricOverviewLink'; import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/ServiceNodeMetricOverviewLink'; import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip'; import { getLatencyColumnLabel } from '../get_latency_column_label'; -import { InstanceActionsMenu } from './instance_actions_menu'; import { MainStatsServiceInstanceItem } from '../service_overview_instances_chart_and_table'; +import { InstanceActionsMenu } from './instance_actions_menu'; type ServiceInstanceDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/detailed_statistics'>; @@ -98,7 +98,7 @@ export function getColumns({ { field: 'latency', name: getLatencyColumnLabel(latencyAggregationType), - width: px(unit * 10), + width: `${unit * 10}px`, render: (_, { serviceNodeName, latency }) => { const currentPeriodTimestamp = detailedStatsData?.currentPeriod?.[serviceNodeName]?.latency; @@ -123,7 +123,7 @@ export function getColumns({ 'xpack.apm.serviceOverview.instancesTableColumnThroughput', { defaultMessage: 'Throughput' } ), - width: px(unit * 10), + width: `${unit * 10}px`, render: (_, { serviceNodeName, throughput }) => { const currentPeriodTimestamp = detailedStatsData?.currentPeriod?.[serviceNodeName]?.throughput; @@ -149,7 +149,7 @@ export function getColumns({ 'xpack.apm.serviceOverview.instancesTableColumnErrorRate', { defaultMessage: 'Error rate' } ), - width: px(unit * 8), + width: `${unit * 8}px`, render: (_, { serviceNodeName, errorRate }) => { const currentPeriodTimestamp = detailedStatsData?.currentPeriod?.[serviceNodeName]?.errorRate; @@ -175,7 +175,7 @@ export function getColumns({ 'xpack.apm.serviceOverview.instancesTableColumnCpuUsage', { defaultMessage: 'CPU usage (avg.)' } ), - width: px(unit * 8), + width: `${unit * 8}px`, render: (_, { serviceNodeName, cpuUsage }) => { const currentPeriodTimestamp = detailedStatsData?.currentPeriod?.[serviceNodeName]?.cpuUsage; @@ -201,7 +201,7 @@ export function getColumns({ 'xpack.apm.serviceOverview.instancesTableColumnMemoryUsage', { defaultMessage: 'Memory usage (avg.)' } ), - width: px(unit * 9), + width: `${unit * 9}px`, render: (_, { serviceNodeName, memoryUsage }) => { const currentPeriodTimestamp = detailedStatsData?.currentPeriod?.[serviceNodeName]?.memoryUsage; diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx index f03c2b2fc9091..a2aaa61e8a661 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx @@ -20,8 +20,7 @@ import { SERVICE_NODE_NAME } from '../../../../../../common/elasticsearch_fieldn import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context'; import { useUrlParams } from '../../../../../context/url_params_context/use_url_params'; import { FETCH_STATUS } from '../../../../../hooks/use_fetcher'; -import { px } from '../../../../../style/variables'; -import { pushNewItemToKueryBar } from '../../../../shared/KueryBar/utils'; +import { pushNewItemToKueryBar } from '../../../../shared/kuery_bar/utils'; import { useMetricOverviewHref } from '../../../../shared/Links/apm/MetricOverviewLink'; import { useServiceNodeMetricOverviewHref } from '../../../../shared/Links/apm/ServiceNodeMetricOverviewLink'; import { useInstanceDetailsFetcher } from '../use_instance_details_fetcher'; @@ -33,7 +32,7 @@ interface Props { onClose: () => void; } -const POPOVER_WIDTH = px(305); +const POPOVER_WIDTH = '305px'; export function InstanceActionsMenu({ serviceName, diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx index 35cecc49e293b..0c77051bea293 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx @@ -28,10 +28,9 @@ import { useUrlParams } from '../../../../context/url_params_context/use_url_par import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; import { useTheme } from '../../../../hooks/use_theme'; import { APIReturnType } from '../../../../services/rest/createCallApmApi'; -import { pct } from '../../../../style/variables'; import { getAgentIcon } from '../../../shared/agent_icon/get_agent_icon'; import { KeyValueFilterList } from '../../../shared/key_value_filter_list'; -import { pushNewItemToKueryBar } from '../../../shared/KueryBar/utils'; +import { pushNewItemToKueryBar } from '../../../shared/kuery_bar/utils'; import { getCloudIcon, getContainerIcon } from '../../../shared/service_icons'; import { useInstanceDetailsFetcher } from './use_instance_details_fetcher'; @@ -78,7 +77,7 @@ export function InstanceDetails({ serviceName, serviceNodeName }: Props) { status === FETCH_STATUS.NOT_INITIATED ) { return ( -
+
); diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/get_columns.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/get_columns.tsx index 9ac1c7d64d8b2..2e46e23ccaa42 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/get_columns.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/get_columns.tsx @@ -16,7 +16,7 @@ import { asTransactionRate, } from '../../../../../common/utils/formatters'; import { APIReturnType } from '../../../../services/rest/createCallApmApi'; -import { px, unit } from '../../../../style/variables'; +import { unit } from '../../../../utils/style'; import { SparkPlot } from '../../../shared/charts/spark_plot'; import { ImpactBar } from '../../../shared/ImpactBar'; import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link'; @@ -71,7 +71,7 @@ export function getColumns({ field: 'latency', sortable: true, name: getLatencyColumnLabel(latencyAggregationType), - width: px(unit * 10), + width: `${unit * 10}px`, render: (_, { latency, name }) => { const currentTimeseries = transactionGroupDetailedStatistics?.currentPeriod?.[name]?.latency; @@ -97,7 +97,7 @@ export function getColumns({ 'xpack.apm.serviceOverview.transactionsTableColumnThroughput', { defaultMessage: 'Throughput' } ), - width: px(unit * 10), + width: `${unit * 10}px`, render: (_, { throughput, name }) => { const currentTimeseries = transactionGroupDetailedStatistics?.currentPeriod?.[name]?.throughput; @@ -124,7 +124,7 @@ export function getColumns({ 'xpack.apm.serviceOverview.transactionsTableColumnErrorRate', { defaultMessage: 'Error rate' } ), - width: px(unit * 8), + width: `${unit * 8}px`, render: (_, { errorRate, name }) => { const currentTimeseries = transactionGroupDetailedStatistics?.currentPeriod?.[name]?.errorRate; @@ -150,7 +150,7 @@ export function getColumns({ 'xpack.apm.serviceOverview.transactionsTableColumnImpact', { defaultMessage: 'Impact' } ), - width: px(unit * 5), + width: `${unit * 5}px`, render: (_, { name }) => { const currentImpact = transactionGroupDetailedStatistics?.currentPeriod?.[name]?.impact ?? diff --git a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx index 1adf58d0394c6..82ac3a04f63f1 100644 --- a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx +++ b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx @@ -13,16 +13,16 @@ import { Settings, TooltipInfo, } from '@elastic/charts'; -import { EuiInMemoryTable } from '@elastic/eui'; -import { EuiFieldText } from '@elastic/eui'; -import { EuiToolTip } from '@elastic/eui'; import { EuiCheckbox, + EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiIcon, + EuiInMemoryTable, euiPaletteForTemperature, EuiText, + EuiToolTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { find, sumBy } from 'lodash'; @@ -44,7 +44,7 @@ import { } from '../../../../common/utils/formatters'; import { useFetcher } from '../../../hooks/use_fetcher'; import { useTheme } from '../../../hooks/use_theme'; -import { px, unit } from '../../../style/variables'; +import { unit } from '../../../utils/style'; const colors = euiPaletteForTemperature(100).slice(50, 85); @@ -335,7 +335,7 @@ export function ServiceProfilingFlamegraph({ /> - + formatValue(item.value, valueUnit), - width: px(unit * 6), + width: `${unit * 6}px`, }, ]} /> diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx index bf60463255d64..d280b36a603ba 100644 --- a/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx @@ -11,7 +11,7 @@ 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 { SearchBar } from '../../shared/search_bar'; -import { TraceList } from './TraceList'; +import { TraceList } from './trace_list'; type TracesAPIResponse = APIReturnType<'GET /api/apm/traces'>; const DEFAULT_RESPONSE: TracesAPIResponse = { diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx similarity index 95% rename from x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx rename to x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx index 774333c35b479..f1c8df553abf7 100644 --- a/x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx +++ b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx @@ -13,18 +13,18 @@ import { asMillisecondDuration, asTransactionRate, } from '../../../../common/utils/formatters'; -import { fontSizes, truncate } from '../../../style/variables'; +import { APIReturnType } from '../../../services/rest/createCallApmApi'; +import { truncate } from '../../../utils/style'; import { EmptyMessage } from '../../shared/EmptyMessage'; import { ImpactBar } from '../../shared/ImpactBar'; -import { ITableColumn, ManagedTable } from '../../shared/ManagedTable'; -import { LoadingStatePrompt } from '../../shared/LoadingStatePrompt'; import { TransactionDetailLink } from '../../shared/Links/apm/transaction_detail_link'; -import { APIReturnType } from '../../../services/rest/createCallApmApi'; +import { LoadingStatePrompt } from '../../shared/LoadingStatePrompt'; +import { ITableColumn, ManagedTable } from '../../shared/managed_table'; type TraceGroup = APIReturnType<'GET /api/apm/traces'>['items'][0]; const StyledTransactionLink = euiStyled(TransactionDetailLink)` - font-size: ${fontSizes.large}; + font-size: ${({ theme }) => theme.eui.euiFontSizeM}; ${truncate('100%')}; `; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx index c7dae6ce3d1d4..f59b3ddab7c05 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx @@ -29,7 +29,7 @@ import type { IUrlParams } from '../../../../context/url_params_context/types'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; import { useTheme } from '../../../../hooks/use_theme'; import { APIReturnType } from '../../../../services/rest/createCallApmApi'; -import { unit } from '../../../../style/variables'; +import { unit } from '../../../../utils/style'; import { ChartContainer } from '../../../shared/charts/chart_container'; import { EmptyMessage } from '../../../shared/EmptyMessage'; import { CustomTooltip } from './custom_tooltip'; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx deleted file mode 100644 index 3584309ebb20c..0000000000000 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React, { Fragment } from 'react'; -import { EuiSpacer, EuiTitle } from '@elastic/eui'; -import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common'; -import { - borderRadius, - fontFamilyCode, - fontSize, - px, - unit, - units, -} from '../../../../../../../style/variables'; -import { Span } from '../../../../../../../../typings/es_schemas/ui/span'; - -const ContextUrl = euiStyled.div` - padding: ${px(units.half)} ${px(unit)}; - background: ${({ theme }) => theme.eui.euiColorLightestShade}; - border-radius: ${borderRadius}; - border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - font-family: ${fontFamilyCode}; - font-size: ${fontSize}; -`; - -interface Props { - httpContext: NonNullable['http']; -} - -export function HttpContext({ httpContext }: Props) { - const url = httpContext?.url?.original; - - if (!url) { - return null; - } - - return ( - - -

HTTP URL

- - - {url} - - - ); -} diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx index 3cac05ba2d96a..1e13e224a511a 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx @@ -19,7 +19,7 @@ import { HeightRetainer } from '../../shared/HeightRetainer'; import { fromQuery, toQuery } from '../../shared/Links/url_helpers'; import { TransactionDistribution } from './Distribution'; import { useWaterfallFetcher } from './use_waterfall_fetcher'; -import { WaterfallWithSummmary } from './WaterfallWithSummmary'; +import { WaterfallWithSummary } from './waterfall_with_summary'; interface Sample { traceId: string; @@ -107,7 +107,7 @@ export function TransactionDetails() { - ; @@ -39,7 +39,7 @@ interface Props { traceSamples: DistributionBucket['samples']; } -export function WaterfallWithSummmary({ +export function WaterfallWithSummary({ urlParams, waterfall, exceedsMax, diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks.test.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks.test.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/index.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Marks/index.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/FlyoutTopLevelProperties.tsx similarity index 97% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/FlyoutTopLevelProperties.tsx index 5f4ed551597ed..0ad0fe872a840 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/FlyoutTopLevelProperties.tsx @@ -16,7 +16,7 @@ import { import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction'; import { ServiceOrTransactionsOverviewLink } from '../../../../../shared/Links/apm/service_transactions_overview_link'; import { TransactionDetailLink } from '../../../../../shared/Links/apm/transaction_detail_link'; -import { StickyProperties } from '../../../../../shared/StickyProperties'; +import { StickyProperties } from '../../../../../shared/sticky_properties'; interface Props { transaction?: Transaction; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/ResponsiveFlyout.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/ResponsiveFlyout.tsx diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/TransactionFlyout/index.tsx similarity index 98% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/TransactionFlyout/index.tsx index 680edf880a70e..6468e6ed1e2c8 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/TransactionFlyout/index.tsx @@ -18,7 +18,7 @@ import { import { i18n } from '@kbn/i18n'; import React from 'react'; import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction'; -import { TransactionActionMenu } from '../../../../../../shared/TransactionActionMenu/TransactionActionMenu'; +import { TransactionActionMenu } from '../../../../../../shared/transaction_action_menu/TransactionActionMenu'; import { TransactionSummary } from '../../../../../../shared/Summary/TransactionSummary'; import { FlyoutTopLevelProperties } from '../FlyoutTopLevelProperties'; import { ResponsiveFlyout } from '../ResponsiveFlyout'; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/WaterfallFlyout.tsx similarity index 97% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/WaterfallFlyout.tsx index fddf4fcb4efc9..ec6d550affb91 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/WaterfallFlyout.tsx @@ -8,7 +8,7 @@ import { History } from 'history'; import React from 'react'; import { useHistory } from 'react-router-dom'; -import { SpanFlyout } from './SpanFlyout'; +import { SpanFlyout } from './span_flyout'; import { TransactionFlyout } from './TransactionFlyout'; import { IWaterfall } from './waterfall_helpers/waterfall_helpers'; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/accordion_waterfall.tsx similarity index 98% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/accordion_waterfall.tsx index b0721791081fa..1935d373caf79 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/accordion_waterfall.tsx @@ -10,7 +10,7 @@ import { isEmpty } from 'lodash'; import React, { useState } from 'react'; import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common'; import { Margins } from '../../../../../shared/charts/Timeline'; -import { WaterfallItem } from './WaterfallItem'; +import { WaterfallItem } from './waterfall_item'; import { IWaterfall, IWaterfallSpanOrTransaction, diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/StickySpanProperties.tsx similarity index 97% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/StickySpanProperties.tsx index 60d328c98a4b7..9e1174818c43b 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/StickySpanProperties.tsx @@ -19,7 +19,7 @@ import { Span } from '../../../../../../../../typings/es_schemas/ui/span'; import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction'; import { ServiceOrTransactionsOverviewLink } from '../../../../../../shared/Links/apm/service_transactions_overview_link'; import { TransactionDetailLink } from '../../../../../../shared/Links/apm/transaction_detail_link'; -import { StickyProperties } from '../../../../../../shared/StickyProperties'; +import { StickyProperties } from '../../../../../../shared/sticky_properties'; interface Props { span: Span; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/database_context.tsx similarity index 76% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/database_context.tsx index 6fd6873cf565e..4279205743442 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/database_context.tsx @@ -9,39 +9,35 @@ import { EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { tint } from 'polished'; import React, { Fragment } from 'react'; +import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'; import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode'; -import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common'; import { Span } from '../../../../../../../../typings/es_schemas/ui/span'; -import { - borderRadius, - fontFamilyCode, - fontSize, - px, - unit, - units, -} from '../../../../../../../style/variables'; -import { TruncateHeightSection } from './TruncateHeightSection'; +import { useTheme } from '../../../../../../../hooks/use_theme'; +import { TruncateHeightSection } from './truncate_height_section'; SyntaxHighlighter.registerLanguage('sql', sql); const DatabaseStatement = euiStyled.div` - padding: ${px(units.half)} ${px(unit)}; + padding: ${({ theme }) => + `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m}`}; background: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)}; - border-radius: ${borderRadius}; + border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - font-family: ${fontFamilyCode}; - font-size: ${fontSize}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; + font-size: ${({ theme }) => theme.eui.euiFontSizeS}; `; -const dbSyntaxLineHeight = unit * 1.5; - interface Props { dbContext?: NonNullable['db']; } export function DatabaseContext({ dbContext }: Props) { + const theme = useTheme(); + const dbSyntaxLineHeight = theme.eui.euiSizeL; + const previewHeight = 240; // 10 * dbSyntaxLineHeight + if (!dbContext || !dbContext.statement) { return null; } @@ -64,7 +60,7 @@ export function DatabaseContext({ dbContext }: Props) { - + theme.eui.euiSizeXS}; `; const HttpInfoContainer = euiStyled('div')` - margin-right: ${px(units.quarter)}; + margin-right: ${({ theme }) => theme.eui.euiSizeXS}; `; interface Props { diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/truncate_height_section.tsx similarity index 92% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/truncate_height_section.tsx index 181fcb91ba3e6..4c845e16348e7 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/truncate_height_section.tsx @@ -9,10 +9,9 @@ import { EuiIcon, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { Fragment, ReactNode, useEffect, useRef, useState } from 'react'; import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common'; -import { px, units } from '../../../../../../../style/variables'; const ToggleButtonContainer = euiStyled.div` - margin-top: ${px(units.half)}; + margin-top: ${({ theme }) => theme.eui.euiSizeS} user-select: none; `; @@ -41,7 +40,7 @@ export function TruncateHeightSection({ children, previewHeight }: Props) { ref={contentContainerEl} style={{ overflow: 'hidden', - maxHeight: isOpen ? 'initial' : px(previewHeight), + maxHeight: isOpen ? 'initial' : previewHeight, }} > {children} diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.stories.tsx similarity index 91% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.stories.tsx index 8275aa1e5f156..6b52fbe2d784a 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { SyncBadge, SyncBadgeProps } from './SyncBadge'; +import { SyncBadge, SyncBadgeProps } from './sync_badge'; export default { title: 'app/TransactionDetails/SyncBadge', diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.tsx similarity index 92% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.tsx index b9e4c6951fa06..cfc369fa12a26 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.tsx @@ -9,11 +9,10 @@ import { EuiBadge } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common'; -import { px, units } from '../../../../../../style/variables'; const SpanBadge = euiStyled(EuiBadge)` display: inline-block; - margin-right: ${px(units.quarter)}; + margin-right: ${({ theme }) => theme.eui.euiSizeXS}; `; export interface SyncBadgeProps { diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/mock_responses/spans.json similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/mock_responses/spans.json diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/mock_responses/transaction.json similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/mock_responses/transaction.json diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.test.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.ts diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_item.tsx similarity index 93% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_item.tsx index f3e1547c4b8b8..a2c2c869a079c 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_item.tsx @@ -5,20 +5,18 @@ * 2.0. */ -import React, { ReactNode } from 'react'; - import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import React, { ReactNode } from 'react'; import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common'; -import { asDuration } from '../../../../../../../common/utils/formatters'; import { isRumAgentName } from '../../../../../../../common/agent_name'; -import { px, unit, units } from '../../../../../../style/variables'; -import { ErrorCount } from '../../ErrorCount'; -import { IWaterfallSpanOrTransaction } from './waterfall_helpers/waterfall_helpers'; -import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink'; import { TRACE_ID } from '../../../../../../../common/elasticsearch_fieldnames'; -import { SyncBadge } from './SyncBadge'; +import { asDuration } from '../../../../../../../common/utils/formatters'; import { Margins } from '../../../../../shared/charts/Timeline'; +import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink'; +import { ErrorCount } from '../../ErrorCount'; +import { SyncBadge } from './sync_badge'; +import { IWaterfallSpanOrTransaction } from './waterfall_helpers/waterfall_helpers'; type ItemType = 'transaction' | 'span' | 'error'; @@ -37,10 +35,10 @@ const Container = euiStyled.div` position: relative; display: block; user-select: none; - padding-top: ${px(units.half)}; - padding-bottom: ${px(units.plus)}; - margin-right: ${(props) => px(props.timelineMargins.right)}; - margin-left: ${(props) => px(props.timelineMargins.left)}; + padding-top: ${({ theme }) => theme.eui.paddingSizes.s}; + padding-bottom: ${({ theme }) => theme.eui.euiSizeM}; + margin-right: ${(props) => props.timelineMargins.right}px; + margin-left: ${(props) => props.timelineMargins.left}px; background-color: ${({ isSelected, theme }) => isSelected ? theme.eui.euiColorLightestShade : 'initial'}; cursor: pointer; @@ -53,7 +51,7 @@ const Container = euiStyled.div` const ItemBar = euiStyled.div` box-sizing: border-box; position: relative; - height: ${px(unit)}; + height: ${({ theme }) => theme.eui.euiSize}; min-width: 2px; background-color: ${(props) => props.color}; `; @@ -63,11 +61,11 @@ const ItemText = euiStyled.span` right: 0; display: flex; align-items: center; - height: ${px(units.plus)}; + height: ${({ theme }) => theme.eui.euiSizeL}; /* add margin to all direct descendants */ & > * { - margin-right: ${px(units.half)}; + margin-right: ${({ theme }) => theme.eui.euiSizeS}; white-space: nowrap; } `; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallContainer.stories.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallContainer.stories.tsx diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallLegends.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallLegends.tsx similarity index 95% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallLegends.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallLegends.tsx index d6f6de2d9179b..aaa9b3e45ee22 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallLegends.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallLegends.tsx @@ -10,7 +10,7 @@ import { EuiFlexItem } from '@elastic/eui'; import { EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { Legend } from '../../../../shared/charts/Legend'; +import { Legend } from '../../../../shared/charts/Timeline/legend'; import { IWaterfallLegend, WaterfallLegendType, diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfallContainer.stories.data.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfallContainer.stories.data.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 4f0f92cafa5e7..041c12822357c 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 @@ -24,7 +24,7 @@ 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 { TransactionList } from './TransactionList'; +import { TransactionList } from './transaction_list'; import { useRedirect } from './useRedirect'; import { useTransactionListFetcher } from './use_transaction_list'; diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_list/index.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx rename to x-pack/plugins/apm/public/components/app/transaction_overview/transaction_list/index.tsx index 795a6e66f70a4..dc3bf924d6fdc 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_list/index.tsx @@ -15,9 +15,9 @@ import { asMillisecondDuration, asTransactionRate, } from '../../../../../common/utils/formatters'; -import { fontFamilyCode, truncate } from '../../../../style/variables'; +import { truncate } from '../../../../utils/style'; import { ImpactBar } from '../../../shared/ImpactBar'; -import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable'; +import { ITableColumn, ManagedTable } from '../../../shared/managed_table'; import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt'; import { EmptyMessage } from '../../../shared/EmptyMessage'; import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link'; @@ -27,7 +27,7 @@ type TransactionGroup = APIReturnType<'GET /api/apm/services/{serviceName}/trans // Truncate both the link and the child span (the tooltip anchor.) The link so // it doesn't overflow, and the anchor so we get the ellipsis. const TransactionNameLink = euiStyled(TransactionDetailLink)` - font-family: ${fontFamilyCode}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; white-space: nowrap; ${truncate('100%')}; diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/TransactionList.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_list/transaction_list.stories.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/TransactionList.stories.tsx rename to x-pack/plugins/apm/public/components/app/transaction_overview/transaction_list/transaction_list.stories.tsx diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_custom_assets_extension.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_custom_assets_extension.tsx new file mode 100644 index 0000000000000..40b902b7729d0 --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_custom_assets_extension.tsx @@ -0,0 +1,36 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 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 { + CustomAssetsAccordionProps, + CustomAssetsAccordion, +} from '../../../../fleet/public'; +import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { ApmPluginStartDeps } from '../../plugin'; + +export function ApmCustomAssetsExtension() { + const { http } = useKibana().services; + const basePath = http?.basePath.get(); + + const views: CustomAssetsAccordionProps['views'] = [ + { + name: i18n.translate('xpack.apm.fleetIntegration.assets.name', { + defaultMessage: 'Services', + }), + url: `${basePath}/app/apm`, + description: i18n.translate( + 'xpack.apm.fleetIntegration.assets.description', + { defaultMessage: 'View application traces and service maps in APM' } + ), + }, + ]; + + return ; +} diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx new file mode 100644 index 0000000000000..6b3ba6a8f05db --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx @@ -0,0 +1,58 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { EuiButton, EuiText, EuiSpacer } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; + +import { AgentEnrollmentFlyoutFinalStepExtension } from '../../../../fleet/public'; +import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { ApmPluginStartDeps } from '../../plugin'; + +function StepComponent() { + const { http } = useKibana().services; + const installApmAgentLink = http?.basePath.prepend('/app/home#/tutorial/apm'); + + return ( + <> + +

+ {i18n.translate( + 'xpack.apm.fleetIntegration.enrollmentFlyout.installApmAgentDescription', + { + defaultMessage: + 'After the agent starts, you can install APM agents on your hosts to collect data from your applications and services.', + } + )} +

+ + + + + {i18n.translate( + 'xpack.apm.fleetIntegration.enrollmentFlyout.installApmAgentButtonText', + { defaultMessage: 'Install APM Agent' } + )} + + + ); +} + +export function getApmEnrollmentFlyoutData(): Pick< + AgentEnrollmentFlyoutFinalStepExtension, + 'title' | 'Component' +> { + return { + title: i18n.translate( + 'xpack.apm.fleetIntegration.enrollmentFlyout.installApmAgentTitle', + { + defaultMessage: 'Install APM Agent', + } + ), + Component: StepComponent, + }; +} diff --git a/x-pack/plugins/apm/public/components/fleet_integration/index.ts b/x-pack/plugins/apm/public/components/fleet_integration/index.ts new file mode 100644 index 0000000000000..a676a13c3741b --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export * from './apm_enrollment_flyout_extension'; +export * from './lazy_apm_custom_assets_extension'; diff --git a/x-pack/plugins/apm/public/components/fleet_integration/lazy_apm_custom_assets_extension.tsx b/x-pack/plugins/apm/public/components/fleet_integration/lazy_apm_custom_assets_extension.tsx new file mode 100644 index 0000000000000..04f5042f3103f --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/lazy_apm_custom_assets_extension.tsx @@ -0,0 +1,18 @@ +/* + * 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 { lazy } from 'react'; + +export const LazyApmCustomAssetsExtension = lazy(async () => { + const { ApmCustomAssetsExtension } = await import( + './apm_custom_assets_extension' + ); + + return { + default: ApmCustomAssetsExtension, + }; +}); diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx index 5214489c9142b..e00b7893b548e 100644 --- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx +++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx @@ -11,14 +11,14 @@ import { RouteComponentProps } from 'react-router-dom'; import { getServiceNodeName } from '../../../common/service_nodes'; import { APMRouteDefinition } from '../../application/routes'; import { toQuery } from '../shared/Links/url_helpers'; -import { ErrorGroupDetails } from '../app/ErrorGroupDetails'; +import { ErrorGroupDetails } from '../app/error_group_details'; import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_context'; import { ServiceNodeMetrics } from '../app/service_node_metrics'; import { SettingsTemplate } from './templates/settings_template'; -import { AgentConfigurations } from '../app/Settings/AgentConfigurations'; +import { AgentConfigurations } from '../app/Settings/agent_configurations'; import { AnomalyDetection } from '../app/Settings/anomaly_detection'; import { ApmIndices } from '../app/Settings/ApmIndices'; -import { CustomizeUI } from '../app/Settings/CustomizeUI'; +import { CustomizeUI } from '../app/Settings/customize_ui'; import { Schema } from '../app/Settings/schema'; import { TraceLink } from '../app/TraceLink'; import { TransactionLink } from '../app/transaction_link'; @@ -37,7 +37,7 @@ import { TransactionOverview } from '../app/transaction_overview'; import { ServiceInventory } from '../app/service_inventory'; import { TraceOverview } from '../app/trace_overview'; import { useFetcher } from '../../hooks/use_fetcher'; -import { AgentConfigurationCreateEdit } from '../app/Settings/AgentConfigurations/AgentConfigurationCreateEdit'; +import { AgentConfigurationCreateEdit } from '../app/Settings/agent_configurations/AgentConfigurationCreateEdit'; // These component function definitions are used below with the `component` // property of the route definitions. diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx index ef74894169d72..a03b0b5f2ae01 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx @@ -8,14 +8,13 @@ import { size } from 'lodash'; import { tint } from 'polished'; import React from 'react'; +import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript'; import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'; import ruby from 'react-syntax-highlighter/dist/cjs/languages/hljs/ruby'; import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode'; -import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { StackframeWithLineContext } from '../../../../typings/es_schemas/raw/fields/stackframe'; -import { borderRadius, px, unit, units } from '../../../style/variables'; SyntaxHighlighter.registerLanguage('javascript', javascript); SyntaxHighlighter.registerLanguage('python', python); @@ -23,15 +22,15 @@ SyntaxHighlighter.registerLanguage('ruby', ruby); const ContextContainer = euiStyled.div` position: relative; - border-radius: ${borderRadius}; + border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; `; -const LINE_HEIGHT = units.eighth * 9; +const LINE_HEIGHT = 18; const LineHighlight = euiStyled.div<{ lineNumber: number }>` position: absolute; width: 100%; - height: ${px(units.eighth * 9)}; - top: ${(props) => px(props.lineNumber * LINE_HEIGHT)}; + height: ${LINE_HEIGHT}px; + top: ${(props) => props.lineNumber * LINE_HEIGHT}px; pointer-events: none; background-color: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)}; `; @@ -40,7 +39,7 @@ const LineNumberContainer = euiStyled.div<{ isLibraryFrame: boolean }>` position: absolute; top: 0; left: 0; - border-radius: ${borderRadius}; + border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; background: ${({ isLibraryFrame, theme }) => isLibraryFrame ? theme.eui.euiColorEmptyShade @@ -49,29 +48,29 @@ const LineNumberContainer = euiStyled.div<{ isLibraryFrame: boolean }>` const LineNumber = euiStyled.div<{ highlight: boolean }>` position: relative; - min-width: ${px(units.eighth * 21)}; - padding-left: ${px(units.half)}; - padding-right: ${px(units.quarter)}; + min-width: 42px; + padding-left: ${({ theme }) => theme.eui.paddingSizes.s}; + padding-right: ${({ theme }) => theme.eui.paddingSizes.xs}; color: ${({ theme }) => theme.eui.euiColorMediumShade}; - line-height: ${px(unit + units.eighth)}; + line-height: ${LINE_HEIGHT}px; text-align: right; border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; background-color: ${({ highlight, theme }) => highlight ? tint(0.9, theme.eui.euiColorWarning) : null}; &:last-of-type { - border-radius: 0 0 0 ${borderRadius}; + border-radius: 0 0 0 ${({ theme }) => theme.eui.euiBorderRadiusSmall}; } `; const LineContainer = euiStyled.div` overflow: auto; - margin: 0 0 0 ${px(units.eighth * 21)}; + margin: 0 0 0 42px; padding: 0; background-color: ${({ theme }) => theme.eui.euiColorEmptyShade}; &:last-of-type { - border-radius: 0 0 ${borderRadius} 0; + border-radius: 0 0 ${({ theme }) => theme.eui.euiBorderRadiusSmall} 0; } `; @@ -83,8 +82,8 @@ const Line = euiStyled.pre` border: 0; border-radius: 0; overflow: initial; - padding: 0 ${px(LINE_HEIGHT)}; - line-height: ${px(LINE_HEIGHT)}; + padding: 0 ${LINE_HEIGHT}px; + line-height: ${LINE_HEIGHT}px; `; const Code = euiStyled.code` diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx index d361634759390..0985153c2d39e 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx @@ -12,22 +12,16 @@ import { Stackframe as StackframeType, StackframeWithLineContext, } from '../../../../typings/es_schemas/raw/fields/stackframe'; -import { - borderRadius, - fontFamilyCode, - fontSize, -} from '../../../style/variables'; import { Context } from './Context'; -import { FrameHeading } from './FrameHeading'; +import { FrameHeading } from './frame_heading'; import { Variables } from './Variables'; -import { px, units } from '../../../style/variables'; const ContextContainer = euiStyled.div<{ isLibraryFrame: boolean }>` position: relative; - font-family: ${fontFamilyCode}; - font-size: ${fontSize}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; + font-size: ${({ theme }) => theme.eui.euiFontSizeS}; border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - border-radius: ${borderRadius}; + border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; background: ${({ isLibraryFrame, theme }) => isLibraryFrame ? theme.eui.euiColorEmptyShade @@ -36,7 +30,7 @@ const ContextContainer = euiStyled.div<{ isLibraryFrame: boolean }>` // Indent the non-context frames the same amount as the accordion control const NoContextFrameHeadingWrapper = euiStyled.div` - margin-left: ${px(units.unit + units.half + units.quarter)}; + margin-left: 28px; `; interface Props { diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx index 7c09048593710..a43cd26e7f94a 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx @@ -9,15 +9,16 @@ import { EuiAccordion } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; -import { borderRadius, px, unit, units } from '../../../style/variables'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; import { KeyValueTable } from '../KeyValueTable'; import { flattenObject } from '../../../utils/flattenObject'; const VariablesContainer = euiStyled.div` background: ${({ theme }) => theme.eui.euiColorEmptyShade}; - border-radius: 0 0 ${borderRadius} ${borderRadius}; - padding: ${px(units.half)} ${px(unit)}; + border-radius: 0 0 ${({ theme }) => + `${theme.eui.euiBorderRadiusSmall} ${theme.eui.euiBorderRadiusSmall}`}; + padding: ${({ theme }) => + `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m}`}; `; interface Props { diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.test.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/cause_stacktrace.test.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.test.tsx rename to x-pack/plugins/apm/public/components/shared/Stacktrace/cause_stacktrace.test.tsx index a0ca8dd05b87f..cc23452127fa4 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/cause_stacktrace.test.tsx @@ -5,10 +5,10 @@ * 2.0. */ -import React from 'react'; import { shallow } from 'enzyme'; -import { CauseStacktrace } from './CauseStacktrace'; +import React from 'react'; import { mountWithTheme } from '../../../utils/testHelpers'; +import { CauseStacktrace } from './cause_stacktrace'; describe('CauseStacktrace', () => { describe('render', () => { diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/cause_stacktrace.tsx similarity index 94% rename from x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx rename to x-pack/plugins/apm/public/components/shared/Stacktrace/cause_stacktrace.tsx index 090ba0e8e28cf..0ee4f66e2c24c 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/cause_stacktrace.tsx @@ -5,17 +5,16 @@ * 2.0. */ -import React from 'react'; -import { i18n } from '@kbn/i18n'; import { EuiAccordion, EuiTitle } from '@elastic/eui'; -import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; -import { px, unit, units } from '../../../style/variables'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; import { Stacktrace } from '.'; +import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; const Accordion = euiStyled(EuiAccordion)` border-top: ${({ theme }) => theme.eui.euiBorderThin}; - margin-top: ${px(units.half)}; + margin-top: ${({ theme }) => theme.eui.euiSizeS}; `; const CausedByContainer = euiStyled('h5')` @@ -31,7 +30,7 @@ const CausedByHeading = euiStyled('span')` `; const FramesContainer = euiStyled('div')` - padding-left: ${px(unit)}; + padding-left: ${({ theme }) => theme.eui.paddingSizes.m}; `; function CausedBy({ message }: { message: string }) { diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.test.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/frame_heading.test.tsx similarity index 99% rename from x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.test.tsx rename to x-pack/plugins/apm/public/components/shared/Stacktrace/frame_heading.test.tsx index 794d88461358e..2eb3320ef3aa3 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/frame_heading.test.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; import { renderWithTheme } from '../../../utils/testHelpers'; -import { FrameHeading } from './FrameHeading'; +import { FrameHeading } from './frame_heading'; function getRenderedStackframeText( stackframe: Stackframe, diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/frame_heading.tsx similarity index 92% rename from x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx rename to x-pack/plugins/apm/public/components/shared/Stacktrace/frame_heading.tsx index 68b0893e1d8d3..8c9b9ae26c140 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/frame_heading.tsx @@ -8,7 +8,6 @@ import React, { ComponentType } from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; -import { fontFamilyCode, fontSize, px, units } from '../../../style/variables'; import { CSharpFrameHeadingRenderer, DefaultFrameHeadingRenderer, @@ -21,9 +20,9 @@ import { const FileDetails = euiStyled.div` color: ${({ theme }) => theme.eui.euiColorDarkShade}; line-height: 1.5; /* matches the line-hight of the accordion container button */ - padding: ${px(units.eighth)} 0; - font-family: ${fontFamilyCode}; - font-size: ${fontSize}; + padding: 2px 0; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; + font-size: ${({ theme }) => theme.eui.euiFontSizeS}; `; const LibraryFrameFileDetail = euiStyled.span` diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/index.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/index.tsx index 19af5da30cff2..3395b22988e8c 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/index.tsx @@ -10,7 +10,7 @@ import { isEmpty, last } from 'lodash'; import React, { Fragment } from 'react'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; import { EmptyMessage } from '../../shared/EmptyMessage'; -import { LibraryStacktrace } from './LibraryStacktrace'; +import { LibraryStacktrace } from './library_stacktrace'; import { Stackframe as StackframeComponent } from './Stackframe'; interface Props { diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/LibraryStacktrace.test.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/library_stacktrace.test.tsx similarity index 95% rename from x-pack/plugins/apm/public/components/shared/Stacktrace/LibraryStacktrace.test.tsx rename to x-pack/plugins/apm/public/components/shared/Stacktrace/library_stacktrace.test.tsx index d583d4c700939..d10e6c46cd12c 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/LibraryStacktrace.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/library_stacktrace.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { renderWithTheme } from '../../../utils/testHelpers'; -import { LibraryStacktrace } from './LibraryStacktrace'; +import { LibraryStacktrace } from './library_stacktrace'; describe('LibraryStacktrace', () => { describe('render', () => { diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/LibraryStacktrace.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/library_stacktrace.tsx similarity index 94% rename from x-pack/plugins/apm/public/components/shared/Stacktrace/LibraryStacktrace.tsx rename to x-pack/plugins/apm/public/components/shared/Stacktrace/library_stacktrace.tsx index de417b465638f..08399d09bed86 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/LibraryStacktrace.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/library_stacktrace.tsx @@ -10,11 +10,10 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; -import { px, units } from '../../../style/variables'; import { Stackframe as StackframeComponent } from './Stackframe'; const LibraryStacktraceAccordion = euiStyled(EuiAccordion)` - margin: ${px(units.quarter)} 0; + margin: ${({ theme }) => theme.eui.euiSizeXS} 0; `; interface Props { 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 1ceccc5203fb2..e0710556096c9 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/transaction_details/WaterfallWithSummmary/PercentOfParent'; +import { PercentOfParent } from '../../app/transaction_details/waterfall_with_summary/PercentOfParent'; interface Props { duration: number; diff --git a/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx b/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx index 8755003c89af2..6939aaf49373e 100644 --- a/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx +++ b/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx @@ -10,9 +10,9 @@ import { Transaction } from '../../../../typings/es_schemas/ui/transaction'; import { Summary } from './'; import { TimestampTooltip } from '../TimestampTooltip'; import { DurationSummaryItem } from './DurationSummaryItem'; -import { ErrorCountSummaryItemBadge } from './ErrorCountSummaryItemBadge'; +import { ErrorCountSummaryItemBadge } from './error_count_summary_item_badge'; import { isRumAgentName } from '../../../../common/agent_name'; -import { HttpInfoSummaryItem } from './HttpInfoSummaryItem'; +import { HttpInfoSummaryItem } from './http_info_summary_item'; import { TransactionResultSummaryItem } from './TransactionResultSummaryItem'; import { UserAgentSummaryItem } from './UserAgentSummaryItem'; diff --git a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.test.tsx b/x-pack/plugins/apm/public/components/shared/Summary/error_count_summary_item_badge.test.tsx similarity index 90% rename from x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.test.tsx rename to x-pack/plugins/apm/public/components/shared/Summary/error_count_summary_item_badge.test.tsx index 9996d1ea61a76..c6b77bddbf544 100644 --- a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/Summary/error_count_summary_item_badge.test.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ErrorCountSummaryItemBadge } from './ErrorCountSummaryItemBadge'; +import { ErrorCountSummaryItemBadge } from './error_count_summary_item_badge'; import { expectTextsInDocument, renderWithTheme, diff --git a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx b/x-pack/plugins/apm/public/components/shared/Summary/error_count_summary_item_badge.tsx similarity index 87% rename from x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx rename to x-pack/plugins/apm/public/components/shared/Summary/error_count_summary_item_badge.tsx index ec309f2f74d10..17189f1e40d94 100644 --- a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx +++ b/x-pack/plugins/apm/public/components/shared/Summary/error_count_summary_item_badge.tsx @@ -10,15 +10,13 @@ import { i18n } from '@kbn/i18n'; import { EuiBadge } from '@elastic/eui'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { useTheme } from '../../../hooks/use_theme'; -import { px } from '../../../../public/style/variables'; -import { units } from '../../../style/variables'; interface Props { count: number; } const Badge = euiStyled(EuiBadge)` - margin-top: ${px(units.eighth)}; + margin-top: 2px; `; export function ErrorCountSummaryItemBadge({ count }: Props) { diff --git a/x-pack/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx b/x-pack/plugins/apm/public/components/shared/Summary/http_info_summary_item/http_info_summary_item.test.tsx similarity index 69% rename from x-pack/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx rename to x-pack/plugins/apm/public/components/shared/Summary/http_info_summary_item/http_info_summary_item.test.tsx index 71d7177051b9d..3e1848af316fe 100644 --- a/x-pack/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/Summary/http_info_summary_item/http_info_summary_item.test.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { HttpInfoSummaryItem } from '.'; import * as exampleTransactions from '../__fixtures__/transactions'; +import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common'; describe('HttpInfoSummaryItem', () => { describe('render', () => { @@ -19,18 +20,24 @@ describe('HttpInfoSummaryItem', () => { it('renders', () => { expect(() => - shallow() + shallow(, { + wrappingComponent: EuiThemeProvider, + }) ).not.toThrowError(); }); it('renders empty component if no url is provided', () => { - const component = shallow(); + const component = shallow(, { + wrappingComponent: EuiThemeProvider, + }); expect(component.isEmptyRender()).toBeTruthy(); }); describe('with status code 100', () => { it('shows a success color', () => { - const wrapper = mount(); + const wrapper = mount(, { + wrappingComponent: EuiThemeProvider, + }); expect(wrapper.find('HttpStatusBadge').prop('status')).toEqual(100); }); @@ -39,7 +46,9 @@ describe('HttpInfoSummaryItem', () => { describe('with status code 200', () => { it('shows a success color', () => { const p = { ...props, status: 200 }; - const wrapper = mount(); + const wrapper = mount(, { + wrappingComponent: EuiThemeProvider, + }); expect(wrapper.find('HttpStatusBadge').prop('status')).toEqual(200); }); @@ -49,7 +58,9 @@ describe('HttpInfoSummaryItem', () => { it('shows a warning color', () => { const p = { ...props, status: 301 }; - const wrapper = mount(); + const wrapper = mount(, { + wrappingComponent: EuiThemeProvider, + }); expect(wrapper.find('HttpStatusBadge').prop('status')).toEqual(301); }); @@ -59,7 +70,9 @@ describe('HttpInfoSummaryItem', () => { it('shows a error color', () => { const p = { ...props, status: 404 }; - const wrapper = mount(); + const wrapper = mount(, { + wrappingComponent: EuiThemeProvider, + }); expect(wrapper.find('HttpStatusBadge').prop('status')).toEqual(404); }); @@ -69,7 +82,9 @@ describe('HttpInfoSummaryItem', () => { it('shows a error color', () => { const p = { ...props, status: 502 }; - const wrapper = mount(); + const wrapper = mount(, { + wrappingComponent: EuiThemeProvider, + }); expect(wrapper.find('HttpStatusBadge').prop('status')).toEqual(502); }); @@ -79,7 +94,9 @@ describe('HttpInfoSummaryItem', () => { it('shows the default color', () => { const p = { ...props, status: 700 }; - const wrapper = mount(); + const wrapper = mount(, { + wrappingComponent: EuiThemeProvider, + }); expect(wrapper.find('HttpStatusBadge').prop('status')).toEqual(700); }); diff --git a/x-pack/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx b/x-pack/plugins/apm/public/components/shared/Summary/http_info_summary_item/index.tsx similarity index 87% rename from x-pack/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx rename to x-pack/plugins/apm/public/components/shared/Summary/http_info_summary_item/index.tsx index d72f03c386226..d10d15f8240a1 100644 --- a/x-pack/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/Summary/http_info_summary_item/index.tsx @@ -5,21 +5,21 @@ * 2.0. */ -import React from 'react'; -import { EuiToolTip, EuiBadge } from '@elastic/eui'; +import { EuiBadge, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import React from 'react'; import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common'; -import { units, px, truncate, unit } from '../../../../style/variables'; +import { truncate, unit } from '../../../../utils/style'; import { HttpStatusBadge } from '../HttpStatusBadge'; const HttpInfoBadge = euiStyled(EuiBadge)` - margin-right: ${px(units.quarter)}; + margin-right: ${({ theme }) => theme.eui.euiSizeXS}; `; const Url = euiStyled('span')` display: inline-block; vertical-align: bottom; - ${truncate(px(unit * 24))}; + ${truncate(unit * 24)}; `; interface HttpInfoProps { method?: string; diff --git a/x-pack/plugins/apm/public/components/shared/Summary/index.tsx b/x-pack/plugins/apm/public/components/shared/Summary/index.tsx index 395156800dceb..1880ee00f3de7 100644 --- a/x-pack/plugins/apm/public/components/shared/Summary/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/Summary/index.tsx @@ -5,10 +5,9 @@ * 2.0. */ -import React from 'react'; import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; +import React from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; -import { px, units } from '../../../../public/style/variables'; import { Maybe } from '../../../../typings/common'; interface Props { @@ -18,7 +17,7 @@ interface Props { const Item = euiStyled(EuiFlexItem)` flex-wrap: nowrap; border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - padding-right: ${px(units.half)}; + padding-right: ${({ theme }) => theme.eui.paddingSizes.s}; flex-flow: row nowrap; line-height: 1.5; align-items: center !important; diff --git a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx index 28c000310346d..b800ef41fbcac 100644 --- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx +++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx @@ -17,14 +17,14 @@ import { ENVIRONMENT_ALL, getEnvironmentLabel, } from '../../../../common/environment_filter_values'; -import { getAPMHref } from '../Links/apm/APMLink'; import { useAnomalyDetectionJobsContext } from '../../../context/anomaly_detection_jobs/use_anomaly_detection_jobs_context'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; import { useLicenseContext } from '../../../context/license/use_license_context'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { FETCH_STATUS } from '../../../hooks/use_fetcher'; +import { useTheme } from '../../../hooks/use_theme'; import { APIReturnType } from '../../../services/rest/createCallApmApi'; -import { units } from '../../../style/variables'; +import { getAPMHref } from '../Links/apm/APMLink'; export type AnomalyDetectionApiResponse = APIReturnType<'GET /api/apm/settings/anomaly-detection/jobs'>; @@ -39,6 +39,7 @@ export function AnomalyDetectionSetupLink() { const license = useLicenseContext(); const hasValidLicense = license?.isActive && license?.hasAtLeast('platinum'); const { basePath } = core.http; + const theme = useTheme(); return ( )} - + {ANOMALY_DETECTION_LINK_LABEL} diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/AgentMarker.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/agent_marker.test.tsx.snap similarity index 100% rename from x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/AgentMarker.test.tsx.snap rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/agent_marker.test.tsx.snap diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/index.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/index.test.tsx.snap index f108eb7ebf3ea..5657732eb241b 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/index.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Marker renders agent marker 1`] = ` @@ -25,7 +25,7 @@ exports[`Marker renders error marker 1`] = ` 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/agent_marker.test.tsx similarity index 81% rename from x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/agent_marker.test.tsx index 1411a264b065e..0b7e405ae5d95 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/agent_marker.test.tsx @@ -7,9 +7,9 @@ import { shallow } from 'enzyme'; import React from 'react'; -import { AgentMarker } from './AgentMarker'; -import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common'; +import { AgentMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks'; +import { AgentMarker } from './agent_marker'; describe('AgentMarker', () => { const mark = { 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/agent_marker.tsx similarity index 80% rename from x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/agent_marker.tsx index 3b7f0fab6c2a7..947c7a93f38b1 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/agent_marker.tsx @@ -5,23 +5,22 @@ * 2.0. */ -import React from 'react'; import { EuiToolTip } from '@elastic/eui'; +import React from 'react'; import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common'; 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/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; +import { AgentMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks'; +import { Legend } from '../legend'; const NameContainer = euiStyled.div` border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade}; - padding-bottom: ${px(units.half)}; + padding-bottom: ${({ theme }) => theme.eui.paddingSizes.s}; `; const TimeContainer = euiStyled.div` color: ${({ theme }) => theme.eui.euiColorMediumShade}; - padding-top: ${px(units.half)}; + padding-top: ${({ theme }) => theme.eui.paddingSizes.s}; `; interface Props { 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/error_marker.test.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/error_marker.test.tsx index 36634f97a3a45..fdb97ea4fadde 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/error_marker.test.tsx @@ -14,8 +14,8 @@ import { expectTextsInDocument, renderWithTheme, } from '../../../../../utils/testHelpers'; -import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; -import { ErrorMarker } from './ErrorMarker'; +import { ErrorMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks'; +import { ErrorMarker } from './error_marker'; function Wrapper({ children }: { children?: ReactNode }) { return ( 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/error_marker.tsx similarity index 88% rename from x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/error_marker.tsx index 044070303d2ff..b1e902957bfd7 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/error_marker.tsx @@ -5,36 +5,35 @@ * 2.0. */ -import React, { useState } from 'react'; import { EuiPopover, EuiText } from '@elastic/eui'; +import React, { useState } from 'react'; import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common'; -import { asDuration } from '../../../../../../common/utils/formatters'; -import { useTheme } from '../../../../../hooks/use_theme'; import { TRACE_ID, TRANSACTION_ID, } from '../../../../../../common/elasticsearch_fieldnames'; +import { asDuration } from '../../../../../../common/utils/formatters'; import { useUrlParams } from '../../../../../context/url_params_context/use_url_params'; -import { px, unit, units } from '../../../../../style/variables'; -import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { useTheme } from '../../../../../hooks/use_theme'; +import { ErrorMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks'; import { ErrorDetailLink } from '../../../Links/apm/ErrorDetailLink'; -import { Legend, Shape } from '../../Legend'; +import { Legend, Shape } from '../legend'; interface Props { mark: ErrorMark; } const Popover = euiStyled.div` - max-width: ${px(280)}; + max-width: 280px; `; const TimeLegend = euiStyled(Legend)` - margin-bottom: ${px(unit)}; + margin-bottom: ${({ theme }) => theme.eui.euiSize}; `; const ErrorLink = euiStyled(ErrorDetailLink)` display: block; - margin: ${px(units.half)} 0 ${px(units.half)} 0; + margin: ${({ theme }) => `${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS} 0`}; overflow-wrap: break-word; `; @@ -102,7 +101,7 @@ export function ErrorMarker({ mark }: Props) { ( -
@
+
@
)} /> { 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 bece72b398d31..88318eb0e0c2d 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 @@ -7,11 +7,10 @@ import React from 'react'; import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common'; -import { px } from '../../../../../style/variables'; -import { AgentMarker } from './AgentMarker'; -import { ErrorMarker } from './ErrorMarker'; -import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; -import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { AgentMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks'; +import { ErrorMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks'; +import { AgentMarker } from './agent_marker'; +import { ErrorMarker } from './error_marker'; interface Props { mark: ErrorMark | AgentMark; @@ -26,7 +25,7 @@ const MarkerContainer = euiStyled.div` export function Marker({ mark, x }: Props) { const legendWidth = 11; return ( - + {mark.type === 'errorMark' ? ( ) : ( 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 428da80fb808a..2dcc969f661b8 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/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks'; +import { Mark } from '../../../app/transaction_details/waterfall_with_summary/waterfall_container/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 650faa195271c..6c7cb7a067d2e 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 @@ -8,11 +8,11 @@ import PropTypes from 'prop-types'; import React, { PureComponent, ReactNode } from 'react'; import { makeWidthFlexible } from 'react-vis'; +import { AgentMark } from '../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_agent_marks'; +import { ErrorMark } from '../../../app/transaction_details/waterfall_with_summary/waterfall_container/Marks/get_error_marks'; import { getPlotValues } from './plotUtils'; -import { TimelineAxis } from './TimelineAxis'; +import { TimelineAxis } from './timeline_axis'; import { VerticalLines } from './VerticalLines'; -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/charts/Legend/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/legend.tsx similarity index 75% rename from x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/legend.tsx index f81da48b760e7..c7066565f0b22 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/legend.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common'; import { useTheme } from '../../../../hooks/use_theme'; -import { fontSizes, px, units } from '../../../../style/variables'; export enum Shape { circle = 'circle', @@ -17,7 +16,6 @@ export enum Shape { interface ContainerProps { onClick: (e: Event) => void; - fontSize?: string; clickable: boolean; disabled: boolean; } @@ -25,7 +23,7 @@ interface ContainerProps { const Container = euiStyled.div` display: flex; align-items: center; - font-size: ${(props) => props.fontSize}; + font-size: ${({ theme }) => theme.eui.euiFontSizeS}; color: ${({ theme }) => theme.eui.euiColorDarkShade}; cursor: ${(props) => (props.clickable ? 'pointer' : 'initial')}; opacity: ${(props) => (props.disabled ? 0.4 : 1)}; @@ -33,16 +31,17 @@ const Container = euiStyled.div` `; interface IndicatorProps { - radius: number; color: string; shape: Shape; withMargin: boolean; } +const radius = 11; + export const Indicator = euiStyled.span` - width: ${(props) => px(props.radius)}; - height: ${(props) => px(props.radius)}; - margin-right: ${(props) => (props.withMargin ? px(props.radius / 2) : 0)}; + width: ${radius}px; + height: ${radius}px; + margin-right: ${(props) => (props.withMargin ? `${radius / 2}px` : 0)}; background: ${(props) => props.color}; border-radius: ${(props) => { return props.shape === Shape.circle ? '100%' : '0'; @@ -53,8 +52,6 @@ interface Props { onClick?: any; text?: string; color?: string; - fontSize?: string; - radius?: number; disabled?: boolean; clickable?: boolean; shape?: Shape; @@ -65,8 +62,6 @@ export function Legend({ onClick, text, color, - fontSize = fontSizes.small, - radius = units.minus - 1, disabled = false, clickable = false, shape = Shape.circle, @@ -81,18 +76,12 @@ export function Legend({ onClick={onClick} disabled={disabled} clickable={clickable || Boolean(onClick)} - fontSize={fontSize} {...rest} > {indicator ? ( indicator() ) : ( - + )} {text} diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/timeline_axis.tsx similarity index 97% rename from x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/timeline_axis.tsx index 32b78bf8818a3..cf942ebb75776 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/timeline_axis.tsx @@ -5,12 +5,11 @@ * 2.0. */ -import React, { ReactNode } from 'react'; import { inRange } from 'lodash'; +import React, { ReactNode } from 'react'; import { XAxis, XYPlot } from 'react-vis'; import { getDurationFormatter } from '../../../../../common/utils/formatters'; import { useTheme } from '../../../../hooks/use_theme'; -import { px } from '../../../../style/variables'; import { Mark } from './'; import { LastTickValue } from './LastTickValue'; import { Marker } from './Marker'; @@ -59,7 +58,7 @@ export function TimelineAxis({ position: 'sticky', top: 0, borderBottom: `1px solid ${theme.eui.euiColorMediumShade}`, - height: px(margins.top), + height: margins.top, zIndex: 2, width: '100%', }} diff --git a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx index 59205ef498534..6b93fe9605e42 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx @@ -5,9 +5,6 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import React from 'react'; -import { EuiIcon } from '@elastic/eui'; import { AreaSeries, Chart, @@ -16,11 +13,13 @@ import { ScaleType, Settings, } from '@elastic/charts'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; import { merge } from 'lodash'; -import { Coordinate } from '../../../../../typings/timeseries'; +import React from 'react'; import { useChartTheme } from '../../../../../../observability/public'; -import { px, unit } from '../../../../style/variables'; +import { Coordinate } from '../../../../../typings/timeseries'; import { useTheme } from '../../../../hooks/use_theme'; +import { unit } from '../../../../utils/style'; import { getComparisonChartTheme } from '../../time_comparison/get_time_range_comparison'; export type Color = @@ -73,8 +72,8 @@ export function SparkPlot({ const colorValue = theme.eui[color]; const chartSize = { - height: px(24), - width: compact ? px(unit * 3) : px(unit * 4), + height: theme.eui.euiSizeL, + width: compact ? unit * 3 : unit * 4, }; const Sparkline = hasComparisonSeries ? LineSeries : AreaSeries; diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx index 9e7a3ac744ffe..9667bbd33cc73 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx @@ -40,7 +40,7 @@ import { FETCH_STATUS } from '../../../hooks/use_fetcher'; import { useTheme } from '../../../hooks/use_theme'; import { useAnnotationsContext } from '../../../context/annotations/use_annotations_context'; import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context'; -import { unit } from '../../../style/variables'; +import { unit } from '../../../utils/style'; import { ChartContainer } from './chart_container'; import { onBrushEnd, isTimeseriesEmpty } from './helper/helper'; import { getLatencyChartSelector } from '../../../selectors/latency_chart_selectors'; diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx index 436eca4781502..a68373892e78b 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx @@ -34,7 +34,7 @@ import { useTheme } from '../../../../hooks/use_theme'; import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; import { useAnnotationsContext } from '../../../../context/annotations/use_annotations_context'; import { useChartPointerEventContext } from '../../../../context/chart_pointer_event/use_chart_pointer_event_context'; -import { unit } from '../../../../style/variables'; +import { unit } from '../../../../utils/style'; import { ChartContainer } from '../../charts/chart_container'; import { isTimeseriesEmpty, onBrushEnd } from '../../charts/helper/helper'; diff --git a/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx b/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx index 54d8790c32d33..d28cc1646f16a 100644 --- a/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx @@ -19,7 +19,6 @@ import { import { i18n } from '@kbn/i18n'; import React, { Fragment } from 'react'; import styled from 'styled-components'; -import { px, units } from '../../../style/variables'; interface KeyValue { key: string; @@ -34,7 +33,8 @@ const StyledEuiAccordion = styled(EuiAccordion)` `; const StyledEuiDescriptionList = styled(EuiDescriptionList)` - margin: ${px(units.half)} ${px(units.half)} 0 ${px(units.half)}; + margin: ${({ theme }) => + `${theme.eui.euiSizeS} ${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS}`}; .descriptionList__title, .descriptionList__description { border-bottom: ${({ theme }) => theme.eui.euiBorderThin}; diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/ClickOutside.js b/x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/ClickOutside.js similarity index 100% rename from x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/ClickOutside.js rename to x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/ClickOutside.js diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js b/x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/Suggestion.js similarity index 84% rename from x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js rename to x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/Suggestion.js index 987daf67b1fc7..26b99c4e54f65 100644 --- a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js +++ b/x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/Suggestion.js @@ -9,13 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common'; import { EuiIcon } from '@elastic/eui'; -import { - fontFamilyCode, - px, - units, - fontSizes, - unit, -} from '../../../../style/variables'; +import { unit } from '../../../../utils/style'; import { tint } from 'polished'; function getIconColor(type, theme) { @@ -40,23 +34,23 @@ const Description = euiStyled.div` display: inline; span { - font-family: ${fontFamilyCode}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; color: ${({ theme }) => theme.eui.euiColorFullShade}; - padding: 0 ${px(units.quarter)}; + padding: 0 ${({ theme }) => theme.eui.paddingSizes.xs}; display: inline-block; } } `; const ListItem = euiStyled.li` - font-size: ${fontSizes.small}; - height: ${px(units.double)}; + font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; + height: ${({ theme }) => theme.eui.euiSizeXL}; align-items: center; display: flex; background: ${({ selected, theme }) => selected ? theme.eui.euiColorLightestShade : 'initial'}; cursor: pointer; - border-radius: ${px(units.quarter)}; + border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; ${Description} { p span { @@ -69,19 +63,19 @@ const ListItem = euiStyled.li` `; const Icon = euiStyled.div` - flex: 0 0 ${px(units.double)}; + flex: 0 0 ${({ theme }) => theme.eui.euiSizeXL}; background: ${({ type, theme }) => tint(0.9, getIconColor(type, theme))}; color: ${({ type, theme }) => getIconColor(type, theme)}; width: 100%; height: 100%; text-align: center; - line-height: ${px(units.double)}; + line-height: ${({ theme }) => theme.eui.euiSizeXL}; `; const TextValue = euiStyled.div` - flex: 0 0 ${px(unit * 16)}; + flex: 0 0 ${unit * 16}px; color: ${({ theme }) => theme.eui.euiColorDarkestShade}; - padding: 0 ${px(units.half)}; + padding: 0 ${({ theme }) => theme.eui.paddingSizes.s}; `; function getEuiIconType(type) { diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js b/x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/Suggestions.js similarity index 88% rename from x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js rename to x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/Suggestions.js index 405be89c6629c..386eb7e1e0d7d 100644 --- a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js +++ b/x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/Suggestions.js @@ -5,25 +5,28 @@ * 2.0. */ -import React, { Component } from 'react'; +import { isEmpty } from 'lodash'; +import { tint } from 'polished'; import PropTypes from 'prop-types'; +import React, { Component } from 'react'; import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common'; -import { isEmpty } from 'lodash'; +import { unit } from '../../../../utils/style'; import Suggestion from './Suggestion'; -import { units, px, unit } from '../../../../style/variables'; -import { tint } from 'polished'; const List = euiStyled.ul` width: 100%; border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - border-radius: ${px(units.quarter)}; - box-shadow: 0px ${px(units.quarter)} ${px(units.double)} - ${({ theme }) => tint(0.9, theme.eui.euiColorFullShade)}; + border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; + box-shadow: 0 ${({ theme }) => + `${theme.eui.euiSizeXS} ${theme.eui.euiSizeXL} ${tint( + 0.9, + theme.eui.euiColorFullShade + )}`}; position: absolute; background: ${({ theme }) => theme.eui.euiColorEmptyShade}; z-index: 10; left: 0; - max-height: ${px(unit * 20)}; + max-height: ${unit * 20}px; overflow: scroll; `; diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js b/x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/index.js similarity index 100% rename from x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js rename to x-pack/plugins/apm/public/components/shared/kuery_bar/Typeahead/index.js diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/get_bool_filter.ts b/x-pack/plugins/apm/public/components/shared/kuery_bar/get_bool_filter.ts similarity index 100% rename from x-pack/plugins/apm/public/components/shared/KueryBar/get_bool_filter.ts rename to x-pack/plugins/apm/public/components/shared/kuery_bar/get_bool_filter.ts diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx b/x-pack/plugins/apm/public/components/shared/kuery_bar/index.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx rename to x-pack/plugins/apm/public/components/shared/kuery_bar/index.tsx diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/use_processor_event.ts b/x-pack/plugins/apm/public/components/shared/kuery_bar/use_processor_event.ts similarity index 100% rename from x-pack/plugins/apm/public/components/shared/KueryBar/use_processor_event.ts rename to x-pack/plugins/apm/public/components/shared/kuery_bar/use_processor_event.ts diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/utils.ts b/x-pack/plugins/apm/public/components/shared/kuery_bar/utils.ts similarity index 100% rename from x-pack/plugins/apm/public/components/shared/KueryBar/utils.ts rename to x-pack/plugins/apm/public/components/shared/kuery_bar/utils.ts diff --git a/x-pack/plugins/apm/public/components/shared/ManagedTable/__snapshots__/ManagedTable.test.js.snap b/x-pack/plugins/apm/public/components/shared/managed_table/__snapshots__/managed_table.test.tsx.snap similarity index 90% rename from x-pack/plugins/apm/public/components/shared/ManagedTable/__snapshots__/ManagedTable.test.js.snap rename to x-pack/plugins/apm/public/components/shared/managed_table/__snapshots__/managed_table.test.tsx.snap index 655fc5a25b9ef..55e0bc0fe2431 100644 --- a/x-pack/plugins/apm/public/components/shared/ManagedTable/__snapshots__/ManagedTable.test.js.snap +++ b/x-pack/plugins/apm/public/components/shared/managed_table/__snapshots__/managed_table.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ManagedTable component should render a page-full of items, with defaults 1`] = ` +exports[`ManagedTable should render a page-full of items, with defaults 1`] = ` `; -exports[`ManagedTable component should render when specifying initial values 1`] = ` +exports[`ManagedTable should render when specifying initial values 1`] = ` { field?: string; dataType?: string; align?: string; - width?: string; + width?: string | number; sortable?: boolean; render?: (value: any, item: T) => unknown; } diff --git a/x-pack/plugins/apm/public/components/shared/ManagedTable/ManagedTable.test.js b/x-pack/plugins/apm/public/components/shared/managed_table/managed_table.test.tsx similarity index 54% rename from x-pack/plugins/apm/public/components/shared/ManagedTable/ManagedTable.test.js rename to x-pack/plugins/apm/public/components/shared/managed_table/managed_table.test.tsx index ab96eba14b403..c474d98a3f0d4 100644 --- a/x-pack/plugins/apm/public/components/shared/ManagedTable/ManagedTable.test.js +++ b/x-pack/plugins/apm/public/components/shared/managed_table/managed_table.test.tsx @@ -7,39 +7,41 @@ import { shallow } from 'enzyme'; import React from 'react'; -import { UnoptimizedManagedTable } from '.'; +import { ITableColumn, UnoptimizedManagedTable } from '.'; -describe('ManagedTable component', () => { - let people; - let columns; +interface Person { + name: string; + age: number; +} - beforeEach(() => { - people = [ - { name: 'Jess', age: 29 }, - { name: 'Becky', age: 43 }, - { name: 'Thomas', age: 31 }, - ]; - columns = [ - { - field: 'name', - name: 'Name', - sortable: true, - render: (name) => `Name: ${name}`, - }, - { field: 'age', name: 'Age', render: (age) => `Age: ${age}` }, - ]; - }); +describe('ManagedTable', () => { + const people: Person[] = [ + { name: 'Jess', age: 29 }, + { name: 'Becky', age: 43 }, + { name: 'Thomas', age: 31 }, + ]; + const columns: Array> = [ + { + field: 'name', + name: 'Name', + sortable: true, + render: (name) => `Name: ${name}`, + }, + { field: 'age', name: 'Age', render: (age) => `Age: ${age}` }, + ]; it('should render a page-full of items, with defaults', () => { expect( - shallow() + shallow( + columns={columns} items={people} /> + ) ).toMatchSnapshot(); }); it('should render when specifying initial values', () => { expect( shallow( - columns={columns} items={people} initialSortField="age" 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 74374e331ee8e..4f9e58239855d 100644 --- a/x-pack/plugins/apm/public/components/shared/search_bar.tsx +++ b/x-pack/plugins/apm/public/components/shared/search_bar.tsx @@ -19,9 +19,8 @@ import { enableInspectEsQueries } from '../../../../observability/public'; import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_context'; import { useKibanaUrl } from '../../hooks/useKibanaUrl'; import { useBreakPoints } from '../../hooks/use_break_points'; -import { px } from '../../style/variables'; import { DatePicker } from './DatePicker'; -import { KueryBar } from './KueryBar'; +import { KueryBar } from './kuery_bar'; import { TimeComparison } from './time_comparison'; import { TransactionTypeSelect } from './transaction_type_select'; @@ -125,7 +124,7 @@ export function SearchBar({ responsive={false} > {showTimeComparison && ( - + )} diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx index 05305558564f1..695c941c61ed4 100644 --- a/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx +++ b/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx @@ -14,7 +14,6 @@ import { } from '@elastic/eui'; import React from 'react'; import { FETCH_STATUS } from '../../../hooks/use_fetcher'; -import { px } from '../../../style/variables'; interface IconPopoverProps { title: string; @@ -59,7 +58,7 @@ export function IconPopover({ closePopover={onClose} > {title} -
+
{isLoading ? ( ) : ( diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap b/x-pack/plugins/apm/public/components/shared/sticky_properties/__snapshots__/sticky_properties.test.tsx.snap similarity index 100% rename from x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap rename to x-pack/plugins/apm/public/components/shared/sticky_properties/__snapshots__/sticky_properties.test.tsx.snap diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx b/x-pack/plugins/apm/public/components/shared/sticky_properties/index.tsx similarity index 93% rename from x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx rename to x-pack/plugins/apm/public/components/shared/sticky_properties/index.tsx index ee764db516d72..49488ba09e068 100644 --- a/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/sticky_properties/index.tsx @@ -9,13 +9,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { EuiToolTip } from '@elastic/eui'; import React from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; -import { - fontFamilyCode, - fontSizes, - px, - truncate, - units, -} from '../../../style/variables'; +import { truncate } from '../../../utils/style'; export interface IStickyProperty { val: JSX.Element | string | Date; @@ -26,12 +20,12 @@ export interface IStickyProperty { } const TooltipFieldName = euiStyled.span` - font-family: ${fontFamilyCode}; + font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; `; const PropertyLabel = euiStyled.div` - margin-bottom: ${px(units.half)}; - font-size: ${fontSizes.small}; + margin-bottom: ${({ theme }) => theme.eui.euiSizeS}; + font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; color: ${({ theme }) => theme.eui.euiColorMediumShade}; span { diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js b/x-pack/plugins/apm/public/components/shared/sticky_properties/sticky_properties.test.tsx similarity index 80% rename from x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js rename to x-pack/plugins/apm/public/components/shared/sticky_properties/sticky_properties.test.tsx index eba70a171a1df..d29702752c159 100644 --- a/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js +++ b/x-pack/plugins/apm/public/components/shared/sticky_properties/sticky_properties.test.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { StickyProperties } from './index'; +import { StickyProperties } from '.'; import { shallow } from 'enzyme'; import { USER_ID, URL_FULL } from '../../../../common/elasticsearch_fieldnames'; import { mockMoment } from '../../../utils/testHelpers'; @@ -35,7 +35,7 @@ describe('StickyProperties', () => { { label: 'User ID', fieldName: USER_ID, - val: 1337, + val: '1337', }, ]; @@ -52,7 +52,7 @@ describe('StickyProperties', () => { { label: 'My Number', fieldName: 'myNumber', - val: 1337, + val: '1337', }, ]; @@ -66,25 +66,6 @@ describe('StickyProperties', () => { expect(wrapper).toEqual('1337'); }); - it('should not stringify booleans', () => { - const stickyProperties = [ - { - label: 'My boolean', - fieldName: 'myBoolean', - val: true, - }, - ]; - - const wrapper = shallow( - - ) - .find('PropertyValue') - .dive() - .text(); - - expect(wrapper).toEqual(''); - }); - it('should render nested components', () => { const stickyProperties = [ { 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 ed9d1a15cdbca..d7dfd3de2b628 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 @@ -10,13 +10,12 @@ import { i18n } from '@kbn/i18n'; import moment from 'moment'; import React from 'react'; import { useHistory } from 'react-router-dom'; -import { useUiTracker } from '../../../../../observability/public'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; +import { useUiTracker } from '../../../../../observability/public'; import { getDateDifference } from '../../../../common/utils/formatters'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { px, unit } from '../../../style/variables'; -import * as urlHelpers from '../../shared/Links/url_helpers'; import { useBreakPoints } from '../../../hooks/use_break_points'; +import * as urlHelpers from '../../shared/Links/url_helpers'; import { getTimeRangeComparison, TimeRangeComparisonType, @@ -28,7 +27,7 @@ const PrependContainer = euiStyled.div` align-items: center; background-color: ${({ theme }) => theme.eui.euiFormInputGroupLabelBackground}; - padding: 0 ${px(unit)}; + padding: 0 ${({ theme }) => theme.eui.paddingSizes.m}; `; function getDateFormat({ diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.test.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/TransactionActionMenu.test.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.test.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/TransactionActionMenu.test.tsx diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/TransactionActionMenu.tsx similarity index 98% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/TransactionActionMenu.tsx index b28b364adcf30..a4f7c2b663484 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/TransactionActionMenu.tsx @@ -22,7 +22,7 @@ import { Transaction } from '../../../../typings/es_schemas/ui/transaction'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; import { useLicenseContext } from '../../../context/license/use_license_context'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; -import { CustomLinkMenuSection } from './CustomLinkMenuSection'; +import { CustomLinkMenuSection } from './custom_link_menu_section'; import { getSections } from './sections'; interface Props { diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__fixtures__/mockData.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/__fixtures__/mockData.ts similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__fixtures__/mockData.ts rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/__fixtures__/mockData.ts diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__snapshots__/TransactionActionMenu.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/__snapshots__/TransactionActionMenu.test.tsx.snap similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__snapshots__/TransactionActionMenu.test.tsx.snap rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/__snapshots__/TransactionActionMenu.test.tsx.snap diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkToolbar.test.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/CustomLinkToolbar.test.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkToolbar.test.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/CustomLinkToolbar.test.tsx diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkToolbar.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/CustomLinkToolbar.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkToolbar.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/CustomLinkToolbar.tsx diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkList.test.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/custom_link_list.test.tsx similarity index 96% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkList.test.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/custom_link_list.test.tsx index c0c4613e033c9..e063fb36b8e9c 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkList.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/custom_link_list.test.tsx @@ -5,15 +5,15 @@ * 2.0. */ -import React from 'react'; import { render } from '@testing-library/react'; -import { CustomLinkList } from './CustomLinkList'; +import React from 'react'; +import { CustomLink } from '../../../../../common/custom_link/custom_link_types'; +import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; import { expectTextsInDocument, expectTextsNotInDocument, } from '../../../../utils/testHelpers'; -import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; -import { CustomLink } from '../../../../../common/custom_link/custom_link_types'; +import { CustomLinkList } from './custom_link_list'; describe('CustomLinkList', () => { const customLinks = [ diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkList.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/custom_link_list.tsx similarity index 89% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkList.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/custom_link_list.tsx index 02d6dd436040f..7ea7cd35c443a 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/CustomLinkList.tsx +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/custom_link_list.tsx @@ -8,12 +8,12 @@ import Mustache from 'mustache'; import React from 'react'; import { - SectionLinks, SectionLink, + SectionLinks, } from '../../../../../../observability/public'; import { CustomLink } from '../../../../../common/custom_link/custom_link_types'; import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; -import { px, unit } from '../../../../style/variables'; +import { unit } from '../../../../utils/style'; export function CustomLinkList({ customLinks, @@ -23,7 +23,7 @@ export function CustomLinkList({ transaction: Transaction; }) { return ( - + {customLinks.map((link) => { const href = getHref(link, transaction); return ( diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/index.test.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.test.tsx similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/index.test.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.test.tsx diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/index.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.tsx similarity index 94% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/index.tsx rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.tsx index cbbf34c78c4af..bc234b88a08e4 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLinkMenuSection/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.tsx @@ -5,37 +5,36 @@ * 2.0. */ -import React, { useMemo, useState } from 'react'; import { - EuiText, + EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, - EuiButtonEmpty, + EuiText, + EuiToolTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; -import { EuiToolTip } from '@elastic/eui'; -import { NO_PERMISSION_LABEL } from '../../../../../common/custom_link'; -import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; +import React, { useMemo, useState } from 'react'; import { ActionMenuDivider, Section, SectionSubtitle, SectionTitle, } from '../../../../../../observability/public'; -import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; -import { CustomLinkList } from './CustomLinkList'; -import { CustomLinkToolbar } from './CustomLinkToolbar'; -import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher'; -import { LoadingStatePrompt } from '../../LoadingStatePrompt'; -import { px } from '../../../../style/variables'; -import { CreateEditCustomLinkFlyout } from '../../../app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout'; -import { convertFiltersToQuery } from '../../../app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/helper'; +import { NO_PERMISSION_LABEL } from '../../../../../common/custom_link'; import { CustomLink, Filter, } from '../../../../../common/custom_link/custom_link_types'; +import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; +import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; +import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher'; +import { CreateEditCustomLinkFlyout } from '../../../app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout'; +import { convertFiltersToQuery } from '../../../app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/helper'; +import { LoadingStatePrompt } from '../../LoadingStatePrompt'; +import { CustomLinkToolbar } from './CustomLinkToolbar'; +import { CustomLinkList } from './custom_link_list'; const DEFAULT_LINKS_TO_SHOW = 3; @@ -165,7 +164,7 @@ function BottomSection({ return ( - + {i18n.translate('xpack.apm.customLink.empty', { defaultMessage: 'No custom links found. Set up your own custom links, e.g., a link to a specific Dashboard or external link.', diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/sections.test.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/sections.test.ts rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/sections.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts similarity index 100% rename from x-pack/plugins/apm/public/components/shared/TransactionActionMenu/sections.ts rename to x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts diff --git a/x-pack/plugins/apm/public/components/shared/truncate_with_tooltip/index.tsx b/x-pack/plugins/apm/public/components/shared/truncate_with_tooltip/index.tsx index 63e0b84362073..d9268c14aa2ea 100644 --- a/x-pack/plugins/apm/public/components/shared/truncate_with_tooltip/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/truncate_with_tooltip/index.tsx @@ -8,7 +8,7 @@ import { EuiToolTip } from '@elastic/eui'; import React from 'react'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; -import { truncate } from '../../../style/variables'; +import { truncate } from '../../../utils/style'; const tooltipAnchorClassname = '_apm_truncate_tooltip_anchor_'; diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts index 46cbc26a74d2d..0cd5009570613 100644 --- a/x-pack/plugins/apm/public/plugin.ts +++ b/x-pack/plugins/apm/public/plugin.ts @@ -22,6 +22,7 @@ import type { DataPublicPluginStart, } from '../../../../src/plugins/data/public'; import type { EmbeddableStart } from '../../../../src/plugins/embeddable/public'; +import type { FleetStart } from '../../fleet/public'; import type { HomePublicPluginSetup } from '../../../../src/plugins/home/public'; import type { PluginSetupContract as AlertingPluginPublicSetup, @@ -43,6 +44,10 @@ import type { } from '../../triggers_actions_ui/public'; import { registerApmAlerts } from './components/alerting/register_apm_alerts'; import { featureCatalogueEntry } from './featureCatalogueEntry'; +import { + getApmEnrollmentFlyoutData, + LazyApmCustomAssetsExtension, +} from './components/fleet_integration'; export type ApmPluginSetup = ReturnType; @@ -69,6 +74,7 @@ export interface ApmPluginStartDeps { ml?: MlPluginStart; triggersActionsUi: TriggersAndActionsUIPublicPluginStart; observability: ObservabilityPublicStart; + fleet: FleetStart; } export class ApmPlugin implements Plugin { @@ -303,5 +309,22 @@ export class ApmPlugin implements Plugin { return {}; } - public start(core: CoreStart, plugins: ApmPluginStartDeps) {} + public start(core: CoreStart, plugins: ApmPluginStartDeps) { + const { fleet } = plugins; + + const agentEnrollmentExtensionData = getApmEnrollmentFlyoutData(); + + fleet.registerExtension({ + package: 'apm', + view: 'agent-enrollment-flyout', + title: agentEnrollmentExtensionData.title, + Component: agentEnrollmentExtensionData.Component, + }); + + fleet.registerExtension({ + package: 'apm', + view: 'package-detail-assets', + Component: LazyApmCustomAssetsExtension, + }); + } } diff --git a/x-pack/plugins/apm/public/style/variables.ts b/x-pack/plugins/apm/public/style/variables.ts deleted file mode 100644 index 07ccf97c0dab0..0000000000000 --- a/x-pack/plugins/apm/public/style/variables.ts +++ /dev/null @@ -1,56 +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. - */ - -// Units -export const unit = 16; - -export const units = { - unit, - eighth: unit / 8, - quarter: unit / 4, - half: unit / 2, - minus: unit * 0.75, - plus: unit * 1.5, - double: unit * 2, - triple: unit * 3, - quadruple: unit * 4, -}; - -export function px(value: number): string { - return `${value}px`; -} - -export function pct(value: number): string { - return `${value}%`; -} - -// Styling -export const borderRadius = '4px'; - -// Fonts -export const fontFamilyCode = - '"Roboto Mono", Consolas, Menlo, Courier, monospace'; - -// Font sizes -export const fontSize = '14px'; - -export const fontSizes = { - tiny: '10px', - small: '12px', - large: '16px', - xlarge: '20px', - xxlarge: '30px', -}; - -export function truncate(width: string) { - return ` - max-width: ${width}; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - `; -} diff --git a/x-pack/plugins/canvas/common/lib/url.ts b/x-pack/plugins/apm/public/utils/style.ts similarity index 51% rename from x-pack/plugins/canvas/common/lib/url.ts rename to x-pack/plugins/apm/public/utils/style.ts index 5018abc027713..3c8aa5d339c6e 100644 --- a/x-pack/plugins/canvas/common/lib/url.ts +++ b/x-pack/plugins/apm/public/utils/style.ts @@ -5,9 +5,13 @@ * 2.0. */ -import { isValidDataUrl } from '../../common/lib/dataurl'; -import { isValidHttpUrl } from '../../common/lib/httpurl'; +export const unit = 16; -export function isValidUrl(url: string) { - return isValidDataUrl(url) || isValidHttpUrl(url); +export function truncate(width: string | number) { + return ` + max-width: ${typeof width === 'string' ? width : `${width}px`}; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + `; } diff --git a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts index 3f36515e72a7a..eb82a89811087 100644 --- a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts +++ b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts @@ -13,24 +13,18 @@ export function getBucketSize({ start, end, numBuckets = 100, + minBucketSize, }: { start: number; end: number; numBuckets?: number; + minBucketSize?: number; }) { const duration = moment.duration(end - start, 'ms'); const bucketSize = Math.max( calculateAuto.near(numBuckets, duration).asSeconds(), - 1 + minBucketSize || 1 ); - const intervalString = `${bucketSize}s`; - if (bucketSize < 0) { - return { - bucketSize: 0, - intervalString: 'auto', - }; - } - - return { bucketSize, intervalString }; + return { bucketSize, intervalString: `${bucketSize}s` }; } diff --git a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.test.ts b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.test.ts new file mode 100644 index 0000000000000..6af6d3342986c --- /dev/null +++ b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.test.ts @@ -0,0 +1,44 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { getBucketSizeForAggregatedTransactions } from './'; + +describe('getBucketSizeForAggregatedTransactions', () => { + describe('when searchAggregatedTransactions is enabled', () => { + it('returns min bucket size when date difference is lower than 60s', () => { + expect( + getBucketSizeForAggregatedTransactions({ + start: new Date('2021-06-30T15:00:00.000Z').valueOf(), + end: new Date('2021-06-30T15:00:30.000Z').valueOf(), + numBuckets: 10, + searchAggregatedTransactions: true, + }) + ).toEqual({ bucketSize: 60, intervalString: '60s' }); + }); + it('returns bucket size when date difference is greater than 60s', () => { + expect( + getBucketSizeForAggregatedTransactions({ + start: new Date('2021-06-30T15:00:00.000Z').valueOf(), + end: new Date('2021-06-30T15:30:00.000Z').valueOf(), + numBuckets: 10, + searchAggregatedTransactions: true, + }) + ).toEqual({ bucketSize: 300, intervalString: '300s' }); + }); + }); + describe('when searchAggregatedTransactions is disabled', () => { + it('returns 1s as bucket size', () => { + expect( + getBucketSizeForAggregatedTransactions({ + start: new Date('2021-06-30T15:00:00.000Z').valueOf(), + end: new Date('2021-06-30T15:00:30.000Z').valueOf(), + numBuckets: 10, + searchAggregatedTransactions: false, + }) + ).toEqual({ bucketSize: 1, intervalString: '1s' }); + }); + }); +}); diff --git a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.ts b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.ts new file mode 100644 index 0000000000000..b475e518ce982 --- /dev/null +++ b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.ts @@ -0,0 +1,23 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { getBucketSize } from '../get_bucket_size'; + +export function getBucketSizeForAggregatedTransactions({ + start, + end, + numBuckets = 100, + searchAggregatedTransactions, +}: { + start: number; + end: number; + numBuckets?: number; + searchAggregatedTransactions?: boolean; +}) { + const minBucketSize = searchAggregatedTransactions ? 60 : undefined; + return getBucketSize({ start, end, numBuckets, minBucketSize }); +} diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts index 7d9dca9b2a706..6110ad3459911 100644 --- a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts +++ b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts @@ -20,7 +20,7 @@ import { getTransactionDurationFieldForAggregatedTransactions, } from '../../helpers/aggregated_transactions'; import { calculateThroughput } from '../../helpers/calculate_throughput'; -import { getBucketSize } from '../../helpers/get_bucket_size'; +import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions'; import { getLatencyAggregation, getLatencyValue, @@ -78,11 +78,14 @@ export async function getServiceInstancesTransactionStatistics< }): Promise>> { const { apmEventClient } = setup; - const { intervalString, bucketSize } = getBucketSize({ - start, - end, - numBuckets, - }); + const { intervalString, bucketSize } = getBucketSizeForAggregatedTransactions( + { + start, + end, + numBuckets, + searchAggregatedTransactions, + } + ); const field = getTransactionDurationFieldForAggregatedTransactions( searchAggregatedTransactions diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts index 36d372e322cbc..ea33c942cfc3b 100644 --- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts +++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts @@ -6,7 +6,6 @@ */ import { keyBy } from 'lodash'; -import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate'; import { EVENT_OUTCOME, SERVICE_NAME, @@ -15,10 +14,11 @@ import { } from '../../../common/elasticsearch_fieldnames'; import { EventOutcome } from '../../../common/event_outcome'; import { LatencyAggregationType } from '../../../common/latency_aggregation_types'; +import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate'; import { environmentQuery, - rangeQuery, kqlQuery, + rangeQuery, } from '../../../server/utils/queries'; import { Coordinate } from '../../../typings/timeseries'; import { @@ -26,7 +26,7 @@ import { getProcessorEventForAggregatedTransactions, getTransactionDurationFieldForAggregatedTransactions, } from '../helpers/aggregated_transactions'; -import { getBucketSize } from '../helpers/get_bucket_size'; +import { getBucketSizeForAggregatedTransactions } from '../helpers/get_bucket_size_for_aggregated_transactions'; import { getLatencyAggregation, getLatencyValue, @@ -68,7 +68,12 @@ export async function getServiceTransactionGroupDetailedStatistics({ }> > { const { apmEventClient } = setup; - const { intervalString } = getBucketSize({ start, end, numBuckets }); + const { intervalString } = getBucketSizeForAggregatedTransactions({ + start, + end, + numBuckets, + searchAggregatedTransactions, + }); const field = getTransactionDurationFieldForAggregatedTransactions( searchAggregatedTransactions diff --git a/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts b/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts index 019ab8770887a..7f48c591521e7 100644 --- a/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts +++ b/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts @@ -17,8 +17,8 @@ import { } from '../../../../common/transaction_types'; import { environmentQuery, - rangeQuery, kqlQuery, + rangeQuery, } from '../../../../server/utils/queries'; import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent'; import { @@ -26,8 +26,8 @@ import { getProcessorEventForAggregatedTransactions, getTransactionDurationFieldForAggregatedTransactions, } from '../../helpers/aggregated_transactions'; -import { getBucketSize } from '../../helpers/get_bucket_size'; import { calculateThroughput } from '../../helpers/calculate_throughput'; +import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions'; import { calculateTransactionErrorPercentage, getOutcomeAggregation, @@ -117,10 +117,11 @@ export async function getServiceTransactionStats({ timeseries: { date_histogram: { field: '@timestamp', - fixed_interval: getBucketSize({ + fixed_interval: getBucketSizeForAggregatedTransactions({ start, end, numBuckets: 20, + searchAggregatedTransactions, }).intervalString, min_doc_count: 0, extended_bounds: { min: start, max: end }, diff --git a/x-pack/plugins/apm/server/lib/services/get_throughput.ts b/x-pack/plugins/apm/server/lib/services/get_throughput.ts index 0490c31e7c63d..7eacf47f15b7a 100644 --- a/x-pack/plugins/apm/server/lib/services/get_throughput.ts +++ b/x-pack/plugins/apm/server/lib/services/get_throughput.ts @@ -12,14 +12,14 @@ import { } from '../../../common/elasticsearch_fieldnames'; import { environmentQuery, - rangeQuery, kqlQuery, + rangeQuery, } from '../../../server/utils/queries'; import { getDocumentTypeFilterForAggregatedTransactions, getProcessorEventForAggregatedTransactions, } from '../helpers/aggregated_transactions'; -import { getBucketSize } from '../helpers/get_bucket_size'; +import { getBucketSizeForAggregatedTransactions } from '../helpers/get_bucket_size_for_aggregated_transactions'; import { Setup } from '../helpers/setup_request'; interface Options { @@ -44,7 +44,11 @@ function fetcher({ end, }: Options) { const { apmEventClient } = setup; - const { intervalString } = getBucketSize({ start, end }); + const { intervalString } = getBucketSizeForAggregatedTransactions({ + start, + end, + searchAggregatedTransactions, + }); const filter: ESFilter[] = [ { term: { [SERVICE_NAME]: serviceName } }, { term: { [TRANSACTION_TYPE]: transactionType } }, diff --git a/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts b/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts index 6499e80be9302..cc3a13ef5c648 100644 --- a/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts +++ b/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts @@ -5,9 +5,6 @@ * 2.0. */ -import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate'; -import { Coordinate } from '../../../typings/timeseries'; - import { EVENT_OUTCOME, SERVICE_NAME, @@ -15,16 +12,18 @@ import { TRANSACTION_TYPE, } from '../../../common/elasticsearch_fieldnames'; import { EventOutcome } from '../../../common/event_outcome'; +import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate'; import { environmentQuery, - rangeQuery, kqlQuery, + rangeQuery, } from '../../../server/utils/queries'; +import { Coordinate } from '../../../typings/timeseries'; import { getDocumentTypeFilterForAggregatedTransactions, getProcessorEventForAggregatedTransactions, } from '../helpers/aggregated_transactions'; -import { getBucketSize } from '../helpers/get_bucket_size'; +import { getBucketSizeForAggregatedTransactions } from '../helpers/get_bucket_size_for_aggregated_transactions'; import { Setup, SetupTimeRange } from '../helpers/setup_request'; import { calculateTransactionErrorPercentage, @@ -101,7 +100,11 @@ export async function getErrorRate({ timeseries: { date_histogram: { field: '@timestamp', - fixed_interval: getBucketSize({ start, end }).intervalString, + fixed_interval: getBucketSizeForAggregatedTransactions({ + start, + end, + searchAggregatedTransactions, + }).intervalString, min_doc_count: 0, extended_bounds: { min: start, max: end }, }, diff --git a/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts index 1f8170921aac3..e3f59ca2e4328 100644 --- a/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts +++ b/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { offsetPreviousPeriodCoordinates } from '../../../../common/utils/offset_previous_period_coordinate'; import { ESFilter } from '../../../../../../../src/core/types/elasticsearch'; import { PromiseReturnType } from '../../../../../observability/typings/common'; import { @@ -14,18 +13,19 @@ import { TRANSACTION_TYPE, } from '../../../../common/elasticsearch_fieldnames'; import { LatencyAggregationType } from '../../../../common/latency_aggregation_types'; +import { offsetPreviousPeriodCoordinates } from '../../../../common/utils/offset_previous_period_coordinate'; import { environmentQuery, - rangeQuery, kqlQuery, + rangeQuery, } from '../../../../server/utils/queries'; import { getDocumentTypeFilterForAggregatedTransactions, getProcessorEventForAggregatedTransactions, getTransactionDurationFieldForAggregatedTransactions, } from '../../../lib/helpers/aggregated_transactions'; -import { getBucketSize } from '../../../lib/helpers/get_bucket_size'; import { Setup, SetupTimeRange } from '../../../lib/helpers/setup_request'; +import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions'; import { getLatencyAggregation, getLatencyValue, @@ -58,7 +58,11 @@ function searchLatency({ end: number; }) { const { apmEventClient } = setup; - const { intervalString } = getBucketSize({ start, end }); + const { intervalString } = getBucketSizeForAggregatedTransactions({ + start, + end, + searchAggregatedTransactions, + }); const filter: ESFilter[] = [ { term: { [SERVICE_NAME]: serviceName } }, diff --git a/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts index ed85e700c3473..ff3534159d19b 100644 --- a/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts +++ b/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts @@ -15,15 +15,15 @@ import { } from '../../../../common/elasticsearch_fieldnames'; import { environmentQuery, - rangeQuery, kqlQuery, + rangeQuery, } from '../../../../server/utils/queries'; import { getDocumentTypeFilterForAggregatedTransactions, getProcessorEventForAggregatedTransactions, } from '../../../lib/helpers/aggregated_transactions'; -import { getBucketSize } from '../../../lib/helpers/get_bucket_size'; import { Setup, SetupTimeRange } from '../../../lib/helpers/setup_request'; +import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions'; import { getThroughputBuckets } from './transform'; export type ThroughputChartsResponse = PromiseReturnType< @@ -115,7 +115,12 @@ export async function getThroughputCharts({ setup: Setup & SetupTimeRange; searchAggregatedTransactions: boolean; }) { - const { bucketSize, intervalString } = getBucketSize(setup); + const { bucketSize, intervalString } = getBucketSizeForAggregatedTransactions( + { + ...setup, + searchAggregatedTransactions, + } + ); const response = await searchThroughput({ environment, diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js index 0e7a1afb0dbb1..dcb6035dbb687 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable } from '../common/__fixtures__/test_tables'; import { fontStyle } from '../common/__fixtures__/test_styles'; import { markdown } from './markdown'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js index d61fef7abced8..fa831cacbcb18 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js @@ -5,7 +5,7 @@ * 2.0. */ -import { elasticLogo } from '../../../lib/elastic_logo'; +import { elasticLogo } from '../../../../../../../src/plugins/presentation_util/common/lib'; export const fontStyle = { type: 'style', diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js index c09c3ff99d89c..7d983e02f1123 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { all } from './all'; describe('all', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js index 7e018427dc4c7..85e062f454bc5 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { emptyTable, testTable } from './__fixtures__/test_tables'; import { alterColumn } from './alterColumn'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js index d95029fef8144..b691595409c62 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js @@ -4,8 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { any } from './any'; describe('any', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js index e7c2d3047bb91..fe297e00e7b35 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { asFn } from './as'; describe('as', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js index 491558486eb44..1538ee8254ec3 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { testTable } from './__fixtures__/test_tables'; import { axisConfig } from './axisConfig'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js index adee8a56dea49..d5621943bccaf 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js @@ -7,7 +7,7 @@ import { of } from 'rxjs'; import { TestScheduler } from 'rxjs/testing'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { caseFn } from './case'; describe('case', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js index 43c24f10c0465..0834dc27d321b 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js @@ -4,8 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable } from './__fixtures__/test_tables'; import { clear } from './clear'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js index d76c7a9174b81..d7f28559ee0ef 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { emptyTable, testTable } from './__fixtures__/test_tables'; import { columns } from './columns'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js index b0d80debf4ec3..c04f132a577fd 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { compare } from './compare'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts index d30324e0e2bfe..12aad5d609414 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts @@ -8,7 +8,7 @@ import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common'; import { ContainerStyle, Overflow, BackgroundRepeat, BackgroundSize } from '../../../types'; import { getFunctionHelp, getFunctionErrors } from '../../../i18n'; -import { isValidUrl } from '../../../common/lib/url'; +import { isValidUrl } from '../../../../../../src/plugins/presentation_util/common/lib'; interface Output extends ContainerStyle { type: 'containerStyle'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js index b0a6ddf2caa74..7a3599f47ec86 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js @@ -5,8 +5,10 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; -import { elasticLogo } from '../../lib/elastic_logo'; +import { + elasticLogo, + functionWrapper, +} from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { containerStyle } from './containerStyle'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js index 7cefb41754fd4..e4c45f228aa17 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable, emptyTable } from './__fixtures__/test_tables'; import { context } from './context'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts index 93cf07a9dd5dd..cfef618bee39d 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts @@ -5,11 +5,11 @@ * 2.0. */ -// @ts-expect-error untyped lib -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { csv } from './csv'; -import { Datatable } from 'src/plugins/expressions'; +import { Datatable, ExecutionContext, SerializableState } from 'src/plugins/expressions'; +import { Adapters } from 'src/plugins/inspector'; const errors = getFunctionErrors().csv; @@ -30,43 +30,59 @@ describe('csv', () => { it('should return a datatable', () => { expect( - fn(null, { - data: `name,number + fn( + null, + { + data: `name,number one,1 two,2 fourty two,42`, - }) + }, + {} as ExecutionContext + ) ).toEqual(expected); }); it('should allow custom delimiter', () => { expect( - fn(null, { - data: `name\tnumber + fn( + null, + { + data: `name\tnumber one\t1 two\t2 fourty two\t42`, - delimiter: '\t', - }) + delimiter: '\t', + }, + {} as ExecutionContext + ) ).toEqual(expected); expect( - fn(null, { - data: `name%SPLIT%number + fn( + null, + { + data: `name%SPLIT%number one%SPLIT%1 two%SPLIT%2 fourty two%SPLIT%42`, - delimiter: '%SPLIT%', - }) + delimiter: '%SPLIT%', + }, + {} as ExecutionContext + ) ).toEqual(expected); }); it('should allow custom newline', () => { expect( - fn(null, { - data: `name,number\rone,1\rtwo,2\rfourty two,42`, - newline: '\r', - }) + fn( + null, + { + data: `name,number\rone,1\rtwo,2\rfourty two,42`, + newline: '\r', + }, + {} as ExecutionContext + ) ).toEqual(expected); }); @@ -83,10 +99,14 @@ fourty two%SPLIT%42`, }; expect( - fn(null, { - data: `foo," bar ", baz, " buz " + fn( + null, + { + data: `foo," bar ", baz, " buz " 1,2,3,4`, - }) + }, + {} as ExecutionContext + ) ).toEqual(expectedResult); }); @@ -106,22 +126,30 @@ fourty two%SPLIT%42`, }; expect( - fn(null, { - data: `foo," bar ", baz, " buz " + fn( + null, + { + data: `foo," bar ", baz, " buz " 1," best ",3, " ok" " good", bad, better , " worst " `, - }) + }, + {} as ExecutionContext + ) ).toEqual(expectedResult); }); it('throws when given invalid csv', () => { expect(() => { - fn(null, { - data: `name,number + fn( + null, + { + data: `name,number one|1 two.2 fourty two,42`, - }); + }, + {} as ExecutionContext + ); }).toThrow(new RegExp(errors.invalidInputCSV().message)); }); }); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js index 08c43caaf8b9e..cd06ce5fbb463 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js @@ -6,7 +6,7 @@ */ import sinon from 'sinon'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { date } from './date'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js index f19318753611c..00429779e2ff1 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { doFn } from './do'; describe('do', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts index d8f2e8518daf0..254efd9f5f0d9 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts @@ -5,23 +5,30 @@ * 2.0. */ -// @ts-expect-error untyped local -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable, relationalTable } from './__fixtures__/test_tables'; import { dropdownControl } from './dropdownControl'; +import { ExecutionContext, SerializableState } from 'src/plugins/expressions'; +import { Adapters } from 'src/plugins/inspector'; describe('dropdownControl', () => { const fn = functionWrapper(dropdownControl); it('returns a render as dropdown_filter', () => { - expect(fn(testTable, { filterColumn: 'name', valueColumn: 'name' })).toHaveProperty( - 'type', - 'render' - ); - expect(fn(testTable, { filterColumn: 'name', valueColumn: 'name' })).toHaveProperty( - 'as', - 'dropdown_filter' - ); + expect( + fn( + testTable, + { filterColumn: 'name', valueColumn: 'name' }, + {} as ExecutionContext + ) + ).toHaveProperty('type', 'render'); + expect( + fn( + testTable, + { filterColumn: 'name', valueColumn: 'name' }, + {} as ExecutionContext + ) + ).toHaveProperty('as', 'dropdown_filter'); }); describe('args', () => { @@ -32,12 +39,24 @@ describe('dropdownControl', () => { unique.find(([value, label]) => value === name) ? unique : [...unique, [name, name]], [] ); - expect(fn(testTable, { valueColumn: 'name' }).value.choices).toEqual(uniqueNames); + expect( + fn( + testTable, + { valueColumn: 'name' }, + {} as ExecutionContext + )?.value?.choices + ).toEqual(uniqueNames); }); it('returns an empty array when provided an invalid column', () => { - expect(fn(testTable, { valueColumn: 'foo' }).value.choices).toEqual([]); - expect(fn(testTable, { valueColumn: '' }).value.choices).toEqual([]); + expect( + fn(testTable, { valueColumn: 'foo' }, {} as ExecutionContext) + ?.value?.choices + ).toEqual([]); + expect( + fn(testTable, { valueColumn: '' }, {} as ExecutionContext) + ?.value?.choices + ).toEqual([]); }); }); @@ -45,7 +64,11 @@ describe('dropdownControl', () => { it('populates dropdown choices with labels from label column', () => { const expectedChoices = relationalTable.rows.map((row) => [row.id, row.name]); expect( - fn(relationalTable, { valueColumn: 'id', labelColumn: 'name' }).value.choices + fn( + relationalTable, + { valueColumn: 'id', labelColumn: 'name' }, + {} as ExecutionContext + )?.value?.choices ).toEqual(expectedChoices); }); }); @@ -53,19 +76,30 @@ describe('dropdownControl', () => { describe('filterColumn', () => { it('sets which column the filter is applied to', () => { - expect(fn(testTable, { filterColumn: 'name' }).value).toHaveProperty('column', 'name'); - expect(fn(testTable, { filterColumn: 'name', valueColumn: 'price' }).value).toHaveProperty( - 'column', - 'name' - ); + expect( + fn(testTable, { filterColumn: 'name' }, {} as ExecutionContext) + ?.value + ).toHaveProperty('column', 'name'); + expect( + fn( + testTable, + { filterColumn: 'name', valueColumn: 'price' }, + {} as ExecutionContext + )?.value + ).toHaveProperty('column', 'name'); }); it('defaults to valueColumn if not provided', () => { - expect(fn(testTable, { valueColumn: 'price' }).value).toHaveProperty('column', 'price'); + expect( + fn(testTable, { valueColumn: 'price' }, {} as ExecutionContext) + ?.value + ).toHaveProperty('column', 'price'); }); it('sets column to undefined if no args are provided', () => { - expect(fn(testTable).value).toHaveProperty('column', undefined); + expect( + fn(testTable, {}, {} as ExecutionContext)?.value + ).toHaveProperty('column', undefined); }); }); }); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js index 5f8d9e042125f..5e710fc109396 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { eq } from './eq'; describe('eq', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js index 10781a7af452d..9d3dcb6a99167 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { emptyFilter } from './__fixtures__/test_filters'; import { exactly } from './exactly'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js index 8c328e3d8adf6..edc2c1db18f64 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js @@ -7,7 +7,7 @@ import { of } from 'rxjs'; import { TestScheduler } from 'rxjs/testing'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable } from './__fixtures__/test_tables'; import { filterrows } from './filterrows'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js index 6fda32dfef51a..e725dccc8ca34 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { formatdate } from './formatdate'; describe('formatdate', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js index 37d3d2d905e67..e957bf115198f 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { formatnumber } from './formatnumber'; describe('formatnumber', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js index 2dda4d8f4258e..a556c2ddeb48a 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { emptyTable, testTable } from './__fixtures__/test_tables'; import { getCell } from './getCell'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js index 576d2a54dd59b..53675fca2b3ae 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { gt } from './gt'; describe('gt', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js index 174f617f47a8c..aefb2ccf926ae 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { gte } from './gte'; describe('gte', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js index c25d0f7ae727f..4721eaf6cb530 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { emptyTable, testTable } from './__fixtures__/test_tables'; import { head } from './head'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js index cab331807e44c..df576a6a2507f 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js @@ -7,7 +7,7 @@ import { of } from 'rxjs'; import { TestScheduler } from 'rxjs/testing'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { ifFn } from './if'; describe('if', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js index cd0809d9b30a2..45b26cd25937d 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js @@ -6,14 +6,14 @@ */ import expect from '@kbn/expect'; -// import { functionWrapper } from '../../../test_helpers/function_wrapper'; -import { elasticLogo } from '../../lib/elastic_logo'; -import { elasticOutline } from '../../lib/elastic_outline'; +import { + elasticLogo, + elasticOutline, +} from '../../../../../../src/plugins/presentation_util/common/lib'; // import { image } from './image'; // TODO: the test was not running and is not up to date describe.skip('image', () => { - // const fn = functionWrapper(image); const fn = jest.fn(); it('returns an image object using a dataUrl', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts index b4d067280cb69..c3e64e48b23fc 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts @@ -7,9 +7,10 @@ import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common'; import { getFunctionHelp, getFunctionErrors } from '../../../i18n'; - -import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl'; -import { elasticLogo } from '../../lib/elastic_logo'; +import { + elasticLogo, + resolveWithMissingImage, +} from '../../../../../../src/plugins/presentation_util/common/lib'; export enum ImageMode { CONTAIN = 'contain', diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts index 5c4d1d55cff04..9da646e695861 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts @@ -43,7 +43,6 @@ import { replace } from './replace'; import { rounddate } from './rounddate'; import { rowCount } from './rowCount'; import { repeatImage } from './repeat_image'; -import { revealImage } from './revealImage'; import { seriesStyle } from './seriesStyle'; import { shape } from './shape'; import { sort } from './sort'; @@ -94,7 +93,6 @@ export const functions = [ render, repeatImage, replace, - revealImage, rounddate, rowCount, seriesStyle, diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js index 12b1002d1e377..94fef857983bc 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { testTable } from './__fixtures__/test_tables'; import { joinRows } from './join_rows'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js index 8f16e446997ea..1ecfca9fc2f94 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { lt } from './lt'; describe('lt', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js index 954b30e8c3c92..f32d2d23027c3 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { lte } from './lte'; describe('lte', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js index a99d4823e5930..3f2d0ad2cb76e 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { fontStyle } from './__fixtures__/test_styles'; import { metric } from './metric'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js index 0a1980760cd09..88c7a5c18bc7a 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { neq } from './neq'; describe('neq', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js index 5bf100eb90f4c..282cb2460d61c 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js @@ -7,7 +7,7 @@ import { of } from 'rxjs'; import { TestScheduler } from 'rxjs/testing'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { testTable } from './__fixtures__/test_tables'; import { ply } from './ply'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js index f516cbbe5258f..6438e2a4d19c0 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js @@ -6,7 +6,7 @@ */ import expect from '@kbn/expect'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { progress } from './progress'; import { fontStyle } from './__fixtures__/test_styles'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js index 6a91f4c280692..3248af5504093 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { DEFAULT_ELEMENT_CSS } from '../../../common/lib/constants'; import { testTable } from './__fixtures__/test_tables'; import { fontStyle, containerStyle } from './__fixtures__/test_styles'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts index cc7fc00a5df1f..7a52833693cc6 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts @@ -49,7 +49,6 @@ export function render(): ExpressionFunctionDefinition< 'plot', 'progress', 'repeatImage', - 'revealImage', 'shape', 'table', 'time_filter', diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js index f95d3d0ec03d0..97f0552721ccf 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js @@ -5,9 +5,11 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; -import { elasticOutline } from '../../lib/elastic_outline'; -import { elasticLogo } from '../../lib/elastic_logo'; +import { + elasticLogo, + elasticOutline, + functionWrapper, +} from '../../../../../../src/plugins/presentation_util/common/lib'; import { repeatImage } from './repeat_image'; describe('repeatImage', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts index 6e62139e4da0d..904b2478760ab 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts @@ -6,8 +6,10 @@ */ import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common'; -import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl'; -import { elasticOutline } from '../../lib/elastic_outline'; +import { + elasticOutline, + resolveWithMissingImage, +} from '../../../../../../src/plugins/presentation_util/common/lib'; import { Render } from '../../../types'; import { getFunctionHelp } from '../../../i18n'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js index 26e44f48f685d..6025ff354cd8d 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { replace } from './replace'; describe('replace', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/reveal_image.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/reveal_image.test.js deleted file mode 100644 index d97168c3aacc1..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/reveal_image.test.js +++ /dev/null @@ -1,88 +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 { functionWrapper } from '../../../test_helpers/function_wrapper'; -import { elasticOutline } from '../../lib/elastic_outline'; -import { elasticLogo } from '../../lib/elastic_logo'; -import { getFunctionErrors } from '../../../i18n'; -import { revealImage } from './revealImage'; - -const errors = getFunctionErrors().revealImage; - -describe('revealImage', () => { - const fn = functionWrapper(revealImage); - - it('returns a render as revealImage', () => { - const result = fn(0.5); - expect(result).toHaveProperty('type', 'render'); - expect(result).toHaveProperty('as', 'revealImage'); - }); - - describe('context', () => { - it('throws when context is not a number between 0 and 1', () => { - expect(() => { - fn(10, { - image: elasticLogo, - emptyImage: elasticOutline, - origin: 'top', - }); - }).toThrow(new RegExp(errors.invalidPercent(10).message)); - - expect(() => { - fn(-0.1, { - image: elasticLogo, - emptyImage: elasticOutline, - origin: 'top', - }); - }).toThrow(new RegExp(errors.invalidPercent(-0.1).message)); - }); - }); - - describe('args', () => { - describe('image', () => { - it('sets the image', () => { - const result = fn(0.89, { image: elasticLogo }).value; - expect(result).toHaveProperty('image', elasticLogo); - }); - - it('defaults to the Elastic outline logo', () => { - const result = fn(0.89).value; - expect(result).toHaveProperty('image', elasticOutline); - }); - }); - - describe('emptyImage', () => { - it('sets the background image', () => { - const result = fn(0, { emptyImage: elasticLogo }).value; - expect(result).toHaveProperty('emptyImage', elasticLogo); - }); - - it('sets emptyImage to null', () => { - const result = fn(0).value; - expect(result).toHaveProperty('emptyImage', null); - }); - }); - - describe('origin', () => { - it('sets which side to start the reveal from', () => { - let result = fn(1, { origin: 'top' }).value; - expect(result).toHaveProperty('origin', 'top'); - result = fn(1, { origin: 'left' }).value; - expect(result).toHaveProperty('origin', 'left'); - result = fn(1, { origin: 'bottom' }).value; - expect(result).toHaveProperty('origin', 'bottom'); - result = fn(1, { origin: 'right' }).value; - expect(result).toHaveProperty('origin', 'right'); - }); - - it('defaults to bottom', () => { - const result = fn(1).value; - expect(result).toHaveProperty('origin', 'bottom'); - }); - }); - }); -}); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js index f2c2f8af50a81..0ef832d973271 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { rounddate } from './rounddate'; describe('rounddate', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js index b47bb662f43d4..7a32849e9161a 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { emptyTable, testTable } from './__fixtures__/test_tables'; import { rowCount } from './rowCount'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js index ebd1f370db343..6e91b84d82b6f 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { seriesStyle } from './seriesStyle'; describe('seriesStyle', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js index 97f8b20c57efa..f59c517c91d88 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable } from './__fixtures__/test_tables'; import { sort } from './sort'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js index 3a3bb46e4d395..0260c9e77c424 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable, emptyTable } from './__fixtures__/test_tables'; import { staticColumn } from './staticColumn'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js index c598c036bcaa9..48af07b7cd880 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { string } from './string'; describe('string', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js index 7a6d483d6c72b..c6f592889c991 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js @@ -7,7 +7,7 @@ import { of } from 'rxjs'; import { TestScheduler } from 'rxjs/testing'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { switchFn } from './switch'; describe('switch', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js index 2eff610ac8ee5..42e5150b03637 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable } from './__fixtures__/test_tables'; import { fontStyle } from './__fixtures__/test_styles'; import { table } from './table'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js index 93461a2ef4575..420489754d20e 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { emptyTable, testTable } from './__fixtures__/test_tables'; import { tail } from './tail'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js index e45a11b786d19..f45ec981b1a8a 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js @@ -6,7 +6,7 @@ */ import sinon from 'sinon'; -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { emptyFilter } from './__fixtures__/test_filters'; import { timefilter } from './timefilter'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js index cf2c316507c35..b4a476807b7ee 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; import { timefilterControl } from './timefilterControl'; describe('timefilterControl', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_logo.ts b/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_logo.ts deleted file mode 100644 index 1ade7f1f269c0..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_logo.ts +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable */ -export const elasticLogo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_outline.ts b/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_outline.ts deleted file mode 100644 index 7271f5b32d547..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_outline.ts +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable */ -export const elasticOutline = 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%22-3.948730230331421%20-1.7549896240234375%20245.25946044921875%20241.40370178222656%22%20width%3D%22245.25946044921875%22%20height%3D%22241.40370178222656%22%20style%3D%22enable-background%3Anew%200%200%20686.2%20235.7%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%232D2D2D%3B%7D%0A%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%200%2C%200%29%22%3E%0A%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M329.4%2C160.3l4.7-0.5l0.3%2C9.6c-12.4%2C1.7-23%2C2.6-31.8%2C2.6c-11.7%2C0-20-3.4-24.9-10.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-4.9-6.8-7.3-17.4-7.3-31.7c0-28.6%2C11.4-42.9%2C34.1-42.9c11%2C0%2C19.2%2C3.1%2C24.6%2C9.2c5.4%2C6.1%2C8.1%2C15.8%2C8.1%2C28.9l-0.7%2C9.3h-53.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0%2C9%2C1.6%2C15.7%2C4.9%2C20c3.3%2C4.3%2C8.9%2C6.5%2C17%2C6.5C312.8%2C161.2%2C321.1%2C160.9%2C329.4%2C160.3z%20M325%2C124.9c0-10-1.6-17.1-4.8-21.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.2-4.1-8.4-6.2-15.6-6.2c-7.2%2C0-12.7%2C2.2-16.3%2C6.5c-3.6%2C4.3-5.5%2C11.3-5.6%2C20.9H325z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M354.3%2C171.4V64h12.2v107.4H354.3z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.5%2C113.5v41.1c0%2C4.1%2C10.1%2C3.9%2C10.1%2C3.9l-0.6%2C10.8c-8.6%2C0-15.7%2C0.7-20-3.4c-9.8%2C4.3-19.5%2C6.1-29.3%2C6.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.5%2C0-13.2-2.1-17.1-6.4c-3.9-4.2-5.9-10.3-5.9-18.3c0-7.9%2C2-13.8%2C6-17.5c4-3.7%2C10.3-6.1%2C18.9-6.9l25.6-2.4v-7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0-5.5-1.2-9.5-3.6-11.9c-2.4-2.4-5.7-3.6-9.8-3.6l-32.1%2C0V87.2h31.3c9.2%2C0%2C15.9%2C2.1%2C20.1%2C6.4C441.4%2C97.8%2C443.5%2C104.5%2C443.5%2C113.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bz%20M393.3%2C146.7c0%2C10%2C4.1%2C15%2C12.4%2C15c7.4%2C0%2C14.7-1.2%2C21.8-3.7l3.7-1.3v-26.9l-24.1%2C2.3c-4.9%2C0.4-8.4%2C1.8-10.6%2C4.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3BC394.4%2C138.7%2C393.3%2C142.2%2C393.3%2C146.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M491.2%2C98.2c-11.8%2C0-17.8%2C4.1-17.8%2C12.4c0%2C3.8%2C1.4%2C6.5%2C4.1%2C8.1c2.7%2C1.6%2C8.9%2C3.2%2C18.6%2C4.9%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc9.7%2C1.7%2C16.5%2C4%2C20.5%2C7.1c4%2C3%2C6%2C8.7%2C6%2C17.1c0%2C8.4-2.7%2C14.5-8.1%2C18.4c-5.4%2C3.9-13.2%2C5.9-23.6%2C5.9c-6.7%2C0-29.2-2.5-29.2-2.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bl0.7-10.6c12.9%2C1.2%2C22.3%2C2.2%2C28.6%2C2.2c6.3%2C0%2C11.1-1%2C14.4-3c3.3-2%2C5-5.4%2C5-10.1c0-4.7-1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-9.6-1.5-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3c0-7.9%2C2.8-13.8%2C8.4-17.6c5.6-3.8%2C12.6-5.7%2C20.9-5.7c6.6%2C0%2C29.6%2C1.7%2C29.6%2C1.7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bv10.7C508.1%2C99%2C498.2%2C98.2%2C491.2%2C98.2z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M581.7%2C99.5h-25.9v39c0%2C9.3%2C0.7%2C15.5%2C2%2C18.4c1.4%2C2.9%2C4.6%2C4.4%2C9.7%2C4.4l14.5-1l0.8%2C10.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.3%2C1.2-12.8%2C1.8-16.6%2C1.8c-8.5%2C0-14.3-2.1-17.6-6.2c-3.3-4.1-4.9-12-4.9-23.6V99.5h-11.6V88.9h11.6V63.9h12.1v24.9h25.9V99.5z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M598.7%2C78.4V64.3h12.2v14.2H598.7z%20M598.7%2C171.4V88.9h12.2v82.5H598.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M663.8%2C87.2c3.6%2C0%2C9.7%2C0.7%2C18.3%2C2l3.9%2C0.5l-0.5%2C9.9c-8.7-1-15.1-1.5-19.2-1.5c-9.2%2C0-15.5%2C2.2-18.8%2C6.6%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.3%2C4.4-5%2C12.6-5%2C24.5c0%2C11.9%2C1.5%2C20.2%2C4.6%2C24.9c3.1%2C4.7%2C9.5%2C7%2C19.3%2C7l19.2-1.5l0.5%2C10.1c-10.1%2C1.5-17.7%2C2.3-22.7%2C2.3%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-12.7%2C0-21.5-3.3-26.3-9.8c-4.8-6.5-7.3-17.5-7.3-33c0-15.5%2C2.6-26.4%2C7.8-32.6C643%2C90.4%2C651.7%2C87.2%2C663.8%2C87.2z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M236.6%2C123.5c0-19.8-12.3-37.2-30.8-43.9c0.8-4.2%2C1.2-8.4%2C1.2-12.7C207%2C30%2C177%2C0%2C140.2%2C0%26%2310%3B%26%239%3B%26%239%3BC118.6%2C0%2C98.6%2C10.3%2C86%2C27.7c-6.2-4.8-13.8-7.4-21.7-7.4c-19.6%2C0-35.5%2C15.9-35.5%2C35.5c0%2C4.3%2C0.8%2C8.5%2C2.2%2C12.4%26%2310%3B%26%239%3B%26%239%3BC12.6%2C74.8%2C0%2C92.5%2C0%2C112.2c0%2C19.9%2C12.4%2C37.3%2C30.9%2C44c-0.8%2C4.1-1.2%2C8.4-1.2%2C12.7c0%2C36.8%2C29.9%2C66.7%2C66.7%2C66.7%26%2310%3B%26%239%3B%26%239%3Bc21.6%2C0%2C41.6-10.4%2C54.1-27.8c6.2%2C4.9%2C13.8%2C7.6%2C21.7%2C7.6c19.6%2C0%2C35.5-15.9%2C35.5-35.5c0-4.3-0.8-8.5-2.2-12.4%26%2310%3B%26%239%3B%26%239%3BC223.9%2C160.9%2C236.6%2C143.2%2C236.6%2C123.5z%20M91.6%2C34.8c10.9-15.9%2C28.9-25.4%2C48.1-25.4c32.2%2C0%2C58.4%2C26.2%2C58.4%2C58.4%26%2310%3B%26%239%3B%26%239%3Bc0%2C3.9-0.4%2C7.7-1.1%2C11.5l-52.2%2C45.8L93%2C101.5L82.9%2C79.9L91.6%2C34.8z%20M65.4%2C29c6.2%2C0%2C12.1%2C2%2C17%2C5.7l-7.8%2C40.3l-35.5-8.4%26%2310%3B%26%239%3B%26%239%3Bc-1.1-3.1-1.7-6.3-1.7-9.7C37.4%2C41.6%2C49.9%2C29%2C65.4%2C29z%20M9.1%2C112.3c0-16.7%2C11-31.9%2C26.9-37.2L75%2C84.4l9.1%2C19.5l-49.8%2C45%26%2310%3B%26%239%3B%26%239%3BC19.2%2C143.1%2C9.1%2C128.6%2C9.1%2C112.3z%20M145.2%2C200.9c-10.9%2C16.1-29%2C25.6-48.4%2C25.6c-32.3%2C0-58.6-26.3-58.6-58.5c0-4%2C0.4-7.9%2C1.1-11.7%26%2310%3B%26%239%3B%26%239%3Bl50.9-46l52%2C23.7l11.5%2C22L145.2%2C200.9z%20M171.2%2C206.6c-6.1%2C0-12-2-16.9-5.8l7.7-40.2l35.4%2C8.3c1.1%2C3.1%2C1.7%2C6.3%2C1.7%2C9.7%26%2310%3B%26%239%3B%26%239%3BC199.2%2C194.1%2C186.6%2C206.6%2C171.2%2C206.6z%20M200.5%2C160.5l-39-9.1l-10.4-19.8l51-44.7c15.1%2C5.7%2C25.2%2C20.2%2C25.2%2C36.5%26%2310%3B%26%239%3B%26%239%3BC227.4%2C140.1%2C216.4%2C155.3%2C200.5%2C160.5z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx index 7276a55bdf49d..8839910d78e0d 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { image } from '../image'; import { Render } from './render'; -import { elasticLogo } from '../../lib/elastic_logo'; +import { elasticLogo } from '../../../../../../src/plugins/presentation_util/common/lib'; storiesOf('renderers/image', module).add('default', () => { const config = { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx index 8dd059cf7a32f..ed2706389d83d 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx @@ -9,8 +9,10 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { repeatImage } from '../repeat_image'; import { Render } from './render'; -import { elasticLogo } from '../../lib/elastic_logo'; -import { elasticOutline } from '../../lib/elastic_outline'; +import { + elasticLogo, + elasticOutline, +} from '../../../../../../src/plugins/presentation_util/common/lib'; storiesOf('renderers/repeatImage', module).add('default', () => { const config = { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts index c6b40936c288a..3295332bb6316 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts @@ -14,7 +14,6 @@ import { pie } from './pie'; import { plot } from './plot'; import { progress } from './progress'; import { repeatImage } from './repeat_image'; -import { revealImage } from './reveal_image'; import { shape } from './shape'; import { table } from './table'; import { text } from './text'; @@ -29,7 +28,6 @@ export const renderFunctions = [ plot, progress, repeatImage, - revealImage, shape, table, text, diff --git a/x-pack/plugins/canvas/public/services/legacy/stubs/notify.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts similarity index 56% rename from x-pack/plugins/canvas/public/services/legacy/stubs/notify.ts rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts index 866da3d459ed3..bf9b6a744e686 100644 --- a/x-pack/plugins/canvas/public/services/legacy/stubs/notify.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts @@ -5,13 +5,7 @@ * 2.0. */ -import { NotifyService } from '../notify'; +import { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public'; -const noop = (..._args: any[]): any => {}; - -export const notifyService: NotifyService = { - error: noop, - info: noop, - success: noop, - warning: noop, -}; +export const renderFunctions = [revealImageRenderer]; +export const renderFunctionFactories = []; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx index 8c88fe820d5d3..86e9daed105db 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx @@ -7,8 +7,7 @@ import ReactDOM from 'react-dom'; import React from 'react'; -import { elasticLogo } from '../lib/elastic_logo'; -import { isValidUrl } from '../../common/lib/url'; +import { elasticLogo, isValidUrl } from '../../../../../src/plugins/presentation_util/common/lib'; import { Return as Arguments } from '../functions/common/image'; import { RendererStrings } from '../../i18n'; import { RendererFactory } from '../../types'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts index 3c2d90f81eedc..16a052edbbe82 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts @@ -15,11 +15,23 @@ import { renderFunctionFactories as filterFactories, } from './filters'; +import { + renderFunctions as externalFunctions, + renderFunctionFactories as externalFactories, +} from './external'; + import { renderFunctions as coreFunctions, renderFunctionFactories as coreFactories } from './core'; -export const renderFunctions = [...coreFunctions, ...filterFunctions, ...embeddableFunctions]; +export const renderFunctions = [ + ...coreFunctions, + ...filterFunctions, + ...embeddableFunctions, + ...externalFunctions, +]; + export const renderFunctionFactories = [ ...coreFactories, ...embeddableFactories, ...filterFactories, + ...externalFactories, ]; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts index 8286609aa334f..149a887683413 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts @@ -7,8 +7,10 @@ import $ from 'jquery'; import { times } from 'lodash'; -import { elasticOutline } from '../lib/elastic_outline'; -import { isValidUrl } from '../../common/lib/url'; +import { + elasticOutline, + isValidUrl, +} from '../../../../../src/plugins/presentation_util/common/lib'; import { RendererStrings, ErrorStrings } from '../../i18n'; import { Return as Arguments } from '../functions/common/repeat_image'; import { RendererFactory } from '../../types'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx deleted file mode 100644 index 672cecca1bead..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { revealImage } from '../'; -import { Render } from '../../__stories__/render'; -import { elasticOutline } from '../../../lib/elastic_outline'; -import { elasticLogo } from '../../../lib/elastic_logo'; -import { Origin } from '../../../functions/common/revealImage'; - -storiesOf('renderers/revealImage', module).add('default', () => { - const config = { - image: elasticLogo, - emptyImage: elasticOutline, - origin: Origin.LEFT, - percent: 0.45, - }; - - return ; -}); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/index.ts deleted file mode 100644 index 8d9ceb70f17a6..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/index.ts +++ /dev/null @@ -1,88 +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 { elasticOutline } from '../../lib/elastic_outline'; -import { isValidUrl } from '../../../common/lib/url'; -import { RendererStrings } from '../../../i18n'; -import { RendererFactory } from '../../../types'; -import { Output as Arguments } from '../../functions/common/revealImage'; - -const { revealImage: strings } = RendererStrings; - -export const revealImage: RendererFactory = () => ({ - name: 'revealImage', - displayName: strings.getDisplayName(), - help: strings.getHelpDescription(), - reuseDomNode: true, - render(domNode, config, handlers) { - const aligner = document.createElement('div'); - const img = new Image(); - - // modify the top-level container class - domNode.className = 'revealImage'; - - // set up the overlay image - function onLoad() { - setSize(); - finish(); - } - img.onload = onLoad; - - img.className = 'revealImage__image'; - img.style.clipPath = getClipPath(config.percent, config.origin); - img.style.setProperty('-webkit-clip-path', getClipPath(config.percent, config.origin)); - img.src = isValidUrl(config.image) ? config.image : elasticOutline; - handlers.onResize(onLoad); - - // set up the underlay, "empty" image - aligner.className = 'revealImageAligner'; - aligner.appendChild(img); - if (isValidUrl(config.emptyImage)) { - // only use empty image if one is provided - aligner.style.backgroundImage = `url(${config.emptyImage})`; - } - - function finish() { - const firstChild = domNode.firstChild; - if (firstChild) { - domNode.replaceChild(aligner, firstChild); - } else { - domNode.appendChild(aligner); - } - handlers.done(); - } - - function getClipPath(percent: number, origin = 'bottom') { - const directions: Record = { bottom: 0, left: 1, top: 2, right: 3 }; - const values: Array = [0, 0, 0, 0]; - values[directions[origin]] = `${100 - percent * 100}%`; - return `inset(${values.join(' ')})`; - } - - function setSize() { - const imgDimensions = { - height: img.naturalHeight, - width: img.naturalWidth, - ratio: img.naturalHeight / img.naturalWidth, - }; - - const domNodeDimensions = { - height: domNode.clientHeight, - width: domNode.clientWidth, - ratio: domNode.clientHeight / domNode.clientWidth, - }; - - if (imgDimensions.ratio > domNodeDimensions.ratio) { - img.style.height = `${domNodeDimensions.height}px`; - img.style.width = 'initial'; - } else { - img.style.width = `${domNodeDimensions.width}px`; - img.style.height = 'initial'; - } - } - }, -}); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js index 2caf41f0777e1..480d8ea364c42 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js @@ -10,10 +10,12 @@ import PropTypes from 'prop-types'; import { EuiSpacer, EuiFormRow, EuiButtonGroup } from '@elastic/eui'; import { get } from 'lodash'; import { AssetPicker } from '../../../../public/components/asset_picker'; -import { elasticOutline } from '../../../lib/elastic_outline'; -import { resolveFromArgs } from '../../../../common/lib/resolve_dataurl'; -import { isValidHttpUrl } from '../../../../common/lib/httpurl'; -import { encode } from '../../../../common/lib/dataurl'; +import { + encode, + elasticOutline, + isValidHttpUrl, + resolveFromArgs, +} from '../../../../../../../src/plugins/presentation_util/public'; import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component'; import { VALID_IMAGE_TYPES } from '../../../../common/lib/constants'; import { ArgumentStrings } from '../../../../i18n'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js index 37b22e376141f..f974667b7fad9 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js @@ -5,8 +5,10 @@ * 2.0. */ -import { elasticLogo } from '../../lib/elastic_logo'; -import { resolveFromArgs } from '../../../common/lib/resolve_dataurl'; +import { + elasticLogo, + resolveFromArgs, +} from '../../../../../../src/plugins/presentation_util/common/lib'; import { ViewStrings } from '../../../i18n'; const { Image: strings } = ViewStrings; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js index 30e0b9a640f92..f9bba68c56949 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js @@ -6,7 +6,6 @@ */ import { ViewStrings } from '../../../i18n'; - const { RevealImage: strings } = ViewStrings; export const revealImage = () => ({ diff --git a/x-pack/plugins/canvas/common/lib/index.ts b/x-pack/plugins/canvas/common/lib/index.ts index afce09c6d5ee9..a23b569640f5a 100644 --- a/x-pack/plugins/canvas/common/lib/index.ts +++ b/x-pack/plugins/canvas/common/lib/index.ts @@ -8,7 +8,6 @@ export * from './datatable'; export * from './autocomplete'; export * from './constants'; -export * from './dataurl'; export * from './errors'; export * from './expression_form_handlers'; export * from './fetch'; @@ -16,10 +15,6 @@ export * from './fonts'; export * from './get_field_type'; export * from './get_legend_config'; export * from './hex_to_rgb'; -export * from './httpurl'; -export * from './missing_asset'; export * from './palettes'; export * from './pivot_object_array'; -export * from './resolve_dataurl'; export * from './unquote_string'; -export * from './url'; diff --git a/x-pack/plugins/canvas/common/lib/missing_asset.ts b/x-pack/plugins/canvas/common/lib/missing_asset.ts deleted file mode 100644 index d47648b44059c..0000000000000 --- a/x-pack/plugins/canvas/common/lib/missing_asset.ts +++ /dev/null @@ -1,3 +0,0 @@ -/* eslint-disable */ -// CC0, source: https://pixabay.com/en/question-mark-confirmation-question-838656/ -export const missingImage = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJiIiB4PSItLjM2IiB5PSItLjM2IiB3aWR0aD0iMS43MiIgaGVpZ2h0PSIxLjcyIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNDY0Ii8+PC9maWx0ZXI+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMTU5LjM0IiB4Mj0iMTg0LjQ4IiB5MT0iNzI3LjM2IiB5Mj0iNzQ5Ljg5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEuNTMgLTU0OS42OCkgc2NhbGUoLjc3MDAyKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNlYmYwZWQiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmYWZhZmEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xNS40MzcgMi42OTVsMTQuNTA2IDI0LjQ3NkgxLjI4N2wxNC4xNS0yNC40NzZ6IiBmaWxsPSJ1cmwoI2EpIiBzdHJva2U9InJlZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjgzMTk3IDAgMCAuNTU0NjYgLTc4LjU4MyAtMzgzLjUxKSIgZD0iTTExMS4zMSA3MzEuMmMtMy4yODMtMy45MjUtMy41OTUtNi4xNDgtMi4wMjQtMTAuNDM4IDMuMzM2LTYuMTQ1IDQuNDk2LTguMDY4IDUuNDEtOS40MDUgMS45MDEgNS4xNjIgMi4xMjYgMTkuMTQtMy4zODYgMTkuODQzeiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIuODc2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbHRlcj0idXJsKCNiKSIvPjxnIGZpbGwtb3BhY2l0eT0iLjgyIj48cGF0aCBkPSJNMTUuMDQ2IDIwLjIyN2gtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY3IDAtLjg5Ni0uMTc1LTEuNTU3LS41MjYtMS45ODItLjM1LS40MjUtLjc2NS0uNjM3LTEuMjQ0LS42MzctLjM2NCAwLS42Ny4wOTgtLjkyLjI5My0uMTg5LjE0OS0uMjgzLjMwNC0uMjgzLjQ2NiAwIC4xMDcuMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDk0IDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNTEuNTQtMS4wMjkgMS4xNC0yLjAzMyAxLjgtLjY3NC40NDUtMS4xMi44NDMtMS4zMzUgMS4xOTQtLjIxLjM0My0uMzM3Ljg3My0uMzg0IDEuNTg3bS0uMTEyIDEuNDc3Yy40NTIgMCAuODM2LjE1OCAxLjE1My40NzUuMzE3LjMxNy40NzYuNzAxLjQ3NiAxLjE1MyAwIC40NTItLjE1OS44NC0uNDc2IDEuMTYzYTEuNTcgMS41NyAwIDAgMS0xLjE1My40NzUgMS41NyAxLjU3IDAgMCAxLTEuMTUzLS40NzUgMS42MDQgMS42MDQgMCAwIDEtLjQ3NS0xLjE2M2MwLS40NTIuMTU5LS44MzYuNDc1LTEuMTUzYTEuNTcgMS41NyAwIDAgMSAxLjE1My0uNDc1IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9Ii40ODYiLz48cGF0aCBkPSJNMTUuMzI3IDIwLjUwOGgtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY2IDAtLjg5Ny0uMTc1LTEuNTU4LS41MjYtMS45ODMtLjM1LS40MjQtLjc2NS0uNjM3LTEuMjQzLS42MzctLjM2NSAwLS42NzEuMDk4LS45Mi4yOTMtLjE5LjE0OS0uMjg0LjMwNC0uMjg0LjQ2NiAwIC4xMDguMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDkzIDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNS41NC0xLjAyOCAxLjE0LTIuMDMzIDEuOC0uNjc0LjQ0NS0uODUzLjg0My0xLjA2OCAxLjE5NC0uMjEuMzQzLS4zMzcuODczLS4zODUgMS41ODdtLS4zNzggMS40NzdjLjQ1MiAwIC44MzYuMTU4IDEuMTUzLjQ3NS4zMTcuMzE3LjQ3Ni43MDEuNDc2IDEuMTUzIDAgLjQ1Mi0uMTU5Ljg0LS40NzYgMS4xNjNhMS41NyAxLjU3IDAgMCAxLTEuMTUzLjQ3NiAxLjU3IDEuNTcgMCAwIDEtMS4xNTMtLjQ3NiAxLjYwNCAxLjYwNCAwIDAgMS0uNDc1LTEuMTYzYzAtLjQ1Mi4xNTktLjgzNi40NzUtMS4xNTNhMS41NyAxLjU3IDAgMCAxIDEuMTUzLS40NzUiIGZpbGwtb3BhY2l0eT0iLjgyIi8+PC9nPjwvc3ZnPg=='; diff --git a/x-pack/plugins/canvas/i18n/functions/function_errors.ts b/x-pack/plugins/canvas/i18n/functions/function_errors.ts index 4a85018c1b4ac..a01cb09a38347 100644 --- a/x-pack/plugins/canvas/i18n/functions/function_errors.ts +++ b/x-pack/plugins/canvas/i18n/functions/function_errors.ts @@ -19,7 +19,6 @@ import { errors as joinRows } from './dict/join_rows'; import { errors as ply } from './dict/ply'; import { errors as pointseries } from './dict/pointseries'; import { errors as progress } from './dict/progress'; -import { errors as revealImage } from './dict/reveal_image'; import { errors as timefilter } from './dict/timefilter'; import { errors as to } from './dict/to'; @@ -38,7 +37,6 @@ export const getFunctionErrors = () => ({ ply, pointseries, progress, - revealImage, timefilter, to, }); diff --git a/x-pack/plugins/canvas/i18n/functions/function_help.ts b/x-pack/plugins/canvas/i18n/functions/function_help.ts index 512ebc4ff8c93..b72d410ddd63f 100644 --- a/x-pack/plugins/canvas/i18n/functions/function_help.ts +++ b/x-pack/plugins/canvas/i18n/functions/function_help.ts @@ -57,7 +57,6 @@ import { help as progress } from './dict/progress'; import { help as render } from './dict/render'; import { help as repeatImage } from './dict/repeat_image'; import { help as replace } from './dict/replace'; -import { help as revealImage } from './dict/reveal_image'; import { help as rounddate } from './dict/rounddate'; import { help as rowCount } from './dict/row_count'; import { help as savedLens } from './dict/saved_lens'; @@ -218,7 +217,6 @@ export const getFunctionHelp = (): FunctionHelpDict => ({ render, repeatImage, replace, - revealImage, rounddate, rowCount, savedLens, diff --git a/x-pack/plugins/canvas/i18n/renderers.ts b/x-pack/plugins/canvas/i18n/renderers.ts index f74516433f924..29687155818e7 100644 --- a/x-pack/plugins/canvas/i18n/renderers.ts +++ b/x-pack/plugins/canvas/i18n/renderers.ts @@ -139,16 +139,6 @@ export const RendererStrings = { defaultMessage: 'Repeat an image a given number of times', }), }, - revealImage: { - getDisplayName: () => - i18n.translate('xpack.canvas.renderer.revealImage.displayName', { - defaultMessage: 'Image reveal', - }), - getHelpDescription: () => - i18n.translate('xpack.canvas.renderer.revealImage.helpDescription', { - defaultMessage: 'Reveal a percentage of an image to make a custom gauge-style chart', - }), - }, shape: { getDisplayName: () => i18n.translate('xpack.canvas.renderer.shape.displayName', { diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json index 5faeaefc9e392..85d2e0709cb3e 100644 --- a/x-pack/plugins/canvas/kibana.json +++ b/x-pack/plugins/canvas/kibana.json @@ -10,6 +10,7 @@ "charts", "data", "embeddable", + "expressionRevealImage", "expressions", "features", "inspector", diff --git a/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts b/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts index f8c6354d3935f..e3824798d1df1 100644 --- a/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts +++ b/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts @@ -13,7 +13,7 @@ import { getId } from '../../lib/get_id'; // @ts-expect-error untyped local import { findExistingAsset } from '../../lib/find_existing_asset'; import { VALID_IMAGE_TYPES } from '../../../common/lib/constants'; -import { encode } from '../../../common/lib/dataurl'; +import { encode } from '../../../../../../src/plugins/presentation_util/public'; // @ts-expect-error untyped local import { elementsRegistry } from '../../lib/elements_registry'; // @ts-expect-error untyped local diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx index 2e6d83cb1c8ac..93574270757f6 100644 --- a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx +++ b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { CustomElementModal } from '../custom_element_modal'; -import { elasticLogo } from '../../../lib/elastic_logo'; +import { elasticLogo } from '../../../../../../../src/plugins/presentation_util/public'; storiesOf('components/Elements/CustomElementModal', module) .add('with title', () => ( diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx b/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx index 86d9cab4eeea1..51ffe57fe5e76 100644 --- a/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx +++ b/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx @@ -29,7 +29,7 @@ import { import { i18n } from '@kbn/i18n'; import { VALID_IMAGE_TYPES } from '../../../common/lib/constants'; -import { encode } from '../../../common/lib/dataurl'; +import { encode } from '../../../../../../src/plugins/presentation_util/public'; import { ElementCard } from '../element_card'; const MAX_NAME_LENGTH = 40; diff --git a/x-pack/plugins/canvas/public/components/download/download.tsx b/x-pack/plugins/canvas/public/components/download/download.tsx index 856d6cb7e080e..89cd999481007 100644 --- a/x-pack/plugins/canvas/public/components/download/download.tsx +++ b/x-pack/plugins/canvas/public/components/download/download.tsx @@ -9,7 +9,7 @@ import { toByteArray } from 'base64-js'; import fileSaver from 'file-saver'; import PropTypes from 'prop-types'; import React, { ReactElement } from 'react'; -import { parseDataUrl } from '../../../common/lib/dataurl'; +import { parseDataUrl } from '../../../../../../src/plugins/presentation_util/public'; interface Props { children: ReactElement; diff --git a/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx b/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx index ae0d4328aa98d..4c68f185b196f 100644 --- a/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx +++ b/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { ElementCard } from '../element_card'; -import { elasticLogo } from '../../../lib/elastic_logo'; +import { elasticLogo } from '../../../../../../../src/plugins/presentation_util/public'; storiesOf('components/Elements/ElementCard', module) .addDecorator((story) => ( diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx index 716f757b7c25e..dd7df7059a7a4 100644 --- a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx +++ b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx @@ -13,7 +13,7 @@ import { SavedObjectFinderUi, SavedObjectMetaData, } from '../../../../../../src/plugins/saved_objects/public/'; -import { useServices } from '../../services'; +import { usePlatformService, useServices } from '../../services'; const strings = { getNoItemsText: () => @@ -33,9 +33,10 @@ export interface Props { export const AddEmbeddableFlyout: FC = ({ onSelect, availableEmbeddables, onClose }) => { const services = useServices(); - const { embeddables, platform } = services; + const platformService = usePlatformService(); + const { embeddables } = services; const { getEmbeddableFactories } = embeddables; - const { getSavedObjects, getUISettings } = platform; + const { getSavedObjects, getUISettings } = platformService; const onAddPanel = (id: string, savedObjectType: string, name: string) => { const embeddableFactories = getEmbeddableFactories(); diff --git a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx index 6f98baf944bac..81532816d9c83 100644 --- a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx +++ b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx @@ -9,7 +9,7 @@ import React, { FC } from 'react'; import { ExpressionFunction } from 'src/plugins/expressions'; import { EuiButtonEmpty } from '@elastic/eui'; import copy from 'copy-to-clipboard'; -import { notifyService } from '../../services'; +import { useNotifyService } from '../../services'; import { generateFunctionReference } from './generate_function_reference'; interface Props { @@ -17,16 +17,15 @@ interface Props { } export const FunctionReferenceGenerator: FC = ({ functionRegistry }) => { + const notifyService = useNotifyService(); const functionDefinitions = Object.values(functionRegistry); const copyDocs = () => { copy(generateFunctionReference(functionDefinitions)); - notifyService - .getService() - .success( - `Please paste updated docs into '/kibana/docs/canvas/canvas-function-reference.asciidoc' and commit your changes.`, - { title: 'Copied function docs to clipboard' } - ); + notifyService.success( + `Please paste updated docs into '/kibana/docs/canvas/canvas-function-reference.asciidoc' and commit your changes.`, + { title: 'Copied function docs to clipboard' } + ); }; return ( diff --git a/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts b/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts index 8f9b3923ff120..075e65bc24dab 100644 --- a/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts +++ b/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts @@ -10,7 +10,8 @@ import pluralize from 'pluralize'; import { ExpressionFunction, ExpressionFunctionParameter } from 'src/plugins/expressions'; import { functions as browserFunctions } from '../../../canvas_plugin_src/functions/browser'; import { functions as serverFunctions } from '../../../canvas_plugin_src/functions/server'; -import { isValidDataUrl, DATATABLE_COLUMN_TYPES } from '../../../common/lib'; +import { DATATABLE_COLUMN_TYPES } from '../../../common/lib'; +import { isValidDataUrl } from '../../../../../../src/plugins/presentation_util/public'; import { getFunctionExamples, FunctionExample } from './function_examples'; const ALPHABET = 'abcdefghijklmnopqrstuvwxyz'.split(''); diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx index 17d6a3d11b60f..ef48b9815062c 100644 --- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx +++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { elasticLogo } from '../../../../lib/elastic_logo'; +import { elasticLogo } from '../../../../../../../../src/plugins/presentation_util/public'; export const testCustomElements = [ { diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts index 9b592d402f84c..524c1a48b6cee 100644 --- a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts +++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts @@ -11,7 +11,7 @@ import { compose, withState } from 'recompose'; import { camelCase } from 'lodash'; import { cloneSubgraphs } from '../../lib/clone_subgraphs'; import * as customElementService from '../../lib/custom_element_service'; -import { withServices, WithServicesProps } from '../../services'; +import { withServices, WithServicesProps, pluginServices } from '../../services'; // @ts-expect-error untyped local import { selectToplevelNodes } from '../../state/actions/transient'; // @ts-expect-error untyped local @@ -68,6 +68,7 @@ const mergeProps = ( dispatchProps: DispatchProps, ownProps: OwnPropsWithState & WithServicesProps ): ComponentProps => { + const notifyService = pluginServices.getServices().notify; const { pageId } = stateProps; const { onClose, search, setCustomElements } = ownProps; @@ -94,7 +95,7 @@ const mergeProps = ( try { await findCustomElements(); } catch (err) { - ownProps.services.notify.error(err, { + notifyService.error(err, { title: `Couldn't find custom elements`, }); } @@ -105,7 +106,7 @@ const mergeProps = ( await customElementService.remove(id); await findCustomElements(); } catch (err) { - ownProps.services.notify.error(err, { + notifyService.error(err, { title: `Couldn't delete custom elements`, }); } @@ -121,7 +122,7 @@ const mergeProps = ( }); await findCustomElements(); } catch (err) { - ownProps.services.notify.error(err, { + notifyService.error(err, { title: `Couldn't update custom elements`, }); } diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx b/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx index dca549b6b38ed..1c95e844997a0 100644 --- a/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx +++ b/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx @@ -97,7 +97,7 @@ export const Toolbar: FC = ({ {workpadName} - + ( workpad: { id: 'coolworkpad', name: 'Workpad of Cool', height: 10, width: 7 }, pageCount: 11, }} - sharingServices={{ basePath: platformService.getBasePathInterface() }} + sharingServices={{}} onExport={action('onExport')} /> )); @@ -30,7 +29,6 @@ storiesOf('components/WorkpadHeader/ShareMenu', module).add('with Reporting', () pageCount: 11, }} sharingServices={{ - basePath: platformService.getBasePathInterface(), reporting: reportingService.start, }} onExport={action('onExport')} diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx index 4d38cc9fb88b4..d0c1eb550ea60 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx @@ -26,17 +26,12 @@ storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module) }, }) .add('default', () => ( - + )) .add('unsupported renderers', () => ( )); diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx index 5da009e050a27..be337a6dcf00c 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx @@ -24,13 +24,42 @@ import { import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import { arrayBufferFetch } from '../../../../../common/lib/fetch'; +import { API_ROUTE_SHAREABLE_ZIP } from '../../../../../common/lib/constants'; +import { CanvasRenderedWorkpad } from '../../../../../shareable_runtime/types'; +import { + downloadRenderedWorkpad, + downloadRuntime, + downloadZippedRuntime, +} from '../../../../lib/download_workpad'; import { ZIP, CANVAS, HTML } from '../../../../../i18n/constants'; import { OnCloseFn } from '../share_menu.component'; import { WorkpadStep } from './workpad_step'; import { RuntimeStep } from './runtime_step'; import { SnippetsStep } from './snippets_step'; +import { useNotifyService, usePlatformService } from '../../../../services'; const strings = { + getCopyShareConfigMessage: () => + i18n.translate('xpack.canvas.workpadHeaderShareMenu.copyShareConfigMessage', { + defaultMessage: 'Copied share markup to clipboard', + }), + getShareableZipErrorTitle: (workpadName: string) => + i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareWebsiteErrorTitle', { + defaultMessage: + "Failed to create {ZIP} file for '{workpadName}'. The workpad may be too large. You'll need to download the files separately.", + values: { + ZIP, + workpadName, + }, + }), + getUnknownExportErrorMessage: (type: string) => + i18n.translate('xpack.canvas.workpadHeaderShareMenu.unknownExportErrorMessage', { + defaultMessage: 'Unknown export type: {type}', + values: { + type, + }, + }), getRuntimeStepTitle: () => i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.downloadRuntimeTitle', { defaultMessage: 'Download runtime', @@ -66,10 +95,9 @@ export type OnDownloadFn = (type: 'share' | 'shareRuntime' | 'shareZip') => void export type OnCopyFn = () => void; export interface Props { - onCopy: OnCopyFn; - onDownload: OnDownloadFn; onClose: OnCloseFn; unsupportedRenderers?: string[]; + renderedWorkpad: CanvasRenderedWorkpad; } const steps = (onDownload: OnDownloadFn, onCopy: OnCopyFn) => [ @@ -88,11 +116,39 @@ const steps = (onDownload: OnDownloadFn, onCopy: OnCopyFn) => [ ]; export const ShareWebsiteFlyout: FC = ({ - onCopy, - onDownload, onClose, unsupportedRenderers, + renderedWorkpad, }) => { + const notifyService = useNotifyService(); + const platformService = usePlatformService(); + const onCopy = () => { + notifyService.info(strings.getCopyShareConfigMessage()); + }; + + const onDownload = (type: 'share' | 'shareRuntime' | 'shareZip') => { + switch (type) { + case 'share': + downloadRenderedWorkpad(renderedWorkpad); + return; + case 'shareRuntime': + downloadRuntime(platformService.getBasePath()); + case 'shareZip': + const basePath = platformService.getBasePath(); + arrayBufferFetch + .post(`${basePath}${API_ROUTE_SHAREABLE_ZIP}`, JSON.stringify(renderedWorkpad)) + .then((blob) => downloadZippedRuntime(blob.data)) + .catch((err: Error) => { + notifyService.error(err, { + title: strings.getShareableZipErrorTitle(renderedWorkpad.name), + }); + }); + return; + default: + throw new Error(strings.getUnknownExportErrorMessage(type)); + } + }; + const link = ( - i18n.translate('xpack.canvas.workpadHeaderShareMenu.copyShareConfigMessage', { - defaultMessage: 'Copied share markup to clipboard', - }), - getShareableZipErrorTitle: (workpadName: string) => - i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareWebsiteErrorTitle', { - defaultMessage: - "Failed to create {ZIP} file for '{workpadName}'. The workpad may be too large. You'll need to download the files separately.", - values: { - ZIP, - workpadName, - }, - }), - getUnknownExportErrorMessage: (type: string) => - i18n.translate('xpack.canvas.workpadHeaderShareMenu.unknownExportErrorMessage', { - defaultMessage: 'Unknown export type: {type}', - values: { - type, - }, - }), -}; - const getUnsupportedRenderers = (state: State) => { const renderers: string[] = []; const expressions = getRenderedWorkpadExpressions(state); @@ -85,41 +52,10 @@ export const ShareWebsiteFlyout = compose connect(mapStateToProps), withKibana, withProps( - ({ - unsupportedRenderers, + ({ unsupportedRenderers, renderedWorkpad, onClose, workpad }: Props): ComponentProps => ({ renderedWorkpad, - onClose, - workpad, - kibana, - }: Props & WithKibanaProps): ComponentProps => ({ unsupportedRenderers, onClose, - onCopy: () => { - kibana.services.canvas.notify.info(strings.getCopyShareConfigMessage()); - }, - onDownload: (type) => { - switch (type) { - case 'share': - downloadRenderedWorkpad(renderedWorkpad); - return; - case 'shareRuntime': - downloadRuntime(kibana.services.http.basePath.get()); - return; - case 'shareZip': - const basePath = kibana.services.http.basePath.get(); - arrayBufferFetch - .post(`${basePath}${API_ROUTE_SHAREABLE_ZIP}`, JSON.stringify(renderedWorkpad)) - .then((blob) => downloadZippedRuntime(blob.data)) - .catch((err: Error) => { - kibana.services.canvas.notify.error(err, { - title: strings.getShareableZipErrorTitle(workpad.name), - }); - }); - return; - default: - throw new Error(strings.getUnknownExportErrorMessage(type)); - } - }, }) ) )(Component); diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx index 5ccc09bf3586b..8d150d3d36972 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx @@ -9,11 +9,11 @@ import React, { FunctionComponent, useState } from 'react'; import PropTypes from 'prop-types'; import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { IBasePath } from 'kibana/public'; import { ReportingStart } from '../../../../../reporting/public'; import { PDF, JSON } from '../../../../i18n/constants'; import { flattenPanelTree } from '../../../lib/flatten_panel_tree'; +import { usePlatformService } from '../../../services'; import { ClosePopoverFn, Popover } from '../../popover'; import { ShareWebsiteFlyout } from './flyout'; import { CanvasWorkpadSharingData, getPdfJobParams } from './utils'; @@ -59,8 +59,6 @@ export interface Props { /** Canvas workpad to export as PDF **/ sharingData: CanvasWorkpadSharingData; sharingServices: { - /** BasePath dependency **/ - basePath: IBasePath; /** Reporting dependency **/ reporting?: ReportingStart; }; @@ -76,6 +74,7 @@ export const ShareMenu: FunctionComponent = ({ sharingServices: services, onExport, }) => { + const platformService = usePlatformService(); const [showFlyout, setShowFlyout] = useState(false); const onClose = () => { @@ -102,7 +101,9 @@ export const ShareMenu: FunctionComponent = ({ title: strings.getShareDownloadPDFTitle(), content: ( getPdfJobParams(sharingData, services.basePath)} + getJobParams={() => + getPdfJobParams(sharingData, platformService.getBasePathInterface()) + } layoutOption="canvas" onClose={closePopover} /> diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts index ef13655b66aca..f514f813599b6 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts +++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts @@ -41,12 +41,11 @@ export const ShareMenu = compose( withProps( ({ workpad, pageCount, services }: Props & WithServicesProps): ComponentProps => { const { - platform, reporting: { start: reporting }, } = services; return { - sharingServices: { basePath: platform.getBasePathInterface(), reporting }, + sharingServices: { reporting }, sharingData: { workpad, pageCount }, onExport: (type) => { switch (type) { diff --git a/x-pack/plugins/canvas/public/functions/pie.test.js b/x-pack/plugins/canvas/public/functions/pie.test.js index b1c1746340892..5e35cc3bf523c 100644 --- a/x-pack/plugins/canvas/public/functions/pie.test.js +++ b/x-pack/plugins/canvas/public/functions/pie.test.js @@ -5,8 +5,8 @@ * 2.0. */ -import { functionWrapper } from '../../test_helpers/function_wrapper'; import { testPie } from '../../canvas_plugin_src/functions/common/__fixtures__/test_pointseries'; +import { functionWrapper } from '../../../../../src/plugins/presentation_util/public'; import { fontStyle, grayscalePalette, diff --git a/x-pack/plugins/canvas/public/functions/plot.test.js b/x-pack/plugins/canvas/public/functions/plot.test.js index 5ed858961d798..8dd2470ea17dc 100644 --- a/x-pack/plugins/canvas/public/functions/plot.test.js +++ b/x-pack/plugins/canvas/public/functions/plot.test.js @@ -5,7 +5,7 @@ * 2.0. */ -import { functionWrapper } from '../../test_helpers/function_wrapper'; +import { functionWrapper } from '../../../../../src/plugins/presentation_util/public'; import { testPlot } from '../../canvas_plugin_src/functions/common/__fixtures__/test_pointseries'; import { fontStyle, diff --git a/x-pack/plugins/canvas/public/lib/custom_element_service.ts b/x-pack/plugins/canvas/public/lib/custom_element_service.ts index aa3229456ebf6..6da624bb5d3ae 100644 --- a/x-pack/plugins/canvas/public/lib/custom_element_service.ts +++ b/x-pack/plugins/canvas/public/lib/custom_element_service.ts @@ -9,10 +9,10 @@ import { AxiosPromise } from 'axios'; import { API_ROUTE_CUSTOM_ELEMENT } from '../../common/lib/constants'; import { fetch } from '../../common/lib/fetch'; import { CustomElement } from '../../types'; -import { platformService } from '../services'; +import { pluginServices } from '../services'; const getApiPath = function () { - const basePath = platformService.getService().getBasePath(); + const basePath = pluginServices.getServices().platform.getBasePath(); return `${basePath}${API_ROUTE_CUSTOM_ELEMENT}`; }; diff --git a/x-pack/plugins/canvas/public/lib/download_workpad.ts b/x-pack/plugins/canvas/public/lib/download_workpad.ts index 8deda818a43d3..a346de3322d09 100644 --- a/x-pack/plugins/canvas/public/lib/download_workpad.ts +++ b/x-pack/plugins/canvas/public/lib/download_workpad.ts @@ -8,7 +8,10 @@ import fileSaver from 'file-saver'; import { API_ROUTE_SHAREABLE_RUNTIME_DOWNLOAD } from '../../common/lib/constants'; import { ErrorStrings } from '../../i18n'; -import { notifyService } from '../services'; + +// TODO: clint - convert this whole file to hooks +import { pluginServices } from '../services'; + // @ts-expect-error untyped local import * as workpadService from './workpad_service'; import { CanvasRenderedWorkpad } from '../../shareable_runtime/types'; @@ -21,7 +24,8 @@ export const downloadWorkpad = async (workpadId: string) => { const jsonBlob = new Blob([JSON.stringify(workpad)], { type: 'application/json' }); fileSaver.saveAs(jsonBlob, `canvas-workpad-${workpad.name}-${workpad.id}.json`); } catch (err) { - notifyService.getService().error(err, { title: strings.getDownloadFailureErrorMessage() }); + const notifyService = pluginServices.getServices().notify; + notifyService.error(err, { title: strings.getDownloadFailureErrorMessage() }); } }; @@ -33,9 +37,8 @@ export const downloadRenderedWorkpad = async (renderedWorkpad: CanvasRenderedWor `canvas-embed-workpad-${renderedWorkpad.name}-${renderedWorkpad.id}.json` ); } catch (err) { - notifyService - .getService() - .error(err, { title: strings.getDownloadRenderedWorkpadFailureErrorMessage() }); + const notifyService = pluginServices.getServices().notify; + notifyService.error(err, { title: strings.getDownloadRenderedWorkpadFailureErrorMessage() }); } }; @@ -45,9 +48,8 @@ export const downloadRuntime = async (basePath: string) => { window.open(path); return; } catch (err) { - notifyService - .getService() - .error(err, { title: strings.getDownloadRuntimeFailureErrorMessage() }); + const notifyService = pluginServices.getServices().notify; + notifyService.error(err, { title: strings.getDownloadRuntimeFailureErrorMessage() }); } }; @@ -56,8 +58,7 @@ export const downloadZippedRuntime = async (data: any) => { const zip = new Blob([data], { type: 'octet/stream' }); fileSaver.saveAs(zip, 'canvas-workpad-embed.zip'); } catch (err) { - notifyService - .getService() - .error(err, { title: strings.getDownloadZippedRuntimeFailureErrorMessage() }); + const notifyService = pluginServices.getServices().notify; + notifyService.error(err, { title: strings.getDownloadZippedRuntimeFailureErrorMessage() }); } }; diff --git a/x-pack/plugins/canvas/public/lib/elastic_outline.js b/x-pack/plugins/canvas/public/lib/elastic_outline.js deleted file mode 100644 index 7271f5b32d547..0000000000000 --- a/x-pack/plugins/canvas/public/lib/elastic_outline.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable */ -export const elasticOutline = 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%22-3.948730230331421%20-1.7549896240234375%20245.25946044921875%20241.40370178222656%22%20width%3D%22245.25946044921875%22%20height%3D%22241.40370178222656%22%20style%3D%22enable-background%3Anew%200%200%20686.2%20235.7%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%232D2D2D%3B%7D%0A%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%200%2C%200%29%22%3E%0A%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M329.4%2C160.3l4.7-0.5l0.3%2C9.6c-12.4%2C1.7-23%2C2.6-31.8%2C2.6c-11.7%2C0-20-3.4-24.9-10.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-4.9-6.8-7.3-17.4-7.3-31.7c0-28.6%2C11.4-42.9%2C34.1-42.9c11%2C0%2C19.2%2C3.1%2C24.6%2C9.2c5.4%2C6.1%2C8.1%2C15.8%2C8.1%2C28.9l-0.7%2C9.3h-53.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0%2C9%2C1.6%2C15.7%2C4.9%2C20c3.3%2C4.3%2C8.9%2C6.5%2C17%2C6.5C312.8%2C161.2%2C321.1%2C160.9%2C329.4%2C160.3z%20M325%2C124.9c0-10-1.6-17.1-4.8-21.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.2-4.1-8.4-6.2-15.6-6.2c-7.2%2C0-12.7%2C2.2-16.3%2C6.5c-3.6%2C4.3-5.5%2C11.3-5.6%2C20.9H325z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M354.3%2C171.4V64h12.2v107.4H354.3z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.5%2C113.5v41.1c0%2C4.1%2C10.1%2C3.9%2C10.1%2C3.9l-0.6%2C10.8c-8.6%2C0-15.7%2C0.7-20-3.4c-9.8%2C4.3-19.5%2C6.1-29.3%2C6.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.5%2C0-13.2-2.1-17.1-6.4c-3.9-4.2-5.9-10.3-5.9-18.3c0-7.9%2C2-13.8%2C6-17.5c4-3.7%2C10.3-6.1%2C18.9-6.9l25.6-2.4v-7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0-5.5-1.2-9.5-3.6-11.9c-2.4-2.4-5.7-3.6-9.8-3.6l-32.1%2C0V87.2h31.3c9.2%2C0%2C15.9%2C2.1%2C20.1%2C6.4C441.4%2C97.8%2C443.5%2C104.5%2C443.5%2C113.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bz%20M393.3%2C146.7c0%2C10%2C4.1%2C15%2C12.4%2C15c7.4%2C0%2C14.7-1.2%2C21.8-3.7l3.7-1.3v-26.9l-24.1%2C2.3c-4.9%2C0.4-8.4%2C1.8-10.6%2C4.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3BC394.4%2C138.7%2C393.3%2C142.2%2C393.3%2C146.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M491.2%2C98.2c-11.8%2C0-17.8%2C4.1-17.8%2C12.4c0%2C3.8%2C1.4%2C6.5%2C4.1%2C8.1c2.7%2C1.6%2C8.9%2C3.2%2C18.6%2C4.9%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc9.7%2C1.7%2C16.5%2C4%2C20.5%2C7.1c4%2C3%2C6%2C8.7%2C6%2C17.1c0%2C8.4-2.7%2C14.5-8.1%2C18.4c-5.4%2C3.9-13.2%2C5.9-23.6%2C5.9c-6.7%2C0-29.2-2.5-29.2-2.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bl0.7-10.6c12.9%2C1.2%2C22.3%2C2.2%2C28.6%2C2.2c6.3%2C0%2C11.1-1%2C14.4-3c3.3-2%2C5-5.4%2C5-10.1c0-4.7-1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-9.6-1.5-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3c0-7.9%2C2.8-13.8%2C8.4-17.6c5.6-3.8%2C12.6-5.7%2C20.9-5.7c6.6%2C0%2C29.6%2C1.7%2C29.6%2C1.7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bv10.7C508.1%2C99%2C498.2%2C98.2%2C491.2%2C98.2z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M581.7%2C99.5h-25.9v39c0%2C9.3%2C0.7%2C15.5%2C2%2C18.4c1.4%2C2.9%2C4.6%2C4.4%2C9.7%2C4.4l14.5-1l0.8%2C10.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.3%2C1.2-12.8%2C1.8-16.6%2C1.8c-8.5%2C0-14.3-2.1-17.6-6.2c-3.3-4.1-4.9-12-4.9-23.6V99.5h-11.6V88.9h11.6V63.9h12.1v24.9h25.9V99.5z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M598.7%2C78.4V64.3h12.2v14.2H598.7z%20M598.7%2C171.4V88.9h12.2v82.5H598.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M663.8%2C87.2c3.6%2C0%2C9.7%2C0.7%2C18.3%2C2l3.9%2C0.5l-0.5%2C9.9c-8.7-1-15.1-1.5-19.2-1.5c-9.2%2C0-15.5%2C2.2-18.8%2C6.6%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.3%2C4.4-5%2C12.6-5%2C24.5c0%2C11.9%2C1.5%2C20.2%2C4.6%2C24.9c3.1%2C4.7%2C9.5%2C7%2C19.3%2C7l19.2-1.5l0.5%2C10.1c-10.1%2C1.5-17.7%2C2.3-22.7%2C2.3%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-12.7%2C0-21.5-3.3-26.3-9.8c-4.8-6.5-7.3-17.5-7.3-33c0-15.5%2C2.6-26.4%2C7.8-32.6C643%2C90.4%2C651.7%2C87.2%2C663.8%2C87.2z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M236.6%2C123.5c0-19.8-12.3-37.2-30.8-43.9c0.8-4.2%2C1.2-8.4%2C1.2-12.7C207%2C30%2C177%2C0%2C140.2%2C0%26%2310%3B%26%239%3B%26%239%3BC118.6%2C0%2C98.6%2C10.3%2C86%2C27.7c-6.2-4.8-13.8-7.4-21.7-7.4c-19.6%2C0-35.5%2C15.9-35.5%2C35.5c0%2C4.3%2C0.8%2C8.5%2C2.2%2C12.4%26%2310%3B%26%239%3B%26%239%3BC12.6%2C74.8%2C0%2C92.5%2C0%2C112.2c0%2C19.9%2C12.4%2C37.3%2C30.9%2C44c-0.8%2C4.1-1.2%2C8.4-1.2%2C12.7c0%2C36.8%2C29.9%2C66.7%2C66.7%2C66.7%26%2310%3B%26%239%3B%26%239%3Bc21.6%2C0%2C41.6-10.4%2C54.1-27.8c6.2%2C4.9%2C13.8%2C7.6%2C21.7%2C7.6c19.6%2C0%2C35.5-15.9%2C35.5-35.5c0-4.3-0.8-8.5-2.2-12.4%26%2310%3B%26%239%3B%26%239%3BC223.9%2C160.9%2C236.6%2C143.2%2C236.6%2C123.5z%20M91.6%2C34.8c10.9-15.9%2C28.9-25.4%2C48.1-25.4c32.2%2C0%2C58.4%2C26.2%2C58.4%2C58.4%26%2310%3B%26%239%3B%26%239%3Bc0%2C3.9-0.4%2C7.7-1.1%2C11.5l-52.2%2C45.8L93%2C101.5L82.9%2C79.9L91.6%2C34.8z%20M65.4%2C29c6.2%2C0%2C12.1%2C2%2C17%2C5.7l-7.8%2C40.3l-35.5-8.4%26%2310%3B%26%239%3B%26%239%3Bc-1.1-3.1-1.7-6.3-1.7-9.7C37.4%2C41.6%2C49.9%2C29%2C65.4%2C29z%20M9.1%2C112.3c0-16.7%2C11-31.9%2C26.9-37.2L75%2C84.4l9.1%2C19.5l-49.8%2C45%26%2310%3B%26%239%3B%26%239%3BC19.2%2C143.1%2C9.1%2C128.6%2C9.1%2C112.3z%20M145.2%2C200.9c-10.9%2C16.1-29%2C25.6-48.4%2C25.6c-32.3%2C0-58.6-26.3-58.6-58.5c0-4%2C0.4-7.9%2C1.1-11.7%26%2310%3B%26%239%3B%26%239%3Bl50.9-46l52%2C23.7l11.5%2C22L145.2%2C200.9z%20M171.2%2C206.6c-6.1%2C0-12-2-16.9-5.8l7.7-40.2l35.4%2C8.3c1.1%2C3.1%2C1.7%2C6.3%2C1.7%2C9.7%26%2310%3B%26%239%3B%26%239%3BC199.2%2C194.1%2C186.6%2C206.6%2C171.2%2C206.6z%20M200.5%2C160.5l-39-9.1l-10.4-19.8l51-44.7c15.1%2C5.7%2C25.2%2C20.2%2C25.2%2C36.5%26%2310%3B%26%239%3B%26%239%3BC227.4%2C140.1%2C216.4%2C155.3%2C200.5%2C160.5z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E'; diff --git a/x-pack/plugins/canvas/public/lib/element_handler_creators.ts b/x-pack/plugins/canvas/public/lib/element_handler_creators.ts index cdf9324e947da..a46252081e672 100644 --- a/x-pack/plugins/canvas/public/lib/element_handler_creators.ts +++ b/x-pack/plugins/canvas/public/lib/element_handler_creators.ts @@ -8,7 +8,7 @@ import { camelCase } from 'lodash'; import { getClipboardData, setClipboardData } from './clipboard'; import { cloneSubgraphs } from './clone_subgraphs'; -import { notifyService } from '../services'; +import { pluginServices } from '../services'; import * as customElementService from './custom_element_service'; import { getId } from './get_id'; import { PositionedElement } from '../../types'; @@ -70,6 +70,8 @@ export const basicHandlerCreators = { description = '', image = '' ): void => { + const notifyService = pluginServices.getServices().notify; + if (selectedNodes.length) { const content = JSON.stringify({ selectedNodes }); const customElement = { @@ -83,17 +85,15 @@ export const basicHandlerCreators = { customElementService .create(customElement) .then(() => - notifyService - .getService() - .success( - `Custom element '${customElement.displayName || customElement.id}' was saved`, - { - 'data-test-subj': 'canvasCustomElementCreate-success', - } - ) + notifyService.success( + `Custom element '${customElement.displayName || customElement.id}' was saved`, + { + 'data-test-subj': 'canvasCustomElementCreate-success', + } + ) ) .catch((error: Error) => - notifyService.getService().warning(error, { + notifyService.warning(error, { title: `Custom element '${ customElement.displayName || customElement.id }' was not saved`, @@ -135,16 +135,20 @@ export const groupHandlerCreators = { // handlers for cut/copy/paste export const clipboardHandlerCreators = { cutNodes: ({ pageId, removeNodes, selectedNodes }: Props) => (): void => { + const notifyService = pluginServices.getServices().notify; + if (selectedNodes.length) { setClipboardData({ selectedNodes }); removeNodes(selectedNodes.map(extractId), pageId); - notifyService.getService().success('Cut element to clipboard'); + notifyService.success('Cut element to clipboard'); } }, copyNodes: ({ selectedNodes }: Props) => (): void => { + const notifyService = pluginServices.getServices().notify; + if (selectedNodes.length) { setClipboardData({ selectedNodes }); - notifyService.getService().success('Copied element to clipboard'); + notifyService.success('Copied element to clipboard'); } }, pasteNodes: ({ insertNodes, pageId, selectToplevelNodes }: Props) => (): void => { diff --git a/x-pack/plugins/canvas/public/lib/es_service.ts b/x-pack/plugins/canvas/public/lib/es_service.ts index 25b63bf26c5bb..0ff6c9e5d110f 100644 --- a/x-pack/plugins/canvas/public/lib/es_service.ts +++ b/x-pack/plugins/canvas/public/lib/es_service.ts @@ -5,27 +5,30 @@ * 2.0. */ +// TODO - clint: convert to service abstraction import { IndexPatternAttributes } from 'src/plugins/data/public'; import { API_ROUTE } from '../../common/lib/constants'; import { fetch } from '../../common/lib/fetch'; import { ErrorStrings } from '../../i18n'; -import { notifyService } from '../services'; -import { platformService } from '../services'; +import { pluginServices } from '../services'; const { esService: strings } = ErrorStrings; const getApiPath = function () { - const basePath = platformService.getService().getBasePath(); + const platformService = pluginServices.getServices().platform; + const basePath = platformService.getBasePath(); return basePath + API_ROUTE; }; const getSavedObjectsClient = function () { - return platformService.getService().getSavedObjectsClient(); + const platformService = pluginServices.getServices().platform; + return platformService.getSavedObjectsClient(); }; const getAdvancedSettings = function () { - return platformService.getService().getUISettings(); + const platformService = pluginServices.getServices().platform; + return platformService.getUISettings(); }; export const getFields = (index = '_all') => { @@ -36,11 +39,12 @@ export const getFields = (index = '_all') => { .filter((field) => !field.startsWith('_')) // filters out meta fields .sort() ) - .catch((err: Error) => - notifyService.getService().error(err, { + .catch((err: Error) => { + const notifyService = pluginServices.getServices().notify; + notifyService.error(err, { title: strings.getFieldsFetchErrorMessage(index), - }) - ); + }); + }); }; export const getIndices = () => @@ -56,9 +60,10 @@ export const getIndices = () => return savedObject.attributes.title; }); }) - .catch((err: Error) => - notifyService.getService().error(err, { title: strings.getIndicesFetchErrorMessage() }) - ); + .catch((err: Error) => { + const notifyService = pluginServices.getServices().notify; + notifyService.error(err, { title: strings.getIndicesFetchErrorMessage() }); + }); export const getDefaultIndex = () => { const defaultIndexId = getAdvancedSettings().get('defaultIndex'); @@ -67,10 +72,9 @@ export const getDefaultIndex = () => { ? getSavedObjectsClient() .get('index-pattern', defaultIndexId) .then((defaultIndex) => defaultIndex.attributes.title) - .catch((err) => - notifyService - .getService() - .error(err, { title: strings.getDefaultIndexFetchErrorMessage() }) - ) + .catch((err) => { + const notifyService = pluginServices.getServices().notify; + notifyService.error(err, { title: strings.getDefaultIndexFetchErrorMessage() }); + }) : Promise.resolve(''); }; diff --git a/x-pack/plugins/canvas/public/lib/fullscreen.js b/x-pack/plugins/canvas/public/lib/fullscreen.js index f3f6e029696ea..fd4e0b65785b9 100644 --- a/x-pack/plugins/canvas/public/lib/fullscreen.js +++ b/x-pack/plugins/canvas/public/lib/fullscreen.js @@ -5,21 +5,22 @@ * 2.0. */ -import { platformService } from '../services'; +import { pluginServices } from '../services'; export const fullscreenClass = 'canvas-isFullscreen'; export function setFullscreen(fullscreen, doc = document) { + const platformService = pluginServices.getServices().platform; const enabled = Boolean(fullscreen); const body = doc.querySelector('body'); const bodyClassList = body.classList; const isFullscreen = bodyClassList.contains(fullscreenClass); if (enabled && !isFullscreen) { - platformService.getService().setFullscreen(false); + platformService.setFullscreen(false); bodyClassList.add(fullscreenClass); } else if (!enabled && isFullscreen) { bodyClassList.remove(fullscreenClass); - platformService.getService().setFullscreen(true); + platformService.setFullscreen(true); } } diff --git a/x-pack/plugins/canvas/public/lib/run_interpreter.ts b/x-pack/plugins/canvas/public/lib/run_interpreter.ts index eb9be96c5367b..d69f89566cfc9 100644 --- a/x-pack/plugins/canvas/public/lib/run_interpreter.ts +++ b/x-pack/plugins/canvas/public/lib/run_interpreter.ts @@ -6,8 +6,9 @@ */ import { fromExpression, getType } from '@kbn/interpreter/common'; +import { pluck } from 'rxjs/operators'; import { ExpressionValue, ExpressionAstExpression } from 'src/plugins/expressions/public'; -import { notifyService, expressionsService } from '../services'; +import { pluginServices, expressionsService } from '../services'; interface Options { castToRender?: boolean; @@ -21,7 +22,12 @@ export async function interpretAst( variables: Record ): Promise { const context = { variables }; - return await expressionsService.getService().execute(ast, null, context).getData(); + return await expressionsService + .getService() + .execute(ast, null, context) + .getData() + .pipe(pluck('result')) + .toPromise(); } /** @@ -43,7 +49,12 @@ export async function runInterpreter( const context = { variables }; try { - const renderable = await expressionsService.getService().execute(ast, input, context).getData(); + const renderable = await expressionsService + .getService() + .execute(ast, input, context) + .getData() + .pipe(pluck('result')) + .toPromise(); if (getType(renderable) === 'render') { return renderable; @@ -57,7 +68,8 @@ export async function runInterpreter( throw new Error(`Ack! I don't know how to render a '${getType(renderable)}'`); } catch (err) { - notifyService.getService().error(err); + const { error: displayError } = pluginServices.getServices().notify; + displayError(err); throw err; } } diff --git a/x-pack/plugins/canvas/public/lib/template_service.ts b/x-pack/plugins/canvas/public/lib/template_service.ts index 6a262d57672e4..d5ec467f18740 100644 --- a/x-pack/plugins/canvas/public/lib/template_service.ts +++ b/x-pack/plugins/canvas/public/lib/template_service.ts @@ -5,13 +5,16 @@ * 2.0. */ +// TODO - clint: convert to service abstraction + import { API_ROUTE_TEMPLATES } from '../../common/lib/constants'; import { fetch } from '../../common/lib/fetch'; -import { platformService } from '../services'; +import { pluginServices } from '../services'; import { CanvasTemplate } from '../../types'; const getApiPath = function () { - const basePath = platformService.getService().getBasePath(); + const platformService = pluginServices.getServices().platform; + const basePath = platformService.getBasePath(); return `${basePath}${API_ROUTE_TEMPLATES}`; }; @@ -21,6 +24,5 @@ interface ListResponse { export async function list() { const templateResponse = await fetch.get(`${getApiPath()}`); - return templateResponse.data.templates; } diff --git a/x-pack/plugins/canvas/public/lib/workpad_service.js b/x-pack/plugins/canvas/public/lib/workpad_service.js index 70aa1c3f1f816..20ad82860f1fa 100644 --- a/x-pack/plugins/canvas/public/lib/workpad_service.js +++ b/x-pack/plugins/canvas/public/lib/workpad_service.js @@ -5,6 +5,7 @@ * 2.0. */ +// TODO: clint - move to workpad service. import { API_ROUTE_WORKPAD, API_ROUTE_WORKPAD_ASSETS, @@ -12,7 +13,7 @@ import { DEFAULT_WORKPAD_CSS, } from '../../common/lib/constants'; import { fetch } from '../../common/lib/fetch'; -import { platformService } from '../services'; +import { pluginServices } from '../services'; /* Remove any top level keys from the workpad which will be rejected by validation @@ -46,17 +47,20 @@ const sanitizeWorkpad = function (workpad) { }; const getApiPath = function () { - const basePath = platformService.getService().getBasePath(); + const platformService = pluginServices.getServices().platform; + const basePath = platformService.getBasePath(); return `${basePath}${API_ROUTE_WORKPAD}`; }; const getApiPathStructures = function () { - const basePath = platformService.getService().getBasePath(); + const platformService = pluginServices.getServices().platform; + const basePath = platformService.getBasePath(); return `${basePath}${API_ROUTE_WORKPAD_STRUCTURES}`; }; const getApiPathAssets = function () { - const basePath = platformService.getService().getBasePath(); + const platformService = pluginServices.getServices().platform; + const basePath = platformService.getBasePath(); return `${basePath}${API_ROUTE_WORKPAD_ASSETS}`; }; diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_fullscreen_presentation_helper.ts b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_fullscreen_presentation_helper.ts index ab26625038bc5..9021c6d6c2753 100644 --- a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_fullscreen_presentation_helper.ts +++ b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_fullscreen_presentation_helper.ts @@ -5,15 +5,14 @@ * 2.0. */ import { useContext, useEffect } from 'react'; -import { useServices } from '../../../services'; +import { usePlatformService } from '../../../services'; import { WorkpadRoutingContext } from '..'; const fullscreenClass = 'canvas-isFullscreen'; export const useFullscreenPresentationHelper = () => { const { isFullscreen } = useContext(WorkpadRoutingContext); - const services = useServices(); - const { setFullscreen } = services.platform; + const { setFullscreen } = usePlatformService(); useEffect(() => { const body = document.querySelector('body'); diff --git a/x-pack/plugins/canvas/public/routes/workpad/workpad_presentation_helper.tsx b/x-pack/plugins/canvas/public/routes/workpad/workpad_presentation_helper.tsx index ccb38cd1a1e0f..bdf84de7a47bd 100644 --- a/x-pack/plugins/canvas/public/routes/workpad/workpad_presentation_helper.tsx +++ b/x-pack/plugins/canvas/public/routes/workpad/workpad_presentation_helper.tsx @@ -14,21 +14,21 @@ import { getWorkpad } from '../../state/selectors/workpad'; import { useFullscreenPresentationHelper } from './hooks/use_fullscreen_presentation_helper'; import { useAutoplayHelper } from './hooks/use_autoplay_helper'; import { useRefreshHelper } from './hooks/use_refresh_helper'; -import { useServices } from '../../services'; +import { usePlatformService } from '../../services'; export const WorkpadPresentationHelper: FC = ({ children }) => { - const services = useServices(); + const platformService = usePlatformService(); const workpad = useSelector(getWorkpad); useFullscreenPresentationHelper(); useAutoplayHelper(); useRefreshHelper(); useEffect(() => { - services.platform.setBreadcrumbs([ + platformService.setBreadcrumbs([ getBaseBreadcrumb(), getWorkpadBreadcrumb({ name: workpad.name }), ]); - }, [workpad.name, workpad.id, services.platform]); + }, [workpad.name, workpad.id, platformService]); useEffect(() => { setDocTitle(workpad.name); diff --git a/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx b/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx index 7683b3413f681..95caba08517ee 100644 --- a/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx +++ b/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx @@ -13,7 +13,7 @@ import { ExportApp } from '../../components/export_app'; import { CanvasLoading } from '../../components/canvas_loading'; // @ts-expect-error import { fetchAllRenderables } from '../../state/actions/elements'; -import { useServices } from '../../services'; +import { useNotifyService } from '../../services'; import { CanvasWorkpad } from '../../../types'; import { ErrorStrings } from '../../../i18n'; import { useWorkpad } from './hooks/use_workpad'; @@ -98,13 +98,13 @@ const WorkpadLoaderComponent: FC<{ children: (workpad: CanvasWorkpad) => JSX.Element; }> = ({ params, children, loadPages }) => { const [workpad, error] = useWorkpad(params.id, loadPages); - const services = useServices(); + const notifyService = useNotifyService(); useEffect(() => { if (error) { - services.notify.error(error, { title: strings.getLoadFailureErrorMessage() }); + notifyService.error(error, { title: strings.getLoadFailureErrorMessage() }); } - }, [error, services.notify]); + }, [error, notifyService]); if (error) { return ; diff --git a/x-pack/plugins/canvas/public/services/index.ts b/x-pack/plugins/canvas/public/services/index.ts index 49408fcec1ec4..0aaef4ef280f0 100644 --- a/x-pack/plugins/canvas/public/services/index.ts +++ b/x-pack/plugins/canvas/public/services/index.ts @@ -9,11 +9,17 @@ export * from './legacy'; import { PluginServices } from '../../../../../src/plugins/presentation_util/public'; import { CanvasWorkpadService } from './workpad'; +import { CanvasNotifyService } from './notify'; +import { CanvasPlatformService } from './platform'; export interface CanvasPluginServices { workpad: CanvasWorkpadService; + notify: CanvasNotifyService; + platform: CanvasPlatformService; } export const pluginServices = new PluginServices(); export const useWorkpadService = () => (() => pluginServices.getHooks().workpad.useService())(); +export const useNotifyService = () => (() => pluginServices.getHooks().notify.useService())(); +export const usePlatformService = () => (() => pluginServices.getHooks().platform.useService())(); diff --git a/x-pack/plugins/canvas/public/services/kibana/index.ts b/x-pack/plugins/canvas/public/services/kibana/index.ts index 99012003b3a15..bb0095a3c525c 100644 --- a/x-pack/plugins/canvas/public/services/kibana/index.ts +++ b/x-pack/plugins/canvas/public/services/kibana/index.ts @@ -13,16 +13,22 @@ import { } from '../../../../../../src/plugins/presentation_util/public'; import { workpadServiceFactory } from './workpad'; +import { notifyServiceFactory } from './notify'; +import { platformServiceFactory } from './platform'; import { CanvasPluginServices } from '..'; import { CanvasStartDeps } from '../../plugin'; export { workpadServiceFactory } from './workpad'; +export { notifyServiceFactory } from './notify'; +export { platformServiceFactory } from './platform'; export const pluginServiceProviders: PluginServiceProviders< CanvasPluginServices, KibanaPluginServiceParams > = { workpad: new PluginServiceProvider(workpadServiceFactory), + notify: new PluginServiceProvider(notifyServiceFactory), + platform: new PluginServiceProvider(platformServiceFactory), }; export const pluginServiceRegistry = new PluginServiceRegistry< diff --git a/x-pack/plugins/canvas/public/services/legacy/notify.ts b/x-pack/plugins/canvas/public/services/kibana/notify.ts similarity index 74% rename from x-pack/plugins/canvas/public/services/legacy/notify.ts rename to x-pack/plugins/canvas/public/services/kibana/notify.ts index 22dcfa671d0b5..0082b523d050e 100644 --- a/x-pack/plugins/canvas/public/services/legacy/notify.ts +++ b/x-pack/plugins/canvas/public/services/kibana/notify.ts @@ -6,9 +6,17 @@ */ import { get } from 'lodash'; -import { CanvasServiceFactory } from '.'; +import { KibanaPluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public'; + import { formatMsg } from '../../../../../../src/plugins/kibana_legacy/public'; import { ToastInputFields } from '../../../../../../src/core/public'; +import { CanvasStartDeps } from '../../plugin'; +import { CanvasNotifyService } from '../notify'; + +export type CanvasNotifyServiceFactory = KibanaPluginServiceFactory< + CanvasNotifyService, + CanvasStartDeps +>; const getToast = (err: Error | string, opts: ToastInputFields = {}) => { const errData = (get(err, 'response') || err) as Error | string; @@ -28,15 +36,8 @@ const getToast = (err: Error | string, opts: ToastInputFields = {}) => { }; }; -export interface NotifyService { - error: (err: string | Error, opts?: ToastInputFields) => void; - warning: (err: string | Error, opts?: ToastInputFields) => void; - info: (err: string | Error, opts?: ToastInputFields) => void; - success: (err: string | Error, opts?: ToastInputFields) => void; -} - -export const notifyServiceFactory: CanvasServiceFactory = (setup, start) => { - const toasts = start.notifications.toasts; +export const notifyServiceFactory: CanvasNotifyServiceFactory = ({ coreStart }) => { + const toasts = coreStart.notifications.toasts; return { /* diff --git a/x-pack/plugins/canvas/public/services/legacy/platform.ts b/x-pack/plugins/canvas/public/services/kibana/platform.ts similarity index 54% rename from x-pack/plugins/canvas/public/services/legacy/platform.ts rename to x-pack/plugins/canvas/public/services/kibana/platform.ts index b867622f5d302..79eae8d8081bb 100644 --- a/x-pack/plugins/canvas/public/services/legacy/platform.ts +++ b/x-pack/plugins/canvas/public/services/kibana/platform.ts @@ -5,38 +5,17 @@ * 2.0. */ -import { - SavedObjectsStart, - SavedObjectsClientContract, - IUiSettingsClient, - ChromeBreadcrumb, - IBasePath, - ChromeStart, -} from '../../../../../../src/core/public'; -import { CanvasServiceFactory } from '.'; +import { KibanaPluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public'; -export interface PlatformService { - getBasePath: () => string; - getBasePathInterface: () => IBasePath; - getDocLinkVersion: () => string; - getElasticWebsiteUrl: () => string; - getHasWriteAccess: () => boolean; - getUISetting: (key: string, defaultValue?: any) => any; - setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void; - setRecentlyAccessed: (link: string, label: string, id: string) => void; - setFullscreen: ChromeStart['setIsVisible']; +import { CanvasStartDeps } from '../../plugin'; +import { CanvasPlatformService } from '../platform'; - // TODO: these should go away. We want thin accessors, not entire objects. - // Entire objects are hard to mock, and hide our dependency on the external service. - getSavedObjects: () => SavedObjectsStart; - getSavedObjectsClient: () => SavedObjectsClientContract; - getUISettings: () => IUiSettingsClient; -} +export type CanvaPlatformServiceFactory = KibanaPluginServiceFactory< + CanvasPlatformService, + CanvasStartDeps +>; -export const platformServiceFactory: CanvasServiceFactory = ( - _coreSetup, - coreStart -) => { +export const platformServiceFactory: CanvaPlatformServiceFactory = ({ coreStart }) => { return { getBasePath: coreStart.http.basePath.get, getBasePathInterface: () => coreStart.http.basePath, diff --git a/x-pack/plugins/canvas/public/services/legacy/context.tsx b/x-pack/plugins/canvas/public/services/legacy/context.tsx index 7a90c6870df4a..2f472afd7d3c1 100644 --- a/x-pack/plugins/canvas/public/services/legacy/context.tsx +++ b/x-pack/plugins/canvas/public/services/legacy/context.tsx @@ -22,8 +22,6 @@ export interface WithServicesProps { const defaultContextValue = { embeddables: {}, expressions: {}, - notify: {}, - platform: {}, navLink: {}, search: {}, }; @@ -31,10 +29,8 @@ const defaultContextValue = { const context = createContext(defaultContextValue as CanvasServices); export const useServices = () => useContext(context); -export const usePlatformService = () => useServices().platform; export const useEmbeddablesService = () => useServices().embeddables; export const useExpressionsService = () => useServices().expressions; -export const useNotifyService = () => useServices().notify; export const useNavLinkService = () => useServices().navLink; export const useLabsService = () => useServices().labs; @@ -52,8 +48,6 @@ export const LegacyServicesProvider: FC<{ const value = { embeddables: specifiedProviders.embeddables.getService(), expressions: specifiedProviders.expressions.getService(), - notify: specifiedProviders.notify.getService(), - platform: specifiedProviders.platform.getService(), navLink: specifiedProviders.navLink.getService(), search: specifiedProviders.search.getService(), reporting: specifiedProviders.reporting.getService(), diff --git a/x-pack/plugins/canvas/public/services/legacy/index.ts b/x-pack/plugins/canvas/public/services/legacy/index.ts index e23057daa7359..01f252c8eb0d6 100644 --- a/x-pack/plugins/canvas/public/services/legacy/index.ts +++ b/x-pack/plugins/canvas/public/services/legacy/index.ts @@ -8,8 +8,6 @@ import { BehaviorSubject } from 'rxjs'; import { CoreSetup, CoreStart, AppUpdater } from '../../../../../../src/core/public'; import { CanvasSetupDeps, CanvasStartDeps } from '../../plugin'; -import { notifyServiceFactory } from './notify'; -import { platformServiceFactory } from './platform'; import { navLinkServiceFactory } from './nav_link'; import { embeddablesServiceFactory } from './embeddables'; import { expressionsServiceFactory } from './expressions'; @@ -17,9 +15,7 @@ import { searchServiceFactory } from './search'; import { labsServiceFactory } from './labs'; import { reportingServiceFactory } from './reporting'; -export { NotifyService } from './notify'; export { SearchService } from './search'; -export { PlatformService } from './platform'; export { NavLinkService } from './nav_link'; export { EmbeddablesService } from './embeddables'; export { ExpressionsService } from '../../../../../../src/plugins/expressions/common'; @@ -79,8 +75,6 @@ export type ServiceFromProvider

= P extends CanvasServiceProvider ? export const services = { embeddables: new CanvasServiceProvider(embeddablesServiceFactory), expressions: new CanvasServiceProvider(expressionsServiceFactory), - notify: new CanvasServiceProvider(notifyServiceFactory), - platform: new CanvasServiceProvider(platformServiceFactory), navLink: new CanvasServiceProvider(navLinkServiceFactory), search: new CanvasServiceProvider(searchServiceFactory), reporting: new CanvasServiceProvider(reportingServiceFactory), @@ -92,8 +86,6 @@ export type CanvasServiceProviders = typeof services; export interface CanvasServices { embeddables: ServiceFromProvider; expressions: ServiceFromProvider; - notify: ServiceFromProvider; - platform: ServiceFromProvider; navLink: ServiceFromProvider; search: ServiceFromProvider; reporting: ServiceFromProvider; @@ -120,8 +112,6 @@ export const stopServices = () => { export const { embeddables: embeddableService, - notify: notifyService, - platform: platformService, navLink: navLinkService, expressions: expressionsService, search: searchService, diff --git a/x-pack/plugins/canvas/public/services/legacy/stubs/index.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/index.ts index 7246a34d7f491..9857e27d8a3cf 100644 --- a/x-pack/plugins/canvas/public/services/legacy/stubs/index.ts +++ b/x-pack/plugins/canvas/public/services/legacy/stubs/index.ts @@ -10,9 +10,7 @@ import { embeddablesService } from './embeddables'; import { expressionsService } from './expressions'; import { reportingService } from './reporting'; import { navLinkService } from './nav_link'; -import { notifyService } from './notify'; import { labsService } from './labs'; -import { platformService } from './platform'; import { searchService } from './search'; export const stubs: CanvasServices = { @@ -20,8 +18,6 @@ export const stubs: CanvasServices = { expressions: expressionsService, reporting: reportingService, navLink: navLinkService, - notify: notifyService, - platform: platformService, search: searchService, labs: labsService, }; diff --git a/x-pack/plugins/canvas/public/services/notify.ts b/x-pack/plugins/canvas/public/services/notify.ts new file mode 100644 index 0000000000000..67c5cb6bf79c4 --- /dev/null +++ b/x-pack/plugins/canvas/public/services/notify.ts @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { ToastInputFields } from '../../../../../src/core/public'; + +export interface CanvasNotifyService { + error: (err: string | Error, opts?: ToastInputFields) => void; + warning: (err: string | Error, opts?: ToastInputFields) => void; + info: (err: string | Error, opts?: ToastInputFields) => void; + success: (err: string | Error, opts?: ToastInputFields) => void; +} diff --git a/x-pack/plugins/canvas/public/services/platform.ts b/x-pack/plugins/canvas/public/services/platform.ts new file mode 100644 index 0000000000000..7a452d809a614 --- /dev/null +++ b/x-pack/plugins/canvas/public/services/platform.ts @@ -0,0 +1,33 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { + SavedObjectsStart, + SavedObjectsClientContract, + IUiSettingsClient, + ChromeBreadcrumb, + IBasePath, + ChromeStart, +} from '../../../../../src/core/public'; + +export interface CanvasPlatformService { + getBasePath: () => string; + getBasePathInterface: () => IBasePath; + getDocLinkVersion: () => string; + getElasticWebsiteUrl: () => string; + getHasWriteAccess: () => boolean; + getUISetting: (key: string, defaultValue?: any) => any; + setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void; + setRecentlyAccessed: (link: string, label: string, id: string) => void; + setFullscreen: ChromeStart['setIsVisible']; + + // TODO: these should go away. We want thin accessors, not entire objects. + // Entire objects are hard to mock, and hide our dependency on the external service. + getSavedObjects: () => SavedObjectsStart; + getSavedObjectsClient: () => SavedObjectsClientContract; + getUISettings: () => IUiSettingsClient; +} diff --git a/x-pack/plugins/canvas/public/services/storybook/index.ts b/x-pack/plugins/canvas/public/services/storybook/index.ts index de231f730faf5..86ff52155a0bf 100644 --- a/x-pack/plugins/canvas/public/services/storybook/index.ts +++ b/x-pack/plugins/canvas/public/services/storybook/index.ts @@ -13,6 +13,7 @@ import { import { CanvasPluginServices } from '..'; import { pluginServiceProviders as stubProviders } from '../stubs'; import { workpadServiceFactory } from './workpad'; +import { notifyServiceFactory } from './notify'; export interface StorybookParams { hasTemplates?: boolean; @@ -26,6 +27,7 @@ export const pluginServiceProviders: PluginServiceProviders< > = { ...stubProviders, workpad: new PluginServiceProvider(workpadServiceFactory), + notify: new PluginServiceProvider(notifyServiceFactory), }; export const argTypes = { diff --git a/x-pack/plugins/canvas/public/services/storybook/notify.ts b/x-pack/plugins/canvas/public/services/storybook/notify.ts new file mode 100644 index 0000000000000..7ffd2ef9d1453 --- /dev/null +++ b/x-pack/plugins/canvas/public/services/storybook/notify.ts @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { action } from '@storybook/addon-actions'; + +import { PluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public'; + +import { StorybookParams } from '.'; +import { CanvasNotifyService } from '../notify'; + +type CanvasNotifyServiceFactory = PluginServiceFactory; + +export const notifyServiceFactory: CanvasNotifyServiceFactory = () => ({ + success: (message) => action(`success: ${message}`)(), + error: (message) => action(`error: ${message}`)(), + info: (message) => action(`info: ${message}`)(), + warning: (message) => action(`warning: ${message}`)(), +}); diff --git a/x-pack/plugins/canvas/public/services/stubs/index.ts b/x-pack/plugins/canvas/public/services/stubs/index.ts index 586007201db81..1aa05647f7e9e 100644 --- a/x-pack/plugins/canvas/public/services/stubs/index.ts +++ b/x-pack/plugins/canvas/public/services/stubs/index.ts @@ -15,11 +15,17 @@ import { import { CanvasPluginServices } from '..'; import { workpadServiceFactory } from './workpad'; +import { notifyServiceFactory } from './notify'; +import { platformServiceFactory } from './platform'; export { workpadServiceFactory } from './workpad'; +export { notifyServiceFactory } from './notify'; +export { platformServiceFactory } from './platform'; export const pluginServiceProviders: PluginServiceProviders = { workpad: new PluginServiceProvider(workpadServiceFactory), + notify: new PluginServiceProvider(notifyServiceFactory), + platform: new PluginServiceProvider(platformServiceFactory), }; export const pluginServiceRegistry = new PluginServiceRegistry( diff --git a/x-pack/plugins/canvas/public/services/stubs/notify.ts b/x-pack/plugins/canvas/public/services/stubs/notify.ts new file mode 100644 index 0000000000000..0ad322a414f0d --- /dev/null +++ b/x-pack/plugins/canvas/public/services/stubs/notify.ts @@ -0,0 +1,21 @@ +/* + * 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 { PluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public'; + +import { CanvasNotifyService } from '../notify'; + +type CanvasNotifyServiceFactory = PluginServiceFactory; + +const noop = (..._args: any[]): any => {}; + +export const notifyServiceFactory: CanvasNotifyServiceFactory = () => ({ + error: noop, + info: noop, + success: noop, + warning: noop, +}); diff --git a/x-pack/plugins/canvas/public/services/legacy/stubs/platform.ts b/x-pack/plugins/canvas/public/services/stubs/platform.ts similarity index 72% rename from x-pack/plugins/canvas/public/services/legacy/stubs/platform.ts rename to x-pack/plugins/canvas/public/services/stubs/platform.ts index 5776a1d0d6983..181d355df8a1c 100644 --- a/x-pack/plugins/canvas/public/services/legacy/stubs/platform.ts +++ b/x-pack/plugins/canvas/public/services/stubs/platform.ts @@ -5,7 +5,11 @@ * 2.0. */ -import { PlatformService } from '../platform'; +import { PluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public'; + +import { CanvasPlatformService } from '../platform'; + +type CanvasPlatformServiceFactory = PluginServiceFactory; const noop = (..._args: any[]): any => {}; @@ -15,7 +19,7 @@ const uiSettings: Record = { const getUISetting = (setting: string) => uiSettings[setting]; -export const platformService: PlatformService = { +export const platformServiceFactory: CanvasPlatformServiceFactory = () => ({ getBasePath: () => '/base/path', getBasePathInterface: noop, getDocLinkVersion: () => 'dockLinkVersion', @@ -28,4 +32,4 @@ export const platformService: PlatformService = { getSavedObjectsClient: noop, getUISettings: noop, setFullscreen: noop, -}; +}); diff --git a/x-pack/plugins/canvas/public/services/workpad.ts b/x-pack/plugins/canvas/public/services/workpad.ts index 37664244b2d55..6b90cc346834b 100644 --- a/x-pack/plugins/canvas/public/services/workpad.ts +++ b/x-pack/plugins/canvas/public/services/workpad.ts @@ -17,7 +17,6 @@ export interface WorkpadFindResponse { export interface TemplateFindResponse { templates: CanvasTemplate[]; } - export interface CanvasWorkpadService { get: (id: string) => Promise; create: (workpad: CanvasWorkpad) => Promise; diff --git a/x-pack/plugins/canvas/public/state/actions/elements.js b/x-pack/plugins/canvas/public/state/actions/elements.js index ac5d768de53b9..a8302cf094016 100644 --- a/x-pack/plugins/canvas/public/state/actions/elements.js +++ b/x-pack/plugins/canvas/public/state/actions/elements.js @@ -22,7 +22,7 @@ import { getDefaultElement } from '../defaults'; import { ErrorStrings } from '../../../i18n'; import { runInterpreter, interpretAst } from '../../lib/run_interpreter'; import { subMultitree } from '../../lib/aeroelastic/functional'; -import { services } from '../../services'; +import { pluginServices } from '../../services'; import { selectToplevelNodes } from './transient'; import * as args from './resolved_args'; @@ -144,7 +144,8 @@ const fetchRenderableWithContextFn = ({ dispatch, getState }, element, ast, cont dispatch(getAction(renderable)); }) .catch((err) => { - services.notify.getService().error(err); + const notifyService = pluginServices.getServices().notify; + notifyService.error(err); dispatch(getAction(err)); }); }; @@ -188,7 +189,8 @@ export const fetchAllRenderables = createThunk( return runInterpreter(ast, null, variables, { castToRender: true }) .then((renderable) => ({ path: argumentPath, value: renderable })) .catch((err) => { - services.notify.getService().error(err); + const notifyService = pluginServices.getServices().notify; + notifyService.error(err); return { path: argumentPath, value: err }; }); }); @@ -307,7 +309,8 @@ const setAst = createThunk('setAst', ({ dispatch }, ast, element, pageId, doRend const expression = toExpression(ast); dispatch(setExpression(expression, element.id, pageId, doRender)); } catch (err) { - services.notify.getService().error(err); + const notifyService = pluginServices.getServices().notify; + notifyService.error(err); // TODO: remove this, may have been added just to cause a re-render, but why? dispatch(setExpression(element.expression, element.id, pageId, doRender)); diff --git a/x-pack/plugins/canvas/public/state/initial_state.js b/x-pack/plugins/canvas/public/state/initial_state.js index e4909bdb95081..c652cc573abe9 100644 --- a/x-pack/plugins/canvas/public/state/initial_state.js +++ b/x-pack/plugins/canvas/public/state/initial_state.js @@ -6,11 +6,12 @@ */ import { get } from 'lodash'; -import { platformService } from '../services'; +import { pluginServices } from '../services'; import { getDefaultWorkpad } from './defaults'; export const getInitialState = (path) => { - const { getHasWriteAccess } = platformService.getService(); + const platformService = pluginServices.getServices().platform; + const { getHasWriteAccess } = platformService; const state = { app: {}, // Kibana stuff in here diff --git a/x-pack/plugins/canvas/public/state/middleware/es_persist.js b/x-pack/plugins/canvas/public/state/middleware/es_persist.js index 61a2e612215b5..17d0c9649b912 100644 --- a/x-pack/plugins/canvas/public/state/middleware/es_persist.js +++ b/x-pack/plugins/canvas/public/state/middleware/es_persist.js @@ -15,7 +15,7 @@ import { setAssets, resetAssets } from '../actions/assets'; import * as transientActions from '../actions/transient'; import * as resolvedArgsActions from '../actions/resolved_args'; import { update, updateAssets, updateWorkpad } from '../../lib/workpad_service'; -import { services } from '../../services'; +import { pluginServices } from '../../services'; import { canUserWrite } from '../selectors/app'; const { esPersist: strings } = ErrorStrings; @@ -61,17 +61,19 @@ export const esPersistMiddleware = ({ getState }) => { const notifyError = (err) => { const statusCode = err.response && err.response.status; + const notifyService = pluginServices.getServices().notify; + switch (statusCode) { case 400: - return services.notify.getService().error(err.response, { + return notifyService.error(err.response, { title: strings.getSaveFailureTitle(), }); case 413: - return services.notify.getService().error(strings.getTooLargeErrorMessage(), { + return notifyService.error(strings.getTooLargeErrorMessage(), { title: strings.getSaveFailureTitle(), }); default: - return services.notify.getService().error(err, { + return notifyService.error(err, { title: strings.getUpdateFailureTitle(), }); } diff --git a/x-pack/plugins/canvas/public/state/reducers/workpad.js b/x-pack/plugins/canvas/public/state/reducers/workpad.js index acd371e9490fb..ebde0106f9c01 100644 --- a/x-pack/plugins/canvas/public/state/reducers/workpad.js +++ b/x-pack/plugins/canvas/public/state/reducers/workpad.js @@ -6,7 +6,7 @@ */ import { handleActions } from 'redux-actions'; -import { platformService } from '../../services'; +import { pluginServices } from '../../services'; import { getDefaultWorkpad } from '../defaults'; import { setWorkpad, @@ -24,9 +24,13 @@ import { APP_ROUTE_WORKPAD } from '../../../common/lib/constants'; export const workpadReducer = handleActions( { [setWorkpad]: (workpadState, { payload }) => { - platformService - .getService() - .setRecentlyAccessed(`${APP_ROUTE_WORKPAD}/${payload.id}`, payload.name, payload.id); + pluginServices + .getServices() + .platform.setRecentlyAccessed( + `${APP_ROUTE_WORKPAD}/${payload.id}`, + payload.name, + payload.id + ); return payload; }, @@ -39,9 +43,13 @@ export const workpadReducer = handleActions( }, [setName]: (workpadState, { payload }) => { - platformService - .getService() - .setRecentlyAccessed(`${APP_ROUTE_WORKPAD}/${workpadState.id}`, payload, workpadState.id); + pluginServices + .getServices() + .platform.setRecentlyAccessed( + `${APP_ROUTE_WORKPAD}/${workpadState.id}`, + payload, + workpadState.id + ); return { ...workpadState, name: payload }; }, diff --git a/x-pack/plugins/canvas/public/style/index.scss b/x-pack/plugins/canvas/public/style/index.scss index e866eada1f85f..aac898c3dd374 100644 --- a/x-pack/plugins/canvas/public/style/index.scss +++ b/x-pack/plugins/canvas/public/style/index.scss @@ -45,16 +45,13 @@ @import '../components/workpad_page/workpad_static_page/workpad_static_page'; @import '../components/var_config/edit_var'; @import '../components/var_config/var_config'; - @import '../transitions/fade/fade'; @import '../transitions/rotate/rotate'; @import '../transitions/slide/slide'; @import '../transitions/zoom/zoom'; - @import '../../canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.scss'; @import '../../canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss'; @import '../../canvas_plugin_src/renderers/embeddable/embeddable.scss'; @import '../../canvas_plugin_src/renderers/plot/plot.scss'; -@import '../../canvas_plugin_src/renderers/reveal_image/reveal_image.scss'; @import '../../canvas_plugin_src/renderers/filters/time_filter/time_filter.scss'; @import '../../canvas_plugin_src/uis/arguments/image_upload/image_upload.scss'; diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js index 8ee96aeec2951..60987e987f63a 100644 --- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js +++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js @@ -9,7 +9,6 @@ import { debug } from '../canvas_plugin_src/renderers/debug'; import { error } from '../canvas_plugin_src/renderers/error'; import { image } from '../canvas_plugin_src/renderers/image'; import { repeatImage } from '../canvas_plugin_src/renderers/repeat_image'; -import { revealImage } from '../canvas_plugin_src/renderers/reveal_image'; import { markdown } from '../canvas_plugin_src/renderers/markdown'; import { metric } from '../canvas_plugin_src/renderers/metric'; import { pie } from '../canvas_plugin_src/renderers/pie'; @@ -18,6 +17,7 @@ import { progress } from '../canvas_plugin_src/renderers/progress'; import { shape } from '../canvas_plugin_src/renderers/shape'; import { table } from '../canvas_plugin_src/renderers/table'; import { text } from '../canvas_plugin_src/renderers/text'; +import { revealImageRenderer as revealImage } from '../../../../src/plugins/expression_reveal_image/public'; /** * This is a collection of renderers which are bundled with the runtime. If diff --git a/x-pack/plugins/canvas/storybook/preview.ts b/x-pack/plugins/canvas/storybook/preview.ts index 266ff767c566a..8eae76abaf415 100644 --- a/x-pack/plugins/canvas/storybook/preview.ts +++ b/x-pack/plugins/canvas/storybook/preview.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { action } from '@storybook/addon-actions'; import { addParameters } from '@storybook/react'; import { startServices } from '../public/services/stubs'; @@ -14,14 +13,7 @@ import { addDecorators } from './decorators'; // Import Canvas CSS import '../public/style/index.scss'; -startServices({ - notify: { - success: (message) => action(`success: ${message}`)(), - error: (message) => action(`error: ${message}`)(), - info: (message) => action(`info: ${message}`)(), - warning: (message) => action(`warning: ${message}`)(), - }, -}); +startServices(); addDecorators(); addParameters({ diff --git a/x-pack/plugins/canvas/test_helpers/function_wrapper.js b/x-pack/plugins/canvas/test_helpers/function_wrapper.js deleted file mode 100644 index d20cac18cbb54..0000000000000 --- a/x-pack/plugins/canvas/test_helpers/function_wrapper.js +++ /dev/null @@ -1,19 +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 { mapValues } from 'lodash'; - -// It takes a function spec and passes in default args into the spec fn -export const functionWrapper = (fnSpec, mockReduxStore) => { - const spec = fnSpec(); - const defaultArgs = mapValues(spec.args, (argSpec) => { - return argSpec.default; - }); - - return (context, args, handlers) => - spec.fn(context, { ...defaultArgs, ...args }, handlers, mockReduxStore); -}; diff --git a/x-pack/plugins/canvas/tsconfig.json b/x-pack/plugins/canvas/tsconfig.json index 487b68ba3542b..84581d7be85a3 100644 --- a/x-pack/plugins/canvas/tsconfig.json +++ b/x-pack/plugins/canvas/tsconfig.json @@ -31,6 +31,7 @@ { "path": "../../../src/plugins/discover/tsconfig.json" }, { "path": "../../../src/plugins/embeddable/tsconfig.json" }, { "path": "../../../src/plugins/expressions/tsconfig.json" }, + { "path": "../../../src/plugins/expression_reveal_image/tsconfig.json" }, { "path": "../../../src/plugins/home/tsconfig.json" }, { "path": "../../../src/plugins/inspector/tsconfig.json" }, { "path": "../../../src/plugins/kibana_legacy/tsconfig.json" }, diff --git a/x-pack/plugins/canvas/types/renderers.ts b/x-pack/plugins/canvas/types/renderers.ts index e840ebee43ed3..2c3931485757d 100644 --- a/x-pack/plugins/canvas/types/renderers.ts +++ b/x-pack/plugins/canvas/types/renderers.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { IInterpreterRenderHandlers } from 'src/plugins/expressions'; +import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions'; type GenericRendererCallback = (callback: () => void) => void; @@ -35,9 +35,9 @@ export interface RendererSpec { /** The render type */ name: string; /** The name to display */ - displayName: string; + displayName?: string; /** A description of what is rendered */ - help: string; + help?: string; /** Indicate whether the element should reuse the existing DOM element when re-rendering */ reuseDomNode: boolean; /** The default width of the element in pixels */ @@ -50,5 +50,7 @@ export interface RendererSpec { export type RendererFactory = () => RendererSpec; -export type AnyRendererFactory = RendererFactory; +export type AnyRendererFactory = + | RendererFactory + | Array<() => ExpressionRenderDefinition>; export type AnyRendererSpec = RendererSpec; diff --git a/x-pack/plugins/cases/common/constants.ts b/x-pack/plugins/cases/common/constants.ts index 5d7ee47bb8ea0..fb3a0475d627a 100644 --- a/x-pack/plugins/cases/common/constants.ts +++ b/x-pack/plugins/cases/common/constants.ts @@ -94,3 +94,9 @@ if (ENABLE_CASE_CONNECTOR) { export const MAX_DOCS_PER_PAGE = 10000; export const MAX_CONCURRENT_SEARCHES = 10; + +/** + * Validation + */ + +export const MAX_TITLE_LENGTH = 64; diff --git a/x-pack/plugins/cases/public/common/translations.ts b/x-pack/plugins/cases/public/common/translations.ts index 020d301c8e30e..c81ec1c25d84f 100644 --- a/x-pack/plugins/cases/public/common/translations.ts +++ b/x-pack/plugins/cases/public/common/translations.ts @@ -228,3 +228,9 @@ export const SELECTABLE_MESSAGE_COLLECTIONS = i18n.translate( export const SELECT_CASE_TITLE = i18n.translate('xpack.cases.common.allCases.caseModal.title', { defaultMessage: 'Select case', }); + +export const MAX_LENGTH_ERROR = (field: string, length: number) => + i18n.translate('xpack.cases.createCase.maxLengthError', { + values: { field, length }, + defaultMessage: 'The length of the {field} is too long. The maximum length is {length}.', + }); diff --git a/x-pack/plugins/cases/public/components/all_cases/columns.tsx b/x-pack/plugins/cases/public/components/all_cases/columns.tsx index ad4447223837c..140dbf2f53c25 100644 --- a/x-pack/plugins/cases/public/components/all_cases/columns.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/columns.tsx @@ -34,6 +34,7 @@ import { useDeleteCases } from '../../containers/use_delete_cases'; import { ConfirmDeleteCaseModal } from '../confirm_delete_case'; import { useKibana } from '../../common/lib/kibana'; import { StatusContextMenu } from '../case_action_bar/status_context_menu'; +import { TruncatedText } from '../truncated_text'; export type CasesColumns = | EuiTableActionsColumnType @@ -145,10 +146,10 @@ export const useCasesColumns = ({ subCaseId={isSubCase(theCase) ? theCase.id : undefined} title={theCase.title} > - {theCase.title} + ) : ( - {theCase.title} + ); return theCase.status !== CaseStatuses.closed ? ( caseDetailsLinkComponent diff --git a/x-pack/plugins/cases/public/components/create/form_context.test.tsx b/x-pack/plugins/cases/public/components/create/form_context.test.tsx index e083f11ced777..0ddab55c621d3 100644 --- a/x-pack/plugins/cases/public/components/create/form_context.test.tsx +++ b/x-pack/plugins/cases/public/components/create/form_context.test.tsx @@ -183,6 +183,36 @@ describe('Create case', () => { await waitFor(() => expect(postCase).toBeCalledWith(sampleData)); }); + it('it does not submits the title when the length is longer than 64 characters', async () => { + const longTitle = + 'This is a title that should not be saved as it is longer than 64 characters.'; + + const wrapper = mount( + + + + + + + ); + + act(() => { + wrapper + .find(`[data-test-subj="caseTitle"] input`) + .first() + .simulate('change', { target: { value: longTitle } }); + wrapper.find(`[data-test-subj="create-case-submit"]`).first().simulate('click'); + }); + + await waitFor(() => { + wrapper.update(); + expect(wrapper.find('[data-test-subj="caseTitle"] .euiFormErrorText').text()).toBe( + 'The length of the title is too long. The maximum length is 64.' + ); + }); + expect(postCase).not.toHaveBeenCalled(); + }); + it('should toggle sync settings', async () => { useConnectorsMock.mockReturnValue({ ...sampleConnectorData, diff --git a/x-pack/plugins/cases/public/components/create/schema.tsx b/x-pack/plugins/cases/public/components/create/schema.tsx index bea1a46d93760..41709a74d2fa5 100644 --- a/x-pack/plugins/cases/public/components/create/schema.tsx +++ b/x-pack/plugins/cases/public/components/create/schema.tsx @@ -5,12 +5,12 @@ * 2.0. */ -import { CasePostRequest, ConnectorTypeFields } from '../../../common'; +import { CasePostRequest, ConnectorTypeFields, MAX_TITLE_LENGTH } from '../../../common'; import { FIELD_TYPES, fieldValidators, FormSchema } from '../../common/shared_imports'; import * as i18n from './translations'; import { OptionalFieldLabel } from './optional_field_label'; -const { emptyField } = fieldValidators; +const { emptyField, maxLengthField } = fieldValidators; export const schemaTags = { type: FIELD_TYPES.COMBO_BOX, @@ -33,6 +33,12 @@ export const schema: FormSchema = { { validator: emptyField(i18n.TITLE_REQUIRED), }, + { + validator: maxLengthField({ + length: MAX_TITLE_LENGTH, + message: i18n.MAX_LENGTH_ERROR('title', MAX_TITLE_LENGTH), + }), + }, ], }, description: { diff --git a/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap b/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap index 05af2fee2c2a2..9ff9b0616c57e 100644 --- a/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap +++ b/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap @@ -7,7 +7,9 @@ exports[`Title it renders 1`] = `

- Test title + `; + +exports[`Title it renders the title if is not a string 1`] = ` + +

+ + Test title + +

+ +`; diff --git a/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx b/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx index babfeb584677b..19aea39f1f793 100644 --- a/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx +++ b/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx @@ -187,4 +187,33 @@ describe('EditableTitle', () => { expect(submitTitle.mock.calls[0][0]).toEqual(newTitle); expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(true); }); + + test('it does not submits the title when the length is longer than 64 characters', () => { + const longTitle = + 'This is a title that should not be saved as it is longer than 64 characters.'; + + const wrapper = mount( + + + + ); + + wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click'); + wrapper.update(); + + wrapper + .find('input[data-test-subj="editable-title-input-field"]') + .simulate('change', { target: { value: longTitle } }); + + wrapper.find('button[data-test-subj="editable-title-submit-btn"]').simulate('click'); + wrapper.update(); + expect(wrapper.find('.euiFormErrorText').text()).toBe( + 'The length of the title is too long. The maximum length is 64.' + ); + + expect(submitTitle).not.toHaveBeenCalled(); + expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe( + false + ); + }); }); diff --git a/x-pack/plugins/cases/public/components/header_page/editable_title.tsx b/x-pack/plugins/cases/public/components/header_page/editable_title.tsx index 7856a77332275..4dcfa9ad98fde 100644 --- a/x-pack/plugins/cases/public/components/header_page/editable_title.tsx +++ b/x-pack/plugins/cases/public/components/header_page/editable_title.tsx @@ -16,10 +16,11 @@ import { EuiFieldText, EuiButtonIcon, EuiLoadingSpinner, + EuiFormRow, } from '@elastic/eui'; +import { MAX_TITLE_LENGTH } from '../../../common'; import * as i18n from './translations'; - import { Title } from './title'; const MyEuiButtonIcon = styled(EuiButtonIcon)` @@ -37,7 +38,7 @@ const MySpinner = styled(EuiLoadingSpinner)` export interface EditableTitleProps { userCanCrud: boolean; isLoading: boolean; - title: string | React.ReactNode; + title: string; onSubmit: (title: string) => void; } @@ -48,57 +49,72 @@ const EditableTitleComponent: React.FC = ({ title, }) => { const [editMode, setEditMode] = useState(false); - const [changedTitle, onTitleChange] = useState(typeof title === 'string' ? title : ''); + const [errors, setErrors] = useState([]); + const [newTitle, setNewTitle] = useState(title); - const onCancel = useCallback(() => setEditMode(false), []); - const onClickEditIcon = useCallback(() => setEditMode(true), []); + const onCancel = useCallback(() => { + setEditMode(false); + setErrors([]); + setNewTitle(title); + }, [title]); + const onClickEditIcon = useCallback(() => setEditMode(true), []); const onClickSubmit = useCallback((): void => { - if (changedTitle !== title) { - onSubmit(changedTitle); + if (newTitle.length > MAX_TITLE_LENGTH) { + setErrors([i18n.MAX_LENGTH_ERROR('title', MAX_TITLE_LENGTH)]); + return; + } + + if (newTitle !== title) { + onSubmit(newTitle); } setEditMode(false); - }, [changedTitle, onSubmit, title]); + }, [newTitle, onSubmit, title]); const handleOnChange = useCallback( - (e: ChangeEvent) => onTitleChange(e.target.value), + (e: ChangeEvent) => setNewTitle(e.target.value), [] ); + + const hasErrors = errors.length > 0; + return editMode ? ( - - - - - + + - - {i18n.SAVE} - - - - - {i18n.CANCEL} - + + + + + {i18n.SAVE} + + + + + {i18n.CANCEL} + + + + - - + ) : ( diff --git a/x-pack/plugins/cases/public/components/header_page/title.test.tsx b/x-pack/plugins/cases/public/components/header_page/title.test.tsx index 2423104eb8819..063b21e4d8906 100644 --- a/x-pack/plugins/cases/public/components/header_page/title.test.tsx +++ b/x-pack/plugins/cases/public/components/header_page/title.test.tsx @@ -36,4 +36,10 @@ describe('Title', () => { expect(wrapper.find('[data-test-subj="header-page-title"]').first().exists()).toBe(true); }); + + test('it renders the title if is not a string', () => { + const wrapper = shallow({'Test title'}</span>} />); + + expect(wrapper).toMatchSnapshot(); + }); }); diff --git a/x-pack/plugins/cases/public/components/header_page/title.tsx b/x-pack/plugins/cases/public/components/header_page/title.tsx index 3a0390a436e1c..629aa612610ee 100644 --- a/x-pack/plugins/cases/public/components/header_page/title.tsx +++ b/x-pack/plugins/cases/public/components/header_page/title.tsx @@ -6,10 +6,12 @@ */ import React from 'react'; +import { isString } from 'lodash'; import { EuiBetaBadge, EuiBadge, EuiTitle } from '@elastic/eui'; import styled from 'styled-components'; import { BadgeOptions, TitleProp } from './types'; +import { TruncatedText } from '../truncated_text'; const StyledEuiBetaBadge = styled(EuiBetaBadge)` vertical-align: middle; @@ -30,7 +32,7 @@ interface Props { const TitleComponent: React.FC<Props> = ({ title, badgeOptions }) => ( <EuiTitle size="l"> <h1 data-test-subj="header-page-title"> - {title} + {isString(title) ? <TruncatedText text={title} /> : title} {badgeOptions && ( <> {' '} diff --git a/x-pack/plugins/cases/public/components/header_page/translations.ts b/x-pack/plugins/cases/public/components/header_page/translations.ts index b24c347857a6c..ba987d1f45f15 100644 --- a/x-pack/plugins/cases/public/components/header_page/translations.ts +++ b/x-pack/plugins/cases/public/components/header_page/translations.ts @@ -7,6 +7,8 @@ import { i18n } from '@kbn/i18n'; +export * from '../../common/translations'; + export const SAVE = i18n.translate('xpack.cases.header.editableTitle.save', { defaultMessage: 'Save', }); diff --git a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx index bfe44dda6c6ef..e08c629913258 100644 --- a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx +++ b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx @@ -19,6 +19,7 @@ import { NoCases } from './no_cases'; import { isSubCase } from '../all_cases/helpers'; import { MarkdownRenderer } from '../markdown_editor'; import { FilterOptions } from '../../containers/types'; +import { TruncatedText } from '../truncated_text'; const MarkdownContainer = styled.div` max-height: 150px; @@ -80,7 +81,7 @@ export const RecentCasesComp = ({ title={c.title} subCaseId={isSubCase(c) ? c.id : undefined} > - {c.title} + <TruncatedText text={c.title} /> </CaseDetailsLink> </EuiText> diff --git a/x-pack/plugins/cases/public/components/truncated_text/index.tsx b/x-pack/plugins/cases/public/components/truncated_text/index.tsx new file mode 100644 index 0000000000000..8a480ed9dbdd1 --- /dev/null +++ b/x-pack/plugins/cases/public/components/truncated_text/index.tsx @@ -0,0 +1,29 @@ +/* + * 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 styled from 'styled-components'; + +const LINE_CLAMP = 3; + +const Text = styled.span` + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: ${LINE_CLAMP}; + -webkit-box-orient: vertical; + overflow: hidden; +`; + +interface Props { + text: string; +} + +const TruncatedTextComponent: React.FC<Props> = ({ text }) => { + return <Text title={text}>{text}</Text>; +}; + +export const TruncatedText = React.memo(TruncatedTextComponent); diff --git a/x-pack/plugins/cases/server/client/cases/create.ts b/x-pack/plugins/cases/server/client/cases/create.ts index 0eebeb343e814..03ea76ede5c2e 100644 --- a/x-pack/plugins/cases/server/client/cases/create.ts +++ b/x-pack/plugins/cases/server/client/cases/create.ts @@ -22,6 +22,7 @@ import { CaseType, OWNER_FIELD, ENABLE_CASE_CONNECTOR, + MAX_TITLE_LENGTH, } from '../../../common'; import { buildCaseUserActionItem } from '../../services/user_actions/helpers'; import { getConnectorFromConfiguration } from '../utils'; @@ -72,6 +73,12 @@ export const create = async ( fold(throwErrors(Boom.badRequest), identity) ); + if (query.title.length > MAX_TITLE_LENGTH) { + throw Boom.badRequest( + `The length of the title is too long. The maximum length is ${MAX_TITLE_LENGTH}.` + ); + } + try { const savedObjectID = SavedObjectsUtils.generateId(); diff --git a/x-pack/plugins/cases/server/client/cases/update.ts b/x-pack/plugins/cases/server/client/cases/update.ts index e5d9e1cddeee6..afe43171563ce 100644 --- a/x-pack/plugins/cases/server/client/cases/update.ts +++ b/x-pack/plugins/cases/server/client/cases/update.ts @@ -40,6 +40,7 @@ import { MAX_CONCURRENT_SEARCHES, SUB_CASE_SAVED_OBJECT, throwErrors, + MAX_TITLE_LENGTH, } from '../../../common'; import { buildCaseUserActions } from '../../services/user_actions/helpers'; import { getCaseToUpdate } from '../utils'; @@ -181,6 +182,24 @@ async function throwIfInvalidUpdateOfTypeWithAlerts({ } } +/** + * Throws an error if any of the requests updates a title and the length is over MAX_TITLE_LENGTH. + */ +function throwIfTitleIsInvalid(requests: ESCasePatchRequest[]) { + const requestsInvalidTitle = requests.filter( + (req) => req.title !== undefined && req.title.length > MAX_TITLE_LENGTH + ); + + if (requestsInvalidTitle.length > 0) { + const ids = requestsInvalidTitle.map((req) => req.id); + throw Boom.badRequest( + `The length of the title is too long. The maximum length is ${MAX_TITLE_LENGTH}, ids: [${ids.join( + ', ' + )}]` + ); + } +} + /** * Get the id from a reference in a comment for a specific type. */ @@ -477,6 +496,7 @@ export const update = async ( } throwIfUpdateOwner(updateFilterCases); + throwIfTitleIsInvalid(updateFilterCases); throwIfUpdateStatusOfCollection(updateFilterCases, casesMap); throwIfUpdateTypeCollectionToIndividual(updateFilterCases, casesMap); await throwIfInvalidUpdateOfTypeWithAlerts({ diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss b/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss index f57abbbe6396b..02a8766b3d24c 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss +++ b/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss @@ -1,4 +1,3 @@ @import 'embedded_map/index'; -@import 'experimental_badge/index'; @import 'stats_table/index'; @import 'top_values/top_values'; diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_experimental_badge.scss b/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_experimental_badge.scss deleted file mode 100644 index 8b21620542ff7..0000000000000 --- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_experimental_badge.scss +++ /dev/null @@ -1,7 +0,0 @@ -.experimental-badge.euiBetaBadge { - font-size: 10px; - vertical-align: middle; - margin-bottom: 5px; - padding: 0 20px; - line-height: 20px; -} diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_index.scss b/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_index.scss deleted file mode 100644 index 9e25affd5e5f6..0000000000000 --- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'experimental_badge' diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/experimental_badge.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/experimental_badge.tsx deleted file mode 100644 index 9c39ee54a2a86..0000000000000 --- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/experimental_badge.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 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, { FC } from 'react'; - -import { EuiBetaBadge } from '@elastic/eui'; - -export const ExperimentalBadge: FC<{ tooltipContent: string }> = ({ tooltipContent }) => { - return ( - <span> - <EuiBetaBadge - className="experimental-badge" - label={ - <FormattedMessage - id="xpack.dataVisualizer.experimentalBadge.experimentalLabel" - defaultMessage="Experimental" - /> - } - tooltipContent={tooltipContent} - /> - </span> - ); -}; diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx index 86b869fe06fa1..7b091e699b617 100644 --- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx +++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx @@ -7,30 +7,12 @@ import { FormattedMessage } from '@kbn/i18n/react'; import React, { FC } from 'react'; -import { i18n } from '@kbn/i18n'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiLink, - EuiSpacer, - EuiText, - EuiTitle, -} from '@elastic/eui'; - -import { ExperimentalBadge } from '../../../common/components/experimental_badge'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'; import { useDataVisualizerKibana } from '../../../kibana_context'; export const WelcomeContent: FC = () => { - const toolTipContent = i18n.translate( - 'xpack.dataVisualizer.file.welcomeContent.experimentalFeatureTooltip', - { - defaultMessage: "Experimental feature. We'd love to hear your feedback.", - } - ); - const { services: { fileUpload: { getMaxBytesFormatted }, @@ -48,10 +30,7 @@ export const WelcomeContent: FC = () => { <h1> <FormattedMessage id="xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileTitle" - defaultMessage="Visualize data from a log file {experimentalBadge}" - values={{ - experimentalBadge: <ExperimentalBadge tooltipContent={toolTipContent} />, - }} + defaultMessage="Visualize data from a log file" /> </h1> </EuiTitle> @@ -132,25 +111,6 @@ export const WelcomeContent: FC = () => { /> </p> </EuiText> - <EuiSpacer size="s" /> - <EuiText> - <p> - <FormattedMessage - id="xpack.dataVisualizer.file.welcomeContent.experimentalFeatureDescription" - defaultMessage="This feature is experimental. Got feedback? Please create an issue in {githubLink}." - values={{ - githubLink: ( - <EuiLink - href="https://github.com/elastic/kibana/issues/new/choose" - target="_blank" - > - GitHub - </EuiLink> - ), - }} - /> - </p> - </EuiText> </EuiFlexItem> </EuiFlexGroup> ); diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js index 74a3638f555d0..232a32c75dc29 100644 --- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js +++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js @@ -31,7 +31,6 @@ import { addCombinedFieldsToMappings, getDefaultCombinedFields, } from '../../../common/components/combined_fields'; -import { ExperimentalBadge } from '../../../common/components/experimental_badge'; const DEFAULT_TIME_FIELD = '@timestamp'; const DEFAULT_INDEX_SETTINGS = { number_of_shards: 1 }; @@ -510,15 +509,6 @@ export class ImportView extends Component { id="xpack.dataVisualizer.file.importView.importDataTitle" defaultMessage="Import data" /> -   - <ExperimentalBadge - tooltipContent={ - <FormattedMessage - id="xpack.dataVisualizer.file.importView.experimentalFeatureTooltip" - defaultMessage="Experimental feature. We'd love to hear your feedback." - /> - } - /> </h2> </EuiTitle> diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.ts b/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.ts index 11003d0fcc171..1b5dab0839663 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.ts +++ b/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.ts @@ -5,6 +5,8 @@ * 2.0. */ +import { i18n } from '@kbn/i18n'; + import { HttpResponse } from 'src/core/public'; import { FlashMessagesLogic } from './flash_messages_logic'; @@ -31,12 +33,17 @@ interface Options { isQueued?: boolean; } +export const defaultErrorMessage = i18n.translate( + 'xpack.enterpriseSearch.shared.flashMessages.defaultErrorMessage', + { + defaultMessage: 'An unexpected error occurred', + } +); + /** * Converts API/HTTP errors into user-facing Flash Messages */ export const flashAPIErrors = (error: HttpResponse<ErrorResponse>, { isQueued }: Options = {}) => { - const defaultErrorMessage = 'An unexpected error occurred'; - const errorFlashMessages: IFlashMessage[] = Array.isArray(error?.body?.attributes?.errors) ? error.body!.attributes.errors.map((message) => ({ type: 'error', message })) : [{ type: 'error', message: error?.body?.message || defaultErrorMessage }]; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.test.ts index fd1a574b3438f..3e8322145dad6 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.test.ts +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.test.ts @@ -27,6 +27,7 @@ const spyScrollTo = jest.fn(); Object.defineProperty(global.window, 'scrollTo', { value: spyScrollTo }); import { ADD, UPDATE } from '../../../../../shared/constants/operations'; +import { defaultErrorMessage } from '../../../../../shared/flash_messages/handle_api_errors'; import { SchemaType } from '../../../../../shared/schema/types'; import { AppLogic } from '../../../../app_logic'; @@ -390,13 +391,25 @@ describe('SchemaLogic', () => { expect(onSchemaSetSuccessSpy).toHaveBeenCalledWith(serverResponse); }); - it('handles error', async () => { + it('handles error with message', async () => { + const onSchemaSetFormErrorsSpy = jest.spyOn(SchemaLogic.actions, 'onSchemaSetFormErrors'); + // We expect body.message to be a string[] when it is present + http.post.mockReturnValue(Promise.reject({ body: { message: ['this is an error'] } })); + SchemaLogic.actions.setServerField(schema, ADD); + await nextTick(); + + expect(onSchemaSetFormErrorsSpy).toHaveBeenCalledWith(['this is an error']); + expect(spyScrollTo).toHaveBeenCalledWith(0, 0); + }); + + it('handles error with no message', async () => { const onSchemaSetFormErrorsSpy = jest.spyOn(SchemaLogic.actions, 'onSchemaSetFormErrors'); - http.post.mockReturnValue(Promise.reject({ message: 'this is an error' })); + http.post.mockReturnValue(Promise.reject()); SchemaLogic.actions.setServerField(schema, ADD); await nextTick(); - expect(onSchemaSetFormErrorsSpy).toHaveBeenCalledWith('this is an error'); + expect(onSchemaSetFormErrorsSpy).toHaveBeenCalledWith([defaultErrorMessage]); + expect(spyScrollTo).toHaveBeenCalledWith(0, 0); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.ts index b2c329f0544fd..7af074d412a60 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_logic.ts @@ -17,6 +17,7 @@ import { setErrorMessage, clearFlashMessages, } from '../../../../../shared/flash_messages'; +import { defaultErrorMessage } from '../../../../../shared/flash_messages/handle_api_errors'; import { HttpLogic } from '../../../../../shared/http'; import { IndexJob, @@ -349,7 +350,9 @@ export const SchemaLogic = kea<MakeLogicType<SchemaValues, SchemaActions>>({ } catch (e) { window.scrollTo(0, 0); if (isAdding) { - actions.onSchemaSetFormErrors(e?.message); + // We expect body.message to be a string[] for actions.onSchemaSetFormErrors + const message: string[] = e?.body?.message || [defaultErrorMessage]; + actions.onSchemaSetFormErrors(message); } else { flashAPIErrors(e); } diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx index 1363af573b86d..5075398d2d6b0 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx @@ -425,7 +425,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => { [params, updatePackageInfo, agentPolicy, updateAgentPolicy, queryParamsPolicyId] ); - const ExtensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-create'); + const extensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-create'); const stepConfigurePackagePolicy = useMemo( () => @@ -444,7 +444,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => { /> {/* Only show the out-of-box configuration step if a UI extension is NOT registered */} - {!ExtensionView && ( + {!extensionView && ( <StepConfigurePackagePolicy packageInfo={packageInfo} showOnlyIntegration={integrationInfo?.name} @@ -456,9 +456,12 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => { )} {/* If an Agent Policy and a package has been selected, then show UI extension (if any) */} - {ExtensionView && packagePolicy.policy_id && packagePolicy.package?.name && ( + {extensionView && packagePolicy.policy_id && packagePolicy.package?.name && ( <ExtensionWrapper> - <ExtensionView newPolicy={packagePolicy} onChange={handleExtensionViewOnChange} /> + <extensionView.Component + newPolicy={packagePolicy} + onChange={handleExtensionViewOnChange} + /> </ExtensionWrapper> )} </> @@ -474,7 +477,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => { validationResults, formState, integrationInfo?.name, - ExtensionView, + extensionView, handleExtensionViewOnChange, ] ); diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx index fb3603aaef7f4..b07d76dc6bd8e 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx @@ -338,7 +338,7 @@ export const EditPackagePolicyForm = memo<{ packageInfo, }; - const ExtensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-edit'); + const extensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-edit'); const configurePackage = useMemo( () => @@ -354,7 +354,7 @@ export const EditPackagePolicyForm = memo<{ /> {/* Only show the out-of-box configuration step if a UI extension is NOT registered */} - {!ExtensionView && ( + {!extensionView && ( <StepConfigurePackagePolicy packageInfo={packageInfo} packagePolicy={packagePolicy} @@ -364,12 +364,12 @@ export const EditPackagePolicyForm = memo<{ /> )} - {ExtensionView && + {extensionView && packagePolicy.policy_id && packagePolicy.package?.name && originalPackagePolicy && ( <ExtensionWrapper> - <ExtensionView + <extensionView.Component policy={originalPackagePolicy} newPolicy={packagePolicy} onChange={handleExtensionViewOnChange} @@ -386,7 +386,7 @@ export const EditPackagePolicyForm = memo<{ validationResults, formState, originalPackagePolicy, - ExtensionView, + extensionView, handleExtensionViewOnChange, ] ); diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx index 43db5657b0615..fc2966697418a 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx @@ -5,19 +5,20 @@ * 2.0. */ -import { Search as LocalSearch } from 'js-search'; +import { Search as LocalSearch, AllSubstringsIndexStrategy } from 'js-search'; import { useEffect, useRef } from 'react'; import type { PackageList } from '../../../types'; export const searchIdField = 'id'; -export const fieldsToSearch = ['description', 'name', 'title']; +export const fieldsToSearch = ['name', 'title']; export function useLocalSearch(packageList: PackageList) { const localSearchRef = useRef<LocalSearch | null>(null); useEffect(() => { const localSearch = new LocalSearch(searchIdField); + localSearch.indexStrategy = new AllSubstringsIndexStrategy(); fieldsToSearch.forEach((field) => localSearch.addIndex(field)); localSearch.addDocuments(packageList); localSearchRef.current = localSearch; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx index 41db09b0538b9..f8e4c9994e570 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx @@ -19,7 +19,7 @@ export const DisplayedAssets: ServiceNameToAssetTypes = { elasticsearch: Object.values(ElasticsearchAssetType), }; -export type DisplayedAssetType = ElasticsearchAssetType | KibanaAssetType; +export type DisplayedAssetType = ElasticsearchAssetType | KibanaAssetType | 'view'; export const AssetTitleMap: Record<DisplayedAssetType, string> = { dashboard: 'Dashboard', @@ -36,6 +36,7 @@ export const AssetTitleMap: Record<DisplayedAssetType, string> = { lens: 'Lens', security_rule: 'Security Rule', ml_module: 'ML Module', + view: 'Views', }; export const ServiceTitleMap: Record<ServiceName, string> = { diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx index e6dce1bc51367..6d075faeef308 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx @@ -10,12 +10,17 @@ import { Redirect } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui'; -import { Loading, Error } from '../../../../../components'; +import { Loading, Error, ExtensionWrapper } from '../../../../../components'; import type { PackageInfo } from '../../../../../types'; import { InstallStatus } from '../../../../../types'; -import { useGetPackageInstallStatus, useLink, useStartServices } from '../../../../../hooks'; +import { + useGetPackageInstallStatus, + useLink, + useStartServices, + useUIExtension, +} from '../../../../../hooks'; import type { AssetSavedObject } from './types'; import { allowedAssetTypes } from './constants'; @@ -27,9 +32,12 @@ interface AssetsPanelProps { export const AssetsPage = ({ packageInfo }: AssetsPanelProps) => { const { name, version } = packageInfo; + const pkgkey = `${name}-${version}`; + const { savedObjects: { client: savedObjectsClient }, } = useStartServices(); + const customAssetsExtension = useUIExtension(packageInfo.name, 'package-detail-assets'); const { getPath } = useLink(); const getPackageInstallStatus = useGetPackageInstallStatus(); @@ -76,13 +84,7 @@ export const AssetsPage = ({ packageInfo }: AssetsPanelProps) => { // if they arrive at this page and the package is not installed, send them to overview // this happens if they arrive with a direct url or they uninstall while on this tab if (packageInstallStatus.status !== InstallStatus.installed) { - return ( - <Redirect - to={getPath('integration_details_overview', { - pkgkey: `${name}-${version}`, - })} - /> - ); + return <Redirect to={getPath('integration_details_overview', { pkgkey })} />; } let content: JSX.Element | Array<JSX.Element | null>; @@ -102,31 +104,49 @@ export const AssetsPage = ({ packageInfo }: AssetsPanelProps) => { /> ); } else if (assetSavedObjects === undefined) { - content = ( - <EuiTitle> - <h2> - <FormattedMessage - id="xpack.fleet.epm.packageDetails.assets.noAssetsFoundLabel" - defaultMessage="No assets found" - /> - </h2> - </EuiTitle> - ); + if (customAssetsExtension) { + // If a UI extension for custom asset entries is defined, render the custom component here depisite + // there being no saved objects found + content = ( + <ExtensionWrapper> + <customAssetsExtension.Component /> + </ExtensionWrapper> + ); + } else { + content = ( + <EuiTitle> + <h2> + <FormattedMessage + id="xpack.fleet.epm.packageDetails.assets.noAssetsFoundLabel" + defaultMessage="No assets found" + /> + </h2> + </EuiTitle> + ); + } } else { - content = allowedAssetTypes.map((assetType) => { - const sectionAssetSavedObjects = assetSavedObjects.filter((so) => so.type === assetType); + content = [ + ...allowedAssetTypes.map((assetType) => { + const sectionAssetSavedObjects = assetSavedObjects.filter((so) => so.type === assetType); - if (!sectionAssetSavedObjects.length) { - return null; - } + if (!sectionAssetSavedObjects.length) { + return null; + } - return ( - <> - <AssetsAccordion savedObjects={sectionAssetSavedObjects} type={assetType} /> - <EuiSpacer size="l" /> - </> - ); - }); + return ( + <> + <AssetsAccordion savedObjects={sectionAssetSavedObjects} type={assetType} /> + <EuiSpacer size="l" /> + </> + ); + }), + // Ensure we add any custom assets provided via UI extension to the end of the list of other assets + customAssetsExtension ? ( + <ExtensionWrapper> + <customAssetsExtension.Component /> + </ExtensionWrapper> + ) : null, + ]; } return ( diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx index 12d4a0014b976..91c6b68c66221 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx @@ -55,6 +55,11 @@ export const AssetsAccordion: FunctionComponent<Props> = ({ savedObjects, type } <EuiSpacer size="m" /> <EuiSplitPanel.Outer hasBorder hasShadow={false}> {savedObjects.map(({ id, attributes: { title, description } }, idx) => { + // Ignore custom asset views + if (type === 'view') { + return; + } + const pathToObjectInApp = getHrefToObjectInKibanaApp({ http, id, diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/types.ts b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/types.ts index 21efd1cd562e8..26a6729be3623 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/types.ts +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/types.ts @@ -17,4 +17,4 @@ export type AllowedAssetTypes = [ KibanaAssetType.visualization ]; -export type AllowedAssetType = AllowedAssetTypes[number]; +export type AllowedAssetType = AllowedAssetTypes[number] | 'view'; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx index ef8d21236c670..b59804cea1733 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx @@ -18,16 +18,16 @@ interface Props { } export const CustomViewPage: React.FC<Props> = memo(({ packageInfo }) => { - const CustomView = useUIExtension(packageInfo.name, 'package-detail-custom'); + const customViewExtension = useUIExtension(packageInfo.name, 'package-detail-custom'); const { getPath } = useLink(); const pkgkey = useMemo(() => pkgKeyFromPackageInfo(packageInfo), [packageInfo]); - return CustomView ? ( + return customViewExtension ? ( <EuiFlexGroup alignItems="flexStart"> <EuiFlexItem grow={1} /> <EuiFlexItem grow={6}> <ExtensionWrapper> - <CustomView pkgkey={pkgkey} packageInfo={packageInfo} /> + <customViewExtension.Component pkgkey={pkgkey} packageInfo={packageInfo} /> </ExtensionWrapper> </EuiFlexItem> </EuiFlexGroup> diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx index 04253994d3875..f436c248abd3c 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx @@ -113,7 +113,7 @@ describe('when on integration detail', () => { }); }); - describe('and a custom UI extension is registered', () => { + describe('and a custom tab UI extension is registered', () => { // Because React Lazy components are loaded async (Promise), we setup this "watcher" Promise // that is `resolved` once the lazy components actually renders. let lazyComponentWasRendered: Promise<void>; @@ -136,7 +136,7 @@ describe('when on integration detail', () => { testRenderer.startInterface.registerExtension({ package: 'nginx', view: 'package-detail-custom', - component: CustomComponent, + Component: CustomComponent, }); render(); @@ -162,6 +162,53 @@ describe('when on integration detail', () => { }); }); + describe('and a custom assets UI extension is registered', () => { + let lazyComponentWasRendered: Promise<void>; + + beforeEach(() => { + let setWasRendered: () => void; + lazyComponentWasRendered = new Promise((resolve) => { + setWasRendered = resolve; + }); + + const CustomComponent = lazy(async () => { + return { + default: memo(() => { + setWasRendered(); + return <div data-test-subj="custom-hello">hello</div>; + }), + }; + }); + + testRenderer.startInterface.registerExtension({ + package: 'nginx', + view: 'package-detail-assets', + Component: CustomComponent, + }); + + render(); + }); + + afterEach(() => { + // @ts-ignore + lazyComponentWasRendered = undefined; + }); + + it('should display "assets" tab in navigation', () => { + expect(renderResult.getByTestId('tab-assets')); + }); + + it('should display custom assets when tab is clicked', async () => { + act(() => { + testRenderer.history.push( + pagePathGetters.integration_details_assets({ pkgkey: 'nginx-0.3.7' })[1] + ); + }); + await lazyComponentWasRendered; + expect(renderResult.getByTestId('custom-hello')); + }); + }); + describe('and the Add integration button is clicked', () => { beforeEach(() => render()); diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx index 2102c5055503b..21a139ad11baa 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx @@ -101,6 +101,8 @@ export function Detail() { const setPackageInstallStatus = useSetPackageInstallStatus(); const getPackageInstallStatus = useGetPackageInstallStatus(); + const CustomAssets = useUIExtension(packageInfo?.name ?? '', 'package-detail-assets'); + const packageInstallStatus = useMemo(() => { if (packageInfo === null || !packageInfo.name) { return undefined; @@ -418,7 +420,7 @@ export function Detail() { }); } - if (packageInstallStatus === InstallStatus.installed && packageInfo.assets) { + if (packageInstallStatus === InstallStatus.installed && (packageInfo.assets || CustomAssets)) { tabs.push({ id: 'assets', name: ( @@ -471,7 +473,7 @@ export function Detail() { } return tabs; - }, [packageInfo, panel, getHref, integration, packageInstallStatus, showCustomTab]); + }, [packageInfo, panel, getHref, integration, packageInstallStatus, showCustomTab, CustomAssets]); return ( <WithHeaderLayout diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx index c672abeb1c903..79eea3441643a 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx @@ -7,7 +7,11 @@ import { stringify, parse } from 'query-string'; import React, { memo, useCallback, useMemo, useState } from 'react'; import { Redirect, useLocation, useHistory } from 'react-router-dom'; -import type { CriteriaWithPagination, EuiTableFieldDataColumnType } from '@elastic/eui'; +import type { + CriteriaWithPagination, + EuiStepProps, + EuiTableFieldDataColumnType, +} from '@elastic/eui'; import { EuiButtonIcon, EuiBasicTable, @@ -29,6 +33,7 @@ import { useUrlPagination, useGetPackageInstallStatus, AgentPolicyRefreshContext, + useUIExtension, } from '../../../../../hooks'; import { PACKAGE_POLICY_SAVED_OBJECT_TYPE } from '../../../../../constants'; import { @@ -88,6 +93,8 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps kuery: `${PACKAGE_POLICY_SAVED_OBJECT_TYPE}.package.name: ${name}`, }); + const agentEnrollmentFlyoutExtension = useUIExtension(name, 'agent-enrollment-flyout'); + const handleTableOnChange = useCallback( ({ page }: CriteriaWithPagination<PackagePolicyAndAgentPolicy>) => { setPagination({ @@ -98,35 +105,46 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps [setPagination] ); - const renderViewDataStepContent = useCallback( - () => ( - <> - <EuiText> - <FormattedMessage - id="xpack.fleet.agentEnrollment.viewDataDescription" - defaultMessage="After your agent starts, you can view your data in Kibana by using the integration's installed assets. {pleaseNote}: it may take a few minutes for the initial data to arrive." - values={{ - pleaseNote: ( - <strong> - {i18n.translate( - 'xpack.fleet.epm.agentEnrollment.viewDataDescription.pleaseNoteLabel', - { defaultMessage: 'Please note' } - )} - </strong> - ), - }} - /> - </EuiText> - <EuiSpacer size="l" /> - <EuiButton href={getHref('integration_details_assets', { pkgkey: `${name}-${version}` })}> - {i18n.translate('xpack.fleet.epm.agentEnrollment.viewDataAssetsLabel', { - defaultMessage: 'View assets', - })} - </EuiButton> - </> - ), - [name, version, getHref] - ); + const viewDataStep = useMemo<EuiStepProps>(() => { + if (agentEnrollmentFlyoutExtension) { + return { + title: agentEnrollmentFlyoutExtension.title, + children: <agentEnrollmentFlyoutExtension.Component />, + }; + } + + return { + title: i18n.translate('xpack.fleet.agentEnrollment.stepViewDataTitle', { + defaultMessage: 'View your data', + }), + children: ( + <> + <EuiText> + <FormattedMessage + id="xpack.fleet.agentEnrollment.viewDataDescription" + defaultMessage="After your agent starts, you can view your data in Kibana by using the integration's installed assets. {pleaseNote}: it may take a few minutes for the initial data to arrive." + values={{ + pleaseNote: ( + <strong> + {i18n.translate( + 'xpack.fleet.epm.agentEnrollment.viewDataDescription.pleaseNoteLabel', + { defaultMessage: 'Please note' } + )} + </strong> + ), + }} + /> + </EuiText> + <EuiSpacer size="l" /> + <EuiButton href={getHref('integration_details_assets', { pkgkey: `${name}-${version}` })}> + {i18n.translate('xpack.fleet.epm.agentEnrollment.viewDataAssetsLabel', { + defaultMessage: 'View assets', + })} + </EuiButton> + </> + ), + }; + }, [name, version, getHref, agentEnrollmentFlyoutExtension]); const columns: Array<EuiTableFieldDataColumnType<PackagePolicyAndAgentPolicy>> = useMemo( () => [ @@ -230,13 +248,13 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps <PackagePolicyActionsMenu agentPolicy={agentPolicy} packagePolicy={packagePolicy} - viewDataStepContent={renderViewDataStepContent()} + viewDataStep={viewDataStep} /> ); }, }, ], - [renderViewDataStepContent] + [viewDataStep] ); const noItemsMessage = useMemo(() => { @@ -292,7 +310,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps data?.items.find(({ agentPolicy }) => agentPolicy.id === flyoutOpenForPolicyId) ?.agentPolicy } - viewDataStepContent={renderViewDataStepContent()} + viewDataStep={viewDataStep} /> )} </AgentPolicyRefreshContext.Provider> diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx index f6d62d45a4e56..f68b1b878c51c 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx @@ -21,7 +21,7 @@ import { FleetStatusProvider, ConfigContext } from '../../hooks'; import { useFleetServerInstructions } from '../../applications/fleet/sections/agents/agent_requirements_page/components'; -import { AgentEnrollmentKeySelectionStep, AgentPolicySelectionStep, ViewDataStep } from './steps'; +import { AgentEnrollmentKeySelectionStep, AgentPolicySelectionStep } from './steps'; import type { Props } from '.'; import { AgentEnrollmentFlyout } from '.'; @@ -129,24 +129,26 @@ describe('<AgentEnrollmentFlyout />', () => { }); }); - describe('"View data" extension point', () => { - it('calls the "View data" step when UI extension is provided', async () => { + // Skipped due to implementation details in the step components. See https://github.com/elastic/kibana/issues/103894 + describe.skip('"View data" extension point', () => { + it('shows the "View data" step when UI extension is provided', async () => { jest.clearAllMocks(); await act(async () => { testBed = await setup({ agentPolicies: [], onClose: jest.fn(), - viewDataStepContent: <div />, + viewDataStep: { title: 'View Data', children: <div /> }, }); testBed.component.update(); }); const { exists, actions } = testBed; expect(exists('agentEnrollmentFlyout')).toBe(true); - expect(ViewDataStep).toHaveBeenCalled(); + expect(exists('view-data-step')).toBe(true); jest.clearAllMocks(); actions.goToStandaloneTab(); - expect(ViewDataStep).not.toHaveBeenCalled(); + expect(exists('agentEnrollmentFlyout')).toBe(true); + expect(exists('view-data-step')).toBe(false); }); it('does not call the "View data" step when UI extension is not provided', async () => { @@ -155,17 +157,17 @@ describe('<AgentEnrollmentFlyout />', () => { testBed = await setup({ agentPolicies: [], onClose: jest.fn(), - viewDataStepContent: undefined, + viewDataStep: undefined, }); testBed.component.update(); }); const { exists, actions } = testBed; expect(exists('agentEnrollmentFlyout')).toBe(true); - expect(ViewDataStep).not.toHaveBeenCalled(); + expect(exists('view-data-step')).toBe(false); jest.clearAllMocks(); actions.goToStandaloneTab(); - expect(ViewDataStep).not.toHaveBeenCalled(); + expect(exists('view-data-step')).toBe(false); }); }); }); diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx index 08d78154941e9..9b82b2a80b5e1 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx @@ -45,7 +45,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({ onClose, agentPolicy, agentPolicies, - viewDataStepContent, + viewDataStep, defaultMode = 'managed', }) => { const [mode, setMode] = useState<FlyoutMode>(defaultMode); @@ -119,14 +119,10 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({ <ManagedInstructions agentPolicy={agentPolicy} agentPolicies={agentPolicies} - viewDataStepContent={viewDataStepContent} + viewDataStep={viewDataStep} /> ) : ( - <StandaloneInstructions - agentPolicy={agentPolicy} - agentPolicies={agentPolicies} - viewDataStepContent={viewDataStepContent} - /> + <StandaloneInstructions agentPolicy={agentPolicy} agentPolicies={agentPolicies} /> )} </EuiFlyoutBody> <EuiFlyoutFooter> diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx index c739725b79739..61f86335cd7f9 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx @@ -23,12 +23,7 @@ import { } from '../../applications/fleet/sections/agents/agent_requirements_page/components'; import { FleetServerRequirementPage } from '../../applications/fleet/sections/agents/agent_requirements_page'; -import { - DownloadStep, - AgentPolicySelectionStep, - AgentEnrollmentKeySelectionStep, - ViewDataStep, -} from './steps'; +import { DownloadStep, AgentPolicySelectionStep, AgentEnrollmentKeySelectionStep } from './steps'; import type { BaseProps } from './types'; type Props = BaseProps; @@ -61,7 +56,7 @@ const FleetServerMissingRequirements = () => { }; export const ManagedInstructions = React.memo<Props>( - ({ agentPolicy, agentPolicies, viewDataStepContent }) => { + ({ agentPolicy, agentPolicies, viewDataStep }) => { const fleetStatus = useFleetStatus(); const [selectedApiKeyId, setSelectedAPIKeyId] = useState<string | undefined>(); @@ -118,8 +113,8 @@ export const ManagedInstructions = React.memo<Props>( }); } - if (viewDataStepContent) { - baseSteps.push(ViewDataStep(viewDataStepContent)); + if (viewDataStep) { + baseSteps.push({ 'data-test-subj': 'view-data-step', ...viewDataStep }); } return baseSteps; @@ -127,12 +122,12 @@ export const ManagedInstructions = React.memo<Props>( agentPolicy, selectedApiKeyId, setSelectedAPIKeyId, - viewDataStepContent, agentPolicies, apiKey.data, fleetServerSteps, isFleetServerPolicySelected, settings.data?.item?.fleet_server_hosts, + viewDataStep, ]); return ( diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx index f77cba754e909..8eeb5fac4b0df 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx @@ -144,16 +144,3 @@ export const AgentEnrollmentKeySelectionStep = ({ ), }; }; - -/** - * Send users to assets installed by the package in Kibana so they can - * view their data. - */ -export const ViewDataStep = (content: JSX.Element) => { - return { - title: i18n.translate('xpack.fleet.agentEnrollment.stepViewDataTitle', { - defaultMessage: 'View your data', - }), - children: content, - }; -}; diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts index e0c5b040a61fb..9ee514c634655 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts @@ -5,6 +5,8 @@ * 2.0. */ +import type { EuiStepProps } from '@elastic/eui'; + import type { AgentPolicy } from '../../types'; export interface BaseProps { @@ -24,5 +26,5 @@ export interface BaseProps { * There is a step in the agent enrollment process that allows users to see the data from an integration represented in the UI * in some way. This is an area for consumers to render a button and text explaining how data can be viewed. */ - viewDataStepContent?: JSX.Element; + viewDataStep?: EuiStepProps; } diff --git a/x-pack/plugins/fleet/public/components/custom_assets_accordion.tsx b/x-pack/plugins/fleet/public/components/custom_assets_accordion.tsx new file mode 100644 index 0000000000000..f4dd3a7deaaab --- /dev/null +++ b/x-pack/plugins/fleet/public/components/custom_assets_accordion.tsx @@ -0,0 +1,86 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import { + EuiAccordion, + EuiFlexGroup, + EuiFlexItem, + EuiText, + EuiNotificationBadge, + EuiSpacer, + EuiSplitPanel, + EuiLink, + EuiHorizontalRule, +} from '@elastic/eui'; + +import { AssetTitleMap } from '../applications/integrations/sections/epm/constants'; +import { useStartServices } from '../hooks'; +import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public'; + +export interface CustomAssetsAccordionProps { + views: Array<{ + name: string; + url: string; + description: string; + }>; + initialIsOpen?: boolean; +} + +export const CustomAssetsAccordion: FunctionComponent<CustomAssetsAccordionProps> = ({ + views, + initialIsOpen = false, +}) => { + const { application } = useStartServices(); + + return ( + <EuiAccordion + initialIsOpen={initialIsOpen} + buttonContent={ + <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="s" responsive={false}> + <EuiFlexItem grow={false}> + <EuiText size="m"> + <h3>{AssetTitleMap.view}</h3> + </EuiText> + </EuiFlexItem> + <EuiFlexItem grow={false}> + <EuiNotificationBadge color="subdued" size="m"> + <h3>{views.length}</h3> + </EuiNotificationBadge> + </EuiFlexItem> + </EuiFlexGroup> + } + id="custom-assets" + > + <> + <EuiSpacer size="m" /> + <EuiSplitPanel.Outer hasBorder hasShadow={false}> + {views.map((view, index) => ( + <> + <EuiSplitPanel.Inner grow={false} key={index}> + <EuiText size="m"> + <p> + <RedirectAppLinks application={application}> + <EuiLink href={view.url}>{view.name}</EuiLink> + </RedirectAppLinks> + </p> + </EuiText> + + <EuiSpacer size="s" /> + <EuiText size="s" color="subdued"> + <p>{view.description}</p> + </EuiText> + </EuiSplitPanel.Inner> + {index + 1 < views.length && <EuiHorizontalRule margin="none" />} + </> + ))} + </EuiSplitPanel.Outer> + </> + </EuiAccordion> + ); +}; diff --git a/x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx b/x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx index 1f64de27fce39..9743135d5f1c1 100644 --- a/x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx +++ b/x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx @@ -7,6 +7,7 @@ import React, { useMemo, useState } from 'react'; import { EuiContextMenuItem, EuiPortal } from '@elastic/eui'; +import type { EuiStepProps } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import type { AgentPolicy, PackagePolicy } from '../types'; @@ -21,8 +22,8 @@ import { PackagePolicyDeleteProvider } from './package_policy_delete_provider'; export const PackagePolicyActionsMenu: React.FunctionComponent<{ agentPolicy: AgentPolicy; packagePolicy: PackagePolicy; - viewDataStepContent?: JSX.Element; -}> = ({ agentPolicy, packagePolicy, viewDataStepContent }) => { + viewDataStep?: EuiStepProps; +}> = ({ agentPolicy, packagePolicy, viewDataStep }) => { const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState(false); const { getHref } = useLink(); const hasWriteCapabilities = useCapabilities().write; @@ -106,7 +107,7 @@ export const PackagePolicyActionsMenu: React.FunctionComponent<{ <EuiPortal> <AgentEnrollmentFlyout agentPolicy={agentPolicy} - viewDataStepContent={viewDataStepContent} + viewDataStep={viewDataStep} onClose={onEnrollmentFlyoutClose} /> </EuiPortal> diff --git a/x-pack/plugins/fleet/public/constants/index.ts b/x-pack/plugins/fleet/public/constants/index.ts index a7cc2726eace1..a0e88bc58726a 100644 --- a/x-pack/plugins/fleet/public/constants/index.ts +++ b/x-pack/plugins/fleet/public/constants/index.ts @@ -24,3 +24,5 @@ export { export * from './page_paths'; export const INDEX_NAME = '.kibana'; + +export const CUSTOM_LOGS_INTEGRATION_NAME = 'log'; diff --git a/x-pack/plugins/fleet/public/custom_logs_assets_extension.tsx b/x-pack/plugins/fleet/public/custom_logs_assets_extension.tsx new file mode 100644 index 0000000000000..4090c4520bf2a --- /dev/null +++ b/x-pack/plugins/fleet/public/custom_logs_assets_extension.tsx @@ -0,0 +1,31 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 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 { CustomAssetsAccordion } from './components/custom_assets_accordion'; +import type { CustomAssetsAccordionProps } from './components/custom_assets_accordion'; +import { useStartServices } from './hooks'; +import type { PackageAssetsComponent } from './types'; + +export const CustomLogsAssetsExtension: PackageAssetsComponent = () => { + const { http } = useStartServices(); + const logStreamUrl = http.basePath.prepend('/app/logs/stream'); + + const views: CustomAssetsAccordionProps['views'] = [ + { + name: i18n.translate('xpack.fleet.assets.customLogs.name', { defaultMessage: 'Logs' }), + url: logStreamUrl, + description: i18n.translate('xpack.fleet.assets.customLogs.description', { + defaultMessage: 'View Custom logs data in Logs app', + }), + }, + ]; + + return <CustomAssetsAccordion views={views} initialIsOpen />; +}; diff --git a/x-pack/plugins/fleet/public/hooks/use_ui_extension.ts b/x-pack/plugins/fleet/public/hooks/use_ui_extension.ts index 3880a08a7ec03..93e316be241cb 100644 --- a/x-pack/plugins/fleet/public/hooks/use_ui_extension.ts +++ b/x-pack/plugins/fleet/public/hooks/use_ui_extension.ts @@ -20,7 +20,7 @@ type NarrowExtensionPoint<V extends UIExtensionPoint['view'], A = UIExtensionPoi export const useUIExtension = <V extends UIExtensionPoint['view'] = UIExtensionPoint['view']>( packageName: UIExtensionPoint['package'], view: V -): NarrowExtensionPoint<V>['component'] | undefined => { +): NarrowExtensionPoint<V> | undefined => { const registeredExtensions = useContext(UIExtensionsContext); if (!registeredExtensions) { @@ -32,6 +32,6 @@ export const useUIExtension = <V extends UIExtensionPoint['view'] = UIExtensionP if (extension) { // FIXME:PT Revisit ignore below and see if TS error can be addressed // @ts-ignore - return extension.component; + return extension; } }; diff --git a/x-pack/plugins/fleet/public/index.ts b/x-pack/plugins/fleet/public/index.ts index f563f008dbeb6..585dc70ce2c42 100644 --- a/x-pack/plugins/fleet/public/index.ts +++ b/x-pack/plugins/fleet/public/index.ts @@ -21,3 +21,7 @@ export * from './types/ui_extensions'; export { pagePathGetters } from './constants'; export { pkgKeyFromPackageInfo } from './services'; +export { + CustomAssetsAccordion, + CustomAssetsAccordionProps, +} from './components/custom_assets_accordion'; diff --git a/x-pack/plugins/fleet/public/lazy_custom_logs_assets_extension.tsx b/x-pack/plugins/fleet/public/lazy_custom_logs_assets_extension.tsx new file mode 100644 index 0000000000000..984532250a84f --- /dev/null +++ b/x-pack/plugins/fleet/public/lazy_custom_logs_assets_extension.tsx @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { lazy } from 'react'; + +import type { PackageAssetsComponent } from './types'; +import { CustomLogsAssetsExtension } from './custom_logs_assets_extension'; + +export const LazyCustomLogsAssetsExtension = lazy<PackageAssetsComponent>(async () => { + return { + default: CustomLogsAssetsExtension, + }; +}); diff --git a/x-pack/plugins/fleet/public/plugin.ts b/x-pack/plugins/fleet/public/plugin.ts index c092d5914637c..9b3aefa488f7b 100644 --- a/x-pack/plugins/fleet/public/plugin.ts +++ b/x-pack/plugins/fleet/public/plugin.ts @@ -32,7 +32,7 @@ import type { CheckPermissionsResponse, PostIngestSetupResponse } from '../commo import type { FleetConfigType } from '../common/types'; -import { FLEET_BASE_PATH } from './constants'; +import { CUSTOM_LOGS_INTEGRATION_NAME, FLEET_BASE_PATH } from './constants'; import { licenseService } from './hooks'; import { setHttpClient } from './hooks/use_request'; import { createPackageSearchProvider } from './search_provider'; @@ -43,6 +43,7 @@ import { } from './components/home_integration'; import { createExtensionRegistrationCallback } from './services/ui_extensions'; import type { UIExtensionRegistrationCallback, UIExtensionsStorage } from './types'; +import { LazyCustomLogsAssetsExtension } from './lazy_custom_logs_assets_extension'; export { FleetConfigType } from '../common/types'; @@ -204,6 +205,13 @@ export class FleetPlugin implements Plugin<FleetSetup, FleetStart, FleetSetupDep public start(core: CoreStart): FleetStart { let successPromise: ReturnType<FleetStart['isInitialized']>; + const registerExtension = createExtensionRegistrationCallback(this.extensions); + + registerExtension({ + package: CUSTOM_LOGS_INTEGRATION_NAME, + view: 'package-detail-assets', + Component: LazyCustomLogsAssetsExtension, + }); return { isInitialized: () => { @@ -229,8 +237,7 @@ export class FleetPlugin implements Plugin<FleetSetup, FleetStart, FleetSetupDep return successPromise; }, - - registerExtension: createExtensionRegistrationCallback(this.extensions), + registerExtension, }; } diff --git a/x-pack/plugins/fleet/public/services/ui_extensions.test.ts b/x-pack/plugins/fleet/public/services/ui_extensions.test.ts index 1ca135538d2d2..d23219c1f653b 100644 --- a/x-pack/plugins/fleet/public/services/ui_extensions.test.ts +++ b/x-pack/plugins/fleet/public/services/ui_extensions.test.ts @@ -36,13 +36,13 @@ describe('UI Extension services', () => { register({ view: 'package-policy-edit', package: 'endpoint', - component: LazyCustomView, + Component: LazyCustomView, }); expect(storage.endpoint['package-policy-edit']).toEqual({ view: 'package-policy-edit', package: 'endpoint', - component: LazyCustomView, + Component: LazyCustomView, }); }); @@ -57,21 +57,21 @@ describe('UI Extension services', () => { register({ view: 'package-policy-edit', package: 'endpoint', - component: LazyCustomView, + Component: LazyCustomView, }); expect(() => { register({ view: 'package-policy-edit', package: 'endpoint', - component: LazyCustomView2, + Component: LazyCustomView2, }); }).toThrow(); expect(storage.endpoint['package-policy-edit']).toEqual({ view: 'package-policy-edit', package: 'endpoint', - component: LazyCustomView, + Component: LazyCustomView, }); }); }); diff --git a/x-pack/plugins/fleet/public/types/ui_extensions.ts b/x-pack/plugins/fleet/public/types/ui_extensions.ts index c79b676a26b33..bc692fe1caa7d 100644 --- a/x-pack/plugins/fleet/public/types/ui_extensions.ts +++ b/x-pack/plugins/fleet/public/types/ui_extensions.ts @@ -5,6 +5,7 @@ * 2.0. */ +import type { EuiStepProps } from '@elastic/eui'; import type { ComponentType, LazyExoticComponent } from 'react'; import type { NewPackagePolicy, PackageInfo, PackagePolicy } from './index'; @@ -48,7 +49,7 @@ export interface PackagePolicyEditExtensionComponentProps { export interface PackagePolicyEditExtension { package: string; view: 'package-policy-edit'; - component: LazyExoticComponent<PackagePolicyEditExtensionComponent>; + Component: LazyExoticComponent<PackagePolicyEditExtensionComponent>; } /** @@ -76,7 +77,7 @@ export interface PackagePolicyCreateExtensionComponentProps { export interface PackagePolicyCreateExtension { package: string; view: 'package-policy-create'; - component: LazyExoticComponent<PackagePolicyCreateExtensionComponent>; + Component: LazyExoticComponent<PackagePolicyCreateExtensionComponent>; } /** @@ -94,11 +95,32 @@ export interface PackageCustomExtensionComponentProps { export interface PackageCustomExtension { package: string; view: 'package-detail-custom'; - component: LazyExoticComponent<PackageCustomExtensionComponent>; + Component: LazyExoticComponent<PackageCustomExtensionComponent>; +} + +/** + * UI Component Extension for displaying custom views under the Assets tab for a given Integration + */ +export type PackageAssetsComponent = ComponentType<{}>; + +/** Extension point registration contract for Integration details Assets view */ +export interface PackageAssetsExtension { + package: string; + view: 'package-detail-assets'; + Component: LazyExoticComponent<PackageAssetsComponent>; +} + +export interface AgentEnrollmentFlyoutFinalStepExtension { + package: string; + view: 'agent-enrollment-flyout'; + title: EuiStepProps['title']; + Component: ComponentType<{}>; } /** Fleet UI Extension Point */ export type UIExtensionPoint = | PackagePolicyEditExtension | PackageCustomExtension - | PackagePolicyCreateExtension; + | PackagePolicyCreateExtension + | PackageAssetsExtension + | AgentEnrollmentFlyoutFinalStepExtension; diff --git a/x-pack/plugins/index_management/server/lib/fetch_indices.ts b/x-pack/plugins/index_management/server/lib/fetch_indices.ts index a6f499ede9038..b83843f0c615d 100644 --- a/x-pack/plugins/index_management/server/lib/fetch_indices.ts +++ b/x-pack/plugins/index_management/server/lib/fetch_indices.ts @@ -76,26 +76,33 @@ async function fetchIndicesCall( query: catQuery, }); - // The two responses should be equal in the number of indices returned - return catHits.map((hit) => { + // System indices may show up in _cat APIs, as these APIs are primarily used for troubleshooting + // For now, we filter them out and only return index information for the indices we have + // In the future, we should migrate away from using cat APIs (https://github.com/elastic/kibana/issues/57286) + return catHits.reduce((decoratedIndices, hit) => { const index = indices[hit.index]; - const aliases = Object.keys(index.aliases); - return { - health: hit.health, - status: hit.status, - name: hit.index, - uuid: hit.uuid, - primary: hit.pri, - replica: hit.rep, - documents: hit['docs.count'], - size: hit['store.size'], - isFrozen: hit.sth === 'true', // sth value coming back as a string from ES - aliases: aliases.length ? aliases : 'none', - hidden: index.settings.index.hidden === 'true', - data_stream: index.data_stream, - }; - }); + if (typeof index !== 'undefined') { + const aliases = Object.keys(index.aliases); + + decoratedIndices.push({ + health: hit.health, + status: hit.status, + name: hit.index, + uuid: hit.uuid, + primary: hit.pri, + replica: hit.rep, + documents: hit['docs.count'], + size: hit['store.size'], + isFrozen: hit.sth === 'true', // sth value coming back as a string from ES + aliases: aliases.length ? aliases : 'none', + hidden: index.settings.index.hidden === 'true', + data_stream: index.data_stream, + }); + } + + return decoratedIndices; + }, [] as Index[]); } export const fetchIndices = async ( diff --git a/x-pack/plugins/infra/common/constants.ts b/x-pack/plugins/infra/common/constants.ts index 5361434302a7d..9362293fce82f 100644 --- a/x-pack/plugins/infra/common/constants.ts +++ b/x-pack/plugins/infra/common/constants.ts @@ -9,3 +9,5 @@ export const DEFAULT_SOURCE_ID = 'default'; export const METRICS_INDEX_PATTERN = 'metrics-*,metricbeat-*'; export const LOGS_INDEX_PATTERN = 'logs-*,filebeat-*,kibana_sample_data_logs*'; export const TIMESTAMP_FIELD = '@timestamp'; +export const METRICS_APP = 'metrics'; +export const LOGS_APP = 'logs'; diff --git a/x-pack/plugins/infra/public/components/header/header.tsx b/x-pack/plugins/infra/public/components/header/header.tsx deleted file mode 100644 index 6196a0b117879..0000000000000 --- a/x-pack/plugins/infra/public/components/header/header.tsx +++ /dev/null @@ -1,56 +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 { useCallback, useEffect } from 'react'; -import { i18n } from '@kbn/i18n'; -import { ChromeBreadcrumb } from 'src/core/public'; -import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; - -interface HeaderProps { - breadcrumbs?: ChromeBreadcrumb[]; - readOnlyBadge?: boolean; -} - -export const Header = ({ breadcrumbs = [], readOnlyBadge = false }: HeaderProps) => { - const chrome = useKibana().services.chrome; - - // eslint-disable-next-line react-hooks/exhaustive-deps - const badge = readOnlyBadge - ? { - text: i18n.translate('xpack.infra.header.badge.readOnly.text', { - defaultMessage: 'Read only', - }), - tooltip: i18n.translate('xpack.infra.header.badge.readOnly.tooltip', { - defaultMessage: 'Unable to change source configuration', - }), - iconType: 'glasses', - } - : undefined; - - const setBreadcrumbs = useCallback(() => { - return chrome?.setBreadcrumbs(breadcrumbs || []); - }, [breadcrumbs, chrome]); - - const setBadge = useCallback(() => { - return chrome?.setBadge(badge); - }, [badge, chrome]); - - useEffect(() => { - setBreadcrumbs(); - setBadge(); - }, [setBreadcrumbs, setBadge]); - - useEffect(() => { - setBreadcrumbs(); - }, [breadcrumbs, setBreadcrumbs]); - - useEffect(() => { - setBadge(); - }, [badge, setBadge]); - - return null; -}; diff --git a/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts b/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts new file mode 100644 index 0000000000000..32127f21b75f5 --- /dev/null +++ b/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts @@ -0,0 +1,37 @@ +/* + * 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 { ChromeBreadcrumb } from 'kibana/public'; +import { useEffect } from 'react'; +import { observabilityTitle } from '../translations'; +import { useKibanaContextForPlugin } from './use_kibana'; +import { useLinkProps } from './use_link_props'; + +type AppId = 'logs' | 'metrics'; + +export const useBreadcrumbs = (app: AppId, appTitle: string, extraCrumbs: ChromeBreadcrumb[]) => { + const { + services: { chrome }, + } = useKibanaContextForPlugin(); + + const observabilityLinkProps = useLinkProps({ app: 'observability-overview' }); + const appLinkProps = useLinkProps({ app }); + + useEffect(() => { + chrome?.setBreadcrumbs?.([ + { + ...observabilityLinkProps, + text: observabilityTitle, + }, + { + ...appLinkProps, + text: appTitle, + }, + ...extraCrumbs, + ]); + }, [appLinkProps, appTitle, chrome, extraCrumbs, observabilityLinkProps]); +}; diff --git a/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx b/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx new file mode 100644 index 0000000000000..e00e5b4818ba6 --- /dev/null +++ b/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { ChromeBreadcrumb } from 'kibana/public'; +import { useBreadcrumbs } from './use_breadcrumbs'; +import { LOGS_APP } from '../../common/constants'; +import { logsTitle } from '../translations'; + +export const useLogsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => { + useBreadcrumbs(LOGS_APP, logsTitle, extraCrumbs); +}; diff --git a/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx b/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx new file mode 100644 index 0000000000000..e55f65a97b63e --- /dev/null +++ b/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { ChromeBreadcrumb } from 'kibana/public'; +import { useBreadcrumbs } from './use_breadcrumbs'; +import { METRICS_APP } from '../../common/constants'; +import { metricsTitle } from '../translations'; + +export const useMetricsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => { + useBreadcrumbs(METRICS_APP, metricsTitle, extraCrumbs); +}; diff --git a/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx b/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx new file mode 100644 index 0000000000000..a0b0558e0393d --- /dev/null +++ b/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx @@ -0,0 +1,32 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useEffect } from 'react'; +import { i18n } from '@kbn/i18n'; +import { useKibana } from '../../../../../src/plugins/kibana_react/public'; + +export const useReadOnlyBadge = (isReadOnly = false) => { + const chrome = useKibana().services.chrome; + + useEffect(() => { + chrome?.setBadge( + isReadOnly + ? { + text: i18n.translate('xpack.infra.header.badge.readOnly.text', { + defaultMessage: 'Read only', + }), + tooltip: i18n.translate('xpack.infra.header.badge.readOnly.tooltip', { + defaultMessage: 'Unable to change source configuration', + }), + iconType: 'glasses', + } + : undefined + ); + }, [chrome, isReadOnly]); + + return null; +}; diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/x-pack/plugins/infra/public/pages/error.tsx index 6b6eaf98b1db6..18cb2a14a9214 100644 --- a/x-pack/plugins/infra/public/pages/error.tsx +++ b/x-pack/plugins/infra/public/pages/error.tsx @@ -18,7 +18,6 @@ import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { euiStyled } from '../../../../../src/plugins/kibana_react/common'; -import { Header } from '../components/header'; import { ColumnarPage, PageContent } from '../components/page'; const DetailPageContent = euiStyled(PageContent)` @@ -33,7 +32,6 @@ interface Props { export const Error: React.FC<Props> = ({ message }) => { return ( <ColumnarPage> - <Header /> <DetailPageContent> <ErrorPageBody message={message} /> </DetailPageContent> diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx index 64dbcbdfe2258..34634b194cb85 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx @@ -7,10 +7,18 @@ import { EuiErrorBoundary } from '@elastic/eui'; import React from 'react'; +import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs'; import { LogEntryCategoriesPageContent } from './page_content'; import { LogEntryCategoriesPageProviders } from './page_providers'; +import { logCategoriesTitle } from '../../../translations'; export const LogEntryCategoriesPage = () => { + useLogsBreadcrumbs([ + { + text: logCategoriesTitle, + }, + ]); + return ( <EuiErrorBoundary> <LogEntryCategoriesPageProviders> diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx index ff4cba731b616..94950b24b1a94 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx @@ -9,8 +9,15 @@ import { EuiErrorBoundary } from '@elastic/eui'; import React from 'react'; import { LogEntryRatePageContent } from './page_content'; import { LogEntryRatePageProviders } from './page_providers'; +import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs'; +import { anomaliesTitle } from '../../../translations'; export const LogEntryRatePage = () => { + useLogsBreadcrumbs([ + { + text: anomaliesTitle, + }, + ]); return ( <EuiErrorBoundary> <LogEntryRatePageProviders> diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx index c7b145b4b0143..8175a95f6a064 100644 --- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx +++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx @@ -14,7 +14,6 @@ import useMount from 'react-use/lib/useMount'; import { AlertDropdown } from '../../alerting/log_threshold'; import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; import { DocumentTitle } from '../../components/document_title'; -import { Header } from '../../components/header'; import { HelpCenterContent } from '../../components/help_center_content'; import { useLogSourceContext } from '../../containers/logs/log_source'; import { RedirectWithQueryParams } from '../../utils/redirect_with_query_params'; @@ -25,6 +24,7 @@ import { StreamPage } from './stream'; import { HeaderMenuPortal } from '../../../../observability/public'; import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider'; import { useLinkProps } from '../../hooks/use_link_props'; +import { useReadOnlyBadge } from '../../hooks/use_readonly_badge'; export const LogsPageContent: React.FunctionComponent = () => { const uiCapabilities = useKibana().services.application?.capabilities; @@ -34,6 +34,8 @@ export const LogsPageContent: React.FunctionComponent = () => { const kibana = useKibana(); + useReadOnlyBadge(!uiCapabilities?.logs?.save); + useMount(() => { initialize(); }); @@ -101,14 +103,6 @@ export const LogsPageContent: React.FunctionComponent = () => { </HeaderMenuPortal> )} - <Header - breadcrumbs={[ - { - text: pageTitle, - }, - ]} - readOnlyBadge={!uiCapabilities?.logs?.save} - /> <Switch> <Route path={streamTab.pathname} component={StreamPage} /> <Route path={anomaliesTab.pathname} component={LogEntryRatePage} /> diff --git a/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx b/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx index 180949572b086..a765cf074271c 100644 --- a/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx +++ b/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx @@ -18,6 +18,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import React, { useCallback, useMemo } from 'react'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { useTrackPageview } from '../../../../../observability/public'; +import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs'; import { SourceLoadingPage } from '../../../components/source_loading_page'; import { useLogSourceContext } from '../../../containers/logs/log_source'; import { Prompt } from '../../../utils/navigation_warning_prompt'; @@ -27,10 +28,7 @@ import { NameConfigurationPanel } from './name_configuration_panel'; import { LogSourceConfigurationFormErrors } from './source_configuration_form_errors'; import { useLogSourceConfigurationFormState } from './source_configuration_form_state'; import { LogsPageTemplate } from '../page_template'; - -const settingsTitle = i18n.translate('xpack.infra.logs.settingsTitle', { - defaultMessage: 'Settings', -}); +import { settingsTitle } from '../../../translations'; export const LogsSettingsPage = () => { const uiCapabilities = useKibana().services.application?.capabilities; @@ -43,6 +41,12 @@ export const LogsSettingsPage = () => { delay: 15000, }); + useLogsBreadcrumbs([ + { + text: settingsTitle, + }, + ]); + const { sourceConfiguration: source, hasFailedLoadingSource, diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page.tsx index 99b66d2d4ab7b..2ac307570cc97 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page.tsx @@ -8,13 +8,21 @@ import { EuiErrorBoundary } from '@elastic/eui'; import React from 'react'; import { useTrackPageview } from '../../../../../observability/public'; +import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs'; import { StreamPageContent } from './page_content'; import { StreamPageHeader } from './page_header'; import { LogsPageProviders } from './page_providers'; +import { streamTitle } from '../../../translations'; export const StreamPage = () => { useTrackPageview({ app: 'infra_logs', path: 'stream' }); useTrackPageview({ app: 'infra_logs', path: 'stream', delay: 15000 }); + + useLogsBreadcrumbs([ + { + text: streamTitle, + }, + ]); return ( <EuiErrorBoundary> <LogsPageProviders> diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx index e52d1e90d7efd..045fcb57ae943 100644 --- a/x-pack/plugins/infra/public/pages/metrics/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx @@ -15,7 +15,7 @@ import { IIndexPattern } from 'src/plugins/data/common'; import { MetricsSourceConfigurationProperties } from '../../../common/metrics_sources'; import { DocumentTitle } from '../../components/document_title'; import { HelpCenterContent } from '../../components/help_center_content'; -import { Header } from '../../components/header'; +import { useReadOnlyBadge } from '../../hooks/use_readonly_badge'; import { MetricsExplorerOptionsContainer, DEFAULT_METRICS_EXPLORER_VIEW_STATE, @@ -56,6 +56,8 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => { const kibana = useKibana(); + useReadOnlyBadge(!uiCapabilities?.infrastructure?.save); + const settingsLinkProps = useLinkProps({ app: 'metrics', pathname: 'settings', @@ -111,17 +113,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => { </EuiFlexGroup> </HeaderMenuPortal> )} - - <Header - breadcrumbs={[ - { - text: i18n.translate('xpack.infra.header.infrastructureTitle', { - defaultMessage: 'Metrics', - }), - }, - ]} - readOnlyBadge={!uiCapabilities?.infrastructure?.save} - /> <Switch> <Route path={'/inventory'} component={SnapshotPage} /> <Route diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx index 4fb4b4d4eb0a6..9671699dadbad 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx @@ -8,7 +8,6 @@ import { EuiButton, EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useContext } from 'react'; - import { FilterBar } from './components/filter_bar'; import { DocumentTitle } from '../../../components/document_title'; @@ -19,6 +18,7 @@ import { SourceLoadingPage } from '../../../components/source_loading_page'; import { ViewSourceConfigurationButton } from '../../../components/source_configuration/view_source_configuration_button'; import { Source } from '../../../containers/metrics_source'; import { useTrackPageview } from '../../../../../observability/public'; +import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { LayoutView } from './components/layout_view'; import { useLinkProps } from '../../../hooks/use_link_props'; @@ -28,10 +28,7 @@ import { useWaffleOptionsContext } from './hooks/use_waffle_options'; import { MetricsPageTemplate } from '../page_template'; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; import { APP_WRAPPER_CLASS } from '../../../../../../../src/core/public'; - -const inventoryTitle = i18n.translate('xpack.infra.metrics.inventoryPageTitle', { - defaultMessage: 'Inventory', -}); +import { inventoryTitle } from '../../../translations'; export const SnapshotPage = () => { const uiCapabilities = useKibana().services.application?.capabilities; @@ -52,6 +49,12 @@ export const SnapshotPage = () => { hash: '/tutorial_directory/metrics', }); + useMetricsBreadcrumbs([ + { + text: inventoryTitle, + }, + ]); + return ( <EuiErrorBoundary> <DocumentTitle diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx index a447989530727..7ec43ef64f4a0 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx @@ -9,19 +9,19 @@ import { i18n } from '@kbn/i18n'; import React, { useContext, useState } from 'react'; import { EuiTheme, withTheme } from '../../../../../../../src/plugins/kibana_react/common'; import { DocumentTitle } from '../../../components/document_title'; -import { Header } from '../../../components/header'; import { withMetricPageProviders } from './page_providers'; import { useMetadata } from './hooks/use_metadata'; +import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs'; import { Source } from '../../../containers/metrics_source'; import { InfraLoadingPanel } from '../../../components/loading'; import { findInventoryModel } from '../../../../common/inventory_models'; import { NavItem } from './lib/side_nav_context'; import { NodeDetailsPage } from './components/node_details_page'; -import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { InventoryItemType } from '../../../../common/inventory_models/types'; import { useMetricsTimeContext } from './hooks/use_metrics_time'; import { useLinkProps } from '../../../hooks/use_link_props'; import { MetricsPageTemplate } from '../page_template'; +import { inventoryTitle } from '../../../translations'; interface Props { theme: EuiTheme | undefined; @@ -35,7 +35,6 @@ interface Props { export const MetricDetail = withMetricPageProviders( withTheme(({ match }: Props) => { - const uiCapabilities = useKibana().services.application?.capabilities; const nodeId = match.params.node; const nodeType = match.params.type as InventoryItemType; const inventoryModel = findInventoryModel(nodeType); @@ -70,20 +69,20 @@ export const MetricDetail = withMetricPageProviders( [sideNav] ); - const metricsLinkProps = useLinkProps({ + const inventoryLinkProps = useLinkProps({ app: 'metrics', - pathname: '/', + pathname: '/inventory', }); - const breadcrumbs = [ + useMetricsBreadcrumbs([ { - ...metricsLinkProps, - text: i18n.translate('xpack.infra.header.infrastructureTitle', { - defaultMessage: 'Metrics', - }), + ...inventoryLinkProps, + text: inventoryTitle, }, - { text: name }, - ]; + { + text: name, + }, + ]); if (metadataLoading && !filteredRequiredMetrics.length) { return ( @@ -101,7 +100,6 @@ export const MetricDetail = withMetricPageProviders( return ( <> - <Header breadcrumbs={breadcrumbs} readOnlyBadge={!uiCapabilities?.infrastructure?.save} /> <DocumentTitle title={i18n.translate('xpack.infra.metricDetailPage.documentTitle', { defaultMessage: 'Infrastructure | Metrics | {name}', diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx index 1ecadcac4e287..28e56c8337bf8 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx @@ -11,6 +11,8 @@ import React, { useEffect } from 'react'; import { IIndexPattern } from 'src/plugins/data/public'; import { MetricsSourceConfigurationProperties } from '../../../../common/metrics_sources'; import { useTrackPageview } from '../../../../../observability/public'; +import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs'; + import { DocumentTitle } from '../../../components/document_title'; import { NoData } from '../../../components/empty_states'; import { MetricsExplorerCharts } from './components/charts'; @@ -18,16 +20,13 @@ import { MetricsExplorerToolbar } from './components/toolbar'; import { useMetricsExplorerState } from './hooks/use_metric_explorer_state'; import { useSavedViewContext } from '../../../containers/saved_view/saved_view'; import { MetricsPageTemplate } from '../page_template'; +import { metricsExplorerTitle } from '../../../translations'; interface MetricsExplorerPageProps { source: MetricsSourceConfigurationProperties; derivedIndexPattern: IIndexPattern; } -const metricsExplorerTitle = i18n.translate('xpack.infra.metrics.metricsExplorerTitle', { - defaultMessage: 'Metrics Explorer', -}); - export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExplorerPageProps) => { const { loading, @@ -66,6 +65,12 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [loadData, shouldLoadDefault]); + useMetricsBreadcrumbs([ + { + text: metricsExplorerTitle, + }, + ]); + return ( <EuiErrorBoundary> <DocumentTitle diff --git a/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx b/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx index 1066dddad6b5f..7224da4429a36 100644 --- a/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx @@ -25,18 +25,23 @@ import { IndicesConfigurationPanel } from './indices_configuration_panel'; import { MLConfigurationPanel } from './ml_configuration_panel'; import { NameConfigurationPanel } from './name_configuration_panel'; import { useSourceConfigurationFormState } from './source_configuration_form_state'; +import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs'; +import { settingsTitle } from '../../../translations'; + import { MetricsPageTemplate } from '../page_template'; interface SourceConfigurationSettingsProps { shouldAllowEdit: boolean; } -const settingsTitle = i18n.translate('xpack.infra.metrics.settingsTitle', { - defaultMessage: 'Settings', -}); - export const SourceConfigurationSettings = ({ shouldAllowEdit, }: SourceConfigurationSettingsProps) => { + useMetricsBreadcrumbs([ + { + text: settingsTitle, + }, + ]); + const { createSourceConfiguration, source, diff --git a/x-pack/plugins/infra/public/translations.ts b/x-pack/plugins/infra/public/translations.ts new file mode 100644 index 0000000000000..4a9b19fde6ef2 --- /dev/null +++ b/x-pack/plugins/infra/public/translations.ts @@ -0,0 +1,47 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +export const observabilityTitle = i18n.translate('xpack.infra.header.observabilityTitle', { + defaultMessage: 'Observability', +}); + +export const logsTitle = i18n.translate('xpack.infra.header.logsTitle', { + defaultMessage: 'Logs', +}); + +export const streamTitle = i18n.translate('xpack.infra.logs.index.streamTabTitle', { + defaultMessage: 'Stream', +}); + +export const anomaliesTitle = i18n.translate('xpack.infra.logs.index.anomaliesTabTitle', { + defaultMessage: 'Anomalies', +}); + +export const logCategoriesTitle = i18n.translate( + 'xpack.infra.logs.index.logCategoriesBetaBadgeTitle', + { + defaultMessage: 'Categories', + } +); + +export const settingsTitle = i18n.translate('xpack.infra.logs.index.settingsTabTitle', { + defaultMessage: 'Settings', +}); + +export const metricsTitle = i18n.translate('xpack.infra.header.infrastructureTitle', { + defaultMessage: 'Metrics', +}); + +export const inventoryTitle = i18n.translate('xpack.infra.metrics.inventoryPageTitle', { + defaultMessage: 'Inventory', +}); + +export const metricsExplorerTitle = i18n.translate('xpack.infra.metrics.metricsExplorerTitle', { + defaultMessage: 'Metrics Explorer', +}); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx index 555ed7a09fe4f..390f8e0191ce9 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx @@ -95,22 +95,19 @@ describe('Processor: Date', () => { component, } = testBed; + // Set required parameters form.setInputValue('fieldNameField.input', 'field_1'); - // Set optional parameteres await act(async () => { find('formatsValueField.input').simulate('change', [{ label: 'ISO8601' }]); }); component.update(); - // Set target field + // Set optional parameters form.setInputValue('targetField.input', 'target_field'); - - // Set locale field form.setInputValue('localeField.input', 'SPANISH'); - - // Set timezone field. form.setInputValue('timezoneField.input', 'EST'); + form.setInputValue('outputFormatField.input', 'yyyy-MM-dd'); // Save the field with new changes await saveNewProcessor(); @@ -122,6 +119,7 @@ describe('Processor: Date', () => { target_field: 'target_field', locale: 'SPANISH', timezone: 'EST', + output_format: 'yyyy-MM-dd', }); }); }); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx index d50189167a2ff..24e1ddce008ea 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx @@ -140,6 +140,7 @@ type TestSubject = | 'appendValueField.input' | 'formatsValueField.input' | 'timezoneField.input' + | 'outputFormatField.input' | 'localeField.input' | 'processorTypeSelector.input' | 'fieldNameField.input' diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx index b1e42d067e56e..90138757c97aa 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx @@ -32,10 +32,20 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel', { defaultMessage: 'Formats', }), - helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText', { - defaultMessage: - 'Expected date formats. Provided formats are applied sequentially. Accepts a Java time pattern, ISO8601, UNIX, UNIX_MS, or TAI64N formats.', - }), + helpText: ( + <FormattedMessage + id="xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText" + defaultMessage="Expected date formats. Provided formats are applied sequentially. Accepts a Java time pattern or one of the following formats: {allowedFormats}." + values={{ + allowedFormats: ( + <> + <EuiCode>{'ISO8601'}</EuiCode>,<EuiCode>{'UNIX'}</EuiCode>, + <EuiCode>{'UNIX_MS'}</EuiCode>,<EuiCode>{'TAI64N'}</EuiCode> + </> + ), + }} + /> + ), validations: [ { validator: minLengthField({ @@ -79,6 +89,29 @@ const fieldsConfig: FieldsConfig = { /> ), }, + output_format: { + type: FIELD_TYPES.TEXT, + serializer: from.emptyStringToUndefined, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.outputFormatFieldLabel', { + defaultMessage: 'Output format (optional)', + }), + helpText: ( + <FormattedMessage + id="xpack.ingestPipelines.pipelineEditor.dateForm.outputFormatHelpText" + defaultMessage="Format to use when writing the date to {targetField}. Accepts a Java time pattern or one of the following formats: {allowedFormats}. Defaults to {defaultFormat}." + values={{ + targetField: <EuiCode>{'target_field'}</EuiCode>, + allowedFormats: ( + <> + <EuiCode>{'ISO8601'}</EuiCode>,<EuiCode>{'UNIX'}</EuiCode>, + <EuiCode>{'UNIX_MS'}</EuiCode>,<EuiCode>{'TAI64N'}</EuiCode> + </> + ), + defaultFormat: <EuiCode>{`yyyy-MM-dd'T'HH:mm:ss.SSSXXX`}</EuiCode>, + }} + /> + ), + }, }; /** @@ -126,6 +159,13 @@ export const DateProcessor: FunctionComponent = () => { component={Field} path="fields.locale" /> + + <UseField + data-test-subj="outputFormatField" + config={fieldsConfig.output_format} + component={Field} + path="fields.output_format" + /> </> ); }; diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx index bced8bf7c04fe..1c49527d9eca8 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx @@ -13,7 +13,13 @@ import { App } from './app'; import { LensAppProps, LensAppServices } from './types'; import { EditorFrameInstance, EditorFrameProps } from '../types'; import { Document } from '../persistence'; -import { makeDefaultServices, mountWithProvider } from '../mocks'; +import { + createMockDatasource, + createMockVisualization, + DatasourceMock, + makeDefaultServices, + mountWithProvider, +} from '../mocks'; import { I18nProvider } from '@kbn/i18n/react'; import { SavedObjectSaveModal, @@ -25,7 +31,6 @@ import { FilterManager, IFieldType, IIndexPattern, - IndexPattern, Query, } from '../../../../../src/plugins/data/public'; import { TopNavMenuData } from '../../../../../src/plugins/navigation/public'; @@ -60,17 +65,41 @@ jest.mock('lodash', () => { // const navigationStartMock = navigationPluginMock.createStartContract(); -function createMockFrame(): jest.Mocked<EditorFrameInstance> { - return { - EditorFrameContainer: jest.fn((props: EditorFrameProps) => <div />), - }; -} - const sessionIdSubject = new Subject<string>(); describe('Lens App', () => { let defaultDoc: Document; let defaultSavedObjectId: string; + const mockDatasource: DatasourceMock = createMockDatasource('testDatasource'); + const mockDatasource2: DatasourceMock = createMockDatasource('testDatasource2'); + const datasourceMap = { + testDatasource2: mockDatasource2, + testDatasource: mockDatasource, + }; + + const mockVisualization = { + ...createMockVisualization(), + id: 'testVis', + visualizationTypes: [ + { + icon: 'empty', + id: 'testVis', + label: 'TEST1', + groupLabel: 'testVisGroup', + }, + ], + }; + const visualizationMap = { + testVis: mockVisualization, + }; + + function createMockFrame(): jest.Mocked<EditorFrameInstance> { + return { + EditorFrameContainer: jest.fn((props: EditorFrameProps) => <div />), + datasourceMap, + visualizationMap, + }; + } const navMenuItems = { expectedSaveButton: { emphasize: true, testId: 'lnsApp_saveButton' }, @@ -86,17 +115,19 @@ describe('Lens App', () => { redirectToOrigin: jest.fn(), onAppLeave: jest.fn(), setHeaderActionMenu: jest.fn(), + datasourceMap, + visualizationMap, }; } async function mountWith({ props = makeDefaultProps(), services = makeDefaultServices(sessionIdSubject), - storePreloadedState, + preloadedState, }: { props?: jest.Mocked<LensAppProps>; services?: jest.Mocked<LensAppServices>; - storePreloadedState?: Partial<LensAppState>; + preloadedState?: Partial<LensAppState>; }) { const wrappingComponent: React.FC<{ children: React.ReactNode; @@ -110,9 +141,11 @@ describe('Lens App', () => { const { instance, lensStore } = await mountWithProvider( <App {...props} />, - services.data, - storePreloadedState, - wrappingComponent + { + data: services.data, + preloadedState, + }, + { wrappingComponent } ); const frame = props.editorFrame as ReturnType<typeof createMockFrame>; @@ -139,8 +172,6 @@ describe('Lens App', () => { Array [ Array [ Object { - "initialContext": undefined, - "onError": [Function], "showNoDataPopover": [Function], }, Object {}, @@ -164,7 +195,7 @@ describe('Lens App', () => { instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ query: { query: '', language: 'lucene' }, filters: [pinnedFilter], resolvedDateRange: { @@ -177,14 +208,6 @@ describe('Lens App', () => { expect(services.data.query.filterManager.getFilters).not.toHaveBeenCalled(); }); - it('displays errors from the frame in a toast', async () => { - const { instance, frame, services } = await mountWith({}); - const onError = frame.EditorFrameContainer.mock.calls[0][0].onError; - onError({ message: 'error' }); - instance.update(); - expect(services.notifications.toasts.addDanger).toHaveBeenCalled(); - }); - describe('breadcrumbs', () => { const breadcrumbDocSavedObjectId = defaultSavedObjectId; const breadcrumbDoc = ({ @@ -237,7 +260,7 @@ describe('Lens App', () => { const { instance, lensStore } = await mountWith({ props, services, - storePreloadedState: { + preloadedState: { isLinkedToOriginatingApp: true, }, }); @@ -275,8 +298,8 @@ describe('Lens App', () => { }); describe('persistence', () => { - it('loads a document and uses query and filters if initial input is provided', async () => { - const { instance, lensStore, services } = await mountWith({}); + it('passes query and indexPatterns to TopNavMenu', async () => { + const { instance, lensStore, services } = await mountWith({ preloadedState: {} }); const document = ({ savedObjectId: defaultSavedObjectId, state: { @@ -290,8 +313,6 @@ describe('Lens App', () => { lensStore.dispatch( setState({ query: ('fake query' as unknown) as Query, - indexPatternsForTopNav: ([{ id: '1' }] as unknown) as IndexPattern[], - lastKnownDoc: document, persistedDoc: document, }) ); @@ -301,7 +322,7 @@ describe('Lens App', () => { expect(services.navigation.ui.TopNavMenu).toHaveBeenCalledWith( expect.objectContaining({ query: 'fake query', - indexPatterns: [{ id: '1' }], + indexPatterns: [{ id: 'mockip' }], }), {} ); @@ -332,16 +353,11 @@ describe('Lens App', () => { } async function save({ - lastKnownDoc = { - references: [], - state: { - filters: [], - }, - }, + preloadedState, initialSavedObjectId, ...saveProps }: SaveProps & { - lastKnownDoc?: object; + preloadedState?: Partial<LensAppState>; initialSavedObjectId?: string; }) { const props = { @@ -366,18 +382,14 @@ describe('Lens App', () => { }, } as jest.ResolvedValue<Document>); - const { frame, instance, lensStore } = await mountWith({ services, props }); - - act(() => { - lensStore.dispatch( - setState({ - isSaveable: true, - lastKnownDoc: { savedObjectId: initialSavedObjectId, ...lastKnownDoc } as Document, - }) - ); + const { frame, instance, lensStore } = await mountWith({ + services, + props, + preloadedState: { + isSaveable: true, + ...preloadedState, + }, }); - - instance.update(); expect(getButton(instance).disableButton).toEqual(false); await act(async () => { testSave(instance, { ...saveProps }); @@ -399,7 +411,6 @@ describe('Lens App', () => { act(() => { lensStore.dispatch( setState({ - lastKnownDoc: ({ savedObjectId: 'will save this' } as unknown) as Document, isSaveable: true, }) ); @@ -415,7 +426,6 @@ describe('Lens App', () => { lensStore.dispatch( setState({ isSaveable: true, - lastKnownDoc: ({ savedObjectId: 'will save this' } as unknown) as Document, }) ); }); @@ -455,7 +465,7 @@ describe('Lens App', () => { const { instance } = await mountWith({ props, services, - storePreloadedState: { + preloadedState: { isLinkedToOriginatingApp: true, }, }); @@ -483,7 +493,7 @@ describe('Lens App', () => { const { instance, services } = await mountWith({ props, - storePreloadedState: { + preloadedState: { isLinkedToOriginatingApp: true, }, }); @@ -540,6 +550,7 @@ describe('Lens App', () => { initialSavedObjectId: defaultSavedObjectId, newCopyOnSave: true, newTitle: 'hello there', + preloadedState: { persistedDoc: defaultDoc }, }); expect(services.attributeService.wrapAttributes).toHaveBeenCalledWith( expect.objectContaining({ @@ -559,10 +570,11 @@ describe('Lens App', () => { }); it('saves existing docs', async () => { - const { props, services, instance, lensStore } = await save({ + const { props, services, instance } = await save({ initialSavedObjectId: defaultSavedObjectId, newCopyOnSave: false, newTitle: 'hello there', + preloadedState: { persistedDoc: defaultDoc }, }); expect(services.attributeService.wrapAttributes).toHaveBeenCalledWith( expect.objectContaining({ @@ -576,22 +588,6 @@ describe('Lens App', () => { await act(async () => { instance.setProps({ initialInput: { savedObjectId: defaultSavedObjectId } }); }); - - expect(lensStore.dispatch).toHaveBeenCalledWith({ - payload: { - lastKnownDoc: expect.objectContaining({ - savedObjectId: defaultSavedObjectId, - title: 'hello there', - }), - persistedDoc: expect.objectContaining({ - savedObjectId: defaultSavedObjectId, - title: 'hello there', - }), - isLinkedToOriginatingApp: false, - }, - type: 'app/setState', - }); - expect(services.notifications.toasts.addSuccess).toHaveBeenCalledWith( "Saved 'hello there'" ); @@ -602,18 +598,13 @@ describe('Lens App', () => { services.attributeService.wrapAttributes = jest .fn() .mockRejectedValue({ message: 'failed' }); - const { instance, props, lensStore } = await mountWith({ services }); - act(() => { - lensStore.dispatch( - setState({ - isSaveable: true, - lastKnownDoc: ({ id: undefined } as unknown) as Document, - }) - ); + const { instance, props } = await mountWith({ + services, + preloadedState: { + isSaveable: true, + }, }); - instance.update(); - await act(async () => { testSave(instance, { newCopyOnSave: false, newTitle: 'hello there' }); }); @@ -655,22 +646,19 @@ describe('Lens App', () => { initialSavedObjectId: defaultSavedObjectId, newCopyOnSave: false, newTitle: 'hello there2', - lastKnownDoc: { - expression: 'kibana 3', - state: { - filters: [pinned, unpinned], - }, + preloadedState: { + persistedDoc: defaultDoc, + filters: [pinned, unpinned], }, }); expect(services.attributeService.wrapAttributes).toHaveBeenCalledWith( - { + expect.objectContaining({ savedObjectId: defaultSavedObjectId, title: 'hello there2', - expression: 'kibana 3', - state: { + state: expect.objectContaining({ filters: [unpinned], - }, - }, + }), + }), true, { id: '5678', savedObjectId: defaultSavedObjectId } ); @@ -681,17 +669,13 @@ describe('Lens App', () => { services.attributeService.wrapAttributes = jest .fn() .mockReturnValue(Promise.resolve({ savedObjectId: '123' })); - const { instance, lensStore } = await mountWith({ services }); - await act(async () => { - lensStore.dispatch( - setState({ - isSaveable: true, - lastKnownDoc: ({ savedObjectId: '123' } as unknown) as Document, - }) - ); + const { instance } = await mountWith({ + services, + preloadedState: { + isSaveable: true, + persistedDoc: ({ savedObjectId: '123' } as unknown) as Document, + }, }); - - instance.update(); await act(async () => { instance.setProps({ initialInput: { savedObjectId: '123' } }); getButton(instance).run(instance.getDOMNode()); @@ -716,17 +700,7 @@ describe('Lens App', () => { }); it('does not show the copy button on first save', async () => { - const { instance, lensStore } = await mountWith({}); - await act(async () => { - lensStore.dispatch( - setState({ - isSaveable: true, - lastKnownDoc: ({} as unknown) as Document, - }) - ); - }); - - instance.update(); + const { instance } = await mountWith({ preloadedState: { isSaveable: true } }); await act(async () => getButton(instance).run(instance.getDOMNode())); instance.update(); expect(instance.find(SavedObjectSaveModal).prop('showCopyOnSave')).toEqual(false); @@ -744,33 +718,18 @@ describe('Lens App', () => { } it('should be disabled when no data is available', async () => { - const { instance, lensStore } = await mountWith({}); - await act(async () => { - lensStore.dispatch( - setState({ - isSaveable: true, - lastKnownDoc: ({} as unknown) as Document, - }) - ); - }); - instance.update(); + const { instance } = await mountWith({ preloadedState: { isSaveable: true } }); expect(getButton(instance).disableButton).toEqual(true); }); it('should disable download when not saveable', async () => { - const { instance, lensStore } = await mountWith({}); - - await act(async () => { - lensStore.dispatch( - setState({ - lastKnownDoc: ({} as unknown) as Document, - isSaveable: false, - activeData: { layer1: { type: 'datatable', columns: [], rows: [] } }, - }) - ); + const { instance } = await mountWith({ + preloadedState: { + isSaveable: false, + activeData: { layer1: { type: 'datatable', columns: [], rows: [] } }, + }, }); - instance.update(); expect(getButton(instance).disableButton).toEqual(true); }); @@ -784,17 +743,13 @@ describe('Lens App', () => { }, }; - const { instance, lensStore } = await mountWith({ services }); - await act(async () => { - lensStore.dispatch( - setState({ - lastKnownDoc: ({} as unknown) as Document, - isSaveable: true, - activeData: { layer1: { type: 'datatable', columns: [], rows: [] } }, - }) - ); + const { instance } = await mountWith({ + services, + preloadedState: { + isSaveable: true, + activeData: { layer1: { type: 'datatable', columns: [], rows: [] } }, + }, }); - instance.update(); expect(getButton(instance).disableButton).toEqual(false); }); }); @@ -812,7 +767,7 @@ describe('Lens App', () => { ); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ query: { query: '', language: 'lucene' }, resolvedDateRange: { fromDate: '2021-01-10T04:00:00.000Z', @@ -822,49 +777,6 @@ describe('Lens App', () => { }); }); - it('updates the index patterns when the editor frame is changed', async () => { - const { instance, lensStore, services } = await mountWith({}); - expect(services.navigation.ui.TopNavMenu).toHaveBeenCalledWith( - expect.objectContaining({ - indexPatterns: [], - }), - {} - ); - await act(async () => { - lensStore.dispatch( - setState({ - indexPatternsForTopNav: [{ id: '1' }] as IndexPattern[], - lastKnownDoc: ({} as unknown) as Document, - isSaveable: true, - }) - ); - }); - instance.update(); - expect(services.navigation.ui.TopNavMenu).toHaveBeenCalledWith( - expect.objectContaining({ - indexPatterns: [{ id: '1' }], - }), - {} - ); - // Do it again to verify that the dirty checking is done right - await act(async () => { - lensStore.dispatch( - setState({ - indexPatternsForTopNav: [{ id: '2' }] as IndexPattern[], - lastKnownDoc: ({} as unknown) as Document, - isSaveable: true, - }) - ); - }); - instance.update(); - expect(services.navigation.ui.TopNavMenu).toHaveBeenLastCalledWith( - expect.objectContaining({ - indexPatterns: [{ id: '2' }], - }), - {} - ); - }); - it('updates the editor frame when the user changes query or time in the search bar', async () => { const { instance, services, lensStore } = await mountWith({}); (services.data.query.timefilter.timefilter.calculateBounds as jest.Mock).mockReturnValue({ @@ -892,7 +804,7 @@ describe('Lens App', () => { }); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ query: { query: 'new', language: 'lucene' }, resolvedDateRange: { fromDate: '2021-01-09T04:00:00.000Z', @@ -907,7 +819,7 @@ describe('Lens App', () => { const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern; const field = ({ name: 'myfield' } as unknown) as IFieldType; expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ filters: [], }), }); @@ -918,7 +830,7 @@ describe('Lens App', () => { ); instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ filters: [esFilters.buildExistsFilter(field, indexPattern)], }), }); @@ -928,7 +840,7 @@ describe('Lens App', () => { const { instance, services, lensStore } = await mountWith({}); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `sessionId-1`, }), }); @@ -942,7 +854,7 @@ describe('Lens App', () => { instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `sessionId-2`, }), }); @@ -955,7 +867,7 @@ describe('Lens App', () => { ); instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `sessionId-3`, }), }); @@ -968,7 +880,7 @@ describe('Lens App', () => { ); instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `sessionId-4`, }), }); @@ -1105,7 +1017,7 @@ describe('Lens App', () => { act(() => instance.find(services.navigation.ui.TopNavMenu).prop('onClearSavedQuery')!()); instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ filters: [pinned], }), }); @@ -1137,7 +1049,7 @@ describe('Lens App', () => { }); instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `sessionId-2`, }), }); @@ -1162,30 +1074,12 @@ describe('Lens App', () => { act(() => instance.find(services.navigation.ui.TopNavMenu).prop('onClearSavedQuery')!()); instance.update(); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `sessionId-4`, }), }); }); - const mockUpdate = { - filterableIndexPatterns: [], - doc: { - title: '', - description: '', - visualizationType: '', - state: { - datasourceStates: {}, - visualization: {}, - filters: [], - query: { query: '', language: 'lucene' }, - }, - references: [], - }, - isSaveable: true, - activeData: undefined, - }; - it('updates the state if session id changes from the outside', async () => { const services = makeDefaultServices(sessionIdSubject); const { lensStore } = await mountWith({ props: undefined, services }); @@ -1197,25 +1091,16 @@ describe('Lens App', () => { await new Promise((r) => setTimeout(r, 0)); }); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `new-session-id`, }), }); }); it('does not update the searchSessionId when the state changes', async () => { - const { lensStore } = await mountWith({}); - act(() => { - lensStore.dispatch( - setState({ - indexPatternsForTopNav: [], - lastKnownDoc: mockUpdate.doc, - isSaveable: true, - }) - ); - }); + const { lensStore } = await mountWith({ preloadedState: { isSaveable: true } }); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ + lens: expect.objectContaining({ searchSessionId: `sessionId-1`, }), }); @@ -1248,20 +1133,7 @@ describe('Lens App', () => { visualize: { save: false, saveQuery: false, show: true }, }, }; - const { instance, props, lensStore } = await mountWith({ services }); - act(() => { - lensStore.dispatch( - setState({ - indexPatternsForTopNav: [] as IndexPattern[], - lastKnownDoc: ({ - savedObjectId: undefined, - references: [], - } as unknown) as Document, - isSaveable: true, - }) - ); - }); - instance.update(); + const { props } = await mountWith({ services, preloadedState: { isSaveable: true } }); const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0]; lastCall({ default: defaultLeave, confirm: confirmLeave }); expect(defaultLeave).toHaveBeenCalled(); @@ -1269,14 +1141,14 @@ describe('Lens App', () => { }); it('should confirm when leaving with an unsaved doc', async () => { - const { lensStore, props } = await mountWith({}); - act(() => { - lensStore.dispatch( - setState({ - lastKnownDoc: ({ savedObjectId: undefined, state: {} } as unknown) as Document, - isSaveable: true, - }) - ); + const { props } = await mountWith({ + preloadedState: { + visualization: { + activeId: 'testVis', + state: {}, + }, + isSaveable: true, + }, }); const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0]; lastCall({ default: defaultLeave, confirm: confirmLeave }); @@ -1285,18 +1157,15 @@ describe('Lens App', () => { }); it('should confirm when leaving with unsaved changes to an existing doc', async () => { - const { lensStore, props } = await mountWith({}); - act(() => { - lensStore.dispatch( - setState({ - persistedDoc: defaultDoc, - lastKnownDoc: ({ - savedObjectId: defaultSavedObjectId, - references: [], - } as unknown) as Document, - isSaveable: true, - }) - ); + const { props } = await mountWith({ + preloadedState: { + persistedDoc: defaultDoc, + visualization: { + activeId: 'testVis', + state: {}, + }, + isSaveable: true, + }, }); const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0]; lastCall({ default: defaultLeave, confirm: confirmLeave }); @@ -1305,15 +1174,23 @@ describe('Lens App', () => { }); it('should not confirm when changes are saved', async () => { - const { lensStore, props } = await mountWith({}); - act(() => { - lensStore.dispatch( - setState({ - lastKnownDoc: defaultDoc, - persistedDoc: defaultDoc, - isSaveable: true, - }) - ); + const { props } = await mountWith({ + preloadedState: { + persistedDoc: { + ...defaultDoc, + state: { + ...defaultDoc.state, + datasourceStates: { testDatasource: '' }, + visualization: {}, + }, + }, + isSaveable: true, + ...(defaultDoc.state as Partial<LensAppState>), + visualization: { + activeId: 'testVis', + state: {}, + }, + }, }); const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0]; lastCall({ default: defaultLeave, confirm: confirmLeave }); @@ -1321,16 +1198,13 @@ describe('Lens App', () => { expect(confirmLeave).not.toHaveBeenCalled(); }); + // not sure how to test it it('should confirm when the latest doc is invalid', async () => { const { lensStore, props } = await mountWith({}); act(() => { lensStore.dispatch( setState({ persistedDoc: defaultDoc, - lastKnownDoc: ({ - savedObjectId: defaultSavedObjectId, - references: [], - } as unknown) as Document, isSaveable: true, }) ); diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx index fee64a532553d..8faee830d52bb 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.tsx @@ -10,8 +10,6 @@ import './app.scss'; import { isEqual } from 'lodash'; import React, { useState, useEffect, useCallback } from 'react'; import { i18n } from '@kbn/i18n'; -import { Toast } from 'kibana/public'; -import { VisualizeFieldContext } from 'src/plugins/ui_actions/public'; import { EuiBreadcrumb } from '@elastic/eui'; import { createKbnUrlStateStorage, @@ -24,8 +22,9 @@ import { LensAppProps, LensAppServices } from './types'; import { LensTopNavMenu } from './lens_top_nav'; import { LensByReferenceInput } from '../embeddable'; import { EditorFrameInstance } from '../types'; +import { Document } from '../persistence/saved_object_store'; import { - setState as setAppState, + setState, useLensSelector, useLensDispatch, LensAppState, @@ -36,6 +35,7 @@ import { getLastKnownDocWithoutPinnedFilters, runSaveLensVisualization, } from './save_modal_container'; +import { getSavedObjectFormat } from '../utils'; export type SaveProps = Omit<OnSaveProps, 'onTitleDuplicate' | 'newDescription'> & { returnToOrigin: boolean; @@ -54,7 +54,8 @@ export function App({ incomingState, redirectToOrigin, setHeaderActionMenu, - initialContext, + datasourceMap, + visualizationMap, }: LensAppProps) { const lensAppServices = useKibana<LensAppServices>().services; @@ -73,16 +74,69 @@ export function App({ const dispatch = useLensDispatch(); const dispatchSetState: DispatchSetState = useCallback( - (state: Partial<LensAppState>) => dispatch(setAppState(state)), + (state: Partial<LensAppState>) => dispatch(setState(state)), [dispatch] ); - const appState = useLensSelector((state) => state.app); + const { + datasourceStates, + visualization, + filters, + query, + activeDatasourceId, + persistedDoc, + isLinkedToOriginatingApp, + searchSessionId, + isLoading, + isSaveable, + } = useLensSelector((state) => state.lens); // Used to show a popover that guides the user towards changing the date range when no data is available. const [indicateNoData, setIndicateNoData] = useState(false); const [isSaveModalVisible, setIsSaveModalVisible] = useState(false); - const { lastKnownDoc } = appState; + const [lastKnownDoc, setLastKnownDoc] = useState<Document | undefined>(undefined); + + useEffect(() => { + const activeVisualization = visualization.activeId && visualizationMap[visualization.activeId]; + const activeDatasource = + activeDatasourceId && !datasourceStates[activeDatasourceId].isLoading + ? datasourceMap[activeDatasourceId] + : undefined; + + if (!activeDatasource || !activeVisualization || !visualization.state) { + return; + } + setLastKnownDoc( + // todo: that should be redux store selector + getSavedObjectFormat({ + activeDatasources: Object.keys(datasourceStates).reduce( + (acc, datasourceId) => ({ + ...acc, + [datasourceId]: datasourceMap[datasourceId], + }), + {} + ), + datasourceStates, + visualization, + filters, + query, + title: persistedDoc?.title || '', + description: persistedDoc?.description, + persistedId: persistedDoc?.savedObjectId, + }) + ); + }, [ + persistedDoc?.title, + persistedDoc?.description, + persistedDoc?.savedObjectId, + datasourceStates, + visualization, + filters, + query, + activeDatasourceId, + datasourceMap, + visualizationMap, + ]); const showNoDataPopover = useCallback(() => { setIndicateNoData(true); @@ -92,30 +146,17 @@ export function App({ if (indicateNoData) { setIndicateNoData(false); } - }, [ - setIndicateNoData, - indicateNoData, - appState.indexPatternsForTopNav, - appState.searchSessionId, - ]); - - const onError = useCallback( - (e: { message: string }) => - notifications.toasts.addDanger({ - title: e.message, - }), - [notifications.toasts] - ); + }, [setIndicateNoData, indicateNoData, searchSessionId]); const getIsByValueMode = useCallback( () => Boolean( // Temporarily required until the 'by value' paradigm is default. dashboardFeatureFlag.allowByValueEmbeddables && - appState.isLinkedToOriginatingApp && + isLinkedToOriginatingApp && !(initialInput as LensByReferenceInput)?.savedObjectId ), - [dashboardFeatureFlag.allowByValueEmbeddables, appState.isLinkedToOriginatingApp, initialInput] + [dashboardFeatureFlag.allowByValueEmbeddables, isLinkedToOriginatingApp, initialInput] ); useEffect(() => { @@ -138,13 +179,11 @@ export function App({ onAppLeave((actions) => { // Confirm when the user has made any changes to an existing doc // or when the user has configured something without saving + if ( application.capabilities.visualize.save && - !isEqual( - appState.persistedDoc?.state, - getLastKnownDocWithoutPinnedFilters(lastKnownDoc)?.state - ) && - (appState.isSaveable || appState.persistedDoc) + !isEqual(persistedDoc?.state, getLastKnownDocWithoutPinnedFilters(lastKnownDoc)?.state) && + (isSaveable || persistedDoc) ) { return actions.confirm( i18n.translate('xpack.lens.app.unsavedWorkMessage', { @@ -158,19 +197,13 @@ export function App({ return actions.default(); } }); - }, [ - onAppLeave, - lastKnownDoc, - appState.isSaveable, - appState.persistedDoc, - application.capabilities.visualize.save, - ]); + }, [onAppLeave, lastKnownDoc, isSaveable, persistedDoc, application.capabilities.visualize.save]); // Sync Kibana breadcrumbs any time the saved document's title changes useEffect(() => { const isByValueMode = getIsByValueMode(); const breadcrumbs: EuiBreadcrumb[] = []; - if (appState.isLinkedToOriginatingApp && getOriginatingAppName() && redirectToOrigin) { + if (isLinkedToOriginatingApp && getOriginatingAppName() && redirectToOrigin) { breadcrumbs.push({ onClick: () => { redirectToOrigin(); @@ -193,10 +226,10 @@ export function App({ let currentDocTitle = i18n.translate('xpack.lens.breadcrumbsCreate', { defaultMessage: 'Create', }); - if (appState.persistedDoc) { + if (persistedDoc) { currentDocTitle = isByValueMode ? i18n.translate('xpack.lens.breadcrumbsByValue', { defaultMessage: 'Edit visualization' }) - : appState.persistedDoc.title; + : persistedDoc.title; } breadcrumbs.push({ text: currentDocTitle }); chrome.setBreadcrumbs(breadcrumbs); @@ -207,39 +240,55 @@ export function App({ getIsByValueMode, application, chrome, - appState.isLinkedToOriginatingApp, - appState.persistedDoc, + isLinkedToOriginatingApp, + persistedDoc, ]); - const runSave = (saveProps: SaveProps, options: { saveToLibrary: boolean }) => { - return runSaveLensVisualization( - { - lastKnownDoc, - getIsByValueMode, - savedObjectsTagging, - initialInput, - redirectToOrigin, - persistedDoc: appState.persistedDoc, - onAppLeave, - redirectTo, - originatingApp: incomingState?.originatingApp, - ...lensAppServices, - }, - saveProps, - options - ).then( - (newState) => { - if (newState) { - dispatchSetState(newState); - setIsSaveModalVisible(false); + const runSave = useCallback( + (saveProps: SaveProps, options: { saveToLibrary: boolean }) => { + return runSaveLensVisualization( + { + lastKnownDoc, + getIsByValueMode, + savedObjectsTagging, + initialInput, + redirectToOrigin, + persistedDoc, + onAppLeave, + redirectTo, + originatingApp: incomingState?.originatingApp, + ...lensAppServices, + }, + saveProps, + options + ).then( + (newState) => { + if (newState) { + dispatchSetState(newState); + setIsSaveModalVisible(false); + } + }, + () => { + // error is handled inside the modal + // so ignoring it here } - }, - () => { - // error is handled inside the modal - // so ignoring it here - } - ); - }; + ); + }, + [ + incomingState?.originatingApp, + lastKnownDoc, + persistedDoc, + getIsByValueMode, + savedObjectsTagging, + initialInput, + redirectToOrigin, + onAppLeave, + redirectTo, + lensAppServices, + dispatchSetState, + setIsSaveModalVisible, + ] + ); return ( <> @@ -253,64 +302,53 @@ export function App({ setIsSaveModalVisible={setIsSaveModalVisible} setHeaderActionMenu={setHeaderActionMenu} indicateNoData={indicateNoData} + datasourceMap={datasourceMap} + title={persistedDoc?.title} /> - {(!appState.isAppLoading || appState.persistedDoc) && ( + {(!isLoading || persistedDoc) && ( <MemoizedEditorFrameWrapper editorFrame={editorFrame} - onError={onError} showNoDataPopover={showNoDataPopover} - initialContext={initialContext} /> )} </div> - <SaveModalContainer - isVisible={isSaveModalVisible} - lensServices={lensAppServices} - originatingApp={ - appState.isLinkedToOriginatingApp ? incomingState?.originatingApp : undefined - } - isSaveable={appState.isSaveable} - runSave={runSave} - onClose={() => { - setIsSaveModalVisible(false); - }} - getAppNameFromId={() => getOriginatingAppName()} - lastKnownDoc={lastKnownDoc} - onAppLeave={onAppLeave} - persistedDoc={appState.persistedDoc} - initialInput={initialInput} - redirectTo={redirectTo} - redirectToOrigin={redirectToOrigin} - returnToOriginSwitchLabel={ - getIsByValueMode() && initialInput - ? i18n.translate('xpack.lens.app.updatePanel', { - defaultMessage: 'Update panel on {originatingAppName}', - values: { originatingAppName: getOriginatingAppName() }, - }) - : undefined - } - /> + {isSaveModalVisible && ( + <SaveModalContainer + lensServices={lensAppServices} + originatingApp={isLinkedToOriginatingApp ? incomingState?.originatingApp : undefined} + isSaveable={isSaveable} + runSave={runSave} + onClose={() => { + setIsSaveModalVisible(false); + }} + getAppNameFromId={() => getOriginatingAppName()} + lastKnownDoc={lastKnownDoc} + onAppLeave={onAppLeave} + persistedDoc={persistedDoc} + initialInput={initialInput} + redirectTo={redirectTo} + redirectToOrigin={redirectToOrigin} + returnToOriginSwitchLabel={ + getIsByValueMode() && initialInput + ? i18n.translate('xpack.lens.app.updatePanel', { + defaultMessage: 'Update panel on {originatingAppName}', + values: { originatingAppName: getOriginatingAppName() }, + }) + : undefined + } + /> + )} </> ); } const MemoizedEditorFrameWrapper = React.memo(function EditorFrameWrapper({ editorFrame, - onError, showNoDataPopover, - initialContext, }: { editorFrame: EditorFrameInstance; - onError: (e: { message: string }) => Toast; showNoDataPopover: () => void; - initialContext: VisualizeFieldContext | undefined; }) { const { EditorFrameContainer } = editorFrame; - return ( - <EditorFrameContainer - onError={onError} - showNoDataPopover={showNoDataPopover} - initialContext={initialContext} - /> - ); + return <EditorFrameContainer showNoDataPopover={showNoDataPopover} />; }); diff --git a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx index ecaae04232f8a..5034069b448af 100644 --- a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx +++ b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx @@ -7,21 +7,21 @@ import { isEqual } from 'lodash'; import { i18n } from '@kbn/i18n'; -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { TopNavMenuData } from '../../../../../src/plugins/navigation/public'; import { LensAppServices, LensTopNavActions, LensTopNavMenuProps } from './types'; import { downloadMultipleAs } from '../../../../../src/plugins/share/public'; import { trackUiEvent } from '../lens_ui_telemetry'; -import { exporters } from '../../../../../src/plugins/data/public'; - +import { exporters, IndexPattern } from '../../../../../src/plugins/data/public'; import { useKibana } from '../../../../../src/plugins/kibana_react/public'; import { - setState as setAppState, + setState, useLensSelector, useLensDispatch, LensAppState, DispatchSetState, } from '../state_management'; +import { getIndexPatternsObjects, getIndexPatternsIds } from '../utils'; function getLensTopNavConfig(options: { showSaveAndReturn: boolean; @@ -127,6 +127,8 @@ export const LensTopNavMenu = ({ runSave, onAppLeave, redirectToOrigin, + datasourceMap, + title, }: LensTopNavMenuProps) => { const { data, @@ -139,19 +141,52 @@ export const LensTopNavMenu = ({ const dispatch = useLensDispatch(); const dispatchSetState: DispatchSetState = React.useCallback( - (state: Partial<LensAppState>) => dispatch(setAppState(state)), + (state: Partial<LensAppState>) => dispatch(setState(state)), [dispatch] ); + const [indexPatterns, setIndexPatterns] = useState<IndexPattern[]>([]); + const { isSaveable, isLinkedToOriginatingApp, - indexPatternsForTopNav, query, - lastKnownDoc, activeData, savedQuery, - } = useLensSelector((state) => state.app); + activeDatasourceId, + datasourceStates, + } = useLensSelector((state) => state.lens); + + useEffect(() => { + const activeDatasource = + datasourceMap && activeDatasourceId && !datasourceStates[activeDatasourceId].isLoading + ? datasourceMap[activeDatasourceId] + : undefined; + if (!activeDatasource) { + return; + } + const indexPatternIds = getIndexPatternsIds({ + activeDatasources: Object.keys(datasourceStates).reduce( + (acc, datasourceId) => ({ + ...acc, + [datasourceId]: datasourceMap[datasourceId], + }), + {} + ), + datasourceStates, + }); + const hasIndexPatternsChanged = + indexPatterns.length !== indexPatternIds.length || + indexPatternIds.some((id) => !indexPatterns.find((indexPattern) => indexPattern.id === id)); + // Update the cached index patterns if the user made a change to any of them + if (hasIndexPatternsChanged) { + getIndexPatternsObjects(indexPatternIds, data.indexPatterns).then( + ({ indexPatterns: indexPatternObjects }) => { + setIndexPatterns(indexPatternObjects); + } + ); + } + }, [datasourceStates, activeDatasourceId, data.indexPatterns, datasourceMap, indexPatterns]); const { TopNavMenu } = navigation.ui; const { from, to } = data.query.timefilter.timefilter.getTime(); @@ -190,7 +225,7 @@ export const LensTopNavMenu = ({ if (datatable) { const postFix = datatables.length > 1 ? `-${i + 1}` : ''; - memo[`${lastKnownDoc?.title || unsavedTitle}${postFix}.csv`] = { + memo[`${title || unsavedTitle}${postFix}.csv`] = { content: exporters.datatableToCSV(datatable, { csvSeparator: uiSettings.get('csv:separator', ','), quoteValues: uiSettings.get('csv:quoteValues', true), @@ -208,14 +243,14 @@ export const LensTopNavMenu = ({ } }, saveAndReturn: () => { - if (savingToDashboardPermitted && lastKnownDoc) { + if (savingToDashboardPermitted) { // disabling the validation on app leave because the document has been saved. onAppLeave((actions) => { return actions.default(); }); runSave( { - newTitle: lastKnownDoc.title, + newTitle: title || '', newCopyOnSave: false, isTitleDuplicateConfirmed: false, returnToOrigin: true, @@ -248,7 +283,7 @@ export const LensTopNavMenu = ({ initialInput, isLinkedToOriginatingApp, isSaveable, - lastKnownDoc, + title, onAppLeave, redirectToOrigin, runSave, @@ -321,7 +356,7 @@ export const LensTopNavMenu = ({ onSaved={onSavedWrapped} onSavedQueryUpdated={onSavedQueryUpdatedWrapped} onClearSavedQuery={onClearSavedQueryWrapped} - indexPatterns={indexPatternsForTopNav} + indexPatterns={indexPatterns} query={query} dateRangeFrom={from} dateRangeTo={to} diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx index 4f890a51f9b6a..03eec4f617cfc 100644 --- a/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx +++ b/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx @@ -4,45 +4,150 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { makeDefaultServices, mockLensStore } from '../mocks'; +import { makeDefaultServices, makeLensStore, defaultDoc, createMockVisualization } from '../mocks'; +import { createMockDatasource, DatasourceMock } from '../mocks'; import { act } from 'react-dom/test-utils'; -import { loadDocument } from './mounter'; +import { loadInitialStore } from './mounter'; import { LensEmbeddableInput } from '../embeddable/embeddable'; const defaultSavedObjectId = '1234'; +const preloadedState = { + isLoading: true, + visualization: { + state: null, + activeId: 'testVis', + }, +}; describe('Mounter', () => { const byValueFlag = { allowByValueEmbeddables: true }; - describe('loadDocument', () => { + const mockDatasource: DatasourceMock = createMockDatasource('testDatasource'); + const mockDatasource2: DatasourceMock = createMockDatasource('testDatasource2'); + const datasourceMap = { + testDatasource2: mockDatasource2, + testDatasource: mockDatasource, + }; + const mockVisualization = { + ...createMockVisualization(), + id: 'testVis', + visualizationTypes: [ + { + icon: 'empty', + id: 'testVis', + label: 'TEST1', + groupLabel: 'testVisGroup', + }, + ], + }; + const mockVisualization2 = { + ...createMockVisualization(), + id: 'testVis2', + visualizationTypes: [ + { + icon: 'empty', + id: 'testVis2', + label: 'TEST2', + groupLabel: 'testVis2Group', + }, + ], + }; + const visualizationMap = { + testVis: mockVisualization, + testVis2: mockVisualization2, + }; + + it('should initialize initial datasource', async () => { + const services = makeDefaultServices(); + const redirectCallback = jest.fn(); + services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue(defaultDoc); + + const lensStore = await makeLensStore({ + data: services.data, + preloadedState, + }); + await act(async () => { + await loadInitialStore( + redirectCallback, + undefined, + services, + lensStore, + undefined, + byValueFlag, + datasourceMap, + visualizationMap + ); + }); + expect(mockDatasource.initialize).toHaveBeenCalled(); + }); + + it('should have initialized only the initial datasource and visualization', async () => { + const services = makeDefaultServices(); + const redirectCallback = jest.fn(); + services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue(defaultDoc); + + const lensStore = await makeLensStore({ data: services.data, preloadedState }); + await act(async () => { + await loadInitialStore( + redirectCallback, + undefined, + services, + lensStore, + undefined, + byValueFlag, + datasourceMap, + visualizationMap + ); + }); + expect(mockDatasource.initialize).toHaveBeenCalled(); + expect(mockDatasource2.initialize).not.toHaveBeenCalled(); + + expect(mockVisualization.initialize).toHaveBeenCalled(); + expect(mockVisualization2.initialize).not.toHaveBeenCalled(); + }); + + // it('should initialize all datasources with state from doc', async () => {}) + // it('should pass the datasource api for each layer to the visualization', async () => {}) + // it('should create a separate datasource public api for each layer', async () => {}) + // it('should not initialize visualization before datasource is initialized', async () => {}) + // it('should pass the public frame api into visualization initialize', async () => {}) + // it('should fetch suggestions of currently active datasource when initializes from visualization trigger', async () => {}) + // it.skip('should pass the datasource api for each layer to the visualization', async () => {}) + // it('displays errors from the frame in a toast', async () => { + + describe('loadInitialStore', () => { it('does not load a document if there is no initial input', async () => { const services = makeDefaultServices(); const redirectCallback = jest.fn(); - const lensStore = mockLensStore({ data: services.data }); - await loadDocument(redirectCallback, undefined, services, lensStore, undefined, byValueFlag); + const lensStore = makeLensStore({ data: services.data, preloadedState }); + await loadInitialStore( + redirectCallback, + undefined, + services, + lensStore, + undefined, + byValueFlag, + datasourceMap, + visualizationMap + ); expect(services.attributeService.unwrapAttributes).not.toHaveBeenCalled(); }); it('loads a document and uses query and filters if initial input is provided', async () => { const services = makeDefaultServices(); const redirectCallback = jest.fn(); - services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue({ - savedObjectId: defaultSavedObjectId, - state: { - query: 'fake query', - filters: [{ query: { match_phrase: { src: 'test' } } }], - }, - references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }], - }); + services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue(defaultDoc); - const lensStore = await mockLensStore({ data: services.data }); + const lensStore = await makeLensStore({ data: services.data, preloadedState }); await act(async () => { - await loadDocument( + await loadInitialStore( redirectCallback, { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput, services, lensStore, undefined, - byValueFlag + byValueFlag, + datasourceMap, + visualizationMap ); }); @@ -50,21 +155,16 @@ describe('Mounter', () => { savedObjectId: defaultSavedObjectId, }); - expect(services.data.indexPatterns.get).toHaveBeenCalledWith('1'); - expect(services.data.query.filterManager.setAppFilters).toHaveBeenCalledWith([ { query: { match_phrase: { src: 'test' } } }, ]); expect(lensStore.getState()).toEqual({ - app: expect.objectContaining({ - persistedDoc: expect.objectContaining({ - savedObjectId: defaultSavedObjectId, - state: expect.objectContaining({ - query: 'fake query', - filters: [{ query: { match_phrase: { src: 'test' } } }], - }), - }), + lens: expect.objectContaining({ + persistedDoc: { ...defaultDoc, type: 'lens' }, + query: 'kuery', + isLoading: false, + activeDatasourceId: 'testDatasource', }), }); }); @@ -72,40 +172,46 @@ describe('Mounter', () => { it('does not load documents on sequential renders unless the id changes', async () => { const redirectCallback = jest.fn(); const services = makeDefaultServices(); - const lensStore = mockLensStore({ data: services.data }); + const lensStore = makeLensStore({ data: services.data, preloadedState }); await act(async () => { - await loadDocument( + await loadInitialStore( redirectCallback, { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput, services, lensStore, undefined, - byValueFlag + byValueFlag, + datasourceMap, + visualizationMap ); }); await act(async () => { - await loadDocument( + await loadInitialStore( redirectCallback, { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput, services, lensStore, undefined, - byValueFlag + byValueFlag, + datasourceMap, + visualizationMap ); }); expect(services.attributeService.unwrapAttributes).toHaveBeenCalledTimes(1); await act(async () => { - await loadDocument( + await loadInitialStore( redirectCallback, { savedObjectId: '5678' } as LensEmbeddableInput, services, lensStore, undefined, - byValueFlag + byValueFlag, + datasourceMap, + visualizationMap ); }); @@ -116,18 +222,20 @@ describe('Mounter', () => { const services = makeDefaultServices(); const redirectCallback = jest.fn(); - const lensStore = mockLensStore({ data: services.data }); + const lensStore = makeLensStore({ data: services.data, preloadedState }); services.attributeService.unwrapAttributes = jest.fn().mockRejectedValue('failed to load'); await act(async () => { - await loadDocument( + await loadInitialStore( redirectCallback, { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput, services, lensStore, undefined, - byValueFlag + byValueFlag, + datasourceMap, + visualizationMap ); }); expect(services.attributeService.unwrapAttributes).toHaveBeenCalledWith({ @@ -141,15 +249,17 @@ describe('Mounter', () => { const redirectCallback = jest.fn(); const services = makeDefaultServices(); - const lensStore = mockLensStore({ data: services.data }); + const lensStore = makeLensStore({ data: services.data, preloadedState }); await act(async () => { - await loadDocument( + await loadInitialStore( redirectCallback, ({ savedObjectId: defaultSavedObjectId } as unknown) as LensEmbeddableInput, services, lensStore, undefined, - byValueFlag + byValueFlag, + datasourceMap, + visualizationMap ); }); diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx index 7f27b06c51ba4..1fd12460ba3b6 100644 --- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx +++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx @@ -23,7 +23,7 @@ import { Storage } from '../../../../../src/plugins/kibana_utils/public'; import { LensReportManager, setReportManager, trackUiEvent } from '../lens_ui_telemetry'; import { App } from './app'; -import { EditorFrameStart } from '../types'; +import { Datasource, EditorFrameStart, Visualization } from '../types'; import { addHelpMenuToAppChrome } from '../help_menu_util'; import { LensPluginStartDependencies } from '../plugin'; import { LENS_EMBEDDABLE_TYPE, LENS_EDIT_BY_VALUE, APP_ID } from '../../common'; @@ -32,7 +32,10 @@ import { LensByReferenceInput, LensByValueInput, } from '../embeddable/embeddable'; -import { ACTION_VISUALIZE_LENS_FIELD } from '../../../../../src/plugins/ui_actions/public'; +import { + ACTION_VISUALIZE_LENS_FIELD, + VisualizeFieldContext, +} from '../../../../../src/plugins/ui_actions/public'; import { LensAttributeService } from '../lens_attribute_service'; import { LensAppServices, RedirectToOriginProps, HistoryLocationState } from './types'; import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; @@ -43,9 +46,18 @@ import { getPreloadedState, LensRootStore, setState, + LensAppState, + updateLayer, + updateVisualizationState, } from '../state_management'; -import { getResolvedDateRange } from '../utils'; -import { getLastKnownDoc } from './save_modal_container'; +import { getPersistedDoc } from './save_modal_container'; +import { getResolvedDateRange, getInitialDatasourceId } from '../utils'; +import { initializeDatasources } from '../editor_frame_service/editor_frame'; +import { generateId } from '../id_generator'; +import { + getVisualizeFieldSuggestions, + switchToSuggestion, +} from '../editor_frame_service/editor_frame/suggestion_helpers'; export async function getLensServices( coreStart: CoreStart, @@ -166,7 +178,19 @@ export async function mountApp( if (!initialContext) { data.query.filterManager.setAppFilters([]); } + const { datasourceMap, visualizationMap } = instance; + + const initialDatasourceId = getInitialDatasourceId(datasourceMap); + const datasourceStates: LensAppState['datasourceStates'] = {}; + if (initialDatasourceId) { + datasourceStates[initialDatasourceId] = { + state: null, + isLoading: true, + }; + } + const preloadedState = getPreloadedState({ + isLoading: true, query: data.query.queryString.getQuery(), // Do not use app-specific filters from previous app, // only if Lens was opened with the intention to visualize a field (e.g. coming from Discover) @@ -176,10 +200,15 @@ export async function mountApp( searchSessionId: data.search.session.getSessionId(), resolvedDateRange: getResolvedDateRange(data.query.timefilter.timefilter), isLinkedToOriginatingApp: Boolean(embeddableEditorIncomingState?.originatingApp), + activeDatasourceId: initialDatasourceId, + datasourceStates, + visualization: { + state: null, + activeId: Object.keys(visualizationMap)[0] || null, + }, }); const lensStore: LensRootStore = makeConfigureStore(preloadedState, { data }); - const EditorRenderer = React.memo( (props: { id?: string; history: History<unknown>; editByValue?: boolean }) => { const redirectCallback = useCallback( @@ -190,14 +219,18 @@ export async function mountApp( ); trackUiEvent('loaded'); const initialInput = getInitialInput(props.id, props.editByValue); - loadDocument( + loadInitialStore( redirectCallback, initialInput, lensServices, lensStore, embeddableEditorIncomingState, - dashboardFeatureFlag + dashboardFeatureFlag, + datasourceMap, + visualizationMap, + initialContext ); + return ( <Provider store={lensStore}> <App @@ -209,7 +242,8 @@ export async function mountApp( onAppLeave={params.onAppLeave} setHeaderActionMenu={params.setHeaderActionMenu} history={props.history} - initialContext={initialContext} + datasourceMap={datasourceMap} + visualizationMap={visualizationMap} /> </Provider> ); @@ -270,64 +304,180 @@ export async function mountApp( }; } -export function loadDocument( +export function loadInitialStore( redirectCallback: (savedObjectId?: string) => void, initialInput: LensEmbeddableInput | undefined, lensServices: LensAppServices, lensStore: LensRootStore, embeddableEditorIncomingState: EmbeddableEditorState | undefined, - dashboardFeatureFlag: DashboardFeatureFlagConfig + dashboardFeatureFlag: DashboardFeatureFlagConfig, + datasourceMap: Record<string, Datasource>, + visualizationMap: Record<string, Visualization>, + initialContext?: VisualizeFieldContext ) { const { attributeService, chrome, notifications, data } = lensServices; - const { persistedDoc } = lensStore.getState().app; + const { persistedDoc } = lensStore.getState().lens; if ( !initialInput || (attributeService.inputIsRefType(initialInput) && initialInput.savedObjectId === persistedDoc?.savedObjectId) ) { - return; + return initializeDatasources( + datasourceMap, + lensStore.getState().lens.datasourceStates, + undefined, + initialContext, + { + isFullEditor: true, + } + ) + .then((result) => { + const datasourceStates = Object.entries(result).reduce( + (state, [datasourceId, datasourceState]) => ({ + ...state, + [datasourceId]: { + ...datasourceState, + isLoading: false, + }, + }), + {} + ); + lensStore.dispatch( + setState({ + datasourceStates, + isLoading: false, + }) + ); + if (initialContext) { + const selectedSuggestion = getVisualizeFieldSuggestions({ + datasourceMap, + datasourceStates, + visualizationMap, + activeVisualizationId: Object.keys(visualizationMap)[0] || null, + visualizationState: null, + visualizeTriggerFieldContext: initialContext, + }); + if (selectedSuggestion) { + switchToSuggestion(lensStore.dispatch, selectedSuggestion, 'SWITCH_VISUALIZATION'); + } + } + const activeDatasourceId = getInitialDatasourceId(datasourceMap); + const visualization = lensStore.getState().lens.visualization; + const activeVisualization = + visualization.activeId && visualizationMap[visualization.activeId]; + + if (visualization.state === null && activeVisualization) { + const newLayerId = generateId(); + + const initialVisualizationState = activeVisualization.initialize(() => newLayerId); + lensStore.dispatch( + updateLayer({ + datasourceId: activeDatasourceId!, + layerId: newLayerId, + updater: datasourceMap[activeDatasourceId!].insertLayer, + }) + ); + lensStore.dispatch( + updateVisualizationState({ + visualizationId: activeVisualization.id, + updater: initialVisualizationState, + }) + ); + } + }) + .catch((e: { message: string }) => { + notifications.toasts.addDanger({ + title: e.message, + }); + redirectCallback(); + }); } - lensStore.dispatch(setState({ isAppLoading: true })); - getLastKnownDoc({ + getPersistedDoc({ initialInput, attributeService, data, chrome, notifications, - }).then( - (newState) => { - if (newState) { - const { doc, indexPatterns } = newState; - const currentSessionId = data.search.session.getSessionId(); + }) + .then( + (doc) => { + if (doc) { + const currentSessionId = data.search.session.getSessionId(); + const docDatasourceStates = Object.entries(doc.state.datasourceStates).reduce( + (stateMap, [datasourceId, datasourceState]) => ({ + ...stateMap, + [datasourceId]: { + isLoading: true, + state: datasourceState, + }, + }), + {} + ); + + initializeDatasources( + datasourceMap, + docDatasourceStates, + doc.references, + initialContext, + { + isFullEditor: true, + } + ) + .then((result) => { + const activeDatasourceId = getInitialDatasourceId(datasourceMap, doc); + + lensStore.dispatch( + setState({ + query: doc.state.query, + searchSessionId: + dashboardFeatureFlag.allowByValueEmbeddables && + Boolean(embeddableEditorIncomingState?.originatingApp) && + !(initialInput as LensByReferenceInput)?.savedObjectId && + currentSessionId + ? currentSessionId + : data.search.session.start(), + ...(!isEqual(persistedDoc, doc) ? { persistedDoc: doc } : null), + activeDatasourceId, + visualization: { + activeId: doc.visualizationType, + state: doc.state.visualization, + }, + datasourceStates: Object.entries(result).reduce( + (state, [datasourceId, datasourceState]) => ({ + ...state, + [datasourceId]: { + ...datasourceState, + isLoading: false, + }, + }), + {} + ), + isLoading: false, + }) + ); + }) + .catch((e: { message: string }) => + notifications.toasts.addDanger({ + title: e.message, + }) + ); + } else { + redirectCallback(); + } + }, + () => { lensStore.dispatch( setState({ - query: doc.state.query, - isAppLoading: false, - indexPatternsForTopNav: indexPatterns, - lastKnownDoc: doc, - searchSessionId: - dashboardFeatureFlag.allowByValueEmbeddables && - Boolean(embeddableEditorIncomingState?.originatingApp) && - !(initialInput as LensByReferenceInput)?.savedObjectId && - currentSessionId - ? currentSessionId - : data.search.session.start(), - ...(!isEqual(persistedDoc, doc) ? { persistedDoc: doc } : null), + isLoading: false, }) ); - } else { redirectCallback(); } - }, - () => { - lensStore.dispatch( - setState({ - isAppLoading: false, - }) - ); - - redirectCallback(); - } - ); + ) + .catch((e: { message: string }) => + notifications.toasts.addDanger({ + title: e.message, + }) + ); } diff --git a/x-pack/plugins/lens/public/app_plugin/save_modal.tsx b/x-pack/plugins/lens/public/app_plugin/save_modal.tsx index cb4c5325aefbb..124702e0dd90e 100644 --- a/x-pack/plugins/lens/public/app_plugin/save_modal.tsx +++ b/x-pack/plugins/lens/public/app_plugin/save_modal.tsx @@ -7,8 +7,6 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; - -import { Document } from '../persistence'; import type { SavedObjectTaggingPluginStart } from '../../../saved_objects_tagging/public'; import { @@ -23,7 +21,6 @@ import { export type SaveProps = OriginSaveProps | DashboardSaveProps; export interface Props { - isVisible: boolean; savingToLibraryPermitted?: boolean; originatingApp?: string; @@ -32,7 +29,9 @@ export interface Props { savedObjectsTagging?: SavedObjectTaggingPluginStart; tagsIds: string[]; - lastKnownDoc?: Document; + title?: string; + savedObjectId?: string; + description?: string; getAppNameFromId: () => string | undefined; returnToOriginSwitchLabel?: string; @@ -42,16 +41,14 @@ export interface Props { } export const SaveModal = (props: Props) => { - if (!props.isVisible || !props.lastKnownDoc) { - return null; - } - const { originatingApp, savingToLibraryPermitted, savedObjectsTagging, tagsIds, - lastKnownDoc, + savedObjectId, + title, + description, allowByValueEmbeddables, returnToOriginSwitchLabel, getAppNameFromId, @@ -70,9 +67,9 @@ export const SaveModal = (props: Props) => { onSave={(saveProps) => onSave(saveProps, { saveToLibrary: true })} getAppNameFromId={getAppNameFromId} documentInfo={{ - id: lastKnownDoc.savedObjectId, - title: lastKnownDoc.title || '', - description: lastKnownDoc.description || '', + id: savedObjectId, + title: title || '', + description: description || '', }} returnToOriginSwitchLabel={returnToOriginSwitchLabel} objectType={i18n.translate('xpack.lens.app.saveModalType', { @@ -95,9 +92,9 @@ export const SaveModal = (props: Props) => { onClose={onClose} documentInfo={{ // if the user cannot save to the library - treat this as a new document. - id: savingToLibraryPermitted ? lastKnownDoc.savedObjectId : undefined, - title: lastKnownDoc.title || '', - description: lastKnownDoc.description || '', + id: savingToLibraryPermitted ? savedObjectId : undefined, + title: title || '', + description: description || '', }} objectType={i18n.translate('xpack.lens.app.saveModalType', { defaultMessage: 'Lens visualization', diff --git a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx index facf85d45bcbb..2912daccf8899 100644 --- a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx +++ b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx @@ -8,21 +8,16 @@ import React, { useEffect, useState } from 'react'; import { ChromeStart, NotificationsStart } from 'kibana/public'; import { i18n } from '@kbn/i18n'; -import { partition, uniq } from 'lodash'; import { METRIC_TYPE } from '@kbn/analytics'; +import { partition } from 'lodash'; import { SaveModal } from './save_modal'; import { LensAppProps, LensAppServices } from './types'; import type { SaveProps } from './app'; import { Document, injectFilterReferences } from '../persistence'; import { LensByReferenceInput, LensEmbeddableInput } from '../embeddable'; import { LensAttributeService } from '../lens_attribute_service'; -import { - DataPublicPluginStart, - esFilters, - IndexPattern, -} from '../../../../../src/plugins/data/public'; +import { DataPublicPluginStart, esFilters } from '../../../../../src/plugins/data/public'; import { APP_ID, getFullPath, LENS_EMBEDDABLE_TYPE } from '../../common'; -import { getAllIndexPatterns } from '../utils'; import { trackUiEvent } from '../lens_ui_telemetry'; import { checkForDuplicateTitle } from '../../../../../src/plugins/saved_objects/public'; import { LensAppState } from '../state_management'; @@ -31,7 +26,6 @@ type ExtraProps = Pick<LensAppProps, 'initialInput'> & Partial<Pick<LensAppProps, 'redirectToOrigin' | 'redirectTo' | 'onAppLeave'>>; export type SaveModalContainerProps = { - isVisible: boolean; originatingApp?: string; persistedDoc?: Document; lastKnownDoc?: Document; @@ -49,7 +43,6 @@ export function SaveModalContainer({ onClose, onSave, runSave, - isVisible, persistedDoc, originatingApp, initialInput, @@ -61,6 +54,14 @@ export function SaveModalContainer({ lensServices, }: SaveModalContainerProps) { const [lastKnownDoc, setLastKnownDoc] = useState<Document | undefined>(initLastKnowDoc); + let title = ''; + let description; + let savedObjectId; + if (lastKnownDoc) { + title = lastKnownDoc.title; + description = lastKnownDoc.description; + savedObjectId = lastKnownDoc.savedObjectId; + } const { attributeService, @@ -77,22 +78,26 @@ export function SaveModalContainer({ }, [initLastKnowDoc]); useEffect(() => { - async function loadLastKnownDoc() { - if (initialInput && isVisible) { - getLastKnownDoc({ + let isMounted = true; + async function loadPersistedDoc() { + if (initialInput) { + getPersistedDoc({ data, initialInput, chrome, notifications, attributeService, - }).then((result) => { - if (result) setLastKnownDoc(result.doc); + }).then((doc) => { + if (doc && isMounted) setLastKnownDoc(doc); }); } } - loadLastKnownDoc(); - }, [chrome, data, initialInput, notifications, attributeService, isVisible]); + loadPersistedDoc(); + return () => { + isMounted = false; + }; + }, [chrome, data, initialInput, notifications, attributeService]); const tagsIds = persistedDoc && savedObjectsTagging @@ -131,7 +136,6 @@ export function SaveModalContainer({ return ( <SaveModal - isVisible={isVisible} originatingApp={originatingApp} savingToLibraryPermitted={savingToLibraryPermitted} allowByValueEmbeddables={dashboardFeatureFlag?.allowByValueEmbeddables} @@ -142,7 +146,9 @@ export function SaveModalContainer({ }} onClose={onClose} getAppNameFromId={getAppNameFromId} - lastKnownDoc={lastKnownDoc} + title={title} + description={description} + savedObjectId={savedObjectId} returnToOriginSwitchLabel={returnToOriginSwitchLabel} /> ); @@ -330,7 +336,10 @@ export const runSaveLensVisualization = async ( ...newInput, }; - return { persistedDoc: newDoc, lastKnownDoc: newDoc, isLinkedToOriginatingApp: false }; + return { + persistedDoc: newDoc, + isLinkedToOriginatingApp: false, + }; } catch (e) { // eslint-disable-next-line no-console console.dir(e); @@ -356,7 +365,7 @@ export function getLastKnownDocWithoutPinnedFilters(doc?: Document) { : doc; } -export const getLastKnownDoc = async ({ +export const getPersistedDoc = async ({ initialInput, attributeService, data, @@ -368,7 +377,7 @@ export const getLastKnownDoc = async ({ data: DataPublicPluginStart; notifications: NotificationsStart; chrome: ChromeStart; -}): Promise<{ doc: Document; indexPatterns: IndexPattern[] } | undefined> => { +}): Promise<Document | undefined> => { let doc: Document; try { @@ -387,19 +396,12 @@ export const getLastKnownDoc = async ({ initialInput.savedObjectId ); } - const indexPatternIds = uniq( - doc.references.filter(({ type }) => type === 'index-pattern').map(({ id }) => id) - ); - const { indexPatterns } = await getAllIndexPatterns(indexPatternIds, data.indexPatterns); // Don't overwrite any pinned filters data.query.filterManager.setAppFilters( injectFilterReferences(doc.state.filters, doc.references) ); - return { - doc, - indexPatterns, - }; + return doc; } catch (e) { notifications.toasts.addDanger( i18n.translate('xpack.lens.app.docLoadingError', { diff --git a/x-pack/plugins/lens/public/app_plugin/types.ts b/x-pack/plugins/lens/public/app_plugin/types.ts index b4e7f18ccfeb8..7f1c21fa5a9bd 100644 --- a/x-pack/plugins/lens/public/app_plugin/types.ts +++ b/x-pack/plugins/lens/public/app_plugin/types.ts @@ -34,7 +34,7 @@ import { EmbeddableEditorState, EmbeddableStateTransfer, } from '../../../../../src/plugins/embeddable/public'; -import { EditorFrameInstance } from '../types'; +import { Datasource, EditorFrameInstance, Visualization } from '../types'; import { PresentationUtilPluginStart } from '../../../../../src/plugins/presentation_util/public'; export interface RedirectToOriginProps { input?: LensEmbeddableInput; @@ -54,7 +54,8 @@ export interface LensAppProps { // State passed in by the container which is used to determine the id of the Originating App. incomingState?: EmbeddableEditorState; - initialContext?: VisualizeFieldContext; + datasourceMap: Record<string, Datasource>; + visualizationMap: Record<string, Visualization>; } export type RunSave = ( @@ -81,6 +82,8 @@ export interface LensTopNavMenuProps { indicateNoData: boolean; setIsSaveModalVisible: React.Dispatch<React.SetStateAction<boolean>>; runSave: RunSave; + datasourceMap: Record<string, Datasource>; + title?: string; } export interface HistoryLocationState { diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx index 3479a9e964d53..d755c5c297d04 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { EuiButtonGroup, EuiComboBox, EuiFieldText } from '@elastic/eui'; import { FramePublicAPI, Operation, VisualizationDimensionEditorProps } from '../../types'; import { DatatableVisualizationState } from '../visualization'; -import { createMockDatasource, createMockFramePublicAPI } from '../../editor_frame_service/mocks'; +import { createMockDatasource, createMockFramePublicAPI } from '../../mocks'; import { mountWithIntl } from '@kbn/test/jest'; import { TableDimensionEditor } from './dimension_editor'; import { chartPluginMock } from 'src/plugins/charts/public/mocks'; 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 ea8237defc291..552f0f94a67de 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx @@ -7,7 +7,7 @@ import { Ast } from '@kbn/interpreter/common'; import { buildExpression } from '../../../../../src/plugins/expressions/public'; -import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks'; +import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { DatatableVisualizationState, getDatatableVisualization } from './visualization'; import { Operation, @@ -21,8 +21,6 @@ import { chartPluginMock } from 'src/plugins/charts/public/mocks'; function mockFrame(): FramePublicAPI { return { ...createMockFramePublicAPI(), - addNewLayer: () => 'aaa', - removeLayers: () => {}, datasourceLayers: {}, query: { query: '', language: 'lucene' }, dateRange: { @@ -40,7 +38,7 @@ const datatableVisualization = getDatatableVisualization({ describe('Datatable Visualization', () => { describe('#initialize', () => { it('should initialize from the empty state', () => { - expect(datatableVisualization.initialize(mockFrame(), undefined)).toEqual({ + expect(datatableVisualization.initialize(() => 'aaa', undefined)).toEqual({ layerId: 'aaa', columns: [], }); @@ -51,7 +49,7 @@ describe('Datatable Visualization', () => { layerId: 'foo', columns: [{ columnId: 'saved' }], }; - expect(datatableVisualization.initialize(mockFrame(), expectedState)).toEqual(expectedState); + expect(datatableVisualization.initialize(() => 'foo', expectedState)).toEqual(expectedState); }); }); diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index e48cb1b28c084..e7ab4aab88f2e 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx @@ -101,11 +101,11 @@ export const getDatatableVisualization = ({ switchVisualizationType: (_, state) => state, - initialize(frame, state) { + initialize(addNewLayer, state) { return ( state || { columns: [], - layerId: frame.addNewLayer(), + layerId: addNewLayer(), } ); }, diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx index 1ec48f516bd32..25d99ed9bfd41 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx @@ -12,13 +12,13 @@ import { createMockFramePublicAPI, createMockDatasource, DatasourceMock, -} from '../../mocks'; +} from '../../../mocks'; import { Visualization } from '../../../types'; -import { mountWithIntl } from '@kbn/test/jest'; import { LayerPanels } from './config_panel'; import { LayerPanel } from './layer_panel'; import { coreMock } from 'src/core/public/mocks'; import { generateId } from '../../../id_generator'; +import { mountWithProvider } from '../../../mocks'; jest.mock('../../../id_generator'); @@ -54,17 +54,17 @@ describe('ConfigPanel', () => { vis1: mockVisualization, vis2: mockVisualization2, }, - activeDatasourceId: 'ds1', + activeDatasourceId: 'mockindexpattern', datasourceMap: { - ds1: mockDatasource, + mockindexpattern: mockDatasource, }, activeVisualization: ({ ...mockVisualization, getLayerIds: () => Object.keys(frame.datasourceLayers), - appendLayer: true, + appendLayer: jest.fn(), } as unknown) as Visualization, datasourceStates: { - ds1: { + mockindexpattern: { isLoading: false, state: 'state', }, @@ -110,113 +110,184 @@ describe('ConfigPanel', () => { }; mockVisualization.getLayerIds.mockReturnValue(Object.keys(frame.datasourceLayers)); - mockDatasource = createMockDatasource('ds1'); + mockDatasource = createMockDatasource('mockindexpattern'); }); // in what case is this test needed? - it('should fail to render layerPanels if the public API is out of date', () => { + it('should fail to render layerPanels if the public API is out of date', async () => { const props = getDefaultProps(); props.framePublicAPI.datasourceLayers = {}; - const component = mountWithIntl(<LayerPanels {...props} />); - expect(component.find(LayerPanel).exists()).toBe(false); + const { instance } = await mountWithProvider(<LayerPanels {...props} />); + expect(instance.find(LayerPanel).exists()).toBe(false); }); it('allow datasources and visualizations to use setters', async () => { const props = getDefaultProps(); - const component = mountWithIntl(<LayerPanels {...props} />); - const { updateDatasource, updateAll } = component.find(LayerPanel).props(); + const { instance, lensStore } = await mountWithProvider(<LayerPanels {...props} />, { + preloadedState: { + datasourceStates: { + mockindexpattern: { + isLoading: false, + state: 'state', + }, + }, + }, + }); + const { updateDatasource, updateAll } = instance.find(LayerPanel).props(); const updater = () => 'updated'; - updateDatasource('ds1', updater); - // wait for one tick so async updater has a chance to trigger + updateDatasource('mockindexpattern', updater); await new Promise((r) => setTimeout(r, 0)); - expect(props.dispatch).toHaveBeenCalledTimes(1); - expect(props.dispatch.mock.calls[0][0].updater(props.datasourceStates.ds1.state)).toEqual( - 'updated' - ); + expect(lensStore.dispatch).toHaveBeenCalledTimes(1); + expect( + (lensStore.dispatch as jest.Mock).mock.calls[0][0].payload.updater( + props.datasourceStates.mockindexpattern.state + ) + ).toEqual('updated'); - updateAll('ds1', updater, props.visualizationState); + updateAll('mockindexpattern', updater, props.visualizationState); // wait for one tick so async updater has a chance to trigger await new Promise((r) => setTimeout(r, 0)); - expect(props.dispatch).toHaveBeenCalledTimes(2); - expect(props.dispatch.mock.calls[0][0].updater(props.datasourceStates.ds1.state)).toEqual( - 'updated' - ); + expect(lensStore.dispatch).toHaveBeenCalledTimes(2); + expect( + (lensStore.dispatch as jest.Mock).mock.calls[0][0].payload.updater( + props.datasourceStates.mockindexpattern.state + ) + ).toEqual('updated'); }); describe('focus behavior when adding or removing layers', () => { - it('should focus the only layer when resetting the layer', () => { - const component = mountWithIntl(<LayerPanels {...getDefaultProps()} />, { - attachTo: container, - }); - const firstLayerFocusable = component + it('should focus the only layer when resetting the layer', async () => { + const { instance } = await mountWithProvider( + <LayerPanels {...getDefaultProps()} />, + { + preloadedState: { + datasourceStates: { + mockindexpattern: { + isLoading: false, + state: 'state', + }, + }, + }, + }, + { + attachTo: container, + } + ); + const firstLayerFocusable = instance .find(LayerPanel) .first() .find('section') .first() .instance(); act(() => { - component.find('[data-test-subj="lnsLayerRemove"]').first().simulate('click'); + instance.find('[data-test-subj="lnsLayerRemove"]').first().simulate('click'); }); const focusedEl = document.activeElement; expect(focusedEl).toEqual(firstLayerFocusable); }); - it('should focus the second layer when removing the first layer', () => { + it('should focus the second layer when removing the first layer', async () => { const defaultProps = getDefaultProps(); // overwriting datasourceLayers to test two layers frame.datasourceLayers = { first: mockDatasource.publicAPIMock, second: mockDatasource.publicAPIMock, }; - const component = mountWithIntl(<LayerPanels {...defaultProps} />, { attachTo: container }); - const secondLayerFocusable = component + const { instance } = await mountWithProvider( + <LayerPanels {...defaultProps} />, + { + preloadedState: { + datasourceStates: { + mockindexpattern: { + isLoading: false, + state: 'state', + }, + }, + }, + }, + { + attachTo: container, + } + ); + + const secondLayerFocusable = instance .find(LayerPanel) .at(1) .find('section') .first() .instance(); act(() => { - component.find('[data-test-subj="lnsLayerRemove"]').at(0).simulate('click'); + instance.find('[data-test-subj="lnsLayerRemove"]').at(0).simulate('click'); }); const focusedEl = document.activeElement; expect(focusedEl).toEqual(secondLayerFocusable); }); - it('should focus the first layer when removing the second layer', () => { + it('should focus the first layer when removing the second layer', async () => { const defaultProps = getDefaultProps(); // overwriting datasourceLayers to test two layers frame.datasourceLayers = { first: mockDatasource.publicAPIMock, second: mockDatasource.publicAPIMock, }; - const component = mountWithIntl(<LayerPanels {...defaultProps} />, { attachTo: container }); - const firstLayerFocusable = component + const { instance } = await mountWithProvider( + <LayerPanels {...defaultProps} />, + { + preloadedState: { + datasourceStates: { + mockindexpattern: { + isLoading: false, + state: 'state', + }, + }, + }, + }, + { + attachTo: container, + } + ); + const firstLayerFocusable = instance .find(LayerPanel) .first() .find('section') .first() .instance(); act(() => { - component.find('[data-test-subj="lnsLayerRemove"]').at(2).simulate('click'); + instance.find('[data-test-subj="lnsLayerRemove"]').at(2).simulate('click'); }); const focusedEl = document.activeElement; expect(focusedEl).toEqual(firstLayerFocusable); }); - it('should focus the added layer', () => { + it('should focus the added layer', async () => { (generateId as jest.Mock).mockReturnValue(`second`); - const dispatch = jest.fn((x) => { - if (x.subType === 'ADD_LAYER') { - frame.datasourceLayers.second = mockDatasource.publicAPIMock; - } - }); - const component = mountWithIntl(<LayerPanels {...getDefaultProps()} dispatch={dispatch} />, { - attachTo: container, - }); + const { instance } = await mountWithProvider( + <LayerPanels {...getDefaultProps()} />, + + { + preloadedState: { + datasourceStates: { + mockindexpattern: { + isLoading: false, + state: 'state', + }, + }, + activeDatasourceId: 'mockindexpattern', + }, + dispatch: jest.fn((x) => { + if (x.payload.subType === 'ADD_LAYER') { + frame.datasourceLayers.second = mockDatasource.publicAPIMock; + } + }), + }, + { + attachTo: container, + } + ); act(() => { - component.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click'); + instance.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click'); }); const focusedEl = document.activeElement; expect(focusedEl?.children[0].getAttribute('data-test-subj')).toEqual('lns-layerPanel-1'); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx index 81c044af532fb..c7147e75af59a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx @@ -10,13 +10,21 @@ import './config_panel.scss'; import React, { useMemo, memo } from 'react'; import { EuiFlexItem, EuiToolTip, EuiButton, EuiForm } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { mapValues } from 'lodash'; import { Visualization } from '../../../types'; import { LayerPanel } from './layer_panel'; import { trackUiEvent } from '../../../lens_ui_telemetry'; import { generateId } from '../../../id_generator'; -import { removeLayer, appendLayer } from './layer_actions'; +import { appendLayer } from './layer_actions'; import { ConfigPanelWrapperProps } from './types'; import { useFocusUpdate } from './use_focus_update'; +import { + useLensDispatch, + updateState, + updateDatasourceState, + updateVisualizationState, + setToggleFullscreen, +} from '../../../state_management'; export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: ConfigPanelWrapperProps) { const activeVisualization = props.visualizationMap[props.activeVisualizationId || '']; @@ -33,13 +41,8 @@ export function LayerPanels( activeVisualization: Visualization; } ) { - const { - activeVisualization, - visualizationState, - dispatch, - activeDatasourceId, - datasourceMap, - } = props; + const { activeVisualization, visualizationState, activeDatasourceId, datasourceMap } = props; + const dispatchLens = useLensDispatch(); const layerIds = activeVisualization.getLayerIds(visualizationState); const { @@ -50,26 +53,28 @@ export function LayerPanels( const setVisualizationState = useMemo( () => (newState: unknown) => { - dispatch({ - type: 'UPDATE_VISUALIZATION_STATE', - visualizationId: activeVisualization.id, - updater: newState, - clearStagedPreview: false, - }); + dispatchLens( + updateVisualizationState({ + visualizationId: activeVisualization.id, + updater: newState, + clearStagedPreview: false, + }) + ); }, - [dispatch, activeVisualization] + [activeVisualization, dispatchLens] ); const updateDatasource = useMemo( () => (datasourceId: string, newState: unknown) => { - dispatch({ - type: 'UPDATE_DATASOURCE_STATE', - updater: (prevState: unknown) => - typeof newState === 'function' ? newState(prevState) : newState, - datasourceId, - clearStagedPreview: false, - }); + dispatchLens( + updateDatasourceState({ + updater: (prevState: unknown) => + typeof newState === 'function' ? newState(prevState) : newState, + datasourceId, + clearStagedPreview: false, + }) + ); }, - [dispatch] + [dispatchLens] ); const updateDatasourceAsync = useMemo( () => (datasourceId: string, newState: unknown) => { @@ -86,42 +91,42 @@ export function LayerPanels( // React will synchronously update if this is triggered from a third party component, // which we don't want. The timeout lets user interaction have priority, then React updates. setTimeout(() => { - dispatch({ - type: 'UPDATE_STATE', - subType: 'UPDATE_ALL_STATES', - updater: (prevState) => { - const updatedDatasourceState = - typeof newDatasourceState === 'function' - ? newDatasourceState(prevState.datasourceStates[datasourceId].state) - : newDatasourceState; - return { - ...prevState, - datasourceStates: { - ...prevState.datasourceStates, - [datasourceId]: { - state: updatedDatasourceState, - isLoading: false, + dispatchLens( + updateState({ + subType: 'UPDATE_ALL_STATES', + updater: (prevState) => { + const updatedDatasourceState = + typeof newDatasourceState === 'function' + ? newDatasourceState(prevState.datasourceStates[datasourceId].state) + : newDatasourceState; + return { + ...prevState, + datasourceStates: { + ...prevState.datasourceStates, + [datasourceId]: { + state: updatedDatasourceState, + isLoading: false, + }, + }, + visualization: { + ...prevState.visualization, + state: newVisualizationState, }, - }, - visualization: { - ...prevState.visualization, - state: newVisualizationState, - }, - stagedPreview: undefined, - }; - }, - }); + stagedPreview: undefined, + }; + }, + }) + ); }, 0); }, - [dispatch] + [dispatchLens] ); + const toggleFullscreen = useMemo( () => () => { - dispatch({ - type: 'TOGGLE_FULLSCREEN', - }); + dispatchLens(setToggleFullscreen()); }, - [dispatch] + [dispatchLens] ); const datasourcePublicAPIs = props.framePublicAPI.datasourceLayers; @@ -144,18 +149,41 @@ export function LayerPanels( updateAll={updateAll} isOnlyLayer={layerIds.length === 1} onRemoveLayer={() => { - dispatch({ - type: 'UPDATE_STATE', - subType: 'REMOVE_OR_CLEAR_LAYER', - updater: (state) => - removeLayer({ - activeVisualization, - layerId, - trackUiEvent, - datasourceMap, - state, - }), - }); + dispatchLens( + updateState({ + subType: 'REMOVE_OR_CLEAR_LAYER', + updater: (state) => { + const isOnlyLayer = activeVisualization + .getLayerIds(state.visualization.state) + .every((id) => id === layerId); + + return { + ...state, + datasourceStates: mapValues( + state.datasourceStates, + (datasourceState, datasourceId) => { + const datasource = datasourceMap[datasourceId!]; + return { + ...datasourceState, + state: isOnlyLayer + ? datasource.clearLayer(datasourceState.state, layerId) + : datasource.removeLayer(datasourceState.state, layerId), + }; + } + ), + visualization: { + ...state.visualization, + state: + isOnlyLayer || !activeVisualization.removeLayer + ? activeVisualization.clearLayer(state.visualization.state, layerId) + : activeVisualization.removeLayer(state.visualization.state, layerId), + }, + stagedPreview: undefined, + }; + }, + }) + ); + removeLayerRef(layerId); }} toggleFullscreen={toggleFullscreen} @@ -187,18 +215,19 @@ export function LayerPanels( color="text" onClick={() => { const id = generateId(); - dispatch({ - type: 'UPDATE_STATE', - subType: 'ADD_LAYER', - updater: (state) => - appendLayer({ - activeVisualization, - generateId: () => id, - trackUiEvent, - activeDatasource: datasourceMap[activeDatasourceId], - state, - }), - }); + dispatchLens( + updateState({ + subType: 'ADD_LAYER', + updater: (state) => + appendLayer({ + activeVisualization, + generateId: () => id, + trackUiEvent, + activeDatasource: datasourceMap[activeDatasourceId], + state, + }), + }) + ); setNextFocusedLayerId(id); }} iconType="plusInCircleFilled" diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts index d28d3acbf3bae..ad15be170e631 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { initialState } from '../../../state_management/lens_slice'; import { removeLayer, appendLayer } from './layer_actions'; function createTestArgs(initialLayerIds: string[]) { @@ -42,6 +43,7 @@ function createTestArgs(initialLayerIds: string[]) { return { state: { + ...initialState, activeDatasourceId: 'ds1', datasourceStates, title: 'foo', diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts index 7d8a373192ee5..328a868cfb893 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts @@ -6,12 +6,13 @@ */ import { mapValues } from 'lodash'; -import { EditorFrameState } from '../state_management'; +import { LensAppState } from '../../../state_management'; + import { Datasource, Visualization } from '../../../types'; interface RemoveLayerOptions { trackUiEvent: (name: string) => void; - state: EditorFrameState; + state: LensAppState; layerId: string; activeVisualization: Pick<Visualization, 'getLayerIds' | 'clearLayer' | 'removeLayer'>; datasourceMap: Record<string, Pick<Datasource, 'clearLayer' | 'removeLayer'>>; @@ -19,13 +20,13 @@ interface RemoveLayerOptions { interface AppendLayerOptions { trackUiEvent: (name: string) => void; - state: EditorFrameState; + state: LensAppState; generateId: () => string; activeDatasource: Pick<Datasource, 'insertLayer' | 'id'>; activeVisualization: Pick<Visualization, 'appendLayer'>; } -export function removeLayer(opts: RemoveLayerOptions): EditorFrameState { +export function removeLayer(opts: RemoveLayerOptions): LensAppState { const { state, trackUiEvent: trackUiEvent, activeVisualization, layerId, datasourceMap } = opts; const isOnlyLayer = activeVisualization .getLayerIds(state.visualization.state) @@ -61,7 +62,7 @@ export function appendLayer({ state, generateId, activeDatasource, -}: AppendLayerOptions): EditorFrameState { +}: AppendLayerOptions): LensAppState { trackUiEvent('layer_added'); if (!activeVisualization.appendLayer) { diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index dd1241af14f5a..3bb5fca2141a0 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -19,7 +19,7 @@ import { createMockFramePublicAPI, createMockDatasource, DatasourceMock, -} from '../../mocks'; +} from '../../../mocks'; jest.mock('../../../id_generator'); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts index 1af8c16fa1395..683b96c6b8773 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { Action } from '../state_management'; import { Visualization, FramePublicAPI, @@ -18,7 +17,6 @@ export interface ConfigPanelWrapperProps { visualizationState: unknown; visualizationMap: Record<string, Visualization>; activeVisualizationId: string | null; - dispatch: (action: Action) => void; framePublicAPI: FramePublicAPI; datasourceMap: Record<string, Datasource>; datasourceStates: Record< @@ -37,7 +35,6 @@ export interface LayerPanelProps { visualizationState: unknown; datasourceMap: Record<string, Datasource>; activeVisualization: Visualization; - dispatch: (action: Action) => void; framePublicAPI: FramePublicAPI; datasourceStates: Record< string, diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx index 9bf03025e400f..c50d3f41479f1 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx @@ -7,54 +7,94 @@ import './data_panel_wrapper.scss'; -import React, { useMemo, memo, useContext, useState } from 'react'; +import React, { useMemo, memo, useContext, useState, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiPopover, EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui'; +import { createSelector } from '@reduxjs/toolkit'; import { NativeRenderer } from '../../native_renderer'; -import { Action } from './state_management'; import { DragContext, DragDropIdentifier } from '../../drag_drop'; -import { StateSetter, FramePublicAPI, DatasourceDataPanelProps, Datasource } from '../../types'; -import { Query, Filter } from '../../../../../../src/plugins/data/public'; +import { StateSetter, DatasourceDataPanelProps, Datasource } from '../../types'; import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public'; +import { + switchDatasource, + useLensDispatch, + updateDatasourceState, + LensState, + useLensSelector, + setState, +} from '../../state_management'; +import { initializeDatasources } from './state_helpers'; interface DataPanelWrapperProps { datasourceState: unknown; datasourceMap: Record<string, Datasource>; activeDatasource: string | null; datasourceIsLoading: boolean; - dispatch: (action: Action) => void; showNoDataPopover: () => void; core: DatasourceDataPanelProps['core']; - query: Query; - dateRange: FramePublicAPI['dateRange']; - filters: Filter[]; dropOntoWorkspace: (field: DragDropIdentifier) => void; hasSuggestionForField: (field: DragDropIdentifier) => boolean; plugins: { uiActions: UiActionsStart }; } +const getExternals = createSelector( + (state: LensState) => state.lens, + ({ resolvedDateRange, query, filters, datasourceStates, activeDatasourceId }) => ({ + dateRange: resolvedDateRange, + query, + filters, + datasourceStates, + activeDatasourceId, + }) +); + export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => { - const { dispatch, activeDatasource } = props; - const setDatasourceState: StateSetter<unknown> = useMemo( - () => (updater) => { - dispatch({ - type: 'UPDATE_DATASOURCE_STATE', - updater, - datasourceId: activeDatasource!, - clearStagedPreview: true, - }); - }, - [dispatch, activeDatasource] + const { activeDatasource } = props; + + const { filters, query, dateRange, datasourceStates, activeDatasourceId } = useLensSelector( + getExternals ); + const dispatchLens = useLensDispatch(); + const setDatasourceState: StateSetter<unknown> = useMemo(() => { + return (updater) => { + dispatchLens( + updateDatasourceState({ + updater, + datasourceId: activeDatasource!, + clearStagedPreview: true, + }) + ); + }; + }, [activeDatasource, dispatchLens]); + + useEffect(() => { + if (activeDatasourceId && datasourceStates[activeDatasourceId].state === null) { + initializeDatasources(props.datasourceMap, datasourceStates, undefined, undefined, { + isFullEditor: true, + }).then((result) => { + const newDatasourceStates = Object.entries(result).reduce( + (state, [datasourceId, datasourceState]) => ({ + ...state, + [datasourceId]: { + ...datasourceState, + isLoading: false, + }, + }), + {} + ); + dispatchLens(setState({ datasourceStates: newDatasourceStates })); + }); + } + }, [datasourceStates, activeDatasourceId, props.datasourceMap, dispatchLens]); const datasourceProps: DatasourceDataPanelProps = { dragDropContext: useContext(DragContext), state: props.datasourceState, setState: setDatasourceState, core: props.core, - query: props.query, - dateRange: props.dateRange, - filters: props.filters, + filters, + query, + dateRange, showNoDataPopover: props.showNoDataPopover, dropOntoWorkspace: props.dropOntoWorkspace, hasSuggestionForField: props.hasSuggestionForField, @@ -98,10 +138,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => { icon={props.activeDatasource === datasourceId ? 'check' : 'empty'} onClick={() => { setDatasourceSwitcher(false); - props.dispatch({ - type: 'SWITCH_DATASOURCE', - newDatasourceId: datasourceId, - }); + dispatchLens(switchDatasource({ newDatasourceId: datasourceId })); }} > {datasourceId} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx index 0e2ba5ce8ad59..4ce68dc3bc70a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx @@ -7,7 +7,6 @@ import React, { ReactElement } from 'react'; import { ReactWrapper } from 'enzyme'; -import { setState, LensRootStore } from '../../state_management/index'; // Tests are executed in a jsdom environment who does not have sizing methods, // thus the AutoSizer will always compute a 0x0 size space @@ -37,16 +36,17 @@ import { fromExpression } from '@kbn/interpreter/common'; import { createMockVisualization, createMockDatasource, - createExpressionRendererMock, DatasourceMock, -} from '../mocks'; + createExpressionRendererMock, +} from '../../mocks'; import { ReactExpressionRendererType } from 'src/plugins/expressions/public'; import { DragDrop } from '../../drag_drop'; -import { FrameLayout } from './frame_layout'; import { uiActionsPluginMock } from '../../../../../../src/plugins/ui_actions/public/mocks'; import { chartPluginMock } from '../../../../../../src/plugins/charts/public/mocks'; import { expressionsPluginMock } from '../../../../../../src/plugins/expressions/public/mocks'; import { mockDataPlugin, mountWithProvider } from '../../mocks'; +import { setState, setToggleFullscreen } from '../../state_management'; +import { FrameLayout } from './frame_layout'; function generateSuggestion(state = {}): DatasourceSuggestion { return { @@ -130,68 +130,6 @@ describe('editor_frame', () => { }); describe('initialization', () => { - it('should initialize initial datasource', async () => { - mockVisualization.getLayerIds.mockReturnValue([]); - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - }, - - ExpressionRenderer: expressionRendererMock, - }; - - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - expect(mockDatasource.initialize).toHaveBeenCalled(); - }); - - it('should initialize all datasources with state from doc', async () => { - const mockDatasource3 = createMockDatasource('testDatasource3'); - const datasource1State = { datasource1: '' }; - const datasource2State = { datasource2: '' }; - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - testDatasource2: mockDatasource2, - testDatasource3: mockDatasource3, - }, - - ExpressionRenderer: expressionRendererMock, - }; - - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, { - persistedDoc: { - visualizationType: 'testVis', - title: '', - state: { - datasourceStates: { - testDatasource: datasource1State, - testDatasource2: datasource2State, - }, - visualization: {}, - query: { query: '', language: 'lucene' }, - filters: [], - }, - references: [], - }, - }); - - expect(mockDatasource.initialize).toHaveBeenCalledWith(datasource1State, [], undefined, { - isFullEditor: true, - }); - expect(mockDatasource2.initialize).toHaveBeenCalledWith(datasource2State, [], undefined, { - isFullEditor: true, - }); - expect(mockDatasource3.initialize).not.toHaveBeenCalled(); - }); - it('should not render something before all datasources are initialized', async () => { const props = { ...getDefaultProps(), @@ -204,177 +142,36 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - - await act(async () => { - mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - expect(mockDatasource.renderDataPanel).not.toHaveBeenCalled(); - }); - expect(mockDatasource.renderDataPanel).toHaveBeenCalled(); - }); - - it('should not initialize visualization before datasource is initialized', async () => { - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - }, - - ExpressionRenderer: expressionRendererMock, - }; - - await act(async () => { - mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - expect(mockVisualization.initialize).not.toHaveBeenCalled(); - }); - - expect(mockVisualization.initialize).toHaveBeenCalled(); - }); - - it('should pass the public frame api into visualization initialize', async () => { - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - }, - - ExpressionRenderer: expressionRendererMock, - }; - await act(async () => { - mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - expect(mockVisualization.initialize).not.toHaveBeenCalled(); - }); - - expect(mockVisualization.initialize).toHaveBeenCalledWith({ - datasourceLayers: {}, - addNewLayer: expect.any(Function), - removeLayers: expect.any(Function), - query: { query: '', language: 'lucene' }, - filters: [], - dateRange: { fromDate: '2021-01-10T04:00:00.000Z', toDate: '2021-01-10T08:00:00.000Z' }, - availablePalettes: props.palettes, - searchSessionId: 'sessionId-1', - }); - }); - - it('should add new layer on active datasource on frame api call', async () => { - const initialState = { datasource2: '' }; - mockDatasource2.initialize.mockReturnValue(Promise.resolve(initialState)); - - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - testDatasource2: mockDatasource2, - }, - - ExpressionRenderer: expressionRendererMock, - }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, { - persistedDoc: { - visualizationType: 'testVis', - title: '', - state: { + const lensStore = ( + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { + activeDatasourceId: 'testDatasource', datasourceStates: { - testDatasource2: mockDatasource2, + testDatasource: { + isLoading: true, + state: { + internalState1: '', + }, + }, }, - visualization: {}, - query: { query: '', language: 'lucene' }, - filters: [], }, - references: [], - }, - }); - act(() => { - mockVisualization.initialize.mock.calls[0][0].addNewLayer(); - }); - - expect(mockDatasource2.insertLayer).toHaveBeenCalledWith(initialState, expect.anything()); - }); - - it('should remove layer on active datasource on frame api call', async () => { - const initialState = { datasource2: '' }; - mockDatasource.getLayers.mockReturnValue(['first']); - mockDatasource2.initialize.mockReturnValue(Promise.resolve(initialState)); - mockDatasource2.getLayers.mockReturnValue(['abc', 'def']); - mockDatasource2.removeLayer.mockReturnValue({ removed: true }); - mockVisualization.getLayerIds.mockReturnValue(['first', 'abc', 'def']); - - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - testDatasource2: mockDatasource2, - }, - ExpressionRenderer: expressionRendererMock, - }; - - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, { - persistedDoc: { - visualizationType: 'testVis', - title: '', - state: { - datasourceStates: { - testDatasource2: mockDatasource2, + }) + ).lensStore; + expect(mockDatasource.renderDataPanel).not.toHaveBeenCalled(); + lensStore.dispatch( + setState({ + datasourceStates: { + testDatasource: { + isLoading: false, + state: { + internalState1: '', + }, }, - visualization: {}, - query: { query: '', language: 'lucene' }, - filters: [], }, - references: [], - }, - }); - - act(() => { - mockVisualization.initialize.mock.calls[0][0].removeLayers(['abc', 'def']); - }); - - expect(mockDatasource2.removeLayer).toHaveBeenCalledWith(initialState, 'abc'); - expect(mockDatasource2.removeLayer).toHaveBeenCalledWith({ removed: true }, 'def'); - }); - - it('should render data panel after initialization is complete', async () => { - const initialState = {}; - let databaseInitialized: ({}) => void; - - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: { - ...mockDatasource, - initialize: () => - new Promise((resolve) => { - databaseInitialized = resolve; - }), - }, - }, - - ExpressionRenderer: expressionRendererMock, - }; - - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - - await act(async () => { - databaseInitialized!(initialState); - }); - expect(mockDatasource.renderDataPanel).toHaveBeenCalledWith( - expect.any(Element), - expect.objectContaining({ state: initialState }) + }) ); + expect(mockDatasource.renderDataPanel).toHaveBeenCalled(); }); it('should initialize visualization state and render config panel', async () => { @@ -396,7 +193,12 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { + visualization: { activeId: 'testVis', state: initialState }, + }, + }); expect(mockVisualization.getConfiguration).toHaveBeenCalledWith( expect.objectContaining({ state: initialState }) @@ -422,7 +224,22 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance; + instance = ( + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { + visualization: { activeId: 'testVis', state: null }, + datasourceStates: { + testDatasource: { + isLoading: false, + state: { + internalState1: '', + }, + }, + }, + }, + }) + ).instance; instance.update(); @@ -437,37 +254,50 @@ describe('editor_frame', () => { mockDatasource.toExpression.mockReturnValue('datasource'); mockDatasource2.toExpression.mockImplementation((_state, layerId) => `datasource_${layerId}`); mockDatasource.initialize.mockImplementation((initialState) => Promise.resolve(initialState)); - mockDatasource.getLayers.mockReturnValue(['first']); + mockDatasource.getLayers.mockReturnValue(['first', 'second']); mockDatasource2.initialize.mockImplementation((initialState) => Promise.resolve(initialState) ); - mockDatasource2.getLayers.mockReturnValue(['second', 'third']); + mockDatasource2.getLayers.mockReturnValue(['third']); const props = { ...getDefaultProps(), visualizationMap: { testVis: { ...mockVisualization, toExpression: () => 'vis' }, }, - datasourceMap: { testDatasource: mockDatasource, testDatasource2: mockDatasource2 }, + datasourceMap: { + testDatasource: { + ...mockDatasource, + toExpression: () => 'datasource', + }, + testDatasource2: { + ...mockDatasource2, + toExpression: () => 'datasource_second', + }, + }, ExpressionRenderer: expressionRendererMock, }; instance = ( - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, { - persistedDoc: { - visualizationType: 'testVis', - title: '', - state: { - datasourceStates: { - testDatasource: {}, - testDatasource2: {}, + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { + visualization: { activeId: 'testVis', state: null }, + datasourceStates: { + testDatasource: { + isLoading: false, + state: { + internalState1: '', + }, + }, + testDatasource2: { + isLoading: false, + state: { + internalState1: '', + }, }, - visualization: {}, - query: { query: '', language: 'lucene' }, - filters: [], }, - references: [], }, }) ).instance; @@ -515,7 +345,7 @@ describe('editor_frame', () => { "chain": Array [ Object { "arguments": Object {}, - "function": "datasource_second", + "function": "datasource", "type": "function", }, ], @@ -525,7 +355,7 @@ describe('editor_frame', () => { "chain": Array [ Object { "arguments": Object {}, - "function": "datasource_third", + "function": "datasource_second", "type": "function", }, ], @@ -562,7 +392,19 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { + activeDatasourceId: 'testDatasource', + visualization: { activeId: mockVisualization.id, state: {} }, + datasourceStates: { + testDatasource: { + isLoading: false, + state: '', + }, + }, + }, + }); const updatedState = {}; const setDatasourceState = (mockDatasource.renderDataPanel as jest.Mock).mock.calls[0][1] .setState; @@ -593,7 +435,7 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); + await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data }); const setDatasourceState = (mockDatasource.renderDataPanel as jest.Mock).mock.calls[0][1] .setState; @@ -629,7 +471,10 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { visualization: { activeId: mockVisualization.id, state: {} } }, + }); const updatedPublicAPI: DatasourcePublicAPI = { datasourceId: 'testDatasource', @@ -659,58 +504,10 @@ describe('editor_frame', () => { }); describe('datasource public api communication', () => { - it('should pass the datasource api for each layer to the visualization', async () => { - mockDatasource.getLayers.mockReturnValue(['first']); - mockDatasource2.getLayers.mockReturnValue(['second', 'third']); - mockVisualization.getLayerIds.mockReturnValue(['first', 'second', 'third']); - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - testDatasource2: mockDatasource2, - }, - - ExpressionRenderer: expressionRendererMock, - }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, { - persistedDoc: { - visualizationType: 'testVis', - title: '', - state: { - datasourceStates: { - testDatasource: {}, - testDatasource2: {}, - }, - visualization: {}, - query: { query: '', language: 'lucene' }, - filters: [], - }, - references: [], - }, - }); - - expect(mockVisualization.getConfiguration).toHaveBeenCalled(); - - const datasourceLayers = - mockVisualization.getConfiguration.mock.calls[0][0].frame.datasourceLayers; - expect(datasourceLayers.first).toBe(mockDatasource.publicAPIMock); - expect(datasourceLayers.second).toBe(mockDatasource2.publicAPIMock); - expect(datasourceLayers.third).toBe(mockDatasource2.publicAPIMock); - }); - - it('should create a separate datasource public api for each layer', async () => { - mockDatasource.initialize.mockImplementation((initialState) => Promise.resolve(initialState)); + it('should give access to the datasource state in the datasource factory function', async () => { + const datasourceState = {}; + mockDatasource.initialize.mockResolvedValue(datasourceState); mockDatasource.getLayers.mockReturnValue(['first']); - mockDatasource2.initialize.mockImplementation((initialState) => - Promise.resolve(initialState) - ); - mockDatasource2.getLayers.mockReturnValue(['second', 'third']); - - const datasource1State = { datasource1: '' }; - const datasource2State = { datasource2: '' }; const props = { ...getDefaultProps(), @@ -719,66 +516,22 @@ describe('editor_frame', () => { }, datasourceMap: { testDatasource: mockDatasource, - testDatasource2: mockDatasource2, }, ExpressionRenderer: expressionRendererMock, }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, { - persistedDoc: { - visualizationType: 'testVis', - title: '', - state: { - datasourceStates: { - testDatasource: datasource1State, - testDatasource2: datasource2State, + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { + datasourceStates: { + testDatasource: { + isLoading: false, + state: {}, }, - visualization: {}, - query: { query: '', language: 'lucene' }, - filters: [], }, - references: [], }, }); - expect(mockDatasource.getPublicAPI).toHaveBeenCalledWith( - expect.objectContaining({ - state: datasource1State, - layerId: 'first', - }) - ); - expect(mockDatasource2.getPublicAPI).toHaveBeenCalledWith( - expect.objectContaining({ - state: datasource2State, - layerId: 'second', - }) - ); - expect(mockDatasource2.getPublicAPI).toHaveBeenCalledWith( - expect.objectContaining({ - state: datasource2State, - layerId: 'third', - }) - ); - }); - - it('should give access to the datasource state in the datasource factory function', async () => { - const datasourceState = {}; - mockDatasource.initialize.mockResolvedValue(datasourceState); - mockDatasource.getLayers.mockReturnValue(['first']); - - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - }, - - ExpressionRenderer: expressionRendererMock, - }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - expect(mockDatasource.getPublicAPI).toHaveBeenCalledWith({ state: datasourceState, layerId: 'first', @@ -832,7 +585,8 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance; + instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data })) + .instance; // necessary to flush elements to dom synchronously instance.update(); @@ -842,14 +596,6 @@ describe('editor_frame', () => { instance.unmount(); }); - it('should have initialized only the initial datasource and visualization', () => { - expect(mockDatasource.initialize).toHaveBeenCalled(); - expect(mockDatasource2.initialize).not.toHaveBeenCalled(); - - expect(mockVisualization.initialize).toHaveBeenCalled(); - expect(mockVisualization2.initialize).not.toHaveBeenCalled(); - }); - it('should initialize other datasource on switch', async () => { await act(async () => { instance.find('button[data-test-subj="datasource-switch"]').simulate('click'); @@ -859,6 +605,7 @@ describe('editor_frame', () => { '[data-test-subj="datasource-switch-testDatasource2"]' ) as HTMLButtonElement).click(); }); + instance.update(); expect(mockDatasource2.initialize).toHaveBeenCalled(); }); @@ -915,9 +662,7 @@ describe('editor_frame', () => { expect(mockDatasource.publicAPIMock.getTableSpec).toHaveBeenCalled(); expect(mockVisualization2.getSuggestions).toHaveBeenCalled(); expect(mockVisualization2.initialize).toHaveBeenCalledWith( - expect.objectContaining({ - datasourceLayers: expect.objectContaining({ first: mockDatasource.publicAPIMock }), - }), + expect.any(Function), // generated layerId undefined, undefined ); @@ -928,28 +673,6 @@ describe('editor_frame', () => { }); describe('suggestions', () => { - it('should fetch suggestions of currently active datasource when initializes from visualization trigger', async () => { - const props = { - ...getDefaultProps(), - initialContext: { - indexPatternId: '1', - fieldName: 'test', - }, - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - testDatasource2: mockDatasource2, - }, - - ExpressionRenderer: expressionRendererMock, - }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - - expect(mockDatasource.getDatasourceSuggestionsForVisualizeField).toHaveBeenCalled(); - }); - it('should fetch suggestions of currently active datasource', async () => { const props = { ...getDefaultProps(), @@ -963,7 +686,7 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); + await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data }); expect(mockDatasource.getDatasourceSuggestionsFromCurrentState).toHaveBeenCalled(); expect(mockDatasource2.getDatasourceSuggestionsFromCurrentState).not.toHaveBeenCalled(); @@ -996,7 +719,7 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); + await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data }); expect(mockVisualization.getSuggestions).toHaveBeenCalled(); expect(mockVisualization2.getSuggestions).toHaveBeenCalled(); @@ -1064,10 +787,9 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance; + instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data })) + .instance; - // TODO why is this necessary? - instance.update(); expect( instance .find('[data-test-subj="lnsSuggestion"]') @@ -1112,18 +834,16 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance; - - // TODO why is this necessary? - instance.update(); + instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data })) + .instance; act(() => { instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click'); }); // validation requires to calls this getConfiguration API - expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(7); - expect(mockVisualization.getConfiguration).toHaveBeenCalledWith( + expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(6); + expect(mockVisualization.getConfiguration).toHaveBeenLastCalledWith( expect.objectContaining({ state: suggestionVisState, }) @@ -1172,10 +892,8 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance; - - // TODO why is this necessary? - instance.update(); + instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data })) + .instance; act(() => { instance.find('[data-test-subj="lnsWorkspace"]').last().simulate('drop'); @@ -1191,7 +909,6 @@ describe('editor_frame', () => { it('should use the currently selected visualization if possible on field drop', async () => { mockDatasource.getLayers.mockReturnValue(['first', 'second', 'third']); const suggestionVisState = {}; - const props = { ...getDefaultProps(), visualizationMap: { @@ -1243,9 +960,21 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, } as EditorFrameProps; - instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance; - // TODO why is this necessary? - instance.update(); + instance = ( + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + preloadedState: { + datasourceStates: { + testDatasource: { + isLoading: false, + state: { + internalState1: '', + }, + }, + }, + }, + }) + ).instance; act(() => { instance.find('[data-test-subj="mockVisA"]').find(DragDrop).prop('onDrop')!( @@ -1345,10 +1074,11 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, } as EditorFrameProps; - instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance; - - // TODO why is this necessary? - instance.update(); + instance = ( + await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + }) + ).instance; act(() => { instance.find(DragDrop).filter('[dataTestSubj="lnsWorkspace"]').prop('onDrop')!( @@ -1389,32 +1119,21 @@ describe('editor_frame', () => { ExpressionRenderer: expressionRendererMock, }; - const { instance: el } = await mountWithProvider( - <EditorFrame {...props} />, - props.plugins.data - ); + const { instance: el, lensStore } = await mountWithProvider(<EditorFrame {...props} />, { + data: props.plugins.data, + }); instance = el; expect( instance.find(FrameLayout).prop('suggestionsPanel') as ReactElement ).not.toBeUndefined(); - await act(async () => { - (instance.find(FrameLayout).prop('dataPanel') as ReactElement)!.props.dispatch({ - type: 'TOGGLE_FULLSCREEN', - }); - }); - + lensStore.dispatch(setToggleFullscreen()); instance.update(); expect(instance.find(FrameLayout).prop('suggestionsPanel') as ReactElement).toBe(false); - await act(async () => { - (instance.find(FrameLayout).prop('dataPanel') as ReactElement)!.props.dispatch({ - type: 'TOGGLE_FULLSCREEN', - }); - }); - + lensStore.dispatch(setToggleFullscreen()); instance.update(); expect( @@ -1422,211 +1141,4 @@ describe('editor_frame', () => { ).not.toBeUndefined(); }); }); - - describe('passing state back to the caller', () => { - let resolver: (value: unknown) => void; - let instance: ReactWrapper; - - it('should call onChange only when the active datasource is finished loading', async () => { - const onChange = jest.fn(); - - mockDatasource.initialize.mockReturnValue( - new Promise((resolve) => { - resolver = resolve; - }) - ); - mockDatasource.getLayers.mockReturnValue(['first']); - mockDatasource.getPersistableState = jest.fn((x) => ({ - state: x, - savedObjectReferences: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }], - })); - mockVisualization.initialize.mockReturnValue({ initialState: true }); - - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - }, - - ExpressionRenderer: expressionRendererMock, - onChange, - }; - - let lensStore: LensRootStore = {} as LensRootStore; - await act(async () => { - const mounted = await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - lensStore = mounted.lensStore; - expect(lensStore.dispatch).toHaveBeenCalledTimes(0); - resolver({}); - }); - - expect(lensStore.dispatch).toHaveBeenCalledTimes(2); - expect(lensStore.dispatch).toHaveBeenNthCalledWith(1, { - payload: { - indexPatternsForTopNav: [{ id: '1' }], - lastKnownDoc: { - savedObjectId: undefined, - description: undefined, - references: [ - { - id: '1', - name: 'index-pattern-0', - type: 'index-pattern', - }, - ], - state: { - visualization: null, // Not yet loaded - datasourceStates: { testDatasource: {} }, - query: { query: '', language: 'lucene' }, - filters: [], - }, - title: '', - type: 'lens', - visualizationType: 'testVis', - }, - }, - type: 'app/onChangeFromEditorFrame', - }); - expect(lensStore.dispatch).toHaveBeenLastCalledWith({ - payload: { - indexPatternsForTopNav: [{ id: '1' }], - lastKnownDoc: { - references: [ - { - id: '1', - name: 'index-pattern-0', - type: 'index-pattern', - }, - ], - description: undefined, - savedObjectId: undefined, - state: { - visualization: { initialState: true }, // Now loaded - datasourceStates: { testDatasource: {} }, - query: { query: '', language: 'lucene' }, - filters: [], - }, - title: '', - type: 'lens', - visualizationType: 'testVis', - }, - }, - type: 'app/onChangeFromEditorFrame', - }); - }); - - it('should send back a persistable document when the state changes', async () => { - const onChange = jest.fn(); - - const initialState = { datasource: '' }; - - mockDatasource.initialize.mockResolvedValue(initialState); - mockDatasource.getLayers.mockReturnValue(['first']); - mockVisualization.initialize.mockReturnValue({ initialState: true }); - - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - }, - - ExpressionRenderer: expressionRendererMock, - onChange, - }; - - const { instance: el, lensStore } = await mountWithProvider( - <EditorFrame {...props} />, - props.plugins.data - ); - instance = el; - - expect(lensStore.dispatch).toHaveBeenCalledTimes(2); - - mockDatasource.toExpression.mockReturnValue('data expression'); - mockVisualization.toExpression.mockReturnValue('vis expression'); - await act(async () => { - lensStore.dispatch(setState({ query: { query: 'new query', language: 'lucene' } })); - }); - - instance.update(); - - expect(lensStore.dispatch).toHaveBeenCalledTimes(4); - expect(lensStore.dispatch).toHaveBeenNthCalledWith(3, { - payload: { - query: { - language: 'lucene', - query: 'new query', - }, - }, - type: 'app/setState', - }); - expect(lensStore.dispatch).toHaveBeenNthCalledWith(4, { - payload: { - lastKnownDoc: { - savedObjectId: undefined, - references: [], - state: { - datasourceStates: { testDatasource: { datasource: '' } }, - visualization: { initialState: true }, - query: { query: 'new query', language: 'lucene' }, - filters: [], - }, - title: '', - type: 'lens', - visualizationType: 'testVis', - }, - isSaveable: true, - }, - type: 'app/onChangeFromEditorFrame', - }); - }); - - it('should call onChange when the datasource makes an internal state change', async () => { - const onChange = jest.fn(); - - mockDatasource.initialize.mockResolvedValue({}); - mockDatasource.getLayers.mockReturnValue(['first']); - mockDatasource.getPersistableState = jest.fn((x) => ({ - state: x, - savedObjectReferences: [{ type: 'index-pattern', id: '1', name: '' }], - })); - mockVisualization.initialize.mockReturnValue({ initialState: true }); - - const props = { - ...getDefaultProps(), - visualizationMap: { - testVis: mockVisualization, - }, - datasourceMap: { - testDatasource: mockDatasource, - }, - - ExpressionRenderer: expressionRendererMock, - onChange, - }; - const mounted = await mountWithProvider(<EditorFrame {...props} />, props.plugins.data); - instance = mounted.instance; - const { lensStore } = mounted; - - expect(lensStore.dispatch).toHaveBeenCalledTimes(2); - - await act(async () => { - (instance.find(FrameLayout).prop('dataPanel') as ReactElement)!.props.dispatch({ - type: 'UPDATE_DATASOURCE_STATE', - updater: () => ({ - newState: true, - }), - datasourceId: 'testDatasource', - }); - }); - - expect(lensStore.dispatch).toHaveBeenCalledTimes(3); - }); - }); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx index bd96682f427fa..4b725c4cd1850 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx @@ -5,118 +5,53 @@ * 2.0. */ -import React, { useEffect, useReducer, useState, useCallback, useRef, useMemo } from 'react'; +import React, { useCallback, useRef, useMemo } from 'react'; import { CoreStart } from 'kibana/public'; -import { isEqual } from 'lodash'; -import { PaletteRegistry } from 'src/plugins/charts/public'; -import { IndexPattern } from '../../../../../../src/plugins/data/public'; -import { getAllIndexPatterns } from '../../utils'; import { ReactExpressionRendererType } from '../../../../../../src/plugins/expressions/public'; import { Datasource, FramePublicAPI, Visualization } from '../../types'; -import { reducer, getInitialState } from './state_management'; import { DataPanelWrapper } from './data_panel_wrapper'; import { ConfigPanelWrapper } from './config_panel'; import { FrameLayout } from './frame_layout'; import { SuggestionPanel } from './suggestion_panel'; import { WorkspacePanel } from './workspace_panel'; -import { Document } from '../../persistence/saved_object_store'; import { DragDropIdentifier, RootDragDropProvider } from '../../drag_drop'; -import { getSavedObjectFormat } from './save'; -import { generateId } from '../../id_generator'; -import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public'; import { EditorFrameStartPlugins } from '../service'; -import { initializeDatasources, createDatasourceLayers } from './state_helpers'; -import { - applyVisualizeFieldSuggestions, - getTopSuggestionForField, - switchToSuggestion, - Suggestion, -} from './suggestion_helpers'; +import { createDatasourceLayers } from './state_helpers'; +import { getTopSuggestionForField, switchToSuggestion, Suggestion } from './suggestion_helpers'; import { trackUiEvent } from '../../lens_ui_telemetry'; -import { - useLensSelector, - useLensDispatch, - LensAppState, - DispatchSetState, - onChangeFromEditorFrame, -} from '../../state_management'; +import { useLensSelector, useLensDispatch } from '../../state_management'; export interface EditorFrameProps { datasourceMap: Record<string, Datasource>; visualizationMap: Record<string, Visualization>; ExpressionRenderer: ReactExpressionRendererType; - palettes: PaletteRegistry; - onError: (e: { message: string }) => void; core: CoreStart; plugins: EditorFrameStartPlugins; showNoDataPopover: () => void; - initialContext?: VisualizeFieldContext; } export function EditorFrame(props: EditorFrameProps) { const { - filters, - searchSessionId, - savedQuery, - query, - persistedDoc, - indexPatternsForTopNav, - lastKnownDoc, activeData, - isSaveable, resolvedDateRange: dateRange, - } = useLensSelector((state) => state.app); - const [state, dispatch] = useReducer(reducer, { ...props, doc: persistedDoc }, getInitialState); + query, + filters, + searchSessionId, + activeDatasourceId, + visualization, + datasourceStates, + stagedPreview, + isFullscreenDatasource, + } = useLensSelector((state) => state.lens); + const dispatchLens = useLensDispatch(); - const dispatchChange: DispatchSetState = useCallback( - (s: Partial<LensAppState>) => dispatchLens(onChangeFromEditorFrame(s)), - [dispatchLens] - ); - const [visualizeTriggerFieldContext, setVisualizeTriggerFieldContext] = useState( - props.initialContext - ); - const { onError } = props; - const activeVisualization = - state.visualization.activeId && props.visualizationMap[state.visualization.activeId]; - const allLoaded = Object.values(state.datasourceStates).every( - ({ isLoading }) => typeof isLoading === 'boolean' && !isLoading - ); + const allLoaded = Object.values(datasourceStates).every(({ isLoading }) => isLoading === false); - // Initialize current datasource and all active datasources - useEffect( - () => { - // prevents executing dispatch on unmounted component - let isUnmounted = false; - if (!allLoaded) { - initializeDatasources( - props.datasourceMap, - state.datasourceStates, - persistedDoc?.references, - visualizeTriggerFieldContext, - { isFullEditor: true } - ) - .then((result) => { - if (!isUnmounted) { - Object.entries(result).forEach(([datasourceId, { state: datasourceState }]) => { - dispatch({ - type: 'UPDATE_DATASOURCE_STATE', - updater: datasourceState, - datasourceId, - }); - }); - } - }) - .catch(onError); - } - return () => { - isUnmounted = true; - }; - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [allLoaded, onError] + const datasourceLayers = React.useMemo( + () => createDatasourceLayers(props.datasourceMap, datasourceStates), + [props.datasourceMap, datasourceStates] ); - const datasourceLayers = createDatasourceLayers(props.datasourceMap, state.datasourceStates); const framePublicAPI: FramePublicAPI = useMemo( () => ({ @@ -126,232 +61,15 @@ export function EditorFrame(props: EditorFrameProps) { query, filters, searchSessionId, - availablePalettes: props.palettes, - - addNewLayer() { - const newLayerId = generateId(); - - dispatch({ - type: 'UPDATE_LAYER', - datasourceId: state.activeDatasourceId!, - layerId: newLayerId, - updater: props.datasourceMap[state.activeDatasourceId!].insertLayer, - }); - - return newLayerId; - }, - - removeLayers(layerIds: string[]) { - if (activeVisualization && activeVisualization.removeLayer && state.visualization.state) { - dispatch({ - type: 'UPDATE_VISUALIZATION_STATE', - visualizationId: activeVisualization.id, - updater: layerIds.reduce( - (acc, layerId) => - activeVisualization.removeLayer - ? activeVisualization.removeLayer(acc, layerId) - : acc, - state.visualization.state - ), - }); - } - - layerIds.forEach((layerId) => { - const layerDatasourceId = Object.entries(props.datasourceMap).find( - ([datasourceId, datasource]) => - state.datasourceStates[datasourceId] && - datasource.getLayers(state.datasourceStates[datasourceId].state).includes(layerId) - )![0]; - dispatch({ - type: 'UPDATE_LAYER', - layerId, - datasourceId: layerDatasourceId, - updater: props.datasourceMap[layerDatasourceId].removeLayer, - }); - }); - }, }), - [ - activeData, - activeVisualization, - datasourceLayers, - dateRange, - query, - filters, - searchSessionId, - props.palettes, - props.datasourceMap, - state.activeDatasourceId, - state.datasourceStates, - state.visualization.state, - ] - ); - - useEffect( - () => { - if (persistedDoc) { - dispatch({ - type: 'VISUALIZATION_LOADED', - doc: { - ...persistedDoc, - state: { - ...persistedDoc.state, - visualization: persistedDoc.visualizationType - ? props.visualizationMap[persistedDoc.visualizationType].initialize( - framePublicAPI, - persistedDoc.state.visualization - ) - : persistedDoc.state.visualization, - }, - }, - }); - } else { - dispatch({ - type: 'RESET', - state: getInitialState(props), - }); - } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [persistedDoc] - ); - - // Initialize visualization as soon as all datasources are ready - useEffect( - () => { - if (allLoaded && state.visualization.state === null && activeVisualization) { - const initialVisualizationState = activeVisualization.initialize(framePublicAPI); - dispatch({ - type: 'UPDATE_VISUALIZATION_STATE', - visualizationId: activeVisualization.id, - updater: initialVisualizationState, - }); - } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [allLoaded, activeVisualization, state.visualization.state] - ); - - // Get suggestions for visualize field when all datasources are ready - useEffect(() => { - if (allLoaded && visualizeTriggerFieldContext && !persistedDoc) { - applyVisualizeFieldSuggestions({ - datasourceMap: props.datasourceMap, - datasourceStates: state.datasourceStates, - visualizationMap: props.visualizationMap, - activeVisualizationId: state.visualization.activeId, - visualizationState: state.visualization.state, - visualizeTriggerFieldContext, - dispatch, - }); - setVisualizeTriggerFieldContext(undefined); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [allLoaded]); - - const getStateToUpdate: ( - arg: { - filterableIndexPatterns: string[]; - doc: Document; - isSaveable: boolean; - }, - oldState: { - isSaveable: boolean; - indexPatternsForTopNav: IndexPattern[]; - persistedDoc?: Document; - lastKnownDoc?: Document; - } - ) => Promise<Partial<LensAppState> | undefined> = async ( - { filterableIndexPatterns, doc, isSaveable: incomingIsSaveable }, - prevState - ) => { - const batchedStateToUpdate: Partial<LensAppState> = {}; - - if (incomingIsSaveable !== prevState.isSaveable) { - batchedStateToUpdate.isSaveable = incomingIsSaveable; - } - - if (!isEqual(prevState.persistedDoc, doc) && !isEqual(prevState.lastKnownDoc, doc)) { - batchedStateToUpdate.lastKnownDoc = doc; - } - const hasIndexPatternsChanged = - prevState.indexPatternsForTopNav.length !== filterableIndexPatterns.length || - filterableIndexPatterns.some( - (id) => !prevState.indexPatternsForTopNav.find((indexPattern) => indexPattern.id === id) - ); - // Update the cached index patterns if the user made a change to any of them - if (hasIndexPatternsChanged) { - const { indexPatterns } = await getAllIndexPatterns( - filterableIndexPatterns, - props.plugins.data.indexPatterns - ); - if (indexPatterns) { - batchedStateToUpdate.indexPatternsForTopNav = indexPatterns; - } - } - if (Object.keys(batchedStateToUpdate).length) { - return batchedStateToUpdate; - } - }; - - // The frame needs to call onChange every time its internal state changes - useEffect( - () => { - const activeDatasource = - state.activeDatasourceId && !state.datasourceStates[state.activeDatasourceId].isLoading - ? props.datasourceMap[state.activeDatasourceId] - : undefined; - - if (!activeDatasource || !activeVisualization) { - return; - } - - const savedObjectFormat = getSavedObjectFormat({ - activeDatasources: Object.keys(state.datasourceStates).reduce( - (datasourceMap, datasourceId) => ({ - ...datasourceMap, - [datasourceId]: props.datasourceMap[datasourceId], - }), - {} - ), - visualization: activeVisualization, - state, - framePublicAPI, - }); - - // Frame loader (app or embeddable) is expected to call this when it loads and updates - // This should be replaced with a top-down state - getStateToUpdate(savedObjectFormat, { - isSaveable, - persistedDoc, - indexPatternsForTopNav, - lastKnownDoc, - }).then((batchedStateToUpdate) => { - if (batchedStateToUpdate) { - dispatchChange(batchedStateToUpdate); - } - }); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [ - activeVisualization, - state.datasourceStates, - state.visualization, - activeData, - query, - filters, - savedQuery, - state.title, - dispatchChange, - ] + [activeData, datasourceLayers, dateRange, query, filters, searchSessionId] ); // Using a ref to prevent rerenders in the child components while keeping the latest state const getSuggestionForField = useRef<(field: DragDropIdentifier) => Suggestion | undefined>(); getSuggestionForField.current = (field: DragDropIdentifier) => { - const { activeDatasourceId, datasourceStates } = state; - const activeVisualizationId = state.visualization.activeId; - const visualizationState = state.visualization.state; + const activeVisualizationId = visualization.activeId; + const visualizationState = visualization.state; const { visualizationMap, datasourceMap } = props; if (!field || !activeDatasourceId) { @@ -379,93 +97,77 @@ export function EditorFrame(props: EditorFrameProps) { const suggestion = getSuggestionForField.current!(field); if (suggestion) { trackUiEvent('drop_onto_workspace'); - switchToSuggestion(dispatch, suggestion, 'SWITCH_VISUALIZATION'); + switchToSuggestion(dispatchLens, suggestion, 'SWITCH_VISUALIZATION'); } }, - [getSuggestionForField] + [getSuggestionForField, dispatchLens] ); return ( <RootDragDropProvider> <FrameLayout - isFullscreen={Boolean(state.isFullscreenDatasource)} + isFullscreen={Boolean(isFullscreenDatasource)} dataPanel={ <DataPanelWrapper datasourceMap={props.datasourceMap} - activeDatasource={state.activeDatasourceId} - datasourceState={ - state.activeDatasourceId - ? state.datasourceStates[state.activeDatasourceId].state - : null - } - datasourceIsLoading={ - state.activeDatasourceId - ? state.datasourceStates[state.activeDatasourceId].isLoading - : true - } - dispatch={dispatch} core={props.core} - query={query} - dateRange={dateRange} - filters={filters} + plugins={props.plugins} showNoDataPopover={props.showNoDataPopover} + activeDatasource={activeDatasourceId} + datasourceState={activeDatasourceId ? datasourceStates[activeDatasourceId].state : null} + datasourceIsLoading={ + activeDatasourceId ? datasourceStates[activeDatasourceId].isLoading : true + } dropOntoWorkspace={dropOntoWorkspace} hasSuggestionForField={hasSuggestionForField} - plugins={props.plugins} /> } configPanel={ allLoaded && ( <ConfigPanelWrapper - activeDatasourceId={state.activeDatasourceId!} + activeDatasourceId={activeDatasourceId!} datasourceMap={props.datasourceMap} - datasourceStates={state.datasourceStates} + datasourceStates={datasourceStates} visualizationMap={props.visualizationMap} - activeVisualizationId={state.visualization.activeId} - dispatch={dispatch} - visualizationState={state.visualization.state} + activeVisualizationId={visualization.activeId} + visualizationState={visualization.state} framePublicAPI={framePublicAPI} core={props.core} - isFullscreen={Boolean(state.isFullscreenDatasource)} + isFullscreen={Boolean(isFullscreenDatasource)} /> ) } workspacePanel={ allLoaded && ( <WorkspacePanel - title={state.title} - activeDatasourceId={state.activeDatasourceId} - activeVisualizationId={state.visualization.activeId} + activeDatasourceId={activeDatasourceId} + activeVisualizationId={visualization.activeId} datasourceMap={props.datasourceMap} - datasourceStates={state.datasourceStates} + datasourceStates={datasourceStates} framePublicAPI={framePublicAPI} - visualizationState={state.visualization.state} + visualizationState={visualization.state} visualizationMap={props.visualizationMap} - dispatch={dispatch} - isFullscreen={Boolean(state.isFullscreenDatasource)} + isFullscreen={Boolean(isFullscreenDatasource)} ExpressionRenderer={props.ExpressionRenderer} core={props.core} plugins={props.plugins} - visualizeTriggerFieldContext={visualizeTriggerFieldContext} getSuggestionForField={getSuggestionForField.current} /> ) } suggestionsPanel={ allLoaded && - !state.isFullscreenDatasource && ( + !isFullscreenDatasource && ( <SuggestionPanel - frame={framePublicAPI} - activeDatasourceId={state.activeDatasourceId} - activeVisualizationId={state.visualization.activeId} - datasourceMap={props.datasourceMap} - datasourceStates={state.datasourceStates} - visualizationState={state.visualization.state} visualizationMap={props.visualizationMap} - dispatch={dispatch} + datasourceMap={props.datasourceMap} ExpressionRenderer={props.ExpressionRenderer} - stagedPreview={state.stagedPreview} - plugins={props.plugins} + stagedPreview={stagedPreview} + frame={framePublicAPI} + activeVisualizationId={visualization.activeId} + activeDatasourceId={activeDatasourceId} + datasourceStates={datasourceStates} + visualizationState={visualization.state} /> ) } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts index 66d83b1cd697f..8d4fb0683cb0c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts @@ -7,4 +7,3 @@ export * from './editor_frame'; export * from './state_helpers'; -export * from './state_management'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts deleted file mode 100644 index b0bff1800d32f..0000000000000 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts +++ /dev/null @@ -1,116 +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 { getSavedObjectFormat, Props } from './save'; -import { createMockDatasource, createMockFramePublicAPI, createMockVisualization } from '../mocks'; -import { esFilters, IIndexPattern, IFieldType } from '../../../../../../src/plugins/data/public'; - -jest.mock('./expression_helpers'); - -describe('save editor frame state', () => { - const mockVisualization = createMockVisualization(); - const mockDatasource = createMockDatasource('a'); - const mockIndexPattern = ({ id: 'indexpattern' } as unknown) as IIndexPattern; - const mockField = ({ name: '@timestamp' } as unknown) as IFieldType; - - mockDatasource.getPersistableState.mockImplementation((x) => ({ - state: x, - savedObjectReferences: [], - })); - const saveArgs: Props = { - activeDatasources: { - indexpattern: mockDatasource, - }, - visualization: mockVisualization, - state: { - title: 'aaa', - datasourceStates: { - indexpattern: { - state: 'hello', - isLoading: false, - }, - }, - activeDatasourceId: 'indexpattern', - visualization: { activeId: '2', state: {} }, - }, - framePublicAPI: { - ...createMockFramePublicAPI(), - addNewLayer: jest.fn(), - removeLayers: jest.fn(), - datasourceLayers: { - first: mockDatasource.publicAPIMock, - }, - query: { query: '', language: 'lucene' }, - dateRange: { fromDate: 'now-7d', toDate: 'now' }, - filters: [esFilters.buildExistsFilter(mockField, mockIndexPattern)], - }, - }; - - it('transforms from internal state to persisted doc format', async () => { - const datasource = createMockDatasource('a'); - datasource.getPersistableState.mockImplementation((state) => ({ - state: { - stuff: `${state}_datasource_persisted`, - }, - savedObjectReferences: [], - })); - datasource.toExpression.mockReturnValue('my | expr'); - - const visualization = createMockVisualization(); - visualization.toExpression.mockReturnValue('vis | expr'); - - const { doc, filterableIndexPatterns, isSaveable } = await getSavedObjectFormat({ - ...saveArgs, - activeDatasources: { - indexpattern: datasource, - }, - state: { - title: 'bbb', - datasourceStates: { - indexpattern: { - state: '2', - isLoading: false, - }, - }, - activeDatasourceId: 'indexpattern', - visualization: { activeId: '3', state: '4' }, - }, - visualization, - }); - - expect(filterableIndexPatterns).toEqual([]); - expect(isSaveable).toEqual(true); - expect(doc).toEqual({ - id: undefined, - state: { - datasourceStates: { - indexpattern: { - stuff: '2_datasource_persisted', - }, - }, - visualization: '4', - query: { query: '', language: 'lucene' }, - filters: [ - { - meta: { indexRefName: 'filter-index-pattern-0' }, - exists: { field: '@timestamp' }, - }, - ], - }, - references: [ - { - id: 'indexpattern', - name: 'filter-index-pattern-0', - type: 'index-pattern', - }, - ], - title: 'bbb', - type: 'lens', - visualizationType: '3', - }); - }); -}); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.ts deleted file mode 100644 index 86a28be65d2b9..0000000000000 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.ts +++ /dev/null @@ -1,79 +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 { uniq } from 'lodash'; -import { SavedObjectReference } from 'kibana/public'; -import { EditorFrameState } from './state_management'; -import { Document } from '../../persistence/saved_object_store'; -import { Datasource, Visualization, FramePublicAPI } from '../../types'; -import { extractFilterReferences } from '../../persistence'; -import { buildExpression } from './expression_helpers'; - -export interface Props { - activeDatasources: Record<string, Datasource>; - state: EditorFrameState; - visualization: Visualization; - framePublicAPI: FramePublicAPI; -} - -export function getSavedObjectFormat({ - activeDatasources, - state, - visualization, - framePublicAPI, -}: Props): { - doc: Document; - filterableIndexPatterns: string[]; - isSaveable: boolean; -} { - const datasourceStates: Record<string, unknown> = {}; - const references: SavedObjectReference[] = []; - Object.entries(activeDatasources).forEach(([id, datasource]) => { - const { state: persistableState, savedObjectReferences } = datasource.getPersistableState( - state.datasourceStates[id].state - ); - datasourceStates[id] = persistableState; - references.push(...savedObjectReferences); - }); - - const uniqueFilterableIndexPatternIds = uniq( - references.filter(({ type }) => type === 'index-pattern').map(({ id }) => id) - ); - - const { persistableFilters, references: filterReferences } = extractFilterReferences( - framePublicAPI.filters - ); - - references.push(...filterReferences); - - const expression = buildExpression({ - visualization, - visualizationState: state.visualization.state, - datasourceMap: activeDatasources, - datasourceStates: state.datasourceStates, - datasourceLayers: framePublicAPI.datasourceLayers, - }); - - return { - doc: { - savedObjectId: state.persistedId, - title: state.title, - description: state.description, - type: 'lens', - visualizationType: state.visualization.activeId, - state: { - datasourceStates, - visualization: state.visualization.state, - query: framePublicAPI.query, - filters: persistableFilters, - }, - references, - }, - filterableIndexPatterns: uniqueFilterableIndexPatternIds, - isSaveable: expression !== null, - }; -} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts index dffb0e75f2109..e861112f3f7b4 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts @@ -19,7 +19,7 @@ import { import { buildExpression } from './expression_helpers'; import { Document } from '../../persistence/saved_object_store'; import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public'; -import { getActiveDatasourceIdFromDoc } from './state_management'; +import { getActiveDatasourceIdFromDoc } from '../../utils'; import { ErrorMessage } from '../types'; import { getMissingCurrentDatasource, diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.test.ts deleted file mode 100644 index af8a9c0a85558..0000000000000 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.test.ts +++ /dev/null @@ -1,415 +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 { getInitialState, reducer } from './state_management'; -import { EditorFrameProps } from './index'; -import { Datasource, Visualization } from '../../types'; -import { createExpressionRendererMock } from '../mocks'; -import { coreMock } from 'src/core/public/mocks'; -import { uiActionsPluginMock } from '../../../../../../src/plugins/ui_actions/public/mocks'; -import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks'; -import { expressionsPluginMock } from '../../../../../../src/plugins/expressions/public/mocks'; -import { chartPluginMock } from 'src/plugins/charts/public/mocks'; - -describe('editor_frame state management', () => { - describe('initialization', () => { - let props: EditorFrameProps; - - beforeEach(() => { - props = { - onError: jest.fn(), - datasourceMap: { testDatasource: ({} as unknown) as Datasource }, - visualizationMap: { testVis: ({ initialize: jest.fn() } as unknown) as Visualization }, - ExpressionRenderer: createExpressionRendererMock(), - core: coreMock.createStart(), - plugins: { - uiActions: uiActionsPluginMock.createStartContract(), - data: dataPluginMock.createStartContract(), - expressions: expressionsPluginMock.createStartContract(), - charts: chartPluginMock.createStartContract(), - }, - palettes: chartPluginMock.createPaletteRegistry(), - showNoDataPopover: jest.fn(), - }; - }); - - it('should store initial datasource and visualization', () => { - const initialState = getInitialState(props); - expect(initialState.activeDatasourceId).toEqual('testDatasource'); - expect(initialState.visualization.activeId).toEqual('testVis'); - }); - - it('should not initialize visualization but set active id', () => { - const initialState = getInitialState(props); - - expect(initialState.visualization.state).toBe(null); - expect(initialState.visualization.activeId).toBe('testVis'); - expect(props.visualizationMap.testVis.initialize).not.toHaveBeenCalled(); - }); - - it('should prefill state if doc is passed in', () => { - const initialState = getInitialState({ - ...props, - doc: { - state: { - datasourceStates: { - testDatasource: { internalState1: '' }, - testDatasource2: { internalState2: '' }, - }, - visualization: {}, - query: { query: '', language: 'lucene' }, - filters: [], - }, - references: [], - title: '', - visualizationType: 'testVis', - }, - }); - - expect(initialState.datasourceStates).toMatchInlineSnapshot(` - Object { - "testDatasource": Object { - "isLoading": true, - "state": Object { - "internalState1": "", - }, - }, - "testDatasource2": Object { - "isLoading": true, - "state": Object { - "internalState2": "", - }, - }, - } - `); - expect(initialState.visualization).toMatchInlineSnapshot(` - Object { - "activeId": "testVis", - "state": null, - } - `); - }); - - it('should not set active id if initiated with empty document and visualizationMap is empty', () => { - const initialState = getInitialState({ ...props, visualizationMap: {} }); - - expect(initialState.visualization.state).toEqual(null); - expect(initialState.visualization.activeId).toEqual(null); - expect(props.visualizationMap.testVis.initialize).not.toHaveBeenCalled(); - }); - }); - - describe('state update', () => { - it('should update the corresponding visualization state on update', () => { - const newVisState = {}; - const newState = reducer( - { - datasourceStates: { - testDatasource: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'testDatasource', - title: 'aaa', - visualization: { - activeId: 'testVis', - state: {}, - }, - }, - { - type: 'UPDATE_VISUALIZATION_STATE', - visualizationId: 'testVis', - updater: newVisState, - } - ); - - expect(newState.visualization.state).toBe(newVisState); - }); - - it('should update the datasource state with passed in reducer', () => { - const datasourceReducer = jest.fn(() => ({ changed: true })); - const newState = reducer( - { - datasourceStates: { - testDatasource: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'testDatasource', - title: 'bbb', - visualization: { - activeId: 'testVis', - state: {}, - }, - }, - { - type: 'UPDATE_DATASOURCE_STATE', - updater: datasourceReducer, - datasourceId: 'testDatasource', - } - ); - - expect(newState.datasourceStates.testDatasource.state).toEqual({ changed: true }); - expect(datasourceReducer).toHaveBeenCalledTimes(1); - }); - - it('should update the layer state with passed in reducer', () => { - const newDatasourceState = {}; - const newState = reducer( - { - datasourceStates: { - testDatasource: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'testDatasource', - title: 'bbb', - visualization: { - activeId: 'testVis', - state: {}, - }, - }, - { - type: 'UPDATE_DATASOURCE_STATE', - updater: newDatasourceState, - datasourceId: 'testDatasource', - } - ); - - expect(newState.datasourceStates.testDatasource.state).toBe(newDatasourceState); - }); - - it('should should switch active visualization', () => { - const testVisState = {}; - const newVisState = {}; - const newState = reducer( - { - datasourceStates: { - testDatasource: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'testDatasource', - title: 'ccc', - visualization: { - activeId: 'testVis', - state: testVisState, - }, - }, - { - type: 'SWITCH_VISUALIZATION', - newVisualizationId: 'testVis2', - initialState: newVisState, - } - ); - - expect(newState.visualization.state).toBe(newVisState); - }); - - it('should should switch active visualization and update datasource state', () => { - const testVisState = {}; - const newVisState = {}; - const newDatasourceState = {}; - const newState = reducer( - { - datasourceStates: { - testDatasource: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'testDatasource', - title: 'ddd', - visualization: { - activeId: 'testVis', - state: testVisState, - }, - }, - { - type: 'SWITCH_VISUALIZATION', - newVisualizationId: 'testVis2', - initialState: newVisState, - datasourceState: newDatasourceState, - datasourceId: 'testDatasource', - } - ); - - expect(newState.visualization.state).toBe(newVisState); - expect(newState.datasourceStates.testDatasource.state).toBe(newDatasourceState); - }); - - it('should should switch active datasource and initialize new state', () => { - const newState = reducer( - { - datasourceStates: { - testDatasource: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'testDatasource', - title: 'eee', - visualization: { - activeId: 'testVis', - state: {}, - }, - }, - { - type: 'SWITCH_DATASOURCE', - newDatasourceId: 'testDatasource2', - } - ); - - expect(newState.activeDatasourceId).toEqual('testDatasource2'); - expect(newState.datasourceStates.testDatasource2.isLoading).toEqual(true); - }); - - it('not initialize already initialized datasource on switch', () => { - const datasource2State = {}; - const newState = reducer( - { - datasourceStates: { - testDatasource: { - state: {}, - isLoading: false, - }, - testDatasource2: { - state: datasource2State, - isLoading: false, - }, - }, - activeDatasourceId: 'testDatasource', - title: 'eee', - visualization: { - activeId: 'testVis', - state: {}, - }, - }, - { - type: 'SWITCH_DATASOURCE', - newDatasourceId: 'testDatasource2', - } - ); - - expect(newState.activeDatasourceId).toEqual('testDatasource2'); - expect(newState.datasourceStates.testDatasource2.state).toBe(datasource2State); - }); - - it('should reset the state', () => { - const newState = reducer( - { - datasourceStates: { - a: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'a', - title: 'jjj', - visualization: { - activeId: 'b', - state: {}, - }, - }, - { - type: 'RESET', - state: { - datasourceStates: { - z: { - isLoading: false, - state: { hola: 'muchacho' }, - }, - }, - activeDatasourceId: 'z', - persistedId: 'bar', - title: 'lll', - visualization: { - activeId: 'q', - state: { my: 'viz' }, - }, - }, - } - ); - - expect(newState).toMatchObject({ - datasourceStates: { - z: { - isLoading: false, - state: { hola: 'muchacho' }, - }, - }, - activeDatasourceId: 'z', - persistedId: 'bar', - visualization: { - activeId: 'q', - state: { my: 'viz' }, - }, - }); - }); - - it('should load the state from the doc', () => { - const newState = reducer( - { - datasourceStates: { - a: { - state: {}, - isLoading: false, - }, - }, - activeDatasourceId: 'a', - title: 'mmm', - visualization: { - activeId: 'b', - state: {}, - }, - }, - { - type: 'VISUALIZATION_LOADED', - doc: { - savedObjectId: 'b', - state: { - datasourceStates: { a: { foo: 'c' } }, - visualization: { bar: 'd' }, - query: { query: '', language: 'lucene' }, - filters: [], - }, - title: 'heyo!', - description: 'My lens', - type: 'lens', - visualizationType: 'line', - references: [], - }, - } - ); - - expect(newState).toEqual({ - activeDatasourceId: 'a', - datasourceStates: { - a: { - isLoading: true, - state: { - foo: 'c', - }, - }, - }, - persistedId: 'b', - title: 'heyo!', - description: 'My lens', - visualization: { - activeId: 'line', - state: { - bar: 'd', - }, - }, - }); - }); - }); -}); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.ts deleted file mode 100644 index a87aa7a2cb428..0000000000000 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.ts +++ /dev/null @@ -1,293 +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 { EditorFrameProps } from './index'; -import { Document } from '../../persistence/saved_object_store'; - -export interface PreviewState { - visualization: { - activeId: string | null; - state: unknown; - }; - datasourceStates: Record<string, { state: unknown; isLoading: boolean }>; -} - -export interface EditorFrameState extends PreviewState { - persistedId?: string; - title: string; - description?: string; - stagedPreview?: PreviewState; - activeDatasourceId: string | null; - isFullscreenDatasource?: boolean; -} - -export type Action = - | { - type: 'RESET'; - state: EditorFrameState; - } - | { - type: 'UPDATE_TITLE'; - title: string; - } - | { - type: 'UPDATE_STATE'; - // Just for diagnostics, so we can determine what action - // caused this update. - subType: string; - updater: (prevState: EditorFrameState) => EditorFrameState; - } - | { - type: 'UPDATE_DATASOURCE_STATE'; - updater: unknown | ((prevState: unknown) => unknown); - datasourceId: string; - clearStagedPreview?: boolean; - } - | { - type: 'UPDATE_VISUALIZATION_STATE'; - visualizationId: string; - updater: unknown | ((state: unknown) => unknown); - clearStagedPreview?: boolean; - } - | { - type: 'UPDATE_LAYER'; - layerId: string; - datasourceId: string; - updater: (state: unknown, layerId: string) => unknown; - } - | { - type: 'VISUALIZATION_LOADED'; - doc: Document; - } - | { - type: 'SWITCH_VISUALIZATION'; - newVisualizationId: string; - initialState: unknown; - } - | { - type: 'SWITCH_VISUALIZATION'; - newVisualizationId: string; - initialState: unknown; - datasourceState: unknown; - datasourceId: string; - } - | { - type: 'SELECT_SUGGESTION'; - newVisualizationId: string; - initialState: unknown; - datasourceState: unknown; - datasourceId: string; - } - | { - type: 'ROLLBACK_SUGGESTION'; - } - | { - type: 'SUBMIT_SUGGESTION'; - } - | { - type: 'SWITCH_DATASOURCE'; - newDatasourceId: string; - } - | { - type: 'TOGGLE_FULLSCREEN'; - }; - -export function getActiveDatasourceIdFromDoc(doc?: Document) { - if (!doc) { - return null; - } - - const [firstDatasourceFromDoc] = Object.keys(doc.state.datasourceStates); - return firstDatasourceFromDoc || null; -} - -export const getInitialState = ( - params: EditorFrameProps & { doc?: Document } -): EditorFrameState => { - const datasourceStates: EditorFrameState['datasourceStates'] = {}; - - const initialDatasourceId = - getActiveDatasourceIdFromDoc(params.doc) || Object.keys(params.datasourceMap)[0] || null; - - const initialVisualizationId = - (params.doc && params.doc.visualizationType) || Object.keys(params.visualizationMap)[0] || null; - - if (params.doc) { - Object.entries(params.doc.state.datasourceStates).forEach(([datasourceId, state]) => { - datasourceStates[datasourceId] = { isLoading: true, state }; - }); - } else if (initialDatasourceId) { - datasourceStates[initialDatasourceId] = { - state: null, - isLoading: true, - }; - } - - return { - title: '', - datasourceStates, - activeDatasourceId: initialDatasourceId, - visualization: { - state: null, - activeId: initialVisualizationId, - }, - }; -}; - -export const reducer = (state: EditorFrameState, action: Action): EditorFrameState => { - switch (action.type) { - case 'RESET': - return action.state; - case 'UPDATE_TITLE': - return { ...state, title: action.title }; - case 'UPDATE_STATE': - return action.updater(state); - case 'UPDATE_LAYER': - return { - ...state, - datasourceStates: { - ...state.datasourceStates, - [action.datasourceId]: { - ...state.datasourceStates[action.datasourceId], - state: action.updater( - state.datasourceStates[action.datasourceId].state, - action.layerId - ), - }, - }, - }; - case 'VISUALIZATION_LOADED': - return { - ...state, - persistedId: action.doc.savedObjectId, - title: action.doc.title, - description: action.doc.description, - datasourceStates: Object.entries(action.doc.state.datasourceStates).reduce( - (stateMap, [datasourceId, datasourceState]) => ({ - ...stateMap, - [datasourceId]: { - isLoading: true, - state: datasourceState, - }, - }), - {} - ), - activeDatasourceId: getActiveDatasourceIdFromDoc(action.doc), - visualization: { - ...state.visualization, - activeId: action.doc.visualizationType, - state: action.doc.state.visualization, - }, - }; - case 'SWITCH_DATASOURCE': - return { - ...state, - datasourceStates: { - ...state.datasourceStates, - [action.newDatasourceId]: state.datasourceStates[action.newDatasourceId] || { - state: null, - isLoading: true, - }, - }, - activeDatasourceId: action.newDatasourceId, - }; - case 'SWITCH_VISUALIZATION': - return { - ...state, - datasourceStates: - 'datasourceId' in action && action.datasourceId - ? { - ...state.datasourceStates, - [action.datasourceId]: { - ...state.datasourceStates[action.datasourceId], - state: action.datasourceState, - }, - } - : state.datasourceStates, - visualization: { - ...state.visualization, - activeId: action.newVisualizationId, - state: action.initialState, - }, - stagedPreview: undefined, - }; - case 'SELECT_SUGGESTION': - return { - ...state, - datasourceStates: - 'datasourceId' in action && action.datasourceId - ? { - ...state.datasourceStates, - [action.datasourceId]: { - ...state.datasourceStates[action.datasourceId], - state: action.datasourceState, - }, - } - : state.datasourceStates, - visualization: { - ...state.visualization, - activeId: action.newVisualizationId, - state: action.initialState, - }, - stagedPreview: state.stagedPreview || { - datasourceStates: state.datasourceStates, - visualization: state.visualization, - }, - }; - case 'ROLLBACK_SUGGESTION': - return { - ...state, - ...(state.stagedPreview || {}), - stagedPreview: undefined, - }; - case 'SUBMIT_SUGGESTION': - return { - ...state, - stagedPreview: undefined, - }; - case 'UPDATE_DATASOURCE_STATE': - return { - ...state, - datasourceStates: { - ...state.datasourceStates, - [action.datasourceId]: { - state: - typeof action.updater === 'function' - ? action.updater(state.datasourceStates[action.datasourceId].state) - : action.updater, - isLoading: false, - }, - }, - stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview, - }; - case 'UPDATE_VISUALIZATION_STATE': - if (!state.visualization.activeId) { - throw new Error('Invariant: visualization state got updated without active visualization'); - } - // This is a safeguard that prevents us from accidentally updating the - // wrong visualization. This occurs in some cases due to the uncoordinated - // way we manage state across plugins. - if (state.visualization.activeId !== action.visualizationId) { - return state; - } - return { - ...state, - visualization: { - ...state.visualization, - state: - typeof action.updater === 'function' - ? action.updater(state.visualization.state) - : action.updater, - }, - stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview, - }; - case 'TOGGLE_FULLSCREEN': - return { ...state, isFullscreenDatasource: !state.isFullscreenDatasource }; - default: - return state; - } -}; 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 0e8c9b962b995..6f33cc4b8aab8 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 @@ -6,7 +6,7 @@ */ import { getSuggestions, getTopSuggestionForField } from './suggestion_helpers'; -import { createMockVisualization, createMockDatasource, DatasourceMock } from '../mocks'; +import { createMockVisualization, createMockDatasource, DatasourceMock } from '../../mocks'; import { TableSuggestion, DatasourceSuggestion, Visualization } from '../../types'; import { PaletteOutput } from 'src/plugins/charts/public'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts index bd8f134f59fbb..9fdc283c3cc29 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts @@ -19,8 +19,8 @@ import { DatasourceSuggestion, DatasourcePublicAPI, } from '../../types'; -import { Action } from './state_management'; import { DragDropIdentifier } from '../../drag_drop'; +import { LensDispatch, selectSuggestion, switchVisualization } from '../../state_management'; export interface Suggestion { visualizationId: string; @@ -132,14 +132,13 @@ export function getSuggestions({ ).sort((a, b) => b.score - a.score); } -export function applyVisualizeFieldSuggestions({ +export function getVisualizeFieldSuggestions({ datasourceMap, datasourceStates, visualizationMap, activeVisualizationId, visualizationState, visualizeTriggerFieldContext, - dispatch, }: { datasourceMap: Record<string, Datasource>; datasourceStates: Record< @@ -154,8 +153,7 @@ export function applyVisualizeFieldSuggestions({ subVisualizationId?: string; visualizationState: unknown; visualizeTriggerFieldContext?: VisualizeFieldContext; - dispatch: (action: Action) => void; -}): void { +}): Suggestion | undefined { const suggestions = getSuggestions({ datasourceMap, datasourceStates, @@ -165,9 +163,7 @@ export function applyVisualizeFieldSuggestions({ visualizeTriggerFieldContext, }); if (suggestions.length) { - const selectedSuggestion = - suggestions.find((s) => s.visualizationId === activeVisualizationId) || suggestions[0]; - switchToSuggestion(dispatch, selectedSuggestion, 'SWITCH_VISUALIZATION'); + return suggestions.find((s) => s.visualizationId === activeVisualizationId) || suggestions[0]; } } @@ -207,22 +203,25 @@ function getVisualizationSuggestions( } export function switchToSuggestion( - dispatch: (action: Action) => void, + dispatchLens: LensDispatch, suggestion: Pick< Suggestion, 'visualizationId' | 'visualizationState' | 'datasourceState' | 'datasourceId' >, type: 'SWITCH_VISUALIZATION' | 'SELECT_SUGGESTION' = 'SELECT_SUGGESTION' ) { - const action: Action = { - type, + const pickedSuggestion = { newVisualizationId: suggestion.visualizationId, initialState: suggestion.visualizationState, datasourceState: suggestion.datasourceState, datasourceId: suggestion.datasourceId!, }; - dispatch(action); + dispatchLens( + type === 'SELECT_SUGGESTION' + ? selectSuggestion(pickedSuggestion) + : switchVisualization(pickedSuggestion) + ); } export function getTopSuggestionForField( diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx index 2b755a2e8bf08..6445038e40d7c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import { mountWithIntl as mount } from '@kbn/test/jest'; import { Visualization } from '../../types'; import { createMockVisualization, @@ -14,15 +13,15 @@ import { createExpressionRendererMock, DatasourceMock, createMockFramePublicAPI, -} from '../mocks'; +} from '../../mocks'; import { act } from 'react-dom/test-utils'; import { ReactExpressionRendererType } from '../../../../../../src/plugins/expressions/public'; import { esFilters, IFieldType, IIndexPattern } from '../../../../../../src/plugins/data/public'; import { SuggestionPanel, SuggestionPanelProps } from './suggestion_panel'; import { getSuggestions, Suggestion } from './suggestion_helpers'; import { EuiIcon, EuiPanel, EuiToolTip } from '@elastic/eui'; -import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks'; import { LensIconChartDatatable } from '../../assets/chart_datatable'; +import { mountWithProvider } from '../../mocks'; jest.mock('./suggestion_helpers'); @@ -33,7 +32,6 @@ describe('suggestion_panel', () => { let mockDatasource: DatasourceMock; let expressionRendererMock: ReactExpressionRendererType; - let dispatchMock: jest.Mock; const suggestion1State = { suggestion1: true }; const suggestion2State = { suggestion2: true }; @@ -44,7 +42,6 @@ describe('suggestion_panel', () => { mockVisualization = createMockVisualization(); mockDatasource = createMockDatasource('a'); expressionRendererMock = createExpressionRendererMock(); - dispatchMock = jest.fn(); getSuggestionsMock.mockReturnValue([ { @@ -84,18 +81,16 @@ describe('suggestion_panel', () => { vis2: createMockVisualization(), }, visualizationState: {}, - dispatch: dispatchMock, ExpressionRenderer: expressionRendererMock, frame: createMockFramePublicAPI(), - plugins: { data: dataPluginMock.createStartContract() }, }; }); - it('should list passed in suggestions', () => { - const wrapper = mount(<SuggestionPanel {...defaultProps} />); + it('should list passed in suggestions', async () => { + const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />); expect( - wrapper + instance .find('[data-test-subj="lnsSuggestion"]') .find(EuiPanel) .map((el) => el.parents(EuiToolTip).prop('content')) @@ -129,90 +124,97 @@ describe('suggestion_panel', () => { }; }); - it('should not update suggestions if current state is moved to staged preview', () => { - const wrapper = mount(<SuggestionPanel {...defaultProps} />); + it('should not update suggestions if current state is moved to staged preview', async () => { + const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />); getSuggestionsMock.mockClear(); - wrapper.setProps({ + instance.setProps({ stagedPreview, ...suggestionState, }); - wrapper.update(); + instance.update(); expect(getSuggestionsMock).not.toHaveBeenCalled(); }); - it('should update suggestions if staged preview is removed', () => { - const wrapper = mount(<SuggestionPanel {...defaultProps} />); + it('should update suggestions if staged preview is removed', async () => { + const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />); getSuggestionsMock.mockClear(); - wrapper.setProps({ + instance.setProps({ stagedPreview, ...suggestionState, }); - wrapper.update(); - wrapper.setProps({ + instance.update(); + instance.setProps({ stagedPreview: undefined, ...suggestionState, }); - wrapper.update(); + instance.update(); expect(getSuggestionsMock).toHaveBeenCalledTimes(1); }); - it('should highlight currently active suggestion', () => { - const wrapper = mount(<SuggestionPanel {...defaultProps} />); + it('should highlight currently active suggestion', async () => { + const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />); act(() => { - wrapper.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click'); + instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click'); }); - wrapper.update(); + instance.update(); - expect(wrapper.find('[data-test-subj="lnsSuggestion"]').at(2).prop('className')).toContain( + expect(instance.find('[data-test-subj="lnsSuggestion"]').at(2).prop('className')).toContain( 'lnsSuggestionPanel__button-isSelected' ); }); - it('should rollback suggestion if current panel is clicked', () => { - const wrapper = mount(<SuggestionPanel {...defaultProps} />); + it('should rollback suggestion if current panel is clicked', async () => { + const { instance, lensStore } = await mountWithProvider( + <SuggestionPanel {...defaultProps} /> + ); act(() => { - wrapper.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click'); + instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click'); }); - wrapper.update(); + instance.update(); act(() => { - wrapper.find('[data-test-subj="lnsSuggestion"]').at(0).simulate('click'); + instance.find('[data-test-subj="lnsSuggestion"]').at(0).simulate('click'); }); - wrapper.update(); + instance.update(); - expect(dispatchMock).toHaveBeenCalledWith({ - type: 'ROLLBACK_SUGGESTION', + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/rollbackSuggestion', }); }); }); - it('should dispatch visualization switch action if suggestion is clicked', () => { - const wrapper = mount(<SuggestionPanel {...defaultProps} />); + it('should dispatch visualization switch action if suggestion is clicked', async () => { + const { instance, lensStore } = await mountWithProvider(<SuggestionPanel {...defaultProps} />); act(() => { - wrapper.find('button[data-test-subj="lnsSuggestion"]').at(1).simulate('click'); + instance.find('button[data-test-subj="lnsSuggestion"]').at(1).simulate('click'); }); - wrapper.update(); + instance.update(); - expect(dispatchMock).toHaveBeenCalledWith( + expect(lensStore.dispatch).toHaveBeenCalledWith( expect.objectContaining({ - type: 'SELECT_SUGGESTION', - initialState: suggestion1State, + type: 'lens/selectSuggestion', + payload: { + datasourceId: undefined, + datasourceState: {}, + initialState: { suggestion1: true }, + newVisualizationId: 'vis', + }, }) ); }); - it('should render preview expression if there is one', () => { + it('should render render icon if there is no preview expression', async () => { mockDatasource.getLayers.mockReturnValue(['first']); - (getSuggestions as jest.Mock).mockReturnValue([ + getSuggestionsMock.mockReturnValue([ { datasourceState: {}, - previewIcon: 'empty', + previewIcon: LensIconChartDatatable, score: 0.5, visualizationState: suggestion1State, visualizationId: 'vis', @@ -225,43 +227,51 @@ describe('suggestion_panel', () => { visualizationState: suggestion2State, visualizationId: 'vis', title: 'Suggestion2', + previewExpression: 'test | expression', }, ] as Suggestion[]); (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce(undefined); (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('test | expression'); + + // this call will go to the currently active visualization + (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('current | preview'); + mockDatasource.toExpression.mockReturnValue('datasource_expression'); - const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern; - const field = ({ name: 'myfield' } as unknown) as IFieldType; + const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />); - mount( - <SuggestionPanel - {...defaultProps} - frame={{ - ...createMockFramePublicAPI(), - filters: [esFilters.buildExistsFilter(field, indexPattern)], - }} - /> - ); + expect(instance.find(EuiIcon)).toHaveLength(1); + expect(instance.find(EuiIcon).prop('type')).toEqual(LensIconChartDatatable); + }); - expect(expressionRendererMock).toHaveBeenCalledTimes(1); - const passedExpression = (expressionRendererMock as jest.Mock).mock.calls[0][0].expression; + it('should return no suggestion if visualization has missing index-patterns', async () => { + // create a layer that is referencing an indexPatterns not retrieved by the datasource + const missingIndexPatternsState = { + layers: { indexPatternId: 'a' }, + indexPatterns: {}, + }; + mockDatasource.checkIntegrity.mockReturnValue(['a']); + const newProps = { + ...defaultProps, + datasourceStates: { + mock: { + ...defaultProps.datasourceStates.mock, + state: missingIndexPatternsState, + }, + }, + }; - expect(passedExpression).toMatchInlineSnapshot(` - "kibana - | lens_merge_tables layerIds=\\"first\\" tables={datasource_expression} - | test - | expression" - `); + const { instance } = await mountWithProvider(<SuggestionPanel {...newProps} />); + expect(instance.html()).toEqual(null); }); - it('should render render icon if there is no preview expression', () => { + it('should render preview expression if there is one', () => { mockDatasource.getLayers.mockReturnValue(['first']); - getSuggestionsMock.mockReturnValue([ + (getSuggestions as jest.Mock).mockReturnValue([ { datasourceState: {}, - previewIcon: LensIconChartDatatable, + previewIcon: 'empty', score: 0.5, visualizationState: suggestion1State, visualizationId: 'vis', @@ -274,41 +284,34 @@ describe('suggestion_panel', () => { visualizationState: suggestion2State, visualizationId: 'vis', title: 'Suggestion2', - previewExpression: 'test | expression', }, ] as Suggestion[]); (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce(undefined); (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('test | expression'); - - // this call will go to the currently active visualization - (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('current | preview'); - mockDatasource.toExpression.mockReturnValue('datasource_expression'); - const wrapper = mount(<SuggestionPanel {...defaultProps} />); + const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern; + const field = ({ name: 'myfield' } as unknown) as IFieldType; - expect(wrapper.find(EuiIcon)).toHaveLength(1); - expect(wrapper.find(EuiIcon).prop('type')).toEqual(LensIconChartDatatable); - }); + mountWithProvider( + <SuggestionPanel + {...defaultProps} + frame={{ + ...createMockFramePublicAPI(), + filters: [esFilters.buildExistsFilter(field, indexPattern)], + }} + /> + ); - it('should return no suggestion if visualization has missing index-patterns', () => { - // create a layer that is referencing an indexPatterns not retrieved by the datasource - const missingIndexPatternsState = { - layers: { indexPatternId: 'a' }, - indexPatterns: {}, - }; - mockDatasource.checkIntegrity.mockReturnValue(['a']); - const newProps = { - ...defaultProps, - datasourceStates: { - mock: { - ...defaultProps.datasourceStates.mock, - state: missingIndexPatternsState, - }, - }, - }; - const wrapper = mount(<SuggestionPanel {...newProps} />); - expect(wrapper.html()).toEqual(null); + expect(expressionRendererMock).toHaveBeenCalledTimes(1); + const passedExpression = (expressionRendererMock as jest.Mock).mock.calls[0][0].expression; + + expect(passedExpression).toMatchInlineSnapshot(` + "kibana + | lens_merge_tables layerIds=\\"first\\" tables={datasource_expression} + | test + | expression" + `); }); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx index 8107b6646500d..6d360a09a5b49 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx @@ -24,8 +24,7 @@ import { IconType } from '@elastic/eui/src/components/icon/icon'; import { Ast, toExpression } from '@kbn/interpreter/common'; import { i18n } from '@kbn/i18n'; import classNames from 'classnames'; -import { DataPublicPluginStart, ExecutionContextSearch } from 'src/plugins/data/public'; -import { Action, PreviewState } from './state_management'; +import { ExecutionContextSearch } from 'src/plugins/data/public'; import { Datasource, Visualization, FramePublicAPI, DatasourcePublicAPI } from '../../types'; import { getSuggestions, switchToSuggestion } from './suggestion_helpers'; import { @@ -35,6 +34,12 @@ import { import { prependDatasourceExpression } from './expression_helpers'; import { trackUiEvent, trackSuggestionEvent } from '../../lens_ui_telemetry'; import { getMissingIndexPattern, validateDatasourceAndVisualization } from './state_helpers'; +import { + PreviewState, + rollbackSuggestion, + submitSuggestion, + useLensDispatch, +} from '../../state_management'; const MAX_SUGGESTIONS_DISPLAYED = 5; @@ -51,11 +56,9 @@ export interface SuggestionPanelProps { activeVisualizationId: string | null; visualizationMap: Record<string, Visualization>; visualizationState: unknown; - dispatch: (action: Action) => void; ExpressionRenderer: ReactExpressionRendererType; frame: FramePublicAPI; stagedPreview?: PreviewState; - plugins: { data: DataPublicPluginStart }; } const PreviewRenderer = ({ @@ -170,12 +173,12 @@ export function SuggestionPanel({ activeVisualizationId, visualizationMap, visualizationState, - dispatch, frame, ExpressionRenderer: ExpressionRendererComponent, stagedPreview, - plugins, }: SuggestionPanelProps) { + const dispatchLens = useLensDispatch(); + const currentDatasourceStates = stagedPreview ? stagedPreview.datasourceStates : datasourceStates; const currentVisualizationState = stagedPreview ? stagedPreview.visualization.state @@ -320,9 +323,7 @@ export function SuggestionPanel({ if (lastSelectedSuggestion !== -1) { trackSuggestionEvent('back_to_current'); setLastSelectedSuggestion(-1); - dispatch({ - type: 'ROLLBACK_SUGGESTION', - }); + dispatchLens(rollbackSuggestion()); } } @@ -352,9 +353,7 @@ export function SuggestionPanel({ iconType="refresh" onClick={() => { trackUiEvent('suggestion_confirmed'); - dispatch({ - type: 'SUBMIT_SUGGESTION', - }); + dispatchLens(submitSuggestion()); }} > {i18n.translate('xpack.lens.sugegstion.refreshSuggestionLabel', { @@ -401,7 +400,7 @@ export function SuggestionPanel({ rollbackToCurrentVisualization(); } else { setLastSelectedSuggestion(index); - switchToSuggestion(dispatch, suggestion); + switchToSuggestion(dispatchLens, suggestion); } }} selected={index === lastSelectedSuggestion} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx index 46e287297828d..9b5766c3e3bfa 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx @@ -11,7 +11,8 @@ import { createMockVisualization, createMockFramePublicAPI, createMockDatasource, -} from '../../mocks'; +} from '../../../mocks'; +import { mountWithProvider } from '../../../mocks'; // Tests are executed in a jsdom environment who does not have sizing methods, // thus the AutoSizer will always compute a 0x0 size space @@ -25,9 +26,7 @@ jest.mock('react-virtualized-auto-sizer', () => { }; }); -import { mountWithIntl as mount } from '@kbn/test/jest'; import { Visualization, FramePublicAPI, DatasourcePublicAPI } from '../../../types'; -import { Action } from '../state_management'; import { ChartSwitch } from './chart_switch'; import { PaletteOutput } from 'src/plugins/charts/public'; @@ -157,6 +156,8 @@ describe('chart_switch', () => { keptLayerIds: ['a'], }, ]); + + datasource.getLayers.mockReturnValue(['a']); return { testDatasource: datasource, }; @@ -171,78 +172,94 @@ describe('chart_switch', () => { }; } - function showFlyout(component: ReactWrapper) { - component.find('[data-test-subj="lnsChartSwitchPopover"]').first().simulate('click'); + function showFlyout(instance: ReactWrapper) { + instance.find('[data-test-subj="lnsChartSwitchPopover"]').first().simulate('click'); } - function switchTo(subType: string, component: ReactWrapper) { - showFlyout(component); - component.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first().simulate('click'); + function switchTo(subType: string, instance: ReactWrapper) { + showFlyout(instance); + instance.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first().simulate('click'); } - function getMenuItem(subType: string, component: ReactWrapper) { - showFlyout(component); - return component.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first(); + function getMenuItem(subType: string, instance: ReactWrapper) { + showFlyout(instance); + return instance.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first(); } - - it('should use suggested state if there is a suggestion from the target visualization', () => { - const dispatch = jest.fn(); + it('should use suggested state if there is a suggestion from the target visualization', async () => { const visualizations = mockVisualizations(); - const component = mount( + const { instance, lensStore } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={'state from a'} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={mockFrame(['a'])} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: 'state from a', + }, + }, + } ); - switchTo('visB', component); + switchTo('visB', instance); - expect(dispatch).toHaveBeenCalledWith({ - initialState: 'suggestion visB', - newVisualizationId: 'visB', - type: 'SWITCH_VISUALIZATION', - datasourceId: 'testDatasource', - datasourceState: {}, + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/switchVisualization', + payload: { + initialState: 'suggestion visB', + newVisualizationId: 'visB', + datasourceId: 'testDatasource', + datasourceState: {}, + }, }); }); - it('should use initial state if there is no suggestion from the target visualization', () => { - const dispatch = jest.fn(); + it('should use initial state if there is no suggestion from the target visualization', async () => { const visualizations = mockVisualizations(); visualizations.visB.getSuggestions.mockReturnValueOnce([]); const frame = mockFrame(['a']); (frame.datasourceLayers.a.getTableSpec as jest.Mock).mockReturnValue([]); - - const component = mount( + const datasourceMap = mockDatasourceMap(); + const datasourceStates = mockDatasourceStates(); + const { instance, lensStore } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} - datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + datasourceMap={datasourceMap} + />, + { + preloadedState: { + datasourceStates, + activeDatasourceId: 'testDatasource', + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); - switchTo('visB', component); - - expect(frame.removeLayers).toHaveBeenCalledWith(['a']); - - expect(dispatch).toHaveBeenCalledWith({ - initialState: 'visB initial state', - newVisualizationId: 'visB', - type: 'SWITCH_VISUALIZATION', + switchTo('visB', instance); + expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith({}, 'a'); // from preloaded state + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/switchVisualization', + payload: { + initialState: 'visB initial state', + newVisualizationId: 'visB', + }, + }); + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/updateLayer', + payload: expect.objectContaining({ + datasourceId: 'testDatasource', + layerId: 'a', + }), }); }); - it('should indicate data loss if not all columns will be used', () => { - const dispatch = jest.fn(); + it('should indicate data loss if not all columns will be used', async () => { const visualizations = mockVisualizations(); const frame = mockFrame(['a']); @@ -282,53 +299,59 @@ describe('chart_switch', () => { { columnId: 'col3' }, ]); - const component = mount( + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); expect( - getMenuItem('visB', component) + getMenuItem('visB', instance) .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]') .first() .props().type ).toEqual('alert'); }); - it('should indicate data loss if not all layers will be used', () => { - const dispatch = jest.fn(); + it('should indicate data loss if not all layers will be used', async () => { const visualizations = mockVisualizations(); const frame = mockFrame(['a', 'b']); - const component = mount( + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); expect( - getMenuItem('visB', component) + getMenuItem('visB', instance) .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]') .first() .props().type ).toEqual('alert'); }); - it('should support multi-layer suggestions without data loss', () => { - const dispatch = jest.fn(); + it('should support multi-layer suggestions without data loss', async () => { const visualizations = mockVisualizations(); const frame = mockFrame(['a', 'b']); @@ -355,75 +378,85 @@ describe('chart_switch', () => { }, ]); - const component = mount( + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} datasourceMap={datasourceMap} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); expect( - getMenuItem('visB', component).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]') + getMenuItem('visB', instance).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]') ).toHaveLength(0); }); - it('should indicate data loss if no data will be used', () => { - const dispatch = jest.fn(); + it('should indicate data loss if no data will be used', async () => { const visualizations = mockVisualizations(); visualizations.visB.getSuggestions.mockReturnValueOnce([]); const frame = mockFrame(['a']); - const component = mount( + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); expect( - getMenuItem('visB', component) + getMenuItem('visB', instance) .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]') .first() .props().type ).toEqual('alert'); }); - it('should not indicate data loss if there is no data', () => { - const dispatch = jest.fn(); + it('should not indicate data loss if there is no data', async () => { const visualizations = mockVisualizations(); visualizations.visB.getSuggestions.mockReturnValueOnce([]); const frame = mockFrame(['a']); (frame.datasourceLayers.a.getTableSpec as jest.Mock).mockReturnValue([]); - const component = mount( + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); expect( - getMenuItem('visB', component).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]') + getMenuItem('visB', instance).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]') ).toHaveLength(0); }); - it('should not show a warning when the subvisualization is the same', () => { - const dispatch = jest.fn(); + it('should not show a warning when the subvisualization is the same', async () => { const frame = mockFrame(['a', 'b', 'c']); const visualizations = mockVisualizations(); visualizations.visC.getVisualizationTypeId.mockReturnValue('subvisC2'); @@ -431,64 +464,81 @@ describe('chart_switch', () => { visualizations.visC.switchVisualizationType = switchVisualizationType; - const component = mount( + const datasourceMap = mockDatasourceMap(); + const datasourceStates = mockDatasourceStates(); + + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visC" - visualizationState={{ type: 'subvisC2' }} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} - datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + datasourceMap={datasourceMap} + />, + { + preloadedState: { + datasourceStates, + activeDatasourceId: 'testDatasource', + visualization: { + activeId: 'visC', + state: { type: 'subvisC2' }, + }, + }, + } ); expect( - getMenuItem('subvisC2', component).find( + getMenuItem('subvisC2', instance).find( '[data-test-subj="lnsChartSwitchPopoverAlert_subvisC2"]' ) ).toHaveLength(0); }); - it('should get suggestions when switching subvisualization', () => { - const dispatch = jest.fn(); + it('should get suggestions when switching subvisualization', async () => { const visualizations = mockVisualizations(); visualizations.visB.getSuggestions.mockReturnValueOnce([]); const frame = mockFrame(['a', 'b', 'c']); + const datasourceMap = mockDatasourceMap(); + datasourceMap.testDatasource.getLayers.mockReturnValue(['a', 'b', 'c']); + const datasourceStates = mockDatasourceStates(); - const component = mount( + const { instance, lensStore } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} - datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + datasourceMap={datasourceMap} + />, + { + preloadedState: { + datasourceStates, + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); - switchTo('visB', component); - - expect(frame.removeLayers).toHaveBeenCalledTimes(1); - expect(frame.removeLayers).toHaveBeenCalledWith(['a', 'b', 'c']); - + switchTo('visB', instance); + expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith({}, 'a'); + expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith(undefined, 'b'); + expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith(undefined, 'c'); expect(visualizations.visB.getSuggestions).toHaveBeenCalledWith( expect.objectContaining({ keptLayerIds: ['a'], }) ); - expect(dispatch).toHaveBeenCalledWith( - expect.objectContaining({ - type: 'SWITCH_VISUALIZATION', + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/switchVisualization', + payload: { + datasourceId: undefined, + datasourceState: undefined, initialState: 'visB initial state', - }) - ); + newVisualizationId: 'visB', + }, + }); }); - it('should query main palette from active chart and pass into suggestions', () => { - const dispatch = jest.fn(); + it('should query main palette from active chart and pass into suggestions', async () => { const visualizations = mockVisualizations(); const mockPalette: PaletteOutput = { type: 'palette', name: 'mock' }; visualizations.visA.getMainPalette = jest.fn(() => mockPalette); @@ -496,19 +546,26 @@ describe('chart_switch', () => { const frame = mockFrame(['a', 'b', 'c']); const currentVisState = {}; - const component = mount( + const datasourceMap = mockDatasourceMap(); + datasourceMap.testDatasource.getLayers.mockReturnValue(['a', 'b', 'c']); + + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={currentVisState} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} - datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + datasourceMap={datasourceMap} + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: currentVisState, + }, + }, + } ); - switchTo('visB', component); + switchTo('visB', instance); expect(visualizations.visA.getMainPalette).toHaveBeenCalledWith(currentVisState); @@ -520,67 +577,76 @@ describe('chart_switch', () => { ); }); - it('should not remove layers when switching between subtypes', () => { - const dispatch = jest.fn(); + it('should not remove layers when switching between subtypes', async () => { const frame = mockFrame(['a', 'b', 'c']); const visualizations = mockVisualizations(); const switchVisualizationType = jest.fn(() => 'switched'); visualizations.visC.switchVisualizationType = switchVisualizationType; - - const component = mount( + const datasourceMap = mockDatasourceMap(); + const { instance, lensStore } = await mountWithProvider( <ChartSwitch - visualizationId="visC" - visualizationState={{ type: 'subvisC1' }} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} - datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + datasourceMap={datasourceMap} + />, + { + preloadedState: { + visualization: { + activeId: 'visC', + state: { type: 'subvisC1' }, + }, + }, + } ); - switchTo('subvisC3', component); + switchTo('subvisC3', instance); expect(switchVisualizationType).toHaveBeenCalledWith('subvisC3', { type: 'subvisC3' }); - expect(dispatch).toHaveBeenCalledWith( - expect.objectContaining({ - type: 'SWITCH_VISUALIZATION', + + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/switchVisualization', + payload: { + datasourceId: 'testDatasource', + datasourceState: {}, initialState: 'switched', - }) - ); - expect(frame.removeLayers).not.toHaveBeenCalled(); + newVisualizationId: 'visC', + }, + }); + expect(datasourceMap.testDatasource.removeLayer).not.toHaveBeenCalled(); }); - it('should not remove layers and initialize with existing state when switching between subtypes without data', () => { - const dispatch = jest.fn(); + it('should not remove layers and initialize with existing state when switching between subtypes without data', async () => { const frame = mockFrame(['a']); frame.datasourceLayers.a.getTableSpec = jest.fn().mockReturnValue([]); const visualizations = mockVisualizations(); visualizations.visC.getSuggestions = jest.fn().mockReturnValue([]); visualizations.visC.switchVisualizationType = jest.fn(() => 'switched'); - - const component = mount( + const datasourceMap = mockDatasourceMap(); + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visC" - visualizationState={{ type: 'subvisC1' }} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} - datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + datasourceMap={datasourceMap} + />, + { + preloadedState: { + visualization: { + activeId: 'visC', + state: { type: 'subvisC1' }, + }, + }, + } ); - switchTo('subvisC3', component); + switchTo('subvisC3', instance); expect(visualizations.visC.switchVisualizationType).toHaveBeenCalledWith('subvisC3', { type: 'subvisC1', }); - expect(frame.removeLayers).not.toHaveBeenCalled(); + expect(datasourceMap.testDatasource.removeLayer).not.toHaveBeenCalled(); }); - it('should switch to the updated datasource state', () => { - const dispatch = jest.fn(); + it('should switch to the updated datasource state', async () => { const visualizations = mockVisualizations(); const frame = mockFrame(['a', 'b']); @@ -615,31 +681,36 @@ describe('chart_switch', () => { }, ]); - const component = mount( + const { instance, lensStore } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={frame} datasourceMap={datasourceMap} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); - switchTo('visB', component); + switchTo('visB', instance); - expect(dispatch).toHaveBeenCalledWith({ - type: 'SWITCH_VISUALIZATION', - newVisualizationId: 'visB', - datasourceId: 'testDatasource', - datasourceState: 'testDatasource suggestion', - initialState: 'suggestion visB', - } as Action); + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/switchVisualization', + payload: { + newVisualizationId: 'visB', + datasourceId: 'testDatasource', + datasourceState: 'testDatasource suggestion', + initialState: 'suggestion visB', + }, + }); }); - it('should ensure the new visualization has the proper subtype', () => { - const dispatch = jest.fn(); + it('should ensure the new visualization has the proper subtype', async () => { const visualizations = mockVisualizations(); const switchVisualizationType = jest.fn( (visualizationType, state) => `${state} ${visualizationType}` @@ -647,72 +718,85 @@ describe('chart_switch', () => { visualizations.visB.switchVisualizationType = switchVisualizationType; - const component = mount( + const { instance, lensStore } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={mockFrame(['a'])} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); - switchTo('visB', component); + switchTo('visB', instance); - expect(dispatch).toHaveBeenCalledWith({ - initialState: 'suggestion visB visB', - newVisualizationId: 'visB', - type: 'SWITCH_VISUALIZATION', - datasourceId: 'testDatasource', - datasourceState: {}, + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/switchVisualization', + payload: { + initialState: 'suggestion visB visB', + newVisualizationId: 'visB', + datasourceId: 'testDatasource', + datasourceState: {}, + }, }); }); - it('should use the suggestion that matches the subtype', () => { - const dispatch = jest.fn(); + it('should use the suggestion that matches the subtype', async () => { const visualizations = mockVisualizations(); const switchVisualizationType = jest.fn(); visualizations.visC.switchVisualizationType = switchVisualizationType; - const component = mount( + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visC" - visualizationState={{ type: 'subvisC3' }} visualizationMap={visualizations} - dispatch={dispatch} framePublicAPI={mockFrame(['a'])} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visC', + state: { type: 'subvisC3' }, + }, + }, + } ); - switchTo('subvisC1', component); + switchTo('subvisC1', instance); expect(switchVisualizationType).toHaveBeenCalledWith('subvisC1', { type: 'subvisC1', notPrimary: true, }); }); - it('should show all visualization types', () => { - const component = mount( + it('should show all visualization types', async () => { + const { instance } = await mountWithProvider( <ChartSwitch - visualizationId="visA" - visualizationState={{}} visualizationMap={mockVisualizations()} - dispatch={jest.fn()} framePublicAPI={mockFrame(['a', 'b'])} datasourceMap={mockDatasourceMap()} - datasourceStates={mockDatasourceStates()} - /> + />, + { + preloadedState: { + visualization: { + activeId: 'visA', + state: {}, + }, + }, + } ); - showFlyout(component); + showFlyout(instance); const allDisplayed = ['visA', 'visB', 'subvisC1', 'subvisC2', 'subvisC3'].every( - (subType) => component.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).length > 0 + (subType) => instance.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).length > 0 ); expect(allDisplayed).toBeTruthy(); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index 0c3a992e3dd7a..f948ec6a59687 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -21,10 +21,16 @@ import { import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { Visualization, FramePublicAPI, Datasource, VisualizationType } from '../../../types'; -import { Action } from '../state_management'; import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers'; import { trackUiEvent } from '../../../lens_ui_telemetry'; import { ToolbarButton } from '../../../../../../../src/plugins/kibana_react/public'; +import { + updateLayer, + updateVisualizationState, + useLensDispatch, + useLensSelector, +} from '../../../state_management'; +import { generateId } from '../../../id_generator/id_generator'; interface VisualizationSelection { visualizationId: string; @@ -38,27 +44,26 @@ interface VisualizationSelection { } interface Props { - dispatch: (action: Action) => void; visualizationMap: Record<string, Visualization>; - visualizationId: string | null; - visualizationState: unknown; framePublicAPI: FramePublicAPI; datasourceMap: Record<string, Datasource>; - datasourceStates: Record< - string, - { - isLoading: boolean; - state: unknown; - } - >; } type SelectableEntry = EuiSelectableOption<{ value: string }>; -function VisualizationSummary(props: Props) { - const visualization = props.visualizationMap[props.visualizationId || '']; +function VisualizationSummary({ + visualizationMap, + visualization, +}: { + visualizationMap: Record<string, Visualization>; + visualization: { + activeId: string | null; + state: unknown; + }; +}) { + const activeVisualization = visualizationMap[visualization.activeId || '']; - if (!visualization) { + if (!activeVisualization) { return ( <> {i18n.translate('xpack.lens.configPanel.selectVisualization', { @@ -68,7 +73,7 @@ function VisualizationSummary(props: Props) { ); } - const description = visualization.getDescription(props.visualizationState); + const description = activeVisualization.getDescription(visualization.state); return ( <> @@ -99,6 +104,44 @@ function getCurrentVisualizationId( export const ChartSwitch = memo(function ChartSwitch(props: Props) { const [flyoutOpen, setFlyoutOpen] = useState<boolean>(false); + const dispatchLens = useLensDispatch(); + const activeDatasourceId = useLensSelector((state) => state.lens.activeDatasourceId); + const visualization = useLensSelector((state) => state.lens.visualization); + const datasourceStates = useLensSelector((state) => state.lens.datasourceStates); + + function removeLayers(layerIds: string[]) { + const activeVisualization = + visualization.activeId && props.visualizationMap[visualization.activeId]; + if (activeVisualization && activeVisualization.removeLayer && visualization.state) { + dispatchLens( + updateVisualizationState({ + visualizationId: activeVisualization.id, + updater: layerIds.reduce( + (acc, layerId) => + activeVisualization.removeLayer ? activeVisualization.removeLayer(acc, layerId) : acc, + visualization.state + ), + }) + ); + } + layerIds.forEach((layerId) => { + const layerDatasourceId = Object.entries(props.datasourceMap).find( + ([datasourceId, datasource]) => { + return ( + datasourceStates[datasourceId] && + datasource.getLayers(datasourceStates[datasourceId].state).includes(layerId) + ); + } + )![0]; + dispatchLens( + updateLayer({ + layerId, + datasourceId: layerDatasourceId, + updater: props.datasourceMap[layerDatasourceId].removeLayer, + }) + ); + }); + } const commitSelection = (selection: VisualizationSelection) => { setFlyoutOpen(false); @@ -106,7 +149,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { trackUiEvent(`chart_switch`); switchToSuggestion( - props.dispatch, + dispatchLens, { ...selection, visualizationState: selection.getVisualizationState(), @@ -118,7 +161,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { (!selection.datasourceId && !selection.sameDatasources) || selection.dataLoss === 'everything' ) { - props.framePublicAPI.removeLayers(Object.keys(props.framePublicAPI.datasourceLayers)); + removeLayers(Object.keys(props.framePublicAPI.datasourceLayers)); } }; @@ -136,16 +179,16 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { ); // Always show the active visualization as a valid selection if ( - props.visualizationId === visualizationId && - props.visualizationState && - newVisualization.getVisualizationTypeId(props.visualizationState) === subVisualizationId + visualization.activeId === visualizationId && + visualization.state && + newVisualization.getVisualizationTypeId(visualization.state) === subVisualizationId ) { return { visualizationId, subVisualizationId, dataLoss: 'nothing', keptLayerIds: Object.keys(props.framePublicAPI.datasourceLayers), - getVisualizationState: () => switchVisType(subVisualizationId, props.visualizationState), + getVisualizationState: () => switchVisType(subVisualizationId, visualization.state), sameDatasources: true, }; } @@ -153,6 +196,8 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { const topSuggestion = getTopSuggestion( props, visualizationId, + datasourceStates, + visualization, newVisualization, subVisualizationId ); @@ -171,6 +216,19 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { dataLoss = 'nothing'; } + function addNewLayer() { + const newLayerId = generateId(); + dispatchLens( + updateLayer({ + datasourceId: activeDatasourceId!, + layerId: newLayerId, + updater: props.datasourceMap[activeDatasourceId!].insertLayer, + }) + ); + + return newLayerId; + } + return { visualizationId, subVisualizationId, @@ -179,29 +237,26 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { ? () => switchVisType( subVisualizationId, - newVisualization.initialize(props.framePublicAPI, topSuggestion.visualizationState) + newVisualization.initialize(addNewLayer, topSuggestion.visualizationState) ) - : () => { - return switchVisType( + : () => + switchVisType( subVisualizationId, newVisualization.initialize( - props.framePublicAPI, - props.visualizationId === newVisualization.id - ? props.visualizationState - : undefined, - props.visualizationId && - props.visualizationMap[props.visualizationId].getMainPalette - ? props.visualizationMap[props.visualizationId].getMainPalette!( - props.visualizationState + addNewLayer, + visualization.activeId === newVisualization.id ? visualization.state : undefined, + visualization.activeId && + props.visualizationMap[visualization.activeId].getMainPalette + ? props.visualizationMap[visualization.activeId].getMainPalette!( + visualization.state ) : undefined ) - ); - }, + ), keptLayerIds: topSuggestion ? topSuggestion.keptLayerIds : [], datasourceState: topSuggestion ? topSuggestion.datasourceState : undefined, datasourceId: topSuggestion ? topSuggestion.datasourceId : undefined, - sameDatasources: dataLoss === 'nothing' && props.visualizationId === newVisualization.id, + sameDatasources: dataLoss === 'nothing' && visualization.activeId === newVisualization.id, }; } @@ -213,8 +268,8 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { return { visualizationTypes: [], visualizationsLookup: {} }; } const subVisualizationId = getCurrentVisualizationId( - props.visualizationMap[props.visualizationId || ''], - props.visualizationState + props.visualizationMap[visualization.activeId || ''], + visualization.state ); const lowercasedSearchTerm = searchTerm.toLowerCase(); // reorganize visualizations in groups @@ -351,8 +406,8 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { flyoutOpen, props.visualizationMap, props.framePublicAPI, - props.visualizationId, - props.visualizationState, + visualization.activeId, + visualization.state, searchTerm, ] ); @@ -371,7 +426,10 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { data-test-subj="lnsChartSwitchPopover" fontWeight="bold" > - <VisualizationSummary {...props} /> + <VisualizationSummary + visualization={visualization} + visualizationMap={props.visualizationMap} + /> </ToolbarButton> } isOpen={flyoutOpen} @@ -402,7 +460,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { }} options={visualizationTypes} onChange={(newOptions) => { - const chosenType = newOptions.find(({ checked }) => checked === 'on')!; + const chosenType = newOptions.find(({ checked }) => checked === 'on'); if (!chosenType) { return; } @@ -434,21 +492,26 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { function getTopSuggestion( props: Props, visualizationId: string, + datasourceStates: Record<string, { state: unknown; isLoading: boolean }>, + visualization: { + activeId: string | null; + state: unknown; + }, newVisualization: Visualization<unknown>, subVisualizationId?: string ): Suggestion | undefined { const mainPalette = - props.visualizationId && - props.visualizationMap[props.visualizationId] && - props.visualizationMap[props.visualizationId].getMainPalette - ? props.visualizationMap[props.visualizationId].getMainPalette!(props.visualizationState) + visualization.activeId && + props.visualizationMap[visualization.activeId] && + props.visualizationMap[visualization.activeId].getMainPalette + ? props.visualizationMap[visualization.activeId].getMainPalette!(visualization.state) : undefined; const unfilteredSuggestions = getSuggestions({ datasourceMap: props.datasourceMap, - datasourceStates: props.datasourceStates, + datasourceStates, visualizationMap: { [visualizationId]: newVisualization }, - activeVisualizationId: props.visualizationId, - visualizationState: props.visualizationState, + activeVisualizationId: visualization.activeId, + visualizationState: visualization.state, subVisualizationId, activeData: props.framePublicAPI.activeData, mainPalette, diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/title.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/title.tsx new file mode 100644 index 0000000000000..b7d3d211eb777 --- /dev/null +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/title.tsx @@ -0,0 +1,27 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import './workspace_panel_wrapper.scss'; + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiScreenReaderOnly } from '@elastic/eui'; +import { LensState, useLensSelector } from '../../../state_management'; + +export function WorkspaceTitle() { + const title = useLensSelector((state: LensState) => state.lens.persistedDoc?.title); + return ( + <EuiScreenReaderOnly> + <h1 id="lns_ChartTitle" data-test-subj="lns_ChartTitle"> + {title || + i18n.translate('xpack.lens.chartTitle.unsaved', { + defaultMessage: 'Unsaved visualization', + })} + </h1> + </EuiScreenReaderOnly> + ); +} 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 38e9bb868b26a..4feb13fcfffd9 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 @@ -15,7 +15,7 @@ import { createExpressionRendererMock, DatasourceMock, createMockFramePublicAPI, -} from '../../mocks'; +} from '../../../mocks'; import { mockDataPlugin, mountWithProvider } from '../../../mocks'; jest.mock('../../../debounced_component', () => { return { @@ -24,7 +24,6 @@ jest.mock('../../../debounced_component', () => { }); import { WorkspacePanel } from './workspace_panel'; -import { mountWithIntl as mount } from '@kbn/test/jest'; import { ReactWrapper } from 'enzyme'; import { DragDrop, ChildDragDropProvider } from '../../../drag_drop'; import { fromExpression } from '@kbn/interpreter/common'; @@ -56,7 +55,6 @@ const defaultProps = { framePublicAPI: createMockFramePublicAPI(), activeVisualizationId: 'vis', visualizationState: {}, - dispatch: () => {}, ExpressionRenderer: createExpressionRendererMock(), core: createCoreStartWithPermissions(), plugins: { @@ -104,7 +102,8 @@ describe('workspace_panel', () => { }} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2); @@ -119,7 +118,8 @@ describe('workspace_panel', () => { vis: { ...mockVisualization, toExpression: () => null }, }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -135,7 +135,8 @@ describe('workspace_panel', () => { vis: { ...mockVisualization, toExpression: () => 'vis' }, }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -169,7 +170,7 @@ describe('workspace_panel', () => { }} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -209,7 +210,8 @@ describe('workspace_panel', () => { ExpressionRenderer={expressionRendererMock} plugins={{ ...props.plugins, uiActions: uiActionsMock }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -229,7 +231,6 @@ describe('workspace_panel', () => { }; mockDatasource.toExpression.mockReturnValue('datasource'); mockDatasource.getLayers.mockReturnValue(['first']); - const dispatch = jest.fn(); const mounted = await mountWithProvider( <WorkspacePanel @@ -247,10 +248,10 @@ describe('workspace_panel', () => { visualizationMap={{ vis: { ...mockVisualization, toExpression: () => 'vis' }, }} - dispatch={dispatch} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -261,8 +262,8 @@ describe('workspace_panel', () => { onData(undefined, { tables: { tables: tableData } }); expect(mounted.lensStore.dispatch).toHaveBeenCalledWith({ - type: 'app/onActiveDataChange', - payload: { activeData: tableData }, + type: 'lens/onActiveDataChange', + payload: tableData, }); }); @@ -302,7 +303,8 @@ describe('workspace_panel', () => { }} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -377,7 +379,8 @@ describe('workspace_panel', () => { }} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; }); @@ -430,7 +433,8 @@ describe('workspace_panel', () => { }} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; }); @@ -481,7 +485,8 @@ describe('workspace_panel', () => { vis: { ...mockVisualization, toExpression: () => 'vis' }, }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -520,7 +525,8 @@ describe('workspace_panel', () => { management: { kibana: { indexPatterns: true } }, })} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -559,7 +565,8 @@ describe('workspace_panel', () => { management: { kibana: { indexPatterns: false } }, })} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -595,7 +602,8 @@ describe('workspace_panel', () => { vis: { ...mockVisualization, toExpression: () => 'vis' }, }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -632,7 +640,8 @@ describe('workspace_panel', () => { vis: mockVisualization, }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -671,7 +680,8 @@ describe('workspace_panel', () => { vis: mockVisualization, }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -707,7 +717,8 @@ describe('workspace_panel', () => { vis: { ...mockVisualization, toExpression: () => 'vis' }, }} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; @@ -742,7 +753,8 @@ describe('workspace_panel', () => { }} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; }); @@ -783,7 +795,8 @@ describe('workspace_panel', () => { }} ExpressionRenderer={expressionRendererMock} />, - defaultProps.plugins.data + + { data: defaultProps.plugins.data } ); instance = mounted.instance; }); @@ -805,7 +818,6 @@ describe('workspace_panel', () => { }); describe('suggestions from dropping in workspace panel', () => { - let mockDispatch: jest.Mock; let mockGetSuggestionForField: jest.Mock; let frame: jest.Mocked<FramePublicAPI>; @@ -813,12 +825,11 @@ describe('workspace_panel', () => { beforeEach(() => { frame = createMockFramePublicAPI(); - mockDispatch = jest.fn(); mockGetSuggestionForField = jest.fn(); }); - function initComponent(draggingContext = draggedField) { - instance = mount( + async function initComponent(draggingContext = draggedField) { + const mounted = await mountWithProvider( <ChildDragDropProvider dragging={draggingContext} setDragging={() => {}} @@ -846,11 +857,12 @@ describe('workspace_panel', () => { vis: mockVisualization, vis2: mockVisualization2, }} - dispatch={mockDispatch} getSuggestionForField={mockGetSuggestionForField} /> </ChildDragDropProvider> ); + instance = mounted.instance; + return mounted; } it('should immediately transition if exactly one suggestion is returned', async () => { @@ -860,32 +872,34 @@ describe('workspace_panel', () => { datasourceId: 'mock', visualizationState: {}, }); - initComponent(); + const { lensStore } = await initComponent(); instance.find(DragDrop).prop('onDrop')!(draggedField, 'field_replace'); - expect(mockDispatch).toHaveBeenCalledWith({ - type: 'SWITCH_VISUALIZATION', - newVisualizationId: 'vis', - initialState: {}, - datasourceState: {}, - datasourceId: 'mock', + expect(lensStore.dispatch).toHaveBeenCalledWith({ + type: 'lens/switchVisualization', + payload: { + newVisualizationId: 'vis', + initialState: {}, + datasourceState: {}, + datasourceId: 'mock', + }, }); }); - it('should allow to drop if there are suggestions', () => { + it('should allow to drop if there are suggestions', async () => { mockGetSuggestionForField.mockReturnValue({ visualizationId: 'vis', datasourceState: {}, datasourceId: 'mock', visualizationState: {}, }); - initComponent(); + await initComponent(); expect(instance.find(DragDrop).prop('dropTypes')).toBeTruthy(); }); - it('should refuse to drop if there are no suggestions', () => { - initComponent(); + it('should refuse to drop if there are no suggestions', async () => { + await initComponent(); 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 01d4e84ec4374..943dec8f0ed20 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 @@ -33,7 +33,6 @@ import { ExpressionRenderError, ReactExpressionRendererType, } from '../../../../../../../src/plugins/expressions/public'; -import { Action } from '../state_management'; import { Datasource, Visualization, @@ -46,17 +45,20 @@ import { DragDrop, DragContext, DragDropIdentifier } from '../../../drag_drop'; import { Suggestion, switchToSuggestion } from '../suggestion_helpers'; import { buildExpression } from '../expression_helpers'; import { trackUiEvent } from '../../../lens_ui_telemetry'; -import { - UiActionsStart, - VisualizeFieldContext, -} from '../../../../../../../src/plugins/ui_actions/public'; +import { UiActionsStart } from '../../../../../../../src/plugins/ui_actions/public'; import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/plugins/visualizations/public'; import { WorkspacePanelWrapper } from './workspace_panel_wrapper'; import { DropIllustration } from '../../../assets/drop_illustration'; import { getOriginalRequestErrorMessages } from '../../error_helper'; import { getMissingIndexPattern, validateDatasourceAndVisualization } from '../state_helpers'; import { DefaultInspectorAdapters } from '../../../../../../../src/plugins/expressions/common'; -import { onActiveDataChange, useLensDispatch } from '../../../state_management'; +import { + onActiveDataChange, + useLensDispatch, + updateVisualizationState, + updateDatasourceState, + setSaveable, +} from '../../../state_management'; export interface WorkspacePanelProps { activeVisualizationId: string | null; @@ -72,12 +74,9 @@ export interface WorkspacePanelProps { } >; framePublicAPI: FramePublicAPI; - dispatch: (action: Action) => void; ExpressionRenderer: ReactExpressionRendererType; core: CoreStart; plugins: { uiActions?: UiActionsStart; data: DataPublicPluginStart }; - title?: string; - visualizeTriggerFieldContext?: VisualizeFieldContext; getSuggestionForField: (field: DragDropIdentifier) => Suggestion | undefined; isFullscreen: boolean; } @@ -128,17 +127,15 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ datasourceMap, datasourceStates, framePublicAPI, - dispatch, core, plugins, ExpressionRenderer: ExpressionRendererComponent, - title, - visualizeTriggerFieldContext, suggestionForDraggedField, isFullscreen, }: Omit<WorkspacePanelProps, 'getSuggestionForField'> & { suggestionForDraggedField: Suggestion | undefined; }) { + const dispatchLens = useLensDispatch(); const [localState, setLocalState] = useState<WorkspaceState>({ expressionBuildError: undefined, expandError: false, @@ -196,6 +193,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ datasourceStates, datasourceLayers: framePublicAPI.datasourceLayers, }); + if (ast) { // expression has to be turned into a string for dirty checking - if the ast is rebuilt, // turning it into a string will make sure the expression renderer only re-renders if the @@ -233,6 +231,14 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ ); const expressionExists = Boolean(expression); + const hasLoaded = Boolean( + activeVisualization && visualizationState && datasourceMap && datasourceStates + ); + useEffect(() => { + if (hasLoaded) { + dispatchLens(setSaveable(expressionExists)); + } + }, [hasLoaded, expressionExists, dispatchLens]); const onEvent = useCallback( (event: ExpressionRendererEvent) => { @@ -251,14 +257,15 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ }); } if (isLensEditEvent(event) && activeVisualization?.onEditAction) { - dispatch({ - type: 'UPDATE_VISUALIZATION_STATE', - visualizationId: activeVisualization.id, - updater: (oldState: unknown) => activeVisualization.onEditAction!(oldState, event), - }); + dispatchLens( + updateVisualizationState({ + visualizationId: activeVisualization.id, + updater: (oldState: unknown) => activeVisualization.onEditAction!(oldState, event), + }) + ); } }, - [plugins.uiActions, dispatch, activeVisualization] + [plugins.uiActions, activeVisualization, dispatchLens] ); useEffect(() => { @@ -275,9 +282,9 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ if (suggestionForDraggedField) { trackUiEvent('drop_onto_workspace'); trackUiEvent(expressionExists ? 'drop_non_empty' : 'drop_empty'); - switchToSuggestion(dispatch, suggestionForDraggedField, 'SWITCH_VISUALIZATION'); + switchToSuggestion(dispatchLens, suggestionForDraggedField, 'SWITCH_VISUALIZATION'); } - }, [suggestionForDraggedField, expressionExists, dispatch]); + }, [suggestionForDraggedField, expressionExists, dispatchLens]); const renderEmptyWorkspace = () => { return ( @@ -327,9 +334,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ }; const renderVisualization = () => { - // we don't want to render the emptyWorkspace on visualizing field from Discover - // as it is specific for the drag and drop functionality and can confuse the users - if (expression === null && !visualizeTriggerFieldContext) { + if (expression === null) { return renderEmptyWorkspace(); } return ( @@ -337,7 +342,6 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ expression={expression} framePublicAPI={framePublicAPI} timefilter={plugins.data.query.timefilter.timefilter} - dispatch={dispatch} onEvent={onEvent} setLocalState={setLocalState} localState={{ ...localState, configurationValidationError, missingRefsErrors }} @@ -387,9 +391,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ return ( <WorkspacePanelWrapper - title={title} framePublicAPI={framePublicAPI} - dispatch={dispatch} visualizationState={visualizationState} visualizationId={activeVisualizationId} datasourceStates={datasourceStates} @@ -410,7 +412,6 @@ export const VisualizationWrapper = ({ setLocalState, localState, ExpressionRendererComponent, - dispatch, application, activeDatasourceId, }: { @@ -418,7 +419,6 @@ export const VisualizationWrapper = ({ framePublicAPI: FramePublicAPI; timefilter: TimefilterContract; onEvent: (event: ExpressionRendererEvent) => void; - dispatch: (action: Action) => void; setLocalState: (dispatch: (prevState: WorkspaceState) => WorkspaceState) => void; localState: WorkspaceState & { configurationValidationError?: Array<{ @@ -454,7 +454,7 @@ export const VisualizationWrapper = ({ const onData$ = useCallback( (data: unknown, inspectorAdapters?: Partial<DefaultInspectorAdapters>) => { if (inspectorAdapters && inspectorAdapters.tables) { - dispatchLens(onActiveDataChange({ activeData: { ...inspectorAdapters.tables.tables } })); + dispatchLens(onActiveDataChange({ ...inspectorAdapters.tables.tables })); } }, [dispatchLens] @@ -480,11 +480,12 @@ export const VisualizationWrapper = ({ data-test-subj="errorFixAction" onClick={async () => { const newState = await validationError.fixAction?.newState(framePublicAPI); - dispatch({ - type: 'UPDATE_DATASOURCE_STATE', - datasourceId: activeDatasourceId, - updater: newState, - }); + dispatchLens( + updateDatasourceState({ + updater: newState, + datasourceId: activeDatasourceId, + }) + ); }} > {validationError.fixAction.label} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx index c18b362e2faa4..fb77ff75324f0 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx @@ -7,30 +7,23 @@ import React from 'react'; import { Visualization } from '../../../types'; -import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../../mocks'; -import { mountWithIntl as mount } from '@kbn/test/jest'; -import { ReactWrapper } from 'enzyme'; -import { WorkspacePanelWrapper, WorkspacePanelWrapperProps } from './workspace_panel_wrapper'; +import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../../../mocks'; +import { WorkspacePanelWrapper } from './workspace_panel_wrapper'; +import { mountWithProvider } from '../../../mocks'; describe('workspace_panel_wrapper', () => { let mockVisualization: jest.Mocked<Visualization>; let mockFrameAPI: FrameMock; - let instance: ReactWrapper<WorkspacePanelWrapperProps>; beforeEach(() => { mockVisualization = createMockVisualization(); mockFrameAPI = createMockFramePublicAPI(); }); - afterEach(() => { - instance.unmount(); - }); - - it('should render its children', () => { + it('should render its children', async () => { const MyChild = () => <span>The child elements</span>; - instance = mount( + const { instance } = await mountWithProvider( <WorkspacePanelWrapper - dispatch={jest.fn()} framePublicAPI={mockFrameAPI} visualizationState={{}} visualizationId="myVis" @@ -46,12 +39,11 @@ describe('workspace_panel_wrapper', () => { expect(instance.find(MyChild)).toHaveLength(1); }); - it('should call the toolbar renderer if provided', () => { + it('should call the toolbar renderer if provided', async () => { const renderToolbarMock = jest.fn(); const visState = { internalState: 123 }; - instance = mount( + await mountWithProvider( <WorkspacePanelWrapper - dispatch={jest.fn()} framePublicAPI={mockFrameAPI} visualizationState={visState} children={<span />} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 6724002d23e0b..d0e8e0d5a1bab 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -8,21 +8,19 @@ import './workspace_panel_wrapper.scss'; import React, { useCallback } from 'react'; -import { i18n } from '@kbn/i18n'; -import { EuiPageContent, EuiFlexGroup, EuiFlexItem, EuiScreenReaderOnly } from '@elastic/eui'; +import { EuiPageContent, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import classNames from 'classnames'; import { Datasource, FramePublicAPI, Visualization } from '../../../types'; import { NativeRenderer } from '../../../native_renderer'; -import { Action } from '../state_management'; import { ChartSwitch } from './chart_switch'; import { WarningsPopover } from './warnings_popover'; +import { useLensDispatch, updateVisualizationState } from '../../../state_management'; +import { WorkspaceTitle } from './title'; export interface WorkspacePanelWrapperProps { children: React.ReactNode | React.ReactNode[]; framePublicAPI: FramePublicAPI; visualizationState: unknown; - dispatch: (action: Action) => void; - title?: string; visualizationMap: Record<string, Visualization>; visualizationId: string | null; datasourceMap: Record<string, Datasource>; @@ -40,28 +38,29 @@ export function WorkspacePanelWrapper({ children, framePublicAPI, visualizationState, - dispatch, - title, visualizationId, visualizationMap, datasourceMap, datasourceStates, isFullscreen, }: WorkspacePanelWrapperProps) { + const dispatchLens = useLensDispatch(); + const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null; const setVisualizationState = useCallback( (newState: unknown) => { if (!activeVisualization) { return; } - dispatch({ - type: 'UPDATE_VISUALIZATION_STATE', - visualizationId: activeVisualization.id, - updater: newState, - clearStagedPreview: false, - }); + dispatchLens( + updateVisualizationState({ + visualizationId: activeVisualization.id, + updater: newState, + clearStagedPreview: false, + }) + ); }, - [dispatch, activeVisualization] + [dispatchLens, activeVisualization] ); const warningMessages: React.ReactNode[] = []; if (activeVisualization?.getWarningMessages) { @@ -101,11 +100,7 @@ export function WorkspacePanelWrapper({ <ChartSwitch data-test-subj="lnsChartSwitcher" visualizationMap={visualizationMap} - visualizationId={visualizationId} - visualizationState={visualizationState} datasourceMap={datasourceMap} - datasourceStates={datasourceStates} - dispatch={dispatch} framePublicAPI={framePublicAPI} /> </EuiFlexItem> @@ -136,14 +131,7 @@ export function WorkspacePanelWrapper({ 'lnsWorkspacePanelWrapper--fullscreen': isFullscreen, })} > - <EuiScreenReaderOnly> - <h1 id="lns_ChartTitle" data-test-subj="lns_ChartTitle"> - {title || - i18n.translate('xpack.lens.chartTitle.unsaved', { - defaultMessage: 'Unsaved visualization', - })} - </h1> - </EuiScreenReaderOnly> + <WorkspaceTitle /> {children} </EuiPageContent> </> 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 1762e7ff20fab..ff0d81c7fa277 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx @@ -5,105 +5,14 @@ * 2.0. */ -import React from 'react'; import { PaletteDefinition } from 'src/plugins/charts/public'; -import { - ReactExpressionRendererProps, - ExpressionsSetup, - ExpressionsStart, -} from '../../../../../src/plugins/expressions/public'; +import { ExpressionsSetup, ExpressionsStart } from '../../../../../src/plugins/expressions/public'; import { embeddablePluginMock } from '../../../../../src/plugins/embeddable/public/mocks'; import { expressionsPluginMock } from '../../../../../src/plugins/expressions/public/mocks'; -import { DatasourcePublicAPI, FramePublicAPI, Datasource, Visualization } from '../types'; import { EditorFrameSetupPlugins, EditorFrameStartPlugins } from './service'; import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; -export function createMockVisualization(): jest.Mocked<Visualization> { - return { - id: 'TEST_VIS', - clearLayer: jest.fn((state, _layerId) => state), - removeLayer: jest.fn(), - getLayerIds: jest.fn((_state) => ['layer1']), - visualizationTypes: [ - { - icon: 'empty', - id: 'TEST_VIS', - label: 'TEST', - groupLabel: 'TEST_VISGroup', - }, - ], - getVisualizationTypeId: jest.fn((_state) => 'empty'), - getDescription: jest.fn((_state) => ({ label: '' })), - switchVisualizationType: jest.fn((_, x) => x), - getSuggestions: jest.fn((_options) => []), - initialize: jest.fn((_frame, _state?) => ({})), - getConfiguration: jest.fn((props) => ({ - groups: [ - { - groupId: 'a', - groupLabel: 'a', - layerId: 'layer1', - supportsMoreColumns: true, - accessors: [], - filterOperations: jest.fn(() => true), - dataTestSubj: 'mockVisA', - }, - ], - })), - toExpression: jest.fn((_state, _frame) => null), - toPreviewExpression: jest.fn((_state, _frame) => null), - - setDimension: jest.fn(), - removeDimension: jest.fn(), - getErrorMessages: jest.fn((_state) => undefined), - renderDimensionEditor: jest.fn(), - }; -} - -export type DatasourceMock = jest.Mocked<Datasource> & { - publicAPIMock: jest.Mocked<DatasourcePublicAPI>; -}; - -export function createMockDatasource(id: string): DatasourceMock { - const publicAPIMock: jest.Mocked<DatasourcePublicAPI> = { - datasourceId: id, - getTableSpec: jest.fn(() => []), - getOperationForColumnId: jest.fn(), - }; - - return { - id: 'mockindexpattern', - clearLayer: jest.fn((state, _layerId) => state), - getDatasourceSuggestionsForField: jest.fn((_state, _item) => []), - getDatasourceSuggestionsForVisualizeField: jest.fn((_state, _indexpatternId, _fieldName) => []), - getDatasourceSuggestionsFromCurrentState: jest.fn((_state) => []), - getPersistableState: jest.fn((x) => ({ state: x, savedObjectReferences: [] })), - getPublicAPI: jest.fn().mockReturnValue(publicAPIMock), - initialize: jest.fn((_state?) => Promise.resolve()), - renderDataPanel: jest.fn(), - renderLayerPanel: jest.fn(), - toExpression: jest.fn((_frame, _state) => null), - insertLayer: jest.fn((_state, _newLayerId) => {}), - removeLayer: jest.fn((_state, _layerId) => {}), - removeColumn: jest.fn((props) => {}), - getLayers: jest.fn((_state) => []), - uniqueLabels: jest.fn((_state) => ({})), - renderDimensionTrigger: jest.fn(), - renderDimensionEditor: jest.fn(), - getDropProps: jest.fn(), - onDrop: jest.fn(), - - // this is an additional property which doesn't exist on real datasources - // but can be used to validate whether specific API mock functions are called - publicAPIMock, - getErrorMessages: jest.fn((_state) => undefined), - checkIntegrity: jest.fn((_state) => []), - }; -} - -export type FrameMock = jest.Mocked<FramePublicAPI>; - export function createMockPaletteDefinition(): jest.Mocked<PaletteDefinition> { return { getCategoricalColors: jest.fn((_) => ['#ff0000', '#00ff00']), @@ -123,23 +32,6 @@ export function createMockPaletteDefinition(): jest.Mocked<PaletteDefinition> { }; } -export function createMockFramePublicAPI(): FrameMock { - const palette = createMockPaletteDefinition(); - return { - datasourceLayers: {}, - addNewLayer: jest.fn(() => ''), - removeLayers: jest.fn(), - dateRange: { fromDate: 'now-7d', toDate: 'now' }, - query: { query: '', language: 'lucene' }, - filters: [], - availablePalettes: { - get: () => palette, - getAll: () => [palette], - }, - searchSessionId: 'sessionId', - }; -} - type Omit<T, K> = Pick<T, Exclude<keyof T, K>>; export type MockedSetupDependencies = Omit<EditorFrameSetupPlugins, 'expressions'> & { @@ -150,13 +42,6 @@ export type MockedStartDependencies = Omit<EditorFrameStartPlugins, 'expressions expressions: jest.Mocked<ExpressionsStart>; }; -export function createExpressionRendererMock(): jest.Mock< - React.ReactElement, - [ReactExpressionRendererProps] -> { - return jest.fn((_) => <span />); -} - export function createMockSetupDependencies() { return ({ data: dataPluginMock.createSetupContract(), diff --git a/x-pack/plugins/lens/public/editor_frame_service/service.tsx b/x-pack/plugins/lens/public/editor_frame_service/service.tsx index 6a26f85a64acc..63340795ec6c8 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/service.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/service.tsx @@ -105,27 +105,25 @@ export class EditorFrameService { ]); const { EditorFrame } = await import('../async_services'); - const palettes = await plugins.charts.palettes.getPalettes(); return { - EditorFrameContainer: ({ onError, showNoDataPopover, initialContext }) => { + EditorFrameContainer: ({ showNoDataPopover }) => { return ( <div className="lnsApp__frame"> <EditorFrame data-test-subj="lnsEditorFrame" - onError={onError} - datasourceMap={resolvedDatasources} - visualizationMap={resolvedVisualizations} core={core} plugins={plugins} - ExpressionRenderer={plugins.expressions.ReactExpressionRenderer} - palettes={palettes} showNoDataPopover={showNoDataPopover} - initialContext={initialContext} + datasourceMap={resolvedDatasources} + visualizationMap={resolvedVisualizations} + ExpressionRenderer={plugins.expressions.ReactExpressionRenderer} /> </div> ); }, + datasourceMap: resolvedDatasources, + visualizationMap: resolvedVisualizations, }; }; diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts index 3ed82bef06105..eeec6150dc497 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts @@ -10,7 +10,7 @@ import { getHeatmapVisualization, isCellValueSupported, } from './visualization'; -import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks'; +import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { CHART_SHAPES, FUNCTION_NAME, @@ -49,8 +49,8 @@ describe('heatmap', () => { describe('#intialize', () => { test('returns a default state', () => { - expect(getHeatmapVisualization({}).initialize(frame)).toEqual({ - layerId: '', + expect(getHeatmapVisualization({}).initialize(() => 'l1')).toEqual({ + layerId: 'l1', title: 'Empty Heatmap chart', shape: CHART_SHAPES.HEATMAP, legend: { @@ -68,7 +68,9 @@ describe('heatmap', () => { }); test('returns persisted state', () => { - expect(getHeatmapVisualization({}).initialize(frame, exampleState())).toEqual(exampleState()); + expect(getHeatmapVisualization({}).initialize(() => 'test-layer', exampleState())).toEqual( + exampleState() + ); }); }); diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx index fce5bf30f47ed..7788e93812b1b 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx @@ -119,10 +119,10 @@ export const getHeatmapVisualization = ({ return CHART_NAMES.heatmap; }, - initialize(frame, state, mainPalette) { + initialize(addNewLayer, state, mainPalette) { return ( state || { - layerId: frame.addNewLayer(), + layerId: addNewLayer(), title: 'Empty Heatmap chart', ...getInitialState(), } diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts index 2921251babe7f..82c27a76bb483 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts @@ -446,10 +446,13 @@ export async function syncExistingFields({ isFirstExistenceFetch: false, existenceFetchFailed: false, existenceFetchTimeout: false, - existingFields: emptinessInfo.reduce((acc, info) => { - acc[info.indexPatternTitle] = booleanMap(info.existingFieldNames); - return acc; - }, state.existingFields), + existingFields: emptinessInfo.reduce( + (acc, info) => { + acc[info.indexPatternTitle] = booleanMap(info.existingFieldNames); + return acc; + }, + { ...state.existingFields } + ), })); } catch (e) { // show all fields as available if fetch failed or timed out @@ -457,10 +460,13 @@ export async function syncExistingFields({ ...state, existenceFetchFailed: e.res?.status !== 408, existenceFetchTimeout: e.res?.status === 408, - existingFields: indexPatterns.reduce((acc, pattern) => { - acc[pattern.title] = booleanMap(pattern.fields.map((field) => field.name)); - return acc; - }, state.existingFields), + existingFields: indexPatterns.reduce( + (acc, pattern) => { + acc[pattern.title] = booleanMap(pattern.fields.map((field) => field.name)); + return acc; + }, + { ...state.existingFields } + ), })); } } diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/counter_rate.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/counter_rate.tsx index 3f539b18896c4..e6cba7ac9dce0 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/counter_rate.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/counter_rate.tsx @@ -126,7 +126,7 @@ export const counterRateOperation: OperationDefinition< signature: i18n.translate('xpack.lens.indexPattern.counterRate.signature', { defaultMessage: 'metric: number', }), - description: i18n.translate('xpack.lens.indexPattern.counterRate.documentation', { + description: i18n.translate('xpack.lens.indexPattern.counterRate.documentation.markdown', { defaultMessage: ` Calculates the rate of an ever increasing counter. This function will only yield helpful results on counter metric fields which contain a measurement of some kind monotonically growing over time. If the value does get smaller, it will interpret this as a counter reset. To get most precise results, \`counter_rate\` should be calculated on the \`max\` of a field. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/cumulative_sum.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/cumulative_sum.tsx index 0bdef4cc7678d..9c8437140f793 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/cumulative_sum.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/cumulative_sum.tsx @@ -122,7 +122,7 @@ export const cumulativeSumOperation: OperationDefinition< signature: i18n.translate('xpack.lens.indexPattern.cumulative_sum.signature', { defaultMessage: 'metric: number', }), - description: i18n.translate('xpack.lens.indexPattern.cumulativeSum.documentation', { + description: i18n.translate('xpack.lens.indexPattern.cumulativeSum.documentation.markdown', { defaultMessage: ` Calculates the cumulative sum of a metric over time, adding all previous values of a series to each value. To use this function, you need to configure a date histogram dimension as well. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/differences.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/differences.tsx index 857b719b0f411..8890390378d21 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/differences.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/differences.tsx @@ -114,7 +114,7 @@ export const derivativeOperation: OperationDefinition< signature: i18n.translate('xpack.lens.indexPattern.differences.signature', { defaultMessage: 'metric: number', }), - description: i18n.translate('xpack.lens.indexPattern.differences.documentation', { + description: i18n.translate('xpack.lens.indexPattern.differences.documentation.markdown', { defaultMessage: ` Calculates the difference to the last value of a metric over time. To use this function, you need to configure a date histogram dimension as well. Differences requires the data to be sequential. If your data is empty when using differences, try increasing the date histogram interval. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx index aea203c70a928..72e14cc2ea016 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx @@ -137,7 +137,7 @@ export const movingAverageOperation: OperationDefinition< signature: i18n.translate('xpack.lens.indexPattern.moving_average.signature', { defaultMessage: 'metric: number, [window]: number', }), - description: i18n.translate('xpack.lens.indexPattern.movingAverage.documentation', { + description: i18n.translate('xpack.lens.indexPattern.movingAverage.documentation.markdown', { defaultMessage: ` Calculates the moving average of a metric over time, averaging the last n-th values to calculate the current value. To use this function, you need to configure a date histogram dimension as well. The default window value is {defaultValue}. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/overall_metric.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/overall_metric.tsx index 21ec5387b3853..4250811e11452 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/overall_metric.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/overall_metric.tsx @@ -115,7 +115,7 @@ export const overallSumOperation = buildOverallMetricOperation<OverallSumIndexPa }); }, metric: 'sum', - description: i18n.translate('xpack.lens.indexPattern.overall_sum.documentation', { + description: i18n.translate('xpack.lens.indexPattern.overall_sum.documentation.markdown', { defaultMessage: ` Calculates the sum of a metric of all data points of a series in the current chart. A series is defined by a dimension using a date histogram or interval function. Other dimensions breaking down the data like top values or filter are treated as separate series. @@ -146,7 +146,7 @@ export const overallMinOperation = buildOverallMetricOperation<OverallMinIndexPa }); }, metric: 'min', - description: i18n.translate('xpack.lens.indexPattern.overall_min.documentation', { + description: i18n.translate('xpack.lens.indexPattern.overall_min.documentation.markdown', { defaultMessage: ` Calculates the minimum of a metric for all data points of a series in the current chart. A series is defined by a dimension using a date histogram or interval function. Other dimensions breaking down the data like top values or filter are treated as separate series. @@ -177,7 +177,7 @@ export const overallMaxOperation = buildOverallMetricOperation<OverallMaxIndexPa }); }, metric: 'max', - description: i18n.translate('xpack.lens.indexPattern.overall_max.documentation', { + description: i18n.translate('xpack.lens.indexPattern.overall_max.documentation.markdown', { defaultMessage: ` Calculates the maximum of a metric for all data points of a series in the current chart. A series is defined by a dimension using a date histogram or interval function. Other dimensions breaking down the data like top values or filter are treated as separate series. @@ -209,7 +209,7 @@ export const overallAverageOperation = buildOverallMetricOperation<OverallAverag }); }, metric: 'average', - description: i18n.translate('xpack.lens.indexPattern.overall_average.documentation', { + description: i18n.translate('xpack.lens.indexPattern.overall_average.documentation.markdown', { defaultMessage: ` Calculates the average of a metric for all data points of a series in the current chart. A series is defined by a dimension using a date histogram or interval function. Other dimensions breaking down the data like top values or filter are treated as separate series. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx index 41b90cfc6173a..72c1362896ac0 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx @@ -121,7 +121,7 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo signature: i18n.translate('xpack.lens.indexPattern.cardinality.signature', { defaultMessage: 'field: string', }), - description: i18n.translate('xpack.lens.indexPattern.cardinality.documentation', { + description: i18n.translate('xpack.lens.indexPattern.cardinality.documentation.markdown', { defaultMessage: ` Calculates the number of unique values of a specified field. Works for number, string, date and boolean values. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx index 3e5eee480a685..a6134ddc67bc0 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx @@ -114,7 +114,7 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn, 'field documentation: { section: 'elasticsearch', signature: '', - description: i18n.translate('xpack.lens.indexPattern.count.documentation', { + description: i18n.translate('xpack.lens.indexPattern.count.documentation.markdown', { defaultMessage: ` Calculates the number of documents. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx index dbdbcf226d9bb..3c3068a595bc0 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx @@ -79,8 +79,10 @@ function FormulaHelp({ }), description: ( <Markdown - markdown={i18n.translate('xpack.lens.formulaDocumentation.filterRatioDescription', { - defaultMessage: `### Filter ratio: + markdown={i18n.translate( + 'xpack.lens.formulaDocumentation.filterRatioDescription.markdown', + { + defaultMessage: `### Filter ratio: Use \`kql=''\` to filter one set of documents and compare it to other documents within the same grouping. For example, to see how the error rate changes over time: @@ -90,9 +92,10 @@ count(kql='response.status_code > 400') / count() \`\`\` `, - description: - 'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)', - })} + description: + 'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)', + } + )} /> ), }, @@ -102,8 +105,10 @@ count(kql='response.status_code > 400') / count() }), description: ( <Markdown - markdown={i18n.translate('xpack.lens.formulaDocumentation.weekOverWeekDescription', { - defaultMessage: `### Week over week: + markdown={i18n.translate( + 'xpack.lens.formulaDocumentation.weekOverWeekDescription.markdown', + { + defaultMessage: `### Week over week: Use \`shift='1w'\` to get the value of each grouping from the previous week. Time shift should not be used with the *Top values* function. @@ -114,9 +119,10 @@ percentile(system.network.in.bytes, percentile=99, shift='1w') \`\`\` `, - description: - 'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)', - })} + description: + 'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)', + } + )} /> ), }, @@ -126,8 +132,10 @@ percentile(system.network.in.bytes, percentile=99, shift='1w') }), description: ( <Markdown - markdown={i18n.translate('xpack.lens.formulaDocumentation.percentOfTotalDescription', { - defaultMessage: `### Percent of total + markdown={i18n.translate( + 'xpack.lens.formulaDocumentation.percentOfTotalDescription.markdown', + { + defaultMessage: `### Percent of total Formulas can calculate \`overall_sum\` for all the groupings, which lets you convert each grouping into a percent of total: @@ -137,9 +145,10 @@ sum(products.base_price) / overall_sum(sum(products.base_price)) \`\`\` `, - description: - 'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)', - })} + description: + 'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)', + } + )} /> ), }, @@ -372,9 +381,8 @@ sum(products.base_price) / overall_sum(sum(products.base_price)) }} > <Markdown - markdown={i18n.translate('xpack.lens.formulaDocumentation', { - defaultMessage: ` -## How it works + markdown={i18n.translate('xpack.lens.formulaDocumentation.markdown', { + defaultMessage: `## How it works Lens formulas let you do math using a combination of Elasticsearch aggregations and math functions. There are three main types of functions: diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx index 4914ca0bd0f88..267b8e1f66a1d 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx @@ -282,7 +282,7 @@ export const lastValueOperation: OperationDefinition<LastValueIndexPatternColumn signature: i18n.translate('xpack.lens.indexPattern.lastValue.signature', { defaultMessage: 'field: string', }), - description: i18n.translate('xpack.lens.indexPattern.lastValue.documentation', { + description: i18n.translate('xpack.lens.indexPattern.lastValue.documentation.markdown', { defaultMessage: ` Returns the value of a field from the last document, ordered by the default time field of the index pattern. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx index 46e099820ba3d..7596a05c921f2 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx @@ -139,7 +139,7 @@ function buildMetricOperation<T extends MetricColumn<string>>({ signature: i18n.translate('xpack.lens.indexPattern.metric.signature', { defaultMessage: 'field: string', }), - description: i18n.translate('xpack.lens.indexPattern.metric.documentation', { + description: i18n.translate('xpack.lens.indexPattern.metric.documentation.markdown', { defaultMessage: ` Returns the {metric} of a field. This function only works for number fields. diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.tsx index bdc4743e4f56d..9c9f7e8b66a1f 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.tsx @@ -220,7 +220,7 @@ export const percentileOperation: OperationDefinition<PercentileIndexPatternColu signature: i18n.translate('xpack.lens.indexPattern.percentile.signature', { defaultMessage: 'field: string, [percentile]: number', }), - description: i18n.translate('xpack.lens.indexPattern.percentile.documentation', { + description: i18n.translate('xpack.lens.indexPattern.percentile.documentation.markdown', { defaultMessage: ` Returns the specified percentile of the values of a field. This is the value n percent of the values occuring in documents are smaller. diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts index 66e524435ebc8..2882d9c4c0246 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts @@ -7,7 +7,7 @@ import { metricVisualization } from './visualization'; import { MetricState } from './types'; -import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks'; +import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { generateId } from '../id_generator'; import { DatasourcePublicAPI, FramePublicAPI } from '../types'; @@ -23,7 +23,6 @@ function exampleState(): MetricState { function mockFrame(): FramePublicAPI { return { ...createMockFramePublicAPI(), - addNewLayer: () => 'l42', datasourceLayers: { l1: createMockDatasource('l1').publicAPIMock, l42: createMockDatasource('l42').publicAPIMock, @@ -35,19 +34,19 @@ describe('metric_visualization', () => { describe('#initialize', () => { it('loads default state', () => { (generateId as jest.Mock).mockReturnValueOnce('test-id1'); - const initialState = metricVisualization.initialize(mockFrame()); + const initialState = metricVisualization.initialize(() => 'test-id1'); expect(initialState.accessor).not.toBeDefined(); expect(initialState).toMatchInlineSnapshot(` - Object { - "accessor": undefined, - "layerId": "l42", - } - `); + Object { + "accessor": undefined, + "layerId": "test-id1", + } + `); }); it('loads from persisted state', () => { - expect(metricVisualization.initialize(mockFrame(), exampleState())).toEqual(exampleState()); + expect(metricVisualization.initialize(() => 'l1', exampleState())).toEqual(exampleState()); }); }); diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx index e0977be7535af..49565f53bda36 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx @@ -85,10 +85,10 @@ export const metricVisualization: Visualization<MetricState> = { getSuggestions, - initialize(frame, state) { + initialize(addNewLayer, state) { return ( state || { - layerId: frame.addNewLayer(), + layerId: addNewLayer(), accessor: undefined, } ); diff --git a/x-pack/plugins/lens/public/mocks.tsx b/x-pack/plugins/lens/public/mocks.tsx index dcdabac36db3a..fc1b3019df386 100644 --- a/x-pack/plugins/lens/public/mocks.tsx +++ b/x-pack/plugins/lens/public/mocks.tsx @@ -15,6 +15,7 @@ import { coreMock } from 'src/core/public/mocks'; import moment from 'moment'; import { Provider } from 'react-redux'; import { act } from 'react-dom/test-utils'; +import { ReactExpressionRendererProps } from 'src/plugins/expressions/public'; import { LensPublicStart } from '.'; import { visualizationTypes } from './xy_visualization/types'; import { navigationPluginMock } from '../../../../src/plugins/navigation/public/mocks'; @@ -37,6 +38,111 @@ import { EmbeddableStateTransfer } from '../../../../src/plugins/embeddable/publ import { makeConfigureStore, getPreloadedState, LensAppState } from './state_management/index'; import { getResolvedDateRange } from './utils'; import { presentationUtilPluginMock } from '../../../../src/plugins/presentation_util/public/mocks'; +import { DatasourcePublicAPI, Datasource, Visualization, FramePublicAPI } from './types'; + +export function createMockVisualization(): jest.Mocked<Visualization> { + return { + id: 'TEST_VIS', + clearLayer: jest.fn((state, _layerId) => state), + removeLayer: jest.fn(), + getLayerIds: jest.fn((_state) => ['layer1']), + visualizationTypes: [ + { + icon: 'empty', + id: 'TEST_VIS', + label: 'TEST', + groupLabel: 'TEST_VISGroup', + }, + ], + getVisualizationTypeId: jest.fn((_state) => 'empty'), + getDescription: jest.fn((_state) => ({ label: '' })), + switchVisualizationType: jest.fn((_, x) => x), + getSuggestions: jest.fn((_options) => []), + initialize: jest.fn((_frame, _state?) => ({})), + getConfiguration: jest.fn((props) => ({ + groups: [ + { + groupId: 'a', + groupLabel: 'a', + layerId: 'layer1', + supportsMoreColumns: true, + accessors: [], + filterOperations: jest.fn(() => true), + dataTestSubj: 'mockVisA', + }, + ], + })), + toExpression: jest.fn((_state, _frame) => null), + toPreviewExpression: jest.fn((_state, _frame) => null), + + setDimension: jest.fn(), + removeDimension: jest.fn(), + getErrorMessages: jest.fn((_state) => undefined), + renderDimensionEditor: jest.fn(), + }; +} + +export type DatasourceMock = jest.Mocked<Datasource> & { + publicAPIMock: jest.Mocked<DatasourcePublicAPI>; +}; + +export function createMockDatasource(id: string): DatasourceMock { + const publicAPIMock: jest.Mocked<DatasourcePublicAPI> = { + datasourceId: id, + getTableSpec: jest.fn(() => []), + getOperationForColumnId: jest.fn(), + }; + + return { + id: 'mockindexpattern', + clearLayer: jest.fn((state, _layerId) => state), + getDatasourceSuggestionsForField: jest.fn((_state, _item) => []), + getDatasourceSuggestionsForVisualizeField: jest.fn((_state, _indexpatternId, _fieldName) => []), + getDatasourceSuggestionsFromCurrentState: jest.fn((_state) => []), + getPersistableState: jest.fn((x) => ({ + state: x, + savedObjectReferences: [{ type: 'index-pattern', id: 'mockip', name: 'mockip' }], + })), + getPublicAPI: jest.fn().mockReturnValue(publicAPIMock), + initialize: jest.fn((_state?) => Promise.resolve()), + renderDataPanel: jest.fn(), + renderLayerPanel: jest.fn(), + toExpression: jest.fn((_frame, _state) => null), + insertLayer: jest.fn((_state, _newLayerId) => {}), + removeLayer: jest.fn((_state, _layerId) => {}), + removeColumn: jest.fn((props) => {}), + getLayers: jest.fn((_state) => []), + uniqueLabels: jest.fn((_state) => ({})), + renderDimensionTrigger: jest.fn(), + renderDimensionEditor: jest.fn(), + getDropProps: jest.fn(), + onDrop: jest.fn(), + + // this is an additional property which doesn't exist on real datasources + // but can be used to validate whether specific API mock functions are called + publicAPIMock, + getErrorMessages: jest.fn((_state) => undefined), + checkIntegrity: jest.fn((_state) => []), + }; +} + +export function createExpressionRendererMock(): jest.Mock< + React.ReactElement, + [ReactExpressionRendererProps] +> { + return jest.fn((_) => <span />); +} + +export type FrameMock = jest.Mocked<FramePublicAPI>; +export function createMockFramePublicAPI(): FrameMock { + return { + datasourceLayers: {}, + dateRange: { fromDate: 'now-7d', toDate: 'now' }, + query: { query: '', language: 'lucene' }, + filters: [], + searchSessionId: 'sessionId', + }; +} export type Start = jest.Mocked<LensPublicStart>; @@ -66,6 +172,9 @@ export const defaultDoc = ({ state: { query: 'kuery', filters: [{ query: { match_phrase: { src: 'test' } } }], + datasourceStates: { + testDatasource: 'datasource', + }, }, references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }], } as unknown) as Document; @@ -257,20 +366,48 @@ export function makeDefaultServices( }; } -export function mockLensStore({ +export const defaultState = { + searchSessionId: 'sessionId-1', + filters: [], + query: { language: 'lucene', query: '' }, + resolvedDateRange: { fromDate: '2021-01-10T04:00:00.000Z', toDate: '2021-01-10T08:00:00.000Z' }, + isFullscreenDatasource: false, + isSaveable: false, + isLoading: false, + isLinkedToOriginatingApp: false, + activeDatasourceId: 'testDatasource', + visualization: { + state: {}, + activeId: 'testVis', + }, + datasourceStates: { + testDatasource: { + isLoading: false, + state: '', + }, + }, +}; + +export function makeLensStore({ data, - storePreloadedState, + preloadedState, + dispatch, }: { - data: DataPublicPluginStart; - storePreloadedState?: Partial<LensAppState>; + data?: DataPublicPluginStart; + preloadedState?: Partial<LensAppState>; + dispatch?: jest.Mock; }) { + if (!data) { + data = mockDataPlugin(); + } const lensStore = makeConfigureStore( getPreloadedState({ + ...defaultState, + searchSessionId: data.search.session.start(), query: data.query.queryString.getQuery(), filters: data.query.filterManager.getGlobalFilters(), - searchSessionId: data.search.session.start(), resolvedDateRange: getResolvedDateRange(data.query.timefilter.timefilter), - ...storePreloadedState, + ...preloadedState, }), { data, @@ -278,36 +415,52 @@ export function mockLensStore({ ); const origDispatch = lensStore.dispatch; - lensStore.dispatch = jest.fn(origDispatch); + lensStore.dispatch = jest.fn(dispatch || origDispatch); return lensStore; } export const mountWithProvider = async ( component: React.ReactElement, - data: DataPublicPluginStart, - storePreloadedState?: Partial<LensAppState>, - extraWrappingComponent?: React.FC<{ - children: React.ReactNode; - }> + store?: { + data?: DataPublicPluginStart; + preloadedState?: Partial<LensAppState>; + dispatch?: jest.Mock; + }, + options?: { + wrappingComponent?: React.FC<{ + children: React.ReactNode; + }>; + attachTo?: HTMLElement; + } ) => { - const lensStore = mockLensStore({ data, storePreloadedState }); + const lensStore = makeLensStore(store || {}); - const wrappingComponent: React.FC<{ + let wrappingComponent: React.FC<{ children: React.ReactNode; - }> = ({ children }) => { - if (extraWrappingComponent) { - return extraWrappingComponent({ - children: <Provider store={lensStore}>{children}</Provider>, - }); - } - return <Provider store={lensStore}>{children}</Provider>; + }> = ({ children }) => <Provider store={lensStore}>{children}</Provider>; + + let restOptions: { + attachTo?: HTMLElement | undefined; }; + if (options) { + const { wrappingComponent: _wrappingComponent, ...rest } = options; + restOptions = rest; + + if (_wrappingComponent) { + wrappingComponent = ({ children }) => { + return _wrappingComponent({ + children: <Provider store={lensStore}>{children}</Provider>, + }); + }; + } + } let instance: ReactWrapper = {} as ReactWrapper; await act(async () => { instance = mount(component, ({ wrappingComponent, + ...restOptions, } as unknown) as ReactWrapper); }); return { instance, lensStore }; diff --git a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx index 6e04d1a4ff958..c82fdb2766f7e 100644 --- a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx @@ -91,11 +91,11 @@ export const getPieVisualization = ({ shape: visualizationTypeId as PieVisualizationState['shape'], }), - initialize(frame, state, mainPalette) { + initialize(addNewLayer, state, mainPalette) { return ( state || { shape: 'donut', - layers: [newLayerState(frame.addNewLayer())], + layers: [newLayerState(addNewLayer())], palette: mainPalette, } ); diff --git a/x-pack/plugins/lens/public/state_management/app_slice.ts b/x-pack/plugins/lens/public/state_management/app_slice.ts deleted file mode 100644 index 29d5b0bee843f..0000000000000 --- a/x-pack/plugins/lens/public/state_management/app_slice.ts +++ /dev/null @@ -1,55 +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 { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { isEqual } from 'lodash'; -import { LensAppState } from './types'; - -export const initialState: LensAppState = { - searchSessionId: '', - filters: [], - query: { language: 'kuery', query: '' }, - resolvedDateRange: { fromDate: '', toDate: '' }, - - indexPatternsForTopNav: [], - isSaveable: false, - isAppLoading: false, - isLinkedToOriginatingApp: false, -}; - -export const appSlice = createSlice({ - name: 'app', - initialState, - reducers: { - setState: (state, { payload }: PayloadAction<Partial<LensAppState>>) => { - return { - ...state, - ...payload, - }; - }, - onChangeFromEditorFrame: (state, { payload }: PayloadAction<Partial<LensAppState>>) => { - return { - ...state, - ...payload, - }; - }, - onActiveDataChange: (state, { payload }: PayloadAction<Partial<LensAppState>>) => { - if (!isEqual(state.activeData, payload?.activeData)) { - return { - ...state, - ...payload, - }; - } - return state; - }, - navigateAway: (state) => state, - }, -}); - -export const reducer = { - app: appSlice.reducer, -}; diff --git a/x-pack/plugins/lens/public/state_management/external_context_middleware.ts b/x-pack/plugins/lens/public/state_management/external_context_middleware.ts index 0743dce73eb33..07233b87dd19b 100644 --- a/x-pack/plugins/lens/public/state_management/external_context_middleware.ts +++ b/x-pack/plugins/lens/public/state_management/external_context_middleware.ts @@ -27,7 +27,7 @@ export const externalContextMiddleware = (data: DataPublicPluginStart) => ( store.dispatch ); return (next: Dispatch) => (action: PayloadAction<Partial<LensAppState>>) => { - if (action.type === 'app/navigateAway') { + if (action.type === 'lens/navigateAway') { unsubscribeFromExternalContext(); } next(action); @@ -44,7 +44,7 @@ function subscribeToExternalContext( const dispatchFromExternal = (searchSessionId = search.session.start()) => { const globalFilters = filterManager.getFilters(); - const filters = isEqual(getState().app.filters, globalFilters) + const filters = isEqual(getState().lens.filters, globalFilters) ? null : { filters: globalFilters }; dispatch( @@ -64,7 +64,7 @@ function subscribeToExternalContext( .pipe(delay(0)) // then update if it didn't get updated yet .subscribe((newSessionId?: string) => { - if (newSessionId && getState().app.searchSessionId !== newSessionId) { + if (newSessionId && getState().lens.searchSessionId !== newSessionId) { debounceDispatchFromExternal(newSessionId); } }); diff --git a/x-pack/plugins/lens/public/state_management/index.ts b/x-pack/plugins/lens/public/state_management/index.ts index 429978e60756b..b72c383130208 100644 --- a/x-pack/plugins/lens/public/state_management/index.ts +++ b/x-pack/plugins/lens/public/state_management/index.ts @@ -8,8 +8,9 @@ import { configureStore, DeepPartial, getDefaultMiddleware } from '@reduxjs/toolkit'; import logger from 'redux-logger'; import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'; -import { appSlice, initialState } from './app_slice'; +import { lensSlice, initialState } from './lens_slice'; import { timeRangeMiddleware } from './time_range_middleware'; +import { optimizingMiddleware } from './optimizing_middleware'; import { externalContextMiddleware } from './external_context_middleware'; import { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; @@ -17,19 +18,29 @@ import { LensAppState, LensState } from './types'; export * from './types'; export const reducer = { - app: appSlice.reducer, + lens: lensSlice.reducer, }; export const { setState, navigateAway, - onChangeFromEditorFrame, + setSaveable, onActiveDataChange, -} = appSlice.actions; + updateState, + updateDatasourceState, + updateVisualizationState, + updateLayer, + switchVisualization, + selectSuggestion, + rollbackSuggestion, + submitSuggestion, + switchDatasource, + setToggleFullscreen, +} = lensSlice.actions; export const getPreloadedState = (initializedState: Partial<LensAppState>) => { const state = { - app: { + lens: { ...initialState, ...initializedState, }, @@ -45,15 +56,9 @@ export const makeConfigureStore = ( ) => { const middleware = [ ...getDefaultMiddleware({ - serializableCheck: { - ignoredActions: [ - 'app/setState', - 'app/onChangeFromEditorFrame', - 'app/onActiveDataChange', - 'app/navigateAway', - ], - }, + serializableCheck: false, }), + optimizingMiddleware(), timeRangeMiddleware(data), externalContextMiddleware(data), ]; diff --git a/x-pack/plugins/lens/public/state_management/lens_slice.test.ts b/x-pack/plugins/lens/public/state_management/lens_slice.test.ts new file mode 100644 index 0000000000000..cce0376707143 --- /dev/null +++ b/x-pack/plugins/lens/public/state_management/lens_slice.test.ts @@ -0,0 +1,148 @@ +/* + * 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 { Query } from 'src/plugins/data/public'; +import { + switchDatasource, + switchVisualization, + setState, + updateState, + updateDatasourceState, + updateVisualizationState, +} from '.'; +import { makeLensStore, defaultState } from '../mocks'; + +describe('lensSlice', () => { + const store = makeLensStore({}); + const customQuery = { query: 'custom' } as Query; + + // TODO: need to move some initialization logic from mounter + // describe('initialization', () => { + // }) + + describe('state update', () => { + it('setState: updates state ', () => { + const lensState = store.getState().lens; + expect(lensState).toEqual(defaultState); + store.dispatch(setState({ query: customQuery })); + const changedState = store.getState().lens; + expect(changedState).toEqual({ ...defaultState, query: customQuery }); + }); + + it('updateState: updates state with updater', () => { + const customUpdater = jest.fn((state) => ({ ...state, query: customQuery })); + store.dispatch(updateState({ subType: 'UPDATE', updater: customUpdater })); + const changedState = store.getState().lens; + expect(changedState).toEqual({ ...defaultState, query: customQuery }); + }); + it('should update the corresponding visualization state on update', () => { + const newVisState = {}; + store.dispatch( + updateVisualizationState({ + visualizationId: 'testVis', + updater: newVisState, + }) + ); + + expect(store.getState().lens.visualization.state).toBe(newVisState); + }); + it('should update the datasource state with passed in reducer', () => { + const datasourceUpdater = jest.fn(() => ({ changed: true })); + store.dispatch( + updateDatasourceState({ + datasourceId: 'testDatasource', + updater: datasourceUpdater, + }) + ); + expect(store.getState().lens.datasourceStates.testDatasource.state).toStrictEqual({ + changed: true, + }); + expect(datasourceUpdater).toHaveBeenCalledTimes(1); + }); + it('should update the layer state with passed in reducer', () => { + const newDatasourceState = {}; + store.dispatch( + updateDatasourceState({ + datasourceId: 'testDatasource', + updater: newDatasourceState, + }) + ); + expect(store.getState().lens.datasourceStates.testDatasource.state).toStrictEqual( + newDatasourceState + ); + }); + it('should should switch active visualization', () => { + const newVisState = {}; + store.dispatch( + switchVisualization({ + newVisualizationId: 'testVis2', + initialState: newVisState, + }) + ); + + expect(store.getState().lens.visualization.state).toBe(newVisState); + }); + + it('should should switch active visualization and update datasource state', () => { + const newVisState = {}; + const newDatasourceState = {}; + + store.dispatch( + switchVisualization({ + newVisualizationId: 'testVis2', + initialState: newVisState, + datasourceState: newDatasourceState, + datasourceId: 'testDatasource', + }) + ); + + expect(store.getState().lens.visualization.state).toBe(newVisState); + expect(store.getState().lens.datasourceStates.testDatasource.state).toBe(newDatasourceState); + }); + + it('should switch active datasource and initialize new state', () => { + store.dispatch( + switchDatasource({ + newDatasourceId: 'testDatasource2', + }) + ); + + expect(store.getState().lens.activeDatasourceId).toEqual('testDatasource2'); + expect(store.getState().lens.datasourceStates.testDatasource2.isLoading).toEqual(true); + }); + + it('not initialize already initialized datasource on switch', () => { + const datasource2State = {}; + const customStore = makeLensStore({ + preloadedState: { + datasourceStates: { + testDatasource: { + state: {}, + isLoading: false, + }, + testDatasource2: { + state: datasource2State, + isLoading: false, + }, + }, + }, + }); + + customStore.dispatch( + switchDatasource({ + newDatasourceId: 'testDatasource2', + }) + ); + + expect(customStore.getState().lens.activeDatasourceId).toEqual('testDatasource2'); + expect(customStore.getState().lens.datasourceStates.testDatasource2.isLoading).toEqual(false); + expect(customStore.getState().lens.datasourceStates.testDatasource2.state).toBe( + datasource2State + ); + }); + }); +}); diff --git a/x-pack/plugins/lens/public/state_management/lens_slice.ts b/x-pack/plugins/lens/public/state_management/lens_slice.ts new file mode 100644 index 0000000000000..cb181881a6552 --- /dev/null +++ b/x-pack/plugins/lens/public/state_management/lens_slice.ts @@ -0,0 +1,262 @@ +/* + * 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 { createSlice, current, PayloadAction } from '@reduxjs/toolkit'; +import { TableInspectorAdapter } from '../editor_frame_service/types'; +import { LensAppState } from './types'; + +export const initialState: LensAppState = { + searchSessionId: '', + filters: [], + query: { language: 'kuery', query: '' }, + resolvedDateRange: { fromDate: '', toDate: '' }, + isFullscreenDatasource: false, + isSaveable: false, + isLoading: false, + isLinkedToOriginatingApp: false, + activeDatasourceId: null, + datasourceStates: {}, + visualization: { + state: null, + activeId: null, + }, +}; + +export const lensSlice = createSlice({ + name: 'lens', + initialState, + reducers: { + setState: (state, { payload }: PayloadAction<Partial<LensAppState>>) => { + return { + ...state, + ...payload, + }; + }, + onActiveDataChange: (state, { payload }: PayloadAction<TableInspectorAdapter>) => { + return { + ...state, + activeData: payload, + }; + }, + setSaveable: (state, { payload }: PayloadAction<boolean>) => { + return { + ...state, + isSaveable: payload, + }; + }, + updateState: ( + state, + action: { + payload: { + subType: string; + updater: (prevState: LensAppState) => LensAppState; + }; + } + ) => { + return action.payload.updater(current(state) as LensAppState); + }, + updateDatasourceState: ( + state, + { + payload, + }: { + payload: { + updater: unknown | ((prevState: unknown) => unknown); + datasourceId: string; + clearStagedPreview?: boolean; + }; + } + ) => { + return { + ...state, + datasourceStates: { + ...state.datasourceStates, + [payload.datasourceId]: { + state: + typeof payload.updater === 'function' + ? payload.updater(current(state).datasourceStates[payload.datasourceId].state) + : payload.updater, + isLoading: false, + }, + }, + stagedPreview: payload.clearStagedPreview ? undefined : state.stagedPreview, + }; + }, + updateVisualizationState: ( + state, + { + payload, + }: { + payload: { + visualizationId: string; + updater: unknown | ((state: unknown) => unknown); + clearStagedPreview?: boolean; + }; + } + ) => { + if (!state.visualization.activeId) { + throw new Error('Invariant: visualization state got updated without active visualization'); + } + // This is a safeguard that prevents us from accidentally updating the + // wrong visualization. This occurs in some cases due to the uncoordinated + // way we manage state across plugins. + if (state.visualization.activeId !== payload.visualizationId) { + return state; + } + return { + ...state, + visualization: { + ...state.visualization, + state: + typeof payload.updater === 'function' + ? payload.updater(current(state.visualization.state)) + : payload.updater, + }, + stagedPreview: payload.clearStagedPreview ? undefined : state.stagedPreview, + }; + }, + updateLayer: ( + state, + { + payload, + }: { + payload: { + layerId: string; + datasourceId: string; + updater: (state: unknown, layerId: string) => unknown; + }; + } + ) => { + return { + ...state, + datasourceStates: { + ...state.datasourceStates, + [payload.datasourceId]: { + ...state.datasourceStates[payload.datasourceId], + state: payload.updater( + current(state).datasourceStates[payload.datasourceId].state, + payload.layerId + ), + }, + }, + }; + }, + + switchVisualization: ( + state, + { + payload, + }: { + payload: { + newVisualizationId: string; + initialState: unknown; + datasourceState?: unknown; + datasourceId?: string; + }; + } + ) => { + return { + ...state, + datasourceStates: + 'datasourceId' in payload && payload.datasourceId + ? { + ...state.datasourceStates, + [payload.datasourceId]: { + ...state.datasourceStates[payload.datasourceId], + state: payload.datasourceState, + }, + } + : state.datasourceStates, + visualization: { + ...state.visualization, + activeId: payload.newVisualizationId, + state: payload.initialState, + }, + stagedPreview: undefined, + }; + }, + selectSuggestion: ( + state, + { + payload, + }: { + payload: { + newVisualizationId: string; + initialState: unknown; + datasourceState: unknown; + datasourceId: string; + }; + } + ) => { + return { + ...state, + datasourceStates: + 'datasourceId' in payload && payload.datasourceId + ? { + ...state.datasourceStates, + [payload.datasourceId]: { + ...state.datasourceStates[payload.datasourceId], + state: payload.datasourceState, + }, + } + : state.datasourceStates, + visualization: { + ...state.visualization, + activeId: payload.newVisualizationId, + state: payload.initialState, + }, + stagedPreview: state.stagedPreview || { + datasourceStates: state.datasourceStates, + visualization: state.visualization, + }, + }; + }, + rollbackSuggestion: (state) => { + return { + ...state, + ...(state.stagedPreview || {}), + stagedPreview: undefined, + }; + }, + setToggleFullscreen: (state) => { + return { ...state, isFullscreenDatasource: !state.isFullscreenDatasource }; + }, + submitSuggestion: (state) => { + return { + ...state, + stagedPreview: undefined, + }; + }, + switchDatasource: ( + state, + { + payload, + }: { + payload: { + newDatasourceId: string; + }; + } + ) => { + return { + ...state, + datasourceStates: { + ...state.datasourceStates, + [payload.newDatasourceId]: state.datasourceStates[payload.newDatasourceId] || { + state: null, + isLoading: true, + }, + }, + activeDatasourceId: payload.newDatasourceId, + }; + }, + navigateAway: (state) => state, + }, +}); + +export const reducer = { + lens: lensSlice.reducer, +}; diff --git a/x-pack/plugins/lens/public/state_management/optimizing_middleware.ts b/x-pack/plugins/lens/public/state_management/optimizing_middleware.ts new file mode 100644 index 0000000000000..63e59221a683a --- /dev/null +++ b/x-pack/plugins/lens/public/state_management/optimizing_middleware.ts @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { Dispatch, MiddlewareAPI, PayloadAction } from '@reduxjs/toolkit'; +import { isEqual } from 'lodash'; +import { LensAppState } from './types'; + +/** cancels updates to the store that don't change the state */ +export const optimizingMiddleware = () => (store: MiddlewareAPI) => { + return (next: Dispatch) => (action: PayloadAction<Partial<LensAppState>>) => { + if (action.type === 'lens/onActiveDataChange') { + if (isEqual(store.getState().lens.activeData, action.payload)) { + return; + } + } + next(action); + }; +}; diff --git a/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts b/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts index 4145f8ed5e52c..a3a53a6d380ed 100644 --- a/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts +++ b/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts @@ -17,10 +17,9 @@ import { timeRangeMiddleware } from './time_range_middleware'; import { Observable, Subject } from 'rxjs'; import { DataPublicPluginStart, esFilters } from '../../../../../src/plugins/data/public'; import moment from 'moment'; -import { initialState } from './app_slice'; +import { initialState } from './lens_slice'; import { LensAppState } from './types'; import { PayloadAction } from '@reduxjs/toolkit'; -import { Document } from '../persistence'; const sessionIdSubject = new Subject<string>(); @@ -132,7 +131,7 @@ function makeDefaultData(): jest.Mocked<DataPublicPluginStart> { const createMiddleware = (data: DataPublicPluginStart) => { const middleware = timeRangeMiddleware(data); const store = { - getState: jest.fn(() => ({ app: initialState })), + getState: jest.fn(() => ({ lens: initialState })), dispatch: jest.fn(), }; const next = jest.fn(); @@ -157,8 +156,13 @@ describe('timeRangeMiddleware', () => { }); const { next, invoke, store } = createMiddleware(data); const action = { - type: 'app/setState', - payload: { lastKnownDoc: ('new' as unknown) as Document }, + type: 'lens/setState', + payload: { + visualization: { + state: {}, + activeId: 'id2', + }, + }, }; invoke(action); expect(store.dispatch).toHaveBeenCalledWith({ @@ -169,7 +173,7 @@ describe('timeRangeMiddleware', () => { }, searchSessionId: 'sessionId-1', }, - type: 'app/setState', + type: 'lens/setState', }); expect(next).toHaveBeenCalledWith(action); }); @@ -187,8 +191,39 @@ describe('timeRangeMiddleware', () => { }); const { next, invoke, store } = createMiddleware(data); const action = { - type: 'app/setState', - payload: { lastKnownDoc: ('new' as unknown) as Document }, + type: 'lens/setState', + payload: { + visualization: { + state: {}, + activeId: 'id2', + }, + }, + }; + invoke(action); + expect(store.dispatch).not.toHaveBeenCalled(); + expect(next).toHaveBeenCalledWith(action); + }); + it('does not trigger another update when the update already contains searchSessionId', () => { + const data = makeDefaultData(); + (data.nowProvider.get as jest.Mock).mockReturnValue(new Date(Date.now() - 30000)); + (data.query.timefilter.timefilter.getTime as jest.Mock).mockReturnValue({ + from: 'now-2m', + to: 'now', + }); + (data.query.timefilter.timefilter.getBounds as jest.Mock).mockReturnValue({ + min: moment(Date.now() - 100000), + max: moment(Date.now() - 30000), + }); + const { next, invoke, store } = createMiddleware(data); + const action = { + type: 'lens/setState', + payload: { + visualization: { + state: {}, + activeId: 'id2', + }, + searchSessionId: 'searchSessionId', + }, }; invoke(action); expect(store.dispatch).not.toHaveBeenCalled(); diff --git a/x-pack/plugins/lens/public/state_management/time_range_middleware.ts b/x-pack/plugins/lens/public/state_management/time_range_middleware.ts index a6c868be60565..cc3e46b71fbfc 100644 --- a/x-pack/plugins/lens/public/state_management/time_range_middleware.ts +++ b/x-pack/plugins/lens/public/state_management/time_range_middleware.ts @@ -5,27 +5,26 @@ * 2.0. */ -import { isEqual } from 'lodash'; import { Dispatch, MiddlewareAPI, PayloadAction } from '@reduxjs/toolkit'; import moment from 'moment'; - import { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; import { setState, LensDispatch } from '.'; import { LensAppState } from './types'; import { getResolvedDateRange, containsDynamicMath, TIME_LAG_PERCENTAGE_LIMIT } from '../utils'; +/** + * checks if TIME_LAG_PERCENTAGE_LIMIT passed to renew searchSessionId + * and request new data. + */ export const timeRangeMiddleware = (data: DataPublicPluginStart) => (store: MiddlewareAPI) => { return (next: Dispatch) => (action: PayloadAction<Partial<LensAppState>>) => { - // if document was modified or sessionId check if too much time passed to update searchSessionId - if ( - action.payload?.lastKnownDoc && - !isEqual(action.payload?.lastKnownDoc, store.getState().app.lastKnownDoc) - ) { + if (!action.payload?.searchSessionId) { updateTimeRange(data, store.dispatch); } next(action); }; }; + function updateTimeRange(data: DataPublicPluginStart, dispatch: LensDispatch) { const timefilter = data.query.timefilter.timefilter; const unresolvedTimeRange = timefilter.getTime(); diff --git a/x-pack/plugins/lens/public/state_management/types.ts b/x-pack/plugins/lens/public/state_management/types.ts index 87045d15cc994..1c696a3d79f9d 100644 --- a/x-pack/plugins/lens/public/state_management/types.ts +++ b/x-pack/plugins/lens/public/state_management/types.ts @@ -5,24 +5,33 @@ * 2.0. */ -import { Filter, IndexPattern, Query, SavedQuery } from '../../../../../src/plugins/data/public'; +import { Filter, Query, SavedQuery } from '../../../../../src/plugins/data/public'; import { Document } from '../persistence'; import { TableInspectorAdapter } from '../editor_frame_service/types'; import { DateRange } from '../../common'; -export interface LensAppState { +export interface PreviewState { + visualization: { + activeId: string | null; + state: unknown; + }; + datasourceStates: Record<string, { state: unknown; isLoading: boolean }>; +} +export interface EditorFrameState extends PreviewState { + activeDatasourceId: string | null; + stagedPreview?: PreviewState; + isFullscreenDatasource?: boolean; +} +export interface LensAppState extends EditorFrameState { persistedDoc?: Document; - lastKnownDoc?: Document; - // index patterns used to determine which filters are available in the top nav. - indexPatternsForTopNav: IndexPattern[]; // Determines whether the lens editor shows the 'save and return' button, and the originating app breadcrumb. isLinkedToOriginatingApp?: boolean; isSaveable: boolean; activeData?: TableInspectorAdapter; - isAppLoading: boolean; + isLoading: boolean; query: Query; filters: Filter[]; savedQuery?: SavedQuery; @@ -38,5 +47,5 @@ export type DispatchSetState = ( }; export interface LensState { - app: LensAppState; + lens: LensAppState; } diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 7baba15f0fac6..cb47dcf6ec388 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -7,7 +7,7 @@ import { IconType } from '@elastic/eui/src/components/icon/icon'; import { CoreSetup } from 'kibana/public'; -import { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public'; +import { PaletteOutput } from 'src/plugins/charts/public'; import { SavedObjectReference } from 'kibana/public'; import { MutableRefObject } from 'react'; import { RowClickContext } from '../../../../src/plugins/ui_actions/public'; @@ -45,13 +45,13 @@ export interface PublicAPIProps<T> { } export interface EditorFrameProps { - onError: ErrorCallback; - initialContext?: VisualizeFieldContext; showNoDataPopover: () => void; } export interface EditorFrameInstance { EditorFrameContainer: (props: EditorFrameProps) => React.ReactElement; + datasourceMap: Record<string, Datasource>; + visualizationMap: Record<string, Visualization>; } export interface EditorFrameSetup { @@ -525,20 +525,10 @@ export interface FramePublicAPI { * If accessing, make sure to check whether expected columns actually exist. */ activeData?: Record<string, Datatable>; - dateRange: DateRange; query: Query; filters: Filter[]; searchSessionId: string; - - /** - * A map of all available palettes (keys being the ids). - */ - availablePalettes: PaletteRegistry; - - // Adds a new layer. This has a side effect of updating the datasource state - addNewLayer: () => string; - removeLayers: (layerIds: string[]) => void; } /** @@ -586,7 +576,7 @@ export interface Visualization<T = unknown> { * - Loadingn from a saved visualization * - When using suggestions, the suggested state is passed in */ - initialize: (frame: FramePublicAPI, state?: T, mainPalette?: PaletteOutput) => T; + initialize: (addNewLayer: () => string, state?: T, mainPalette?: PaletteOutput) => T; getMainPalette?: (state: T) => undefined | PaletteOutput; diff --git a/x-pack/plugins/lens/public/utils.ts b/x-pack/plugins/lens/public/utils.ts index 1c4b2c67f96fc..a79480d7d9953 100644 --- a/x-pack/plugins/lens/public/utils.ts +++ b/x-pack/plugins/lens/public/utils.ts @@ -9,6 +9,12 @@ import { i18n } from '@kbn/i18n'; import { IndexPattern, IndexPatternsContract, TimefilterContract } from 'src/plugins/data/public'; import { IUiSettingsClient } from 'kibana/public'; import moment from 'moment-timezone'; +import { SavedObjectReference } from 'kibana/public'; +import { Filter, Query } from 'src/plugins/data/public'; +import { uniq } from 'lodash'; +import { Document } from './persistence/saved_object_store'; +import { Datasource } from './types'; +import { extractFilterReferences } from './persistence'; export function getVisualizeGeoFieldMessage(fieldType: string) { return i18n.translate('xpack.lens.visualizeGeoFieldMessage', { @@ -32,7 +38,105 @@ export function containsDynamicMath(dateMathString: string) { export const TIME_LAG_PERCENTAGE_LIMIT = 0.02; -export async function getAllIndexPatterns( +export function getTimeZone(uiSettings: IUiSettingsClient) { + const configuredTimeZone = uiSettings.get('dateFormat:tz'); + if (configuredTimeZone === 'Browser') { + return moment.tz.guess(); + } + + return configuredTimeZone; +} +export function getActiveDatasourceIdFromDoc(doc?: Document) { + if (!doc) { + return null; + } + + const [firstDatasourceFromDoc] = Object.keys(doc.state.datasourceStates); + return firstDatasourceFromDoc || null; +} + +export const getInitialDatasourceId = ( + datasourceMap: Record<string, Datasource>, + doc?: Document +) => { + return (doc && getActiveDatasourceIdFromDoc(doc)) || Object.keys(datasourceMap)[0] || null; +}; + +export interface GetIndexPatternsObjects { + activeDatasources: Record<string, Datasource>; + datasourceStates: Record<string, { state: unknown; isLoading: boolean }>; + visualization: { + activeId: string | null; + state: unknown; + }; + filters: Filter[]; + query: Query; + title: string; + description?: string; + persistedId?: string; +} + +export function getSavedObjectFormat({ + activeDatasources, + datasourceStates, + visualization, + filters, + query, + title, + description, + persistedId, +}: GetIndexPatternsObjects): Document { + const persistibleDatasourceStates: Record<string, unknown> = {}; + const references: SavedObjectReference[] = []; + Object.entries(activeDatasources).forEach(([id, datasource]) => { + const { state: persistableState, savedObjectReferences } = datasource.getPersistableState( + datasourceStates[id].state + ); + persistibleDatasourceStates[id] = persistableState; + references.push(...savedObjectReferences); + }); + + const { persistableFilters, references: filterReferences } = extractFilterReferences(filters); + + references.push(...filterReferences); + + return { + savedObjectId: persistedId, + title, + description, + type: 'lens', + visualizationType: visualization.activeId, + state: { + datasourceStates: persistibleDatasourceStates, + visualization: visualization.state, + query, + filters: persistableFilters, + }, + references, + }; +} + +export function getIndexPatternsIds({ + activeDatasources, + datasourceStates, +}: { + activeDatasources: Record<string, Datasource>; + datasourceStates: Record<string, { state: unknown; isLoading: boolean }>; +}): string[] { + const references: SavedObjectReference[] = []; + Object.entries(activeDatasources).forEach(([id, datasource]) => { + const { savedObjectReferences } = datasource.getPersistableState(datasourceStates[id].state); + references.push(...savedObjectReferences); + }); + + const uniqueFilterableIndexPatternIds = uniq( + references.filter(({ type }) => type === 'index-pattern').map(({ id }) => id) + ); + + return uniqueFilterableIndexPatternIds; +} + +export async function getIndexPatternsObjects( ids: string[], indexPatternsService: IndexPatternsContract ): Promise<{ indexPatterns: IndexPattern[]; rejectedIds: string[] }> { @@ -46,12 +150,3 @@ export async function getAllIndexPatterns( // return also the rejected ids in case we want to show something later on return { indexPatterns: fullfilled.map((response) => response.value), rejectedIds }; } - -export function getTimeZone(uiSettings: IUiSettingsClient) { - const configuredTimeZone = uiSettings.get('dateFormat:tz'); - if (configuredTimeZone === 'Browser') { - return moment.tz.guess(); - } - - return configuredTimeZone; -} diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts index b88d38e18329c..a7270bdf8f331 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts @@ -10,7 +10,7 @@ import { Position } from '@elastic/charts'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; import { getXyVisualization } from './xy_visualization'; import { Operation } from '../types'; -import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks'; +import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; describe('#toExpression', () => { diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx index b46ad1940491e..ec0c11a0b1d86 100644 --- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { shallowWithIntl as shallow } from '@kbn/test/jest'; import { Position } from '@elastic/charts'; import { FramePublicAPI } from '../../types'; -import { createMockDatasource, createMockFramePublicAPI } from '../../editor_frame_service/mocks'; +import { createMockDatasource, createMockFramePublicAPI } from '../../mocks'; import { State } from '../types'; import { VisualOptionsPopover } from './visual_options_popover'; import { ToolbarPopover } from '../../shared_components'; diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts index dee0e5763dee4..304e323789c14 100644 --- a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts @@ -9,7 +9,7 @@ import { getXyVisualization } from './visualization'; import { Position } from '@elastic/charts'; import { Operation } from '../types'; import { State, SeriesType, XYLayerConfig } from './types'; -import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks'; +import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { LensIconChartBar } from '../assets/chart_bar'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; @@ -132,8 +132,7 @@ describe('xy_visualization', () => { describe('#initialize', () => { it('loads default state', () => { - const mockFrame = createMockFramePublicAPI(); - const initialState = xyVisualization.initialize(mockFrame); + const initialState = xyVisualization.initialize(() => 'l1'); expect(initialState.layers).toHaveLength(1); expect(initialState.layers[0].xAccessor).not.toBeDefined(); @@ -144,7 +143,7 @@ describe('xy_visualization', () => { "layers": Array [ Object { "accessors": Array [], - "layerId": "", + "layerId": "l1", "position": "top", "seriesType": "bar_stacked", "showGridlines": false, @@ -162,9 +161,7 @@ describe('xy_visualization', () => { }); it('loads from persisted state', () => { - expect(xyVisualization.initialize(createMockFramePublicAPI(), exampleState())).toEqual( - exampleState() - ); + expect(xyVisualization.initialize(() => 'first', exampleState())).toEqual(exampleState()); }); }); diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx index bd20ed300bf61..199dccdf702f7 100644 --- a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx @@ -152,7 +152,7 @@ export const getXyVisualization = ({ getSuggestions, - initialize(frame, state) { + initialize(addNewLayer, state) { return ( state || { title: 'Empty XY chart', @@ -161,7 +161,7 @@ export const getXyVisualization = ({ preferredSeriesType: defaultSeriesType, layers: [ { - layerId: frame.addNewLayer(), + layerId: addNewLayer(), accessors: [], position: Position.Top, seriesType: defaultSeriesType, diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx index bc10236cf1977..9292a8d87bbc4 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx @@ -13,7 +13,7 @@ import { AxisSettingsPopover } from './axis_settings_popover'; import { FramePublicAPI } from '../types'; import { State } from './types'; import { Position } from '@elastic/charts'; -import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks'; +import { createMockFramePublicAPI, createMockDatasource } from '../mocks'; import { chartPluginMock } from 'src/plugins/charts/public/mocks'; import { EuiColorPicker } from '@elastic/eui'; diff --git a/x-pack/plugins/maps/public/actions/map_actions.test.js b/x-pack/plugins/maps/public/actions/map_actions.test.js index fa69dad616747..763ce459dcc25 100644 --- a/x-pack/plugins/maps/public/actions/map_actions.test.js +++ b/x-pack/plugins/maps/public/actions/map_actions.test.js @@ -77,8 +77,8 @@ describe('map_actions', () => { minLon: 95, }, buffer: { - maxLat: 21.94305, - maxLon: 112.5, + maxLat: 11.1784, + maxLon: 101.25, minLat: 0, minLon: 90, }, @@ -158,10 +158,10 @@ describe('map_actions', () => { minLon: 85, }, buffer: { - maxLat: 7.71099, - maxLon: 92.8125, - minLat: -2.81137, - minLon: 82.26563, + maxLat: 5.26601, + maxLon: 90.35156, + minLat: -0.35156, + minLon: 84.72656, }, }, type: 'MAP_EXTENT_CHANGED', @@ -190,10 +190,10 @@ describe('map_actions', () => { minLon: 96, }, buffer: { - maxLat: 13.58192, - maxLon: 103.53516, - minLat: 3.33795, - minLon: 93.33984, + maxLat: 11.0059, + maxLon: 101.07422, + minLat: 5.96575, + minLon: 95.97656, }, }, type: 'MAP_EXTENT_CHANGED', diff --git a/x-pack/plugins/maps/public/actions/map_actions.ts b/x-pack/plugins/maps/public/actions/map_actions.ts index a1c7e2f7b453c..af8d6cc6bedc3 100644 --- a/x-pack/plugins/maps/public/actions/map_actions.ts +++ b/x-pack/plugins/maps/public/actions/map_actions.ts @@ -60,7 +60,6 @@ import { Timeslice, } from '../../common/descriptor_types'; import { INITIAL_LOCATION } from '../../common/constants'; -import { scaleBounds } from '../../common/elasticsearch_util'; import { cleanTooltipStateForLayer } from './tooltip_actions'; import { VectorLayer } from '../classes/layers/vector_layer'; import { SET_DRAW_MODE } from './ui_actions'; @@ -167,9 +166,8 @@ export function mapExtentChanged(mapExtentState: MapExtentState) { } if (!doesBufferContainExtent || currentZoom !== newZoom) { - const expandedExtent = scaleBounds(extent, 0.5); // snap to the smallest tile-bounds, to avoid jitter in the bounds - dataFilters.buffer = expandToTileBoundaries(expandedExtent, Math.ceil(newZoom)); + dataFilters.buffer = expandToTileBoundaries(extent, Math.ceil(newZoom)); } } 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 3b3b1af30610d..f9df1b452f475 100644 --- a/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx +++ b/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx @@ -20,7 +20,6 @@ import { EuiText, EuiTitle, } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { isFullLicense } from '../license'; @@ -122,18 +121,6 @@ export const DatavisualizerSelector: FC = () => { values={{ maxFileSize }} /> } - betaBadgeLabel={i18n.translate( - 'xpack.ml.datavisualizer.selector.experimentalBadgeLabel', - { - defaultMessage: 'Experimental', - } - )} - betaBadgeTooltipContent={ - <FormattedMessage - id="xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel" - defaultMessage="Experimental feature. We'd love to hear your feedback." - /> - } footer={ <EuiButton target="_self" diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx index a78a832fdb6e9..9a4d6036428f8 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx @@ -102,7 +102,7 @@ export const JobMessagesPane: FC<JobMessagesPaneProps> = React.memo( return ( <> - <EuiSpacer /> + {canCreateJob && showClearButton ? <EuiSpacer /> : null} <EuiFlexGroup direction="column"> {canCreateJob && showClearButton ? ( <EuiFlexItem grow={false}> diff --git a/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js b/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js index 318c103b39636..137df3a6f3151 100644 --- a/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js +++ b/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js @@ -39,7 +39,7 @@ const anomalyDetectorTypeFilter = { }, }; -export function jobAuditMessagesProvider({ asInternalUser, asCurrentUser }, mlClient) { +export function jobAuditMessagesProvider({ asInternalUser }, mlClient) { // search for audit messages, // jobId is optional. without it, all jobs will be listed. // from is optional and should be a string formatted in ES time units. e.g. 12h, 1d, 7d @@ -310,10 +310,10 @@ export function jobAuditMessagesProvider({ asInternalUser, asCurrentUser }, mlCl }; await Promise.all([ - asCurrentUser.updateByQuery({ + asInternalUser.updateByQuery({ index: ML_NOTIFICATION_INDEX_02, ignore_unavailable: true, - refresh: true, + refresh: false, conflicts: 'proceed', body: { query, @@ -323,7 +323,7 @@ export function jobAuditMessagesProvider({ asInternalUser, asCurrentUser }, mlCl }, }, }), - asCurrentUser.index({ + asInternalUser.index({ index: ML_NOTIFICATION_INDEX_02, body: newClearedMessage, refresh: 'wait_for', diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx index dbe9cd163451d..ded56ec9e817f 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx @@ -99,7 +99,6 @@ export function ExploratoryViewHeader({ seriesId, lensAttributes }: Props) { {isSaveOpen && lensAttributes && ( <LensSaveModalComponent - isVisible={isSaveOpen} initialInput={(lensAttributes as unknown) as LensEmbeddableInput} onClose={() => setIsSaveOpen(false)} onSave={() => {}} diff --git a/x-pack/plugins/osquery/public/plugin.ts b/x-pack/plugins/osquery/public/plugin.ts index d1e7154fb0dc0..abdea2df3b2b5 100644 --- a/x-pack/plugins/osquery/public/plugin.ts +++ b/x-pack/plugins/osquery/public/plugin.ts @@ -58,7 +58,7 @@ export function toggleOsqueryPlugin( registerExtension({ package: OSQUERY_INTEGRATION_NAME, view: 'package-detail-custom', - component: LazyOsqueryManagedCustomButtonExtension, + Component: LazyOsqueryManagedCustomButtonExtension, }); } @@ -146,13 +146,13 @@ export class OsqueryPlugin implements Plugin<OsqueryPluginSetup, OsqueryPluginSt registerExtension({ package: OSQUERY_INTEGRATION_NAME, view: 'package-policy-create', - component: LazyOsqueryManagedPolicyCreateImportExtension, + Component: LazyOsqueryManagedPolicyCreateImportExtension, }); registerExtension({ package: OSQUERY_INTEGRATION_NAME, view: 'package-policy-edit', - component: LazyOsqueryManagedPolicyEditExtension, + Component: LazyOsqueryManagedPolicyEditExtension, }); } } else { diff --git a/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts index 77a1775494e6a..c3e04aaaf6a1f 100644 --- a/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts +++ b/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts @@ -78,10 +78,22 @@ describe('Row renderers', () => { }); it('Selected renderer can be disabled with one click', () => { + // Ensure these elements are visible before continuing since sometimes it takes a second for the modal to show up + // and it gives the click handlers a bit of time to be initialized as well to reduce chances of flake but you still + // have to use pipe() below as an additional measure. cy.get(TIMELINE_ROW_RENDERERS_DISABLE_ALL_BTN).should('exist'); - cy.get(TIMELINE_ROW_RENDERERS_DISABLE_ALL_BTN) - .pipe(($el) => $el.trigger('click')) - .should('not.be.visible'); + cy.get(TIMELINE_ROW_RENDERERS_MODAL_ITEMS_CHECKBOX).should('be.checked'); + + // Keep clicking on the disable all button until the first element of all the elements are no longer checked. + // In cases where the click handler is not present on the page just yet, this will cause the button to be clicked + // multiple times until it sees that the click took effect. You could go through the whole list but I just check + // for the first to be unchecked and then assume the click was successful + cy.root() + .pipe(($el) => { + $el.find(TIMELINE_ROW_RENDERERS_DISABLE_ALL_BTN).trigger('click'); + return $el.find(TIMELINE_ROW_RENDERERS_MODAL_ITEMS_CHECKBOX).first(); + }) + .should('not.be.checked'); cy.intercept('PATCH', '/api/timeline').as('updateTimeline'); cy.wait('@updateTimeline').its('response.statusCode').should('eq', 200); diff --git a/x-pack/plugins/security_solution/public/app/deep_links/index.ts b/x-pack/plugins/security_solution/public/app/deep_links/index.ts index cbaa789d47489..affed45908fdd 100644 --- a/x-pack/plugins/security_solution/public/app/deep_links/index.ts +++ b/x-pack/plugins/security_solution/public/app/deep_links/index.ts @@ -165,7 +165,7 @@ const nestedDeepLinks: SecurityDeepLinks = { navLinkStatus: AppNavLinkStatus.hidden, keywords: [ i18n.translate('xpack.securitySolution.search.exceptions', { - defaultMessage: 'Exceptions', + defaultMessage: 'Exception list', }), ], searchable: true, @@ -299,14 +299,14 @@ const nestedDeepLinks: SecurityDeepLinks = { { id: SecurityPageName.trustedApps, title: i18n.translate('xpack.securitySolution.search.administration.trustedApps', { - defaultMessage: 'Trusted Applications', + defaultMessage: 'Trusted applications', }), path: TRUSTED_APPS_PATH, }, { id: SecurityPageName.eventFilters, title: i18n.translate('xpack.securitySolution.search.administration.eventFilters', { - defaultMessage: 'Event Filters', + defaultMessage: 'Event filters', }), path: EVENT_FILTERS_PATH, }, diff --git a/x-pack/plugins/security_solution/public/app/translations.ts b/x-pack/plugins/security_solution/public/app/translations.ts index edbab928a5c69..847a9114d94bd 100644 --- a/x-pack/plugins/security_solution/public/app/translations.ts +++ b/x-pack/plugins/security_solution/public/app/translations.ts @@ -24,7 +24,7 @@ export const RULES = i18n.translate('xpack.securitySolution.navigation.rules', { }); export const EXCEPTIONS = i18n.translate('xpack.securitySolution.navigation.exceptions', { - defaultMessage: 'Exceptions', + defaultMessage: 'Exception list', }); export const ALERTS = i18n.translate('xpack.securitySolution.navigation.alerts', { @@ -48,13 +48,13 @@ export const ENDPOINTS = i18n.translate('xpack.securitySolution.search.administr export const TRUSTED_APPLICATIONS = i18n.translate( 'xpack.securitySolution.search.administration.trustedApps', { - defaultMessage: 'Trusted Applications', + defaultMessage: 'Trusted applications', } ); export const EVENT_FILTERS = i18n.translate( 'xpack.securitySolution.search.administration.eventFilters', { - defaultMessage: 'Event Filters', + defaultMessage: 'Event filters', } ); diff --git a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx index 9722447b96ad5..3e0aa17a3830e 100644 --- a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx @@ -5,6 +5,9 @@ * 2.0. */ +import React from 'react'; +import { mount } from 'enzyme'; +import 'jest-styled-components'; import { createUpdateSuccessToaster } from './helpers'; import { Case } from '../../../../../cases/common'; @@ -23,12 +26,30 @@ describe('helpers', () => { it('creates the correct toast when the sync alerts is on', () => { // We remove the id as is randomly generated and the text as it is a React component // which is being test on toaster_content.test.tsx - const { id, text, ...toast } = createUpdateSuccessToaster(theCase, onViewCaseClick); + const { id, text, title, ...toast } = createUpdateSuccessToaster(theCase, onViewCaseClick); + const mountedTitle = mount(<>{title}</>); + expect(toast).toEqual({ color: 'success', iconType: 'check', - title: 'An alert has been added to "My case"', }); + expect(mountedTitle).toMatchInlineSnapshot(` + .c0 { + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } + + <styled.span> + <span + className="c0" + > + An alert has been added to "My case" + </span> + </styled.span> + `); }); }); }); diff --git a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx index 8682b6680830d..93e1f0499893e 100644 --- a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx @@ -7,11 +7,22 @@ import React from 'react'; import uuid from 'uuid'; +import styled from 'styled-components'; import { AppToast } from '../../../common/components/toasters'; import { ToasterContent } from './toaster_content'; import * as i18n from './translations'; import { Case } from '../../../../../cases/common'; +const LINE_CLAMP = 3; + +const Title = styled.span` + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: ${LINE_CLAMP}; + -webkit-box-orient: vertical; + overflow: hidden; +`; + export const createUpdateSuccessToaster = ( theCase: Case, onViewCaseClick: (id: string) => void @@ -20,7 +31,7 @@ export const createUpdateSuccessToaster = ( id: uuid.v4(), color: 'success', iconType: 'check', - title: i18n.CASE_CREATED_SUCCESS_TOAST(theCase.title), + title: <Title>{i18n.CASE_CREATED_SUCCESS_TOAST(theCase.title)}, text: ( = ({ setSelectedTabId, ]); - const eventFields = useMemo(() => getEnrichmentFields(data ?? []), [data]); + const eventFields = useMemo(() => getEnrichmentFields(data), [data]); const existingEnrichments = useMemo( () => isAlert @@ -242,7 +242,7 @@ const EventDetailsComponent: React.FC = ({ ); }, [summaryTab, threatIntelTab, tableTab, jsonTab]); - const selectedTab = useMemo(() => tabs.find((tab) => tab.id === selectedTabId), [ + const selectedTab = useMemo(() => tabs.find((tab) => tab.id === selectedTabId) ?? tabs[0], [ tabs, selectedTabId, ]); diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts index 6789d8e1d4524..1f7e668b21b98 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts @@ -13,6 +13,7 @@ import { RouteSpyState, SiemRouteType } from '../../../utils/route/types'; import { TabNavigationProps } from '../tab_navigation/types'; import { NetworkRouteType } from '../../../../network/pages/navigation/types'; import { TimelineTabs } from '../../../../../common/types/timeline'; +import { AdministrationSubTab } from '../../../../management/types'; const setBreadcrumbsMock = jest.fn(); const chromeMock = { @@ -26,6 +27,8 @@ const mockDefaultTab = (pageName: string): SiemRouteType | undefined => { return HostsTableType.authentications; case 'network': return NetworkRouteType.flows; + case 'administration': + return AdministrationSubTab.endpoints; default: return undefined; } @@ -423,16 +426,16 @@ describe('Navigation Breadcrumbs', () => { }, ]); }); - test('should return Admin breadcrumbs when supplied admin pathname', () => { + test('should return Admin breadcrumbs when supplied endpoints pathname', () => { const breadcrumbs = getBreadcrumbsForRoute( - getMockObject('administration', '/', undefined), + getMockObject('administration', '/endpoints', undefined), getUrlForAppMock ); expect(breadcrumbs).toEqual([ { text: 'Security', href: 'securitySolution/overview' }, { - text: 'Administration', - href: 'securitySolution/endpoints', + text: 'Endpoints', + href: '', }, ]); }); diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts index 4578e16dc5540..03ee38473e58d 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts +++ b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts @@ -186,18 +186,7 @@ export const getBreadcrumbsForRoute = ( if (spyState.tabName != null) { urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)]; } - - return [ - siemRootBreadcrumb, - ...getAdminBreadcrumbs( - spyState, - urlStateKeys.reduce( - (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)], - [] - ), - getUrlForApp - ), - ]; + return [siemRootBreadcrumb, ...getAdminBreadcrumbs(spyState)]; } if ( diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/index.test.tsx index 7e211a2e95152..47ffb20c21d5a 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/index.test.tsx @@ -139,7 +139,7 @@ describe('useSecuritySolutionNavigation', () => { "href": "securitySolution/exceptions?query=(language:kuery,query:'host.name:%22security-solution-es%22')&sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)))", "id": "exceptions", "isSelected": false, - "name": "Exceptions", + "name": "Exception list", "onClick": [Function], }, ], @@ -207,7 +207,7 @@ describe('useSecuritySolutionNavigation', () => { "href": "securitySolution/trusted_apps", "id": "trusted_apps", "isSelected": false, - "name": "Trusted Applications", + "name": "Trusted applications", "onClick": [Function], }, Object { @@ -217,7 +217,7 @@ describe('useSecuritySolutionNavigation', () => { "href": "securitySolution/event_filters", "id": "event_filters", "isSelected": false, - "name": "Event Filters", + "name": "Event filters", "onClick": [Function], }, ], diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts index 316f8b6214d1e..ffbfd1a5123ad 100644 --- a/x-pack/plugins/security_solution/public/common/mock/global_state.ts +++ b/x-pack/plugins/security_solution/public/common/mock/global_state.ts @@ -59,7 +59,7 @@ export const mockGlobalState: State = { events: { activePage: 0, limit: 10 }, uncommonProcesses: { activePage: 0, limit: 10 }, anomalies: null, - alerts: { activePage: 0, limit: 10 }, + externalAlerts: { activePage: 0, limit: 10 }, }, }, details: { @@ -74,7 +74,7 @@ export const mockGlobalState: State = { events: { activePage: 0, limit: 10 }, uncommonProcesses: { activePage: 0, limit: 10 }, anomalies: null, - alerts: { activePage: 0, limit: 10 }, + externalAlerts: { activePage: 0, limit: 10 }, }, }, }, diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx index 3b76ec8a0d13f..5be29a94b5330 100644 --- a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx +++ b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx @@ -18,6 +18,7 @@ import { hostDetailsPagePath } from '../types'; import { type } from './utils'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; import { getHostDetailsPageFilters } from './helpers'; +import { HostsTableType } from '../../store/model'; jest.mock('../../../common/lib/kibana'); @@ -51,12 +52,12 @@ mockUseResizeObserver.mockImplementation(() => ({})); describe('body', () => { const scenariosMap = { - authentications: 'AuthenticationsQueryTabBody', - allHosts: 'HostsQueryTabBody', - uncommonProcesses: 'UncommonProcessQueryTabBody', - anomalies: 'AnomaliesQueryTabBody', - events: 'EventsQueryTabBody', - alerts: 'HostAlertsQueryTabBody', + [HostsTableType.authentications]: 'AuthenticationsQueryTabBody', + [HostsTableType.hosts]: 'HostsQueryTabBody', + [HostsTableType.uncommonProcesses]: 'UncommonProcessQueryTabBody', + [HostsTableType.anomalies]: 'AnomaliesQueryTabBody', + [HostsTableType.events]: 'EventsQueryTabBody', + [HostsTableType.alerts]: 'HostAlertsQueryTabBody', }; const mockHostDetailsPageFilters = getHostDetailsPageFilters('host-1'); diff --git a/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts b/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts index c9dcc3a60b4a9..8c3a3e27ffb38 100644 --- a/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts +++ b/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts @@ -71,26 +71,26 @@ describe('Hosts redux store', () => { describe('#setHostsQueriesActivePageToZero', () => { test('set activePage to zero for all queries in hosts page ', () => { expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.page)).toEqual({ - allHosts: { + [HostsTableType.hosts]: { activePage: 0, direction: 'desc', limit: 10, sortField: 'lastSeen', }, - anomalies: null, - authentications: { + [HostsTableType.anomalies]: null, + [HostsTableType.authentications]: { activePage: 0, limit: 10, }, - events: { + [HostsTableType.events]: { activePage: 0, limit: 10, }, - uncommonProcesses: { + [HostsTableType.uncommonProcesses]: { activePage: 0, limit: 10, }, - alerts: { + [HostsTableType.alerts]: { activePage: 0, limit: 10, }, @@ -99,26 +99,26 @@ describe('Hosts redux store', () => { test('set activePage to zero for all queries in host details ', () => { expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.details)).toEqual({ - allHosts: { + [HostsTableType.hosts]: { activePage: 0, direction: 'desc', limit: 10, sortField: 'lastSeen', }, - anomalies: null, - authentications: { + [HostsTableType.anomalies]: null, + [HostsTableType.authentications]: { activePage: 0, limit: 10, }, - events: { + [HostsTableType.events]: { activePage: 0, limit: 10, }, - uncommonProcesses: { + [HostsTableType.uncommonProcesses]: { activePage: 0, limit: 10, }, - alerts: { + [HostsTableType.alerts]: { activePage: 0, limit: 10, }, diff --git a/x-pack/plugins/security_solution/public/hosts/store/model.ts b/x-pack/plugins/security_solution/public/hosts/store/model.ts index 2060d46206723..ea168e965fa23 100644 --- a/x-pack/plugins/security_solution/public/hosts/store/model.ts +++ b/x-pack/plugins/security_solution/public/hosts/store/model.ts @@ -19,7 +19,7 @@ export enum HostsTableType { events = 'events', uncommonProcesses = 'uncommonProcesses', anomalies = 'anomalies', - alerts = 'alerts', + alerts = 'externalAlerts', } export interface BasicQueryPaginated { diff --git a/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts b/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts index d437c45792766..9c3d781f514e9 100644 --- a/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts +++ b/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts @@ -6,13 +6,9 @@ */ import { ChromeBreadcrumb } from 'kibana/public'; -import { isEmpty } from 'lodash/fp'; import { AdministrationSubTab } from '../types'; import { ENDPOINTS_TAB, EVENT_FILTERS_TAB, POLICIES_TAB, TRUSTED_APPS_TAB } from './translations'; import { AdministrationRouteSpyState } from '../../common/utils/route/types'; -import { GetUrlForApp } from '../../common/components/navigation/types'; -import { ADMINISTRATION } from '../../app/translations'; -import { APP_ID, SecurityPageName } from '../../../common/constants'; const TabNameMappedToI18nKey: Record = { [AdministrationSubTab.endpoints]: ENDPOINTS_TAB, @@ -21,19 +17,8 @@ const TabNameMappedToI18nKey: Record = { [AdministrationSubTab.eventFilters]: EVENT_FILTERS_TAB, }; -export function getBreadcrumbs( - params: AdministrationRouteSpyState, - search: string[], - getUrlForApp: GetUrlForApp -): ChromeBreadcrumb[] { +export function getBreadcrumbs(params: AdministrationRouteSpyState): ChromeBreadcrumb[] { return [ - { - text: ADMINISTRATION, - href: getUrlForApp(APP_ID, { - deepLinkId: SecurityPageName.endpoints, - path: !isEmpty(search[0]) ? search[0] : '', - }), - }, ...(params?.tabName ? [params?.tabName] : []).map((tabName) => ({ text: TabNameMappedToI18nKey[tabName], href: '', diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts index 1a431ea88ad6a..2f8ced9d2a771 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts @@ -36,8 +36,7 @@ import { getLastLoadedActivityLogData, detailsData, getEndpointDetailsFlyoutView, - getIsEndpointPackageInfoPending, - getIsEndpointPackageInfoSuccessful, + getIsEndpointPackageInfoUninitialized, } from './selectors'; import { AgentIdsPendingActions, EndpointState, PolicyIds } from '../types'; import { @@ -598,7 +597,7 @@ async function getEndpointPackageInfo( dispatch: Dispatch, coreStart: CoreStart ) { - if (getIsEndpointPackageInfoPending(state) || getIsEndpointPackageInfoSuccessful(state)) return; + if (!getIsEndpointPackageInfoUninitialized(state)) return; dispatch({ type: 'endpointPackageInfoStateChanged', diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts index c09e4032d6222..5771fbac957d8 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts @@ -33,6 +33,7 @@ import { isFailedResourceState, isLoadedResourceState, isLoadingResourceState, + isUninitialisedResourceState, } from '../../../state'; import { ServerApiError } from '../../../../common/types'; @@ -69,15 +70,10 @@ export const policyItemsLoading = (state: Immutable) => state.pol export const selectedPolicyId = (state: Immutable) => state.selectedPolicyId; export const endpointPackageInfo = (state: Immutable) => state.endpointPackageInfo; -export const getIsEndpointPackageInfoPending: ( +export const getIsEndpointPackageInfoUninitialized: ( state: Immutable ) => boolean = createSelector(endpointPackageInfo, (packageInfo) => - isLoadingResourceState(packageInfo) -); -export const getIsEndpointPackageInfoSuccessful: ( - state: Immutable -) => boolean = createSelector(endpointPackageInfo, (packageInfo) => - isLoadedResourceState(packageInfo) + isUninitialisedResourceState(packageInfo) ); export const isAutoRefreshEnabled = (state: Immutable) => state.isAutoRefreshEnabled; diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts b/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts index 166d3f3b98a85..62d51c3630db7 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts +++ b/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts @@ -658,4 +658,37 @@ export const AdvancedPolicySchema: AdvancedPolicySchemaType[] = [ } ), }, + { + key: 'windows.advanced.memory_protection.shellcode_enhanced_pe_parsing', + first_supported_version: '7.15', + documentation: i18n.translate( + 'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.memory_protection.shellcode_enhanced_pe_parsing', + { + defaultMessage: + "A value of 'false' disables enhanced parsing of PEs found within shellcode payloads. Default: true.", + } + ), + }, + { + key: 'windows.advanced.memory_protection.shellcode', + first_supported_version: '7.15', + documentation: i18n.translate( + 'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.memory_protection.shellcode', + { + defaultMessage: + "A value of 'false' disables Shellcode Injection Protection, a feature of Memory Protection. Default: true.", + } + ), + }, + { + key: 'windows.advanced.memory_protection.memory_scan', + first_supported_version: '7.15', + documentation: i18n.translate( + 'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.memory_protection.signature', + { + defaultMessage: + "A value of 'false' disables Memory Signature Scanning, a feature of Memory Protection. Default: true.", + } + ), + }, ]; diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_custom_assets_extension.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_custom_assets_extension.tsx new file mode 100644 index 0000000000000..781aa880d1483 --- /dev/null +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_custom_assets_extension.tsx @@ -0,0 +1,34 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 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 { useKibana } from '../../../../../common/lib/kibana'; +import { APP_PATH } from '../../../../../../common/constants'; +import { + CustomAssetsAccordionProps, + CustomAssetsAccordion, + PackageAssetsComponent, +} from '../../../../../../../fleet/public'; + +export const EndpointCustomAssetsExtension: PackageAssetsComponent = () => { + const { http } = useKibana().services; + const views: CustomAssetsAccordionProps['views'] = [ + { + name: i18n.translate('xpack.securitySolution.fleetIntegration.assets.name', { + defaultMessage: 'Hosts', + }), + url: http.basePath.prepend(`${APP_PATH}/administration/endpoints`), + description: i18n.translate('xpack.securitySolution.fleetIntegration.assets.description', { + defaultMessage: 'View endpoints in Security app', + }), + }, + ]; + + return ; +}; diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/lazy_endpoint_custom_assets_extension.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/lazy_endpoint_custom_assets_extension.tsx new file mode 100644 index 0000000000000..05187d64a12e7 --- /dev/null +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/lazy_endpoint_custom_assets_extension.tsx @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { lazy } from 'react'; + +export const LazyEndpointCustomAssetsExtension = lazy(async () => { + const { EndpointCustomAssetsExtension } = await import('./endpoint_custom_assets_extension'); + + return { + default: EndpointCustomAssetsExtension, + }; +}); diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx index 1bf3edf1605d8..137fef1641501 100644 --- a/x-pack/plugins/security_solution/public/plugin.tsx +++ b/x-pack/plugins/security_solution/public/plugin.tsx @@ -60,6 +60,7 @@ import { LazyEndpointPolicyCreateExtension } from './management/pages/policy/vie import { getLazyEndpointPackageCustomExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_package_custom_extension'; import { parseExperimentalConfigValue } from '../common/experimental_features'; import type { TimelineState } from '../../timelines/public'; +import { LazyEndpointCustomAssetsExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_custom_assets_extension'; export class Plugin implements IPlugin { private kibanaVersion: string; @@ -199,19 +200,25 @@ export class Plugin implements IPlugin - -
-
- - , - .c1 { + .c0 { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; margin-top: 8px; } -.c2 .euiFlyoutBody__overflow { +.c1 .euiFlyoutBody__overflow { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -493,7 +259,7 @@ Array [ overflow: hidden; } -.c2 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent { +.c1 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -501,12 +267,7 @@ Array [ padding: 4px 16px 50px; } -.c0 { - z-index: 7000; -} -
( = styled( - EuiFlyout -)` - z-index: ${({ theme }) => theme.eui.euiZLevel7}; -`; - interface DetailsPanelProps { browserFields: BrowserFields; docValueFields: DocValueFields[]; @@ -113,14 +104,14 @@ export const DetailsPanel = React.memo( } return isFlyoutView ? ( - {visiblePanel} - + ) : ( visiblePanel ); diff --git a/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts b/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts index f5163f4ca5ed8..aca73a4b77434 100644 --- a/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts +++ b/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts @@ -360,7 +360,7 @@ function getMockMonitoredHealth(overrides = {}): MonitoredHealth { non_recurring: 20, owner_ids: 2, estimated_schedule_density: [], - capacity_requirments: { + capacity_requirements: { per_minute: 150, per_hour: 360, per_day: 820, diff --git a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts index c68e307dbec03..bd8ecf0cc6d93 100644 --- a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts +++ b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts @@ -17,7 +17,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 60, per_hour: 0, per_day: 0, @@ -72,7 +72,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 60, per_hour: 0, per_day: 0, @@ -129,7 +129,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 60, per_hour: 0, per_day: 0, @@ -165,7 +165,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 0, per_hour: 12000, per_day: 200, @@ -221,7 +221,7 @@ describe('estimateCapacity', () => { // 0 active tasks at this moment in time, so no owners identifiable owner_ids: 0, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 60, per_hour: 0, per_day: 0, @@ -276,7 +276,7 @@ describe('estimateCapacity', () => { { owner_ids: 3, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 150, per_hour: 60, per_day: 0, @@ -337,7 +337,7 @@ describe('estimateCapacity', () => { { owner_ids: provisionedKibanaInstances, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 150, per_hour: 60, per_day: 0, @@ -417,7 +417,7 @@ describe('estimateCapacity', () => { { owner_ids: provisionedKibanaInstances, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: recurringTasksPerMinute, per_hour: 0, per_day: 0, @@ -498,7 +498,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 170, per_hour: 0, per_day: 0, @@ -562,7 +562,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 175, per_hour: 0, per_day: 0, @@ -623,7 +623,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 210, per_hour: 0, per_day: 0, @@ -684,7 +684,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 28, per_hour: 27, per_day: 2, @@ -759,7 +759,7 @@ describe('estimateCapacity', () => { { owner_ids: 1, overdue_non_recurring: 0, - capacity_requirments: { + capacity_requirements: { per_minute: 210, per_hour: 0, per_day: 0, @@ -871,7 +871,7 @@ function mockStats( estimated_schedule_density: [], non_recurring: 20, owner_ids: 2, - capacity_requirments: { + capacity_requirements: { per_minute: 150, per_hour: 360, per_day: 820, diff --git a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts index 073112f94e049..90f564152c8c7 100644 --- a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts +++ b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts @@ -58,7 +58,7 @@ export function estimateCapacity( recurring: percentageOfExecutionsUsedByRecurringTasks, non_recurring: percentageOfExecutionsUsedByNonRecurringTasks, } = capacityStats.runtime.value.execution.persistence; - const { overdue, capacity_requirments: capacityRequirments } = workload; + const { overdue, capacity_requirements: capacityRequirements } = workload; const { poll_interval: pollInterval, max_workers: maxWorkers, @@ -130,9 +130,9 @@ export function estimateCapacity( * On average, how many tasks per minute does this cluster need to execute? */ const averageRecurringRequiredPerMinute = - capacityRequirments.per_minute + - capacityRequirments.per_hour / 60 + - capacityRequirments.per_day / 24 / 60; + capacityRequirements.per_minute + + capacityRequirements.per_hour / 60 + + capacityRequirements.per_day / 24 / 60; /** * how many Kibana are needed solely for the recurring tasks diff --git a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts index 3fe003ebc6591..9125bca8f5b05 100644 --- a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts +++ b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts @@ -624,7 +624,7 @@ describe('Workload Statistics Aggregator', () => { expect(result.key).toEqual('workload'); expect(result.value).toMatchObject({ - capacity_requirments: { + capacity_requirements: { // these are buckets of required capacity, rather than aggregated requirmenets. per_minute: 150, per_hour: 360, diff --git a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts index 64c1c66140196..5c4e7d6cbe2cf 100644 --- a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts +++ b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts @@ -36,7 +36,7 @@ interface RawWorkloadStat extends JsonObject { overdue: number; overdue_non_recurring: number; estimated_schedule_density: number[]; - capacity_requirments: CapacityRequirments; + capacity_requirements: CapacityRequirements; } export interface WorkloadStat extends RawWorkloadStat { @@ -45,7 +45,7 @@ export interface WorkloadStat extends RawWorkloadStat { export interface SummarizedWorkloadStat extends RawWorkloadStat { owner_ids: number; } -export interface CapacityRequirments extends JsonObject { +export interface CapacityRequirements extends JsonObject { per_minute: number; per_hour: number; per_day: number; @@ -277,7 +277,7 @@ export function createWorkloadAggregator( pollInterval, scheduleDensity ), - capacity_requirments: { + capacity_requirements: { per_minute: cadence.perMinute, per_hour: cadence.perHour, per_day: cadence.perDay, diff --git a/x-pack/plugins/task_manager/server/routes/health.test.ts b/x-pack/plugins/task_manager/server/routes/health.test.ts index 735029e90c2d3..ece91ed571f88 100644 --- a/x-pack/plugins/task_manager/server/routes/health.test.ts +++ b/x-pack/plugins/task_manager/server/routes/health.test.ts @@ -464,7 +464,7 @@ function mockHealthStats(overrides = {}) { non_recurring: 20, owner_ids: [0, 0, 0, 1, 2, 0, 0, 2, 2, 2, 1, 2, 1, 1], estimated_schedule_density: [], - capacity_requirments: { + capacity_requirements: { per_minute: 150, per_hour: 360, per_day: 820, diff --git a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.test.ts b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.test.ts new file mode 100644 index 0000000000000..aa8f5421184e5 --- /dev/null +++ b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.test.ts @@ -0,0 +1,78 @@ +/* + * 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 { getCombinedProperties } from './use_pivot_data'; +import { ES_FIELD_TYPES } from '../../../../../../src/plugins/data/common'; + +describe('getCombinedProperties', () => { + test('extracts missing mappings from docs', () => { + const mappingProps = { + testProp: { + type: ES_FIELD_TYPES.STRING, + }, + }; + + const docs = [ + { + testProp: 'test_value1', + scriptProp: 1, + }, + { + testProp: 'test_value2', + scriptProp: 2, + }, + { + testProp: 'test_value3', + scriptProp: 3, + }, + ]; + + expect(getCombinedProperties(mappingProps, docs)).toEqual({ + testProp: { + type: 'string', + }, + scriptProp: { + type: 'number', + }, + }); + }); + + test('does not override defined mappings', () => { + const mappingProps = { + testProp: { + type: ES_FIELD_TYPES.STRING, + }, + scriptProp: { + type: ES_FIELD_TYPES.LONG, + }, + }; + + const docs = [ + { + testProp: 'test_value1', + scriptProp: 1, + }, + { + testProp: 'test_value2', + scriptProp: 2, + }, + { + testProp: 'test_value3', + scriptProp: 3, + }, + ]; + + expect(getCombinedProperties(mappingProps, docs)).toEqual({ + testProp: { + type: 'string', + }, + scriptProp: { + type: 'long', + }, + }); + }); +}); diff --git a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts index 9a49ed9480359..329e2d5f87131 100644 --- a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts +++ b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts @@ -13,6 +13,7 @@ import { EuiDataGridColumn } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { getFlattenedObject } from '@kbn/std'; +import { sample, difference } from 'lodash'; import { ES_FIELD_TYPES } from '../../../../../../src/plugins/data/common'; import type { PreviewMappingsProperties } from '../../../common/api_schemas/transforms'; @@ -71,6 +72,25 @@ function sortColumnsForLatest(sortField: string) { }; } +/** + * Extracts missing mappings from docs. + */ +export function getCombinedProperties( + populatedProperties: PreviewMappingsProperties, + docs: Array> +): PreviewMappingsProperties { + // Take a sample from docs and resolve missing mappings + const sampleDoc = sample(docs) ?? {}; + const missingMappings = difference(Object.keys(sampleDoc), Object.keys(populatedProperties)); + return { + ...populatedProperties, + ...missingMappings.reduce((acc, curr) => { + acc[curr] = { type: typeof sampleDoc[curr] as ES_FIELD_TYPES }; + return acc; + }, {} as PreviewMappingsProperties), + }; +} + export const usePivotData = ( indexPatternTitle: SearchItems['indexPattern']['title'], query: PivotQuery, @@ -170,7 +190,7 @@ export const usePivotData = ( const populatedFields = [...new Set(docs.map(Object.keys).flat(1))]; // 3. Filter mapping properties by populated fields - const populatedProperties: PreviewMappingsProperties = Object.entries( + let populatedProperties: PreviewMappingsProperties = Object.entries( resp.generated_dest_index.mappings.properties ) .filter(([key]) => populatedFields.includes(key)) @@ -182,6 +202,8 @@ export const usePivotData = ( {} ); + populatedProperties = getCombinedProperties(populatedProperties, docs); + setTableItems(docs); setRowCount(docs.length); setRowCountRelation(ES_CLIENT_TOTAL_HITS_RELATION.EQ); diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 69553fd53ffc5..70b6d766fe786 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -6340,15 +6340,15 @@ "xpack.canvas.functions.repeatImage.args.maxHelpText": "画像が繰り返される最高回数です。", "xpack.canvas.functions.repeatImage.args.sizeHelpText": "画像の高さまたは幅のピクセル単位での最高値です。画像が縦長の場合、この関数は高さを制限します。", "xpack.canvas.functions.repeatImageHelpText": "繰り返し画像エレメントを構成します。", + "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "表示される背景画像です。画像アセットは「{BASE64}」データ {URL} として提供するか、部分式で渡します。", + "expressionRevealImage.functions.revealImage.args.imageHelpText": "表示する画像です。画像アセットは{BASE64}データ{URL}として提供するか、部分式で渡します。", + "expressionRevealImage.functions.revealImage.args.originHelpText": "画像で埋め始める位置です。たとえば、{list}、または {end}です。", + "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "無効な値：「{percent}」。パーセンテージは 0 と 1 の間でなければなりません ", + "expressionRevealImage.functions.revealImageHelpText": "画像表示エレメントを構成します。", "xpack.canvas.functions.replace.args.flagsHelpText": "フラグを指定します。{url}を参照してください。", "xpack.canvas.functions.replace.args.patternHelpText": "{JS} 正規表現のテキストまたはパターンです。例：{example}。ここではキャプチャグループを使用できます。", "xpack.canvas.functions.replace.args.replacementHelpText": "文字列の一致する部分の代わりです。キャプチャグループはノードによってアクセス可能です。例：{example}。", "xpack.canvas.functions.replaceImageHelpText": "正規表現で文字列の一部を置き換えます。", - "xpack.canvas.functions.revealImage.args.emptyImageHelpText": "表示される背景画像です。画像アセットは「{BASE64}」データ {URL} として提供するか、部分式で渡します。", - "xpack.canvas.functions.revealImage.args.imageHelpText": "表示する画像です。画像アセットは{BASE64}データ{URL}として提供するか、部分式で渡します。", - "xpack.canvas.functions.revealImage.args.originHelpText": "画像で埋め始める位置です。たとえば、{list}、または {end}です。", - "xpack.canvas.functions.revealImage.invalidPercentErrorMessage": "無効な値：「{percent}」。パーセンテージは 0 と 1 の間でなければなりません ", - "xpack.canvas.functions.revealImageHelpText": "画像表示エレメントを構成します。", "xpack.canvas.functions.rounddate.args.formatHelpText": "バケットに使用する{MOMENTJS}フォーマットです。たとえば、{example}は月単位に端数処理されます。{url}を参照してください。", "xpack.canvas.functions.rounddateHelpText": "新世紀からのミリ秒の繰り上げ・繰り下げに {MOMENTJS} を使用し、新世紀からのミリ秒を戻します。", "xpack.canvas.functions.rowCountHelpText": "行数を返します。{plyFn}と組み合わせて、固有の列値の数、または固有の列値の組み合わせを求めます。", @@ -6543,8 +6543,8 @@ "xpack.canvas.renderer.progress.helpDescription": "エレメントのパーセンテージを示す進捗インジケーターをレンダリングします", "xpack.canvas.renderer.repeatImage.displayName": "画像の繰り返し", "xpack.canvas.renderer.repeatImage.helpDescription": "画像を指定回数繰り返し表示します", - "xpack.canvas.renderer.revealImage.displayName": "画像の部分表示", - "xpack.canvas.renderer.revealImage.helpDescription": "カスタムゲージスタイルチャートを作成するため、画像のパーセンテージを表示します", + "expressionRevealImage.renderer.revealImage.displayName": "画像の部分表示", + "expressionRevealImage.renderer.revealImage.helpDescription": "カスタムゲージスタイルチャートを作成するため、画像のパーセンテージを表示します", "xpack.canvas.renderer.shape.displayName": "形状", "xpack.canvas.renderer.shape.helpDescription": "基本的な図形をレンダリングします", "xpack.canvas.renderer.table.displayName": "データテーブル", @@ -8485,7 +8485,6 @@ "xpack.dataVisualizer.file.editFlyout.overrides.timestampQuestionMarkValidationErrorMessage": "タイムスタンプフォーマット {timestampFormat} は、疑問符 ({fieldPlaceholder}) が含まれているためサポートされていません", "xpack.dataVisualizer.file.editFlyout.overrides.trimFieldsLabel": "フィールドを切り抜く", "xpack.dataVisualizer.file.editFlyout.overrideSettingsTitle": "上書き設定", - "xpack.dataVisualizer.experimentalBadge.experimentalLabel": "実験的", "xpack.dataVisualizer.file.explanationFlyout.closeButton": "閉じる", "xpack.dataVisualizer.file.explanationFlyout.content": "分析結果を生成した論理ステップ。", "xpack.dataVisualizer.file.explanationFlyout.title": "分析説明", @@ -8589,7 +8588,6 @@ "xpack.dataVisualizer.file.importSummary.indexPatternTitle": "インデックスパターン", "xpack.dataVisualizer.file.importSummary.indexTitle": "インデックス", "xpack.dataVisualizer.file.importSummary.ingestPipelineTitle": "パイプラインを投入", - "xpack.dataVisualizer.file.importView.experimentalFeatureTooltip": "実験的機能。フィードバックをお待ちしています。", "xpack.dataVisualizer.file.importView.importButtonLabel": "インポート", "xpack.dataVisualizer.file.importView.importDataTitle": "データのインポート", "xpack.dataVisualizer.file.importView.importPermissionError": "インデックス {index} にデータを作成またはインポートするパーミッションがありません。", @@ -8624,14 +8622,11 @@ "xpack.dataVisualizer.file.simpleImportSettings.indexNameFormRowLabel": "インデックス名", "xpack.dataVisualizer.file.simpleImportSettings.indexNamePlaceholder": "インデックス名", "xpack.dataVisualizer.file.welcomeContent.delimitedTextFilesDescription": "CSV や TSV などの区切られたテキストファイル", - "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureDescription": "これは実験的な機能です。フィードバックがありますか？{githubLink}で問題を報告してください。", - "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureTooltip": "実験的機能。フィードバックをお待ちしています。", "xpack.dataVisualizer.file.welcomeContent.logFilesWithCommonFormatDescription": "タイムスタンプの一般的フォーマットのログファイル", "xpack.dataVisualizer.file.welcomeContent.newlineDelimitedJsonDescription": "改行区切りの JSON", "xpack.dataVisualizer.file.welcomeContent.supportedFileFormatDescription": "ファイルデータビジュアライザーはこれらのファイル形式をサポートしています：", "xpack.dataVisualizer.file.welcomeContent.uploadedFilesAllowedSizeDescription": "最大{maxFileSize}のファイルをアップロードできます。", "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileDescription": "ファイルデータビジュアライザーは、ログファイルのフィールドとメトリックの理解に役立ちます。ファイルをアップロードして、データを分析し、 Elasticsearch インデックスにインポートするか選択できます。", - "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileTitle": "ログファイルのデータを可視化 {experimentalBadge}", "xpack.dataVisualizer.index.actionsPanel.discoverAppTitle": "Discover", "xpack.dataVisualizer.index.actionsPanel.exploreTitle": "データの調査", "xpack.dataVisualizer.index.actionsPanel.viewIndexInDiscoverDescription": "インデックスのドキュメントを調査します。", @@ -11946,7 +11941,6 @@ "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldAriaLabel": "構成JSONエディター", "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel": "構成", "xpack.ingestPipelines.pipelineEditor.dateForm.fieldNameHelpText": "変換するフィールド。", - "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText": "想定されるデータ形式。指定された形式は連続で適用されます。Java時刻パターン、ISO8601、UNIX、UNIX_MS、TAI64Nを使用できます。", "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel": "形式", "xpack.ingestPipelines.pipelineEditor.dateForm.formatsRequiredError": "形式の値は必須です。", "xpack.ingestPipelines.pipelineEditor.dateForm.localeFieldLabel": "ロケール (任意) ", @@ -14347,8 +14341,6 @@ "xpack.ml.dataVisualizer.fileBasedLabel": "ファイル", "xpack.ml.datavisualizer.selector.dataVisualizerDescription": "機械学習データビジュアライザーツールは、ログファイルのメトリックとフィールド、または既存の Elasticsearch インデックスを分析し、データの理解を助けます。", "xpack.ml.datavisualizer.selector.dataVisualizerTitle": "データビジュアライザー", - "xpack.ml.datavisualizer.selector.experimentalBadgeLabel": "実験的", - "xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel": "実験的機能。フィードバックをお待ちしています。", "xpack.ml.datavisualizer.selector.importDataDescription": "ログファイルからデータをインポートします。最大{maxFileSize}のファイルをアップロードできます。", "xpack.ml.datavisualizer.selector.importDataTitle": "データのインポート", "xpack.ml.datavisualizer.selector.selectIndexButtonLabel": "インデックスパターンを選択", @@ -23600,7 +23592,6 @@ "xpack.uptime.monitorDetails.title.pingType.icmp": "ICMP ping", "xpack.uptime.monitorDetails.title.pingType.tcp": "TCP ping", "xpack.uptime.monitorList.anomalyColumn.label": "レスポンス異常スコア", - "xpack.uptime.monitorList.defineConnector.description": "アラートを有効にするには、デフォルトのアラートアクションコネクターを定義してください。", "xpack.uptime.monitorList.downLineSeries.downLabel": "ダウン", "xpack.uptime.monitorList.drawer.missingLocation": "一部の Heartbeat インスタンスには位置情報が定義されていません。Heartbeat 構成への{link}。", "xpack.uptime.monitorList.drawer.mostRecentRun": "直近のテスト実行", @@ -24224,4 +24215,4 @@ "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。", "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。" } -} +} \ No newline at end of file diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 261f68c2e629a..02e17eaac3f57 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -6383,13 +6383,13 @@ "xpack.canvas.functions.replace.args.flagsHelpText": "指定标志。请参见 {url}。", "xpack.canvas.functions.replace.args.patternHelpText": "{JS} 正则表达式的文本或模式。例如，{example}。您可以在此处使用捕获组。", "xpack.canvas.functions.replace.args.replacementHelpText": "字符串匹配部分的替代。捕获组可以通过其索引进行访问。例如，{example}。", - "xpack.canvas.functions.replaceImageHelpText": "使用正则表达式替换字符串的各部分。", - "xpack.canvas.functions.revealImage.args.emptyImageHelpText": "要显示的可选背景图像。以 `{BASE64}` 数据 {URL} 的形式提供图像资产或传入子表达式。", - "xpack.canvas.functions.revealImage.args.imageHelpText": "要显示的图像。以 {BASE64} 数据 {URL} 的形式提供图像资产或传入子表达式。", - "xpack.canvas.functions.revealImage.args.originHelpText": "要开始图像填充的位置。例如 {list} 或 {end}。", - "xpack.canvas.functions.revealImage.invalidPercentErrorMessage": "无效值：“{percent}”。百分比必须介于 0 和 1 之间", - "xpack.canvas.functions.revealImageHelpText": "配置图像显示元素。", "xpack.canvas.functions.rounddate.args.formatHelpText": "用于存储桶存储的 {MOMENTJS} 格式。例如，{example} 四舍五入到月份。请参见 {url}。", + "xpack.canvas.functions.replaceImageHelpText": "使用正则表达式替换字符串的各部分。", + "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "要显示的可选背景图像。以 `{BASE64}` 数据 {URL} 的形式提供图像资产或传入子表达式。", + "expressionRevealImage.functions.revealImage.args.imageHelpText": "要显示的图像。以 {BASE64} 数据 {URL} 的形式提供图像资产或传入子表达式。", + "expressionRevealImage.functions.revealImage.args.originHelpText": "要开始图像填充的位置。例如 {list} 或 {end}。", + "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "无效值：“{percent}”。百分比必须介于 0 和 1 之间", + "expressionRevealImage.functions.revealImageHelpText": "配置图像显示元素。", "xpack.canvas.functions.rounddateHelpText": "使用 {MOMENTJS} 格式字符串舍入自 Epoch 起毫秒数，并返回自 Epoch 起毫秒数。", "xpack.canvas.functions.rowCountHelpText": "返回行数。与 {plyFn} 搭配使用，可获取唯一列值的计数或唯一列值的组合。", "xpack.canvas.functions.savedLens.args.idHelpText": "已保存 Lens 可视化对象的 ID", @@ -6583,8 +6583,8 @@ "xpack.canvas.renderer.progress.helpDescription": "呈现显示元素百分比的进度指示", "xpack.canvas.renderer.repeatImage.displayName": "图像重复", "xpack.canvas.renderer.repeatImage.helpDescription": "重复图像给定次数", - "xpack.canvas.renderer.revealImage.displayName": "图像显示", - "xpack.canvas.renderer.revealImage.helpDescription": "显示一定百分比的图像，以制作定制的仪表样式图表", + "expressionRevealImage.renderer.revealImage.displayName": "图像显示", + "expressionRevealImage.renderer.revealImage.helpDescription": "显示一定百分比的图像，以制作定制的仪表样式图表", "xpack.canvas.renderer.shape.displayName": "形状", "xpack.canvas.renderer.shape.helpDescription": "呈现基本形状", "xpack.canvas.renderer.table.displayName": "数据表", @@ -8557,7 +8557,6 @@ "xpack.dataVisualizer.file.editFlyout.overrides.timestampQuestionMarkValidationErrorMessage": "时间戳格式 {timestampFormat} 不受支持，因为其包含问号字符 ({fieldPlaceholder})", "xpack.dataVisualizer.file.editFlyout.overrides.trimFieldsLabel": "应剪裁字段", "xpack.dataVisualizer.file.editFlyout.overrideSettingsTitle": "替代设置", - "xpack.dataVisualizer.experimentalBadge.experimentalLabel": "实验性", "xpack.dataVisualizer.file.explanationFlyout.closeButton": "关闭", "xpack.dataVisualizer.file.explanationFlyout.content": "产生分析结果的逻辑步骤。", "xpack.dataVisualizer.file.explanationFlyout.title": "分析说明", @@ -8662,7 +8661,6 @@ "xpack.dataVisualizer.file.importSummary.indexPatternTitle": "索引模式", "xpack.dataVisualizer.file.importSummary.indexTitle": "索引", "xpack.dataVisualizer.file.importSummary.ingestPipelineTitle": "采集管道", - "xpack.dataVisualizer.file.importView.experimentalFeatureTooltip": "实验性功能。我们很乐意听取您的反馈意见。", "xpack.dataVisualizer.file.importView.importButtonLabel": "导入", "xpack.dataVisualizer.file.importView.importDataTitle": "导入数据", "xpack.dataVisualizer.file.importView.importPermissionError": "您无权创建或将数据导入索引 {index}", @@ -8697,14 +8695,11 @@ "xpack.dataVisualizer.file.simpleImportSettings.indexNameFormRowLabel": "索引名称", "xpack.dataVisualizer.file.simpleImportSettings.indexNamePlaceholder": "索引名称", "xpack.dataVisualizer.file.welcomeContent.delimitedTextFilesDescription": "分隔的文本文件，例如 CSV 和 TSV", - "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureDescription": "此功能为实验性功能。有反馈？如欲提供反馈，请在 {githubLink} 中创建问题。", - "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureTooltip": "实验性功能。我们很乐意听取您的反馈意见。", "xpack.dataVisualizer.file.welcomeContent.logFilesWithCommonFormatDescription": "具有时间戳通用格式的日志文件", "xpack.dataVisualizer.file.welcomeContent.newlineDelimitedJsonDescription": "换行符分隔的 JSON", "xpack.dataVisualizer.file.welcomeContent.supportedFileFormatDescription": "File Data Visualizer 支持以下文件格式：", "xpack.dataVisualizer.file.welcomeContent.uploadedFilesAllowedSizeDescription": "您可以上传不超过 {maxFileSize} 的文件。", "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileDescription": "File Data Visualizer 可帮助您理解日志文件中的字段和指标。上传文件、分析文件数据，然后选择是否将数据导入 Elasticsearch 索引。", - "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileTitle": "可视化来自日志文件的数据 {experimentalBadge}", "xpack.dataVisualizer.index.actionsPanel.discoverAppTitle": "Discover", "xpack.dataVisualizer.index.actionsPanel.exploreTitle": "浏览您的数据", "xpack.dataVisualizer.index.actionsPanel.viewIndexInDiscoverDescription": "浏览您的索引中的文档。", @@ -12110,7 +12105,6 @@ "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldAriaLabel": "配置 JSON 编辑器", "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel": "配置", "xpack.ingestPipelines.pipelineEditor.dateForm.fieldNameHelpText": "要转换的字段。", - "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText": "预期的日期格式。提供的格式按顺序应用。接受 Java 时间模式、ISO8601、UNIX、UNIX_MS 或 TAI64N 格式。", "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel": "格式", "xpack.ingestPipelines.pipelineEditor.dateForm.formatsRequiredError": "需要格式的值。", "xpack.ingestPipelines.pipelineEditor.dateForm.localeFieldLabel": "区域设置 (可选) ", @@ -14535,8 +14529,6 @@ "xpack.ml.dataVisualizer.fileBasedLabel": "文件", "xpack.ml.datavisualizer.selector.dataVisualizerDescription": "Machine Learning 数据可视化工具通过分析日志文件或现有 Elasticsearch 索引中的指标和字段，帮助您理解数据。", "xpack.ml.datavisualizer.selector.dataVisualizerTitle": "数据可视化工具", - "xpack.ml.datavisualizer.selector.experimentalBadgeLabel": "实验性", - "xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel": "实验性功能。我们很乐意听取您的反馈意见。", "xpack.ml.datavisualizer.selector.importDataDescription": "从日志文件导入数据。您可以上传不超过 {maxFileSize} 的文件。", "xpack.ml.datavisualizer.selector.importDataTitle": "导入数据", "xpack.ml.datavisualizer.selector.selectIndexButtonLabel": "选择索引模式", @@ -23968,7 +23960,6 @@ "xpack.uptime.monitorDetails.title.pingType.icmp": "ICMP ping", "xpack.uptime.monitorDetails.title.pingType.tcp": "TCP ping", "xpack.uptime.monitorList.anomalyColumn.label": "响应异常分数", - "xpack.uptime.monitorList.defineConnector.description": "要开始启用告警，请在以下位置定义默认告警操作连接器", "xpack.uptime.monitorList.downLineSeries.downLabel": "关闭检查", "xpack.uptime.monitorList.drawer.missingLocation": "某些 Heartbeat 实例未定义位置。{link}到您的 Heartbeat 配置。", "xpack.uptime.monitorList.drawer.mostRecentRun": "最新测试运行", @@ -24602,4 +24593,4 @@ "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。", "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。" } -} +} \ No newline at end of file diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/cluster.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/cluster.test.ts new file mode 100644 index 0000000000000..412ce348d56e3 --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/cluster.test.ts @@ -0,0 +1,360 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { act } from 'react-dom/test-utils'; +import { MlAction, UpgradeAssistantStatus } from '../../common/types'; + +import { ClusterTestBed, setupClusterPage, setupEnvironment } from './helpers'; + +describe('Cluster tab', () => { + let testBed: ClusterTestBed; + const { server, httpRequestsMockHelpers } = setupEnvironment(); + + afterAll(() => { + server.restore(); + }); + + describe('with deprecations', () => { + const snapshotId = '1'; + const jobId = 'deprecation_check_job'; + const upgradeStatusMockResponse: UpgradeAssistantStatus = { + readyForUpgrade: false, + cluster: [ + { + level: 'critical', + message: + 'model snapshot [1] for job [deprecation_check_job] needs to be deleted or upgraded', + details: + 'model snapshot [%s] for job [%s] supports minimum version [%s] and needs to be at least [%s]', + url: 'doc_url', + correctiveAction: { + type: 'mlSnapshot', + snapshotId, + jobId, + }, + }, + ], + indices: [], + }; + + beforeEach(async () => { + httpRequestsMockHelpers.setLoadEsDeprecationsResponse(upgradeStatusMockResponse); + httpRequestsMockHelpers.setLoadDeprecationLoggingResponse({ isEnabled: true }); + + await act(async () => { + testBed = await setupClusterPage({ isReadOnlyMode: false }); + }); + + const { actions, component } = testBed; + + component.update(); + + // Navigate to the cluster tab + await act(async () => { + actions.clickTab('cluster'); + }); + + component.update(); + }); + + test('renders deprecations', () => { + const { exists } = testBed; + expect(exists('clusterTabContent')).toBe(true); + expect(exists('deprecationsContainer')).toBe(true); + }); + + describe('fix ml snapshots button', () => { + let flyout: Element | null; + + beforeEach(async () => { + const { component, actions, exists, find } = testBed; + + expect(exists('deprecationsContainer')).toBe(true); + + // Open all deprecations + actions.clickExpandAll(); + + // The data-test-subj is derived from the deprecation message + const accordionTestSubj = `depgroup_${upgradeStatusMockResponse.cluster[0].message + .split(' ') + .join('_')}`; + + await act(async () => { + find(`${accordionTestSubj}.fixMlSnapshotsButton`).simulate('click'); + }); + + component.update(); + + // We need to read the document "body" as the flyout is added there and not inside + // the component DOM tree. + flyout = document.body.querySelector('[data-test-subj="fixSnapshotsFlyout"]'); + + expect(flyout).not.toBe(null); + expect(flyout!.textContent).toContain('Upgrade or delete model snapshot'); + }); + + test('upgrades snapshots', async () => { + const { component } = testBed; + + const upgradeButton: HTMLButtonElement | null = flyout!.querySelector( + '[data-test-subj="upgradeSnapshotButton"]' + ); + + httpRequestsMockHelpers.setUpgradeMlSnapshotResponse({ + nodeId: 'my_node', + snapshotId, + jobId, + status: 'in_progress', + }); + + await act(async () => { + upgradeButton!.click(); + }); + + component.update(); + + // First, we expect a POST request to upgrade the snapshot + const upgradeRequest = server.requests[server.requests.length - 2]; + expect(upgradeRequest.method).toBe('POST'); + expect(upgradeRequest.url).toBe('/api/upgrade_assistant/ml_snapshots'); + + // Next, we expect a GET request to check the status of the upgrade + const statusRequest = server.requests[server.requests.length - 1]; + expect(statusRequest.method).toBe('GET'); + expect(statusRequest.url).toBe( + `/api/upgrade_assistant/ml_snapshots/${jobId}/${snapshotId}` + ); + }); + + test('handles upgrade failure', async () => { + const { component, find } = testBed; + + const upgradeButton: HTMLButtonElement | null = flyout!.querySelector( + '[data-test-subj="upgradeSnapshotButton"]' + ); + + const error = { + statusCode: 500, + error: 'Upgrade snapshot error', + message: 'Upgrade snapshot error', + }; + + httpRequestsMockHelpers.setUpgradeMlSnapshotResponse(undefined, error); + + await act(async () => { + upgradeButton!.click(); + }); + + component.update(); + + const upgradeRequest = server.requests[server.requests.length - 1]; + expect(upgradeRequest.method).toBe('POST'); + expect(upgradeRequest.url).toBe('/api/upgrade_assistant/ml_snapshots'); + + const accordionTestSubj = `depgroup_${upgradeStatusMockResponse.cluster[0].message + .split(' ') + .join('_')}`; + + expect(find(`${accordionTestSubj}.fixMlSnapshotsButton`).text()).toEqual('Failed'); + }); + + test('deletes snapshots', async () => { + const { component } = testBed; + + const deleteButton: HTMLButtonElement | null = flyout!.querySelector( + '[data-test-subj="deleteSnapshotButton"]' + ); + + httpRequestsMockHelpers.setDeleteMlSnapshotResponse({ + acknowledged: true, + }); + + await act(async () => { + deleteButton!.click(); + }); + + component.update(); + + const request = server.requests[server.requests.length - 1]; + const mlDeprecation = upgradeStatusMockResponse.cluster[0]; + + expect(request.method).toBe('DELETE'); + expect(request.url).toBe( + `/api/upgrade_assistant/ml_snapshots/${ + (mlDeprecation.correctiveAction! as MlAction).jobId + }/${(mlDeprecation.correctiveAction! as MlAction).snapshotId}` + ); + }); + + test('handles delete failure', async () => { + const { component, find } = testBed; + + const deleteButton: HTMLButtonElement | null = flyout!.querySelector( + '[data-test-subj="deleteSnapshotButton"]' + ); + + const error = { + statusCode: 500, + error: 'Upgrade snapshot error', + message: 'Upgrade snapshot error', + }; + + httpRequestsMockHelpers.setDeleteMlSnapshotResponse(undefined, error); + + await act(async () => { + deleteButton!.click(); + }); + + component.update(); + + const request = server.requests[server.requests.length - 1]; + const mlDeprecation = upgradeStatusMockResponse.cluster[0]; + + expect(request.method).toBe('DELETE'); + expect(request.url).toBe( + `/api/upgrade_assistant/ml_snapshots/${ + (mlDeprecation.correctiveAction! as MlAction).jobId + }/${(mlDeprecation.correctiveAction! as MlAction).snapshotId}` + ); + + const accordionTestSubj = `depgroup_${upgradeStatusMockResponse.cluster[0].message + .split(' ') + .join('_')}`; + + expect(find(`${accordionTestSubj}.fixMlSnapshotsButton`).text()).toEqual('Failed'); + }); + }); + }); + + describe('no deprecations', () => { + beforeEach(async () => { + const noDeprecationsResponse = { + readyForUpgrade: false, + cluster: [], + indices: [], + }; + + httpRequestsMockHelpers.setLoadEsDeprecationsResponse(noDeprecationsResponse); + + await act(async () => { + testBed = await setupClusterPage({ isReadOnlyMode: false }); + }); + + const { component } = testBed; + + component.update(); + }); + + test('renders prompt', () => { + const { exists, find } = testBed; + expect(exists('noDeprecationsPrompt')).toBe(true); + expect(find('noDeprecationsPrompt').text()).toContain('Ready to upgrade!'); + }); + }); + + describe('error handling', () => { + test('handles 403', async () => { + const error = { + statusCode: 403, + error: 'Forbidden', + message: 'Forbidden', + }; + + httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error); + + await act(async () => { + testBed = await setupClusterPage({ isReadOnlyMode: false }); + }); + + const { component, exists, find } = testBed; + + component.update(); + + expect(exists('permissionsError')).toBe(true); + expect(find('permissionsError').text()).toContain( + 'You are not authorized to view Elasticsearch deprecations.' + ); + }); + + test('shows upgraded message when all nodes have been upgraded', async () => { + const error = { + statusCode: 426, + error: 'Upgrade required', + message: 'There are some nodes running a different version of Elasticsearch', + attributes: { + // This is marked true in the scenario where none of the nodes have the same major version of Kibana, + // and therefore we assume all have been upgraded + allNodesUpgraded: true, + }, + }; + + httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error); + + await act(async () => { + testBed = await setupClusterPage({ isReadOnlyMode: false }); + }); + + const { component, exists, find } = testBed; + + component.update(); + + expect(exists('upgradedCallout')).toBe(true); + expect(find('upgradedCallout').text()).toContain( + 'Your configuration is up to date. Kibana and all Elasticsearch nodes are running the same version.' + ); + }); + + test('shows partially upgrade error when nodes are running different versions', async () => { + const error = { + statusCode: 426, + error: 'Upgrade required', + message: 'There are some nodes running a different version of Elasticsearch', + attributes: { + allNodesUpgraded: false, + }, + }; + + httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error); + + await act(async () => { + testBed = await setupClusterPage({ isReadOnlyMode: false }); + }); + + const { component, exists, find } = testBed; + + component.update(); + + expect(exists('partiallyUpgradedWarning')).toBe(true); + expect(find('partiallyUpgradedWarning').text()).toContain( + 'Upgrade Kibana to the same version as your Elasticsearch cluster. One or more nodes in the cluster is running a different version than Kibana.' + ); + }); + + test('handles generic error', async () => { + const error = { + statusCode: 500, + error: 'Internal server error', + message: 'Internal server error', + }; + + httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error); + + await act(async () => { + testBed = await setupClusterPage({ isReadOnlyMode: false }); + }); + + const { component, exists, find } = testBed; + + component.update(); + + expect(exists('requestError')).toBe(true); + expect(find('requestError').text()).toContain( + 'Could not retrieve Elasticsearch deprecations.' + ); + }); + }); +}); diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/cluster.helpers.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/cluster.helpers.ts new file mode 100644 index 0000000000000..2aedface1e32b --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/cluster.helpers.ts @@ -0,0 +1,67 @@ +/* + * 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 { registerTestBed, TestBed, TestBedConfig } from '@kbn/test/jest'; +import { EsDeprecationsContent } from '../../../public/application/components/es_deprecations'; +import { WithAppDependencies } from './setup_environment'; + +const testBedConfig: TestBedConfig = { + memoryRouter: { + initialEntries: ['/es_deprecations/cluster'], + componentRoutePath: '/es_deprecations/:tabName', + }, + doMountAsync: true, +}; + +export type ClusterTestBed = TestBed & { + actions: ReturnType; +}; + +const createActions = (testBed: TestBed) => { + /** + * User Actions + */ + const clickTab = (tabName: string) => { + const { find } = testBed; + const camelcaseTabName = tabName.charAt(0).toUpperCase() + tabName.slice(1); + + find(`upgradeAssistant${camelcaseTabName}Tab`).simulate('click'); + }; + + const clickExpandAll = () => { + const { find } = testBed; + find('expandAll').simulate('click'); + }; + + return { + clickTab, + clickExpandAll, + }; +}; + +export const setup = async (overrides?: Record): Promise => { + const initTestBed = registerTestBed( + WithAppDependencies(EsDeprecationsContent, overrides), + testBedConfig + ); + const testBed = await initTestBed(); + + return { + ...testBed, + actions: createActions(testBed), + }; +}; + +export type ClusterTestSubjects = + | 'expandAll' + | 'deprecationsContainer' + | 'permissionsError' + | 'requestError' + | 'upgradedCallout' + | 'partiallyUpgradedWarning' + | 'noDeprecationsPrompt' + | string; diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts index e3f6df54db60e..3fd8b7279c073 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts @@ -62,11 +62,35 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => { ]); }; + const setUpgradeMlSnapshotResponse = (response?: object, error?: ResponseError) => { + const status = error ? error.statusCode || 400 : 200; + const body = error ? error : response; + + server.respondWith('POST', `${API_BASE_PATH}/ml_snapshots`, [ + status, + { 'Content-Type': 'application/json' }, + JSON.stringify(body), + ]); + }; + + const setDeleteMlSnapshotResponse = (response?: object, error?: ResponseError) => { + const status = error ? error.statusCode || 400 : 200; + const body = error ? error : response; + + server.respondWith('DELETE', `${API_BASE_PATH}/ml_snapshots/:jobId/:snapshotId`, [ + status, + { 'Content-Type': 'application/json' }, + JSON.stringify(body), + ]); + }; + return { setLoadEsDeprecationsResponse, setLoadDeprecationLoggingResponse, setUpdateDeprecationLoggingResponse, setUpdateIndexSettingsResponse, + setUpgradeMlSnapshotResponse, + setDeleteMlSnapshotResponse, }; }; diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts index ddf5787af1037..8e256680253be 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts @@ -7,6 +7,7 @@ export { setup as setupOverviewPage, OverviewTestBed } from './overview.helpers'; export { setup as setupIndicesPage, IndicesTestBed } from './indices.helpers'; +export { setup as setupClusterPage, ClusterTestBed } from './cluster.helpers'; export { setup as setupKibanaPage, KibanaTestBed } from './kibana.helpers'; export { setupEnvironment } from './setup_environment'; diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx index faeb0e4a40abd..aae5500403322 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx @@ -33,7 +33,6 @@ export const WithAppDependencies = (Comp: any, overrides: Record { }); describe('with deprecations', () => { - const upgradeStatusMockResponse = { + const upgradeStatusMockResponse: UpgradeAssistantStatus = { readyForUpgrade: false, cluster: [], indices: [ { - level: 'warning' as MIGRATION_DEPRECATION_LEVEL, + level: 'warning', message: indexSettingDeprecations.translog.deprecationMessage, url: 'doc_url', index: 'my_index', - deprecatedIndexSettings: indexSettingDeprecations.translog.settings, + correctiveAction: { + type: 'indexSetting', + deprecatedSettings: indexSettingDeprecations.translog.settings, + }, }, ], }; @@ -56,6 +59,7 @@ describe('Indices tab', () => { test('renders deprecations', () => { const { exists, find } = testBed; + expect(exists('indexTabContent')).toBe(true); expect(exists('deprecationsContainer')).toBe(true); expect(find('indexCount').text()).toEqual('1'); }); diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts index 85efaf38f32a7..9b65b493a74c4 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts @@ -38,7 +38,6 @@ describe('Overview page', () => { details: 'translog retention settings [index.translog.retention.size] and [index.translog.retention.age] are ignored because translog is no longer used in peer recoveries with soft-deletes enabled (default in 7.0 or later)', index: 'settings', - reindex: false, }, ], }; diff --git a/x-pack/plugins/upgrade_assistant/common/types.ts b/x-pack/plugins/upgrade_assistant/common/types.ts index 0471fc30f28ea..88fa103bace89 100644 --- a/x-pack/plugins/upgrade_assistant/common/types.ts +++ b/x-pack/plugins/upgrade_assistant/common/types.ts @@ -28,7 +28,6 @@ export enum ReindexStatus { } export const REINDEX_OP_TYPE = 'upgrade-assistant-reindex-operation'; - export interface QueueSettings extends SavedObjectAttributes { /** * A Unix timestamp of when the reindex operation was enqueued. @@ -190,11 +189,9 @@ export interface DeprecationAPIResponse { node_settings: DeprecationInfo[]; index_settings: IndexSettingsDeprecationInfo; } -export interface EnrichedDeprecationInfo extends DeprecationInfo { - index?: string; - node?: string; - reindex?: boolean; - deprecatedIndexSettings?: string[]; + +export interface ReindexAction { + type: 'reindex'; /** * Indicate what blockers have been detected for calling reindex * against this index. @@ -205,6 +202,21 @@ export interface EnrichedDeprecationInfo extends DeprecationInfo { blockerForReindexing?: 'index-closed'; // 'index-closed' can be handled automatically, but requires more resources, user should be warned } +export interface MlAction { + type: 'mlSnapshot'; + snapshotId: string; + jobId: string; +} + +export interface IndexSettingAction { + type: 'indexSetting'; + deprecatedSettings: string[]; +} +export interface EnrichedDeprecationInfo extends DeprecationInfo { + index?: string; + correctiveAction?: ReindexAction | MlAction | IndexSettingAction; +} + export interface UpgradeAssistantStatus { readyForUpgrade: boolean; cluster: EnrichedDeprecationInfo[]; @@ -225,3 +237,11 @@ export interface ResolveIndexResponseFromES { }>; data_streams: Array<{ name: string; backing_indices: string[]; timestamp_field: string }>; } + +export const ML_UPGRADE_OP_TYPE = 'upgrade-assistant-ml-upgrade-operation'; + +export interface MlOperation extends SavedObjectAttributes { + nodeId: string; + snapshotId: string; + jobId: string; +} diff --git a/x-pack/plugins/upgrade_assistant/kibana.json b/x-pack/plugins/upgrade_assistant/kibana.json index d9f4917fa0a6c..d013c16837b77 100644 --- a/x-pack/plugins/upgrade_assistant/kibana.json +++ b/x-pack/plugins/upgrade_assistant/kibana.json @@ -5,6 +5,6 @@ "ui": true, "configPath": ["xpack", "upgrade_assistant"], "requiredPlugins": ["management", "licensing", "features"], - "optionalPlugins": ["cloud", "usageCollection"], + "optionalPlugins": ["usageCollection"], "requiredBundles": ["esUiShared", "kibanaReact"] } diff --git a/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx b/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx index 049318f5b78d9..88b5bd4721c36 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx @@ -24,7 +24,6 @@ export interface KibanaVersionContext { export interface ContextValue { http: HttpSetup; - isCloudEnabled: boolean; docLinks: DocLinksStart; kibanaVersionInfo: KibanaVersionContext; notifications: NotificationsStart; diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx index b7d3247ffbf21..4324379f456ea 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx @@ -17,34 +17,84 @@ import { EuiTitle, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EnrichedDeprecationInfo } from '../../../../../common/types'; +import { + EnrichedDeprecationInfo, + MlAction, + ReindexAction, + IndexSettingAction, +} from '../../../../../common/types'; import { AppContext } from '../../../app_context'; import { ReindexButton } from './reindex'; import { FixIndexSettingsButton } from './index_settings'; +import { FixMlSnapshotsButton } from './ml_snapshots'; interface DeprecationCellProps { items?: Array<{ title?: string; body: string }>; - reindexIndexName?: string; - deprecatedIndexSettings?: string[]; docUrl?: string; headline?: string; healthColor?: string; children?: ReactNode; - reindexBlocker?: EnrichedDeprecationInfo['blockerForReindexing']; + correctiveAction?: EnrichedDeprecationInfo['correctiveAction']; + indexName?: string; +} + +interface CellActionProps { + correctiveAction: EnrichedDeprecationInfo['correctiveAction']; + indexName?: string; + items: Array<{ title?: string; body: string }>; } +const CellAction: FunctionComponent = ({ correctiveAction, indexName, items }) => { + const { type: correctiveActionType } = correctiveAction!; + switch (correctiveActionType) { + case 'mlSnapshot': + const { jobId, snapshotId } = correctiveAction as MlAction; + return ( + + ); + + case 'reindex': + const { blockerForReindexing } = correctiveAction as ReindexAction; + + return ( + + {({ http, docLinks }) => ( + + )} + + ); + + case 'indexSetting': + const { deprecatedSettings } = correctiveAction as IndexSettingAction; + + return ; + + default: + throw new Error(`No UI defined for corrective action: ${correctiveActionType}`); + } +}; + /** * Used to display a deprecation with links to docs, a health indicator, and other descriptive information. */ export const DeprecationCell: FunctionComponent = ({ headline, healthColor, - reindexIndexName, - deprecatedIndexSettings, + correctiveAction, + indexName, docUrl, items = [], children, - reindexBlocker, }) => (
@@ -82,24 +132,9 @@ export const DeprecationCell: FunctionComponent = ({ )} - {reindexIndexName && ( - - - {({ http, docLinks }) => ( - - )} - - - )} - - {deprecatedIndexSettings?.length && ( + {correctiveAction && ( - + )} diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx index 188e70b64ce6a..f4ac573d86b11 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx @@ -13,9 +13,9 @@ import { IndexDeprecationTableProps, IndexDeprecationTable } from './index_table describe('IndexDeprecationTable', () => { const defaultProps = { indices: [ - { index: 'index1', details: 'Index 1 deets', reindex: true }, - { index: 'index2', details: 'Index 2 deets', reindex: true }, - { index: 'index3', details: 'Index 3 deets', reindex: true }, + { index: 'index1', details: 'Index 1 deets', correctiveAction: { type: 'reindex' } }, + { index: 'index2', details: 'Index 2 deets', correctiveAction: { type: 'reindex' } }, + { index: 'index3', details: 'Index 3 deets', correctiveAction: { type: 'reindex' } }, ], } as IndexDeprecationTableProps; @@ -49,19 +49,25 @@ describe('IndexDeprecationTable', () => { items={ Array [ Object { + "correctiveAction": Object { + "type": "reindex", + }, "details": "Index 1 deets", "index": "index1", - "reindex": true, }, Object { + "correctiveAction": Object { + "type": "reindex", + }, "details": "Index 2 deets", "index": "index2", - "reindex": true, }, Object { + "correctiveAction": Object { + "type": "reindex", + }, "details": "Index 3 deets", "index": "index3", - "reindex": true, }, ] } diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx index 216884d547eeb..6b0f94ea24bc7 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx @@ -10,7 +10,11 @@ import React from 'react'; import { EuiBasicTable } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { EnrichedDeprecationInfo } from '../../../../../common/types'; +import { + EnrichedDeprecationInfo, + IndexSettingAction, + ReindexAction, +} from '../../../../../common/types'; import { AppContext } from '../../../app_context'; import { ReindexButton } from './reindex'; import { FixIndexSettingsButton } from './index_settings'; @@ -19,9 +23,7 @@ const PAGE_SIZES = [10, 25, 50, 100, 250, 500, 1000]; export interface IndexDeprecationDetails { index: string; - reindex: boolean; - deprecatedIndexSettings?: string[]; - blockerForReindexing?: EnrichedDeprecationInfo['blockerForReindexing']; + correctiveAction?: EnrichedDeprecationInfo['correctiveAction']; details?: string; } @@ -152,9 +154,9 @@ export class IndexDeprecationTable extends React.Component< // NOTE: this naive implementation assumes all indices in the table // should show the reindex button or fix indices button. This should work for known use cases. const { indices } = this.props; - const showReindexButton = Boolean(indices.find((i) => i.reindex === true)); + const showReindexButton = Boolean(indices.find((i) => i.correctiveAction?.type === 'reindex')); const showFixSettingsButton = Boolean( - indices.find((i) => i.deprecatedIndexSettings && i.deprecatedIndexSettings.length > 0) + indices.find((i) => i.correctiveAction?.type === 'indexSetting') ); if (showReindexButton === false && showFixSettingsButton === false) { @@ -172,7 +174,9 @@ export class IndexDeprecationTable extends React.Component< return ( @@ -184,7 +188,7 @@ export class IndexDeprecationTable extends React.Component< return ( ); diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx index 579cf1f4a55bb..2bfa8119e41bc 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx @@ -72,18 +72,14 @@ describe('EsDeprecationList', () => { indices={ Array [ Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": undefined, + "correctiveAction": undefined, "details": undefined, "index": "0", - "reindex": false, }, Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": undefined, + "correctiveAction": undefined, "details": undefined, "index": "1", - "reindex": false, }, ] } diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx index cb9f238d0e4dd..7b543a7e94b33 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx @@ -32,11 +32,10 @@ const MessageDeprecation: FunctionComponent<{ return ( @@ -57,10 +56,10 @@ const SimpleMessageDeprecation: FunctionComponent<{ deprecation: EnrichedDepreca return ( ); }; @@ -94,12 +93,11 @@ export const EsDeprecationList: FunctionComponent<{ if (currentGroupBy === GroupByOption.message && deprecations[0].index !== undefined) { // We assume that every deprecation message is the same issue (since they have the same // message) and that each deprecation will have an index associated with it. + const indices = deprecations.map((dep) => ({ index: dep.index!, details: dep.details, - reindex: dep.reindex === true, - deprecatedIndexSettings: dep.deprecatedIndexSettings, - blockerForReindexing: dep.blockerForReindexing, + correctiveAction: dep.correctiveAction, })); return ; } else if (currentGroupBy === GroupByOption.index) { diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/button.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/button.tsx new file mode 100644 index 0000000000000..13b7dacc3b598 --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/button.tsx @@ -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 React, { useEffect, useState } from 'react'; + +import { ButtonSize, EuiButton } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; + +import { FixSnapshotsFlyout } from './fix_snapshots_flyout'; +import { useAppContext } from '../../../../app_context'; +import { useSnapshotState } from './use_snapshot_state'; + +const i18nTexts = { + fixButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.fixButtonLabel', + { + defaultMessage: 'Fix', + } + ), + upgradingButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.upgradingButtonLabel', + { + defaultMessage: 'Upgrading…', + } + ), + deletingButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.deletingButtonLabel', + { + defaultMessage: 'Deleting…', + } + ), + doneButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.doneButtonLabel', + { + defaultMessage: 'Done', + } + ), + failedButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.failedButtonLabel', + { + defaultMessage: 'Failed', + } + ), +}; + +interface Props { + snapshotId: string; + jobId: string; + description: string; +} + +export const FixMlSnapshotsButton: React.FunctionComponent = ({ + snapshotId, + jobId, + description, +}) => { + const { api } = useAppContext(); + const { snapshotState, upgradeSnapshot, deleteSnapshot, updateSnapshotStatus } = useSnapshotState( + { + jobId, + snapshotId, + api, + } + ); + + const [showFlyout, setShowFlyout] = useState(false); + + useEffect(() => { + updateSnapshotStatus(); + }, [updateSnapshotStatus]); + + const commonButtonProps = { + size: 's' as ButtonSize, + onClick: () => setShowFlyout(true), + 'data-test-subj': 'fixMlSnapshotsButton', + }; + + let button = {i18nTexts.fixButtonLabel}; + + switch (snapshotState.status) { + case 'in_progress': + button = ( + + {snapshotState.action === 'delete' + ? i18nTexts.deletingButtonLabel + : i18nTexts.upgradingButtonLabel} + + ); + break; + case 'complete': + button = ( + + {i18nTexts.doneButtonLabel} + + ); + break; + case 'error': + button = ( + + {i18nTexts.failedButtonLabel} + + ); + break; + } + + return ( + <> + {button} + + {showFlyout && ( + setShowFlyout(false)} + /> + )} + + ); +}; diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/fix_snapshots_flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/fix_snapshots_flyout.tsx new file mode 100644 index 0000000000000..7dafab011a69a --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/fix_snapshots_flyout.tsx @@ -0,0 +1,181 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; + +import { + EuiButton, + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiFlyoutHeader, + EuiPortal, + EuiTitle, + EuiText, + EuiCallOut, + EuiSpacer, +} from '@elastic/eui'; +import { SnapshotStatus } from './use_snapshot_state'; +import { ResponseError } from '../../../../lib/api'; + +interface SnapshotState extends SnapshotStatus { + error?: ResponseError; +} +interface Props { + upgradeSnapshot: () => Promise; + deleteSnapshot: () => Promise; + description: string; + closeFlyout: () => void; + snapshotState: SnapshotState; +} + +const i18nTexts = { + upgradeButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.upgradeButtonLabel', + { + defaultMessage: 'Upgrade', + } + ), + retryUpgradeButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.retryUpgradeButtonLabel', + { + defaultMessage: 'Retry upgrade', + } + ), + closeButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.cancelButtonLabel', + { + defaultMessage: 'Close', + } + ), + deleteButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteButtonLabel', + { + defaultMessage: 'Delete', + } + ), + retryDeleteButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.retryDeleteButtonLabel', + { + defaultMessage: 'Retry delete', + } + ), + flyoutTitle: i18n.translate('xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.title', { + defaultMessage: 'Upgrade or delete model snapshot', + }), + deleteSnapshotErrorTitle: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteSnapshotErrorTitle', + { + defaultMessage: 'Error deleting snapshot', + } + ), + upgradeSnapshotErrorTitle: i18n.translate( + 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.upgradeSnapshotErrorTitle', + { + defaultMessage: 'Error upgrading snapshot', + } + ), +}; + +export const FixSnapshotsFlyout = ({ + upgradeSnapshot, + deleteSnapshot, + description, + closeFlyout, + snapshotState, +}: Props) => { + const onUpgradeSnapshot = () => { + upgradeSnapshot(); + closeFlyout(); + }; + + const onDeleteSnapshot = () => { + deleteSnapshot(); + closeFlyout(); + }; + + return ( + + + + +

{i18nTexts.flyoutTitle}

+ + + + {snapshotState.error && ( + <> + + {snapshotState.error.message} + + + + )} + +

{description}

+ + + + + + + {i18nTexts.closeButtonLabel} + + + + + + + {snapshotState.action === 'delete' && snapshotState.error + ? i18nTexts.retryDeleteButtonLabel + : i18nTexts.deleteButtonLabel} + + + + + {snapshotState.action === 'upgrade' && snapshotState.error + ? i18nTexts.retryUpgradeButtonLabel + : i18nTexts.upgradeButtonLabel} + + + + + + + + + ); +}; diff --git a/x-pack/plugins/infra/public/components/header/index.ts b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/index.ts similarity index 83% rename from x-pack/plugins/infra/public/components/header/index.ts rename to x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/index.ts index 37156e1b6cacd..d537c94cf67ae 100644 --- a/x-pack/plugins/infra/public/components/header/index.ts +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/index.ts @@ -5,4 +5,4 @@ * 2.0. */ -export { Header } from './header'; +export { FixMlSnapshotsButton } from './button'; diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/use_snapshot_state.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/use_snapshot_state.tsx new file mode 100644 index 0000000000000..2dd4638c772b3 --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/use_snapshot_state.tsx @@ -0,0 +1,151 @@ +/* + * 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 { useRef, useCallback, useState, useEffect } from 'react'; + +import { ApiService, ResponseError } from '../../../../lib/api'; + +const POLL_INTERVAL_MS = 1000; + +export interface SnapshotStatus { + snapshotId: string; + jobId: string; + status: 'complete' | 'in_progress' | 'error' | 'idle'; + action?: 'upgrade' | 'delete'; +} + +export const useSnapshotState = ({ + jobId, + snapshotId, + api, +}: { + jobId: string; + snapshotId: string; + api: ApiService; +}) => { + const [requestError, setRequestError] = useState(undefined); + const [snapshotState, setSnapshotState] = useState({ + status: 'idle', + jobId, + snapshotId, + }); + + const pollIntervalIdRef = useRef | null>(null); + const isMounted = useRef(false); + + const clearPollInterval = useCallback(() => { + if (pollIntervalIdRef.current) { + clearTimeout(pollIntervalIdRef.current); + pollIntervalIdRef.current = null; + } + }, []); + + const updateSnapshotStatus = useCallback(async () => { + clearPollInterval(); + + const { data, error: updateStatusError } = await api.getMlSnapshotUpgradeStatus({ + jobId, + snapshotId, + }); + + if (updateStatusError) { + setSnapshotState({ + snapshotId, + jobId, + action: 'upgrade', + status: 'error', + }); + setRequestError(updateStatusError); + return; + } + + setSnapshotState(data); + + // Only keep polling if it exists and is in progress. + if (data?.status === 'in_progress') { + pollIntervalIdRef.current = setTimeout(updateSnapshotStatus, POLL_INTERVAL_MS); + } + }, [api, clearPollInterval, jobId, snapshotId]); + + const upgradeSnapshot = useCallback(async () => { + setSnapshotState({ + snapshotId, + jobId, + action: 'upgrade', + status: 'in_progress', + }); + + const { data, error: upgradeError } = await api.upgradeMlSnapshot({ jobId, snapshotId }); + + if (upgradeError) { + setRequestError(upgradeError); + setSnapshotState({ + snapshotId, + jobId, + action: 'upgrade', + status: 'error', + }); + return; + } + + setSnapshotState(data); + updateSnapshotStatus(); + }, [api, jobId, snapshotId, updateSnapshotStatus]); + + const deleteSnapshot = useCallback(async () => { + setSnapshotState({ + snapshotId, + jobId, + action: 'delete', + status: 'in_progress', + }); + + const { error: deleteError } = await api.deleteMlSnapshot({ + snapshotId, + jobId, + }); + + if (deleteError) { + setRequestError(deleteError); + setSnapshotState({ + snapshotId, + jobId, + action: 'delete', + status: 'error', + }); + return; + } + + setSnapshotState({ + snapshotId, + jobId, + action: 'delete', + status: 'complete', + }); + }, [api, jobId, snapshotId]); + + useEffect(() => { + isMounted.current = true; + + return () => { + isMounted.current = false; + + // Clean up on unmount. + clearPollInterval(); + }; + }, [clearPollInterval]); + + return { + snapshotState: { + ...snapshotState, + error: requestError, + }, + upgradeSnapshot, + updateSnapshotStatus, + deleteSnapshot, + }; +}; diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx index 34c1328459cdb..646f253931664 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx @@ -14,11 +14,7 @@ import { EuiButton, EuiLoadingSpinner, EuiText, EuiToolTip } from '@elastic/eui' import { FormattedMessage } from '@kbn/i18n/react'; import { DocLinksStart, HttpSetup } from 'src/core/public'; import { API_BASE_PATH } from '../../../../../../common/constants'; -import { - EnrichedDeprecationInfo, - ReindexStatus, - UIReindexOption, -} from '../../../../../../common/types'; +import { ReindexAction, ReindexStatus, UIReindexOption } from '../../../../../../common/types'; import { LoadingState } from '../../../types'; import { ReindexFlyout } from './flyout'; import { ReindexPollingService, ReindexState } from './polling_service'; @@ -27,7 +23,7 @@ interface ReindexButtonProps { indexName: string; http: HttpSetup; docLinks: DocLinksStart; - reindexBlocker?: EnrichedDeprecationInfo['blockerForReindexing']; + reindexBlocker?: ReindexAction['blockerForReindexing']; } interface ReindexButtonState { diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx index 3e7b931452566..97031dd08ee2a 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx @@ -19,7 +19,7 @@ import { EuiTitle, } from '@elastic/eui'; -import { EnrichedDeprecationInfo, ReindexStatus } from '../../../../../../../common/types'; +import { ReindexAction, ReindexStatus } from '../../../../../../../common/types'; import { ReindexState } from '../polling_service'; import { ChecklistFlyoutStep } from './checklist_step'; @@ -37,7 +37,7 @@ interface ReindexFlyoutProps { startReindex: () => void; cancelReindex: () => void; docLinks: DocLinksStart; - reindexBlocker?: EnrichedDeprecationInfo['blockerForReindexing']; + reindexBlocker?: ReindexAction['blockerForReindexing']; } interface ReindexFlyoutState { diff --git a/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts b/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts index 1c42c249e9d54..c4d9128baa56a 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts +++ b/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts @@ -90,6 +90,38 @@ export class ApiService { return result; } + + public async upgradeMlSnapshot(body: { jobId: string; snapshotId: string }) { + const result = await this.sendRequest({ + path: `${API_BASE_PATH}/ml_snapshots`, + method: 'post', + body, + }); + + return result; + } + + public async deleteMlSnapshot({ jobId, snapshotId }: { jobId: string; snapshotId: string }) { + const result = await this.sendRequest({ + path: `${API_BASE_PATH}/ml_snapshots/${jobId}/${snapshotId}`, + method: 'delete', + }); + + return result; + } + + public async getMlSnapshotUpgradeStatus({ + jobId, + snapshotId, + }: { + jobId: string; + snapshotId: string; + }) { + return await this.sendRequest({ + path: `${API_BASE_PATH}/ml_snapshots/${jobId}/${snapshotId}`, + method: 'get', + }); + } } export const apiService = new ApiService(); diff --git a/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts b/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts index 73e5d33e6c968..8cd9f8b6591e3 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts +++ b/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts @@ -14,7 +14,6 @@ import { breadcrumbService } from './lib/breadcrumbs'; export async function mountManagementSection( coreSetup: CoreSetup, - isCloudEnabled: boolean, params: ManagementAppMountParams, kibanaVersionInfo: KibanaVersionContext, readonly: boolean @@ -31,7 +30,6 @@ export async function mountManagementSection( return renderApp({ element, - isCloudEnabled, http, i18n, docLinks, diff --git a/x-pack/plugins/upgrade_assistant/public/plugin.ts b/x-pack/plugins/upgrade_assistant/public/plugin.ts index 4f5429201f304..4cffd40faf380 100644 --- a/x-pack/plugins/upgrade_assistant/public/plugin.ts +++ b/x-pack/plugins/upgrade_assistant/public/plugin.ts @@ -9,19 +9,17 @@ import SemVer from 'semver/classes/semver'; import { i18n } from '@kbn/i18n'; import { Plugin, CoreSetup, PluginInitializerContext } from 'src/core/public'; -import { CloudSetup } from '../../cloud/public'; import { ManagementSetup } from '../../../../src/plugins/management/public'; import { Config } from '../common/config'; interface Dependencies { - cloud: CloudSetup; management: ManagementSetup; } export class UpgradeAssistantUIPlugin implements Plugin { constructor(private ctx: PluginInitializerContext) {} - setup(coreSetup: CoreSetup, { cloud, management }: Dependencies) { + setup(coreSetup: CoreSetup, { management }: Dependencies) { const { enabled, readonly } = this.ctx.config.get(); if (!enabled) { @@ -29,7 +27,6 @@ export class UpgradeAssistantUIPlugin implements Plugin { } const appRegistrar = management.sections.section.stack; - const isCloudEnabled = Boolean(cloud?.isCloudEnabled); const kibanaVersion = new SemVer(this.ctx.env.packageInfo.version); const kibanaVersionInfo = { @@ -59,7 +56,6 @@ export class UpgradeAssistantUIPlugin implements Plugin { const { mountManagementSection } = await import('./application/mount_management_section'); const unmountAppCallback = await mountManagementSection( coreSetup, - isCloudEnabled, params, kibanaVersionInfo, readonly diff --git a/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json b/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json index 10a5d39f5cece..2b8519d75cb2f 100644 --- a/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json +++ b/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json @@ -19,6 +19,12 @@ "message": "Datafeed [deprecation-datafeed] uses deprecated query options", "url": "https://www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-7.0.html#breaking_70_search_changes", "details": "[Deprecated field [use_dis_max] used, replaced by [Set [tie_breaker] to 1 instead]]" + }, + { + "level": "critical", + "message": "model snapshot [1] for job [deprecation_check_job] needs to be deleted or upgraded", + "url": "", + "details": "details" } ], "node_settings": [ @@ -46,6 +52,33 @@ "details": "[[type: tweet, field: liked]]" } ], + "old_index": [ + { + "level": "critical", + "message": "Index created before 7.0", + "url": + "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html", + "details": "This index was created using version: 6.8.13" + } + ], + "closed_index": [ + { + "level": "critical", + "message": "Index created before 7.0", + "url": "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html", + "details": "This index was created using version: 6.8.13" + } + ], + "deprecated_settings": [ + { + "level": "warning", + "message": "translog retention settings are ignored", + "url": + "https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules-translog.html", + "details": + "translog retention settings [index.translog.retention.size] and [index.translog.retention.age] are ignored because translog is no longer used in peer recoveries with soft-deletes enabled (default in 7.0 or later)" + } + ], ".kibana": [ { "level": "warning", @@ -79,4 +112,4 @@ } ] } -} \ No newline at end of file +} diff --git a/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap b/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap index aefac2b4c63f6..a7890adf1f0eb 100644 --- a/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap +++ b/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap @@ -4,24 +4,39 @@ exports[`getUpgradeAssistantStatus returns the correct shape of data 1`] = ` Object { "cluster": Array [ Object { + "correctiveAction": undefined, "details": "templates using \`template\` field: security_audit_log,watches,.monitoring-alerts,triggered_watches,.ml-anomalies-,.ml-notifications,.ml-meta,.monitoring-kibana,.monitoring-es,.monitoring-logstash,.watch-history-6,.ml-state,security-index-template", "level": "warning", "message": "Template patterns are no longer using \`template\` field, but \`index_patterns\` instead", "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_indices_changes.html#_index_templates_use_literal_index_patterns_literal_instead_of_literal_template_literal", }, Object { + "correctiveAction": undefined, "details": "{.monitoring-logstash=[Coercion of boolean fields], .monitoring-es=[Coercion of boolean fields], .ml-anomalies-=[Coercion of boolean fields], .watch-history-6=[Coercion of boolean fields], .monitoring-kibana=[Coercion of boolean fields], security-index-template=[Coercion of boolean fields]}", "level": "warning", "message": "one or more templates use deprecated mapping settings", "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_indices_changes.html", }, Object { + "correctiveAction": undefined, "details": "[Deprecated field [use_dis_max] used, replaced by [Set [tie_breaker] to 1 instead]]", "level": "warning", "message": "Datafeed [deprecation-datafeed] uses deprecated query options", "url": "https://www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-7.0.html#breaking_70_search_changes", }, Object { + "correctiveAction": Object { + "jobId": "deprecation_check_job", + "snapshotId": "1", + "type": "mlSnapshot", + }, + "details": "details", + "level": "critical", + "message": "model snapshot [1] for job [deprecation_check_job] needs to be deleted or upgraded", + "url": "", + }, + Object { + "correctiveAction": undefined, "details": "This node thing is wrong", "level": "critical", "message": "A node-level issue", @@ -30,63 +45,87 @@ Object { ], "indices": Array [ Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": Array [], + "correctiveAction": undefined, "details": "[[type: doc, field: spins], [type: doc, field: mlockall], [type: doc, field: node_master], [type: doc, field: primary]]", "index": ".monitoring-es-6-2018.11.07", "level": "warning", "message": "Coercion of boolean fields", - "reindex": false, "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields", }, Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": Array [], + "correctiveAction": undefined, "details": "[[type: tweet, field: liked]]", "index": "twitter", "level": "warning", "message": "Coercion of boolean fields", - "reindex": false, "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields", }, Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": Array [], + "correctiveAction": Object { + "blockerForReindexing": undefined, + "type": "reindex", + }, + "details": "This index was created using version: 6.8.13", + "index": "old_index", + "level": "critical", + "message": "Index created before 7.0", + "url": "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html", + }, + Object { + "correctiveAction": Object { + "blockerForReindexing": "index-closed", + "type": "reindex", + }, + "details": "This index was created using version: 6.8.13", + "index": "closed_index", + "level": "critical", + "message": "Index created before 7.0", + "url": "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html", + }, + Object { + "correctiveAction": Object { + "deprecatedSettings": Array [ + "translog.retention.size", + "translog.retention.age", + ], + "type": "indexSetting", + }, + "details": "translog retention settings [index.translog.retention.size] and [index.translog.retention.age] are ignored because translog is no longer used in peer recoveries with soft-deletes enabled (default in 7.0 or later)", + "index": "deprecated_settings", + "level": "warning", + "message": "translog retention settings are ignored", + "url": "https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules-translog.html", + }, + Object { + "correctiveAction": undefined, "details": "[[type: index-pattern, field: notExpandable], [type: config, field: xPackMonitoring:allowReport], [type: config, field: xPackMonitoring:showBanner], [type: dashboard, field: pause], [type: dashboard, field: timeRestore]]", "index": ".kibana", "level": "warning", "message": "Coercion of boolean fields", - "reindex": false, "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields", }, Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": Array [], + "correctiveAction": undefined, "details": "[[type: doc, field: notify], [type: doc, field: created], [type: doc, field: attach_payload], [type: doc, field: met]]", "index": ".watcher-history-6-2018.11.07", "level": "warning", "message": "Coercion of boolean fields", - "reindex": false, "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields", }, Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": Array [], + "correctiveAction": undefined, "details": "[[type: doc, field: snapshot]]", "index": ".monitoring-kibana-6-2018.11.07", "level": "warning", "message": "Coercion of boolean fields", - "reindex": false, "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields", }, Object { - "blockerForReindexing": undefined, - "deprecatedIndexSettings": Array [], + "correctiveAction": undefined, "details": "[[type: tweet, field: liked]]", "index": "twitter2", "level": "warning", "message": "Coercion of boolean fields", - "reindex": false, "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields", }, ], diff --git a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts index d78af9162e924..6477ce738c084 100644 --- a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts +++ b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts @@ -22,7 +22,13 @@ const asApiResponse = (body: T): RequestEvent => describe('getUpgradeAssistantStatus', () => { const resolvedIndices = { - indices: fakeIndexNames.map((f) => ({ name: f, attributes: ['open'] })), + indices: fakeIndexNames.map((indexName) => { + // mark one index as closed to test blockerForReindexing flag + if (indexName === 'closed_index') { + return { name: indexName, attributes: ['closed'] }; + } + return { name: indexName, attributes: ['open'] }; + }), }; // @ts-expect-error mock data is too loosely typed @@ -39,12 +45,12 @@ describe('getUpgradeAssistantStatus', () => { esClient.asCurrentUser.indices.resolveIndex.mockResolvedValue(asApiResponse(resolvedIndices)); it('calls /_migration/deprecations', async () => { - await getUpgradeAssistantStatus(esClient, false); + await getUpgradeAssistantStatus(esClient); expect(esClient.asCurrentUser.migration.deprecations).toHaveBeenCalled(); }); it('returns the correct shape of data', async () => { - const resp = await getUpgradeAssistantStatus(esClient, false); + const resp = await getUpgradeAssistantStatus(esClient); expect(resp).toMatchSnapshot(); }); @@ -59,7 +65,7 @@ describe('getUpgradeAssistantStatus', () => { }) ); - await expect(getUpgradeAssistantStatus(esClient, false)).resolves.toHaveProperty( + await expect(getUpgradeAssistantStatus(esClient)).resolves.toHaveProperty( 'readyForUpgrade', false ); @@ -76,32 +82,9 @@ describe('getUpgradeAssistantStatus', () => { }) ); - await expect(getUpgradeAssistantStatus(esClient, false)).resolves.toHaveProperty( + await expect(getUpgradeAssistantStatus(esClient)).resolves.toHaveProperty( 'readyForUpgrade', true ); }); - - it('filters out security realm deprecation on Cloud', async () => { - esClient.asCurrentUser.migration.deprecations.mockResolvedValue( - // @ts-expect-error not full interface - asApiResponse({ - cluster_settings: [ - { - level: 'critical', - message: 'Security realm settings structure changed', - url: 'https://...', - }, - ], - node_settings: [], - ml_settings: [], - index_settings: {}, - }) - ); - - const result = await getUpgradeAssistantStatus(esClient, true); - - expect(result).toHaveProperty('readyForUpgrade', true); - expect(result).toHaveProperty('cluster', []); - }); }); diff --git a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts index e775190d426df..85cde9069d60f 100644 --- a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts +++ b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts @@ -16,26 +16,12 @@ import { import { esIndicesStateCheck } from './es_indices_state_check'; export async function getUpgradeAssistantStatus( - dataClient: IScopedClusterClient, - isCloudEnabled: boolean + dataClient: IScopedClusterClient ): Promise { const { body: deprecations } = await dataClient.asCurrentUser.migration.deprecations(); - const cluster = getClusterDeprecations(deprecations, isCloudEnabled); - const indices = getCombinedIndexInfos(deprecations); - - const indexNames = indices.map(({ index }) => index!); - - // If we have found deprecation information for index/indices check whether the index is - // open or closed. - if (indexNames.length) { - const indexStates = await esIndicesStateCheck(dataClient.asCurrentUser, indexNames); - - indices.forEach((indexData) => { - indexData.blockerForReindexing = - indexStates[indexData.index!] === 'closed' ? 'index-closed' : undefined; - }); - } + const cluster = getClusterDeprecations(deprecations); + const indices = await getCombinedIndexInfos(deprecations, dataClient); const criticalWarnings = cluster.concat(indices).filter((d) => d.level === 'critical'); @@ -47,38 +33,91 @@ export async function getUpgradeAssistantStatus( } // Reformats the index deprecations to an array of deprecation warnings extended with an index field. -const getCombinedIndexInfos = (deprecations: DeprecationAPIResponse) => - Object.keys(deprecations.index_settings).reduce((indexDeprecations, indexName) => { - return indexDeprecations.concat( - deprecations.index_settings[indexName].map( - (d) => - ({ - ...d, - index: indexName, - reindex: /Index created before/.test(d.message), - deprecatedIndexSettings: getIndexSettingDeprecations(d.message), - } as EnrichedDeprecationInfo) - ) - ); - }, [] as EnrichedDeprecationInfo[]); - -const getClusterDeprecations = (deprecations: DeprecationAPIResponse, isCloudEnabled: boolean) => { - const combined = deprecations.cluster_settings +const getCombinedIndexInfos = async ( + deprecations: DeprecationAPIResponse, + dataClient: IScopedClusterClient +) => { + const indices = Object.keys(deprecations.index_settings).reduce( + (indexDeprecations, indexName) => { + return indexDeprecations.concat( + deprecations.index_settings[indexName].map( + (d) => + ({ + ...d, + index: indexName, + correctiveAction: getCorrectiveAction(d.message), + } as EnrichedDeprecationInfo) + ) + ); + }, + [] as EnrichedDeprecationInfo[] + ); + + const indexNames = indices.map(({ index }) => index!); + + // If we have found deprecation information for index/indices + // check whether the index is open or closed. + if (indexNames.length) { + const indexStates = await esIndicesStateCheck(dataClient.asCurrentUser, indexNames); + + indices.forEach((indexData) => { + if (indexData.correctiveAction?.type === 'reindex') { + indexData.correctiveAction.blockerForReindexing = + indexStates[indexData.index!] === 'closed' ? 'index-closed' : undefined; + } + }); + } + return indices as EnrichedDeprecationInfo[]; +}; + +const getClusterDeprecations = (deprecations: DeprecationAPIResponse) => { + const combinedDeprecations = deprecations.cluster_settings .concat(deprecations.ml_settings) .concat(deprecations.node_settings); - if (isCloudEnabled) { - // In Cloud, this is changed at upgrade time. Filter it out to improve upgrade UX. - return combined.filter((d) => d.message !== 'Security realm settings structure changed'); - } else { - return combined; - } + return combinedDeprecations.map((deprecation) => { + return { + ...deprecation, + correctiveAction: getCorrectiveAction(deprecation.message), + }; + }) as EnrichedDeprecationInfo[]; }; -const getIndexSettingDeprecations = (message: string) => { - const indexDeprecation = Object.values(indexSettingDeprecations).find( +const getCorrectiveAction = (message: string) => { + const indexSettingDeprecation = Object.values(indexSettingDeprecations).find( ({ deprecationMessage }) => deprecationMessage === message ); + const requiresReindexAction = /Index created before/.test(message); + const requiresIndexSettingsAction = Boolean(indexSettingDeprecation); + const requiresMlAction = /model snapshot/.test(message); + + if (requiresReindexAction) { + return { + type: 'reindex', + }; + } + + if (requiresIndexSettingsAction) { + return { + type: 'indexSetting', + deprecatedSettings: indexSettingDeprecation!.settings, + }; + } + + if (requiresMlAction) { + // This logic is brittle, as we are expecting the message to be in a particular format to extract the snapshot ID and job ID + // Implementing https://github.com/elastic/elasticsearch/issues/73089 in ES should address this concern + const regex = /(?<=\[).*?(?=\])/g; + const matches = message.match(regex); + + if (matches?.length === 2) { + return { + type: 'mlSnapshot', + snapshotId: matches[0], + jobId: matches[1], + }; + } + } - return indexDeprecation?.settings || []; + return undefined; }; diff --git a/x-pack/plugins/upgrade_assistant/server/plugin.ts b/x-pack/plugins/upgrade_assistant/server/plugin.ts index ae5975c2bc8a7..50b7330b4d466 100644 --- a/x-pack/plugins/upgrade_assistant/server/plugin.ts +++ b/x-pack/plugins/upgrade_assistant/server/plugin.ts @@ -17,7 +17,6 @@ import { SavedObjectsServiceStart, } from '../../../../src/core/server'; -import { CloudSetup } from '../../cloud/server'; import { PluginSetupContract as FeaturesPluginSetup } from '../../features/server'; import { LicensingPluginSetup } from '../../licensing/server'; @@ -25,12 +24,13 @@ import { CredentialStore, credentialStoreFactory } from './lib/reindexing/creden import { ReindexWorker } from './lib/reindexing'; import { registerUpgradeAssistantUsageCollector } from './lib/telemetry'; import { versionService } from './lib/version'; -import { registerClusterCheckupRoutes } from './routes/cluster_checkup'; -import { registerDeprecationLoggingRoutes } from './routes/deprecation_logging'; -import { registerReindexIndicesRoutes, createReindexWorker } from './routes/reindex_indices'; -import { registerTelemetryRoutes } from './routes/telemetry'; -import { registerUpdateSettingsRoute } from './routes/update_index_settings'; -import { telemetrySavedObjectType, reindexOperationSavedObjectType } from './saved_object_types'; +import { createReindexWorker } from './routes/reindex_indices'; +import { registerRoutes } from './routes/register_routes'; +import { + telemetrySavedObjectType, + reindexOperationSavedObjectType, + mlSavedObjectType, +} from './saved_object_types'; import { RouteDependencies } from './types'; @@ -38,7 +38,6 @@ interface PluginsSetup { usageCollection: UsageCollectionSetup; licensing: LicensingPluginSetup; features: FeaturesPluginSetup; - cloud?: CloudSetup; } export class UpgradeAssistantServerPlugin implements Plugin { @@ -68,12 +67,13 @@ export class UpgradeAssistantServerPlugin implements Plugin { setup( { http, getStartServices, capabilities, savedObjects }: CoreSetup, - { usageCollection, cloud, features, licensing }: PluginsSetup + { usageCollection, features, licensing }: PluginsSetup ) { this.licensing = licensing; savedObjects.registerType(reindexOperationSavedObjectType); savedObjects.registerType(telemetrySavedObjectType); + savedObjects.registerType(mlSavedObjectType); features.registerElasticsearchFeature({ id: 'upgrade_assistant', @@ -91,7 +91,6 @@ export class UpgradeAssistantServerPlugin implements Plugin { const router = http.createRouter(); const dependencies: RouteDependencies = { - cloud, router, credentialStore: this.credentialStore, log: this.logger, @@ -107,12 +106,7 @@ export class UpgradeAssistantServerPlugin implements Plugin { // Initialize version service with current kibana version versionService.setup(this.kibanaVersion); - registerClusterCheckupRoutes(dependencies); - registerDeprecationLoggingRoutes(dependencies); - registerReindexIndicesRoutes(dependencies, this.getWorker.bind(this)); - // Bootstrap the needed routes and the collector for the telemetry - registerTelemetryRoutes(dependencies); - registerUpdateSettingsRoute(dependencies); + registerRoutes(dependencies, this.getWorker.bind(this)); if (usageCollection) { getStartServices().then(([{ savedObjects: savedObjectsService, elasticsearch }]) => { diff --git a/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts b/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts index 3aabae87c06b1..09da52e4b6ffd 100644 --- a/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts +++ b/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts @@ -49,6 +49,7 @@ export const createMockRouter = () => { post: assign('post'), put: assign('put'), patch: assign('patch'), + delete: assign('delete'), }; }; diff --git a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts index a5da4741b10eb..934fdb1c4eb37 100644 --- a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts +++ b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts @@ -32,9 +32,6 @@ describe('cluster checkup API', () => { beforeEach(() => { mockRouter = createMockRouter(); routeDependencies = { - cloud: { - isCloudEnabled: true, - }, router: mockRouter, }; registerClusterCheckupRoutes(routeDependencies); @@ -44,24 +41,6 @@ describe('cluster checkup API', () => { jest.resetAllMocks(); }); - describe('with cloud enabled', () => { - it('is provided to getUpgradeAssistantStatus', async () => { - const spy = jest.spyOn(MigrationApis, 'getUpgradeAssistantStatus'); - - MigrationApis.getUpgradeAssistantStatus.mockResolvedValue({ - cluster: [], - indices: [], - nodes: [], - }); - - await routeDependencies.router.getHandler({ - method: 'get', - pathPattern: '/api/upgrade_assistant/status', - })(routeHandlerContextMock, createRequestMock(), kibanaResponseFactory); - expect(spy.mock.calls[0][1]).toBe(true); - }); - }); - describe('GET /api/upgrade_assistant/reindex/{indexName}.json', () => { it('returns state', async () => { MigrationApis.getUpgradeAssistantStatus.mockResolvedValue({ diff --git a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts index fe5b9baef6c8d..31026be55fa30 100644 --- a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts +++ b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts @@ -12,9 +12,7 @@ import { RouteDependencies } from '../types'; import { reindexActionsFactory } from '../lib/reindexing/reindex_actions'; import { reindexServiceFactory } from '../lib/reindexing'; -export function registerClusterCheckupRoutes({ cloud, router, licensing, log }: RouteDependencies) { - const isCloudEnabled = Boolean(cloud?.isCloudEnabled); - +export function registerClusterCheckupRoutes({ router, licensing, log }: RouteDependencies) { router.get( { path: `${API_BASE_PATH}/status`, @@ -32,7 +30,7 @@ export function registerClusterCheckupRoutes({ cloud, router, licensing, log }: response ) => { try { - const status = await getUpgradeAssistantStatus(client, isCloudEnabled); + const status = await getUpgradeAssistantStatus(client); const asCurrentUser = client.asCurrentUser; const reindexActions = reindexActionsFactory(savedObjectsClient, asCurrentUser); diff --git a/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.test.ts b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.test.ts new file mode 100644 index 0000000000000..741f704adac90 --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.test.ts @@ -0,0 +1,365 @@ +/* + * 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 { kibanaResponseFactory, RequestHandler } from 'src/core/server'; +import { createMockRouter, MockRouter, routeHandlerContextMock } from './__mocks__/routes.mock'; +import { createRequestMock } from './__mocks__/request.mock'; +import { registerMlSnapshotRoutes } from './ml_snapshots'; + +jest.mock('../lib/es_version_precheck', () => ({ + versionCheckHandlerWrapper: (handler: RequestHandler) => handler, +})); + +const JOB_ID = 'job_id'; +const SNAPSHOT_ID = 'snapshot_id'; +const NODE_ID = 'node_id'; + +describe('ML snapshots APIs', () => { + let mockRouter: MockRouter; + let routeDependencies: any; + + beforeEach(() => { + mockRouter = createMockRouter(); + routeDependencies = { + router: mockRouter, + }; + registerMlSnapshotRoutes(routeDependencies); + }); + + afterEach(() => { + jest.resetAllMocks(); + }); + + describe('POST /api/upgrade_assistant/ml_snapshots', () => { + it('returns 200 status and in_progress status', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .upgradeJobSnapshot as jest.Mock).mockResolvedValue({ + body: { + node: NODE_ID, + completed: false, + }, + }); + + const resp = await routeDependencies.router.getHandler({ + method: 'post', + pathPattern: '/api/upgrade_assistant/ml_snapshots', + })( + routeHandlerContextMock, + createRequestMock({ + body: { + snapshotId: SNAPSHOT_ID, + jobId: JOB_ID, + }, + }), + kibanaResponseFactory + ); + + expect(resp.status).toEqual(200); + expect(resp.payload).toEqual({ + jobId: JOB_ID, + nodeId: NODE_ID, + snapshotId: SNAPSHOT_ID, + status: 'in_progress', + }); + }); + + it('returns 200 status and complete status', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .upgradeJobSnapshot as jest.Mock).mockResolvedValue({ + body: { + node: NODE_ID, + completed: true, + }, + }); + + const resp = await routeDependencies.router.getHandler({ + method: 'post', + pathPattern: '/api/upgrade_assistant/ml_snapshots', + })( + routeHandlerContextMock, + createRequestMock({ + body: { + snapshotId: SNAPSHOT_ID, + jobId: JOB_ID, + }, + }), + kibanaResponseFactory + ); + + expect(resp.status).toEqual(200); + expect(resp.payload).toEqual({ + jobId: JOB_ID, + nodeId: NODE_ID, + snapshotId: SNAPSHOT_ID, + status: 'complete', + }); + }); + + it('returns an error if it throws', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .upgradeJobSnapshot as jest.Mock).mockRejectedValue(new Error('scary error!')); + await expect( + routeDependencies.router.getHandler({ + method: 'post', + pathPattern: '/api/upgrade_assistant/ml_snapshots', + })( + routeHandlerContextMock, + createRequestMock({ + body: { + snapshotId: SNAPSHOT_ID, + jobId: JOB_ID, + }, + }), + kibanaResponseFactory + ) + ).rejects.toThrow('scary error!'); + }); + }); + + describe('DELETE /api/upgrade_assistant/ml_snapshots/:jobId/:snapshotId', () => { + it('returns 200 status', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .deleteModelSnapshot as jest.Mock).mockResolvedValue({ + body: { acknowledged: true }, + }); + + const resp = await routeDependencies.router.getHandler({ + method: 'delete', + pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}', + })( + routeHandlerContextMock, + createRequestMock({ + params: { snapshotId: 'snapshot_id1', jobId: 'job_id1' }, + }), + kibanaResponseFactory + ); + + expect(resp.status).toEqual(200); + expect(resp.payload).toEqual({ + acknowledged: true, + }); + }); + + it('returns an error if it throws', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .deleteModelSnapshot as jest.Mock).mockRejectedValue(new Error('scary error!')); + await expect( + routeDependencies.router.getHandler({ + method: 'delete', + pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}', + })( + routeHandlerContextMock, + createRequestMock({ + params: { snapshotId: 'snapshot_id1', jobId: 'job_id1' }, + }), + kibanaResponseFactory + ) + ).rejects.toThrow('scary error!'); + }); + }); + + describe('GET /api/upgrade_assistant/ml_snapshots/:jobId/:snapshotId', () => { + it('returns "idle" status if saved object does not exist', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .getModelSnapshots as jest.Mock).mockResolvedValue({ + body: { + count: 1, + model_snapshots: [ + { + job_id: JOB_ID, + min_version: '6.4.0', + timestamp: 1575402237000, + description: 'State persisted due to job close at 2019-12-03T19:43:57+0000', + snapshot_id: SNAPSHOT_ID, + snapshot_doc_count: 1, + model_size_stats: {}, + latest_record_time_stamp: 1576971072000, + latest_result_time_stamp: 1576965600000, + retain: false, + }, + ], + }, + }); + + const resp = await routeDependencies.router.getHandler({ + method: 'get', + pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}', + })( + routeHandlerContextMock, + createRequestMock({ + params: { + snapshotId: SNAPSHOT_ID, + jobId: JOB_ID, + }, + }), + kibanaResponseFactory + ); + + expect(resp.status).toEqual(200); + expect(resp.payload).toEqual({ + jobId: JOB_ID, + nodeId: undefined, + snapshotId: SNAPSHOT_ID, + status: 'idle', + }); + }); + + it('returns "in_progress" status if snapshot upgrade is in progress', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .getModelSnapshots as jest.Mock).mockResolvedValue({ + body: { + count: 1, + model_snapshots: [ + { + job_id: JOB_ID, + min_version: '6.4.0', + timestamp: 1575402237000, + description: 'State persisted due to job close at 2019-12-03T19:43:57+0000', + snapshot_id: SNAPSHOT_ID, + snapshot_doc_count: 1, + model_size_stats: {}, + latest_record_time_stamp: 1576971072000, + latest_result_time_stamp: 1576965600000, + retain: false, + }, + ], + }, + }); + + (routeHandlerContextMock.core.savedObjects.client.find as jest.Mock).mockResolvedValue({ + total: 1, + saved_objects: [ + { + attributes: { + nodeId: NODE_ID, + jobId: JOB_ID, + snapshotId: SNAPSHOT_ID, + }, + }, + ], + }); + + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.tasks + .list as jest.Mock).mockResolvedValue({ + body: { + nodes: { + [NODE_ID]: { + tasks: { + [`${NODE_ID}:12345`]: { + description: `job-snapshot-upgrade-${JOB_ID}-${SNAPSHOT_ID}`, + }, + }, + }, + }, + }, + }); + + const resp = await routeDependencies.router.getHandler({ + method: 'get', + pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}', + })( + routeHandlerContextMock, + createRequestMock({ + params: { + snapshotId: SNAPSHOT_ID, + jobId: JOB_ID, + }, + }), + kibanaResponseFactory + ); + + expect(resp.status).toEqual(200); + expect(resp.payload).toEqual({ + jobId: JOB_ID, + nodeId: NODE_ID, + snapshotId: SNAPSHOT_ID, + status: 'in_progress', + }); + }); + + it('returns "complete" status if snapshot upgrade has completed', async () => { + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml + .getModelSnapshots as jest.Mock).mockResolvedValue({ + body: { + count: 1, + model_snapshots: [ + { + job_id: JOB_ID, + min_version: '6.4.0', + timestamp: 1575402237000, + description: 'State persisted due to job close at 2019-12-03T19:43:57+0000', + snapshot_id: SNAPSHOT_ID, + snapshot_doc_count: 1, + model_size_stats: {}, + latest_record_time_stamp: 1576971072000, + latest_result_time_stamp: 1576965600000, + retain: false, + }, + ], + }, + }); + + (routeHandlerContextMock.core.savedObjects.client.find as jest.Mock).mockResolvedValue({ + total: 1, + saved_objects: [ + { + attributes: { + nodeId: NODE_ID, + jobId: JOB_ID, + snapshotId: SNAPSHOT_ID, + }, + }, + ], + }); + + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.tasks + .list as jest.Mock).mockResolvedValue({ + body: { + nodes: { + [NODE_ID]: { + tasks: {}, + }, + }, + }, + }); + + (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.migration + .deprecations as jest.Mock).mockResolvedValue({ + body: { + cluster_settings: [], + ml_settings: [], + node_settings: [], + index_settings: {}, + }, + }); + + (routeHandlerContextMock.core.savedObjects.client.delete as jest.Mock).mockResolvedValue({}); + + const resp = await routeDependencies.router.getHandler({ + method: 'get', + pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}', + })( + routeHandlerContextMock, + createRequestMock({ + params: { + snapshotId: SNAPSHOT_ID, + jobId: JOB_ID, + }, + }), + kibanaResponseFactory + ); + + expect(resp.status).toEqual(200); + expect(resp.payload).toEqual({ + jobId: JOB_ID, + nodeId: NODE_ID, + snapshotId: SNAPSHOT_ID, + status: 'complete', + }); + }); + }); +}); diff --git a/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.ts b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.ts new file mode 100644 index 0000000000000..80f5f2eb60e09 --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.ts @@ -0,0 +1,348 @@ +/* + * 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 { ResponseError } from '@elastic/elasticsearch/lib/errors'; +import { schema } from '@kbn/config-schema'; +import { IScopedClusterClient, SavedObjectsClientContract } from 'kibana/server'; +import { API_BASE_PATH } from '../../common/constants'; +import { MlOperation, ML_UPGRADE_OP_TYPE } from '../../common/types'; +import { versionCheckHandlerWrapper } from '../lib/es_version_precheck'; +import { handleEsError } from '../shared_imports'; +import { RouteDependencies } from '../types'; + +const findMlOperation = async ( + savedObjectsClient: SavedObjectsClientContract, + snapshotId: string +) => { + return savedObjectsClient.find({ + type: ML_UPGRADE_OP_TYPE, + search: `"${snapshotId}"`, + searchFields: ['snapshotId'], + }); +}; + +const createMlOperation = async ( + savedObjectsClient: SavedObjectsClientContract, + attributes: MlOperation +) => { + const foundSnapshots = await findMlOperation(savedObjectsClient, attributes.snapshotId); + + if (foundSnapshots?.total > 0) { + throw new Error(`A ML operation is already in progress for snapshot: ${attributes.snapshotId}`); + } + + return savedObjectsClient.create(ML_UPGRADE_OP_TYPE, attributes); +}; + +const deleteMlOperation = (savedObjectsClient: SavedObjectsClientContract, id: string) => { + return savedObjectsClient.delete(ML_UPGRADE_OP_TYPE, id); +}; + +/* + * The tasks API can only tell us if the snapshot upgrade is in progress. + * We cannot rely on it to determine if a snapshot was upgraded successfully. + * If the task does not exist, it can mean one of two things: + * 1. The snapshot was upgraded successfully. + * 2. There was a failure upgrading the snapshot. + * In order to verify it was successful, we need to recheck the deprecation info API + * and verify the deprecation no longer exists. If it still exists, we assume there was a failure. + */ +const verifySnapshotUpgrade = async ( + esClient: IScopedClusterClient, + snapshot: { snapshotId: string; jobId: string } +): Promise<{ + isSuccessful: boolean; + error?: ResponseError; +}> => { + const { snapshotId, jobId } = snapshot; + + try { + const { body: deprecations } = await esClient.asCurrentUser.migration.deprecations(); + + const mlSnapshotDeprecations = deprecations.ml_settings.filter((deprecation) => { + return /model snapshot/.test(deprecation.message); + }); + + // If there are no ML deprecations, we assume the deprecation was resolved successfully + if (typeof mlSnapshotDeprecations === 'undefined' || mlSnapshotDeprecations.length === 0) { + return { + isSuccessful: true, + }; + } + + const isSuccessful = Boolean( + mlSnapshotDeprecations.find((snapshotDeprecation) => { + const regex = /(?<=\[).*?(?=\])/g; + const matches = snapshotDeprecation.message.match(regex); + + if (matches?.length === 2) { + // If there is no matching snapshot, we assume the deprecation was resolved successfully + return matches[0] === snapshotId && matches[1] === jobId ? false : true; + } + + return false; + }) + ); + + return { + isSuccessful, + }; + } catch (e) { + return { + isSuccessful: false, + error: e, + }; + } +}; + +export function registerMlSnapshotRoutes({ router }: RouteDependencies) { + // Upgrade ML model snapshot + router.post( + { + path: `${API_BASE_PATH}/ml_snapshots`, + validate: { + body: schema.object({ + snapshotId: schema.string(), + jobId: schema.string(), + }), + }, + }, + versionCheckHandlerWrapper( + async ( + { + core: { + savedObjects: { client: savedObjectsClient }, + elasticsearch: { client: esClient }, + }, + }, + request, + response + ) => { + try { + const { snapshotId, jobId } = request.body; + + const { body } = await esClient.asCurrentUser.ml.upgradeJobSnapshot({ + job_id: jobId, + snapshot_id: snapshotId, + }); + + const snapshotInfo: MlOperation = { + nodeId: body.node, + snapshotId, + jobId, + }; + + // Store snapshot in saved object if upgrade not complete + if (body.completed !== true) { + await createMlOperation(savedObjectsClient, snapshotInfo); + } + + return response.ok({ + body: { + ...snapshotInfo, + status: body.completed === true ? 'complete' : 'in_progress', + }, + }); + } catch (e) { + return handleEsError({ error: e, response }); + } + } + ) + ); + + // Get the status of the upgrade snapshot task + router.get( + { + path: `${API_BASE_PATH}/ml_snapshots/{jobId}/{snapshotId}`, + validate: { + params: schema.object({ + snapshotId: schema.string(), + jobId: schema.string(), + }), + }, + }, + versionCheckHandlerWrapper( + async ( + { + core: { + savedObjects: { client: savedObjectsClient }, + elasticsearch: { client: esClient }, + }, + }, + request, + response + ) => { + try { + const { snapshotId, jobId } = request.params; + + // Verify snapshot exists + await esClient.asCurrentUser.ml.getModelSnapshots({ + job_id: jobId, + snapshot_id: snapshotId, + }); + + const foundSnapshots = await findMlOperation(savedObjectsClient, snapshotId); + + // If snapshot is *not* found in SO, assume there has not been an upgrade operation started + if (typeof foundSnapshots === 'undefined' || foundSnapshots.total === 0) { + return response.ok({ + body: { + snapshotId, + jobId, + nodeId: undefined, + status: 'idle', + }, + }); + } + + const snapshotOp = foundSnapshots.saved_objects[0]; + const { nodeId } = snapshotOp.attributes; + + // Now that we have the node ID, check the upgrade snapshot task progress + const { body: taskResponse } = await esClient.asCurrentUser.tasks.list({ + nodes: [nodeId], + actions: 'xpack/ml/job/snapshot/upgrade', + detailed: true, // necessary in order to filter if there are more than 1 snapshot upgrades in progress + }); + + const nodeTaskInfo = taskResponse?.nodes && taskResponse!.nodes[nodeId]; + const snapshotInfo: MlOperation = { + ...snapshotOp.attributes, + }; + + if (nodeTaskInfo) { + // Find the correct snapshot task ID based on the task description + const snapshotTaskId = Object.keys(nodeTaskInfo.tasks).find((task) => { + // The description is in the format of "job-snapshot-upgrade--" + const taskDescription = nodeTaskInfo.tasks[task].description; + const taskSnapshotAndJobIds = taskDescription!.replace('job-snapshot-upgrade-', ''); + const taskSnapshotAndJobIdParts = taskSnapshotAndJobIds.split('-'); + const taskSnapshotId = + taskSnapshotAndJobIdParts[taskSnapshotAndJobIdParts.length - 1]; + const taskJobId = taskSnapshotAndJobIdParts.slice(0, 1).join('-'); + + return taskSnapshotId === snapshotId && taskJobId === jobId; + }); + + // If the snapshot task exists, assume the upgrade is in progress + if (snapshotTaskId && nodeTaskInfo.tasks[snapshotTaskId]) { + return response.ok({ + body: { + ...snapshotInfo, + status: 'in_progress', + }, + }); + } else { + // The task ID was not found; verify the deprecation was resolved + const { + isSuccessful: isSnapshotDeprecationResolved, + error: upgradeSnapshotError, + } = await verifySnapshotUpgrade(esClient, { + snapshotId, + jobId, + }); + + // Delete the SO; if it's complete, no need to store it anymore. If there's an error, this will give the user a chance to retry + await deleteMlOperation(savedObjectsClient, snapshotOp.id); + + if (isSnapshotDeprecationResolved) { + return response.ok({ + body: { + ...snapshotInfo, + status: 'complete', + }, + }); + } + + return response.customError({ + statusCode: upgradeSnapshotError ? upgradeSnapshotError.statusCode : 500, + body: { + message: + upgradeSnapshotError?.body?.error?.reason || + 'There was an error upgrading your snapshot. Check the Elasticsearch logs for more details.', + }, + }); + } + } else { + // No tasks found; verify the deprecation was resolved + const { + isSuccessful: isSnapshotDeprecationResolved, + error: upgradeSnapshotError, + } = await verifySnapshotUpgrade(esClient, { + snapshotId, + jobId, + }); + + // Delete the SO; if it's complete, no need to store it anymore. If there's an error, this will give the user a chance to retry + await deleteMlOperation(savedObjectsClient, snapshotOp.id); + + if (isSnapshotDeprecationResolved) { + return response.ok({ + body: { + ...snapshotInfo, + status: 'complete', + }, + }); + } + + return response.customError({ + statusCode: upgradeSnapshotError ? upgradeSnapshotError.statusCode : 500, + body: { + message: + upgradeSnapshotError?.body?.error?.reason || + 'There was an error upgrading your snapshot. Check the Elasticsearch logs for more details.', + }, + }); + } + } catch (e) { + return handleEsError({ error: e, response }); + } + } + ) + ); + + // Delete ML model snapshot + router.delete( + { + path: `${API_BASE_PATH}/ml_snapshots/{jobId}/{snapshotId}`, + validate: { + params: schema.object({ + snapshotId: schema.string(), + jobId: schema.string(), + }), + }, + }, + versionCheckHandlerWrapper( + async ( + { + core: { + elasticsearch: { client }, + }, + }, + request, + response + ) => { + try { + const { snapshotId, jobId } = request.params; + + const { + body: deleteSnapshotResponse, + } = await client.asCurrentUser.ml.deleteModelSnapshot({ + job_id: jobId, + snapshot_id: snapshotId, + }); + + return response.ok({ + body: deleteSnapshotResponse, + }); + } catch (e) { + return handleEsError({ error: e, response }); + } + } + ) + ); +} diff --git a/x-pack/plugins/upgrade_assistant/server/routes/register_routes.ts b/x-pack/plugins/upgrade_assistant/server/routes/register_routes.ts new file mode 100644 index 0000000000000..50cb9257462b9 --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/server/routes/register_routes.ts @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { RouteDependencies } from '../types'; + +import { registerClusterCheckupRoutes } from './cluster_checkup'; +import { registerDeprecationLoggingRoutes } from './deprecation_logging'; +import { registerReindexIndicesRoutes } from './reindex_indices'; +import { registerTelemetryRoutes } from './telemetry'; +import { registerUpdateSettingsRoute } from './update_index_settings'; +import { registerMlSnapshotRoutes } from './ml_snapshots'; +import { ReindexWorker } from '../lib/reindexing'; + +export function registerRoutes(dependencies: RouteDependencies, getWorker: () => ReindexWorker) { + registerClusterCheckupRoutes(dependencies); + registerDeprecationLoggingRoutes(dependencies); + registerReindexIndicesRoutes(dependencies, getWorker); + registerTelemetryRoutes(dependencies); + registerUpdateSettingsRoute(dependencies); + registerMlSnapshotRoutes(dependencies); +} diff --git a/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts b/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts index 91779bd4224b8..e394cac5100f9 100644 --- a/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts +++ b/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts @@ -7,3 +7,4 @@ export { reindexOperationSavedObjectType } from './reindex_operation_saved_object_type'; export { telemetrySavedObjectType } from './telemetry_saved_object_type'; +export { mlSavedObjectType } from './ml_upgrade_operation_saved_object_type'; diff --git a/x-pack/plugins/upgrade_assistant/server/saved_object_types/ml_upgrade_operation_saved_object_type.ts b/x-pack/plugins/upgrade_assistant/server/saved_object_types/ml_upgrade_operation_saved_object_type.ts new file mode 100644 index 0000000000000..6dc70fab1203f --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/server/saved_object_types/ml_upgrade_operation_saved_object_type.ts @@ -0,0 +1,56 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { SavedObjectsType } from 'src/core/server'; + +import { ML_UPGRADE_OP_TYPE } from '../../common/types'; + +export const mlSavedObjectType: SavedObjectsType = { + name: ML_UPGRADE_OP_TYPE, + hidden: false, + namespaceType: 'agnostic', + mappings: { + properties: { + nodeId: { + type: 'text', + fields: { + keyword: { + type: 'keyword', + ignore_above: 256, + }, + }, + }, + snapshotId: { + type: 'text', + fields: { + keyword: { + type: 'keyword', + ignore_above: 256, + }, + }, + }, + jobId: { + type: 'text', + fields: { + keyword: { + type: 'keyword', + ignore_above: 256, + }, + }, + }, + status: { + type: 'text', + fields: { + keyword: { + type: 'keyword', + ignore_above: 256, + }, + }, + }, + }, + }, +}; diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/index.ts b/x-pack/plugins/upgrade_assistant/server/shared_imports.ts similarity index 76% rename from x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/index.ts rename to x-pack/plugins/upgrade_assistant/server/shared_imports.ts index 94203c2b156af..7f55d189457c7 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/index.ts +++ b/x-pack/plugins/upgrade_assistant/server/shared_imports.ts @@ -5,4 +5,4 @@ * 2.0. */ -export { ExperimentalBadge } from './experimental_badge'; +export { handleEsError } from '../../../../src/plugins/es_ui_shared/server'; diff --git a/x-pack/plugins/upgrade_assistant/server/types.ts b/x-pack/plugins/upgrade_assistant/server/types.ts index 80c60e3f310bc..b25b73070e4cf 100644 --- a/x-pack/plugins/upgrade_assistant/server/types.ts +++ b/x-pack/plugins/upgrade_assistant/server/types.ts @@ -6,7 +6,6 @@ */ import { IRouter, Logger, SavedObjectsServiceStart } from 'src/core/server'; -import { CloudSetup } from '../../cloud/server'; import { CredentialStore } from './lib/reindexing/credential_store'; import { LicensingPluginSetup } from '../../licensing/server'; @@ -16,5 +15,4 @@ export interface RouteDependencies { log: Logger; getSavedObjectsService: () => SavedObjectsServiceStart; licensing: LicensingPluginSetup; - cloud?: CloudSetup; } diff --git a/x-pack/plugins/upgrade_assistant/tsconfig.json b/x-pack/plugins/upgrade_assistant/tsconfig.json index 6303b06c0d899..750bea75c6656 100644 --- a/x-pack/plugins/upgrade_assistant/tsconfig.json +++ b/x-pack/plugins/upgrade_assistant/tsconfig.json @@ -20,8 +20,8 @@ { "path": "../../../src/core/tsconfig.json" }, { "path": "../../../src/plugins/management/tsconfig.json" }, { "path": "../../../src/plugins/usage_collection/tsconfig.json" }, - { "path": "../cloud/tsconfig.json" }, { "path": "../features/tsconfig.json" }, { "path": "../licensing/tsconfig.json" }, + { "path": "../../../src/plugins/es_ui_shared/tsconfig.json" }, ] } diff --git a/x-pack/plugins/uptime/kibana.json b/x-pack/plugins/uptime/kibana.json index 625406c0cb97b..5aa3c80610d03 100644 --- a/x-pack/plugins/uptime/kibana.json +++ b/x-pack/plugins/uptime/kibana.json @@ -15,7 +15,7 @@ "server": true, "ui": true, "version": "8.0.0", - "requiredBundles": ["observability", "kibanaReact", "kibanaUtils", "home", "data", "ml"], + "requiredBundles": ["observability", "kibanaReact", "kibanaUtils", "home", "data", "ml", "fleet"], "owner": { "name": "Uptime", "githubTeam": "uptime" diff --git a/x-pack/plugins/uptime/public/apps/plugin.ts b/x-pack/plugins/uptime/public/apps/plugin.ts index 63d32948388d7..869ecda3d29cf 100644 --- a/x-pack/plugins/uptime/public/apps/plugin.ts +++ b/x-pack/plugins/uptime/public/apps/plugin.ts @@ -42,6 +42,7 @@ import { LazySyntheticsPolicyCreateExtension, LazySyntheticsPolicyEditExtension, } from '../components/fleet_package'; +import { LazySyntheticsCustomAssetsExtension } from '../components/fleet_package/lazy_synthetics_custom_assets_extension'; export interface ClientPluginsSetup { data: DataPublicPluginSetup; @@ -196,13 +197,19 @@ export class UptimePlugin registerExtension({ package: 'synthetics', view: 'package-policy-create', - component: LazySyntheticsPolicyCreateExtension, + Component: LazySyntheticsPolicyCreateExtension, }); registerExtension({ package: 'synthetics', view: 'package-policy-edit', - component: LazySyntheticsPolicyEditExtension, + Component: LazySyntheticsPolicyEditExtension, + }); + + registerExtension({ + package: 'synthetics', + view: 'package-detail-assets', + Component: LazySyntheticsCustomAssetsExtension, }); } } diff --git a/x-pack/plugins/uptime/public/components/common/higher_order/__snapshots__/responsive_wrapper.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/higher_order/__snapshots__/responsive_wrapper.test.tsx.snap deleted file mode 100644 index 65b6d7cc39e55..0000000000000 --- a/x-pack/plugins/uptime/public/components/common/higher_order/__snapshots__/responsive_wrapper.test.tsx.snap +++ /dev/null @@ -1,221 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ResponsiveWrapper HOC is not responsive when prop is false 1`] = ` - - - -`; - -exports[`ResponsiveWrapper HOC renders a responsive wrapper 1`] = ` - - - -`; diff --git a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx index 5a3dca171b206..db254fcb56081 100644 --- a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { shallowWithIntl } from '@kbn/test/jest'; +import { render } from '../../../lib/helper/rtl_helpers'; import { withResponsiveWrapper } from './responsive_wrapper'; interface Prop { @@ -20,12 +20,12 @@ describe('ResponsiveWrapper HOC', () => { }); it('renders a responsive wrapper', () => { - const component = shallowWithIntl(); - expect(component).toMatchSnapshot(); + const { getByTestId } = render(); + expect(getByTestId('uptimeWithResponsiveWrapper--wrapper')).toBeInTheDocument(); }); it('is not responsive when prop is false', () => { - const component = shallowWithIntl(); - expect(component).toMatchSnapshot(); + const { getByTestId } = render(); + expect(getByTestId('uptimeWithResponsiveWrapper--panel')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx index 6802682db5f56..0e33cc3e38f03 100644 --- a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx +++ b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx @@ -32,11 +32,11 @@ export const withResponsiveWrapper =

( Component: FC

): FC => ({ isResponsive, ...rest }: ResponsiveWrapperProps) => isResponsive ? ( - + ) : ( - + ); diff --git a/x-pack/plugins/uptime/public/components/fleet_package/lazy_synthetics_custom_assets_extension.tsx b/x-pack/plugins/uptime/public/components/fleet_package/lazy_synthetics_custom_assets_extension.tsx new file mode 100644 index 0000000000000..c2fe52d9004df --- /dev/null +++ b/x-pack/plugins/uptime/public/components/fleet_package/lazy_synthetics_custom_assets_extension.tsx @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { lazy } from 'react'; + +export const LazySyntheticsCustomAssetsExtension = lazy(async () => { + const { SyntheticsCustomAssetsExtension } = await import('./synthetics_custom_assets_extension'); + + return { + default: SyntheticsCustomAssetsExtension, + }; +}); diff --git a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_custom_assets_extension.tsx b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_custom_assets_extension.tsx new file mode 100644 index 0000000000000..7eda6efa20530 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_custom_assets_extension.tsx @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; + +import { + PackageAssetsComponent, + CustomAssetsAccordionProps, + CustomAssetsAccordion, +} from '../../../../fleet/public'; +import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { ClientPluginsStart } from '../../apps/plugin'; +import { PLUGIN } from '../../../common/constants/plugin'; + +export const SyntheticsCustomAssetsExtension: PackageAssetsComponent = () => { + const { http } = useKibana().services; + const views: CustomAssetsAccordionProps['views'] = [ + { + name: i18n.translate('xpack.uptime.fleetIntegration.assets.name', { + defaultMessage: 'Monitors', + }), + url: http?.basePath.prepend(`/app/${PLUGIN.ID}`) ?? '', + description: i18n.translate('xpack.uptime.fleetIntegration.assets.description', { + defaultMessage: 'View monitors in Uptime', + }), + }, + ]; + + return ; +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx index 86602a064b9d4..9ce5a509bdd52 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx @@ -34,7 +34,7 @@ export const MonitorDurationComponent = ({ hasMLJob, }: DurationChartProps) => { return ( - + diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx index 8cb1c49cbd974..2112af0653669 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx @@ -89,17 +89,9 @@ export const MonitorPageTitle: React.FC = () => { return ( <> - - - -

{nameOrId}

- - - - - - - + +

{nameOrId}

+ @@ -126,6 +118,7 @@ export const MonitorPageTitle: React.FC = () => { )} + ); }; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx index b9ad176b8ed76..06c7ab7bff843 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx @@ -251,7 +251,7 @@ export const PingList = () => { }; return ( - + { + describe('renderMonitorType', () => { + it('handles http type', () => { + expect(renderMonitorType('http')).toBe('HTTP'); + }); + + it('handles tcp type', () => { + expect(renderMonitorType('tcp')).toBe('TCP'); + }); + + it('handles icmp type', () => { + expect(renderMonitorType('icmp')).toBe('ICMP'); + }); + + it('handles browser type', () => { + expect(renderMonitorType('browser')).toBe('Browser'); + }); + + it('returns empty string for `undefined`', () => { + expect(renderMonitorType(undefined)).toBe(''); + }); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx index 18049a9de5c5c..e8374d3792bfe 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx @@ -15,6 +15,7 @@ import { EuiDescriptionListDescription, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { MonitorSSLCertificate } from './ssl_certificate'; import * as labels from '../translations'; import { StatusByLocations } from './status_by_location'; @@ -40,6 +41,29 @@ export const MonListDescription = styled(EuiDescriptionListDescription)` } `; +export const renderMonitorType = (type: string | undefined) => { + switch (type) { + case 'http': + return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.http', { + defaultMessage: 'HTTP', + }); + case 'tcp': + return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.tcp', { + defaultMessage: 'TCP', + }); + case 'icmp': + return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.icmp', { + defaultMessage: 'ICMP', + }); + case 'browser': + return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.browser', { + defaultMessage: 'Browser', + }); + default: + return ''; + } +}; + export const MonitorStatusBar: React.FC = () => { const { monitorId, monitorStatus, monitorLocations = {} } = useStatusBar(); @@ -77,7 +101,7 @@ export const MonitorStatusBar: React.FC = () => { <> {labels.typeLabel} - {monitorStatus.monitor.type} + {renderMonitorType(monitorStatus?.monitor?.type)} )} diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx index 517bfbe594f08..5b20e83f0ec85 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx @@ -49,7 +49,7 @@ export const MonitorStatusDetailsComponent = ({ monitorLocations }: MonitorStatu }, []); return ( - + diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx index df8f5dff59dc2..610107f406306 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, EuiLoadingSpinner } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingSpinner } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useEffect, useCallback, useMemo } from 'react'; import { useSelector, useDispatch } from 'react-redux'; @@ -104,7 +104,7 @@ export const StepDetailContainer: React.FC = ({ checkGroup, stepIndex }) : [], }} > - + <> {(!journey || journey.loading) && ( @@ -124,7 +124,7 @@ export const StepDetailContainer: React.FC = ({ checkGroup, stepIndex }) {journey && activeStep && !journey.loading && ( )} - + ); }; diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/__snapshots__/data_or_index_missing.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/empty_state/__snapshots__/data_or_index_missing.test.tsx.snap deleted file mode 100644 index 45e40f71c0fde..0000000000000 --- a/x-pack/plugins/uptime/public/components/overview/empty_state/__snapshots__/data_or_index_missing.test.tsx.snap +++ /dev/null @@ -1,92 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DataOrIndexMissing component renders headingMessage 1`] = ` - - - - - - - - - - - - - - - - - } - body={ - -

- -

-

- -

- - } - iconType="logoUptime" - title={ - -

- - heartbeat-* - , - } - } - /> -

- - } - /> - - - -`; diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx index c6898971a693e..caff055ce987c 100644 --- a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx @@ -6,8 +6,9 @@ */ import React from 'react'; -import { shallowWithIntl } from '@kbn/test/jest'; +import { screen } from '@testing-library/react'; import { FormattedMessage } from '@kbn/i18n/react'; +import { render } from '../../../lib/helper/rtl_helpers'; import { DataOrIndexMissing } from './data_or_index_missing'; describe('DataOrIndexMissing component', () => { @@ -19,7 +20,7 @@ describe('DataOrIndexMissing component', () => { values={{ indexName: heartbeat-* }} /> ); - const component = shallowWithIntl(); - expect(component).toMatchSnapshot(); + render(); + expect(screen.getByText(/heartbeat-*/)).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx index 7f9839ff94dbe..44e55de990bbf 100644 --- a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx +++ b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx @@ -30,7 +30,7 @@ export const DataOrIndexMissing = ({ headingMessage, settings }: DataMissingProp - + { return ( - +
- + +
+
@@ -1552,28 +1561,37 @@ exports[`MonitorList component renders the monitor list 1`] = ` class="euiPopover__anchor" >
- + +
+

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.test.tsx new file mode 100644 index 0000000000000..aa257177970a1 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.test.tsx @@ -0,0 +1,44 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { DefineAlertConnectors } from './define_connectors'; +import { screen } from '@testing-library/react'; +import { fireEvent } from '@testing-library/dom'; +import { ENABLE_STATUS_ALERT } from './translations'; +import { render } from '../../../../lib/helper/rtl_helpers'; + +describe('EnableAlertComponent', () => { + it('does not showHelpText or render popover when showHelpText and renderPopOver are false', () => { + render(); + expect(screen.getByTestId('uptimeDisplayDefineConnector')).toBeInTheDocument(); + expect(screen.queryByText(ENABLE_STATUS_ALERT)).not.toBeInTheDocument(); + expect(screen.queryByText(/Define a default connector/)).not.toBeInTheDocument(); + + fireEvent.click(screen.getByTestId('uptimeDisplayDefineConnector')); + + expect(screen.queryByTestId('uptimeSettingsDefineConnector')).not.toBeInTheDocument(); + }); + + it('shows label when showLabel is true', () => { + render(); + expect(screen.getByText(ENABLE_STATUS_ALERT)).toBeInTheDocument(); + }); + + it('shows helpText when showHelpText is true', () => { + render(); + expect(screen.getByText(/Define a default connector/)).toBeInTheDocument(); + }); + + it('renders popover on click when showPopover is true', () => { + render(); + + fireEvent.click(screen.getByTestId('uptimeDisplayDefineConnector')); + + expect(screen.getByTestId('uptimeSettingsDefineConnector')).toBeInTheDocument(); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx index 956e18f3d7cc3..dcc70c16e920b 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx @@ -6,41 +6,72 @@ */ import React, { useState } from 'react'; -import { EuiPopover, EuiSwitch, EuiText } from '@elastic/eui'; -import { useRouteMatch } from 'react-router-dom'; -import { i18n } from '@kbn/i18n'; +import { EuiSwitch, EuiPopover, EuiText, EuiFormRow } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { ReactRouterEuiLink } from '../../../common/react_router_helpers'; -import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../../common/constants'; +import { SETTINGS_ROUTE } from '../../../../../common/constants'; import { ENABLE_STATUS_ALERT } from './translations'; -const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.defineConnector', { - defaultMessage: 'Define a default connector', -}); +interface Props { + showPopover?: boolean; + showHelpText?: boolean; + showLabel?: boolean; +} -export const DefineAlertConnectors = () => { +export const DefineAlertConnectors = ({ + showPopover = false, + showHelpText = false, + showLabel = false, +}: Props) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const onButtonClick = () => setIsPopoverOpen((val) => !val); const closePopover = () => setIsPopoverOpen(false); - const isMonitorPage = useRouteMatch(MONITOR_ROUTE); - return ( + <> + + + + ), + }} + /> + ) : undefined + } + > + {}} + checked={false} + compressed={true} + disabled={!showPopover} + data-test-subj={'uptimeDisplayDefineConnector'} + /> + + } - isOpen={isPopoverOpen} + isOpen={showPopover ? isPopoverOpen : false} closePopover={closePopover} > @@ -48,10 +79,13 @@ export const DefineAlertConnectors = () => { to={SETTINGS_ROUTE + '?focusConnectorField=true'} data-test-subj={'uptimeSettingsLink'} > - {SETTINGS_LINK_TEXT} + {' '} diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.test.tsx index 427985839ba89..53ba1b8ed57eb 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.test.tsx @@ -18,7 +18,7 @@ import { AlertsResult } from '../../../../state/actions/types'; describe('EnableAlertComponent', () => { it('it displays define connectors when there is none', () => { - const { getByTestId, getByLabelText, getByText } = render( + const { getByTestId, getByLabelText, getByText, getByRole } = render( { fireEvent.click(getByTestId('uptimeDisplayDefineConnector')); - expect(getByTestId('uptimeSettingsLink')).toHaveAttribute( + expect(getByRole('link', { name: 'Define a default connector' })).toHaveAttribute( 'href', '/settings?focusConnectorField=true' ); - expect(getByText('to receive status alerts.')); + expect(getByText(/Define a default connector/)); + expect(getByText(/to receive status alerts./)); }); it('does not displays define connectors when there is connector', () => { diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx index f0f7c4d91c4f5..9db6c3b4b0acb 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx @@ -125,6 +125,10 @@ export const EnableMonitorAlert = ({ monitorId, selectedMonitor }: Props) => {
) : ( - + ); }; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts index eadf8febebcf2..ce6708abf9ade 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts @@ -8,11 +8,11 @@ import { i18n } from '@kbn/i18n'; export const ENABLE_STATUS_ALERT = i18n.translate('xpack.uptime.monitorList.enableDownAlert', { - defaultMessage: 'Enable rule', + defaultMessage: 'Enable status alerts', }); export const DISABLE_STATUS_ALERT = i18n.translate('xpack.uptime.monitorList.disableDownAlert', { - defaultMessage: 'Disable rule', + defaultMessage: 'Disable status alerts', }); export const EXPAND_TAGS_LABEL = i18n.translate('xpack.uptime.monitorList.tags.expand', { diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index 9a0054f77252e..0b707588acfb5 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -173,7 +173,7 @@ export const MonitorListComponent: ({ ]; return ( - + ( - + diff --git a/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx b/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx index 47b89e82dc5c7..0da6f034e53bb 100644 --- a/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx +++ b/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx @@ -5,13 +5,7 @@ * 2.0. */ -import { - EuiBasicTable, - EuiBasicTableColumn, - EuiButtonIcon, - EuiPanel, - EuiTitle, -} from '@elastic/eui'; +import { EuiBasicTable, EuiBasicTableColumn, EuiButtonIcon, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { MouseEvent } from 'react'; import styled from 'styled-components'; @@ -147,7 +141,7 @@ export const StepsList = ({ data, error, loading }: Props) => { }; return ( - + <>

{statusMessage( @@ -176,6 +170,6 @@ export const StepsList = ({ data, error, loading }: Props) => { tableLayout={'auto'} rowProps={getRowProps} /> - + ); }; diff --git a/x-pack/plugins/uptime/public/pages/settings.tsx b/x-pack/plugins/uptime/public/pages/settings.tsx index 5f2699240425a..88bae5536c05f 100644 --- a/x-pack/plugins/uptime/public/pages/settings.tsx +++ b/x-pack/plugins/uptime/public/pages/settings.tsx @@ -13,7 +13,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiForm, - EuiPanel, EuiSpacer, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -148,7 +147,7 @@ export const SettingsPage: React.FC = () => { ); return ( - + <> {cannotEditNotice} @@ -213,6 +212,6 @@ export const SettingsPage: React.FC = () => {

- + ); }; diff --git a/x-pack/test/accessibility/apps/lens.ts b/x-pack/test/accessibility/apps/lens.ts index 4157f31525acf..fce15b34a77e4 100644 --- a/x-pack/test/accessibility/apps/lens.ts +++ b/x-pack/test/accessibility/apps/lens.ts @@ -142,8 +142,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.configureDimension( { dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', - operation: 'terms', - field: 'ip', + operation: 'date_histogram', + field: '@timestamp', }, 1 ); diff --git a/x-pack/test/api_integration/apis/management/index_management/indices.js b/x-pack/test/api_integration/apis/management/index_management/indices.js index d0e17476530b7..25b1ef97d3087 100644 --- a/x-pack/test/api_integration/apis/management/index_management/indices.js +++ b/x-pack/test/api_integration/apis/management/index_management/indices.js @@ -177,12 +177,19 @@ export default function ({ getService }) { }); }); - // FLAKY: https://github.com/elastic/kibana/issues/64473 - describe.skip('list', function () { + describe('list', function () { this.tags(['skipCloud']); it('should list all the indices with the expected properties and data enrichers', async function () { - const { body } = await list().expect(200); + // Create an index that we can assert against + await createIndex('test_index'); + + // Verify indices request + const { body: indices } = await list().expect(200); + + // Find the "test_index" created to verify expected keys + const indexCreated = indices.find((index) => index.name === 'test_index'); + const expectedKeys = [ 'health', 'hidden', @@ -203,7 +210,8 @@ export default function ({ getService }) { // We need to sort the keys before comparing then, because race conditions // can cause enrichers to register in non-deterministic order. const sortedExpectedKeys = expectedKeys.sort(); - const sortedReceivedKeys = Object.keys(body[0]).sort(); + const sortedReceivedKeys = Object.keys(indexCreated).sort(); + expect(sortedReceivedKeys).to.eql(sortedExpectedKeys); }); }); diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts index 8d158cc1c4f70..941b71fb925db 100644 --- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts +++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts @@ -7,7 +7,11 @@ import expect from '@kbn/expect'; import { FtrProviderContext } from '../../../../../common/ftr_provider_context'; -import { CASES_URL } from '../../../../../../plugins/cases/common/constants'; +import { + CASES_URL, + SECURITY_SOLUTION_OWNER, +} from '../../../../../../plugins/cases/common/constants'; +import { getCase } from '../../../../common/lib/utils'; // eslint-disable-next-line import/no-default-export export default function createGetTests({ getService }: FtrProviderContext) { @@ -107,5 +111,24 @@ export default function createGetTests({ getService }: FtrProviderContext) { }); }); }); + + describe('7.13.2', () => { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); + }); + + it('adds the owner field', async () => { + const theCase = await getCase({ + supertest, + caseId: 'e49ad6e0-cf9d-11eb-a603-13e7747d215c', + }); + + expect(theCase.owner).to.be(SECURITY_SOLUTION_OWNER); + }); + }); }); } diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts index 80432f15f70a9..6b370117c447a 100644 --- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts +++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts @@ -500,6 +500,26 @@ export default ({ getService }: FtrProviderContext): void => { expectedHttpCode: 400, }); }); + + it('400s if the title is too long', async () => { + const longTitle = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla enim, rutrum sit amet euismod venenatis, blandit et massa. Nulla id consectetur enim.'; + + const postedCase = await createCase(supertest, postCaseReq); + await updateCase({ + supertest, + params: { + cases: [ + { + id: postedCase.id, + version: postedCase.version, + title: longTitle, + }, + ], + }, + expectedHttpCode: 400, + }); + }); }); describe('alerts', () => { diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts index e8337fa9db502..2fe5a4c0165c0 100644 --- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts +++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts @@ -238,6 +238,13 @@ export default ({ getService }: FtrProviderContext): void => { .send({ ...req, status: CaseStatuses.open }) .expect(400); }); + + it('400s if the title is too long', async () => { + const longTitle = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla enim, rutrum sit amet euismod venenatis, blandit et massa. Nulla id consectetur enim.'; + + await createCase(supertest, getPostCaseRequest({ title: longTitle }), 400); + }); }); describe('rbac', () => { diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts index 357373e7805ee..67e30987fabac 100644 --- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts +++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts @@ -7,7 +7,11 @@ import expect from '@kbn/expect'; import { FtrProviderContext } from '../../../../../common/ftr_provider_context'; -import { CASES_URL } from '../../../../../../plugins/cases/common/constants'; +import { + CASES_URL, + SECURITY_SOLUTION_OWNER, +} from '../../../../../../plugins/cases/common/constants'; +import { getComment } from '../../../../common/lib/utils'; // eslint-disable-next-line import/no-default-export export default function createGetTests({ getService }: FtrProviderContext) { @@ -15,23 +19,45 @@ export default function createGetTests({ getService }: FtrProviderContext) { const esArchiver = getService('esArchiver'); describe('migrations', () => { - before(async () => { - await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); - }); + describe('7.11.0', () => { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + }); + + it('7.11.0 migrates cases comments', async () => { + const { body: comment } = await supertest + .get( + `${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/comments/da677740-1ac7-11eb-b5a3-25ee88122510` + ) + .set('kbn-xsrf', 'true') + .send(); - after(async () => { - await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + expect(comment.type).to.eql('user'); + }); }); - it('7.11.0 migrates cases comments', async () => { - const { body: comment } = await supertest - .get( - `${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/comments/da677740-1ac7-11eb-b5a3-25ee88122510` - ) - .set('kbn-xsrf', 'true') - .send(); + describe('7.13.2', () => { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); + }); + + it('adds the owner field', async () => { + const comment = await getComment({ + supertest, + caseId: 'e49ad6e0-cf9d-11eb-a603-13e7747d215c', + commentId: 'ee59cdd0-cf9d-11eb-a603-13e7747d215c', + }); - expect(comment.type).to.eql('user'); + expect(comment.owner).to.be(SECURITY_SOLUTION_OWNER); + }); }); }); } diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts index c6d892e3435f1..67eb23a43f397 100644 --- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts +++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts @@ -7,37 +7,73 @@ import expect from '@kbn/expect'; import { FtrProviderContext } from '../../../../../common/ftr_provider_context'; -import { CASE_CONFIGURE_URL } from '../../../../../../plugins/cases/common/constants'; +import { + CASE_CONFIGURE_URL, + SECURITY_SOLUTION_OWNER, +} from '../../../../../../plugins/cases/common/constants'; +import { getConfiguration, getConnectorMappingsFromES } from '../../../../common/lib/utils'; // eslint-disable-next-line import/no-default-export -export default function createGetTests({ getService }: FtrProviderContext) { +export default function ({ getService }: FtrProviderContext) { const supertest = getService('supertest'); const esArchiver = getService('esArchiver'); + const es = getService('es'); describe('migrations', () => { - before(async () => { - await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); - }); + describe('7.10.0', () => { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + }); - after(async () => { - await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + it('7.10.0 migrates configure cases connector', async () => { + const { body } = await supertest + .get(`${CASE_CONFIGURE_URL}`) + .set('kbn-xsrf', 'true') + .send() + .expect(200); + + expect(body.length).to.be(1); + expect(body[0]).key('connector'); + expect(body[0]).not.key('connector_id'); + expect(body[0].connector).to.eql({ + id: 'connector-1', + name: 'Connector 1', + type: '.none', + fields: null, + }); + }); }); - it('7.10.0 migrates configure cases connector', async () => { - const { body } = await supertest - .get(`${CASE_CONFIGURE_URL}`) - .set('kbn-xsrf', 'true') - .send() - .expect(200); - - expect(body.length).to.be(1); - expect(body[0]).key('connector'); - expect(body[0]).not.key('connector_id'); - expect(body[0].connector).to.eql({ - id: 'connector-1', - name: 'Connector 1', - type: '.none', - fields: null, + describe('7.13.2', () => { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); + }); + + it('adds the owner field', async () => { + const configuration = await getConfiguration({ + supertest, + query: { owner: SECURITY_SOLUTION_OWNER }, + }); + + expect(configuration[0].owner).to.be(SECURITY_SOLUTION_OWNER); + }); + + it('adds the owner field to the connector mapping', async () => { + // We don't get the owner field back from the mappings when we retrieve the configuration so the only way to + // check that the migration worked is by checking the saved object stored in Elasticsearch directly + const mappings = await getConnectorMappingsFromES({ es }); + expect(mappings.body.hits.hits.length).to.be(1); + expect(mappings.body.hits.hits[0]._source?.['cases-connector-mappings'].owner).to.eql( + SECURITY_SOLUTION_OWNER + ); }); }); }); diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts index 17d93e76bbdda..122eeee411431 100644 --- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts +++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts @@ -12,6 +12,7 @@ export default ({ loadTestFile }: FtrProviderContext): void => { describe('Common migrations', function () { // Migrations loadTestFile(require.resolve('./cases/migrations')); + loadTestFile(require.resolve('./comments/migrations')); loadTestFile(require.resolve('./configure/migrations')); loadTestFile(require.resolve('./user_actions/migrations')); }); diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts index 030441028c502..b4c2dca47bf5f 100644 --- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts +++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts @@ -7,7 +7,11 @@ import expect from '@kbn/expect'; import { FtrProviderContext } from '../../../../../common/ftr_provider_context'; -import { CASES_URL } from '../../../../../../plugins/cases/common/constants'; +import { + CASES_URL, + SECURITY_SOLUTION_OWNER, +} from '../../../../../../plugins/cases/common/constants'; +import { getCaseUserActions } from '../../../../common/lib/utils'; // eslint-disable-next-line import/no-default-export export default function createGetTests({ getService }: FtrProviderContext) { @@ -15,38 +19,62 @@ export default function createGetTests({ getService }: FtrProviderContext) { const esArchiver = getService('esArchiver'); describe('migrations', () => { - before(async () => { - await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); - }); + describe('7.10.0', () => { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + }); + + it('7.10.0 migrates user actions connector', async () => { + const { body } = await supertest + .get(`${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/user_actions`) + .set('kbn-xsrf', 'true') + .send() + .expect(200); + + const connectorUserAction = body[1]; + const oldValue = JSON.parse(connectorUserAction.old_value); + const newValue = JSON.parse(connectorUserAction.new_value); - after(async () => { - await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0'); + expect(connectorUserAction.action_field.length).eql(1); + expect(connectorUserAction.action_field[0]).eql('connector'); + expect(oldValue).to.eql({ + id: 'c1900ac0-017f-11eb-93f8-d161651bf509', + name: 'none', + type: '.none', + fields: null, + }); + expect(newValue).to.eql({ + id: 'b1900ac0-017f-11eb-93f8-d161651bf509', + name: 'none', + type: '.none', + fields: null, + }); + }); }); - it('7.10.0 migrates user actions connector', async () => { - const { body } = await supertest - .get(`${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/user_actions`) - .set('kbn-xsrf', 'true') - .send() - .expect(200); - - const connectorUserAction = body[1]; - const oldValue = JSON.parse(connectorUserAction.old_value); - const newValue = JSON.parse(connectorUserAction.new_value); - - expect(connectorUserAction.action_field.length).eql(1); - expect(connectorUserAction.action_field[0]).eql('connector'); - expect(oldValue).to.eql({ - id: 'c1900ac0-017f-11eb-93f8-d161651bf509', - name: 'none', - type: '.none', - fields: null, + describe('7.13.2', () => { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2'); }); - expect(newValue).to.eql({ - id: 'b1900ac0-017f-11eb-93f8-d161651bf509', - name: 'none', - type: '.none', - fields: null, + + it('adds the owner field', async () => { + const userActions = await getCaseUserActions({ + supertest, + caseID: 'e49ad6e0-cf9d-11eb-a603-13e7747d215c', + }); + + expect(userActions.length).to.not.be(0); + for (const action of userActions) { + expect(action.owner).to.be(SECURITY_SOLUTION_OWNER); + } }); }); }); diff --git a/x-pack/test/examples/config.ts b/x-pack/test/examples/config.ts index 491c23a33a3ef..606f97f9c3de7 100644 --- a/x-pack/test/examples/config.ts +++ b/x-pack/test/examples/config.ts @@ -33,7 +33,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) { reportName: 'X-Pack Example plugin functional tests', }, - testFiles: [require.resolve('./search_examples')], + testFiles: [require.resolve('./search_examples'), require.resolve('./embedded_lens')], kbnTestServer: { ...xpackFunctionalConfig.get('kbnTestServer'), diff --git a/x-pack/test/examples/embedded_lens/embedded_example.ts b/x-pack/test/examples/embedded_lens/embedded_example.ts new file mode 100644 index 0000000000000..3a0891079f24e --- /dev/null +++ b/x-pack/test/examples/embedded_lens/embedded_example.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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import expect from '@kbn/expect'; +import { FtrProviderContext } from '../../functional/ftr_provider_context'; + +// eslint-disable-next-line import/no-default-export +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const PageObjects = getPageObjects(['lens', 'common', 'dashboard', 'timeToVisualize']); + const elasticChart = getService('elasticChart'); + const testSubjects = getService('testSubjects'); + const retry = getService('retry'); + + async function checkData() { + const data = await elasticChart.getChartDebugData(); + expect(data!.bars![0].bars.length).to.eql(24); + } + + describe('show and save', () => { + beforeEach(async () => { + await PageObjects.common.navigateToApp('embedded_lens_example'); + await elasticChart.setNewChartUiDebugFlag(true); + await testSubjects.click('lns-example-change-time-range'); + await PageObjects.lens.waitForVisualization(); + }); + + it('should show chart', async () => { + await testSubjects.click('lns-example-change-color'); + await PageObjects.lens.waitForVisualization(); + await checkData(); + }); + + it('should save to dashboard', async () => { + await testSubjects.click('lns-example-save'); + await PageObjects.timeToVisualize.setSaveModalValues('From example', { + saveAsNew: true, + redirectToOrigin: false, + addToDashboard: 'new', + dashboardId: undefined, + saveToLibrary: false, + }); + + await testSubjects.click('confirmSaveSavedObjectButton'); + await retry.waitForWithTimeout('Save modal to disappear', 1000, () => + testSubjects + .missingOrFail('confirmSaveSavedObjectButton') + .then(() => true) + .catch(() => false) + ); + await PageObjects.lens.goToTimeRange(); + await PageObjects.dashboard.waitForRenderComplete(); + await checkData(); + }); + + it('should load Lens editor', async () => { + await testSubjects.click('lns-example-open-editor'); + await PageObjects.lens.waitForVisualization(); + await checkData(); + }); + }); +} diff --git a/x-pack/test/examples/embedded_lens/index.ts b/x-pack/test/examples/embedded_lens/index.ts new file mode 100644 index 0000000000000..3bd4ea31cc89b --- /dev/null +++ b/x-pack/test/examples/embedded_lens/index.ts @@ -0,0 +1,34 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { PluginFunctionalProviderContext } from 'test/plugin_functional/services'; + +// eslint-disable-next-line import/no-default-export +export default function ({ getService, loadTestFile }: PluginFunctionalProviderContext) { + const esArchiver = getService('esArchiver'); + const kibanaServer = getService('kibanaServer'); + + describe('embedded Lens examples', function () { + before(async () => { + await esArchiver.load('x-pack/test/functional/es_archives/logstash_functional'); + await esArchiver.load('x-pack/test/functional/es_archives/lens/basic'); // need at least one index pattern + await kibanaServer.uiSettings.update({ + defaultIndex: 'logstash-*', + }); + }); + + after(async () => { + await esArchiver.unload('x-pack/test/functional/es_archives/lens/basic'); + }); + + describe('', function () { + this.tags(['ciGroup4', 'skipFirefox']); + + loadTestFile(require.resolve('./embedded_example')); + }); + }); +} diff --git a/x-pack/test/functional/apps/lens/dashboard.ts b/x-pack/test/functional/apps/lens/dashboard.ts index 844b074e42e74..6e4c20744c5fc 100644 --- a/x-pack/test/functional/apps/lens/dashboard.ts +++ b/x-pack/test/functional/apps/lens/dashboard.ts @@ -223,10 +223,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { // remove the x dimension to trigger the validation error await PageObjects.lens.removeDimension('lnsXY_xDimensionPanel'); - await PageObjects.lens.saveAndReturn(); - - await PageObjects.header.waitUntilLoadingHasFinished(); - await testSubjects.existOrFail('embeddable-lens-failure'); + await PageObjects.lens.expectSaveAndReturnButtonDisabled(); }); }); } diff --git a/x-pack/test/functional/apps/maps/blended_vector_layer.js b/x-pack/test/functional/apps/maps/blended_vector_layer.js index 3cc7d8e07d623..67e6d7f93a4cd 100644 --- a/x-pack/test/functional/apps/maps/blended_vector_layer.js +++ b/x-pack/test/functional/apps/maps/blended_vector_layer.js @@ -29,7 +29,7 @@ export default function ({ getPageObjects, getService }) { it('should request documents when zoomed to smaller regions showing less data', async () => { const { rawResponse: response } = await PageObjects.maps.getResponse(); // Allow a range of hits to account for variances in browser window size. - expect(response.hits.hits.length).to.be.within(35, 45); + expect(response.hits.hits.length).to.be.within(5, 12); }); it('should request clusters when zoomed to larger regions showing lots of data', async () => { diff --git a/x-pack/test/functional/apps/maps/documents_source/search_hits.js b/x-pack/test/functional/apps/maps/documents_source/search_hits.js index 4da36a44cff08..de2233fdf791d 100644 --- a/x-pack/test/functional/apps/maps/documents_source/search_hits.js +++ b/x-pack/test/functional/apps/maps/documents_source/search_hits.js @@ -53,7 +53,7 @@ export default function ({ getPageObjects, getService }) { describe('inspector', () => { it('should register elasticsearch request in inspector', async () => { const hits = await PageObjects.maps.getHits(); - expect(hits).to.equal('6'); + expect(hits).to.equal('5'); }); }); @@ -74,7 +74,7 @@ export default function ({ getPageObjects, getService }) { const requestStats = await inspector.getTableData(); const hits = PageObjects.maps.getInspectorStatRowHit(requestStats, 'Hits'); await inspector.close(); - expect(hits).to.equal('3'); + expect(hits).to.equal('2'); }); it('should re-fetch query when "refresh" is clicked', async () => { diff --git a/x-pack/test/functional/apps/maps/es_geo_grid_source.js b/x-pack/test/functional/apps/maps/es_geo_grid_source.js index 27949ca720e34..26eabafef7d1f 100644 --- a/x-pack/test/functional/apps/maps/es_geo_grid_source.js +++ b/x-pack/test/functional/apps/maps/es_geo_grid_source.js @@ -59,9 +59,9 @@ export default function ({ getPageObjects, getService }) { }); it('should not rerequest when zoom changes do not cause geotile_grid precision to change', async () => { - await PageObjects.maps.setView(DATA_CENTER_LAT, DATA_CENTER_LON, 1.2); + await PageObjects.maps.setView(DATA_CENTER_LAT, DATA_CENTER_LON, 1.4); const beforeSameZoom = await getRequestTimestamp(); - await PageObjects.maps.setView(DATA_CENTER_LAT, DATA_CENTER_LON, 1.8); + await PageObjects.maps.setView(DATA_CENTER_LAT, DATA_CENTER_LON, 1.6); const afterTimestamp = await getRequestTimestamp(); expect(afterTimestamp).to.equal(beforeSameZoom); }); diff --git a/x-pack/test/functional/apps/maps/layer_visibility.js b/x-pack/test/functional/apps/maps/layer_visibility.js index 52cfa44923f63..cf6051cde8be7 100644 --- a/x-pack/test/functional/apps/maps/layer_visibility.js +++ b/x-pack/test/functional/apps/maps/layer_visibility.js @@ -32,7 +32,7 @@ export default function ({ getPageObjects, getService }) { it('should fetch layer data when layer is made visible', async () => { await PageObjects.maps.toggleLayerVisibility('logstash'); const hits = await PageObjects.maps.getHits(); - expect(hits).to.equal('6'); + expect(hits).to.equal('5'); }); }); } diff --git a/x-pack/test/functional/apps/maps/saved_object_management.js b/x-pack/test/functional/apps/maps/saved_object_management.js index bdc9011ec2cba..3392e418bd987 100644 --- a/x-pack/test/functional/apps/maps/saved_object_management.js +++ b/x-pack/test/functional/apps/maps/saved_object_management.js @@ -82,7 +82,7 @@ export default function ({ getPageObjects, getService }) { const requestStats = await inspector.getTableData(); const hits = PageObjects.maps.getInspectorStatRowHit(requestStats, 'Hits'); await inspector.close(); - expect(hits).to.equal('2'); + expect(hits).to.equal('1'); }); it('should override query stored with map when query is provided in app state', async () => { @@ -130,7 +130,7 @@ export default function ({ getPageObjects, getService }) { const requestStats = await inspector.getTableData(); const hits = PageObjects.maps.getInspectorStatRowHit(requestStats, 'Hits'); await inspector.close(); - expect(hits).to.equal('2'); + expect(hits).to.equal('1'); }); }); }); diff --git a/x-pack/test/functional/apps/saved_objects_management/exports/_7.14_import_alerts_actions.ndjson b/x-pack/test/functional/apps/saved_objects_management/exports/_7.14_import_alerts_actions.ndjson new file mode 100644 index 0000000000000..f0215db3cda69 --- /dev/null +++ b/x-pack/test/functional/apps/saved_objects_management/exports/_7.14_import_alerts_actions.ndjson @@ -0,0 +1,24 @@ +{"attributes":{"actionTypeId":".server-log","config":{},"isMissingSecrets":false,"name":"Monitoring: Write to Kibana log"},"coreMigrationVersion":"7.14.0","id":"f1cf69c0-d9a7-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:34:50.470Z","version":"WzEzODksMV0="} +{"attributes":{"actionTypeId":".email","config":{"from":"user2@company.com","hasAuth":true,"host":"securehost","port":465,"secure":null,"service":null},"isMissingSecrets":true,"name":"email connector with auth"},"coreMigrationVersion":"7.14.0","id":"7eec9570-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:10:09.234Z","version":"WzI2LDFd"} +{"attributes":{"actionTypeId":".resilient","config":{"apiUrl":"https://resilienttest","orgId":"test"},"isMissingSecrets":true,"name":"ibm resilient connector"},"coreMigrationVersion":"7.14.0","id":"8e08afd0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:10:34.583Z","version":"WzI3LDFd"} +{"attributes":{"actionTypeId":".email","config":{"from":"user@company.com","hasAuth":false,"host":"host","port":22,"secure":null,"service":null},"isMissingSecrets":false,"name":"email connector no auth"},"coreMigrationVersion":"7.14.0","id":"711e30c0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:09:46.078Z","version":"WzI1LDFd"} +{"attributes":{"actionTypeId":".index","config":{"executionTimeField":null,"index":"test-index","refresh":false},"isMissingSecrets":false,"name":"index connector"},"coreMigrationVersion":"7.14.0","id":"95d329c0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:10:47.653Z","version":"WzI5LDFd"} +{"attributes":{"actionTypeId":".webhook","config":{"hasAuth":true,"headers":null,"method":"post","url":"https://webhook"},"isMissingSecrets":true,"name":"webhook with auth"},"coreMigrationVersion":"7.14.0","id":"07f32aa0-d9a5-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:13:59.125Z","version":"WzM5LDFd"} +{"attributes":{"actionTypeId":".servicenow-sir","config":{"apiUrl":"https://servicenowtestsecops"},"isMissingSecrets":true,"name":"servicenow secops connector"},"coreMigrationVersion":"7.14.0","id":"ca974fb0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:12:16.181Z","version":"WzM1LDFd"} +{"attributes":{"actionTypeId":".servicenow","config":{"apiUrl":"https://servicenowtest"},"isMissingSecrets":true,"name":"servicenow itsm connector"},"coreMigrationVersion":"7.14.0","id":"be5c5c40-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:55.662Z","version":"WzM0LDFd"} +{"attributes":{"actionTypeId":".webhook","config":{"hasAuth":false,"headers":null,"method":"post","url":"https://openwebhook"},"isMissingSecrets":false,"name":"webhook no auth"},"coreMigrationVersion":"7.14.0","id":"ff8c70b0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:13:45.031Z","version":"WzM3LDFd"} +{"attributes":{"actionTypeId":".pagerduty","config":{"apiUrl":""},"isMissingSecrets":true,"name":"pagerduty connector"},"coreMigrationVersion":"7.14.0","id":"b0bc3380-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:32.802Z","version":"WzMyLDFd"} +{"attributes":{"actionTypeId":".jira","config":{"apiUrl":"https://testjira","projectKey":"myproject"},"isMissingSecrets":true,"name":"jira connector"},"coreMigrationVersion":"7.14.0","id":"a081d7e0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:05.577Z","version":"WzMwLDFd"} +{"attributes":{"actionTypeId":".server-log","config":{},"isMissingSecrets":false,"name":"server log connector"},"coreMigrationVersion":"7.14.0","id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:40.404Z","version":"WzMzLDFd"} +{"attributes":{"actionTypeId":".teams","config":{},"isMissingSecrets":true,"name":"teams connector"},"coreMigrationVersion":"7.14.0","id":"a94be780-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:20.321Z","version":"WzMxLDFd"} +{"attributes":{"actionTypeId":".slack","config":{},"isMissingSecrets":true,"name":"slack connector"},"coreMigrationVersion":"7.14.0","id":"d6d1cdf0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:12:36.697Z","version":"WzM2LDFd"} +{"attributes":{"actions":[],"alertTypeId":".geo-containment","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:30:28.418Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"geo rule","notifyWhen":"onActionGroupChange","params":{"boundaryGeoField":"coordinates","boundaryIndexId":"c2a20a50-d9a6-11eb-881a-218d2e96295d","boundaryIndexTitle":"manhattan_boundaries","boundaryNameField":"","boundaryType":"entireIndex","dateField":"@timestamp","entity":"azimuth","geoField":"location","index":"tracks*","indexId":"f653fcf0-d9a6-11eb-881a-218d2e96295d"},"schedule":{"interval":"5m"},"scheduledTaskId":null,"tags":["manhattan"],"throttle":null,"updatedAt":"2021-06-30T13:30:28.418Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"55626650-d9a7-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:40:37.967Z","version":"WzE1MDksMV0="} +{"attributes":{"actions":[],"alertTypeId":"logs.alert.document.count","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:20:56.718Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"logs threshold rule","notifyWhen":"onActiveAlert","params":{"count":{"comparator":"more than","value":75},"criteria":[{"comparator":"equals","field":"host.keyword","value":"host1"}],"timeSize":5,"timeUnit":"m"},"schedule":{"interval":"1m"},"scheduledTaskId":null,"tags":["logs","test"],"throttle":null,"updatedAt":"2021-06-30T13:20:56.718Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"00b51cc0-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:42:01.071Z","version":"WzE1MjYsMV0="} +{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".server-log","group":"query matched","params":{"level":"info","message":"Elasticsearch query alert '{{alertName}}' is active:\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}}],"alertTypeId":".es-query","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:19:13.441Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"es query rule","notifyWhen":"onActionGroupChange","params":{"esQuery":"{\n \"query\":{\n \"match_all\" : {}\n }\n}","index":[".kibana"],"size":100,"threshold":[1000],"thresholdComparator":">","timeField":"updated_at","timeWindowSize":5,"timeWindowUnit":"m"},"schedule":{"interval":"1m"},"scheduledTaskId":null,"tags":["es","query"],"throttle":null,"updatedAt":"2021-06-30T13:19:13.441Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"c3172fc0-d9a5-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:41:19.057Z","version":"WzE1MjAsMV0="} +{"attributes":{"actions":[],"alertTypeId":"xpack.uptime.alerts.monitorStatus","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:22:48.241Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"uptime status","notifyWhen":"onActiveAlert","params":{"availability":{"range":30,"rangeUnit":"d","threshold":"99"},"numTimes":5,"search":"","shouldCheckAvailability":true,"shouldCheckStatus":true,"timerangeCount":15,"timerangeUnit":"m"},"schedule":{"interval":"1d"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:22:48.241Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"432dddd0-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:22:51.893Z","version":"WzEwMywxXQ=="} +{"attributes":{"actions":[],"alertTypeId":"metrics.alert.threshold","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:22:25.161Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"metric threshold rule","notifyWhen":"onActionGroupChange","params":{"criteria":[{"aggType":"avg","comparator":">","metric":"_score","threshold":[0.5],"timeSize":1,"timeUnit":"m"}],"sourceId":"default"},"schedule":{"interval":"1h"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:22:25.161Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"34dba320-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:22:27.874Z","version":"Wzk5LDFd"} +{"attributes":{"actions":[],"alertTypeId":"xpack.uptime.alerts.tlsCertificate","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:23:14.340Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"tls rule","notifyWhen":"onThrottleInterval","params":{},"schedule":{"interval":"1d"},"scheduledTaskId":null,"tags":["certificate"],"throttle":"1h","updatedAt":"2021-06-30T13:23:14.340Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"52990290-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:23:15.928Z","version":"WzEwNywxXQ=="} +{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".index","group":"metrics.inventory_threshold.fired","params":{"documents":[{"alert_triggered":"{{rule.id}}"}]}}],"alertTypeId":"metrics.alert.inventory.threshold","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:21:53.897Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"inventory rule","notifyWhen":"onActionGroupChange","params":{"criteria":[{"comparator":">","customMetric":{"aggregation":"avg","field":"","id":"alert-custom-metric","type":"custom"},"metric":"cpu","threshold":[90],"timeSize":1,"timeUnit":"m"}],"nodeType":"host","sourceId":"default"},"schedule":{"interval":"10m"},"scheduledTaskId":null,"tags":["inventory"],"throttle":null,"updatedAt":"2021-06-30T13:21:53.897Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"22e0f9e0-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"95d329c0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:42:01.078Z","version":"WzE1MjcsMV0="} +{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".server-log","group":"anomaly_score_match","params":{"level":"info","message":"Elastic Stack Machine Learning Alert:\n- Job IDs: {{context.jobIds}}\n- Time: {{context.timestampIso8601}}\n- Anomaly score: {{context.score}}\n\n{{context.message}}\n\n{{#context.topInfluencers.length}}\n Top influencers:\n {{#context.topInfluencers}}\n {{influencer_field_name}} = {{influencer_field_value}} [{{score}}]\n {{/context.topInfluencers}}\n{{/context.topInfluencers.length}}\n\n{{#context.topRecords.length}}\n Top records:\n {{#context.topRecords}}\n {{function}}({{field_name}}) {{by_field_value}} {{over_field_value}} {{partition_field_value}} [{{score}}]\n {{/context.topRecords}}\n{{/context.topRecords.length}}\n\n{{! Replace kibanaBaseUrl if not configured in Kibana }}\n[Open in Anomaly Explorer]({{{kibanaBaseUrl}}}{{{context.anomalyExplorerUrl}}})\n"}}],"alertTypeId":"xpack.ml.anomaly_detection_alert","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:32:13.689Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"ecommerce ml","notifyWhen":"onActionGroupChange","params":{"includeInterim":false,"jobSelection":{"groupIds":[],"jobIds":["high_sum_total_sales"]},"lookbackInterval":null,"resultType":"bucket","severity":75,"topNBuckets":null},"schedule":{"interval":"1h"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:32:13.689Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"93ea6530-d9a7-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:32:15.978Z","version":"WzI0NiwxXQ=="} +{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".email","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}","subject":"alert fired!","to":["user@company.com"]}},{"actionRef":"action_1","actionTypeId":".email","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}","subject":"alert triggered!","to":["user2@company.com"]}},{"actionRef":"action_2","actionTypeId":".index","group":"threshold met","params":{"documents":[{"alert_triggered":"{{rule.id}}"}]}},{"actionRef":"action_3","actionTypeId":".teams","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}},{"actionRef":"action_4","actionTypeId":".pagerduty","group":"threshold met","params":{"dedupKey":"{{rule.id}}:{{alert.id}}","eventAction":"trigger","summary":"triggered"}},{"actionRef":"action_5","actionTypeId":".server-log","group":"threshold met","params":{"level":"info","message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}},{"actionRef":"action_6","actionTypeId":".slack","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}},{"actionRef":"action_7","actionTypeId":".webhook","group":"threshold met","params":{"body":"{\n \"alert_triggered\": \"{{rule.id}}\"\n}"}},{"actionRef":"action_8","actionTypeId":".webhook","group":"threshold met","params":{"body":"{\n \"alert_triggered\": \"{{rule.id}}\"\n}"}}],"alertTypeId":".index-threshold","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:18:16.273Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"index threshold rule with actions","notifyWhen":"onActionGroupChange","params":{"aggType":"count","groupBy":"all","index":[".kibana"],"termSize":5,"threshold":[1000],"thresholdComparator":">","timeField":"updated_at","timeWindowSize":5,"timeWindowUnit":"m"},"schedule":{"interval":"1m"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:41:45.350Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"a0bfd5d0-d9a5-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"711e30c0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"},{"id":"7eec9570-d9a4-11eb-881a-218d2e96295d","name":"action_1","type":"action"},{"id":"95d329c0-d9a4-11eb-881a-218d2e96295d","name":"action_2","type":"action"},{"id":"a94be780-d9a4-11eb-881a-218d2e96295d","name":"action_3","type":"action"},{"id":"b0bc3380-d9a4-11eb-881a-218d2e96295d","name":"action_4","type":"action"},{"id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","name":"action_5","type":"action"},{"id":"d6d1cdf0-d9a4-11eb-881a-218d2e96295d","name":"action_6","type":"action"},{"id":"ff8c70b0-d9a4-11eb-881a-218d2e96295d","name":"action_7","type":"action"},{"id":"07f32aa0-d9a5-11eb-881a-218d2e96295d","name":"action_8","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:41:45.359Z","version":"WzE1MjQsMV0="} +{"excludedObjects":[{"id":"f27594d0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2756dc0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2751fa0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f275bbe0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"bf522690-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2771b70-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f276f460-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f274f890-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f27594d1-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f276cd50-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f274aa70-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f27546b0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f27546b1-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f274d180-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2774280-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"}],"excludedObjectsCount":15,"exportedCount":23,"missingRefCount":0,"missingReferences":[]} diff --git a/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts b/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts index 47fc2b756e8e8..427e42b7b7a65 100644 --- a/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts +++ b/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts @@ -21,7 +21,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const retry = getService('retry'); describe('Export import saved objects between versions', function () { - beforeEach(async function () { + before(async function () { await esArchiver.load('x-pack/test/functional/es_archives/logstash_functional'); await esArchiver.load('x-pack/test/functional/es_archives/getting_started/shakespeare'); await kibanaServer.uiSettings.replace({}); @@ -50,5 +50,21 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { // verifying the count of saved objects after importing .ndjson await expect(importedSavedObjects).to.be('Export 88 objects'); }); + + it('should be able to import alerts and actions saved objects from 7.14 into 8.0.0', async function () { + await retry.tryForTime(10000, async () => { + const existingSavedObjects = await testSubjects.getVisibleText('exportAllObjects'); + // Kibana always has 1 advanced setting as a saved object + await expect(existingSavedObjects).to.be('Export 88 objects'); + }); + await PageObjects.savedObjects.importFile( + path.join(__dirname, 'exports', '_7.14_import_alerts_actions.ndjson') + ); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); + const importedSavedObjects = await testSubjects.getVisibleText('exportAllObjects'); + // verifying the count of saved objects after importing .ndjson + await expect(importedSavedObjects).to.be('Export 111 objects'); + }); }); } diff --git a/x-pack/test/functional/apps/timelion/feature_controls/timelion_security.ts b/x-pack/test/functional/apps/timelion/feature_controls/timelion_security.ts index e83eabfb05f44..ff6103f16e494 100644 --- a/x-pack/test/functional/apps/timelion/feature_controls/timelion_security.ts +++ b/x-pack/test/functional/apps/timelion/feature_controls/timelion_security.ts @@ -11,6 +11,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context'; export default function ({ getPageObjects, getService }: FtrProviderContext) { const esArchiver = getService('esArchiver'); const security = getService('security'); + const kibanaServer = getService('kibanaServer'); const PageObjects = getPageObjects([ 'common', 'error', @@ -24,10 +25,19 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { describe('feature controls security', () => { before(async () => { - await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/timelion/feature_controls'); + await kibanaServer.importExport.load( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json' + ); await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/logstash_functional'); }); + after(async () => { + await kibanaServer.importExport.unload( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json' + ); + await esArchiver.unload('x-pack/test/functional/es_archives/logstash_functional'); + }); + describe('global timelion all privileges', () => { before(async () => { await security.role.create('global_timelion_all_role', { diff --git a/x-pack/test/functional/apps/timelion/feature_controls/timelion_spaces.ts b/x-pack/test/functional/apps/timelion/feature_controls/timelion_spaces.ts index 91c357f37085e..a1dea695fce86 100644 --- a/x-pack/test/functional/apps/timelion/feature_controls/timelion_spaces.ts +++ b/x-pack/test/functional/apps/timelion/feature_controls/timelion_spaces.ts @@ -13,6 +13,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { const spacesService = getService('spaces'); const PageObjects = getPageObjects(['common', 'timelion', 'security', 'spaceSelector']); const appsMenu = getService('appsMenu'); + const kibanaServer = getService('kibanaServer'); describe('timelion', () => { before(async () => { @@ -23,29 +24,44 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { before(async () => { // we need to load the following in every situation as deleting // a space deletes all of the associated saved objects - await esArchiver.load('x-pack/test/functional/es_archives/timelion/feature_controls'); + // await esArchiver.load('x-pack/test/functional/es_archives/timelion/feature_controls'); + await kibanaServer.importExport.load( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json' + ); + await spacesService.create({ id: 'custom_space', name: 'custom_space', disabledFeatures: [], }); + + await kibanaServer.importExport.load( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/timelion_custom_space.json', + { space: 'custom_space' } + ); }); after(async () => { await spacesService.delete('custom_space'); - await esArchiver.unload('x-pack/test/functional/es_archives/timelion/feature_controls'); + await kibanaServer.importExport.unload( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json' + ); }); it('shows timelion navlink', async () => { await PageObjects.common.navigateToApp('home', { basePath: '/s/custom_space', }); + const navLinks = (await appsMenu.readLinks()).map((link) => link.text); expect(navLinks).to.contain('Timelion'); }); it(`allows a timelion sheet to be created`, async () => { - await PageObjects.common.navigateToApp('timelion'); + await PageObjects.common.navigateToApp('timelion', { + basePath: '/s/custom_space', + }); + await PageObjects.timelion.saveTimelionSheet(); }); }); @@ -54,17 +70,29 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { before(async () => { // we need to load the following in every situation as deleting // a space deletes all of the associated saved objects - await esArchiver.load('x-pack/test/functional/es_archives/timelion/feature_controls'); + // await esArchiver.load('x-pack/test/functional/es_archives/timelion/feature_controls'); + + await kibanaServer.importExport.load( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json' + ); + await spacesService.create({ id: 'custom_space', name: 'custom_space', disabledFeatures: ['timelion'], }); + + await kibanaServer.importExport.load( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/timelion_custom_space.json', + { space: 'custom_space' } + ); }); after(async () => { await spacesService.delete('custom_space'); - await esArchiver.unload('x-pack/test/functional/es_archives/timelion/feature_controls'); + await kibanaServer.importExport.unload( + 'x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json' + ); }); it(`doesn't show timelion navlink`, async () => { diff --git a/x-pack/test/functional/apps/uptime/synthetics_integration.ts b/x-pack/test/functional/apps/uptime/synthetics_integration.ts index a4740de8e9a2b..c4996299f0d43 100644 --- a/x-pack/test/functional/apps/uptime/synthetics_integration.ts +++ b/x-pack/test/functional/apps/uptime/synthetics_integration.ts @@ -253,7 +253,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { ]); }); - it.skip('allows configuring http advanced options', async () => { + it('allows configuring http advanced options', async () => { // This test ensures that updates made to the Synthetics Policy are carried all the way through // to the generated Agent Policy that is dispatch down to the Elastic Agent. const config = generateHTTPConfig('http://elastic.co'); diff --git a/x-pack/test/functional/es_archives/cases/migrations/7.13.2/data.json.gz b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/data.json.gz new file mode 100644 index 0000000000000..c86af3f7d2fba Binary files /dev/null and b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/data.json.gz differ diff --git a/x-pack/test/functional/es_archives/cases/migrations/7.13.2/mappings.json b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/mappings.json new file mode 100644 index 0000000000000..e79ebf2b8fc10 --- /dev/null +++ b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/mappings.json @@ -0,0 +1,2909 @@ +{ + "type": "index", + "value": { + "aliases": { + ".kibana": { + }, + ".kibana_7.13.2": { + } + }, + "index": ".kibana_1", + "mappings": { + "_meta": { + "migrationMappingPropertyHashes": { + "action": "6e96ac5e648f57523879661ea72525b7", + "action_task_params": "a9d49f184ee89641044be0ca2950fa3a", + "alert": "d75d3b0e95fe394753d73d8f7952cd7d", + "api_key_pending_invalidation": "16f515278a295f6245149ad7c5ddedb7", + "apm-indices": "9bb9b2bf1fa636ed8619cbab5ce6a1dd", + "apm-telemetry": "3d1b76c39bfb2cc8296b024d73854724", + "app_search_telemetry": "3d1b76c39bfb2cc8296b024d73854724", + "application_usage_daily": "43b8830d5d0df85a6823d290885fc9fd", + "application_usage_totals": "3d1b76c39bfb2cc8296b024d73854724", + "application_usage_transactional": "3d1b76c39bfb2cc8296b024d73854724", + "canvas-element": "7390014e1091044523666d97247392fc", + "canvas-workpad": "b0a1706d356228dbdcb4a17e6b9eb231", + "canvas-workpad-template": "ae2673f678281e2c055d764b153e9715", + "cases": "7c28a18fbac7c2a4e79449e9802ef476", + "cases-comments": "112cefc2b6737e613a8ef033234755e6", + "cases-configure": "387c5f3a3bda7e0ae0dd4e106f914a69", + "cases-connector-mappings": "6bc7e49411d38be4969dc6aa8bd43776", + "cases-user-actions": "32277330ec6b721abe3b846cfd939a71", + "config": "c63748b75f39d0c54de12d12c1ccbc20", + "core-usage-stats": "3d1b76c39bfb2cc8296b024d73854724", + "coreMigrationVersion": "2f4316de49999235636386fe51dc06c1", + "dashboard": "40554caf09725935e2c02e02563a2d07", + "endpoint:user-artifact": "4a11183eee21e6fbad864f7a30b39ad0", + "endpoint:user-artifact-manifest": "a0d7b04ad405eed54d76e279c3727862", + "enterprise_search_telemetry": "3d1b76c39bfb2cc8296b024d73854724", + "epm-packages": "0cbbb16506734d341a96aaed65ec6413", + "epm-packages-assets": "44621b2f6052ef966da47b7c3a00f33b", + "exception-list": "baf108c9934dda844921f692a513adae", + "exception-list-agnostic": "baf108c9934dda844921f692a513adae", + "file-upload-usage-collection-telemetry": "a34fbb8e3263d105044869264860c697", + "fleet-agent-actions": "9511b565b1cc6441a42033db3d5de8e9", + "fleet-agents": "59fd74f819f028f8555776db198d2562", + "fleet-enrollment-api-keys": "a69ef7ae661dab31561d6c6f052ef2a7", + "fleet-preconfiguration-deletion-record": "4c36f199189a367e43541f236141204c", + "graph-workspace": "27a94b2edcb0610c6aea54a7c56d7752", + "index-pattern": "45915a1ad866812242df474eb0479052", + "infrastructure-ui-source": "3d1b76c39bfb2cc8296b024d73854724", + "ingest-agent-policies": "cb4dbcc5a695e53f40a359303cb6286f", + "ingest-outputs": "1acb789ca37cbee70259ca79e124d9ad", + "ingest-package-policies": "c91ca97b1ff700f0fc64dc6b13d65a85", + "ingest_manager_settings": "f159646d76ab261bfbf8ef504d9631e4", + "inventory-view": "3d1b76c39bfb2cc8296b024d73854724", + "kql-telemetry": "d12a98a6f19a2d273696597547e064ee", + "legacy-url-alias": "3d1b76c39bfb2cc8296b024d73854724", + "lens": "52346cfec69ff7b47d5f0c12361a2797", + "lens-ui-telemetry": "509bfa5978586998e05f9e303c07a327", + "map": "9134b47593116d7953f6adba096fc463", + "maps-telemetry": "5ef305b18111b77789afefbd36b66171", + "metrics-explorer-view": "3d1b76c39bfb2cc8296b024d73854724", + "migrationVersion": "4a1746014a75ade3a714e1db5763276f", + "ml-job": "3bb64c31915acf93fc724af137a0891b", + "ml-module": "46ef4f0d6682636f0fff9799d6a2d7ac", + "monitoring-telemetry": "2669d5ec15e82391cf58df4294ee9c68", + "namespace": "2f4316de49999235636386fe51dc06c1", + "namespaces": "2f4316de49999235636386fe51dc06c1", + "originId": "2f4316de49999235636386fe51dc06c1", + "query": "11aaeb7f5f7fa5bb43f25e18ce26e7d9", + "references": "7997cf5a56cc02bdc9c93361bde732b0", + "sample-data-telemetry": "7d3cfeb915303c9641c59681967ffeb4", + "search": "db2c00e39b36f40930a3b9fc71c823e1", + "search-session": "4e238afeeaa2550adef326e140454265", + "search-telemetry": "3d1b76c39bfb2cc8296b024d73854724", + "security-rule": "8ae39a88fc70af3375b7050e8d8d5cc7", + "security-solution-signals-migration": "72761fd374ca11122ac8025a92b84fca", + "siem-detection-engine-rule-actions": "6569b288c169539db10cb262bf79de18", + "siem-detection-engine-rule-status": "ae783f41c6937db6b7a2ef5c93a9e9b0", + "siem-ui-timeline": "3e97beae13cdfc6d62bc1846119f7276", + "siem-ui-timeline-note": "8874706eedc49059d4cf0f5094559084", + "siem-ui-timeline-pinned-event": "20638091112f0e14f0e443d512301c29", + "space": "c5ca8acafa0beaa4d08d014a97b6bc6b", + "spaces-usage-stats": "3d1b76c39bfb2cc8296b024d73854724", + "tag": "83d55da58f6530f7055415717ec06474", + "telemetry": "36a616f7026dfa617d6655df850fe16d", + "timelion-sheet": "9a2a2748877c7a7b582fef201ab1d4cf", + "type": "2f4316de49999235636386fe51dc06c1", + "ui-counter": "0d409297dc5ebe1e3a1da691c6ee32e3", + "ui-metric": "0d409297dc5ebe1e3a1da691c6ee32e3", + "updated_at": "00da57df13e94e9d98437d13ace4bfe0", + "upgrade-assistant-reindex-operation": "215107c281839ea9b3ad5f6419819763", + "upgrade-assistant-telemetry": "56702cec857e0a9dacfb696655b4ff7b", + "uptime-dynamic-settings": "3d1b76c39bfb2cc8296b024d73854724", + "url": "c7f66a0df8b1b52f17c28c4adb111105", + "usage-counters": "8cc260bdceffec4ffc3ad165c97dc1b4", + "visualization": "f819cf6636b75c9e76ba733a0c6ef355", + "workplace_search_telemetry": "3d1b76c39bfb2cc8296b024d73854724" + } + }, + "dynamic": "strict", + "properties": { + "action": { + "properties": { + "actionTypeId": { + "type": "keyword" + }, + "config": { + "enabled": false, + "type": "object" + }, + "name": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "secrets": { + "type": "binary" + } + } + }, + "action_task_params": { + "properties": { + "actionId": { + "type": "keyword" + }, + "apiKey": { + "type": "binary" + }, + "params": { + "enabled": false, + "type": "object" + } + } + }, + "alert": { + "properties": { + "actions": { + "properties": { + "actionRef": { + "type": "keyword" + }, + "actionTypeId": { + "type": "keyword" + }, + "group": { + "type": "keyword" + }, + "params": { + "enabled": false, + "type": "object" + } + }, + "type": "nested" + }, + "alertTypeId": { + "type": "keyword" + }, + "apiKey": { + "type": "binary" + }, + "apiKeyOwner": { + "type": "keyword" + }, + "consumer": { + "type": "keyword" + }, + "createdAt": { + "type": "date" + }, + "createdBy": { + "type": "keyword" + }, + "enabled": { + "type": "boolean" + }, + "executionStatus": { + "properties": { + "error": { + "properties": { + "message": { + "type": "keyword" + }, + "reason": { + "type": "keyword" + } + } + }, + "lastExecutionDate": { + "type": "date" + }, + "status": { + "type": "keyword" + } + } + }, + "meta": { + "properties": { + "versionApiKeyLastmodified": { + "type": "keyword" + } + } + }, + "muteAll": { + "type": "boolean" + }, + "mutedInstanceIds": { + "type": "keyword" + }, + "name": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "notifyWhen": { + "type": "keyword" + }, + "params": { + "ignore_above": 4096, + "type": "flattened" + }, + "schedule": { + "properties": { + "interval": { + "type": "keyword" + } + } + }, + "scheduledTaskId": { + "type": "keyword" + }, + "tags": { + "type": "keyword" + }, + "throttle": { + "type": "keyword" + }, + "updatedAt": { + "type": "date" + }, + "updatedBy": { + "type": "keyword" + } + } + }, + "api_key_pending_invalidation": { + "properties": { + "apiKeyId": { + "type": "keyword" + }, + "createdAt": { + "type": "date" + } + } + }, + "apm-indices": { + "properties": { + "apm_oss": { + "properties": { + "errorIndices": { + "type": "keyword" + }, + "metricsIndices": { + "type": "keyword" + }, + "onboardingIndices": { + "type": "keyword" + }, + "sourcemapIndices": { + "type": "keyword" + }, + "spanIndices": { + "type": "keyword" + }, + "transactionIndices": { + "type": "keyword" + } + } + } + } + }, + "apm-telemetry": { + "dynamic": "false", + "type": "object" + }, + "app_search_telemetry": { + "dynamic": "false", + "type": "object" + }, + "application_usage_daily": { + "dynamic": "false", + "properties": { + "timestamp": { + "type": "date" + } + } + }, + "application_usage_totals": { + "dynamic": "false", + "type": "object" + }, + "application_usage_transactional": { + "dynamic": "false", + "type": "object" + }, + "canvas-element": { + "dynamic": "false", + "properties": { + "@created": { + "type": "date" + }, + "@timestamp": { + "type": "date" + }, + "content": { + "type": "text" + }, + "help": { + "type": "text" + }, + "image": { + "type": "text" + }, + "name": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + } + } + }, + "canvas-workpad": { + "dynamic": "false", + "properties": { + "@created": { + "type": "date" + }, + "@timestamp": { + "type": "date" + }, + "name": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + } + } + }, + "canvas-workpad-template": { + "dynamic": "false", + "properties": { + "help": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "name": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "tags": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "template_key": { + "type": "keyword" + } + } + }, + "cases": { + "properties": { + "closed_at": { + "type": "date" + }, + "closed_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + }, + "connector": { + "properties": { + "fields": { + "properties": { + "key": { + "type": "text" + }, + "value": { + "type": "text" + } + } + }, + "id": { + "type": "keyword" + }, + "name": { + "type": "text" + }, + "type": { + "type": "keyword" + } + } + }, + "created_at": { + "type": "date" + }, + "created_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + }, + "description": { + "type": "text" + }, + "external_service": { + "properties": { + "connector_id": { + "type": "keyword" + }, + "connector_name": { + "type": "keyword" + }, + "external_id": { + "type": "keyword" + }, + "external_title": { + "type": "text" + }, + "external_url": { + "type": "text" + }, + "pushed_at": { + "type": "date" + }, + "pushed_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + } + } + }, + "settings": { + "properties": { + "syncAlerts": { + "type": "boolean" + } + } + }, + "status": { + "type": "keyword" + }, + "tags": { + "type": "keyword" + }, + "title": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "updated_at": { + "type": "date" + }, + "updated_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + } + } + }, + "cases-comments": { + "properties": { + "alertId": { + "type": "keyword" + }, + "associationType": { + "type": "keyword" + }, + "comment": { + "type": "text" + }, + "created_at": { + "type": "date" + }, + "created_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + }, + "index": { + "type": "keyword" + }, + "pushed_at": { + "type": "date" + }, + "pushed_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + }, + "rule": { + "properties": { + "id": { + "type": "keyword" + }, + "name": { + "type": "keyword" + } + } + }, + "type": { + "type": "keyword" + }, + "updated_at": { + "type": "date" + }, + "updated_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + } + } + }, + "cases-configure": { + "properties": { + "closure_type": { + "type": "keyword" + }, + "connector": { + "properties": { + "fields": { + "properties": { + "key": { + "type": "text" + }, + "value": { + "type": "text" + } + } + }, + "id": { + "type": "keyword" + }, + "name": { + "type": "text" + }, + "type": { + "type": "keyword" + } + } + }, + "created_at": { + "type": "date" + }, + "created_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + }, + "updated_at": { + "type": "date" + }, + "updated_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + } + } + }, + "cases-connector-mappings": { + "properties": { + "mappings": { + "properties": { + "action_type": { + "type": "keyword" + }, + "source": { + "type": "keyword" + }, + "target": { + "type": "keyword" + } + } + } + } + }, + "cases-user-actions": { + "properties": { + "action": { + "type": "keyword" + }, + "action_at": { + "type": "date" + }, + "action_by": { + "properties": { + "email": { + "type": "keyword" + }, + "full_name": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + }, + "action_field": { + "type": "keyword" + }, + "new_value": { + "type": "text" + }, + "old_value": { + "type": "text" + } + } + }, + "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" + } + } + }, + "endpoint:user-artifact": { + "properties": { + "body": { + "type": "binary" + }, + "compressionAlgorithm": { + "index": false, + "type": "keyword" + }, + "created": { + "index": false, + "type": "date" + }, + "decodedSha256": { + "index": false, + "type": "keyword" + }, + "decodedSize": { + "index": false, + "type": "long" + }, + "encodedSha256": { + "type": "keyword" + }, + "encodedSize": { + "index": false, + "type": "long" + }, + "encryptionAlgorithm": { + "index": false, + "type": "keyword" + }, + "identifier": { + "type": "keyword" + } + } + }, + "endpoint:user-artifact-manifest": { + "properties": { + "artifacts": { + "properties": { + "artifactId": { + "index": false, + "type": "keyword" + }, + "policyId": { + "index": false, + "type": "keyword" + } + }, + "type": "nested" + }, + "created": { + "index": false, + "type": "date" + }, + "schemaVersion": { + "type": "keyword" + }, + "semanticVersion": { + "index": false, + "type": "keyword" + } + } + }, + "enterprise_search_telemetry": { + "dynamic": "false", + "type": "object" + }, + "epm-packages": { + "properties": { + "es_index_patterns": { + "enabled": false, + "type": "object" + }, + "install_source": { + "type": "keyword" + }, + "install_started_at": { + "type": "date" + }, + "install_status": { + "type": "keyword" + }, + "install_version": { + "type": "keyword" + }, + "installed_es": { + "properties": { + "id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + }, + "type": "nested" + }, + "installed_kibana": { + "properties": { + "id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + }, + "type": "nested" + }, + "internal": { + "type": "boolean" + }, + "name": { + "type": "keyword" + }, + "package_assets": { + "properties": { + "id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + }, + "type": "nested" + }, + "removable": { + "type": "boolean" + }, + "version": { + "type": "keyword" + } + } + }, + "epm-packages-assets": { + "properties": { + "asset_path": { + "type": "keyword" + }, + "data_base64": { + "type": "binary" + }, + "data_utf8": { + "index": false, + "type": "text" + }, + "install_source": { + "type": "keyword" + }, + "media_type": { + "type": "keyword" + }, + "package_name": { + "type": "keyword" + }, + "package_version": { + "type": "keyword" + } + } + }, + "exception-list": { + "properties": { + "_tags": { + "type": "keyword" + }, + "comments": { + "properties": { + "comment": { + "type": "keyword" + }, + "created_at": { + "type": "keyword" + }, + "created_by": { + "type": "keyword" + }, + "id": { + "type": "keyword" + }, + "updated_at": { + "type": "keyword" + }, + "updated_by": { + "type": "keyword" + } + } + }, + "created_at": { + "type": "keyword" + }, + "created_by": { + "type": "keyword" + }, + "description": { + "type": "keyword" + }, + "entries": { + "properties": { + "entries": { + "properties": { + "field": { + "type": "keyword" + }, + "operator": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "value": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + } + } + }, + "field": { + "type": "keyword" + }, + "list": { + "properties": { + "id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + } + }, + "operator": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "value": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + } + } + }, + "immutable": { + "type": "boolean" + }, + "item_id": { + "type": "keyword" + }, + "list_id": { + "type": "keyword" + }, + "list_type": { + "type": "keyword" + }, + "meta": { + "type": "keyword" + }, + "name": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + }, + "os_types": { + "type": "keyword" + }, + "tags": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + }, + "tie_breaker_id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "updated_by": { + "type": "keyword" + }, + "version": { + "type": "keyword" + } + } + }, + "exception-list-agnostic": { + "properties": { + "_tags": { + "type": "keyword" + }, + "comments": { + "properties": { + "comment": { + "type": "keyword" + }, + "created_at": { + "type": "keyword" + }, + "created_by": { + "type": "keyword" + }, + "id": { + "type": "keyword" + }, + "updated_at": { + "type": "keyword" + }, + "updated_by": { + "type": "keyword" + } + } + }, + "created_at": { + "type": "keyword" + }, + "created_by": { + "type": "keyword" + }, + "description": { + "type": "keyword" + }, + "entries": { + "properties": { + "entries": { + "properties": { + "field": { + "type": "keyword" + }, + "operator": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "value": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + } + } + }, + "field": { + "type": "keyword" + }, + "list": { + "properties": { + "id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + } + }, + "operator": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "value": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + } + } + }, + "immutable": { + "type": "boolean" + }, + "item_id": { + "type": "keyword" + }, + "list_id": { + "type": "keyword" + }, + "list_type": { + "type": "keyword" + }, + "meta": { + "type": "keyword" + }, + "name": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + }, + "os_types": { + "type": "keyword" + }, + "tags": { + "fields": { + "text": { + "type": "text" + } + }, + "type": "keyword" + }, + "tie_breaker_id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "updated_by": { + "type": "keyword" + }, + "version": { + "type": "keyword" + } + } + }, + "file-upload-usage-collection-telemetry": { + "properties": { + "file_upload": { + "properties": { + "index_creation_count": { + "type": "long" + } + } + } + } + }, + "fleet-agent-actions": { + "properties": { + "ack_data": { + "type": "text" + }, + "agent_id": { + "type": "keyword" + }, + "created_at": { + "type": "date" + }, + "data": { + "type": "binary" + }, + "policy_id": { + "type": "keyword" + }, + "policy_revision": { + "type": "integer" + }, + "sent_at": { + "type": "date" + }, + "type": { + "type": "keyword" + } + } + }, + "fleet-agents": { + "properties": { + "access_api_key_id": { + "type": "keyword" + }, + "active": { + "type": "boolean" + }, + "current_error_events": { + "index": false, + "type": "text" + }, + "default_api_key": { + "type": "binary" + }, + "default_api_key_id": { + "type": "keyword" + }, + "enrolled_at": { + "type": "date" + }, + "last_checkin": { + "type": "date" + }, + "last_checkin_status": { + "type": "keyword" + }, + "last_updated": { + "type": "date" + }, + "local_metadata": { + "type": "flattened" + }, + "packages": { + "type": "keyword" + }, + "policy_id": { + "type": "keyword" + }, + "policy_revision": { + "type": "integer" + }, + "type": { + "type": "keyword" + }, + "unenrolled_at": { + "type": "date" + }, + "unenrollment_started_at": { + "type": "date" + }, + "updated_at": { + "type": "date" + }, + "upgrade_started_at": { + "type": "date" + }, + "upgraded_at": { + "type": "date" + }, + "user_provided_metadata": { + "type": "flattened" + }, + "version": { + "type": "keyword" + } + } + }, + "fleet-enrollment-api-keys": { + "properties": { + "active": { + "type": "boolean" + }, + "api_key": { + "type": "binary" + }, + "api_key_id": { + "type": "keyword" + }, + "created_at": { + "type": "date" + }, + "expire_at": { + "type": "date" + }, + "name": { + "type": "keyword" + }, + "policy_id": { + "type": "keyword" + }, + "type": { + "type": "keyword" + }, + "updated_at": { + "type": "date" + } + } + }, + "fleet-preconfiguration-deletion-record": { + "properties": { + "id": { + "type": "keyword" + } + } + }, + "graph-workspace": { + "properties": { + "description": { + "type": "text" + }, + "kibanaSavedObjectMeta": { + "properties": { + "searchSourceJSON": { + "type": "text" + } + } + }, + "legacyIndexPatternRef": { + "index": false, + "type": "text" + }, + "numLinks": { + "type": "integer" + }, + "numVertices": { + "type": "integer" + }, + "title": { + "type": "text" + }, + "version": { + "type": "integer" + }, + "wsState": { + "type": "text" + } + } + }, + "index-pattern": { + "dynamic": "false", + "properties": { + "title": { + "type": "text" + }, + "type": { + "type": "keyword" + } + } + }, + "infrastructure-ui-source": { + "dynamic": "false", + "type": "object" + }, + "ingest-agent-policies": { + "properties": { + "description": { + "type": "text" + }, + "is_default": { + "type": "boolean" + }, + "is_default_fleet_server": { + "type": "boolean" + }, + "is_managed": { + "type": "boolean" + }, + "is_preconfigured": { + "type": "keyword" + }, + "monitoring_enabled": { + "index": false, + "type": "keyword" + }, + "name": { + "type": "keyword" + }, + "namespace": { + "type": "keyword" + }, + "package_policies": { + "type": "keyword" + }, + "revision": { + "type": "integer" + }, + "status": { + "type": "keyword" + }, + "updated_at": { + "type": "date" + }, + "updated_by": { + "type": "keyword" + } + } + }, + "ingest-outputs": { + "properties": { + "ca_sha256": { + "index": false, + "type": "keyword" + }, + "config": { + "type": "flattened" + }, + "config_yaml": { + "type": "text" + }, + "hosts": { + "type": "keyword" + }, + "is_default": { + "type": "boolean" + }, + "name": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + } + }, + "ingest-package-policies": { + "properties": { + "created_at": { + "type": "date" + }, + "created_by": { + "type": "keyword" + }, + "description": { + "type": "text" + }, + "enabled": { + "type": "boolean" + }, + "inputs": { + "enabled": false, + "properties": { + "compiled_input": { + "type": "flattened" + }, + "config": { + "type": "flattened" + }, + "enabled": { + "type": "boolean" + }, + "streams": { + "properties": { + "compiled_stream": { + "type": "flattened" + }, + "config": { + "type": "flattened" + }, + "data_stream": { + "properties": { + "dataset": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + } + }, + "enabled": { + "type": "boolean" + }, + "id": { + "type": "keyword" + }, + "vars": { + "type": "flattened" + } + }, + "type": "nested" + }, + "type": { + "type": "keyword" + }, + "vars": { + "type": "flattened" + } + }, + "type": "nested" + }, + "name": { + "type": "keyword" + }, + "namespace": { + "type": "keyword" + }, + "output_id": { + "type": "keyword" + }, + "package": { + "properties": { + "name": { + "type": "keyword" + }, + "title": { + "type": "keyword" + }, + "version": { + "type": "keyword" + } + } + }, + "policy_id": { + "type": "keyword" + }, + "revision": { + "type": "integer" + }, + "updated_at": { + "type": "date" + }, + "updated_by": { + "type": "keyword" + } + } + }, + "ingest_manager_settings": { + "properties": { + "fleet_server_hosts": { + "type": "keyword" + }, + "has_seen_add_data_notice": { + "index": false, + "type": "boolean" + }, + "has_seen_fleet_migration_notice": { + "index": false, + "type": "boolean" + } + } + }, + "inventory-view": { + "dynamic": "false", + "type": "object" + }, + "kql-telemetry": { + "properties": { + "optInCount": { + "type": "long" + }, + "optOutCount": { + "type": "long" + } + } + }, + "legacy-url-alias": { + "dynamic": "false", + "type": "object" + }, + "lens": { + "properties": { + "description": { + "type": "text" + }, + "expression": { + "doc_values": false, + "index": false, + "type": "keyword" + }, + "state": { + "type": "flattened" + }, + "title": { + "type": "text" + }, + "visualizationType": { + "type": "keyword" + } + } + }, + "lens-ui-telemetry": { + "properties": { + "count": { + "type": "integer" + }, + "date": { + "type": "date" + }, + "name": { + "type": "keyword" + }, + "type": { + "type": "keyword" + } + } + }, + "map": { + "properties": { + "bounds": { + "dynamic": "false", + "type": "object" + }, + "description": { + "type": "text" + }, + "layerListJSON": { + "type": "text" + }, + "mapStateJSON": { + "type": "text" + }, + "title": { + "type": "text" + }, + "uiStateJSON": { + "type": "text" + }, + "version": { + "type": "integer" + } + } + }, + "maps-telemetry": { + "enabled": false, + "type": "object" + }, + "metrics-explorer-view": { + "dynamic": "false", + "type": "object" + }, + "migrationVersion": { + "dynamic": "true", + "properties": { + "action": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "cases": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "cases-comments": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "cases-configure": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "cases-user-actions": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "config": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "dashboard": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "index-pattern": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "ingest-agent-policies": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "ingest-outputs": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "ingest-package-policies": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "ingest_manager_settings": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "search": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "space": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "visualization": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + } + } + }, + "ml-job": { + "properties": { + "datafeed_id": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "job_id": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "type": { + "type": "keyword" + } + } + }, + "ml-module": { + "dynamic": "false", + "properties": { + "datafeeds": { + "type": "object" + }, + "defaultIndexPattern": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "description": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "id": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "jobs": { + "type": "object" + }, + "logo": { + "type": "object" + }, + "query": { + "type": "object" + }, + "title": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + }, + "type": { + "fields": { + "keyword": { + "type": "keyword" + } + }, + "type": "text" + } + } + }, + "monitoring-telemetry": { + "properties": { + "reportedClusterUuids": { + "type": "keyword" + } + } + }, + "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" + }, + "hideChart": { + "doc_values": false, + "index": false, + "type": "boolean" + }, + "hits": { + "doc_values": false, + "index": false, + "type": "integer" + }, + "kibanaSavedObjectMeta": { + "properties": { + "searchSourceJSON": { + "index": false, + "type": "text" + } + } + }, + "sort": { + "doc_values": false, + "index": false, + "type": "keyword" + }, + "title": { + "type": "text" + }, + "version": { + "type": "integer" + } + } + }, + "search-session": { + "properties": { + "appId": { + "type": "keyword" + }, + "completed": { + "type": "date" + }, + "created": { + "type": "date" + }, + "expires": { + "type": "date" + }, + "idMapping": { + "enabled": false, + "type": "object" + }, + "initialState": { + "enabled": false, + "type": "object" + }, + "name": { + "type": "keyword" + }, + "persisted": { + "type": "boolean" + }, + "realmName": { + "type": "keyword" + }, + "realmType": { + "type": "keyword" + }, + "restoreState": { + "enabled": false, + "type": "object" + }, + "sessionId": { + "type": "keyword" + }, + "status": { + "type": "keyword" + }, + "touched": { + "type": "date" + }, + "urlGeneratorId": { + "type": "keyword" + }, + "username": { + "type": "keyword" + } + } + }, + "search-telemetry": { + "dynamic": "false", + "type": "object" + }, + "security-rule": { + "dynamic": "false", + "properties": { + "name": { + "type": "keyword" + }, + "rule_id": { + "type": "keyword" + }, + "version": { + "type": "long" + } + } + }, + "security-solution-signals-migration": { + "properties": { + "created": { + "index": false, + "type": "date" + }, + "createdBy": { + "index": false, + "type": "text" + }, + "destinationIndex": { + "index": false, + "type": "keyword" + }, + "error": { + "index": false, + "type": "text" + }, + "sourceIndex": { + "type": "keyword" + }, + "status": { + "index": false, + "type": "keyword" + }, + "taskId": { + "index": false, + "type": "keyword" + }, + "updated": { + "index": false, + "type": "date" + }, + "updatedBy": { + "index": false, + "type": "text" + }, + "version": { + "type": "long" + } + } + }, + "siem-detection-engine-rule-actions": { + "properties": { + "actions": { + "properties": { + "action_type_id": { + "type": "keyword" + }, + "group": { + "type": "keyword" + }, + "id": { + "type": "keyword" + }, + "params": { + "enabled": false, + "type": "object" + } + } + }, + "alertThrottle": { + "type": "keyword" + }, + "ruleAlertId": { + "type": "keyword" + }, + "ruleThrottle": { + "type": "keyword" + } + } + }, + "siem-detection-engine-rule-status": { + "properties": { + "alertId": { + "type": "keyword" + }, + "bulkCreateTimeDurations": { + "type": "float" + }, + "gap": { + "type": "text" + }, + "lastFailureAt": { + "type": "date" + }, + "lastFailureMessage": { + "type": "text" + }, + "lastLookBackDate": { + "type": "date" + }, + "lastSuccessAt": { + "type": "date" + }, + "lastSuccessMessage": { + "type": "text" + }, + "searchAfterTimeDurations": { + "type": "float" + }, + "status": { + "type": "keyword" + }, + "statusDate": { + "type": "date" + } + } + }, + "siem-ui-timeline": { + "properties": { + "columns": { + "properties": { + "aggregatable": { + "type": "boolean" + }, + "category": { + "type": "keyword" + }, + "columnHeaderType": { + "type": "keyword" + }, + "description": { + "type": "text" + }, + "example": { + "type": "text" + }, + "id": { + "type": "keyword" + }, + "indexes": { + "type": "keyword" + }, + "name": { + "type": "text" + }, + "placeholder": { + "type": "text" + }, + "searchable": { + "type": "boolean" + }, + "type": { + "type": "keyword" + } + } + }, + "created": { + "type": "date" + }, + "createdBy": { + "type": "text" + }, + "dataProviders": { + "properties": { + "and": { + "properties": { + "enabled": { + "type": "boolean" + }, + "excluded": { + "type": "boolean" + }, + "id": { + "type": "keyword" + }, + "kqlQuery": { + "type": "text" + }, + "name": { + "type": "text" + }, + "queryMatch": { + "properties": { + "displayField": { + "type": "text" + }, + "displayValue": { + "type": "text" + }, + "field": { + "type": "text" + }, + "operator": { + "type": "text" + }, + "value": { + "type": "text" + } + } + }, + "type": { + "type": "text" + } + } + }, + "enabled": { + "type": "boolean" + }, + "excluded": { + "type": "boolean" + }, + "id": { + "type": "keyword" + }, + "kqlQuery": { + "type": "text" + }, + "name": { + "type": "text" + }, + "queryMatch": { + "properties": { + "displayField": { + "type": "text" + }, + "displayValue": { + "type": "text" + }, + "field": { + "type": "text" + }, + "operator": { + "type": "text" + }, + "value": { + "type": "text" + } + } + }, + "type": { + "type": "text" + } + } + }, + "dateRange": { + "properties": { + "end": { + "type": "date" + }, + "start": { + "type": "date" + } + } + }, + "description": { + "type": "text" + }, + "eqlOptions": { + "properties": { + "eventCategoryField": { + "type": "text" + }, + "query": { + "type": "text" + }, + "size": { + "type": "text" + }, + "tiebreakerField": { + "type": "text" + }, + "timestampField": { + "type": "text" + } + } + }, + "eventType": { + "type": "keyword" + }, + "excludedRowRendererIds": { + "type": "text" + }, + "favorite": { + "properties": { + "favoriteDate": { + "type": "date" + }, + "fullName": { + "type": "text" + }, + "keySearch": { + "type": "text" + }, + "userName": { + "type": "text" + } + } + }, + "filters": { + "properties": { + "exists": { + "type": "text" + }, + "match_all": { + "type": "text" + }, + "meta": { + "properties": { + "alias": { + "type": "text" + }, + "controlledBy": { + "type": "text" + }, + "disabled": { + "type": "boolean" + }, + "field": { + "type": "text" + }, + "formattedValue": { + "type": "text" + }, + "index": { + "type": "keyword" + }, + "key": { + "type": "keyword" + }, + "negate": { + "type": "boolean" + }, + "params": { + "type": "text" + }, + "type": { + "type": "keyword" + }, + "value": { + "type": "text" + } + } + }, + "missing": { + "type": "text" + }, + "query": { + "type": "text" + }, + "range": { + "type": "text" + }, + "script": { + "type": "text" + } + } + }, + "indexNames": { + "type": "text" + }, + "kqlMode": { + "type": "keyword" + }, + "kqlQuery": { + "properties": { + "filterQuery": { + "properties": { + "kuery": { + "properties": { + "expression": { + "type": "text" + }, + "kind": { + "type": "keyword" + } + } + }, + "serializedQuery": { + "type": "text" + } + } + } + } + }, + "savedQueryId": { + "type": "keyword" + }, + "sort": { + "dynamic": "false", + "properties": { + "columnId": { + "type": "keyword" + }, + "columnType": { + "type": "keyword" + }, + "sortDirection": { + "type": "keyword" + } + } + }, + "status": { + "type": "keyword" + }, + "templateTimelineId": { + "type": "text" + }, + "templateTimelineVersion": { + "type": "integer" + }, + "timelineType": { + "type": "keyword" + }, + "title": { + "type": "text" + }, + "updated": { + "type": "date" + }, + "updatedBy": { + "type": "text" + } + } + }, + "siem-ui-timeline-note": { + "properties": { + "created": { + "type": "date" + }, + "createdBy": { + "type": "text" + }, + "eventId": { + "type": "keyword" + }, + "note": { + "type": "text" + }, + "timelineId": { + "type": "keyword" + }, + "updated": { + "type": "date" + }, + "updatedBy": { + "type": "text" + } + } + }, + "siem-ui-timeline-pinned-event": { + "properties": { + "created": { + "type": "date" + }, + "createdBy": { + "type": "text" + }, + "eventId": { + "type": "keyword" + }, + "timelineId": { + "type": "keyword" + }, + "updated": { + "type": "date" + }, + "updatedBy": { + "type": "text" + } + } + }, + "space": { + "properties": { + "_reserved": { + "type": "boolean" + }, + "color": { + "type": "keyword" + }, + "description": { + "type": "text" + }, + "disabledFeatures": { + "type": "keyword" + }, + "imageUrl": { + "index": false, + "type": "text" + }, + "initials": { + "type": "keyword" + }, + "name": { + "fields": { + "keyword": { + "ignore_above": 2048, + "type": "keyword" + } + }, + "type": "text" + } + } + }, + "spaces-usage-stats": { + "dynamic": "false", + "type": "object" + }, + "tag": { + "properties": { + "color": { + "type": "text" + }, + "description": { + "type": "text" + }, + "name": { + "type": "text" + } + } + }, + "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" + }, + "upgrade-assistant-reindex-operation": { + "properties": { + "errorMessage": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "indexName": { + "type": "keyword" + }, + "lastCompletedStep": { + "type": "long" + }, + "locked": { + "type": "date" + }, + "newIndexName": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "reindexOptions": { + "properties": { + "openAndClose": { + "type": "boolean" + }, + "queueSettings": { + "properties": { + "queuedAt": { + "type": "long" + }, + "startedAt": { + "type": "long" + } + } + } + } + }, + "reindexTaskId": { + "fields": { + "keyword": { + "ignore_above": 256, + "type": "keyword" + } + }, + "type": "text" + }, + "reindexTaskPercComplete": { + "type": "float" + }, + "runningReindexCount": { + "type": "integer" + }, + "status": { + "type": "integer" + } + } + }, + "upgrade-assistant-telemetry": { + "properties": { + "features": { + "properties": { + "deprecation_logging": { + "properties": { + "enabled": { + "null_value": true, + "type": "boolean" + } + } + } + } + }, + "ui_open": { + "properties": { + "cluster": { + "null_value": 0, + "type": "long" + }, + "indices": { + "null_value": 0, + "type": "long" + }, + "overview": { + "null_value": 0, + "type": "long" + } + } + }, + "ui_reindex": { + "properties": { + "close": { + "null_value": 0, + "type": "long" + }, + "open": { + "null_value": 0, + "type": "long" + }, + "start": { + "null_value": 0, + "type": "long" + }, + "stop": { + "null_value": 0, + "type": "long" + } + } + } + } + }, + "uptime-dynamic-settings": { + "dynamic": "false", + "type": "object" + }, + "url": { + "properties": { + "accessCount": { + "type": "long" + }, + "accessDate": { + "type": "date" + }, + "createDate": { + "type": "date" + }, + "url": { + "fields": { + "keyword": { + "ignore_above": 2048, + "type": "keyword" + } + }, + "type": "text" + } + } + }, + "usage-counters": { + "dynamic": "false", + "properties": { + "domainId": { + "type": "keyword" + } + } + }, + "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" + } + } + }, + "workplace_search_telemetry": { + "dynamic": "false", + "type": "object" + } + } + }, + "settings": { + "index": { + "auto_expand_replicas": "0-1", + "number_of_replicas": "1", + "number_of_shards": "1", + "priority": "10", + "refresh_interval": "1s" + } + } + } +} \ No newline at end of file diff --git a/x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json b/x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json new file mode 100644 index 0000000000000..323dbb67d54b8 --- /dev/null +++ b/x-pack/test/functional/fixtures/kbn_archiver/timelion/feature_controls.json @@ -0,0 +1,52 @@ +{ + "attributes": { + "buildNum": 9007199254740991, + "defaultIndex": "logstash-*" + }, + "coreMigrationVersion": "7.14.0", + "id": "7.0.0", + "migrationVersion": { + "config": "7.13.0" + }, + "references": [], + "type": "config", + "updated_at": "2019-01-22T19:32:02.235Z", + "version": "WzQsMl0=" +} + +{ + "attributes": { + "description": "", + "hits": 0, + "timelion_chart_height": 275, + "timelion_columns": 2, + "timelion_interval": "auto", + "timelion_rows": 2, + "timelion_sheet": [ + ".es(*)" + ], + "title": "i-exist", + "version": 1 + }, + "coreMigrationVersion": "7.14.0", + "id": "i-exist", + "references": [], + "type": "timelion-sheet", + "version": "WzYsMl0=" +} + +{ + "attributes": { + "fields": "[{\"name\":\"@message\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"@message.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"@tags\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"@tags.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"@timestamp\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"_id\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"_index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"_score\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":false,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"_source\",\"type\":\"_source\",\"count\":0,\"scripted\":false,\"searchable\":false,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"_type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"agent\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"agent.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"bytes\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"clientip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"extension\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"extension.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.coordinates\",\"type\":\"geo_point\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.dest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.src\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.srcdest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"headings\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"headings.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"host\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"host.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"id\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"index.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"ip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"links\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"links.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"machine.os\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"machine.os.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"machine.ram\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"memory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"meta.char\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"meta.related\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"meta.user.firstname\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"meta.user.lastname\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"phpmemory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"referer\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:modified_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:published_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:section\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.article:section.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:tag\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.article:tag.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:image:height\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:image:height.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:image:width\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:image:width.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:site_name\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:site_name.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:type.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:card\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:card.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:site\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:site.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"request\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"request.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"response\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"response.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"spaces\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"spaces.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"utc_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"xss\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"xss.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"kilobytes\",\"type\":\"number\",\"count\":0,\"scripted\":true,\"script\":\"doc['bytes'].value / 1000\",\"lang\":\"painless\",\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"machine os raw\",\"type\":\"string\",\"count\":0,\"scripted\":true,\"script\":\"doc['machine.os.raw'].value\",\"lang\":\"painless\",\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false}]", + "timeFieldName": "@timestamp", + "title": "logstash-*" + }, + "coreMigrationVersion": "7.14.0", + "id": "logstash-*", + "migrationVersion": { + "index-pattern": "7.11.0" + }, + "references": [], + "type": "index-pattern", + "version": "WzUsMl0=" +} \ No newline at end of file diff --git a/x-pack/test/functional/fixtures/kbn_archiver/timelion/timelion_custom_space.json b/x-pack/test/functional/fixtures/kbn_archiver/timelion/timelion_custom_space.json new file mode 100644 index 0000000000000..f27149f9d7eb6 --- /dev/null +++ b/x-pack/test/functional/fixtures/kbn_archiver/timelion/timelion_custom_space.json @@ -0,0 +1,20 @@ +{ + "attributes": { + "description": "", + "hits": 0, + "timelion_chart_height": 275, + "timelion_columns": 2, + "timelion_interval": "auto", + "timelion_rows": 2, + "timelion_sheet": [ + ".es(*).label('custom space sheet')" + ], + "title": "i-exist", + "version": 1 + }, + "coreMigrationVersion": "7.14.0", + "id": "i-exist", + "references": [], + "type": "timelion-sheet", + "version": "WzcsMl0=" +} \ No newline at end of file diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 0fc85f78ac90b..d02bc591a80a2 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -491,6 +491,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont await testSubjects.click('lnsApp_saveAndReturnButton'); }, + async expectSaveAndReturnButtonDisabled() { + const button = await testSubjects.find('lnsApp_saveAndReturnButton', 10000); + const disabledAttr = await button.getAttribute('disabled'); + expect(disabledAttr).to.be('true'); + }, + async editDimensionLabel(label: string) { await testSubjects.setValue('indexPattern-label-edit', label, { clearWithKeyboard: true }); }, diff --git a/x-pack/test/functional/page_objects/synthetics_integration_page.ts b/x-pack/test/functional/page_objects/synthetics_integration_page.ts index 56a67d9e6fbd4..3321234a345e4 100644 --- a/x-pack/test/functional/page_objects/synthetics_integration_page.ts +++ b/x-pack/test/functional/page_objects/synthetics_integration_page.ts @@ -86,7 +86,7 @@ export function SyntheticsIntegrationPageProvider({ * @params {value} the value of the input */ async fillTextInputByTestSubj(testSubj: string, value: string) { - const field = await testSubjects.find(testSubj, 5000); + const field = await testSubjects.find(testSubj); await field.scrollIntoViewIfNecessary({ bottomOffset: fixedFooterHeight }); await field.click(); await field.clearValue(); @@ -118,7 +118,7 @@ export function SyntheticsIntegrationPageProvider({ */ async findHTTPAdvancedOptionsAccordion() { await this.ensureIsOnPackagePage(); - const accordion = await testSubjects.find('syntheticsHTTPAdvancedFieldsAccordion', 5000); + const accordion = await testSubjects.find('syntheticsHTTPAdvancedFieldsAccordion'); return accordion; }, diff --git a/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts b/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts index 2626ef2421f0b..fd3a5abc0e4bf 100644 --- a/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts +++ b/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts @@ -30,7 +30,7 @@ interface MonitoringStats { non_recurring: number; owner_ids: number; estimated_schedule_density: number[]; - capacity_requirments: { + capacity_requirements: { per_minute: number; per_hour: number; per_day: number; @@ -218,9 +218,9 @@ export default function ({ getService }: FtrProviderContext) { expect(typeof workload.non_recurring).to.eql('number'); expect(typeof workload.owner_ids).to.eql('number'); - expect(typeof workload.capacity_requirments.per_minute).to.eql('number'); - expect(typeof workload.capacity_requirments.per_hour).to.eql('number'); - expect(typeof workload.capacity_requirments.per_day).to.eql('number'); + expect(typeof workload.capacity_requirements.per_minute).to.eql('number'); + expect(typeof workload.capacity_requirements.per_hour).to.eql('number'); + expect(typeof workload.capacity_requirements.per_day).to.eql('number'); expect(Array.isArray(workload.estimated_schedule_density)).to.eql(true);