ensure fields get updated when index pattern changes

elastic · Aug 29, 2017 · 0586962 · 0586962
1 parent 34abb4d
commit 0586962
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/src/core_plugins/input_control_vis/public/components/field_select.js b/src/core_plugins/input_control_vis/public/components/field_select.js
@@ -6,29 +6,36 @@ export class FieldSelect extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      fields: []
+    };
     this.filterField = _.get(props, 'filterField', () => { return true; });
-    this.loadFields = this.loadFields.bind(this);
+    this.loadFields(this.props.indexPatternId);
   }
 
-  loadFields(input, callback) {
-    if (!this.props.indexPatternId || this.props.indexPatternId.length === 0) {
-      callback(null, { options: [] });
-      return;
+  componentWillReceiveProps(nextProps) {
+    if (this.props.indexPatternId !== nextProps.indexPatternId) {
+      this.setState({ fields: [] });
+      this.loadFields(nextProps.indexPatternId);
     }
+  }
 
-    this.props.getIndexPattern(this.props.indexPatternId).then(index => {
-      const fields = index.fields
+  async loadFields(indexPatternId) {
+    if (!indexPatternId || indexPatternId.length === 0) {
+      return;
+    }
+    const indexPattern = await this.props.getIndexPattern(indexPatternId);
+    const fields = indexPattern.fields
       .filter(this.filterField)
       .sort((a, b) => {
         if (a.name < b.name) return -1;
         if (a.name > b.name) return 1;
         return 0;
-      }).map(function (field) {
+      })
+      .map(function (field) {
         return { label: field.name, value: field.name };
       });
-      // Setting complete=true means loadOptions will never be called again.
-      callback(null, { options: fields, complete: true });
-    });
+    this.setState({ fields: fields });
   }
 
   render() {
@@ -42,11 +49,11 @@ export class FieldSelect extends Component {
           Field
         </label>
         <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-          <Select.Async
+          <Select
             className="field-react-select"
-            placeholder="Select..."
+            placeholder="Select field..."
             value={this.props.value}
-            loadOptions={this.loadFields}
+            options={this.state.fields}
             onChange={this.props.onChange}
             resetValue={''}
           />

diff --git a/src/core_plugins/input_control_vis/public/components/index_pattern_select.js b/src/core_plugins/input_control_vis/public/components/index_pattern_select.js
@@ -30,7 +30,7 @@ export class IndexPatternSelect extends Component {
         <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
           <Select.Async
             className="index-pattern-react-select"
-            placeholder="Select..."
+            placeholder="Select index pattern..."
             value={this.props.value}
             loadOptions={this.loadOptions}
             onChange={this.props.onChange}