Skip to content

Commit

Permalink
create wrapper for QueryBarInput
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexwizp
alexwizp committed Jul 31, 2019
1 parent e20b60c commit 92ae0f1
Show file tree
Hide file tree
Showing 14 changed files with 172 additions and 213 deletions.
24 changes: 9 additions & 15 deletions src/legacy/core_plugins/metrics/public/components/annotations_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ import { FieldSelect } from './aggs/field_select';
import uuid from 'uuid';
import { IconSelect } from './icon_select';
import { YesNo } from './yes_no';
import { QueryBarInput } from 'plugins/data';
import { QueryInputBarContext } from '../contexts/query_input_bar_context';
import { QueryBarWrapper } from './query_bar_wrapper';
import { getDefaultQueryLanguage } from './lib/get_default_query_language';

import {
Expand Down Expand Up @@ -171,19 +170,14 @@ export class AnnotationsEditor extends Component {
}
fullWidth
>
<QueryInputBarContext.Consumer>
{context => (
<QueryBarInput
query={{
language: model.query_string.language || getDefaultQueryLanguage(),
query: model.query_string.query || '',
}}
onChange={query => this.handleQueryChange(model, query)}
indexPatterns={[model.index_pattern]}
{...context}
/>
)}
</QueryInputBarContext.Consumer>
<QueryBarWrapper
query={{
language: model.query_string.language || getDefaultQueryLanguage(),
query: model.query_string.query || '',
}}
onChange={query => this.handleQueryChange(model, query)}
indexPatterns={[model.index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
24 changes: 6 additions & 18 deletions src/legacy/core_plugins/metrics/public/components/panel_config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,8 @@ import { TablePanelConfig as table } from './panel_config/table';
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 { QueryInputBarContext } from '../contexts/query_input_bar_context';

import { npSetup } from 'ui/new_platform';
import { Storage } from 'ui/storage';
const localStorage = new Storage(window.localStorage);
import { FormValidationContext } from '../contexts/form_validation_context';
import { VisDataContext } from '../contexts/vis_data_context';

const types = {
Expand Down Expand Up @@ -67,21 +63,13 @@ export function PanelConfig(props) {
formValidationResults[controlKey] = isControlValid;
};

const queryBarInputContext = {
uiSettings: npSetup.core.uiSettings,
store: localStorage,
appName: 'VisEditor',
};

if (Component) {
return (
<QueryInputBarContext.Provider value={queryBarInputContext}>
<FormValidationContext.Provider value={updateControlValidity}>
<VisDataContext.Provider value={visData}>
<Component {...props} />
</VisDataContext.Provider>
</FormValidationContext.Provider>
</QueryInputBarContext.Provider>
<FormValidationContext.Provider value={updateControlValidity}>
<VisDataContext.Provider value={visData}>
<Component {...props} />
</VisDataContext.Provider>
</FormValidationContext.Provider>
);
}

Expand Down
24 changes: 9 additions & 15 deletions src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,8 @@ import {
EuiHorizontalRule,
} from '@elastic/eui';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { QueryBarInput } from 'plugins/data';
import { QueryBarWrapper } from '../query_bar_wrapper';
import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
import { QueryInputBarContext } from '../../contexts/query_input_bar_context';

class GaugePanelConfigUi extends Component {
constructor(props) {
Expand Down Expand Up @@ -148,19 +147,14 @@ class GaugePanelConfigUi extends Component {
}
fullWidth
>
<QueryInputBarContext.Consumer>
{context => (
<QueryBarInput
query={{
language: model.filter.language || getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
{...context}
/>
)}
</QueryInputBarContext.Consumer>
<QueryBarWrapper
query={{
language: model.filter.language || getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
28 changes: 11 additions & 17 deletions src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { SeriesEditor } from '../series_editor';
import { IndexPattern } from '../index_pattern';
import 'brace/mode/less';
import { createSelectHandler } from '../lib/create_select_handler';
import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
import { ColorPicker } from '../color_picker';
import { YesNo } from '../yes_no';
import { MarkdownEditor } from '../markdown_editor';
Expand All @@ -45,7 +44,7 @@ import {
} from '@elastic/eui';
const lessC = less(window, { env: 'production' });
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { QueryBarInput } from 'plugins/data';
import { QueryBarWrapper } from '../query_bar_wrapper';
import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
import { VisDataContext } from './../../contexts/vis_data_context';

Expand Down Expand Up @@ -157,21 +156,16 @@ class MarkdownPanelConfigUi extends Component {
}
fullWidth
>
<QueryInputBarContext.Consumer>
{context => (
<QueryBarInput
query={{
language: model.filter.language
? model.filter.language
: getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
{...context}
/>
)}
</QueryInputBarContext.Consumer>
<QueryBarWrapper
query={{
language: model.filter.language
? model.filter.language
: getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
24 changes: 9 additions & 15 deletions src/legacy/core_plugins/metrics/public/components/panel_config/metric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,8 @@ import {
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

import { QueryBarInput } from 'plugins/data';
import { QueryBarWrapper } from '../query_bar_wrapper';
import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
import { QueryInputBarContext } from '../../contexts/query_input_bar_context';

export class MetricPanelConfig extends Component {
constructor(props) {
Expand Down Expand Up @@ -113,19 +112,14 @@ export class MetricPanelConfig extends Component {
}
fullWidth
>
<QueryInputBarContext.Consumer>
{context => (
<QueryBarInput
query={{
language: model.filter.language || getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
{...context}
/>
)}
</QueryInputBarContext.Consumer>
<QueryBarWrapper
query={{
language: model.filter.language || getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
28 changes: 11 additions & 17 deletions src/legacy/core_plugins/metrics/public/components/panel_config/table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,8 @@ import {
EuiText,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { QueryBarInput } from 'plugins/data';
import { QueryBarWrapper } from '../query_bar_wrapper';
import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
export class TablePanelConfig extends Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -231,21 +230,16 @@ export class TablePanelConfig extends Component {
}
fullWidth
>
<QueryInputBarContext.Consumer>
{context => (
<QueryBarInput
query={{
language: model.filter.language
? model.filter.language
: getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
{...context}
/>
)}
</QueryInputBarContext.Consumer>
<QueryBarWrapper
query={{
language: model.filter.language
? model.filter.language
: getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
24 changes: 9 additions & 15 deletions src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ import {
} from '@elastic/eui';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
import { QueryBarInput } from 'plugins/data';
import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
import { QueryBarWrapper } from '../query_bar_wrapper';
class TimeseriesPanelConfigUi extends Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -185,19 +184,14 @@ class TimeseriesPanelConfigUi extends Component {
}
fullWidth
>
<QueryInputBarContext.Consumer>
{context => (
<QueryBarInput
query={{
language: model.filter.language || getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
{...context}
/>
)}
</QueryInputBarContext.Consumer>
<QueryBarWrapper
query={{
language: model.filter.language || getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
28 changes: 11 additions & 17 deletions src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ import {
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
import { QueryBarInput } from 'plugins/data';
import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
import { QueryBarWrapper } from '../query_bar_wrapper';

export class TopNPanelConfig extends Component {
constructor(props) {
Expand Down Expand Up @@ -141,21 +140,16 @@ export class TopNPanelConfig extends Component {
}
fullWidth
>
<QueryInputBarContext.Consumer>
{context => (
<QueryBarInput
query={{
language: model.filter.language
? model.filter.language
: getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
{...context}
/>
)}
</QueryInputBarContext.Consumer>
<QueryBarWrapper
query={{
language: model.filter.language
? model.filter.language
: getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={filter => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
43 changes: 43 additions & 0 deletions src/legacy/core_plugins/metrics/public/components/query_bar_wrapper.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';

import { QueryBarInput } from 'plugins/data';
import { npSetup } from 'ui/new_platform';
import { Storage } from 'ui/storage';

const APP_NAME = 'VisEditor';

const queryBarInputContext = {
appName: APP_NAME,
uiSettings: npSetup.core.uiSettings,
store: new Storage(window.localStorage),
};

export function QueryBarWrapper(props) {
// Note: if you want to use your previous approach based on
// React Context you can get it here like e.g. :

// queryBarInputContext = useContext(QueryInputBarContext);

// but now I don't see any reasons to use context

return <QueryBarInput {...props} {...queryBarInputContext} />;
}
Loading

0 comments on commit 92ae0f1

Please sign in to comment.