Exploratory view

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -80,6 +80,7 @@ interface Props {
   actionPredicate?: (actionId: string) => boolean;
   reportUiCounter?: UsageCollectionStart['reportUiCounter'];
   showShadow?: boolean;
+  hasBorder?: boolean;
   showBadges?: boolean;
   showNotifications?: boolean;
   containerContext?: EmbeddableContainerContext;
@@ -273,6 +274,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
         role="figure"
         aria-labelledby={headerId}
         hasShadow={this.props.showShadow}
+        hasBorder={false}
       >
         {!this.props.hideHeader && (
           <PanelHeader

x-pack/examples/exploratory_view_example/kibana.json

@@ -6,13 +6,14 @@
   "server": false,
   "ui": true,
   "requiredPlugins": [
-    "observability",
+    "cases",
     "data",
+    "developerExamples",
     "embeddable",
-    "developerExamples"
+    "observability"
   ],
   "optionalPlugins": [],
-  "requiredBundles": [],
+  "requiredBundles": ["kibanaReact"],
   "owner": {
     "name": "`Synthetics team`",
     "githubTeam": "uptime"

x-pack/examples/exploratory_view_example/public/app.tsx

@@ -80,6 +80,7 @@ export const App = (props: {
               attributes={seriesList}
               reportType="kpi-over-time"
               title={'Monitor response duration'}
+              withActions={['save', 'explore']}
             />
           </EuiPageContentBody>
         </EuiPageContent>

x-pack/examples/exploratory_view_example/public/mount.tsx

@@ -7,9 +7,12 @@
 
 import * as React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { CoreSetup, AppMountParameters } from 'kibana/public';
+import { CoreSetup, AppMountParameters, APP_WRAPPER_CLASS } from '../../../../src/core/public';
 import { StartDependencies } from './plugin';
-
+import {
+  KibanaContextProvider,
+  RedirectAppLinks,
+} from '../../../../src/plugins/kibana_react/public';
 export const mount =
   (coreSetup: CoreSetup<StartDependencies>) =>
   async ({ element }: AppMountParameters) => {
@@ -26,9 +29,13 @@ export const mount =
     const i18nCore = core.i18n;
 
     const reactElement = (
-      <i18nCore.Context>
-        <App {...deps} defaultIndexPattern={defaultIndexPattern} />
-      </i18nCore.Context>
+      <KibanaContextProvider services={{ ...coreSetup, ...core, ...plugins }}>
+        <i18nCore.Context>
+          <RedirectAppLinks application={core.application} className={APP_WRAPPER_CLASS}>
+            <App {...deps} defaultIndexPattern={defaultIndexPattern} />
+          </RedirectAppLinks>
+        </i18nCore.Context>
+      </KibanaContextProvider>
     );
     render(reactElement, element);
     return () => unmountComponentAtNode(element);

x-pack/plugins/lens/public/embeddable/embeddable_component.tsx

@@ -7,7 +7,7 @@
 
 import React, { FC, useEffect } from 'react';
 import type { CoreStart, ThemeServiceStart } from 'kibana/public';
-import type { UiActionsStart } from 'src/plugins/ui_actions/public';
+import type { Action, UiActionsStart } from 'src/plugins/ui_actions/public';
 import type { Start as InspectorStartContract } from 'src/plugins/inspector/public';
 import { EuiLoadingChart } from '@elastic/eui';
 import {
@@ -52,7 +52,7 @@ export type TypedLensByValueInput = Omit<LensByValueInput, 'attributes'> & {
 };
 
 export type EmbeddableComponentProps = (TypedLensByValueInput | LensByReferenceInput) & {
-  withActions?: boolean;
+  withActions?: boolean | Action[];
 };
 
 interface PluginsStartDependencies {
@@ -67,7 +67,7 @@ export function getEmbeddableComponent(core: CoreStart, plugins: PluginsStartDep
     const factory = embeddableStart.getEmbeddableFactory('lens')!;
     const input = { ...props };
     const [embeddable, loading, error] = useEmbeddableFactory({ factory, input });
-    const hasActions = props.withActions === true;
+    const hasActions = Boolean(props.withActions);
     const theme = core.theme;
 
     if (loading) {
@@ -83,6 +83,7 @@ export function getEmbeddableComponent(core: CoreStart, plugins: PluginsStartDep
           actionPredicate={() => hasActions}
           input={input}
           theme={theme}
+          extraActions={Array.isArray(props.withActions) ? props.withActions : []}
         />
       );
     }
@@ -98,6 +99,9 @@ interface EmbeddablePanelWrapperProps {
   actionPredicate: (id: string) => boolean;
   input: EmbeddableComponentProps;
   theme: ThemeServiceStart;
+  hideHeader?: boolean;
+  showShadow?: boolean;
+  extraActions: Action[];
 }
 
 const EmbeddablePanelWrapper: FC<EmbeddablePanelWrapperProps> = ({
@@ -107,22 +111,29 @@ const EmbeddablePanelWrapper: FC<EmbeddablePanelWrapperProps> = ({
   inspector,
   input,
   theme,
+  extraActions,
+  hideHeader = false,
+  showShadow = false,
 }) => {
   useEffect(() => {
     embeddable.updateInput(input);
   }, [embeddable, input]);
 
   return (
     <EmbeddablePanel
-      hideHeader={false}
+      hideHeader={hideHeader}
       embeddable={embeddable as IEmbeddable<EmbeddableInput, EmbeddableOutput>}
-      getActions={uiActions.getTriggerCompatibleActions}
+      getActions={async (triggerId, context) => {
+        const actions = await uiActions.getTriggerCompatibleActions(triggerId, context);
+        return [...extraActions, ...actions];
+      }}
       inspector={inspector}
       actionPredicate={actionPredicate}
-      showShadow={false}
+      showShadow={showShadow}
       showBadges={false}
       showNotifications={false}
       theme={theme}
+      hasBorder={false}
     />
   );
 };

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

@@ -36,7 +36,7 @@ export function SeriesDatePicker({ series, seriesId }: Props) {
   const { setSeries, reportType, allSeries } = useSeriesStorage();
 
   function onTimeChange({ start, end }: { start: string; end: string }) {
-    onRefreshTimeRange();
+    onRefreshTimeRange?.();
     if (reportType === ReportTypes.KPI) {
       allSeries.forEach((currSeries, seriesIndex) => {
         setSeries(seriesIndex, { ...currSeries, time: { from: start, to: end } });

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts

@@ -42,7 +42,7 @@ import {
   PERCENTILE_RANKS,
   ReportTypes,
 } from './constants';
-import { ColumnFilter, SeriesConfig, UrlFilter, URLReportDefinition } from '../types';
+import { ColumnFilter, ParamFilter, SeriesConfig, UrlFilter, URLReportDefinition } from '../types';
 import { PersistableFilter } from '../../../../../../lens/common';
 import { parseRelativeDate } from '../components/date_range_picker';
 import { getDistributionInPercentageColumn } from './lens_columns/overall_column';
@@ -63,6 +63,8 @@ function buildNumberColumn(sourceField: string) {
 export const parseCustomFieldName = (seriesConfig: SeriesConfig, selectedMetricField?: string) => {
   let columnType;
   let columnFilters;
+  let columnFilter;
+  let paramFilters;
   let timeScale;
   let columnLabel;
 
@@ -75,12 +77,22 @@ export const parseCustomFieldName = (seriesConfig: SeriesConfig, selectedMetricF
       );
       columnType = currField?.columnType;
       columnFilters = currField?.columnFilters;
+      columnFilter = currField?.columnFilter;
       timeScale = currField?.timeScale;
       columnLabel = currField?.label;
+      paramFilters = currField?.paramFilters;
     }
   }
 
-  return { fieldName: selectedMetricField!, columnType, columnFilters, timeScale, columnLabel };
+  return {
+    fieldName: selectedMetricField!,
+    columnType,
+    columnFilters,
+    paramFilters,
+    timeScale,
+    columnLabel,
+    columnFilter,
+  };
 };
 
 export interface LayerConfig {
@@ -103,12 +115,14 @@ export class LensAttributes {
   layerConfigs: LayerConfig[];
   isMultiSeries: boolean;
   globalFilter?: { query: string; language: string };
+  reportType: string;
 
-  constructor(layerConfigs: LayerConfig[]) {
+  constructor(layerConfigs: LayerConfig[], reportType: string) {
     this.layers = {};
+    this.reportType = reportType;
 
     layerConfigs.forEach(({ seriesConfig, operationType }) => {
-      if (operationType) {
+      if (operationType && reportType !== 'singleMetric') {
         seriesConfig.yAxisColumns.forEach((yAxisColumn) => {
           if (typeof yAxisColumn.operationType !== undefined) {
             yAxisColumn.operationType =
@@ -121,7 +135,11 @@ export class LensAttributes {
     this.layerConfigs = layerConfigs;
     this.isMultiSeries = layerConfigs.length > 1;
     this.globalFilter = this.getGlobalFilter(this.isMultiSeries);
-    this.layers = this.getLayers();
+    if (reportType === 'singleMetric') {
+      this.layers = this.getSingleMetricLayer();
+    } else {
+      this.layers = this.getLayers();
+    }
     this.visualization = this.getXyState();
   }
 
@@ -208,6 +226,19 @@ export class LensAttributes {
     });
   }
 
+  getFiltersColumn({ label, paramFilters }: { paramFilters: ParamFilter[]; label?: string }) {
+    return {
+      label: label ?? 'Filters',
+      dataType: 'string',
+      operationType: 'filters',
+      scale: 'ordinal',
+      isBucketed: true,
+      params: {
+        filters: paramFilters,
+      },
+    };
+  }
+
   getNumberColumn({
     seriesConfig,
     label,
@@ -389,6 +420,10 @@ export class LensAttributes {
   getXAxis(layerConfig: LayerConfig, layerId: string) {
     const { xAxisColumn } = layerConfig.seriesConfig;
 
+    if (!xAxisColumn.sourceField) {
+      return xAxisColumn;
+    }
+
     if (xAxisColumn?.sourceField === USE_BREAK_DOWN_COLUMN) {
       return this.getBreakdownColumn({
         layerId,
@@ -398,10 +433,17 @@ export class LensAttributes {
       });
     }
 
+    if (xAxisColumn.sourceField === REPORT_METRIC_FIELD) {
+      const { paramFilters } = this.getFieldMeta(xAxisColumn.sourceField, layerConfig);
+      if (paramFilters) {
+        return this.getFiltersColumn({ paramFilters });
+      }
+    }
+
     return this.getColumnBasedOnType({
       layerConfig,
       label: xAxisColumn.label,
-      sourceField: xAxisColumn.sourceField!,
+      sourceField: xAxisColumn.sourceField,
     });
   }
 
@@ -485,12 +527,18 @@ export class LensAttributes {
 
   getFieldMeta(sourceField: string, layerConfig: LayerConfig) {
     if (sourceField === REPORT_METRIC_FIELD) {
-      const { fieldName, columnType, columnLabel, columnFilters, timeScale } = parseCustomFieldName(
-        layerConfig.seriesConfig,
-        layerConfig.selectedMetricField
-      );
+      const { fieldName, columnType, columnLabel, columnFilters, timeScale, paramFilters } =
+        parseCustomFieldName(layerConfig.seriesConfig, layerConfig.selectedMetricField);
       const fieldMeta = layerConfig.indexPattern.getFieldByName(fieldName!);
-      return { fieldMeta, fieldName, columnType, columnLabel, columnFilters, timeScale };
+      return {
+        fieldMeta,
+        fieldName,
+        columnType,
+        columnLabel,
+        columnFilters,
+        timeScale,
+        paramFilters,
+      };
     } else {
       const fieldMeta = layerConfig.indexPattern.getFieldByName(sourceField);
 
@@ -732,7 +780,52 @@ export class LensAttributes {
     return layers;
   }
 
+  getSingleMetricLayer() {
+    const layerConfig = this.layerConfigs[0];
+    const { columnFilter } = parseCustomFieldName(
+      layerConfig.seriesConfig,
+      layerConfig.selectedMetricField
+    );
+
+    const getSourceField = () => {
+      if (
+        layerConfig.selectedMetricField.startsWith('Records') ||
+        layerConfig.selectedMetricField.startsWith('records')
+      ) {
+        return 'Records';
+      }
+      return layerConfig.selectedMetricField;
+    };
+
+    return {
+      layer0: {
+        columns: {
+          'layer-0-column-1': {
+            label: '',
+            dataType: 'number',
+            operationType: layerConfig.operationType,
+            scale: 'ratio',
+            sourceField: getSourceField(),
+            isBucketed: false,
+            filter: columnFilter,
+          },
+        },
+        columnOrder: ['layer-0-column-1'],
+        incompleteColumns: {},
+      },
+    };
+  }
+
   getXyState(): XYState {
+    if (this.reportType === 'singleMetric') {
+      return {
+        accessor: 'layer-0-column-1',
+        layerId: 'layer0',
+        layerType: 'data',
+        layers: [],
+      };
+    }
+
     return {
       legend: { isVisible: true, showSingleSeries: true, position: 'right' },
       valueLabels: 'hide',
@@ -793,7 +886,7 @@ export class LensAttributes {
     return {
       title: 'Prefilled from exploratory view app',
       description: String(refresh),
-      visualizationType: 'lnsXY',
+      visualizationType: this.reportType === 'singleMetric' ? 'lnsMetric' : 'lnsXY',
       references: [
         ...uniqueIndexPatternsIds.map((patternId) => ({
           id: patternId!,

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/utils.ts

@@ -51,13 +51,21 @@ export function convertToShortUrl(series: SeriesUrl) {
 
 export function createExploratoryViewUrl(
   { reportType, allSeries }: { reportType: ReportViewType; allSeries: AllSeries },
-  baseHref = ''
+  baseHref = '',
+  appId = 'observability',
+  onlyPath?: boolean
 ) {
   const allShortSeries: AllShortSeries = allSeries.map((series) => convertToShortUrl(series));
 
+  if (onlyPath) {
+    return `/exploratory-view/#?reportType=${reportType}&sr=${rison.encode(
+      allShortSeries as unknown as RisonValue
+    )}`;
+  }
+
   return (
     baseHref +
-    `/app/observability/exploratory-view/#?reportType=${reportType}&sr=${rison.encode(
+    `/app/${appId}/exploratory-view/#?reportType=${reportType}&sr=${rison.encode(
       allShortSeries as unknown as RisonValue
     )}`
   );