[Dashboard][ES|QL] Allow creating a dashboard with ES|QL chart even when there are no dataviews

src/plugins/dashboard/kibana.jsonc

@@ -24,7 +24,7 @@
       "urlForwarding",
       "presentationUtil",
       "visualizations",
-      "unifiedSearch"
+      "unifiedSearch",
     ],
     "optionalPlugins": [
       "home",
@@ -35,7 +35,8 @@
       "taskManager",
       "serverless",
       "noDataPage",
-      "observabilityAIAssistant"
+      "observabilityAIAssistant",
+      "lens"
     ],
     "requiredBundles": [
       "kibanaReact",

src/plugins/dashboard/public/dashboard_app/no_data/dashboard_app_no_data.tsx

@@ -7,9 +7,18 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
-
+import React, { useCallback } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  getESQLAdHocDataview,
+  getESQLQueryColumns,
+  getIndexForESQLQuery,
+  getInitialESQLQuery,
+} from '@kbn/esql-utils';
 import { withSuspense } from '@kbn/shared-ux-utility';
+import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
+import { getLensAttributesFromSuggestion } from '@kbn/visualization-utils';
 
 import { DASHBOARD_APP_ID } from '../../dashboard_constants';
 import {
@@ -19,10 +28,15 @@ import {
   embeddableService,
   noDataPageService,
   shareService,
+  lensService,
 } from '../../services/kibana_services';
 import { getDashboardBackupService } from '../../services/dashboard_backup_service';
 import { getDashboardContentManagementService } from '../../services/dashboard_content_management_service';
 
+function generateId() {
+  return uuidv4();
+}
+
 export const DashboardAppNoDataPage = ({
   onDataViewCreated,
 }: {
@@ -44,6 +58,63 @@ export const DashboardAppNoDataPage = ({
       })
     )
   );
+
+  const lensHelpersAsync = useAsync(() => {
+    return lensService?.stateHelperApi() ?? Promise.resolve(null);
+  }, [lensService]);
+
+  const onTryESQL = useCallback(async () => {
+    if (lensHelpersAsync.value) {
+      const { dataViews } = dataService;
+      const indexName = (await getIndexForESQLQuery({ dataViews })) ?? '*';
+      const dataView = await getESQLAdHocDataview(`from ${indexName}`, dataViews);
+      const esqlQuery = getInitialESQLQuery(dataView);
+      const abortController = new AbortController();
+
+      const columns = await getESQLQueryColumns({
+        esqlQuery,
+        search: dataService.search.search,
+        signal: abortController.signal,
+        timeRange: dataService.query.timefilter.timefilter.getAbsoluteTime(),
+      });
+
+      // lens suggestions api context
+      const context = {
+        dataViewSpec: dataView?.toSpec(false),
+        fieldName: '',
+        textBasedColumns: columns,
+        query: { esql: esqlQuery },
+      };
+
+      const chartSuggestions = lensHelpersAsync.value.suggestions(context, dataView);
+      if (chartSuggestions?.length) {
+        const [suggestion] = chartSuggestions;
+
+        const attrs = getLensAttributesFromSuggestion({
+          filters: [],
+          query: {
+            esql: esqlQuery,
+          },
+          suggestion,
+          dataView,
+        }) as TypedLensByValueInput['attributes'];
+
+        const lensEmbeddableInput = {
+          attributes: attrs,
+          id: generateId(),
+        };
+
+        await embeddableService.getStateTransfer().navigateToWithEmbeddablePackage('dashboards', {
+          state: {
+            type: 'lens',
+            input: lensEmbeddableInput,
+          },
+          path: '#/create',
+        });
+      }
+    }
+  }, [lensHelpersAsync.value]);
+
   const AnalyticsNoDataPage = withSuspense(
     React.lazy(() =>
       importPromise.then(({ AnalyticsNoDataPage: NoDataPage }) => {
@@ -54,7 +125,7 @@ export const DashboardAppNoDataPage = ({
 
   return (
     <AnalyticsNoDataPageKibanaProvider {...analyticsServices}>
-      <AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} />
+      <AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} onTryESQL={onTryESQL} />
     </AnalyticsNoDataPageKibanaProvider>
   );
 };

src/plugins/dashboard/public/plugin.tsx

@@ -27,6 +27,7 @@ import {
   type CoreStart,
 } from '@kbn/core/public';
 import type { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public';
+import type { LensPublicSetup, LensPublicStart } from '@kbn/lens-plugin/public';
 import type { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import type { EmbeddableSetup, EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public/plugin';
@@ -96,6 +97,7 @@ export interface DashboardSetupDependencies {
   urlForwarding: UrlForwardingSetup;
   unifiedSearch: UnifiedSearchPublicPluginStart;
   observabilityAIAssistant?: ObservabilityAIAssistantPublicSetup;
+  lens?: LensPublicSetup;
 }
 
 export interface DashboardStartDependencies {
@@ -120,6 +122,7 @@ export interface DashboardStartDependencies {
   customBranding: CustomBrandingStart;
   serverless?: ServerlessPluginStart;
   noDataPage?: NoDataPagePluginStart;
+  lens?: LensPublicStart;
   observabilityAIAssistant?: ObservabilityAIAssistantPublicStart;
 }
 

src/plugins/dashboard/public/services/kibana_services.ts

@@ -18,6 +18,7 @@ import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public/plugin'
 import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
 import type { NoDataPagePluginStart } from '@kbn/no-data-page-plugin/public';
 import type { ObservabilityAIAssistantPublicStart } from '@kbn/observability-ai-assistant-plugin/public';
+import type { LensPublicStart } from '@kbn/lens-plugin/public';
 import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
 import type { SavedObjectTaggingOssPluginStart } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import type { ScreenshotModePluginStart } from '@kbn/screenshot-mode-plugin/public';
@@ -40,6 +41,7 @@ export let fieldFormatService: FieldFormatsStart;
 export let navigationService: NavigationPublicPluginStart;
 export let noDataPageService: NoDataPagePluginStart | undefined;
 export let observabilityAssistantService: ObservabilityAIAssistantPublicStart | undefined;
+export let lensService: LensPublicStart | undefined;
 export let presentationUtilService: PresentationUtilPluginStart;
 export let savedObjectsTaggingService: SavedObjectTaggingOssPluginStart | undefined;
 export let screenshotModeService: ScreenshotModePluginStart;
@@ -63,6 +65,7 @@ export const setKibanaServices = (kibanaCore: CoreStart, deps: DashboardStartDep
   navigationService = deps.navigation;
   noDataPageService = deps.noDataPage;
   observabilityAssistantService = deps.observabilityAIAssistant;
+  lensService = deps.lens;
   presentationUtilService = deps.presentationUtil;
   savedObjectsTaggingService = deps.savedObjectsTaggingOss;
   serverlessService = deps.serverless;

src/plugins/dashboard/tsconfig.json

@@ -80,6 +80,7 @@
     "@kbn/content-management-favorites-public",
     "@kbn/core-custom-branding-browser-mocks",
     "@kbn/core-mount-utils-browser",
+    "@kbn/visualization-utils",
   ],
   "exclude": ["target/**/*"]
 }

test/functional/apps/dashboard/group6/dashboard_esql_no_data.ts

@@ -6,14 +6,16 @@
  * your election, the "Elastic License 2.0", the "GNU Affero General Public
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
+import expect from '@kbn/expect';
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const kibanaServer = getService('kibanaServer');
   const testSubjects = getService('testSubjects');
-  const esql = getService('esql');
-  const PageObjects = getPageObjects(['discover', 'dashboard']);
+  const panelActions = getService('dashboardPanelActions');
+  const monacoEditor = getService('monacoEditor');
+  const PageObjects = getPageObjects(['dashboard']);
 
   describe('No Data Views: Try ES|QL', () => {
     before(async () => {
@@ -26,8 +28,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.existOrFail('noDataViewsPrompt');
       await testSubjects.click('tryESQLLink');
 
-      await PageObjects.discover.expectOnDiscover();
-      await esql.expectEsqlStatement('FROM logs* | LIMIT 10');
+      await PageObjects.dashboard.expectOnDashboard('New Dashboard');
+      expect(await testSubjects.exists('lnsVisualizationContainer')).to.be(true);
+
+      await panelActions.clickInlineEdit();
+      const editorValue = await monacoEditor.getCodeEditorValue();
+      expect(editorValue).to.eql(`FROM logs* | LIMIT 10`);
     });
   });
 }