Dashboard design updates #29896

cchaos · 2019-02-02T02:07:54Z

This PR attempts to clean up the visuals (including spacing) of the dashboard (and some vis's)

1. States

a. Loading

I replaced the Loading... text with EUI's loading bar chart. However, I could only do this at the dashboard panel level and couldn't find a way to add it to the empty .visChart component which loads shows empty for a long while.

b. Visual changes to edit mode

Panel's now have a permanent dashed border and hovering over areas that are used for moving and resizing (react-layout stuff), they highlight in yellow.

c. Switching between edit and view modes fixed

There is a "bug" where the individual dashboard panel's wouldn't get the edit/view state update until a hard refresh. The panel's visual state was based on this "bug" so when you switched between from edit to view mode, it still looked like you were in edit mode. I was able to fix this by using the layout class .dshLayout--editing instead as this did get updated correctly.

2. Panel titles

a. Panels no longer take up space if they don't exist.

It used to be that the space alloted for panel titles would still be present even if the title wasn't. Now, the content correctly shifts instead.

b. Titles also now use a EUI title style which are darker and bolder.

3. Errors

I've tried to consolidate the variety of error messages across the different vis types (excluding vega cuz that's just built weird). They should all be a small icon with a small subdued text description. With tag cloud, I moved the message into a tooltip and just display a warning icon.

4. Legend toggle

a. One location

The legend toggle was a tricky one. As a design team, we decided that we'd like to keep the legend toggle in one location and change the icon to represent 'legend' not a direction (arrow). This way when a user is searching for the legend, the toggle is always in the same place, even though the legend may appear in different locations.

b. Toggle states

We decided that the legend toggle just added noise to the dashboard when not interacting with it. So for view mode of the dashboard, we've hidden the toggle until hovering of the panel (similar to the way we handle the panel options menu).

Also, the button has an on/off state – currently just a background color in the on state.

This also means that the toggle has been moved in Visualize, but it's always visible.

Note: TSVB's legend wasn't touched. Though it could probably just use an icon update.

5. Bonus: Mobile

Our dashboard are completely unusable/unviewable on small device screens. I've implemented just a vertically stacked view on these small devices by overriding react-grid's layout styles and just display: blocking them.

Editing is completely broken when viewing in this stacked manner, so it only does this in view mode.

6. Other

a. I also had some adjustments to do in Visualize regarding the new font sizes.

b. I adjusted the controls vis a bit to allow for better wrapping of components and rearranged the button order and styles

c. I noticed that one of the error types was spitting out Markdown, so I tried to use markdown-it to parse it, but I think it needs some extra sanitizing or something because it just spits out the html as a string. Needs some help here

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
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
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-02-02T02:07:56Z

Pinging @elastic/kibana-design

snide · 2019-02-02T02:26:39Z

Fantastic work. I'll do a more thorough review quickly since I know we're coming down to the wire. cc @elastic/kibana-app team to be aware we're working on this and it would be nice to have some eyes on it early next week.

Because these changes can cause rendering changes in dashboards, our thought is to target this only at 7 only and consider it a (easily addressable) breaking change for existing dashboards. This means our own prebuilt dashboards in our data data tutorials. The "fix" will be to simply resize panels if they've shifted because of the new padding / title / font shifts. This likely was already happening due to the font changes in 7 anyway. I most cases this should be extremely minor.

Also @asawariS, @alexfrancoeur and @AlonaNadler should check out these changes. My guess is that the read only mobile view is something worth broadcasting in some way as we ramp up our launch. Along with our new nav, more and more of Kibana will be available (but maybe not optimized from a payload perspective) for smaller screens. One thought there @cchaos, we might want to just hide the edit button in mobile using one of our wrappers or utility classes.

elasticmachine · 2019-02-02T02:48:41Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-02-03T21:53:56Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos · 2019-02-03T22:10:39Z

7. Empty state

I had forgotten to also update the Dashboard empty state. That has been pushed, however, it's kind of hacky because the component is still angular. But it now behaves as so:

elasticmachine · 2019-02-03T22:48:32Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

cchaos · 2019-02-03T22:50:25Z

CI Passed, so no longer WIP.

@snide I'd love to hide that edit button, but I think there are some implications with that and we'd have to do some hacky stuff with adding the label as an append to the classname of all menu items which isn't great because of any multi-word labels.

snide

Minor comments below.

I did a more general scan of this visually tonight. I think it touches on all the stuff we jammed on and seems good to me. As an amendment to my previous comment I also think it likely will likely have very minimal effects on existing dashboards (because in almost all places you've made things smaller), at least when looking at all the sample ones, so that makes it much less scary.

The only thing I'm guessing will be controversial with others is the legend toggling. Personally, I think this is a much cleaner way to handle it and would always optimize towards the read view of things rather than the edit views (since it will likely be seen many more times than edited). But we should at least give some PM / app team feedback here before merging. I think it is less obvious in the visualization app itself, which a trade-off I think we should be comfortable with.

The other additions are all fantastic and this cleans up dashboards considerably.

Small IE issue I noticed, but otherwise IE looks fine. Checked all other browsers for ya and they were fine.

src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss

src/legacy/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss

src/legacy/core_plugins/tagcloud/public/feedback_message.js

src/ui/public/doc_table/doc_table.html

snide · 2019-02-04T04:00:35Z

Another small one. We should switch the table display to use euiScrollbar

elasticmachine · 2019-02-04T16:05:33Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-02-04T16:43:19Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

timroes · 2019-02-04T18:46:46Z

@markov00 @emmacunningham Caroline changed the design of the legend toggle button a bit (see "4. Legend toggle" above). I think we should look on aligning design in elastic-charts for that or similar. Maybe worth syncing up on that with @cchaos

alexfrancoeur · 2019-02-04T19:43:49Z

Great work!! Some comments and feedback below. I didn't have a chance to read through the comments, so apologies for any duplicate info.

Loading looks good. It'll be especially helpful for visualizations not updated using _msearch (TSVB, vega, etc.).
I absolutely love that a panel gets resized now if there is no title. Certainly been missing this feature. The new bolding titles and styling work as well.
Visual changes to the editing process look good, but drag and drop seem to be lagging a bit on occasion (probably no different than before). I've noticed that it seems easier to drag and drop a panel from the top of the dashboard to the bottom and vice versa.
❤️ the new errors, wrapping of controls, legend title and MOBILE. Awesome work. Just talked to marketing about Mobile view.
I'm sure this is a result of the angularness of it, but the empty state looks off. I'd expect it to look like the empty management view for example and not have the two tone. Is it just dark mode?

snide · 2019-02-04T19:59:14Z

@alexfrancoeur two tone will get fixed with elastic/eui#1513 when it makes its way over (with a kb pr as well)

cchaos · 2019-02-04T20:06:26Z

Thanks @alexfrancoeur !

drag and drop seem to be lagging a bit on occasion

Yeah, nothing I did should have interfered with that. Most likely still a symptom of the dependency.

but the empty state looks off

Yeah, what @snide said. I've got some follow-ups that will fix all those.

x-pack/plugins/reporting/export_types/common/layouts/print.css

timroes

I have a couple of minor things noted in the code, and one accessibility issue:

You can no longer see which Options button is focused in Edit mode. Earlier that was visible since only the focused button had a background color, now every button has, and there is no visual distinction for the focused button anymore. We need a visual difference for the focused button.

Also I want to point out a weird behavior in mobile mode. As soon as you click on Edit all panels are jumping to their original positions and you get the squeezed panel view. As soon as you leave edit mode everythings back to "responsive" design. I understand why it's behaving like that, since we can't properly reorder any panels in responsive mode, since their "grid position" are just not there, but I want to point this out to @AlonaNadler and @alexfrancoeur again, that this behavior might also confuse users, and just want to raise awareness for it, even though I am not really vetoing against it.

src/legacy/core_plugins/kibana/public/dashboard/panel/panel_error.tsx

src/ui/public/vis/vis_types/vislib_vis_legend.html

x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css

alexfrancoeur · 2019-02-05T12:53:22Z

Responding to @timroes comment, can we simply remove edit mode when viewing through mobile? Would that be an even more confusing experience? Would love to hear @AlonaNadler thoughts here as well

cchaos · 2019-02-05T15:50:34Z

The best I can do right now is hide the Edit button via CSS in mobile screens so at least you can't toggle into edit mode. But it won't stop a user from being in edit mode then reducing their screen size. We can probably handle this better down the road, but I think the trade-off is huge for at least having read-only mobile view.

..And used a different selector for editing mode to fix bug of `.dshPanel--editing` needing a hard refresh to update.

- background fix - dark mode highlight color fix - euiScrollbars - euiSpacer

- No edit button in mobile - No markdown comment for panel error - i18n id addition - Remove euiHeader sharing fix

elasticmachine · 2019-02-05T17:20:52Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos · 2019-02-05T17:21:40Z

Hopefully flaky...

Jenkins, test this

elasticmachine · 2019-02-05T18:06:34Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

AlonaNadler · 2019-02-05T19:05:33Z

Great improvements here, really exciting stuff, congrats!!
One thing I wanted to check, @cchaos has a screenshot of creating a new dashboard, can we imminently open the visualizations/saved search flyout when users create a new dashboard instead making them click add? I think it will help users who create their first dashboard instead of possibly wondering what should be the next step

cchaos · 2019-02-05T19:31:51Z

@AlonaNadler Thanks for taking a look!

I think that makes sense, though out of scope of this PR as this mainly addresses visual updates. I would recommend creating an issue (if one doesn't already exist).

cchaos added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Feature:Dashboard Dashboard related features v7.0.0 labels Feb 2, 2019

cchaos requested a review from a team as a code owner February 2, 2019 02:07

cchaos added the WIP Work in progress label Feb 2, 2019

cchaos force-pushed the dashboard-updates-2 branch from 70d9c70 to 7736d17 Compare February 3, 2019 22:08

cchaos changed the title ~~[WIP] Dashboard design updates~~ Dashboard design updates Feb 3, 2019

cchaos removed the WIP Work in progress label Feb 3, 2019

cchaos requested a review from a team February 3, 2019 22:49

snide approved these changes Feb 4, 2019

View reviewed changes

cchaos force-pushed the dashboard-updates-2 branch from 7736d17 to 8e50c88 Compare February 4, 2019 15:23

timroes reviewed Feb 5, 2019

View reviewed changes

x-pack/plugins/reporting/export_types/common/layouts/print.css Outdated Show resolved Hide resolved

timroes suggested changes Feb 5, 2019

View reviewed changes

markov00 mentioned this pull request Feb 5, 2019

Align Legend design to K7 Design elastic/elastic-charts#34

Closed

cchaos added 16 commits February 5, 2019 11:46

Adjusted panel header

f5e67b7

..And used a different selector for editing mode to fix bug of `.dshPanel--editing` needing a hard refresh to update.

better positioning of legend toggle

0800528

Fixed legend toggle position

0d33192

Fixed some visualize sidebar font sizes

4fbe473

better position for resize handle

b97dfce

Consolidated error and warning messages

ad1560f

Last edits and removing old testing things

63a82b4

snaps

454cfdf

Fix tag cloud

3923d11

Comment out markdown-it for now, since it’s not working

f38c57c

update area chart snapshot

6a51d9d

Styled empty dashboard state

b79d4be

PR feedback

6cb8b2d

- background fix - dark mode highlight color fix - euiScrollbars - euiSpacer

Fix reporting

1e373bc

More PR comments

78473de

- No edit button in mobile - No markdown comment for panel error - i18n id addition - Remove euiHeader sharing fix

Revert “hide edit button”

0840302

cchaos force-pushed the dashboard-updates-2 branch from 69bdba9 to 0840302 Compare February 5, 2019 16:46

timroes mentioned this pull request Feb 5, 2019

Hide dashboard edit mode on small screen sizes #30103

Merged

2 tasks

cchaos merged commit 0618134 into elastic:master Feb 5, 2019

cchaos deleted the dashboard-updates-2 branch February 5, 2019 18:42

alexfrancoeur mentioned this pull request Feb 6, 2019

[Maps] Maps App and Layer Empty State #30324

Closed

snide mentioned this pull request Feb 16, 2019

Improve dashboard mobile experience #2563

Closed

alexfrancoeur mentioned this pull request Feb 19, 2019

Make Kibana mobile devices responsive #16717

Open

cchaos mentioned this pull request Apr 1, 2019

Dashboard with no margins missing borders #20689

Closed

flash1293 mentioned this pull request Oct 31, 2019

Dashboard edit button shown on mobile #49845

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard design updates #29896

Dashboard design updates #29896

cchaos commented Feb 2, 2019 •

edited

Loading

elasticmachine commented Feb 2, 2019

snide commented Feb 2, 2019 •

edited

Loading

elasticmachine commented Feb 2, 2019

elasticmachine commented Feb 3, 2019

cchaos commented Feb 3, 2019

elasticmachine commented Feb 3, 2019

cchaos commented Feb 3, 2019

snide left a comment •

edited

Loading

snide commented Feb 4, 2019

elasticmachine commented Feb 4, 2019

elasticmachine commented Feb 4, 2019

timroes commented Feb 4, 2019

alexfrancoeur commented Feb 4, 2019

snide commented Feb 4, 2019

cchaos commented Feb 4, 2019

timroes left a comment

alexfrancoeur commented Feb 5, 2019

cchaos commented Feb 5, 2019

elasticmachine commented Feb 5, 2019

cchaos commented Feb 5, 2019

elasticmachine commented Feb 5, 2019

AlonaNadler commented Feb 5, 2019 •

edited by cchaos

Loading

cchaos commented Feb 5, 2019

Dashboard design updates #29896

Dashboard design updates #29896

Conversation

cchaos commented Feb 2, 2019 • edited Loading

This PR attempts to clean up the visuals (including spacing) of the dashboard (and some vis's)

1. States

a. Loading

b. Visual changes to edit mode

c. Switching between edit and view modes fixed

2. Panel titles

3. Errors

4. Legend toggle

5. Bonus: Mobile

6. Other

Checklist

For maintainers

elasticmachine commented Feb 2, 2019

snide commented Feb 2, 2019 • edited Loading

elasticmachine commented Feb 2, 2019

💔 Build Failed

elasticmachine commented Feb 3, 2019

💔 Build Failed

cchaos commented Feb 3, 2019

7. Empty state

elasticmachine commented Feb 3, 2019

💚 Build Succeeded

cchaos commented Feb 3, 2019

snide left a comment • edited Loading

Choose a reason for hiding this comment

snide commented Feb 4, 2019

elasticmachine commented Feb 4, 2019

💚 Build Succeeded

elasticmachine commented Feb 4, 2019

💚 Build Succeeded

timroes commented Feb 4, 2019

alexfrancoeur commented Feb 4, 2019

snide commented Feb 4, 2019

cchaos commented Feb 4, 2019

timroes left a comment

Choose a reason for hiding this comment

alexfrancoeur commented Feb 5, 2019

cchaos commented Feb 5, 2019

elasticmachine commented Feb 5, 2019

💔 Build Failed

cchaos commented Feb 5, 2019

elasticmachine commented Feb 5, 2019

💚 Build Succeeded

AlonaNadler commented Feb 5, 2019 • edited by cchaos Loading

cchaos commented Feb 5, 2019

cchaos commented Feb 2, 2019 •

edited

Loading

snide commented Feb 2, 2019 •

edited

Loading

snide left a comment •

edited

Loading

AlonaNadler commented Feb 5, 2019 •

edited by cchaos

Loading