Bump eui (#20774) (#20909)

* bump eui * Fixed breaking `EuiPage` changes Mainly adding `EuiPageBody`’s where there were none * bump to 3.0, remove duplicate declaration of EuiFlyoutBody, update jest snapshots * bump eui * bump to 3.0, remove duplicate declaration of EuiFlyoutBody, update jest snapshots * Update jest snapshots in xpack
2025-04-24 09:48:58 -04:00 · 2018-07-17 20:45:11 -04:00 · 2018-07-17 20:45:11 -04:00 · 2355bb10c3
commit 2355bb10c3
parent 215c41c4dc
28 changed files with 1579 additions and 1441 deletions
--- a/package.json
+++ b/package.json
@ -75,7 +75,7 @@
    "url": "https://github.com/elastic/kibana.git"
  },
  "dependencies": {
-    "@elastic/eui": "1.1.0",
+    "@elastic/eui": "3.0.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/numeral": "2.3.2",
    "@elastic/ui-ace": "0.2.3",
--- a/packages/kbn-plugin-generator/sao_template/template/public/components/main/main.js
+++ b/packages/kbn-plugin-generator/sao_template/template/public/components/main/main.js
@ -30,12 +30,12 @@ export class Main extends React.Component {
    const { title } = this.props;
    return (
      <EuiPage>
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>{title} Hello World!</h1>
-          </EuiTitle>
-        </EuiPageHeader>
        <EuiPageBody>
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>{title} Hello World!</h1>
+            </EuiTitle>
+          </EuiPageHeader>
          <EuiPageContent>
            <EuiPageContentHeader>
              <EuiTitle>
--- a/packages/kbn-ui-framework/dist/ui_framework.css
+++ b/packages/kbn-ui-framework/dist/ui_framework.css
--- a/src/core_plugins/inspector_views/public/data/snapshots/data_view.test.js.snap
+++ b/src/core_plugins/inspector_views/public/data/snapshots/data_view.test.js.snap
@ -47,6 +47,7 @@ exports[`Inspector Data View component should render empty state 1`] = `
          >
            <EuiTextColor
              color="subdued"
+              component="span"
            >
              <span
                className="euiTextColor euiTextColor--subdued"
--- a/src/core_plugins/kibana/public/dashboard/listing/snapshots/dashboard_listing.test.js.snap
+++ b/src/core_plugins/kibana/public/dashboard/listing/snapshots/dashboard_listing.test.js.snap
@ -19,6 +19,7 @@ exports[`after fetch hideWriteControls 1`] = `
        <h2>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            Looks like you don't have any dashboards.
          </EuiTextColor>
--- a/src/core_plugins/kibana/public/home/components/snapshots/home.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/snapshots/home.test.js.snap
--- a/src/core_plugins/kibana/public/home/components/snapshots/recently_accessed.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/snapshots/recently_accessed.test.js.snap
@ -12,6 +12,7 @@ exports[`render 1`] = `
    <h3>
      <EuiTextColor
        color="subdued"
+        component="span"
      >
        Recently viewed
      </EuiTextColor>
--- a/src/core_plugins/kibana/public/home/components/snapshots/synopsis.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/snapshots/synopsis.test.js.snap
@ -44,6 +44,7 @@ exports[`props iconType 1`] = `
        <p>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            this is a great tutorial about...
          </EuiTextColor>
@ -99,6 +100,7 @@ exports[`props iconUrl 1`] = `
        <p>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            this is a great tutorial about...
          </EuiTextColor>
@ -144,6 +146,7 @@ exports[`props isBeta 1`] = `
        <p>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            this is a great tutorial about...
          </EuiTextColor>
@ -189,6 +192,7 @@ exports[`render 1`] = `
        <p>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            this is a great tutorial about...
          </EuiTextColor>
--- a/src/core_plugins/kibana/public/home/components/feature_directory.js
+++ b/src/core_plugins/kibana/public/home/components/feature_directory.js
@ -26,6 +26,7 @@ import {
  EuiFlexItem,
  EuiFlexGrid,
  EuiPage,
+  EuiPageBody,
  EuiTitle,
  EuiSpacer,
 } from '@elastic/eui';
@ -114,19 +115,21 @@ export class FeatureDirectory extends React.Component {
  render() {
    return (
      <EuiPage className="home">
-        <EuiTitle size="l">
-          <h1>
-            Directory
-          </h1>
-        </EuiTitle>
-        <EuiSpacer size="m" />
-        <EuiTabs className="homeDirectoryTabs">
-          {this.renderTabs()}
-        </EuiTabs>
-        <EuiSpacer />
-        <EuiFlexGrid columns={4}>
-          { this.renderDirectories() }
-        </EuiFlexGrid>
+        <EuiPageBody>
+          <EuiTitle size="l">
+            <h1>
+              Directory
+            </h1>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          <EuiTabs className="homeDirectoryTabs">
+            {this.renderTabs()}
+          </EuiTabs>
+          <EuiSpacer />
+          <EuiFlexGrid columns={4}>
+            { this.renderDirectories() }
+          </EuiFlexGrid>
+        </EuiPageBody>
      </EuiPage>
    );
  }
--- a/src/core_plugins/kibana/public/home/components/home.js
+++ b/src/core_plugins/kibana/public/home/components/home.js
@ -33,6 +33,7 @@ import {
  EuiFlexItem,
  EuiFlexGrid,
  EuiText,
+  EuiPageBody,
 } from '@elastic/eui';

 import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
@ -72,62 +73,63 @@ export function Home({ addBasePath, directories, apmUiEnabled, recentlyAccessed

  return (
    <EuiPage className="home">
+      <EuiPageBody>

-      {recentlyAccessedPanel}
+        {recentlyAccessedPanel}

-      <AddData
-        apmUiEnabled={apmUiEnabled}
-      />
+        <AddData
+          apmUiEnabled={apmUiEnabled}
+        />

-      <EuiSpacer size="l" />
+        <EuiSpacer size="l" />

-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiPanel paddingSize="l">
-            <EuiTitle>
-              <h3>
-                Visualize and Explore Data
-              </h3>
-            </EuiTitle>
-            <EuiSpacer size="m"/>
-            <EuiFlexGrid columns={2}>
-              { renderDirectories(FeatureCatalogueCategory.DATA) }
-            </EuiFlexGrid>
-          </EuiPanel>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiPanel paddingSize="l">
-            <EuiTitle>
-              <h3>
-                Manage and Administer the Elastic Stack
-              </h3>
-            </EuiTitle>
-            <EuiSpacer size="m"/>
-            <EuiFlexGrid columns={2}>
-              { renderDirectories(FeatureCatalogueCategory.ADMIN) }
-            </EuiFlexGrid>
-          </EuiPanel>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiPanel paddingSize="l">
+              <EuiTitle>
+                <h3>
+                  Visualize and Explore Data
+                </h3>
+              </EuiTitle>
+              <EuiSpacer size="m"/>
+              <EuiFlexGrid columns={2}>
+                { renderDirectories(FeatureCatalogueCategory.DATA) }
+              </EuiFlexGrid>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel paddingSize="l">
+              <EuiTitle>
+                <h3>
+                  Manage and Administer the Elastic Stack
+                </h3>
+              </EuiTitle>
+              <EuiSpacer size="m"/>
+              <EuiFlexGrid columns={2}>
+                { renderDirectories(FeatureCatalogueCategory.ADMIN) }
+              </EuiFlexGrid>
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>

-      <EuiSpacer size="l" />
-
-      <EuiFlexGroup justifyContent="center">
-        <EuiFlexItem grow={false}>
-          <EuiText>
-            <p>
-              Didn’t find what you were looking for?
-            </p>
-          </EuiText>
-          <EuiSpacer size="s" />
-          <EuiButton
-            href="#/home/feature_directory"
-          >
-            View full directory of Kibana plugins
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        <EuiSpacer size="l" />

+        <EuiFlexGroup justifyContent="center">
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <p>
+                Didn’t find what you were looking for?
+              </p>
+            </EuiText>
+            <EuiSpacer size="s" />
+            <EuiButton
+              href="#/home/feature_directory"
+            >
+              View full directory of Kibana plugins
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageBody>
    </EuiPage>
  );
 }
--- a/src/core_plugins/kibana/public/home/components/tutorial/snapshots/tutorial.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/snapshots/tutorial.test.js.snap
@ -5,68 +5,72 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
  className="home"
  restrictWidth={false}
 >
-  <EuiLink
-    color="primary"
-    href="#/home"
-    type="button"
-  >
-    Home
-  </EuiLink>
-   / 
-  <EuiLink
-    color="primary"
-    href="#/home/tutorial_directory"
-    type="button"
-  >
-    Add Data
-  </EuiLink>
-  <EuiSpacer
-    size="s"
-  />
-  <div>
-    <Introduction
-      description="tutorial used to drive jest tests"
-      isBeta={false}
-      title="jest test tutorial"
-    />
+  <EuiPageBody>
+    <div>
+      <EuiLink
+        color="primary"
+        href="#/home"
+        type="button"
+      >
+        Home
+      </EuiLink>
+       / 
+      <EuiLink
+        color="primary"
+        href="#/home/tutorial_directory"
+        type="button"
+      >
+        Add Data
+      </EuiLink>
+    </div>
    <EuiSpacer
-      size="l"
+      size="s"
    />
-    <div
-      className="text-center"
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <EuiPanel
-      grow={true}
-      hasShadow={false}
-      paddingSize="l"
-    >
-      <InstructionSet
-        instructionVariants={
-          Array [
-            Object {
-              "id": "platform id",
-              "instructions": Array [
-                Object {
-                  "title": "onPrem instructions",
-                },
-              ],
-            },
-          ]
-        }
-        key="0"
-        offset={1}
-        onStatusCheck={[Function]}
-        paramValues={Object {}}
-        replaceTemplateStrings={[Function]}
-        setParameter={[Function]}
-        statusCheckState="NOT_CHECKED"
-        title="Instruction title"
+    <div>
+      <Introduction
+        description="tutorial used to drive jest tests"
+        isBeta={false}
+        title="jest test tutorial"
      />
-    </EuiPanel>
-  </div>
+      <EuiSpacer
+        size="l"
+      />
+      <div
+        className="text-center"
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <EuiPanel
+        grow={true}
+        hasShadow={false}
+        paddingSize="l"
+      >
+        <InstructionSet
+          instructionVariants={
+            Array [
+              Object {
+                "id": "platform id",
+                "instructions": Array [
+                  Object {
+                    "title": "onPrem instructions",
+                  },
+                ],
+              },
+            ]
+          }
+          key="0"
+          offset={1}
+          onStatusCheck={[Function]}
+          paramValues={Object {}}
+          replaceTemplateStrings={[Function]}
+          setParameter={[Function]}
+          statusCheckState="NOT_CHECKED"
+          title="Instruction title"
+        />
+      </EuiPanel>
+    </div>
+  </EuiPageBody>
 </EuiPage>
 `;

@ -75,87 +79,91 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
  className="home"
  restrictWidth={false}
 >
-  <EuiLink
-    color="primary"
-    href="#/home"
-    type="button"
-  >
-    Home
-  </EuiLink>
-   / 
-  <EuiLink
-    color="primary"
-    href="#/home/tutorial_directory"
-    type="button"
-  >
-    Add Data
-  </EuiLink>
-  <EuiSpacer
-    size="s"
-  />
-  <div>
-    <Introduction
-      description="tutorial used to drive jest tests"
-      iconType="logoApache"
-      isBeta={false}
-      title="jest test tutorial"
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <div
-      className="text-center"
-    >
-      <RadioButtonGroup
-        buttons={
-          Array [
-            Object {
-              "dataTestSubj": "onPremBtn",
-              "label": "Self managed",
-              "onClick": [Function],
-            },
-            Object {
-              "dataTestSubj": "onPremElasticCloudBtn",
-              "label": "Elastic Cloud",
-              "onClick": [Function],
-            },
-          ]
-        }
-        selectedBtnLabel="Self managed"
-      />
+  <EuiPageBody>
+    <div>
+      <EuiLink
+        color="primary"
+        href="#/home"
+        type="button"
+      >
+        Home
+      </EuiLink>
+       / 
+      <EuiLink
+        color="primary"
+        href="#/home/tutorial_directory"
+        type="button"
+      >
+        Add Data
+      </EuiLink>
    </div>
    <EuiSpacer
-      size="l"
+      size="s"
    />
-    <EuiPanel
-      grow={true}
-      hasShadow={false}
-      paddingSize="l"
-    >
-      <InstructionSet
-        instructionVariants={
-          Array [
-            Object {
-              "id": "platform id",
-              "instructions": Array [
-                Object {
-                  "title": "onPrem instructions",
-                },
-              ],
-            },
-          ]
-        }
-        key="0"
-        offset={1}
-        onStatusCheck={[Function]}
-        paramValues={Object {}}
-        replaceTemplateStrings={[Function]}
-        setParameter={[Function]}
-        statusCheckState="NOT_CHECKED"
-        title="Instruction title"
+    <div>
+      <Introduction
+        description="tutorial used to drive jest tests"
+        iconType="logoApache"
+        isBeta={false}
+        title="jest test tutorial"
      />
-    </EuiPanel>
-  </div>
+      <EuiSpacer
+        size="l"
+      />
+      <div
+        className="text-center"
+      >
+        <RadioButtonGroup
+          buttons={
+            Array [
+              Object {
+                "dataTestSubj": "onPremBtn",
+                "label": "Self managed",
+                "onClick": [Function],
+              },
+              Object {
+                "dataTestSubj": "onPremElasticCloudBtn",
+                "label": "Elastic Cloud",
+                "onClick": [Function],
+              },
+            ]
+          }
+          selectedBtnLabel="Self managed"
+        />
+      </div>
+      <EuiSpacer
+        size="l"
+      />
+      <EuiPanel
+        grow={true}
+        hasShadow={false}
+        paddingSize="l"
+      >
+        <InstructionSet
+          instructionVariants={
+            Array [
+              Object {
+                "id": "platform id",
+                "instructions": Array [
+                  Object {
+                    "title": "onPrem instructions",
+                  },
+                ],
+              },
+            ]
+          }
+          key="0"
+          offset={1}
+          onStatusCheck={[Function]}
+          paramValues={Object {}}
+          replaceTemplateStrings={[Function]}
+          setParameter={[Function]}
+          statusCheckState="NOT_CHECKED"
+          title="Instruction title"
+        />
+      </EuiPanel>
+    </div>
+  </EuiPageBody>
 </EuiPage>
 `;

@ -164,68 +172,72 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
  className="home"
  restrictWidth={false}
 >
-  <EuiLink
-    color="primary"
-    href="#/home"
-    type="button"
-  >
-    Home
-  </EuiLink>
-   / 
-  <EuiLink
-    color="primary"
-    href="#/home/tutorial_directory"
-    type="button"
-  >
-    Add Data
-  </EuiLink>
-  <EuiSpacer
-    size="s"
-  />
-  <div>
-    <Introduction
-      description="tutorial used to drive jest tests"
-      iconType="logoApache"
-      isBeta={false}
-      title="jest test tutorial"
-    />
+  <EuiPageBody>
+    <div>
+      <EuiLink
+        color="primary"
+        href="#/home"
+        type="button"
+      >
+        Home
+      </EuiLink>
+       / 
+      <EuiLink
+        color="primary"
+        href="#/home/tutorial_directory"
+        type="button"
+      >
+        Add Data
+      </EuiLink>
+    </div>
    <EuiSpacer
-      size="l"
+      size="s"
    />
-    <div
-      className="text-center"
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <EuiPanel
-      grow={true}
-      hasShadow={false}
-      paddingSize="l"
-    >
-      <InstructionSet
-        instructionVariants={
-          Array [
-            Object {
-              "id": "platform id",
-              "instructions": Array [
-                Object {
-                  "title": "elasticCloud instructions",
-                },
-              ],
-            },
-          ]
-        }
-        key="0"
-        offset={1}
-        onStatusCheck={[Function]}
-        paramValues={Object {}}
-        replaceTemplateStrings={[Function]}
-        setParameter={[Function]}
-        statusCheckState="NOT_CHECKED"
-        title="Instruction title"
+    <div>
+      <Introduction
+        description="tutorial used to drive jest tests"
+        iconType="logoApache"
+        isBeta={false}
+        title="jest test tutorial"
      />
-    </EuiPanel>
-  </div>
+      <EuiSpacer
+        size="l"
+      />
+      <div
+        className="text-center"
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <EuiPanel
+        grow={true}
+        hasShadow={false}
+        paddingSize="l"
+      >
+        <InstructionSet
+          instructionVariants={
+            Array [
+              Object {
+                "id": "platform id",
+                "instructions": Array [
+                  Object {
+                    "title": "elasticCloud instructions",
+                  },
+                ],
+              },
+            ]
+          }
+          key="0"
+          offset={1}
+          onStatusCheck={[Function]}
+          paramValues={Object {}}
+          replaceTemplateStrings={[Function]}
+          setParameter={[Function]}
+          statusCheckState="NOT_CHECKED"
+          title="Instruction title"
+        />
+      </EuiPanel>
+    </div>
+  </EuiPageBody>
 </EuiPage>
 `;
--- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
@ -25,7 +25,7 @@ import { Footer } from './footer';
 import { Introduction } from './introduction';
 import { InstructionSet } from './instruction_set';
 import { RadioButtonGroup } from './radio_button_group';
-import { EuiSpacer, EuiPage, EuiPanel, EuiLink, EuiText } from '@elastic/eui';
+import { EuiSpacer, EuiPage, EuiPanel, EuiLink, EuiText, EuiPageBody } from '@elastic/eui';
 import * as StatusCheckStates from './status_check_states';

 const INSTRUCTIONS_TYPE = {
@ -313,10 +313,15 @@ export class Tutorial extends React.Component {
    }
    return (
      <EuiPage className="home">
+        <EuiPageBody>

-        <EuiLink href="#/home">Home</EuiLink> / <EuiLink href="#/home/tutorial_directory">Add Data</EuiLink>
-        <EuiSpacer size="s" />
-        {content}
+          <div>
+            <EuiLink href="#/home">Home</EuiLink> / <EuiLink href="#/home/tutorial_directory">Add Data</EuiLink>
+          </div>
+          <EuiSpacer size="s" />
+          {content}
+
+        </EuiPageBody>
      </EuiPage>
    );
  }
--- a/src/core_plugins/kibana/public/home/components/tutorial_directory.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial_directory.js
@ -31,6 +31,7 @@ import {
  EuiFlexGrid,
  EuiSpacer,
  EuiTitle,
+  EuiPageBody,
 } from '@elastic/eui';


@ -213,25 +214,27 @@ export class TutorialDirectory extends React.Component {
  render() {
    return (
      <EuiPage className="home">
+        <EuiPageBody>

-        <a className="kuiLink" href="#/home">Home</a>
-        <EuiSpacer size="s" />
-        <EuiTitle size="l">
-          <h1>
-            Add Data to Kibana
-          </h1>
-        </EuiTitle>
+          <a className="kuiLink" href="#/home">Home</a>
+          <EuiSpacer size="s" />
+          <EuiTitle size="l">
+            <h1>
+              Add Data to Kibana
+            </h1>
+          </EuiTitle>

-        <EuiSpacer size="m" />
+          <EuiSpacer size="m" />

-        <EuiTabs>
-          {this.renderTabs()}
-        </EuiTabs>
-        <EuiSpacer />
-        <EuiFlexGrid columns={4}>
-          { this.renderTab() }
-        </EuiFlexGrid>
+          <EuiTabs>
+            {this.renderTabs()}
+          </EuiTabs>
+          <EuiSpacer />
+          <EuiFlexGrid columns={4}>
+            { this.renderTab() }
+          </EuiFlexGrid>

+        </EuiPageBody>
      </EuiPage>
    );
  }
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/tests/snapshots/empty_state.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/tests/snapshots/empty_state.test.js.snap
@ -24,6 +24,7 @@ exports[`EmptyState should render normally 1`] = `
      >
        <EuiTextColor
          color="subdued"
+          component="span"
        >
          <h2
            style={
@ -45,6 +46,7 @@ exports[`EmptyState should render normally 1`] = `
        <p>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            You'll need to index some data into Elasticsearch before you can create an index pattern.
          </EuiTextColor>
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/tests/snapshots/header.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/tests/snapshots/header.test.js.snap
@ -31,6 +31,7 @@ exports[`Header should render normally 1`] = `
        <p>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
          </EuiTextColor>
@ -85,6 +86,7 @@ exports[`Header should render without including system indices 1`] = `
        <p>
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
          </EuiTextColor>
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/tests/snapshots/loading_state.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/tests/snapshots/loading_state.test.js.snap
@ -24,6 +24,7 @@ exports[`LoadingState should render normally 1`] = `
      >
        <EuiTextColor
          color="subdued"
+          component="span"
        >
          <h2
            style={
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/components/loading_indices/tests/snapshots/loading_indices.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/components/loading_indices/tests/snapshots/loading_indices.test.js.snap
@ -27,6 +27,7 @@ exports[`LoadingIndices should render normally 1`] = `
    >
      <EuiTextColor
        color="subdued"
+        component="span"
      >
        Looking for matching indices...
      </EuiTextColor>
@ -42,6 +43,7 @@ exports[`LoadingIndices should render normally 1`] = `
    >
      <EuiTextColor
        color="subdued"
+        component="span"
      >
        Just a sec...
      </EuiTextColor>
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/components/status_message/tests/snapshots/status_message.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/components/status_message/tests/snapshots/status_message.test.js.snap
@ -7,6 +7,7 @@ exports[`StatusMessage should render with exact matches 1`] = `
 >
  <EuiTextColor
    color="secondary"
+    component="span"
  >
    <EuiIcon
      size="m"
@ -36,6 +37,7 @@ exports[`StatusMessage should render with no partial matches 1`] = `
 >
  <EuiTextColor
    color="default"
+    component="span"
  >
    <span>
      The index pattern you've entered doesn't match any indices. You can match any of your 
@ -56,6 +58,7 @@ exports[`StatusMessage should render with partial matches 1`] = `
 >
  <EuiTextColor
    color="default"
+    component="span"
  >
    <span>
      Your index pattern doesn't match any indices, but you have 
@ -79,6 +82,7 @@ exports[`StatusMessage should render without a query 1`] = `
 >
  <EuiTextColor
    color="default"
+    component="span"
  >
    <span>
      Your index pattern can match any of your 
@ -99,6 +103,7 @@ exports[`StatusMessage should show that no indices exist 1`] = `
 >
  <EuiTextColor
    color="default"
+    component="span"
  >
    <span>
      No Elasticsearch indices match your pattern.
@ -114,6 +119,7 @@ exports[`StatusMessage should show that system indices exist 1`] = `
 >
  <EuiTextColor
    color="default"
+    component="span"
  >
    <span>
      No Elasticsearch indices match your pattern. To view the matching system indices, toggle the switch in the upper right.
--- a/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/tests/snapshots/objects_table.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/tests/snapshots/objects_table.test.js.snap
@ -126,99 +126,101 @@ exports[`ObjectsTable should render normally 1`] = `
 <EuiPage
  restrictWidth={false}
 >
-  <EuiPageContent
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    style={
-      Object {
-        "marginBottom": 16,
-        "marginTop": 16,
-        "maxWidth": 1000,
-      }
-    }
-    verticalPosition="center"
-  >
-    <Header
-      onExportAll={[Function]}
-      onImport={[Function]}
-      onRefresh={[Function]}
-      totalCount={4}
-    />
-    <EuiSpacer
-      size="xs"
-    />
-    <Table
-      filterOptions={
-        Array [
-          Object {
-            "name": "index-pattern",
-            "value": "index-pattern",
-            "view": "index-pattern (0)",
-          },
-          Object {
-            "name": "visualization",
-            "value": "visualization",
-            "view": "visualization (0)",
-          },
-          Object {
-            "name": "dashboard",
-            "value": "dashboard",
-            "view": "dashboard (0)",
-          },
-          Object {
-            "name": "search",
-            "value": "search",
-            "view": "search (0)",
-          },
-        ]
-      }
-      getEditUrl={[Function]}
-      goInApp={[Function]}
-      isSearching={false}
-      itemId="id"
-      items={
-        Array [
-          Object {
-            "icon": "indexPatternApp",
-            "id": "1",
-            "title": "MyIndexPattern*",
-            "type": "index-pattern",
-          },
-          Object {
-            "icon": "search",
-            "id": "2",
-            "title": "MySearch",
-            "type": "search",
-          },
-          Object {
-            "icon": "dashboardApp",
-            "id": "3",
-            "title": "MyDashboard",
-            "type": "dashboard",
-          },
-          Object {
-            "icon": "visualizeApp",
-            "id": "4",
-            "title": "MyViz",
-            "type": "visualization",
-          },
-        ]
-      }
-      onDelete={[Function]}
-      onExport={[Function]}
-      onQueryChange={[Function]}
-      onShowRelationships={[Function]}
-      onTableChange={[Function]}
-      pageIndex={0}
-      pageSize={15}
-      selectedSavedObjects={Array []}
-      selectionConfig={
+  <EuiPageBody>
+    <EuiPageContent
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      style={
        Object {
-          "onSelectionChange": [Function],
+          "marginBottom": 16,
+          "marginTop": 16,
+          "maxWidth": 1000,
        }
      }
-      totalItemCount={4}
-    />
-  </EuiPageContent>
+      verticalPosition="center"
+    >
+      <Header
+        onExportAll={[Function]}
+        onImport={[Function]}
+        onRefresh={[Function]}
+        totalCount={4}
+      />
+      <EuiSpacer
+        size="xs"
+      />
+      <Table
+        filterOptions={
+          Array [
+            Object {
+              "name": "index-pattern",
+              "value": "index-pattern",
+              "view": "index-pattern (0)",
+            },
+            Object {
+              "name": "visualization",
+              "value": "visualization",
+              "view": "visualization (0)",
+            },
+            Object {
+              "name": "dashboard",
+              "value": "dashboard",
+              "view": "dashboard (0)",
+            },
+            Object {
+              "name": "search",
+              "value": "search",
+              "view": "search (0)",
+            },
+          ]
+        }
+        getEditUrl={[Function]}
+        goInApp={[Function]}
+        isSearching={false}
+        itemId="id"
+        items={
+          Array [
+            Object {
+              "icon": "indexPatternApp",
+              "id": "1",
+              "title": "MyIndexPattern*",
+              "type": "index-pattern",
+            },
+            Object {
+              "icon": "search",
+              "id": "2",
+              "title": "MySearch",
+              "type": "search",
+            },
+            Object {
+              "icon": "dashboardApp",
+              "id": "3",
+              "title": "MyDashboard",
+              "type": "dashboard",
+            },
+            Object {
+              "icon": "visualizeApp",
+              "id": "4",
+              "title": "MyViz",
+              "type": "visualization",
+            },
+          ]
+        }
+        onDelete={[Function]}
+        onExport={[Function]}
+        onQueryChange={[Function]}
+        onShowRelationships={[Function]}
+        onTableChange={[Function]}
+        pageIndex={0}
+        pageSize={15}
+        selectedSavedObjects={Array []}
+        selectionConfig={
+          Object {
+            "onSelectionChange": [Function],
+          }
+        }
+        totalItemCount={4}
+      />
+    </EuiPageContent>
+  </EuiPageBody>
 </EuiPage>
 `;
--- a/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/header/tests/snapshots/header.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/header/tests/snapshots/header.test.js.snap
@ -42,6 +42,7 @@ exports[`Header should render normally 1`] = `
        >
          <EuiTextColor
            color="subdued"
+            component="span"
          >
            <p>
              4
@ -123,6 +124,7 @@ exports[`Header should render normally 1`] = `
    <p>
      <EuiTextColor
        color="subdued"
+        component="span"
      >
        From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen.
      </EuiTextColor>
--- a/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js
+++ b/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js
@ -37,6 +37,7 @@ import {
  EuiToolTip,
  EuiPage,
  EuiPageContent,
+  EuiPageBody,
 } from '@elastic/eui';
 import {
  retrieveAndExportDocs,
@ -467,39 +468,41 @@ export class ObjectsTable extends Component {

    return (
      <EuiPage>
-        <EuiPageContent verticalPosition="center" horizontalPosition="center" style={{ maxWidth: 1000, marginTop: 16, marginBottom: 16 }}>
-          {this.renderFlyout()}
-          {this.renderRelationships()}
-          {this.renderDeleteConfirmModal()}
-          {this.renderExportAllOptionsModal()}
-          <Header
-            onExportAll={() =>
-              this.setState({ isShowingExportAllOptionsModal: true })
-            }
-            onImport={this.showImportFlyout}
-            onRefresh={this.refreshData}
-            totalCount={totalItemCount}
-          />
-          <EuiSpacer size="xs" />
-          <Table
-            itemId={'id'}
-            selectionConfig={selectionConfig}
-            selectedSavedObjects={selectedSavedObjects}
-            onQueryChange={this.onQueryChange}
-            onTableChange={this.onTableChange}
-            filterOptions={filterOptions}
-            onExport={this.onExport}
-            onDelete={this.onDelete}
-            getEditUrl={this.props.getEditUrl}
-            goInApp={this.props.goInApp}
-            pageIndex={page}
-            pageSize={perPage}
-            items={savedObjects}
-            totalItemCount={totalItemCount}
-            isSearching={isSearching}
-            onShowRelationships={this.onShowRelationships}
-          />
-        </EuiPageContent>
+        <EuiPageBody>
+          <EuiPageContent verticalPosition="center" horizontalPosition="center" style={{ maxWidth: 1000, marginTop: 16, marginBottom: 16 }}>
+            {this.renderFlyout()}
+            {this.renderRelationships()}
+            {this.renderDeleteConfirmModal()}
+            {this.renderExportAllOptionsModal()}
+            <Header
+              onExportAll={() =>
+                this.setState({ isShowingExportAllOptionsModal: true })
+              }
+              onImport={this.showImportFlyout}
+              onRefresh={this.refreshData}
+              totalCount={totalItemCount}
+            />
+            <EuiSpacer size="xs" />
+            <Table
+              itemId={'id'}
+              selectionConfig={selectionConfig}
+              selectedSavedObjects={selectedSavedObjects}
+              onQueryChange={this.onQueryChange}
+              onTableChange={this.onTableChange}
+              filterOptions={filterOptions}
+              onExport={this.onExport}
+              onDelete={this.onDelete}
+              getEditUrl={this.props.getEditUrl}
+              goInApp={this.props.goInApp}
+              pageIndex={page}
+              pageSize={perPage}
+              items={savedObjects}
+              totalItemCount={totalItemCount}
+              isSearching={isSearching}
+              onShowRelationships={this.onShowRelationships}
+            />
+          </EuiPageContent>
+        </EuiPageBody>
      </EuiPage>
    );
  }
--- a/src/ui/public/inspector/ui/snapshots/inspector_panel.test.js.snap
+++ b/src/ui/public/inspector/ui/snapshots/inspector_panel.test.js.snap
@ -66,6 +66,7 @@ exports[`InspectorPanel should render as expected 1`] = `
              aria-label="Closes this dialog"
              className="euiFlyout__closeButton"
              color="text"
+              data-test-subj="euiFlyoutCloseButton"
              iconType="cross"
              onClick={[Function]}
              type="button"
@ -73,6 +74,7 @@ exports[`InspectorPanel should render as expected 1`] = `
              <button
                aria-label="Closes this dialog"
                className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                data-test-subj="euiFlyoutCloseButton"
                onClick={[Function]}
                type="button"
              >
--- a/src/ui/public/inspector/ui/inspector_view.tsx
+++ b/src/ui/public/inspector/ui/inspector_view.tsx
@ -21,11 +21,6 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';

-// TODO: Remove once EUI has typing for EuiFlyoutBody
-declare module '@elastic/eui' {
-  export const EuiFlyoutBody: React.SFC<any>;
-}
-
 import { EuiFlyoutBody } from '@elastic/eui';

 /**
--- a/x-pack/plugins/index_management/public/sections/index_list/components/index_table/index_table.js
+++ b/x-pack/plugins/index_management/public/sections/index_list/components/index_table/index_table.js
@ -31,7 +31,8 @@ import {
  EuiTableRowCell,
  EuiTableRowCellCheckbox,
  EuiTitle,
-  EuiText
+  EuiText,
+  EuiPageBody
 } from '@elastic/eui';

 import { IndexActionsContextMenu } from '../../components';
@ -214,78 +215,80 @@ export class IndexTable extends Component {

    return (
      <EuiPage>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="l">
-              <h1>Index management</h1>
-            </EuiTitle>
-            <EuiSpacer size="s" />
-            <EuiText>
-              <p>Update your Elasticsearch indices individually or in bulk</p>
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSwitch
-              id="checkboxShowSystemIndices"
-              checked={showSystemIndices}
-              onChange={event => showSystemIndicesChanged(event.target.checked)}
-              label="Include system indices"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer />
-        <EuiFlexGroup gutterSize="l" alignItems="center">
-          {atLeastOneItemSelected ? (
+        <EuiPageBody>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
            <EuiFlexItem grow={false}>
-              <Route
-                key="menu"
-                render={() => (
-                  <IndexActionsContextMenu
-                    indexNames={Object.keys(selectedIndicesMap)}
-                    resetSelection={() => {
-                      this.setState({ selectedIndicesMap: {} });
-                    }}
-                  />
-                )}
+              <EuiTitle size="l">
+                <h1>Index management</h1>
+              </EuiTitle>
+              <EuiSpacer size="s" />
+              <EuiText>
+                <p>Update your Elasticsearch indices individually or in bulk</p>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiSwitch
+                id="checkboxShowSystemIndices"
+                checked={showSystemIndices}
+                onChange={event => showSystemIndicesChanged(event.target.checked)}
+                label="Include system indices"
              />
            </EuiFlexItem>
-          ) : null}
-          <EuiFlexItem>
-            <EuiFieldSearch
-              fullWidth
-              value={filter}
-              onChange={event => {
-                filterChanged(event.target.value);
-              }}
-              data-test-subj="indexTableFilterInput"
-              placeholder="Search"
-              aria-label="Search indices"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer size="m" />
-
-        {indices.length > 0 ? (
-          <EuiTable>
-            <EuiTableHeader>
-              <EuiTableHeaderCellCheckbox>
-                <EuiCheckbox
-                  id="selectAllIndexes"
-                  checked={this.areAllItemsSelected()}
-                  onChange={this.toggleAll}
-                  type="inList"
+          </EuiFlexGroup>
+          <EuiSpacer />
+          <EuiFlexGroup gutterSize="l" alignItems="center">
+            {atLeastOneItemSelected ? (
+              <EuiFlexItem grow={false}>
+                <Route
+                  key="menu"
+                  render={() => (
+                    <IndexActionsContextMenu
+                      indexNames={Object.keys(selectedIndicesMap)}
+                      resetSelection={() => {
+                        this.setState({ selectedIndicesMap: {} });
+                      }}
+                    />
+                  )}
                />
-              </EuiTableHeaderCellCheckbox>
-              {this.buildHeader()}
-            </EuiTableHeader>
-            <EuiTableBody>{this.buildRows()}</EuiTableBody>
-          </EuiTable>
-        ) : (
-          <NoMatch />
-        )}
-        <EuiSpacer size="m" />
-        {indices.length > 0 ? this.renderPager() : null}
+              </EuiFlexItem>
+            ) : null}
+            <EuiFlexItem>
+              <EuiFieldSearch
+                fullWidth
+                value={filter}
+                onChange={event => {
+                  filterChanged(event.target.value);
+                }}
+                data-test-subj="indexTableFilterInput"
+                placeholder="Search"
+                aria-label="Search indices"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+          <EuiSpacer size="m" />
+
+          {indices.length > 0 ? (
+            <EuiTable>
+              <EuiTableHeader>
+                <EuiTableHeaderCellCheckbox>
+                  <EuiCheckbox
+                    id="selectAllIndexes"
+                    checked={this.areAllItemsSelected()}
+                    onChange={this.toggleAll}
+                    type="inList"
+                  />
+                </EuiTableHeaderCellCheckbox>
+                {this.buildHeader()}
+              </EuiTableHeader>
+              <EuiTableBody>{this.buildRows()}</EuiTableBody>
+            </EuiTable>
+          ) : (
+            <NoMatch />
+          )}
+          <EuiSpacer size="m" />
+          {indices.length > 0 ? this.renderPager() : null}
+        </EuiPageBody>
      </EuiPage>
    );
  }
--- a/x-pack/plugins/monitoring/public/components/cluster/overview/index.js
+++ b/x-pack/plugins/monitoring/public/components/cluster/overview/index.js
@ -11,27 +11,29 @@ import { LogstashPanel } from './logstash_panel';
 import { AlertsPanel } from './alerts_panel';
 import { BeatsPanel } from './beats_panel';

-import { EuiPage } from '@elastic/eui';
+import { EuiPage, EuiPageBody } from '@elastic/eui';

 export function Overview(props) {
  return (
    <EuiPage>
-      <AlertsPanel alerts={props.cluster.alerts} changeUrl={props.changeUrl} />
+      <EuiPageBody>
+        <AlertsPanel alerts={props.cluster.alerts} changeUrl={props.changeUrl} />

-      <ElasticsearchPanel
-        {...props.cluster.elasticsearch}
-        version={props.cluster.version}
-        ml={props.cluster.ml}
-        changeUrl={props.changeUrl}
-        license={props.cluster.license}
-        showLicenseExpiration={props.showLicenseExpiration}
-      />
+        <ElasticsearchPanel
+          {...props.cluster.elasticsearch}
+          version={props.cluster.version}
+          ml={props.cluster.ml}
+          changeUrl={props.changeUrl}
+          license={props.cluster.license}
+          showLicenseExpiration={props.showLicenseExpiration}
+        />

-      <KibanaPanel {...props.cluster.kibana} changeUrl={props.changeUrl} />
+        <KibanaPanel {...props.cluster.kibana} changeUrl={props.changeUrl} />

-      <LogstashPanel {...props.cluster.logstash} changeUrl={props.changeUrl} />
+        <LogstashPanel {...props.cluster.logstash} changeUrl={props.changeUrl} />

-      <BeatsPanel {...props.cluster.beats} changeUrl={props.changeUrl} />
+        <BeatsPanel {...props.cluster.beats} changeUrl={props.changeUrl} />
+      </EuiPageBody>
    </EuiPage>
  );
 }
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/test/snapshots/pipeline_viewer.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/test/snapshots/pipeline_viewer.test.js.snap
@ -4,77 +4,79 @@ exports[`PipelineViewer component passes expected props 1`] = `
 <EuiPage
  restrictWidth={false}
 >
-  <EuiPageContent
-    className="pipelineViewer"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
-  >
-    <StatementSection
-      detailVertex={null}
-      elements={
-        Array [
-          Object {
-            "depth": 0,
-            "id": "standardInput",
-            "parentId": null,
-          },
-        ]
-      }
-      headingText="Inputs"
-      iconType="logstashInput"
-      onShowVertexDetails={[Function]}
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <Queue
-      queue={
-        Object {
-          "hasExplicitId": false,
-          "id": "__QUEUE__",
-          "meta": null,
-          "stats": Array [],
+  <EuiPageBody>
+    <EuiPageContent
+      className="pipelineViewer"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
+    >
+      <StatementSection
+        detailVertex={null}
+        elements={
+          Array [
+            Object {
+              "depth": 0,
+              "id": "standardInput",
+              "parentId": null,
+            },
+          ]
        }
-      }
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <StatementSection
-      detailVertex={null}
-      elements={
-        Array [
+        headingText="Inputs"
+        iconType="logstashInput"
+        onShowVertexDetails={[Function]}
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <Queue
+        queue={
          Object {
-            "depth": 0,
-            "id": "mutate",
-            "parentId": null,
-          },
-        ]
-      }
-      headingText="Filters"
-      iconType="logstashFilter"
-      onShowVertexDetails={[Function]}
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <StatementSection
-      detailVertex={null}
-      elements={
-        Array [
-          Object {
-            "depth": 0,
-            "id": "elasticsearch",
-            "parentId": null,
-          },
-        ]
-      }
-      headingText="Outputs"
-      iconType="logstashOutput"
-      onShowVertexDetails={[Function]}
-    />
-  </EuiPageContent>
+            "hasExplicitId": false,
+            "id": "__QUEUE__",
+            "meta": null,
+            "stats": Array [],
+          }
+        }
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <StatementSection
+        detailVertex={null}
+        elements={
+          Array [
+            Object {
+              "depth": 0,
+              "id": "mutate",
+              "parentId": null,
+            },
+          ]
+        }
+        headingText="Filters"
+        iconType="logstashFilter"
+        onShowVertexDetails={[Function]}
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <StatementSection
+        detailVertex={null}
+        elements={
+          Array [
+            Object {
+              "depth": 0,
+              "id": "elasticsearch",
+              "parentId": null,
+            },
+          ]
+        }
+        headingText="Outputs"
+        iconType="logstashOutput"
+        onShowVertexDetails={[Function]}
+      />
+    </EuiPageContent>
+  </EuiPageBody>
 </EuiPage>
 `;

@ -82,96 +84,98 @@ exports[`PipelineViewer component renders DetailDrawer when selected vertex is n
 <EuiPage
  restrictWidth={false}
 >
-  <EuiPageContent
-    className="pipelineViewer"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
-  >
-    <StatementSection
-      detailVertex={
-        Object {
-          "id": "stdin",
-        }
-      }
-      elements={
-        Array [
+  <EuiPageBody>
+    <EuiPageContent
+      className="pipelineViewer"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
+    >
+      <StatementSection
+        detailVertex={
          Object {
-            "depth": 0,
-            "id": "standardInput",
-            "parentId": null,
-          },
-        ]
-      }
-      headingText="Inputs"
-      iconType="logstashInput"
-      onShowVertexDetails={[Function]}
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <Queue
-      queue={
-        Object {
-          "hasExplicitId": false,
-          "id": "__QUEUE__",
-          "meta": null,
-          "stats": Array [],
+            "id": "stdin",
+          }
        }
-      }
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <StatementSection
-      detailVertex={
-        Object {
-          "id": "stdin",
+        elements={
+          Array [
+            Object {
+              "depth": 0,
+              "id": "standardInput",
+              "parentId": null,
+            },
+          ]
        }
-      }
-      elements={
-        Array [
+        headingText="Inputs"
+        iconType="logstashInput"
+        onShowVertexDetails={[Function]}
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <Queue
+        queue={
          Object {
-            "depth": 0,
-            "id": "mutate",
-            "parentId": null,
-          },
-        ]
-      }
-      headingText="Filters"
-      iconType="logstashFilter"
-      onShowVertexDetails={[Function]}
-    />
-    <EuiSpacer
-      size="l"
-    />
-    <StatementSection
-      detailVertex={
-        Object {
-          "id": "stdin",
+            "hasExplicitId": false,
+            "id": "__QUEUE__",
+            "meta": null,
+            "stats": Array [],
+          }
        }
-      }
-      elements={
-        Array [
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <StatementSection
+        detailVertex={
          Object {
-            "depth": 0,
-            "id": "elasticsearch",
-            "parentId": null,
-          },
-        ]
-      }
-      headingText="Outputs"
-      iconType="logstashOutput"
-      onShowVertexDetails={[Function]}
-    />
-    <DetailDrawer
-      onHide={[Function]}
-      vertex={
-        Object {
-          "id": "stdin",
+            "id": "stdin",
+          }
        }
-      }
-    />
-  </EuiPageContent>
+        elements={
+          Array [
+            Object {
+              "depth": 0,
+              "id": "mutate",
+              "parentId": null,
+            },
+          ]
+        }
+        headingText="Filters"
+        iconType="logstashFilter"
+        onShowVertexDetails={[Function]}
+      />
+      <EuiSpacer
+        size="l"
+      />
+      <StatementSection
+        detailVertex={
+          Object {
+            "id": "stdin",
+          }
+        }
+        elements={
+          Array [
+            Object {
+              "depth": 0,
+              "id": "elasticsearch",
+              "parentId": null,
+            },
+          ]
+        }
+        headingText="Outputs"
+        iconType="logstashOutput"
+        onShowVertexDetails={[Function]}
+      />
+      <DetailDrawer
+        onHide={[Function]}
+        vertex={
+          Object {
+            "id": "stdin",
+          }
+        }
+      />
+    </EuiPageContent>
+  </EuiPageBody>
 </EuiPage>
 `;
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js
@ -13,6 +13,7 @@ import {
  EuiSpacer,
  EuiPage,
  EuiPageContent,
+  EuiPageBody,
 } from '@elastic/eui';

 export class PipelineViewer extends React.Component {
@ -70,34 +71,36 @@ export class PipelineViewer extends React.Component {

    return (
      <EuiPage>
-        <EuiPageContent verticalPosition="center" horizontalPosition="center" className="pipelineViewer">
-          <StatementSection
-            iconType="logstashInput"
-            headingText="Inputs"
-            elements={inputs}
-            onShowVertexDetails={this.onShowVertexDetails}
-            detailVertex={this.state.detailDrawer.vertex}
-          />
-          <EuiSpacer />
-          <Queue queue={queue} />
-          <EuiSpacer />
-          <StatementSection
-            iconType="logstashFilter"
-            headingText="Filters"
-            elements={filters}
-            onShowVertexDetails={this.onShowVertexDetails}
-            detailVertex={this.state.detailDrawer.vertex}
-          />
-          <EuiSpacer />
-          <StatementSection
-            iconType="logstashOutput"
-            headingText="Outputs"
-            elements={outputs}
-            onShowVertexDetails={this.onShowVertexDetails}
-            detailVertex={this.state.detailDrawer.vertex}
-          />
-          { this.renderDetailDrawer() }
-        </EuiPageContent>
+        <EuiPageBody>
+          <EuiPageContent verticalPosition="center" horizontalPosition="center" className="pipelineViewer">
+            <StatementSection
+              iconType="logstashInput"
+              headingText="Inputs"
+              elements={inputs}
+              onShowVertexDetails={this.onShowVertexDetails}
+              detailVertex={this.state.detailDrawer.vertex}
+            />
+            <EuiSpacer />
+            <Queue queue={queue} />
+            <EuiSpacer />
+            <StatementSection
+              iconType="logstashFilter"
+              headingText="Filters"
+              elements={filters}
+              onShowVertexDetails={this.onShowVertexDetails}
+              detailVertex={this.state.detailDrawer.vertex}
+            />
+            <EuiSpacer />
+            <StatementSection
+              iconType="logstashOutput"
+              headingText="Outputs"
+              elements={outputs}
+              onShowVertexDetails={this.onShowVertexDetails}
+              detailVertex={this.state.detailDrawer.vertex}
+            />
+            { this.renderDetailDrawer() }
+          </EuiPageContent>
+        </EuiPageBody>
      </EuiPage>
    );
  }
--- a/yarn.lock
+++ b/yarn.lock
@ -98,6 +98,29 @@
    tabbable "^1.1.0"
    uuid "^3.1.0"

+"@elastic/eui@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-3.0.0.tgz#daa51d5ef32e0c00bcf7b53b7acea91df3a3704c"
+  dependencies:
+    classnames "^2.2.5"
+    core-js "^2.5.1"
+    focus-trap-react "^3.0.4"
+    highlight.js "^9.12.0"
+    html "^1.0.0"
+    keymirror "^0.1.1"
+    lodash "^3.10.1"
+    numeral "^2.0.6"
+    prop-types "^15.6.0"
+    react-ace "^5.5.0"
+    react-color "^2.13.8"
+    react-datepicker v1.4.1
+    react-input-autosize "^2.2.1"
+    react-virtualized "^9.18.5"
+    react-vis "1.10.2"
+    serve "^6.3.1"
+    tabbable "^1.1.0"
+    uuid "^3.1.0"
+
 "@elastic/filesaver@1.1.2":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@elastic/filesaver/-/filesaver-1.1.2.tgz#1998ffb3cd89c9da4ec12a7793bfcae10e30c77a"
@ -574,6 +597,13 @@ accepts@1.3.3:
    mime-types "~2.1.11"
    negotiator "0.6.1"

+accepts@~1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  dependencies:
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
 acorn-dynamic-import@^2.0.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
@ -622,6 +652,10 @@ add-event-listener@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/add-event-listener/-/add-event-listener-0.0.1.tgz#a76229ebc64c8aefae204a16273a2f255abea2d0"

+address@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
+
 adm-zip@0.4.7:
  version "0.4.7"
  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
@ -845,6 +879,10 @@ aproba@^1.0.3:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"

+arch@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
+
 are-we-there-yet@~1.1.2:
  version "1.1.4"
  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
@ -852,6 +890,10 @@ are-we-there-yet@~1.1.2:
    delegates "^1.0.0"
    readable-stream "^2.0.6"

+arg@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-2.0.0.tgz#c06e7ff69ab05b3a4a03ebe0407fac4cba657545"
+
 argparse@^1.0.2, argparse@^1.0.7, argparse@~1.0.2:
  version "1.0.10"
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@ -865,6 +907,15 @@ argparse@~0.1.15:
    underscore "~1.7.0"
    underscore.string "~2.4.0"

+args@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/args/-/args-4.0.0.tgz#5ca24cdba43d4b17111c56616f5f2e9d91933954"
+  dependencies:
+    camelcase "5.0.0"
+    chalk "2.3.2"
+    leven "2.1.0"
+    mri "1.1.0"
+
 arr-diff@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@ -1924,6 +1975,12 @@ base@^0.11.1:
    mixin-deep "^1.2.0"
    pascalcase "^0.1.1"

+basic-auth@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.0.tgz#015db3f353e02e56377755f962742e8981e7bbba"
+  dependencies:
+    safe-buffer "5.1.1"
+
 batch-processor@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
@ -1984,14 +2041,14 @@ bluebird@3.4.6:
  version "3.4.6"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"

+bluebird@3.5.1, bluebird@^3.3.0, bluebird@^3.3.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
 bluebird@^2.10.0:
  version "2.11.0"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.11.0.tgz#534b9033c022c9579c56ba3b3e5a5caafbb650e1"

-bluebird@^3.3.0, bluebird@^3.3.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
-
 bmp-js@0.0.3:
  version "0.0.3"
  resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.0.3.tgz#64113e9c7cf1202b376ed607bf30626ebe57b18a"
@ -2091,7 +2148,7 @@ bounce@1.x.x:
    boom "7.x.x"
    hoek "5.x.x"

-boxen@^1.2.1, boxen@^1.2.2:
+boxen@1.3.0, boxen@^1.2.1, boxen@^1.2.2:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
  dependencies:
@ -2452,6 +2509,10 @@ camelcase-keys@^3.0.0:
    camelcase "^3.0.0"
    map-obj "^1.0.0"

+camelcase@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
+
 camelcase@^1.0.2:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
@ -2548,6 +2609,30 @@ chai@3.5.0, "chai@>=1.9.2 <4.0.0":
    deep-eql "^0.1.3"
    type-detect "^1.0.0"

+chalk@2.3.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.0.tgz#a060a297a6b57e15b61ca63ce84995daa0fe6e52"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@2.4.1, chalk@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3, chalk@~1.1.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@ -2558,22 +2643,6 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3, chalk@~1.1.1:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@~0.5.1:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
@ -2805,6 +2874,13 @@ clipboard@^1.6.1:
    select "^1.1.2"
    tiny-emitter "^2.0.0"

+clipboardy@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
+  dependencies:
+    arch "^2.1.0"
+    execa "^0.8.0"
+
 cliui@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@ -3018,6 +3094,24 @@ component-inherit@0.0.3:
  version "0.0.3"
  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"

+compressible@~2.0.13:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.14.tgz#326c5f507fbb055f54116782b969a81b67a29da7"
+  dependencies:
+    mime-db ">= 1.34.0 < 2"
+
+compression@^1.6.2:
+  version "1.7.2"
+  resolved "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69"
+  dependencies:
+    accepts "~1.3.4"
+    bytes "3.0.0"
+    compressible "~2.0.13"
+    debug "2.6.9"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    vary "~1.1.2"
+
 concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@ -3132,7 +3226,7 @@ content-type-parser@^1.0.1, content-type-parser@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"

-content-type@~1.0.1, content-type@~1.0.4:
+content-type@1.0.4, content-type@~1.0.1, content-type@~1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"

@ -3717,6 +3811,10 @@ d@1:
  dependencies:
    es5-ext "^0.10.9"

+dargs@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-5.1.0.tgz#ec7ea50c78564cd36c9d5ec18f66329fade27829"
+
 dashdash@^1.12.0:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@ -3768,7 +3866,7 @@ debug@2.6.0:
  dependencies:
    ms "0.7.2"

-debug@2.6.9, debug@2.X, debug@^2.1.1, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@2.X, debug@^2.1.1, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
  dependencies:
@ -3965,7 +4063,7 @@ depd@~1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/depd/-/depd-1.0.1.tgz#80aec64c9d6d97e65cc2a9caa93c0aa6abf73aaa"

-depd@~1.1.0, depd@~1.1.1:
+depd@~1.1.0, depd@~1.1.1, depd@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"

@ -3976,6 +4074,10 @@ des.js@^1.0.0:
    inherits "^2.0.1"
    minimalistic-assert "^1.0.0"

+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
 detect-indent@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
@ -3990,6 +4092,13 @@ detect-newline@2.X, detect-newline@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"

+detect-port@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-1.2.3.tgz#15bf49820d02deb84bfee0a74876b32d791bf610"
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
 dezalgo@^1.0.0:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
@ -4261,7 +4370,7 @@ encode-uri-query@1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/encode-uri-query/-/encode-uri-query-1.0.0.tgz#d632be4aafe8316c6145007ffb2844c5312b194c"

-encodeurl@~1.0.1:
+encodeurl@~1.0.1, encodeurl@~1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"

@ -4738,6 +4847,10 @@ esutils@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-1.0.0.tgz#8151d358e20c8acc7fb745e7472c0025fe496570"

+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
 even-better@7.0.2:
  version "7.0.2"
  resolved "https://registry.yarnpkg.com/even-better/-/even-better-7.0.2.tgz#d056f429c90ecc20ee9494aca0a751f743504d2e"
@ -4820,6 +4933,18 @@ execa@^0.7.0:
    signal-exit "^3.0.0"
    strip-eof "^1.0.0"

+execa@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@^0.9.0:
  version "0.9.0"
  resolved "https://registry.yarnpkg.com/execa/-/execa-0.9.0.tgz#adb7ce62cf985071f60580deb4a88b9e34712d01"
@ -5138,6 +5263,10 @@ fileset@^2.0.2:
    glob "^7.0.3"
    minimatch "^3.0.3"

+filesize@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+
 fill-keys@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/fill-keys/-/fill-keys-1.0.2.tgz#9a8fa36f4e8ad634e3bf6b4f3c8882551452eb20"
@ -5330,6 +5459,10 @@ fragment-cache@^0.2.1:
  dependencies:
    map-cache "^0.2.2"

+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
 from2@^2.1.1:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
@ -5359,6 +5492,14 @@ fs-extra@6.0.0:
    jsonfile "^4.0.0"
    universalify "^0.1.0"

+fs-extra@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-6.0.1.tgz#8abc128f7946e310135ddc93b98bddb410e7a34b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
@ -6017,9 +6158,9 @@ h2o2@5.1.1:
    joi "9.X.X"
    wreck "9.X.X"

-handlebars@4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.5.tgz#92c6ed6bb164110c50d4d8d0fbddc70806c6f8e7"
+handlebars@4.0.11, handlebars@^4.0.1, handlebars@^4.0.3:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
  dependencies:
    async "^1.4.0"
    optimist "^0.6.1"
@ -6027,9 +6168,9 @@ handlebars@4.0.5:
  optionalDependencies:
    uglify-js "^2.6"

-handlebars@^4.0.1, handlebars@^4.0.3:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+handlebars@4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.5.tgz#92c6ed6bb164110c50d4d8d0fbddc70806c6f8e7"
  dependencies:
    async "^1.4.0"
    optimist "^0.6.1"
@ -6311,7 +6452,7 @@ hoek@3.x.x:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-3.0.4.tgz#268adff66bb6695c69b4789a88b1e0847c3f3123"

-hoek@4.X.X, hoek@4.x.x:
+hoek@4.2.1, hoek@4.X.X, hoek@4.x.x:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"

@ -6674,6 +6815,10 @@ ip-regex@^1.0.1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-1.0.3.tgz#dc589076f659f419c222039a33316f1c7387effd"

+ip@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
 iron@4.x.x:
  version "4.0.5"
  resolved "https://registry.yarnpkg.com/iron/-/iron-4.0.5.tgz#4f042cceb8b9738f346b59aa734c83a89bc31428"
@ -7034,7 +7179,7 @@ is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"

-is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@1.1.0, is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"

@ -7092,6 +7237,10 @@ is-word-character@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.1.tgz#5a03fa1ea91ace8a6eb0c7cd770eb86d65c8befb"

+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+
 isarray@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@ -8109,7 +8258,7 @@ less@2.7.1:
    promise "^7.1.1"
    source-map "^0.5.3"

-leven@^2.1.0:
+leven@2.1.0, leven@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"

@ -8835,6 +8984,22 @@ methods@^1.1.1, methods@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"

+micro-compress@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micro-compress/-/micro-compress-1.0.0.tgz#53f5a80b4ad0320ca165a559b6e3df145d4f704f"
+  dependencies:
+    compression "^1.6.2"
+
+micro@9.3.1:
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/micro/-/micro-9.3.1.tgz#0c37eba0171554b1beccda5215ff8ea4e7aa59d6"
+  dependencies:
+    arg "2.0.0"
+    chalk "2.4.0"
+    content-type "1.0.4"
+    is-stream "1.1.0"
+    raw-body "2.3.2"
+
 micromatch@^2.1.5, micromatch@^2.3.11:
  version "2.3.11"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
@ -8882,7 +9047,11 @@ mime-db@1.x.x, mime-db@~1.33.0:
  version "1.33.0"
  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"

-mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
+"mime-db@>= 1.34.0 < 2":
+  version "1.34.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.34.0.tgz#452d0ecff5c30346a6dc1e64b1eaee0d3719ff9a"
+
+mime-types@2.1.18, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
  version "2.1.18"
  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
  dependencies:
@ -8892,6 +9061,10 @@ mime@1.3.x:
  version "1.3.6"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"

+mime@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
 mime@^1.2.11, mime@^1.3.4, mime@^1.4.1:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@ -9051,6 +9224,10 @@ moment@2.x.x, "moment@>= 2.9.0", moment@^2.10.6, moment@^2.13.0, moment@^2.20.1:
  version "2.21.0"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"

+mri@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.0.tgz#5c0a3f29c8ccffbbb1ec941dcec09d71fa32f36a"
+
 ms@0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.0.tgz#865be94c2e7397ad8a57da6a633a6e2f30798b83"
@ -9329,6 +9506,10 @@ node-status-codes@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"

+node-version@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.1.3.tgz#1081c87cce6d2dbbd61d0e51e28c287782678496"
+
 nodemailer@^4.6.4:
  version "4.6.4"
  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-4.6.4.tgz#f0d72d0c6a6ec5f4369fa8f4bf5127a31baa2014"
@ -9560,6 +9741,10 @@ on-finished@~2.3.0:
  dependencies:
    ee-first "1.1.1"

+on-headers@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+
 once@1.x, once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.3.3, once@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@ -9576,6 +9761,16 @@ onetime@^2.0.0:
  dependencies:
    mimic-fn "^1.0.0"

+openssl-self-signed-certificate@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/openssl-self-signed-certificate/-/openssl-self-signed-certificate-1.1.6.tgz#9d3a4776b1a57e9847350392114ad2f915a83dd4"
+
+opn@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
+  dependencies:
+    is-wsl "^1.1.0"
+
 optimist@^0.6.1, optimist@~0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@ -9885,7 +10080,7 @@ path-is-absolute@^1.0.0, path-is-absolute@^1.0.1, path-is-absolute@~1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"

-path-is-inside@^1.0.1, path-is-inside@^1.0.2:
+path-is-inside@1.0.2, path-is-inside@^1.0.1, path-is-inside@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"

@ -9910,6 +10105,12 @@ path-to-regexp@^1.0.0, path-to-regexp@^1.7.0:
  dependencies:
    isarray "0.0.1"

+path-type@3.0.0, path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
 path-type@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@ -9924,12 +10125,6 @@ path-type@^2.0.0:
  dependencies:
    pify "^2.0.0"

-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  dependencies:
-    pify "^3.0.0"
-
 pause-stream@0.0.11:
  version "0.0.11"
  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
@ -10697,7 +10892,7 @@ randomfill@^1.0.3:
    randombytes "^2.0.5"
    safe-buffer "^5.1.0"

-range-parser@^1.2.0:
+range-parser@^1.2.0, range-parser@~1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"

@ -11003,6 +11198,28 @@ react-virtualized@^9.18.5:
    loose-envify "^1.3.0"
    prop-types "^15.6.0"

+react-vis@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.10.2.tgz#7520bd31bb2f81a8faef49cc285f678fd0795242"
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "^1.0.3"
+    d3-color "^1.0.3"
+    d3-contour "^1.1.0"
+    d3-format "^1.2.0"
+    d3-geo "^1.6.4"
+    d3-hierarchy "^1.1.4"
+    d3-interpolate "^1.1.4"
+    d3-sankey "^0.7.1"
+    d3-scale "^1.0.5"
+    d3-shape "^1.1.0"
+    d3-voronoi "^1.1.2"
+    deep-equal "^1.0.1"
+    global "^4.3.1"
+    hoek "4.2.1"
+    prop-types "^15.5.8"
+    react-motion "^0.5.2"
+
 react-vis@^1.8.1:
  version "1.9.2"
  resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.9.2.tgz#4dbd5d91ac820fd39fa7ad1c892198495194f6e3"
@ -11291,14 +11508,14 @@ regexpu-core@^2.0.0:
    regjsgen "^0.2.0"
    regjsparser "^0.1.4"

-registry-auth-token@^3.0.1:
+registry-auth-token@3.3.2, registry-auth-token@^3.0.1:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
  dependencies:
    rc "^1.1.6"
    safe-buffer "^5.0.1"

-registry-url@^3.0.0, registry-url@^3.0.3:
+registry-url@3.1.0, registry-url@^3.0.0, registry-url@^3.0.3:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
  dependencies:
@ -11731,7 +11948,7 @@ rxjs@^6.2.1:
  dependencies:
    tslib "^1.9.0"

-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"

@ -11864,6 +12081,51 @@ semver@~5.3.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"

+send@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.4.0"
+
+serve@^6.3.1:
+  version "6.5.8"
+  resolved "https://registry.yarnpkg.com/serve/-/serve-6.5.8.tgz#fd7ad6b9c10ba12084053030cc1a8b636c0a10a7"
+  dependencies:
+    args "4.0.0"
+    basic-auth "2.0.0"
+    bluebird "3.5.1"
+    boxen "1.3.0"
+    chalk "2.4.1"
+    clipboardy "1.2.3"
+    dargs "5.1.0"
+    detect-port "1.2.3"
+    filesize "3.6.1"
+    fs-extra "6.0.1"
+    handlebars "4.0.11"
+    ip "1.1.5"
+    micro "9.3.1"
+    micro-compress "1.0.0"
+    mime-types "2.1.18"
+    node-version "1.1.3"
+    openssl-self-signed-certificate "1.1.6"
+    opn "5.3.0"
+    path-is-inside "1.0.2"
+    path-type "3.0.0"
+    send "0.16.2"
+    update-check "1.5.1"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@ -12364,7 +12626,7 @@ static-module@^2.2.0:
    static-eval "^2.0.0"
    through2 "~2.0.3"

-statuses@1, "statuses@>= 1.2.1 < 2", "statuses@>= 1.3.1 < 2":
+statuses@1, "statuses@>= 1.2.1 < 2", "statuses@>= 1.3.1 < 2", statuses@~1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"

@ -13438,6 +13700,13 @@ upath@^1.0.0:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.4.tgz#ee2321ba0a786c50973db043a50b7bcba822361d"

+update-check@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/update-check/-/update-check-1.5.1.tgz#24fc52266273cb8684d2f1bf9687c0e52dcf709f"
+  dependencies:
+    registry-auth-token "3.3.2"
+    registry-url "3.1.0"
+
 update-notifier@^0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-0.5.0.tgz#07b5dc2066b3627ab3b4f530130f7eddda07a4cc"
@ -13591,6 +13860,10 @@ value-or-function@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"

+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
 vega-canvas@1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/vega-canvas/-/vega-canvas-1.0.1.tgz#22cfa510af0cfbd920fc6af8b6111d3de5e63c44"