[Exploratory view] Use series names as labels (#143458)

elastic · Oct 20, 2022 · dba19ee · dba19ee
1 parent 8189348
commit dba19ee
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 26 deletions.
diff --git 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/...vability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts b/...vability/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/...observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts b/...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/...blic/components/shared/exploratory_view/configurations/test_data/mobile_test_attribute.ts b/...blic/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/...ty/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts b/...ty/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/...ublic/components/shared/exploratory_view/configurations/test_data/sample_attribute_cwv.ts b/...ublic/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/...ublic/components/shared/exploratory_view/configurations/test_data/sample_attribute_kpi.ts b/...ublic/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/...shared/exploratory_view/configurations/test_data/sample_attribute_with_reference_lines.ts b/...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/...rvability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx b/...rvability/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<HTMLInputElement> = (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
@@ -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);
     });
   });
 }