Manage models

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

@@ -21,6 +21,7 @@ import _ from 'lodash';
 import $ from 'jquery';
 import ngMock from 'ng_mock';
 import expect from 'expect.js';
+import sinon from 'sinon';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 import { VisProvider } from '../../../../vis';
 import { intervalOptions } from '../../../buckets/_interval_options';
@@ -58,6 +59,10 @@ describe('editor', function () {
         ]
       });
 
+      const formCtrl = {
+        $addControl: sinon.fake()
+      };
+
       const $el = $('<vis-editor-agg-params agg="agg" ' +
         'index-pattern="agg.getIndexPattern()" ' +
         'group-name="groupName">' +
@@ -68,6 +73,7 @@ describe('editor', function () {
       $parentScope.groupName = 'buckets';
       $parentScope.vis = vis;
 
+      $el.data('$formController', formCtrl);
       $compile($el)($parentScope);
       $scope = $el.scope();
       $scope.$digest();

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

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+interface AggParam {
+  type: string;
+  name: string;
+  displayName?: string;
+}
+
+export { AggParam };

src/legacy/ui/public/agg_types/agg_type.js

@@ -20,6 +20,7 @@
 import _ from 'lodash';
 import { AggParams } from './agg_params';
 import { fieldFormats } from '../registry/field_formats';
+import { i18n } from '@kbn/i18n';
 
 /**
  * Generic AggType Constructor
@@ -118,6 +119,7 @@ function AggType(config) {
     if (config.customLabels !== false) {
       this.params.push({
         name: 'customLabel',
+        displayName: i18n.translate('common.ui.aggTypes.string.customLabel', { defaultMessage: 'Custom label' }),
         type: 'string',
         write: _.noop
       });

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

@@ -311,13 +311,15 @@ export const termsBucketAgg = new BucketAggType({
     },
     {
       name: 'exclude',
+      displayName: i18n.translate('common.ui.aggTypes.buckets.terms.excludeLabel', { defaultMessage: 'Exclude' }),
       type: 'string',
       advanced: true,
       disabled: isNotType('string'),
       ...migrateIncludeExcludeFormat
     },
     {
       name: 'include',
+      displayName: i18n.translate('common.ui.aggTypes.buckets.terms.includeLabel', { defaultMessage: 'Include' }),
       type: 'string',
       advanced: true,
       disabled: isNotType('string'),

src/legacy/ui/public/agg_types/controls/raw_json.html

@@ -1,23 +1 @@
-<div class="form-group regex">
-    <span class="hintbox-label">
-      <label for="visEditorRawJson{{agg.id}}">
-        <span
-          i18n-id="common.ui.aggTypes.jsonInputLabel"
-          i18n-default-message="JSON Input"
-        ></span>
-        <icon-tip
-          position="'right'"
-          content="::'common.ui.aggTypes.jsonInputTooltip' | i18n: { defaultMessage: 'Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example \'shard_size\' on a terms aggregation.' }"
-        ></icon-tip>
-      </label>
-    </span>
-  <p>
-    <textarea
-      type="text"
-      id="visEditorRawJson{{agg.id}}"
-      class="form-control"
-      ng-model="agg.params.json"
-      validate-json
-      ></textarea>
-  </p>
-</div>
+<raw-json-select ng-model="agg.params.json" name="json" agg="agg" on-params-change="onParamsChange"/>

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

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+
+import { EuiFormRow, EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { get } from 'lodash';
+import React, { useState } from 'react';
+import { AggConfig } from 'ui/vis/agg_config';
+import { isValidJson } from '../utils';
+
+interface RawJSONSelectProps {
+  agg: AggConfig;
+  value: any;
+  setValue: (value: any, options?: { isValid?: boolean }) => void;
+}
+
+function RawJSONSelect({ agg = {}, value, setValue }: RawJSONSelectProps) {
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  const label = (
+    <>
+      <FormattedMessage id="common.ui.aggTypes.jsonInputLabel" defaultMessage="JSON Input" />{' '}
+      <EuiToolTip
+        position="right"
+        content={i18n.translate('common.ui.aggTypes.jsonInputTooltip', {
+          defaultMessage:
+            "Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example 'shard_size' on a terms aggregation.",
+        })}
+      >
+        <EuiIcon type="questionInCircle" />
+      </EuiToolTip>
+    </>
+  );
+  const onTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const fieldValue: string = get(e, 'target.value');
+    const isValid = isValidJson(fieldValue);
+    setIsInvalid(!isValid);
+    setValue(fieldValue, { isValid });
+  };
+
+  return (
+    <EuiFormRow label={label} isInvalid={isInvalid} className="form-group">
+      <EuiTextArea
+        id={`visEditorRawJson${agg.id}`}
+        value={value}
+        isInvalid={isInvalid}
+        onChange={onTextAreaChange}
+        rows={2}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { RawJSONSelect };

src/legacy/ui/public/agg_types/controls/raw_json_select.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+import 'ngreact';
+import { uiModules } from '../../modules';
+import { RawJSONSelect } from './raw_json';
+import { wrapInI18nContext } from 'ui/i18n';
+
+uiModules
+  .get('app/kibana', ['react'])
+  .directive('rawJsonSelect', reactDirective => reactDirective(wrapInI18nContext(RawJSONSelect), [
+    'onParamsChange',
+    ['agg', { watchDepth: 'collection' }]
+  ]));

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

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+
+import { EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { AggParamEditorProps } from '../../vis/editors/default';
+
+function StringParamEditor({ agg, aggParam, value, setValue }: AggParamEditorProps<string>) {
+  return (
+    <EuiFormRow label={aggParam.displayName || aggParam.name} className="form-group">
+      <EuiFieldText
+        value={value || ''}
+        data-test-subj={`visEditorStringInput${agg.id}${aggParam.name}`}
+        onChange={ev => setValue(ev.target.value)}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { StringParamEditor };

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

@@ -17,4 +17,5 @@
  * under the License.
  */
 
+export { AggParam } from './agg_param';
 export { AggType } from './agg_type';

src/legacy/ui/public/agg_types/index.js

@@ -19,6 +19,7 @@
 
 import '../directives/validate_agg';
 import './agg_params';
+import '../agg_types/controls/raw_json_select';
 import { IndexedArray } from '../indexed_array';
 import { countMetricAgg } from './metrics/count';
 import { avgMetricAgg } from './metrics/avg';

src/legacy/ui/public/agg_types/param_types/json.js

@@ -18,7 +18,7 @@
  */
 
 import _ from 'lodash';
-import editorHtml from '../controls/raw_json.html';
+import { RawJSONSelect } from '../controls/raw_json';
 import { BaseParamType } from './base';
 import { createLegacyClass } from '../../utils/legacy_class';
 
@@ -30,7 +30,7 @@ function JsonParamType(config) {
   JsonParamType.Super.call(this, config);
 }
 
-JsonParamType.prototype.editor = editorHtml;
+JsonParamType.prototype.editorComponent = RawJSONSelect;
 
 /**
  * Write the aggregation parameter.

src/legacy/ui/public/agg_types/param_types/string.js

@@ -17,16 +17,16 @@
  * under the License.
  */
 
-import editorHtml from '../controls/string.html';
-import { BaseParamType } from './base';
 import { createLegacyClass } from '../../utils/legacy_class';
+import { StringParamEditor } from '../controls/string';
+import { BaseParamType } from './base';
 
 createLegacyClass(StringParamType).inherits(BaseParamType);
 function StringParamType(config) {
   StringParamType.Super.call(this, config);
 }
 
-StringParamType.prototype.editor = editorHtml;
+StringParamType.prototype.editorComponent = StringParamEditor;
 
 /**
  * Write the aggregation parameter.
@@ -45,3 +45,4 @@ StringParamType.prototype.write = function (aggConfig, output) {
 };
 
 export { StringParamType };
+

src/legacy/ui/public/agg_types/utils.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+function isValidJson(value: string) {
+  if (!value || value.length === 0) {
+    return true;
+  }
+
+  const trimmedValue = value.trim();
+
+  if (trimmedValue[0] === '{' || trimmedValue[0] === '[') {
+    try {
+      JSON.parse(trimmedValue);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+
+export { isValidJson };