[Observability] Landing page for Observability

x-pack/plugins/observability/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": true
+}

x-pack/plugins/observability/public/application/index.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
+import { Home } from '../pages/home';
+
+export const renderApp = (core: CoreStart, { element }: AppMountParameters) => {
+  ReactDOM.render(<Home core={core} />, element);
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};

x-pack/plugins/observability/public/components/action_menu.tsx

@@ -58,6 +58,10 @@ export const SectionLink: React.FC<EuiListGroupItemProps> = (props) => (
   <EuiListGroupItem style={{ padding: 0 }} size={'s'} {...props} />
 );
 
-export const ActionMenuDivider: React.FC<{}> = (props) => <EuiHorizontalRule margin={'s'} />;
+export const ActionMenuDivider: React.FC<{}> = (props) => (
+  <EuiHorizontalRule margin={'s'} />
+);
 
-export const ActionMenu: React.FC<Props> = (props) => <EuiPopover {...props} ownFocus={true} />;
+export const ActionMenu: React.FC<Props> = (props) => (
+  <EuiPopover {...props} ownFocus={true} />
+);

x-pack/plugins/observability/public/hooks/use_track_metric.tsx

@@ -38,9 +38,14 @@ export { METRIC_TYPE };
 export function useUiTracker<Services extends ServiceDeps>({
   app: defaultApp,
 }: { app?: ObservabilityApp } = {}) {
-  const reportUiStats = useKibana<Services>().services?.usageCollection?.reportUiStats;
+  const reportUiStats = useKibana<Services>().services?.usageCollection
+    ?.reportUiStats;
   const trackEvent = useMemo(() => {
-    return ({ app = defaultApp, metric, metricType = METRIC_TYPE.COUNT }: TrackMetricOptions) => {
+    return ({
+      app = defaultApp,
+      metric,
+      metricType = METRIC_TYPE.COUNT,
+    }: TrackMetricOptions) => {
       if (reportUiStats) {
         reportUiStats(app as string, metricType, metric);
       }
@@ -50,10 +55,16 @@ export function useUiTracker<Services extends ServiceDeps>({
 }
 
 export function useTrackMetric<Services extends ServiceDeps>(
-  { app, metric, metricType = METRIC_TYPE.COUNT, delay = 0 }: TrackMetricOptions,
+  {
+    app,
+    metric,
+    metricType = METRIC_TYPE.COUNT,
+    delay = 0,
+  }: TrackMetricOptions,
   effectDependencies: EffectDeps = []
 ) {
-  const reportUiStats = useKibana<Services>().services?.usageCollection?.reportUiStats;
+  const reportUiStats = useKibana<Services>().services?.usageCollection
+    ?.reportUiStats;
 
   useEffect(() => {
     if (!reportUiStats) {
@@ -88,5 +99,8 @@ export function useTrackPageview<Services extends ServiceDeps>(
   { path, ...rest }: TrackPageviewProps,
   effectDependencies: EffectDeps = []
 ) {
-  useTrackMetric<Services>({ ...rest, metric: `pageview__${path}` }, effectDependencies);
+  useTrackMetric<Services>(
+    { ...rest, metric: `pageview__${path}` },
+    effectDependencies
+  );
 }

x-pack/plugins/observability/public/pages/home/index.tsx

@@ -0,0 +1,251 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  EuiButton,
+  EuiFlexGrid,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiImage,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { ISection, Section } from './section';
+import { CoreStart } from '../../../../../../src/core/public';
+
+const appsSection: ISection[] = [
+  {
+    id: 'logs',
+    title: 'Logs',
+    icon: 'logoLogging',
+    description:
+      'The Elastic Stack (sometimes known as the ELK Stack) is the most popular open source logging platform.',
+  },
+  {
+    id: 'apm',
+    title: 'APM',
+    icon: 'logoAPM',
+    description:
+      'See exactly where your application is spending time so you can quickly fix issues and feel good about the code you push.',
+  },
+  {
+    id: 'metrics',
+    title: 'Metrics',
+    icon: 'logoMetrics',
+    description:
+      'Already using the Elastic Stack for logs? Add metrics in just a few steps and correlate metrics and logs in one place.',
+  },
+  {
+    id: 'uptime',
+    title: 'Uptime',
+    icon: 'logoUptime',
+    description:
+      'React to availability issues across your apps and services before they affect users.',
+  },
+];
+
+const tryItOutItemsSection: ISection[] = [
+  {
+    id: 'demo',
+    title: 'Demo Playground',
+    icon: 'play',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet magna at neque dictum.',
+    href: 'https://demo.elastic.co/',
+  },
+  {
+    id: 'sampleData',
+    title: 'Add sample data',
+    icon: 'documents',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet magna at neque dictum.',
+    href: '/app/home#/tutorial_directory/sampleData',
+  },
+];
+
+const FixedContainer = styled.div`
+  position: fixed;
+  width: 100%;
+  top: 49px;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+const OverflowContainer = styled.div`
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #fff;
+`;
+
+const CentralizedContainer = styled.div`
+  width: 1200px;
+  margin: 0 auto;
+`;
+
+const TitleContainer = styled.div`
+  height: 124px;
+  display: flex;
+  align-items: center;
+  background-color: #fafbfd;
+`;
+
+const BodyContainer = styled.div`
+  border-top: 1px solid #d3dae6;
+`;
+
+interface Props {
+  core: CoreStart;
+}
+
+export const Home = ({ core }: Props) => {
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      {
+        text: i18n.translate('observability.home.breadcrumb.observability', {
+          defaultMessage: 'Observability',
+        }),
+      },
+      {
+        text: i18n.translate('observability.home.breadcrumb.gettingStarted', {
+          defaultMessage: 'Getting started',
+        }),
+      },
+    ]);
+  }, [core.chrome]);
+  return (
+    <FixedContainer>
+      <OverflowContainer>
+        <TitleContainer>
+          <CentralizedContainer>
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiIcon type="logoObservability" size="xxl" />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiTitle size="m">
+                  <h1>
+                    {i18n.translate('observability.home.title', {
+                      defaultMessage: 'Observability',
+                    })}
+                  </h1>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </CentralizedContainer>
+        </TitleContainer>
+        <BodyContainer>
+          <CentralizedContainer>
+            <EuiSpacer size="xl" />
+            <EuiFlexGroup direction="column">
+              {/* title and description */}
+              <EuiFlexItem style={{ maxWidth: 567 }}>
+                <EuiTitle size="s">
+                  <h2>
+                    {i18n.translate('observability.home.sectionTitle', {
+                      defaultMessage:
+                        'Observability built on the Elastic Stack',
+                    })}
+                  </h2>
+                </EuiTitle>
+                <EuiSpacer size="m" />
+                <EuiText size="s" color="subdued">
+                  {i18n.translate('observability.home.sectionsubtitle', {
+                    defaultMessage:
+                      'Bring your logs, metrics, and APM traces together at scale in a single stack so you can monitor and react to events happening anywhere in your environment.',
+                  })}
+                </EuiText>
+              </EuiFlexItem>
+
+              {/* Apps sections */}
+              <EuiFlexItem>
+                <EuiSpacer size="s" />
+                <EuiFlexGroup>
+                  <EuiFlexItem>
+                    <EuiFlexGrid columns={2}>
+                      {appsSection.map((app) => (
+                        <Section section={app} key={app.id} />
+                      ))}
+                    </EuiFlexGrid>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiImage
+                      size="xl"
+                      alt="observability overview image"
+                      url="/plugins/observability/assets/observability-overview.png"
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+
+              {/* Get started button */}
+              <EuiFlexItem>
+                <EuiFlexGroup justifyContent="center" gutterSize="none">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      fill
+                      iconType="sortRight"
+                      iconSide="right"
+                      style={{ width: 175 }}
+                      href="/app/home#/tutorial_directory/logging"
+                    >
+                      {i18n.translate('observability.home.getStatedButton', {
+                        defaultMessage: 'Get started',
+                      })}
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+
+              <EuiHorizontalRule margin="xl" />
+
+              {/* Try it out */}
+              <EuiFlexItem>
+                <EuiFlexGroup justifyContent="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiTitle size="s">
+                      <h3>
+                        {i18n.translate('observability.home.tryItOut', {
+                          defaultMessage: 'Try it out',
+                        })}
+                      </h3>
+                    </EuiTitle>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+
+              {/* Try it out sections */}
+              <EuiFlexItem>
+                <EuiFlexGroup justifyContent="center">
+                  {tryItOutItemsSection.map((item) => (
+                    <EuiFlexItem
+                      grow={false}
+                      key={item.id}
+                      style={{ width: 260 }}
+                    >
+                      <EuiPanel hasShadow paddingSize="s">
+                        <Section section={item} />
+                      </EuiPanel>
+                    </EuiFlexItem>
+                  ))}
+                </EuiFlexGroup>
+                <EuiSpacer />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </CentralizedContainer>
+        </BodyContainer>
+      </OverflowContainer>
+    </FixedContainer>
+  );
+};

x-pack/plugins/observability/public/pages/home/section.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+export interface ISection {
+  id: string;
+  title: string;
+  icon: string;
+  description: string;
+  href?: string;
+}
+
+export const Section = ({ section }: { section: ISection }) => {
+  const { id, icon, title, description, href } = section;
+
+  const sectionContent = (
+    <EuiFlexGroup gutterSize="m">
+      <EuiFlexItem grow={false}>
+        <EuiIcon type={icon} size="l" color="black" />
+      </EuiFlexItem>
+      <EuiFlexItem style={{ textAlign: 'left' }}>
+        <EuiTitle size="xs">
+          <h3>
+            {i18n.translate(`observability.section.${id}.title`, {
+              defaultMessage: title,
+            })}
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiText size="s" style={{ whiteSpace: 'normal' }} color="default">
+          {i18n.translate(`observability.section.${id}.description`, {
+            defaultMessage: description,
+          })}
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  if (href) {
+    return (
+      <EuiFlexItem>
+        <EuiButtonEmpty href={href} style={{ height: 'auto' }}>
+          {sectionContent}
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    );
+  }
+  return <EuiFlexItem>{sectionContent}</EuiFlexItem>;
+};