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 , EuiFormLabel , EuiSpacer , EuiFieldText , EuiTitle , EuiHorizontalRule , EuiCode , } from '@elastic/eui' ; import { SeriesEditor } from '../series_editor' ; import { IndexPattern } from '../index_pattern' ; import { ColorRules } from '../color_rules' ; import { ColorPicker } from '../color_picker' ; import { YesNo } from '../yes_no' ; import { getDefaultQueryLanguage } from '../lib/get_default_query_language' ; import { QueryBarWrapper } from '../query_bar_wrapper' ; import { PanelConfigProps , PANEL_CONFIG_TABS } from './types' ; import { TimeseriesVisParams } from '../../../types' ; export class TopNPanelConfig 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 . bar_color_rules || ! model . bar_color_rules . length ) { this . props . onChange ( { bar_color_rules : [ { id : uuid . v1 ( ) } ] } ) ; } } switchTab ( selectedTab ) { this . setState ( { selectedTab } ) ; } handleTextChange = ( name ) => ( e ) => this . props . onChange ( { [ name ] : e . target . value } ) ; render ( ) { const { selectedTab } = this . state ; const defaults = { drilldown_url : '' , 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 } model = { this . props . model } onChange = { this . props . onChange } / > ) : ( < div className = "tvbPanelConfig__container" > < EuiPanel > < EuiTitle size = "s" > < span > < FormattedMessage id = "visTypeTimeseries.topN.optionsTab.dataLabel" defaultMessage = "Data" / > < /span> < /EuiTitle> < EuiSpacer size = "m" / > < EuiFormRow id = { htmlId ( 'itemUrl' ) } label = { < FormattedMessage id = "visTypeTimeseries.topN.optionsTab.itemUrlLabel" defaultMessage = "Item url" / > } helpText = { < span > < FormattedMessage id = "visTypeTimeseries.topN.optionsTab.itemUrlDescription" defaultMessage = "This supports mustache templating. {key} is set to the term." values = { { key : < EuiCode > { '{{key}}' } < /EuiCode> }}/ > < /span>}> < EuiFieldText onChange = { this . handleTextChange ( 'drilldown_url' ) } value = { model . drilldown_url ?? '' } / > < /EuiFormRow> < EuiHorizontalRule / > < 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.topN.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.topN.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.topN.optionsTab.styleLabel" defaultMessage = "Style" / > < /span> < /EuiTitle> < EuiSpacer size = "m" / > < EuiFlexGroup responsive = { false } wrap = { true } alignItems = "center" > < EuiFlexItem grow = { false } > < EuiFormLabel > < FormattedMessage id = "visTypeTimeseries.topN.optionsTab.backgroundColorLabel" defaultMessage = "Background color:" / > < /EuiFormLabel> < /EuiFlexItem> < EuiFlexItem grow = { false } > < ColorPicker onChange = { this . props . onChange } name = "background_color" value = { model . background_color } / > < /EuiFlexItem> < /EuiFlexGroup> < EuiHorizontalRule / > < EuiTitle size = "xxs" > < span > < FormattedMessage id = "visTypeTimeseries.topN.optionsTab.colorRulesLabel" defaultMessage = "Color rules" / > < /span> < /EuiTitle> < EuiSpacer size = "s" / > < ColorRules model = { model } primaryVarName = "bar_color" primaryName = "bar" hideSecondary = { true } onChange = { this . props . onChange } name = "bar_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 = "topNEditorDataBtn" > < FormattedMessage id = "visTypeTimeseries.topN.dataTab.dataButtonLabel" defaultMessage = "Data" / > < /EuiTab> < EuiTab isSelected = { selectedTab === PANEL_CONFIG_TABS . OPTIONS } onClick = { ( ) => this . switchTab ( PANEL_CONFIG_TABS . OPTIONS ) } data - test - subj = "topNEditorPanelOptionsBtn" > < FormattedMessage id = "visTypeTimeseries.topN.optionsTab.panelOptionsButtonLabel" defaultMessage = "Panel options" / > < /EuiTab> < /EuiTabs> { view } < />); } }