-
-
-
Data Explorer
-
-
-
-
-
-
- Write Data
-
-
-
-
-
+const Header = ({
+ timeRange,
+ autoRefresh,
+ showWriteForm,
+ onManualRefresh,
+ onChooseTimeRange,
+ onChooseAutoRefresh,
+}) =>
+
+
+
+
Data Explorer
- )
- },
-})
+
+
+
+
+
+ Write Data
+
+
+
+
+
+
+
+Header.propTypes = {
+ onChooseAutoRefresh: func.isRequired,
+ onChooseTimeRange: func.isRequired,
+ onManualRefresh: func.isRequired,
+ autoRefresh: number.isRequired,
+ showWriteForm: func.isRequired,
+ timeRange: shape({
+ lower: string,
+ upper: string,
+ }).isRequired,
+}
export default withRouter(Header)
diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js
index 74dd2014b..e8276427a 100644
--- a/ui/src/hosts/containers/HostPage.js
+++ b/ui/src/hosts/containers/HostPage.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
import {Link} from 'react-router'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
@@ -10,6 +10,7 @@ import Dygraph from 'src/external/dygraph'
import LayoutRenderer from 'shared/components/LayoutRenderer'
import DashboardHeader from 'src/dashboards/components/DashboardHeader'
import FancyScrollbar from 'shared/components/FancyScrollbar'
+import ManualRefresh from 'src/shared/components/ManualRefresh'
import timeRanges from 'hson!shared/data/timeRanges.hson'
import {
@@ -23,39 +24,16 @@ import {fetchLayouts} from 'shared/apis'
import {setAutoRefresh} from 'shared/actions/app'
import {presentationButtonDispatcher} from 'shared/dispatchers'
-const {shape, string, bool, func, number} = PropTypes
-
-export const HostPage = React.createClass({
- propTypes: {
- source: shape({
- links: shape({
- proxy: string.isRequired,
- }).isRequired,
- telegraf: string.isRequired,
- id: string.isRequired,
- }),
- params: shape({
- hostID: string.isRequired,
- }).isRequired,
- location: shape({
- query: shape({
- app: string,
- }),
- }),
- autoRefresh: number.isRequired,
- handleChooseAutoRefresh: func.isRequired,
- inPresentationMode: bool,
- handleClickPresentationButton: func,
- },
-
- getInitialState() {
- return {
+class HostPage extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
layouts: [],
hosts: [],
timeRange: timeRanges.find(tr => tr.lower === 'now() - 1h'),
dygraphs: [],
}
- },
+ }
async componentDidMount() {
const {source, params, location} = this.props
@@ -96,19 +74,19 @@ export const HostPage = React.createClass({
}
this.setState({layouts: filteredLayouts, hosts: filteredHosts}) // eslint-disable-line react/no-did-mount-set-state
- },
+ }
- handleChooseTimeRange({lower, upper}) {
+ handleChooseTimeRange = ({lower, upper}) => {
if (upper) {
this.setState({timeRange: {lower, upper}})
} else {
const timeRange = timeRanges.find(range => range.lower === lower)
this.setState({timeRange})
}
- },
+ }
- synchronizer(dygraph) {
- const dygraphs = [...this.state.dygraphs, dygraph]
+ synchronizer = dygraph => {
+ const dygraphs = [...this.state.dygraphs, dygraph].filter(d => d.graphDiv)
const numGraphs = this.state.layouts.reduce((acc, {cells}) => {
return acc + cells.length
}, 0)
@@ -121,11 +99,11 @@ export const HostPage = React.createClass({
})
}
this.setState({dygraphs})
- },
+ }
- renderLayouts(layouts) {
+ renderLayouts = layouts => {
const {timeRange} = this.state
- const {source, autoRefresh} = this.props
+ const {source, autoRefresh, manualRefresh} = this.props
const autoflowLayouts = layouts.filter(layout => !!layout.autoflow)
@@ -173,27 +151,29 @@ export const HostPage = React.createClass({
return (
)
- },
+ }
render() {
const {
- params: {hostID},
- location: {query: {app}},
- source: {id},
- autoRefresh,
- handleChooseAutoRefresh,
- inPresentationMode,
- handleClickPresentationButton,
source,
+ autoRefresh,
+ source: {id},
+ onManualRefresh,
+ params: {hostID},
+ inPresentationMode,
+ handleChooseAutoRefresh,
+ location: {query: {app}},
+ handleClickPresentationButton,
} = this.props
const {layouts, timeRange, hosts} = this.state
const appParam = app ? `?app=${app}` : ''
@@ -201,14 +181,15 @@ export const HostPage = React.createClass({
return (
{Object.keys(hosts).map((host, i) => {
return (
@@ -232,8 +213,34 @@ export const HostPage = React.createClass({
)
- },
-})
+ }
+}
+
+const {shape, string, bool, func, number} = PropTypes
+
+HostPage.propTypes = {
+ source: shape({
+ links: shape({
+ proxy: string.isRequired,
+ }).isRequired,
+ telegraf: string.isRequired,
+ id: string.isRequired,
+ }),
+ params: shape({
+ hostID: string.isRequired,
+ }).isRequired,
+ location: shape({
+ query: shape({
+ app: string,
+ }),
+ }),
+ inPresentationMode: bool,
+ autoRefresh: number.isRequired,
+ manualRefresh: number.isRequired,
+ onManualRefresh: func.isRequired,
+ handleChooseAutoRefresh: func.isRequired,
+ handleClickPresentationButton: func,
+}
const mapStateToProps = ({
app: {ephemeral: {inPresentationMode}, persisted: {autoRefresh}},
@@ -247,4 +254,6 @@ const mapDispatchToProps = dispatch => ({
handleClickPresentationButton: presentationButtonDispatcher(dispatch),
})
-export default connect(mapStateToProps, mapDispatchToProps)(HostPage)
+export default connect(mapStateToProps, mapDispatchToProps)(
+ ManualRefresh(HostPage)
+)
diff --git a/ui/src/shared/components/AutoRefresh.js b/ui/src/shared/components/AutoRefresh.js
index 081364481..3bbf5f206 100644
--- a/ui/src/shared/components/AutoRefresh.js
+++ b/ui/src/shared/components/AutoRefresh.js
@@ -1,66 +1,19 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
import _ from 'lodash'
+
import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
import {removeUnselectedTemplateValues} from 'src/dashboards/constants'
-const {
- array,
- arrayOf,
- bool,
- element,
- func,
- number,
- oneOfType,
- shape,
- string,
-} = PropTypes
-
const AutoRefresh = ComposedComponent => {
- const wrapper = React.createClass({
- propTypes: {
- children: element,
- autoRefresh: number.isRequired,
- templates: arrayOf(
- shape({
- type: string.isRequired,
- tempVar: string.isRequired,
- query: shape({
- db: string,
- rp: string,
- influxql: string,
- }),
- values: arrayOf(
- shape({
- type: string.isRequired,
- value: string.isRequired,
- selected: bool,
- })
- ).isRequired,
- })
- ),
- queries: arrayOf(
- shape({
- host: oneOfType([string, arrayOf(string)]),
- text: string,
- }).isRequired
- ).isRequired,
- axes: shape({
- bounds: shape({
- y: array,
- y2: array,
- }),
- }),
- editQueryStatus: func,
- grabDataForDownload: func,
- },
-
- getInitialState() {
- return {
+ class wrapper extends Component {
+ constructor() {
+ super()
+ this.state = {
lastQuerySuccessful: false,
timeSeries: [],
resolution: null,
}
- },
+ }
componentDidMount() {
const {queries, templates, autoRefresh} = this.props
@@ -71,7 +24,7 @@ const AutoRefresh = ComposedComponent => {
autoRefresh
)
}
- },
+ }
componentWillReceiveProps(nextProps) {
const queriesDidUpdate = this.queryDifference(
@@ -100,18 +53,18 @@ const AutoRefresh = ComposedComponent => {
)
}
}
- },
+ }
- queryDifference(left, right) {
+ queryDifference = (left, right) => {
const leftStrs = left.map(q => `${q.host}${q.text}`)
const rightStrs = right.map(q => `${q.host}${q.text}`)
return _.difference(
_.union(leftStrs, rightStrs),
_.intersection(leftStrs, rightStrs)
)
- },
+ }
- executeQueries(queries, templates = []) {
+ executeQueries = async (queries, templates = []) => {
const {editQueryStatus, grabDataForDownload} = this.props
const {resolution} = this.state
@@ -148,28 +101,33 @@ const AutoRefresh = ComposedComponent => {
)
})
- Promise.all(timeSeriesPromises).then(timeSeries => {
+ try {
+ const timeSeries = await Promise.all(timeSeriesPromises)
const newSeries = timeSeries.map(response => ({response}))
- const lastQuerySuccessful = !this._noResultsForQuery(newSeries)
+ const lastQuerySuccessful = this._resultsForQuery(newSeries)
+
this.setState({
timeSeries: newSeries,
lastQuerySuccessful,
isFetching: false,
})
+
if (grabDataForDownload) {
grabDataForDownload(timeSeries)
}
- })
- },
+ } catch (err) {
+ console.error(err)
+ }
+ }
componentWillUnmount() {
clearInterval(this.intervalID)
this.intervalID = false
- },
+ }
- setResolution(resolution) {
+ setResolution = resolution => {
this.setState({resolution})
- },
+ }
render() {
const {timeSeries} = this.state
@@ -179,7 +137,7 @@ const AutoRefresh = ComposedComponent => {
}
if (
- this._noResultsForQuery(timeSeries) ||
+ !this._resultsForQuery(timeSeries) ||
!this.state.lastQuerySuccessful
) {
return this.renderNoResults()
@@ -192,13 +150,13 @@ const AutoRefresh = ComposedComponent => {
setResolution={this.setResolution}
/>
)
- },
+ }
/**
* Graphs can potentially show mulitple kinds of spinners based on whether
* a graph is being fetched for the first time, or is being refreshed.
*/
- renderFetching(data) {
+ renderFetching = data => {
const isFirstFetch = !Object.keys(this.state.timeSeries).length
return (
{
isRefreshing={!isFirstFetch}
/>
)
- },
+ }
- renderNoResults() {
+ renderNoResults = () => {
return (
)
- },
+ }
- _noResultsForQuery(data) {
- if (!data.length) {
- return true
- }
-
- return data.every(({response}) => {
- return _.get(response, 'results', []).every(result => {
- return (
- Object.keys(result).filter(k => k !== 'statement_id').length === 0
+ _resultsForQuery = data =>
+ data.length
+ ? data.every(({response}) =>
+ _.get(response, 'results', []).every(
+ result =>
+ Object.keys(result).filter(k => k !== 'statement_id').length !==
+ 0
+ )
)
- })
+ : false
+ }
+
+ const {
+ array,
+ arrayOf,
+ bool,
+ element,
+ func,
+ number,
+ oneOfType,
+ shape,
+ string,
+ } = PropTypes
+
+ wrapper.propTypes = {
+ children: element,
+ autoRefresh: number.isRequired,
+ templates: arrayOf(
+ shape({
+ type: string.isRequired,
+ tempVar: string.isRequired,
+ query: shape({
+ db: string,
+ rp: string,
+ influxql: string,
+ }),
+ values: arrayOf(
+ shape({
+ type: string.isRequired,
+ value: string.isRequired,
+ selected: bool,
+ })
+ ).isRequired,
})
- },
- })
+ ),
+ queries: arrayOf(
+ shape({
+ host: oneOfType([string, arrayOf(string)]),
+ text: string,
+ }).isRequired
+ ).isRequired,
+ axes: shape({
+ bounds: shape({
+ y: array,
+ y2: array,
+ }),
+ }),
+ editQueryStatus: func,
+ grabDataForDownload: func,
+ }
return wrapper
}
diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js
index be71c7461..b7975d62b 100644
--- a/ui/src/shared/components/AutoRefreshDropdown.js
+++ b/ui/src/shared/components/AutoRefreshDropdown.js
@@ -28,37 +28,51 @@ class AutoRefreshDropdown extends Component {
toggleMenu = () => this.setState({isOpen: !this.state.isOpen})
render() {
- const {selected} = this.props
+ const {selected, onManualRefresh} = this.props
const {isOpen} = this.state
const {milliseconds, inputValue} = this.findAutoRefreshItem(selected)
return (
-
-
-
0 ? 'refresh' : 'pause'
+
+
+
+ 0 ? 'refresh' : 'pause'
+ )}
+ />
+
+ {inputValue}
+
+
+
+
+ - AutoRefresh Interval
+ {autoRefreshItems.map(item =>
+ -
+
+ {item.menuOption}
+
+
)}
- />
-
- {inputValue}
-
-
+
-
+ {+milliseconds === 0
+ ?
+
+
+ : null}