[Exploratory view] Embed util (#135244)

x-pack/plugins/observability/public/application/index.tsx

@@ -54,6 +54,7 @@ export const renderApp = ({
   ObservabilityPageTemplate,
   kibanaFeatures,
   usageCollection,
+  isDev,
 }: {
   core: CoreStart;
   plugins: ObservabilityPublicPluginsStart;
@@ -62,6 +63,7 @@ export const renderApp = ({
   ObservabilityPageTemplate: React.ComponentType<LazyObservabilityPageTemplateProps>;
   kibanaFeatures: KibanaFeature[];
   usageCollection: UsageCollectionSetup;
+  isDev?: boolean;
 }) => {
   const { element, history, theme$ } = appMountParameters;
   const i18nCore = core.i18n;
@@ -83,7 +85,7 @@ export const renderApp = ({
     <ApplicationUsageTrackingProvider>
       <KibanaThemeProvider theme$={theme$}>
         <KibanaContextProvider
-          services={{ ...core, ...plugins, storage: new Storage(localStorage) }}
+          services={{ ...core, ...plugins, storage: new Storage(localStorage), isDev }}
         >
           <PluginContext.Provider
             value={{

x-pack/plugins/observability/public/application/types.ts

@@ -45,4 +45,5 @@ export interface ObservabilityAppServices {
   timelines: TimelinesUIStart;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
   uiSettings: IUiSettingsClient;
+  isDev?: boolean;
 }

x-pack/plugins/observability/public/components/shared/exploratory_view/components/action_menu/action_menu.tsx

@@ -10,6 +10,7 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { LensEmbeddableInput, TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { EmbedAction } from '../../header/embed_action';
 import { ObservabilityAppServices } from '../../../../../application/types';
 import { AddToCaseAction } from '../../header/add_to_case_action';
 
@@ -22,7 +23,7 @@ export function ExpViewActionMenuContent({
 }) {
   const kServices = useKibana<ObservabilityAppServices>().services;
 
-  const { lens } = kServices;
+  const { lens, isDev } = kServices;
 
   const [isSaveOpen, setIsSaveOpen] = useState(false);
 
@@ -36,6 +37,11 @@ export function ExpViewActionMenuContent({
         responsive={false}
         style={{ paddingRight: 20 }}
       >
+        {isDev && (
+          <EuiFlexItem grow={false}>
+            <EmbedAction lensAttributes={lensAttributes} />
+          </EuiFlexItem>
+        )}
         {timeRange && (
           <EuiFlexItem grow={false}>
             <AddToCaseAction lensAttributes={lensAttributes} timeRange={timeRange} />

x-pack/plugins/observability/public/components/shared/exploratory_view/header/embed_action.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { EuiButtonEmpty, EuiPopover, EuiCodeBlock, EuiPopoverTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useState } from 'react';
+import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
+import { useSeriesStorage } from '../hooks/use_series_storage';
+
+export function EmbedAction({
+  lensAttributes,
+}: {
+  lensAttributes: TypedLensByValueInput['attributes'] | null;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { reportType, allSeries } = useSeriesStorage();
+
+  const button = (
+    <EuiButtonEmpty
+      size="s"
+      isDisabled={lensAttributes === null}
+      onClick={() => {
+        setIsOpen(!isOpen);
+      }}
+    >
+      {EMBED_LABEL}
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover button={button} isOpen={isOpen} closePopover={() => setIsOpen(false)}>
+      <EuiPopoverTitle>{EMBED_TITLE_LABEL}</EuiPopoverTitle>
+      <EuiCodeBlock
+        language="jsx"
+        fontSize="m"
+        paddingSize="m"
+        isCopyable={true}
+        style={{ width: 500 }}
+      >
+        {`const { observability } = useKibana<>().services;
+
+const { ExploratoryViewEmbeddable } = observability;
+
+<ExploratoryViewEmbeddable
+        customHeight={'300px'}
+        reportType="${reportType}"
+        attributes={${JSON.stringify(allSeries, null, 2)}}
+ />
+        `}
+      </EuiCodeBlock>
+    </EuiPopover>
+  );
+}
+
+const EMBED_TITLE_LABEL = i18n.translate('xpack.observability.expView.heading.embedTitle', {
+  defaultMessage: 'Embed Exploratory view (Dev only feature)',
+});
+
+const EMBED_LABEL = i18n.translate('xpack.observability.expView.heading.embed', {
+  defaultMessage: 'Embed <></>',
+});

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/operation_type_select.tsx

@@ -70,6 +70,12 @@ export function OperationTypeComponent({
         defaultMessage: 'Last value',
       }),
     },
+    {
+      value: '25th' as OperationType,
+      inputDisplay: i18n.translate('xpack.observability.expView.operationType.25thPercentile', {
+        defaultMessage: '25th Percentile',
+      }),
+    },
     {
       value: '75th' as OperationType,
       inputDisplay: i18n.translate('xpack.observability.expView.operationType.75thPercentile', {

x-pack/plugins/observability/public/index.ts

@@ -8,7 +8,7 @@
 // TODO: https://github.com/elastic/kibana/issues/110905
 /* eslint-disable @kbn/eslint/no_export_all */
 
-import { PluginInitializer } from '@kbn/core/public';
+import { PluginInitializer, PluginInitializerContext } from '@kbn/core/public';
 import { lazy } from 'react';
 import {
   Plugin,
@@ -38,8 +38,8 @@ export const plugin: PluginInitializer<
   ObservabilityPublicStart,
   ObservabilityPublicPluginsSetup,
   ObservabilityPublicPluginsStart
-> = () => {
-  return new Plugin();
+> = (initializerContext: PluginInitializerContext) => {
+  return new Plugin(initializerContext);
 };
 
 export * from './components/shared/action_menu';

x-pack/plugins/observability/public/plugin.ts

@@ -17,6 +17,7 @@ import {
   CoreStart,
   DEFAULT_APP_CATEGORIES,
   Plugin as PluginClass,
+  PluginInitializerContext,
 } from '@kbn/core/public';
 import type { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
@@ -130,6 +131,8 @@ export class Plugin
     }),
   ];
 
+  constructor(private readonly initContext: PluginInitializerContext) {}
+
   public setup(
     coreSetup: CoreSetup<ObservabilityPublicPluginsStart, ObservabilityPublicStart>,
     pluginsSetup: ObservabilityPublicPluginsSetup
@@ -167,6 +170,7 @@ export class Plugin
         ObservabilityPageTemplate: navigation.PageTemplate,
         kibanaFeatures,
         usageCollection: pluginsSetup.usageCollection,
+        isDev: this.initContext.env.mode.dev,
       });
     };