[Vis: Default editor] EUIficate time interval control

src/legacy/core_plugins/kibana/migrations.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { cloneDeep, get, omit, has } from 'lodash';
+import { cloneDeep, get, omit, has, flow } from 'lodash';
 
 function migrateIndexPattern(doc) {
   const searchSourceJSON = get(doc, 'attributes.kibanaSavedObjectMeta.searchSourceJSON');
@@ -57,6 +57,76 @@ function migrateIndexPattern(doc) {
   doc.attributes.kibanaSavedObjectMeta.searchSourceJSON = JSON.stringify(searchSource);
 }
 
+// [TSVB] Migrate percentile-rank aggregation (value -> values)
+const migratePercentileRankAggregation = doc => {
+  const visStateJSON = get(doc, 'attributes.visState');
+  let visState;
+
+  if (visStateJSON) {
+    try {
+      visState = JSON.parse(visStateJSON);
+    } catch (e) {
+      // Let it go, the data is invalid and we'll leave it as is
+    }
+    if (visState && visState.type === 'metrics') {
+      const series = get(visState, 'params.series') || [];
+
+      series.forEach(part => {
+        (part.metrics || []).forEach(metric => {
+          if (metric.type === 'percentile_rank' && has(metric, 'value')) {
+            metric.values = [metric.value];
+
+            delete metric.value;
+          }
+        });
+      });
+      return {
+        ...doc,
+        attributes: {
+          ...doc.attributes,
+          visState: JSON.stringify(visState),
+        },
+      };
+    }
+  }
+  return doc;
+};
+
+// Migrate date histogram aggregation (remove customInterval)
+const migrateDateHistogramAggregation = doc => {
+  const visStateJSON = get(doc, 'attributes.visState');
+  let visState;
+
+  if (visStateJSON) {
+    try {
+      visState = JSON.parse(visStateJSON);
+    } catch (e) {
+      // Let it go, the data is invalid and we'll leave it as is
+    }
+
+    if (visState && visState.aggs) {
+      visState.aggs.forEach(agg => {
+        if (agg.type === 'date_histogram' && agg.params && agg.params.interval === 'custom') {
+          agg.params.interval = agg.params.customInterval;
+          delete agg.params.customInterval;
+        }
+
+        if (get(agg, 'params.customBucket.type', null) === 'date_histogram'
+          && agg.params.customBucket.params
+          && agg.params.customBucket.params.interval === 'custom'
+        ) {
+          agg.params.customBucket.params.interval = agg.params.customBucket.params.customInterval;
+          delete agg.params.customBucket.params.customInterval;
+        }
+      });
+      doc.attributes.visState = JSON.stringify(visState);
+    }
+  }
+  return doc;
+};
+
+const executeMigrations710 = flow(migratePercentileRankAggregation, migrateDateHistogramAggregation);
+
 function removeDateHistogramTimeZones(doc) {
   const visStateJSON = get(doc, 'attributes.visState');
   if (visStateJSON) {
@@ -185,44 +255,7 @@ export const migrations = {
       }
     },
     '7.0.1': removeDateHistogramTimeZones,
-    '7.1.0': doc => {
-      // [TSVB] Migrate percentile-rank aggregation (value -> values)
-      const migratePercentileRankAggregation = doc => {
-        const visStateJSON = get(doc, 'attributes.visState');
-        let visState;
-
-        if (visStateJSON) {
-          try {
-            visState = JSON.parse(visStateJSON);
-          } catch (e) {
-            // Let it go, the data is invalid and we'll leave it as is
-          }
-          if (visState && visState.type === 'metrics') {
-            const series = get(visState, 'params.series') || [];
-
-            series.forEach(part => {
-              (part.metrics || []).forEach(metric => {
-                if (metric.type === 'percentile_rank' && has(metric, 'value')) {
-                  metric.values = [metric.value];
-
-                  delete metric.value;
-                }
-              });
-            });
-            return {
-              ...doc,
-              attributes: {
-                ...doc.attributes,
-                visState: JSON.stringify(visState),
-              },
-            };
-          }
-        }
-        return doc;
-      };
-
-      return migratePercentileRankAggregation(doc);
-    }
+    '7.1.0': doc => executeMigrations710(doc)
   },
   dashboard: {
     '7.0.0': (doc) => {

src/legacy/ui/public/agg_types/__tests__/buckets/date_histogram/_editor.js

@@ -100,7 +100,7 @@ describe('editor', function () {
     beforeEach(ngMock.inject(function () {
       field = _.sample(indexPattern.fields);
       interval = _.sample(intervalOptions);
-      params = render({ field: field, interval: interval });
+      params = render({ field: field, interval: interval.val });
     }));
 
     it('renders the field editor', function () {
@@ -112,11 +112,11 @@ describe('editor', function () {
     });
 
     it('renders the interval editor', function () {
-      expect(agg.params.interval).to.be(interval);
+      expect(agg.params.interval).to.be(interval.val);
 
       expect(params).to.have.property('interval');
       expect(params.interval).to.have.property('$el');
-      expect(params.interval.modelValue()).to.be(interval);
+      expect($scope.agg.params.interval).to.be(interval.val);
     });
   });
 

src/legacy/ui/public/agg_types/__tests__/buckets/date_histogram/_params.js

@@ -68,9 +68,8 @@ describe('params', function () {
       expect(output.params).to.have.property('interval', '1d');
     });
 
-    it('ignores invalid intervals', function () {
-      const output = writeInterval('foo');
-      expect(output.params).to.have.property('interval', '0ms');
+    it('throws error when interval is invalid', function () {
+      expect(() => writeInterval('foo')).to.throw('TypeError: "foo" is not a valid interval.');
     });
 
     it('automatically picks an interval', function () {

src/legacy/ui/public/agg_types/agg_param.d.ts

@@ -22,10 +22,17 @@ import { AggConfig } from '../vis';
 interface AggParam {
   type: string;
   name: string;
+  options?: AggParamOption[];
   required?: boolean;
   displayName?: string;
   onChange?(agg: AggConfig): void;
   shouldShow?(agg: AggConfig): boolean;
 }
 
-export { AggParam };
+interface AggParamOption {
+  val: string;
+  display: string;
+  enabled?(agg: AggConfig): void;
+}
+
+export { AggParam, AggParamOption };

src/legacy/ui/public/agg_types/buckets/_interval_options.js

@@ -77,11 +77,5 @@ export const intervalOptions = [
       defaultMessage: 'Yearly',
     }),
     val: 'y'
-  },
-  {
-    display: i18n.translate('common.ui.aggTypes.buckets.intervalOptions.customDisplayName', {
-      defaultMessage: 'Custom',
-    }),
-    val: 'custom'
   }
 ];

src/legacy/ui/public/agg_types/buckets/date_histogram.js

@@ -20,12 +20,11 @@
 import _ from 'lodash';
 import chrome from '../../chrome';
 import moment from 'moment-timezone';
-import '../directives/validate_date_interval';
 import { BucketAggType } from './_bucket_agg_type';
 import { TimeBuckets } from '../../time_buckets';
 import { createFilterDateHistogram } from './create_filter/date_histogram';
 import { intervalOptions } from './_interval_options';
-import intervalTemplate from '../controls/time_interval.html';
+import { TimeIntervalParamEditor } from '../controls/time_interval';
 import { timefilter } from '../../timefilter';
 import { DropPartialsParamEditor } from '../controls/drop_partials';
 import { i18n } from '@kbn/i18n';
@@ -35,11 +34,7 @@ const detectedTimezone = moment.tz.guess();
 const tzOffset = moment().format('Z');
 
 function getInterval(agg) {
-  const interval = _.get(agg, ['params', 'interval']);
-  if (interval && interval.val === 'custom') {
-    return _.get(agg, ['params', 'customInterval']);
-  }
-  return interval;
+  return _.get(agg, ['params', 'interval']);
 }
 
 export function setBounds(agg, force) {
@@ -59,7 +54,13 @@ export const dateHistogramBucketAgg = new BucketAggType({
     date: true
   },
   makeLabel: function (agg) {
-    const output = this.params.write(agg);
+    let output = '';
+    try {
+      output = this.params.write(agg);
+    } catch (e) {
+      // if interval is invalid, return empty string
+      return '';
+    }
     const field = agg.getFieldDisplayName();
     return i18n.translate('common.ui.aggTypes.buckets.dateHistogramLabel', {
       defaultMessage: '{fieldName} per {intervalDescription}',
@@ -99,7 +100,7 @@ export const dateHistogramBucketAgg = new BucketAggType({
         return agg.getIndexPattern().timeFieldName;
       },
       onChange: function (agg) {
-        if (_.get(agg, 'params.interval.val') === 'auto' && !agg.fieldIsTimeField()) {
+        if (_.get(agg, 'params.interval') === 'auto' && !agg.fieldIsTimeField()) {
           delete agg.params.interval;
         }
 
@@ -118,18 +119,22 @@ export const dateHistogramBucketAgg = new BucketAggType({
     },
     {
       name: 'interval',
-      type: 'optioned',
-      deserialize: function (state) {
+      editorComponent: TimeIntervalParamEditor,
+      deserialize: function (state, agg) {
+        // For upgrading from 7.0.x to 7.1.x - intervals are now stored as key of options or custom value
+        if (state === 'custom') return _.get(agg, 'params.customInterval');
+
         const interval = _.find(intervalOptions, { val: state });
-        return interval || _.find(intervalOptions, function (option) {
-          // For upgrading from 4.0.x to 4.1.x - intervals are now stored as 'y' instead of 'year',
-          // but this maps the old values to the new values
-          return Number(moment.duration(1, state)) === Number(moment.duration(1, option.val));
-        });
+
+        // For upgrading from 4.0.x to 4.1.x - intervals are now stored as 'y' instead of 'year',
+        // but this maps the old values to the new values
+        if (!interval && state === 'year') {
+          return 'y';
+        }
+        return state;
       },
       default: 'auto',
       options: intervalOptions,
-      editor: intervalTemplate,
       modifyAggConfigOnSearchRequestStart: function (agg) {
         setBounds(agg, true);
       },
@@ -177,12 +182,6 @@ export const dateHistogramBucketAgg = new BucketAggType({
         return field && field.name && field.name === agg.getIndexPattern().timeFieldName;
       },
     },
-
-    {
-      name: 'customInterval',
-      default: '2h',
-      write: _.noop
-    },
     {
       name: 'format'
     },

src/legacy/ui/public/agg_types/buckets/histogram.js

@@ -20,7 +20,6 @@
 import _ from 'lodash';
 
 import { toastNotifications } from 'ui/notify';
-import '../directives/validate_date_interval';
 import '../directives/input_number';
 import chrome from '../../chrome';
 import { BucketAggType } from './_bucket_agg_type';

src/legacy/ui/public/agg_types/controls/string.tsx

@@ -40,6 +40,11 @@ function StringParamEditor({
     [value]
   );
 
+  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    const textValue = ev.target.value;
+    setValidity(aggParam.required ? !!textValue : true);
+    setValue(textValue);
+  };
   return (
     <EuiFormRow
       label={aggParam.displayName || aggParam.name}
@@ -50,7 +55,7 @@ function StringParamEditor({
       <EuiFieldText
         value={value || ''}
         data-test-subj={`visEditorStringInput${agg.id}${aggParam.name}`}
-        onChange={ev => setValue(ev.target.value)}
+        onChange={onChange}
         fullWidth={true}
         onBlur={setTouched}
         isInvalid={isInvalid}