From dba19ee06ed51aed046d00d40ca8f6280e84a483 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 20 Oct 2022 10:37:39 +0200 Subject: [PATCH] [Exploratory view] Use series names as labels (#143458) --- x-pack/plugins/observability/kibana.json | 3 +- .../configurations/lens_attributes.test.ts | 12 +++-- .../configurations/lens_attributes.ts | 46 +++++++++++++------ .../test_data/mobile_test_attribute.ts | 10 +++- .../test_data/sample_attribute.ts | 4 +- .../test_data/sample_attribute_cwv.ts | 2 + .../test_data/sample_attribute_kpi.ts | 4 +- .../sample_attribute_with_reference_lines.ts | 4 +- .../series_editor/columns/series_name.tsx | 2 + .../apps/observability/exploratory_view.ts | 12 ++++- 10 files changed, 73 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/observability/kibana.json b/x-pack/plugins/observability/kibana.json index deb8859002bc7..43e69c1b4d952 100644 --- a/x-pack/plugins/observability/kibana.json +++ b/x-pack/plugins/observability/kibana.json @@ -43,7 +43,8 @@ "kibanaReact", "kibanaUtils", "lens", - "usageCollection" + "usageCollection", + "visualizations" ], "extraPublicDirs": [ "common" diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts index b031bff08b0f8..d1fdd6bc7cf67 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts @@ -158,7 +158,7 @@ describe('Lens Attribute', () => { customLabel: true, dataType: 'number', isBucketed: false, - label: 'Pages loaded', + label: 'test-series', operationType: 'formula', params: { format: { @@ -427,7 +427,13 @@ describe('Lens Attribute', () => { ], }, ], - legend: { isVisible: true, showSingleSeries: true, position: 'right' }, + legend: { + isVisible: true, + showSingleSeries: true, + position: 'right', + legendSize: 'large', + shouldTruncate: false, + }, preferredSeriesType: 'line', tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, valueLabels: 'hide', @@ -545,7 +551,7 @@ describe('Lens Attribute', () => { 'transaction.type: page-load and processor.event: transaction and transaction.type : *', }, isBucketed: false, - label: 'Pages loaded', + label: 'test-series', operationType: 'formula', params: { format: { diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts index 8e39ff3bdd2c6..60f554d5344c4 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts @@ -37,6 +37,7 @@ import { } from '@kbn/lens-plugin/public'; import type { DataView } from '@kbn/data-views-plugin/common'; import { PersistableFilter } from '@kbn/lens-plugin/common'; +import { LegendSize } from '@kbn/visualizations-plugin/common/constants'; import { urlFiltersToKueryString } from '../utils/stringify_kueries'; import { FILTER_RECORDS, @@ -397,15 +398,14 @@ export class LensAttributes { return { ...buildNumberColumn(sourceField), label: - operationType === 'unique_count' || shortLabel - ? label || seriesConfig.labels[sourceField] - : i18n.translate('xpack.observability.expView.columns.operation.label', { - defaultMessage: '{operationType} of {sourceField}', - values: { - sourceField: label || seriesConfig.labels[sourceField], - operationType: capitalize(operationType), - }, - }), + label ?? + i18n.translate('xpack.observability.expView.columns.operation.label', { + defaultMessage: '{operationType} of {sourceField}', + values: { + sourceField: seriesConfig.labels[sourceField], + operationType: capitalize(operationType), + }, + }), filter: columnFilter, operationType, params: @@ -574,7 +574,7 @@ export class LensAttributes { const { type: fieldType } = fieldMeta ?? {}; if (columnType === TERMS_COLUMN) { - return this.getTermsColumn(fieldName, columnLabel || label); + return this.getTermsColumn(fieldName, label || columnLabel); } if (fieldName === RECORDS_FIELD || columnType === FILTER_RECORDS) { @@ -606,7 +606,7 @@ export class LensAttributes { columnType, columnFilter: columnFilters?.[0], operationType, - label: columnLabel || label, + label: label || columnLabel, seriesConfig: layerConfig.seriesConfig, shortLabel, }); @@ -615,7 +615,7 @@ export class LensAttributes { return this.getNumberOperationColumn({ sourceField: fieldName, operationType: 'unique_count', - label: columnLabel || label, + label: label || columnLabel, seriesConfig: layerConfig.seriesConfig, columnFilter: columnFilters?.[0], }); @@ -687,8 +687,18 @@ export class LensAttributes { getMainYAxis(layerConfig: LayerConfig, layerId: string, columnFilter: string) { const { breakdown } = layerConfig; - const { sourceField, operationType, label, timeScale } = - layerConfig.seriesConfig.yAxisColumns[0]; + const { + sourceField, + operationType, + label: colLabel, + timeScale, + } = layerConfig.seriesConfig.yAxisColumns[0]; + + let label = layerConfig.name || colLabel; + + if (layerConfig.seriesConfig.reportType === ReportTypes.CORE_WEB_VITAL) { + label = colLabel; + } if (sourceField === RECORDS_PERCENTAGE_FIELD) { return [ @@ -1028,7 +1038,13 @@ export class LensAttributes { getXyState(): XYState { return { - legend: { isVisible: true, showSingleSeries: true, position: 'right' }, + legend: { + isVisible: true, + showSingleSeries: true, + position: 'right', + legendSize: LegendSize.LARGE, + shouldTruncate: false, + }, valueLabels: 'hide', fittingFunction: 'Linear', curveType: 'CURVE_MONOTONE_X' as XYCurveType, diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/mobile_test_attribute.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/mobile_test_attribute.ts index 85fd0c9f601b8..1af87c385d31e 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/mobile_test_attribute.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/mobile_test_attribute.ts @@ -39,7 +39,7 @@ export const testMobileKPIAttr = { }, 'y-axis-column-layer0-0': { isBucketed: false, - label: 'Median of System memory usage', + label: 'test-series', operationType: 'median', params: {}, scale: 'ratio', @@ -58,7 +58,13 @@ export const testMobileKPIAttr = { }, }, visualization: { - legend: { isVisible: true, showSingleSeries: true, position: 'right' }, + legend: { + isVisible: true, + showSingleSeries: true, + position: 'right', + legendSize: 'large', + shouldTruncate: false, + }, valueLabels: 'hide', fittingFunction: 'Linear', curveType: 'CURVE_MONOTONE_X', diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts index 6c6424a0362d1..4661775b3a83f 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts @@ -67,7 +67,7 @@ export const sampleAttribute = { 'transaction.type: page-load and processor.event: transaction and transaction.type : *', }, isBucketed: false, - label: 'Pages loaded', + label: 'test-series', operationType: 'formula', params: { format: { @@ -322,6 +322,8 @@ export const sampleAttribute = { isVisible: true, position: 'right', showSingleSeries: true, + legendSize: 'large', + shouldTruncate: false, }, preferredSeriesType: 'line', tickLabelsVisibilitySettings: { diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_cwv.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_cwv.ts index 1cf945c4456a5..15e462c10be28 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_cwv.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_cwv.ts @@ -141,6 +141,8 @@ export const sampleAttributeCoreWebVital = { isVisible: true, showSingleSeries: true, position: 'right', + shouldTruncate: false, + legendSize: 'large', }, preferredSeriesType: 'line', tickLabelsVisibilitySettings: { diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_kpi.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_kpi.ts index 280438737b5da..6482795198898 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_kpi.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_kpi.ts @@ -45,7 +45,7 @@ export const sampleAttributeKpi = { query: 'transaction.type: page-load and processor.event: transaction', }, isBucketed: false, - label: 'Page views', + label: 'test-series', operationType: 'count', scale: 'ratio', sourceField: RECORDS_FIELD, @@ -95,6 +95,8 @@ export const sampleAttributeKpi = { isVisible: true, showSingleSeries: true, position: 'right', + legendSize: 'large', + shouldTruncate: false, }, preferredSeriesType: 'line', tickLabelsVisibilitySettings: { diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_with_reference_lines.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_with_reference_lines.ts index 5d51b1c193401..873e4a6269de6 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_with_reference_lines.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute_with_reference_lines.ts @@ -67,7 +67,7 @@ export const sampleAttributeWithReferenceLines = { 'transaction.type: page-load and processor.event: transaction and transaction.type : * and service.name: (elastic or kibana)', }, isBucketed: false, - label: 'Pages loaded', + label: 'test-series', operationType: 'formula', params: { format: { @@ -322,6 +322,8 @@ export const sampleAttributeWithReferenceLines = { isVisible: true, position: 'right', showSingleSeries: true, + legendSize: 'large', + shouldTruncate: false, }, preferredSeriesType: 'line', tickLabelsVisibilitySettings: { diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx index 68a628e23292c..a8d0338e9eb7e 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx @@ -54,12 +54,14 @@ export function SeriesName({ series, seriesId }: Props) { const onOutsideClick = (event: Event) => { if (event.target !== buttonRef.current) { setIsEditingEnabled(false); + onSave(); } }; const onKeyDown: KeyboardEventHandler = (event) => { if (event.key === 'Enter') { setIsEditingEnabled(false); + onSave(); } }; diff --git a/x-pack/test/observability_functional/apps/observability/exploratory_view.ts b/x-pack/test/observability_functional/apps/observability/exploratory_view.ts index b3adaa556dac3..9aa33a8e9f652 100644 --- a/x-pack/test/observability_functional/apps/observability/exploratory_view.ts +++ b/x-pack/test/observability_functional/apps/observability/exploratory_view.ts @@ -85,8 +85,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.header.waitUntilLoadingHasFinished(); - expect(await find.existsByCssSelector('[title="Chrome Mobile iOS"]')).to.eql(true); - expect(await find.existsByCssSelector('[title="Mobile Safari"]')).to.eql(true); + expect( + await find.existsByCssSelector( + '[aria-label="Chrome Mobile iOS; Activate to hide series in graph"]' + ) + ).to.eql(true); + expect( + await find.existsByCssSelector( + '[aria-label="Mobile Safari; Activate to hide series in graph"]' + ) + ).to.eql(true); }); }); }