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

Remove raw query tab from app

pull/200/head
Andrew Watkins 2016-10-05 15:07:03 -07:00
parent d27d239ded
commit 4b65f9097f
6 changed files with 7 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/chronograf/components/Explorer.js
View File

@ -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}
/>
);

2
ui/src/chronograf/components/ExplorerList.js
View File

@ -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}
/>
);
})}

63
ui/src/chronograf/components/PanelBuilder.js
View File

@ -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 (
<div className="panel-builder" style={{width}}>
<div className="panel-builder__tabs">
<div className={classNames("panel-builder__tab", {active: activeTab === EXPLORER})} onClick={() => this.handleClickTab(EXPLORER)}>Explorer</div>
<div className={classNames("panel-builder__tab", {active: activeTab === RAW_QUERY})} onClick={() => this.handleClickTab(RAW_QUERY)}>Raw Query</div>
</div>
<div className="panel-builder__tab-content">
<div className="panel-builder__item btn btn-block btn-primary" onClick={this.handleCreateExploer}><span className="icon graphline"></span>&nbsp;&nbsp;Create Graph</div>
{this.renderTab()}
<ExplorerList
actions={actions}
setActivePanel={this.props.setActivePanel}
activePanelID={this.props.activePanelID}
/>
</div>
</div>
);
},
renderTab() {
const {actions} = this.props;
const {activeTab} = this.state;
if (activeTab === EXPLORER) {
return (
<ExplorerList
actions={actions}
onClickStatement={this.handleClickStatement}
setActivePanel={this.props.setActivePanel}
activePanelID={this.props.activePanelID}
/>
);
}
return (
<RawQueryList
actions={actions}
activeQueryID={this.state.activeQueryID}
activePanelID={this.props.activePanelID}
setActivePanel={this.props.setActivePanel}
/>
);
},
});
function mapStateToProps() {

14
ui/src/chronograf/components/QueryEditor.js
View File

@ -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 (
<div className="query-editor">
<div className="query-editor__code">
{this.renderQueryWarning()}
<pre className={classNames("", {"rq-mode": query.rawText})} onClick={() => this.props.onClickStatement(query.id)}><code>{statement}</code></pre>
<pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
</div>
{this.renderEditor()}
</div>
);
},
renderQueryWarning() {
if (!this.props.query.rawText) {
return (
<div className="query-editor__warning">
<div className="btn btn-sm btn-warning" onClick={() => this.props.onClickStatement(this.props.query.id)}>Convert to Raw Query</div>
</div>
);
}
},
renderEditor() {
if (this.props.query.rawText) {
return (

123
ui/src/chronograf/components/RawQueryGroup.js
View File

@ -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 (
<div className="raw-editor__panel">
<RenamePanelModal panel={panel} onConfirm={this.handleRename} />
<div className="raw-editor__header" onClick={this.handleSelectExplorer}>
<div className="raw-editor__header-name">
{panel.name || "Panel"}
</div>
<div className="raw-editor__header-actions">
<div title="Rename" className="raw-editor__header-rename" onClick={this.openRenamePanelModal}><span className="icon pencil"></span></div>
<div title="Delete" className="raw-editor__header-delete" onClick={this.handleDeletePanel}><span className="icon trash"></span></div>
</div>
</div>
{queryConfigs.map((q) => {
return <RawQueryEditor onFocus={this.handleSetActivePanel} shouldFocus={this.props.activeQueryID === q.id} key={q.id} query={q} defaultValue={q.rawText || selectStatement(timeRange, q) || ''} updateRawQuery={this.props.actions.updateRawQuery} />;
})}
</div>
);
},
});
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 (
<div className={classNames("raw-query-editor-wrapper", {"rq-mode": query.rawText})}>
<textarea
className="raw-query-editor"
onKeyDown={this.handleKeyDown}
onBlur={this.updateRawQuery}
onFocus={this.props.onFocus}
ref={(editor) => this.editor = editor}
defaultValue={defaultValue}
placeholder="Blank query"
/>
{/* <button title="Delete this query?" className="raw-query-editor-delete">
<span className="icon remove"></span>
</button> */}
</div>
);
},
});
export default RawQueryGroup;

51
ui/src/chronograf/components/RawQueryList.js
View File

@ -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 (
<div>
<div className="alert alert-rawquery">
<span className="icon alert-triangle"></span>
Editing a query turns it into a <strong>Raw Query</strong> which is no longer editable from <strong>Explorer</strong> mode. This action cannot be undone.
</div>
{Object.keys(panels).map((panelID) => {
const panel = panels[panelID];
const queries = panel.queryIds.map((configId) => queryConfigs[configId]);
return (
<RawQueryGroup setActivePanel={setActivePanel} activeQueryID={activeQueryID} key={panelID} panel={panel} queryConfigs={queries} timeRange={timeRange} actions={actions} />
);
})}
</div>
);
},
});
function mapStateToProps(state) {
return {
timeRange: state.timeRange,
panels: state.panels,
queryConfigs: state.queryConfigs,
};
}
export default connect(mapStateToProps)(RawQueryList);