diff --git a/src/legacy/core_plugins/metrics/public/components/index_pattern.js b/src/legacy/core_plugins/metrics/public/components/index_pattern.js index a7a7d14ea9940d..3adbbb9bbf0780 100644 --- a/src/legacy/core_plugins/metrics/public/components/index_pattern.js +++ b/src/legacy/core_plugins/metrics/public/components/index_pattern.js @@ -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 = [ { diff --git a/src/legacy/core_plugins/metrics/public/components/markdown_editor.js b/src/legacy/core_plugins/metrics/public/components/markdown_editor.js index 5d0696b32d4c90..9fb766f174c487 100644 --- a/src/legacy/core_plugins/metrics/public/components/markdown_editor.js +++ b/src/legacy/core_plugins/metrics/public/components/markdown_editor.js @@ -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, }; diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config.js b/src/legacy/core_plugins/metrics/public/components/panel_config.js index 45da23b0830c29..2a8647febb9120 100644 --- a/src/legacy/core_plugins/metrics/public/components/panel_config.js +++ b/src/legacy/core_plugins/metrics/public/components/panel_config.js @@ -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 ( - + - + ); } diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js b/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js index 6abfc93269faa2..449c1775880bfd 100644 --- a/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js +++ b/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js @@ -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); diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js b/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js index 2794fa55ff1d71..28e5d07f0081c9 100644 --- a/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js +++ b/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js @@ -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 = ; + view = ( + + {visData => } + + ); } else if (selectedTab === 'data') { view = ( ); @@ -327,7 +331,6 @@ MarkdownPanelConfigUi.propTypes = { model: PropTypes.object, onChange: PropTypes.func, dateFormat: PropTypes.string, - visData$: PropTypes.object, }; export const MarkdownPanelConfig = injectI18n(MarkdownPanelConfigUi); diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js b/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js index cd8402dc07cd9e..34aafcbc2a68d0 100644 --- a/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js +++ b/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js @@ -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, }; diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/table.js b/src/legacy/core_plugins/metrics/public/components/panel_config/table.js index 0ba0b20d593b06..8baca373e5d1cf 100644 --- a/src/legacy/core_plugins/metrics/public/components/panel_config/table.js +++ b/src/legacy/core_plugins/metrics/public/components/panel_config/table.js @@ -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} /> @@ -291,5 +290,4 @@ TablePanelConfig.propTypes = { fields: PropTypes.object, model: PropTypes.object, onChange: PropTypes.func, - visData$: PropTypes.object, }; diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js index d84a2bcdb3e988..97c5a2db643a11 100644 --- a/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js +++ b/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js @@ -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); diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js b/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js index 5fd2026e45f1de..f5ec0469e5ae5c 100644 --- a/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js +++ b/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js @@ -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, }; diff --git a/src/legacy/core_plugins/metrics/public/components/series.js b/src/legacy/core_plugins/metrics/public/components/series.js index a4963db09e1153..06cf533cb8fd1f 100644 --- a/src/legacy/core_plugins/metrics/public/components/series.js +++ b/src/legacy/core_plugins/metrics/public/components/series.js @@ -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) ? ( - + + {visData => ( + + )} + ) : ( 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, }; diff --git a/src/legacy/core_plugins/metrics/public/contexts/ui_restriction_context.js b/src/legacy/core_plugins/metrics/public/contexts/vis_data_context.js similarity index 93% rename from src/legacy/core_plugins/metrics/public/contexts/ui_restriction_context.js rename to src/legacy/core_plugins/metrics/public/contexts/vis_data_context.js index 24860b329e3043..65be12d5b65511 100644 --- a/src/legacy/core_plugins/metrics/public/contexts/ui_restriction_context.js +++ b/src/legacy/core_plugins/metrics/public/contexts/vis_data_context.js @@ -19,4 +19,4 @@ import React from 'react'; -export const UIRestrictionsContext = React.createContext(); +export const VisDataContext = React.createContext({}); diff --git a/test/functional/apps/visualize/_tsvb_markdown.ts b/test/functional/apps/visualize/_tsvb_markdown.ts index 1cd1d84f77b0be..55fd297ee216e4 100644 --- a/test/functional/apps/visualize/_tsvb_markdown.ts +++ b/test/functional/apps/visualize/_tsvb_markdown.ts @@ -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();