[Observability] New "No Data" screens

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

@@ -5,33 +5,63 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiTitle, EuiFlexItem } from '@elastic/eui';
 import { RumOverview } from '../RumDashboard';
-import { CsmSharedContextProvider } from './CsmSharedContext';
+import { CsmSharedContext, CsmSharedContextProvider } from './CsmSharedContext';
 import { WebApplicationSelect } from './Panels/WebApplicationSelect';
 import { DatePicker } from '../../shared/DatePicker';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { UxEnvironmentFilter } from '../../shared/EnvironmentFilter';
 import { UserPercentile } from './UserPercentile';
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
+import { KibanaPageTemplateProps } from '../../../../../../../src/plugins/kibana_react/public';
 
 export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'Dashboard',
 });
 
 export function RumHome() {
-  const { observability } = useApmPluginContext();
+  const { core, observability } = useApmPluginContext();
   const PageTemplateComponent = observability.navigation.PageTemplate;
 
   const { isSmall, isXXL } = useBreakpoints();
 
   const envStyle = isSmall ? {} : { maxWidth: 500 };
 
+  // TODO: NOT THE RIGHT METRIC TO CHECK
+  const {
+    sharedData: { totalPageViews },
+  } = useContext(CsmSharedContext);
+  const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = !totalPageViews
+    ? {
+        solution: i18n.translate('xpack.apm.ux.overview.solutionName', {
+          defaultMessage: 'Observability',
+        }),
+        actions: {
+          beats: {
+            title: i18n.translate('xpack.apm.ux.overview.beatsCard.title', {
+              defaultMessage: 'Add RUM data',
+            }),
+            description: i18n.translate(
+              'xpack.apm.ux.overview.beatsCard.description',
+              {
+                defaultMessage:
+                  'Use the RUM (JS) agent to collect user experience data.',
+              }
+            ),
+            href: core.http.basePath.prepend(`/app/home#/tutorial/apm`),
+          },
+        },
+        docsLink: core.docLinks.links.observability.guide,
+      }
+    : undefined;
+
   return (
     <CsmSharedContextProvider>
       <PageTemplateComponent
+        noDataConfig={noDataConfig}
         pageHeader={
           isXXL
             ? {

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx

@@ -5,9 +5,12 @@
  * 2.0.
  */
 
-import { EuiPageHeaderProps, EuiPageTemplateProps } from '@elastic/eui';
+import { EuiPageHeaderProps } from '@elastic/eui';
 import React from 'react';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import {
+  useKibana,
+  KibanaPageTemplateProps,
+} from '../../../../../../../src/plugins/kibana_react/public';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { ApmEnvironmentFilter } from '../../shared/EnvironmentFilter';
@@ -31,7 +34,9 @@ export function ApmMainTemplate({
   pageTitle?: React.ReactNode;
   pageHeader?: EuiPageHeaderProps;
   children: React.ReactNode;
-} & EuiPageTemplateProps) {
+} & KibanaPageTemplateProps) {
+  const { http, docLinks } = useKibana().services;
+  const basePath = http?.basePath.get();
   const { services } = useKibana<ApmPluginStartDeps>();
   const { http, docLinks } = services;
   const basePath = http?.basePath.get();

x-pack/plugins/apm/server/routes/historical_data.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { setupRequest } from '../lib/helpers/setup_request';
+import { hasHistoricalAgentData } from '../lib/services/get_services/has_historical_agent_data';
+import { createApmServerRoute } from './create_apm_server_route';
+import { createApmServerRouteRepository } from './create_apm_server_route_repository';
+
+const hasDataRoute = createApmServerRoute({
+  endpoint: 'GET /api/apm/has_data',
+  options: { tags: ['access:apm'] },
+  handler: async (resources) => {
+    const setup = await setupRequest(resources);
+    const hasData = await hasHistoricalAgentData(setup);
+    return { hasData };
+  },
+});
+
+export const historicalDataRouteRepository = createApmServerRouteRepository().add(
+  hasDataRoute
+);

x-pack/plugins/infra/public/pages/logs/page_template.tsx

@@ -6,8 +6,14 @@
  */
 
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 import { useKibanaContextForPlugin } from '../../hooks/use_kibana';
 import type { LazyObservabilityPageTemplateProps } from '../../../../observability/public';
+import { useLogSourceContext } from '../../containers/logs/log_source';
+import {
+  KibanaPageTemplateProps,
+  useKibana,
+} from '../../../../../../src/plugins/kibana_react/public';
 
 export const LogsPageTemplate: React.FC<LazyObservabilityPageTemplateProps> = (
   pageTemplateProps
@@ -17,8 +23,35 @@ export const LogsPageTemplate: React.FC<LazyObservabilityPageTemplateProps> = (
       observability: {
         navigation: { PageTemplate },
       },
+      docLinks,
     },
   } = useKibanaContextForPlugin();
 
-  return <PageTemplate {...pageTemplateProps} />;
+  const { http } = useKibana().services;
+  const basePath = http!.basePath.get();
+
+  const { sourceStatus } = useLogSourceContext();
+  const noDataConfig: KibanaPageTemplateProps['noDataConfig'] =
+    sourceStatus?.logIndexStatus !== 'missing'
+      ? undefined
+      : {
+          solution: i18n.translate('xpack.infra.logs.noDataConfig.solutionName', {
+            defaultMessage: 'Observability',
+          }),
+          actions: {
+            beats: {
+              title: i18n.translate('xpack.infra.logs.noDataConfig.beatsCard.title', {
+                defaultMessage: 'Add logs with Beats',
+              }),
+              description: i18n.translate('xpack.infra.logs.noDataConfig.beatsCard.description', {
+                defaultMessage:
+                  'Use Beats to send logs to Elasticsearch. We make it easy with modules for many popular systems and apps.',
+              }),
+              href: basePath + `/app/home#/tutorial_directory/logging`,
+            },
+          },
+          docsLink: docLinks.links.observability.guide,
+        };
+
+  return <PageTemplate noDataConfig={noDataConfig} {...pageTemplateProps} />;
 };

x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx

@@ -11,7 +11,6 @@ import { LogSourceErrorPage } from '../../../components/logging/log_source_error
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useLogSourceContext } from '../../../containers/logs/log_source';
 import { LogsPageLogsContent } from './page_logs_content';
-import { LogsPageNoIndicesContent } from './page_no_indices_content';
 import { LogsPageTemplate } from '../page_template';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { APP_WRAPPER_CLASS } from '../../../../../../../src/core/public';
@@ -27,14 +26,13 @@ export const StreamPageContent: React.FunctionComponent = () => {
     isUninitialized,
     loadSource,
     latestLoadSourceFailures,
-    sourceStatus,
   } = useLogSourceContext();
 
   if (isLoading || isUninitialized) {
     return <SourceLoadingPage />;
   } else if (hasFailedLoading) {
     return <LogSourceErrorPage errors={latestLoadSourceFailures} onRetry={loadSource} />;
-  } else if (sourceStatus?.logIndexStatus !== 'missing') {
+  } else {
     return (
       <LogStreamPageWrapper className={APP_WRAPPER_CLASS}>
         <LogsPageTemplate
@@ -46,8 +44,6 @@ export const StreamPageContent: React.FunctionComponent = () => {
         </LogsPageTemplate>
       </LogStreamPageWrapper>
     );
-  } else {
-    return <LogsPageNoIndicesContent />;
   }
 };
 

x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx

@@ -5,23 +5,19 @@
  * 2.0.
  */
 
-import { EuiButton, EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiErrorBoundary } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { FilterBar } from './components/filter_bar';
 
 import { DocumentTitle } from '../../../components/document_title';
-import { NoIndices } from '../../../components/empty_states/no_indices';
 
 import { SourceErrorPage } from '../../../components/source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
-import { ViewSourceConfigurationButton } from '../../../components/source_configuration/view_source_configuration_button';
 import { Source } from '../../../containers/metrics_source';
 import { useTrackPageview } from '../../../../../observability/public';
 import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { LayoutView } from './components/layout_view';
-import { useLinkProps } from '../../../hooks/use_link_props';
 import { SavedViewProvider } from '../../../containers/saved_view/saved_view';
 import { DEFAULT_WAFFLE_VIEW_STATE } from './hooks/use_waffle_view_state';
 import { useWaffleOptionsContext } from './hooks/use_waffle_options';
@@ -32,7 +28,6 @@ import { inventoryTitle } from '../../../translations';
 import { SavedViews } from './components/saved_views';
 
 export const SnapshotPage = () => {
-  const uiCapabilities = useKibana().services.application?.capabilities;
   const {
     hasFailedLoadingSource,
     isLoading,
@@ -45,11 +40,6 @@ export const SnapshotPage = () => {
   useTrackPageview({ app: 'infra_metrics', path: 'inventory', delay: 15000 });
   const { source: optionsSource } = useWaffleOptionsContext();
 
-  const tutorialLinkProps = useLinkProps({
-    app: 'home',
-    hash: '/tutorial_directory/metrics',
-  });
-
   useMetricsBreadcrumbs([
     {
       text: inventoryTitle,
@@ -96,43 +86,7 @@ export const SnapshotPage = () => {
       ) : hasFailedLoadingSource ? (
         <SourceErrorPage errorMessage={loadSourceFailureMessage || ''} retry={loadSource} />
       ) : (
-        <NoIndices
-          title={i18n.translate('xpack.infra.homePage.noMetricsIndicesTitle', {
-            defaultMessage: "Looks like you don't have any metrics indices.",
-          })}
-          message={i18n.translate('xpack.infra.homePage.noMetricsIndicesDescription', {
-            defaultMessage: "Let's add some!",
-          })}
-          actions={
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiButton
-                  {...tutorialLinkProps}
-                  color="primary"
-                  fill
-                  data-test-subj="infrastructureViewSetupInstructionsButton"
-                >
-                  {i18n.translate('xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel', {
-                    defaultMessage: 'View setup instructions',
-                  })}
-                </EuiButton>
-              </EuiFlexItem>
-              {uiCapabilities?.infrastructure?.configureSource ? (
-                <EuiFlexItem>
-                  <ViewSourceConfigurationButton
-                    app="metrics"
-                    data-test-subj="configureSourceButton"
-                  >
-                    {i18n.translate('xpack.infra.configureSourceActionLabel', {
-                      defaultMessage: 'Change source configuration',
-                    })}
-                  </ViewSourceConfigurationButton>
-                </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-          }
-          data-test-subj="noMetricsIndicesPrompt"
-        />
+        <MetricsPageTemplate data-test-subj="noMetricsIndicesPrompt" />
       )}
     </EuiErrorBoundary>
   );

x-pack/plugins/infra/public/pages/metrics/page_template.tsx

@@ -5,9 +5,13 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
+import { i18n } from '@kbn/i18n';
 import { useKibanaContextForPlugin } from '../../hooks/use_kibana';
 import type { LazyObservabilityPageTemplateProps } from '../../../../observability/public';
+import { KibanaPageTemplateProps } from '../../../../../../src/plugins/kibana_react/public';
+import { Source } from '../../containers/metrics_source';
+import { useLinkProps } from '../../hooks/use_link_props';
 
 export const MetricsPageTemplate: React.FC<LazyObservabilityPageTemplateProps> = (
   pageTemplateProps
@@ -17,8 +21,36 @@ export const MetricsPageTemplate: React.FC<LazyObservabilityPageTemplateProps> =
       observability: {
         navigation: { PageTemplate },
       },
+      docLinks,
     },
   } = useKibanaContextForPlugin();
 
-  return <PageTemplate {...pageTemplateProps} />;
+  const tutorialLinkProps = useLinkProps({
+    app: 'home',
+    hash: '/tutorial_directory/metrics',
+  });
+
+  const { metricIndicesExist } = useContext(Source.Context);
+  const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = metricIndicesExist
+    ? undefined
+    : {
+        solution: i18n.translate('xpack.infra.metrics.noDataConfig.solutionName', {
+          defaultMessage: 'Observability',
+        }),
+        actions: {
+          beats: {
+            title: i18n.translate('xpack.infra.metrics.noDataConfig.beatsCard.title', {
+              defaultMessage: 'Add metrics with Beats',
+            }),
+            description: i18n.translate('xpack.infra.metrics.noDataConfig.beatsCard.description', {
+              defaultMessage:
+                'Use Beats to send metrics data to Elasticsearch. We make it easy with modules for many popular systems and apps.',
+            }),
+            ...tutorialLinkProps,
+          },
+        },
+        docsLink: docLinks.links.observability.guide,
+      };
+
+  return <PageTemplate noDataConfig={noDataConfig} {...pageTemplateProps} />;
 };

x-pack/plugins/observability/public/components/app/empty_sections/index.tsx

@@ -50,8 +50,8 @@ export function EmptySections() {
             <EuiFlexItem
               key={app.id}
               style={{
-                border: `1px dashed ${theme.eui.euiBorderColor}`,
-                borderRadius: '4px',
+                border: `${theme.eui.euiBorderEditable}`,
+                borderRadius: `${theme.eui.euiBorderRadius}`,
               }}
             >
               <EmptySection section={app} />

x-pack/plugins/observability/public/pages/cases/cases.stories.tsx

@@ -5,11 +5,13 @@
  * 2.0.
  */
 
-import { EuiPageTemplate } from '@elastic/eui';
 import React, { ComponentType } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { CoreStart } from '../../../../../../src/core/public';
-import { createKibanaReactContext } from '../../../../../../src/plugins/kibana_react/public';
+import {
+  createKibanaReactContext,
+  KibanaPageTemplate,
+} from '../../../../../../src/plugins/kibana_react/public';
 import { casesFeatureId } from '../../../common';
 import { PluginContext, PluginContextValue } from '../../context/plugin_context';
 import { AllCasesPage } from './all_cases';
@@ -34,7 +36,7 @@ export default {
       } as unknown) as Partial<CoreStart>);
 
       const pluginContextValue = ({
-        ObservabilityPageTemplate: EuiPageTemplate,
+        ObservabilityPageTemplate: KibanaPageTemplate,
       } as unknown) as PluginContextValue;
 
       return (