Enhancement/update esdocs datasource

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),
 });

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),
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js

@@ -124,6 +124,6 @@ export const timelion = () => ({
   name: 'timelion',
   displayName: TIMELION,
   help: strings.getHelp(),
-  image: 'timelionApp',
+  image: 'visTimelion',
   template: templateFromReactComponent(TimelionDatasource),
 });

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/';

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',
-      }),
-  },
-};

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',
     },

x-pack/legacy/plugins/canvas/i18n/ui.ts

@@ -308,6 +308,7 @@ export const ArgumentStrings = {
 };
 
 export const DataSourceStrings = {
+  // Demo data source
   DemoData: {
     getDisplayName: () =>
       i18n.translate('xpack.canvas.uis.dataSources.demoDataTitle', {
@@ -319,7 +320,7 @@ export const DataSourceStrings = {
       }),
     getHelp: () =>
       i18n.translate('xpack.canvas.uis.dataSources.demoDataLabel', {
-        defaultMessage: 'Mock data set with usernames, prices, projects, countries, and phases',
+        defaultMessage: 'Sample data set used to populate default elements',
       }),
     getDescription: () =>
       i18n.translate('xpack.canvas.uis.dataSources.demoDataDescription', {
@@ -330,6 +331,82 @@ export const DataSourceStrings = {
         },
       }),
   },
+  // Elasticsearch documents datasource
+  ESDocs: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsTitle', {
+        defaultMessage: 'Elasticsearch documents',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsLabel', {
+        defaultMessage: 'Select an index and field(s) to retrieve non-aggregated data',
+      }),
+    getWarningTitle: () =>
+      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningTitle', {
+        defaultMessage: 'Query with caution',
+      }),
+    getWarning: () =>
+      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningDescription', {
+        defaultMessage: `
+        The Elasticsearch basic data source only retrieves non-aggregated data. Use with low volume data sets`,
+      }),
+    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: 'Scripted fields are unavailable',
+      }),
+    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',
+      }),
+  },
+  // Elasticsearch SQL data source
   Essql: {
     getDisplayName: () =>
       i18n.translate('xpack.canvas.uis.dataSources.essqlTitle', {
@@ -341,7 +418,7 @@ export const DataSourceStrings = {
       }),
     getHelp: () =>
       i18n.translate('xpack.canvas.uis.dataSources.essqlLabel', {
-        defaultMessage: 'Use {elasticsearch} {sql} to get a data table',
+        defaultMessage: 'Write an Elasticsearch SQL query to retrieve data',
         values: {
           elasticsearch: ELASTICSEARCH,
           sql: SQL,
@@ -353,26 +430,26 @@ export const DataSourceStrings = {
       }),
     getLabelAppend: () =>
       i18n.translate('xpack.canvas.uis.dataSources.essql.queryTitleAppend', {
-        defaultMessage: 'Learn {elasticsearchShort} {sql} syntax',
+        defaultMessage: 'Learn Elasticsearch SQL query syntax',
         values: {
           elasticsearchShort: ELASTICSEARCH_SHORT,
           sql: SQL,
         },
       }),
   },
+  // Timelion datasource
   Timelion: {
     getAbout: () =>
       i18n.translate('xpack.canvas.uis.dataSources.timelion.aboutDetail', {
-        defaultMessage:
-          'Use {timelion} queries to pull back timeseries data that can be used with {canvas} elements.',
+        defaultMessage: 'Use Timelion syntax to retrieve timeseries data',
         values: {
           timelion: TIMELION,
           canvas: CANVAS,
         },
       }),
     getHelp: () =>
       i18n.translate('xpack.canvas.uis.dataSources.timelionLabel', {
-        defaultMessage: 'Use {timelion} syntax to retrieve a timeseries',
+        defaultMessage: 'Use Timelion syntax to retrieve timeseries data',
         values: {
           timelion: TIMELION,
         },

x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss

@@ -6,8 +6,13 @@
   padding: 0 $euiSizeS;
 }
 
-.canvasDataSource__section {
-  padding: $euiSizeM;
+.canvasDataSource__section,
+.canvasDataSource__list {
+  padding: $euiSizeM $euiSizeM 0;
+}
+
+.canvasDataSource__sectionFooter {
+  padding: 0 $euiSizeM;
 }
 
 .canvasDataSource__triggerButton {
@@ -19,10 +24,6 @@
   margin-right: $euiSizeS;
 }
 
-.canvasDataSource__list {
-  padding: $euiSizeM;
-}
-
 .canvasDataSource__card .euiCard__content {
   padding-top: 0 !important; // sass-lint:disable-line no-important
 }

x-pack/legacy/plugins/canvas/public/components/datasource/datasource_component.js

@@ -164,20 +164,20 @@ export class DatasourceComponent extends PureComponent {
           ) : (
             datasourceRender
           )}
-          <EuiHorizontalRule margin="m" />
-          <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size="s" onClick={() => setPreviewing(true)}>
-                {strings.getPreviewButtonLabel()}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton disabled={isInvalid} size="s" onClick={this.save} fill color="secondary">
-                {strings.getSaveButtonLabel()}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
         </div>
+        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup justifyContent="flexEnd" className="canvasDataSource__sectionFooter">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty size="s" onClick={() => setPreviewing(true)}>
+              {strings.getPreviewButtonLabel()}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton disabled={isInvalid} size="s" onClick={this.save} fill color="secondary">
+              {strings.getSaveButtonLabel()}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
 
         {datasourcePreview}
       </Fragment>

x-pack/legacy/plugins/canvas/public/components/datasource/datasource_selector.js

@@ -15,6 +15,7 @@ export const DatasourceSelector = ({ onSelect, datasources, current }) => (
         key={d.name}
         title={d.displayName}
         titleElement="h5"
+        titleSize="xs"
         icon={<EuiIcon type={d.image} size="l" />}
         description={d.help}
         layout="horizontal"