Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

WIP simplify styles naming, alter filter logic

pull/10616/head
Luke Morris 2018-02-20 11:50:17 -08:00
parent 053f3f624d
commit 332fb69aa3
7 changed files with 46 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/shared/annotations/helpers.js
View File

@ -17,5 +17,11 @@ export const getAnnotations = (graph, annotations = []) => {
const [xStart, xEnd] = graph.xAxisRange()
return annotations.filter(a => +a.endTime >= xStart || +a.startTime <= xEnd)
return annotations.filter(a => {
if (a.endTime === a.startTime) {
return xStart <= +a.startTime && +a.startTime <= xEnd
}
return xStart < +a.endTime || +a.startTime < xEnd
})
}

6
ui/src/shared/annotations/styles.js
View File

@ -177,12 +177,12 @@ export const annotation = (time, dygraph, isMouseOver, isDragging) => {
}
}
export const window = (annotation, dygraph) => {
export const window = (anno, dygraph) => {
// TODO: export and test this function
const [startX, endX] = dygraph.xAxisRange()
const containerLeftPadding = 16
const startTime = +annotation.startTime
const endTime = +annotation.endTime
const startTime = +anno.startTime
const endTime = +anno.endTime
let windowStartXCoord = dygraph.toDomXCoord(startTime)
let windowEndXCoord = dygraph.toDomXCoord(endTime)

25
ui/src/shared/components/Annotation.js
View File

@ -5,12 +5,7 @@ import AnnotationWindow from 'src/shared/components/AnnotationWindow'
import {ADDING, EDITING} from 'src/shared/annotations/helpers'
import * as schema from 'shared/schemas'
import {
flagStyle,
clickAreaStyle,
annotationStyle,
} from 'src/shared/annotations/styles'
import * as style from 'src/shared/annotations/styles'
class Annotation extends Component {
state = {
@ -96,19 +91,19 @@ class Annotation extends Component {
return (
<div
className="dygraph-annotation"
style={annotationStyle(annotation, dygraph, isMouseOver, isDragging)}
style={style.annotation(annotation, dygraph, isMouseOver, isDragging)}
data-time-ms={annotation.startTime}
data-time-local={humanTime}
>
<div
style={clickAreaStyle(isDragging, isEditing)}
style={style.clickArea(isDragging, isEditing)}
onMouseMove={this.handleDrag}
onMouseDown={this.handleStartDrag}
onMouseUp={this.handleStopDrag}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
<div style={flagStyle(isMouseOver, isDragging, false, false)} />
<div style={style.flag(isMouseOver, isDragging, false, false)} />
<AnnotationTooltip
isEditing={isEditing}
annotation={annotation}
@ -130,7 +125,7 @@ class Annotation extends Component {
return (
<div
className="dygraph-annotation"
style={annotationStyle(
style={style.annotation(
annotation.startTime,
dygraph,
isMouseOver,
@ -140,14 +135,14 @@ class Annotation extends Component {
data-time-local={humanTime}
>
<div
style={clickAreaStyle(isDragging, isEditing)}
style={style.clickArea(isDragging, isEditing)}
onMouseMove={this.handleDrag}
onMouseDown={this.handleStartDrag}
onMouseUp={this.handleStopDrag}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
<div style={flagStyle(isMouseOver, isDragging, true, false)} />
<div style={style.flag(isMouseOver, isDragging, true, false)} />
<AnnotationTooltip
isEditing={isEditing}
annotation={annotation}
@ -169,7 +164,7 @@ class Annotation extends Component {
return (
<div
className="dygraph-annotation"
style={annotationStyle(
style={style.annotation(
annotation.endTime,
dygraph,
isMouseOver,
@ -179,14 +174,14 @@ class Annotation extends Component {
data-time-local={humanTime}
>
<div
style={clickAreaStyle(isDragging, isEditing)}
style={style.clickArea(isDragging, isEditing)}
onMouseMove={this.handleDrag}
onMouseDown={this.handleStartDrag}
onMouseUp={this.handleStopDrag}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
<div style={flagStyle(isMouseOver, isDragging, true, true)} />
<div style={style.flag(isMouseOver, isDragging, true, true)} />
<AnnotationTooltip
isEditing={isEditing}
annotation={annotation}

20
ui/src/shared/components/AnnotationInput.js
View File

@ -1,12 +1,7 @@
import React, {Component, PropTypes} from 'react'
import onClickOutside from 'react-onclickoutside'
import {
tooltipInputContainer,
tooltipFormStyle,
tooltipInputButton,
tooltipInput,
} from 'src/shared/annotations/styles'
import * as style from 'src/shared/annotations/styles'
class AnnotationInput extends Component {
state = {
@ -62,13 +57,16 @@ class AnnotationInput extends Component {
const {value} = this.props
return (
<div className="annotation-tooltip-input" style={tooltipInputContainer}>
<div
className="annotation-tooltip-input"
style={style.tooltipInputContainer}
>
{isEditing
? <form onSubmit={this.handleFormSubmit} style={tooltipFormStyle}>
? <form onSubmit={this.handleFormSubmit} style={style.tooltipForm}>
<input
type="text"
className="form-control input-xs"
style={tooltipInput}
style={style.tooltipInput}
value={value}
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
@ -77,7 +75,7 @@ class AnnotationInput extends Component {
/>
<button
className="btn btn-square btn-xs btn-default"
style={tooltipInputButton}
style={style.tooltipInputButton}
type="button"
onClick={this.handleClickOutside}
>
@ -85,7 +83,7 @@ class AnnotationInput extends Component {
</button>
<button
className="btn btn-square btn-xs btn-success"
style={tooltipInputButton}
style={style.tooltipInputButton}
type="submit"
>
<span className="icon checkmark" />

13
ui/src/shared/components/AnnotationTooltip.js
View File

@ -5,15 +5,10 @@ import moment from 'moment'
import AnnotationInput from 'src/shared/components/AnnotationInput'
import * as schema from 'shared/schemas'
import * as actions from 'shared/actions/annotations'
import {
tooltipStyle,
tooltipItemsStyle,
tooltipTimestampStyle,
} from 'src/shared/annotations/styles'
import * as style from 'src/shared/annotations/styles'
const TimeStamp = ({time}) =>
<div style={tooltipTimestampStyle}>
<div style={style.tooltipTimestamp}>
{`${moment(+time).format('YYYY/DD/MM HH:mm:ss.SS')}`}
</div>
@ -54,12 +49,12 @@ class AnnotationTooltip extends Component {
<div
id={`tooltip-${annotation.id}`}
onMouseLeave={onMouseLeave}
style={tooltipStyle(annotationState)}
style={style.tooltip(annotationState)}
className="annotation-tooltip"
>
{isDragging
? <TimeStamp time={this.props.annotation.startTime} />
: <div style={tooltipItemsStyle}>
: <div style={style.tooltipItems}>
{isEditing &&
<button
className="annotation-tooltip--delete"

4
ui/src/shared/components/AnnotationWindow.js
View File

@ -1,12 +1,12 @@
import React, {PropTypes} from 'react'
import * as schema from 'shared/schemas'
import {annotationWindowStyle} from 'src/shared/annotations/styles'
import * as style from 'src/shared/annotations/styles'
const AnnotationWindow = ({annotation, dygraph}) =>
<div
className="dygraph-annotation-window"
style={annotationWindowStyle(annotation, dygraph)}
style={style.window(annotation, dygraph)}
/>
const {shape} = PropTypes

33
ui/src/shared/components/NewAnnotation.js
View File

@ -6,18 +6,7 @@ import uuid from 'node-uuid'
import OnClickOutside from 'shared/components/OnClickOutside'
import * as schema from 'shared/schemas'
import * as actions from 'shared/actions/annotations'
import {
circleFlagStyle,
leftFlagStyle,
rightFlagStyle,
newAnnotationContainer,
newAnnotationCrosshairStyle,
newAnnotationTooltipStyle,
newAnnotationHelperStyle,
newAnnotationTimestampStyle,
newAnnotationWindowStyle,
} from 'src/shared/annotations/styles'
import * as style from 'src/shared/annotations/styles'
class NewAnnotation extends Component {
state = {
@ -133,9 +122,9 @@ class NewAnnotation extends Component {
const isDragging = mouseAction === 'dragging'
const staticFlagStyle =
staticCrosshairLeft < crosshairLeft ? leftFlagStyle : rightFlagStyle
staticCrosshairLeft < crosshairLeft ? style.leftFlag : style.rightFlag
const draggingFlagStyle =
staticCrosshairLeft < crosshairLeft ? rightFlagStyle : leftFlagStyle
staticCrosshairLeft < crosshairLeft ? style.rightFlag : style.leftFlag
return (
<div
@ -146,34 +135,34 @@ class NewAnnotation extends Component {
onMouseLeave={this.handleMouseLeave}
onMouseUp={this.handleMouseUp}
onMouseDown={this.handleMouseDown}
style={newAnnotationContainer}
style={style.newContainer}
>
{isDragging &&
<div
className="new-annotation--crosshair__static"
style={newAnnotationCrosshairStyle(staticCrosshairLeft)}
style={style.newCrosshair(staticCrosshairLeft)}
>
<div style={staticFlagStyle} />
</div>}
{isDragging &&
<div
className="new-annotation--window"
style={newAnnotationWindowStyle(staticCrosshairLeft, crosshairLeft)}
style={style.newWindow(staticCrosshairLeft, crosshairLeft)}
/>}
<div
className="new-annotation--crosshair"
style={newAnnotationCrosshairStyle(crosshairLeft)}
style={style.newCrosshair(crosshairLeft)}
>
<div
className="new-annotation--flag"
style={isDragging ? draggingFlagStyle : circleFlagStyle}
style={isDragging ? draggingFlagStyle : style.circleFlag}
/>
<div
className="new-annotation--tooltip"
style={newAnnotationTooltipStyle(isMouseOver)}
style={style.newTooltip(isMouseOver)}
>
<span style={newAnnotationHelperStyle}>Click to Annotate</span>
<span style={newAnnotationTimestampStyle}>
<span style={style.newHelper}>Click to Annotate</span>
<span style={style.newTimestamp}>
{timestamp}
</span>
</div>