Source code editor (Graylog2#234)

* Use SourceCodeEditor component * Use annotations prop to set validations
dkhamitov · Jan 11, 2018 · 7ad4796 · 7ad4796
1 parent ecc33b8
commit 7ad4796
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 38 deletions.
diff --git a/plugin/package.json b/plugin/package.json
@@ -14,10 +14,7 @@
   ],
   "author": "Graylog, Inc. <hello@graylog.com>",
   "license": "GPL-3.0",
-  "dependencies": {
-    "brace": "^0.7.0",
-    "react-ace": "^3.1.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "graylog-web-plugin": "file:../../graylog2-server/graylog2-web-interface/packages/graylog-web-plugin"
   }

diff --git a/plugin/src/web/rules/RuleForm.jsx b/plugin/src/web/rules/RuleForm.jsx
@@ -3,12 +3,7 @@ import React from 'react';
 import { Button, Col, ControlLabel, FormControl, FormGroup, Row } from 'react-bootstrap';
 import { LinkContainer } from 'react-router-bootstrap';
 
-import AceEditor from 'react-ace';
-import brace from 'brace';
-
-import 'brace/mode/text';
-import 'brace/theme/chrome';
-
+import { SourceCodeEditor } from 'components/common';
 import { Input } from 'components/bootstrap';
 import Routes from 'routing/Routes';
 
@@ -46,7 +41,6 @@ const RuleForm = React.createClass({
         description: rule.description,
         source: rule.source,
       },
-      editor: undefined,
       parseErrors: [],
     };
   },
@@ -60,16 +54,8 @@ const RuleForm = React.createClass({
 
   parseTimer: undefined,
 
-  _updateEditor() {
-    const session = this.state.editor.session;
-    const annotations = this.state.parseErrors.map(e => {
-      return { row: e.line - 1, column: e.position_in_line - 1, text: e.reason, type: 'error' };
-    });
-    session.setAnnotations(annotations);
-  },
-
   _setParseErrors(errors) {
-    this.setState({ parseErrors: errors }, this._updateEditor);
+    this.setState({ parseErrors: errors });
   },
 
   _onSourceChange(value) {
@@ -99,10 +85,6 @@ const RuleForm = React.createClass({
     this.setState({ rule });
   },
 
-  _onLoad(editor) {
-    this.setState({ editor });
-  },
-
   _getId(prefixIdName) {
     return this.state.name !== undefined ? prefixIdName + this.state.name : prefixIdName;
   },
@@ -156,6 +138,10 @@ const RuleForm = React.createClass({
       );
     }
 
+    const annotations = this.state.parseErrors.map(e => {
+      return { row: e.line - 1, column: e.position_in_line - 1, text: e.reason, type: 'error' };
+    });
+
     return (
       <form ref="form" onSubmit={this._submit}>
         <fieldset>
@@ -175,20 +161,11 @@ const RuleForm = React.createClass({
           {pipelinesUsingRule}
 
           <Input id="rule-source-editor" label="Rule source" help="Rule source, see quick reference for more information.">
-            <div style={{ border: '1px solid lightgray', borderRadius: 5 }}>
-              <AceEditor
-                mode="text"
-                theme="chrome"
-                name={`source${this.props.create ? '-create' : '-edit'}`}
-                fontSize={11}
-                height="14em"
-                width="100%"
-                editorProps={{ $blockScrolling: 'Infinity' }}
-                value={this.state.rule.source}
-                onLoad={this._onLoad}
-                onChange={this._onSourceChange}
-              />
-            </div>
+            <SourceCodeEditor id={`source${this.props.create ? '-create' : '-edit'}`}
+                              annotations={annotations}
+                              value={this.state.rule.source}
+                              onLoad={this._onLoad}
+                              onChange={this._onSourceChange} />
           </Input>
         </fieldset>