import { i18n } from '@kbn/i18n' ; import { FormattedMessage } from '@kbn/i18n-react' ; import React , { Component } from 'react' ; import uuid from 'uuid' ; import { htmlIdGenerator , EuiTabs , EuiTab , EuiPanel , EuiFlexGroup , EuiFlexItem , EuiFormRow , EuiSpacer , EuiTitle , EuiHorizontalRule , } from '@elastic/eui' ; import { SeriesEditor } from '../series_editor' ; import { IndexPattern } from '../index_pattern' ; import { ColorRules } from '../color_rules' ; import { YesNo } from '../yes_no' ; import { QueryBarWrapper } from '../query_bar_wrapper' ; import { getDefaultQueryLanguage } from '../lib/get_default_query_language' ; import { limitOfSeries } from '../../../../common/ui_restrictions' ; import { PANEL_TYPES } from '../../../../common/enums' ; import { PanelConfigProps , PANEL_CONFIG_TABS } from './types' ; export class MetricPanelConfig extends Component < PanelConfigProps , { selectedTab : PANEL_CONFIG_TABS ; } > { constructor ( props ) { super ( props ) ; this . state = { selectedTab : PANEL_CONFIG_TABS . DATA } ; } UNSAFE_componentWillMount ( ) { const { model } = this . props ; if ( ! model . background_color_rules || ( model . background_color_rules && model . background_color_rules . length === 0 ) ) { this . props . onChange ( { background_color_rules : [ { id : uuid . v1 ( ) } ] , } ) ; } } switchTab ( selectedTab ) { this . setState ( { selectedTab } ) ; } render ( ) { const { selectedTab } = this . state ; const defaults = { filter : { query : '' , language : getDefaultQueryLanguage ( ) } } ; const model = { ... defaults , ... this . props . model } ; const htmlId = htmlIdGenerator ( ) ; const view = selectedTab === PANEL_CONFIG_TABS . DATA ? ( < SeriesEditor colorPicker = { false } fields = { this . props . fields } limit = { limitOfSeries [ PANEL_TYPES . METRIC ] } model = { this . props . model } onChange = { this . props . onChange } / > ) : ( < div className = "tvbPanelConfig__container" > < EuiPanel > < EuiTitle size = "s" > < span > < FormattedMessage id = "visTypeTimeseries.metric.optionsTab.dataLabel" defaultMessage = "Data" / > < /span> < /EuiTitle> < EuiSpacer size = "m" / > < IndexPattern fields = { this . props . fields } model = { this . props . model } onChange = { this . props . onChange } allowIndexSwitchingMode = { true } / > < EuiHorizontalRule /> < EuiFlexGroup responsive = { false } wrap = { true } > < EuiFlexItem > < EuiFormRow id = { htmlId ( 'panelFilter' ) } label = { < FormattedMessage id = "visTypeTimeseries.metric.optionsTab.panelFilterLabel" defaultMessage = "Panel filter" / > } fullWidth > < QueryBarWrapper query = { { language : model . filter ?. language || getDefaultQueryLanguage ( ) , query : model . filter ?. query || '' , } } onChange = { ( filter ) => { this . props . onChange ( { filter } ) ; } } indexPatterns = { [ model . index_pattern ] } / > < /EuiFormRow> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiFormRow label = { i18n . translate ( 'visTypeTimeseries.metric.optionsTab.ignoreGlobalFilterLabel' , { defaultMessage : 'Ignore global filter?' , } ) } > < YesNo value = { model . ignore_global_filter } name = "ignore_global_filter" onChange = { this . props . onChange } / > < /EuiFormRow> < /EuiFlexItem> < /EuiFlexGroup> < /EuiPanel> < EuiSpacer / > < EuiPanel > < EuiTitle size = "s" > < span > < FormattedMessage id = "visTypeTimeseries.metric.optionsTab.colorRulesLabel" defaultMessage = "Color rules" / > < /span> < /EuiTitle> < EuiSpacer size = "m" / > < ColorRules model = { model } onChange = { this . props . onChange } name = "background_color_rules" / > < /EuiPanel> < /div>); return ( < > < EuiTabs size = "s" > < EuiTab isSelected = { selectedTab === PANEL_CONFIG_TABS . DATA } onClick = { ( ) => this . switchTab ( PANEL_CONFIG_TABS . DATA ) } data - test - subj = "metricEditorDataBtn" > < FormattedMessage id = "visTypeTimeseries.metric.dataTab.dataButtonLabel" defaultMessage = "Data" / > < /EuiTab> < EuiTab isSelected = { selectedTab === PANEL_CONFIG_TABS . OPTIONS } onClick = { ( ) => this . switchTab ( PANEL_CONFIG_TABS . OPTIONS ) } data - test - subj = "metricEditorPanelOptionsBtn" > < FormattedMessage id = "visTypeTimeseries.metric.optionsTab.panelOptionsButtonLabel" defaultMessage = "Panel options" / > < /EuiTab> < /EuiTabs> { view } < />); } }