Enhancement/update esdocs datasource (#59512) (#60592)

* Initial Commit Update to ESDocs datasource per team feedback * Updates Updates per Ryan's mockups * Updates II Updates per Poff's review * Updates III Update to some of the verbiage and card sizes - working on re-ordering and adding a link to the lucen query syntax * design tweaks * Adding lucene hyperlink update to add hyperlink help for Lucene query syntax * Consollidating datasources to sort Consolidating the ESDocs datasource with the rest, so that we can order them * updates for i18n updates for i18n * Updates Updates from Gail for verbiage and integrating Ryan's change for style * Update ui.ts Updates for i18n * Updates for datasource order moving the esdocs datasource to live with the rest of the UI datasources, and sorting them accordingly. * Update datasource_component.js removing console log, whoops * Update ui.ts Update to fix i18n essql issue * Update ui.ts Updates to fix i18n references for the esdocs datasource move * Update to Timelion URL I noticed that the Timelion datasource showed "Lucene query syntax" which wasn't relevant, so I updated it to "Timelion", along with a tutorial, as the link for current Timelion docs does not provide any syntax tutorial. * Update ui.ts update for i18n * Update ui.ts update for i18n * Update ui.ts Update to removed unused value - the i18n check gave me latent errors, sorry for the repost * i18n updates Updating nomenclature to get past i18n errors * Updates Code review updates to remove extraneous code * Update timelion.js update to remove extraneous comment per code review * More i18n updates translation updates to accommodate the esdocs datasource move * Update datasource_component.js Update to toggle datasource icon in selected element mode * Update ui.ts hopefully last i18n fix Co-authored-by: Ryan Keairns <contactryank@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Ryan Keairns <contactryank@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Mar 19, 2020 · 78a094e · 78a094e
1 parent dfea6de
commit 78a094e
Show file tree

Hide file tree

Showing 18 changed files with 223 additions and 214 deletions.
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
@@ -21,6 +21,6 @@ export const demodata = () => ({
   name: 'demodata',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  image: 'logoElasticStack',
+  image: 'training',
   template: templateFromReactComponent(DemodataDatasource),
 });
diff --git a/...ic/expression_types/datasources/esdocs.js → ...nvas_plugin_src/uis/datasources/esdocs.js b/...ic/expression_types/datasources/esdocs.js → ...nvas_plugin_src/uis/datasources/esdocs.js
@@ -6,15 +6,24 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiSelect, EuiTextArea, EuiCallOut, EuiSpacer } from '@elastic/eui';
-import { getSimpleArg, setSimpleArg } from '../../lib/arg_helpers';
-import { ESFieldsSelect } from '../../components/es_fields_select';
-import { ESFieldSelect } from '../../components/es_field_select';
-import { ESIndexSelect } from '../../components/es_index_select';
-import { templateFromReactComponent } from '../../lib/template_from_react_component';
-import { ExpressionDataSourceStrings } from '../../../i18n';
-
-const { ESDocs: strings } = ExpressionDataSourceStrings;
+import {
+  EuiFormRow,
+  EuiAccordion,
+  EuiSelect,
+  EuiTextArea,
+  EuiCallOut,
+  EuiSpacer,
+  EuiLink,
+  EuiText,
+} from '@elastic/eui';
+import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
+import { ESFieldsSelect } from '../../../public/components/es_fields_select';
+import { ESFieldSelect } from '../../../public/components/es_field_select';
+import { ESIndexSelect } from '../../../public/components/es_index_select';
+import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { DataSourceStrings, LUCENE_QUERY_URL } from '../../../i18n';
+
+const { ESDocs: strings } = DataSourceStrings;
 
 const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
   const setArg = (name, value) => {
@@ -74,12 +83,6 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
 
   return (
     <div>
-      <EuiCallOut size="s" title={strings.getWarningTitle()} iconType="alert" color="warning">
-        <p>{strings.getWarning()}</p>
-      </EuiCallOut>
-
-      <EuiSpacer size="m" />
-
       <EuiFormRow
         label={strings.getIndexTitle()}
         helpText={strings.getIndexLabel()}
@@ -88,18 +91,6 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
         <ESIndexSelect value={index} onChange={index => setArg('index', index)} />
       </EuiFormRow>
 
-      <EuiFormRow
-        label={strings.getQueryTitle()}
-        helpText={strings.getQueryLabel()}
-        display="rowCompressed"
-      >
-        <EuiTextArea
-          value={getQuery()}
-          onChange={e => setArg(getArgName(), e.target.value)}
-          compressed
-        />
-      </EuiFormRow>
-
       <EuiFormRow
         label={strings.getFieldsTitle()}
         helpText={fields.length <= 10 ? strings.getFieldsLabel() : strings.getFieldsWarningLabel()}
@@ -112,30 +103,54 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
         />
       </EuiFormRow>
 
-      <EuiFormRow
-        label={strings.getSortFieldTitle()}
-        helpText={strings.getSortFieldLabel()}
-        display="columnCompressed"
+      <EuiSpacer size="s" />
+      <EuiAccordion
+        id="accordionAdvancedSettings"
+        buttonContent="Advanced settings"
+        className="canvasArg__accordion"
       >
-        <ESFieldSelect
-          index={index}
-          value={sortField}
-          onChange={field => setArg('sort', [field, sortOrder].join(', '))}
-        />
-      </EuiFormRow>
+        <EuiSpacer size="s" />
+        <EuiFormRow label={strings.getSortFieldTitle()} display="columnCompressed">
+          <ESFieldSelect
+            index={index}
+            value={sortField}
+            onChange={field => setArg('sort', [field, sortOrder].join(', '))}
+          />
+        </EuiFormRow>
+
+        <EuiFormRow label={strings.getSortOrderTitle()} display="columnCompressed">
+          <EuiSelect
+            value={sortOrder.toLowerCase()}
+            onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
+            options={sortOptions}
+            compressed
+          />
+        </EuiFormRow>
+
+        <EuiFormRow
+          label={strings.getQueryTitle()}
+          labelAppend={
+            <EuiText size="xs">
+              <EuiLink href={LUCENE_QUERY_URL} target="_blank">
+                {strings.getQueryLabel()}
+              </EuiLink>
+            </EuiText>
+          }
+          display="rowCompressed"
+        >
+          <EuiTextArea
+            value={getQuery()}
+            onChange={e => setArg(getArgName(), e.target.value)}
+            compressed
+          />
+        </EuiFormRow>
+      </EuiAccordion>
 
-      <EuiFormRow
-        label={strings.getSortOrderTitle()}
-        helpText={strings.getSortOrderLabel()}
-        display="columnCompressed"
-      >
-        <EuiSelect
-          value={sortOrder.toLowerCase()}
-          onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
-          options={sortOptions}
-          compressed
-        />
-      </EuiFormRow>
+      <EuiSpacer size="m" />
+
+      <EuiCallOut size="s" title={strings.getWarningTitle()} iconType="alert" color="warning">
+        <p>{strings.getWarning()}</p>
+      </EuiCallOut>
     </div>
   );
 };
@@ -150,6 +165,6 @@ export const esdocs = () => ({
   name: 'esdocs',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  image: 'logoElasticsearch',
+  image: 'documents',
   template: templateFromReactComponent(EsdocsDatasource),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
@@ -95,7 +95,6 @@ export const essql = () => ({
   name: 'essql',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  // Replace this with a SQL logo when we have one in EUI
-  image: 'logoElasticsearch',
+  image: 'database',
   template: templateFromReactComponent(EssqlDatasource),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js
@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { demodata } from './demodata';
 import { essql } from './essql';
+import { esdocs } from './esdocs';
+import { demodata } from './demodata';
 import { timelion } from './timelion';
 
-export const datasourceSpecs = [demodata, essql, timelion];
+export const datasourceSpecs = [essql, esdocs, demodata, timelion];
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
@@ -13,12 +13,13 @@ import {
   EuiSpacer,
   EuiCode,
   EuiTextArea,
+  EuiText,
+  EuiLink,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
-import { DataSourceStrings, TIMELION, CANVAS } from '../../../i18n';
-import { TooltipIcon } from '../../../public/components/tooltip_icon';
+import { DataSourceStrings, TIMELION_QUERY_URL, TIMELION, CANVAS } from '../../../i18n';
 
 const { Timelion: strings } = DataSourceStrings;
 
@@ -86,8 +87,14 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
 
       <EuiFormRow
         label={strings.getQueryLabel()}
-        helpText={strings.getQueryHelp()}
-        labelAppend={<TooltipIcon content={strings.getAbout()} />}
+        labelAppend={
+          <EuiText size="xs">
+            <EuiLink href={TIMELION_QUERY_URL} target="_blank">
+              {strings.queryLabel()}
+            </EuiLink>
+          </EuiText>
+        }
+        display="rowCompressed"
       >
         <EuiTextArea
           className="canvasTextArea__code"
@@ -96,6 +103,7 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
           rows={15}
         />
       </EuiFormRow>
+
       {
         // TODO: Time timelion interval picker should be a drop down
       }
@@ -124,6 +132,6 @@ export const timelion = () => ({
   name: 'timelion',
   displayName: TIMELION,
   help: strings.getHelp(),
-  image: 'timelionApp',
+  image: 'visTimelion',
   template: templateFromReactComponent(TimelionDatasource),
 });
diff --git a/x-pack/legacy/plugins/canvas/i18n/constants.ts b/x-pack/legacy/plugins/canvas/i18n/constants.ts
@@ -25,6 +25,7 @@ export const JS = 'JavaScript';
 export const JSON = 'JSON';
 export const KIBANA = 'Kibana';
 export const LUCENE = 'Lucene';
+export const LUCENE_QUERY_URL = 'https://www.elastic.co/guide/en/kibana/current/lucene-query.html';
 export const MARKDOWN = 'Markdown';
 export const MOMENTJS = 'MomentJS';
 export const MOMENTJS_TIMEZONE_URL = 'https://momentjs.com/timezone/';
@@ -37,6 +38,7 @@ export const SQL_URL =
   'https://www.elastic.co/guide/en/elasticsearch/reference/current/sql-spec.html';
 export const SVG = 'SVG';
 export const TIMELION = 'Timelion';
+export const TIMELION_QUERY_URL = 'https://www.elastic.co/blog/timelion-tutorial-from-zero-to-hero';
 export const TINYMATH = '`TinyMath`';
 export const TINYMATH_URL =
   'https://www.elastic.co/guide/en/kibana/current/canvas-tinymath-functions.html';

diff --git a/x-pack/legacy/plugins/canvas/i18n/expression_types.ts b/x-pack/legacy/plugins/canvas/i18n/expression_types.ts
@@ -5,7 +5,6 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { LUCENE, ELASTICSEARCH } from './constants';
 
 export const ArgTypesStrings = {
   Color: {
@@ -143,86 +142,3 @@ export const ArgTypesStrings = {
       }),
   },
 };
-
-export const ExpressionDataSourceStrings = {
-  ESDocs: {
-    getDisplayName: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsTitle', {
-        defaultMessage: 'Elasticsearch raw documents',
-      }),
-    getHelp: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsLabel', {
-        defaultMessage: 'Pull back raw documents from elasticsearch',
-      }),
-    getWarningTitle: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningTitle', {
-        defaultMessage: 'Query with caution',
-      }),
-    getWarning: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningDescription', {
-        defaultMessage: `
-          This datasource pulls directly from {elasticsearch}
-          without the use of aggregations. It is best used with low volume datasets and in
-          situations where you need to view raw documents or plot exact, non-aggregated values on a
-          chart.`,
-        values: {
-          elasticsearch: ELASTICSEARCH,
-        },
-      }),
-    getIndexTitle: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexTitle', {
-        defaultMessage: 'Index',
-      }),
-    getIndexLabel: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexLabel', {
-        defaultMessage: 'Enter an index name or select an index pattern',
-      }),
-    getQueryTitle: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.queryTitle', {
-        defaultMessage: 'Query',
-      }),
-    getQueryLabel: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.queryLabel', {
-        defaultMessage: '{lucene} query string syntax',
-        values: {
-          lucene: LUCENE,
-        },
-      }),
-    getSortFieldTitle: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldTitle', {
-        defaultMessage: 'Sort Field',
-      }),
-    getSortFieldLabel: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldLabel', {
-        defaultMessage: 'Document sort field',
-      }),
-    getSortOrderTitle: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderTitle', {
-        defaultMessage: 'Sort Order',
-      }),
-    getSortOrderLabel: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderLabel', {
-        defaultMessage: 'Document sort order',
-      }),
-    getFieldsTitle: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsTitle', {
-        defaultMessage: 'Fields',
-      }),
-    getFieldsLabel: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsLabel', {
-        defaultMessage: 'The fields to extract. Kibana scripted fields are not currently available',
-      }),
-    getFieldsWarningLabel: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsWarningLabel', {
-        defaultMessage: 'This datasource performs best with 10 or fewer fields',
-      }),
-    getAscendingOption: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.ascendingDropDown', {
-        defaultMessage: 'Ascending',
-      }),
-    getDescendingOption: () =>
-      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.descendingDropDown', {
-        defaultMessage: 'Descending',
-      }),
-  },
-};
diff --git a/x-pack/legacy/plugins/canvas/i18n/functions/dict/demodata.ts b/x-pack/legacy/plugins/canvas/i18n/functions/dict/demodata.ts
@@ -13,7 +13,7 @@ import { DemoRows } from '../../../canvas_plugin_src/functions/server/demodata/g
 export const help: FunctionHelp<FunctionFactory<typeof demodata>> = {
   help: i18n.translate('xpack.canvas.functions.demodataHelpText', {
     defaultMessage:
-      'A mock data set that includes project {ci} times with usernames, countries, and run phases.',
+      'A sample data set that includes project {ci} times with usernames, countries, and run phases.',
     values: {
       ci: 'CI',
     },