Controls Visualization - Dates shown in milliseconds AFTER dates sele…

…ction (elastic#25654) * use field format to create label * make sure labels are strings so sort does not throw exceptions * move map out of jsx block
kobelb · Nov 23, 2018 · f90f534 · f90f534
1 parent 18ae6a4
commit f90f534
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 76 deletions.
diff --git a/...gins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/...gins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
@@ -28,19 +28,14 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
         controlIndex={0}
         disableMsg={null}
         fetchOptions={[Function]}
+        formatOptionLabel={[Function]}
         id="mock-list-control"
         label="list control"
         multiselect={true}
         options={
           Array [
-            Object {
-              "label": "choice1",
-              "value": "choice1",
-            },
-            Object {
-              "label": "choice2",
-              "value": "choice2",
-            },
+            "choice1",
+            "choice2",
           ]
         }
         selectedOptions={Array []}
@@ -167,19 +162,14 @@ exports[`Clear btns enabled when there are values 1`] = `
         controlIndex={0}
         disableMsg={null}
         fetchOptions={[Function]}
+        formatOptionLabel={[Function]}
         id="mock-list-control"
         label="list control"
         multiselect={true}
         options={
           Array [
-            Object {
-              "label": "choice1",
-              "value": "choice1",
-            },
-            Object {
-              "label": "choice2",
-              "value": "choice2",
-            },
+            "choice1",
+            "choice2",
           ]
         }
         selectedOptions={Array []}
@@ -306,19 +296,14 @@ exports[`Renders list control 1`] = `
         controlIndex={0}
         disableMsg={null}
         fetchOptions={[Function]}
+        formatOptionLabel={[Function]}
         id="mock-list-control"
         label="list control"
         multiselect={true}
         options={
           Array [
-            Object {
-              "label": "choice1",
-              "value": "choice1",
-            },
-            Object {
-              "label": "choice2",
-              "value": "choice2",
-            },
+            "choice1",
+            "choice2",
           ]
         }
         selectedOptions={Array []}
@@ -444,6 +429,7 @@ exports[`Renders range control 1`] = `
       <InjectIntl(RangeControlUi)
         control={
           Object {
+            "format": [Function],
             "id": "mock-range-control",
             "isEnabled": [Function],
             "label": "range control",

diff --git a/...e_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.js.snap b/...e_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.js.snap
@@ -34,12 +34,12 @@ exports[`renders ListControl 1`] = `
       Array [
         Object {
           "data-test-subj": "option_choice1",
-          "label": "choice1",
+          "label": "choice1 + formatting",
           "value": "choice1",
         },
         Object {
           "data-test-subj": "option_choice2",
-          "label": "choice2",
+          "label": "choice2 + formatting",
           "value": "choice2",
         },
       ]

diff --git a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
@@ -63,6 +63,7 @@ export class InputControlVis extends Component {
               label={control.label}
               options={control.selectOptions}
               selectedOptions={control.value}
+              formatOptionLabel={control.format}
               disableMsg={control.isEnabled() ? null : control.disabledReason}
               multiselect={control.options.multiselect}
               dynamicOptions={control.options.dynamicOptions}

diff --git a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.test.js b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.test.js
@@ -37,10 +37,8 @@ const mockListControl = {
   type: 'list',
   label: 'list control',
   value: [],
-  selectOptions: [
-    { label: 'choice1', value: 'choice1' },
-    { label: 'choice2', value: 'choice2' }
-  ]
+  selectOptions: ['choice1', 'choice2'],
+  format: (value) => { return value; },
 };
 const mockRangeControl = {
   id: 'mock-range-control',
@@ -53,7 +51,8 @@ const mockRangeControl = {
   label: 'range control',
   value: { min: 0, max: 0 },
   min: 0,
-  max: 100
+  max: 100,
+  format: (value) => { return value; }
 };
 const updateFiltersOnChange = false;
 

diff --git a/src/core_plugins/input_control_vis/public/components/vis/list_control.js b/src/core_plugins/input_control_vis/public/components/vis/list_control.js
@@ -43,7 +43,10 @@ class ListControlUi extends Component {
   }
 
   handleOnChange = (selectedOptions) => {
-    this.props.stageFilter(this.props.controlIndex, selectedOptions);
+    const selectedValues = selectedOptions.map(({ value }) => {
+      return value;
+    });
+    this.props.stageFilter(this.props.controlIndex, selectedValues);
   }
 
   debouncedFetch = _.debounce(async (searchValue) => {
@@ -77,11 +80,22 @@ class ListControlUi extends Component {
       );
     }
 
-    const options = this.props.options.map(option => {
+    const options = this.props.options
+      .map(option => {
+        return {
+          label: this.props.formatOptionLabel(option).toString(),
+          value: option,
+          ['data-test-subj']: `option_${option.toString().replace(' ', '_')}`
+        };
+      })
+      .sort((a, b) => {
+        return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+      });
+
+    const selectedOptions = this.props.selectedOptions.map(selectedOption => {
       return {
-        label: option.label,
-        value: option.value,
-        ['data-test-subj']: `option_${option.value.replace(' ', '_')}`
+        label: this.props.formatOptionLabel(selectedOption).toString(),
+        value: selectedOption,
       };
     });
 
@@ -95,7 +109,7 @@ class ListControlUi extends Component {
         isLoading={this.state.isLoading}
         async={this.props.dynamicOptions}
         onSearchChange={this.props.dynamicOptions ? this.onSearchChange : undefined}
-        selectedOptions={this.props.selectedOptions}
+        selectedOptions={selectedOptions}
         onChange={this.handleOnChange}
         singleSelection={!this.props.multiselect}
         data-test-subj={`listControlSelect${this.props.controlIndex}`}
@@ -117,16 +131,12 @@ class ListControlUi extends Component {
   }
 }
 
-const comboBoxOptionShape = PropTypes.shape({
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-});
-
 ListControlUi.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  selectedOptions: PropTypes.arrayOf(comboBoxOptionShape).isRequired,
-  options: PropTypes.arrayOf(comboBoxOptionShape),
+  selectedOptions: PropTypes.array.isRequired,
+  options: PropTypes.array,
+  formatOptionLabel: PropTypes.func.isRequired,
   disableMsg: PropTypes.string,
   multiselect: PropTypes.bool,
   dynamicOptions: PropTypes.bool,

diff --git a/src/core_plugins/input_control_vis/public/components/vis/list_control.test.js b/src/core_plugins/input_control_vis/public/components/vis/list_control.test.js
@@ -25,10 +25,11 @@ import {
   ListControl,
 } from './list_control';
 
-const options = [
-  { label: 'choice1', value: 'choice1' },
-  { label: 'choice2', value: 'choice2' }
-];
+const options = ['choice1', 'choice2'];
+
+const formatOptionLabel = (value) => {
+  return `${value} + formatting`;
+};
 
 let stageFilter;
 
@@ -45,6 +46,7 @@ test('renders ListControl', () => {
     multiselect={true}
     controlIndex={0}
     stageFilter={stageFilter}
+    formatOptionLabel={formatOptionLabel}
   />);
   expect(component).toMatchSnapshot(); // eslint-disable-line
 });
@@ -56,6 +58,7 @@ test('disableMsg', () => {
     multiselect={true}
     controlIndex={0}
     stageFilter={stageFilter}
+    formatOptionLabel={formatOptionLabel}
     disableMsg={'control is disabled to test rendering when disabled'}
   />);
   expect(component).toMatchSnapshot(); // eslint-disable-line

diff --git a/src/core_plugins/input_control_vis/public/control/control.js b/src/core_plugins/input_control_vis/public/control/control.js
@@ -60,7 +60,7 @@ export class Control {
     throw new Error('fetch method not defined, subclass are required to implement');
   }
 
-  format(value) {
+  format = (value) => {
     const field = this.filterManager.getField();
     if (field) {
       return field.format.convert(value);

diff --git a/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.js b/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.js
@@ -29,15 +29,12 @@ export class PhraseFilterManager extends FilterManager {
   /**
    * Convert phrases into filter
    *
-   * @param {array}
+   * @param {array} phrases
    * @return {object} query filter
    *   single phrase: match query
    *   multiple phrases: bool query with should containing list of match_phrase queries
    */
-  createFilter(selectedOptions) {
-    const phrases = selectedOptions.map(phrase => {
-      return phrase.value;
-    });
+  createFilter(phrases) {
     let newFilter;
     if (phrases.length === 1) {
       newFilter = buildPhraseFilter(
@@ -73,10 +70,7 @@ export class PhraseFilterManager extends FilterManager {
     return values
       .reduce((accumulator, currentValue) => {
         return accumulator.concat(currentValue);
-      }, [])
-      .map(value => {
-        return { value, label: value };
-      });
+      }, []);
   }
 
   /**

diff --git a/...ore_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.test.js b/...ore_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.test.js
@@ -47,7 +47,7 @@ describe('PhraseFilterManager', function () {
     });
 
     test('should create match phrase filter from single value', function () {
-      const newFilter = filterManager.createFilter([{ value: 'ios' }]);
+      const newFilter = filterManager.createFilter(['ios']);
       expect(newFilter).to.have.property('meta');
       expect(newFilter.meta.index).to.be(indexPatternId);
       expect(newFilter.meta.controlledBy).to.be(controlId);
@@ -56,7 +56,7 @@ describe('PhraseFilterManager', function () {
     });
 
     test('should create bool filter from multiple values', function () {
-      const newFilter = filterManager.createFilter([{ value: 'ios' }, { value: 'win xp' }]);
+      const newFilter = filterManager.createFilter(['ios', 'win xp']);
       expect(newFilter).to.have.property('meta');
       expect(newFilter.meta.index).to.be(indexPatternId);
       expect(newFilter.meta.controlledBy).to.be(controlId);
@@ -102,7 +102,7 @@ describe('PhraseFilterManager', function () {
           }
         }
       ]);
-      expect(filterManager.getValueFromFilterBar()).to.eql([{ value: 'ios', label: 'ios' }]);
+      expect(filterManager.getValueFromFilterBar()).to.eql(['ios']);
     });
 
     test('should extract value from multiple filters', function () {
@@ -128,7 +128,7 @@ describe('PhraseFilterManager', function () {
           }
         },
       ]);
-      expect(filterManager.getValueFromFilterBar()).to.eql([{ value: 'ios', label: 'ios' }, { value: 'win xp', label: 'win xp' }]);
+      expect(filterManager.getValueFromFilterBar()).to.eql(['ios', 'win xp']);
     });
 
     test('should extract value from bool filter', function () {
@@ -152,7 +152,7 @@ describe('PhraseFilterManager', function () {
           }
         }
       ]);
-      expect(filterManager.getValueFromFilterBar()).to.eql([{ value: 'ios', label: 'ios' }, { value: 'win xp', label: 'win xp' }]);
+      expect(filterManager.getValueFromFilterBar()).to.eql(['ios', 'win xp']);
     });
 
     test('should return undefined when filter value can not be extracted from Kibana filter', function () {

diff --git a/src/core_plugins/input_control_vis/public/control/list_control_factory.js b/src/core_plugins/input_control_vis/public/control/list_control_factory.js
@@ -131,9 +131,7 @@ class ListControl extends Control {
     }
 
     const selectOptions = _.get(resp, 'aggregations.termsAgg.buckets', []).map((bucket) => {
-      return { label: this.format(bucket.key), value: bucket.key.toString() };
-    }).sort((a, b) => {
-      return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+      return bucket.key;
     });
 
     if(selectOptions.length === 0 && !query) {

diff --git a/src/core_plugins/input_control_vis/public/control/list_control_factory.test.js b/src/core_plugins/input_control_vis/public/control/list_control_factory.test.js
@@ -119,16 +119,7 @@ describe('fetch', () => {
 
   test('should set selectOptions to results of terms aggregation', async () => {
     await listControl.fetch();
-    expect(listControl.selectOptions).toEqual([
-      {
-        'label': 'Xi an Xianyang International Airport',
-        'value': 'Xi an Xianyang International Airport',
-      },
-      {
-        'label': 'Zurich Airport',
-        'value': 'Zurich Airport',
-      }
-    ]);
+    expect(listControl.selectOptions).toEqual(['Zurich Airport', 'Xi an Xianyang International Airport']);
   });
 });