Add presentation mode notification to dashboards.

ui/src/dashboards/containers/DashboardPage.js

@@ -10,7 +10,7 @@ import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 
 import {getDashboards} from '../apis';
 import {getSource} from 'shared/apis';
-import {delayEnablePresentationMode} from 'shared/actions/ui';
+import {presentationButtonDispatcher} from 'shared/dispatchers'
 
 const {
   shape,
@@ -133,9 +133,7 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  handleClickPresentationButton: () => {
-    dispatch(delayEnablePresentationMode())
-  },
+  handleClickPresentationButton: presentationButtonDispatcher(dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);

ui/src/hosts/containers/HostPage.js

@@ -9,7 +9,7 @@ import DashboardHeader from 'src/dashboards/components/DashboardHeader';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 import {getMappings, getAppsForHosts, getMeasurementsForHost, getAllHosts} from 'src/hosts/apis';
 import {fetchLayouts} from 'shared/apis';
-import {delayEnablePresentationMode} from 'shared/actions/ui';
+import {presentationButtonDispatcher} from 'shared/dispatchers'
 
 const {
   shape,
@@ -186,9 +186,7 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  handleClickPresentationButton: () => {
-    dispatch(delayEnablePresentationMode())
-  },
+  handleClickPresentationButton: presentationButtonDispatcher(dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(HostPage)

ui/src/index.js

@@ -18,7 +18,7 @@ import NotFound from 'src/shared/components/NotFound';
 import configureStore from 'src/store/configureStore';
 import {getMe, getSources} from 'shared/apis';
 import {receiveMe} from 'shared/actions/me';
-import {delayDisablePresentationMode} from 'shared/actions/ui';
+import {disablePresentationMode} from 'shared/actions/ui';
 import {loadLocalStorage} from './localStorage';
 
 import 'src/style/chronograf.scss';

ui/src/kubernetes/components/KubernetesDashboard.js

@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react';
+import classnames from 'classnames'
+
 import LayoutRenderer from 'shared/components/LayoutRenderer';
 import DashboardHeader from 'src/dashboards/components/DashboardHeader';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
-import classnames from 'classnames'
 
 const {
   shape,

ui/src/kubernetes/containers/KubernetesPage.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux'
 
 import {fetchLayouts} from 'shared/apis';
 import KubernetesDashboard from 'src/kubernetes/components/KubernetesDashboard';
-import {delayEnablePresentationMode} from 'shared/actions/ui';
+import {presentationButtonDispatcher} from 'shared/dispatchers'
 
 const {
   shape,
@@ -56,9 +56,7 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  handleClickPresentationButton: () => {
-    dispatch(delayEnablePresentationMode())
-  },
+  handleClickPresentationButton: presentationButtonDispatcher(dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(KubernetesPage);

ui/src/shared/actions/notifications.js

@@ -17,6 +17,12 @@ export function dismissNotification(type) {
   };
 }
 
+export function delayDismissNotification(type, wait) {
+  return (dispatch) => {
+    setTimeout(() => dispatch(dismissNotification(type)), wait)
+  }
+}
+
 export function dismissAllNotifications() {
   return {
     type: 'ALL_NOTIFICATIONS_DISMISSED',

ui/src/shared/actions/ui.js

@@ -1,4 +1,4 @@
-import {PRESENTATION_MODE_DELAY} from '../constants'
+import {PRESENTATION_MODE_ANIMATION_DELAY} from '../constants'
 
 export function enablePresentationMode() {
   return {
@@ -14,6 +14,6 @@ export function disablePresentationMode() {
 
 export function delayEnablePresentationMode() {
   return (dispatch) => {
-    setTimeout(() => dispatch(enablePresentationMode()), PRESENTATION_MODE_DELAY)
+    setTimeout(() => dispatch(enablePresentationMode()), PRESENTATION_MODE_ANIMATION_DELAY)
   }
 }

ui/src/shared/constants/index.js

@@ -468,4 +468,5 @@ export const STROKE_WIDTH = {
   light: 1.5,
 };
 
-export const PRESENTATION_MODE_DELAY = 250 // In milliseconds.
+export const PRESENTATION_MODE_ANIMATION_DELAY = 250 // In milliseconds.
+export const PRESENTATION_MODE_NOTIFICATION_DELAY = 2000 // In milliseconds.

ui/src/shared/dispatchers/index.js

@@ -0,0 +1,9 @@
+import {delayEnablePresentationMode} from 'shared/actions/ui'
+import {publishNotification, delayDismissNotification} from 'shared/actions/notifications'
+import {PRESENTATION_MODE_NOTIFICATION_DELAY} from 'shared/constants'
+
+export const presentationButtonDispatcher = (dispatch) => () => {
+  dispatch(delayEnablePresentationMode())
+  dispatch(publishNotification('success', 'Press ESC to disable presentation mode.'))
+  dispatch(delayDismissNotification('success', PRESENTATION_MODE_NOTIFICATION_DELAY))
+}