github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.10] [Lens] add performance journey to track rendering time for XY visualization and suggestions panel (#163412) (#164153)

Browse source 
# Backport

This will backport the following commits from `main` to `8.10`:
- [[Lens] add performance journey to track rendering time for XY
visualization and suggestions panel
(#163412)](https://github.com/elastic/kibana/pull/163412)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dzmitry
Lemechko","email":"dzmitry.lemechko@elastic.co"},"sourceCommit":{"committedDate":"2023-08-17T10:01:03Z","message":"[Lens]
add performance journey to track rendering time for XY visualization and
suggestions panel (#163412)\n\n## Summary\r\n\r\nRelated to
#163089\r\n\r\nAdding the first performance journey for the Lens Editor.
It simulated\r\nloading existing Lens visualisation with data view
having 10k fields.\r\n\r\nWe collect the following metrics:\r\n-
`fetchFieldsExistenceInfo` reports time it takes to fetch fields
in\r\nData Panel\r\n- `lensVisualizationRenderTime` reports both time it
takes to fetch the\r\ndata (`time_to_data`) and render the main
visualization\r\n(`time_to_render`)\r\n- `lensSuggestionsRenderTime`
reports time it takes to render\r\nsuggestions panel\r\n\r\nMetrics
consistency\r\n\r\n<img width=\"568\"
alt=\"image\"\r\nsrc=\"3384bb8e-6152-4bae-93dc-4f7f4167ed07\">\r\n\r\nRun
locally with \r\n```\r\nnode scripts/functional_tests --config
x-pack/performance/journeys/many_fields_lens_editor.ts\r\n```\r\n\r\nMetrics
will be available here
\r\n\r\ndd0473ac-826f-5621-9a10-25319700326e?_g=h@61c5ac8\r\n\r\n---------\r\n\r\nCo-authored-by:
Drew Tate
<drewctate@gmail.com>","sha":"15b118c724d174d1482ae9a31f9e87dccfe2a66c","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["performance","release_note:skip","v8.10.0","v8.11.0"],"number":163412,"url":"https://github.com/elastic/kibana/pull/163412","mergeCommit":{"message":"[Lens]
add performance journey to track rendering time for XY visualization and
suggestions panel (#163412)\n\n## Summary\r\n\r\nRelated to
#163089\r\n\r\nAdding the first performance journey for the Lens Editor.
It simulated\r\nloading existing Lens visualisation with data view
having 10k fields.\r\n\r\nWe collect the following metrics:\r\n-
`fetchFieldsExistenceInfo` reports time it takes to fetch fields
in\r\nData Panel\r\n- `lensVisualizationRenderTime` reports both time it
takes to fetch the\r\ndata (`time_to_data`) and render the main
visualization\r\n(`time_to_render`)\r\n- `lensSuggestionsRenderTime`
reports time it takes to render\r\nsuggestions panel\r\n\r\nMetrics
consistency\r\n\r\n<img width=\"568\"
alt=\"image\"\r\nsrc=\"3384bb8e-6152-4bae-93dc-4f7f4167ed07\">\r\n\r\nRun
locally with \r\n```\r\nnode scripts/functional_tests --config
x-pack/performance/journeys/many_fields_lens_editor.ts\r\n```\r\n\r\nMetrics
will be available here
\r\n\r\ndd0473ac-826f-5621-9a10-25319700326e?_g=h@61c5ac8\r\n\r\n---------\r\n\r\nCo-authored-by:
Drew Tate
<drewctate@gmail.com>","sha":"15b118c724d174d1482ae9a31f9e87dccfe2a66c"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/163412","number":163412,"mergeCommit":{"message":"[Lens]
add performance journey to track rendering time for XY visualization and
suggestions panel (#163412)\n\n## Summary\r\n\r\nRelated to
#163089\r\n\r\nAdding the first performance journey for the Lens Editor.
It simulated\r\nloading existing Lens visualisation with data view
having 10k fields.\r\n\r\nWe collect the following metrics:\r\n-
`fetchFieldsExistenceInfo` reports time it takes to fetch fields
in\r\nData Panel\r\n- `lensVisualizationRenderTime` reports both time it
takes to fetch the\r\ndata (`time_to_data`) and render the main
visualization\r\n(`time_to_render`)\r\n- `lensSuggestionsRenderTime`
reports time it takes to render\r\nsuggestions panel\r\n\r\nMetrics
consistency\r\n\r\n<img width=\"568\"
alt=\"image\"\r\nsrc=\"3384bb8e-6152-4bae-93dc-4f7f4167ed07\">\r\n\r\nRun
locally with \r\n```\r\nnode scripts/functional_tests --config
x-pack/performance/journeys/many_fields_lens_editor.ts\r\n```\r\n\r\nMetrics
will be available here
\r\n\r\ndd0473ac-826f-5621-9a10-25319700326e?_g=h@61c5ac8\r\n\r\n---------\r\n\r\nCo-authored-by:
Drew Tate
<drewctate@gmail.com>","sha":"15b118c724d174d1482ae9a31f9e87dccfe2a66c"}},{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Dzmitry Lemechko <dzmitry.lemechko@elastic.co>
This commit is contained in:
Kibana Machine 2023-08-17 06:08:08 -04:00 • committed by GitHub
parent 69667f31d9
commit 4c0c007fc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 287 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.buildkite/ftr_configs.yml
View file

@ -405,6 +405,7 @@ enabled:
- x-pack/performance/journeys/flight_dashboard.ts
- x-pack/performance/journeys/login.ts
- x-pack/performance/journeys/many_fields_discover.ts
- x-pack/performance/journeys/many_fields_lens_editor.ts
- x-pack/performance/journeys/many_fields_transform.ts
- x-pack/performance/journeys/promotion_tracking_dashboard.ts
- x-pack/performance/journeys/web_logs_dashboard.ts

16
packages/kbn-unified-field-list/src/hooks/use_existing_fields.ts
View file

@ -14,6 +14,7 @@ import type { AggregateQuery, EsQueryConfig, Filter, Query } from '@kbn/es-query
import { type DataPublicPluginStart } from '@kbn/data-plugin/public';
import type { DataView, DataViewsContract } from '@kbn/data-views-plugin/common';
import { getEsQueryConfig } from '@kbn/data-service/src/es_query';
import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
import { loadFieldExisting } from '../services/field_existing';
import { ExistenceFetchStatus } from '../types';
@ -35,7 +36,7 @@ export interface ExistingFieldsFetcherParams {
query: Query | AggregateQuery | undefined;
filters: Filter[] | undefined;
services: {
core: Pick<CoreStart, 'uiSettings'>;
core: Pick<CoreStart, 'uiSettings' | 'analytics'>;
data: DataPublicPluginStart;
dataViews: DataViewsContract;
};
@ -178,6 +179,8 @@ export const useExistingFieldsFetcher = (
const dataViewsHash = getDataViewsHash(params.dataViews);
const refetchFieldsExistenceInfo = useCallback(
async (dataViewId?: string) => {
const startTime = window.performance.now();
const metricEventName = 'fetchFieldsExistenceInfo';
const fetchId = generateId();
lastFetchId = fetchId;
@ -192,6 +195,11 @@ export const useExistingFieldsFetcher = (
...options,
dataViewId,
});
reportPerformanceMetricEvent(params.services.core.analytics, {
eventName: metricEventName,
duration: window.performance.now() - startTime,
meta: { dataViewsCount: 1 },
});
return;
}
// refetch for all mentioned data views
@ -203,6 +211,11 @@ export const useExistingFieldsFetcher = (
})
)
);
reportPerformanceMetricEvent(params.services.core.analytics, {
eventName: metricEventName,
duration: window.performance.now() - startTime,
meta: { dataViewsCount: params.dataViews.length },
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[
@ -212,6 +225,7 @@ export const useExistingFieldsFetcher = (
params.filters,
params.fromDate,
params.toDate,
params.services.core,
]
);

1
packages/kbn-unified-field-list/tsconfig.json
View file

@ -28,6 +28,7 @@
"@kbn/dom-drag-drop",
"@kbn/shared-ux-utility",
"@kbn/discover-utils",
"@kbn/ebt-tools",
],
"exclude": ["target/**/*"]
}

28
x-pack/performance/journeys/many_fields_lens_editor.ts Normal file
View file

@ -0,0 +1,28 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { Journey } from '@kbn/journeys';
import { subj } from '@kbn/test-subj-selector';
export const journey = new Journey({
kbnArchives: ['x-pack/performance/kbn_archives/lens_many_fields'],
esArchives: ['test/functional/fixtures/es_archiver/stress_test'],
})
.step('Go to Visualize Library landing page', async ({ page, kbnUrl }) => {
await page.goto(
kbnUrl.get(
`/app/visualize#/?_g=(filters:!(),time:(from:'2022-09-07T10:53:30.262Z',to:'2022-09-07T10:55:09.280Z'))`
)
);
await page.waitForSelector(subj('table-is-ready'));
// wait extra 5 seconds: we're not sure why, but the extra sleep before loading the editor makes the metrics more consistent
await page.waitForTimeout(5000);
})
.step('Open existing Lens visualization', async ({ page, kibanaPage }) => {
await page.click(subj('visListingTitleLink-Lens-Stress-Test'));
await kibanaPage.waitForCharts(6);
});

209
x-pack/performance/kbn_archives/lens_many_fields.json Normal file
View file

@ -0,0 +1,209 @@
{
"attributes":{
"fieldAttrs":"{}",
"fields":"[]",
"runtimeFieldMap":"{}",
"title":"stresstest",
"typeMeta":"{}"
},
"coreMigrationVersion":"8.8.0",
"created_at":"2023-07-27T16:21:31.312Z",
"id":"6244bd06-f711-44db-b756-bc25e4a32a60",
"managed":false,
"references":[],
"type":"index-pattern",
"typeMigrationVersion":"8.0.0",
"updated_at":"2023-07-27T16:21:31.312Z",
"version":"WzIxLDFd"
}
{
"attributes":{
"description":"",
"state":{
"adHocDataViews":{},
"datasourceStates":{
"formBased":{
"layers":{
"591b8a11-31f9-41e5-87ba-f0b6f5face08":{
"columnOrder":[
"fed7a521-30ac-4696-bf2d-85a26ba6db58",
"5bcdbfd2-c4c0-4b27-891e-d848ea468cbe",
"532742da-8bea-4357-a5e1-9319111a61e7",
"4707670e-1c99-4e86-a09c-7801490131a1",
"e822b0fa-1c95-44fa-8a5a-06c339f841ca",
"881198db-8a3d-497b-b662-d7f5835775af",
"fc484025-c6c3-47e5-8a2d-428d6d6e3dbb"
],
"columns":{
"4707670e-1c99-4e86-a09c-7801490131a1":{
"dataType":"number",
"isBucketed":false,
"label":"Moving average of Unique count of field1",
"operationType":"moving_average",
"params":{
"window":5
},
"references":[
"e822b0fa-1c95-44fa-8a5a-06c339f841ca"
],
"scale":"ratio"
},
"532742da-8bea-4357-a5e1-9319111a61e7":{
"dataType":"number",
"isBucketed":false,
"label":"Count of records",
"operationType":"count",
"params":{
"emptyAsNull":true
},
"scale":"ratio",
"sourceField":"___records___"
},
"5bcdbfd2-c4c0-4b27-891e-d848ea468cbe":{
"dataType":"date",
"isBucketed":true,
"label":"@timestamp",
"operationType":"date_histogram",
"params":{
"dropPartials":false,
"includeEmptyRows":true,
"interval":"ms"
},
"scale":"interval",
"sourceField":"@timestamp"
},
"881198db-8a3d-497b-b662-d7f5835775af":{
"dataType":"number",
"isBucketed":false,
"label":"Cumulative sum of Records",
"operationType":"cumulative_sum",
"references":[
"fc484025-c6c3-47e5-8a2d-428d6d6e3dbb"
],
"scale":"ratio"
},
"e822b0fa-1c95-44fa-8a5a-06c339f841ca":{
"dataType":"number",
"isBucketed":false,
"label":"Unique count of field1",
"operationType":"unique_count",
"params":{
"emptyAsNull":true
},
"scale":"ratio",
"sourceField":"field1"
},
"fc484025-c6c3-47e5-8a2d-428d6d6e3dbb":{
"dataType":"number",
"isBucketed":false,
"label":"Count of records",
"operationType":"count",
"params":{
"emptyAsNull":true
},
"scale":"ratio",
"sourceField":"___records___"
},
"fed7a521-30ac-4696-bf2d-85a26ba6db58":{
"dataType":"string",
"isBucketed":true,
"label":"Top 1000 values of field0",
"operationType":"terms",
"params":{
"missingBucket":false,
"orderBy":{
"columnId":"532742da-8bea-4357-a5e1-9319111a61e7",
"type":"column"
},
"orderDirection":"desc",
"otherBucket":false,
"parentFormat":{
"id":"terms"
},
"size":1000
},
"scale":"ordinal",
"sourceField":"field0"
}
},
"incompleteColumns":{}
}
}
}
},
"filters":[],
"internalReferences":[],
"query":{
"language":"kuery",
"query":""
},
"visualization":{
"axisTitlesVisibilitySettings":{
"x":true,
"yLeft":true,
"yRight":true
},
"fittingFunction":"None",
"gridlinesVisibilitySettings":{
"x":true,
"yLeft":true,
"yRight":true
},
"labelsOrientation":{
"x":0,
"yLeft":0,
"yRight":0
},
"layers":[
{
"accessors":[
"532742da-8bea-4357-a5e1-9319111a61e7",
"4707670e-1c99-4e86-a09c-7801490131a1",
"881198db-8a3d-497b-b662-d7f5835775af"
],
"layerId":"591b8a11-31f9-41e5-87ba-f0b6f5face08",
"layerType":"data",
"position":"top",
"seriesType":"bar_stacked",
"showGridlines":false,
"splitAccessor":"fed7a521-30ac-4696-bf2d-85a26ba6db58",
"xAccessor":"5bcdbfd2-c4c0-4b27-891e-d848ea468cbe"
}
],
"legend":{
"isVisible":true,
"legendSize":"auto",
"position":"right"
},
"preferredSeriesType":"bar_stacked",
"tickLabelsVisibilitySettings":{
"x":true,
"yLeft":true,
"yRight":true
},
"valueLabels":"hide"
}
},
"title":"Lens Stress Test",
"visualizationType":"lnsXY"
},
"coreMigrationVersion":"8.8.0",
"created_at":"2023-07-27T16:58:15.808Z",
"id":"c7787800-2c9e-11ee-b1db-6df582ca24e0",
"managed":false,
"references":[
{
"id":"6244bd06-f711-44db-b756-bc25e4a32a60",
"name":"indexpattern-datasource-layer-591b8a11-31f9-41e5-87ba-f0b6f5face08",
"type":"index-pattern"
}
],
"timeFrom": "2022-09-07T12:53:30.262Z",
"timeTo": "2022-09-07T12:55:09.280Z",
"timeRestore": true,
"type":"lens",
"typeMigrationVersion":"8.9.0",
"updated_at":"2023-07-27T16:58:15.808Z",
"version":"WzYyLDFd"
}

1
x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
View file

@ -185,6 +185,7 @@ export function EditorFrame(props: EditorFrameProps) {
frame={framePublicAPI}
getUserMessages={props.getUserMessages}
nowProvider={props.plugins.data.nowProvider}
core={props.core}
/>
</ErrorBoundary>
)

3
x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
View file

@ -21,6 +21,8 @@ import { getSuggestions } from './suggestion_helpers';
import { EuiIcon, EuiPanel, EuiToolTip, EuiAccordion } from '@elastic/eui';
import { IconChartDatatable } from '@kbn/chart-icons';
import { mountWithProvider } from '../../mocks';
import { coreMock } from '@kbn/core/public/mocks';
import {
applyChanges,
LensAppState,
@ -106,6 +108,7 @@ describe('suggestion_panel', () => {
frame: createMockFramePublicAPI(),
getUserMessages: () => [],
nowProvider: { get: jest.fn(() => new Date()) },
core: coreMock.createStart(),
};
});

27
x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
View file

@ -30,6 +30,8 @@ import {
ReactExpressionRendererProps,
ReactExpressionRendererType,
} from '@kbn/expressions-plugin/public';
import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
import { CoreStart } from '@kbn/core/public';
import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../utils';
import {
Datasource,
@ -100,6 +102,7 @@ export interface SuggestionPanelProps {
frame: FramePublicAPI;
getUserMessages: UserMessagesGetter;
nowProvider: DataPublicPluginStart['nowProvider'];
core: CoreStart;
}
const PreviewRenderer = ({
@ -226,6 +229,7 @@ export function SuggestionPanel({
ExpressionRenderer: ExpressionRendererComponent,
getUserMessages,
nowProvider,
core,
}: SuggestionPanelProps) {
const dispatchLens = useLensDispatch();
const activeDatasourceId = useLensSelector(selectActiveDatasourceId);
@ -368,16 +372,19 @@ export function SuggestionPanel({
const suggestionsRendered = useRef<boolean[]>([]);
const totalSuggestions = suggestions.length + 1;
const onSuggestionRender = useCallback((suggestionIndex: number) => {
suggestionsRendered.current[suggestionIndex] = true;
if (initialRenderComplete.current === false && suggestionsRendered.current.every(Boolean)) {
initialRenderComplete.current = true;
// console.log(
// 'time to fetch data and perform initial render for all suggestions',
// performance.now() - startTime.current
// );
}
}, []);
const onSuggestionRender = useCallback(
(suggestionIndex: number) => {
suggestionsRendered.current[suggestionIndex] = true;
if (initialRenderComplete.current === false && suggestionsRendered.current.every(Boolean)) {
initialRenderComplete.current = true;
reportPerformanceMetricEvent(core.analytics, {
eventName: 'lensSuggestionsRenderTime',
duration: performance.now() - startTime.current,
});
}
},
[core.analytics]
);
const rollbackToCurrentVisualization = useCallback(() => {
if (lastSelectedSuggestion !== -1) {

27
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
View file

@ -35,6 +35,7 @@ import type { DefaultInspectorAdapters } from '@kbn/expressions-plugin/common';
import type { Datatable } from '@kbn/expressions-plugin/public';
import { DropIllustration } from '@kbn/chart-icons';
import { DragDrop, useDragDropContext, DragDropIdentifier } from '@kbn/dom-drag-drop';
import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
import { trackUiCounterEvents } from '../../../lens_ui_telemetry';
import { getSearchWarningMessages } from '../../../utils';
import {
@ -138,10 +139,6 @@ export const WorkspacePanel = React.memo(function WorkspacePanel(props: Workspac
);
});
const log = (...messages: Array<string | number>) => {
// console.log(...messages);
};
// Exported for testing purposes only.
export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
framePublicAPI,
@ -208,10 +205,15 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
if (!initialVisualizationRenderComplete.current) {
initialVisualizationRenderComplete.current = true;
// NOTE: this metric is only reported for an initial editor load of a pre-existing visualization
log(
'initial visualization took to render after data received',
performance.now() - dataReceivedTime.current
);
const currentTime = performance.now();
reportPerformanceMetricEvent(core.analytics, {
eventName: 'lensVisualizationRenderTime',
duration: currentTime - visualizationRenderStartTime.current,
key1: 'time_to_data',
value1: dataReceivedTime.current - visualizationRenderStartTime.current,
key2: 'time_to_render',
value2: currentTime - dataReceivedTime.current,
});
}
const datasourceEvents = Object.values(renderDeps.current.datasourceMap).reduce<string[]>(
(acc, datasource) => {
@ -243,7 +245,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
trackUiCounterEvents(events);
}
}, []);
}, [core.analytics]);
const removeSearchWarningMessagesRef = useRef<() => void>();
const removeExpressionBuildErrorsRef = useRef<() => void>();
@ -252,13 +254,6 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
(_data: unknown, adapters?: Partial<DefaultInspectorAdapters>) => {
if (renderDeps.current) {
dataReceivedTime.current = performance.now();
if (!initialVisualizationRenderComplete.current) {
// NOTE: this metric is only reported for an initial editor load of a pre-existing visualization
log(
'initial data took to arrive',
dataReceivedTime.current - visualizationRenderStartTime.current
);
}
const [defaultLayerId] = Object.keys(renderDeps.current.datasourceLayers);
const datasource = Object.values(renderDeps.current.datasourceMap)[0];

1
x-pack/plugins/lens/tsconfig.json
View file

@ -85,6 +85,7 @@
"@kbn/event-annotation-components",
"@kbn/content-management-utils",
"@kbn/serverless",
"@kbn/ebt-tools",
],
"exclude": [
"target/**/*",