From 45a046cb1956705f05d7daed5e88d5676a42a6f5 Mon Sep 17 00:00:00 2001 From: Jade McGough Date: Mon, 31 Oct 2016 16:26:28 -0700 Subject: [PATCH 1/5] move timerange dropdown stuff to shared folder --- ui/src/chronograf/containers/Header.js | 4 ++-- ui/src/{chronograf => shared}/components/TimeRangeDropdown.js | 0 ui/src/{chronograf => shared}/data/timeRanges.hson | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename ui/src/{chronograf => shared}/components/TimeRangeDropdown.js (100%) rename ui/src/{chronograf => shared}/data/timeRanges.hson (100%) diff --git a/ui/src/chronograf/containers/Header.js b/ui/src/chronograf/containers/Header.js index 14be700e2e..ad4048ebc1 100644 --- a/ui/src/chronograf/containers/Header.js +++ b/ui/src/chronograf/containers/Header.js @@ -1,8 +1,8 @@ import React, {PropTypes} from 'react'; import moment from 'moment'; import {withRouter} from 'react-router'; -import TimeRangeDropdown from '../components/TimeRangeDropdown'; -import timeRanges from 'hson!../data/timeRanges.hson'; +import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown'; +import timeRanges from 'hson!../../shared/data/timeRanges.hson'; import Dropdown from 'shared/components/Dropdown'; const Header = React.createClass({ diff --git a/ui/src/chronograf/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js similarity index 100% rename from ui/src/chronograf/components/TimeRangeDropdown.js rename to ui/src/shared/components/TimeRangeDropdown.js diff --git a/ui/src/chronograf/data/timeRanges.hson b/ui/src/shared/data/timeRanges.hson similarity index 100% rename from ui/src/chronograf/data/timeRanges.hson rename to ui/src/shared/data/timeRanges.hson From 16177ccafddb0c14b17748b611bb8b4083f4b73e Mon Sep 17 00:00:00 2001 From: Jade McGough Date: Mon, 31 Oct 2016 16:55:36 -0700 Subject: [PATCH 2/5] add time dropdown to host page --- ui/src/hosts/containers/HostPage.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index 2b4dd753ca..d9d1e11360 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -1,6 +1,6 @@ import React, {PropTypes} from 'react'; -// TODO: move this to a higher level package than chronograf? import LayoutRenderer from '../components/LayoutRenderer'; +import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown'; import {fetchLayouts} from '../apis'; import _ from 'lodash'; @@ -64,6 +64,9 @@ export const HostPage = React.createClass({

Uptime: 2d 4h 33m

+
+ +
From 113847f90312b423b512e5e13cb525b18c25152c Mon Sep 17 00:00:00 2001 From: Jade McGough Date: Mon, 31 Oct 2016 22:12:25 -0700 Subject: [PATCH 3/5] wire up TimeRangeDropdown in HostPage --- ui/src/hosts/containers/HostPage.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index d9d1e11360..0e49e47cd9 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -1,6 +1,7 @@ import React, {PropTypes} from 'react'; import LayoutRenderer from '../components/LayoutRenderer'; import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown'; +import timeRanges from 'hson!../../shared/data/timeRanges.hson'; import {fetchLayouts} from '../apis'; import _ from 'lodash'; @@ -17,7 +18,12 @@ export const HostPage = React.createClass({ }, getInitialState() { - return {layouts: []}; + const pastHourIndex = 2; + + return { + layouts: [], + timeRange: timeRanges[pastHourIndex], + }; }, componentDidMount() { @@ -26,10 +32,16 @@ export const HostPage = React.createClass({ }); }, + handleChooseTimeRange({lower}) { + const timeRange = timeRanges.find((range) => range.queryValue === lower); + this.setState({timeRange}); + }, + render() { const autoRefreshMs = 15000; const source = this.props.source.links.proxy; const hostID = this.props.params.hostID; + const {timeRange} = this.state; const layout = _.head(this.state.layouts); @@ -65,7 +77,7 @@ export const HostPage = React.createClass({

Uptime: 2d 4h 33m

- +
From 09062616296130728404e0c8588f00d3814a8164 Mon Sep 17 00:00:00 2001 From: Jade McGough Date: Mon, 31 Oct 2016 22:38:18 -0700 Subject: [PATCH 4/5] pass timerange into layoutrenderer --- ui/src/hosts/components/LayoutRenderer.js | 9 ++++++--- ui/src/hosts/containers/HostPage.js | 3 ++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/ui/src/hosts/components/LayoutRenderer.js b/ui/src/hosts/components/LayoutRenderer.js index fc0ac1afe1..658117ec57 100644 --- a/ui/src/hosts/components/LayoutRenderer.js +++ b/ui/src/hosts/components/LayoutRenderer.js @@ -8,6 +8,7 @@ const RefreshingLineGraph = AutoRefresh(LineGraph); export const LayoutRenderer = React.createClass({ propTypes: { + timeRange: PropTypes.string.isRequired, cells: PropTypes.arrayOf( PropTypes.shape({ queries: PropTypes.arrayOf( @@ -37,10 +38,12 @@ export const LayoutRenderer = React.createClass({ }, generateGraphs() { + const {timeRange, host, autoRefreshMs, source} = this.props; + return this.props.cells.map((cell) => { const qs = cell.queries.map((q) => { - _.merge(q, {host: this.props.source}); - q.text += ` where host = '${this.props.host}' and time > now() - 15m`; + _.merge(q, {host: source}); + q.text += ` where host = '${host}' and time > ${timeRange}`; return q; }); return ( @@ -49,7 +52,7 @@ export const LayoutRenderer = React.createClass({
diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index 0e49e47cd9..8dc0d3ba8b 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -56,6 +56,7 @@ export const HostPage = React.createClass({ layoutComponent = ( Uptime: 2d 4h 33m

- +
From 46b9567fa9b5ed72b479322d9a10f073093b9b7b Mon Sep 17 00:00:00 2001 From: Jade McGough Date: Mon, 31 Oct 2016 22:47:52 -0700 Subject: [PATCH 5/5] default to 15 minutes for queries --- ui/src/hosts/containers/HostPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index 8dc0d3ba8b..4266cc9805 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -18,11 +18,11 @@ export const HostPage = React.createClass({ }, getInitialState() { - const pastHourIndex = 2; + const fifteenMinutesIndex = 1; return { layouts: [], - timeRange: timeRanges[pastHourIndex], + timeRange: timeRanges[fifteenMinutesIndex], }; },