Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes visualization editor selection being reset #30073

Merged
merged 14 commits into from
Mar 4, 2019
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,9 @@ class VisController {
this.vis.API.queryFilter.on('update', this.queryBarUpdateHandler);
}

async render(visData, status) {
if (status.params || (this.vis.params.useTimeFilter && status.time)) {
async render(visData, visParams, status) {
if (status.params || (visParams.useTimeFilter && status.time)) {
this.visParams = visParams;
this.controls = [];
this.controls = await this.initControls();
this.drawVis();
Expand All @@ -53,7 +54,7 @@ class VisController {
render(
<I18nContext>
<InputControlVis
updateFiltersOnChange={this.vis.params.updateFiltersOnChange}
updateFiltersOnChange={this.visParams.updateFiltersOnChange}
controls={this.controls}
stageFilter={this.stageFilter}
submitFilters={this.submitFilters}
Expand All @@ -68,14 +69,14 @@ class VisController {
}

async initControls() {
const controlParamsList = this.vis.params.controls.filter((controlParams) => {
const controlParamsList = this.visParams.controls.filter((controlParams) => {
// ignore controls that do not have indexPattern or field
return controlParams.indexPattern && controlParams.fieldName;
});

const controlFactoryPromises = controlParamsList.map((controlParams) => {
const factory = controlFactory(controlParams);
return factory(controlParams, this.vis.API, this.vis.params.useTimeFilter);
return factory(controlParams, this.vis.API, this.visParams.useTimeFilter);
});
const controls = await Promise.all(controlFactoryPromises);

Expand Down Expand Up @@ -104,7 +105,7 @@ class VisController {

stageFilter = async (controlIndex, newValue) => {
this.controls[controlIndex].set(newValue);
if (this.vis.params.updateFiltersOnChange) {
if (this.visParams.updateFiltersOnChange) {
// submit filters on each control change
this.submitFilters();
} else {
Expand Down Expand Up @@ -143,7 +144,7 @@ class VisController {
});
});

this.vis.API.queryFilter.addFilters(newFilters, this.vis.params.pinFilters);
this.vis.API.queryFilter.addFilters(newFilters, this.visParams.pinFilters);
}

clearControls = async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,9 @@ class MarkdownVisComponent extends Component {
export function MarkdownVisWrapper(props) {
return (
<MarkdownVisComponent
fontSize={props.vis.params.fontSize}
markdown={props.vis.params.markdown}
openLinksInNewTab={props.vis.params.openLinksInNewTab}
fontSize={props.visParams.fontSize}
markdown={props.visParams.markdown}
openLinksInNewTab={props.visParams.openLinksInNewTab}
renderComplete={props.renderComplete}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('markdown vis controller', () => {
}
};

const wrapper = render(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
const wrapper = render(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={jest.fn()}/>);
expect(wrapper.find('a').text()).toBe('markdown');
});

Expand All @@ -40,7 +40,7 @@ describe('markdown vis controller', () => {
}
};

const wrapper = render(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
const wrapper = render(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={jest.fn()}/>);
expect(wrapper.text()).toBe('Testing <a>html</a>\n');
});

Expand All @@ -51,7 +51,7 @@ describe('markdown vis controller', () => {
}
};

const wrapper = mount(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
const wrapper = mount(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={jest.fn()}/>);
expect(wrapper.text().trim()).toBe('Initial');
vis.params.markdown = 'Updated';
wrapper.setProps({ vis });
Expand All @@ -66,7 +66,7 @@ describe('markdown vis controller', () => {
}
};
const renderComplete = jest.fn();
mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
mount(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete}/>);
expect(renderComplete.mock.calls.length).toBe(1);
});

Expand All @@ -77,11 +77,11 @@ describe('markdown vis controller', () => {
}
};
const renderComplete = jest.fn();
mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
mount(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete}/>);
expect(renderComplete.mock.calls.length).toBe(1);
renderComplete.mockClear();
vis.params.markdown = 'changed';
mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
mount(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete}/>);
expect(renderComplete.mock.calls.length).toBe(1);
});

Expand All @@ -92,10 +92,10 @@ describe('markdown vis controller', () => {
}
};
const renderComplete = jest.fn();
mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
mount(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete}/>);
expect(renderComplete.mock.calls.length).toBe(1);
renderComplete.mockClear();
mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
mount(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete}/>);
expect(renderComplete.mock.calls.length).toBe(1);
});
});
Expand Down
16 changes: 11 additions & 5 deletions src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,22 @@ describe('metric vis', () => {
aggs: [{ id: '1', type: 'top_hits', schema: 'metric', params: { field: 'ip' } }],
});

vis.params.metric.metrics = [{ accessor: 0, format: { id: 'url', params: {
urlTemplate: 'http://ip.info?address={{value}}',
labelTemplate: 'ip[{{value}}]'
} } }];
vis.params.dimensions = {
metrics: [{
accessor: 0, format: {
id: 'url', params: {
urlTemplate: 'http://ip.info?address={{value}}',
labelTemplate: 'ip[{{value}}]'
}
}
}]
};

const el = document.createElement('div');
const Controller = metricVisType.visualization;
const controller = new Controller(el, vis);
const render = (esResponse) => {
controller.render(esResponse);
controller.render(esResponse, vis.params);
};

return { el, render };
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,17 @@ describe('metric vis controller', function () {
{ from: 0, to: 1000 }
],
style: {},
}, dimensions: {
metrics: [{ accessor: 0 }],
bucket: null,
metrics: [{ accessor: 0 }]
}
}
};

let metricController;

beforeEach(() => {
metricController = new MetricVisComponent({ vis: vis });
metricController = new MetricVisComponent({ vis: vis, visParams: vis.params });
});

it('should set the metric label and value', function () {
Expand All @@ -54,7 +55,7 @@ describe('metric vis controller', function () {
});

it('should support multi-value metrics', function () {
vis.params.metric.metrics.push({ accessor: 1 });
vis.params.dimensions.metrics.push({ accessor: 1 });
const metrics = metricController._processTableGroups({
columns: [
{ id: 'col-0', name: '1st percentile of bytes' },
Expand Down
27 changes: 14 additions & 13 deletions src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { MetricVisValue } from './components/metric_vis_value';
export class MetricVisComponent extends Component {

_getLabels() {
const config = this.props.vis.params.metric;
const config = this.props.visParams.metric;
const isPercentageMode = config.percentageMode;
const colorsRange = config.colorsRange;
const max = _.last(colorsRange).to;
Expand All @@ -43,7 +43,7 @@ export class MetricVisComponent extends Component {
}

_getColors() {
const config = this.props.vis.params.metric;
const config = this.props.visParams.metric;
const invertColors = config.invertColors;
const colorSchema = config.colorSchema;
const colorsRange = config.colorsRange;
Expand All @@ -58,7 +58,7 @@ export class MetricVisComponent extends Component {
}

_getBucket(val) {
const config = this.props.vis.params.metric;
const config = this.props.visParams.metric;
let bucket = _.findIndex(config.colorsRange, range => {
return range.from <= val && range.to > val;
});
Expand Down Expand Up @@ -91,7 +91,8 @@ export class MetricVisComponent extends Component {
};

_processTableGroups(table) {
const config = this.props.vis.params.metric;
const config = this.props.visParams.metric;
const dimensions = this.props.visParams.dimensions;
const isPercentageMode = config.percentageMode;
const min = config.colorsRange[0].from;
const max = _.last(config.colorsRange).to;
Expand All @@ -102,12 +103,12 @@ export class MetricVisComponent extends Component {
let bucketColumnId;
let bucketFormatter;

if (config.bucket) {
bucketColumnId = table.columns[config.bucket.accessor].id;
bucketFormatter = getFormat(config.bucket.format);
if (dimensions.bucket) {
bucketColumnId = table.columns[dimensions.bucket.accessor].id;
bucketFormatter = getFormat(dimensions.bucket.format);
}

config.metrics.forEach(metric => {
dimensions.metrics.forEach(metric => {
const columnIndex = metric.accessor;
const column = table.columns[columnIndex];
const formatter = getFormat(metric.format);
Expand Down Expand Up @@ -146,22 +147,22 @@ export class MetricVisComponent extends Component {
}

_filterBucket = (metric) => {
const config = this.props.vis.params.metric;
if (!config.bucket) {
const dimensions = this.props.visParams.dimensions;
if (!dimensions.bucket) {
return;
}
const table = this.props.visData;
this.props.vis.API.events.filter({ table, column: config.bucket.accessor, row: metric.rowIndex });
this.props.vis.API.events.filter({ table, column: dimensions.bucket.accessor, row: metric.rowIndex });
};

_renderMetric = (metric, index) => {
return (
<MetricVisValue
key={index}
metric={metric}
fontSize={this.props.vis.params.metric.style.fontSize}
fontSize={this.props.visParams.metric.style.fontSize}
onFilter={metric.filterKey && metric.bucketAgg ? this._filterBucket : null}
showLabel={this.props.vis.params.metric.labels.show}
showLabel={this.props.visParams.metric.labels.show}
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ class VisEditor extends Component {
const { vis } = props;
this.appState = vis.API.getAppState();
this.state = {
model: props.vis.params,
model: props.visParams,
dirty: false,
autoApply: true,
visFields: {},
Expand Down Expand Up @@ -108,7 +108,7 @@ class VisEditor extends Component {

render() {
if (!this.props.isEditorMode) {
if (!this.props.vis.params || !this.props.visData) {
if (!this.props.visParams || !this.props.visData) {
return null;
}
return (
Expand All @@ -118,7 +118,7 @@ class VisEditor extends Component {
onUiState={this.handleUiState}
uiState={this.props.vis.getUiState()}
fields={this.state.visFields}
model={this.props.vis.params}
model={this.props.visParams}
visData={this.props.visData}
getConfig={this.getConfig}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function ReactEditorControllerProvider(Private, config) {
<Component
config={config}
vis={this.vis}
visParams={this.vis.params}
savedObj={this.savedObj}
timeRange={params.timeRange}
renderComplete={() => {}}
Expand All @@ -46,11 +47,7 @@ function ReactEditorControllerProvider(Private, config) {
this.el);
}

resize() {
if (this.visData) {
this.render(this.visData);
}
}
resize() {}

destroy() {
unmountComponentAtNode(this.el);
Expand Down
Loading