[TSVB] Introducing Timerange Data Mode for Metric Style Visualizations

package.json

@@ -60,6 +60,7 @@
  },
  "dependencies": {
  "@elastic/eui": "4.0.1",
+ "@elastic/datemath": "4.0.2",
  "@elastic/filesaver": "1.1.2",
  "@elastic/numeral": "2.3.2",
  "@elastic/ui-ace": "0.2.3",
@@ -344,4 +345,4 @@
  "node": "8.11.4",
  "yarn": "^1.6.0"
  }
-}
+}

src/core_plugins/metrics/common/metric_types.js

@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const metricTypes = ['gauge', 'table', 'metric', 'top_n'];
+
+export function isMetric(panelType) {
+ return metricTypes.includes(panelType);
+}

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

@@ -22,6 +22,7 @@ import React from 'react';
 import {
  EuiComboBox,
 } from '@elastic/eui';
+import { isMetric } from '../../../common/metric_types';
 
 const metricAggs = [
  { label: 'Average', value: 'avg' },
@@ -79,8 +80,12 @@ function filterByPanelType(panelType) {
  };
 }
 
+function includeCalculation() {
+ return agg => agg.value === 'calculation';
+}
+
 function AggSelect(props) {
- const { siblings, panelType, value } = props;
+ const { siblings, panelType, value, timerangeMode, metricsOnly } = props;
 
  const selectedOption = allAggOptions.find(option => {
  return value === option.value;
@@ -93,8 +98,17 @@ function AggSelect(props) {
  if (siblings.length <= 1) enablePipelines = false;
 
  let options;
- if (panelType === 'metrics') {
+ if (metricsOnly) {
  options = metricAggs;
+ } else if (isMetric(panelType) && timerangeMode === 'all') {
+ options = [
+ { label: 'Metric Aggregations', value: null, heading: true, disabled: true },
+ ...metricAggs,
+ { label: 'Parent Pipeline Aggregations', value: null, pipeline: true, heading: true, disabled: true },
+ ...pipelineAggs.filter(filterByPanelType(panelType))
+ .filter(includeCalculation())
+ .map(agg => ({ ...agg, disabled: !enablePipelines })),
+ ];
  } else {
  options = [
  {
@@ -137,11 +151,17 @@ function AggSelect(props) {
  );
 }
 
+AggSelect.defaultProps = {
+ metricsOnly: false
+};
+
 AggSelect.propTypes = {
  onChange: PropTypes.func,
  panelType: PropTypes.string,
  siblings: PropTypes.array,
  value: PropTypes.string,
+ timerangeMode: PropTypes.oneOf(['all', 'last']),
+ metricsOnly: PropTypes.bool
 };
 
 export default AggSelect;

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

@@ -32,12 +32,13 @@ import Vars from './vars';
 import { htmlIdGenerator } from '@elastic/eui';
 
 class CalculationAgg extends Component {
-
  componentWillMount() {
  if (!this.props.model.variables) {
- this.props.onChange(_.assign({}, this.props.model, {
- variables: [{ id: uuid.v1() }]
- }));
+ this.props.onChange(
+ _.assign({}, this.props.model, {
+ variables: [{ id: uuid.v1() }],
+ })
+ );
  }
  }
 
@@ -66,6 +67,7 @@ class CalculationAgg extends Component {
  <div className="vis_editor__label">Aggregation</div>
  <AggSelect
  panelType={this.props.panel.type}
+ timerangeMode={this.props.panel.timerange_mode}
  siblings={this.props.siblings}
  value={model.type}
  onChange={handleSelectChange('type')}
@@ -82,8 +84,9 @@ class CalculationAgg extends Component {
  <div className="vis_editor__row_item">
  <label className="vis_editor__label" htmlFor={htmlId('painless')}>
  Painless Script - Variables are keys on the <code>params</code>
- object, i.e. <code>params.&lt;name&gt;</code>.
- To access the bucket interval (in milliseconds) use <code>params._interval</code>.
+ object, i.e. <code>params.&lt;name&gt;</code>. To access the
+ bucket interval (in milliseconds) use{' '}
+ <code>params._interval</code>.
  </label>
  <input
  id={htmlId('painless')}
@@ -98,7 +101,6 @@ class CalculationAgg extends Component {
  </AggRow>
  );
  }
-
 }
 
 CalculationAgg.propTypes = {

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

@@ -40,6 +40,7 @@ function CumulativeSumAgg(props) {
  <div className="vis_editor__row_item">
  <div className="vis_editor__label">Aggregation</div>
  <AggSelect
+ timerangeMode={props.panel.timerange_mode}
  panelType={props.panel.type}
  siblings={props.siblings}
  value={model.type}
@@ -57,7 +58,6 @@ function CumulativeSumAgg(props) {
  </div>
  </AggRow>
  );
-
 }
 
 CumulativeSumAgg.propTypes = {

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

@@ -51,6 +51,7 @@ export const DerivativeAgg = props => {
  <div className="vis_editor__label">Aggregation</div>
  <AggSelect
  panelType={props.panel.type}
+ timerangeMode={props.panel.timerange_mode}
  siblings={props.siblings}
  value={model.type}
  onChange={handleSelectChange('type')}

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

@@ -41,14 +41,16 @@ function FieldSelect(props) {
  const selectedOptions = selectedOption ? [selectedOption] : [];
 
  return (
- <EuiComboBox
- placeholder="Select field..."
- isDisabled={disabled}
- options={options}
- selectedOptions={selectedOptions}
- onChange={onChange}
- singleSelection={true}
- />
+ <div data-test-subj="fieldSelector" className="vis_editor__row_item">
+ <EuiComboBox
+ placeholder="Select field..."
+ isDisabled={disabled}
+ options={options}
+ selectedOptions={selectedOptions}
+ onChange={onChange}
+ singleSelection={true}
+ />
+ </div>
  );
 }
 

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

@@ -28,21 +28,19 @@ import createTextHandler from '../lib/create_text_handler';
 import { htmlIdGenerator } from '@elastic/eui';
 
 export const FilterRatioAgg = props => {
- const {
- series,
- fields,
- panel
- } = props;
+ const { series, fields, panel } = props;
 
  const handleChange = createChangeHandler(props.onChange, props.model);
  const handleSelectChange = createSelectHandler(handleChange);
  const handleTextChange = createTextHandler(handleChange);
- const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+ const indexPattern =
+ (series.override_index_pattern && series.series_index_pattern) ||
+ panel.index_pattern;
 
  const defaults = {
  numerator: '*',
  denominator: '*',
- metric_agg: 'count'
+ metric_agg: 'count',
  };
 
  const model = { ...defaults, ...props.model };
@@ -63,6 +61,7 @@ export const FilterRatioAgg = props => {
  <div className="vis_editor__row_item">
  <div className="vis_editor__label">Aggregation</div>
  <AggSelect
+ timerangeMode={props.panel.timerange_mode}
  panelType={props.panel.type}
  siblings={props.siblings}
  value={model.type}
@@ -75,18 +74,23 @@ export const FilterRatioAgg = props => {
  </label>
  <input
  id={htmlId('numerator')}
+ data-test-subj="filterRatioNumerator"
  className="vis_editor__input-grows-100"
  onChange={handleTextChange('numerator')}
  value={model.numerator}
  type="text"
  />
  </div>
  <div className="vis_editor__row_item">
- <label className="vis_editor__label" htmlFor={htmlId('denominator')}>
+ <label
+ className="vis_editor__label"
+ htmlFor={htmlId('denominator')}
+ >
  Denominator
  </label>
  <input
  id={htmlId('denominator')}
+ data-test-subj="filterRatioDenominator"
  className="vis_editor__input-grows-100"
  onChange={handleTextChange('denominator')}
  value={model.denominator}
@@ -95,16 +99,17 @@ export const FilterRatioAgg = props => {
  </div>
  </div>
  <div style={{ flex: '1 0 auto', display: 'flex', marginTop: '10px' }}>
- <div className="vis_editor__row_item">
+ <div className="vis_editor__row_item" data-test-subj="filterRatioMetricAgg">
  <div className="vis_editor__label">Metric Aggregation</div>
  <AggSelect
  siblings={props.siblings}
- panelType="metrics"
+ metricsOnly={true}
+ timerangeMode={props.panel.timerange_mode}
  value={model.metric_agg}
  onChange={handleSelectChange('metric_agg')}
  />
  </div>
- { model.metric_agg !== 'count' ? (
+ {model.metric_agg !== 'count' ? (
  <div className="vis_editor__row_item">
  <label className="vis_editor__label" htmlFor={htmlId('aggField')}>
  Field
@@ -118,7 +123,8 @@ export const FilterRatioAgg = props => {
  value={model.field}
  onChange={handleSelectChange('field')}
  />
- </div>) : null }
+ </div>
+ ) : null}
  </div>
  </div>
  </AggRow>

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

@@ -28,6 +28,7 @@ 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 { createNewPercentile } from '../lib/create_new_percentile';
 import {
  htmlIdGenerator,
  EuiComboBox,
@@ -69,7 +70,7 @@ class Percentiles extends Component {
  const selectedModeOption = modeOptions.find(option => {
  return model.mode === option.value;
  });
- return  (
+ return (
  <div className="vis_editor__percentiles-row" key={model.id}>
  <div className="vis_editor__percentiles-content">
  <input
@@ -128,12 +129,12 @@ class Percentiles extends Component {
 
  render() {
  const { model, name } = this.props;
- if (!model[name]) return (<div/>);
+ if (!model[name]) return (<div />);
 
  const rows = model[name].map(this.renderRow);
  return (
  <div className="vis_editor__percentiles">
- { rows }
+ {rows}
  </div>
  );
  }
@@ -154,9 +155,11 @@ class PercentileAgg extends Component { // eslint-disable-line react/no-multi-co
 
  componentWillMount() {
  if (!this.props.model.percentiles) {
- this.props.onChange(_.assign({}, this.props.model, {
- percentiles: [newPercentile({ value: 50 })]
- }));
+ this.props.onChange(
+ _.assign({}, this.props.model, {
+ percentiles: [createNewPercentile({ value: 50 })],
+ })
+ );
  }
  }
 
@@ -165,7 +168,9 @@ class PercentileAgg extends Component { // eslint-disable-line react/no-multi-co
 
  const handleChange = createChangeHandler(this.props.onChange, model);
  const handleSelectChange = createSelectHandler(handleChange);
- const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+ const indexPattern =
+ (series.override_index_pattern && series.series_index_pattern) ||
+ panel.index_pattern;
 
  return (
  <AggRow
@@ -181,6 +186,7 @@ class PercentileAgg extends Component { // eslint-disable-line react/no-multi-co
  <div className="vis_editor__label">Aggregation</div>
  <AggSelect
  panelType={this.props.panel.type}
+ timerangeMode={this.props.panel.timerangeMode}
  siblings={this.props.siblings}
  value={model.type}
  onChange={handleSelectChange('type')}
@@ -207,7 +213,6 @@ class PercentileAgg extends Component { // eslint-disable-line react/no-multi-co
  </AggRow>
  );
  }
-
 }
 
 PercentileAgg.propTypes = {

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

@@ -36,7 +36,9 @@ export const PercentileRankAgg = props => {
  const handleSelectChange = createSelectHandler(handleChange);
  const handleTextChange = createTextHandler(handleChange);
 
- const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+ const indexPattern =
+ (series.override_index_pattern && series.series_index_pattern) ||
+ panel.index_pattern;
  const htmlId = htmlIdGenerator();
 
  return (
@@ -51,13 +53,16 @@ export const PercentileRankAgg = props => {
  <div className="vis_editor__label">Aggregation</div>
  <AggSelect
  panelType={props.panel.type}
+ timerangeMode={props.panel.timerange_mode}
  siblings={props.siblings}
  value={model.type}
  onChange={handleSelectChange('type')}
  />
  </div>
  <div className="vis_editor__row_item">
- <label className="vis_editor__label" htmlFor={htmlId('field')}>Field</label>
+ <label className="vis_editor__label" htmlFor={htmlId('field')}>
+ Field
+ </label>
  <FieldSelect
  id={htmlId('field')}
  fields={fields}
@@ -69,7 +74,9 @@ export const PercentileRankAgg = props => {
  />
  </div>
  <div className="vis_editor__percentile_rank_value">
- <label className="vis_editor__label" htmlFor={htmlId('value')}>Value</label>
+ <label className="vis_editor__label" htmlFor={htmlId('value')}>
+ Value
+ </label>
  <input
  id={htmlId('value')}
  className="vis_editor__input-grows"