Time Series Visual Builder: Modify Behavior for Aggregation Selection

src/core_plugins/metrics/common/agg_lookup.js

@@ -63,15 +63,21 @@ export function isBasicAgg(item) {
   return _.includes(Object.keys(byType.basic), item.type);
 }
 
-export function createOptions(type = '_all') {
+export function createOptions(type = '_all', siblings = []) {
   let aggs = byType[type];
   if (!aggs)  aggs = byType._all;
+  let enablePipelines = siblings.some(isBasicAgg);
+  if (siblings.length <= 1) enablePipelines = false;
   return _(aggs)
     .map((label, value) => {
-      const disabled = false;
-      return { label, value, disabled };
+      const disabled = _.includes(pipeline, value) ? !enablePipelines : false;
+      return {
+        label: disabled ? `${label} (use the "+" button to add this pipeline agg)` : label,
+        value,
+        disabled
+      };
     })
-    .sortBy('label')
     .value();
 }
+
 export default lookup;

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

@@ -7,7 +7,7 @@ function AddDeleteButtons(props) {
       return null;
     }
     return (
-      <Tooltip text="Delete">
+      <Tooltip text={props.deleteTooltip}>
         <a className="thor__button-outlined-danger sm" onClick={ props.onDelete }>
           <i className="fa fa-trash-o"></i>
         </a>
@@ -19,7 +19,7 @@ function AddDeleteButtons(props) {
       return null;
     }
     return (
-      <Tooltip text="Add">
+      <Tooltip text={props.addTooltip}>
         <a className="thor__button-outlined-default sm" onClick={ props.onAdd }>
           <i className="fa fa-plus"></i>
         </a>
@@ -31,7 +31,7 @@ function AddDeleteButtons(props) {
   let clone;
   if (props.onClone && !props.disableAdd) {
     clone = (
-      <Tooltip text="Clone">
+      <Tooltip text={props.cloneTooltip}>
         <a className="thor__button-outlined-default sm" onClick={ props.onClone }>
           <i className="fa fa-files-o"></i>
         </a>
@@ -47,7 +47,16 @@ function AddDeleteButtons(props) {
   );
 }
 
+AddDeleteButtons.defaultProps = {
+  addTooltip: 'Add',
+  deleteTooltip: 'Delete',
+  cloneTooltip: 'Clone'
+};
+
 AddDeleteButtons.propTypes = {
+  addTooltip: PropTypes.string,
+  deleteTooltip: PropTypes.string,
+  cloneTooltip: PropTypes.string,
   disableAdd: PropTypes.bool,
   disableDelete: PropTypes.bool,
   onClone: PropTypes.func,

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

@@ -34,6 +34,8 @@ function AggRow(props) {
         {props.children}
         { dragHandle }
         <AddDeleteButtons
+          addTooltip="Add Metric"
+          deleteTooltip="Delete Metric"
           onAdd={props.onAdd}
           onDelete={props.onDelete}
           disableDelete={props.disableDelete}/>

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

@@ -1,17 +1,147 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 import Select from 'react-select';
-import { createOptions } from '../../../common/agg_lookup';
+
+const metricAggs = [
+  { label: 'Average', value: 'avg' },
+  { label: 'Cardinality', value: 'cardinality' },
+  { label: 'Count', value: 'count' },
+  { label: 'Filter Ratio', value: 'filter_ratio' },
+  { label: 'Max', value: 'max' },
+  { label: 'Min', value: 'min' },
+  { label: 'Percentile', value: 'percentile' },
+  { label: 'Percentile Rank', value: 'percentile_rank' },
+  { label: 'Std. Deviation', value: 'std_deviation' },
+  { label: 'Sum', value: 'sum' },
+  { label: 'Sum of Squares', value: 'sum_of_squares' },
+  { label: 'Value Count', value: 'value_count' },
+  { label: 'Variance', value: 'variance' }
+];
+
+const pipelineAggs = [
+  { label: 'Calculation', value: 'calculation' },
+  { label: 'Cumulative Sum', value: 'cumulative_sum' },
+  { label: 'Derivative', value: 'derivative' },
+  { label: 'Moving Average', value: 'moving_average' },
+  { label: 'Serial Difference', value: 'serial_diff' },
+  { label: 'Series Agg', value: 'series_agg' }
+];
+
+const siblingAggs = [
+  { label: 'Overall Average', value: 'avg_bucket' },
+  { label: 'Overall Max', value: 'max_bucket' },
+  { label: 'Overall Min', value: 'min_bucket' },
+  { label: 'Overall Std. Deviation', value: 'std_deviation_bucket' },
+  { label: 'Overall Sum', value: 'sum_bucket' },
+  { label: 'Overall Sum of Squares', value: 'sum_of_squares_bucket' },
+  { label: 'Overall Variance', value: 'variance_bucket' }
+];
+
+class AggSelectOption extends Component {
+
+  constructor(props) {
+    super(props);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
+  handleMouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.props.onSelect(this.props.option, event);
+  }
+
+  handleMouseEnter(event) {
+    this.props.onFocus(this.props.option, event);
+  }
+
+  handleMouseMove(event) {
+    if (this.props.isFocused) return;
+    this.props.onFocus(this.props.option, event);
+  }
+
+  render() {
+    const { label, heading, pipeline } = this.props.option;
+    const style = {
+      paddingLeft: heading ? 0 : 10
+    };
+    if (heading) {
+      let note;
+      if (pipeline) {
+        note = (<span className="vis_editor__agg_select-note">(requires child aggregation)</span>);
+      }
+      return (
+        <div className="Select-option vis_editor__agg_select-heading"
+          onMouseEnter={this.handleMouseEnter}
+          onMouseDown={this.handleMouseDown}
+          onMouseMove={this.handleMouseMove}
+          title={label}>
+          <span className="Select-value-label" style={style}>
+            <strong>{label}</strong>
+            {note}
+          </span>
+        </div>
+      );
+    }
+    return (
+      <div className={this.props.className}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseDown={this.handleMouseDown}
+        onMouseMove={this.handleMouseMove}
+        title={label}>
+        <span className="Select-value-label" style={style}>
+          { this.props.children }
+        </span>
+      </div>
+    );
+  }
+
+}
+
+AggSelectOption.props = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isFocused: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onSelect: PropTypes.func,
+  option: PropTypes.object.isRequired,
+};
 
 function AggSelect(props) {
   const { siblings, panelType } = props;
-  const options = createOptions(panelType, siblings);
+
+  let enablePipelines = siblings.some(s => !!metricAggs.find(m => m.value === s.type));
+  if (siblings.length <= 1) enablePipelines = false;
+
+  let options;
+  if (panelType === 'metrics') {
+    options = metricAggs;
+  } else {
+    options = [
+      { label: 'Metric Aggregations', value: null, heading: true, disabled: true },
+      ...metricAggs,
+      { label: 'Parent Pipeline Aggregations', value: null, pipeline: true, heading: true, disabled: true },
+      ...pipelineAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
+      { label: 'Sibling Pipeline Aggregations', value: null, pipeline: true, heading: true, disabled: true },
+      ...siblingAggs.map(agg => ({ ...agg, disabled: !enablePipelines }))
+    ];
+  }
+
+  const handleChange = (value) => {
+    if (value.disabled) return;
+    if (value.value) props.onChange(value);
+  };
+
   return (
     <div className="vis_editor__row_item">
       <Select
         clearable={false}
         options={options}
-        value={props.value || 'count'}
-        onChange={props.onChange}/>
+        value={props.value}
+        optionComponent={AggSelectOption}
+        onChange={handleChange}/>
     </div>
   );
 }

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

@@ -20,7 +20,7 @@ class CalculationAgg extends Component {
   }
 
   render() {
-    const { panel, siblings } = this.props;
+    const { siblings } = this.props;
 
     const defaults = { script: '' };
     const model = { ...defaults, ...this.props.model };
@@ -41,7 +41,6 @@ class CalculationAgg extends Component {
             <div className="vis_editor__label">Aggregation</div>
             <AggSelect
               siblings={this.props.siblings}
-              panelType={panel.type}
               value={model.type}
               onChange={handleSelectChange('type')}/>
             <div className="vis_editor__variables">

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

@@ -6,7 +6,7 @@ import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 
 function CumlativeSumAgg(props) {
-  const { model, panel, siblings } = props;
+  const { model, siblings } = props;
   const handleChange = createChangeHandler(props.onChange, model);
   const handleSelectChange = createSelectHandler(handleChange);
   return (
@@ -20,7 +20,6 @@ function CumlativeSumAgg(props) {
         <div className="vis_editor__label">Aggregation</div>
         <AggSelect
           siblings={props.siblings}
-          panelType={panel.type}
           value={model.type}
           onChange={handleSelectChange('type')}/>
       </div>

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

@@ -9,7 +9,7 @@ import createTextHandler from '../lib/create_text_handler';
 class DerivativeAgg extends Component {
 
   render() {
-    const { siblings, panel } = this.props;
+    const { siblings } = this.props;
 
     const defaults = { unit: '' };
     const model = { ...defaults, ...this.props.model };
@@ -29,7 +29,6 @@ class DerivativeAgg extends Component {
           <div className="vis_editor__label">Aggregation</div>
           <AggSelect
             siblings={this.props.siblings}
-            panelType={panel.type}
             value={model.type}
             onChange={handleSelectChange('type')}/>
         </div>

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

@@ -41,7 +41,6 @@ class FilterRatioAgg extends Component {
               <div className="vis_editor__label">Aggregation</div>
               <AggSelect
                 siblings={this.props.siblings}
-                panelType={panel.type}
                 value={model.type}
                 onChange={handleSelectChange('type')}/>
             </div>

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

@@ -10,7 +10,7 @@ import createNumberHandler from '../lib/create_number_handler';
 
 class MovingAverageAgg extends Component {
   render() {
-    const { panel, siblings } = this.props;
+    const { siblings } = this.props;
     const defaults = {
       settings: '',
       minimize: 0,
@@ -46,7 +46,6 @@ class MovingAverageAgg extends Component {
               <div className="vis_editor__label">Aggregation</div>
               <AggSelect
                 siblings={this.props.siblings}
-                panelType={panel.type}
                 value={model.type}
                 onChange={handleSelectChange('type')}/>
             </div>

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

@@ -145,7 +145,6 @@ class PercentileAgg extends Component {
               <div className="vis_editor__label">Aggregation</div>
               <AggSelect
                 siblings={this.props.siblings}
-                panelType={panel.type}
                 value={model.type}
                 onChange={handleSelectChange('type')}/>
             </div>

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

@@ -31,7 +31,6 @@ class PercentileRankAgg extends Component {
           <div className="vis_editor__label">Aggregation</div>
           <AggSelect
             siblings={this.props.siblings}
-            panelType={panel.type}
             value={model.type}
             onChange={handleSelectChange('type')}/>
         </div>

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

@@ -9,7 +9,7 @@ import createNumberHandler from '../lib/create_number_handler';
 class SerialDiffAgg extends Component {
 
   render() {
-    const { siblings, panel } = this.props;
+    const { siblings } = this.props;
     const defaults = { lag: '' };
     const model = { ...defaults, ...this.props.model };
 
@@ -28,7 +28,6 @@ class SerialDiffAgg extends Component {
           <div className="vis_editor__label">Aggregation</div>
           <AggSelect
             siblings={this.props.siblings}
-            panelType={panel.type}
             value={model.type}
             onChange={handleSelectChange('type')}/>
         </div>

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

@@ -6,10 +6,7 @@ import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 
 function SeriesAgg(props) {
-  const {
-    model,
-    panel
-  } = props;
+  const { model } = props;
 
   const handleChange = createChangeHandler(props.onChange, model);
   const handleSelectChange = createSelectHandler(handleChange);
@@ -37,7 +34,6 @@ function SeriesAgg(props) {
         <div className="vis_editor__label">Aggregation</div>
         <AggSelect
           siblings={props.siblings}
-          panelType={panel.type}
           value={model.type}
           onChange={handleSelectChange('type')}/>
       </div>

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

@@ -28,7 +28,6 @@ function StandardAgg(props) {
         <div className="vis_editor__label">Aggregation</div>
         <AggSelect
           siblings={props.siblings}
-          panelType={panel.type}
           value={model.type}
           onChange={handleSelectChange('type')}/>
       </div>

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

@@ -38,7 +38,6 @@ class StandardDeviationAgg extends Component {
           <div className="vis_editor__label">Aggregation</div>
           <AggSelect
             siblings={this.props.siblings}
-            panelType={panel.type}
             value={model.type}
             onChange={handleSelectChange('type')}/>
         </div>

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

@@ -10,7 +10,7 @@ import createTextHandler from '../lib/create_text_handler';
 class StandardSiblingAgg extends Component {
 
   render() {
-    const { siblings, panel } = this.props;
+    const { siblings } = this.props;
     const defaults = { sigma: '' };
     const model = { ...defaults, ...this.props.model };
 
@@ -59,7 +59,6 @@ class StandardSiblingAgg extends Component {
           <div className="vis_editor__label">Aggregation</div>
           <AggSelect
             siblings={this.props.siblings}
-            panelType={panel.type}
             value={model.type}
             onChange={handleSelectChange('type')}/>
         </div>