[Index Management] Index details page: loading index data by yuliacech · Pull Request #163955 · elastic/kibana

yuliacech · 2023-08-15T16:23:03Z

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

How to test

Add xpack.index_management.dev.enableIndexDetailsPage: true to your /config/kibana.dev.yml file
Start ES and Kibana with yarn es snapshot and yarn start
Add at least 1 sample data test
Navigate to Index Management and click the name of any index
Check that the button "back to indices" works (navigates back to the indices list)
Check that the button "discover index" works (navigates to Discover)
Check that the button "manage index" opens the context menu (note: index actions are not implemented yet)
Check that there is a loading indicator (by adding throttle in the Network tab of Chrome Dev tools)
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

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

…details page with loading and error states

…fix'

…s with api services

yuliacech · 2023-08-22T16:15:29Z

...s/index_management/__jest__/client_integration/index_details_page/index_details_page.test.ts

    testBed.component.update();
  });

+  describe('error section', () => {


I'm not testing the loading indicator here, because I think I could re-use what @sabarasaba implemented for enrich policies here. So I'm planning to add the test later when enrich policies are merged into main.

yuliacech · 2023-08-22T16:16:34Z

...s/index_management/__jest__/client_integration/index_details_page/index_details_page.test.ts

+    expect(testBed.routerMock.history.push).toHaveBeenCalledWith('/indices');
+  });
+
+  it('renders a link to discover', () => {


only testing that the button is displayed, since the discover link component has its own tests

Does it make sense to add a comment to this effect in the code?

yuliacech · 2023-08-22T16:17:54Z

x-pack/plugins/index_management/public/application/lib/discover_link.tsx

+      css={{ margin: '0 0.3em' }}
+    />
+  );
+  if (asButton) {


This component is mostly renamed from render_discover_link.tsx with a new option of rendering the link as a button (previously it was only an icon).

yuliacech · 2023-08-22T16:19:21Z

x-pack/plugins/index_management/public/application/lib/discover_link.test.tsx

+    expect(component.exists('[data-test-subj="discoverButtonLink"]')).toBe(false);
+  });
+
+  it('renders the link as a button if the prop is set', async () => {


These tests are mostly from the renamed file render_discover_link.test.ts with an addition of new tests for rendering the link as a button (not only as an icon)

yuliacech · 2023-08-22T16:19:52Z

x-pack/plugins/index_management/public/application/lib/manage_angular_lifecycle.ts

@@ -1,29 +0,0 @@
-/*


Random unused code

Wow, angular 😅 Glad to see this cleaned up!

yuliacech · 2023-08-22T16:21:34Z

x-pack/plugins/index_management/public/application/lib/indices.ts

 */
-import SemVer from 'semver/classes/semver';

-import { MAJOR_VERSION } from '../../../common';


Removed the check for kibanaVersion.major < 8 since these changes won't be backported

yuliacech · 2023-08-22T16:22:16Z

.../sections/home/index_list/index_actions_context_menu/index_actions_context_menu.container.js

    indexStatusByName,
    indices: getIndicesByName(state, indexNames),
-    isSystemIndexByName: getIsSystemIndexByName(indexNames, allIndices),
-    hasSystemIndex: hasSystemIndex(indexNames, allIndices),


Removed system indices that are not needed in version 8.x

yuliacech · 2023-08-22T16:23:25Z

...pplication/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js

      showStats,
      showSettings,
-      detailPanel,
+      isOnListView,


Renamed the prop to be more "descriptive": when the context menu is displayed in the indices list, it has more options

yuliacech · 2023-08-22T16:24:51Z

...ions/home/index_list/index_actions_context_menu/index_actions_context_menu.without_redux.tsx

+// @ts-ignore this component needs to be refactored into TS
+import { IndexActionsContextMenu } from './index_actions_context_menu';
+
+export interface ReduxProps {


This component is a wrapper to initialize the context menu with index actions without using redux. For now all functions are empty and they will be implemented in a follow up PR.

yuliacech · 2023-08-22T16:28:41Z

x-pack/plugins/index_management/server/routes/api/indices/register_get_route.ts

+import { RouteDependencies } from '../../../types';
+import { addInternalBasePath } from '..';
+
+export function registerGetRoute({


This route is not hidden behind the feature flag, since I believe this is not affecting end users. But let me know what you think.

👍 I think this is OK as well

elasticmachine · 2023-08-22T19:12:52Z

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

alisonelizabeth

Awesome work @yuliacech! It's really great to see some of the old code starting to get cleaned up 🎉 Verified changes locally. I left a few comments, but nothing blocking.

alisonelizabeth · 2023-08-23T12:34:34Z

x-pack/plugins/index_management/public/application/lib/discover_link.tsx

+      iconType="discoverApp"
+      aria-label="Discover"
+      data-test-subj="discoverIconLink"
+      css={{ margin: '0 0.3em' }}


~~Is it necessary to add the custom CSS here?~~ I see now that this existed previously. I'll leave it up to you if it makes sense to revisit or not.

alisonelizabeth · 2023-08-23T12:37:51Z

x-pack/plugins/index_management/public/application/lib/manage_angular_lifecycle.ts

@@ -1,29 +0,0 @@
-/*


Wow, angular 😅 Glad to see this cleaned up!

alisonelizabeth · 2023-08-23T12:40:37Z

...management/public/application/sections/home/index_list/details_page/details_page_loading.tsx

+import { FormattedMessage } from '@kbn/i18n-react';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+
+export const DetailsPageLoading = () => {


Does it make sense to use the section_loading component from es_ui_shared?

I thought it was still using "deprecated" eui page still but I see now it's actually already migrated. I'll switch to the re-usable one and delete the extra component: the less code, the better :)

alisonelizabeth · 2023-08-23T12:44:15Z

x-pack/plugins/index_management/server/routes/api/indices/register_get_route.ts

+import { RouteDependencies } from '../../../types';
+import { addInternalBasePath } from '..';
+
+export function registerGetRoute({


👍 I think this is OK as well

alisonelizabeth · 2023-08-23T12:45:36Z

x-pack/test/api_integration/apis/management/index_management/index_details.ts

+export default function ({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  const es = getService('es');
+  const esDeleteAllIndices = getService('esDeleteAllIndices');


alisonelizabeth · 2023-08-23T12:47:01Z

x-pack/test/api_integration/apis/management/index_management/index_details.ts

+  };
+
+  const testIndex = 'test_index';
+  describe('index details', async () => {


Should we add these tests for serverless as well?

Oh I see that you added the serverless tests for indices "fetch all" route already (in the stats PR)! That makes it much easier for me, I'll add my tests there as well

alisonelizabeth · 2023-08-23T12:49:09Z

...s/index_management/__jest__/client_integration/index_details_page/index_details_page.test.ts

+    expect(testBed.routerMock.history.push).toHaveBeenCalledWith('/indices');
+  });
+
+  it('renders a link to discover', () => {


Does it make sense to add a comment to this effect in the code?

alisonelizabeth · 2023-08-23T12:51:40Z

...x_management/public/application/sections/home/index_list/details_page/details_page_error.tsx

+    <EuiPageTemplate.EmptyPrompt
+      data-test-subj="indexDetailsErrorLoadingDetails"
+      color="danger"
+      iconType="error"


I think we're using the warning icon in a lot of our other plugins for error states; I wonder if we should change that 🤔

good catch! I'll change to warning for consistency

… index details loading and address other code review comments

…fix'

yuliacech · 2023-08-23T13:48:42Z

Thanks a lot for the review, @alisonelizabeth!

kibana-ci · 2023-08-23T15:09:40Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 8e30328

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #61 / Cases - group 1 Create case "before each" hook for "creates a case from the stack management page"
[job] [logs] FTR Configs #58 / saved objects security and spaces enabled _bulk_create user with all at other space within the default space "before all" hook for "should return 403 forbidden [isolatedtype/defaultspace-isolatedtype-id]"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`indexManagement`	495	498	+3

Async chunks

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

id	before	after	diff
`indexManagement`	525.2KB	523.6KB	-1.5KB

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.7KB	32.6KB	-21.0B

History

💚 Build #152516 succeeded f82bc7d
💛 Build #152466 was flaky d435d28
💔 Build #152434 failed 41b0f66
💔 Build #152362 failed 10ee5d9
💔 Build #152345 failed 5e89667
💔 Build #151445 failed bf74fe8

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

## 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 and others added 13 commits August 15, 2023 16:10

[Index details page] Adds an internal api endpoint for index details

65900a7

[Index details page] Add an api service for loading index details

0a8e6cf

[Index details page] Use an api service to load index details on the …

ba1b14a

…details page with loading and error states

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

597ad61

…fix'

[Index details page] Add a discover index button

f1b6bfe

[Index details page] Add a manage index button

6afdf1b

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

ef75f51

…fix'

[Index details page] Set up a component to replace redux index action…

18c620d

…s with api services

Merge branch 'main' into im/details_page/api_index_details

bf74fe8

Merge branch 'main' into im/details_page/api_index_details

5e89667

[Index details page] Update translation files

10ee5d9

[Index details page] Add jest tests

0837329

[Index details page] Add jest tests for error section

41b0f66

yuliacech commented Aug 22, 2023

View reviewed changes

yuliacech and others added 3 commits August 22, 2023 19:10

[Index details page] Fix jest test

d435d28

[Index details page] Add api integration tests

e5f683e

Merge branch 'main' into im/details_page/api_index_details

f82bc7d

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 v8.11.0 labels Aug 22, 2023

yuliacech marked this pull request as ready for review August 22, 2023 19:12

yuliacech requested a review from a team as a code owner August 22, 2023 19:12

yuliacech mentioned this pull request Aug 23, 2023

[Index details page] Re-implement context menu actions without redux #164546

Closed

yuliacech and others added 2 commits August 23, 2023 13:45

[Index details page] Make the "manage index" button secondary

fb0fa06

Merge branch 'main' into im/details_page/api_index_details

0d6f9eb

alisonelizabeth approved these changes Aug 23, 2023

View reviewed changes

yuliacech and others added 2 commits August 23, 2023 15:37

[Index details page] Add api integration tests for serverless, remove…

1c3e39d

… index details loading and address other code review comments

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

616f729

…fix'

[Index details page] Update the changed fetchIndices call

8e30328

yuliacech merged commit 79178ca into elastic:main Aug 23, 2023

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

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/details_page/api_index_details branch February 15, 2024 12:05

Conversation

yuliacech commented Aug 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

How to test

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Aug 22, 2023

Uh oh!

alisonelizabeth left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuliacech commented Aug 23, 2023

Uh oh!

kibana-ci commented Aug 23, 2023

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

yuliacech commented Aug 15, 2023 •

edited

Loading