[ILM] Added a flyout with linked index templates #106734

yuliacech · 2021-07-26T14:58:08Z

Summary

This PR adds a new column "Linked index templates" to the ILM policies list. A click on the number in this columns opens a flyout with a list of linked index templates linked to the ILM policy. The index template names are links to the Index Management view with index templates details.
Future PRs for this feature will include an update of the index templates column after adding an ILM policy to an index template, a search bar for index templates list, number of index templates in the delete confirmation and on the edit page.

Changes to the codebase

useHistory hook instead of passing history as prop
added getUrlForApp and navigateToApp functions to useKibana context instead of passing them as prop
use RedirectAppLinks so that there is no page reload when navigating to other plugins

Screenshots

ILM policies list with a new "Linked index templates" column

Index templates flyout

Flyout video

index_templates_screencast.mov

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
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)

Release Note

There is now a flyout in the Index Lifecycle Management app that displays a list of index templates linked to the Index Lifecycle policy.

yuliacech · 2021-07-27T08:27:26Z

@elasticmachine merge upstream

yuliacech · 2021-07-27T12:27:39Z

@elasticmachine merge upstream

elasticmachine · 2021-07-27T15:01:42Z

Pinging @elastic/kibana-stack-management (Team:Stack Management)

sabarasaba

Nice work @yuliacech! I tested locally and it all works alright, and code changes LGTM. I have though a few UX suggestions:

Enhance flyout table

Since we have a lot of space available in the table, I think would be a nice addition to add the template type (system, cloud, managed). When I was testing it locally I firstly opened an index template that was from system and since its not shown by default I was a bit confused about it.

Empty state

Unsure about this one, but maybe would look nicer if we were to use something like an EmptyPrompt instead of an empty table

Missing padding for close flyout cta

I think this might be an eui bug but the close flyout cta seems to not have enough padding on the sides

sabarasaba · 2021-07-28T11:53:29Z

x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx

@@ -181,8 +194,20 @@ describe('policy table', () => {
  test('displays policy properties', () => {
    const rendered = mountWithIntl(component);
    const firstRow = findTestSubject(rendered, 'policyTableRow').at(0).text();


I think this data-test-subj now changed to policyTableRow-${name} so might need a little refactor in this part too

debadair

Left one suggestion, but otherwise LGTM. I would definitely remove policy from the flyout header. I think it would be helpful to use the header to provide info about what "linked to" means, rather than just repeating the linked to phrase.

.../plugins/index_lifecycle_management/public/application/components/index_templates_flyout.tsx

debadair · 2021-07-28T21:09:25Z

Empty state

Unsure about this one, but maybe would look nicer if we were to use something like an EmptyPrompt instead of an empty table

Seems like an entry of 0 in the linked templates shouldn't even open the flyout?

…omponents/index_templates_flyout.tsx Co-authored-by: debadair <debadair@elastic.co>

yuliacech · 2021-07-29T13:37:18Z

@elasticmachine merge upstream

yuliacech · 2021-07-30T09:13:16Z

Thanks a lot for your review, @sabarasaba!
I disabled the flyout when there are no index templates and I'll consult with Dmitry for a better UI for an empty state and about adding more info to the flyout. The close button padding seems to be reduced on purpose to align it to the padding of the flyout itself. Could you please have another look?

yuliacech · 2021-07-30T09:13:34Z

Thanks a lot for the review, @debadair!
I applied your suggestions for flyout title wording and disabled it for when there are no linked index templates.

sabarasaba

Latest changes lgtm @yuliacech, nice job!

* [ILM] Server to use new in_use_by property returned by ES API * [ILM] Cleaning up the PR changes * [ILM] Fixed functional test * [ILM] Fixed 'modifiedDate' display in the table * [ILM] Fixed sorting test * [ILM] Removed a not needed function declaration * [ILM] Added index templates flyout to the policies list * [ILM] Added test for the index templates flyout * [ILM] Added an a11y test for the index templates flyout * Update x-pack/plugins/index_lifecycle_management/public/application/components/index_templates_flyout.tsx Co-authored-by: debadair <debadair@elastic.co> * [ILM] Fixed jest test and made 0 index templates to not open the flyout * [ILM] Fixed a11y test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: debadair <debadair@elastic.co>

* [ILM] Server to use new in_use_by property returned by ES API * [ILM] Cleaning up the PR changes * [ILM] Fixed functional test * [ILM] Fixed 'modifiedDate' display in the table * [ILM] Fixed sorting test * [ILM] Removed a not needed function declaration * [ILM] Added index templates flyout to the policies list * [ILM] Added test for the index templates flyout * [ILM] Added an a11y test for the index templates flyout * Update x-pack/plugins/index_lifecycle_management/public/application/components/index_templates_flyout.tsx Co-authored-by: debadair <debadair@elastic.co> * [ILM] Fixed jest test and made 0 index templates to not open the flyout * [ILM] Fixed a11y test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: debadair <debadair@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: debadair <debadair@elastic.co>

kibanamachine · 2021-08-03T16:46:54Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`indexLifecycleManagement`	211	212	+1

Async chunks

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

id	before	after	diff
`indexLifecycleManagement`	246.3KB	248.2KB	+1.8KB

Page load bundle

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

id	before	after	diff
`indexLifecycleManagement`	49.8KB	48.6KB	-1.2KB
`indexManagement`	36.9KB	37.0KB	+99.0B
total			-1.1KB

Unknown metric groups

API count

id	before	after	diff
`indexManagement`	162	165	+3

API count missing comments

id	before	after	diff
`indexManagement`	157	160	+3

History

💚 Build #141657 succeeded 453a4cf
💔 Build #141633 failed a7b4732
💔 Build #141621 failed 45de6d4
💔 Build #141608 failed 8168239
💔 Build #141020 failed 9c3fde4

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

* [ILM] Server to use new in_use_by property returned by ES API * [ILM] Cleaning up the PR changes * [ILM] Fixed functional test * [ILM] Fixed 'modifiedDate' display in the table * [ILM] Fixed sorting test * [ILM] Removed a not needed function declaration * [ILM] Added index templates flyout to the policies list * [ILM] Added test for the index templates flyout * [ILM] Added an a11y test for the index templates flyout * Update x-pack/plugins/index_lifecycle_management/public/application/components/index_templates_flyout.tsx Co-authored-by: debadair <debadair@elastic.co> * [ILM] Fixed jest test and made 0 index templates to not open the flyout * [ILM] Fixed a11y test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: debadair <debadair@elastic.co>

yuliacech and others added 7 commits July 20, 2021 15:07

[ILM] Server to use new in_use_by property returned by ES API

223d024

[ILM] Cleaning up the PR changes

3aa63af

[ILM] Fixed functional test

a7c1a5f

Merge branch 'master' into ilm_linked_indices

d7f5e92

[ILM] Fixed 'modifiedDate' display in the table

399b3a7

Merge branch 'master' into ilm_linked_indices

993a900

[ILM] Fixed sorting test

db2d9e1

yuliacech changed the title ~~Ilm linked templates~~ [ILM] Added a flyout with linked index templates Jul 26, 2021

yuliacech added enhancement New value added to drive a business result release_note:enhancement Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more v7.15.0 v8.0.0 Feature:ILM labels Jul 26, 2021

Merge branch 'master' into ilm_linked_indices

b4da259

yuliacech added 2 commits July 27, 2021 11:48

[ILM] Removed a not needed function declaration

64873c1

[ILM] Added index templates flyout to the policies list

953b5a0

yuliacech force-pushed the ilm_linked_templates branch from 040433b to 953b5a0 Compare July 27, 2021 10:59

yuliacech and others added 2 commits July 27, 2021 14:17

[ILM] Added test for the index templates flyout

c56733f

Merge branch 'master' into ilm_linked_templates

94effc4

kibanamachine and others added 2 commits July 27, 2021 08:27

Merge branch 'master' into ilm_linked_templates

309ccfe

[ILM] Added an a11y test for the index templates flyout

9c3fde4

yuliacech marked this pull request as ready for review July 27, 2021 15:01

yuliacech requested a review from a team as a code owner July 27, 2021 15:01

yuliacech requested review from sabarasaba and a team July 27, 2021 15:01

sabarasaba reviewed Jul 28, 2021

View reviewed changes

debadair approved these changes Jul 28, 2021

View reviewed changes

.../plugins/index_lifecycle_management/public/application/components/index_templates_flyout.tsx Outdated Show resolved Hide resolved

yuliacech and others added 2 commits July 29, 2021 14:28

Update x-pack/plugins/index_lifecycle_management/public/application/c…

8168239

…omponents/index_templates_flyout.tsx Co-authored-by: debadair <debadair@elastic.co>

[ILM] Fixed jest test and made 0 index templates to not open the flyout

45de6d4

kibanamachine and others added 2 commits July 29, 2021 09:37

Merge branch 'master' into ilm_linked_templates

a7b4732

[ILM] Fixed a11y test

453a4cf

sabarasaba approved these changes Jul 30, 2021

View reviewed changes

yuliacech merged commit c6420fb into elastic:master Jul 30, 2021

yuliacech mentioned this pull request Jul 30, 2021

[7.x] [ILM] Added a flyout with linked index templates (#106734) #107284

Merged

yuliacech mentioned this pull request Aug 3, 2021

[ILM] Refactored policies list to use EuiInMemoryTable #107510

Merged

3 tasks

alisonelizabeth mentioned this pull request Aug 25, 2021

[ILM] Layout issues with loading/empty states #109984

Closed

yuliacech mentioned this pull request Aug 30, 2021

[ILM] Fixed loading layout #110461

Merged

yuliacech deleted the ilm_linked_templates branch November 9, 2021 11:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ILM] Added a flyout with linked index templates #106734

[ILM] Added a flyout with linked index templates #106734

yuliacech commented Jul 26, 2021 •

edited

yuliacech commented Jul 27, 2021

yuliacech commented Jul 27, 2021

elasticmachine commented Jul 27, 2021

sabarasaba left a comment

sabarasaba Jul 28, 2021

debadair left a comment

debadair commented Jul 28, 2021

Empty state

yuliacech commented Jul 29, 2021

yuliacech commented Jul 30, 2021

yuliacech commented Jul 30, 2021

sabarasaba left a comment

kibanamachine commented Aug 3, 2021

API count

API count missing comments

[ILM] Added a flyout with linked index templates #106734

[ILM] Added a flyout with linked index templates #106734

Conversation

yuliacech commented Jul 26, 2021 • edited

Summary

Changes to the codebase

Screenshots

ILM policies list with a new "Linked index templates" column

Index templates flyout

Flyout video

Checklist

Release Note

yuliacech commented Jul 27, 2021

yuliacech commented Jul 27, 2021

elasticmachine commented Jul 27, 2021

sabarasaba left a comment

Choose a reason for hiding this comment

Enhance flyout table

Empty state

Missing padding for close flyout cta

sabarasaba Jul 28, 2021

Choose a reason for hiding this comment

debadair left a comment

Choose a reason for hiding this comment

debadair commented Jul 28, 2021

Empty state

yuliacech commented Jul 29, 2021

yuliacech commented Jul 30, 2021

yuliacech commented Jul 30, 2021

sabarasaba left a comment

Choose a reason for hiding this comment

kibanamachine commented Aug 3, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

API count

API count missing comments

History

yuliacech commented Jul 26, 2021 •

edited