[Exploratory view] Refactor code for multi series (#101157)

Co-authored-by: Kibana Machine <[email protected]>
elastic · Jun 23, 2021 · 293dc95 · 293dc95
1 parent 52d5b9d
commit 293dc95
Show file tree

Hide file tree

Showing 59 changed files with 1,556 additions and 770 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
@@ -47,10 +47,11 @@ export function UXActionMenu({
 
   const uxExploratoryViewLink = createExploratoryViewUrl(
     {
-      'ux-series': {
+      'ux-series': ({
         dataType: 'ux',
+        isNew: true,
         time: { from: rangeFrom, to: rangeTo },
-      } as SeriesUrl,
+      } as unknown) as SeriesUrl,
     },
     http?.basePath.get()
   );

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
@@ -89,7 +89,7 @@ export function PageLoadDistribution() {
     {
       [`${serviceName}-page-views`]: {
         dataType: 'ux',
-        reportType: 'dist',
+        reportType: 'data-distribution',
         time: { from: rangeFrom!, to: rangeTo! },
         reportDefinitions: {
           'service.name': serviceName as string[],

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -64,7 +64,7 @@ export function PageViewsTrend() {
     {
       [`${serviceName}-page-views`]: {
         dataType: 'ux',
-        reportType: 'kpi',
+        reportType: 'kpi-over-time',
         time: { from: rangeFrom!, to: rangeTo! },
         reportDefinitions: {
           'service.name': serviceName as string[],

diff --git a/...plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx b/...plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx
@@ -38,6 +38,12 @@ export function EmptyView({
     emptyMessage = SELECTED_DATA_TYPE_FOR_REPORT;
   }
 
+  if (!series) {
+    emptyMessage = i18n.translate('xpack.observability.expView.seriesEditor.notFound', {
+      defaultMessage: 'No series found. Please add a series.',
+    });
+  }
+
   return (
     <Wrapper height={height}>
       {loading && (
@@ -77,7 +83,7 @@ export const EMPTY_LABEL = i18n.translate('xpack.observability.expView.seriesBui
 export const CHOOSE_REPORT_DEFINITION = i18n.translate(
   'xpack.observability.expView.seriesBuilder.emptyReportDefinition',
   {
-    defaultMessage: 'Select a report type to create a visualization.',
+    defaultMessage: 'Select a report definition to create a visualization.',
   }
 );
 

diff --git a/.../observability/public/components/shared/exploratory_view/components/filter_label.test.tsx b/.../observability/public/components/shared/exploratory_view/components/filter_label.test.tsx
@@ -29,6 +29,7 @@ describe('FilterLabel', function () {
         negate={false}
         seriesId={'kpi-over-time'}
         removeFilter={jest.fn()}
+        indexPattern={mockIndexPattern}
       />
     );
 
@@ -52,6 +53,7 @@ describe('FilterLabel', function () {
         negate={false}
         seriesId={'kpi-over-time'}
         removeFilter={removeFilter}
+        indexPattern={mockIndexPattern}
       />
     );
 
@@ -74,6 +76,7 @@ describe('FilterLabel', function () {
         negate={false}
         seriesId={'kpi-over-time'}
         removeFilter={removeFilter}
+        indexPattern={mockIndexPattern}
       />
     );
 
@@ -99,6 +102,7 @@ describe('FilterLabel', function () {
         negate={true}
         seriesId={'kpi-over-time'}
         removeFilter={jest.fn()}
+        indexPattern={mockIndexPattern}
       />
     );
 

diff --git a/...ugins/observability/public/components/shared/exploratory_view/components/filter_label.tsx b/...ugins/observability/public/components/shared/exploratory_view/components/filter_label.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { useAppIndexPatternContext } from '../hooks/use_app_index_pattern';
+import { IndexPattern } from '../../../../../../../../src/plugins/data/public';
 import { useSeriesFilters } from '../hooks/use_series_filters';
 import { FilterValueLabel } from '../../filter_value_label/filter_value_label';
 
@@ -17,6 +17,7 @@ interface Props {
   seriesId: string;
   negate: boolean;
   definitionFilter?: boolean;
+  indexPattern: IndexPattern;
   removeFilter: (field: string, value: string, notVal: boolean) => void;
 }
 
@@ -26,11 +27,10 @@ export function FilterLabel({
   field,
   value,
   negate,
+  indexPattern,
   removeFilter,
   definitionFilter,
 }: Props) {
-  const { indexPattern } = useAppIndexPatternContext();
-
   const { invertFilter } = useSeriesFilters({ seriesId });
 
   return indexPattern ? (

diff --git a/...rvability/public/components/shared/exploratory_view/configurations/constants/constants.ts b/...rvability/public/components/shared/exploratory_view/configurations/constants/constants.ts
@@ -5,8 +5,15 @@
  * 2.0.
  */
 
-import { ReportViewTypeId } from '../../types';
-import { CLS_FIELD, FCP_FIELD, FID_FIELD, LCP_FIELD, TBT_FIELD } from './elasticsearch_fieldnames';
+import { ReportViewType } from '../../types';
+import {
+  CLS_FIELD,
+  FCP_FIELD,
+  FID_FIELD,
+  LCP_FIELD,
+  TBT_FIELD,
+  TRANSACTION_TIME_TO_FIRST_BYTE,
+} from './elasticsearch_fieldnames';
 import {
   AGENT_HOST_LABEL,
   BROWSER_FAMILY_LABEL,
@@ -58,6 +65,7 @@ export const FieldLabels: Record<string, string> = {
   [TBT_FIELD]: TBT_LABEL,
   [FID_FIELD]: FID_LABEL,
   [CLS_FIELD]: CLS_LABEL,
+  [TRANSACTION_TIME_TO_FIRST_BYTE]: 'Page load time',
 
   'monitor.id': MONITOR_ID_LABEL,
   'monitor.status': MONITOR_STATUS_LABEL,
@@ -77,11 +85,11 @@ export const FieldLabels: Record<string, string> = {
   'http.request.method': REQUEST_METHOD,
 };
 
-export const DataViewLabels: Record<ReportViewTypeId, string> = {
-  dist: PERF_DIST_LABEL,
-  kpi: KPI_OVER_TIME_LABEL,
-  cwv: CORE_WEB_VITALS_LABEL,
-  mdd: DEVICE_DISTRIBUTION_LABEL,
+export const DataViewLabels: Record<ReportViewType, string> = {
+  'data-distribution': PERF_DIST_LABEL,
+  'kpi-over-time': KPI_OVER_TIME_LABEL,
+  'core-web-vitals': CORE_WEB_VITALS_LABEL,
+  'device-data-distribution': DEVICE_DISTRIBUTION_LABEL,
 };
 
 export const USE_BREAK_DOWN_COLUMN = 'USE_BREAK_DOWN_COLUMN';

diff --git a/...observability/public/components/shared/exploratory_view/configurations/default_configs.ts b/...observability/public/components/shared/exploratory_view/configurations/default_configs.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { AppDataType, ReportViewTypes } from '../types';
+import { AppDataType, ReportViewType } from '../types';
 import { getRumDistributionConfig } from './rum/data_distribution_config';
 import { getSyntheticsDistributionConfig } from './synthetics/data_distribution_config';
 import { getSyntheticsKPIConfig } from './synthetics/kpi_over_time_config';
@@ -17,31 +17,31 @@ import { getMobileKPIDistributionConfig } from './mobile/distribution_config';
 import { getMobileDeviceDistributionConfig } from './mobile/device_distribution_config';
 
 interface Props {
-  reportType: keyof typeof ReportViewTypes;
+  reportType: ReportViewType;
   indexPattern: IndexPattern;
   dataType: AppDataType;
 }
 
 export const getDefaultConfigs = ({ reportType, dataType, indexPattern }: Props) => {
   switch (dataType) {
     case 'ux':
-      if (reportType === 'dist') {
+      if (reportType === 'data-distribution') {
         return getRumDistributionConfig({ indexPattern });
       }
-      if (reportType === 'cwv') {
+      if (reportType === 'core-web-vitals') {
         return getCoreWebVitalsConfig({ indexPattern });
       }
       return getKPITrendsLensConfig({ indexPattern });
     case 'synthetics':
-      if (reportType === 'dist') {
+      if (reportType === 'data-distribution') {
         return getSyntheticsDistributionConfig({ indexPattern });
       }
       return getSyntheticsKPIConfig({ indexPattern });
     case 'mobile':
-      if (reportType === 'dist') {
+      if (reportType === 'data-distribution') {
         return getMobileKPIDistributionConfig({ indexPattern });
       }
-      if (reportType === 'mdd') {
+      if (reportType === 'device-data-distribution') {
         return getMobileDeviceDistributionConfig({ indexPattern });
       }
       return getMobileKPIConfig({ indexPattern });