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: 'visualizeApp',
   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: 'sqlApp',
   template: templateFromReactComponent(EssqlDatasource),
 });

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

@@ -161,13 +161,7 @@ export const ExpressionDataSourceStrings = {
     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,
-        },
+          This datasource does not use aggregations, and is best used with low volume datasets.`,
       }),
     getIndexTitle: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexTitle', {

x-pack/legacy/plugins/canvas/public/expression_types/datasources/esdocs.js

@@ -6,7 +6,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiSelect, EuiTextArea, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiAccordion,
+  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';
@@ -74,12 +81,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 +89,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 +101,54 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
         />
       </EuiFormRow>
 
-      <EuiFormRow
-        label={strings.getSortFieldTitle()}
-        helpText={strings.getSortFieldLabel()}
-        display="columnCompressed"
+      <EuiAccordion
+        id="accordionAdvancedSettings"
+        buttonContent="Advanced Settings"
+        arrowDisplay="right"
       >
-        <ESFieldSelect
-          index={index}
-          value={sortField}
-          onChange={field => setArg('sort', [field, sortOrder].join(', '))}
-        />
-      </EuiFormRow>
+        <EuiFormRow
+          label={strings.getSortFieldTitle()}
+          helpText={strings.getSortFieldLabel()}
+          display="columnCompressed"
+        >
+          <ESFieldSelect
+            index={index}
+            value={sortField}
+            onChange={field => setArg('sort', [field, sortOrder].join(', '))}
+          />
+        </EuiFormRow>
+
+        <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>
+
+        <EuiFormRow
+          label={strings.getQueryTitle()}
+          helpText={strings.getQueryLabel()}
+          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 +163,6 @@ export const esdocs = () => ({
   name: 'esdocs',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  image: 'logoElasticsearch',
+  image: 'filebeatApp',
   template: templateFromReactComponent(EsdocsDatasource),
 });