diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.html b/src/core_plugins/kibana/public/dashboard/dashboard.html index 040f9d63a9cdc..e79c141ec85d4 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard.html +++ b/src/core_plugins/kibana/public/dashboard/dashboard.html @@ -1,4 +1,14 @@ +
+
+
+ Exit Full Screen Mode +
+
@@ -71,6 +81,7 @@ @@ -84,7 +95,7 @@

- Click the Add button in the menu bar above to add a visualization to the dashboard.
If you haven't set up any visualizations yet, visit the Visualize app to create your first visualization. + Click the Add button in the menu bar above to add a visualization to the dashboard.
If you haven't set up any visualizations yet, visit the Visualize app to create your first visualization.

@@ -94,7 +105,7 @@

- Click the Edit button in the menu bar above to start working on your new dashboard. + Click the Edit button in the menu bar above to start working on your new dashboard.

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js index 2cc1ddaf23a7f..f76af430dbf42 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard.js +++ b/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'; const app = uiModules.get('app/dashboard', [ 'elasticsearch', @@ -117,6 +118,7 @@ app.directive('dashboardApp', function ($injector) { description: dashboardState.getDescription(), }; $scope.panels = dashboardState.getPanels(); + $scope.fullScreenMode = dashboardState.getFullScreenMode(); }; // Part of the exposed plugin API - do not remove without careful consideration. @@ -286,7 +288,50 @@ app.directive('dashboardApp', function ($injector) { }).catch(notify.error); }; + $scope.showFilterBar = () => filterBar.getFilters().length > 0 || !$scope.fullScreenMode; + let onRouteChange; + const setFullScreenMode = (fullScreenMode) => { + $scope.fullScreenMode = fullScreenMode; + dashboardState.setFullScreenMode(fullScreenMode); + chrome.setVisible(!fullScreenMode); + $scope.$broadcast('reLayout'); + + // Make sure that if we exit the dashboard app, the chrome becomes visible again + // (e.g. if the user clicks the back button). + if (fullScreenMode) { + onRouteChange = $scope.$on('$routeChangeStart', () => { + chrome.setVisible(true); + onRouteChange(); + }); + } else if (onRouteChange) { + onRouteChange(); + } + }; + + $scope.$watch('fullScreenMode', () => setFullScreenMode(dashboardState.getFullScreenMode())); + + $scope.exitFullScreenMode = () => setFullScreenMode(false); + + document.addEventListener('keydown', (e) => { + if (e.keyCode === ESC_KEY_CODE) { + setFullScreenMode(false); + } + }, false); + + $scope.showAddPanel = () => { + if ($scope.fullScreenMode) { + $scope.exitFullScreenMode(); + } + $scope.kbnTopNav.open('add'); + }; + $scope.enterEditMode = () => { + if ($scope.fullScreenMode) { + $scope.exitFullScreenMode(); + } + $scope.kbnTopNav.click('edit'); + }; const navActions = {}; + navActions[TopNavIds.FULL_SCREEN] = () => setFullScreenMode(true); navActions[TopNavIds.EXIT_EDIT_MODE] = () => onChangeViewMode(DashboardViewMode.VIEW); navActions[TopNavIds.ENTER_EDIT_MODE] = () => onChangeViewMode(DashboardViewMode.EDIT); navActions[TopNavIds.CLONE] = () => { diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_state.js b/src/core_plugins/kibana/public/dashboard/dashboard_state.js index af6d0ec583b8f..f3d713810dfeb 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard_state.js +++ b/src/core_plugins/kibana/public/dashboard/dashboard_state.js @@ -10,6 +10,7 @@ import { createPanelState, getPersistedStateId } from 'plugins/kibana/dashboard/ function getStateDefaults(dashboard, hideWriteControls) { return { + fullScreenMode: false, title: dashboard.title, description: dashboard.description, timeRestore: dashboard.timeRestore, @@ -83,6 +84,15 @@ export class DashboardState { this.createStateMonitor(); } + getFullScreenMode() { + return this.appState.fullScreenMode; + } + + setFullScreenMode(fullScreenMode) { + this.appState.fullScreenMode = fullScreenMode; + this.saveState(); + } + registerPanelIndexPatternMap(panelIndex, indexPattern) { this.panelIndexPatternMapping[panelIndex] = indexPattern; } diff --git a/src/core_plugins/kibana/public/dashboard/grid.js b/src/core_plugins/kibana/public/dashboard/grid.js index b216768015b0d..f03339519fbc0 100644 --- a/src/core_plugins/kibana/public/dashboard/grid.js +++ b/src/core_plugins/kibana/public/dashboard/grid.js @@ -202,6 +202,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) { $window.on('resize', safeLayout); $scope.$on('ready:vis', safeLayout); $scope.$on('globalNav:update', safeLayout); + $scope.$on('reLayout', safeLayout); } // tell gridster to add the panel, and create additional meatadata like $scope diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less index 098388f9b3e49..7d581b83ad89d 100644 --- a/src/core_plugins/kibana/public/dashboard/styles/index.less +++ b/src/core_plugins/kibana/public/dashboard/styles/index.less @@ -2,6 +2,51 @@ @import (reference) "~ui/styles/mixins"; @import "~ui/styles/local_search.less"; +.fullScreenModePlaceholder { + text-align: center; + width: 100%; + z-index: 50; + height: 0; + bottom: 0; + position: absolute; +} + +.exitFullScreenMode { + background-color: @globalColorLightestGray; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 200px; + height: 40px; + left: 0; + right: 0; + bottom: 0; + margin-left: auto; + margin-right: auto; + padding-bottom: 0; + position: fixed; + transform: translateY(22px); + z-index: 50; + display: block; + transition: transform .2s ease-in-out; + border: solid 1px @globalColorLightGray; + border-bottom: 0; + + .kuiIcon { + display: block; + } + + &:hover { + transform: translateY(0px); + } +} + +.exitFullScreenMode:hover { + bottom: 0px; + transition: all .5s ease; +} + .tab-dashboard { background-color: @dashboard-bg; } @@ -13,13 +58,12 @@ dashboard-grid { display: block; margin: 0; - padding: 5px; + padding: 20px; } .start-screen { margin: 20px auto; background-color: @dashboard-bg; - padding: 20px; max-width: 800px; background: tint(@globalColorBlue, 90%); padding: 40px; diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js b/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js index 81e8d3f7c5709..8b81645ab1890 100644 --- a/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js +++ b/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js @@ -12,6 +12,7 @@ export function getTopNavConfig(dashboardMode, actions) { switch (dashboardMode) { case DashboardViewMode.VIEW: return [ + getFullScreenConfig(actions[TopNavIds.FULL_SCREEN]), getShareConfig(), getCloneConfig(actions[TopNavIds.CLONE]), getEditConfig(actions[TopNavIds.ENTER_EDIT_MODE])]; @@ -27,6 +28,15 @@ export function getTopNavConfig(dashboardMode, actions) { } } +function getFullScreenConfig(action) { + return { + key: 'full screen', + description: 'Full Screen Mode', + testId: 'dashboardFullScreenMode', + run: action + }; +} + /** * @returns {kbnTopNavConfig} */ diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js b/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js index f629759f65463..e52b514f800f4 100644 --- a/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js +++ b/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js @@ -5,5 +5,6 @@ export const TopNavIds = { SAVE: 'save', EXIT_EDIT_MODE: 'exitEditMode', ENTER_EDIT_MODE: 'enterEditMode', - CLONE: 'clone' + CLONE: 'clone', + FULL_SCREEN: 'fullScreenMode', }; diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less index 208348ed70d5c..13ec5d41b963b 100644 --- a/src/ui/public/styles/dark-theme.less +++ b/src/ui/public/styles/dark-theme.less @@ -15,6 +15,9 @@ } } + .exitFullScreenMode { + background-color: @globalColorDarkestGray; + } // /src/ui/public/styles/bootstrap/forms.less .form-control {