[TSVB] Get rid of default export on TSVB (#36872)

The `import/no-default-export` has been turned on for TSVB.

* Get rid of default export on TSVB
* Change eslint rules lines

.eslintrc.js

@@ -529,5 +529,16 @@ module.exports = {
         jquery: true,
       },
     },
+
+    /**
+     * TSVB overrides
+     */
+    {
+      files: ['src/legacy/core_plugins/metrics/**/*.js'],
+      excludedFiles: 'src/legacy/core_plugins/metrics/index.js',
+      rules: {
+        'import/no-default-export': 'error',
+      },
+    },
   ],
 };

src/legacy/core_plugins/metrics/common/__tests__/calculate_label.js

@@ -18,7 +18,7 @@
  */
 
 import { expect } from 'chai';
-import calculateLabel from '../calculate_label';
+import { calculateLabel } from '../calculate_label';
 
 describe('calculateLabel(metric, metrics)', () => {
   it('returns "Unknown" for empty metric', () => {

src/legacy/core_plugins/metrics/common/agg_lookup.js

@@ -20,7 +20,7 @@
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 
-const lookup = {
+export const lookup = {
   count: i18n.translate('tsvb.aggLookup.countLabel', { defaultMessage: 'Count' }),
   calculation: i18n.translate('tsvb.aggLookup.calculationLabel', { defaultMessage: 'Calculation' }),
   std_deviation: i18n.translate('tsvb.aggLookup.deviationLabel', { defaultMessage: 'Std. Deviation' }),
@@ -111,5 +111,3 @@ export function createOptions(type = '_all', siblings = []) {
     })
     .value();
 }
-
-export default lookup;

src/legacy/core_plugins/metrics/common/basic_aggs.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export default [
+export const basicAggs = [
   'count',
   'avg',
   'max',

src/legacy/core_plugins/metrics/common/calculate_label.js

@@ -18,7 +18,7 @@
  */
 
 import { includes, startsWith } from 'lodash';
-import lookup from './agg_lookup';
+import { lookup } from './agg_lookup';
 import { i18n } from '@kbn/i18n';
 
 const paths = [
@@ -35,7 +35,8 @@ const paths = [
   'serial_diff',
   'positive_only',
 ];
-export default function calculateLabel(metric, metrics) {
+
+export function calculateLabel(metric, metrics) {
   if (!metric) return i18n.translate('tsvb.calculateLabel.unknownLabel', { defaultMessage: 'Unknown' });
   if (metric.alias) return metric.alias;
 

src/legacy/core_plugins/metrics/common/get_last_value.js

@@ -22,7 +22,7 @@ import { isArray, last } from 'lodash';
 const DEFAULT_VALUE = 0;
 const extractValue = data => data && data[1] || null;
 
-export default (data, defaultValue = DEFAULT_VALUE) => {
+export const getLastValue = (data, defaultValue = DEFAULT_VALUE) => {
   if (!isArray(data)) {
     return data || defaultValue;
   }

src/legacy/core_plugins/metrics/common/get_last_value.test.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import getLastValue from './get_last_value';
+import { getLastValue } from './get_last_value';
 
 describe('getLastValue(data)', () => {
   test('should returns data if data is not array', () => {

src/legacy/core_plugins/metrics/common/interval_regexp.js

@@ -18,6 +18,7 @@
  */
 
 import dateMath from '@elastic/datemath';
+
 export const GTE_INTERVAL_RE = new RegExp(`^>=([\\d\\.]+\\s*(${dateMath.units.join('|')}))$`);
 export const INTERVAL_STRING_RE = new RegExp(`^([\\d\\.]+)\\s*(${dateMath.units.join('|')})$`);
 

src/legacy/core_plugins/metrics/common/set_is_reversed.js

@@ -19,6 +19,7 @@
 
 import color from 'color';
 import chrome from '../../../ui/public/chrome';
+
 const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
 
 /**

src/legacy/core_plugins/metrics/index.js

@@ -19,8 +19,8 @@
 
 import { resolve } from 'path';
 
-import fieldsRoutes from './server/routes/fields';
-import visDataRoutes from './server/routes/vis';
+import { fieldsRoutes } from './server/routes/fields';
+import { visDataRoutes } from './server/routes/vis';
 import { SearchStrategiesRegister } from './server/lib/search_strategies/search_strategies_register';
 
 export default function (kibana) {

src/legacy/core_plugins/metrics/public/components/add_delete_buttons.js

@@ -23,7 +23,7 @@ import { EuiToolTip, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/e
 import { i18n } from '@kbn/i18n';
 import { isBoolean } from 'lodash';
 
-function AddDeleteButtons(props) {
+export function AddDeleteButtons(props) {
   const { testSubj } = props;
   const createDelete = () => {
     if (props.disableDelete) {
@@ -146,5 +146,3 @@ AddDeleteButtons.propTypes = {
   onDelete: PropTypes.func,
   responsive: PropTypes.bool,
 };
-
-export default AddDeleteButtons;

src/legacy/core_plugins/metrics/public/components/add_delete_buttons.test.js

@@ -21,7 +21,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import sinon from 'sinon';
-import AddDeleteButtons from './add_delete_buttons';
+import { AddDeleteButtons } from './add_delete_buttons';
 
 describe('AddDeleteButtons', () => {
   it('calls onAdd={handleAdd}', () => {

src/legacy/core_plugins/metrics/public/components/aggs/agg.js

@@ -19,13 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import aggToComponent from '../lib/agg_to_component';
+import { aggToComponent } from '../lib/agg_to_component';
 import { UnsupportedAgg } from './unsupported_agg';
 import { TemporaryUnsupportedAgg } from './temporary_unsupported_agg';
 
 import { isMetricEnabled } from '../../lib/check_ui_restrictions';
 
-function Agg(props) {
+export function Agg(props) {
   const { model, uiRestrictions } = props;
 
   let Component = aggToComponent[model.type];
@@ -76,5 +76,3 @@ Agg.propTypes = {
   uiRestrictions: PropTypes.object,
   dragHandleProps: PropTypes.object,
 };
-
-export default Agg;

src/legacy/core_plugins/metrics/public/components/aggs/agg_row.js

@@ -20,7 +20,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { last } from 'lodash';
-import AddDeleteButtons from '../add_delete_buttons';
+import { AddDeleteButtons } from '../add_delete_buttons';
 import { EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
 import { SeriesDragHandler } from '../series_drag_handler';
@@ -72,5 +72,4 @@ AggRowUi.propTypes = {
   dragHandleProps: PropTypes.object,
 };
 
-const AggRow = injectI18n(AggRowUi);
-export default AggRow;
+export const AggRow = injectI18n(AggRowUi);

src/legacy/core_plugins/metrics/public/components/aggs/agg_select.js

@@ -241,5 +241,4 @@ AggSelectUi.propTypes = {
   uiRestrictions: PropTypes.object,
 };
 
-const AggSelect = injectI18n(AggSelectUi);
-export default AggSelect;
+export const AggSelect = injectI18n(AggSelectUi);

src/legacy/core_plugins/metrics/public/components/aggs/aggs.js

@@ -22,9 +22,9 @@ import PropTypes from 'prop-types';
 
 import { EuiDraggable, EuiDroppable } from '@elastic/eui';
 
-import Agg from './agg';
-import newMetricAggFn from '../lib/new_metric_agg_fn';
-import seriesChangeHandler from '../lib/series_change_handler';
+import { Agg } from './agg';
+import { newMetricAggFn } from '../lib/new_metric_agg_fn';
+import { seriesChangeHandler } from '../lib/series_change_handler';
 import { handleAdd, handleDelete } from '../lib/collection_actions';
 
 const DROPPABLE_ID = 'aggs_dnd';

src/legacy/core_plugins/metrics/public/components/aggs/calculation.js

@@ -21,13 +21,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import _ from 'lodash';
 import uuid from 'uuid';
-import AggRow from './agg_row';
-import AggSelect from './agg_select';
+import { AggRow } from './agg_row';
+import { AggSelect } from './agg_select';
 
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
-import Vars from './vars';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
+import { CalculationVars } from './vars';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
@@ -40,7 +40,7 @@ import {
   EuiCode,
 } from '@elastic/eui';
 
-class CalculationAgg extends Component {
+export class CalculationAgg extends Component {
 
   componentWillMount() {
     if (!this.props.model.variables) {
@@ -95,7 +95,7 @@ class CalculationAgg extends Component {
                 defaultMessage="Variables"
               />
             </EuiFormLabel>
-            <Vars
+            <CalculationVars
               id={htmlId('variables')}
               metrics={siblings}
               onChange={handleChange}
@@ -152,5 +152,3 @@ CalculationAgg.propTypes = {
   series: PropTypes.object,
   siblings: PropTypes.array,
 };
-
-export default CalculationAgg;

src/legacy/core_plugins/metrics/public/components/aggs/cumulative_sum.js

@@ -19,15 +19,15 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggRow from './agg_row';
-import AggSelect from './agg_select';
-import MetricSelect from './metric_select';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
+import { AggRow } from './agg_row';
+import { AggSelect } from './agg_select';
+import { MetricSelect } from './metric_select';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
 
-function CumulativeSumAgg(props) {
+export function CumulativeSumAgg(props) {
   const { model, siblings } = props;
   const htmlId = htmlIdGenerator();
   const handleChange = createChangeHandler(props.onChange, model);
@@ -90,5 +90,3 @@ CumulativeSumAgg.propTypes = {
   series: PropTypes.object,
   siblings: PropTypes.array,
 };
-
-export default CumulativeSumAgg;

src/legacy/core_plugins/metrics/public/components/aggs/derivative.js

@@ -19,12 +19,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import MetricSelect from './metric_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
+import { AggSelect } from './agg_select';
+import { MetricSelect } from './metric_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/aggs/field_select.js

@@ -110,5 +110,4 @@ FieldSelectUi.propTypes = {
   placeholder: PropTypes.string,
 };
 
-const FieldSelect = injectI18n(FieldSelectUi);
-export default FieldSelect;
+export const FieldSelect = injectI18n(FieldSelectUi);

src/legacy/core_plugins/metrics/public/components/aggs/filter_ratio.js

@@ -19,12 +19,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import FieldSelect from './field_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
+import { AggSelect } from './agg_select';
+import { FieldSelect } from './field_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/aggs/math.js

@@ -21,13 +21,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import uuid from 'uuid';
-import AggRow from './agg_row';
-import AggSelect from './agg_select';
+import { AggRow } from './agg_row';
+import { AggSelect } from './agg_select';
 
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
-import Vars from './vars';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
+import { CalculationVars } from './vars';
 import {
   htmlIdGenerator,
   EuiFlexGroup,
@@ -40,7 +40,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-class MathAgg extends Component {
+export class MathAgg extends Component {
   componentWillMount() {
     if (!this.props.model.variables) {
       this.props.onChange(
@@ -94,7 +94,7 @@ class MathAgg extends Component {
                 defaultMessage="Variables"
               />
             </EuiFormLabel>
-            <Vars
+            <CalculationVars
               id={htmlId('variables')}
               metrics={siblings}
               onChange={handleChange}
@@ -165,5 +165,3 @@ MathAgg.propTypes = {
   series: PropTypes.object,
   siblings: PropTypes.array,
 };
-
-export default MathAgg;

src/legacy/core_plugins/metrics/public/components/aggs/metric_select.js

@@ -24,9 +24,9 @@ import { injectI18n } from '@kbn/i18n/react';
 import {
   EuiComboBox,
 } from '@elastic/eui';
-import calculateSiblings from '../lib/calculate_siblings';
-import calculateLabel from '../../../common/calculate_label';
-import basicAggs from '../../../common/basic_aggs';
+import { calculateSiblings } from '../lib/calculate_siblings';
+import { calculateLabel } from '../../../common/calculate_label';
+import { basicAggs } from '../../../common/basic_aggs';
 import { toPercentileNumber } from '../../../common/to_percentile_number';
 import { METRIC_TYPES } from '../../../common/metric_types';
 
@@ -145,5 +145,4 @@ MetricSelectUi.propTypes = {
   includeSiblings: PropTypes.bool,
 };
 
-const MetricSelect = injectI18n(MetricSelectUi);
-export default MetricSelect;
+export const MetricSelect = injectI18n(MetricSelectUi);

src/legacy/core_plugins/metrics/public/components/aggs/moving_average.js

@@ -19,13 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggRow from './agg_row';
-import AggSelect from './agg_select';
-import MetricSelect from './metric_select';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
-import createNumberHandler from '../lib/create_number_handler';
+import { AggRow } from './agg_row';
+import { AggSelect } from './agg_select';
+import { MetricSelect } from './metric_select';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
+import { createNumberHandler } from '../lib/create_number_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/aggs/percentile.js

@@ -20,14 +20,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import _ from 'lodash';
-import AggSelect from './agg_select';
-import FieldSelect from './field_select';
-import AggRow from './agg_row';
-import * as collectionActions from '../lib/collection_actions';
-import AddDeleteButtons from '../add_delete_buttons';
+import { AggSelect } from './agg_select';
+import { FieldSelect } from './field_select';
+import { AggRow } from './agg_row';
+import { collectionActions } from '../lib/collection_actions';
+import { AddDeleteButtons } from '../add_delete_buttons';
 import uuid from 'uuid';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import {
   htmlIdGenerator,
   EuiSpacer,
@@ -207,7 +207,7 @@ PercentilesUi.propTypes = {
 
 const Percentiles = injectI18n(PercentilesUi);
 
-class PercentileAgg extends Component { // eslint-disable-line react/no-multi-comp
+export class PercentileAgg extends Component { // eslint-disable-line react/no-multi-comp
 
   componentWillMount() {
     if (!this.props.model.percentiles) {
@@ -296,5 +296,3 @@ PercentileAgg.propTypes = {
   series: PropTypes.object,
   siblings: PropTypes.array,
 };
-
-export default PercentileAgg;

src/legacy/core_plugins/metrics/public/components/aggs/percentile_rank/multi_value_row.js

@@ -29,7 +29,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import AddDeleteButtons from '../../add_delete_buttons';
+import { AddDeleteButtons } from '../../add_delete_buttons';
 
 export const MultiValueRow = ({
   model,

src/legacy/core_plugins/metrics/public/components/aggs/percentile_rank/percentile_rank.js

@@ -20,11 +20,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { assign } from 'lodash';
-import AggSelect from '../agg_select';
-import FieldSelect from '../field_select';
-import AggRow from '../agg_row';
-import createChangeHandler from '../../lib/create_change_handler';
-import createSelectHandler from '../../lib/create_select_handler';
+import { AggSelect } from '../agg_select';
+import { FieldSelect } from '../field_select';
+import { AggRow } from '../agg_row';
+import { createChangeHandler } from '../../lib/create_change_handler';
+import { createSelectHandler } from '../../lib/create_select_handler';
 import { PercentileRankValues } from './percentile_rank_values';
 
 import {

src/legacy/core_plugins/metrics/public/components/aggs/positive_only.js

@@ -19,11 +19,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import MetricSelect from './metric_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
+import { AggSelect } from './agg_select';
+import { MetricSelect } from './metric_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 

src/legacy/core_plugins/metrics/public/components/aggs/serial_diff.js

@@ -19,12 +19,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import MetricSelect from './metric_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createNumberHandler from '../lib/create_number_handler';
+import { AggSelect } from './agg_select';
+import { MetricSelect } from './metric_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createNumberHandler } from '../lib/create_number_handler';
 import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 

src/legacy/core_plugins/metrics/public/components/aggs/series_agg.js

@@ -19,10 +19,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
+import { AggSelect } from './agg_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,
@@ -165,5 +165,4 @@ SeriesAggUi.propTypes = {
   siblings: PropTypes.array,
 };
 
-const SeriesAgg = injectI18n(SeriesAggUi);
-export default SeriesAgg;
+export const SeriesAgg = injectI18n(SeriesAggUi);

src/legacy/core_plugins/metrics/public/components/aggs/static.js

@@ -19,11 +19,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
+import { AggSelect } from './agg_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/aggs/std_agg.js

@@ -19,17 +19,17 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import FieldSelect from './field_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
+import { AggSelect } from './agg_select';
+import { FieldSelect } from './field_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFormLabel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ES_TYPES } from '../../../common/es_types';
 import { METRIC_TYPES } from '../../../common/metric_types';
 
-function StandardAgg(props) {
+export function StandardAgg(props) {
   const { model, panel, series, fields, uiRestrictions } = props;
   const handleChange = createChangeHandler(props.onChange, model);
   const handleSelectChange = createSelectHandler(handleChange);
@@ -110,5 +110,3 @@ StandardAgg.propTypes = {
   siblings: PropTypes.array,
   uiRestrictions: PropTypes.object,
 };
-
-export default StandardAgg;

src/legacy/core_plugins/metrics/public/components/aggs/std_deviation.js

@@ -19,12 +19,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggSelect from './agg_select';
-import FieldSelect from './field_select';
-import AggRow from './agg_row';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
+import { AggSelect } from './agg_select';
+import { FieldSelect } from './field_select';
+import { AggRow } from './agg_row';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/aggs/std_sibling.js

@@ -19,12 +19,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AggRow from './agg_row';
-import MetricSelect from './metric_select';
-import AggSelect from './agg_select';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
+import { AggRow } from './agg_row';
+import { MetricSelect } from './metric_select';
+import { AggSelect } from './agg_select';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/aggs/temporary_unsupported_agg.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import AggRow from './agg_row';
+import { AggRow } from './agg_row';
 import React from 'react';
 import { EuiCode, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';

src/legacy/core_plugins/metrics/public/components/aggs/top_hit.js

@@ -18,13 +18,13 @@
  */
 
 import React from 'react';
-import AggRow from './agg_row';
-import AggSelect from './agg_select';
-import FieldSelect from './field_select';
+import { AggRow } from './agg_row';
+import { AggSelect } from './agg_select';
+import { FieldSelect } from './field_select';
 import { i18n } from '@kbn/i18n';
-import createChangeHandler from '../lib/create_change_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
+import { createChangeHandler } from '../lib/create_change_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/aggs/unsupported_agg.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import AggRow from './agg_row';
+import { AggRow } from './agg_row';
 import React from 'react';
 import { EuiCode, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';

src/legacy/core_plugins/metrics/public/components/aggs/vars.js

@@ -20,9 +20,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import _ from 'lodash';
-import AddDeleteButtons from '../add_delete_buttons';
-import * as collectionActions from '../lib/collection_actions';
-import MetricSelect from './metric_select';
+import { AddDeleteButtons } from '../add_delete_buttons';
+import { collectionActions } from '../lib/collection_actions';
+import { MetricSelect } from './metric_select';
 import { EuiFlexGroup, EuiFlexItem, EuiFieldText } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
 
@@ -106,5 +106,4 @@ CalculationVarsUi.propTypes = {
   includeSiblings: PropTypes.bool
 };
 
-const CalculationVars = injectI18n(CalculationVarsUi);
-export default CalculationVars;
+export const CalculationVars = injectI18n(CalculationVarsUi);

src/legacy/core_plugins/metrics/public/components/annotations_editor.js

@@ -20,14 +20,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import _ from 'lodash';
-import * as collectionActions from './lib/collection_actions';
+import { collectionActions } from './lib/collection_actions';
 import { ES_TYPES } from '../../common/es_types';
-import AddDeleteButtons from './add_delete_buttons';
-import ColorPicker from './color_picker';
-import FieldSelect from './aggs/field_select';
+import { AddDeleteButtons } from './add_delete_buttons';
+import { ColorPicker } from './color_picker';
+import { FieldSelect } from './aggs/field_select';
 import uuid from 'uuid';
-import IconSelect from './icon_select';
-import YesNo from './yes_no';
+import { IconSelect } from './icon_select';
+import { YesNo } from './yes_no';
 
 import {
   htmlIdGenerator,
@@ -58,7 +58,7 @@ function newAnnotation() {
 
 const RESTRICT_FIELDS = [ES_TYPES.DATE];
 
-class AnnotationsEditor extends Component {
+export class AnnotationsEditor extends Component {
 
   constructor(props) {
     super(props);
@@ -325,5 +325,3 @@ AnnotationsEditor.propTypes = {
   name: PropTypes.string,
   onChange: PropTypes.func
 };
-
-export default AnnotationsEditor;

src/legacy/core_plugins/metrics/public/components/color_picker.js

@@ -23,10 +23,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { EuiIconTip, } from '@elastic/eui';
-import Picker from './custom_color_picker';
+import { CustomColorPickerUI as Picker } from './custom_color_picker';
 import { injectI18n } from '@kbn/i18n/react';
 
-class ColorPicker extends Component {
+class ColorPickerUI extends Component {
 
   constructor(props) {
     super(props);
@@ -133,11 +133,11 @@ class ColorPicker extends Component {
 
 }
 
-ColorPicker.propTypes = {
+ColorPickerUI.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   disableTrash: PropTypes.bool,
   onChange: PropTypes.func
 };
 
-export default injectI18n(ColorPicker);
+export const ColorPicker = injectI18n(ColorPickerUI);

src/legacy/core_plugins/metrics/public/components/color_rules.js

@@ -20,9 +20,9 @@
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
-import AddDeleteButtons from './add_delete_buttons';
-import * as collectionActions from './lib/collection_actions';
-import ColorPicker from './color_picker';
+import { AddDeleteButtons } from './add_delete_buttons';
+import { collectionActions } from './lib/collection_actions';
+import { ColorPicker } from './color_picker';
 import {
   htmlIdGenerator,
   EuiComboBox,
@@ -34,7 +34,7 @@ import {
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-class ColorRules extends Component {
+class ColorRulesUI extends Component {
 
   constructor(props) {
     super(props);
@@ -181,7 +181,7 @@ class ColorRules extends Component {
 
 }
 
-ColorRules.defaultProps = {
+ColorRulesUI.defaultProps = {
   name: 'color_rules',
   primaryName: i18n.translate('tsvb.colorRules.defaultPrimaryNameLabel', { defaultMessage: 'background' }),
   primaryVarName: 'background_color',
@@ -190,7 +190,7 @@ ColorRules.defaultProps = {
   hideSecondary: false
 };
 
-ColorRules.propTypes = {
+ColorRulesUI.propTypes = {
   name: PropTypes.string,
   model: PropTypes.object,
   onChange: PropTypes.func,
@@ -201,4 +201,4 @@ ColorRules.propTypes = {
   hideSecondary: PropTypes.bool
 };
 
-export default injectI18n(ColorRules);
+export const ColorRules = injectI18n(ColorRulesUI);

src/legacy/core_plugins/metrics/public/components/custom_color_picker.js

@@ -28,7 +28,7 @@ import CompactColor from 'react-color/lib/components/compact/CompactColor';
 import color from 'react-color/lib/helpers/color';
 import shallowCompare from 'react-addons-shallow-compare';
 
-export class CustomColorPicker extends Component {
+export class CustomColorPickerUI extends Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
@@ -132,7 +132,7 @@ export class CustomColorPicker extends Component {
   }
 }
 
-CustomColorPicker.defaultProps = {
+CustomColorPickerUI.defaultProps = {
   colors: [
     '#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
     '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
@@ -143,10 +143,10 @@ CustomColorPicker.defaultProps = {
   ],
 };
 
-CustomColorPicker.propTypes = {
+CustomColorPickerUI.propTypes = {
   color: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onChangeComplete: PropTypes.func,
   onChange: PropTypes.func
 };
 
-export default colorWrap(CustomColorPicker);
+export const CustomColorPicker = colorWrap(CustomColorPickerUI);

src/legacy/core_plugins/metrics/public/components/data_format_picker.js

@@ -28,7 +28,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 const durationFormatTest = /[pnumshdwMY]+,[pnumshdwMY]+/;
 
-class DataFormatPicker extends Component {
+class DataFormatPickerUI extends Component {
 
   constructor(props) {
     super(props);
@@ -231,14 +231,14 @@ class DataFormatPicker extends Component {
   }
 }
 
-DataFormatPicker.defaultProps = {
+DataFormatPickerUI.defaultProps = {
   label: i18n.translate('tsvb.defaultDataFormatterLabel', { defaultMessage: 'Data Formatter' })
 };
 
-DataFormatPicker.propTypes = {
+DataFormatPickerUI.propTypes = {
   value: PropTypes.string,
   label: PropTypes.string,
   onChange: PropTypes.func
 };
 
-export default injectI18n(DataFormatPicker);
+export const DataFormatPicker = injectI18n(DataFormatPickerUI);

src/legacy/core_plugins/metrics/public/components/error.js

@@ -25,7 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 const guidPattern = /\[[[a-f\d-\\]{36}\]/g;
 
-function ErrorComponent(props) {
+export function ErrorComponent(props) {
   const { error } = props;
   let additionalInfo;
   const type = _.get(error, 'error.caused_by.type') || _.get(error, 'error.type');
@@ -79,5 +79,3 @@ function ErrorComponent(props) {
 ErrorComponent.propTypes = {
   error: PropTypes.object
 };
-
-export default ErrorComponent;

src/legacy/core_plugins/metrics/public/components/icon_select.js

@@ -35,7 +35,7 @@ function renderOption(option) {
   );
 }
 
-function IconSelect(props) {
+export function IconSelect(props) {
   const selectedIcon = props.icons.find(option => {
     return props.value === option.value;
   });
@@ -84,5 +84,3 @@ IconSelect.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string.isRequired
 };
-
-export default IconSelect;

src/legacy/core_plugins/metrics/public/components/index_pattern.js

@@ -19,10 +19,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import FieldSelect from './aggs/field_select';
-import createSelectHandler from './lib/create_select_handler';
-import createTextHandler from './lib/create_text_handler';
-import YesNo from './yes_no';
+import { FieldSelect } from './aggs/field_select';
+import { createSelectHandler } from './lib/create_select_handler';
+import { createTextHandler } from './lib/create_text_handler';
+import { YesNo } from './yes_no';
 import {
   htmlIdGenerator,
   EuiFieldText,

src/legacy/core_plugins/metrics/public/components/lib/__tests__/calculate_siblings.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import calculateSiblings from '../calculate_siblings';
+import { calculateSiblings } from '../calculate_siblings';
 import { expect } from 'chai';
 
 describe('calculateSiblings(metrics, metric)', () => {

src/legacy/core_plugins/metrics/public/components/lib/__tests__/create_number_handler.js

@@ -19,7 +19,7 @@
 
 import sinon from 'sinon';
 import { expect } from 'chai';
-import createNumberHandler from '../create_number_handler';
+import { createNumberHandler } from '../create_number_handler';
 
 describe('createNumberHandler()', () => {
 

src/legacy/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js

@@ -19,7 +19,7 @@
 
 import sinon from 'sinon';
 import { expect } from 'chai';
-import createSelectHandler from '../create_select_handler';
+import { createSelectHandler } from '../create_select_handler';
 
 describe('createSelectHandler()', () => {
   let handleChange;

src/legacy/core_plugins/metrics/public/components/lib/__tests__/create_text_handler.js

@@ -19,7 +19,7 @@
 
 import sinon from 'sinon';
 import { expect } from 'chai';
-import createTextHandler from '../create_text_handler';
+import { createTextHandler } from '../create_text_handler';
 
 describe('createTextHandler()', () => {
 

src/legacy/core_plugins/metrics/public/components/lib/__tests__/re_id_series.js

@@ -19,7 +19,7 @@
 
 import uuid from 'uuid';
 import { expect } from 'chai';
-import reIdSeries from '../re_id_series';
+import { reIdSeries } from '../re_id_series';
 
 describe('reIdSeries()', () => {
 

src/legacy/core_plugins/metrics/public/components/lib/__tests__/replace_vars.js

@@ -18,7 +18,7 @@
  */
 
 import { expect } from 'chai';
-import replaceVars from '../replace_vars';
+import { replaceVars } from '../replace_vars';
 
 describe('replaceVars(str, args, vars)', () => {
   it('replaces vars with values', () => {

src/legacy/core_plugins/metrics/public/components/lib/__tests__/tick_formatter.js

@@ -18,7 +18,7 @@
  */
 
 import { expect } from 'chai';
-import tickFormatter from '../tick_formatter';
+import { tickFormatter } from '../tick_formatter';
 
 describe('tickFormatter(format, template)', () => {
 

src/legacy/core_plugins/metrics/public/components/lib/agg_to_component.js

@@ -19,29 +19,30 @@
 
 import { MovingAverageAgg } from '../aggs/moving_average';
 import { DerivativeAgg } from '../aggs/derivative';
-import Calculation from '../aggs/calculation';
-import StdAgg from '../aggs/std_agg';
-import Percentile from '../aggs/percentile';
-import CumulativeSum from '../aggs/cumulative_sum';
+import { CalculationAgg } from '../aggs/calculation';
+import { StandardAgg } from '../aggs/std_agg';
+import { PercentileAgg } from '../aggs/percentile';
+import { CumulativeSumAgg } from '../aggs/cumulative_sum';
 import { StandardDeviationAgg } from '../aggs/std_deviation';
 import { StandardSiblingAgg } from '../aggs/std_sibling';
-import SeriesAgg from '../aggs/series_agg';
+import { SeriesAgg } from '../aggs/series_agg';
 import { SerialDiffAgg } from '../aggs/serial_diff';
 import { PositiveOnlyAgg } from '../aggs/positive_only';
 import { FilterRatioAgg } from '../aggs/filter_ratio';
 import { PercentileRankAgg } from '../aggs/percentile_rank';
 import { Static } from '../aggs/static';
-import MathAgg from '../aggs/math';
+import { MathAgg } from '../aggs/math';
 import { TopHitAgg } from '../aggs/top_hit';
-export default {
-  count: StdAgg,
-  avg: StdAgg,
-  max: StdAgg,
-  min: StdAgg,
-  sum: StdAgg,
+
+export const aggToComponent = {
+  count: StandardAgg,
+  avg: StandardAgg,
+  max: StandardAgg,
+  min: StandardAgg,
+  sum: StandardAgg,
   std_deviation: StandardDeviationAgg,
-  sum_of_squares: StdAgg,
-  variance: StdAgg,
+  sum_of_squares: StandardAgg,
+  variance: StandardAgg,
   avg_bucket: StandardSiblingAgg,
   max_bucket: StandardSiblingAgg,
   min_bucket: StandardSiblingAgg,
@@ -49,12 +50,12 @@ export default {
   variance_bucket: StandardSiblingAgg,
   sum_of_squares_bucket: StandardSiblingAgg,
   std_deviation_bucket: StandardSiblingAgg,
-  percentile: Percentile,
+  percentile: PercentileAgg,
   percentile_rank: PercentileRankAgg,
-  cardinality: StdAgg,
-  value_count: StdAgg,
-  calculation: Calculation,
-  cumulative_sum: CumulativeSum,
+  cardinality: StandardAgg,
+  value_count: StandardAgg,
+  calculation: CalculationAgg,
+  cumulative_sum: CumulativeSumAgg,
   moving_average: MovingAverageAgg,
   derivative: DerivativeAgg,
   series_agg: SeriesAgg,

src/legacy/core_plugins/metrics/public/components/lib/calculate_siblings.js

@@ -29,7 +29,7 @@ function getAncestors(siblings, item) {
   return ancestors;
 }
 
-export default (siblings, model) => {
+export const calculateSiblings = (siblings, model) => {
   const ancestors = getAncestors(siblings, model);
   return siblings.filter(row => !_.includes(ancestors, row.id));
 };

src/legacy/core_plugins/metrics/public/components/lib/collection_actions.js

@@ -56,4 +56,4 @@ export function handleAdd(props, fn = newFn) {
   }
 }
 
-export default { handleAdd, handleDelete, handleChange };
+export const collectionActions = { handleAdd, handleDelete, handleChange };

src/legacy/core_plugins/metrics/public/components/lib/convert_series_to_vars.js

@@ -18,10 +18,11 @@
  */
 
 import _ from 'lodash';
-import getLastValue from '../../../common/get_last_value';
-import tickFormatter from './tick_formatter';
+import { getLastValue } from '../../../common/get_last_value';
+import { tickFormatter } from './tick_formatter';
 import moment from 'moment';
-export default (series, model, dateFormat = 'lll', getConfig = null) => {
+
+export const convertSeriesToVars = (series, model, dateFormat = 'lll', getConfig = null) => {
   const variables = {};
   model.series.forEach(seriesModel => {
     series

src/legacy/core_plugins/metrics/public/components/lib/create_change_handler.js

@@ -18,7 +18,8 @@
  */
 
 import _ from 'lodash';
-export default (handleChange, model) => part => {
+
+export const createChangeHandler = (handleChange, model) => part => {
   const doc = _.assign({}, model, part);
   handleChange(doc);
 };

src/legacy/core_plugins/metrics/public/components/lib/create_number_handler.js

@@ -19,7 +19,8 @@
 
 import _ from 'lodash';
 import { detectIE } from './detect_ie';
-export default (handleChange) => {
+
+export const createNumberHandler = (handleChange) => {
   return (name, defaultValue) => (e) => {
     if (!detectIE() || e.keyCode === 13) e.preventDefault();
 

src/legacy/core_plugins/metrics/public/components/lib/create_select_handler.js

@@ -18,7 +18,8 @@
  */
 
 import _ from 'lodash';
-export default (handleChange) => {
+
+export const createSelectHandler = (handleChange) => {
   return (name) => (selectedOptions) => {
     if (_.isFunction(handleChange)) {
       return handleChange({

src/legacy/core_plugins/metrics/public/components/lib/create_text_handler.js

@@ -20,7 +20,7 @@
 import _ from 'lodash';
 import { detectIE } from './detect_ie';
 
-export default (handleChange) => {
+export const createTextHandler = (handleChange) => {
   return (name, defaultValue) => (e) => {
     // IE preventDefault breaks input, but we still need top prevent enter from being pressed
     if (!detectIE() || e.keyCode === 13) e.preventDefault();

src/legacy/core_plugins/metrics/public/components/lib/new_metric_agg_fn.js

@@ -18,7 +18,8 @@
  */
 
 import uuid from 'uuid';
-export default () => {
+
+export const newMetricAggFn = () => {
   return {
     id: uuid.v1(),
     type: 'count'

src/legacy/core_plugins/metrics/public/components/lib/new_series_fn.js

@@ -19,8 +19,9 @@
 
 import uuid from 'uuid';
 import _ from 'lodash';
-import newMetricAggFn from './new_metric_agg_fn';
-export default (obj = {}) => {
+import { newMetricAggFn } from './new_metric_agg_fn';
+
+export const newSeriesFn = (obj = {}) => {
   return _.assign({
     id: uuid.v1(),
     color: '#68BC00',

src/legacy/core_plugins/metrics/public/components/lib/re_id_series.js

@@ -19,7 +19,8 @@
 
 import uuid from 'uuid';
 import _ from 'lodash';
-export default source => {
+
+export const reIdSeries = source => {
   const series = _.cloneDeep(source);
   series.id = uuid.v1();
   series.metrics.forEach((metric) => {

src/legacy/core_plugins/metrics/public/components/lib/replace_vars.js

@@ -21,7 +21,7 @@ import _ from 'lodash';
 import handlebars from 'handlebars/dist/handlebars';
 import { i18n } from '@kbn/i18n';
 
-export default function replaceVars(str, args = {}, vars = {}) {
+export function replaceVars(str, args = {}, vars = {}) {
   try {
     const template = handlebars.compile(str, { strict: true, knownHelpersOnly: true });
 

src/legacy/core_plugins/metrics/public/components/lib/series_change_handler.js

@@ -18,13 +18,14 @@
  */
 
 import _ from 'lodash';
-import newMetricAggFn from './new_metric_agg_fn';
+import { newMetricAggFn } from './new_metric_agg_fn';
 import { isBasicAgg } from '../../../common/agg_lookup';
 import {
   handleAdd,
   handleChange
 } from './collection_actions';
-export default (props, items) => doc => {
+
+export const seriesChangeHandler = (props, items) => doc => {
   // If we only have one sibling and the user changes to a pipeline
   // agg we are going to add the pipeline instead of changing the
   // current item.

src/legacy/core_plugins/metrics/public/components/lib/tick_formatter.js

@@ -27,7 +27,7 @@ const durationsLookup = durationInputOptions.reduce((acc, row) => {
   return acc;
 }, {});
 
-export default (format = '0,0.[00]', template, getConfig = null) => {
+export const tickFormatter = (format = '0,0.[00]', template, getConfig = null) => {
   if (!template) template = '{{value}}';
   const render = handlebars.compile(template, { knownHelpersOnly: true });
   const durationFormatTest = /[pnumshdwMY]+,[pnumshdwMY]+,\d+/;

src/legacy/core_plugins/metrics/public/components/markdown_editor.js

@@ -24,8 +24,8 @@
 import PropTypes from 'prop-types';
 
 import React, { Component } from 'react';
-import tickFormatter from './lib/tick_formatter';
-import convertSeriesToVars from './lib/convert_series_to_vars';
+import { tickFormatter } from './lib/tick_formatter';
+import { convertSeriesToVars } from './lib/convert_series_to_vars';
 import _ from 'lodash';
 import 'brace/mode/markdown';
 import 'brace/theme/github';
@@ -40,7 +40,7 @@ import {
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-class MarkdownEditor extends Component {
+export class MarkdownEditor extends Component {
   state = {
     visData: null,
   };
@@ -234,5 +234,3 @@ MarkdownEditor.propTypes = {
   dateFormat: PropTypes.string,
   visData$: PropTypes.object,
 };
-
-export default MarkdownEditor;

src/legacy/core_plugins/metrics/public/components/no_data.js

@@ -21,7 +21,7 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui';
 
-function NoDataComponent() {
+export function NoDataComponent() {
   return (
     <div className="visError" data-test-subj="noTSVBDataMessage">
       <EuiText size="xs" color="subdued">
@@ -39,4 +39,3 @@ function NoDataComponent() {
     </div>
   );
 }
-export default NoDataComponent;

src/legacy/core_plugins/metrics/public/components/panel_config.js

@@ -19,12 +19,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import timeseries from './panel_config/timeseries';
-import metric from './panel_config/metric';
-import topN from './panel_config/top_n';
-import table from './panel_config/table';
-import gauge from './panel_config/gauge';
-import markdown from './panel_config/markdown';
+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';
+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';
 
 const types = {
@@ -36,7 +36,7 @@ const types = {
   markdown
 };
 
-function PanelConfig(props) {
+export function PanelConfig(props) {
   const { model } = props;
   const component = types[model.type];
   if (component) {
@@ -59,5 +59,3 @@ PanelConfig.propTypes = {
   dateFormat: PropTypes.string,
   visData$: PropTypes.object,
 };
-
-export default PanelConfig;

src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js

@@ -19,14 +19,14 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SeriesEditor from '../series_editor';
+import { SeriesEditor } from '../series_editor';
 import { IndexPattern } from '../index_pattern';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
-import ColorRules from '../color_rules';
-import ColorPicker from '../color_picker';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
+import { ColorRules } from '../color_rules';
+import { ColorPicker } from '../color_picker';
 import uuid from 'uuid';
-import YesNo from '../yes_no';
+import { YesNo } from '../yes_no';
 import {
   htmlIdGenerator,
   EuiComboBox,
@@ -344,5 +344,4 @@ GaugePanelConfigUi.propTypes = {
   visData$: PropTypes.object,
 };
 
-const GaugePanelConfig = injectI18n(GaugePanelConfigUi);
-export default GaugePanelConfig;
+export const GaugePanelConfig = injectI18n(GaugePanelConfigUi);

src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js

@@ -19,14 +19,14 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SeriesEditor from '../series_editor';
+import { SeriesEditor } from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import 'brace/mode/less';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
-import ColorPicker from '../color_picker';
-import YesNo from '../yes_no';
-import MarkdownEditor from '../markdown_editor';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
+import { ColorPicker } from '../color_picker';
+import { YesNo } from '../yes_no';
+import { MarkdownEditor } from '../markdown_editor';
 import less from 'less/lib/less-browser';
 import {
   htmlIdGenerator,
@@ -320,5 +320,4 @@ MarkdownPanelConfigUi.propTypes = {
   visData$: PropTypes.object,
 };
 
-const MarkdownPanelConfig = injectI18n(MarkdownPanelConfigUi);
-export default MarkdownPanelConfig;
+export const MarkdownPanelConfig = injectI18n(MarkdownPanelConfigUi);

src/legacy/core_plugins/metrics/public/components/panel_config/metric.js

@@ -19,11 +19,11 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SeriesEditor from '../series_editor';
+import { SeriesEditor } from '../series_editor';
 import { IndexPattern } from '../index_pattern';
-import createTextHandler from '../lib/create_text_handler';
-import ColorRules from '../color_rules';
-import YesNo from '../yes_no';
+import { createTextHandler } from '../lib/create_text_handler';
+import { ColorRules } from '../color_rules';
+import { YesNo } from '../yes_no';
 import uuid from 'uuid';
 import {
   htmlIdGenerator,
@@ -41,7 +41,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-class MetricPanelConfig extends Component {
+export class MetricPanelConfig extends Component {
 
   constructor(props) {
     super(props);
@@ -194,5 +194,3 @@ MetricPanelConfig.propTypes = {
   onChange: PropTypes.func,
   visData$: PropTypes.object,
 };
-
-export default MetricPanelConfig;

src/legacy/core_plugins/metrics/public/components/panel_config/table.js

@@ -19,13 +19,13 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import FieldSelect from '../aggs/field_select';
-import SeriesEditor from '../series_editor';
+import { FieldSelect } from '../aggs/field_select';
+import { SeriesEditor } from '../series_editor';
 import { IndexPattern } from '../index_pattern';
-import createTextHandler from '../lib/create_text_handler';
+import { createTextHandler } from '../lib/create_text_handler';
 import { get } from 'lodash';
 import uuid from 'uuid';
-import YesNo from '../yes_no';
+import { YesNo } from '../yes_no';
 import {
   htmlIdGenerator,
   EuiTabs,
@@ -44,7 +44,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-class TablePanelConfig extends Component {
+export class TablePanelConfig extends Component {
 
   constructor(props) {
     super(props);
@@ -283,5 +283,3 @@ TablePanelConfig.propTypes = {
   onChange: PropTypes.func,
   visData$: PropTypes.object,
 };
-
-export default TablePanelConfig;

src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js

@@ -19,13 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SeriesEditor from '../series_editor';
-import AnnotationsEditor from '../annotations_editor';
+import { SeriesEditor } from '../series_editor';
+import { AnnotationsEditor } from '../annotations_editor';
 import { IndexPattern } from '../index_pattern';
-import createSelectHandler from '../lib/create_select_handler';
-import createTextHandler from '../lib/create_text_handler';
-import ColorPicker from '../color_picker';
-import YesNo from '../yes_no';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
+import { ColorPicker } from '../color_picker';
+import { YesNo } from '../yes_no';
 import {
   htmlIdGenerator,
   EuiComboBox,
@@ -383,5 +383,4 @@ TimeseriesPanelConfigUi.propTypes = {
   visData$: PropTypes.object,
 };
 
-const TimeseriesPanelConfig = injectI18n(TimeseriesPanelConfigUi);
-export default TimeseriesPanelConfig;
+export const TimeseriesPanelConfig = injectI18n(TimeseriesPanelConfigUi);

src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js

@@ -19,13 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SeriesEditor from '../series_editor';
+import { SeriesEditor } from '../series_editor';
 import { IndexPattern } from '../index_pattern';
-import createTextHandler from '../lib/create_text_handler';
-import ColorRules from '../color_rules';
-import ColorPicker from '../color_picker';
+import { createTextHandler } from '../lib/create_text_handler';
+import { ColorRules } from '../color_rules';
+import { ColorPicker } from '../color_picker';
 import uuid from 'uuid';
-import YesNo from '../yes_no';
+import { YesNo } from '../yes_no';
 import {
   htmlIdGenerator,
   EuiTabs,
@@ -43,7 +43,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-class TopNPanelConfig extends Component {
+export class TopNPanelConfig extends Component {
 
   constructor(props) {
     super(props);
@@ -249,5 +249,3 @@ TopNPanelConfig.propTypes = {
   onChange: PropTypes.func,
   visData$: PropTypes.object,
 };
-
-export default TopNPanelConfig;

src/legacy/core_plugins/metrics/public/components/series.js

@@ -21,12 +21,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { assign, get } from 'lodash';
 
-import timeseries from './vis_types/timeseries/series';
-import metric from './vis_types/metric/series';
-import topN from './vis_types/top_n/series';
-import table from './vis_types/table/series';
-import gauge from './vis_types/gauge/series';
-import markdown from './vis_types/markdown/series';
+import { TimeseriesSeries as timeseries } from './vis_types/timeseries/series';
+import { MetricSeries as metric } from './vis_types/metric/series';
+import { TopNSeries as topN } from './vis_types/top_n/series';
+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';
 
 const lookup = {
@@ -38,7 +38,7 @@ const lookup = {
   markdown,
 };
 
-class Series extends Component {
+export class Series extends Component {
   constructor(props) {
     super(props);
 
@@ -149,5 +149,3 @@ Series.propTypes = {
   visData$: PropTypes.object,
   dragHandleProps: PropTypes.object,
 };
-
-export default Series;

src/legacy/core_plugins/metrics/public/components/series_config.js

@@ -19,10 +19,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import DataFormatPicker from './data_format_picker';
-import createSelectHandler from './lib/create_select_handler';
-import createTextHandler from './lib/create_text_handler';
-import YesNo from './yes_no';
+import { DataFormatPicker } from './data_format_picker';
+import { createSelectHandler } from './lib/create_select_handler';
+import { createTextHandler } from './lib/create_text_handler';
+import { YesNo } from './yes_no';
 import { IndexPattern } from './index_pattern';
 import {
   htmlIdGenerator,

src/legacy/core_plugins/metrics/public/components/series_editor.js

@@ -20,20 +20,20 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { find } from 'lodash';
-import reIdSeries from './lib/re_id_series';
-import Series from './series';
+import { reIdSeries } from './lib/re_id_series';
+import { Series } from './series';
 import {
   handleAdd,
   handleDelete,
   handleChange,
 } from './lib/collection_actions';
-import newSeriesFn from './lib/new_series_fn';
+import { newSeriesFn } from './lib/new_series_fn';
 import { EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui';
 import { reorder } from './lib/reorder';
 
 const DROPPABLE_ID = 'series_editor_dnd';
 
-class SeriesEditor extends Component {
+export class SeriesEditor extends Component {
 
   handleClone = series => {
     const newSeries = reIdSeries(series);
@@ -141,5 +141,3 @@ SeriesEditor.propTypes = {
   onChange: PropTypes.func,
   visData$: PropTypes.object,
 };
-
-export default SeriesEditor;

src/legacy/core_plugins/metrics/public/components/split.js

@@ -36,7 +36,7 @@ const SPLIT_MODES = {
   EVERYTHING: 'everything',
 };
 
-class Split extends Component {
+export class Split extends Component {
   componentWillReceiveProps(nextProps) {
     const { model } = nextProps;
     if (model.split_mode === 'filters' && !model.split_filters) {
@@ -92,5 +92,3 @@ Split.propTypes = {
   onChange: PropTypes.func,
   panel: PropTypes.object,
 };
-
-export default Split;

src/legacy/core_plugins/metrics/public/components/splits/everything.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import createSelectHandler from '../lib/create_select_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import { GroupBySelect } from './group_by_select';
 import PropTypes from 'prop-types';
 import React from 'react';

src/legacy/core_plugins/metrics/public/components/splits/filter.js

@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import createTextHandler from '../lib/create_text_handler';
-import createSelectHandler from '../lib/create_select_handler';
+import { createTextHandler } from '../lib/create_text_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import { GroupBySelect } from './group_by_select';
 import PropTypes from 'prop-types';
 import React from 'react';

src/legacy/core_plugins/metrics/public/components/splits/filter_items.js

@@ -20,9 +20,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import _ from 'lodash';
-import * as collectionActions from '../lib/collection_actions';
-import AddDeleteButtons from '../add_delete_buttons';
-import ColorPicker from '../color_picker';
+import { collectionActions } from '../lib/collection_actions';
+import { AddDeleteButtons } from '../add_delete_buttons';
+import { ColorPicker } from '../color_picker';
 import uuid from 'uuid';
 import { EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
@@ -115,5 +115,4 @@ FilterItemsUi.propTypes = {
   onChange: PropTypes.func
 };
 
-const FilterItems = injectI18n(FilterItemsUi);
-export default FilterItems;
+export const FilterItems = injectI18n(FilterItemsUi);

src/legacy/core_plugins/metrics/public/components/splits/filters.js

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import createSelectHandler from '../lib/create_select_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import { GroupBySelect } from './group_by_select';
-import FilterItems from './filter_items';
+import { FilterItems } from './filter_items';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';

src/legacy/core_plugins/metrics/public/components/splits/terms.js

@@ -21,10 +21,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { get, find } from 'lodash';
 import { GroupBySelect } from './group_by_select';
-import createTextHandler from '../lib/create_text_handler';
-import createSelectHandler from '../lib/create_select_handler';
-import FieldSelect from '../aggs/field_select';
-import MetricSelect from '../aggs/metric_select';
+import { createTextHandler } from '../lib/create_text_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
+import { FieldSelect } from '../aggs/field_select';
+import { MetricSelect } from '../aggs/metric_select';
 import {
   htmlIdGenerator,
   EuiFlexGroup,

src/legacy/core_plugins/metrics/public/components/splits/unsupported_split.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import createSelectHandler from '../lib/create_select_handler';
+import { createSelectHandler } from '../lib/create_select_handler';
 import { GroupBySelect } from './group_by_select';
 import PropTypes from 'prop-types';
 import React from 'react';

src/legacy/core_plugins/metrics/public/components/vis_editor.js

@@ -22,17 +22,17 @@ import React, { Component } from 'react';
 import * as Rx from 'rxjs';
 import { share } from 'rxjs/operators';
 import { isEqual, isEmpty, debounce } from 'lodash';
-import VisEditorVisualization from './vis_editor_visualization';
-import Visualization from './visualization';
-import VisPicker from './vis_picker';
-import PanelConfig from './panel_config';
-import brushHandler from '../lib/create_brush_handler';
+import { VisEditorVisualization } from './vis_editor_visualization';
+import { Visualization } from './visualization';
+import { VisPicker } from './vis_picker';
+import { PanelConfig } from './panel_config';
+import { brushHandler } from '../lib/create_brush_handler';
 import { fetchFields } from '../lib/fetch_fields';
 import { extractIndexPatterns } from '../../common/extract_index_patterns';
 
 const VIS_STATE_DEBOUNCE_DELAY = 200;
 
-class VisEditor extends Component {
+export class VisEditor extends Component {
   constructor(props) {
     super(props);
     const { vis } = props;
@@ -198,5 +198,3 @@ VisEditor.propTypes = {
   savedObj: PropTypes.object,
   timeRange: PropTypes.object,
 };
-
-export default VisEditor;

src/legacy/core_plugins/metrics/public/components/vis_editor_visualization.js

@@ -27,7 +27,7 @@ import { PANEL_TYPES } from '../../common/panel_types';
 
 const MIN_CHART_HEIGHT = 250;
 
-class VisEditorVisualization extends Component {
+class VisEditorVisualizationUI extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -270,7 +270,7 @@ class VisEditorVisualization extends Component {
   }
 }
 
-VisEditorVisualization.propTypes = {
+VisEditorVisualizationUI.propTypes = {
   model: PropTypes.object,
   onCommit: PropTypes.func,
   uiState: PropTypes.object,
@@ -282,4 +282,4 @@ VisEditorVisualization.propTypes = {
   appState: PropTypes.object,
 };
 
-export default injectI18n(VisEditorVisualization);
+export const VisEditorVisualization = injectI18n(VisEditorVisualizationUI);

src/legacy/core_plugins/metrics/public/components/vis_editor_visualization.test.js

@@ -21,7 +21,7 @@ jest.mock('ui/visualize/loader/visualize_loader', () => ({}));
 
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import VisEditorVisualization from './vis_editor_visualization';
+import { VisEditorVisualization } from './vis_editor_visualization';
 
 describe('getVisualizeLoader', () => {
   let updateStub;

src/legacy/core_plugins/metrics/public/components/vis_picker.js

@@ -46,7 +46,7 @@ VisPickerItem.propTypes = {
   selected: PropTypes.bool
 };
 
-const VisPicker = injectI18n(function (props) {
+export const VisPicker = injectI18n(function (props) {
   const handleChange = (type) => {
     props.onChange({ type });
   };
@@ -82,5 +82,3 @@ VisPicker.propTypes = {
   model: PropTypes.object,
   onChange: PropTypes.func
 };
-
-export default VisPicker;

src/legacy/core_plugins/metrics/public/components/vis_types/gauge/series.js

@@ -19,13 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import ColorPicker from '../../color_picker';
-import AddDeleteButtons from '../../add_delete_buttons';
+import { ColorPicker } from '../../color_picker';
+import { AddDeleteButtons } from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
-import Split from '../../split';
+import { Split } from '../../split';
 import { SeriesDragHandler } from '../../series_drag_handler';
 import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
-import createTextHandler from '../../lib/create_text_handler';
+import { createTextHandler } from '../../lib/create_text_handler';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { Aggs } from '../../aggs/aggs';
 
@@ -198,5 +198,4 @@ GaugeSeriesUi.propTypes = {
   dragHandleProps: PropTypes.object,
 };
 
-const GaugeSeries = injectI18n(GaugeSeriesUi);
-export default GaugeSeries;
+export const GaugeSeries = injectI18n(GaugeSeriesUi);

src/legacy/core_plugins/metrics/public/components/vis_types/gauge/vis.js

@@ -20,10 +20,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { visWithSplits } from '../../vis_with_splits';
-import tickFormatter from '../../lib/tick_formatter';
+import { tickFormatter } from '../../lib/tick_formatter';
 import _ from 'lodash';
-import Gauge from '../../../visualizations/components/gauge';
-import getLastValue from '../../../../common/get_last_value';
+import { Gauge } from '../../../visualizations/components/gauge';
+import { getLastValue } from '../../../../common/get_last_value';
 
 function getColors(props) {
   const { model, visData } = props;
@@ -98,4 +98,4 @@ GaugeVisualization.propTypes = {
   getConfig: PropTypes.func
 };
 
-export default visWithSplits(GaugeVisualization);
+export const gauge = visWithSplits(GaugeVisualization);

src/legacy/core_plugins/metrics/public/components/vis_types/markdown/series.js

@@ -19,10 +19,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AddDeleteButtons from '../../add_delete_buttons';
+import { AddDeleteButtons } from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
-import Split from '../../split';
-import createTextHandler from '../../lib/create_text_handler';
+import { Split } from '../../split';
+import { createTextHandler } from '../../lib/create_text_handler';
 import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { Aggs } from '../../aggs/aggs';
@@ -192,5 +192,4 @@ MarkdownSeriesUi.propTypes = {
   dragHandleProps: PropTypes.object,
 };
 
-const MarkdownSeries = injectI18n(MarkdownSeriesUi);
-export default MarkdownSeries;
+export const MarkdownSeries = injectI18n(MarkdownSeriesUi);

src/legacy/core_plugins/metrics/public/components/vis_types/markdown/vis.js

@@ -23,14 +23,14 @@ import uuid from 'uuid';
 import { get } from 'lodash';
 import { Markdown } from 'ui/markdown/markdown';
 
-import ErrorComponent from '../../error';
-import replaceVars from '../../lib/replace_vars';
-import convertSeriesToVars from '../../lib/convert_series_to_vars';
+import { ErrorComponent } from '../../error';
+import { replaceVars } from '../../lib/replace_vars';
+import { convertSeriesToVars } from '../../lib/convert_series_to_vars';
 import { isBackgroundInverted } from '../../../../common/set_is_reversed';
 
 const getMarkdownId = id => `markdown-${id}`;
 
-function MarkdownVisualization(props) {
+export function MarkdownVisualization(props) {
   const { backgroundColor, model, visData, dateFormat } = props;
   const series = get(visData, `${model.id}.series`, []);
   const variables = convertSeriesToVars(series, model, dateFormat, props.getConfig);
@@ -98,5 +98,3 @@ MarkdownVisualization.propTypes = {
   dateFormat: PropTypes.string,
   getConfig: PropTypes.func
 };
-
-export default MarkdownVisualization;

src/legacy/core_plugins/metrics/public/components/vis_types/metric/series.js

@@ -19,13 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import ColorPicker from '../../color_picker';
-import AddDeleteButtons from '../../add_delete_buttons';
+import { ColorPicker } from '../../color_picker';
+import { AddDeleteButtons } from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
-import Split from '../../split';
+import { Split } from '../../split';
 import { SeriesDragHandler } from '../../series_drag_handler';
 import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
-import createTextHandler from '../../lib/create_text_handler';
+import { createTextHandler } from '../../lib/create_text_handler';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { Aggs } from '../../aggs/aggs';
 
@@ -204,5 +204,4 @@ MetricSeriesUi.propTypes = {
   dragHandleProps: PropTypes.object,
 };
 
-const MetricSeries = injectI18n(MetricSeriesUi);
-export default MetricSeries;
+export const MetricSeries = injectI18n(MetricSeriesUi);

src/legacy/core_plugins/metrics/public/components/vis_types/metric/vis.js

@@ -20,10 +20,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { visWithSplits } from '../../vis_with_splits';
-import tickFormatter from '../../lib/tick_formatter';
+import { tickFormatter } from '../../lib/tick_formatter';
 import _ from 'lodash';
-import Metric from '../../../visualizations/components/metric';
-import getLastValue from '../../../../common/get_last_value';
+import { Metric } from '../../../visualizations/components/metric';
+import { getLastValue } from '../../../../common/get_last_value';
 import { isBackgroundInverted } from '../../../../common/set_is_reversed';
 
 function getColors(props) {
@@ -93,4 +93,4 @@ MetricVisualization.propTypes = {
   getConfig: PropTypes.func
 };
 
-export default visWithSplits(MetricVisualization);
+export const metric = visWithSplits(MetricVisualization);

src/legacy/core_plugins/metrics/public/components/vis_types/table/config.js

@@ -20,12 +20,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import uuid from 'uuid';
-import DataFormatPicker from '../../data_format_picker';
-import createSelectHandler from '../../lib/create_select_handler';
-import createTextHandler from '../../lib/create_text_handler';
-import FieldSelect from '../../aggs/field_select';
-import YesNo from '../../yes_no';
-import ColorRules from '../../color_rules';
+import { DataFormatPicker } from '../../data_format_picker';
+import { createSelectHandler } from '../../lib/create_select_handler';
+import { createTextHandler } from '../../lib/create_text_handler';
+import { FieldSelect } from '../../aggs/field_select';
+import { YesNo } from '../../yes_no';
+import { ColorRules } from '../../color_rules';
 import {
   htmlIdGenerator,
   EuiComboBox,
@@ -41,7 +41,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-class TableSeriesConfig extends Component {
+class TableSeriesConfigUI extends Component {
 
   componentWillMount() {
     const { model } = this.props;
@@ -213,12 +213,12 @@ class TableSeriesConfig extends Component {
 
 }
 
-TableSeriesConfig.propTypes = {
+TableSeriesConfigUI.propTypes = {
   fields: PropTypes.object,
   model: PropTypes.object,
   onChange: PropTypes.func
 };
 
-export default injectI18n(TableSeriesConfig);
+export const TableSeriesConfig = injectI18n(TableSeriesConfigUI);
 
 

src/legacy/core_plugins/metrics/public/components/vis_types/table/is_sortable.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import basicAggs from '../../../../common/basic_aggs';
+import { basicAggs } from '../../../../common/basic_aggs';
 
 export function isSortable(metric) {
   return basicAggs.includes(metric.type);

src/legacy/core_plugins/metrics/public/components/vis_types/table/series.js

@@ -19,15 +19,15 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import AddDeleteButtons from '../../add_delete_buttons';
-import SeriesConfig from './config';
+import { AddDeleteButtons } from '../../add_delete_buttons';
+import { TableSeriesConfig as SeriesConfig } from './config';
 import { SeriesDragHandler } from '../../series_drag_handler';
 import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
-import createTextHandler from '../../lib/create_text_handler';
+import { createTextHandler } from '../../lib/create_text_handler';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { Aggs } from '../../aggs/aggs';
 
-function TableSeries(props) {
+function TableSeriesUI(props) {
   const {
     model,
     onAdd,
@@ -154,7 +154,7 @@ function TableSeries(props) {
   );
 }
 
-TableSeries.propTypes = {
+TableSeriesUI.propTypes = {
   className: PropTypes.string,
   disableAdd: PropTypes.bool,
   disableDelete: PropTypes.bool,
@@ -176,4 +176,4 @@ TableSeries.propTypes = {
   dragHandleProps: PropTypes.object,
 };
 
-export default injectI18n(TableSeries);
+export const TableSeries = injectI18n(TableSeriesUI);

src/legacy/core_plugins/metrics/public/components/vis_types/table/vis.js

@@ -21,11 +21,11 @@ import _, { isArray, last, get } from 'lodash';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { fieldFormats } from 'ui/registry/field_formats';
-import tickFormatter from '../../lib/tick_formatter';
-import calculateLabel from '../../../../common/calculate_label';
+import { tickFormatter } from '../../lib/tick_formatter';
+import { calculateLabel } from '../../../../common/calculate_label';
 import { isSortable } from './is_sortable';
 import { EuiToolTip, EuiIcon } from '@elastic/eui';
-import replaceVars from '../../lib/replace_vars';
+import { replaceVars } from '../../lib/replace_vars';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { METRIC_TYPES } from '../../../../common/metric_types';
@@ -46,7 +46,7 @@ function getColor(rules, colorKey, value) {
   return color;
 }
 
-class TableVis extends Component {
+export class TableVis extends Component {
 
   constructor(props) {
     super(props);
@@ -251,5 +251,3 @@ TableVis.propTypes = {
   pageNumber: PropTypes.number,
   getConfig: PropTypes.func,
 };
-
-export default TableVis;