[Explore] Streamlined metric definitions for SQLA and Druid (#4663)

* adding streamlined metric editing

* addressing lint issues on new metrics control

* enabling druid

superset/assets/spec/javascripts/explore/AdhocMetric_spec.js

@@ -0,0 +1,85 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+
+import AdhocMetric from '../../../javascripts/explore/AdhocMetric';
+import { AGGREGATES } from '../../../javascripts/explore/constants';
+
+const valueColumn = { type: 'DOUBLE', column_name: 'value' };
+
+describe('AdhocMetric', () => {
+  it('sets label, hasCustomLabel and optionName in constructor', () => {
+    const adhocMetric = new AdhocMetric({
+      column: valueColumn,
+      aggregate: AGGREGATES.SUM,
+    });
+    expect(adhocMetric.optionName.length).to.be.above(10);
+    expect(adhocMetric).to.deep.equal({
+      column: valueColumn,
+      aggregate: AGGREGATES.SUM,
+      fromFormData: false,
+      label: 'SUM(value)',
+      hasCustomLabel: false,
+      optionName: adhocMetric.optionName,
+    });
+  });
+
+  it('can create altered duplicates', () => {
+    const adhocMetric1 = new AdhocMetric({
+      column: valueColumn,
+      aggregate: AGGREGATES.SUM,
+    });
+    const adhocMetric2 = adhocMetric1.duplicateWith({ aggregate: AGGREGATES.AVG });
+
+    expect(adhocMetric1.column).to.equal(adhocMetric2.column);
+    expect(adhocMetric1.column).to.equal(valueColumn);
+
+    expect(adhocMetric1.aggregate).to.equal(AGGREGATES.SUM);
+    expect(adhocMetric2.aggregate).to.equal(AGGREGATES.AVG);
+  });
+
+  it('can verify equality', () => {
+    const adhocMetric1 = new AdhocMetric({
+      column: valueColumn,
+      aggregate: AGGREGATES.SUM,
+    });
+    const adhocMetric2 = adhocMetric1.duplicateWith({});
+
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocMetric1.equals(adhocMetric2)).to.be.true;
+  });
+
+  it('can verify inequality', () => {
+    const adhocMetric1 = new AdhocMetric({
+      column: valueColumn,
+      aggregate: AGGREGATES.SUM,
+      label: 'old label',
+      hasCustomLabel: true,
+    });
+    const adhocMetric2 = adhocMetric1.duplicateWith({ label: 'new label' });
+
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocMetric1.equals(adhocMetric2)).to.be.false;
+  });
+
+  it('updates label if hasCustomLabel is false', () => {
+    const adhocMetric1 = new AdhocMetric({
+      column: valueColumn,
+      aggregate: AGGREGATES.SUM,
+    });
+    const adhocMetric2 = adhocMetric1.duplicateWith({ aggregate: AGGREGATES.AVG });
+
+    expect(adhocMetric2.label).to.equal('AVG(value)');
+  });
+
+  it('keeps label if hasCustomLabel is true', () => {
+    const adhocMetric1 = new AdhocMetric({
+      column: valueColumn,
+      aggregate: AGGREGATES.SUM,
+      hasCustomLabel: true,
+      label: 'label1',
+    });
+    const adhocMetric2 = adhocMetric1.duplicateWith({ aggregate: AGGREGATES.AVG });
+
+    expect(adhocMetric2.label).to.equal('label1');
+  });
+});

superset/assets/spec/javascripts/explore/components/AdhocMetricEditPopoverTitle_spec.jsx

@@ -0,0 +1,48 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+import { OverlayTrigger } from 'react-bootstrap';
+
+import AdhocMetric from '../../../../javascripts/explore/AdhocMetric';
+import AdhocMetricEditPopoverTitle from '../../../../javascripts/explore/components/AdhocMetricEditPopoverTitle';
+import { AGGREGATES } from '../../../../javascripts/explore/constants';
+
+const columns = [
+  { type: 'VARCHAR(255)', column_name: 'source' },
+  { type: 'VARCHAR(255)', column_name: 'target' },
+  { type: 'DOUBLE', column_name: 'value' },
+];
+
+const sumValueAdhocMetric = new AdhocMetric({
+  column: columns[2],
+  aggregate: AGGREGATES.SUM,
+});
+
+function setup(overrides) {
+  const onChange = sinon.spy();
+  const props = {
+    adhocMetric: sumValueAdhocMetric,
+    onChange,
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocMetricEditPopoverTitle {...props} />);
+  return { wrapper, onChange };
+}
+
+describe('AdhocMetricEditPopoverTitle', () => {
+  it('renders an OverlayTrigger wrapper with the title', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(OverlayTrigger)).to.have.lengthOf(1);
+    expect(wrapper.find(OverlayTrigger).dive().text()).to.equal('My Metric\xa0');
+  });
+
+  it('transfers to edit mode when clicked', () => {
+    const { wrapper } = setup();
+    expect(wrapper.state('isEditable')).to.be.false;
+    wrapper.simulate('click');
+    expect(wrapper.state('isEditable')).to.be.true;
+  });
+});

superset/assets/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx

@@ -0,0 +1,90 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+import { Button, FormGroup, Popover } from 'react-bootstrap';
+
+import AdhocMetric from '../../../../javascripts/explore/AdhocMetric';
+import AdhocMetricEditPopover from '../../../../javascripts/explore/components/AdhocMetricEditPopover';
+import { AGGREGATES } from '../../../../javascripts/explore/constants';
+
+const columns = [
+  { type: 'VARCHAR(255)', column_name: 'source' },
+  { type: 'VARCHAR(255)', column_name: 'target' },
+  { type: 'DOUBLE', column_name: 'value' },
+];
+
+const sumValueAdhocMetric = new AdhocMetric({
+  column: columns[2],
+  aggregate: AGGREGATES.SUM,
+});
+
+function setup(overrides) {
+  const onChange = sinon.spy();
+  const onClose = sinon.spy();
+  const props = {
+    adhocMetric: sumValueAdhocMetric,
+    onChange,
+    onClose,
+    columns,
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocMetricEditPopover {...props} />);
+  return { wrapper, onChange, onClose };
+}
+
+describe('AdhocMetricEditPopover', () => {
+  it('renders a popover with edit metric form contents', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(Popover)).to.have.lengthOf(1);
+    expect(wrapper.find(FormGroup)).to.have.lengthOf(2);
+    expect(wrapper.find(Button)).to.have.lengthOf(2);
+  });
+
+  it('overwrites the adhocMetric in state with onColumnChange', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onColumnChange(columns[0]);
+    expect(wrapper.state('adhocMetric')).to.deep.equal(sumValueAdhocMetric.duplicateWith({ column: columns[0] }));
+  });
+
+  it('overwrites the adhocMetric in state with onAggregateChange', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onAggregateChange({ aggregate: AGGREGATES.AVG });
+    expect(wrapper.state('adhocMetric')).to.deep.equal(sumValueAdhocMetric.duplicateWith({ aggregate: AGGREGATES.AVG }));
+  });
+
+  it('overwrites the adhocMetric in state with onLabelChange', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
+    expect(wrapper.state('adhocMetric').label).to.equal('new label');
+    expect(wrapper.state('adhocMetric').hasCustomLabel).to.be.true;
+  });
+
+  it('returns to default labels when the custom label is cleared', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
+    wrapper.instance().onLabelChange({ target: { value: '' } });
+    expect(wrapper.state('adhocMetric').label).to.equal('SUM(value)');
+    expect(wrapper.state('adhocMetric').hasCustomLabel).to.be.false;
+  });
+
+  it('prevents saving if no column or aggregate is chosen', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(Button).find({ disabled: true })).to.have.lengthOf(0);
+    wrapper.instance().onColumnChange(null);
+    expect(wrapper.find(Button).find({ disabled: true })).to.have.lengthOf(1);
+    wrapper.instance().onColumnChange({ column: columns[0] });
+    expect(wrapper.find(Button).find({ disabled: true })).to.have.lengthOf(0);
+    wrapper.instance().onAggregateChange(null);
+    expect(wrapper.find(Button).find({ disabled: true })).to.have.lengthOf(1);
+  });
+
+  it('highlights save if changes are present', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).to.have.lengthOf(0);
+    wrapper.instance().onColumnChange({ column: columns[1] });
+    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).to.have.lengthOf(1);
+  });
+});

superset/assets/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx

@@ -0,0 +1,42 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+import { Label, OverlayTrigger } from 'react-bootstrap';
+
+import AdhocMetric from '../../../../javascripts/explore/AdhocMetric';
+import AdhocMetricOption from '../../../../javascripts/explore/components/AdhocMetricOption';
+import { AGGREGATES } from '../../../../javascripts/explore/constants';
+
+const columns = [
+  { type: 'VARCHAR(255)', column_name: 'source' },
+  { type: 'VARCHAR(255)', column_name: 'target' },
+  { type: 'DOUBLE', column_name: 'value' },
+];
+
+const sumValueAdhocMetric = new AdhocMetric({
+  column: columns[2],
+  aggregate: AGGREGATES.SUM,
+});
+
+function setup(overrides) {
+  const onMetricEdit = sinon.spy();
+  const props = {
+    adhocMetric: sumValueAdhocMetric,
+    onMetricEdit,
+    columns,
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocMetricOption {...props} />);
+  return { wrapper, onMetricEdit };
+}
+
+describe('AdhocMetricOption', () => {
+  it('renders an overlay trigger wrapper for the label', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(OverlayTrigger)).to.have.lengthOf(1);
+    expect(wrapper.find(Label)).to.have.lengthOf(1);
+  });
+});

superset/assets/spec/javascripts/explore/components/AggregateOption_spec.jsx

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import AggregateOption from '../../../../javascripts/explore/components/AggregateOption';
+
+describe('AggregateOption', () => {
+  it('renders the aggregate', () => {
+    const wrapper = shallow(<AggregateOption aggregate={{ aggregate_name: 'SUM' }} />);
+    expect(wrapper.text()).to.equal('SUM');
+  });
+});

superset/assets/spec/javascripts/explore/components/MetricDefinitionOption_spec.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import MetricDefinitionOption from '../../../../javascripts/explore/components/MetricDefinitionOption';
+import MetricOption from '../../../../javascripts/components/MetricOption';
+import ColumnOption from '../../../../javascripts/components/ColumnOption';
+import AggregateOption from '../../../../javascripts/explore/components/AggregateOption';
+
+describe('MetricDefinitionOption', () => {
+  it('renders a MetricOption given a saved metric', () => {
+    const wrapper = shallow(<MetricDefinitionOption option={{ metric_name: 'a_saved_metric' }} />);
+    expect(wrapper.find(MetricOption)).to.have.lengthOf(1);
+  });
+
+  it('renders a ColumnOption given a column', () => {
+    const wrapper = shallow(<MetricDefinitionOption option={{ column_name: 'a_column' }} />);
+    expect(wrapper.find(ColumnOption)).to.have.lengthOf(1);
+  });
+
+  it('renders an AggregateOption given an aggregate metric', () => {
+    const wrapper = shallow(<MetricDefinitionOption option={{ aggregate_name: 'an_aggregate' }} />);
+    expect(wrapper.find(AggregateOption)).to.have.lengthOf(1);
+  });
+});

superset/assets/spec/javascripts/explore/components/MetricDefinitionValue_spec.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import MetricDefinitionValue from '../../../../javascripts/explore/components/MetricDefinitionValue';
+import MetricOption from '../../../../javascripts/components/MetricOption';
+import AdhocMetricOption from '../../../../javascripts/explore/components/AdhocMetricOption';
+import AdhocMetric from '../../../../javascripts/explore/AdhocMetric';
+import { AGGREGATES } from '../../../../javascripts/explore/constants';
+
+const sumValueAdhocMetric = new AdhocMetric({
+  column: { type: 'DOUBLE', column_name: 'value' },
+  aggregate: AGGREGATES.SUM,
+});
+
+describe('MetricDefinitionValue', () => {
+  it('renders a MetricOption given a saved metric', () => {
+    const wrapper = shallow(<MetricDefinitionValue option={{ metric_name: 'a_saved_metric' }} />);
+    expect(wrapper.find(MetricOption)).to.have.lengthOf(1);
+  });
+
+  it('renders an AdhocMetricOption given an adhoc metric', () => {
+    const wrapper = shallow((
+      <MetricDefinitionValue onMetricEdit={() => {}} option={sumValueAdhocMetric} />
+    ));
+    expect(wrapper.find(AdhocMetricOption)).to.have.lengthOf(1);
+  });
+});

superset/assets/spec/javascripts/explore/components/MetricsControl_spec.jsx

@@ -0,0 +1,250 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import MetricsControl from '../../../../javascripts/explore/components/controls/MetricsControl';
+import { AGGREGATES } from '../../../../javascripts/explore/constants';
+import OnPasteSelect from '../../../../javascripts/components/OnPasteSelect';
+import AdhocMetric from '../../../../javascripts/explore/AdhocMetric';
+
+const defaultProps = {
+  name: 'metrics',
+  label: 'Metrics',
+  value: undefined,
+  multi: true,
+  columns: [
+    { type: 'VARCHAR(255)', column_name: 'source' },
+    { type: 'VARCHAR(255)', column_name: 'target' },
+    { type: 'DOUBLE', column_name: 'value' },
+  ],
+  savedMetrics: [
+    { metric_name: 'sum__value', expression: 'SUM(energy_usage.value)' },
+    { metric_name: 'avg__value', expression: 'AVG(energy_usage.value)' },
+  ],
+};
+
+function setup(overrides) {
+  const onChange = sinon.spy();
+  const props = {
+    onChange,
+    ...defaultProps,
+    ...overrides,
+  };
+  const wrapper = shallow(<MetricsControl {...props} />);
+  return { wrapper, onChange };
+}
+
+const valueColumn = { type: 'DOUBLE', column_name: 'value' };
+
+const sumValueAdhocMetric = new AdhocMetric({
+  column: valueColumn,
+  aggregate: AGGREGATES.SUM,
+  label: 'SUM(value)',
+});
+
+describe('MetricsControl', () => {
+
+  it('renders an OnPasteSelect', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(OnPasteSelect)).to.have.lengthOf(1);
+  });
+
+  describe('constructor', () => {
+
+    it('unifies options for the dropdown select with aggregates', () => {
+      const { wrapper } = setup();
+      expect(wrapper.state('options')).to.deep.equal([
+        { optionName: '_col_source', type: 'VARCHAR(255)', column_name: 'source' },
+        { optionName: '_col_target', type: 'VARCHAR(255)', column_name: 'target' },
+        { optionName: '_col_value', type: 'DOUBLE', column_name: 'value' },
+        ...Object.keys(AGGREGATES).map(
+          aggregate => ({ aggregate_name: aggregate, optionName: '_aggregate_' + aggregate }),
+        ),
+        { optionName: 'sum__value', metric_name: 'sum__value', expression: 'SUM(energy_usage.value)' },
+        { optionName: 'avg__value', metric_name: 'avg__value', expression: 'AVG(energy_usage.value)' },
+      ]);
+    });
+
+    it('coerces Adhoc Metrics from form data into instances of the AdhocMetric class and leaves saved metrics', () => {
+      const { wrapper } = setup({
+        value: [
+          {
+            column: { type: 'double', column_name: 'value' },
+            aggregate: AGGREGATES.SUM,
+            label: 'SUM(value)',
+            optionName: 'blahblahblah',
+          },
+          'avg__value',
+        ],
+      });
+
+      const adhocMetric = wrapper.state('value')[0];
+      expect(adhocMetric instanceof AdhocMetric).to.be.true;
+      expect(adhocMetric.optionName.length).to.be.above(10);
+      expect(wrapper.state('value')).to.deep.equal([
+        {
+          column: { type: 'double', column_name: 'value' },
+          aggregate: AGGREGATES.SUM,
+          fromFormData: true,
+          label: 'SUM(value)',
+          hasCustomLabel: false,
+          optionName: 'blahblahblah',
+        },
+        'avg__value',
+      ]);
+    });
+
+  });
+
+  describe('onChange', () => {
+
+    it('handles saved metrics being selected', () => {
+      const { wrapper, onChange } = setup();
+      const select = wrapper.find(OnPasteSelect);
+      select.simulate('change', [{ metric_name: 'sum__value' }]);
+      expect(onChange.lastCall.args).to.deep.equal([['sum__value']]);
+    });
+
+    it('handles columns being selected', () => {
+      const { wrapper, onChange } = setup();
+      const select = wrapper.find(OnPasteSelect);
+      select.simulate('change', [valueColumn]);
+
+      const adhocMetric = onChange.lastCall.args[0][0];
+      expect(adhocMetric instanceof AdhocMetric).to.be.true;
+      expect(onChange.lastCall.args).to.deep.equal([[{
+        column: valueColumn,
+        aggregate: AGGREGATES.SUM,
+        label: 'SUM(value)',
+        fromFormData: false,
+        hasCustomLabel: false,
+        optionName: adhocMetric.optionName,
+      }]]);
+    });
+
+    it('handles aggregates being selected', () => {
+      const { wrapper, onChange } = setup();
+      const select = wrapper.find(OnPasteSelect);
+
+      // mock out the Select ref
+      const setInputSpy = sinon.spy();
+      const handleInputSpy = sinon.spy();
+      wrapper.instance().select = {
+        setInputValue: setInputSpy,
+        handleInputChange: handleInputSpy,
+        input: { input: {} },
+      };
+
+      select.simulate('change', [{ aggregate_name: 'SUM', optionName: 'SUM' }]);
+
+      expect(setInputSpy.calledWith('SUM()')).to.be.true;
+      expect(handleInputSpy.calledWith({ target: { value: 'SUM()' } })).to.be.true;
+      expect(onChange.lastCall.args).to.deep.equal([[]]);
+    });
+
+    it('preserves existing selected AdhocMetrics', () => {
+      const { wrapper, onChange } = setup();
+      const select = wrapper.find(OnPasteSelect);
+      select.simulate('change', [{ metric_name: 'sum__value' }, sumValueAdhocMetric]);
+      expect(onChange.lastCall.args).to.deep.equal([['sum__value', sumValueAdhocMetric]]);
+    });
+  });
+
+  describe('onMetricEdit', () => {
+    it('accepts an edited metric from an AdhocMetricEditPopover', () => {
+      const { wrapper, onChange } = setup({
+        value: [sumValueAdhocMetric],
+      });
+
+      const editedMetric = sumValueAdhocMetric.duplicateWith({ aggregate: AGGREGATES.AVG });
+      wrapper.instance().onMetricEdit(editedMetric);
+
+      expect(onChange.lastCall.args).to.deep.equal([[
+        editedMetric,
+      ]]);
+    });
+  });
+
+  describe('checkIfAggregateInInput', () => {
+    it('handles an aggregate in the input', () => {
+      const { wrapper } = setup();
+
+      expect(wrapper.state('aggregateInInput')).to.be.null;
+      wrapper.instance().checkIfAggregateInInput('AVG(');
+      expect(wrapper.state('aggregateInInput')).to.equal(AGGREGATES.AVG);
+    });
+
+    it('handles no aggregate in the input', () => {
+      const { wrapper } = setup();
+
+      expect(wrapper.state('aggregateInInput')).to.be.null;
+      wrapper.instance().checkIfAggregateInInput('colu');
+      expect(wrapper.state('aggregateInInput')).to.be.null;
+    });
+  });
+
+  describe('option filter', () => {
+    it('includes user defined metrics', () => {
+      const { wrapper } = setup();
+
+      expect(!!wrapper.instance().selectFilterOption(
+        {
+          metric_name: 'a_metric',
+          optionName: 'a_metric',
+          expression: 'SUM(FANCY(metric))',
+        },
+        'a',
+      )).to.be.true;
+    });
+
+    it('includes columns and aggregates', () => {
+      const { wrapper } = setup();
+
+      expect(!!wrapper.instance().selectFilterOption(
+        { type: 'VARCHAR(255)', column_name: 'source', optionName: '_col_source' },
+        'Sou',
+      )).to.be.true;
+
+      expect(!!wrapper.instance().selectFilterOption(
+        { aggregate_name: 'AVG', optionName: '_aggregate_AVG' },
+        'av',
+      )).to.be.true;
+    });
+
+    it('excludes auto generated metrics', () => {
+      const { wrapper } = setup();
+
+      expect(!!wrapper.instance().selectFilterOption(
+        {
+          metric_name: 'sum__value',
+          optionName: 'sum__value',
+          expression: 'SUM(value)',
+        },
+        'sum',
+      )).to.be.false;
+    });
+
+    it('filters out metrics if the input begins with an aggregate', () => {
+      const { wrapper } = setup();
+      wrapper.setState({ aggregateInInput: true });
+
+      expect(!!wrapper.instance().selectFilterOption(
+        { metric_name: 'metric', expression: 'SUM(FANCY(metric))' },
+        'SUM(',
+      )).to.be.false;
+    });
+
+    it('includes columns if the input begins with an aggregate', () => {
+      const { wrapper } = setup();
+      wrapper.setState({ aggregateInInput: true });
+
+      expect(!!wrapper.instance().selectFilterOption(
+        { type: 'DOUBLE', column_name: 'value' },
+        'SUM(',
+      )).to.be.true;
+    });
+  });
+});