Persist APoint updates to server

ui/src/shared/actions/annotations.js

@@ -72,3 +72,8 @@ export const deleteAnnotationAsync = annotation => async dispatch => {
   await api.deleteAnnotation(annotation)
   dispatch(deleteAnnotation(annotation))
 }
+
+export const updateAnnotationAsync = annotation => async dispatch => {
+  await api.updateAnnotation(annotation)
+  dispatch(updateAnnotation(annotation))
+}

ui/src/shared/apis/annotation.js

@@ -13,8 +13,8 @@ const annoToRFC = anno => ({
   endTime: msToRFC(anno.endTime),
 })
 
-export const createAnnotation = async (url, newAnno) => {
-  const data = annoToRFC(newAnno)
+export const createAnnotation = async (url, annotation) => {
+  const data = annoToRFC(annotation)
   const response = await AJAX({method: 'POST', url, data})
   return annoToMillisecond(response.data)
 }
@@ -32,3 +32,9 @@ export const deleteAnnotation = async annotation => {
   const url = annotation.links.self
   await AJAX({method: 'DELETE', url})
 }
+
+export const updateAnnotation = async annotation => {
+  const url = annotation.links.self
+  const data = annoToRFC(annotation)
+  await AJAX({method: 'PATCH', url, data})
+}

ui/src/shared/components/Annotation.js

@@ -15,7 +15,6 @@ class Annotation extends Component {
           ? <AnnotationPoint
               annotation={annotation}
               mode={mode}
-              onUpdateAnnotation={onUpdateAnnotation}
               dygraph={dygraph}
             />
           : <AnnotationSpan

ui/src/shared/components/AnnotationPoint.js

@@ -1,8 +1,10 @@
 import React, {PropTypes} from 'react'
+import {connect} from 'react-redux'
 
 import {EDITING} from 'shared/annotations/helpers'
 import * as schema from 'shared/schemas'
 import * as style from 'shared/annotations/styles'
+import * as actions from 'shared/actions/annotations'
 import AnnotationTooltip from 'shared/components/AnnotationTooltip'
 
 class AnnotationPoint extends React.Component {
@@ -29,6 +31,8 @@ class AnnotationPoint extends React.Component {
   }
 
   handleDragStop = () => {
+    const {annotation, updateAnnotationAsync} = this.props
+    updateAnnotationAsync(annotation)
     this.setState({isDragging: false})
   }
 
@@ -38,7 +42,7 @@ class AnnotationPoint extends React.Component {
     }
 
     const {pageX} = e
-    const {annotation, dygraph, onUpdateAnnotation} = this.props
+    const {annotation, dygraph, updateAnnotation} = this.props
 
     if (pageX === 0) {
       return
@@ -72,7 +76,7 @@ class AnnotationPoint extends React.Component {
       newTime = startX
     }
 
-    onUpdateAnnotation({
+    updateAnnotation({
       ...annotation,
       startTime: `${newTime}`,
       endTime: `${newTime}`,
@@ -126,7 +130,13 @@ AnnotationPoint.propTypes = {
   annotation: schema.annotation.isRequired,
   mode: PropTypes.string.isRequired,
   dygraph: PropTypes.shape({}).isRequired,
-  onUpdateAnnotation: PropTypes.func.isRequired,
+  updateAnnotation: PropTypes.func.isRequired,
+  updateAnnotationAsync: PropTypes.func.isRequired,
 }
 
-export default AnnotationPoint
+const mdtp = {
+  updateAnnotationAsync: actions.updateAnnotationAsync,
+  updateAnnotation: actions.updateAnnotation,
+}
+
+export default connect(null, mdtp)(AnnotationPoint)