[InfraUI] Infrastructure navigation changes

x-pack/plugins/infra/index.ts

@@ -30,7 +30,7 @@ export function infra(kibana: any) {
           defaultMessage: 'Infrastructure',
         }),
         listed: false,
-        url: `/app/${APP_ID}#/home`,
+        url: `/app/${APP_ID}#/infrastructure`,
       },
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
       home: ['plugins/infra/register_feature'],
@@ -46,7 +46,7 @@ export function infra(kibana: any) {
           title: i18n.translate('xpack.infra.linkInfrastructureTitle', {
             defaultMessage: 'Infrastructure',
           }),
-          url: `/app/${APP_ID}#/home`,
+          url: `/app/${APP_ID}#/infrastructure`,
         },
         {
           description: i18n.translate('xpack.infra.linkLogsDescription', {

x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx

@@ -308,4 +308,5 @@ const SuggestionsPanel = styled(EuiPanel).attrs({
   width: 100%;
   margin-top: 2px;
   overflow: hidden;
+  z-index: ${props => props.theme.eui.euiZLevel1};
 `;

x-pack/plugins/infra/public/components/document_title.tsx

@@ -21,13 +21,16 @@ const wrapWithSharedState = () => {
   const TITLE_SUFFIX = ' - Kibana';
 
   return class extends React.Component<DocumentTitleProps, DocumentTitleState> {
-    public readonly state = {
-      index: titles.push('') - 1,
-    };
-
     public componentDidMount() {
-      this.pushTitle(this.getTitle(this.props.title));
-      this.updateDocumentTitle();
+      this.setState(
+        () => {
+          return { index: titles.push('') - 1 };
+        },
+        () => {
+          this.pushTitle(this.getTitle(this.props.title));
+          this.updateDocumentTitle();
+        }
+      );
     }
 
     public componentDidUpdate() {
@@ -53,7 +56,7 @@ const wrapWithSharedState = () => {
     }
 
     private removeTitle() {
-      titles.splice(this.state.index, 1);
+      titles.pop();
     }
 
     private updateDocumentTitle() {

x-pack/plugins/infra/public/components/navigation/routed_tabs.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { EuiTab, EuiTabs } from '@elastic/eui';
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+interface TabConfiguration {
+  title: string;
+  path: string;
+}
+
+interface RoutedTabsProps {
+  tabs: TabConfiguration[];
+}
+
+export class RoutedTabs extends React.Component<RoutedTabsProps> {
+  public render() {
+    return <EuiTabs>{this.renderTabs()}</EuiTabs>;
+  }
+
+  private renderTabs() {
+    return this.props.tabs.map(tab => {
+      return (
+        <Route
+          key={`${tab.path}${tab.title}`}
+          path={tab.path}
+          children={({ match, history }) => (
+            <EuiTab onClick={() => history.push(tab.path)} isSelected={match !== null}>
+              {tab.title}
+            </EuiTab>
+          )}
+        />
+      );
+    });
+  }
+}

x-pack/plugins/infra/public/components/nodes_overview/index.tsx

@@ -3,7 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { get, max, min } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
@@ -132,7 +134,21 @@ export const NodesOverview = injectI18n(
       return (
         <MainContainer>
           <ViewSwitcherContainer>
-            <ViewSwitcher view={view} onChange={this.handleViewChange} />
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <ViewSwitcher view={view} onChange={this.handleViewChange} />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText color="subdued">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.infra.homePage.toolbar.showingLastOneMinuteDataText"
+                      defaultMessage="Showing the last 1 minute of data from the time period"
+                    />
+                  </p>
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </ViewSwitcherContainer>
           {view === 'table' ? (
             <TableContainer>

x-pack/plugins/infra/public/components/waffle/waffle_node_type_switcher.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiKeyPadMenu, EuiKeyPadMenuItemButton } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiButtonGroup } from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 import {
   InfraMetricInput,
@@ -15,55 +15,52 @@ import {
 } from '../../graphql/types';
 
 interface Props {
+  intl: InjectedIntl;
   nodeType: InfraNodeType;
   changeNodeType: (nodeType: InfraNodeType) => void;
   changeGroupBy: (groupBy: InfraPathInput[]) => void;
   changeMetric: (metric: InfraMetricInput) => void;
 }
 
-export class WaffleNodeTypeSwitcher extends React.PureComponent<Props> {
+export class WaffleNodeTypeSwitcherClass extends React.PureComponent<Props> {
   public render() {
+    const { intl } = this.props;
+
+    const nodeOptions = [
+      {
+        id: InfraNodeType.host,
+        label: intl.formatMessage({
+          id: 'xpack.infra.waffle.nodeTypeSwitcher.hostsLabel',
+          defaultMessage: 'Hosts',
+        }),
+      },
+      {
+        id: InfraNodeType.pod,
+        label: 'Kubernetes',
+      },
+      {
+        id: InfraNodeType.container,
+        label: 'Docker',
+      },
+    ];
+
     return (
-      <EuiKeyPadMenu>
-        <EuiKeyPadMenuItemButton
-          label={
-            <FormattedMessage
-              id="xpack.infra.waffle.nodeTypeSwitcher.hostsLabel"
-              defaultMessage="Hosts"
-            />
-          }
-          onClick={this.handleClick(InfraNodeType.host)}
-        >
-          <img
-            src="../plugins/infra/images/hosts.svg"
-            role="presentation"
-            alt=""
-            className="euiIcon euiIcon--large"
-          />
-        </EuiKeyPadMenuItemButton>
-        <EuiKeyPadMenuItemButton label="Kubernetes" onClick={this.handleClick(InfraNodeType.pod)}>
-          <img
-            src="../plugins/infra/images/k8.svg"
-            role="presentation"
-            alt=""
-            className="euiIcon euiIcon--large"
-          />
-        </EuiKeyPadMenuItemButton>
-        <EuiKeyPadMenuItemButton label="Docker" onClick={this.handleClick(InfraNodeType.container)}>
-          <img
-            src="../plugins/infra/images/docker.svg"
-            role="presentation"
-            alt=""
-            className="euiIcon euiIcon--large"
-          />
-        </EuiKeyPadMenuItemButton>
-      </EuiKeyPadMenu>
+      <EuiButtonGroup
+        legend="Node type selection"
+        color="primary"
+        options={nodeOptions}
+        idSelected={this.props.nodeType}
+        onChange={this.handleClick}
+        buttonSize="m"
+      />
     );
   }
 
-  private handleClick = (nodeType: InfraNodeType) => () => {
-    this.props.changeNodeType(nodeType);
+  private handleClick = (nodeType: string) => {
+    this.props.changeNodeType(nodeType as InfraNodeType);
     this.props.changeGroupBy([]);
     this.props.changeMetric({ type: InfraMetricType.cpu });
   };
 }
+
+export const WaffleNodeTypeSwitcher = injectI18n(WaffleNodeTypeSwitcherClass);

x-pack/plugins/infra/public/pages/infrastructure/index.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import React from 'react';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { DocumentTitle } from '../../components/document_title';
+import { HelpCenterContent } from '../../components/help_center_content';
+import { RoutedTabs } from '../../components/navigation/routed_tabs';
+import { ColumnarPage } from '../../components/page';
+import { MetricsExplorerPage } from './metrics_explorer';
+import { SnapshotPage } from './snapshot';
+
+interface InfrastructurePageProps extends RouteComponentProps {
+  intl: InjectedIntl;
+}
+
+export const InfrastructurePage = injectI18n(({ match, intl }: InfrastructurePageProps) => (
+  <ColumnarPage>
+    <DocumentTitle
+      title={intl.formatMessage({
+        id: 'xpack.infra.homePage.documentTitle',
+        defaultMessage: 'Infrastructure',
+      })}
+    />
+
+    <HelpCenterContent
+      feedbackLink="https://discuss.elastic.co/c/infrastructure"
+      feedbackLinkText={intl.formatMessage({
+        id: 'xpack.infra.infrastructure.infrastructureHelpContent.feedbackLinkText',
+        defaultMessage: 'Provide feedback for Infrastructure',
+      })}
+    />
+
+    <RoutedTabs
+      tabs={[
+        {
+          title: 'Snapshot',
+          path: `${match.path}/snapshot`,
+        },
+        // {
+        //   title: 'Metrics explorer',
+        //   path: `${match.path}/metrics-explorer`,
+        // },
+      ]}
+    />
+
+    <Switch>
+      <Route path={`${match.path}/snapshot`} component={SnapshotPage} />
+      <Route path={`${match.path}/metrics-explorer`} component={MetricsExplorerPage} />
+    </Switch>
+  </ColumnarPage>
+));

x-pack/plugins/infra/public/pages/infrastructure/metrics_explorer/index.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 { InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import React from 'react';
+import { DocumentTitle } from '../../../components/document_title';
+
+interface MetricsExplorerPageProps {
+  intl: InjectedIntl;
+}
+
+export const MetricsExplorerPage = injectI18n(({ intl }: MetricsExplorerPageProps) => (
+  <div>
+    <DocumentTitle
+      title={(previousTitle: string) =>
+        intl.formatMessage(
+          {
+            id: 'xpack.infra.infrastructureMetricsExplorerPage.documentTitle',
+            defaultMessage: '{previousTitle} | Metrics explorer',
+          },
+          {
+            previousTitle,
+          }
+        )
+      }
+    />
+    Metrics Explorer
+  </div>
+));