kibana/x-pack/plugins/index_management
Kibana Machine 7bcb2627ea
[8.16] [Index management] Fix a11y focus order in index mappings page (#203361) (#203626)
# Backport

This will backport the following commits from `main` to `8.16`:
- [[Index management] Fix a11y focus order in index mappings page
(#203361)](https://github.com/elastic/kibana/pull/203361)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Saarika
Bhasi","email":"55930906+saarikabhasi@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-10T15:46:20Z","message":"[Index
management] Fix a11y focus order in index mappings page (#203361)\n\n##
Summary\r\n\r\nFix a11y focus order in index mappings page. When new
field is in\r\npending state and after closing edit pending field
Flyout.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/dbdf59e5-0ebd-47e0-9b5e-19ab1556e771\r\n\r\n###
Test instructions \r\n#### Adding a field\r\n1. Add new field in index
mappings page by navigating via tab \r\n2. Notice that type fields combo
box is focused\r\n3. Add field and click to Add field button again with
in pending fields\r\nform\r\n4. Notice focus is on new create field
form\r\n\r\n#### Edit field in pending state\r\n1. Add new fields via
tab key\r\n2. click on edit field \r\n3. Try closing, updating and
cancelling in the edit field flyout form\r\n4. Notice after edit field
flyout is closed, focus is on the pending\r\nfields
form","sha":"4b0c0e92693ad759e3ce45b4b259c9908ddd0d51","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-major","v8.16.0","v8.17.0"],"title":"[Index
management] Fix a11y focus order in index mappings page
","number":203361,"url":"https://github.com/elastic/kibana/pull/203361","mergeCommit":{"message":"[Index
management] Fix a11y focus order in index mappings page (#203361)\n\n##
Summary\r\n\r\nFix a11y focus order in index mappings page. When new
field is in\r\npending state and after closing edit pending field
Flyout.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/dbdf59e5-0ebd-47e0-9b5e-19ab1556e771\r\n\r\n###
Test instructions \r\n#### Adding a field\r\n1. Add new field in index
mappings page by navigating via tab \r\n2. Notice that type fields combo
box is focused\r\n3. Add field and click to Add field button again with
in pending fields\r\nform\r\n4. Notice focus is on new create field
form\r\n\r\n#### Edit field in pending state\r\n1. Add new fields via
tab key\r\n2. click on edit field \r\n3. Try closing, updating and
cancelling in the edit field flyout form\r\n4. Notice after edit field
flyout is closed, focus is on the pending\r\nfields
form","sha":"4b0c0e92693ad759e3ce45b4b259c9908ddd0d51"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.17"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203361","number":203361,"mergeCommit":{"message":"[Index
management] Fix a11y focus order in index mappings page (#203361)\n\n##
Summary\r\n\r\nFix a11y focus order in index mappings page. When new
field is in\r\npending state and after closing edit pending field
Flyout.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/dbdf59e5-0ebd-47e0-9b5e-19ab1556e771\r\n\r\n###
Test instructions \r\n#### Adding a field\r\n1. Add new field in index
mappings page by navigating via tab \r\n2. Notice that type fields combo
box is focused\r\n3. Add field and click to Add field button again with
in pending fields\r\nform\r\n4. Notice focus is on new create field
form\r\n\r\n#### Edit field in pending state\r\n1. Add new fields via
tab key\r\n2. click on edit field \r\n3. Try closing, updating and
cancelling in the edit field flyout form\r\n4. Notice after edit field
flyout is closed, focus is on the pending\r\nfields
form","sha":"4b0c0e92693ad759e3ce45b4b259c9908ddd0d51"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com>
2024-12-10 11:45:35 -06:00
..
__jest__ [8.x] [Onboarding] Make search_indices index details page as default route in index management (#194857) (#195973) 2024-10-11 15:01:37 -05:00
common [8.x] Not allow # in index template name (#195776) (#196485) 2024-10-16 06:47:07 -05:00
public [8.16] [Index management] Fix a11y focus order in index mappings page (#203361) (#203626) 2024-12-10 11:45:35 -06:00
server [8.x] [Index Management] [Onboarding] Create new package folder for index_management (#192594) (#193079) 2024-09-16 16:31:05 -05:00
test/fixtures [Index Templates] Fix edit form when there are missing component templates (#187766) 2024-07-11 02:30:08 +10:00
jest.config.js
kibana.jsonc [Semantic Text UI] Display semantic_text based on licensing (#185902) 2024-06-21 13:33:48 +02:00
README.md [8.x] [Onboarding] Make search_indices index details page as default route in index management (#194857) (#195973) 2024-10-11 15:01:37 -05:00
tsconfig.json [8.x] [Index Management] [Onboarding] Create new package folder for index_management (#192594) (#193079) 2024-09-16 16:31:05 -05:00

Index Management UI

Extensions service

This service is exposed from the Index Management setup contract and can be used to add content to the indices list and the index details page.

Extensions to the indices list

  • addBanner(banner: any): adds a banner on top of the indices list, for example when some indices run into an ILM issue
  • addFilter(filter: any): adds a filter to the indices list, for example to filter indices managed by ILM
  • addToggle(toggle: any): adds a toggle to the indices list, for example to display hidden indices
  • addColumn(column: IndicesListColumn): adds a column to the indices list, for example to display an ILM phase
  • setEmptyListContent(content: EmptyListContent): replaces the default empty prompt displayed when there are no indices in the indices list. The empty list content has the following interface:
export interface EmptyListContent {
  renderContent: (args: {
    createIndexButton: ReturnType<FunctionComponent>;
  }) => ReturnType<FunctionComponent>;
}
  • setIndexDetailsPageRoute: registers a new route for index details page in indices list table. For example, for serverless search users, navigating to an index on the indices list page will lead to the Search Indices detail page.

Extensions to the indices list and the index details page

  • addAction(action: any): adds an option to the "manage index" menu, for example to add an ILM policy to the index
  • addBadge(badge: any): adds a badge to the index name, for example to indicate frozen, rollup or follower indices

Extensions to the index details page

  • addIndexDetailsTab(tab: IndexDetailsTab): adds a tab to the index details page. The tab has the following interface:
interface IndexDetailsTab {
  // a unique key to identify the tab
  id: IndexDetailsTabId;
  // a text that is displayed on the tab label, usually a Formatted message component
  name: ReactNode;
  // a function that renders the content of the tab
  renderTabContent: (args: {
    index: Index;
    getUrlForApp: ApplicationStart['getUrlForApp'];
  }) => ReturnType<FunctionComponent>;
  // a number to specify the order of the tabs
  order: number;
  // an optional function to return a boolean for when to render the tab
  // if omitted, the tab is always rendered
  shouldRenderTab?: (args: { index: Index }) => boolean;
}

An example of adding an ILM tab can be found in this file.

  • setIndexOverviewContent(content: IndexContent): replaces the default content in the overview tab (code block describing adding documents to the index) with the custom content. The custom content has the following interface:
interface IndexContent {
  renderContent: (args: {
    index: Index;
    getUrlForApp: ApplicationStart['getUrlForApp'];
  }) => ReturnType<FunctionComponent>;
  • setIndexMappingsContent(content: IndexContent): adds content to the mappings tab of the index details page. The content is displayed in the right bottom corner, below the mappings docs link.

Index data enrichers

The extensions service that allows to render additional UI elements in the indices list and on the index details page often relies on additional index data that is not available by default. To make these additional data available in the response of the GET /indices request, an index data enricher can be registered. A data enricher is essentially an extra request that is done for the array of indices and the information is added to the response. Currently, 3 data enrichers are registered by the ILM, Rollup and CCR plugins. Before adding a data enricher, the cost of the additional request should be taken in consideration (see this file for more details).

Indices tab

Quick steps for testing

Create an index with special characters and verify it renders correctly:

# Renders as %{[@metadata][beat]}-%{[@metadata][version]}-2020.08.23
PUT %25%7B%5B%40metadata%5D%5Bbeat%5D%7D-%25%7B%5B%40metadata%5D%5Bversion%5D%7D-2020.08.23

Data streams tab

Quick steps for testing

Create a data stream using Console and you'll be able to view it in the UI:

# Configure template for creating a data stream
PUT _index_template/ds
{
  "index_patterns": ["ds"],
  "data_stream": {}
}

# Add a document to the data stream
POST ds/_doc
{
  "@timestamp": "2020-01-27"
}

Create a data stream with special characters and verify it renders correctly:

# Configure template for creating a data stream
PUT _index_template/special_ds
{
  "index_patterns": ["%{[@metadata][beat]}-%{[@metadata][version]}-2020.08.23"],
  "data_stream": {}
}

# Add a document to the data stream, which will render as %{[@metadata][beat]}-%{[@metadata][version]}-2020.08.23
POST %25%7B%5B%40metadata%5D%5Bbeat%5D%7D-%25%7B%5B%40metadata%5D%5Bversion%5D%7D-2020.08.23/_doc
{
  "@timestamp": "2020-01-27"
}

Create a data stream configured with data stream lifecyle.

PUT _index_template/my-index-template
{
  "index_patterns": ["my-data-stream*"],
  "data_stream": { },
  "priority": 500,
  "template": {
    "lifecycle": {
      "data_retention": "7d"
    }
  },
  "_meta": {
    "description": "Template with data stream lifecycle"
  }
}
PUT _data_stream/my-data-stream

Index templates tab

Quick steps for testing

Legacy index templates are only shown in the UI on stateful and if a user has existing legacy index templates. You can test this functionality by creating one in Console:

PUT _template/template_1
{
  "index_patterns": ["foo*"]
}

On serverless, Elasticsearch does not support legacy index templates and therefore this functionality is disabled in Kibana via the config xpack.index_management.enableLegacyTemplates. For more details, see #163518.

To test Cloud-managed templates:

  1. Add cluster.metadata.managed_index_templates setting via Dev Tools:
PUT /_cluster/settings
{
  "persistent": {
    "cluster.metadata.managed_index_templates": ".cloud-"
  }
}
  1. Create a template with the format: .cloud-<template_name> via Dev Tools.
PUT _template/.cloud-example
{
  "index_patterns": [ "foobar*"]
}

The UI will now prevent you from editing or deleting this template.

In 7.x, the UI supports types defined as part of the mappings for legacy index templates. To test this out, use the "Load JSON" feature and verify the custom type is preserved:

{
  "my_custom_type": {
    "_source": {
      "enabled": false
    },
    "properties": {
      "name1": {
        "type": "keyword"
      }
    }
  }
}