From 33c303df2b8257546507b60d847c235920e70e48 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Fri, 8 Nov 2024 14:14:41 +0100 Subject: [PATCH 1/3] [ML] AIOps: Optimize initial load bundles. (#198786) ## Summary Part of https://github.com/elastic/kibana/issues/194171. The AIOps plugin loads quite some bundle chunks on the first Kibana load. On main it currently looks like this on page load: ![CleanShot 2024-11-04 at 14 56 52@2x](https://github.com/user-attachments/assets/cbabeaa2-848c-4970-aea5-b06befed0bec) This means while the `aiops.plugin.js` bundle has just 10KB, we load 290KB in total via async bundles on every Kibana full page load. This PR refactors how embeddables and UI actions get initialized to avoid loading any additional async bundles on page load. This increases `aiops.plugin.js` to ~15KB, but gets rid of all the rest! ![CleanShot 2024-11-04 at 15 02 10@2x](https://github.com/user-attachments/assets/557e240f-2c1c-434d-a936-dddb11ab68b6) ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) --- packages/kbn-optimizer/limits.yml | 2 +- .../categorize_field_actions.ts | 2 +- .../components/log_categorization/index.ts | 1 - .../log_categorization/show_flyout.tsx | 2 +- .../embeddable_change_point_chart_factory.tsx | 15 +++++----- .../embeddable_pattern_analysis_factory.tsx | 15 +++++----- x-pack/plugins/aiops/public/plugin.tsx | 28 +++++-------------- .../aiops/public/shared_lazy_components.tsx | 20 +++++++++++++ .../ui_actions/change_point_action_context.ts | 3 +- .../plugins/aiops/public/ui_actions/index.ts | 2 +- .../ui_actions/open_change_point_ml.tsx | 13 +++++---- 11 files changed, 57 insertions(+), 46 deletions(-) diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 432211d395f61..b0357853720cb 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -2,7 +2,7 @@ pageLoadAssetSize: actions: 20000 advancedSettings: 27596 aiAssistantManagementSelection: 19146 - aiops: 10000 + aiops: 16000 alerting: 106936 apm: 64385 banners: 17946 diff --git a/x-pack/plugins/aiops/public/components/log_categorization/categorize_field_actions.ts b/x-pack/plugins/aiops/public/components/log_categorization/categorize_field_actions.ts index 10c6311d065db..e5e6ede863558 100644 --- a/x-pack/plugins/aiops/public/components/log_categorization/categorize_field_actions.ts +++ b/x-pack/plugins/aiops/public/components/log_categorization/categorize_field_actions.ts @@ -10,7 +10,6 @@ import { createAction } from '@kbn/ui-actions-plugin/public'; import type { CoreStart } from '@kbn/core/public'; import { ACTION_CATEGORIZE_FIELD, type CategorizeFieldContext } from '@kbn/ml-ui-actions'; import type { AiopsPluginStartDeps } from '../../types'; -import { showCategorizeFlyout } from './show_flyout'; export const createCategorizeFieldAction = (coreStart: CoreStart, plugins: AiopsPluginStartDeps) => createAction({ @@ -25,6 +24,7 @@ export const createCategorizeFieldAction = (coreStart: CoreStart, plugins: Aiops }, execute: async (context: CategorizeFieldContext) => { const { field, dataView, originatingApp, additionalFilter } = context; + const { showCategorizeFlyout } = await import('./show_flyout'); showCategorizeFlyout(field, dataView, coreStart, plugins, originatingApp, additionalFilter); }, }); diff --git a/x-pack/plugins/aiops/public/components/log_categorization/index.ts b/x-pack/plugins/aiops/public/components/log_categorization/index.ts index ace01d4f03389..748a0f8486420 100644 --- a/x-pack/plugins/aiops/public/components/log_categorization/index.ts +++ b/x-pack/plugins/aiops/public/components/log_categorization/index.ts @@ -7,7 +7,6 @@ export type { LogCategorizationAppStateProps } from './log_categorization_app_state'; import { LogCategorizationAppState } from './log_categorization_app_state'; -export { createCategorizeFieldAction } from './categorize_field_actions'; // required for dynamic import using React.lazy() // eslint-disable-next-line import/no-default-export diff --git a/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx b/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx index a97f4c7f7fe79..6dae21c36222d 100644 --- a/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx +++ b/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx @@ -36,7 +36,7 @@ export async function showCategorizeFlyout( ): Promise { const { overlays, application, i18n } = coreStart; - return new Promise(async (resolve, reject) => { + return new Promise((resolve, reject) => { try { const onFlyoutClose = () => { flyoutSession.close(); diff --git a/x-pack/plugins/aiops/public/embeddables/change_point_chart/embeddable_change_point_chart_factory.tsx b/x-pack/plugins/aiops/public/embeddables/change_point_chart/embeddable_change_point_chart_factory.tsx index 2ce1a46780db1..5f7ff6ff67f76 100644 --- a/x-pack/plugins/aiops/public/embeddables/change_point_chart/embeddable_change_point_chart_factory.tsx +++ b/x-pack/plugins/aiops/public/embeddables/change_point_chart/embeddable_change_point_chart_factory.tsx @@ -15,13 +15,6 @@ import type { DataView } from '@kbn/data-views-plugin/common'; import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/common'; import type { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { i18n } from '@kbn/i18n'; -import { - apiHasExecutionContext, - fetch$, - initializeTimeRange, - initializeTitles, - useBatchedPublishingSubjects, -} from '@kbn/presentation-publishing'; import fastIsEqual from 'fast-deep-equal'; import { cloneDeep } from 'lodash'; @@ -61,6 +54,14 @@ export const getChangePointChartEmbeddableFactory = ( return serializedState; }, buildEmbeddable: async (state, buildApi, uuid, parentApi) => { + const { + apiHasExecutionContext, + fetch$, + initializeTimeRange, + initializeTitles, + useBatchedPublishingSubjects, + } = await import('@kbn/presentation-publishing'); + const [coreStart, pluginStart] = await getStartServices(); const { diff --git a/x-pack/plugins/aiops/public/embeddables/pattern_analysis/embeddable_pattern_analysis_factory.tsx b/x-pack/plugins/aiops/public/embeddables/pattern_analysis/embeddable_pattern_analysis_factory.tsx index d84043ea5f637..e0017668b338c 100644 --- a/x-pack/plugins/aiops/public/embeddables/pattern_analysis/embeddable_pattern_analysis_factory.tsx +++ b/x-pack/plugins/aiops/public/embeddables/pattern_analysis/embeddable_pattern_analysis_factory.tsx @@ -15,13 +15,6 @@ import type { DataView } from '@kbn/data-views-plugin/common'; import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/common'; import type { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { i18n } from '@kbn/i18n'; -import { - apiHasExecutionContext, - fetch$, - initializeTimeRange, - initializeTitles, - useBatchedPublishingSubjects, -} from '@kbn/presentation-publishing'; import fastIsEqual from 'fast-deep-equal'; import { cloneDeep } from 'lodash'; import React, { useMemo } from 'react'; @@ -58,6 +51,14 @@ export const getPatternAnalysisEmbeddableFactory = ( return serializedState; }, buildEmbeddable: async (state, buildApi, uuid, parentApi) => { + const { + apiHasExecutionContext, + fetch$, + initializeTimeRange, + initializeTitles, + useBatchedPublishingSubjects, + } = await import('@kbn/presentation-publishing'); + const [coreStart, pluginStart] = await getStartServices(); const { diff --git a/x-pack/plugins/aiops/public/plugin.tsx b/x-pack/plugins/aiops/public/plugin.tsx index ceb378b0f29bf..5863ea03b3072 100755 --- a/x-pack/plugins/aiops/public/plugin.tsx +++ b/x-pack/plugins/aiops/public/plugin.tsx @@ -8,15 +8,18 @@ import type { CoreStart, Plugin } from '@kbn/core/public'; import { type CoreSetup } from '@kbn/core/public'; import { firstValueFrom } from 'rxjs'; -import { dynamic } from '@kbn/shared-ux-utility'; import { getChangePointDetectionComponent } from './shared_components'; +import { LogCategorizationForDiscover as PatternAnalysisComponent } from './shared_lazy_components'; import type { AiopsPluginSetup, AiopsPluginSetupDeps, AiopsPluginStart, AiopsPluginStartDeps, } from './types'; +import { registerEmbeddables } from './embeddables'; +import { registerAiopsUiActions } from './ui_actions'; +import { registerChangePointChartsAttachment } from './cases/register_change_point_charts_attachment'; export type AiopsCoreSetup = CoreSetup; @@ -27,20 +30,8 @@ export class AiopsPlugin core: AiopsCoreSetup, { embeddable, cases, licensing, uiActions }: AiopsPluginSetupDeps ) { - Promise.all([ - firstValueFrom(licensing.license$), - import('./embeddables'), - import('./ui_actions'), - import('./cases/register_change_point_charts_attachment'), - core.getStartServices(), - ]).then( - ([ - license, - { registerEmbeddables }, - { registerAiopsUiActions }, - { registerChangePointChartsAttachment }, - [coreStart, pluginStart], - ]) => { + Promise.all([firstValueFrom(licensing.license$), core.getStartServices()]).then( + ([license, [coreStart, pluginStart]]) => { const { canUseAiops } = coreStart.application.capabilities.ml; if (license.hasAtLeast('platinum') && canUseAiops) { @@ -69,12 +60,7 @@ export class AiopsPlugin ); return getPatternAnalysisAvailable(plugins.licensing); }, - PatternAnalysisComponent: dynamic( - async () => - import( - './components/log_categorization/log_categorization_for_embeddable/log_categorization_for_discover_wrapper' - ) - ), + PatternAnalysisComponent, }; } diff --git a/x-pack/plugins/aiops/public/shared_lazy_components.tsx b/x-pack/plugins/aiops/public/shared_lazy_components.tsx index fe9e31f146590..b34efdd6bff04 100644 --- a/x-pack/plugins/aiops/public/shared_lazy_components.tsx +++ b/x-pack/plugins/aiops/public/shared_lazy_components.tsx @@ -12,6 +12,7 @@ import { EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui'; import type { LogRateAnalysisAppStateProps } from './components/log_rate_analysis'; import type { LogRateAnalysisContentWrapperProps } from './components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper'; import type { LogCategorizationAppStateProps } from './components/log_categorization'; +import type { LogCategorizationEmbeddableWrapperProps } from './components/log_categorization/log_categorization_for_embeddable/log_categorization_for_discover_wrapper'; import type { ChangePointDetectionAppStateProps } from './components/change_point_detection'; const LogRateAnalysisAppStateLazy = React.lazy(() => import('./components/log_rate_analysis')); @@ -58,6 +59,25 @@ export const LogCategorization: FC = (props) => ); +const LogCategorizationForDiscoverLazy = React.lazy( + () => + import( + './components/log_categorization/log_categorization_for_embeddable/log_categorization_for_discover_wrapper' + ) +); + +/** + * Lazy-wrapped LogCategorizationForDiscover React component + * @param {LogCategorizationEmbeddableWrapperProps} props - properties specifying the data on which to run the analysis. + */ +export const LogCategorizationForDiscover: FC = ( + props +) => ( + + + +); + const ChangePointDetectionLazy = React.lazy(() => import('./components/change_point_detection')); /** * Lazy-wrapped ChangePointDetectionAppStateProps React component diff --git a/x-pack/plugins/aiops/public/ui_actions/change_point_action_context.ts b/x-pack/plugins/aiops/public/ui_actions/change_point_action_context.ts index a4307b69d3fac..3bf2eee922560 100644 --- a/x-pack/plugins/aiops/public/ui_actions/change_point_action_context.ts +++ b/x-pack/plugins/aiops/public/ui_actions/change_point_action_context.ts @@ -6,7 +6,8 @@ */ import { isPopulatedObject } from '@kbn/ml-is-populated-object'; -import { apiIsOfType, type EmbeddableApiContext } from '@kbn/presentation-publishing'; +import type { EmbeddableApiContext } from '@kbn/presentation-publishing'; +import { apiIsOfType } from '@kbn/presentation-publishing/interfaces/has_type'; import { EMBEDDABLE_CHANGE_POINT_CHART_TYPE } from '@kbn/aiops-change-point-detection/constants'; import type { ChangePointEmbeddableApi } from '../embeddables/change_point_chart/types'; diff --git a/x-pack/plugins/aiops/public/ui_actions/index.ts b/x-pack/plugins/aiops/public/ui_actions/index.ts index 6081541c448e7..b0b39083aabd4 100644 --- a/x-pack/plugins/aiops/public/ui_actions/index.ts +++ b/x-pack/plugins/aiops/public/ui_actions/index.ts @@ -16,7 +16,7 @@ import type { CoreStart } from '@kbn/core/public'; import { createAddChangePointChartAction } from './create_change_point_chart'; import { createOpenChangePointInMlAppAction } from './open_change_point_ml'; import type { AiopsPluginStartDeps } from '../types'; -import { createCategorizeFieldAction } from '../components/log_categorization'; +import { createCategorizeFieldAction } from '../components/log_categorization/categorize_field_actions'; import { createAddPatternAnalysisEmbeddableAction } from './create_pattern_analysis_action'; import { createAddLogRateAnalysisEmbeddableAction } from './create_log_rate_analysis_actions'; diff --git a/x-pack/plugins/aiops/public/ui_actions/open_change_point_ml.tsx b/x-pack/plugins/aiops/public/ui_actions/open_change_point_ml.tsx index 8d2e4f1bbd089..3d52d34a72b85 100644 --- a/x-pack/plugins/aiops/public/ui_actions/open_change_point_ml.tsx +++ b/x-pack/plugins/aiops/public/ui_actions/open_change_point_ml.tsx @@ -10,17 +10,17 @@ import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public'; import { i18n } from '@kbn/i18n'; import type { CoreStart } from '@kbn/core/public'; import type { TimeRange } from '@kbn/es-query'; -import { apiHasParentApi, apiPublishesTimeRange } from '@kbn/presentation-publishing'; import type { ChangePointEmbeddableApi } from '../embeddables/change_point_chart/types'; import type { AiopsPluginStartDeps } from '../types'; import type { ChangePointChartActionContext } from './change_point_action_context'; -import { isChangePointChartEmbeddableContext } from './change_point_action_context'; export const OPEN_CHANGE_POINT_IN_ML_APP_ACTION = 'openChangePointInMlAppAction'; -export const getEmbeddableTimeRange = ( +const getEmbeddableTimeRange = async ( embeddable: ChangePointEmbeddableApi -): TimeRange | undefined => { +): Promise => { + const { apiHasParentApi, apiPublishesTimeRange } = await import('@kbn/presentation-publishing'); + let timeRange = embeddable.timeRange$?.getValue(); if (!timeRange && apiHasParentApi(embeddable) && apiPublishesTimeRange(embeddable.parentApi)) { @@ -45,6 +45,7 @@ export function createOpenChangePointInMlAppAction( defaultMessage: 'Open in AIOps Labs', }), async getHref(context): Promise { + const { isChangePointChartEmbeddableContext } = await import('./change_point_action_context'); if (!isChangePointChartEmbeddableContext(context)) { throw new IncompatibleActionError(); } @@ -57,7 +58,7 @@ export function createOpenChangePointInMlAppAction( page: 'aiops/change_point_detection', pageState: { index: dataViewId.getValue(), - timeRange: getEmbeddableTimeRange(context.embeddable), + timeRange: await getEmbeddableTimeRange(context.embeddable), fieldConfigs: [ { fn: fn.getValue(), @@ -69,6 +70,7 @@ export function createOpenChangePointInMlAppAction( }); }, async execute(context) { + const { isChangePointChartEmbeddableContext } = await import('./change_point_action_context'); if (!isChangePointChartEmbeddableContext(context)) { throw new IncompatibleActionError(); } @@ -78,6 +80,7 @@ export function createOpenChangePointInMlAppAction( } }, async isCompatible(context) { + const { isChangePointChartEmbeddableContext } = await import('./change_point_action_context'); return isChangePointChartEmbeddableContext(context); }, }; From aad3a4420135ab3d52ee33be0541fd06a3ad89e4 Mon Sep 17 00:00:00 2001 From: Vadim Kibana <82822460+vadimkibana@users.noreply.github.com> Date: Fri, 8 Nov 2024 15:07:51 +0100 Subject: [PATCH 2/3] [ES|QL] Function location parsing tests (#199466) ## Summary Closes https://github.com/elastic/kibana/issues/199319 After debugging it this morning I realized that there is no bug in the parser, per se. But the bug is in all the places where we cut a slice of text from the source text based on the positions reported in AST. So, this patch does not contain a fix, but just some tests I used for debugging. The ANTLR parser reports positions in Unicode code points, not in UTF-16 offsets (which are used by JavaScript). Which means, given an AST `node`, to find its source text we often do: ```js text.slice(node.location.min, node.location.max + 1); ``` That is not correct because it uses UTF-16 offsets to compute the `.slice()`, which will incorrectly cut text when there are characters that are encoded as two bytes in UTF-16. The correct way is to use Unicode codepoints, which can be done like so: ```js [...text].slice(node.location.min, node.location.max + 1).join(''); ``` ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) --- .../src/parser/__tests__/function.test.ts | 84 +++++++++++++++++++ packages/kbn-esql-ast/src/parser/helpers.ts | 13 ++- 2 files changed, 90 insertions(+), 7 deletions(-) diff --git a/packages/kbn-esql-ast/src/parser/__tests__/function.test.ts b/packages/kbn-esql-ast/src/parser/__tests__/function.test.ts index d05ed36204b17..486feae97f98c 100644 --- a/packages/kbn-esql-ast/src/parser/__tests__/function.test.ts +++ b/packages/kbn-esql-ast/src/parser/__tests__/function.test.ts @@ -8,6 +8,7 @@ */ import { parse } from '..'; +import { EsqlQuery } from '../../query'; import { Walker } from '../../walker'; describe('function AST nodes', () => { @@ -323,3 +324,86 @@ describe('function AST nodes', () => { }); }); }); + +describe('location', () => { + const getFunctionTexts = (src: string) => { + const query = EsqlQuery.fromSrc(src); + const functions = Walker.matchAll(query.ast, { type: 'function' }); + const texts: string[] = functions.map((fn) => { + return [...src].slice(fn.location.min, fn.location.max + 1).join(''); + }); + + return texts; + }; + + it('correctly cuts out function source texts', () => { + const texts = getFunctionTexts( + 'FROM index | LIMIT 1 | STATS agg() | LIMIT 2 | STATS max(a, b, c), max2(d.e)' + ); + + expect(texts).toEqual(['agg()', 'max(a, b, c)', 'max2(d.e)']); + }); + + it('functions in binary expressions', () => { + const texts = getFunctionTexts('FROM index | STATS foo = agg(f1) + agg(f2), a.b = agg(f3)'); + + expect(texts).toEqual([ + 'foo = agg(f1) + agg(f2)', + 'agg(f1) + agg(f2)', + 'agg(f1)', + 'agg(f2)', + 'a.b = agg(f3)', + 'agg(f3)', + ]); + }); + + it('with the simplest comment after function name identifier', () => { + const texts1 = getFunctionTexts('FROM index | STATS agg/* */(1)'); + expect(texts1).toEqual(['agg/* */(1)']); + + const texts2 = getFunctionTexts('FROM index | STATS agg/* A */(a)'); + expect(texts2).toEqual(['agg/* A */(a)']); + + const texts3 = getFunctionTexts('FROM index | STATS agg /* A */ (*)'); + expect(texts3).toEqual(['agg /* A */ (*)']); + }); + + it('with the simplest emoji comment after function name identifier', () => { + const texts = getFunctionTexts('FROM index | STATS agg/* 😎 */(*)'); + expect(texts).toEqual(['agg/* 😎 */(*)']); + }); + + it('with the simplest emoji comment after function name identifier, followed by another arg', () => { + const texts = getFunctionTexts('FROM index | STATS agg/* 😎 */(*), abc'); + expect(texts).toEqual(['agg/* 😎 */(*)']); + }); + + it('simple emoji comment twice', () => { + const texts = getFunctionTexts('FROM index | STATS agg/* 😎 */(*), max/* 😎 */(*)'); + expect(texts).toEqual(['agg/* 😎 */(*)', 'max/* 😎 */(*)']); + }); + + it('with comment and emoji after function name identifier', () => { + const texts = getFunctionTexts('FROM index | STATS agg /* haha 😅 */ (*)'); + + expect(texts).toEqual(['agg /* haha 😅 */ (*)']); + }); + + it('with comment inside argument list', () => { + const texts = getFunctionTexts('FROM index | STATS agg ( /* haha 😅 */ )'); + + expect(texts).toEqual(['agg ( /* haha 😅 */ )']); + }); + + it('with emoji and comment in argument lists', () => { + const texts = getFunctionTexts( + 'FROM index | STATS agg( /* haha 😅 */ max(foo), bar, baz), test( /* asdf */ * /* asdf */)' + ); + + expect(texts).toEqual([ + 'agg( /* haha 😅 */ max(foo), bar, baz)', + 'max(foo)', + 'test( /* asdf */ * /* asdf */)', + ]); + }); +}); diff --git a/packages/kbn-esql-ast/src/parser/helpers.ts b/packages/kbn-esql-ast/src/parser/helpers.ts index f11cb396f2980..528176684418f 100644 --- a/packages/kbn-esql-ast/src/parser/helpers.ts +++ b/packages/kbn-esql-ast/src/parser/helpers.ts @@ -41,17 +41,16 @@ export const formatIdentifierParts = (parts: string[]): string => parts.map(formatIdentifier).join('.'); export const getPosition = ( - token: Pick | null, - lastToken?: Pick | undefined + start: Pick | null, + stop?: Pick | undefined ) => { - if (!token || token.start < 0) { + if (!start || start.start < 0) { return { min: 0, max: 0 }; } - const endFirstToken = token.stop > -1 ? Math.max(token.stop + 1, token.start) : undefined; - const endLastToken = lastToken?.stop; + const endFirstToken = start.stop > -1 ? Math.max(start.stop + 1, start.start) : undefined; return { - min: token.start, - max: endLastToken ?? endFirstToken ?? Infinity, + min: start.start, + max: stop?.stop ?? endFirstToken ?? Infinity, }; }; From cbebdaee030103438ca91f61f7df9be57e701a72 Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Fri, 8 Nov 2024 14:09:52 +0000 Subject: [PATCH 3/3] [ML] Adding missing aria labels to eui button icons (#199447) Fix to stop browser console errors in ML overview page. Also adds some missing translations. ![image](https://github.com/user-attachments/assets/38f3b5b1-8d44-4589-b82f-336150f2395f) --- .../collapsible_panel/collapsible_panel.tsx | 14 ++++++++++++++ .../expandable_section_results.tsx | 7 ++++++- .../application/explorer/alerts/alerts_panel.tsx | 3 +++ .../advanced_detector_modal/function_help.tsx | 13 ++++++++++++- .../components/detector_title/detector_title.tsx | 7 ++++++- .../components/analytics_panel/analytics_panel.tsx | 3 +++ .../anomaly_detection_panel.tsx | 3 +++ .../public/application/overview/overview_page.tsx | 3 +++ 8 files changed, 50 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx b/x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx index 903033481bd07..b33d056467d1a 100644 --- a/x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx +++ b/x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx @@ -16,6 +16,7 @@ import { } from '@elastic/eui'; import type { PropsWithChildren } from 'react'; import React, { type FC } from 'react'; +import { i18n } from '@kbn/i18n'; import { PanelHeaderItems } from './panel_header_items'; import { useCurrentThemeVars } from '../../contexts/kibana'; @@ -24,6 +25,7 @@ export interface CollapsiblePanelProps { onToggle: (isOpen: boolean) => void; header: React.ReactElement; headerItems?: React.ReactElement[]; + ariaLabel: string; } export const CollapsiblePanel: FC> = ({ @@ -32,6 +34,7 @@ export const CollapsiblePanel: FC> = ({ children, header, headerItems, + ariaLabel, }) => { const { euiTheme } = useCurrentThemeVars(); @@ -51,6 +54,17 @@ export const CollapsiblePanel: FC> = ({ { diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx index d8c20f7f3d6fc..366debdc3fea3 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx @@ -337,7 +337,12 @@ export const ExpandableSectionResults: FC = ({ anchorPosition="upCenter" button={ setIsPopoverVisible(!isPopoverVisible)} diff --git a/x-pack/plugins/ml/public/application/explorer/alerts/alerts_panel.tsx b/x-pack/plugins/ml/public/application/explorer/alerts/alerts_panel.tsx index 4c76ebe628f4f..b9b680a9fbac5 100644 --- a/x-pack/plugins/ml/public/application/explorer/alerts/alerts_panel.tsx +++ b/x-pack/plugins/ml/public/application/explorer/alerts/alerts_panel.tsx @@ -101,6 +101,9 @@ export const AlertsPanel: FC = () => { ); })} + ariaLabel={i18n.translate('xpack.ml.explorer.alertsPanel.ariaLabel', { + defaultMessage: 'alerts panel', + })} > diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/function_help.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/function_help.tsx index a72380828a6db..e93b446d486ad 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/function_help.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/function_help.tsx @@ -28,7 +28,18 @@ export const FunctionHelpPopover = memo(() => { const onHelpClick = () => setIsHelpOpen((prevIsHelpOpen) => !prevIsHelpOpen); const closeHelp = () => setIsHelpOpen(false); - const helpButton = ; + const helpButton = ( + + ); const columns = [ { diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/detector_title/detector_title.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/detector_title/detector_title.tsx index d153ee2bf2842..439bdc0c4e2f5 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/detector_title/detector_title.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/detector_title/detector_title.tsx @@ -51,7 +51,12 @@ export const DetectorTitle: FC> = ({ onClick={() => deleteDetector(index)} iconType="cross" size="s" - aria-label="Next" + aria-label={i18n.translate( + 'xpack.ml.newJob.wizard.pickFieldsStep.nextButtonAriaLabel', + { + defaultMessage: 'Next', + } + )} /> )} diff --git a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx index c94f594f548c5..176633ecfd3a2 100644 --- a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx +++ b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx @@ -119,6 +119,9 @@ export const AnalyticsPanel: FC = ({ setLazyJobCount }) => { })} , ]} + ariaLabel={i18n.translate('xpack.ml.overview.analyticsListPanel.ariaLabel', { + defaultMessage: 'data frame analytics panel', + })} > {noDFAJobs ? : null} diff --git a/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx b/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx index 5e17304fff1c4..42aca6f330a91 100644 --- a/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx +++ b/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx @@ -209,6 +209,9 @@ export const AnomalyDetectionPanel: FC = ({ anomalyTimelineService, setLa })} , ]} + ariaLabel={i18n.translate('xpack.ml.overview.adJobsPanel.ariaLabel', { + defaultMessage: 'anomaly detection panel', + })} > {noAdJobs ? : null} diff --git a/x-pack/plugins/ml/public/application/overview/overview_page.tsx b/x-pack/plugins/ml/public/application/overview/overview_page.tsx index c66bc6e1ea7e4..57e453b15af73 100644 --- a/x-pack/plugins/ml/public/application/overview/overview_page.tsx +++ b/x-pack/plugins/ml/public/application/overview/overview_page.tsx @@ -112,6 +112,9 @@ export const OverviewPage: FC = () => { })} , ]} + ariaLabel={i18n.translate('xpack.ml.overview.nodesPanel.ariaLabel', { + defaultMessage: 'overview panel', + })} >