[Index Management] Add an index details page behind a dev feature flag by yuliacech · Pull Request #163521 · elastic/kibana

yuliacech · 2023-08-09T17:22:36Z

Summary

This PR adds a dev feature flag xpack.index_management.dev.enableIndexDetailsPage that will allow us to build out the new index details page in small iterations. Without the flag, the UI of Index Management is not changed. A skeleton component is created for the details page (see screenshot below).

How to test

Test the Index Management UI (Indices tab) without the flag and check that no changes were introduced
Add xpack.index_management.dev.enableIndexDetailsPage: true to the file /config/kibana.dev.yml
Navigate to the Indices tab in Index Management, toggle "hidden indices" if no indices exist and click any index name
Check that the new index details page is displayed
Check that the tabs on the page are working

Screenshots

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2023-08-10T18:21:56Z

Pinging @elastic/platform-deployment-management (Team:Deployment Management)

jbudz

ftr_configs.yml

thomheymann

security changes LGTM

sabarasaba

Awesome work @yuliacech! I tested locally and all looks good. I left few small comments and also had two points I wanted to raise up. Let me know what you think!

When navigating to the index details page we dont seem to be updating the breadcrumbs accordingly:

Currently the index name link opens the details flyout, do we need that flyout still or does it need to be deleted or would this be addressed in a later iteration?

sabarasaba · 2023-08-14T06:25:02Z

...s/index_management/public/application/sections/home/index_list/details_page/details_page.tsx

is this needed at all?

We'll be adding action buttons on the right side in the next iteration

...s/index_management/public/application/sections/home/index_list/details_page/details_page.tsx

sabarasaba · 2023-08-14T08:12:29Z

x-pack/test/functional/apps/index_management/index_details_page/index.ts

I think we should also be loading this test file from test/functional/apps/index_management/index.ts as well, otherwise I dont think these tests will be executed 🤔

My thinking was to have index details page tests run separately, because they need to set --xpack.index_management.dev.enableIndexDetailsPage=true in the config file. I added this config to the buildkite file so that the new tests will run in addition to the normal tests that don't have the config set.
This will need to be merged together at the end of the project when the feature flag will be removed.

Ohh gotcha now! That makes sense!

… create a skeleton component for the index details page

…-ref HEAD~1..HEAD --fix'

yuliacech · 2023-08-14T15:03:56Z

Thanks a lot for your review and comments, @sabarasaba!
I added a task to the meta issue to make sure the breadcrumbs will be updated correctly in one of the next iterations. Similar with the flyout code: We need to keep it until the end of the project when the new details page is done. Then I'm planning to remove the feature flag and open the details page instead of the flyout. So for now the code has both things so that the current UI is not broken until we ready to switch.

sabarasaba

latest lgtm!

kibana-ci · 2023-08-15T11:11:55Z

💚 Build Succeeded

Buildkite Build
Commit: b5f61a1

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`indexManagement`	493	495	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`indexManagement`	522.2KB	524.8KB	+2.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`indexManagement`	32.5KB	32.6KB	+179.0B

History

💔 Build #150445 failed e642eff
💔 Build #150189 failed e7eac96
💔 Build #150157 failed 370d19c
💔 Build #150117 failed f6f6543a390ee86458650b279bb40df6521b11cd
💚 Build #149373 succeeded 86db248b39c146bf6dee242869451160e0cfd9b0
💔 Build #149356 failed 990fa07afaed9906c79d0d4dae37470b896eb22f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

elastic#163521) ## Summary This PR adds a dev feature flag `xpack.index_management.dev.enableIndexDetailsPage` that will allow us to build out the new index details page in small iterations. Without the flag, the UI of Index Management is not changed. A skeleton component is created for the details page (see screenshot below). ### How to test 1. Test the Index Management UI (Indices tab) without the flag and check that no changes were introduced 1. Add `xpack.index_management.dev.enableIndexDetailsPage: true` to the file `/config/kibana.dev.yml` 2. Navigate to the Indices tab in Index Management, toggle "hidden indices" if no indices exist and click any index name 3. Check that the new index details page is displayed 4. Check that the tabs on the page are working ### Screenshots <img width="1209" alt="Screenshot 2023-08-09 at 19 17 46" src="https://github.com/elastic/kibana/assets/6585477/e654ef36-ccf3-40a4-8c7b-750b83defef5"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

#163521) ## Summary This PR adds a dev feature flag `xpack.index_management.dev.enableIndexDetailsPage` that will allow us to build out the new index details page in small iterations. Without the flag, the UI of Index Management is not changed. A skeleton component is created for the details page (see screenshot below). ### How to test 1. Test the Index Management UI (Indices tab) without the flag and check that no changes were introduced 1. Add `xpack.index_management.dev.enableIndexDetailsPage: true` to the file `/config/kibana.dev.yml` 2. Navigate to the Indices tab in Index Management, toggle "hidden indices" if no indices exist and click any index name 3. Check that the new index details page is displayed 4. Check that the tabs on the page are working ### Screenshots <img width="1209" alt="Screenshot 2023-08-09 at 19 17 46" src="https://github.com/elastic/kibana/assets/6585477/e654ef36-ccf3-40a4-8c7b-750b83defef5"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary Follow up to #163521 - A new internal api endpoint to load index data for a single index specified by the index name - An api service to send a request to the new endpoint - A loading and an error state on the new index details page - A "back to all indices" button - A button with the link to Discover - A context menu with index actions (only popover with options is displayed, but the actions are not implemented yet) ### Screenshots <img width="1143" alt="Screenshot 2023-08-23 at 14 31 26" src="https://github.com/elastic/kibana/assets/6585477/06c3eea5-8d35-4c09-9274-fe545bde60ae"> <img width="740" alt="Screenshot 2023-08-22 at 17 43 13" src="https://github.com/elastic/kibana/assets/6585477/11433e81-ef21-43b8-83b4-9c6b4c1c7579"> <img width="644" alt="Screenshot 2023-08-22 at 17 42 30" src="https://github.com/elastic/kibana/assets/6585477/f6649029-af31-47d2-ba6d-4632c0c5b146"> ### How to test 1. Add `xpack.index_management.dev.enableIndexDetailsPage: true` to your `/config/kibana.dev.yml` file 2. Start ES and Kibana with `yarn es snapshot` and `yarn start` 3. Add at least 1 sample data test 4. Navigate to Index Management and click the name of any index 5. Check that the button "back to indices" works (navigates back to the indices list) 6. Check that the button "discover index" works (navigates to Discover) 7. Check that the button "manage index" opens the context menu (_note: index actions are not implemented yet_) 8. Check that there is a loading indicator (by adding throttle in the Network tab of Chrome Dev tools) 9. Check that the error section is displayed and the "reload" button resends a request (by blocking the request in the Network tab of Chrome Dev Tools) ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [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 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary Addresses #164546 Follow up to #163521 and #163955 This PR re-implements index actions in the context menu on the index details page. The actions are implemented without redux which is used in the old index details flyout (to be removed when this work is complete) and in the indices list. The PR introduces a declaration file to list all props of the component `IndexActionsContextMenu` written in JS. There is also a new component `ManageIndexButton` that implements index actions specifically to be executed on the new index details page. In the future most of the code in the component `ManageIndexButton` can be re-used when more refactorings will be made (switching to TS and not using redux in the indices list). All index actions are async and I added a loading indicator to the context menu button to indicate that requests are in flight updating the index. ### Screen recordings https://github.com/elastic/kibana/assets/6585477/c39f1450-b495-4c50-b4ca-8989a2259ed5 Add/remove ILM policy actions with a confirmation modal https://github.com/elastic/kibana/assets/6585477/964931c9-b926-4ed4-aa5c-218f52881131 ### How to test 1. Add `xpack.index_management.dev.enableIndexDetailsPage: true` to your `/config/kibana.dev.yml` file 7. Start ES and Kibana with `yarn es snapshot` and `yarn start` 8. Add several indices to test with the command `PUT /test_index` in Dev Tools Console 9. Navigate to Index Management and click the name of any index 10. Check index actions: - [x] Close index - [x] Open index - [x] Force merge index - [x] Refresh index - [x] Clear index cache - [x] Flush index - [ ] Unfreeze index (not sure how to add a frozen index) - [x] Delete index - [x] ILM: add lifecycle policy - [x] ILM: remove lifecycle policy - [x] ILM: retry lifecycle policy (add any built-in policy and wait a couple of minutes until the rollover fails) ### Checklist - [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

## Summary This PR removes the feature flag and enables the new index details page by default. The index details page was implemented in following PRs: - #163521 - #163955 - #164741 - #165027 - #165038 - #165456 In this PR we completely remove now obsolete code for the old index details flyout: react components and corresponding redux code. All related tests are updated and cleaned up. The config value for Index Management plugin `xpack.index_management.dev.enableIndexDetailsPage` is deprecated as unused and can be removed in v9.0. ### How to test 1. Start ES and Kibana with `yarn es snapshot` and `yarn start` 3. Navigate to Index Management and create an index 4. Click the index name in the table and check the tabs of the details page ### Screenshots #### Stateful Overview <img width="1387" alt="Screenshot 2023-09-27 at 14 41 57" src="https://github.com/elastic/kibana/assets/6585477/e58b15e7-d10c-4473-873c-d0f128392404"> Mappings <img width="1392" alt="Screenshot 2023-09-27 at 14 42 05" src="https://github.com/elastic/kibana/assets/6585477/441157cb-5a26-47c3-8da0-b4df51ebec5d"> Settings <img width="1385" alt="Screenshot 2023-09-27 at 14 42 13" src="https://github.com/elastic/kibana/assets/6585477/da66a2eb-1f21-44c1-9356-484c66caab88"> Statistics <img width="1380" alt="Screenshot 2023-09-27 at 14 42 22" src="https://github.com/elastic/kibana/assets/6585477/ec93d85c-e754-4c21-88ab-0124dc114fc9"> Error loading data <img width="1333" alt="Screenshot 2023-09-26 at 19 05 37" src="https://github.com/elastic/kibana/assets/6585477/fc1804b3-6aa0-4019-bae6-e7bb40113b28"> <img width="1327" alt="Screenshot 2023-09-26 at 19 06 07" src="https://github.com/elastic/kibana/assets/6585477/ca711697-cc74-4ba8-b17c-ec9b01f3026e"> <img width="1329" alt="Screenshot 2023-09-26 at 19 06 28" src="https://github.com/elastic/kibana/assets/6585477/0cb46b09-8542-452a-8845-40d060057e95"> <img width="1331" alt="Screenshot 2023-09-26 at 19 06 48" src="https://github.com/elastic/kibana/assets/6585477/87de8d3d-b6e5-4e8f-b27c-18a1c6e950d8"> Error saving index settings <img width="1332" alt="Screenshot 2023-09-26 at 19 07 31" src="https://github.com/elastic/kibana/assets/6585477/e6e4b3d0-c237-4d0a-995a-4562bc78f88e"> ### Serverless Overview <img width="1336" alt="Screenshot 2023-09-26 at 19 51 47" src="https://github.com/elastic/kibana/assets/6585477/6c76c23b-4be6-4ab3-ae1d-c7ae751e100d"> Mappings <img width="1336" alt="Screenshot 2023-09-26 at 19 23 51" src="https://github.com/elastic/kibana/assets/6585477/625fa703-506f-4389-9df0-86441a655074"> Settings <img width="1332" alt="Screenshot 2023-09-26 at 19 24 02" src="https://github.com/elastic/kibana/assets/6585477/c496ab09-f2db-4c1b-9fb6-1e9b64b1c142"> # Release note Index details can now be viewed on a new index details page in Index Management. <img width="1387" alt="Screenshot 2023-09-27 at 14 41 57" src="https://github.com/elastic/kibana/assets/6585477/b90c706d-8b15-49e4-8f6a-cb66f3ed1822"> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

yuliacech force-pushed the im/create_details_page branch from c087dc4 to 69d2b19 Compare August 10, 2023 15:32

yuliacech marked this pull request as ready for review August 10, 2023 18:20

yuliacech requested review from a team as code owners August 10, 2023 18:20

yuliacech added Feature:Index Management Index and index templates UI Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// release_note:skip Skip the PR/issue when compiling release notes labels Aug 10, 2023

jbudz approved these changes Aug 10, 2023

View reviewed changes

thomheymann approved these changes Aug 10, 2023

View reviewed changes

sabarasaba reviewed Aug 14, 2023

View reviewed changes

yuliacech and others added 6 commits August 14, 2023 16:49

[Index Management] Add a dev feature flag for the index details page,…

1d59bda

… create a skeleton component for the index details page

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

988f4fd

…-ref HEAD~1..HEAD --fix'

[Index Management] Fix functional tests

6f7ea50

[Index Management] Add unit tests for the index details page

58923ae

[Index Management] Add functional tests for the index details page

4935103

[Index Management][Index details page] Add useMemo for the header tabs

7ea1ce0

yuliacech force-pushed the im/create_details_page branch from cfb7266 to 7ea1ce0 Compare August 14, 2023 14:51

yuliacech and others added 2 commits August 14, 2023 17:16

[Index details page] Fix the feature flag after merge conflicts

370d19c

Merge branch 'main' into im/create_details_page

e7eac96

sabarasaba approved these changes Aug 15, 2023

View reviewed changes

[Index details page] Fix functional tests after merge conflicts

e642eff

yuliacech enabled auto-merge (squash) August 15, 2023 09:29

Merge branch 'main' into im/create_details_page

b5f61a1

yuliacech merged commit 3efc0a7 into elastic:main Aug 15, 2023

kibanamachine added the v8.10.0 label Aug 15, 2023

kibanamachine added the backport:skip This PR does not require backporting label Aug 15, 2023

yuliacech mentioned this pull request Aug 15, 2023

[Index Management] Index details page: loading index data #163955

Merged

2 tasks

yuliacech mentioned this pull request Aug 24, 2023

[Index details page] Implement index actions #164741

Merged

12 tasks

yuliacech mentioned this pull request Sep 22, 2023

[Index Management] Implement index details page #165705

Merged

yuliacech deleted the im/create_details_page branch February 15, 2024 12:05

Conversation

yuliacech commented Aug 9, 2023

Summary

How to test

Screenshots

Checklist

Risk Matrix

For maintainers

Uh oh!

elasticmachine commented Aug 10, 2023

Uh oh!

jbudz left a comment

Choose a reason for hiding this comment

Uh oh!

thomheymann left a comment

Choose a reason for hiding this comment

Uh oh!

sabarasaba left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sabarasaba Aug 14, 2023

Choose a reason for hiding this comment

Uh oh!

yuliacech Aug 14, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sabarasaba Aug 14, 2023

Choose a reason for hiding this comment

Uh oh!

yuliacech Aug 14, 2023

Choose a reason for hiding this comment

Uh oh!

sabarasaba Aug 15, 2023

Choose a reason for hiding this comment

Uh oh!

yuliacech commented Aug 14, 2023

Uh oh!

sabarasaba left a comment

Choose a reason for hiding this comment

Uh oh!

kibana-ci commented Aug 15, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

sabarasaba left a comment •

edited

Loading