maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[TSVB] [Markdown] markdown section do not render after change data parameter (#41576)

Browse source 
* [TSVB] [Markdown] markdown section do not render after change data parameter

* fix grammar
This commit is contained in:
Alexey Antonov 2019-07-22 15:52:07 +03:00 committed by GitHub
parent 2a8ddb9603
commit 1061f69d45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 47 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/legacy/core_plugins/metrics/public/components/index_pattern.js
View file

@ -17,6 +17,7 @@
* under the License.
*/
import { get } from 'lodash';
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import {
@ -44,7 +45,7 @@ import { i18n } from '@kbn/i18n';
import { TIME_RANGE_DATA_MODES, TIME_RANGE_MODE_KEY } from '../../common/timerange_data_modes';
import { PANEL_TYPES } from '../../common/panel_types';
import { isTimerangeModeEnabled } from '../lib/check_ui_restrictions';
import { UIRestrictionsContext } from '../contexts/ui_restriction_context';
import { VisDataContext } from '../contexts/vis_data_context';
const RESTRICT_FIELDS = [ES_TYPES.DATE];
@ -72,7 +73,7 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
const intervalName = `${prefix}interval`;
const dropBucketName = `${prefix}drop_last_bucket`;
const updateControlValidity = useContext(FormValidationContext);
const uiRestrictions = useContext(UIRestrictionsContext);
const uiRestrictions = get(useContext(VisDataContext), 'uiRestrictions');
const timeRangeOptions = [
{

26
src/legacy/core_plugins/metrics/public/components/markdown_editor.js
View file

@ -35,25 +35,6 @@ import { EuiText, EuiCodeBlock, EuiSpacer, EuiTitle, EuiCodeEditor } from '@elas
import { FormattedMessage } from '@kbn/i18n/react';
export class MarkdownEditor extends Component {
state = {
visData: null,
};
subscription = null;
componentDidMount() {
if (this.props.visData$) {
this.subscription = this.props.visData$.subscribe(visData => {
this.setState({ visData });
});
}
}
componentWillUnmount() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
handleChange = value => {
this.props.onChange({ markdown: value });
};
@ -69,11 +50,12 @@ export class MarkdownEditor extends Component {
}
render() {
const { visData } = this.state;
const { visData, model, dateFormat } = this.props;
if (!visData) {
return null;
}
const { model, dateFormat } = this.props;
const series = _.get(visData, `${model.id}.series`, []);
const variables = convertSeriesToVars(series, model, dateFormat, this.props.getConfig);
const rows = [];
@ -228,5 +210,5 @@ MarkdownEditor.propTypes = {
onChange: PropTypes.func,
model: PropTypes.object,
dateFormat: PropTypes.string,
visData$: PropTypes.object,
visData: PropTypes.object,
};

13
src/legacy/core_plugins/metrics/public/components/panel_config.js
View file

@ -18,7 +18,6 @@
*/
import PropTypes from 'prop-types';
import React, { useState, useEffect } from 'react';
import { get } from 'lodash';
import { TimeseriesPanelConfig as timeseries } from './panel_config/timeseries';
import { MetricPanelConfig as metric } from './panel_config/metric';
import { TopNPanelConfig as topN } from './panel_config/top_n';
@ -27,7 +26,7 @@ import { GaugePanelConfig as gauge } from './panel_config/gauge';
import { MarkdownPanelConfig as markdown } from './panel_config/markdown';
import { FormattedMessage } from '@kbn/i18n/react';
import { FormValidationContext } from '../contexts/form_validation_context';
import { UIRestrictionsContext } from '../contexts/ui_restriction_context';
import { VisDataContext } from '../contexts/vis_data_context';
const types = {
timeseries,
@ -45,16 +44,14 @@ export function PanelConfig(props) {
const { model } = props;
const Component = types[model.type];
const [formValidationResults] = useState({});
const [uiRestrictions, setUIRestrictions] = useState(null);
const [visData, setVisData] = useState({});
useEffect(() => {
model.isModelInvalid = !checkModelValidity(formValidationResults);
});
useEffect(() => {
const visDataSubscription = props.visData$.subscribe(visData =>
setUIRestrictions(get(visData, 'uiRestrictions', null))
);
const visDataSubscription = props.visData$.subscribe((visData = {}) => setVisData(visData));
return function cleanup() {
visDataSubscription.unsubscribe();
@ -68,9 +65,9 @@ export function PanelConfig(props) {
if (Component) {
return (
<FormValidationContext.Provider value={updateControlValidity}>
<UIRestrictionsContext.Provider value={uiRestrictions}>
<VisDataContext.Provider value={visData}>
<Component {...props} />
</UIRestrictionsContext.Provider>
</VisDataContext.Provider>
</FormValidationContext.Provider>
);
}

2
src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js
View file

@ -116,7 +116,6 @@ class GaugePanelConfigUi extends Component {
limit={1}
model={this.props.model}
name={this.props.name}
visData$={this.props.visData$}
onChange={this.props.onChange}
/>
);
@ -349,7 +348,6 @@ GaugePanelConfigUi.propTypes = {
fields: PropTypes.object,
model: PropTypes.object,
onChange: PropTypes.func,
visData$: PropTypes.object,
};
export const GaugePanelConfig = injectI18n(GaugePanelConfigUi);

9
src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js
View file

@ -47,6 +47,7 @@ import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { Storage } from 'ui/storage';
import { data } from 'plugins/data/setup';
import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
import { VisDataContext } from './../../contexts/vis_data_context';
const { QueryBarInput } = data.query.ui;
const localStorage = new Storage(window.localStorage);
@ -112,7 +113,11 @@ class MarkdownPanelConfigUi extends Component {
});
let view;
if (selectedTab === 'markdown') {
view = <MarkdownEditor {...this.props} />;
view = (
<VisDataContext.Consumer>
{visData => <MarkdownEditor visData={visData} {...this.props} />}
</VisDataContext.Consumer>
);
} else if (selectedTab === 'data') {
view = (
<SeriesEditor
@ -120,7 +125,6 @@ class MarkdownPanelConfigUi extends Component {
fields={this.props.fields}
model={this.props.model}
name={this.props.name}
visData$={this.props.visData$}
onChange={this.props.onChange}
/>
);
@ -327,7 +331,6 @@ MarkdownPanelConfigUi.propTypes = {
model: PropTypes.object,
onChange: PropTypes.func,
dateFormat: PropTypes.string,
visData$: PropTypes.object,
};
export const MarkdownPanelConfig = injectI18n(MarkdownPanelConfigUi);

2
src/legacy/core_plugins/metrics/public/components/panel_config/metric.js
View file

@ -81,7 +81,6 @@ export class MetricPanelConfig extends Component {
limit={2}
model={this.props.model}
name={this.props.name}
visData$={this.props.visData$}
onChange={this.props.onChange}
/>
);
@ -194,5 +193,4 @@ MetricPanelConfig.propTypes = {
fields: PropTypes.object,
model: PropTypes.object,
onChange: PropTypes.func,
visData$: PropTypes.object,
};

2
src/legacy/core_plugins/metrics/public/components/panel_config/table.js
View file

@ -173,7 +173,6 @@ export class TablePanelConfig extends Component {
fields={this.props.fields}
model={this.props.model}
name={this.props.name}
visData$={this.props.visData$}
onChange={this.props.onChange}
/>
</div>
@ -291,5 +290,4 @@ TablePanelConfig.propTypes = {
fields: PropTypes.object,
model: PropTypes.object,
onChange: PropTypes.func,
visData$: PropTypes.object,
};

2
src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
View file

@ -144,7 +144,6 @@ class TimeseriesPanelConfigUi extends Component {
fields={this.props.fields}
model={this.props.model}
name={this.props.name}
visData$={this.props.visData$}
onChange={this.props.onChange}
/>
);
@ -400,7 +399,6 @@ TimeseriesPanelConfigUi.propTypes = {
fields: PropTypes.object,
model: PropTypes.object,
onChange: PropTypes.func,
visData$: PropTypes.object,
};
export const TimeseriesPanelConfig = injectI18n(TimeseriesPanelConfigUi);

2
src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js
View file

@ -84,7 +84,6 @@ export class TopNPanelConfig extends Component {
fields={this.props.fields}
model={this.props.model}
name={this.props.name}
visData$={this.props.visData$}
onChange={this.props.onChange}
/>
);
@ -249,5 +248,4 @@ TopNPanelConfig.propTypes = {
fields: PropTypes.object,
model: PropTypes.object,
onChange: PropTypes.func,
visData$: PropTypes.object,
};

50
src/legacy/core_plugins/metrics/public/components/series.js
View file

@ -28,6 +28,7 @@ import { TableSeries as table } from './vis_types/table/series';
import { GaugeSeries as gauge } from './vis_types/gauge/series';
import { MarkdownSeries as markdown } from './vis_types/markdown/series';
import { FormattedMessage } from '@kbn/i18n/react';
import { VisDataContext } from '../contexts/vis_data_context';
const lookup = {
top_n: topN,
@ -76,29 +77,33 @@ export class Series extends Component {
const { panel } = this.props;
const Component = lookup[panel.type];
const params = {
className: this.props.className,
disableAdd: this.props.disableAdd,
disableDelete: this.props.disableDelete,
fields: this.props.fields,
name: this.props.name,
onAdd: this.props.onAdd,
onChange: this.handleChange,
onClone: this.props.onClone,
onDelete: this.props.onDelete,
model: this.props.model,
panel: this.props.panel,
selectedTab: this.state.selectedTab,
style: this.props.style,
switchTab: this.switchTab,
toggleVisible: this.toggleVisible,
togglePanelActivation: this.togglePanelActivation,
visible: this.state.visible,
dragHandleProps: this.props.dragHandleProps,
indexPatternForQuery: panel.index_pattern || panel.default_index_pattern,
};
return Boolean(Component) ? (
<Component {...params} />
<VisDataContext.Consumer>
{visData => (
<Component
className={this.props.className}
disableAdd={this.props.disableAdd}
uiRestrictions={visData.uiRestrictions}
disableDelete={this.props.disableDelete}
fields={this.props.fields}
name={this.props.name}
onAdd={this.props.onAdd}
onChange={this.handleChange}
onClone={this.props.onClone}
onDelete={this.props.onDelete}
model={this.props.model}
panel={this.props.panel}
selectedTab={this.state.selectedTab}
style={this.props.style}
switchTab={this.switchTab}
toggleVisible={this.toggleVisible}
togglePanelActivation={this.togglePanelActivation}
visible={this.state.visible}
dragHandleProps={this.props.dragHandleProps}
indexPatternForQuery={panel.index_pattern || panel.default_index_pattern}
/>
)}
</VisDataContext.Consumer>
) : (
<FormattedMessage
id="tsvb.seriesConfig.missingSeriesComponentDescription"
@ -125,6 +130,5 @@ Series.propTypes = {
onDelete: PropTypes.func,
model: PropTypes.object,
panel: PropTypes.object,
visData$: PropTypes.object,
dragHandleProps: PropTypes.object,
};

2
src/legacy/core_plugins/metrics/public/components/series_editor.js
View file

@ -101,7 +101,6 @@ export class SeriesEditor extends Component {
onChange={doc => handleChange(this.props, doc)}
onClone={() => this.handleClone(row)}
onDelete={() => handleDelete(this.props, row)}
visData$={this.props.visData$}
model={row}
panel={model}
dragHandleProps={provided.dragHandleProps}
@ -128,5 +127,4 @@ SeriesEditor.propTypes = {
model: PropTypes.object,
name: PropTypes.string,
onChange: PropTypes.func,
visData$: PropTypes.object,
};

2
src/legacy/core_plugins/metrics/public/contexts/ui_restriction_context.js → src/legacy/core_plugins/metrics/public/contexts/vis_data_context.js
View file

@ -19,4 +19,4 @@
import React from 'react';
export const UIRestrictionsContext = React.createContext();
export const VisDataContext = React.createContext({});

3
test/functional/apps/visualize/_tsvb_markdown.ts
View file

@ -37,8 +37,7 @@ export default function({ getPageObjects }: FtrProviderContext) {
});
}
// FAILING: https://github.com/elastic/kibana/issues/41452
describe.skip('visual builder', function describeIndexTests() {
describe('visual builder', function describeIndexTests() {
describe('markdown', () => {
before(async () => {
await visualBuilder.resetPage();