Skip to content

Commit

Permalink
[Exploratory view] Palette at metric config (#135289)
Browse files Browse the repository at this point in the history
  • Loading branch information
shahzad31 authored Jul 7, 2022
1 parent dfee164 commit 7c824a0
Show file tree
Hide file tree
Showing 7 changed files with 153 additions and 39 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ journey('Exploratory view', async ({ page, params }) => {
});

step('renders as expected', async () => {
await page.waitForTimeout(60 * 1000);
await Promise.all([page.waitForNavigation(TIMEOUT_60_SEC), page.click('text=Explore data')]);
await page.click('text=User experience (RUM)');
await page.click('[aria-label="Toggle series information"] >> text=Page views', TIMEOUT_60_SEC);
await page.click('[aria-label="Edit series"]', TIMEOUT_60_SEC);
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/observability/e2e/journeys/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
*/

export * from './exploratory_view';
export * from './step_duration.journey';
91 changes: 91 additions & 0 deletions x-pack/plugins/observability/e2e/journeys/step_duration.journey.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/*
* 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, step, before } from '@elastic/synthetics';
import { createExploratoryViewUrl } from '../../public/components/shared/exploratory_view/configurations/exploratory_view_url';
import { loginToKibana, TIMEOUT_60_SEC, waitForLoadingToFinish } from '../utils';

journey('Exploratory view', async ({ page, params }) => {
before(async () => {
await waitForLoadingToFinish({ page });
});

const expUrl = createExploratoryViewUrl({
reportType: 'kpi-over-time',
allSeries: [
{
dataType: 'synthetics',
time: {
from: 'now-10y',
to: 'now',
},
name: 'synthetics-series-1',
breakdown: 'monitor.type',
selectedMetricField: 'monitor.duration.us',
reportDefinitions: {
'url.full': ['ALL_VALUES'],
},
},
],
});

const baseUrl = `${params.kibanaUrl}${expUrl}`;

step('Go to Exploratory view', async () => {
await page.goto(baseUrl, {
waitUntil: 'networkidle',
});
await loginToKibana({
page,
user: { username: 'elastic', password: 'changeme' },
dismissTour: false,
});
});

step('Open exploratory view with monitor duration', async () => {
await Promise.all([
page.waitForNavigation(TIMEOUT_60_SEC),
page.click('text=Explore data', TIMEOUT_60_SEC),
]);

await waitForLoadingToFinish({ page });
await page.click('text=browser', TIMEOUT_60_SEC);
await page.click('text=http');
await page.click('[aria-label="Remove report metric"]');
await page.click('button:has-text("Select report metric")');
await page.click('button:has-text("Step duration")');
await page.click('text=Select an option: Monitor type, is selectedMonitor type >> button');
await page.click('button[role="option"]:has-text("Step name")');
await page.click('.euiComboBox__inputWrap');
await page.click(
'text=Search Monitor nameCombo box. Selected. Combo box input. Search Monitor name. Ty'
);
await page.click('button[role="option"]:has-text("test-monitor - inline")');
await page.click('button:has-text("Apply changes")');

await waitForLoadingToFinish({ page });

await page.click('[aria-label="series color: #54b399"]');
await page.click('[aria-label="series color: #6092c0"]');
await page.click('[aria-label="series color: #d36086"] path');
await page.click('[aria-label="series color: #9170b8"]');
await page.click('[aria-label="series color: #ca8eae"]');
await page.click('[aria-label="series color: #d6bf57"]');
await page.click('text=load homepage');
await page.click('text=load homepage');
await page.click('text=load github');
await page.click('text=load github');
await page.click('text=load google');
await page.click('text=load google');
await page.click('text=hover over products menu');
await page.click('text=hover over products menu');
await page.click('text=load homepage 1');
await page.click('text=load homepage 1');
await page.click('text=load homepage 2');
await page.click('text=load homepage 2');
});
});
11 changes: 8 additions & 3 deletions x-pack/plugins/observability/e2e/synthetics_run.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,14 @@ async function runE2ETests({ readConfigFile }: FtrConfigProviderContext) {

await syntheticsRunner.setup();

const fixturesDir = path.join(__dirname, '../../ux/e2e/fixtures/');

await syntheticsRunner.loadTestData(fixturesDir, ['rum_8.0.0', 'rum_test_data']);
await syntheticsRunner.loadTestData(path.join(__dirname, '../../ux/e2e/fixtures/'), [
'rum_8.0.0',
'rum_test_data',
]);
await syntheticsRunner.loadTestData(
path.join(__dirname, '../../synthetics/e2e/fixtures/es_archiver/'),
['full_heartbeat', 'browser']
);
await syntheticsRunner.loadTestFiles(async () => {
require('./journeys');
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -584,6 +584,7 @@ export class LensAttributes {
getFieldMeta(sourceField: string, layerConfig: LayerConfig) {
if (sourceField === REPORT_METRIC_FIELD) {
const {
palette,
fieldName,
columnType,
columnLabel,
Expand All @@ -594,6 +595,7 @@ export class LensAttributes {
} = parseCustomFieldName(layerConfig.seriesConfig, layerConfig.selectedMetricField);
const fieldMeta = layerConfig.indexPattern.getFieldByName(fieldName!);
return {
palette,
fieldMeta,
fieldName,
columnType,
Expand Down Expand Up @@ -891,40 +893,53 @@ export class LensAttributes {
}

getDataLayers(): XYState['layers'] {
const dataLayers = this.layerConfigs.map((layerConfig, index) => ({
accessors: [
`y-axis-column-layer${index}`,
...Object.keys(this.getChildYAxises(layerConfig, `layer${index}`, undefined, true)),
],
layerId: `layer${index}`,
layerType: 'data' as any,
seriesType: layerConfig.seriesType || layerConfig.seriesConfig.defaultSeriesType,
palette: layerConfig.seriesConfig.palette,
yConfig: layerConfig.seriesConfig.yConfig || [
{
forAccessor: `y-axis-column-layer${index}`,
color: layerConfig.color,
/* if the fields format matches the field format of the first layer, use the default y axis (right)
* if not, use the secondary y axis (left) */
axisMode:
layerConfig.indexPattern.fieldFormatMap[layerConfig.selectedMetricField]?.id ===
this.layerConfigs[0].indexPattern.fieldFormatMap[
this.layerConfigs[0].selectedMetricField
]?.id
? ('left' as YAxisMode)
: ('right' as YAxisMode),
},
],
xAccessor: `x-axis-column-layer${index}`,
...(layerConfig.breakdown &&
layerConfig.breakdown !== PERCENTILE &&
layerConfig.seriesConfig.xAxisColumn.sourceField !== USE_BREAK_DOWN_COLUMN
? { splitAccessor: `breakdown-column-layer${index}` }
: {}),
...(this.layerConfigs[0].seriesConfig.yTitle
? { yTitle: this.layerConfigs[0].seriesConfig.yTitle }
: {}),
}));
const dataLayers = this.layerConfigs.map((layerConfig, index) => {
const { sourceField } = layerConfig.seriesConfig.yAxisColumns[0];

let palette = layerConfig.seriesConfig.palette;

if (sourceField) {
const fieldMeta = this.getFieldMeta(sourceField, layerConfig);
if (fieldMeta.palette) {
palette = fieldMeta.palette;
}
}

return {
accessors: [
`y-axis-column-layer${index}`,
...Object.keys(this.getChildYAxises(layerConfig, `layer${index}`, undefined, true)),
],
layerId: `layer${index}`,
layerType: 'data' as any,
seriesType: layerConfig.seriesType || layerConfig.seriesConfig.defaultSeriesType,
palette: palette ?? layerConfig.seriesConfig.palette,
yConfig: layerConfig.seriesConfig.yConfig || [
{
forAccessor: `y-axis-column-layer${index}`,
color: layerConfig.color,
/* if the fields format matches the field format of the first layer, use the default y axis (right)
* if not, use the secondary y axis (left) */
axisMode:
layerConfig.indexPattern.fieldFormatMap[layerConfig.selectedMetricField]?.id ===
this.layerConfigs[0].indexPattern.fieldFormatMap[
this.layerConfigs[0].selectedMetricField
]?.id
? ('left' as YAxisMode)
: ('right' as YAxisMode),
},
],
xAccessor: `x-axis-column-layer${index}`,
...(layerConfig.breakdown &&
layerConfig.breakdown !== PERCENTILE &&
layerConfig.seriesConfig.xAxisColumn.sourceField !== USE_BREAK_DOWN_COLUMN
? { splitAccessor: `breakdown-column-layer${index}` }
: {}),
...(this.layerConfigs[0].seriesConfig.yTitle
? { yTitle: this.layerConfigs[0].seriesConfig.yTitle }
: {}),
};
});

const referenceLineLayers: XYState['layers'] = [];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export function getSyntheticsKPIConfig({ dataView }: ConfigProps): SeriesConfig
PERCENTILE,
],
baseFilters: [],
palette: { type: 'palette', name: 'status' },
definitionFields: [
{ field: 'monitor.name', nested: SYNTHETICS_STEP_NAME, singleSelection: true },
{ field: 'url.full', filters: buildExistsFilter('summary.up', dataView) },
Expand All @@ -92,12 +91,14 @@ export function getSyntheticsKPIConfig({ dataView }: ConfigProps): SeriesConfig
id: SUMMARY_UP,
label: UP_LABEL,
columnType: OPERATION_COLUMN,
palette: { type: 'palette', name: 'status' },
},
{
field: SUMMARY_DOWN,
id: SUMMARY_DOWN,
label: DOWN_LABEL,
columnType: OPERATION_COLUMN,
palette: { type: 'palette', name: 'status' },
},
{
label: STEP_DURATION_LABEL,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export interface MetricOption {
showPercentileAnnotations?: boolean;
formula?: string;
metricStateOptions?: Pick<MetricState, 'colorMode' | 'palette'>;
palette?: PaletteOutput;
}

export interface SeriesConfig {
Expand Down

0 comments on commit 7c824a0

Please sign in to comment.