Skip to content

Commit

Permalink
[Exploratory view] Fix core web vital breakdown (#104630)
Browse files Browse the repository at this point in the history
Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
shahzad31 and kibanamachine authored Jul 8, 2021
1 parent bde7455 commit 04c05f8
Show file tree
Hide file tree
Showing 7 changed files with 216 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ export class LensAttributes {

if (fieldName === RECORDS_FIELD || columnType === FILTER_RECORDS) {
return this.getRecordsColumn(
columnLabel || label,
label || columnLabel,
colIndex !== undefined ? columnFilters?.[colIndex] : undefined,
timeScale
);
Expand Down Expand Up @@ -435,6 +435,8 @@ export class LensAttributes {
if (yAxisColumns.length === 1) {
return lensColumns;
}

// starting from 1 index since 0 column is used as main column
for (let i = 1; i < yAxisColumns.length; i++) {
const { sourceField, operationType, label } = yAxisColumns[i];

Expand Down Expand Up @@ -557,16 +559,21 @@ export class LensAttributes {
const layerConfigs = this.layerConfigs;

layerConfigs.forEach((layerConfig, index) => {
const { breakdown } = layerConfig;
const { breakdown, seriesConfig } = layerConfig;

const layerId = `layer${index}`;
const columnFilter = this.getLayerFilters(layerConfig, layerConfigs.length);
const timeShift = this.getTimeShift(this.layerConfigs[0], layerConfig, index);
const mainYAxis = this.getMainYAxis(layerConfig, layerId, columnFilter);

const { sourceField } = seriesConfig.xAxisColumn;

layers[layerId] = {
columnOrder: [
`x-axis-column-${layerId}`,
...(breakdown ? [`breakdown-column-${layerId}`] : []),
...(breakdown && sourceField !== USE_BREAK_DOWN_COLUMN
? [`breakdown-column-${layerId}`]
: []),
`y-axis-column-${layerId}`,
...Object.keys(this.getChildYAxises(layerConfig, layerId, columnFilter)),
],
Expand All @@ -578,7 +585,7 @@ export class LensAttributes {
filter: { query: columnFilter, language: 'kuery' },
...(timeShift ? { timeShift } : {}),
},
...(breakdown && breakdown !== USE_BREAK_DOWN_COLUMN
...(breakdown && sourceField !== USE_BREAK_DOWN_COLUMN
? // do nothing since this will be used a x axis source
{
[`breakdown-column-${layerId}`]: this.getBreakdownColumn({
Expand Down Expand Up @@ -620,7 +627,10 @@ export class LensAttributes {
{ forAccessor: `y-axis-column-layer${index}` },
],
xAccessor: `x-axis-column-layer${index}`,
...(layerConfig.breakdown ? { splitAccessor: `breakdown-column-layer${index}` } : {}),
...(layerConfig.breakdown &&
layerConfig.seriesConfig.xAxisColumn.sourceField !== USE_BREAK_DOWN_COLUMN
? { splitAccessor: `breakdown-column-layer${index}` }
: {}),
})),
...(this.layerConfigs[0].seriesConfig.yTitle
? { yTitle: this.layerConfigs[0].seriesConfig.yTitle }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*
* 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 { mockAppIndexPattern, mockIndexPattern } from '../../rtl_helpers';
import { getDefaultConfigs } from '../default_configs';
import { LayerConfig, LensAttributes } from '../lens_attributes';
import { sampleAttributeCoreWebVital } from '../test_data/sample_attribute_cwv';
import { SERVICE_NAME, USER_AGENT_OS } from '../constants/elasticsearch_fieldnames';

describe('Core web vital config test', function () {
mockAppIndexPattern();

const seriesConfig = getDefaultConfigs({
reportType: 'core-web-vitals',
dataType: 'ux',
indexPattern: mockIndexPattern,
});

let lnsAttr: LensAttributes;

const layerConfig: LayerConfig = {
seriesConfig,
indexPattern: mockIndexPattern,
reportDefinitions: { [SERVICE_NAME]: ['elastic-co'] },
time: { from: 'now-15m', to: 'now' },
breakdown: USER_AGENT_OS,
};

beforeEach(() => {
lnsAttr = new LensAttributes([layerConfig]);
});
it('should return expected json', function () {
expect(lnsAttr.getJSON()).toEqual(sampleAttributeCoreWebVital);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
URL_FULL,
SERVICE_ENVIRONMENT,
} from '../constants/elasticsearch_fieldnames';
import { CLS_LABEL, FID_LABEL, LCP_LABEL } from '../constants/labels';

export function getCoreWebVitalsConfig({ indexPattern }: ConfigProps): SeriesConfig {
const statusPallete = euiPaletteForStatus(3);
Expand Down Expand Up @@ -91,7 +92,7 @@ export function getCoreWebVitalsConfig({ indexPattern }: ConfigProps): SeriesCon
metricOptions: [
{
id: LCP_FIELD,
label: 'Largest contentful paint',
label: LCP_LABEL,
columnType: FILTER_RECORDS,
columnFilters: [
{
Expand All @@ -109,7 +110,7 @@ export function getCoreWebVitalsConfig({ indexPattern }: ConfigProps): SeriesCon
],
},
{
label: 'First input delay',
label: FID_LABEL,
id: FID_FIELD,
columnType: FILTER_RECORDS,
columnFilters: [
Expand All @@ -128,7 +129,7 @@ export function getCoreWebVitalsConfig({ indexPattern }: ConfigProps): SeriesCon
],
},
{
label: 'Cumulative layout shift',
label: CLS_LABEL,
id: CLS_FIELD,
columnType: FILTER_RECORDS,
columnFilters: [
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
/*
* 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.
*/
export const sampleAttributeCoreWebVital = {
description: '',
references: [
{
id: 'apm-*',
name: 'indexpattern-datasource-current-indexpattern',
type: 'index-pattern',
},
{
id: 'apm-*',
name: 'indexpattern-datasource-layer-layer0',
type: 'index-pattern',
},
],
state: {
datasourceStates: {
indexpattern: {
layers: {
layer0: {
columnOrder: [
'x-axis-column-layer0',
'y-axis-column-layer0',
'y-axis-column-1',
'y-axis-column-2',
],
columns: {
'x-axis-column-layer0': {
dataType: 'string',
isBucketed: true,
label: 'Top values of Operating system',
operationType: 'terms',
params: {
missingBucket: false,
orderBy: {
columnId: 'y-axis-column-layer0',
type: 'column',
},
orderDirection: 'desc',
otherBucket: true,
size: 10,
},
scale: 'ordinal',
sourceField: 'user_agent.os.name',
},
'y-axis-column-1': {
dataType: 'number',
filter: {
language: 'kuery',
query:
'transaction.marks.agent.largestContentfulPaint > 2500 and transaction.marks.agent.largestContentfulPaint < 4000',
},
isBucketed: false,
label: 'Average',
operationType: 'count',
scale: 'ratio',
sourceField: 'Records',
},
'y-axis-column-2': {
dataType: 'number',
filter: {
language: 'kuery',
query: 'transaction.marks.agent.largestContentfulPaint > 4000',
},
isBucketed: false,
label: 'Poor',
operationType: 'count',
scale: 'ratio',
sourceField: 'Records',
},
'y-axis-column-layer0': {
dataType: 'number',
filter: {
language: 'kuery',
query: 'transaction.type: page-load and processor.event: transaction',
},
isBucketed: false,
label: 'Good',
operationType: 'count',
scale: 'ratio',
sourceField: 'Records',
},
},
incompleteColumns: {},
},
},
},
},
filters: [],
query: {
language: 'kuery',
query: '',
},
visualization: {
axisTitlesVisibilitySettings: {
x: true,
yLeft: true,
yRight: true,
},
curveType: 'CURVE_MONOTONE_X',
fittingFunction: 'Linear',
gridlinesVisibilitySettings: {
x: true,
yLeft: true,
yRight: true,
},
layers: [
{
accessors: ['y-axis-column-layer0', 'y-axis-column-1', 'y-axis-column-2'],
layerId: 'layer0',
seriesType: 'bar_horizontal_percentage_stacked',
xAccessor: 'x-axis-column-layer0',
yConfig: [
{
color: '#209280',
forAccessor: 'y-axis-column',
},
{
color: '#d6bf57',
forAccessor: 'y-axis-column-1',
},
{
color: '#cc5642',
forAccessor: 'y-axis-column-2',
},
],
},
],
legend: {
isVisible: true,
position: 'right',
},
preferredSeriesType: 'line',
tickLabelsVisibilitySettings: {
x: true,
yLeft: true,
yRight: true,
},
valueLabels: 'hide',
},
},
title: 'Prefilled from exploratory view app',
visualizationType: 'lnsXY',
};
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ describe('ReportTypesCol', function () {
fireEvent.click(screen.getByText(/KPI over time/i));

expect(setSeries).toHaveBeenCalledWith(seriesId, {
breakdown: 'user_agent.name',
dataType: 'ux',
selectedMetricField: undefined,
reportType: 'kpi-over-time',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export function ReportTypesCol({ seriesId, reportTypes }: Props) {
...restSeries,
reportType,
selectedMetricField: undefined,
breakdown: undefined,
time: restSeries?.time ?? DEFAULT_TIME,
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,14 @@ export class ObservabilityIndexPatterns {
if (defaultFieldFormats && defaultFieldFormats.length > 0) {
let isParamsDifferent = false;
defaultFieldFormats.forEach(({ field, format }) => {
const fieldFormat = indexPattern.getFormatterForField(indexPattern.getFieldByName(field)!);
const params = fieldFormat.params();
if (!isParamsSame(params, format.params)) {
indexPattern.setFieldFormat(field, format);
isParamsDifferent = true;
const fieldByName = indexPattern.getFieldByName(field);
if (fieldByName) {
const fieldFormat = indexPattern.getFormatterForField(fieldByName);
const params = fieldFormat.params();
if (!isParamsSame(params, format.params)) {
indexPattern.setFieldFormat(field, format);
isParamsDifferent = true;
}
}
});
if (isParamsDifferent) {
Expand Down

0 comments on commit 04c05f8

Please sign in to comment.