[discuss] Index pattern creation dialog

[mattkime]

What if you could create an index patttern from within various kibana applications via a dialog box?

I think the index pattern creation flow would be easy to translate to visually smaller design. There are only two steps:

• Enter wildcard / show selected indices
• Select time stamp field

Primary benefit - reduction of context switching. Currently, you you must go to Stack Management / Index Patterns and then navigate back to your task.

Alternative - perhaps another non modal UI would work as well, such as an interface where you simply provide the wildcard pattern and timestamp and there's a greater assumption that the user knows what they're doing.

Current flow -

Initial view

Wildcard entered, showing matches

Select timestamp field

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[mattkime]

Owners
@mattkime - Primary owner
@miukimiu - Owns design deliverables

Timeline and deliverables
Wireframes - Sept 14th

Target outcomes
Goal - Create index pattern without changing context

[cchaos]

Related issue(s):

• Time filter field on index pattern creation poor usability Time filter field on index pattern creation poor usability #68049

[miukimiu]

@mattkime and @cchaos,

Here's my initial wireframes/prototype: figma. (anyone at elastic can see the prototype)

My initial thoughts:

• I'm basically using what is already done in management. So we could share the code.
• A modal would be too small so I picked a flyout
• There's a confirmation step where we confirm that the index pattern was created with success. I'm not completely sure about the "There's more you can do". But the idea was to show that there are more fields that users can create.

[miukimiu]

@mattkime, @cchaos, and @AlonaNadler,

We have the initial wireframes/prototype and the last screen, is basically to confirm that the index pattern was successfully created.

I think it would be great to also display a few calls to actions because there's more a user can do to the index pattern. This is the initial idea:

So I'm not completely sure if we should display the "There's more you can do" or if we display what are the right CTAs. Any thoughts?

[mattkime]

I think it looks good (although I'm uncertain about the CTAs) - but wanted to mention that this should work for empty data / index pattern cases.

[miukimiu]

Yes @mattkime, I'll create more user flows for empty data / index pattern cases.

[elastic-jb]

@mattkime @miukimiu @AlonaNadler I like the design, and the call to action idea. It doesn't have to be a call to action style, but I like a quick way to create a scripted field or source field.

That being said, what about formatting? I feel like that is more common. I need to change the type and modify the formatting at least once when I create an index pattern to get a percentage to show correctly, or trim decimals a bit to get things to look more consistent. In that case, this dialog saves me from having to go to Stack Management to create the index pattern, but I still have to go there once it's created to get my visualizations to format numbers correctly.

It would be great if there was a more streamlined way make bulk changes to formatting. Just recently I found myself having to re-create index patterns for a demo and each time I had to go through 4 pages of fields and every time I edit one, it would restart the pagination at page 1. Luckily the table shows you when a format has been set, but it is still a frustrating experience if you need to edit more than one ore two. I was editing over a dozen in this case.

Giving users an optional experience to edit field format types, and making it easy to edit several fields quickly would be a big win. I would say that goes for any index creation dialog, not just this one.

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[mattkime]

I'm picking this up for 7.14 and have a couple of thoughts

• we still need mockups for the first index pattern
• Users need to select whether they're creating a rollup index pattern or a normal index pattern as shown here - https://www.elastic.co/guide/en/kibana/current/data-rollups.html#_visualize_the_rolled_up_data
• If we can come up with a collapsed display for the index list, then the creation flow can occur in a single view.

[ryankeairns]

@mattkime The Kibana Design team will be picking this up from @miukimiu . How soon will you be starting work on your side of things?

[mattkime]

@ryankeairns I'm hoping to start working on this in three weeks. It would be nice to have the design complete four weeks from now, if possible. I'll be out April 26th through May 7th.

[andreadelrio]

After a couple of iterations, consulting with @mattkime and getting feedback on a design critique, here are the designs that I'm proposing.

Most up to date Figma prototype can be found here.

Things to consider

• We'll be using a side panel next to a flyout, following the same pattern proposed by Dmitry for Runtime fields preview.
• The panel appears to the right of the flyout.
• The flyout doesn't have an (x) button, only a Cancel/Close button on the footer.
• By default, the side panel show the list of indices the user can match with their pattern. As they input a pattern name the content of the side panel is refreshed and shows the results of the match.
• Upon successfully creating a new index pattern, the user receives a toast and is shown that index pattern (if on Discover).
• The time field dropdown is disabled until the user has input an index pattern name. While it is disabled we show a tooltip explaining why it is disabled.

• Include system and hidden indices switch moves to Advanced Settings

• First index pattern view (copy to be adjusted for this specific use case)
  

[mattkime]

Thanks @andreadelrio , this looks great!

The first index pattern view - I think it should be in the flyout. The index pattern creation modal provides a single API call to display anything index pattern creation related. Doing anything outside of that flyout requires additional integration from each consuming app, potentially every app that uses index patterns.

[mattkime]

implemented - #101853