Observability overview page

src/dev/storybook/aliases.ts

@@ -26,4 +26,5 @@ export const storybookAliases = {
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
   security_solution: 'x-pack/plugins/security_solution/scripts/storybook.js',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/scripts/storybook.js',
+  observability: 'x-pack/plugins/observability/scripts/storybook.js',
 };

src/plugins/data/common/constants.ts

@@ -44,7 +44,8 @@ export const UI_SETTINGS = {
   FORMAT_NUMBER_DEFAULT_LOCALE: 'format:number:defaultLocale',
   TIMEPICKER_REFRESH_INTERVAL_DEFAULTS: 'timepicker:refreshIntervalDefaults',
   TIMEPICKER_QUICK_RANGES: 'timepicker:quickRanges',
+  TIMEPICKER_TIME_DEFAULTS: 'timepicker:timeDefaults',
   INDEXPATTERN_PLACEHOLDER: 'indexPattern:placeholder',
   FILTERS_PINNED_BY_DEFAULT: 'filters:pinnedByDefault',
   FILTERS_EDITOR_SUGGEST_VALUES: 'filterEditor:suggestValues',
-};
+} as const;

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

@@ -3,23 +3,61 @@
  * 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 { createHashHistory } from 'history';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
+import { Route, Router, Switch } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
 import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
-import { Home } from '../pages/home';
+import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
 import { PluginContext } from '../context/plugin_context';
+import { useUrlParams } from '../hooks/use_url_params';
+import { routes } from '../routes';
+import { usePluginContext } from '../hooks/use_plugin_context';
+
+const App = () => {
+  return (
+    <>
+      <Switch>
+        {Object.keys(routes).map((key) => {
+          const path = key as keyof typeof routes;
+          const route = routes[path];
+          const Wrapper = () => {
+            const { core } = usePluginContext();
+            useEffect(() => {
+              core.chrome.setBreadcrumbs([
+                {
+                  text: i18n.translate('xpack.observability.observability.breadcrumb.', {
+                    defaultMessage: 'Observability',
+                  }),
+                },
+                ...route.breadcrumb,
+              ]);
+            }, [core]);
+
+            const { query, path: pathParams } = useUrlParams(route.params);
+            return route.handler({ query, path: pathParams });
+          };
+          return <Route key={path} path={path} exact={true} component={Wrapper} />;
+        })}
+      </Switch>
+    </>
+  );
+};
 
 export const renderApp = (core: CoreStart, { element }: AppMountParameters) => {
   const i18nCore = core.i18n;
   const isDarkMode = core.uiSettings.get('theme:darkMode');
+  const history = createHashHistory();
   ReactDOM.render(
     <PluginContext.Provider value={{ core }}>
-      <EuiThemeProvider darkMode={isDarkMode}>
-        <i18nCore.Context>
-          <Home />
-        </i18nCore.Context>
-      </EuiThemeProvider>
+      <Router history={history}>
+        <EuiThemeProvider darkMode={isDarkMode}>
+          <i18nCore.Context>
+            <App />
+          </i18nCore.Context>
+        </EuiThemeProvider>
+      </Router>
     </PluginContext.Provider>,
     element
   );

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

@@ -0,0 +1,27 @@
+/*
+ * 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 { queryAllByTestId, render } from '@testing-library/react';
+import React from 'react';
+import { ChartContainer } from './';
+
+describe('chart container', () => {
+  it('shows loading indicator', () => {
+    const component = render(
+      <ChartContainer height={100} isLoading={true}>
+        <div>My amazing component</div>
+      </ChartContainer>
+    );
+    expect(component.getByTestId('loading')).toBeInTheDocument();
+  });
+  it("doesn't show loading indicator", () => {
+    const component = render(
+      <ChartContainer height={100} isLoading={false}>
+        <div>My amazing component</div>
+      </ChartContainer>
+    );
+    expect(queryAllByTestId(component.container, 'loading')).toEqual([]);
+  });
+});

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { EuiLoadingChart } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
+import { EuiLoadingChartSize } from '@elastic/eui/src/components/loading/loading_chart';
+
+interface Props {
+  isLoading: boolean;
+  height: number;
+  width?: number;
+  iconSize?: EuiLoadingChartSize;
+  children: React.ReactNode;
+}
+
+export const ChartContainer = ({ isLoading, height, children, iconSize = 'xl', width }: Props) => {
+  const style = { height, marginTop: `-${height}px`, marginBottom: 0, width };
+  return (
+    <>
+      {children}
+      {isLoading === true && (
+        <EuiFlexGroup
+          justifyContent="spaceAround"
+          alignItems="center"
+          style={style}
+          data-test-subj="loading"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLoadingChart size={iconSize} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,50 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import { EuiThemeProvider } from '../../../typings';
+import { EmptySection } from './';
+import { ISection } from '../../../typings/section';
+
+describe('EmptySection', () => {
+  it('renders without action button', () => {
+    const section: ISection = {
+      id: 'apm',
+      title: 'APM',
+      icon: 'logoAPM',
+      description: 'foo bar',
+    };
+    const { getByText, queryAllByText } = render(
+      <EuiThemeProvider>
+        <EmptySection section={section} />
+      </EuiThemeProvider>
+    );
+
+    expect(getByText('APM')).toBeInTheDocument();
+    expect(getByText('foo bar')).toBeInTheDocument();
+    expect(queryAllByText('Install agent')).toEqual([]);
+  });
+  it('renders with action button', () => {
+    const section: ISection = {
+      id: 'apm',
+      title: 'APM',
+      icon: 'logoAPM',
+      description: 'foo bar',
+      linkTitle: 'install agent',
+      href: 'https://www.elastic.co',
+    };
+    const { getByText, getByTestId } = render(
+      <EuiThemeProvider>
+        <EmptySection section={section} />
+      </EuiThemeProvider>
+    );
+
+    expect(getByText('APM')).toBeInTheDocument();
+    expect(getByText('foo bar')).toBeInTheDocument();
+    const linkButton = getByTestId('empty-apm') as HTMLAnchorElement;
+    expect(linkButton.href).toEqual('https://www.elastic.co/');
+  });
+});

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

@@ -0,0 +1,41 @@
+/*
+ * 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, EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import React from 'react';
+import { ISection } from '../../../typings/section';
+
+interface Props {
+  section: ISection;
+}
+
+export const EmptySection = ({ section }: Props) => {
+  return (
+    <EuiEmptyPrompt
+      style={{ maxWidth: 'none' }}
+      iconType={section.icon}
+      iconColor="default"
+      title={<h2>{section.title}</h2>}
+      titleSize="xs"
+      body={<EuiText color="default">{section.description}</EuiText>}
+      actions={
+        <>
+          {section.linkTitle && (
+            <EuiButton
+              size="s"
+              color="primary"
+              fill
+              href={section.href}
+              target={section.target}
+              data-test-subj={`empty-${section.id}`}
+            >
+              {section.linkTitle}
+            </EuiButton>
+          )}
+        </>
+      }
+    />
+  );
+};

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

@@ -0,0 +1,32 @@
+/*
+ * 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 { Header } from './';
+import { render } from '@testing-library/react';
+import { EuiThemeProvider } from '../../../typings';
+
+describe('Header', () => {
+  it('renders without add data button', () => {
+    const { getByText, queryAllByText, getByTestId } = render(
+      <EuiThemeProvider>
+        <Header color="#fff" />
+      </EuiThemeProvider>
+    );
+    expect(getByTestId('observability-logo')).toBeInTheDocument();
+    expect(getByText('Observability')).toBeInTheDocument();
+    expect(queryAllByText('Add data')).toEqual([]);
+  });
+  it('renders with add data button', () => {
+    const { getByText, getByTestId } = render(
+      <EuiThemeProvider>
+        <Header color="#fff" showAddData />
+      </EuiThemeProvider>
+    );
+    expect(getByTestId('observability-logo')).toBeInTheDocument();
+    expect(getByText('Observability')).toBeInTheDocument();
+    expect(getByText('Add data')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,63 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+import { EuiButtonEmpty } from '@elastic/eui';
+
+const Container = styled.div<{ color: string }>`
+  background: ${(props) => props.color};
+  border-bottom: ${(props) => props.theme.eui.euiBorderThin};
+`;
+
+const Wrapper = styled.div<{ restrictWidth?: number }>`
+  width: 100%;
+  max-width: ${(props) => `${props.restrictWidth}px`};
+  margin: 0 auto;
+  overflow: hidden;
+  padding: ${(props) => (props.restrictWidth ? 0 : '0 24px')};
+`;
+
+interface Props {
+  color: string;
+  showAddData?: boolean;
+  restrictWidth?: number;
+}
+
+export const Header = ({ color, restrictWidth, showAddData = false }: Props) => {
+  return (
+    <Container color={color}>
+      <Wrapper restrictWidth={restrictWidth}>
+        <EuiSpacer size="l" />
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="logoObservability" size="xxl" data-test-subj="observability-logo" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTitle size="m">
+              <h1>
+                {i18n.translate('xpack.observability.home.title', {
+                  defaultMessage: 'Observability',
+                })}
+              </h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          {showAddData && (
+            <EuiFlexItem style={{ alignItems: 'flex-end' }}>
+              {/* TODO: caue: what is the URL here? */}
+              <EuiButtonEmpty href="https://www.elastic.co" iconType="plusInCircle">
+                {i18n.translate('xpack.observability.home.addData', { defaultMessage: 'Add data' })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+        <EuiSpacer size="l" />
+      </Wrapper>
+    </Container>
+  );
+};

x-pack/plugins/observability/public/components/app/layout/with_header.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { EuiPage, EuiPageBody, EuiPageProps } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+import { Header } from '../header/index';
+
+const getPaddingSize = (props: EuiPageProps) => (props.restrictWidth ? 0 : '24px');
+
+const Page = styled(EuiPage)<EuiPageProps>`
+  background: transparent;
+  padding-right: ${getPaddingSize};
+  padding-left: ${getPaddingSize};
+`;
+
+const Container = styled.div<{ color?: string }>`
+  overflow-y: hidden;
+  min-height: calc(100vh - ${(props) => props.theme.eui.euiHeaderChildSize});
+  background: ${(props) => props.color};
+`;
+
+interface Props {
+  headerColor: string;
+  bodyColor: string;
+  children?: React.ReactNode;
+  restrictWidth?: number;
+  showAddData?: boolean;
+}
+
+export const WithHeaderLayout = ({
+  headerColor,
+  bodyColor,
+  children,
+  restrictWidth,
+  showAddData,
+}: Props) => (
+  <Container color={bodyColor}>
+    <Header color={headerColor} restrictWidth={restrictWidth} showAddData={showAddData} />
+    <Page restrictWidth={restrictWidth}>
+      <EuiPageBody>{children}</EuiPageBody>
+    </Page>
+  </Container>
+);

x-pack/plugins/observability/public/components/app/news/index.scss

@@ -0,0 +1,3 @@
+.newItem__image{
+  @include euiBottomShadowSmall;
+}