diff --git a/ui/src/chronograf/components/Explorer.js b/ui/src/chronograf/components/Explorer.js
index d525b64c52..b026c2b289 100644
--- a/ui/src/chronograf/components/Explorer.js
+++ b/ui/src/chronograf/components/Explorer.js
@@ -28,7 +28,6 @@ const Explorer = React.createClass({
applyFuncsToField: func.isRequired,
deletePanel: func.isRequired,
}).isRequired,
- onClickStatement: func.isRequired,
},
getInitialState() {
@@ -120,7 +119,6 @@ const Explorer = React.createClass({
timeRange={timeRange}
query={this.getActiveQuery()}
actions={actions}
- onClickStatement={this.props.onClickStatement}
onAddQuery={this.handleAddQuery}
/>
);
diff --git a/ui/src/chronograf/components/ExplorerList.js b/ui/src/chronograf/components/ExplorerList.js
index 869f2e051a..c4e6b27f62 100644
--- a/ui/src/chronograf/components/ExplorerList.js
+++ b/ui/src/chronograf/components/ExplorerList.js
@@ -14,7 +14,6 @@ const ExplorerList = React.createClass({
panels: shape({}).isRequired,
queryConfigs: PropTypes.shape({}),
actions: shape({}).isRequired,
- onClickStatement: func.isRequired,
setActivePanel: func.isRequired,
activePanelID: string,
},
@@ -54,7 +53,6 @@ const ExplorerList = React.createClass({
onToggleExplorer={this.handleToggleExplorer}
isExpanded={panelID === activePanelID}
actions={allActions}
- onClickStatement={this.props.onClickStatement}
/>
);
})}
diff --git a/ui/src/chronograf/components/PanelBuilder.js b/ui/src/chronograf/components/PanelBuilder.js
index aec08b6211..c9a047c24d 100644
--- a/ui/src/chronograf/components/PanelBuilder.js
+++ b/ui/src/chronograf/components/PanelBuilder.js
@@ -1,14 +1,9 @@
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
-import classNames from 'classnames';
import {bindActionCreators} from 'redux';
import ExplorerList from './ExplorerList';
-import RawQueryList from './RawQueryList';
import * as viewActions from '../actions/view';
-const EXPLORER = 'explorer';
-const RAW_QUERY = 'raw query';
-
const {string, func} = PropTypes;
const PanelBuilder = React.createClass({
propTypes: {
@@ -31,72 +26,26 @@ const PanelBuilder = React.createClass({
activePanelID: string,
},
- getInitialState() {
- return {
- activeTab: EXPLORER,
- };
- },
-
- handleClickTab(nextTab) {
- this.setState({
- activeTab: nextTab,
- activeQueryID: null,
- });
- },
-
handleCreateExploer() {
this.props.actions.createPanel();
},
- handleClickStatement(queryID) {
- this.setState({
- activeTab: RAW_QUERY,
- activeQueryID: queryID,
- });
- },
-
render() {
- const {width} = this.props;
- const {activeTab} = this.state;
+ const {width, actions} = this.props;
return (
-
-
this.handleClickTab(EXPLORER)}>Explorer
-
this.handleClickTab(RAW_QUERY)}>Raw Query
-
Create Graph
- {this.renderTab()}
+
);
},
-
- renderTab() {
- const {actions} = this.props;
- const {activeTab} = this.state;
-
- if (activeTab === EXPLORER) {
- return (
-
- );
- }
-
- return (
-
- );
- },
});
function mapStateToProps() {
diff --git a/ui/src/chronograf/components/QueryEditor.js b/ui/src/chronograf/components/QueryEditor.js
index 536480acef..bca872be38 100644
--- a/ui/src/chronograf/components/QueryEditor.js
+++ b/ui/src/chronograf/components/QueryEditor.js
@@ -33,7 +33,6 @@ const QueryEditor = React.createClass({
groupByTime: func.isRequired,
toggleTagAcceptance: func.isRequired,
}).isRequired,
- onClickStatement: func.isRequired,
},
getInitialState() {
@@ -99,24 +98,13 @@ const QueryEditor = React.createClass({
return (
- {this.renderQueryWarning()}
-
this.props.onClickStatement(query.id)}>{statement}
+
{statement}
{this.renderEditor()}
);
},
- renderQueryWarning() {
- if (!this.props.query.rawText) {
- return (
-
-
this.props.onClickStatement(this.props.query.id)}>Convert to Raw Query
-
- );
- }
- },
-
renderEditor() {
if (this.props.query.rawText) {
return (
diff --git a/ui/src/chronograf/components/RawQueryGroup.js b/ui/src/chronograf/components/RawQueryGroup.js
deleted file mode 100644
index b55696ee0d..0000000000
--- a/ui/src/chronograf/components/RawQueryGroup.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, {PropTypes} from 'react';
-import classNames from 'classnames';
-import selectStatement from '../utils/influxql/select';
-import RenamePanelModal from './RenamePanelModal';
-
-const ENTER = 13;
-
-const RawQueryGroup = React.createClass({
- propTypes: {
- queryConfigs: PropTypes.arrayOf(PropTypes.shape({})),
- panel: PropTypes.shape({
- id: PropTypes.string.isRequired,
- }),
- timeRange: PropTypes.shape({
- upper: PropTypes.string,
- lower: PropTypes.string,
- }).isRequired,
- actions: PropTypes.shape({
- updateRawQuery: PropTypes.func.isRequired,
- renamePanel: PropTypes.func.isRequired,
- deletePanel: PropTypes.func.isRequired,
- }),
- activeQueryID: PropTypes.string,
- setActivePanel: PropTypes.func,
- },
-
- handleRename(newName) {
- this.props.actions.renamePanel(this.props.panel.id, newName);
- },
-
- handleDeletePanel(e) {
- e.stopPropagation();
- this.props.actions.deletePanel(this.props.panel.id);
- },
-
- openRenamePanelModal(e) {
- e.stopPropagation();
- $(`#renamePanelModal-${this.props.panel.id}`).modal('show'); // eslint-disable-line no-undef
- },
-
- handleSetActivePanel() {
- this.props.setActivePanel(this.props.panel.id);
- },
-
- render() {
- const {queryConfigs, timeRange, panel} = this.props;
-
- return (
-
-
-
-
- {panel.name || "Panel"}
-
-
-
- {queryConfigs.map((q) => {
- return
;
- })}
-
- );
- },
-});
-
-const RawQueryEditor = React.createClass({
- propTypes: {
- query: PropTypes.shape({
- rawText: PropTypes.string,
- id: PropTypes.string.isRequired,
- }).isRequired,
- updateRawQuery: PropTypes.func.isRequired,
- defaultValue: PropTypes.string.isRequired,
- shouldFocus: PropTypes.bool.isRequired,
- onFocus: PropTypes.func.isRequired,
- },
-
- componentDidMount() {
- if (this.props.shouldFocus) {
- this.editor.scrollIntoView();
- this.editor.focus();
- }
- },
-
- handleKeyDown(e) {
- e.stopPropagation();
- if (e.keyCode !== ENTER) {
- return;
- }
- e.preventDefault();
- this.editor.blur();
- },
-
- updateRawQuery() {
- const text = this.editor.value;
- this.props.updateRawQuery(this.props.query.id, text);
- },
-
- render() {
- const {defaultValue, query} = this.props;
-
- return (
-
-
- );
- },
-});
-
-export default RawQueryGroup;
diff --git a/ui/src/chronograf/components/RawQueryList.js b/ui/src/chronograf/components/RawQueryList.js
deleted file mode 100644
index afcdc22f71..0000000000
--- a/ui/src/chronograf/components/RawQueryList.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, {PropTypes} from 'react';
-import {connect} from 'react-redux';
-import RawQueryGroup from './RawQueryGroup';
-
-const {func, string, shape} = PropTypes;
-const RawQueryList = React.createClass({
- propTypes: {
- timeRange: shape({
- upper: string,
- lower: string,
- }).isRequired,
- panels: shape({}).isRequired,
- queryConfigs: shape({}).isRequired,
- actions: shape({
- updateRawQuery: func.isRequired,
- renamePanel: func.isRequired,
- }).isRequired,
- activeQueryID: PropTypes.string,
- setActivePanel: PropTypes.func,
- },
-
- render() {
- const {panels, timeRange, queryConfigs, actions, setActivePanel, activeQueryID} = this.props;
-
- return (
-
-
-
- Editing a query turns it into a Raw Query which is no longer editable from Explorer mode. This action cannot be undone.
-
- {Object.keys(panels).map((panelID) => {
- const panel = panels[panelID];
- const queries = panel.queryIds.map((configId) => queryConfigs[configId]);
- return (
-
- );
- })}
-
- );
- },
-});
-
-function mapStateToProps(state) {
- return {
- timeRange: state.timeRange,
- panels: state.panels,
- queryConfigs: state.queryConfigs,
- };
-}
-
-export default connect(mapStateToProps)(RawQueryList);