[ILM] Update the ILM tab on the index details page

[yuliacech]

Summary

Fixes #170516
This PR updates how the ILM tab is rendered on the index details page to make it look more fitting with other tabs.

Screenshots

ILM is waiting for a step to complete

ILM has an error

ILM has no errors and is not waiting for a step

How to test

I recommend using a chrome extension to mock the backend responses, for example https://tweak-extension.com/docs/intro.
To mock the response of the index request, configure the extension to mock the url /internal/index_management/indices/ and let it return various ilm configurations:

index with ILM that is waiting for a step to complete

{
  "health": "green",
  "status": "open",
  "name": "test",
  "uuid": "cJYz9o4jTjuAZaMNS3ERyQ",
  "primary": "1",
  "replica": "0",
  "documents": 23654,
  "documents_deleted": 0,
  "size": "248b",
  "primary_size": "248b",
  "isFrozen": false,
  "aliases": "none",
  "hidden": false,
  "isRollupIndex": false,
  "ilm": {
    "index": "test-000020",
    "index_creation_date_millis": 1538475653281,
    "time_since_index_creation": "4.12m",
    "managed": true,
    "policy": "my_lifecycle3",
    "lifecycle_date_millis": 1538475653281,
    "lifecycle_date": "2018-10-15T13:45:21.981Z",
    "age": "4.12m",
    "phase": "warm",
    "phase_time_millis": 1538475653317,
    "phase_time": "2018-10-15T13:45:22.577Z",
    "action": "allocate",
    "action_time_millis": 1538475653317,
    "action_time": "2018-10-15T13:45:22.577Z",
    "step": "check-allocation",
    "step_time_millis": 1538475653317,
    "step_time": "2018-10-15T13:45:22.577Z",
    "step_info": {
      "message": "Waiting for all shard copies to be active",
      "shards_left_to_allocate": -1,
      "all_shards_active": false,
      "number_of_replicas": 2
    },
    "phase_execution": {
      "policy": "my_lifecycle3",
      "phase_definition": {
        "min_age": "0ms",
        "actions": {
          "allocate": {
            "number_of_replicas": 2,
            "include": {
              "box_type": "warm"
            },
            "exclude": {},
            "require": {}
          },
          "forcemerge": {
            "max_num_segments": 1
          }
        }
      },
      "version": 2,
      "modified_date": "2018-10-15T13:20:02.489Z",
      "modified_date_in_millis": 1539609602489
    }
  },
  "isFollowerIndex": false
}

index with ILM that has an error

{
  "health": "green",
  "status": "open",
  "name": "test",
  "uuid": "cJYz9o4jTjuAZaMNS3ERyQ",
  "primary": "1",
  "replica": "0",
  "documents": 23654,
  "documents_deleted": 0,
  "size": "248b",
  "primary_size": "248b",
  "isFrozen": false,
  "aliases": "none",
  "hidden": false,
  "isRollupIndex": false,
  "ilm": {
    "index": "test-000056",
    "index_creation_date_millis": 1538475653281,
    "time_since_index_creation": "50.1d",
    "managed": true,
    "policy": "my_lifecycle3",
    "lifecycle_date_millis": 1538475653281,
    "lifecycle_date": "2018-10-15T13:45:21.981Z",
    "age": "50.1d",
    "phase": "hot",
    "phase_time_millis": 1538475653317,
    "phase_time": "2018-10-15T13:45:22.577Z",
    "action": "rollover",
    "action_time_millis": 1538475653317,
    "action_time": "2018-10-15T13:45:22.577Z",
    "step": "ERROR",
    "step_time_millis": 1538475653317,
    "step_time": "2018-10-15T13:45:22.577Z",
    "failed_step": "check-rollover-ready",
    "is_auto_retryable_error": true,
    "failed_step_retry_count": 1,
    "step_info": {
      "type": "cluster_block_exception",
      "reason": "index [test-000057/H7lF9n36Rzqa-KfKcnGQMg] blocked by: [FORBIDDEN/5/index read-only (api)",
      "index_uuid": "H7lF9n36Rzqa-KfKcnGQMg",
      "index": "test-000057"
    },
    "phase_execution": {
      "policy": "my_lifecycle3",
      "phase_definition": {
        "min_age": "0ms",
        "actions": {
          "rollover": {
            "max_age": "30s"
          }
        }
      },
      "version": 3,
      "modified_date": "2018-10-15T13:21:41.576Z",
      "modified_date_in_millis": 1539609701576
    }
  },
  "isFollowerIndex": false
}

Checklist

• 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

Release Note

The ILM summary on the index page is now displayed in a separate tab.

[elasticmachine]

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

[ryankeairns]

Hey @yuliacech , Alison reached out about a design review. Are there any particular aspects you'd like feedback on?

[yuliacech]

Thanks a lot for looking into this, @ryankeairns! I think I'd be interested if the new ILM summary makes sense in relation to the existing ILM UI and if it fits with the rest of the tabs on the index page. I'll add a screen recording to the PR description with those other UI elements. I'm also trying to deploy this PR to Cloud, but it seems like the deploy keeps failing on the build.

[yuliacech]

Hey @ryankeairns, I was finally able to get a Cloud deployment up and running on this PR, will send you the credentials in slack. There is an index "test_index" in Index Management that has an ILM policy attached. Could you please have a look and let me know what you think?

[sabarasaba]

Thanks for working on this @yuliacech! Changles lgtm!

Unrelated to this PR, but while I was testing I realized that you can click the edit policy in ILM link you might be taken to a managed policy, I was wondering if it would make sense to warn the user before they click it (perhaps a warning icon with a tooltip or something 🤔 ).

[yuliacech]

Thanks a lot for the review, @sabarasaba!
Regarding a managed ILM policy: we currently don't have info if the policy is managed or not but we could send an additional request if needed. I'm not sure though that it is worth the extra loading since the user can't change the policy on the index page anyways. I think about this UI as like a short summary about ILM with more details available in ILM if needed.

[ryankeairns]

Hey Yulia, I'm not having much luck hacking together - via Chrome Inspect - what I'm about to describe, but I'll do my best.

To more closely align to the other tabs, let's do a flex-grow 1 and 3 split - Lifecycle policy being on the left at 1fr; the Current phase and possible error panel stacked at right in a 3fr column (with Error on top if present).

The other comment I have is regarding typography. The panel titles feel rather large, so let's try wrapping the headings in an xs EuiTitle as opposed to m EuiText. The Description is known to be a bit heavy/bold, so we'll address that typography bit later.

@julianrosado may have more to add or clarify as the Search team did the design work on the sibling tabs.

Thanks for reaching out!

[julianrosado]

I had the same thought @ryankeairns and had it ready to go mocked up! Have we just become best friends???

@yuliacech I have a draft Figma board here: https://www.figma.com/file/xbilnV89bje6KHXZhLv1qG/Lifecycle-ponderings?type=design&node-id=0%3A1&mode=design&t=zA9WQEbEo2Opozvr-1

I was just trying to decide if the panels should match the overview tab (where the panels have outlines) or all the other tabs (where the panels have shadows). I know we are moving away from shadowed panels overall (correct me if I'm wrong Ryan) so I'd suggest outlined panels.

Don't mind any inconsistencies here (such as the wrong tab being selected and the wrong nav, etc.) as I only had a few minutes to mock these up!

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: c2c3f67
• Cloud Deployment

Failed CI Steps

• Investigations - Security Solution Cypress Tests #3
• Serverless Osquery Cypress Tests #2

Test Failures

• [job] [logs] Investigations - Security Solution Cypress Tests #3 / Ransomware Detection Alerts Ransomware in Timelines Renders ransomware entries in timelines table Renders ransomware entries in timelines table

Metrics [docs]

Page load bundle

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

id	before	after	diff
indexLifecycleManagement	26.6KB	27.2KB	+553.0B

History

• 💛 Build #175381 was flaky 545662f
• 💛 Build #174712 was flaky d19a661
• 💔 Build #174428 failed 9a89231
• 💔 Build #174281 failed e385871
• 💔 Build #174146 failed 2e5fb8e

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

[yuliacech]

Thanks a lot for your feedback, @ryankeairns and @julianrosado! I've updated the ILM tab as you suggested: the ILM tab has the same 1-3 structure as Mappings and Settings, but with the smaller panel on the left, new screenshots are in the PR description. I'll be merging this PR today but please feel free to let me know, if you have more feedback that I can address in a follow up work.