+ :
{iconName
?
: null}
@@ -291,6 +296,7 @@ Dropdown.propTypes = {
menuLabel: string,
menuClass: string,
useAutoComplete: bool,
+ toggleStyle: shape(),
}
export default OnClickOutside(Dropdown)
diff --git a/ui/src/shared/components/EmptyQuery.js b/ui/src/shared/components/EmptyQuery.js
index e37b9cf72b..e42cca09d9 100644
--- a/ui/src/shared/components/EmptyQuery.js
+++ b/ui/src/shared/components/EmptyQuery.js
@@ -5,7 +5,7 @@ const EmptyQueryState = ({onAddQuery}) =>
This Graph has no Queries
- Add a Query
+ Add a Query
diff --git a/ui/src/shared/components/FieldList.js b/ui/src/shared/components/FieldList.js
index 79607635c7..918cdf994d 100644
--- a/ui/src/shared/components/FieldList.js
+++ b/ui/src/shared/components/FieldList.js
@@ -1,4 +1,5 @@
import React, {PropTypes, Component} from 'react'
+import _ from 'lodash'
import FieldListItem from 'src/data_explorer/components/FieldListItem'
import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown'
@@ -26,7 +27,8 @@ class FieldList extends Component {
}
componentDidUpdate(prevProps) {
- const {database, measurement, retentionPolicy} = this.props.query
+ const {querySource, query} = this.props
+ const {database, measurement, retentionPolicy} = query
const {
database: prevDB,
measurement: prevMeas,
@@ -39,7 +41,8 @@ class FieldList extends Component {
if (
database === prevDB &&
measurement === prevMeas &&
- retentionPolicy === prevRP
+ retentionPolicy === prevRP &&
+ _.isEqual(prevProps.querySource, querySource)
) {
return
}
@@ -58,14 +61,12 @@ class FieldList extends Component {
_getFields = () => {
const {database, measurement, retentionPolicy} = this.props.query
const {source} = this.context
- const proxySource = source.links.proxy
+ const {querySource} = this.props
- showFieldKeys(
- proxySource,
- database,
- measurement,
- retentionPolicy
- ).then(resp => {
+ const proxy =
+ _.get(querySource, ['links', 'proxy'], null) || source.links.proxy
+
+ showFieldKeys(proxy, database, measurement, retentionPolicy).then(resp => {
const {errors, fieldSets} = showFieldKeysParser(resp.data)
if (errors.length) {
console.error('Error parsing fields keys: ', errors)
@@ -171,6 +172,11 @@ FieldList.propTypes = {
applyFuncsToField: func.isRequired,
isKapacitorRule: bool,
isInDataExplorer: bool,
+ querySource: shape({
+ links: shape({
+ proxy: string.isRequired,
+ }).isRequired,
+ }),
}
export default FieldList
diff --git a/ui/src/shared/components/GraphTips.js b/ui/src/shared/components/GraphTips.js
index 5ff4d3e638..edf0193b78 100644
--- a/ui/src/shared/components/GraphTips.js
+++ b/ui/src/shared/components/GraphTips.js
@@ -4,7 +4,7 @@ import ReactTooltip from 'react-tooltip'
const GraphTips = React.createClass({
render() {
const graphTipsText =
- '
Graph Tips:
Click + Drag Zoom in (X or Y)
Shift + Click Pan Graph Window
Double Click Reset Graph Window
'
+ '
Graph Tips:
Click + Drag Zoom in (X or Y)
Shift + Click Pan Graph Window
Double Click Reset Graph Window
'
return (
+import _ from 'lodash'
+
+const getSource = (cell, source, sources, defaultSource) => {
+ const s = _.get(cell, ['queries', '0', 'source'], null)
+ if (!s) {
+ return source
+ }
+
+ return sources.find(src => src.links.self === s) || defaultSource
+}
+
+const Layout = (
+ {
+ host,
+ cell,
+ cell: {h, axes, type},
+ source,
+ sources,
+ onZoom,
+ templates,
+ timeRange,
+ isEditable,
+ onEditCell,
+ autoRefresh,
+ onDeleteCell,
+ synchronizer,
+ resizeCoords,
+ onCancelEditCell,
+ onSummonOverlayTechnologies,
+ },
+ {source: defaultSource}
+) =>
{cell.isWidget
?
@@ -36,17 +51,27 @@ const Layout = ({
type={type}
cellHeight={h}
onZoom={onZoom}
+ sources={sources}
timeRange={timeRange}
templates={templates}
autoRefresh={autoRefresh}
synchronizer={synchronizer}
resizeCoords={resizeCoords}
- queries={buildQueriesForLayouts(cell, source, timeRange, host)}
+ queries={buildQueriesForLayouts(
+ cell,
+ getSource(cell, source, sources, defaultSource),
+ timeRange,
+ host
+ )}
/>}
const {arrayOf, bool, func, number, shape, string} = PropTypes
+Layout.contextTypes = {
+ source: shape(),
+}
+
Layout.propTypes = {
autoRefresh: number.isRequired,
timeRange: shape({
@@ -87,6 +112,7 @@ Layout.propTypes = {
onCancelEditCell: func,
resizeCoords: shape(),
onZoom: func,
+ sources: arrayOf(shape()),
}
export default Layout
diff --git a/ui/src/shared/components/LayoutCell.js b/ui/src/shared/components/LayoutCell.js
index 8b75c16058..088fcfbe65 100644
--- a/ui/src/shared/components/LayoutCell.js
+++ b/ui/src/shared/components/LayoutCell.js
@@ -40,16 +40,16 @@ class LayoutCell extends Component {
@@ -60,7 +60,7 @@ class LayoutCell extends Component {
className="no-query--button btn btn-md btn-primary"
onClick={this.handleSummonOverlay(cell)}
>
- Add Graph
+ Add Graph
}
@@ -69,7 +69,7 @@ class LayoutCell extends Component {
}
}
-const {array, bool, func, node, number, shape, string} = PropTypes
+const {arrayOf, bool, func, node, number, shape, string} = PropTypes
LayoutCell.propTypes = {
cell: shape({
@@ -77,7 +77,7 @@ LayoutCell.propTypes = {
isEditing: bool,
x: number.isRequired,
y: number.isRequired,
- queries: array,
+ queries: arrayOf(shape()),
}).isRequired,
children: node.isRequired,
onDeleteCell: func,
diff --git a/ui/src/shared/components/LayoutCellHeader.js b/ui/src/shared/components/LayoutCellHeader.js
index 9b33401776..01300cc77a 100644
--- a/ui/src/shared/components/LayoutCellHeader.js
+++ b/ui/src/shared/components/LayoutCellHeader.js
@@ -1,5 +1,4 @@
import React, {PropTypes} from 'react'
-import classnames from 'classnames'
import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
@@ -8,12 +7,12 @@ import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
const LayoutCellHeader = ({queries, isEditable, cellName}) => {
const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
+ const headingClass = `dash-graph--heading ${isEditable
+ ? 'dash-graph--heading-draggable'
+ : ''}`
+
return (
-
+
{
}
>
{cellName}
- {queries && queries.length
- ?
- : null}
+
+ {queries && queries.length
+ ?
+ : null}
+
)
}
-const {array, bool, string} = PropTypes
+const {arrayOf, bool, shape, string} = PropTypes
LayoutCellHeader.propTypes = {
- queries: array,
+ queries: arrayOf(shape()),
isEditable: bool,
cellName: string,
}
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index cfd76c2eb1..7ab90c4dd1 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -1,6 +1,7 @@
import React, {Component, PropTypes} from 'react'
import ReactGridLayout, {WidthProvider} from 'react-grid-layout'
import Resizeable from 'react-component-resizable'
+
import _ from 'lodash'
import Layout from 'src/shared/components/Layout'
@@ -26,11 +27,6 @@ class LayoutRenderer extends Component {
}
}
- // idea adopted from https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
- updateWindowDimensions = () => {
- this.setState({rowHeight: this.calculateRowHeight()})
- }
-
handleLayoutChange = layout => {
if (!this.props.onPositionChange) {
return
@@ -72,6 +68,7 @@ class LayoutRenderer extends Component {
host,
cells,
source,
+ sources,
onZoom,
templates,
timeRange,
@@ -88,7 +85,7 @@ class LayoutRenderer extends Component {
const isDashboard = !!this.props.onPositionChange
return (
-
+
{
const {errors, measurementSets} = showMeasurementsParser(resp.data)
if (errors.length) {
diff --git a/ui/src/shared/components/SchemaExplorer.js b/ui/src/shared/components/SchemaExplorer.js
index 2572952e61..ebf5cfac33 100644
--- a/ui/src/shared/components/SchemaExplorer.js
+++ b/ui/src/shared/components/SchemaExplorer.js
@@ -9,6 +9,7 @@ const actionBinder = (id, action) => item => action(id, item)
const SchemaExplorer = ({
query,
query: {id},
+ source,
actions: {
chooseTag,
groupByTag,
@@ -24,17 +25,22 @@ const SchemaExplorer = ({
{
+ const sourceName = _.get(sourceOverride, 'name', null)
+ ? sourceOverride.name
+ : name
+ const sourceUrl = _.get(sourceOverride, 'url', null)
+ ? sourceOverride.url
+ : url
- render() {
- const {sourceName} = this.props
- if (!sourceName) {
- return null
- }
- const sourceNameTooltip = `Connected to ${sourceName}`
- return (
-
-
-
-
- )
- },
-})
+ if (!sourceName) {
+ return null
+ }
+ const sourceNameTooltip = `Connected to Source:
${sourceName} @ ${sourceUrl}
`
+ const uuidTooltip = uuid.v4()
+
+ return (
+
+
+
+
+ )
+}
+
+const {shape, string} = PropTypes
+
+SourceIndicator.propTypes = {
+ sourceOverride: shape({
+ name: string,
+ url: string,
+ }),
+}
+
+SourceIndicator.contextTypes = {
+ source: shape({
+ name: string,
+ url: string,
+ }),
+}
export default SourceIndicator
diff --git a/ui/src/shared/copy/cell.js b/ui/src/shared/copy/cell.js
index 071e2ec8f2..a17b594ef6 100644
--- a/ui/src/shared/copy/cell.js
+++ b/ui/src/shared/copy/cell.js
@@ -2,9 +2,9 @@ import _ from 'lodash'
const emptyFunny = [
'Looks like you don’t have any queries. Be a lot cooler if you did.',
- 'Create a query below. Go on, I dare ya!',
- 'Create a query below. Have fun!',
- '1) Create a query below\n2) Profit',
+ 'Create a query. Go on, I dare ya!',
+ 'Create a query. Have fun!',
+ '1) Create a query \n2) Profit',
]
export const emptyGraphCopy = _.sample(emptyFunny)
diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js
index d690c3597d..f3aaaee651 100644
--- a/ui/src/sources/components/InfluxTable.js
+++ b/ui/src/sources/components/InfluxTable.js
@@ -17,7 +17,7 @@ const kapacitorDropdown = (
to={`/sources/${source.id}/kapacitors/new`}
className="btn btn-xs btn-default"
>
- Add Config
+ Add Config
)
}
@@ -89,7 +89,7 @@ const InfluxTable = ({
to={`/sources/${source.id}/manage-sources/new`}
className="btn btn-sm btn-primary"
>
- Add Source
+ Add Source
diff --git a/ui/src/sources/components/SourceForm.js b/ui/src/sources/components/SourceForm.js
index 3a7bd7ea0d..020b295a35 100644
--- a/ui/src/sources/components/SourceForm.js
+++ b/ui/src/sources/components/SourceForm.js
@@ -1,20 +1,14 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
import classnames from 'classnames'
import {insecureSkipVerifyText} from 'shared/copy/tooltipText'
import _ from 'lodash'
-const {bool, func, shape} = PropTypes
+class SourceForm extends Component {
+ constructor(props) {
+ super(props)
+ }
-export const SourceForm = React.createClass({
- propTypes: {
- source: shape({}).isRequired,
- editMode: bool.isRequired,
- onInputChange: func.isRequired,
- onSubmit: func.isRequired,
- onBlurSourceURL: func.isRequired,
- },
-
- handleSubmitForm(e) {
+ handleSubmitForm = e => {
e.preventDefault()
const newSource = {
...this.props.source,
@@ -31,9 +25,14 @@ export const SourceForm = React.createClass({
}
this.props.onSubmit(newSource)
- },
+ }
- handleBlurSourceURL() {
+ handleUseDefaultValues = () => {
+ this.sourceURL.value = 'http://localhost:8086'
+ this.sourceName.value = 'My InfluxDB'
+ }
+
+ handleBlurSourceURL = () => {
const url = this.sourceURL.value.trim()
if (!url) {
@@ -46,7 +45,7 @@ export const SourceForm = React.createClass({
}
this.props.onBlurSourceURL(newSource)
- },
+ }
render() {
const {source, editMode, onInputChange} = this.props
@@ -58,14 +57,14 @@ export const SourceForm = React.createClass({
-
+
diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js
index 0cf5d1cf68..d407203812 100644
--- a/ui/src/sources/containers/SourcePage.js
+++ b/ui/src/sources/containers/SourcePage.js
@@ -125,7 +125,7 @@ export const SourcePage = React.createClass({