Introduce annotation reducer

ui/spec/shared/reducers/annotationsSpec.js

@@ -0,0 +1,13 @@
+import reducer from 'shared/reducers/annotations'
+
+import {loadAnnotations} from 'shared/actions/annotations'
+
+describe('Shared.Reducers.annotations', () => {
+  it('can load the annotations', () => {
+    let state = []
+    const expected = [{time: '0', duration: ''}]
+    const actual = reducer(state, loadAnnotations(expected))
+
+    expect(actual).to.deep.equal(expected)
+  })
+})

ui/src/dashboards/components/Dashboard.js

@@ -12,6 +12,7 @@ const Dashboard = ({
   dashboard,
   onAddCell,
   timeRange,
+  annotations,
   autoRefresh,
   manualRefresh,
   onDeleteCell,
@@ -57,6 +58,7 @@ const Dashboard = ({
               sources={sources}
               isEditable={true}
               timeRange={timeRange}
+              annotations={annotations}
               autoRefresh={autoRefresh}
               manualRefresh={manualRefresh}
               synchronizer={synchronizer}
@@ -99,6 +101,7 @@ Dashboard.propTypes = {
       })
     ).isRequired,
   }),
+  annotations: arrayOf(shape()),
   templatesIncludingDashTime: arrayOf(shape()).isRequired,
   inPresentationMode: bool,
   onAddCell: func,

ui/src/dashboards/containers/DashboardPage.js

@@ -239,6 +239,7 @@ class DashboardPage extends Component {
       showTemplateControlBar,
       dashboard,
       dashboards,
+      annotations,
       autoRefresh,
       manualRefresh,
       onManualRefresh,
@@ -375,6 +376,7 @@ class DashboardPage extends Component {
               sources={sources}
               dashboard={dashboard}
               timeRange={timeRange}
+              annotations={annotations}
               autoRefresh={autoRefresh}
               manualRefresh={manualRefresh}
               onZoom={this.handleZoomedTimeRange}
@@ -398,6 +400,13 @@ class DashboardPage extends Component {
 const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 DashboardPage.propTypes = {
+  annotations: arrayOf(
+    shape({
+      time: string,
+      duration: string,
+      text: string,
+    })
+  ).isRequired,
   source: shape({
     links: shape({
       proxy: string,
@@ -479,7 +488,9 @@ const mapStateToProps = (state, {params: {dashboardID}}) => {
     sources,
     dashTimeV1,
     auth: {me, isUsingAuth},
+    annotations,
   } = state
+
   const meRole = _.get(me, 'role', null)
 
   const timeRange =
@@ -492,16 +503,17 @@ const mapStateToProps = (state, {params: {dashboardID}}) => {
   )
 
   return {
-    dashboards,
-    autoRefresh,
-    dashboard,
-    timeRange,
-    showTemplateControlBar,
-    inPresentationMode,
-    cellQueryStatus,
     sources,
     meRole,
+    dashboard,
+    timeRange,
+    dashboards,
+    annotations,
+    autoRefresh,
     isUsingAuth,
+    cellQueryStatus,
+    inPresentationMode,
+    showTemplateControlBar,
   }
 }
 

ui/src/shared/actions/annotations.js

@@ -0,0 +1,6 @@
+export const loadAnnotations = annotations => ({
+  type: 'LOAD_ANNOTATIONS',
+  payload: {
+    annotations,
+  },
+})

ui/src/shared/components/Dygraph.js

@@ -13,6 +13,7 @@ import {DISPLAY_OPTIONS} from 'src/dashboards/constants'
 import {buildDefaultYLabel} from 'shared/presenters'
 import {numberValueFormatter} from 'src/utils/formatting'
 import {getAnnotations} from 'src/shared/annotations/helpers'
+
 import {
   OPTIONS,
   LINE_COLORS,
@@ -24,23 +25,6 @@ import {
 } from 'src/shared/graphs/helpers'
 const {LINEAR, LOG, BASE_10, BASE_2} = DISPLAY_OPTIONS
 
-const annotations = [
-  {
-    group: '',
-    name: 'anno1',
-    time: '1515716169000',
-    duration: '33600000', // 1 hour
-    text: 'you have no swoggels',
-  },
-  {
-    group: '',
-    name: 'anno2',
-    time: '1515772377000',
-    duration: '',
-    text: 'another annotation',
-  },
-]
-
 export default class Dygraph extends Component {
   constructor(props) {
     super(props)
@@ -340,6 +324,7 @@ export default class Dygraph extends Component {
 
   render() {
     const {isHidden} = this.state
+    const {annotations} = this.props
 
     return (
       <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
@@ -394,6 +379,7 @@ Dygraph.defaultProps = {
 }
 
 Dygraph.propTypes = {
+  annotations: arrayOf(shape({})),
   axes: shape({
     y: shape({
       bounds: array,

ui/src/shared/components/Layout.js

@@ -56,6 +56,7 @@ const Layout = (
     onDeleteCell,
     synchronizer,
     resizeCoords,
+    annotations,
     onCancelEditCell,
     onSummonOverlayTechnologies,
     grabDataForDownload,
@@ -65,9 +66,9 @@ const Layout = (
 ) =>
   <LayoutCell
     cell={cell}
+    celldata={celldata}
     isEditable={isEditable}
     onEditCell={onEditCell}
-    celldata={celldata}
     onDeleteCell={onDeleteCell}
     onCancelEditCell={onCancelEditCell}
     onSummonOverlayTechnologies={onSummonOverlayTechnologies}
@@ -84,6 +85,7 @@ const Layout = (
           timeRange={timeRange}
           templates={templates}
           autoRefresh={autoRefresh}
+          annotations={annotations}
           manualRefresh={manualRefresh}
           synchronizer={synchronizer}
           grabDataForDownload={grabDataForDownload}
@@ -104,6 +106,7 @@ Layout.contextTypes = {
 }
 
 const propTypes = {
+  annotations: arrayOf(shape({})),
   autoRefresh: number.isRequired,
   manualRefresh: number,
   timeRange: shape({

ui/src/shared/components/LayoutRenderer.js

@@ -79,6 +79,7 @@ class LayoutRenderer extends Component {
       autoRefresh,
       manualRefresh,
       onDeleteCell,
+      annotations,
       synchronizer,
       onCancelEditCell,
       onSummonOverlayTechnologies,
@@ -129,11 +130,12 @@ class LayoutRenderer extends Component {
                     timeRange={timeRange}
                     isEditable={isEditable}
                     onEditCell={onEditCell}
-                    resizeCoords={resizeCoords}
+                    annotations={annotations}
                     autoRefresh={autoRefresh}
-                    manualRefresh={manualRefresh}
+                    resizeCoords={resizeCoords}
                     onDeleteCell={onDeleteCell}
                     synchronizer={synchronizer}
+                    manualRefresh={manualRefresh}
                     onCancelEditCell={onCancelEditCell}
                     onSummonOverlayTechnologies={onSummonOverlayTechnologies}
                   />
@@ -150,6 +152,7 @@ class LayoutRenderer extends Component {
 const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 LayoutRenderer.propTypes = {
+  annotations: arrayOf(shape({})),
   autoRefresh: number.isRequired,
   manualRefresh: number,
   timeRange: shape({

ui/src/shared/components/LineGraph.js

@@ -46,6 +46,7 @@ class LineGraph extends Component {
       cellHeight,
       ruleValues,
       isBarGraph,
+      annotations,
       resizeCoords,
       synchronizer,
       isRefreshing,
@@ -103,6 +104,7 @@ class LineGraph extends Component {
           isBarGraph={isBarGraph}
           timeSeries={timeSeries}
           ruleValues={ruleValues}
+          annotations={annotations}
           synchronizer={synchronizer}
           resizeCoords={resizeCoords}
           overrideLineColors={lineColors}
@@ -141,6 +143,7 @@ LineGraph.defaultProps = {
 }
 
 LineGraph.propTypes = {
+  annotations: arrayOf(shape({})),
   axes: shape({
     y: shape({
       bounds: array,

ui/src/shared/components/RefreshingGraph.js

@@ -21,6 +21,7 @@ const RefreshingGraph = ({
   timeRange,
   cellHeight,
   autoRefresh,
+  annotations,
   resizerTopHeight,
   manualRefresh, // when changed, re-mounts the component
   synchronizer,
@@ -81,6 +82,7 @@ const RefreshingGraph = ({
       key={manualRefresh}
       templates={templates}
       timeRange={timeRange}
+      annotations={annotations}
       autoRefresh={autoRefresh}
       isBarGraph={type === 'bar'}
       synchronizer={synchronizer}
@@ -96,6 +98,7 @@ const RefreshingGraph = ({
 const {arrayOf, func, number, shape, string} = PropTypes
 
 RefreshingGraph.propTypes = {
+  annotations: arrayOf(shape({})),
   timeRange: shape({
     lower: string.isRequired,
   }),

ui/src/shared/reducers/annotations.js

@@ -0,0 +1,28 @@
+const initialState = [
+  {
+    group: '',
+    name: 'anno1',
+    time: '1515716169000',
+    duration: '33600000', // 1 hour
+    text: 'you have no swoggels',
+  },
+  {
+    group: '',
+    name: 'anno2',
+    time: '1515772377000',
+    duration: '',
+    text: 'another annotation',
+  },
+]
+
+const annotationsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'LOAD_ANNOTATIONS': {
+      return action.payload.annotations
+    }
+  }
+
+  return state
+}
+
+export default annotationsReducer

ui/src/shared/reducers/index.js

@@ -5,14 +5,16 @@ import errors from './errors'
 import links from './links'
 import {notifications, dismissedNotifications} from './notifications'
 import sources from './sources'
+import annotations from './annotations'
 
 export default {
   app,
   auth,
+  links,
   config,
   errors,
-  links,
+  sources,
+  annotations,
   notifications,
   dismissedNotifications,
-  sources,
 }