Introduce e2e test for page views chart. (#135352)

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/exploratory_view_url.ts

@@ -36,7 +36,7 @@ export function convertToShortUrl(series: SeriesUrl) {
     [URL_KEYS.SELECTED_METRIC]: selectedMetricField,
     [URL_KEYS.HIDDEN]: hidden,
     [URL_KEYS.NAME]: name,
-    [URL_KEYS.COLOR]: color,
+    [URL_KEYS.COLOR]: color ? escape(color) : undefined,
     ...restSeries,
   };
 }

x-pack/plugins/ux/e2e/journeys/index.ts

@@ -6,6 +6,7 @@
  */
 
 export * from './core_web_vitals';
+export * from './page_views';
 export * from './url_ux_query.journey';
 export * from './ux_js_errors.journey';
 export * from './ux_client_metrics.journey';

x-pack/plugins/ux/e2e/journeys/page_views.ts

@@ -0,0 +1,73 @@
+/*
+ * 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, expect, before } from '@elastic/synthetics';
+import { UXDashboardDatePicker } from '../page_objects/date_picker';
+import { byTestId, loginToKibana, waitForLoadingToFinish } from './utils';
+
+journey('Page Views Chart', async ({ page, params }) => {
+  before(async () => {
+    await waitForLoadingToFinish({ page });
+  });
+
+  const queryParams = {
+    percentile: '50',
+    rangeFrom: '2020-05-18T11:51:00.000Z',
+    rangeTo: '2021-10-30T06:37:15.536Z',
+  };
+  const queryString = new URLSearchParams(queryParams).toString();
+
+  const baseUrl = `${params.kibanaUrl}/app/ux`;
+
+  step('Go to UX Dashboard', async () => {
+    await page.goto(`${baseUrl}?${queryString}`, {
+      waitUntil: 'networkidle',
+    });
+    await loginToKibana({
+      page,
+      user: { username: 'elastic', password: 'changeme' },
+    });
+  });
+
+  step('Set date range', async () => {
+    const datePickerPage = new UXDashboardDatePicker(page);
+    await datePickerPage.setDefaultE2eRange();
+  });
+
+  step('Check Page Views charts', async () => {
+    await page.waitForLoadState('networkidle');
+    await page.click(
+      'text=Total page viewsSelect an option: No breakdown, is selectedNo breakdown >> button'
+    );
+    await page.click('button[role="option"]:has-text("Browser")');
+    expect(await page.waitForSelector('text=Chrome'));
+    expect(await page.waitForSelector('text=Chrome Mobile iOS'));
+    expect(await page.waitForSelector('text=Edge'));
+    expect(await page.waitForSelector('text=Safari'));
+    expect(await page.waitForSelector('text=Firefox'));
+  });
+
+  step('can click through to exploratory view', async () => {
+    expect(await page.hover('text=Firefox'));
+    await page.click(
+      `.pageViewsChart  ${byTestId('embeddablePanelToggleMenuIcon')}`
+    );
+    await page.click(byTestId('embeddablePanelAction-expViewExplore'));
+    await page.waitForNavigation();
+  });
+
+  step('renders the chart in exploratory view', async () => {
+    await page.waitForLoadState('networkidle');
+    expect(await page.waitForSelector('text=User experience (RUM)'));
+    expect(await page.waitForSelector('text=Page views'));
+    expect(await page.waitForSelector('text=Chrome'));
+    expect(await page.waitForSelector('text=Chrome Mobile iOS'));
+    expect(await page.waitForSelector('text=Edge'));
+    expect(await page.waitForSelector('text=Safari'));
+    expect(await page.waitForSelector('text=Firefox'));
+  });
+});

x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_views_chart.tsx

@@ -13,13 +13,9 @@ import {
   fromQuery,
   RECORDS_FIELD,
   toQuery,
+  useTheme,
 } from '@kbn/observability-plugin/public';
 import { useHistory } from 'react-router-dom';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '@elastic/eui/dist/eui_charts_theme';
-import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters';
@@ -44,11 +40,7 @@ export function PageViewsChart({ breakdown, uiFilters }: Props) {
   const { ExploratoryViewEmbeddable } = kibana.observability;
   const { start, end } = urlParams;
 
-  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
-
-  const euiChartTheme = darkMode
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
+  const theme = useTheme();
 
   const allSeries: AllSeries = [
     {
@@ -70,7 +62,7 @@ export function PageViewsChart({ breakdown, uiFilters }: Props) {
           : [ALL_VALUES_SELECTED],
       },
       breakdown: breakdown?.fieldName,
-      color: euiChartTheme.theme.colors?.vizColors?.[1],
+      color: theme.eui.euiColorVis1,
     },
   ];
   const onBrushEnd = ({ range }: { range: number[] }) => {

x-pack/plugins/ux/public/components/app/rum_dashboard/page_views_trend/index.tsx

@@ -6,49 +6,20 @@
  */
 
 import React, { useState } from 'react';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { createExploratoryViewUrl } from '@kbn/observability-plugin/public';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { I18LABELS } from '../translations';
 import { BreakdownFilter } from '../breakdowns/breakdown_filter';
 import { PageViewsChart } from '../charts/page_views_chart';
-import { useKibanaServices } from '../../../../hooks/use_kibana_services';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
-import { SERVICE_NAME } from '../../../../../common/elasticsearch_fieldnames';
 
 export function PageViewsTrend() {
-  const { http } = useKibanaServices();
-
-  const { urlParams, uxUiFilters } = useLegacyUrlParams();
-  const { serviceName } = uxUiFilters;
-
-  const { rangeTo, rangeFrom } = urlParams;
+  const { uxUiFilters } = useLegacyUrlParams();
 
   const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
-  const exploratoryViewLink = createExploratoryViewUrl(
-    {
-      reportType: 'kpi-over-time',
-      allSeries: [
-        {
-          name: `${serviceName}-page-views`,
-          dataType: 'ux',
-          time: { from: rangeFrom!, to: rangeTo! },
-          reportDefinitions: {
-            [SERVICE_NAME]: serviceName as string[],
-          },
-          ...(breakdown ? { breakdown: breakdown.fieldName } : {}),
-        },
-      ],
-    },
-    http.basePath.get()
-  );
-
-  const showAnalyzeButton = false;
-
   return (
-    <>
+    <div className="pageViewsChart">
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="xs">
@@ -62,22 +33,8 @@ export function PageViewsTrend() {
             dataTestSubj={'pvBreakdownFilter'}
           />
         </EuiFlexItem>
-        {showAnalyzeButton && (
-          <EuiFlexItem grow={false} style={{ width: 170 }}>
-            <EuiButton
-              size="s"
-              isDisabled={!serviceName?.[0]}
-              href={exploratoryViewLink}
-            >
-              <FormattedMessage
-                id="xpack.ux.pageViews.analyze"
-                defaultMessage="Analyze"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-        )}
       </EuiFlexGroup>
       <PageViewsChart breakdown={breakdown} uiFilters={uxUiFilters} />
-    </>
+    </div>
   );
 }