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

Merge branch 'feature/1482-custom-time-range' of github.com:influxdata/chronograf into feature/1482-custom-time-range

pull/10616/head
Hunter Trujillo 2017-06-30 17:34:15 -06:00
parent 51b9b48aab efebeaac18
commit b99ad9122e
5 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/shared/components/CustomTimeRange.js
View File

@ -38,7 +38,7 @@ class CustomTimeRange extends Component {
render() { render() {
return ( return (
<div> <div className="custom-time--container">
<div className="custom-time--dates"> <div className="custom-time--dates">
<div className="custom-time--lower" ref={r => (this.lower = r)} /> <div className="custom-time--lower" ref={r => (this.lower = r)} />
<div className="custom-time--upper" ref={r => (this.upper = r)} /> <div className="custom-time--upper" ref={r => (this.upper = r)} />

12
ui/src/shared/components/CustomTimeRangeDropdown.js
View File

@ -49,13 +49,11 @@ class CustomTimeRangeDropdown extends Component {
)} — ${moment(upper).format('MMM Do HH:mm')}`}</span> )} — ${moment(upper).format('MMM Do HH:mm')}`}</span>
<span className="caret" /> <span className="caret" />
</button> </button>
<div className="custom-time--container"> <CustomTimeRange
<CustomTimeRange onApplyTimeRange={onApplyTimeRange}
onApplyTimeRange={onApplyTimeRange} timeRange={timeRange}
timeRange={timeRange} onClose={this.handleCloseDropdown}
onClose={this.handleCloseDropdown} />
/>
</div>
</div> </div>
) )
} }

17
ui/src/shared/components/CustomTimeRangeOverlay.js
View File

@ -2,7 +2,6 @@ import React, {PropTypes, Component} from 'react'
import OnClickOutside from 'react-onclickoutside' import OnClickOutside from 'react-onclickoutside'
import CustomTimeRange from 'shared/components/CustomTimeRange' import CustomTimeRange from 'shared/components/CustomTimeRange'
import OverlayTechnologies from 'shared/components/OverlayTechnologies'
class CustomTimeRangeOverlay extends Component { class CustomTimeRangeOverlay extends Component {
constructor(props) { constructor(props) {
@ -17,15 +16,13 @@ class CustomTimeRangeOverlay extends Component {
const {onClose, timeRange, onApplyTimeRange} = this.props const {onClose, timeRange, onApplyTimeRange} = this.props
return ( return (
<OverlayTechnologies> <div className="custom-time--overlay">
<div className="custom-time--overlay-container"> <CustomTimeRange
<CustomTimeRange onApplyTimeRange={onApplyTimeRange}
onApplyTimeRange={onApplyTimeRange} timeRange={timeRange}
timeRange={timeRange} onClose={onClose}
onClose={onClose} />
/> </div>
</div>
</OverlayTechnologies>
) )
} }
} }

10
ui/src/shared/components/TimeRangeDropdown.js
View File

@ -76,7 +76,7 @@ class TimeRangeDropdown extends Component {
const {isOpen, customTimeRange, isCustomTimeRangeOpen} = this.state const {isOpen, customTimeRange, isCustomTimeRangeOpen} = this.state
return ( return (
<div> <div className="time-range-dropdown">
<div className={classnames('dropdown dropdown-160', {open: isOpen})}> <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
<div <div
className="btn btn-sm btn-default dropdown-toggle" className="btn btn-sm btn-default dropdown-toggle"
@ -95,7 +95,13 @@ class TimeRangeDropdown extends Component {
maxHeight={DROPDOWN_MENU_MAX_HEIGHT} maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
> >
<li className="dropdown-header">Time Range</li> <li className="dropdown-header">Time Range</li>
<li className="custom-timerange"> <li
className={
isCustomTimeRangeOpen
? 'active dropdown-item custom-timerange'
: 'dropdown-item custom-timerange'
}
>
<a href="#" onClick={this.showCustomTimeRange}> <a href="#" onClick={this.showCustomTimeRange}>
Custom Time Range Custom Time Range
</a> </a>

12
ui/src/style/components/custom-time-range.scss
View File

@ -242,3 +242,15 @@ $rd-cell-size: 30px;
background-color: $g6-smoke; background-color: $g6-smoke;
} }
} }
/* Custom positioning for dashboard use */
.time-range-dropdown {
position: relative;
}
.custom-time--overlay {
position: absolute;
top: 0;
right: calc(100% + 4px);
z-index: 2;
.custom-time--container {display: flex;}
}