full screen mode implementation for dashboard #12265

stacey-gammon · 2017-06-09T19:31:36Z

Release Note:
You can now enter full screen mode when viewing a dashboard. This hides the Chrome and the top nav bar. If you have any filters applied, you'll see the filter bar, otherwise that will be hidden as well. To exit full screen mode, hover over and click the Kibana button on the lower left side of the page, or simple press the ESC key.

alexfrancoeur · 2017-06-12T14:41:56Z

@stacey-gammon woo!! this PR is fantastic. I saw some comments in slack around showing / hiding the query bar and filter bar on hover and agree that should be in addressed in another PR. I also think that for the first iteration, we should address the most prominent use case of showcasing this dashboard. I can't imagine there will be much need for interaction and querying in full screen mode for this scenario. This is looking great! I have some usability comments below.

Is it possible to trigger the browser to go in full screen mode as well when clicking the full screen button? I expected my browser to expand to full screen as well when clicking on this button. Not the end of the world if we can't (progress over perfection) but this is common behavior amongst other dashboarding tools that have this feature
Can we add keyboard controls here for exiting full screen mode? I was aware of the button on the bottom but also attempted to use the esc key to leave full screen mode. Just a though. This may conflict with browser full screen modes as well. It'd be nice if hitting esc exited both browser and Kibana full screen mode.
I see full screen mode in edit mode. It seems odd to me to have that there. I assume this is necessary because when resizing Kibana we automatically expand the panels and not shift the around to fit the screen. Is that correct?
Somewhat related, I noticed that we persist the side bar space until you adjust the browser size
It's a bit hard to read "Exit full screen mode" in dark mode. There isn't enough contrast. It'd be good to get @snide's feedback here

Hope this feedback helps! Let me know if you need any other clarification

cjcenizal · 2017-06-12T23:48:06Z

This is REALLY COOL. This features makes dashboards feel much more polished, to an extent that is disproportionate to the size of the feature.

I noticed a UX bug. When the dashboard has no panels, clicking "Add" should probably pop you out of full-screen mode so you can see the "Add panel" dropdown:

I also couldn't get the filter and query bar to show up in full screen mode. Am I supposed to be able to do that in this version of the PR? If so, what do I need to do to get them to show?

That said, I like all of @alexfrancoeur's suggestions above.

My only suggestion would be about our approach. I suggest we refine the UX first and then tackle the appearance and behavior of the "Exit full screen mode" button as the very last step. I think we can make some adjustments to make it more consistent with the look-and-feel and I'm sure @snide has thoughts on this too.

…screen

stacey-gammon · 2017-06-13T16:00:13Z

@alexfrancoeur -

Is it possible to trigger the browser to go in full screen mode as well when clicking the full screen button? I expected my browser to expand to full screen as well when clicking on this button. Not the end of the world if we can't (progress over perfection) but this is common behavior amongst other dashboarding tools that have this feature

It's possible (though sounds like it might be browser specific), but I'm not sure I agree with this one. I tried in Google Docs, and full screen doesn't automatically pop the browser into full screen mode. I can see a use case of someone wanting to maximize the browser space, but still be able to quickly tab to other browser windows/desktop icons/etc.

Can we add keyboard controls here for exiting full screen mode? I was aware of the button on the bottom but also attempted to use the esc key to leave full screen mode. Just a though. This may conflict with browser full screen modes as well. It'd be nice if hitting esc exited both browser and Kibana full screen mode.

Great idea, and actually checking out Google Docs full screen mode for the above, looks like they only offer a keyboard way to exit Full screen mode. An interesting idea if we want to get rid of the button on the bottom.

I see full screen mode in edit mode. It seems odd to me to have that there. I assume this is necessary because when resizing Kibana we automatically expand the panels and not shift the around to fit the screen. Is that correct?

I can get rid of it from full screen mode, but I could potentially see the use case, albeit much less common. Maybe just wanting to move around, resize, or see how it will look in Full Screen mode.

Somewhat related, I noticed that we persist the side bar space until you adjust the browser size

Will investigate

It's a bit hard to read "Exit full screen mode" in dark mode. There isn't enough contrast. It'd be good to get @snide's feedback here

Good catch, will look into.

@cjcenizal

I noticed a UX bug. When the dashboard has no panels, clicking "Add" should probably pop you out of full-screen mode so you can see the "Add panel" dropdown:

Ah good point, will fix.

I also couldn't get the filter and query bar to show up in full screen mode. Am I supposed to be able to do that in this version of the PR? If so, what do I need to do to get them to show?

Query bar doesn't show up, filter bar should show up if you have a filter applied.

We can investigate further options for when to show the query bar (perhaps offer some configurations - would be nice to do the same for embedded mode). But as a first pass, I think we should punt on it. The kbn top nav is tightly coupled to the chrome being visible, so the logic would have to be refactored out first. We'd also have to figure out the UI for the configuration. So I think those are great ideas, but I don't think it should hold up this more simplified version.

…gular modes

stacey-gammon · 2017-06-13T18:31:20Z

Fixed the bugs mentioned, will wait to hear about overall styling on the button before fixing the dark theme version.

stacey-gammon · 2017-06-14T19:47:55Z

jenkins, test this

snide · 2017-06-20T19:01:32Z

src/core_plugins/kibana/public/dashboard/styles/index.less

+
+.exitFullScreenMode:hover {
+  bottom: 0px;
+  transition: all .5s ease;


Here's a cleaner animation for you...

Does the following

Moves the bug to the top, which is where the controls originally start.

Uses more reliable vars.

Improves the transition by

Using transform instead of position (much smoother, gpu now takes over).

Puts transition on the base selector, now works on on and off hover, instead of just on.

Speeds it up. In general, no hover animation should take longer than 250ms.

When in doubt use ease-in-out, rather than just ease.

Note that you should also up the padding to .dashboard-grid to 20px if you move it up. In general I've been adding similar increased padding across Kibana, so it's not just for this PR that we need it.

.exitFullScreenMode { background-color: @globalColorLightestGray; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; width: 200px; height: 40px; left: 0; right: 0; top: 0; margin-left: auto; margin-right: auto; padding-bottom: 0; position: fixed; transform: translateY(-26px); z-index: 50; display: block; transition: transform .2s ease-in-out; border: solid 1px @globalColorLightGray; .kuiIcon { display: block; } &:hover { transform: translateY(-1px); } }

It’s awkward with no obvious save button to escape edit mode.

stacey-gammon · 2017-06-20T20:27:17Z

Added the new styles (with some slight modifications, including leaving the button on the button after chatting with @snide about the way it looks on the top with filters applied).

Also addressed dark theme variation:

And remove Full Screen option from edit mode because it's awkward with the lack of the obvious Save option. Can easily add it in later if we deem it appropriate.

kobelb

I think this functionality is great! Just a few comments, and I noticed that the browser back button doesn't play that nicely with exiting full screen mode.

kobelb · 2017-06-21T13:51:21Z

src/core_plugins/kibana/public/dashboard/dashboard.js

@@ -25,6 +25,7 @@ import { notify } from 'ui/notify';
 import './panel/get_object_loaders_for_dashboard';
 import { documentationLinks } from 'ui/documentation_links/documentation_links';
 import { showCloneModal } from './top_nav/show_clone_modal';
+import { ESC_KEY_CODE } from 'ui_framework/services';


kobelb · 2017-06-21T14:30:43Z

src/core_plugins/kibana/public/dashboard/dashboard.html

@@ -68,9 +78,11 @@
      </form>
    </div>
  </kbn-top-nav>
+  </div>


This looks like a dangling closing tag, and should be able to be removed.

kobelb · 2017-06-21T14:40:46Z

src/core_plugins/kibana/public/dashboard/dashboard.js

+        $scope.fullScreenMode = fullScreenMode;
+        dashboardState.setFullScreenMode(fullScreenMode);
+        chrome.setVisible(!fullScreenMode);
+        $scope.$root.$broadcast('globalNav:update');


I don't think that we should be emitting the globalNav:update event as this is something that the globalNav itself used to be doing, and we're hijacking it to re-render the dashboard.

yea, I figured the global navigation did update, so it wasn't that bad, though I hate those broadcasts. I can do $window.dispatchEvent(new Event('resize')); to trigger the re-render of the grid, which should also fixe the bug @nreese discovered. How do you feel about that? I don't think there is really a good way to tell gridster to resize directly. Or maybe I'm missing a more obvious solution...

Using the native resize event feels equally gross because it's normally fired by the browser itself, and it feels like we'd be hijacking this as well.

Since the dashboard-grid is a directive within the dashboard we shouldn't have to resort to using a $scope.$root.$broadcast and should be able to just call a function that we pass to it if we need to trigger the resize.

kobelb · 2017-06-21T15:17:30Z

src/core_plugins/kibana/public/dashboard/dashboard.js

+        chrome.setVisible(!fullScreenMode);
+        $scope.$root.$broadcast('globalNav:update');
+        if (fullScreenMode) {
+          onRouteChange = $scope.$on('$routeChangeStart', () => chrome.setVisible(true));


I'm not following what we're doing here, we're calling chrome.setVisible above.

I'll add a comment to make it clearer. I need to add this so that if the user navigates to a different app, or clicks the back button, the user is bounced out of full screen mode. Otherwise, you can end up with something like this:

Gotcha. When the user navigates away, how is the onRouteChange/deregistration called?

Good call, I think I just need to add a call to onRouteChange inside the $routeChangeStart handler. Seems to do the trick.

kobelb · 2017-06-21T15:19:50Z

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -13,13 +58,12 @@
 dashboard-grid {
  display: block;
  margin: 0;
-  padding: 5px;
+  padding: 20px;


Did we mean to change this here? It seems to add quite a bit of padding even when not in full-screen mode.

In general I've increased the padding on a bunch of our inner panels (see monitoring...etc) to give the controls some space. This was actually one of the few places I missed in my big K6 PR.

It's more accessible for those of us with fat fingers! 😉

nreese

Looks good. I just found one instance where an exception is thrown.

nreese · 2017-06-21T17:59:25Z

src/core_plugins/kibana/public/dashboard/dashboard.js

+        $scope.fullScreenMode = fullScreenMode;
+        dashboardState.setFullScreenMode(fullScreenMode);
+        chrome.setVisible(!fullScreenMode);
+        $scope.$root.$broadcast('globalNav:update');


$root can be null when you first open a dashboard, then set to full screen, then use esc to close

stacey-gammon · 2017-06-21T18:45:40Z

Great call on the back button @kobelb, and nice find @nreese. Both issues should be fixed now!

…board page.

nreese

LGTM

kobelb

LGTM

stacey-gammon · 2017-06-21T20:48:14Z

jenkins, test this

alexfrancoeur · 2017-06-22T11:31:07Z

This looks great @stacey-gammon!

stacey-gammon · 2017-06-23T12:42:11Z

jenkins, test this

…screen

jimgoodwin · 2017-07-25T19:46:28Z

@stacey-gammon can we get a Release Note: paragraph at the end of the description describing the functionality please...

stacey-gammon · 2017-07-25T19:51:57Z

done @jimgoodwin!

full screen mode implementation

9b3fce8

stacey-gammon added Feature:Dashboard Dashboard related features :Sharing labels Jun 9, 2017

Merge branch 'master' of https://github.com/elastic/kibana into full-…

12de029

…screen

stacey-gammon added 2 commits June 13, 2017 14:25

Have Edit and Add buttons kick you out of full screen mode

48d5ff1

Instruct the grid to resize when switching between full screen and re…

07774f5

…gular modes

Merge with master

c8e845d

stacey-gammon added review v6.0.0-alpha3 labels Jun 14, 2017

snide reviewed Jun 20, 2017

View reviewed changes

stacey-gammon added 3 commits June 20, 2017 16:13

Use new styles and listen for ESC key

3ae2765

handle dark theme

43a0e60

Remove full screen option from edit mode

377b012

It’s awkward with no obvious save button to escape edit mode.

stacey-gammon requested review from nreese and kobelb June 20, 2017 20:27

kobelb reviewed Jun 21, 2017

View reviewed changes

nreese requested changes Jun 21, 2017

View reviewed changes

Code review comments

3121256

deregister the route handler if the user navigates away from the dash…

2152d5e

…board page.

nreese approved these changes Jun 21, 2017

View reviewed changes

kobelb approved these changes Jun 21, 2017

View reviewed changes

Use a new broadcast event rather than hijacking the window resize one

900ab95

Merge branch 'master' of https://github.com/elastic/kibana into full-…

a33f4b2

…screen

stacey-gammon merged commit 9981104 into elastic:master Jun 23, 2017

This was referenced Jun 29, 2017

Cycle through multiple dashboards #12562

Closed

Dashboard configuration: Show / hide panel titles #12563

Closed

epixa added v6.0.0-beta1 and removed v6.0.0-beta1 v6.0.0-alpha3 labels Jul 10, 2017

jimgoodwin added the release_note:roadmap label Jul 25, 2017

alexfrancoeur mentioned this pull request Sep 12, 2017

Improve Kibana 5 Dashboard appearance #9701

Closed

Bargs mentioned this pull request Sep 20, 2017

Inconsistent behavior with empty filter bar on dashboard #14076

Closed

stacey-gammon deleted the full-screen branch October 24, 2017 13:55

aphelionz mentioned this pull request May 7, 2018

Accessibility: Kibana 6.3 Meta Issue #18866

Closed

48 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

full screen mode implementation for dashboard #12265

full screen mode implementation for dashboard #12265

stacey-gammon commented Jun 9, 2017 •

edited

Loading

alexfrancoeur commented Jun 12, 2017

cjcenizal commented Jun 12, 2017

stacey-gammon commented Jun 13, 2017

stacey-gammon commented Jun 13, 2017

stacey-gammon commented Jun 14, 2017

snide Jun 20, 2017 •

edited

Loading

stacey-gammon commented Jun 20, 2017

kobelb left a comment

kobelb Jun 21, 2017

kobelb Jun 21, 2017

kobelb Jun 21, 2017

stacey-gammon Jun 21, 2017

kobelb Jun 21, 2017

kobelb Jun 21, 2017

stacey-gammon Jun 21, 2017

kobelb Jun 21, 2017

stacey-gammon Jun 21, 2017

kobelb Jun 21, 2017

snide Jun 21, 2017

kobelb Jun 21, 2017

nreese left a comment

nreese Jun 21, 2017

stacey-gammon commented Jun 21, 2017

nreese left a comment

kobelb left a comment

stacey-gammon commented Jun 21, 2017

alexfrancoeur commented Jun 22, 2017

stacey-gammon commented Jun 23, 2017

jimgoodwin commented Jul 25, 2017

stacey-gammon commented Jul 25, 2017

full screen mode implementation for dashboard #12265

full screen mode implementation for dashboard #12265

Conversation

stacey-gammon commented Jun 9, 2017 • edited Loading

alexfrancoeur commented Jun 12, 2017

cjcenizal commented Jun 12, 2017

stacey-gammon commented Jun 13, 2017

stacey-gammon commented Jun 13, 2017

stacey-gammon commented Jun 14, 2017

snide Jun 20, 2017 • edited Loading

Choose a reason for hiding this comment

stacey-gammon commented Jun 20, 2017

kobelb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nreese left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacey-gammon commented Jun 21, 2017

nreese left a comment

Choose a reason for hiding this comment

kobelb left a comment

Choose a reason for hiding this comment

stacey-gammon commented Jun 21, 2017

alexfrancoeur commented Jun 22, 2017

stacey-gammon commented Jun 23, 2017

jimgoodwin commented Jul 25, 2017

stacey-gammon commented Jul 25, 2017

stacey-gammon commented Jun 9, 2017 •

edited

Loading

snide Jun 20, 2017 •

edited

Loading