Refactor Observability Overview Page

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

@@ -31,7 +31,7 @@ export function NewsFeed({ items }: Props) {
     // The news feed is manually added/edited, to prevent any errors caused by typos or missing fields,
     // wraps the component with EuiErrorBoundary to avoid breaking the entire page.
     <EuiErrorBoundary>
-      <EuiFlexGrid direction="column" gutterSize="s">
+      <EuiFlexGrid direction="row" gutterSize="s" alignItems="start">
         <EuiFlexItem grow={false}>
           <EuiTitle size="xs">
             <h4>
@@ -58,7 +58,7 @@ function NewsItem({ item }: { item: INewsItem }) {
 
   return (
     <EuiPanel hasBorder={true}>
-      <EuiFlexGrid direction="column" gutterSize="s">
+      <EuiFlexGrid direction="row" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiTitle size="xxs">
             <h4>{item.title.en}</h4>

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

@@ -42,7 +42,7 @@ const resources = [
 
 export function Resources() {
   return (
-    <EuiFlexGrid direction="column">
+    <EuiFlexGrid direction="row">
       <EuiFlexItem grow={false}>
         <EuiTitle size="xs">
           <h4>

x-pack/plugins/observability/public/pages/overview/components/data_assistant_flyout.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 React from 'react';
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiSpacer,
+  EuiText,
+  EuiFlyoutBody,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { ObservabilityStatus } from '../../../components/app/observability_status';
+
+interface DataAsssistantFlyoutProps {
+  onClose: () => void;
+}
+
+export function DataAssistantFlyout({ onClose }: DataAsssistantFlyoutProps) {
+  return (
+    <EuiFlyout
+      ownFocus
+      aria-labelledby="statusVisualizationFlyoutTitle"
+      className="oblt__flyout"
+      size="s"
+      onClose={onClose}
+    >
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2 id="statusVisualizationFlyoutTitle" data-test-subj="statusVisualizationFlyoutTitle">
+            <FormattedMessage
+              id="xpack.observability.overview.statusVisualizationFlyoutTitle"
+              defaultMessage="Data assistant"
+            />
+          </h2>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              id="xpack.observability.overview.statusVisualizationFlyoutDescription"
+              defaultMessage="Track your progress towards adding observability integrations and features."
+            />
+          </p>
+        </EuiText>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <ObservabilityStatus />
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+}

x-pack/plugins/observability/public/pages/overview/components/header_actions.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 React, { useRef } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTourStep,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { DatePicker } from '../../../components/shared/date_picker';
+import { useDatePickerContext } from '../../../hooks/use_date_picker_context';
+import { useObservabilityTourContext } from '../../../components/shared/tour';
+
+export interface HeaderActionsProps {
+  showTour?: boolean;
+  onGuidedSetupClick: () => void;
+  onTimeRangeRefresh: () => void;
+  onTourDismiss: () => void;
+}
+
+export function HeaderActions({
+  showTour = false,
+  onGuidedSetupClick,
+  onTimeRangeRefresh,
+  onTourDismiss,
+}: HeaderActionsProps) {
+  const buttonRef = useRef();
+
+  const { relativeStart, relativeEnd, refreshInterval, refreshPaused } = useDatePickerContext();
+
+  const { endTour, isTourVisible } = useObservabilityTourContext();
+
+  return (
+    <EuiFlexGroup direction="row" gutterSize="s" justifyContent="flexEnd">
+      <EuiFlexItem grow={false}>
+        <DatePicker
+          rangeFrom={relativeStart}
+          rangeTo={relativeEnd}
+          refreshInterval={refreshInterval}
+          refreshPaused={refreshPaused}
+          width="auto"
+          onTimeRangeRefresh={onTimeRangeRefresh}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          // @ts-expect-error the EUI verson that kibana uses right now doesn't have the correct types
+          buttonRef={buttonRef}
+          color="text"
+          data-test-subj="guidedSetupButton"
+          id="guidedSetupButton"
+          iconType="wrench"
+          onClick={() => {
+            if (isTourVisible) {
+              endTour();
+            }
+
+            onGuidedSetupClick();
+          }}
+        >
+          <FormattedMessage
+            id="xpack.observability.overview.guidedSetupButton"
+            defaultMessage="Data assistant"
+          />
+        </EuiButton>
+
+        {showTour ? (
+          <EuiTourStep
+            // @ts-expect-error the EUI verson that kibana uses right now doesn't have the correct types
+            anchor={() => buttonRef.current}
+            step={1}
+            stepsTotal={1}
+            isStepOpen
+            maxWidth={400}
+            onFinish={onTourDismiss}
+            title={i18n.translate('xpack.observability.overview.guidedSetupTourTitle', {
+              defaultMessage: 'Data assistant is always available',
+            })}
+            content={
+              <EuiText size="s">
+                <FormattedMessage
+                  id="xpack.observability.overview.guidedSetupTourContent"
+                  defaultMessage="If you're ever in doubt you can always access the data assistant and view your next steps by clicking here."
+                />
+              </EuiText>
+            }
+            footerAction={
+              <EuiButtonEmpty color="text" flush="right" size="xs" onClick={onTourDismiss}>
+                <FormattedMessage
+                  id="xpack.observability.overview.guidedSetupTourDismissButton"
+                  defaultMessage="Dismiss"
+                />
+              </EuiButtonEmpty>
+            }
+          />
+        ) : null}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/observability/public/pages/overview/components/index.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+export * from './data_assistant_flyout';
 export * from './data_sections';
-export * from './loading_observability';
 export * from './empty_section';
+export * from './header_actions';
+export * from './loading_observability';

x-pack/plugins/observability/public/pages/overview/containers/overview_page/helpers/use_metrics.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { useEffect } from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+
+import { useTrackPageview } from '../../../../..';
+import { useUiTracker } from '../../../../../hooks/use_track_metric';
+import { ObservabilityAppServices } from '../../../../../application/types';
+import { CAPABILITIES_KEYS } from '../constants';
+
+export const useOverviewMetrics = ({ hasAnyData }: { hasAnyData: boolean | undefined }) => {
+  const {
+    application: { capabilities },
+  } = useKibana<ObservabilityAppServices>().services;
+
+  const trackMetric = useUiTracker({ app: 'observability-overview' });
+
+  useTrackPageview({ app: 'observability-overview', path: 'overview' });
+  useTrackPageview({ app: 'observability-overview', path: 'overview', delay: 15000 });
+
+  useEffect(() => {
+    if (hasAnyData !== true) {
+      return;
+    }
+
+    CAPABILITIES_KEYS.forEach((feature) => {
+      if (capabilities[feature].show === false) {
+        trackMetric({
+          metric: `oblt_disabled_feature_${feature === 'infrastructure' ? 'metrics' : feature}`,
+        });
+      }
+    });
+  }, [capabilities, hasAnyData, trackMetric]);
+
+  return {
+    trackMetric,
+  };
+};