Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Exploratory View] Page load distribution percentile reference lines #115050

Merged
merged 9 commits into from
May 31, 2022
Merged

[Exploratory View] Page load distribution percentile reference lines #115050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6f48dbe
Added percentile refernce lines
shahzad31 Oct 19, 2021
5fa1609
Merge branch 'master' into exp-annotations
kibanamachine Oct 19, 2021
e1be938
Merge branch 'main' of github.com:elastic/kibana into exp-annotations
shahzad31 May 28, 2022
f64a417
wip
shahzad31 May 28, 2022
3db5890
Merge branch 'main' of github.com:elastic/kibana into exp-annotations
shahzad31 May 30, 2022
b35ae1b
hide annotations from observability overview
shahzad31 May 31, 2022
b157ed2
fix test
shahzad31 May 31, 2022
729f0b3
Merge branch 'main' of github.com:elastic/kibana into exp-annotations
shahzad31 May 31, 2022
e1dd1ae
fix test
shahzad31 May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions x-pack/plugins/observability/public/components/app/section/ux/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export function UXSection({ bucketSize }: Props) {
breakdown: SERVICE_NAME,
dataType: 'ux' as AppDataType,
selectedMetricField: TRANSACTION_DURATION,
showPercentileAnnotations: false,
},
];

Expand Down
1 change: 1 addition & 0 deletions ...ility/public/components/shared/exploratory_view/configurations/constants/url_constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export enum URL_KEYS {
HIDDEN = 'h',
NAME = 'n',
COLOR = 'c',
SHOW_PERCENTILE_ANNOTATIONS = 'spa',
}

export const ALL_VALUES_SELECTED = 'ALL_VALUES';
239 changes: 89 additions & 150 deletions ...vability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { buildExistsFilter, buildPhrasesFilter } from './utils';
import { sampleAttributeKpi } from './test_data/sample_attribute_kpi';
import { RECORDS_FIELD, REPORT_METRIC_FIELD, PERCENTILE_RANKS, ReportTypes } from './constants';
import { obsvReportConfigMap } from '../obsv_exploratory_view';
import { sampleAttributeWithReferenceLines } from './test_data/sample_attribute_with_reference_lines';

describe('Lens Attribute', () => {
mockAppDataView();
Expand Down Expand Up @@ -124,6 +125,7 @@ describe('Lens Attribute', () => {
},
...PERCENTILE_RANKS.reduce((acc: Record<string, any>, rank, index) => {
acc[`y-axis-column-${index === 0 ? 'layer' + index : index}`] = {
customLabel: true,
dataType: 'number',
filter: {
language: 'kuery',
Expand All @@ -145,6 +147,7 @@ describe('Lens Attribute', () => {

it('should return main y axis', function () {
expect(lnsAttr.getMainYAxis(layerConfig, 'layer0', '')).toEqual({
customLabel: true,
dataType: 'number',
isBucketed: false,
label: 'Pages loaded',
Expand All @@ -159,7 +162,7 @@ describe('Lens Attribute', () => {
formula: 'count() / overall_sum(count())',
isFormulaBroken: false,
},
references: ['y-axis-column-layer0X4'],
references: ['y-axis-column-layer0X3'],
scale: 'ratio',
});
});
Expand Down Expand Up @@ -197,6 +200,7 @@ describe('Lens Attribute', () => {
},
fieldName: 'transaction.duration.us',
columnLabel: 'Page load time',
showPercentileAnnotations: true,
})
);
});
Expand Down Expand Up @@ -230,6 +234,7 @@ describe('Lens Attribute', () => {
},
fieldName: TRANSACTION_DURATION,
columnLabel: 'Page load time',
showPercentileAnnotations: true,
})
);
});
Expand Down Expand Up @@ -339,135 +344,7 @@ describe('Lens Attribute', () => {
});

it('should return first layer', function () {
expect(lnsAttr.getLayers()).toEqual({
layer0: {
columnOrder: [
'x-axis-column-layer0',
'y-axis-column-layer0',
'y-axis-column-layer0X0',
'y-axis-column-layer0X1',
'y-axis-column-layer0X2',
'y-axis-column-layer0X3',
'y-axis-column-layer0X4',
],
columns: {
'x-axis-column-layer0': {
dataType: 'number',
isBucketed: true,
label: 'Page load time',
operationType: 'range',
params: {
maxBars: 'auto',
ranges: [
{
from: 0,
label: '',
to: 1000,
},
],
type: 'histogram',
},
scale: 'interval',
sourceField: 'transaction.duration.us',
},
'y-axis-column-layer0': {
dataType: 'number',
filter: {
language: 'kuery',
query:
'transaction.type: page-load and processor.event: transaction and transaction.type : *',
},
isBucketed: false,
label: 'Pages loaded',
operationType: 'formula',
params: {
format: {
id: 'percent',
params: {
decimals: 0,
},
},
formula:
"count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))",
isFormulaBroken: false,
},
references: ['y-axis-column-layer0X4'],
scale: 'ratio',
},
'y-axis-column-layer0X0': {
customLabel: true,
dataType: 'number',
filter: {
language: 'kuery',
query:
'transaction.type: page-load and processor.event: transaction and transaction.type : *',
},
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'count',
scale: 'ratio',
sourceField: RECORDS_FIELD,
},
'y-axis-column-layer0X1': {
customLabel: true,
dataType: 'number',
filter: {
language: 'kuery',
query:
'transaction.type: page-load and processor.event: transaction and transaction.type : *',
},
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'count',
scale: 'ratio',
sourceField: RECORDS_FIELD,
},
'y-axis-column-layer0X2': {
customLabel: true,
dataType: 'number',
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'math',
params: {
tinymathAst: 'y-axis-column-layer0X1',
},
references: ['y-axis-column-layer0X1'],
scale: 'ratio',
},
'y-axis-column-layer0X3': {
customLabel: true,
dataType: 'number',
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'overall_sum',
references: ['y-axis-column-layer0X2'],
scale: 'ratio',
},
'y-axis-column-layer0X4': {
customLabel: true,
dataType: 'number',
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'math',
params: {
tinymathAst: {
args: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'],
location: {
max: 30,
min: 0,
},
name: 'divide',
text: "count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))",
type: 'function',
},
},
references: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'],
scale: 'ratio',
},
},
incompleteColumns: {},
},
});
expect(lnsAttr.getLayers()).toEqual(sampleAttribute.state.datasourceStates.indexpattern.layers);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like to use toMatchSnapshot to compare huge objects like this one. I find it much easier to manage and maintain.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

snapshot are useful, but makes it hard to enforce, for this purpose i think json make sense, since it enforces you to review every single change.

});

it('should return expected XYState', function () {
Expand All @@ -486,6 +363,59 @@ describe('Lens Attribute', () => {
xAccessor: 'x-axis-column-layer0',
yConfig: [{ color: 'green', forAccessor: 'y-axis-column-layer0', axisMode: 'left' }],
},
{
accessors: [
'50th-percentile-reference-line-layer0-reference-lines',
'75th-percentile-reference-line-layer0-reference-lines',
'90th-percentile-reference-line-layer0-reference-lines',
'95th-percentile-reference-line-layer0-reference-lines',
'99th-percentile-reference-line-layer0-reference-lines',
],
layerId: 'layer0-reference-lines',
layerType: 'referenceLine',
yConfig: [
{
axisMode: 'bottom',
color: '#6092C0',
forAccessor: '50th-percentile-reference-line-layer0-reference-lines',
lineStyle: 'solid',
lineWidth: 2,
textVisibility: true,
},
{
axisMode: 'bottom',
color: '#6092C0',
forAccessor: '75th-percentile-reference-line-layer0-reference-lines',
lineStyle: 'solid',
lineWidth: 2,
textVisibility: true,
},
{
axisMode: 'bottom',
color: '#6092C0',
forAccessor: '90th-percentile-reference-line-layer0-reference-lines',
lineStyle: 'solid',
lineWidth: 2,
textVisibility: true,
},
{
axisMode: 'bottom',
color: '#6092C0',
forAccessor: '95th-percentile-reference-line-layer0-reference-lines',
lineStyle: 'solid',
lineWidth: 2,
textVisibility: true,
},
{
axisMode: 'bottom',
color: '#6092C0',
forAccessor: '99th-percentile-reference-line-layer0-reference-lines',
lineStyle: 'solid',
lineWidth: 2,
textVisibility: true,
},
],
},
],
legend: { isVisible: true, showSingleSeries: true, position: 'right' },
preferredSeriesType: 'line',
Expand Down Expand Up @@ -514,7 +444,7 @@ describe('Lens Attribute', () => {
time: { from: 'now-15m', to: 'now' },
color: 'green',
name: 'test-series',
selectedMetricField: TRANSACTION_DURATION,
selectedMetricField: LCP_FIELD,
};

lnsAttr = new LensAttributes([layerConfig1], reportViewConfig.reportType);
Expand Down Expand Up @@ -549,7 +479,6 @@ describe('Lens Attribute', () => {
'y-axis-column-layer0X1',
'y-axis-column-layer0X2',
'y-axis-column-layer0X3',
'y-axis-column-layer0X4',
],
columns: {
'breakdown-column-layer0': {
Expand All @@ -572,7 +501,7 @@ describe('Lens Attribute', () => {
'x-axis-column-layer0': {
dataType: 'number',
isBucketed: true,
label: 'Page load time',
label: 'Largest contentful paint',
operationType: 'range',
params: {
maxBars: 'auto',
Expand All @@ -586,9 +515,10 @@ describe('Lens Attribute', () => {
type: 'histogram',
},
scale: 'interval',
sourceField: 'transaction.duration.us',
sourceField: LCP_FIELD,
},
'y-axis-column-layer0': {
customLabel: true,
dataType: 'number',
filter: {
language: 'kuery',
Expand All @@ -609,7 +539,7 @@ describe('Lens Attribute', () => {
"count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))",
isFormulaBroken: false,
},
references: ['y-axis-column-layer0X4'],
references: ['y-axis-column-layer0X3'],
scale: 'ratio',
},
'y-axis-column-layer0X0': {
Expand Down Expand Up @@ -645,31 +575,19 @@ describe('Lens Attribute', () => {
dataType: 'number',
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'math',
params: {
tinymathAst: 'y-axis-column-layer0X1',
},
operationType: 'overall_sum',
references: ['y-axis-column-layer0X1'],
scale: 'ratio',
},
'y-axis-column-layer0X3': {
customLabel: true,
dataType: 'number',
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'overall_sum',
references: ['y-axis-column-layer0X2'],
scale: 'ratio',
},
'y-axis-column-layer0X4': {
customLabel: true,
dataType: 'number',
isBucketed: false,
label: 'Part of count() / overall_sum(count())',
operationType: 'math',
params: {
tinymathAst: {
args: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'],
args: ['y-axis-column-layer0X0', 'y-axis-column-layer0X2'],
location: {
max: 30,
min: 0,
Expand All @@ -679,7 +597,7 @@ describe('Lens Attribute', () => {
type: 'function',
},
},
references: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'],
references: ['y-axis-column-layer0X0', 'y-axis-column-layer0X2'],
scale: 'ratio',
},
},
Expand Down Expand Up @@ -713,4 +631,25 @@ describe('Lens Attribute', () => {
);
});
});

describe('Reference line layers', function () {
it('should return expected reference lines', function () {
const layerConfig1: LayerConfig = {
seriesConfig: reportViewConfig,
seriesType: 'line',
indexPattern: mockDataView,
reportDefinitions: {},
time: { from: 'now-15m', to: 'now' },
color: 'green',
name: 'test-series',
selectedMetricField: TRANSACTION_DURATION,
};

lnsAttr = new LensAttributes([layerConfig1], reportViewConfig.reportType);

const attributes = lnsAttr.getJSON();

expect(attributes).toEqual(sampleAttributeWithReferenceLines);
});
});
});
Loading