diff --git a/ui/spec/shared/reducers/annotationsSpec.js b/ui/spec/shared/reducers/annotationsSpec.js new file mode 100644 index 0000000000..c9261c6134 --- /dev/null +++ b/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) + }) +}) diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js index 41b31710d2..75e178ca95 100644 --- a/ui/src/dashboards/components/Dashboard.js +++ b/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, diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index 40832ed4b4..9e979d2f47 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/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, } } diff --git a/ui/src/shared/actions/annotations.js b/ui/src/shared/actions/annotations.js new file mode 100644 index 0000000000..7fd17d4d65 --- /dev/null +++ b/ui/src/shared/actions/annotations.js @@ -0,0 +1,6 @@ +export const loadAnnotations = annotations => ({ + type: 'LOAD_ANNOTATIONS', + payload: { + annotations, + }, +}) diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js index bf1b996cb5..ac56f96cc2 100644 --- a/ui/src/shared/components/Dygraph.js +++ b/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 (
@@ -394,6 +379,7 @@ Dygraph.defaultProps = { } Dygraph.propTypes = { + annotations: arrayOf(shape({})), axes: shape({ y: shape({ bounds: array, diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js index 966596f96b..dc41ddf024 100644 --- a/ui/src/shared/components/Layout.js +++ b/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 = ( ) => @@ -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({ diff --git a/ui/src/shared/components/LineGraph.js b/ui/src/shared/components/LineGraph.js index f3f1a4a403..43d3c469c7 100644 --- a/ui/src/shared/components/LineGraph.js +++ b/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, diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index 05b7917de3..b0d0347d31 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/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, }), diff --git a/ui/src/shared/reducers/annotations.js b/ui/src/shared/reducers/annotations.js new file mode 100644 index 0000000000..be8d1ada6f --- /dev/null +++ b/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 diff --git a/ui/src/shared/reducers/index.js b/ui/src/shared/reducers/index.js index 93b4126a75..40ad9a5690 100644 --- a/ui/src/shared/reducers/index.js +++ b/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, }