[TSVB][Lens] Navigate to Lens with your current configuration

src/plugins/dashboard/public/application/lib/build_dashboard_container.ts

@@ -122,7 +122,6 @@ export const buildDashboardContainer = async ({
         gridData: originalPanelState.gridData,
         type: incomingEmbeddable.type,
         explicitInput: {
-          ...originalPanelState.explicitInput,
           ...incomingEmbeddable.input,
           id: incomingEmbeddable.embeddableId,
         },

src/plugins/navigation/public/top_nav_menu/_index.scss

@@ -12,3 +12,7 @@
 .kbnTopNavMenu__badgeGroup {
   margin-right: $euiSizeM;
 }
+
+.kbnTopNavMenu__betaBadgeGroup {
+  align-self: center;
+}

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -7,7 +7,14 @@
  */
 
 import React, { ReactElement } from 'react';
-import { EuiBadge, EuiBadgeGroup, EuiBadgeProps, EuiHeaderLinks } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiBadgeGroup,
+  EuiBadgeProps,
+  EuiHeaderLinks,
+  EuiBetaBadge,
+  EuiBetaBadgeProps,
+} from '@elastic/eui';
 import classNames from 'classnames';
 
 import { MountPoint } from '../../../../core/public';
@@ -24,6 +31,7 @@ export type TopNavMenuProps = StatefulSearchBarProps &
   Omit<SearchBarProps, 'kibana' | 'intl' | 'timeHistory'> & {
     config?: TopNavMenuData[];
     badges?: Array<EuiBadgeProps & { badgeText: string }>;
+    isBetaBadge?: boolean;
     showSearchBar?: boolean;
     showQueryBar?: boolean;
     showQueryInput?: boolean;
@@ -62,7 +70,7 @@ export type TopNavMenuProps = StatefulSearchBarProps &
  **/
 
 export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
-  const { config, badges, showSearchBar, ...searchBarProps } = props;
+  const { config, badges, isBetaBadge, showSearchBar, ...searchBarProps } = props;
 
   if ((!config || config.length === 0) && (!showSearchBar || !props.data)) {
     return null;
@@ -71,10 +79,17 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
   function renderBadges(): ReactElement | null {
     if (!badges || badges.length === 0) return null;
     return (
-      <EuiBadgeGroup className={'kbnTopNavMenu__badgeGroup'}>
+      <EuiBadgeGroup
+        className={
+          Boolean(isBetaBadge) ? 'kbnTopNavMenu__betaBadgeGroup' : 'kbnTopNavMenu__badgeGroup'
+        }
+      >
         {badges.map((badge: EuiBadgeProps & { badgeText: string }, i: number) => {
           const { badgeText, ...badgeProps } = badge;
-          return (
+          const badgeColor = badge.color as EuiBetaBadgeProps['color'];
+          return Boolean(isBetaBadge) ? (
+            <EuiBetaBadge label={badgeText} color={badgeColor ?? 'subdued'} size="s" />
+          ) : (
             <EuiBadge key={`nav-menu-badge-${i}`} {...badgeProps}>
               {badgeText}
             </EuiBadge>

src/plugins/ui_actions/public/index.ts

@@ -27,6 +27,8 @@ export type { Trigger, RowClickContext } from './triggers';
 export {
   VISUALIZE_FIELD_TRIGGER,
   visualizeFieldTrigger,
+  VISUALIZE_EDITOR_TRIGGER,
+  visualizeEditorTrigger,
   VISUALIZE_GEO_FIELD_TRIGGER,
   visualizeGeoFieldTrigger,
   ROW_CLICK_TRIGGER,
@@ -37,5 +39,6 @@ export {
   ACTION_VISUALIZE_FIELD,
   ACTION_VISUALIZE_GEO_FIELD,
   ACTION_VISUALIZE_LENS_FIELD,
+  ACTION_CONVERT_TO_LENS,
 } from './types';
 export type { ActionExecutionContext, ActionExecutionMeta, ActionMenuItemProps } from './actions';

src/plugins/ui_actions/public/plugin.ts

@@ -9,7 +9,12 @@
 import { CoreStart, CoreSetup, Plugin, PluginInitializerContext } from 'src/core/public';
 import { PublicMethodsOf } from '@kbn/utility-types';
 import { UiActionsService } from './service';
-import { rowClickTrigger, visualizeFieldTrigger, visualizeGeoFieldTrigger } from './triggers';
+import {
+  rowClickTrigger,
+  visualizeFieldTrigger,
+  visualizeGeoFieldTrigger,
+  visualizeEditorTrigger,
+} from './triggers';
 import { setTheme } from './services';
 
 export type UiActionsSetup = Pick<
@@ -33,6 +38,7 @@ export class UiActionsPlugin implements Plugin<UiActionsSetup, UiActionsStart> {
     setTheme(core.theme);
     this.service.registerTrigger(rowClickTrigger);
     this.service.registerTrigger(visualizeFieldTrigger);
+    this.service.registerTrigger(visualizeEditorTrigger);
     this.service.registerTrigger(visualizeGeoFieldTrigger);
     return this.service;
   }

src/plugins/ui_actions/public/triggers/index.ts

@@ -11,5 +11,6 @@ export * from './trigger_contract';
 export * from './trigger_internal';
 export * from './row_click_trigger';
 export * from './visualize_field_trigger';
+export * from './visualize_editor_trigger';
 export * from './visualize_geo_field_trigger';
 export * from './default_trigger';

src/plugins/ui_actions/public/triggers/visualize_editor_trigger.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Trigger } from '.';
+
+export const VISUALIZE_EDITOR_TRIGGER = 'VISUALIZE_EDITOR_TRIGGER';
+export const visualizeEditorTrigger: Trigger = {
+  id: VISUALIZE_EDITOR_TRIGGER,
+  title: 'Convert legacy visualizations to Lens',
+  description: 'Triggered when user navigates from a legacy visualization to Lens.',
+};

src/plugins/ui_actions/public/types.ts

@@ -5,7 +5,6 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 import { ActionInternal } from './actions/action_internal';
 import { TriggerInternal } from './triggers/trigger_internal';
 
@@ -22,3 +21,4 @@ export interface VisualizeFieldContext {
 export const ACTION_VISUALIZE_FIELD = 'ACTION_VISUALIZE_FIELD';
 export const ACTION_VISUALIZE_GEO_FIELD = 'ACTION_VISUALIZE_GEO_FIELD';
 export const ACTION_VISUALIZE_LENS_FIELD = 'ACTION_VISUALIZE_LENS_FIELD';
+export const ACTION_CONVERT_TO_LENS = 'ACTION_CONVERT_TO_LENS';

src/plugins/vis_types/timeseries/common/types/panel_model.ts

@@ -78,7 +78,7 @@ export interface Series {
   chart_type: string;
   color: string;
   color_rules?: ColorRules[];
-  fill?: number;
+  fill?: string;
   filter?: Query;
   formatter: string;
   hidden?: boolean;

src/plugins/vis_types/timeseries/public/metrics_type.ts

@@ -26,6 +26,7 @@ import {
 } from '../../../visualizations/public';
 import { getDataStart } from './services';
 import type { TimeseriesVisDefaultParams, TimeseriesVisParams } from './types';
+import { triggerTSVBtoLensConfiguration } from './trigger_action';
 import type { IndexPatternValue, Panel } from '../common/types';
 import { RequestAdapter } from '../../../inspector/public';
 
@@ -154,6 +155,12 @@ export const metricsVisDefinition: VisTypeDefinition<
     }
     return [];
   },
+  navigateToLens: async (params?: VisParams) => {
+    const triggerConfiguration = params
+      ? await triggerTSVBtoLensConfiguration(params as Panel)
+      : null;
+    return triggerConfiguration;
+  },
   inspectorAdapters: () => ({
     requests: new RequestAdapter(),
   }),

src/plugins/vis_types/timeseries/public/trigger_action/get_datasource_info.test.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import type { DataView } from '../../../../data/common';
+import { getDataSourceInfo } from './get_datasource_info';
+const dataViewsMap: Record<string, DataView> = {
+  test1: { id: 'test1', title: 'test1', timeFieldName: 'timeField1' } as DataView,
+  test2: {
+    id: 'test2',
+    title: 'test2',
+    timeFieldName: 'timeField2',
+  } as DataView,
+  test3: { id: 'test3', title: 'test3', timeFieldName: 'timeField3' } as DataView,
+};
+
+const getDataview = (id: string): DataView | undefined => dataViewsMap[id];
+jest.mock('../services', () => {
+  return {
+    getDataStart: jest.fn(() => {
+      return {
+        dataViews: {
+          getDefault: jest.fn(() => {
+            return { id: '12345', title: 'default', timeFieldName: '@timestamp' };
+          }),
+          get: getDataview,
+        },
+      };
+    }),
+  };
+});
+
+describe('getDataSourceInfo', () => {
+  test('should return the default dataview if model_indexpattern is string', async () => {
+    const { indexPatternId, timeField } = await getDataSourceInfo(
+      'test',
+      undefined,
+      false,
+      undefined
+    );
+    expect(indexPatternId).toBe('12345');
+    expect(timeField).toBe('@timestamp');
+  });
+
+  test('should return the correct dataview if model_indexpattern is object', async () => {
+    const { indexPatternId, timeField } = await getDataSourceInfo(
+      { id: 'dataview-1-id' },
+      'timeField-1',
+      false,
+      undefined
+    );
+    expect(indexPatternId).toBe('dataview-1-id');
+    expect(timeField).toBe('timeField-1');
+  });
+
+  test('should fetch the correct data if overwritten dataview is provided', async () => {
+    const { indexPatternId, timeField } = await getDataSourceInfo(
+      { id: 'dataview-1-id' },
+      'timeField-1',
+      true,
+      { id: 'test2' }
+    );
+    expect(indexPatternId).toBe('test2');
+    expect(timeField).toBe('timeField2');
+  });
+});

src/plugins/vis_types/timeseries/public/trigger_action/get_datasource_info.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { fetchIndexPattern, isStringTypeIndexPattern } from '../../common/index_patterns_utils';
+import type { IndexPatternValue } from '../../common/types';
+import { getDataStart } from '../services';
+
+export const getDataSourceInfo = async (
+  modelIndexPattern: IndexPatternValue,
+  modelTimeField: string | undefined,
+  isOverwritten: boolean,
+  overwrittenIndexPattern: IndexPatternValue | undefined
+) => {
+  const { dataViews } = getDataStart();
+  let indexPatternId =
+    modelIndexPattern && !isStringTypeIndexPattern(modelIndexPattern) ? modelIndexPattern.id : '';
+
+  let timeField = modelTimeField;
+  // handle override index pattern
+  if (isOverwritten) {
+    const { indexPattern } = await fetchIndexPattern(overwrittenIndexPattern, dataViews);
+    if (indexPattern) {
+      indexPatternId = indexPattern.id ?? '';
+      timeField = indexPattern.timeFieldName;
+    }
+  }
+  if (!timeField) {
+    if (indexPatternId) {
+      const indexPattern = await dataViews.get(indexPatternId);
+      timeField = indexPattern.timeFieldName;
+    } else {
+      const defaultIndex = await dataViews.getDefault();
+      timeField = defaultIndex?.timeFieldName;
+    }
+  }
+  if (!indexPatternId) {
+    const defaultIndex = await dataViews.getDefault();
+    indexPatternId = defaultIndex?.id ?? '';
+  }
+
+  return {
+    indexPatternId,
+    timeField,
+  };
+};