Merge branch 'feature/annotationz-pre-pl-with-master' into feature/persistent-legend-with-master

ui/src/shared/annotations/styles.js

@@ -161,6 +161,7 @@ export const annotationStyle = (
   isDragging,
   staticLegendHeight
 ) => {
+export const annotationStyle = ({time}, dygraph, isMouseOver, isDragging) => {
   // TODO: export and test this function
   const [startX, endX] = dygraph.xAxisRange()
   let visibility = 'visible'
@@ -176,7 +177,7 @@ export const annotationStyle = (
   const height = staticLegendHeight
     ? `calc(100% - ${staticLegendHeight + 36}px)`
     : 'calc(100% - 36px)'
-
+  
   return {
     left,
     position: 'absolute',
@@ -239,7 +240,7 @@ export const annotationWindowStyle = (
     position: 'absolute',
     top: '8px',
     background: `linear-gradient(to bottom, ${gradientStartColor} 0%,${gradientEndColor} 100%)`,
-    height,
+    height: 'calc(100% - 36px)',
     borderTop: `2px dotted rgba(${annotationColor},0.35)`,
     width,
     zIndex: zIndexWindow,

ui/src/shared/components/AnnotationTooltip.js

@@ -57,7 +57,7 @@ class AnnotationTooltip extends Component {
                   className="btn btn-sm btn-danger btn-square"
                   onClick={this.props.onDelete}
                 >
-                  <span className="icon trash" />
+                  <span className="icon trash" />r
                 </button>}
               {isEditing
                 ? <AnnotationInput

ui/src/shared/components/Dygraph.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-magic-numbers */
 import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
 import shallowCompare from 'react-addons-shallow-compare'
 import _ from 'lodash'
 import NanoDate from 'nano-date'
@@ -24,8 +25,9 @@ import {
   highlightSeriesOpts,
 } from 'src/shared/graphs/helpers'
 const {LINEAR, LOG, BASE_10, BASE_2} = DISPLAY_OPTIONS
+import {ADDING, EDITING} from 'src/shared/annotations/helpers'
 
-export default class Dygraph extends Component {
+class Dygraph extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -302,7 +304,8 @@ export default class Dygraph extends Component {
 
   render() {
     const {isHidden, staticLegendHeight} = this.state
-    const {staticLegend} = this.props
+    const {staticLegend,mode} = this.props
+    const hideLegend = mode === EDITING || mode === ADDING ? true : isHidden
 
     let dygraphStyle = {...this.props.containerStyle, zIndex: '2'}
     if (staticLegend) {
@@ -407,4 +410,11 @@ Dygraph.propTypes = {
   setResolution: func,
   dygraphRef: func,
   onZoom: func,
+  mode: string,
 }
+
+const mapStateToProps = ({annotations: {mode}}) => ({
+  mode,
+})
+
+export default connect(mapStateToProps, null)(Dygraph)

ui/src/shared/components/NewAnnotation.js

@@ -113,6 +113,7 @@ class NewAnnotation extends Component {
       tempAnnotation: {time},
       staticLegendHeight,
     } = this.props
+
     const {isMouseOver, mouseAction} = this.state
 
     const timestamp = `${new Date(+time)}`
@@ -171,7 +172,7 @@ class NewAnnotation extends Component {
   }
 }
 
-const {bool, func, number, shape} = PropTypes
+const {bool, func, number, shape} = P
 
 NewAnnotation.propTypes = {
   dygraph: shape({}).isRequired,

ui/src/style/unsorted.scss

@@ -556,3 +556,54 @@ div.dropdown.dropdown-stretch > button.dropdown-toggle {
 .new-annotation.hover .new-annotation--crosshair {
   opacity: 1;
 }
+
+.annotation-tooltip:before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: calc(100% + 16px);
+  height: calc(100% + 28px);
+  top: -14px;
+  left: -8px;
+  z-index: -1;
+}
+.annotation-tooltip--delete {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 50%;
+  color: $g20-white;
+  background-color: $c-curacao;
+  transform: translate(50%,-50%);
+  transition:
+    background-color 0.25s ease;
+  z-index: 3;
+  outline: none;
+  border: none;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $c-dreamsicle;
+  }
+
+  > span.icon {
+    position: absolute;
+    top: calc(50% - 1px);
+    left: calc(50% - 1px);
+    font-size: 12px;
+    transform: translate(-50%,-50%);
+  }
+}
+.annotation-tooltip-input .input-cte {
+  height: 22px;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 0 7px;
+
+  > span.icon {
+    right: 9px;
+  }
+}