[Canvas] Use data views service (#139610)

* Use data views service in Canvas

* Use getIndexPattern instead of title property

* Fix ts errors

* Remove console log statement

x-pack/plugins/canvas/canvas_plugin_src/functions/browser/escount.ts

@@ -5,17 +5,17 @@
  * 2.0.
  */
 
+import { lastValueFrom } from 'rxjs';
+
 import {
   ExpressionFunctionDefinition,
   ExpressionValueFilter,
 } from '@kbn/expressions-plugin/common';
 
 // @ts-expect-error untyped local
 import { buildESRequest } from '../../../common/lib/request/build_es_request';
-
-import { searchService } from '../../../public/services';
-
 import { getFunctionHelp } from '../../../i18n';
+import { searchService } from '../../../public/services';
 
 interface Arguments {
   index: string | null;
@@ -46,6 +46,7 @@ export function escount(): ExpressionFunctionDefinition<
       },
       index: {
         types: ['string'],
+        aliases: ['dataView'],
         default: '_all',
         help: argHelp.index,
       },
@@ -83,12 +84,9 @@ export function escount(): ExpressionFunctionDefinition<
         },
       };
 
-      return search
-        .search(req)
-        .toPromise()
-        .then((resp: any) => {
-          return resp.rawResponse.hits.total;
-        });
+      return lastValueFrom(search.search(req)).then((resp: any) => {
+        return resp.rawResponse.hits.total;
+      });
     },
   };
 }

x-pack/plugins/canvas/canvas_plugin_src/functions/browser/esdocs.ts

@@ -70,6 +70,7 @@ export function esdocs(): ExpressionFunctionDefinition<
       },
       index: {
         types: ['string'],
+        aliases: ['dataView'],
         default: '_all',
         help: argHelp.index,
       },

x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/esdocs.js

@@ -20,7 +20,7 @@ import {
 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 { ESDataViewSelect } from '../../../public/components/es_data_view_select';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
 import { DataSourceStrings, LUCENE_QUERY_URL } from '../../../i18n';
 
@@ -29,6 +29,7 @@ const { ESDocs: strings } = DataSourceStrings;
 const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
   const setArg = useCallback(
     (name, value) => {
+      console.log({ name, value });
       updateArgs &&
         updateArgs({
           ...args,
@@ -94,7 +95,7 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
         helpText={strings.getIndexLabel()}
         display="rowCompressed"
       >
-        <ESIndexSelect value={index} onChange={(index) => setArg('index', index)} />
+        <ESDataViewSelect value={index} onChange={(index) => setArg('index', index)} />
       </EuiFormRow>
 
       <EuiFormRow

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

@@ -461,11 +461,11 @@ export const DataSourceStrings = {
       }),
     getIndexTitle: () =>
       i18n.translate('xpack.canvas.uis.dataSources.esdocs.indexTitle', {
-        defaultMessage: 'Index',
+        defaultMessage: 'Data view',
       }),
     getIndexLabel: () =>
       i18n.translate('xpack.canvas.uis.dataSources.esdocs.indexLabel', {
-        defaultMessage: 'Enter an index name or select a data view',
+        defaultMessage: 'Select a data view or enter an index name.',
       }),
     getQueryTitle: () =>
       i18n.translate('xpack.canvas.uis.dataSources.esdocs.queryTitle', {

x-pack/plugins/canvas/kibana.json

@@ -14,6 +14,7 @@
     "bfetch",
     "charts",
     "data",
+    "dataViews",
     "embeddable",
     "expressionError",
     "expressionImage",

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

@@ -20,7 +20,7 @@ import {
 import { isEqual } from 'lodash';
 import { i18n } from '@kbn/i18n';
 
-import { getDefaultIndex } from '../../lib/es_service';
+import { pluginServices } from '../../services';
 import { DatasourceSelector } from './datasource_selector';
 import { DatasourcePreview } from './datasource_preview';
 
@@ -67,7 +67,12 @@ export class DatasourceComponent extends PureComponent {
   state = { defaultIndex: '' };
 
   componentDidMount() {
-    getDefaultIndex().then((defaultIndex) => this.setState({ defaultIndex }));
+    pluginServices
+      .getServices()
+      .dataViews.getDefaultDataView()
+      .then((defaultDataView) => {
+        this.setState({ defaultIndex: defaultDataView.title });
+      });
   }
 
   componentDidUpdate(prevProps) {

x-pack/plugins/canvas/public/components/es_index_select/es_index_select.component.tsx → x-pack/plugins/canvas/public/components/es_data_view_select/es_data_view_select.component.tsx

@@ -7,37 +7,47 @@
 
 import React, { FocusEventHandler } from 'react';
 import { EuiComboBox } from '@elastic/eui';
+import { DataView } from '@kbn/data-views-plugin/common';
 
-export interface ESIndexSelectProps {
+type DataViewOption = Pick<DataView, 'id' | 'name' | 'title'>;
+
+export interface ESDataViewSelectProps {
   loading: boolean;
   value: string;
-  indices: string[];
-  onChange: (index: string) => void;
+  dataViews: DataViewOption[];
+  onChange: (string: string) => void;
   onBlur: FocusEventHandler<HTMLDivElement> | undefined;
   onFocus: FocusEventHandler<HTMLDivElement> | undefined;
 }
 
 const defaultIndex = '_all';
+const defaultOption = { value: defaultIndex, label: defaultIndex };
 
-export const ESIndexSelect: React.FunctionComponent<ESIndexSelectProps> = ({
+export const ESDataViewSelect: React.FunctionComponent<ESDataViewSelectProps> = ({
   value = defaultIndex,
   loading,
-  indices,
+  dataViews,
   onChange,
   onFocus,
   onBlur,
 }) => {
-  const selectedOption = value !== defaultIndex ? [{ label: value }] : [];
-  const options = indices.map((index) => ({ label: index }));
+  const selectedDataView = dataViews.find((view) => value === view.title) as DataView;
+
+  const selectedOption = selectedDataView
+    ? { value: selectedDataView.title, label: selectedDataView.name }
+    : { value, label: value };
+  const options = dataViews.map(({ name, title }) => ({ value: title, label: name }));
 
   return (
     <EuiComboBox
-      selectedOptions={selectedOption}
-      onChange={([index]) => onChange(index?.label ?? defaultIndex)}
+      selectedOptions={[selectedOption]}
+      onChange={([view]) => {
+        onChange(view.value || defaultOption.value);
+      }}
       onSearchChange={(searchValue) => {
         // resets input when user starts typing
         if (searchValue) {
-          onChange(defaultIndex);
+          onChange(defaultOption.value);
         }
       }}
       onBlur={onBlur}
@@ -46,7 +56,7 @@ export const ESIndexSelect: React.FunctionComponent<ESIndexSelectProps> = ({
       options={options}
       singleSelection={{ asPlainText: true }}
       isClearable={false}
-      onCreateOption={(input) => onChange(input || defaultIndex)}
+      onCreateOption={(input) => onChange(input || defaultOption.value)}
       compressed
     />
   );

x-pack/plugins/canvas/public/components/es_data_view_select/es_data_view_select.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { DataView } from '@kbn/data-views-plugin/common';
+import { sortBy } from 'lodash';
+import React, { FC, useRef, useState } from 'react';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
+import { useDataViewsService } from '../../services';
+import {
+  ESDataViewSelect as Component,
+  ESDataViewSelectProps as Props,
+} from './es_data_view_select.component';
+
+type ESDataViewSelectProps = Omit<Props, 'indices' | 'loading'>;
+
+export const ESDataViewSelect: FC<ESDataViewSelectProps> = (props) => {
+  const { value, onChange } = props;
+
+  const [dataViews, setDataViews] = useState<Array<Pick<DataView, 'id' | 'name' | 'title'>>>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const mounted = useRef(true);
+  const { getDataViews } = useDataViewsService();
+
+  useEffectOnce(() => {
+    getDataViews().then((newDataViews) => {
+      if (!mounted.current) {
+        return;
+      }
+
+      if (!newDataViews) {
+        newDataViews = [];
+      }
+
+      setLoading(false);
+      setDataViews(sortBy(newDataViews, 'name'));
+      if (!value && newDataViews.length) {
+        onChange(newDataViews[0].title);
+      }
+    });
+
+    return () => {
+      mounted.current = false;
+    };
+  });
+
+  return <Component {...props} dataViews={dataViews} loading={loading} />;
+};

x-pack/plugins/canvas/public/components/es_index_select/index.tsx → x-pack/plugins/canvas/public/components/es_data_view_select/index.tsx

@@ -5,5 +5,5 @@
  * 2.0.
  */
 
-export { ESIndexSelect } from './es_index_select';
-export { ESIndexSelect as ESIndexSelectComponent } from './es_index_select.component';
+export { ESDataViewSelect } from './es_data_view_select';
+export { ESDataViewSelect as ESDataViewSelectComponent } from './es_data_view_select.component';

x-pack/plugins/canvas/public/components/es_field_select/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { getFields } from '../../lib/es_service';
+import { useDataViewsService } from '../../services';
 import { ESFieldSelect as Component, ESFieldSelectProps as Props } from './es_field_select';
 
 type ESFieldSelectProps = Omit<Props, 'fields'>;
@@ -15,15 +15,17 @@ export const ESFieldSelect: React.FunctionComponent<ESFieldSelectProps> = (props
   const { index, value, onChange } = props;
   const [fields, setFields] = useState<string[]>([]);
   const loadingFields = useRef(false);
+  const { getFields } = useDataViewsService();
 
   useEffect(() => {
     loadingFields.current = true;
+
     getFields(index)
       .then((newFields) => setFields(newFields || []))
       .finally(() => {
         loadingFields.current = false;
       });
-  }, [index]);
+  }, [index, getFields]);
 
   useEffect(() => {
     if (!loadingFields.current && value && !fields.includes(value)) {

x-pack/plugins/canvas/public/components/es_fields_select/es_fields_select.tsx

@@ -8,7 +8,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { isEqual } from 'lodash';
 import usePrevious from 'react-use/lib/usePrevious';
-import { getFields } from '../../lib/es_service';
+import { useDataViewsService } from '../../services';
 import {
   ESFieldsSelect as Component,
   ESFieldsSelectProps as Props,
@@ -21,6 +21,7 @@ export const ESFieldsSelect: React.FunctionComponent<ESFieldsSelectProps> = (pro
   const [fields, setFields] = useState<string[]>([]);
   const prevIndex = usePrevious(index);
   const mounted = useRef(true);
+  const { getFields } = useDataViewsService();
 
   useEffect(() => {
     if (prevIndex !== index) {
@@ -36,7 +37,7 @@ export const ESFieldsSelect: React.FunctionComponent<ESFieldsSelectProps> = (pro
         }
       });
     }
-  }, [fields, index, onChange, prevIndex, selected]);
+  }, [fields, index, onChange, prevIndex, selected, getFields]);
 
   useEffect(
     () => () => {