Input Control visualization (elastic#13314)

* react editor example

* ensure props are not updated

* use new stageEditorParams method to stage parameter changes

* make component stateless

* use terms_vis_editor component

* get add button to work

* update vis controller to display terms input controls

* update componenent when query bar updates

* add functional test

* lay ground work for different control types in single visulization

* make editors for range and text controls

* text control

* implement type ahead suggestor for text control

* add range slider

* some CSS work

* add submit button, move control init functionallity under control_factory

* add custom options for control types

* provide buttons to move controls up and down

* Make ControlEditor component and clean up styling of editor

* styling work

* multi select for terms dropdown control

* add option to disable filter staging, only enable submit button when filters are staged

* clean up range styling

* rename top level vis folder

* cleanup

* move control type select out of each control editor

* dark theme styling

* use ui/public/filter_manager/lib/phrases.js to build phrases filter, add tests to range filter manager

* use savedObjectsClient to get index patterns

* remove text control and add id to controls for react tracking

* ensure fields get updated when index pattern changes

* update PropTypes for react 15.6.1

* update to latest react-select to avoid isMounted deprecation warnings

* fix input controls functional test

* rename termsControl to listControl to be more generic

* add function test for clear button, refactor directory structure

* functional tests for updateFiltersOnChange is true

* fix react-select clipping problem in dashboard

* try clicking option instead of pressing enter to set react-select value in functional tests

* react-select css

* clean up control_editor component, make ListControlEditor component be function

* add jest test for vis_editor component and accessibility

* add decimal places option to range slider

* add jest test for InputControlVis component

* add default to switch blocks, split editor into seperate tabs, use shallow in snapshot tests

* fix race condition in field_select, update index_pattern_select to fetch indexPatterns on each filter

* clean up control initialization

* use htmlIdGenerator to avoid html element id conflicts

* update functional test to support new editor tabs

* finish jest tests for sub componenets

* mark vis as experimental, refactor buttons for better usability

* fix bug in list control where unable to select options containing numbers and options containing commas. Truncate display of long list options

* fix chart types functional test

* fix jest tests, add margin to action buttons

* remove binds from render functions

* experement with native input range sliders

* Revert "experement with native input range sliders"

This reverts commit aed599e.

* Use Promise.resolve in tests and replace _createRequest with searchSource.fetch

* add inputs to range control

package.json

@@ -172,11 +172,12 @@
  "react-color": "2.11.7",
  "react-dom": "15.6.1",
  "react-input-autosize": "1.1.0",
+ "react-input-range": "1.2.1",
  "react-markdown": "2.4.2",
  "react-redux": "4.4.5",
  "react-router": "2.0.0",
  "react-router-redux": "4.0.4",
- "react-select": "1.0.0-rc.1",
+ "react-select": "1.0.0-rc.5",
  "react-sortable": "1.1.0",
  "react-test-renderer": "15.6.1",
  "react-toggle": "3.0.1",

src/core_plugins/input_control_vis/index.js

@@ -0,0 +1,9 @@
+export default function (kibana) {
+ return new kibana.Plugin({
+ uiExports: {
+ visTypes: [
+ 'plugins/input_control_vis/register_vis'
+ ]
+ }
+ });
+}

src/core_plugins/input_control_vis/package.json

@@ -0,0 +1,4 @@
+{
+ "name": "input_control_vis",
+ "version": "kibana"
+}

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ControlsTab 1`] = `
+<div>
+ <ControlEditor
+ controlIndex={0}
+ controlParams={
+ Object {
+ "fieldName": "keywordField",
+ "id": "1",
+ "indexPattern": "indexPattern1",
+ "label": "custom label",
+ "options": Object {
+ "multiselect": true,
+ "order": "desc",
+ "size": 5,
+ "type": "terms",
+ },
+ "type": "list",
+ }
+ }
+ getIndexPattern={[Function]}
+ getIndexPatterns={[Function]}
+ handleCheckboxOptionChange={[Function]}
+ handleFieldNameChange={[Function]}
+ handleIndexPatternChange={[Function]}
+ handleLabelChange={[Function]}
+ handleNumberOptionChange={[Function]}
+ handleRemoveControl={[Function]}
+ moveControl={[Function]}
+ />
+ <ControlEditor
+ controlIndex={1}
+ controlParams={
+ Object {
+ "fieldName": "numberField",
+ "id": "2",
+ "indexPattern": "indexPattern1",
+ "label": "",
+ "options": Object {
+ "step": 1,
+ },
+ "type": "range",
+ }
+ }
+ getIndexPattern={[Function]}
+ getIndexPatterns={[Function]}
+ handleCheckboxOptionChange={[Function]}
+ handleFieldNameChange={[Function]}
+ handleIndexPatternChange={[Function]}
+ handleLabelChange={[Function]}
+ handleNumberOptionChange={[Function]}
+ handleRemoveControl={[Function]}
+ moveControl={[Function]}
+ />
+ <div
+ className="kuiSideBarFormRow"
+ >
+ <div
+ className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
+ >
+ <select
+ aria-label="Select control type"
+ className="kuiSelect"
+ onChange={[Function]}
+ value="list"
+ >
+ <option
+ value="range"
+ >
+ Range slider
+ </option>
+ <option
+ value="list"
+ >
+ Options list
+ </option>
+ </select>
+ </div>
+ <KuiButton
+ buttonType="primary"
+ data-test-subj="inputControlEditorAddBtn"
+ icon={
+ <KuiButtonIcon
+ type="create"
+ />
+ }
+ onClick={[Function]}
+ type="button"
+ >
+ Add
+ </KuiButton>
+ </div>
+</div>
+`;

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ListControlEditor 1`] = `
+<div>
+ <IndexPatternSelect
+ getIndexPatterns={[Function]}
+ onChange={[Function]}
+ value="indexPattern1"
+ />
+ <FieldSelect
+ filterField={[Function]}
+ getIndexPattern={[Function]}
+ indexPatternId="indexPattern1"
+ onChange={[Function]}
+ value="keywordField"
+ />
+ <div
+ className="kuiSideBarFormRow"
+ >
+ <label
+ className="kuiSideBarFormRow__label"
+ htmlFor="multiselect-0"
+ >
+ Enable Multiselect
+ </label>
+ <div
+ className="kuiSideBarFormRow__control"
+ >
+ <input
+ checked={true}
+ className="kuiCheckBox"
+ id="multiselect-0"
+ onChange={[Function]}
+ type="checkbox"
+ />
+ </div>
+ </div>
+ <div
+ className="kuiSideBarFormRow"
+ >
+ <label
+ className="kuiSideBarFormRow__label"
+ htmlFor="size-0"
+ >
+ Size
+ </label>
+ <div
+ className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
+ >
+ <input
+ className="kuiTextInput"
+ id="size-0"
+ min="1"
+ onChange={[Function]}
+ type="number"
+ value={10}
+ />
+ </div>
+ </div>
+</div>
+`;

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders OptionsTab 1`] = `
+<div>
+ <div
+ className="sidebar-item"
+ >
+ <div
+ className="vis-editor-agg-header"
+ >
+ <KuiFieldGroup
+ isAlignedTop={false}
+ >
+ <KuiFieldGroupSection
+ isWide={false}
+ >
+ <label>
+ <input
+ checked={false}
+ className="kuiCheckBox"
+ data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
+ onChange={[Function]}
+ type="checkbox"
+ />
+ Update kibana filters on each change
+ </label>
+ </KuiFieldGroupSection>
+ </KuiFieldGroup>
+ </div>
+ </div>
+</div>
+`;

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders RangeControlEditor 1`] = `
+<div>
+ <IndexPatternSelect
+ getIndexPatterns={[Function]}
+ onChange={[Function]}
+ value="indexPattern1"
+ />
+ <FieldSelect
+ filterField={[Function]}
+ getIndexPattern={[Function]}
+ indexPatternId="indexPattern1"
+ onChange={[Function]}
+ value="numberField"
+ />
+ <div
+ className="kuiSideBarFormRow"
+ >
+ <label
+ className="kuiSideBarFormRow__label"
+ htmlFor="stepSize-0"
+ >
+ Step Size
+ </label>
+ <div
+ className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
+ >
+ <input
+ className="kuiTextInput"
+ id="stepSize-0"
+ onChange={[Function]}
+ type="number"
+ value={1}
+ />
+ </div>
+ </div>
+ <div
+ className="kuiSideBarFormRow"
+ >
+ <label
+ className="kuiSideBarFormRow__label"
+ htmlFor="decimalPlaces-0"
+ >
+ Decimal Places
+ </label>
+ <div
+ className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
+ >
+ <input
+ className="kuiTextInput"
+ id="decimalPlaces-0"
+ min="0"
+ onChange={[Function]}
+ type="number"
+ value={0}
+ />
+ </div>
+ </div>
+</div>
+`;