[Exploratory view] integerate page views to exploratory view (#97258)

x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx

@@ -6,25 +6,37 @@
  */
 
 import React, { useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { I18LABELS } from '../translations';
 import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageViewsChart } from '../Charts/PageViewsChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
+import { createExploratoryViewUrl } from '../../../../../../observability/public';
+import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 
 export function PageViewsTrend() {
-  const { urlParams, uiFilters } = useUrlParams();
+  const {
+    services: { http },
+  } = useKibana();
 
-  const { start, end, searchTerm } = urlParams;
+  const { urlParams, uiFilters } = useUrlParams();
+  const { serviceName } = uiFilters;
+
+  const { start, end, searchTerm, rangeTo, rangeFrom } = urlParams;
 
   const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
   const { data, status } = useFetcher(
     (callApmApi) => {
-      const { serviceName } = uiFilters;
-
       if (start && end && serviceName) {
         return callApmApi({
           endpoint: 'GET /api/apm/rum-client/page-view-trends',
@@ -45,7 +57,21 @@ export function PageViewsTrend() {
       }
       return Promise.resolve(undefined);
     },
-    [end, start, uiFilters, breakdown, searchTerm]
+    [start, end, serviceName, uiFilters, searchTerm, breakdown]
+  );
+
+  const exploratoryViewLink = createExploratoryViewUrl(
+    {
+      [`${serviceName}-page-views`]: {
+        reportType: 'kpi',
+        time: { from: rangeFrom!, to: rangeTo! },
+        reportDefinitions: {
+          'service.name': serviceName?.[0] as string,
+        },
+        ...(breakdown ? { breakdown: breakdown.fieldName } : {}),
+      },
+    },
+    http?.basePath.get()
   );
 
   return (
@@ -63,6 +89,18 @@ export function PageViewsTrend() {
             dataTestSubj={'pvBreakdownFilter'}
           />
         </EuiFlexItem>
+        <EuiFlexItem grow={false} style={{ width: 170 }}>
+          <EuiButton
+            size="s"
+            isDisabled={!serviceName?.[0]}
+            href={exploratoryViewLink}
+          >
+            <FormattedMessage
+              id="xpack.apm.csm.pageViews.analyze"
+              defaultMessage="Analyze"
+            />
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <PageViewsChart data={data} loading={status !== 'success'} />

x-pack/plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx

@@ -6,27 +6,44 @@
  */
 
 import React from 'react';
-import { EuiImage } from '@elastic/eui';
+import { EuiImage, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
 import styled from 'styled-components';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
+import { INITIATING_VIEW } from '../series_builder/series_builder';
 
-export function EmptyView() {
+export function EmptyView({ loading }: { loading: boolean }) {
   const {
     services: { http },
   } = useKibana();
 
   return (
     <Wrapper>
-      <EuiImage
+      {loading && (
+        <EuiProgress
+          size="xs"
+          color="accent"
+          position="absolute"
+          style={{
+            top: 'initial',
+          }}
+        />
+      )}
+      <EuiSpacer />
+      <ImageWrap
         alt="Visulization"
         url={http!.basePath.prepend(`/plugins/observability/assets/kibana_dashboard_light.svg`)}
       />
+      <EuiText>{INITIATING_VIEW}</EuiText>
     </Wrapper>
   );
 }
 
+const ImageWrap = styled(EuiImage)`
+  opacity: 0.4;
+`;
+
 const Wrapper = styled.div`
   text-align: center;
-  opacity: 0.4;
   height: 550px;
+  position: relative;
 `;

x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx

@@ -27,7 +27,7 @@ export function ExploratoryView() {
     null
   );
 
-  const { loadIndexPattern } = useAppIndexPatternContext();
+  const { loadIndexPattern, loading } = useAppIndexPatternContext();
 
   const LensComponent = lens?.EmbeddableComponent;
 
@@ -61,7 +61,7 @@ export function ExploratoryView() {
               attributes={lensAttributes}
             />
           ) : (
-            <EmptyView />
+            <EmptyView loading={loading} />
           )}
           <SeriesEditor />
         </>

x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/series_builder.tsx

@@ -228,9 +228,12 @@ export function SeriesBuilder() {
   );
 }
 
-const INITIATING_VIEW = i18n.translate('xpack.observability.expView.seriesBuilder.initView', {
-  defaultMessage: 'Initiating view ...',
-});
+export const INITIATING_VIEW = i18n.translate(
+  'xpack.observability.expView.seriesBuilder.initView',
+  {
+    defaultMessage: 'Initiating view ...',
+  }
+);
 
 const SELECT_REPORT_TYPE = i18n.translate(
   'xpack.observability.expView.seriesBuilder.selectReportType',