Empty index patterns page re-design #64258

cchaos · 2020-04-22T21:42:38Z

Fixes #57401

As detailed in the issue referenced above this PR addresses the empty screens of Management / Index Patterns.

Screenshots below indicate "Before" on the left, and "After" on the right

No data

The screen above also shows the case where the license may not include a specific feature.

No index patterns

Those are the main new screens. Below are some slight updates to current screens.

Creation Wizard

Listing page

Need help with

Fix routes: All "Index Pattern" pages should show the "No data" page when no data is available. Right now only the "Create" page does.
Get permissions/licensing hooked in for the "Upload" option on the "No data" page so it disables correctly. Similar to how Alerts handles this.

Checklist

i18n
Links to the correct docs pages
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
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility, including a check against IE11

cchaos · 2020-04-23T20:12:52Z

@elasticmachine merge upstream

elasticmachine · 2020-04-23T20:12:53Z

merge conflict between base and head

AlonaNadler · 2020-04-24T20:12:51Z

Hey, I checked the PR with two states:

I had indices in ES but no index pattern in Kibana, I didn't see a change in the UI, any idea why ?
No data at all overall looks great. One important correction. Upload a file is not a gold capability it's a basic license capability.

cchaos · 2020-04-24T21:28:44Z

I had indices in ES but no index pattern in Kibana, I didn't see a change in the UI, any idea why?

I have no idea. Can you elaborate further? What did you see vs what you expected to see.

Upload a file is not a gold capability it's a basic license capability.

Yes, that's just a placeholder, sorry I don't know all the license capabilities. I'm hoping that @mattkime will be able to help get the correct license checks in there for that one.

AlonaNadler · 2020-04-24T22:35:57Z

I had indices in ES but no index pattern in Kibana, I didn't see a change in the UI, any idea why?

I have no idea. Can you elaborate further? What did you see vs what you expected to see.

I don't see the new design when I land in the index pattern page with data in ES but no index pattern
I should see this:

instead this is what I get

elizabetdev · 2020-04-27T14:10:20Z

@cchaos,

I improved the styles and optimized the illustration:

@AlonaNadler, Caroline talked with @mattkime so he could help us with the routing structure and the licensing checks.

cchaos · 2020-04-27T14:39:34Z

@AlonaNadler The reason you're not getting the empty index page screen is because the Index pattern page is auto-directing you to the "Create" page. If you click on the "Index patterns" breadcrumb in the header, it should force you back to the listings/empty page.

We're hoping that fixing the routing will be part of this PR.

Thanks @miukimiu , looks great! I'll pull down and do some cleanup wrt i18n and test (if I can).

elizabetdev · 2020-04-27T17:14:35Z

@cchaos,

Fixed the illustrations colors. They now change according to the active theme:

making a new component for the empty index panel

cchaos · 2020-04-29T14:13:45Z

@elasticmachine merge upstream

snide

There were a couple designers on this project so I'm gonna consider the code owners review here covered through the pairing. Only suggestion I have after looking at the code is that these pages are so separated, you might want to import the sass directly into the files that are being used rather than chaining the imports off a single index. That's not necessary of course, it's just something I noticed when looking at the diff.

The screens themselves look fantastic. Really nice work @cchaos and @miukimiu

There's a couple small things I noticed, but this overall looks mergeable.

snide · 2020-04-29T22:24:06Z

.sass-lint.yml

@@ -1,5 +1,6 @@
 files:
  include:
+    - 'src/legacy/core_plugins/kibana/public/management/**/*.s+(a|c)ss'


snide · 2020-04-29T22:30:17Z

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/_index.scss

+@import 'create_index_pattern_wizard/index';
+@import 'empty_index_pattern_prompt/index';
+@import 'index_pattern_table/index';


This stuff can probably be imported into the individual components, and then use the a more broad import individually into those files for the vars/mixins as needed.

This section isn't in the NP yet, so we have to stick with our old SASS manifests.

..._pattern_wizard/components/step_index_pattern/components/loading_indices/loading_indices.tsx

...ns/index_patterns/create_index_pattern_wizard/components/step_time_field/step_time_field.tsx

...management/sections/index_patterns/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx

mattkime · 2020-04-30T02:53:04Z

@cchaos I'd like make sure I understand the routing changes that need to occur.

We need to show the load data screen before the 'create your first index pattern' screen. Those two things are currently tied to routing but I don't think they have to be. We just need to display them appropriately on #/management/kibana/index_patterns - correct?

As I mentioned in slack, I think the design needs to account for a user that needs to create an index pattern on a hidden or system index. This is possible with our existing design. It could just be a link that sidesteps the load data view.

cchaos · 2020-04-30T15:33:17Z

@mattkime Correct, currently the only time you see the "no data" screen is on the "Create" page. But we want that screen to show in the "Index table" page too. So they can't try to create an index pattern before they have data. And all the apps that re-direct to index-patterns when there are none, should go to the index-pattern table page that will then show the no-data, or no-index-pattern screen.

As for the hidden indices, we could possibly add a link in the footer similar to the docs one that would carry them to the create page with the "Show hidden indices" toggle on by default.

Something like this, though it would need to be word-smithed.

kibanamachine · 2020-04-30T17:13:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: ff9f54c
Pipeline Steps (look for red circles / failed steps)
Interpreting CI Failures

Failed CI Steps

History

💔 Build #44462 failed adf7637
💔 Build #44439 failed 5553676
💔 Build #44323 failed b6b6b07
💚 Build #44187 succeeded 14ea6d6
💔 Build #44134 failed 6eda2c1

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

cchaos · 2020-04-30T21:08:22Z

Following up from a discussion with @mattkime. This has been moved to 7.9 since there seems to be more effort left than can be done in the time left for 7.8. Setting the PR back to draft.

The current problem with what exists in this PR is there is no way to create index patterns with system/hidden indices (which is a current and used feature today).

The consensus is that only the index pattern listing page should show one of the three options:

No data
No index patterns
Listing table

But that the creation page is always reachable. [Whimsical]

Todo for design:

Find a good place for a link to the creation page from the "No data" screen

Todo for eng:

Move "No data" screen and visibility logic to the listing page
Change all auto-routes when no index patterns exists that currently go to the creation page to go to the listing page instead

mattkime · 2020-05-06T14:54:01Z

Lets make this dependent upon #65026 which moves this codebase to the new platform. I think it will also make it easier to complete this PR.

elizabetdev · 2020-05-21T20:53:49Z

I've just updated the illustrations with the new designs from https://github.com/elastic/Design/issues/2470.

cchaos · 2020-06-10T21:27:52Z

Closing in favor of new NP PR #68819

cchaos changed the title ~~Empty index patterns~~ Empty index patterns page re-design Apr 22, 2020

cchaos changed the title ~~Empty index patterns page re-design~~ [WIP] Empty index patterns page re-design Apr 22, 2020

cchaos added 2 commits April 23, 2020 16:24

Phase 1: New screens added in place of no data and 0 index patterns

82c5b6b

Phase 2: Re-add help flyout on create screen and cleanup create screens

3a022fb

cchaos force-pushed the empty-index-patterns branch from 97c3ecb to 3a022fb Compare April 23, 2020 20:25

Responsive styles and illustration optimization

630106e

Illustration dark and light themes

9b01d1f

elizabetdev and others added 10 commits April 27, 2020 18:16

Moving breakpoint to the bottom

3776edb

Re-org/fixing Sass files and class names

730826a

Copy edits from @gchaps and fixing i18n

c537974

Update illustration classes

35ab5a3

Fix snaps

673e6c9

Putting old prompt back to it’s original component and

c401f1c

making a new component for the empty index panel

Fix i18n token capitalization

264da5b

Cleanup

b197f1e

Added to sass-lint

a800623

Fix security related test

6998e56

elasticmachine and others added 4 commits April 29, 2020 10:13

Merge branch 'master' into empty-index-patterns

3a433c2

More copy changes

8e3c4e7

Added simple render test to empty_index_pattern_prompt

c7fe9ca

Fix sass-lint

f9c8cb6

cchaos changed the title ~~[WIP] Empty index patterns page re-design~~ Empty index patterns page re-design Apr 29, 2020

cchaos added Feature:Data Views Data Views code and UI - index patterns before 8.0 release_note:enhancement v7.8.0 v8.0.0 labels Apr 29, 2020

cchaos marked this pull request as ready for review April 29, 2020 20:26

cchaos requested review from a team as code owners April 29, 2020 20:26

Merge branch 'master' into empty-index-patterns

00c10e3

snide approved these changes Apr 29, 2020

View reviewed changes

mattkime and others added 3 commits April 29, 2020 22:28

add doclinks

b6b6b07

eslint fixes

5553676

Adding eui text center classes

adf7637

Removing inline style

ff9f54c

cchaos added v7.9.0 and removed v7.8.0 labels Apr 30, 2020

cchaos marked this pull request as draft April 30, 2020 21:09

Updated illustration

c66b1a0

mattkime mentioned this pull request Jun 5, 2020

Empty Index Patterns page redesign #68450

Closed

3 tasks

cchaos mentioned this pull request Jun 10, 2020

Empty index patterns page re-design #68819

Merged

7 tasks

cchaos closed this Jun 10, 2020

cchaos deleted the empty-index-patterns branch October 1, 2020 02:02

Empty index patterns page re-design #64258

Empty index patterns page re-design #64258

Uh oh!

Conversation

cchaos commented Apr 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes #57401

No data

No index patterns

Creation Wizard

Listing page

Need help with

Checklist

Uh oh!

cchaos commented Apr 23, 2020

Uh oh!

elasticmachine commented Apr 23, 2020

Uh oh!

AlonaNadler commented Apr 24, 2020

Uh oh!

cchaos commented Apr 24, 2020

Uh oh!

AlonaNadler commented Apr 24, 2020

Uh oh!

elizabetdev commented Apr 27, 2020

Uh oh!

cchaos commented Apr 27, 2020

Uh oh!

elizabetdev commented Apr 27, 2020

Uh oh!

cchaos commented Apr 29, 2020

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

snide Apr 29, 2020

Choose a reason for hiding this comment

Uh oh!

snide Apr 29, 2020

Choose a reason for hiding this comment

Uh oh!

cchaos Apr 30, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mattkime commented Apr 30, 2020

Uh oh!

cchaos commented Apr 30, 2020

Uh oh!

kibanamachine commented Apr 30, 2020

💔 Build Failed

Failed CI Steps

History

Uh oh!

cchaos commented Apr 30, 2020

Uh oh!

mattkime commented May 6, 2020

Uh oh!

elizabetdev commented May 21, 2020

Uh oh!

cchaos commented Jun 10, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

cchaos commented Apr 22, 2020 •

edited

Loading