mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
[Lens] Optimize async chunks (#211921)
## Summary While documenting some Lens architecture I've noticed how chunks are organized in Lens, so I've taken a quick spin to reduce the amount of requests to load a dashboard panel and more in general the number of async chunks produced by webpack. This PR aims to do 2 things: * optimize the number of chunks generated by webpack * optimize the number of requests done to load a Lens embedable panel * optimize any `await` flow to do **other things ™️ ** while in idle to load ### Final results #### Reduce the number of chunks The final number of chunks got reduced from 24 to 15. The bundle size has remained almost the same. | Before | After | | ------------- | ------------- | | <img width="1443" alt="Screenshot 2025-03-10 at 12 53 21" src="https://github.com/user-attachments/assets/65030955-7b7c-493c-9559-fbb9ef9089d4" /> | <img width="1101" alt="Screenshot 2025-03-10 at 12 51 53" src="https://github.com/user-attachments/assets/99b9b78d-931a-40ed-bda6-820584c1337e" /> | There's still some improvement margin here, but the changes mainly includes he followings: * the embeddable is now bundled together with the `async_services` bundle * as both are required to render the panel in a dashboard, this change should speed up a bit the dashboard use case vs the Lens editor one * Expression implementations has been deferred into their separate bundles * this should reduce a bit the initial `plugin.js` bundle by few kb * most of the times the bundled expressions are used together, so it makes sense to bundle those 3/4 together rather than have 4 tiny bundles to async load and prevent waterfall `async import` calls which led to poor performance * Defer a component in the `@kbn/unified-field-list` component * this was making load some edit component within the `async_services` bundle even in dashboard. * because this is a component only required in Lens editor, this has been deferred * Async register actions as recommended by @nreese #### Reduce the number of requests The final number of chunks requested to load a lens panel on a dashboard went from 12 to 4. The overall bundle size has remained almost the same, but the distributions of weights have slightly changed. Surprisingly there's 1 MB which is gone somewhere, but that doesn't seem to have an actual impact on the overall loading experience yet. | Before | After | | ------------- | ------------- | | <img width="1445" alt="Screenshot 2025-03-10 at 12 58 08" src="https://github.com/user-attachments/assets/faab091b-305d-43ad-8be2-2f3bb83913a3" /> | <img width="1110" alt="Screenshot 2025-03-10 at 12 58 32" src="https://github.com/user-attachments/assets/f88ac9f5-80a6-42d3-8e3b-3013df05cb8b" /> | #### Optimize any `await` call Well, this is hard to test. So I have no direct proof at the moment. 🤷 cc @thomasneirynck --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Marco Liberati
GitHub
parent
0f0ee3a0b8
commit
db98203d09
77 changed files with 333 additions and 220 deletions
|
|
@ -10,7 +10,11 @@
|
|||
export { FieldList, type FieldListProps } from './src/components/field_list';
|
||||
export { FieldListGrouped, type FieldListGroupedProps } from './src/components/field_list_grouped';
|
||||
export { FieldListFilters, type FieldListFiltersProps } from './src/components/field_list_filters';
|
||||
export { FieldItemButton, type FieldItemButtonProps } from './src/components/field_item_button';
|
||||
export {
|
||||
FieldItemButton,
|
||||
type FieldItemButtonProps,
|
||||
type GenericFieldItemButtonType,
|
||||
} from './src/components/field_item_button';
|
||||
export type {
|
||||
FieldTopValuesBucketProps,
|
||||
FieldTopValuesBucketParams,
|
||||
|
|
|
|||
|
|
@ -260,3 +260,10 @@ function FieldConflictInfoIcon({
|
|||
</EuiToolTip>
|
||||
);
|
||||
}
|
||||
|
||||
// The FieldItemButton has a generic type, which makes it a bit harder to type
|
||||
// it when imported lazily.
|
||||
// This type will be used to type cast the component when lazy loaded and helps
|
||||
// to avoid a bundle size increase. Note: the generic type is stripped with this
|
||||
// but it's a trade-off we need to keep for the moment.
|
||||
export type GenericFieldItemButtonType = typeof FieldItemButton;
|
||||
|
|
|
|||
|
|
@ -7,4 +7,8 @@
|
|||
* License v3.0 only", or the "Server Side Public License, v 1".
|
||||
*/
|
||||
|
||||
export { FieldItemButton, type FieldItemButtonProps } from './field_item_button';
|
||||
export {
|
||||
FieldItemButton,
|
||||
type FieldItemButtonProps,
|
||||
type GenericFieldItemButtonType,
|
||||
} from './field_item_button';
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const collapse: CollapseExpressionFunction = {
|
|||
|
||||
async fn(...args) {
|
||||
/** Build optimization: prevent adding extra code into initial bundle **/
|
||||
const { collapseFn } = await import('./collapse_fn');
|
||||
const { collapseFn } = await import('../../impl/async_fns');
|
||||
return collapseFn(...args);
|
||||
},
|
||||
};
|
||||
|
|
@ -90,7 +90,7 @@ export const counterRate: CounterRateExpressionFunction = {
|
|||
|
||||
async fn(...args) {
|
||||
/** Build optimization: prevent adding extra code into initial bundle **/
|
||||
const { counterRateFn } = await import('./counter_rate_fn');
|
||||
const { counterRateFn } = await import('../../impl/async_fns');
|
||||
return counterRateFn(...args);
|
||||
},
|
||||
};
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { ExecutionContext } from '@kbn/expressions-plugin/common';
|
||||
import type { FormatFactory, RowHeightMode } from '../../types';
|
||||
import type { DatatableColumnResult } from './datatable_column';
|
||||
import type { FormatFactory, RowHeightMode } from '../../../types';
|
||||
import type { DatatableColumnResult } from '../../impl/datatable/datatable_column';
|
||||
import type { DatatableExpressionFunction } from './types';
|
||||
|
||||
export interface SortingState {
|
||||
|
|
@ -34,6 +34,14 @@ export interface DatatableArgs {
|
|||
pageSize?: PagingState['size'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Available datatables logged to inspector
|
||||
*/
|
||||
export const DatatableInspectorTables = {
|
||||
Default: 'default',
|
||||
Transpose: 'transpose',
|
||||
};
|
||||
|
||||
export const getDatatable = (
|
||||
getFormatFactory: (context: ExecutionContext) => FormatFactory | Promise<FormatFactory>
|
||||
): DatatableExpressionFunction => ({
|
||||
|
|
@ -90,7 +98,7 @@ export const getDatatable = (
|
|||
},
|
||||
async fn(...args) {
|
||||
/** Build optimization: prevent adding extra code into initial bundle **/
|
||||
const { datatableFn } = await import('./datatable_fn');
|
||||
const { datatableFn } = await import('../../impl/async_fns');
|
||||
return datatableFn(getFormatFactory)(...args);
|
||||
},
|
||||
});
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
export * from './datatable_column';
|
||||
export * from '../../impl/datatable/datatable_column';
|
||||
export * from './datatable';
|
||||
|
||||
export type { DatatableProps, DatatableExpressionFunction } from './types';
|
||||
|
|
@ -66,7 +66,7 @@ export const formatColumn: FormatColumnExpressionFunction = {
|
|||
inputTypes: ['datatable'],
|
||||
async fn(...args) {
|
||||
/** Build optimization: prevent adding extra code into initial bundle **/
|
||||
const { formatColumnFn } = await import('./format_column_fn');
|
||||
const { formatColumnFn } = await import('../../impl/async_fns');
|
||||
return formatColumnFn(...args);
|
||||
},
|
||||
};
|
||||
|
|
@ -32,8 +32,9 @@ export const mapToColumns: MapToColumnsExpressionFunction = {
|
|||
inputTypes: ['datatable'],
|
||||
async fn(...args) {
|
||||
/** Build optimization: prevent adding extra code into initial bundle **/
|
||||
const { mapToOriginalColumns } = await import('./map_to_columns_fn');
|
||||
const { mapToOriginalColumnsTextBased } = await import('./map_to_columns_fn_textbased');
|
||||
const { mapToOriginalColumns, mapToOriginalColumnsTextBased } = await import(
|
||||
'../../impl/async_fns'
|
||||
);
|
||||
|
||||
return args?.[1]?.isTextBased
|
||||
? mapToOriginalColumnsTextBased(...args)
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { type timeScaleFn } from '../../impl/time_scale/time_scale_fn';
|
||||
import type { TimeScaleExpressionFunction } from './types';
|
||||
import type { timeScaleFn } from './time_scale_fn';
|
||||
|
||||
export const getTimeScale = (
|
||||
...timeScaleFnParameters: Parameters<typeof timeScaleFn>
|
||||
|
|
@ -47,7 +47,7 @@ export const getTimeScale = (
|
|||
inputTypes: ['datatable'],
|
||||
async fn(...args) {
|
||||
/** Build optimization: prevent adding extra code into initial bundle **/
|
||||
const { timeScaleFn } = await import('./time_scale_fn');
|
||||
const { timeScaleFn } = await import('../../impl/async_fns');
|
||||
return timeScaleFn(...timeScaleFnParameters)(...args);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
// This is a workaround to avoid to bundle fn implementations
|
||||
export { collapseFn } from './collapse/collapse_fn';
|
||||
export { counterRateFn } from './counter_rate/counter_rate_fn';
|
||||
export { datatableFn } from './datatable/datatable_fn';
|
||||
export { formatColumnFn } from './format_column/format_column_fn';
|
||||
export { mapToOriginalColumns } from './map_to_columns/map_to_columns_fn';
|
||||
export { mapToOriginalColumnsTextBased } from './map_to_columns/map_to_columns_fn_textbased';
|
||||
export { timeScaleFn } from './time_scale/time_scale_fn';
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import type { Datatable, ExecutionContext } from '@kbn/expressions-plugin/common';
|
||||
import { functionWrapper } from '@kbn/expressions-plugin/common/expression_functions/specs/tests/utils';
|
||||
import { CollapseArgs, collapse } from '.';
|
||||
import { CollapseArgs, collapse } from '../../defs/collapse';
|
||||
|
||||
describe('collapse_fn', () => {
|
||||
const fn = functionWrapper(collapse);
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { Datatable, DatatableRow, getBucketIdentifier } from '@kbn/expressions-plugin/common';
|
||||
import type { CollapseExpressionFunction } from './types';
|
||||
import type { CollapseExpressionFunction } from '../../defs/collapse/types';
|
||||
|
||||
function getValueAsNumberArray(value: unknown) {
|
||||
if (Array.isArray(value)) {
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { counterRate, CounterRateArgs } from '.';
|
||||
import { counterRate, CounterRateArgs } from '../../defs/counter_rate';
|
||||
|
||||
import { Datatable } from '@kbn/expressions-plugin/common';
|
||||
import { functionWrapper } from '@kbn/expressions-plugin/common/expression_functions/specs/tests/utils';
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { buildResultColumns, getBucketIdentifier } from '@kbn/expressions-plugin/common';
|
||||
import type { CounterRateExpressionFunction } from './types';
|
||||
import type { CounterRateExpressionFunction } from '../../defs/counter_rate/types';
|
||||
|
||||
export const counterRateFn: CounterRateExpressionFunction['fn'] = (
|
||||
input,
|
||||
|
|
@ -9,8 +9,8 @@ import type { Direction } from '@elastic/eui';
|
|||
import type { PaletteOutput, CustomPaletteParams, ColorMapping } from '@kbn/coloring';
|
||||
import type { CustomPaletteState } from '@kbn/charts-plugin/common';
|
||||
import type { ExpressionFunctionDefinition, DatatableColumn } from '@kbn/expressions-plugin/common';
|
||||
import type { SortingHint } from '../../types';
|
||||
import { CollapseFunction } from '../collapse';
|
||||
import type { SortingHint } from '../../../types';
|
||||
import { CollapseFunction } from '../../defs/collapse';
|
||||
|
||||
const LENS_DATATABLE_COLUMN = 'lens_datatable_column';
|
||||
|
||||
|
|
@ -9,18 +9,11 @@ import { cloneDeep } from 'lodash';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { prepareLogTable } from '@kbn/visualizations-plugin/common/utils';
|
||||
import type { Datatable, ExecutionContext } from '@kbn/expressions-plugin/common';
|
||||
import { FormatFactory } from '../../types';
|
||||
import { FormatFactory } from '../../../types';
|
||||
import { computeSummaryRowForColumn } from './summary';
|
||||
import type { DatatableExpressionFunction } from './types';
|
||||
import type { DatatableExpressionFunction } from '../../defs/datatable/types';
|
||||
import { transposeTable } from './transpose_helpers';
|
||||
|
||||
/**
|
||||
* Available datatables logged to inspector
|
||||
*/
|
||||
export const DatatableInspectorTables = {
|
||||
Default: 'default',
|
||||
Transpose: 'transpose',
|
||||
};
|
||||
import { DatatableInspectorTables } from '../../defs/datatable/datatable';
|
||||
|
||||
export const datatableFn =
|
||||
(
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import type { FieldFormat } from '@kbn/field-formats-plugin/common';
|
||||
import type { Datatable } from '@kbn/expressions-plugin/common';
|
||||
import { DatatableArgs } from '..';
|
||||
import { DatatableArgs } from '../..';
|
||||
import { transposeTable } from './transpose_helpers';
|
||||
|
||||
describe('transpose helpers', () => {
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
import type { Datatable, DatatableColumn, DatatableRow } from '@kbn/expressions-plugin/common';
|
||||
import type { FieldFormat } from '@kbn/field-formats-plugin/common';
|
||||
import { TRANSPOSE_VISUAL_SEPARATOR, getTransposeId } from '@kbn/transpose-utils';
|
||||
import { DatatableArgs } from './datatable';
|
||||
import { DatatableArgs } from '../../defs/datatable/datatable';
|
||||
import type { DatatableColumnConfig, DatatableColumnArgs } from './datatable_column';
|
||||
|
||||
/**
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import type { Datatable, DatatableColumn } from '@kbn/expressions-plugin/common';
|
||||
import { functionWrapper } from '@kbn/expressions-plugin/common/expression_functions/specs/tests/utils';
|
||||
import { formatColumn } from '.';
|
||||
import { formatColumn } from '../../defs/format_column';
|
||||
|
||||
describe('format_column', () => {
|
||||
const fn = functionWrapper(formatColumn);
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
|
||||
import { SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
|
||||
import type { DatatableColumn } from '@kbn/expressions-plugin/common';
|
||||
import { supportedFormats } from './supported_formats';
|
||||
import type { FormatColumnArgs } from '.';
|
||||
import type { FormatColumnExpressionFunction } from './types';
|
||||
import { supportedFormats } from '../../defs/format_column/supported_formats';
|
||||
import type { FormatColumnArgs } from '../../defs/format_column';
|
||||
import type { FormatColumnExpressionFunction } from '../../defs/format_column/types';
|
||||
|
||||
function isNestedFormat(params: DatatableColumn['meta']['params']) {
|
||||
// if there is a nested params object with an id, it's a nested format
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { mapToColumns } from './map_to_columns';
|
||||
import { mapToColumns } from '../../defs/map_to_columns/map_to_columns';
|
||||
import { Datatable } from '@kbn/expressions-plugin/common';
|
||||
import { createMockExecutionContext } from '@kbn/expressions-plugin/common/mocks';
|
||||
|
||||
|
|
@ -6,7 +6,10 @@
|
|||
*/
|
||||
|
||||
import type { DatatableColumn } from '@kbn/expressions-plugin/common';
|
||||
import type { OriginalColumn, MapToColumnsExpressionFunction } from './types';
|
||||
import type {
|
||||
OriginalColumn,
|
||||
MapToColumnsExpressionFunction,
|
||||
} from '../../defs/map_to_columns/types';
|
||||
|
||||
function getColumnName(originalColumn: OriginalColumn, newColumn: DatatableColumn) {
|
||||
if (originalColumn?.operationType === 'date_histogram') {
|
||||
|
|
@ -6,7 +6,10 @@
|
|||
*/
|
||||
|
||||
import { DatatableColumn } from '@kbn/expressions-plugin/common';
|
||||
import type { OriginalColumn, MapToColumnsExpressionFunction } from './types';
|
||||
import type {
|
||||
OriginalColumn,
|
||||
MapToColumnsExpressionFunction,
|
||||
} from '../../defs/map_to_columns/types';
|
||||
|
||||
export const mapToOriginalColumnsTextBased: MapToColumnsExpressionFunction['fn'] = (
|
||||
data,
|
||||
|
|
@ -12,8 +12,8 @@ import type { TimeRange } from '@kbn/es-query';
|
|||
import { createDatatableUtilitiesMock } from '@kbn/data-plugin/common/mocks';
|
||||
import { functionWrapper } from '@kbn/expressions-plugin/common/expression_functions/specs/tests/utils';
|
||||
|
||||
import { getTimeScale } from './time_scale';
|
||||
import type { TimeScaleArgs } from './types';
|
||||
import { getTimeScale } from '../../defs/time_scale/time_scale';
|
||||
import type { TimeScaleArgs } from '../../defs/time_scale/types';
|
||||
import { getTimeBounds } from './time_scale_fn';
|
||||
|
||||
describe('time_scale', () => {
|
||||
|
|
@ -15,7 +15,11 @@ import {
|
|||
TimeRangeBounds,
|
||||
TimeRange,
|
||||
} from '@kbn/data-plugin/common';
|
||||
import type { TimeScaleExpressionFunction, TimeScaleUnit, TimeScaleArgs } from './types';
|
||||
import type {
|
||||
TimeScaleExpressionFunction,
|
||||
TimeScaleUnit,
|
||||
TimeScaleArgs,
|
||||
} from '../../defs/time_scale/types';
|
||||
|
||||
const unitInMs: Record<TimeScaleUnit, number> = {
|
||||
s: 1000,
|
||||
|
|
@ -5,10 +5,10 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
export * from './counter_rate';
|
||||
export * from './collapse';
|
||||
export * from './format_column';
|
||||
export * from './map_to_columns';
|
||||
export * from './time_scale';
|
||||
export * from './datatable';
|
||||
export * from './formula_context';
|
||||
export * from './defs/counter_rate';
|
||||
export * from './defs/collapse';
|
||||
export * from './defs/format_column';
|
||||
export * from './defs/map_to_columns';
|
||||
export * from './defs/time_scale';
|
||||
export * from './defs/datatable';
|
||||
export * from './defs/formula_context';
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
|
|||
import { KBN_FIELD_TYPES } from '@kbn/field-types';
|
||||
import { FieldFormat, FieldFormatInstanceType } from '@kbn/field-formats-plugin/common';
|
||||
import type { FormatFactory } from '../types';
|
||||
import type { TimeScaleUnit } from '../expressions/time_scale';
|
||||
import type { TimeScaleUnit } from '../expressions/defs/time_scale';
|
||||
|
||||
const unitSuffixes: Record<TimeScaleUnit, string> = {
|
||||
s: i18n.translate('xpack.lens.fieldFormats.suffix.s', { defaultMessage: '/s' }),
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { CategoryDisplay, LegendDisplay, NumberDisplay, PieChartTypes } from './
|
|||
import { layerTypes } from './layer_types';
|
||||
import { CollapseFunction } from './expressions';
|
||||
|
||||
export type { OriginalColumn } from './expressions/map_to_columns';
|
||||
export type { OriginalColumn } from './expressions/defs/map_to_columns';
|
||||
export type { AllowedPartitionOverrides } from '@kbn/expression-partition-vis-plugin/common';
|
||||
export type { AllowedSettingsOverrides, AllowedChartOverrides } from '@kbn/charts-plugin/common';
|
||||
export type { AllowedGaugeOverrides } from '@kbn/expression-gauge-plugin/common';
|
||||
|
|
|
|||
|
|
@ -148,14 +148,14 @@ export async function mountApp(
|
|||
}
|
||||
) {
|
||||
const { createEditorFrame, attributeService, topNavMenuEntryGenerators, locator } = mountProps;
|
||||
const { contextType, initialContext, initialStateFromLocator, originatingApp } =
|
||||
getInitialContext(params.history) || {};
|
||||
|
||||
const [[coreStart, startDependencies], instance] = await Promise.all([
|
||||
core.getStartServices(),
|
||||
createEditorFrame(),
|
||||
]);
|
||||
|
||||
const { contextType, initialContext, initialStateFromLocator, originatingApp } =
|
||||
getInitialContext(params.history) || {};
|
||||
|
||||
const lensServices = await getLensServices(
|
||||
coreStart,
|
||||
startDependencies,
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export * from './visualizations/metric';
|
|||
export * from './visualizations/partition/pie_visualization';
|
||||
export * from './visualizations/partition';
|
||||
export * from './visualizations/xy/xy_visualization';
|
||||
export * from './visualizations/xy/types';
|
||||
export * from './visualizations/xy';
|
||||
export * from './visualizations/heatmap/heatmap_visualization';
|
||||
export * from './visualizations/heatmap';
|
||||
|
|
@ -47,8 +48,16 @@ export * from './app_plugin/mounter';
|
|||
export * from './lens_attribute_service';
|
||||
export * from './app_plugin/save_modal_container';
|
||||
export * from './chart_info_api';
|
||||
export * from './utils';
|
||||
|
||||
export * from './trigger_actions/open_in_discover_helpers';
|
||||
export * from './trigger_actions/open_lens_config/in_app_embeddable_edit/in_app_embeddable_edit_action_helpers';
|
||||
export { EditLensEmbeddableAction } from './trigger_actions/open_lens_config/in_app_embeddable_edit/in_app_embeddable_edit_action';
|
||||
export { getAddLensPanelAction } from './trigger_actions/add_lens_panel_action';
|
||||
export { AddESQLPanelAction } from './trigger_actions/open_lens_config/add_esql_panel_action';
|
||||
export { convertToLensActionFactory } from './trigger_actions/convert_to_lens_action';
|
||||
export { visualizeTSVBAction } from './trigger_actions/visualize_tsvb_actions';
|
||||
export { visualizeFieldAction } from './trigger_actions/visualize_field_actions';
|
||||
|
||||
export { deserializeState } from './react_embeddable/helper';
|
||||
export * from './react_embeddable/lens_embeddable';
|
||||
|
|
|
|||
|
|
@ -106,16 +106,18 @@ export const createIndexPatternService = ({
|
|||
if (contextDataViewSpec && contextDataViewSpec.id !== dataView.id) {
|
||||
dataViews.clearInstanceCache(dataView.id);
|
||||
}
|
||||
const loadedPatterns = await loadIndexPatterns({
|
||||
dataViews,
|
||||
patterns: [newDataView.id!],
|
||||
cache: {},
|
||||
});
|
||||
const [loadedPatterns, action] = await Promise.all([
|
||||
loadIndexPatterns({
|
||||
dataViews,
|
||||
patterns: [newDataView.id!],
|
||||
cache: {},
|
||||
}),
|
||||
uiActions.getAction(UPDATE_FILTER_REFERENCES_ACTION),
|
||||
]);
|
||||
replaceIndexPattern(loadedPatterns[newDataView.id!], dataView.id!, {
|
||||
applyImmediately: true,
|
||||
});
|
||||
const trigger = uiActions.getTrigger(UPDATE_FILTER_REFERENCES_TRIGGER);
|
||||
const action = await uiActions.getAction(UPDATE_FILTER_REFERENCES_ACTION);
|
||||
|
||||
action?.execute({
|
||||
trigger,
|
||||
|
|
|
|||
|
|
@ -175,17 +175,14 @@ describe('Lens Field Item', () => {
|
|||
await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
|
||||
};
|
||||
|
||||
const getFieldNode = (index = 0) => {
|
||||
return screen.getAllByTestId('lnsFieldListPanelField')[index];
|
||||
};
|
||||
|
||||
const queryProgressBar = () => screen.queryByRole('progressbar', { name: 'Loading' });
|
||||
|
||||
const queryFieldStats = () => screen.queryByTestId('unifiedFieldStats-buttonGroup');
|
||||
|
||||
it('should display displayName of a field', async () => {
|
||||
renderFieldItem();
|
||||
expect(getFieldNode()).toHaveTextContent('bytes');
|
||||
const [fieldNode] = await screen.findAllByTestId('lnsFieldListPanelField');
|
||||
expect(fieldNode).toHaveTextContent('bytes');
|
||||
});
|
||||
|
||||
it('should show gauge icon for gauge fields', async () => {
|
||||
|
|
|
|||
|
|
@ -5,20 +5,22 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useState, useMemo } from 'react';
|
||||
import React, { useCallback, useState, useMemo, lazy, Suspense } from 'react';
|
||||
import { EuiText, EuiButton, EuiPopoverFooter } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { Filter, Query } from '@kbn/es-query';
|
||||
import { DataViewField, type DataView } from '@kbn/data-views-plugin/common';
|
||||
import {
|
||||
AddFieldFilterHandler,
|
||||
type AddFieldFilterHandler,
|
||||
FieldStats,
|
||||
FieldPopover,
|
||||
FieldPopoverHeader,
|
||||
FieldPopoverFooter,
|
||||
FieldItemButton,
|
||||
type GetCustomFieldType,
|
||||
type FieldItemButtonProps,
|
||||
type FieldListItem,
|
||||
type GenericFieldItemButtonType,
|
||||
} from '@kbn/unified-field-list';
|
||||
import { Draggable } from '@kbn/dom-drag-drop';
|
||||
import { generateFilters, getEsQueryConfig } from '@kbn/data-plugin/public';
|
||||
|
|
@ -32,6 +34,23 @@ import { getFieldItemActions } from './get_field_item_actions';
|
|||
|
||||
type LensFieldListItem = IndexPatternField | DatatableColumn | DataViewField;
|
||||
|
||||
const LazyFieldItemButton = lazy(
|
||||
() =>
|
||||
import('@kbn/unified-field-list').then((module) => ({
|
||||
default: module.FieldItemButton,
|
||||
}))
|
||||
// unfortunately this force cast is necessary as the lazy load would remove the generic type information
|
||||
) as GenericFieldItemButtonType;
|
||||
|
||||
// Async load the FieldItemButton component to avoid bundle size increase when inline editing
|
||||
const WrappedFieldItemButton = <T extends FieldListItem = LensFieldListItem>(
|
||||
props: FieldItemButtonProps<T>
|
||||
) => (
|
||||
<Suspense fallback={<></>}>
|
||||
<LazyFieldItemButton<T> {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
function isTextBasedColumnField(field: LensFieldListItem): field is DatatableColumn {
|
||||
return !('type' in field) && Boolean(field?.meta.type);
|
||||
}
|
||||
|
|
@ -269,13 +288,13 @@ export function InnerFieldItem(props: FieldItemProps) {
|
|||
dragClassName="unifiedFieldListItemButton__dragging"
|
||||
>
|
||||
{isTextBasedColumnField(field) ? (
|
||||
<FieldItemButton<DatatableColumn>
|
||||
<WrappedFieldItemButton<DatatableColumn>
|
||||
field={field}
|
||||
getCustomFieldType={getCustomFieldType}
|
||||
{...commonFieldItemButtonProps}
|
||||
/>
|
||||
) : (
|
||||
<FieldItemButton field={field} {...commonFieldItemButtonProps} />
|
||||
<WrappedFieldItemButton field={field} {...commonFieldItemButtonProps} />
|
||||
)}
|
||||
</Draggable>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { isEqual } from 'lodash';
|
|||
import type { Query } from '@kbn/es-query';
|
||||
import { validateQuery, FilterQueryInput } from '@kbn/visualization-ui-components';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { FilterQueryInputProps } from '@kbn/visualization-ui-components/components/query_input/filter_query_input';
|
||||
import type { FilterQueryInputProps } from '@kbn/visualization-ui-components/components/query_input/filter_query_input';
|
||||
import { LENS_APP_NAME } from '../../../../common/constants';
|
||||
import { GenericIndexPatternColumn, operationDefinitionMap } from '../operations';
|
||||
import type { FormBasedLayer } from '../types';
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
ExpressionFunctionFormulaInterval,
|
||||
ExpressionFunctionFormulaNow,
|
||||
ExpressionFunctionFormulaTimeRange,
|
||||
} from '../../../../../../common/expressions/formula_context/context_fns';
|
||||
} from '../../../../../../common/expressions/defs/formula_context/context_fns';
|
||||
import type {
|
||||
DateHistogramIndexPatternColumn,
|
||||
FormBasedLayer,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { RangeEditor } from './range_editor';
|
|||
import { OperationDefinition } from '..';
|
||||
import { FieldBasedIndexPatternColumn } from '../column_types';
|
||||
import { updateColumnParam } from '../../layer_helpers';
|
||||
import { supportedFormats } from '../../../../../../common/expressions/format_column/supported_formats';
|
||||
import { supportedFormats } from '../../../../../../common/expressions/defs/format_column/supported_formats';
|
||||
import { MODES, AUTO_BARS, DEFAULT_INTERVAL, MIN_HISTOGRAM_BARS, SLICES } from './constants';
|
||||
import { IndexPattern, IndexPatternField } from '../../../../../types';
|
||||
import { getInvalidFieldMessage, isValidNumber } from '../helpers';
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ export class TextBasedDatasource {
|
|||
|
||||
setup(core: CoreSetup<TextBasedStartPlugins>, { editorFrame }: TextBasedSetupPlugins) {
|
||||
editorFrame.registerDatasource(async () => {
|
||||
const { getTextBasedDatasource } = await import('../../async_services');
|
||||
const [coreStart, { data, dataViews, expressions }] = await core.getStartServices();
|
||||
const [{ getTextBasedDatasource }, [coreStart, { data, dataViews, expressions }]] =
|
||||
await Promise.all([import('../../async_services'), core.getStartServices()]);
|
||||
|
||||
return getTextBasedDatasource({
|
||||
core: coreStart,
|
||||
|
|
|
|||
|
|
@ -98,12 +98,12 @@ export class EditorFrameService {
|
|||
doc: LensDocument,
|
||||
services: EditorFramePlugins & { forceDSL?: boolean }
|
||||
) => {
|
||||
const [resolvedDatasources, resolvedVisualizations] = await Promise.all([
|
||||
this.loadDatasources(),
|
||||
this.loadVisualizations(),
|
||||
]);
|
||||
|
||||
const { persistedStateToExpression } = await import('../async_services');
|
||||
const [resolvedDatasources, resolvedVisualizations, { persistedStateToExpression }] =
|
||||
await Promise.all([
|
||||
this.loadDatasources(),
|
||||
this.loadVisualizations(),
|
||||
import('../async_services'),
|
||||
]);
|
||||
|
||||
return persistedStateToExpression(resolvedDatasources, resolvedVisualizations, doc, services);
|
||||
};
|
||||
|
|
@ -121,13 +121,12 @@ export class EditorFrameService {
|
|||
|
||||
public start(core: CoreStart, plugins: EditorFrameStartPlugins): EditorFrameStart {
|
||||
const createInstance = async (): Promise<EditorFrameInstance> => {
|
||||
const [resolvedDatasources, resolvedVisualizations] = await Promise.all([
|
||||
const [resolvedDatasources, resolvedVisualizations, { EditorFrame }] = await Promise.all([
|
||||
this.loadDatasources(),
|
||||
this.loadVisualizations(),
|
||||
import('../async_services'),
|
||||
]);
|
||||
|
||||
const { EditorFrame } = await import('../async_services');
|
||||
|
||||
return {
|
||||
EditorFrameContainer: ({
|
||||
showNoDataPopover,
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
|
||||
import type { ExpressionsSetup } from '@kbn/expressions-plugin/public';
|
||||
|
||||
import { getDatatable } from '../common/expressions/datatable/datatable';
|
||||
import { datatableColumn } from '../common/expressions/datatable/datatable_column';
|
||||
import { mapToColumns } from '../common/expressions/map_to_columns/map_to_columns';
|
||||
import { formatColumn } from '../common/expressions/format_column';
|
||||
import { counterRate } from '../common/expressions/counter_rate';
|
||||
import { getTimeScale } from '../common/expressions/time_scale/time_scale';
|
||||
import { collapse } from '../common/expressions/collapse';
|
||||
import { getDatatable } from '../common/expressions/defs/datatable/datatable';
|
||||
import { datatableColumn } from '../common/expressions/impl/datatable/datatable_column';
|
||||
import { mapToColumns } from '../common/expressions/defs/map_to_columns/map_to_columns';
|
||||
import { formatColumn } from '../common/expressions/defs/format_column';
|
||||
import { counterRate } from '../common/expressions/defs/counter_rate';
|
||||
import { getTimeScale } from '../common/expressions/defs/time_scale/time_scale';
|
||||
import { collapse } from '../common/expressions/defs/collapse';
|
||||
import {
|
||||
formulaIntervalFn,
|
||||
formulaNowFn,
|
||||
formulaTimeRangeFn,
|
||||
} from '../common/expressions/formula_context';
|
||||
} from '../common/expressions/defs/formula_context';
|
||||
|
||||
type TimeScaleArguments = Parameters<typeof getTimeScale>;
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import type {
|
|||
} from '@kbn/expressions-plugin/public';
|
||||
import {
|
||||
ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
|
||||
ACTION_CONVERT_TO_LENS,
|
||||
DASHBOARD_VISUALIZATION_PANEL_TRIGGER,
|
||||
VisualizationsSetup,
|
||||
VisualizationsStart,
|
||||
|
|
@ -49,6 +50,7 @@ import {
|
|||
VISUALIZE_FIELD_TRIGGER,
|
||||
VisualizeFieldContext,
|
||||
ADD_PANEL_TRIGGER,
|
||||
ACTION_VISUALIZE_LENS_FIELD,
|
||||
} from '@kbn/ui-actions-plugin/public';
|
||||
import {
|
||||
VISUALIZE_EDITOR_TRIGGER,
|
||||
|
|
@ -116,13 +118,7 @@ import type {
|
|||
} from './types';
|
||||
import { lensVisTypeAlias } from './vis_type_alias';
|
||||
import { createOpenInDiscoverAction } from './trigger_actions/open_in_discover_action';
|
||||
import {
|
||||
inAppEmbeddableEditTrigger,
|
||||
IN_APP_EMBEDDABLE_EDIT_TRIGGER,
|
||||
} from './trigger_actions/open_lens_config/in_app_embeddable_edit/in_app_embeddable_edit_trigger';
|
||||
import { EditLensEmbeddableAction } from './trigger_actions/open_lens_config/in_app_embeddable_edit/in_app_embeddable_edit_action';
|
||||
import { visualizeFieldAction } from './trigger_actions/visualize_field_actions';
|
||||
import { visualizeTSVBAction } from './trigger_actions/visualize_tsvb_actions';
|
||||
import { inAppEmbeddableEditTrigger } from './trigger_actions/open_lens_config/in_app_embeddable_edit/in_app_embeddable_edit_trigger';
|
||||
|
||||
import type {
|
||||
LensEmbeddableStartServices,
|
||||
|
|
@ -145,10 +141,12 @@ import {
|
|||
LensSavedObjectAttributes,
|
||||
} from '../common/content_management';
|
||||
import type { EditLensConfigurationProps } from './app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration';
|
||||
import { convertToLensActionFactory } from './trigger_actions/convert_to_lens_action';
|
||||
import { LensRenderer } from './react_embeddable/renderer/lens_custom_renderer_component';
|
||||
import { deserializeState } from './react_embeddable/helper';
|
||||
import { ACTION_CREATE_ESQL_CHART } from './trigger_actions/open_lens_config/constants';
|
||||
import {
|
||||
ACTION_CREATE_ESQL_CHART,
|
||||
ACTION_EDIT_LENS_EMBEDDABLE,
|
||||
IN_APP_EMBEDDABLE_EDIT_TRIGGER,
|
||||
} from './trigger_actions/open_lens_config/constants';
|
||||
|
||||
export type { SaveProps } from './app_plugin';
|
||||
|
||||
|
|
@ -315,6 +313,8 @@ export class LensPlugin {
|
|||
private hasDiscoverAccess: boolean = false;
|
||||
private dataViewsService: DataViewsPublicPluginStart | undefined;
|
||||
private locator?: LensAppLocator;
|
||||
private datasourceMap: DatasourceMap | undefined;
|
||||
private visualizationMap: VisualizationMap | undefined;
|
||||
|
||||
// Note: this method will be overwritten in the setup flow
|
||||
private initEditorFrameService = async (): Promise<{
|
||||
|
|
@ -342,14 +342,15 @@ export class LensPlugin {
|
|||
const startServices = createStartServicesGetter(core.getStartServices);
|
||||
|
||||
const getStartServicesForEmbeddable = async (): Promise<LensEmbeddableStartServices> => {
|
||||
const { setUsageCollectionStart, initMemoizedErrorNotification } = await import(
|
||||
'./async_services'
|
||||
);
|
||||
const { core: coreStart, plugins } = startServices();
|
||||
|
||||
const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
|
||||
const [{ getLensAttributeService }, eventAnnotationService] = await Promise.all([
|
||||
const [
|
||||
{ getLensAttributeService, setUsageCollectionStart, initMemoizedErrorNotification },
|
||||
{ visualizationMap, datasourceMap },
|
||||
eventAnnotationService,
|
||||
] = await Promise.all([
|
||||
import('./async_services'),
|
||||
this.initEditorFrameService(),
|
||||
plugins.eventAnnotation.getService(),
|
||||
]);
|
||||
|
||||
|
|
@ -390,7 +391,7 @@ export class LensPlugin {
|
|||
embeddable.registerReactEmbeddableFactory(LENS_EMBEDDABLE_TYPE, async () => {
|
||||
const [deps, { createLensEmbeddableFactory }] = await Promise.all([
|
||||
getStartServicesForEmbeddable(),
|
||||
import('./react_embeddable/lens_embeddable'),
|
||||
import('./async_services'),
|
||||
]);
|
||||
return createLensEmbeddableFactory(deps);
|
||||
});
|
||||
|
|
@ -398,7 +399,10 @@ export class LensPlugin {
|
|||
// Let Dashboard know about the Lens panel type
|
||||
embeddable.registerAddFromLibraryType<LensSavedObjectAttributes>({
|
||||
onAdd: async (container, savedObject) => {
|
||||
const services = await getStartServicesForEmbeddable();
|
||||
const [services, { deserializeState }] = await Promise.all([
|
||||
getStartServicesForEmbeddable(),
|
||||
import('./async_services'),
|
||||
]);
|
||||
// deserialize the saved object from visualize library
|
||||
// this make sure to fit into the new embeddable model, where the following build()
|
||||
// function expects a fully loaded runtime state
|
||||
|
|
@ -466,7 +470,7 @@ export class LensPlugin {
|
|||
() => startServices().plugins.fieldFormats.deserialize,
|
||||
() => startServices().plugins.data.datatableUtilities,
|
||||
async () => {
|
||||
const { getTimeZone } = await import('./utils');
|
||||
const { getTimeZone } = await import('./async_services');
|
||||
return getTimeZone(core.uiSettings);
|
||||
},
|
||||
() => startServices().plugins.data.nowProvider.get()
|
||||
|
|
@ -479,21 +483,24 @@ export class LensPlugin {
|
|||
mount: async (params: AppMountParameters) => {
|
||||
const { core: coreStart, plugins: deps } = startServices();
|
||||
|
||||
await this.initParts(
|
||||
core,
|
||||
data,
|
||||
charts,
|
||||
expressions,
|
||||
fieldFormats,
|
||||
deps.fieldFormats.deserialize
|
||||
);
|
||||
|
||||
const {
|
||||
mountApp,
|
||||
getLensAttributeService,
|
||||
setUsageCollectionStart,
|
||||
initMemoizedErrorNotification,
|
||||
} = await import('./async_services');
|
||||
const [
|
||||
{
|
||||
mountApp,
|
||||
getLensAttributeService,
|
||||
setUsageCollectionStart,
|
||||
initMemoizedErrorNotification,
|
||||
},
|
||||
] = await Promise.all([
|
||||
import('./async_services'),
|
||||
this.initParts(
|
||||
core,
|
||||
data,
|
||||
charts,
|
||||
expressions,
|
||||
fieldFormats,
|
||||
deps.fieldFormats.deserialize
|
||||
),
|
||||
]);
|
||||
|
||||
if (deps.usageCollection) {
|
||||
setUsageCollectionStart(deps.usageCollection);
|
||||
|
|
@ -528,6 +535,9 @@ export class LensPlugin {
|
|||
|
||||
// Note: this overwrites a method defined above
|
||||
this.initEditorFrameService = async () => {
|
||||
if (this.datasourceMap && this.visualizationMap) {
|
||||
return { datasourceMap: this.datasourceMap, visualizationMap: this.visualizationMap };
|
||||
}
|
||||
const { plugins } = startServices();
|
||||
await this.initParts(
|
||||
core,
|
||||
|
|
@ -542,6 +552,8 @@ export class LensPlugin {
|
|||
this.editorFrameService!.loadVisualizations(),
|
||||
this.editorFrameService!.loadDatasources(),
|
||||
]);
|
||||
this.visualizationMap = visualizationMap;
|
||||
this.datasourceMap = datasourceMap;
|
||||
return { datasourceMap, visualizationMap };
|
||||
};
|
||||
|
||||
|
|
@ -635,51 +647,80 @@ export class LensPlugin {
|
|||
// this trigger enables external consumers to use the inline editing flyout
|
||||
startDependencies.uiActions.registerTrigger(inAppEmbeddableEditTrigger);
|
||||
|
||||
startDependencies.uiActions.addTriggerAction(
|
||||
startDependencies.uiActions.addTriggerActionAsync(
|
||||
VISUALIZE_FIELD_TRIGGER,
|
||||
visualizeFieldAction(core.application)
|
||||
ACTION_VISUALIZE_LENS_FIELD,
|
||||
async () => {
|
||||
const { visualizeFieldAction } = await import('./async_services');
|
||||
return visualizeFieldAction(core.application);
|
||||
}
|
||||
);
|
||||
|
||||
startDependencies.uiActions.addTriggerAction(
|
||||
startDependencies.uiActions.addTriggerActionAsync(
|
||||
VISUALIZE_EDITOR_TRIGGER,
|
||||
visualizeTSVBAction(core.application)
|
||||
ACTION_CONVERT_TO_LENS,
|
||||
async () => {
|
||||
const { visualizeTSVBAction } = await import('./async_services');
|
||||
return visualizeTSVBAction(core.application);
|
||||
}
|
||||
);
|
||||
|
||||
startDependencies.uiActions.addTriggerAction(
|
||||
startDependencies.uiActions.addTriggerActionAsync(
|
||||
DASHBOARD_VISUALIZATION_PANEL_TRIGGER,
|
||||
convertToLensActionFactory(
|
||||
ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
|
||||
i18n.translate('xpack.lens.visualizeLegacyVisualizationChart', {
|
||||
defaultMessage: 'Visualize legacy visualization chart',
|
||||
}),
|
||||
i18n.translate('xpack.lens.dashboardLabel', {
|
||||
defaultMessage: 'Dashboard',
|
||||
})
|
||||
)(core.application)
|
||||
ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
|
||||
async () => {
|
||||
const { convertToLensActionFactory } = await import('./async_services');
|
||||
const action = convertToLensActionFactory(
|
||||
ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
|
||||
i18n.translate('xpack.lens.visualizeLegacyVisualizationChart', {
|
||||
defaultMessage: 'Visualize legacy visualization chart',
|
||||
}),
|
||||
i18n.translate('xpack.lens.dashboardLabel', {
|
||||
defaultMessage: 'Dashboard',
|
||||
})
|
||||
);
|
||||
return action(core.application);
|
||||
}
|
||||
);
|
||||
|
||||
startDependencies.uiActions.addTriggerAction(
|
||||
startDependencies.uiActions.addTriggerActionAsync(
|
||||
AGG_BASED_VISUALIZATION_TRIGGER,
|
||||
convertToLensActionFactory(
|
||||
ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
|
||||
i18n.translate('xpack.lens.visualizeAggBasedLegend', {
|
||||
defaultMessage: 'Visualize agg based chart',
|
||||
}),
|
||||
i18n.translate('xpack.lens.AggBasedLabel', {
|
||||
defaultMessage: 'aggregation based visualization',
|
||||
})
|
||||
)(core.application)
|
||||
ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
|
||||
async () => {
|
||||
const { convertToLensActionFactory } = await import('./async_services');
|
||||
const action = convertToLensActionFactory(
|
||||
ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
|
||||
i18n.translate('xpack.lens.visualizeAggBasedLegend', {
|
||||
defaultMessage: 'Visualize agg based chart',
|
||||
}),
|
||||
i18n.translate('xpack.lens.AggBasedLabel', {
|
||||
defaultMessage: 'aggregation based visualization',
|
||||
})
|
||||
);
|
||||
return action(core.application);
|
||||
}
|
||||
);
|
||||
|
||||
// Allows the Lens embeddable to easily open the inline editing flyout
|
||||
const editLensEmbeddableAction = new EditLensEmbeddableAction(core, async () => {
|
||||
const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
|
||||
return { ...startDependencies, visualizationMap, datasourceMap };
|
||||
});
|
||||
// });
|
||||
// embeddable inline edit panel action
|
||||
startDependencies.uiActions.addTriggerAction(
|
||||
// startDependencies.uiActions.addTriggerAction(
|
||||
// IN_APP_EMBEDDABLE_EDIT_TRIGGER,
|
||||
// editLensEmbeddableAction
|
||||
// );
|
||||
|
||||
startDependencies.uiActions.addTriggerActionAsync(
|
||||
IN_APP_EMBEDDABLE_EDIT_TRIGGER,
|
||||
editLensEmbeddableAction
|
||||
ACTION_EDIT_LENS_EMBEDDABLE,
|
||||
async () => {
|
||||
const { EditLensEmbeddableAction } = await import('./async_services');
|
||||
const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
|
||||
return new EditLensEmbeddableAction(core, {
|
||||
...startDependencies,
|
||||
visualizationMap,
|
||||
datasourceMap,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
startDependencies.uiActions.addTriggerActionAsync(
|
||||
|
|
@ -743,16 +784,16 @@ export class LensPlugin {
|
|||
return Boolean(core.application.capabilities.visualize_v2?.show);
|
||||
},
|
||||
getXyVisTypes: async () => {
|
||||
const { visualizationSubtypes } = await import('./visualizations/xy/types');
|
||||
const { visualizationSubtypes } = await import('./async_services');
|
||||
return visualizationSubtypes;
|
||||
},
|
||||
|
||||
stateHelperApi: async () => {
|
||||
const { createFormulaPublicApi, createChartInfoApi, suggestionsApi } = await import(
|
||||
'./async_services'
|
||||
);
|
||||
const [
|
||||
{ createFormulaPublicApi, createChartInfoApi, suggestionsApi },
|
||||
{ visualizationMap, datasourceMap },
|
||||
] = await Promise.all([import('./async_services'), this.initEditorFrameService()]);
|
||||
|
||||
const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
|
||||
return {
|
||||
formula: createFormulaPublicApi(),
|
||||
chartInfo: createChartInfoApi(
|
||||
|
|
@ -782,8 +823,8 @@ export class LensPlugin {
|
|||
// TODO: remove this in faviour of the custom action thing
|
||||
// This is currently used in Discover by the unified histogram plugin
|
||||
EditLensConfigPanelApi: async () => {
|
||||
const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
|
||||
const { getEditLensConfiguration } = await import('./async_services');
|
||||
const [{ visualizationMap, datasourceMap }, { getEditLensConfiguration }] =
|
||||
await Promise.all([this.initEditorFrameService(), import('./async_services')]);
|
||||
const Component = await getEditLensConfiguration(
|
||||
core,
|
||||
startDependencies,
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ import {
|
|||
cellValueTrigger,
|
||||
CELL_VALUE_TRIGGER,
|
||||
} from '@kbn/embeddable-plugin/public';
|
||||
import { DocumentToExpressionReturnType } from '../../async_services';
|
||||
import { LensDocument } from '../../persistence';
|
||||
import type { DocumentToExpressionReturnType } from '../../async_services';
|
||||
import type { LensDocument } from '../../persistence';
|
||||
import {
|
||||
GetCompatibleCellValueActions,
|
||||
IndexPatternMap,
|
||||
|
|
|
|||
|
|
@ -6,3 +6,5 @@
|
|||
*/
|
||||
|
||||
export const ACTION_CREATE_ESQL_CHART = 'ACTION_CREATE_ESQL_CHART';
|
||||
export const ACTION_EDIT_LENS_EMBEDDABLE = 'ACTION_EDIT_LENS_EMBEDDABLE';
|
||||
export const IN_APP_EMBEDDABLE_EDIT_TRIGGER = 'IN_APP_EMBEDDABLE_EDIT_TRIGGER';
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@ describe('inapp editing of Lens embeddable', () => {
|
|||
references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }],
|
||||
} as TypedLensSerializedState['attributes'];
|
||||
it('is incompatible for ESQL charts and if ui setting for ES|QL is off', async () => {
|
||||
const inAppEditAction = new EditLensEmbeddableAction(core, async () => ({
|
||||
const inAppEditAction = new EditLensEmbeddableAction(core, {
|
||||
...mockStartDependencies,
|
||||
visualizationMap: {},
|
||||
datasourceMap: {},
|
||||
}));
|
||||
});
|
||||
const context = {
|
||||
attributes,
|
||||
lensEvent: {
|
||||
|
|
@ -64,11 +64,11 @@ describe('inapp editing of Lens embeddable', () => {
|
|||
},
|
||||
},
|
||||
} as CoreStart;
|
||||
const inAppEditAction = new EditLensEmbeddableAction(updatedCore, async () => ({
|
||||
const inAppEditAction = new EditLensEmbeddableAction(updatedCore, {
|
||||
...mockStartDependencies,
|
||||
visualizationMap: {},
|
||||
datasourceMap: {},
|
||||
}));
|
||||
});
|
||||
const context = {
|
||||
attributes,
|
||||
lensEvent: {
|
||||
|
|
@ -84,11 +84,11 @@ describe('inapp editing of Lens embeddable', () => {
|
|||
});
|
||||
|
||||
it('is compatible for dataview charts', async () => {
|
||||
const inAppEditAction = new EditLensEmbeddableAction(core, async () => ({
|
||||
const inAppEditAction = new EditLensEmbeddableAction(core, {
|
||||
...mockStartDependencies,
|
||||
visualizationMap: {},
|
||||
datasourceMap: {},
|
||||
}));
|
||||
});
|
||||
const newAttributes = {
|
||||
...attributes,
|
||||
state: {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ import { Action } from '@kbn/ui-actions-plugin/public';
|
|||
import type { LensPluginStartDependencies } from '../../../plugin';
|
||||
import type { VisualizationMap, DatasourceMap } from '../../../types';
|
||||
import type { InlineEditLensEmbeddableContext } from './types';
|
||||
|
||||
const ACTION_EDIT_LENS_EMBEDDABLE = 'ACTION_EDIT_LENS_EMBEDDABLE';
|
||||
import { ACTION_EDIT_LENS_EMBEDDABLE } from '../constants';
|
||||
|
||||
export class EditLensEmbeddableAction implements Action<InlineEditLensEmbeddableContext> {
|
||||
public type = ACTION_EDIT_LENS_EMBEDDABLE;
|
||||
|
|
@ -20,12 +19,10 @@ export class EditLensEmbeddableAction implements Action<InlineEditLensEmbeddable
|
|||
|
||||
constructor(
|
||||
protected readonly core: CoreStart,
|
||||
protected readonly getServices: () => Promise<
|
||||
LensPluginStartDependencies & {
|
||||
visualizationMap: VisualizationMap;
|
||||
datasourceMap: DatasourceMap;
|
||||
}
|
||||
>
|
||||
protected readonly dependencies: LensPluginStartDependencies & {
|
||||
visualizationMap: VisualizationMap;
|
||||
datasourceMap: DatasourceMap;
|
||||
}
|
||||
) {}
|
||||
|
||||
public getDisplayName(): string {
|
||||
|
|
@ -51,14 +48,11 @@ export class EditLensEmbeddableAction implements Action<InlineEditLensEmbeddable
|
|||
onApply,
|
||||
onCancel,
|
||||
}: InlineEditLensEmbeddableContext) {
|
||||
const [{ executeEditEmbeddableAction }, services] = await Promise.all([
|
||||
import('../../../async_services'),
|
||||
this.getServices(),
|
||||
]);
|
||||
const { executeEditEmbeddableAction } = await import('../../../async_services');
|
||||
if (attributes) {
|
||||
executeEditEmbeddableAction({
|
||||
core: this.core,
|
||||
deps: services,
|
||||
deps: this.dependencies,
|
||||
attributes,
|
||||
lensEvent,
|
||||
container,
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
*/
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { Trigger } from '@kbn/ui-actions-plugin/public';
|
||||
import { IN_APP_EMBEDDABLE_EDIT_TRIGGER } from '../constants';
|
||||
|
||||
export const IN_APP_EMBEDDABLE_EDIT_TRIGGER = 'IN_APP_EMBEDDABLE_EDIT_TRIGGER';
|
||||
export const inAppEmbeddableEditTrigger: Trigger = {
|
||||
id: IN_APP_EMBEDDABLE_EDIT_TRIGGER,
|
||||
title: i18n.translate('xpack.lens.inAppEditTrigger.title', {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { getColorCategories } from '@kbn/chart-expressions-common';
|
|||
import { useDebouncedValue } from '@kbn/visualization-utils';
|
||||
import { getOriginalId } from '@kbn/transpose-utils';
|
||||
import { KbnPalettes } from '@kbn/palettes';
|
||||
import { DatatableInspectorTables } from '../../../../common/expressions';
|
||||
import type { VisualizationDimensionEditorProps } from '../../../types';
|
||||
import type { DatatableVisualizationState } from '../visualization';
|
||||
|
||||
|
|
@ -32,7 +33,6 @@ import { CollapseSetting } from '../../../shared_components/collapse_setting';
|
|||
import { ColorMappingByValues } from '../../../shared_components/coloring/color_mapping_by_values';
|
||||
import { ColorMappingByTerms } from '../../../shared_components/coloring/color_mapping_by_terms';
|
||||
import { getColumnAlignment } from '../utils';
|
||||
import { DatatableInspectorTables } from '../../../../common/expressions/datatable/datatable_fn';
|
||||
|
||||
const idPrefix = htmlIdGenerator()();
|
||||
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ import {
|
|||
getDefaultSummaryLabel,
|
||||
getFinalSummaryConfiguration,
|
||||
getSummaryRowOptions,
|
||||
} from '../../../../common/expressions/datatable/summary';
|
||||
import { isNumericFieldForDatatable } from '../../../../common/expressions/datatable/utils';
|
||||
import { DatatableInspectorTables } from '../../../../common/expressions/datatable/datatable_fn';
|
||||
} from '../../../../common/expressions/impl/datatable/summary';
|
||||
import { isNumericFieldForDatatable } from '../../../../common/expressions/impl/datatable/utils';
|
||||
import { DatatableInspectorTables } from '../../../../common/expressions/defs/datatable/datatable';
|
||||
|
||||
type ColumnType = DatatableVisualizationState['columns'][number];
|
||||
type SummaryRowType = Extract<ColumnState['summaryRow'], string>;
|
||||
|
|
|
|||
|
|
@ -58,12 +58,12 @@ import {
|
|||
createGridSortingConfig,
|
||||
createTransposeColumnFilterHandler,
|
||||
} from './table_actions';
|
||||
import { getFinalSummaryConfiguration } from '../../../../common/expressions/datatable/summary';
|
||||
import { getFinalSummaryConfiguration } from '../../../../common/expressions/impl/datatable/summary';
|
||||
import { DEFAULT_HEADER_ROW_HEIGHT, DEFAULT_HEADER_ROW_HEIGHT_LINES } from './constants';
|
||||
import {
|
||||
getFieldMetaFromDatatable,
|
||||
isNumericField,
|
||||
} from '../../../../common/expressions/datatable/utils';
|
||||
} from '../../../../common/expressions/impl/datatable/utils';
|
||||
import { CellColorFn, getCellColorFn } from '../../../shared_components/coloring/get_cell_color_fn';
|
||||
import { getColumnAlignment } from '../utils';
|
||||
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ export class DatatableVisualization {
|
|||
{ expressions, formatFactory, editorFrame, charts }: DatatableVisualizationPluginSetupPlugins
|
||||
) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getDatatableRenderer, getDatatableVisualization } = await import(
|
||||
'../../async_services'
|
||||
);
|
||||
const palettes = await charts.palettes.getPalettes();
|
||||
const [{ getDatatableRenderer, getDatatableVisualization }, palettes] = await Promise.all([
|
||||
import('../../async_services'),
|
||||
charts.palettes.getPalettes(),
|
||||
]);
|
||||
|
||||
expressions.registerRenderer(() =>
|
||||
getDatatableRenderer({
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import { TableDimensionDataExtraEditor, TableDimensionEditor } from './component
|
|||
import { TableDimensionEditorAdditionalSection } from './components/dimension_editor_addtional_section';
|
||||
import type { FormatFactory, LayerType } from '../../../common/types';
|
||||
import { RowHeightMode } from '../../../common/types';
|
||||
import { getDefaultSummaryLabel } from '../../../common/expressions/datatable/summary';
|
||||
import { getDefaultSummaryLabel } from '../../../common/expressions/impl/datatable/summary';
|
||||
import {
|
||||
type ColumnState,
|
||||
type SortingState,
|
||||
|
|
@ -59,7 +59,7 @@ import {
|
|||
getAccessorType,
|
||||
} from '../../shared_components';
|
||||
import { getColorMappingTelemetryEvents } from '../../lens_ui_telemetry/color_telemetry_helpers';
|
||||
import { DatatableInspectorTables } from '../../../common/expressions/datatable/datatable_fn';
|
||||
import { DatatableInspectorTables } from '../../../common/expressions/defs/datatable/datatable';
|
||||
import { getSimpleColumnType } from './components/table_actions';
|
||||
export interface DatatableVisualizationState {
|
||||
columns: ColumnState[];
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import { GaugeTicksPositions, GaugeColorModes } from '@kbn/expression-gauge-plug
|
|||
import { getMaxValue, getMinValue } from '@kbn/expression-gauge-plugin/public';
|
||||
import { TooltipWrapper } from '@kbn/visualization-utils';
|
||||
import { css } from '@emotion/react';
|
||||
import { isNumericFieldForDatatable } from '../../../common/expressions/datatable/utils';
|
||||
import { isNumericFieldForDatatable } from '../../../common/expressions/impl/datatable/utils';
|
||||
import { PalettePanelContainer } from '../../shared_components';
|
||||
import type { VisualizationDimensionEditorProps } from '../../types';
|
||||
import type { GaugeVisualizationState } from './constants';
|
||||
|
|
|
|||
|
|
@ -17,8 +17,10 @@ export interface GaugeVisualizationPluginSetupPlugins {
|
|||
export class GaugeVisualization {
|
||||
setup(core: CoreSetup, { editorFrame, charts }: GaugeVisualizationPluginSetupPlugins) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getGaugeVisualization } = await import('../../async_services');
|
||||
const palettes = await charts.palettes.getPalettes();
|
||||
const [{ getGaugeVisualization }, palettes] = await Promise.all([
|
||||
import('../../async_services'),
|
||||
charts.palettes.getPalettes(),
|
||||
]);
|
||||
return getGaugeVisualization({ paletteService: palettes });
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@ export interface HeatmapVisualizationPluginSetupPlugins {
|
|||
export class HeatmapVisualization {
|
||||
setup(core: CoreSetup, { editorFrame, charts }: HeatmapVisualizationPluginSetupPlugins) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getHeatmapVisualization } = await import('../../async_services');
|
||||
const palettes = await charts.palettes.getPalettes();
|
||||
const [{ getHeatmapVisualization }, paletteService] = await Promise.all([
|
||||
import('../../async_services'),
|
||||
charts.palettes.getPalettes(),
|
||||
]);
|
||||
|
||||
return getHeatmapVisualization({ paletteService: palettes, theme: core.theme });
|
||||
return getHeatmapVisualization({ paletteService, theme: core.theme });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import React from 'react';
|
|||
import { ColorMode } from '@kbn/charts-plugin/common';
|
||||
import { css } from '@emotion/react';
|
||||
import type { LegacyMetricState } from '../../../common/types';
|
||||
import { isNumericFieldForDatatable } from '../../../common/expressions/datatable/utils';
|
||||
import { isNumericFieldForDatatable } from '../../../common/expressions/impl/datatable/utils';
|
||||
import { PalettePanelContainer } from '../../shared_components';
|
||||
import type { VisualizationDimensionEditorProps } from '../../types';
|
||||
import { defaultPaletteParams } from './palette_config';
|
||||
|
|
|
|||
|
|
@ -17,10 +17,8 @@ export interface LegacyMetricVisualizationPluginSetupPlugins {
|
|||
export class LegacyMetricVisualization {
|
||||
setup(core: CoreSetup, { editorFrame, charts }: LegacyMetricVisualizationPluginSetupPlugins) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getLegacyMetricVisualization: getMetricVisualization } = await import(
|
||||
'../../async_services'
|
||||
);
|
||||
const paletteService = await charts.palettes.getPalettes();
|
||||
const [{ getLegacyMetricVisualization: getMetricVisualization }, paletteService] =
|
||||
await Promise.all([import('../../async_services'), charts.palettes.getPalettes()]);
|
||||
|
||||
return getMetricVisualization({ paletteService });
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@ export interface MetricVisualizationPluginSetupPlugins {
|
|||
export class MetricVisualization {
|
||||
setup(core: CoreSetup, { editorFrame, charts }: MetricVisualizationPluginSetupPlugins) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getMetricVisualization } = await import('../../async_services');
|
||||
const palettes = await charts.palettes.getPalettes();
|
||||
const [{ getMetricVisualization }, paletteService] = await Promise.all([
|
||||
import('../../async_services'),
|
||||
charts.palettes.getPalettes(),
|
||||
]);
|
||||
|
||||
return getMetricVisualization({ paletteService: palettes, theme: core.theme });
|
||||
return getMetricVisualization({ paletteService, theme: core.theme });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import { Ast } from '@kbn/interpreter';
|
|||
import { LayoutDirection } from '@elastic/charts';
|
||||
import { hasIcon } from '@kbn/visualization-ui-components';
|
||||
import { CollapseArgs, CollapseFunction } from '../../../common/expressions';
|
||||
import { CollapseExpressionFunction } from '../../../common/expressions/collapse/types';
|
||||
import { CollapseExpressionFunction } from '../../../common/expressions/defs/collapse/types';
|
||||
import { DatasourceLayers } from '../../types';
|
||||
import { showingBar } from './metric_visualization';
|
||||
import { DEFAULT_MAX_COLUMNS, getDefaultColor } from './visualization';
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
|
|||
import { euiLightVars, euiThemeVars } from '@kbn/ui-theme';
|
||||
import { IconChartMetric } from '@kbn/chart-icons';
|
||||
import { AccessorConfig } from '@kbn/visualization-ui-components';
|
||||
import { isNumericFieldForDatatable } from '../../../common/expressions/datatable/utils';
|
||||
import { isNumericFieldForDatatable } from '../../../common/expressions/impl/datatable/utils';
|
||||
import { layerTypes } from '../../../common/layer_types';
|
||||
import type { FormBasedPersistedState } from '../../datasources/form_based/types';
|
||||
import { getSuggestions } from './suggestions';
|
||||
|
|
|
|||
|
|
@ -22,10 +22,12 @@ export interface PieVisualizationPluginStartPlugins {
|
|||
export class PieVisualization {
|
||||
setup(core: CoreSetup, { editorFrame, charts }: PieVisualizationPluginSetupPlugins) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getPieVisualization } = await import('../../async_services');
|
||||
const palettes = await charts.palettes.getPalettes();
|
||||
const [{ getPieVisualization }, paletteService] = await Promise.all([
|
||||
import('../../async_services'),
|
||||
charts.palettes.getPalettes(),
|
||||
]);
|
||||
|
||||
return getPieVisualization({ paletteService: palettes, kibanaTheme: core.theme });
|
||||
return getPieVisualization({ paletteService, kibanaTheme: core.theme });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,11 @@ export interface TagcloudVisualizationPluginSetupPlugins {
|
|||
export class TagcloudVisualization {
|
||||
setup(core: CoreSetup, { editorFrame, charts }: TagcloudVisualizationPluginSetupPlugins) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getTagcloudVisualization } = await import('../../async_services');
|
||||
const palettes = await charts.palettes.getPalettes();
|
||||
return getTagcloudVisualization({ paletteService: palettes, kibanaTheme: core.theme });
|
||||
const [{ getTagcloudVisualization }, paletteService] = await Promise.all([
|
||||
import('../../async_services'),
|
||||
charts.palettes.getPalettes(),
|
||||
]);
|
||||
return getTagcloudVisualization({ paletteService, kibanaTheme: core.theme });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ export class XyVisualization {
|
|||
{ editorFrame }: XyVisualizationPluginSetupPlugins
|
||||
) {
|
||||
editorFrame.registerVisualization(async () => {
|
||||
const { getXyVisualization } = await import('../../async_services');
|
||||
const [
|
||||
coreStart,
|
||||
{
|
||||
|
|
@ -40,7 +39,8 @@ export class XyVisualization {
|
|||
dataViews,
|
||||
},
|
||||
] = await core.getStartServices();
|
||||
const [palettes, eventAnnotationService] = await Promise.all([
|
||||
const [{ getXyVisualization }, paletteService, eventAnnotationService] = await Promise.all([
|
||||
import('../../async_services'),
|
||||
charts.palettes.getPalettes(),
|
||||
eventAnnotation.getService(),
|
||||
]);
|
||||
|
|
@ -49,7 +49,7 @@ export class XyVisualization {
|
|||
core: coreStart,
|
||||
data,
|
||||
storage: new Storage(localStorage),
|
||||
paletteService: palettes,
|
||||
paletteService,
|
||||
eventAnnotationService,
|
||||
fieldFormats,
|
||||
useLegacyTimeAxis,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue