Skip to content

Commit

Permalink
giving editor its own state
Browse files Browse the repository at this point in the history
  • Loading branch information
@ppisljar
ppisljar committed Jun 29, 2018
1 parent d1dce9b commit a8c600e
Show file tree
Hide file tree
Showing 42 changed files with 331 additions and 274 deletions.
38 changes: 19 additions & 19 deletions src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
View file
Expand Up @@ -55,65 +55,65 @@ export class ControlsTab extends Component {
}

setVisParam(paramName, paramValue) {
const params = _.cloneDeep(this.props.scope.vis.params);
const params = _.cloneDeep(this.props.scope.editorState.params);
params[paramName] = paramValue;
this.props.stageEditorParams(params);
}

handleLabelChange = (controlIndex, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.scope.editorState.params.controls[controlIndex];
updatedControl.label = evt.target.value;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.scope.editorState.params.controls, controlIndex, updatedControl));
}

handleIndexPatternChange = (controlIndex, indexPatternId) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.scope.editorState.params.controls[controlIndex];
updatedControl.indexPattern = indexPatternId;
updatedControl.fieldName = '';
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.scope.editorState.params.controls, controlIndex, updatedControl));
}

handleFieldNameChange = (controlIndex, fieldName) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.scope.editorState.params.controls[controlIndex];
updatedControl.fieldName = fieldName;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.scope.editorState.params.controls, controlIndex, updatedControl));
}

handleCheckboxOptionChange = (controlIndex, optionName, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.scope.editorState.params.controls[controlIndex];
updatedControl.options[optionName] = evt.target.checked;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.scope.editorState.params.controls, controlIndex, updatedControl));
}

handleNumberOptionChange = (controlIndex, optionName, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.scope.editorState.params.controls[controlIndex];
updatedControl.options[optionName] = parseFloat(evt.target.value);
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.scope.editorState.params.controls, controlIndex, updatedControl));
}

handleRemoveControl = (controlIndex) => {
this.setVisParam('controls', removeControl(this.props.scope.vis.params.controls, controlIndex));
this.setVisParam('controls', removeControl(this.props.scope.editorState.params.controls, controlIndex));
}

moveControl = (controlIndex, direction) => {
this.setVisParam('controls', moveControl(this.props.scope.vis.params.controls, controlIndex, direction));
this.setVisParam('controls', moveControl(this.props.scope.editorState.params.controls, controlIndex, direction));
}

handleAddControl = () => {
this.setVisParam('controls', addControl(this.props.scope.vis.params.controls, newControl(this.state.type)));
this.setVisParam('controls', addControl(this.props.scope.editorState.params.controls, newControl(this.state.type)));
}

handleParentChange = (controlIndex, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.scope.editorState.params.controls[controlIndex];
updatedControl.parent = evt.target.value;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.scope.editorState.params.controls, controlIndex, updatedControl));
}

renderControls() {
const lineageMap = getLineageMap(this.props.scope.vis.params.controls);
return this.props.scope.vis.params.controls.map((controlParams, controlIndex) => {
const lineageMap = getLineageMap(this.props.scope.editorState.params.controls);
return this.props.scope.editorState.params.controls.map((controlParams, controlIndex) => {
const parentCandidates = getParentCandidates(
this.props.scope.vis.params.controls,
this.props.scope.editorState.params.controls,
controlParams.id,
lineageMap);
return (
Expand Down
4 changes: 3 additions & 1 deletion src/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js
View file
Expand Up @@ -49,6 +49,8 @@ const scopeMock = {
savedObjectsClient: savedObjectsClientMock,
indexPatterns: indexPatternsMock
},
},
editorState: {
params: {
'controls': [
{
Expand Down Expand Up @@ -104,7 +106,7 @@ test('add control btn', () => {
return false;
}
return true;
}, 'control not added to vis.params'));
}, 'control not added to editorState.params'));
});

test('remove control btn', () => {
Expand Down
8 changes: 4 additions & 4 deletions src/core_plugins/input_control_vis/public/components/editor/options_tab.js
View file
Expand Up @@ -30,7 +30,7 @@ import {
export class OptionsTab extends Component {

setVisParam = (paramName, paramValue) => {
const params = _.cloneDeep(this.props.scope.vis.params);
const params = _.cloneDeep(this.props.scope.editorState.params);
params[paramName] = paramValue;
this.props.stageEditorParams(params);
}
Expand All @@ -55,7 +55,7 @@ export class OptionsTab extends Component {
>
<EuiSwitch
label="Update Kibana filters on each change"
checked={this.props.scope.vis.params.updateFiltersOnChange}
checked={this.props.scope.editorState.params.updateFiltersOnChange}
onChange={this.handleUpdateFiltersChange}
data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
/>
Expand All @@ -66,7 +66,7 @@ export class OptionsTab extends Component {
>
<EuiSwitch
label="Use time filter"
checked={this.props.scope.vis.params.useTimeFilter}
checked={this.props.scope.editorState.params.useTimeFilter}
onChange={this.handleUseTimeFilter}
data-test-subj="inputControlEditorUseTimeFilterCheckbox"
/>
Expand All @@ -77,7 +77,7 @@ export class OptionsTab extends Component {
>
<EuiSwitch
label="Pin filters to global state"
checked={this.props.scope.vis.params.pinFilters}
checked={this.props.scope.editorState.params.pinFilters}
onChange={this.handlePinFilters}
data-test-subj="inputControlEditorPinFiltersCheckbox"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
View file
Expand Up @@ -26,7 +26,7 @@ import {
} from './options_tab';

const scopeMock = {
vis: {
editorState: {
params: {
updateFiltersOnChange: false,
useTimeFilter: false
Expand Down
56 changes: 28 additions & 28 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
View file
Expand Up @@ -7,7 +7,7 @@
<select
id="gaugeType"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.gaugeType"
ng-model="editorState.params.gauge.gaugeType"
ng-options="mode for mode in collections.gaugeTypes"
></select>
</div>
Expand All @@ -18,16 +18,16 @@
Percentage Mode
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="vis.params.gauge.percentageMode">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.gauge.percentageMode">
</div>
</div>

<div class="kuiSideBarFormRow" ng-hide="vis.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-hide="editorState.params.gauge.type === 'simple'">
<label class="kuiSideBarFormRow__label" for="verticalSplit">
Vertical Split
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="vis.params.gauge.verticalSplit">&nbsp;
<input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="editorState.params.gauge.verticalSplit">&nbsp;
<icon-tip
content="'Shows gauges one under another'"
position="'right'"
Expand All @@ -41,7 +41,7 @@
</label>

<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="displayWarnings" type="checkbox" ng-model="vis.params.isDisplayWarning">
<input class="kuiCheckBox" id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
&nbsp;
<icon-tip
content="'Turns on/off warnings. When turned on, a warning will be shown if not all labels could be displayed.'"
Expand All @@ -55,7 +55,7 @@
Show Legend
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="addLegend" type="checkbox" ng-model="vis.params.addLegend">
<input class="kuiCheckBox" id="addLegend" type="checkbox" ng-model="editorState.params.addLegend">
</div>
</div>

Expand All @@ -64,34 +64,34 @@
Show Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.gauge.labels.show">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.gauge.labels.show">
</div>
</div>

<div class="kuiSideBarFormRow" ng-show="vis.params.gauge.labels.show">
<div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.labels.show">
<label class="kuiSideBarFormRow__label" for="subText">
Sub Text
</label>
<div class="kuiSideBarFormRow__control">
<input
id="subText"
class="kuiInput kuiSideBarInput"
ng-model="vis.params.gauge.style.subText"
ng-model="editorState.params.gauge.style.subText"
type="text"
>
</div>
</div>

<div
class="kuiSideBarFormRow"
ng-hide="vis.params.gauge.type === 'simple'"
ng-show="vis.params.gauge.colorsRange.length > 1"
ng-hide="editorState.params.gauge.type === 'simple'"
ng-show="editorState.params.gauge.colorsRange.length > 1"
>
<label class="kuiSideBarFormRow__label" for="extendRange">
Auto Extend Range
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="vis.params.gauge.extendRange">
<input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="editorState.params.gauge.extendRange">
&nbsp;
<icon-tip
content="'Extends range to the maximum value in your data'"
Expand Down Expand Up @@ -123,7 +123,7 @@

<div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.gauge.colorsRange.length">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.gauge.colorsRange.length">
<tr>
<th scope="col">
<label id="gaugeOptionsCustomRangeFrom">From</label>
Expand All @@ -133,7 +133,7 @@
</th>
</tr>

<tr ng-repeat="range in vis.params.gauge.colorsRange track by $index">
<tr ng-repeat="range in editorState.params.gauge.colorsRange track by $index">
<td>
<input
aria-labelledby="gaugeOptionsCustomRangeFrom"
Expand All @@ -160,15 +160,15 @@
<button
type="button"
ng-click="removeRange($index)"
ng-show="vis.params.gauge.colorsRange.length > 1"
ng-show="editorState.params.gauge.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</table>

<div class="hintbox" ng-show="!vis.params.gauge.colorsRange.length">
<div class="hintbox" ng-show="!editorState.params.gauge.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<strong>Required:</strong> You must specify at least one range.
Expand All @@ -185,7 +185,7 @@
</div>
</div>
</div>
<div ng-show="vis.params.gauge.colorsRange.length > 1">
<div ng-show="editorState.params.gauge.colorsRange.length > 1">
<div class="kuiSideBarCollapsibleTitle">
<div
kbn-accessible-click
Expand Down Expand Up @@ -218,7 +218,7 @@
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.colorSchema"
ng-model="editorState.params.gauge.colorSchema"
ng-options="mode for mode in collections.colorSchemas"
></select>
</div>
Expand All @@ -230,7 +230,7 @@
Reverse Color Schema
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="vis.params.gauge.invertColors">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.gauge.invertColors">
</div>
</div>
</div>
Expand Down Expand Up @@ -263,25 +263,25 @@
<div id="gaugeOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">

<div class="kuiSideBarSection">
<div ng-hide="vis.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-show="vis.params.gauge.colorsRange.length > 1">
<div ng-hide="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.colorsRange.length > 1">
<label class="kuiSideBarFormRow__label" for="labelColor">
Color Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="vis.params.gauge.style.labelColor">
<input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="editorState.params.gauge.style.labelColor">
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showScale">
Show Scale
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="vis.params.gauge.scale.show">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="editorState.params.gauge.scale.show">
</div>
</div>
</div>
<div ng-show="vis.params.gauge.type === 'simple'">
<div ng-show="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="gaugeColorMode">
Color
Expand All @@ -290,7 +290,7 @@
<select
id="gaugeColorMode"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.gaugeColorMode"
ng-model="editorState.params.gauge.gaugeColorMode"
ng-options="mode for mode in collections.gaugeColorMode"
></select>
</div>
Expand All @@ -303,16 +303,16 @@
<input
id="backTextColor"
class="kuiInput kuiSideBarInput"
ng-model="vis.params.gauge.style.bgFill"
ng-model="editorState.params.gauge.style.bgFill"
>
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showScale">
Font Size (<span ng-bind="vis.params.gauge.style.fontSize"></span>pt)
Font Size (<span ng-bind="editorState.params.gauge.style.fontSize"></span>pt)
</label>
<div class="kuiSideBarFormRow__control">
<input type="range" ng-model="vis.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
<input type="range" ng-model="editorState.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
</div>
</div>
</div>
Expand Down

0 comments on commit a8c600e

Please sign in to comment.