diff --git a/ui/src/chronograf/actions/view/index.js b/ui/src/chronograf/actions/view/index.js index 0ac30e9685..751fa6bd0f 100644 --- a/ui/src/chronograf/actions/view/index.js +++ b/ui/src/chronograf/actions/view/index.js @@ -119,6 +119,16 @@ export function chooseMeasurement(queryId, measurement) { }; } +export function editRawText(queryId, rawText) { + return { + type: 'EDIT_RAW_TEXT', + payload: { + queryId, + rawText, + }, + }; +} + export function setTimeRange(range) { window.localStorage.setItem('timeRange', JSON.stringify(range)); diff --git a/ui/src/chronograf/components/PanelBuilder.js b/ui/src/chronograf/components/PanelBuilder.js index 487f3af893..82db73b5ec 100644 --- a/ui/src/chronograf/components/PanelBuilder.js +++ b/ui/src/chronograf/components/PanelBuilder.js @@ -12,6 +12,7 @@ const PanelBuilder = React.createClass({ createPanel: func.isRequired, deleteQuery: func.isRequired, addQuery: func.isRequired, + editRawText: func.isRequired, chooseNamespace: func.isRequired, chooseMeasurement: func.isRequired, toggleField: func.isRequired, diff --git a/ui/src/chronograf/components/QueryEditor.js b/ui/src/chronograf/components/QueryEditor.js index 3d257c7a3a..08d06aeb78 100644 --- a/ui/src/chronograf/components/QueryEditor.js +++ b/ui/src/chronograf/components/QueryEditor.js @@ -86,37 +86,39 @@ const QueryEditor = React.createClass({ this.props.actions.groupByTag(this.props.query.id, tagKey); }, + handleEditRawText(_queryID, text) { + this.props.actions.editRawText(this.props.query.id, text); + }, + handleClickTab(tab) { this.setState({activeTab: tab}); }, render() { - const {query, timeRange} = this.props; - - const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`; - return (
-
-
{statement}
-
- {this.renderEditor()} + {this.renderQuery()} + {this.renderLists()}
); }, - renderEditor() { - if (this.props.query.rawText) { + renderQuery() { + const {query, timeRange} = this.props; + const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`; + + if (!query.rawText) { return ( -
-

- -  Only editable in the Raw Query tab. -

+
+
{statement}
); } + return ; + }, + + renderLists() { const {activeTab} = this.state; return (
@@ -174,4 +176,47 @@ const QueryEditor = React.createClass({ }, }); +const ENTER = 13; +const RawQueryEditor = React.createClass({ + propTypes: { + query: PropTypes.shape({ + rawText: PropTypes.string, + id: PropTypes.string.isRequired, + }).isRequired, + onUpdate: PropTypes.func.isRequired, + defaultValue: PropTypes.string.isRequired, + }, + + handleKeyDown(e) { + e.stopPropagation(); + if (e.keyCode !== ENTER) { + return; + } + e.preventDefault(); + this.editor.blur(); + }, + + handleUpdate() { + const text = this.editor.value; + this.props.onUpdate(this.props.query.id, text); + }, + + render() { + const {defaultValue} = this.props; + + return ( +
+