[Observability] Exploratory View initial skeleton

src/plugins/data/public/index.ts

@@ -54,6 +54,7 @@ import {
 // Filter helpers namespace:
 export const esFilters = {
   FilterLabel,
+  FilterItem,
 
   FILTERS,
   FilterStateStore,
@@ -92,7 +93,7 @@ export const esFilters = {
   extractTimeRange,
 };
 
-export {
+export type {
   RangeFilter,
   RangeFilterMeta,
   RangeFilterParams,
@@ -484,6 +485,7 @@ export { APPLY_FILTER_TRIGGER } from './triggers';
  */
 
 import { DataPublicPlugin } from './plugin';
+import { FilterItem } from './ui/filter_bar';
 
 export function plugin(initializerContext: PluginInitializerContext<ConfigSchema>) {
   return new DataPublicPlugin(initializerContext);

src/plugins/data/public/ui/filter_bar/filter_item.tsx

@@ -25,7 +25,9 @@ import {
 } from '../../../common';
 import { getIndexPatterns } from '../../services';
 
-interface Props {
+type PanelOptions = 'pinFilter' | 'editFilter' | 'negateFilter' | 'disableFilter' | 'deleteFilter';
+
+export interface FilterItemProps {
   id: string;
   filter: Filter;
   indexPatterns: IIndexPattern[];
@@ -34,6 +36,7 @@ interface Props {
   onRemove: () => void;
   intl: InjectedIntl;
   uiSettings: IUiSettingsClient;
+  hiddenPanelOptions?: Array<PanelOptions>;
 }
 
 interface LabelOptions {
@@ -53,10 +56,10 @@ export type FilterLabelStatus =
 
 export const FILTER_EDITOR_WIDTH = 800;
 
-export function FilterItem(props: Props) {
+export function FilterItem(props: FilterItemProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
   const [indexPatternExists, setIndexPatternExists] = useState<boolean | undefined>(undefined);
-  const { id, filter, indexPatterns } = props;
+  const { id, filter, indexPatterns, hiddenPanelOptions } = props;
 
   useEffect(() => {
     const index = props.filter.meta.index;
@@ -154,83 +157,90 @@ export function FilterItem(props: Props) {
 
   function getPanels() {
     const { negate, disabled } = filter.meta;
-    return [
+    let mainPanelItems = [
       {
-        id: 0,
-        items: [
-          {
-            name: isFilterPinned(filter)
-              ? props.intl.formatMessage({
-                  id: 'data.filter.filterBar.unpinFilterButtonLabel',
-                  defaultMessage: 'Unpin',
-                })
-              : props.intl.formatMessage({
-                  id: 'data.filter.filterBar.pinFilterButtonLabel',
-                  defaultMessage: 'Pin across all apps',
-                }),
-            icon: 'pin',
-            onClick: () => {
-              setIsPopoverOpen(false);
-              onTogglePinned();
-            },
-            'data-test-subj': 'pinFilter',
-          },
-          {
-            name: props.intl.formatMessage({
-              id: 'data.filter.filterBar.editFilterButtonLabel',
-              defaultMessage: 'Edit filter',
+        name: isFilterPinned(filter)
+          ? props.intl.formatMessage({
+              id: 'data.filter.filterBar.unpinFilterButtonLabel',
+              defaultMessage: 'Unpin',
+            })
+          : props.intl.formatMessage({
+              id: 'data.filter.filterBar.pinFilterButtonLabel',
+              defaultMessage: 'Pin across all apps',
             }),
-            icon: 'pencil',
-            panel: 1,
-            'data-test-subj': 'editFilter',
-          },
-          {
-            name: negate
-              ? props.intl.formatMessage({
-                  id: 'data.filter.filterBar.includeFilterButtonLabel',
-                  defaultMessage: 'Include results',
-                })
-              : props.intl.formatMessage({
-                  id: 'data.filter.filterBar.excludeFilterButtonLabel',
-                  defaultMessage: 'Exclude results',
-                }),
-            icon: negate ? 'plusInCircle' : 'minusInCircle',
-            onClick: () => {
-              setIsPopoverOpen(false);
-              onToggleNegated();
-            },
-            'data-test-subj': 'negateFilter',
-          },
-          {
-            name: disabled
-              ? props.intl.formatMessage({
-                  id: 'data.filter.filterBar.enableFilterButtonLabel',
-                  defaultMessage: 'Re-enable',
-                })
-              : props.intl.formatMessage({
-                  id: 'data.filter.filterBar.disableFilterButtonLabel',
-                  defaultMessage: 'Temporarily disable',
-                }),
-            icon: `${disabled ? 'eye' : 'eyeClosed'}`,
-            onClick: () => {
-              setIsPopoverOpen(false);
-              onToggleDisabled();
-            },
-            'data-test-subj': 'disableFilter',
-          },
-          {
-            name: props.intl.formatMessage({
-              id: 'data.filter.filterBar.deleteFilterButtonLabel',
-              defaultMessage: 'Delete',
+        icon: 'pin',
+        onClick: () => {
+          setIsPopoverOpen(false);
+          onTogglePinned();
+        },
+        'data-test-subj': 'pinFilter',
+      },
+      {
+        name: props.intl.formatMessage({
+          id: 'data.filter.filterBar.editFilterButtonLabel',
+          defaultMessage: 'Edit filter',
+        }),
+        icon: 'pencil',
+        panel: 1,
+        'data-test-subj': 'editFilter',
+      },
+      {
+        name: negate
+          ? props.intl.formatMessage({
+              id: 'data.filter.filterBar.includeFilterButtonLabel',
+              defaultMessage: 'Include results',
+            })
+          : props.intl.formatMessage({
+              id: 'data.filter.filterBar.excludeFilterButtonLabel',
+              defaultMessage: 'Exclude results',
+            }),
+        icon: negate ? 'plusInCircle' : 'minusInCircle',
+        onClick: () => {
+          setIsPopoverOpen(false);
+          onToggleNegated();
+        },
+        'data-test-subj': 'negateFilter',
+      },
+      {
+        name: disabled
+          ? props.intl.formatMessage({
+              id: 'data.filter.filterBar.enableFilterButtonLabel',
+              defaultMessage: 'Re-enable',
+            })
+          : props.intl.formatMessage({
+              id: 'data.filter.filterBar.disableFilterButtonLabel',
+              defaultMessage: 'Temporarily disable',
             }),
-            icon: 'trash',
-            onClick: () => {
-              setIsPopoverOpen(false);
-              props.onRemove();
-            },
-            'data-test-subj': 'deleteFilter',
-          },
-        ],
+        icon: `${disabled ? 'eye' : 'eyeClosed'}`,
+        onClick: () => {
+          setIsPopoverOpen(false);
+          onToggleDisabled();
+        },
+        'data-test-subj': 'disableFilter',
+      },
+      {
+        name: props.intl.formatMessage({
+          id: 'data.filter.filterBar.deleteFilterButtonLabel',
+          defaultMessage: 'Delete',
+        }),
+        icon: 'trash',
+        onClick: () => {
+          setIsPopoverOpen(false);
+          props.onRemove();
+        },
+        'data-test-subj': 'deleteFilter',
+      },
+    ];
+
+    if (hiddenPanelOptions && hiddenPanelOptions.length > 0) {
+      mainPanelItems = mainPanelItems.filter(
+        (pItem) => !hiddenPanelOptions.includes(pItem['data-test-subj'] as PanelOptions)
+      );
+    }
+    return [
+      {
+        id: 0,
+        items: mainPanelItems,
       },
       {
         id: 1,
@@ -363,3 +373,5 @@ export function FilterItem(props: Props) {
     </EuiPopover>
   );
 }
+
+export default FilterItem;

src/plugins/data/public/ui/filter_bar/index.tsx

@@ -17,3 +17,12 @@ export const FilterLabel = (props: FilterLabelProps) => (
     <LazyFilterLabel {...props} />
   </React.Suspense>
 );
+
+import type { FilterItemProps } from './filter_item';
+
+const LazyFilterItem = React.lazy(() => import('./filter_item'));
+export const FilterItem = (props: FilterItemProps) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyFilterItem {...props} />
+  </React.Suspense>
+);

x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx

@@ -6,7 +6,14 @@
  */
 
 import React, { useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import rison from 'rison-node';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { I18LABELS } from '../translations';
@@ -17,7 +24,7 @@ import { BreakdownItem } from '../../../../../typings/ui_filters';
 export function PageViewsTrend() {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end, searchTerm } = urlParams;
+  const { start, end, searchTerm, serviceName } = urlParams;
 
   const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
@@ -48,6 +55,14 @@ export function PageViewsTrend() {
     [end, start, uiFilters, breakdown, searchTerm]
   );
 
+  const analyzeHref = {
+    [serviceName + '-pgv']: {
+      rt: 'pgv',
+      serviceName,
+      time: { from: start, to: end },
+    },
+  };
+
   return (
     <div>
       <EuiFlexGroup responsive={false}>
@@ -63,6 +78,16 @@ export function PageViewsTrend() {
             dataTestSubj={'pvBreakdownFilter'}
           />
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            size="s"
+            href={`/app/observability/exploratory-view#?sr=${rison.encode(
+              analyzeHref
+            )}`}
+          >
+            Analyze
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <PageViewsChart data={data} loading={status !== 'success'} />

x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts

@@ -31,17 +31,6 @@ export function getRumPageLoadTransactionsProjection({
     filter: [
       ...rangeQuery(start, end),
       { term: { [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD } },
-      ...(checkFetchStartFieldExists
-        ? [
-            {
-              // Adding this filter to cater for some inconsistent rum data
-              // not available on aggregated transactions
-              exists: {
-                field: 'transaction.marks.navigationTiming.fetchStart',
-              },
-            },
-          ]
-        : []),
       ...(urlQuery
         ? [
             {

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.tsx

@@ -102,7 +102,7 @@ export const percentileOperation: OperationDefinition<PercentileIndexPatternColu
       enabled: true,
       schema: 'metric',
       field: column.sourceField,
-      percents: [column.params.percentile],
+      percents: [60, column.params.percentile],
     }).toAst();
   },
   getEsAggsSuffix: (column) => {

x-pack/plugins/lens/public/xy_visualization/expression.tsx

@@ -24,6 +24,7 @@ import {
   HorizontalAlignment,
   ElementClickListener,
   BrushEndListener,
+  CurveType,
 } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
@@ -773,7 +774,12 @@ export function XYChart({
           switch (seriesType) {
             case 'line':
               return (
-                <LineSeries key={index} {...seriesProps} fit={getFitOptions(fittingFunction)} />
+                <LineSeries
+                  key={index}
+                  {...seriesProps}
+                  fit={getFitOptions(fittingFunction)}
+                  curve={CurveType.CURVE_CATMULL_ROM}
+                />
               );
             case 'bar':
             case 'bar_stacked':

x-pack/plugins/observability/kibana.json

@@ -4,7 +4,7 @@
   "kibanaVersion": "kibana",
   "configPath": ["xpack", "observability"],
   "optionalPlugins": ["licensing", "home", "usageCollection"],
-  "requiredPlugins": ["data"],
+  "requiredPlugins": ["data", "lens"],
   "ui": true,
   "server": true,
   "requiredBundles": ["data", "kibanaReact", "kibanaUtils"]

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

@@ -18,7 +18,7 @@ import {
 import { PluginContext } from '../context/plugin_context';
 import { usePluginContext } from '../hooks/use_plugin_context';
 import { useRouteParams } from '../hooks/use_route_params';
-import { ObservabilityPluginSetupDeps } from '../plugin';
+import { ObservabilityClientPluginsStart } from '../plugin';
 import { HasDataContextProvider } from '../context/has_data_context';
 import { Breadcrumbs, routes } from '../routes';
 
@@ -61,7 +61,7 @@ function App() {
 
 export const renderApp = (
   core: CoreStart,
-  plugins: ObservabilityPluginSetupDeps,
+  plugins: ObservabilityClientPluginsStart,
   appMountParameters: AppMountParameters
 ) => {
   const { element, history } = appMountParameters;